/* ════════════════════════════════════════════════════════════════════
   theme.css — "Helo" neon redesign. Loaded LAST so it overrides the
   base styles. Cyberpunk/cyan look, Orbitron display font, minimal top bar,
   card-based home, deck-builder + arena layouts.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --purple: #8b5cf6;       /* epic rarity */
  --green:  #22e3a6;       /* positive / heal */
  --dark:   #060a11;
  --dark2:  #0a111b;
  --card:   #0e1825;
  --card2:  #132638;
  --border: #1a2a3c;
  --border2:#26415a;
  --text:   #dbe9f5;
  --text2:  #8aa2ba;
  --text3:  #55708c;
  --gold:   #ffd23f;
  --red:    #ff5577;
  --cyan:   #28e0ff;
  --cyan-dim:#0a93b8;
}

body {
  background:
    radial-gradient(1100px 520px at 50% -10%, rgba(40,224,255,0.06) 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(139,92,246,0.05) 0%, transparent 55%),
    var(--dark);
}

/* ── display font ── */
.nav-logo, h1, h2, .features-title, .sa-welcome, .sa-card-title, .sa-recent-title,
.lb-header h2, .gacha-header h2, .docs h1, .docs h2, .duel-game, .gb-game,
.sa-stat-val, .sa-orb-label, .deck-title, .arena-title {
  font-family: var(--f-display);
  letter-spacing: 0.04em;
}

/* ── top bar ── */
nav[aria-label="Primary"] {
  background: rgba(8,13,20,0.92);
  border-bottom: 1px solid var(--border);
  height: 58px;
}
.nav-logo { color: var(--cyan); text-shadow: 0 0 14px rgba(40,224,255,0.5); font-weight: 700; }
.nav-links { display: none !important; }      /* page nav removed → card-based navigation */
.nav-wallet { gap: 10px; }
.sa-bal {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 13px; color: var(--text2);
}
.sa-bal b { color: var(--cyan); }
.icon-btn { border-color: var(--border2); border-radius: 9px; }
.icon-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.lang-sel { border-color: var(--border2); }
.wallet-badge { border-radius: 999px; border-color: var(--border2); }
.wallet-badge:hover { border-color: var(--cyan); }
.connect-btn {
  background: linear-gradient(135deg, var(--cyan), var(--cyan-dim));
  color: #021018; font-weight: 700; border-radius: 9px;
  box-shadow: 0 0 16px rgba(40,224,255,0.35);
}
.connect-btn:hover { box-shadow: 0 0 26px rgba(40,224,255,0.55); }

.demo-ribbon { background: rgba(255,85,119,0.08); border-color: rgba(255,85,119,0.22); color: #ffaebd; }

/* ── primary buttons → cyan neon ── */
.btn-primary, .pvp-btn, .gb-buy, .sa-card-btn, .arena-card-play, .pull-btn-10 {
  background: linear-gradient(135deg, var(--cyan), var(--cyan-dim)) !important;
  color: #021018 !important; font-weight: 700;
  box-shadow: 0 0 18px rgba(40,224,255,0.30);
  border: none !important;
}
.btn-primary:hover, .pvp-btn:hover:not(:disabled), .gb-buy:hover, .sa-card-btn:hover, .arena-card-play:hover {
  box-shadow: 0 0 28px rgba(40,224,255,0.5); transform: translateY(-2px);
}
.pvp-btn.alt, .sa-card-btn.ghost, .btn-secondary {
  background: transparent !important; color: var(--text) !important;
  border: 1px solid var(--border2) !important; box-shadow: none;
}
.pvp-btn.alt:hover, .sa-card-btn.ghost:hover, .btn-secondary:hover { border-color: var(--cyan) !important; color: var(--cyan) !important; }

/* ════════ HOME — "WELCOME BACK" ════════ */
.sa-home { max-width: 980px; margin: 0 auto; padding: 40px 16px 60px; }
.sa-welcome { text-align: center; font-size: clamp(34px, 6vw, 56px); font-weight: 900; color: var(--text); text-shadow: 0 0 24px rgba(40,224,255,0.18); margin-bottom: 8px; }
.sa-welcome-sub { text-align: center; color: var(--text2); font-family: var(--f-mono); font-size: 13px; margin-bottom: 34px; }
.sa-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.sa-card {
  background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid var(--border2); border-radius: 18px; padding: 30px 26px; text-align: center;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden;
}
.sa-card::before { content:''; position:absolute; inset:0; background: radial-gradient(400px 140px at 50% 0%, rgba(40,224,255,0.08), transparent 70%); pointer-events:none; }
.sa-card:hover { border-color: var(--cyan); transform: translateY(-3px); box-shadow: 0 14px 40px rgba(40,224,255,0.12); }
.sa-card-ico { font-size: 46px; line-height: 1; margin-bottom: 12px; filter: drop-shadow(0 0 12px rgba(40,224,255,0.35)); }
.sa-card-title { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.sa-card-desc { font-size: 13px; color: var(--text2); line-height: 1.55; margin-bottom: 18px; min-height: 38px; }
.sa-card-btn { width: auto; padding: 11px 22px; border-radius: 10px; font-family: var(--f-body); font-size: 13px; cursor: pointer; }

.sa-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 24px 0; background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.sa-stat { text-align: center; padding: 18px 8px; border-right: 1px solid var(--border); }
.sa-stat:last-child { border-right: none; }
.sa-stat-val { font-size: 24px; font-weight: 700; color: var(--cyan); }
.sa-stat-lbl { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }

.sa-recent-title { font-size: 12px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.1em; margin: 22px 0 10px; }
.sa-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sa-table th { text-align: left; font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.sa-table td { padding: 11px 10px; border-bottom: 1px solid var(--border); font-family: var(--f-mono); color: var(--text2); }
.sa-table td.right, .sa-table th.right { text-align: right; }
.sa-tag { font-family: var(--f-body); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 5px; text-transform: uppercase; }
.sa-tag.win { background: rgba(34,227,166,0.15); color: var(--green); }
.sa-tag.lose { background: rgba(255,85,119,0.15); color: var(--red); }
.sa-tag.push { background: rgba(255,210,63,0.15); color: var(--gold); }
.sa-pos { color: var(--green); } .sa-neg { color: var(--red); }
.sa-empty { color: var(--text3); font-size: 13px; padding: 20px 0; text-align: center; }

/* ════════ DECK BUILDER ════════ */
.deck { max-width: 1100px; margin: 0 auto; }
.deck-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.deck-title { font-size: 24px; font-weight: 700; color: var(--text); }
.deck-sub { font-size: 12px; color: var(--text2); font-family: var(--f-mono); margin-top: 4px; }
.deck-back, .arena-back { background: transparent; border: 1px solid var(--border2); border-radius: 9px; color: var(--text2); font-family: var(--f-body); font-size: 12px; padding: 9px 16px; cursor: pointer; }
.deck-back:hover, .arena-back:hover { border-color: var(--cyan); color: var(--cyan); }
.deck-lock-note { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,160,40,0.08); border: 1px solid rgba(255,160,40,0.3); color: #ffb866; font-size: 12px; padding: 7px 14px; border-radius: 8px; margin-bottom: 22px; }

.sa-orb-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 10px 0 6px; }
.sa-orb {
  width: 150px; height: 150px; border-radius: 50%;
  border: 2px solid var(--border2); display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.2em; color: var(--text3);
  background: radial-gradient(circle at 50% 35%, rgba(40,224,255,0.10), transparent 65%);
  box-shadow: inset 0 0 30px rgba(40,224,255,0.06); transition: all 0.3s;
}
.sa-orb.ready { border-color: var(--cyan); color: var(--cyan); box-shadow: inset 0 0 36px rgba(40,224,255,0.18), 0 0 30px rgba(40,224,255,0.25); animation: orbPulse 2.2s ease-in-out infinite; }
@keyframes orbPulse { 0%,100%{ box-shadow: inset 0 0 36px rgba(40,224,255,0.18), 0 0 22px rgba(40,224,255,0.20);} 50%{ box-shadow: inset 0 0 44px rgba(40,224,255,0.28), 0 0 40px rgba(40,224,255,0.4);} }
.sa-orb-dots { display: flex; gap: 8px; }
.sa-orb-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border2); }
.sa-orb-dots i.on { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.deck-pull-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 6px 0; }
.deck-cost { font-family: var(--f-mono); font-size: 13px; color: var(--text2); }
.deck-cost b { color: var(--cyan); }
.pity { max-width: 420px; margin: 8px auto 4px; }
.pity-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px; }
.pity-bar { height: 4px; background: var(--border); border-radius: 3px; overflow: hidden; }
.pity-fill { height: 100%; background: linear-gradient(90deg, #ffa028, var(--gold)); transition: width 0.4s; }
.deck-hint { text-align: center; color: var(--text3); font-size: 12px; margin: 14px 0; }
.deck-hint.ready { color: var(--green); }

/* card grid (deck builder + locked hand) */
.gb-hand-grid { grid-template-columns: repeat(5, 1fr); gap: 12px; max-width: 920px; margin: 0 auto; }
.gb-card { aspect-ratio: 0.74; justify-content: center; border-radius: 14px; background: var(--card); border-width: 1px; }
.gb-card.slot-empty { background: repeating-linear-gradient(135deg, var(--card) 0 10px, var(--dark2) 10px 20px); border-color: var(--border); }
.gb-card-rar { position: absolute; top: 8px; right: 8px; font-size: 8px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 5px; background: var(--card2); color: var(--text3); }
.gb-card { position: relative; }
.gb-card.r-uncommon .gb-card-rar { color: var(--green); background: rgba(52,211,153,0.12); }
.gb-card.r-rare .gb-card-rar { color: var(--cyan); background: rgba(40,224,255,0.12); }
.gb-card.r-epic .gb-card-rar { color: var(--purple); background: rgba(139,92,246,0.15); }
.gb-card.r-legendary .gb-card-rar { color: var(--gold); background: rgba(255,210,63,0.15); }
.gb-card-emoji { font-size: 40px; }
.gb-card-val { font-size: 22px; margin-top: 4px; }
.gb-card-name { font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text3); margin-top: 6px; }
.deck-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 920px; margin: 26px auto 0; }
.deck-actions .pvp-btn { padding: 15px; font-size: 14px; }

/* ════════ ARENA (matchmaking) ════════ */
.arena2 { max-width: 1000px; margin: 0 auto; }
.arena-title { text-align: center; font-size: 28px; font-weight: 700; color: var(--text); }
.arena-sub2 { text-align: center; color: var(--text2); font-family: var(--f-mono); font-size: 12px; margin-bottom: 18px; }
.arena-search { display: flex; align-items: center; gap: 10px; background: rgba(40,224,255,0.06); border: 1px solid rgba(40,224,255,0.22); border-radius: 12px; padding: 12px 16px; color: var(--cyan); font-family: var(--f-mono); font-size: 13px; margin-bottom: 18px; }
.arena-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
.arena-panel { background: var(--card); border: 1px solid var(--border2); border-radius: 16px; padding: 20px; }
.arena-panel.dim { opacity: 0.7; }
.ap-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ap-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--card2); border: 1px solid var(--cyan); display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); color: var(--cyan); }
.ap-name { font-weight: 700; }
.ap-addr { font-family: var(--f-mono); font-size: 11px; color: var(--text3); }
.ap-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 14px; }
.ap-stat { background: var(--dark2); border: 1px solid var(--border); border-radius: 10px; text-align: center; padding: 10px 4px; }
.ap-stat b { display: block; font-size: 18px; color: var(--cyan); font-family: var(--f-mono); }
.ap-stat span { font-size: 9px; color: var(--text3); text-transform: uppercase; }
.ap-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.arena-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.arena-vs { font-family: var(--f-display); font-weight: 900; font-size: 26px; color: var(--red); text-shadow: 0 0 16px rgba(255,85,119,0.4); }
.arena-pot { text-align: center; background: var(--dark2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.arena-pot b { color: var(--gold); font-family: var(--f-mono); }
.arena-pot span { display: block; font-size: 9px; color: var(--text3); text-transform: uppercase; }
.ap-search { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 150px; color: var(--text3); }
.ap-qmark { font-size: 40px; color: var(--border2); }

.wager-input { display: flex; align-items: center; gap: 8px; background: var(--dark2); border: 1px solid var(--border2); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
.wager-input input { flex: 1; background: none; border: none; color: var(--cyan); font-family: var(--f-mono); font-size: 18px; outline: none; width: 100%; }
.wager-input span { color: var(--text3); font-size: 12px; }
.wager-quick { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.wager-quick button { background: var(--dark2); border: 1px solid var(--border); border-radius: 8px; color: var(--text2); font-family: var(--f-mono); font-size: 12px; padding: 8px 4px; cursor: pointer; }
.wager-quick button.on, .wager-quick button:hover { border-color: var(--cyan); color: var(--cyan); }

.arena-locked { margin: 22px 0 0; }
.arena-locked .ap-label { text-align: left; }
.locked-hand { display: flex; gap: 8px; }
.locked-card { width: 54px; height: 64px; border-radius: 9px; background: var(--card); border: 1px solid var(--border2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.locked-card .lc-emoji { font-size: 20px; }
.locked-card .lc-val { font-family: var(--f-mono); font-size: 11px; color: var(--cyan); }
.locked-card.r-uncommon { border-color: var(--green); }
.locked-card.r-epic { border-color: var(--purple); }
.locked-card.r-legendary { border-color: var(--gold); }
.locked-card.r-rare { border-color: var(--cyan); }

.arena-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; background: var(--card); border: 1px solid var(--border2); border-radius: 14px; overflow: hidden; margin: 22px 0; }
.arena-summary div { text-align: center; padding: 16px 8px; border-right: 1px solid var(--border); }
.arena-summary div:last-child { border-right: none; }
.arena-summary b { display: block; font-size: 18px; font-family: var(--f-mono); }
.arena-summary .green { color: var(--green); }
.arena-summary .cyan { color: var(--cyan); }
.arena-summary span { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; }
.arena-cta { display: flex; gap: 14px; justify-content: center; }
.arena-cta .pvp-btn { padding: 14px 30px; }
.arena-cta .cancel { color: var(--red) !important; border-color: rgba(255,85,119,0.4) !important; }

/* battle overlay restyle */
.duel-side.win, .gb-fighter .gb-hp { box-shadow: 0 0 18px rgba(40,224,255,0.12); }
#gacha-overlay-body, .arena-overlay-body { border-color: var(--border2); }

@media (max-width: 720px) {
  .sa-stats, .arena-summary { grid-template-columns: repeat(2,1fr); }
  .sa-stat:nth-child(2), .arena-summary div:nth-child(2) { border-right: none; }
  .arena-grid { grid-template-columns: 1fr; }
  .arena-mid { flex-direction: row; }
  .gb-hand-grid { grid-template-columns: repeat(4,1fr); gap: 7px; }
  .deck-actions { grid-template-columns: 1fr; }
}

/* ════════ BATTLE PAGE ════════ */
#page-battle { max-width: 1200px; margin: 0 auto; padding: 16px; }
.bt-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card); border: 1px solid var(--border2); border-radius: 14px; padding: 14px 18px; margin-bottom: 14px; }
.bt-round { font-family: var(--f-display); font-weight: 700; color: var(--cyan); letter-spacing: 0.08em; }
.bt-round b { color: var(--text); }
.bt-mode { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 8px; }
.bt-mode.pve { color: var(--green); background: rgba(34,227,166,0.12); border: 1px solid rgba(34,227,166,0.3); }
.bt-mode.pvp { color: var(--cyan); background: rgba(40,224,255,0.1); border: 1px solid rgba(40,224,255,0.3); }
.bt-reward { font-family: var(--f-mono); font-size: 12px; color: var(--gold); }
.bt-speed { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; color: var(--text3); letter-spacing: 0.1em; margin-bottom: 16px; }
.bt-speed button { background: var(--card); border: 1px solid var(--border2); border-radius: 8px; color: var(--text2); font-family: var(--f-mono); font-size: 12px; padding: 6px 12px; cursor: pointer; }
.bt-speed button.on, .bt-speed button:hover { border-color: var(--cyan); color: var(--cyan); }
.bt-arena { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start; }
.bt-panel { background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--border2); border-radius: 16px; padding: 18px; }
.bt-panel.you { border-color: var(--cyan); box-shadow: 0 0 22px rgba(40,224,255,0.10); }
.bt-panel.enemy { border-color: rgba(255,85,119,0.35); }
.bt-phead { font-family: var(--f-display); font-size: 12px; letter-spacing: 0.1em; color: var(--cyan); margin-bottom: 12px; }
.bt-panel.enemy .bt-phead { color: var(--red); text-align: right; }
.bt-fighter { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bt-fighter.rev { justify-content: flex-end; text-align: right; }
.bt-ava { width: 44px; height: 44px; border-radius: 50%; background: var(--card); border: 1px solid var(--cyan); display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); color: var(--cyan); font-size: 18px; flex-shrink: 0; }
.bt-ava.enemy { border-color: var(--red); color: var(--red); }
.bt-name { font-weight: 700; }
.bt-addr { font-family: var(--f-mono); font-size: 11px; color: var(--text3); }
.bt-hp-row { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px; }
.bt-hp-row b { font-family: var(--f-mono); color: var(--text); font-size: 14px; }
.bt-shield { font-family: var(--f-mono); color: #4da6ff; font-style: normal; font-size: 11px; }
.bt-hpbar { height: 14px; background: var(--dark2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.bt-hp { height: 100%; width: 100%; background: linear-gradient(90deg, var(--green-dim,#0a9), var(--green)); transition: width 0.5s ease; }
.bt-hp.opp { background: linear-gradient(90deg, #cc2b3b, var(--red)); }
.bt-hp.hit { animation: hpHit 0.4s ease; }
.bt-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.bt-playing { margin-bottom: 14px; }
.bt-slot { min-height: 48px; background: var(--dark2); border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; color: var(--text3); }
.bt-slotcard { display: flex; align-items: center; gap: 8px; font-size: 22px; }
.bt-slotcard b { font-family: var(--f-mono); font-size: 16px; }
.bt-slotcard i { font-style: normal; font-size: 10px; color: var(--text3); text-transform: uppercase; }
.bt-slotcard.fx-atk b { color: var(--red); } .bt-slotcard.fx-def b { color: #4da6ff; } .bt-slotcard.fx-heal b { color: var(--green); }
.bt-hand { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.bt-hand.enemy { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.bt-back { font-size: 26px; color: var(--text3); }
.bt-mini { display: inline-flex; flex-direction: column; align-items: center; background: var(--card); border: 1px solid var(--border2); border-radius: 8px; padding: 5px 7px; font-size: 18px; }
.bt-mini i { font-style: normal; font-family: var(--f-mono); font-size: 10px; color: var(--text2); }
.bt-mini.r-uncommon { border-color: var(--green); } .bt-mini.r-epic { border-color: var(--purple); } .bt-mini.r-legendary { border-color: var(--gold); } .bt-mini.r-rare { border-color: var(--cyan); }
.bt-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding-top: 60px; min-width: 110px; }
.bt-vs { font-family: var(--f-display); font-weight: 900; font-size: 30px; color: var(--red); text-shadow: 0 0 18px rgba(255,85,119,0.45); }
.bt-status { text-align: center; font-family: var(--f-mono); font-size: 12px; color: var(--text2); background: var(--card); border: 1px solid var(--border2); border-radius: 10px; padding: 10px 12px; min-width: 120px; min-height: 40px; display: flex; align-items: center; justify-content: center; }
.bt-status.you { color: var(--cyan); border-color: var(--cyan); }
/* combat log — centered column with a show/hide toggle */
.bt-logwrap { max-width: 520px; margin: 16px auto 0; display: flex; flex-direction: column; align-items: center; }
.bt-logtoggle { align-self: center; background: var(--card); border: 1px solid var(--border2); color: var(--text2); border-radius: 999px; padding: 6px 16px; cursor: pointer; font: 600 11px var(--f-body); letter-spacing: .04em; display: inline-flex; align-items: center; gap: 7px; transition: border-color .15s, color .15s; }
.bt-logtoggle:hover { border-color: var(--cyan); color: #fff; }
.bt-logtoggle .bt-logchev { transition: transform .18s; font-size: 9px; }
.bt-logwrap.log-hidden .bt-logtoggle .bt-logchev { transform: rotate(-90deg); }
.bt-log { width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin: 8px 0 0; min-height: 110px; max-height: 180px; overflow-y: auto; font-family: var(--f-mono); font-size: 12px; color: var(--text3); }
.bt-logwrap.log-hidden .bt-log { display: none; }
.bt-logrow { padding: 2px 0; }
.bt-logrow .l-you { color: var(--cyan); } .bt-logrow .l-opp { color: var(--red); }
.bt-logrow .fx-atk { color: var(--red); } .bt-logrow .fx-def { color: #4da6ff; } .bt-logrow .fx-heal { color: var(--green); }
.bt-cta { display: flex; gap: 14px; justify-content: center; }
.bt-cta .pvp-btn { padding: 13px 26px; }
.bt-cta .pvp-btn.on { border-color: var(--cyan) !important; color: var(--cyan) !important; box-shadow: 0 0 14px rgba(40,224,255,0.2); }
.bt-cta .cancel { color: var(--red) !important; border-color: rgba(255,85,119,0.4) !important; }
.bt-result { margin-top: 16px; text-align: center; }
@media (max-width: 760px) {
  .bt-arena { grid-template-columns: 1fr; }
  .bt-mid { flex-direction: row; padding-top: 0; }
  .bt-fighter.rev { flex-direction: row-reverse; justify-content: flex-start; text-align: left; }
  .bt-panel.enemy .bt-phead { text-align: left; }
  .bt-hand.enemy { justify-content: center; }
}

/* ════════ harmonized cards + SVG icons ════════ */
.gb-hand-grid, .bt-hand { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 100%; }
.gb-hand-grid .gb-card { width: 104px; flex: 0 0 104px; }
.bt-hand .gb-card { width: 88px; flex: 0 0 88px; gap: 3px; }
.gb-card { aspect-ratio: 0.72; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 10px 6px; }
.gb-card-icon { display: flex; align-items: center; justify-content: center; height: 40px; }
.bt-hand .gb-card-icon { height: 32px; }
.cicon { display: block; filter: drop-shadow(0 0 5px currentColor); }
.gb-card.t-atk .cicon, .i-atk .cicon, .i-atk, .gb-card.t-atk .gb-card-val { color: #ff6b6b; }
.gb-card.t-def .cicon, .i-def .cicon, .i-def, .gb-card.t-def .gb-card-val { color: #4da6ff; }
.gb-card.t-heal .cicon, .i-heal .cicon, .i-heal, .gb-card.t-heal .gb-card-val { color: var(--green); }
.gb-card-val { font-size: 21px; }
.bt-hand .gb-card-val { font-size: 17px; }

.locked-card .lc-icon { display: flex; align-items: center; }
.locked-card.t-atk .cicon { color: #ff6b6b; } .locked-card.t-def .cicon { color: #4da6ff; } .locked-card.t-heal .cicon { color: var(--green); }

/* opponent face-down cards — mirror the player's battle-hand card footprint so both panels are symmetric */
.bt-back { display: inline-block; width: 88px; aspect-ratio: 0.72; height: auto; border-radius: 12px; border: 1px solid var(--border2); background: repeating-linear-gradient(135deg, var(--card2) 0 8px, var(--dark2) 8px 16px); box-shadow: inset 0 0 10px rgba(40,224,255,0.10); }
.bt-hand.enemy { gap: 10px; justify-content: center; }
.bt-slotcard .cicon { vertical-align: middle; }

/* ════════ card-play animation (center stage) ════════ */
.bt-arena { position: relative; }
.bt-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 30; }
.fxcard { position: relative; perspective: 900px; }
.fxcard-inner { position: relative; width: 122px; height: 170px; transform-style: preserve-3d; animation: fxFlip var(--flip,720ms) cubic-bezier(0.2,0.75,0.2,1) forwards; }
.fxcard-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.fxcard-back { transform: rotateY(180deg); border: 2px solid var(--cyan); background: repeating-linear-gradient(135deg, var(--card2) 0 8px, var(--dark2) 8px 16px); box-shadow: 0 0 26px rgba(40,224,255,0.45); }
.fxcard-front { background: linear-gradient(180deg, var(--card2), var(--card)); border: 2px solid var(--border2); }
.fxcard-front.t-atk { border-color: #ff6b6b; box-shadow: 0 0 34px rgba(255,107,107,0.5); }
.fxcard-front.t-def { border-color: #4da6ff; box-shadow: 0 0 34px rgba(77,166,255,0.5); }
.fxcard-front.t-heal { border-color: var(--green); box-shadow: 0 0 34px rgba(34,227,166,0.5); }
.fxcard-front .cicon { width: 52px; height: 52px; }
.fxcard-front.t-atk .cicon, .fxcard-front.t-atk .fxcard-val { color: #ff6b6b; }
.fxcard-front.t-def .cicon, .fxcard-front.t-def .fxcard-val { color: #4da6ff; }
.fxcard-front.t-heal .cicon, .fxcard-front.t-heal .fxcard-val { color: var(--green); }
.fxcard-val { font-family: var(--f-mono); font-size: 27px; font-weight: 700; }
.fxcard-name { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); }
.from-you .fxcard-inner { --fromX: -270px; }
.from-opp .fxcard-inner { --fromX: 270px; }
@keyframes fxFlip {
  0%   { transform: translateX(var(--fromX,0)) rotateY(180deg) scale(0.7); opacity: 0; }
  25%  { opacity: 1; }
  55%  { transform: translateX(0) rotateY(180deg) scale(1.06); opacity: 1; }
  100% { transform: translateX(0) rotateY(0deg) scale(1); opacity: 1; }
}
.fxburst { position: absolute; inset: -10px; border-radius: 20px; opacity: 0; animation: fxBurst var(--burst,440ms) ease-out var(--flip,720ms) forwards; }
@keyframes fxBurst { 0% { opacity: 0; transform: scale(0.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.9); } }
.fxburst.b-atk { background: radial-gradient(circle, rgba(255,107,107,0.5), transparent 60%); box-shadow: 0 0 70px rgba(255,107,107,0.7); }
.fxburst.b-def { background: radial-gradient(circle, rgba(77,166,255,0.45), transparent 62%); box-shadow: 0 0 70px rgba(77,166,255,0.7); }
.fxburst.b-heal { background: radial-gradient(circle, rgba(34,227,166,0.45), transparent 62%); box-shadow: 0 0 70px rgba(34,227,166,0.7); }
@media (prefers-reduced-motion: reduce) { .fxcard-inner, .fxburst { animation-duration: 0.001ms !important; } }