:root{--bg:#080808;--yellow:#ffd600;--white:#fff;--tile:#1a1a1a;--grey:#555;--red:#e5341b;--size:min(100vw - 32px, 100dvh - 200px, 480px)}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);height:100%}body{color:var(--white);-webkit-user-select:none;user-select:none;touch-action:manipulation;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-weight:900}.app{min-height:100dvh;padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));justify-content:center;align-items:center;display:flex}main{text-align:center;flex-direction:column;align-items:center;gap:24px;width:100%;max-width:480px;display:flex}h1{letter-spacing:-.04em;color:var(--yellow);font-size:clamp(64px,20vw,110px);line-height:.9}p{color:var(--grey);font-size:18px;font-weight:600;line-height:1.4}header{letter-spacing:.2em;color:var(--grey);font-size:14px}.big{color:var(--yellow);font-size:clamp(120px,40vw,200px);font-weight:900;line-height:1}button{font:inherit;cursor:pointer;border:0}.cta{background:var(--yellow);width:100%;color:var(--bg);letter-spacing:.08em;border-radius:8px;padding:20px;font-size:22px;transition:transform .1s}.cta:active{transform:scale(.97)}.cta:disabled{opacity:.3;cursor:default}.cta.outline{color:var(--white);box-shadow:inset 0 0 0 2px var(--white);background:0 0}.hot{color:var(--yellow)}.hud{width:var(--size);justify-content:space-between;display:flex}.mono{font-variant-numeric:tabular-nums}main.target{--size:min(100vw - 32px, 100dvh - 340px, 480px);gap:16px}.scores{width:var(--size);justify-content:space-between;display:flex}.scores div{flex-direction:column;align-items:flex-start;gap:4px;display:flex}.scores div:last-child{align-items:flex-end}.scores small{letter-spacing:.2em;color:var(--grey);font-size:12px}.scores b{color:var(--yellow);font-size:56px;line-height:1}.scores b.white{color:var(--white)}.hidden{opacity:0}.intro{z-index:3;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex;position:absolute;inset:0}.intro small{letter-spacing:.3em;color:var(--grey);font-size:14px}.intro b{color:var(--yellow);font-size:clamp(96px,32vw,180px);line-height:1;animation:.4s ease-out slam}.meter{width:var(--size);background:var(--tile);height:4px}.meter i{background:var(--yellow);transform-origin:0;height:100%;transition:transform .2s;display:block}.meter.bust i{background:var(--red);animation:.3s ease-out forwards snap}.tile.mystery .num{opacity:.35}.tile.flip{background:var(--white);animation:swell var(--flipMs) ease-in forwards}.tile.flip .num{opacity:0}.grid.jackpot .tile,.grid.jackpot .tile.done{animation:wave .3s calc(var(--w) * 40ms) both}.scores.hit b{animation:.4s ease-out slam}.grid.risky{animation:1s ease-out infinite heartbeat}.headline{color:var(--yellow);font-size:clamp(40px,12vw,64px);line-height:1}.big.score{color:var(--white);font-size:clamp(64px,20vw,96px)}.dim{color:var(--grey)}.seq{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.seq b{background:var(--yellow);min-width:48px;color:var(--bg);border-radius:8px;padding:10px 12px;font-size:24px}.seq b.over{background:var(--red);color:var(--white)}.sharebox{background:var(--tile);width:100%;color:var(--white);text-align:left;white-space:pre-wrap;word-break:break-all;-webkit-user-select:text;user-select:text;border-radius:8px;padding:14px 16px;font:600 14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.lb{flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}.lb ol{flex-direction:column;gap:4px;width:100%;list-style:none;display:flex}.lb li{background:var(--tile);text-align:left;border-radius:8px;grid-template-columns:44px 1fr auto auto;align-items:baseline;gap:10px;padding:10px 12px;font-size:14px;display:grid}.lb li.me{background:var(--yellow);color:var(--bg)}.lb li.me .dim{color:var(--bg);opacity:.6}.lb .rank{color:var(--grey)}.lb li.me .rank{color:var(--bg)}.lb .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.lb .outcome{letter-spacing:.1em;font-size:12px}.nick{gap:8px;width:100%;display:flex}.nick input{background:var(--tile);min-width:0;color:var(--white);font:inherit;border:0;border-radius:8px;flex:1;padding:12px 14px;font-weight:600}.nick input:focus{outline:2px solid var(--yellow)}.nick button{background:var(--white);color:var(--bg);letter-spacing:.1em;border-radius:8px;padding:12px 16px;font-size:14px}.nick button:disabled{opacity:.3}p b{color:var(--white)}footer{letter-spacing:.15em;color:var(--grey);gap:24px;font-size:13px;display:flex}footer button{color:inherit;background:0 0;padding:8px}.by{letter-spacing:.2em;color:var(--grey);font-size:11px;text-decoration:none}.by:hover{color:var(--yellow)}.grid{width:var(--size);height:var(--size);grid-template-columns:repeat(var(--n), 1fr);gap:6px;display:grid;position:relative}.grid:after{content:"";background:var(--bg);transform-origin:top;pointer-events:none;z-index:2;border-radius:10px;position:absolute;inset:-4px;transform:scaleY(0)}.trail{pointer-events:none;z-index:1;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.trail line{stroke:var(--yellow);stroke-linecap:round;stroke-dasharray:1;transition:stroke .15s,opacity .15s;animation:.16s ease-out both draw}.trail .core{stroke-width:.05px}.trail .glow{stroke-width:.16px;opacity:.25}.trail .broken line{stroke:var(--red)}.trail.won .core{stroke:var(--white)}.trail.won .glow{opacity:.6}.trail.lost .seg:not(.broken){opacity:.3;transition:opacity .2s}.timer{width:var(--size);background:var(--tile);height:2px}.timer i{background:var(--yellow);transform-origin:0;height:100%;animation:linear forwards drain;display:block}.grid.recall:after{animation:lid var(--blinkMs) ease-in-out}.grid.ready .tile{animation:breathe var(--readyMs) ease-in-out}::view-transition-group(*){animation-duration:var(--morphMs);animation-timing-function:cubic-bezier(.2,.8,.2,1)}.logo{place-items:center;width:100%;padding:24px 0;display:grid;position:relative}.grid.bg{--size:min(100vw - 32px, 260px);opacity:.08;pointer-events:none;margin:auto;position:absolute;inset:0}.mode{text-align:left;width:100%;color:var(--white);box-shadow:inset 0 0 0 2px var(--white);background:0 0;border-radius:8px;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 20px;transition:transform .1s;display:flex}.mode:active{transform:scale(.98)}.mode.primary{color:var(--bg);background:var(--yellow);box-shadow:none}.mode b{letter-spacing:.08em;font-size:26px}.mode span{opacity:.75;font-size:15px;font-weight:600;line-height:1.3}.mode small{letter-spacing:.2em;opacity:.75;font-size:12px}.tile{background:var(--tile);color:var(--white);font-size:calc(var(--size) / var(--n) * .45);border-radius:8px;place-items:center;transition:background .1s;display:grid;position:relative}.tile.empty{pointer-events:none;background:0 0}.tile:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}.num{opacity:0;transition:opacity 0s calc(var(--blinkMs) / 2)}.tile.on .num{opacity:1;animation:pop .12s calc(var(--i) * var(--revealStaggerMs)) both}.tile.done{background:var(--yellow);color:var(--bg)}.tile.done .num{opacity:1;animation:.1s pop}.tile.done:after{content:"";box-shadow:0 0 0 2px var(--yellow);pointer-events:none;border-radius:8px;animation:.3s ease-out forwards ring;position:absolute;inset:0}.tile.wrong{background:var(--red);animation:flash var(--wrongShakeMs)}.tile.ghost .num{opacity:.35}.tile.target{box-shadow:inset 0 0 0 3px var(--yellow);animation:pulse var(--ghostRevealMs)}.tile.target .num{opacity:1}.grid.lost{animation:shake var(--wrongShakeMs), glitch var(--wrongShakeMs) steps(3)}.grid.won .tile.done{animation:pulse var(--roundGapMs)}.flash{background:var(--yellow);pointer-events:none;animation:.4s forwards fade;position:fixed;inset:0}@keyframes pop{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}@keyframes flash{0%,to{filter:brightness()}50%{filter:brightness(1.8)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}@keyframes pulse{50%{transform:scale(1.06)}}@keyframes breathe{50%{background:#2a2a2a}}@keyframes draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes drain{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes ring{to{opacity:0;transform:scale(1.3)}}@keyframes swell{to{transform:scale(1.08)}}@keyframes wave{50%{background:var(--white);transform:scale(1.06)}}@keyframes slam{0%{transform:scale(1.3)}}@keyframes heartbeat{0%,40%,to{transform:scale(1)}10%{transform:scale(1.015)}25%{transform:scale(1.008)}}@keyframes snap{0%{transform:scaleX(1.08)}to{transform:scaleX(1)}}@keyframes glitch{0%,to{filter:none}33%{filter:contrast(1.6)brightness(.7)}66%{filter:contrast(1.2)hue-rotate(-25deg)}}@keyframes lid{0%,to{transform:scaleY(0)}50%{transform:scaleY(1)}}@keyframes fade{0%{opacity:.9}to{opacity:0}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.timer i{display:none}}
