/* ═══════════════════════════════════════════════════════════════════
   Hedoné city — Forja Nórdica
   Atmósfera: ceniza, brasa, hierro forjado, madera de roble quemada
═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=UnifrakturCook:wght@700&family=MedievalSharp&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Forge palette — default "ámbar" */
  --ash-900: #0b0908;
  --ash-850: #110e0c;
  --ash-800: #181513;
  --ash-750: #1f1b18;
  --ash-700: #26211d;
  --ash-600: #312a25;
  --ash-500: #3d342e;
  --ash-400: #4a3f37;
  --stone-300: #6b5d52;
  --stone-200: #8a7a6b;
  --bone-100: #c9b9a4;
  --bone-50:  #e7d9c2;
  --parchment: #f3e7cf;

  /* Fire / forge */
  --ember-deep: #6b1f08;
  --ember:       #b04b16;
  --forge:       #d8761f;
  --amber:       #f0a23a;
  --spark:       #ffd58a;

  /* Race accent — overridden by [data-race] */
  --race-accent: var(--forge);
  --race-accent-soft: rgba(216, 118, 31, 0.18);
  --race-glow: rgba(240, 162, 58, 0.55);
  --race-deep: var(--ember-deep);

  /* Type stacks */
  --font-display: 'Cinzel', serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-rune: 'MedievalSharp', cursive;
  --font-blackletter: 'UnifrakturCook', serif;

  --title-font: var(--font-display);
}

/* Race themes ─────────────────────────────────────────────── */
[data-race="warrior"] {
  --race-accent: #d94a1f;
  --race-accent-soft: rgba(217, 74, 31, 0.20);
  --race-glow: rgba(255, 110, 60, 0.55);
  --race-deep: #5a1408;
}
[data-race="ninja"] {
  --race-accent: #5b8a3a;
  --race-accent-soft: rgba(91, 138, 58, 0.20);
  --race-glow: rgba(140, 200, 100, 0.45);
  --race-deep: #1f2e15;
}
[data-race="sura"] {
  --race-accent: #8e5cb8;
  --race-accent-soft: rgba(142, 92, 184, 0.20);
  --race-glow: rgba(180, 130, 220, 0.50);
  --race-deep: #2d1640;
}
[data-race="shaman"] {
  --race-accent: #e0b048;
  --race-accent-soft: rgba(224, 176, 72, 0.22);
  --race-glow: rgba(255, 220, 130, 0.55);
  --race-deep: #4a3408;
}
[data-race="all"] {
  --race-accent: #e08a2a;
  --race-accent-soft: rgba(224, 138, 42, 0.20);
  --race-glow: rgba(255, 180, 90, 0.55);
  --race-deep: #5a2808;
}

/* Forge palette tweak ─────────────────────────────────────── */
[data-palette="copper"] {
  --forge: #c46a2a;
  --amber: #e8924a;
  --ember: #8a3a14;
}
[data-palette="amber"] {
  --forge: #d8761f;
  --amber: #f0a23a;
  --ember: #b04b16;
}
[data-palette="rust"] {
  --forge: #a64a1c;
  --amber: #c8682a;
  --ember: #6b1f08;
}

/* Reset / base ───────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--bone-50);
  background: var(--ash-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Static village background ─────────────────────────────── */
.village-bg {
  position: fixed; inset: 0; z-index: 0;
  background: url('assets/bg-village.png') center / cover no-repeat;
  filter: saturate(0.7) brightness(0.5) contrast(1.05);
}
.village-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(11,9,8,0.30) 60%, rgba(11,9,8,0.60) 100%),
    linear-gradient(180deg, rgba(11,9,8,0.30) 0%, rgba(11,9,8,0.55) 100%);
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* ═══════════════════════════════════════════════════════════
   TEXTURES — pure CSS, no images
═══════════════════════════════════════════════════════════ */

/* Stone wall — antracita with subtle grain */
.tex-stone {
  background-color: var(--ash-850);
  background-image:
    radial-gradient(ellipse 1200px 600px at 20% -10%, rgba(176, 75, 22, 0.10), transparent 60%),
    radial-gradient(ellipse 900px 500px at 90% 110%, rgba(216, 118, 31, 0.08), transparent 60%),
    radial-gradient(circle at 15% 30%, rgba(255,255,255,0.015) 0px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.02) 0px, transparent 1.5px),
    radial-gradient(circle at 40% 80%, rgba(0,0,0,0.3) 0px, transparent 3px),
    radial-gradient(circle at 85% 20%, rgba(0,0,0,0.25) 0px, transparent 2.5px),
    repeating-linear-gradient(
      27deg,
      transparent 0px,
      transparent 80px,
      rgba(0,0,0,0.10) 80px,
      rgba(0,0,0,0.10) 81px,
      transparent 81px,
      transparent 160px
    ),
    linear-gradient(160deg, #15110e 0%, #0a0807 100%);
  background-size:
    auto, auto,
    140px 140px, 90px 90px, 200px 200px, 170px 170px,
    auto, auto;
}

/* Wood — vetas marcadas, oscuro y cálido */
.tex-wood {
  background-color: #1a1310;
  background-image:
    repeating-linear-gradient(
      92deg,
      rgba(0,0,0,0.0) 0px,
      rgba(0,0,0,0.35) 1px,
      transparent 2px,
      transparent 8px,
      rgba(60,30,15,0.15) 9px,
      transparent 14px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 60px,
      rgba(0,0,0,0.25) 60px,
      rgba(0,0,0,0.25) 62px
    ),
    radial-gradient(ellipse 60px 20px at 25% 40%, rgba(0,0,0,0.45), transparent 70%),
    radial-gradient(ellipse 40px 14px at 75% 70%, rgba(0,0,0,0.4), transparent 70%),
    linear-gradient(180deg, #2a1a12 0%, #1a100a 100%);
}

/* Forged iron — frame for cards */
.frame-iron {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 30%),
    linear-gradient(180deg, var(--ash-750) 0%, var(--ash-850) 100%);
  border: 1px solid #2a221c;
  border-top-color: #3a2f27;
  border-bottom-color: #100c0a;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 180, 0.04),
    inset 0 -20px 40px rgba(0,0,0,0.5),
    0 2px 0 #060403,
    0 8px 24px rgba(0,0,0,0.6);
}
.frame-iron::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,180,90,0.06), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(0,0,0,0.4), transparent 50%);
}

/* Heat-up hover — metal calentándose */
.heat {
  position: relative;
  transition: box-shadow .35s ease, border-color .35s ease, transform .15s ease, color .25s ease;
}
.heat::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px transparent,
    0 0 0 0 var(--race-glow);
  transition: box-shadow .4s ease;
}
.heat:hover {
  border-color: var(--race-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 180, 0.06),
    inset 0 -20px 40px rgba(0,0,0,0.5),
    0 2px 0 #060403,
    0 0 0 1px var(--race-accent-soft),
    0 0 24px var(--race-glow),
    0 0 60px var(--race-accent-soft);
}
.heat:hover::after {
  box-shadow:
    inset 0 0 12px var(--race-accent-soft),
    0 0 0 1px var(--race-accent);
}

/* Rivets — for iron-frame ornaments */
.rivet {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #6b5a4a, #1a120c 70%);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.05);
}

/* Rune chevrons */
.rune-edge {
  background-image:
    linear-gradient(135deg, transparent 50%, var(--race-accent-soft) 50%),
    linear-gradient(-135deg, transparent 50%, var(--race-accent-soft) 50%);
  background-position: 0 0, 0 100%;
  background-size: 8px 8px;
  background-repeat: repeat-x;
}

/* Ember pulse */
@keyframes emberPulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 220, 180, 0.3),
      inset 0 -8px 20px rgba(0,0,0,0.4),
      0 0 0 1px var(--race-accent),
      0 0 24px var(--race-glow),
      0 0 60px var(--race-accent-soft),
      0 6px 0 var(--race-deep);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 220, 180, 0.5),
      inset 0 -8px 20px rgba(0,0,0,0.4),
      0 0 0 1px var(--amber),
      0 0 48px var(--race-glow),
      0 0 100px var(--race-accent-soft),
      0 6px 0 var(--race-deep);
  }
}

@keyframes flicker {
  0%, 100% { opacity: 0.85; }
  43% { opacity: 1; }
  47% { opacity: 0.78; }
  62% { opacity: 0.95; }
}

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

@keyframes sparkRise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(-180px) translateX(var(--drift, 20px)); opacity: 0; }
}

/* Title fonts ─────────────────────────────────────────────── */
.font-display { font-family: var(--font-display); letter-spacing: 0.02em; }
.font-mono { font-family: var(--font-mono); }
.font-rune { font-family: var(--font-rune); }

[data-titlefont="rune"]      .h-title { font-family: var(--font-rune); letter-spacing: 0.04em; }
[data-titlefont="serif"]     .h-title { font-family: var(--font-display); }
[data-titlefont="black"]     .h-title { font-family: var(--font-blackletter); letter-spacing: 0; }

/* Modal backdrop */
.modal-backdrop {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(20, 12, 8, 0.35) 0%, rgba(0,0,0,0.85) 70%);
  backdrop-filter: blur(2px);
  z-index: 100;
  animation: fadeIn .4s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Selection */
::selection {
  background: var(--race-accent);
  color: var(--ash-900);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--ash-850); }
::-webkit-scrollbar-thumb { background: var(--ash-500); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--race-accent); }

/* Embers floating in background */
.embers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.embers span {
  position: absolute;
  bottom: 0;
  width: 3px; height: 3px;
  background: var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--amber);
  animation: sparkRise linear infinite;
  opacity: 0;
}

/* Underline fancy */
.fancy-underline {
  position: relative;
  display: inline-block;
}
.fancy-underline::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -6px;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--race-accent), transparent);
}

/* News card hover stripe */
.news-card {
  position: relative;
  overflow: hidden;
}
.news-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, transparent, var(--race-accent), transparent);
  opacity: 0;
  transition: opacity .35s ease;
}
.news-card:hover::before { opacity: 1; }

/* Iron divider */
.iron-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #3a2f27 20%, #3a2f27 80%, transparent);
  margin: 8px 0;
}

/* Race glyph circle */
.race-disc {
  position: relative;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,200,140,0.12), transparent 50%),
    radial-gradient(circle at 50% 50%, var(--ash-750), var(--ash-900));
  border: 1px solid #2a221c;
  box-shadow: inset 0 -8px 18px rgba(0,0,0,0.6), inset 0 2px 0 rgba(255,180,90,0.08);
  overflow: hidden;
}

/* Big download button */
.btn-download {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background:
    linear-gradient(180deg, rgba(255,220,180,0.12), transparent 40%),
    linear-gradient(180deg, var(--race-accent), var(--race-deep));
  color: var(--parchment);
  text-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 0 18px var(--race-glow);
  border: 1px solid #1a0e08;
  border-top-color: rgba(255,220,180,0.35);
  animation: emberPulse 2.6s ease-in-out infinite;
  transition: transform .15s ease;
  cursor: pointer;
}
.btn-download:hover { transform: translateY(-1px) scale(1.01); }
.btn-download:active { transform: translateY(2px) scale(0.99); }

/* Forge mark — small ornamental SVG container */
.forge-mark { color: var(--race-accent); filter: drop-shadow(0 0 10px var(--race-glow)); }

/* Hero title */
.hero-title {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 0.92;
  background: linear-gradient(180deg, #f3e7cf 0%, #c9a368 55%, #6b3a14 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.6)) drop-shadow(0 0 30px var(--race-glow));
}

[data-titlefont="black"] .hero-title { letter-spacing: 0; }

/* Live dot */
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #5fbf3f;
  box-shadow: 0 0 8px #5fbf3f, 0 0 0 2px rgba(95,191,63,0.2);
  animation: flicker 2s infinite;
}

/* Hammered metal label */
.metal-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stone-200);
}

/* Parchment textarea-like */
.parchment {
  background:
    radial-gradient(ellipse at center, #3a2f24 0%, #1f1812 100%);
  color: var(--bone-100);
  border: 1px solid #2a221c;
}

/* Top-5 row */
.rank-row {
  display: grid;
  grid-template-columns: 28px 22px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(58,47,39,0.5);
  transition: background .25s ease;
}
.rank-row:hover {
  background: linear-gradient(90deg, var(--race-accent-soft), transparent);
}
.rank-row:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════
   MARKDOWN renderer styles (news + guide detail body)
   ═══════════════════════════════════════════════════════════ */
.md { font-family: var(--font-body); color: var(--bone-100); line-height: 1.7; font-size: 15px; }
.md .md-h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.02em;
  font-size: 24px; color: var(--bone-50); margin: 28px 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid #2a221c;
}
.md .md-h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.02em;
  font-size: 18px; color: var(--race-accent); margin: 22px 0 10px;
}
.md .md-h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em;
  font-size: 14px; text-transform: uppercase; color: var(--bone-50); margin: 18px 0 8px;
}
.md .md-p { margin: 0 0 16px; text-wrap: pretty; }
.md .md-list { margin: 0 0 16px; padding-left: 22px; }
.md .md-list li { margin-bottom: 6px; }
.md .md-list li::marker { color: var(--race-accent); }
.md .md-quote {
  margin: 16px 0; padding: 14px 18px;
  background: rgba(11,9,8,0.5); border-left: 3px solid var(--race-accent);
  border-radius: 0 3px 3px 0;
  font-style: italic; color: var(--bone-100);
}
.md .md-pre {
  margin: 16px 0; padding: 16px 18px;
  background: #0a0807; border: 1px solid #2a221c; border-radius: 3px;
  overflow-x: auto;
  font-family: var(--font-mono); font-size: 12px; color: var(--bone-50);
}
.md .md-pre code { background: none; padding: 0; }
.md .md-code {
  padding: 2px 6px; border-radius: 2px;
  background: rgba(216,118,31,0.12); color: var(--race-accent);
  font-family: var(--font-mono); font-size: 0.88em;
}
.md .md-link { color: var(--race-accent); border-bottom: 1px dotted var(--race-accent); }
.md .md-link:hover { color: var(--amber); border-bottom-color: var(--amber); }
.md .md-img {
  display: block; max-width: 100%; height: auto;
  margin: 20px 0; border-radius: 3px;
  border: 1px solid #2a221c;
}
.md strong { color: var(--bone-50); }
.md em { color: var(--bone-100); }

/* ─── Skeleton loaders ─── */
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Tab focus visible */
button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid var(--race-accent);
  outline-offset: 2px;
}

/* Mobile tweaks for new pages */
@media (max-width: 760px) {
  .account-grid { grid-template-columns: 1fr !important; }
  .search-bar { grid-template-columns: 1fr !important; gap: 8px !important; }
  .cookie-banner { left: 12px !important; right: 12px !important; bottom: 12px !important; max-width: none !important; }
  .orders-head, .orders-row {
    grid-template-columns: 1fr auto !important;
    gap: 4px !important;
  }
  .orders-head > *:nth-child(n+3),
  .orders-row > *:nth-child(n+3) { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — móvil & tablet
   ═══════════════════════════════════════════════════════════ */

/* Tablet & small desktop ── ≤ 1100px */
@media (max-width: 1100px) {
  .columns-layout {
    grid-template-columns: 1fr !important;
  }
  .columns-layout > aside,
  .columns-layout .rank-stack {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
  }
  .columns-layout .rank-stack {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .vote-rewards-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    text-align: center;
  }

  .vote-rewards-sites {
    justify-content: center !important;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* Mobile portrait ── ≤ 760px */
@media (max-width: 760px) {
  /* Header */
  .site-header > div {
    grid-template-columns: auto auto !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    grid-template-areas: "logo right" "nav nav" !important;
  }
  .site-header .header-logo  { grid-area: logo; }
  .site-header .header-right { grid-area: right; justify-content: flex-end; }
  .site-header .header-nav   {
    grid-area: nav;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
  }
  .site-header .header-nav::-webkit-scrollbar { display: none; }
  .site-header .header-nav button {
    padding: 6px 12px !important;
    font-size: 11px !important;
    flex-shrink: 0;
  }
  .site-header .server-clock { display: none; }
  .site-header .header-discord-text { display: none; }

  /* Hero */
  .hero-title { letter-spacing: 0.03em !important; }
  .hero-counters {
    min-width: 0 !important;
    width: 100%;
    grid-template-columns: 1fr 1px 1fr !important;
  }
  .hero-counters > div {
    padding: 10px 8px !important;
    gap: 6px !important;
  }
  .hero-counters span[data-counter] {
    font-size: 20px !important;
  }
  .hero-counters .metal-label {
    font-size: 8px !important;
  }
  .hero-meta-row {
    flex-direction: column !important;
    gap: 4px !important;
  }
  .hero-meta-row .meta-sep { display: none; }

  /* Download button (any variant) */
  .btn-download {
    padding: 16px 24px !important;
    font-size: 14px !important;
    min-width: 0 !important;
    width: 100%;
    letter-spacing: 0.08em !important;
  }

  /* Banner */
  .banner-wrap > div {
    aspect-ratio: auto !important;
    min-height: 320px;
  }
  .banner-grid {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
    gap: 14px !important;
    text-align: center;
  }
  .banner-grid > div:first-child > * {
    align-self: center !important;
  }
  .banner-grid .banner-phone {
    max-width: 180px !important;
    margin: 0 auto;
  }

  /* Columns layout */
  .columns-layout {
    padding: 20px 16px !important;
    gap: 16px !important;
  }
  .columns-layout .rank-stack {
    grid-template-columns: 1fr !important;
  }

  /* Page shell */
  .page-shell {
    padding: 20px 16px 40px !important;
  }
  .page-shell h1 {
    font-size: clamp(28px, 8vw, 40px) !important;
  }

  /* Forms */
  .reg-form-row {
    grid-template-columns: 1fr !important;
  }

  /* Shop */
  .shop-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .shop-cart-summary {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    text-align: center;
  }
  .shop-cart-summary > button {
    width: 100%;
  }
  .payment-grid {
    grid-template-columns: 1fr !important;
  }

  /* Ranking */
  .rank-col-md-hide { display: none !important; }

  /* Mobile cross-play page */
  .mobile-top-grid {
    grid-template-columns: 1fr !important;
  }
  .mobile-steps-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .mobile-gallery-grid {
    grid-template-columns: 1fr !important;
  }

  /* Vote rewards */
  .vote-rewards-grid { padding: 14px !important; }

  /* News cards */
  .news-card {
    grid-template-columns: 56px 1fr !important;
  }
  .news-card span[data-arrow] { display: none; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  .footer-grid > div:first-child {
    grid-column: auto;
  }
  .footer-grid > div:first-child > div:first-child {
    justify-content: center;
  }
  .footer-grid > div:first-child > div:last-child {
    justify-content: center;
  }

  /* Modal */
  .race-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .race-modal-title {
    font-size: clamp(28px, 8vw, 44px) !important;
  }

  /* Tweaks panel scroll on tiny screens */
  .twk-panel { max-width: 90vw !important; }
}

/* Mobile small ── ≤ 480px */
@media (max-width: 480px) {
  .shop-grid {
    grid-template-columns: 1fr !important;
  }
  .mobile-steps-grid {
    grid-template-columns: 1fr !important;
  }
  .rank-col-sm-hide { display: none !important; }
  .rank-table .rank-header-row,
  .rank-table .rank-data-row {
    padding: 10px 12px !important;
    gap: 6px !important;
  }
}