:root {
  /* === "Hamster on Base" palette ===
     Twilight blockchain meadow: Base-blue sky, midnight horizon, NIBO-gold
     accents. Variable names match their values again so any rule that says
     `var(--base-blue)` actually paints in Base brand blue (#0052FF). */
  --base-blue: #0052ff;        /* Base Chain brand blue                        */
  --base-blue-light: #3b82f6;  /* lighter Base accent                          */
  --base-blue-deep: #0033b0;   /* deep Base                                    */
  --base-cyan: #22d3ee;        /* aurora / electric highlight                  */
  --base-cyan-soft: #7dd3fc;   /* soft cyan glow                               */
  --base-violet: #a78bfa;      /* web3 violet                                  */
  --bg: #050b20;               /* near-black midnight                          */
  --bg-2: #0a1530;             /* mid midnight                                 */
  --primary: #3b82f6;          /* primary action blue                          */
  --accent: #60a5fa;           /* accent sky-blue                              */
  --gold: #fbbf24;             /* NIBO coin gold (keeps perfectly on blue)     */
  --text: #e8efff;             /* cool cream / blue-white                      */
  --muted: #8fa3c7;            /* steely blue-gray                             */
  --card: rgba(15, 30, 70, 0.55);
  --border: rgba(96, 165, 250, 0.30);
  --danger: #ff5c6c;
  --green: #34d399;            /* keep for "online / live" pings               */
  /* NIBO accents preserved for the warm hamster character on dark bg. */
  --wheat: #f5d76e;
  --wheat-deep: #c89b2c;
  --soil: #1b2956;             /* repurposed: deep navy-violet for stems       */
  --soil-light: #2a3d7a;       /* mid-blue muted                               */
  --petal-pink: #ffb3c1;       /* moonlit flower petal                         */
  --sky-warm: #7dd3fc;         /* aurora sky highlight                         */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  background: #050b20;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto,
    sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ==========================================================
   "HAMSTER ON BASE" BACKGROUND
   Twilight blockchain meadow: aurora sky → Base-blue band →
   midnight horizon → moonlit garden silhouette at the bottom.
   ========================================================== */
.bg-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    /* aurora cyan glow up top — the "Base sun" */
    radial-gradient(ellipse 130% 42% at 50% -10%,
      rgba(34, 211, 238, 0.55), transparent 70%),
    /* deep Base-blue mid-sky bloom */
    radial-gradient(ellipse 110% 35% at 50% 38%,
      rgba(0, 82, 255, 0.55), transparent 65%),
    /* far moonlit hills shadow at the horizon */
    radial-gradient(ellipse 140% 22% at 50% 70%,
      rgba(15, 30, 70, 0.55), transparent 65%),
    /* base sky gradient: midnight → deep base → Base blue → midnight burrow */
    linear-gradient(180deg,
      #050a1f 0%,    /* deep midnight zenith */
      #0a1740 14%,   /* dusk navy */
      #0e2b80 30%,   /* deep Base */
      #0052ff 48%,   /* BASE blue band */
      #1d3aa8 64%,   /* deepening dusk */
      #0a1538 82%,   /* horizon midnight */
      #04081a 100%); /* hamster burrow */
}

/* Blockchain wireframe — a faint isometric triangular grid that reads
   as a hex network across the sky band. Drifts slowly to feel "alive". */
.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    /* dot grid — "nodes" */
    radial-gradient(circle at 1px 1px,
      rgba(125, 211, 252, 0.22) 1px, transparent 1.6px),
    /* three-direction line grid → triangular / hex feel */
    repeating-linear-gradient(60deg,
      transparent 0 39px, rgba(96, 165, 250, 0.08) 39px 40px),
    repeating-linear-gradient(-60deg,
      transparent 0 39px, rgba(96, 165, 250, 0.08) 39px 40px),
    repeating-linear-gradient(0deg,
      transparent 0 39px, rgba(96, 165, 250, 0.05) 39px 40px);
  background-size: 32px 32px, auto, auto, auto;
  mask-image: linear-gradient(180deg,
    transparent 0%, black 18%, black 70%, transparent 92%);
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%, black 18%, black 70%, transparent 92%);
  animation: gridDrift 90s linear infinite;
  opacity: 0.7;
}

@keyframes gridDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 32px 32px, 80px 0, -80px 0, 0 80px; }
}

.bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.65;
  mix-blend-mode: screen;
  will-change: transform;
}

/* Cyan aurora (top-left) — the "Base sun rising" */
.bg-glow--a { width: 560px; height: 560px;
  background: radial-gradient(circle, #7dd3fc 0%, #22d3ee 35%, transparent 70%);
  top: -180px; left: -140px;
  animation: floatGlow 18s ease-in-out infinite; }

/* Deep Base-blue glow (bottom-right) — the burrow's blockchain heartbeat */
.bg-glow--b { width: 620px; height: 620px;
  background: radial-gradient(circle, #3b82f6 0%, #0052ff 30%, transparent 65%);
  bottom: -200px; right: -180px; opacity: 0.55;
  animation: floatGlow 22s ease-in-out infinite reverse; }

/* Soft web3 violet halo (mid) */
.bg-glow--c { width: 420px; height: 420px;
  background: radial-gradient(circle, #c4b5fd 0%, #a78bfa 35%, transparent 65%);
  top: 38%; left: 55%; opacity: 0.38;
  animation: floatGlow 26s ease-in-out infinite;
  animation-delay: -8s; }

@keyframes floatGlow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.08); }
  66% { transform: translate(-30px, 40px) scale(0.95); }
}

.bg-particles { position: absolute; inset: 0; }

/* Floating crypto particles — blue glowing orbs drifting upward, with the
   occasional NIBO-gold coin sparkle so the hamster character peeks through. */
.bg-particles span {
  position: absolute; width: 8px; height: 8px;
  background: radial-gradient(circle,
    #ffffff 0%, #7dd3fc 35%, #0052ff 100%);
  border-radius: 50%;
  box-shadow:
    0 0 8px rgba(125, 211, 252, 0.85),
    0 0 18px rgba(0, 82, 255, 0.55);
  opacity: 0; animation: rise linear infinite;
}
/* Every 4th particle becomes a NIBO-gold coin sparkle for warmth. */
.bg-particles span:nth-child(4n) {
  background: radial-gradient(circle,
    #fff3b8 0%, #fbbf24 40%, #c89b2c 100%);
  box-shadow:
    0 0 8px rgba(251, 191, 36, 0.85),
    0 0 18px rgba(245, 176, 32, 0.55);
}
/* Every 5th particle → soft cyan, smaller & quieter (network "blip"). */
.bg-particles span:nth-child(5n) {
  background: radial-gradient(circle,
    #e0f2fe 0%, #22d3ee 50%, transparent 100%);
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.7);
}

.bg-particles span:nth-child(1)  { left:  5%; animation-duration: 14s; animation-delay:  0s; }
.bg-particles span:nth-child(2)  { left: 12%; animation-duration: 18s; animation-delay: -3s; }
.bg-particles span:nth-child(3)  { left: 22%; animation-duration: 16s; animation-delay: -7s; width: 4px; height: 4px; }
.bg-particles span:nth-child(4)  { left: 30%; animation-duration: 20s; animation-delay: -2s; }
.bg-particles span:nth-child(5)  { left: 38%; animation-duration: 12s; animation-delay: -5s; width: 8px; height: 8px; }
.bg-particles span:nth-child(6)  { left: 46%; animation-duration: 22s; animation-delay: -9s; }
.bg-particles span:nth-child(7)  { left: 55%; animation-duration: 15s; animation-delay: -1s; width: 4px; height: 4px; }
.bg-particles span:nth-child(8)  { left: 62%; animation-duration: 19s; animation-delay: -6s; }
.bg-particles span:nth-child(9)  { left: 70%; animation-duration: 17s; animation-delay: -11s; }
.bg-particles span:nth-child(10) { left: 78%; animation-duration: 21s; animation-delay: -4s; width: 5px; height: 5px; }
.bg-particles span:nth-child(11) { left: 85%; animation-duration: 13s; animation-delay: -8s; }
.bg-particles span:nth-child(12) { left: 92%; animation-duration: 18s; animation-delay: -10s; width: 7px; height: 7px; }
.bg-particles span:nth-child(13) { left: 18%; animation-duration: 24s; animation-delay: -12s; width: 3px; height: 3px; }
.bg-particles span:nth-child(14) { left: 67%; animation-duration: 26s; animation-delay: -14s; width: 3px; height: 3px; }
.bg-particles span:nth-child(15) { left: 50%; animation-duration: 28s; animation-delay: -16s; width: 5px; height: 5px; }

@keyframes rise {
  0%   { transform: translateY(110vh) scale(0.6); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.7; }
  100% { transform: translateY(-10vh) scale(1.1); opacity: 0; }
}

.bg-base-mark {
  position: absolute; bottom: 14px; right: 16px;
  z-index: 2;                                     /* sit above .bg-stage::after flora */
  display: flex; align-items: center; gap: 8px;
  color: var(--base-cyan-soft);
  font-size: 11px; letter-spacing: 1.5px;
  font-weight: 600;
  text-transform: uppercase; opacity: 0.95;
  /* Tiny dark chip so the mark stays legible when flora drifts beneath it
     (especially on short mobile viewports). Subtle — feels like a glass pill. */
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(5, 11, 32, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(34, 211, 238, 0.18);
  text-shadow:
    0 0 8px rgba(34, 211, 238, 0.4),
    0 1px 0 rgba(0, 0, 0, 0.5);
}

.bg-base-mark svg { width: 16px; height: 16px; filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.6)); }

/* ==========================================================
   MOONLIT GARDEN OVERLAY — bottom row of glowing flowers/coins
   on dark Base-blue stems (the hamster's burrow garden).
   ========================================================== */
.bg-stage::before,
.bg-stage::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  background-repeat: repeat-x;
  background-size: auto 100%;
  opacity: 0.95;
  animation: gardenSway 14s ease-in-out infinite;
}
/* Foreground row: glowing flowers + NIBO-coin sparks on dark stems.
   Bright petals on dark background = "moonlit garden". Stems are deep
   navy (--soil) instead of green so they read as silhouettes. */
.bg-stage::after {
  bottom: 4%;
  height: 130px;
  background-image:
    radial-gradient(circle at 6%  85%, #ff7aa2 0 6px, transparent 7px),
    radial-gradient(circle at 6%  82%, #1b2956 0 3px, transparent 4px),
    radial-gradient(circle at 18% 78%, #fbbf24 0 7px, transparent 8px),
    radial-gradient(circle at 18% 72%, #1b2956 0 3px, transparent 4px),
    radial-gradient(circle at 30% 88%, #7dd3fc 0 5px, transparent 6px),
    radial-gradient(circle at 42% 82%, #a78bfa 0 6px, transparent 7px),
    radial-gradient(circle at 54% 90%, #ff8a5b 0 6px, transparent 7px),
    radial-gradient(circle at 66% 76%, #fbbf24 0 7px, transparent 8px),
    radial-gradient(circle at 78% 86%, #ff7aa2 0 5px, transparent 6px),
    radial-gradient(circle at 90% 80%, #22d3ee 0 6px, transparent 7px),
    /* slim stems under each flower — deep navy silhouette */
    linear-gradient(180deg, transparent 0 70%, #0a1538 70% 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
                   100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
                   100% 100%;
  animation-delay: -2s;
  filter:
    drop-shadow(0 0 6px rgba(96, 165, 250, 0.45))
    drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35));
}
/* Mid row: scattered glowing crypto sparks drifting on the Base sky */
.bg-stage::before {
  top: 30%;
  height: 90px;
  opacity: 0.65;
  background-image:
    radial-gradient(ellipse 4px 7px at 8%  40%, #7dd3fc 0 100%, transparent 0),
    radial-gradient(ellipse 4px 7px at 22% 65%, #fbbf24 0 100%, transparent 0),
    radial-gradient(ellipse 4px 7px at 36% 30%, #60a5fa 0 100%, transparent 0),
    radial-gradient(ellipse 4px 7px at 50% 70%, #a78bfa 0 100%, transparent 0),
    radial-gradient(ellipse 4px 7px at 64% 45%, #7dd3fc 0 100%, transparent 0),
    radial-gradient(ellipse 4px 7px at 78% 60%, #fbbf24 0 100%, transparent 0),
    radial-gradient(ellipse 4px 7px at 92% 35%, #60a5fa 0 100%, transparent 0);
  filter: drop-shadow(0 0 6px rgba(125, 211, 252, 0.6));
  animation-delay: -6s;
}
@keyframes gardenSway {
  0%, 100% { transform: translateX(0px); }
  50%      { transform: translateX(8px); }
}

/* ==========================================================
   LAYOUT
   ========================================================== */
.screen {
  position: relative;
  z-index: 1;
  padding: 20px;
  max-width: 720px;
  margin: 0 auto;
}

.hidden { display: none !important; }

/* Login */
#login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-card {
  background: linear-gradient(180deg,
    rgba(15, 30, 70, 0.55) 0%,
    rgba(8, 18, 45, 0.65) 100%);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px 28px;
  text-align: center;
  width: 100%;
  max-width: 420px;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    0 30px 80px -20px rgba(0, 20, 60, 0.6),
    0 0 0 1px rgba(96, 165, 250, 0.08) inset,
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.logo {
  width: 110px; height: 110px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle, rgba(0, 82, 255, 0.55), transparent 70%);
  filter: drop-shadow(0 0 30px rgba(59, 130, 246, 0.7));
  animation: pulseLogo 3.4s ease-in-out infinite;
}

.logo img {
  width: 110px; height: 110px;
  border-radius: 50%; object-fit: cover; display: block;
}

@keyframes pulseLogo {
  0%, 100% { filter: drop-shadow(0 0 24px rgba(59, 130, 246, 0.55)); }
  50%      { filter: drop-shadow(0 0 40px rgba(96, 165, 250, 0.95)); }
}

.login-card h1 {
  font-size: 32px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #ffffff 0%, var(--base-blue-light) 60%, var(--base-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}

.tagline {
  color: var(--muted);
  margin-bottom: 28px;
  line-height: 1.5;
}

#login-form {
  display: flex; flex-direction: column; gap: 12px;
}

#login-form input {
  background: rgba(15, 30, 70, 0.55);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--text);
  font-size: 16px;
  outline: none;
  text-align: center;
  font-family: inherit;
}

#login-form input::placeholder { color: rgba(143, 163, 199, 0.65); }
#login-form input:focus {
  border-color: var(--base-blue-light);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

#login-form button,
.primary-btn,
.secondary-btn {
  border: none;
  border-radius: 12px;
  padding: 14px 16px;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s, background 0.2s;
  font-family: inherit;
  width: 100%;
}

.primary-btn {
  background: linear-gradient(135deg, var(--base-blue) 0%, var(--base-blue-light) 100%);
  color: #ffffff;
  box-shadow:
    0 8px 24px -8px rgba(0, 82, 255, 0.7),
    0 0 0 1px rgba(96, 165, 250, 0.4) inset;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.primary-btn:hover:not(:disabled) {
  box-shadow:
    0 12px 32px -8px rgba(0, 82, 255, 0.85),
    0 0 0 1px rgba(96, 165, 250, 0.5) inset;
}

.primary-btn:active:not(:disabled) { transform: scale(0.97); }
.primary-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.secondary-btn {
  background: rgba(96, 165, 250, 0.1);
  color: var(--text);
  border: 1px solid var(--border);
}

.secondary-btn:hover { background: rgba(96, 165, 250, 0.18); }
.secondary-btn:active { transform: scale(0.97); }

.ghost-btn {
  background: rgba(96, 165, 250, 0.06);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}

.ghost-btn:hover { background: rgba(96, 165, 250, 0.15); color: var(--text); }
.ghost-btn.small { padding: 6px 10px; font-size: 12px; }

.wallet-hint {
  color: var(--muted); font-size: 12px;
  margin-top: 8px; margin-bottom: 4px;
}

.divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 14px;
  color: var(--muted); font-size: 12px;
  text-transform: uppercase; letter-spacing: 1px;
}

.divider::before,
.divider::after {
  content: ""; flex: 1; height: 1px;
  background: rgba(96, 165, 250, 0.2);
}

.hint {
  color: var(--muted); font-size: 13px;
  margin-top: 18px; line-height: 1.5;
}

.hint strong { color: var(--text); }

.error {
  color: var(--danger);
  margin-top: 12px;
  min-height: 20px;
  font-size: 14px;
}

/* ==========================================================
   PLAYER CARD (header) — rich garden-themed dashboard
   ========================================================== */
#game header.player-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 0% 0%,   rgba(255, 200, 80, 0.18), transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(59, 130, 246, 0.22), transparent 55%),
    linear-gradient(180deg, rgba(15, 30, 70, 0.78) 0%, rgba(6, 16, 40, 0.85) 100%);
  border: 1px solid rgba(96, 165, 250, 0.32);
  border-radius: 20px;
  padding: 16px 18px;
  margin-bottom: 18px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    0 16px 50px -20px rgba(0, 20, 60, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
#game header.player-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(95deg,
    transparent 0 18px,
    rgba(255, 235, 150, 0.04) 18px 19px);
  pointer-events: none;
  border-radius: inherit;
}

/* ---- Top row : avatar + identity + logout ---- */
.pc-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.pc-avatar {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: visible;
  flex-shrink: 0;
}
.pc-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255, 215, 100, 0.65);
  background: radial-gradient(circle at 30% 30%, rgba(255,235,150,0.35), rgba(40,70,25,0.7));
  box-shadow:
    0 0 22px rgba(255, 200, 80, 0.4),
    inset 0 -8px 16px rgba(0, 0, 0, 0.25);
  display: block;
}
.pc-avatar-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(255, 215, 100, 0.4);
  pointer-events: none;
  animation: pcRingPulse 3s ease-in-out infinite;
}
@keyframes pcRingPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.08); }
}
.pc-avatar-tier {
  position: absolute;
  bottom: -4px; right: -6px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd870, #c89b2c);
  color: #2a1d05;
  font-weight: 800;
  font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid rgba(8, 18, 45, 0.95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  font-variant-numeric: tabular-nums;
  z-index: 2;
}

.pc-id {
  min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.pc-name-row {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
#player-name {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.2px;
  color: #fff8e7;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.badge {
  background: rgba(59, 130, 246, 0.22);
  border: 1px solid rgba(96, 165, 250, 0.45);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #7dd3fc;
  flex-shrink: 0;
  white-space: nowrap;
}
.badge.verified {
  background: rgba(251, 191, 36, 0.20);
  border-color: rgba(251, 191, 36, 0.5);
  color: var(--gold);
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}
.pc-tier-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px;
  color: rgba(255, 235, 180, 0.85);
  min-width: 0;
}
.pc-tier-icon {
  font-size: 13px;
  filter: drop-shadow(0 0 6px rgba(255, 215, 100, 0.6));
}
#pc-tier-label {
  font-weight: 600;
  background: linear-gradient(90deg, #ffe4a0, #c89b2c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}

#logout-btn {
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}
#logout-btn:hover {
  background: rgba(96, 165, 250, 0.22);
  border-color: rgba(96, 165, 250, 0.55);
}

/* ---- Stat tiles row ---- */
.pc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  position: relative;
  z-index: 1;
}
.pc-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s;
  min-width: 0;
}
.pc-stat:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6);
}
.pcs-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.pcs-body {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.1;
}
.pcs-value {
  font-size: 18px; font-weight: 800;
  color: #fff8e7;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
#score.pcs-value {
  font-size: 19px;
  color: #ffd870;
  text-shadow: 0 0 14px rgba(255, 200, 80, 0.5);
}
.pcs-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255, 235, 180, 0.55);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* Per-tile colour accents */
.pc-stat--coins {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255, 215, 100, 0.20), transparent 60%),
    linear-gradient(180deg, rgba(255, 200, 80, 0.08), rgba(0, 0, 0, 0.20));
  border-color: rgba(255, 215, 100, 0.32);
}
.pc-stat--cps {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(59, 130, 246, 0.24), transparent 60%),
    linear-gradient(180deg, rgba(59, 130, 246, 0.08), rgba(0, 0, 0, 0.20));
  border-color: rgba(59, 130, 246, 0.32);
}
.pc-stat--gardens {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(225, 130, 175, 0.20), transparent 60%),
    linear-gradient(180deg, rgba(225, 130, 175, 0.06), rgba(0, 0, 0, 0.20));
  border-color: rgba(225, 130, 175, 0.30);
}
.pc-stat--gardens .pcs-value { color: #ffc8e2; }
.pc-stat--accessories {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(180, 140, 100, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(180, 140, 100, 0.08), rgba(0, 0, 0, 0.20));
  border-color: rgba(180, 140, 100, 0.32);
}
.pc-stat--accessories .pcs-value { color: #f0d8a8; }

/* CPS pill — keep `.active` highlight but make it a flat number inside the tile */
.cps-pill {
  display: inline-block;
  color: rgba(255, 235, 180, 0.55);
  transition: color 0.3s, text-shadow 0.3s;
}
.pc-stat--cps .cps-pill {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  color: #7dd3fc;
}
.pc-stat--cps .cps-pill.active {
  color: #22d3ee;
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.55);
}

/* Mobile : 2-column stat grid */
@media (max-width: 540px) {
  #game header.player-card { padding: 14px 14px; gap: 12px; }
  .pc-stats { grid-template-columns: 1fr 1fr; }
  .pc-avatar { width: 46px; height: 46px; }
  .pc-avatar-tier { min-width: 18px; height: 18px; font-size: 10px; bottom: -3px; right: -4px; }
  #player-name { font-size: 15px; }
  .pcs-value, #score.pcs-value { font-size: 16px; }
  .pcs-icon { font-size: 19px; }
  #logout-btn { padding: 7px 10px; font-size: 12px; }
}

/* ==========================================================
   HAMSTER BUTTON + 3D HABITAT
   ========================================================== */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 0 50px;
}

/* ----- 3D HAMSTER HABITAT (wood cage + bedding + props) -----
   A pure-CSS scene around the hamster: warm wood back wall, tilted
   plank floor, bedding chips, grass tufts, fence pickets and floating
   habitat props (seeds, leaf, carrot, water drop, flower).            */
.habitat {
  position: relative;
  width: min(560px, 92vw);
  height: 460px;
  margin: 0 auto;
  perspective: 1100px;
  perspective-origin: 50% 35%;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.45));
}

/* Warm overhead sunlight pouring into the cage */
.habitat-sky {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%,
      rgba(255, 215, 130, 0.32) 0%,
      rgba(255, 180, 90, 0.10) 38%,
      transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 110%,
      rgba(255, 230, 150, 0.35), transparent 70%);
  pointer-events: none;
}

/* Wood plank BACK WALL (vertical planks with grain) */
.habitat-back {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 4%;
  height: 58%;
  border-radius: 14px 14px 6px 6px;
  background:
    /* darker shading top */
    linear-gradient(180deg,
      rgba(20, 10, 4, 0.55) 0%,
      transparent 22%,
      transparent 70%,
      rgba(0, 0, 0, 0.55) 100%),
    /* vertical plank seams */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.32) 0px, rgba(0,0,0,0.32) 1px,
      transparent 1px,    transparent 56px,
      rgba(0,0,0,0.42) 56px, rgba(0,0,0,0.42) 58px,
      transparent 58px,   transparent 112px),
    /* wood grain knots */
    radial-gradient(ellipse 14px 5px at 22% 30%, rgba(50,25,10,0.55), transparent 70%),
    radial-gradient(ellipse 10px 4px at 70% 55%, rgba(40,20,8,0.55), transparent 70%),
    radial-gradient(ellipse 8px 3px at 45% 75%,  rgba(60,30,12,0.45), transparent 70%),
    /* base wood colour */
    linear-gradient(180deg, #6f4226 0%, #8a5530 35%, #6b3f24 100%);
  box-shadow:
    inset 0 -6px 12px rgba(0,0,0,0.4),
    inset 0 4px 10px rgba(255,200,150,0.18);
  transform: translateZ(-160px) rotateX(2deg);
  transform-style: preserve-3d;
}

/* A small window / vent on the back wall (warm light through it) */
.habitat-back .hb-window {
  position: absolute;
  top: 18%;
  left: 18%;
  width: 64px;
  height: 44px;
  border-radius: 6px;
  background:
    radial-gradient(ellipse at 50% 50%, #fff8d6 0%, #ffd47a 40%, #c97c1f 80%);
  box-shadow:
    0 0 24px rgba(255, 200, 110, 0.7),
    inset 0 0 0 3px rgba(35,18,6,0.85),
    inset 0 0 0 4px rgba(255, 220, 150, 0.4);
}
.habitat-back .hb-window::before,
.habitat-back .hb-window::after {
  content: "";
  position: absolute;
  background: rgba(35,18,6,0.85);
}
.habitat-back .hb-window::before { left: 50%; top: 0; width: 3px; height: 100%; transform: translateX(-50%); }
.habitat-back .hb-window::after  { top: 50%; left: 0; width: 100%; height: 3px; transform: translateY(-50%); }

/* A wood shelf bracket with hanging water-bottle silhouette */
.habitat-back .hb-shelf {
  position: absolute;
  top: 28%;
  right: 14%;
  width: 92px;
  height: 8px;
  background: linear-gradient(180deg, #5a341c 0%, #3a2110 100%);
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.habitat-back .hb-shelf::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 18px;
  width: 14px;
  height: 38px;
  border-radius: 3px 3px 6px 6px;
  background:
    linear-gradient(180deg, rgba(255,245,200,0.9) 0%, rgba(245,215,110,0.8) 80%, #c89b2c 100%);
  box-shadow:
    inset 0 -6px 6px rgba(255,255,255,0.5),
    0 2px 4px rgba(0,0,0,0.4);
}

/* WOOD PLANK FLOOR — tilted with perspective so it goes back into the cage */
.habitat-floor {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 130%;
  height: 280px;
  transform: translateX(-50%) rotateX(64deg);
  transform-origin: 50% 100%;
  border-radius: 50% / 14%;
  background:
    /* edge vignette */
    radial-gradient(ellipse 70% 80% at 50% 35%, transparent 30%, rgba(0,0,0,0.6) 95%),
    /* horizontal plank seams */
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 38px,
      rgba(0,0,0,0.45) 38px, rgba(0,0,0,0.45) 40px),
    /* wood grain stripes */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.10) 0px, transparent 4px, rgba(0,0,0,0.10) 8px),
    /* base wood colour */
    linear-gradient(180deg, #4a2c14 0%, #6f4326 50%, #2e1a0a 100%);
  box-shadow:
    0 -12px 40px rgba(255, 200, 120, 0.18),
    inset 0 0 60px rgba(0, 0, 0, 0.5);
}

/* Bedding chips scattered on the floor */
.habitat-floor .hb-bedding {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    radial-gradient(ellipse 8px 3px at 12% 22%, #d4ad77 60%, transparent 70%),
    radial-gradient(ellipse 6px 2px at 28% 38%, #b8915a 60%, transparent 70%),
    radial-gradient(ellipse 9px 3px at 42% 18%, #c9a26b 60%, transparent 70%),
    radial-gradient(ellipse 5px 2px at 58% 30%, #a87f4c 60%, transparent 70%),
    radial-gradient(ellipse 7px 3px at 72% 44%, #d4ad77 60%, transparent 70%),
    radial-gradient(ellipse 6px 2px at 86% 26%, #b8915a 60%, transparent 70%),
    radial-gradient(ellipse 8px 3px at 18% 56%, #c9a26b 60%, transparent 70%),
    radial-gradient(ellipse 5px 2px at 36% 70%, #a87f4c 60%, transparent 70%),
    radial-gradient(ellipse 9px 3px at 52% 62%, #d4ad77 60%, transparent 70%),
    radial-gradient(ellipse 7px 3px at 68% 78%, #b8915a 60%, transparent 70%),
    radial-gradient(ellipse 6px 2px at 84% 66%, #c9a26b 60%, transparent 70%),
    radial-gradient(ellipse 8px 3px at 24% 86%, #a87f4c 60%, transparent 70%),
    radial-gradient(ellipse 7px 3px at 60% 90%, #d4ad77 60%, transparent 70%),
    radial-gradient(ellipse 9px 3px at 78% 88%, #c9a26b 60%, transparent 70%);
  opacity: 0.7;
  mix-blend-mode: screen;
}

/* Wood fence pickets along the front edge */
.habitat-fence {
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  height: 34px;
  display: flex;
  justify-content: space-between;
  padding: 0 6%;
  z-index: 4;
  pointer-events: none;
}
.habitat-fence span {
  display: block;
  width: 10px;
  height: 100%;
  background: linear-gradient(180deg, #6b3f24 0%, #4a2c14 100%);
  border-radius: 6px 6px 2px 2px;
  box-shadow:
    inset -2px 0 2px rgba(0,0,0,0.45),
    inset 2px 0 2px rgba(255,200,150,0.15),
    0 4px 6px rgba(0,0,0,0.45);
  position: relative;
}
.habitat-fence span::before {
  content: "";
  position: absolute;
  top: 60%;
  left: -50%;
  right: -50%;
  height: 4px;
  background: linear-gradient(180deg, #5a351c 0%, #3a2110 100%);
  border-radius: 2px;
  z-index: -1;
}

/* Tufts of grass — back layer (behind hamster), front layer (in front) */
.habitat-grass {
  position: absolute;
  left: 0;
  right: 0;
  height: 48px;
  pointer-events: none;
  background:
    /* repeating triangle blades (use clip via gradients) */
    repeating-linear-gradient(95deg,
      transparent 0px, transparent 8px,
      rgba(34, 197, 94, 0.55) 8px,
      rgba(74, 222, 128, 0.65) 9px,
      transparent 10px, transparent 18px,
      rgba(22, 163, 74, 0.6) 18px,
      rgba(34, 197, 94, 0.7) 19px,
      transparent 20px, transparent 26px),
    repeating-linear-gradient(85deg,
      transparent 0px, transparent 12px,
      rgba(74, 222, 128, 0.5) 12px,
      rgba(34, 197, 94, 0.55) 13px,
      transparent 14px, transparent 30px);
  mask-image: linear-gradient(180deg, transparent 0%, black 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 55%, transparent 100%);
}
.habitat-grass--back  { bottom: 152px; opacity: 0.55; filter: blur(0.5px); }
.habitat-grass--front { bottom: 18px;  opacity: 0.95; height: 60px; z-index: 5; }

/* Floating habitat props (seeds, leaf, carrot, water drop, flower) */
.habitat-props { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.prop {
  position: absolute;
  font-size: 30px;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.55));
  animation: propBob 6s ease-in-out infinite;
  user-select: none;
}
.prop--seed    { left: 8%;  bottom: 90px;  font-size: 26px; animation-delay: -1.2s; }
.prop--leaf    { right: 10%; top: 38%;     font-size: 32px; animation-delay: -3.4s; transform: rotate(18deg); }
.prop--carrot  { left: 14%; bottom: 130px; font-size: 28px; animation-delay: -2.1s; transform: rotate(-12deg); }
.prop--flower  { right: 14%; bottom: 110px; font-size: 30px; animation-delay: -4.0s; }
.prop--water   { left: 50%;  top: 14%;     font-size: 22px; animation-delay: -0.8s; transform: translateX(-50%); }
.prop--seed2   { right: 22%; bottom: 88px; font-size: 22px; animation-delay: -2.7s; }

@keyframes propBob {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-8px) rotate(calc(var(--r, 0deg) + 4deg)); }
}
.prop--leaf   { --r: 18deg; }
.prop--carrot { --r: -12deg; }

/* Floating dust motes — soft warm light particles */
.habitat-dust { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.habitat-dust span {
  position: absolute;
  width: 4px; height: 4px;
  background: rgba(255, 220, 160, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 220, 160, 0.7);
  opacity: 0;
  animation: dustDrift linear infinite;
}
.habitat-dust span:nth-child(1) { left: 10%; animation-duration: 11s; animation-delay: -1s; width: 3px; height: 3px; }
.habitat-dust span:nth-child(2) { left: 22%; animation-duration: 14s; animation-delay: -4s; }
.habitat-dust span:nth-child(3) { left: 35%; animation-duration: 9s;  animation-delay: -2s; width: 2px; height: 2px; }
.habitat-dust span:nth-child(4) { left: 48%; animation-duration: 13s; animation-delay: -7s; }
.habitat-dust span:nth-child(5) { left: 61%; animation-duration: 10s; animation-delay: -3s; width: 3px; height: 3px; }
.habitat-dust span:nth-child(6) { left: 74%; animation-duration: 12s; animation-delay: -5s; }
.habitat-dust span:nth-child(7) { left: 84%; animation-duration: 15s; animation-delay: -8s; width: 2px; height: 2px; }
.habitat-dust span:nth-child(8) { left: 92%; animation-duration: 11s; animation-delay: -6s; }

@keyframes dustDrift {
  0%   { transform: translateY(40px) translateX(0); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 0.85; }
  100% { transform: translateY(-340px) translateX(20px); opacity: 0; }
}

/* Make sure the hamster sits ON the habitat floor, in front of back layers */
.habitat .hamster-stage {
  position: absolute;
  left: 50%;
  bottom: 70px;
  transform: translateX(-50%);
  z-index: 7;
}

@media (max-width: 480px) {
  .habitat { height: 400px; width: 96vw; }
  .habitat .hamster-stage { bottom: 56px; }
  .prop { font-size: 22px; }
  .prop--seed,  .prop--seed2 { font-size: 18px; }
  .prop--leaf,  .prop--carrot { font-size: 24px; }
  .prop--flower { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .prop, .habitat-dust span { animation: none; }
}

#hamster-btn {
  position: relative;
  width: 280px;
  height: 280px;
  background: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  padding: 0;
  border-radius: 50%;
  transition: transform 0.06s ease;
  display: grid;
  place-items: center;
}

/* 3D rotating hamster — 4 sprite frames stacked, only active visible */
.hamster-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hamster-3d {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  perspective: 800px;
  filter: drop-shadow(0 18px 40px rgba(0, 82, 255, 0.55));
  transition: filter 0.2s ease;
}

.hsprite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.18s ease, transform 0.25s ease;
  user-select: none;
  -webkit-user-drag: none;
}

.hsprite.active {
  opacity: 1;
  transform: scale(1);
}

#hamster-btn:active .hamster-3d {
  filter: drop-shadow(0 6px 16px rgba(0, 82, 255, 0.7));
}

#hamster-btn.bounce .hsprite.active {
  animation: bounce 0.18s ease;
}

#hamster-btn.dragging {
  cursor: grabbing;
}
#hamster-btn.dragging .hsprite {
  transition: opacity 0.05s linear;
}

.spin-toggle {
  position: absolute;
  bottom: 8px;
  right: -8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(96, 165, 250, 0.55);
  background: rgba(2, 14, 50, 0.85);
  color: #e8f0c9;
  font-size: 18px;
  cursor: pointer;
  z-index: 5;
  display: grid;
  place-items: center;
  transition: transform 0.15s, background 0.15s;
  backdrop-filter: blur(6px);
}
.spin-toggle:hover { background: rgba(0, 82, 255, 0.35); }
.spin-toggle.paused .spin-ico { opacity: 0.4; }
.spin-toggle.paused {
  background: rgba(40, 40, 60, 0.65);
  border-color: rgba(255, 255, 255, 0.15);
}


.hamster-ring {
  position: absolute;
  inset: -14px;
  z-index: 1;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      rgba(96, 165, 250, 0.0) 0deg,
      rgba(96, 165, 250, 0.85) 90deg,
      rgba(0, 82, 255, 0.95) 180deg,
      rgba(96, 165, 250, 0.85) 270deg,
      rgba(96, 165, 250, 0.0) 360deg);
  filter: blur(14px);
  opacity: 0.85;
  animation: spinRing 6s linear infinite;
}

@keyframes spinRing { to { transform: rotate(360deg); } }

#hamster-btn::after {
  content: "";
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(0, 82, 255, 0.35) 0%,
    transparent 60%);
  filter: blur(18px);
  z-index: 0;
  animation: pulseGlow 2.4s ease-in-out infinite;
}

/* Crisp Base-blue tap target ring — sits just outside the hamster
   sprite to clearly signal "tap inside this circle" to new players.
   Pulses gently so it draws the eye without being distracting.
   z-index 5 keeps it above tier-specific ::after overlays (tier 16/19
   use z-index 4) so the boundary stays visible at every evolution. */
#hamster-btn::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 4px solid #0052FF;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.18) inset,
    0 0 24px rgba(0, 82, 255, 0.55),
    0 0 8px rgba(0, 82, 255, 0.85);
  z-index: 5;
  pointer-events: none;
  animation: tapRingPulse 2s ease-in-out infinite;
}

@keyframes tapRingPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.95;
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.18) inset,
      0 0 24px rgba(0, 82, 255, 0.55),
      0 0 8px rgba(0, 82, 255, 0.85);
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.22) inset,
      0 0 36px rgba(0, 82, 255, 0.85),
      0 0 14px rgba(0, 82, 255, 1);
  }
}

#hamster-btn:active::before {
  transform: scale(0.94);
  border-color: #4f8bff;
  transition: transform 0.06s ease;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.08); }
}

#hamster-btn:active { transform: scale(0.94); }
#hamster-btn:active img { filter: drop-shadow(0 6px 16px rgba(0, 82, 255, 0.7)); }

#hamster-btn.bounce img { animation: bounce 0.18s ease; }

@keyframes bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ==========================================================
   HAMSTER EVOLUTION TIERS (20 tiers, unlocked by total coins)
   - Tints the hamster sprite with hue-rotate / saturation / glow
   - Custom aura ring per tier
   - Higher tiers add animated overlays
   ========================================================== */

/* Tier 1 — Baby Hamster (default warm pink-brown) */
#hamster-btn[data-tier="1"] .hsprite {
  filter: drop-shadow(0 6px 14px rgba(255, 200, 180, 0.4));
}
#hamster-btn[data-tier="1"] .hamster-ring {
  background: conic-gradient(from 0deg,
    rgba(255, 200, 180, 0.0),
    rgba(255, 200, 180, 0.6),
    rgba(255, 220, 200, 0.7),
    rgba(255, 200, 180, 0.6),
    rgba(255, 200, 180, 0.0));
  opacity: 0.55;
}

/* Tier 2 — Wild Hamster (slight green tint) */
#hamster-btn[data-tier="2"] .hsprite {
  filter: hue-rotate(20deg) saturate(1.1)
          drop-shadow(0 6px 14px rgba(132, 204, 22, 0.45));
}
#hamster-btn[data-tier="2"] .hamster-ring {
  background: conic-gradient(from 0deg,
    transparent, rgba(132, 204, 22, 0.7),
    rgba(34, 197, 94, 0.85), rgba(132, 204, 22, 0.7), transparent);
}

/* Tier 3 — Field Hamster (yellow-green) */
#hamster-btn[data-tier="3"] .hsprite {
  filter: hue-rotate(40deg) saturate(1.2)
          drop-shadow(0 6px 16px rgba(234, 179, 8, 0.5));
}
#hamster-btn[data-tier="3"] .hamster-ring {
  background: conic-gradient(from 0deg,
    transparent, rgba(234, 179, 8, 0.7),
    rgba(132, 204, 22, 0.9), rgba(234, 179, 8, 0.7), transparent);
}

/* Tier 4 — Forest Hamster (deep green) */
#hamster-btn[data-tier="4"] .hsprite {
  filter: hue-rotate(75deg) saturate(1.3)
          drop-shadow(0 8px 18px rgba(22, 163, 74, 0.55));
}
#hamster-btn[data-tier="4"] .hamster-ring {
  background: conic-gradient(from 0deg,
    transparent, rgba(22, 163, 74, 0.8),
    rgba(5, 150, 105, 0.95), rgba(22, 163, 74, 0.8), transparent);
}

/* Tier 5 — Snow Hamster (pale white-blue) */
#hamster-btn[data-tier="5"] .hsprite {
  filter: hue-rotate(190deg) saturate(0.5) brightness(1.25)
          drop-shadow(0 8px 18px rgba(186, 230, 253, 0.7));
}
#hamster-btn[data-tier="5"] .hamster-ring {
  background: conic-gradient(from 0deg,
    transparent, rgba(186, 230, 253, 0.8),
    rgba(255, 255, 255, 0.95), rgba(186, 230, 253, 0.8), transparent);
  inset: -16px;
}

/* Tier 6 — Desert Hamster (sandy orange) */
#hamster-btn[data-tier="6"] .hsprite {
  filter: hue-rotate(25deg) saturate(1.6) brightness(1.05)
          drop-shadow(0 8px 18px rgba(249, 115, 22, 0.6));
}
#hamster-btn[data-tier="6"] .hamster-ring {
  background: conic-gradient(from 0deg,
    transparent, rgba(249, 115, 22, 0.8),
    rgba(217, 119, 6, 0.95), rgba(249, 115, 22, 0.8), transparent);
  inset: -16px;
}

/* Tier 7 — Cave Hamster (dark gray-purple) */
#hamster-btn[data-tier="7"] .hsprite {
  filter: hue-rotate(-30deg) saturate(0.5) brightness(0.7)
          drop-shadow(0 8px 18px rgba(107, 33, 168, 0.6));
}
#hamster-btn[data-tier="7"] .hamster-ring {
  background: conic-gradient(from 0deg,
    transparent, rgba(107, 33, 168, 0.85),
    rgba(75, 85, 99, 0.95), rgba(107, 33, 168, 0.85), transparent);
  inset: -18px; filter: blur(15px);
}

/* Tier 8 — Lava Hamster (red-orange glow) */
#hamster-btn[data-tier="8"] .hsprite {
  filter: hue-rotate(335deg) saturate(2) brightness(1.05)
          drop-shadow(0 0 18px rgba(239, 68, 68, 0.85))
          drop-shadow(0 0 36px rgba(249, 115, 22, 0.55));
}
#hamster-btn[data-tier="8"] .hamster-ring {
  background: conic-gradient(from 0deg,
    rgba(239, 68, 68, 0.85),
    rgba(249, 115, 22, 0.95),
    rgba(251, 191, 36, 0.85),
    rgba(249, 115, 22, 0.95),
    rgba(239, 68, 68, 0.85));
  inset: -20px; filter: blur(16px);
  animation-duration: 4.5s;
}

/* Tier 9 — Ice Hamster (cyan glow) */
#hamster-btn[data-tier="9"] .hsprite {
  filter: hue-rotate(180deg) saturate(1.2) brightness(1.3)
          drop-shadow(0 0 20px rgba(34, 211, 238, 0.85))
          drop-shadow(0 0 40px rgba(125, 211, 252, 0.55));
}
#hamster-btn[data-tier="9"] .hamster-ring {
  background: conic-gradient(from 0deg,
    rgba(34, 211, 238, 0.85),
    rgba(125, 211, 252, 0.95),
    rgba(224, 242, 254, 0.85),
    rgba(125, 211, 252, 0.95),
    rgba(34, 211, 238, 0.85));
  inset: -20px; filter: blur(16px);
  animation-duration: 5s;
}

/* Tier 10 — Crystal Hamster (purple-blue prism) */
#hamster-btn[data-tier="10"] .hsprite {
  filter: hue-rotate(220deg) saturate(1.7) brightness(1.15)
          drop-shadow(0 0 20px rgba(168, 85, 247, 0.85))
          drop-shadow(0 0 40px rgba(99, 102, 241, 0.6));
}
#hamster-btn[data-tier="10"] .hamster-ring {
  background: conic-gradient(from 0deg,
    rgba(168, 85, 247, 0.9),
    rgba(99, 102, 241, 0.95),
    rgba(34, 211, 238, 0.85),
    rgba(168, 85, 247, 0.95),
    rgba(168, 85, 247, 0.9));
  inset: -22px; filter: blur(18px);
  animation-duration: 4s;
}

/* Tier 11 — Storm Hamster (electric blue) */
#hamster-btn[data-tier="11"] .hsprite {
  filter: hue-rotate(240deg) saturate(0.9) brightness(0.85) contrast(1.2)
          drop-shadow(0 0 22px rgba(59, 130, 246, 0.95))
          drop-shadow(0 0 44px rgba(99, 102, 241, 0.6));
}
#hamster-btn[data-tier="11"] .hamster-ring {
  background: conic-gradient(from 0deg,
    rgba(59, 130, 246, 0.95),
    rgba(255, 255, 255, 0.85),
    rgba(99, 102, 241, 0.95),
    rgba(59, 130, 246, 0.95));
  inset: -22px; filter: blur(18px);
  animation-duration: 2s;
}

/* Tier 12 — Solar Hamster (gold/orange flame) */
#hamster-btn[data-tier="12"] .hsprite {
  filter: hue-rotate(45deg) saturate(2) brightness(1.3)
          drop-shadow(0 0 24px rgba(251, 191, 36, 0.95))
          drop-shadow(0 0 48px rgba(249, 115, 22, 0.7));
}
#hamster-btn[data-tier="12"] .hamster-ring {
  background: conic-gradient(from 0deg,
    rgba(251, 191, 36, 0.95),
    rgba(249, 115, 22, 0.95),
    rgba(255, 255, 255, 0.7),
    rgba(251, 191, 36, 0.95));
  inset: -24px; filter: blur(20px);
  animation-duration: 3.5s;
}

/* Tier 13 — Lunar Hamster (silver-blue) */
#hamster-btn[data-tier="13"] .hsprite {
  filter: hue-rotate(220deg) saturate(0.4) brightness(1.05)
          drop-shadow(0 0 22px rgba(203, 213, 225, 0.85))
          drop-shadow(0 0 44px rgba(148, 163, 184, 0.6));
}
#hamster-btn[data-tier="13"] .hamster-ring {
  background: conic-gradient(from 0deg,
    rgba(203, 213, 225, 0.95),
    rgba(148, 163, 184, 0.95),
    rgba(255, 255, 255, 0.85),
    rgba(203, 213, 225, 0.95));
  inset: -24px; filter: blur(20px);
  animation-duration: 6s;
}

/* Tier 14 — Stellar Hamster (starry purple) */
#hamster-btn[data-tier="14"] .hsprite {
  filter: hue-rotate(270deg) saturate(1.8) brightness(1.1)
          drop-shadow(0 0 24px rgba(168, 85, 247, 0.95))
          drop-shadow(0 0 48px rgba(217, 70, 239, 0.65));
}
#hamster-btn[data-tier="14"] .hamster-ring {
  background: conic-gradient(from 0deg,
    rgba(168, 85, 247, 0.95),
    rgba(217, 70, 239, 0.95),
    rgba(255, 255, 255, 0.85),
    rgba(99, 102, 241, 0.95),
    rgba(168, 85, 247, 0.95));
  inset: -26px; filter: blur(22px);
  animation-duration: 3s;
}

/* Tier 15 — Galactic Hamster (nebula) */
#hamster-btn[data-tier="15"] .hsprite {
  filter: hue-rotate(290deg) saturate(2.2) brightness(1.15)
          drop-shadow(0 0 26px rgba(217, 70, 239, 0.95))
          drop-shadow(0 0 52px rgba(59, 130, 246, 0.7));
}
#hamster-btn[data-tier="15"] .hamster-ring {
  background: conic-gradient(from 0deg,
    rgba(217, 70, 239, 0.95),
    rgba(59, 130, 246, 0.95),
    rgba(168, 85, 247, 0.95),
    rgba(34, 211, 238, 0.85),
    rgba(217, 70, 239, 0.95));
  inset: -28px; filter: blur(24px);
  animation-duration: 2.5s;
}

/* Tier 16 — Cosmic Hamster (rainbow) */
#hamster-btn[data-tier="16"] .hsprite {
  filter: saturate(2) brightness(1.2)
          drop-shadow(0 0 28px rgba(255, 0, 128, 0.85))
          drop-shadow(0 0 56px rgba(34, 211, 238, 0.7));
}
#hamster-btn[data-tier="16"]::after {
  content: "";
  position: absolute; inset: -10px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(255, 0, 128, 0.25),
    rgba(251, 191, 36, 0.25),
    rgba(34, 211, 238, 0.25),
    rgba(168, 85, 247, 0.25),
    rgba(255, 0, 128, 0.25));
  mix-blend-mode: screen;
  animation: spinRing 4s linear infinite;
  z-index: 4;
}
#hamster-btn[data-tier="16"] .hamster-ring {
  background: conic-gradient(from 0deg,
    rgba(255, 0, 128, 0.95),
    rgba(251, 191, 36, 0.95),
    rgba(132, 204, 22, 0.95),
    rgba(34, 211, 238, 0.95),
    rgba(168, 85, 247, 0.95),
    rgba(255, 0, 128, 0.95));
  inset: -30px; filter: blur(24px);
  animation-duration: 2s;
}

/* Tier 17 — Dimensional Hamster (warped/glitch) */
#hamster-btn[data-tier="17"] .hsprite {
  filter: hue-rotate(180deg) saturate(2.5) brightness(1.2) contrast(1.15)
          drop-shadow(2px 0 0 rgba(255, 0, 128, 0.8))
          drop-shadow(-2px 0 0 rgba(34, 211, 238, 0.8))
          drop-shadow(0 0 30px rgba(168, 85, 247, 0.95));
  animation: dimGlitch 1.6s steps(8, end) infinite;
}
#hamster-btn[data-tier="17"] .hamster-ring {
  background: conic-gradient(from 0deg,
    rgba(255, 0, 128, 0.95),
    rgba(34, 211, 238, 0.95),
    rgba(168, 85, 247, 0.95),
    rgba(255, 0, 128, 0.95));
  inset: -32px; filter: blur(26px);
  animation-duration: 1.8s;
}

/* Tier 18 — Mythic Hamster (gold + fire) */
#hamster-btn[data-tier="18"] .hsprite {
  filter: hue-rotate(40deg) saturate(2.2) brightness(1.3)
          drop-shadow(0 0 30px rgba(251, 191, 36, 1))
          drop-shadow(0 0 60px rgba(249, 115, 22, 0.85))
          drop-shadow(0 0 90px rgba(239, 68, 68, 0.55));
  animation: subtleFloat 3s ease-in-out infinite;
}
#hamster-btn[data-tier="18"] .hamster-ring {
  background: conic-gradient(from 0deg,
    rgba(251, 191, 36, 1),
    rgba(249, 115, 22, 0.95),
    rgba(255, 255, 255, 0.95),
    rgba(239, 68, 68, 0.95),
    rgba(251, 191, 36, 1));
  inset: -34px; filter: blur(28px);
  animation-duration: 2.5s;
}

/* Tier 19 — Legendary Hamster (full prismatic) */
#hamster-btn[data-tier="19"] .hsprite {
  filter: saturate(2.5) brightness(1.35) contrast(1.1)
          drop-shadow(0 0 32px rgba(255, 215, 0, 1))
          drop-shadow(0 0 64px rgba(217, 70, 239, 0.85))
          drop-shadow(0 0 96px rgba(34, 211, 238, 0.6));
  animation: subtleFloat 2.2s ease-in-out infinite;
}
#hamster-btn[data-tier="19"]::after {
  content: "";
  position: absolute; inset: -14px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(255, 215, 0, 0.30),
    rgba(255, 0, 128, 0.30),
    rgba(168, 85, 247, 0.30),
    rgba(34, 211, 238, 0.30),
    rgba(132, 204, 22, 0.30),
    rgba(255, 215, 0, 0.30));
  mix-blend-mode: screen;
  animation: spinRing 2.5s linear infinite;
  z-index: 4;
}
#hamster-btn[data-tier="19"] .hamster-ring {
  background: conic-gradient(from 0deg,
    rgba(255, 215, 0, 1),
    rgba(255, 0, 128, 0.95),
    rgba(168, 85, 247, 0.95),
    rgba(34, 211, 238, 0.95),
    rgba(132, 204, 22, 0.95),
    rgba(255, 215, 0, 1));
  inset: -38px; filter: blur(30px);
  animation-duration: 1.5s;
}

/* Tier 20 — Divine Hamster (white-gold supernova) */
#hamster-btn[data-tier="20"] .hsprite {
  filter: brightness(1.5) saturate(1.8) contrast(1.05)
          drop-shadow(0 0 36px rgba(255, 255, 255, 1))
          drop-shadow(0 0 72px rgba(251, 191, 36, 0.95))
          drop-shadow(0 0 120px rgba(255, 215, 0, 0.7));
  animation: divinePulse 2s ease-in-out infinite;
  transform-origin: center;
}
#hamster-btn[data-tier="20"] .hamster-ring {
  background: conic-gradient(from 0deg,
    rgba(255, 255, 255, 1),
    rgba(255, 215, 0, 1),
    rgba(251, 191, 36, 1),
    rgba(255, 255, 255, 1),
    rgba(255, 215, 0, 1),
    rgba(255, 255, 255, 1));
  inset: -42px; filter: blur(32px);
  animation-duration: 1.2s;
}
#hamster-btn[data-tier="20"]::after {
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(251, 191, 36, 0.55) 30%,
    transparent 70%);
  inset: -50px;
}

/* Subtle vertical float used by tiers 18-19 (animates only transform,
   so each tier's static .hsprite filter remains the source of truth) */
@keyframes subtleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Tier-17 dimensional glitch — only transform/opacity, no filter */
@keyframes dimGlitch {
  0%, 100% { transform: translate(0, 0); opacity: 1; }
  20%      { transform: translate(2px, -1px); opacity: 0.92; }
  40%      { transform: translate(-2px, 1px); opacity: 1; }
  60%      { transform: translate(1px, 2px); opacity: 0.95; }
  80%      { transform: translate(-1px, -2px); opacity: 1; }
}

/* Tier-20 supernova breath — only transform, preserves static filter */
@keyframes divinePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

.hamster-tier {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--base-blue), var(--base-blue-light));
  color: white;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(0, 82, 255, 0.5);
}

.cta {
  margin-top: 28px;
  color: var(--base-blue-light);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
}

/* Floating +1 */
.floats {
  position: fixed; inset: 0;
  pointer-events: none; overflow: hidden; z-index: 10;
}

.float {
  position: absolute;
  color: var(--base-blue-light);
  font-weight: 800;
  font-size: 24px;
  animation: floatUp 0.8s ease-out forwards;
  text-shadow:
    0 0 12px rgba(0, 82, 255, 0.9),
    0 2px 8px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

@keyframes floatUp {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -150%) scale(1.2); opacity: 0; }
}

.float.passive-float {
  color: var(--green);
  font-size: 18px;
  font-weight: 800;
  text-shadow:
    0 0 14px rgba(52, 211, 153, 0.95),
    0 2px 6px rgba(0, 0, 0, 0.5);
  animation: passiveFloat 1.5s ease-out forwards;
}

@keyframes passiveFloat {
  0%   { transform: translate(-50%, 0) scale(0.7); opacity: 0; }
  20%  { transform: translate(-50%, -30%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -180%) scale(1.05); opacity: 0; }
}

/* ==========================================================
   SHOP
   ========================================================== */
.shop-section {
  background: linear-gradient(180deg,
    rgba(15, 30, 70, 0.5) 0%,
    rgba(8, 18, 45, 0.55) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 20px 50px -20px rgba(0, 20, 60, 0.5);
}

.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.shop-header h2 {
  font-size: 20px;
  margin-bottom: 4px;
}

.shop-sub {
  color: var(--muted);
  font-size: 13px;
}

.shop-sub strong { color: var(--text); }

.shop-stats {
  display: flex;
  gap: 12px;
}

.shop-stat {
  background: rgba(15, 30, 70, 0.4);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 14px;
  text-align: center;
  min-width: 90px;
}

.shop-stat-num {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.shop-stat-label {
  display: block;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* ----- Shop tab navigation (Gardens / Food / Clothing / ...) ----- */
.shop-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 16px;
  padding: 6px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 14px;
}

.shop-tab {
  flex: 1 1 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(226, 232, 240, 0.78);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.shop-tab:hover {
  background: rgba(96, 165, 250, 0.08);
  color: #fff;
}

.shop-tab.active {
  background: linear-gradient(135deg,
    rgba(0, 82, 255, 0.85),
    rgba(34, 211, 238, 0.55));
  border-color: rgba(125, 211, 252, 0.85);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 82, 255, 0.35);
  transform: translateY(-1px);
}

.shop-tab .tab-emoji {
  font-size: 22px;
  line-height: 1;
}

.shop-tab .tab-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.shop-tab .tab-count {
  font-size: 11px;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

.shop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 560px) {
  .shop-grid { grid-template-columns: 1fr 1fr; }
}

.shop-item {
  background: linear-gradient(135deg,
    rgba(15, 30, 70, 0.45),
    rgba(8, 18, 45, 0.55));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.shop-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(96, 165, 250, 0.0),
    rgba(96, 165, 250, 0.08));
  pointer-events: none;
}

.shop-item.buyable {
  border-color: rgba(52, 211, 153, 0.4);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.15) inset,
              0 8px 24px -10px rgba(52, 211, 153, 0.3);
}

.shop-item.owned {
  background: linear-gradient(135deg,
    rgba(251, 191, 36, 0.1),
    rgba(15, 30, 70, 0.4));
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow: 0 0 24px -8px rgba(251, 191, 36, 0.4);
}

.shop-item.locked { opacity: 0.85; }

.shop-item-head {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.shop-item-emoji {
  font-size: 36px;
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(96, 165, 250, 0.5));
}

.shop-item.owned .shop-item-emoji {
  filter: drop-shadow(0 0 16px rgba(251, 191, 36, 0.7));
}

.shop-item-name {
  font-weight: 700;
  font-size: 15px;
}

.shop-item-yield {
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
}

.shop-tier-num {
  background: rgba(96, 165, 250, 0.15);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
}

.shop-item.owned .shop-tier-num {
  background: rgba(251, 191, 36, 0.15);
  color: var(--gold);
  border-color: rgba(251, 191, 36, 0.4);
}

.shop-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.shop-actions button {
  border: none;
  border-radius: 10px;
  padding: 10px 8px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.1s, box-shadow 0.2s, opacity 0.2s;
}

.buy-coins {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  box-shadow: 0 4px 12px -4px rgba(16, 185, 129, 0.6);
}

.buy-coins:hover:not(.disabled):not(:disabled) {
  box-shadow: 0 6px 18px -4px rgba(16, 185, 129, 0.8);
}

.buy-coins:active:not(.disabled):not(:disabled) { transform: scale(0.96); }

.buy-coins.disabled, .buy-coins:disabled {
  background: rgba(96, 165, 250, 0.1);
  color: var(--muted);
  border: 1px solid var(--border);
  cursor: not-allowed;
  box-shadow: none;
}

.buy-eth {
  background: linear-gradient(135deg, var(--base-blue), var(--base-blue-light));
  color: white;
  box-shadow: 0 4px 12px -4px rgba(0, 82, 255, 0.6);
}

.buy-eth:hover {
  box-shadow: 0 6px 18px -4px rgba(0, 82, 255, 0.85);
}

.buy-eth:active { transform: scale(0.96); }

.buy-eth .eth {
  font-style: italic;
  font-weight: 900;
  font-family: Georgia, serif;
}

/* Base Chain logo + ETH price formatting (used everywhere a price is shown) */
.base-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  margin-right: 0.35em;
  flex-shrink: 0;
  display: inline-block;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.eth-amount {
  font-weight: 800;
  letter-spacing: 0.01em;
}

.eth-unit {
  font-size: 0.78em;
  font-weight: 700;
  opacity: 0.85;
  margin-left: 0.3em;
  letter-spacing: 0.04em;
}

.buy-eth {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.05em;
}

.pending-amount {
  display: inline-flex;
  align-items: center;
}

#modal-eth {
  display: inline-flex;
  align-items: center;
}

#modal-eth .base-icon {
  width: 1.1em;
  height: 1.1em;
}

#modal-title .base-icon {
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.1em;
}

.shop-owned-tag {
  background: rgba(251, 191, 36, 0.15);
  color: var(--gold);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 10px;
  padding: 8px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  position: relative;
  z-index: 1;
}

.shop-pending {
  background: rgba(251, 191, 36, 0.08);
  border: 1px dashed rgba(251, 191, 36, 0.45);
  border-radius: 10px;
  padding: 10px;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
}

.shop-pending .pending-label {
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  grid-column: 1 / -1;
}

.shop-pending .pending-amount {
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  grid-column: 1 / -1;
  margin-top: -4px;
}

/* ==========================================================
   LEADERBOARD
   ========================================================== */
.leaderboard {
  background: linear-gradient(180deg,
    rgba(15, 30, 70, 0.5) 0%,
    rgba(8, 18, 45, 0.55) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 20px 50px -20px rgba(0, 20, 60, 0.5);
}

.leaderboard h2 { margin-bottom: 16px; font-size: 20px; }

#leaderboard-list { list-style: none; }

#leaderboard-list li {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(96, 165, 250, 0.1);
}

#leaderboard-list li:last-child { border-bottom: none; }

#leaderboard-list li.me {
  background: rgba(59, 130, 246, 0.12);
  margin: 0 -12px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 10px;
  border-bottom: 1px solid rgba(96, 165, 250, 0.1);
}

.rank { font-weight: 700; font-size: 16px; color: var(--muted); }
.rank.top1 { color: var(--gold); font-size: 22px; }
.rank.top2 { color: #dcd8c4; font-size: 22px; }
.rank.top3 { color: #fb923c; font-size: 22px; }

.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lb-pts {
  color: var(--gold); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.empty {
  color: var(--muted); text-align: center;
  padding: 16px 0; font-size: 14px;
}

.footer-hint {
  margin-top: 16px; color: var(--muted);
  font-size: 12px; text-align: center;
}

/* ==========================================================
   ETH PURCHASE MODAL
   ========================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 26, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: linear-gradient(180deg, #0e2b80 0%, #050a1f 100%);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 24px 24px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  text-align: center;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.modal-close:hover { color: var(--text); }

.modal-emoji {
  font-size: 56px;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 20px rgba(96, 165, 250, 0.6));
}

.modal-content h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.modal-lead {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.modal-lead strong { color: var(--text); }

.modal-label {
  display: block;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-top: 14px;
  margin-bottom: 6px;
}

.copy-row {
  display: flex;
  align-items: stretch;
  background: rgba(8, 18, 45, 0.6);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.copy-row code {
  flex: 1;
  padding: 12px 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  color: var(--text);
  text-align: left;
  word-break: break-all;
  background: transparent;
  user-select: all;
  -webkit-user-select: all;
}

.copy-btn {
  background: rgba(96, 165, 250, 0.18);
  border: none;
  border-left: 1px solid var(--border);
  color: var(--base-blue-light);
  font-weight: 700;
  font-size: 13px;
  padding: 0 14px;
  cursor: pointer;
  font-family: inherit;
}

.copy-btn:hover { background: rgba(96, 165, 250, 0.3); color: var(--text); }

.modal-meta {
  margin-top: 18px;
  padding: 10px 12px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 10px;
  color: var(--gold);
  font-size: 12px;
  line-height: 1.5;
}

.modal-actions {
  margin-top: 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
}

.modal-error {
  color: var(--danger);
  font-size: 13px;
  margin-top: 10px;
  min-height: 16px;
}

/* ==========================================================
   TOAST
   ========================================================== */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--base-blue), var(--base-blue-light));
  color: white;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  z-index: 200;
  box-shadow: 0 12px 32px -8px rgba(0, 82, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  max-width: calc(100vw - 40px);
  text-align: center;
  animation: toastIn 0.3s ease;
}

@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 30px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ==========================================================
   TIME / DATE BAR (player-local timezone)
   ========================================================== */
.timebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px auto 0;
  padding: 8px 18px;
  width: fit-content;
  max-width: calc(100% - 24px);
  border-radius: 999px;
  background: linear-gradient(135deg,
    rgba(15, 30, 70, 0.55),
    rgba(59, 130, 246, 0.35));
  border: 1px solid rgba(96, 165, 250, 0.28);
  box-shadow:
    0 4px 16px rgba(15, 30, 70, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: rgba(220, 230, 255, 0.92);
  font-size: 13px;
  letter-spacing: 0.3px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.timebar .tb-clock {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-weight: 700;
  font-size: 15px;
  color: #dceca7;
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.55);
}
.timebar .tb-sep   { opacity: 0.45; }
.timebar .tb-date  { opacity: 0.85; text-transform: capitalize; }
.timebar .tb-tz    {
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.16);
  border: 1px solid rgba(96, 165, 250, 0.3);
  font-size: 11px;
  font-weight: 600;
  color: #7dd3fc;
}

/* ==========================================================
   REFERRAL / PARRAINAGE SECTION
   ========================================================== */
.referral {
  margin: 28px auto 60px;
  padding: 24px;
  max-width: 720px;
  width: calc(100% - 32px);
  border-radius: 22px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 200, 80, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(15, 30, 70, 0.8), rgba(8, 18, 45, 0.92));
  border: 1px solid rgba(255, 200, 100, 0.22);
  box-shadow:
    0 24px 60px -20px rgba(0, 0, 0, 0.7),
    0 0 40px -10px rgba(255, 200, 100, 0.18);
}
.ref-header { text-align: center; margin-bottom: 18px; }
.ref-header h2 {
  font-size: 26px;
  margin: 0 0 6px;
  background: linear-gradient(90deg, #ffd47a, #ffa64d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ref-sub {
  margin: 0;
  color: rgba(220, 230, 255, 0.78);
  font-size: 14px;
  line-height: 1.5;
}
.ref-sub strong { color: #ffd47a; }

.ref-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0;
}
.ref-stat {
  text-align: center;
  padding: 14px 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 200, 100, 0.08), rgba(0, 0, 0, 0.25));
  border: 1px solid rgba(255, 200, 100, 0.18);
}
.ref-stat-num {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: #ffe7b3;
  line-height: 1.1;
}
.ref-stat-label {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(220, 230, 255, 0.6);
}

.ref-link-card {
  margin: 18px 0;
  padding: 16px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px dashed rgba(255, 200, 100, 0.3);
}
.ref-link-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(220, 230, 255, 0.6);
  margin-bottom: 8px;
}
.ref-copy code {
  font-size: 13px;
  word-break: break-all;
}
.ref-share {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.ref-share-btn {
  flex: 1 1 140px;
  text-align: center;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(135deg, rgba(0, 82, 255, 0.45), rgba(245, 215, 110, 0.35));
  border: 1px solid rgba(96, 165, 250, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ref-share-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px rgba(0, 82, 255, 0.55);
}
.ref-code-line {
  margin: 12px 0 0;
  font-size: 13px;
  color: rgba(220, 230, 255, 0.7);
}
.ref-code-line strong {
  color: #ffe7b3;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  letter-spacing: 2px;
  font-size: 15px;
}

.ref-chest-area {
  margin: 22px 0 14px;
  text-align: center;
}
.ref-chest-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  border: none;
  border-radius: 18px;
  background: linear-gradient(135deg, #f59e0b 0%, #b45309 60%, #7c2d12 100%);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
  box-shadow:
    0 14px 32px -10px rgba(245, 158, 11, 0.65),
    inset 0 -3px 0 rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.2s ease;
  animation: chestIdle 2.4s ease-in-out infinite;
}
.ref-chest-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 18px 40px -10px rgba(245, 158, 11, 0.75),
    inset 0 -3px 0 rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.ref-chest-btn:disabled {
  background: linear-gradient(135deg, #2a2a35, #1a1a25);
  color: rgba(220, 230, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: not-allowed;
  animation: none;
  filter: grayscale(0.7);
}
.ref-chest-btn .chest-emoji { font-size: 26px; }
.ref-chest-btn .chest-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: #ef4444;
  color: white;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.55);
  border: 2px solid #1a0e22;
}
.ref-chest-btn:disabled .chest-badge { display: none; }
.ref-chest-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(220, 230, 255, 0.55);
}

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

.ref-history h3 {
  margin: 16px 0 8px;
  font-size: 14px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(220, 230, 255, 0.6);
}
.ref-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.ref-history-list li {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ref-history-list li.empty {
  grid-column: 1 / -1;
  text-align: center;
  font-style: italic;
  color: rgba(220, 230, 255, 0.5);
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.12);
}
.ref-history-list .rh-rarity {
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-weight: 700;
}
.ref-history-list .rh-amount { font-weight: 700; color: #fff; }
.rar-common    { color: #d8d4c0; }
.rar-rare      { color: #3b82f6; }
.rar-epic      { color: #c084fc; }
.rar-legendary { color: #fbbf24; }
li.rar-bg-common    { box-shadow: inset 4px 0 0 #a8a890; }
li.rar-bg-rare      { box-shadow: inset 4px 0 0 #3b82f6; }
li.rar-bg-epic      { box-shadow: inset 4px 0 0 #a855f7; }
li.rar-bg-legendary { box-shadow: inset 4px 0 0 #f59e0b, 0 0 18px -6px rgba(245, 158, 11, 0.6); }

/* Reveal modal — chest opens, reward bursts out */
.reveal-content {
  text-align: center;
  padding: 32px 24px 24px;
  max-width: 360px;
}
.reveal-chest {
  position: relative;
  margin: 0 auto 16px;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reveal-chest-emoji {
  font-size: 78px;
  display: inline-block;
  filter: drop-shadow(0 8px 16px rgba(245, 158, 11, 0.55));
  animation: chestPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.reveal-burst {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 215, 130, 0.55) 0%, transparent 60%);
  animation: burstPulse 0.8s ease-out both;
  pointer-events: none;
}
@keyframes chestPop {
  0%   { transform: scale(0.4) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes burstPulse {
  0%   { transform: scale(0.4); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
#reveal-rarity {
  margin: 8px 0 4px;
  font-size: 22px;
  letter-spacing: 0.5px;
}
.reveal-amount {
  margin: 0 0 18px;
  font-size: 30px;
  font-weight: 900;
  color: #ffe7b3;
  text-shadow: 0 0 20px rgba(255, 200, 100, 0.55);
}
.reveal-content.rar-legendary #reveal-rarity { color: #fbbf24; text-shadow: 0 0 18px rgba(251, 191, 36, 0.6); }
.reveal-content.rar-epic      #reveal-rarity { color: #c084fc; text-shadow: 0 0 18px rgba(192, 132, 252, 0.5); }
.reveal-content.rar-rare      #reveal-rarity { color: #3b82f6; text-shadow: 0 0 18px rgba(96, 165, 250, 0.5); }
.reveal-content.rar-common    #reveal-rarity { color: #d8d4c0; }

@media (max-width: 600px) {
  #hamster-btn { width: 220px; height: 220px; }
  .login-card h1 { font-size: 28px; }
  .logo, .logo img { width: 92px; height: 92px; }
  #score { font-size: 22px; }
  #game header { grid-template-columns: 1fr auto; }
  #logout-btn { grid-column: 1 / -1; justify-self: end; }
  .bg-base-mark { font-size: 10px; }
  .shop-stats { width: 100%; }
  .shop-stat { flex: 1; }
  .timebar { font-size: 12px; padding: 6px 14px; }
  .timebar .tb-clock { font-size: 14px; }
  .ref-stats { grid-template-columns: 1fr; }
  .referral { padding: 18px; }
  .ref-share-btn { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-grid, .bg-glow, .bg-particles span, .hamster-ring,
  #hamster-btn::after, #hamster-btn::before, .logo, .toast,
  .ref-chest-btn, .reveal-chest-emoji, .reveal-burst {
    animation: none !important;
  }
}

/* ============================================================
   Language switcher (FR / EN / ZH) — fixed top-right pill bar
   ============================================================ */
.lang-switcher {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 1000;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(2, 6, 26, 0.78);
  border: 1px solid rgba(0, 82, 255, 0.45);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 82, 255, 0.15) inset,
    0 0 16px rgba(0, 82, 255, 0.18);
}
.lang-switcher .lang-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: #f0f4d6;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
  white-space: nowrap;
}
.lang-switcher .lang-btn:hover {
  background: rgba(0, 82, 255, 0.18);
  color: #ffffff;
  transform: translateY(-1px);
}
.lang-switcher .lang-btn:active {
  transform: translateY(0);
}
.lang-switcher .lang-btn.active {
  background: linear-gradient(135deg, #0052ff 0%, #3b82f6 100%);
  color: #ffffff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18) inset,
    0 4px 12px rgba(0, 82, 255, 0.55);
}
.lang-switcher .lang-btn:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .lang-switcher {
    top: 8px;
    right: 8px;
    padding: 3px;
  }
  .lang-switcher .lang-btn {
    font-size: 11px;
    padding: 5px 8px;
  }
}

/* ============================================================
   Hamster evolution progress bar (under the hamster + CTA)
   ============================================================ */
.hamster-progress {
  width: min(420px, 92%);
  margin: 18px auto 0;
  padding: 14px 16px 12px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(10, 30, 70, 0.55) 0%, rgba(6, 18, 46, 0.55) 100%);
  border: 1px solid rgba(96, 165, 250, 0.22);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 8px 26px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  font-size: 13px;
  color: #e8f0c9;
}
.hp-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 8px;
}
.hp-label {
  font-weight: 600; color: #ffffff; letter-spacing: 0.2px;
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hp-value {
  font-variant-numeric: tabular-nums; color: #60a5fa; font-weight: 700;
  white-space: nowrap;
}
.hp-bar {
  position: relative; height: 12px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(96, 165, 250, 0.18);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.hp-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #0052ff 0%, #3b82f6 50%, #7dd3fc 100%);
  background-size: 200% 100%;
  border-radius: 999px;
  transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow:
    0 0 14px rgba(96, 165, 250, 0.65),
    0 0 4px rgba(255, 255, 255, 0.4) inset;
  animation: hp-shimmer 2.4s linear infinite;
}
@keyframes hp-shimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: -200% 0%; }
}
.hp-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-top: 6px;
  font-size: 11.5px; color: #b8c8a0;
}
.hp-current { font-variant-numeric: tabular-nums; }
.hp-eta { font-style: italic; opacity: 0.85; text-align: right; }
.hamster-progress.is-max {
  border-color: rgba(255, 215, 0, 0.45);
  background:
    linear-gradient(180deg, rgba(60, 50, 10, 0.6) 0%, rgba(30, 24, 4, 0.55) 100%);
}
.hamster-progress.is-max .hp-label { color: #ffe071; }
.hamster-progress.is-max .hp-fill {
  background: linear-gradient(90deg, #ffd34d 0%, #ffb000 50%, #ffd34d 100%);
  box-shadow: 0 0 18px rgba(255, 195, 0, 0.85);
  width: 100% !important;
}
@media (max-width: 480px) {
  .hamster-progress { padding: 11px 12px 10px; font-size: 12px; }
  .hp-bar { height: 10px; }
}

/* ==========================================================
   PROFILE PHOTO — clickable player-card avatar + upload modal
   ========================================================== */
/* The .pc-avatar selector is now applied to a <button> instead of a <div>.
   Strip the native button chrome so the visual carries over from the
   original avatar design above. */
button.pc-avatar {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition: transform 0.18s ease;
}
button.pc-avatar:hover { transform: scale(1.04); }
button.pc-avatar:active { transform: scale(0.97); }
button.pc-avatar:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 215, 100, 0.55);
  border-radius: 50%;
}

/* Tiny camera-icon overlay sitting on the bottom-left of the avatar.
   Kept opposite to .pc-avatar-tier (which lives bottom-right) so they
   don't overlap. Slides up slightly on hover to reinforce the click. */
.pc-avatar-edit {
  position: absolute;
  bottom: -4px; left: -4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #3b82f6, #0033b0);
  color: #fffbe6;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid rgba(8, 18, 45, 0.95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  z-index: 2;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pc-avatar-edit svg { width: 12px; height: 12px; }
button.pc-avatar:hover .pc-avatar-edit {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55);
}

/* Avatar modal — re-uses the .modal / .modal-backdrop / .modal-content
   chassis from the ETH modal (so backdrop blur, fade-in, close button etc.
   already work) and only customises the inner layout. */
.avatar-modal-content {
  text-align: center;
  max-width: 420px;
  display: flex; flex-direction: column; align-items: center;
}
.avatar-modal-content .modal-title {
  font-size: 22px; font-weight: 800;
  margin: 4px 0 8px;
  background: linear-gradient(180deg, #ffd870, #c89b2c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.avatar-modal-content .modal-lead {
  color: var(--muted, #b6cf94);
  font-size: 13.5px;
  line-height: 1.45;
  margin-bottom: 14px;
  max-width: 320px;
}
.avatar-modal-preview {
  width: 128px; height: 128px;
  border-radius: 50%;
  overflow: hidden;
  margin: 6px 0 12px;
  border: 3px solid rgba(255, 215, 100, 0.65);
  background: radial-gradient(circle at 30% 30%, rgba(255,235,150,0.25), rgba(40,70,25,0.7));
  box-shadow:
    0 0 32px rgba(255, 200, 80, 0.35),
    inset 0 -10px 24px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}
.avatar-modal-preview img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.avatar-modal-hint {
  color: var(--muted, #b6cf94);
  font-size: 12px;
  margin-bottom: 14px;
}
.avatar-actions {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; max-width: 280px;
}
.avatar-actions button { width: 100%; }
.avatar-cancel-btn { opacity: 0.7; font-size: 13px; }
#avatar-modal-error {
  margin-top: 10px;
  color: #ff8c8c;
  font-size: 13px;
}

/* ==========================================================
   LEADERBOARD — tab strip (Global + 20 tier tabs) + avatar rows
   ========================================================== */
.lb-sub {
  color: var(--muted, #b6cf94);
  font-size: 12.5px;
  margin: -8px 0 12px;
  line-height: 1.4;
}

.lb-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 10px;
  margin: 0 -4px 10px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.lb-tabs::-webkit-scrollbar { height: 6px; }
.lb-tabs::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, 0.35);
  border-radius: 3px;
}

.lb-tab {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.25);
  background: rgba(8, 18, 45, 0.55);
  color: var(--muted, #b6cf94);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
  scroll-snap-align: center;
  font-variant-numeric: tabular-nums;
  position: relative;
}
.lb-tab:hover {
  background: rgba(15, 30, 70, 0.85);
  color: #f5fbe9;
  border-color: rgba(96, 165, 250, 0.45);
}
.lb-tab.active {
  background: linear-gradient(180deg, #3b82f6, #0033b0);
  color: #fffbe6;
  border-color: #ffd870;
  box-shadow: 0 4px 14px rgba(15, 30, 70, 0.5);
  transform: translateY(-1px);
}
/* Player's current tier — gold ring even when not active. */
.lb-tab.you-here {
  border-color: #ffd870;
  box-shadow: 0 0 0 1px rgba(255, 215, 100, 0.4) inset;
}
.lb-tab.you-here.active {
  background: linear-gradient(180deg, #ffd870, #c89b2c);
  color: #2a1d05;
  box-shadow: 0 4px 14px rgba(255, 200, 80, 0.45);
}
.lb-tab-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ffd870;
  box-shadow: 0 0 6px rgba(255, 215, 100, 0.9);
  display: inline-block;
}
.lb-tab.active.you-here .lb-tab-dot {
  background: #2a1d05;
  box-shadow: none;
}

/* Avatar in each leaderboard row.
   Adjusts the existing .leaderboard grid template to make room. */
#leaderboard-list li {
  grid-template-columns: 50px 36px 1fr auto;
}
.lb-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(15, 30, 70, 0.6);
  border: 1.5px solid rgba(255, 215, 100, 0.4);
  display: block;
  flex-shrink: 0;
}
#leaderboard-list li.me .lb-avatar {
  border-color: #ffd870;
  box-shadow: 0 0 8px rgba(255, 215, 100, 0.55);
}

.lb-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.lb-name-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.lb-tier-pill {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(15, 30, 70, 0.85);
  border: 1px solid rgba(96, 165, 250, 0.3);
  color: #d8e8b8;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}

@media (max-width: 540px) {
  .lb-tab { padding: 6px 10px; font-size: 12px; }
  .lb-sub { font-size: 12px; }
  #leaderboard-list li {
    grid-template-columns: 42px 30px 1fr auto;
    gap: 9px;
  }
  .lb-avatar { width: 28px; height: 28px; }
  .lb-tier-pill { font-size: 10px; padding: 1px 6px; }
  .avatar-modal-preview { width: 110px; height: 110px; }
}

/* ==========================================================================
   DAILY HAZELNUT REWARD
   ========================================================================== */

.daily-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin: 10px 12px 0;
  border-radius: 16px;
  background: linear-gradient(135deg,
              rgba(180, 100, 40, 0.18),
              rgba(120, 60, 20, 0.12) 60%,
              rgba(40, 20, 10, 0.18));
  border: 1px solid rgba(220, 150, 80, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.15),
    0 6px 22px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}

.daily-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 18% 50%,
              rgba(255, 200, 100, 0.18), transparent 55%);
  pointer-events: none;
}

.daily-icon {
  font-size: 38px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  animation: dailySpin 6s linear infinite;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.daily-card.is-ready .daily-icon {
  animation: dailyPulse 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(255, 210, 100, 0.95));
}

@keyframes dailyPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
@keyframes dailySpin {
  0%   { transform: rotate(-6deg); }
  50%  { transform: rotate(6deg); }
  100% { transform: rotate(-6deg); }
}

.daily-body {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.daily-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: #ffd9a0;
  letter-spacing: 0.3px;
}

.daily-sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
}

.daily-claim-btn {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 130px;
  padding: 11px 16px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #6b4a2a, #4a3018);
  color: #d8c4a0;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.4px;
  cursor: not-allowed;
  text-transform: uppercase;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  position: relative;
  z-index: 1;
}

.daily-card.is-ready .daily-claim-btn {
  background: linear-gradient(180deg, #f5b042, #c97c1f);
  color: #2a1500;
  cursor: pointer;
  box-shadow:
    0 0 0 2px rgba(255, 220, 120, 0.45),
    0 8px 22px rgba(255, 170, 60, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  animation: dailyBtnGlow 1.6s ease-in-out infinite;
}

.daily-card.is-ready .daily-claim-btn:hover {
  transform: translateY(-1px);
}

@keyframes dailyBtnGlow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 220, 120, 0.4),  0 6px 18px rgba(255, 170, 60, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 220, 120, 0.7),  0 10px 28px rgba(255, 170, 60, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
}

.daily-btn-label { font-size: 13.5px; }
.daily-countdown { font-size: 11px; opacity: 0.85; font-variant-numeric: tabular-nums; letter-spacing: 0.3px; }
.daily-card.is-ready .daily-countdown { display: none; }

/* ---- per-hazelnut color themes (used on the reveal modal) ---- */
.daily-reveal-content.haz-brown    #daily-reveal-name { color: #c8956a; text-shadow: 0 0 14px rgba(200, 149, 106, 0.55); }
.daily-reveal-content.haz-bronze   #daily-reveal-name { color: #cd7f32; text-shadow: 0 0 14px rgba(205, 127, 50, 0.6); }
.daily-reveal-content.haz-copper   #daily-reveal-name { color: #ff8c42; text-shadow: 0 0 16px rgba(255, 140, 66, 0.7); }
.daily-reveal-content.haz-silver   #daily-reveal-name { color: #d8e0e8; text-shadow: 0 0 18px rgba(216, 224, 232, 0.7); }
.daily-reveal-content.haz-gold     #daily-reveal-name { color: #fbbf24; text-shadow: 0 0 22px rgba(251, 191, 36, 0.85); }
.daily-reveal-content.haz-ruby     #daily-reveal-name { color: #ef4444; text-shadow: 0 0 22px rgba(239, 68, 68, 0.85); }
.daily-reveal-content.haz-sapphire #daily-reveal-name { color: #60a5fa; text-shadow: 0 0 22px rgba(96, 165, 250, 0.85); }
.daily-reveal-content.haz-emerald  #daily-reveal-name { color: #34d399; text-shadow: 0 0 22px rgba(52, 211, 153, 0.85); }
.daily-reveal-content.haz-amethyst #daily-reveal-name { color: #c084fc; text-shadow: 0 0 24px rgba(192, 132, 252, 0.9); }
.daily-reveal-content.haz-diamond  #daily-reveal-name { color: #67e8f9; text-shadow: 0 0 28px rgba(103, 232, 249, 1.0); }

.daily-reveal-chest .reveal-chest-emoji {
  font-size: 84px;
  display: inline-block;
  animation: dailyRevealPop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes dailyRevealPop {
  0%   { transform: scale(0.2) rotate(-180deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(15deg);   opacity: 1; }
  100% { transform: scale(1)    rotate(0deg);    opacity: 1; }
}

.daily-reveal-next {
  margin: 6px 0 14px;
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 540px) {
  .daily-card { flex-wrap: wrap; padding: 12px 14px; }
  .daily-icon { font-size: 32px; }
  .daily-title { font-size: 14.5px; }
  .daily-sub { font-size: 12px; }
  .daily-claim-btn { width: 100%; min-width: 0; }
  .daily-reveal-chest .reveal-chest-emoji { font-size: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .daily-icon, .daily-card.is-ready .daily-claim-btn,
  .daily-reveal-chest .reveal-chest-emoji {
    animation: none !important;
  }
}

/* ============================================================
   OFFICIAL LAUNCH BANNER
   Sticky banner at the very top, visible on every screen
   (login + game), counts down to LAUNCH_AT_ISO.
   ============================================================ */
.launch-banner {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;          /* below .modal (z=100) so modals always cover it */
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(8, 14, 32, 0.92), rgba(8, 14, 32, 0.55) 60%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.launch-banner[hidden] { display: none; }
.launch-banner__inner {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0052ff 0%, #2266ff 45%, #ff8a00 110%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 10px 30px rgba(0, 82, 255, 0.45),
    0 0 24px rgba(255, 138, 0, 0.35);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.3px;
  animation: launchBannerPulse 2.4s ease-in-out infinite;
  max-width: 95vw;
}
.launch-banner__rocket {
  font-size: 1.5rem;
  display: inline-block;
  animation: launchRocketBob 1.8s ease-in-out infinite;
}
.launch-banner__rocket--right { animation-delay: 0.5s; }
.launch-banner__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  min-width: 0;
}
.launch-banner__title {
  font-size: 0.75rem;
  text-transform: uppercase;
  opacity: 0.92;
  letter-spacing: 1.3px;
}
.launch-banner__count {
  font-variant-numeric: tabular-nums;
  font-size: 1.45rem;
  font-weight: 800;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  letter-spacing: 1.5px;
}
.launch-banner.is-live .launch-banner__inner {
  background: linear-gradient(135deg, #00b66c 0%, #00d97a 50%, #ffd400 110%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.25),
    0 10px 36px rgba(0, 217, 122, 0.55),
    0 0 36px rgba(255, 212, 0, 0.55);
  animation: launchBannerLive 1.2s ease-in-out infinite;
}

@keyframes launchBannerPulse {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  50%      { transform: translateY(1px); filter: brightness(1.07); }
}
@keyframes launchBannerLive {
  0%, 100% { transform: scale(1);    filter: brightness(1.05); }
  50%      { transform: scale(1.03); filter: brightness(1.18); }
}
@keyframes launchRocketBob {
  0%, 100% { transform: translateY(0)   rotate(-6deg); }
  50%      { transform: translateY(-3px) rotate(6deg); }
}

/* Mobile: tighter banner */
@media (max-width: 540px) {
  .launch-banner { padding: 6px 8px; }
  .launch-banner__inner { gap: 10px; padding: 8px 14px; }
  .launch-banner__rocket { font-size: 1.2rem; }
  .launch-banner__title { font-size: 0.65rem; letter-spacing: 1px; }
  .launch-banner__count { font-size: 1.2rem; letter-spacing: 1.2px; }
}

@media (prefers-reduced-motion: reduce) {
  .launch-banner__inner,
  .launch-banner__rocket { animation: none !important; }
}

/* ============================================================
 * ANTI-BOT CAPTCHA MODAL
 * Pops every CAPTCHA_THRESHOLD clicks (server-enforced) so bots
 * mass-clicking the hamster have to actually parse a math question.
 * ============================================================ */
.captcha-modal-content {
  text-align: center;
  max-width: 380px;
  padding: 24px 26px 22px;
}
.captcha-icon {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 8px;
  animation: captchaBotPulse 2.4s ease-in-out infinite;
}
@keyframes captchaBotPulse {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-4px) rotate(3deg); }
}
.captcha-subtitle {
  color: var(--text-muted, #a8a8b3);
  font-size: 0.95rem;
  margin: 4px 0 18px;
  line-height: 1.4;
}
.captcha-question {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 200, 80, 0.08);
  border: 1px solid rgba(255, 200, 80, 0.25);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 4px 0 16px;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text, #fff);
  letter-spacing: 1px;
}
.captcha-num, .captcha-op, .captcha-eq {
  font-variant-numeric: tabular-nums;
}
.captcha-op { color: #ffd166; }
.captcha-eq { color: var(--text-muted, #a8a8b3); }
#captcha-answer {
  width: 80px;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 200, 80, 0.4);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  color: var(--text, #fff);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  -moz-appearance: textfield;
}
#captcha-answer::-webkit-outer-spin-button,
#captcha-answer::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#captcha-answer:focus {
  border-color: #ffd166;
  background: rgba(255, 209, 102, 0.08);
}
.captcha-submit-btn {
  min-width: 160px;
  margin-top: 4px;
}
.captcha-error {
  color: #ff6b8a;
  font-size: 0.88rem;
  margin: 10px 0 4px;
  font-weight: 600;
}
.captcha-error.shake {
  animation: captchaShake 0.4s ease;
}
@keyframes captchaShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}
.captcha-hint {
  color: var(--text-muted, #a8a8b3);
  font-size: 0.78rem;
  margin: 12px 0 0;
  opacity: 0.8;
  line-height: 1.4;
}
@media (max-width: 540px) {
  .captcha-modal-content { padding: 20px 18px 18px; max-width: 92vw; }
  .captcha-icon { font-size: 2.2rem; }
  .captcha-question { font-size: 1.5rem; gap: 8px; padding: 12px 14px; }
  #captcha-answer { width: 70px; font-size: 1.4rem; }
}

/* ----- Social links section ----- */
.socials {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 22px 22px 26px;
  margin-top: 22px;
  text-align: center;
}
.socials h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  letter-spacing: 0.3px;
}
.socials-sub {
  margin: 0 0 18px;
  font-size: 0.92rem;
  color: rgba(226, 232, 240, 0.72);
  line-height: 1.45;
}
.socials-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.social-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 14px;
  text-decoration: none;
  color: #f8fafc;
  font-weight: 600;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  min-width: 200px;
}
.social-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex-shrink: 0;
}
.social-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}
.social-name {
  font-size: 1rem;
}
.social-handle {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.7);
  margin-top: 2px;
}
/* Telegram brand */
.social-tg .social-icon {
  background: linear-gradient(135deg, #2aabee 0%, #229ed9 100%);
  color: #ffffff;
}
.social-tg:hover {
  border-color: rgba(42, 171, 238, 0.55);
  background: rgba(42, 171, 238, 0.12);
}
/* X / Twitter brand */
.social-x .social-icon {
  background: #000000;
  color: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.28);
}
.social-x:hover {
  border-color: rgba(248, 250, 252, 0.4);
  background: rgba(15, 23, 42, 0.85);
}
@media (max-width: 540px) {
  .socials { padding: 18px 14px 22px; }
  .social-card { min-width: 0; flex: 1 1 100%; justify-content: center; }
}

/* ============================================================
   WALLET PICKER MODAL
   Shown when window.ethereum is missing (Telegram WebView,
   mobile Safari/Chrome, desktop without an extension).
   Reuses .modal / .modal-backdrop / .modal-content / .modal-close
   / .modal-emoji / .modal-lead chassis.
   ============================================================ */
.wallet-picker-content {
  text-align: center;
  max-width: 440px;
}
.wallet-picker-content .modal-title {
  font-size: 22px;
  font-weight: 800;
  margin: 4px 0 8px;
  color: var(--text);
}
.wallet-picker-content .modal-lead {
  margin-bottom: 18px;
}

.wp-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  margin: 0 0 10px 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.wp-option:hover,
.wp-option:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  outline: none;
}
.wp-option:active { transform: scale(0.985); }

.wp-option .wp-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 22px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}
.wp-option .wp-icon-uni {
  color: #ff007a; /* Uniswap pink */
}

.wp-option .wp-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wp-option .wp-name {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wp-option .wp-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wp-option .wp-arrow {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 18px;
  margin-left: 4px;
}

.wp-option-mm {
  background: linear-gradient(180deg, rgba(246, 133, 27, 0.16), rgba(246, 133, 27, 0.05));
  border-color: rgba(246, 133, 27, 0.45);
}
.wp-option-mm:hover,
.wp-option-mm:focus-visible {
  background: linear-gradient(180deg, rgba(246, 133, 27, 0.24), rgba(246, 133, 27, 0.08));
  border-color: rgba(246, 133, 27, 0.7);
}

.wp-option-uni {
  background: linear-gradient(180deg, rgba(255, 0, 122, 0.14), rgba(255, 0, 122, 0.04));
  border-color: rgba(255, 0, 122, 0.40);
}
.wp-option-uni:hover,
.wp-option-uni:focus-visible {
  background: linear-gradient(180deg, rgba(255, 0, 122, 0.22), rgba(255, 0, 122, 0.06));
  border-color: rgba(255, 0, 122, 0.65);
}

.wp-option-copy { /* default subtle styling */ }
.wp-option-copied {
  background: rgba(34, 197, 94, 0.16) !important;
  border-color: rgba(34, 197, 94, 0.55) !important;
}
.wp-option-copied .wp-name { color: #4ade80; }

.wp-option-install {
  background: rgba(255, 255, 255, 0.025);
  border-style: dashed;
}

.wp-guest-hint {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.wp-guest-hint strong { color: var(--text); }

@media (max-width: 420px) {
  .wp-option { padding: 12px 12px; gap: 12px; }
  .wp-option .wp-icon { flex-basis: 32px; width: 32px; height: 32px; font-size: 20px; }
  .wp-option .wp-name { font-size: 14px; }
  .wp-option .wp-sub  { font-size: 12px; }
}

/* Wallet picker status / error lines (WalletConnect feedback) */
.wp-status,
.wp-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}
.wp-status {
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.35);
  color: #cfe2ff;
}
.wp-error {
  background: rgba(220, 38, 38, 0.14);
  border: 1px solid rgba(220, 38, 38, 0.45);
  color: #fecaca;
}