@font-face { font-family: "Luckiest Guy"; src: url(../assets/fonts/LuckiestGuy-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Nunito; src: url(../assets/fonts/Nunito.woff2) format("woff2"); font-weight: 600 900; font-display: swap; }
:root { --tinta: #15121c; --creme: #fff4dc; --ouro: #ffcf3d; --verm: #ff3b4e; --menta: #34e0b0; --azul: #8ec5ff; --rosa: #ff2d95;
  --titulo: "Luckiest Guy", Impact, "Arial Black", sans-serif; --texto: Nunito, system-ui, sans-serif; --u: clamp(5px, 1.05vmin, 11px); }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; background: var(--tinta); color: var(--creme); font-family: var(--texto); font-weight: 800; user-select: none; -webkit-user-select: none; touch-action: none; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#vinheta { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 58%, rgba(10, 8, 20, .42) 100%); }
#clarao { position: fixed; inset: 0; pointer-events: none; background: #cfe9ff; opacity: 0; transition: opacity .35s; }
#clarao.on { opacity: .55; transition: none; }
#linhas { position: fixed; inset: 0; pointer-events: none; opacity: 0; background-size: 100% 100%; will-change: transform, opacity; }
#linhas.on { animation: linhas .16s steps(2) infinite; }
@keyframes linhas { 0% { opacity: .55; transform: scale(1); } 100% { opacity: .35; transform: scale(1.12) rotate(2deg); } }

.tela { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; padding: calc(var(--u) * 3) calc(var(--u) * 4); padding-left: max(calc(var(--u) * 4), env(safe-area-inset-left)); padding-right: max(calc(var(--u) * 4), env(safe-area-inset-right)); }
.tela.on { display: flex; }
.tela.escura { background: rgba(21, 18, 28, .66); backdrop-filter: blur(6px); justify-content: center; gap: calc(var(--u) * 4); }
h2 { font-family: var(--titulo); font-weight: 400; font-size: calc(var(--u) * 6.4); letter-spacing: .02em; color: var(--ouro); text-shadow: 0 .09em 0 var(--tinta), 0 .16em .3em rgba(0, 0, 0, .5); -webkit-text-stroke: calc(var(--u) * .28) var(--tinta); paint-order: stroke fill; }

/* logo */
.logo { font-family: var(--titulo); display: flex; align-items: baseline; gap: .22em; font-size: calc(var(--u) * 9); line-height: 1; transform: rotate(-3deg); filter: drop-shadow(0 .08em 0 var(--tinta)) drop-shadow(0 .2em .3em rgba(0, 0, 0, .55)); }
.logo span { -webkit-text-stroke: .09em var(--tinta); paint-order: stroke fill; }
.logo .ns { color: var(--verm); } .logo .kt { color: var(--ouro); }
.logo .d3 { color: var(--creme); background: var(--rosa); padding: .02em .16em 0; border-radius: .18em; border: .07em solid var(--tinta); font-size: .78em; transform: rotate(7deg) translateY(-.12em); -webkit-text-stroke: 0; }
.logo.grande { font-size: calc(var(--u) * 15); margin-top: calc(var(--u) * 5); animation: pulsa 2.4s ease-in-out infinite; }
@keyframes pulsa { 50% { transform: rotate(-3deg) scale(1.035); } }
#carga { justify-content: center; gap: calc(var(--u) * 4); background: radial-gradient(circle at 50% 40%, #2c2450, var(--tinta) 70%); }
.barra { width: min(70vw, 520px); height: calc(var(--u) * 2.2); border-radius: 99px; background: rgba(255, 244, 220, .14); border: calc(var(--u) * .3) solid var(--tinta); overflow: hidden; }
.barra i { display: block; height: 100%; width: 4%; background: linear-gradient(90deg, var(--verm), var(--ouro)); border-radius: 99px; transition: width .25s; }
#cargaTxt { font-size: calc(var(--u) * 2.2); opacity: .8; }

/* título */
#titulo { justify-content: flex-start; gap: calc(var(--u) * 2.2); background: linear-gradient(180deg, rgba(21, 18, 28, .0) 30%, rgba(21, 18, 28, .55)); }
.sub { font-family: var(--titulo); font-weight: 400; font-size: calc(var(--u) * 2.9); letter-spacing: .12em; color: var(--creme); text-shadow: 0 .12em 0 var(--tinta); }
.menu { display: flex; flex-direction: column; gap: calc(var(--u) * 1.8); margin-top: auto; margin-bottom: calc(var(--u) * 4); align-items: center; }
#pausa .menu { margin: 0; }
.bt { font-family: var(--titulo); font-size: calc(var(--u) * 3.6); color: var(--creme); background: #2b2440; border: calc(var(--u) * .45) solid var(--tinta); border-radius: calc(var(--u) * 2.2); padding: calc(var(--u) * 1.5) calc(var(--u) * 5) calc(var(--u) * 1.1); min-width: calc(var(--u) * 46); cursor: pointer; box-shadow: 0 calc(var(--u) * .9) 0 var(--tinta); transition: transform .08s, box-shadow .08s, background .15s; letter-spacing: .03em; }
.bt.principal { background: var(--verm); }
.bt.pequeno { font-size: calc(var(--u) * 2.9); min-width: 0; padding: calc(var(--u) * 1.1) calc(var(--u) * 3.2) calc(var(--u) * .8); }
.bt:hover, .bt.foco { transform: translateY(calc(var(--u) * -.4)) scale(1.03); background: var(--ouro); color: var(--tinta); }
.bt:active { transform: translateY(calc(var(--u) * .6)); box-shadow: 0 calc(var(--u) * .3) 0 var(--tinta); }
.dica { font-size: calc(var(--u) * 1.9); opacity: .85; text-shadow: 0 1px 0 var(--tinta); margin-bottom: calc(var(--u) * 1); }
.som { position: absolute; top: calc(var(--u) * 2.5); right: calc(var(--u) * 3); width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); border-radius: 50%; border: calc(var(--u) * .4) solid var(--tinta); background: var(--creme); color: var(--tinta); font-size: calc(var(--u) * 3.2); cursor: pointer; }
.som.off { opacity: .45; text-decoration: line-through; }

/* grades de escolha */
.rodape { margin-top: auto; display: flex; gap: calc(var(--u) * 2.5); align-items: center; padding-top: calc(var(--u) * 1.5); }
.grade { display: grid; gap: calc(var(--u) * 1.4); }
#pilotos { align-items: flex-end; }
#pilotos h2 { align-self: flex-start; }
#gradePilotos { grid-template-columns: repeat(4, calc(var(--u) * 12.5)); justify-content: end; margin-top: calc(var(--u) * 1.5); }
.cartao { position: relative; border: calc(var(--u) * .45) solid var(--tinta); border-radius: calc(var(--u) * 1.8); overflow: hidden; background: #2b2440; cursor: pointer; box-shadow: 0 calc(var(--u) * .7) 0 var(--tinta); transition: transform .1s; }
.cartao img, .cartao canvas { display: block; width: 100%; height: auto; }
.cartao.sel { border-color: var(--ouro); transform: scale(1.07); z-index: 2; box-shadow: 0 0 0 calc(var(--u) * .5) var(--ouro), 0 calc(var(--u) * 1) calc(var(--u) * 2.5) rgba(0, 0, 0, .6); }
.ficha { width: calc(var(--u) * 54); background: rgba(21, 18, 28, .78); border: calc(var(--u) * .45) solid var(--tinta); border-radius: calc(var(--u) * 2.2); padding: calc(var(--u) * 1.8) calc(var(--u) * 2.4); backdrop-filter: blur(5px); margin-top: calc(var(--u) * 1); }
.ficha h3 { font-family: var(--titulo); font-weight: 400; font-size: calc(var(--u) * 4.2); line-height: 1; }
.ficha p { font-size: calc(var(--u) * 1.9); opacity: .85; margin: calc(var(--u) * .5) 0 calc(var(--u) * 1.2); }
.attr { display: grid; grid-template-columns: calc(var(--u) * 9) 1fr; align-items: center; gap: calc(var(--u) * .5) calc(var(--u) * 1.2); font-size: calc(var(--u) * 1.8); letter-spacing: .08em; }
.attr span { display: flex; gap: calc(var(--u) * .5); }
.attr span i { flex: 1; height: calc(var(--u) * 1.3); border-radius: 99px; background: rgba(255, 244, 220, .16); }
.attr span i.c { background: var(--ouro); }
#gradePistas { grid-template-columns: repeat(4, 1fr); width: min(100%, calc(var(--u) * 118)); margin-top: calc(var(--u) * 2); }
.cartao.pista { padding: calc(var(--u) * 1) calc(var(--u) * 1.2) calc(var(--u) * 1.2); background: rgba(21, 18, 28, .72); backdrop-filter: blur(4px); display: grid; grid-template-columns: calc(var(--u) * 9) 1fr; gap: calc(var(--u) * 1); align-items: center; text-align: left; }
.cartao.pista b { font-family: var(--titulo); font-weight: 400; font-size: calc(var(--u) * 2.6); line-height: 1.05; display: block; }
.cartao.pista small { font-size: calc(var(--u) * 1.45); opacity: .8; display: block; line-height: 1.2; margin-top: calc(var(--u) * .3); }
.cartao.pista .rec { color: var(--menta); opacity: 1; }
#pistas { background: linear-gradient(180deg, rgba(21, 18, 28, .35), rgba(21, 18, 28, 0) 30%, rgba(21, 18, 28, .0) 55%, rgba(21, 18, 28, .6)); }
#pistas .grade { margin-top: auto; }
#pistas .rodape { margin-top: calc(var(--u) * 1.5); }
.chave { display: flex; align-items: center; gap: calc(var(--u) * 1); font-size: calc(var(--u) * 2.1); cursor: pointer; background: rgba(21, 18, 28, .7); padding: calc(var(--u) * 1) calc(var(--u) * 2); border-radius: 99px; }
.chave input { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); accent-color: var(--ouro); }
#gradeClasses { grid-template-columns: repeat(3, calc(var(--u) * 34)); margin: auto 0; }
.cartao.classe { padding: calc(var(--u) * 2.4); text-align: center; background: rgba(21, 18, 28, .78); backdrop-filter: blur(5px); }
.cartao.classe b { font-family: var(--titulo); font-weight: 400; font-size: calc(var(--u) * 4.4); display: block; color: var(--ouro); }
.cartao.classe em { font-style: normal; font-family: var(--titulo); font-size: calc(var(--u) * 7); display: block; line-height: 1.1; }
.cartao.classe small { font-size: calc(var(--u) * 1.8); opacity: .85; }

/* HUD */
#hud { padding: 0; pointer-events: none; }
#hud > * { position: absolute; }
.topo-esq { top: calc(var(--u) * 1.6); left: max(calc(var(--u) * 2.4), env(safe-area-inset-left)); display: grid; grid-template-columns: auto auto; gap: 0 calc(var(--u) * 2); align-items: end; }
.pos { font-family: var(--titulo); grid-row: span 2; line-height: .9; }
.pos b { font-weight: 400; font-size: calc(var(--u) * 11); color: var(--ouro); -webkit-text-stroke: calc(var(--u) * .5) var(--tinta); paint-order: stroke fill; text-shadow: 0 .07em 0 var(--tinta); display: inline-block; }
.pos b.troca { animation: salta .35s; }
@keyframes salta { 40% { transform: scale(1.35) rotate(-6deg); } }
.pos small { font-size: calc(var(--u) * 3.4); -webkit-text-stroke: calc(var(--u) * .3) var(--tinta); paint-order: stroke fill; }
.volta, .tempo { font-family: var(--titulo); font-size: calc(var(--u) * 3); -webkit-text-stroke: calc(var(--u) * .34) var(--tinta); paint-order: stroke fill; letter-spacing: .04em; }
.volta b { font-weight: 400; color: var(--ouro); }
.tempo { font-variant-numeric: tabular-nums; }
.ordem { grid-column: span 2; list-style: none; margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 1.75); display: grid; gap: calc(var(--u) * .25); width: calc(var(--u) * 22); }
.ordem li { background: rgba(21, 18, 28, .62); border-radius: calc(var(--u) * .8); padding: calc(var(--u) * .2) calc(var(--u) * 1); display: flex; gap: calc(var(--u) * .9); border-left: calc(var(--u) * .7) solid var(--c, #888); }
.ordem li.eu { background: var(--creme); color: var(--tinta); }
.topo-dir { top: calc(var(--u) * 1.6); right: max(calc(var(--u) * 2.4), env(safe-area-inset-right)); display: flex; gap: calc(var(--u) * 1.6); align-items: flex-start; }
#hMapa { width: calc(var(--u) * 17); height: calc(var(--u) * 17); background: rgba(21, 18, 28, .45); border-radius: calc(var(--u) * 2); border: calc(var(--u) * .35) solid rgba(21, 18, 28, .8); }
.item { width: calc(var(--u) * 13); height: calc(var(--u) * 13); border-radius: calc(var(--u) * 2.6); background: rgba(21, 18, 28, .62); border: calc(var(--u) * .5) solid var(--creme); display: grid; place-items: center; position: relative; }
.item img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 calc(var(--u) * .4) 0 rgba(0, 0, 0, .45)); }
.item.roleta img { animation: roleta .12s steps(2) infinite; }
@keyframes roleta { 50% { transform: translateY(-6%) scale(.92); } }
.item.tem { border-color: var(--ouro); animation: brilhaItem .9s ease-in-out infinite; }
@keyframes brilhaItem { 50% { box-shadow: 0 0 calc(var(--u) * 3) var(--ouro); } }
.item span { position: absolute; top: 104%; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: calc(var(--u) * 1.7); background: rgba(21, 18, 28, .7); padding: 0 calc(var(--u) * 1); border-radius: 99px; }
.item span:empty { display: none; }
.baixo-esq { left: max(calc(var(--u) * 2.4), env(safe-area-inset-left)); bottom: calc(var(--u) * 2.2); display: grid; gap: calc(var(--u) * .7); }
.nitros { display: flex; gap: calc(var(--u) * .7); }
.nitros i { width: calc(var(--u) * 3.4); height: calc(var(--u) * 4.4); background: var(--azul); clip-path: polygon(58% 0, 8% 56%, 44% 56%, 30% 100%, 92% 38%, 54% 38%); filter: drop-shadow(0 0 calc(var(--u) * .3) var(--tinta)); }
.nitros i.gasto { background: rgba(255, 244, 220, .22); }
.vel, .derrapa { width: calc(var(--u) * 24); height: calc(var(--u) * 1.7); background: rgba(21, 18, 28, .6); border-radius: 99px; overflow: hidden; border: calc(var(--u) * .25) solid var(--tinta); }
.vel i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--menta), var(--ouro) 70%, var(--verm)); }
.derrapa { height: calc(var(--u) * 1.1); opacity: 0; transition: opacity .15s; } .derrapa.on { opacity: 1; }
.derrapa i { display: block; height: 100%; width: 0; background: var(--azul); } .derrapa.cheio i { background: #ff8a2a; }
.avisos { top: 19%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .6); width: 80%; }
.avisos div { font-family: var(--titulo); font-size: calc(var(--u) * 4.6); -webkit-text-stroke: calc(var(--u) * .5) var(--tinta); paint-order: stroke fill; text-shadow: 0 .09em 0 var(--tinta); animation: aviso 2.2s forwards; white-space: nowrap; }
@keyframes aviso { 0% { transform: scale(.3) rotate(-6deg); opacity: 0; } 9% { transform: scale(1.18) rotate(-2deg); opacity: 1; } 16% { transform: scale(1) rotate(-2deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40%) rotate(-2deg); } }
.contagem { top: 30%; left: 50%; transform: translate(-50%, -50%); font-family: var(--titulo); font-size: calc(var(--u) * 26); color: var(--ouro); -webkit-text-stroke: calc(var(--u) * 1.1) var(--tinta); paint-order: stroke fill; text-shadow: 0 .06em 0 var(--tinta); }
.contagem.bate { animation: bate .9s; }
@keyframes bate { 0% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } 22% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(.7); opacity: 0; } }
.contramao { top: 38%; left: 50%; transform: translateX(-50%); font-family: var(--titulo); font-size: calc(var(--u) * 6); color: var(--verm); -webkit-text-stroke: calc(var(--u) * .5) var(--creme); paint-order: stroke fill; display: none; animation: pisca .5s steps(2) infinite; }
.contramao.on { display: block; }
@keyframes pisca { 50% { opacity: .2; } }
.pausa { top: calc(var(--u) * 1.6); left: 50%; transform: translateX(-50%); width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; border: calc(var(--u) * .4) solid var(--tinta); background: rgba(255, 244, 220, .85); color: var(--tinta); font-family: var(--titulo); font-size: calc(var(--u) * 2.4); pointer-events: auto; cursor: pointer; opacity: .75; }

/* toque */
.toque { display: none; inset: 0; }
.toque button { position: absolute; pointer-events: auto; border-radius: 50%; border: calc(var(--u) * .5) solid rgba(21, 18, 28, .85); background: rgba(255, 244, 220, .3); color: var(--creme); font-family: var(--titulo); font-size: calc(var(--u) * 3); text-shadow: 0 2px 0 var(--tinta); backdrop-filter: blur(2px); }
.toque button.ap { background: rgba(255, 207, 61, .75); transform: scale(.94); }
.t-esq, .t-dir { width: calc(var(--u) * 17); height: calc(var(--u) * 17); bottom: calc(var(--u) * 9); font-size: calc(var(--u) * 6) !important; }
.t-esq { left: max(calc(var(--u) * 3), env(safe-area-inset-left)); } .t-dir { left: calc(max(calc(var(--u) * 3), env(safe-area-inset-left)) + var(--u) * 20); }
.t-gas { width: calc(var(--u) * 19); height: calc(var(--u) * 19); right: max(calc(var(--u) * 3), env(safe-area-inset-right)); bottom: calc(var(--u) * 5); background: rgba(255, 59, 78, .5) !important; }
.t-freio { width: calc(var(--u) * 11); height: calc(var(--u) * 11); right: calc(max(calc(var(--u) * 3), env(safe-area-inset-right)) + var(--u) * 21); bottom: calc(var(--u) * 4); font-size: calc(var(--u) * 2) !important; }
.t-drift { width: calc(var(--u) * 13); height: calc(var(--u) * 13); right: calc(max(calc(var(--u) * 3), env(safe-area-inset-right)) + var(--u) * 17); bottom: calc(var(--u) * 17); font-size: calc(var(--u) * 2.3) !important; }
.t-item { width: calc(var(--u) * 13); height: calc(var(--u) * 13); right: calc(max(calc(var(--u) * 3), env(safe-area-inset-right)) + var(--u) * 2); bottom: calc(var(--u) * 26); font-size: calc(var(--u) * 2.4) !important; background: rgba(255, 207, 61, .45) !important; }
.t-nitro { width: calc(var(--u) * 11); height: calc(var(--u) * 11); right: calc(max(calc(var(--u) * 3), env(safe-area-inset-right)) + var(--u) * 17); bottom: calc(var(--u) * 31); font-size: calc(var(--u) * 2) !important; background: rgba(142, 197, 255, .45) !important; }
.toq { display: none; }
.bt.zap { background: #1fae5b; }
#resultado .rodape { flex-wrap: wrap; justify-content: flex-end; }
@media (pointer: coarse) { .toque { display: block; } .pc { display: none; } .toq { display: block; } .baixo-esq { bottom: auto; top: calc(var(--u) * 30); } .ordem { display: none; } }

/* resultado */
#resultado { background: linear-gradient(90deg, rgba(21, 18, 28, 0) 35%, rgba(21, 18, 28, .72) 62%); align-items: flex-end; }
#resultado h2 { align-self: flex-end; }
.placar { width: calc(var(--u) * 58); display: grid; gap: calc(var(--u) * .7); margin-top: calc(var(--u) * 2); }
.placar .lin { display: grid; grid-template-columns: calc(var(--u) * 5) calc(var(--u) * 5.4) 1fr auto auto; align-items: center; gap: calc(var(--u) * 1.2); background: rgba(21, 18, 28, .78); border-radius: calc(var(--u) * 1.4); padding: calc(var(--u) * .5) calc(var(--u) * 1.6) calc(var(--u) * .5) calc(var(--u) * 1); font-size: calc(var(--u) * 2.2); border: calc(var(--u) * .3) solid transparent; animation: entra .4s backwards; }
.placar .lin.eu { border-color: var(--ouro); background: rgba(60, 44, 20, .9); }
.placar .lin b { font-family: var(--titulo); font-weight: 400; font-size: calc(var(--u) * 3.2); color: var(--ouro); text-align: center; }
.placar .lin img { width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); border-radius: 50%; object-fit: cover; border: calc(var(--u) * .3) solid var(--tinta); }
.placar .lin span { font-variant-numeric: tabular-nums; opacity: .9; }
.placar .lin em { font-style: normal; color: var(--menta); font-family: var(--titulo); }
.placar .nota { text-align: right; font-size: calc(var(--u) * 2); color: var(--menta); min-height: 1.2em; }
@keyframes entra { from { transform: translateX(30%); opacity: 0; } }
#gira { position: fixed; inset: 0; background: var(--tinta); display: none; place-items: center; font-family: var(--titulo); font-size: 7vw; text-align: center; padding: 10vw; z-index: 50; }
@media (orientation: portrait) and (pointer: coarse) { #gira { display: grid; } }