/* ═══════════════════════════════════════════════════════════════
   DUELFI — ANIMATIONS, GAME EFFECTS, PRELOADERS
   Appended via build. Do not edit inline.
   ═══════════════════════════════════════════════════════════════ */

/* ─── KEYFRAMES ─────────────────────────────────────────────── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cardReveal {
  0%   { opacity: 0; transform: rotateY(90deg) scale(0.85); }
  60%  { transform: rotateY(-8deg) scale(1.04); }
  100% { opacity: 1; transform: rotateY(0deg) scale(1); }
}
@keyframes cardPlay {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-22px) scale(1.12) rotate(-3deg); }
  65%  { transform: translateY(6px) scale(0.97) rotate(1deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}
@keyframes cardClash {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.18) rotate(-4deg); box-shadow: 0 0 40px var(--ds-primary); }
  50%  { transform: scale(0.92) rotate(2deg); }
  75%  { transform: scale(1.06) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes winFlash {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
  50%  { box-shadow: 0 0 0 20px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
@keyframes lossFlash {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  50%  { box-shadow: 0 0 0 20px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.5); opacity: 0.5; }
}
@keyframes floatA {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%       { transform: translateY(-10px) rotate(1deg); }
}
@keyframes floatB {
  0%, 100% { transform: translateY(0) rotate(1deg); }
  50%       { transform: translateY(-14px) rotate(-2deg); }
}
@keyframes floatC {
  0%, 100% { transform: translateY(-4px) rotate(2deg); }
  50%       { transform: translateY(8px) rotate(-1deg); }
}
@keyframes floatD {
  0%, 100% { transform: translateY(-2px) rotate(-0.5deg); }
  50%       { transform: translateY(-12px) rotate(2deg); }
}
@keyframes scoreCount {
  0%   { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes aprPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}
@keyframes rowStagger {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes bounceIn {
  0%   { transform: scale(0.3); opacity: 0; }
  55%  { transform: scale(1.1); opacity: 1; }
  75%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes ripple {
  to { transform: scale(2.5); opacity: 0; }
}
@keyframes orbitSpin {
  from { transform: rotate(0deg) translateX(30px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}
@keyframes toastSlide {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes particleUp {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx, 20px), var(--dy, -60px)) scale(0); opacity: 0; }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(74, 222, 128, 0.3); }
  50%       { box-shadow: 0 0 24px rgba(74, 222, 128, 0.7), 0 0 48px rgba(74, 222, 128, 0.2); }
}
@keyframes scanLine {
  from { top: 0; }
  to   { top: 100%; }
}
@keyframes numberFlip {
  0%   { transform: translateY(-30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ─── VIEW TRANSITIONS ──────────────────────────────────────── */

.view.active {
  animation: fadeUp 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Stagger panel blocks inside the view */
.view.active .panel-block:nth-child(1) { animation: fadeUp 0.3s 0.04s both; }
.view.active .panel-block:nth-child(2) { animation: fadeUp 0.3s 0.10s both; }
.view.active .panel-block:nth-child(3) { animation: fadeUp 0.3s 0.16s both; }
.view.active .panel-block:nth-child(4) { animation: fadeUp 0.3s 0.22s both; }
.view.active .panel-block:nth-child(5) { animation: fadeUp 0.3s 0.28s both; }
.view.active .panel-block:nth-child(6) { animation: fadeUp 0.3s 0.34s both; }

/* ─── RAIL NAVIGATION ───────────────────────────────────────── */

.rail-btn {
  transition: background 0.18s, color 0.18s, transform 0.14s;
  position: relative;
  overflow: hidden;
}
.rail-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.25) 0%, transparent 70%);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.3s, opacity 0.3s;
  border-radius: inherit;
}
.rail-btn:active::after {
  transform: scale(1);
  opacity: 1;
  transition: none;
}
.rail-btn:hover:not(.active) { transform: translateX(3px); }
.rail-btn.active { transform: translateX(4px); }

/* ─── GAME CARDS ────────────────────────────────────────────── */

.game-card {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease,
              border-color 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  will-change: transform;
}
.game-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 70%
  );
  transform: translateX(-100%) translateY(-100%);
  transition: transform 0.5s ease;
  pointer-events: none;
}
.game-card:hover::before {
  transform: translateX(0%) translateY(0%);
}
.game-card:hover {
  transform: translateY(-8px) scale(1.025);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.2), 0 0 0 2px var(--ds-primary);
  z-index: 2;
}
.game-card:active {
  transform: translateY(-2px) scale(0.985);
  transition-duration: 0.08s;
}

/* Rarity-based glow rings on hover */
.game-card.green:hover  { box-shadow: 0 20px 40px rgba(145, 217, 109, 0.3), 0 0 0 2px #91d96d; }
.game-card.blue:hover   { box-shadow: 0 20px 40px rgba(142, 184, 255, 0.3), 0 0 0 2px #8eb8ff; }
.game-card.lilac:hover  { box-shadow: 0 20px 40px rgba(198, 165, 239, 0.3), 0 0 0 2px #c6a5ef; }
.game-card.gold:hover   { box-shadow: 0 20px 40px rgba(243, 212, 109, 0.4), 0 0 0 2px #f3d46d; }
.game-card.peach:hover  { box-shadow: 0 20px 40px rgba(245, 181, 141, 0.3), 0 0 0 2px #f5b58d; }
.game-card.mint:hover   { box-shadow: 0 20px 40px rgba(191, 230, 220, 0.3), 0 0 0 2px #bfe6dc; }
.game-card.pink:hover   { box-shadow: 0 20px 40px rgba(239, 159, 210, 0.3), 0 0 0 2px #ef9fd2; }

/* Equipped glow */
.game-card.equipped {
  animation: glowPulse 2.5s ease-in-out infinite;
}

/* Card appear in grid */
.cards-grid .game-card {
  animation: fadeUp 0.35s both;
}
.cards-grid .game-card:nth-child(1)  { animation-delay: 0.03s; }
.cards-grid .game-card:nth-child(2)  { animation-delay: 0.06s; }
.cards-grid .game-card:nth-child(3)  { animation-delay: 0.09s; }
.cards-grid .game-card:nth-child(4)  { animation-delay: 0.12s; }
.cards-grid .game-card:nth-child(5)  { animation-delay: 0.15s; }
.cards-grid .game-card:nth-child(6)  { animation-delay: 0.18s; }
.cards-grid .game-card:nth-child(7)  { animation-delay: 0.21s; }
.cards-grid .game-card:nth-child(8)  { animation-delay: 0.24s; }

/* ─── FLOATING DUEL CARDS ───────────────────────────────────── */

.float-a { animation: floatA 4.8s ease-in-out infinite; }
.float-b { animation: floatB 5.6s ease-in-out infinite 0.8s; }
.float-c { animation: floatC 4.2s ease-in-out infinite 0.4s; }
.float-d { animation: floatD 6.0s ease-in-out infinite 1.2s; }

.floating-card {
  transition: transform 0.3s ease;
}
.floating-card:hover {
  animation-play-state: paused;
  transform: scale(1.06) !important;
  z-index: 10;
}

/* ─── BATTLE CARDS (PLAYED) ─────────────────────────────────── */

.played-card {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease,
              border-color 0.2s;
}
.played-card.selected {
  animation: cardReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  border-color: var(--ds-primary) !important;
  box-shadow: 0 0 0 2px var(--ds-primary), 0 16px 40px rgba(34, 197, 94, 0.25);
}
.played-card.revealed {
  animation: cardReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
  border-color: var(--ds-danger) !important;
  box-shadow: 0 0 0 2px var(--ds-danger), 0 16px 40px rgba(239, 68, 68, 0.2);
}

/* Round resolve — clash effect */
.played-card.clash {
  animation: cardClash 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.played-card.win-flash {
  animation: winFlash 0.8s ease-out;
}
.played-card.loss-flash {
  animation: lossFlash 0.8s ease-out;
}

/* ─── HAND CARD BUTTONS (DUEL) ──────────────────────────────── */

.hand-list button {
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.18s ease,
              border-color 0.15s;
  position: relative;
  overflow: hidden;
}
.hand-list button:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
  border-color: var(--ds-primary) !important;
}
.hand-list button.picked {
  transform: translateY(-4px);
  border-color: var(--ds-primary) !important;
  box-shadow: 0 0 0 2px var(--ds-primary), 0 12px 28px rgba(34,197,94,0.25);
  animation: glowPulse 2s ease-in-out infinite;
}
.hand-list button {
  animation: slideInLeft 0.28s both;
}
.hand-list button:nth-child(1) { animation-delay: 0.04s; }
.hand-list button:nth-child(2) { animation-delay: 0.08s; }
.hand-list button:nth-child(3) { animation-delay: 0.12s; }
.hand-list button:nth-child(4) { animation-delay: 0.16s; }
.hand-list button:nth-child(5) { animation-delay: 0.20s; }

/* ─── SCORE STRIP ───────────────────────────────────────────── */

.score-strip {
  background: linear-gradient(90deg,
    rgba(34, 197, 94, 0.18) 0%,
    rgba(99, 102, 241, 0.12) 50%,
    rgba(239, 68, 68, 0.18) 100%
  ) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: 14px !important;
  overflow: hidden;
  position: relative;
}
.score-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
  animation: shimmer 2.5s linear infinite;
  background-size: 800px 100%;
}
.score-strip strong {
  animation: scoreCount 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-block;
  position: relative;
}

/* ─── ROUND LOG ENTRIES ─────────────────────────────────────── */

.round-log span {
  animation: rowStagger 0.25s both;
  display: block;
}
.round-log span:nth-child(1) { animation-delay: 0.0s; }
.round-log span:nth-child(2) { animation-delay: 0.05s; }
.round-log span:nth-child(3) { animation-delay: 0.10s; }
.round-log span:nth-child(4) { animation-delay: 0.15s; }
.round-log span:nth-child(5) { animation-delay: 0.20s; }

/* ─── APR TICKER ────────────────────────────────────────────── */

.apr-row {
  transition: background 0.15s, transform 0.15s;
  position: relative;
  overflow: hidden;
}
.apr-row:hover {
  transform: translateX(4px);
  background: var(--ds-panel-elev) !important;
}
.apr-row strong {
  font-variant-numeric: tabular-nums;
  transition: color 0.3s, transform 0.3s;
}
.apr-row.tick-up strong {
  color: #22c55e !important;
  animation: numberFlip 0.35s ease both;
}
.apr-row.tick-down strong {
  color: #ef4444 !important;
  animation: numberFlip 0.35s ease both;
}

/* Live indicator dot next to APR values */
.apr-row::before {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-primary);
  animation: pulseDot 2.2s ease-in-out infinite;
  animation-delay: calc(var(--row-i, 0) * 0.3s);
}

/* ─── MATCH ROWS ────────────────────────────────────────────── */

.match-row {
  animation: rowStagger 0.26s both;
  transition: background 0.15s, transform 0.12s;
}
.match-row:hover { transform: translateX(3px); }
.match-row:nth-child(1) { animation-delay: 0.04s; }
.match-row:nth-child(2) { animation-delay: 0.08s; }
.match-row:nth-child(3) { animation-delay: 0.12s; }
.match-row:nth-child(4) { animation-delay: 0.16s; }
.match-row:nth-child(5) { animation-delay: 0.20s; }
.match-row:nth-child(6) { animation-delay: 0.24s; }

/* ─── LEADERBOARD ROWS ──────────────────────────────────────── */

.leader-row {
  animation: rowStagger 0.28s both;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
}
.leader-row:hover {
  transform: translateX(4px);
  background: var(--ds-panel-elev) !important;
  box-shadow: var(--ds-shadow-sm);
}
.leader-row:nth-child(1) { animation-delay: 0.05s; }
.leader-row:nth-child(2) { animation-delay: 0.10s; }
.leader-row:nth-child(3) { animation-delay: 0.15s; }
.leader-row:nth-child(4) { animation-delay: 0.20s; }
.leader-row:nth-child(5) { animation-delay: 0.25s; }
.leader-row:nth-child(1) .rank { color: #f3d46d !important; font-size: 20px; }
.leader-row:nth-child(2) .rank { color: #b4b6bf !important; font-size: 18px; }
.leader-row:nth-child(3) .rank { color: #f5b58d !important; font-size: 17px; }

/* ─── STATUS CARDS (DASHBOARD) ──────────────────────────────── */

.status-card {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease;
  cursor: default;
}
.status-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ds-shadow-md) !important;
}
.command-grid .status-card:nth-child(1) { animation: fadeUp 0.3s 0.06s both; }
.command-grid .status-card:nth-child(2) { animation: fadeUp 0.3s 0.12s both; }
.command-grid .status-card:nth-child(3) { animation: fadeUp 0.3s 0.18s both; }
.command-grid .status-card:nth-child(4) { animation: fadeUp 0.3s 0.24s both; }

/* ─── QUEST CARDS ───────────────────────────────────────────── */

.quest-card {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease;
  animation: fadeUp 0.32s both;
}
.quest-card:nth-child(1) { animation-delay: 0.06s; }
.quest-card:nth-child(2) { animation-delay: 0.12s; }
.quest-card:nth-child(3) { animation-delay: 0.18s; }
.quest-card:nth-child(4) { animation-delay: 0.24s; }
.quest-card:nth-child(5) { animation-delay: 0.30s; }
.quest-card:nth-child(6) { animation-delay: 0.36s; }
.quest-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ds-shadow-md) !important;
}
.quest-card.ready {
  animation: fadeUp 0.32s both, glowPulse 3s ease-in-out infinite 0.5s;
}

/* Quest rings bounce when claimed */
.quest-rings i.claimed {
  animation: bounceIn 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ─── MARKET CARDS ──────────────────────────────────────────── */

.market-card {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
  animation: fadeUp 0.34s both;
}
.market-card:nth-child(1) { animation-delay: 0.04s; }
.market-card:nth-child(2) { animation-delay: 0.08s; }
.market-card:nth-child(3) { animation-delay: 0.12s; }
.market-card:nth-child(4) { animation-delay: 0.16s; }
.market-card:nth-child(5) { animation-delay: 0.20s; }
.market-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15), 0 0 0 2px var(--ds-primary);
}

/* ─── PRIMARY ACTION BUTTON ─────────────────────────────────── */

.primary-action {
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.15s ease,
              background 0.2s ease;
  position: relative;
  overflow: hidden;
}
.primary-action::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%),
    rgba(255,255,255,0.35) 0%,
    transparent 65%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.primary-action:hover::after { opacity: 1; }
.primary-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4);
}
.primary-action:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: none;
}

.ghost-action {
  transition: background 0.15s, transform 0.15s, color 0.15s;
}
.ghost-action:hover { transform: translateY(-1px); }
.ghost-action:active { transform: scale(0.97); }

/* ─── TOAST ─────────────────────────────────────────────────── */

.toast {
  animation: none;
}
.toast.visible {
  animation: toastSlide 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─── MODAL ─────────────────────────────────────────────────── */

.modal-backdrop {
  transition: opacity 0.22s ease, backdrop-filter 0.22s ease;
}
.modal-backdrop:not([aria-hidden="true"]) {
  animation: fadeIn 0.22s ease both;
}
.modal {
  animation: bounceIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: transform 0.25s ease;
}

/* ─── SKELETON LOADER ───────────────────────────────────────── */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--ds-border-soft) 25%,
    var(--ds-panel-2) 50%,
    var(--ds-border-soft) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 10px;
  display: block;
}
.skeleton-card {
  height: 220px;
  border-radius: 20px;
}
.skeleton-row {
  height: 52px;
  border-radius: 10px;
  margin-bottom: 8px;
}
.skeleton-text {
  height: 16px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }

/* ─── PAGE PRELOADER ────────────────────────────────────────── */

#pageLoader {
  position: fixed;
  inset: 0;
  background: var(--ds-bg, #f5f6f1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#pageLoader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-logo {
  font-family: Fraunces, serif;
  font-size: 42px;
  font-weight: 800;
  color: var(--ds-primary, #22c55e);
  letter-spacing: -2px;
  animation: glowPulse 1.5s ease-in-out infinite;
}
.loader-ring {
  width: 44px;
  height: 44px;
  border: 3px solid var(--ds-border-soft, rgba(0,0,0,0.08));
  border-top-color: var(--ds-primary, #22c55e);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
.loader-sub {
  font-size: 13px;
  color: var(--ds-fg-muted, #767a85);
  letter-spacing: 1px;
  text-transform: uppercase;
  animation: fadeIn 1s ease;
}

/* ─── AI AGENT ORB ANIMATION ─────────────────────────────────── */

.agent-orb {
  animation: glowPulse 2s ease-in-out infinite;
  transition: transform 0.3s;
}
.agent-orb:hover { transform: scale(1.1); }

/* Orbit particles around agent orb */
.opponent-panel {
  position: relative;
}
.opponent-panel::before,
.opponent-panel::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.opponent-panel::before {
  width: 8px;
  height: 8px;
  background: var(--ds-primary);
  opacity: 0.6;
  top: 18px;
  left: 50%;
  animation: orbitSpin 4s linear infinite;
  transform-origin: 0 0;
}
.opponent-panel::after {
  width: 5px;
  height: 5px;
  background: var(--ds-accent, #8eb8ff);
  opacity: 0.5;
  top: 22px;
  left: 50%;
  animation: orbitSpin 6s linear infinite reverse;
  transform-origin: -20px 0;
}

/* ─── APR BARS ANIMATION ────────────────────────────────────── */

.apr-bar-fill {
  animation: slideInLeft 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--bar-i, 0) * 0.07s);
}

/* ─── STATS CARDS ────────────────────────────────────────────── */

.stats-cards > * {
  animation: bounceIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: transform 0.2s, box-shadow 0.2s;
}
.stats-cards > *:hover { transform: translateY(-4px); box-shadow: var(--ds-shadow-md) !important; }
.stats-cards > *:nth-child(1) { animation-delay: 0.05s; }
.stats-cards > *:nth-child(2) { animation-delay: 0.12s; }
.stats-cards > *:nth-child(3) { animation-delay: 0.19s; }
.stats-cards > *:nth-child(4) { animation-delay: 0.26s; }

/* ─── WALLET TX ROWS ─────────────────────────────────────────── */

.tx-row {
  animation: rowStagger 0.26s both;
  transition: background 0.15s;
}
.tx-row:nth-child(1) { animation-delay: 0.04s; }
.tx-row:nth-child(2) { animation-delay: 0.09s; }
.tx-row:nth-child(3) { animation-delay: 0.14s; }
.tx-row:nth-child(4) { animation-delay: 0.19s; }

/* ─── THEME TOGGLE BUTTON ────────────────────────────────────── */

.theme-toggle {
  transition: background 0.2s, transform 0.15s;
}
.theme-toggle:hover { transform: rotate(8deg) scale(1.05); }
.theme-toggle:active { transform: scale(0.92); }

/* ─── DUEL SETUP STATS ───────────────────────────────────────── */

.match-stats article {
  animation: fadeUp 0.3s both;
  transition: background 0.15s, transform 0.15s;
}
.match-stats article:hover { transform: translateY(-2px); }
.match-stats article:nth-child(1) { animation-delay: 0.04s; }
.match-stats article:nth-child(2) { animation-delay: 0.08s; }
.match-stats article:nth-child(3) { animation-delay: 0.12s; }
.match-stats article:nth-child(4) { animation-delay: 0.16s; }

/* ─── LIVE SCAN LINE on DUEL ARENA ──────────────────────────── */

.duel-arena {
  position: relative;
  overflow: hidden;
}
.duel-arena::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(74, 222, 128, 0.4) 30%,
    rgba(74, 222, 128, 0.8) 50%,
    rgba(74, 222, 128, 0.4) 70%,
    transparent 100%
  );
  animation: scanLine 4s linear infinite;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}
.duel-arena.muted-panel::before { opacity: 0.15; }

/* ─── CARD-HAND (DASHBOARD DOCK) ─────────────────────────────── */

.card-hand .game-card {
  animation: fadeUp 0.35s both;
}
.card-hand .game-card:nth-child(1) { animation-delay: 0.06s; }
.card-hand .game-card:nth-child(2) { animation-delay: 0.12s; }
.card-hand .game-card:nth-child(3) { animation-delay: 0.18s; }
.card-hand .game-card:nth-child(4) { animation-delay: 0.24s; }
.card-hand .game-card:nth-child(5) { animation-delay: 0.30s; }

/* ─── WALLET CONNECT BUTTON ──────────────────────────────────── */

.wallet-cta {
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
  position: relative;
  overflow: hidden;
}
.wallet-cta:not(.connected):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.35);
}
.wallet-cta.connected {
  animation: glowPulse 3s ease-in-out infinite;
}

/* ─── BRAND MARK ─────────────────────────────────────────────── */

.brand-mark {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brand-mark:hover { transform: scale(1.12) rotate(4deg); }

/* ─── DUEL PRIZE POOL PULSE ──────────────────────────────────── */

#prizePool {
  display: inline-block;
}

/* ─── VERSUS BADGE ───────────────────────────────────────────── */

.versus, b.versus-text, .versus-lane > b {
  animation: glowPulse 2s ease-in-out infinite;
  font-variant-numeric: tabular-nums;
}

/* ─── ENHANCED BLOCK SEPARATION ──────────────────────────────── */

/* Every panel-block gets a colored top accent based on view context */
#dashboardView .panel-block:first-child { border-top: 3px solid var(--ds-primary) !important; }
#duelView .panel-block { border-top: 3px solid var(--ds-accent, #8eb8ff) !important; }
#questsView .panel-block { border-top: 3px solid var(--ds-warn) !important; }
#deckView .panel-block { border-top: 3px solid var(--ds-lilac, #c6a5ef) !important; }
#marketView .panel-block { border-top: 3px solid var(--ds-peach, #f5b58d) !important; }
#leaderboardView .panel-block { border-top: 3px solid var(--ds-gold, #f3d46d) !important; }
#statsView .panel-block { border-top: 3px solid var(--ds-mint, #bfe6dc) !important; }
#walletView .panel-block { border-top: 3px solid var(--ds-primary) !important; }

/* Section kicker top line — stronger left rule */
.section-kicker {
  position: relative;
  padding-left: 14px !important;
}
.section-kicker::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  min-height: 16px;
  background: var(--ds-primary);
  border-radius: 4px;
}

/* ─── DARK THEME SPECIFIC SURFACE POLISH ────────────────────── */

body[data-theme="dark"] .panel-block {
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, var(--ds-shadow-sm) !important;
}
body[data-theme="dark"] .status-card {
  background: linear-gradient(135deg, var(--ds-panel) 0%, var(--ds-panel-2) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
}
body[data-theme="dark"] .game-card {
  background: linear-gradient(150deg, var(--ds-panel-elev) 0%, var(--ds-panel) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
body[data-theme="dark"] .quest-card {
  background: linear-gradient(135deg, var(--ds-panel-elev) 0%, var(--ds-panel) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body[data-theme="dark"] .market-card {
  background: linear-gradient(135deg, var(--ds-panel-elev) 0%, var(--ds-panel) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body[data-theme="dark"] .leader-row {
  background: linear-gradient(90deg, var(--ds-panel) 0%, var(--ds-panel-2) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* ─── LIGHT THEME SURFACE HIERARCHY ─────────────────────────── */

/* hand-panel and duel-arena have their own custom dark/gradient backgrounds — exclude them */
body:not([data-theme="dark"]) .panel-block:not(.hand-panel):not(.duel-arena) {
  background: #ffffff !important;
  border: 1px solid rgba(17, 17, 29, 0.09) !important;
  box-shadow: 0 2px 12px rgba(17, 17, 29, 0.06), 0 1px 0 rgba(17, 17, 29, 0.04) !important;
}

/* Ensure hand-panel keeps its dark card feel in light theme */
body:not([data-theme="dark"]) .hand-panel {
  background: #17131b !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Ensure duel-arena section-kicker text is readable in light theme */
body:not([data-theme="dark"]) .duel-arena .section-kicker span {
  color: var(--ds-fg-muted, #4b4f5a) !important;
}
body:not([data-theme="dark"]) .duel-arena .section-kicker span:first-child {
  color: var(--ds-fg, #11111d) !important;
  font-weight: 700;
}
body:not([data-theme="dark"]) .status-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8faf6 100%) !important;
  border: 1px solid rgba(17, 17, 29, 0.08) !important;
}
body:not([data-theme="dark"]) .game-card {
  background: linear-gradient(150deg, #ffffff 0%, #fafaf8 100%) !important;
  border: 1px solid rgba(17, 17, 29, 0.08) !important;
}
body:not([data-theme="dark"]) .quest-card {
  background: #ffffff !important;
  border: 1px solid rgba(17, 17, 29, 0.08) !important;
}
body:not([data-theme="dark"]) .market-card {
  background: #ffffff !important;
  border: 1px solid rgba(17, 17, 29, 0.08) !important;
}

/* ─── DECK FILTER BUTTONS ────────────────────────────────────── */

.deck-filters button {
  transition: background 0.15s, color 0.15s, transform 0.12s;
}
.deck-filters button:hover { transform: translateY(-1px); }
.deck-filters button.active { animation: bounceIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ─── SEARCH INPUT ───────────────────────────────────────────── */

.search-box input {
  transition: box-shadow 0.2s ease, border-color 0.2s ease, width 0.3s ease;
}
.search-box input:focus {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2) !important;
  border-color: var(--ds-primary) !important;
}

/* ─── REDUCE MOTION SUPPORT ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}