.board{touch-action:manipulation;-webkit-user-select:none;user-select:none;width:100%;height:100%;position:relative}.board-svg{display:block;position:absolute;inset:0}.board-layer{pointer-events:none;position:absolute;inset:0}.river-text{font-family:var(--font-pixel);-webkit-font-smoothing:none;color:var(--board-line);opacity:.85;letter-spacing:.6em;pointer-events:none;justify-content:center;align-items:center;line-height:1;display:flex;position:absolute}.coord{font-family:var(--font-pixel);-webkit-font-smoothing:none;color:var(--board-line);pointer-events:none;font-size:12px;line-height:1;position:absolute;transform:translate(-50%,-50%)}.piece{background:radial-gradient(circle at 50% 38%, #fbf1d6 0 40%, var(--piece-face) 70%);box-shadow:0 0 0 1px var(--piece-edge), 0 2px 0 1px var(--piece-shadow);font-family:var(--font-pixel);-webkit-font-smoothing:none;transition:transform var(--move-ms,.15s) var(--ease-out);will-change:transform;pointer-events:auto;cursor:pointer;border-radius:50%;place-items:center;line-height:1;display:grid;position:absolute;top:0;left:0}.piece:before{content:"";opacity:.75;border:1.5px solid;border-radius:50%;position:absolute;inset:2px}.piece.red{color:var(--red)}.piece.black{color:var(--ink)}.piece .glyph{display:block;position:relative}.piece:after{content:"";box-shadow:0 0 0 2px var(--gold), 0 0 0 4px #4a3a18;opacity:0;transition:opacity .11s ease-out, scale .14s var(--ease-out);pointer-events:none;border-radius:50%;position:absolute;inset:-2px;scale:1.18}.piece.selected:after{opacity:1;scale:1}.piece.selected{box-shadow:0 0 0 1px var(--piece-edge), 0 5px 0 1px var(--piece-shadow);z-index:3}.piece.ghost{z-index:1;pointer-events:none;animation:ghost-out .3s ease-in var(--hit-delay,0s) forwards}@keyframes ghost-out{0%{opacity:1;scale:1}45%{opacity:.9;scale:.92}to{opacity:0;scale:.6}}.piece.in-check{box-shadow:0 0 0 2px var(--action), 0 0 0 4px var(--piece-face), 0 0 0 6px var(--action), 0 2px 0 6px var(--piece-shadow);z-index:2}.piece.shake{animation:.22s steps(4,end) shake}@keyframes shake{25%{margin-left:-3px}50%{margin-left:3px}75%{margin-left:-2px}}.check-badge{animation:pop-in .18s var(--ease-out) both;width:max-content;font-family:var(--font-pixel);-webkit-font-smoothing:none;white-space:nowrap;background:var(--action);color:var(--action-text);pointer-events:none;margin-inline:auto;padding:3px 4px;font-size:12px;line-height:1;position:absolute;bottom:calc(100% + 6px);left:-40px;right:-40px}.check-badge.below{top:calc(100% + 8px);bottom:auto}.mk{pointer-events:none;position:absolute;top:0;left:0}@keyframes pop-in{0%{opacity:0;scale:.4}}@keyframes fade-in{0%{opacity:0}}.mk-target>*{animation:pop-in .12s var(--ease-out) both}.mk-from,.mk-hint{animation:.16s ease-out both fade-in}.mk-illegal>svg{animation:pop-in .12s var(--ease-out) both}.last-tick{animation:.14s ease-out both fade-in;animation-delay:var(--move-ms,.15s)}.mk-move{box-shadow:0 0 0 2px var(--board), 0 0 0 3px #2f5a3a;background:#2f5a3a}.mk-move.hidden-hint{box-shadow:none;background:0 0}.mk-from{border:2px dashed var(--gold-dark)}.mk-hint{border:2px dashed #2f5a3a;border-radius:50%}.mk-illegal{color:var(--action)}.mk-target{pointer-events:auto;cursor:pointer}.piece.landed{animation:land .18s steps(3, jump-none) var(--move-ms,.15s) backwards}.piece.landed .glyph{animation:land-glyph .18s steps(3, jump-none) var(--move-ms,.15s) backwards}@keyframes land{0%,to{box-shadow:0 0 0 1px var(--piece-edge), 0 2px 0 1px var(--piece-shadow)}50%{box-shadow:0 0 0 1px var(--piece-edge), 0 0 0 1px var(--piece-shadow)}}@keyframes land-glyph{50%{translate:0 1px}}.shards{pointer-events:none;position:absolute;inset:0}.shards i{left:calc(50% - var(--shard) / 2);top:calc(50% - var(--shard) / 2);width:var(--shard);height:var(--shard);background:var(--piece-face);opacity:0;animation:shard .34s steps(5, jump-none) var(--hit-delay,0s) both;position:absolute;box-shadow:0 0 0 1px}.shards.red{color:var(--red)}.shards.black{color:var(--ink)}.shards i:nth-child(2n){background:currentColor}@keyframes shard{0%{opacity:1;translate:0}70%{opacity:1}to{opacity:0;translate:var(--dx) var(--dy)}}.piece.landed.shake{animation:.22s steps(4,end) shake}.board.impact{animation:board-hit .2s steps(4, jump-none) var(--hit-delay,0s)}@keyframes board-hit{25%{translate:0 2px}50%{translate:-2px}75%{translate:1px -1px}}.hit-ring{border:3px solid var(--action);opacity:0;pointer-events:none;animation:hit-ring .3s steps(4, jump-none) var(--hit-delay,0s) both;position:absolute;inset:10%}@keyframes hit-ring{0%{opacity:1;scale:.5}to{opacity:0;scale:1.6}}.announce{z-index:6;pointer-events:none;place-items:center;display:grid;position:absolute;inset:0;overflow:hidden}.announce-text{font-family:var(--font-pixel);-webkit-font-smoothing:none;white-space:nowrap;color:var(--action-text);background:var(--action);box-shadow:0 0 0 3px var(--piece-face), 0 0 0 6px var(--action), 0 6px 0 6px #00000059;padding:10px 18px;line-height:1;position:relative}.announce.check .announce-text{animation:.16s steps(3,jump-none) both stamp-in,.22s ease-in .7s forwards announce-out}.announce.win,.announce.lose,.announce.draw{animation:.26s ease-out both dim-in,.4s ease-in 2.4s forwards fade-away}.announce.win .announce-text,.announce.lose .announce-text,.announce.draw .announce-text{animation:.2s steps(3,jump-none) .12s both stamp-in}.announce.win .announce-text{background:var(--gold);color:#2a2414;box-shadow:0 0 0 3px var(--piece-face), 0 0 0 6px var(--gold-dark), 0 6px 0 6px #00000059}.announce.draw .announce-text{background:var(--surface-3);color:var(--text);box-shadow:0 0 0 3px var(--piece-face), 0 0 0 6px var(--line), 0 6px 0 6px #00000059}@keyframes stamp-in{0%{opacity:0;scale:2.2}60%{opacity:1;scale:.92}to{opacity:1;scale:1}}@keyframes announce-out{to{opacity:0;scale:.9}}@keyframes fade-away{to{opacity:0}}@keyframes dim-in{0%{background:0 0}to{background:#00000061}}.announce.win,.announce.lose,.announce.draw{background:#00000061}.confetti{position:absolute;inset:0}.confetti i{opacity:0;width:8px;height:8px;animation:1.5s steps(18,jump-none) both confetti;position:absolute;top:-12px}.confetti i.c0{background:var(--gold)}.confetti i.c1{background:var(--action)}.confetti i.c2{background:var(--piece-face)}.confetti i.c3{background:#6fbf73}@keyframes confetti{0%{opacity:1;translate:0;rotate:0deg}85%{opacity:1}to{opacity:0;translate:var(--drift) var(--fall,400px);rotate:180deg}}@media (prefers-reduced-motion:reduce){.board.impact,.hit-ring,.confetti{animation:none;display:none}.announce .announce-text{animation:none!important}.announce.check .announce-text{animation:1ms linear .9s forwards announce-out!important}.announce.win,.announce.lose,.announce.draw{animation:1ms linear 2.4s forwards fade-away!important}}.board-arrows{z-index:5;pointer-events:none;position:absolute;inset:0}.arrow line{stroke:currentColor;stroke-linecap:butt}.arrow polygon{fill:currentColor}.arrow.best{color:#2e84a8d1}.arrow.second{color:#2e84a861}@font-face{font-family:ArkPixel;src:url(/fonts/ark-pixel-12px-zh_tw.subset.woff2)format("woff2");font-display:swap}@font-face{font-family:PixelZH;src:url(/fonts/fusion-pixel-12px-zh_hant.subset.woff2)format("woff2");font-display:swap}:root{--bg:#242924;--surface:#343b2e;--surface-2:#2c3227;--surface-3:#3e4636;--line:#4d5743;--text:#f1e8d2;--text-dim:#bdb6a0;--text-faint:#aaa490;--board:#ebce94;--board-line:#6b5230;--board-frame:#b48d55;--board-frame-dark:#8a6a3c;--red:#a43a2c;--ink:#32372c;--action:#b14434;--action-dark:#86301f;--action-text:#fff4e4;--gold:#cfad67;--gold-dark:#9c7d3d;--piece-face:#f5e7c4;--piece-edge:#d4b77b;--piece-shadow:#6b4f28;--danger:#d0533f;--font-pixel:"ArkPixel", "PixelZH", "PingFang TC", "Microsoft JhengHei", sans-serif;--font-ui:system-ui, -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;--font-label:var(--font-pixel);--gutter:16px;--tap:44px;--nav-h:84px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--ease-out:cubic-bezier(.22, .8, .3, 1);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-ui-font=system]{--font-label:var(--font-ui)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}html{background:var(--bg)}html,body{overflow:hidden}body{background:var(--bg);color:var(--text);font-family:var(--font-ui);-webkit-tap-highlight-color:transparent;overscroll-behavior:none;font-size:16px;line-height:1.5}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.pixel{font-family:var(--font-pixel);-webkit-font-smoothing:none;font-smooth:never;letter-spacing:0;line-height:1}.label{font-family:var(--font-label);-webkit-font-smoothing:none}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.px-corners{clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}.app{flex-direction:column;display:flex;position:fixed;inset:0}.page{min-height:0;padding:calc(var(--safe-top) + 12px) calc(var(--gutter) + var(--safe-right)) 24px calc(var(--gutter) + var(--safe-left));flex:1;overflow:hidden auto}.page-inner{max-width:560px;margin:0 auto}.page-title{font-family:var(--font-pixel);-webkit-font-smoothing:none;margin:8px 0 16px;font-size:24px;font-weight:400;line-height:1}.bottom-nav{background:var(--surface-2);border-top:2px solid var(--line);padding-bottom:var(--safe-bottom);padding-left:var(--safe-left);padding-right:var(--safe-right);flex:none;grid-template-columns:repeat(4,1fr);display:grid}.nav-item{min-height:var(--nav-h);color:var(--text-faint);cursor:pointer;background:0 0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:8px 0 10px;display:flex}.nav-item .label{font-size:24px;line-height:1}:root[data-ui-font=system] .nav-item .label{font-size:16px;font-weight:600}.nav-item[aria-current=page]{color:var(--gold)}.nav-item[aria-current=page] .nav-icon{background:var(--surface-3)}.nav-icon{padding:4px 14px;display:flex}.btn{min-height:var(--tap);background:var(--surface-3);color:var(--text);cursor:pointer;font-family:var(--font-label);-webkit-font-smoothing:none;clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));border:0;justify-content:center;align-items:center;gap:8px;padding:0 16px;font-size:12px;line-height:1;display:inline-flex;box-shadow:inset 0 -3px #00000047,inset 0 2px #ffffff0f}:root[data-ui-font=system] .btn{font-size:15px}.btn{transition:transform 70ms ease-out,background-color .12s ease-out}.btn:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 3px #00000047}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--action);color:var(--action-text)}.btn-gold{background:var(--gold);color:#2a2418}.btn-ghost{box-shadow:inset 0 0 0 2px var(--line);background:0 0}.btn-block{width:100%;display:flex}.btn-lg{min-height:60px;font-size:24px}:root[data-ui-font=system] .btn-lg{font-size:20px;font-weight:600}.link-btn{min-height:var(--tap);color:var(--gold);cursor:pointer;text-underline-offset:3px;background:0 0;border:0;padding:10px 4px;font-size:15px;text-decoration:underline}.tag{font-family:var(--font-pixel);-webkit-font-smoothing:none;background:var(--surface-3);color:var(--text-dim);padding:3px 5px;font-size:12px;line-height:1;display:inline-block}.tag-proto{color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-dark);background:0 0}.card{background:var(--surface);box-shadow:inset 0 0 0 2px var(--line);padding:14px}.stack{flex-direction:column;gap:12px;display:flex}.row{align-items:center;gap:10px;display:flex}.muted{color:var(--text-dim);font-size:15px}.faint{color:var(--text-faint);font-size:14px}.page-inner.lobby{flex-direction:column;min-height:100%;display:flex}.lobby-center{flex-direction:column;flex:1;justify-content:center;padding-block:12px 20px;display:flex}.lobby-head{justify-content:space-between;align-items:flex-start;gap:12px;margin:8px 0 22px;display:flex}.logo-title{font-family:var(--font-pixel);-webkit-font-smoothing:none;color:var(--text);text-shadow:0 3px #161a16;margin:0;font-size:36px;font-weight:400;line-height:1}.logo-sub{font-family:var(--font-pixel);-webkit-font-smoothing:none;color:var(--gold);letter-spacing:2px;margin-top:10px;font-size:12px;line-height:1}.net-chip{color:var(--text-dim);background:var(--surface-2);white-space:nowrap;align-items:center;gap:6px;padding:6px 8px;font-size:13px;display:inline-flex}.net-dot{background:var(--gold);width:6px;height:6px}.net-dot.off{box-shadow:inset 0 0 0 1px var(--text-dim);background:0 0}.hero-piece{cursor:default;width:96px;height:96px;box-shadow:0 0 0 2px var(--piece-edge), 0 4px 0 2px var(--piece-shadow);font-size:72px;position:relative}.hero-piece:before{border-width:2px;inset:3px}@media (height<=700px){.hero-piece{width:80px;height:80px;font-size:60px}}@media (height<=640px){.hero-pieces .hero-piece{width:64px;height:64px;font-size:48px}.hero-pieces{margin-bottom:14px}}.hero-pieces.compact .hero-piece{width:64px;height:64px;font-size:48px}.hero-pieces.compact{margin-bottom:14px}.hero-pieces{justify-content:center;gap:18px;margin:4px 0 22px;display:flex}.continue-card{background:var(--surface);box-shadow:inset 0 0 0 2px var(--gold-dark);align-items:center;gap:12px;margin-bottom:14px;padding:12px;display:flex}.continue-card .grow{flex:1;min-width:0}.mode-list{flex-direction:column;gap:10px;display:flex}.mode-card{background:var(--surface-3);width:100%;color:var(--text);text-align:center;cursor:pointer;border:0;flex-direction:column;align-items:center;gap:6px;padding:14px 16px;transition:transform 70ms ease-out;display:flex;box-shadow:inset 0 -3px #00000047,inset 0 2px #ffffff0f}.mode-card:active:not(:disabled){transform:translateY(1px)}.mode-card-wrap{position:relative}.mode-card-wrap .mode-card{width:100%;padding-inline:84px}@media (width<=359px){.mode-card-wrap .mode-card{padding-inline:72px}}@media (height<=600px){.hero-pieces{display:none}}.mode-change{min-height:var(--tap);min-width:60px;color:inherit;font-family:var(--font-label);-webkit-font-smoothing:none;cursor:pointer;background:#00000038;border:0;padding:0 10px;font-size:12px;position:absolute;top:50%;right:10px;translate:0 -50%}:root[data-ui-font=system] .mode-change{font-size:15px}.mode-card.primary{background:var(--action);color:var(--action-text)}.online-card{animation:3s step-end infinite card-hop;position:relative;overflow:hidden}.online-card:after{content:"";pointer-events:none;background:linear-gradient(100deg,#0000 0 30%,#ffffff38 30% 46%,#0000 46% 54%,#ffffff1f 54% 62%,#0000 62%);width:40%;animation:3s steps(12,jump-none) infinite card-sweep;position:absolute;inset:0;translate:-120%}.online-card .mode-title,.online-card .mode-desc{z-index:1;position:relative}@keyframes card-hop{0%,80%,to{translate:0}84%{translate:0 -4px}88%{translate:0}91%{translate:0 -2px}94%{translate:0}}@keyframes card-sweep{0%,55%{translate:-120%}80%,to{translate:300%}}.mode-card:disabled{box-shadow:inset 0 0 0 2px var(--line);color:var(--text-faint);cursor:not-allowed;background:0 0}.mode-title{font-family:var(--font-label);-webkit-font-smoothing:none;align-items:center;gap:8px;font-size:24px;line-height:1;display:inline-flex}.mode-card:disabled .mode-title{font-size:12px}:root[data-ui-font=system] .mode-title{font-size:20px;font-weight:600}:root[data-ui-font=system] .mode-card:disabled .mode-title{font-size:15px}.mode-desc{color:inherit;opacity:.8;font-size:14px}.daily-strip{width:100%;min-height:var(--tap);background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--gold-dark);color:var(--text);font:inherit;text-align:left;cursor:pointer;border:0;align-items:center;gap:10px;margin-bottom:10px;padding:8px 12px;font-size:15px;display:flex}.daily-strip .grow{flex:1;min-width:0}.daily-dot{background:var(--gold);flex:none;width:8px;height:8px;animation:1.2s step-end infinite blink}.daily-go{font-family:var(--font-label);-webkit-font-smoothing:none;color:var(--gold);font-size:12px}@media (prefers-reduced-motion:reduce){.daily-dot{animation:none}}.field-label{font-family:var(--font-label);-webkit-font-smoothing:none;color:var(--text-dim);margin:0 0 8px;font-size:12px;line-height:1}.segmented{grid-auto-columns:1fr;grid-auto-flow:column;gap:6px;display:grid}.seg-btn{min-height:var(--tap);background:var(--surface-2);color:var(--text-dim);cursor:pointer;box-shadow:inset 0 0 0 2px var(--line);border:0;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:6px 2px;display:flex}.seg-btn .label{white-space:nowrap;font-size:12px;line-height:1}:root[data-ui-font=system] .seg-btn .label{font-size:15px}.seg-btn small{color:var(--text-faint);font-size:13px;line-height:1.2}.seg-btn[aria-checked=true]{background:var(--surface-3);color:var(--text);box-shadow:inset 0 0 0 2px var(--gold)}.seg-btn[aria-checked=true] .label:before{content:"";vertical-align:1px;background:var(--gold);clip-path:polygon(0 0,50% 0,50% 25%,100% 25%,100% 75%,50% 75%,50% 100%,0 100%);width:4px;height:8px;margin-right:5px;display:inline-block}.scrim{z-index:40;background:#0a0c0a99;justify-content:center;align-items:flex-end;animation:.14s ease-out both fade-in-scrim;display:flex;position:fixed;inset:0}.sheet{animation:sheet-up .2s var(--ease-out) both;background:var(--surface);width:100%;max-width:520px;max-height:calc(100dvh - 40px);box-shadow:inset 0 2px 0 var(--gold-dark);padding:18px calc(var(--gutter) + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(var(--gutter) + var(--safe-left));overflow-y:auto}@keyframes fade-in-scrim{0%{opacity:0}}@keyframes sheet-up{0%{opacity:0;translate:0 24px}}@media (width>=600px){.scrim{align-items:center}.sheet{box-shadow:inset 0 0 0 2px var(--gold-dark)}}.sheet-head{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.sheet-title{font-family:var(--font-pixel);-webkit-font-smoothing:none;margin:0;font-size:24px;font-weight:400;line-height:1}.icon-btn{min-width:var(--tap);min-height:var(--tap);color:var(--text-dim);cursor:pointer;font-family:var(--font-pixel);-webkit-font-smoothing:none;background:0 0;border:0;justify-content:center;align-items:center;font-size:12px;display:inline-flex}.menu-list{flex-direction:column;gap:6px;display:flex}.menu-item{background:var(--surface-2);cursor:pointer;text-align:left;border:0;justify-content:space-between;align-items:center;min-height:48px;padding:0 14px;font-size:16px;display:flex}.menu-item.danger{color:#f0a090}.menu-item small{color:var(--text-faint);font-size:13px}.menu-item[aria-pressed=true]{box-shadow:inset 3px 0 0 var(--gold)}.toast-layer{left:0;right:0;top:calc(var(--safe-top) + 64px);z-index:60;pointer-events:none;padding:0 var(--gutter);justify-content:center;display:flex;position:fixed}.toast{max-width:420px;color:var(--text);box-shadow:inset 0 0 0 2px var(--gold-dark);animation:toast-in .14s var(--ease-out), toast-out .16s ease-in 2.22s forwards;background:#171a17;padding:10px 14px;font-size:15px}@keyframes toast-in{0%{opacity:0;translate:0 -8px}}@keyframes toast-out{to{opacity:0;translate:0 -6px}}.banner{background:var(--surface);box-shadow:inset 0 0 0 2px var(--gold-dark);flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;font-size:14px;display:flex}.banner.warn{box-shadow:inset 0 0 0 2px var(--danger)}.update-bar{padding:calc(var(--safe-top) + 8px) calc(var(--gutter) + var(--safe-right)) 0 calc(var(--gutter) + var(--safe-left));flex:none}.update-bar+.page{padding-top:8px}.banner .grow{flex:180px}.banner .btn{min-height:var(--tap);padding:0 10px}.game{min-height:0;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);flex:1;grid-template:"top""banner""board"minmax(0,1fr)"status""actions"/minmax(0,1fr);display:grid}.game-top{grid-area:top;align-items:center;gap:4px;min-height:48px;padding:4px 8px 0;display:flex}.game-top .title{text-align:center;min-width:0;color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:14px;overflow:hidden}.back-btn{min-height:var(--tap);color:var(--text);cursor:pointer;font-family:var(--font-label);-webkit-font-smoothing:none;background:0 0;border:0;align-items:center;gap:6px;padding:0 8px;font-size:12px;display:inline-flex}.game-banner{padding:0 var(--gutter) 6px;grid-area:banner}.player-row{align-items:center;gap:10px;height:52px;padding:4px 8px;display:flex}.player-row.to-move .avatar{box-shadow:inset 0 0 0 2px var(--gold), 0 0 0 2px var(--bg), 0 0 0 4px var(--gold-dark)}.avatar{background:var(--surface-3);width:36px;height:36px;font-family:var(--font-pixel);-webkit-font-smoothing:none;flex:none;place-items:center;font-size:24px;line-height:1;transition:box-shadow .16s ease-out;display:grid;position:relative}.avatar.red{color:#f0b4a6;background:#5a2f27}.avatar.black{color:var(--text);background:#1c201b}.player-meta{flex:1;min-width:0}.player-name{align-items:center;gap:6px;font-size:15px;line-height:1.2;display:flex}.side-tag{font-family:var(--font-pixel);-webkit-font-smoothing:none;padding:2px 4px;font-size:12px;line-height:1}.side-tag.red{background:var(--red);color:var(--action-text)}.side-tag.black{color:var(--text);box-shadow:inset 0 0 0 1px var(--line);background:#151815}.captured{flex-wrap:wrap;gap:2px;min-height:18px;margin-top:4px;display:flex}.mini-piece{background:var(--piece-face);width:18px;height:18px;font-family:var(--font-pixel);-webkit-font-smoothing:none;box-shadow:inset 0 0 0 1px var(--piece-edge);border-radius:50%;place-items:center;font-size:12px;line-height:1;display:grid}.material-lead{font-family:var(--font-pixel);-webkit-font-smoothing:none;color:var(--gold);animation:pop-in .18s var(--ease-out) both;align-self:center;margin-left:4px;font-size:12px;line-height:1}.mini-piece.red{color:var(--red)}.mini-piece.black{color:var(--ink)}.clock{text-align:center;min-width:76px;font-family:var(--font-pixel);-webkit-font-smoothing:none;font-variant-numeric:tabular-nums;background:var(--surface-2);color:var(--text-dim);box-shadow:inset 0 0 0 2px var(--line);flex:none;padding:6px 8px;font-size:24px;line-height:1}.clock.running{background:var(--surface-3);color:var(--text);box-shadow:inset 0 0 0 2px var(--gold)}.clock.low{color:#ffb3a4}.clock.running.low{box-shadow:inset 0 0 0 2px var(--action)}@media (height<=640px){.clock{min-width:56px;font-size:12px}}.thinking{color:var(--gold);white-space:nowrap;align-items:center;gap:6px;font-size:13px;display:inline-flex}.thinking-dots{gap:3px;display:inline-flex}.thinking-dots i{background:var(--gold);width:4px;height:4px;animation:.9s step-end infinite blink}.thinking-dots i:nth-child(2){animation-delay:.3s}.thinking-dots i:nth-child(3){animation-delay:.6s}@keyframes blink{50%{opacity:.2}}.board-area{--rows-h:104px;grid-area:board;justify-content:center;align-items:center;min-height:0;padding:0 4px;display:flex;overflow:hidden;container-type:size}.board-stack{width:min(100cqw, calc((100cqh - var(--rows-h)) * .9), 720px)}.board-fit{aspect-ratio:9/10;width:100%}.status-line{min-height:30px;padding:0 var(--gutter);text-align:center;grid-area:status;justify-content:center;align-items:center;gap:8px;font-size:15px;display:flex}.status-line>span:not(.label){white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.status-line .label{font-size:12px;line-height:1}.status-line.alert{color:#ffb3a4}.status-line.alert .label{background:var(--action);color:var(--action-text);padding:3px 5px}.actions{padding:6px var(--gutter) 10px;grid-area:actions;grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.move-panel{display:none}@media (height<=640px){.board-area{--rows-h:80px}.player-row{height:40px}.avatar{width:28px;height:28px;font-size:12px}.captured{display:none}.game-top{min-height:40px}}@media (aspect-ratio<=5/4) and (height>=780px){.game.online{grid-template-rows:auto auto minmax(0,1fr) auto auto auto;grid-template-areas:"top""banner""board""chat""status""actions"}.game.online .chat-panel.inline{height:clamp(140px, calc(100dvh - var(--safe-top) - var(--safe-bottom) - 100vw * 10 / 9 - 252px), 240px);margin:2px var(--gutter) 4px;grid-area:chat}.game.with-moves{grid-template-rows:auto auto minmax(0,1fr) auto auto auto;grid-template-areas:"top""banner""board""moves""status""actions"}.game.with-moves .move-panel{height:clamp(96px, calc(100dvh - var(--safe-top) - var(--safe-bottom) - 100vw * 10 / 9 - 252px), 200px);margin:2px var(--gutter) 4px;background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--line);grid-area:moves;display:block;overflow-y:auto}}@media (aspect-ratio>=5/4) and (width>=560px){.game{grid-template:"top top""board banner""board moves"minmax(0,1fr)"board status""board actions"/minmax(0,1fr) minmax(260px,340px);column-gap:8px}.board-area{padding:8px}.move-panel{min-height:0;margin:4px var(--gutter);background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--line);grid-area:moves;display:block;overflow-y:auto}.game-banner{padding-top:6px}}.move-list{grid-template-columns:2.4em 1fr 1fr;row-gap:2px;margin:0;padding:6px;font-size:15px;list-style:none;display:grid}.move-list li{display:contents}.move-no{color:var(--text-faint);text-align:right;padding:6px 6px 6px 0;font-size:13px}.move-cell{text-align:left;cursor:pointer;background:0 0;border:0;min-height:40px;padding:4px 6px;font-size:15px}.move-cell.current{background:var(--surface-3);box-shadow:inset 2px 0 0 var(--gold)}.move-cell:disabled{cursor:default}.empty-note{text-align:center;color:var(--text-faint);padding:16px;font-size:14px}.over-card{text-align:center}.over-title{font-family:var(--font-pixel);-webkit-font-smoothing:none;margin:6px 0 12px;font-size:36px;font-weight:400;line-height:1}.over-reason{font-family:var(--font-pixel);-webkit-font-smoothing:none;background:var(--surface-3);color:var(--gold);margin-bottom:14px;padding:4px 6px;font-size:12px;line-height:1;display:inline-block}.record-item{background:var(--surface);width:100%;box-shadow:inset 0 0 0 2px var(--line);cursor:pointer;text-align:left;border:0;align-items:center;gap:12px;padding:12px;display:flex}.record-item .grow{flex:1;min-width:0}.result-badge{width:44px;height:44px;font-family:var(--font-pixel);-webkit-font-smoothing:none;background:var(--surface-3);flex:none;place-items:center;font-size:24px;line-height:1;display:grid}.result-badge.red{background:var(--red);color:var(--action-text)}.result-badge.black{box-shadow:inset 0 0 0 2px var(--line);background:#151815}.replay{gap:12px;display:grid}.replay-board{width:min(100%,520px);margin:0 auto}.replay-controls{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.replay-slider{width:100%;accent-color:var(--gold);min-height:32px}@media (width>=900px){.replay{grid-template-columns:minmax(0,1fr) 320px;align-items:start}.page-inner.wide{max-width:960px}}.settings-group{margin-bottom:20px}.settings-group h2{font-family:var(--font-label);-webkit-font-smoothing:none;color:var(--gold);margin:0 0 8px;font-size:12px;font-weight:400;line-height:1}.setting-row{background:var(--surface);align-items:center;gap:12px;min-height:56px;margin-bottom:2px;padding:8px 12px;display:flex}.setting-row .grow{flex:1;min-width:0}.setting-row .desc{color:var(--text-faint);font-size:14px;line-height:1.35;display:block}.switch{background:var(--surface-2);width:48px;height:28px;box-shadow:inset 0 0 0 2px var(--line);cursor:pointer;border:0;flex:none;padding:0;position:relative}.switch:after{content:"";background:var(--text-faint);width:16px;height:16px;transition:transform .1s;position:absolute;top:6px;left:6px}.switch[aria-checked=true]{box-shadow:inset 0 0 0 2px var(--gold);background:#5a4a26}.switch[aria-checked=true]:after{background:var(--gold);transform:translate(20px)}.switch:disabled{opacity:.4;cursor:not-allowed}:root[data-reduce-motion=true] *,:root[data-reduce-motion=true] :before,:root[data-reduce-motion=true] :after{transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;animation-delay:0s!important}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;animation-delay:0s!important}}.room-code{font-family:var(--font-pixel);-webkit-font-smoothing:none;letter-spacing:.15em;color:var(--gold);-webkit-user-select:all;user-select:all;margin:0;font-size:48px;line-height:1}@media (width<=359px){.room-code{font-size:36px}}.invite-link{word-break:break-all;background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--line);-webkit-user-select:all;user-select:all;margin:0;padding:8px;font-size:13px;line-height:1.4}.waiting-note{color:var(--gold);margin:0;font-size:15px}.join-row{border-top:2px dashed var(--line);padding-top:16px}.code-input{min-width:0;min-height:var(--tap);background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 2px var(--line);font-family:var(--font-pixel);-webkit-font-smoothing:none;letter-spacing:.15em;text-transform:uppercase;border:0;border-radius:0;flex:1;padding:6px 10px;font-size:24px}.code-input:focus{box-shadow:inset 0 0 0 2px var(--gold);outline:none}.code-input::placeholder{color:var(--text-faint)}.page-inner.centered{flex-direction:column;justify-content:center;min-height:100%;padding-block:12px 24px;display:flex}.page-inner.centered .page-title{text-align:center}.link-scene{justify-content:center;align-items:center;gap:12px;margin:4px 0 8px;display:flex}.link-piece{cursor:default;pointer-events:none;width:72px;height:72px;font-size:48px;animation:1.2s steps(2,jump-none) infinite link-bob;position:relative}.link-piece+.link-dots+.link-piece{animation-delay:.6s}.link-slot{border:2px dashed var(--line);width:72px;height:72px;color:var(--text-faint);font-family:var(--font-pixel);-webkit-font-smoothing:none;border-radius:50%;place-items:center;font-size:36px;line-height:1;animation:1.2s step-end infinite blink;display:grid}.link-dots{gap:6px;display:flex}.link-dots i{background:var(--line);width:6px;height:6px;animation:.9s step-end infinite link-dot}@keyframes link-dot{0%,30%{background:var(--gold)}31%,to{background:var(--line)}}@keyframes link-bob{0%{translate:0}to{translate:0 -3px}}@media (width<=359px){.link-piece,.link-slot{width:60px;height:60px}.link-piece{font-size:36px}.link-scene{gap:8px}.link-dots{gap:4px}}@media (prefers-reduced-motion:reduce){.link-piece,.link-slot,.link-dots i{animation:none}}.rematch-wait{text-align:center;justify-content:center;align-items:center;gap:8px;display:flex}.tag-fresh{animation:1.2s step-end 3 tag-blink}@keyframes tag-blink{50%{background:var(--gold);color:#1c201b}}@media (prefers-reduced-motion:reduce){.tag-fresh{animation:none}}.presence{width:10px;height:10px;box-shadow:0 0 0 2px var(--bg);background:#6b716a;position:absolute;bottom:-3px;right:-3px}.presence.on{background:#5fbf6a}@media (width<=359px){.player-row .thinking{gap:0;font-size:0}}.clock.critical{background:var(--action);color:var(--action-text);animation:1s step-end infinite clock-critical;box-shadow:inset 0 0 0 2px #ffb3a4}@keyframes clock-critical{50%{color:#ffb3a4;background:#5a2f27}}.over-head{position:relative}.over-head .over-title{animation:.36s steps(4,jump-none) both over-pop}.over-head.win .over-title{color:var(--gold)}.over-stats{color:var(--text-faint);margin:-6px 0 14px;font-size:14px}@keyframes over-pop{0%{opacity:0;scale:.4}60%{opacity:1;scale:1.15}to{scale:1}}.burst{pointer-events:none;position:absolute;top:24px;left:50%}.burst i{background:var(--gold);opacity:0;width:6px;height:6px;margin:-3px;animation:.7s steps(7,jump-none) .12s both burst;position:absolute}.burst i:nth-child(3n){background:var(--red)}.burst i:nth-child(3n+1){background:#f4e7c8}@keyframes burst{0%{opacity:1;translate:0}75%{opacity:1}to{opacity:0;translate:var(--dx) var(--dy)}}@media (aspect-ratio>=5/4) and (width>=560px){.game.online .chat-panel.inline{min-height:0;margin:4px var(--gutter);grid-area:moves}}.chat-panel{flex-direction:column;gap:6px;min-height:0;display:flex}.chat-panel.inline{background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--line);padding:6px}.chat-panel.sheet .chat-list{height:min(40dvh,280px)}.chat-list{flex-direction:column;flex:1;gap:4px;min-height:36px;margin:0;padding:0 2px;list-style:none;display:flex;overflow-y:auto}.chat-empty{color:var(--text-faint);text-align:center;margin:auto;font-size:13px}.chat-msg{display:flex}.chat-msg.mine{justify-content:flex-end}.chat-bubble{overflow-wrap:anywhere;background:var(--surface-3);max-width:80%;color:var(--text);padding:4px 8px;font-size:15px;line-height:1.35}.chat-msg.mine .chat-bubble{background:var(--gold-dark);color:#1c201b}.chat-quick{scrollbar-width:none;flex:none;gap:6px;display:flex;overflow-x:auto}.chat-quick::-webkit-scrollbar{display:none}.chat-chip{background:var(--surface-3);min-height:40px;color:var(--text);box-shadow:inset 0 0 0 2px var(--line);font-family:var(--font-label);-webkit-font-smoothing:none;cursor:pointer;white-space:nowrap;border:0;flex:none;padding:0 10px;font-size:12px}.chat-chip:disabled{opacity:.5}.chat-form{flex:none;gap:6px;display:flex}.chat-form .btn{min-height:var(--tap);padding:0 12px}.chat-input{min-width:0;min-height:var(--tap);background:var(--bg);color:var(--text);box-shadow:inset 0 0 0 2px var(--line);border:0;border-radius:0;flex:1;padding:4px 8px;font-size:16px}.chat-input:focus{box-shadow:inset 0 0 0 2px var(--gold);outline:none}.chat-btn{position:relative}.badge{background:var(--action);min-width:18px;height:18px;color:var(--action-text);font-family:var(--font-pixel);-webkit-font-smoothing:none;place-items:center;padding:0 4px;font-size:12px;line-height:1;display:grid;position:absolute;top:2px;right:6px}.analysis-panel{flex-direction:column;gap:6px;display:flex}.eval-graph{cursor:pointer;touch-action:none;width:100%;height:64px;box-shadow:inset 0 0 0 2px var(--line);shape-rendering:crispedges;display:block}.eg-bg-red{fill:#2b2420}.eg-bg-black{fill:#1c201b}.eg-red{fill:var(--red)}.eg-black{fill:#c9c2ae}.eg-mid{stroke:var(--line);stroke-width:1px;vector-effect:non-scaling-stroke}.eg-cursor{fill:var(--gold);opacity:.85}.eg-mark.mistake{fill:#e6a23c}.eg-mark.blunder{fill:#ff6a55}.analysis-line{flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:15px;display:flex}.analysis-hint{margin:0;font-size:13px}.grade{font-family:var(--font-pixel);-webkit-font-smoothing:none;background:var(--surface-3);padding:3px 5px;font-size:12px;line-height:1}.grade.blunder{color:#ff8a78}.grade.mistake{color:#f0b45a}.grade.inaccuracy{color:#d8cf8a}.grade.best{color:#7fd08a}.analysis-summary .summary-row{flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;display:flex}.move-mark{margin-left:4px;font-size:12px;font-weight:700}.move-mark.blunder{color:#ff8a78}.move-mark.mistake{color:#f0b45a}.move-mark.inaccuracy{color:#d8cf8a}.puzzle-stack{width:min(100cqw,90cqh,720px)}.rating-card{background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--gold-dark);flex-direction:column;gap:10px;margin-bottom:16px;padding:14px;display:flex}.rating-top{justify-content:space-between;align-items:center;gap:12px;display:flex}.rating-label{color:var(--gold);font-size:12px}.rating-value{font-family:var(--font-pixel);-webkit-font-smoothing:none;align-items:flex-start;gap:8px;margin-top:6px;font-size:48px;line-height:1;display:flex}.rating-delta{background:var(--surface-3);padding:2px 4px;font-size:12px}.rating-delta.up{color:#7fd08a}.rating-delta.down{color:#ff8a78}.rating-graph{position:relative}.rating-graph svg{background:var(--bg);width:100%;height:72px;box-shadow:inset 0 0 0 2px var(--line);display:block}.rg-line{fill:none;stroke:var(--gold);stroke-width:2px;vector-effect:non-scaling-stroke}.rating-graph-scale{pointer-events:none;flex-direction:column;justify-content:space-between;font-size:12px;display:flex;position:absolute;top:4px;bottom:4px;right:6px}.rating-graph-empty{margin:0;font-size:13px}.stat-row{grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:8px;display:grid}.stat{flex-direction:column;gap:4px;min-width:0;display:flex}.stat-value{font-family:var(--font-pixel);-webkit-font-smoothing:none;font-size:24px;line-height:1}.stat-label,.stat-sub{color:var(--text-faint);font-size:13px}.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.mode-tile{text-align:left;min-height:76px;color:var(--text);background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--line);cursor:pointer;border:0;flex-direction:column;gap:6px;padding:10px;display:flex}.mode-tile.wide{grid-column:1/-1;min-height:0}.mode-tile.fresh{box-shadow:inset 0 0 0 2px var(--gold)}.mode-tile:disabled{opacity:.55;cursor:default}.mode-tile-title{font-family:var(--font-pixel);-webkit-font-smoothing:none;font-size:24px;line-height:1}:root[data-ui-font=system] .mode-tile-title{font-size:18px;font-weight:600}.mode-tile-desc{color:var(--text-faint);font-size:14px;line-height:1.35}.section-title{font-family:var(--font-pixel);-webkit-font-smoothing:none;margin:20px 0 8px;font-size:24px;font-weight:400}.theme-table{flex-direction:column;gap:6px;display:flex}.theme-row{background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--line);grid-template-columns:5.5em minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:6px 8px;display:grid}.theme-row.strong{box-shadow:inset 0 0 0 2px #5b7a3a}.theme-row.weak{box-shadow:inset 0 0 0 2px #8a3a2c}.theme-name{font-size:15px}.theme-bar{background:var(--bg);height:8px;box-shadow:inset 0 0 0 1px var(--line)}.theme-bar i{background:var(--gold);height:100%;display:block}.theme-row.strong .theme-bar i{background:#7fd08a}.theme-row.weak .theme-bar i{background:#ff8a78}.theme-num{color:var(--text-dim);white-space:nowrap;align-items:center;gap:4px;font-size:13px;display:flex}.theme-tag{color:#7fd08a}.theme-tag.weak{color:#ff8a78}.theme-go{min-height:var(--tap);padding:0 10px}.puzzle-note{white-space:nowrap;text-overflow:ellipsis;background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--line);margin:0;padding:6px 8px;font-size:14px;overflow:hidden}.rush-bar{justify-content:space-between;align-items:center;gap:12px;display:flex}.rush-score{font-family:var(--font-pixel);-webkit-font-smoothing:none;color:var(--gold);font-size:36px;line-height:1}.rush-strikes{gap:6px;display:flex}.rush-strikes i{background:var(--surface-3);width:14px;height:14px;box-shadow:inset 0 0 0 2px var(--line)}.rush-strikes i.hit{background:var(--action);box-shadow:none}.stats-card{flex-direction:column;gap:10px;margin:12px 0;display:flex}.stats-levels{grid-template-columns:auto auto minmax(40px,1fr) auto;align-items:center;gap:6px 10px;font-size:14px;display:grid}.stats-level{display:contents}.stats-level-name{white-space:nowrap}.stats-wdl{color:var(--text-dim);white-space:nowrap}.stats-bar{background:var(--surface-3);height:8px;display:flex}.stats-bar i{flex-basis:0;min-width:2px}.stats-bar .win{background:#6fbf73}.stats-bar .draw{background:var(--text-faint)}.stats-bar .loss{background:var(--action)}.stats-pct{text-align:right;font-variant-numeric:tabular-nums;min-width:3em}.stats-recent{flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;display:flex}.recent-dots{gap:4px;display:flex}.recent-dot{width:28px;height:28px;font-family:var(--font-pixel);-webkit-font-smoothing:none;cursor:pointer;border:0;place-items:center;padding:0;font-size:12px;line-height:1;display:grid;position:relative}.recent-dot:after{content:"";position:absolute;inset:-8px -2px}.recent-dot.win{color:#cfe8c9;background:#2f5a3a}.recent-dot.draw{background:var(--surface-3);color:var(--text-dim)}.recent-dot.loss{color:#f0b4a6;background:#5a2f27}@media (width<=359px){.stats-levels{column-gap:6px;font-size:13px}.recent-dot{width:24px;height:24px}}.replay-extra{flex-wrap:wrap;gap:8px}.replay-extra .btn{flex:auto}.moves-sheet{background:var(--surface-2);max-height:50dvh;box-shadow:inset 0 0 0 2px var(--line);overflow-y:auto}.record-tools{justify-content:space-between;align-items:center;gap:8px;margin-top:12px;display:flex}.filter-chips{scrollbar-width:none;gap:6px;min-width:0;display:flex;overflow-x:auto}.chip,.record-tools>.btn{white-space:nowrap;flex:none}.chip{background:var(--surface-2);min-height:40px;color:var(--text-dim);box-shadow:inset 0 0 0 2px var(--line);cursor:pointer;border:0;padding:0 10px;font-size:14px}.chip[aria-pressed=true]{color:var(--text);background:var(--surface-3);box-shadow:inset 0 0 0 2px var(--gold)}.record-row{align-items:stretch;gap:8px;display:flex}.record-row .record-item{flex:1;min-width:0}.record-delete{flex:none;align-self:center}.rush-missed{flex-direction:column;gap:6px;margin-bottom:12px;display:flex}.review-moves{scrollbar-width:none;gap:4px;min-height:36px;margin:0;padding:0;list-style:none;display:flex;overflow-x:auto}.review-move{background:var(--surface-2);min-height:36px;color:var(--text-dim);box-shadow:inset 0 0 0 2px var(--line);white-space:nowrap;cursor:pointer;border:0;flex:none;padding:0 8px;font-size:14px}.review-move.mine{color:var(--text)}.review-move.current{background:var(--surface-3);box-shadow:inset 0 0 0 2px var(--gold);color:var(--text)}.actions.four{grid-template-columns:repeat(4,1fr)}.actions.four .btn{white-space:nowrap;padding-inline:4px}.analysis-top{flex-direction:column;gap:4px;display:flex}.eval-bar{height:24px;box-shadow:inset 0 0 0 2px var(--line);background:#151815;position:relative;overflow:hidden}.eval-red{background:var(--piece-face);transition:width .24s var(--ease-out);position:absolute;inset:0 auto 0 0}.eval-text{color:var(--red);mix-blend-mode:normal;align-items:center;padding:0 8px;font-size:14px;font-weight:600;display:flex;position:absolute;inset:0}.engine-line{align-items:center;gap:6px;min-width:0;height:36px;display:flex}.engine-line.empty{color:var(--text-faint);padding-left:8px}.engine-score{text-align:center;background:var(--surface-3);min-width:64px;color:var(--text);flex:none;padding:4px 6px;font-size:13px;font-weight:600}.engine-line.primary .engine-score{background:var(--piece-face);color:var(--ink)}.engine-moves{scrollbar-width:none;gap:2px;min-width:0;display:flex;overflow-x:auto}.engine-move{min-height:32px;color:var(--text-dim);white-space:nowrap;cursor:pointer;background:0 0;border:0;flex:none;padding:0 6px;font-size:14px}.engine-move:first-child{color:var(--text)}.analysis-moves{padding:4px var(--gutter);grid-area:status}