/* ============================================================
   TierUp — vibrant Adopt Me coinflip UI
   ============================================================ */

:root {
  /* Deep-navy base */
  --bg: #13131a;
  --bg-2: #17171f;
  --panel: #1b1b26;
  --panel-2: #222230;
  --panel-3: #2b2b3b;
  --line: #33334a;
  --line-soft: #262636;

  /* Vibrant accents */
  --green: #2af5a6;
  --green-2: #12d488;
  --purple: #b869ff;
  --purple-2: #7c3aed;
  --cyan: #33dcff;
  --pink: #ff5d9e;

  --green-glow: rgba(42, 245, 166, 0.5);
  --purple-glow: rgba(184, 105, 255, 0.5);

  --heads: #2af5a6;
  --tails: #9a6bff;

  /* rarity — Adopt Me + MM2 */
  --r-common: #9aa7bd;
  --r-uncommon: #4fd17a;
  --r-rare: #4aa3ff;
  --r-ultra-rare: #c061ff;
  --r-legendary: #ffb443;
  --r-event: #ff5d8f;
  --r-godly: #ff9d3c;
  --r-vintage: #c084fc;
  --r-ancient: #ff2e4d;
  --r-unobtainable: #ff5d8f;

  --text: #f0ecff;
  --muted: #9a93c4;
  --muted-2: #6a628f;

  --gold: #ffce53;
  --red: #ff5f6d;

  --radius: 18px;
  --radius-sm: 11px;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  --font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --display: "Bricolage Grotesque", var(--font);

  /* Registered gradient stops (animatable) — these cross-fade on game switch.
     Adopt Me values here; MM2 overrides in body.mm2 below. */
  --g1: #2af5a6;  --g2: #33dcff;   /* Create-a-flip + highlights */
  --b1: #c77dff;  --b2: #7c3aed;   /* Play-vs-Bot */
  --brand1: #7c3aed; --brand2: #12d488; /* logo mark */
}
/* Register the stops as <color> so linear-gradient() built from them can tween. */
@property --g1 { syntax: "<color>"; inherits: true; initial-value: #2af5a6; }
@property --g2 { syntax: "<color>"; inherits: true; initial-value: #33dcff; }
@property --b1 { syntax: "<color>"; inherits: true; initial-value: #c77dff; }
@property --b2 { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
@property --brand1 { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
@property --brand2 { syntax: "<color>"; inherits: true; initial-value: #12d488; }

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Cross-fade the whole palette when switching games (Adopt Me ⇄ MM2). */
  transition:
    --g1 0.7s ease, --g2 0.7s ease, --b1 0.7s ease, --b2 0.7s ease,
    --brand1 0.7s ease, --brand2 0.7s ease, background-color 0.7s ease;
}

/* animated aurora backdrop — Adopt Me layer, with an MM2 layer that cross-fades on top */
.aurora {
  position: fixed; inset: -20% -10% auto -10%; height: 70vh; z-index: -1;
  background:
    radial-gradient(50% 60% at 20% 10%, rgba(124, 58, 237, 0.35), transparent 60%),
    radial-gradient(45% 55% at 85% 0%, rgba(37, 232, 154, 0.22), transparent 60%),
    radial-gradient(40% 50% at 55% 30%, rgba(45, 212, 255, 0.16), transparent 60%);
  filter: blur(20px);
  animation: drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
.aurora::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease;
  background:
    radial-gradient(50% 60% at 22% 8%, rgba(255, 46, 77, 0.34), transparent 58%),
    radial-gradient(45% 55% at 85% 0%, rgba(255, 138, 61, 0.22), transparent 60%),
    radial-gradient(40% 50% at 55% 30%, rgba(180, 20, 40, 0.20), transparent 60%);
}
body.mm2 .aurora::after { opacity: 1; }
@keyframes drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.1); } }

button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.green { color: var(--green); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #2e2557; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #3d3170; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================ BUTTONS ============================ */
/* Create-a-flip: bright gradient that cross-fades green→cyan (Adopt Me) to red→orange (MM2). */
.btn-primary {
  border: 0; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%);
  color: #04231a; font-weight: 800; padding: 11px 18px; letter-spacing: 0.2px;
  box-shadow: 0 8px 22px var(--green-glow), 0 0 0 1px rgba(255,255,255,0.05) inset;
  transition: transform 0.16s ease, box-shadow 0.3s ease, filter 0.16s ease, background 0.4s ease;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.1) saturate(1.1); box-shadow: 0 12px 30px var(--green-glow); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; }
.btn-primary.big { padding: 13px 24px; font-size: 15px; }
.btn-primary.full { width: 100%; }

.btn-ghost-lg {
  border: 1px solid var(--line); background: rgba(34, 26, 69, 0.6); color: var(--text);
  border-radius: var(--radius-sm); padding: 13px 22px; font-weight: 700; font-size: 15px;
  transition: 0.12s;
}
.btn-ghost-lg:hover { border-color: var(--purple); background: rgba(124, 58, 237, 0.15); }

.ghost-btn {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--radius-sm); padding: 9px 14px; font-weight: 600; transition: 0.12s;
}
.ghost-btn:hover { background: var(--panel-3); border-color: var(--purple); }
.ghost-btn.small { padding: 7px 11px; }

/* ============================ TOP BAR ============================ */
.topbar {
  height: 68px; display: flex; align-items: center; gap: 18px; padding: 0 22px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(10, 7, 22, 0.75); backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 40;
}
/* Brand glow — ONE single soft pool of light behind the logo AND the wordmark
   together (not a halo per element). isolate + z-index:-1 keeps it behind the
   art without a stacking fight with the sticky topbar. Breathes slowly. */
.brand { display: flex; align-items: center; gap: 12px; min-width: 200px; position: relative; isolation: isolate; }
.brand::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -30px; right: -26px; top: 50%; transform: translateY(-50%);
  height: 88px; border-radius: 999px;
  background: radial-gradient(ellipse at center,
    rgba(42, 245, 166, 0.30) 0%,
    rgba(184, 105, 255, 0.22) 45%,
    transparent 72%);
  filter: blur(22px);
  animation: brandGlow 5s ease-in-out infinite;
}
@keyframes brandGlow {
  0%, 100% { opacity: 0.72; transform: translateY(-50%) scale(0.97); }
  50%      { opacity: 1;    transform: translateY(-50%) scale(1.04); }
}
/* MM2 swaps the site to red/orange — the glow follows. */
body.mm2 .brand::before {
  background: radial-gradient(ellipse at center,
    rgba(255, 46, 77, 0.32) 0%,
    rgba(255, 122, 61, 0.22) 45%,
    transparent 72%);
}
.brand-mark {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 20px;
  background: linear-gradient(135deg, var(--brand1), var(--brand2));
  box-shadow: 0 8px 22px var(--purple-glow);
}
/* When the mark carries the emblem art, drop the gradient plate — the logo is
   already its own shape. The art is wider than it is tall, so height drives the
   size and width follows; never box it into a square or it shrinks to fit. */
.brand-mark.logo {
  background: none; box-shadow: none; border-radius: 0;
  display: block; width: auto; height: auto; flex-shrink: 0;
}
/* Size the image itself — the wrapper is a grid, so a percentage height here has
   no definite base to resolve against and the logo would render full-size. */
/* Plain depth shadow only — the colour comes from the single .brand glow behind. */
.brand-mark.logo img { height: 54px; width: auto; display: block; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.55)); }
.modal-brand .modal-logo { height: 38px; width: auto; vertical-align: middle; }
.brand-name { font-family: var(--display); font-weight: 800; font-size: 23px; letter-spacing: 0.3px; }
.brand-name span { background: linear-gradient(90deg, var(--g1), var(--g2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.top-nav { display: flex; gap: 10px; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.backpack-btn {
  display: flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg, rgba(124,58,237,0.25), rgba(37,232,154,0.12));
  border: 1px solid var(--purple); color: var(--text);
  border-radius: var(--radius-sm); padding: 8px 14px; font-weight: 800; position: relative;
  transition: 0.12s;
}
.backpack-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px var(--purple-glow); }
.bp-icon { font-size: 18px; }
.bp-label { font-size: 13px; }
.bp-count {
  background: var(--green); color: #04231a; font-size: 11px; font-weight: 800;
  min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px;
}

.user-box { display: flex; align-items: center; gap: 10px; }
.user-chip {
  display: flex; align-items: center; gap: 9px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 12px 6px 6px; cursor: pointer;
  color: var(--text); /* keep the name readable — buttons default to black text */
}
.user-chip:hover { border-color: var(--purple); }
.avatar {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; color: #04231a;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  overflow: hidden; flex-shrink: 0;
}
.avatar.has-img { background: var(--panel-3); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-meta { line-height: 1.15; }
.user-name { font-weight: 700; font-size: 13px; color: var(--text); }
.user-sub { font-size: 11px; color: var(--muted); }

/* ============================ LAYOUT ============================ */
.layout {
  display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 20px;
  padding: 20px 28px; max-width: 1900px; margin: 0 auto; align-items: start;
}

/* ============================ SIDEBAR ============================ */
.sidebar {
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px 12px;
  position: sticky; top: 86px; min-height: 72vh; display: flex; flex-direction: column;
}
.side-group-head { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--muted-2); padding: 6px 12px 10px; display: flex; align-items: center; gap: 6px; }
.side-game-tag {
  font-family: var(--font); font-size: 9.5px; font-weight: 800; letter-spacing: 0.4px; letter-spacing: 0.5px;
  background: linear-gradient(135deg, var(--purple), var(--cyan)); color: #04231a;
  padding: 2px 7px; border-radius: 6px; text-transform: none; text-transform: uppercase;
}
.side-link {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--text); padding: 11px 12px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 14px; transition: 0.12s;
}
.side-link .ic { font-size: 16px; width: 20px; text-align: center; }
.side-link:hover { background: var(--panel-2); }
.side-link.active {
  background: linear-gradient(90deg, rgba(37, 232, 154, 0.18), rgba(168, 85, 247, 0.06));
  color: var(--green); box-shadow: inset 2px 0 0 var(--green);
}
.side-link.disabled { color: var(--muted-2); cursor: default; }
.side-link.disabled:hover { background: transparent; }
.live-dot { margin-left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.soon { margin-left: auto; font-size: 9px; font-weight: 800; letter-spacing: 0.5px; background: var(--panel-3); color: var(--muted); padding: 3px 6px; border-radius: 5px; border: 1px solid var(--line); }
/* Red unread counter on a sidebar link — "there are new chats waiting". */
.badge-new {
  margin-left: auto; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800;
  display: grid; place-items: center; border: 0;
  box-shadow: 0 0 10px rgba(255,95,109,0.65);
  animation: badgePulse 1.7s ease-in-out infinite;
}
.badge-new.hidden { display: none; }
@keyframes badgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(255,95,109,0.5); }
  50%      { transform: scale(1.12); box-shadow: 0 0 16px rgba(255,95,109,0.9); }
}
.side-spacer { flex: 1; }

.safety-card {
  margin-top: 14px; background: linear-gradient(160deg, rgba(37, 232, 154, 0.09), rgba(168,85,247,0.04));
  border: 1px solid rgba(37, 232, 154, 0.28); border-radius: var(--radius-sm); padding: 13px;
}
.safety-title { font-weight: 800; color: var(--green); margin-bottom: 6px; font-size: 13px; }
.safety-card p { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.safety-card code { background: #0a0717; padding: 1px 5px; border-radius: 5px; font-size: 10.5px; color: #d6ccff; }

/* ============================ MAIN ============================ */
.main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Game picker — top-level Adopt Me / MM2 switch */
.game-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.game-choice {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 14px 18px; border-radius: var(--radius);
  background: linear-gradient(120deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line); color: var(--text); font-family: inherit;
  transition: transform 0.14s, border-color 0.14s, box-shadow 0.14s;
}
.game-choice:hover:not(.disabled) { transform: translateY(-2px); border-color: var(--purple); box-shadow: 0 12px 28px rgba(124,58,237,0.16); }
.game-choice.active {
  border-color: var(--green);
  background: linear-gradient(120deg, rgba(42,245,166,0.18) 0%, var(--bg-2) 62%);
  box-shadow: 0 0 0 1px var(--green) inset, 0 12px 30px var(--green-glow);
}
.game-choice.disabled { opacity: 0.55; cursor: not-allowed; }
.game-choice.disabled:hover { border-color: var(--line); transform: none; box-shadow: none; }
.gc-icon {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 24px;
  background: var(--panel-3); border: 1px solid var(--line);
}
.game-choice.active .gc-icon {
  background: linear-gradient(135deg, var(--green), var(--cyan)); border-color: transparent;
  box-shadow: 0 6px 18px var(--green-glow);
}
.gc-name { font-family: var(--display); font-weight: 800; font-size: 17px; }
.gc-sub { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.gc-sub .live-dot { width: 7px; height: 7px; }

/* Site footer — legal + disclaimers */
.site-footer {
  margin-top: 30px; padding: 26px 24px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: linear-gradient(180deg, transparent 0%, var(--panel) 100%);
  animation: riseIn 0.5s 0.2s cubic-bezier(0.2,0.8,0.2,1) both;
}
.footer-brand { font-family: var(--display); font-size: 17px; font-weight: 800; margin-bottom: 12px; letter-spacing: 0.4px; }
.footer-brand b { background: linear-gradient(90deg, var(--green), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer-disclaimer { color: var(--muted-2); font-size: 12px; line-height: 1.65; margin: 0 0 10px; max-width: 780px; }
.footer-disclaimer b { color: var(--muted); }
.footer-disclaimer code { background: var(--bg-2); border: 1px solid var(--line); padding: 1px 5px; border-radius: 4px; font-size: 11px; color: var(--muted); }
.footer-links { display: flex; gap: 18px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--muted-2); flex-wrap: wrap; }
.footer-links a { color: var(--muted); transition: color 0.12s; }
.footer-links a:hover { color: var(--text); }

/* Hero */
.hero {
  position: relative; overflow: hidden; border-radius: 22px; padding: 30px 32px;
  border: 1px solid var(--line);
  background: linear-gradient(120deg, rgba(124,58,237,0.18), rgba(20,15,41,0.7) 45%, rgba(37,232,154,0.08));
  display: flex; align-items: center; gap: 20px;
}
.hero-glow { position: absolute; right: -60px; top: -60px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, var(--purple-glow), transparent 70%); pointer-events: none; }
.hero-text { flex: 1; position: relative; z-index: 1; }
.hero-text h1 { font-family: var(--display); margin: 0 0 10px; font-size: 34px; line-height: 1.05; }
.hero-text h1 span { background: linear-gradient(90deg, var(--g1), var(--g2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-text p { margin: 0 0 18px; color: var(--muted); font-size: 14px; max-width: 540px; line-height: 1.55; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-coins { display: flex; gap: -10px; position: relative; }
.hcoin {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 32px;
  font-family: var(--display); position: relative;
  border: 2px solid rgba(255,255,255,0.18);
}
/* glossy 3D highlight */
.hcoin::before {
  content: ""; position: absolute; inset: 6px 6px 40% 6px; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent); pointer-events: none;
}
.hcoin.h { background: radial-gradient(circle at 38% 30%, #4dffbc, #08a866); color: #04231a; box-shadow: 0 12px 34px var(--green-glow), 0 0 44px var(--green-glow); }
.hcoin.t { background: radial-gradient(circle at 38% 30%, #c39cff, #5a30d0); color: #fff; margin-left: -24px; box-shadow: 0 12px 34px var(--purple-glow), 0 0 44px var(--purple-glow); }

/* Ticker */
.ticker-wrap { display: flex; align-items: center; gap: 12px; }
.ticker-label { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--muted-2); }
.ticker { display: flex; gap: 8px; overflow: hidden; padding: 4px 2px; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.flip-bead {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  font-weight: 800; font-size: 15px; border: 1px solid var(--line); animation: beadIn 0.35s ease;
}
.flip-bead.H { color: var(--heads); background: rgba(37,232,154,0.12); border-color: rgba(37,232,154,0.45); box-shadow: 0 0 14px rgba(37,232,154,0.25); }
.flip-bead.T { color: var(--tails); background: rgba(139,92,255,0.12); border-color: rgba(139,92,255,0.45); box-shadow: 0 0 14px rgba(139,92,255,0.2); }
/* MM2: heads = red, tails = steel (match the red/steel coins) */
body.mm2 .flip-bead.H { background: rgba(255,46,77,0.14); border-color: rgba(255,46,77,0.5); box-shadow: 0 0 14px rgba(255,46,77,0.28); }
body.mm2 .flip-bead.T { color: #d7dae2; background: rgba(215,218,226,0.12); border-color: rgba(215,218,226,0.4); box-shadow: 0 0 14px rgba(215,218,226,0.2); }
@keyframes beadIn { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Games head */
.games-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 4px; }
.games-head h2 { font-family: var(--display); margin: 0; font-size: 24px; }
.games-head .muted { margin: 2px 0 0; font-size: 13px; }

/* Filters */
.filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-label { color: var(--muted); font-size: 13px; margin-right: 4px; }
.chip { background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); padding: 8px 14px; border-radius: 9px; font-weight: 700; font-size: 13px; transition: 0.12s; }
.chip:hover { color: var(--text); border-color: var(--purple); }
.chip.active { background: linear-gradient(135deg, var(--green), #13d488); color: #04231a; border-color: transparent; box-shadow: 0 6px 16px var(--green-glow); }

/* ============================ PET THUMBNAIL (shared) ============================ */
.pet {
  position: relative; border-radius: 14px; background: radial-gradient(circle at 50% 30%, #241b48, #120d28);
  border: 2px solid var(--line); display: grid; place-items: center; overflow: visible; flex-shrink: 0;
}
.pet img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5)); }
.pet .pet-fallback { font-size: 1.6em; }
.pet.r-common { border-color: var(--r-common); }
.pet.r-uncommon { border-color: var(--r-uncommon); }
.pet.r-rare { border-color: var(--r-rare); box-shadow: inset 0 0 14px rgba(74,163,255,0.18); }
.pet.r-ultra-rare { border-color: var(--r-ultra-rare); box-shadow: inset 0 0 16px rgba(192,97,255,0.22); }
.pet.r-legendary { border-color: var(--r-legendary); box-shadow: inset 0 0 18px rgba(255,180,67,0.25); }
.pet.r-event { border-color: var(--r-event); box-shadow: inset 0 0 16px rgba(255,93,143,0.22); }
.pet.r-godly { border-color: var(--r-godly); box-shadow: inset 0 0 18px rgba(255,157,60,0.28); }
.pet.r-vintage { border-color: var(--r-vintage); box-shadow: inset 0 0 16px rgba(192,132,252,0.24); }
.pet.r-ancient { border-color: var(--r-ancient); box-shadow: inset 0 0 20px rgba(255,46,77,0.32); }
.pet.r-unobtainable { border-color: var(--r-unobtainable); box-shadow: inset 0 0 16px rgba(255,93,143,0.24); }

/* neon glow dot indicator (Mega Neon was removed from Adopt Me) */
.pet .glow-dot { position: absolute; bottom: -5px; right: -5px; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--bg-2); }
.pet.glow-neon .glow-dot { background: var(--gold); box-shadow: 0 0 10px 2px var(--gold); animation: neonPulse 1.4s ease-in-out infinite; }
.pet.glow-neon { box-shadow: 0 0 16px rgba(255,206,83,0.35); }
@keyframes neonPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.18); } }

/* ============================ GAME CARDS ============================ */
.game-list { display: flex; flex-direction: column; gap: 12px; }
.game-card {
  display: flex; align-items: center; gap: 18px;
  background: linear-gradient(120deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 18px;
  transition: border-color 0.18s ease, transform 0.18s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.25s ease, background 0.25s ease;
  animation: cardIn 0.3s ease; transform-origin: center;
}
.game-card:hover {
  border-color: var(--purple);
  transform: translateY(-3px) scale(1.015);
  background: linear-gradient(120deg, var(--panel-2) 0%, var(--panel) 100%);
  box-shadow: 0 16px 40px rgba(184,105,255,0.22), 0 0 0 1px rgba(184,105,255,0.3);
}
/* CTA pops when its row is hovered */
.game-card:hover .join-btn:not(.flipping),
.game-card:hover .btn-bot { transform: translateY(-2px) scale(1.05); filter: brightness(1.12) saturate(1.12); }
body.mm2 .game-card:hover { border-color: #ff2e4d; box-shadow: 0 16px 40px rgba(255,46,77,0.22), 0 0 0 1px rgba(255,46,77,0.3); }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.gc-versus { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.gc-coin { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 17px; border: 2px solid; font-family: var(--display); }
.gc-coin.H { color: var(--heads); border-color: rgba(37,232,154,0.6); background: rgba(37,232,154,0.1); }
.gc-coin.T { color: var(--tails); border-color: rgba(139,92,255,0.6); background: rgba(139,92,255,0.1); }
.gc-coin.empty { color: var(--muted-2); border-style: dashed; border-color: var(--line); background: transparent; }
.gc-vs { font-weight: 800; color: var(--muted-2); font-size: 13px; font-family: var(--display); }

.gc-pets { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; }
.gc-pets .pet { width: 52px; height: 52px; }
.pet.more { background: var(--panel-2); font-size: 14px; font-weight: 800; color: var(--muted); border-style: dashed; }

.gc-value { text-align: right; flex-shrink: 0; min-width: 92px; }
.gc-value .v-main { font-family: var(--display); font-weight: 800; font-size: 19px; display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.gc-value .v-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.gc-value .v-sub { font-size: 11px; color: var(--muted-2); margin-top: 2px; }

.gc-actions { display: flex; gap: 8px; flex-shrink: 0; }
.icon-btn { width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); display: grid; place-items: center; font-size: 16px; }
.icon-btn:hover { color: var(--text); border-color: var(--purple); }
.join-btn { padding: 11px 22px; }
.join-btn.flipping { background: var(--panel-3); color: var(--muted); box-shadow: none; pointer-events: none; }

.empty-state { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty-emoji { font-size: 46px; margin-bottom: 8px; }
.empty-state h3 { margin: 0 0 4px; color: var(--text); }
.empty-state p { margin: 0 0 16px; }
.empty-mini { text-align: center; color: var(--muted); padding: 28px; font-size: 14px; }

/* ============================ CHAT MESSAGE BUBBLES (shared by the widget) ============================ */
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px; border-bottom: 1px solid var(--line-soft); font-weight: 800; letter-spacing: 0.5px; font-family: var(--display); }
.online { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.chat-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 14px; }
.chat-msg { display: flex; gap: 10px; animation: cardIn 0.25s ease; }
.chat-av { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; font-size: 15px; background: var(--panel-3); border: 1px solid var(--line); }
.chat-content { min-width: 0; }
.chat-name { font-weight: 700; font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.chat-name .admin { font-size: 9px; font-weight: 800; color: var(--pink); background: rgba(255,93,158,0.14); padding: 1px 5px; border-radius: 4px; }
.chat-name .time { color: var(--muted-2); font-weight: 500; font-size: 10.5px; margin-left: auto; }
.chat-text { color: var(--muted); font-size: 13px; margin-top: 2px; word-break: break-word; }
.chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line-soft); }
.chat-input input { flex: 1; background: var(--bg-2); border: 1px solid var(--line); color: var(--text); border-radius: var(--radius-sm); padding: 11px 13px; font-size: 13px; outline: none; }
.chat-input input:focus { border-color: var(--green); }
.chat-input button { width: 44px; border: 0; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--green), var(--cyan)); color: #04231a; font-size: 16px; }

/* ============================ LEGAL (terms / privacy) ============================ */
.legal-body {
  max-height: 58vh; overflow-y: auto; padding-right: 10px; margin-top: 4px;
  font-size: 13.5px; line-height: 1.62; color: var(--muted);
}
.legal-body h4 {
  font-family: var(--display); font-size: 14px; font-weight: 800; color: var(--text);
  margin: 18px 0 5px;
}
.legal-body h4:first-child { margin-top: 4px; }
.legal-body p { margin: 0 0 8px; }
.legal-body ul { margin: 0 0 10px; padding-left: 18px; }
.legal-body li { margin-bottom: 6px; }
.legal-body b { color: var(--text); }
.legal-body code {
  font-size: 11.5px; background: var(--panel-3); border: 1px solid var(--line);
  padding: 1px 5px; border-radius: 4px;
}

/* ============================ SPINNERS (anything that makes us wait) ============================ */
.spinner {
  display: inline-block; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: currentColor;
  animation: spin 0.6s linear infinite; vertical-align: -2px;
}
.spinner.lg { width: 26px; height: 26px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }
/* A button mid-action: keeps its size so the layout doesn't jump. */
button[data-busy] { cursor: progress; opacity: 0.85; }
/* Block-level "we're fetching this" placeholder for lists/panels. */
.loading-block {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 46px 20px; color: var(--muted); font-size: 14px; font-weight: 600;
}

/* ============================ FLOATING CHAT WIDGET ============================ */
/* The root is just the corner anchor; the bubble sits in it and the panel floats
   ABOVE the bubble (absolutely positioned) so the bubble never leaves the corner. */
.cw-root { position: fixed; right: 22px; bottom: 22px; z-index: 120; }
.cw-root.hidden { display: none; }

/* Launcher bubble */
.cw-fab {
  position: relative; width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--green), var(--cyan)); color: #04231a; font-size: 26px;
  display: grid; place-items: center; box-shadow: 0 10px 30px rgba(37,232,154,0.4), 0 2px 8px rgba(0,0,0,0.3);
  transition: transform 0.2s cubic-bezier(0.2,0.9,0.3,1.3), box-shadow 0.2s; align-self: flex-end;
}
.cw-fab:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 14px 36px rgba(37,232,154,0.5); }
.cw-fab:active { transform: scale(0.96); }
body.mm2 .cw-fab { background: linear-gradient(135deg, #ff2e4d, #ff7a3d); color: #fff; box-shadow: 0 10px 30px rgba(255,46,77,0.4), 0 2px 8px rgba(0,0,0,0.3); }
.cw-fab .cw-fab-close { display: none; font-size: 22px; }
.cw-root.open .cw-fab .cw-fab-open { display: none; }
.cw-root.open .cw-fab .cw-fab-close { display: block; }
.cw-badge {
  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--pink); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center;
  border: 2px solid var(--bg); box-shadow: 0 2px 8px rgba(255,93,158,0.5);
}
.cw-badge.hidden { display: none; }

/* Panel that folds out of the bubble */
.cw-panel {
  position: absolute; right: 0; bottom: 74px;
  width: 360px; max-width: calc(100vw - 32px); height: 520px; max-height: calc(100vh - 120px);
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line-soft); border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03);
  display: flex; flex-direction: column;
  transform-origin: bottom right; transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2,0.9,0.3,1.2);
  opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none;
}
.cw-root.open .cw-panel { opacity: 1; transform: none; pointer-events: auto; }

.cw-view { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cw-view.hidden { display: none; }
.cw-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); background: rgba(255,255,255,0.02); }
.cw-title { font-family: var(--display); font-weight: 800; font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-x, .cw-back { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 16px; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.cw-x:hover, .cw-back:hover { color: var(--text); border-color: var(--purple); }
.cw-back { font-size: 20px; }

/* List view */
.cw-list-body { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.cw-conv { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--panel-2); color: var(--text); cursor: pointer; transition: border-color 0.15s, transform 0.12s; }
.cw-conv:hover { border-color: var(--purple); transform: translateY(-1px); }
.cw-conv-ic { font-size: 20px; flex-shrink: 0; }
.cw-conv-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cw-conv-title { font-weight: 700; font-size: 13px; }
.cw-conv-prev { font-size: 12px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-conv-badge { flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--pink); color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; }
.cw-empty { color: var(--muted-2); font-size: 13px; text-align: center; padding: 30px 20px; line-height: 1.5; }
.cw-list-foot { padding: 12px; border-top: 1px solid var(--line-soft); }

/* Thread view — reuses .chat-msg / .chat-av / .chat-content bubbles */
.cw-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.cw-msg.me { flex-direction: row-reverse; }
.cw-msg.me .chat-content { text-align: right; }
.cw-msg.me .chat-name { flex-direction: row-reverse; }
.cw-msg.me .chat-name .time { margin-left: 0; margin-right: auto; }
.cw-msg.me .chat-av { background: linear-gradient(135deg, var(--green), var(--cyan)); color: #04231a; border: 0; }
.cw-sys { align-self: center; text-align: center; max-width: 90%; font-size: 12px; color: var(--muted-2); background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 12px; line-height: 1.45; }
.cw-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line-soft); }
.cw-input input { flex: 1; background: var(--bg-2); border: 1px solid var(--line); color: var(--text); border-radius: var(--radius-sm); padding: 11px 13px; font-size: 13px; outline: none; }
.cw-input input:focus { border-color: var(--green); }
.cw-input button { width: 44px; border: 0; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--green), var(--cyan)); color: #04231a; font-size: 16px; cursor: pointer; }

@media (max-width: 480px) {
  .cw-root { right: 14px; bottom: 14px; }
  .cw-panel { width: calc(100vw - 28px); height: calc(100vh - 120px); }
}

/* ============================ MODALS ============================ */
.modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(4, 3, 10, 0.78); backdrop-filter: blur(7px); display: grid; place-items: center; padding: 20px; animation: fadeIn 0.18s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 430px; background: linear-gradient(180deg, var(--panel-2) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line); border-radius: 22px; padding: 26px; box-shadow: var(--shadow); position: relative;
  animation: modalIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); max-height: 92vh; overflow-y: auto;
}
.modal.wide { max-width: 640px; }
.modal.xwide { max-width: 820px; }
@keyframes modalIn { from { transform: translateY(14px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 9px; background: var(--panel-3); border: 1px solid var(--line); color: var(--muted); font-size: 14px; z-index: 2; }
.modal-close:hover { color: var(--text); }
.modal-brand { font-family: var(--display); font-size: 23px; font-weight: 800; text-align: center; margin-bottom: 20px; }
.modal-brand b { background: linear-gradient(90deg, var(--green), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.modal-title { font-family: var(--display); margin: 0 0 6px; font-size: 21px; }
.modal-sub { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.demo-note { color: var(--muted-2); font-style: italic; }
.modal-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

.roblox-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #131722; font-weight: 800; border-radius: var(--radius-sm); padding: 13px; font-size: 15px; transition: 0.12s; box-shadow: 0 8px 20px rgba(0,0,0,0.35); }
.roblox-btn:hover { transform: translateY(-1px); }
.rbx-logo { background: #131722; color: #fff; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-weight: 800; }
.rbx-tag { font-size: 10px; font-weight: 700; color: #6b7280; }

.divider { display: flex; align-items: center; gap: 12px; color: var(--muted-2); font-size: 12px; margin: 18px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.tabs { display: flex; gap: 6px; background: var(--bg-2); padding: 4px; border-radius: var(--radius-sm); margin-bottom: 16px; }
.tab { flex: 1; background: transparent; border: 0; color: var(--muted); font-weight: 700; padding: 9px; border-radius: 8px; }
.tab.active { background: var(--panel-3); color: var(--text); }

.auth-form { display: flex; flex-direction: column; gap: 11px; }
.auth-form input, #linkUser, .modal input[type="text"], .modal input[type="password"], .search-input {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; outline: none;
}
.auth-form input:focus, #linkUser:focus, .search-input:focus { border-color: var(--green); }
.hint { font-size: 11.5px; color: var(--muted-2); margin: 2px 0 0; line-height: 1.5; }
.field-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.auth-msg { margin-top: 12px; font-size: 13px; text-align: center; min-height: 18px; }
.auth-msg.error { color: var(--red); }
.auth-msg.ok { color: var(--green); }

.token-box { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.step { font-size: 12px; color: var(--muted); margin: 12px 0 8px; font-weight: 600; }
.step:first-child { margin-top: 0; }
.token-row { display: flex; gap: 8px; align-items: center; }
.token-row code { flex: 1; background: var(--bg-2); border: 1px solid var(--line); color: var(--green); padding: 11px 13px; border-radius: var(--radius-sm); font-weight: 700; letter-spacing: 0.5px; }

/* Inventory / pet grids */
.inv-stat { display: flex; justify-content: space-between; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 15px; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.inv-stat b { color: var(--text); }
.pet-grid { display: grid; gap: 10px; padding: 4px; }
.pet-grid.big { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); max-height: 360px; overflow-y: auto; margin-bottom: 8px; }

.pet-cell { background: var(--bg-2); border: 1px solid var(--line); border-radius: 13px; padding: 10px 8px 8px; text-align: center; transition: 0.12s; cursor: pointer; position: relative; }
.pet-cell:hover { border-color: var(--purple); }
.pet-cell.selected { border-color: var(--green); background: rgba(37,232,154,0.08); box-shadow: 0 0 0 1px var(--green) inset; }
.pet-cell.selected::after { content: "✓"; position: absolute; top: 6px; left: 8px; color: var(--green); font-weight: 800; font-size: 13px; z-index: 3; }
.pet-cell.locked { opacity: 0.4; pointer-events: none; }
.pet-cell .pet { width: 100%; aspect-ratio: 1; margin-bottom: 6px; }
.pet-cell .pc-name { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pet-cell .pc-val { font-size: 11px; color: var(--green); font-weight: 800; margin-top: 1px; }
.pet-cell .pc-tier { font-size: 9px; color: var(--gold); font-weight: 700; }

.catalog-controls { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.catalog-controls .search-input { flex: 1; min-width: 160px; }
.select-input { background: var(--bg-2); border: 1px solid var(--line); color: var(--text); border-radius: var(--radius-sm); padding: 11px 13px; font-size: 13px; outline: none; font-weight: 600; }
.select-input:focus { border-color: var(--green); }
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; max-height: 50vh; overflow-y: auto; padding: 4px; }
.deposit-bar, .stake-summary { display: flex; justify-content: space-between; align-items: center; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 15px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.stake-summary { margin: 0 0 14px; }
.stake-summary b, .deposit-bar b { color: var(--text); }
.stake-val b { color: var(--green); }

/* side picker */
.side-picker { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 16px; }
.side-opt { display: flex; align-items: center; gap: 9px; background: var(--bg-2); border: 2px solid var(--line); color: var(--muted); padding: 12px 22px; border-radius: 12px; font-weight: 800; font-size: 15px; transition: 0.14s; }
.side-opt .coin-face { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; background: var(--panel-3); font-family: var(--display); }
.side-opt.heads.active { border-color: var(--heads); color: var(--heads); box-shadow: 0 0 18px rgba(37,232,154,0.22); }
.side-opt.heads.active .coin-face { background: rgba(37,232,154,0.2); }
.side-opt.tails.active { border-color: var(--tails); color: var(--tails); box-shadow: 0 0 18px rgba(139,92,255,0.22); }
.side-opt.tails.active .coin-face { background: rgba(139,92,255,0.2); }
.side-vs { font-weight: 800; color: var(--muted-2); font-family: var(--display); }

/* join modal extras */
.join-opp { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px; }
.join-opp-label { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.pet-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pet-row .pet { width: 46px; height: 46px; }
.join-meter { margin-bottom: 14px; }
.join-meter-bar { height: 8px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.join-meter-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--cyan)); transition: width 0.25s ease; }
.join-meter-fill.enough { background: linear-gradient(90deg, var(--green), #13d488); }
.join-meter-text { font-size: 12px; color: var(--muted); margin-top: 6px; text-align: right; }
.join-meter-text b { color: var(--text); }

/* Flip modal */
.flip-modal { max-width: 720px; }
.flip-arena { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start; margin: 8px 0 18px; }
.flip-player { text-align: center; }
.fp-name { font-family: var(--display); font-weight: 800; font-size: 15px; margin-bottom: 10px; min-height: 19px; }
.fp-side { width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center; font-weight: 800; border: 2px solid; font-family: var(--display); }
.fp-side.heads { color: var(--heads); border-color: var(--heads); background: rgba(37,232,154,0.12); }
.fp-side.tails { color: var(--tails); border-color: var(--tails); background: rgba(139,92,255,0.12); }
.fp-pets { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 46px; }
.fp-pets .pet { width: 46px; height: 46px; }
.fp-val { margin-top: 10px; font-weight: 800; color: var(--green); font-family: var(--display); }
.flip-player.win { animation: winPulse 0.6s ease; }
.flip-player.lose { opacity: 0.4; }
@keyframes winPulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.05);} }

.flip-center { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 6px; }
/* The coin is driven from JS (see spinCoin/landCoin in app.js): it whips round
   fast, decelerates while we wait on the server, then swings dramatically onto
   the winning face. Transform/transition are set inline, so no animation or
   `show-t` rule here — either would fight the JS for control of transform. */
.coin { width: 96px; height: 96px; border-radius: 50%; position: relative; transform-style: preserve-3d; }
.coin-side { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; display: grid; place-items: center; font-size: 38px; font-weight: 800; font-family: var(--display); }
.coin-h { background: radial-gradient(circle at 40% 35%, #2af0a4, #0c9b62); color: #04231a; box-shadow: 0 0 26px var(--green-glow); }
.coin-t { background: radial-gradient(circle at 40% 35%, #a07bff, #5a30d0); color: #fff; transform: rotateY(180deg); }
/* (No motion blur — the coin turns slowly enough to read both faces.) */
/* Flash of light the moment it settles on the winner. */
.coin.landed .coin-side { animation: coinLandFlash 0.55s ease-out; }
@keyframes coinLandFlash {
  0%   { box-shadow: 0 0 60px 14px rgba(255,255,255,0.75); filter: brightness(1.6); }
  100% { box-shadow: 0 0 26px var(--green-glow); filter: brightness(1); }
}
.flip-status { font-family: var(--display); font-weight: 800; font-size: 16px; text-align: center; }
.flip-pot { font-size: 12px; color: var(--muted); }
.flip-pot b { color: var(--text); }

.flip-actions { margin-top: 16px; display: flex; justify-content: center; }

/* Toasts */
.toast-wrap { position: fixed; bottom: 22px; right: 22px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--panel-3); border: 1px solid var(--line); color: var(--text); padding: 13px 18px; border-radius: var(--radius-sm); box-shadow: var(--shadow); font-weight: 600; font-size: 13px; max-width: 320px; animation: toastIn 0.25s ease; border-left: 3px solid var(--green); }
.toast.error { border-left-color: var(--red); }
@keyframes toastIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================ WIN / LOSE ANIMATIONS ============================ */
.confetti-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; border-radius: 22px; }
.confetti-wrap.fullscreen { position: fixed; inset: 0; border-radius: 0; z-index: 600; overflow: hidden; }
.confetti-piece { position: absolute; opacity: 0.95; will-change: transform; border-radius: 2px; }
/* Confetti cannons — pieces launch from the bottom corners, arc up + out, then fall. */
.confetti-piece.cannon { bottom: -14px; animation-name: cannonBurst; animation-timing-function: cubic-bezier(0.15, 0.6, 0.4, 1); animation-fill-mode: forwards; }
.confetti-piece.cannon.left { left: 4vw; }
.confetti-piece.cannon.right { right: 4vw; }
@keyframes cannonBurst {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  32%  { transform: translate(calc(var(--dx) * 0.55), calc(var(--peak) * -1)) rotate(220deg); opacity: 1; }
  100% { transform: translate(var(--dx), 24vh) rotate(680deg); opacity: 0; }
}

/* Gold burst flash across the screen on a win. */
.gold-flash {
  position: fixed; inset: 0; z-index: 590; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(255,206,83,0.5), rgba(42,245,166,0.18) 35%, transparent 62%);
  animation: goldFlash 0.7s ease-out forwards;
}
@keyframes goldFlash { 0% { opacity: 0; transform: scale(0.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
body.mm2 .gold-flash { background: radial-gradient(circle at 50% 45%, rgba(255,206,83,0.5), rgba(255,46,77,0.22) 35%, transparent 62%); }

/* Win / lose loot cards inside the flip actions */
.win-loot, .lose-loot { text-align: center; padding: 4px 0; animation: rowIn 0.35s ease; position: relative; }
/* Rotating light rays behind the win amount */
.win-rays {
  position: absolute; top: -14px; left: 50%; width: 320px; height: 320px; transform: translateX(-50%);
  background: repeating-conic-gradient(from 0deg, rgba(42,245,166,0.16) 0deg 10deg, transparent 10deg 24deg);
  border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(1px);
  animation: rayspin 9s linear infinite; mask-image: radial-gradient(circle, #000 20%, transparent 68%); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%);
}
body.mm2 .win-rays { background: repeating-conic-gradient(from 0deg, rgba(255,46,77,0.18) 0deg 10deg, transparent 10deg 24deg); }
@keyframes rayspin { to { transform: translateX(-50%) rotate(360deg); } }
.win-loot > *:not(.win-rays) { position: relative; z-index: 1; }
.wl-title { font-family: var(--display); font-weight: 800; font-size: 20px; margin-bottom: 4px; }
.win-loot .wl-title { font-size: 24px; }
.wl-amount {
  display: inline-block; font-size: 30px; font-weight: 800;
  background: linear-gradient(90deg, var(--green), var(--cyan), #ffce53); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: amountPunch 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both, winPulseText 1.2s 0.6s ease infinite alternate;
}
body.mm2 .wl-amount { background: linear-gradient(90deg, #ff2e4d, #ff8a3d, #ffce53); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes amountPunch { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 1; } }
@keyframes winPulseText { from { transform: scale(1); } to { transform: scale(1.06); } }
.wl-sub { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.wl-pets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 14px; }
.wl-pets .pet { width: 54px; height: 54px; animation: petLand 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.wl-pets .pet:nth-child(1) { animation-delay: 0.05s; }
.wl-pets .pet:nth-child(2) { animation-delay: 0.12s; }
.wl-pets .pet:nth-child(3) { animation-delay: 0.19s; }
.wl-pets .pet:nth-child(4) { animation-delay: 0.26s; }
.wl-pets .pet:nth-child(5) { animation-delay: 0.33s; }
.wl-pets .pet:nth-child(6) { animation-delay: 0.40s; }
.wl-pets.lost .pet { animation: none; opacity: 0.5; filter: grayscale(0.8); }
@keyframes petLand { from { opacity: 0; transform: translateY(-30px) scale(0.4); } to { opacity: 1; transform: none; } }
.flip-player.win { animation: winBounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; }
.flip-player.win::after {
  content: "WINNER";
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--green), var(--cyan));
  color: #04231a; font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: 1.5px;
  padding: 3px 12px; border-radius: 7px; box-shadow: 0 6px 18px var(--green-glow);
  animation: winnerPop 0.5s ease;
}
.flip-player.win .fp-side { box-shadow: 0 0 32px var(--green-glow); }
@keyframes winBounce { 0%,100% { transform: scale(1);} 30% { transform: scale(1.12); } 60% { transform: scale(0.98); } }
@keyframes winnerPop { from { opacity: 0; transform: translateX(-50%) scale(0.6); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
.flip-player.lose { animation: loseDim 0.5s ease forwards; }
.flip-player.lose .fp-pets .pet { animation: petPoof 0.7s ease forwards; }
@keyframes loseDim { to { opacity: 0.35; filter: grayscale(0.7); } }
@keyframes petPoof { 0% { transform: scale(1) translateY(0); } 60% { transform: scale(0.5) translateY(-10px); opacity: 0.5; } 100% { transform: scale(0.2) translateY(30px); opacity: 0; } }
.flip-modal.shake, .modal.shake { animation: modalShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes modalShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

/* Chat: gentle fade-out near TTL so messages don't pop out abruptly */
.chat-msg.fading { transition: opacity 8s ease, transform 8s ease; opacity: 0; transform: translateX(-10px); }

/* ============================ DEPOSIT-ONLY / WITHDRAWAL UI ============================ */
.btn-warn {
  border: 0; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--gold), #ff9d3c);
  color: #2a1800; font-weight: 800; padding: 11px 18px;
  box-shadow: 0 10px 24px rgba(255, 157, 60, 0.32);
  transition: transform 0.12s, filter 0.12s;
}
.btn-warn:hover { transform: translateY(-1px); filter: brightness(1.06); }

.withdraw-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: linear-gradient(120deg, rgba(255, 206, 83, 0.16), rgba(255, 157, 60, 0.06));
  border: 1px solid rgba(255, 206, 83, 0.4); border-radius: var(--radius-sm);
  padding: 11px 15px; margin-bottom: 14px; font-size: 13px; color: var(--muted);
  animation: slideDown 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.withdraw-bar b { color: var(--text); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.pc-lock { font-size: 9px; color: var(--gold); font-weight: 700; margin-top: 1px; }
.pet-cell.locked { position: relative; }

.empty-state-card {
  text-align: center; padding: 36px 26px; margin: 8px 0;
  background: radial-gradient(120% 100% at 50% 0%, rgba(124, 58, 237, 0.12), transparent 70%);
  border: 1px dashed var(--line); border-radius: var(--radius);
}
.empty-state-card .empty-emoji { font-size: 44px; margin-bottom: 8px; animation: floaty 3s ease-in-out infinite; }
.empty-state-card h3 { font-family: var(--display); margin: 0 0 6px; font-size: 18px; }
.empty-state-card p { color: var(--muted); margin: 0 auto 16px; max-width: 380px; line-height: 1.55; font-size: 13px; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.pending-wrap { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.pending-title { font-size: 12px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px; }
.pending-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 14px; margin-bottom: 8px; font-size: 13px; animation: slideDown 0.25s ease;
}
.wd-badge { font-size: 10px; font-weight: 800; letter-spacing: 0.4px; padding: 2px 8px; border-radius: 7px; margin-left: 6px; }
.wd-badge.pending { background: rgba(255, 206, 83, 0.16); color: var(--gold); }
.wd-badge.progress { background: rgba(45, 212, 255, 0.16); color: var(--cyan); }

/* How-it-works modal */
.how-steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.how-steps li { display: flex; gap: 13px; align-items: flex-start; animation: slideRight 0.4s ease backwards; }
.how-steps li:nth-child(1) { animation-delay: 0.05s; }
.how-steps li:nth-child(2) { animation-delay: 0.13s; }
.how-steps li:nth-child(3) { animation-delay: 0.21s; }
.how-steps li:nth-child(4) { animation-delay: 0.29s; }
@keyframes slideRight { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.how-num {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--display); font-weight: 800;
  background: linear-gradient(135deg, var(--purple-2), var(--green-2)); color: #fff;
  box-shadow: 0 6px 16px var(--purple-glow);
}
.how-steps b { font-size: 14px; }
.how-steps p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.safety-inline {
  background: rgba(37, 232, 154, 0.08); border: 1px solid rgba(37, 232, 154, 0.25);
  border-radius: var(--radius-sm); padding: 11px 14px; font-size: 12px; color: var(--muted); line-height: 1.5;
}

.admin-pill { color: var(--gold) !important; border-color: rgba(255, 206, 83, 0.45) !important; font-weight: 800; }
.admin-pill:hover { background: rgba(255, 206, 83, 0.12) !important; }

/* ===== Live stats strip (fills the space under the ticker) ===== */
.stats-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.stat-pill {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(120deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
  transition: border-color 0.14s, transform 0.14s;
  animation: riseIn 0.5s 0.1s cubic-bezier(0.2,0.8,0.2,1) both;
}
.stat-pill:hover { border-color: var(--purple); transform: translateY(-2px); }
.sp-ic { font-size: 22px; width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--panel-3); border: 1px solid var(--line); border-radius: 12px; }
.sp-num { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.05; }
.sp-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted-2); margin-top: 2px; }
@media (max-width: 760px) { .stats-strip { grid-template-columns: repeat(2, 1fr); } }

/* ===== Backpack toolbar (deposit button no longer collides with the X) ===== */
.inv-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px 10px 15px; margin-bottom: 14px; flex-wrap: wrap;
}
.inv-stat-inline { display: flex; gap: 18px; font-size: 13px; color: var(--muted); }
.inv-stat-inline b { color: var(--text); }
.inv-stat-inline b.green { color: var(--green); }
.toolbar-right { display: flex; align-items: center; gap: 8px; }

/* Value asc/desc sort toggle (backpack + admin picker) */
.sort-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  border-radius: var(--radius-sm); padding: 8px 12px; font-weight: 700; font-size: 12.5px; transition: 0.12s;
}
.sort-btn:hover { color: var(--text); border-color: var(--purple); }
.sort-btn span { font-size: 13px; color: var(--green); }
body.mm2 .sort-btn span { color: #ff5d6b; }

/* ===== Minimum-stake hint ===== */
.min-hint { font-size: 12px; font-weight: 600; margin: -4px 0 12px; min-height: 16px; }
.min-hint.short { color: var(--gold); }
.min-hint.ok { color: var(--green); }

/* ===== Join "worth it?" verdict ===== */
.join-worth { font-size: 12.5px; font-weight: 700; margin: -6px 0 14px; min-height: 16px; text-align: center; }
.join-worth.good { color: var(--green); }
.join-worth.warn { color: var(--gold); }
.join-worth.bad { color: var(--red); }

/* Call-bot / Play-vs-Bot button */
/* Play-vs-Bot: cross-fading purple (Adopt Me) → hot-pink/orange (MM2). */
.btn-bot {
  border: 0; border-radius: var(--radius-sm); padding: 11px 18px; font-weight: 800; white-space: nowrap;
  background: linear-gradient(135deg, var(--b1) 0%, var(--b2) 100%); color: #fff;
  box-shadow: 0 8px 22px var(--purple-glow); transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.3s ease, background 0.4s ease;
  position: relative; overflow: hidden;
}
.btn-bot.big { padding: 13px 24px; font-size: 15px; }
.btn-bot:hover { transform: translateY(-2px); filter: brightness(1.12) saturate(1.1); box-shadow: 0 12px 30px var(--purple-glow); }
.btn-bot:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }
.btn-bot::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-20deg); transition: left 0.5s ease;
}
.btn-bot:hover::after { left: 140%; }

.games-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }


/* ============================ MOTION LAYER ============================ */
/* Page-load entrances (staggered) */
.hero { animation: riseIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ticker-wrap { animation: riseIn 0.5s 0.06s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.games-head { animation: riseIn 0.5s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.filters { animation: riseIn 0.5s 0.16s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.sidebar { animation: slideInLeft 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* Hero text + coins flourish */
.hero-text h1 { animation: riseIn 0.6s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero-text p { animation: riseIn 0.6s 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero-actions { animation: riseIn 0.6s 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero-coins { animation: riseIn 0.7s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
/* Continuous premium float — gentle vertical loop with a slight tilt wobble */
.hcoin.h { --r: -10deg; animation: riseIn 0.7s 0.2s cubic-bezier(0.2,0.8,0.2,1) both, coinFloatH 4.2s 1s ease-in-out infinite; }
.hcoin.t { --r: 9deg; animation: riseIn 0.7s 0.3s cubic-bezier(0.2,0.8,0.2,1) both, coinFloatT 4.6s 1.3s ease-in-out infinite; }
@keyframes coinFloatH {
  0%,100% { transform: translateY(0) rotate(-10deg); }
  50%     { transform: translateY(-12px) rotate(-4deg); }
}
@keyframes coinFloatT {
  0%,100% { transform: translateY(-4px) rotate(9deg); }
  50%     { transform: translateY(8px) rotate(3deg); }
}

/* Brand mark spins on hover */
/* (No hover spin on the brand mark — the logo stays put.) */

/* Primary buttons get a sweeping shine */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg); transition: left 0.5s ease;
}
.btn-primary:hover::after { left: 140%; }

/* Game cards enter/leave + hover */
.game-card.card-in { animation: cardPop 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.game-card.card-out { animation: cardOut 0.24s ease forwards; }
@keyframes cardPop { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes cardOut { to { opacity: 0; transform: translateX(24px) scale(0.96); } }
.game-card .gc-coin { transition: transform 0.2s; }
.game-card:hover .gc-coin.H, .game-card:hover .gc-coin.T { transform: scale(1.08) rotate(-6deg); }
.join-btn { position: relative; }
.game-card:hover .join-btn:not(.flipping) { animation: nudge 0.6s ease infinite; }
@keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(2px); } }

/* Pet thumbs lift on hover */
.pet { transition: transform 0.16s ease, box-shadow 0.16s ease; }
.pet-cell:hover .pet, .gc-pets .pet:hover { transform: translateY(-3px) scale(1.05); }
.pet-cell { transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s; }
.pet-cell:active { transform: scale(0.96); }

/* Sidebar links slide their icon on hover */
.side-link .ic { transition: transform 0.16s ease; }
.side-link:hover .ic { transform: translateX(3px) scale(1.1); }

/* Filter chips pop when activated */
.chip.active { animation: chipPop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
@keyframes chipPop { 0% { transform: scale(0.9); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* Backpack count badge pulses on change */
.bp-count { transition: transform 0.2s; }
.backpack-btn:hover .bp-count { transform: scale(1.15); }

/* NOTE: no transform-based idle animation on .coin — app.js owns its transform
   frame-by-frame to spin and land it. The wrapper floats instead. */
.flip-center { animation: centerFloat 2.8s ease-in-out infinite; }
@keyframes centerFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Online dot + live dot breathe (live-dot already pulses) */
.online-dot { animation: pulse 1.8s infinite; }

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

/* ============================ RESPONSIVE ============================ */
/* ULTRAWIDE (≥1900px) — give content more room so the page doesn't feel cramped */
@media (min-width: 1900px) {
  .layout { max-width: 1880px; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; padding: 24px; }
  .game-card { padding: 20px 24px; gap: 24px; }
  .gc-pets .pet { width: 60px; height: 60px; }
  .hero { padding: 44px 48px; }
  .hero-text h1 { font-size: 42px; }
  .pet-grid.big { max-height: 440px; }
}
@media (min-width: 2400px) {
  .layout { max-width: 2200px; grid-template-columns: 320px minmax(0, 1fr); }
  .hero-text h1 { font-size: 50px; }
}
@media (max-width: 1200px) {
  .layout { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; padding: 12px; }
  .sidebar { position: static; min-height: 0; flex-direction: row; flex-wrap: wrap; }
  .side-spacer, .safety-card { display: none; }
  .side-group { flex: 1; }
  .top-nav { display: none; }
  .brand { min-width: 0; }
  .hero { flex-direction: column; text-align: center; }
  .hero-text h1 { font-size: 26px; }
  .game-card { flex-wrap: wrap; }
  .gc-pets { order: 3; width: 100%; }
  .bp-label { display: none; }
}

/* ============================================================
   MURDER MYSTERY 2 THEME (body.mm2)
   Black + blood-red + steel — sharp corners, edgy vs Adopt Me.
   Overriding the CSS variables re-themes the whole page.
   ============================================================ */
body.mm2 {
  --green: #ff2e4d; --green-2: #d81a37; --green-glow: rgba(255, 46, 77, 0.42);
  --purple: #b1263a; --purple-2: #7d1122; --purple-glow: rgba(255, 46, 77, 0.32);
  --cyan: #d7dae2;
  --heads: #ff2e4d; --tails: #d7dae2;
  --bg: #070506; --bg-2: #0e0a0b; --panel: #150e10; --panel-2: #1c1214; --panel-3: #26181b;
  --line: #3a2026; --line-soft: #2a171c;
  --radius: 11px; --radius-sm: 7px; /* sharper */
  /* Registered gradient stops flip to fiery red/orange — these cross-fade. */
  --g1: #ff2e4d; --g2: #ff8a3d;
  --b1: #ff5d9e; --b2: #ff8a3d;
  --brand1: #b1122a; --brand2: #ff5d2e;
}
/* (The MM2 aurora layer cross-fades in via .aurora::after — no bg swap here.) */
body.mm2 .btn-primary { color: #26060a; box-shadow: 0 8px 22px rgba(255,60,46,0.5); }
body.mm2 .btn-primary:hover { box-shadow: 0 12px 30px rgba(255,60,46,0.6); }
body.mm2 .btn-bot { box-shadow: 0 8px 22px rgba(255,93,158,0.5); }
body.mm2 .hero { background: linear-gradient(120deg, rgba(255,46,77,0.16) 0%, rgba(14,10,11,0.7) 45%, rgba(125,17,34,0.10)); }
body.mm2 .hero-glow { background: radial-gradient(circle, rgba(255,46,77,0.30), transparent 70%); }
/* Coin faces: red heads, steel tails */
body.mm2 .coin-h { background: radial-gradient(circle at 40% 35%, #ff5568, #b1122a); color: #fff; }
body.mm2 .coin-t { background: radial-gradient(circle at 40% 35%, #eef0f4, #9aa0ab); color: #1a1418; }
body.mm2 .hcoin.h { background: radial-gradient(circle at 40% 35%, #ff5568, #b1122a); color: #fff; box-shadow: 0 0 34px rgba(255,46,77,0.4); }
body.mm2 .hcoin.t { background: radial-gradient(circle at 40% 35%, #eef0f4, #9aa0ab); color: #1a1418; box-shadow: 0 0 30px rgba(215,218,226,0.3); }
/* Game-picker: MM2 card gets a red ring when active */
body.mm2 .game-choice.active { border-color: #ff2e4d; background: linear-gradient(120deg, rgba(255,46,77,0.16) 0%, var(--bg-2) 60%); box-shadow: 0 0 0 1px #ff2e4d inset, 0 10px 24px rgba(255,46,77,0.18); }
body.mm2 .game-choice.active .gc-icon { background: linear-gradient(135deg, #ff2e4d, #7d1122); }
/* Softer "MM2" tag colour on the inactive Adopt Me tab, and a blade underline vibe */
.mm2-choice .gc-icon { filter: drop-shadow(0 0 6px rgba(255,46,77,0.3)); }

/* ============================ PROFILE DROPDOWN ============================ */
.profile-wrap { position: relative; }
.user-chip { font-family: inherit; text-align: left; }
.chip-caret { color: var(--muted-2); font-size: 10px; margin-left: 3px; transition: transform 0.15s; }
.user-chip.open .chip-caret { transform: rotate(180deg); }
.profile-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  background: linear-gradient(180deg, var(--panel-2), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 6px; min-width: 196px;
  animation: menuIn 0.16s ease;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pm-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--text); padding: 10px 11px;
  border-radius: 8px; font-weight: 600; font-size: 13px; font-family: inherit; transition: background 0.12s;
}
.pm-item:hover { background: var(--panel-3); }
.pm-item span { font-size: 15px; }
.pm-item.admin { color: var(--gold); }
.pm-item.danger { color: var(--red); }
.pm-sep { height: 1px; background: var(--line); margin: 5px 6px; }

/* ============================ BACKPACK GAME TABS ============================ */
.bp-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.bp-tab {
  flex: 1; background: var(--bg-2); border: 1px solid var(--line); color: var(--muted);
  padding: 10px; border-radius: var(--radius-sm); font-weight: 800; font-size: 13px; transition: 0.12s;
}
.bp-tab:hover { color: var(--text); border-color: var(--purple); }
.bp-tab.active { background: linear-gradient(135deg, var(--green), var(--cyan)); color: #04231a; border-color: transparent; box-shadow: 0 6px 16px var(--green-glow); }
body.mm2 .bp-tab.active { background: linear-gradient(135deg, #ff2e4d, #7d1122); color: #fff; }

/* Cancel (danger) icon button on your own game cards */
.icon-btn.danger:hover { color: var(--red); border-color: var(--red); background: rgba(255, 95, 109, 0.12); }

/* ============================ THEME SWITCH — COLOUR CROSS-FADE ============================ */
/* No overlay/wipe: the palette morphs. Registered @property stops (--g1..--brand2)
   tween the button/brand/hero gradients over 0.7s (see body transition), and the
   MM2 aurora layer (.aurora::after) cross-fades in — so Adopt Me's colours melt
   into MM2's and back. A few vivid accents ease their border/glow too. */
.game-choice, .live-dot, .stat-pill { transition: border-color 0.5s ease, box-shadow 0.5s ease, background 0.5s ease, color 0.5s ease; }
@media (prefers-reduced-motion: reduce) {
  body, .aurora::after, .game-choice, .live-dot, .stat-pill { transition-duration: 0.001s !important; }
}