/* ============================================================
   JAMES AND HUGO'S ARCADE -- MAIN STYLESHEET
   ============================================================ */

@import url('./tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Rubik:wght@400;500;700;900&family=JetBrains+Mono:wght@400;700&display=swap');

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--color-space-deep);
  color: var(--color-off-white);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   STARFIELD BACKGROUND
   ============================================================ */

.starfield {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse at top, var(--color-charcoal) 0%, var(--color-space-deep) 50%, var(--color-space-deep) 100%);
}
.starfield::before,
.starfield::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, white, transparent),
    radial-gradient(1px 1px at 60% 70%, white, transparent),
    radial-gradient(2px 2px at 80% 10%, white, transparent),
    radial-gradient(1px 1px at 10% 90%, white, transparent),
    radial-gradient(1px 1px at 50% 50%, white, transparent),
    radial-gradient(2px 2px at 90% 60%, white, transparent),
    radial-gradient(1px 1px at 35% 80%, white, transparent),
    radial-gradient(1px 1px at 75% 25%, white, transparent);
  background-size: 400px 400px;
  background-repeat: repeat;
  opacity: 0.6;
  animation: drift 90s linear infinite;
}
.starfield::after {
  background-size: 250px 250px;
  opacity: 0.3;
  animation-duration: 60s;
  animation-direction: reverse;
}

@keyframes drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-400px); }
}

/* ---------- CRT Scanlines (toggleable, FOUC-safe via html attr) ---------- */
html[data-crt-pref="on"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.18) 0px,
    rgba(0, 0, 0, 0.18) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.6;
}

html[data-crt-pref="on"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.4) 100%);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.font-display { font-family: var(--font-display); letter-spacing: 0.05em; }
.font-arcade  { font-family: var(--font-arcade); letter-spacing: 0.03em; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

.neon-text {
  color: var(--accent);
  text-shadow:
    0 0 8px var(--accent-glow),
    0 0 16px var(--accent-glow),
    0 0 24px var(--accent-glow);
}

.pixel-shadow {
  text-shadow: 4px 4px 0 var(--color-space-deep);
}

/* ============================================================
   PROFILE PICKER MODAL
   ============================================================ */

.profile-picker {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background-color: #050818;
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(255, 46, 147, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(0, 240, 255, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 217, 61, 0.06) 0%, transparent 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  animation: fadeIn 0.4s ease both;
  overflow-y: auto;
}

.profile-picker[hidden] { display: none !important; }

.profile-picker__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4vw, var(--text-2xl));
  color: var(--color-off-white);
  margin-bottom: var(--space-2);
  text-align: center;
  text-shadow: 4px 4px 0 var(--color-charcoal);
}

.profile-picker__sub {
  font-family: var(--font-arcade);
  font-size: var(--text-xl);
  color: var(--color-grey-mid);
  margin-bottom: var(--space-8);
  text-align: center;
  letter-spacing: 0.15em;
}

.profile-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: center;
  max-width: 800px;
  width: 100%;
}

.profile-card { width: 200px; }

/* Compact picker on tiny screens so all three cards fit without scrolling */
@media (max-height: 700px), (max-width: 380px) {
  .profile-picker { padding: var(--space-4) var(--space-3); }
  .profile-picker__title { font-size: 1.1rem; margin-bottom: var(--space-1); }
  .profile-picker__sub { font-size: var(--text-base); margin-bottom: var(--space-4); letter-spacing: 0.1em; }
  .profile-grid { gap: var(--space-3); }
  .profile-card { width: 140px; padding: var(--space-3); }
  .profile-avatar { width: 72px; height: 72px; font-size: var(--text-2xl); }
  .profile-name { font-size: 0.7rem; }
}

.profile-card {
  background: var(--color-charcoal);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border: 4px solid transparent;
  transition: transform 0.2s var(--ease-pop), border-color 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  position: relative;
}

.profile-card:hover,
.profile-card:focus-visible {
  transform: translateY(-8px) scale(1.04);
  outline: none;
}

.profile-card[data-profile="james"]:hover {
  border-color: var(--color-neon-pink);
  box-shadow: var(--glow-pink);
}
.profile-card[data-profile="hugo"]:hover {
  border-color: var(--color-electric);
  box-shadow: var(--glow-cyan);
}
.profile-card[data-profile="guest"]:hover {
  border-color: var(--color-lemon);
  box-shadow: 0 0 20px rgba(255, 217, 61, 0.5);
}

.profile-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-space-deep);
  image-rendering: pixelated;
  position: relative;
}

.profile-avatar--james { background: linear-gradient(135deg, #FF2E93 0%, #B14EFF 100%); }
.profile-avatar--hugo  { background: linear-gradient(135deg, #00F0FF 0%, #39FF14 100%); }
.profile-avatar--guest { background: linear-gradient(135deg, #FFD93D 0%, #FF9F1C 100%); }

.profile-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-off-white);
}

/* ============================================================
   SITE HEADER
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 14, 39, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 3px solid var(--accent);
  height: var(--nav-height);
}

.header-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-off-white);
  white-space: nowrap;
}

.logo__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.logo__text-line-1 { color: var(--color-neon-pink); text-shadow: 0 0 8px rgba(255,46,147,0.6); }
.logo__amp        { color: var(--color-lemon); }
.logo__text-line-2 { color: var(--color-electric); text-shadow: 0 0 8px rgba(0,240,255,0.6); }
.logo__sub        { color: var(--color-grey-mid); font-size: 0.6rem; display: block; margin-top: 2px; }

/* Desktop nav */
.main-nav {
  display: none;
  gap: var(--space-2);
  align-items: center;
}

@media (min-width: 1100px) {
  .main-nav { display: flex; }
}

.nav-link {
  font-family: var(--font-arcade);
  font-size: var(--text-lg);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s, transform 0.15s;
  position: relative;
  white-space: nowrap;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}

.nav-link.is-active {
  color: var(--accent);
}

.nav-link.is-active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 12px;
  right: 12px;
  height: 3px;
  background: var(--accent);
  box-shadow: var(--glow-sm);
}

/* Header right cluster */
.header-cluster {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* On very small screens, hide secondary controls in header (they live in the drawer) */
@media (max-width: 559px) {
  .header-cluster .coin-counter,
  .header-cluster .icon-btn,
  .header-cluster .profile-pill {
    display: none;
  }
}

/* On medium-small screens, hide profile pill (drawer has it) but keep toggles */
@media (min-width: 560px) and (max-width: 1099px) {
  .header-cluster .profile-pill { display: none; }
}

.coin-counter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-charcoal);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-lemon);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--color-lemon);
  box-shadow: 0 0 12px rgba(255, 217, 61, 0.3);
}

.coin-counter__icon {
  width: 18px;
  height: 18px;
  animation: coinSpin 2.5s linear infinite;
}

@keyframes coinSpin {
  0%, 100% { transform: rotateY(0); }
  50%      { transform: rotateY(180deg); }
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  border: 2px solid transparent;
}

.icon-btn:hover {
  background: var(--color-charcoal-2);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.profile-pill {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-charcoal);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  border: 2px solid var(--accent);
  transition: transform 0.15s;
}

.profile-pill:hover { transform: translateY(-2px); }

.profile-pill__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-space-deep);
}

/* Mobile burger */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
}
.burger span {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
@media (min-width: 1100px) { .burger { display: none; } }

/* ============================================================
   MOBILE BOTTOM NAV
   ============================================================ */

.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  height: var(--bottom-nav);
  background: rgba(10, 14, 39, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 3px solid var(--accent);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

@media (min-width: 900px) {
  .mobile-nav { display: none; }
  body { padding-bottom: 0 !important; }
}

body { padding-bottom: var(--bottom-nav); }

.mobile-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-display);
  font-size: 0.55rem;
  color: var(--color-grey-mid);
  transition: color 0.15s;
}

.mobile-nav__item.is-active { color: var(--accent); }
.mobile-nav__icon { width: 22px; height: 22px; }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  padding: var(--space-12) var(--space-5) var(--space-10);
  text-align: center;
  overflow: hidden;
}

.hero__marquee {
  font-family: var(--font-arcade);
  font-size: var(--text-xl);
  color: var(--color-lemon);
  letter-spacing: 0.3em;
  margin-bottom: var(--space-5);
  animation: blink 1.4s steps(2) infinite;
  text-transform: uppercase;
}

@keyframes blink {
  50% { opacity: 0.2; }
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 6vw, var(--text-mega));
  line-height: 1.05;
  margin-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}

.hero__title-line-1 {
  color: var(--color-neon-pink);
  text-shadow:
    0 0 12px rgba(255, 46, 147, 0.7),
    4px 4px 0 var(--color-space-deep),
    8px 8px 0 rgba(0,0,0,0.6);
  animation: float-pink 3.5s ease-in-out infinite;
}

.hero__amp {
  font-family: var(--font-arcade);
  color: var(--color-lemon);
  font-size: 0.6em;
  text-shadow: 0 0 12px rgba(255, 217, 61, 0.7);
  animation: spin-amp 8s linear infinite;
  display: inline-block;
}

.hero__title-line-2 {
  color: var(--color-electric);
  text-shadow:
    0 0 12px rgba(0, 240, 255, 0.7),
    4px 4px 0 var(--color-space-deep),
    8px 8px 0 rgba(0,0,0,0.6);
  animation: float-cyan 3.5s ease-in-out infinite;
  animation-delay: 0.4s;
}

.hero__title-line-3 {
  color: var(--color-off-white);
  font-size: 0.7em;
  text-shadow: 4px 4px 0 var(--color-space-deep);
}

/* On narrow screens the 8px stacked shadow becomes visible as a "ghost"
   duplicate of the letter (8px is ~29% of the 28px mobile font size).
   Reduce to a tight 0/2px glow that scales properly. */
@media (max-width: 600px) {
  .hero__title-line-1 {
    text-shadow:
      0 0 8px rgba(255, 46, 147, 0.7),
      2px 2px 0 var(--color-space-deep);
  }
  .hero__title-line-2 {
    text-shadow:
      0 0 8px rgba(0, 240, 255, 0.7),
      2px 2px 0 var(--color-space-deep);
  }
  .hero__title-line-3 {
    text-shadow: 2px 2px 0 var(--color-space-deep);
  }
}

@keyframes float-pink {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes float-cyan {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes spin-amp {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

.hero__subtitle {
  font-family: var(--font-arcade);
  font-size: var(--text-2xl);
  color: var(--color-grey-mid);
  margin-bottom: var(--space-6);
  letter-spacing: 0.1em;
}

.press-start-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-base);
  padding: var(--space-4) var(--space-6);
  background: var(--color-lime);
  color: var(--color-space-deep);
  border-radius: var(--radius-md);
  box-shadow:
    0 6px 0 0 #1F8A0A,
    0 0 30px rgba(57, 255, 20, 0.5);
  transition: transform 0.1s, box-shadow 0.1s;
  letter-spacing: 0.1em;
  animation: pulse-glow 2s ease-in-out infinite;
}

.press-start-btn:hover {
  transform: translateY(-3px);
  box-shadow:
    0 9px 0 0 #1F8A0A,
    0 0 40px rgba(57, 255, 20, 0.7);
}

.press-start-btn:active {
  transform: translateY(3px);
  box-shadow:
    0 3px 0 0 #1F8A0A,
    0 0 20px rgba(57, 255, 20, 0.5);
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 6px 0 0 #1F8A0A, 0 0 30px rgba(57, 255, 20, 0.5); }
  50%      { box-shadow: 0 6px 0 0 #1F8A0A, 0 0 50px rgba(57, 255, 20, 0.9); }
}

/* ============================================================
   STATS BAR
   ============================================================ */

.stats-bar {
  max-width: var(--max-content);
  margin: 0 auto var(--space-8);
  padding: 0 var(--space-5);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.stat-card {
  background: var(--color-charcoal);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  border: 3px solid var(--color-charcoal-2);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: border-color 0.2s, transform 0.2s;
}

.stat-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.stat-card__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.stat-card__label {
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--color-grey-mid);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stat-card__value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-off-white);
}

/* ============================================================
   SECTION TITLES
   ============================================================ */

.section {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-off-white);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  letter-spacing: 0.05em;
}

.section-title__bar {
  width: 8px;
  height: 32px;
  background: var(--accent);
  box-shadow: var(--glow-sm);
  border-radius: 2px;
}

.section-title__pill {
  margin-left: auto;
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--accent);
  background: var(--accent-soft);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  border: 2px solid var(--accent);
  letter-spacing: 0.05em;
}

/* ============================================================
   QUICK-LAUNCH TILES
   ============================================================ */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 600px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .tile-grid { grid-template-columns: repeat(4, 1fr); }
}

.tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform 0.25s var(--ease-pop), box-shadow 0.25s;
  border: 3px solid rgba(255,255,255,0.08);
}

.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tile-gradient);
  opacity: 0.92;
  z-index: 0;
}

.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 10px,
    rgba(255,255,255,0.04) 10px,
    rgba(255,255,255,0.04) 11px
  );
  z-index: 1;
}

.tile > * { position: relative; z-index: 2; }

.tile:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-deep), 0 0 30px var(--tile-glow);
}

.tile--minecraft  { --tile-gradient: linear-gradient(135deg, #2D5016 0%, #5BA428 100%); --tile-glow: rgba(91,164,40,0.6); }
.tile--roblox     { --tile-gradient: linear-gradient(135deg, #C42026 0%, #FF6B6B 100%); --tile-glow: rgba(255,107,107,0.6); }
.tile--rocket     { --tile-gradient: linear-gradient(135deg, #1B4F8F 0%, #00B4FF 100%); --tile-glow: rgba(0,180,255,0.6); }
.tile--retro      { --tile-gradient: linear-gradient(135deg, #FF2E93 0%, #B14EFF 100%); --tile-glow: rgba(177,78,255,0.6); }

.tile__icon {
  width: 56px;
  height: 56px;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.4));
}

.tile__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-off-white);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
  line-height: 1.2;
}

.tile__sub {
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: rgba(255,255,255,0.85);
  margin-top: var(--space-1);
  letter-spacing: 0.05em;
}

/* ============================================================
   GAME OF THE DAY
   ============================================================ */

.gotd {
  background: linear-gradient(135deg, var(--color-charcoal) 0%, var(--color-charcoal-2) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  border: 4px solid var(--color-lemon);
  box-shadow: 0 0 40px rgba(255, 217, 61, 0.25);
  position: relative;
  overflow: hidden;
}

.gotd::before {
  content: 'GAME OF THE DAY';
  position: absolute;
  top: var(--space-4);
  right: var(--space-5);
  font-family: var(--font-display);
  font-size: 0.65rem;
  color: var(--color-lemon);
  letter-spacing: 0.2em;
  background: rgba(255, 217, 61, 0.1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-lemon);
}

.gotd-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}

@media (min-width: 720px) {
  .gotd-grid { grid-template-columns: 200px 1fr auto; }
}

.gotd__cabinet {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 3 / 4;
  background: var(--color-space-deep);
  border-radius: var(--radius-md);
  border: 4px solid var(--color-lemon);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-lemon);
  position: relative;
  overflow: hidden;
}

.gotd__cabinet::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  height: 30%;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,217,61,0.15) 0px,
      rgba(255,217,61,0.15) 2px,
      transparent 2px,
      transparent 4px),
    var(--color-charcoal);
  border-radius: var(--radius-sm);
}

.gotd__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-lemon);
  text-shadow: 0 0 20px rgba(255, 217, 61, 0.5);
  margin-bottom: var(--space-3);
  margin-top: var(--space-3);
}

.gotd__year {
  font-family: var(--font-arcade);
  color: var(--color-grey-mid);
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

.gotd__desc {
  color: var(--color-off-white);
  margin-bottom: var(--space-4);
}

.gotd__btn {
  font-family: var(--font-display);
  background: var(--color-lemon);
  color: var(--color-space-deep);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  white-space: nowrap;
  box-shadow: 0 5px 0 0 #B89200, 0 0 20px rgba(255, 217, 61, 0.5);
  transition: transform 0.1s, box-shadow 0.1s;
}

.gotd__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 0 #B89200, 0 0 30px rgba(255, 217, 61, 0.7);
}

.gotd__btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 #B89200;
}

/* ============================================================
   DAILY CHALLENGE
   ============================================================ */

.challenge {
  background: linear-gradient(135deg, rgba(255, 46, 147, 0.15) 0%, rgba(177, 78, 255, 0.15) 100%);
  border: 3px dashed var(--color-neon-pink);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.challenge__badge {
  width: 64px;
  height: 64px;
  background: var(--color-neon-pink);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-off-white);
  flex-shrink: 0;
  box-shadow: var(--glow-pink);
  transform: rotate(-6deg);
  animation: wiggle 4s ease-in-out infinite;
}

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

.challenge__content { flex: 1; min-width: 240px; }

.challenge__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--color-neon-pink);
  letter-spacing: 0.2em;
  margin-bottom: var(--space-2);
}

.challenge__text {
  font-family: var(--font-arcade);
  font-size: var(--text-2xl);
  color: var(--color-off-white);
  line-height: 1.2;
}

.challenge__btn {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 2px solid var(--color-neon-pink);
  color: var(--color-neon-pink);
  border-radius: var(--radius-sm);
  letter-spacing: 0.1em;
  transition: all 0.15s;
}

.challenge__btn:hover {
  background: var(--color-neon-pink);
  color: var(--color-space-deep);
  box-shadow: var(--glow-pink);
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  margin-top: var(--space-12);
  padding: var(--space-8) var(--space-5);
  background: var(--color-space-deep);
  border-top: 4px solid var(--accent);
  text-align: center;
}

.footer-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}

.footer-tag {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--color-grey-mid);
  letter-spacing: 0.15em;
}

.footer-tag--domain {
  color: var(--color-electric);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: lowercase;
  margin-top: var(--space-1);
}

.footer-heart {
  color: var(--color-neon-pink);
  animation: heartbeat 1.4s ease infinite;
  display: inline-block;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  20%      { transform: scale(1.3); }
  40%      { transform: scale(1); }
}

/* ============================================================
   UTILITY ANIMATIONS
   ============================================================ */

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

@keyframes pop-in {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pop-in {
  animation: pop-in 0.5s var(--ease-pop) both;
}

.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.10s; }
.stagger > *:nth-child(3) { animation-delay: 0.15s; }
.stagger > *:nth-child(4) { animation-delay: 0.20s; }
.stagger > *:nth-child(5) { animation-delay: 0.25s; }
.stagger > *:nth-child(6) { animation-delay: 0.30s; }

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* SVG elements don't always honor the HTML hidden attribute. Force it. */
svg[hidden] { display: none !important; }

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

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   COIN BURST (popup when earning coins)
   ============================================================ */

.coin-burst {
  position: fixed;
  top: 80px;
  right: 20px;
  background: var(--color-charcoal);
  border: 3px solid var(--color-lemon);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-lemon);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: var(--glow-lg);
  z-index: 200;
  animation: coinPop 1.6s ease forwards;
}

@keyframes coinPop {
  0%   { opacity: 0; transform: translateY(-20px) scale(0.8); }
  15%  { opacity: 1; transform: translateY(0) scale(1.1); }
  25%  { transform: scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-30px) scale(0.9); }
}

/* ============================================================
   COMING SOON TOAST
   ============================================================ */

.coming-soon-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottom-nav) + 16px);
  transform: translateX(-50%) translateY(20px);
  z-index: 250;
  background: var(--color-charcoal);
  border: 3px solid var(--accent);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-off-white);
  box-shadow: var(--shadow-deep), 0 0 30px var(--accent-glow);
  animation: toastIn 0.35s var(--ease-pop) forwards;
  max-width: calc(100% - 32px);
}

.coming-soon-toast.is-leaving {
  animation: toastOut 0.4s ease forwards;
}

.coming-soon-toast svg { color: var(--accent); flex-shrink: 0; }

.coming-soon-toast__title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--accent);
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}

.coming-soon-toast__sub {
  font-family: var(--font-arcade);
  font-size: var(--text-lg);
  color: var(--color-grey-mid);
}

@media (min-width: 900px) {
  .coming-soon-toast { bottom: 24px; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(40px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

/* ============================================================
   MOBILE DRAWER
   ============================================================ */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 24, 0.7);
  backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.drawer-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(85vw, 340px);
  background: var(--color-charcoal);
  border-left: 4px solid var(--accent);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease-pop);
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
}

.drawer.is-open { transform: translateX(0); }

@media (min-width: 900px) {
  .drawer, .drawer-backdrop { display: none; }
}

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  border-bottom: 3px solid var(--color-charcoal-2);
}

.drawer__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--accent);
  letter-spacing: 0.15em;
}

.drawer__close {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-charcoal-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-off-white);
  transition: background 0.15s, color 0.15s;
}

.drawer__close:hover {
  background: var(--accent);
  color: var(--color-space-deep);
}

.drawer__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  gap: var(--space-1);
  overflow-y: auto;
}

.drawer__link {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  padding: var(--space-4) var(--space-4);
  border-radius: var(--radius-md);
  letter-spacing: 0.1em;
  color: var(--color-off-white);
  border: 2px solid transparent;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.drawer__link::before {
  content: '►';
  color: var(--accent);
  font-size: 0.8em;
  opacity: 0.5;
  transition: opacity 0.15s, transform 0.15s;
}

.drawer__link:hover,
.drawer__link:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
  border-color: var(--accent);
}

.drawer__link:hover::before,
.drawer__link:focus-visible::before {
  opacity: 1;
  transform: translateX(4px);
}

.drawer__link.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.drawer__link.is-active::before { opacity: 1; }

.drawer__footer {
  padding: var(--space-4);
  border-top: 3px solid var(--color-charcoal-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.drawer__footer-text {
  font-family: var(--font-display);
  font-size: 0.6rem;
  color: var(--color-grey-mid);
  letter-spacing: 0.2em;
}

.drawer__profile-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-charcoal-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-family: var(--font-arcade);
  font-size: var(--text-lg);
  color: var(--color-off-white);
  border: 2px solid var(--accent);
  transition: background 0.15s;
}

.drawer__profile-btn:hover { background: var(--accent-soft); }

/* Burger active state (X icon) */
.burger.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger.is-active span:nth-child(2) {
  opacity: 0;
}
.burger.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   RETRO ARCADE PAGE
   ============================================================ */

/* ---------- Arcade Hero ---------- */
.arcade-hero {
  position: relative;
  padding: var(--space-10) var(--space-5) var(--space-8);
  text-align: center;
  overflow: hidden;
  border-bottom: 4px solid var(--accent);
  background:
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(255, 46, 147, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0, 240, 255, 0.15) 0%, transparent 70%);
}

/* Marquee chase lights ringing the hero */
.arcade-hero__lights {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  pointer-events: none;
  padding: 8px 0;
}
.arcade-hero__lights span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-lemon);
  box-shadow: 0 0 12px var(--color-lemon), 0 0 24px var(--color-lemon);
  animation: chase 1.2s steps(10) infinite;
}
.arcade-hero__lights span:nth-child(odd)  { animation-delay: 0s; }
.arcade-hero__lights span:nth-child(even) { animation-delay: 0.6s; background: var(--color-neon-pink); box-shadow: 0 0 12px var(--color-neon-pink), 0 0 24px var(--color-neon-pink); }

@keyframes chase {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.15; }
}

.arcade-hero__marquee {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-lemon);
  letter-spacing: 0.3em;
  margin-bottom: var(--space-5);
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 0 0 8px rgba(255, 217, 61, 0.6);
  animation: scrollMarquee 18s linear infinite;
}

@keyframes scrollMarquee {
  from { transform: translateX(20%); }
  to   { transform: translateX(-20%); }
}

.arcade-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: 0.04em;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  position: relative;
  z-index: 2;
}

.arcade-hero__title-1 {
  color: var(--color-neon-pink);
  text-shadow:
    0 0 16px rgba(255, 46, 147, 0.8),
    0 0 32px rgba(255, 46, 147, 0.5),
    4px 4px 0 var(--color-space-deep),
    8px 8px 0 rgba(0,0,0,0.5);
  animation: neonFlicker 4s ease-in-out infinite;
}

.arcade-hero__title-2 {
  color: var(--color-electric);
  text-shadow:
    0 0 16px rgba(0, 240, 255, 0.8),
    0 0 32px rgba(0, 240, 255, 0.5),
    4px 4px 0 var(--color-space-deep),
    8px 8px 0 rgba(0,0,0,0.5);
  animation: neonFlicker 4s ease-in-out infinite;
  animation-delay: 0.5s;
}

@keyframes neonFlicker {
  0%, 100%   { opacity: 1; }
  41%, 43%   { opacity: 1; }
  42%        { opacity: 0.6; }
  93%, 95%   { opacity: 1; }
  94%        { opacity: 0.7; }
}

.arcade-hero__tagline {
  font-family: var(--font-arcade);
  font-size: clamp(var(--text-base), 4.5vw, var(--text-2xl));
  color: var(--color-off-white);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-6);
  position: relative;
  z-index: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 var(--space-3);
}

@media (max-width: 380px) {
  .arcade-hero__tagline { white-space: normal; }
}

.blink {
  display: inline-block;
  color: var(--color-lime);
  animation: blink 1s steps(2) infinite;
}

/* Decorative mini-cabinets behind hero */
.arcade-hero__cabinets {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-bottom: var(--space-3);
  flex-wrap: nowrap;
  overflow: hidden;
}

.mini-cabinet {
  width: 56px;
  height: 90px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px var(--mc-color));
  animation: miniBob 3s ease-in-out infinite;
}
.mini-cabinet:nth-child(1) { animation-delay: 0s; }
.mini-cabinet:nth-child(2) { animation-delay: 0.3s; }
.mini-cabinet:nth-child(3) { animation-delay: 0.6s; }
.mini-cabinet:nth-child(4) { animation-delay: 0.9s; }
.mini-cabinet:nth-child(5) { animation-delay: 1.2s; }

@keyframes miniBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.mini-cabinet__marquee {
  height: 12px;
  background: var(--mc-color);
  border-radius: 4px 4px 0 0;
  box-shadow: 0 0 12px var(--mc-color);
}
.mini-cabinet__screen {
  flex: 1;
  background: var(--color-space-deep);
  border-left: 3px solid var(--mc-color);
  border-right: 3px solid var(--mc-color);
  position: relative;
}
.mini-cabinet__screen::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: repeating-linear-gradient(0deg,
    var(--mc-color) 0px, var(--mc-color) 1px, transparent 1px, transparent 4px);
  opacity: 0.4;
}
.mini-cabinet__base {
  height: 18px;
  background: var(--color-charcoal);
  border-radius: 0 0 6px 6px;
  border: 2px solid var(--mc-color);
  border-top: none;
}

@media (max-width: 559px) {
  .mini-cabinet { width: 40px; height: 64px; }
  .mini-cabinet__marquee { height: 8px; }
  .mini-cabinet__base { height: 12px; }
}

/* ---------- Arcade Bonus Mission ---------- */
.arcade-bonus-section { padding-top: var(--space-6); }

.arcade-bonus {
  background: linear-gradient(135deg, rgba(255, 217, 61, 0.12), rgba(255, 159, 28, 0.12));
  border: 3px dashed var(--color-lemon);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.arcade-bonus__icon {
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(255, 217, 61, 0.5));
  animation: spin 8s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

.arcade-bonus__content { flex: 1; min-width: 220px; }

.arcade-bonus__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--color-lemon);
  letter-spacing: 0.2em;
  margin-bottom: var(--space-1);
}

.arcade-bonus__text {
  font-family: var(--font-arcade);
  font-size: var(--text-xl);
  color: var(--color-off-white);
}

.arcade-bonus__progress {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  min-width: 140px;
}

.arcade-bonus__progress-text {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-lemon);
  text-align: center;
  letter-spacing: 0.1em;
}

.arcade-bonus__progress-bar {
  height: 12px;
  background: var(--color-charcoal-2);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--color-lemon);
}

.arcade-bonus__progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-lemon), var(--color-crimson));
  box-shadow: 0 0 12px var(--color-lemon);
  transition: width 0.4s var(--ease-pop);
}

.arcade-bonus.is-complete .arcade-bonus__icon { animation-duration: 2s; }
.arcade-bonus.is-complete { border-color: var(--color-lime); }
.arcade-bonus.is-complete .arcade-bonus__progress-fill {
  background: linear-gradient(90deg, var(--color-lime), var(--color-electric));
  box-shadow: 0 0 12px var(--color-lime);
}

/* ---------- Filter Pills ---------- */
.arcade-filters-section { padding-bottom: var(--space-3); }

.filter-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.filter-pill {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  padding: var(--space-3) var(--space-4);
  background: var(--color-charcoal);
  color: var(--color-grey-mid);
  border: 2px solid var(--color-charcoal-2);
  border-radius: var(--radius-md);
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: all 0.15s;
}

.filter-pill:hover {
  color: var(--color-off-white);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.filter-pill.is-active {
  background: var(--accent);
  color: var(--color-space-deep);
  border-color: var(--accent);
  box-shadow: 0 0 16px var(--accent-glow);
}

.filter-pill__count {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 2px 6px;
  background: rgba(0,0,0,0.3);
  border-radius: 999px;
}

.filter-pill.is-active .filter-pill__count {
  background: rgba(0,0,0,0.4);
}

/* ============================================================
   CABINET GRID
   ============================================================ */

.cabinet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-5);
}

@media (max-width: 559px) {
  .cabinet-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
}

/* ---------- Single Cabinet ---------- */
.cabinet {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--color-charcoal) 0%, var(--color-charcoal-2) 100%);
  border-radius: 14px 14px 8px 8px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s var(--ease-pop), box-shadow 0.3s;
  border: 2px solid rgba(255, 255, 255, 0.08);
  animation: cabFadeIn 0.5s var(--ease-pop) both;
  /* The cabinet's signature glow appears on hover */
  box-shadow: 0 8px 0 0 rgba(0,0,0,0.4), 0 12px 24px rgba(0,0,0,0.4);
}

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

.cabinet:hover {
  transform: translateY(-8px);
  border-color: var(--cab-color);
  box-shadow:
    0 16px 0 0 rgba(0,0,0,0.4),
    0 0 30px var(--cab-color),
    0 0 60px var(--cab-color);
}

.cabinet:hover .cabinet__marquee {
  filter: brightness(1.3);
}

.cabinet:active {
  transform: translateY(-2px);
}

.cabinet:focus-visible {
  outline: 3px solid var(--cab-color);
  outline-offset: 4px;
}

/* ---------- Cabinet Marquee (top sign) ---------- */
.cabinet__top {
  position: relative;
  background: var(--cab-color);
  padding: var(--space-2) var(--space-3);
  border-bottom: 3px solid rgba(0, 0, 0, 0.4);
}

.cabinet__marquee {
  text-align: center;
  position: relative;
}

.cabinet__marquee-text {
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--color-space-deep);
  letter-spacing: 0.05em;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.2);
  display: block;
  line-height: 1.3;
  /* Subtle pulse when cabinet is hovered */
  transition: transform 0.2s;
}

.cabinet:hover .cabinet__marquee-text {
  animation: marqueePulse 1.4s ease-in-out infinite;
}

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

.cabinet__year {
  position: absolute;
  top: 4px;
  right: 6px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: rgba(0,0,0,0.6);
  font-weight: 700;
}

/* ---------- Cabinet Bezel + Screen ---------- */
.cabinet__bezel {
  background: #000;
  padding: var(--space-3);
  border-bottom: 3px solid rgba(0, 0, 0, 0.5);
  position: relative;
}

.cabinet__screen {
  aspect-ratio: 4 / 3;
  background: var(--color-space-deep);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  box-shadow:
    inset 0 0 20px rgba(0,0,0,0.8),
    inset 0 0 4px var(--cab-color);
}

.cabinet__screen svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* CRT flicker / scanlines on the cabinet's own screen */
.cabinet__screen-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.25) 0px,
      rgba(0, 0, 0, 0.25) 1px,
      transparent 1px,
      transparent 2px
    );
}

/* "INSERT COIN" shimmer that appears on hover */
.cabinet__insert-coin {
  position: absolute;
  bottom: 12%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.55rem;
  color: var(--cab-color);
  letter-spacing: 0.15em;
  text-shadow: 0 0 6px var(--cab-color);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.cabinet:hover .cabinet__insert-coin {
  opacity: 1;
  animation: blink 0.9s steps(2) infinite;
}

/* "Inserting coin" flash when clicked */
.cabinet.is-coining .cabinet__screen {
  animation: coinFlash 0.8s ease-out;
}

@keyframes coinFlash {
  0%   { box-shadow: inset 0 0 0 999px var(--cab-color); }
  100% { box-shadow: inset 0 0 20px rgba(0,0,0,0.8), inset 0 0 4px var(--cab-color); }
}

/* ---------- Cabinet Control Panel ---------- */
.cabinet__panel {
  background: var(--color-charcoal-2);
  padding: var(--space-3);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}

.cabinet__joystick {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #555, #1a1a1a);
  margin: 0 auto;
  position: relative;
  box-shadow: 0 2px 4px rgba(0,0,0,0.6), inset 0 -2px 4px rgba(0,0,0,0.6);
}
.cabinet__joystick-ball {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FF6B6B, #C42026);
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 0 rgba(0,0,0,0.4);
}

.cabinet__buttons {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

.cabinet__btn {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 2px 0 rgba(0,0,0,0.6), inset 0 -2px 4px rgba(0,0,0,0.4);
}
.cabinet__btn--1 { background: radial-gradient(circle at 30% 30%, var(--cab-color), rgba(0,0,0,0.4)); }
.cabinet__btn--2 { background: radial-gradient(circle at 30% 30%, var(--cab-accent), rgba(0,0,0,0.4)); }

.cabinet__coin-slot {
  display: flex;
  justify-content: center;
}

.cabinet__coin-slot-line {
  width: 22px;
  height: 4px;
  background: #000;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1), inset 0 1px 2px rgba(0,0,0,0.8);
}

/* ---------- Cabinet Base (high score) ---------- */
.cabinet__base {
  background: var(--color-charcoal);
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.cabinet__highscore {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.cabinet__highscore-label {
  font-family: var(--font-display);
  font-size: 0.6rem;
  color: var(--cab-color);
  letter-spacing: 0.1em;
}

.cabinet__highscore-value {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--color-off-white);
  font-weight: 700;
}

.cabinet__category {
  font-family: var(--font-display);
  font-size: 0.55rem;
  color: var(--color-grey-mid);
  letter-spacing: 0.15em;
  background: rgba(255,255,255,0.05);
  padding: 3px 6px;
  border-radius: 3px;
}

/* ---------- Empty state ---------- */
.cabinet-empty {
  text-align: center;
  padding: var(--space-10) var(--space-5);
  background: var(--color-charcoal);
  border: 3px dashed var(--color-charcoal-2);
  border-radius: var(--radius-lg);
}

.cabinet-empty__msg {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-grey-mid);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-4);
}

.cabinet-empty__btn {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  padding: var(--space-3) var(--space-5);
  background: var(--accent);
  color: var(--color-space-deep);
  border-radius: var(--radius-sm);
  letter-spacing: 0.1em;
  box-shadow: 0 4px 0 0 rgba(0,0,0,0.4);
}

.cabinet-empty__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 rgba(0,0,0,0.4), 0 0 20px var(--accent-glow);
}

/* ============================================================
   HOW TO PLAY
   ============================================================ */

.how-to-play {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.how-to-play__step {
  background: var(--color-charcoal);
  border: 3px solid var(--color-charcoal-2);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  position: relative;
  transition: border-color 0.2s, transform 0.2s;
}

.how-to-play__step:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.how-to-play__num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--accent);
  text-shadow: 0 0 12px var(--accent-glow);
  margin-bottom: var(--space-3);
  line-height: 1;
}

.how-to-play__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-off-white);
  margin-bottom: var(--space-3);
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.how-to-play__text {
  font-size: var(--text-base);
  color: var(--color-grey-mid);
  line-height: 1.5;
}

/* ============================================================
   PLAY MODAL
   ============================================================ */

.play-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(5, 8, 24, 0.95);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  animation: modalIn 0.4s ease;
  --play-color: var(--color-lemon);
  --play-accent: var(--color-neon-pink);
}

.play-modal[hidden] { display: none !important; }

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

.play-modal__cabinet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1100px;
  max-height: 100%;
  background: linear-gradient(180deg, var(--color-charcoal) 0%, var(--color-charcoal-2) 100%);
  border-radius: 16px 16px 10px 10px;
  border: 3px solid var(--play-color);
  box-shadow: 0 0 40px var(--play-color), 0 20px 60px rgba(0,0,0,0.8);
  overflow: hidden;
}

/* Top: marquee + exit */
.play-modal__top {
  display: flex;
  align-items: stretch;
  background: var(--play-color);
  border-bottom: 4px solid rgba(0,0,0,0.4);
}

.play-modal__marquee {
  flex: 1;
  padding: var(--space-3) var(--space-5);
  position: relative;
}

.play-modal__marquee-text {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-space-deep);
  letter-spacing: 0.08em;
  text-shadow: 2px 2px 0 rgba(255,255,255,0.2);
}

.play-modal__marquee::before,
.play-modal__marquee::after {
  content: '★';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-space-deep);
  font-size: var(--text-lg);
  opacity: 0.6;
  animation: blink 1.2s steps(2) infinite;
}
.play-modal__marquee::before { left: var(--space-3); }
.play-modal__marquee::after  { right: var(--space-3); animation-delay: 0.6s; }

@media (min-width: 600px) {
  .play-modal__marquee::before { left: var(--space-5); }
  .play-modal__marquee::after  { right: var(--space-5); }
  .play-modal__marquee-text { font-size: var(--text-xl); padding-left: var(--space-6); padding-right: var(--space-6); }
}

.play-modal__exit {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  color: var(--color-space-deep);
  background: rgba(0,0,0,0.15);
  border-left: 3px solid rgba(0,0,0,0.3);
  transition: background 0.15s;
}

.play-modal__exit:hover {
  background: rgba(0,0,0,0.3);
}

/* Middle: bezel + screen (the game) */
.play-modal__bezel {
  flex: 1;
  background: #000;
  padding: var(--space-3);
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
}

.play-modal__screen {
  flex: 1;
  background: #000;
  border: 2px solid rgba(255,255,255,0.05);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  min-height: 280px;
  box-shadow: inset 0 0 8px var(--play-color);
}

.play-modal__screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.play-modal__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: var(--color-space-deep);
  z-index: 2;
}

.play-modal__loading[hidden] { display: none; }

.play-modal__loading-text {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--play-color);
  letter-spacing: 0.15em;
  text-shadow: 0 0 16px var(--play-color);
  animation: blink 0.9s steps(2) infinite;
}

.play-modal__loading-sub {
  font-family: var(--font-arcade);
  font-size: var(--text-xl);
  color: var(--color-grey-mid);
  letter-spacing: 0.2em;
}

/* Footer: controls + credits */
.play-modal__footer {
  background: var(--color-charcoal);
  border-top: 3px solid rgba(0,0,0,0.4);
  padding: var(--space-3) var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.play-modal__controls {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--play-color);
}

.play-modal__credits {
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--color-grey-mid);
  letter-spacing: 0.1em;
}

/* Make modal cabinet take more vertical space on mobile */
@media (max-width: 700px) {
  .play-modal { padding: 0; }
  .play-modal__cabinet { border-radius: 0; max-height: 100vh; height: 100vh; }
  .play-modal__bezel { padding: var(--space-2); }
  .play-modal__screen { min-height: 0; }
  .play-modal__marquee-text { font-size: 0.7rem; }
  .play-modal__exit { font-size: 0.6rem; padding: 0 var(--space-3); }
}

/* ============================================================
   SCORE PROMPT (shown when exiting a game)
   ============================================================ */

.score-prompt {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(5, 8, 24, 0.92);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: fadeIn 0.3s ease;
}

.score-prompt[hidden] { display: none !important; }

.score-prompt__panel {
  background: linear-gradient(180deg, var(--color-charcoal) 0%, var(--color-charcoal-2) 100%);
  border: 3px solid var(--play-color, var(--color-lemon));
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  width: 100%;
  max-width: 460px;
  text-align: center;
  box-shadow: 0 0 40px var(--play-color, var(--color-lemon));
  animation: scorePromptIn 0.45s var(--ease-pop);
}

@keyframes scorePromptIn {
  from { opacity: 0; transform: scale(0.85) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.score-prompt__top { margin-bottom: var(--space-5); }

.score-prompt__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--play-color, var(--color-lemon));
  letter-spacing: 0.4em;
  margin-bottom: var(--space-3);
  text-shadow: 0 0 10px var(--play-color, var(--color-lemon));
  animation: blink 1.2s steps(2) infinite;
}

.score-prompt__title {
  font-family: var(--font-arcade);
  font-size: var(--text-2xl);
  color: var(--color-off-white);
  margin: 0 0 var(--space-3) 0;
  line-height: 1.3;
  letter-spacing: 0.05em;
}

.score-prompt__title [data-score-game-title] {
  color: var(--play-color, var(--color-lemon));
}

.score-prompt__current {
  font-family: var(--font-arcade);
  font-size: var(--text-lg);
  color: var(--color-grey-mid);
  letter-spacing: 0.05em;
}

.score-prompt__current strong {
  color: var(--color-off-white);
  font-weight: 700;
}

.score-prompt__input-row {
  margin-bottom: var(--space-4);
}

.score-prompt__input {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  text-align: center;
  background: var(--color-space-deep);
  color: var(--play-color, var(--color-lemon));
  border: 3px solid var(--color-charcoal-2);
  border-radius: var(--radius-md);
  letter-spacing: 0.1em;
  text-shadow: 0 0 8px var(--play-color, var(--color-lemon));
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.score-prompt__input:focus {
  border-color: var(--play-color, var(--color-lemon));
  box-shadow: 0 0 20px var(--play-color, var(--color-lemon));
}

.score-prompt__input::placeholder {
  color: var(--color-charcoal-2);
  text-shadow: none;
}

.score-prompt__banner {
  min-height: 28px;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.score-prompt__banner.is-error { color: var(--color-crimson); }
.score-prompt__banner.is-info  { color: var(--color-grey-mid); }
.score-prompt__banner.is-win {
  color: var(--color-lime);
  text-shadow: 0 0 10px var(--color-lime);
  font-size: var(--text-base);
  animation: winPulse 1s ease infinite;
}

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

.score-prompt__buttons {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

.score-prompt__btn {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  border-radius: var(--radius-sm);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  cursor: pointer;
  border: 2px solid transparent;
}

.score-prompt__btn--save {
  background: var(--play-color, var(--color-lemon));
  color: var(--color-space-deep);
  box-shadow: 0 4px 0 0 rgba(0,0,0,0.4);
}

.score-prompt__btn--save:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 rgba(0,0,0,0.4), 0 0 16px var(--play-color, var(--color-lemon));
}

.score-prompt__btn--skip {
  background: transparent;
  color: var(--color-grey-mid);
  border-color: var(--color-charcoal-2);
}

.score-prompt__btn--skip:hover {
  color: var(--color-off-white);
  border-color: var(--color-grey-mid);
}

@media (max-width: 480px) {
  .score-prompt__panel { padding: var(--space-5) var(--space-4); }
  .score-prompt__title { font-size: var(--text-xl); }
  .score-prompt__input { font-size: var(--text-2xl); }
}

/* ============================================================
   ============================================================
   MINECRAFT PAGE
   Earthy palette, pixel-perfect rendering, blocky shapes.
   ============================================================
   ============================================================ */

/* All SVGs on this page should render crisp pixel-art */
.minecraft-page svg,
[class^="mc-"] svg,
[class*=" mc-"] svg {
  shape-rendering: crispEdges;
  image-rendering: pixelated;
}

/* ============================================================
   MINECRAFT HERO -- Pixel art landscape
   ============================================================ */

.mc-hero {
  position: relative;
  height: clamp(320px, 50vw, 460px);
  overflow: hidden;
  border-bottom: 6px solid #5A4028;
  background: linear-gradient(180deg, #6FB6E8 0%, #A8D8F8 50%, #C8E8FA 80%);
  isolation: isolate;
}

/* Sky layer */
.mc-hero__sky {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.mc-hero__sun {
  position: absolute;
  top: 8%;
  right: 6%;
  width: 56px;
  height: 56px;
  background: #FFD93D;
  box-shadow:
    0 0 0 3px #FFAA00,
    -3px 0 0 #FFD93D,
    3px 0 0 #FFD93D,
    0 -3px 0 #FFD93D,
    0 3px 0 #FFD93D,
    -6px 0 0 #FFAA00,
    6px 0 0 #FFAA00,
    0 -6px 0 #FFAA00,
    0 6px 0 #FFAA00,
    0 0 36px rgba(255, 217, 61, 0.6);
  animation: mc-sun-pulse 4s ease-in-out infinite;
}

@media (max-width: 480px) {
  .mc-hero__sun {
    width: 36px;
    height: 36px;
    top: 4%;
    right: 4%;
  }
}

@keyframes mc-sun-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.05); filter: brightness(1.15); }
}

/* Pixel clouds (blocky white shapes) */
.mc-hero__cloud {
  position: absolute;
  background: #fff;
  opacity: 0.95;
  box-shadow:
    -16px 0 0 #fff, -32px 0 0 #fff,
    -16px -8px 0 #fff, -8px -8px 0 #fff,
    16px 0 0 #fff, 32px 0 0 #fff,
    16px -8px 0 #fff;
  animation: mc-cloud-drift 60s linear infinite;
}

.mc-hero__cloud--1 {
  top: 18%;
  left: 10%;
  width: 24px;
  height: 12px;
}

.mc-hero__cloud--2 {
  top: 28%;
  left: 50%;
  width: 32px;
  height: 12px;
  animation-duration: 80s;
  animation-delay: -20s;
}

.mc-hero__cloud--3 {
  top: 40%;
  left: 75%;
  width: 24px;
  height: 12px;
  animation-duration: 70s;
  animation-delay: -40s;
}

@keyframes mc-cloud-drift {
  from { transform: translateX(-200px); }
  to   { transform: translateX(calc(100vw + 200px)); }
}

/* Distant mountains */
.mc-hero__mountains {
  position: absolute;
  bottom: 90px;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 2;
}

.mc-hero__mountains svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Foreground grass row */
.mc-hero__ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  z-index: 4;
}

.mc-hero__grass-row {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      #5A8A3F 0,
      #5A8A3F 12px,
      #7A5A38 12px,
      #7A5A38 24px,
      #5A4028 24px,
      #5A4028 100%
    );
}

/* Grass tufts pattern on top */
.mc-hero__grass-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  background:
    linear-gradient(90deg,
      #7AAB52 0 4px, transparent 4px 8px,
      #7AAB52 8px 14px, transparent 14px 20px,
      #5A8A3F 20px 28px, transparent 28px 34px,
      #7AAB52 34px 40px, transparent 40px 48px
    );
  background-size: 48px 100%;
  background-repeat: repeat-x;
  opacity: 0.7;
}

/* Dirt texture spots */
.mc-hero__grass-row::after {
  content: '';
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 10% 30%, rgba(0,0,0,0.15) 2px, transparent 3px),
    radial-gradient(circle at 30% 60%, rgba(255,255,255,0.05) 2px, transparent 3px),
    radial-gradient(circle at 60% 40%, rgba(0,0,0,0.15) 2px, transparent 3px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.05) 2px, transparent 3px);
  background-size: 80px 80px;
  background-repeat: repeat;
}

/* Trees */
.mc-hero__tree {
  position: absolute;
  bottom: 86px;
  z-index: 3;
  width: 64px;
  height: 112px;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.3));
}

.mc-hero__tree svg { width: 100%; height: 100%; display: block; }

.mc-hero__tree--1 { left: 6%; transform: scale(0.9); }
.mc-hero__tree--2 { right: 8%; transform: scale(1.1); }

/* Peeking creeper */
.mc-hero__creeper {
  position: absolute;
  bottom: 80px;
  left: 18%;
  width: 56px;
  height: 56px;
  z-index: 5;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.4));
  animation: mc-creeper-peek 6s ease-in-out infinite;
}

.mc-hero__creeper svg { width: 100%; height: 100%; display: block; }

@keyframes mc-creeper-peek {
  0%, 30%, 100% { transform: translateY(20px); }
  50%, 80%      { transform: translateY(0); }
}

/* Hero content (title + tagline) */
.mc-hero__content {
  position: relative;
  z-index: 6;
  text-align: center;
  padding: var(--space-6) var(--space-4) var(--space-4);
  max-width: 1280px;
  margin: 0 auto;
}

.mc-hero__breadcrumb {
  font-family: var(--font-display);
  font-size: 0.6rem;
  color: rgba(0, 0, 0, 0.65);
  letter-spacing: 0.15em;
  margin-bottom: var(--space-3);
}

.mc-hero__breadcrumb a {
  color: rgba(0, 0, 0, 0.85);
  text-decoration: none;
  border-bottom: 2px dotted rgba(0,0,0,0.4);
}

.mc-hero__breadcrumb a:hover { color: #000; }

.mc-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 8vw, 5.5rem);
  letter-spacing: 0.04em;
  line-height: 1;
  margin: 0 0 var(--space-3) 0;
  display: inline-block;
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,0.4));
  white-space: nowrap;
}

.mc-hero__title-letter {
  display: inline-block;
  color: var(--mc-letter-color, #5A8A3F);
  text-shadow:
    1px 1px 0 rgba(0,0,0,0.5),
    2px 2px 0 rgba(0,0,0,0.3);
  animation: mc-letter-bob 3s ease-in-out infinite;
}

.mc-hero__title-letter:nth-child(1) { animation-delay: 0.0s; }
.mc-hero__title-letter:nth-child(2) { animation-delay: 0.1s; }
.mc-hero__title-letter:nth-child(3) { animation-delay: 0.2s; }
.mc-hero__title-letter:nth-child(4) { animation-delay: 0.3s; }
.mc-hero__title-letter:nth-child(5) { animation-delay: 0.4s; }
.mc-hero__title-letter:nth-child(6) { animation-delay: 0.5s; }
.mc-hero__title-letter:nth-child(7) { animation-delay: 0.6s; }
.mc-hero__title-letter:nth-child(8) { animation-delay: 0.7s; }
.mc-hero__title-letter:nth-child(9) { animation-delay: 0.8s; }

@keyframes mc-letter-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.mc-hero__tagline {
  font-family: var(--font-arcade);
  font-size: clamp(var(--text-base), 2.4vw, var(--text-2xl));
  letter-spacing: 0.1em;
  color: rgba(0,0,0,0.75);
  margin: 0;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}

/* ============================================================
   HOTBAR (Minecraft inventory-style quick nav)
   ============================================================ */

.mc-hotbar-wrap {
  display: flex;
  justify-content: center;
  padding: var(--space-5) var(--space-4);
  background: linear-gradient(180deg, var(--color-space-deep) 0%, var(--color-charcoal) 100%);
  border-bottom: 4px solid var(--color-charcoal-2);
}

.mc-hotbar {
  display: flex;
  gap: 0;
  padding: 6px;
  background: linear-gradient(180deg, #C6C6C6 0%, #888 100%);
  border: 4px solid #383838;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.4),
    inset -2px -2px 0 rgba(0,0,0,0.5),
    0 4px 0 rgba(0,0,0,0.4);
}

.mc-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px;
  padding: 4px;
  background: #5A5A5A;
  border: 3px solid;
  border-color: #383838 #888 #888 #383838;
  margin-right: 2px;
  text-decoration: none;
  transition: transform 0.15s, background 0.15s;
  cursor: pointer;
}

.mc-slot:last-child { margin-right: 0; }

.mc-slot:hover,
.mc-slot:focus-visible {
  background: #888;
  outline: none;
  border-color: #fff #383838 #383838 #fff;
  transform: translateY(-2px);
}

.mc-slot.is-active {
  background: #FFD93D;
  border-color: #fff #B89200 #B89200 #fff;
  animation: mc-slot-flash 0.6s ease;
}

@keyframes mc-slot-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,217,61,0); }
  50%      { box-shadow: 0 0 16px 4px rgba(255,217,61,0.8); }
}

.mc-slot__inner {
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  background: #1A1A1A;
}

.mc-slot__inner svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mc-slot__label {
  font-family: var(--font-display);
  font-size: 0.5rem;
  color: #fff;
  letter-spacing: 0.1em;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.8);
}

@media (max-width: 600px) {
  .mc-hotbar { flex-wrap: wrap; max-width: 100%; }
  .mc-slot { width: 52px; }
  .mc-slot__inner { width: 32px; height: 32px; }
  .mc-slot__label { font-size: 0.45rem; }
}

/* ============================================================
   DAILY BUILD CHALLENGE
   ============================================================ */

.mc-build-challenge {
  background: linear-gradient(135deg, rgba(94, 138, 63, 0.15), rgba(125, 213, 255, 0.12));
  border: 3px solid #5A8A3F;
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  position: relative;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.05),
    0 4px 0 rgba(0,0,0,0.3);
}

.mc-build-challenge__pickaxe {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: var(--color-charcoal);
  border: 3px solid #5A8A3F;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  animation: mc-pickaxe-tilt 3s ease-in-out infinite;
}

.mc-build-challenge__pickaxe svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes mc-pickaxe-tilt {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}

.mc-build-challenge__body {
  flex: 1;
  min-width: 220px;
}

.mc-build-challenge__label {
  font-family: var(--font-display);
  font-size: 0.6rem;
  color: #5DD5FF;
  letter-spacing: 0.2em;
  margin-bottom: var(--space-2);
}

.mc-build-challenge__text {
  font-family: var(--font-arcade);
  font-size: var(--text-2xl);
  color: var(--color-off-white);
  line-height: 1.3;
}

.mc-build-challenge__btn {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  padding: var(--space-3) var(--space-5);
  background: #5A8A3F;
  color: #fff;
  border: 3px solid;
  border-color: #7AAB52 #3F6B2A #3F6B2A #7AAB52;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
  box-shadow: 0 4px 0 rgba(0,0,0,0.4);
}

.mc-build-challenge__btn:hover {
  background: #7AAB52;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(0,0,0,0.4);
}

.mc-build-challenge__btn.is-claimed,
.mc-build-challenge__btn:disabled {
  background: var(--color-charcoal-2);
  border-color: var(--color-charcoal-2);
  color: var(--color-grey-mid);
  cursor: default;
  transform: none;
  box-shadow: 0 2px 0 rgba(0,0,0,0.3);
}

/* ============================================================
   MOB ENCYCLOPEDIA
   ============================================================ */

.mc-mob-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}

@media (max-width: 480px) {
  .mc-mob-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
}

/* Single mob card -- inventory slot style */
.mc-mob {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #5A5A5A;
  border: 4px solid;
  border-color: var(--rarity, #888) #1A1A1A #1A1A1A var(--rarity, #888);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  animation: mcMobIn 0.5s var(--ease-pop) both;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.15),
    0 4px 0 rgba(0,0,0,0.4);
}

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

.mc-mob:hover,
.mc-mob:focus-visible {
  transform: translateY(-4px);
  outline: none;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.2),
    0 8px 0 rgba(0,0,0,0.4),
    0 0 24px var(--rarity, #888);
}

.mc-mob__art {
  background: #1A1A1A;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mc-mob__art svg {
  width: 100%;
  max-width: 100px;
  height: auto;
  aspect-ratio: 1;
  display: block;
}

.mc-mob__name {
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: #fff;
  text-align: center;
  padding: var(--space-3) var(--space-2) var(--space-1);
  letter-spacing: 0.06em;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.8);
}

.mc-mob__type {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: rgba(255,255,255,0.7);
  text-align: center;
  padding-bottom: var(--space-3);
  letter-spacing: 0.15em;
}

[data-mob-type="passive"] .mc-mob__type { color: #7AAB52; }
[data-mob-type="neutral"] .mc-mob__type { color: #FFD93D; }
[data-mob-type="hostile"] .mc-mob__type { color: #FF6B6B; }
[data-mob-type="boss"]    .mc-mob__type { color: #B14EFF; }

/* ============================================================
   MOB MODAL (clicked mob detail)
   ============================================================ */

.mc-mob-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(5, 8, 24, 0.92);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: fadeIn 0.3s ease;
}

.mc-mob-modal[hidden] { display: none !important; }

.mc-mob-modal__panel {
  position: relative;
  background: linear-gradient(180deg, var(--color-charcoal) 0%, var(--color-charcoal-2) 100%);
  border: 4px solid #5A8A3F;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(160px, 200px) 1fr;
  gap: var(--space-4);
  padding: var(--space-5);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.05),
    0 0 40px rgba(94, 138, 63, 0.5),
    0 12px 40px rgba(0,0,0,0.6);
  animation: scorePromptIn 0.4s var(--ease-pop);
}

@media (max-width: 540px) {
  .mc-mob-modal__panel {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.mc-mob-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-charcoal-2);
  color: #fff;
  border: 2px solid #555;
  cursor: pointer;
  transition: background 0.15s;
}

.mc-mob-modal__close:hover {
  background: #FF6B6B;
  border-color: #DC143C;
}

.mc-mob-modal__art {
  background: #1A1A1A;
  padding: var(--space-3);
  border: 3px solid #383838;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  align-self: start;
}

.mc-mob-modal__art svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mc-mob-modal__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.mc-mob-modal__type {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  color: var(--color-grey-mid);
}

.mc-mob-modal__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: #fff;
  margin: 0;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
  line-height: 1.1;
}

.mc-mob-modal__stats {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.mc-mob-modal__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mc-mob-modal__stat-label {
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  color: var(--color-grey-mid);
}

.mc-mob-modal__hearts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
}

.mc-mob-modal__hearts svg {
  width: 14px;
  height: 13px;
  display: block;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.4));
}

.mc-mob-modal__hp-extra {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-grey-mid);
  margin-left: var(--space-2);
  white-space: nowrap;
}

.mc-mob-modal__damage {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-wrap: wrap;
}

.mc-mob-modal__damage svg {
  width: 14px;
  height: 14px;
  display: block;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.4));
}

.mc-mob-modal__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) 0;
  border-top: 2px solid var(--color-charcoal-2);
}

.mc-mob-modal__row-label {
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  color: var(--color-grey-mid);
}

.mc-mob-modal__row-value {
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--color-off-white);
}

.mc-mob-modal__fact {
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: #5DD5FF;
  font-style: italic;
  padding: var(--space-3);
  border-left: 4px solid #5DD5FF;
  background: rgba(93, 213, 255, 0.06);
  line-height: 1.4;
  margin-top: var(--space-1);
}

/* ============================================================
   CRAFTING RECIPES
   ============================================================ */

.mc-recipes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.mc-recipe {
  background: var(--color-charcoal);
  border: 3px solid #383838;
  padding: var(--space-4);
  animation: mcMobIn 0.5s var(--ease-pop) both;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.05),
    0 4px 0 rgba(0,0,0,0.4);
}

.mc-recipe__head {
  margin-bottom: var(--space-4);
}

.mc-recipe__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: #FFD93D;
  margin: 0 0 var(--space-2) 0;
  letter-spacing: 0.05em;
}

.mc-recipe__desc {
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--color-grey-mid);
  margin: 0;
  line-height: 1.4;
}

.mc-recipe__layout {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: center;
}

.mc-recipe__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: #383838;
  padding: 4px;
  border: 3px solid;
  border-color: #1a1a1a #555 #555 #1a1a1a;
}

.mc-recipe__slot {
  width: 36px;
  height: 36px;
  background: #5A5A5A;
  border: 2px solid;
  border-color: #383838 #888 #888 #383838;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.mc-recipe__slot.is-empty {
  background: #4A4A4A;
}

.mc-recipe__slot svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mc-recipe__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  flex-shrink: 0;
}

.mc-recipe__arrow svg {
  width: 100%;
  height: auto;
  display: block;
}

.mc-recipe__result {
  width: 56px;
  height: 56px;
  background: #5A5A5A;
  border: 3px solid;
  border-color: #FFD93D #B89200 #B89200 #FFD93D;
  position: relative;
  padding: 6px;
  flex-shrink: 0;
}

.mc-recipe__result-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mc-recipe__count {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.9);
}

@media (max-width: 380px) {
  .mc-recipe__layout { gap: var(--space-2); }
  .mc-recipe__slot { width: 28px; height: 28px; padding: 2px; }
  .mc-recipe__result { width: 44px; height: 44px; padding: 4px; }
}

/* ============================================================
   MINING GUIDE (Y-level chart)
   ============================================================ */

.mc-mining {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 720px) {
  .mc-mining { grid-template-columns: 1fr; }
}

.mc-mining__chart {
  display: flex;
  flex-direction: column;
  border: 4px solid #383838;
  background: var(--color-space-deep);
  overflow: hidden;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.05),
    0 4px 0 rgba(0,0,0,0.4);
}

.mc-layer {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  column-gap: var(--space-3);
  row-gap: 2px;
  padding: var(--space-3) var(--space-4);
  min-height: calc(max(64px, var(--layer-pct) * 4px));
  position: relative;
  border-bottom: 2px solid rgba(0,0,0,0.4);
}

.mc-layer:last-child { border-bottom: none; }

.mc-layer__y {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.9);
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
}

.mc-layer__name {
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: #fff;
  letter-spacing: 0.1em;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.9);
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  line-height: 1.2;
}

.mc-layer__what {
  font-family: var(--font-arcade);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.9);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.6);
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  line-height: 1.3;
}

.mc-layer--sky {
  background: linear-gradient(180deg, #6FB6E8, #A8D8F8);
  color: #000;
}
.mc-layer--sky .mc-layer__y,
.mc-layer--sky .mc-layer__name { color: #000; text-shadow: 1px 1px 0 rgba(255,255,255,0.5); }
.mc-layer--sky .mc-layer__what { color: rgba(0,0,0,0.7); text-shadow: 1px 1px 0 rgba(255,255,255,0.5); }

.mc-layer--surface { background: linear-gradient(180deg, #5A8A3F, #3F6B2A); }
.mc-layer--upper   { background: linear-gradient(180deg, #6A6A6A, #555); }
.mc-layer--mid     { background: linear-gradient(180deg, #555, #3A3A3A); }
.mc-layer--diamond { background: linear-gradient(180deg, #3A3A4D, #2A2A3D); }
.mc-layer--rich    {
  background: linear-gradient(180deg, #2A2A3D, #1A1A2D);
  position: relative;
  overflow: hidden;
}
.mc-layer--rich::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, #5DD5FF 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, #5DD5FF 2px, transparent 3px),
    radial-gradient(circle at 90% 20%, #5DD5FF 2px, transparent 3px);
  background-size: 100px 100px;
  opacity: 0.5;
  pointer-events: none;
}

.mc-layer--bedrock {
  background: linear-gradient(180deg, #1A1A1A, #0a0a0a);
  background-image:
    repeating-linear-gradient(45deg, #2a2a2a 0 6px, #1a1a1a 6px 12px);
}

.mc-mining__tip {
  background: var(--color-charcoal);
  border: 3px solid #5DD5FF;
  border-left-width: 8px;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-arcade);
  font-size: var(--text-lg);
  color: var(--color-off-white);
  line-height: 1.5;
}

.mc-mining__tip strong {
  color: #5DD5FF;
}

/* ============================================================
   SURVIVAL TIPS
   ============================================================ */

.mc-tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.mc-tip {
  background: var(--color-charcoal);
  border: 3px solid #383838;
  padding: var(--space-5);
  position: relative;
  transition: transform 0.2s, border-color 0.2s;
  box-shadow: 0 4px 0 rgba(0,0,0,0.3);
}

.mc-tip:hover {
  transform: translateY(-4px);
  border-color: #FFD93D;
  box-shadow: 0 8px 0 rgba(0,0,0,0.3), 0 0 20px rgba(255,217,61,0.3);
}

.mc-tip__num {
  font-family: var(--font-mono);
  font-size: 2.4rem;
  font-weight: 700;
  color: #FFD93D;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
  margin-bottom: var(--space-2);
  line-height: 1;
}

.mc-tip__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-off-white);
  margin: 0 0 var(--space-3) 0;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.mc-tip__text {
  font-family: var(--font-arcade);
  font-size: var(--text-lg);
  color: var(--color-grey-mid);
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   BUILD IDEAS
   ============================================================ */

.mc-builds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.mc-build-card {
  background: var(--color-charcoal);
  border: 3px solid #383838;
  padding: var(--space-4);
  text-align: center;
  transition: transform 0.2s, border-color 0.2s;
  box-shadow: 0 4px 0 rgba(0,0,0,0.3);
  --bc: #888;
}

.mc-build-card:hover {
  transform: translateY(-4px);
  border-color: var(--bc);
  box-shadow: 0 8px 0 rgba(0,0,0,0.3), 0 0 20px var(--bc);
}

.mc-build-card__icon {
  width: 100%;
  aspect-ratio: 1;
  max-width: 120px;
  margin: 0 auto var(--space-3);
  background: var(--color-space-deep);
  border: 3px solid var(--bc);
  padding: var(--space-3);
}

.mc-build-card__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mc-build-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--bc);
  margin: 0 0 var(--space-2) 0;
  letter-spacing: 0.1em;
  line-height: 1.3;
}

.mc-build-card__text {
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--color-grey-mid);
  margin: 0;
  line-height: 1.4;
}

/* ============================================================
   BEST SEEDS
   ============================================================ */

.mc-seeds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.mc-seed-card {
  background: var(--color-charcoal);
  border: 3px solid #383838;
  padding: var(--space-4);
  transition: transform 0.2s, border-color 0.2s;
  box-shadow: 0 4px 0 rgba(0,0,0,0.3);
}

.mc-seed-card:hover {
  border-color: #5A8A3F;
  transform: translateY(-3px);
}

.mc-seed-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.mc-seed-card__edition {
  font-family: var(--font-display);
  font-size: 0.55rem;
  color: #fff;
  background: #5A8A3F;
  padding: 4px 8px;
  letter-spacing: 0.15em;
  border: 2px solid #3F6B2A;
}

.mc-seed-card__name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-off-white);
  margin: 0;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.mc-seed-card__seed {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: #5DD5FF;
  background: var(--color-space-deep);
  padding: var(--space-3);
  border: 2px solid var(--color-charcoal-2);
  margin-bottom: var(--space-3);
  word-break: break-all;
  user-select: all;
  cursor: text;
}

.mc-seed-card__text {
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--color-grey-mid);
  margin: 0;
  line-height: 1.4;
}

.mc-seeds__note {
  margin-top: var(--space-5);
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--color-grey-mid);
  text-align: center;
  padding: var(--space-3);
  background: rgba(255, 217, 61, 0.05);
  border: 2px dashed rgba(255, 217, 61, 0.3);
}

/* ============================================================
   ============================================================
   ROBLOX PAGE
   Bright primary palette, brick-stud aesthetic, Robux yellow.
   ============================================================
   ============================================================ */

/* All decorative SVGs render crisp pixel-art */
[class^="rb-"] svg,
[class*=" rb-"] svg {
  shape-rendering: crispEdges;
}

/* ============================================================
   ROBLOX HERO. Brick-stud title, floating coins, avatars
   ============================================================ */

.rb-hero {
  position: relative;
  min-height: clamp(360px, 60vw, 520px);
  overflow: hidden;
  background: linear-gradient(135deg, #232527 0%, #1a1c1f 50%, #0f1014 100%);
  border-bottom: 6px solid #E2231A;
  isolation: isolate;
}

/* Stud pattern background. Simulates the iconic Roblox brick studs. */
.rb-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    radial-gradient(circle at 20px 20px, rgba(226, 35, 26, 0.2) 4px, transparent 5px),
    radial-gradient(circle at 60px 60px, rgba(255, 217, 61, 0.15) 4px, transparent 5px);
  background-size: 80px 80px, 100px 100px;
  background-position: 0 0, 40px 40px;
  opacity: 0.6;
}

/* Floating Robux coins */
.rb-hero__coin {
  position: absolute;
  z-index: 2;
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.4));
  animation: rb-coin-float 4s ease-in-out infinite;
}

.rb-hero__coin svg { width: 100%; height: 100%; display: block; }

.rb-hero__coin--1 { top: 8%;  left: 4%;  animation-delay: 0s;   }
.rb-hero__coin--2 { top: 18%; right: 4%; animation-delay: -1s; width: 36px; height: 36px; }
.rb-hero__coin--3 { top: 60%; left: 32%; animation-delay: -2s; width: 28px; height: 28px; }
.rb-hero__coin--4 { top: 60%; right: 32%; animation-delay: -3s; width: 28px; height: 28px; }

@keyframes rb-coin-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(8deg); }
}

/* Avatar silhouettes */
.rb-hero__avatar {
  position: absolute;
  z-index: 3;
  width: 90px;
  height: 150px;
  filter: drop-shadow(2px 4px 0 rgba(0, 0, 0, 0.5));
}

.rb-hero__avatar svg { width: 100%; height: 100%; display: block; }

.rb-hero__avatar--james {
  bottom: 0;
  left: 4%;
  animation: rb-avatar-bob-l 3s ease-in-out infinite;
}

.rb-hero__avatar--hugo {
  bottom: 0;
  right: 4%;
  animation: rb-avatar-bob-r 3s ease-in-out infinite;
  animation-delay: -1.5s;
}

@keyframes rb-avatar-bob-l {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes rb-avatar-bob-r {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@media (max-width: 600px) {
  .rb-hero__avatar { width: 56px; height: 94px; }
  .rb-hero__coin { width: 28px; height: 28px; }
  /* Pull top coins right up to corners and hide the lower pair on narrow screens */
  .rb-hero__coin--1 { top: 2%; left: 2%; }
  .rb-hero__coin--2 { top: 2%; right: 2%; }
  .rb-hero__coin--3,
  .rb-hero__coin--4 { display: none; }
}

/* Hero content (title + tagline) */
.rb-hero__content {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: var(--space-7) var(--space-4) var(--space-6);
  max-width: 1280px;
  margin: 0 auto;
}

.rb-hero__breadcrumb {
  font-family: var(--font-display);
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.15em;
  margin-bottom: var(--space-4);
}

.rb-hero__breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border-bottom: 2px dotted rgba(255, 255, 255, 0.4);
}

.rb-hero__breadcrumb a:hover { color: #fff; }

/* The brick-stud ROBLOX title. Each letter is a chunky red brick. */
.rb-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 9vw, 6rem);
  letter-spacing: 0.05em;
  line-height: 1;
  margin: 0 0 var(--space-4) 0;
  display: inline-flex;
  gap: 4px;
  filter: drop-shadow(4px 6px 0 rgba(0, 0, 0, 0.5));
}

.rb-hero__brick {
  display: inline-block;
  background: #E2231A;
  color: #fff;
  padding: 0.18em 0.22em 0.15em;
  border: 4px solid #B81A11;
  border-bottom-width: 8px;
  border-right-width: 8px;
  position: relative;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
  animation: rb-brick-bob 3s ease-in-out infinite;
}

/* Smaller borders on tiny screens so title fits */
@media (max-width: 480px) {
  .rb-hero__title { gap: 2px; }
  .rb-hero__brick {
    border-width: 2px;
    border-bottom-width: 5px;
    border-right-width: 5px;
    padding: 0.15em 0.18em 0.12em;
  }
  .rb-hero__brick::before {
    width: 10px;
    height: 6px;
    top: -7px;
    border-width: 2px;
  }
}

/* Stud on top of each brick */
.rb-hero__brick::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 8px;
  background: #E2231A;
  border: 3px solid #B81A11;
  border-bottom: none;
  border-radius: 50% 50% 0 0;
}

.rb-hero__brick:nth-child(1) { animation-delay: 0.0s; }
.rb-hero__brick:nth-child(2) { animation-delay: 0.1s; }
.rb-hero__brick:nth-child(3) { animation-delay: 0.2s; }
.rb-hero__brick:nth-child(4) { animation-delay: 0.3s; }
.rb-hero__brick:nth-child(5) { animation-delay: 0.4s; }
.rb-hero__brick:nth-child(6) { animation-delay: 0.5s; }

@keyframes rb-brick-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.rb-hero__tagline {
  font-family: var(--font-arcade);
  font-size: clamp(var(--text-base), 2.4vw, var(--text-2xl));
  letter-spacing: 0.1em;
  color: #FFD93D;
  margin: 0;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}

/* ============================================================
   QUICK NAV
   ============================================================ */

.rb-quicknav-wrap {
  background: linear-gradient(180deg, var(--color-charcoal) 0%, var(--color-space-deep) 100%);
  border-bottom: 3px solid var(--color-charcoal-2);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rb-quicknav {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
}

.rb-quicknav__link {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--color-grey-mid);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid var(--color-charcoal-2);
  transition: all 0.15s;
  white-space: nowrap;
}

.rb-quicknav__link:hover,
.rb-quicknav__link:focus-visible {
  background: #E2231A;
  color: #fff;
  border-color: #B81A11;
  outline: none;
  transform: translateY(-2px);
}

/* ============================================================
   DAILY ROBLOX TIP
   ============================================================ */

.rb-tip-banner {
  background: linear-gradient(135deg, rgba(226, 35, 26, 0.12), rgba(255, 217, 61, 0.08));
  border: 3px solid #E2231A;
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.05),
    0 4px 0 rgba(0, 0, 0, 0.3);
}

.rb-tip-banner__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  animation: rb-coin-spin 4s ease-in-out infinite;
}

.rb-tip-banner__icon svg { width: 100%; height: 100%; display: block; }

@keyframes rb-coin-spin {
  0%, 100% { transform: rotateY(0); }
  50%      { transform: rotateY(360deg); }
}

.rb-tip-banner__body { flex: 1; min-width: 220px; }

.rb-tip-banner__label {
  font-family: var(--font-display);
  font-size: 0.6rem;
  color: #FFD93D;
  letter-spacing: 0.2em;
  display: block;
  margin-bottom: var(--space-2);
}

.rb-tip-banner__text {
  font-family: var(--font-arcade);
  font-size: var(--text-lg);
  color: var(--color-off-white);
  margin: 0;
  line-height: 1.4;
}

/* ============================================================
   SECTION INTRO
   ============================================================ */

.section-intro {
  font-family: var(--font-arcade);
  font-size: var(--text-lg);
  color: var(--color-grey-mid);
  margin: var(--space-2) 0 var(--space-4);
  max-width: 720px;
  line-height: 1.5;
}

/* ============================================================
   TOP GAMES GRID
   ============================================================ */

.rb-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.rb-game {
  display: flex;
  flex-direction: column;
  background: var(--color-charcoal);
  border: 3px solid var(--color-charcoal-2);
  border-top-width: 6px;
  border-top-color: var(--game-color, #E2231A);
  overflow: hidden;
  animation: mcMobIn 0.5s var(--ease-pop) both;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.04),
    0 4px 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

.rb-game:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 0 rgba(0, 0, 0, 0.3),
    0 0 24px var(--game-color, #E2231A);
}

.rb-game__art {
  background: linear-gradient(135deg, var(--game-color, #E2231A) 0%, var(--game-accent, #FFB7E5) 100%);
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.rb-game__art::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20px 20px, rgba(255, 255, 255, 0.15) 4px, transparent 5px);
  background-size: 30px 30px;
  opacity: 0.5;
}

.rb-game__art svg {
  width: 70px;
  height: 70px;
  position: relative;
  z-index: 1;
  color: #fff;
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.3));
}

.rb-game__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3);
}

.rb-game__genre {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--game-accent, #FFB7E5);
  font-weight: 700;
}

.rb-game__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-off-white);
  margin: 0;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.rb-game__desc {
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--color-grey-mid);
  margin: 0;
  line-height: 1.4;
  flex: 1;
}

.rb-game__note {
  font-family: var(--font-arcade);
  font-size: var(--text-sm);
  color: var(--color-off-white);
  background: rgba(255, 217, 61, 0.08);
  border-left: 3px solid #FFD93D;
  padding: var(--space-2) var(--space-3);
  line-height: 1.4;
}

.rb-game__note-label {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  color: #FFD93D;
  display: block;
  margin-bottom: 2px;
}

.rb-game__btn {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  padding: var(--space-3) var(--space-4);
  background: var(--color-space-deep);
  color: #fff;
  border: 3px solid var(--game-color, #E2231A);
  border-bottom-width: 5px;
  text-decoration: none;
  letter-spacing: 0.1em;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: auto;
  transition: transform 0.15s, background 0.15s, color 0.15s;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
}

.rb-game__btn:hover {
  transform: translateY(-2px);
  background: var(--game-color, #E2231A);
  color: var(--game-text, #0A0E27);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4);
}

/* ============================================================
   PROMO CODES HUB
   ============================================================ */

.rb-codes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.rb-code {
  background: var(--color-charcoal);
  border: 3px solid var(--color-charcoal-2);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  animation: mcMobIn 0.5s var(--ease-pop) both;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.04),
    0 4px 0 rgba(0, 0, 0, 0.3);
}

.rb-code[data-code-status="active"]   { border-color: #5A8A3F; }
.rb-code[data-code-status="expired"]  { border-color: var(--color-charcoal-2); opacity: 0.7; }

.rb-code__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.rb-code__game {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-off-white);
  letter-spacing: 0.04em;
}

.rb-code__status {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  padding: 4px 8px;
  border: 2px solid;
}

.rb-code[data-code-status="active"] .rb-code__status {
  background: rgba(90, 138, 63, 0.15);
  color: #7AAB52;
  border-color: #5A8A3F;
}

.rb-code[data-code-status="expired"] .rb-code__status {
  background: rgba(220, 20, 60, 0.1);
  color: #FF6B6B;
  border-color: #DC143C;
}

.rb-code__copy {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-space-deep);
  border: 3px solid;
  border-color: var(--color-charcoal-2) #1a1a1a #1a1a1a var(--color-charcoal-2);
  padding: var(--space-3) var(--space-3);
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  text-align: left;
  position: relative;
}

.rb-code__copy:hover:not(:disabled) {
  background: var(--color-charcoal);
  border-color: #FFD93D #B89200 #B89200 #FFD93D;
}

.rb-code__copy:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rb-code__copy.is-copied {
  background: #5A8A3F;
  border-color: #7AAB52 #3F6B2A #3F6B2A #7AAB52;
}

.rb-code__text {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: #FFD93D;
  flex: 1;
  letter-spacing: 0.04em;
  word-break: break-all;
}

.rb-code__copy.is-copied .rb-code__text { color: #fff; }

.rb-code__copy-icon {
  display: flex;
  color: var(--color-grey-mid);
  flex-shrink: 0;
}

.rb-code__copy.is-copied .rb-code__copy-icon { color: #fff; }

.rb-code__copy-state {
  position: absolute;
  top: -10px;
  right: -10px;
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  background: #5A8A3F;
  color: #fff;
  padding: 4px 8px;
  border: 2px solid #7AAB52;
  pointer-events: none;
}

.rb-code__copy-state:empty { display: none; }

.rb-code__reward,
.rb-code__note {
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--color-off-white);
  margin: 0;
  line-height: 1.4;
}

.rb-code__reward strong,
.rb-code__note strong {
  color: #FFD93D;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 2px;
}

.rb-code__where {
  font-family: var(--font-arcade);
  font-size: var(--text-sm);
  color: var(--color-grey-mid);
  margin: 0;
  font-style: italic;
}

/* ============================================================
   STUDIO CORNER (Lua lessons)
   ============================================================ */

.rb-studio-intro {
  background: var(--color-charcoal);
  border: 3px solid var(--color-charcoal-2);
  border-left: 6px solid #FFD93D;
  padding: var(--space-5);
  margin-top: var(--space-5);
}

.rb-studio-intro__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: #FFD93D;
  margin: 0 0 var(--space-3) 0;
  letter-spacing: 0.04em;
}

.rb-studio-intro p {
  font-family: var(--font-arcade);
  font-size: var(--text-lg);
  color: var(--color-off-white);
  line-height: 1.5;
  margin: 0 0 var(--space-4) 0;
}

.rb-studio-steps {
  margin: 0;
  padding-left: var(--space-5);
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--color-off-white);
  line-height: 1.6;
}

.rb-studio-steps li {
  margin-bottom: var(--space-2);
}

.rb-studio-steps li::marker { color: #FFD93D; font-weight: 700; }

.rb-studio-steps strong {
  color: #FFD93D;
  font-family: var(--font-display);
  font-size: 0.85em;
  letter-spacing: 0.04em;
}

.rb-studio-subtitle {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-off-white);
  letter-spacing: 0.1em;
  margin: var(--space-6) 0 0 0;
}

.rb-lessons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.rb-lesson {
  background: var(--color-charcoal);
  border: 3px solid var(--color-charcoal-2);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  animation: mcMobIn 0.5s var(--ease-pop) both;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.04),
    0 4px 0 rgba(0, 0, 0, 0.3);
}

.rb-lesson__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.rb-lesson__num {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 800;
  color: #FFD93D;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  line-height: 1;
  flex-shrink: 0;
}

.rb-lesson__title-wrap {
  flex: 1;
  min-width: 0;
}

.rb-lesson__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-off-white);
  margin: 0 0 var(--space-1) 0;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.rb-lesson__diff {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  padding: 3px 7px;
  border: 2px solid;
  display: inline-block;
}

.rb-lesson__diff--beginner {
  background: rgba(90, 138, 63, 0.15);
  color: #7AAB52;
  border-color: #5A8A3F;
}

.rb-lesson__diff--intermediate {
  background: rgba(255, 170, 0, 0.15);
  color: #FFD93D;
  border-color: #FFAA00;
}

.rb-lesson__intro,
.rb-lesson__where,
.rb-lesson__explain {
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--color-off-white);
  margin: 0;
  line-height: 1.5;
}

.rb-lesson__where { color: var(--color-grey-mid); }

.rb-lesson__where strong,
.rb-lesson__explain strong {
  color: #FFD93D;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 2px;
}

.rb-lesson__code-wrap {
  position: relative;
  background: #0a0a0f;
  border: 2px solid var(--color-charcoal-2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rb-lesson__code-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 2px solid var(--color-charcoal-2);
}

.rb-lesson__copy {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  padding: 4px 10px;
  background: var(--color-charcoal);
  color: var(--color-grey-mid);
  border: 2px solid var(--color-charcoal-2);
  cursor: pointer;
  transition: all 0.15s;
}

.rb-lesson__copy:hover {
  background: #FFD93D;
  color: #1A1A1A;
  border-color: #FFAA00;
}

.rb-lesson__copy.is-copied {
  background: #5A8A3F;
  color: #fff;
  border-color: #7AAB52;
}

.rb-lesson__code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: #E5E5E5;
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  white-space: pre;
}

.rb-lesson__code code { background: transparent; padding: 0; }

/* Lua syntax highlighting */
.lua-c { color: #6A8A5A; font-style: italic; }
.lua-s { color: #FFAA77; }
.lua-n { color: #FF8FA7; }
.lua-k { color: #5DD5FF; font-weight: 700; }
.lua-b { color: #FFD93D; }

.rb-studio-publish {
  background: linear-gradient(135deg, rgba(226, 35, 26, 0.1), rgba(255, 217, 61, 0.05));
  border: 3px dashed #FFD93D;
  padding: var(--space-5);
  margin-top: var(--space-5);
}

.rb-studio-publish__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: #FFD93D;
  margin: 0 0 var(--space-2) 0;
  letter-spacing: 0.05em;
}

.rb-studio-publish p {
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--color-off-white);
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   ROBUX SAFETY ZONE
   ============================================================ */

.rb-safety-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.rb-safety {
  background: var(--color-charcoal);
  border: 3px solid var(--color-charcoal-2);
  border-left: 6px solid #FF6B6B;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  animation: mcMobIn 0.5s var(--ease-pop) both;
  transition: transform 0.2s, border-color 0.2s;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
}

.rb-safety:hover {
  transform: translateY(-3px);
  border-left-color: #DC143C;
}

.rb-safety__icon {
  width: 40px;
  height: 40px;
  color: #FF6B6B;
  flex-shrink: 0;
}

.rb-safety__icon svg { width: 100%; height: 100%; display: block; }

.rb-safety__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-off-white);
  margin: 0;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.rb-safety__body {
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--color-off-white);
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   AVATAR GALLERY
   ============================================================ */

.rb-avatars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.rb-avatar-card {
  background: var(--color-charcoal);
  border: 3px solid var(--avatar-color, #FF2E93);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  position: relative;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.04),
    0 4px 0 rgba(0, 0, 0, 0.3),
    0 0 30px rgba(255, 46, 147, 0.15);
}

.rb-avatar-card__art {
  width: 120px;
  height: 200px;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 2px solid var(--color-charcoal-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}

.rb-avatar-card__art svg { width: 100%; height: 100%; display: block; }

.rb-avatar-card__body {
  text-align: center;
  width: 100%;
}

.rb-avatar-card__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--avatar-color, #FF2E93);
  margin: 0;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.rb-avatar-card__sub {
  font-family: var(--font-display);
  font-size: 0.55rem;
  color: var(--color-grey-mid);
  letter-spacing: 0.2em;
  margin: var(--space-1) 0 var(--space-3) 0;
}

.rb-avatar-card__loadout {
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--color-off-white);
  margin: 0;
  line-height: 1.4;
}

.rb-avatars__note {
  margin-top: var(--space-5);
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--color-grey-mid);
  text-align: center;
  padding: var(--space-3);
  background: rgba(255, 217, 61, 0.05);
  border: 2px dashed rgba(255, 217, 61, 0.3);
  line-height: 1.5;
}

/* ============================================================
   FRIENDS-ONLY MODE BANNER
   ============================================================ */

.rb-friends-banner {
  background: linear-gradient(135deg, rgba(93, 213, 255, 0.12), rgba(74, 141, 236, 0.06));
  border: 3px solid #5DD5FF;
  border-left-width: 8px;
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.05),
    0 4px 0 rgba(0, 0, 0, 0.3);
}

.rb-friends-banner__icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}

.rb-friends-banner__icon svg { width: 100%; height: 100%; display: block; }

.rb-friends-banner__body { flex: 1; min-width: 220px; }

.rb-friends-banner__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: #5DD5FF;
  letter-spacing: 0.1em;
  margin: 0 0 var(--space-2) 0;
}

.rb-friends-banner__text {
  font-family: var(--font-arcade);
  font-size: var(--text-lg);
  color: var(--color-off-white);
  line-height: 1.5;
  margin: 0;
}

.rb-friends-banner__text strong {
  color: #5DD5FF;
  font-family: var(--font-display);
  font-size: 0.9em;
}

/* ============================================================
   ============================================================
   ROCKET LEAGUE PAGE
   Blue/orange teams, stadium pitch background, big block titles
   ============================================================
   ============================================================ */

[class^="rl-"] svg,
[class*=" rl-"] svg {
  shape-rendering: crispEdges;
}

/* ============================================================
   ROCKET LEAGUE HERO
   ============================================================ */

.rl-hero {
  position: relative;
  min-height: clamp(360px, 60vw, 520px);
  overflow: hidden;
  background: linear-gradient(135deg, #0F1A36 0%, #0A1228 50%, #050913 100%);
  border-bottom: 6px solid #FFD93D;
  isolation: isolate;
}

/* Pitch / stadium background */
.rl-hero__field {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    /* faint pitch lines */
    linear-gradient(180deg, transparent 0%, transparent 80%, rgba(255, 217, 61, 0.04) 80%, rgba(255, 217, 61, 0.04) 81%, transparent 81%),
    /* dots */
    radial-gradient(circle at 30px 30px, rgba(0, 82, 229, 0.15) 1.5px, transparent 2px),
    radial-gradient(circle at 60px 60px, rgba(255, 105, 0, 0.15) 1.5px, transparent 2px);
  background-size: 100% 100%, 60px 60px, 80px 80px;
  background-position: 0 0, 0 0, 30px 30px;
  opacity: 0.7;
}

.rl-hero__ball {
  position: absolute;
  z-index: 2;
  top: 18%;
  right: 14%;
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.5));
  animation: rl-ball-spin 6s linear infinite, rl-ball-bob 2s ease-in-out infinite;
}

@keyframes rl-ball-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes rl-ball-bob {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -8px; }
}

.rl-hero__ball svg { width: 100%; height: 100%; display: block; }

.rl-hero__car {
  position: absolute;
  z-index: 3;
  width: 130px;
  height: 65px;
  bottom: 12%;
  filter: drop-shadow(2px 4px 0 rgba(0, 0, 0, 0.5));
}

.rl-hero__car svg { width: 100%; height: 100%; display: block; }

.rl-hero__car--james {
  left: 4%;
  animation: rl-car-l 3s ease-in-out infinite;
}

.rl-hero__car--hugo {
  right: 4%;
  transform: scaleX(-1);
  animation: rl-car-r 3s ease-in-out infinite;
  animation-delay: -1.5s;
}

@keyframes rl-car-l {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(8px); }
}

@keyframes rl-car-r {
  0%, 100% { transform: scaleX(-1) translateX(0); }
  50%      { transform: scaleX(-1) translateX(8px); }
}

@media (max-width: 600px) {
  .rl-hero__car { width: 80px; height: 40px; bottom: 8%; }
  .rl-hero__ball { width: 36px; height: 36px; top: 8%; right: 6%; }
}

.rl-hero__content {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: var(--space-7) var(--space-4) var(--space-6);
  max-width: 1280px;
  margin: 0 auto;
}

.rl-hero__breadcrumb {
  font-family: var(--font-display);
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.15em;
  margin-bottom: var(--space-4);
}

.rl-hero__breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border-bottom: 2px dotted rgba(255, 255, 255, 0.4);
}
.rl-hero__breadcrumb a:hover { color: #fff; }

.rl-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 5rem);
  letter-spacing: 0.05em;
  line-height: 1;
  margin: 0 0 var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}

.rl-hero__title-line {
  display: inline-block;
  padding: 0.1em 0.3em;
  border: 4px solid;
  text-shadow:
    3px 3px 0 rgba(0, 0, 0, 0.5),
    -1px -1px 0 rgba(0, 0, 0, 0.6),
    1px -1px 0 rgba(0, 0, 0, 0.6),
    -1px 1px 0 rgba(0, 0, 0, 0.6),
    1px 1px 0 rgba(0, 0, 0, 0.6);
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.4);
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.4));
}

.rl-hero__title-line--blue {
  background: #0052E5;
  color: #fff;
  border-color: #5DD5FF;
  transform: skewX(-8deg);
}

.rl-hero__title-line--orange {
  background: #FF6900;
  color: #fff;
  border-color: #FFD93D;
  transform: skewX(-8deg);
}

.rl-hero__tagline {
  font-family: var(--font-arcade);
  font-size: clamp(var(--text-base), 2.4vw, var(--text-2xl));
  letter-spacing: 0.1em;
  color: #FFD93D;
  margin: 0;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}

/* ============================================================
   QUICK NAV
   ============================================================ */

.rl-quicknav-wrap {
  background: linear-gradient(180deg, var(--color-charcoal) 0%, var(--color-space-deep) 100%);
  border-bottom: 3px solid var(--color-charcoal-2);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rl-quicknav {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
}

.rl-quicknav__link {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--color-grey-mid);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid var(--color-charcoal-2);
  transition: all 0.15s;
  white-space: nowrap;
}

.rl-quicknav__link:hover,
.rl-quicknav__link:focus-visible {
  background: #0052E5;
  color: #fff;
  border-color: #5DD5FF;
  outline: none;
  transform: translateY(-2px);
}

/* ============================================================
   DAILY TIP (reuses rb-tip-banner pattern)
   ============================================================ */

.rl-tip-banner {
  background: linear-gradient(135deg, rgba(0, 82, 229, 0.12), rgba(255, 105, 0, 0.08));
  border: 3px solid #0052E5;
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.05),
    0 4px 0 rgba(0, 0, 0, 0.3);
}

.rl-tip-banner__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}
.rl-tip-banner__icon svg { width: 100%; height: 100%; display: block; }

.rl-tip-banner__body { flex: 1; min-width: 220px; }

.rl-tip-banner__label {
  font-family: var(--font-display);
  font-size: 0.6rem;
  color: #FFD93D;
  letter-spacing: 0.2em;
  display: block;
  margin-bottom: var(--space-2);
}

.rl-tip-banner__text {
  font-family: var(--font-arcade);
  font-size: var(--text-lg);
  color: var(--color-off-white);
  margin: 0;
  line-height: 1.4;
}

/* ============================================================
   RANK TRACKER
   ============================================================ */

.rl-rank-layout,
.rl-match-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

@media (min-width: 900px) {
  .rl-rank-layout,
  .rl-match-layout {
    grid-template-columns: 1fr 1fr;
  }
}

.rl-rank-form-card,
.rl-rank-summary-card,
.rl-match-form-card,
.rl-match-stats-card {
  background: var(--color-charcoal);
  border: 3px solid var(--color-charcoal-2);
  padding: var(--space-5);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.04),
    0 4px 0 rgba(0, 0, 0, 0.3);
}

.rl-card-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: #FFD93D;
  margin: 0 0 var(--space-4) 0;
  letter-spacing: 0.15em;
  border-bottom: 2px solid var(--color-charcoal-2);
  padding-bottom: var(--space-2);
}

/* Form sections */
.rl-form-section { margin-bottom: var(--space-4); }

.rl-form-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--color-grey-mid);
  margin-bottom: var(--space-2);
}

.rl-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rl-form-row--ranks { gap: 6px; }

/* Pills */
.rl-pill {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-off-white);
  border: 2px solid var(--color-charcoal-2);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rl-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-grey-mid);
}

.rl-pill.is-active {
  background: var(--pill-color, #0052E5);
  color: #fff;
  border-color: var(--pill-color, #5DD5FF);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

.rl-pill__sub {
  font-size: 0.5rem;
  opacity: 0.7;
  letter-spacing: 0.05em;
}

/* Rank pills (custom for the colored short letter) */
.rl-rank-pill {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  padding: var(--space-2) var(--space-3) var(--space-2) 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-off-white);
  border: 2px solid var(--color-charcoal-2);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rl-rank-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-grey-mid);
}

.rl-rank-pill.is-active {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--rank-color, #FFD93D);
  box-shadow: 0 0 0 2px rgba(255, 217, 61, 0.2);
}

.rl-rank-pill__short {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: var(--rank-color, #FFD93D);
  color: var(--rank-text, #0A0E27);
  font-weight: 800;
  font-size: 0.7rem;
  line-height: 24px;
  text-align: center;
  border-radius: 2px;
}

.rl-form-input {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  padding: var(--space-2) var(--space-3);
  background: var(--color-space-deep);
  color: var(--color-off-white);
  border: 2px solid var(--color-charcoal-2);
  width: 140px;
  outline: none;
  transition: border-color 0.15s;
}
.rl-form-input:focus {
  border-color: #FFD93D;
}

.rl-form-actions {
  margin-top: var(--space-5);
}

.rl-form-submit {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  padding: var(--space-3) var(--space-5);
  background: #FFD93D;
  color: #0A0E27;
  border: 3px solid #B89200;
  border-bottom-width: 5px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}

.rl-form-submit:hover {
  background: #FFE980;
  transform: translateY(-2px);
}

.rl-form-submit:active {
  transform: translateY(0);
  border-bottom-width: 3px;
  margin-bottom: 2px;
}

[data-rl-save-state]:not(:empty),
[data-rl-match-save-state]:not(:empty) {
  position: absolute;
  top: -10px;
  right: -10px;
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  background: #5A8A3F;
  color: #fff;
  padding: 4px 8px;
  border: 2px solid #7AAB52;
}

/* Result buttons (Win/Loss) */
.rl-result-btn {
  flex: 1;
  max-width: 160px;
  font-family: var(--font-display);
  font-size: var(--text-base);
  letter-spacing: 0.1em;
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-off-white);
  border: 3px solid var(--color-charcoal-2);
  cursor: pointer;
  transition: all 0.15s;
}

.rl-result-btn--win.is-active {
  background: #3F6B2A;
  color: #fff;
  border-color: #5A8A3F;
}

.rl-result-btn--loss.is-active {
  background: #DC143C;
  color: #fff;
  border-color: #FF6B6B;
}

.rl-result-btn:hover { transform: translateY(-2px); }

/* Stat input grid */
.rl-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 100px), 1fr));
  gap: var(--space-3);
}

.rl-form-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rl-form-stat span {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  color: var(--color-grey-mid);
}

.rl-form-stat input[type="number"] {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  padding: var(--space-2) var(--space-3);
  background: var(--color-space-deep);
  color: var(--color-off-white);
  border: 2px solid var(--color-charcoal-2);
  width: 100%;
  outline: none;
}
.rl-form-stat input[type="number"]:focus { border-color: #FFD93D; }

.rl-form-stat--check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-space-deep);
  border: 2px solid var(--color-charcoal-2);
}

.rl-form-stat--check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #FFD93D;
  cursor: pointer;
}

/* Empty state */
.rl-empty {
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--color-grey-mid);
  font-style: italic;
  margin: 0;
  padding: var(--space-4);
  text-align: center;
}

/* Rank cards (summary view) */
.rl-ranks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.rl-rank-card {
  background: var(--color-space-deep);
  border: 2px solid var(--color-charcoal-2);
  border-left: 5px solid var(--pl-color, #0052E5);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.rl-rank-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rl-rank-card__playlist {
  display: flex;
  flex-direction: column;
}

.rl-rank-card__pl-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--color-off-white);
}

.rl-rank-card__pl-sub {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--color-grey-mid);
  letter-spacing: 0.05em;
}

.rl-trend {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border: 2px solid;
}
.rl-trend--up   { color: #7AAB52; border-color: #5A8A3F; background: rgba(90, 138, 63, 0.15); }
.rl-trend--down { color: #FF6B6B; border-color: #DC143C; background: rgba(220, 20, 60, 0.1); }
.rl-trend--flat { color: var(--color-grey-mid); border-color: var(--color-charcoal-2); }

.rl-rank-card__rank {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.rl-rank-card__short {
  display: inline-block;
  min-width: 36px;
  height: 36px;
  background: var(--rank-color, #FFD93D);
  color: var(--rank-text, #0A0E27);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  line-height: 36px;
  text-align: center;
  padding: 0 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.rl-rank-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-off-white);
  letter-spacing: 0.04em;
}

.rl-rank-card__mmr {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-grey-mid);
}

.rl-spark {
  width: 100%;
  height: 40px;
  display: block;
}

.rl-rank-card__meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-grey-mid);
  border-top: 1px solid var(--color-charcoal-2);
  padding-top: var(--space-2);
}

/* ============================================================
   MATCH STATS
   ============================================================ */

.rl-stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.rl-stat-card {
  background: var(--color-space-deep);
  border: 2px solid var(--color-charcoal-2);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.rl-stat-card--main {
  border-color: #FFD93D;
  background: linear-gradient(135deg, rgba(255, 217, 61, 0.08), transparent);
}

.rl-stat-card__num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-off-white);
  line-height: 1;
}

.rl-stat-card--main .rl-stat-card__num { color: #FFD93D; }

.rl-stat-card__label {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  color: var(--color-grey-mid);
}

.rl-stat-card__sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-off-white);
}

.rl-stat-card__sub--win  { color: #7AAB52; }
.rl-stat-card__sub--loss { color: #FF6B6B; }

.rl-stat-subtitle {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--color-grey-mid);
  margin: var(--space-4) 0 var(--space-3) 0;
}

.rl-playlist-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rl-pl-stat {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-3);
  padding: 6px var(--space-3);
  background: var(--color-space-deep);
  border-left: 3px solid var(--pl-color, #0052E5);
  align-items: center;
}

.rl-pl-stat__name {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--color-off-white);
}

.rl-pl-stat__record,
.rl-pl-stat__rate {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-grey-mid);
}

.rl-pl-stat__rate { color: var(--pl-color, #FFD93D); font-weight: 700; }

.rl-recent {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rl-recent__item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--space-3);
  padding: 6px var(--space-3);
  background: var(--color-space-deep);
  border-left: 3px solid var(--color-charcoal-2);
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.rl-recent__item--win  { border-left-color: #5A8A3F; }
.rl-recent__item--loss { border-left-color: #DC143C; }

.rl-recent__result {
  font-family: var(--font-display);
  font-size: 0.7rem;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  color: #fff;
  background: var(--color-charcoal);
}
.rl-recent__item--win  .rl-recent__result { background: #3F6B2A; }
.rl-recent__item--loss .rl-recent__result { background: #DC143C; }

.rl-recent__pl    { color: var(--color-off-white); font-family: var(--font-display); font-size: 0.65rem; letter-spacing: 0.1em; }
.rl-recent__stats { color: #FFD93D; font-size: 0.7rem; }
.rl-recent__date  { color: var(--color-grey-mid); font-size: 0.7rem; }

.rl-recent-actions {
  margin-top: var(--space-4);
  text-align: right;
}

.rl-clear-btn {
  font-family: var(--font-arcade);
  font-size: var(--text-sm);
  color: var(--color-grey-mid);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
}
.rl-clear-btn:hover { color: #FF6B6B; }

/* ============================================================
   TRAINING PACKS
   ============================================================ */

.rl-packs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.rl-pack {
  background: var(--color-charcoal);
  border: 3px solid var(--color-charcoal-2);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  animation: mcMobIn 0.5s var(--ease-pop) both;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.04),
    0 4px 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, border-color 0.2s;
}

.rl-pack:hover {
  transform: translateY(-3px);
  border-color: #FFD93D;
}

.rl-pack__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
}

.rl-pack__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-off-white);
  margin: 0;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.rl-pack__stars {
  font-size: 0.85rem;
  color: #FFD93D;
  letter-spacing: 1px;
  white-space: nowrap;
  flex-shrink: 0;
}

.rl-pack__teaches {
  font-family: var(--font-arcade);
  font-size: var(--text-sm);
  color: #FFD93D;
  margin: 0;
  font-style: italic;
}

.rl-pack__why {
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--color-off-white);
  margin: 0;
  line-height: 1.4;
}

.rl-pack__meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-grey-mid);
}

.rl-pack__copy {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-space-deep);
  border: 3px solid;
  border-color: var(--color-charcoal-2) #1a1a1a #1a1a1a var(--color-charcoal-2);
  padding: var(--space-3);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  position: relative;
}

.rl-pack__copy:hover {
  background: var(--color-charcoal);
  border-color: #FFD93D #B89200 #B89200 #FFD93D;
}

.rl-pack__copy.is-copied {
  background: #5A8A3F;
  border-color: #7AAB52 #3F6B2A #3F6B2A #7AAB52;
}

.rl-pack__code {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: #FFD93D;
  flex: 1;
  letter-spacing: 0.04em;
  word-break: break-all;
}

.rl-pack__copy.is-copied .rl-pack__code { color: #fff; }

.rl-pack__copy-icon {
  display: flex;
  color: var(--color-grey-mid);
  flex-shrink: 0;
}

.rl-pack__copy.is-copied .rl-pack__copy-icon { color: #fff; }

.rl-pack__copy-state {
  position: absolute;
  top: -10px;
  right: -10px;
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  background: #5A8A3F;
  color: #fff;
  padding: 4px 8px;
  border: 2px solid #7AAB52;
  pointer-events: none;
}
.rl-pack__copy-state:empty { display: none; }

/* ============================================================
   MECHANICS SCHOOL
   ============================================================ */

.rl-mechs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.rl-mech {
  background: var(--color-charcoal);
  border: 3px solid var(--color-charcoal-2);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  animation: mcMobIn 0.5s var(--ease-pop) both;
}

.rl-mech__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.rl-mech__num {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 800;
  color: #FFD93D;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  line-height: 1;
  flex-shrink: 0;
}

.rl-mech__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-off-white);
  margin: 0;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.rl-mech__tags {
  display: flex;
  gap: var(--space-2);
  margin-top: 4px;
  flex-wrap: wrap;
}

.rl-mech__diff {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  padding: 3px 7px;
  border: 2px solid;
}
.rl-mech__diff--beginner     { background: rgba(90, 138, 63, 0.15); color: #7AAB52; border-color: #5A8A3F; }
.rl-mech__diff--intermediate { background: rgba(255, 170, 0, 0.15); color: #FFD93D; border-color: #FFAA00; }
.rl-mech__diff--advanced     { background: rgba(220, 20, 60, 0.15); color: #FF6B6B; border-color: #DC143C; }

.rl-mech__time {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-grey-mid);
  align-self: center;
}

.rl-mech__why {
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--color-off-white);
  margin: 0;
  line-height: 1.4;
}

.rl-mech__why strong,
.rl-mech__tip strong {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: #FFD93D;
  display: inline-block;
  margin-right: 6px;
}

.rl-mech__steps {
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--color-off-white);
  margin: 0;
  padding-left: var(--space-5);
  line-height: 1.5;
}

.rl-mech__steps li { margin-bottom: 4px; }
.rl-mech__steps li::marker { color: #0052E5; font-weight: 700; }

.rl-mech__tip {
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--color-off-white);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 217, 61, 0.06);
  border-left: 3px solid #FFD93D;
  line-height: 1.4;
}

.rl-mech__pack-link {
  font-family: var(--font-arcade);
  font-size: var(--text-sm);
  color: #5DD5FF;
  text-decoration: none;
  border-bottom: 2px dotted rgba(93, 213, 255, 0.4);
}

.rl-mech__pack-link:hover { color: #fff; border-bottom-color: #fff; }

/* ============================================================
   LOADOUTS
   ============================================================ */

.rl-loadouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.rl-loadout {
  background: var(--color-charcoal);
  border: 3px solid var(--accent, #0052E5);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.04),
    0 4px 0 rgba(0, 0, 0, 0.3);
}

.rl-loadout__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  border-bottom: 2px solid var(--accent);
  padding-bottom: var(--space-2);
}

.rl-loadout__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--accent);
  margin: 0;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.rl-loadout__team {
  font-family: var(--font-display);
  font-size: 0.6rem;
  color: var(--color-grey-mid);
  letter-spacing: 0.2em;
}

.rl-loadout__car {
  background: var(--color-space-deep);
  padding: var(--space-3);
  border: 2px solid var(--color-charcoal-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rl-loadout__car svg { width: 100%; max-width: 240px; height: auto; }

.rl-loadout__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.rl-loadout__items li {
  display: flex;
  flex-direction: column;
  padding: 6px var(--space-2);
  background: var(--color-space-deep);
  border-left: 2px solid var(--accent);
}

.rl-loadout__items li span {
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.15em;
  color: var(--color-grey-mid);
}

.rl-loadout__items li strong {
  font-family: var(--font-arcade);
  font-size: var(--text-sm);
  color: var(--color-off-white);
  font-weight: 600;
}

.rl-loadout__why {
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--color-off-white);
  font-style: italic;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid var(--accent);
  line-height: 1.5;
}

/* ============================================================
   ITEM RARITIES
   ============================================================ */

.rl-rarities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.rl-rarity {
  background: var(--color-charcoal);
  border: 2px solid var(--color-charcoal-2);
  border-left: 5px solid var(--rarity-color, #888);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.rl-rarity__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.rl-rarity__swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--rarity-color);
  border: 2px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.rl-rarity__name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-off-white);
  margin: 0;
  letter-spacing: 0.05em;
  flex: 1;
}

.rl-rarity__tradeup {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: #FFD93D;
  letter-spacing: 0.04em;
}

.rl-rarity__tradeup--none { color: var(--color-grey-mid); }

.rl-rarity__note {
  font-family: var(--font-arcade);
  font-size: var(--text-sm);
  color: var(--color-off-white);
  margin: 0;
  line-height: 1.4;
}

.rl-trading-tips {
  margin-top: var(--space-5);
  background: var(--color-charcoal);
  border: 3px dashed #FFD93D;
  padding: var(--space-5);
}

.rl-trading-tips ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.rl-trading-tips li {
  font-family: var(--font-arcade);
  font-size: var(--text-base);
  color: var(--color-off-white);
  line-height: 1.5;
  padding-left: var(--space-3);
  border-left: 3px solid #0052E5;
}

.rl-trading-tips strong {
  color: #FFD93D;
  font-family: var(--font-display);
  font-size: 0.85em;
  letter-spacing: 0.04em;
  display: inline-block;
  margin-right: 4px;
}

/* ============================================================
   ESPORTS
   ============================================================ */

.rl-esports {
  background: var(--color-charcoal);
  border: 3px solid var(--color-charcoal-2);
  border-top: 6px solid #FF6900;
  padding: var(--space-5);
  margin-top: var(--space-5);
}

.rl-esports__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  border-bottom: 2px solid var(--color-charcoal-2);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
}

.rl-esports__season {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: #FFD93D;
  letter-spacing: 0.05em;
}

.rl-esports__format {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-grey-mid);
}

.rl-esports__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

@media (min-width: 600px) {
  .rl-esports__cols { grid-template-columns: 1fr 1fr; }
}

.rl-esports__subtitle {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--color-grey-mid);
  margin: 0 0 var(--space-3) 0;
}

.rl-esports__majors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.rl-esports__majors li {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--color-space-deep);
  border-left: 3px solid #FF6900;
  font-family: var(--font-arcade);
  font-size: var(--text-base);
}

.rl-esports__major-name { color: var(--color-off-white); font-weight: 600; }
.rl-esports__major-dates { color: var(--color-grey-mid); font-family: var(--font-mono); font-size: 0.85em; }

.rl-esports__teams {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rl-esports__teams li {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  background: rgba(0, 82, 229, 0.1);
  border: 2px solid #0052E5;
  color: var(--color-off-white);
}

.rl-esports__watch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  padding: var(--space-3) var(--space-5);
  background: var(--color-space-deep);
  color: #fff;
  border: 3px solid #FF6900;
  border-bottom-width: 5px;
  text-decoration: none;
  transition: all 0.15s;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
}

.rl-esports__watch:hover {
  background: #FF6900;
  transform: translateY(-2px);
}