:root{--cream:#FBF7EC;--dark:#17382B;--mid:#1F4D3A;--green:#5E9B5A;--lg:#A9D3B0;--org:#E8742A;--gold:#F4C95D;--grey:#ECE9E1;--txt:#6b6f68;--f: "Outfit", ui-rounded, "Avenir Next", "Nunito", system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}html,body{margin:0;height:100%;background:#efe9d8;overscroll-behavior:none;font-family:var(--f);color:var(--dark);touch-action:manipulation}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}#app{position:fixed;inset:0;max-width:520px;margin:0 auto;background:var(--cream);overflow:hidden;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}#c{position:absolute;inset:0;width:100%;height:100%;display:none}.slot>#c{display:block;touch-action:pan-y}.playing .slot>#c{touch-action:none}#hud,#ui,#fx{position:absolute;inset:0;pointer-events:none}#boot{position:absolute;inset:0;display:grid;place-items:center;background:var(--cream);font-weight:800;font-size:20px;z-index:50}.lab{font-weight:700;letter-spacing:.32em;font-size:14px;color:var(--txt);text-align:center;padding-left:.32em}.big{font-weight:900;font-size:clamp(56px,18vw,96px);line-height:1;letter-spacing:-.03em;text-align:center;font-variant-numeric:tabular-nums}.big.sm{font-size:52px}.big.pop{animation:pop .35s cubic-bezier(.3,1.6,.5,1)}@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.12)}to{transform:scale(1)}}.spacer{flex:1}.sub{text-align:center;color:var(--txt);font-weight:500;margin:6px 0}.empty{text-align:center;color:var(--txt);padding:18px}.ib{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;color:var(--dark);transition:transform .1s}.ib:active{transform:scale(.88)}.ib svg{width:26px;height:26px}.vs{position:relative;display:flex;align-items:center;gap:12px;background:var(--grey);border-radius:99px;padding:7px 22px;font-size:18px;overflow:hidden;margin-top:4px}.vs span{font-weight:500}.vs b{font-weight:800}.vs em{font-style:normal;font-weight:800;color:#3a3d38;font-variant-numeric:tabular-nums}.vs i{width:2px;height:22px;background:#cfcbc0}.pbar{position:absolute;left:0;right:0;bottom:0;height:4px;background:#0000000f}.pbar u{display:block;height:100%;background:var(--green);transform-origin:0 50%;transform:scaleX(0);transition:transform .5s cubic-bezier(.2,.8,.3,1)}.vs.won{background:#e4f1dd}.vs.won .pbar u{background:var(--org)}.vs[hidden]{display:none}.pill{background:var(--mid);color:#fff;font-weight:700;font-size:15px;border-radius:99px;padding:6px 14px;font-variant-numeric:tabular-nums;min-width:64px;text-align:center}.pill.bump{animation:pop .25s}@keyframes hot{to{transform:scale(1.06)}}.btn{background:var(--mid);color:#fff;font-weight:800;font-size:20px;border-radius:99px;padding:16px 28px;box-shadow:0 5px 0 var(--dark);transition:transform .08s,box-shadow .08s;text-align:center}.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--dark)}.btn[disabled]{opacity:.45;pointer-events:none}.btn.sm{font-size:17px;padding:11px 22px;flex:1}.btn.ghost{background:var(--grey);color:var(--dark);box-shadow:0 5px #d6d2c6;flex:1;font-size:17px;padding:13px 14px}.cta{display:flex;align-items:center;gap:12px;width:100%;padding:18px 22px;font-size:20px;white-space:nowrap;letter-spacing:-.01em;margin-bottom:8px}.cta>span:nth-child(2){flex:1;text-align:center}.ci svg,.cc svg{width:28px;height:28px}.cc svg{width:20px}.ci{display:grid}.cta:not(:has(.ci))>span:first-child{flex:1}.cta:not(:has(.ci))>span:first-child+.cc{margin-left:-8px}.row{display:flex;gap:12px;margin:6px 0}.ttl{font-weight:900;font-size:30px;text-align:center;margin:14px 0}.ttl.sm{font-size:24px;line-height:1.3;font-weight:600}.ttl b{font-weight:900}.nick input{font:800 24px var(--f);text-align:center;padding:14px;border-radius:20px;border:3px solid var(--grey);background:#fff;color:var(--dark);outline:none;user-select:text;-webkit-user-select:text}.nick input:focus{border-color:var(--green)}.nick input.err{border-color:#c8432b;animation:shk .3s}@keyframes shk{25%{transform:translate(-8px)}75%{transform:translate(8px)}}.egrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0;flex:1;align-content:center}.eb{font-size:38px;aspect-ratio:1;max-height:78px;border-radius:22px;background:var(--grey);transition:transform .12s}.eb.on{background:var(--lg);transform:scale(1.08);box-shadow:0 0 0 3px var(--green)}.eb:active{transform:scale(.9)}.nick{gap:0}.rows{display:flex;flex-direction:column;gap:8px;margin:12px 0;overflow-y:auto;flex:0 1 auto;min-height:0}.r{display:flex;align-items:center;gap:10px;background:var(--grey);border-radius:18px;padding:12px 16px;font-weight:600;text-align:left;width:100%}.r span{flex:1;display:flex;flex-direction:column}.r small{color:var(--txt);font-weight:500;font-size:12px}.r em{font-style:normal;color:var(--txt);font-size:14px}.r b{font-weight:900;font-variant-numeric:tabular-nums}.r i{font-style:normal;width:28px;text-align:center;font-weight:800;color:var(--txt)}.r.me{background:#ddebd3}.r.x b,.r.x{color:#a0443a}.stat{text-align:center;color:var(--txt);font-weight:600;margin:8px 0 4px}.ok{color:var(--green);font-weight:800}.res-vs{align-self:center;margin-top:10px}.sheet-bg{position:absolute;inset:0;background:#17382b73;display:flex;align-items:flex-end;pointer-events:auto;animation:fade .2s;z-index:20}.sheet-bg.out{opacity:0;transition:opacity .2s}.sheet{width:100%;background:var(--cream);border-radius:28px 28px 0 0;padding:22px 22px calc(env(safe-area-inset-bottom) + 22px);animation:up .3s cubic-bezier(.2,1,.3,1);display:flex;flex-direction:column;gap:10px}.sheet h2{margin:0 0 6px;text-align:center;font-weight:900;font-size:26px}@keyframes up{0%{transform:translateY(100%)}}@keyframes fade{0%{opacity:0}}.row-b{display:flex;justify-content:space-between;align-items:center;background:var(--grey);border-radius:18px;padding:16px 20px;font-weight:700;font-size:18px}.row-b b{font-weight:900;color:var(--green)}.row-b svg{width:18px;height:18px;color:var(--txt)}.stamp{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);text-align:center;font-weight:900;pointer-events:none;animation:stamp 1.7s ease-out forwards;white-space:nowrap;z-index:5}.stamp.clear{top:36%;background:var(--dark);color:#fff;padding:12px 28px;border-radius:24px;box-shadow:0 5px #0c2118}.stamp.clear small{display:block;font-size:14px;letter-spacing:.25em;color:var(--lg)}.stamp.clear b{font-size:38px;color:var(--gold)}.stamp.perfect{top:58%;font-size:52px;color:var(--org);border:5px solid var(--org);padding:4px 22px;border-radius:14px;background:#fbf7ece6;animation:stamp2 1.5s ease-out forwards}.stamp.oneup{top:76%;display:flex;flex-direction:column;align-items:center;animation:stamp 2.4s ease-out forwards}.stamp.oneup img{width:80px}.stamp.oneup b{font-size:70px;color:var(--org);-webkit-text-stroke:3px var(--dark);paint-order:stroke fill;letter-spacing:-.02em}@keyframes stamp{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}12%{transform:translate(-50%,-50%) scale(1.15);opacity:1}22%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}to{transform:translate(-50%,-60%) scale(1);opacity:0}}@keyframes stamp2{0%{transform:translate(-50%,-50%) scale(2.4) rotate(-8deg);opacity:0}18%{transform:translate(-50%,-50%) scale(1) rotate(-6deg);opacity:1}80%{opacity:1}to{transform:translate(-50%,-50%) scale(1) rotate(-6deg);opacity:0}}.flycrown{position:fixed;width:44px;pointer-events:none;z-index:6}.crownwin{position:absolute;inset:0;background:#fbf7ecf5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;z-index:4;animation:fade .3s;transition:all .5s;pointer-events:none}.crownwin img{width:150px;animation:crownin 1s cubic-bezier(.2,1.5,.4,1)}.crownwin b{font-size:64px;color:var(--org);-webkit-text-stroke:3px var(--dark);paint-order:stroke fill}.crownwin span{font-weight:800;font-size:20px}.crownwin.small{opacity:0}@keyframes crownin{0%{transform:translateY(-300px) rotate(-40deg) scale(.4)}}#toasts{position:absolute;left:0;right:0;bottom:120px;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;z-index:30}.toast{background:var(--dark);color:#fff;font-weight:700;padding:10px 20px;border-radius:99px;animation:up2b .25s;transition:opacity .3s}.toast.out{opacity:0}@keyframes up2b{0%{transform:translateY(16px);opacity:0}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}#feed{position:absolute;inset:0;overflow-y:scroll;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}#feed::-webkit-scrollbar{display:none}#feed.locked{overflow:hidden}.card{position:relative;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:color-mix(in srgb,var(--c) 30%,var(--cream))}.poster,.slot{position:absolute;inset:0;width:100%;height:100%}.idle[hidden],.end[hidden]{display:none!important}.idle{position:absolute;inset:0;z-index:2;padding:calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 10px);cursor:pointer;display:flex;flex-direction:column}.brand{display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:24px;letter-spacing:-.02em;height:44px;flex:none}.brand b{color:var(--green);margin-right:.2em}.brand .gear{margin-right:-8px}.ginfo{text-align:center;flex:none}.tl{display:flex;align-items:center;justify-content:center;gap:4px}.tl .info{flex:none;width:38px;height:38px;color:var(--a);margin-right:-38px}.tl .info svg{width:26px;height:26px}.ginfo h2{margin:0;font-weight:900;font-size:clamp(32px,10vw,44px);letter-spacing:-.03em;line-height:1}.ginfo p{margin:8px auto 0;max-width:300px;font-weight:600;font-size:17px;line-height:1.3;color:var(--txt)}.meta{display:flex;justify-content:center;gap:8px;margin-top:8px}.chip{background:var(--grey);border-radius:99px;padding:4px 12px;font-weight:700;font-size:13px;color:var(--txt)}.chip b{color:var(--dark);font-weight:900}.how{list-style:none;counter-reset:s;margin:4px 0;padding:14px;width:100%;text-align:left;display:grid;gap:10px;background:#fff;border-radius:16px}.how li{counter-increment:s;display:flex;gap:8px;align-items:baseline;font-weight:600;font-size:17px;line-height:1.3;color:var(--dark)}.how li:before{content:counter(s);flex:none;width:24px;height:24px;border-radius:50%;background:var(--a);color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center;transform:translateY(-1px)}.view{flex:1;min-height:120px;margin:10px 0 8px;border-radius:24px;border:2px solid rgba(23,56,43,.08)}.cmsg{flex:none;margin-bottom:8px}.cmsg:empty{display:none}.bubble{display:flex;align-items:center;gap:12px;background:#fff;border:3px solid var(--a);border-radius:22px;padding:8px 14px;font-weight:600;font-size:15px;line-height:1.25}.bubble img{width:36px;flex:none;animation:bob 2s ease-in-out infinite}.bubble b{font-weight:900}@keyframes bob{50%{transform:translateY(-5px) rotate(-6deg)}}.play{flex:none;align-self:center;width:min(78%,320px);margin-top:10px;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--mid);color:#fff;font-weight:800;font-size:22px;border-radius:99px;padding:15px 24px;box-shadow:0 6px 0 var(--dark);animation:pulse 1.8s ease-in-out infinite}.play svg{width:24px;height:24px}.play:active{animation:none;transform:translateY(4px);box-shadow:0 2px 0 var(--dark)}@keyframes pulse{50%{transform:scale(1.04)}}.more{flex:none;margin-top:12px;text-align:center;font-weight:700;font-size:13px;color:var(--txt);letter-spacing:.04em}.rail{flex:none;display:flex;justify-content:center;gap:10px}.rl{display:flex;flex-direction:column;align-items:center;gap:2px;width:64px}.rl .ic{width:40px;height:40px;border-radius:50%;background:var(--mid);color:#fff;display:grid;place-items:center;box-shadow:0 3px 0 var(--dark);transition:transform .08s}.rl:active .ic{transform:scale(.88)}.rl svg{width:21px;height:21px}.rl em{font-style:normal;font-weight:800;font-size:11px;color:var(--dark);max-width:64px;overflow:hidden;text-overflow:ellipsis}@media(max-height:700px){.ginfo h2{font-size:30px}.more{margin-top:6px}.play{padding:12px 22px}}#hud{opacity:0;transition:opacity .25s;display:flex;flex-direction:column;z-index:4;padding:calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 24px)}#hud.on{opacity:1}#hud.on button{pointer-events:auto}#hud .drain{position:absolute;left:0;right:0;top:env(safe-area-inset-top);width:auto;height:6px;border-radius:0;margin:0;background:#17382b1a}#hud .drain u{display:block;height:100%;background:var(--green);transform-origin:0 50%}#hud.hot .drain u{background:#c8432b}#hud .top{display:flex;justify-content:space-between;align-items:center;height:44px}.sblk{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:2px}.sblk .big{font-size:clamp(54px,16vw,84px)}.hint{text-align:center;font-weight:700;color:var(--txt);margin-top:8px;opacity:0}.hint.gone{animation:hintf 3.2s ease-out forwards}@keyframes hintf{0%,70%{opacity:1}to{opacity:0}}.pill.hot{background:#c8432b;animation:hot .5s infinite alternate}@keyframes hot{to{transform:scale(1.08)}}.bot{margin-top:auto;display:flex;justify-content:center;gap:28px}.rb{position:relative;width:68px;height:68px;border-radius:50%;background:var(--mid);color:#fff;display:grid;place-items:center;box-shadow:0 5px 0 var(--dark);transition:transform .08s,box-shadow .08s}.rb svg{width:30px;height:30px}.rb:active{transform:translateY(4px);box-shadow:0 1px 0 var(--dark)}.rb i{position:absolute;right:-4px;top:-4px;min-width:24px;height:24px;padding:0 4px;border-radius:12px;background:var(--org);color:#fff;font:800 14px var(--f);font-style:normal;display:grid;place-items:center;border:2px solid var(--cream)}.rb i:empty{display:none}.rb.dim{opacity:.4}.end{position:absolute;inset:0;z-index:3;background:#fbf7ecf2;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 56px) 20px calc(env(safe-area-inset-bottom) + 20px);animation:fade .3s}.end .lab{margin-bottom:8px}.end .stat{margin:12px 0}.end .res-vs{align-self:center;margin-top:12px}.end .btn.ghost{flex:none;margin-bottom:4px}.swipe{text-align:center;font-weight:800;color:var(--txt);padding:10px;animation:nudge 1.6s ease-in-out infinite}@keyframes nudge{50%{transform:translateY(-6px)}}.sheet{max-height:88dvh;overflow-y:auto}.sheet .rows{overflow:visible;flex:none;margin:4px 0 10px}.sheet .lab{margin-top:6px}.sheet.nick input{font:800 24px var(--f);text-align:center;padding:14px;border-radius:20px;border:3px solid var(--grey);background:#fff;color:var(--dark);outline:none;user-select:text;-webkit-user-select:text}.sheet.nick .egrid{margin:12px 0}#ui{z-index:20}#toasts{z-index:30}#fx{z-index:6}.card{isolation:isolate}
