:root{--ink-950:#171310;--ink-900:#221c16;--ink-800:#2e2620;--bone:#e9deca;--bone-dim:#a79a83;--stone-light:#cbbfa5;--stone-dark:#5a5244;--verdigris:#6fa287;--verdigris-deep:#5c8a72;--bronze:#c08a3e;--cannae-red:#b03a2e;--ivory-hi:#f5edda;--ivory-lo:#cbbd9f;--ivory-edge:#9c8e74;--iron-hi:#4a423a;--iron-lo:#26221e;--iron-edge:#100d0b;--font-display:Marcellus, Georgia, serif;--font-body:Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;font-family:var(--font-body);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--bone);background-color:var(--ink-950);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.5}body{place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex}#root{text-align:center;max-width:1280px;margin:0 auto;padding:2rem}button,input{font:inherit}h1{font-family:var(--font-display);letter-spacing:.12em;font-weight:400}:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}.btn{cursor:pointer;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;gap:.5rem;min-height:44px;padding:.7rem 1.4rem;font-size:1rem;font-weight:600;transition:background-color .15s,border-color .15s,color .15s;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--verdigris);color:var(--ink-950)}.btn-primary:hover:not(:disabled){background-color:var(--verdigris-deep)}.btn-quiet{color:var(--bone-dim);border-color:var(--ink-800);background-color:#0000}.btn-quiet:hover:not(:disabled){border-color:var(--bone-dim);color:var(--bone)}.btn-danger-quiet{color:var(--cannae-red);background-color:#0000;border-color:#b03a2e73}.btn-danger-quiet:hover:not(:disabled){border-color:var(--cannae-red);background-color:#b03a2e1f}.btn-sm{min-height:32px;padding:.35rem .8rem;font-size:.85rem}.card{background-color:var(--ink-900);border:1px solid var(--ink-800);border-radius:8px}.chip{background-color:var(--ink-900);border:1px solid var(--ink-800);border-radius:999px;align-items:center;gap:.5rem;padding:.35rem .9rem;font-size:.88rem;font-weight:600;display:inline-flex}.eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);font-size:.72rem;font-weight:600}@keyframes pulse{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}}.board-wrap{grid-template-columns:auto auto;justify-content:center;display:inline-grid}.board-ranks{grid-auto-rows:1fr;padding-right:6px;display:grid}.board-ranks span,.board-files span{color:var(--bone-dim);justify-content:center;align-items:center;font-size:.7rem;font-weight:600;display:flex}.board-files{grid-column:2;grid-auto-columns:1fr;grid-auto-flow:column;padding-top:4px;display:grid}.board{border:4px solid var(--ink-800);flex-direction:column;display:flex}.board-row{display:flex}.square{cursor:pointer;border:none;justify-content:center;align-items:center;width:60px;height:60px;margin:0;padding:0;transition:background-color .15s;display:flex;position:relative}.square.light{background-color:var(--stone-light)}.square.dark{background-color:var(--stone-dark)}.square:hover{filter:brightness(1.1)}.square:focus-visible{outline:2px solid var(--bronze);outline-offset:-2px;z-index:1}.square.last-move{background-image:linear-gradient(#c08a3e38,#c08a3e38)}.square.selected:before{content:"";border:2px solid var(--bronze);pointer-events:none;border-radius:50%;position:absolute;inset:6%}.square.valid{box-shadow:inset 0 0 0 2px #6fa2878c}.square.valid:after{content:"";background-color:var(--verdigris);border-radius:50%;width:16px;height:16px;position:absolute;box-shadow:0 0 0 2px #17131059}.piece{border-radius:50%;width:44px;height:44px;box-shadow:0 3px 6px #00000059,inset 0 1px #ffffff40}.piece.white{background:radial-gradient(circle at 32% 30%, var(--ivory-hi), var(--ivory-lo));border:2px solid var(--ivory-edge)}.piece.black{background:radial-gradient(circle at 32% 30%, var(--iron-hi), var(--iron-lo));border:2px solid var(--iron-edge)}.piece.slide-in{animation:.15s ease-out piece-slide}@keyframes piece-slide{0%{transform:translate(calc(var(--from-dx) * 136.4%), calc(var(--from-dy) * 136.4%))}to{transform:none}}.threat-ring{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.threat-ring circle{fill:none;stroke:var(--cannae-red);stroke-width:2.5px;stroke-dasharray:170;stroke-dashoffset:0;transform-origin:50%;animation:.4s ease-out ring-close;transform:rotate(-90deg)}.threat-ring .notch{fill:var(--cannae-red)}@keyframes ring-close{0%{stroke-dashoffset:170px}to{stroke-dashoffset:0}}.capture-ghost{pointer-events:none;justify-content:center;align-items:center;animation:.35s ease-in .15s both capture-dust;display:flex;position:absolute;inset:0}.capture-ghost .threat-ring circle{animation:.35s ease-in .15s both ring-tighten}@keyframes capture-dust{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.85)}}@keyframes ring-tighten{0%{transform:rotate(-90deg)scale(1)}to{transform:rotate(-90deg)scale(.78)}}.board.disabled{opacity:.7;pointer-events:none}.board.disabled .square{cursor:default}.player-rail{background-color:var(--ink-900);border:1px solid var(--ink-800);border-radius:8px;align-items:center;gap:.6rem;padding:.45rem .75rem;font-size:.85rem;display:flex}.player-rail.active{border-color:var(--bronze)}.rail-name{font-weight:600}.to-place{color:var(--bone-dim);font-variant-numeric:tabular-nums;margin-left:auto}.rail-counters{gap:3px;margin-left:auto;display:flex}.piece-icon{border-radius:50%;flex:none;width:18px;height:18px}.piece-icon.white{background:radial-gradient(circle at 32% 30%, var(--ivory-hi), var(--ivory-lo));border:1px solid var(--ivory-edge)}.piece-icon.black{background:radial-gradient(circle at 32% 30%, var(--iron-hi), var(--iron-lo));border:1px solid var(--iron-edge)}.mini-piece{border-radius:50%;width:12px;height:12px}.mini-piece.white{background-color:var(--bone);border:1px solid var(--ivory-edge)}.mini-piece.black{background-color:var(--iron-hi);border:1px solid var(--iron-edge)}.mini-piece.lost{opacity:.25}.rules{text-align:left;max-width:640px;padding:0 1rem 1rem}.rules-nav{z-index:1;background-color:var(--ink-950);padding:.75rem 0 .5rem;display:flex;position:sticky;top:0}.rules h1{text-align:center;margin-bottom:1.5rem}.rules h2{color:var(--bronze);margin-top:0;margin-bottom:.5rem;font-size:1.3rem}.rules h3{color:var(--bone-dim);margin-top:1rem;margin-bottom:.25rem;font-size:1rem}.rules section{margin-bottom:2rem}.rules p{margin:.5rem 0;line-height:1.6}.rules ul{margin:.5rem 0;padding-left:1.5rem}.rules li{margin:.25rem 0;line-height:1.5}.rule-step{grid-template-columns:1fr auto;align-items:start;gap:1.25rem;display:grid}.rule-step .eyebrow{margin-bottom:.2rem;display:block}.rule-figure{justify-self:end;width:190px;margin:.25rem 0 0}.mini-board{border:1px solid var(--ink-800);border-radius:4px;width:100%;height:auto;display:block}.rule-figure figcaption{color:var(--bone-dim);margin-top:.5rem;font-size:.8rem;line-height:1.45}.rule-formula{background-color:var(--ink-900);border:1px solid var(--ink-800);text-align:center;border-radius:4px;margin:1rem 0;padding:.75rem 1rem;font-family:monospace}.rules .back-button{margin:2rem auto 0;display:block}@media (width<=560px){.rule-step{grid-template-columns:1fr}.rule-figure{justify-self:center;width:min(280px,100%)}}.auth-button-container{align-items:center;gap:.75rem;display:flex}.auth-loading{color:var(--bone-dim);font-size:.875rem}.auth-signed-in{background-color:var(--ink-900);border:1px solid var(--ink-800);border-radius:8px;padding:.5rem .75rem}.auth-user-name{color:var(--bone);font-size:.875rem;font-weight:600}.auth-button{cursor:pointer;border:1px solid #0000;border-radius:4px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:600;transition:background-color .15s,border-color .15s,color .15s;display:flex}.auth-button.google-signin{background-color:var(--bone);color:var(--ink-950)}.auth-button.google-signin:hover{background-color:var(--ivory-hi)}.google-icon{flex-shrink:0}.auth-button.sign-out{color:var(--bone-dim);border-color:var(--ink-800);background-color:#0000;padding:.375rem .75rem;font-size:.75rem}.auth-button.sign-out:hover{border-color:var(--bone-dim);color:var(--bone)}.mode-selection{flex-direction:column;align-items:center;gap:.75rem;padding:1rem 0 2rem;display:flex}.home-auth{align-self:flex-end;min-height:2rem}.mode-selection .wordmark{letter-spacing:.28em;text-transform:uppercase;margin:.25rem 0 0;padding-left:.28em;font-size:clamp(2.4rem,9vw,3.2rem);line-height:1.1}.mode-subtitle{color:var(--bone-dim);margin:0;font-size:1.05rem}.mode-buttons{flex-direction:column;gap:.8rem;width:100%;max-width:340px;margin-top:1.25rem;display:flex}.mode-button{background-color:var(--ink-900);border:1px solid var(--ink-800);cursor:pointer;text-align:left;border-radius:8px;align-items:center;gap:1rem;padding:.9rem 1.1rem;transition:border-color .15s,background-color .15s;display:flex}.mode-button:hover{border-color:var(--bronze);background-color:var(--ink-800)}.mode-glyph{flex:none;width:40px;height:40px}.mode-text{flex-direction:column;gap:.15rem;display:flex}.mode-name{color:var(--bone);font-size:1rem;font-weight:600}.mode-description{color:var(--bone-dim);font-size:.82rem}.how-to-play-button{margin-top:.4rem}.turn-handoff-overlay{z-index:100;background-color:#171310eb;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.turn-handoff-card{background-color:var(--ink-900);border:1px solid var(--ink-800);text-align:center;border-radius:8px;max-width:320px;padding:2.5rem 3rem}.turn-handoff-card h2{color:var(--bone);margin:0 0 1.5rem;font-size:1.5rem}.next-player{text-transform:capitalize;border-radius:6px;margin:0;padding:.75rem 1.5rem;font-size:1.8rem;font-weight:600}.next-player.white{background-color:var(--bone);color:var(--ink-950)}.next-player.black{background-color:var(--ink-800);color:var(--bone);border:1px solid var(--iron-edge)}.handoff-instruction{color:var(--bone-dim);margin:1.5rem 0;font-size:.95rem}.create-room{flex-direction:column;align-items:center;gap:1.5rem;padding:2rem;display:flex}.create-room h1{margin-bottom:0;font-size:3.2em;line-height:1.1}.room-subtitle{color:var(--bone-dim);margin:0;font-size:1.1rem}.creating-text{color:var(--bone-dim);font-size:1.1rem}.room-code-container{background-color:var(--ink-900);border:1px solid var(--ink-800);border-radius:8px;align-items:center;gap:1rem;padding:1rem 1.5rem;display:flex}.room-code{letter-spacing:.25em;color:var(--bone);font-family:monospace;font-size:2rem;font-weight:600}.create-room .room-button{margin-top:1rem}.join-room{flex-direction:column;align-items:center;gap:1.5rem;padding:2rem;display:flex}.join-room h1{margin-bottom:0;font-size:3.2em;line-height:1.1}.join-subtitle{color:var(--bone-dim);margin:0;font-size:1.1rem}.joining-text{color:var(--bone-dim);font-size:1.1rem}.join-form{flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:280px;display:flex}.code-input{text-align:center;letter-spacing:.25em;background-color:var(--ink-900);width:100%;color:var(--bone);border:1px solid var(--ink-800);border-radius:8px;outline:none;padding:1rem;font-family:monospace;font-size:1.5rem;font-weight:600;transition:border-color .15s}.code-input:focus{border-color:var(--bronze)}.code-input::placeholder{color:var(--bone-dim);opacity:.6;letter-spacing:.25em}.join-button{width:100%}.migration-prompt{background-color:var(--ink-900);border:1px solid var(--ink-800);border-radius:8px;margin-bottom:1.5rem;padding:1.25rem}.migration-success{border-color:var(--verdigris);text-align:center}.migration-success p{color:var(--verdigris);margin:0;font-weight:600}.migration-content{text-align:center}.migration-text{color:var(--bone);margin:0 0 .5rem;font-size:1rem;font-weight:600}.migration-subtext{color:var(--bone-dim);margin:0 0 1rem;font-size:.875rem}.migration-error{color:var(--cannae-red);margin:0 0 1rem;font-size:.875rem}.migration-buttons{justify-content:center;gap:.75rem;display:flex}.migration-button{font-size:.875rem}.online-lobby{flex-direction:column;align-items:center;gap:1.5rem;padding:2rem;display:flex}.online-lobby h1{margin-bottom:0;font-size:3.2em;line-height:1.1}.lobby-subtitle{color:var(--bone-dim);margin:0;font-size:1.1rem}.connecting-text{color:var(--bone-dim);font-size:1.1rem}.error-text{color:var(--cannae-red);margin:0;font-size:1.1rem}.error-detail{color:var(--bone-dim);margin:0;font-size:.9rem}.lobby-buttons{flex-direction:column;gap:1rem;width:100%;max-width:280px;margin-top:1rem;display:flex}.my-games{width:100%;max-width:400px}.my-games h2{color:var(--bone);margin:0 0 .75rem;font-size:1.2rem}.games-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.game-item{background-color:var(--ink-900);border:1px solid var(--ink-800);border-radius:8px;justify-content:space-between;align-items:center;padding:.75rem 1rem;display:flex}.game-item .game-info{flex-direction:column;gap:.25rem;display:flex}.game-item .game-color{text-transform:capitalize;font-size:.85rem;font-weight:600}.game-item .game-color.white{color:var(--bone)}.game-item .game-color.black{color:var(--bone-dim)}.game-item .game-status{color:var(--bone-dim);font-size:.8rem}.display-name-section{margin:.5rem 0}.name-display{align-items:center;gap:.5rem;display:flex}.name-label{color:var(--bone-dim);font-size:.9rem}.name-value{color:var(--bone);font-size:1rem;font-weight:600}.name-edit-form{align-items:center;gap:.5rem;display:flex}.name-input{background-color:var(--ink-900);color:var(--bone);border:1px solid var(--ink-800);border-radius:4px;width:150px;padding:.5rem .75rem;font-size:1rem}.name-input:focus{border-color:var(--bronze);outline:none}.lobby-header{flex-direction:column;align-items:center;gap:1rem;width:100%;display:flex}@media (width>=480px){.lobby-header{flex-direction:row;justify-content:center;gap:2rem}}.connection-status{background-color:var(--ink-900);border:1px solid var(--ink-800);z-index:50;border-radius:4px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.85rem;display:flex;position:fixed;top:1rem;right:1rem}.connection-status .status-dot{border-radius:50%;width:8px;height:8px}.connection-status.connecting .status-dot{background-color:var(--bronze);animation:1s ease-in-out infinite pulse}.connection-status.disconnected .status-dot{background-color:var(--bone-dim)}.connection-status.error .status-dot{background-color:var(--cannae-red)}.connection-status .status-text{color:var(--bone)}.online-game{flex-direction:column;align-items:center;gap:1rem;display:flex}.online-game h1{margin-bottom:0;font-size:3.2em;line-height:1.1}.online-game .phase{color:var(--bone-dim);text-transform:capitalize;font-size:.9rem}.online-game .piece-counts{color:var(--bone-dim);font-size:.9rem}.players-info{align-items:center;gap:.75rem;font-size:1rem;display:flex}.players-info .vs{color:var(--bone-dim);font-size:.8rem}.player-name{border-radius:4px;padding:.25rem .75rem}.player-name.white{background-color:var(--bone);color:var(--ink-950)}.player-name.black{background-color:var(--ink-800);color:var(--bone);border:1px solid var(--iron-edge)}.player-name.you{box-shadow:0 0 0 2px var(--bronze);font-weight:600}.turn-indicator{border-radius:4px;padding:.5rem 1rem;font-size:1.2rem;font-weight:600}.turn-indicator.your-turn{background-color:var(--verdigris);color:var(--ink-950)}.turn-indicator.opponent-turn{background-color:var(--ink-800);color:var(--bone-dim)}.error-message{color:var(--cannae-red);font-size:.9rem}.opponent-status{border-radius:4px;padding:.25rem .75rem;font-size:.85rem}.opponent-status.disconnected{color:var(--bronze);border:1px solid var(--bronze);background-color:#c08a3e26}.game-buttons{gap:1rem;margin-top:1rem;display:flex}.waiting-subtitle{color:var(--bone-dim);margin:0;font-size:1.1rem}.share-link-container{background-color:var(--ink-900);border:1px solid var(--ink-800);border-radius:8px;align-items:center;gap:1rem;max-width:100%;padding:1rem 1.5rem;display:flex;overflow:hidden}.share-link{color:var(--verdigris);word-break:break-all;font-family:monospace;font-size:.9rem}.room-code-alt{color:var(--bone-dim);font-size:.9rem}.room-code-inline{color:var(--bone);letter-spacing:.1em;font-family:monospace;font-weight:600}.waiting-text{color:var(--bone-dim);margin:0;font-size:1rem}.waiting-indicator{gap:.5rem;display:flex}.waiting-indicator .dot{background-color:var(--verdigris);border-radius:50%;width:8px;height:8px;animation:1.4s ease-in-out infinite pulse}.waiting-indicator .dot:nth-child(2){animation-delay:.2s}.waiting-indicator .dot:nth-child(3){animation-delay:.4s}.app{flex-direction:column;align-items:center;gap:1rem;display:flex}h1{margin-bottom:0;font-size:3.2em;line-height:1.1}.hud{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem 1.25rem;display:flex}.turn-stepper{letter-spacing:.13em;text-transform:uppercase;color:var(--bone-dim);gap:.9rem;font-size:.68rem;font-weight:600;display:flex}.turn-stepper .active{color:var(--bronze);border-bottom:2px solid var(--bronze);padding-bottom:2px}.current-player{padding-left:.45rem}.hud-actions{gap:.4rem;display:flex}.icon-btn{border:1px solid var(--ink-800);width:44px;height:44px;color:var(--bone-dim);cursor:pointer;background-color:#0000;border-radius:4px;justify-content:center;align-items:center;font-size:1rem;transition:border-color .15s,color .15s;display:inline-flex}.icon-btn:hover{border-color:var(--bone-dim);color:var(--bone)}.game-stage{flex-direction:column;gap:.6rem;width:fit-content;margin:0 auto;display:flex}.board-stage{position:relative}.board-stage.gameover .board-wrap{opacity:.45}.game-over-banner{background-color:#1713108c;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.game-result{text-align:center;padding:1.6rem 2rem;box-shadow:0 12px 32px #00000080}.game-result h2{font-family:var(--font-display);letter-spacing:.22em;text-transform:uppercase;margin:0 0 .3rem;font-size:1.5rem;font-weight:400}.game-result p{color:var(--bone-dim);margin:0 0 1.1rem;font-size:.88rem}.banner-buttons{justify-content:center;gap:.6rem;display:flex}.join-game-route{flex-direction:column;align-items:center;gap:1.5rem;padding:2rem;display:flex}.join-game-route h1{margin-bottom:0;font-size:3.2em;line-height:1.1}.join-game-route .status-text{color:var(--bone-dim);font-size:1.1rem}.join-game-route .error-text{color:var(--cannae-red);margin:0;font-size:1.1rem}.join-game-route .error-detail{color:var(--bone-dim);margin:0;font-size:.9rem}.auth-callback{background-color:var(--ink-950);justify-content:center;align-items:center;min-height:100vh;display:flex}.auth-callback-content{text-align:center;color:var(--bone)}.auth-callback-content p{margin-top:1rem;font-size:1.125rem}.auth-callback-spinner{border:4px solid var(--ink-800);border-top-color:var(--bone);border-radius:50%;width:48px;height:48px;margin:0 auto;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}