:root {
  --tinta: #14131c;
  --tinta2: #9a98ab;
  --papel: #f4efe6;
  --vidro: rgba(24, 23, 34, 0.86);
  --faisca: #ff8a1f;
  --faisca2: #ffd23f;
  --raiz: #2fcf85;
  --perigo: #ff3b3b;
  --ciano: #7df9ff;
  --display: 'Bungee', 'Arial Black', system-ui, sans-serif;
  --texto: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font-family: var(--texto); font-weight: 700; color: #fff; background: #1a1a22; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
#cena { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ─── Botões ─── */
.bt {
  --fundo: #2a2936; --borda: #0c0b12;
  appearance: none; border: 0; cursor: pointer; background: var(--fundo); color: #fff; border-radius: 12px; padding: 12px 22px;
  font-weight: 900; font-size: 16px; box-shadow: 0 4px 0 var(--borda), 0 8px 20px rgba(0, 0, 0, 0.3);
  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); }
.bt:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--borda); }
.bt:focus-visible { outline: 3px solid var(--faisca2); outline-offset: 3px; }
.bt.primario { --fundo: var(--faisca); --borda: #b35a0c; color: #1a1208; }
.bt.escuro { --fundo: #1d1c28; }
.bt.fantasma { --fundo: rgba(255, 255, 255, 0.08); --borda: rgba(0, 0, 0, 0.4); }
.bt.grande { padding: 15px 28px; font-size: 19px; }
.bt.pequeno { padding: 8px 14px; font-size: 14px; }
.bt:disabled { opacity: 0.45; pointer-events: none; }
.icone { width: 42px; height: 42px; border-radius: 12px; border: 0; cursor: pointer; background: rgba(20, 19, 28, 0.6); color: #fff; backdrop-filter: blur(8px); display: grid; place-items: center; }
.icone.desligado { opacity: 0.45; }

/* ─── Topo ─── */
#topo { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: space-between; padding: max(12px, env(safe-area-inset-top)) 16px 0; pointer-events: none; }
#topo > * { pointer-events: auto; }
.marca-fliper { font-family: var(--display); font-size: 16px; text-decoration: none; color: #fff; background: rgba(20, 19, 28, 0.6); padding: 8px 14px; border-radius: 12px; backdrop-filter: blur(8px); }
.marca-fliper b { font-weight: 400; background: linear-gradient(90deg, #8b5cf6, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topo-acoes { display: flex; gap: 8px; }
body.jogando #topo { display: none; }

/* ─── Telas ─── */
.tela { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.tela > * { pointer-events: auto; }
.tela.modal { z-index: 40; display: grid; place-items: center; background: rgba(10, 9, 16, 0.55); backdrop-filter: blur(4px); pointer-events: auto; padding: 16px; overflow-y: auto; }
.cartao { background: var(--vidro); backdrop-filter: blur(14px); border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); padding: 24px; }
.cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.cab h2 { font-family: var(--display); font-weight: 400; font-size: 28px; margin: 0; letter-spacing: 0.02em; }
.sobre { margin: 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta2); }
.dica { color: var(--tinta2); font-size: 14px; margin: 0; }

/* ─── Início ─── */
#tela-inicio { display: flex; align-items: center; background: radial-gradient(ellipse 70% 100% at 8% 55%, rgba(12, 11, 18, 0.9) 0%, rgba(12, 11, 18, 0.6) 45%, rgba(12, 11, 18, 0) 78%); }
.inicio-bloco { padding: 0 clamp(24px, 7vw, 110px); max-width: 680px; }
.logo { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(64px, 11vw, 150px); line-height: 0.9; letter-spacing: 0.02em; }
.logo span { position: relative; display: inline-block; color: #fff; text-shadow: 0 0.05em 0 #0c0b12; }
.logo span::before, .logo span::after { content: attr(data-texto); position: absolute; inset: 0; }
.logo span::before { color: var(--faisca); transform: translate(-0.035em, 0); clip-path: inset(10% 0 55% 0); animation: glitch 3.2s infinite steps(1); mix-blend-mode: screen; }
.logo span::after { color: var(--raiz); transform: translate(0.035em, 0); clip-path: inset(58% 0 8% 0); animation: glitch 2.6s infinite steps(1) reverse; mix-blend-mode: screen; }
@keyframes glitch { 0%, 86%, 100% { transform: translate(0, 0); opacity: 0; } 87% { transform: translate(-0.05em, 0.01em); opacity: 1; } 90% { transform: translate(0.04em, -0.01em); opacity: 1; } 93% { opacity: 0; } }
.chamada { font-size: clamp(16px, 1.6vw, 20px); line-height: 1.45; color: #d6d3e2; margin: 18px 0 26px; }
.menu-principal { display: grid; gap: 12px; justify-items: start; }
.menu-principal .bt.grande { flex-direction: column; align-items: flex-start; gap: 0; min-width: 320px; }
.menu-principal .bt.grande span { font-family: var(--display); font-weight: 400; font-size: 24px; }
.menu-principal .bt.grande small { font-size: 13px; opacity: 0.85; }
.menu-linha { display: flex; gap: 10px; }

/* ─── História ─── */
.historia { width: min(640px, 94vw); display: grid; gap: 14px; }
#historia-texto p { margin: 0 0 12px; font-size: 18px; line-height: 1.5; color: #e4e1ee; opacity: 0; transform: translateY(6px); animation: surge 0.6s forwards; }
@keyframes surge { to { opacity: 1; transform: none; } }

/* ─── Escolha ─── */
#tela-escolha, #tela-online { display: grid; place-items: center; padding: 60px 14px 14px; background: rgba(10, 9, 16, 0.4); }
.painel-escolha { width: min(1100px, 100%); max-height: calc(100vh - 74px); overflow-y: auto; display: grid; gap: 14px; }
.linha-ops { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.op { display: flex; align-items: center; gap: 10px; }
.op > span { font-size: 13px; color: var(--tinta2); text-transform: uppercase; letter-spacing: 0.08em; }
.segmento { display: flex; background: rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 3px; gap: 2px; }
.segmento button { border: 0; background: none; cursor: pointer; font-weight: 900; font-size: 14px; padding: 7px 12px; border-radius: 8px; color: var(--tinta2); }
.segmento button.sel { background: #fff; color: var(--tinta); }
.herois { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.heroi {
  --cor: var(--faisca); border: 0; cursor: pointer; text-align: left; background: rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 14px;
  display: grid; gap: 8px; align-content: start; border-top: 5px solid var(--cor); transition: transform 0.12s, background 0.2s; color: #fff;
}
.heroi:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.09); }
.heroi.sel { background: rgba(255, 255, 255, 0.14); box-shadow: 0 0 0 3px var(--cor); }
.heroi .nome { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1; }
.heroi .papel { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cor); }
.heroi p { margin: 0; font-size: 13px; line-height: 1.35; color: #cfcbdc; font-weight: 700; }
.heroi ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 12.5px; color: #e4e1ee; }
.heroi li { display: grid; grid-template-columns: 50px 1fr; gap: 6px; align-items: baseline; }
.heroi li kbd, .hab kbd, .ult kbd, .morto kbd, .ajuda kbd {
  font-family: var(--texto); font-weight: 900; font-size: 11px; background: rgba(255, 255, 255, 0.12); border-radius: 6px; padding: 1px 6px; text-align: center; color: #fff;
}
.heroi .vida { font-size: 12px; color: var(--tinta2); }
/* as armas do kit (tela de herói) */
.kit { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.kit .grupo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kit .grupo > span { font-size: 13px; color: var(--tinta2); text-transform: uppercase; letter-spacing: 0.08em; margin-right: 4px; }
.kit button { border: 0; cursor: pointer; background: rgba(255, 255, 255, 0.06); color: var(--tinta2); font-weight: 900; font-size: 14px; padding: 7px 12px; border-radius: 10px; display: inline-flex; gap: 7px; align-items: center; }
.kit button.sel { background: #fff; color: var(--tinta); }
.kit button i { font-style: normal; font-size: 11px; opacity: 0.65; }
.kit button.fixo { cursor: default; background: rgba(255, 255, 255, 0.14); color: #fff; }
.base { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.base .bt.grande { min-width: 220px; }

/* ─── Ajuda ─── */
.ajuda { width: min(980px, 94vw); max-height: 88vh; overflow-y: auto; }
.ajuda-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.ajuda-grade section { background: rgba(255, 255, 255, 0.05); border-radius: 14px; padding: 14px; }
.ajuda-grade h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: 18px; }
.ajuda-grade table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ajuda-grade td { padding: 5px 4px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.ajuda-grade td:first-child { color: var(--tinta2); width: 42%; }
.ajuda-grade p { margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: #d6d3e2; }

/* ─── HUD ─── */
#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.mira { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.mira i { position: absolute; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); border-radius: 1px; }
.mira i:nth-child(1), .mira i:nth-child(2) { width: 2px; height: 8px; left: -1px; }
.mira i:nth-child(3), .mira i:nth-child(4) { height: 2px; width: 8px; top: -1px; }
.mira i:nth-child(1) { top: calc(-8px - var(--gap, 6px)); } .mira i:nth-child(2) { top: var(--gap, 6px); }
.mira i:nth-child(3) { left: calc(-8px - var(--gap, 6px)); } .mira i:nth-child(4) { left: var(--gap, 6px); }
.mira b { position: absolute; width: 4px; height: 4px; left: -2px; top: -2px; background: #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); }
.mira.circulo::before { content: ''; position: absolute; width: 56px; height: 56px; left: -28px; top: -28px; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }
.mira.circulo i { display: none; }
.mira.ponto i { display: none; }
.mira.corte::before { content: ''; position: absolute; width: 34px; height: 34px; left: -17px; top: -17px; border: 2px solid transparent; border-top-color: rgba(255, 255, 255, 0.9); border-radius: 50%; transform: rotate(-30deg); }
.mira.corte i { display: none; }
.marcador { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }
.marcador i { position: absolute; width: 2.5px; height: 11px; background: #fff; left: -1px; top: -5px; box-shadow: 0 0 2px #000; }
.marcador i:nth-child(1) { transform: rotate(45deg) translateY(-12px); } .marcador i:nth-child(2) { transform: rotate(135deg) translateY(-12px); }
.marcador i:nth-child(3) { transform: rotate(225deg) translateY(-12px); } .marcador i:nth-child(4) { transform: rotate(315deg) translateY(-12px); }
.marcador.bate { animation: bate 0.22s; } .marcador.cabeca i { background: var(--faisca2); } .marcador.abate i { background: var(--perigo); height: 15px; }
@keyframes bate { 0% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; transform: scale(1); } }
#escopo { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 0 32vmin, rgba(0, 0, 0, 0.92) 32.3vmin); }
#escopo::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(0, 0, 0, 0.7); }
#escopo::after { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgba(0, 0, 0, 0.7); }
#vinheta { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(255, 30, 30, 0.55)); opacity: 0; transition: opacity 0.4s; }
body.baixa #vinheta { opacity: 0.5; animation: pulsar 1s infinite alternate; }
@keyframes pulsar { to { opacity: 0.8; } }
#vinheta.dor { opacity: 0.9; transition: none; }

.objetivo { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; width: min(560px, 70vw); }
.times { display: flex; align-items: center; gap: 12px; }
.time-lista { display: flex; gap: 5px; }
.time-lista i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-style: normal; font-family: var(--display); font-size: 13px; color: #14131c; background: var(--cor); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); position: relative; }
.time-lista i.morto { filter: grayscale(1) brightness(0.55); }
.time-lista i small { position: absolute; bottom: -12px; font-family: var(--texto); font-size: 10px; color: #fff; }
.time-lista i.eu { box-shadow: 0 0 0 2px #fff, 0 2px 0 rgba(0, 0, 0, 0.4); }
.relogio { font-family: var(--display); font-size: 22px; background: rgba(20, 19, 28, 0.7); border-radius: 10px; padding: 2px 12px; min-width: 88px; text-align: center; }
.relogio.pouco { color: var(--perigo); }
.barra-celula { position: relative; width: 100%; height: 12px; border-radius: 6px; background: rgba(20, 19, 28, 0.7); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15); }
#celula-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--faisca), var(--faisca2)); }
.barra-celula .cp { position: absolute; top: -3px; width: 4px; height: 18px; background: #fff; border-radius: 2px; }
#celula-icone { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--ciano); box-shadow: 0 0 12px var(--ciano), 0 0 0 3px #14131c; left: 0; }
#celula-icone.contestada { background: var(--faisca2); box-shadow: 0 0 12px var(--faisca2), 0 0 0 3px #14131c; }
#celula-icone.recuando { background: var(--perigo); box-shadow: 0 0 12px var(--perigo), 0 0 0 3px #14131c; }
.celula-estado { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 1px 3px #000; }

.feed { position: absolute; right: max(14px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); display: grid; gap: 4px; justify-items: end; }
.feed div { background: rgba(20, 19, 28, 0.72); border-radius: 8px; padding: 4px 10px; font-size: 13px; animation: surge 0.2s forwards; }
.feed .a0 { color: var(--faisca); } .feed .a1 { color: var(--raiz); } .feed .eu { text-decoration: underline; }
.feed .arma { color: #fff; opacity: 0.7; margin: 0 6px; font-size: 11px; }

.vida-box { position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); display: grid; gap: 4px; min-width: 220px; }
.vida-heroi { font-family: var(--display); font-size: 16px; text-shadow: 0 2px 0 #000; }
.vida-num b { font-family: var(--display); font-weight: 400; font-size: 42px; line-height: 1; text-shadow: 0 3px 0 #000; }
.vida-num small { font-size: 18px; opacity: 0.8; margin-left: 2px; }
.vida-barra { height: 10px; background: rgba(20, 19, 28, 0.7); border-radius: 5px; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12); }
#vida-fill { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #7dff9a, #fff); transition: width 0.15s; }
body.baixa #vida-fill { background: var(--perigo); }

/* armas na mão (1 a 4); no toque, dá para trocar tocando aqui */
.armas { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: calc(max(18px, env(safe-area-inset-bottom)) + 100px); display: grid; gap: 4px; justify-items: end; }
.armas button { pointer-events: auto; border: 0; cursor: pointer; background: rgba(20, 19, 28, 0.62); color: #cfcbdc; font: 800 12.5px var(--texto); padding: 4px 10px; border-radius: 8px; display: flex; gap: 8px; align-items: center; opacity: 0.8; }
.armas button kbd { font-family: var(--texto); font-weight: 900; font-size: 10.5px; background: rgba(255, 255, 255, 0.14); border-radius: 5px; padding: 0 5px; }
.armas button small { opacity: 0.7; font-size: 11px; }
.armas button.sel { background: rgba(255, 255, 255, 0.94); color: var(--tinta); opacity: 1; }
.armas button.sel kbd { background: rgba(0, 0, 0, 0.12); }
.acoes { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 10px; }
.hab { width: 64px; height: 64px; border-radius: 14px; background: rgba(20, 19, 28, 0.72); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18); display: grid; place-items: center; position: relative; }
.hab b { font-family: var(--display); font-size: 22px; }
.hab small { position: absolute; bottom: -18px; font-size: 10.5px; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.hab kbd { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); }
.hab.pronto { box-shadow: inset 0 0 0 2px var(--faisca2), 0 0 14px rgba(255, 210, 63, 0.4); }
.ult { width: 86px; height: 86px; position: relative; display: grid; place-items: center; }
.ult svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ult .fundo { fill: rgba(20, 19, 28, 0.72); stroke: rgba(255, 255, 255, 0.15); stroke-width: 5; }
.ult .carga { fill: none; stroke: var(--ciano); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 176; stroke-dashoffset: 176; transition: stroke-dashoffset 0.2s; }
.ult b { position: relative; font-family: var(--display); font-size: 18px; }
.ult kbd { position: absolute; bottom: -8px; }
.ult.pronto { animation: ultPronta 0.8s infinite alternate; }
.ult.pronto .carga { stroke: var(--faisca2); }
.ult.pronto b { font-size: 12px; color: var(--faisca2); }
@keyframes ultPronta { to { transform: scale(1.08); filter: drop-shadow(0 0 12px var(--faisca2)); } }
.municao { display: grid; justify-items: end; margin-left: 8px; }
.municao b { font-family: var(--display); font-weight: 400; font-size: 36px; line-height: 1; text-shadow: 0 3px 0 #000; }
.municao small { font-size: 16px; opacity: 0.8; }
.municao span { font-size: 12px; color: var(--faisca2); text-transform: uppercase; letter-spacing: 0.08em; }

.morto { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; background: rgba(20, 19, 28, 0.8); border-radius: 14px; padding: 12px 22px; text-align: center; }
.morto b { font-family: var(--display); font-weight: 400; font-size: 24px; }
.clique { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); display: grid; gap: 4px; justify-items: center; background: rgba(20, 19, 28, 0.85); border-radius: 14px; padding: 14px 24px; font-family: var(--display); font-size: 20px; pointer-events: auto; cursor: pointer; }
.clique small { font-family: var(--texto); font-size: 12px; color: var(--tinta2); }
.placar-tab { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); width: min(720px, 92vw); background: var(--vidro); border-radius: 16px; padding: 14px; backdrop-filter: blur(10px); }

#aviso { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; pointer-events: none; text-align: center; }
#aviso .msg { font-family: var(--display); font-size: clamp(34px, 7vw, 84px); line-height: 1; color: #fff; text-shadow: 0 4px 0 #0c0b12, 0 0 30px rgba(0, 0, 0, 0.5); animation: aviso 1.8s forwards; margin-top: -18vh; }
#aviso .msg small { display: block; font-family: var(--texto); font-weight: 900; font-size: 0.28em; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 8px; }
#aviso .msg.faisca { color: var(--faisca); } #aviso .msg.raiz { color: var(--raiz); } #aviso .msg.perigo { color: var(--perigo); }
@keyframes aviso { 0% { opacity: 0; transform: scale(1.3); } 12% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* placar (Tab e fim) */
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta2); padding: 4px 6px; }
.tabela td { padding: 6px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.tabela td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela tr.t0 td:first-child { border-left: 4px solid var(--faisca); } .tabela tr.t1 td:first-child { border-left: 4px solid var(--raiz); }
.tabela tr.eu { background: rgba(255, 255, 255, 0.08); }

/* pausa / resultado */
.pequeno-cartao { display: grid; gap: 12px; min-width: min(380px, 92vw); text-align: center; }
.pequeno-cartao h2 { font-family: var(--display); font-weight: 400; font-size: 32px; margin: 0; }
.checks { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; color: #d6d3e2; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--faisca); }
.campo-range { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; text-align: left; font-size: 13px; color: var(--tinta2); }
.campo-range input { grid-column: 1 / -1; accent-color: var(--faisca); }
.resultado { width: min(720px, 94vw); display: grid; gap: 12px; text-align: center; }
.resultado h2 { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 6vw, 58px); margin: 0; }
.resultado h2.vitoria { color: var(--faisca2); } .resultado h2.derrota { color: #c9c5d8; }
.res-placar { max-height: 48vh; overflow-y: auto; }
.res-botoes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

#carregando { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; z-index: 50; font-size: 16px; color: var(--tinta2); background: #14131c; transition: opacity 0.4s; }
.raio-carregando { width: 34px; height: 50px; background: var(--faisca); clip-path: polygon(60% 0, 10% 58%, 45% 58%, 32% 100%, 90% 38%, 55% 38%); animation: piscar 0.6s infinite alternate; }
@keyframes piscar { from { opacity: 0.3; } to { opacity: 1; } }
#carregando.some { opacity: 0; pointer-events: none; }
#erro { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; text-align: center; background: #14131c; padding: 24px; }

@media (max-width: 900px) {
  .herois { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  #tela-inicio { align-items: flex-end; background: linear-gradient(0deg, rgba(12, 11, 18, 0.95) 0%, rgba(12, 11, 18, 0.7) 60%, rgba(12, 11, 18, 0) 90%); }
  .inicio-bloco { padding: 0 20px max(26px, env(safe-area-inset-bottom)); }
  .menu-principal { justify-items: stretch; }
  .menu-principal .bt.grande { min-width: 0; }
  .menu-linha .bt { flex: 1; }
}
@media (max-height: 520px) {
  .logo { font-size: 58px; } .chamada { display: none; }
  .vida-num b { font-size: 30px; } .municao b { font-size: 26px; }
  .hab { width: 50px; height: 50px; } .ult { width: 66px; height: 66px; }
  .herois { grid-template-columns: repeat(4, 1fr); } .heroi p, .heroi ul { display: none; }
}


/* folha de poses (?poses=1) */
body.capa #topo, body.capa #hud, body.capa .tela { display: none !important; }
#folha { position: fixed; inset: 0; z-index: 30; pointer-events: none; font-family: var(--display); color: #2b2320; }
#folha b { position: absolute; left: 14px; width: 160px; transform: translateY(-50%); font-weight: 400; font-size: 22px; line-height: 1.05; text-align: center; }
#folha i { position: absolute; box-shadow: inset 0 0 0 4px #c9bfae, 0 2px 6px rgba(0,0,0,.25); border-radius: 4px; }
#folha i span { position: absolute; right: 6px; bottom: 6px; background: #2b2320; color: #f4efe6; font-family: var(--texto); font-weight: 900; font-size: 12px; font-style: normal; padding: 1px 6px; border-radius: 4px; }


/* ─── Look caderno: a interface também é desenhada na folha ─────────────────────────────────── */
body.caderno {
  --tinta-cad: #27357e; --papel-cad: #f7f2e4; --papel-fundo: #fffdf6; --marca: #ffd66b; --vermelho-cad: #d05a5a;
  font-family: 'Patrick Hand', var(--texto);
}
body.caderno #hud, body.caderno .tela, body.caderno #topo, body.caderno #aviso { font-family: 'Patrick Hand', var(--texto); color: var(--tinta-cad); }
body.caderno .logo, body.caderno h2, body.caderno h3, body.caderno .vida-num b, body.caderno .municao b,
body.caderno .relogio, body.caderno .hab b, body.caderno .ult b, body.caderno .bt span, body.caderno .heroi .nome {
  font-family: 'Patrick Hand', var(--texto); font-weight: 400; letter-spacing: 0.01em;
}
/* caixas: papel com traço de caneta e um leve deslocamento, como desenhado à mão */
body.caderno .cartao, body.caderno .vida-box, body.caderno .municao, body.caderno .objetivo,
body.caderno .armas button, body.caderno .hab, body.caderno .ult, body.caderno .morto, body.caderno .clique,
body.caderno .feed div, body.caderno .placar-tab, body.caderno #aviso .msg {
  background: var(--papel-cad); color: var(--tinta-cad);
  border: 2px solid var(--tinta-cad); border-radius: 10px; box-shadow: 2px 2px 0 rgba(39, 53, 126, 0.25);
}
body.caderno .vida-box, body.caderno .municao { padding: 6px 10px; }
body.caderno .vida-barra { background: var(--papel-fundo); box-shadow: inset 0 0 0 2px var(--tinta-cad); }
body.caderno #vida-fill { background: repeating-linear-gradient(45deg, var(--tinta-cad) 0 3px, transparent 3px 7px), var(--papel-fundo); }
body.caderno .hab.pronto { box-shadow: 2px 2px 0 rgba(39, 53, 126, 0.25), inset 0 0 0 3px var(--marca); }
body.caderno .ult .fundo { stroke: rgba(39, 53, 126, 0.25); }
body.caderno .ult .carga, body.caderno .ult.pronto .carga { stroke: var(--tinta-cad); }
body.caderno .ult.pronto b { color: var(--tinta-cad); }
body.caderno .mira i, body.caderno .mira b { background: var(--tinta-cad); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8); }
body.caderno .mira.circulo::before, body.caderno .mira.corte::before { border-color: var(--tinta-cad); }
body.caderno .marcador i { background: var(--tinta-cad); }
body.caderno .marcador.abate i { background: var(--vermelho-cad); }
body.caderno .time-lista i { background: var(--papel-cad); color: var(--tinta-cad); box-shadow: inset 0 0 0 2px currentColor; }
body.caderno .armas button.sel { background: var(--marca); }
body.caderno .armas button kbd, body.caderno .heroi li kbd, body.caderno .hab kbd, body.caderno .ult kbd, body.caderno .morto kbd, body.caderno .ajuda kbd {
  background: var(--papel-fundo); color: var(--tinta-cad); box-shadow: inset 0 0 0 1.5px var(--tinta-cad);
}
body.caderno #celula-fill { background: repeating-linear-gradient(45deg, var(--marca) 0 5px, #ffe9a8 5px 10px); }
body.caderno .barra-celula { background: var(--papel-fundo); box-shadow: inset 0 0 0 2px var(--tinta-cad); }
body.caderno .feed .a0 { color: #c2701c; } body.caderno .feed .a1 { color: #1f7d55; }
/* telas: a folha inteira */
body.caderno .tela { background: rgba(247, 242, 228, 0.82); }
body.caderno .bt { background: var(--papel-cad); color: var(--tinta-cad); border: 2px solid var(--tinta-cad); box-shadow: 2px 2px 0 rgba(39, 53, 126, 0.3); }
body.caderno .bt.primario { background: var(--marca); }
body.caderno .bt.fantasma { background: transparent; }
body.caderno .heroi { background: var(--papel-cad); border-top: 5px solid var(--cor); box-shadow: 2px 2px 0 rgba(39, 53, 126, 0.2); color: var(--tinta-cad); }
body.caderno .heroi p, body.caderno .heroi ul, body.caderno .heroi .vida { color: #4a5580; }
body.caderno .kit button { background: var(--papel-fundo); color: var(--tinta-cad); box-shadow: inset 0 0 0 2px var(--tinta-cad); }
body.caderno .kit button.sel { background: var(--marca); }
body.caderno .segmento { background: var(--papel-fundo); box-shadow: inset 0 0 0 2px var(--tinta-cad); }
body.caderno .segmento button { color: #4a5580; }
body.caderno .segmento button.sel { background: var(--marca); color: var(--tinta-cad); }
body.caderno .logo span { color: var(--tinta-cad); text-shadow: 2px 2px 0 rgba(39, 53, 126, 0.25); }
body.caderno .logo span::before, body.caderno .logo span::after { display: none; }
/* a logo desenhada (dist/logo.svg, gerada por ferramentas/logo/gerar.mjs) só no caderno; no toon fica o letreiro */
.logo-desenho { display: none; }
body.caderno .logo-desenho { display: block; width: min(560px, 82vw); height: auto; margin-left: -18px; }
body.caderno .logo span { display: none; }
body.caderno .marca-fliper, body.caderno .icone { color: var(--tinta-cad); }

/* munição em risquinhos e fita adesiva nos painéis (look caderno) */
.riscos { display: none; }
body.caderno .riscos { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; max-width: 210px; margin-bottom: 4px; }
body.caderno .riscos .g { position: relative; display: inline-flex; gap: 3px; }
body.caderno .riscos i { display: block; width: 2px; height: 15px; background: var(--tinta-cad); border-radius: 1px; }
body.caderno .riscos i:nth-child(2n) { transform: rotate(3deg); }
body.caderno .riscos .g.cinco::after {
  content: ''; position: absolute; left: -3px; right: -3px; top: 50%; height: 2px; background: var(--tinta-cad);
  transform: rotate(-18deg); border-radius: 1px;
}
body.caderno .vida-box::after, body.caderno .municao::after, body.caderno .cartao::after, body.caderno .objetivo::after {
  content: ''; position: absolute; top: -9px; left: 50%; width: 58px; height: 17px;
  background: rgba(214, 198, 160, 0.55); box-shadow: inset 0 0 0 1px rgba(140, 120, 80, 0.25);
  transform: translateX(-50%) rotate(-2.5deg); pointer-events: none;
}
body.caderno .vida-box::after { left: 24px; transform: rotate(-4deg); }
body.caderno .municao::after { left: auto; right: 18px; transform: rotate(3deg); }
body.caderno .cartao { position: relative; }

/* tela inicial no caderno: no lugar da faixa escura, a folha vai clareando por cima do mundo desenhado */
body.caderno #tela-inicio {
  background: linear-gradient(90deg, rgba(251, 248, 238, 0.97) 0%, rgba(251, 248, 238, 0.9) 34%, rgba(251, 248, 238, 0.55) 52%, rgba(251, 248, 238, 0) 72%);
}
body.caderno .chamada { color: var(--tinta-cad); font-size: clamp(18px, 1.8vw, 22px); }
body.caderno .bt.escuro:disabled { background: var(--papel-fundo); border-style: dashed; opacity: 0.75; }
body.caderno .marca-fliper { background: var(--papel-cad); border: 2px solid var(--tinta-cad); box-shadow: 2px 2px 0 rgba(39, 53, 126, 0.25); backdrop-filter: none; }
@media (max-width: 700px) {
  body.caderno #tela-inicio { background: linear-gradient(0deg, rgba(251, 248, 238, 0.98) 0%, rgba(251, 248, 238, 0.9) 60%, rgba(251, 248, 238, 0) 92%); }
}
body.caderno .icone { background: var(--papel-cad); border: 2px solid var(--tinta-cad); box-shadow: 2px 2px 0 rgba(39, 53, 126, 0.25); backdrop-filter: none; }

/* mapa híbrido, antes do ponto cair: a barra do objetivo mostra a tomada do ponto */
.barra-celula.captura .cp, .barra-celula.captura #celula-icone { display: none; }
.barra-celula.captura #celula-fill { background: var(--faisca); }

/* tela de escolha: prévia 3D do mapa (vista de cima) e retrato de cada herói */
.previa-mapa { display: grid; grid-template-columns: minmax(220px, 380px) 1fr; gap: 16px; align-items: center; }
.previa-mapa canvas { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: rgba(0, 0, 0, 0.25); }
.previa-info { display: grid; gap: 4px; }
.previa-info span { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faisca); }
.previa-info b { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1; }
.previa-info p { margin: 0; font-size: 14px; line-height: 1.4; }
.heroi .retrato { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; border-radius: 8px; margin-bottom: 6px; }
body.caderno .previa-mapa canvas { border: 2px solid var(--tinta-cad); box-shadow: 2px 2px 0 rgba(39, 53, 126, 0.25); }
body.caderno .previa-info b { font-family: 'Patrick Hand', var(--texto); color: var(--tinta-cad); }
body.caderno .heroi .retrato { border: 2px solid var(--tinta-cad); background: var(--papel-fundo); }
@media (max-width: 700px) { .previa-mapa { grid-template-columns: 1fr; } }
@media (max-height: 520px) { .previa-mapa, .heroi .retrato { display: none; } }

/* granada: as cargas em bolinhas */
.hab.granada b { font-size: 14px; letter-spacing: 1px; }

/* ─── Online ─── */
.painel-online { width: min(980px, 100%); }
.on-status:empty { display: none; }
.on-entrada { display: grid; gap: 14px; justify-items: start; }
.on-campo { display: grid; gap: 4px; }
.on-campo span { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; }
.on-campo input, .on-codigo input { font: inherit; font-size: 18px; padding: 10px 12px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.25); color: inherit; }
.on-codigo input { width: 9ch; text-transform: uppercase; letter-spacing: 0.2em; text-align: center; }
.on-botoes, .on-codigo { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.on-botoes .bt.grande { flex-direction: column; align-items: flex-start; gap: 0; min-width: 240px; }
.on-sala { display: grid; gap: 14px; }
.on-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.on-sala-cod { font-size: 18px; }
.on-sala-cod b { font-family: var(--display); font-size: 30px; letter-spacing: 0.12em; margin: 0 8px; }
.on-sala-cod small { display: block; font-size: 12px; opacity: 0.75; }
.on-times { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.on-time h3 { margin: 0 0 6px; font-size: 16px; }
.on-time.t0 h3 { color: var(--faisca); }
.on-time.t1 h3 { color: var(--raiz); }
.on-time ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.on-time li { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); }
.on-time li img { width: 38px; height: 38px; object-fit: cover; object-position: 50% 25%; border-radius: 8px; }
.on-time li span { display: grid; }
.on-time li small { font-size: 12px; opacity: 0.8; }
.on-time li.bot { opacity: 0.6; }
.on-time li.eu { box-shadow: inset 0 0 0 2px currentColor; }
.on-herois { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.heroi.mini { padding: 8px; gap: 2px; }
.heroi.mini .retrato { aspect-ratio: 4 / 3; margin-bottom: 4px; }
.heroi.mini .nome { font-size: 18px; }
.res-online { display: none; margin: 0; }
.res-botoes.online { display: none; }
.res-botoes.online + * { display: none; }
#tela-resultado:has(.res-botoes.online) .res-online { display: block; }
body.caderno .on-campo input, body.caderno .on-codigo input { background: var(--papel-fundo); color: var(--tinta-cad); border-color: var(--tinta-cad); }
body.caderno .on-time li { background: var(--papel-fundo); box-shadow: inset 0 0 0 1.5px var(--tinta-cad); }
body.caderno .on-time li.eu { box-shadow: inset 0 0 0 3px var(--tinta-cad); }
@media (max-width: 700px) { .on-times, .on-herois { grid-template-columns: 1fr 1fr; } .on-times { grid-template-columns: 1fr; } }

/* minimapa (gira com a mira: para cima é para onde você olha) e nomes em cima dos aliados */
.minimapa { position: absolute; left: max(14px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); width: 170px; height: 170px; border-radius: 50%; background: rgba(20, 19, 28, 0.55); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
.nomes { position: absolute; inset: 0; overflow: hidden; }
.nomes span { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; font: 800 12px var(--texto); color: #7fb0ff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
body.caderno .minimapa { background: rgba(247, 242, 228, 0.9); box-shadow: 0 0 0 2px var(--tinta-cad), 2px 2px 0 2px rgba(39, 53, 126, 0.25); }
body.caderno .nomes span { font-family: 'Patrick Hand', var(--texto); font-size: 15px; font-weight: 400; color: #2f7bff; text-shadow: 0 0 3px #fff, 0 0 2px #fff; }

@media (max-width: 700px) { .minimapa { width: 120px; height: 120px; } }

/* ─── Controle de celular (js/toque.js) ─── */
.bk-toque, .so-toque { display: none; }
html.bk-toque-ativo .so-teclado { display: none; }
html.bk-toque-ativo .so-toque { display: inline-flex; pointer-events: auto; margin-top: 6px; }
html.bk-toque-ativo body.jogando .bk-toque { display: block; }
.bk-toque { position: fixed; inset: 0; z-index: 22; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.bk-zona { position: absolute; top: 0; bottom: 0; pointer-events: auto; touch-action: none; }
.bk-mover { left: 0; width: 42%; }
.bk-olhar { right: 0; width: 58%; }
.bk-base { position: fixed; left: 110px; top: calc(100% - 110px); width: 124px; height: 124px; margin: -62px 0 0 -62px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.1); display: grid; place-items: center; opacity: 0.45; transition: opacity 0.15s; pointer-events: none; }
.bk-base.ativa { opacity: 1; }
.bk-base i { width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); }
.bk-bt { position: absolute; pointer-events: auto; touch-action: none; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 50%; padding: 0; background: rgba(20, 19, 28, 0.5); color: #fff; font: 800 11px/1 var(--texto); display: grid; place-items: center; align-content: center; gap: 2px; text-align: center; -webkit-tap-highlight-color: transparent; }
.bk-bt.apertado { transform: scale(0.92); background: rgba(255, 255, 255, 0.35); }
.bk-bt.ligado { background: var(--faisca); color: #1a1208; border-color: #fff; }
.bk-tiro { width: 92px; height: 92px; right: calc(max(16px, env(safe-area-inset-right)) + 96px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 70px); background: rgba(255, 106, 61, 0.75); font-size: 14px; }
.bk-tiro2 { width: 64px; height: 64px; left: calc(max(16px, env(safe-area-inset-left)) + 12px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 150px); background: rgba(255, 106, 61, 0.6); }
.bk-pular { width: 66px; height: 66px; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 18px); }
.bk-agachar { width: 56px; height: 56px; right: calc(max(16px, env(safe-area-inset-right)) + 6px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 104px); }
.bk-recarregar { width: 54px; height: 54px; right: calc(max(16px, env(safe-area-inset-right)) + 104px); bottom: max(10px, env(safe-area-inset-bottom)); }
.bk-mirar { width: 60px; height: 60px; right: calc(max(16px, env(safe-area-inset-right)) + 202px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 56px); }
.bk-hab { width: 54px; height: 54px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 178px); }
.bk-hab b { font-family: var(--display); font-weight: 400; font-size: 16px; }
.bk-hab small { font-size: 8.5px; font-weight: 700; max-width: 50px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bk-hab.pronto { border-color: var(--faisca2); box-shadow: 0 0 10px rgba(255, 210, 63, 0.5); }
.bk-hab1 { right: calc(max(16px, env(safe-area-inset-right)) + 190px); }
.bk-hab2 { right: calc(max(16px, env(safe-area-inset-right)) + 128px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 184px); }
.bk-granada { right: calc(max(16px, env(safe-area-inset-right)) + 66px); }
.bk-ult { right: max(16px, env(safe-area-inset-right)); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 178px); }
.bk-ult.pronto { background: rgba(53, 232, 240, 0.55); border-color: #fff; }
.bk-topo { position: absolute; top: max(8px, env(safe-area-inset-top)); left: calc(max(10px, env(safe-area-inset-left)) + 118px); display: flex; gap: 6px; pointer-events: auto; }
.bk-topo button { width: 38px; height: 38px; border-radius: 11px; border: 2px solid rgba(255, 255, 255, 0.6); background: rgba(20, 19, 28, 0.55); color: #fff; font: 900 14px system-ui, sans-serif; touch-action: none; }
/* HUD no celular: o miolo livre; vida e munição em cima, habilidades vão para os botões */
html.bk-toque-ativo .acoes .hab, html.bk-toque-ativo .acoes .ult { display: none; }
html.bk-toque-ativo #clique { display: none !important; }
html.bk-toque-ativo .minimapa { width: 104px; height: 104px; }
html.bk-toque-ativo .vida-box { left: auto; right: calc(max(12px, env(safe-area-inset-right))); top: max(8px, env(safe-area-inset-top)); bottom: auto; min-width: 0; padding: 4px 8px; transform: scale(0.8); transform-origin: top right; }
html.bk-toque-ativo .acoes { top: calc(max(8px, env(safe-area-inset-top)) + 70px); bottom: auto; right: max(12px, env(safe-area-inset-right)); transform: scale(0.75); transform-origin: top right; }
html.bk-toque-ativo .armas { left: 50%; right: auto; transform: translateX(-50%); top: calc(max(8px, env(safe-area-inset-top)) + 78px); bottom: auto; display: flex; gap: 6px; }
html.bk-toque-ativo .armas button { padding: 6px 9px; font-size: 11.5px; }
html.bk-toque-ativo .armas button small { display: none; }
html.bk-toque-ativo .armas button kbd { display: none; }
html.bk-toque-ativo .feed { top: auto; bottom: 40%; right: 50%; transform: translateX(50%) scale(0.85); justify-items: center; }
html.bk-toque-ativo .objetivo { width: min(360px, 44vw); transform: translateX(-50%) scale(0.85); transform-origin: top center; }
html.bk-toque-ativo .morto { pointer-events: auto; }
body.caderno .bk-bt { background: rgba(247, 242, 228, 0.7); color: var(--tinta-cad); border-color: var(--tinta-cad); }
body.caderno .bk-tiro, body.caderno .bk-tiro2 { background: rgba(255, 138, 31, 0.8); color: #1a1208; }
body.caderno .bk-bt.ligado { background: var(--marca); }
body.caderno .bk-base { border-color: var(--tinta-cad); background: rgba(39, 53, 126, 0.08); }
body.caderno .bk-base i { background: rgba(39, 53, 126, 0.55); }
body.caderno .bk-topo button { background: var(--papel-cad); color: var(--tinta-cad); border-color: var(--tinta-cad); }

/* celular deitado (tela baixa): as telas de escolha rolam e o botão de jogar fica sempre à vista */
@media (max-height: 520px) {
  #tela-escolha, #tela-online { place-items: start center; padding: 6px 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #tela-escolha .painel-escolha, #tela-online .painel-escolha { max-height: none; overflow: visible; gap: 8px; padding-bottom: 0; }
  .painel-escolha .base, .on-sala .base { position: sticky; bottom: 0; z-index: 2; padding: 8px 0; background: inherit; }
  body.caderno .painel-escolha .base, body.caderno .on-sala .base { background: var(--papel-cad); }
  body:has(#tela-escolha:not([hidden])) #topo, body:has(#tela-online:not([hidden])) #topo { display: none; }
  .cab h2 { font-size: 20px; }
  .heroi { padding: 8px; }
}

/* ─── Online: lista de salas (aberta entra direto; fechada mostra o cadeado e pede o código) ─── */
.on-fechada small { opacity: 0.7; }
.on-lista { width: 100%; display: grid; gap: 8px; }
.on-lista-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.on-lista-cab h3 { margin: 0; font-size: 16px; }
.on-salas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.on-salas .vazia { opacity: 0.7; font-size: 14px; padding: 8px 2px; }
.on-sala-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 8px 12px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.on-sala-item:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.on-sala-item:disabled { opacity: 0.5; cursor: default; }
.on-sala-item .icone-sala { font-size: 20px; text-align: center; }
.on-sala-item b { display: block; font-size: 15px; }
.on-sala-item small { display: block; font-size: 12px; opacity: 0.8; }
.on-sala-item .acao { font-size: 13px; font-weight: 800; white-space: nowrap; }
.on-sala-item.trancada .acao { opacity: 0.8; }
body.caderno .on-sala-item { background: var(--papel-fundo); border-color: var(--tinta-cad); color: var(--tinta-cad); box-shadow: 2px 2px 0 rgba(39, 53, 126, 0.2); }
/* etiqueta "aberta" no lugar do cadeado e checkbox de sala fechada legível */
.on-sala-item .etiqueta-aberta { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 4px; border-radius: 6px; background: rgba(47, 207, 133, 0.22); color: #2fcf85; }
.on-fechada { color: inherit; opacity: 1; font-size: 14px; display: flex; gap: 8px; align-items: center; }
body.caderno .on-fechada { color: var(--tinta-cad); }
body.caderno .on-sala-item .etiqueta-aberta { background: rgba(15, 158, 92, 0.15); color: #0f7a48; }

/* ─── Online: sala no jeito de lobby (heróis em 3D no palco, painéis por cima) ─── */
body.lobby-online #tela-online { background: none; place-items: stretch; padding: 0; }
body.lobby-online .painel-online { width: 100%; max-height: none; height: 100%; overflow: visible; background: none; border: 0; box-shadow: none; padding: 0; }
body.lobby-online .painel-online > .cab, body.lobby-online #topo { display: none; }
body.lobby-online .on-status { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3; }
.on-sala.lobby { position: absolute; inset: 0; display: block; pointer-events: none; }
.on-sala.lobby > * { pointer-events: auto; }
.lobby-esq { position: absolute; left: max(16px, env(safe-area-inset-left)); top: 16px; width: min(320px, 30vw); display: grid; gap: 10px; max-height: calc(100% - 150px); overflow-y: auto; }
.lobby-ops { display: grid; gap: 6px; }
.lobby-ops .op { justify-content: space-between; }
.lobby-esq .on-times { grid-template-columns: 1fr; gap: 8px; }
.lobby-esq .on-time li { padding: 4px 6px; gap: 8px; }
.lobby-esq .on-time li img { width: 28px; height: 28px; }
.palco-nomes { position: absolute; inset: 0; pointer-events: none !important; }
.palco-nomes .heroi-palco { position: absolute; width: 0; height: 0; }
.palco-nomes .heroi-palco img { position: absolute; left: 0; bottom: 0; height: var(--alto); width: auto; transform: translateX(-50%); filter: drop-shadow(0 6px 6px rgba(20, 30, 80, 0.18)); animation: respira 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.palco-nomes .heroi-palco:nth-child(2) img { animation-delay: -0.8s; } .palco-nomes .heroi-palco:nth-child(3) img { animation-delay: -1.6s; } .palco-nomes .heroi-palco:nth-child(4) img { animation-delay: -2.4s; }
@keyframes respira { 0%, 100% { transform: translateX(-50%) scale(1, 1); } 50% { transform: translateX(-50%) scale(1.006, 1.012); } }
.palco-nomes .nome-palco { position: absolute; left: 0; bottom: calc(var(--alto) + 6px); transform: translateX(-50%); text-align: center; white-space: nowrap; }
.palco-nomes .nome-palco b { display: block; font-size: 16px; font-weight: 800; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.palco-nomes .nome-palco small { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.palco-nomes .nome-palco .pronto { color: #2fcf85; }
.palco-nomes .nome-palco .espera { color: #ff5d5d; }
.palco-nomes .nome-palco .bot { opacity: 0.7; }
.lobby-dir { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: 150px; width: min(300px, 30vw); display: grid; gap: 10px; justify-items: stretch; }
.lobby-modo { display: grid; gap: 4px; text-align: center; }
.lobby-modo small { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.lobby-modo b { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; }
.bt-pronto { font-family: var(--display); font-size: 34px; letter-spacing: 0.04em; padding: 16px 12px; border: 0; border-radius: 14px; cursor: pointer; background: var(--faisca2); color: #1a1208; transform: skew(-6deg); box-shadow: 0 6px 0 #b8901a, 0 10px 24px rgba(0, 0, 0, 0.3); }
.bt-pronto:active { transform: skew(-6deg) translateY(4px); box-shadow: 0 2px 0 #b8901a; }
.bt-pronto.sel { background: #2fcf85; box-shadow: 0 6px 0 #1b8a57, 0 10px 24px rgba(0, 0, 0, 0.3); }
.lobby-herois { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom)); width: min(620px, 60vw); grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lobby-herois .heroi.mini { padding: 6px; }
.lobby-herois .heroi.mini .retrato { aspect-ratio: 16 / 10; }
.lobby-herois .heroi.mini .nome { font-size: 15px; }
body.caderno .palco-nomes .nome-palco b { color: var(--tinta-cad); text-shadow: 0 0 4px #fff, 0 0 2px #fff; font-family: 'Patrick Hand', var(--texto); font-size: 20px; font-weight: 400; }
body.caderno .palco-nomes .nome-palco small { text-shadow: 0 0 3px #fff; }
body.caderno .lobby-modo b, body.caderno .bt-pronto { font-family: 'Patrick Hand', var(--texto); }
body.caderno .bt-pronto { border: 3px solid var(--tinta-cad); box-shadow: 4px 4px 0 var(--tinta-cad); }
body.caderno .bt-pronto.sel { background: #7ee0b0; box-shadow: 4px 4px 0 var(--tinta-cad); }
@media (max-height: 520px) {
  .lobby-esq { top: 8px; width: min(250px, 32vw); max-height: calc(100% - 100px); gap: 6px; padding: 8px; }
  .lobby-esq .on-time li small { display: none; }
  .lobby-dir { bottom: 96px; width: min(220px, 30vw); gap: 6px; }
  .lobby-modo b { font-size: 20px; }
  .bt-pronto { font-size: 24px; padding: 10px; }
  .lobby-herois { width: min(460px, 56vw); }
  .lobby-herois .heroi.mini .retrato, .lobby-herois .heroi.mini .papel { display: none; }
}
/* lobby: nada de desfoque nem véu de papel por cima do palco (o cartão grande só organiza os painéis) */
body.lobby-online .painel-online, body.caderno.lobby-online .painel-online { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.lobby-online #tela-online, body.caderno.lobby-online #tela-online { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.lobby-esq { width: min(260px, 27vw); }
.lobby-dir { width: min(250px, 27vw); }
.lobby-esq .on-time li.bot { display: none; } /* na lateral só as pessoas; os bots já aparecem no palco */

/* ─── Conta da FliperamIA: botão no topo e aviso na tela de Online ─── */
.conta-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 4px; border-radius: 12px; border: 0; cursor: pointer; background: rgba(20, 19, 28, 0.6); color: #fff; font: 800 14px var(--texto); backdrop-filter: blur(8px); }
.conta-chip:not(:has(.avatar)) { padding: 0 14px; background: #8b5cf6; }
.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; }
.on-conta small { display: block; font-size: 12px; opacity: 0.75; max-width: 420px; }
.on-conta b { font-size: 16px; }
body.caderno .conta-chip { background: var(--papel-cad); color: var(--tinta-cad); border: 2px solid var(--tinta-cad); box-shadow: 2px 2px 0 rgba(39, 53, 126, 0.25); backdrop-filter: none; }
body.caderno .conta-chip:not(:has(.avatar)) { background: var(--marca); }

/* ─── Indicadores: direção do dano, números de dano, marcações e câmera da morte ─── */
.dano-dir { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dano-dir i { position: absolute; left: 50%; top: 50%; width: 46vmin; height: 46vmin; margin: -23vmin 0 0 -23vmin; border-radius: 50%; border-top: 9px solid rgba(255, 45, 58, 0.9); filter: drop-shadow(0 0 6px rgba(255, 0, 20, 0.7)); transition: opacity 0.1s; }
body.caderno .dano-dir i { border-top-color: #d05a5a; filter: none; }
.numeros { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.numeros b { position: absolute; transform: translate(-50%, -100%); font: 400 20px var(--display); color: #fff; text-shadow: 0 2px 0 #000, 0 0 4px #000; white-space: nowrap; }
.numeros b.cabeca { color: #ffd23f; font-size: 26px; }
body.caderno .numeros b { font-family: 'Patrick Hand', var(--texto); font-size: 25px; color: #d05a5a; text-shadow: 0 0 3px #fff, 0 0 2px #fff; }
body.caderno .numeros b.cabeca { color: #e07a1f; font-size: 32px; }
.marcas { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.marcas span { position: absolute; transform: translate(-50%, -100%); display: grid; justify-items: center; gap: 1px; font: 800 12px var(--texto); color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.marcas span i { width: 14px; height: 14px; transform: rotate(45deg); background: #35e8f0; border: 2px solid #fff; margin-bottom: 4px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); }
.marcas span.inimigo i { background: #ff2d3a; }
.marcas span small { font-weight: 700; opacity: 0.85; }
body.caderno .marcas span { font-family: 'Patrick Hand', var(--texto); font-size: 16px; font-weight: 400; color: #27357e; text-shadow: 0 0 3px #fff, 0 0 2px #fff; }
body.caderno .marcas span i { border-color: #27357e; box-shadow: none; }
.morto-algoz { display: block; font-size: 13px; margin-top: 4px; opacity: 0.9; }
.bk-marcar { width: 46px; height: 46px; font-size: 18px; right: calc(max(16px, env(safe-area-inset-right)) + 12px); top: calc(max(12px, env(safe-area-inset-top)) + 64px); bottom: auto; }

/* ─── Medalhas, roda de mensagens, destaques do fim ─── */
.medalhas { position: absolute; left: 50%; top: calc(50% + 70px); transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; pointer-events: none; }
.medalhas b { font: 400 22px var(--display); color: #ffd23f; text-shadow: 0 2px 0 #000, 0 0 6px #000; white-space: nowrap; }
body.caderno .medalhas b { font-family: 'Patrick Hand', var(--texto); font-size: 28px; color: #e07a1f; text-shadow: 0 0 3px #fff, 0 0 2px #fff; }
.roda { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(10, 10, 20, 0.5) 0, rgba(10, 10, 20, 0.5) 200px, transparent 201px); }
.roda-centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 800 13px var(--texto); color: #fff; opacity: 0.8; }
.roda span { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; padding: 6px 10px; border-radius: 10px; background: rgba(20, 19, 28, 0.88); color: #fff; font: 800 13px var(--texto); white-space: nowrap; border: 2px solid transparent; }
.roda span.sel { border-color: #ffd23f; background: #ffd23f; color: #1a1208; }
body.caderno .roda { background: radial-gradient(circle at 50% 50%, rgba(247, 242, 228, 0.88) 0, rgba(247, 242, 228, 0.88) 200px, transparent 201px); }
body.caderno .roda span { background: var(--papel-cad); color: var(--tinta-cad); border-color: var(--tinta-cad); font-family: 'Patrick Hand', var(--texto); font-size: 16px; font-weight: 400; }
body.caderno .roda span.sel { background: var(--marca); }
body.caderno .roda-centro { color: var(--tinta-cad); }
.res-destaques { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 8px 0 14px; }
.destaque { display: grid; justify-items: center; gap: 2px; padding: 10px 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); text-align: center; }
.destaque img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; }
.destaque small { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.destaque b { font-size: 15px; }
.destaque span { font-size: 12px; opacity: 0.85; }
.destaque.mvp { background: rgba(255, 210, 63, 0.18); outline: 2px solid #ffd23f; }
body.caderno .destaque { background: var(--papel-fundo); border: 2px solid var(--tinta-cad); }
body.caderno .destaque.mvp { background: #fff3c4; outline: none; border-color: #e07a1f; }
.bk-roda { width: 46px; height: 46px; font-size: 18px; right: calc(max(16px, env(safe-area-inset-right)) + 12px); top: calc(max(12px, env(safe-area-inset-top)) + 118px); bottom: auto; }

/* ─── Pausa: ajustes (mira, sensibilidade e cores, teclas) ─── */
.pequeno-cartao { max-height: 92vh; overflow-y: auto; }
.ajustes { text-align: left; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 8px; }
.ajustes summary { cursor: pointer; font-weight: 800; font-size: 14px; list-style: none; }
.ajustes summary::-webkit-details-marker { display: none; }
.ajustes summary::before { content: '▸ '; } .ajustes[open] summary::before { content: '▾ '; }
.ajustes > div { display: grid; gap: 8px; margin-top: 8px; }
.ajustes select { font: inherit; font-size: 13px; padding: 4px 6px; border-radius: 8px; max-width: 60%; }
.linha-op { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.op-teclas { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 13px; align-items: center; }
.op-teclas button { min-width: 78px; font: 800 12px var(--texto); padding: 4px 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); color: inherit; cursor: pointer; }
.op-teclas button.esperando { background: var(--faisca2); color: #1a1208; }
body.caderno .ajustes { border-top-color: rgba(39, 53, 126, 0.25); }
body.caderno .op-teclas button { border-color: var(--tinta-cad); background: var(--papel-fundo); color: var(--tinta-cad); }
/* mira personalizada (tamanho, espessura, cor e ponto) */
.mira i:nth-child(1), .mira i:nth-child(2) { width: var(--mira-esp, 2px); height: var(--mira-tam, 8px); left: calc(var(--mira-esp, 2px) / -2); }
.mira i:nth-child(3), .mira i:nth-child(4) { height: var(--mira-esp, 2px); width: var(--mira-tam, 8px); top: calc(var(--mira-esp, 2px) / -2); }
.mira i:nth-child(1) { top: calc(-1 * var(--mira-tam, 8px) - var(--gap, 6px)); }
.mira i:nth-child(3) { left: calc(-1 * var(--mira-tam, 8px) - var(--gap, 6px)); }
.mira.sem-ponto b { display: none; }
.mira.cor-propria i, .mira.cor-propria b, body.caderno .mira.cor-propria i, body.caderno .mira.cor-propria b { background: var(--mira-cor); }
/* cores dos times escolhidas (daltonismo) */
body.caderno .nomes span { color: var(--cor-aliado, #2f7bff); }
.marcas span.inimigo i { background: var(--cor-inimigo, #ff2d3a); }

/* caderno: rótulos das opções da pausa legíveis no papel */
body.caderno .check, body.caderno .campo-range, body.caderno .linha-op { color: var(--tinta-cad); }

/* ─── Tutorial e campo de tiro ─── */
.tutorial { position: absolute; left: max(16px, env(safe-area-inset-left)); top: 210px; display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: rgba(20, 19, 28, 0.74); color: #fff; font: 700 13px var(--texto); max-width: 290px; pointer-events: none; }
.tutorial b { font-size: 14px; margin-bottom: 2px; }
.tutorial span.feito { opacity: 0.55; text-decoration: line-through; }
body.caderno .tutorial { background: var(--papel-cad); color: var(--tinta-cad); border: 2px solid var(--tinta-cad); font-family: 'Patrick Hand', var(--texto); font-size: 16px; font-weight: 400; }
.bt.novo { box-shadow: 0 0 0 3px #ffd23f, 0 0 16px rgba(255, 210, 63, 0.6); }
@media (max-height: 520px) { .tutorial { top: 150px; font-size: 11px; max-width: 220px; } }

/* ─── Perfil: nível, desafios e desbloqueios ─── */
.perfil-cartao { display: grid; gap: 4px; width: 100%; max-width: 420px; margin-top: 6px; padding: 12px 14px; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(10, 9, 16, 0.55); }
.perfil-cartao:empty { display: none; }
.perfil-cartao b, .perfil-topo b { font-size: 17px; }
.perfil-cartao .titulo, .perfil-topo .titulo { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.desafios-resumo { font-size: 12px; opacity: 0.85; }
.nivel-linha { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.nivel-selo { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px; font-weight: 900; background: #ffd23f; color: #1b1a22; }
.nivel-barra { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.nivel-barra i { display: block; height: 100%; background: #ffd23f; border-radius: inherit; transition: width 0.8s ease; }
.nivel-linha small { font-size: 11px; opacity: 0.8; white-space: nowrap; }
.cartao.perfil { width: min(620px, 100%); display: grid; gap: 10px; text-align: left; }
.cartao.perfil h3 { margin: 6px 0 0; font-size: 15px; }
.cartao.perfil h3 small { font-weight: 400; font-size: 12px; opacity: 0.75; margin-left: 6px; }
.perfil-topo { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); }
.perfil-topo > small { font-size: 12px; opacity: 0.8; }
.perfil-aviso { margin: 0; font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.desafios { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.desafios li { display: grid; grid-template-columns: 1fr minmax(80px, 30%) auto; align-items: center; gap: 10px; font-size: 14px; }
.desafios li small { font-size: 12px; min-width: 70px; text-align: right; opacity: 0.85; }
.desafios li.feito span { text-decoration: line-through; opacity: 0.7; }
.desafios li.feito .nivel-barra i { background: #39c46a; }
.desbloqs { display: flex; flex-wrap: wrap; gap: 6px; }
.desbloq { display: grid; gap: 1px; padding: 7px 10px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 700; color: inherit; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); cursor: pointer; text-align: left; }
.desbloq small { font-size: 10px; font-weight: 400; opacity: 0.8; }
.desbloq.sel { outline: 2px solid #ffd23f; }
.desbloq:disabled, .desbloq.trancado { opacity: 0.45; cursor: default; }
.desbloq.cor { grid-template-columns: auto 1fr; column-gap: 6px; cursor: default; }
.desbloq.cor i { grid-row: span 2; width: 14px; height: 14px; border-radius: 50%; align-self: center; }
.res-xp { display: grid; gap: 8px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); text-align: left; }
.xp-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.xp-total b { font-size: 22px; color: #ffd23f; }
.xp-total .subiu { font-weight: 800; animation: xp-pulo 0.6s ease 2; }
@keyframes xp-pulo { 50% { transform: scale(1.12); } }
.xp-ganhos { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.xp-ganhos span { padding: 3px 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); }
.xp-desafios, .xp-novos { margin: 0; font-size: 13px; font-weight: 700; }
/* molduras (desbloqueios) */
.moldura-fita { position: relative; }
.moldura-fita::before { content: ''; position: absolute; top: -8px; left: 50%; width: 70px; height: 18px; transform: translateX(-50%) rotate(-3deg); background: rgba(255, 226, 140, 0.8); }
.moldura-carimbo { border: 2px dashed #d05a5a !important; }
.moldura-marca { box-shadow: inset 0 -12px 0 rgba(125, 255, 154, 0.35); }
.moldura-ouro { border: 2px solid #e0a800 !important; box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.25); }
body.caderno .perfil-cartao, body.caderno .perfil-topo, body.caderno .res-xp, body.caderno .desbloq { background: var(--papel-fundo); color: var(--tinta-cad); border: 2px solid var(--tinta-cad); }
body.caderno .nivel-barra { background: var(--papel-fundo); box-shadow: inset 0 0 0 1.5px var(--tinta-cad); }
body.caderno .nivel-barra i { background: repeating-linear-gradient(45deg, var(--tinta-cad) 0 3px, transparent 3px 7px), #ffd66b; }
body.caderno .nivel-selo { background: var(--marca); color: var(--tinta-cad); box-shadow: inset 0 0 0 2px var(--tinta-cad); }
body.caderno .xp-total b { color: #e07a1f; }
body.caderno .xp-ganhos span { background: #fff3c4; }
body.caderno .desbloq.sel { outline-color: #e07a1f; }

/* ─── Ranqueada ─── */
.bt.ranqueada { background: linear-gradient(135deg, #3a2a6b, #6b2f8a); color: #fff; }
.on-ranque { display: grid; gap: 10px; margin: 10px 0; }
.meu-ranque { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); }
.meu-ranque b { font-size: 20px; grid-row: span 2; }
.meu-ranque small { font-size: 12px; opacity: 0.8; }
.topo-ranque h3 { margin: 0 0 6px; font-size: 14px; }
.topo-ranque ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.topo-ranque li { display: grid; grid-template-columns: 22px 1fr auto 48px; gap: 8px; font-size: 13px; align-items: center; }
.topo-ranque li i { font-style: normal; font-weight: 900; opacity: 0.7; }
.topo-ranque li small { text-align: right; font-weight: 700; }
.on-rank-aviso { margin: 0 0 8px; font-weight: 700; text-align: center; }
.res-ranque { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); }
.res-ranque b { font-size: 22px; }
.res-ranque b.ganhou { color: #39c46a; }
.res-ranque b.perdeu { color: #e05555; }
body.caderno .bt.ranqueada { background: #efe4ff; color: var(--tinta-cad); }
body.caderno .meu-ranque, body.caderno .res-ranque { background: var(--papel-fundo); color: var(--tinta-cad); border: 2px solid var(--tinta-cad); }
body.caderno .res-ranque b.ganhou { color: #1f8a46; }
body.caderno .res-ranque b.perdeu { color: var(--vermelho-cad); }
#on-cod.rank { display: block; font-size: 0.8em; letter-spacing: 0.06em; white-space: nowrap; }

/* nível no online (lobby e placar) e recompensas da temporada */
em.nv { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 4px; margin-right: 6px; border-radius: 6px; font-style: normal; font-size: 11px; font-weight: 900; background: #ffd23f; color: #1b1a22; vertical-align: 1px; }
body.caderno em.nv { background: var(--marca); color: var(--tinta-cad); box-shadow: inset 0 0 0 1.5px var(--tinta-cad); }
.on-ranque .temporada { margin: 0; font-size: 12px; opacity: 0.85; }
.desbloqs small.vazio { font-size: 12px; opacity: 0.75; }
.moldura-tinta { border: 2px solid #3a2a6b !important; box-shadow: 4px 4px 0 #b77bff; }
/* placar do resultado no celular: rola de lado em vez de cortar; nome com o selo de nível numa linha só */
.res-placar { overflow-x: auto; max-width: 100%; }
.res-placar .tabela td:first-child { white-space: nowrap; }