/* ═══════════════════════════════════════════════════════════════════════════
   SUMMON ME — 16:9 Dark Fantasy UI
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Core palette — deep void darkness ── */
  --dark:      #020108;
  --panel:     rgba(4,2,12,0.96);
  --panel-lt:  rgba(8,5,20,0.90);
  --glass:     rgba(8,4,20,0.82);

  /* ── Borders ── */
  --border:    rgba(200,167,64,0.22);
  --border-lt: rgba(255,255,255,0.07);
  --border-purp: rgba(160,100,255,0.25);

  /* ── Brand colors ── */
  --gold:      #FFD700;
  --gold-dim:  #C8A740;
  --gold-glow: rgba(255,210,26,0.35);
  --purple:    #7B30C8;
  --purple-dk: #36147A;
  --purple-glow: rgba(140,60,255,0.35);
  --blue-lt:   #338CFF;
  --red:       #8E1A1A;

  /* ── Rarity colors ── */
  --r5:  #FFD700;
  --r4:  #66CCFF;
  --r3:  #C0C0C8;
  --r5-glow: rgba(255,215,0,0.5);
  --r4-glow: rgba(102,204,255,0.4);

  /* ── Elements ── */
  --fire:      #FF5B1A;
  --water:     #338CFF;
  --grass:     #33BF33;
  --light:     #FFF259;
  --dark-elem: #BF5CFF;

  /* ── Typography scale ── */
  --text-xs:  0.65cqw;
  --text-sm:  0.80cqw;
  --text-md:  1.00cqw;
  --text-lg:  1.30cqw;
  --text-xl:  1.80cqw;
  --text-2xl: 2.50cqw;
  --text-3xl: 4.00cqw;

  /* ── Spacing ── */
  --gap-xs: 0.4cqh;
  --gap-sm: 0.7cqh;
  --gap-md: 1.2cqh;

  /* ── Effects ── */
  --shadow-deep:  0 0.5cqh 2cqh rgba(0,0,0,0.8);
  --shadow-glow-gold: 0 0 2cqw rgba(255,210,26,0.3);
  --shadow-glow-purp: 0 0 2cqw rgba(140,60,255,0.35);
  --radius-sm: 0.4cqw;
  --radius-md: 0.7cqw;
  --radius-lg: 1.0cqw;

  /* ── Extended tokens (added v3) ── */
  --modal-bg:      rgba(3,1,10,0.97);
  --modal-border:  rgba(130,70,220,0.30);
  --modal-glow:    0 0 4cqw rgba(80,20,180,0.40);
  --card-bg:       rgba(6,3,18,0.94);
  --border-card:   rgba(255,255,255,0.10);

  --r6:      #FF8C00;
  --r6-glow: rgba(255,140,0,0.55);
  --r3-glow: rgba(192,192,200,0.30);
  --r4-glow: rgba(102,204,255,0.45);
  --r5-glow: rgba(255,215,0,0.55);

  --color-hp:  #FF4444;
  --color-atk: #FF7030;
  --color-def: #4488FF;
  --color-spd: #26EBDA;

  --gap-lg: 2.0cqh;
  --gap-xl: 3.0cqh;

  --dur-fast: 0.12s;
  --dur-med:  0.22s;
  --dur-slow: 0.40s;
  --dur-anim: 0.60s;

  --shadow-card: 0 0.35cqh 1.5cqh rgba(0,0,0,0.65);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  height: 100%; height: 100dvh;
  overflow: hidden;
}

body {
  /* position:fixed locks the page even on iOS Safari bounce-scroll */
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%; height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  background: #000; overflow: hidden;
  font-family: 'Segoe UI', system-ui, sans-serif;
  /* prevent pull-to-refresh and overscroll */
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

/* ── 16:9 container ──────────────────────────────────────────────────────── */
#app {
  position: relative; overflow: hidden;
  background: var(--dark); color: #fff;
  /* CSS fallback — JS fitGame() overrides width/height precisely */
  width:  min(100vw, calc(100dvh * 16 / 9));
  height: min(100dvh, calc(100vw * 9 / 16));
  container-type: size;
  container-name: game;
  border: 1px solid rgba(200,167,64,0.2);
  box-shadow: 0 0 80px rgba(0,0,0,0.95), inset 0 0 40px rgba(0,0,0,0.3);
}

/* Screen fade-in for premium navigation feel */
.screen.active { animation: screenFadeIn .2s ease-out; }
@keyframes screenFadeIn {
  from { opacity: 0; transform: scale(.988); filter: brightness(.6); }
  to   { opacity: 1; transform: scale(1);   filter: brightness(1); }
}

/* Vignette on all screens */
.screen.active::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 95% 85% at 50% 50%, transparent 50%, rgba(0,0,0,.65) 100%);
}

.screen {
  display: none; position: absolute; inset: 0; flex-direction: column;
}
.screen.active { display: flex; }

.screen-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; z-index: 0;
  image-rendering: auto;
  filter: contrast(1.08) saturate(1.1);
}

/* Grain overlay on backgrounds to mask low-res artifacts */
.screen-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 150px 150px;
  opacity: 0.035;
  pointer-events: none;
  animation: grain 0.5s steps(1) infinite;
}
@keyframes grain {
  0%,100% { background-position: 0 0; }
  10% { background-position: -4% -8%; }
  20% { background-position: 7% -4%; }
  30% { background-position: -6% 7%; }
  40% { background-position: 9% 3%; }
  50% { background-position: -3% -9%; }
  60% { background-position: 5% 8%; }
  70% { background-position: -8% 2%; }
  80% { background-position: 6% -5%; }
  90% { background-position: -2% 6%; }
}

/* ══ DESIGN SYSTEM — Unified Visual Identity ═════════════════════════════════

   IDENTITY: Dark void fantasy — deep blacks, cold purples, warm gold accents.
   Every UI element should feel like it comes from the same dark realm.

════════════════════════════════════════════════════════════════════════════ */

/* ── HUD — Glassmorphism top bar ── */
.hud {
  background: rgba(2,1,8,.85) !important;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid rgba(200,167,64,.2) !important;
  box-shadow: 0 .2cqh 1.5cqh rgba(0,0,0,.6);
  position: relative; z-index: 3;
}
.hud-res    { gap: .4cqw !important; }
.hud-val    { text-shadow: 0 0 .4cqw rgba(255,255,255,.2); }
.hud-title  { color: var(--gold-dim); text-shadow: var(--shadow-glow-gold); letter-spacing: .35cqw; }

/* ── All Screen Headers — unified glassmorphism ── */
.screen-header {
  background: rgba(2,1,8,.82) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(200,167,64,.16) !important;
  box-shadow: 0 .15cqh 1cqh rgba(0,0,0,.5);
}

/* ── Back button — see BUTTON POLISH v4 block at end of file ── */

/* ── Primary action buttons — more dramatic ── */
.btn-purple {
  background: linear-gradient(135deg, #2A0D6A, var(--purple)) !important;
  border: 1px solid rgba(180,100,255,.45) !important;
  box-shadow: 0 0 2cqw rgba(140,60,255,.5), 0 .25cqh 1cqh rgba(0,0,0,.5) !important;
}
.btn-gold {
  background: linear-gradient(135deg, #3A2200, #8A6000) !important;
  border: 1px solid rgba(255,210,26,.4) !important;
  box-shadow: 0 0 1.5cqw rgba(255,200,30,.35), 0 .25cqh 1cqh rgba(0,0,0,.5) !important;
}
.btn-blue {
  background: linear-gradient(135deg, #081A42, #1A5FAB) !important;
  border: 1px solid rgba(80,140,255,.4) !important;
}
.btn-red {
  background: linear-gradient(135deg, #380808, #8E1A1A) !important;
  border: 1px solid rgba(255,80,80,.35) !important;
}

/* Button press micro-interaction */
.action-btn:active, .sbtn:active, .nav-tile:active {
  transform: scale(.94) !important;
  filter: brightness(.85) !important;
  transition: transform .06s, filter .06s !important;
}

/* ── Nav Tiles — deeper, more dramatic ── */
.nav-tile {
  box-shadow: 0 .4cqh 2cqh rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06) !important;
  transition: transform .14s cubic-bezier(.2,1.3,.5,1), filter .12s, box-shadow .15s !important;
}
.nav-tile:hover {
  transform: scale(1.05) translateY(-.35cqh) !important;
  filter: brightness(1.25) !important;
  box-shadow: 0 .6cqh 3cqh rgba(0,0,0,.8), var(--shadow-glow-purp) !important;
}
.tile-summon   { background: linear-gradient(145deg, #1E0840, #5B1E9A) !important; }
.tile-shop     { background: linear-gradient(145deg, #2E1800, #6A3C08) !important; }
.tile-inventory{ background: linear-gradient(145deg, #041830, #103868) !important; }
.tile-dungeon  { background: linear-gradient(145deg, #2A0606, #5C0E0E) !important; }
.tile-quests   { background: linear-gradient(145deg, #061A0A, #0E4418) !important; }
.tile-battlepass{ background: linear-gradient(145deg, #1E1200, #4A2C00) !important; }
.tile-achievements{ background: linear-gradient(145deg, #14100A, #342500) !important; }

/* ── Cards — unified depth treatment ── */
.shop-card {
  background: rgba(6,3,16,.94) !important;
  border: 1px solid rgba(200,167,64,.13) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 .35cqh 1.5cqh rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.shop-card:hover {
  border-color: rgba(200,167,64,.32) !important;
  box-shadow: 0 .5cqh 2cqh rgba(0,0,0,.7), var(--shadow-glow-gold) !important;
  transform: translateY(-.3cqh) !important;
}
.shop-card-featured {
  border-color: rgba(255,210,26,.32) !important;
  box-shadow: 0 0 2cqw rgba(255,210,26,.18), 0 .35cqh 1.5cqh rgba(0,0,0,.6) !important;
}

/* ── Monster cards in collection — richer rarity ── */
.monster-card { box-shadow: 0 .2cqh 1cqh rgba(0,0,0,.7) !important; }
.r5.selected { box-shadow: 0 0 2cqw rgba(255,215,0,.7), 0 0 5cqw rgba(255,180,0,.3) !important; }
.r4.selected { box-shadow: 0 0 1.5cqw rgba(100,200,255,.65), 0 0 4cqw rgba(80,160,255,.25) !important; }
.r5 { box-shadow: 0 0 .8cqw rgba(255,215,0,.3) !important; }
.r4 { box-shadow: 0 0 .5cqw rgba(100,200,255,.25) !important; }

/* ── All panels / overlays — consistent deep dark ── */
.quest-panel, .bp-panel, .ach-overlay, .defeat-overlay,
.summon10-overlay, .equip-picker, .world-intro, .daily-overlay,
.battle-summary, .tutorial-overlay {
  background: rgba(3,1,10,.97) !important;
}

/* ── Section labels — unified style ── */
.section-lbl, .skills-title, .quest-section-lbl, .shop-section-lbl {
  color: rgba(180,155,220,.65) !important;
  letter-spacing: .22cqw;
  font-size: .82cqw;
}

/* ── Skill cards — richer look ── */
.skill-card {
  background: rgba(8,4,20,.92) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: .5cqw !important;
}
.skill-card:hover { background: rgba(14,8,30,.95) !important; }
.skill-basic { border-left: 2.5px solid rgba(160,150,180,.45) !important; }
.skill-combo { border-left: 2.5px solid rgba(80,140,255,.65) !important; }
.skill-ult   { border-left: 2.5px solid rgba(255,200,50,.7) !important; background: rgba(25,18,5,.92) !important; }

/* ── HUD resource values — colored glows ── */
#hud-gold  { color: var(--gold); text-shadow: 0 0 .5cqw rgba(255,210,26,.5); }
#hud-gems  { color: var(--r4);   text-shadow: 0 0 .5cqw rgba(100,200,255,.5); }

/* ── Veil overlays — deeper darkness ── */
.home-veil   { background: linear-gradient(to bottom, rgba(0,0,0,.65) 0%, rgba(0,0,0,.38) 50%, rgba(0,0,0,.72) 100%) !important; }
.summon-veil { background: rgba(0,0,0,.55) !important; }
.inv-veil    { background: rgba(2,1,10,.80) !important; }
.shop-veil   { background: rgba(2,1,10,.78) !important; }

/* ── Fight bar — more dramatic red ── */
.fight-bar { border-top: 2px solid rgba(255,60,60,.45) !important; }
.fight-btn { letter-spacing: .45cqw !important; }

/* ── Progress panel — darker ── */
.home-progress-panel {
  background: rgba(4,2,12,.92) !important;
  border: 1px solid rgba(200,167,64,.2) !important;
  box-shadow: 0 .3cqh 1.5cqh rgba(0,0,0,.6) !important;
}
/*── Gold accent animation on legendary elements ── */
@keyframes goldPulse {
  0%,100% { box-shadow: 0 0 1cqw rgba(255,215,0,.4); }
  50%     { box-shadow: 0 0 2.5cqw rgba(255,215,0,.75); }
}
.r5.selected, .awk-3 { animation-name: goldPulse !important; animation-duration: 2s !important; animation-iteration-count: infinite !important; }

/* ── Shared veil overlays ────────────────────────────────────────────────── */
.login-veil, .home-veil, .summon-veil, .inv-veil,
.dung-veil, .shop-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.login-veil  { background: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.85) 100%); }
.home-veil   { background: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.65) 100%); }
.summon-veil { background: rgba(0,0,0,.45); transition: background .6s; }
.inv-veil    { background: rgba(2,1,8,.72); }
.dung-veil   { background: rgba(0,0,0,.38); }
.shop-veil   { background: rgba(2,1,8,.68); }

/* ── Shared header ───────────────────────────────────────────────────────── */
.screen-header {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 1.5cqw;
  padding: .6cqh 1.2cqw;
  background: rgba(0,0,0,.72);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 7cqh;
}

.back-btn {
  padding: .5cqh 1.2cqw;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: .4cqw; color: rgba(255,255,255,.8);
  font-size: 1.1cqw; font-weight: 700; letter-spacing: .1cqw;
  cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
.back-btn:hover { background: rgba(255,255,255,.16); }

.header-spacer { flex: 1; }

/* ── Typography helpers ──────────────────────────────────────────────────── */
.gold-txt  { color: var(--gold); }
.blue-txt  { color: var(--blue-lt); }
.glow-gold { text-shadow: 0 0 .8cqw rgba(255,210,26,.6); }

/* ══ LOADING ═════════════════════════════════════════════════════════════ */
#screen-loading {
  background: var(--dark); align-items: center; justify-content: center; gap: 2cqh;
}
.load-spinner {
  width: 5cqh; height: 5cqh;
  border: .4cqh solid rgba(255,255,255,.08);
  border-top-color: var(--gold); border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.load-txt { font-size: 1.2cqw; letter-spacing: .4cqw; color: rgba(255,255,255,.35); }

/* ══ LOGIN — Magical Dark Fantasy ════════════════════════════════════════ */
#screen-login .screen-bg {
  background-image: none !important;
  background:
    radial-gradient(ellipse 140% 70% at 50% 130%, #3A0880 0%, #1A0450 25%, #06011E 55%, #01000A 100%) !important;
}
#screen-login .screen-bg::after { display: none; }

/* Deep void aurora */
#screen-login::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 40% at 15% 65%, rgba(140,20,255,.22), transparent),
    radial-gradient(ellipse 60% 55% at 85% 35%, rgba(80,10,200,.18), transparent),
    radial-gradient(ellipse 100% 25% at 50% 90%, rgba(180,50,255,.2), transparent),
    radial-gradient(ellipse 40% 80% at 50% 20%,  rgba(100,20,220,.12), transparent);
  animation: voidAurora 12s ease-in-out infinite alternate;
}
@keyframes voidAurora {
  0%   { opacity:.5; transform:scale(1) translateY(0); }
  50%  { opacity:1;  transform:scale(1.06) translateY(-2%); }
  100% { opacity:.6; transform:scale(.96) translateY(2%); }
}

/* Dense star field */
#screen-login::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 8% 12%,  rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 18% 28%, rgba(200,160,255,.6), transparent),
    radial-gradient(2px 2px at 30% 8%,  rgba(180,130,255,.7), transparent),
    radial-gradient(1px 1px at 45% 20%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 62% 15%, rgba(220,190,255,.65),transparent),
    radial-gradient(2px 2px at 75% 6%,  rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 88% 22%, rgba(200,160,255,.55),transparent),
    radial-gradient(1px 1px at 5%  45%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 22% 55%, rgba(180,140,255,.5), transparent),
    radial-gradient(2px 2px at 38% 42%, rgba(255,255,255,.45),transparent),
    radial-gradient(1px 1px at 55% 38%, rgba(220,180,255,.5), transparent),
    radial-gradient(1px 1px at 70% 50%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 85% 60%, rgba(180,130,255,.55),transparent),
    radial-gradient(1px 1px at 12% 72%, rgba(255,255,255,.35),transparent),
    radial-gradient(2px 2px at 28% 80%, rgba(200,150,255,.5), transparent),
    radial-gradient(1px 1px at 50% 75%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 68% 82%, rgba(180,130,255,.45),transparent),
    radial-gradient(1px 1px at 92% 78%, rgba(255,255,255,.5), transparent);
}

.login-veil { background: linear-gradient(to bottom, rgba(0,0,0,.05) 0%, rgba(2,0,10,.88) 100%) !important; }


/* Orbiting rune ring around the title area */
.login-rune-ring {
  position: absolute; width: 50cqw; height: 50cqw;
  top: 50%; left: 50%; transform: translate(-50%, -58%);
  z-index: 1; pointer-events: none;
}
.login-rune-ring span {
  position: absolute; top: 50%; left: 50%;
  font-size: 1.2cqw; color: rgba(180,100,255,.45);
  text-shadow: 0 0 .5cqw rgba(180,80,255,.8);
  transform-origin: 0 0;
}
.login-rune-ring span:nth-child(1) { animation: loginRuneOrbit 18s linear infinite 0s; }
.login-rune-ring span:nth-child(2) { animation: loginRuneOrbit 18s linear infinite -2.25s; }
.login-rune-ring span:nth-child(3) { animation: loginRuneOrbit 18s linear infinite -4.5s; }
.login-rune-ring span:nth-child(4) { animation: loginRuneOrbit 18s linear infinite -6.75s; }
.login-rune-ring span:nth-child(5) { animation: loginRuneOrbit 18s linear infinite -9s; }
.login-rune-ring span:nth-child(6) { animation: loginRuneOrbit 18s linear infinite -11.25s; }
.login-rune-ring span:nth-child(7) { animation: loginRuneOrbit 18s linear infinite -13.5s; }
.login-rune-ring span:nth-child(8) { animation: loginRuneOrbit 18s linear infinite -15.75s; }
@keyframes loginRuneOrbit {
  from { transform: rotate(0deg)   translateX(25cqw) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(25cqw) rotate(-360deg); }
}

/* Floating void particles */
.login-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.login-particles span {
  position: absolute; width: .3cqw; height: .3cqw; border-radius: 50%;
  background: rgba(160,80,255,.7);
  animation: loginParticle 6s ease-in-out infinite;
}
.login-particles span:nth-child(1)  { left:10%; top:70%; animation-delay:0s;    animation-duration:7s;  }
.login-particles span:nth-child(2)  { left:25%; top:40%; animation-delay:.8s;   animation-duration:5s;  }
.login-particles span:nth-child(3)  { left:40%; top:80%; animation-delay:1.5s;  animation-duration:8s;  background:rgba(120,60,220,.6); }
.login-particles span:nth-child(4)  { left:60%; top:30%; animation-delay:.3s;   animation-duration:6s;  }
.login-particles span:nth-child(5)  { left:75%; top:65%; animation-delay:2s;    animation-duration:7.5s;}
.login-particles span:nth-child(6)  { left:88%; top:20%; animation-delay:1s;    animation-duration:5.5s;}
.login-particles span:nth-child(7)  { left:15%; top:55%; animation-delay:2.5s;  animation-duration:9s;  width:.5cqw; height:.5cqw; }
.login-particles span:nth-child(8)  { left:50%; top:15%; animation-delay:.5s;   animation-duration:6.5s;}
.login-particles span:nth-child(9)  { left:35%; top:60%; animation-delay:1.8s;  animation-duration:8s;  }
.login-particles span:nth-child(10) { left:70%; top:85%; animation-delay:.2s;   animation-duration:7s;  background:rgba(200,100,255,.6); }
.login-particles span:nth-child(11) { left:5%;  top:30%; animation-delay:3s;    animation-duration:6s;  }
.login-particles span:nth-child(12) { left:92%; top:55%; animation-delay:1.2s;  animation-duration:9.5s;}
@keyframes loginParticle {
  0%,100% { transform:translateY(0) scale(1); opacity:.6; }
  50%      { transform:translateY(-3cqh) scale(1.4); opacity:1; }
}

/* Login content polish */
.login-emblem {
  font-size: 2.5cqw; letter-spacing: .6cqw; color: rgba(180,100,255,.7);
  text-shadow: 0 0 1cqw rgba(180,80,255,.5);
  margin-bottom: -.5cqh;
  animation: emblemPulse 3s ease-in-out infinite alternate;
}
@keyframes emblemPulse {
  from { color: rgba(160,80,255,.6); text-shadow: 0 0 .8cqw rgba(160,60,255,.4); }
  to   { color: rgba(220,140,255,.9); text-shadow: 0 0 2cqw rgba(200,100,255,.7); }
}
.login-tagline {
  font-size: 1.4cqw; letter-spacing: .35cqw; color: rgba(200,150,255,.5);
  font-style: italic; margin-bottom: .3cqh;
}
.login-disclaimer { font-size: .72cqw; color: rgba(255,255,255,.2); margin-top: .5cqh; letter-spacing: .08cqw; }
.login-enter-btn {
  font-size: 1.5cqw; padding: 1.1cqh 4cqw; letter-spacing: .3cqw;
  box-shadow: 0 0 3cqw rgba(120,40,220,.5), 0 0 8cqw rgba(80,20,180,.25);
  animation: btnVoidPulse 3s ease-in-out infinite;
}
@keyframes btnVoidPulse {
  0%,100% { box-shadow: 0 0 2cqw rgba(120,40,220,.4); }
  50%     { box-shadow: 0 0 5cqw rgba(160,60,255,.7), 0 0 12cqw rgba(100,30,200,.3); }
}

.login-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5cqh;
  width: 100%; height: 100%; padding: 4cqh 0;
}
.login-hero {
  display: flex; flex-direction: column; align-items: center; gap: 1.3cqh;
  text-align: center;
}
.login-ruleline {
  display: flex; align-items: center; gap: 1.2cqw;
  color: rgba(180,120,255,.55);
}
.lr-line { width: 5cqw; height: 1px; background: linear-gradient(to right, transparent, rgba(180,100,255,.5), transparent); }
.lr-gem  { font-size: 1cqw; color: rgba(200,140,255,.65); }
.lr-text { font-size: .72cqw; font-weight: 800; letter-spacing: .3cqw; white-space: nowrap; color: rgba(200,155,255,.6); }
.login-panel {
  display: flex; flex-direction: column; align-items: center; gap: 1.2cqh;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.game-title { font-size: 7cqw; font-weight: 900; letter-spacing: .6cqw; text-align: center; }
.login-sub  { font-size: 1.3cqw; letter-spacing: .25cqw; color: rgba(255,255,255,.55); }

/* ══ ACTION BUTTONS ══════════════════════════════════════════════════════ */
.action-btn {
  padding: .9cqh 3cqw;
  border: none; border-radius: .5cqw;
  font-size: 1.3cqw; font-weight: 900; letter-spacing: .2cqw;
  cursor: pointer; transition: filter .12s, transform .1s;
  display: inline-flex; align-items: center; gap: .5cqw;
}
.action-btn:hover  { filter: brightness(1.25); transform: scale(1.03); }
.action-btn:active { transform: scale(0.96); }
.action-btn:disabled { filter: brightness(.4); cursor: not-allowed; transform: none; }

.btn-sm { padding: .6cqh 1.8cqw; font-size: 1.0cqw; }

.btn-purple {
  background: linear-gradient(135deg, var(--purple-dk), var(--purple));
  color: #E8CCFF;
  box-shadow: 0 0 2cqw rgba(123,47,190,.45);
  border: 1px solid rgba(180,120,255,.35);
}
.btn-blue {
  background: linear-gradient(135deg, #0A2E5C, var(--blue));
  color: #CCE8FF;
  box-shadow: 0 0 1.5cqw rgba(26,95,171,.4);
  border: 1px solid rgba(100,160,255,.3);
}
.btn-gold {
  background: linear-gradient(135deg, #4A3200, #8A6000);
  color: var(--gold);
  box-shadow: 0 0 1.5cqw rgba(200,167,64,.4);
  border: 1px solid rgba(255,210,26,.3);
}
.btn-red {
  background: linear-gradient(135deg, #4A0A0A, var(--red));
  color: #FFCCCC;
  box-shadow: 0 0 1.5cqw rgba(142,26,26,.4);
  border: 1px solid rgba(255,80,80,.3);
}
.btn-dim {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.2);
}

/* ══ HOME ════════════════════════════════════════════════════════════════ */
/* HUD bar */
.hud {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: .5cqh 1.5cqw;
  background: rgba(0,0,0,.78);
  border-bottom: 1px solid var(--border);
  min-height: 6cqh; flex-shrink: 0;
}
.hud-left  { display: flex; align-items: center; gap: .8cqw; }
.hud-center { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; }
.hud-right { display: flex; align-items: center; }
.hud-title  { font-size: 1.4cqw; font-weight: 900; letter-spacing: .3cqw; color: var(--gold-dim); }
.hud-res   { display: flex; align-items: center; gap: .35cqw; }
.hud-icon  { font-size: 1.3cqw; }
.hud-val   { font-size: 1.15cqw; font-weight: 700; }
.hud-sep   { width: 1px; height: 2.5cqh; background: rgba(255,255,255,.15); margin: 0 .3cqw; }
.hud-uid   { font-size: .8cqw; color: rgba(255,255,255,.28); letter-spacing: .05cqw; }

.home-main {
  position: relative; z-index: 2;
  flex: 1; display: flex; align-items: center; justify-content: center;
}

.home-tiles {
  display: flex; gap: 2cqw;
  padding: 0 3cqw;
}

.nav-tile {
  flex: 1; min-width: 16cqw; max-width: 21cqw;
  aspect-ratio: 16/10;
  border: none; border-radius: .8cqw;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .8cqh; cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform .12s, filter .12s;
  box-shadow: 0 .5cqh 2cqh rgba(0,0,0,.6);
}
.nav-tile::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.08) 0%, transparent 60%);
  pointer-events: none;
}
.nav-tile:hover  { transform: scale(1.04) translateY(-.3cqh); filter: brightness(1.18); }
.nav-tile:active { transform: scale(.97); }

.tile-icon     { font-size: 3.5cqw; position: relative; z-index: 1; }
.tile-label    { font-size: 1.4cqw; font-weight: 900; letter-spacing: .2cqw; position: relative; z-index: 1; }
.tile-sublabel { font-size: .72cqw; color: rgba(255,255,255,.4); letter-spacing: .12cqw; position: relative; z-index: 1; }
.tile-glyph    {
  font-size: 3cqw; line-height: 1; position: relative; z-index: 1;
  text-shadow: 0 0 .6cqw rgba(255,255,255,.3);
  filter: drop-shadow(0 .1cqh .3cqh rgba(0,0,0,.7));
}

.tile-summon    { background: linear-gradient(135deg, #280A56, #5E1FA0); border: 1px solid rgba(180,120,255,.4); }
.tile-shop      { background: linear-gradient(135deg, #3D2200, #7A4A10); border: 1px solid rgba(255,180,60,.35); }
.tile-inventory { background: linear-gradient(135deg, #07203F, #12467A); border: 1px solid rgba(80,160,255,.35); }
.tile-dungeon   { background: linear-gradient(135deg, #3A0808, #6E1212); border: 1px solid rgba(255,80,80,.35); }

/* Activity tiles — smaller glyph, distinctive colors */
.home-activity-tile { grid-column: span 1; }
.tile-glyph-sm { font-size: 2.2cqw !important; }
.tile-quests      { background: linear-gradient(135deg, #0A2A10, #145A22); border: 1px solid rgba(80,200,100,.35); }
.tile-battlepass  { background: linear-gradient(135deg, #2A1800, #5A3A00); border: 1px solid rgba(255,180,50,.4); }
.tile-achievements{ background: linear-gradient(135deg, #1A1000, #3A2800); border: 1px solid rgba(220,160,30,.35); }

/* Quest badge on home tile */
.quest-badge-home {
  display: inline-flex; align-items: center; justify-content: center;
  background: #FF4444; color: #fff; font-size: .7cqw; font-weight: 900;
  min-width: 1.4cqw; height: 1.4cqw; border-radius: 50%;
  margin-left: .4cqw; vertical-align: middle;
}

/* Desktop: 4 tiles in a row (flex, no grid needed) */
@container game (min-width: 721px) {
  .home-main { flex-direction: column; align-items: center; gap: 1cqh; }
  .home-tiles { display: flex; gap: 2cqw; flex-wrap: nowrap; width: 95%; }
  .home-progress-panel { margin-top: 0; }
}

/* ══ SUMMON — full portal redesign ═══════════════════════════════════════ */

/* Top bar */
.summon-topbar {
  position: relative; z-index: 2; flex-shrink: 0;
  display: flex; align-items: center; gap: 1.5cqw;
  padding: .5cqh 1.5cqw;
  background: rgba(0,0,0,.7);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.pity-bar {
  flex: 1; display: flex; gap: 1.5cqw; align-items: center; justify-content: center;
  font-size: .95cqw; color: rgba(255,255,255,.6);
}
.pity-bar b  { color: var(--gold); }
.pity-sep    { color: rgba(255,255,255,.18); }
.summon-gem-counter {
  display: flex; align-items: center; gap: .4cqw;
  font-size: 1.1cqw; font-weight: 700; color: var(--r4);
}

/* Center stage */
.summon-stage {
  flex: 1; position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* ── Portal scene ─────────────────────────────────────────────────────── */
.portal-scene {
  display: flex; flex-direction: column; align-items: center;
  gap: 2.5cqh; position: relative;
}

/* Floating ambient particles */
.portal-particles {
  position: absolute; inset: -5cqw; z-index: 0; pointer-events: none;
}
.portal-particles span {
  position: absolute; width: .45cqw; height: .45cqw; border-radius: 50%;
  background: rgba(180,100,255,.8);
  animation: particleFloat 4s ease-in-out infinite;
}
.portal-particles span:nth-child(1) { left:12%; top:18%; animation-delay:0s;   animation-duration:3.8s; width:.35cqw; height:.35cqw; }
.portal-particles span:nth-child(2) { left:80%; top:12%; animation-delay:.7s;  animation-duration:4.5s; }
.portal-particles span:nth-child(3) { left:22%; top:75%; animation-delay:1.2s; animation-duration:3.5s; background:rgba(140,80,255,.6); }
.portal-particles span:nth-child(4) { left:72%; top:70%; animation-delay:.3s;  animation-duration:5s;   width:.3cqw; height:.3cqw; }
.portal-particles span:nth-child(5) { left:48%; top:8%;  animation-delay:2.1s; animation-duration:4.2s; background:rgba(200,130,255,.7); }
.portal-particles span:nth-child(6) { left:8%;  top:50%; animation-delay:1.5s; animation-duration:3.9s; }
.portal-particles span:nth-child(7) { left:88%; top:40%; animation-delay:0.9s; animation-duration:4.8s; width:.55cqw; height:.55cqw; }
.portal-particles span:nth-child(8) { left:55%; top:82%; animation-delay:2.5s; animation-duration:3.6s; background:rgba(160,90,255,.9); }
@keyframes particleFloat {
  0%,100% { transform: translateY(0) scale(1);       opacity:.8; }
  33%      { transform: translateY(-2cqh) scale(1.3); opacity:1; }
  66%      { transform: translateY(.8cqh) scale(.7);  opacity:.5; }
}

/* Portal rings + core */
.portal-wrap {
  position: relative; width: 28cqw; height: 28cqw;
  display: flex; align-items: center; justify-content: center;
}
.portal-ring {
  position: absolute; border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}

/* Pulsing outer corona halo */
.portal-corona {
  position: absolute; inset: -20%; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, transparent 38%, rgba(130,40,255,.12) 58%, rgba(100,20,220,.07) 72%, transparent 85%);
  animation: coronaPulse 3.5s ease-in-out infinite;
}
@keyframes coronaPulse {
  0%,100% { opacity:.6; transform: scale(1); }
  50%      { opacity:1;  transform: scale(1.08); }
}

/* Ring 1 — outermost, slow, partial glow segments */
.ring-1 {
  width: 130%; height: 130%;
  border: .06cqw solid transparent;
  border-top-color:    rgba(215,150,255,.7);
  border-right-color:  rgba(175,95,245,.4);
  border-bottom-color: rgba(130,60,200,.2);
  border-left-color:   rgba(215,150,255,.5);
  box-shadow: 0 0 .9cqw rgba(195,110,255,.4);
  animation: ringCW 16s linear infinite;
}

/* Ring 2 — counter-rotating blue energy */
.ring-2 {
  width: 113%; height: 113%;
  border: .09cqw solid transparent;
  border-top-color:    rgba(120,175,255,.8);
  border-left-color:   rgba(80,125,225,.5);
  border-bottom-color: rgba(120,175,255,.6);
  border-right-color:  rgba(80,125,225,.3);
  box-shadow: 0 0 1.2cqw rgba(100,155,255,.5);
  animation: ringCCW 10s linear infinite;
}

/* Ring 3 — inner, fast, bright violet */
.ring-3 {
  width: 100%; height: 100%;
  border: .14cqw solid transparent;
  border-top-color:    rgba(235,125,255,1);
  border-right-color:  rgba(195,85,255,.65);
  border-bottom-color: rgba(235,125,255,.85);
  border-left-color:   rgba(195,85,255,.45);
  box-shadow: 0 0 2.2cqw rgba(215,85,255,.65), inset 0 0 .9cqw rgba(215,85,255,.25);
  animation: ringCCW 5.5s linear infinite;
}

@keyframes ringCW  { to { transform: translate(-50%,-50%) rotate(360deg);  } }
@keyframes ringCCW { to { transform: translate(-50%,-50%) rotate(-360deg); } }

/* Orbiting rune glyphs */
.portal-runes {
  position: absolute; width: 100%; height: 100%;
  top: 0; left: 0; pointer-events: none; z-index: 1;
}
.portal-runes span {
  position: absolute; top: 50%; left: 50%;
  font-size: .95cqw; line-height: 1;
  color: rgba(215,165,255,.6);
  text-shadow: 0 0 .5cqw rgba(210,110,255,.95);
  transform-origin: 0 0;
}
.portal-runes span:nth-child(1) { animation: runeOrbit 11s linear infinite 0s; }
.portal-runes span:nth-child(2) { animation: runeOrbit 11s linear infinite -2.75s; }
.portal-runes span:nth-child(3) { animation: runeOrbit 11s linear infinite -5.5s; }
.portal-runes span:nth-child(4) { animation: runeOrbit 11s linear infinite -8.25s; }
@keyframes runeOrbit {
  0%   { transform: rotate(0deg)   translateX(13cqw) rotate(0deg);    opacity:.2; }
  25%  { opacity:.9; }
  50%  { opacity:.3; }
  75%  { opacity:.85; }
  100% { transform: rotate(360deg) translateX(13cqw) rotate(-360deg); opacity:.2; }
}

/* Portal core — the void eye */
.portal-core {
  width: 19cqw; height: 19cqw; border-radius: 50%;
  background:
    radial-gradient(circle at 46% 41%, rgba(255,255,255,.25) 0%, transparent 14%),
    radial-gradient(circle at 50% 50%, #F0C8FF 0%, #9B40FF 14%, #5520CC 36%, #1A0858 62%, #040016 100%);
  box-shadow:
    0 0 6cqw   rgba(195,80,255,1),
    0 0 12cqw  rgba(155,52,235,.75),
    0 0 22cqw  rgba(120,28,215,.45),
    0 0 36cqw  rgba(85,14,195,.22),
    inset 0 0 3cqw   rgba(255,210,255,.42),
    inset 0 0 8cqw   rgba(200,120,255,.22);
  animation: coreBreath 2.8s ease-in-out infinite;
  position: relative; overflow: hidden; z-index: 1;
}

/* Rotating conic energy swirl */
.portal-core::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(225,155,255,.3) 45deg, rgba(255,225,255,.42) 90deg,
    transparent 140deg, rgba(175,85,255,.2) 200deg, rgba(215,145,255,.32) 262deg,
    transparent 315deg, rgba(225,155,255,.24) 348deg, transparent 360deg
  );
  animation: coreSpin 5s linear infinite;
}

/* Bright inner pulse */
.portal-core::after {
  content: ''; position: absolute; inset: 28%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.32) 0%, rgba(215,175,255,.48) 35%, rgba(145,72,215,.22) 65%, transparent 85%);
  animation: innerPulse 2.4s ease-in-out infinite alternate;
  filter: blur(.22cqw);
}

@keyframes coreSpin  { to { transform: rotate(360deg); } }
@keyframes innerPulse {
  from { transform: scale(.82); opacity:.55; }
  to   { transform: scale(1.22); opacity:1; }
}
@keyframes coreBreath {
  0%,100% {
    transform: scale(1);
    box-shadow: 0 0 4.5cqw rgba(175,65,255,.95), 0 0 9cqw rgba(135,42,225,.6), 0 0 16cqw rgba(105,22,205,.35), inset 0 0 2.5cqw rgba(245,195,255,.38);
  }
  50% {
    transform: scale(1.07);
    box-shadow: 0 0 7.5cqw rgba(210,95,255,1), 0 0 14cqw rgba(165,65,225,.75), 0 0 24cqw rgba(135,42,205,.5), inset 0 0 4cqw rgba(255,215,255,.5);
  }
}

/* Two shimmer highlights on the core surface */
.portal-shimmer { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(.35cqw); }
.portal-shimmer.s1 {
  width: 28%; height: 17%; top: 13%; left: 18%;
  background: rgba(255,255,255,.62);
  animation: shimmerDrift 3.8s ease-in-out infinite;
}
.portal-shimmer.s2 {
  width: 17%; height: 11%; top: 58%; right: 16%;
  background: rgba(235,198,255,.52);
  animation: shimmerDrift 2.9s ease-in-out infinite reverse;
}
@keyframes shimmerDrift {
  0%,100% { transform: translate(0,0) scale(1); opacity:.7; }
  33%  { transform: translate(3%, 4%) scale(1.3); opacity:1; }
  66%  { transform: translate(-2%,-3%) scale(.75); opacity:.4; }
}

/* Summoning burst state — everything accelerates */
.portal-wrap.summoning .ring-1 {
  animation-duration: 1.4s !important;
  border-top-color: rgba(255,215,255,.95) !important;
  border-left-color: rgba(255,185,255,.75) !important;
}
.portal-wrap.summoning .ring-2 { animation-duration: 0.9s !important; }
.portal-wrap.summoning .ring-3 {
  animation-duration: 0.5s !important;
  border-top-color:    rgba(255,245,255,1) !important;
  border-bottom-color: rgba(255,225,255,.95) !important;
  box-shadow: 0 0 4cqw rgba(255,205,255,.9) !important;
}
.portal-wrap.summoning .portal-core { animation: coreFrenzy .22s ease-in-out infinite !important; }
.portal-wrap.summoning .portal-runes span {
  animation-duration: 1.5s !important;
  color: rgba(255,235,255,.92) !important;
}
.portal-wrap.summoning .portal-corona { animation-duration: 0.55s !important; }

@keyframes coreFrenzy {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.13); box-shadow: 0 0 13cqw rgba(255,190,255,1); }
}

.portal-tagline {
  font-size: 1.0cqw; font-weight: 700; letter-spacing: .4cqw;
  color: rgba(255,255,255,.22); z-index: 1;
}

/* ── Reveal result ────────────────────────────────────────────────────── */
.reveal-result {
  display: flex; flex-direction: column;
  align-items: center; gap: .7cqh; padding: 1cqh 2cqw;
}
.res-img {
  width: 26cqw; height: 26cqw; object-fit: contain;
  filter: drop-shadow(0 0 3cqw rgba(255,255,255,.3));
  animation: revealPop .55s cubic-bezier(.18,1.22,.55,1) both;
}
@keyframes revealPop {
  from { transform: scale(0) rotate(-8deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);  opacity: 1; }
}
.res-name   { font-size: 3.0cqw; font-weight: 900; letter-spacing: .2cqw; text-shadow: 0 .2cqh 1cqh rgba(0,0,0,.95); }
.res-stars  { font-size: 2.4cqw; letter-spacing: .35cqw; text-shadow: 0 0 1cqw currentColor; animation: starGlow 1.2s ease-in-out infinite alternate; }
@keyframes starGlow { from { text-shadow: 0 0 .5cqw currentColor; } to { text-shadow: 0 0 2cqw currentColor; } }
.res-rarity { font-size: 1.0cqw; font-weight: 700; letter-spacing: .3cqw; }
.res-elem   { font-size: 1.2cqw; font-weight: 700; letter-spacing: .2cqw; margin-bottom: .3cqh; }
.result-actions { display: flex; gap: 1.5cqw; margin-top: .5cqh; }

/* ── Bottom summon action bar ─────────────────────────────────────────── */
.summon-actions {
  position: relative; z-index: 2; flex-shrink: 0;
  padding: .8cqh 3cqw 1.2cqh;
  background: linear-gradient(to top, rgba(0,0,0,.92), rgba(5,0,20,.85));
  border-top: 1px solid rgba(140,60,255,.2);
  display: flex; flex-direction: column; align-items: center; gap: .7cqh;
}
.active-banner-lbl {
  font-size: .72cqw; font-weight: 900; letter-spacing: .3cqw;
  color: rgba(200,160,255,.55); text-align: center;
}
.summon-rate-hint { font-size: .72cqw; color: rgba(255,255,255,.25); letter-spacing: .04cqw; text-align: center; }
.summon-hint { font-size: .72cqw; color: rgba(255,255,255,.2); text-align: center; }
.summon-btn-row { display: flex; gap: 1.8cqw; align-items: stretch; }

/* ── Summon pull buttons — premium gem style ─────────────────────────── */
.sbtn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2cqh; padding: 1.4cqh 3.8cqw;
  border: none; border-radius: 1cqw; cursor: pointer;
  transition: filter .12s, transform .1s, box-shadow .15s;
  position: relative; overflow: hidden; min-width: 14cqw;
}
.sbtn:hover   { filter: brightness(1.3); transform: translateY(-.3cqh) scale(1.05); }
.sbtn:active  { transform: scale(.95); }
.sbtn:disabled{ filter: brightness(.3); cursor: not-allowed; transform: none; }
/* Top-edge shine */
.sbtn::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(170deg, rgba(255,255,255,.18) 0%, transparent 45%);
  pointer-events:none;
}
/* Bottom-edge deep shadow */
.sbtn::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:35%;
  background: linear-gradient(to top, rgba(0,0,0,.35), transparent);
  pointer-events:none;
}

.sbtn-1 {
  background: linear-gradient(155deg, #2C1068 0%, #5C24B0 55%, #3A1285 100%);
  border: 1px solid rgba(165,105,255,.55);
  box-shadow: 0 0 2.5cqw rgba(110,45,210,.5), inset 0 1px 0 rgba(255,255,255,.12);
  color: #DDD0FF;
}
.sbtn-10 {
  background: linear-gradient(155deg, #1C0858 0%, #4E18A8 40%, #7B2FD8 75%, #4A18A0 100%);
  border: 1px solid rgba(220,150,255,.8);
  box-shadow: 0 0 4cqw rgba(170,75,255,.7), 0 0 8cqw rgba(130,50,220,.35),
              inset 0 1px 0 rgba(255,255,255,.18);
  color: #F0E4FF;
  animation: btnGlow 2.8s ease-in-out infinite;
}
@keyframes btnGlow {
  0%,100% { box-shadow: 0 0 3.5cqw rgba(165,70,245,.65), inset 0 1px 0 rgba(255,255,255,.18); }
  50%      { box-shadow: 0 0 6.5cqw rgba(210,95,255,.9), 0 0 14cqw rgba(160,60,230,.35), inset 0 1px 0 rgba(255,255,255,.22); }
}

.sbtn-crystal   { font-size: 1.6cqw; line-height: 1; filter: drop-shadow(0 0 .4cqw rgba(200,140,255,.8)); }
.sbtn-count     { font-size: 1.9cqw; font-weight: 900; letter-spacing: .15cqw; line-height: 1.1; }
.sbtn-pull-word { font-size: .68cqw; font-weight: 700; letter-spacing: .3cqw; opacity: .65; }
.sbtn-cost-row  { display: flex; align-items: center; gap: .3cqw; margin-top: .15cqh;
                  background: rgba(0,0,0,.3); border-radius: .4cqw; padding: .2cqh .6cqw; }
.sbtn-gem       { font-size: .85cqw; }
.sbtn-cost-num  { font-size: 1.15cqw; font-weight: 900; }
.sbtn-save      { font-size: .58cqw; color: #7EFF9A; background: rgba(0,180,50,.22);
                  border: 1px solid rgba(0,210,60,.35); padding: .1cqh .35cqw; border-radius: .25cqw; }
.sbtn-best-badge {
  font-size: .62cqw; font-weight: 900; letter-spacing: .18cqw;
  color: #D8A8FF; text-shadow: 0 0 .5cqw rgba(200,120,255,.8);
  position: absolute; top: .45cqh; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
}

/* ══ INVENTORY ════════════════════════════════════════════════════════════ */

/* Compact inventory header — no filter tabs, just back + title + count */
.inv-header { min-height: 5.5cqh; }
.inv-title {
  flex: 1; text-align: center;
  font-size: 1.2cqw; font-weight: 900; letter-spacing: .25cqw;
  color: rgba(255,255,255,.65);
}

/* Filter bar — sits right above the card strip, feels connected to it */
.inv-filter-bar {
  position: relative; z-index: 2; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: .4cqh 1cqw;
  background: rgba(0,0,0,.78);
  border-top: 1px solid rgba(255,255,255,.07);
}
.inv-filter-bar .filter-tabs { flex: none; gap: .5cqw; }

.filter-tabs {
  display: flex; gap: .4cqw; flex: 1;
  justify-content: center;
}
.ftab {
  padding: .45cqh 1.1cqw;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: .35cqw; color: rgba(255,255,255,.65);
  font-size: .95cqw; font-weight: 700; letter-spacing: .07cqw;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.ftab:hover  { background: rgba(255,255,255,.14); }
.ftab.active { background: rgba(255,255,255,.18); border-color: var(--gold); color: #fff; }
.ftab-fire:hover, .ftab-fire.active  { border-color: var(--fire);  color: var(--fire); }
.ftab-water:hover,.ftab-water.active { border-color: var(--water); color: var(--water); }
.ftab-grass:hover,.ftab-grass.active { border-color: var(--grass); color: var(--grass); }
.ftab-light:hover,.ftab-light.active { border-color: var(--light); color: var(--light); }
.ftab-dark:hover, .ftab-dark.active  { border-color: var(--dark-elem); color: var(--dark-elem); }

.inv-status { font-size: .85cqw; color: rgba(255,255,255,.55); white-space: nowrap; }

/* Detail area — portrait left, stats right */
.inv-detail-area {
  position: relative; z-index: 2;
  flex: 1; display: flex; overflow: hidden; min-height: 0;
}

.inv-portrait-col {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-right: 1px solid rgba(255,255,255,.08);
  background: rgba(5,3,14,.5); overflow: hidden;
}

/* Horizontal scroll monster strip */
.inv-scroll-strip {
  position: relative; z-index: 2;
  height: 27cqh; flex-shrink: 0;
  background: rgba(0,0,0,.85);
  border-top: 1px solid rgba(255,255,255,.12);
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.inv-scroll-strip::-webkit-scrollbar { height: .3cqh; }
.inv-scroll-strip::-webkit-scrollbar-track { background: rgba(0,0,0,.3); }
.inv-scroll-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: .15cqh; }

.monster-grid {
  display: flex; flex-direction: row;
  /* Explicit cqh height — avoid height:100% + cqh parent which fails in many browsers */
  height: 27cqh; align-items: center;
  gap: .7cqw; padding: .7cqh .8cqw;
  min-width: max-content;
}

.monster-card {
  flex-shrink: 0;
  position: relative; border-radius: .5cqw;
  background-size: cover; background-position: center;
  cursor: pointer;
  /* Explicit cqh height — reliable cross-browser, no percentage-of-cqh issues */
  height: 24cqh;
  aspect-ratio: 2/3;
  border: 2px solid rgba(255,255,255,.12); overflow: hidden;
  transition: border-color .15s, transform .12s, box-shadow .15s;
  box-shadow: 0 .2cqh .8cqh rgba(0,0,0,.6);
  scroll-snap-align: start;
}
.monster-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.05) 40%, rgba(0,0,0,.88) 100%);
}
.monster-card:hover { transform: translateY(-.15cqh) scale(1.04); }
.monster-card:active { transform: scale(.96); }

.monster-card img {
  position: absolute; top: 0; left: 0; right: 0;
  width: 100%; height: 72%; object-fit: contain; z-index: 1;
}
.card-name, .card-stars {
  position: absolute; left: 0; right: 0; text-align: center;
  font-weight: 700; text-shadow: 0 .05cqh .25cqh rgba(0,0,0,1); z-index: 2;
}
.card-name  { bottom: 1.2cqh; font-size: .62cqw; color: rgba(255,255,255,.9); }
.card-stars { bottom: .2cqh;  font-size: .68cqw; letter-spacing: .06cqw; }

/* Rarity borders */
.r5 { border-color: rgba(255,215,0,.45); }
.r4 { border-color: rgba(102,204,255,.35); }
.r5.selected { border-color: var(--r5); box-shadow: 0 0 1.2cqw rgba(255,215,0,.6); }
.r4.selected { border-color: var(--r4); box-shadow: 0 0 1cqw rgba(102,204,255,.5); }
.r3.selected { border-color: var(--r3); }
.monster-card.selected { border-color: #fff; box-shadow: 0 0 1.2cqw rgba(255,255,255,.4); }

.detail-empty {
  color: rgba(255,255,255,.25); font-size: 1.1cqw; letter-spacing: .15cqw;
}

.detail-content {
  width: 100%; height: 100%;
  display: flex; flex-direction: row; align-items: stretch;
  padding: 0; gap: 0; overflow: hidden;
}

/* Left side — skills panel */
.skills-section {
  flex-shrink: 0; width: 42%;
  border-right: 1px solid rgba(255,255,255,.08);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: rgba(0,0,0,.25);
}

/* Right side — portrait + info stacked */
.detail-portrait-side {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden; gap: .5cqh; padding: .8cqh .6cqw;
}

.detail-portrait-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 0; width: 100%;
}

.detail-portrait {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 1.5cqw rgba(255,255,255,.2));
  animation: popIn .22s ease-out;
}
@keyframes popIn {
  from { transform: scale(.72); opacity: 0; }
  70%  { transform: scale(1.07); }
  to   { transform: scale(1); opacity: 1; }
}

.detail-info { text-align: center; }
.detail-name    { font-size: 1.8cqw; font-weight: 900; letter-spacing: .15cqw; margin-bottom: .3cqh; }
.detail-stars   { font-size: 1.4cqw; letter-spacing: .25cqw; text-shadow: 0 0 .5cqw currentColor; margin-bottom: .2cqh; }
.detail-element { font-size: .95cqw; font-weight: 700; letter-spacing: .15cqw; color: rgba(255,255,255,.6); }

/* Stats + team column */
.inv-right-col {
  width: 32%; flex-shrink: 0; display: flex; flex-direction: column;
  background: rgba(3,1,10,.78);
}

.section-lbl {
  font-size: .85cqw; font-weight: 700; letter-spacing: .2cqw;
  color: rgba(160,140,190,.75); padding: .6cqh 1.2cqw;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.stats-section { flex-shrink: 0; }

/* HP/ATK/DEF/SPD bars (like the image) */
.stat-bars { padding: .8cqh 1.2cqw; display: flex; flex-direction: column; gap: .7cqh; }

.sbar-row {
  display: flex; align-items: center; gap: .6cqw;
}
.sbar-lbl  { font-size: .8cqw; font-weight: 700; letter-spacing: .05cqw; width: 2.5cqw; text-align: right; }
.sbar-track {
  flex: 1; height: .9cqh; background: rgba(255,255,255,.1); border-radius: .5cqh; overflow: hidden;
}
.sbar-fill { height: 100%; border-radius: .5cqh; transition: width .55s ease-out; width: 0%; }
.sbar-hp   { background: linear-gradient(to right, #AA0000, #FF4444); }
.sbar-atk  { background: linear-gradient(to right, #8A3000, #FF7030); }
.sbar-def  { background: linear-gradient(to right, #0A2A6E, #4488FF); }
.sbar-spd  { background: linear-gradient(to right, #066060, #26EBDA); }
.sbar-val  { font-size: .8cqw; font-weight: 700; width: 3.5cqw; text-align: left; }

/* Team */
.team-section {
  flex: 1; display: flex; flex-direction: column;
  padding: 0 .8cqw .8cqw; gap: .6cqh;
  border-top: 1px solid rgba(255,255,255,.07);
}

.team-slots { display: flex; gap: .6cqw; flex: 1; align-items: center; justify-content: center; }

.team-slot {
  flex: 1; max-width: 6.5cqw;
  aspect-ratio: 3/4;
  border: 1px solid rgba(255,255,255,.15); border-radius: .4cqw;
  background: rgba(18,12,30,.8);
  background-size: cover; background-position: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden;
  transition: border-color .15s;
}
.team-slot:hover { border-color: rgba(255,255,255,.4); }
.team-slot img   { width: 100%; height: 78%; object-fit: contain; }
.team-slot p     { font-size: .6cqw; text-shadow: 0 0 .3cqw currentColor; }
.slot-plus       { font-size: 1.4cqw; color: rgba(255,255,255,.2); }

/* ══ DUNGEON ══════════════════════════════════════════════════════════════ */
.stage-lbl {
  flex: 1; text-align: center;
  font-size: 1.6cqw; font-weight: 900; letter-spacing: .3cqw;
  color: var(--gold); text-shadow: 0 0 1cqw rgba(255,210,26,.5);
}
.dung-reward-hint {
  font-size: .85cqw; color: rgba(255,210,26,.65); letter-spacing: .05cqw;
}

/* Battle status bar — single-line action display above the fight bar */
.battle-status-bar {
  position: relative; z-index: 2; flex-shrink: 0;
  padding: .5cqh 2cqw;
  background: rgba(0,0,0,.75);
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: .85cqw; color: rgba(255,255,255,.5);
  text-align: center; letter-spacing: .04cqw;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-height: 3.5cqh; display: flex; align-items: center; justify-content: center;
}
.bsb-win  { color: var(--gold); font-weight: 900; }
.bsb-lose { color: #FF4444;    font-weight: 900; }

/* ── Arena layout — two teams, full width, no center log ──────────────── */
.battle-arena {
  position: relative; z-index: 2;
  flex: 1; display: flex; overflow: hidden;
}

.arena-side {
  flex: 1;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.arena-player {
  background: linear-gradient(to right, rgba(0,6,20,.85), rgba(0,4,15,.65));
  border-right: 1px solid rgba(102,204,255,.15);
  box-shadow: inset -1px 0 2cqw rgba(0,100,200,.08);
}
.arena-enemy {
  background: linear-gradient(to left, rgba(20,3,3,.85), rgba(14,2,2,.65));
  border-left: 1px solid rgba(255,80,80,.15);
  box-shadow: inset 1px 0 2cqw rgba(200,30,30,.08);
}

.arena-header {
  font-size: .9cqw; font-weight: 900; letter-spacing: .25cqw;
  padding: .5cqh 1cqw; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.player-header { color: #66CCFF; }
.enemy-header  { color: #FF6655; }

.arena-cards {
  flex: 1; display: flex; flex-wrap: wrap;
  align-content: center; justify-content: center;
  gap: .8cqw; padding: .8cqh 1cqw;
  overflow-y: auto;
}

.arena-center { display: none; } /* log hidden — use battle-status-bar instead */
.lp { color: #33CCFF; }
.le { color: #FF6644; }

/* Fight bar — fight btn + auto + speed side by side */
.fight-bar {
  position: relative; z-index: 2; flex-shrink: 0;
  display: flex; width: 100%;
  border-top: 2px solid rgba(255,80,80,.4);
}

.fight-btn {
  flex: 1; padding: 1.3cqh 0;
  background: linear-gradient(135deg, #3A0808, #6E1212);
  border: none;
  color: #FFAAAA; font-size: 1.5cqw; font-weight: 900; letter-spacing: .4cqw;
  cursor: pointer; transition: filter .15s;
}
.fight-btn:hover    { filter: brightness(1.3); }
.fight-btn:disabled { filter: brightness(.35); cursor: not-allowed; }

.auto-btn, .speed-btn {
  flex-shrink: 0; padding: 0 1.4cqw;
  background: rgba(255,255,255,.06);
  border: none; border-left: 1px solid rgba(255,255,255,.12);
  font-size: 1.0cqw; font-weight: 900; letter-spacing: .1cqw;
  color: rgba(255,255,255,.4);
  cursor: pointer; transition: background .15s, color .15s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.auto-btn:hover,  .speed-btn:hover  { background: rgba(255,255,255,.14); color: #fff; }
.auto-btn.active  { background: rgba(80,200,80,.2);  color: #66EE66; }
.speed-btn.fast   { background: rgba(255,160,0,.18); color: #FFAA33; }

/* ── Battle cards — FRAMELESS floating character style ──────────────────── */
.bc-card {
  display: flex; flex-direction: column;
  background: transparent; border: none; border-radius: 0;
  overflow: visible; position: relative;
  transition: opacity .5s, filter .5s;
  width: 13cqw;
}
.bc-card.is-boss { width: 17cqw; }
.bc-card.dead    { opacity: .18; filter: grayscale(1) brightness(.4); }

/* Slim HP bar */
.bc-hp-bar-track {
  height: .5cqh; background: rgba(0,0,0,.55); flex-shrink: 0;
  border-radius: .25cqw; overflow: hidden; margin: 0 .25cqw;
}
.bc-hp-bar-fill { height: 100%; transition: width .35s ease, background .3s; }
.hp-green { background: linear-gradient(to right, #1A9A1A, #44DD44); width: 100%; }
.hp-red   { background: linear-gradient(to right, #9A1A1A, #DD4444); width: 100%; }

/* Portrait — element-glow is the frame */
.bc-img-wrap {
  flex: 1; min-height: 10cqh; max-height: 16cqh;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: visible; padding: .3cqh .2cqw;
  filter: drop-shadow(0 0 1.2cqw var(--elem-color, rgba(255,255,255,.12)));
}
.bc-img-wrap img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 .3cqh .8cqw rgba(0,0,0,.9));
}

/* Enemy portrait */
.enemy-portrait { flex-direction: column; gap: .3cqh; position: relative; overflow: hidden; }
.ep-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 15%;
  opacity: .92;
  filter: saturate(1.15) drop-shadow(0 .2cqh .6cqw rgba(0,0,0,.8));
  z-index: 0;
}
.ep-role { font-size: 3.8cqw; line-height: 1; position: relative; z-index: 1; }
.ep-elem { font-size: .65cqw; font-weight: 900; letter-spacing: .1cqw; opacity: .85; position: relative; z-index: 1; }
.ep-boss {
  position: absolute; top: .2cqh; left: 50%; transform: translateX(-50%);
  font-size: .55cqw; font-weight: 900; color: #FFD700;
  background: rgba(0,0,0,.8); border: 1px solid rgba(255,210,26,.5);
  padding: .15cqh .5cqw; border-radius: .25cqw; white-space: nowrap;
  z-index: 2;
}

/* Minimal footer — semi-transparent strip */
.bc-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: .2cqh .35cqw;
  background: rgba(0,0,0,.6); backdrop-filter: blur(2px);
  border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 0 0 .35cqw .35cqw; flex-shrink: 0;
}
.bc-name   { font-size: .65cqw; font-weight: 700; overflow: hidden; text-overflow: ellipsis; flex: 1; color: rgba(255,255,255,.95); }
.bc-hp-lbl { font-size: .55cqw; color: rgba(255,255,255,.4); flex-shrink: 0; margin-left: .2cqw; }

.no-team-msg { font-size: .9cqw; color: rgba(255,255,255,.3); padding: 1.5cqh; text-align: center; }

/* ── Attack animations — role-specific ──────────────────────────────────── */
/* ── ROLE ATTACK ANIMATIONS — very dramatic ── */
/* Fighter: big forward slash */
@keyframes slashRight {
  0%  { transform: translateX(0)    scale(1)    rotate(0deg);   }
  20% { transform: translateX(5%)   scale(1.15) rotate(-12deg); filter: brightness(1.4); }
  45% { transform: translateX(42%)  scale(1.2)  rotate(8deg);   filter: brightness(1.6); }
  100%{ transform: translateX(0)    scale(1)    rotate(0deg);   filter: brightness(1); }
}
@keyframes slashLeft {
  0%  { transform: translateX(0)    scale(1)    rotate(0deg);   }
  20% { transform: translateX(-5%)  scale(1.15) rotate(12deg);  filter: brightness(1.4); }
  45% { transform: translateX(-42%) scale(1.2)  rotate(-8deg);  filter: brightness(1.6); }
  100%{ transform: translateX(0)    scale(1)    rotate(0deg);   filter: brightness(1); }
}
/* Assassin: full vanish + reappear at target */
@keyframes dashRight {
  0%  { transform: translateX(0);    opacity: 1; filter: blur(0);    }
  25% { transform: translateX(10%);  opacity: .6; filter: blur(2px); }
  40% { transform: translateX(55%);  opacity: 0; filter: blur(8px);  }
  65% { transform: translateX(50%);  opacity: 1; filter: blur(0);    }
  100%{ transform: translateX(0);    opacity: 1; }
}
@keyframes dashLeft {
  0%  { transform: translateX(0);    opacity: 1; filter: blur(0);    }
  25% { transform: translateX(-10%); opacity: .6; filter: blur(2px); }
  40% { transform: translateX(-55%); opacity: 0; filter: blur(8px);  }
  65% { transform: translateX(-50%); opacity: 1; filter: blur(0);    }
  100%{ transform: translateX(0);    opacity: 1; }
}
/* Mage: rises up while casting, glows intensely */
@keyframes castAnim {
  0%  { transform: translateY(0) scale(1);    filter: brightness(1); }
  25% { transform: translateY(-8%)  scale(1.06); filter: brightness(1.5); }
  50% { transform: translateY(-16%) scale(1.12); filter: brightness(2.2) drop-shadow(0 0 1cqw rgba(200,100,255,1)); }
  100%{ transform: translateY(0) scale(1);    filter: brightness(1); }
}
/* Tank: huge stomp — rises high then crashes down */
@keyframes slamAnim {
  0%  { transform: translateY(0) scale(1); }
  20% { transform: translateY(-18%) scale(1.15); }
  50% { transform: translateY(8%) scale(.9) skewY(3deg); filter: brightness(1.5); }
  70% { transform: translateY(-4%) scale(1.05); }
  100%{ transform: translateY(0) scale(1) skewY(0); filter: brightness(1); }
}
/* Support: radiant healing pulse */
@keyframes supportAnim {
  0%  { filter: brightness(1); }
  30% { filter: brightness(1.8) drop-shadow(0 0 1.5cqw rgba(100,255,150,.9)) saturate(1.5); transform: scale(1.1); }
  100%{ filter: brightness(1); transform: scale(1); }
}

@keyframes hitShake { 0%,100%{transform:translateX(0)} 18%{transform:translateX(-6px)} 36%{transform:translateX(4px)} 54%{transform:translateX(-3px)} 72%{transform:translateX(2px)} }
@keyframes hitFlash { 0%,100%{filter:none} 15%{filter:brightness(3) saturate(0)} 40%{filter:brightness(1.5)} }

.anim-slash-r { animation: slashRight  .38s ease-out; z-index: 5; }
.anim-slash-l { animation: slashLeft   .38s ease-out; z-index: 5; }
.anim-dash-r  { animation: dashRight   .38s ease-in-out; z-index: 5; }
.anim-dash-l  { animation: dashLeft    .38s ease-in-out; z-index: 5; }
.anim-cast    { animation: castAnim    .44s ease-in-out; z-index: 5; }
.anim-slam    { animation: slamAnim    .42s ease-out; z-index: 5; }
.anim-support { animation: supportAnim .55s ease-in-out; z-index: 5; }
.anim-hit     { animation: hitShake .36s ease-in-out, hitFlash .36s ease-in-out; }

/* ── Mage projectile ─────────────────────────────────────────────────────── */
.battle-projectile {
  position: absolute; z-index: 100; pointer-events: none;
  width: max(8px, .75cqw); height: max(8px, .75cqw); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95), var(--pcolor, #fff));
  box-shadow: 0 0 .6cqw var(--pcolor, #fff), 0 0 1.8cqw var(--pcolor, #fff), 0 0 3.5cqw var(--pcolor, #fff);
  transform-origin: 0 0;
  animation: projFly .28s ease-out forwards;
}
@keyframes projFly {
  from { transform: rotate(var(--pangle)) translateX(0);             opacity: 1; }
  to   { transform: rotate(var(--pangle)) translateX(var(--pdist));  opacity: 0; }
}

/* ── Skill indicator bar on battle cards ─────────────────────────────── */
.bc-skill-bar {
  display: flex; justify-content: center; gap: .5cqw;
  padding: .25cqh .3cqw .3cqh;
  background: rgba(0,0,0,.45);
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.bc-skill-dot {
  display: flex; flex-direction: column; align-items: center;
  opacity: .35; transition: opacity .25s, transform .25s;
  cursor: default;
}
.bc-skill-dot.bc-skill-next { opacity: .65; }
.bc-skill-dot.bc-skill-active {
  opacity: 1; transform: scale(1.25);
}
.bc-sk-icon { font-size: .7cqw; line-height: 1; }
.bc-sk-name { font-size: .45cqw; color: rgba(255,255,255,.5); font-weight: 700; letter-spacing: .04cqw; }
.bc-skill-dot.bc-skill-active .bc-sk-name { color: var(--gold); }

/* Attack name label — floats above the attacker card */
.atk-label {
  position: absolute; top: -1.8cqh; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.75); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: .65cqw; font-weight: 900; letter-spacing: .06cqw;
  padding: .15cqh .55cqw; border-radius: .3cqw;
  white-space: nowrap; pointer-events: none; z-index: 30;
  animation: atkLabelPop .9s ease-out forwards;
}
@keyframes atkLabelPop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(.5cqh); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-1cqh); }
}

/* Attack VFX — PNG pixel art splash */
.attack-vfx-img {
  position: absolute;
  object-fit: contain; pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: vfxPop .72s ease-out forwards;
  z-index: 200;
  filter: drop-shadow(0 0 .6cqw rgba(255,255,255,.55));
}
.attack-vfx-img.vfx-sm  { width:10cqw; height:10cqw; }
.attack-vfx-img.vfx-md  { width:13cqw; height:13cqw; }
.attack-vfx-img.vfx-lg  { width:17cqw; height:17cqw; }
.attack-vfx-img.vfx-heal {
  animation: vfxHeal .85s ease-out forwards;
  width:11cqw; height:11cqw;
}
@keyframes vfxPop {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.15) rotate(-8deg); }
  28%  { opacity:1; transform:translate(-50%,-50%) scale(1.18) rotate(3deg); }
  65%  { opacity:1; transform:translate(-50%,-50%) scale(.98) rotate(0deg); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(.85) rotate(2deg); }
}
@keyframes vfxHeal {
  0%   { opacity:0; transform:translate(-50%,-60%) scale(.2); }
  35%  { opacity:1; transform:translate(-50%,-50%) scale(1.1); }
  70%  { opacity:.9; transform:translate(-50%,-50%) scale(1.0); }
  100% { opacity:0; transform:translate(-50%,-70%) scale(.9); }
}

/* ══ SHOP ════════════════════════════════════════════════════════════════ */
.shop-title-lbl {
  font-size: 1.5cqw; font-weight: 900; letter-spacing: .25cqw; color: var(--gold);
}
.shop-hud {
  display: flex; gap: 1.5cqw; margin-left: auto;
  font-size: 1.0cqw; align-items: center;
}
.shop-hud .hud-res { gap: .35cqw; display: flex; align-items: center; }

.shop-body {
  position: relative; z-index: 2;
  flex: 1; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 2.5cqw; padding: 2cqh 4cqw;
}

.shop-card {
  flex: 1; max-width: 26cqw;
  background: rgba(6,3,14,.9);
  border: 1px solid rgba(200,167,64,.2);
  border-radius: .8cqw; padding: 2cqh 2cqw;
  display: flex; flex-direction: column; align-items: center; gap: .8cqh;
  position: relative; overflow: hidden;
  box-shadow: 0 .5cqh 2cqh rgba(0,0,0,.6);
  transition: transform .12s, border-color .12s;
}
.shop-card:hover { transform: translateY(-.3cqh); border-color: rgba(200,167,64,.4); }

.shop-card-featured {
  border-color: rgba(255,210,26,.45);
  box-shadow: 0 0 2cqw rgba(255,210,26,.2), 0 .5cqh 2cqh rgba(0,0,0,.6);
}
.shop-card-featured:hover { border-color: var(--gold); }

.shop-card-badge {
  position: absolute; top: .8cqh; right: .8cqh;
  font-size: .65cqw; font-weight: 900; letter-spacing: .1cqw;
  color: rgba(255,255,255,.5); background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  padding: .2cqh .5cqw; border-radius: .25cqw;
}
.badge-gold { color: var(--gold); border-color: rgba(255,210,26,.3); background: rgba(80,60,0,.5); }

.shop-card-icon { font-size: 4cqw; }
.shop-card-name { font-size: 1.3cqw; font-weight: 900; letter-spacing: .15cqw; text-align: center; }
.shop-card-desc { font-size: .85cqw; color: rgba(255,255,255,.55); text-align: center; line-height: 1.4; }

.shop-card-cost { font-size: 1.15cqw; font-weight: 700; }
.cost-gold { color: var(--gold); }
.cost-gems { color: var(--r4); }

.shop-buy-btn { width: 80%; justify-content: center; }

.shop-card-stock { font-size: .75cqw; color: rgba(255,255,255,.3); }

.shop-info {
  position: relative; z-index: 2; flex-shrink: 0;
  text-align: center; font-size: .78cqw;
  color: rgba(255,255,255,.3); padding: .8cqh;
  background: rgba(0,0,0,.5); letter-spacing: .05cqw;
}

/* ══ CONSISTENT DESIGN TOKENS ════════════════════════════════════════════
   All screens share these values for visual unity
═════════════════════════════════════════════════════════════════════════ */

/* Universal panel overlay (quest, bp, ach, equip picker, etc.) */
.game-panel {
  position: absolute; inset: 0; z-index: 85;
  background: rgba(4,2,14,.96);
  display: flex; flex-direction: column;
  animation: fadeInUp .28s ease-out;
  overflow: hidden;
  border: none;
}

/* Universal panel header */
.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85cqh 1.5cqw; flex-shrink: 0;
  background: rgba(0,0,0,.5);
  border-bottom: 1px solid rgba(200,167,64,.18);
}
.panel-title {
  font-size: 1.3cqw; font-weight: 900; letter-spacing: .22cqw; color: var(--gold);
}
.panel-close {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: .35cqw; color: rgba(255,255,255,.6); font-size: 1.1cqw;
  padding: .25cqh .6cqw; cursor: pointer;
  touch-action: manipulation;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.panel-close:hover  { background: rgba(255,255,255,.18); color: #fff; }
.panel-close:active { transform: scale(0.90); }

/* All section labels unified */
.section-lbl, .skills-title, .quest-section-lbl {
  font-size: .82cqw; font-weight: 900; letter-spacing: .2cqw;
  color: rgba(160,140,190,.7);
  padding: .55cqh 1.2cqw .3cqh;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}

/* All screen headers unified */
.screen-header {
  min-height: 8cqh !important;
  background: rgba(0,0,0,.72) !important;
  border-bottom: 1px solid rgba(200,167,64,.15) !important;
}

/* ══ Scrollbars ══════════════════════════════════════════════════════════ */
::-webkit-scrollbar       { width: .3cqw; height: .3cqw; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.2); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: .15cqw; }

/* ══ SUMMON ANIMATION (portal-based) ════════════════════════════════════ */
.summon-flash {
  position: absolute; inset: 0; z-index: 25; pointer-events: none;
  border-radius: 50%; animation: sfPop .55s ease-out forwards;
}
.flash-legendary { background: radial-gradient(circle, rgba(255,210,50,.9), rgba(200,150,0,.3) 50%, transparent 70%); }
.flash-epic      { background: radial-gradient(circle, rgba(100,180,255,.8), rgba(40,80,200,.3) 50%, transparent 70%); }
.flash-rare      { background: radial-gradient(circle, rgba(200,200,255,.6), rgba(80,80,150,.2) 50%, transparent 70%); }
@keyframes sfPop {
  0%   { transform: scale(0); opacity: 1; }
  55%  { transform: scale(2.5); opacity: .8; }
  100% { transform: scale(4); opacity: 0; }
}

.legendary-burst {
  position: absolute; inset: -10%; z-index: 24; pointer-events: none;
  background: radial-gradient(circle, rgba(255,215,30,.7) 0%, rgba(255,150,0,.25) 35%, transparent 60%);
  animation: legendBurst 1s ease-out forwards;
}
@keyframes legendBurst {
  0%   { opacity: 1; transform: scale(.5); }
  45%  { opacity: 1; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(2.5); }
}

/* ══ SUMMON x10 OVERLAY ══════════════════════════════════════════════════ */
.summon10-overlay {
  position: absolute; inset: 0; z-index: 30;
  background: rgba(3,1,12,.94);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.5cqh; padding: 1.5cqh 2cqw;
  animation: fadeInUp .3s ease-out;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(2cqh); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 10× Summon Overlay — clean, professional */
.summon10-overlay {
  background: rgba(4,2,14,.97);
}
.summon10-overlay.has-legendary {
  background: radial-gradient(ellipse at 50% 0%, rgba(60,30,0,.95) 0%, rgba(4,2,14,.97) 55%);
}
.summon10-overlay.has-epic {
  background: radial-gradient(ellipse at 50% 0%, rgba(0,20,55,.95) 0%, rgba(4,2,14,.97) 55%);
}

.summon10-title {
  font-size: 1.8cqw; font-weight: 900; letter-spacing: .5cqw;
  color: rgba(255,255,255,.7); text-shadow: none;
  margin-bottom: .3cqh;
}

/* 2 rows of 5 cards — bigger and more airy */
.summon10-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto auto;
  gap: .8cqh .8cqw;
  width: 92%;
  max-width: 92%;
}

.s10-card {
  position: relative; border-radius: .6cqw; overflow: hidden;
  background: rgba(12,8,26,.92);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; align-items: center;
  padding: .7cqh .5cqw .55cqh;
  animation: s10Pop .38s cubic-bezier(.2,1.3,.5,1) both;
  animation-delay: var(--delay, 0s);
  transition: transform .12s;
}
.s10-card:hover { transform: translateY(-.25cqh) scale(1.04); }

@keyframes s10Pop {
  from { transform: translateY(1.5cqh) scale(.85); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.s10-card.r5 {
  border-color: rgba(255,210,26,.5);
  background: linear-gradient(175deg, #221200, #301a00);
  box-shadow: 0 0 1.2cqw rgba(255,210,26,.4);
  animation: s10Pop .38s cubic-bezier(.2,1.3,.5,1) both,
             s10Gold 2.2s ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s), calc(var(--delay, 0s) + .4s);
}
.s10-card.r4 {
  border-color: rgba(100,180,255,.4);
  background: linear-gradient(175deg, #001422, #001c2e);
  box-shadow: 0 0 .8cqw rgba(100,180,255,.35);
}
@keyframes s10Gold {
  from { box-shadow: 0 0 1.2cqw rgba(255,210,26,.35); }
  to   { box-shadow: 0 0 2.8cqw rgba(255,210,26,.7); }
}

.s10-card img {
  width: 90%; aspect-ratio: 1; object-fit: contain;
  filter: drop-shadow(0 .15cqh .4cqw rgba(0,0,0,.8));
}
.s10-stars { font-size: 1.0cqw; letter-spacing: .06cqw; text-shadow: 0 0 .5cqw currentColor; margin-top: .2cqh; }
.s10-name  { font-size: .7cqw; font-weight: 700; color: rgba(255,255,255,.8); text-align: center; }

/* ══ DEFEAT OVERLAY ══════════════════════════════════════════════════════ */
.defeat-overlay {
  position: absolute; inset: 0; z-index: 60;
  background: rgba(3,0,8,.92);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.4cqh; padding: 2cqh 3cqw;
  animation: fadeInUp .4s ease-out;
}
.defeat-skull {
  font-size: 6.5cqw; line-height: 1; color: #CC3333;
  filter: drop-shadow(0 0 1cqw rgba(255,50,50,.55));
  animation: defeatPulse 1.6s ease-in-out infinite alternate;
}
@keyframes defeatPulse {
  from { transform: scale(1);    filter: drop-shadow(0 0 .5cqw rgba(255,50,50,.4)); }
  to   { transform: scale(1.06); filter: drop-shadow(0 0 1.8cqw rgba(255,50,50,.7)); }
}
.defeat-title {
  font-size: 3.8cqw; font-weight: 900; letter-spacing: .6cqw;
  color: #FF4444; text-shadow: 0 0 2cqw rgba(255,60,60,.5);
}
.defeat-info { font-size: 1.5cqw; color: rgba(255,255,255,.65); letter-spacing: .12cqw; }
.defeat-best { font-size: 1.3cqw; color: rgba(100,200,255,.7); letter-spacing: .08cqw; }
.defeat-consolation { font-size: 1.2cqw; color: rgba(255,215,0,.6); }
.defeat-btns { display: flex; gap: 1.5cqw; margin-top: .8cqh; flex-wrap: wrap; justify-content: center; }

/* ══ GACHA QoL ELEMENTS ══════════════════════════════════════════════════ */

/* HUD achievement button */
.hud-ach-btn {
  background: none; border: none; cursor: pointer;
  font-size: max(14px, 1.5cqw); line-height: 1; padding: .3cqh .5cqw;
  color: rgba(255,215,0,.7); transition: color .15s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.hud-ach-btn:hover { color: #FFD700; }

/* Pity bars */
.pity-item { display: flex; align-items: center; gap: .5cqw; }
.pity-lbl  { font-size: .9cqw; color: rgba(255,255,255,.6); white-space: nowrap; }
.pity-lbl b { color: var(--gold); }
.pity-track { width: 6cqw; height: .55cqh; background: rgba(255,255,255,.12); border-radius: .3cqh; overflow: hidden; }
.pity-bar4  { height: 100%; background: linear-gradient(to right, #0A3A6A, var(--r4)); transition: width .4s; border-radius: .3cqh; }
.pity-bar5  { height: 100%; background: linear-gradient(to right, #3A2000, var(--gold)); transition: width .4s; border-radius: .3cqh; }
.pity-bar5.soft { background: linear-gradient(to right, #7A4000, #FFD700); box-shadow: 0 0 .3cqw rgba(255,210,26,.6); }

/* Sort tabs */
.sort-tabs { display: flex; gap: .3cqw; margin-left: .6cqw; }
.stab {
  padding: .35cqh .8cqw;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .3cqw; color: rgba(255,255,255,.5);
  font-size: .85cqw; font-weight: 700;
  cursor: pointer; transition: background .12s, border-color .12s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.stab:hover  { background: rgba(255,255,255,.12); }
.stab.active { background: rgba(255,255,255,.16); border-color: var(--gold); color: var(--gold); }

/* Level badge on monster cards */
.card-level {
  position: absolute; bottom: 1.6cqh; right: .3cqw; z-index: 3;
  background: rgba(0,0,0,.75); color: rgba(255,255,255,.85);
  font-size: .6cqw; font-weight: 900; padding: .1cqh .35cqw;
  border-radius: .2cqw; border: 1px solid rgba(255,255,255,.15);
}

/* Awakening badge (stars) on cards */
.card-awaken-badge {
  position: absolute; top: .3cqh; right: .3cqw; z-index: 3;
  color: #B060FF; font-size: .62cqw; font-weight: 900;
  text-shadow: 0 0 .3cqw rgba(180,80,255,.8);
}

/* Duplicate badge on monster cards */
.card-dup-badge {
  position: absolute; top: .3cqh; left: .3cqw; z-index: 3;
  background: rgba(0,0,0,.75); color: var(--gold);
  font-size: .55cqw; font-weight: 900; padding: .1cqh .3cqw;
  border-radius: .25cqw; border: 1px solid rgba(255,210,26,.3);
}

/* Favorite button in monster detail */
.detail-name-row { display: flex; align-items: center; gap: .6cqw; justify-content: center; }
.btn-favorite {
  background: none; border: 1px solid rgba(255,255,255,.18); border-radius: .35cqw;
  color: rgba(255,255,255,.3); font-size: 1.3cqw; padding: .2cqh .55cqw;
  cursor: pointer; transition: color .15s, border-color .15s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.btn-favorite:hover  { color: rgba(255,80,100,.7); border-color: rgba(255,80,100,.4); }
.btn-favorite.is-fav { color: #FF4466; border-color: rgba(255,68,102,.55); text-shadow: 0 0 .5cqw rgba(255,60,100,.6); }

/* EXP bar in monster detail */
.detail-exp-bar {
  width: 80%; height: .5cqh; background: rgba(255,255,255,.1);
  border-radius: .25cqh; overflow: hidden; margin: .2cqh auto 0;
}
.detail-exp-fill {
  height: 100%; width: 0%;
  background: linear-gradient(to right, #3A80FF, #88C0FF);
  transition: width .5s ease; border-radius: .25cqh;
}
.detail-exp-lbl {
  font-size: .72cqw; color: rgba(100,180,255,.6);
  text-align: center; margin-top: .15cqh;
}

/* Favorite badge on monster cards */
.card-fav-badge {
  position: absolute; top: .25cqh; left: .25cqw; z-index: 3;
  color: #FF4466; font-size: .7cqw;
  text-shadow: 0 0 .4cqw rgba(255,68,102,.8), 0 0 .2cqw #000;
}

/* ── Battle card level badge ─────────────────────────────────────────── */
.bc-level-badge {
  position: absolute; top: .3cqh; right: .3cqw; z-index: 10;
  background: rgba(0,0,0,.75); border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.9); font-size: .6cqw; font-weight: 900;
  padding: .12cqh .45cqw; border-radius: .25cqw; letter-spacing: .05cqw;
}

/* ── Skill upgrade UI — prominent, compelling ─────────────────────────── */
.skup-level-row {
  display: flex; align-items: center; gap: .5cqw; margin: .25cqh 0 .15cqh;
}
.skup-pips { display: flex; gap: .2cqw; }
.skup-pip {
  width: .9cqw; height: .4cqh; border-radius: .2cqw;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.12);
  transition: background .2s;
}
.skup-pip-filled {
  background: linear-gradient(to right, #7B2FBE, #C060FF);
  border-color: rgba(200,120,255,.6);
  box-shadow: 0 0 .3cqw rgba(180,80,255,.6);
}
.skup-lv-txt { font-size: .65cqw; color: rgba(255,255,255,.5); }
.skup-bonus  { color: #FFD700; }
.skup-big-btn {
  width: 100%; margin-top: .3cqh;
  background: linear-gradient(135deg, rgba(80,30,160,.7), rgba(140,60,220,.5));
  border: 1px solid rgba(180,100,255,.55);
  color: rgba(220,190,255,.95); font-size: .72cqw; font-weight: 900;
  padding: .4cqh .6cqw; border-radius: .35cqw; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  touch-action: manipulation; transition: filter .12s, transform .1s;
}
.skup-big-btn:hover { filter: brightness(1.3); }
.skup-big-btn:active { transform: scale(.96); }
.skup-cost { color: var(--gold); font-weight: 900; }
.skup-maxed { font-size: .65cqw; color: var(--gold); text-align: center; padding: .3cqh 0; font-weight: 900; }

/* Dungeon: bigger, more visible battle cards */
.bc-card        { width: 15cqw; }
.bc-card.is-boss { width: 20cqw; }
.bc-hp-bar-track { height: .7cqh; margin: 0 .2cqw; }
.bc-hp-lbl       { font-size: .62cqw; color: rgba(255,255,255,.55); }
.bc-img-wrap { min-height: 11cqh; max-height: 17cqh; filter: drop-shadow(0 0 1.5cqw var(--elem-color, rgba(255,255,255,.15))); }
.ep-role { font-size: 4.2cqw; }

/* Skills title inside the left panel */
.skills-title {
  font-size: .8cqw; font-weight: 900; letter-spacing: .18cqw;
  color: rgba(160,140,190,.75);
  padding: .6cqh 1cqw .3cqh;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.skill-cards { display: flex; flex-direction: column; gap: .3cqh; padding: .4cqh .7cqw .6cqh; }

.skill-card {
  padding: .5cqh .8cqw; border-radius: .45cqw;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  cursor: default; transition: background .12s;
}
.skill-card:hover { background: rgba(255,255,255,.08); }
.skill-basic { border-left: 3px solid rgba(150,150,150,.5); }
.skill-combo { border-left: 3px solid rgba(100,160,255,.7); }
.skill-ult   { border-left: 3px solid rgba(255,200,50,.7); background: rgba(255,200,50,.04); }

.skill-header {
  display: flex; align-items: center; gap: .4cqw; margin-bottom: .2cqh;
}
.skill-icon  { font-size: 1.1cqw; }
.skill-name  { font-size: .85cqw; font-weight: 900; color: rgba(255,255,255,.9); flex: 1; }
.skill-tier  { font-size: .6cqw; font-weight: 900; letter-spacing: .08cqw; padding: .1cqh .35cqw; border-radius: .2cqw; }
.skill-basic .skill-tier { background: rgba(150,150,150,.2); color: rgba(200,200,200,.7); }
.skill-combo .skill-tier { background: rgba(60,100,220,.25); color: #88AAFF; }
.skill-ult   .skill-tier { background: rgba(200,150,0,.25);  color: #FFD700; }
.skill-desc  { font-size: .72cqw; color: rgba(255,255,255,.5); line-height: 1.35; margin-bottom: .15cqh; }
.skill-power { font-size: .68cqw; font-weight: 700; color: rgba(150,200,255,.65); }

/* Awakening section */
.awaken-section { flex-shrink: 0; padding: .5cqh 1.2cqw; border-bottom: 1px solid rgba(255,255,255,.06); }
.awaken-btn { width: 100%; justify-content: center; }
.detail-awaken { font-size: .8cqw; font-weight: 900; letter-spacing: .1cqw; text-align: center; margin-top: .2cqh; }
.detail-power-tier { font-size: .72cqw; font-weight: 900; letter-spacing: .2cqw; text-align: center; margin-top: .15cqh; opacity: 0.9; }
.detail-passive { font-size: .65cqw; color: rgba(200,180,255,.75); text-align: center; margin-top: .1cqh; line-height: 1.4; }


/* Shop wide card (featured bundle) */
.shop-card-wide { flex-basis: 100%; max-width: 100%; }

/* Shop 6-item grid */
.shop-body { display: flex; flex-wrap: wrap; align-items: stretch; }

/* Daily login popup */
.daily-overlay {
  position: absolute; inset: 0; z-index: 80;
  background: rgba(3,1,12,.93);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.5cqh; padding: 2cqh 3cqw;
  animation: fadeInUp .35s ease-out;
}
.daily-title  { font-size: 2.2cqw; font-weight: 900; letter-spacing: .3cqw; color: var(--gold); text-shadow: 0 0 1.5cqw rgba(255,210,26,.6); }
.daily-streak { font-size: 1.2cqw; color: rgba(255,255,255,.55); }
.daily-reward-box {
  display: flex; align-items: center; gap: 1cqw;
  background: rgba(255,210,26,.08); border: 1px solid rgba(255,210,26,.3);
  border-radius: .8cqw; padding: 1.5cqh 3cqw;
}
.daily-gem-icon { font-size: 3cqw; }
.daily-gem-val  { font-size: 3.5cqw; font-weight: 900; color: var(--gold); }
.daily-gem-lbl  { font-size: 1.0cqw; color: rgba(255,255,255,.5); }
.daily-days {
  display: flex; gap: .5cqw;
}
.daily-day {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3cqh;
  padding: .5cqh .4cqw; border-radius: .4cqw;
  border: 1px solid rgba(255,255,255,.1);
  font-size: .65cqw; color: rgba(255,255,255,.4);
}
.daily-day.claimed { background: rgba(255,255,255,.06); color: rgba(255,255,255,.25); text-decoration: line-through; }
.daily-day.today   { background: rgba(255,210,26,.12); border-color: var(--gold); color: var(--gold); font-weight: 900; }

/* Achievement toast */
.achievement-toast {
  position: absolute; top: 10cqh; right: 1cqw; z-index: 100;
  display: flex; align-items: center; gap: 1cqw;
  background: rgba(6,3,18,.96); border: 1px solid rgba(255,210,26,.45);
  border-radius: .6cqw; padding: .8cqh 1.5cqw;
  box-shadow: 0 .5cqh 2cqh rgba(0,0,0,.7), 0 0 1.5cqw rgba(255,210,26,.2);
  transform: translateX(120%); transition: transform .4s cubic-bezier(.18,1.2,.55,1);
  min-width: 18cqw;
}
.achievement-toast.ach-show { transform: translateX(0); }
.ach-icon  { font-size: 2.2cqw; flex-shrink: 0; }
.ach-name  { font-size: 1.0cqw; font-weight: 900; color: var(--gold); }
.ach-desc  { font-size: .8cqw; color: rgba(255,255,255,.55); }

/* Achievements overlay */
.ach-overlay {
  position: absolute; inset: 0; z-index: 90;
  background: rgba(3,1,12,.96);
  display: flex; flex-direction: column;
  animation: fadeInUp .3s ease-out;
}
.ach-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1cqh 1.5cqw; background: rgba(0,0,0,.5);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ach-title { font-size: 1.4cqw; font-weight: 900; letter-spacing: .2cqw; color: var(--gold); }
.ach-title span { color: rgba(255,255,255,.4); font-size: 1.0cqw; margin-left: .8cqw; }
.ach-list  { flex: 1; overflow-y: auto; padding: .5cqh 1cqw; display: flex; flex-direction: column; gap: .4cqh; }
.ach-item  {
  display: flex; align-items: center; gap: 1cqw;
  padding: .7cqh 1cqw; border-radius: .45cqw;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
}
.ach-item.done { background: rgba(255,210,26,.06); border-color: rgba(255,210,26,.2); }
.ach-item-icon { font-size: 1.2cqw; color: rgba(255,255,255,.25); flex-shrink: 0; }
.ach-item.done .ach-item-icon { color: var(--gold); }
.ach-item-name { font-size: .9cqw; font-weight: 700; color: rgba(255,255,255,.8); }
.ach-item-desc { font-size: .75cqw; color: rgba(255,255,255,.4); }
.ach-item-reward { margin-left: auto; font-size: .8cqw; color: rgba(100,200,255,.7); flex-shrink: 0; }

/* Battle summary overlay */
.battle-summary {
  position: absolute; bottom: 9cqh; left: 50%; transform: translateX(-50%);
  z-index: 55; background: rgba(5,2,14,.96);
  border: 1px solid rgba(255,210,26,.3); border-radius: .8cqw;
  padding: 1.2cqh 2cqw; min-width: 30cqw;
  display: flex; flex-direction: column; align-items: center; gap: 1cqh;
  animation: fadeInUp .35s ease-out;
  box-shadow: 0 .5cqh 2cqh rgba(0,0,0,.7);
}
.bs-title { font-size: 1.1cqw; font-weight: 900; letter-spacing: .2cqw; color: var(--gold); }
.bs-stats { display: flex; gap: 2.5cqw; }
.bs-stat  { display: flex; flex-direction: column; align-items: center; gap: .2cqh; }
.bs-val   { font-size: 2.0cqw; font-weight: 900; color: #fff; }
.bs-lbl   { font-size: .72cqw; color: rgba(255,255,255,.45); }

/* ══ FLOATING DAMAGE NUMBERS ═════════════════════════════════════════════ */
.float-dmg {
  position: absolute; top: 25%; left: 50%;
  transform: translateX(-50%);
  font-size: 1.1cqw; font-weight: 900;
  color: #FF9966;
  text-shadow: 0 0 .3cqw rgba(0,0,0,1), 0 0 .3cqw rgba(0,0,0,1);
  pointer-events: none; z-index: 20;
  white-space: nowrap;
  animation: floatUp 1.0s ease-out forwards;
}
.float-crit {
  color: #FFD700; font-size: 1.4cqw;
  text-shadow: 0 0 .5cqw rgba(255,210,0,.8), 0 0 .3cqw rgba(0,0,0,1);
}
@keyframes floatUp {
  0%   { transform: translateX(-50%) translateY(0); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translateX(-50%) translateY(-4cqh); opacity: 0; }
}

/* ══ BANNER CARD — unified two-half selector ══════════════════════════════ */
.banner-card {
  display: flex; width: 100%; border-radius: .7cqw; overflow: hidden;
  border: 1px solid rgba(150,90,255,.35); margin-bottom: .6cqh;
  background: rgba(8,4,22,.85);
  box-shadow: 0 .3cqh 1.5cqh rgba(0,0,0,.55);
}
.banner-half {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: .7cqh 1cqw; cursor: pointer; position: relative;
  transition: background .18s; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.banner-half-std  { background: rgba(35,12,80,.6); }
.banner-half-ft   { background: rgba(18,4,44,.75); }
.banner-half.active.banner-half-std {
  background: linear-gradient(140deg, #3A1090 0%, #5828B0 100%);
  box-shadow: inset 0 0 2cqw rgba(180,120,255,.2);
}
.banner-half.active.banner-half-ft {
  background: linear-gradient(140deg, #2A0845 0%, #6010A0 100%);
  box-shadow: inset 0 0 2cqw rgba(220,80,180,.18);
}
.banner-half:hover { filter: brightness(1.18); }
.banner-divider { width: 1px; background: rgba(160,100,255,.28); flex-shrink: 0; }
.banner-half-inner { display:flex; flex-direction:column; align-items:center; gap:.15cqh; }
.bh-label  { font-size: .85cqw; font-weight: 900; letter-spacing: .15cqw; color: #fff; }
.bh-sub    { font-size: .62cqw; color: rgba(255,255,255,.4); }
.bh-rate   { font-size: .65cqw; font-weight: 700; color: rgba(255,255,255,.38); }
.bh-rate-ft { color: #FFD700 !important; text-shadow: 0 0 .4cqw rgba(255,200,0,.5); }
.bh-icon   { font-size: 1.6cqw; }
.bh-limited-badge {
  position: absolute; top: .28cqh; right: .3cqw;
  background: linear-gradient(90deg, #CC2244, #FF3366);
  color: #fff; font-size: .5cqw; font-weight: 900; letter-spacing: .1cqw;
  padding: .1cqh .45cqw; border-radius: .2cqw;
}

/* Portal tint when featured */
.portal-wrap.featured-mode .portal-core {
  background: radial-gradient(circle at 45% 40%, #FFD080, #E06020 18%, #601000 44%, #200008 100%) !important;
  box-shadow: 0 0 4cqw rgba(255,180,50,.9), 0 0 9cqw rgba(200,100,0,.55) !important;
}

/* Shop sections */
.shop-section-lbl {
  width: 100%; padding: .55cqh 0 .3cqh; font-size: .8cqw; font-weight: 900;
  letter-spacing: .28cqw; color: rgba(180,155,220,.65);
  border-bottom: 1px solid rgba(200,167,64,.12); flex-basis: 100%;
}
.shop-card-value-line {
  font-size: .7cqw; color: rgba(80,220,120,.7); font-style: italic; text-align: center;
  text-shadow: 0 0 .4cqw rgba(60,200,100,.4);
}

/* ══ DOPAMINE POLISH — Final visual effects ══════════════════════════════ */

/* Resource gain flash — quick gold shimmer when numbers increase */
@keyframes hudValGain {
  0%  { color: #fff; text-shadow: 0 0 1cqw rgba(255,255,200,.8); transform: scale(1.15); }
  100%{ color: inherit; text-shadow: inherit; transform: scale(1); }
}

/* Achievement & reward toasts — more prominent */
.achievement-toast {
  border: 1px solid rgba(255,210,26,.5) !important;
  background: rgba(5,3,14,.98) !important;
  box-shadow: 0 .5cqh 2cqh rgba(0,0,0,.8), 0 0 1.5cqw rgba(255,200,30,.25) !important;
}

/* Stage label in dungeon — gold glow */
.stage-lbl {
  text-shadow: 0 0 1cqw rgba(255,210,26,.45), 0 0 3cqw rgba(255,180,0,.2);
}

/* Battle status bar — more visible */
.battle-status-bar {
  background: rgba(0,0,0,.8) !important;
  border-top: 1px solid rgba(200,167,64,.12) !important;
}
.bsb-win  { color: var(--gold) !important; text-shadow: var(--shadow-glow-gold) !important; font-size: 1.1cqw !important; }
.bsb-lose { color: #FF5555 !important; text-shadow: 0 0 .8cqw rgba(255,60,60,.5) !important; font-size: 1.1cqw !important; }

/* Float damage numbers — more impactful */
.float-dmg  { color: #FF9966; text-shadow: 0 0 .4cqw rgba(255,80,0,.8), 0 0 .2cqw #000; font-weight: 900; }
.float-crit { color: var(--gold); font-size: 1.6cqw; text-shadow: 0 0 .6cqw var(--gold), 0 0 1.2cqw rgba(255,180,0,.6); }

/* Pity bar — more visible */
.pity-bar5.soft {
  background: linear-gradient(to right, #8A4500, var(--gold)) !important;
  box-shadow: 0 0 .5cqw var(--gold) !important;
  animation: pitySoftPulse 1.5s ease-in-out infinite alternate !important;
}
@keyframes pitySoftPulse {
  from { opacity: .8; }
  to   { opacity: 1; box-shadow: 0 0 1cqw var(--gold); }
}

/* Synergy tags — more vivid */
.syn-tag {
  background: rgba(80,40,180,.4) !important;
  border: 1px solid rgba(160,100,255,.55) !important;
  box-shadow: 0 0 .5cqw rgba(140,80,255,.3) !important;
}

/* HP bars — more vibrant colors */
.hp-green { background: linear-gradient(to right, #15880A, #2EDD18) !important; }
.hp-red   { background: linear-gradient(to right, #880A0A, #DD2020) !important; }

/* Awakening indicator on battle cards */
.bc-card.awk-1 { box-shadow: 0 0 1.5cqw rgba(140,80,255,.6) !important; }
.bc-card.awk-2 { box-shadow: 0 0 2.2cqw rgba(180,80,255,.8) !important; }
.bc-card.awk-3 { box-shadow: 0 0 3cqw rgba(255,200,50,.85), 0 0 6cqw rgba(200,150,50,.45) !important; }

/* Home screen — deeper atmosphere on the veil */
#screen-home .home-veil {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.7) 0%,
    rgba(2,0,6,.35) 40%,
    rgba(2,0,6,.45) 70%,
    rgba(0,0,0,.78) 100%
  ) !important;
}

/* Quest badge — pulsing when ready */
.quest-badge, .quest-badge-home {
  animation: badgePulse 1.8s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,68,68,.6); }
  50%     { box-shadow: 0 0 0 .3cqw rgba(255,68,68,.2); }
}

/* Portal core on summon — even more dramatic */
.portal-core {
  box-shadow:
    0 0 5cqw rgba(175,65,255,.95),
    0 0 10cqw rgba(135,42,225,.6),
    0 0 18cqw rgba(105,22,205,.38),
    0 0 30cqw rgba(75,12,185,.2),
    inset 0 0 3cqw rgba(245,195,255,.4) !important;
}

/* Mobile scaling for new design elements */
@container game (max-width: 720px) {
  .shop-section-lbl { font-size: 1.4cqw; letter-spacing: .2cqw; }
  .stage-lbl { font-size: 2.2cqw; }
  .bsb-win, .bsb-lose { font-size: 1.7cqw !important; }
}

/* 10× summon special effects */
.s10-legendary {
  border-color: var(--r5) !important;
  animation: s10Pop .42s cubic-bezier(.2,1.3,.5,1) both,
             s10LegendPulse 1.8s ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s), calc(var(--delay,0s) + .45s);
}
@keyframes s10LegendPulse {
  from { box-shadow: 0 0 1.5cqw rgba(255,215,0,.55); }
  to   { box-shadow: 0 0 4cqw rgba(255,215,0,.9), 0 0 .8cqw rgba(255,180,0,.5); }
}
.s10-epic {
  border-color: var(--r4) !important;
  animation: s10Pop .42s cubic-bezier(.2,1.3,.5,1) both,
             s10EpicPulse 2s ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s), calc(var(--delay,0s) + .45s);
}
@keyframes s10EpicPulse {
  from { box-shadow: 0 0 .8cqw rgba(102,204,255,.45); }
  to   { box-shadow: 0 0 2.5cqw rgba(102,204,255,.85); }
}

/* Spark particles on 4★/5★ cards */
.s10-spark {
  position: absolute; width: .3cqw; height: .3cqw; border-radius: 50%;
  top: 50%; left: 50%; transform-origin: 0 0; pointer-events: none;
  animation: sparkBurst .6s ease-out both;
  animation-delay: var(--pd, 0s);
}
.s10-spark.gold { background: rgba(255,215,0,.9); box-shadow: 0 0 .3cqw rgba(255,200,0,1); }
.s10-spark.blue { background: rgba(100,200,255,.9); box-shadow: 0 0 .3cqw rgba(80,180,255,1); }
@keyframes sparkBurst {
  0%   { transform: rotate(var(--ang)) translateX(0) scale(1); opacity: 1; }
  100% { transform: rotate(var(--ang)) translateX(var(--pd, 2cqw)) scale(0); opacity: 0; }
}

/* NEW badge on unrevealed monsters */
.s10-new-badge {
  position: absolute; top: .3cqh; left: .3cqw;
  background: rgba(80,200,80,.9); color: #fff;
  font-size: .5cqw; font-weight: 900; padding: .1cqh .4cqw;
  border-radius: .2cqw; letter-spacing: .06cqw;
}

/* ══ HUD ICON BUTTONS — bigger, more clickable ══════════════════════════ */

/* ══ SYNERGY STRIP ════════════════════════════════════════════════════════ */
.synergy-strip {
  position: relative; z-index: 2; flex-shrink: 0;
  display: flex; flex-wrap: wrap; gap: .4cqw;
  padding: .35cqh 1.2cqw;
  background: rgba(0,0,0,.5);
  border-top: 1px solid rgba(255,255,255,.05);
  min-height: 3cqh;
  align-items: center;
}
.syn-tag {
  background: rgba(100,60,200,.3); border: 1px solid rgba(140,80,255,.45);
  color: rgba(220,190,255,.9); font-size: .7cqw; font-weight: 700;
  padding: .15cqh .55cqw; border-radius: .25cqw;
  letter-spacing: .05cqw;
}
.syn-none { font-size: .7cqw; color: rgba(255,255,255,.2); font-style: italic; }

/* ══ VISUAL AWAKENING — battle card glow ═════════════════════════════════ */
.bc-card.awk-1 { box-shadow: 0 0 1.2cqw rgba(140,80,255,.55); }
.bc-card.awk-2 { box-shadow: 0 0 1.8cqw rgba(180,80,255,.75); }
.bc-card.awk-3 {
  box-shadow: 0 0 2.5cqw rgba(255,200,50,.8), 0 0 5cqw rgba(200,150,50,.4);
  animation: awkGlow3 2s ease-in-out infinite alternate;
}
@keyframes awkGlow3 {
  from { box-shadow: 0 0 2cqw rgba(255,200,50,.7); }
  to   { box-shadow: 0 0 4cqw rgba(255,215,80,1), 0 0 8cqw rgba(200,150,50,.55); }
}

/* ══ HUD ICON BUTTONS — bigger, fresh design ═══════════════════════════ */
.hud-icon-btn {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2);
  border-radius: .5cqw;
  color: rgba(255,255,255,.7); font-size: max(14px, 1.25cqw);
  padding: .35cqh .65cqw; min-width: 2.8cqw; min-height: 4cqh;
  cursor: pointer; position: relative;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s, transform .1s;
  display: flex; align-items: center; justify-content: center;
}
.hud-icon-btn:hover  { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.45); }
.hud-icon-btn:active { transform: scale(.92); }
.hud-quest-btn { position: relative; }
.quest-badge {
  position: absolute; top: -.4cqh; right: -.4cqw;
  background: #FF4444; color: #fff; font-size: .55cqw; font-weight: 900;
  min-width: 1.2cqw; height: 1.2cqw; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* ══ QUEST PANEL ══════════════════════════════════════════════════════════ */
/* Home progress panel */
.home-progress-panel {
  display: flex; width: 92%; max-width: 92%;
  background: rgba(8,4,22,.88); border: 1px solid rgba(150,90,255,.25);
  border-radius: .8cqw; overflow: hidden;
  box-shadow: 0 .3cqh 1.5cqh rgba(0,0,0,.5);
  flex-shrink: 0; margin-top: .8cqh;
}
.hpp-section {
  flex: 1; display: flex; align-items: center; gap: .6cqw;
  padding: .65cqh .9cqw; cursor: pointer; background: transparent; border: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.hpp-section:hover { background: rgba(255,255,255,.06); }
.hpp-icon   { font-size: 1.4cqw; flex-shrink: 0; }
.hpp-info   { flex: 1; text-align: left; min-width: 0; }
.hpp-title  { font-size: .78cqw; font-weight: 900; color: rgba(255,255,255,.85); letter-spacing: .1cqw; }
.hpp-sub    { font-size: .65cqw; color: rgba(255,255,255,.42); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpp-arrow  { font-size: 1.1cqw; color: rgba(255,255,255,.3); flex-shrink: 0; }
.hpp-badge  {
  display: inline-flex; align-items: center; justify-content: center;
  background: #FF4444; color: #fff; font-size: .55cqw; font-weight: 900;
  min-width: 1.1cqw; height: 1.1cqw; border-radius: 50%; margin-left: .3cqw;
  vertical-align: middle;
}
.hpp-divider { width: 1px; background: rgba(255,255,255,.08); flex-shrink: 0; }

/* Compact floating panels for quest/bp/ach (not full-screen) */
.quest-panel, .bp-panel {
  position: absolute; left: 5%; right: 5%; top: 8%; bottom: 6%; z-index: 85;
  border-radius: 1cqw; background: rgba(4,2,14,.97);
  border: 1px solid rgba(150,90,255,.3);
  display: flex; flex-direction: column;
  animation: fadeInUp .25s ease-out;
  overflow: hidden;
  box-shadow: 0 1cqh 4cqh rgba(0,0,0,.7);
}
.quest-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8cqh 1.5cqw; background: rgba(0,0,0,.5);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.quest-title   { font-size: 1.3cqw; font-weight: 900; letter-spacing: .2cqw; color: var(--gold); }
.quest-section-lbl {
  font-size: .8cqw; font-weight: 900; letter-spacing: .18cqw;
  color: rgba(160,140,190,.7); padding: .6cqh 1.5cqw .2cqh;
  flex-shrink: 0;
}
.quest-card {
  margin: .25cqh 1.2cqw; padding: .7cqh 1cqw;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: .5cqw; flex-shrink: 0;
}
.quest-done    { border-color: rgba(255,210,26,.35); background: rgba(255,210,26,.05); }
.quest-claimed { opacity: .5; }
.quest-desc    { font-size: .85cqw; font-weight: 700; color: rgba(255,255,255,.85); margin-bottom: .4cqh; }
.quest-progress-bar { height: .55cqh; background: rgba(255,255,255,.1); border-radius: .3cqh; overflow:hidden; margin-bottom: .3cqh; }
.quest-progress-fill { height:100%; background: linear-gradient(to right,#3A80FF,#88C0FF); border-radius:.3cqh; transition:width .4s; }
.quest-footer  { display:flex; align-items:center; gap:.8cqw; }
.quest-prog-txt { font-size:.72cqw; color:rgba(255,255,255,.45); flex:1; }
.quest-reward  { font-size:.75cqw; font-weight:900; color:var(--gold); }
.quest-claimed-lbl { font-size:.7cqw; color:rgba(100,255,100,.6); font-weight:900; }

/* ══ BATTLE PASS ══════════════════════════════════════════════════════════ */
.bp-grid {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .4cqh;
  padding: .5cqh 1.2cqw;
}
.bp-day {
  display: flex; gap: .6cqw; align-items: stretch;
  background: rgba(255,255,255,.04); border-radius: .45cqw; padding: .5cqh .8cqw;
}
.bp-unlocked { border: 1px solid rgba(255,210,26,.25); }
.bp-locked   { opacity: .4; border: 1px solid rgba(255,255,255,.08); }
.bp-day-num  { font-size: .75cqw; font-weight: 900; color: var(--gold); width: 3cqw; flex-shrink:0; }
.bp-free, .bp-prem {
  flex: 1; display: flex; gap: .5cqw; align-items: center;
  background: rgba(255,255,255,.05); border-radius: .3cqw; padding: .3cqh .6cqw;
  font-size: .72cqw;
}
.bp-free { border: 1px solid rgba(255,255,255,.12); }
.bp-prem { border: 1px solid rgba(255,210,26,.3); background: rgba(255,210,26,.05); }
.bp-taken { opacity: .4; }
.bp-locked-overlay { opacity: .35; }
.bp-claim-btn {
  background: rgba(255,210,26,.2); border: 1px solid rgba(255,210,26,.4);
  color: var(--gold); font-size: .65cqw; font-weight: 900;
  padding: .1cqh .5cqw; border-radius: .25cqw; cursor: pointer;
  margin-left: auto; touch-action: manipulation;
}

/* ══ EQUIPMENT SLOTS ══════════════════════════════════════════════════════ */
.equip-slots-section { flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.equip-slots { display: flex; flex-direction: column; gap: .35cqh; padding: .4cqh 1cqw .5cqh; }
.equip-slot-row {
  display: flex; align-items: center; gap: .5cqw;
  padding: .35cqh .5cqw; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07); border-radius: .35cqw;
}
.equip-slot-icon { font-size: 1.1cqw; flex-shrink: 0; }
.equip-slot-lbl  { flex: 1; font-size: .72cqw; font-weight: 700; color: rgba(255,255,255,.45); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.equip-slot-btn  {
  background: rgba(100,60,200,.35); border: 1px solid rgba(150,80,255,.5);
  color: rgba(200,170,255,.8); font-size: .8cqw; padding: .1cqh .5cqw;
  border-radius: .25cqw; cursor: pointer; font-weight: 900;
  touch-action: manipulation; flex-shrink: 0;
}
.equip-uneq-btn {
  background: rgba(200,30,30,.25); border: 1px solid rgba(255,80,80,.4);
  color: rgba(255,120,120,.8); font-size: .7cqw; padding: .1cqh .4cqw;
  border-radius: .25cqw; cursor: pointer; font-weight: 900;
  touch-action: manipulation; flex-shrink: 0;
}

/* Equip picker popup */
.equip-picker {
  position: absolute; inset: 0; z-index: 90;
  background: rgba(3,1,12,.96);
  display: flex; flex-direction: column;
  animation: fadeInUp .25s ease-out;
}
.equip-list  { flex: 1; overflow-y: auto; padding: .5cqh 1.2cqw; display: flex; flex-direction: column; gap: .35cqh; }
.equip-item  {
  display: flex; align-items: center; gap: .8cqw; padding: .6cqh .9cqw;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: .4cqw; cursor: pointer; transition: background .12s;
}
.equip-item:hover { background: rgba(255,255,255,.12); }
.equip-stars { font-size: .85cqw; flex-shrink: 0; }
.equip-name  { flex: 1; font-size: .82cqw; font-weight: 700; color: rgba(255,255,255,.85); }
.equip-bonus { font-size: .75cqw; font-weight: 900; color: var(--gold); }
.equip-empty { color: rgba(255,255,255,.3); font-size: .9cqw; padding: 2cqh; text-align: center; }

/* ══ LEVEL UP SECTION ════════════════════════════════════════════════════ */
.lvlup-section {
  flex-shrink: 0; padding: .6cqh 1.2cqw;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column; gap: .5cqh;
}
.lvlup-row {
  display: flex; justify-content: space-between; align-items: center;
}
.lvlup-label { font-size: .75cqw; font-weight: 700; letter-spacing: .15cqw; color: rgba(160,140,190,.75); }
.lvlup-cost  { font-size: .85cqw; font-weight: 700; color: var(--gold); }
.lvlup-btn   { width: 100%; justify-content: center; }

/* ══ VISUAL POLISH — rounded corners, consistent shadows ════════════════ */

/* Battle cards are now frameless — no overrides needed here */

/* Arena headers cleaner */
.arena-header {
  font-size: .95cqw; font-weight: 900; letter-spacing: .22cqw;
  padding: .55cqh 1.2cqw; flex-shrink: 0;
  background: rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

/* Fight bar bigger + more polished */
.fight-bar { border-top: 1.5px solid rgba(255,80,80,.35); }
.fight-btn { letter-spacing: .35cqw; }
.auto-btn, .speed-btn { min-width: 5.5cqw; }

/* Status bar polish */
.battle-status-bar {
  font-style: italic; letter-spacing: .06cqw;
}

/* Monster cards in collection — richer rarity glow */
.r5 { box-shadow: 0 .2cqh 1.2cqh rgba(255,215,0,.25); }
.r4 { box-shadow: 0 .2cqh 1.0cqh rgba(102,204,255,.2); }

/* Inventory right column border */
.inv-right-col { border-left: 1px solid rgba(255,255,255,.06); }

/* Stat bars slightly taller */
.sbar-track { height: 1.1cqh !important; border-radius: .55cqh !important; }

/* Shop cards more spacious */
.shop-card { border-radius: 1cqw; }

/* Summon result image + reveal polish */
.reveal-result { gap: 1cqh; }

/* Home tiles — subtle inner glow on hover */
.nav-tile:hover::before {
  background: linear-gradient(to bottom, rgba(255,255,255,.14) 0%, transparent 50%);
}

/* Scrollbars */
::-webkit-scrollbar       { width: .35cqw; height: .35cqw; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: .2cqw; }

/* ══ MOBILE / TOUCH ══════════════════════════════════════════════════════ */

/* Prevent double-tap zoom and sticky hover on all interactive elements */
button, [data-nav], [data-elem], .monster-card, .team-slot, .nav-tile, .sbtn, .ftab {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* No text selection in-game */
#app { user-select: none; -webkit-user-select: none; }

/* ══ TUTORIAL OVERLAY ════════════════════════════════════════════════════ */
.tutorial-overlay {
  position: absolute; inset: 0; z-index: 200;
  background: rgba(2,1,8,.88);
  display: flex; align-items: center; justify-content: center;
  animation: fadeInUp .35s ease-out;
}
.tut-card {
  width: 52cqw; max-width: 52cqw;
  background: rgba(6,3,18,.97);
  border: 1px solid rgba(255,210,26,.35);
  border-radius: 1cqw; padding: 2cqh 2.5cqw;
  display: flex; flex-direction: column; align-items: center; gap: 1.2cqh;
  box-shadow: 0 1cqh 4cqh rgba(0,0,0,.8), 0 0 3cqw rgba(255,180,30,.12);
  animation: tutCardPop .4s cubic-bezier(.18,1.2,.5,1);
}
@keyframes tutCardPop {
  from { transform: scale(.85) translateY(2cqh); opacity:0; }
  to   { transform: scale(1) translateY(0); opacity:1; }
}
.tut-pips  { display: flex; gap: .5cqw; }
.tut-pip   { width: 1.5cqw; height: .45cqh; border-radius: .25cqh; background: rgba(255,255,255,.15); }
.tut-pip.active { background: var(--gold); box-shadow: 0 0 .5cqw rgba(255,210,26,.6); }
.tut-pip.done   { background: rgba(255,210,26,.4); }
.tut-counter { font-size: .72cqw; color: rgba(255,255,255,.35); letter-spacing: .1cqw; }
.tut-title   { font-size: 2.0cqw; font-weight: 900; letter-spacing: .2cqw; color: var(--gold); text-align: center; text-shadow: 0 0 1.5cqw rgba(255,200,30,.4); }
.tut-text    { font-size: .95cqw; color: rgba(255,255,255,.75); text-align: center; line-height: 1.6; max-width: 42cqw; }
.tut-btn     { font-size: 1.2cqw; padding: .9cqh 3.5cqw; letter-spacing: .2cqw; box-shadow: 0 0 2cqw rgba(255,200,30,.3); }
.tut-skip-btn {
  background: none; border: none; color: rgba(255,255,255,.28);
  font-size: .72cqw; cursor: pointer; letter-spacing: .08cqw;
  touch-action: manipulation;
}
.tut-skip-btn:hover { color: rgba(255,255,255,.55); }

/* ══ WORLD INTRO OVERLAY ════════════════════════════════════════════════ */
.world-intro {
  position: absolute; inset: 0; z-index: 150;
  background: rgba(2,1,8,.9);
  display: flex; align-items: center; justify-content: center;
  animation: fadeInUp .35s ease-out;
}
.wi-content {
  width: 56cqw; background: rgba(6,3,18,.97);
  border: 1px solid var(--wcolor, rgba(255,210,26,.35));
  border-radius: 1cqw; padding: 2.5cqh 3cqw;
  display: flex; flex-direction: column; align-items: center; gap: 1.2cqh;
  box-shadow: 0 0 4cqw rgba(0,0,0,.6), 0 0 2cqw var(--wcolor, rgba(255,210,26,.1));
  animation: tutCardPop .4s cubic-bezier(.18,1.2,.5,1);
}
.wi-realm  { font-size: .72cqw; font-weight: 900; letter-spacing: .3cqw; color: rgba(255,255,255,.4); }
.wi-name   { font-size: 2.8cqw; font-weight: 900; letter-spacing: .3cqw; text-align: center; text-shadow: 0 0 2cqw currentColor; }
.wi-story  { font-size: .92cqw; color: rgba(255,255,255,.7); text-align: center; line-height: 1.65; font-style: italic; }
.wi-stages {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: .4cqw; padding: .3cqh 1.2cqw; font-size: .78cqw;
  color: rgba(255,255,255,.45); letter-spacing: .1cqw;
}

/* iOS safe areas (notch / home indicator) */
#app {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Fullscreen tab — hangs from the top-center edge, conflicts with nothing */
#btn-fullscreen {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 200;
  background: rgba(0,0,0,.5);
  border: none; border-bottom: 1px solid rgba(255,255,255,.15);
  border-radius: 0 0 .6cqw .6cqw;
  color: rgba(255,255,255,.3);
  font-size: max(10px, .85cqw); line-height: 1;
  min-width: 44px; padding: .25cqh 1.5cqw .4cqh;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s, opacity .15s;
}
#btn-fullscreen:hover  { background: rgba(0,0,0,.7); color: rgba(255,255,255,.8); }
#btn-fullscreen:active { opacity: .7; }
/* In fullscreen: keep visible but very subtle — tap to exit */
:fullscreen          #btn-fullscreen { color: rgba(255,255,255,.15); }
:-webkit-full-screen #btn-fullscreen { color: rgba(255,255,255,.15); }
:fullscreen          #btn-fullscreen:hover { color: rgba(255,255,255,.8); }
:-webkit-full-screen #btn-fullscreen:hover { color: rgba(255,255,255,.8); }
@media (display-mode: standalone), (display-mode: fullscreen) {
  #btn-fullscreen { display: none; }
}

/* Portrait-phone orientation hint */
#orient-hint {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
  background: #03010A;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 3vh;
  color: rgba(255,255,255,.7);
}
.orient-icon {
  font-size: 14vw; line-height: 1;
  animation: spin 2.5s linear infinite;
  color: rgba(180,100,255,.8);
}
.orient-content { text-align: center; padding: 5vw; }
.orient-content p { font-size: 4.5vw; letter-spacing: .1em; }

/* Show hint only on narrow portrait phones */
@media screen and (orientation: portrait) and (max-width: 600px) {
  #orient-hint { display: flex; }
}

/* ══ MOBILE — complete layout + size overhaul for containers ≤ 720px ════
   On iPhone 14 landscape the container is ~693×390px → 1cqw ≈ 7px.
   This block scales fonts ~2.2× AND restructures key layouts.
══════════════════════════════════════════════════════════════════════════ */
@container game (max-width: 720px) {

  /* ─── Global shared elements ─── */
  .screen-header { min-height: 9cqh; padding: .7cqh 1.5cqw; gap: 1.5cqw; }
  .back-btn      { font-size: 2.0cqw; padding: .7cqh 1.5cqw; }
  .action-btn    { font-size: 2.2cqw; padding: 1.2cqh 3.2cqw; }
  .btn-sm        { font-size: 1.8cqw; padding: .9cqh 2.2cqw; }
  .section-lbl   { font-size: 1.7cqw; padding: .7cqh 1.5cqw; }

  /* ─── HUD ─── */
  .hud       { min-height: 9cqh; padding: .7cqh 2cqw; }
  .hud-icon  { font-size: 2.2cqw; }
  .hud-val   { font-size: 2.1cqw; }
  .hud-title { font-size: 2.5cqw; }
  .hud-sep   { height: 3cqh; margin: 0 .5cqw; }
  .hud-uid   { display: none; } /* hide uid on mobile — saves space */

  /* ─── LOGIN ─── */
  .game-title     { font-size: 10cqw; letter-spacing: .5cqw; }
  .login-sub      { font-size: 2.2cqw; }
  .login-emblem   { font-size: 4cqw; }
  .login-tagline  { font-size: 2.2cqw; }
  .login-enter-btn{ font-size: 2.4cqw; padding: 1.4cqh 5cqw; }
  .login-content  { padding: 6cqh 0 4cqh; }
  .login-panel    { padding: 3cqh 6cqw; gap: 2cqh; border-radius: 2cqw; }
  .lr-text        { font-size: 1.2cqw; }
  .lr-line        { width: 7cqw; }
  .lr-gem         { font-size: 1.6cqw; }

  /* ─── HOME — 2×2 grid + progress panel ─── */
  .home-main  { padding: .6cqh 0; overflow: hidden; flex-direction: column; align-items: center; gap: .8cqh; }
  .home-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 92%; max-height: 62cqh;
    gap: 1.5cqh 2cqw;
  }
  .nav-tile {
    max-width: none; min-width: none;
    aspect-ratio: 16/9;
    border-radius: 1.5cqw;
  }
  .home-progress-panel { width: 92%; margin-top: 0; }
  .hpp-icon   { font-size: 2.2cqw; }
  .hpp-title  { font-size: 1.4cqw; }
  .hpp-sub    { font-size: 1.1cqw; }
  .hpp-arrow  { font-size: 1.8cqw; }
  .hpp-badge  { font-size: 1.0cqw; min-width: 2cqw; height: 2cqw; }
  .tile-glyph    { font-size: 4.5cqw; }
  .tile-label    { font-size: 2.0cqw; }
  .tile-sublabel { font-size: 1.2cqw; }

  /* ─── SUMMON ─── */
  .summon-topbar   { padding: .6cqh 1.5cqw; }
  .pity-bar        { font-size: 1.8cqw; gap: 1.5cqw; }
  .pity-bar b      { font-size: 2.0cqw; }
  .summon-gem-counter { font-size: 2.1cqw; }
  .portal-wrap     { width: 34cqw; height: 34cqw; }
  .portal-core     { width: 27cqw; height: 27cqw; }
  .portal-tagline  { font-size: 1.8cqw; letter-spacing: .3cqw; }
  .summon-actions  { padding: .9cqh 2.5cqw 1.1cqh; gap: 1cqh; }
  .summon-rate-hint { font-size: 1.3cqw; }
  .summon-hint     { font-size: 1.2cqw; }
  .sbtn            { padding: 1.3cqh 4cqw; min-width: 18cqw; }
  .sbtn-type       { font-size: 1.2cqw; }
  .sbtn-label      { font-size: 2.4cqw; }
  .sbtn-gem        { font-size: 1.6cqw; }
  .sbtn-cost-num   { font-size: 2.0cqw; }
  .sbtn-save       { font-size: 1.0cqw; padding: .15cqh .5cqw; }
  /* Reveal result */
  .res-img    { width: 28cqw; height: 28cqw; }
  .res-name   { font-size: 4.8cqw; }
  .res-stars  { font-size: 3.8cqw; }
  .res-rarity { font-size: 1.9cqw; }
  .res-elem   { font-size: 2.1cqw; }

  /* ─── INVENTORY ─── */
  .inv-header    { min-height: 8cqh; }
  .inv-title     { font-size: 2.2cqw; }
  .inv-status    { font-size: 1.6cqw; }
  .inv-filter-bar { padding: .55cqh 1cqw; }
  .ftab          { font-size: 1.8cqw; padding: .7cqh 1.6cqw; }
  .stab          { font-size: 1.6cqw; padding: .55cqh 1.1cqw; }
  .hud-ach-btn   { font-size: max(18px, 2.2cqw); padding: .4cqh .7cqw; }
  .card-dup-badge { font-size: 1.0cqw; }
  .sell-section  { padding: .8cqh 1.5cqw; }
  .sell-price    { font-size: 1.4cqw; }
  .skill-icon  { font-size: 1.8cqw; }
  .skill-name  { font-size: 1.4cqw; }
  .skill-tier  { font-size: 1.0cqw; padding: .2cqh .55cqw; }
  .skill-desc  { font-size: 1.2cqw; }
  .skill-power { font-size: 1.1cqw; }
  .inv-scroll-strip { height: 36cqh; }
  .monster-grid  { height: 36cqh; gap: 1cqw; padding: .8cqh 1cqw; }
  .monster-card  { height: 33cqh; }
  .card-name         { font-size: 1.2cqw; bottom: 1.6cqh; }
  .card-stars        { font-size: 1.3cqw; }
  .card-level        { font-size: 1.0cqw; padding: .15cqh .5cqw; }
  .card-awaken-badge { font-size: 1.1cqw; }
  .card-dup-badge    { font-size: 1.0cqw; }
  .card-fav-badge    { font-size: 1.2cqw; }
  /* New features mobile */
  .hud-icon-btn      { font-size: max(16px, 2.0cqw); padding: .4cqh .9cqw; min-width: 5cqw; min-height: 5.5cqh; }
  .btab-icon         { font-size: 2.8cqw; }
  .btab-title        { font-size: 1.5cqw; }
  .btab-sub          { font-size: 1.1cqw; }
  .bc-sk-icon        { font-size: 1.2cqw; }
  .bc-sk-name        { font-size: .85cqw; }
  .quest-badge       { font-size: 1.0cqw; min-width: 2cqw; height: 2cqw; }
  .syn-tag           { font-size: 1.2cqw; padding: .25cqh .8cqw; }
  .syn-none          { font-size: 1.2cqw; }
  .fb-icon           { font-size: 3.5cqw; }
  .fb-label          { font-size: 1.1cqw; }
  .fb-name           { font-size: 2.0cqw; }
  .fb-tag            { font-size: 1.1cqw; }
  .fb-rate           { font-size: 1.3cqw; }
  .quest-title       { font-size: 2.0cqw; }
  .quest-section-lbl { font-size: 1.4cqw; }
  .quest-desc        { font-size: 1.4cqw; }
  .quest-prog-txt    { font-size: 1.2cqw; }
  .quest-reward      { font-size: 1.3cqw; }
  .equip-slot-icon   { font-size: 2.0cqw; }
  .equip-slot-lbl    { font-size: 1.2cqw; }
  .equip-slot-btn    { font-size: 1.4cqw; padding: .2cqh .8cqw; }
  .equip-uneq-btn    { font-size: 1.3cqw; padding: .2cqh .7cqw; }
  .equip-name        { font-size: 1.4cqw; }
  .equip-bonus       { font-size: 1.3cqw; }
  .equip-stars       { font-size: 1.4cqw; }
  .bp-day-num        { font-size: 1.3cqw; width: 5cqw; }
  .bp-free, .bp-prem { font-size: 1.2cqw; gap: .8cqw; }
  /* Detail panel side-by-side on mobile */
  .skills-section { width: 44%; }
  .detail-name    { font-size: 2.2cqw; }
  .detail-stars   { font-size: 1.9cqw; }
  .detail-element { font-size: 1.6cqw; }
  /* Skills in mobile */
  .skills-title  { font-size: 1.5cqw; padding: .5cqh 1cqw .3cqh; }
  .skill-card    { padding: .4cqh .6cqw; }
  .skill-icon    { font-size: 1.7cqw; }
  .skill-name    { font-size: 1.3cqw; }
  .skill-tier    { font-size: .9cqw; }
  .skill-desc    { font-size: 1.1cqw; }
  .skill-power   { font-size: 1.0cqw; }
  /* Stat bars */
  .stat-bars  { gap: .9cqh; padding: 1cqh 1.5cqw; }
  .sbar-row   { gap: .8cqw; }
  .sbar-lbl   { font-size: 1.5cqw; width: 4.5cqw; }
  .sbar-track { height: 1.4cqh; }
  .sbar-val   { font-size: 1.5cqw; width: 5.5cqw; }
  /* Level up */
  .lvlup-section { padding: .8cqh 1.5cqw; }
  .lvlup-label   { font-size: 1.5cqw; }
  .lvlup-cost    { font-size: 1.7cqw; }
  /* Team */
  .slot-plus   { font-size: 3.2cqw; }
  .team-slot p { font-size: 1.3cqw; }
  .team-slots  { gap: .7cqw; }
  .team-slot   { max-width: 10cqw; }

  /* ── Inventory right column: team first, rest below ── */
  .inv-right-col {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .team-section   { order: 1; flex-shrink: 0; }
  .stats-section  { order: 2; flex-shrink: 0; }
  .lvlup-section  { order: 3; }
  .awaken-section { order: 4; }
  .sell-section   { order: 5; }
  /* Compact stats to reduce scroll needed */
  .stat-bars     { gap: .5cqh; padding: .55cqh 1.2cqw; }
  .sbar-track    { height: 1.0cqh !important; }
  .lvlup-section { padding: .5cqh 1.2cqw; }
  .sell-section  { padding: .5cqh 1.2cqw; }
  /* Team section: consistent compact look */
  .team-section  { padding: .5cqh .8cqw .6cqw; gap: .5cqh; }
  .team-slots    { flex: none; justify-content: flex-start; }

  /* ─── DUNGEON — stacked layout on mobile ─── */
  .stage-lbl        { font-size: 2.8cqw; }
  .dung-reward-hint { font-size: 1.6cqw; }

  /* Keep side-by-side on mobile too — team left, enemies right */
  .battle-arena { flex-direction: row; }
  .arena-player { border-right: 1px solid rgba(100,180,255,.12); border-bottom: none; }
  .arena-enemy  { border-left:  1px solid rgba(255,80,80,.1);   border-top: none; }
  .arena-cards  { height: 36cqh; }
  .battle-status-bar { font-size: 1.4cqw; min-height: 5cqh; }
  .arena-header   { font-size: 1.8cqw; padding: .45cqh 1.5cqw; }
  .player-header  { border-bottom: none; }
  .enemy-header   { border-bottom: none; }
  /* Horizontal scrolling card rows — taller cards, prominent */
  .arena-cards {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 1.2cqw; padding: .5cqh 1.2cqw;
    align-content: center;
    min-height: 0; height: 28cqh;
  }
  .bc-card       { flex-shrink: 0; width: 22cqw; scroll-snap-align: start; border-radius: 1.2cqw !important; }
  .bc-card.is-boss { width: 28cqw; }
  .bc-name       { font-size: 1.15cqw; }
  .bc-hp-lbl     { font-size: 1.0cqw; }
  .ep-role       { font-size: 6cqw; }
  .ep-elem       { font-size: 1.1cqw; }
  .battle-log    { font-size: 1.4cqw; line-height: 1.55; padding: .45cqh 1.2cqw; }
  .log-hint      { font-size: 1.5cqw; }
  .log-win, .log-lose { font-size: 1.8cqw; }
  .float-dmg     { font-size: 2.0cqw; }
  .float-crit    { font-size: 2.5cqw; }
  .no-team-msg   { font-size: 1.8cqw; }
  .fight-btn     { font-size: 2.5cqw; padding: 1.8cqh 0; letter-spacing: .25cqw; }
  .auto-btn, .speed-btn { font-size: 1.8cqw; padding: 0 2cqw; }
  .battle-status-bar { font-size: 1.5cqw; min-height: 5.5cqh; padding: .6cqh 2cqw; }

  /* ─── SHOP ─── */
  .shop-title-lbl  { font-size: 2.6cqw; }
  .shop-hud        { font-size: 1.8cqw; gap: 2cqw; }
  .shop-body       { gap: 2cqw; padding: 1.5cqh 2cqw; flex-wrap: wrap; align-content: center; }
  .shop-card       { min-width: 28cqw; flex: 1; }
  .shop-card       { padding: 1.5cqh 1.5cqw; gap: .9cqh; border-radius: 1cqw; }
  .shop-card-icon  { font-size: 5.5cqw; }
  .shop-card-name  { font-size: 2.1cqw; }
  .shop-card-desc  { font-size: 1.6cqw; line-height: 1.4; }
  .shop-card-cost  { font-size: 2.0cqw; }
  .shop-card-badge { font-size: 1.2cqw; }
  .shop-info       { font-size: 1.4cqw; padding: 1cqh; }
}

/* ════════════════════════════════════════════════════════════════════════
   BATTLE HUB
   ════════════════════════════════════════════════════════════════════════ */
.battle-hub {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.2cqh;
  padding: 1cqh 0 1.5cqh;
  overflow-y: auto;
}

/* Base button — PNG frame, no browser chrome */
.bm-btn {
  position: relative;
  width: 62cqw; height: 9cqh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none; outline: none;
  cursor: pointer;
  display: flex; align-items: center;
  transition: filter .15s ease, transform .12s ease;
  flex-shrink: 0;
  touch-action: manipulation;
}
.bm-btn:hover  { filter: brightness(1.2); transform: scale(1.02); }
.bm-btn:active { transform: scale(0.97); filter: brightness(1.05); }

/* Taller special button for Void Tower */
.bm-btn-special { height: 12cqh; }

/* Circle icon — sits in the PNG's circular frame on the left */
.bm-icon {
  position: relative;
  width: 8cqw; flex-shrink: 0;
  margin-left: 3cqw;
  font-size: 3cqw;
  text-align: center;
  filter: drop-shadow(0 0 .4cqw rgba(255,210,26,.7));
}

/* Text info block — after the circle */
.bm-info {
  padding-left: 1cqw;
  display: flex; flex-direction: column;
  gap: .3cqh;
  text-align: left;
}

.bm-name {
  font-size: 1.3cqw; font-weight: 900;
  letter-spacing: .2cqw;
  color: #FFD700;
  text-shadow: 0 0 .8cqw rgba(255,215,0,.5);
}
.bm-desc {
  font-size: .75cqw;
  color: rgba(255,255,255,.7);
  letter-spacing: .04cqw;
}
.bm-reward {
  font-size: .65cqw;
  color: rgba(200,180,255,.65);
  letter-spacing: .03cqw;
}

/* Badges — small pill, top-right of button */
.bm-badge {
  position: absolute;
  top: 1cqh; right: 2cqw;
  padding: .2cqh .5cqw;
  border-radius: .4cqw;
  font-size: .6cqw; font-weight: 900;
  letter-spacing: .08cqw;
  pointer-events: none;
}
.bm-badge-daily {
  background: rgba(255,160,0,.25);
  border: 1px solid rgba(255,160,0,.5);
  color: #FFAA00;
}
.bm-badge-floor {
  background: rgba(140,80,255,.25);
  border: 1px solid rgba(140,80,255,.5);
  color: #BF80FF;
}

/* Arena opponent selection overlay */
.arena-overlay {
  position: absolute; inset: 0;
  z-index: 50;
  background: rgba(0,0,0,.85);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2cqh;
}
.arena-overlay-title {
  font-size: 1.8cqw; font-weight: 900;
  letter-spacing: .3cqw; color: var(--gold);
  text-shadow: 0 0 1cqw rgba(255,210,26,.4);
}
.arena-opponents {
  display: flex; gap: 2cqw;
}
.arena-opp-card {
  width: 18cqw;
  background: rgba(20,10,40,.9);
  border: 1px solid rgba(140,80,255,.4);
  border-radius: .6cqw;
  padding: 1.2cqh 1.2cqw;
  display: flex; flex-direction: column;
  align-items: center; gap: .6cqh;
  cursor: pointer;
  transition: filter .15s, transform .12s;
}
.arena-opp-card:hover  { filter: brightness(1.25); transform: scale(1.03); }
.arena-opp-card:active { transform: scale(.97); }
.arena-opp-name {
  font-size: 1.0cqw; font-weight: 900;
  color: #FFD700; letter-spacing: .1cqw;
  text-align: center;
}
.arena-opp-monsters {
  font-size: .7cqw; color: rgba(200,180,255,.75);
  text-align: center; line-height: 1.5;
}
.arena-opp-fight {
  margin-top: .4cqh;
  padding: .5cqh 1.5cqw;
  background: linear-gradient(135deg, #3A0060, #7B10C8);
  border: 1px solid rgba(180,100,255,.5);
  border-radius: .4cqw;
  color: #fff; font-size: .8cqw; font-weight: 900;
  cursor: pointer; letter-spacing: .1cqw;
  transition: filter .15s;
}
.arena-opp-fight:hover { filter: brightness(1.3); }

.arena-overlay-cancel {
  padding: .6cqh 2cqw;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: .4cqw;
  color: rgba(255,255,255,.6); font-size: .85cqw;
  cursor: pointer; letter-spacing: .08cqw;
  transition: filter .15s;
}
.arena-overlay-cancel:hover { filter: brightness(1.3); }

/* Tower continue/collect overlay */
.tower-overlay {
  position: absolute; inset: 0;
  z-index: 50;
  background: rgba(0,0,0,.88);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.5cqh;
}
.tower-floor-big {
  font-size: 4cqw; font-weight: 900;
  color: #BF80FF;
  text-shadow: 0 0 2cqw rgba(140,80,255,.6);
  letter-spacing: .3cqw;
}
.tower-overlay-sub {
  font-size: 1.1cqw; color: rgba(200,180,255,.7);
  letter-spacing: .1cqw;
}
.tower-overlay-btns {
  display: flex; gap: 2cqw; margin-top: 1cqh;
}
.tower-btn-continue {
  padding: .8cqh 2.5cqw;
  background: linear-gradient(135deg, #1A0040, #5B0EA0);
  border: 1px solid rgba(140,80,255,.5);
  border-radius: .4cqw;
  color: #D4AAFF; font-size: 1.0cqw; font-weight: 900;
  cursor: pointer; letter-spacing: .1cqw;
  transition: filter .15s;
}
.tower-btn-continue:hover { filter: brightness(1.3); }
.tower-btn-collect {
  padding: .8cqh 2.5cqw;
  background: linear-gradient(135deg, #3A1800, #8A4000);
  border: 1px solid rgba(255,160,0,.5);
  border-radius: .4cqw;
  color: #FFCC66; font-size: 1.0cqw; font-weight: 900;
  cursor: pointer; letter-spacing: .1cqw;
  transition: filter .15s;
}
.tower-btn-collect:hover { filter: brightness(1.3); }

/* ── Battle Speed Toggle (3-state: 1× / 2× / 3×) ──────────────────────────── */
.btn-speed-toggle,
.speed-btn {
  background: linear-gradient(135deg, #1a1030, #0a0820);
  border: 1px solid #6644cc;
  color: #cc88ff;
  font-size: 0.85cqw;
  padding: 0.4cqh 1cqw;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
  min-width: 4cqw;
}
.btn-speed-toggle:hover,
.speed-btn:hover { border-color: #9966ff; color: #fff; }

.speed-btn.spd-2,
.btn-speed-toggle.spd-2 { border-color: #ffaa00; color: #ffcc44; background: rgba(255,160,0,.12); }

.speed-btn.spd-3,
.btn-speed-toggle.spd-3 {
  border-color: #ff4444;
  color: #ff8888;
  background: rgba(255,40,40,.12);
  animation: pulse-red 0.5s ease infinite alternate;
}
@keyframes pulse-red {
  from { box-shadow: 0 0 4px #ff4444; }
  to   { box-shadow: 0 0 12px #ff4444; }
}

/* ── Element Advantage Floating Text ──────────────────────────────────────── */
.elem-float-text {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.9cqw;
  font-weight: 900;
  letter-spacing: 0.05em;
  pointer-events: none;
  z-index: 30;
  white-space: nowrap;
  text-shadow: 0 0 6px currentColor, 0 1px 2px #000;
  animation: elem-float-rise 1s ease-out forwards;
}
@keyframes elem-float-rise {
  0%   { opacity: 1;   transform: translateX(-50%) translateY(0);     }
  60%  { opacity: 1;   transform: translateX(-50%) translateY(-1.5cqh); }
  100% { opacity: 0;   transform: translateX(-50%) translateY(-3cqh);  }
}

/* ── Element Advantage Indicator on enemy cards ───────────────────────────── */
.elem-adv-indicator {
  position: absolute;
  bottom: 3.2cqh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.85cqw;
  font-weight: 900;
  pointer-events: none;
  z-index: 12;
  line-height: 1;
  padding: 0.1cqh 0.4cqw;
  border-radius: 3px;
}
.elem-adv-up   { color: #44ff88; text-shadow: 0 0 6px #44ff88; }
.elem-adv-down { color: #ff4444; text-shadow: 0 0 6px #ff4444; }

/* ── Resonance badge in synergy strip ────────────────────────────────────── */
.res-tag {
  font-weight: 700;
  letter-spacing: 0.04em;
  animation: res-glow 1.6s ease-in-out infinite alternate;
}
@keyframes res-glow {
  from { filter: brightness(1);   }
  to   { filter: brightness(1.4); }
}

/* Portrait layout: slightly bigger buttons */
@media (max-aspect-ratio: 3/4) {
  .bm-btn          { width: 90cqw; height: 11cqh; }
  .bm-btn-special  { height: 14cqh; }
  .bm-icon         { font-size: 4.5cqw; width: 10cqw; margin-left: 3.5cqw; }
  .bm-name         { font-size: 2.0cqw; }
  .bm-desc         { font-size: 1.2cqw; }
  .bm-reward       { font-size: 1.0cqw; }
  .bm-badge        { font-size: 1.0cqw; top: 1.2cqh; right: 2.5cqw; }
  .arena-opp-card  { width: 26cqw; }
  .arena-opp-name  { font-size: 1.6cqw; }
  .arena-opp-monsters { font-size: 1.1cqw; }
  .arena-opp-fight { font-size: 1.3cqw; }
  .arena-overlay-title { font-size: 2.8cqw; }
  .arena-overlay-cancel { font-size: 1.4cqw; }
  .tower-floor-big { font-size: 6cqw; }
  .tower-overlay-sub { font-size: 1.8cqw; }
  .tower-btn-continue, .tower-btn-collect { font-size: 1.6cqw; }
}

/* ══ DAILY LOGIN CALENDAR ══════════════════════════════════════════════════════ */
.daily-popup-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.82);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
  animation: fadeIn 0.3s ease;
}
.daily-popup {
  background: linear-gradient(145deg, #100d20, #08060f);
  border: 2px solid #c9993a;
  box-shadow: 0 0 40px rgba(200,150,0,0.3), 0 0 0 1px #3a2a08 inset;
  border-radius: 1cqw;
  padding: 2cqh 3cqw;
  width: 52cqw;
  text-align: center;
}
.daily-title { font-size: 1.8cqw; color: #FFD700; letter-spacing: 0.3cqw; margin-bottom: 0.5cqh; }
.daily-streak { font-size: 1cqw; color: rgba(255,255,255,0.6); margin-bottom: 1.5cqh; }
.daily-days-row {
  display: flex; gap: 0.8cqw; justify-content: center; margin-bottom: 2cqh;
}
.day-tile {
  width: 6cqw; height: 7cqh;
  background: #0d0b18;
  border: 1px solid #3a2a08;
  border-radius: 0.5cqw;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.3cqh;
  font-size: 0.7cqw;
  color: rgba(255,255,255,0.4);
  position: relative;
}
.day-tile .dt-day { font-size: 0.6cqw; text-transform: uppercase; letter-spacing: 0.05cqw; }
.day-tile .dt-gems { font-size: 0.75cqw; color: #4488ff; }
.day-tile .dt-icon { font-size: 1.2cqw; }
.day-tile.past { background: #080610; opacity: 0.5; }
.day-tile.past::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5cqw; color: #44cc66; background: rgba(0,0,0,0.5); border-radius: inherit; }
.day-tile.current {
  border: 2px solid #FFD700;
  box-shadow: 0 0 12px rgba(255,180,0,0.5);
  color: #FFD700;
  animation: tile-pulse 1.5s ease infinite alternate;
}
.day-tile.future { opacity: 0.4; }
@keyframes tile-pulse { from { box-shadow: 0 0 8px rgba(255,180,0,0.3); } to { box-shadow: 0 0 20px rgba(255,180,0,0.7); } }
.daily-reward-big { margin: 1cqh 0 2cqh; padding: 1.2cqh 2cqw; background: rgba(255,215,0,0.05); border: 1px solid rgba(255,215,0,0.2); border-radius: 0.5cqw; }
.daily-reward-gems { font-size: 1.6cqw; color: #66aaff; font-weight: bold; }
.daily-reward-gold { font-size: 1.2cqw; color: #FFD700; }
.daily-reward-bonus { font-size: 1cqw; color: #cc88ff; margin-top: 0.5cqh; }

/* ══ MONSTER FUSION ════════════════════════════════════════════════════════════ */
.btn-fusion { background: linear-gradient(135deg, #2a0840, #180420); border: 1px solid #aa44ff; color: #dd88ff; }
.btn-fusion:hover { background: linear-gradient(135deg, #3a0f55, #220633); border-color: #cc66ff; }
.fusion-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 8500;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  animation: fadeIn 0.3s ease;
}
.fusion-modal {
  background: linear-gradient(145deg, #120924, #09050f);
  border: 2px solid #aa44ff;
  box-shadow: 0 0 40px rgba(170,68,255,0.3);
  border-radius: 1cqw;
  padding: 2cqh 3cqw;
  width: 70cqw; max-height: 75cqh; overflow-y: auto;
}
.fusion-title { font-size: 1.6cqw; color: #dd88ff; letter-spacing: 0.3cqw; text-align: center; margin-bottom: 1cqh; }
.fusion-slots { display: flex; gap: 1cqw; justify-content: center; margin-bottom: 2cqh; }
.fusion-slot {
  width: 8cqw; height: 8cqw;
  border: 2px dashed #aa44ff40;
  border-radius: 0.5cqw;
  display: flex; align-items: center; justify-content: center;
  font-size: 2cqw; color: #aa44ff40;
  background: #0a0615;
  transition: all 0.2s;
}
.fusion-slot.filled { border-color: #aa44ff; color: #dd88ff; background: #1a0a2a; }
.fusion-info { text-align: center; font-size: 0.9cqw; color: rgba(255,255,255,0.5); margin-bottom: 1.5cqh; }
.fusion-grid { display: flex; flex-wrap: wrap; gap: 0.8cqw; justify-content: center; margin-bottom: 2cqh; max-height: 35cqh; overflow-y: auto; }
.fusion-card {
  width: 7cqw; height: 8.5cqh;
  background: #0d0a18;
  border: 1px solid #2a2040;
  border-radius: 0.5cqw;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.3cqh; padding: 0.3cqh;
  font-size: 0.65cqw; color: rgba(255,255,255,0.7);
  transition: all 0.2s;
  position: relative;
}
.fusion-card img { width: 4.5cqw; height: 4.5cqw; object-fit: contain; }
.fusion-card.selected { border-color: #aa44ff; box-shadow: 0 0 10px rgba(170,68,255,0.5); background: #180a28; }
.fusion-card.in-team { opacity: 0.3; cursor: not-allowed; }
.fusion-card.in-team::after { content: '⚔'; position: absolute; top: 0.3cqh; right: 0.3cqh; font-size: 0.8cqw; }
.fusion-card-rarity { font-size: 0.6cqw; }
.fusion-card-rarity.r3 { color: #4488ff; }
.fusion-card-rarity.r4 { color: #aa44ff; }
.fusion-card-rarity.r5 { color: #FFD700; }
.btn-fuse-confirm { width: 20cqw; font-size: 1.1cqw; padding: 1cqh; background: linear-gradient(135deg, #400880, #200440); border: 2px solid #aa44ff; color: #fff; }
.btn-fuse-confirm:disabled { opacity: 0.3; cursor: not-allowed; }
.btn-fuse-confirm:not(:disabled):hover { background: linear-gradient(135deg, #5a0fa8, #2a0560); }

/* ══ SHARED: fadeIn keyframe (used by several overlays) ══════════════════════ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ══ FEATURE 1: ARENA RANK SYSTEM ═══════════════════════════════════════════ */
.arena-rank-header {
  display: flex; align-items: center; gap: 1cqw;
  background: rgba(10,6,24,0.85);
  border: 1px solid rgba(200,167,64,0.25);
  border-radius: 0.6cqw;
  padding: 0.7cqh 1.5cqw;
  margin-bottom: 0.5cqh;
}
.arena-rank-emblem {
  font-size: 2.2cqw;
  filter: drop-shadow(0 0 0.4cqw currentColor);
}
.arena-rank-info { display: flex; flex-direction: column; gap: 0.2cqh; }
.arena-rank-name {
  font-size: 1.1cqw; font-weight: 900; letter-spacing: 0.15cqw;
}
.arena-rank-pts { font-size: 0.75cqw; color: rgba(255,255,255,0.55); }
.arena-rank-progress {
  width: 10cqw; height: 0.5cqh;
  background: rgba(255,255,255,0.1);
  border-radius: 0.3cqw;
  overflow: hidden;
  margin-top: 0.2cqh;
}
.arena-rank-progress-fill {
  height: 100%; border-radius: inherit;
  transition: width 0.5s ease;
}
/* rank badge on opponent cards */
.arena-opp-rank {
  font-size: 0.65cqw; font-weight: 700;
  padding: 0.15cqh 0.5cqw;
  border-radius: 0.25cqw;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.15);
  letter-spacing: 0.05cqw;
}
/* floating points change animation */
.arena-pts-float {
  position: absolute;
  font-size: 1.4cqw; font-weight: 900;
  pointer-events: none;
  animation: arenaFloatUp 1.4s ease forwards;
  z-index: 9999;
  text-shadow: 0 0 0.8cqw currentColor;
}
@keyframes arenaFloatUp {
  0%   { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; transform: translateY(-3cqh); }
  100% { opacity: 0; transform: translateY(-5cqh); }
}
/* rank-up popup */
.arena-rankup-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 9800;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1cqh;
  animation: fadeIn 0.4s ease;
}
.arena-rankup-emblem { font-size: 5cqw; animation: rankupPop 0.6s cubic-bezier(0.175,0.885,0.32,1.275) both; }
.arena-rankup-label  { font-size: 1.8cqw; font-weight: 900; letter-spacing: 0.4cqw; animation: rankupPop 0.6s 0.1s cubic-bezier(0.175,0.885,0.32,1.275) both; }
.arena-rankup-name   { font-size: 3cqw; font-weight: 900; letter-spacing: 0.3cqw; animation: rankupPop 0.6s 0.2s cubic-bezier(0.175,0.885,0.32,1.275) both; }
.arena-rankup-close  {
  margin-top: 1.5cqh;
  padding: 0.6cqh 2.5cqw;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 0.4cqw; color: rgba(255,255,255,0.7); font-size: 0.85cqw;
  cursor: pointer; letter-spacing: 0.08cqw;
  transition: filter 0.15s;
}
.arena-rankup-close:hover { filter: brightness(1.3); }
@keyframes rankupPop {
  0%   { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}
/* Sub-label under arena button on hub */
.bm-arena-rank-sub {
  font-size: 0.65cqw; color: rgba(255,255,255,0.55);
  letter-spacing: 0.05cqw; margin-top: 0.15cqh;
}

/* ══ FEATURE 2: VOID TOWER ENHANCEMENTS ═════════════════════════════════════ */
/* Tower lobby overlay */
.tower-lobby {
  position: absolute; inset: 0;
  z-index: 50;
  background: rgba(0,0,0,0.92);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.5cqh;
  animation: fadeIn 0.3s ease;
}
.tower-lobby-icon  { font-size: 5cqw; color: #BF80FF; text-shadow: 0 0 1.5cqw rgba(140,80,255,0.8); }
.tower-lobby-title { font-size: 1.8cqw; font-weight: 900; letter-spacing: 0.4cqw; color: #BF80FF; }
.tower-lobby-floor { font-size: 3.5cqw; font-weight: 900; color: #fff; letter-spacing: 0.2cqw; }
.tower-lobby-best  { font-size: 0.9cqw; color: rgba(255,215,0,0.6); letter-spacing: 0.1cqw; }
/* milestone progress bar */
.tower-milestone-bar {
  width: 40cqw; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(140,80,255,0.25);
  border-radius: 0.5cqw;
  padding: 0.8cqh 1.2cqw;
}
.tower-milestone-label { font-size: 0.75cqw; color: rgba(200,180,255,0.6); margin-bottom: 0.4cqh; letter-spacing: 0.06cqw; }
.tower-milestone-track {
  height: 0.6cqh; background: rgba(255,255,255,0.08);
  border-radius: 0.3cqw; overflow: hidden;
}
.tower-milestone-fill {
  height: 100%; background: linear-gradient(90deg, #5B0EA0, #BF80FF);
  border-radius: inherit; transition: width 0.5s ease;
}
.tower-lobby-btns { display: flex; gap: 1.5cqw; margin-top: 0.5cqh; }
.tower-lobby-enter {
  padding: 0.9cqh 3cqw;
  background: linear-gradient(135deg, #1A0040, #5B0EA0);
  border: 2px solid rgba(140,80,255,0.6);
  border-radius: 0.5cqw;
  color: #D4AAFF; font-size: 1.2cqw; font-weight: 900;
  cursor: pointer; letter-spacing: 0.12cqw;
  transition: filter 0.15s;
}
.tower-lobby-enter:hover { filter: brightness(1.3); }
.tower-lobby-collect {
  padding: 0.9cqh 3cqw;
  background: linear-gradient(135deg, #3A1800, #8A4000);
  border: 2px solid rgba(255,160,0,0.5);
  border-radius: 0.5cqw;
  color: #FFCC66; font-size: 1.2cqw; font-weight: 900;
  cursor: pointer; letter-spacing: 0.1cqw;
  transition: filter 0.15s;
}
.tower-lobby-collect:hover { filter: brightness(1.3); }
.tower-lobby-cancel {
  padding: 0.5cqh 1.8cqw;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 0.4cqw; color: rgba(255,255,255,0.5); font-size: 0.75cqw;
  cursor: pointer; letter-spacing: 0.06cqw;
  transition: filter 0.15s;
}
.tower-lobby-cancel:hover { filter: brightness(1.3); }
/* Boss floor announce overlay */
.tower-floor-announce {
  position: absolute; inset: 0;
  z-index: 80;
  background: rgba(0,0,0,0.85);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.5cqh;
  pointer-events: none;
  animation: towerAnnounce 1.5s ease forwards;
}
.tower-announce-floor {
  font-size: 5cqw; font-weight: 900;
  color: #BF80FF; letter-spacing: 0.3cqw;
  text-shadow: 0 0 2cqw rgba(140,80,255,0.8);
}
.tower-announce-boss {
  font-size: 1.4cqw; font-weight: 900;
  color: #FF6644; letter-spacing: 0.3cqw;
  text-shadow: 0 0 1cqw rgba(255,60,20,0.7);
}
@keyframes towerAnnounce {
  0%   { opacity: 0; transform: scale(0.8); }
  20%  { opacity: 1; transform: scale(1.05); }
  35%  { transform: scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.05); }
}
/* Milestone reward banner */
.tower-milestone-reward {
  position: absolute; inset: 0;
  z-index: 9900;
  background: rgba(0,0,0,0.9);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1cqh;
  animation: fadeIn 0.4s ease;
}
.tower-ms-title { font-size: 2cqw; font-weight: 900; color: #FFD700; letter-spacing: 0.4cqw; }
.tower-ms-gems  { font-size: 1.5cqw; color: #66aaff; }
.tower-ms-gold  { font-size: 1.2cqw; color: #FFD700; }
.tower-ms-extra { font-size: 1cqw; color: #cc88ff; margin-top: 0.5cqh; }
.tower-ms-close {
  margin-top: 1.5cqh;
  padding: 0.6cqh 2.5cqw;
  background: linear-gradient(135deg, #1A0040, #5B0EA0);
  border: 2px solid rgba(140,80,255,0.5); border-radius: 0.5cqw;
  color: #D4AAFF; font-size: 0.9cqw; font-weight: 900;
  cursor: pointer; letter-spacing: 0.1cqw; transition: filter 0.15s;
}
.tower-ms-close:hover { filter: brightness(1.3); }

/* ══ FEATURE 3: STORY CUTSCENE ══════════════════════════════════════════════ */
.story-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.95);
  z-index: 9500;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  animation: fadeIn 0.8s ease;
  padding: 5cqh 10cqw;
}
.story-title {
  font-size: 1.6cqw; color: #c9993a; letter-spacing: 0.3cqw;
  margin-bottom: 3cqh; text-align: center;
  animation: fadeIn 1s ease 0.3s both;
}
.story-line {
  font-size: 1.1cqw; color: rgba(255,255,255,0.8); text-align: center;
  max-width: 60cqw; line-height: 2;
  animation: fadeIn 0.8s ease both;
}
.story-speaker {
  margin-top: 3cqh; font-size: 0.9cqw; color: rgba(255,215,0,0.5);
  font-style: italic;
  animation: fadeIn 0.8s ease both;
}
.story-continue-btn {
  margin-top: 4cqh;
  padding: 0.8cqh 3cqw;
  background: linear-gradient(135deg, #1a0c06, #6a3800);
  border: 2px solid #c9993a; border-radius: 0.5cqw;
  color: #ffd080; font-size: 1cqw; font-weight: 900;
  cursor: pointer; letter-spacing: 0.15cqw;
  transition: filter 0.15s;
  animation: fadeIn 0.8s ease both;
}
.story-continue-btn:hover { filter: brightness(1.3); }

/* ══ FEATURE 4: CHALLENGE MODIFIER ══════════════════════════════════════════ */
.challenge-mod-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 8800;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.3s ease;
}
.challenge-mod-box {
  background: linear-gradient(145deg, #0e0a1e, #070410);
  border: 2px solid #ff4444;
  box-shadow: 0 0 30px rgba(255,68,68,0.3);
  border-radius: 1cqw;
  padding: 2.5cqh 3.5cqw;
  width: 45cqw; text-align: center;
}
.cmod-title { font-size: 1.5cqw; color: #ff6666; letter-spacing: 0.3cqw; margin-bottom: 1cqh; }
.cmod-label { font-size: 2.5cqw; margin: 1cqh 0; }
.cmod-desc  { font-size: 0.95cqw; color: rgba(255,255,255,0.6); margin-bottom: 2cqh; }
.cmod-reward { font-size: 0.9cqw; color: #FFD700; margin-bottom: 2cqh; }
.cmod-btn-row { display: flex; gap: 1cqw; justify-content: center; }
.cmod-fight-btn {
  padding: 0.8cqh 2.5cqw;
  background: linear-gradient(135deg, #400010, #880020);
  border: 2px solid #ff4444; border-radius: 0.5cqw;
  color: #ffaaaa; font-size: 1cqw; font-weight: 900;
  cursor: pointer; letter-spacing: 0.12cqw;
  transition: filter 0.15s;
}
.cmod-fight-btn:hover { filter: brightness(1.3); }
.cmod-cancel-btn {
  padding: 0.8cqh 2.5cqw;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 0.5cqw; color: rgba(255,255,255,0.5); font-size: 0.85cqw;
  cursor: pointer; letter-spacing: 0.08cqw;
  transition: filter 0.15s;
}
.cmod-cancel-btn:hover { filter: brightness(1.3); }
.cmod-no-team-msg { font-size: 1cqw; color: #ffaaaa; margin: 1.5cqh 0; }
.cmod-consolation-btn {
  padding: 0.7cqh 2cqw;
  background: rgba(255,215,0,0.08); border: 1px solid rgba(255,215,0,0.3);
  border-radius: 0.5cqw; color: #FFD700; font-size: 0.85cqw;
  cursor: pointer; letter-spacing: 0.08cqw;
  transition: filter 0.15s;
}
.cmod-consolation-btn:hover { filter: brightness(1.3); }

/* mobile tweaks for new features */
@media (max-aspect-ratio: 4/3) {
  .arena-rank-name   { font-size: 1.8cqw; }
  .arena-rank-pts    { font-size: 1.1cqw; }
  .tower-announce-floor { font-size: 7cqw; }
  .tower-lobby-floor { font-size: 5cqw; }
  .story-title  { font-size: 2.4cqw; }
  .story-line   { font-size: 1.7cqw; }
  .cmod-title   { font-size: 2.2cqw; }
  .cmod-label   { font-size: 3.5cqw; }
  .cmod-desc    { font-size: 1.4cqw; }
}

/* ══ FEATURE 1: CRAFTING SYSTEM ══════════════════════════════════════════════ */
.craft-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 8600; display: flex; align-items: center; justify-content: center;
}
.craft-modal {
  background: linear-gradient(145deg, #0f0b1a, #07050e);
  border: 2px solid #c9993a;
  box-shadow: 0 0 30px rgba(200,150,0,0.25);
  border-radius: 1cqw; padding: 2cqh 2.5cqw;
  width: 65cqw; max-height: 80cqh; overflow-y: auto;
}
.craft-title { font-size: 1.6cqw; color: #FFD700; text-align: center; margin-bottom: 1.5cqh; letter-spacing: 0.3cqw; }
.craft-materials-row { display: flex; flex-wrap: wrap; gap: 0.6cqw; margin-bottom: 1.5cqh; padding: 1cqh; background: rgba(255,255,255,0.03); border-radius: 0.5cqw; }
.craft-mat-chip { font-size: 0.75cqw; color: rgba(255,255,255,0.7); background: #0d0a18; border: 1px solid #2a2040; border-radius: 0.4cqw; padding: 0.2cqh 0.6cqw; }
.craft-recipes { display: flex; flex-direction: column; gap: 0.8cqw; }
.craft-recipe-row {
  display: flex; align-items: center; gap: 1cqw;
  background: #0d0a18; border: 1px solid #2a2040;
  border-radius: 0.5cqw; padding: 0.8cqh 1cqw;
}
.craft-recipe-icon { font-size: 2cqw; }
.craft-recipe-info { flex: 1; }
.craft-recipe-name { font-size: 0.9cqw; color: #FFD700; }
.craft-recipe-cost { font-size: 0.7cqw; color: rgba(255,255,255,0.5); }
.craft-recipe-desc { font-size: 0.65cqw; color: rgba(255,255,255,0.35); }
.btn-craft { font-size: 0.8cqw; padding: 0.5cqh 1.2cqw; background: linear-gradient(135deg, #2a1a06, #1a0e03); border: 1px solid #c9993a; color: #FFD700; cursor: pointer; border-radius: 0.4cqw; }
.btn-craft:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-craft:not(:disabled):hover { background: linear-gradient(135deg, #3a2808, #261504); }
.btn-open-craft { background: linear-gradient(135deg, #2a1a06, #1a0e03); border: 1px solid #c9993a; color: #FFD700; }

/* ══ FEATURE 3: 6★ ASCENSION ════════════════════════════════════════════════ */
.btn-ascend { background: linear-gradient(135deg, #3a2800, #1a1000); border: 2px solid #FFD700 !important; color: #FFD700; margin-top: 0.5cqh; }
.btn-ascend:hover { background: linear-gradient(135deg, #5a3e00, #2a1800); box-shadow: 0 0 15px rgba(255,215,0,0.4); }
.inv-card.r6 { border-color: #FFD700 !important; box-shadow: 0 0 12px rgba(255,215,0,0.5) !important; }
.monster-card.r6 { border-color: #FFD700 !important; box-shadow: 0 0 12px rgba(255,215,0,0.5) !important; position: relative; }
.monster-card.r6::before { content: '⬡'; position: absolute; top: -0.8cqw; left: 50%; transform: translateX(-50%); font-size: 1.2cqw; color: #FFD700; text-shadow: 0 0 8px #FFD700; }
.card-ascended-badge {
  position: absolute; bottom: 2.2cqh; left: 0; right: 0;
  text-align: center; font-size: 0.55cqw; color: #FFD700;
  text-shadow: 0 0 6px #FFD700; letter-spacing: 0.05cqw;
  pointer-events: none;
}

/* ══ FEATURE 4: WORLD BOSS ══════════════════════════════════════════════════ */
.wb-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.9);
  z-index: 8700; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 3cqh;
}
.wb-boss-icon { font-size: 6cqw; margin-bottom: 1cqh; filter: drop-shadow(0 0 20px rgba(255,68,0,0.6)); }
.wb-boss-name { font-size: 1.8cqw; color: #FFD700; letter-spacing: 0.3cqw; margin-bottom: 0.5cqh; }
.wb-hp-bar-wrap { width: 50cqw; height: 2cqh; background: #1a0808; border: 1px solid #c9993a; border-radius: 1cqh; overflow: hidden; margin-bottom: 1cqh; }
.wb-hp-fill { height: 100%; background: linear-gradient(90deg, #cc0000, #ff4444); transition: width 0.5s; }
.wb-stats { font-size: 0.85cqw; color: rgba(255,255,255,0.6); margin-bottom: 2cqh; text-align: center; }
.wb-attempts { font-size: 1cqw; color: #FFD700; margin-bottom: 2cqh; }
.btn-wb-challenge { font-size: 1.1cqw; padding: 1cqh 3cqw; background: linear-gradient(135deg, #400808, #1a0303); border: 2px solid #cc0000; color: #ff6666; cursor: pointer; border-radius: 0.5cqw; transition: background 0.2s; }
.btn-wb-challenge:hover { background: linear-gradient(135deg, #5a0c0c, #280505); }
.btn-wb-challenge:disabled { opacity: 0.4; cursor: not-allowed; }
.bm-btn.bm-world-boss { border-color: #cc0000 !important; background: linear-gradient(160deg, #1a0303 0%, #07050e 100%); }
.bm-btn.bm-world-boss:hover { border-color: #ff4444 !important; box-shadow: 0 0 12px rgba(204,0,0,0.4); }

/* ══ FEATURES 14-20 ════════════════════════════════════════════════════════ */

/* ── F14: Achievement Rewards ─────────────────────────────────────────────── */
.ach-item-info { flex: 1; }
.ach-item.claimable { border-left: 3px solid #FFD700; background: rgba(255,215,0,0.06); }
.ach-item.claimed   { border-left: 3px solid #44cc66; }
.ach-claim-btn {
  background: linear-gradient(135deg, #1a3010, #0a1808);
  border: 1px solid #44cc44; color: #88ff88;
  font-size: 0.6cqw; padding: 0.35cqh 0.7cqw;
  border-radius: 0.3cqw; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, box-shadow 0.15s;
}
.ach-claim-btn:hover { background: linear-gradient(135deg, #264018, #122010); box-shadow: 0 0 8px rgba(68,204,68,0.4); }
.ach-claimed-check { font-size: 0.85cqw; color: #44cc66; font-weight: bold; padding: 0 0.5cqw; }
.ach-claimable-badge {
  display: inline-block; margin-left: 0.8cqw;
  background: #FFD700; color: #000; font-size: 0.65cqw;
  padding: 0.1cqh 0.5cqw; border-radius: 0.3cqw; font-weight: 700;
}

/* ── F15: Player Statistics ────────────────────────────────────────────────── */
.stats-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.88);
  z-index: 8400; display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.3s;
}
.stats-box {
  position: relative;
  background: linear-gradient(145deg, #0e0b1c, #07050e);
  border: 2px solid #c9993a;
  box-shadow: 0 0 30px rgba(200,150,0,0.2);
  border-radius: 1cqw; padding: 2cqh 3cqw;
  width: 50cqw; max-height: 75cqh; overflow-y: auto;
}
.stats-title { font-size: 1.6cqw; color: #FFD700; text-align: center; margin-bottom: 1.5cqh; letter-spacing: 0.3cqw; }
.stats-section { margin-bottom: 1.5cqh; }
.stats-section-hdr { font-size: 0.9cqw; color: #c9993a; margin-bottom: 0.5cqh; letter-spacing: 0.1cqw; border-bottom: 1px solid #2a2010; padding-bottom: 0.3cqh; }
.stats-row { display: flex; justify-content: space-between; font-size: 0.82cqw; color: rgba(255,255,255,0.7); padding: 0.2cqh 0; }
.stats-val { color: #fff; font-weight: bold; }

/* ── F16: Monster Glossary ─────────────────────────────────────────────────── */
.glossary-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.92);
  z-index: 8300; overflow-y: auto; padding: 2cqh 3cqw; animation: fadeIn 0.3s;
}
.glossary-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5cqh; }
.glossary-title { font-size: 1.6cqw; color: #FFD700; letter-spacing: 0.3cqw; }
.glossary-grid { display: flex; flex-wrap: wrap; gap: 1cqw; }
.glos-card {
  width: 10cqw; background: #0d0a18; border: 1px solid #2a2040;
  border-radius: 0.5cqw; padding: 0.8cqh 0.6cqw; cursor: pointer; transition: border-color 0.2s, transform 0.15s;
}
.glos-card:hover { border-color: #c9993a; transform: translateY(-2px); }
.glos-card.owned { border-color: #3a3060; }
.glos-card.not-owned { opacity: 0.5; filter: grayscale(0.7); }
.glos-card img { width: 8cqw; height: 8cqw; object-fit: contain; display: block; margin: 0 auto; }
.glos-name { font-size: 0.65cqw; color: rgba(255,255,255,0.8); text-align: center; margin-top: 0.3cqh; font-weight: bold; }
.glos-element { font-size: 0.6cqw; text-align: center; }
.glos-lore-panel {
  position: fixed; bottom: 3cqh; left: 50%; transform: translateX(-50%);
  background: #0d0a18; border: 1px solid #c9993a; border-radius: 0.5cqw;
  padding: 1.2cqh 2cqw; width: 50cqw; font-size: 0.75cqw; color: rgba(255,255,255,0.8);
  z-index: 8400; animation: fadeIn 0.2s; cursor: pointer;
  box-shadow: 0 0 20px rgba(200,150,0,0.2);
}

/* ── F17: Notification System ─────────────────────────────────────────────── */
.tile-has-notif { position: relative; }
.tile-notif-dot {
  position: absolute; top: 0.5cqh; right: 0.5cqh;
  width: 1.2cqw; height: 1.2cqw; background: #ff3333; border-radius: 50%;
  box-shadow: 0 0 6px #ff3333; animation: notif-pulse 1s ease infinite alternate;
  pointer-events: none; z-index: 10;
}
@keyframes notif-pulse { from { transform: scale(1); } to { transform: scale(1.3); } }

/* ── F18: Battle Pass XP bar ──────────────────────────────────────────────── */
.bp-xp-bar-wrap {
  width: 100%; height: 0.8cqh; background: #1a1028; border: 1px solid #3a2050;
  border-radius: 0.4cqh; overflow: hidden; margin: 0.5cqh 0 0.8cqh;
}
.bp-xp-bar-fill { height: 100%; background: linear-gradient(90deg, #7722ff, #cc44ff); transition: width 0.5s ease; }

/* ── F19: Screen Transitions ──────────────────────────────────────────────── */
.screen { transition: opacity 0.2s ease, transform 0.2s ease; }
.screen.screen-exit { opacity: 0; transform: scale(0.97); pointer-events: none; }
.screen.screen-enter { opacity: 0; transform: scale(1.02); }
.screen.active { opacity: 1; transform: scale(1); }

/* ── F19: Click Particles ─────────────────────────────────────────────────── */
.click-particle {
  position: absolute; pointer-events: none;
  width: 4px; height: 4px; background: #FFD700; border-radius: 50%;
  animation: particle-burst 0.6s ease forwards; z-index: 9999;
}
@keyframes particle-burst {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* ── F20: Boss Rush Recap Overlays ────────────────────────────────────────── */
.bossrush-recap {
  position: absolute; inset: 0; background: rgba(0,0,0,0.88);
  z-index: 8900; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 3cqh; animation: fadeIn 0.3s;
}
.bossrush-title { font-size: 2cqw; color: #FFD700; margin-bottom: 2cqh; letter-spacing: 0.3cqw; text-align: center; }
.bossrush-boss-row { display: flex; gap: 1.5cqw; justify-content: center; margin-bottom: 2cqh; flex-wrap: wrap; }
.bossrush-boss-chip { text-align: center; font-size: 0.8cqw; }
.bossrush-boss-chip .brc-icon { font-size: 2cqw; margin-bottom: 0.3cqh; }
.bossrush-boss-chip.cleared { color: #44cc66; }
.bossrush-boss-chip.failed  { color: #cc4444; opacity: 0.5; }
.bossrush-team-hp { display: flex; gap: 1cqw; justify-content: center; margin-bottom: 2cqh; flex-wrap: wrap; }
.brc-monster-hp { font-size: 0.75cqw; text-align: center; }
.brc-hp-bar { width: 5cqw; height: 0.6cqh; background: #1a0808; border-radius: 0.3cqh; overflow: hidden; margin-top: 0.2cqh; }
.brc-hp-fill { height: 100%; background: linear-gradient(90deg, #44cc44, #22aa22); }

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON PNG ASSETS  —  Correct aspect-ratio formula:
   height_cqh = width_cqw × 16 / (png_ratio × 9)
   PNG 866×288 = 3.0069:1  →  at 42cqw: height = 42×16/(3.0069×9) = 24.8cqh
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. BATTLE HUB: 2-column flex-wrap grid ─────────────────────────────── */
.battle-hub {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 1.5cqw !important;
  padding: 2cqh 2cqw !important;
}

/* Each battle mode button: 42cqw × 24.8cqh = exact 3.01:1 ratio */
.bm-btn {
  width: 42cqw !important;
  height: 24.8cqh !important;
  background-size: 100% 100% !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}
.bm-btn-special { height: 24.8cqh !important; }  /* Void Tower same size now */

/* Assign PNGs via ID — overrides any remaining inline style */
#bm-dungeon   { background-image: url('../assets/btn/Dungeon.png')   !important; }
#bm-arena     { background-image: url('../assets/btn/Arena.png')     !important; }
#bm-boss-rush { background-image: url('../assets/btn/Boss_rush.png') !important; }
#bm-challenge { background-image: url('../assets/btn/Challenge.png') !important; }
#bm-tower     { background-image: url('../assets/btn/Void_tower.png')!important; }
/* World Boss keeps CSS gradient (no PNG available) */

/* Hide name/icon (embedded in PNG), position desc/reward text */
.bm-btn .bm-name,
.bm-btn .bm-icon { display: none !important; }

.bm-btn .bm-info {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 8%;
  width: 80%;
  display: flex; flex-direction: column; align-items: center; gap: 0.2cqh;
  text-align: center;
}
.bm-btn .bm-desc {
  font-size: 0.78cqw; color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 4px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.7);
}
.bm-btn .bm-reward {
  font-size: 0.65cqw; color: rgba(180,230,255,0.82);
  text-shadow: 0 1px 4px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.7);
}
.bm-btn .bm-badge  { position: absolute; top: 0.8cqh; right: 1.5cqw;
  font-size: 0.65cqw; background: rgba(0,0,0,0.55);
  color: #FFD700; padding: 0.15cqh 0.5cqw; border-radius: 0.3cqw; }

/* World Boss button (no PNG — keep gradient styling) */
.bm-world-boss .bm-name,
.bm-world-boss .bm-icon { display: flex !important; }  /* restore for world boss */
.bm-world-boss .bm-info { position: static; }

/* ── 2. HOME SCREEN NAV TILES ───────────────────────────────────────────── */
/* Use aspect-ratio 866/288 so height auto-calculates from max-width 21cqw
   → ~12.4cqh per tile. 4 tiles per row. Back to compact layout.          */
.tile-summon,
.tile-shop,
.tile-inventory,
.tile-dungeon {
  aspect-ratio: 866 / 288 !important;
  min-width: 16cqw !important;
  max-width: 21cqw !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}
.tile-summon    { background-image: url('../assets/btn/Summon.png')     !important; }
.tile-shop      { background-image: url('../assets/btn/Shop.png')       !important; }
.tile-inventory { background-image: url('../assets/btn/Collection.png') !important; }
.tile-dungeon   { background-image: url('../assets/btn/Battle.png')     !important; }

/* Hide text (embedded in PNG) */
.tile-summon .tile-glyph, .tile-summon .tile-label, .tile-summon .tile-sublabel,
.tile-shop .tile-glyph, .tile-shop .tile-label, .tile-shop .tile-sublabel,
.tile-inventory .tile-glyph, .tile-inventory .tile-label, .tile-inventory .tile-sublabel,
.tile-dungeon .tile-glyph, .tile-dungeon .tile-label, .tile-dungeon .tile-sublabel
{ display: none !important; }
/* Remove shine overlay (PNG has its own) */
.tile-summon::before, .tile-shop::before,
.tile-inventory::before, .tile-dungeon::before { display: none !important; }
/* Back to single-row layout */
.home-tiles { flex-wrap: nowrap !important; }

/* ── 3. HOME PROGRESS PANEL (Quests / Battle Pass / Achievements) ────────── */
/* PNG buttons replace the hpp-section buttons in a column layout           */
/* Each at 26cqw → height = 26×16/(3.01×9) = 15.4cqh                       */
#btn-quests, #btn-battlepass, #btn-achievements {
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 26cqw !important;
  aspect-ratio: 866 / 288 !important;
  padding: 0 !important;
  position: relative !important;
  flex: none !important;
}
#btn-quests       { background-image: url('../assets/btn/quests.png');       }
#btn-battlepass   { background-image: url('../assets/btn/battle_pass.png');  }
#btn-achievements { background-image: url('../assets/btn/achievements.png'); }

/* Hide old icon/text (they are now in the PNG) */
#btn-quests .hpp-icon, #btn-quests .hpp-info, #btn-quests .hpp-arrow,
#btn-battlepass .hpp-icon, #btn-battlepass .hpp-info, #btn-battlepass .hpp-arrow,
#btn-achievements .hpp-icon, #btn-achievements .hpp-info, #btn-achievements .hpp-arrow
{ display: none !important; }
/* Keep quest badge visible (absolute in corner of PNG button) */
#btn-quests #quest-badge-home {
  display: inline-flex !important;
  position: absolute; top: 8%; right: 6%;
}

/* Keep panel as column, remove dividers, align center */
.home-progress-panel {
  align-items: center !important;
  gap: 0.8cqh !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.5cqh 0 !important;
}
.home-progress-panel .hpp-divider { display: none !important; }
/* Stats button: no PNG, keep original look but sized to match */
#btn-stats {
  width: 26cqw !important;
  background: rgba(10,6,24,0.7) !important;
  border: 1px solid rgba(150,90,255,0.3) !important;
  border-radius: 0.5cqw !important;
  padding: 0.6cqh 1cqw !important;
  flex: none !important;
}

/* ── 4. "ENTER THE VOID" LOGIN BUTTON ───────────────────────────────────── */
/* 866×288 = 3.01:1 → at 22cqw: height = 22×16/(3.01×9) = 13cqh           */
.login-enter-btn {
  background-image: url('../assets/btn/enter_the_void.png') !important;
  background-size: 100% 100% !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
  width: 22cqw !important;
  height: 13cqh !important;
  padding: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
}
.login-enter-btn:hover { filter: brightness(1.15); transform: scale(1.04); }
.login-enter-btn:active { transform: scale(0.97); }

/* ── 5. SUMMON PULL BUTTONS ─────────────────────────────────────────────── */
/* Summon_1x 831×300 = 2.77:1 → 17cqw: height = 17×16/(2.77×9) = 10.9cqh  */
/* Summon_10x 797×313 = 2.55:1 → 19cqw: height = 19×16/(2.55×9) = 13.2cqh */
.sbtn-1 {
  background-image: url('../assets/btn/Summon_1x.png') !important;
  background-size: 100% 100% !important;
  background-color: transparent !important;
  border: none !important; box-shadow: none !important; animation: none !important;
  width: 18cqw !important; height: 11.5cqh !important;
  padding: 0 !important; min-width: 0 !important;
}
.sbtn-10 {
  background-image: url('../assets/btn/Summon_10x.png') !important;
  background-size: 100% 100% !important;
  background-color: transparent !important;
  border: none !important; box-shadow: none !important; animation: none !important;
  width: 18cqw !important; height: 11.5cqh !important;
  padding: 0 !important; min-width: 0 !important;
}
/* Hide inner text (info is in the PNG), keep pointer-events on button */
.sbtn-1 > *, .sbtn-10 > * { visibility: hidden !important; }
.sbtn-1::before, .sbtn-1::after, .sbtn-10::before, .sbtn-10::after { display: none !important; }

/* ── 6. HUD MUSIC & SFX ICON BUTTONS ───────────────────────────────────── */
/* 500×500 = 1:1 → to be square in px: width_cqw = height_cqh × 9/16      */
#btn-bgm, #btn-sfx {
  height: 4.5cqh !important;
  width: 2.53cqw !important;  /* 4.5 × 9/16 = 2.53 → square pixels */
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
  border: none !important; box-shadow: none !important;
  color: transparent !important; font-size: 0 !important;
  padding: 0 !important; min-width: 0 !important;
  flex-shrink: 0 !important;
}
#btn-bgm { background-image: url('../assets/btn/music.png'); }
#btn-sfx { background-image: url('../assets/btn/sfc.png'); }
#btn-bgm.muted, #btn-sfx.muted { filter: brightness(0.3) grayscale(1); }

/* ── 7. COLLECT REWARD & CONFIRM BUTTONS ───────────────────────────────── */
/* 866×288 = 3.01:1 → at 24cqw: height = 14.2cqh                          */
#btn-daily-claim {
  background-image: url('../assets/btn/collect_reward.png') !important;
  background-size: 100% 100% !important;
  background-color: transparent !important;
  border: none !important; box-shadow: none !important; animation: none !important;
  width: 24cqw !important; height: 14.2cqh !important;
  padding: 0 !important; font-size: 0 !important; color: transparent !important;
  cursor: pointer !important; display: block !important; margin: 1cqh auto 0 !important;
}
.tower-btn-collect {
  background-image: url('../assets/btn/collect_reward.png') !important;
  background-size: 100% 100% !important;
  background-color: transparent !important;
  border: none !important; box-shadow: none !important;
  width: 20cqw !important; height: 11.8cqh !important;
  padding: 0 !important; font-size: 0 !important; color: transparent !important;
}

/* Utility classes for reuse anywhere */
.btn-png-collect {
  background-image: url('../assets/btn/collect_reward.png');
  background-size: 100% 100%; background-color: transparent;
  border: none; width: 20cqw; height: 11.8cqh;
  padding: 0; font-size: 0; color: transparent;
  cursor: pointer; display: block;
}
.btn-png-confirm {
  background-image: url('../assets/btn/confirm.png');
  background-size: 100% 100%; background-color: transparent;
  border: none; width: 16cqw; height: 9.5cqh;
  padding: 0; font-size: 0; color: transparent;
  cursor: pointer; display: block;
}

/* ── 8. TEXT BOX BACKGROUND ─────────────────────────────────────────────── */
/* 577×433 = 1.33:1 → use as background-size: cover on popup panels        */
.daily-popup,
.fusion-modal,
.craft-modal,
.stats-box,
.arena-mod-box,
.challenge-mod-box {
  background-image: url('../assets/btn/text_box_background.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #050310 !important;
}

/* ── 9. PORTRAIT / MOBILE ADJUSTMENTS ──────────────────────────────────── */
@media (max-aspect-ratio: 3/4) {
  .battle-hub { flex-direction: column !important; }
  .bm-btn { width: 80cqw !important; height: 47.3cqh !important; }
  .tile-summon, .tile-shop, .tile-inventory, .tile-dungeon {
    min-width: 42cqw !important; max-width: 46cqw !important;
  }
  .home-tiles { flex-wrap: wrap !important; }
  .sbtn-1  { width: 38cqw !important; height: 24.3cqh !important; }
  .sbtn-10 { width: 38cqw !important; height: 24.3cqh !important; }
  .login-enter-btn { width: 48cqw !important; height: 28.4cqh !important; }
  #btn-bgm, #btn-sfx { height: 7cqh !important; width: 3.9cqw !important; }
  #btn-daily-claim { width: 50cqw !important; height: 29.6cqh !important; }
}

/* ── FIX: Hide portal ball — background images are the visual, ball blocks the view ── */
#summon-idle .portal-wrap { display: none !important; }

/* ── Summon animation overlay — sits above bg, below veil/portal content ── */
#summon-anim-overlay {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 0;
  z-index: 1; pointer-events: none;
}

/* ── FIX: HPP PNG buttons — restore image on hover (overrides .hpp-section:hover) ── */
button#btn-quests:hover {
  background-color: transparent !important;
  background-image: url('../assets/btn/quests.png') !important;
  filter: brightness(1.18) !important;
  transform: scale(1.02) !important;
}
button#btn-battlepass:hover {
  background-color: transparent !important;
  background-image: url('../assets/btn/battle_pass.png') !important;
  filter: brightness(1.18) !important;
  transform: scale(1.02) !important;
}
button#btn-achievements:hover {
  background-color: transparent !important;
  background-image: url('../assets/btn/achievements.png') !important;
  filter: brightness(1.18) !important;
  transform: scale(1.02) !important;
}

/* ── FIX: Daily popup — remove pixelated text_box_background ── */
.daily-popup {
  background-image: none !important;
  background: linear-gradient(160deg, rgba(8,4,28,0.98) 0%, rgba(14,6,38,0.98) 100%) !important;
  border: 1px solid rgba(100,60,200,0.4) !important;
  box-shadow: 0 0 3cqw rgba(80,20,180,0.5) !important;
}
.day-tile {
  background: rgba(20,10,50,0.8) !important;
  border: 1px solid rgba(80,40,160,0.4) !important;
}
.day-tile.current {
  background: rgba(60,20,120,0.9) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 1cqw rgba(255,210,26,0.4) !important;
}

/* ── FIX: Shop cards — apply texture background + buy buttons ── */
.shop-card {
  background-image: url('../assets/btn/text_box_background.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: rgba(5,2,20,0.9) !important;
}
.shop-buy-btn {
  background-image: url('../assets/btn/confirm.png') !important;
  background-size: 100% 100% !important;
  background-color: transparent !important;
  border: none !important; box-shadow: none !important; animation: none !important;
  width: 14cqw !important; height: 8.3cqh !important;
  padding: 0 !important; font-size: 0 !important; color: transparent !important;
  cursor: pointer !important; display: block !important;
  margin-top: auto !important; /* always pushed to same bottom position */
  flex-shrink: 0 !important;
}
.shop-buy-btn:hover { filter: brightness(1.2) !important; transform: scale(1.03) !important; }
.shop-buy-btn:active { transform: scale(0.97) !important; }

/* ── Battle hub: more visible background glow + elegant header ── */
#screen-battle .screen-header {
  background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%) !important;
  padding: 1.5cqh 2cqw !important;
}
.battle-hub {
  gap: 2cqh !important;
  padding: 1.5cqh 2cqw 2cqh !important;
}
.bm-btn:hover { filter: brightness(1.25) drop-shadow(0 0 1cqw rgba(150,100,255,0.5)) !important; }

/* ── Login: enhanced button glow + centered layout ── */
.login-enter-btn {
  filter: drop-shadow(0 0 2cqw rgba(120,40,255,0.6)) !important;
}
.login-enter-btn:hover {
  filter: brightness(1.2) drop-shadow(0 0 3.5cqw rgba(160,80,255,0.9)) !important;
  transform: scale(1.04) !important;
}
.login-disclaimer {
  font-size: 0.75cqw !important;
  color: rgba(160,120,255,0.5) !important;
  letter-spacing: 0.15cqw !important;
  margin-top: 0.5cqh !important;
}
.login-tagline {
  font-size: 1.05cqw !important;
  letter-spacing: 0.35cqw !important;
  color: rgba(180,130,255,0.65) !important;
  text-shadow: 0 0 2cqw rgba(140,60,255,0.4) !important;
  animation: taglinePulse 3s ease-in-out infinite !important;
}
@keyframes taglinePulse {
  0%,100% { opacity: 0.7; }
  50%     { opacity: 1.0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME SCREEN — REDESIGN v2
   Layout: SUMMON (hero full-row) → BATTLE + COLLECTION + SHOP (3-col)
           → HPP compact horizontal bar
   ═══════════════════════════════════════════════════════════════════════════ */

#screen-home .home-main {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.8cqh !important;
  padding: 0.5cqh 0 1cqh !important;
}

#screen-home .home-tiles {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.2cqh 1.8cqw !important;
  justify-content: center !important;
  align-items: flex-start !important;
  width: 90cqw !important;
  padding: 0 !important;
}

/* ── SUMMON: full-width hero button ── */
.nav-tile.tile-summon {
  flex: 0 0 88cqw !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 17cqh !important;
  aspect-ratio: auto !important;
  background-size: cover !important;
  background-position: center !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding-bottom: 1.5cqh !important;
  border-radius: 0.8cqw !important;
  box-shadow: 0 0 3cqw rgba(120,40,255,0.45), 0 4px 16px rgba(0,0,0,0.8) !important;
  animation: summonTilePulse 2.8s ease-in-out infinite !important;
}
@keyframes summonTilePulse {
  0%,100% { box-shadow: 0 0 2cqw rgba(120,40,255,0.35), 0 4px 14px rgba(0,0,0,0.8); }
  50%     { box-shadow: 0 0 7cqw rgba(160,60,255,0.65), 0 0 22cqw rgba(80,0,180,0.22); }
}

/* ── BATTLE, COLLECTION, SHOP: 3-col second row ── */
.nav-tile.tile-dungeon,
.nav-tile.tile-inventory,
.nav-tile.tile-shop {
  flex: 0 0 27cqw !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 15cqh !important;
  aspect-ratio: auto !important;
  background-size: cover !important;
  background-position: center !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding-bottom: 1cqh !important;
  border-radius: 0.7cqw !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.7) !important;
}

/* ── Re-enable text labels ── */
.nav-tile.tile-summon .tile-glyph,
.nav-tile.tile-summon .tile-label,
.nav-tile.tile-summon .tile-sublabel,
.nav-tile.tile-shop .tile-glyph,
.nav-tile.tile-shop .tile-label,
.nav-tile.tile-shop .tile-sublabel,
.nav-tile.tile-inventory .tile-glyph,
.nav-tile.tile-inventory .tile-label,
.nav-tile.tile-inventory .tile-sublabel,
.nav-tile.tile-dungeon .tile-glyph,
.nav-tile.tile-dungeon .tile-label,
.nav-tile.tile-dungeon .tile-sublabel { display: block !important; }

/* Glyph: show only on SUMMON (star accent) */
.nav-tile.tile-dungeon .tile-glyph,
.nav-tile.tile-inventory .tile-glyph,
.nav-tile.tile-shop .tile-glyph { display: none !important; }

.nav-tile.tile-summon .tile-glyph {
  font-size: 2cqw !important;
  color: rgba(200,160,255,0.85) !important;
  text-shadow: 0 0 1cqw rgba(160,80,255,0.6) !important;
  margin-bottom: 0.2cqh !important;
}

/* Text sizes */
.nav-tile.tile-summon .tile-label {
  font-size: 2.4cqw !important;
  letter-spacing: .4cqw !important;
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9) !important;
}
.nav-tile.tile-summon .tile-sublabel {
  font-size: 0.88cqw !important;
  color: rgba(200,160,255,0.8) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8) !important;
}
.nav-tile.tile-dungeon .tile-label,
.nav-tile.tile-inventory .tile-label,
.nav-tile.tile-shop .tile-label {
  font-size: 1.3cqw !important;
  letter-spacing: .18cqw !important;
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.95) !important;
}
.nav-tile.tile-dungeon .tile-sublabel,
.nav-tile.tile-inventory .tile-sublabel,
.nav-tile.tile-shop .tile-sublabel {
  font-size: 0.65cqw !important;
  color: rgba(255,255,255,0.65) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9) !important;
}

/* ── ::before: dark gradient at tile bottom for legibility ── */
.nav-tile.tile-summon::before,
.nav-tile.tile-shop::before,
.nav-tile.tile-inventory::before,
.nav-tile.tile-dungeon::before {
  display: block !important;
  background: linear-gradient(to top,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.30) 55%,
    rgba(0,0,0,0.04) 100%) !important;
}

/* ── HPP activity bar: revert to clean text-based horizontal row ── */
.home-progress-panel {
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 88cqw !important;
  max-width: 88cqw !important;
  background: rgba(6,3,18,0.92) !important;
  border: 1px solid rgba(130,70,220,0.3) !important;
  border-radius: 0.8cqw !important;
  padding: 0 !important;
  box-shadow: 0 0 2cqw rgba(80,20,160,0.2), 0 3px 12px rgba(0,0,0,0.6) !important;
}
.home-progress-panel .hpp-divider { display: block !important; width: 1px !important; align-self: stretch !important; }

button#btn-quests, button#btn-battlepass, button#btn-achievements {
  background-image: none !important;
  background-color: transparent !important;
  background-size: auto !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
  padding: .65cqh .9cqw !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .6cqw !important;
  margin: 0 !important;
}
button#btn-quests .hpp-icon,
button#btn-quests .hpp-info,
button#btn-quests .hpp-arrow,
button#btn-battlepass .hpp-icon,
button#btn-battlepass .hpp-info,
button#btn-battlepass .hpp-arrow,
button#btn-achievements .hpp-icon,
button#btn-achievements .hpp-info,
button#btn-achievements .hpp-arrow { display: flex !important; }

button#btn-stats {
  width: auto !important;
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: .65cqh .9cqw !important;
  margin: 0 !important;
}

/* ── Battle hub: frosted-glass text badge (always readable) ── */
.bm-btn .bm-info {
  position: absolute !important;
  bottom: 4% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: 80% !important;
  background: rgba(0,0,0,0.65) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-radius: 0.4cqw !important;
  padding: 0.28cqh 0.9cqw !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.1cqh !important;
  white-space: nowrap !important;
}
.bm-btn .bm-desc {
  font-size: 0.72cqw !important;
  color: rgba(255,255,255,0.96) !important;
  text-shadow: none !important;
}
.bm-btn .bm-reward {
  font-size: 0.6cqw !important;
  color: rgba(180,230,255,0.94) !important;
  text-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v3 — Unified polish, component standards, stat colours
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Utility ── */
.hidden { display: none !important; }
.sbar-lbl-hp  { color: var(--color-hp)  !important; }
.sbar-lbl-atk { color: var(--color-atk) !important; }
.sbar-lbl-def { color: var(--color-def) !important; }
.sbar-lbl-spd { color: var(--color-spd) !important; }

/* ── Screen Headers — unified across all screens ── */
.screen-header {
  background:   rgba(2,1,8,0.88) !important;
  backdrop-filter: blur(14px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.5) !important;
  border-bottom: 1px solid rgba(200,167,64,0.22) !important;
  box-shadow: 0 0.2cqh 1.5cqh rgba(0,0,0,0.6) !important;
  min-height: 6cqh !important;
}
/* Summon topbar matches screen-header */
.summon-topbar {
  background:   rgba(2,1,8,0.88) !important;
  backdrop-filter: blur(14px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.5) !important;
  border-bottom: 1px solid rgba(200,167,64,0.22) !important;
  box-shadow: 0 0.2cqh 1.5cqh rgba(0,0,0,0.6) !important;
}

/* ── Back button — consistent on all screens ── */
.back-btn {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: var(--radius-sm) !important;
  color: rgba(255,255,255,0.72) !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08cqw !important;
  padding: 0.42cqh 1.1cqw !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) !important;
}
.back-btn:hover  { background: rgba(255,255,255,0.14) !important; color: #fff !important; }
.back-btn:active { transform: scale(0.95) !important; }

/* ── All modals / overlay panels — same dark bg ── */
.quest-panel, .bp-panel, .ach-overlay,
.stats-overlay, .glossary-overlay,
.fusion-modal, .craft-modal,
.arena-overlay, .tower-overlay,
.world-intro, .tutorial-overlay,
.daily-popup, .stats-box, .challenge-mod-box {
  background: var(--modal-bg) !important;
  border: 1px solid var(--modal-border) !important;
  box-shadow: var(--modal-glow), var(--shadow-deep) !important;
}

/* ── Toast ── */
.toast {
  background: rgba(8,4,22,0.97) !important;
  border: 1px solid var(--modal-border) !important;
  box-shadow: 0 0 2cqw rgba(80,20,180,0.3), var(--shadow-deep) !important;
  border-radius: var(--radius-md) !important;
}

/* ── Monster card rarity glow & stripe ── */
.monster-card.r5 { border-color: rgba(255,215,0,0.5) !important; }
.monster-card.r6 { border-color: rgba(255,140,0,0.6) !important; box-shadow: 0 0 1.5cqw var(--r6-glow) !important; }
.monster-card.r5:hover { border-color: var(--r5) !important; box-shadow: 0 0 1.5cqw var(--r5-glow) !important; }
.monster-card.r4:hover { border-color: var(--r4) !important; box-shadow: 0 0 1.2cqw var(--r4-glow) !important; }

/* Coloured top stripe per rarity */
.monster-card.r5::after, .monster-card.r4::after, .monster-card.r6::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 0.35cqh; z-index: 4;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.monster-card.r5::after { background: linear-gradient(to right, transparent, var(--r5), transparent); }
.monster-card.r4::after { background: linear-gradient(to right, transparent, var(--r4), transparent); }
.monster-card.r6::after { background: linear-gradient(to right, transparent, var(--r6), transparent); }

/* ── Summon result: rarity-specific glow on stars ── */
.res-stars[data-rarity="5"] { text-shadow: 0 0 2cqw var(--r5-glow) !important; }
.res-stars[data-rarity="4"] { text-shadow: 0 0 1.5cqw var(--r4-glow) !important; }

/* ── Action buttons — base consistency ── */
.action-btn {
  font-weight: 900 !important;
  letter-spacing: 0.15cqw !important;
  transition: filter var(--dur-fast), transform var(--dur-fast) !important;
}
.action-btn:hover  { filter: brightness(1.28) !important; transform: scale(1.03) !important; }
.action-btn:active { filter: brightness(0.95) !important; transform: scale(0.97) !important; }

/* ── Fight button — more dramatic ── */
.fight-btn {
  background: linear-gradient(135deg, #480808 0%, #8A1212 50%, #480808 100%) !important;
  letter-spacing: 0.5cqw !important;
  text-shadow: 0 0 1.2cqw rgba(255,80,80,0.7) !important;
}
.fight-btn:active { transform: scale(0.98) !important; }

/* ── AUTO ON indicator ── */
.auto-btn.active { background: linear-gradient(135deg,#0A2A0A,#154A15) !important; color: #66FF66 !important; }

/* ── Shop cards — use design token ── */
.shop-card { background: var(--card-bg) !important; }
.shop-card-value-line { font-size: 0.72cqw !important; color: rgba(255,220,100,0.65) !important; font-style: italic !important; }

/* ── Empty states ── */
.detail-empty { color: rgba(255,255,255,0.28) !important; font-size: var(--text-lg) !important; letter-spacing: 0.12cqw !important; }

/* ── Loading screen pulse ── */
.loading-text { animation: loadPulse 1.4s ease-in-out infinite; }
@keyframes loadPulse { 0%,100%{opacity:.45} 50%{opacity:1} }

/* ── Victory Banner ── */
.victory-banner {
  position: absolute; top: 18%; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(5,30,5,0.95), rgba(20,60,10,0.95));
  border: 1px solid rgba(100,220,80,0.5);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 3cqw rgba(80,200,50,0.4), var(--shadow-deep);
  padding: 1.2cqh 2.5cqw;
  display: flex; flex-direction: column; align-items: center; gap: 0.3cqh;
  z-index: 500; pointer-events: none;
  animation: vbIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
  transition: opacity 0.5s ease;
}
.victory-banner.vb-fadeout { opacity: 0; }
@keyframes vbIn {
  from { transform: translateX(-50%) scale(0.7); opacity: 0; }
  to   { transform: translateX(-50%) scale(1);   opacity: 1; }
}
.vb-title   { font-size: var(--text-lg); font-weight: 900; letter-spacing: 0.2cqw; color: #66FF66; }
.vb-rewards { font-size: var(--text-xl); font-weight: 900; color: var(--gold); }
.vb-extra   { font-size: var(--text-sm); color: rgba(200,255,180,0.8); }

/* ── Monster card: NEW badge ── */
.card-new-badge {
  position: absolute; top: 0.3cqh; left: 0.3cqw;
  background: linear-gradient(135deg, #FFD700, #FF8C00);
  color: #000; font-size: 0.5cqw; font-weight: 900;
  letter-spacing: 0.05cqw;
  padding: 0.15cqh 0.4cqw; border-radius: var(--radius-sm);
  z-index: 5;
  animation: newBadgePulse 1.8s ease-in-out infinite;
}
@keyframes newBadgePulse {
  0%,100% { box-shadow: 0 0 0.3cqw rgba(255,215,0,0.6); }
  50%     { box-shadow: 0 0 0.8cqw rgba(255,215,0,1.0); }
}

/* ── Inventory empty state ── */
.inv-empty-cta {
  grid-column: span 3; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.8cqh; padding: 3cqh 2cqw; text-align: center;
}
.iec-glyph { font-size: 3cqw; color: rgba(160,80,255,0.5); animation: taglinePulse 2.5s ease-in-out infinite; }
.iec-title { font-size: var(--text-lg); font-weight: 900; color: rgba(255,255,255,0.7); letter-spacing: 0.15cqw; }
.iec-sub   { font-size: var(--text-sm); color: rgba(255,255,255,0.35); }
.iec-btn   { margin-top: 0.5cqh; }
.inv-filter-empty { grid-column: span 3; text-align: center; padding: 2cqh; font-size: var(--text-sm); color: rgba(255,255,255,0.25); }

/* ── Previously inline styles → classes ── */
.btn-glossary { font-size: 0.7cqw !important; padding: 0.4cqh 0.8cqw !important; }
.bm-badge-red { background: #cc0000 !important; color: #fff !important; }

/* ── Summon result: rarity atmosphere ── */
.reveal-result.reveal-r5 .res-img {
  filter: drop-shadow(0 0 4cqw rgba(255,215,0,0.7)) drop-shadow(0 0 1.5cqw rgba(255,255,200,0.5)) !important;
}
.reveal-result.reveal-r4 .res-img {
  filter: drop-shadow(0 0 3cqw rgba(102,204,255,0.6)) !important;
}
.reveal-result.reveal-r5 {
  animation: reveal-r5-bg 1.2s ease forwards;
}
@keyframes reveal-r5-bg {
  0%   { background: radial-gradient(circle at 50% 40%, rgba(255,215,0,0.25) 0%, transparent 70%); }
  100% { background: transparent; }
}
.reveal-result.reveal-r5 .res-name {
  color: var(--r5) !important;
  text-shadow: 0 0 2cqw rgba(255,215,0,0.6), 0 0.2cqh 1cqh rgba(0,0,0,0.9) !important;
}
.reveal-result.reveal-r4 .res-name {
  color: var(--r4) !important;
  text-shadow: 0 0 1.5cqw rgba(102,204,255,0.5), 0 0.2cqh 1cqh rgba(0,0,0,0.9) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON POLISH v4 — Targeted fixes: missing transitions, active states,
   disabled pointer-events, focus-visible, filter tab hover correction.
   No structural changes. No feature removals.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Battle mode buttons (bm-btn): smooth hover transition ── */
.bm-btn { transition: filter var(--dur-fast) !important; }
.bm-btn:active { transform: scale(0.97) !important; filter: brightness(0.9) !important; transition: transform .06s, filter .06s !important; }

/* ── Auto / Speed battle buttons: active tap feedback ── */
.auto-btn:active,
.speed-btn:active { transform: scale(0.95); transition: transform .06s; }

/* ── HPP section buttons (quests / battlepass / achievements): active tap ── */
.hpp-section:active { background: rgba(255,255,255,0.10) !important; }

/* ── Battle Pass claim button: hover + active ── */
.bp-claim-btn {
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.bp-claim-btn:hover  { background: rgba(255,210,26,0.38); }
.bp-claim-btn:active { transform: scale(0.93); }

/* ── Equipment slot buttons: hover + transition ── */
.equip-slot-btn {
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.equip-slot-btn:hover  { background: rgba(100,60,200,0.55); border-color: rgba(180,100,255,0.75); }
.equip-slot-btn:active { transform: scale(0.94); }

.equip-uneq-btn {
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.equip-uneq-btn:hover  { background: rgba(200,30,30,0.45); border-color: rgba(255,80,80,0.65); }
.equip-uneq-btn:active { transform: scale(0.94); }

/* ── Filter tabs: active tab must NOT dim on hover ── */
.ftab.active:hover { background: rgba(255,255,255,0.24) !important; }
.stab.active:hover { background: rgba(255,255,255,0.22) !important; }

/* ── Skill upgrade button: disabled state ── */
.skup-big-btn:disabled { filter: brightness(0.38); cursor: not-allowed; transform: none; pointer-events: none; }

/* ── Favorite button: active tap feedback ── */
.btn-favorite { transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); }
.btn-favorite:active { transform: scale(0.88); }

/* ── HUD achievement button: active tap feedback ── */
.hud-ach-btn:active { transform: scale(0.88); transition: transform .08s; }

/* ── Banner halves (summon banner selector): smooth hover ── */
.banner-half { transition: background var(--dur-med), filter var(--dur-fast); }

/* ── Tutorial skip button: smooth color transition ── */
.tut-skip-btn { transition: color var(--dur-fast); }

/* ── Disabled buttons: prevent hover/active visual effects ── */
.action-btn:disabled,
.sbtn:disabled,
.fight-btn:disabled { pointer-events: none; }

/* Explicitly lock disabled visual — prevent !important hover overriding it */
.action-btn:disabled { filter: brightness(0.38) !important; transform: none !important; }
.sbtn:disabled       { filter: brightness(0.28) !important; transform: none !important; }
.fight-btn:disabled  { filter: brightness(0.32) !important; transform: none !important; }

/* ── Focus-visible: keyboard accessibility ring on all interactive buttons ── */
.action-btn:focus-visible,
.sbtn:focus-visible,
.nav-tile:focus-visible,
.back-btn:focus-visible,
.fight-btn:focus-visible,
.panel-close:focus-visible,
.ftab:focus-visible,
.stab:focus-visible,
.hud-icon-btn:focus-visible,
.bm-btn:focus-visible,
.team-slot:focus-visible {
  outline: 1.5px solid rgba(200,160,255,0.75) !important;
  outline-offset: 2px !important;
}

/* ── Mobile: back-btn padding override (fix !important conflict with v3) ── */
@container game (max-width: 720px) {
  .back-btn { padding: 0.7cqh 1.5cqw !important; font-size: 2.0cqw !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UI FIXES v5 — Home tiles, HPP hover, title centering, shop scroll
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. HOME NAV TILES: correct aspect-ratio, 2×2 grid, no pixelation ── */
#screen-home .home-tiles {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.2cqh 1.8cqw !important;
  justify-content: center !important;
  align-items: flex-start !important;
  width: 90cqw !important;
  padding: 0 !important;
}

/* All 4 PNG nav tiles: 42cqw × aspect-ratio 866:288 (same as battle hub buttons) */
.nav-tile.tile-summon,
.nav-tile.tile-dungeon,
.nav-tile.tile-inventory,
.nav-tile.tile-shop {
  flex: 0 0 42cqw !important;
  width: 42cqw !important;
  height: auto !important;
  aspect-ratio: 866 / 288 !important;
  background-size: 100% 100% !important;
  background-position: unset !important;
  padding: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  animation: none !important;
}

/* Summon tile: keep a subtle pulsing glow but no size override */
.nav-tile.tile-summon {
  box-shadow: 0 3px 20px rgba(0,0,0,0.75), 0 0 2cqw rgba(120,40,255,0.3) !important;
}
.nav-tile.tile-dungeon,
.nav-tile.tile-inventory,
.nav-tile.tile-shop {
  box-shadow: 0 3px 12px rgba(0,0,0,0.65) !important;
}

/* Hide text labels on all 4 PNG nav tiles — text is already in the PNG */
.nav-tile.tile-summon .tile-glyph,
.nav-tile.tile-summon .tile-label,
.nav-tile.tile-summon .tile-sublabel,
.nav-tile.tile-shop .tile-glyph,
.nav-tile.tile-shop .tile-label,
.nav-tile.tile-shop .tile-sublabel,
.nav-tile.tile-inventory .tile-glyph,
.nav-tile.tile-inventory .tile-label,
.nav-tile.tile-inventory .tile-sublabel,
.nav-tile.tile-dungeon .tile-glyph,
.nav-tile.tile-dungeon .tile-label,
.nav-tile.tile-dungeon .tile-sublabel { display: none !important; }

/* Remove the dark gradient overlay — PNG already has its own styling */
.nav-tile.tile-summon::before,
.nav-tile.tile-shop::before,
.nav-tile.tile-inventory::before,
.nav-tile.tile-dungeon::before { display: none !important; }

/* ── 2. HPP BUTTONS: fix hover bug (PNG image was reappearing on hover) ── */
button#btn-quests:hover,
button#btn-battlepass:hover,
button#btn-achievements:hover {
  background-image: none !important;
  background-color: rgba(255,255,255,0.07) !important;
  filter: brightness(1.1) !important;
  transform: none !important;
}

/* ── 3. BATTLE HUB: center "BATTLE HUB" title in header ── */
#screen-battle .screen-header { position: relative !important; }
#screen-battle .screen-header .stage-lbl {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  flex: none !important;
  pointer-events: none !important;
}

/* ── 4. SHOP: scrollable + cards stretch to same row-height so buy-btn aligns ── */
.shop-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  align-items: stretch !important; /* cards in each row grow to same height */
  max-height: calc(100% - 6cqh - 3cqh) !important;
}
/* Shop cards: flex column so margin-top:auto on button works */
.shop-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* ── 5. COLLECTION: center "COLLECTION" title in header ── */
.screen-header .inv-title {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  flex: none !important;
  pointer-events: none !important;
}

/* ── Mobile adjustments for 2×2 nav tile grid ── */
@container game (max-width: 720px) {
  .nav-tile.tile-summon,
  .nav-tile.tile-dungeon,
  .nav-tile.tile-inventory,
  .nav-tile.tile-shop {
    flex: 0 0 43cqw !important;
    width: 43cqw !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUILDING VISUALS v1 — Buildings overlaid on buttons + World Boss PNG
   Buildings sit right-side of each button, bottom-anchored for depth.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. WORLD BOSS: apply PNG button (replaces gradient) ── */
#bm-world-boss {
  background-image:
    url('../assets/buildings/world_boss_building.png'),
    url('../assets/btn/world_boss_button.png') !important;
  background-size: auto 88%, 100% 100% !important;
  background-position: right 6% bottom 0%, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-color: transparent !important;
  border: none !important;
}
/* World Boss: hide HTML name/icon — text is now in the PNG */
#bm-world-boss .bm-name,
#bm-world-boss .bm-icon { display: none !important; }
/* World Boss: position info badge same as all other bm-btn */
#bm-world-boss .bm-info {
  position: absolute !important;
  bottom: 4% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: 75% !important;
}

/* ── 2. BATTLE HUB BUTTONS: add building overlay on right side ── */
#bm-dungeon {
  background-image:
    url('../assets/buildings/dungeon_building.png'),
    url('../assets/btn/Dungeon.png') !important;
  background-size: auto 90%, 100% 100% !important;
  background-position: right 6% bottom 0%, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
#bm-arena {
  background-image:
    url('../assets/buildings/arena_building.png'),
    url('../assets/btn/Arena.png') !important;
  background-size: auto 90%, 100% 100% !important;
  background-position: right 6% bottom 0%, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
#bm-boss-rush {
  background-image:
    url('../assets/buildings/boss_rush_building.png'),
    url('../assets/btn/Boss_rush.png') !important;
  background-size: auto 90%, 100% 100% !important;
  background-position: right 6% bottom 0%, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
#bm-challenge {
  background-image:
    url('../assets/buildings/challenge_building.png'),
    url('../assets/btn/Challenge.png') !important;
  background-size: auto 90%, 100% 100% !important;
  background-position: right 6% bottom 0%, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
#bm-tower {
  background-image:
    url('../assets/buildings/void_tower_building.png'),
    url('../assets/btn/Void_tower.png') !important;
  background-size: auto 90%, 100% 100% !important;
  background-position: right 6% bottom 0%, center !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* ── 3. HOME SCREEN NAV TILES: add building overlay on right side ── */
.nav-tile.tile-summon {
  background-image:
    url('../assets/buildings/summon_building.png'),
    url('../assets/btn/Summon.png') !important;
  background-size: auto 88%, 100% 100% !important;
  background-position: right 6% bottom 0%, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
.nav-tile.tile-shop {
  background-image:
    url('../assets/buildings/shop_building.png'),
    url('../assets/btn/Shop.png') !important;
  background-size: auto 88%, 100% 100% !important;
  background-position: right 6% bottom 0%, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
.nav-tile.tile-inventory {
  background-image:
    url('../assets/buildings/collection_building.png'),
    url('../assets/btn/Collection.png') !important;
  background-size: auto 88%, 100% 100% !important;
  background-position: right 6% bottom 0%, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
.nav-tile.tile-dungeon {
  background-image:
    url('../assets/buildings/battle_building.png'),
    url('../assets/btn/Battle.png') !important;
  background-size: auto 88%, 100% 100% !important;
  background-position: right 6% bottom 0%, center !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CITY LAYOUT v1 — Buildings stand above buttons, city skyline on ground
   Buildings are <img class="city-building"> elements in .city-tile wrappers.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Revert: buildings are now separate img tags — single-layer PNG buttons ── */
.nav-tile.tile-summon    { background-image: url('../assets/btn/Summon.png')     !important; background-size: 100% 100% !important; background-position: center !important; }
.nav-tile.tile-shop      { background-image: url('../assets/btn/Shop.png')       !important; background-size: 100% 100% !important; background-position: center !important; }
.nav-tile.tile-inventory { background-image: url('../assets/btn/Collection.png') !important; background-size: 100% 100% !important; background-position: center !important; }
.nav-tile.tile-dungeon   { background-image: url('../assets/btn/Battle.png')     !important; background-size: 100% 100% !important; background-position: center !important; }

#bm-dungeon   { background-image: url('../assets/btn/Dungeon.png')    !important; background-size: 100% 100% !important; background-position: center !important; }
#bm-arena     { background-image: url('../assets/btn/Arena.png')      !important; background-size: 100% 100% !important; background-position: center !important; }
#bm-boss-rush { background-image: url('../assets/btn/Boss_rush.png')  !important; background-size: 100% 100% !important; background-position: center !important; }
#bm-challenge { background-image: url('../assets/btn/Challenge.png')  !important; background-size: 100% 100% !important; background-position: center !important; }
#bm-tower     { background-image: url('../assets/btn/Void_tower.png') !important; background-size: 100% 100% !important; background-position: center !important; }
#bm-world-boss { background-image: url('../assets/btn/world_boss_button.png') !important; background-size: 100% 100% !important; background-position: center !important; }

/* World Boss HTML name+icon removed from markup — no need to re-show them */
#bm-world-boss .bm-name,
#bm-world-boss .bm-icon { display: none !important; }
#bm-world-boss .bm-info {
  position: absolute !important;
  bottom: 4% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: 80% !important;
}

/* ── City tile: building img on top, PNG button below ── */
.city-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  position: relative;
}

.city-building {
  width: auto;
  max-height: 17cqh;
  object-fit: contain;
  pointer-events: none;
  display: block;
  filter: drop-shadow(0 0.4cqh 1cqw rgba(0,0,0,0.75));
}

/* ── HOME SCREEN: 2×2 city grid, bottom-aligned (ground-level skyline) ── */
#screen-home .home-tiles {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5cqh 1.5cqw !important;
  justify-content: center !important;
  align-items: flex-end !important;
  width: 94cqw !important;
  padding: 0 !important;
}

#screen-home .city-tile {
  flex: 0 0 44cqw;
  align-items: center;
}

/* ── BATTLE HUB: 3×2 city grid, smaller buttons to fit 3 per row ── */
.battle-hub {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-end !important;
  gap: 0.6cqh 1.2cqw !important;
  padding: 0.8cqh 1cqw !important;
}

.battle-hub .city-tile {
  flex: 0 0 29cqw;
  align-items: center;
}

.battle-hub .city-building {
  max-height: 13cqh !important;
}

/* Battle hub buttons resized to fit 3-column layout: 29cqw × 17.1cqh */
.battle-hub .bm-btn {
  width: 29cqw !important;
  height: 17.1cqh !important;
  flex-shrink: 0 !important;
}

/* ── Summon buttons: confirm equal size ── */
.sbtn-1  { width: 18cqw !important; height: 11.5cqh !important; padding: 0 !important; min-width: 0 !important; }
.sbtn-10 { width: 18cqw !important; height: 11.5cqh !important; padding: 0 !important; min-width: 0 !important; }

/* ── Mobile city layout ── */
@container game (max-width: 720px) {
  #screen-home .home-tiles { gap: 0.4cqh 1cqw !important; width: 96cqw !important; }
  #screen-home .city-tile  { flex: 0 0 46cqw !important; }
  .city-building            { max-height: 14cqh !important; }
  .battle-hub .city-tile    { flex: 0 0 44cqw !important; }
  .battle-hub .bm-btn       { width: 44cqw !important; height: 26cqh !important; }
  .battle-hub .city-building { max-height: 16cqh !important; }
  .sbtn-1, .sbtn-10         { width: 38cqw !important; height: 24.3cqh !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CITY LAYOUT v2 — Correct sizes: small buttons, big buildings, all visible
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HOME: force nav-tile buttons SMALL inside city-tile ── */
/* Specificity: 1 ID + 3 classes = (1,3,0) — overrides everything */
#screen-home .city-tile .nav-tile.tile-summon,
#screen-home .city-tile .nav-tile.tile-shop,
#screen-home .city-tile .nav-tile.tile-inventory,
#screen-home .city-tile .nav-tile.tile-dungeon {
  flex: none !important;
  width: 24cqw !important;
  height: 8cqh !important;   /* small label button under big building */
  min-width: 0 !important;
  max-width: none !important;
  aspect-ratio: auto !important;  /* fixed dimensions, no ratio constraint */
  animation: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}

/* ── HOME: buildings are the main visual — large ── */
#screen-home .city-building {
  max-height: 26cqh !important;
  max-width: 42cqw !important;
  width: auto !important;
}

/* ── HOME: city-tile is medium width, centers building+button ── */
#screen-home .city-tile {
  flex: 0 0 44cqw !important;
  max-width: 44cqw !important;
}

/* ── HOME: home-tiles as 2×2 grid — total height must fit on screen ── */
/* Per row: 26cqh building + 8cqh button = 34cqh. 2 rows + 1cqh gap = 69cqh */
/* Plus HUD(6) + HPP(5) + main gaps(3) = 83cqh total → fits in 100cqh */
#screen-home .home-tiles {
  align-items: flex-end !important;
  gap: 1cqh 1.5cqw !important;
  width: 92cqw !important;
}

/* ── BATTLE HUB: force bm-btn buttons SMALLER inside city-tile ── */
.battle-hub .city-tile .bm-btn {
  width: 24cqw !important;
  height: 8cqh !important;   /* same small label approach */
  flex-shrink: 0 !important;
}

/* ── BATTLE HUB: buildings larger ── */
.battle-hub .city-tile {
  flex: 0 0 28cqw !important;
  max-width: 28cqw !important;
}
.battle-hub .city-building {
  max-height: 22cqh !important;
  max-width: 27cqw !important;
  width: auto !important;
}

/* ── BATTLE HUB: layout — 3×2 with city-tiles ── */
/* Per row: 22cqh building + 8cqh button = 30cqh. 2 rows + 0.8cqh gap = 61cqh */
/* Plus header(6) + padding(2) = 69cqh → fits comfortably */
.battle-hub {
  align-items: flex-end !important;
  gap: 0.8cqh 1.2cqw !important;
  padding: 1cqh 2cqw 1.5cqh !important;
}

/* ── SUMMON BUTTONS: same height, natural width, top-aligned ── */
.summon-btn-row { align-items: flex-start !important; gap: 1.5cqw !important; }
/* Natural aspect-ratio = no stretching. Same height = same visual size. */
#summon-actions .sbtn-1 {
  height: 11.5cqh !important;
  width: auto !important;
  aspect-ratio: 831 / 300 !important;
  padding: 0 !important;
  min-width: 0 !important;
}
#summon-actions .sbtn-10 {
  height: 11.5cqh !important;
  width: auto !important;
  aspect-ratio: 797 / 313 !important;
  padding: 0 !important;
  min-width: 0 !important;
}

/* ── MOBILE city v2 ── */
@container game (max-width: 720px) {
  #screen-home .city-tile { flex: 0 0 46cqw !important; }
  #screen-home .city-tile .nav-tile.tile-summon,
  #screen-home .city-tile .nav-tile.tile-shop,
  #screen-home .city-tile .nav-tile.tile-inventory,
  #screen-home .city-tile .nav-tile.tile-dungeon { width: 42cqw !important; height: 14cqh !important; }
  #screen-home .city-building { max-height: 22cqh !important; }
  .battle-hub .city-tile { flex: 0 0 44cqw !important; }
  .battle-hub .city-tile .bm-btn { width: 42cqw !important; height: 14cqh !important; }
  .battle-hub .city-building { max-height: 20cqh !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CITY LAYOUT v3 FINAL — Natural ratios, hover on whole tile, text inside btn
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. HOME: nav-tile buttons use NATURAL RATIO (no stretch) ── */
#screen-home .city-tile .nav-tile.tile-summon,
#screen-home .city-tile .nav-tile.tile-shop,
#screen-home .city-tile .nav-tile.tile-inventory,
#screen-home .city-tile .nav-tile.tile-dungeon {
  width: 18cqw !important;
  height: auto !important;
  aspect-ratio: 866 / 288 !important;  /* natural: ~10.6cqh at 18cqw */
  flex: none !important;
  min-width: 0 !important;
  max-width: none !important;
  animation: none !important;
}

/* ── 2. HOME: city-tile width matches button + some breathing room ── */
#screen-home .city-tile {
  flex: 0 0 40cqw !important;
  max-width: 40cqw !important;
}

/* ── 3. HOME: building is the big visual — larger than button ── */
#screen-home .city-building {
  max-height: 24cqh !important;
  max-width: 38cqw !important;
  width: auto !important;
}

/* ── 4. HOME: tight layout — no gap between building and button ── */
#screen-home .home-tiles {
  gap: 1.2cqh 1.5cqw !important;
  width: 88cqw !important;
}

/* ── 5. BATTLE HUB: bm-btn natural ratio, position:relative for bm-info ── */
.battle-hub .city-tile .bm-btn {
  width: 22cqw !important;
  height: auto !important;
  aspect-ratio: 866 / 288 !important;  /* natural: ~13cqh at 22cqw */
  position: relative !important;       /* bm-info stays inside this btn */
  overflow: visible !important;        /* allow text to breathe */
}

/* ── 6. BATTLE HUB: city-tile width + building sizes ── */
.battle-hub .city-tile {
  flex: 0 0 26cqw !important;
  max-width: 26cqw !important;
  align-items: center !important;
}
.battle-hub .city-building {
  max-height: 18cqh !important;
  max-width: 25cqw !important;
  width: auto !important;
}

/* ── 7. BATTLE HUB: bm-info text inside button, font sized for small btn ── */
.battle-hub .city-tile .bm-btn .bm-info {
  position: absolute !important;
  bottom: 8% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 90% !important;
  max-width: 90% !important;
  background: rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(4px) !important;
  border-radius: 0.3cqw !important;
  padding: 0.2cqh 0.5cqw !important;
}
.battle-hub .city-tile .bm-btn .bm-desc {
  font-size: 0.6cqw !important;
}
.battle-hub .city-tile .bm-btn .bm-reward {
  font-size: 0.52cqw !important;
}

/* ── 8. BATTLE HUB: 3×2 grid fits on screen ── */
/* Per row: 18cqh building + 13cqh button = 31cqh. 2 rows + 0.8cqh = 63cqh + header 6 = 69cqh → fits */
.battle-hub {
  align-items: flex-end !important;
  gap: 0.8cqh 1cqw !important;
  padding: 0.8cqh 1.5cqw 1cqh !important;
}

/* ── 9. HOVER: entire city-tile (building + button) scales together ── */
.city-tile {
  transition: transform 0.2s cubic-bezier(.2,1.25,.4,1), filter 0.15s !important;
  cursor: pointer !important;
}
.city-tile:hover {
  transform: scale(1.07) translateY(-0.5cqh) !important;
  filter: brightness(1.22) !important;
}
.city-tile:active {
  transform: scale(0.96) translateY(0) !important;
  filter: brightness(0.88) !important;
  transition: transform 0.06s, filter 0.06s !important;
}
/* Prevent individual button hover from adding conflicting transform */
#screen-home .city-tile .nav-tile:hover,
.battle-hub .city-tile .bm-btn:hover {
  transform: none !important;
  filter: none !important;
}

/* ── MOBILE final ── */
@container game (max-width: 720px) {
  #screen-home .city-tile          { flex: 0 0 44cqw !important; }
  #screen-home .city-building      { max-height: 20cqh !important; }
  #screen-home .city-tile .nav-tile.tile-summon,
  #screen-home .city-tile .nav-tile.tile-shop,
  #screen-home .city-tile .nav-tile.tile-inventory,
  #screen-home .city-tile .nav-tile.tile-dungeon { width: 40cqw !important; }
  .battle-hub .city-tile           { flex: 0 0 44cqw !important; }
  .battle-hub .city-tile .bm-btn   { width: 42cqw !important; }
  .battle-hub .city-building       { max-height: 18cqh !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUMMON BUTTONS — FINAL FIX
   Targeting both buttons by ID for maximum specificity (2,0,0).
   Both forced to identical dimensions. Guaranteed no further conflicts.
   ═══════════════════════════════════════════════════════════════════════════ */
#summon-actions #btn-summon,
#summon-actions #btn-summon-10 {
  width: 17cqw !important;
  height: 11cqh !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}
#summon-actions .summon-btn-row {
  align-items: center !important;
  display: flex !important;
  gap: 1.5cqw !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CITY LAYOUT v4 — Bigger buildings, no gap, readable battle text
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HOME: buildings bigger, ANCHORED TO BOTTOM (no transparent gap below) ── */
#screen-home .city-building {
  max-height: 28cqh !important;
  width: auto !important;
  display: block !important;
  margin-bottom: 0 !important;
  object-fit: contain !important;
  object-position: bottom center !important; /* transparent space goes to TOP */
}
#screen-home .city-tile {
  flex: 0 0 21cqw !important;
  max-width: 21cqw !important;
  gap: 0 !important;
  justify-content: flex-end !important;
}
#screen-home .home-tiles {
  flex-wrap: nowrap !important;       /* all 4 in one row */
  gap: 0 1cqw !important;
  width: 90cqw !important;
  align-items: flex-end !important;
}
/* Buttons fill the tile width in single-row layout */
#screen-home .city-tile .nav-tile.tile-summon,
#screen-home .city-tile .nav-tile.tile-shop,
#screen-home .city-tile .nav-tile.tile-inventory,
#screen-home .city-tile .nav-tile.tile-dungeon {
  width: 20cqw !important;
}

/* ── BATTLE HUB: buildings anchored to bottom, tiny gap reduction ── */
.battle-hub .city-building {
  max-height: 22cqh !important;
  width: auto !important;
  display: block !important;
  margin-bottom: 0 !important;
  object-fit: contain !important;
  object-position: bottom center !important; /* transparent space goes to TOP */
}
.battle-hub .city-tile {
  gap: 0 !important;
  justify-content: flex-end !important;
  padding-bottom: 3.2cqh !important;
}

/* ── BATTLE HUB text label: positioned below button, clearly readable ── */
.battle-hub .city-tile .bm-btn .bm-info {
  position: absolute !important;
  top: 100% !important;          /* just below the button bottom */
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 110% !important;
  max-width: 110% !important;
  margin-top: 0.3cqh !important;
  background: rgba(4,2,14,0.85) !important;
  backdrop-filter: blur(6px) !important;
  border-radius: 0.35cqw !important;
  padding: 0.3cqh 0.6cqw !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  white-space: nowrap !important;
}
.battle-hub .city-tile .bm-btn .bm-desc {
  font-size: 0.72cqw !important;
  color: rgba(255,255,255,0.95) !important;
  text-shadow: none !important;
}
.battle-hub .city-tile .bm-btn .bm-reward {
  font-size: 0.62cqw !important;
  color: rgba(160,215,255,0.92) !important;
  text-shadow: none !important;
}

/* Battle hub row gap needs space for text below each button */
.battle-hub {
  gap: 3.5cqh 1cqw !important;  /* more vertical gap: room for text label */
  align-content: flex-start !important;
}

/* ── MOBILE adjustments ── */
@container game (max-width: 720px) {
  #screen-home .city-building  { max-height: 22cqh !important; }
  .battle-hub .city-building   { max-height: 18cqh !important; }
  .battle-hub .city-tile .bm-btn .bm-info { font-size: inherit !important; white-space: normal !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BATTLE HUB FINAL — Buildings clearly bigger than buttons
   ═══════════════════════════════════════════════════════════════════════════ */

/* Buildings: 30cqh — dominates the layout */
.battle-hub .city-building {
  max-height: 30cqh !important;
  max-width: 26cqw !important;
  width: auto !important;
  object-fit: contain !important;
  object-position: bottom center !important;
  display: block !important;
  margin-bottom: 0 !important;
}

/* Buttons: 17cqw → ~10cqh natural height — clearly smaller than 30cqh building */
.battle-hub .city-tile .bm-btn {
  width: 17cqw !important;
  height: auto !important;
  aspect-ratio: 866 / 288 !important;
  position: relative !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
}

/* city-tile wide enough for building + button centered */
.battle-hub .city-tile {
  flex: 0 0 28cqw !important;
  max-width: 28cqw !important;
  gap: 0 !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding-bottom: 3.2cqh !important;
}

/* Row gap: larger so text label has room below each button */
.battle-hub {
  gap: 4cqh 1cqw !important;
  align-items: flex-end !important;
  padding: 0.5cqh 1.5cqw 1cqh !important;
}

/* Mobile override */
@container game (max-width: 720px) {
  .battle-hub .city-building { max-height: 20cqh !important; }
  .battle-hub .city-tile .bm-btn { width: 42cqw !important; height: auto !important; }
  .battle-hub .city-tile { flex: 0 0 46cqw !important; }
}