/* ==========================================================================
   FLAVIO vs LULA: A BATALHA DO MARTELO
   UI cartunesca (todas as telas em DOM sobre o canvas 3D)
   ========================================================================== */

/* O atributo [hidden] precisa vencer qualquer display definido no CSS
   (ex.: .credits-links usa display:flex para as ferramentas internas). */
[hidden] { display: none !important; }

:root {
  --verde: #0b9d4e;
  --verde-esc: #056337;
  --amarelo: #ffd60a;
  --amarelo-esc: #e8a700;
  --azul: #12408f;
  --azul-claro: #2f6fd0;
  --vermelho: #e3362f;
  --vermelho-esc: #9c1a15;
  --roxo: #6a2ea8;
  --tinta: #171a2e;
  --papel: #fff8e7;
  --sombra: 0 6px 0 rgba(0, 0, 0, .35);
  --fonte: 'Baloo 2', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --fonte-titulo: 'Luckiest Guy', 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #05060f;
  color: var(--papel);
  font-family: var(--fonte);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  cursor: default;
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
  z-index: 2;
}

#flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: #fff;
  opacity: 0;
  z-index: 40;
  transition: opacity .09s linear;
}

/* ------------------------------- UI ROOT ------------------------------- */
#ui {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: clamp(12px, 2.4vw, 34px);
  overflow: auto;
  pointer-events: auto;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(18,64,143,.55), transparent 70%),
    radial-gradient(900px 600px at 10% 110%, rgba(11,157,78,.35), transparent 70%),
    linear-gradient(180deg, rgba(5,6,15,.90), rgba(5,6,15,.96));
  backdrop-filter: blur(3px);
}
.screen.is-active { display: flex; }
.screen-overlay { justify-content: flex-start; align-items: center; background: rgba(5,6,15,.72); }

.hidden { display: none !important; }
#hud.mirror .hud-top { direction: rtl; }
#hud.mirror .fighter-card { direction: ltr; }
.muted { color: #a9b3cc; font-size: 14px; }
.mt { margin-top: 18px; }

/* ------------------------------- BUTTONS ------------------------------- */
.btn {
  font-family: var(--fonte);
  font-weight: 800;
  font-size: 17px;
  color: var(--tinta);
  background: linear-gradient(180deg, #ffe680, var(--amarelo) 55%, var(--amarelo-esc));
  border: 3px solid var(--tinta);
  border-radius: 14px;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.6);
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.15;
  text-align: center;
}
.btn small { font-weight: 600; font-size: 12px; opacity: .78; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.6); filter: saturate(1.1); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.4); }
.btn:disabled { filter: grayscale(.8) brightness(.75); cursor: not-allowed; transform: none; }

.btn-big { font-size: 21px; padding: 12px 26px; min-width: min(430px, 88vw); }
.btn-chaos { background: linear-gradient(180deg, #d0a8ff, #a466e8 55%, #6a2ea8); color: #fff; }
.btn-go { background: linear-gradient(180deg, #7ef2a8, var(--verde) 55%, var(--verde-esc)); color: #04240f; font-size: 26px; padding: 14px 40px; }
.btn-ghost { background: linear-gradient(180deg, #ffffff22, #ffffff10); color: var(--papel); border-color: #ffffff55; box-shadow: 0 4px 0 rgba(0,0,0,.4); }
.btn-danger { background: linear-gradient(180deg, #ff9b96, var(--vermelho) 55%, var(--vermelho-esc)); color: #fff; }

/* ------------------------------- TITLE ------------------------------- */
/* Centralizacao "segura": se o conteudo for mais alto que a janela, ele comeca
   do topo e a tela rola, em vez de cortar o titulo em cima (bug do flexbox). */
#screen-title { justify-content: flex-start; align-items: center; text-align: center; }
.title-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: min(1000px, 100%); margin: auto 0; }
.title-badge {
  font-weight: 800; letter-spacing: 3px; font-size: 13px;
  background: var(--roxo); border: 3px solid var(--tinta); border-radius: 999px;
  padding: 5px 16px; box-shadow: var(--sombra); margin-bottom: 6px;
}
.game-title {
  font-family: var(--fonte-titulo);
  font-size: clamp(38px, 8.4vw, 108px);
  margin: 0; line-height: .92; letter-spacing: 2px;
  display: flex; flex-wrap: wrap; gap: 0 .35em; justify-content: center; align-items: center;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.55));
}
.t-flavio { color: #ffdf3d; -webkit-text-stroke: 3px #6b4b00; }
.t-vs { color: #fff; font-size: .55em; -webkit-text-stroke: 3px #7a1010; transform: rotate(-8deg); }
.t-lula { color: #7fd0ff; -webkit-text-stroke: 3px #0b2f63; }
.game-subtitle {
  font-family: var(--fonte-titulo);
  font-size: clamp(18px, 3.4vw, 40px);
  margin: 0 0 4px; color: #fff;
  letter-spacing: 4px;
  text-shadow: 0 4px 0 #b3123a, 0 0 18px rgba(255,215,10,.55);
}
.title-tagline { max-width: 640px; font-size: 16px; color: #dfe6ff; margin: 4px 0 14px; }
.menu { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.menu-row { flex-direction: row; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.disclaimer { max-width: 720px; font-size: 11.5px; color: #8f9ab7; margin-top: 20px; line-height: 1.5; }

/* ------------------------------- SCREEN HEAD ------------------------------- */
.screen-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.screen-head h2 { font-family: var(--fonte-titulo); font-size: clamp(20px, 3vw, 34px); margin: 0; letter-spacing: 1.5px; }
.head-right { margin-left: auto; }
.tag { background: var(--azul); border: 3px solid var(--tinta); border-radius: 999px; padding: 4px 14px; font-weight: 800; font-size: 13px; letter-spacing: 1.5px; }

/* ------------------------------- SELECT ------------------------------- */
.select-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 2vw, 26px); }
.select-pane { background: rgba(255,255,255,.05); border: 3px solid rgba(255,255,255,.15); border-radius: 18px; padding: 12px; }
.select-pane.pane-disabled { opacity: .35; filter: grayscale(.7); }
.pane-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pane-key { background: var(--amarelo); color: var(--tinta); font-weight: 800; border-radius: 8px; padding: 2px 10px; border: 2px solid var(--tinta); }
.pane-key-2 { background: var(--azul-claro); color: #fff; }
.pane-name { font-weight: 800; font-size: 18px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.card {
  position: relative; cursor: pointer; border-radius: 14px; border: 3px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  padding: 8px 6px 6px; text-align: center; transition: transform .09s ease, border-color .12s ease, box-shadow .12s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--amarelo); }
.card.selected { border-color: var(--amarelo); box-shadow: 0 0 0 3px rgba(255,214,10,.35), 0 8px 20px rgba(0,0,0,.45); transform: translateY(-2px); }
.card .avatar { font-size: 40px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0,0,0,.5)); }
.card .cname { font-weight: 800; font-size: 13px; margin-top: 4px; }
.card .ctag { font-size: 10.5px; color: #b9c3dd; }
.card .lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; background: rgba(5,6,15,.78); border-radius: 11px; font-weight: 800; font-size: 12px; gap: 2px; }
.card .lock span { font-size: 22px; }
.card.p2sel { border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgba(47,111,208,.35); }

.select-foot { display: grid; grid-template-columns: 1.1fr 1.3fr auto; gap: clamp(10px, 2vw, 26px); margin-top: 16px; align-items: stretch; }
.fighter-info, .arena-picker { background: rgba(255,255,255,.05); border: 3px solid rgba(255,255,255,.15); border-radius: 18px; padding: 12px 14px; }
.fighter-info h3, .arena-picker h3 { margin: 0 0 6px; font-family: var(--fonte-titulo); letter-spacing: 1px; font-size: 20px; }
.fighter-info p { margin: 0 0 8px; font-size: 13.5px; color: #dfe6ff; }
.stats { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 5px; }
.stats li { display: grid; grid-template-columns: 78px 1fr 34px; align-items: center; gap: 8px; font-size: 12px; }
.stats .bar { height: 9px; background: rgba(0,0,0,.45); border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); }
.stats .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--verde), var(--amarelo)); }
.special-box { border-top: 2px dashed rgba(255,255,255,.2); padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.special-label { font-size: 11px; letter-spacing: 2px; color: var(--amarelo); font-weight: 800; }
.special-box strong { font-size: 15px; }
.special-box em { font-size: 12px; color: #b9c3dd; font-style: normal; }
.arena-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.arena-chip { cursor: pointer; border-radius: 12px; border: 3px solid rgba(255,255,255,.18); padding: 6px; text-align: center; font-size: 11.5px; font-weight: 800; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)); }
.arena-chip .aicon { font-size: 22px; display: block; }
.arena-chip:hover { border-color: var(--verde); }
.arena-chip.selected { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(11,157,78,.35); }
.arena-blurb { margin-top: 8px; font-size: 12.5px; color: #b9c3dd; min-height: 32px; }
.select-cta { display: flex; flex-direction: column; justify-content: center; gap: 10px; }

/* ------------------------------- CAMPAIGN ------------------------------- */
.camp-body { display: grid; grid-template-columns: 1.4fr .9fr; gap: 20px; }
.stage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stage { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; background: rgba(255,255,255,.05); border: 3px solid rgba(255,255,255,.15); border-radius: 16px; padding: 10px 14px; }
.stage.done { border-color: var(--verde); background: rgba(11,157,78,.16); }
.stage.current { border-color: var(--amarelo); background: rgba(255,214,10,.12); box-shadow: 0 0 22px rgba(255,214,10,.25); }
.stage .snum { font-family: var(--fonte-titulo); font-size: 30px; color: var(--amarelo); text-align: center; }
.stage .sname { font-weight: 800; font-size: 16px; }
.stage .sdesc { font-size: 12px; color: #b9c3dd; }
.stage .sstatus { font-weight: 800; font-size: 13px; }
.camp-side { display: flex; flex-direction: column; gap: 14px; }
.camp-progress-box, .camp-locked { background: rgba(255,255,255,.05); border: 3px solid rgba(255,255,255,.15); border-radius: 16px; padding: 12px; }
.pips { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.pips i { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.18); border: 2px solid rgba(0,0,0,.4); }
.pips i.on { background: var(--amarelo); }

/* ------------------------------- HELP / CREDITS ------------------------------- */
.help-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.help-col { background: rgba(255,255,255,.05); border: 3px solid rgba(255,255,255,.15); border-radius: 18px; padding: 14px; }
.help-col h3 { margin: 0 0 10px; font-family: var(--fonte-titulo); letter-spacing: 1px; }
.keylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.keylist li { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.keylist li span { margin-left: auto; color: #c8d2ea; }
kbd { background: #22283e; border: 2px solid #4a5474; border-bottom-width: 4px; border-radius: 7px; padding: 1px 7px; font-size: 11.5px; font-weight: 800; font-family: var(--fonte); }
.tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 13.5px; }
.tips li { background: rgba(0,0,0,.25); border-left: 4px solid var(--amarelo); border-radius: 8px; padding: 7px 10px; }
.credits-body { max-width: 840px; display: grid; gap: 14px; font-size: 15px; line-height: 1.6; }
.credits-links { display: flex; gap: 10px; flex-wrap: wrap; }
code { background: rgba(255,255,255,.12); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }

/* ------------------------------- SETTINGS ------------------------------- */
.settings-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.set-col { background: rgba(255,255,255,.05); border: 3px solid rgba(255,255,255,.15); border-radius: 18px; padding: 14px; }
.set-col h3 { margin: 0 0 12px; font-family: var(--fonte-titulo); letter-spacing: 1px; }
.set-col .row { display: grid; grid-template-columns: 1fr 130px 46px; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 14px; }
.set-col .row select { grid-column: span 2; }
.set-col .row b { text-align: right; font-size: 12.5px; color: var(--amarelo); }
input[type="range"] { appearance: none; height: 10px; border-radius: 6px; background: rgba(0,0,0,.5); border: 2px solid #3b4467; outline: none; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--amarelo); border: 3px solid var(--tinta); cursor: pointer; }
input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--verde); cursor: pointer; }
select { font-family: var(--fonte); font-weight: 700; font-size: 13.5px; background: #1a2038; color: var(--papel); border: 3px solid #3b4467; border-radius: 10px; padding: 6px 8px; cursor: pointer; }
.settings-foot { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ------------------------------- PANEL (pause) ------------------------------- */
.panel { background: rgba(10,14,28,.96); border: 4px solid var(--amarelo); border-radius: 22px; padding: 26px 34px; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.6); max-width: 100%; margin: auto; }
.panel h2 { font-family: var(--fonte-titulo); font-size: 34px; margin: 0 0 4px; letter-spacing: 2px; color: var(--amarelo); }

/* ------------------------------- RESULTS ------------------------------- */
#screen-results { justify-content: flex-start; align-items: center; }
.result-wrap { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: min(860px, 100%); margin: auto 0; }
.result-banner {
  font-family: var(--fonte-titulo); font-size: clamp(40px, 9vw, 96px); letter-spacing: 4px; line-height: 1;
  color: var(--amarelo); -webkit-text-stroke: 3px #6b4b00; filter: drop-shadow(0 8px 0 rgba(0,0,0,.5));
  animation: bannerIn .5s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes bannerIn { from { transform: scale(.5) rotate(-8deg); opacity: 0; } to { transform: scale(1) rotate(-3deg); opacity: 1; } }
#result-title { font-size: clamp(18px, 3vw, 28px); margin: 0; }
.quote { color: #cfe0ff; font-style: italic; font-size: 16px; max-width: 620px; }
.result-stats { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 6px 0 8px; }
.stat-chip { background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.18); border-radius: 12px; padding: 6px 12px; font-size: 12.5px; }
.stat-chip b { display: block; font-size: 18px; color: var(--amarelo); }
.result-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ------------------------------- HUD ------------------------------- */
#hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--fonte); }
.hud-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; gap: 10px; padding: 10px clamp(8px, 2vw, 26px) 0; }

.fighter-card { display: flex; gap: 8px; flex: 1; max-width: 42%; }
.fighter-card.mirrored { flex-direction: row-reverse; }
.fighter-card.card-flavio { background: linear-gradient(180deg, rgba(11,157,78,.18), rgba(255,214,10,.12)); border-radius: 16px; padding: 6px 8px; }
.fighter-card.card-lula { background: linear-gradient(180deg, rgba(193,18,31,.18), rgba(255,214,10,.12)); border-radius: 16px; padding: 6px 8px; }
.portrait {
  width: 54px; height: 54px; flex: 0 0 54px; border-radius: 12px; border: 3px solid var(--tinta);
  background: linear-gradient(180deg, var(--azul-claro), var(--azul)); display: grid; place-items: center; font-size: 28px;
  box-shadow: 0 4px 0 rgba(0,0,0,.45);
}
.fighter-card.mirrored .portrait { background: linear-gradient(180deg, #ff8b6a, var(--vermelho)); }
.bars { flex: 1; min-width: 0; }
.name-row { display: flex; align-items: center; gap: 8px; }
.fighter-card.mirrored .name-row { flex-direction: row-reverse; }
.fname { font-weight: 800; font-size: 15px; letter-spacing: 1px; text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.hpbar { position: relative; height: 17px; background: rgba(0,0,0,.62); border: 3px solid var(--tinta); border-radius: 10px; overflow: hidden; margin-top: 2px; box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.hpbar i { position: absolute; inset: 1px auto 1px 1px; border-radius: 6px; }
.hp-ghost { background: rgba(255,255,255,.85); width: 100%; transition: width .45s ease .12s; }
.hp-fill { background: linear-gradient(180deg, #8bf5a0, var(--verde) 60%, var(--verde-esc)); width: 100%; transition: width .18s ease; }
.hp-fill.mid { background: linear-gradient(180deg, #ffe680, var(--amarelo) 60%, var(--amarelo-esc)); }
.hp-fill.low { background: linear-gradient(180deg, #ff9b96, var(--vermelho) 60%, var(--vermelho-esc)); animation: pulse .5s infinite alternate; }
@keyframes pulse { from { filter: brightness(1); } to { filter: brightness(1.45); } }
.fighter-card.mirrored .hpbar i { inset: 1px 1px 1px auto; }
.hp-label { position: absolute; right: 7px; top: 0; bottom: 0; display: grid; place-items: center; font-style: normal; font-size: 11.5px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000; }
.fighter-card.mirrored .hp-label { right: auto; left: 7px; }

.meter { position: relative; height: 11px; margin-top: 4px; background: rgba(0,0,0,.6); border: 2px solid var(--tinta); border-radius: 8px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #7ce7ff, #2f6fd0 60%, #6a2ea8); transition: width .2s ease; }
.meter.ready i { background: linear-gradient(90deg, #ffe680, #ff9f1c 60%, #e3362f); animation: pulse .35s infinite alternate; }
.meter.ready { box-shadow: 0 0 14px rgba(255,159,28,.85); }
.meter-tag { position: absolute; right: 6px; top: -1px; font-size: 8.5px; font-weight: 800; letter-spacing: 1px; color: rgba(255,255,255,.75); }
.pips { display: flex; gap: 5px; margin-top: 4px; }
.pips.right { justify-content: flex-end; }
.pips i { width: 13px; height: 13px; border-radius: 50%; background: rgba(255,255,255,.2); border: 2px solid rgba(0,0,0,.55); }
.pips i.on { background: var(--verde); box-shadow: 0 0 10px rgba(11,157,78,.9); }
.pips i.lose { background: #4a4f66; }

.combo { font-weight: 800; font-size: 12.5px; color: var(--amarelo); background: rgba(0,0,0,.55); border-radius: 999px; padding: 1px 9px; border: 2px solid var(--amarelo); }

.hud-center { text-align: center; min-width: 132px; }
.timer { font-family: var(--fonte-titulo); font-size: clamp(30px, 4.6vw, 52px); line-height: 1; color: #fff; text-shadow: 0 4px 0 rgba(0,0,0,.6); }
.timer.warn { color: var(--vermelho); animation: pulse .3s infinite alternate; }
.round-label { font-weight: 800; font-size: 12px; letter-spacing: 2px; color: var(--amarelo); }
.mode-label { font-size: 10.5px; letter-spacing: 2px; color: #b9c3dd; }

.announcer {
  position: absolute; top: 26%; left: 50%; transform: translate(-50%, -50%) rotate(-3deg);
  font-family: var(--fonte-titulo); font-size: clamp(38px, 8vw, 100px); letter-spacing: 3px; text-align: center;
  color: var(--amarelo); -webkit-text-stroke: 4px #6b4b00; filter: drop-shadow(0 8px 0 rgba(0,0,0,.5));
  animation: announceIn .34s cubic-bezier(.2,1.7,.4,1) both; white-space: nowrap;
}
@keyframes announceIn { from { transform: translate(-50%,-50%) scale(.4) rotate(8deg); opacity: 0; } to { transform: translate(-50%,-50%) scale(1) rotate(-3deg); opacity: 1; } }
.announcer.ko { color: var(--vermelho); -webkit-text-stroke-color: #4a0a06; }
.announcer.small { font-size: clamp(24px, 4vw, 54px); }

.event-banner {
  position: absolute; top: 20%; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, #d0a8ff, var(--roxo)); border: 4px solid var(--tinta); border-radius: 14px;
  padding: 6px 22px; font-weight: 800; letter-spacing: 2px; font-size: clamp(14px, 2.2vw, 22px); box-shadow: 0 6px 0 rgba(0,0,0,.45);
  animation: slideDown .4s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes slideDown { from { transform: translate(-50%, -40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

.chaos-bar { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 90vw; }
.chaos-chip { background: rgba(106,46,168,.8); border: 2px solid #d0a8ff; border-radius: 999px; padding: 3px 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .5px; }

#damage-layer { position: absolute; inset: 0; overflow: hidden; }
.dmg {
  position: absolute; font-family: var(--fonte-titulo); font-size: 26px; color: var(--amarelo);
  -webkit-text-stroke: 2px #6b4b00; transform: translate(-50%, -50%); animation: dmgRise .95s ease-out both; white-space: nowrap;
}
.dmg.crit { font-size: 38px; color: #fff; -webkit-text-stroke-color: #b3123a; }
.dmg.heal { color: #7ef2a8; -webkit-text-stroke-color: #05401f; font-size: 20px; }
.dmg.text { font-size: 30px; color: #fff; -webkit-text-stroke-color: #6a2ea8; }
@keyframes dmgRise { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.5); } 20% { opacity: 1; transform: translate(-50%,-90%) scale(1.2); } 100% { opacity: 0; transform: translate(-50%,-190%) scale(1); } }

.toast {
  position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%);
  background: rgba(0,0,0,.75); border: 3px solid var(--amarelo); border-radius: 12px; padding: 7px 18px;
  font-weight: 800; font-size: 15px; letter-spacing: .5px; animation: slideDown .3s ease both; text-align: center;
}
#hit-marker { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,214,10,.6) 45%, transparent 70%);
  border-radius: 50%; animation: markerPop .22s ease-out both; }
@keyframes markerPop { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

.arena-tag { position: absolute; left: 50%; top: 46%; transform: translateX(-50%); font-family: var(--fonte-titulo);
  letter-spacing: 6px; font-size: clamp(16px, 3vw, 34px); color: #fff; opacity: 0; text-shadow: 0 4px 0 rgba(0,0,0,.7); }
.arena-tag.show { animation: arenaTag 2.6s ease both; }
@keyframes arenaTag { 0% { opacity: 0; letter-spacing: 22px; } 25% { opacity: .95; letter-spacing: 6px; } 75% { opacity: .95; } 100% { opacity: 0; } }

.fps { position: absolute; right: 8px; bottom: 8px; font-size: 12px; font-weight: 800; color: var(--amarelo); background: rgba(0,0,0,.5); border-radius: 6px; padding: 2px 8px; }

.intro-card { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); text-align: center; animation: slideDown .35s ease both; }
.ic-name { font-family: var(--fonte-titulo); font-size: clamp(24px, 4.4vw, 46px); letter-spacing: 3px; color: var(--amarelo); -webkit-text-stroke: 2px #6b4b00; }
.ic-quote { font-size: clamp(13px, 2vw, 19px); color: #fff; background: rgba(0,0,0,.6); border-radius: 10px; padding: 3px 14px; display: inline-block; }

/* ------------------------------- LOADING ------------------------------- */
#screen-loading { justify-content: center; align-items: center; text-align: center; }
.loader { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.loader-hammer { font-size: 68px; animation: swing 1.1s ease-in-out infinite; transform-origin: 70% 80%; }
@keyframes swing { 0%,100% { transform: rotate(-24deg); } 50% { transform: rotate(26deg); } }
.loader-text { font-family: var(--fonte-titulo); letter-spacing: 2px; font-size: 24px; margin: 0; }
.loader-bar { width: min(420px, 70vw); height: 16px; background: rgba(0,0,0,.6); border: 3px solid var(--tinta); border-radius: 10px; overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--verde), var(--amarelo)); transition: width .3s ease; }
.loader-hint { font-size: 12px; color: #98a3c0; max-width: 460px; }

/* ------------------------------- RESPONSIVE ------------------------------- */
@media (max-width: 980px) {
  .select-body { grid-template-columns: 1fr; }
  .select-foot { grid-template-columns: 1fr; }
  .camp-body { grid-template-columns: 1fr; }
  .hud-top { padding: 6px 8px 0; }
  .portrait { width: 42px; height: 42px; flex-basis: 42px; font-size: 22px; }
  .fname { font-size: 12.5px; }
  .hpbar { height: 14px; }
  .hp-label { display: none; }
}
@media (max-width: 560px) {
  .btn-big { font-size: 17px; padding: 10px 14px; }
  .menu-row { flex-direction: column; }
  .hud-center { min-width: 78px; }
}

/* ===================== FAIXA PRESIDENCIAL (resultado) ===================== */
.result-sash {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin: 6px 0 8px;
  padding: 10px 22px 12px;
  border: 4px solid var(--tinta);
  border-radius: 14px;
  background: linear-gradient(180deg, #f7df7a, var(--amarelo) 55%, var(--amarelo-esc));
  box-shadow: var(--sombra);
  transform: rotate(-1.8deg);
}
.result-sash .sash-band { font-family: var(--fonte-titulo); font-size: clamp(14px,3.2vw,22px); color: var(--tinta); letter-spacing: 1.5px; text-shadow: none; }
.result-sash .sash-name { font-weight: 800; font-size: clamp(16px,4vw,26px); color: var(--vermelho-esc); }
.result-sash::after {
  content: '';
  position: absolute; left: -14px; top: 50%;
  width: 40px; height: 12px;
  background: var(--vermelho); transform: translateY(-50%) rotate(-12deg);
}
/* ===================== DUELO DA NACACAO (titulo) ===================== */
.nation-duel {
  width: min(560px, 92vw);
  margin: 14px auto 4px;
  padding: 12px 14px 14px;
  border: 3px solid var(--tinta);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(23,26,46,.86), rgba(10,12,26,.9));
  box-shadow: var(--sombra);
  text-align: left;
}
.nd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.nd-title { font-family: var(--fonte-titulo); font-size: 18px; letter-spacing: .5px; color: var(--amarelo); }
.nd-sub { font-size: 11px; color: #9aa6c4; }

.nd-bar { display: flex; align-items: stretch; gap: 6px; height: 34px; margin: 4px 0 10px; }
.nd-seg {
  flex: 1 1 0; flex-grow: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 2px solid rgba(0,0,0,.4);
  font-weight: 800; font-size: 13px; color: #fff;
  min-width: 46px; transition: flex-grow .45s cubic-bezier(.2,.9,.3,1.2), filter .2s ease;
}
.nd-seg-flavio { background: linear-gradient(180deg, #2f8bff, var(--azul)); }
.nd-seg-lula { background: linear-gradient(180deg, #ff5a4d, var(--vermelho-esc)); }
.nd-seg.ahead { filter: saturate(1.25) brightness(1.12); box-shadow: 0 0 0 2px var(--amarelo) inset; }
.nd-vs {
  align-self: center; font-family: var(--fonte-titulo); font-size: 15px; color: var(--tinta);
  background: var(--amarelo); border: 2px solid var(--tinta); border-radius: 999px;
  padding: 2px 8px; transform: rotate(-4deg);
}

/* Globo do titulo que indica placar global (todos os navegadores). */
.nd-globe { font-style: normal; font-size: 13px; filter: saturate(1.2); }

/* Ancoras estilizadas como botao (ex.: "Estatisticas" no menu). */
a.btn { text-decoration: none; }

/* ===================== PIX REAL (Mercado Pago) ===================== */
.pix-panel {
  width: min(460px, 92vw);
  max-width: 100%;
  margin: auto;
  text-align: center;
  background: linear-gradient(180deg, #1c2140, #0c1024);
  border: 4px solid var(--tinta);
  border-radius: 20px;
  padding: clamp(16px, 3vw, 28px);
  box-shadow: 0 10px 0 rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.08);
}
.pix-badge {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .5px;
  background: var(--amarelo); color: var(--tinta); border: 2px solid var(--tinta);
  border-radius: 999px; padding: 3px 12px; transform: rotate(-2deg);
}
.pix-title { font-family: var(--fonte-titulo); font-size: clamp(26px, 6vw, 40px); margin: 10px 0 2px; color: var(--amarelo); }
.pix-sub { margin: 0 0 14px; color: #cdd6ee; }
.pix-sub b { color: var(--amarelo); }
#pix-qr {
  width: 196px; height: 196px; max-width: 60vw; max-height: 60vw;
  image-rendering: pixelated;
  border: 4px solid var(--papel); border-radius: 12px;
  background: var(--papel);
  box-shadow: 0 6px 0 rgba(0,0,0,.45);
}
.pix-key { margin: 10px 0 4px; font-size: 13px; color: #b9c3dd; }
.pix-key b { color: #7ef2a8; }
.pix-note { font-size: 12px; color: #ffd27e; background: rgba(255,214,10,.08); border: 2px dashed rgba(255,214,10,.4); border-radius: 10px; padding: 8px 10px; margin: 12px 0; }
.pix-actions { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.pix-actions .btn { width: min(360px, 86vw); }
#pix-total { margin: 12px 0 0; }

/* -------- PIX REAL (Mercado Pago) -------- */
.pix-real { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pix-qr-img {
  width: 196px; height: 196px; max-width: 60vw; max-height: 60vw;
  border: 4px solid var(--papel); border-radius: 12px;
  background: var(--papel); padding: 4px;
  box-shadow: 0 6px 0 rgba(0,0,0,.45);
}
.pix-copy { width: min(360px, 86vw); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.pix-code {
  width: 100%; font-size: 12px; padding: 8px 10px; border-radius: 10px;
  border: 2px solid var(--tinta); background: #0c1024; color: #cfe9d8;
  text-overflow: ellipsis;
}
.pix-status {
  margin: 4px 0 0; font-weight: 700; font-size: 14px; color: #cdd6ee;
  background: rgba(255,255,255,.06); border-radius: 10px; padding: 8px 12px;
  width: min(360px, 86vw);
}
.pix-status.pending { color: #ffd27e; }
.pix-status.paid { color: #7ef2a8; background: rgba(126,242,168,.12); }
.pix-status.error { color: #ff9a9a; background: rgba(255,120,120,.12); }

/* ===================== APOIADORES (Top 100 Brasil) ===================== */
.apoio-body { max-width: 900px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.apoio-lead { margin: 0; color: #cdd6ee; font-size: 15px; }
.apoio-lead b { color: var(--amarelo); }
.apoio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.apoio-grid .ar { display: flex; flex-direction: column; gap: 5px; }
.apoio-grid .ar span { font-size: 12.5px; color: #a9b3cc; }
.apoio-grid input, .apoio-grid select {
  padding: 10px 12px; border-radius: 10px; border: 3px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.35); color: #fff; font-family: var(--fonte); font-size: 15px;
}
.apoio-grid input:focus, .apoio-grid select:focus { outline: none; border-color: var(--amarelo); }
.apoio-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.apoio-presets .btn { padding: 7px 16px; font-size: 14px; min-width: 0; }
.apoio-presets .btn.on { background: linear-gradient(180deg, #7ef2a8, var(--verde) 60%, var(--verde-esc)); }
.apoio-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.apoio-status { min-height: 22px; margin: 0; font-weight: 700; font-size: 14px; }
.apoio-status.pending { color: #ffd27e; }
.apoio-status.paid { color: #7ef2a8; }
.apoio-status.error { color: #ff9a9a; }
.apoio-qr {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #1c2140, #0c1024); border: 4px solid var(--tinta);
  border-radius: 16px; padding: 14px; width: min(360px, 92vw);
}
.apoio-qr .pix-copy { width: 100%; }

/* ===================== TOP 100 BRASIL (lista) ===================== */
.top-body { max-width: 760px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.top-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.top-stat {
  flex: 1; min-width: 130px; background: rgba(255,255,255,.06);
  border: 3px solid rgba(255,255,255,.14); border-radius: 14px; padding: 8px 14px;
}
.top-stat b { display: block; font-family: var(--fonte-titulo); font-size: 24px; color: var(--amarelo); line-height: 1.1; }
.top-stat span { font-size: 12px; color: #a9b3cc; }
.top-stat.is-flavio b { color: var(--azul-claro); }
.top-stat.is-lula b { color: #ff6b6b; }
.top-status { margin: 0; color: #a9b3cc; text-align: center; }
.top-list { list-style: none; margin: 0; padding: 0 0 8px; display: flex; flex-direction: column; gap: 6px; }
.top-row {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px;
  background: rgba(255,255,255,.05); border: 3px solid rgba(255,255,255,.12);
  border-left-width: 8px; border-radius: 12px; padding: 8px 12px;
}
.top-row.is-flavio { border-left-color: var(--azul-claro); }
.top-row.is-lula { border-left-color: #e11d2e; }
.top-row.is-me { box-shadow: 0 0 0 3px rgba(255,214,10,.45); background: rgba(255,214,10,.10); }
.top-row .tr-rank { font-family: var(--fonte-titulo); font-size: 19px; text-align: center; color: var(--amarelo); }
.top-row.is-top1 .tr-rank { color: #ffd700; text-shadow: 0 0 10px rgba(255,215,0,.6); }
.top-row .tr-name { font-weight: 800; font-size: 15px; line-height: 1.15; }
.top-row .tr-city { display: block; font-weight: 400; font-size: 12px; color: #a9b3cc; }
.top-row .tr-amount { font-weight: 800; color: #7ef2a8; white-space: nowrap; }

@media (max-width: 560px) {
  .nd-seg { font-size: 11px; }
}

/* ===================== PAINEL ADMIN (dono do site) ===================== */
/* Botao minusculo no canto, dentro de Creditos (so aparece com ?dev=1). */
.adm-open { padding: 4px 10px; font-size: 12px; min-width: 0; letter-spacing: .5px; opacity: .9; }
.adm-open:hover { opacity: 1; }

.adm-login {
  max-width: 560px; width: 100%; margin: 12px auto 0;
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, #1c2140, #0c1024);
  border: 4px solid var(--tinta); border-radius: 16px; padding: 16px 18px;
}
.adm-login h3 { margin: 0; font-family: var(--fonte-titulo); letter-spacing: 1px; }
.adm-login p { margin: 0; }
.adm-login-row { display: flex; flex-wrap: wrap; gap: 10px; }
.adm-login-row input, .adm-login > input {
  flex: 1; min-width: 180px; font-family: var(--fonte); font-size: 15px; color: #fff;
  background: rgba(0,0,0,.35); border: 3px solid rgba(255,255,255,.22); border-radius: 10px; padding: 9px 12px;
}
.adm-login-row input:focus, .adm-login > input:focus { outline: none; border-color: var(--amarelo); }

/* !important porque .adm-body/.adm-login abaixo tambem definem display. */
.adm-body[hidden], .adm-login[hidden] { display: none !important; }

.adm-body {
  display: grid; grid-template-columns: 340px minmax(300px, 1fr) 290px;
  gap: 16px; align-items: start; width: 100%; max-width: 1500px; margin: 0 auto;
}
.adm-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.adm-who { font-size: 12.5px; font-weight: 700; color: #9fe6b6; }
#screen-admin .head-right { display: flex; align-items: center; gap: 10px; }
.adm-sair { padding: 6px 12px; font-size: 12.5px; }

.adm-preview-wrap {
  position: relative; border: 4px solid var(--tinta); border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #1c2140, #0c1024);
  display: flex; flex-direction: column;
}
#adm-canvas { width: 100%; height: 440px; display: block; }
.adm-preview-name {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center; padding: 8px;
  font-family: var(--fonte-titulo); font-size: 20px; letter-spacing: 1.5px; color: var(--amarelo);
  background: linear-gradient(180deg, rgba(5,6,15,0), rgba(5,6,15,.85));
}
.adm-hint { margin: 0; font-size: 12.5px; color: #a9b3cc; }

.adm-group {
  display: flex; flex-direction: column; gap: 10px;
  background: rgba(255,255,255,.05); border: 3px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 12px 14px;
}
.adm-group h3 { margin: 0; font-family: var(--fonte-titulo); font-size: 15px; letter-spacing: 1px; color: #e7ecff; }
.adm-group .ar { display: flex; flex-direction: column; gap: 5px; }
.adm-group .ar > span { font-size: 12.5px; color: #a9b3cc; }
.adm-group input:not([type="range"]):not([type="checkbox"]):not([type="color"]),
.adm-group textarea, .adm-group select {
  width: 100%; font-family: var(--fonte); font-size: 14.5px; color: #fff;
  background: rgba(0,0,0,.35); border: 2px solid rgba(255,255,255,.22); border-radius: 10px; padding: 8px 10px;
}
.adm-group input:focus, .adm-group textarea:focus, .adm-group select:focus { outline: none; border-color: var(--amarelo); }
.adm-group textarea { resize: vertical; }
.adm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.adm-cor { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #cdd6ee; }
.adm-cor input[type="color"] {
  width: 34px; height: 26px; padding: 0; cursor: pointer; background: transparent;
  border: 2px solid rgba(255,255,255,.25); border-radius: 6px;
}

.adm-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 6px; }
.adm-parte { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #cdd6ee; cursor: pointer; }

.adm-sliders { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.adm-slider { display: flex; flex-direction: column; gap: 4px; }
.adm-slider-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #a9b3cc; }
.adm-slider-top em { font-style: normal; font-weight: 800; color: var(--amarelo); }
.adm-slider input[type="range"] { width: 100%; }

.adm-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.adm-msg { margin: 0; min-height: 20px; font-size: 13.5px; font-weight: 700; color: #cdd6ee; }
.adm-msg.ok { color: #7ef2a8; }
.adm-msg.error { color: #ff9a9a; }
.adm-msg.muted { font-weight: 500; color: #8e98b5; }

.adm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.adm-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(255,255,255,.06); border: 3px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 8px 10px;
}
.adm-item.is-edit { border-color: var(--amarelo); }
.adm-item-info { display: flex; flex-direction: column; min-width: 0; }
.adm-item-info b { font-size: 14.5px; }
.adm-item-info span { font-size: 12px; color: #a9b3cc; }
.adm-item-acoes { display: flex; gap: 6px; flex-shrink: 0; }
.adm-item-acoes .btn { padding: 6px 10px; font-size: 13px; min-width: 0; }
.adm-del { color: #ff9a9a; }

@media (max-width: 1080px) {
  .adm-body { grid-template-columns: 1fr; }
  #adm-canvas { height: 340px; }
}


/* ===== Icones das caricaturas (bandeira do Brasil e estrela vermelha) ===== */
.flag-br { display: inline-block; width: 1.15em; height: .82em; border-radius: 2px; position: relative;
  background: #009c3b; vertical-align: -.1em; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.28); }
.flag-br::before { content: ''; position: absolute; left: 50%; top: 50%; width: 76%; height: 76%;
  transform: translate(-50%, -50%); background: #ffdf00;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.flag-br::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34%; height: 46%;
  transform: translate(-50%, -50%); background: #002776; border-radius: 50%; }
.star-left { color: #e11d2e; font-style: normal; font-weight: 900; line-height: 1;
  text-shadow: 0 0 1px #6d0d16, 0 1px 1px rgba(0,0,0,.35); }

/* =========================================================================
   CONTROLES DE TOQUE (MODO DUELO MOBILE)
   - Joystick no canto inferior esquerdo, botoes de acao no canto inferior
     direito, pensando no uso com os dois polegares na horizontal.
   - Nada aqui recebe eventos do mouse fora do modo mobile: a camada fica
     escondida (classe .hidden) enquanto nao estiver em uso.
   ========================================================================= */

#touch-controls {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;        /* so os filhos recebem toque */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------- joystick ------------------------------- */

.tc-stick {
  position: absolute;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: clamp(120px, 26vh, 190px);
  height: clamp(120px, 26vh, 190px);
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.16), rgba(10,14,28,.30) 70%);
  border: 3px solid rgba(255,255,255,.35);
  box-shadow: 0 8px 22px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.15);
  backdrop-filter: blur(2px);
  opacity: .78;
  transition: opacity .15s ease, transform .1s ease;
}
.tc-stick.ativo { opacity: 1; transform: scale(1.03); }

.tc-stick-base { position: absolute; inset: 16%; border-radius: 50%; border: 2px dashed rgba(255,255,255,.22); }

/* Cruzinha de referencia no fundo do joystick */
.tc-stick-cross { position: absolute; background: rgba(255,255,255,.20); border-radius: 2px; }
.tc-cross-v { left: 50%; top: 10%; bottom: 10%; width: 2px; transform: translateX(-50%); }
.tc-cross-h { top: 50%; left: 10%; right: 10%; height: 2px; transform: translateY(-50%); }

.tc-stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  height: 44%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 38% 32%, #ffe680, var(--amarelo) 55%, #d8a400);
  border: 3px solid rgba(0,0,0,.55);
  box-shadow: 0 6px 14px rgba(0,0,0,.5);
  pointer-events: none;
}

/* ---------------------------- botoes de acao ---------------------------- */

.tc-pad {
  position: absolute;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  width: clamp(190px, 40vh, 300px);
  height: clamp(170px, 36vh, 270px);
  pointer-events: none;
}

.tc-btn {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 50%;
  border: 3px solid rgba(0,0,0,.55);
  color: #fff;
  font-family: var(--fonte);
  font-weight: 800;
  line-height: 1;
  padding: 0;
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  text-shadow: 0 2px 0 rgba(0,0,0,.45);
  transition: transform .06s ease, filter .06s ease, box-shadow .06s ease;
}
.tc-btn small { font-size: 9px; letter-spacing: .5px; opacity: .95; }
.tc-ico { font-size: 1.5em; }

/* Aperta de verdade ao toque */
.tc-btn.pressionado { transform: translateY(3px) scale(.94); filter: brightness(1.25); box-shadow: none; }

/* Martelo: botao principal, maior e mais embaixo. */
.tc-hit {
  right: 0;
  bottom: 0;
  width: clamp(84px, 17vh, 120px);
  height: clamp(84px, 17vh, 120px);
  background: radial-gradient(circle at 36% 30%, #ff9b96, var(--vermelho) 58%, var(--vermelho-esc));
  box-shadow: 0 6px 0 rgba(0,0,0,.45);
}
/* Esquiva: a esquerda do martelo. */
.tc-dodge {
  right: clamp(84px, 17vh, 120px);
  bottom: clamp(28px, 6vh, 52px);
  width: clamp(66px, 13vh, 92px);
  height: clamp(66px, 13vh, 92px);
  background: radial-gradient(circle at 36% 30%, #8fe4ff, #2b8fd6 58%, #175d91);
  box-shadow: 0 5px 0 rgba(0,0,0,.45);
}
/* Especial: acima do martelo. */
.tc-special {
  right: clamp(34px, 7vh, 64px);
  bottom: clamp(84px, 17vh, 120px);
  width: clamp(70px, 14vh, 98px);
  height: clamp(70px, 14vh, 98px);
  background: radial-gradient(circle at 36% 30%, #ffe680, var(--amarelo) 55%, #c99400);
  color: #3a2a00;
  text-shadow: 0 2px 0 rgba(255,255,255,.35);
  box-shadow: 0 5px 0 rgba(0,0,0,.45);
}
/* Pulo: acima e a esquerda do especial. */
.tc-jump {
  right: clamp(122px, 25vh, 172px);
  bottom: clamp(104px, 21vh, 150px);
  width: clamp(62px, 12vh, 86px);
  height: clamp(62px, 12vh, 86px);
  background: radial-gradient(circle at 36% 30%, #b9f5c8, var(--verde) 58%, var(--verde-esc));
  color: #04301a;
  box-shadow: 0 5px 0 rgba(0,0,0,.45);
}

/* Linha do passe de 24h / primeira luta gratis (tela inicial). */
.pass-line {
  margin: 10px auto 2px;
  max-width: 560px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  color: #c8d2ee;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 7px 12px;
}
.pass-line b { color: var(--amarelo); }
.pass-line.pass-free {
  border-color: rgba(120,255,180,.4);
  background: rgba(40,220,130,.12);
  color: #d9ffe9;
}
.pass-line.pass-free b { color: #7dffb8; }
.pass-line.pass-on {
  border-color: rgba(120,200,255,.45);
  background: rgba(60,150,255,.14);
  color: #e2f1ff;
}
.pass-line.pass-on b { color: #9ad0ff; }
.pass-line[hidden] { display: none !important; }

/* Pausa: abaixo do HUD, na direita (o topo ja e ocupado pela barra de vida
   do Lula). Assim o botao nunca cobre o nome/vida de nenhum lutador. */
.tc-pause {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 104px);
  right: max(12px, env(safe-area-inset-right));
  width: 52px;
  height: 52px;
  font-size: 20px;
  background: rgba(10,14,28,.72);
  border: 3px solid rgba(255,255,255,.45);
  box-shadow: 0 4px 0 rgba(0,0,0,.4);
}

/* Selo do modo recomendado para o aparelho (celular/tablet) */
.btn.recomendado { position: relative; }
.btn.recomendado::after {
  content: '📲 IDEAL NO SEU APARELHO';
  position: absolute;
  top: -10px;
  right: -4px;
  background: var(--verde);
  color: #04240f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 2px solid var(--tinta);
  box-shadow: 0 3px 0 rgba(0,0,0,.4);
  white-space: nowrap;
  transform: rotate(-3deg);
}

/* --------------------- aviso para girar o celular --------------------- */#rotate-hint {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 24px;
  background: rgba(5,6,15,.94);
  pointer-events: auto;
}
#rotate-hint .rot-icon { font-size: 62px; animation: rotWobble 1.6s ease-in-out infinite; }
#rotate-hint .rot-title { font-family: var(--fonte-titulo); font-size: 26px; letter-spacing: 2px; color: var(--amarelo); margin: 6px 0 0; }
@keyframes rotWobble {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(-88deg); }
  65% { transform: rotate(-88deg); }
}
#rotate-hint.hidden { display: none !important; }

/* -------------------- ajustes para telas pequenas -------------------- */

/* Em telas de celular o HUD fica mais compacto para nao encostar nos botoes. */
@media (max-width: 760px) {
  .hud-top { gap: 6px; padding: 8px; }
  .fighter-card .portrait { width: 44px; height: 44px; font-size: 22px; }
  .fname { font-size: 13px; }
  .hpbar { height: 14px; }
  .meter { height: 8px; }
  .hud-center .timer { font-size: 30px; }
  .round-label, .mode-label { font-size: 10px; }
  .arena-tag { font-size: 10px; bottom: 6px; }
}

/* Na horizontal com tela baixa, encolhe o joystick para nao tampar o HUD. */
@media (max-height: 460px) {
  .tc-stick { width: clamp(104px, 30vh, 150px); height: clamp(104px, 30vh, 150px); }
  .tc-pad { width: clamp(170px, 44vh, 260px); height: clamp(150px, 40vh, 230px); }
  .tc-hit { width: clamp(74px, 19vh, 104px); height: clamp(74px, 19vh, 104px); }
}