:root{
  --bg:#0a0e17;
  --bg2:#111827;
  --ink:#eef2f8;
  --dim:#8b93a7;
  --line:#1e293b;
  --track:#20283a;
  --track2:#2a3550;
  --mae:#e23b3b;
  --pai:#2f6bd8;
  --irmao:#27b45a;
  --bruno:#c8ccd2;
  --gold:#f5c542;
  --accent:#ff7a1a;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%, #16203a 0%, var(--bg) 60%);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ===== overlays ===== */
.overlay{
  position:fixed;inset:0;z-index:50;
  display:none;align-items:center;justify-content:center;
  padding:24px;
  background:radial-gradient(900px 500px at 50% 20%, #16203a 0%, #06090f 70%);
}
.overlay.show{display:flex}
.overlay.modal{background:rgba(3,6,12,.82);backdrop-filter:blur(6px);z-index:70}

/* ===== gate ===== */
.gate-box,.intro-box{text-align:center;max-width:440px;width:100%}
.gate-flag,.intro-flag{font-size:52px;margin-bottom:8px}
.gate-title{font-family:'Racing Sans One',cursive;font-size:clamp(38px,11vw,64px);line-height:.92;letter-spacing:1px}
.gate-title span{color:var(--accent)}
.gate-sub{color:var(--dim);margin:14px 0 20px;font-size:14px;letter-spacing:.5px}
.pass-input,.num-input{
  width:100%;background:#0d1424;border:1.5px solid var(--line);
  color:var(--ink);border-radius:14px;padding:16px 18px;font-size:18px;
  text-align:center;outline:none;font-family:'Rajdhani',sans-serif;font-weight:600;letter-spacing:1px;
}
.pass-input:focus,.num-input:focus{border-color:var(--accent)}
.pass-error,.entry-error{color:var(--mae);min-height:20px;margin-top:10px;font-size:14px;font-weight:600}

/* ===== buttons ===== */
.btn-race{
  margin-top:18px;width:100%;
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:20px;letter-spacing:1.5px;
  color:#0a0e17;background:linear-gradient(180deg,#ffb648,var(--accent));
  border:none;border-radius:14px;padding:16px 22px;cursor:pointer;
  box-shadow:0 8px 24px rgba(255,122,26,.35), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .12s ease, box-shadow .12s ease;text-transform:uppercase;
}
.btn-race:active{transform:translateY(2px) scale(.99)}
.btn-race.big{font-size:24px;padding:18px 26px}
.link-btn{background:none;border:none;color:var(--dim);margin-top:12px;font-size:13px;text-decoration:underline;cursor:pointer}

/* ===== intro ===== */
.intro-title{font-family:'Racing Sans One',cursive;font-size:clamp(30px,8vw,50px);letter-spacing:1px}
.intro-badge{
  display:inline-block;margin:14px 0;padding:8px 18px;border-radius:999px;
  background:#0d1424;border:1.5px solid var(--accent);color:var(--accent);
  font-family:'Rajdhani';font-weight:700;letter-spacing:3px;font-size:18px;
}
.intro-vs{font-family:'Rajdhani';font-weight:600;font-size:19px;letter-spacing:1px;margin:6px 0}
.intro-vs i{color:var(--dim);font-style:normal;margin:0 6px;font-size:14px}
.intro-tag{color:var(--dim);margin:14px 0 6px;font-size:15px}

/* ===== countdown ===== */
#countdown{background:#04070d}
.count-num{
  font-family:'Racing Sans One',cursive;font-size:min(46vw,320px);color:#fff;
  text-shadow:0 0 40px var(--accent),0 0 80px rgba(255,122,26,.6);
  animation:countpop .95s ease both;
}
@keyframes countpop{
  0%{transform:scale(2.4);opacity:0;filter:blur(8px)}
  30%{transform:scale(1);opacity:1;filter:blur(0)}
  75%{transform:scale(1);opacity:1}
  100%{transform:scale(.4);opacity:0}
}
.count-num.go{color:var(--irmao);text-shadow:0 0 50px var(--irmao),0 0 100px rgba(39,180,90,.6)}

/* ===== race layout ===== */
.race{max-width:960px;margin:0 auto;padding:16px 14px 60px}
.race.hidden{display:none}
.race-head{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.race-logo{font-family:'Racing Sans One',cursive;font-size:20px;letter-spacing:.5px}
.race-logo span{color:var(--dim);font-family:'Rajdhani';font-size:13px;letter-spacing:2px;text-transform:uppercase}
.commentator{
  min-height:24px;font-family:'Rajdhani';font-weight:600;font-size:16px;letter-spacing:.3px;
  color:var(--gold);border-left:3px solid var(--accent);padding-left:10px;
  transition:opacity .3s ease;
}

/* ===== track ===== */
.track-wrap{
  background:
    radial-gradient(rgba(255,255,255,.05) 1.5px, transparent 1.6px) 0 0/16px 16px,
    linear-gradient(180deg,#0c1220,#0a0f1b);
  border:2px solid var(--line);border-radius:18px;padding:14px 12px;
  box-shadow:inset 0 2px 20px rgba(0,0,0,.5);
}
.c-ride{color:var(--accent);font-weight:700}
.track{position:relative}
.lane{
  position:relative;height:64px;margin:8px 0;border-radius:12px;
  background:
    repeating-linear-gradient(90deg,transparent 0 38px,rgba(255,255,255,.05) 38px 78px),
    linear-gradient(180deg,var(--track2),var(--track));
  border:1px solid #26314a;overflow:visible;
}
.lane::before{
  content:"";position:absolute;left:0;right:96px;top:50%;height:3px;transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 14px,transparent 14px 30px);
  opacity:.5;
}
.lane .startline{position:absolute;left:4px;top:6px;bottom:6px;width:6px;border-radius:3px;
  background:repeating-linear-gradient(180deg,#fff 0 6px,#000 6px 12px);opacity:.55}

/* checkpoints */
.cp{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.14);z-index:1}
.cp .cp-lab{position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  font-family:'Rajdhani';font-size:11px;font-weight:700;color:var(--dim);white-space:nowrap;letter-spacing:.5px}

/* car / vehicle */
.car{
  position:absolute;left:0;top:50%;transform:translate(0,-50%);
  transition:left 1.6s cubic-bezier(.22,.61,.36,1);
  z-index:3;will-change:left;
}
.veh-wrap{animation:idlebob 2.4s ease-in-out infinite}
.car .veh{width:88px;height:auto;display:block;filter:drop-shadow(0 5px 5px rgba(0,0,0,.55))}
@keyframes idlebob{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-2px) rotate(.6deg)}}
.car .tag{
  position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  font-family:'Rajdhani';font-weight:700;font-size:11px;letter-spacing:.5px;
  white-space:nowrap;padding:1px 8px;border-radius:8px;background:rgba(6,10,18,.9);
  border:2px solid rgba(255,255,255,.14);margin-bottom:5px;z-index:4;
}
.car .wheel{transform-box:fill-box;transform-origin:center}

/* ultrapassagem: cavalinho + rodas a girar */
.car.overtake{animation:none}
.car.overtake .veh-wrap{animation:wheelie .5s cubic-bezier(.3,1.4,.5,1)}
.car.overtake .wheel{animation:spin .18s linear 6}
@keyframes wheelie{
  0%{transform:rotate(0) translateX(0)}
  35%{transform:rotate(-9deg) translateX(-3px) translateY(-3px)}
  70%{transform:rotate(3deg)}
  100%{transform:rotate(0)}
}
@keyframes spin{to{transform:rotate(360deg)}}

/* linhas de velocidade (atrás = esquerda) */
.speedlines{position:absolute;right:100%;top:50%;transform:translateY(-50%);
  width:46px;height:34px;opacity:0;pointer-events:none;
  background:
    linear-gradient(90deg,transparent,rgba(255,255,255,.9)) top/100% 3px no-repeat,
    linear-gradient(90deg,transparent,rgba(255,255,255,.7)) center/100% 3px no-repeat,
    linear-gradient(90deg,transparent,rgba(255,255,255,.9)) bottom/100% 3px no-repeat;
  margin-right:4px;
}
.car.overtake .speedlines{animation:zip .5s ease-out}
@keyframes zip{0%{opacity:0;transform:translate(10px,-50%)}30%{opacity:1}100%{opacity:0;transform:translate(-14px,-50%)}}

/* nitro (chama do escape) */
.nitro{position:absolute;right:100%;top:50%;transform:translateY(-50%);
  width:0;height:14px;margin-right:2px;pointer-events:none;
  background:radial-gradient(circle,var(--nitro,#ff7a1a),rgba(255,122,26,0));border-radius:50%;opacity:0}
.car.overtake .nitro{animation:flame .5s ease-out}
@keyframes flame{
  0%{opacity:0;width:0}30%{opacity:1;width:34px;box-shadow:0 0 16px 4px var(--nitro,#ff7a1a)}
  100%{opacity:0;width:0}
}

/* baforadas de escape */
.exhaust{position:absolute;right:100%;top:52%;transform:translateY(-50%);pointer-events:none}
.puff{position:absolute;right:0;top:0;width:12px;height:12px;border-radius:50%;
  background:rgba(200,208,224,.5);animation:puffout .9s ease-out forwards}
@keyframes puffout{
  0%{opacity:.7;transform:translate(0,0) scale(.5)}
  100%{opacity:0;transform:translate(calc(-1 * var(--d,24px)),-10px) scale(1.8)}
}

/* balão de banda-desenhada */
.burst{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);
  font-family:'Racing Sans One',cursive;font-size:18px;color:#fff;white-space:nowrap;
  padding:4px 12px;margin-bottom:22px;border-radius:14px;z-index:6;
  background:var(--bc,#ff7a1a);border:3px solid #0a0e17;
  box-shadow:0 4px 0 #0a0e17;text-shadow:0 1px 0 rgba(0,0,0,.35);
  animation:burstpop 1.4s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes burstpop{
  0%{transform:translateX(-50%) scale(.2) rotate(-10deg);opacity:0}
  20%{transform:translateX(-50%) scale(1.15) rotate(4deg);opacity:1}
  35%{transform:translateX(-50%) scale(1) rotate(0)}
  75%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  100%{opacity:0;transform:translateX(-50%) translateY(-16px) scale(1)}
}

/* finish (linha da meta, fina) */
.finish{position:absolute;right:78px;top:-6px;bottom:-6px;width:16px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;z-index:2;
  background:repeating-linear-gradient(45deg,#fff 0 7px,#000 7px 14px);
  border-radius:6px;opacity:.95;box-shadow:0 0 0 2px rgba(0,0,0,.4)}
.finish-flag{position:absolute;top:-22px;font-size:20px;filter:drop-shadow(0 0 4px #000)}
.finish-label{position:absolute;bottom:-30px;font-family:'Rajdhani';font-weight:700;font-size:10px;text-align:center;color:#fff;
  text-shadow:0 1px 3px #000;line-height:1.05;white-space:nowrap}

/* ===== Vovó na meta ===== */
.grandma{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:72px;
  display:flex;flex-direction:column;align-items:center;z-index:5}
.grandma-svg{width:66px;height:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.55));
  animation:grbob 2.6s ease-in-out infinite}
@keyframes grbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.grandma .wave-arm{transform-box:fill-box;transform-origin:60px 70px;animation:wave 1.3s ease-in-out infinite}
@keyframes wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-24deg)}}
.grandma.cheer .grandma-svg{animation:grjump .5s ease-in-out 6}
.grandma.cheer .wave-arm{animation:wave .35s ease-in-out infinite}
@keyframes grjump{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.grandma-label{font-family:'Rajdhani';font-weight:700;font-size:9px;letter-spacing:1px;color:#f5c542;
  margin-top:2px;text-shadow:0 1px 2px #000}
.grandma-bubble{position:absolute;bottom:100%;right:-4px;margin-bottom:6px;max-width:130px;
  font-family:'Rajdhani';font-weight:700;font-size:11px;line-height:1.15;color:#0a0e17;text-align:center;
  background:#fff;border:3px solid #0a0e17;border-radius:12px;padding:5px 8px;
  box-shadow:0 3px 0 #0a0e17;white-space:normal}
.grandma-bubble::after{content:"";position:absolute;top:100%;right:22px;
  border:8px solid transparent;border-top-color:#0a0e17}
.grandma-bubble::before{content:"";position:absolute;top:calc(100% - 4px);right:24px;z-index:1;
  border:6px solid transparent;border-top-color:#fff}
@media(max-width:520px){
  .grandma{width:58px}.grandma-svg{width:52px}.grandma-bubble{max-width:104px;font-size:10px}
  .car .veh{width:74px}
}

/* balão de fala do condutor */
.chat{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);white-space:nowrap;z-index:6;
  font-family:'Rajdhani';font-weight:700;font-size:11px;color:#0a0e17;background:#fff;
  border:2.5px solid var(--bc,#333);border-radius:12px;padding:3px 9px;margin-bottom:20px;
  box-shadow:0 3px 0 rgba(0,0,0,.35);animation:chatpop .28s ease-out both}
.chat::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--bc,#333)}
@keyframes chatpop{0%{opacity:0;transform:translateX(-50%) scale(.5) translateY(6px)}100%{opacity:1;transform:translateX(-50%) scale(1)}}

/* tiro na ultrapassagem + encontrão */
.shot{position:absolute;left:100%;top:48%;transform:translateY(-50%);width:16px;height:5px;border-radius:3px;
  background:var(--sc,#ffd23b);box-shadow:0 0 10px 2px var(--sc,#ffd23b);pointer-events:none;
  animation:shoot .55s ease-in forwards}
@keyframes shoot{0%{opacity:0;transform:translate(-6px,-50%) scaleX(.4)}
  20%{opacity:1}100%{opacity:0;transform:translate(72px,-50%) scaleX(1.5)}}
.car.hit .veh-wrap{animation:knock .9s ease}
@keyframes knock{0%{transform:none}15%{transform:translateX(-9px) rotate(-9deg)}
  35%{transform:translateX(5px) rotate(7deg)}60%{transform:rotate(-3deg)}100%{transform:none}}

/* ===== Caramelo, o gato ===== */
.caramelo{position:absolute;right:102px;bottom:-6px;width:48px;
  display:flex;flex-direction:column;align-items:center;z-index:4}
.caramelo-svg{width:46px;height:auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));
  animation:catbob 1.8s ease-in-out infinite}
@keyframes catbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.cat-tail{transform-box:fill-box;transform-origin:12px 48px;animation:tailwag 1.2s ease-in-out infinite}
@keyframes tailwag{0%,100%{transform:rotate(0)}50%{transform:rotate(-16deg)}}
.cat-paw{transform-box:fill-box;transform-origin:52px 44px;animation:pawwave 1s ease-in-out infinite}
@keyframes pawwave{0%,100%{transform:rotate(0)}50%{transform:rotate(-20deg)}}
.caramelo.cheer .caramelo-svg{animation:catjump .4s ease-in-out 8}
@keyframes catjump{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.caramelo-label{font-family:'Rajdhani';font-weight:700;font-size:8px;letter-spacing:1px;color:#f0a83a;
  margin-top:1px;text-shadow:0 1px 2px #000}
.caramelo-bubble{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:5px;
  white-space:nowrap;font-family:'Rajdhani';font-weight:700;font-size:9px;color:#0a0e17;background:#fff;
  border:2px solid #0a0e17;border-radius:9px;padding:2px 6px;box-shadow:0 2px 0 #0a0e17;
  opacity:0;transition:opacity .4s}
.caramelo-bubble.show{opacity:1}
.caramelo-bubble::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#0a0e17}
@media(max-width:520px){.caramelo{right:80px;width:40px}.caramelo-svg{width:38px}}

/* ===== ranking ===== */
.ranking-wrap{margin-top:22px}
.ranking-title{font-family:'Rajdhani';font-weight:700;letter-spacing:2px;color:var(--dim);font-size:13px;margin-bottom:8px}
.ranking{list-style:none;display:flex;flex-direction:column;gap:6px}
.ranking li{
  display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;
  background:#0c1220;border:1px solid var(--line);font-family:'Rajdhani';font-weight:600;
}
.ranking .pos{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;
  background:#1a2334;color:var(--dim)}
.ranking li:first-child .pos{background:var(--gold);color:#0a0e17}
.ranking .rk-name{flex:1}
.ranking .rk-lost{color:var(--gold);font-weight:700}
.ranking .rk-dot{width:12px;height:12px;border-radius:50%}

/* ===== driver cards ===== */
.cards{margin-top:22px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:520px){.cards{grid-template-columns:1fr}}
.card{
  position:relative;background:#0c1220;border:1px solid var(--line);border-radius:16px;
  padding:14px;cursor:pointer;transition:transform .12s ease,border-color .12s ease;
  overflow:hidden;
}
.card:active{transform:scale(.985)}
.card .stripe{position:absolute;left:0;top:0;bottom:0;width:5px}
.card .c-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.card .c-name{font-family:'Racing Sans One',cursive;font-size:20px}
.card .c-title{font-family:'Rajdhani';font-weight:600;font-size:11px;letter-spacing:1px;color:var(--dim);text-transform:uppercase}
.card .c-stats{display:flex;gap:14px;font-family:'Rajdhani';font-weight:600}
.card .c-stats .s{flex:1}
.card .c-stats .s small{display:block;color:var(--dim);font-size:10px;letter-spacing:.5px;text-transform:uppercase}
.card .c-stats .s b{font-size:19px}
.card .c-lost b{color:var(--gold)}
.card .c-bar{height:8px;border-radius:5px;background:#1a2334;margin-top:12px;overflow:hidden}
.card .c-bar i{display:block;height:100%;border-radius:5px;transition:width 1.4s cubic-bezier(.22,.61,.36,1)}
.card .c-cta{margin-top:10px;font-family:'Rajdhani';font-weight:700;font-size:12px;letter-spacing:1px;
  color:var(--accent);text-transform:uppercase}
.card.empty .c-cta{color:var(--gold)}

/* ===== prize / footer ===== */
.prize{margin-top:26px;text-align:center;padding:18px;border-radius:16px;
  background:linear-gradient(180deg,#141c30,#0c1220);border:1px solid var(--line)}
.prize-t{font-family:'Racing Sans One',cursive;font-size:18px;color:var(--gold);letter-spacing:1px}
.prize-d{color:var(--dim);margin-top:8px;font-size:14px;line-height:1.5}
.footer-note{text-align:center;color:#3f4a63;font-size:12px;margin-top:22px;font-family:'Rajdhani';letter-spacing:1px}

/* ===== entry modal ===== */
.entry-box{position:relative;width:100%;max-width:400px;background:#0d1424;border:1px solid var(--line);
  border-radius:20px;padding:26px 22px}
.entry-close{position:absolute;right:14px;top:12px;background:none;border:none;color:var(--dim);font-size:20px;cursor:pointer}
.entry-driver{font-family:'Racing Sans One',cursive;font-size:26px;text-align:center}
.entry-hint{text-align:center;color:var(--dim);font-size:14px;margin:6px 0 18px}
.field{margin-bottom:14px}
.field label{display:block;font-family:'Rajdhani';font-weight:600;font-size:13px;letter-spacing:.5px;
  color:var(--dim);margin-bottom:6px;text-transform:uppercase}
.field.hidden{display:none}

/* ===== event overlay ===== */
.event-layer{position:fixed;inset:0;z-index:80;pointer-events:none;display:flex;align-items:center;justify-content:center}
.event-pop{
  font-family:'Racing Sans One',cursive;text-align:center;color:#fff;
  text-shadow:0 4px 0 #000,0 0 30px var(--accent);
  animation:eventpop 1.8s cubic-bezier(.18,.9,.3,1) both;padding:0 20px;
}
.event-pop .big{font-size:clamp(38px,12vw,84px);line-height:1;letter-spacing:1px}
.event-pop .sub{font-family:'Rajdhani';font-weight:700;font-size:clamp(16px,4.5vw,26px);margin-top:8px;
  color:var(--gold);text-shadow:0 2px 6px #000;letter-spacing:.5px}
@keyframes eventpop{
  0%{transform:scale(.2) rotate(-8deg);opacity:0}
  15%{transform:scale(1.15) rotate(2deg);opacity:1}
  28%{transform:scale(1) rotate(0)}
  80%{transform:scale(1);opacity:1}
  100%{transform:scale(1.05);opacity:0}
}
.event-pop.win .big{color:var(--gold);text-shadow:0 4px 0 #000,0 0 50px var(--gold)}

#fx{position:fixed;inset:0;z-index:79;pointer-events:none}

.hidden{display:none !important}