/* ============================================================
   JUICE PASS — loaded after style.css, so rules here win ties and
   can safely extend/override existing selectors without touching
   the original stylesheet. Covers: the Pokemon/GW2-style card pack
   opening flow, reworked v3.7/v3.8 cosmetics (Meteor Shower, Void
   Sleeves, Cyber Neon, Abyss, Prism Core), a general
   tactile ripple/press pass on buttons, and the Daily Login Reward
   progression system. Storm theme is deliberately untouched.
   ============================================================ */

/* ---------- Card Pack Opening ---------- */
.packopen-overlay {
  position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(40,20,70,.75), rgba(3,4,8,.96));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: max(12px, env(safe-area-inset-top, 12px)) 10px max(16px, env(safe-area-inset-bottom, 16px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: packOverlayIn .25s ease;
}
@keyframes packOverlayIn { from { opacity: 0; } to { opacity: 1; } }
.packopen-stage {
  position: relative;
  width: min(96vw, 680px);
  max-height: 94dvh;
  margin: auto;
  text-align: center;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.packopen-pack {
  position: relative;
  width: min(160px, 46vw);
  height: min(226px, 64vw);
  margin: 0 auto;
  border-radius: 14px;
  cursor: pointer;
  background: linear-gradient(150deg, #3E7CB1 0%, #4C9A5B 33%, #C1443C 66%, #E08A2C 100%);
  box-shadow: 0 16px 44px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.18) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  animation: packFloat 2.4s ease-in-out infinite;
  transition: transform .2s ease;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.packopen-pack:hover { transform: scale(1.04) rotate(-1deg); }
.packopen-pack:active { transform: scale(0.96); }
@keyframes packFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
.packopen-pack-shine {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.55) 45%, transparent 60%);
  background-size: 220% 220%;
  animation: packShineSweep 2.6s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes packShineSweep { 0% { background-position: 130% 0%; } 100% { background-position: -30% 100%; } }
.packopen-pack-label {
  font-family: var(--font-display); font-weight: 800; color: #fff; font-size: clamp(0.85rem, 3.5vw, 1.05rem);
  text-shadow: 0 2px 6px rgba(0,0,0,.6); letter-spacing: .04em; position: relative; z-index: 1; line-height: 1.2;
}
.packopen-tap-hint {
  font-family: var(--font-display); font-size: .65rem; letter-spacing: .08em; color: rgba(255,255,255,.9);
  background: rgba(0,0,0,.4); padding: 4px 10px; border-radius: 20px; position: relative; z-index: 1;
  animation: packHintPulse 1.2s ease-in-out infinite;
}
@keyframes packHintPulse { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
.packopen-pack.tearing { animation: packTearShake .45s ease forwards; pointer-events: none; }
@keyframes packTearShake {
  0%   { transform: scale(1) rotate(0deg); }
  30%  { transform: scale(1.08) rotate(-4deg); }
  60%  { transform: scale(0.9) rotate(4deg); opacity: .7; }
  100% { transform: scale(0.2) rotate(0deg); opacity: 0; }
}
.packopen-shred {
  position: absolute; top: 50%; left: 50%; width: 10px; height: 14px; border-radius: 2px;
  background: linear-gradient(160deg, #E08A2C, #C1443C);
  transform-origin: center;
  animation: packShredFly .45s ease-out forwards;
  pointer-events: none;
}
@keyframes packShredFly {
  0%   { transform: translate(-50%, -50%) rotate(var(--a)) translateX(0) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--d)) scale(.25); opacity: 0; }
}

.packopen-cards {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
  max-width: 100%;
  perspective: 1000px;
  -webkit-perspective: 1000px;
}
.packopen-card {
  width: clamp(92px, 24vw, 116px);
  height: clamp(130px, 34vw, 162px);
  opacity: 0;
  transform: translateY(30px) scale(.75);
  transition: opacity .32s ease, transform .32s cubic-bezier(.22,1.5,.4,1);
  will-change: transform, opacity;
  box-sizing: border-box;
}
.packopen-cards.cards-many .packopen-card {
  width: clamp(80px, 22vw, 102px);
  height: clamp(114px, 30vw, 142px);
}
.packopen-cards.cards-huge .packopen-card {
  width: clamp(70px, 19vw, 88px);
  height: clamp(100px, 27vw, 124px);
}
.packopen-card.landed { opacity: 1; transform: translateY(0) scale(1); }
.packopen-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
  -webkit-transition: -webkit-transform .55s cubic-bezier(.22,1,.36,1);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.packopen-card.flipped .packopen-card-inner {
  transform: rotateY(180deg) translateZ(0);
  -webkit-transform: rotateY(180deg) translateZ(0);
}
.packopen-card-back, .packopen-card-front {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  box-sizing: border-box;
}
.packopen-card-back {
  background: linear-gradient(160deg, #2c313d, #14171d);
  font-size: clamp(1.4rem, 5vw, 2rem);
  color: rgba(255,255,255,.6);
  font-family: var(--font-display);
  font-weight: 800;
}
.packopen-card-front {
  transform: rotateY(180deg) translateZ(0);
  -webkit-transform: rotateY(180deg) translateZ(0);
  background: linear-gradient(160deg, #3a3f4d, #22252d);
  padding: 6px 4px;
  text-align: center;
  overflow: hidden;
}
.packopen-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.6rem, 2.2vw, 0.76rem);
  color: #fff;
  line-height: 1.15;
  word-break: break-word;
}
.packopen-card-sub {
  font-size: clamp(0.5rem, 1.8vw, 0.62rem);
  color: rgba(255,255,255,.8);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.packopen-card.tier1 .packopen-card-front { background: linear-gradient(160deg, var(--tier1), #2c5c85); }
.packopen-card.tier2 .packopen-card-front { background: linear-gradient(160deg, var(--tier2), #386f43); }
.packopen-card.tier3 .packopen-card-front { background: linear-gradient(160deg, var(--tier3), #8f302a); }
.packopen-card.tier4 .packopen-card-front { background: linear-gradient(160deg, var(--tier4), #a8631a); box-shadow: 0 0 24px rgba(224,138,44,.6), 0 8px 22px rgba(0,0,0,.45); }
.packopen-card.sc-spell .packopen-card-front { background: linear-gradient(160deg, #e6c34a, #8a6a12); }
.packopen-card.sc-chip .packopen-card-front { background: linear-gradient(160deg, #8a5fd9, #4a2c72); }
.packopen-burst {
  position: absolute; inset: -10px; border-radius: 14px; pointer-events: none;
  animation: packBurstRing .55s ease forwards;
}
@keyframes packBurstRing {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.9); opacity: 1; }
  100% { box-shadow: 0 0 0 22px rgba(255,255,255,0); opacity: 0; }
}
.packopen-continue {
  margin-top: 14px;
  min-height: 42px;
  padding: 10px 28px;
  font-size: 0.95rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  touch-action: manipulation;
  cursor: pointer;
  z-index: 10;
}
.packopen-continue.hidden { display: none !important; }

/* ---------- Bigger camera shake for the reworked Meteor Shower ---------- */
@keyframes screenShakeBig {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  15% { transform: translate(-11px, 6px) rotate(-0.6deg); }
  30% { transform: translate(9px, -8px) rotate(0.5deg); }
  45% { transform: translate(-9px, 7px) rotate(-0.5deg); }
  60% { transform: translate(8px, -5px) rotate(0.4deg); }
  75% { transform: translate(-6px, 4px) rotate(-0.3deg); }
  90% { transform: translate(4px, -3px) rotate(0.2deg); }
}
#screen-game.screen-shake-big { animation: screenShakeBig .5s ease; }

.meteor-unit {
  position: absolute; top: -14%; width: 4px; height: 1px;
  transform-origin: top center;
  animation: meteorUnitFall ease-in forwards;
  pointer-events: none;
}
@keyframes meteorUnitFall {
  0%   { transform: translate(0, -14vh) rotate(35deg) scale(var(--meteor-scale, 1)); opacity: 0; }
  6%   { opacity: 1; }
  100% { transform: translate(55vw, 108vh) rotate(35deg) scale(var(--meteor-scale, 1)); opacity: 1; }
}
.meteor-rock {
  position: absolute; top: 0; left: 50%; width: 15px; height: 15px;
  transform: translate(-50%, -60%) rotate(18deg);
  clip-path: polygon(50% 0%, 78% 12%, 100% 42%, 84% 82%, 54% 100%, 20% 90%, 0% 54%, 16% 14%);
  background: radial-gradient(circle at 35% 30%, #ffdca0, #a5622c 42%, #4a2712 76%, #1c0e07 100%);
  box-shadow: 0 0 10px 3px rgba(255,150,60,.85), 0 0 22px 8px rgba(255,90,20,.45);
  animation: meteorRockTumble 0.6s linear infinite;
}
@keyframes meteorRockTumble {
  0%   { transform: translate(-50%, -60%) rotate(18deg); }
  100% { transform: translate(-50%, -60%) rotate(378deg); }
}
.meteor-tail {
  position: absolute; top: 0; left: 50%; width: 5px; height: 130px;
  transform: translate(-50%, -100%);
  background: linear-gradient(to bottom, transparent, rgba(255,170,80,.4) 30%, rgba(255,207,138,.75) 65%, #fff8e0 96%);
  border-radius: 4px; filter: blur(0.3px);
}
.meteor-explosion {
  position: absolute; bottom: 4%; width: 0; height: 0; pointer-events: none;
}
.explosion-flash {
  position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fffef0, #ffcf7a 45%, rgba(255,140,40,.6) 72%, transparent 100%);
  animation: explosionFlash .55s ease forwards;
}
@keyframes explosionFlash {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  25%  { opacity: 1; transform: translate(-50%, -50%) scale(1.6); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
}
.explosion-shockwave {
  position: absolute; left: 0; top: 0; width: 6px; height: 6px; border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255,180,90,.85);
  animation: explosionShock .6s ease-out forwards;
}
@keyframes explosionShock {
  0%   { opacity: .9; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(11); }
}
.explosion-ember {
  position: absolute; left: 0; top: 0; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, #fff8e0, #ff9d3d 60%, transparent 100%);
  box-shadow: 0 0 6px 2px rgba(255,150,60,.8);
  animation: explosionEmberFly .65s ease-out forwards;
}
@keyframes explosionEmberFly {
  0%   { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--dist)) scale(.2); opacity: 0; }
}

/* ---------- Void Sleeves rework: an actual swirling void portal in the
   corner plus a pulsing void-energy glow, instead of a static outline. ---------- */
html.sleeve-void .card {
  outline: 2px solid #9b7cff;
  outline-offset: 2px;
  box-shadow: 0 0 10px rgba(155,124,255,.38), inset 0 0 26px rgba(60,10,90,.32);
  animation: voidCardPulse 3.2s ease-in-out infinite;
}
html.sleeve-void .card::after {
  content: '';
  position: absolute; top: -7px; right: -7px; width: 20px; height: 20px;
  border-radius: 50%; z-index: 5; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, #e4d9ff, #6d28d9 45%, #1a0630 78%, transparent 100%);
  box-shadow: 0 0 10px 3px rgba(155,124,255,.75), 0 0 22px 6px rgba(109,40,217,.45);
  animation: voidPortalSpin 4s linear infinite, voidPortalPulse 2s ease-in-out infinite;
}
@keyframes voidPortalSpin { to { transform: rotate(360deg); } }
@keyframes voidPortalPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@keyframes voidCardPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(155,124,255,.38), inset 0 0 24px rgba(60,10,90,.3); }
  50%      { box-shadow: 0 0 20px rgba(155,124,255,.7), inset 0 0 36px rgba(90,20,140,.55); }
}

/* ---------- Cyber Neon rework: a periodic full-screen scan beam and a
   subtle glitch flicker on cards. ---------- */
html.theme-cyberneon .card {
  animation: cyberCardFlicker 6.5s steps(1) infinite;
}
@keyframes cyberCardFlicker {
  0%, 96%, 100% { filter: none; }
  97% { filter: hue-rotate(25deg) saturate(1.6); transform: translateX(1px); }
  98% { filter: hue-rotate(-15deg) saturate(1.4); transform: translateX(-1px); }
  99% { filter: none; transform: translateX(0); }
}
html.theme-cyberneon body::after {
  content: '';
  position: fixed; left: 0; right: 0; height: 3px; top: -6%;
  background: linear-gradient(90deg, transparent, #38e0ff, #ff2ec4, transparent);
  opacity: 0; pointer-events: none; z-index: 3;
  box-shadow: 0 0 14px 2px rgba(56,224,255,.65);
  animation: cyberBeamSweep 6s linear infinite;
}
@keyframes cyberBeamSweep {
  0%   { top: -6%; opacity: 0; }
  4%   { opacity: .9; }
  48%  { top: 104%; opacity: .9; }
  53%  { opacity: 0; }
  100% { top: 104%; opacity: 0; }
}

/* ---------- Abyss rework: a sweeping anglerfish lure light and a stronger
   jellyfish pulse. ---------- */
html.theme-abyss #app::before {
  content: '';
  position: fixed; left: -8%; top: 8%; width: 30px; height: 30px; border-radius: 50%;
  z-index: 2; pointer-events: none;
  background: radial-gradient(circle, #eafffa, #22e6c8 40%, transparent 75%);
  box-shadow: 0 0 26px 11px rgba(34,230,200,.55);
  animation: abyssLureSweep 15s ease-in-out infinite;
}
@keyframes abyssLureSweep {
  0%   { left: -8%; top: 10%; opacity: .15; }
  50%  { left: 90%; top: 58%; opacity: 1; }
  100% { left: -8%; top: 10%; opacity: .15; }
}
html.theme-abyss .abyss-jelly {
  filter: drop-shadow(0 0 14px currentColor);
}
html.theme-abyss .abyss-jelly::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 20%, rgba(255,255,255,.14) 0 2px, transparent 2px 10px);
  animation: abyssJellyPulse 2.4s ease-in-out infinite;
}
@keyframes abyssJellyPulse { 0%,100% { opacity: .3; } 50% { opacity: .75; } }

/* ---------- Prism Core rework: diamond spectral flare burst on card hover ---------- */
html.theme-prism .card:hover::after,
html.theme-darkmatter .card:hover::after {
  content: '';
  position: absolute; inset: -14px; pointer-events: none; z-index: 6;
  background:
    radial-gradient(circle, rgba(0, 240, 255, 0.95) 0 3px, transparent 5px) 15% 20%,
    radial-gradient(circle, rgba(251, 191, 36, 0.95) 0 3px, transparent 5px) 85% 25%,
    radial-gradient(circle, rgba(244, 63, 94, 0.95) 0 3px, transparent 5px) 75% 75%,
    radial-gradient(circle, rgba(16, 185, 129, 0.95) 0 3px, transparent 5px) 25% 80%,
    radial-gradient(circle, rgba(139, 92, 246, 0.95) 0 3px, transparent 5px) 50% 10%;
  background-size: 20px 20px; background-repeat: no-repeat;
  animation: prismDiamondSparkleBurst .65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes prismDiamondSparkleBurst {
  0%   { opacity: 0; transform: scale(.6); filter: drop-shadow(0 0 6px #00f0ff); }
  45%  { opacity: 1; filter: drop-shadow(0 0 16px #38bdf8) drop-shadow(0 0 24px #fbbf24); }
  100% { opacity: 0; transform: scale(1.5); filter: drop-shadow(0 0 24px #f43f5e); }
}

/* ---------- General juice: livelier card hover + a tactile ripple on
   buttons across the whole app. ---------- */
/* BUGFIX: hovering a card lifts/scales it, but the boards that hold cards
   never explicitly declared `overflow: visible`. Increasing the hover lift
   made cards poke further outside their slot, and on some layouts they'd
   get visually clipped by the board's own box (or sit under a sibling
   slot) instead of floating cleanly above everything. Cards now always get
   overflow room from their board/slot ancestors and a high enough z-index
   to render above neighboring slots regardless of DOM order.
   ---------- */
.board, .slot, #opponent-board, #player-board {
  overflow: visible;
}
/* BUGFIX (still cut off): the fix above covers the boards, but the card
   ROW where you pick a card to place (#hand-row) - and the spells/chips
   row - use `overflow-x: auto` for their horizontal scroll strip. Per the
   CSS spec, setting only one axis to a non-visible value forces the OTHER
   axis to `auto` too (never `visible`), so the vertical hover lift was
   still getting clipped by the row's own scroll box. Extra top padding on
   these two rows gives the lift room without touching the horizontal
   scrolling behavior at all. */
#hand-row, #spells-chips-row {
  padding: 14px 2px 8px;
}
.card:hover { transform: translateY(-4px) scale(1.06) rotate(-1deg); z-index: 30; }

.juice-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
  transform: scale(0); animation: juiceRippleExpand .6s ease-out forwards; z-index: 50;
}
@keyframes juiceRippleExpand { to { transform: scale(1); opacity: 0; } }

/* ---------- Daily Login Reward panel ---------- */
.dailylogin-panel {
  max-width: 480px;
  width: min(95vw, 480px);
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding: 22px 16px;
}
.dailylogin-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 16px 0; }
@media (max-width: 520px) {
  .dailylogin-strip {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: 12px 0;
  }
  .dailylogin-day:nth-child(7) {
    grid-column: span 2;
  }
}
.dailylogin-day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 4px; border-radius: 10px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  font-family: var(--font-display);
  box-sizing: border-box;
  min-height: 60px;
}
.dailylogin-day-label { font-size: .62rem; color: var(--muted); font-weight: 700; }
.dailylogin-day-icon { font-size: 1.15rem; line-height: 1; }
.dailylogin-day-amt { font-size: .68rem; font-weight: 800; color: var(--accent); }
.dailylogin-day.done { border-color: var(--tier2); opacity: .82; }
.dailylogin-day.today {
  border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
  animation: dailyLoginPulse 1.4s ease-in-out infinite;
}
.dailylogin-day.bonus { border-style: dashed; }
@keyframes dailyLoginPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.dailylogin-streak-note { font-size: .8rem; color: var(--muted); margin-bottom: 14px; text-align: center; }
.dailylogin-claim-btn { min-height: 44px; width: 100%; padding: 10px 16px; }
.dailylogin-claim-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Shop: redeem-a-code row ---------- */
.shop-code-row { display: flex; gap: 8px; flex-wrap: wrap; }
#shop-code-input {
  flex: 1; min-width: 180px; background: #0d1220; color: #eef1f8;
  border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
  padding: 10px 14px; font-family: var(--font-body); font-size: .9rem;
}
#shop-code-input:focus { outline: none; border-color: #6f9cff; }
#shop-code-redeem-btn { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .packopen-pack, .packopen-pack-shine, .packopen-tap-hint,
  html.sleeve-void .card, html.sleeve-void .card::after,
  html.theme-cyberneon .card, html.theme-cyberneon body::after,
  html.theme-abyss #app::before, html.theme-abyss .abyss-jelly::after,
  html.theme-magma #theme-magma-bg div,
  html.theme-flame #theme-flame-bg div,
  .meteor-unit, .meteor-rock,
  .dailylogin-day.today {
    animation: none !important;
  }
}

/* ============================================================
   SECRET THEME: Valentine - unlocked only via the "2ndYear" code.
   The theme button and its background layer don't even exist in the
   DOM until unlocked (see js/juice.js), so it's a genuine surprise.
   ============================================================ */
html.theme-valentine {
  --bg: #24070f;
  --bg2: #33101c;
  --panel: #3c1422;
  --line: #6e2740;
  --text: #ffeaf1;
  --muted: #e6a9bf;
  --tier1: #ff8fb3;
  --tier2: #ff5f8f;
  --tier3: #d81159;
  --tier4: #ffb347;
  --accent: #ff4f7b;
  --bg-grad-1: #4a1226;
  --bg-grad-2: #180509;
}
#theme-valentine-bg { display: none; }
html.theme-valentine #theme-valentine-bg {
  display: block; position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
}
html.theme-valentine #theme-valentine-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 10%, rgba(255,79,123,.28), transparent 60%);
  animation: valentineGlow 4.5s ease-in-out infinite;
}
@keyframes valentineGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.valentine-heart {
  position: absolute; bottom: -8vh; opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255,95,143,.7));
  animation: valentineHeartRise linear infinite;
}
@keyframes valentineHeartRise {
  0%   { transform: translateY(0) rotate(-8deg) scale(.85); opacity: 0; }
  10%  { opacity: .95; }
  90%  { opacity: .8; }
  100% { transform: translateY(-108vh) rotate(10deg) scale(1.1); opacity: 0; }
}
.valentine-cupid-glow {
  position: absolute; left: 50%; top: 16%; width: 60vw; height: 40vh; transform: translateX(-50%);
  border-radius: 50%; filter: blur(50px);
  background: radial-gradient(ellipse, rgba(255,140,170,.28), transparent 70%);
  animation: valentinePulse 3.2s ease-in-out infinite;
}
@keyframes valentinePulse { 0%, 100% { opacity: .5; transform: translateX(-50%) scale(1); } 50% { opacity: .95; transform: translateX(-50%) scale(1.08); } }
.valentine-arrow {
  position: absolute; left: -12%; width: 30vw; height: 2px;
  background: linear-gradient(to right, transparent, #ffd1e0, #fff);
  filter: drop-shadow(0 0 6px rgba(255,209,224,.9));
  opacity: 0;
  animation: valentineArrowFly 7s ease-in infinite;
}
.valentine-arrow::after {
  content: '➤'; position: absolute; right: -4px; top: -8px; font-size: 14px; color: #fff;
  text-shadow: 0 0 8px rgba(255,209,224,.9);
}
@keyframes valentineArrowFly {
  0%, 55% { opacity: 0; transform: translateX(0); }
  60%     { opacity: 1; }
  92%     { opacity: 1; transform: translateX(140vw); }
  100%    { opacity: 0; transform: translateX(150vw); }
}
/* A small heart-burst on card hover - the theme's own bit of card-level
   juice, on top of the ambient background. */
html.theme-valentine .card:hover::before {
  content: '💕';
  position: absolute; top: -12px; right: -8px; font-size: 15px;
  pointer-events: none; z-index: 6;
  animation: valentineCardPop .55s ease forwards;
}
@keyframes valentineCardPop {
  0%   { opacity: 0; transform: scale(.3) rotate(-18deg); }
  45%  { opacity: 1; transform: scale(1.35) rotate(10deg); }
  100% { opacity: 0; transform: scale(1) translateY(-10px) rotate(0deg); }
}
html.theme-valentine .brand-mark {
  animation: valentineHeartbeat 1.3s ease-in-out infinite;
  display: inline-block;
}
@keyframes valentineHeartbeat {
  0%, 100% { transform: scale(1); }
  20%      { transform: scale(1.28); }
  40%      { transform: scale(1); }
  60%      { transform: scale(1.18); }
  80%      { transform: scale(1); }
}
.valentine-theme-btn:not(.locked) { border-color: #ff4f7b; }
.valentine-theme-btn:not(.locked).active { box-shadow: 0 0 0 2px rgba(255,79,123,.35), 0 0 14px rgba(255,79,123,.5); }

/* ---------- Trial Tower Full-Page Citadel Experience ---------- */
#screen-trial-tower {
  padding: 18px 12px 36px;
  max-width: 1060px;
  margin: 0 auto;
  min-height: calc(100vh - 70px);
}

.tower-page-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.tower-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.tower-page-title-wrap {
  text-align: center;
  flex: 1 1 240px;
}

.tower-page-kicker {
  display: block;
  font: 800 0.65rem var(--font-display);
  letter-spacing: 0.12em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.tower-page-heading {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--fg);
  text-shadow: 0 0 16px rgba(62, 124, 177, 0.4);
}

.tower-page-stats-chips {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tower-stat-chip {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(18, 24, 36, 0.76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px 14px 4px 14px;
  padding: 8px 16px;
  text-align: center;
  min-width: 95px;
  box-shadow: none !important;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.tower-stat-chip.highlight {
  border-color: rgba(168, 85, 247, 0.7) !important;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25) 0%, rgba(147, 51, 234, 0.08) 100%), rgba(18, 24, 36, 0.86) !important;
  box-shadow: none !important;
}

.tower-stat-chip .tsc-label {
  display: block;
  font: 800 0.58rem var(--font-display);
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.06em;
}

.tower-stat-chip .tsc-val {
  display: block;
  font: 900 1.1rem var(--font-display);
  color: #ffffff;
}

.tower-stat-chip.highlight .tsc-val {
  color: #c084fc;
}

/* Tower Layout Grid */
.tower-page-layout {
  display: grid;
  grid-template-columns: minmax(320px, 440px) minmax(300px, 1fr);
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 780px) {
  .tower-page-layout {
    grid-template-columns: 1fr;
  }
}

/* Visual Citadel Column (3D Liquid Glass) */
.tower-citadel-wrapper {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(18, 24, 36, 0.78) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 6px 26px 6px 26px !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: none !important;
  position: relative;
  min-height: 540px;
}

.tower-citadel-wrapper::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 50% 10%, rgba(168, 85, 247, 0.18), transparent 60%);
  pointer-events: none;
}

.tower-spire-cap {
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.32) 0%, rgba(18, 24, 36, 0.85) 100%) !important;
  border-bottom: 1.5px solid rgba(168, 85, 247, 0.45) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 14px 12px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.spire-crystal-orb {
  font-size: 1.4rem;
  color: #c084fc;
  text-shadow: 0 0 14px #a855f7, 0 0 28px #9333ea;
  animation: spirePulse 2.4s ease-in-out infinite alternate;
  display: inline-block;
}

@keyframes spirePulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  100% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 8px #e879f9); }
}

.spire-title {
  font: 900 0.78rem var(--font-display);
  letter-spacing: 0.08em;
  color: #e9d5ff;
  margin-top: 2px;
}

.spire-sub {
  font-size: 0.65rem;
  color: #a855f7;
  font-weight: 700;
}

.tower-citadel-viewport {
  flex: 1 1 auto;
  max-height: 440px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 14px;
  scroll-behavior: smooth;
  position: relative;
}

.tower-citadel-viewport::-webkit-scrollbar {
  width: 6px;
}
.tower-citadel-viewport::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.tower-citadel-scroller {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 8px;
  min-height: 100%;
  justify-content: flex-end;
}

/* Tower Chamber Brick (3D Liquid Glass with Jagged Asymmetry) */
.tower-brick {
  border-radius: 4px 14px 4px 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brick-color, var(--accent)) 65%, transparent), rgba(18, 24, 36, 0.76));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  box-shadow: none !important;
  position: relative;
  font-family: var(--font-display);
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease, border-color 0.18s ease;
  user-select: none;
}

.tower-brick:hover {
  transform: translateY(-2px) scale(1.015);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: none !important;
  filter: brightness(1.15);
}

.tower-brick.cleared {
  opacity: 0.8;
  filter: saturate(0.85);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none !important;
}

.tower-brick.cleared:hover {
  opacity: 1;
  filter: saturate(1);
}

.tower-brick.current {
  opacity: 1;
  border: 2px solid #ffffff !important;
  outline: 2px solid var(--brick-color, var(--accent));
  box-shadow: none !important;
  animation: towerCurrentPulse 1.8s ease-in-out infinite;
  z-index: 5;
}

.tower-brick.locked-preview {
  opacity: 0.45;
  border: 1.5px dashed rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px 14px 4px 14px;
  box-shadow: none !important;
  cursor: default;
}

.tower-brick-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tower-brick-num {
  font-weight: 900;
  font-size: 0.92rem;
  color: #ffffff;
  letter-spacing: 0.02em;
}

.tower-brick-diff {
  font-size: 0.62rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.95);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 7px;
  border-radius: 3px 8px 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.tower-brick-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tower-brick-bounty {
  font-size: 0.72rem;
  font-weight: 800;
  color: #fde047;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.tower-brick-check {
  color: #4ade80;
  font-weight: 900;
  font-size: 1.1rem;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.8);
}

.tower-brick-check.pop {
  animation: towerCheckPop 0.45s cubic-bezier(0.34, 1.8, 0.64, 1);
}

.tower-brick-flag {
  font-size: 1rem;
  animation: towerFlagWave 1.2s ease-in-out infinite;
  display: inline-block;
  filter: drop-shadow(0 0 6px #facc15);
}

.tower-brick.new-brick {
  animation: towerBrickDropIn 0.55s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.tower-brick.exploding {
  animation: towerBrickExplode 0.65s ease-in forwards;
  pointer-events: none;
}

.tower-command-console {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}

.tower-mission-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(18, 24, 36, 0.8) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 6px 26px 6px 26px !important;
  padding: 24px;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tmc-badge-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.tmc-diff-badge {
  font: 800 0.68rem var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 3px 10px 3px 10px;
  background: var(--accent);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: none !important;
}

.tmc-floor-title {
  margin: 0;
  font: 900 1.6rem var(--font-display);
  color: #ffffff;
}

.tmc-desc {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.5;
}

.tmc-rewards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 4px;
}

.tmc-reward-item {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px 14px 4px 14px;
  padding: 12px 10px;
  text-align: center;
  box-shadow: none !important;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.tmc-reward-item:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.4);
}

.tmc-reward-item .tri-icon {
  display: block;
  font-size: 1.3rem;
  margin-bottom: 2px;
}

.tmc-reward-item .tri-val {
  display: block;
  font: 900 1.05rem var(--font-display);
  color: #ffffff;
}

.tmc-reward-item .tri-label {
  display: block;
  font: 800 0.62rem var(--font-display);
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.05em;
  margin-top: 3px;
}

.tower-start-btn {
  width: 100%;
  padding: 15px;
  font: 900 1.08rem var(--font-display);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  border-radius: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: none !important;
  background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%) !important;
  margin-top: 6px;
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease, border-color 0.2s ease;
}
.tower-start-btn:hover {
  transform: scale(1.02);
  filter: brightness(1.15);
  border-color: #ffffff;
  box-shadow: none !important;
}
.tower-start-btn:active {
  transform: scale(0.98);
}

.tower-citadel-wrapper.tower-shake {
  animation: screenShakeBig 0.52s ease;
}

@keyframes towerCurrentPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes towerFlagWave {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(10deg); }
}

@keyframes towerBrickDropIn {
  0% { transform: translateY(-40px) scale(0.7); opacity: 0; }
  60% { transform: translateY(4px) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}

@keyframes towerBrickExplode {
  0% { transform: rotate(0deg) translateX(0) rotate(0deg); opacity: 1; filter: brightness(1.6); }
  15% { filter: brightness(2.3) saturate(0.4); }
  100% { transform: rotate(var(--angle, 0deg)) translateX(var(--dist, 100px)) rotate(320deg); opacity: 0; filter: brightness(2) saturate(0.3); }
}

@keyframes towerCheckPop {
  0% { transform: scale(0) rotate(-40deg); opacity: 0; }
  70% { transform: scale(1.3) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

/* ---------- Profile HUD (top-left avatar) & Bux HUD (top-right) + Stats 2.0 panel ---------- */
#top-left-hud {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 500;
  display: flex;
  align-items: center;
  background: rgba(10, 15, 30, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  padding: 3px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.05);
}
#top-left-hud.hidden { display: none !important; }
@media (max-width: 480px) { #top-left-hud { top: 8px; left: 8px; } }

#top-right-hud {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 15, 30, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  padding: 3px 5px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.05);
}
#top-right-hud.hidden { display: none !important; }
#top-right-hud #bux-counter { position: static !important; top: auto !important; right: auto !important; }
@media (max-width: 480px) { #top-right-hud { top: 8px; right: 8px; gap: 6px; } }

#profile-avatar-btn {
  position: relative;
  width: 38px;
  height: 38px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font: 900 1rem/1 var(--font-display);
  color: #ffffff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.38), 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform .18s ease, box-shadow .18s ease;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}
#profile-avatar-btn:hover { transform: translateY(-2px) scale(1.07); box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.85), 0 8px 22px rgba(0,0,0,.45); }
#profile-avatar-btn:active { transform: translateY(0) scale(.93); }
@media (max-width: 480px) { #profile-avatar-btn { width: 32px; height: 32px; font-size: .85rem; } }

.profile-exclaim {
  position: absolute; top: -3px; right: -3px; width: 16px; height: 16px; border-radius: 50%;
  background: #ff4757; color: #fff; font: 900 11px/16px var(--font-display); text-align: center;
  box-shadow: 0 0 8px rgba(255,60,60,.9); animation: profileExclaimPulse 1.3s ease-in-out infinite;
}
.profile-exclaim.hidden { display: none; }
@keyframes profileExclaimPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.28); } }

.profile-panel {
  width: min(660px, 100%); max-height: 88vh; overflow-y: auto; padding: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%), rgba(18, 24, 36, 0.88) !important;
  backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 6px 26px 6px 26px !important;
  box-shadow: none !important; position: relative;
}
.profile-panel .feature-close { top: 14px; right: 14px; z-index: 3; }
.profile-hero {
  padding: 32px 28px 24px; position: relative; overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 62%),
    radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(18, 24, 36, 0.75);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.18);
}
.profile-hero::before {
  content: ''; position: absolute; inset: -20%; z-index: 0; opacity: .35; pointer-events: none;
  background: repeating-linear-gradient(35deg, rgba(255,255,255,.05) 0 3px, transparent 3px 32px);
}
.profile-hero-row { display: flex; align-items: center; gap: 18px; position: relative; z-index: 1; }
.profile-hero-avatar {
  width: 74px;
  height: 74px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 1.85rem/1 var(--font-display);
  color: #ffffff;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: none !important;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease;
  position: relative;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}
.profile-hero-avatar:hover {
  transform: scale(1.06);
  border-color: #ffffff;
  box-shadow: none !important;
}
.profile-hero-avatar:focus-visible {
  outline: none;
  border-color: #38bdf8;
}
.profile-hero-avatar::after {
  content: '🎨';
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 0.95rem;
  background: rgba(18, 24, 36, 0.85);
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  box-shadow: none !important;
}

/* ---------- Profile Gradient Picker ---------- */
.profile-gradient-picker-card {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(18, 24, 36, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px 16px 4px 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: pickerSlideDown 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: none !important;
}
.profile-gradient-picker-card.hidden { display: none !important; }
@keyframes pickerSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.picker-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.picker-title {
  font: 800 0.85rem var(--font-display);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.picker-presets-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 6px;
}
.picker-presets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 8px;
}
.picker-preset-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.22);
  cursor: pointer !important;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  padding: 0;
  outline: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.picker-preset-dot:hover {
  transform: scale(1.18);
  border-color: #fff;
  box-shadow: 0 0 14px rgba(255,255,255,0.45);
}
.picker-preset-dot.active {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.5), 0 4px 12px rgba(0,0,0,0.3);
  transform: scale(1.14);
}
.picker-preset-dot.auto-default::after {
  content: '↺';
  font-size: 0.85rem;
  color: #fff;
  font-weight: 900;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.picker-controls-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.picker-color-group {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  flex: 1;
  min-width: 120px;
}
.picker-color-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  font-family: var(--font-display);
}
.picker-color-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 7px;
  cursor: pointer !important;
  background: none;
  padding: 0;
}
.picker-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.picker-color-input::-webkit-color-swatch { border: 1px solid rgba(255,255,255,0.35); border-radius: 7px; }
.picker-color-hex {
  font-family: monospace;
  font-size: 0.74rem;
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.picker-angle-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1.3;
  min-width: 160px;
  background: var(--bg);
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.picker-angle-slider {
  flex: 1;
  accent-color: var(--accent);
  cursor: pointer;
}
.picker-angle-val {
  font-family: monospace;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text);
  min-width: 36px;
  text-align: right;
}
.picker-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.picker-actions-row .primary-btn,
.picker-actions-row .secondary-btn,
.picker-actions-row .link-btn {
  font-size: 0.74rem;
  padding: 6px 11px;
}
.profile-hero-name {
  font: 900 1.4rem var(--font-display); color: var(--text);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.profile-hero-name #btn-profile-rename, .profile-hero-name .link-btn { font-size: .68rem; padding: 2px; }

.profile-name-edit-box {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
}
.profile-inline-input {
  background: var(--bg2);
  border: 1px solid var(--accent);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 5px 10px;
  border-radius: 8px;
  outline: none;
  min-width: 130px;
  max-width: 190px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 35%, transparent);
}
.profile-inline-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}
.profile-name-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.profile-name-btn {
  padding: 5px 9px;
  font-size: 0.72rem;
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer !important;
}
.profile-hero-sub { margin-top: 6px; }
.profile-level-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 4px 14px 4px 14px;
  background: rgba(56, 189, 248, 0.16); border: 1.5px solid rgba(56, 189, 248, 0.45);
  font: 800 .72rem var(--font-display); color: #7dd3fc;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: none !important;
}
.profile-xp-track {
  position: relative; z-index: 1; margin-top: 16px; height: 9px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden;
}
.profile-xp-fill {
  height: 100%; border-radius: inherit; transition: width .4s ease;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
}
.profile-xp-label {
  position: relative; z-index: 1; display: flex; justify-content: space-between;
  font: 800 .68rem var(--font-display); color: rgba(255, 255, 255, 0.7); margin-top: 6px;
}

.profile-body { padding: 22px 26px 30px; }

/* Profile Tabs */
.profile-tab-btn {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 4px 14px 4px 14px !important;
  box-shadow: none !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease !important;
}
.profile-tab-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.4) !important;
}
.profile-tab-btn.active {
  background: rgba(56, 189, 248, 0.22) !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
  color: #38bdf8 !important;
}

.profile-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin-bottom: 22px; }
.profile-stat-pill {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(18, 24, 36, 0.76);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px 14px 4px 14px; padding: 12px 8px; text-align: center;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: none !important;
}
.profile-stat-pill b { display: block; font: 900 1.15rem var(--font-display); color: #ffffff; }
.profile-stat-pill span { display: block; margin-top: 3px; font: 800 .55rem var(--font-display); letter-spacing: .05em; color: var(--muted); text-transform: uppercase; }

.profile-section-heading {
  font: 800 .72rem var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  color: #ffffff; margin: 20px 0 10px;
}
.profile-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 8px; }
.profile-prog-card {
  border-radius: 4px 16px 4px 16px; padding: 14px 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.22); position: relative; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--card-color, var(--accent)) 22%, transparent) 0%, rgba(18, 24, 36, 0.8) 100%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: none !important;
  transition: transform .18s ease, border-color .18s ease;
}
.profile-prog-card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.5); box-shadow: none !important; }
.profile-prog-card .ppc-icon { font-size: 1.4rem; }
.profile-prog-card .ppc-title { font: 800 .78rem var(--font-display); color: #ffffff; margin: 6px 0 3px; }
.profile-prog-card .ppc-value { font: 900 1.05rem var(--font-display); color: var(--card-color, var(--accent)); }
.profile-prog-card .ppc-desc { font-size: .68rem; color: rgba(255, 255, 255, 0.7); margin-top: 3px; }
.profile-prog-card .ppc-bar { margin-top: 8px; height: 6px; border-radius: 999px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,0.12); overflow: hidden; }
.profile-prog-card .ppc-bar-fill { height: 100%; border-radius: inherit; background: var(--card-color, var(--accent)); }

/* Emotes & Reactions Popover */
.ready-text-full { display: inline; }
.ready-text-mobile { display: none; }

.emote-picker-wrapper {
  position: relative;
  display: inline-block;
}
.emote-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.emote-toggle-btn.cooldown-active {
  opacity: 0.6;
  filter: grayscale(0.5);
  cursor: not-allowed !important;
  border-color: rgba(255,255,255,0.1) !important;
  pointer-events: none;
}
.emotes-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  background: rgba(18, 22, 34, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 8px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  z-index: 120;
}
.emotes-popover.hidden {
  display: none !important;
}
@media (hover: hover) and (pointer: fine) {
  .emote-picker-wrapper:hover .emotes-popover {
    display: flex !important;
  }
}

.emotes-emoji-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.quick-chat-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 4px 0;
}
.quick-chat-column {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.quick-chat-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: left;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}
.quick-chat-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.quick-chat-btn:active {
  transform: scale(0.98);
}

.emote-btn {
  background: transparent;
  border: none;
  font-size: 1.05rem;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 12px;
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.12s ease;
  line-height: 1;
}
.emote-btn:hover {
  transform: scale(1.3) translateY(-2px);
  background: rgba(255, 255, 255, 0.15);
}
.emote-btn:active {
  transform: scale(0.9);
}

.emote-bubble {
  position: absolute;
  z-index: 100;
  background: rgba(18, 22, 32, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  padding: 6px 14px;
  font-size: 1.3rem;
  line-height: 1;
  pointer-events: none;
  animation: emoteBubbleFloat 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes emoteBubbleFloat {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.5) rotate(-6deg);
  }
  20% {
    opacity: 1;
    transform: translateY(-8px) scale(1.12) rotate(2deg);
  }
  35% {
    transform: translateY(-4px) scale(1) rotate(0deg);
  }
  75% {
    opacity: 1;
    transform: translateY(-12px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-28px) scale(0.85);
  }
}

/* Avatar Emote Overlay Styles */
.avatar-emote-bubble {
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(15, 23, 42, 0.98) 0%, rgba(9, 15, 29, 0.99) 100%);
  border: 2px solid var(--accent, #facc15);
  color: #ffffff;
  border-radius: 12px;
  padding: 5px 9px;
  font-size: 1.2rem;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  z-index: 200;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 10px rgba(250, 204, 21, 0.3);
  animation: avatarEmotePop 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.avatar-emote-bubble::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: inherit;
  border-right: 2px solid var(--accent, #facc15);
  border-bottom: 2px solid var(--accent, #facc15);
}

@keyframes avatarEmotePop {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0) translateY(15px);
  }
  12% {
    opacity: 1;
    transform: translateX(-50%) scale(1.15) translateY(-4px);
  }
  20% {
    transform: translateX(-50%) scale(0.98) translateY(1px);
  }
  25% {
    transform: translateX(-50%) scale(1) translateY(0);
  }
  75% {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.8) translateY(-20px);
  }
}

@keyframes avatarEmotePopUnder {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0) translateY(-15px);
  }
  12% {
    opacity: 1;
    transform: translateX(-50%) scale(1.15) translateY(4px);
  }
  20% {
    transform: translateX(-50%) scale(0.98) translateY(-1px);
  }
  25% {
    transform: translateX(-50%) scale(1) translateY(0);
  }
  75% {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.8) translateY(20px);
  }
}

@media (max-width: 768px) {
  .avatar-emote-bubble {
    bottom: auto !important;
    top: 125% !important;
    animation: avatarEmotePopUnder 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
  }
  .avatar-emote-bubble::after {
    bottom: auto !important;
    top: -6px !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: 2px solid var(--accent, #facc15) !important;
    border-top: 2px solid var(--accent, #facc15) !important;
  }
}

.avatar-pulse-active {
  animation: avatarHeartbeat 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 2;
}

@keyframes avatarHeartbeat {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(250, 204, 21, 0);
  }
  50% {
    transform: scale(1.22);
    box-shadow: 0 0 15px rgba(250, 204, 21, 0.8), inset 0 0 8px rgba(255, 255, 255, 0.4);
    border-color: #facc15 !important;
  }
}

.emote-sent-pulse {
  animation: emotePickerRipple 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes emotePickerRipple {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  30% {
    transform: scale(1.15);
    filter: brightness(1.2);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

.cooldown-active {
  pointer-events: none !important;
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  filter: grayscale(40%) !important;
  transition: opacity 0.2s ease, filter 0.2s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-valentine #theme-valentine-bg::before, .valentine-heart, .valentine-cupid-glow,
  .valentine-arrow, html.theme-valentine .brand-mark {
    animation: none !important;
  }
}

/* ============================================================
   MOBILE BATTLE UI OVERHAUL (max-width: 768px)
   Re-architected for touch devices: native bottom controls,
   compact top bar, responsive board slots, and hidden hotkey reminders.
   ============================================================ */
@media (max-width: 768px) {
  /* Hide keyboard hotkey reminders and Log button on mobile touch screens */
  .hotkey-hint,
  #btn-log-toggle {
    display: none !important;
  }

  .ready-text-full {
    display: none !important;
  }
  .ready-text-mobile {
    display: inline-block !important;
    font-weight: 800;
    font-size: 0.95rem;
  }

  /* Battle Screen Layout - ensure hidden class completely hides screen */
  #screen-game.hidden {
    display: none !important;
  }
  #screen-game:not(.hidden) {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 6px 6px 10px;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Mobile Top Bar */
  #phase-bar {
    background: rgba(18, 22, 34, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 7px 10px;
    margin-bottom: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  }
  #phase-label {
    font-size: 0.92rem;
    font-weight: 700;
  }
  #round-label {
    font-size: 0.74rem;
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 8px;
    border-radius: 10px;
  }
  #ready-indicators {
    gap: 4px;
  }
  .ready-badge {
    font-size: 0.68rem;
    padding: 2px 7px;
  }
  #btn-ready {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    font-size: 0.88rem !important;
    padding: 6px 14px !important;
    min-height: 36px !important;
    min-width: 72px !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    box-shadow: 0 3px 12px rgba(224, 138, 44, 0.4) !important;
  }
  #btn-options {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  /* Power & Enemy Status Bars */
  #power-bar-label {
    font-size: 0.7rem;
    padding: 0 4px 2px;
    font-weight: 600;
  }
  #power-bar {
    height: 9px;
    border-radius: 8px;
    margin: 0 2px 6px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
  }
  #enemy-count-label {
    font-size: 0.72rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 3px 10px;
    margin: 2px auto 6px;
    width: fit-content;
  }

  /* Board & Cards Layout */
  .board {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 3px 0 !important;
    min-height: 86px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .slot {
    min-height: 86px !important;
    min-width: 0 !important;
    border-radius: 8px !important;
  }
  .board .card {
    min-width: 0 !important;
    border-radius: 8px !important;
    padding: 3px 2px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }
  .board .card-name {
    font-size: 0.55rem !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    margin-bottom: 2px !important;
  }
  .board .card-ability {
    display: none !important;
  }
  .board .card-stats {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 2px !important;
    margin-top: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .board .card-stats .hp,
  .board .card-stats .dmg,
  .board .card-stats .sp {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 1.5px 2px !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    border-radius: 4px !important;
    gap: 2px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
    box-sizing: border-box !important;
  }

  /* Mobile Mode & Action Dock */
  #mode-bar {
    background: rgba(18, 22, 34, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 6px 8px;
    margin: 4px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #mode-bar::-webkit-scrollbar {
    display: none;
  }
  .mode-btn {
    padding: 6px 11px;
    font-size: 0.78rem;
    border-radius: 12px;
    min-height: 36px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  #btn-confirm-merge, #btn-undo-placement {
    padding: 6px 12px;
    font-size: 0.78rem;
    border-radius: 12px;
    min-height: 36px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .emotes-bar {
    margin-left: 0;
    padding: 2px 4px;
    gap: 2px;
    flex-shrink: 0;
  }
  .emote-btn {
    padding: 4px 5px;
    font-size: 1rem;
    min-width: 30px;
    min-height: 30px;
  }

  /* Hand Card Row */
  #hand-label {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 4px 4px 2px;
  }
  #hand-row {
    gap: 6px;
    padding: 6px 2px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #hand-row::-webkit-scrollbar {
    display: none;
  }
  #hand-row .card {
    flex: 0 0 70px;
    height: 96px;
    border-radius: 9px;
    scroll-snap-align: start;
  }

  /* Spells & Chips Row */
  #spells-chips-row {
    gap: 6px;
    padding: 4px 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #spells-chips-row::-webkit-scrollbar {
    display: none;
  }
  #spells-chips-row .sc-card {
    flex: 0 0 66px;
    height: 90px;
    border-radius: 8px;
  }

  /* Forced Merge & Merge Preview on Mobile */
  #forced-merge-banner {
    font-size: 0.74rem;
    padding: 8px 12px;
    border-radius: 12px;
    margin: 4px 0;
  }
  #merge-preview {
    font-size: 0.74rem;
    padding: 6px 10px;
    border-radius: 12px;
  }
}

/* ===== SMOOTH PHASE TRANSITION ANIMATIONS ===== */
#opponent-board, #player-board {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 12px;
}

#hand-row, #spells-chips-row, #hand-label {
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#phase-label {
  transition: color 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.4s ease;
  display: inline-block;
}

/* --- Placement Phase Styles --- */
.phase-placement #opponent-board {
  transform: scale(0.98);
  opacity: 0.9;
}

.phase-placement #player-board {
  transform: scale(1.0);
  background: rgba(255, 255, 255, 0.01);
  box-shadow: 0 0 20px rgba(250, 204, 21, 0.05), inset 0 0 10px rgba(250, 204, 21, 0.02);
}

.phase-placement #phase-label {
  color: var(--accent);
  text-shadow: 0 0 8px rgba(250, 204, 21, 0.3);
}

/* --- Attack Phase Styles --- */
.phase-attack #opponent-board {
  transform: scale(1.01);
  background: rgba(239, 68, 68, 0.02);
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.12), inset 0 0 12px rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.3);
}

.phase-attack #player-board {
  transform: scale(1.01);
  background: rgba(59, 130, 246, 0.02);
  box-shadow: 0 0 24px rgba(59, 130, 246, 0.12), inset 0 0 12px rgba(59, 130, 246, 0.05);
  border-color: rgba(59, 130, 246, 0.3);
}

.phase-attack #hand-row, 
.phase-attack #spells-chips-row, 
.phase-attack #hand-label {
  opacity: 0.35;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  filter: grayscale(0.2);
}

.phase-attack #phase-label {
  color: #ff5c5c;
  text-shadow: 0 0 12px rgba(255, 92, 92, 0.5);
  transform: scale(1.06);
}

/* ===== SINGLE CARD REVEAL 3D FLIP & PARTICLE EXPLOSION ===== */
.single-reveal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 12, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  animation: revealFadeIn 0.3s ease forwards;
}

@keyframes revealFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.single-reveal-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  position: relative;
  perspective: 1200px;
}

.single-reveal-card-container {
  width: 220px;
  height: 308px;
  cursor: pointer;
}

.single-reveal-card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.single-reveal-card:hover {
  transform: translateY(-8px) scale(1.03);
}

.single-reveal-card.flipped {
  transform: rotateY(180deg) scale(1.06);
}

.single-reveal-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
}

.single-reveal-back, .single-reveal-front {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 16px 40px rgba(0,0,0,0.7);
  padding: 18px;
  text-align: center;
}

.single-reveal-back {
  background: radial-gradient(circle at center, #1b233a 0%, #090c15 100%);
  border-color: rgba(251, 191, 36, 0.4);
  box-shadow: 0 0 25px rgba(251, 191, 36, 0.15), inset 0 0 40px rgba(0,0,0,0.85);
}

.single-reveal-back::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 12px;
  pointer-events: none;
}

.single-reveal-back-brand {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
  margin: 10px 0;
  white-space: nowrap;
  text-transform: uppercase;
  animation: revealBackPulse 2.0s ease-in-out infinite;
}

.single-reveal-back-deco-lines-top, .single-reveal-back-deco-lines-bottom {
  width: 110px;
  height: 3px;
  border-top: 1px solid rgba(251, 191, 36, 0.45);
  border-bottom: 1px solid rgba(251, 191, 36, 0.2);
  margin: 12px 0;
  opacity: 0.9;
}

@keyframes revealBackPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); text-shadow: 0 0 8px rgba(251, 191, 36, 0.4); }
  50% { transform: scale(1.04); filter: brightness(1.2); text-shadow: 0 0 14px rgba(251, 191, 36, 0.7); }
}

.single-reveal-prompt {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(251, 191, 36, 0.85);
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.3);
}

.single-reveal-front {
  transform: rotateY(180deg);
  background: #1e2230;
}

.single-reveal-rarity {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.single-reveal-art-box {
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  margin: 12px 0;
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.3);
}

.single-reveal-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 4px;
}

.single-reveal-flavor {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* --- Tiers gradients & glows for reveal --- */
.single-reveal-card.tier1 .single-reveal-front {
  background: linear-gradient(135deg, #2c3e50, #0f171e);
  border-color: #34495e;
}
.single-reveal-card.tier2 .single-reveal-front {
  background: linear-gradient(135deg, #1e3d23, #0b150d);
  border-color: var(--tier2);
}
.single-reveal-card.tier3 .single-reveal-front {
  background: linear-gradient(135deg, #5c1b18, #1c0807);
  border-color: var(--tier3);
}
.single-reveal-card.tier4 .single-reveal-front {
  background: linear-gradient(135deg, #7c4412, #211204);
  border-color: var(--tier4);
  box-shadow: 0 0 35px rgba(224,138,44,0.4), inset 0 0 15px rgba(224,138,44,0.2);
}
.single-reveal-card.sc-spell .single-reveal-front {
  background: linear-gradient(135deg, #6b5505, #1e1801);
  border-color: #e6c34a;
}
.single-reveal-card.sc-chip .single-reveal-front {
  background: linear-gradient(135deg, #441a8c, #130728);
  border-color: #8a5fd9;
}

.single-reveal-card.tier1 .single-reveal-rarity { color: #bdc3c7; }
.single-reveal-card.tier2 .single-reveal-rarity { color: var(--tier2); }
.single-reveal-card.tier3 .single-reveal-rarity { color: var(--tier3); }
.single-reveal-card.tier4 .single-reveal-rarity { color: var(--tier4); }
.single-reveal-card.sc-spell .single-reveal-rarity { color: #f5d042; }
.single-reveal-card.sc-chip .single-reveal-rarity { color: #a47ef2; }

/* --- Particles Explode Styles --- */
.single-reveal-particle-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.reveal-sparkle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: sparkleExplode 1.2s cubic-bezier(0.1, 1, 0.2, 1) forwards;
}

@keyframes sparkleExplode {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0);
    opacity: 0;
  }
}

.fade-in-btn {
  animation: revealBtnIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes revealBtnIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== DECK STRATEGY DASHBOARD STYLES ===== */
.deck-builder-dashboard {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(18, 24, 36, 0.82) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 6px 24px 6px 24px !important;
  padding: 18px;
  margin: 10px 0 20px 0;
  box-shadow: none !important;
}

.db-dash-header {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.04em;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.16);
  padding-bottom: 8px;
}

.db-dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

@media (min-width: 640px) {
  .db-dash-grid {
    grid-template-columns: 1fr 1fr 2fr;
  }
}

.db-dash-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%), rgba(18, 24, 36, 0.65);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px 14px 4px 14px;
  padding: 12px;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none !important;
  transition: transform 0.15s ease, border-color 0.2s ease;
}

.db-dash-metric:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.45);
}

.db-dash-metric-wide {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%), rgba(18, 24, 36, 0.65);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px 14px 4px 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  grid-column: span 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none !important;
}

@media (min-width: 640px) {
  .db-dash-metric-wide {
    grid-column: span 1;
  }
}

.db-dash-val {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 900;
  color: #38bdf8;
  line-height: 1.2;
}

.db-dash-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

/* --- Type Distribution Progress Bar --- */
.db-dist-bar {
  display: flex;
  height: 10px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
}

.db-dist-fill {
  height: 100%;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.db-dist-units { background-color: #38bdf8; }
.db-dist-spells { background-color: #f59e0b; }
.db-dist-chips { background-color: #a855f7; }

.db-dist-legends {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
}

.db-legend {
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.db-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.db-legend-units { background-color: #38bdf8; }
.db-legend-spells { background-color: #f59e0b; }
.db-legend-chips { background-color: #a855f7; }

/* --- Tier Breakdown --- */
.db-dash-tier-breakdown {
  border-top: 1.5px dashed rgba(255, 255, 255, 0.16);
  padding-top: 14px;
  margin-top: 14px;
}

.db-tier-bar-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

@media (min-width: 480px) {
  .db-tier-bar-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

.db-tier-item {
  font-size: 0.76rem;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%), rgba(18, 24, 36, 0.6);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  padding: 8px 12px;
  border-radius: 4px 12px 4px 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none !important;
}

.db-tier-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* ===== EPIC VICTORY OVERLAY FOR EXPERT/MASTER BOTS ===== */
.epic-victory-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 4, 8, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110000;
  animation: epicOverlayFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes epicOverlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.epic-victory-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px;
  max-width: 500px;
  width: 90%;
  position: relative;
  z-index: 10;
}

.epic-victory-badge {
  font-size: 5rem;
  margin-bottom: 24px;
  filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.6));
  animation: epicBadgePop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both, epicBadgeFloat 3s ease-in-out infinite 0.8s;
}

@keyframes epicBadgePop {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes epicBadgeFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-12px) rotate(3deg); }
}

.epic-victory-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.epic-easy .epic-victory-title {
  color: #4C9A5B;
  text-shadow: 0 0 20px rgba(76, 154, 91, 0.6);
}

.epic-easy .epic-victory-btn {
  background: linear-gradient(135deg, #4C9A5B, #2e7d32);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.epic-medium .epic-victory-title {
  color: #fbbf24;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
}

.epic-medium .epic-victory-btn {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.epic-hard .epic-victory-title {
  color: #e0752c;
  text-shadow: 0 0 20px rgba(224, 117, 44, 0.6);
}

.epic-hard .epic-victory-btn {
  background: linear-gradient(135deg, #e0752c, #c2410c);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.epic-expert .epic-victory-title {
  color: #38bdf8;
  text-shadow: 0 0 20px rgba(56, 189, 248, 0.6);
  animation: epicGlowExpert 2.5s ease-in-out infinite alternate;
}

.epic-master .epic-victory-title {
  color: #c084fc;
  text-shadow: 0 0 20px rgba(192, 132, 252, 0.6);
  animation: epicGlowMaster 2.5s ease-in-out infinite alternate;
}

@keyframes epicGlowExpert {
  from { text-shadow: 0 0 12px rgba(56, 189, 248, 0.4); }
  to { text-shadow: 0 0 24px rgba(56, 189, 248, 0.8), 0 0 40px rgba(99, 102, 241, 0.4); }
}

@keyframes epicGlowMaster {
  from { text-shadow: 0 0 12px rgba(192, 132, 252, 0.4); }
  to { text-shadow: 0 0 24px rgba(192, 132, 252, 0.8), 0 0 40px rgba(236, 72, 153, 0.4); }
}

.epic-victory-subtitle {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 32px;
  line-height: 1.5;
  max-width: 380px;
}

.epic-victory-btn {
  padding: 14px 40px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  border-radius: 99px;
  text-transform: uppercase;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
  transform: scale(1);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: epicBtnSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both 0.5s;
}

@keyframes epicBtnSlideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.epic-victory-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 15px 30px rgba(0,0,0,0.5);
}

.epic-victory-btn:active {
  transform: translateY(1px) scale(0.97);
}

.epic-expert .epic-victory-btn {
  background: linear-gradient(135deg, #0284c7, #4f46e5);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.epic-master .epic-victory-btn {
  background: linear-gradient(135deg, #7c3aed, #db2777);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- Drifting Sparkles --- */
.epic-victory-sparkle-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.epic-victory-spark {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: epicDrift infinite ease-in-out;
}

@keyframes epicDrift {
  0% { transform: translateY(0) scale(0); opacity: 0; }
  20% { opacity: 0.6; }
  80% { opacity: 0.6; }
  100% { transform: translateY(-100px) scale(1); opacity: 0; }
}

/* ============================================================
   GLOBAL MOBILE UI POLISH & OVERLAY VIEWPORT FIXES
   Ensures modals, cards, packs, and HUD elements never crop
   or glitch on small screens or high-density mobile displays.
   ============================================================ */
@media (max-width: 600px) {
  /* Universal Overlay & Modal Card Sizing */
  #quests-card,
  #themes-card,
  #options-card,
  #patchnotes-card,
  #gameover-card,
  #confirm-card,
  #collection-book-card,
  #player-name-card,
  .secret-terminal-card,
  .profile-panel,
  .feature-panel,
  #stats-hub-card {
    max-height: min(90dvh, 90vh) !important;
    width: min(94vw, 440px) !important;
    padding: 18px 14px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 4px 20px 4px 20px !important;
  }

  /* Accessible Touch Close Buttons */
  .modal-close,
  .feature-close {
    min-width: 36px !important;
    min-height: 36px !important;
    top: 8px !important;
    right: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    z-index: 25 !important;
  }

  /* Epic Victory Modal Mobile Sizing */
  .epic-victory-container {
    padding: 20px 14px !important;
    max-width: 92vw !important;
  }
  .epic-victory-badge {
    font-size: 3.2rem !important;
    margin-bottom: 12px !important;
  }
  .epic-victory-title {
    font-size: 1.35rem !important;
    margin-bottom: 8px !important;
  }
  .epic-victory-subtitle {
    font-size: 0.84rem !important;
    margin-bottom: 20px !important;
  }
  .epic-victory-btn {
    padding: 12px 28px !important;
    font-size: 0.88rem !important;
    min-height: 44px !important;
  }

  /* Top HUD Bar Mobile Protection */
  #top-left-hud {
    top: max(8px, env(safe-area-inset-top, 8px)) !important;
    left: max(8px, env(safe-area-inset-left, 8px)) !important;
  }
  #top-right-hud {
    top: max(8px, env(safe-area-inset-top, 8px)) !important;
    right: max(8px, env(safe-area-inset-right, 8px)) !important;
    gap: 5px !important;
  }
  #profile-avatar-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.82rem !important;
  }

  /* Locker & Collection Book Mobile Polish */
  .locker-container {
    padding: 10px 6px !important;
  }
  .locker-grid {
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)) !important;
    gap: 8px !important;
  }
  .locker-tile {
    padding: 4px !important;
  }
  .locker-tile .tile-glyph {
    font-size: 1.45rem !important;
  }
  .locker-tile .tile-name {
    font-size: 0.62rem !important;
    line-height: 1.1 !important;
  }
  .fn-grid {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
    gap: 8px !important;
  }

  /* Deck Builder Mobile Layout */
  .deck-builder-dashboard {
    padding: 12px !important;
    margin: 8px 0 14px 0 !important;
  }
  .db-dash-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  .db-dash-metric {
    padding: 8px 6px !important;
  }
  .db-dash-val {
    font-size: 1.35rem !important;
  }
  .db-dash-label {
    font-size: 0.62rem !important;
  }
  .deck-builder-grid {
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)) !important;
    gap: 6px !important;
  }
  .dcard {
    padding: 8px 6px !important;
    font-size: 0.72rem !important;
  }

  /* Quests & Challenge List Mobile */
  .quest-row {
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  .quest-icon {
    font-size: 1.25rem !important;
    width: 28px !important;
  }
  .quest-title {
    font-size: 0.84rem !important;
  }
  .quest-desc {
    font-size: 0.72rem !important;
  }

  /* Safe Area Padding for App Container */
  #app {
    padding-bottom: max(34px, env(safe-area-inset-bottom, 34px)) !important;
    padding-left: max(4px, env(safe-area-inset-left, 4px)) !important;
    padding-right: max(4px, env(safe-area-inset-right, 4px)) !important;
  }
}

/* ---------- PWA AND OFFLINE STYLING ---------- */
#offline-indicator {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  left: 50%;
  transform: translateX(-50%);
  background: rgba(245, 158, 11, 0.95); /* Bright amber */
  color: #0d0c0a;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.7), 0 0 15px rgba(245,158,11,0.4);
  z-index: 999999;
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: pwaSlideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
@keyframes pwaSlideUp {
  from { transform: translate(-50%, 40px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
.offline-pulse {
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: pwaPulse 1.6s infinite;
}
@keyframes pwaPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* ---------- P2P LATENCY PING BADGE ---------- */
#p2p-ping-badge {
  position: absolute;
  top: 54px; /* Perfectly aligned below the phase bar */
  right: 12px;
  background: rgba(18, 16, 14, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 10px;
  border-radius: 10px;
  font-family: var(--font-display), monospace;
  font-size: 0.76rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #a8a29e;
  z-index: 1000;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: opacity 0.3s ease, border-color 0.3s ease;
}
.ping-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #a8a29e;
  display: inline-block;
  transition: background-color 0.3s ease;
}
.ping-excellent {
  color: #4ade80 !important;
  border-color: rgba(74, 222, 128, 0.25) !important;
  box-shadow: 0 4px 12px rgba(74, 222, 128, 0.05);
}
.ping-excellent .ping-dot { background-color: #4ade80; }

.ping-good {
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.25) !important;
}
.ping-good .ping-dot { background-color: #fbbf24; }

.ping-poor {
  color: #f87171 !important;
  border-color: rgba(248, 113, 113, 0.25) !important;
  box-shadow: 0 4px 12px rgba(248, 113, 113, 0.05);
}
.ping-poor .ping-dot { background-color: #f87171; }

/* Match Performance Chart styling */
.match-performance-section {
  background: color-mix(in srgb, var(--accent) 3%, rgba(20, 20, 25, 0.45));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 12px;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.performance-chart {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 140px;
}
.performance-chart svg {
  display: block;
  overflow: visible;
}
.chart-dot-group {
  transition: transform 0.15s ease;
}
.chart-dot-group:hover .dot {
  r: 7;
  filter: drop-shadow(0 0 6px var(--accent));
}
.chart-dot-group:hover {
  transform: scale(1.15);
}

/* ============================================================
   MILESTONE UNLOCKED POP-UP TOAST NOTIFICATION & BADGE ANIMATION
   ============================================================ */
#milestone-toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  width: 100%;
  max-width: 460px;
  padding: 0 16px;
  box-sizing: border-box;
}

.milestone-toast-item {
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 1.5px solid rgba(250, 204, 21, 0.65);
  border-radius: 16px;
  padding: 13px 15px;
  box-shadow: 
    0 20px 40px -10px rgba(0, 0, 0, 0.8),
    0 0 32px rgba(250, 204, 21, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  gap: 13px;
  color: #f8fafc;
  pointer-events: auto;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  animation: milestoneToastEntrance 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.milestone-toast-item:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: #ffd700;
  box-shadow: 
    0 24px 48px -10px rgba(0, 0, 0, 0.9),
    0 0 40px rgba(250, 204, 21, 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.milestone-toast-item.exiting {
  animation: milestoneToastExit 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Ambient Radial Glow */
.milestone-toast-glow {
  position: absolute;
  top: -40px;
  left: -20px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(250, 204, 21, 0.28) 0%, rgba(250, 204, 21, 0) 70%);
  pointer-events: none;
  filter: blur(8px);
}

/* Diagonal Light Sweep */
.milestone-toast-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.03) 75%,
    transparent 100%
  );
  transform: translateX(-150%) skewX(-25deg);
  animation: milestoneShineSweep 2.2s infinite ease-in-out;
  pointer-events: none;
}

/* Badge Medallion Container */
.milestone-badge-container {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Rotating Pulsing Halo */
.milestone-badge-halo {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(250, 204, 21, 0.8),
    rgba(245, 158, 11, 0.2),
    rgba(250, 204, 21, 0.9),
    rgba(217, 119, 6, 0.1),
    rgba(250, 204, 21, 0.8)
  );
  filter: blur(4px);
  animation: milestoneHaloSpin 4s linear infinite;
  opacity: 0.85;
}

/* Badge Medallion Frame */
.milestone-badge-medallion {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2d3748 0%, #111827 75%, #030712 100%);
  border: 2.5px solid #fbbf24;
  box-shadow: 
    0 0 14px rgba(250, 204, 21, 0.6),
    inset 0 2px 4px rgba(255, 255, 255, 0.45),
    inset 0 -2px 4px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: milestoneBadgePop 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.35) forwards;
  z-index: 2;
}

.milestone-badge-icon {
  font-size: 1.65rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  animation: milestoneIconFloat 2.5s ease-in-out infinite;
}

/* Sparkling Orbit Elements */
.milestone-sparkle {
  position: absolute;
  font-size: 0.75rem;
  pointer-events: none;
  z-index: 3;
}
.milestone-sparkle.s1 { top: -2px; right: 2px; animation: sparkleBlink 1.4s infinite ease-in-out; }
.milestone-sparkle.s2 { bottom: 0px; left: -2px; animation: sparkleBlink 1.8s infinite 0.4s ease-in-out; }
.milestone-sparkle.s3 { top: 18px; right: -8px; animation: sparkleBlink 1.6s infinite 0.8s ease-in-out; }

/* Toast Content Block */
.milestone-toast-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.milestone-toast-eyebrow {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fbbf24;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(250, 204, 21, 0.4);
}

.milestone-toast-title {
  font-family: 'Chakra Petch', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  color: #ffffff;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.milestone-toast-desc {
  font-size: 0.72rem;
  color: #94a3b8;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.milestone-toast-reward-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.milestone-reward-pill {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  padding: 1px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.milestone-badge-pill {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.25), rgba(245, 158, 11, 0.15));
  border: 1px solid rgba(250, 204, 21, 0.5);
  color: #fde047;
  padding: 1px 7px;
  border-radius: 9999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Close Button */
.milestone-toast-close {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  line-height: 1;
}

.milestone-toast-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transform: scale(1.1);
}

/* Confetti Sparkles Particles */
.milestone-particle-spark {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  z-index: 100000;
  animation: milestoneSparkPop 0.8s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

/* Keyframe Animations */
@keyframes milestoneToastEntrance {
  0% {
    transform: translateY(-60px) scale(0.85);
    opacity: 0;
  }
  65% {
    transform: translateY(6px) scale(1.03);
    opacity: 1;
  }
  85% {
    transform: translateY(-2px) scale(0.99);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes milestoneToastExit {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-35px) scale(0.9);
    opacity: 0;
  }
}

@keyframes milestoneBadgePop {
  0% {
    transform: scale(0.15) rotate(-45deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.3) rotate(10deg);
    opacity: 1;
  }
  75% {
    transform: scale(0.9) rotate(-5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes milestoneHaloSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes milestoneIconFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.08); }
}

@keyframes sparkleBlink {
  0%, 100% { transform: scale(0.4) rotate(0deg); opacity: 0.2; }
  50% { transform: scale(1.2) rotate(45deg); opacity: 1; filter: drop-shadow(0 0 4px #fbbf24); }
}

@keyframes milestoneShineSweep {
  0% { transform: translateX(-150%) skewX(-25deg); opacity: 0; }
  35% { opacity: 0.6; }
  65% { opacity: 0.6; }
  100% { transform: translateX(250%) skewX(-25deg); opacity: 0; }
}

@keyframes milestoneSparkPop {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) scale(0);
    opacity: 0;
  }
}

@media (max-width: 480px) {
  #milestone-toast-container {
    top: 10px;
    padding: 0 10px;
  }
  .milestone-toast-item {
    padding: 10px 12px;
    gap: 10px;
  }
  .milestone-badge-container {
    width: 44px;
    height: 44px;
  }
  .milestone-badge-medallion {
    width: 38px;
    height: 38px;
  }
  .milestone-badge-icon {
    font-size: 1.35rem;
  }
  .milestone-toast-title {
    font-size: 0.86rem;
  }
  .milestone-toast-desc {
    font-size: 0.68rem;
  }
}

/* ===== DANGER ZONE HOLD-TO-CONFIRM PROGRESS STYLES ===== */
#btn-reset-progress {
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: pointer !important;
}

#btn-reset-progress .btn-reset-fill {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 0%;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.65) 0%, rgba(220, 38, 38, 0.85) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transition: width 0.05s linear !important;
}

#btn-reset-progress .btn-reset-text {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Rumble/Shake animation when holding */
#btn-reset-progress.holding {
  animation: dangerRumble 0.1s infinite alternate !important;
  transform: scale(0.98) !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.45) !important;
}

@keyframes dangerRumble {
  0% { transform: translate(1px, 1px) rotate(0.5deg) scale(0.98); }
  25% { transform: translate(-1px, -1px) rotate(-0.5deg) scale(0.98); }
  50% { transform: translate(-1.5px, 1px) rotate(1deg) scale(0.98); }
  75% { transform: translate(1.5px, -1px) rotate(-1deg) scale(0.98); }
  100% { transform: translate(1px, 1px) rotate(0deg) scale(0.98); }
}

/* ===== STAGGERED MENU CARD ENTRANCE TRANSITIONS ===== */
#screen-menu .menu-card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease !important;
}

#screen-menu.active-screen .menu-card {
  opacity: 1;
  transform: translateY(0);
}

/* Hover override to cancel transition delay for fast reaction */
#screen-menu.active-screen .menu-card:hover {
  opacity: 1 !important;
  transform: translateY(-4px) scale(1.015) !important;
  transition-delay: 0s !important;
}

/* Stagger load delays */
#screen-menu.active-screen #btn-single-player {
  transition-delay: 0.04s, 0.04s, 0s, 0s !important;
}
#screen-menu.active-screen #btn-shop {
  transition-delay: 0.12s, 0.12s, 0s, 0s !important;
}
#screen-menu.active-screen #btn-enter-vr {
  transition-delay: 0.18s, 0.18s, 0s, 0s !important;
}
#screen-menu.active-screen #btn-multiplayer {
  transition-delay: 0.18s, 0.18s, 0s, 0s !important;
}

/* ===== STAGGERED ANALYTICS ROW ENTRANCE TRANSITIONS ===== */
#gameover-overlay .analytics-row {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#gameover-overlay:not(.hidden) .analytics-row {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger each of the 5 rows with incremental delays */
#gameover-overlay:not(.hidden) .analytics-row:nth-child(1) { transition-delay: 0.18s !important; }
#gameover-overlay:not(.hidden) .analytics-row:nth-child(2) { transition-delay: 0.28s !important; }
#gameover-overlay:not(.hidden) .analytics-row:nth-child(3) { transition-delay: 0.38s !important; }
#gameover-overlay:not(.hidden) .analytics-row:nth-child(4) { transition-delay: 0.48s !important; }
#gameover-overlay:not(.hidden) .analytics-row:nth-child(5) { transition-delay: 0.58s !important; }

/* ===== FLYING COIN PARTICLES & BOUNCING HUD DISPLAY STYLES ===== */
.flying-coin-particle {
  position: fixed !important;
  width: 20px !important;
  height: 20px !important;
  background: radial-gradient(circle, #ffe066 0%, #f59e0b 80%, #d97706 100%) !important;
  border: 1.5px solid #ffffff !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 10px rgba(217, 119, 6, 0.6), 0 0 6px rgba(251, 191, 36, 0.8) !important;
  pointer-events: none !important;
  z-index: 999999 !important;
  will-change: transform, opacity, left, top !important;
  transition: transform 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.18s ease-out;
}

.bux-counter-pulse {
  animation: buxCounterPulse 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* ===== PLAYABLE CARDS & SPELLS ACTIVE GLOW STYLES ===== */
@keyframes playableUnitPulse {
  0% {
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
  }
  50% {
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.9), 0 0 2px rgba(34, 197, 94, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(74, 222, 128, 0.95) !important;
  }
  100% {
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
  }
}

@keyframes playableSpellPulse {
  0% {
    box-shadow: 0 0 4px rgba(168, 85, 247, 0.45) !important;
    border-color: rgba(168, 85, 247, 0.5) !important;
  }
  50% {
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.85), 0 0 2px rgba(168, 85, 247, 0.45) !important;
    border-color: rgba(192, 132, 252, 0.95) !important;
  }
  100% {
    box-shadow: 0 0 4px rgba(168, 85, 247, 0.45) !important;
    border-color: rgba(168, 85, 247, 0.5) !important;
  }
}

.playable-glow {
  animation: playableUnitPulse 1.8s infinite ease-in-out !important;
}

.playable-spell-glow {
  animation: playableSpellPulse 1.8s infinite ease-in-out !important;
}

/* ===== FLOATING FUSION TEXT INDICATOR STYLES ===== */
.float-merge {
  color: #38bdf8 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  animation: floatUp 0.95s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.8), 0 2px 5px rgba(0, 0, 0, 0.8) !important;
}

/* ===== TWEAK 1: CARD STAT HOVER LIGHTS & SCALE EFFECTS ===== */
.card .card-stats .hp,
.card .card-stats .dmg,
.card .card-stats .sp {
  display: inline-block !important;
  will-change: transform, color !important;
  transition: transform 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.22s ease !important;
}

.card:hover .card-stats .hp {
  color: #ff6b6b !important;
  transform: scale(1.15) !important;
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.5) !important;
}

.card:hover .card-stats .dmg {
  color: #fbbf24 !important;
  transform: scale(1.15) !important;
  text-shadow: 0 0 6px rgba(245, 158, 11, 0.5) !important;
}

.card:hover .card-stats .sp {
  color: #60a5fa !important;
  transform: scale(1.15) !important;
  text-shadow: 0 0 6px rgba(59, 130, 246, 0.5) !important;
}

/* ===== TWEAK 2: INTERACTIVE MODE BAR ACTION BUTTONS ===== */
.mode-btn {
  will-change: transform, background, border-color, box-shadow !important;
  transition: transform 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              background 0.22s ease,
              border-color 0.22s ease,
              box-shadow 0.22s ease !important;
}

.mode-btn:hover {
  transform: translateY(-3px) scale(1.05) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45), 0 0 10px rgba(56, 189, 248, 0.3) !important;
}

.mode-btn:active {
  transform: translateY(1px) scale(0.95) !important;
}

/* ===== HAND ROW CARD VERTICAL STATS STACK ===== */
#hand-row .card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 4px 5px !important;
  box-sizing: border-box !important;
}

#hand-row .card-stats {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 2px !important;
  margin-top: auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#hand-row .card-stats .hp,
#hand-row .card-stats .dmg,
#hand-row .card-stats .sp {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  padding: 1px 1px !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  border-radius: 3px !important;
  line-height: 1 !important;
}

#hand-row .card-stats .hp {
  background: rgba(239, 68, 68, 0.15) !important;
}
#hand-row .card-stats .dmg {
  background: rgba(245, 158, 11, 0.15) !important;
}
#hand-row .card-stats .sp {
  background: rgba(59, 130, 246, 0.15) !important;
}

#hand-row .card:hover .card-stats .hp {
  background: rgba(239, 68, 68, 0.3) !important;
}
#hand-row .card:hover .card-stats .dmg {
  background: rgba(245, 158, 11, 0.3) !important;
}
#hand-row .card:hover .card-stats .sp {
  background: rgba(59, 130, 246, 0.3) !important;
}

/* ===== TWEAK: KINETIC SCREEN SHAKE / RUMBLE EFFECTS ===== */
.rumble-light {
  animation: shakeLight 0.22s ease-in-out !important;
}

.rumble-medium {
  animation: shakeMedium 0.24s ease-in-out !important;
}

.rumble-heavy {
  animation: shakeHeavy 0.26s ease-in-out !important;
}

/* ===== ENLARGED CARD HOLD-TO-INSPECT SYSTEM (ABSOLUTE MORPH CLONE) ===== */
.card-morph-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  background: rgba(3, 7, 18, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background 0.28s ease, backdrop-filter 0.28s ease;
}

.card-morph-overlay.blurred-backdrop {
  background: rgba(3, 7, 18, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.morph-clone {
  transition: all 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  pointer-events: none !important;
  transform: scale(1) translate3d(0, 0, 0) !important;
  will-change: transform, top, left, width, height, box-shadow, border-color !important;
}

.morph-clone.is-enlarging {
  top: 12% !important; /* Raised high up to prevent mobile thumb occlusion */
  left: calc(50% - 120px) !important; /* Centered horizontally with the new physical 240px width */
  width: 240px !important;
  height: 310px !important;
  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.95), 0 0 50px rgba(56, 189, 248, 0.9) !important;
  border-color: #38bdf8 !important;
  filter: brightness(1.1) !important;
}

/* Physically scaled overrides for card children during enlargement */
.morph-clone.is-enlarging .card-name {
  font-size: 1.15rem !important;
  padding: 8px !important;
}

.morph-clone.is-enlarging .card-art {
  height: 120px !important;
  font-size: 3rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.morph-clone.is-enlarging .card-stats {
  font-size: 0.95rem !important;
  padding: 6px !important;
}

/* Hide description text on small/standard cards globally to ensure pristine card faces */
.card-ability {
  display: none !important;
}

/* Force expand, position and un-clip card-ability container inside enlarged cards */
.morph-clone.is-enlarging .card-ability {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  position: absolute !important;
  /* Centered perfectly relative to card name (top) and card stats (bottom) with zero overlay */
  top: 52px !important;
  bottom: 52px !important;
  left: 10px !important;
  right: 10px !important;
  height: auto !important;
  border-radius: 12px !important;
  padding: 12px !important;
  color: #fff !important;
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  text-align: center !important;
  z-index: 10 !important;
  overflow-y: auto !important;
  max-height: none !important;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05) !important;
}

/* Dynamically match description container colors to the card's specific tier palette */
/* Tier 1 (Blue / Common) */
.morph-clone.is-enlarging.tier1 .card-ability {
  background: rgba(15, 32, 66, 0.97) !important;
  border: 1.5px solid rgba(59, 130, 246, 0.65) !important;
  box-shadow: inset 0 0 16px rgba(59, 130, 246, 0.25) !important;
}
/* Tier 2 (Green / Rare) */
.morph-clone.is-enlarging.tier2 .card-ability {
  background: rgba(6, 68, 51, 0.97) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.65) !important;
  box-shadow: inset 0 0 16px rgba(16, 185, 129, 0.25) !important;
}
/* Tier 3 (Red / Epic) */
.morph-clone.is-enlarging.tier3 .card-ability {
  background: rgba(99, 18, 18, 0.97) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.65) !important;
  box-shadow: inset 0 0 16px rgba(239, 68, 68, 0.25) !important;
}
/* Tier 4 (Orange / Legendary) */
.morph-clone.is-enlarging.tier4 .card-ability {
  background: rgba(124, 45, 18, 0.97) !important;
  border: 1.5px solid rgba(249, 115, 22, 0.65) !important;
  box-shadow: inset 0 0 16px rgba(249, 115, 22, 0.25) !important;
}

.morph-clone.is-enlarging .card-ability .enlarged-ability-text {
  font-weight: 700 !important;
  color: #f3f4f6 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

/* Handle smaller viewports with adaptive offsets to ensure zero overflow or layout clipping */
@media (max-height: 600px) {
  .morph-clone.is-enlarging {
    top: 8% !important;
    left: calc(50% - 100px) !important;
    width: 200px !important;
    height: 260px !important;
  }
  .morph-clone.is-enlarging .card-name {
    font-size: 0.95rem !important;
    padding: 6px !important;
  }
  .morph-clone.is-enlarging .card-art {
    height: 90px !important;
    font-size: 2.2rem !important;
  }
  .morph-clone.is-enlarging .card-ability {
    top: 42px !important;
    bottom: 42px !important;
    left: 8px !important;
    right: 8px !important;
    font-size: 0.68rem !important;
    padding: 8px !important;
  }
}

/* Touch Action Lock to optimize mobile hold interactions */
.card, .locker-tile {
  touch-action: none !important;
}

/* Breathing level up pulse for Profile Avatar in Top HUD */
#profile-avatar-btn.avatar-level-up-pulse {
  animation: avatarLevelUpBreathingPulse 1.45s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

@keyframes avatarLevelUpBreathingPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.4), var(--shadow-sm);
  }
  25% {
    transform: scale(1.25);
    border-color: #a855f7 !important;
    box-shadow: 0 0 22px 8px rgba(168, 85, 247, 0.65), 0 0 0 12px rgba(168, 85, 247, 0);
  }
  50% {
    transform: scale(1.15);
    border-color: #3b82f6 !important;
    box-shadow: 0 0 18px 4px rgba(59, 130, 246, 0.55), 0 0 0 8px rgba(59, 130, 246, 0);
  }
  75% {
    transform: scale(1.2);
    border-color: #10b981 !important;
    box-shadow: 0 0 20px 6px rgba(16, 185, 129, 0.55), 0 0 0 10px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0), var(--shadow-sm);
  }
}

/* ============================================================
   PLAYSTATION 4 & LOW-PERFORMANCE CONSOLE DEVICE OPTIMIZER
   Eliminates backdrop-filter blur rendering overhead, simplifies 
   heavy box-shadows, and optimizes browser compositing to ensure 
   a steady, fluid 60 FPS on console browsers.
   ============================================================ */
.low-perf-device *,
.low-perf-device *::before,
.low-perf-device *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition-duration: 0.08s !important; /* snap-fast transitions */
}

/* Fallback to simple high-opacity backgrounds for glassmorphic elements to preserve readability */
.low-perf-device .screen,
.low-perf-device .modal-card,
.low-perf-device .popup-card,
.low-perf-device .profile-panel,
.low-perf-device .menu-card,
.low-perf-device .glass-panel,
.low-perf-device .settings-modal-card,
.low-perf-device .blurred-backdrop {
  background: rgba(11, 15, 25, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Simplify complex animated themes (Prism, Magma, Cyberneon, Abyss) in low-perf mode */
.low-perf-device #theme-prism-bg,
.low-perf-device #theme-magma-bg,
.low-perf-device #theme-cyberneon-bg,
.low-perf-device #theme-abyss-bg,
.low-perf-device .prism-refraction-caustic-primary,
.low-perf-device .prism-refraction-caustic-secondary,
.low-perf-device .prism-laser-pillar,
.low-perf-device .prism-cosmic-dust,
.low-perf-device .prism-light-beam,
.low-perf-device .prism-crystal-lattice,
.low-perf-device .prism-light-sweep {
  animation: none !important;
  opacity: 0.1 !important;
  display: none !important; /* hides complex heavy DOM elements */
}

/* Also ensure a static, clean background for low-performance consoles */
.low-perf-device body {
  background-color: #0b0f19 !important;
  background-image: none !important;
}

/* ============================================================
   BATTLE PASS (SEASON 1: NEON OBLIVION) MODAL & TRACK STYLES
   ============================================================ */
#battlepass-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(4, 8, 16, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
#battlepass-overlay.hidden { display: none !important; }

.bp-modal-card {
  position: relative;
  width: min(1180px, 98vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, rgba(20, 24, 40, 0.95) 0%, rgba(10, 14, 26, 0.98) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.4);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 30px rgba(245, 158, 11, 0.25);
  overflow: hidden;
  box-sizing: border-box;
}

/* Banner Header */
.bp-header-banner {
  padding: 22px 28px 18px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(239, 68, 68, 0.08) 50%, rgba(139, 92, 246, 0.12) 100%);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bp-season-badge {
  align-self: flex-start;
  padding: 3px 12px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 999px;
  text-transform: uppercase;
}

.bp-main-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 900;
  background: linear-gradient(135deg, #ffffff 0%, #fef08a 40%, #f59e0b 70%, #ef4444 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}

.bp-sub-title {
  font-size: 0.88rem;
  color: #cbd5e1;
  line-height: 1.3;
}

/* Status & Actions Row */
.bp-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.bp-status-pill-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bp-status-pill {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.bp-status-pill.standard {
  background: rgba(148, 163, 184, 0.15);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #cbd5e1;
}
.bp-status-pill.premium {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(168, 85, 247, 0.25));
  border: 1px solid #f59e0b;
  color: #fef08a;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}

.bp-level-badge {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 900;
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid #38bdf8;
  color: #38bdf8;
}

.bp-action-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bp-buy-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #ef4444 100%) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 0.85rem !important;
  padding: 8px 18px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.bp-buy-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.7) !important;
}
.bp-buy-btn.owned {
  background: rgba(34, 197, 94, 0.2) !important;
  border: 1px solid #22c55e !important;
  color: #4ade80 !important;
  box-shadow: none !important;
}

.bp-claim-all-btn {
  background: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  padding: 8px 16px !important;
  border-radius: 12px !important;
}

/* Progress Tracker */
.bp-progress-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.bp-progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
}

.bp-xp-text {
  font-weight: 800;
  color: #fef08a;
}

.bp-xp-hint {
  color: #94a3b8;
  font-size: 0.72rem;
}

.bp-progress-bar-bg {
  width: 100%;
  height: 10px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  overflow: hidden;
}

.bp-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b 0%, #ef4444 50%, #a855f7 100%);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.8);
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Track Scroll Area */
.bp-track-scroll-area {
  padding: 20px 24px 28px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 158, 11, 0.4) rgba(15, 23, 42, 0.6);
}

.bp-track-grid {
  display: flex;
  gap: 16px;
  min-width: max-content;
}

/* Tier Column */
.bp-tier-col {
  width: 155px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.bp-tier-col.reached {
  background: rgba(20, 30, 50, 0.8);
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.bp-tier-header {
  text-align: center;
  padding: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bp-tier-num {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 900;
  color: #fef08a;
  letter-spacing: 0.06em;
}

/* Reward Card */
.bp-reward-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px;
  min-height: 145px;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  text-align: center;
  box-sizing: border-box;
}
.bp-reward-card.prem-card {
  background: linear-gradient(160deg, rgba(40, 25, 60, 0.8) 0%, rgba(20, 15, 35, 0.9) 100%);
  border-color: rgba(168, 85, 247, 0.35);
}
.bp-reward-card.prem-card.unlocked {
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: inset 0 0 12px rgba(245, 158, 11, 0.15);
}

.bp-card-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 0.58rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}
.bp-card-tag.prem {
  background: rgba(245, 158, 11, 0.25);
  color: #fef08a;
  border: 0.5px solid rgba(245, 158, 11, 0.4);
}

.bp-reward-icon {
  font-size: 2.2rem;
  margin-top: 14px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.bp-reward-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.25;
  margin: 6px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bp-claim-btn {
  width: 100%;
  padding: 5px 8px;
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.bp-claim-btn.claimed {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  cursor: default;
}
.bp-claim-btn.locked {
  background: rgba(51, 65, 85, 0.5) !important;
  color: #64748b !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  cursor: default;
}
.bp-claim-btn.active-free {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(34, 197, 94, 0.4) !important;
}
.bp-claim-btn.active-free:hover {
  transform: scale(1.04);
}
.bp-claim-btn.active-prem {
  background: linear-gradient(135deg, #f59e0b, #a855f7) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.5) !important;
}
.bp-claim-btn.active-prem:hover {
  transform: scale(1.04);
}
.bp-claim-btn.prem-locked {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  color: #fef08a !important;
}
.bp-claim-btn.prem-locked:hover {
  background: rgba(245, 158, 11, 0.3) !important;
}

.bp-unclaimed-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #ffffff;
  box-shadow: 0 0 8px #ef4444;
  animation: buxCoinPop 1.2s infinite alternate;
}
.bp-unclaimed-badge.hidden { display: none !important; }

/* ============================================================
   SEASON 1 NEW THEME BACKGROUND STYLES (CHRONOS, CYBERPUNK, SINGULARITY)
   ============================================================ */
/* Theme 1: Chronos Horizon */
#theme-chronos-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 30%, #1e1535 0%, #0d091e 60%, #05030b 100%);
  overflow: hidden;
}
.chronos-gear-clockwork {
  position: absolute;
  border-radius: 50%;
  border: 2px dashed rgba(245, 158, 11, 0.25);
  box-shadow: inset 0 0 30px rgba(245, 158, 11, 0.15);
}
.chronos-gear-clockwork.cg1 {
  width: 450px;
  height: 450px;
  top: -100px;
  left: -100px;
  animation: gearSpin 28s linear infinite;
}
.chronos-gear-clockwork.cg2 {
  width: 600px;
  height: 600px;
  bottom: -150px;
  right: -150px;
  animation: gearSpin 38s linear infinite reverse;
}
.chronos-temporal-haze {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 70%);
  animation: pulseRing 6s ease-in-out infinite alternate;
}

/* Theme 2: Hyperdrive Cyber-Grid */
#theme-neon_cyberpunk-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #090314 0%, #17092c 60%, #2e083a 100%);
  overflow: hidden;
}
.hyperdrive-grid-floor {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(0, 240, 255, 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(236, 72, 153, 0.15) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: perspective(400px) rotateX(60deg) translateY(-100px) scale(1.5);
  animation: cyberGridMove 8s linear infinite;
}
.hyperdrive-vapor-sun {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f59e0b 0%, #ec4899 50%, #8b5cf6 100%);
  box-shadow: 0 0 60px rgba(236, 72, 153, 0.6);
  opacity: 0.85;
}

/* Theme 3: Void Singularity */
#theme-void_singularity-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 50%, #0c021a 0%, #05010a 70%, #000000 100%);
  overflow: hidden;
}
.singularity-core-portal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: #000000;
  box-shadow: 0 0 50px #8b5cf6, 0 0 100px #3b82f6, inset 0 0 30px #a855f7;
  animation: voidPortalPulse 4s ease-in-out infinite;
}
.singularity-accretion-disk {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 500px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid rgba(168, 85, 247, 0.6);
  box-shadow: 0 0 40px rgba(168, 85, 247, 0.8);
  animation: voidPortalSpin 12s linear infinite;
}