:root{--bg:#121213;--panel:#1a1a1b;--line:#3a3a3c;--line-soft:#565758;--text:#f4f4f5;--muted:#8d8d91;--hop:#3a3a3c;--skip:#b59f3b;--jump:#538d4e;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%;margin:0;padding:0;font-family:Helvetica Neue,Helvetica,Arial,system-ui,sans-serif}button{cursor:pointer;font-family:inherit}.app{flex-direction:column;gap:20px;max-width:520px;margin:0 auto;padding:20px 16px 48px;display:flex}.masthead{text-align:center;border-bottom:1px solid var(--line);padding-bottom:14px}.masthead h1{letter-spacing:.06em;text-transform:uppercase;margin:0;font-size:clamp(26px,8vw,38px);font-weight:800}.masthead h1 .jump{color:var(--jump)}.masthead h1 .skip{color:var(--skip)}.masthead h1 .hop{color:var(--muted)}.tagline{color:var(--muted);letter-spacing:.04em;margin:6px 0 0;font-size:13px}.setup{flex-direction:column;gap:18px;display:flex}.lengths{border:1px solid var(--line);border-radius:10px;margin:0;padding:14px}.lengths legend{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;padding:0 8px;font-size:13px}.length-row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.length{border:1px solid var(--line-soft);min-width:44px;height:46px;color:var(--text);background:0 0;border-radius:8px;flex:44px;font-size:18px;font-weight:700;transition:background .12s,border-color .12s}.length:hover{border-color:var(--text)}.length.on{background:var(--jump);border-color:var(--jump)}.secret-form{flex-direction:column;gap:10px;display:flex}.secret-form label{font-size:14px;font-weight:600}.muted{color:var(--muted);font-weight:400}.muted.center{text-align:center;margin:0;font-size:12px}.secret-input{border:1px solid var(--line-soft);background:var(--panel);height:54px;color:var(--text);letter-spacing:.5em;text-align:center;border-radius:10px;padding:0 0 0 .5em;font-size:26px}.secret-input:focus{outline:2px solid var(--jump);outline-offset:1px}.dots{justify-content:center;gap:8px;margin:0;display:flex}.dot{border:1px solid var(--line-soft);border-radius:50%;width:10px;height:10px}.dot.filled{background:var(--jump);border-color:var(--jump)}.error{color:#ff7b72;margin:0;font-size:13px}.primary,.ghost{letter-spacing:.04em;border:1px solid #0000;border-radius:10px;height:50px;padding:0 18px;font-size:16px;font-weight:700}.primary{background:var(--jump);color:#fff}.primary:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}.ghost{color:var(--text);border-color:var(--line-soft);background:0 0}.ghost:hover{border-color:var(--text)}.wide{width:100%}.or{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;align-items:center;gap:12px;font-size:12px;display:flex}.or:before,.or:after{content:"";background:var(--line);flex:1;height:1px}.board-area{flex-direction:column;gap:18px;display:flex}.status{text-align:center;color:var(--muted);letter-spacing:.04em;margin:0;font-size:14px}.status.win{color:var(--jump);font-size:16px}.status.lose{color:#ff7b72;font-size:16px}.board{flex-direction:column;align-items:center;gap:6px;display:flex}.row{grid-template-columns:repeat(var(--cols,4), minmax(0, 1fr));gap:6px;width:100%;display:grid}.row.len-3{--cols:3;max-width:240px}.row.len-4{--cols:4;max-width:310px}.row.len-5{--cols:5;max-width:380px}.row.len-6{--cols:6;max-width:440px}.row.len-7{--cols:7}.row.len-8{--cols:8}.cell{aspect-ratio:1;border:2px solid var(--line);background:0 0;border-radius:4px;justify-content:center;align-items:center;font-size:clamp(18px,6.5vw,30px);font-weight:700;display:flex;position:relative}.cell.typed{border-color:var(--line-soft)}.cell.caret{border-color:var(--line-soft);box-shadow:inset 0 0 0 1px var(--line-soft)}.cell.hop,.cell.skip,.cell.jump{border-color:#0000;animation:.4s both flip}.cell.hop{background:var(--hop)}.cell.skip{background:var(--skip)}.cell.jump{background:var(--jump)}.cell .mark{opacity:.75;letter-spacing:0;font-size:10px;font-weight:800;position:absolute;top:2px;right:4px}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}to{transform:rotateX(0)}}.row.shake{animation:.42s shake}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.bank{border:1px solid var(--line);border-radius:10px;padding:12px}.bank h2{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 10px;font-size:11px;font-weight:700}.bank-row{grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;display:grid}.chip{aspect-ratio:1;border:1px solid var(--line-soft);border-radius:5px;justify-content:center;align-items:center;font-size:clamp(12px,3.6vw,16px);font-weight:700;transition:background .2s,opacity .2s;display:flex}.chip.hop{background:var(--hop);border-color:var(--hop)}.chip.skip{background:var(--skip);border-color:var(--skip)}.chip.jump{background:var(--jump);border-color:var(--jump)}.chip.out{opacity:.35;text-decoration:line-through}.keypad{flex-direction:column;gap:6px;display:flex}.keypad-row{grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;display:grid}.keypad-row.actions{grid-template-columns:1fr 1fr;gap:8px}.key{background:var(--line-soft);height:52px;color:var(--text);border:none;border-radius:5px;font-size:clamp(14px,4vw,18px);font-weight:700}.key:active{transform:translateY(1px)}.key.hop{background:var(--hop);color:var(--muted)}.key.skip{background:var(--skip)}.key.jump{background:var(--jump)}.wide-key{text-transform:uppercase;letter-spacing:.08em;font-size:13px}.go.ready{background:var(--jump)}.endgame{flex-direction:column;align-items:center;gap:12px;display:flex}.reveal{margin:0;font-size:18px}.reveal strong{letter-spacing:.15em}.endgame-actions{gap:10px;width:100%;display:flex}.endgame-actions button{flex:1}.quit-card{text-align:center;flex-direction:column;gap:16px;padding:32px 0;display:flex}.quit-card h2{margin:0;font-size:22px}.legend{border-top:1px solid var(--line);color:var(--muted);flex-direction:column;gap:8px;padding-top:14px;font-size:13px;display:flex}.legend-item{align-items:center;gap:10px;display:flex}.legend-item strong{color:var(--text)}.swatch{color:#fff;border-radius:4px;flex:none;justify-content:center;align-items:center;width:26px;height:26px;font-size:12px;font-weight:800;display:inline-flex}.swatch.hop{background:var(--hop)}.swatch.skip{background:var(--skip)}.swatch.jump{background:var(--jump)}@media (width<=380px){.app{padding:14px 10px 32px}.key{height:46px}}