/* Protótipo do jogo de cartas do Auriks — moldura de celular 400×860, tema navy/ciano/roxo/dourado. */
:root {
  --navy: #0a1130; --navy2: #121b47; --navy3: #1b2763; --ink: #050817;
  --cyan: #3fe0ff; --purple: #8b5cf6; --gold: #ffc94a; --gold2: #ff9f1c; --red: #ff4d6d; --green: #5dff8a;
  --text: #eaf2ff; --muted: #9aa8d6;
  --title: 'Baloo 2', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --body: 'Mukta', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #050817; color: var(--text); font-family: var(--body); overflow: hidden; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
img { -webkit-user-drag: none; user-select: none; }
.muted { color: var(--muted); } .center { text-align: center; }

#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; gap: 48px;
  background: radial-gradient(1200px 700px at 30% 20%, #1a2466 0, transparent 60%), radial-gradient(900px 600px at 80% 90%, #3b1d6e 0, transparent 60%), #050817; }
#side { width: 300px; color: var(--muted); font-size: 14px; line-height: 1.5; }
#side h2 { font-family: var(--title); color: var(--text); font-size: 26px; margin: 0 0 4px; line-height: 1.1; }
#side .tag { display: inline-block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); border: 1px solid #ffc94a55; border-radius: 99px; padding: 2px 10px; margin-bottom: 12px; }
#side ul { padding-left: 18px; margin: 10px 0; }
#side b { color: var(--text); }
@media (max-width: 900px) { #side { display: none; } }
#frame-wrap { width: 400px; height: 860px; flex: none; }
#frame { position: relative; width: 400px; height: 860px; overflow: hidden; border-radius: 34px; background: var(--navy);
  box-shadow: 0 0 0 10px #0d0f1a, 0 0 0 12px #2a2f4a, 0 30px 80px rgba(0,0,0,.7); transform-origin: 0 0; user-select: none; touch-action: none; }
#screen { position: absolute; inset: 0; }
#fx-layer, #fx-canvas { position: absolute; left: 0; top: 0; width: 400px; height: 860px; pointer-events: none; z-index: 90; }
#fx-canvas { z-index: 89; }

/* idioma */
#lang { position: absolute; top: 9px; right: 10px; z-index: 150; display: flex; background: rgba(5,8,23,.75); border: 1px solid #ffffff22; border-radius: 99px; padding: 2px; backdrop-filter: blur(4px); }
#lang button { font: 800 11px var(--title); padding: 3px 9px 2px; border-radius: 99px; color: var(--muted); letter-spacing: .04em; }
#lang button.on { background: linear-gradient(180deg, var(--cyan), #1aa6d6); color: #04122a; }

/* ---------- botões genéricos ---------- */
.btn { font: 800 16px var(--title); padding: 10px 26px 8px; border-radius: 16px; color: #2a1500; background: linear-gradient(180deg, #ffe08a, var(--gold) 45%, var(--gold2));
  box-shadow: 0 4px 0 #a5560a, 0 8px 18px rgba(0,0,0,.4); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #a5560a; }
.btn.ghost { background: rgba(255,255,255,.08); color: var(--text); box-shadow: inset 0 0 0 1.5px #ffffff33; }
.icon-btn { width: 34px; height: 34px; border-radius: 50%; background: rgba(5,8,23,.6); border: 1px solid #ffffff22; font: 800 22px/1 var(--title); display: grid; place-items: center; padding-bottom: 3px; flex: none; }
.deck-btn { width: auto; padding: 0 10px; border-radius: 99px; font-size: 16px; gap: 4px; display: flex; }
.deck-btn small { font: 800 12px var(--title); }
.pill-btn { font: 700 11px var(--title); padding: 4px 10px 3px; border-radius: 99px; background: linear-gradient(180deg, #6d4bff, #4a2bd1); box-shadow: 0 2px 0 #2a1785; white-space: nowrap; }
.pill-btn.sent { background: #1d7a4a; box-shadow: none; }

.topbar { position: absolute; top: 0; left: 0; right: 0; height: 52px; display: flex; align-items: center; gap: 8px; padding: 8px 96px 8px 10px; z-index: 40;
  background: linear-gradient(180deg, rgba(5,8,23,.85), rgba(5,8,23,0)); }
.tb-title { font: 800 15px/1.1 var(--title); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 4px #000; }
.tb-coins { font: 800 13px var(--title); background: rgba(5,8,23,.6); border: 1px solid #ffc94a55; color: var(--gold); padding: 3px 9px 2px; border-radius: 99px; white-space: nowrap; }

/* ---------- CARTA (arte + moldura + textos por código) ---------- */
.card { --cw: 120px; position: relative; width: 10em; height: 14em; font-size: calc(var(--cw) / 10); border-radius: .95em; flex: none; user-select: none; touch-action: none; cursor: pointer; }
.c-body { position: absolute; inset: 0; border-radius: .95em; overflow: hidden; box-shadow: 0 .3em .8em rgba(0,0,0,.55), inset 0 0 0 .08em rgba(255,255,255,.5); }
.rar-comum .c-body    { background: linear-gradient(155deg, #f4f7fb, #a3afc2 38%, #e9eef5 58%, #7f8aa0); --rc: #cfd8e6; --rc2: #8793a8; }
.rar-rara .c-body     { background: linear-gradient(155deg, #b9d6ff, #3561d6 38%, #c9dcff 58%, #1d3a94); --rc: #6fa2ff; --rc2: #2447b3; }
.rar-epica .c-body    { background: linear-gradient(155deg, #ecd2ff, #8a3fe6 36%, #f5dc9e 56%, #5a1fa8); --rc: #c18bff; --rc2: #6d28d9; }
.rar-lendaria .c-body { background: linear-gradient(155deg, #fff4bf, #e0a020 32%, #fff8de 52%, #c2541b); --rc: #ffd25e; --rc2: #c76a12; }
.rar-lendaria .c-body::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%); background-size: 250% 100%; animation: sheen 3.2s ease-in-out infinite; mix-blend-mode: overlay; pointer-events: none; }
.rar-epica .c-body::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,230,255,.35) 48%, transparent 60%); background-size: 250% 100%; animation: sheen 4.5s ease-in-out infinite; mix-blend-mode: overlay; pointer-events: none; }
@keyframes sheen { 0%, 100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }
.c-art { position: absolute; left: .45em; right: .45em; top: .45em; height: 6.9em; overflow: hidden; background: #0a1130; box-shadow: inset 0 0 0 .1em rgba(0,0,0,.45); }
.c-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block; }
.type-atk .c-art { border-radius: .55em .55em 0 0; clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%); }
.type-def .c-art { border-radius: .55em .55em 45% 45% / .55em .55em 18% 18%; }
.type-skl .c-art { border-radius: .55em; }
.type-pow .c-art { border-radius: 50% 50% .6em .6em / 22% 22% .6em .6em; }
.c-name { position: absolute; left: .15em; right: .15em; top: 6.35em; height: 1.55em; display: flex; align-items: center; justify-content: center; border-radius: .35em;
  background: linear-gradient(180deg, var(--rc), var(--rc2)); box-shadow: 0 .12em .3em rgba(0,0,0,.5), inset 0 .08em 0 rgba(255,255,255,.55); padding: 0 .4em; }
.c-name span { font: 800 .82em/1 var(--title); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: .14em; letter-spacing: -.01em;
  text-shadow: 0 .08em 0 rgba(0,0,0,.6), 0 0 .3em rgba(0,0,0,.4); }
.c-type { position: absolute; left: 50%; top: 7.82em; transform: translateX(-50%); z-index: 2; background: rgba(5,8,23,.85); border-radius: 99px; padding: .16em .45em .08em; white-space: nowrap; box-shadow: 0 0 0 .06em rgba(255,255,255,.18); }
.c-type span { display: block; font: 800 .46em/1 var(--title); letter-spacing: .1em; text-transform: uppercase; color: #ffffffd0; padding-top: .15em; }
.type-atk .c-type span { color: #ffb0b0; } .type-def .c-type span { color: #a9dcff; } .type-skl .c-type span { color: #b6ffcf; } .type-pow .c-type span { color: #e1c4ff; }
.c-text { position: absolute; left: .45em; right: .45em; top: 8.05em; bottom: .45em; border-radius: .4em .4em .55em .55em; display: flex; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(180deg, #17224f, #0c1337); box-shadow: inset 0 0 0 .07em rgba(255,255,255,.18); padding: .55em .45em .5em; }
.c-text > div { font: 600 .7em/1.16 var(--body); color: #eef3ff; }
.c-text .num { font-weight: 800; color: #fff; }
.c-text .num.up { color: var(--green); } .c-text .num.down { color: #ff7a7a; }
.c-text .kw { color: #ffd36b; font-weight: 800; }
.kw { color: #ffd36b; font-weight: 700; }
.c-gem { position: absolute; left: 50%; bottom: .08em; width: .7em; height: .7em; transform: translateX(-50%) rotate(45deg); background: var(--rc); box-shadow: 0 0 .3em var(--rc), inset 0 0 0 .08em rgba(255,255,255,.7); }
.c-cost { position: absolute; left: -.38em; top: -.38em; width: 2.45em; height: 2.45em; border-radius: 50%; display: grid; place-items: center; z-index: 3;
  background: radial-gradient(circle at 35% 30%, #c9fbff, #3fe0ff 30%, #1667c9 70%, #0b2f73); box-shadow: 0 .1em .3em rgba(0,0,0,.6), 0 0 0 .13em #0a1130, 0 0 0 .22em #8fe9ff, 0 0 .6em #3fe0ff; }
.c-cost span { font: 800 1.45em/1 var(--title); color: #fff; padding-top: .12em; text-shadow: 0 .06em 0 #06306d, 0 0 .2em #06306d; }
.c-cost.up span { color: #8dffb0; } .c-cost.down span { color: #ff8a8a; }
.card.unplayable .c-cost span { color: #ff7a7a; }
.c-owner { position: absolute; right: -.32em; top: -.32em; width: 2.35em; height: 2.35em; border-radius: 50%; overflow: hidden; z-index: 3; background: radial-gradient(circle, #24336f, #0a1130);
  box-shadow: 0 .1em .3em rgba(0,0,0,.6), 0 0 0 .13em #0a1130, 0 0 0 .22em var(--rc, #fff); }
.rar-comum .c-owner { --rc: #cfd8e6; } .rar-rara .c-owner { --rc: #6fa2ff; } .rar-epica .c-owner { --rc: #c18bff; } .rar-lendaria .c-owner { --rc: #ffd25e; }
.c-owner img { width: 150%; margin: -12% 0 0 -25%; }
.card.off .c-body, .card.off .c-cost, .card.off .c-owner { filter: grayscale(1) brightness(.5); }
.c-off { position: absolute; left: 50%; top: 40%; width: 9em; transform: translate(-50%, -50%) rotate(-8deg); z-index: 5; background: rgba(5,8,23,.94); border: .12em solid #ff6b8a; color: #ffb3c1;
  font: 800 .95em/1.05 var(--title); padding: .4em .3em .25em; border-radius: .4em; text-align: center; box-shadow: 0 .2em .6em #000; }
.muted-card { opacity: .55; }

/* ---------- BATALHA ---------- */
.battle { position: absolute; inset: 0; overflow: hidden; }
.bg { position: absolute; inset: -14px; background: linear-gradient(180deg, #1d2a6b, #0a1130) center / cover no-repeat; background-size: cover; background-position: center 35%; }
.bg-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,8,23,.5) 0, rgba(5,8,23,0) 14%, rgba(5,8,23,0) 50%, rgba(5,8,23,.55) 70%, rgba(5,8,23,.93) 82%, #050817 100%); }
.shaking { animation: shake .38s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake { 10%, 90% { transform: translate(calc(var(--sh) * -.3), 1px); } 20%, 80% { transform: translate(calc(var(--sh) * .6), -2px); } 30%, 50%, 70% { transform: translate(calc(var(--sh) * -1), 2px); } 40%, 60% { transform: translate(var(--sh), -1px); } }
.field { position: absolute; inset: 0; }
.unit { position: absolute; width: 0; height: 0; --size: calc(118px * var(--sc, 1)); }
.sprite-wrap { position: absolute; left: calc(var(--size) / -2); top: calc(var(--size) * -1 + 10px); width: var(--size); height: var(--size); }
.ground { position: absolute; left: 18%; right: 18%; bottom: 4%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,0)); }
.breath { position: absolute; inset: 0; transform-origin: 50% 92%; animation: breathe 3.4s ease-in-out infinite; animation-delay: var(--delay); }
@keyframes breathe { 0%, 100% { transform: scale(1, 1) rotate(0); } 50% { transform: scale(1.018, 1.045) rotate(-.6deg); } }
.side-B .breath { animation-name: breatheB; }
@keyframes breatheB { 0%, 100% { transform: scale(1, 1) rotate(0); } 50% { transform: scale(1.018, 1.045) rotate(.6deg); } }
.sprite { width: 100%; height: 100%; object-fit: contain; display: block; transition: filter .3s, opacity .8s, transform .8s; }
.side-B .sprite { transform: scaleX(-1); }
.sprite-wrap.hit { animation: hitA .38s ease-out; }
.side-B .sprite-wrap.hit { animation-name: hitB; }
@keyframes hitA { 0% { filter: brightness(3) saturate(0); transform: translateX(0); } 25% { filter: brightness(2.2) sepia(1) hue-rotate(-40deg) saturate(4); transform: translateX(-9px); } 100% { filter: none; transform: none; } }
@keyframes hitB { 0% { filter: brightness(3) saturate(0); transform: translateX(0); } 25% { filter: brightness(2.2) sepia(1) hue-rotate(-40deg) saturate(4); transform: translateX(9px); } 100% { filter: none; transform: none; } }
.aura { position: absolute; inset: 8% 14% 6%; border-radius: 50%; opacity: 0; }
.side-B[class*='tint-'] .aura { opacity: 1; background: radial-gradient(closest-side, rgba(150,60,255,.55), rgba(150,60,255,0)); animation: auraPulse 2.6s ease-in-out infinite; }
.tint-fire .aura { background: radial-gradient(closest-side, rgba(255,110,40,.55), transparent) !important; }
.tint-crystal .aura { background: radial-gradient(closest-side, rgba(60,230,255,.5), transparent) !important; }
.tint-ice .aura { background: radial-gradient(closest-side, rgba(200,240,255,.45), transparent) !important; }
.tint-boss .aura { background: radial-gradient(closest-side, rgba(255,40,190,.6), transparent) !important; inset: -6% 0 0 !important; }
@keyframes auraPulse { 0%, 100% { transform: scale(.92); opacity: .75; } 50% { transform: scale(1.06); opacity: 1; } }
.tint-shadow .sprite  { filter: brightness(.85) saturate(.8) hue-rotate(240deg) contrast(1.1) drop-shadow(0 0 6px rgba(170,70,255,.85)); }
.tint-fire .sprite    { filter: brightness(.8) saturate(1.5) hue-rotate(-14deg) contrast(1.15) drop-shadow(0 0 8px rgba(255,90,30,.9)); }
.tint-crystal .sprite { filter: hue-rotate(150deg) saturate(1.25) brightness(.85) contrast(1.1) drop-shadow(0 0 8px rgba(80,240,255,.85)); }
.tint-ice .sprite     { filter: saturate(.35) brightness(1.05) hue-rotate(170deg) drop-shadow(0 0 7px rgba(190,240,255,.95)); }
.tint-boss .sprite    { filter: hue-rotate(85deg) saturate(1.6) brightness(.72) contrast(1.25) drop-shadow(0 0 14px rgba(255,60,200,.9)); }
.unit.acting .sprite-wrap { filter: drop-shadow(0 0 10px rgba(255,80,80,.9)); }
.unit.acting .intent { animation: intentAct .5s ease-in-out infinite alternate; }
@keyframes intentAct { to { transform: translateX(-50%) scale(1.18); } }
.unit.dead .sprite { filter: grayscale(1) brightness(.55) drop-shadow(0 0 4px #000) !important; opacity: .85; }
.side-A.dead .breath { animation: none; transform: rotate(-8deg) translateY(6px); }
.side-B.dead .sprite { opacity: 0; transform: scaleX(-1) translateY(18px) scale(.9); }
.side-B.dead .info, .dead .intent, .side-B.dead .aura { opacity: 0; transition: opacity .6s; }
.fallen-tag { position: absolute; left: 0; top: -54px; transform: translateX(-50%); font: 800 11px var(--title); background: rgba(5,8,23,.85); border: 1px solid #ff6b8a88; color: #ffb3c1; padding: 2px 8px 1px; border-radius: 99px; display: none; white-space: nowrap; }
.side-A.dead .fallen-tag { display: block; }
.unit.targetable .ground { background: radial-gradient(closest-side, rgba(255,90,90,.0) 55%, rgba(255,90,90,.95) 70%, rgba(255,90,90,0)); animation: tgPulse 1s ease-in-out infinite; left: 4%; right: 4%; height: 22%; bottom: 0; }
.side-A.targetable .ground { background: radial-gradient(closest-side, rgba(90,240,255,0) 55%, rgba(90,240,255,.95) 70%, rgba(90,240,255,0)); }
.unit.aimed .sprite-wrap { filter: brightness(1.25) drop-shadow(0 0 10px #fff); }
@keyframes tgPulse { 0%, 100% { opacity: .55; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.06); } }
.info { position: absolute; left: -46px; top: 8px; width: 92px; }
.uname { font: 800 10px/1 var(--title); text-align: center; text-shadow: 0 1px 2px #000, 0 0 4px #000; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.side-B .uname { color: #ffd0d8; }
.hpbar { position: relative; height: 11px; border-radius: 6px; background: #2a0b16; box-shadow: 0 0 0 1.5px #000c, 0 2px 4px #0008; }
.hpbar .fill, .hpbar .ghost { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
.hpbar .ghost { background: #ffe1e6; opacity: .65; transition: width .6s ease .1s; z-index: 0; }
.hpbar .fill { background: linear-gradient(180deg, #ff8fa3, #e8304f 60%, #b51d3a); z-index: 1; transition: width .25s ease; }
.side-A .hpbar .fill { background: linear-gradient(180deg, #a6ff9f, #33c45a 60%, #1c8a3c); }
.hpbar.shielded { box-shadow: 0 0 0 1.5px #7fd6ff, 0 0 8px #3fb8ff; }
.hpbar.shielded .fill { filter: hue-rotate(160deg) saturate(.8) brightness(1.1); }
.hptxt { position: absolute; inset: 0; z-index: 2; font: 800 9px/11px var(--title); text-align: center; color: #fff; text-shadow: 0 0 2px #000, 0 1px 1px #000; padding-top: 1px; }
.blk { position: absolute; left: -15px; top: -6px; width: 22px; height: 24px; z-index: 3; display: none; place-items: center;
  background: linear-gradient(180deg, #bfe9ff, #3a9bff 60%, #1b5fc9); clip-path: path('M11 0 L22 4 L21 14 Q18 21 11 24 Q4 21 1 14 L0 4 Z'); }
.blk.on { display: grid; animation: pop .3s ease-out; }
.blk span { font: 800 11px/1 var(--title); color: #fff; text-shadow: 0 1px 1px #0b3a7a; padding-top: 2px; }
.sts { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 4px; min-height: 18px; }
.st { position: relative; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-style: normal; background: rgba(5,8,23,.88); box-shadow: 0 0 0 1.5px #ffc94a; animation: pop .3s ease-out; cursor: help; }
.st.bad { box-shadow: 0 0 0 1.5px #c77dff; }
.st-regen { color: #6dff9a; font-weight: 800; } .st-pow { color: #e1c4ff; font-size: 12px; box-shadow: 0 0 0 1.5px #a78bfa, 0 0 6px #a78bfa; }
.st b { position: absolute; right: -4px; bottom: -4px; font: 800 9px/1 var(--title); background: #fff; color: #0a1130; border-radius: 6px; padding: 2px 3px 0; min-width: 11px; text-align: center; }
.intent { position: absolute; left: 0; bottom: calc(var(--size) - 6px); transform: translateX(-50%); display: none; align-items: center; gap: 3px; white-space: nowrap; animation: bob 2s ease-in-out infinite; }
.intent.on { display: flex; }
@keyframes bob { 0%, 100% { margin-bottom: 0; } 50% { margin-bottom: 4px; } }
.in { display: inline-flex; align-items: center; gap: 1px; background: rgba(5,8,23,.85); border-radius: 99px; padding: 1px 7px 0 5px; font-size: 15px; box-shadow: 0 0 0 1.5px #ffffff33; }
.in b { font: 800 15px/1 var(--title); color: #fff; padding-top: 2px; text-shadow: 0 0 3px #000; }
.in small { font: 700 9px var(--title); color: #ffb3b3; margin-left: 2px; }
.in.atk { box-shadow: 0 0 0 1.5px #ff6b6b, 0 0 10px rgba(255,80,80,.6); }
.in.atk.big b { color: #ffd166; }
.in.def { box-shadow: 0 0 0 1.5px #7fd6ff; } .in.buff { box-shadow: 0 0 0 1.5px #ffc94a; } .in.debuff, .in.poison { box-shadow: 0 0 0 1.5px #c77dff; }
.in-tgt { width: 22px; height: 22px; border-radius: 50%; background: #0a1130; box-shadow: 0 0 0 1.5px #ff6b6b; object-fit: cover; object-position: 50% 20%; }

.aim { position: absolute; inset: 0; width: 400px; height: 860px; pointer-events: none; display: none; z-index: 70; }
.aim.on { display: block; }
.aim path { fill: none; stroke: #9be9ff; stroke-width: 6; stroke-dasharray: 2 12; stroke-linecap: round; filter: drop-shadow(0 0 4px #3fe0ff); animation: dash .5s linear infinite; }
.aim polygon { fill: #9be9ff; filter: drop-shadow(0 0 4px #3fe0ff); }
.aim.ok path { stroke: #ffd36b; filter: drop-shadow(0 0 5px #ff9f1c); } .aim.ok polygon { fill: #ffd36b; }
@keyframes dash { to { stroke-dashoffset: -14; } }

/* HUD */
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
.hud > * { pointer-events: auto; }
.energy { position: absolute; left: 6px; top: 676px; width: 66px; height: 66px; z-index: 5; }
.energy .orb { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 36% 30%, #e3fdff, #3fe0ff 26%, #1a7fe0 58%, #0a2a78 85%); box-shadow: 0 0 0 3px #0a1130, 0 0 0 5px #8fe9ff, 0 0 22px #3fe0ff, inset 0 -6px 12px rgba(0,0,40,.5); }
.energy .orb::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 2px dashed rgba(143,233,255,.6); animation: spin 9s linear infinite; }
.energy span { font: 800 21px/1 var(--title); color: #fff; text-shadow: 0 2px 0 #062a6b, 0 0 6px #062a6b; padding-top: 3px; }
.energy.empty .orb { filter: grayscale(.9) brightness(.7); }
@keyframes spin { to { transform: rotate(360deg); } }
.pile { position: absolute; bottom: 12px; width: 46px; height: 50px; border-radius: 10px; background: linear-gradient(180deg, #24336f, #0e1640); box-shadow: 0 0 0 1.5px #ffffff30, 0 4px 10px #0008; display: grid; place-items: center; z-index: 60; }
.pile i { font-style: normal; font-size: 20px; opacity: .85; }
.pile span { position: absolute; right: -6px; bottom: -6px; font: 800 11px/1 var(--title); background: var(--cyan); color: #04122a; border-radius: 99px; padding: 4px 6px 2px; min-width: 20px; }
.pile.draw { left: 10px; } .pile.discard { right: 10px; } .pile.discard span { background: #c9a6ff; }
.endturn { position: absolute; right: 8px; top: 612px; font: 800 14px/1 var(--title); color: #2a1500; padding: 10px 14px 8px; border-radius: 14px; z-index: 5;
  background: linear-gradient(180deg, #ffe08a, var(--gold) 45%, var(--gold2)); box-shadow: 0 4px 0 #a5560a, 0 6px 16px rgba(0,0,0,.5); max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.endturn:disabled { background: linear-gradient(180deg, #59628c, #343c66); color: #c3cbef; box-shadow: 0 4px 0 #1b2147; }
.endturn.glow { animation: glowPulse 1.1s ease-in-out infinite; }
@keyframes glowPulse { 50% { box-shadow: 0 4px 0 #a5560a, 0 0 26px #ffc94a; transform: scale(1.05); } }
.hint { position: absolute; left: 64px; right: 64px; top: 662px; text-align: center; font: 600 11px/1.2 var(--body); color: #bfe9ff; text-shadow: 0 1px 2px #000; pointer-events: none; }
.hand { position: absolute; left: 0; top: 680px; width: 400px; height: 180px; z-index: 30; }
.hand .card { --cw: 92px; position: absolute; left: 0; top: 0; transform-origin: 50% 55%; transition: transform .24s cubic-bezier(.2,.8,.3,1), opacity .24s; will-change: transform; }
.hand .card.playable .c-body { box-shadow: 0 .3em .8em rgba(0,0,0,.55), 0 0 0 .14em #8ff3ff, 0 0 .9em #3fe0ff; }
.hand .card.sel .c-body { box-shadow: 0 .4em 1.2em rgba(0,0,0,.6), 0 0 0 .14em #ffe08a, 0 0 1.3em #ffc94a; }
.hand .card.ready .c-body { box-shadow: 0 0 0 .18em #ffe08a, 0 0 1.8em #ffc94a; }
.hand .card.dragging { transition: none; }

.banner { position: absolute; left: 0; right: 0; top: 340px; height: 74px; display: grid; place-items: center; pointer-events: none; z-index: 95; opacity: 0; }
.banner span { font: 800 30px/1 var(--title); color: #fff; letter-spacing: .02em; text-shadow: 0 3px 0 #0a1130, 0 0 14px rgba(63,224,255,.8); padding-top: 6px; }
.banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(10,17,48,.92) 20%, rgba(10,17,48,.92) 80%, transparent); border-top: 2px solid #3fe0ff88; border-bottom: 2px solid #3fe0ff88; z-index: -1; }
.banner.enemy span { text-shadow: 0 3px 0 #2a0710, 0 0 14px rgba(255,80,110,.85); }
.banner.enemy::before { border-color: #ff6b8a88; }
.banner.on { animation: bannerIn 1s ease-in-out forwards; }
@keyframes bannerIn { 0% { opacity: 0; transform: scaleY(.2); } 15% { opacity: 1; transform: scaleY(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scaleY(.8); } }
.banner.on span { animation: bannerTxt 1s ease-out; }
@keyframes bannerTxt { 0% { transform: translateX(-60px); opacity: 0; } 20% { transform: translateX(0); opacity: 1; } 80% { transform: translateX(0); } 100% { transform: translateX(40px); opacity: 0; } }
.showcase { position: absolute; left: 50%; top: 330px; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; z-index: 96; transition: transform .25s cubic-bezier(.2,.9,.3,1.3), opacity .2s; }
.showcase .card { --cw: 150px; }
.showcase.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.showcase.on .card { filter: drop-shadow(0 0 22px rgba(255,90,120,.7)); }

/* Duelo */
.duelbar { position: absolute; top: 0; left: 0; right: 0; height: 92px; z-index: 40; padding: 8px 10px 0; background: linear-gradient(180deg, rgba(5,8,23,.92), rgba(5,8,23,.5) 70%, rgba(5,8,23,0)); }
.duelbar #bBack { position: absolute; left: 10px; top: 9px; }
.rival { position: absolute; left: 52px; top: 6px; right: 96px; display: flex; align-items: center; gap: 8px; }
.rv-ava { position: relative; width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle, #3b1d4e, #12081f); box-shadow: 0 0 0 2px #ff6b8a, 0 0 10px #ff6b8a88; flex: none; }
.rv-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; object-position: 50% 15%; }
.rv-ava .dot { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #34e07a; box-shadow: 0 0 0 2px #0a1130; }
.rv-ava.big { width: 74px; height: 74px; }
.rv-info { display: flex; flex-direction: column; min-width: 0; }
.rv-info b { font: 800 15px/1.1 var(--title); }
.rv-info small { font: 600 10px/1.2 var(--body); color: var(--muted); white-space: nowrap; }
.rv-info .on { color: #34e07a; }
.rv-hand { position: absolute; left: 4px; top: 54px; display: flex; }
.rv-hand i { width: 11px; height: 16px; border-radius: 2px; margin-right: -3px; background: linear-gradient(135deg, #6d4bff, #2b1785); box-shadow: 0 0 0 1px #c9b8ff88; }
.duelbar .pill-btn { position: absolute; left: 170px; top: 56px; }
.timer { position: absolute; width: 38px; height: 38px; display: grid; place-items: center; }
.timer svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.timer circle { fill: rgba(5,8,23,.8); stroke: #ffffff22; stroke-width: 3; }
.timer circle.t { fill: none; stroke: var(--cyan); stroke-dasharray: 94.2; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.timer span { position: relative; font: 800 13px/1 var(--title); padding-top: 2px; }
.timer:not(.active) { opacity: .4; }
.timer.low circle.t { stroke: var(--red); } .timer.low span { color: #ff8a8a; animation: pop .5s ease-in-out infinite alternate; }
.timer.rv { position: relative; margin-left: auto; }
.timer.rv circle.t { stroke: #ff6b8a; }
.timer.me { right: 14px; top: 568px; }
.emoji-btn { position: absolute; left: 12px; top: 616px; width: 42px; height: 42px; border-radius: 50%; font-size: 22px; background: rgba(5,8,23,.8); box-shadow: 0 0 0 1.5px #ffffff33, 0 4px 10px #0008; z-index: 6; }
.emoji-pop { position: absolute; left: 12px; top: 520px; z-index: 120; display: grid; grid-template-columns: repeat(4, 42px); gap: 6px; padding: 8px; border-radius: 16px; background: rgba(10,17,48,.96); box-shadow: 0 0 0 1.5px #3fe0ff66, 0 10px 30px #000a; animation: pop .2s ease-out; }
.emoji-pop button { font-size: 24px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.06); }
.emoji-pop button:hover { background: rgba(63,224,255,.2); }
.emo-bubble { position: absolute; z-index: 130; font-size: 38px; width: 64px; height: 60px; display: grid; place-items: center; background: #fff; border-radius: 22px; box-shadow: 0 6px 20px #000a; animation: emo 2.2s ease-in-out forwards; }
.emo-bubble::after { content: ''; position: absolute; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); }
.emo-bubble.me { left: 70px; top: 420px; } .emo-bubble.me::after { left: 14px; bottom: -6px; }
.emo-bubble.rv { left: 70px; top: 82px; } .emo-bubble.rv::after { left: 14px; top: -6px; }
@keyframes emo { 0% { transform: scale(0) rotate(-20deg); } 12% { transform: scale(1.15) rotate(5deg); } 20% { transform: scale(1) rotate(0); } 85% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-20px) scale(.8); } }
.duel-intro { position: absolute; inset: 0; z-index: 140; background: radial-gradient(circle at 50% 50%, rgba(63,224,255,.25), rgba(5,8,23,.92) 60%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; animation: fadeIn .3s; }
.duel-intro.out { opacity: 0; transition: opacity .35s; }
.di-side { display: flex; align-items: flex-end; gap: 0; position: relative; }
.di-side img { width: 104px; margin: 0 -14px; filter: drop-shadow(0 6px 10px #000); }
.di-side b { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); font: 800 18px var(--title); white-space: nowrap; text-shadow: 0 2px 4px #000; }
.di-side.me { animation: slideL .5s cubic-bezier(.2,.9,.3,1.2); }
.di-side.rv { animation: slideR .5s cubic-bezier(.2,.9,.3,1.2); }
.di-side.rv img { transform: scaleX(-1); }
.di-vs { font: 800 64px/1 var(--title); color: var(--gold); text-shadow: 0 4px 0 #a5560a, 0 0 30px #ffc94a; animation: vs .6s .25s both cubic-bezier(.2,.9,.3,1.5); margin: 14px 0 6px; }
@keyframes slideL { from { transform: translateX(-300px); } } @keyframes slideR { from { transform: translateX(300px); } }
@keyframes vs { from { transform: scale(3); opacity: 0; } }

/* ---------- FX ---------- */
.fx { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.fx.flash { inset: 0; left: 0 !important; top: 0 !important; transform: none; animation: flash linear forwards; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
.slash svg { overflow: visible; display: block; }
.slash path { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 230; stroke-dashoffset: 230; filter: drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 10px var(--c)); animation: slashDraw .42s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes slashDraw { 0% { stroke-dashoffset: 230; stroke-width: 9; opacity: 1; } 45% { stroke-dashoffset: 0; stroke-width: 7; opacity: 1; } 100% { stroke-dashoffset: -230; stroke-width: 1; opacity: 0; } }
.pow span { display: block; font-size: 54px; animation: powPop .5s ease-out forwards; }
@keyframes powPop { 0% { transform: scale(.2); opacity: 1; } 50% { transform: scale(1.3); } 100% { transform: scale(1.5); opacity: 0; } }
.bite { width: 90px; height: 90px; }
.fang { position: absolute; left: 0; right: 0; height: 26px; background: repeating-linear-gradient(90deg, transparent 0 6px, #fff 6px 7px); }
.fang { background: none; }
.fang::before { content: ''; position: absolute; inset: 0; background: #fff; filter: drop-shadow(0 0 6px #b6ff6a); clip-path: polygon(0 0, 100% 0, 85% 100%, 72% 0, 58% 100%, 42% 0, 28% 100%, 15% 0); }
.fang.t { top: 0; animation: fangT .45s ease-in forwards; } .fang.b { bottom: 0; transform: scaleY(-1); animation: fangB .45s ease-in forwards; }
@keyframes fangT { 0% { transform: translateY(-34px); opacity: 0; } 50% { transform: translateY(18px); opacity: 1; } 100% { transform: translateY(18px); opacity: 0; } }
@keyframes fangB { 0% { transform: scaleY(-1) translateY(-34px); opacity: 0; } 50% { transform: scaleY(-1) translateY(18px); opacity: 1; } 100% { transform: scaleY(-1) translateY(18px); opacity: 0; } }
.ice { width: 120px; height: 120px; }
.shard { position: absolute; left: 40%; top: 20%; width: 26px; height: 70px; background: linear-gradient(180deg, #fff, #9fe8ff 50%, #3aa8ff); clip-path: polygon(50% 0, 100% 30%, 70% 100%, 30% 100%, 0 30%); filter: drop-shadow(0 0 8px #bdf3ff); animation: shard .6s ease-out forwards; }
.shard.s2 { left: 15%; top: 35%; transform: rotate(-35deg); animation-delay: .06s; } .shard.s3 { left: 65%; top: 35%; transform: rotate(35deg); animation-delay: .12s; }
@keyframes shard { 0% { scale: 0; opacity: 0; } 40% { scale: 1.1; opacity: 1; } 100% { scale: 1; opacity: 0; } }
.shield .bubble { width: 130px; height: 140px; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 50% 45%, rgba(127,214,255,0) 50%, rgba(127,214,255,.35) 72%, rgba(200,240,255,.85) 100%);
  box-shadow: 0 0 22px rgba(80,190,255,.7), inset 0 0 18px rgba(200,240,255,.6); animation: bubble .9s ease-out forwards; overflow: hidden; position: relative; }
.shield .bubble::after { content: ''; position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%); animation: bubbleSheen .7s .1s ease-out forwards; transform: translateX(-80%); }
@keyframes bubble { 0% { transform: scale(.4); opacity: 0; } 25% { transform: scale(1.08); opacity: 1; } 45% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1.04); } }
@keyframes bubbleSheen { to { transform: translateX(80%); } }
.healglow { width: 130px; height: 50px; margin-top: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(110,255,150,.85), rgba(110,255,150,0)); animation: glowFade .9s ease-out forwards; }
.buffglow { width: 130px; height: 140px; border-radius: 50%; background: radial-gradient(closest-side, var(--c), transparent); mix-blend-mode: screen; animation: glowFade .9s ease-out forwards; opacity: .6; }
@keyframes glowFade { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(1.15); } }
.zzz span { position: absolute; font: 800 20px var(--title); color: #e6dcff; text-shadow: 0 0 8px #8b5cf6; animation: zzz 1.4s ease-out forwards; opacity: 0; }
.zzz span:nth-child(2) { animation-delay: .2s; left: 12px; font-size: 24px; } .zzz span:nth-child(3) { animation-delay: .4s; left: 26px; font-size: 30px; }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(16px, -50px); } }
.num { z-index: 3; }
.num span { display: block; font: 800 34px/1 var(--title); color: #fff; -webkit-text-stroke: 2px #5a0010; paint-order: stroke fill; text-shadow: 0 3px 0 #5a0010, 0 0 12px rgba(255,60,60,.8); animation: numUp 1.25s cubic-bezier(.2,.8,.3,1) forwards; }
.num-blocked span { color: #cfeeff; -webkit-text-stroke-color: #0b3a7a; text-shadow: 0 3px 0 #0b3a7a, 0 0 10px #3fb8ff; font-size: 24px; }
.num-block span { color: #9fdcff; -webkit-text-stroke-color: #0b3a7a; text-shadow: 0 3px 0 #0b3a7a, 0 0 10px #3fb8ff; font-size: 24px; }
.num-heal span { color: #9dffb4; -webkit-text-stroke-color: #0b5a24; text-shadow: 0 3px 0 #0b5a24, 0 0 10px #4dff88; font-size: 26px; }
.num-poison span { color: #c8ff6b; -webkit-text-stroke-color: #2d5a00; text-shadow: 0 3px 0 #2d5a00, 0 0 10px #a6ff4d; }
@keyframes numUp { 0% { transform: translate(0, 10px) scale(.4); opacity: 0; } 15% { transform: translate(0, -14px) scale(1.5); opacity: 1; } 30% { transform: translate(calc(var(--dx) * .3), -26px) scale(1); } 75% { opacity: 1; } 100% { transform: translate(var(--dx), -78px) scale(.9); opacity: 0; } }
.ftext span { display: block; font: 800 17px/1 var(--title); color: #fff; white-space: nowrap; text-shadow: 0 2px 0 #0a1130, 0 0 8px #0a1130; animation: fUp 1.4s ease-out forwards; }
.ftext-gold span { color: #ffd36b; } .ftext-heal span { color: #9dffb4; } .ftext-poison span { color: #c8ff6b; }
@keyframes fUp { 0% { transform: translateY(6px) scale(.6); opacity: 0; } 15% { transform: translateY(-6px) scale(1.1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-46px); opacity: 0; } }
@keyframes pop { 0% { transform: scale(.3); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- toasts, modais, dicas ---------- */
.toast { position: absolute; left: 50%; top: 560px; transform: translateX(-50%); z-index: 200; background: rgba(10,17,48,.95); border: 1px solid #3fe0ff77; padding: 7px 14px 5px; border-radius: 99px; font: 700 13px var(--title); white-space: nowrap; animation: pop .25s ease-out; box-shadow: 0 8px 20px #000a; }
.toast.out { opacity: 0; transition: opacity .35s; }
.modal { position: absolute; inset: 0; z-index: 180; background: rgba(3,5,16,.78); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 18px; animation: fadeIn .2s; }
.modal.out { opacity: 0; transition: opacity .2s; }
.modal-box { width: 100%; max-height: 92%; overflow: auto; background: linear-gradient(180deg, #16205a, #0b1236); border-radius: 22px; padding: 16px 12px; box-shadow: 0 0 0 1.5px #ffffff22, 0 20px 50px #000; text-align: center; scrollbar-width: thin; }
.modal-box h3 { font: 800 18px var(--title); margin: 2px 0 12px; }
.card-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; margin-bottom: 14px; }
.card-grid .card { --cw: 104px; }
.zoom { display: flex; justify-content: center; margin: 6px 0 14px; } .zoom .card { --cw: 220px; }
.zoom-modal .modal-box { background: none; box-shadow: none; overflow: visible; }
.zoom-info { display: flex; gap: 10px; align-items: center; text-align: left; background: rgba(10,17,48,.9); border-radius: 16px; padding: 8px 12px; box-shadow: 0 0 0 1px #ffffff22; }
.zoom-info img { width: 64px; flex: none; } .zoom-info small { color: var(--muted); font-size: 11px; display: block; } .zoom-info b { font: 800 16px var(--title); } .zoom-info p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.3; }
.zoom-langs { margin-top: 10px; display: inline-flex; background: rgba(5,8,23,.8); border-radius: 99px; padding: 3px; }
.zoom-langs button { font: 800 13px var(--title); padding: 5px 16px 3px; border-radius: 99px; color: var(--muted); } .zoom-langs button.on { background: var(--cyan); color: #04122a; }
.duel-end h2 { font: 800 40px/1 var(--title); margin: 8px 0; color: var(--gold); text-shadow: 0 3px 0 #a5560a, 0 0 20px #ffc94a88; }
.duel-end.lose h2 { color: #ff8aa0; text-shadow: 0 3px 0 #5a0010; }
.end-btns { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.tip { position: absolute; z-index: 210; transform: translate(-50%, -100%); background: rgba(10,17,48,.97); border: 1px solid #3fe0ff88; border-radius: 12px; padding: 7px 10px 5px; font-size: 12px; line-height: 1.3; max-width: 220px; text-align: center; box-shadow: 0 8px 20px #000a; animation: pop .2s; }
.tip b { font-family: var(--title); color: #ffd36b; }

/* ---------- MENU ---------- */
.menu { position: absolute; inset: 0; overflow: hidden; }
.menu-bg { position: absolute; inset: -20px; background: url(../img/bg/bg_arena.jpg) center 30% / cover; filter: blur(2px) saturate(1.1); }
.menu-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,8,23,.55), rgba(5,8,23,.25) 30%, rgba(5,8,23,.85) 62%, #050817); }
.menu-cards .mc { position: absolute; top: 172px; filter: drop-shadow(0 10px 20px #000); }
.menu-cards img { width: 110px; border-radius: 10px; box-shadow: 0 0 0 3px #ffffff40, 0 0 30px rgba(63,224,255,.4); display: block; }
.mc0 { left: 14px; transform: rotate(-14deg); animation: float 5s ease-in-out infinite; }
.mc1 { left: 145px; top: 146px !important; z-index: 1; animation: float 5s -1.6s ease-in-out infinite; }
.mc2 { right: 14px; transform: rotate(14deg); animation: float 5s -3.2s ease-in-out infinite; }
.mc1 img { width: 112px; box-shadow: 0 0 0 3px #ffd25e, 0 0 36px rgba(255,201,74,.6); }
@keyframes float { 50% { translate: 0 -10px; } }
.menu-head { position: absolute; top: 46px; left: 0; right: 0; text-align: center; z-index: 2; }
.logo { display: inline-block; font: 800 15px/1 var(--title); letter-spacing: .3em; text-transform: uppercase; color: var(--cyan); text-shadow: 0 0 12px #3fe0ff; padding-left: .3em; }
.menu-head h1 { margin: 2px 0 0; font: 800 40px/1 var(--title); background: linear-gradient(180deg, #fff8d6, #ffc94a 55%, #ff9f1c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #7a3d00) drop-shadow(0 0 16px rgba(255,180,60,.5)); }
.menu-head p { margin: 4px 0 0; font: 600 12px var(--body); color: #c8d4ff; letter-spacing: .05em; }
.menu-team { position: absolute; top: 300px; left: 0; right: 0; height: 170px; z-index: 2; }
.menu-team img { position: absolute; width: 150px; filter: drop-shadow(0 10px 12px rgba(0,0,0,.6)); transform-origin: 50% 92%; animation: breathe 3.4s ease-in-out infinite; }
.mt0 { left: 8px; top: 18px; } .mt1 { left: 125px; top: 0; width: 160px !important; animation-delay: -1.1s !important; } .mt2 { right: 8px; top: 22px; animation-delay: -2.2s !important; }
.menu-btns { position: absolute; left: 18px; right: 18px; top: 488px; display: flex; flex-direction: column; gap: 12px; z-index: 3; }
.mode-btn { display: flex; align-items: center; gap: 14px; text-align: left; padding: 13px 16px; border-radius: 20px; background: linear-gradient(135deg, rgba(27,39,99,.92), rgba(12,18,52,.92)); box-shadow: 0 0 0 1.5px #ffffff22, 0 10px 24px rgba(0,0,0,.5); transition: transform .15s; position: relative; overflow: hidden; }
.mode-btn:active { transform: scale(.97); }
.mode-btn::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--ac); box-shadow: 0 0 14px var(--ac); }
.mode-btn.trail { --ac: #3fe0ff; } .mode-btn.duel { --ac: #ff6b8a; } .mode-btn.coll { --ac: #ffc94a; }
.mode-btn .ic { width: 50px; height: 50px; flex: none; border-radius: 15px; display: grid; place-items: center; font-size: 26px; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.25), rgba(255,255,255,.04)); box-shadow: inset 0 0 0 1.5px var(--ac); }
.mode-btn b { display: block; font: 800 19px/1.1 var(--title); }
.mode-btn small { display: block; font: 500 12px/1.25 var(--body); color: var(--muted); margin-top: 2px; }
.proto-tag { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font: 700 10px var(--title); letter-spacing: .14em; text-transform: uppercase; color: #ffffff55; z-index: 3; }

/* ---------- páginas ---------- */
.page { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(600px 400px at 50% 0, #1b2763, transparent 70%), var(--navy); }
.tabs { position: absolute; top: 56px; left: 14px; right: 14px; display: flex; background: rgba(5,8,23,.6); border-radius: 14px; padding: 4px; z-index: 5; }
.tabs button { flex: 1; font: 800 14px var(--title); padding: 7px 0 5px; border-radius: 10px; color: var(--muted); }
.tabs button.on { background: linear-gradient(180deg, #2a3a8a, #1b2763); color: #fff; box-shadow: 0 0 0 1px #3fe0ff55; }
.coll .chips { position: absolute; top: 102px; left: 0; right: 0; display: flex; gap: 6px; overflow-x: auto; padding: 4px 14px 8px; scrollbar-width: none; }
.chip { flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(5,8,23,.6); box-shadow: 0 0 0 1.5px #ffffff22; display: grid; place-items: center; font-size: 16px; color: var(--gold); overflow: hidden; }
.chip img { width: 140%; margin-top: 10%; } .chip.on { box-shadow: 0 0 0 2px var(--cyan), 0 0 10px #3fe0ff; } .chip.team { background: rgba(255,201,74,.18); }
.coll .card-grid.big { position: absolute; top: 154px; bottom: 0; left: 0; right: 0; overflow-y: auto; padding: 10px 10px 40px; align-content: flex-start; gap: 16px 8px; scrollbar-width: thin; }
.cg-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cg-item .card { --cw: 118px; }
.cg-item small { font: 600 10px var(--body); color: var(--muted); }
.cg-item.in-team small { color: var(--gold); }
.coll p.muted.center { position: absolute; top: 102px; left: 0; right: 0; font-size: 13px; margin: 0; }
.tp-slots { position: absolute; top: 126px; left: 14px; right: 14px; display: flex; gap: 10px; }
.tp-slot { flex: 1; height: 98px; border-radius: 16px; border: 2px dashed #ffffff33; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 800 24px var(--title); color: #ffffff44; }
.tp-slot.on { border: 0; background: linear-gradient(180deg, rgba(63,224,255,.18), rgba(63,224,255,.04)); box-shadow: 0 0 0 1.5px #3fe0ff88; }
.tp-slot img { width: 76px; height: 70px; object-fit: contain; } .tp-slot b { font: 800 11px var(--title); color: #fff; }
.tp-grid { position: absolute; top: 236px; bottom: 0; left: 0; right: 0; overflow-y: auto; padding: 4px 14px 30px; display: flex; flex-direction: column; gap: 8px; }
.tp-pet { display: flex; gap: 10px; align-items: center; text-align: left; padding: 6px 10px 6px 4px; border-radius: 16px; background: rgba(27,39,99,.6); box-shadow: 0 0 0 1.5px #ffffff18; }
.tp-pet.on { background: linear-gradient(90deg, rgba(255,201,74,.22), rgba(27,39,99,.6)); box-shadow: 0 0 0 2px #ffc94a; }
.tp-pet img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.tp-pet b { font: 800 15px/1.1 var(--title); } .tp-pet small { font: 600 11px var(--body); color: var(--muted); margin-left: 6px; }
.tp-pet p { margin: 2px 0 0; font-size: 11.5px; line-height: 1.25; color: #cfd8ff; }

/* mapa */
.team-strip { display: flex; gap: 8px; justify-content: center; }
.mapp .team-strip { position: absolute; top: 52px; left: 0; right: 0; z-index: 5; }
.ts { width: 92px; display: flex; flex-direction: column; align-items: center; background: rgba(5,8,23,.7); border-radius: 12px; padding: 2px 6px 4px; box-shadow: 0 0 0 1px #ffffff1a; }
.ts img { width: 46px; height: 42px; object-fit: contain; }
.ts-bar { width: 100%; height: 6px; border-radius: 4px; background: #2a0b16; overflow: hidden; } .ts-bar i { display: block; height: 100%; background: linear-gradient(90deg, #33c45a, #a6ff9f); }
.ts small { font: 700 10px var(--title); color: var(--muted); }
.ts.down img { filter: grayscale(1) brightness(.5); } .ts.down small { color: #ff8aa0; }
.map-scroll { position: absolute; top: 128px; bottom: 44px; left: 0; right: 0; overflow-y: auto; scrollbar-width: none; scroll-behavior: smooth; }
.map-inner { position: relative; }
.band { position: absolute; left: 0; right: 0; background-size: cover; background-position: center; border-top: 1px solid #ffffff14; }
.band span { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); background: rgba(5,8,23,.7); padding: 2px 10px 0; border-radius: 99px; white-space: nowrap; font: 800 12px var(--title); letter-spacing: .12em; text-transform: uppercase; color: #ffffffaa; text-shadow: 0 1px 3px #000; }
.boss-glow { position: absolute; left: 50%; width: 220px; height: 160px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255,60,200,.45), transparent); animation: auraPulse 2.6s ease-in-out infinite; }
.map-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-lines line { stroke: #ffffff40; stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.map-lines line.done { stroke: #ffc94a; stroke-dasharray: none; }
.node { position: absolute; width: 46px; height: 46px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; font-size: 22px;
  background: radial-gradient(circle at 35% 30%, #3a4a96, #141c4a); box-shadow: 0 0 0 2.5px #0a1130, 0 0 0 4px #ffffff44, 0 6px 12px #000a; filter: saturate(.6) brightness(.8); }
.node.n-E { background: radial-gradient(circle at 35% 30%, #7a2a4a, #2a0b1a); } .node.n-R { background: radial-gradient(circle at 35% 30%, #8a5a1a, #3a1e05); }
.node.n-X { width: 70px; height: 70px; font-size: 36px; background: radial-gradient(circle at 35% 30%, #a02a8a, #3a0b35); box-shadow: 0 0 0 3px #0a1130, 0 0 0 5px #ff5ad1, 0 0 24px #ff5ad1; }
.node.visited { filter: grayscale(.8) brightness(.55); }
.node.here { filter: none; box-shadow: 0 0 0 2.5px #0a1130, 0 0 0 4.5px #ffc94a, 0 0 18px #ffc94a; }
.node.reach { filter: none; box-shadow: 0 0 0 2.5px #0a1130, 0 0 0 4.5px #3fe0ff, 0 0 18px #3fe0ff; animation: nodePulse 1.2s ease-in-out infinite; z-index: 2; }
@keyframes nodePulse { 50% { transform: translate(-50%, -50%) scale(1.12); } }
.map-legend { position: absolute; bottom: 0; left: 0; right: 0; height: 44px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 0 8px; font: 600 10px var(--body); color: var(--muted); background: rgba(5,8,23,.92); padding: 0 8px; }

/* recompensa / fim */
.reward, .endp { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 16px; }
.rw-glow { position: absolute; left: 50%; top: 34%; width: 520px; height: 520px; transform: translate(-50%, -50%); background: conic-gradient(from 0deg, transparent, rgba(255,201,74,.25), transparent 25%, rgba(63,224,255,.2), transparent 50%, rgba(255,201,74,.25), transparent 75%, rgba(139,92,246,.25), transparent); border-radius: 50%; animation: spin 14s linear infinite; mask: radial-gradient(closest-side, #000 30%, transparent); -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); }
.rw-title { position: relative; font: 800 34px/1.05 var(--title); margin: 0; color: var(--gold); text-shadow: 0 3px 0 #a5560a, 0 0 20px #ffc94a88; }
.rw-coins { position: relative; font: 800 16px var(--title); color: var(--gold); background: rgba(5,8,23,.7); border-radius: 99px; padding: 4px 14px 2px; margin: 10px 0 4px; box-shadow: 0 0 0 1px #ffc94a55; }
.rw-sub { position: relative; color: #cfd8ff; font-size: 14px; margin: 8px 0 14px; }
.rw-cards { position: relative; display: flex; gap: 8px; justify-content: center; margin-bottom: 22px; }
.rw-cards .card { --cw: 118px; animation: dealIn .5s cubic-bezier(.2,.9,.3,1.2) backwards; transition: transform .2s; }
.rw-cards .card:nth-child(2) { animation-delay: .1s; } .rw-cards .card:nth-child(3) { animation-delay: .2s; }
.rw-cards .card:hover { transform: translateY(-8px) scale(1.04); }
.rw-cards .card.picked { transform: translateY(-30px) scale(1.12); filter: drop-shadow(0 0 20px #ffc94a); }
.rw-cards.one .card { --cw: 170px; }
@keyframes dealIn { from { transform: translateY(80px) rotate(10deg) scale(.6); opacity: 0; } }
.chest-ic { position: relative; font-size: 74px; animation: pop .6s; filter: drop-shadow(0 0 20px #ffc94a); }
.end-pets { position: relative; display: flex; margin-bottom: 10px; } .end-pets img { width: 120px; margin: 0 -18px; animation: breathe 3.4s ease-in-out infinite; transform-origin: 50% 92%; }
.endp.lose .end-pets img { filter: grayscale(.7) brightness(.7); }
.endp.lose .rw-title { color: #c8d4ff; text-shadow: 0 3px 0 #1b2763; }

/* cenas: fogueira, evento, loja */
.scene-bg { position: absolute; inset: -10px; background-size: cover; background-position: center; filter: blur(1.5px) brightness(.55); }
.scene .scene-ic { position: absolute; top: 120px; left: 0; right: 0; text-align: center; font-size: 80px; filter: drop-shadow(0 0 24px rgba(255,201,74,.6)); }
.scene-desc { position: absolute; top: 250px; left: 24px; right: 24px; text-align: center; font-size: 16px; line-height: 1.4; color: #e6ecff; text-shadow: 0 2px 4px #000; margin: 0; }
.scene .team-strip { position: absolute; top: 360px; left: 0; right: 0; }
.scene-btns { position: absolute; left: 20px; right: 20px; top: 470px; display: flex; flex-direction: column; gap: 10px; }
.choice { display: block; width: 100%; text-align: left; padding: 12px 16px 10px; border-radius: 16px; background: linear-gradient(135deg, rgba(27,39,99,.95), rgba(12,18,52,.95)); box-shadow: 0 0 0 1.5px #3fe0ff55, 0 8px 18px #0008; }
.choice b { display: block; font: 800 15px/1.2 var(--title); } .choice small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.choice.dis { opacity: .45; }
.campfire { position: relative; width: 120px; height: 110px; margin: 0 auto; }
.campfire i { position: absolute; left: 50%; bottom: 14px; width: 54px; height: 84px; margin-left: -27px; border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 80%, #fff6c7, #ffb03a 40%, #ff5a1f 70%, transparent 72%); filter: blur(1px); transform-origin: 50% 100%; animation: flame 1s ease-in-out infinite alternate; mix-blend-mode: screen; }
.campfire i:nth-child(2) { width: 40px; margin-left: -34px; height: 60px; animation-delay: -.3s; } .campfire i:nth-child(3) { width: 40px; margin-left: -6px; height: 66px; animation-delay: -.6s; }
.campfire::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 6px; height: 14px; border-radius: 8px; background: linear-gradient(90deg, #5a3210, #8a5a2a, #5a3210); }
@keyframes flame { from { transform: scale(.92, .95) rotate(-3deg); } to { transform: scale(1.06, 1.1) rotate(3deg); } }
.shop-keeper { position: absolute; top: 56px; left: 16px; right: 16px; display: flex; align-items: center; gap: 8px; }
.shop-keeper img { width: 90px; animation: breathe 3.4s ease-in-out infinite; transform-origin: 50% 92%; }
.shop-keeper p { background: #fff; color: #0a1130; padding: 8px 12px; border-radius: 14px 14px 14px 2px; font-weight: 600; font-size: 13px; margin: 0; }
.shop-cards { position: absolute; top: 170px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.shop-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.shop-item .card { --cw: 116px; } .shop-item .price { font: 800 14px var(--title); color: var(--gold); background: rgba(5,8,23,.8); padding: 2px 10px 0; border-radius: 99px; }
.shop-item.sold { opacity: .25; pointer-events: none; } .shop-item.poor .price { color: #ff8a8a; }
.shop-svc { position: absolute; left: 20px; right: 20px; top: 420px; display: flex; flex-direction: column; gap: 10px; }
.shopp > .btn { position: absolute; left: 50%; transform: translateX(-50%); top: 600px; }

/* duelo: procurando */
.menu-bg.arena::after { background: linear-gradient(180deg, rgba(5,8,23,.6), rgba(5,8,23,.9)); }
.radar { position: absolute; left: 50%; top: 300px; width: 10px; height: 10px; }
.radar i { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px; border-radius: 50%; border: 2px solid #3fe0ff; animation: radar 2.4s ease-out infinite; opacity: 0; }
.radar i:nth-child(2) { animation-delay: .8s; } .radar i:nth-child(3) { animation-delay: 1.6s; }
.radar img { position: absolute; width: 130px; left: -65px; top: -70px; animation: breathe 3.4s ease-in-out infinite; transform-origin: 50% 92%; }
@keyframes radar { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.match-txt { position: absolute; top: 470px; left: 0; right: 0; text-align: center; font: 800 20px var(--title); }
.match-card { position: absolute; left: 50%; top: 520px; transform: translate(-50%, 40px) scale(.8); opacity: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(10,17,48,.92); box-shadow: 0 0 0 1.5px #ff6b8a88, 0 0 30px rgba(255,107,138,.3); border-radius: 20px; padding: 14px 26px; transition: all .45s cubic-bezier(.2,.9,.3,1.3); }
.match-card.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.match-card b { font: 800 20px var(--title); } .match-card small { color: var(--muted); }
.mc-team { display: flex; } .mc-team img { width: 70px; margin: 0 -8px; transform: scaleX(-1); }

/* =====================================================================
   TELA CHEIA (paisagem) — sobrepõe as regras da moldura de celular acima
   ===================================================================== */
#frame { position: fixed; inset: 0; width: 100vw; height: 100vh; border-radius: 0; box-shadow: none; transform: none; }
#fx-layer, #fx-canvas { width: 100%; height: 100%; }
.col { position: absolute; top: 0; left: 50%; width: 400px; height: 860px; transform: translateX(-50%) scale(var(--z, 1)); transform-origin: top center; }
.topbar { padding-right: 120px; gap: 10px; height: 56px; }
.tb-title { font-size: 17px; flex: 0 1 auto; }
.pill-btn.ghost { background: rgba(5,8,23,.6); box-shadow: inset 0 0 0 1.5px #ffffff30; font-size: 12.5px; padding: 6px 12px 4px; }
.pill-btn.ghost:hover { box-shadow: inset 0 0 0 1.5px #3fe0ff; }
.dbg-btn { color: #9dffb4; }
.menu-how { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 4; }

/* batalha */
.battle-wrap { position: absolute; inset: 0; display: flex; }
.battle-main { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.battle { position: absolute; inset: 0; }
.bg { background-position: center 62%; }
.bg-shade { background: linear-gradient(180deg, rgba(5,8,23,.6) 0, rgba(5,8,23,0) 12%, rgba(5,8,23,0) 55%, rgba(5,8,23,.6) 68%, rgba(5,8,23,.95) 80%, #050817 100%); }
.field { position: absolute; left: 0; right: 0; top: var(--top); bottom: var(--hand-h); inset: var(--top) 0 var(--hand-h) 0; }
.unit { --size: calc(var(--u, 150px) * var(--sc, 1)); }
.info { left: -72px; width: 144px; top: 10px; }
.uname { font-size: 14px; margin-bottom: 3px; }
.hpbar { height: 16px; border-radius: 8px; }
.hpbar .fill, .hpbar .ghost { border-radius: 8px; }
.hptxt { font-size: 12px; line-height: 16px; }
.blk { left: -18px; top: -6px; transform: scale(1.2); }
.st { width: 26px; height: 26px; font-size: 14px; }
.st b { font-size: 11px; right: -5px; bottom: -5px; }
.sts { gap: 6px; margin-top: 6px; }
.in { font-size: 20px; padding: 2px 9px 0 7px; }
.in b { font-size: 20px; }
.in small { font-size: 11px; }
.in-tgt { width: 30px; height: 30px; }
.intent { cursor: help; }
.sprite { cursor: help; }
.fallen-tag { top: calc(var(--size) * -.55); font-size: 13px; }
.aim { width: 100%; height: 100%; }
.hud { inset: auto 0 0 0; height: var(--hand-h); background: linear-gradient(180deg, rgba(5,8,23,0), rgba(5,8,23,.7) 25%, rgba(5,8,23,.9)); }
.energy { left: 30px; top: 18px; width: 86px; height: 86px; }
.energy span { font-size: 24px; }
.energy small { position: absolute; left: -10px; right: -10px; bottom: -22px; text-align: center; font: 800 11px var(--title); color: #9be9ff; text-transform: uppercase; letter-spacing: .08em; }
.pile { bottom: 14px; width: 64px; height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.pile:hover { box-shadow: 0 0 0 2px var(--cyan), 0 4px 10px #0008; }
.pile b { font: 800 10px/1 var(--title); color: var(--muted); }
.pile.draw { left: 14px; } .pile.exhaust { left: 86px; } .pile.discard { right: 14px; }
.pile.exhaust span { background: #ff8aa0; }
.endturn { right: 16px; top: 18px; font-size: 18px; padding: 14px 20px 11px; max-width: 200px; }
.timer.me { right: 24px; top: 82px; }
.hand { left: 168px; right: 98px; top: 0; bottom: 0; width: auto; height: auto; }
.hand .card { --cw: inherit; }
.hand .card.sel .c-body, .hand .card:hover .c-body { box-shadow: 0 .4em 1.2em rgba(0,0,0,.6), 0 0 0 .14em #ffe08a, 0 0 1.3em #ffc94a; }
.banner { top: 34%; }
.showcase { top: 40%; }
.showcase .card { --cw: 200px; }
.log-tab { position: absolute; right: 0; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; padding: 14px 7px; border-radius: 12px 0 0 12px; background: rgba(10,17,48,.95); box-shadow: 0 0 0 1px #3fe0ff66; font: 800 13px var(--title); z-index: 60; }
.log-open .log-tab { display: none; }
.log-panel { width: 0; overflow: hidden; flex: none; display: flex; flex-direction: column; background: linear-gradient(180deg, #0d1538, #070b22); box-shadow: -1px 0 0 #ffffff1a; transition: width .2s; }
.log-open .log-panel { width: 360px; }
.log-head { display: flex; align-items: center; justify-content: space-between; padding: 54px 12px 8px 14px; font: 800 16px var(--title); border-bottom: 1px solid #ffffff14; min-width: 340px; }
.log-list { flex: 1; overflow-y: auto; padding: 8px 10px 20px; font-size: 13px; line-height: 1.38; min-width: 340px; scrollbar-width: thin; }
.log-foot { font-size: 11.5px; color: var(--muted); padding: 8px 14px 12px; border-top: 1px solid #ffffff14; min-width: 340px; }
.lg { padding: 3px 7px 2px; border-left: 3px solid transparent; margin-bottom: 3px; border-radius: 4px; color: #dfe7ff; }
.lg b { font-weight: 800; } .lg b.ally { color: #9dffb4; } .lg b.foe { color: #ffb3c1; } .lg i { color: var(--muted); font-style: normal; }
.lg .cn { color: #fff; font-weight: 800; }
.lg-turn { color: #ffd36b; font: 800 14px var(--title); text-align: center; margin: 12px 0 6px; border: 0; background: rgba(255,201,74,.08); }
.lg-play { background: rgba(63,224,255,.08); border-left-color: #3fe0ff; margin-top: 6px; }
.lg-dmg { border-left-color: #ff6b6b; } .lg-block { border-left-color: #7fd6ff; } .lg-heal { border-left-color: #5dff8a; }
.lg-buff { border-left-color: #ffc94a; } .lg-debuff, .lg-poison { border-left-color: #c77dff; }
.lg-died { border-left-color: #ff6b8a; color: #ffb3c1; background: rgba(255,80,110,.08); }
.lg-intent, .lg-act { border-left-color: #ff9f6b; color: #ffe0cf; } .lg-act { background: rgba(255,120,80,.08); margin-top: 6px; }
.lg-passive { border-left-color: #a78bfa; color: #e1d6ff; } .lg-debug { border-left-color: #34e07a; color: #b6ffcf; }
.lg-info { color: #aab6e0; }
.kw { cursor: help; border-bottom: 1px dotted #ffd36b88; }
.rival { position: static; display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.rv-hand { position: static; }
.timer.rv { margin-left: 4px; }
.rival .pill-btn { white-space: nowrap; }
.emoji-btn { position: static; width: 36px; height: 36px; font-size: 20px; }
.emoji-pop { left: auto; right: 130px; top: 60px; }
.emo-bubble.me { left: 24%; top: 26%; } .emo-bubble.rv { left: auto; right: 30%; top: 70px; }

/* dicas, modais, teste */
.tip.hover { pointer-events: none; display: none; z-index: 260; }
.tip.hover.on { display: block; animation: none; }
.tip.below { transform: translate(-50%, 0); }
.modal-box { max-width: 1100px; }
.wide-modal .modal-box { max-width: 760px; }
.card-grid .card { --cw: 150px; }
.howto { text-align: left; font-size: 15px; line-height: 1.5; padding: 0 10px; }
.howto h3 { text-align: center; font-size: 22px; }
.howto p { margin: 8px 0; }
#debugPanel { position: absolute; left: 14px; top: 66px; width: 270px; z-index: 170; background: rgba(6,20,16,.96); border-radius: 14px; padding: 10px; box-shadow: 0 0 0 1.5px #34e07a88, 0 10px 30px #000a; font-size: 12px; }
#debugPanel .dbg-head { display: flex; justify-content: space-between; align-items: center; font: 800 15px var(--title); color: #9dffb4; }
#debugPanel small { color: var(--muted); display: block; margin: 2px 0 8px; }
.dbg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.dbg-grid button { background: rgba(52,224,122,.12); box-shadow: inset 0 0 0 1px #34e07a66; border-radius: 9px; padding: 7px 6px 5px; font: 700 11.5px/1.15 var(--title); }
.dbg-grid button:hover { background: rgba(52,224,122,.28); }

/* mapa e coleção em tela cheia */
.mapp .map-inner { max-width: 980px; margin: 0 auto; }
.mapp .team-strip { top: 58px; } .ts { width: 130px; }
.map-scroll { top: 138px; }
.node { width: 54px; height: 54px; font-size: 26px; } .node.n-X { width: 80px; height: 80px; font-size: 40px; }
.map-legend { font-size: 13px; gap: 0 16px; }
.coll .tabs { max-width: 560px; margin: 0 auto; }
.coll .chips { top: 104px; justify-content: center; }
.coll .card-grid.big { top: 158px; padding: 14px 20px 60px; gap: 22px 14px; }
.cg-item .card { --cw: 170px; } .cg-item small { font-size: 12px; }
.tp-slots { left: 50%; right: auto; width: 600px; transform: translateX(-50%); }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-content: start; gap: 10px; padding: 4px 20px 30px; }
/* desempenho: sprite com filtro rasterizado uma vez por camada; sem desfoque de fundo nos modais */
.breath, .intent, .aura { will-change: transform; }
.modal { backdrop-filter: none; background: rgba(3,5,16,.86); }

/* encerrar turno e relógio acima da mão; registro mais estreito em telas menores */
.endturn { top: -64px; right: 18px; box-shadow: 0 4px 0 #a5560a, 0 6px 16px rgba(0,0,0,.6); }
.timer.me { top: -60px; right: 230px; }
.log-open .log-panel { width: 300px; }
.log-head, .log-list, .log-foot { min-width: 290px; }
@media (min-width: 1500px) { .log-open .log-panel { width: 400px; } }
.c-text > div { font-size: .76em; }
.reward .col, .endp .col { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 12px; }
.shopp .col > .btn { position: absolute; left: 50%; transform: translateX(-50%); top: 600px; }
.rw-cards .card { --cw: 124px; }
/* "Encerrar turno" sempre inteiro e clicável: camada acima da mão (inclusive da carta ampliada) */
.endturn, .timer.me { z-index: 75; }
/* coluna da direita da mão: "Encerrar turno" em cima, Descarte embaixo; a mão não invade */
.hand { right: 134px; }
.endturn { top: 16px; right: 12px; width: 114px; max-width: none; white-space: normal; line-height: 1.08; padding: 11px 8px 8px; font-size: 17px; text-align: center; }
.pile.discard { right: 36px; }

/* =====================================================================
   CARTA "FULL ART": arte na carta inteira, textos por cima sem caixa.
   .lt = texto claro com sombra escura · .dk = texto escuro com sombra clara
   (escolhido pela luminância da arte atrás do bloco — js/lum.js)
   ===================================================================== */
.card { border-radius: .8em; box-shadow: 0 .3em .9em rgba(0,0,0,.55); }
.card .c-art { position: absolute; inset: 0; left: 0; right: 0; top: 0; height: auto; border-radius: .8em; clip-path: none; box-shadow: none; overflow: hidden; background: #0a1130; }
.card .c-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.c-frame { position: absolute; inset: 0; border-radius: .8em; border: .2em solid transparent; pointer-events: none;
  background: var(--fr) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.rar-comum    { --fr: linear-gradient(155deg, #f4f7fb, #9aa6b8 45%, #e9eef5 60%, #7f8aa0); --rc: #cfd8e6; }
.rar-rara     { --fr: linear-gradient(155deg, #b9d6ff, #3561d6 45%, #c9dcff 60%, #1d3a94); --rc: #6fa2ff; }
.rar-epica    { --fr: linear-gradient(155deg, #ecd2ff, #8a3fe6 40%, #f5dc9e 58%, #5a1fa8); --rc: #c18bff; }
.rar-lendaria { --fr: linear-gradient(155deg, #fff4bf, #e0a020 35%, #fff8de 52%, #c2541b); --rc: #ffd25e; }
.rar-lendaria .c-frame, .rar-epica .c-frame { border-width: .24em; }
.card .c-cost { left: .38em; top: .38em; width: 2.05em; height: 2.05em; }
.card .c-cost span { font-size: 1.3em; }
.card .c-name { position: absolute; left: 2.65em; right: .45em; top: .42em; height: auto; display: block; background: none; box-shadow: none; padding: 0; border-radius: 0; text-align: left; }
.card .c-name span { display: block; font: 800 .92em/1.05 var(--title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: .1em; letter-spacing: -.01em; }
.card .c-name small { display: block; font: 800 .5em/1.1 var(--title); letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.lt { color: #fff; text-shadow: 0 0 .12em #000, 0 0 .3em rgba(0,0,0,.95), 0 .06em .12em #000; }
.dk { color: #0b1030; text-shadow: 0 0 .12em #fff, 0 0 .3em rgba(255,255,255,.95), 0 .05em .1em rgba(255,255,255,.9); }
.card .c-name.lt span, .card .c-name.dk span { text-shadow: inherit; }
.c-lines { position: absolute; left: .42em; right: .42em; bottom: .7em; display: flex; flex-direction: column; gap: .1em; }
.ab-line { position: relative; display: flex; align-items: center; gap: .32em; height: 1.55em; font-size: .78em; padding: 0 .15em; border-radius: .4em; }
.ab-cost { flex: none; width: 1.35em; height: 1.35em; border-radius: 50%; display: grid; place-items: center; font: 800 .95em/1 var(--title); color: #fff; text-shadow: 0 .05em 0 #06306d;
  background: radial-gradient(circle at 35% 30%, #c9fbff, #3fe0ff 32%, #1667c9 72%); box-shadow: 0 0 0 .09em rgba(5,8,23,.7); padding-top: .08em; }
.ab-cost.up { color: #b6ffcf; } .ab-cost.down { color: #ffb3b3; }
.ab-ic { flex: none; font-size: .95em; text-shadow: none; filter: drop-shadow(0 0 .12em rgba(0,0,0,.7)); }
.ab-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 800 1em/1 var(--title); padding-top: .12em; }
.ab-num { flex: none; font: 800 1.22em/1 var(--title); padding-top: .1em; }
.lt .ab-num.up { color: #7dffa3; } .lt .ab-num.down { color: #ff9a9a; }
.dk .ab-num.up { color: #0a7a2a; } .dk .ab-num.down { color: #b3121f; }
.ab-full { display: none; }
.ab-line.cant { opacity: .5; }
.ab-line:hover { background: rgba(255,255,255,.12); }
.card .c-gem { bottom: .12em; }
.card.off .c-art, .card.off .c-lines, .card.off .c-name { filter: grayscale(1) brightness(.55); }
.hand .card.playable { box-shadow: 0 .3em .8em rgba(0,0,0,.55), 0 0 0 .14em #8ff3ff, 0 0 .9em #3fe0ff; }
.hand .card.sel, .hand .card:hover { box-shadow: 0 .4em 1.2em rgba(0,0,0,.6), 0 0 0 .14em #ffe08a, 0 0 1.3em #ffc94a; }
.hand .card.unplayable { filter: brightness(.75) saturate(.7); }

/* seletor de habilidade + executor */
.ab-picker { position: absolute; inset: 0; z-index: 85; display: none; align-items: center; justify-content: center; background: rgba(3,5,16,.74); }
.ab-picker.on { display: flex; animation: fadeIn .15s; }
.pk-box { display: flex; gap: 26px; align-items: flex-start; background: linear-gradient(180deg, #16205a, #0b1236); border-radius: 22px; padding: 20px 22px; max-width: 94%; box-shadow: 0 0 0 1.5px #ffffff22, 0 20px 50px #000; }
.pk-card .card { --cw: min(230px, 28vh); }
.pk-right { width: min(520px, 46vw); }
.pk-right h3 { font: 800 21px var(--title); margin: 0 0 10px; }
.pk-right h4 { font: 800 14px var(--title); margin: 12px 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.ab-opt { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 11px 13px; border-radius: 14px; margin-bottom: 8px; background: rgba(27,39,99,.92); box-shadow: inset 0 0 0 1.5px #3fe0ff55; transition: box-shadow .15s, transform .15s; }
.ab-opt:hover { box-shadow: inset 0 0 0 2px #3fe0ff, 0 0 16px #3fe0ff55; transform: translateX(3px); }
.ab-opt.dis { opacity: .45; }
.ao-cost { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 800 22px/1 var(--title); padding-top: 3px; color: #fff;
  background: radial-gradient(circle at 35% 30%, #c9fbff, #3fe0ff 30%, #1667c9 70%); box-shadow: 0 0 0 2px #0a1130, 0 0 0 3.5px #8fe9ff; }
.ao-cost.up { color: #b6ffcf; }
.ao-body b { font: 800 17px var(--title); } .ao-body small { color: var(--muted); font-size: 12px; margin-left: 4px; }
.ao-txt { display: block; font-size: 14.5px; line-height: 1.35; color: #dfe7ff; margin-top: 2px; }
.ao-txt .num.up { color: var(--green); } .ao-txt .num.down { color: #ff8a8a; }
.pk-execs { display: flex; gap: 8px; }
.pk-ex { flex: 1; display: flex; gap: 6px; align-items: center; text-align: left; padding: 6px 8px; border-radius: 12px; background: rgba(5,8,23,.6); box-shadow: inset 0 0 0 1.5px #ffffff22; font-size: 12px; min-width: 0; }
.pk-ex.on { box-shadow: inset 0 0 0 2px #ffc94a, 0 0 14px #ffc94a66; background: rgba(255,201,74,.12); }
.pk-ex.dis { opacity: .4; }
.pk-ex img { width: 46px; height: 46px; object-fit: contain; flex: none; }
.pk-ex b { font: 800 13px var(--title); }
.pk-ex i { display: block; font-style: normal; color: #cfd8ff; font-size: 11px; line-height: 1.25; margin-top: 2px; }
.kw-p { color: #ffd36b; font-weight: 800; }
.pk-cancel { margin-top: 12px; }

/* executor, mira, elementos */
.exec-tag { position: absolute; left: 0; top: calc(var(--size) * -1 - 4px); transform: translateX(-50%); display: none; z-index: 3; white-space: nowrap;
  font: 800 12px/1 var(--title); color: #2a1500; background: linear-gradient(180deg, #ffe08a, #ffb83a); border-radius: 99px; padding: 4px 9px 2px; box-shadow: 0 2px 8px #0008; }
.unit.executor .exec-tag { display: block; animation: bob 2s ease-in-out infinite; }
.unit.executor .ground { left: 2%; right: 2%; height: 22%; bottom: 0; background: radial-gradient(closest-side, rgba(255,201,74,0) 55%, rgba(255,201,74,.95) 70%, rgba(255,201,74,0)); animation: tgPulse 1.4s ease-in-out infinite; }
.side-A .sprite { cursor: pointer; }
.target-bar { position: absolute; top: 66px; left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: 10px; z-index: 70; background: rgba(10,17,48,.95); padding: 6px 8px 6px 14px; border-radius: 99px; box-shadow: 0 0 0 1.5px #ffc94a; font: 800 14px var(--title); }
.target-bar.on { display: flex; }
.exec-hint { position: absolute; left: 16px; bottom: calc(var(--hand-h) + 6px); font-size: 12px; color: #c8d4ff; text-shadow: 0 1px 2px #000; pointer-events: none; z-index: 45; }
.el { display: inline-block; font: 800 9.5px/1 var(--title); padding: 2px 6px 1px; border-radius: 99px; color: #0b1030; vertical-align: middle; text-shadow: none; letter-spacing: .03em; }
.el-electric { background: #ffe14d; } .el-storm { background: #8fb8ff; } .el-fire { background: #ff9a4d; } .el-crystal { background: #d9b8ff; }
.el-ice { background: #bdf3ff; } .el-poison { background: #a6ff4d; } .el-nature { background: #8dff7a; } .el-wind { background: #e6fbff; }
.el-shadow { background: #b07aff; color: #fff; } .el-light { background: #fff3b0; }
.sprite-wrap.lunge { animation: lungeA .38s cubic-bezier(.3,.7,.4,1); }
.side-B .sprite-wrap.lunge { animation-name: lungeB; }
@keyframes lungeA { 0% { transform: none; } 35% { transform: translateX(26px) scale(1.07); filter: drop-shadow(0 0 14px var(--glow)) brightness(1.3); } 100% { transform: none; filter: none; } }
@keyframes lungeB { 0% { transform: none; } 35% { transform: translateX(-26px) scale(1.07); filter: drop-shadow(0 0 14px var(--glow)) brightness(1.3); } 100% { transform: none; filter: none; } }
.num-el-electric span { color: #fff6a8; -webkit-text-stroke-color: #6b5200; text-shadow: 0 3px 0 #6b5200, 0 0 14px #ffe14d; }
.num-el-storm span { color: #dff1ff; -webkit-text-stroke-color: #1b2f80; text-shadow: 0 3px 0 #1b2f80, 0 0 14px #8fb8ff; }
.num-el-fire span { color: #ffe0a0; -webkit-text-stroke-color: #7a1e00; text-shadow: 0 3px 0 #7a1e00, 0 0 16px #ff6a2b; }
.num-el-crystal span { color: #f3e6ff; -webkit-text-stroke-color: #4a1d8a; text-shadow: 0 3px 0 #4a1d8a, 0 0 14px #c18bff; }
.num-el-ice span { color: #effcff; -webkit-text-stroke-color: #0b4a7a; text-shadow: 0 3px 0 #0b4a7a, 0 0 14px #7fd6ff; }
.num-el-poison span { color: #dcff9a; -webkit-text-stroke-color: #2d5a00; text-shadow: 0 3px 0 #2d5a00, 0 0 14px #a6ff4d; }
.num-el-nature span { color: #e6ffd0; -webkit-text-stroke-color: #1f5a12; text-shadow: 0 3px 0 #1f5a12, 0 0 12px #8dff7a; }
.num-el-wind span { color: #ffffff; -webkit-text-stroke-color: #265a7a; text-shadow: 0 3px 0 #265a7a, 0 0 12px #bff6ff; }
.num-el-shadow span { color: #ead6ff; -webkit-text-stroke-color: #2a0a4a; text-shadow: 0 3px 0 #2a0a4a, 0 0 16px #9b5cff; }
.num-el-light span { color: #fffbe0; -webkit-text-stroke-color: #7a5a00; text-shadow: 0 3px 0 #7a5a00, 0 0 18px #ffd84d; }
.shield .hexes { position: absolute; left: 50%; top: 50%; width: 130px; height: 140px; transform: translate(-50%, -50%); border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle, rgba(200,245,255,.75) 1.6px, transparent 2.2px) 0 0 / 11px 11px; -webkit-mask: radial-gradient(closest-side, transparent 55%, #000 80%); animation: hexIn 1s ease-out forwards; }
@keyframes hexIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
.sc-ab { margin-top: 8px; text-align: center; font: 800 15px var(--title); background: rgba(10,17,48,.92); border-radius: 99px; padding: 5px 12px 3px; box-shadow: 0 0 0 1.5px #ff6b8a88; }
.tb-streak { font: 800 13px var(--title); background: rgba(5,8,23,.6); border: 1px solid #ff9f1c88; color: #ffb36b; padding: 3px 10px 2px; border-radius: 99px; white-space: nowrap; }

/* tutorial */
#tut { position: absolute; inset: 0; z-index: 240; pointer-events: none; }
#tut.hidden { display: none; }
.tut-hole { position: absolute; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(3,5,16,.68), 0 0 0 3px #ffc94a, 0 0 26px #ffc94a; transition: left .25s, top .25s, width .25s, height .25s; }
.tut-hole.none { box-shadow: 0 0 0 9999px rgba(3,5,16,.68); }
.tut-bubble { position: absolute; pointer-events: auto; width: 360px; background: #fffdf5; color: #0b1030; border-radius: 18px; padding: 14px 16px 12px; box-shadow: 0 0 0 3px #ffc94a, 0 16px 40px #000c; animation: pop .25s; }
.tut-bubble small { color: #6a7090; font: 700 11px var(--title); letter-spacing: .06em; text-transform: uppercase; }
.tut-bubble h4 { margin: 2px 0 4px; font: 800 20px/1.15 var(--title); }
.tut-bubble p { margin: 0 0 10px; font-size: 15px; line-height: 1.4; }
.tut-btns { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tut-btns .btn { padding: 8px 18px 6px; font-size: 15px; }
.tut-skip { color: #6a7090; font-size: 12.5px; text-decoration: underline; }
.tut-wait { font-size: 24px; animation: bob 1s ease-in-out infinite; }

/* menu, coleção, oferta */
.menu-row { display: flex; gap: 10px; justify-content: center; }
.menu-btns { top: 470px; gap: 10px; }
.menu-how { display: none; }
.offer { text-align: center; } .offer-ic { font-size: 54px; } .offer p { font-size: 15px; color: #dfe7ff; }
.wide-chip { width: auto; padding: 0 16px; border-radius: 99px; font: 800 13px var(--title); color: var(--text); }
.cg-item.locked .card { filter: grayscale(.85) brightness(.55); }
.cg-item small b { color: var(--gold); }
.end-btns.col2 { flex-direction: column; align-items: center; }
.endp .rw-sub { max-width: 340px; }
.card .c-name span { color: inherit; }
.card .c-name span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .86em; line-height: 1.02; }
.tp-pet small.el, .pk-ex small.el { color: #0b1030; font: 800 9.5px/1 var(--title); margin-left: 4px; padding: 2px 6px 1px; }
.tp-pet small.el.el-shadow, .pk-ex small.el.el-shadow { color: #fff; }

/* =====================================================================
   CARTA COM TEXTO COMPLETO (ref. full art "ex"): título da habilidade + parágrafo do efeito
   sobre a arte, sem caixa. Véu suave (.veil) só atrás do bloco quando a arte é agitada.
   ===================================================================== */
.card .c-cost { display: none; }
.card .c-name { left: .55em; right: .55em; top: .4em; }
.card .c-name span { font-size: .8em; -webkit-line-clamp: 1; }
.card .c-name small { font-size: .44em; }
.c-abils { position: absolute; left: .4em; right: .4em; bottom: .55em; display: flex; flex-direction: column; gap: .22em; }
.ab-blk { position: relative; padding: .12em .2em .16em; border-radius: .5em; }
.ab-blk.veil.lt::before, .ab-blk.veil.dk::before { content: ''; position: absolute; inset: -.25em -.3em; border-radius: 1em; z-index: -1; filter: blur(.35em); }
.ab-blk.veil.lt::before { background: rgba(5,8,23,.42); }
.ab-blk.veil.dk::before { background: rgba(255,255,255,.5); }
.c-abils { isolation: isolate; }
.ab-title { display: flex; align-items: center; gap: .28em; font-size: .74em; }
.ab-title .ab-cost { width: 1.4em; height: 1.4em; font-size: .95em; }
.ab-title .ab-ic { font-size: .9em; }
.ab-title .ab-name { font: 800 1em/1.05 var(--title); padding-top: .12em; }
.ab-desc { font: 600 .6em/1.14 var(--body); letter-spacing: -.005em; margin-top: .06em; padding-left: .1em; }
.ab-desc .num { font-weight: 800; font-size: 1.12em; }
.lt .ab-desc .num.up { color: #7dffa3; } .lt .ab-desc .num.down { color: #ff9a9a; }
.dk .ab-desc .num.up { color: #0a7a2a; } .dk .ab-desc .num.down { color: #b3121f; }
.ab-desc .kw { color: inherit; font-weight: 800; border-bottom: 1px dotted currentColor; }
.lt .ab-desc .kw { color: #ffe08a; } .dk .ab-desc .kw { color: #6a3d00; }
.n4 .c-abils { gap: .12em; } .n4 .ab-desc { font-size: .575em; } .n4 .ab-title { font-size: .7em; }
.n3 .c-abils { gap: .16em; }
.ab-blk.cant { opacity: .55; }
.zoom-card { display: flex; justify-content: center; margin: 4px 0 14px; cursor: zoom-out; }
.zoom-card .card { --cw: min(420px, 88vw, calc(78vh / 1.4)); }
.cg-item .card { --cw: 200px; }
.card-grid .card { --cw: 190px; }
.rw-cards .card { --cw: 128px; }
.log-btn { display: none; }
.drawer .log-btn { display: inline-flex; }

/* registro como gaveta (telas < 1500 px e celular): sobrepõe o campo em vez de encolhê-lo */
.battle-wrap.drawer .log-panel { position: absolute; right: 0; top: 0; bottom: 0; z-index: 120; width: min(380px, 88vw) !important; transform: translateX(105%); transition: transform .22s; box-shadow: -10px 0 30px #000a; }
.battle-wrap.drawer.log-open .log-panel { transform: none; }
.battle-wrap.drawer .log-tab { display: none; }
.battle-wrap.drawer .log-head, .battle-wrap.drawer .log-list, .battle-wrap.drawer .log-foot { min-width: 0; }

/* =====================================================================
   CELULAR EM RETRATO (≤ 640 px): .mobile vem do JS (battle-wrap) e as media queries cobrem o resto
   ===================================================================== */
@media (max-width: 640px) {
  .topbar { height: 50px; padding: 6px 8px; gap: 6px; padding-right: 8px; overflow-x: auto; scrollbar-width: none; }
  .topbar .lbl { display: none; }
  .tb-title { font-size: 14px; flex: 1 1 auto; }
  .tb-coins, .tb-streak { font-size: 12px; padding: 3px 7px 2px; }
  .icon-btn, .pill-btn, .pill-btn.ghost { min-width: 44px; min-height: 44px; justify-content: center; display: inline-flex; align-items: center; }
  .icon-btn { width: 44px; height: 44px; }
  #lang { top: auto; bottom: 10px; right: 10px; }
  #lang button { min-height: 36px; min-width: 40px; }
  .btn { min-height: 46px; }
  .modal { padding: 10px; }
  .modal-box { padding: 12px 8px; }
  .card-grid .card { --cw: min(160px, 44vw); }
  .tip.hover { display: none !important; }
  .tut-bubble { width: calc(100vw - 24px); max-width: 380px; }
  #debugPanel { left: 8px; right: 8px; width: auto; top: 56px; }
  /* coleção e time */
  .coll .tabs { top: 54px; left: 8px; right: 8px; }
  .coll .chips { top: 102px; justify-content: flex-start; }
  .coll .card-grid.big { top: 156px; padding: 10px 8px 70px; gap: 14px 8px; }
  .cg-item .card { --cw: min(170px, 45vw); }
  .tp-slots { width: auto; left: 8px; right: 8px; transform: none; }
  .tp-slot { height: 86px; } .tp-slot img { width: 60px; height: 56px; }
  .tp-grid { grid-template-columns: 1fr; padding: 4px 8px 70px; top: 214px; }
  .tp-pet { min-height: 64px; }
  /* mapa */
  .mapp .team-strip { top: 54px; gap: 4px; } .ts { width: 31vw; }
  .map-scroll { top: 132px; bottom: 56px; }
  .map-legend { height: 56px; font-size: 11px; padding-right: 100px; }
  .node { width: 48px; height: 48px; font-size: 22px; }
  /* seletor de habilidade em tela cheia */
  .pk-box { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; height: 100%; max-width: none; border-radius: 0; padding: 58px 12px 16px; overflow-y: auto; }
  .pk-card { display: flex; justify-content: center; }
  .pk-card .card { --cw: min(150px, 40vw); }
  .pk-right { width: 100%; }
  .pk-right h3 { font-size: 18px; text-align: center; }
  .ab-opt { min-height: 56px; padding: 10px; }
  .ao-txt { font-size: 14px; }
  .pk-execs { overflow-x: auto; padding-bottom: 4px; }
  .pk-ex { min-width: 150px; min-height: 56px; }
  .pk-cancel { width: 100%; }
}
/* batalha no celular */
.mobile .field { top: 50px; }
.mobile .unit { --size: calc(var(--u, 90px) * var(--sc, 1)); }
.mobile .info { left: -50px; width: 100px; top: 4px; }
.mobile .uname { font-size: 10.5px; }
.mobile .uname .el { display: none; }
.mobile .hpbar { height: 12px; } .mobile .hptxt { font-size: 10px; line-height: 12px; }
.mobile .st { width: 21px; height: 21px; font-size: 11px; }
.mobile .sts { gap: 4px; margin-top: 4px; }
.mobile .in { font-size: 15px; padding: 1px 6px 0 5px; } .mobile .in b { font-size: 15px; } .mobile .in-tgt { width: 22px; height: 22px; }
.mobile .exec-tag { font-size: 10px; padding: 3px 7px 1px; }
.mobile .fallen-tag { font-size: 11px; }
.mobile .exec-hint { display: none; }
.mobile .hud { height: var(--hand-h); background: linear-gradient(180deg, rgba(5,8,23,0), rgba(5,8,23,.92) 18%); }
.mobile .energy { left: 10px; top: 6px; width: 54px; height: 54px; }
.mobile .energy span { font-size: 17px; }
.mobile .energy small { display: none; }
.mobile .energy .orb::before { inset: -5px; }
.mobile .pile { top: 10px; bottom: auto; width: 46px; height: 46px; }
.mobile .pile b { display: none; }
.mobile .pile.draw { left: 74px; } .mobile .pile.exhaust { left: 126px; } .mobile .pile.discard { left: 178px; right: auto; }
.mobile .endturn { top: 8px; right: 10px; width: auto; max-width: 150px; min-height: 48px; font-size: 15px; padding: 8px 12px 6px; white-space: nowrap; }
.mobile .timer.me { top: 12px; right: 166px; }
.mobile .hand { left: 0; right: 0; top: 62px; bottom: 0; display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 8px 12px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; touch-action: pan-x; scrollbar-width: none; }
.mobile .hand .card { position: relative; flex: none; transform: none; scroll-snap-align: start; touch-action: pan-x; }
.mobile .hand .card.sel { box-shadow: 0 0 0 .16em #ffe08a, 0 0 1.2em #ffc94a; }
.mobile .target-bar { top: 56px; max-width: calc(100% - 16px); font-size: 13px; }
.mobile .banner { top: 30%; } .mobile .banner span { font-size: 26px; }
.mobile .showcase { top: 34%; } .mobile .showcase .card { --cw: 160px; }
.mobile .rival { gap: 6px; } .mobile .rv-info small, .mobile .rv-hand { display: none; } .mobile .rv-info b { font-size: 13px; }
.mobile .rv-ava { width: 34px; height: 34px; }
.mobile .emo-bubble.me { left: 10%; top: 60%; } .mobile .emo-bubble.rv { right: 10%; top: 60px; }
.mobile .emoji-pop { right: 8px; left: 8px; top: 56px; grid-template-columns: repeat(4, 1fr); }
.mobile .emoji-pop button { height: 48px; }
.only-m { display: none; }
@media (max-width: 640px) { .only-m { display: inline; } }
#frame:has(.battle-wrap.mobile) #lang { display: none; }
.ab-desc { font-size: .66em; line-height: 1.12; }
.n4 .ab-desc { font-size: .62em; } .n4 .ab-title { font-size: .7em; }
.n3 .ab-desc { font-size: .64em; }
.card .c-gem { display: none; } .c-abils { bottom: .5em; }
.mobile .timer.me { top: -46px; right: 12px; }