:root{--bg: #14110e;--bg-2: #1d1915;--panel: #231e19;--panel-2: #2c2620;--line: #3a3129;--text: #efe6d8;--muted: #a39581;--accent: #c8352b;--accent-2: #e7b14b;--good: #7fb069;--blue: #4aa3df;--radius: 12px;--side-w: 320px;--vh: 100vh;--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-y: calc(var(--safe-t) + var(--safe-b));--safe-x: calc(var(--safe-l) + var(--safe-r));--board: min(calc(var(--vh) - var(--safe-y) - 112px), calc(100vw - var(--safe-x) - var(--side-w) - 72px), 920px);color-scheme:dark}@supports (height: 100dvh){:root{--vh: 100dvh}}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}body{background:radial-gradient(ellipse at 30% 0%,rgba(200,53,43,.12),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(231,177,75,.08),transparent 50%),var(--bg);color:var(--text);font:15px/1.45 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}input{-webkit-user-select:text;user-select:text}img{-webkit-user-drag:none}button{font:inherit;color:inherit;cursor:pointer}.hidden{display:none!important}#app{height:100%;display:flex;flex-direction:column;padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l)}.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;height:56px;flex-shrink:0}.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em;font-size:18px}.brand-glyph{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--accent);color:#fff4e0;font-size:20px;font-weight:700;box-shadow:0 2px 10px #c8352b73}.top-actions{display:flex;gap:8px}.icon-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--panel);font-weight:700;display:grid;place-items:center;transition:background .15s,transform .1s}.icon-btn:hover{background:var(--panel-2)}.icon-btn.off{opacity:.45}.mode-card.disabled{opacity:.55}.icon-btn:active{transform:scale(.94)}.layout{flex:1;min-height:0;display:flex;justify-content:center;align-items:flex-start;gap:24px;padding:4px 20px 20px}.board-area{flex-shrink:0}.board-frame{position:relative;width:var(--board);height:var(--board);border-radius:6px;padding:0;background:#2a2018;box-shadow:0 0 0 6px #3b2c1f,0 0 0 7px #5a4330,0 18px 50px #0009}.board-host,.board-host canvas{width:100%;height:100%;display:block;border-radius:4px;touch-action:none}.side{width:var(--side-w);height:var(--board);display:flex;flex-direction:column;gap:12px;min-height:0}.panel,.player-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}.player-card{transition:border-color .2s,box-shadow .2s}.player-card.me{border-color:#5a4a38}.pc-head{display:flex;align-items:center;gap:10px;font-weight:700}.pc-swatch{width:30px;height:30px;border-radius:8px;flex-shrink:0;background:#e9dcc4 center / 26px no-repeat;box-shadow:inset 0 0 0 1px #00000040}.pc-swatch.w{background-image:url(/pieces/Chess_klt45.svg);background-color:#6b5844}.pc-swatch.b{background-image:url(/pieces/Chess_kdt45.svg);background-color:#e9dcc4}.pc-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc-badge{font-size:12px;font-weight:600;color:var(--muted)}.pc-badge.online:before,.pc-badge.offline:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}.pc-badge.online:before{background:var(--good)}.pc-badge.offline:before{background:var(--accent)}.pc-captured{min-height:24px;margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:0}.pc-captured img{width:24px;height:24px;margin-right:-6px;filter:drop-shadow(0 1px 1px #0008)}.pc-captured .adv{margin-left:12px;font-size:13px;font-weight:700;color:var(--muted)}.player-card.danger{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 18px #c8352b59}.status-line{font-weight:700;min-height:22px}.status-line.alert{color:#ff7b6e}.stats{display:flex;gap:16px;margin-top:6px;font-size:13px;color:var(--muted)}.stats b{color:var(--text);font-variant-numeric:tabular-nums}.log-panel{flex:1;min-height:80px;display:flex;flex-direction:column}.log-panel h3{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}.move-log{list-style:none;overflow-y:auto;flex:1;font-size:13px;font-variant-numeric:tabular-nums;padding-right:4px}.move-log li{display:grid;grid-template-columns:44px 20px 1fr;align-items:center;gap:6px;padding:3px 6px;border-radius:6px;animation:slide-in .2s ease-out}.move-log li:nth-child(odd){background:#ffffff06}.move-log .t{color:var(--muted)}.move-log img{width:20px;height:20px}.move-log img.cap{width:18px;height:18px;vertical-align:-4px;margin-left:6px;opacity:.85}.move-log .promo{color:var(--accent-2);font-weight:700}@keyframes slide-in{0%{opacity:0;transform:translateY(-4px)}}.actions{display:flex;gap:8px}.actions .btn{flex:1;white-space:nowrap}.btn{border:1px solid var(--line);background:var(--panel-2);border-radius:10px;padding:10px 16px;font-weight:700;transition:background .15s,transform .1s,border-color .15s}.btn:hover{background:#362e26;border-color:#4b3f33}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:default}.btn.small{padding:7px 10px;font-size:13px}.btn.wide{width:100%}.btn.primary{background:linear-gradient(180deg,#d8463a,#b02a21);border-color:#e05a4d;color:#fff8ec;box-shadow:0 4px 14px #c8352b59}.btn.primary:hover{background:linear-gradient(180deg,#e2554a,#bd3328)}.link-btn{background:none;border:none;color:var(--accent-2);font-weight:600;text-decoration:underline;text-underline-offset:3px}.seg{display:inline-flex;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}.seg button{border:none;background:none;padding:7px 14px;border-radius:7px;font-weight:600;color:var(--muted);transition:background .15s,color .15s}.seg button:hover{color:var(--text)}.seg button.active{background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 1px #5a4a38}.seg.small button{padding:5px 10px;font-size:13px}.modal-backdrop{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));background:#0a0806b8;backdrop-filter:blur(6px);animation:fade-in .2s ease-out}.modal{background:linear-gradient(180deg,#2a231d,#201b16);border:1px solid #45392d;border-radius:18px;padding:28px;width:min(760px,100%);max-height:calc(var(--vh) - var(--safe-y) - 32px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;box-shadow:0 30px 80px #0009;animation:pop-in .25s cubic-bezier(.2,1.3,.5,1)}@keyframes fade-in{0%{opacity:0}}@keyframes pop-in{0%{opacity:0;transform:scale(.95) translateY(8px)}}.menu-hero{text-align:center;margin-bottom:20px}.hero-glyph{display:block;font-size:44px;color:var(--accent);letter-spacing:.1em;line-height:1.1;text-shadow:0 4px 24px rgba(200,53,43,.5)}.menu-hero h1{font-family:Georgia,Times New Roman,serif;font-size:40px;letter-spacing:.01em;margin-top:4px}.tagline{color:var(--muted);margin-top:4px}.menu-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}.menu-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.mode-card{background:#1a1612;border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;align-items:stretch}.mode-card h3{font-size:17px}.mode-card{min-width:0}.mode-card .seg{display:flex;align-self:stretch;min-width:0}.mode-card .seg button{flex:1 1 0;min-width:0;padding-left:4px;padding-right:4px;white-space:nowrap}.mode-desc{color:var(--muted);font-size:13px;flex:1}.join-form{display:flex;gap:6px}.join-form input{flex:1;min-width:0;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:9px 10px;font:700 16px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.3em;text-transform:uppercase;text-align:center}.join-form input:focus{outline:2px solid var(--accent-2);outline-offset:1px}.menu-footer{display:flex;justify-content:center;gap:24px;margin-top:18px}.lobby-modal{width:min(420px,100%);text-align:center}.lobby-modal p{color:var(--muted);margin-top:6px}.room-code{font:800 56px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.25em;margin:14px 0 18px;padding-left:.25em;color:var(--accent-2)}.lobby-actions{display:flex;gap:10px;justify-content:center}.lobby-status{font-size:13px;margin-top:14px!important}.rules-modal{width:min(560px,100%)}.rules-modal h2{margin-bottom:12px}.rules-list{padding-left:20px;display:grid;gap:8px;color:#dccfbd}.cooldown-table{width:100%;margin:16px 0;border-collapse:collapse;font-size:14px}.cooldown-table th{text-align:left;color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:4px 8px}.cooldown-table td{padding:5px 8px;border-top:1px solid var(--line)}.cooldown-table td img{width:24px;height:24px;vertical-align:middle;margin-right:8px}.cooldown-table .bar{display:inline-block;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--accent-2),var(--accent));vertical-align:middle;margin-right:8px}.keys{color:var(--muted);font-size:13px;margin-bottom:16px}kbd{background:var(--panel-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-size:12px}.countdown{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:5;font:900 clamp(64px,calc(var(--board) * .22),180px)/1 Georgia,serif;color:#fff4e0;text-shadow:0 6px 30px rgba(0,0,0,.7),0 0 40px rgba(200,53,43,.7)}.countdown span{animation:count-pop .9s ease-out forwards}.countdown span.fight{color:var(--accent-2);letter-spacing:.05em;font-size:.6em}@keyframes count-pop{0%{transform:scale(1.8);opacity:0}20%{transform:scale(1);opacity:1}80%{opacity:1}to{transform:scale(.9);opacity:0}}.banner{position:absolute;top:12px;left:50%;transform:translate(-50%);z-index:6;background:#14110eeb;border:1px solid var(--line);border-radius:999px;padding:8px 18px;font-weight:700;font-size:14px;white-space:nowrap;box-shadow:0 6px 20px #00000080}.gameover{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:radial-gradient(circle,#0a08068c,#0a0806cc);animation:fade-in .4s ease-out}.gameover-card{text-align:center;padding:28px 36px;border-radius:18px;min-width:300px;background:linear-gradient(180deg,#2a231d,#1d1813);border:1px solid #4a3d30;box-shadow:0 30px 80px #000000b3;animation:pop-in .35s cubic-bezier(.2,1.3,.5,1)}.go-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:700}.gameover-card h2{font:800 44px/1.1 Georgia,serif;margin:6px 0}.gameover-card h2.win{color:var(--accent-2);text-shadow:0 0 30px rgba(231,177,75,.4)}.gameover-card h2.loss{color:#ff7b6e}.gameover-card p{color:#d6c8b4}.go-stats{display:flex;justify-content:center;gap:18px;margin:14px 0 18px;font-size:13px;color:var(--muted)}.go-stats b{color:var(--text);display:block;font-size:18px}.go-actions{display:flex;gap:10px;justify-content:center}.go-note{font-size:13px;margin-top:12px;min-height:18px;color:var(--accent-2)!important}.toasts{position:fixed;bottom:calc(20px + var(--safe-b));left:50%;transform:translate(-50%);z-index:40;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}.toast{background:#2c2620;border:1px solid #4b3f33;border-radius:10px;padding:10px 16px;font-weight:600;font-size:14px;box-shadow:0 10px 30px #00000080;animation:toast-in .25s ease-out}.toast.error{border-color:var(--accent)}.toast.out{animation:toast-out .25s ease-in forwards}@keyframes toast-in{0%{opacity:0;transform:translateY(10px)}}@keyframes toast-out{to{opacity:0;transform:translateY(10px)}}@media (max-width: 900px){:root{--gap: 8px;--board: min(calc(100vw - var(--safe-x) - 20px), calc(var(--vh) - var(--safe-y) - 300px), 720px)}.topbar{height:46px;padding:6px 12px}.brand{font-size:16px}.brand-glyph{width:30px;height:30px;font-size:18px}.icon-btn{width:40px;height:40px}.layout{flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--gap);padding:4px 10px 10px;overflow-y:auto;overscroll-behavior:contain}.side{display:contents}.side>*{width:var(--board);flex-shrink:0}#card-top{order:1}.board-area{order:2}#card-bottom{order:3}.actions{order:4}.status-panel{order:5}.log-panel{order:6;flex:1 1 60px;min-height:60px}.board-frame{box-shadow:0 0 0 4px #3b2c1f,0 0 0 5px #5a4330,0 10px 30px #0009}.player-card{display:flex;align-items:center;gap:10px;padding:6px 10px}.pc-head{flex:1;min-width:0}.pc-swatch{width:26px;height:26px;background-size:22px}.pc-captured{margin-top:0;min-height:0;flex-shrink:0;max-width:55%;justify-content:flex-end}.pc-captured img{width:20px;height:20px;margin-right:-5px}.status-panel{display:flex;align-items:center;gap:10px;padding:8px 12px}.status-line{flex:1;font-size:14px;min-height:0}.stats{margin-top:0;gap:10px}.actions .btn{padding:10px 8px}.mode-grid{grid-template-columns:minmax(0,1fr);gap:10px}.mode-card{padding:14px}.menu-hero{margin-bottom:14px}.menu-hero h1{font-size:30px}.hero-glyph{font-size:34px}.modal{padding:20px 16px;border-radius:16px}.join-form input{font-size:16px}.gameover-card{min-width:0;width:calc(100% - 32px);padding:22px 18px}.gameover-card h2{font-size:36px}.room-code{font-size:44px}}@media (max-width: 900px) and (max-height: 620px){:root{--board: min(calc(100vw - var(--safe-x) - 20px), 520px)}}@media (max-height: 520px) and (orientation: landscape){:root{--side-w: 240px;--board: min(calc(var(--vh) - var(--safe-y) - 52px), calc(100vw - var(--safe-x) - var(--side-w) - 40px))}.topbar{height:40px;padding:4px 12px}.brand-name{display:none}.layout{flex-direction:row;justify-content:center;align-items:center;gap:14px;padding:2px 12px 8px;overflow:visible}.board-area,.side>*{order:0!important}.side{display:flex;gap:6px}.side>*{width:auto}.log-panel{flex:1 1 auto;min-height:0}.actions .btn{padding:8px 4px;font-size:12px;white-space:nowrap}.status-panel,.player-card{padding:8px 10px}.stats{gap:10px;flex-wrap:wrap}.mode-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.menu-hero h1{font-size:24px}.hero-glyph,.tagline{display:none}}.go-note:empty{display:none}