: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(26px,7vw,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(84px + 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}
.progress{left:calc(10px + var(--sal));right:calc(10px + var(--sar));bottom:calc(54px + 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:0;border-radius:9px;background:linear-gradient(90deg,#c98a4f,var(--gold));transition:width .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(6,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){.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(46px + var(--sab))}#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:38%}
@media (max-height:440px) and (orientation:landscape){#phase-title{top:calc(14px + var(--sat))}#phase-title b{font-size:52px}#banner{top:42%}}
.score{pointer-events:auto;cursor:pointer}
#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)}}