:root{--ink:#140d10;--bone:#fbf3e8;--mist:#d9c4b0;--ember:#ff7a3c;--gold:#ffc65a;--glass:rgba(22,13,18,.62);--line:rgba(255,240,225,.18);
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  color:var(--bone);background:var(--ink);font-family:Outfit,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hud,.dock,#banner,#savers,.progress,#phase-title{position:fixed;z-index:2}
.hud{top:calc(8px + var(--sat));left:calc(8px + var(--sal));right:calc(8px + var(--sar));display:flex;justify-content:space-between;align-items:flex-start;gap:8px;pointer-events:none}
.brand,.score,.dock,.lang{background:var(--glass);border:1px solid var(--line);border-radius:14px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.brand{padding:6px 11px 7px}
.brand h1{font-family:Syne,sans-serif;font-size:21px;letter-spacing:.1em;margin:2px 0 0;line-height:1}
.badge{display:inline-block;background:var(--ember);color:var(--ink);border-radius:99px;font-size:9px;font-weight:800;padding:2px 7px;letter-spacing:.06em}
.badge.live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#c4001a;margin-right:4px;vertical-align:1px;animation:blink 1.2s infinite}
.badge.play{background:var(--gold)}
@keyframes blink{50%{opacity:.2}}
.brand p{margin:3px 0 0;color:var(--mist);font-size:11px;max-width:52vw}
.right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.score{padding:6px 11px;text-align:right;min-width:74px}
.score strong{display:block;font-size:28px;line-height:1;font-variant-numeric:tabular-nums}
.score strong.low{color:#ff8d6b}
.score span{color:var(--mist);font-size:11px;font-variant-numeric:tabular-nums}
.lang{pointer-events:auto;color:var(--bone);height:30px;padding:0 8px;font:inherit;font-size:12px;font-weight:800;outline:none;appearance:none;-webkit-appearance:none;text-align:center;cursor:pointer}
.lang option{background:#1d1218;color:var(--bone)}
#banner{top:22%;left:6%;right:6%;margin:0;text-align:center;font-family:Syne,sans-serif;font-size:clamp(22px,min(7vw,8.5vh),56px);line-height:1.05;pointer-events:none;text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 24px rgba(0,0,0,.35)}
#banner.pop{animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
#savers{top:calc(98px + var(--sat));left:calc(10px + var(--sal));margin:0;max-width:60%;color:var(--mist);font-size:11px;pointer-events:none;text-shadow:0 1px 2px #000}
:root{--dock:46px}
.progress{left:calc(10px + var(--sal));right:calc(10px + var(--sar));bottom:calc(var(--dock) + 16px + var(--sab));height:5px;border-radius:9px;background:rgba(255,255,255,.14);overflow:visible;pointer-events:none}
.progress i{position:absolute;left:0;top:0;bottom:0;width:100%;transform-origin:left;transform:scaleX(0);border-radius:9px;background:linear-gradient(90deg,#c98a4f,var(--gold));transition:transform .2s}
.progress b{position:absolute;top:-4px;width:13px;height:13px;margin-left:-6px;border-radius:50%;background:#8d5b34;border:2px solid var(--bone);left:0}
.dock{left:calc(6px + var(--sal));right:calc(6px + var(--sar));bottom:calc(6px + var(--sab));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:4px}
.dock button{min-width:0;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.06);color:var(--bone);font:800 13px/1 Outfit,system-ui,sans-serif;height:38px;padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;touch-action:manipulation;transition:transform .08s,background .15s}
.dock button.main{background:var(--ember);border-color:transparent;color:var(--ink)}
.dock button[aria-pressed="true"]{background:var(--gold);color:var(--ink);border-color:transparent}
.dock button:active,.dock button.hit{transform:scale(.93)}
.dock button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
@media (hover:hover){.dock button:hover{background:rgba(255,255,255,.14)}.dock button.main:hover{background:#ff8f5a}}
@media (max-width:360px){.dock button{font-size:12px}}
@media (min-width:760px){:root{--dock:50px}.dock{left:50%;right:auto;transform:translateX(-50%);width:640px}.progress{left:50%;right:auto;width:620px;transform:translateX(-50%)}.dock button{height:42px;font-size:15px}.brand h1{font-size:26px}}
@media (max-height:440px) and (orientation:landscape){.dock button{height:32px}.progress{bottom:calc(var(--dock) + 14px + var(--sab))}:root{--dock:40px}#banner{top:16%}}

body{--ph:#ff6a2b;--ph-ink:#1a0603;--vig:rgba(120,12,0,.65)}
body[data-phase="gelo"]{--ph:#9fe3ff;--ph-ink:#06253a;--vig:rgba(10,60,110,.5)}
body[data-phase="rocha"]{--ph:#d3d8de;--ph-ink:#1d2228;--vig:rgba(20,24,30,.55)}
body[data-phase="doce"]{--ph:#ff8fc8;--ph-ink:#3a0626;--vig:rgba(150,20,90,.45)}
.chip{display:inline-block;margin-left:5px;background:var(--ph);color:var(--ph-ink);border-radius:99px;font-size:9px;font-weight:800;padding:2px 7px;letter-spacing:.08em;text-transform:uppercase;transition:background .4s}
#vig{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 55%,transparent 45%,var(--vig) 100%);transition:opacity .15s}
#phase-title{top:calc(118px + var(--sat));left:0;right:0;text-align:center;pointer-events:none;opacity:0;transform:translateY(-10px)}
#phase-title b{display:block;font-family:Syne,sans-serif;font-size:clamp(48px,15vw,112px);line-height:.95;letter-spacing:.06em;color:var(--ph);text-transform:uppercase;text-shadow:0 4px 0 var(--ph-ink),0 0 30px rgba(0,0,0,.35)}
#phase-title span{display:inline-block;margin-top:4px;font-weight:800;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);text-shadow:0 1px 3px #000}
#phase-title.show{animation:phaseIn 2.3s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes phaseIn{0%{opacity:0;transform:scale(.5)}14%{opacity:1;transform:scale(1.06)}22%{transform:scale(1)}78%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-14px) scale(.9)}}
#banner{top:30%}
@media (max-height:440px) and (orientation:landscape){#phase-title{top:calc(14px + var(--sat))}#phase-title b{font-size:52px}#banner{top:25%;font-size:clamp(20px,8vh,40px)}}
#bag{display:block;margin-top:3px;font-size:11px;font-weight:800;color:var(--bone);white-space:nowrap}
#toast{position:fixed;z-index:3;left:50%;bottom:calc(72px + var(--sab));transform:translateX(-50%);margin:0;padding:6px 14px;border-radius:99px;background:rgba(22,13,18,.78);border:1px solid var(--line);font-weight:800;font-size:14px;white-space:nowrap;pointer-events:none;opacity:0}
#toast.show{animation:toastIn 2s ease forwards}
@keyframes toastIn{0%{opacity:0;transform:translate(-50%,10px) scale(.9)}12%{opacity:1;transform:translate(-50%,0) scale(1.04)}20%{transform:translate(-50%,0) scale(1)}85%{opacity:1}100%{opacity:0}}

#wardrobe{position:fixed;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(10,6,10,.45);padding:12px calc(12px + var(--sar)) calc(64px + var(--sab)) calc(12px + var(--sal))}
#wardrobe[hidden]{display:none}
.wr-card{width:min(420px,100%);max-height:100%;overflow:auto;background:rgba(28,18,26,.94);border:1px solid var(--line);border-radius:20px;padding:12px 14px 14px;box-shadow:0 10px 40px rgba(0,0,0,.4);animation:pop .3s cubic-bezier(.2,1.4,.4,1)}
.wr-head{display:flex;justify-content:space-between;align-items:center;font-family:Syne,sans-serif;font-size:18px}
.wr-x{cursor:pointer;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.08);font-size:16px}
.wr-stats{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px}
.wr-stats span{background:rgba(255,255,255,.08);border-radius:99px;padding:3px 9px;font-size:12px;font-weight:800}
.wr-next{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:var(--mist);margin-bottom:10px}
.wr-next i{flex:1;height:8px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden;display:block}
.wr-next s{display:block;height:100%;background:linear-gradient(90deg,var(--ph),var(--gold));text-decoration:none}
.wr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.wr-item{aspect-ratio:1;border-radius:16px;background:rgba(255,255,255,.07);border:2px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s}
.wr-item em{font-style:normal;font-size:32px;line-height:1}
.wr-item small{margin-top:4px;font-size:11px;font-weight:800;color:var(--mist)}
.wr-item.on{border-color:var(--gold);background:rgba(255,198,90,.16)}
.wr-item.on small{color:var(--gold)}
.wr-item.lock em{filter:grayscale(1) brightness(.6)}
.wr-item:active{transform:scale(.92)}
.wr-item.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ---- v3: attract screen, result card, responsive buttons ---- */
.dock,.dock button{touch-action:none;-webkit-touch-callout:none}
.dock button{position:relative;transition:transform .07s,background .15s,opacity .2s,filter .2s}
.dock button.down{transform:scale(.92);filter:brightness(1.25)}
.dock button.fire::before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.55);animation:fireFlash .22s ease-out forwards;pointer-events:none}
@keyframes fireFlash{from{opacity:1}to{opacity:0}}
.dock button::after{content:"";position:absolute;left:5px;right:5px;bottom:3px;height:3px;border-radius:3px;background:currentColor;opacity:0;transform-origin:left;transform:scaleX(var(--fill,1));transition:opacity .15s}
.dock button.cool::after,body[data-game="run"] #b-sit::after{opacity:.6}
.dock button.cool{color:var(--mist)}
body:not([data-game="run"]) .dock button[aria-disabled="true"]{opacity:.38;filter:saturate(.2)}
body:not([data-game="run"]) #b-mode{background:var(--gold);color:var(--ink);border-color:transparent;animation:ctaPulse 1.15s ease-in-out infinite}
body[data-game="run"] #b-mode{background:rgba(255,255,255,.06);color:var(--mist);border-color:var(--line)}
@keyframes ctaPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,198,90,.75)}50%{box-shadow:0 0 0 7px rgba(255,198,90,0)}}
#b-mode.nudge{animation:nudge .35s ease 2!important}
@keyframes nudge{25%{transform:translateY(-5px) scale(1.06)}75%{transform:translateY(1px)}}
body:not([data-game="run"]) #phase-title{display:none}
#attract{position:fixed;z-index:2;left:0;right:0;top:calc(max(13%, 176px) + var(--sat));text-align:center;pointer-events:none;animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
#attract[hidden],#result[hidden]{display:none}
.at-logo{display:inline-block;max-width:92vw;white-space:nowrap;font-family:Syne,sans-serif;font-size:clamp(38px,14vw,140px);letter-spacing:.05em;padding-left:.05em;line-height:.9;color:var(--bone);text-shadow:0 5px 0 var(--ph-ink),0 0 40px rgba(0,0,0,.45)}
.at-ph{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:12px 10px 6px}
.at-ph i{font-style:normal;font-weight:800;font-size:13px;padding:4px 10px;border-radius:99px;background:rgba(22,13,18,.55);border:1px solid var(--line)}
.at-ph i.on{background:var(--ph);color:var(--ph-ink);border-color:transparent}
.at-sub{display:block;font-weight:800;font-size:14px;color:var(--bone);text-shadow:0 1px 4px #000}
#cta{position:fixed;z-index:3;transform:translateX(-50%);padding:7px 13px;border-radius:99px;background:var(--gold);color:var(--ink);font-weight:800;font-size:14px;white-space:nowrap;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.35);opacity:0;transition:opacity .2s}
#cta.on{opacity:1;animation:bob 1s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,-6px)}}
#result{position:fixed;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;pointer-events:none;padding:calc(70px + var(--sat)) calc(12px + var(--sar)) calc(108px + var(--sab)) calc(12px + var(--sal))}
.rs-card{width:min(400px,100%);max-height:100%;overflow:hidden;background:rgba(28,18,26,.9);border:1px solid var(--line);border-radius:22px;padding:14px 16px 12px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.45);animation:pop .4s cubic-bezier(.2,1.4,.4,1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rs-title{display:block;font-family:Syne,sans-serif;font-size:clamp(24px,7vw,34px);line-height:1.05;color:var(--ph)}
.rs-ph{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px;margin:12px 0 10px}
.rs-ph i{font-style:normal;display:flex;flex-direction:column;align-items:center;padding:7px 2px;border-radius:14px;background:rgba(255,255,255,.06);border:2px solid transparent}
.rs-ph i em{font-style:normal;font-size:26px;line-height:1}
.rs-ph i small{font-size:11px;font-weight:800;color:var(--mist);margin-top:3px}
.rs-ph i u{text-decoration:none;font-weight:800;font-size:14px}
.rs-ph i.ok{border-color:#7ee0a0}.rs-ph i.ok u{color:#7ee0a0}
.rs-ph i.ko{border-color:#ff6b6b}.rs-ph i.ko u{color:#ff6b6b}
.rs-ph i.no{opacity:.45}
.rs-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
.rs-stats span{background:rgba(255,255,255,.08);border-radius:99px;padding:4px 10px;font-size:12px;font-weight:800;color:var(--mist)}
.rs-stats b{color:var(--bone)}
.rs-looks{margin-top:8px;font-size:13px;font-weight:800;color:var(--mist)}
.rs-looks b{font-size:20px;color:var(--bone)}
.rs-cta{margin:10px 0 0;font-size:12px;font-weight:800;color:var(--gold);letter-spacing:.04em}
@media (max-height:440px) and (orientation:landscape){
  #attract{top:calc(16% + var(--sat))}.at-logo{font-size:64px}.at-ph{margin:6px 10px 4px}
  #result{padding:calc(8px + var(--sat)) calc(160px + var(--sar)) calc(78px + var(--sab)) calc(160px + var(--sal))}
  .rs-card{padding:8px 12px 8px}.rs-title{font-size:22px}.rs-ph{margin:6px 0}.rs-ph i{padding:3px 2px}.rs-ph i em{font-size:18px}.rs-cta{margin-top:4px}.rs-looks{margin-top:4px}
}
/* big 4K screens at DPR 1: keep the UI readable */
@media (min-width:2400px) and (min-height:1300px){.hud,.dock,.progress,#attract,#result,#toast,#banner,#phase-title,#savers,#wardrobe .wr-card{zoom:1.75}#cta{font-size:24px;padding:12px 22px}}

/* v3.2 dock: icon + label, 48px targets, one low line */
:root{--dock:56px}
.dock button{height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;line-height:1;padding:0 2px;overflow:visible}
.dock .ic{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.dock #b-mode .ic{fill:currentColor;stroke-width:1.6}
.dock .lbl{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em;pointer-events:none}
.dock button.down{box-shadow:inset 0 0 0 2px currentColor}
body[data-game="run"] #b-mode .ic{animation:runDot 1.2s ease-in-out infinite}
@keyframes runDot{50%{opacity:.45;transform:scale(.8)}}
.dock button[aria-disabled="true"]{cursor:default}
@media (min-width:760px){:root{--dock:58px}.dock button{height:50px;flex-direction:row;gap:7px;font-size:15px}.dock .ic{width:20px;height:20px}}
@media (max-height:440px) and (orientation:landscape){:root{--dock:52px}.dock button{height:44px;flex-direction:row;gap:5px;font-size:13px}.dock .ic{width:17px;height:17px}}
@media (max-width:360px){.dock button{font-size:11.5px}.dock{gap:3px;padding:4px 3px}}
#b-mode[data-state="over"] .ic{fill:none;stroke-width:2.4}
/* v4: rivals, live panel, replay, flash, daily challenge */
#rival{position:fixed;z-index:3;left:50%;top:calc(var(--sat,0px) + 92px);transform:translateX(-50%);min-width:190px;max-width:86vw;padding:7px 12px 9px;border-radius:14px;background:rgba(20,10,30,.72);border:1px solid rgba(255,255,255,.18);color:#fff;font:800 13px/1.1 Outfit,system-ui,sans-serif;text-align:center;pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:rvIn .5s cubic-bezier(.2,1.6,.4,1)}
#rival b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rival em{display:inline-block;margin-top:3px;padding:1px 8px;border-radius:8px;background:linear-gradient(90deg,#7a3aff,#ff5dc8);font:800 10px/1.4 Outfit,sans-serif;font-style:normal;letter-spacing:.12em}
#rival i{display:block;height:6px;margin-top:6px;border-radius:6px;background:rgba(255,255,255,.15);overflow:hidden}
#rival s{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#ff5d5d,#ffb02e);transform-origin:left;transition:transform .25s}
#rival[data-kind="capy"] s{background:linear-gradient(90deg,#9b8cff,#c9b8ff)}
#rival[data-kind="galaxy"]{background:rgba(30,8,60,.8);border-color:rgba(200,150,255,.5);box-shadow:0 0 24px rgba(160,90,255,.45)}
#rival[data-kind="galaxy"] s{background:linear-gradient(90deg,#7a3aff,#ff5dc8,#ffd84d)}
@keyframes rvIn{from{transform:translateX(-50%) scale(.4);opacity:0}}
#flash{position:fixed;inset:0;z-index:4;pointer-events:none;background:radial-gradient(circle at 60% 30%,#fff,#c9a0ff 40%,rgba(80,20,160,0) 75%);opacity:0}
#flash.go{animation:flashGo .9s ease-out}
@keyframes flashGo{10%{opacity:.85}100%{opacity:0}}
#replay{position:fixed;z-index:3;top:calc(var(--sat,0px) + 140px);left:50%;transform:translateX(-50%);font:800 15px/1 Syne,Outfit,sans-serif;letter-spacing:.2em;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6);pointer-events:none}
body.replaying #vig{opacity:.55!important}
body.replaying #replay{animation:repBlink 1s steps(2) infinite}
@keyframes repBlink{50%{opacity:.4}}
.at-dc,.rs-dc,.wr-dc{display:block;margin-top:8px;font:700 12px/1.3 Outfit,system-ui,sans-serif;color:#ffe8a8}
.rs-badges{margin-top:4px;font:700 13px/1.3 Outfit,sans-serif;letter-spacing:.08em}
#livepanel{position:fixed;z-index:3;left:calc(8px + var(--sal,0px));top:calc(var(--sat,0px) + 150px);width:min(220px,46vw);padding:8px 10px;border-radius:14px;background:rgba(16,10,24,.62);border:1px solid rgba(255,255,255,.14);color:#fff;font:700 12px/1.25 Outfit,system-ui,sans-serif;pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#livepanel .lv-goal b{display:block;font-size:11.5px}
#livepanel .lv-goal i{display:block;height:7px;margin-top:4px;border-radius:7px;background:rgba(255,255,255,.15);overflow:hidden}
#livepanel .lv-goal s{display:block;height:100%;background:linear-gradient(90deg,#ff5d8f,#9b8cff);transform-origin:left;transition:transform .3s}
#livepanel .lv-row{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:6px}
#livepanel .lv-combo{color:#ffd84d;animation:repBlink .8s steps(2) infinite}
#livepanel .lv-link{color:#ff7a7a}#livepanel .lv-link.on{color:#7ee08a}
#livepanel .lv-top{list-style:none;margin:6px 0 0;padding:0}
#livepanel .lv-top li{display:flex;gap:6px;align-items:center;padding:2px 0}
#livepanel .lv-top li.h{opacity:.7;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
#livepanel .lv-top em{width:18px;font-style:normal;text-align:center}
#livepanel .lv-top span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#livepanel .lv-top b{color:#ffd84d}
body.live #savers{display:none}
@media (max-height:440px) and (orientation:landscape){#rival{top:calc(var(--sat,0px) + 64px)}#livepanel{top:calc(var(--sat,0px) + 70px);width:190px}}
/* v4.1 top HUD icons + map / shop / payment placeholder */
.hicons{display:flex;gap:6px;pointer-events:auto}
.hic{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(20,12,18,.55);border:1px solid var(--line);color:var(--bone);cursor:pointer;padding:0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .1s}
.hic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hic:active{transform:scale(.9)}
body.live .hicons{display:none}
.ovl{position:fixed;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;background:rgba(10,6,10,.5);padding:calc(10px + var(--sat)) calc(12px + var(--sar)) calc(64px + var(--sab)) calc(12px + var(--sal))}
.ovl[hidden]{display:none}
.ov-card{width:min(440px,100%);max-height:100%;display:flex;flex-direction:column;background:rgba(28,18,26,.95);border:1px solid var(--line);border-radius:20px;padding:12px 14px 14px;box-shadow:0 10px 40px rgba(0,0,0,.45);animation:pop .3s cubic-bezier(.2,1.4,.4,1);color:var(--bone)}
.ov-head{display:flex;justify-content:space-between;align-items:center;font-family:Syne,sans-serif;font-size:18px;margin-bottom:6px}
.ov-x{cursor:pointer;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.08);font-size:16px;color:var(--bone);border:0}
.mp-free{margin:0 0 8px;font-size:12px;color:var(--mist)}
.mp-scroll,.sh-scroll{overflow:auto;min-height:0;flex:1;padding-right:2px}
.mp-w{margin:4px 0 14px;padding:10px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.mp-w[data-w=classic]{background:linear-gradient(180deg,rgba(255,140,60,.18),rgba(255,90,140,.06))}
.mp-w[data-w=cosmo]{background:linear-gradient(180deg,rgba(120,70,255,.28),rgba(30,10,70,.2))}
.mp-w[data-w=mar]{background:linear-gradient(180deg,rgba(40,170,220,.28),rgba(10,70,110,.2))}
.mp-w.soon{opacity:.55}
.mp-wh{display:flex;align-items:center;gap:8px;font-weight:800}
.mp-wh em{font-style:normal;font-size:24px}
.mp-wh i{margin-left:auto;font-style:normal;font-size:11px;color:var(--gold)}
.mp-path{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0 2px}
.mp-n{position:relative;transform:translateX(var(--x));width:58px;height:58px;border-radius:50%;border:3px solid rgba(255,255,255,.85);background:radial-gradient(circle at 35% 30%,#ffd56a,#ff8a3c 60%,#d8502a);color:#3a1408;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.35),0 0 0 4px rgba(255,255,255,.08);font:inherit;padding:0}
.mp-n b{font-size:20px;line-height:1;font-family:Syne,sans-serif}
.mp-n small{position:absolute;left:-8px;top:-6px;font-size:16px}
.mp-n .st{position:absolute;bottom:-11px;font-size:12px;letter-spacing:-1px;color:#ffd84d;text-shadow:0 1px 2px #000}
.mp-w[data-w=cosmo] .mp-n{background:radial-gradient(circle at 35% 30%,#e0b8ff,#9a5aff 60%,#4a1ab0);color:#fff}
.mp-w[data-w=mar] .mp-n{background:radial-gradient(circle at 35% 30%,#bff4ff,#3ab8e8 60%,#106a9a);color:#fff}
.mp-n.lock{background:radial-gradient(circle at 35% 30%,#8a8090,#4a4250);color:#fff;border-color:rgba(255,255,255,.35)}
.mp-n.cur{box-shadow:0 4px 0 rgba(0,0,0,.35),0 0 0 4px var(--gold)}
.mp-n:active{transform:translateX(var(--x)) scale(.92)}
.mp-n.shake{animation:shake .3s}
.sh-pass{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:12px;border-radius:16px;border:2px solid var(--gold);background:linear-gradient(120deg,rgba(255,200,90,.22),rgba(255,90,160,.14));color:var(--bone);font:inherit;cursor:pointer}
.sh-pass em{font-style:normal;font-size:30px}
.sh-pass span{flex:1;display:flex;flex-direction:column;gap:2px}
.sh-pass small{font-size:11px;color:var(--mist);line-height:1.3}
.sh-pass u,.sh-i u{text-decoration:none;font-weight:800;color:var(--gold);white-space:nowrap;text-align:center}
.sh-pass u i{display:block;font-style:normal;font-size:10px;color:var(--mist);font-weight:500}
.sh-card h3{margin:12px 0 6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}
.sh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sh-i{border-radius:16px;background:rgba(255,255,255,.07);border:2px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 4px;cursor:pointer;color:var(--bone);font:inherit;min-height:92px}
.sh-i em{font-style:normal;font-size:30px;line-height:1.1}
.sh-i small{font-size:11px;font-weight:800;text-align:center;line-height:1.15}
.sh-i u{font-size:11px}
.sh-i.own u{color:var(--mist)}
.sh-i.on{border-color:var(--gold);background:rgba(255,198,90,.16)}
.sh-i.on u{color:var(--gold)}
.sh-i.soon{cursor:default;opacity:.6}
.sh-i.soon em{filter:brightness(0) opacity(.55)}
.sh-i.soon u{color:var(--mist);font-weight:500}
.sh-i:active{transform:scale(.94)}
.pay-card{width:min(340px,100%);text-align:center}
.pay-price{font-size:26px;font-weight:800;margin:6px 0}
.pay-price i{font-size:12px;font-style:normal;color:var(--mist);font-weight:500}
.pay-soon{margin:8px auto;padding:10px 12px;border-radius:14px;border:2px dashed var(--gold);color:var(--gold);font-weight:800;font-size:16px}
.pay-note{font-size:12px;color:var(--mist);margin:6px 0 0}
@media (orientation:landscape) and (max-height:500px){.ovl{padding-bottom:calc(56px + var(--sab))}.mp-n{width:50px;height:50px}.hic{width:30px;height:30px}}
@media (min-width:2400px) and (min-height:1300px){.ov-card{zoom:1.75}}
@media (orientation:portrait){#rival{top:calc(var(--sat,0px) + 166px)}body.live #rival{top:calc(var(--sat,0px) + 92px)}}
/* ================= v5: 3-button bar, tap-to-start, floating Foto, inverted live HUD ================= */
.dock{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr) minmax(0,1fr);gap:6px}
.dock #b-jump{font-size:15px;box-shadow:0 0 0 2px rgba(255,198,90,.35),0 6px 16px rgba(255,122,60,.35)}
.dock #b-jump .ic{width:22px;height:22px}
@media (min-width:760px){.dock{width:520px}.dock #b-jump{font-size:17px}}
@media (max-width:360px){.dock{gap:4px}.dock #b-jump{font-size:14px}}
#cta{display:none!important}
#b-mode.tapstart{position:fixed;inset:0;z-index:1;display:flex;align-items:flex-end;justify-content:center;padding:0 0 calc(var(--dock) + 64px + var(--sab));margin:0;border:0;background:transparent;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#b-mode .ts-pill{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:99px;background:var(--gold);font:900 19px/1 Outfit,system-ui,sans-serif;box-shadow:0 10px 28px rgba(0,0,0,.4),0 0 0 6px rgba(255,198,90,.22);animation:ctaPulse 1.15s ease-in-out infinite;pointer-events:none;white-space:nowrap}
#b-mode .ts-pill .ic{width:20px;height:20px;fill:currentColor}
#b-mode.nudge .ts-pill{animation:nudge .35s ease 2}
#b-mode:focus-visible .ts-pill{outline:3px solid #fff;outline-offset:3px}
body:not([data-game="idle"]) #b-mode,body.live #b-mode{display:none}
@media (max-height:440px) and (orientation:landscape){#b-mode.tapstart{padding-bottom:calc(var(--dock) + 30px + var(--sab))}#b-mode .ts-pill{font-size:16px;padding:9px 18px}}
.rs-again{pointer-events:auto;margin:10px auto 0;display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border-radius:99px;border:0;background:var(--gold);color:var(--ink);font:900 16px/1 Outfit,system-ui,sans-serif;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35);animation:ctaPulse 1.15s ease-in-out infinite}
@media (max-height:440px) and (orientation:landscape){.rs-again{margin-top:5px;padding:7px 18px;font-size:14px}}
body.live .rs-again{display:none}
/* floating Foto */
#photo-fab{position:fixed;z-index:3;right:calc(10px + var(--sar));bottom:calc(var(--dock) + 30px + var(--sab));width:42px;height:42px}
#b-photo{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(22,13,18,.66);color:var(--bone);display:grid;place-items:center;cursor:pointer;padding:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 12px rgba(0,0,0,.3)}
#b-photo svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;pointer-events:none}
#b-photo .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#b-photo.down{transform:scale(.92)}
#b-photo-q{position:absolute;top:-5px;right:-5px;width:19px;height:19px;border-radius:50%;border:0;padding:0;background:var(--gold);color:var(--ink);font:900 12px/19px Outfit,system-ui,sans-serif;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.35)}
#photo-tip{position:absolute;right:0;bottom:50px;margin:0;width:max-content;max-width:min(240px,70vw);padding:8px 11px;border-radius:12px;background:rgba(22,13,18,.92);border:1px solid var(--line);color:var(--bone);font:700 12.5px/1.3 Outfit,system-ui,sans-serif;box-shadow:0 8px 20px rgba(0,0,0,.4);animation:pop .25s ease}
#photo-tip::after{content:"";position:absolute;right:15px;bottom:-6px;border:6px solid transparent;border-bottom:0;border-top-color:rgba(22,13,18,.92)}
#photo-menu{position:absolute;right:0;bottom:50px;display:flex;flex-direction:column;gap:6px;padding:7px;border-radius:14px;background:rgba(22,13,18,.92);border:1px solid var(--line);box-shadow:0 8px 20px rgba(0,0,0,.4);animation:pop .25s ease}
#photo-menu button{display:flex;align-items:center;gap:7px;white-space:nowrap;padding:9px 14px;border-radius:10px;border:0;background:rgba(255,255,255,.08);color:var(--bone);font:800 14px/1 Outfit,system-ui,sans-serif;cursor:pointer}
#photo-menu button:hover{background:rgba(255,255,255,.16)}
#photo-tip[hidden],#photo-menu[hidden]{display:none}
@media (max-height:440px) and (orientation:landscape){#photo-fab{bottom:calc(var(--dock) + 26px + var(--sab))}}
/* shop thumbnails */
.sh-i em img.th{display:block;width:62px;height:62px;border-radius:14px;object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.35)}
/* live v5: compact corner panel (never over the capybara) */
#livepanel{left:auto;right:calc(8px + var(--sar,0px));top:calc(var(--sat,0px) + 124px);width:min(152px,40vw);padding:6px 8px;font-size:11px;border-radius:12px;background:rgba(16,10,24,.58)}
#livepanel .lv-t{font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.8;text-align:center}
#livepanel .lv-vs{display:flex;justify-content:center;align-items:center;gap:6px;font-size:13px;margin:2px 0 3px}
#livepanel .lv-vs b{font-size:18px;color:#ffd84d}#livepanel .lv-vs i{font-style:normal;opacity:.6}
#livepanel .lv-tg{pointer-events:auto;display:block;width:100%;border:0;border-radius:8px;background:rgba(255,255,255,.09);color:#fff;font:800 10.5px/1 Outfit,system-ui,sans-serif;padding:4px 6px;cursor:pointer;text-align:left}
#livepanel .lv-top{margin:3px 0 0}#livepanel .lv-top li{padding:1px 0}
#livepanel .lv-goal{margin-top:4px}#livepanel .lv-goal i{height:4px;margin-top:0}#livepanel .lv-goal small{display:block;font-size:9.5px;opacity:.75;margin-top:2px}
#livepanel .lv-st{display:flex;gap:6px;justify-content:space-between;margin-top:3px;font-size:10px}
#lvlegend{position:fixed;z-index:2;left:calc(10px + var(--sal));right:calc(60px + var(--sar));bottom:calc(var(--dock) + 26px + var(--sab));color:#fff;font:700 10.5px/1.25 Outfit,system-ui,sans-serif;text-shadow:0 1px 3px #000;pointer-events:none;opacity:.92}
#lvlegend[hidden]{display:none}
body.live #rival{top:calc(var(--sat,0px) + 124px);left:calc(8px + var(--sal,0px));transform:none;min-width:0;max-width:44vw}
body.live #toast{bottom:calc(var(--dock) + 62px + var(--sab))}
#moment{position:fixed;z-index:5;left:50%;top:26%;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;text-align:center;padding:14px 22px;border-radius:22px;background:rgba(22,13,18,.82);border:2px solid var(--gold);box-shadow:0 12px 40px rgba(0,0,0,.45);max-width:88vw}
#moment b{display:block;font:900 24px/1.1 Outfit,system-ui,sans-serif;color:#fff}
#moment small{display:block;margin-top:5px;font:800 15px/1.1 Outfit,system-ui,sans-serif;color:var(--gold)}
#moment small:empty{display:none}
#moment.show{animation:momentIn .45s cubic-bezier(.2,1.5,.4,1) forwards}
#moment[data-kind="hum"]{border-color:#ff5d8f;background:linear-gradient(160deg,rgba(80,20,60,.9),rgba(30,12,40,.9))}#moment[data-kind="hum"] b{font-size:30px}
#moment[data-kind="thanks"]{border-color:#ffd84d}
#moment[data-kind="capi"]{border-color:#7ee0c8}#moment[data-kind="capi"] b{font-size:22px}
@keyframes momentIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (max-height:440px) and (orientation:landscape){#livepanel{top:calc(var(--sat,0px) + 64px);width:150px}body.live #rival{top:calc(var(--sat,0px) + 64px)}#moment{top:30%}#moment b{font-size:20px}#moment[data-kind="hum"] b{font-size:24px}}
.rs-tries{margin-top:6px;font-size:13px;font-weight:800;color:var(--bone)}.rs-tries b{color:var(--gold)}
#b-recenter{position:fixed;z-index:3;right:calc(10px + var(--sar));bottom:calc(var(--dock) + 82px + var(--sab));width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgba(22,13,18,.66);color:var(--bone);display:grid;place-items:center;padding:0;cursor:pointer;opacity:0;transform:scale(.6);pointer-events:none;transition:opacity .2s,transform .2s}
#b-recenter.on{opacity:1;transform:scale(1);pointer-events:auto}
#b-recenter svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
canvas{touch-action:none}
@media (max-height:440px) and (orientation:landscape){#b-recenter{bottom:calc(var(--dock) + 74px + var(--sab))}}
#droptoast{position:fixed;z-index:4;left:50%;bottom:calc(var(--dock) + 70px + var(--sab));transform:translateX(-50%);padding:7px 14px;border-radius:99px;background:rgba(60,14,34,.88);border:1px solid #ff5d8f;color:#fff;font:800 14px/1.1 Outfit,system-ui,sans-serif;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;pointer-events:none;opacity:0;transition:opacity .2s}
#droptoast.on{opacity:1}#droptoast.bump{animation:dropBump .3s ease}
@keyframes dropBump{0%{transform:translateX(-50%) scale(1.12)}100%{transform:translateX(-50%) scale(1)}}
@media (max-height:440px) and (orientation:landscape){#droptoast{bottom:calc(var(--dock) + 52px + var(--sab))}}
body #b-mode.tapstart,body:not([data-game="run"]) #b-mode.tapstart{background:transparent;border:0;animation:none;color:var(--ink);box-shadow:none}
/* v6: the big live moment never overlaps the corner panel (portrait: below it; the panel also fades out meanwhile) */
@media (orientation:portrait){body.live #moment{top:calc(var(--sat,0px) + 330px);transform:translate(-50%,0) scale(.6)}body.live #moment.show{animation:momentInP .45s cubic-bezier(.2,1.5,.4,1) forwards}}
@keyframes momentInP{to{opacity:1;transform:translate(-50%,0) scale(1)}}
#livepanel{transition:opacity .3s}body.live.moment #livepanel{opacity:0}

/* v7: instant poster (<1 s) while three.js + the game module load, then a cinematic fly-in with a title punch */
#poster{position:fixed;inset:0;z-index:1;background:#2a2230 url(/poster.webp) center/cover no-repeat;transition:opacity .7s ease;pointer-events:none}
#poster .pl{position:absolute;left:50%;bottom:calc(18% + var(--sab, 0px));width:120px;height:4px;margin-left:-60px;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden}
#poster .pl::after{content:"";position:absolute;inset:0;width:40%;border-radius:4px;background:#ffd27a;animation:pl 1.1s ease-in-out infinite}
@keyframes pl{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
body.ready #poster{opacity:0}
#attract.fly{opacity:0;animation:none}
#attract.punch .at-logo{animation:punch .7s cubic-bezier(.2,1.6,.35,1) both}
#attract.punch .at-sub{animation:pop .5s .25s cubic-bezier(.2,1.4,.4,1) both}
@keyframes punch{0%{transform:scale(2.4);opacity:0;filter:blur(6px)}55%{opacity:1;filter:none}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){#attract.punch .at-logo,#attract.punch .at-sub{animation:none}}
/* v7 account overlay (the only place with text fields) */
#b-acct{position:relative}#b-acct .dot{position:absolute;right:4px;top:4px;width:7px;height:7px;border-radius:50%;background:#9a9a9a;border:1px solid rgba(0,0,0,.4)}#b-acct.in .dot{background:#5fe08a}
#acct .ac-card{max-width:400px}.ac-f{display:block;margin:8px 0}.ac-f span{display:block;font-size:13px;opacity:.85;margin-bottom:4px}
.ac-f input{width:100%;box-sizing:border-box;font:600 16px Outfit,sans-serif;color:var(--bone);background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:12px;padding:11px 12px;outline:none}
.ac-f input:focus{border-color:#ffd27a;box-shadow:0 0 0 3px rgba(255,210,122,.25)}.ac-f small{display:block;font-size:11.5px;opacity:.65;margin-top:3px}.ac-f.bad input{border-color:#ff6a6a}
.ac-go{width:100%;margin-top:10px;font:800 16px Outfit,sans-serif;padding:12px;border-radius:14px;border:0;background:linear-gradient(#ffb347,#ff7a2a);color:#2a1408;cursor:pointer}.ac-go:disabled{opacity:.6}.ac-go.alt{background:rgba(255,255,255,.1);color:var(--bone)}
.ac-links{display:flex;justify-content:space-between;gap:8px;margin-top:10px}.ac-links button{background:none;border:0;color:#ffd27a;font:600 14px Outfit,sans-serif;cursor:pointer;padding:6px 2px}
.ac-msg{min-height:1em;margin:8px 0 0;font-size:13.5px;color:#ffb0a0}.ac-msg.ok{color:#9ff0b8}.ac-ok{font-size:15px;line-height:1.4}.ac-hi{font:800 18px Outfit,sans-serif}.ac-hi small{opacity:.7;font-weight:600}.ac-why{font-size:14px;opacity:.9}
#acct-pill{position:fixed;z-index:6;left:50%;transform:translateX(-50%);top:calc(118px + var(--sat));font:700 14px Outfit,sans-serif;color:#2a1408;background:#ffd27a;border:0;border-radius:999px;padding:8px 14px;box-shadow:0 6px 20px rgba(0,0,0,.35);cursor:pointer;animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
#acct-pill[hidden]{display:none}body[data-live="1"] #b-acct,body[data-live="1"] #acct-pill{display:none!important}
#acct[hidden]{display:none}

.hic[hidden],#b-acct[hidden]{display:none}

.sh-i .stb{display:flex;flex-direction:column;gap:2px;width:100%;margin:3px 0 2px}
.sh-i .stb i{display:block;height:4px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.sh-i .stb i b{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#ffd25a,#ff7a3c)}
.sh-i .stb i:nth-child(2) b{background:linear-gradient(90deg,#9ef0c8,#3cc0ff)}
.sh-i .stb i:nth-child(3) b{background:linear-gradient(90deg,#ffb0e0,#c070ff)}
.sh-i .stb i:nth-child(4) b{background:linear-gradient(90deg,#d0f07a,#5ac04a)}
.sh-i .stb em{font-style:normal;font-size:10px;opacity:.85;line-height:1.1;margin-top:1px}
.sh-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.sh-i{min-width:0}.sh-i small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-i .stb em{white-space:normal;text-align:center;overflow-wrap:anywhere}
.sh-i.soon u{font-size:10px;text-align:center}
/* ===== v8: pause + sound ===== */
#b-pause{display:none}
body[data-game="run"] #b-pause{display:grid}
body.paused #b-pause{background:var(--gold);color:var(--ink)}
.hic.muted{color:#ff9a8a}
#pause{z-index:9;background:rgba(8,5,12,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pz-card{width:min(340px,92vw);display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:20px 18px 16px;text-align:center;background:rgba(24,14,22,.92);border:1px solid var(--line);border-radius:20px;color:var(--bone);box-shadow:0 18px 50px rgba(0,0,0,.5)}
.pz-t{font:800 30px/1.1 Outfit,system-ui,sans-serif;letter-spacing:.02em}
.pz-go{font:800 20px/1 Outfit,system-ui,sans-serif;padding:15px 18px;border-radius:14px;border:0;background:var(--ember);color:var(--ink);cursor:pointer;box-shadow:0 6px 18px rgba(255,122,60,.35)}
.pz-go:active{transform:scale(.97)}
.pz-menu{font:600 14px/1 Outfit,system-ui,sans-serif;padding:11px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--mist);cursor:pointer}
.pz-k{color:var(--mist);font-size:12px;opacity:.8}
.snd{display:flex;flex-direction:column;gap:10px;text-align:left}
.snd-tg{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--bone);font:600 15px/1 Outfit,system-ui,sans-serif;cursor:pointer}
.snd-tg svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.snd-tg.off{color:#ff9a8a}
.snd-row{display:grid;grid-template-columns:92px 1fr 30px;align-items:center;gap:8px;font:600 14px/1.2 Outfit,system-ui,sans-serif;color:var(--bone)}
.snd-row output{text-align:right;color:var(--mist);font-size:12px}
.snd input[type=range]{width:100%;accent-color:var(--ember);height:28px;margin:0;touch-action:pan-x}
#sndpop{position:fixed;z-index:8;width:min(300px,86vw);padding:12px;border-radius:16px;background:rgba(24,14,22,.94);border:1px solid var(--line);box-shadow:0 12px 36px rgba(0,0,0,.45)}
#sndpop[hidden]{display:none}
#countdown{position:fixed;z-index:8;left:50%;top:40%;transform:translate(-50%,-50%) scale(.6);font:800 min(26vw,150px)/1 Outfit,system-ui,sans-serif;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.55);opacity:0;pointer-events:none}
#countdown.on{animation:cdPop .4s ease-out forwards}
@keyframes cdPop{0%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}30%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:.15;transform:translate(-50%,-50%) scale(.85)}}
@media (prefers-reduced-motion:reduce){#countdown.on{animation:none;opacity:1;transform:translate(-50%,-50%)}}
#rival .rv-tip{display:block;font:800 13px/1.2 Outfit,system-ui,sans-serif;color:var(--gold);margin-top:2px}
/* v8 shop / wardrobe CTA: gentle pulse 1→1.08 (1.5 s), shine sweep every 4 s, honest red badge only when something is claimable/new */
.hic.cta{position:relative;width:auto;min-width:34px;padding:0 9px 0 7px;gap:4px;display:flex;align-items:center;overflow:visible;color:#2a1406;border:0;
  background:linear-gradient(135deg,#ffe07a,#ffb03a 55%,#ff7a59);box-shadow:0 0 0 1.5px rgba(255,255,255,.55) inset,0 4px 14px rgba(255,150,50,.5);animation:ctaPulse 1.5s ease-in-out infinite}
.hic.cta2{background:linear-gradient(135deg,#ffc2e4,#ff7ac0 55%,#b86bff);color:#2a0a24;box-shadow:0 0 0 1.5px rgba(255,255,255,.5) inset,0 4px 14px rgba(255,90,180,.45);animation-delay:.75s}
.hic.cta svg{stroke-width:2.2}
.hic.cta .cta-l{font:800 12px/1 Outfit,system-ui,sans-serif;letter-spacing:.01em}
.hic.cta::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);background-size:250% 100%;background-position:150% 0;animation:ctaShine 4s ease-in-out infinite;pointer-events:none}
.hic.cta .nb{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#ff2d55;color:#fff;font:800 11px/18px Outfit,system-ui,sans-serif;font-style:normal;text-align:center;box-shadow:0 0 0 2px rgba(20,12,18,.9);animation:nbPop .5s cubic-bezier(.2,1.6,.4,1)}
.hic.cta .nb[hidden]{display:none}
@keyframes ctaPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes ctaShine{0%,70%{background-position:150% 0}100%{background-position:-60% 0}}
@keyframes nbPop{0%{transform:scale(0)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hic.cta,.hic.cta::after{animation:none}}
@media (max-width:420px){.hic.cta .cta-l{font-size:11px}.hicons{gap:5px}}
/* v8 shop: tiers, try, gift, starter, trust */
.sh-i.ch{position:relative;cursor:default;padding:14px 4px 6px;gap:4px}
.sh-i.ch .sh-main{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;width:100%}
.sh-i.ch .tr{position:absolute;top:-7px;left:50%;transform:translateX(-50%);padding:1px 7px;border-radius:8px;font:800 9px/14px Outfit,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;background:#8a8f99;color:#fff}
.sh-i.t-common{border-color:rgba(200,200,210,.25)}
.sh-i.t-rare{border-color:#3c9dff}.sh-i.t-rare .tr{background:#3c9dff}
.sh-i.t-epic{border-color:#a45cff}.sh-i.t-epic .tr{background:#a45cff}
.sh-i.t-legend{border-color:#ffb43a;background:linear-gradient(180deg,rgba(255,190,70,.16),rgba(255,255,255,.05))}.sh-i.t-legend .tr{background:#ffb43a;color:#2a1406}
.sh-i.t-mythic{border-color:transparent;background:linear-gradient(rgba(40,24,44,.96),rgba(40,24,44,.96)) padding-box,linear-gradient(135deg,#ff5d8f,#ffd84d,#7ee0c8,#9b8cff) border-box}.sh-i.t-mythic .tr{background:linear-gradient(90deg,#ff5d8f,#ffb43a,#9b8cff)}
.sh-i.on{box-shadow:0 0 0 2px var(--gold)}
.sh-i .nw{position:absolute;top:4px;right:4px;padding:0 5px;border-radius:6px;background:#ff2d55;color:#fff;font:800 9px/15px Outfit,system-ui,sans-serif}
.sh-try{width:100%;border:0;border-radius:10px;padding:5px 2px;font:800 10px/1.1 Outfit,system-ui,sans-serif;background:rgba(126,224,200,.18);color:#9ef0d8;cursor:pointer}
.sh-try:disabled{opacity:.5;cursor:default;background:rgba(255,255,255,.06);color:var(--mist)}
.sh-gift,.sh-start{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;margin:0 0 8px;border-radius:16px;color:var(--bone);font:inherit;cursor:pointer}
.sh-gift{border:2px solid #7ee0c8;background:linear-gradient(120deg,rgba(126,224,200,.22),rgba(80,160,255,.12))}
.sh-gift.done{opacity:.6;cursor:default}
.sh-gift em,.sh-start em{font-style:normal;font-size:26px;white-space:nowrap}
.sh-gift span,.sh-start span{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.sh-gift small,.sh-start small{font-size:11px;color:var(--mist);line-height:1.3}
.sh-gift u{text-decoration:none;font-weight:800;color:#7ee0c8;white-space:nowrap}
.sh-start{border:2px solid #ff7ac0;background:linear-gradient(120deg,rgba(255,122,192,.22),rgba(255,200,90,.14))}
.sh-start s{opacity:.6;font-weight:500}
.sh-start .sh-tm{font-style:normal;font-size:11px;color:#ffb0d8}
.sh-trust{margin:14px 0 2px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05);font-size:11px;color:var(--mist);line-height:1.35}
.sh-trust p{margin:2px 0}
.sh-trust p:first-child{display:flex;align-items:center;gap:6px;color:#bff5d8;font-size:12px}
.sh-trust svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* v8 onboarding finger + goal line + weak plank legend */
#finger{position:fixed;z-index:7;left:-200px;top:-200px;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .2s}
#finger.on{opacity:1}
#finger i{position:absolute;left:-6px;top:-6px;width:56px;height:62px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 62'%3E%3Cpath d='M20 6c0-3 2-5 5-5s5 2 5 5v20l2-1c3-1 6 0 7 3l1-1c3-1 6 0 7 3 3-1 6 1 6 4v12c0 9-6 16-15 16H30c-5 0-9-2-12-6L6 42c-2-3-1-6 2-7s5 0 7 2l5 5z' fill='%23fff' stroke='%232a1406' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E");filter:drop-shadow(0 4px 8px rgba(0,0,0,.45));animation:fTap 1.1s ease-in-out infinite;transform-origin:20px 6px}
#finger b{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,.9);animation:fRing 1.1s ease-out infinite}
#finger span{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);white-space:nowrap;padding:6px 12px;border-radius:12px;background:rgba(255,255,255,.95);color:#2a1406;font:800 15px/1.1 Outfit,system-ui,sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.35);animation:fBob 1.1s ease-in-out infinite}
@keyframes fTap{0%,100%{transform:translate(8px,18px) scale(1)}45%{transform:translate(0,0) scale(.92)}55%{transform:translate(0,0) scale(.92)}}
@keyframes fRing{0%,40%{transform:scale(.3);opacity:0}50%{opacity:1}100%{transform:scale(1.4);opacity:0}}
@keyframes fBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-4px)}}
#attract .at-goal{display:block;font:900 clamp(22px,6.4vw,40px)/1.05 Outfit,system-ui,sans-serif;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 24px rgba(255,190,90,.55);margin:6px 0 10px;letter-spacing:-.01em}
#attract .at-leg{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:6px 12px 6px 8px;border-radius:14px;background:rgba(20,12,18,.6);font:700 13px/1.2 Outfit,system-ui,sans-serif;color:var(--bone)}
.wk-ic{width:26px;height:26px;flex:none}
.ac-bs{display:flex;gap:8px}.ac-bs select{flex:1;min-width:0;height:42px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--bone);font:600 15px Outfit,system-ui,sans-serif;padding:0 10px}
.ac-f.bad .ac-bs select{border-color:#ff5d6c}
.ac-g[hidden]{display:none}
.hud .chip{text-transform:none;letter-spacing:0}
@media (max-width:460px){.hic.cta2 .cta-l{display:none}.hic.cta2{padding:0 7px}.hicons{gap:4px}.hic{width:32px;height:32px}}
/* v8 saga map: island headers, dotted trail, avatar on the current level, pulse */
.mp-wh span{display:flex;flex-direction:column;min-width:0}
.mp-wh small{font-size:11px;font-weight:600;color:var(--mist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-wh em{font-size:30px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.mp-buy{margin-left:auto;border:0;border-radius:12px;padding:6px 10px;font:800 12px Outfit,system-ui,sans-serif;color:#2a1406;background:linear-gradient(135deg,#ffe07a,#ffb03a);cursor:pointer;white-space:nowrap;animation:ctaPulse 1.5s ease-in-out infinite}
.mp-path{position:relative;gap:14px;padding:10px 0 8px}
.mp-path::before{content:"";position:absolute;top:18px;bottom:18px;left:50%;width:0;border-left:4px dotted rgba(255,255,255,.28)}
.mp-n.done{border-color:#ffd84d}
.mp-n.cur{animation:mpCur 1.4s ease-in-out infinite;z-index:1}
.mp-n.cur::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:3px solid var(--gold);animation:fRing 1.4s ease-out infinite;pointer-events:none}
.mp-av{position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);width:46px;height:46px;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.45);background:#2c1f30;animation:fBob 1.4s ease-in-out infinite;font-size:26px;display:grid;place-items:center}
.mp-av img{width:100%;height:100%;object-fit:cover}
.mp-w .mp-n.cur{margin-top:40px}
@keyframes mpCur{0%,100%{transform:translateX(var(--x)) scale(1)}50%{transform:translateX(var(--x)) scale(1.08)}}
.dock .ic.ic-fill path:first-child{fill:currentColor;stroke:none}
.dock .ic.ic-fill .eye{fill:#2a1406;stroke:none}
/* v8 shop turntable preview */
.sh-pv{display:flex;gap:12px;align-items:center;padding:10px;margin:0 0 10px;border-radius:18px;border:2px solid rgba(255,255,255,.18);background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.1),rgba(255,255,255,.02))}
.sh-pv.t-rare{border-color:#3c9dff}.sh-pv.t-epic{border-color:#a45cff}.sh-pv.t-legend{border-color:#ffb43a}.sh-pv.t-mythic{border-color:#ff7ac0}
.pv-st{position:relative;flex:none;width:132px;height:132px;border-radius:16px;overflow:hidden;background:#2c1f30;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.pv-st img{width:100%;height:100%;object-fit:cover;display:block}
.pv-rot{position:absolute;right:6px;bottom:5px;font:800 10px Outfit,system-ui,sans-serif;font-style:normal;color:#fff;opacity:.75}
.pv-in{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;position:relative}
.pv-in .tr{align-self:flex-start;padding:1px 7px;border-radius:8px;font:800 9px/14px Outfit,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;background:#8a8f99;color:#fff}
.sh-pv.t-rare .tr{background:#3c9dff}.sh-pv.t-epic .tr{background:#a45cff}.sh-pv.t-legend .tr{background:#ffb43a;color:#2a1406}.sh-pv.t-mythic .tr{background:linear-gradient(90deg,#ff5d8f,#ffb43a,#9b8cff)}
.pv-in b{font-size:16px}
.pv-in .stb{display:flex;flex-direction:column;gap:3px}.pv-in .stb i{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}.pv-in .stb i b{display:block;height:100%;background:linear-gradient(90deg,#ffd25a,#ff7a3c)}.pv-in .stb em{font-style:normal;font-size:11px;opacity:.85}
.pv-b{display:flex;flex-direction:column;gap:5px;margin-top:2px}
.pv-go{border:0;border-radius:12px;padding:8px 10px;font:800 14px Outfit,system-ui,sans-serif;background:rgba(255,255,255,.12);color:var(--bone);cursor:pointer}
.pv-go.buy{background:linear-gradient(135deg,#ffe07a,#ffb03a);color:#2a1406}
.sh-i em[data-pv]{cursor:zoom-in}
@media (max-width:380px){.hicons{gap:3px}.hic{width:30px;height:30px}.hic svg{width:17px;height:17px}.hic.cta{padding:0 7px 0 5px}.hic.cta .cta-l{font-size:10.5px}}
/* ===== v9 live edition: gift toasts, skill chips, gift legend, POV picture-in-picture, 9:16 browser-source scale ===== */
body.live{--lz:1}
body.live .dock,body.live #lang,body.live #photo-fab,body.live #b-mode,body.live .lang,body.live #finger{display:none!important}
body.live .hud,body.live #livepanel,body.live #lvlegend,body.live #gtoast,body.live #lvbuffs,body.live #moment,body.live #droptoast,body.live #toast,body.live #banner,body.live #rival,body.live #phase-title,body.live .progress,body.live #result,body.live #countdown{zoom:var(--lz)}
body.live{--dock:0px}
#gtoast{position:fixed;z-index:4;left:calc(8px + var(--sal,0px));bottom:calc(var(--sab,0px) + 150px);display:flex;flex-direction:column-reverse;gap:6px;pointer-events:none;max-width:62vw}
body:not(.live) #gtoast{display:none}
#gtoast .gt{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:99px;background:rgba(40,10,30,.86);border:1.5px solid #ff5d8f;color:#fff;font:700 12px/1.1 Outfit,system-ui,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.35);animation:gtIn .35s cubic-bezier(.2,1.5,.4,1)}
#gtoast .gt.help{background:rgba(10,36,48,.88);border-color:#5fd0ff}
#gtoast .gt i{width:30px;height:30px;flex:none;display:block}#gtoast .gt i svg{width:100%;height:100%;display:block}
#gtoast .gt b{font-weight:800;max-width:30vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
#gtoast .gt em{font-style:normal;font-weight:900;color:#ffd84d;margin-left:5px;font-size:14px}
#gtoast .gt span{display:block;font-weight:600;opacity:.9;font-size:11px;margin-top:2px}
#gtoast .gt.bump{animation:gtBump .3s ease}
@keyframes gtIn{from{transform:translateX(-30px) scale(.8);opacity:0}to{transform:none;opacity:1}}
@keyframes gtBump{50%{transform:scale(1.12)}}
#lvbuffs{position:fixed;z-index:3;left:50%;transform:translateX(-50%);top:calc(var(--sat,0px) + 64px);display:flex;gap:6px;pointer-events:none}
body:not(.live) #lvbuffs{display:none}
#lvbuffs .bf{display:flex;align-items:center;gap:4px;padding:3px 9px 3px 3px;border-radius:99px;background:rgba(16,10,24,.75);border:1.5px solid #fff;color:#fff;font:800 12px/1 Outfit,system-ui,sans-serif}
#lvbuffs .bf i{width:22px;height:22px;display:block}#lvbuffs .bf i svg{width:100%;height:100%}
#lvbuffs .bf-jump{border-color:#6fe8ff}#lvbuffs .bf-heavy{border-color:#8a5cff}#lvbuffs .bf-turbo{border-color:#ffd84d}#lvbuffs .bf-shield{border-color:#5fd0ff}
#lvbuffs .bf.chg{animation:bfChg .3s ease-in-out infinite alternate;opacity:.85}
@keyframes bfChg{to{transform:scale(1.12)}}
#lvlegend{left:calc(6px + var(--sal,0px));right:calc(6px + var(--sar,0px));bottom:calc(var(--sab,0px) + 8px);padding:6px 6px 4px;border-radius:14px;background:rgba(16,10,24,.66);border:1px solid rgba(255,255,255,.16);text-shadow:none}
#lvlegend .lg-t{margin:0 0 4px;text-align:center;font:800 11px/1.1 Outfit,system-ui,sans-serif;color:#ffd84d;letter-spacing:.02em}
#lvlegend ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:3px 4px}
#lvlegend li{display:flex;align-items:center;gap:4px;min-width:0;padding:2px 3px;border-radius:9px;background:rgba(255,255,255,.06)}
#lvlegend li.lg-help{background:rgba(95,208,255,.16)}
#lvlegend li i{width:26px;height:26px;flex:none;display:block}#lvlegend li i svg{width:100%;height:100%;display:block}
#lvlegend li span{min-width:0;display:flex;flex-direction:column}
#lvlegend li b{font:800 10px/1.1 Outfit,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lvlegend li small{font:600 9px/1.15 Outfit,system-ui,sans-serif;opacity:.92;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (orientation:landscape){#lvlegend ul{grid-template-columns:repeat(10,1fr)}}
body.live #toast{bottom:calc(var(--sab,0px) + 108px)}
body.live #droptoast{bottom:calc(var(--sab,0px) + 120px)}
body.live .progress{bottom:calc(var(--sab,0px) + 98px)}
#pip{position:fixed;z-index:2;left:calc(8px + var(--sal,0px));top:calc(var(--sat,0px) + 64px);width:42vw;aspect-ratio:4/3;max-width:420px;padding:0;margin:0;border:3px solid rgba(255,255,255,.92);border-radius:18px;background:transparent;box-shadow:0 6px 20px rgba(0,0,0,.4);cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}
#pip[hidden]{display:none}
@media (orientation:landscape){#pip{width:24vw;top:calc(var(--sat,0px) + 70px)}}
body.live #pip{top:calc(var(--sat,0px) + 64px * var(--lz))}
@media (orientation:landscape){body.live #pip{top:calc(var(--sat,0px) + 70px * var(--lz))}}
body:not(.live) #pip{left:auto;right:calc(8px + var(--sar,0px));top:calc(var(--sat,0px) + 120px);width:30vw}
#pip .pip-l{position:absolute;left:6px;top:6px;padding:2px 8px;border-radius:99px;background:rgba(16,10,24,.72);color:#fff;font:800 11px/1.3 Outfit,system-ui,sans-serif}
#pip .pip-sw{position:absolute;right:6px;bottom:6px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.9);color:#2a1a2e;font:900 14px/24px system-ui;text-align:center}
#pip.third{border-color:#ffd84d}
body.live #rival{top:calc(var(--sat,0px) + 70px + 34vw / var(--lz));left:calc(8px + var(--sal,0px))}
@media (orientation:landscape){body.live #rival{top:calc(var(--sat,0px) + 70px + 19vw / var(--lz))}}
#moment[data-kind="storm"] b{color:#c9e8ff;text-shadow:0 0 18px #6fb8ff,0 3px 0 #1a2a4a}
/* v9.1 live: compact header (PiP sits right under it), legend cells stacked so labels never truncate */
body.live .hud .brand h1{font-size:19px;line-height:1.05;margin:2px 0 0}
body.live #status{display:none}
body.live #lvlegend li{flex-direction:column;align-items:center;text-align:center;gap:1px;padding:3px 2px}
body.live #lvlegend li i{width:24px;height:24px}
body.live #lvlegend li span{align-items:center;width:100%}
body.live #lvlegend li b{white-space:normal;overflow:visible;font-size:9.5px;line-height:1.05;word-break:break-word}
body.live #lvlegend li small{font-size:8.5px;line-height:1.1}
body.live #lvbuffs{left:calc(var(--pipR,45vw) / var(--lz,1) + 6px);transform:none;flex-direction:column;align-items:flex-start;top:calc(var(--pipT,64px) / var(--lz,1))}
/* ===== v9.1 live: pace + juice + viewer hooks ===== */
#lvtime,#lvhooks,#lvcombo,#lvspeed,#lvdanger,#whoosh{pointer-events:none}
#lvtime[hidden],#lvhooks[hidden],#lvcombo[hidden],#lvspeed[hidden],#lvdanger[hidden],#whoosh[hidden]{display:none}
#lvtime{position:fixed;z-index:6;left:0;right:0;top:0;height:calc(5px * var(--lz));background:rgba(0,0,0,.35);opacity:0;transition:opacity .25s}
body.lp-run #lvtime{opacity:1}
#lvtime s{display:block;height:100%;transform-origin:left;background:linear-gradient(90deg,#7ee0c8,#ffd84d 60%,#ff9a2a);box-shadow:0 0 10px rgba(255,216,77,.6)}
#lvtime.low s{background:linear-gradient(90deg,#ff5d5d,#ff9a2a);animation:lpPulse .5s ease-in-out infinite alternate}
#lvhooks{position:fixed;z-index:3;right:calc(8px + var(--sar,0px));top:calc(var(--sat,0px) + 300px);width:min(152px,40vw);display:flex;flex-direction:column;gap:5px;align-items:stretch;zoom:var(--lz);transition:opacity .3s}
body.live.moment #lvhooks{opacity:0}
#lvhooks .hk{padding:5px 8px;border-radius:10px;background:rgba(16,10,24,.66);border:1px solid rgba(255,255,255,.14);color:#fff;font:800 11px/1.2 Outfit,system-ui,sans-serif;text-shadow:0 1px 2px #000}
#lvhooks .hk-spd{display:flex;justify-content:space-between;align-items:center;gap:6px}
#lvhooks .hk-spd b{color:#ffd84d;white-space:nowrap}#lvhooks .hk-spd i{font-style:normal;color:#ffd84d;letter-spacing:-1px;font-size:10px}
#lvhooks .hk-streak{border-color:#ff9a2a;background:linear-gradient(160deg,rgba(120,40,10,.85),rgba(40,10,20,.85));animation:lpGlow 1.2s ease-in-out infinite alternate}
#lvhooks .hk-tease{border-color:#ff5d8f;text-align:center;animation:lpPulse .5s ease-in-out infinite alternate}#lvhooks .hk-tease b{color:#ffd84d;font-size:14px}
#lvhooks .hk-mvp{display:flex;align-items:center;gap:5px;border-color:#ffd84d;white-space:nowrap;overflow:hidden}
#lvhooks .hk-mvp small{font-size:9px;opacity:.8;text-transform:uppercase}#lvhooks .hk-mvp b{color:#ffd84d;overflow:hidden;text-overflow:ellipsis;min-width:0}
#lvhooks .hk-mvp.pop{animation:lpPop .6s cubic-bezier(.2,1.6,.4,1)}
#lvcombo{position:fixed;z-index:5;right:calc(14px + var(--sar,0px));top:46%;text-align:center;opacity:0;transform:scale(.5);zoom:var(--lz);transition:opacity .25s,transform .25s}
#lvcombo.on{opacity:1;transform:scale(1)}
#lvcombo small{display:block;font:900 13px/1 Syne,Outfit,sans-serif;letter-spacing:.2em;color:#fff;text-shadow:0 2px 8px #000}
#lvcombo b{display:block;font:900 48px/1 Syne,Outfit,sans-serif;color:#ffd84d;-webkit-text-stroke:2px #5a1a00;text-shadow:0 0 18px rgba(255,140,40,.9),0 4px 0 #8a2a00}
#lvcombo.bump b{animation:lpPop .45s cubic-bezier(.2,1.8,.4,1)}
#lvspeed{position:fixed;inset:0;z-index:1;opacity:0;background:repeating-conic-gradient(from 0deg at 55% 50%,rgba(255,255,255,.0) 0deg 4deg,rgba(255,255,255,.55) 4.4deg 4.8deg,rgba(255,255,255,0) 5.2deg 9deg);-webkit-mask:radial-gradient(ellipse at 55% 50%,transparent 34%,#000 78%);mask:radial-gradient(ellipse at 55% 50%,transparent 34%,#000 78%);animation:lpSpin 0.35s steps(3) infinite}
#lvdanger{position:fixed;inset:0;z-index:1;opacity:0;box-shadow:inset 0 0 calc(70px * var(--lz)) calc(14px * var(--lz)) rgba(255,40,40,.85);animation:lpPulse .4s ease-in-out infinite alternate}
#whoosh{position:fixed;inset:-10%;z-index:6;opacity:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.9) 46%,rgba(255,216,77,.85) 50%,rgba(255,255,255,.9) 54%,transparent 70%);transform:translateX(-120%)}
#whoosh.go{animation:lpWhoosh .55s cubic-bezier(.5,0,.3,1)}
#lvlegend .lg-t.cta{display:flex;align-items:center;gap:6px;font-size:13px;color:#ffd84d;animation:lpPop .5s cubic-bezier(.2,1.6,.4,1)}
#lvlegend .lg-t.cta i{width:22px;height:22px;flex:none;display:block}#lvlegend .lg-t.cta i svg{width:100%;height:100%;display:block}
#lvlegend li.hl{animation:lpGlow .6s ease-in-out infinite alternate;border-radius:10px}
@keyframes lpPulse{from{opacity:.55}to{opacity:1}}
@keyframes lpGlow{from{box-shadow:0 0 0 rgba(255,154,42,0)}to{box-shadow:0 0 14px rgba(255,154,42,.85)}}
@keyframes lpPop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes lpSpin{from{transform:rotate(0)}to{transform:rotate(3deg)}}
@keyframes lpWhoosh{0%{opacity:0;transform:translateX(-120%)}20%{opacity:1}100%{opacity:0;transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){#lvspeed,#whoosh{display:none}}
#lvlegend .lg-sides{margin:0 0 3px;display:grid;grid-template-columns:2fr 3fr;gap:4px;font:900 9.5px/1 Outfit,system-ui,sans-serif;letter-spacing:.08em;text-align:center}
#lvlegend .lg-sides span{padding:2px 0;border-radius:6px}
#lvlegend .lg-sh{color:#7ef0ff;background:rgba(95,208,255,.18)}#lvlegend .lg-ss{color:#ff9ec7;background:rgba(255,93,143,.16)}
#lvlegend li.lg-sab{background:rgba(255,93,143,.10)}
@media (orientation:landscape){#lvlegend .lg-sides{grid-template-columns:2fr 8fr}}
body.live #droptoast{bottom:calc(var(--sab,0px) + 164px)}
body.live #gtoast{bottom:calc(var(--sab,0px) + 202px)}
@media (orientation:landscape){body.live #droptoast{bottom:calc(var(--sab,0px) + 120px)}body.live #gtoast{bottom:calc(var(--sab,0px) + 150px)}}

/* responsivo (2026-10-14): nada do HUD passa da borda em celular estreito.
   Marca encolhe com reticências, botões quebram linha e "Loja/Visual" viram só ícone abaixo de 480px. */
.hud{min-width:0}
.hud .brand{flex:1 1 auto;min-width:0;max-width:56%}
.hud .brand h1,.brand p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:none}
.right{flex:0 1 auto;min-width:0;max-width:60%}
.hicons{flex-wrap:wrap;justify-content:flex-end;padding:5px 5px 0 0} /* espaço pras bolinhas de aviso não saírem da tela */
@media (max-width:480px){.cta .cta-l{display:none}.cta{padding:0 7px;min-width:0}.hud .brand h1{letter-spacing:.01em;font-size:clamp(15px,4.8vw,22px)}}
@media (max-width:340px){.hud .brand p{display:none}.score{min-width:0;padding:5px 8px}.score strong{font-size:24px}}