.game{align-items:center;gap:var(--space-3);flex-direction:column;flex:1;display:flex}.zr-board{--tile:clamp(30px, min(calc((100svh - 470px) / 10.5), calc((100vw - 170px) / 4)), 46px);gap:var(--space-1);flex-direction:column;align-items:center;width:100%;max-width:360px;display:flex}.zr-row{align-items:center;gap:var(--space-2);display:flex}.zr-no{text-align:right;width:18px;color:var(--ink-muted);font-variant-numeric:tabular-nums;font-size:12px;font-weight:600}.zr-tiles{gap:var(--space-1);display:flex}.zr-board .sg-tile{width:var(--tile);height:var(--tile);font-size:calc(var(--tile) * .55);line-height:1}.zr-row.empty .sg-tile{opacity:.7;border-style:dashed}.zr-row.now .sg-tile{border-color:var(--line-strong)}.zr-row.now .sg-tile:empty:first-child,.zr-row.now .sg-tile-typed+.sg-tile:empty{border-color:var(--kobalt)}.zr-fb{gap:var(--space-1);min-width:88px;display:flex}.zr-pin{width:42px;height:calc(var(--tile) * .78);border-radius:var(--radius-sm);min-height:26px;font-family:var(--font-display);font-variant-numeric:tabular-nums;border:2px solid #0000;justify-content:center;align-items:center;gap:5px;font-size:15px;font-weight:800;display:inline-flex}.zr-pin i{box-sizing:border-box;border-radius:50%;width:10px;height:10px}.zr-pin.hit{background-color:var(--tile-correct);color:var(--on-kobalt)}.zr-pin.hit i{background-color:currentColor}.zr-pin.near{background-color:var(--tile-present);color:var(--on-mango)}.zr-pin.near i{border:2px solid}.zr-pin.zero{border-color:var(--line);color:var(--ink-muted);background-color:#0000}.zr-row.example{--tile:36px;margin:var(--space-1) 0}.zr-row.example .sg-tile{width:var(--tile);height:var(--tile);font-size:20px}.zr-play{gap:var(--space-2);flex-direction:column;width:100%;max-width:360px;margin-top:auto;display:flex}.zr-play[hidden]{display:none}.zr-info{justify-content:space-between;align-items:center;gap:var(--space-2);color:var(--ink-muted);font-variant-numeric:tabular-nums;flex-wrap:wrap;font-size:14px;display:flex}.zr-count{color:var(--ink);font-weight:600}.zr-opt{cursor:pointer;align-items:center;gap:6px;min-height:32px;display:inline-flex}.zr-check{width:18px;height:18px;accent-color:var(--kobalt);margin:0}.zr-hint{min-height:20px;color:var(--ink-muted);margin:0;font-size:14px;line-height:20px}.zr-notebox .caption{margin:0 0 var(--space-1);color:var(--ink-muted)}.zr-notes{gap:3px;display:flex}.zr-note{border:2px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-raised);min-width:0;height:40px;color:var(--ink);font-family:var(--font-sans);cursor:pointer;flex:1 1 0;padding:0;font-size:16px;font-weight:700}.zr-note:focus-visible{box-shadow:var(--focus-ring);outline:2px solid #0000}.zr-note.out,.sg-key.zr-out{color:var(--ink-muted);text-decoration:line-through;text-decoration-thickness:2px}.zr-note.out{background:var(--key-absent);border-color:var(--key-absent);color:var(--on-key-absent)}.zr-keys{max-width:360px;padding:0}.zr-keys .sg-key{height:52px;font-size:20px}.zr-keys .sg-key-wide{font-size:13px}.after{align-items:center;gap:var(--space-2);text-align:center;flex-direction:column;display:flex}.after p{margin:0}.zr-row.shake{animation:.3s zr-shake}.zr-fb.pop .zr-pin{animation:.26s ease-out both zr-pop}.zr-fb.pop .zr-pin+.zr-pin{animation-delay:.1s}.sg-tile.hop{animation:.42s ease-out both zr-hop}@keyframes zr-shake{20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}@keyframes zr-pop{0%{opacity:0;transform:scale(.6)}}@keyframes zr-hop{40%{box-shadow:0 6px 0 var(--koralle);transform:translateY(-14px)}70%{box-shadow:0 2px 0 var(--mango);transform:translateY(2px)}}