: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%;overscroll-behavior-y:none;margin:0;padding:0;font-family:Helvetica Neue,Helvetica,Arial,system-ui,sans-serif}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;font-family:inherit}.app{max-width:520px;padding:20px max(16px, env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));flex-direction:column;gap:20px;margin:0 auto;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}@media (hover:hover){.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-label-row{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.reveal{color:var(--muted);text-underline-offset:3px;background:0 0;border:0;flex:none;padding:2px 0;font-size:13px;font-weight:600;text-decoration:underline}@media (hover:hover){.reveal:hover{color:var(--text)}}.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.masked{-webkit-text-security:disc;text-security:disc}.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;min-height:50px;padding:8px 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}@media (hover:hover){.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{filter:brightness(1.35);transform:translateY(1px)}.key.hop{background:var(--hop);color:var(--muted);opacity:.5}.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<=560px){.app{gap:14px}.length-row{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;display:grid}.length{min-width:0;height:48px}.keypad{gap:8px}.keypad-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.key{border-radius:8px;height:48px;font-size:20px}.wide-key{font-size:14px}.endgame-actions{gap:8px}.app.phase-playing .masthead{padding-bottom:8px}.app.phase-playing .masthead h1{font-size:22px}.app.phase-playing .tagline{display:none}.app.phase-playing .legend{flex-direction:row;justify-content:space-around;gap:8px;padding-top:10px;font-size:12px}.app.phase-playing .legend-item{gap:6px}.app.phase-playing .legend-desc{display:none}.app.phase-playing .swatch{width:20px;height:20px;font-size:11px}}@media (width<=360px){.app{padding-left:max(10px, env(safe-area-inset-left));padding-right:max(10px, env(safe-area-inset-right))}.key{height:44px}}@media (width<=560px),(height<=560px) and (orientation:landscape){.board-area:not(.over) .bank{display:none}@supports (height:1cqh){.app.phase-playing{min-height:100dvh;padding-top:max(12px, env(safe-area-inset-top));padding-bottom:calc(10px + env(safe-area-inset-bottom));gap:12px}.app.phase-playing .board-area{flex:1 1 0;gap:12px;min-height:0}.app.phase-playing .legend{flex:none}.app.phase-playing .board{flex:1 1 0;justify-content:center;min-height:120px;container-type:size}.app.phase-playing .row{--gap:6px;--cell:max(22px, min((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols), (100cqh - (var(--rows) - 1) * var(--gap)) / var(--rows)));justify-content:center;gap:var(--gap);width:auto;max-width:100%;display:flex}.app.phase-playing .cell{width:var(--cell);height:var(--cell);aspect-ratio:auto;font-size:calc(var(--cell) * .52);flex:none}.app.phase-playing .cell .mark{font-size:clamp(7px, calc(var(--cell) * .2), 11px)}}}@media (height<=560px) and (orientation:landscape){.keypad-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.key{border-radius:8px;height:42px;font-size:18px}.wide-key{font-size:13px}.app.phase-playing{gap:8px;max-width:780px}.app.phase-playing .masthead,.app.phase-playing .legend{display:none}@supports (height:1cqh){.app.phase-playing .board-area{grid-template:"board."minmax(0,1fr)"board status""board bank""board keypad""board."minmax(0,1fr)/minmax(0,1fr) minmax(0,1fr);gap:8px 18px;display:grid}.app.phase-playing .status{grid-area:status}.app.phase-playing .board{grid-area:board;align-self:stretch;height:100%}.app.phase-playing .bank{grid-area:bank}.app.phase-playing .keypad,.app.phase-playing .endgame{grid-area:keypad}}}