/* ============================================================
   Drift GP - interface
   ============================================================ */
:root{
  --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);
  --bg:#0e1116; --panel:#181c24; --panel2:#1f242e;
  --line:#2b313c; --txt:#eef1f5; --dim:#98a2b3;
  --acc:#ffd166; --acc2:#e5453a; --ok:#4ade80;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--txt);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:none}
canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none !important}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}

/* aviso de versão nova (aparece quando a recarga automática não resolveu) */
#update-bar{position:fixed;left:50%;top:calc(10px + var(--sat));transform:translateX(-50%);
  z-index:20;background:var(--acc);color:#241a02;border-radius:999px;padding:9px 18px;
  font-size:13px;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.5);cursor:pointer;
  max-width:calc(100vw - 32px);text-align:center}

/* ---------------- HUD ---------------- */
#hud{position:fixed;inset:0;pointer-events:none;
  padding:calc(8px + var(--sat)) calc(10px + var(--sar)) 0 calc(10px + var(--sal))}

/* painel único no topo, em vez de pastilhas soltas */
.hud-bar{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:16px;
  background:rgba(14,17,22,.66);border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(10px);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.icon-btn{flex:0 0 auto;width:34px;height:34px;border-radius:11px;pointer-events:auto;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
  font-weight:900;font-size:12px;letter-spacing:1px}
.hud-id{flex:0 0 auto;line-height:1.1;min-width:0;max-width:96px}
.hud-id span{display:block;font-weight:800;font-size:12px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.hud-id em{display:block;font-style:normal;font-size:8px;letter-spacing:1.3px;color:var(--acc);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wet-chip{flex:0 0 auto;font-size:15px;line-height:1;filter:drop-shadow(0 0 6px rgba(120,180,230,.7))}
.hud-stats{flex:1;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.stat{padding:2px 7px;text-align:right;border-radius:9px;background:rgba(255,255,255,.05)}
.stat span{display:block;font-size:7px;letter-spacing:1.2px;color:var(--dim)}
.stat b{display:block;font-size:13px;font-variant-numeric:tabular-nums;line-height:1.15}
.stat.invalid{background:rgba(229,69,58,.22)}
.stat.invalid b{color:#ff8a7d}

/* velocímetro com barra */
.speedo{position:fixed;left:calc(16px + var(--sal));bottom:calc(126px + var(--sab));
  text-shadow:0 2px 10px rgba(0,0,0,.75);pointer-events:none}
/* conta-giros com luz de troca */
.rev{width:132px;height:6px;border-radius:4px;background:rgba(255,255,255,.14);
  overflow:hidden;margin-bottom:6px}
.rev i{display:block;height:100%;width:0;border-radius:4px;background:#6ec8ff;
  transition:width .05s linear,background .08s linear}
.rev.corte i{background:#e5453a;box-shadow:0 0 12px rgba(229,69,58,.9)}
.speedo-num{display:flex;align-items:flex-end;gap:5px}
.speedo-num>b{font-size:44px;font-weight:900;font-variant-numeric:tabular-nums;line-height:.86}
.speedo-num>span{font-size:11px;color:var(--dim);letter-spacing:1px;padding-bottom:5px}
/* seletor de filho direto: sem isso a regra do velocímetro, que vem
   depois, sobrescrevia o tamanho do número da marcha */
.gear{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  margin-left:12px;padding-left:12px;border-left:1px solid rgba(255,255,255,.20)}
.gear>em{font-style:normal;font-size:7px;letter-spacing:1.3px;color:var(--dim);line-height:1.5}
.gear>b{font-size:30px;font-weight:900;line-height:.9;color:var(--acc);
  font-variant-numeric:tabular-nums}
.speedo-bar{width:104px;height:4px;border-radius:3px;margin-top:5px;overflow:hidden;
  background:rgba(255,255,255,.16)}
.speedo-bar i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,#4ade80,#ffd166 62%,#e5453a);transition:width .09s linear}
.tyre-bar{position:relative;width:104px;height:4px;border-radius:3px;margin-top:7px;
  background:rgba(255,255,255,.16);overflow:visible}
.tyre-bar i{display:block;height:100%;width:100%;border-radius:3px;background:#8ad6a0;
  transition:width .3s linear,background .3s linear}
.tyre-bar span{position:absolute;left:0;top:6px;font-size:7px;letter-spacing:1.3px;color:var(--dim)}
body.landscape .speedo{bottom:calc(18px + var(--sab));left:calc(206px + var(--sal))}
body.landscape .speedo-num>b{font-size:34px}
body.landscape .gear>b{font-size:24px}

/* aviso dos boxes */
#pit-msg{position:fixed;left:50%;top:calc(150px + var(--sat));transform:translateX(-50%);
  background:rgba(10,12,16,.86);border:1px solid var(--acc);border-radius:14px;
  padding:9px 18px;font-weight:800;font-size:14px;color:var(--acc);white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.5);text-align:center}
#pit-msg b{display:block;font-size:22px;color:#fff;font-variant-numeric:tabular-nums}
body.landscape #pit-msg{top:calc(96px + var(--sat))}

/* luzes de largada, como as cinco da F1 */
#start-lights{position:fixed;left:50%;top:26%;transform:translateX(-50%);
  display:flex;gap:10px;padding:12px 14px;border-radius:16px;
  background:rgba(10,12,16,.80);border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 40px rgba(0,0,0,.55)}
#start-lights i{width:26px;height:26px;border-radius:50%;background:#23262d;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.9);transition:background .1s,box-shadow .1s}
#start-lights i.on{background:radial-gradient(circle at 38% 32%,#ff6a5a,#c81e10);
  box-shadow:0 0 18px rgba(229,69,58,.85),inset 0 1px 2px rgba(255,255,255,.35)}
@media (max-width:380px){ #start-lights i{width:21px;height:21px} #start-lights{gap:8px} }
/* telas estreitas: o painel tem de caber numa linha, senão cobre o minimapa.
   A melhor volta é a informação mais dispensável durante a corrida. */
@media (max-width:400px){
  .hud-bar{gap:5px;padding:5px 6px}
  .hud-id{max-width:66px}
  .hud-id span{font-size:11px}
  .stat{padding:2px 5px}
  .stat b{font-size:12px}
  #hud-best-wrap{display:none}
}
#toast{position:fixed;left:50%;top:calc(206px + var(--sat));transform:translate(-50%,-8px);
  background:rgba(16,19,25,.85);border:1px solid rgba(255,255,255,.12);border-radius:999px;
  padding:7px 16px;font-weight:800;font-size:13px;opacity:0;transition:.25s;white-space:nowrap}
#toast.show{opacity:1;transform:translate(-50%,0)}
body.landscape #toast{top:calc(150px + var(--sat))}

/* ---------------- controles de toque ---------------- */
#touch{position:fixed;inset:0;pointer-events:none}
.pad{position:fixed;bottom:calc(14px + var(--sab));pointer-events:auto}
.pad-left{left:calc(14px + var(--sal));display:flex;flex-direction:column;gap:10px;
  align-items:flex-start}
.pad-left .steers{display:flex;gap:10px}
.pad-left .gears{display:flex;gap:10px}
.tbtn.gearbtn{width:56px;height:44px;border-radius:14px;font-size:17px;
  background:rgba(28,33,42,.62);border-color:rgba(255,209,102,.35)}
.pad-right{right:calc(14px + var(--sar));display:grid;gap:10px;
  grid-template-areas:"drf drf" "brk gas";justify-items:stretch;align-items:end}
.pad-right .drift{grid-area:drf}
.pad-right .pedal-brake{grid-area:brk}
.pad-right .pedal-gas{grid-area:gas}

/* ---------------- pedais ----------------
   O pedal é uma placa inclinada sobre um alojamento. Ao pisar, ela gira
   no eixo de cima e afunda: é a rotação que dá a sensação de curso. */
.pedal{position:relative;width:84px;height:116px;padding:0;border:0;background:none;
  perspective:500px;perspective-origin:50% 12%}
.pedal-brake{width:70px;height:104px}
.pedal-base{position:absolute;left:5px;right:5px;top:12px;bottom:0;border-radius:11px;
  background:linear-gradient(180deg,#13161c,#0a0c10);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 10px 20px rgba(0,0,0,.75)}
.pedal-pad{position:absolute;left:0;right:0;top:0;height:calc(100% - 12px);
  transform-origin:50% 0%;
  /* --press (0..1) vem do JS: o pedal afunda conforme o dedo desce nele */
  transform:rotateX(calc(40deg - var(--press,0) * 36deg)) translateZ(10px)
    translateY(calc(var(--press,0) * 13px));
  transition:transform .09s cubic-bezier(.3,.7,.4,1), box-shadow .09s ease-out;
  border-radius:13px;display:flex;flex-direction:column;align-items:center;
  justify-content:space-evenly;padding:12px 9px 8px;
  background:linear-gradient(180deg,var(--ped-hi),var(--ped-lo));
  border:1.5px solid var(--ped-edge);
  box-shadow:0 12px 20px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.22)}
/* ranhuras antiderrapantes */
.pedal-pad i{display:block;width:74%;height:3px;border-radius:2px;
  background:rgba(0,0,0,.34);box-shadow:0 1px 0 rgba(255,255,255,.14)}
.pedal-pad b{font-size:11px;font-weight:900;letter-spacing:1.2px;color:var(--ped-txt);
  text-shadow:0 1px 2px rgba(0,0,0,.6);margin-top:2px}
/* pisado: gira para perto do plano, desce e acende */
.pedal.down .pedal-pad{box-shadow:0 3px 7px rgba(0,0,0,.6),
  inset 0 1px 0 rgba(255,255,255,.12),0 0 22px var(--ped-glow)}
.pedal.down .pedal-base{box-shadow:inset 0 10px 20px rgba(0,0,0,.85),0 0 14px var(--ped-glow)}
.pedal-gas{--ped-hi:#33413a;--ped-lo:#18211c;--ped-edge:rgba(74,222,128,.55);
  --ped-glow:rgba(74,222,128,.40);--ped-txt:#bff3d1}
.pedal-brake{--ped-hi:#41322f;--ped-lo:#211918;--ped-edge:rgba(229,69,58,.55);
  --ped-glow:rgba(229,69,58,.40);--ped-txt:#f7c4bd}

/* freio de mão: barra com alavanca, acima dos pedais */
.pad-right .drift{width:100%;height:48px;border-radius:15px;font-size:12px;
  display:flex;align-items:center;justify-content:center;gap:8px}
.pad-right .drift .lever{width:16px;height:5px;border-radius:3px;background:var(--acc2);
  transform:rotate(-22deg);transition:transform .09s ease-out;box-shadow:0 0 8px rgba(229,69,58,.5)}
.pad-right .drift.down .lever{transform:rotate(-52deg) translate(1px,-2px)}
.pad-hint{position:fixed;right:calc(18px + var(--sar));bottom:calc(200px + var(--sab));
  font-size:10px;color:rgba(255,255,255,.45);letter-spacing:.3px;pointer-events:none;
  text-shadow:0 1px 6px rgba(0,0,0,.8);animation:fadeAway 1s ease 6s forwards}
.pad-hint b{color:var(--acc2)}
@keyframes fadeAway{to{opacity:0}}
body.landscape .pad-hint{bottom:calc(176px + var(--sab))}
.tbtn{width:78px;height:78px;border-radius:50%;font-weight:900;font-size:15px;
  background:rgba(28,33,42,.60);border:1.5px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);transition:transform .07s,background .07s;display:grid;place-items:center}
.tbtn.down{transform:scale(.93);background:rgba(255,209,102,.28);border-color:var(--acc)}
.tbtn.steer{font-size:26px}
.tbtn.gas{width:92px;height:92px;background:rgba(74,222,128,.20);border-color:rgba(74,222,128,.45)}
.tbtn.drift{background:rgba(229,69,58,.20);border-color:rgba(229,69,58,.45);font-size:13px}
.tbtn.brake{width:64px;height:64px;font-size:12px}
@media (max-height:430px){
  .tbtn{width:64px;height:64px}
  .pedal{width:74px;height:92px} .pedal-brake{width:62px;height:84px}
  .pad-right .drift{height:40px}
}
@media (max-width:380px){
  .tbtn{width:68px;height:68px}
  .pedal{width:74px;height:104px} .pedal-brake{width:62px;height:94px}
}

/* ---------------- telas ---------------- */
.screen{position:fixed;inset:0;display:grid;place-items:center;padding:calc(16px + var(--sat)) 16px calc(16px + var(--sab));
  background:radial-gradient(120% 90% at 50% 0%,#1b2130 0%,#0b0e13 70%);overflow-y:auto;z-index:5}
.panel{width:min(430px,100%);background:var(--panel);border:1px solid var(--line);border-radius:22px;
  padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.55);margin:auto}
.panel.wide{width:min(760px,100%)}
.panel.small{width:min(360px,100%)}
.logo{display:flex;align-items:baseline;gap:8px;justify-content:center;margin-bottom:2px}
.logo span{font-weight:900;font-size:34px;letter-spacing:-1px}
.logo b{font-weight:900;font-size:34px;color:var(--acc);letter-spacing:-1px}
.tagline{text-align:center;color:var(--dim);font-size:13px;margin:0 0 18px}
h2{margin:0 0 16px;font-size:20px;text-align:center}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.pick-btn{background:var(--panel2);border:1px solid var(--line);border-radius:16px;padding:12px;text-align:left}
.pick-btn span{display:block;font-size:9px;letter-spacing:1.6px;color:var(--dim)}
.pick-btn b{display:block;font-size:16px;margin:2px 0}
.pick-btn em{display:block;font-style:normal;font-size:11px;color:var(--acc)}
.pick-btn:active{transform:scale(.98)}
.modes{display:grid;gap:9px}
.big{width:100%;padding:15px;border-radius:16px;background:var(--panel2);border:1px solid var(--line);
  font-size:16px;font-weight:800}
.big.primary{background:linear-gradient(180deg,#ffd977,#f0b429);color:#241a02;border-color:#f0b429}
.big:active{transform:scale(.985)}
.ghost{display:block;width:100%;margin-top:10px;padding:12px;border-radius:14px;color:var(--dim);
  background:transparent;border:1px solid var(--line);font-weight:700;font-size:14px}
.ghost.danger{color:#f87171;border-color:#43272a}
.hint{margin:16px 0 0;text-align:center;color:#66707f;font-size:11px;line-height:1.7}
.hint kbd{background:#242a34;border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:10px}
@media (max-width:520px){ .hint{display:none} }

/* ---------------- cartões ---------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-bottom:14px}
.card{display:flex;gap:10px;align-items:center;text-align:left;padding:9px;border-radius:16px;
  background:var(--panel2);border:1.5px solid var(--line)}
.card.active{border-color:var(--acc);background:#262b33}
.card:active{transform:scale(.99)}
.thumb{width:76px;height:56px;border-radius:10px;flex:0 0 auto;background:#000}
.card-info{min-width:0;flex:1}
.card-info h3{margin:0;font-size:14px}
.card-info p{margin:2px 0 0;font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-info .meta{color:var(--acc);font-size:10px}
.card-info .dim{color:var(--dim)}
.bar{display:flex;align-items:center;gap:6px;margin-top:3px}
.bar span{font-size:9px;color:var(--dim);width:46px}
.bar i{flex:1;height:4px;background:#333a45;border-radius:3px;overflow:hidden}
.bar u{display:block;height:100%;background:var(--acc);text-decoration:none}

/* ---------------- opções ---------------- */
.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px;border-radius:14px;background:var(--panel2);border:1px solid var(--line);margin-bottom:8px}
.opt span{font-size:14px;font-weight:700}
.opt em{display:block;font-style:normal;font-size:11px;color:var(--dim);font-weight:400;margin-top:1px}
.opt input[type=checkbox]{width:46px;height:27px;appearance:none;background:#333a45;border-radius:99px;position:relative;transition:.2s;flex:0 0 auto}
.opt input[type=checkbox]:checked{background:var(--acc)}
.opt input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;
  border-radius:50%;background:#fff;transition:.2s}
.opt input[type=checkbox]:checked::after{left:22px}
.opt.range input[type=range]{width:110px;accent-color:var(--acc)}
.opt.range b{min-width:52px;text-align:right;font-size:13px;color:var(--acc)}

/* ---------------- temporada ---------------- */
.big.story{background:linear-gradient(180deg,#ffe08a,#f0b429);color:#241a02;border-color:#f0b429}
.season-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.season-head h2{margin:0;text-align:left}
.season-head .tagline{margin:2px 0 0;text-align:left}
.season-badge{background:var(--panel2);border:1px solid var(--line);border-radius:14px;
  padding:8px 12px;text-align:right;flex:0 0 auto}
.season-badge span{display:block;font-size:8px;letter-spacing:1.4px;color:var(--dim)}
.season-badge b{display:block;font-size:22px;color:var(--acc);font-variant-numeric:tabular-nums}
.tabs{display:flex;gap:6px;margin-bottom:12px}
.tab{flex:1;padding:9px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);
  font-size:13px;font-weight:700;color:var(--dim)}
.tab.active{color:var(--txt);border-color:var(--acc);background:#262b33}
.season-body{max-height:46vh;overflow-y:auto;margin-bottom:14px;-webkit-overflow-scrolling:touch}
.round{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;
  background:var(--panel2);border:1px solid var(--line);margin-bottom:7px}
.round.next{border-color:var(--acc)}
.round.done{opacity:.62}
.round-n{width:26px;height:26px;border-radius:8px;background:#333a45;display:grid;place-items:center;
  font-size:11px;font-weight:800;flex:0 0 auto}
.round.next .round-n{background:var(--acc);color:#241a02}
.round-info{flex:1;min-width:0}
.round-info b{display:block;font-size:14px}
.round-info span{display:block;font-size:11px;color:var(--dim)}
.round-res{font-size:13px;font-weight:800;color:var(--acc);flex:0 0 auto}
.stand{display:flex;align-items:center;gap:9px;padding:8px 10px;border-bottom:1px solid var(--line);font-size:13px}
.stand.me{background:#262b33;border-radius:10px;border-bottom-color:transparent}
.stand .pos{width:22px;color:var(--dim);font-variant-numeric:tabular-nums;flex:0 0 auto}
.stand .dot{width:4px;height:22px;border-radius:2px;flex:0 0 auto}
.stand .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stand .who em{font-style:normal;color:var(--dim);font-size:11px}
.stand .pts{font-weight:800;font-variant-numeric:tabular-nums;flex:0 0 auto}
.classif{max-height:38vh;overflow-y:auto;margin-bottom:14px}
.champion{text-align:center;padding:14px 0 4px}
.champion .cup{font-size:44px;line-height:1}
.champion b{display:block;font-size:19px;margin-top:6px}
.champion span{display:block;font-size:13px;color:var(--dim);margin-top:2px}

/* ---------------- resultados ---------------- */
.rows{margin:4px 0 16px}
.rows .row{display:flex;justify-content:space-between;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line);font-size:14px}
.rows .row span{color:var(--dim)}
.rows .row b{font-variant-numeric:tabular-nums}