:root{--noite: #0b1b33;--noite-alta: #14294a;--massinha: #3f6fa8;--ciano: #22d3ee;--pin: #4ade80;--lampada: #f2b25c;--pele: #e9b48d;--creme: #eef3fb;--creme-suave:#a9bdd8;--borda: #1d345c;--display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;--ui: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif}.jogo{background:radial-gradient(120% 90% at 50% 0%,#16305a 0%,var(--noite) 55%,#06101f 100%);color:var(--creme);font-family:var(--ui);min-height:calc(100svh - 60px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px 16px 40px;box-sizing:border-box}.cabecalho{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;justify-content:center;width:min(1000px,100%)}.cabecalho h1{font-family:var(--display);font-weight:800;font-size:clamp(28px,4.6vw,44px);letter-spacing:-.5px;margin:0;color:var(--creme);text-shadow:0 3px 0 #071427}.cabecalho .marca{font-size:12px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:var(--pin);padding-bottom:3px}.moldura{width:min(1000px,100%);padding:12px;border-radius:26px;background:linear-gradient(180deg,#2c4b7d,#1b3157 60%,#142644);box-shadow:0 2px #3c66a4 inset,0 -3px #0d1c33 inset,0 26px 50px -22px #000c1c,0 8px #0a1526;position:relative}.tela{position:relative;border-radius:16px;overflow:hidden;background:#081426;box-shadow:0 0 0 3px #0a1830,0 10px 30px -12px #000 inset;aspect-ratio:16 / 9}canvas{display:block;width:100%;height:100%;touch-action:manipulation}canvas:focus-visible{outline:3px solid var(--pin);outline-offset:-3px}.hud{position:absolute;inset:14px 14px auto;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;pointer-events:none;font-family:var(--display)}.adesivo{background:linear-gradient(180deg,#24406e,#17304f);border-radius:14px;padding:7px 13px 6px;box-shadow:0 2px #38598e inset,0 -2px #0d1c33 inset,0 5px 0 -1px #0a1526;display:flex;align-items:center;gap:9px;font-size:clamp(13px,1.9vw,18px);font-weight:700;line-height:1;white-space:nowrap}.adesivo .rotulo{font-family:var(--ui);font-size:9px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--creme-suave)}.adesivo .valor{font-variant-numeric:tabular-nums}.pin-icone{width:13px;height:17px;flex:none}.hud-esq{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.hud-dir{display:flex;flex-direction:column;gap:8px;align-items:flex-end}.capacetes{display:flex;gap:5px}.capacete{width:17px;height:14px;flex:none}.capacete.gasto{opacity:.22}.barra-fase{width:clamp(120px,22vw,210px);height:9px;border-radius:99px;background:#0d1c33;box-shadow:0 1px #3a5c92 inset;overflow:hidden}.barra-fase i{display:block;height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,var(--ciano),var(--pin));transition:width .14s linear}.aviso-fsm{position:absolute;left:50%;top:16px;transform:translate(-50%);display:flex;align-items:center;gap:10px;padding:8px 16px 7px;border-radius:14px;background:linear-gradient(180deg,#1d64c9,#12408a);box-shadow:0 2px #3d8ae8 inset,0 -2px #0b2a55 inset,0 6px 0 -1px #071b38;font-family:var(--display);font-weight:700;font-size:clamp(12px,1.7vw,16px);pointer-events:none;opacity:0;transition:opacity .18s}.aviso-fsm.ativo{opacity:1}.aviso-fsm .relogio{width:54px;height:7px;border-radius:99px;background:#0a2450;overflow:hidden}.aviso-fsm .relogio i{display:block;height:100%;width:100%;background:var(--pin);border-radius:99px}.painel{position:absolute;inset:0;display:grid;place-items:center;padding:18px;background:color-mix(in srgb,#061021 78%,transparent);backdrop-filter:blur(2px);text-align:center}.painel[hidden]{display:none!important}.cartao{background:linear-gradient(180deg,#24406e,#162c4b);border-radius:20px;padding:clamp(18px,3.4vw,30px) clamp(20px,4vw,40px);box-shadow:0 3px #3a5c92 inset,0 -3px #0d1c33 inset,0 14px 0 -4px #0a1526,0 30px 50px -30px #000;max-width:560px;display:flex;flex-direction:column;gap:14px;align-items:center}.cartao .selo{font-family:var(--ui);font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--pin)}.cartao h2{font-family:var(--display);font-weight:800;font-size:clamp(24px,4vw,36px);margin:0;line-height:1.05;text-wrap:balance;text-shadow:0 3px 0 #0b1c34}.cartao p{margin:0;max-width:46ch;font-size:clamp(13px,1.9vw,15px);line-height:1.55;color:var(--creme-suave)}.cartao p b{color:var(--creme);font-weight:700}.legenda{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;width:100%;margin-top:2px}.legenda div{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:12px;background:#16305a;box-shadow:0 1px #385992 inset;font-size:12px;line-height:1.3;text-align:left;color:var(--creme-suave)}.legenda b{color:var(--creme);display:block;font-size:12.5px}.legenda svg{flex:none}.placar{display:flex;gap:22px;justify-content:center;font-family:var(--display)}.placar div{display:flex;flex-direction:column;gap:2px}.placar .n{font-size:clamp(26px,4.6vw,38px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.placar .t{font-family:var(--ui);font-size:9px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--creme-suave)}button.jogar{font-family:var(--display);font-weight:800;font-size:clamp(16px,2.4vw,21px);color:#08182e;background:linear-gradient(180deg,#5ee89a,#35bf72);border:0;border-radius:14px;padding:13px 32px 12px;cursor:pointer;box-shadow:0 3px #9df3c1 inset,0 6px #1c7a48,0 12px 22px -12px #000;transition:transform 90ms,box-shadow 90ms}button.jogar:hover{transform:translateY(1px);box-shadow:0 3px #9df3c1 inset,0 5px #1c7a48,0 12px 22px -12px #000}button.jogar:active{transform:translateY(4px);box-shadow:0 3px #9df3c1 inset,0 2px #1c7a48}button.jogar:focus-visible{outline:3px solid var(--ciano);outline-offset:3px}.dica{font-size:12px;color:var(--creme-suave);font-family:var(--ui)}.dica kbd{font-family:var(--ui);font-weight:800;font-size:11px;background:#0e2444;border-radius:6px;padding:3px 7px;box-shadow:0 1px #3b5d93 inset,0 2px #081625;color:var(--creme)}.rodape{width:min(1000px,100%);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--creme-suave)}.rodape button{font-family:var(--ui);font-weight:700;font-size:12px;color:var(--creme-suave);background:#16305a;border:0;border-radius:10px;padding:7px 13px;cursor:pointer;box-shadow:0 1px #385992 inset,0 3px #0a1526}.rodape button:hover{color:var(--creme)}.rodape button:focus-visible{outline:2px solid var(--pin);outline-offset:2px}@media(prefers-reduced-motion:reduce){button.jogar,.barra-fase i,.aviso-fsm{transition:none}}