:root{--bg:#f3eee4;--ink:#1a1714;--paper:#fffdf8;--user:#123048;--conflict-bg:#f3d5d0;--conflict-ink:#6e2a26;--selected:#d5e5f6;--selected-ring:#123048;--peer:#eadfcd;--same:#dcc49a;--pine:#1d4334;--pine-ink:#f7f3ea;--line:#cabbab;--shadow:#1a17141f;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:PingFang HK,PingFang TC,Heiti TC,Hiragino Sans CNS,Noto Sans CJK TC,Noto Sans TC,Microsoft JhengHei,WenQuanYi Micro Hei,sans-serif}*,:before,:after{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);margin:0}body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;justify-content:center;min-height:100svh;display:flex}button{color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:0 0;border:none;padding:0;font-family:inherit;font-weight:700;line-height:1}[hidden]{display:none!important}.app{width:min(560px,100%);height:100svh;padding:calc(10px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px));flex-direction:column;gap:8px;display:flex;overflow:auto}.header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.titles{min-width:0}.header-actions{flex:none;gap:8px;margin-left:auto;display:flex}h1{letter-spacing:.06em;margin:0;font-size:clamp(1.7rem,7vw,2.2rem);font-weight:700;line-height:1.05}.subtitle{letter-spacing:.04em;margin:3px 0 0;font-size:1.08rem;font-weight:700}.sound{border:2.5px solid var(--ink);background:var(--paper);border-radius:14px;flex:none;min-width:112px;min-height:52px;padding:10px 12px;font-size:1.15rem}.sound[aria-pressed=true]{background:var(--pine);border-color:var(--pine);color:var(--pine-ink)}.sound:active,.settings-launch:active{background:var(--ink);color:var(--paper)}.settings-launch{border:2.5px solid var(--ink);background:var(--paper);border-radius:14px;flex:none;min-width:88px;min-height:52px;padding:10px 12px;font-size:1.15rem}.status{min-height:1.45em;margin:0;font-size:1.18rem;font-weight:700;line-height:1.35}.screen-select,.screen-play,.screen-settings{flex-direction:column;flex:auto;gap:8px;min-width:0;min-height:0;display:flex}.screen-select,.screen-settings{overflow:auto}.settings-stack{flex-direction:column;gap:12px;display:flex}.settings-note{margin:0;font-size:1.22rem;font-weight:700;line-height:1.45}.settings-stack .btn,#settings-back{min-height:68px;font-size:1.45rem}.pin-value{border:3px solid var(--ink);background:var(--paper);text-align:center;letter-spacing:.18em;font-variant-numeric:tabular-nums;-webkit-user-select:text;user-select:text;border-radius:18px;margin:0;padding:18px 12px 18px .18em;font-size:clamp(2.4rem,12vw,3.6rem);font-weight:700}.pin-input{border:3px solid var(--ink);background:var(--paper);width:100%;min-height:76px;color:var(--ink);text-align:center;font:inherit;letter-spacing:.22em;font-variant-numeric:tabular-nums;border-radius:18px;padding:8px 12px 8px .22em;font-size:clamp(2rem,10vw,3rem);font-weight:700}.band-nav{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;display:grid}.band-label{text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.02em;min-width:8.5rem;margin:0;font-size:1.15rem;font-weight:700}.stage-grid{flex:auto;grid-template-rows:repeat(5,minmax(72px,1fr));grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;min-height:0;display:grid}.stage-tile{border:2.5px solid var(--ink);background:var(--paper);min-width:0;min-height:72px;color:var(--ink);border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:2px;display:flex;position:relative}.stage-num{font-variant-numeric:tabular-nums;font-size:1.65rem;line-height:1}.stage-caption{color:var(--pine);letter-spacing:.04em;font-size:.95rem;font-weight:700}.stage-mark{color:var(--pine);font-size:1.05rem;line-height:1;position:absolute;top:5px;right:7px}.stage-tile.frontier{border-color:var(--pine);box-shadow:inset 0 0 0 2px var(--pine);background:#e5f0e8}.stage-tile.cleared{background:var(--paper)}.stage-tile.locked,.stage-tile[aria-disabled=true]{color:#8f867b;background:#e7e1d6;border-color:#d5c9b8}.stage-tile:active:not([aria-disabled=true]){background:var(--ink);color:var(--paper)}.stage-tile:active:not([aria-disabled=true]) .stage-caption,.stage-tile:active:not([aria-disabled=true]) .stage-mark{color:var(--paper)}.btn:disabled{color:#8f867b;cursor:default;background:#e7e1d6;border-color:#d5c9b8}.board-wrap{flex:auto;place-items:center;min-width:0;min-height:0;display:grid;overflow:hidden}.board{background:var(--ink);border-radius:10px;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(2,1fr);gap:3px;padding:3px;display:grid;overflow:hidden;container-type:inline-size}.box{background:var(--line);grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr);gap:1px;min-width:0;min-height:0;display:grid}.cell{background:var(--paper);min-width:0;min-height:0;color:var(--ink);font-variant-numeric:tabular-nums;place-items:center;font-size:2rem;font-weight:700;line-height:1;display:grid}@supports (width:1cqi){.cell{font-size:clamp(1.8rem,11.2cqi,3.2rem)}}.cell.locked{color:var(--ink);font-weight:700}.cell.entry{color:var(--user);font-weight:600}.cell.peer{background:var(--peer)}.cell.same{background:var(--same)}.cell.selected{background:var(--selected);box-shadow:inset 0 0 0 3px var(--selected-ring)}.cell.conflict{background:var(--conflict-bg);color:var(--conflict-ink)}.cell.conflict.selected{box-shadow:inset 0 0 0 3px var(--conflict-ink)}.pad{grid-template-columns:repeat(3,1fr);gap:8px;display:grid;container-type:inline-size}.key,.btn{border:2.5px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:14px}.key{font-variant-numeric:tabular-nums;min-height:72px;font-size:2.2rem}@supports (width:1cqi){.key{min-height:clamp(64px,22cqi,96px);font-size:clamp(2rem,18cqi,3rem)}}.key:active,.btn:active,.sound[aria-pressed=false]:active{background:var(--ink);color:var(--paper)}.actions{grid-template-columns:1fr 1.25fr 1fr;gap:8px;display:grid}.btn{min-height:58px;padding:8px 4px;font-size:1.3rem}.btn-primary{background:var(--pine);color:var(--pine-ink);border-color:#12281f}.btn-primary:active{color:var(--pine-ink);background:#0f241c}.overlay{z-index:5;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));background:linear-gradient(#f3eee433,#f3eee48c 45%,#f3eee4f7);justify-content:center;align-items:flex-end;animation:.18s fade;display:flex;position:fixed;inset:0}.overlay[hidden]{display:none}.card{background:var(--paper);border:3px solid var(--ink);width:min(100%,520px);box-shadow:0 12px 36px var(--shadow);border-radius:18px;margin-bottom:4px;padding:22px 18px 16px}.card h2{letter-spacing:.04em;margin:0 0 8px;font-size:2rem;line-height:1.2}.card p{margin:0;font-size:1.32rem;font-weight:700;line-height:1.45}.btn-block{width:100%;min-height:62px;margin-top:12px;font-size:1.35rem}.noscript{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--paper);border:3px solid var(--ink);border-radius:14px;margin:0;padding:16px;font-size:1.2rem;font-weight:700;position:fixed}:focus-visible{outline:3px solid var(--user);outline-offset:2px}.cell:focus-visible{outline-offset:-4px}@media (hover:hover) and (pointer:fine){.key:hover,.btn:hover,.sound[aria-pressed=false]:hover,.settings-launch:hover,.stage-tile:hover:not([aria-disabled=true]):not(.frontier){background:#efe8da}.btn-primary:hover,.sound[aria-pressed=true]:hover{background:#17382b}.btn:disabled:hover{color:#8f867b;background:#e7e1d6}}@media (height<=700px){.app{gap:6px}h1{font-size:1.55rem}.subtitle,.status{font-size:1rem}.sound,.settings-launch{min-height:48px;font-size:1.05rem}.key{min-height:64px;font-size:2rem}.btn{min-height:52px;font-size:1.15rem}}@media (orientation:landscape) and (height<=540px){.app.is-select .stage-grid{grid-template-rows:repeat(2,minmax(64px,1fr));grid-template-columns:repeat(10,minmax(0,1fr))}.app.is-select .stage-num{font-size:1.25rem}.app.is-play{grid-template:"board header""board status""board pad"minmax(0,1fr)"board actions"/minmax(0,1fr) minmax(220px,300px);align-content:stretch;gap:8px 14px;width:min(960px,100%);display:grid}.app.is-play .screen-play{display:contents}.app.is-play .header{grid-area:header}.app.is-play .status{grid-area:status;align-self:center}.app.is-play .board-wrap{grid-area:board;height:100%}.app.is-play .pad{grid-area:pad;align-self:end}.app.is-play .actions{grid-area:actions}}@media (prefers-reduced-motion:reduce){.overlay{animation:none}}@keyframes fade{0%{opacity:0}to{opacity:1}}