*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#1a1d23;color:#e8eaef}.app{min-height:100vh;padding:1.5rem;max-width:1100px;margin:0 auto}.variant-layout{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:flex-start}.variant-sidebar{flex:0 0 240px;display:flex;flex-direction:column;gap:1rem}.variant-main{flex:1;min-width:min(100%,20rem);position:relative}.reserve-panel{background:#252933;border:1px solid #3b4252;border-radius:10px;padding:.85rem 1rem}.reserve-title{margin:0 0 .65rem;font-size:1rem;font-weight:650}.reserve-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.35rem 0;border-bottom:1px solid #343b47}.reserve-row:last-of-type{border-bottom:none}.reserve-row-pawns{font-size:1.05rem}.reserve-row-light,.reserve-row-heavy{font-size:.92rem}.reserve-label{color:#aeb6c5;min-width:2.75rem}.reserve-count{font-weight:700;font-size:1.25rem}.reserve-item{margin-right:.75rem}.reserve-hint{margin:.6rem 0 0;font-size:.78rem;color:#8b95a8;line-height:1.35}.action-panel{background:#252933;border:1px solid #3b4252;border-radius:10px;padding:.85rem 1rem}.action-title{margin:0 0 .5rem;font-size:.95rem}.action-buttons{display:flex;flex-direction:column;gap:.45rem}.btn-action{font:inherit;cursor:pointer;border-radius:8px;border:1px solid #5e81ac;background:#3b4252;color:#eceff4;padding:.45rem .65rem;text-align:left}.btn-action:hover:not(:disabled){background:#434c5e}.btn-action:disabled{opacity:.38;cursor:not-allowed;border-color:#434c5e}.flow-banner{display:flex;flex-direction:column;gap:.45rem;font-size:.82rem;color:#c7cdd8;line-height:1.35}.btn-muted.small{align-self:flex-start;padding:.2rem .5rem;font-size:.8rem}.white-pick-cats,.black-pick-kinds{margin-top:.65rem}.panel-sub{margin:0 0 .35rem;font-size:.78rem;color:#9aa3b2}.btn-cat,.btn-kind{font:inherit;cursor:pointer;margin:.2rem .35rem .2rem 0;padding:.35rem .55rem;border-radius:6px;border:1px solid #5e81ac;background:#2e3440;color:#eceff4}.btn-cat:disabled,.btn-kind:disabled{opacity:.35;cursor:not-allowed}.kind-buttons{display:flex;flex-wrap:wrap}.board-wrap-variant{align-items:flex-start}.cell-legal.cell-light{box-shadow:inset 0 0 0 3px #fffffff2}.cell-legal.cell-dark{box-shadow:inset 0 0 0 3px #ffffffe0}.cell-blocked.cell-light{box-shadow:inset 0 0 0 3px #bf616af2;background:#e2b9bd!important}.cell-blocked.cell-dark{box-shadow:inset 0 0 0 3px #bf616ad9;background:#8f5f66!important}.app-header h1{margin:0 0 .25rem;font-size:1.75rem;font-weight:650}.app-subtitle{margin:0 0 .75rem;color:#9aa3b2;font-size:.95rem}.mode-tabs{display:flex;gap:.5rem;margin-bottom:1.25rem}.mode-tab{font:inherit;cursor:pointer;padding:.4rem .85rem;border-radius:8px;border:1px solid #4c566a;background:#2e3440;color:#aeb6c5}.mode-tab.active{background:#3b4252;color:#eceff4;border-color:#5e81ac}.lobby-panel{max-width:28rem;display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.lobby-hint{margin:0;font-size:.85rem;color:#8b95a8;line-height:1.45}.lobby-hint code{font-size:.88em;background:#252933;padding:.1rem .35rem;border-radius:4px}.lobby-room.card{background:#252933;border:1px solid #3b4252;border-radius:10px;padding:1rem;display:flex;flex-direction:column;gap:.5rem}.room-id{font-size:1.35rem;letter-spacing:.08em}.lobby-join-row{display:flex;gap:.5rem;flex-wrap:wrap}.lobby-input{font:inherit;flex:1;min-width:10rem;padding:.4rem .6rem;border-radius:6px;border:1px solid #4c566a;background:#2e3440;color:#eceff4}.lobby-label{display:block;margin-bottom:.35rem;font-size:.9rem;color:#aeb6c5}.online-banner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.75rem;padding:.6rem .85rem;background:#252933;border:1px solid #3b4252;border-radius:8px;font-size:.9rem}.online-your-turn{color:#a3be8c;font-weight:600}.online-error{margin:0 0 .75rem;color:#bf616a;font-size:.88rem}.online-notice{margin:0 0 .75rem;color:#ebcb8b;font-size:.88rem}.undo-request-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem;padding:.65rem .85rem;background:#3b4252;border:1px solid #5e81ac;border-radius:8px;font-size:.88rem}.undo-request-actions{display:flex;gap:.5rem}.white-pick-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#1a1d23b8;padding:1rem}.white-pick-modal{background:#252933;border:1px solid #5e81ac;border-radius:12px;padding:1.25rem 1.5rem;max-width:22rem;width:100%;box-shadow:0 12px 40px #00000073}.white-pick-modal h3{margin:0 0 .5rem;font-size:1.1rem}.multiplayer-game{margin-bottom:1.5rem}.app-rules-link{color:#88c0d0;text-decoration:underline;text-underline-offset:2px}.app-rules-link:hover{color:#8fbcbb}.rules-doc{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #3b4252}.rules-doc h2{margin:0 0 .65rem;font-size:1.2rem;font-weight:650}.rules-doc-note{margin:0 0 1rem;font-size:.82rem;color:#8b95a8;line-height:1.4}.rules-doc-note code{font-size:.88em;background:#252933;padding:.1rem .35rem;border-radius:4px}.rules-md{margin:0;padding:1rem 1.1rem;max-height:min(70vh,36rem);overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.78rem;line-height:1.45;color:#d8dee9;background:#252933;border:1px solid #3b4252;border-radius:10px;white-space:pre-wrap;word-break:break-word}.board-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;position:relative}.board-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:min(100%,26rem);flex-wrap:wrap}.board-toolbar-actions{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap}.board-meta{font-size:.95rem;color:#c7cdd8}.board-check{color:#bf616a;font-weight:600}.btn-reset,.btn-undo,.promotion-btn,.btn-muted{font:inherit;cursor:pointer;border-radius:6px;border:1px solid #4c566a;background:#2e3440;color:#eceff4;padding:.35rem .75rem}.btn-reset:hover,.btn-undo:hover:not(:disabled),.promotion-btn:hover{background:#3b4252}.btn-undo:disabled{opacity:.45;cursor:not-allowed}.btn-muted{margin-top:.5rem;border-color:#434c5e;color:#9aa3b2;font-size:.85rem}.board-grid{display:grid;grid-template-columns:repeat(8,minmax(0,3.25rem));grid-template-rows:repeat(8,minmax(0,3.25rem));width:fit-content;border:2px solid #2f3540;border-radius:6px;overflow:hidden}.cell{width:100%;height:100%;margin:0;padding:0;border:none;display:grid;place-items:center;cursor:pointer;font-size:clamp(1.75rem,5vw,2.35rem);line-height:1;transition:box-shadow .12s ease}.cell:focus-visible{outline:2px solid #88c0d0;outline-offset:-2px;z-index:1}.cell-light{background:#d8dee9}.cell-dark{background:#4c566a}.cell-selected{box-shadow:inset 0 0 0 3px #5e81ac}.cell-target.cell-light{background:#b8d4a8}.cell-target.cell-dark{background:#7b9f6b}.piece{-webkit-user-select:none;user-select:none;pointer-events:none}.piece-white{color:#f8f9fb;text-shadow:0 1px 2px rgba(0,0,0,.65),0 0 1px #1a1d23}.piece-black{color:#1a1d23;text-shadow:0 1px 0 rgba(255,255,255,.22)}.promotion-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#1a1d23b8;border-radius:8px;z-index:2}.promotion-card{background:#2e3440;border:1px solid #4c566a;border-radius:10px;padding:1rem 1.25rem;text-align:center;max-width:90vw}.promotion-card p{margin:0 0 .75rem;font-size:.95rem}.promotion-row{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.promotion-btn{min-width:3rem}.board-status{margin:0;font-size:.9rem;color:#88c0d0}