:root{--bg:#eef3f4;--surface:#fff;--text:#1d2b30;--muted:#5f7277;--border:#d4dfe2;--accent:#1f4e5f;--accent-text:#fff;--error:#b3261e;--error-bg:#fbe9e7;--info-bg:#e3eef1;--light-sq:#e9eef0;--dark-sq:#7fa3ae;--last-sq:#f0c85a8c;--selected-sq:#1f4e5f73;--check:#e0533f;--target:#14282e52;--bar-h:2.6rem;--radius:12px;color:var(--text);background:var(--bg);-webkit-text-size-adjust:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.45}@media (prefers-color-scheme:dark){:root{--bg:#10191c;--surface:#18252a;--text:#e6eef0;--muted:#93a7ac;--border:#2a3b40;--accent:#7fc3d6;--accent-text:#0c1416;--error:#f2928a;--error-bg:#3d2523;--info-bg:#1f3238;--light-sq:#b7c7cc;--dark-sq:#557a85;--selected-sq:#7fc3d680}}*{box-sizing:border-box}body{min-height:100dvh;margin:0}a{color:var(--accent)}h1,h2{margin:0 0 .75rem;line-height:1.2}h2{font-size:1.05rem}button,select,input{font:inherit}button{border:1px solid var(--border);background:var(--surface);min-height:44px;color:var(--text);cursor:pointer;touch-action:manipulation;border-radius:10px;padding:.4rem .9rem}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:600}button.link{min-height:auto;color:var(--accent);background:0 0;border:0;padding:0;text-decoration:underline}button.danger{color:var(--error)}select{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:8px;width:100%;padding:.55rem .6rem}.muted{color:var(--muted)}.small{font-size:.85rem}.notice{background:var(--info-bg);border-radius:8px;padding:.75rem 1rem}.notice.error{background:var(--error-bg);color:var(--error)}.row{align-items:center;gap:.5rem;display:flex}.stack{gap:.85rem;display:grid}.topbar{padding:calc(.75rem + env(safe-area-inset-top)) 1rem .75rem;background:var(--surface);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;display:flex}.brand{font-weight:700}.page{max-width:720px;padding:1rem calc(1rem + env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));margin:0 auto}.home{gap:1rem;display:grid}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.15rem}.list{margin:0;padding:0;list-style:none}.list li+li{border-top:1px solid var(--border)}.game-link{color:inherit;justify-content:space-between;gap:1rem;padding:.75rem 0;text-decoration:none;display:flex}.badge{background:var(--info-bg);color:var(--muted);border-radius:999px;margin-left:.5rem;padding:.1rem .45rem;font-size:.75rem}label{gap:.3rem;font-weight:500;display:grid}.choices{border:0;gap:.5rem;margin:0;padding:0;display:grid}.choices legend{margin-bottom:.3rem;font-weight:500}.choice{border:1px solid var(--border);border-radius:10px;align-items:flex-start;gap:.6rem;padding:.6rem .75rem;font-weight:400;display:flex}.choice>span{display:grid}.choice input{margin-top:.3rem}.credits{text-align:center}.friend-picks{flex-wrap:wrap;gap:.5rem;display:flex}.pick{border:1px solid var(--border);cursor:pointer;border-radius:999px;align-items:center;gap:.4rem;padding:.45rem .8rem;font-weight:400;display:inline-flex}.pick.on{border-color:var(--accent);background:var(--info-bg);font-weight:600}.pick input{margin:0}.invitation{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:.65rem 0;display:flex}.invitations{border-color:var(--accent)}.game{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);-webkit-user-select:none;user-select:none;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top""board""controls";display:grid;position:fixed;inset:0}.game-top{grid-area:top;gap:.5rem;padding:.35rem .5rem}.game-top .back{padding:0 .4rem;font-size:1.6rem;line-height:1;text-decoration:none}.game-top .title{text-overflow:ellipsis;white-space:nowrap;flex:1;font-weight:600;overflow:hidden}button.icon{min-width:40px;min-height:40px;padding:0}.board-area{grid-area:board;place-items:center;min-height:0;padding:4px;display:grid;container-type:size}.board-stack{width:min(100cqw, 100cqh - 2 * var(--bar-h));grid-template-rows:var(--bar-h) auto var(--bar-h);display:grid}.player-bar{align-items:center;gap:.45rem;min-width:0;padding:0 .25rem;font-size:.95rem;display:flex}.player-bar .name{text-overflow:ellipsis;white-space:nowrap;border:2px solid #0000;border-radius:999px;flex:none;max-width:45%;padding:.1rem .5rem;font-weight:600;overflow:hidden}.player-bar.to-move .name{border-color:var(--accent)}.color-dot{border:1px solid var(--muted);border-radius:50%;flex:none;width:.85rem;height:.85rem}.color-dot.w{background:#fff}.color-dot.b{background:#222}.captured{align-items:center;min-width:0;display:flex;overflow:hidden}.captured .piece{width:1.15rem;height:1.15rem;margin-right:-.3rem}.captured .lead{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:.55rem;font-size:.8rem}.board{aspect-ratio:1;touch-action:none;border-radius:4px;grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);width:100%;display:grid;overflow:hidden;container-type:inline-size}.square{place-items:center;display:grid;position:relative}.square.light{background:var(--light-sq)}.square.dark{background:var(--dark-sq)}.square.last:before,.square.selected:before,.square.check:before{content:"";position:absolute;inset:0}.square.last:before{background:var(--last-sq)}.square.selected:before{background:var(--selected-sq)}.square.check:before{background:radial-gradient(circle, var(--check) 0%, #e0533f99 45%, transparent 75%)}.piece{pointer-events:none;width:100%;height:100%;position:relative}.square .piece{cursor:pointer}.square.target:after{content:"";background:var(--target);pointer-events:none;border-radius:50%;width:30%;height:30%;position:absolute}.square.target.capture:after{width:92%;height:92%;box-shadow:inset 0 0 0 .5cqw var(--target);border:.6cqw solid var(--target);background:0 0}.coord{pointer-events:none;font-size:max(9px,2.6cqw);font-weight:600;line-height:1;position:absolute}.square.light .coord{color:var(--dark-sq)}.square.dark .coord{color:var(--light-sq)}.coord.rank{top:4%;left:4%}.coord.file{bottom:4%;right:5%}@media (hover:hover) and (pointer:fine){.square:hover{box-shadow:inset 0 0 0 3px #1f4e5f59}button:not(:disabled):hover{filter:brightness(.96)}}.drag-ghost{pointer-events:none;z-index:50;filter:drop-shadow(0 6px 10px #0000004d);position:fixed;top:0;left:0}.controls{background:var(--surface);border-top:1px solid var(--border);grid-area:controls;grid-template-rows:1.4rem 2.2rem 44px 1.1rem;gap:.3rem;padding:.5rem .6rem .4rem;display:grid}.status,.detail,.hint{text-align:center;white-space:nowrap;text-overflow:ellipsis;margin:0;overflow:hidden}.status{color:var(--muted);font-size:.95rem;line-height:1.4rem}.status.yours{color:var(--accent);font-weight:600}.status.done{color:var(--text);font-weight:600}.detail{line-height:2.2rem}.detail-buttons{justify-content:center;align-items:center;gap:.5rem;display:flex}button.small-button{height:2rem;min-height:0;padding:0 .8rem;font-size:.9rem;line-height:1}.controls .buttons{justify-content:center;align-items:center;gap:.5rem;display:flex}.controls .send{min-width:7.5rem}.hint{font-size:.8rem;line-height:1.1rem}.hint.error{color:var(--error)}.menu{position:relative}.menu-items{background:var(--surface);border:1px solid var(--border);z-index:20;border-radius:12px;gap:4px;min-width:10rem;padding:6px;display:grid;position:absolute;bottom:calc(100% + 6px);left:0;box-shadow:0 6px 24px #0000002e}.side{max-height:70dvh;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));background:var(--surface);z-index:30;border-top-left-radius:16px;border-top-right-radius:16px;transition:transform .25s;position:fixed;bottom:0;left:0;right:0;overflow:auto;transform:translateY(105%);box-shadow:0 -8px 32px #0003}.side-open .side{transform:translateY(0)}.side-close{float:right}.move-list{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));column-gap:1rem;margin:0 0 1rem;padding:0;list-style:none;display:grid}.move-list li{border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums;grid-template-columns:2.2rem 1fr 1fr;align-items:center;display:grid}.move-no{color:var(--muted);font-size:.85rem}button.san{text-align:left;background:0 0;border:0;min-height:36px;padding:0 .35rem;font-weight:500}button.san.current{background:var(--info-bg);font-weight:700}.setting{align-items:center;gap:.5rem;font-size:.9rem;font-weight:400;display:flex}.modal-backdrop{z-index:40;background:#00000073;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.modal{background:var(--surface);border-radius:16px;justify-items:center;gap:.75rem;width:min(360px,100%);padding:1.25rem;display:grid}.promotion-choices{grid-template-columns:repeat(4,1fr);gap:8px;width:100%;display:grid}.promotion-choices button{aspect-ratio:1;background:var(--light-sq);padding:6px}@media (width>=900px) and (aspect-ratio>=1){.game{grid-template-columns:minmax(0,1fr) minmax(260px,320px);grid-template-areas:"top top""board side""controls side"}.side{max-height:none;box-shadow:none;border-left:1px solid var(--border);border-radius:0;grid-area:side;transition:none;position:static;transform:none}.side-toggle,.side-close{display:none}.board-area{padding:12px}.move-list{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.side{transition:none}}