:root {
  --tinta: #2a1f2e;
  --tinta2: #5a4a5e;
  --papel: #fff7ec;
  --vidro: rgba(255, 248, 238, 0.94);
  --quente: #ff6b3d;
  --quente2: #d4461f;
  --amarelo: #ffc233;
  --verde: #3fae4a;
  --roxo: #2a2f7a;
  --ceu1: #3a7bd5;
  --ceu2: #9fd8ff;
  --sombra: 0 14px 40px rgba(42, 31, 46, 0.22), 0 2px 6px rgba(42, 31, 46, 0.08);
  --display: 'Titan One', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
  --texto: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: var(--texto); font-weight: 700; color: var(--tinta);
  background: linear-gradient(180deg, var(--roxo), var(--ceu1) 45%, var(--ceu2));
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
kbd { font: 800 12px/1 var(--texto); background: #fff; border-radius: 6px; padding: 3px 6px; box-shadow: 0 2px 0 #dccab4; white-space: nowrap; }

#cena { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#rotulos { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.rotulo { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 2px; will-change: transform; }
.rotulo b { font: 900 12px var(--texto); color: #fff; background: rgba(42, 31, 46, 0.72); border-radius: 8px; padding: 2px 8px; white-space: nowrap; box-shadow: inset 0 -2px 0 var(--cor); }
.rotulo i { display: block; width: 44px; height: 5px; border-radius: 3px; background: rgba(42, 31, 46, 0.45); overflow: hidden; }
.rotulo s { display: block; height: 100%; background: #5be37a; transition: width 0.3s; }
.rotulo s.media { background: #ffc233; } .rotulo s.baixa { background: #ff5a4e; }
.rotulo.vez b { background: var(--cor); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.rotulo.vez::before { content: '▼'; color: var(--cor); font-size: 14px; line-height: 1; filter: drop-shadow(0 1px 0 #2a1f2e); animation: pula-seta 0.7s ease-in-out infinite alternate; }
@keyframes pula-seta { to { transform: translateY(-4px); } }
.texto-flutuante { position: absolute; left: 0; top: 0; font-family: var(--display); font-size: 24px; -webkit-text-stroke: 5px var(--tinta); paint-order: stroke fill; white-space: nowrap; will-change: transform, opacity; letter-spacing: 0.02em; }
.texto-flutuante.grande { font-size: 32px; }

#carregando { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 16px; background: linear-gradient(180deg, var(--roxo), var(--ceu1) 50%, var(--ceu2)); color: #fff; font-size: 16px; font-weight: 900; text-shadow: 0 2px 0 rgba(42, 31, 46, 0.3); }
.carregando-trilho { width: 180px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.3); overflow: hidden; }
.carregando-trilho i { display: block; height: 100%; width: 0; background: var(--amarelo); transition: width .3s; }
.mamona-carregando { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8a623f, #4a2f1c 70%); border: 3px solid var(--tinta); animation: arco 0.9s cubic-bezier(.3,.1,.7,1) infinite; }
@keyframes arco { 0% { transform: translate(-60px, 20px) rotate(0); } 50% { transform: translate(0, -30px) rotate(180deg); } 100% { transform: translate(60px, 20px) rotate(360deg); } }

/* ─── Botões ─────────────────────────────────────────────────────────────────── */
.bt {
  --fundo: #fff; --borda: #e6d4bd;
  appearance: none; border: 0; cursor: pointer; background: var(--fundo); color: var(--tinta);
  border-radius: 999px; padding: 12px 22px; font-weight: 900; font-size: 16px;
  box-shadow: 0 4px 0 var(--borda), 0 8px 18px rgba(42, 31, 46, 0.12);
  transition: transform 0.12s, box-shadow 0.12s, background 0.2s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
}
.bt:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--borda), 0 12px 24px rgba(42, 31, 46, 0.16); }
.bt:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--borda), 0 4px 10px rgba(42, 31, 46, 0.1); }
.bt:focus-visible { outline: 4px solid var(--amarelo); outline-offset: 3px; }
.bt.primario { --fundo: var(--quente); --borda: var(--quente2); color: #fff; }
.bt.escuro { --fundo: var(--tinta); --borda: #000; color: #fff; }
.bt.fantasma { --fundo: rgba(255, 255, 255, 0.65); --borda: rgba(42, 31, 46, 0.14); box-shadow: 0 3px 0 var(--borda); backdrop-filter: blur(6px); }
.bt.grande { padding: 16px 30px; font-size: 20px; border-radius: 22px; }
.bt.pequeno { padding: 8px 14px; font-size: 14px; }
.bt:disabled { opacity: 0.45; pointer-events: none; }

.icone {
  width: 42px; height: 42px; border-radius: 14px; border: 0; cursor: pointer; font-size: 18px;
  background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(8px);
  box-shadow: 0 3px 0 rgba(42, 31, 46, 0.14); display: grid; place-items: center;
}
.icone.desligado { opacity: 0.45; }
.icone:hover { background: #fff; }

/* ─── Topo ───────────────────────────────────────────────────────────────────── */
#topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); pointer-events: none;
}
#topo > * { pointer-events: auto; }
.marca-fliper {
  font-family: var(--texto); font-weight: 900; font-size: 19px; text-decoration: none; color: var(--tinta);
  background: rgba(255, 255, 255, 0.72); padding: 7px 14px; border-radius: 14px; backdrop-filter: blur(8px);
  box-shadow: 0 3px 0 rgba(42, 31, 46, 0.14); letter-spacing: -0.01em;
}
.marca-fliper b { background: linear-gradient(90deg, #8b5cf6, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topo-acoes { display: flex; gap: 8px; margin-left: auto; align-items: center; }
body.jogando .marca-fliper, body.jogando #bt-musica, body.jogando #bt-som, body.jogando #bt-tela, body.jogando #bt-conta { display: none; }

.conta-chip { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px 0 5px; border-radius: 14px; border: 0; cursor: pointer; background: rgba(255, 255, 255, 0.78); color: var(--tinta); font: 900 14px var(--texto); backdrop-filter: blur(8px); box-shadow: 0 3px 0 rgba(42, 31, 46, 0.14); }
.conta-chip:not(:has(.avatar)) { padding: 0 16px; background: #8b5cf6; color: #fff; }
.conta-chip .avatar, .on-conta .avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #8b5cf6; flex: none; }
.conta-chip .avatar img, .conta-chip .avatar svg, .on-conta .avatar img, .on-conta .avatar svg { width: 100%; height: 100%; object-fit: cover; }
.conta-chip .inicial, .on-conta .inicial { font: 900 15px var(--texto); color: #fff; }
.on-conta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--papel); border-radius: 14px; padding: 10px 12px; box-shadow: inset 0 0 0 2px #f0e0cb; }
.on-conta small { display: block; font-size: 12px; color: var(--tinta2); font-weight: 700; }
.on-conta:empty { display: none; }

/* ─── Telas ──────────────────────────────────────────────────────────────────── */
.tela { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.tela > * { pointer-events: auto; }
.tela.modal { z-index: 40; display: flex; background: rgba(42, 31, 46, 0.32); backdrop-filter: blur(3px); pointer-events: auto; overflow-y: auto; padding: 16px; }
.tela.modal > .cartao { margin: auto; }
.cartao { background: var(--vidro); backdrop-filter: blur(14px); border-radius: 28px; box-shadow: var(--sombra); border: 1px solid rgba(255, 255, 255, 0.8); padding: 24px; }
.pequeno-cartao { display: grid; gap: 12px; width: min(380px, 100%); text-align: center; }
.pequeno-cartao h2 { font-family: var(--display); font-weight: 400; font-size: 42px; margin: 0 0 6px; letter-spacing: 0.02em; }
.checks { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; }
.check { display: flex; gap: 10px; align-items: center; justify-content: center; font-size: 15px; color: var(--tinta2); padding: 4px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--quente); }
.dica { text-align: center; color: var(--tinta2); font-size: 14px; margin: 0; min-height: 1em; }
.ajuda-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.ajuda-cab h2 { font-family: var(--display); font-weight: 400; font-size: 38px; margin: 0; letter-spacing: 0.02em; }
.segmento { display: flex; background: var(--papel); border-radius: 12px; padding: 3px; gap: 2px; box-shadow: inset 0 0 0 2px #f0e0cb; }
.segmento button { border: 0; background: none; cursor: pointer; font-weight: 900; font-size: 14px; padding: 7px 12px; border-radius: 9px; color: var(--tinta2); }
.segmento button.sel { background: var(--tinta); color: #fff; }
.segmento.mapas { flex-wrap: wrap; }
.segmento.mapas button { flex: 1 1 auto; padding: 7px 8px; font-size: 13px; }
.op-linha { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.op-linha > span { font-size: 15px; color: var(--tinta2); }
.campo { display: grid; gap: 6px; font-size: 13px; color: var(--tinta2); }
.campo input { font: 800 18px var(--texto); border: 0; border-radius: 12px; padding: 10px 14px; background: #fff; box-shadow: inset 0 0 0 2px #f0e0cb; color: var(--tinta); min-width: 0; }
.opcoes-cartao { display: grid; gap: 14px; width: min(460px, 100%); }
.opcoes-cartao .bt.grande { margin-top: 4px; }

.seletor-personagem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.personagem { position: relative; border: 0; cursor: pointer; border-radius: 16px; padding: 0 0 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 35%, #fff), #fff 70%); box-shadow: 0 3px 0 #e6d4bd, inset 0 0 0 2px #f0e0cb; display: grid; justify-items: center; overflow: hidden; transition: transform .12s, box-shadow .12s; }
.personagem img, .personagem .sem-retrato { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.personagem .sem-retrato { background: radial-gradient(circle at 50% 40%, var(--cor) 0 28%, transparent 29%); }
.personagem b { font: 900 13px var(--texto); color: var(--tinta); white-space: nowrap; }
.personagem:hover { transform: translateY(-2px); }
.personagem.sel { box-shadow: 0 0 0 3px var(--cor), 0 4px 0 var(--tinta); transform: translateY(-3px); }
.personagem:disabled { opacity: .35; cursor: default; transform: none; }
.seletor-montaria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.montaria { border: 0; cursor: pointer; border-radius: 14px; padding: 6px 6px 8px; background: linear-gradient(180deg, #ffe9d6, #fff 65%); box-shadow: 0 3px 0 #e6d4bd, inset 0 0 0 2px #f0e0cb; display: grid; justify-items: center; gap: 2px; transition: transform .12s, box-shadow .12s; }
.montaria svg { width: 46px; height: 30px; }
.montaria .foto-montaria { width: 100%; max-width: 96px; aspect-ratio: 1; object-fit: contain; display: block; margin: -4px 0 -6px; }
.vaga-montaria .foto-montaria { width: 38px; height: 38px; object-fit: contain; display: block; }
.combustivel .comb-icone .foto-montaria { width: 26px; height: 26px; object-fit: contain; display: block; }
.montaria b { font: 900 12px var(--texto); color: var(--tinta); white-space: nowrap; }
.montaria .barra { width: 100%; display: grid; gap: 1px; }
.montaria .barra small { font-size: 8.5px; font-weight: 800; color: var(--tinta2); text-align: left; line-height: 1; }
.montaria .barra i { display: block; height: 4px; border-radius: 2px; background: var(--quente); }
.montaria.sel { box-shadow: 0 0 0 3px var(--quente), 0 4px 0 var(--tinta); transform: translateY(-3px); }
.montaria-desc { font-weight: 700; color: var(--tinta2); margin-left: 6px; }
.vaga-montaria svg { width: 30px; height: 20px; display: block; }
.escape { pointer-events: auto; border: 0; cursor: pointer; border-radius: 12px; padding: 4px 14px; display: grid; justify-items: center; line-height: 1.05; background: rgba(42, 31, 46, 0.6); color: rgba(255,255,255,.6); font-family: var(--texto); }
.escape b { font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: .03em; }
.escape small { font-size: 10px; font-weight: 800; }
.escape.pronto { background: linear-gradient(180deg, #4cc9f0, #3a86ff); color: #fff; box-shadow: 0 3px 0 #1f4fb0; animation: brilho-fuga 1.6s ease-in-out infinite; }
@keyframes brilho-fuga { 50% { filter: brightness(1.15); } }
body.toque .escape { position: fixed; right: calc(max(20px, env(safe-area-inset-right)) + 112px); bottom: calc(max(20px, env(safe-area-inset-bottom)) + 80px); padding: 8px 12px; }
.combustivel { display: flex; align-items: center; gap: 6px; background: rgba(42, 31, 46, 0.78); color: #fff; border-radius: 10px; padding: 3px 10px 3px 6px; }
.combustivel .comb-icone svg { width: 30px; height: 20px; display: block; }
.combustivel .comb-trilho { width: 120px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.2); overflow: hidden; }
.combustivel .comb-trilho i { display: block; height: 100%; background: linear-gradient(90deg, #ffc233, #5be37a); transition: width .1s; }
.combustivel small { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
.combustivel.vazio .comb-trilho { box-shadow: 0 0 0 2px #ff5a4e; }
@media (max-width: 760px), (max-height: 500px) { .montaria .foto-montaria { max-width: 56px; } .montaria .barra { display: none; } .seletor-montaria { gap: 5px; } .combustivel .comb-trilho { width: 80px; } .combustivel small { display: none; } }
.cores-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cores { display: flex; flex-wrap: wrap; gap: 8px; }
.cores button { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--tinta); cursor: pointer; box-shadow: 0 3px 0 rgba(42, 31, 46, 0.2); transition: transform 0.12s; padding: 0; }
.cores button:hover { transform: scale(1.1); }
.cores button.sel { outline: 3px solid var(--amarelo); outline-offset: 2px; transform: scale(1.12); }
.cores button:disabled { opacity: 0.25; cursor: default; transform: none; }

/* ─── Início ─────────────────────────────────────────────────────────────────── */
#tela-inicio {
  display: flex; align-items: center;
  background: radial-gradient(ellipse 72% 100% at 8% 55%, rgba(42, 31, 46, 0.55) 0%, rgba(42, 31, 46, 0.3) 45%, rgba(42, 31, 46, 0) 78%);
}
.inicio-bloco { padding: 60px clamp(20px, 7vw, 110px) 20px; max-width: 660px; }
.logo { margin: 0 0 6px; font-family: var(--display); font-weight: 400; line-height: 0.86; letter-spacing: 0.01em; transform: rotate(-3deg); transform-origin: left bottom; }
.logo span { display: block; -webkit-text-stroke: 3px var(--tinta); paint-order: stroke fill; }
.logo .l1 { font-size: clamp(56px, 10vw, 124px); color: #fff4d6; text-shadow: 0 7px 0 var(--tinta); }
.logo .l2 { font-size: clamp(72px, 13vw, 164px); color: var(--amarelo); text-shadow: 0 8px 0 var(--tinta); margin-left: 0.3em; }
.chamada { font-size: clamp(16px, 1.6vw, 20px); line-height: 1.45; color: #fff; margin: 22px 0 24px; text-shadow: 0 2px 6px rgba(42, 31, 46, 0.5); }
.menu-principal { display: grid; gap: 12px; justify-items: start; }
.menu-principal .bt.grande { flex-direction: column; align-items: flex-start; gap: 2px; min-width: 330px; padding: 14px 26px; }
.menu-principal .bt.grande small { font-size: 13px; font-weight: 800; opacity: 0.88; }
.menu-principal .bt.grande span { font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: 0.03em; line-height: 1; }
.menu-principal .bt.grande.online { --fundo: var(--amarelo); --borda: #c98f10; color: var(--tinta); }
.menu-linha { display: flex; gap: 10px; }
.rodape-inicio { margin-top: 20px; font-size: 13px; color: rgba(255, 255, 255, 0.85); }

/* ─── Online e sala ──────────────────────────────────────────────────────────── */
.online-cartao { display: grid; gap: 12px; width: min(440px, 100%); }
.ou { display: flex; align-items: center; gap: 10px; color: var(--tinta2); font-size: 12px; }
.ou::before, .ou::after { content: ''; flex: 1; height: 2px; background: #f0e0cb; }
.entrar-codigo { display: flex; gap: 8px; }
.entrar-codigo input { flex: 1; font: 900 20px var(--texto); letter-spacing: 0.25em; text-transform: uppercase; text-align: center; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 2px #f0e0cb; color: var(--tinta); min-width: 0; }
.sala-painel { width: min(620px, 100%); display: grid; gap: 12px; }
.lobby-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lobby-topo h2 { font-family: var(--display); font-weight: 400; font-size: 30px; margin: 0; letter-spacing: 0.02em; }
.codigo { letter-spacing: 0.14em; color: var(--quente); font-weight: 400; }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao { display: inline-flex; align-items: center; gap: 4px; background: var(--papel); border-radius: 12px; padding: 4px 6px 4px 10px; font-size: 13px; box-shadow: inset 0 0 0 2px #f0e0cb; }
.opcao b { margin: 0 4px; }
.opcao button { width: 26px; height: 26px; border: 0; border-radius: 8px; background: #fff; cursor: pointer; font-weight: 900; box-shadow: 0 2px 0 #e6d4bd; }
.vagas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vaga { background: #fff; border-radius: 16px; padding: 10px 12px; box-shadow: 0 3px 0 #e6d4bd; display: flex; align-items: center; gap: 10px; min-height: 52px; font-size: 14px; flex-wrap: wrap; }
.vaga .camisa { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--tinta); flex: none; background: var(--cor, #ddd); }
.vaga img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--cor); box-shadow: 0 0 0 3px var(--cor); flex: none; }
.vaga.eu { box-shadow: 0 0 0 3px var(--quente), 0 3px 0 #e6d4bd; }
.vaga.vazia, .vaga.cpu { color: var(--tinta2); }
.vaga.vazia .camisa { background: repeating-linear-gradient(45deg, #eee 0 4px, #fff 4px 8px); border-style: dashed; border-color: #ccb; }
.vaga.fechada { opacity: 0.35; }
.vaga .tag { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; background: var(--papel); border-radius: 6px; padding: 2px 6px; color: var(--tinta2); }
.vaga .tag.pronto { background: #d9f7e5; color: #157347; }
.vaga .tag.fora { background: #ffe1e1; color: #b02a2a; }
.lobby-base { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.contagem { font-family: var(--display); font-size: 22px; color: var(--quente); letter-spacing: 0.03em; }
#rede { position: fixed; top: calc(max(12px, env(safe-area-inset-top)) + 70px); left: 50%; transform: translateX(-50%); z-index: 25; background: rgba(42, 31, 46, 0.82); color: #fff; font-size: 13px; border-radius: 10px; padding: 6px 12px; pointer-events: none; }
#rede:empty { display: none; }

/* ─── Ajuda ──────────────────────────────────────────────────────────────────── */
.ajuda { width: min(760px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; }
.ajuda-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.ajuda-grade > div { background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: 0 3px 0 #e6d4bd; }
.ajuda-grade b { font-weight: 900; }
.ajuda-grade > div > b { font-family: var(--display); font-weight: 400; font-size: 22px; display: block; margin-bottom: 4px; letter-spacing: 0.02em; }
.ajuda-grade p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tinta2); }

/* ─── HUD ────────────────────────────────────────────────────────────────────── */
#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.hud-topo { position: absolute; top: max(10px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.hud-jogadores { display: grid; gap: 4px; min-width: 150px; }
.hj { display: flex; align-items: center; gap: 8px; background: rgba(255, 248, 238, 0.9); border-radius: 12px; padding: 4px 10px 4px 5px; box-shadow: 0 2px 0 rgba(42, 31, 46, 0.15); font-size: 13px; font-weight: 900; transition: opacity 0.3s, transform 0.2s; }
.hj .camisa { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--tinta); flex: none; background: var(--cor); }
.hj img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--cor); box-shadow: 0 0 0 2px var(--cor); flex: none; }
.hj .nome { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.hj .vida { width: 54px; height: 7px; border-radius: 4px; background: rgba(42, 31, 46, 0.15); overflow: hidden; flex: none; }
.hj .vida i { display: block; height: 100%; background: var(--verde); transition: width 0.4s; }
.hj .vida i.media { background: var(--amarelo); }
.hj .vida i.baixa { background: #ff5a4e; }
.hj.vez { transform: translateX(6px); box-shadow: 0 0 0 2.5px var(--tinta), 0 2px 0 rgba(42, 31, 46, 0.15); }
.hj.fora { opacity: 0.45; }
.hj.fora .nome { text-decoration: line-through; }
.hud-vez { display: flex; align-items: center; gap: 10px; background: rgba(42, 31, 46, 0.86); color: #fff; border-radius: 999px; padding: 5px 18px 5px 5px; box-shadow: 0 4px 16px rgba(42, 31, 46, 0.3); position: absolute; left: 50%; transform: translateX(-50%); }
.relogio { --p: 1; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--amarelo) calc(var(--p) * 360deg), rgba(255, 255, 255, 0.18) 0); }
.relogio b { width: 36px; height: 36px; border-radius: 50%; background: var(--tinta); display: grid; place-items: center; font-family: var(--display); font-weight: 400; font-size: 18px; }
.relogio.urgente { background: conic-gradient(#ff5a4e calc(var(--p) * 360deg), rgba(255, 255, 255, 0.18) 0); animation: pisca 0.5s steps(2) infinite; }
@keyframes pisca { 50% { opacity: 0.6; } }
.vez-texto { display: grid; line-height: 1.05; }
.vez-texto small { font-size: 11px; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.06em; }
.vez-texto span { font-family: var(--display); font-size: 20px; letter-spacing: 0.03em; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vento { display: grid; justify-items: center; gap: 2px; background: rgba(255, 248, 238, 0.9); border-radius: 14px; padding: 5px 12px 7px; box-shadow: 0 2px 0 rgba(42, 31, 46, 0.15); margin-right: 54px; }
.vento small { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta2); }
.vento-rosa { width: 38px; height: 38px; border-radius: 50%; background: rgba(42,31,46,.08); display: grid; place-items: center; }
.vento-rosa svg { width: 30px; height: 30px; transition: transform .4s, opacity .4s; }
.vento-barra { width: 60px; height: 6px; border-radius: 3px; background: rgba(42, 31, 46, 0.12); overflow: hidden; }
.vento-barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4cc9f0, #3a86ff); transition: width .4s; }
.hud-base { position: absolute; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.armas { display: flex; gap: 8px; pointer-events: auto; }
.arma { position: relative; width: 58px; height: 58px; border-radius: 18px; border: 0; cursor: pointer; background: rgba(255, 248, 238, 0.92); box-shadow: 0 4px 0 rgba(42, 31, 46, 0.2); display: grid; place-items: center; padding: 0; transition: transform 0.12s; }
.arma svg { width: 34px; height: 34px; }
.arma kbd { position: absolute; bottom: 2px; left: 4px; font-size: 9px; padding: 1px 4px; box-shadow: none; background: rgba(42,31,46,.08); }
body.toque .arma kbd { display: none; }
.arma-dica { margin: 0; background: rgba(42, 31, 46, 0.85); color: #fff; font-size: 13px; border-radius: 10px; padding: 5px 12px; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
.arma-dica b { color: var(--amarelo); }
.arma-dica.mostra { opacity: 1; transform: none; }
.arma .qtd { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; border-radius: 11px; background: var(--tinta); color: #fff; font-size: 12px; font-weight: 900; display: grid; place-items: center; padding: 0 5px; }
.arma.sel { box-shadow: 0 0 0 3px var(--quente), 0 4px 0 var(--quente2); transform: translateY(-4px); }
.arma:disabled { opacity: 0.35; cursor: default; }
.armas.bloqueado .arma { opacity: 0.55; pointer-events: none; }
.mira-leitura { font-size: 12px; font-weight: 900; color: #fff; background: rgba(42, 31, 46, 0.7); padding: 3px 10px; border-radius: 8px; }
.mira-leitura:empty { display: none; }
.mira-leitura { display: grid; justify-items: center; gap: 3px; padding: 4px 12px 6px; }
.forca-trilho { display: block; width: 150px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.2); overflow: hidden; }
.forca-trilho i { display: block; height: 100%; width: 0; border-radius: 4px; transition: width .05s linear; }
.hud-dica { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 64px); left: 50%; transform: translateX(-50%); margin: 0; background: rgba(255, 248, 238, 0.92); color: var(--tinta); border-radius: 12px; padding: 7px 14px; font-size: 14px; font-weight: 900; white-space: nowrap; box-shadow: 0 3px 0 rgba(42, 31, 46, 0.15); }
.hud-dica:empty { display: none; }

.toque-bts { display: none; }
body.toque .toque-bts { display: block; }
.alavanca { position: absolute; pointer-events: auto; left: max(20px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom)); width: 128px; height: 128px; border-radius: 50%; background: rgba(255, 248, 238, 0.35); box-shadow: inset 0 0 0 3px rgba(255,255,255,.7); touch-action: none; display: grid; place-items: center; }
.alavanca i { width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 248, 238, 0.92); box-shadow: 0 3px 0 var(--tinta), inset 0 0 0 3px var(--tinta); }
.tq { position: absolute; pointer-events: auto; border-radius: 50%; border: 3px solid var(--tinta); font: 900 15px var(--texto); box-shadow: 0 4px 0 var(--tinta); touch-action: none; color: var(--tinta); }
.tq:active, .tq.ativo { transform: translateY(3px); box-shadow: 0 1px 0 var(--tinta); }
.tq.atirar { right: max(20px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); width: 104px; height: 104px; background: var(--quente); color: #fff; font-size: 16px; }
.tq.pula { right: calc(max(20px, env(safe-area-inset-right)) + 112px); bottom: max(20px, env(safe-area-inset-bottom)); width: 66px; height: 66px; background: var(--amarelo); font-size: 14px; }
body.toque .hud-base { bottom: max(10px, env(safe-area-inset-bottom)); }
body.toque .arma { width: 44px; height: 44px; border-radius: 13px; }
body.toque .arma svg { width: 26px; height: 26px; }
body.toque .armas { gap: 5px; }
.reacoes { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 70px); display: grid; gap: 6px; pointer-events: auto; justify-items: end; }
.reacoes .abrir { width: 44px; height: 44px; padding: 0; font-size: 20px; border-radius: 14px; }
.reacoes:not(.aberto) button:not(.abrir) { display: none; }
.reacoes button { border: 0; cursor: pointer; border-radius: 12px; padding: 6px 10px; font: 900 13px var(--texto); background: rgba(255, 248, 238, 0.85); box-shadow: 0 2px 0 rgba(42, 31, 46, 0.2); }
.reacoes button:active { transform: translateY(2px); }
body.toque .reacoes { bottom: auto; top: calc(max(10px, env(safe-area-inset-top)) + 62px); }
.reacoes.aberto .abrir { order: 99; }
body.toque .reacoes.aberto .abrir { order: 0; }
.reacoes.aberto { grid-template-columns: auto auto; }
.reacoes .abrir { grid-column: 1 / -1; justify-self: end; }

#aviso {
  position: fixed; top: 24%; left: 50%; transform: translate(-50%, -50%); z-index: 25; pointer-events: none;
  font-family: var(--display); font-size: clamp(26px, min(6vw, 8vh), 64px); color: #fff; text-align: center; line-height: 1; letter-spacing: 0.02em;
  -webkit-text-stroke: 3px var(--tinta); paint-order: stroke fill; text-shadow: 0 6px 0 var(--tinta); opacity: 0; white-space: nowrap;
}
#aviso.mostra { animation: aviso 1.5s ease-out forwards; }
#aviso.minha { color: var(--amarelo); }
#aviso.ruim { color: #ff8a7a; }
#aviso small { display: block; font-family: var(--texto); font-weight: 900; font-size: 0.26em; -webkit-text-stroke: 0; color: #fff; text-shadow: 0 2px 4px rgba(42, 31, 46, 0.7); margin-top: 8px; letter-spacing: 0; }
@keyframes aviso { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(-6deg); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(-3deg); } 25% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -62%) scale(1) rotate(-3deg); } }

/* ─── Resultado ──────────────────────────────────────────────────────────────── */
.resultado { display: grid; gap: 10px; text-align: center; width: min(420px, 100%); }
.resultado .sobre { margin: 0; color: var(--tinta2); font-size: 14px; }
.resultado h2 { font-family: var(--display); font-weight: 400; font-size: 46px; margin: 0; line-height: 1; letter-spacing: 0.02em; }
.res-lista { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.res-lista li { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 8px 12px; box-shadow: 0 3px 0 #e6d4bd; font-size: 15px; }
.res-lista li .pos { font-family: var(--display); font-size: 22px; width: 28px; text-align: center; color: var(--tinta2); }
.res-lista li:first-child .pos { color: var(--quente); }
.res-lista li .camisa { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--tinta); flex: none; background: var(--cor); }
.res-lista li img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--cor); box-shadow: 0 0 0 3px var(--cor); flex: none; }
.res-lista li .nome { flex: 1; font-weight: 900; }
.res-lista li small { color: var(--tinta2); font-size: 12px; }
.res-lista li.eu { box-shadow: 0 0 0 3px var(--quente), 0 3px 0 #e6d4bd; }
.res-botoes { display: grid; gap: 8px; margin-top: 8px; }

#erro { position: fixed; inset: 0; z-index: 70; display: grid; place-content: center; text-align: center; padding: 24px; background: var(--ceu2); }

/* capa (?capa=1): só o quintal */
body.capa #topo, body.capa .tela, body.capa #hud, body.capa #carregando { display: none !important; }

@media (max-width: 760px), (max-height: 500px) {
  .menu-principal .bt.grande { min-width: 0; width: 100%; }
  .inicio-bloco { padding-top: 64px; }
  .hud-jogadores { min-width: 0; }
  .hj { padding: 3px 8px 3px 4px; font-size: 11px; }
  .hj .nome { max-width: 70px; }
  .hj .vida { width: 36px; }
  .hud-vez { padding: 3px 12px 3px 3px; top: 0; }
  .relogio { width: 38px; height: 38px; }
  .relogio b { width: 30px; height: 30px; font-size: 15px; }
  .vez-texto span { font-size: 16px; max-width: 110px; }
  .vento { padding: 4px 8px 6px; margin-right: 50px; }
  .vento-barra { width: 50px; }
  .vento-rosa { width: 30px; height: 30px; } .vento-rosa svg { width: 24px; height: 24px; }
  .seletor-personagem { gap: 5px; }
  .personagem b { font-size: 11px; }
  .arma { width: 52px; height: 52px; border-radius: 15px; }
  .arma svg { width: 28px; height: 28px; }
  .vagas { grid-template-columns: 1fr; }
}
@media (max-height: 500px) {
  .logo .l1 { font-size: 48px; } .logo .l2 { font-size: 62px; }
  .chamada { margin: 12px 0 14px; font-size: 14px; }
  .inicio-bloco { padding-top: 74px; }
  .menu-principal .bt.grande { padding: 10px 20px; }
  .menu-principal .bt.grande span { font-size: 24px; }
  .rodape-inicio { display: none; }
  #tela-inicio { align-items: flex-start; overflow-y: auto; }
  .logo span { display: inline; }
  .logo .l1, .logo .l2 { font-size: 44px; margin-left: 0; text-shadow: 0 4px 0 var(--tinta); -webkit-text-stroke-width: 2px; }
  .chamada br { display: none; }
  .chamada { max-width: 460px; }
  .menu-principal { grid-template-columns: 1fr 1fr; max-width: 560px; }
  .menu-linha { grid-column: 1 / -1; }
  .sala-painel { gap: 8px; padding: 16px; }
  .vagas { grid-template-columns: 1fr 1fr; gap: 6px; }
  .vaga { min-height: 40px; padding: 6px 10px; }
  .tela.modal { padding: 8px; }
  .cartao { padding: 16px; }
  .hj .vida { display: none; }
}


/* ─── Esquadrilha ───────────────────────────────────────────────────────────── */
.nave-carregando { font-size: 42px; animation: voa 1.2s ease-in-out infinite alternate; }
@keyframes voa { from { transform: translate(-40px, 10px) rotate(-10deg); } to { transform: translate(40px, -10px) rotate(10deg); } }
#tela-inicio { background: radial-gradient(ellipse 72% 100% at 8% 55%, rgba(16, 18, 60, 0.6) 0%, rgba(16, 18, 60, 0.3) 45%, rgba(16, 18, 60, 0) 78%); }
.logo .l1 { color: #e8f4ff; }
.logo .l2 { color: #ffc233; }
.seletor-nave { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.nave { position: relative; border: 0; cursor: pointer; border-radius: 16px; padding: 0 0 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 30%, #fff), #fff 70%); box-shadow: 0 3px 0 #e6d4bd, inset 0 0 0 2px #f0e0cb; display: grid; justify-items: center; overflow: hidden; transition: transform .12s, box-shadow .12s; }
.nave img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.nave b { font: 900 13px var(--texto); color: var(--tinta); }
.nave small { font: 800 10px var(--texto); color: var(--tinta2); text-transform: uppercase; letter-spacing: .05em; }
.nave.sel { box-shadow: 0 0 0 3px var(--cor), 0 4px 0 var(--tinta); transform: translateY(-3px); }
.nave:disabled { opacity: .35; cursor: default; transform: none; }
.nave-desc { font-weight: 700; color: var(--tinta2); margin-left: 6px; }
.vaga img.mini-nave { width: 38px; height: 38px; object-fit: contain; flex: none; }

.hud-equipe { display: grid; gap: 4px; min-width: 170px; }
.hn { display: grid; grid-template-columns: 30px 1fr; gap: 0 8px; align-items: center; background: rgba(255, 248, 238, 0.9); border-radius: 12px; padding: 4px 10px 5px 4px; box-shadow: 0 2px 0 rgba(42, 31, 46, 0.15); font-size: 12px; font-weight: 900; }
.hn img { width: 30px; height: 30px; object-fit: contain; grid-row: span 2; }
.hn .linha { display: flex; justify-content: space-between; gap: 6px; }
.hn .nome { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn .nivel { color: var(--cor); }
.hn .vida { height: 6px; border-radius: 3px; background: rgba(42, 31, 46, 0.15); overflow: hidden; }
.hn .vida i { display: block; height: 100%; background: #5be37a; transition: width .25s; }
.hn .vida i.media { background: #ffc233; } .hn .vida i.baixa { background: #ff5a4e; }
.hn.caido { opacity: .6; }
.hn.caido .nome::after { content: ' · resgate!'; color: #ff5a4e; }
.hn.eu { box-shadow: 0 0 0 2.5px var(--cor), 0 2px 0 rgba(42, 31, 46, 0.15); }
.hud-meio { position: absolute; left: 50%; transform: translateX(-50%); display: grid; gap: 6px; justify-items: center; width: min(380px, 44vw); }
.progresso, .chefe-barra { width: 100%; display: grid; gap: 2px; justify-items: center; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.progresso small, .chefe-barra small { font: 900 12px var(--texto); letter-spacing: .04em; }
.trilho { width: 100%; height: 8px; border-radius: 4px; background: rgba(255,255,255,.25); overflow: hidden; box-shadow: 0 1px 0 rgba(0,0,0,.2); }
.trilho i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4cc9f0, #3a86ff); transition: width .3s; }
.chefe-barra .trilho { height: 14px; border: 2px solid #1d1b2f; }
.chefe-barra .trilho i { background: linear-gradient(90deg, #ff5a4e, #ffb02e); }
.chefe-barra small { font-family: var(--display); font-weight: 400; font-size: 18px; }
.hud-pontos { display: grid; justify-items: end; background: rgba(255, 248, 238, 0.9); border-radius: 14px; padding: 6px 12px; box-shadow: 0 2px 0 rgba(42, 31, 46, 0.15); margin-right: 54px; }
.hud-pontos b { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1; }
.hud-pontos small { font-size: 11px; font-weight: 900; color: var(--tinta2); }
.especial { position: absolute; pointer-events: auto; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: 110px; height: 110px; border-radius: 50%; border: 3px solid var(--tinta); background: rgba(42,31,46,.55); color: #fff; font: 900 14px var(--texto); overflow: hidden; box-shadow: 0 4px 0 var(--tinta); touch-action: none; display: grid; place-items: center; }
.especial i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--cor, #4cc9f0); z-index: -1; transition: height .2s; }
.especial span { position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.especial.pronto { animation: brilho-fuga 1.2s ease-in-out infinite; }
.especial.pronto i { height: 100%; }
body:not(.toque) .especial { width: 84px; height: 84px; font-size: 12px; }
.rotulo.eu b { box-shadow: inset 0 -2px 0 var(--cor), 0 0 0 2px #fff; }
.rotulo.caido b { background: #ff5a4e; }
.rotulo { transform-origin: top center; }
@media (max-width: 760px), (max-height: 500px) {
  .hud-equipe { min-width: 0; }
  .hn { grid-template-columns: 24px 1fr; padding: 2px 6px 3px 2px; font-size: 10px; }
  .hn img { width: 24px; height: 24px; }
  .hn .nome { max-width: 60px; }
  .hud-meio { width: 36vw; top: 0; }
  .hud-pontos b { font-size: 16px; }
  .seletor-nave { gap: 5px; }
}
@media (max-width: 560px) and (orientation: portrait) {
  .hud-meio { top: 58px; width: 56vw; }
  .hud-pontos { padding: 4px 9px; }
}