*{margin:0;padding:0;box-sizing:border-box}
  [hidden]{display:none!important}
  html,body{height:100%;background:#0b1020;font-family:system-ui,sans-serif;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
  #wrap{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh}
  #c3d{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
  #c{position:absolute;inset:0;width:100%;height:100%;display:block}
  #hud{position:absolute;top:16px;left:16px;right:16px;color:white;pointer-events:none;display:flex;justify-content:space-between;font-weight:700;text-shadow:0 2px 8px #000}
  #hud small{display:block;font-size:11px;letter-spacing:1px;color:#adbad2;margin-bottom:5px}
  #hud strong{font-size:28px} #clock{text-align:right} #details{position:absolute;top:88px;width:100%;text-align:center;color:#dce8ff;font-size:12px;pointer-events:none}
  #overlay{position:absolute;inset:0;display:grid;place-items:center;background:#07101ca8;color:white;padding:20px}
  #overlay[hidden]{display:none}.panel{width:min(420px,100%);padding:28px;background:#0e1934ed;border:1px solid #ffffff30;border-radius:24px;text-align:center;box-shadow:0 24px 90px #0008}
  h1{font-size:48px;letter-spacing:-3px;margin:8px 0}p{line-height:1.6;color:#b9c7df;margin:14px 0}.eyebrow{color:#77f4b1;letter-spacing:4px;font-size:12px}button,a.action{display:block;width:100%;border:0;border-radius:12px;padding:14px;margin-top:10px;background:#83f7b2;color:#092016;font:700 15px system-ui;cursor:pointer;text-decoration:none}button.secondary,a.secondary{background:#253554;color:white}#mute{position:absolute;bottom:14px;right:16px;width:auto;padding:8px 12px;font-size:12px;background:#172641;color:white}#result{font-size:15px}#result strong{font-size:48px;color:white;display:block}

#scorebox{background:#102635e8;border:1px solid #b4ff9130;border-radius:18px;padding:14px 18px;min-width:130px}#score{font-size:36px;display:block;line-height:1;font-variant-numeric:tabular-nums}#record{margin-top:10px;color:#f9dc65;font-size:11px;letter-spacing:1px}
#clock{--fill:66.6%;--timer:#91fbb5;width:104px;height:104px;border-radius:50%;padding:5px;background:conic-gradient(var(--timer) var(--fill),#26384b 0);box-shadow:0 0 28px #75ff9320}#clock .dial{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:50%;background:#0c192b}#clock small{font-size:8px;letter-spacing:1.5px;margin:4px 0}#time{font-size:29px;font-variant-numeric:tabular-nums}#clock.danger{--timer:#ff785c;animation:danger .65s ease-in-out infinite}#details{top:138px;font-size:11px;letter-spacing:2px}
.panel{max-height:90dvh;overflow:auto;padding:24px;background:linear-gradient(155deg,#19382bee,#0c1732f5);border-color:#c8ef7d44}h1{font-size:52px;line-height:.95;letter-spacing:-3px;margin:20px 0 10px}h1 span{display:block;font-size:22px;letter-spacing:7px;color:#f6db73;margin-top:10px}#intro{font-size:14px}.panel .eyebrow{font-size:10px}#helpText{font-size:13px;text-align:left;background:#ffffff09;padding:14px;border-radius:12px;margin-top:12px;color:#c8d9e4;line-height:1.7}#preview{width:100%;height:auto;border:1px solid #fff2;border-radius:12px;margin:12px 0 0}#result p{font-size:13px;margin:8px 0}#result strong{font-size:42px}#start{background:#d9f877;box-shadow:0 5px 0 #738840;font-size:16px;margin-bottom:15px}#help{font-size:12px;padding:9px;background:transparent;border:1px solid #ffffff25;color:#d1e2dc}
.pop{animation:pop .3s ease-out}@keyframes pop{40%{transform:scale(1.1);filter:brightness(1.6)}}@keyframes danger{50%{box-shadow:0 0 30px #ff5b4055;transform:scale(1.035)}}.still *{animation:none!important;transition:none!important}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.mascot-hero{display:block;width:140px;height:112px;object-fit:contain;margin:0 auto -12px;filter:drop-shadow(0 5px 14px #0005)}.panel.finished .mascot-hero{display:none}.username-label{display:block;text-align:left;color:#cbdccc;font-size:12px;margin:14px 0 6px}#username{width:100%;padding:11px 13px;border:1px solid #cced793b;border-radius:10px;background:#091c28;color:white;font:16px system-ui;user-select:text;touch-action:auto}#mascot-side{position:absolute;right:12px;top:29%;width:74px;opacity:.65;pointer-events:none;filter:drop-shadow(0 3px 10px #0006)}.panel h1{margin-top:14px}#username-note{display:block;text-align:left;color:#92aca6;font-size:10px;margin-top:5px}
#mascot-side{top:auto;bottom:6px;right:calc(50% - 28px);width:56px;opacity:.85}


.panel{padding:0 22px 22px;background:linear-gradient(155deg,#087044 0%,#03422f 43%,#081e36 100%);border:1px solid #f4d34e80;box-shadow:0 2px 0 #ffe97888 inset,0 10px 0 #052b26,0 30px 70px #0009;isolation:isolate}
.brazil-hero{position:relative;height:285px;margin:0 -22px;overflow:hidden;border-radius:24px 24px 0 0;background:radial-gradient(ellipse at 70% 55%,#27ad5c55,transparent 70%)}
.brazil-hero::before{content:"";position:absolute;width:310px;height:310px;background:#f5d53d;transform:rotate(45deg);left:48%;top:30px;opacity:.16}
.hero-orbit{position:absolute;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#326eac,#062754);border:1px solid #ffffff30;right:-16px;top:55px;box-shadow:0 0 50px #ffe45422}
.brazil-hero .eyebrow{position:absolute;top:22px;left:24px;right:20px;text-align:left;font-size:9px;letter-spacing:2px;color:#f5df83}
.brazil-hero h1{position:absolute;z-index:2;top:73px;left:23px;text-align:left;font-size:52px;transform:rotate(-5deg);color:#fffbe3;text-shadow:0 2px #bbb571,0 4px #8d944e,0 7px #063529,0 12px 18px #001e27}
.brazil-hero h1 span{font-size:16px;letter-spacing:5px;color:#ffe16b}
.brazil-hero .mascot-hero{position:absolute;z-index:1;right:-19px;bottom:12px;width:265px;height:220px;margin:0;object-fit:contain;filter:drop-shadow(0 12px 10px #001c2880);animation:hero-float 5s ease-in-out infinite}
.hero-stars{position:absolute;bottom:27px;left:25px;color:#ffe16b;letter-spacing:4px;font-size:10px}
.panel #intro{margin:0 0 20px;font-size:13px;color:#d4ebdc}.panel #start{background:linear-gradient(#ffea77,#edc83e);color:#134329;border:1px solid #fff398;box-shadow:0 5px 0 #aa8c22,0 9px 16px #002e2d80}
.panel.finished .brazil-hero{height:91px}.panel.finished .brazil-hero h1{top:28px;font-size:28px;transform:none;text-shadow:0 3px #28483c}.panel.finished .brazil-hero h1 span{display:inline;font-size:13px;letter-spacing:3px;margin-left:10px}.panel.finished .brazil-hero .eyebrow{top:15px;font-size:8px}.panel.finished .hero-stars,.panel.finished .hero-orbit{display:none}
#clock{transform:perspective(500px) rotateX(9deg) rotateY(-12deg);box-shadow:3px 4px 0 #327458,6px 8px 0 #153b35,9px 12px 20px #0008,0 1px 0 #efffd4 inset}
#clock .dial{background:radial-gradient(circle at 30% 20%,#264636,#061628 75%);box-shadow:0 4px 10px #000b inset,0 -2px 0 #e7ffb622;position:relative;overflow:hidden}
#clock .dial::after{content:"";position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 40%,#ffffff12 50%,transparent 60%);animation:dial-shine 5s linear infinite;pointer-events:none}
#time{text-shadow:0 1px #b3c8aa,0 2px #7d9688,0 3px #385c50,0 5px #183428,0 7px 7px #000;letter-spacing:-1px;animation:digit-breathe 2s ease-in-out infinite}
#clock.danger #time{animation:digit-breathe .55s ease-in-out infinite}
#card-stage{perspective:1000px;padding:8px 5px 15px}
#preview{display:block;margin:0;border:1px solid #e9db8880;border-radius:14px;transform:rotateX(7deg) rotateY(-7deg);box-shadow:2px 3px 0 #a8a057,4px 6px 0 #465c3a,6px 9px 0 #163c32,10px 18px 26px #0009;animation:card-float 7s ease-in-out infinite;transform-origin:center}
#personalize{margin:0 0 14px}.username-label{font-size:11px;margin-top:0}
@keyframes hero-float{50%{transform:translateY(-7px) rotate(2deg)}}
@keyframes card-float{0%,100%{transform:rotateX(7deg) rotateY(-7deg) translateY(0)}50%{transform:rotateX(3deg) rotateY(6deg) translateY(-4px)}}
@keyframes digit-breathe{50%{transform:translateY(-1px);filter:brightness(1.13)}}
@keyframes dial-shine{from{transform:translateX(-40%)}to{transform:translateX(40%)}}
@media(max-width:360px){.brazil-hero .mascot-hero{right:-42px;width:235px}.brazil-hero h1{font-size:43px}}
.panel{touch-action:pan-y;overscroll-behavior:contain}
.still *, .still *::before, .still *::after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){*::before,*::after{animation:none!important;transition:none!important}}
#download-status{font-size:12px;color:#f6df95;line-height:1.5;margin-top:8px}

#motion{position:absolute;bottom:14px;left:16px;width:auto;padding:8px 12px;font-size:12px;background:#172641;color:white}