/* tabletold — Arena (Fase 103): lobby e tela de batalha. Pedra escura, areia batida, tochas e
   ouro de troféu; brasa para o adversário. Mobile first; as animações respeitam
   prefers-reduced-motion (regra global em app.css). */

:root {
  --arena-stone: #1C1411;
  --arena-stone-2: #2A1E1A;
  --arena-sand: #C9A36A;
  --arena-sand-deep: #8C6A3E;
  --arena-blood: #D8553A;
  --arena-fire: #F0A35A;
  --arena-ink: #F6ECD8;
}

/* ---------- barra inferior (dash principal) ---------- */
.with-tabbar { padding-bottom: calc(72px + var(--safe-bottom)); }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 6px 6px calc(6px + var(--safe-bottom));
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border-top: 1px solid var(--line-soft);
}
.tabbar-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px;
  border-radius: 14px; color: var(--text-2); text-decoration: none; font: 700 11px var(--f-ui);
}
.tabbar-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; }
.tabbar-ico svg { width: 22px; height: 22px; }
.tabbar-item.on { color: var(--gold); }
.tabbar-item.on .tabbar-ico { background: var(--gold-soft); }
.tabbar-item.arena .tabbar-ico {
  width: 44px; height: 44px; margin-top: -18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FF9A5A, var(--arena-blood) 60%, #6E1E10);
  color: #FFF4E0; box-shadow: 0 6px 18px rgb(216 85 58 / 0.45), 0 0 0 3px var(--bg);
}
.tabbar-item.arena.on { color: var(--arena-blood); }
@media (min-width: 900px) {
  .tabbar { left: 50%; right: auto; transform: translateX(-50%); width: 520px; bottom: 12px; border-radius: 22px; border: 1px solid var(--line); padding-bottom: 6px; box-shadow: var(--shadow-2); }
}

/* ---------- banner da Arena na home ---------- */
.arena-banner {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 18px 16px;
  border-radius: var(--r-l); text-decoration: none; color: var(--arena-ink);
  background:
    radial-gradient(circle at 12% 120%, rgb(240 163 90 / 0.55), transparent 55%),
    radial-gradient(circle at 90% -20%, rgb(216 85 58 / 0.45), transparent 50%),
    linear-gradient(135deg, var(--arena-stone-2), var(--arena-stone));
  box-shadow: 0 12px 30px rgb(216 85 58 / 0.25), var(--shadow-1);
  border: 1px solid rgb(240 163 90 / 0.35);
}
.arena-banner-art { font-size: 40px; filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.5)); animation: arena-bob 3s ease-in-out infinite; }
.arena-banner .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arena-banner small { font: 700 11px var(--f-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--arena-fire); }
.arena-banner strong { font: 700 24px/1.1 var(--f-titulo); letter-spacing: 0.04em; }
.arena-banner span:not(.arena-banner-art) { font-size: 13.5px; opacity: 0.85; }
.arena-banner > svg { width: 22px; height: 22px; flex: none; }

/* ---------- "Seu visual" na loja ---------- */
.my-look {
  display: flex; align-items: center; gap: 14px; padding: 18px 16px; border-radius: var(--r-l);
  color: #FFF7E6; text-shadow: 0 1px 3px rgb(0 0 0 / 0.5); box-shadow: var(--shadow-2);
}
.my-look .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.my-look small { font: 700 11px var(--f-ui); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.my-look strong { font: 600 20px/1.2 var(--f-titulo); }
.my-look span { font-size: 13px; opacity: 0.9; }
.my-look .cosm-icon.solo { width: 44px; height: 44px; font-size: 24px; }

/* ---------- elementos de cenário ---------- */
.arena-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.torch { position: absolute; top: 14px; width: 14px; height: 46px; z-index: 1; }
.torch.left { left: 10px; }
.torch.right { right: 10px; }
.torch .stick { position: absolute; bottom: 0; left: 5px; width: 4px; height: 28px; border-radius: 2px; background: #4A3423; }
.torch .flame {
  position: absolute; top: 0; left: 0; width: 14px; height: 20px; border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #FFF3C4, #FFB347 45%, #E8552B 80%);
  box-shadow: 0 0 18px 6px rgb(255 150 60 / 0.45);
  animation: torch-flicker 0.9s ease-in-out infinite alternate;
}
.torch.right .flame { animation-delay: 0.35s; }
@keyframes torch-flicker { from { transform: scale(1) rotate(-3deg); opacity: 0.95; } to { transform: scale(1.12, 0.94) rotate(4deg); opacity: 1; } }
@keyframes arena-bob { 50% { transform: translateY(-4px) rotate(-4deg); } }

/* ---------- lobby /arena ---------- */
.arena-page { background: linear-gradient(180deg, transparent, rgb(216 85 58 / 0.05)); min-height: 100%; }
.arena-hero {
  position: relative; overflow: hidden; min-height: 190px; border-radius: var(--r-l);
  display: flex; align-items: flex-end; padding: 18px; color: var(--arena-ink);
  box-shadow: 0 14px 34px rgb(0 0 0 / 0.35); border: 1px solid rgb(240 163 90 / 0.3);
}
.arena-hero.small { min-height: 140px; }
.arena-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 1;
  background: linear-gradient(180deg, transparent, rgb(201 163 106 / 0.35) 40%, rgb(140 106 62 / 0.85));
}
.arena-hero-text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; text-shadow: 0 2px 6px rgb(0 0 0 / 0.6); }
.arena-hero-text .eyebrow { color: var(--arena-fire); margin: 0; }
.arena-hero-text h2 { margin: 0; font: 700 34px/1 var(--f-titulo); letter-spacing: 0.06em; }
.arena-hero-text p { margin: 0; font-size: 14px; max-width: 34ch; }

.arena-step {
  display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--r-l);
  background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-1);
}
.arena-step-head { display: flex; align-items: center; gap: 10px; }
.arena-step-head h2 { margin: 0; font: 600 18px var(--f-titulo); }
.arena-step .step-n {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #FF9A5A, var(--arena-blood) 65%, #6E1E10); color: #FFF4E0; font: 700 15px var(--f-titulo);
}

.fighter-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.pick-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; cursor: pointer;
  border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; text-align: center;
}
.pick-card strong { font: 600 16px/1.2 var(--f-titulo); }
.pick-card small { font-size: 12.5px; }
.pick-card.on { border-color: var(--gold-lo); box-shadow: 0 0 0 3px var(--gold-soft), 0 10px 24px var(--gold-glow); }

.cr-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cr-medal {
  width: 62px; height: 62px; border-radius: 50%; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px solid var(--line); background: radial-gradient(circle at 35% 30%, var(--surface), var(--surface-3)); color: var(--text);
}
.cr-medal small { font: 700 9px var(--f-ui); letter-spacing: 0.12em; opacity: 0.7; }
.cr-medal b { font: 700 17px/1 var(--f-titulo); }
.cr-medal[aria-pressed="true"] {
  border-color: transparent; color: var(--on-gold);
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold-lo)); box-shadow: 0 6px 18px var(--gold-glow);
}

.foe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.foe-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 6px 10px; cursor: pointer;
  border-radius: 16px; border: 1px solid rgb(216 85 58 / 0.25); color: var(--arena-ink); font: inherit; text-align: center;
  background: radial-gradient(circle at 50% 30%, rgb(216 85 58 / 0.35), transparent 60%), linear-gradient(180deg, var(--arena-stone-2), var(--arena-stone));
  box-shadow: var(--shadow-1);
}
.foe-card strong { font: 600 14px/1.15 var(--f-titulo); }
.foe-card small { font-size: 11.5px; opacity: 0.75; }
.foe-card.on { border-color: var(--arena-fire); box-shadow: 0 0 0 3px rgb(240 163 90 / 0.35), 0 10px 26px rgb(216 85 58 / 0.4); transform: translateY(-2px); }
.foe-cr { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); padding: 1px 8px; border-radius: 999px; background: var(--arena-blood); color: #FFF4E0; font: 800 10px var(--f-ui); letter-spacing: 0.05em; white-space: nowrap; }
.foe-portrait { font-size: 38px; line-height: 1; filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.6)); }
.foe-portrait.big { font-size: 46px; }
.foe-stats { display: flex; gap: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.foe-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 2px; }
.foe-foot .diff, .foe-foot .prize { padding: 1px 7px; border-radius: 999px; font: 700 10.5px var(--f-ui); }
.foe-foot .diff { background: rgb(255 255 255 / 0.1); }
.foe-foot .diff.alto { background: rgb(216 85 58 / 0.5); }
.foe-foot .prize { display: inline-flex; align-items: center; gap: 3px; background: rgb(240 203 130 / 0.2); color: #F2CD85; }
.foe-foot .prize svg { width: 12px; height: 12px; }
.pay-seg button { font-size: 13px; line-height: 1.25; padding: 6px 8px; }
.btn-arena {
  border-color: transparent; color: #FFF4E0;
  background: linear-gradient(180deg, #F07B54, var(--arena-blood) 60%, #A8321D);
  box-shadow: 0 8px 22px rgb(216 85 58 / 0.4);
}
.btn-arena svg { color: #FFF4E0; }
.arena-open .arena-ico { width: 44px; height: 44px; display: grid; place-items: center; font-size: 24px; border-radius: 12px; background: linear-gradient(180deg, var(--arena-stone-2), var(--arena-stone)); flex: none; }

/* ---------- batalha /arena/<id> ---------- */
.arena-view { height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--arena-stone); color: var(--arena-ink); }
.arena-head {
  flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 10px; z-index: 4;
  background: rgb(20 14 12 / 0.85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgb(240 163 90 / 0.2);
}
.arena-head .icon-btn { color: var(--arena-ink); }
.arena-head .titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.arena-head h1 { margin: 0; font: 700 18px/1.2 var(--f-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arena-head .titles > span { font-size: 12px; opacity: 0.75; }
.arena-credits {
  display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgb(240 203 130 / 0.4); background: rgb(240 203 130 / 0.12); color: #F2CD85; font: 700 13.5px var(--f-ui);
}
.arena-credits svg { width: 16px; height: 16px; }
.arena-credits.low { border-color: var(--arena-blood); color: #FF9A7A; animation: arena-alert 1.4s ease-in-out infinite; }
@keyframes arena-alert { 50% { box-shadow: 0 0 0 4px rgb(216 85 58 / 0.3); } }

.stage {
  flex: none; position: relative; overflow: hidden; padding: 16px 12px 14px;
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  background: var(--arena-stone-2);
}
.stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgb(255 220 160 / 0.25), transparent 60%),
    linear-gradient(180deg, rgb(201 163 106 / 0.2), var(--arena-sand-deep) 45%, #6E5130);
}
.stage > .arena-backdrop { height: 45%; }
.stage .side { position: relative; z-index: 2; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.stage .foes { padding-top: 34px; }

.fighter {
  width: 150px; max-width: 46%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 8px;
  border-radius: 16px; text-align: center;
  background: rgb(18 12 10 / 0.72); border: 1px solid rgb(255 255 255 / 0.08);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.35);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), opacity 0.3s;
}
.fighter strong { font: 600 13.5px/1.2 var(--f-titulo); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fighter small { font-size: 11.5px; opacity: 0.8; font-variant-numeric: tabular-nums; }
.fighter.foe { border-color: rgb(216 85 58 / 0.35); }
.fighter.current { transform: translateY(-3px) scale(1.04); border-color: var(--arena-fire); box-shadow: 0 0 0 2px rgb(240 163 90 / 0.5), 0 0 26px rgb(240 163 90 / 0.45); animation: arena-turn 1.6s ease-in-out infinite; }
.fighter.hero.me { border-color: rgb(242 205 133 / 0.45); }
.fighter.down { opacity: 0.45; filter: grayscale(0.8); }
.fighter.down .foe-portrait { transform: rotate(90deg); }
@keyframes arena-turn { 50% { box-shadow: 0 0 0 2px rgb(240 163 90 / 0.7), 0 0 34px rgb(240 163 90 / 0.6); } }
.fighter .foe-portrait { font-size: 36px; transition: transform 0.4s var(--ease); }
.foe-slot.gate { width: 170px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; border-radius: 16px; background: rgb(18 12 10 / 0.6); text-align: center; }
.foe-slot.gate strong { font: 600 15px var(--f-titulo); }
.foe-slot.gate small { font-size: 12px; opacity: 0.8; }

.hp-bar { width: 100%; height: 7px; border-radius: 999px; background: rgb(255 255 255 / 0.12); overflow: hidden; }
.hp-bar > i { display: block; height: 100%; border-radius: inherit; transition: width 0.5s var(--ease); }
.hp-bar.good > i, .hp-bar.band-unharmed > i { background: linear-gradient(90deg, #3E9E72, #7CD9A8); }
.hp-bar.band-wounded > i { background: linear-gradient(90deg, #C8913C, #F2CD85); }
.hp-bar.hurt > i, .hp-bar.band-badly > i { background: linear-gradient(90deg, #D8553A, #F0A35A); }
.hp-bar.zero > i, .hp-bar.band-down > i { background: #555; }
.conds { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.conds span { padding: 1px 6px; border-radius: 999px; background: rgb(168 152 255 / 0.25); color: #D6CCFF; font: 700 10px var(--f-ui); }

.vs { position: relative; z-index: 2; align-self: center; display: flex; align-items: center; gap: 6px; color: var(--arena-fire); text-shadow: 0 2px 8px rgb(0 0 0 / 0.6); }
.vs svg { width: 22px; height: 22px; }
.vs b { font: 800 20px var(--f-titulo); letter-spacing: 0.12em; }

.stage.over .side, .stage.over .vs { opacity: 0.3; filter: blur(1px); transition: opacity 0.4s, filter 0.4s; }
.stage-banner {
  position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 26px; border-radius: 18px; text-align: center;
  background: rgb(14 10 8 / 0.88); border: 2px solid var(--arena-fire); box-shadow: 0 16px 40px rgb(0 0 0 / 0.55);
  animation: banner-in 0.5s var(--ease);
}
.stage-banner strong { font: 800 30px/1 var(--f-titulo); letter-spacing: 0.06em; }
.stage-banner span { font-size: 13.5px; opacity: 0.9; }
.stage-banner.win { border-color: #F2CD85; }
.stage-banner.win strong { color: #F2CD85; text-shadow: 0 0 18px rgb(242 205 133 / 0.6); }
.stage-banner.loss { border-color: #777; }
.stage-banner.loss strong { color: #D0C8C0; }
@keyframes banner-in { from { transform: translate(-50%, -50%) scale(0.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

.turn-bar {
  flex: none; padding: 9px 14px; text-align: center; font: 700 13.5px var(--f-ui);
  background: #140E0C; border-top: 1px solid rgb(240 163 90 / 0.25); border-bottom: 1px solid rgb(240 163 90 / 0.15); color: rgb(246 236 216 / 0.85);
}
.turn-bar.mine { color: #1C1307; background: linear-gradient(90deg, #F2CD85, #E6B866); animation: arena-mine 1.8s ease-in-out infinite; }
.turn-bar.warn { color: #FFD9CC; background: rgb(216 85 58 / 0.35); }
.turn-bar.win { color: #F2CD85; }
.turn-bar.foe { color: #FFE2D6; background: linear-gradient(90deg, rgb(216 85 58 / 0.55), rgb(150 40 30 / 0.55)); }
@keyframes arena-mine { 50% { filter: brightness(1.12); } }

.arena-wait { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #140E0C; }
.arena-wait .row { flex-wrap: wrap; gap: 8px; }
.arena-wait .muted { color: rgb(246 236 216 / 0.7); }

.arena-log {
  flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px var(--gutter) 12px;
  display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(180deg, #140E0C, #1C1411);
}
.arena-log > * { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; }
.arena-log .narr, .arena-log .p-scene-wrap { background: rgb(246 236 216 / 0.06); border-color: rgb(240 163 90 / 0.18); color: var(--arena-ink); }
.arena-log .p-narration { color: var(--arena-ink); }
.arena-log .p-mech, .arena-log .log-mech { font-size: 13px; }
.arena-log .p-mech details, .arena-log .p-mech .mech-line { background: rgb(168 152 255 / 0.08); border-color: rgb(168 152 255 / 0.2); color: #E4DDFF; }
/* Fase 123: a figurinha do dado no log da arena (o log é sempre escuro, nos dois temas) */
.arena-log .rf-head, .arena-log .rf-result { color: #CFC6EE; }
.arena-log .rf-total { color: var(--arena-ink); }
.arena-log .rf-die.house { background: radial-gradient(circle at 35% 30%, #3A2E48, #241C30); color: #CFC6EE; }
.arena-log .rf-die.house .rf-n { color: var(--arena-ink); text-shadow: 0 1px 0 #000; }
.arena-log .sys-wrap .p-system { background: rgb(240 203 130 / 0.1); color: #F2CD85; }
.arena-log .p-private { background: rgb(168 152 255 / 0.12); color: var(--arena-ink); }
.arena-log .p-speech .bubble { background: rgb(246 236 216 / 0.08); color: var(--arena-ink); border-color: transparent; }
.arena-log .p-speech.mine .bubble { background: linear-gradient(160deg, var(--gold-hi), var(--gold-lo)); color: var(--on-gold); }
.arena-log .who { color: rgb(246 236 216 / 0.7); }
.log-turn { display: flex; align-items: center; gap: 8px; justify-content: center; font: 700 12px var(--f-ui); letter-spacing: 0.04em; color: rgb(240 163 90 / 0.8); }
.log-turn svg { width: 14px; height: 14px; }
.log-turn.mine { color: #F2CD85; }

.arena-composer { background: rgb(20 14 12 / 0.92); border-top-color: rgb(240 163 90 / 0.2); }
.arena-composer form { background: #231915; border-color: rgb(240 163 90 / 0.25); }
.arena-composer .input { color: var(--arena-ink); }
.arena-dock .actions { display: flex; flex-direction: column; gap: 8px; }
.arena-dock .arow { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.arena-dock .btn { min-height: 48px; font-size: 14.5px; border-color: rgb(240 163 90 / 0.3); background: #2A1E1A; color: var(--arena-ink); }
.arena-dock .btn-primary { border-color: transparent; color: #FFF4E0; background: linear-gradient(180deg, #F07B54, var(--arena-blood) 60%, #A8321D); box-shadow: 0 8px 20px rgb(216 85 58 / 0.35); }

@media (min-width: 720px) {
  .fighter { width: 170px; }
  .foe-grid { gap: 12px; }
}

/* ---------- Fase 105: preço em créditos, re-sorteio, chances e espólio ---------- */
span.arena-credits { cursor: default; }
.foe-rarity {
  position: absolute; top: 6px; right: 6px; padding: 1px 6px; border-radius: 999px;
  font: 800 9px var(--f-ui); letter-spacing: 0.06em; text-transform: uppercase;
  background: rgb(255 255 255 / 0.12); color: #F2CD85;
}
.foe-rarity.raro { background: rgb(88 140 220 / 0.35); color: #D7E6FF; }
.foe-rarity.epico { background: rgb(168 152 255 / 0.4); color: #EFEAFF; box-shadow: 0 0 12px rgb(168 152 255 / 0.5); }
.foe-card.rare-epico { border-color: rgb(168 152 255 / 0.55); }
.btn.reroll { align-self: flex-start; }
.btn.reroll .gold, .arena-price .gold { color: var(--gold); }
.arena-price {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--r-m);
  border: 1px solid var(--gold-lo); background: linear-gradient(180deg, var(--gold-soft), transparent);
}
.arena-price .row { display: flex; align-items: center; gap: 8px; }
.arena-price .row svg { width: 18px; height: 18px; color: var(--gold); }
.price-line { font-size: 15px; }
.price-line b { font: 700 20px var(--f-titulo); color: var(--gold); }
.price-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.price-cell { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: var(--r-s); background: var(--surface); border: 1px solid var(--line-soft); }
.price-cell b { font: 700 18px/1.1 var(--f-titulo); color: var(--gold); }
.price-cell small { font-size: 11px; text-align: center; }
.payer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.payer-list li { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.payer-list li small { font-weight: 700; color: var(--ok); }
.payer-list li.short small { color: var(--ember); }
.arena-odds { border-radius: var(--r-m); border: 1px solid var(--line-soft); padding: 8px 12px; }
.arena-odds summary { cursor: pointer; font: 600 14px var(--f-titulo); }
.odds-list { margin: 8px 0 2px; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.adult-gate { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--r-m); border: 1px dashed var(--arcane-line); background: var(--arcane-soft); }
.adult-gate .btn { align-self: flex-start; }
.warn-text { color: var(--ember); font-weight: 600; font-size: 14px; }
.arena-wait .arena-price { border-color: rgb(240 203 130 / 0.45); background: rgb(240 203 130 / 0.08); }
.arena-wait .arena-price .gold, .arena-wait .price-line b { color: #F2CD85; }
.arena-wait .arena-odds { border-color: rgb(255 255 255 / 0.12); }
.spoils {
  display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--r-l);
  border: 1px solid rgb(240 203 130 / 0.4);
  background: radial-gradient(circle at 50% 0%, rgb(240 203 130 / 0.18), transparent 70%), rgb(14 10 8 / 0.5);
  animation: spoils-in 0.5s var(--ease);
}
.spoils .section-title { margin: 0; color: #F2CD85; }
.spoils-coins { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.spoils-coins svg { width: 18px; height: 18px; color: #F2CD85; }
.spoils-others { margin: 0; padding-left: 18px; font-size: 13px; opacity: 0.85; }
@keyframes spoils-in { from { opacity: 0; transform: translateY(8px); } }

/* Fase 109: retrato pintado do monstro (o emoji do tipo fica como reserva) */
.foe-portrait.has-art { line-height: 0; filter: none; }
.foe-pic {
  border-radius: 50%; object-fit: cover; background: var(--arena-stone);
  box-shadow: 0 0 0 2px rgb(216 85 58 / 0.55), 0 6px 14px rgb(0 0 0 / 0.55);
}
.foe-card .foe-pic { width: 72px; height: 72px; }
.foe-portrait.big .foe-pic { width: 96px; height: 96px; }
.fighter .foe-pic { width: 56px; height: 56px; }
.fighter.down .foe-portrait.has-art { transform: none; }
.arena-open .arena-ico .foe-pic { width: 44px; height: 44px; border-radius: 12px; box-shadow: none; }

/* ---------- Fase 114: placar compacto durante a luta ----------
   Lutadores no canto esquerdo (ouro), adversários no direito (brasa), espelhados em volta do VS.
   Alvo: 72–96 px de altura num celular, para a narração ficar com o resto da tela. */
.arena-log { min-height: 0; }
.stage.compact {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  gap: 6px; padding: 6px 8px; max-height: 104px;
  border-bottom: 1px solid rgb(240 163 90 / 0.18);
}
.stage.compact::after { height: 100%; opacity: 0.35; }
.stage.compact > .arena-backdrop { height: 100%; opacity: 0.55; }
.stage.compact .torch { display: none; }
.stage.compact .side { flex-direction: column; flex-wrap: nowrap; justify-content: center; gap: 4px; padding: 0; min-width: 0; }
.stage.compact .heroes { order: 0; }
.stage.compact .vs { order: 1; flex-direction: column; gap: 0; }
.stage.compact .foes { order: 2; }
.stage.compact .vs svg { width: 14px; height: 14px; }
.stage.compact .vs b { font-size: 12px; letter-spacing: 0.1em; }
.stage.compact .side[data-n="3"], .stage.compact .side[data-n="4"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }

.chip {
  position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 6px;
  border-radius: 12px; background: rgb(18 12 10 / 0.78); border: 1px solid rgb(255 255 255 / 0.08);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), opacity 0.3s;
}
.chip.hero { border-left: 3px solid rgb(242 205 133 / 0.55); }
.chip.foe { flex-direction: row-reverse; text-align: right; border-right: 3px solid rgb(216 85 58 / 0.6); }
.chip.hero.me { background: linear-gradient(90deg, rgb(242 205 133 / 0.16), rgb(18 12 10 / 0.78) 70%); }
.chip.current { border-color: var(--arena-fire); box-shadow: 0 0 0 1.5px rgb(240 163 90 / 0.6), 0 0 16px rgb(240 163 90 / 0.4); animation: arena-turn 1.6s ease-in-out infinite; }
.chip.current.hero { border-left-color: var(--arena-fire); }
.chip.current.foe { border-right-color: var(--arena-fire); }
.chip.down { opacity: 0.45; filter: grayscale(0.8); }
/* Fase 117: o lutador em foco (fora do turno) quando o jogador leva mais de um */
.chip.hero.focus:not(.current) { border-color: rgb(242 205 133 / 0.7); }

.focus-bar {
  flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 12px; overflow-x: auto;
  background: #140E0C; border-bottom: 1px solid rgb(240 163 90 / 0.15);
}
.focus-bar[hidden] { display: none; }
.focus-bar > small { flex: none; font: 600 11px var(--f-ui); text-transform: uppercase; letter-spacing: 0.06em; color: rgb(246 236 216 / 0.6); }
.focus-bar .icon-btn { margin-left: auto; flex: none; }
.focus-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 3px 10px 3px 4px;
  border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.12); background: rgb(18 12 10 / 0.78);
  color: rgb(246 236 216 / 0.85); font: 600 12.5px var(--f-ui);
}
.focus-chip.on { border-color: #F2CD85; color: #F2CD85; box-shadow: 0 0 0 1.5px rgb(242 205 133 / 0.35); }
.focus-chip:disabled { opacity: 0.45; }

.squad { display: flex; flex-wrap: wrap; gap: 6px; }
.squad-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 3px 12px 3px 4px; border-radius: 999px;
  border: 1px solid var(--line, rgb(255 255 255 / 0.14)); background: var(--surface-2, transparent); color: inherit; font: 600 13px var(--f-ui);
}
.squad-chip small { opacity: 0.7; font-weight: 500; }
.squad-chip.on { border-color: var(--gold-lo, #C9A14A); box-shadow: 0 0 0 2px var(--gold-soft, rgb(242 205 133 / 0.3)); }
.squad-chip.lead { cursor: default; }
.squad-chip:disabled { opacity: 0.45; }
.chip-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chip-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.chip.foe .chip-line { flex-direction: row-reverse; }
.chip-line strong { flex: 1; min-width: 0; font: 600 12.5px/1.15 var(--f-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-num { flex: none; font: 700 11.5px var(--f-ui); font-variant-numeric: tabular-nums; color: rgb(246 236 216 / 0.9); }
.chip small { font-size: 10.5px; line-height: 1.2; opacity: 0.78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip .hp-bar { height: 5px; }
.chip .foe-portrait { font-size: 26px; line-height: 1; flex: none; }
.chip .foe-portrait.has-art { line-height: 0; }
.chip .foe-pic { width: 36px; height: 36px; box-shadow: 0 0 0 1.5px rgb(216 85 58 / 0.6); }
.side[data-n="2"] .chip .foe-pic, .side[data-n="3"] .chip .foe-pic, .side[data-n="4"] .chip .foe-pic { width: 28px; height: 28px; }
.side[data-n="2"] .chip .foe-portrait, .side[data-n="3"] .chip .foe-portrait, .side[data-n="4"] .chip .foe-portrait { font-size: 20px; }
.chip.down .foe-portrait:not(.has-art) { transform: rotate(90deg); }
.chip .cosm-icon { display: none; }
/* 3 ou 4 do mesmo lado: grade 2×2, sem o número de PV (fica na barra e no rótulo) */
.side[data-n="3"] .chip, .side[data-n="4"] .chip { padding: 3px 4px; gap: 4px; border-radius: 10px; }
.side[data-n="3"] .chip-num, .side[data-n="4"] .chip-num { display: none; }
.side[data-n="3"] .chip-line strong, .side[data-n="4"] .chip-line strong { font-size: 11px; }
.side[data-n="3"] .chip .hp-bar, .side[data-n="4"] .chip .hp-bar { height: 4px; }
.side[data-n="3"] .chip .avatar.sm, .side[data-n="4"] .chip .avatar.sm,
.side[data-n="3"] .chip .foe-pic, .side[data-n="4"] .chip .foe-pic { width: 24px; height: 24px; font-size: 11px; }

/* a doca de golpes não engole a narração num celular baixo */
.arena-dock { max-height: 32dvh; overflow-y: auto; overscroll-behavior: contain; }
/* Fase 133: com o painel do turno a doca fica parada na base — a faixa "Sua vez" no alto, o
   "Encerrar turno" embaixo, só as opções rolam; o log guarda uma faixa visível acima dela */
.arena-dock:has(.turn-panel) { max-height: min(52dvh, 440px); overflow: hidden; display: flex; flex-direction: column; }
.arena-dock .turn-panel { flex: 1 1 auto; min-height: 0; }
.arena-dock .tp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.arena-view:has(.arena-dock .turn-panel) .arena-log { min-height: 112px; }
/* teclado aberto (campo em foco): a doca encolhe para a faixa de estado; tocar nela reabre */
.arena-view.typing .arena-dock .tp-body, .arena-view.typing .arena-dock .tp-foot { display: none; }
.arena-view.typing .arena-dock .tp-status { cursor: pointer; }
.arena-view.typing .arena-dock .tp-status::after { content: "ver opções ▴"; margin-left: auto; font: 600 12px var(--f-ui); color: rgb(240 163 90 / 0.85); }
/* o resumo do golpe: até quatro linhas fechado (dois golpes cabem), inteiro aberto */
.arena-log .rf-head { -webkit-line-clamp: 4; }
.arena-log details[open] .rf-head { display: block; -webkit-line-clamp: unset; overflow: visible; }
.arena-log .rf-head b, .arena-log .mech-line b, .arena-log summary b { color: #FFE2B8; font-weight: 800; }
.arena-dock .btn { min-height: 44px; }
@media (min-width: 720px) {
  .stage.compact { max-height: none; padding: 8px 16px; gap: 14px; }
  .stage.compact .side { max-width: 340px; }
  .stage.compact .heroes { justify-self: end; width: 100%; }
  .stage.compact .foes { justify-self: start; width: 100%; }
}
.chip small .chip-num { font-size: inherit; color: var(--arena-ink); }
.chip-pic { position: relative; flex: none; display: inline-grid; place-items: center; }
.chip-tag {
  position: absolute; right: -4px; bottom: -3px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px;
  display: grid; place-items: center; font: 800 9.5px/1 var(--f-ui); font-variant-numeric: tabular-nums;
  background: var(--arena-stone); color: var(--arena-ink); box-shadow: 0 0 0 1.5px currentColor;
}
.chip.foe .chip-tag { right: auto; left: -4px; color: #FFB79E; }
.side[data-n="3"] .chip.tagged .chip-line, .side[data-n="4"] .chip.tagged .chip-line { display: none; }

/* Fase 114: resultado compacto. A faixa de vitória/derrota substitui o palco grande, o espólio
   recolhe numa linha e a caixa de baixo tem teto: a narração final fica com mais da metade da tela. */
.stage.result { display: block; padding: 6px 8px; }
.stage.result .side, .stage.result .vs { display: none; }
.stage.result + .turn-bar { display: none; }
.stage.finale { display: none; } /* Fase 120: golpe final — só a faixa e o registro */
.stage.result .stage-banner {
  position: relative; left: auto; top: auto; transform: none; z-index: 2;
  flex-direction: row; justify-content: flex-start; gap: 10px; padding: 6px 12px; border-radius: 14px; text-align: left;
  animation: banner-strip-in 0.45s var(--ease);
}
.stage.result .stage-banner .banner-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stage.result .stage-banner strong { font-size: 20px; }
.stage.result .stage-banner span { font-size: 12.5px; }
.stage.result .stage-banner .foe-portrait { font-size: 28px; line-height: 1; }
.stage.result .stage-banner.win .foe-portrait { filter: grayscale(0.7); opacity: 0.85; }
.stage.result .stage-banner .foe-pic { width: 36px; height: 36px; }
@keyframes banner-strip-in { from { transform: scale(0.92); opacity: 0; } }
.arena-wait.result { max-height: 26dvh; overflow-y: auto; overscroll-behavior: contain; gap: 6px; padding: 8px 12px; }
.arena-wait.result .result-actions { flex-wrap: nowrap; gap: 6px; }
.arena-wait.result .result-actions .btn { flex: 1; min-width: 0; min-height: 40px; padding: 0 8px; font-size: 13.5px; white-space: nowrap; }
.arena-wait.result .result-actions .btn svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 420px) { .arena-wait.result .result-actions .btn svg { display: none; } .arena-wait.result .result-actions .btn { font-size: 13px; } }
.arena-wait.result .spoils .section-title { font-size: 16px; }
.spoils { padding: 0; gap: 0; }
.spoils > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; cursor: pointer; list-style: none; }
.spoils > summary::-webkit-details-marker { display: none; }
.spoils > summary::after { content: "▾"; margin-left: auto; color: #F2CD85; transition: transform 0.2s var(--ease); }
.spoils[open] > summary::after { transform: rotate(180deg); }
.spoils-sum { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.spoils-sum svg { width: 15px; height: 15px; color: #F2CD85; }
.spoils-sum b { color: #F2CD85; }
.spoils-body { display: flex; flex-direction: column; gap: 10px; padding: 0 12px 12px; }

/* Fase 133: com a doca do turno aberta, os avisos sobem para o alto (não cobrem "Encerrar turno") */
body:has(.arena-dock .turn-panel) .toasts { bottom: auto; top: calc(112px + env(safe-area-inset-top, 0px)); }