/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #07060f;
  --bg2:       #0e0d1c;
  --bg3:       #15132a;
  --border:    #2a2440;
  --gold:      #d4a840;
  --gold-dim:  #7a6020;
  --red:       #c0392b;
  --red-dim:   #6a1a10;
  --green:     #3aaa60;
  --fire:      #e87040;
  --water:     #40a0e8;
  --earth:     #60c040;
  --poison:    #a040e8;
  --text:      #d8d0c0;
  --text-dim:  #6a6060;
  --font:      'Press Start 2P', monospace;
}

html, body {
  width: 100%; min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 10px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── Pixel art image rendering ────────────────────────────── */
img { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ── Scanlines CRT effect ─────────────────────────────────── */
.scanlines {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.08) 2px,
    rgba(0,0,0,.08) 4px
  );
}

/* ── Particle canvas ──────────────────────────────────────── */
#particles {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}

/* ── Screen system ────────────────────────────────────────── */
.screen {
  display: none;
  position: relative; z-index: 1;
  min-height: 100vh;
  padding: 24px 16px 40px;
  max-width: 480px;
  margin: 0 auto;
}
.screen.active { display: flex; flex-direction: column; align-items: center; }

/* ── Pixel border mixin (utility classes) ─────────────────── */
.px-border {
  border: 3px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.px-border-gold {
  border: 3px solid var(--gold-dim);
  box-shadow: 0 0 12px rgba(212,168,64,.15), inset 0 0 0 1px rgba(212,168,64,.05);
}

/* ══════════════════════════════════════════════════════════
   CONNECT SCREEN
══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   LANDING SCREEN
══════════════════════════════════════════════════════════ */

#screen-connect {
  justify-content: flex-start;
  gap: 0;
  text-align: center;
  padding: 0 0 40px;
  overflow-y: auto;
}

/* ── Hero ── */
.land-hero {
  position: relative;
  width: 100%;
  background: #000;
  padding: 0;
  overflow: hidden;
}
.land-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(212,168,64,.12) 0%, transparent 70%);
  pointer-events: none;
}

.land-hero-cats {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 0; margin-bottom: 18px; position: relative;
}
.land-cat { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; max-width: 120px; }
.land-cat-img {
  width: 88px; height: 88px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 14px rgba(212,168,64,.4));
  animation: cat-bob 2.4s ease-in-out infinite;
}
.land-cat-right .land-cat-img { animation-delay: .4s; }
.flipped { transform: scaleX(-1); }
@keyframes cat-bob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.flipped { transform: scaleX(-1); }
.land-cat-right .land-cat-img.flipped {
  animation: cat-bob-flip 2.4s ease-in-out infinite .4s;
}
@keyframes cat-bob-flip {
  0%,100% { transform: scaleX(-1) translateY(0); }
  50%      { transform: scaleX(-1) translateY(-7px); }
}

.land-cat-rune {
  font-size: 20px;
  animation: rune-float 2.8s ease-in-out infinite;
}
.land-cat-left .land-cat-rune { animation-delay: .2s; }
@keyframes rune-float {
  0%,100% { transform: translateY(0) scale(1); opacity: .8; }
  50%      { transform: translateY(-5px) scale(1.15); opacity: 1; }
}
.fire-glow  { filter: drop-shadow(0 0 8px var(--fire)); }
.water-glow { filter: drop-shadow(0 0 8px var(--water)); }

.land-vs {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 64px; flex-shrink: 0; padding-bottom: 28px;
}
.land-vs-ring {
  position: absolute;
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid var(--gold-dim);
  animation: vs-pulse 2s ease-in-out infinite;
}
@keyframes vs-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(212,168,64,0); border-color: var(--gold-dim); }
  50%      { box-shadow: 0 0 0 8px rgba(212,168,64,.1); border-color: var(--gold); }
}
.land-vs-text {
  position: relative; font-size: 14px; color: var(--gold);
  text-shadow: 0 0 12px rgba(212,168,64,.6);
  letter-spacing: 2px;
}

.land-banner-img {
  width: 100%; max-width: 100%; display: block; margin: 0;
  image-rendering: pixelated;
  border-radius: 0;
}

/* ── Tagline ── */
.land-tagline {
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 16px 16px;
  background: var(--bg1);
}
.land-tag-line1 {
  font-size: 13px; color: var(--text); letter-spacing: 3px;
}
.land-tag-line2 {
  font-size: 10px; color: var(--text-dim); letter-spacing: 2px;
}
.land-tag-dog {
  color: var(--gold);
  text-shadow: 0 0 16px rgba(212,168,64,.5);
  animation: title-pulse 3s ease-in-out infinite;
}

/* ── Live row ── */
.land-live-row {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 10px 16px;
  background: var(--bg2);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.land-live-badge {
  display: flex; align-items: center; gap: 7px;
  font-size: 6px; color: var(--text-dim); letter-spacing: 1.5px;
}
.land-waiting {
  display: flex; align-items: center; gap: 7px;
  font-size: 6px; color: #60e060; letter-spacing: 1.5px;
}
.live-pulse-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fire); display: inline-block; flex-shrink: 0;
  animation: dot-blink 1.4s ease-in-out infinite;
}
.green-dot { background: #60e060; }
@keyframes dot-blink {
  0%,100% { opacity: 1; box-shadow: 0 0 4px currentColor; }
  50%      { opacity: .35; box-shadow: none; }
}

/* ── Hooks ── */
.land-hooks {
  display: flex; gap: 10px; padding: 20px 14px;
  background: var(--bg1);
}
.land-hook {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: var(--bg2); border: 2px solid var(--border);
  padding: 14px 8px;
}
.hook-icon-wrap {
  font-size: 22px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid transparent;
  animation: hook-float 3s ease-in-out infinite;
}
.hook-icon-wrap:nth-child(1) { animation-delay: 0s; }
.land-hook:nth-child(2) .hook-icon-wrap { animation-delay: .6s; }
.land-hook:nth-child(3) .hook-icon-wrap { animation-delay: 1.2s; }
@keyframes hook-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.fire-border  { border-color: rgba(232,112,64,.5); box-shadow: 0 0 10px rgba(232,112,64,.2); }
.gold-border  { border-color: rgba(212,168,64,.5); box-shadow: 0 0 10px rgba(212,168,64,.2); }
.earth-border { border-color: rgba(96,192,64,.5);  box-shadow: 0 0 10px rgba(96,192,64,.2); }
.hook-px-img {
  width: 40px; height: 40px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: contain;
}
.hook-label { font-size: 6px; color: var(--gold); letter-spacing: 1px; text-align: center; }
.hook-sub   { font-size: 5px; color: var(--text-dim); letter-spacing: .5px; text-align: center; line-height: 1.8; }

/* ── Prize callout ── */
/* ── Landing mode cards ── */
.land-mode-cards {
  display: flex; gap: 6px; margin: 0 14px;
}
.land-mode-card {
  flex: 1; background: var(--bg2); border: 2px solid var(--border);
  padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center;
}
.land-mc-soon { opacity: .55; }
.land-mc-icon { font-size: 20px; }
.land-mc-name { font-size: 6px; color: var(--text); letter-spacing: 1px; }
.land-mc-tag  { font-size: 5px; letter-spacing: 1px; padding: 2px 5px; border: 1px solid; }
.free-tag     { border-color: var(--green); color: var(--green); }
.prize-tag    { border-color: var(--gold);  color: var(--gold); }
.soon-tag     { border-color: var(--text-dim); color: var(--text-dim); }
.land-mc-desc { font-size: 5px; color: var(--text-dim); letter-spacing: 1px; line-height: 1.8; }

/* ── How it works ── */
.land-how { padding: 20px 14px; background: var(--bg1); }
.land-how-title {
  font-size: 7px; color: var(--text-dim); letter-spacing: 3px;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.land-steps { display: flex; flex-direction: column; gap: 10px; }
.land-step {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg2); border: 1px solid var(--border);
  padding: 12px;
}
.step-num {
  font-size: 14px; color: var(--gold); flex-shrink: 0;
  width: 28px; text-align: center;
  text-shadow: 0 0 10px rgba(212,168,64,.5);
}
.step-body {
  font-size: 6.5px; color: var(--text-dim); letter-spacing: .5px;
  line-height: 2; text-align: left;
}
.step-body strong { color: var(--text); }

/* ── CTA ── */
.land-cta {
  margin: 20px 14px 0;
  width: calc(100% - 28px);
  font-size: 12px !important;
  padding: 18px !important;
  letter-spacing: 3px;
  box-shadow: 0 0 24px rgba(212,168,64,.3), 0 0 48px rgba(212,168,64,.1) !important;
  animation: cta-pulse 2s ease-in-out infinite;
}
@keyframes cta-pulse {
  0%,100% { box-shadow: 0 0 20px rgba(212,168,64,.3), 0 4px 0 rgba(0,0,0,.8); }
  50%      { box-shadow: 0 0 40px rgba(212,168,64,.55), 0 4px 0 rgba(0,0,0,.8); }
}
.land-hint {
  font-size: 6px; color: var(--text-dim); letter-spacing: 1px;
  margin: 12px 0 0; padding: 0 14px;
}
.land-about-link {
  text-align: center; margin: 10px 0 20px; font-size: 6px;
}
.land-about-link a { color: var(--text-dim); text-decoration: none; letter-spacing: 1px; }
.land-about-link a:hover { color: var(--gold); }

/* ── Forge hook clickable ── */
.land-hook-cta {
  cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.land-hook-cta:hover {
  border-color: rgba(232,112,64,.6);
  box-shadow: 0 0 16px rgba(232,112,64,.2);
}

/* ── Disclaimer Modal ── */
.disclaimer-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.disclaimer-overlay.hidden { display: none; }
.disclaimer-box {
  background: var(--bg1);
  border: 2px solid var(--gold-dim);
  box-shadow: 0 0 40px rgba(212,168,64,.2);
  width: 100%; max-width: 460px;
  max-height: 80vh;
  display: flex; flex-direction: column;
  position: relative;
}
.disclaimer-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px; color: var(--gold);
  padding: 16px; letter-spacing: 2px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.disclaimer-scroll {
  overflow-y: auto; padding: 16px;
  flex: 1; min-height: 0;
  font-size: 6.5px; color: var(--text-dim); line-height: 2.2;
}
.disclaimer-scroll p { margin: 0 0 12px; }
.disclaimer-scroll strong { color: var(--text); }
.disc-section-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px; color: var(--gold);
  letter-spacing: 2px; margin: 16px 0 6px !important;
}
.disclaimer-fade {
  position: absolute; bottom: 52px; left: 0; right: 0; height: 32px;
  background: linear-gradient(to top, var(--bg1), transparent);
  pointer-events: none; flex-shrink: 0;
}
.disclaimer-btn {
  margin: 0; width: 100%; border-radius: 0;
  font-size: 8px !important; padding: 14px !important;
  flex-shrink: 0; letter-spacing: 2px;
}

/* ── About / FAQ Screen ── */
#screen-about { overflow-y: auto; }
.about-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; background: var(--bg1);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.about-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px; color: var(--gold); letter-spacing: 2px;
}
.about-back { flex-shrink: 0; }
.about-body { padding: 0 14px 20px; }
.faq-section {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.faq-section:last-child { border-bottom: none; }
.faq-heading {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px; color: var(--gold);
  letter-spacing: 1px; margin: 0 0 12px;
}
.faq-section p {
  font-size: 6.5px; color: var(--text-dim);
  line-height: 2.2; margin: 0 0 8px;
}
.faq-section p strong { color: var(--text); }
.faq-list {
  font-size: 6.5px; color: var(--text-dim);
  line-height: 2.4; padding-left: 14px; margin: 0 0 8px;
}
.faq-list li { margin-bottom: 4px; }
.faq-list strong { color: var(--text); }
.faq-section-legal { background: rgba(212,168,64,.03); padding: 20px 12px; margin: 0 -14px; }
.about-bottom-back {
  display: block; margin: 0 14px 20px;
}

.game-banner { width: 100%; max-width: 480px; display: block; image-rendering: pixelated; }
.tagline     { font-size: 8px; color: var(--text-dim); letter-spacing: 2px; }
.season-preview { width: 100%; }
.connect-hint { font-size: 7px; color: var(--text-dim); margin-top: -16px; }

/* ══════════════════════════════════════════════════════════
   PIXEL CARD
══════════════════════════════════════════════════════════ */
.px-card {
  background: var(--bg2);
  border: 3px solid var(--border);
  border-radius: 0;
  padding: 14px;
  width: 100%;
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
}
.px-card-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.px-card-row:last-child { border-bottom: none; }
.px-label { font-size: 7px; color: var(--text-dim); letter-spacing: 2px; }
.px-val   { font-size: 9px; color: var(--text); }
.px-gold  { color: var(--gold); }
.px-green { color: var(--green); }
.px-red   { color: var(--red); }

/* ══════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════ */
.px-btn {
  font-family: var(--font);
  cursor: pointer;
  border: none;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 1px;
  transition: transform .1s, box-shadow .1s;
}
.px-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: none !important; }

.px-btn-primary {
  background: linear-gradient(180deg, var(--red) 0%, var(--red-dim) 100%);
  color: #f0d0b0;
  font-size: 11px;
  padding: 14px 24px;
  border: 3px solid #e04030;
  box-shadow: 0 4px 0 #400a06, 4px 4px 0 rgba(0,0,0,.5);
  width: 100%;
}
.px-btn-primary:hover:not(:disabled) {
  box-shadow: 0 4px 0 #400a06, 4px 4px 0 rgba(0,0,0,.5), 0 0 20px rgba(192,57,43,.3);
}

.px-btn-battle {
  background: linear-gradient(180deg, #d4a840 0%, #7a5010 100%);
  color: #07060f;
  font-size: 10px;
  padding: 14px 20px;
  border: 3px solid #e8c060;
  box-shadow: 0 4px 0 #403000, 4px 4px 0 rgba(0,0,0,.5);
  width: 100%;
}
.px-btn-battle:hover:not(:disabled) {
  box-shadow: 0 4px 0 #403000, 4px 4px 0 rgba(0,0,0,.5), 0 0 24px rgba(212,168,64,.5);
}
.px-btn-battle:disabled {
  background: var(--bg3);
  color: var(--text-dim);
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
}

.px-btn-sm {
  background: var(--bg2);
  color: var(--text-dim);
  font-size: 7px;
  padding: 8px 12px;
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 rgba(0,0,0,.5);
}
.px-btn-sm:hover { color: var(--text); border-color: var(--text-dim); }
.btn-icon { font-size: 14px; font-family: sans-serif; }

/* ══════════════════════════════════════════════════════════
   SELECT SCREEN
══════════════════════════════════════════════════════════ */
#screen-select { gap: 16px; }

.screen-header { width: 100%; }
.header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.wallet-chip {
  font-size: 7px; color: var(--gold);
  background: var(--bg2); border: 2px solid var(--gold-dim);
  padding: 5px 8px;
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.screen-title { font-size: 13px; color: var(--gold); margin-bottom: 6px; text-shadow: 2px 2px 0 rgba(0,0,0,.8); }
.screen-sub   { font-size: 7px; color: var(--text-dim); letter-spacing: 1px; }

.nft-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
}

.nft-card {
  background: var(--bg2);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
  cursor: pointer;
  transition: transform .1s, border-color .2s;
  overflow: hidden;
}
.nft-card:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
.nft-card:active { transform: translateY(2px); }

.nft-img-wrap {
  width: 100%; aspect-ratio: 1;
  background: var(--bg3);
  overflow: hidden;
}
.nft-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.nft-card-info { padding: 8px; background: rgba(0,0,0,.35); }
.nft-card-name  { font-size: 8px; color: var(--gold); margin-bottom: 5px; letter-spacing: .5px; }
.nft-card-house { font-size: 6px; color: #a09090; margin-bottom: 6px; letter-spacing: 1px; }
.nft-card-house.fire  { color: var(--fire); }
.nft-card-house.water { color: var(--water); }
.nft-card-house.earth { color: var(--earth); }

.nft-card-actions {
  display: flex; gap: 6px; align-items: center; margin-top: 2px;
}
.nft-card-ins-link {
  display: inline-block;
  font-size: 5px;
  color: var(--gold-dim);
  text-decoration: none;
  letter-spacing: 1px;
  transition: color .15s;
}
.nft-card-ins-link:hover { color: var(--gold); }
.nft-traits-btn {
  font-size: 5px; letter-spacing: 1px;
  color: var(--text-dim); background: none; border: 1px solid var(--border);
  padding: 2px 5px; cursor: pointer; font-family: inherit; transition: color .15s, border-color .15s;
}
.nft-traits-btn:hover { color: var(--gold); border-color: var(--gold-dim); }

/* Mint card in fighter grid */
.nft-card-mint {
  background: var(--bg2); border: 3px dashed var(--border);
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  min-height: 180px; transition: border-color .2s, transform .1s;
  text-align: center; padding: 16px;
}
.nft-card-mint:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
.nft-card-mint:active { transform: translateY(2px); }
.nft-card-mint-icon { font-size: 28px; }
.nft-card-mint-label { font-size: 7px; color: var(--gold-dim); letter-spacing: 1px; }
.nft-card-mint-sub   { font-size: 5px; color: var(--text-dim); letter-spacing: 1px; line-height: 1.8; }

/* Traits modal */
.traits-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 999; padding: 16px;
}
.traits-modal {
  background: var(--bg2); border: 3px solid var(--border);
  box-shadow: 6px 6px 0 rgba(0,0,0,.6);
  padding: 20px; max-width: 320px; width: 100%;
  max-height: 80vh; overflow-y: auto;
}
.traits-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; border-bottom: 1px solid var(--border); padding-bottom: 10px;
}
.traits-modal-name  { font-size: 9px; color: var(--gold); }
.traits-modal-close {
  font-size: 10px; cursor: pointer; color: var(--text-dim);
  background: none; border: none; font-family: inherit; padding: 4px 8px;
}
.traits-modal-close:hover { color: var(--text); }
.traits-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.trait-box {
  background: var(--bg3); border: 1px solid var(--border);
  padding: 7px 9px; border-radius: 0;
}
.trait-type  { font-size: 5px; color: var(--text-dim); letter-spacing: 1px; margin-bottom: 3px; }
.trait-value { font-size: 7px; color: var(--text); letter-spacing: .5px; }

/* ── Trait pills ───────────────────────────────────────────────────────────── */
.trait-pill {
  display: inline-block;
  font-size: 5px;
  color: var(--text-dim);
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 2px 4px;
  margin: 2px 2px 0 0;
  letter-spacing: 0;
  line-height: 1.4;
}

/* ── Selected Fighter Panel (screen-mode) ────────────────────────────────── */
.sfp {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg2);
  border: 3px solid var(--border);
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}
.sfp.hidden { display: none; }

.sfp-img-wrap {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: var(--bg3);
  border: 2px solid var(--border);
  overflow: hidden;
}
.sfp-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sfp-info { flex: 1; min-width: 0; }
.sfp-name  { font-size: 7px; color: var(--text); margin-bottom: 4px; word-break: break-all; }
.sfp-house { font-size: 6px; color: var(--text-dim); margin-bottom: 6px; }
.sfp-house.fire  { color: var(--fire); }
.sfp-house.water { color: var(--water); }
.sfp-house.earth { color: var(--earth); }

.sfp-traits { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px; }

.sfp-inscription {
  display: inline-block;
  font-size: 5px;
  color: var(--gold-dim);
  text-decoration: none;
  letter-spacing: 1px;
  word-break: break-all;
}
.sfp-inscription:hover { color: var(--gold); }

.empty-state { text-align: center; color: var(--text-dim); font-size: 8px; line-height: 2; }
.empty-sub { font-size: 7px; color: var(--text-dim); opacity: .6; margin-top: 8px; }

/* ══════════════════════════════════════════════════════════
   BATTLE SCREEN
══════════════════════════════════════════════════════════ */
#screen-battle {
  gap: 12px;
  padding-top: 12px;
  align-items: stretch;
}

/* HUD */
.season-hud {
  display: grid; grid-template-columns: 1fr 1.4fr 1fr;
  background: var(--bg2);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
}
.hud-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 4px;
  border-right: 2px solid var(--border);
}
.hud-item:last-child { border-right: none; }
.hud-label { font-size: 6px; color: var(--text-dim); letter-spacing: 1px; margin-bottom: 4px; }
.hud-val   { font-size: 10px; }

/* ARENA */
.arena {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 rgba(0,0,0,.6), inset 0 0 40px rgba(0,0,0,.6);
}

.arena-bg {
  position: absolute; inset: 0;
  background: url('images/animation-background.png') center bottom / cover no-repeat;
  image-rendering: pixelated; image-rendering: crisp-edges;
  transition: opacity .4s;
}
.arena-bg.bg-fire  { background-image: url('images/fire-background.png'); }
.arena-bg.bg-water { background-image: url('images/water-background.png'); }
.arena-bg.bg-earth { background-image: url('images/earth-background.png'); }
.arena-bg.bg-poison { background: radial-gradient(ellipse at 50% 100%, #150525 0%, var(--bg) 65%); }

/* Elemental terrain morph flash — fires ::after overlay on .morphing */
.arena-bg.bg-fire::after   { content:''; position:absolute; inset:0; background:#ff5010; opacity:0; pointer-events:none; }
.arena-bg.bg-water::after  { content:''; position:absolute; inset:0; background:#2060ff; opacity:0; pointer-events:none; }
.arena-bg.bg-earth::after  { content:''; position:absolute; inset:0; background:#30b010; opacity:0; pointer-events:none; }
@keyframes terrain-morph { 0%{opacity:0} 20%{opacity:.55} 100%{opacity:0} }
.arena-bg.morphing::after  { animation: terrain-morph 1.4s ease-out forwards; }

/* Canvas beam VFX layer */
.arena-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

.arena-floor {
  position: absolute; bottom: 30px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--border) 20%, var(--border) 80%, transparent 100%);
}
.arena-floor-glow {
  position: absolute; bottom: 26px; left: 10%; right: 10%;
  height: 8px;
  background: transparent;
  border-radius: 50%;
  transition: background .5s;
}
.arena-floor-glow.fire-glow  { background: radial-gradient(ellipse, rgba(232,112,64,.25) 0%, transparent 70%); }
.arena-floor-glow.water-glow { background: radial-gradient(ellipse, rgba(64,160,232,.25) 0%, transparent 70%); }
.arena-floor-glow.earth-glow { background: radial-gradient(ellipse, rgba(96,192,64,.25)  0%, transparent 70%); }

/* FIGHTERS */
.fighter {
  position: absolute; bottom: 30px;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; z-index: 2;
  transition: all .5s cubic-bezier(.22,1,.36,1);
}
.fighter-left  { left: 12px; }
.fighter-right { right: 12px; }

.fighter-frame {
  position: relative;
  width: 76px; height: 76px;
  background: var(--bg3);
  border: 3px solid var(--border);
  overflow: hidden;
  box-shadow: 4px 4px 0 rgba(0,0,0,.8);
  transition: border-color .4s, box-shadow .4s;
}
.fighter-frame.glow-fire  { border-color: var(--fire);  box-shadow: 0 0 16px rgba(232,112,64,.5), 4px 4px 0 rgba(0,0,0,.8); }
.fighter-frame.glow-water { border-color: var(--water); box-shadow: 0 0 16px rgba(64,160,232,.5), 4px 4px 0 rgba(0,0,0,.8); }
.fighter-frame.glow-earth { border-color: var(--earth); box-shadow: 0 0 16px rgba(96,192,64,.5),  4px 4px 0 rgba(0,0,0,.8); }
.fighter-frame.glow-poison{ border-color: var(--poison);box-shadow: 0 0 16px rgba(160,64,232,.5), 4px 4px 0 rgba(0,0,0,.8); }
.fighter-frame.glow-gold  { border-color: var(--gold);  box-shadow: 0 0 20px rgba(212,168,64,.6), 4px 4px 0 rgba(0,0,0,.8); }

.fighter-sprite { width: 100%; height: 100%; object-fit: cover; display: block; }
.sprite-flip { transform: scaleX(-1); }
.fighter-frame-border { position: absolute; inset: 0; pointer-events: none; }

.fighter-rune-tag {
  font-size: 7px; color: var(--text-dim);
  background: var(--bg2); border: 2px solid var(--border);
  padding: 2px 5px;
}
.fighter-rune-tag.tag-fire  { color: var(--fire);  border-color: var(--fire); }
.fighter-rune-tag.tag-water { color: var(--water); border-color: var(--water);}
.fighter-rune-tag.tag-earth { color: var(--earth); border-color: var(--earth);}
.fighter-rune-tag.tag-poison{ color: var(--poison);border-color: var(--poison);}

.fighter-label { font-size: 6px; color: var(--text-dim); letter-spacing: 1px; }
.fighter-name  { font-size: 6px; color: var(--gold-dim); }

/* CENTER */
.arena-center {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  z-index: 1;
}
.runestone {
  width: 100px;
  filter: drop-shadow(0 0 8px rgba(212,168,64,.2));
  transition: filter .4s;
}
.runestone.lit       { filter: drop-shadow(0 0 16px rgba(212,168,64,.5)); }
.runestone.lit-fire  { filter: drop-shadow(0 0 24px var(--fire))  drop-shadow(0 0 10px rgba(232,112,64,.7)); }
.runestone.lit-water { filter: drop-shadow(0 0 24px var(--water)) drop-shadow(0 0 10px rgba(64,160,232,.7)); }
.runestone.lit-earth { filter: drop-shadow(0 0 24px var(--earth)) drop-shadow(0 0 10px rgba(96,192,64,.7)); }

.elem {
  position: absolute;
  width: 50px; bottom: 80px;
  left: 50%; transform: translateX(-50%);
  animation: elem-appear .4s ease-out;
  z-index: 3;
}
@keyframes elem-appear {
  0%   { transform: translateX(-50%) scale(0) rotate(-20deg); opacity: 0; }
  60%  { transform: translateX(-50%) scale(1.2) rotate(5deg); }
  100% { transform: translateX(-50%) scale(1) rotate(0); opacity: 1; }
}

/* CLASH VFX */
.clash-vfx {
  position: absolute; left: 50%; top: 40%;
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 10;
}
.clash-ring {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid var(--gold);
}
.clash-ring.r1 { animation: ring-out .5s ease-out forwards; }
.clash-ring.r2 { animation: ring-out .5s .1s ease-out forwards; border-color: var(--fire); }
@keyframes ring-out {
  0%   { width: 10px; height: 10px; opacity: 1; }
  100% { width: 160px; height: 160px; opacity: 0; }
}
.clash-spark {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px; font-family: sans-serif;
  animation: spark-pop .6s ease-out forwards;
}
@keyframes spark-pop {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  40%  { transform: translate(-50%,-50%) scale(1.4); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(0.8); opacity: 0; }
}

/* ARENA RESULT OVERLAY */
.arena-result {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(7,6,15,.7);
  animation: fade-in .4s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.result-text { font-size: 20px; letter-spacing: 3px; margin-bottom: 8px; }
.result-sub  { font-size: 7px; color: var(--text-dim); letter-spacing: 2px; }
.result-win  { color: var(--gold); text-shadow: 0 0 20px rgba(212,168,64,.6); }
.result-lose { color: var(--red);  text-shadow: 0 0 16px rgba(192,57,43,.4); }

/* FIGHTER ANIMATIONS */
@keyframes fighter-win {
  0%,100% { transform: translateY(0); }
  25%     { transform: translateY(-10px); }
  50%     { transform: translateY(-6px); }
  75%     { transform: translateY(-10px); }
}
@keyframes fighter-die {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  30%  { transform: translateY(-8px) rotate(-8deg); }
  100% { transform: translateY(20px) rotate(-20deg); opacity: 0; }
}
.fighter.winning { animation: fighter-win .8s ease-in-out .4s 2; }
.fighter.dying   { animation: fighter-die .8s ease-in .4s forwards; }

/* ── RUNE BUTTONS ──────────────────────────────────────────── */
.rune-section { width: 100%; }
.rune-section-title {
  font-size: 7px; color: var(--text-dim); letter-spacing: 3px;
  text-align: center; margin-bottom: 10px;
}
.rune-row { display: flex; gap: 8px; }

.rune-btn {
  flex: 1;
  background: var(--bg2);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
  padding: 10px 6px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: transform .1s, border-color .2s;
  font-family: var(--font);
}
.rune-btn:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
.rune-btn:active { transform: translateY(2px); box-shadow: none; }

@keyframes glow-pulse-fire {
  0%,100% { box-shadow: 0 0 6px rgba(232,112,64,.25), 4px 4px 0 rgba(0,0,0,.5); }
  50%      { box-shadow: 0 0 24px rgba(232,112,64,.75), 0 0 48px rgba(232,112,64,.18), 4px 4px 0 rgba(0,0,0,.5); }
}
@keyframes glow-pulse-water {
  0%,100% { box-shadow: 0 0 6px rgba(64,160,232,.25), 4px 4px 0 rgba(0,0,0,.5); }
  50%      { box-shadow: 0 0 24px rgba(64,160,232,.75), 0 0 48px rgba(64,160,232,.18), 4px 4px 0 rgba(0,0,0,.5); }
}
@keyframes glow-pulse-earth {
  0%,100% { box-shadow: 0 0 6px rgba(96,192,64,.25), 4px 4px 0 rgba(0,0,0,.5); }
  50%      { box-shadow: 0 0 24px rgba(96,192,64,.75), 0 0 48px rgba(96,192,64,.18), 4px 4px 0 rgba(0,0,0,.5); }
}
.rune-btn.sel-fire  { border-color: var(--fire);  background: rgba(232,112,64,.07); animation: glow-pulse-fire  1.4s ease-in-out infinite; }
.rune-btn.sel-water { border-color: var(--water); background: rgba(64,160,232,.07); animation: glow-pulse-water 1.4s ease-in-out infinite; }
.rune-btn.sel-earth { border-color: var(--earth); background: rgba(96,192,64,.07);  animation: glow-pulse-earth 1.4s ease-in-out infinite; }

.rune-btn-img   { width: 36px; height: 36px; object-fit: contain; filter: grayscale(70%); transition: filter .2s; }
.rune-btn.sel-fire  .rune-btn-img,
.rune-btn.sel-water .rune-btn-img,
.rune-btn.sel-earth .rune-btn-img { filter: none; }
.rune-btn:hover .rune-btn-img { filter: grayscale(20%); }
.rune-btn-name  { font-size: 7px; color: var(--text-dim); }
.rune-btn.sel-fire  .rune-btn-name { color: var(--fire); }
.rune-btn.sel-water .rune-btn-name { color: var(--water); }
.rune-btn.sel-earth .rune-btn-name { color: var(--earth); }
.rune-btn-beats { font-size: 6px; color: var(--text-dim); opacity: .6; }

/* ── POISON ──────────────────────────────────────────────── */
.poison-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg2);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color .2s;
  width: 100%;
}
.poison-row:hover { border-color: rgba(160,64,232,.3); }
.poison-row.poison-on { border-color: var(--poison); background: rgba(160,64,232,.06); box-shadow: 0 0 12px rgba(160,64,232,.2), 4px 4px 0 rgba(0,0,0,.5); }

.poison-img { width: 32px; height: 32px; object-fit: contain; transition: filter .3s; }
.grayscale  { filter: grayscale(100%) brightness(.6); }

.poison-info { flex: 1; }
.poison-title { font-size: 8px; color: var(--text-dim); margin-bottom: 3px; }
.poison-row.poison-on .poison-title { color: var(--poison); }
.poison-sub   { font-size: 6px; color: var(--text-dim); opacity: .6; }

.poison-toggle {
  width: 34px; height: 18px;
  background: var(--bg3); border: 2px solid var(--border);
  position: relative; transition: background .2s;
}
.poison-row.poison-on .poison-toggle { background: rgba(160,64,232,.3); border-color: var(--poison); }
.poison-dot {
  width: 12px; height: 12px;
  background: var(--text-dim);
  position: absolute; top: 1px; left: 1px;
  transition: all .2s;
}
.poison-row.poison-on .poison-dot { left: 17px; background: var(--poison); }

/* ── META INTEL ───────────────────────────────────────────── */
.meta-intel {
  width: 100%;
  background: var(--bg2);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
  padding: 12px;
}
.meta-title { font-size: 6px; color: var(--text-dim); letter-spacing: 2px; margin-bottom: 10px; text-align: center; }
.meta-bars  { display: flex; flex-direction: column; gap: 6px; }
.meta-bar-row { display: flex; align-items: center; gap: 8px; }
.meta-icon  { font-family: sans-serif; font-size: 12px; width: 16px; }
.meta-track { flex: 1; height: 6px; background: var(--bg3); border: 1px solid var(--border); }
.meta-fill  { height: 100%; transition: width .8s ease; width: 0%; }
.fire-fill  { background: var(--fire); }
.water-fill { background: var(--water); }
.earth-fill { background: var(--earth); }
.meta-pct   { font-size: 7px; color: var(--text-dim); width: 32px; text-align: right; }
.meta-note  { font-size: 6px; color: var(--text-dim); text-align: center; margin-top: 8px; opacity: .7; }

/* ── PREV RESULT ──────────────────────────────────────────── */
.prev-result {
  width: 100%;
  background: var(--bg2);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
  padding: 12px;
}
.prev-result-title { font-size: 6px; color: var(--text-dim); letter-spacing: 2px; margin-bottom: 8px; }
.prev-result-body  { font-size: 7px; color: var(--text); line-height: 1.8; }

.back-btn { align-self: flex-start; margin-top: 4px; }

/* ══════════════════════════════════════════════════════════
   RESULT SCREEN
══════════════════════════════════════════════════════════ */
#screen-result {
  justify-content: center;
  padding-top: 40px;
}
.result-screen-inner {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  width: 100%;
}
.result-day-label { font-size: 7px; color: var(--text-dim); letter-spacing: 3px; }

.rs-fighters {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 12px; width: 100%;
}
.rs-fighter { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }

.rs-frame {
  width: 96px; height: 96px;
  border: 3px solid var(--border);
  overflow: hidden;
  box-shadow: 4px 4px 0 rgba(0,0,0,.8);
  transition: all .4s;
}
.rs-frame img { width: 100%; height: 100%; object-fit: cover; }
.rs-frame.rs-win  { border-color: var(--gold); box-shadow: 0 0 24px rgba(212,168,64,.5), 4px 4px 0 rgba(0,0,0,.8); }
.rs-frame.rs-lose { opacity: .3; filter: grayscale(90%); }

.rs-fighter-name { font-size: 7px; color: var(--text-dim); text-align: center; }
.rs-rune-badge {
  font-size: 7px; padding: 3px 8px;
  background: var(--bg2); border: 2px solid var(--border);
}

.rs-center { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 24px; }
.rs-vs     { font-size: 10px; color: var(--text-dim); letter-spacing: 3px; }
.rs-sword  { font-size: 24px; font-family: sans-serif; animation: spin-slow 4s linear infinite; }
@keyframes spin-slow { to { transform: rotate(360deg); } }

.rs-outcome {
  font-size: 26px; letter-spacing: 4px; text-align: center;
  text-shadow: 3px 3px 0 rgba(0,0,0,.8);
}
.rs-outcome.rs-win-text  { color: var(--gold); text-shadow: 0 0 24px rgba(212,168,64,.6), 3px 3px 0 rgba(0,0,0,.8); }
.rs-outcome.rs-lose-text { color: var(--red); }
.rs-msg { font-size: 7px; color: var(--text-dim); text-align: center; letter-spacing: 1px; line-height: 2; }

/* ══════════════════════════════════════════════════════════
   UTILITIES
══════════════════════════════════════════════════════════ */
.hidden { display: none !important; }

.flash-red  { animation: flash-red  .3s ease 3; }
.flash-gold { animation: flash-gold .3s ease 3; }
@keyframes flash-red  { 0%,100% { background: var(--bg2); } 50% { background: rgba(192,57,43,.2); } }
@keyframes flash-gold { 0%,100% { background: var(--bg2); } 50% { background: rgba(212,168,64,.1); } }

/* Message toast */
.toast {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  background: var(--bg2);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
  padding: 10px 18px;
  font-size: 7px; color: var(--text);
  z-index: 9998;
  max-width: 90vw; text-align: center;
  animation: toast-in .3s ease;
}
@keyframes toast-in { from { transform: translateX(-50%) translateY(20px); opacity: 0; } }
.toast.error   { border-color: var(--red);   color: var(--red); }
.toast.success { border-color: var(--green); color: var(--green); }
.toast.info    { border-color: var(--gold-dim); color: var(--gold); }

/* ══════════════════════════════════════════════════════════
   MINT SCREEN
══════════════════════════════════════════════════════════ */
#screen-mint {
  gap: 18px;
  text-align: center;
  align-items: center;
}

.mint-preview-box {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%;
}

.mint-img-wrap {
  position: relative;
  width: 160px; height: 160px;
  border: 3px solid var(--gold-dim);
  box-shadow: 0 0 24px rgba(212,168,64,.15), 4px 4px 0 rgba(0,0,0,.7);
  background: var(--bg2);
  overflow: hidden;
  transition: box-shadow .4s, border-color .4s, width .3s, height .3s;
  animation: mint-border-pulse 3s ease-in-out infinite;
}
@keyframes mint-border-pulse {
  0%,100% { box-shadow: 0 0 16px rgba(212,168,64,.1), 4px 4px 0 rgba(0,0,0,.7); border-color: var(--gold-dim); }
  50%      { box-shadow: 0 0 40px rgba(212,168,64,.4), 4px 4px 0 rgba(0,0,0,.7); border-color: var(--gold); }
}

/* Box shakes while awaiting payment */
.mint-img-wrap.awaiting {
  animation: mystery-shake .45s ease-in-out infinite, mystery-glow 1s ease-in-out infinite;
  border-color: var(--gold);
  width: 180px; height: 180px;
}
@keyframes mystery-shake {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  15%      { transform: translate(-3px,-2px) rotate(-1.5deg); }
  30%      { transform: translate(3px,0px) rotate(1.5deg); }
  45%      { transform: translate(-2px,2px) rotate(-.5deg); }
  60%      { transform: translate(2px,-1px) rotate(1deg); }
  75%      { transform: translate(-1px,1px) rotate(-.5deg); }
}
@keyframes mystery-glow {
  0%,100% { box-shadow: 0 0 30px rgba(212,168,64,.3), 0 0 60px rgba(212,168,64,.1), 4px 4px 0 rgba(0,0,0,.7); }
  50%      { box-shadow: 0 0 60px rgba(212,168,64,.7), 0 0 100px rgba(212,168,64,.3), 4px 4px 0 rgba(0,0,0,.7); }
}

#mintPreviewImg {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity .2s;
}
#mintPreviewImg.revealed {
  opacity: 1;
  animation: reveal-flash .7s ease-out forwards;
}
@keyframes reveal-flash {
  0%   { filter: brightness(4) saturate(0) blur(4px); transform: scale(1.15); }
  40%  { filter: brightness(2) saturate(0.3) blur(1px); transform: scale(1.05); }
  100% { filter: none; transform: scale(1); }
}

.mint-question-mark {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px; color: var(--gold-dim);
  animation: qmark-pulse 2s ease-in-out infinite;
  transition: opacity .3s;
  text-shadow: 0 0 20px rgba(212,168,64,.4);
}
.mint-img-wrap.awaiting .mint-question-mark {
  font-size: 64px;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(212,168,64,.8);
  animation: qmark-bounce 0.45s ease-in-out infinite;
}
@keyframes qmark-pulse {
  0%,100% { opacity: .4; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.1); }
}
@keyframes qmark-bounce {
  0%,100% { transform: scale(1) rotate(-5deg); }
  50%      { transform: scale(1.2) rotate(5deg); }
}
.mint-question-mark.hidden { opacity: 0; pointer-events: none; }

.mint-design-name {
  font-size: 10px; color: var(--gold);
  text-shadow: 2px 2px 0 rgba(0,0,0,.8);
  animation: name-appear .5s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
}
@keyframes name-appear {
  0%   { opacity: 0; transform: translateY(10px) scale(.8); }
  100% { opacity: 1; transform: none; }
}
.mint-design-house {
  font-size: 7px; letter-spacing: 3px;
  animation: fade-in .6s ease .2s both;
}
.mint-design-house.fire  { color: var(--fire);  text-shadow: 0 0 10px rgba(232,112,64,.6); }
.mint-design-house.water { color: var(--water); text-shadow: 0 0 10px rgba(64,160,232,.6); }
.mint-design-house.earth { color: var(--earth); text-shadow: 0 0 10px rgba(96,192,64,.6); }

/* Supply bar */
.mint-supply-wrap {
  width: 100%; display: flex; flex-direction: column; gap: 6px;
}
.mint-supply-track {
  width: 100%; height: 8px;
  background: var(--bg3); border: 2px solid var(--border);
}
.mint-supply-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  transition: width .8s ease;
}
.mint-supply-label {
  font-size: 8px; color: var(--text-dim); text-align: right;
}
.mint-supply-text { font-size: 7px; color: var(--text-dim); margin-left: 6px; letter-spacing: 2px; }

/* Cost card */
.mint-cost-card { width: 100%; }

/* Payment section */
.mint-pay-section {
  width: 100%;
  background: var(--bg2);
  border: 3px solid var(--gold-dim);
  box-shadow: 0 0 16px rgba(212,168,64,.1), 4px 4px 0 rgba(0,0,0,.6);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  animation: fade-in .3s ease;
}
.mint-pay-label {
  font-size: 6px; color: var(--text-dim); letter-spacing: 3px;
}
.mint-pay-amount {
  font-size: 14px; color: var(--gold);
  text-shadow: 2px 2px 0 rgba(0,0,0,.8);
}
.mint-pay-addr {
  font-size: 7px; color: var(--text-dim);
  word-break: break-all; line-height: 1.6;
  background: var(--bg3); padding: 8px; width: 100%;
  border: 1px solid var(--border);
}

/* Progress */
.mint-progress {
  width: 100%;
  background: var(--bg2);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  animation: fade-in .3s ease;
}
.mint-progress-icon {
  font-size: 28px; font-family: sans-serif;
  animation: progress-spin 2s linear infinite;
}
@keyframes progress-spin {
  0%,100% { transform: rotate(-10deg) scale(1); }
  50%      { transform: rotate(10deg) scale(1.1); }
}
.mint-progress-text {
  font-size: 7px; color: var(--text-dim); letter-spacing: 1px; text-align: center;
}
.mint-progress-bar {
  width: 100%; height: 6px;
  background: var(--bg3); border: 1px solid var(--border);
  overflow: hidden;
}
.mint-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  animation: progress-crawl 2.5s ease-in-out infinite;
}
@keyframes progress-crawl {
  0%   { width: 5%;  margin-left: 0%; }
  50%  { width: 40%; margin-left: 30%; }
  100% { width: 5%;  margin-left: 95%; }
}

/* Mempool tx link in mint progress */
.mint-tx-link {
  font-size: 7px;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 2px;
  border-bottom: 1px solid var(--gold-dim);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
  animation: fade-in .4s ease;
}
.mint-tx-link:hover { color: #fff; border-color: #fff; }
.mint-tx-link.hidden { display: none !important; }

/* ── Season Reward Claim Banner ─────────────────────────────────────────── */
.claim-banner {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: linear-gradient(90deg, #2a1a00, #1a2a00, #2a1a00);
  border-bottom: 2px solid #d4a840;
  padding: 12px 16px;
  flex-direction: column;
  gap: 10px;
  animation: claim-slide-down 0.4s ease;
}
.claim-banner.visible { display: flex; }
.claim-banner-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #d4a840;
  text-align: center;
  letter-spacing: 1px;
}
.claim-banner-breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.claim-row {
  display: flex;
  justify-content: space-between;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--text-dim);
}
.claim-row span:last-child { color: var(--text); }
.claim-fee span:last-child { color: var(--red); }
.claim-net {
  border-top: 1px solid var(--border);
  padding-top: 4px;
  margin-top: 2px;
}
.claim-net span { color: #fff !important; font-size: 8px; }
.claim-net span:last-child { color: #d4a840 !important; }
.claim-banner-btn {
  font-size: 8px !important;
  padding: 10px 14px !important;
  width: 100%;
}
@keyframes claim-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
   MODE SELECT SCREEN
══════════════════════════════════════════════════════════ */
#screen-mode { gap: 20px; }

.mode-cards {
  display: flex; flex-direction: column; gap: 12px;
  width: 100%;
}

.mode-card {
  background: var(--bg2);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
  padding: 20px 16px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
  transition: border-color .2s, transform .1s, box-shadow .2s;
  position: relative;
}
.mode-card:not(.mode-locked):hover {
  border-color: var(--gold-dim);
  transform: translateY(-2px);
  box-shadow: 4px 6px 0 rgba(0,0,0,.6), 0 0 20px rgba(212,168,64,.15);
}
.mode-card:not(.mode-locked):active { transform: translateY(2px); box-shadow: none; }

.mode-locked {
  opacity: .55;
  cursor: not-allowed;
}

.mode-card-icon {
  font-size: 28px; font-family: sans-serif;
  margin-bottom: 2px;
}
.mode-card-name {
  font-size: 13px; color: var(--gold);
  text-shadow: 2px 2px 0 rgba(0,0,0,.8);
}
.mode-locked .mode-card-name { color: var(--text-dim); text-shadow: none; }

.mode-card-desc {
  font-size: 7px; color: var(--text-dim); line-height: 1.9;
  letter-spacing: 1px;
}
.mode-card-stakes {
  font-size: 7px; color: var(--text);
  background: var(--bg3); border: 1px solid var(--border);
  padding: 5px 10px; margin-top: 4px;
  letter-spacing: 1px;
}
.mode-card-badge {
  font-size: 6px; padding: 4px 10px;
  letter-spacing: 2px; margin-top: 4px;
}
.mode-card-badge.available {
  background: rgba(58,170,96,.12);
  border: 2px solid var(--green);
  color: var(--green);
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%,100% { box-shadow: none; }
  50%      { box-shadow: 0 0 12px rgba(58,170,96,.35); }
}
.mode-card-badge.coming-soon {
  background: rgba(106,96,32,.1);
  border: 2px solid var(--gold-dim);
  color: var(--gold-dim);
}

/* ══════════════════════════════════════════════════════════
   1V1 DUEL SCREEN
══════════════════════════════════════════════════════════ */
#screen-1v1 {
  gap: 12px;
  padding-top: 12px;
  align-items: stretch;
}

/* HUD */
.duel-hud {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg2);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
  padding: 8px 10px;
}
.duel-hud-streak {
  flex: 1;
  font-size: 7px; letter-spacing: 1px;
  min-height: 20px;
}
.duel-hud-wallet {
  font-size: 6px; color: var(--gold);
  background: var(--bg3); border: 1px solid var(--gold-dim);
  padding: 4px 7px;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Streak badges */
.streak-hot      { color: var(--fire);   font-size: 7px; }
.streak-master   { color: var(--gold);   font-size: 7px; }
.streak-legendary{ color: #e040fb;       font-size: 7px; text-shadow: 0 0 8px rgba(224,64,251,.5); }
.streak-normal   { color: var(--text-dim); font-size: 7px; }

/* House Wars */
.house-wars {
  width: 100%;
  background: var(--bg2);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
  padding: 12px;
}
.house-wars-title {
  font-size: 6px; color: var(--text-dim); letter-spacing: 2px;
  text-align: center; margin-bottom: 10px;
}
.house-wars-bars { display: flex; flex-direction: column; gap: 7px; }

.hw-row { display: flex; align-items: center; gap: 8px; }
.hw-banner {
  width: 22px; height: 30px;
  image-rendering: pixelated; image-rendering: crisp-edges;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.6));
}
.hw-track {
  flex: 1; height: 7px;
  background: var(--bg3); border: 1px solid var(--border);
}
.hw-fill { height: 100%; transition: width .8s ease; width: 0%; }
.hw-count { font-size: 7px; color: var(--text-dim); width: 28px; text-align: right; }

.fire-text  { color: var(--fire); }
.water-text { color: var(--water); }
.earth-text { color: var(--earth); }

/* Rune of the Day */
.rod-banner {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  background: var(--bg2);
  border: 3px solid var(--gold-dim);
  box-shadow: 0 0 14px rgba(212,168,64,.12), 4px 4px 0 rgba(0,0,0,.6);
  padding: 10px 14px;
}
.rod-icon {
  font-size: 22px; font-family: sans-serif;
  flex-shrink: 0;
  animation: rod-spin 6s linear infinite;
}
@keyframes rod-spin {
  0%,100% { transform: rotate(-6deg) scale(1);   }
  50%      { transform: rotate(6deg)  scale(1.15); }
}
.rod-info { flex: 1; }
.rod-title {
  font-size: 6px; color: var(--gold); letter-spacing: 2px; margin-bottom: 3px;
}
.rod-sub {
  font-size: 6px; color: var(--text-dim); letter-spacing: 1px; line-height: 1.7;
}
.rod-sub strong { color: var(--text); }

/* Waiting overlay (inside duel flow, not position:fixed) */
.duel-waiting {
  width: 100%;
  background: var(--bg2);
  border: 3px solid var(--gold-dim);
  box-shadow: 0 0 20px rgba(212,168,64,.1), 4px 4px 0 rgba(0,0,0,.6);
  padding: 24px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
  animation: fade-in .3s ease;
}
.duel-sealed-icon {
  font-size: 32px; font-family: sans-serif;
  width: 60px; height: 60px;
  background: var(--bg3); border: 3px solid var(--gold-dim);
  display: flex; align-items: center; justify-content: center;
  animation: sealed-pulse 1.5s ease-in-out infinite;
}
@keyframes sealed-pulse {
  0%,100% { border-color: var(--gold-dim); box-shadow: none; }
  50%      { border-color: var(--gold); box-shadow: 0 0 16px rgba(212,168,64,.4); }
}
.duel-wait-title {
  font-size: 9px; color: var(--gold); letter-spacing: 2px;
}
.duel-wait-sub {
  font-size: 7px; color: var(--text-dim); letter-spacing: 1px;
}
.duel-dots {
  display: flex; gap: 6px;
}
.duel-dots span {
  width: 8px; height: 8px;
  background: var(--gold-dim);
  animation: dot-blink 1.2s ease-in-out infinite;
}
.duel-dots span:nth-child(2) { animation-delay: .2s; }
.duel-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dot-blink {
  0%,80%,100% { background: var(--gold-dim); transform: scale(1); }
  40%          { background: var(--gold);     transform: scale(1.3); }
}

/* Battle History */
.bh-panel {
  width: 100%;
  background: var(--bg2);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
  padding: 12px;
}
.bh-title {
  font-size: 6px; color: var(--text-dim); letter-spacing: 2px;
  text-align: center; margin-bottom: 10px;
}
.bh-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 7px;
}
.bh-row:last-child { border-bottom: none; }
.bh-result { width: 40px; font-size: 7px; }
.bh-win  .bh-result { color: var(--green); }
.bh-loss .bh-result { color: var(--red); }
.bh-runes { flex: 1; color: var(--text-dim); text-align: center; font-family: sans-serif; font-size: 14px; letter-spacing: 4px; }
.bh-prize { font-size: 7px; text-align: right; }
.bh-win  .bh-prize { color: var(--gold); }
.bh-loss .bh-prize { color: var(--red-dim); }

/* Duel footer */
.duel-footer {
  display: flex; gap: 8px; width: 100%;
  justify-content: space-between;
  margin-top: 4px;
}
.duel-footer .px-btn-sm { flex: 1; }

.revenge-btn {
  border-color: var(--fire) !important;
  color: var(--fire) !important;
  animation: revenge-glow 1.5s ease-in-out infinite;
}
@keyframes revenge-glow {
  0%,100% { box-shadow: 2px 2px 0 rgba(0,0,0,.5); }
  50%      { box-shadow: 2px 2px 0 rgba(0,0,0,.5), 0 0 10px rgba(232,112,64,.4); }
}

/* Unknown opponent silhouette overlay */
.opponent-unknown {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7,6,15,.7);
  font-size: 32px; font-family: sans-serif;
  color: var(--gold-dim);
  animation: unknown-breathe 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
.opponent-unknown.hidden { display: none !important; }
@keyframes unknown-breathe {
  0%,100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

/* Rune button select flash */
@keyframes rune-select-flash {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.12) translateY(-3px); }
  65%  { transform: scale(1.06) translateY(-1px); }
  100% { transform: scale(1); }
}
.rune-btn.rune-just-selected { animation: rune-select-flash .35s ease-out; }

/* ══════════════════════════════════════════════════════════
   BATTLE VFX — VISUAL OVERHAUL
══════════════════════════════════════════════════════════ */

/* ── Fighter entrance animations ──────────────────────────────────────────── */
@keyframes enter-from-left {
  0%   { transform: translateX(-160px) scale(.75); opacity: 0; }
  60%  { transform: translateX(10px) scale(1.06); opacity: 1; }
  80%  { transform: translateX(-4px) scale(.98); }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes enter-from-right {
  0%   { transform: translateX(160px) scale(.75); opacity: 0; }
  60%  { transform: translateX(-10px) scale(1.06); opacity: 1; }
  80%  { transform: translateX(4px) scale(.98); }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}
.fighter.entering-left  {
  animation: enter-from-left  .65s cubic-bezier(.22,1,.36,1) forwards;
}
.fighter.entering-right {
  opacity: 0;
  animation: enter-from-right .65s cubic-bezier(.22,1,.36,1) .18s forwards;
}

@keyframes fighter-purr {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.06) translateY(-2px); }
  60%  { transform: scale(1.03) translateY(0); }
  100% { transform: scale(1); }
}
.fighter-purring { animation: fighter-purr 0.45s ease-out forwards; }

@keyframes float-up {
  0%   { transform: translateY(0) scale(1);    opacity: 1; }
  80%  { transform: translateY(-36px) scale(1.2); opacity: 1; }
  100% { transform: translateY(-48px) scale(0.8); opacity: 0; }
}
.floating-emoji {
  position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%);
  font-size: 18px; pointer-events: none; z-index: 20;
  animation: float-up 0.9s ease-out forwards;
}

@keyframes fighter-hiss {
  0%   { transform: scale(1)    rotate(0deg)   translateX(0); }
  12%  { transform: scale(1.14) rotate(-3deg)  translateX(-5px); }
  25%  { transform: scale(1.12) rotate(3deg)   translateX(5px); }
  40%  { transform: scale(1.08) rotate(-2deg)  translateX(-3px); }
  55%  { transform: scale(1.05) rotate(2deg)   translateX(3px); }
  70%  { transform: scale(1.02) rotate(-1deg)  translateX(-1px); }
  100% { transform: scale(1)    rotate(0deg)   translateX(0); }
}
.fighter-hissing {
  animation: fighter-hiss 0.55s ease-out forwards;
  cursor: pointer;
}
.fighter-left { cursor: pointer; }

/* ── Arena screen shake ──────────────────────────────────────────────────── */
@keyframes arena-shake {
  0%,100% { transform: translate(0,0); }
  10%     { transform: translate(-5px,-2px); }
  20%     { transform: translate(5px,3px); }
  30%     { transform: translate(-6px,1px); }
  40%     { transform: translate(6px,-2px); }
  50%     { transform: translate(-4px,3px); }
  60%     { transform: translate(4px,-3px); }
  70%     { transform: translate(-2px,2px); }
  80%     { transform: translate(2px,-2px); }
}
.arena-shaking { animation: arena-shake .45s ease-out; }

/* ── Clash VFX elemental theming ─────────────────────────────────────────── */
.clash-vfx.clash-fire  .r2 { border-color: var(--fire); }
.clash-vfx.clash-water .r2 { border-color: var(--water); }
.clash-vfx.clash-earth .r2 { border-color: var(--earth); }
.clash-vfx.clash-fire  .r1 { border-color: rgba(232,112,64,.6); }
.clash-vfx.clash-water .r1 { border-color: rgba(64,160,232,.6); }
.clash-vfx.clash-earth .r1 { border-color: rgba(96,192,64,.6); }

/* ── Result text dramatic pop ────────────────────────────────────────────── */
@keyframes result-pop {
  0%   { transform: scale(.1) rotate(-10deg); opacity: 0; }
  55%  { transform: scale(1.3) rotate(3deg);  opacity: 1; }
  75%  { transform: scale(.93) rotate(-1deg); }
  100% { transform: scale(1) rotate(0);       opacity: 1; }
}
.arena-result:not(.hidden) .result-text {
  animation: result-pop .55s cubic-bezier(.22,1,.36,1) forwards;
}

/* ── Victory confetti canvas ─────────────────────────────────────────────── */
.confetti-canvas {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 15;
}

/* ── Defeat vignette flash ───────────────────────────────────────────────── */
@keyframes defeat-flash {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  55%  { opacity: .7; }
  100% { opacity: 0; }
}
.defeat-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 25%, rgba(192,57,43,.6) 100%);
  pointer-events: none; z-index: 19;
  animation: defeat-flash 1.6s ease forwards;
}

/* ── Waiting screen rune sealed icon ────────────────────────────────────── */
.duel-sealed-icon.sealed-fire  { border-color: var(--fire);  color: var(--fire);  }
.duel-sealed-icon.sealed-water { border-color: var(--water); color: var(--water); }
.duel-sealed-icon.sealed-earth { border-color: var(--earth); color: var(--earth); }

/* ── 1v1 win claim banner (result panel at bottom of screen) ─────────────── */
.duel-claim-banner {
  width: 100%;
  background: linear-gradient(135deg, rgba(32,22,4,.95), rgba(16,28,4,.95));
  border: 3px solid var(--gold);
  box-shadow: 0 0 24px rgba(212,168,64,.35), 4px 4px 0 rgba(0,0,0,.7);
  padding: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
  animation: fade-in .4s ease, claim-pulse 2s ease-in-out 1s infinite;
}
@keyframes claim-pulse {
  0%,100% { box-shadow: 0 0 24px rgba(212,168,64,.35), 4px 4px 0 rgba(0,0,0,.7); }
  50%      { box-shadow: 0 0 48px rgba(212,168,64,.65), 4px 4px 0 rgba(0,0,0,.7); }
}
.duel-claim-title {
  font-size: 10px; color: var(--gold);
  text-shadow: 0 0 16px rgba(212,168,64,.5), 2px 2px 0 rgba(0,0,0,.8);
  letter-spacing: 2px;
}
.duel-claim-prize {
  font-size: 14px; color: #fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,.8);
}
.duel-claim-prize span { color: var(--gold); }
.duel-claim-sub {
  font-size: 6px; color: var(--text-dim); letter-spacing: 1px;
}

/* ── Phase 4: Profile & Badges ───────────────────────────────────────────── */

.prof-hud {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}

/* Fighter card */
.prof-fighter {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--bg2); border: 2px solid var(--border);
  padding: 14px; margin-bottom: 10px;
}
.prof-fighter-img-wrap {
  width: 110px; height: 110px; flex-shrink: 0;
  border: 2px solid var(--border);
  background: var(--bg3); overflow: hidden;
}
.prof-fighter-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.prof-fighter-info { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; justify-content: center; }
.prof-fighter-name { font-size: 9px; color: var(--text); letter-spacing: 1px; }
.prof-fighter-house { font-size: 7px; letter-spacing: 1px; }
.prof-fighter-house.fire  { color: var(--fire);  }
.prof-fighter-house.water { color: var(--water); }
.prof-fighter-house.earth { color: var(--earth); }
.prof-fighter-inscription {
  font-size: 5px; color: var(--text-dim); letter-spacing: 1px;
  text-decoration: none; word-break: break-all;
}
.prof-fighter-inscription:hover { color: var(--gold-dim); }

/* Traits grid */
.prof-traits-section { margin-bottom: 12px; }
.prof-traits-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;
}
.prof-trait-cell {
  background: var(--bg2); border: 1px solid var(--border);
  padding: 7px 8px; display: flex; flex-direction: column; gap: 3px;
}
.prof-trait-type {
  font-size: 5px; color: var(--text-dim); letter-spacing: 1px;
}
.prof-trait-val {
  font-size: 7px; color: var(--text); letter-spacing: 1px;
}

/* Stats row */
.prof-stats {
  display: flex; gap: 4px; justify-content: space-between;
  margin-bottom: 14px;
}
.prof-stat {
  flex: 1; background: var(--bg2); border: 1px solid var(--border);
  padding: 8px 4px; text-align: center; display: flex; flex-direction: column; gap: 4px;
}
.prof-stat-val { font-size: 12px; color: var(--gold); letter-spacing: 1px; }
.prof-stat-lbl { font-size: 4px; color: var(--text-dim); letter-spacing: 1px; }

/* Active tournaments */
.prof-active-tnmt { margin-bottom: 14px; }
.prof-section-title {
  font-size: 6px; color: var(--text-dim); letter-spacing: 2px;
  border-bottom: 1px solid var(--border); padding-bottom: 5px; margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center;
}
.prof-badge-count { color: var(--gold-dim); }
.prof-tnmt-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--bg2); border: 1px solid var(--border);
  padding: 7px 10px; margin-bottom: 4px; cursor: pointer;
  transition: border-color .12s;
}
.prof-tnmt-row:hover { border-color: var(--gold-dim); }
.prof-tnmt-name { font-size: 6px; color: var(--text); letter-spacing: 1px; }

/* Badges */
.prof-badges { width: 100%; }
.prof-cat-tabs {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px;
}
.prof-cat-tab {
  font-family: var(--font); font-size: 5px; letter-spacing: 1px;
  padding: 5px 8px; background: var(--bg2); border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer; transition: border-color .12s, color .12s;
}
.prof-cat-tab:hover { border-color: var(--gold-dim); color: var(--text); }
.prof-cat-active { border-color: var(--gold); color: var(--gold); }

/* Badge grid — 5 columns */
.prof-badge-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  margin-bottom: 12px;
}
.prof-badge-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--bg2); border: 2px solid var(--border);
  cursor: pointer; position: relative; transition: border-color .12s, box-shadow .12s;
}
.prof-badge-cell:hover { border-color: var(--gold-dim); }
.prof-badge-earned {
  border-color: var(--gold-dim);
  box-shadow: 0 0 8px rgba(212,168,64,.2), inset 0 0 6px rgba(212,168,64,.06);
}
.prof-badge-earned:hover { border-color: var(--gold); box-shadow: 0 0 14px rgba(212,168,64,.35); }
.prof-badge-locked { opacity: .35; }
.prof-badge-icon { font-size: 20px; line-height: 1; }
.prof-badge-lock {
  position: absolute; bottom: 2px; right: 3px; font-size: 8px; opacity: .6;
}

/* Badge detail panel */
.prof-badge-detail {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg2); border: 1px solid var(--border);
  padding: 10px 12px; margin-top: 4px;
}
.prof-badge-detail.prof-bd-earned { border-color: var(--gold-dim); }
.prof-badge-detail.prof-bd-locked { opacity: .7; }
.prof-bd-icon { font-size: 24px; flex-shrink: 0; }
.prof-bd-name { font-size: 7px; color: var(--text); letter-spacing: 1px; margin-bottom: 4px; }
.prof-bd-desc { font-size: 5px; color: var(--text-dim); letter-spacing: 1px; line-height: 1.8; }

/* ── Phase 3: Tournament ─────────────────────────────────────────────────── */

.tnmt-hud {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}

/* Tournament list */
.tnmt-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.tnmt-loading, .tnmt-empty { font-size: 6px; color: var(--text-dim); text-align: center; padding: 20px; letter-spacing: 1px; }
.tnmt-card {
  background: var(--bg2); border: 2px solid var(--border); padding: 12px 14px;
  cursor: pointer; transition: border-color .15s;
}
.tnmt-card:hover { border-color: var(--gold-dim); }
.tnmt-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.tnmt-card-name { font-size: 8px; color: var(--text); letter-spacing: 1px; }
.tnmt-card-meta { font-size: 6px; color: var(--text-dim); letter-spacing: 1px; display: flex; gap: 10px; flex-wrap: wrap; }
.tnmt-card-prize { color: var(--gold-dim); }

/* Status badges */
.tnmt-badge { font-size: 5px; letter-spacing: 1px; padding: 3px 6px; border: 1px solid; }
.tnmt-status-badge { font-size: 5px; letter-spacing: 1px; padding: 3px 6px; border: 1px solid; }
.tnmt-badge-open    { border-color: var(--green); color: var(--green); }
.tnmt-badge-active  { border-color: var(--gold);  color: var(--gold);  }
.tnmt-badge-finished{ border-color: var(--text-dim); color: var(--text-dim); }

/* Detail nav */
.tnmt-detail-nav {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.tnmt-detail-name { font-size: 9px; color: var(--text); letter-spacing: 1px; flex: 1; }

/* Meta row */
.tnmt-meta-row {
  font-size: 6px; color: var(--text-dim); letter-spacing: 1px;
  display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap;
}
.tnmt-meta-sep { color: var(--border); }

/* Join */
.tnmt-join-btn { width: 100%; margin-bottom: 12px; }
.tnmt-registered {
  font-size: 6px; color: var(--green); letter-spacing: 2px; text-align: center;
  border: 1px solid var(--green); padding: 8px; margin-bottom: 12px;
}
.tnmt-full { font-size: 6px; color: var(--red); letter-spacing: 1px; text-align: center; padding: 8px; }

/* My match card */
.tnmt-my-match {
  width: 100%;
  background: linear-gradient(135deg, rgba(20,14,4,.95), rgba(8,18,8,.95));
  border: 2px solid var(--gold); padding: 14px;
  margin-bottom: 16px;
  box-shadow: 0 0 18px rgba(212,168,64,.2), 4px 4px 0 rgba(0,0,0,.6);
}
.tnmt-mm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.tnmt-mm-title { font-size: 7px; color: var(--gold); letter-spacing: 2px; }
.tnmt-mm-round { font-size: 5px; color: var(--text-dim); letter-spacing: 1px; }
.tnmt-mm-vs { font-size: 9px; color: var(--text); letter-spacing: 1px; margin-bottom: 8px; }
.tnmt-mm-deadline {
  display: flex; gap: 8px; align-items: center; margin-bottom: 12px;
}
.tnmt-mm-dl-label { font-size: 5px; color: var(--text-dim); letter-spacing: 1px; }
.tnmt-mm-dl-value { font-size: 10px; color: var(--gold); letter-spacing: 2px; font-family: var(--font); }

/* Submit btn */
.tnmt-submit-btn { width: 100%; margin-top: 12px; }
.tnmt-submit-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Submitted state */
.tnmt-submitted {
  text-align: center; padding: 16px; border: 1px solid var(--green);
  background: rgba(58,170,96,.08);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.tnmt-sub-icon { font-size: 20px; color: var(--green); }
.tnmt-sub-text { font-size: 7px; color: var(--green); letter-spacing: 2px; }
.tnmt-sub-hint { font-size: 5px; color: var(--text-dim); letter-spacing: 1px; }

/* Match result */
.tnmt-match-result { width: 100%; margin-bottom: 16px; text-align: center; }
.tnmt-mr-outcome { font-size: 9px; letter-spacing: 1px; padding: 10px; margin-bottom: 8px; }
.tnmt-victory   { color: var(--gold); border: 2px solid var(--gold); box-shadow: 0 0 14px rgba(212,168,64,.2); }
.tnmt-eliminated{ color: var(--red);  border: 2px solid var(--red-dim); }
.tnmt-mr-next { font-size: 5px; color: var(--text-dim); letter-spacing: 1px; margin-top: 8px; }

/* Bracket */
.tnmt-bracket { width: 100%; }
.tnmt-bracket-title {
  font-size: 6px; color: var(--text-dim); letter-spacing: 2px;
  border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 10px;
}
.tnmt-round-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.tnmt-tab {
  font-family: var(--font); font-size: 6px; letter-spacing: 1px;
  padding: 5px 8px; background: var(--bg2); border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer; transition: border-color .12s, color .12s;
}
.tnmt-tab:hover { border-color: var(--gold-dim); color: var(--text); }
.tnmt-tab-active { border-color: var(--gold); color: var(--gold); }
.tnmt-round-label { font-size: 6px; color: var(--text-dim); letter-spacing: 1px; margin-bottom: 8px; }

/* Match rows */
.tnmt-match-row {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg2); border: 1px solid var(--border);
  padding: 6px 8px; margin-bottom: 3px; font-size: 6px; letter-spacing: 1px;
}
.tnmt-match-mine { border-color: var(--gold-dim); background: rgba(212,168,64,.06); }
.tnmt-match-won  { border-color: var(--green); background: rgba(58,170,96,.06); }
.tnmt-match-lost { border-color: var(--border); opacity: .6; }
.tnmt-mr-p1, .tnmt-mr-p2 { flex: 1; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tnmt-mr-p1 { text-align: right; }
.tnmt-mr-p2 { text-align: left; }
.tnmt-mr-me { color: var(--text); font-size: 6px; }
.tnmt-mr-vs { font-size: 5px; color: var(--border); flex-shrink: 0; }
.tnmt-ms-resolved { color: var(--text-dim); font-size: 5px; white-space: nowrap; flex-shrink: 0; }
.tnmt-ms-open     { color: var(--gold); font-size: 5px; flex-shrink: 0; }
.tnmt-ms-pending  { color: var(--border); font-size: 5px; flex-shrink: 0; }
.tnmt-side-chip {
  font-size: 5px; color: var(--text-dim); background: var(--bg3);
  border: 1px solid var(--border); padding: 1px 4px; flex-shrink: 0;
}

/* ── Phase 2: 3-Attack Sequence Builder ──────────────────────────────────── */
.seq-builder {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-top: 8px;
}
.seq-builder-title {
  font-size: 7px; color: var(--gold); letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(212,168,64,.4), 2px 2px 0 rgba(0,0,0,.8);
}
.seq-builder-hint {
  font-size: 6px; color: var(--text-dim); letter-spacing: 1px; text-align: center;
}

/* Slot row */
.seq-slots {
  display: flex; align-items: center; gap: 10px;
  width: 100%; justify-content: center;
}
.seq-slot-arrow {
  font-size: 14px; color: var(--text-dim); margin-top: -4px;
}
.seq-slot {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 78px;
  background: var(--bg2);
  border: 2px solid var(--border);
  padding: 8px 6px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  position: relative;
}
.seq-slot:hover { border-color: var(--gold-dim); }
.seq-slot-active {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(212,168,64,.35), inset 0 0 8px rgba(212,168,64,.08);
}
.seq-slot-fire   { border-color: var(--fire);  box-shadow: 0 0 10px rgba(232,112,64,.3); }
.seq-slot-water  { border-color: var(--water); box-shadow: 0 0 10px rgba(64,160,232,.3); }
.seq-slot-earth  { border-color: var(--earth); box-shadow: 0 0 10px rgba(96,192,64,.3); }
.seq-slot-rd {
  font-size: 5px; color: var(--text-dim); letter-spacing: 1px;
}
.seq-slot-icon {
  font-size: 24px; line-height: 1;
  min-height: 30px; display: flex; align-items: center;
}
.seq-slot-name {
  font-size: 5px; letter-spacing: 1px;
  color: var(--text-dim);
}
.seq-slot-fire   .seq-slot-name { color: var(--fire); }
.seq-slot-water  .seq-slot-name { color: var(--water); }
.seq-slot-earth  .seq-slot-name { color: var(--earth); }

/* Slot badges (Poison / Potion icons overlaid) */
.seq-slot-badge {
  position: absolute; top: -6px; right: -6px;
  font-size: 12px; line-height: 1;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.9));
}

/* Active-round picker label */
.seq-pick-label {
  font-size: 6px; color: var(--text-dim); letter-spacing: 1px;
}
.seq-pick-label span { color: var(--gold); }

/* Rune choice row (reuses existing .rune-row + .rune-btn styles) */

/* Specials section (Poison / Potion) */
.seq-specials {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%;
}

/* Special row layout */
.seq-special {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg2); border: 1px solid var(--border); padding: 8px 10px;
}
.seq-special-left {
  display: flex; align-items: center; gap: 8px;
}
.seq-special-icon { font-size: 16px; }
.seq-special-name {
  font-size: 6px; color: var(--text); letter-spacing: 1px;
}
.seq-special-desc {
  font-size: 5px; color: var(--text-dim); letter-spacing: 1px; margin-top: 2px;
}

/* Pill buttons */
.seq-pills {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.seq-pill {
  font-family: var(--font);
  font-size: 6px; letter-spacing: 1px;
  padding: 5px 8px;
  background: var(--bg3);
  border: 2px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color .12s, color .12s, box-shadow .12s;
}
.seq-pill:hover { border-color: var(--text-dim); color: var(--text); }
.seq-pill-off { border-color: var(--text-dim); color: var(--text); }
.seq-pill-active { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 8px rgba(212,168,64,.3); }
#poisonPills1v1 .seq-pill-active {
  border-color: var(--poison); color: var(--poison);
  box-shadow: 0 0 8px rgba(160,64,232,.35);
}
#potionPills1v1 .seq-pill-active {
  border-color: #40e8c0; color: #40e8c0;
  box-shadow: 0 0 8px rgba(64,232,192,.35);
}

/* ── Phase 2: Waiting overlay sealed sequence ─────────────────────────────── */
.duel-sealed-seq {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.duel-sealed-seq .duel-sealed-icon {
  width: 44px; height: 44px;
  background: var(--bg2);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  animation: none;
}
.duel-sealed-sep {
  font-size: 14px; color: var(--text-dim);
}

/* ── Phase 2: Round-by-round breakdown in result screen ───────────────────── */
.rs-rounds {
  width: 100%;
  display: flex; flex-direction: column; gap: 4px;
  margin: 6px 0;
}
.rs-round {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 6px 10px;
  font-size: 8px;
}
.rsr-label {
  color: var(--text-dim); font-size: 6px; width: 20px; flex-shrink: 0;
}
.rsr-you  { flex: 1; text-align: right; color: var(--text); }
.rsr-opp  { flex: 1; text-align: left;  color: var(--text-dim); }
.rsr-vs   { color: var(--text-dim); font-size: 6px; }
.rsr-result {
  width: 32px; text-align: right; font-size: 6px; font-weight: bold;
}
.rsr-win  { color: var(--green); }
.rsr-loss { color: var(--red); }
.rsr-tie  { color: var(--gold-dim); }
.rsr-badge  { display: inline-block; margin-left: 3px; font-size: 8px; vertical-align: middle; }
.rsr-poison { color: var(--poison); }
.rsr-potion { color: #2ecc71; }

/* ── Phase 2: Battle history score chip ──────────────────────────────────── */
.bh-score {
  font-size: 6px; color: var(--text-dim);
  margin-left: 4px;
}

/* ── Tournament bracket tree ─────────────────────────────────────────────── */
.tnmt-bracket-scroll {
  overflow-x: auto;
  overflow-y: auto;
  margin: 0 -16px;
  padding: 0 8px 16px;
  -webkit-overflow-scrolling: touch;
}

.bracket-tree {
  display: flex;
  align-items: stretch;
  width: max-content;
  padding: 16px 8px;
  gap: 0;
}

/* Column */
.bcol {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
}
.bcol-L { min-width: 168px; }
.bcol-R { min-width: 168px; }

/* Grand Final column */
.bcol-GF {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  min-width: 188px;
  position: relative;
}
.bc-gf-wrap { text-align: center; }
.bc-gf-label {
  font-size: 6px; color: var(--gold); letter-spacing: 2px;
  margin-bottom: 8px; text-align: center;
}

/* Pair — groups 2 bc-items and draws connecting bracket lines */
.bc-pair {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

/* Item — wraps one match card + draws the horizontal connector */
.bc-item {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
}

/* LEFT side: connectors go right */
.bcol-L .bc-item { padding-right: 18px; }
.bcol-L .bc-item::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  width: 18px; height: 0;
  border-top: 2px solid var(--border);
}
.bcol-L .bc-pair:not(.bc-single)::after {
  content: '';
  position: absolute;
  right: 0; top: 25%; bottom: 25%;
  border-right: 2px solid var(--border);
}

/* RIGHT side: connectors go left */
.bcol-R .bc-item { padding-left: 18px; }
.bcol-R .bc-item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 18px; height: 0;
  border-top: 2px solid var(--border);
}
.bcol-R .bc-pair:not(.bc-single)::before {
  content: '';
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  border-left: 2px solid var(--border);
}

/* Match card */
.bm-card {
  background: var(--bg2);
  border: 2px solid var(--border);
  width: 148px;
  overflow: hidden;
  flex-shrink: 0;
}
.bm-card.bm-live  { border-color: var(--gold); }
.bm-card.bm-done  { border-color: rgba(255,255,255,.12); }
.bm-card.bm-mine  { box-shadow: 0 0 8px rgba(255,180,0,.25); }
.bm-card.bm-pending { opacity: .5; }

.bm-live-bar { height: 3px; background: var(--gold); }

/* Player row */
.bm-p {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 6px; font-size: 6px; color: var(--text-dim);
  border-bottom: 1px solid rgba(255,255,255,.05);
  min-height: 36px;
}
.bm-p:last-child { border-bottom: none; }
.bm-p.bm-win  { color: var(--gold); }
.bm-p.bm-loss { opacity: .4; }
.bm-p.bm-me   { background: rgba(255,180,0,.07); }

/* NFT avatar */
.bm-av {
  width: 26px; height: 26px;
  object-fit: cover; image-rendering: pixelated;
  flex-shrink: 0;
}
.bm-av-empty {
  width: 26px; height: 26px;
  background: var(--bg3); border: 1px solid var(--border);
  flex-shrink: 0;
}

.bm-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-crown { color: var(--gold); font-size: 9px; flex-shrink: 0; margin-left: 2px; }
.bm-tbd { opacity: .35; }

/* ── Knocked-out / Revival UI ───────────────────────────────── */
.tnmt-ko-area {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 16px;
  background: rgba(180,0,0,.08);
  border: 1px solid rgba(200,60,60,.3);
  border-radius: 4px;
  text-align: center;
}
.tnmt-ko-skull { font-size: 28px; line-height: 1; }
.tnmt-ko-title {
  font-family: var(--font-pixel); font-size: 11px;
  color: #e04040; letter-spacing: 2px;
}
.tnmt-ko-sub {
  font-size: 9px; color: var(--text-dim); line-height: 1.5; max-width: 260px;
}
.tnmt-ko-sub strong { color: var(--text); }
.tnmt-revive-btn {
  margin-top: 4px;
  background: linear-gradient(135deg,#8b0000,#c0392b) !important;
  border-color: #c0392b !important;
  color: #fff !important;
  font-size: 9px !important;
  letter-spacing: 1.5px;
}
.tnmt-revive-btn:hover:not(:disabled) {
  background: linear-gradient(135deg,#a00000,#e04040) !important;
}