/* ============================================================================
   Gusanito del Bosque — visual system ported from the "snakequest / Mythic
   Snake" design (The Enchanted Glade): warm birch glass over deep forest,
   pale-gold glow + berry-pink + mystic-purple accents, Satoshi + JetBrains
   Mono. Applied onto OUR existing class names so no HTML/JS changes are needed.
   Shared by the game overlays (index.html) and the admin panel (admin/).
   ============================================================================ */
:root {
  /* native widgets (select dropdowns, scrollbars, autofill) render DARK —
     without this Chrome paints the open <select> list white and the light
     option text becomes unreadable */
  color-scheme: dark;
  /* forest */
  --forest-900: #0a120a; --forest-800: #0f1a0f; --forest-700: #1a2a1a; --forest-600: #253a25;
  --forest-500: #3a553a; --forest-400: #5a7a5a; --forest-300: #7a9a6a; --forest-200: #a0ba90;
  /* birch (warm cream text/surfaces) */
  --birch-50: #f5f0e8; --birch-100: #ece3d5; --birch-200: #e8ddd0; --birch-300: #d4c5a9; --birch-400: #b8a890;
  /* glow (pale gold) */
  --glow-200: #faf0c0; --glow-300: #f5e8a0; --glow-400: #edd880; --glow-500: #dcc860;
  /* berry (pink) + mystic (purple) */
  --berry-200: #f5c0e0; --berry-300: #e8a0c8; --berry-400: #d080a8;
  --mystic-200: #d0c0f0; --mystic-300: #b8a0e8; --mystic-400: #9880d0;
  /* glass */
  /* DARK frosted glass so bright text reads with strong contrast */
  --glass: rgba(16, 28, 20, 0.52);
  --glass-light: rgba(24, 40, 28, 0.60);
  --glass-hover: rgba(38, 58, 42, 0.70);
  --glass-bd: rgba(150, 214, 162, 0.30);
  --glass-bd-hover: rgba(180, 238, 190, 0.55);
  --glass-shadow: rgba(0, 0, 0, 0.5);

  --ink: #f1f6ec;          /* bright cream text */
  --muted: #b4cea6;        /* light sage — readable labels */
  --faint: #88a679;

  --r: 22px; --r-sm: 14px; --r-pill: 999px;
  --t: .3s cubic-bezier(.4, 0, .2, 1);
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --glass-blur: blur(24px) saturate(1.3);

  --font-head: "Satoshi", "Inter", system-ui, sans-serif;
  --font-body: "Satoshi", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
}

@keyframes twinkle { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
@keyframes drift { from { transform: translateY(8px) } to { transform: translateY(-16px) } }
@keyframes ov-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes card-pop { from { transform: translateY(12px) scale(.97); opacity: 0 } to { transform: none; opacity: 1 } }

/* ---------- overlay scrim (translucent so the blurred forest shows through) ---------- */
.ov-scrim {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box;
  background:
    radial-gradient(60% 45% at 50% 6%, rgba(245, 232, 160, .10), transparent 70%),
    radial-gradient(55% 45% at 84% 94%, rgba(232, 160, 200, .08), transparent 70%),
    rgba(8, 15, 8, .58);
  backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1);
  animation: ov-in .3s ease;
}
/* fireflies: warm gold / berry / mystic motes twinkling behind the glass */
.ov-scrim::before, .ov-scrim::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ov-scrim::before {
  background-image:
    radial-gradient(circle 2px at 15% 72%, rgba(245, 232, 160, .95), transparent 60%),
    radial-gradient(circle 1.6px at 78% 40%, rgba(232, 160, 200, .85), transparent 60%),
    radial-gradient(circle 2px at 45% 88%, rgba(245, 232, 160, .8), transparent 60%),
    radial-gradient(circle 1.4px at 90% 80%, rgba(184, 160, 232, .8), transparent 60%),
    radial-gradient(circle 1.6px at 30% 26%, rgba(245, 232, 160, .7), transparent 60%);
  animation: twinkle 5.5s ease-in-out infinite, drift 22s linear infinite;
}
.ov-scrim::after {
  background-image:
    radial-gradient(circle 1.5px at 62% 66%, rgba(245, 232, 160, .85), transparent 60%),
    radial-gradient(circle 2px at 24% 52%, rgba(184, 160, 232, .7), transparent 60%),
    radial-gradient(circle 1.4px at 84% 20%, rgba(232, 160, 200, .8), transparent 60%),
    radial-gradient(circle 1.8px at 8% 40%, rgba(245, 232, 160, .7), transparent 60%);
  animation: twinkle 7s ease-in-out infinite 1.2s, drift 30s linear infinite reverse;
}

/* ---------- glass panel ---------- */
.clay-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 432px; max-height: 92vh; overflow-y: auto;
  box-sizing: border-box; padding: 26px 22px;
  background: var(--glass-light);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 245, 235, .3); border-radius: var(--r);
  box-shadow: 0 8px 40px var(--glass-shadow), 0 0 40px rgba(245, 232, 160, .06),
    inset 0 1px 0 rgba(255, 255, 255, .22);
  color: var(--ink);
  animation: card-pop .34s var(--bounce);
}
.clay-card::-webkit-scrollbar { width: 8px }
.clay-card::-webkit-scrollbar-thumb { background: var(--forest-500); border-radius: 999px }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .clay-card { background: #1c2a1c } .ov-scrim { background: rgba(8, 15, 8, .9) }
}

/* ---------- phones/tablets: no backdrop blur ----------
   backdrop-filter is the single most expensive effect on mobile GPUs: the
   full-screen scrim + card re-blur the animating forest/fireflies EVERY frame
   (jank, heat, battery). Swap for more opaque flat surfaces — same mood,
   a fraction of the GPU cost. Desktop (fine pointer) keeps the real glass. */
@media (hover: none) and (pointer: coarse) {
  .ov-scrim {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background:
      radial-gradient(60% 45% at 50% 6%, rgba(245, 232, 160, .10), transparent 70%),
      radial-gradient(55% 45% at 84% 94%, rgba(232, 160, 200, .08), transparent 70%),
      rgba(8, 15, 8, .78);
  }
  .clay-card {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(22, 36, 26, .94);
  }
}

/* ---------- typography (Satoshi display + JetBrains Mono labels) ---------- */
.clay-card h1, .clay-card h2, .titlebig, .big {
  font-family: var(--font-head); font-weight: 700; color: var(--birch-50); margin: 0; letter-spacing: -.01em;
}
.clay-card h1 { font-size: clamp(27px, 6.5vw, 36px); text-align: center; margin: 2px 0 4px }
.clay-card h2 { font-size: 22px; text-align: center; margin: 2px 0 12px }
.titlebig, .big { font-size: clamp(32px, 8vw, 48px); text-align: center; margin: 6px 0 }
.linkrow { text-align: center; margin-top: 14px }
.sub { text-align: center; color: var(--birch-300); margin: 0 0 18px; font-size: 14.5px; line-height: 1.55 }
.mid { text-align: center; font-size: 18px; color: var(--birch-200); margin: 6px 0 }

/* ---------- buttons: warm glass, colour comes from border + hover glow ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  font-family: var(--font-head); font-weight: 700; font-size: 16px;
  display: block; width: 100%; box-sizing: border-box; margin: 10px 0; padding: 14px 16px;
  border: 1px solid var(--glass-bd); border-radius: var(--r-sm); cursor: pointer;
  /* no backdrop-filter: the button sits on the already-glassy card, so blurring
     its backdrop is invisible — it only burned GPU (one layer per button) */
  background: var(--glass);
  color: var(--birch-100); box-shadow: 0 8px 32px var(--glass-shadow);
  transition: all var(--t); min-height: 50px;
}
.btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .12) 0%, transparent 50%, rgba(255, 255, 255, .05) 100%) }
.btn:hover { background: var(--glass-hover); border-color: var(--glass-bd-hover); transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4), 0 0 20px rgba(245, 232, 160, .1) }
.btn:active { transform: translateY(0) scale(.98) }
.btn:focus-visible { outline: none; border-color: rgba(245, 232, 160, .6);
  box-shadow: 0 0 0 3px rgba(245, 232, 160, .3), 0 8px 32px var(--glass-shadow) }
.btn:disabled { opacity: .4; cursor: default; transform: none; box-shadow: 0 8px 32px var(--glass-shadow) }
/* primary = enchanted-green glow (the "Play Now" CTA) */
.btn.primary { border-color: rgba(160, 232, 150, .45); color: var(--birch-50) }
.btn.primary:hover { border-color: rgba(160, 232, 150, .7);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4), 0 0 30px rgba(120, 224, 148, .28) }
/* green alias */
.btn.green { border-color: rgba(160, 232, 150, .4) }
.btn.green:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, .4), 0 0 30px rgba(120, 224, 148, .22) }
/* ghost = plain frosted glass */
.btn.ghost { background: rgba(255, 245, 235, .06); font-weight: 600 }
/* danger = soft berry-red glass */
.btn.danger { border-color: rgba(232, 130, 130, .4) }
.btn.danger:hover { border-color: rgba(232, 130, 130, .7);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4), 0 0 30px rgba(224, 110, 100, .25) }
/* warn = pale-gold glow */
.btn.warn { border-color: rgba(245, 232, 160, .45) }
.btn.warn:hover { border-color: rgba(245, 232, 160, .7);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4), 0 0 30px rgba(245, 232, 160, .28) }
.btn.sm { display: inline-block; width: auto; margin: 3px; padding: 8px 13px; font-size: 13.5px;
  min-height: 0; border-radius: 11px; box-shadow: 0 4px 16px var(--glass-shadow) }
a.btn { text-decoration: none; text-align: center }
.btn.sm:hover { transform: translateY(-1px) }

/* ---------- fields (glass-input, gold focus) ---------- */
.field { margin: 13px 0 }
.field label, label { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); margin-bottom: 6px; font-weight: 500 }
.field input, input, select {
  width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 16px;
  font-family: var(--font-body); color: var(--birch-100);
  background: rgba(255, 245, 235, .06);
  border: 1px solid rgba(255, 245, 235, .15); border-radius: 10px;
  transition: all .2s; outline: none;
}
.field input::placeholder, input::placeholder { color: var(--faint) }
/* the open dropdown list itself (belt and suspenders on top of color-scheme) */
select option { background-color: #16241a; color: var(--birch-100) }
.field input:focus, input:focus, select:focus {
  border-color: rgba(245, 232, 160, .5); box-shadow: 0 0 16px rgba(245, 232, 160, .1);
}
.field .hint { font-size: 12px; color: var(--faint); margin-top: 4px; font-family: var(--font-mono) }

/* ---------- bits ---------- */
.msg { min-height: 18px; text-align: center; font-size: 14px; margin: 10px 0; color: var(--berry-300);
  font-family: var(--font-body); font-weight: 600 }
.msg.info, .msg.ok { color: var(--glow-300) }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.row.between { justify-content: space-between }
.grow { flex: 1 }
.pill { background: var(--glass);
  border: 1px solid var(--glass-bd); border-radius: var(--r-pill); padding: 7px 15px; font-weight: 700; font-size: 14px }
.count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700;
  color: var(--glow-300); font-size: 20px; letter-spacing: -.02em }
.cd-box { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 10px 0 16px; padding: 16px 14px;
  background: radial-gradient(circle at 50% 0, rgba(245, 232, 160, .24), transparent 72%), var(--glass);
  border: 1.5px solid rgba(245, 232, 160, .5); border-radius: var(--r-sm); box-shadow: 0 0 26px rgba(245, 232, 160, .16) }
.cd-label { font-family: var(--font-mono); font-size: 14.5px; font-weight: 800; letter-spacing: .02em;
  color: #f5e8a0; text-align: center; text-shadow: 0 0 12px rgba(245, 232, 160, .3) }
.cd-box .count { font-size: 42px; text-shadow: 0 0 24px rgba(245, 232, 160, .4) }
.link { background: none; border: 0; color: var(--glow-300); cursor: pointer; font-size: 14px;
  font-family: var(--font-body); font-weight: 600; text-decoration: underline; text-underline-offset: 3px }
.link:hover { color: var(--glow-200) }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px }
.topbar .who { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted) }

/* ---------- leaderboard (glass rows, mono headers) ---------- */
.lb { width: 100%; border-collapse: separate; border-spacing: 0 4px; margin: 12px 0; font-size: 14.5px }
.lb th { font-family: var(--font-mono); color: var(--muted); text-align: left; padding: 6px 10px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 500 }
/* no per-cell backdrop-filter: 20 rows × 4 cols = 80 blur layers that melted
   phone GPUs; over the card the blur was invisible anyway */
.lb td { padding: 11px 10px; background: var(--glass);
  font-variant-numeric: tabular-nums }
.lb td.r { width: 40px; font-family: var(--font-mono); color: var(--glow-300); font-weight: 700 }
.lb td.t { text-align: right; font-family: var(--font-mono); font-weight: 700 }
.lb tr td:first-child { border-radius: 10px 0 0 10px }
.lb tr td:last-child { border-radius: 0 10px 10px 0 }
.lb tr.me td { background: rgba(245, 232, 160, .14); color: var(--birch-50); font-weight: 700 }
.lb tr.me td.r { color: var(--glow-200) }
/* separador antes de la fila "tú" cuando el jugador queda fuera del top mostrado */
.lb tr.lb-gap td { background: transparent; text-align: center; color: var(--muted);
  padding: 1px 0 3px; font-family: var(--font-mono); letter-spacing: 4px; font-size: 15px }
.you-tag { display: inline-block; margin-left: 6px; font-family: var(--font-mono); font-size: 10px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #1c2a1c;
  background: var(--glow-300); border-radius: 999px; padding: 1px 7px; vertical-align: middle }
.you-note { text-align: center; margin: 10px 0 2px }

/* ---------- ranking v2: filas tipo tarjeta (puesto en círculo, avatar, premio, tiempo grande) ---------- */
.lb2 { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px }
.lb2-row { display: flex; align-items: center; gap: 11px; padding: 10px 13px;
  background: var(--glass); border: 1px solid var(--glass-bd); border-radius: 16px }
.lb2-rank { flex: none; width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 800; font-size: 13.5px;
  background: rgba(255, 255, 255, .06); color: var(--muted) }
.lb2-row.rank-1 .lb2-rank { background: linear-gradient(145deg, #ffdf6b, #e8a600); color: #3a2a00;
  box-shadow: 0 0 16px rgba(255, 200, 60, .5) }
.lb2-row.rank-2 .lb2-rank { background: linear-gradient(145deg, #eef2f5, #a8b4bc); color: #2a3238 }
.lb2-row.rank-3 .lb2-rank { background: linear-gradient(145deg, #e2a970, #b06a2c); color: #3a1e00 }
.lb2-av { position: relative; flex: none; width: 40px; height: 40px; border-radius: 999px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--glass-bd) }
.lb2-av .lb2-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.lb2-av .lb2-ph { font-size: 19px; opacity: .65 }
/* columna derecha: nombre (línea 1) + premio/tiempo (línea 2) */
.lb2-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px }
.lb2-name { font-weight: 600; color: var(--birch-50); font-size: 15.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lb2-bot { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.lb2-prize { font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: #9ef07a; background: rgba(120, 224, 120, .12); border: 1px solid rgba(120, 224, 120, .25);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap }
.lb2-score { font-family: var(--font-mono); font-weight: 800; font-size: 21px; color: #9ef07a;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 16px rgba(120, 224, 120, .35); white-space: nowrap }
.lb2-row.me { background: rgba(245, 232, 160, .14); border-color: rgba(245, 232, 160, .42) }
.lb2-row.me .lb2-score { color: var(--glow-200); text-shadow: 0 0 16px rgba(245, 232, 160, .4) }
.lb2-gap { text-align: center; color: var(--muted); letter-spacing: 4px;
  font-family: var(--font-mono); font-size: 15px; padding: 1px 0 3px }
/* "Ver más" en Últimas competencias: desplegable con el top 20 */
.rc-more { display: block; margin: 8px auto 0; font-size: 13px }
.rc-full { display: none }
.rc-full.open { display: block; margin-top: 8px }
.rc-lb { gap: 6px }
.rc-lb .lb2-row { background: rgba(255, 255, 255, .045); padding: 7px 10px; border-radius: 12px }
.rc-lb .lb2-score { font-size: 17px }
@media (max-width: 360px) {
  .lb2-name { font-size: 14.5px } .lb2-score { font-size: 19px }
  .lb2-prize { font-size: 11px; padding: 3px 7px }
}

/* ---------- foto de perfil en la bienvenida ---------- */
.me-avwrap { position: relative; width: 76px; height: 76px; margin: 2px auto 4px }
.me-av { width: 76px; height: 76px; border-radius: 999px; overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .06); border: 2px solid var(--glass-bd) }
.me-av .lb2-ph { font-size: 34px; opacity: .6 }
.me-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.me-av-cam { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 999px;
  border: 2px solid var(--forest-800); background: var(--glow-400); color: #2a2000; font-size: 13px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0 }
.me-av-cam:hover { background: var(--glow-300) }
.av-rm { display: block; margin: 0 auto 2px; font-size: 12px; color: var(--berry-300) }

/* ---------- programa de referidos ---------- */
.rf-wrap { margin-top: 2px }
.rf-title { text-align: center; margin: 4px 0 4px }
.rf-sub { text-align: center; color: var(--muted); font-size: 13px; margin: 0 auto 16px; max-width: 36ch; line-height: 1.4 }
.rf-lbl { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 6px }
.rf-linkrow { display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px }
.rf-linkrow input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 13px; color: var(--birch-50);
  background: var(--glass); border: 1px solid var(--glass-bd); border-radius: 12px; padding: 12px 14px }
.rf-linkrow .btn.sm { flex: none; width: 52px; margin: 0; font-size: 18px }
.rf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 }
.rf-stat { text-align: center; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: 14px; padding: 14px 8px }
.rf-stat.ok { border-color: rgba(158, 240, 122, .4); background: rgba(158, 240, 122, .08) }
.rf-s-l { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px }
.rf-s-v { display: block; font-family: var(--font-mono); font-weight: 700; font-size: 30px; color: var(--birch-50); font-variant-numeric: tabular-nums }
.rf-stat.ok .rf-s-v { color: #9ef07a }
.rf-claim { background: linear-gradient(135deg, #f0d878, #dcaf46); color: #1c2a1c; border-color: rgba(245, 232, 160, .6); font-weight: 700 }
.rf-my { border: 1px solid var(--glass-bd); border-radius: 14px; padding: 12px 14px; margin: 4px 0 14px }
.rf-my-h { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--birch-50); margin-bottom: 8px }
.rf-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid rgba(255, 245, 235, .08) }
.rf-item:first-of-type { border-top: 0 }
.rf-nm { font-size: 14px; color: var(--birch-100); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rf-tag { flex: none; font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-bd); color: var(--muted) }
.rf-tag.ok { background: rgba(245, 232, 160, .16); border-color: rgba(245, 232, 160, .5); color: var(--glow-200) }
.rf-tag.done { background: rgba(158, 240, 122, .14); border-color: rgba(158, 240, 122, .45); color: #9ef07a }
.rf-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 8px 0 2px }
.rf-how { background: rgba(245, 232, 160, .07); border: 1px solid rgba(245, 232, 160, .22); border-radius: 14px; padding: 12px 14px }
.rf-how-h { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--birch-50); margin: 0 0 6px }
.rf-how-s { font-size: 13px; color: var(--birch-100); margin: 4px 0; line-height: 1.4 }
.rf-how-s b { color: var(--glow-300); margin-right: 4px }

/* ---------- player panel (signed-in home) ---------- */
.panel { display: flex; flex-direction: column }
.greet-hi { text-align: center; margin: 2px 0 0; font-family: var(--font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: .14em; color: var(--muted) }
.greet { text-align: center; margin: 2px 0 14px; font-size: 30px }
.stats { display: flex; gap: 12px; margin: 0 0 18px }
.stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px;
  background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-sm) }
.stat-l { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted) }
.stat-v { font-family: var(--font-mono); font-weight: 700; font-size: 26px; font-variant-numeric: tabular-nums }
.stat-v.tk { color: var(--glow-300) }
.stat-v.bal { color: #9ef07a; text-shadow: 0 0 18px rgba(120, 224, 120, .45) }
.btn.jugar { font-size: 22px; letter-spacing: .04em; padding: 20px 16px; margin: 2px 0 12px;
  border-color: rgba(160, 232, 150, .55); color: var(--birch-50);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .4), 0 0 26px rgba(120, 224, 148, .28) }
.btn.jugar:hover { border-color: rgba(160, 232, 150, .8); box-shadow: 0 12px 40px rgba(0, 0, 0, .45), 0 0 40px rgba(120, 224, 148, .4) }
.navrow { display: flex; gap: 10px; margin-bottom: 6px }
.navrow .btn { margin: 6px 0 }
.link.mt { display: block; margin: 12px auto 2px; text-decoration: none; color: var(--muted); font-weight: 600 }
.link.out { display: block; margin: 14px auto 0; text-align: center; color: var(--berry-300) }

/* ---------- buy tickets card ---------- */
.buycard { margin-top: 16px; padding: 16px; background: var(--glass); border: 1px solid var(--glass-bd);
  border-radius: var(--r-sm) }
.buycard h3 { text-align: center; margin: 0 0 2px; font-size: 20px; color: var(--birch-50) }
.buysub { text-align: center; margin: 0 0 14px; font-size: 13px; color: var(--muted); font-family: var(--font-mono) }
.qty { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 6px 0 14px }
.qbtn { width: 54px; height: 54px; border-radius: 16px; font-size: 26px; font-weight: 700; cursor: pointer;
  color: var(--birch-50); background: rgba(255, 245, 235, .06); border: 1px solid var(--glass-bd) }
.qbtn:hover { background: var(--glass-hover); border-color: var(--glass-bd-hover) }
.qbtn:active { transform: scale(.94) }
.qnum { min-width: 56px; text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: 34px;
  font-variant-numeric: tabular-nums; color: var(--glow-300) }
/* paquetes de tickets: se elige uno, ya no se escribe la cantidad. Precio a la
   izquierda (crema, como el dinero de la tarjeta) y tickets a la derecha en oro
   pálido, que es el color de los tickets en todo el juego. */
.packs { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px }
.pack { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 58px; box-sizing: border-box;
  padding: 13px 18px; border-radius: var(--r-sm); cursor: pointer; text-align: left;
  background: var(--glass); border: 1px solid var(--glass-bd);
  transition: border-color var(--t), background var(--t), transform .12s ease }
.pack:hover { background: var(--glass-hover); border-color: var(--glass-bd-hover) }
.pack:active { transform: scale(.99) }
.pack:disabled { opacity: .5; cursor: default }
/* marca tipo radio: TODAS las filas la llevan (vacía), así al elegir no se mueve
   nada de sitio — solo se enciende. Es lo que dice de un vistazo cuál está puesto. */
.pack::before { content: ""; flex: none; width: 19px; height: 19px; border-radius: 50%;
  box-sizing: border-box; border: 2px solid rgba(150, 214, 162, .45);
  transition: border-color var(--t), background var(--t), box-shadow var(--t) }
.pack .pk-tk { font-family: var(--font-mono); font-weight: 700; font-size: 19px; color: var(--glow-300);
  white-space: nowrap; margin-right: auto }   /* el margen auto empuja el precio a la derecha */
.pack .pk-usd { font-family: var(--font-mono); font-weight: 700; font-size: 21px; color: var(--birch-50);
  font-variant-numeric: tabular-nums; line-height: 1.15 }
/* elegido: aro verde, fondo más vivo y la marca encendida */
.pack.on { border-color: rgba(160, 232, 150, .85);
  background: linear-gradient(180deg, rgba(120, 224, 148, .20), rgba(120, 224, 148, .06)), var(--glass);
  box-shadow: 0 0 0 2px rgba(160, 232, 150, .40), 0 8px 24px rgba(40, 150, 90, .25) }
.pack.on::before { border-color: #9ef07a; background: #9ef07a;
  box-shadow: inset 0 0 0 3px rgba(16, 28, 20, .9), 0 0 10px rgba(158, 240, 122, .55) }
.pack.on .pk-usd { color: #fff }
.pack.on .pk-tk { color: var(--glow-200) }
@media (max-width: 360px) {
  .pack { padding: 12px 14px }
  .pack .pk-usd { font-size: 19px } .pack .pk-tk { font-size: 17px }
}

.qtotals { display: flex; justify-content: space-around; margin: 0 0 14px; text-align: center }
.qt-l { display: block; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); margin-bottom: 3px }
.qt-v { font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--birch-50) }

/* ---------- Pago Móvil request ---------- */
.paybox { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 6px 0 14px; padding: 16px;
  border-radius: var(--r-sm); border: 1px solid rgba(160, 232, 150, .4);
  background: radial-gradient(circle at 50% 0, rgba(120, 224, 148, .16), transparent 72%), var(--glass) }
.paybox .pb-l { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted) }
.paybox .pb-v { font-family: var(--font-mono); font-weight: 700; font-size: 30px; color: #9ef07a;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(120, 224, 120, .4) }
.paydest { margin: 0 0 6px; padding: 14px 16px; border: 1px solid var(--glass-bd); border-radius: var(--r-sm); background: var(--glass) }
.paydest p { margin: 3px 0; font-size: 15px; color: var(--birch-100) }
.paydest .pd-h { margin: 0 0 8px; color: var(--muted); font-size: 13.5px }
.paydest .muted { color: var(--muted) }
input[type=file] { color: var(--muted); font-family: var(--font-body); font-size: 13px }
input[type=file]::file-selector-button { margin-right: 12px; padding: 9px 14px; cursor: pointer;
  color: var(--birch-50); background: rgba(255, 245, 235, .08); border: 1px solid var(--glass-bd);
  border-radius: var(--r-pill); font-family: var(--font-body); font-weight: 700; font-size: 13px }
input[type=file]::file-selector-button:hover { background: var(--glass-hover) }

/* ---------- wallet ---------- */
.bal-l { text-align: center; margin: 6px 0 0; font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .14em; color: var(--muted) }
.bal-big { text-align: center; margin: 2px 0 6px; font-family: var(--font-mono); font-weight: 700; font-size: 52px;
  color: #9ef07a; text-shadow: 0 0 26px rgba(120, 224, 120, .5); font-variant-numeric: tabular-nums }
/* ---------- result: your placement + top 3 ---------- */
.standing { margin: 12px 0 }
.rank-you { text-align: center; margin: 8px 0 2px; font-family: var(--font-mono); font-weight: 700; font-size: 22px; color: var(--birch-50) }
/* aviso de empate perdido: alguien hizo tus mismos puntos pero llegó primero */
.tie-note { text-align: center; margin: 2px auto 6px; max-width: 300px; font-size: 13px; line-height: 1.45; color: #f2dc9a }
.rank-prize { text-align: center; margin: 0 0 6px; font-weight: 800; font-size: 20px; color: #9ef07a; text-shadow: 0 0 18px rgba(120, 224, 120, .45) }
.top3 { margin: 12px auto 0; max-width: 320px; padding: 12px 14px; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-sm) }
.top3-h { margin: 0 0 6px; text-align: center; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted) }
.top3-row { display: flex; align-items: center; gap: 10px; padding: 5px 2px }
.top3-row .t3-m { width: 26px; text-align: center; font-size: 17px }
.top3-row .t3-u { flex: 1; font-size: 14px; color: var(--birch-100); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.top3-row .t3-t { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--birch-50) }
/* prize tag on the top-3 rows of the ranking */
.lb td.r .rprize { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: #9ef07a; margin-top: 1px }

.wcard { margin: 14px 0 0; padding: 16px; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-sm) }
.wcard h3 { text-align: center; margin: 0 0 10px; font-size: 18px; color: var(--birch-50) }
.wcard .field { margin: 10px 0 }
.wcard .btn { margin-top: 12px }
.act-amt.pos { color: #9ef07a }
.act-amt.neg { color: var(--berry-300) }
.acts-h { margin: 18px 0 8px; font-size: 15px; color: var(--birch-100) }
.act { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 13px;
  margin: 6px 0; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: 12px }
.act b { font-size: 14.5px; color: var(--birch-50) }
.act-d { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 2px }
.act-r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px }
.act-amt { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--birch-100) }
.badge { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid transparent }
.badge.pending { color: var(--glow-300); border-color: rgba(245, 232, 160, .4); background: rgba(245, 232, 160, .1) }
.badge.approved { color: #9ef07a; border-color: rgba(160, 232, 150, .4); background: rgba(120, 224, 148, .12) }
.badge.rejected { color: var(--berry-300); border-color: rgba(232, 130, 130, .4); background: rgba(224, 110, 100, .1) }

/* ---------- audio controls (start menu) ---------- */
.audio { margin-top: 18px; padding: 14px; border: 1px solid var(--glass-bd); border-radius: var(--r-sm);
  background: var(--glass) }
.audio .lbl { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted) }
.chip { font-family: var(--font-body); font-weight: 700; font-size: 13.5px; cursor: pointer;
  min-height: 34px; padding: 7px 14px; color: var(--birch-100);
  background: rgba(255, 245, 235, .06); border: 1px solid var(--glass-bd); border-radius: var(--r-pill) }
.chip:hover { border-color: var(--glass-bd-hover); background: var(--glass-hover) }
.chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(245, 232, 160, .3) }
/* override the global `label` rule (block/uppercase) — this one is a flex row */
.audio label.vol { display: flex; align-items: center; gap: 12px; margin: 12px 0 0;
  font-size: inherit; text-transform: none; letter-spacing: normal }
.audio .ico { font-size: 17px; width: 24px; text-align: center }
.audio .pct { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px;
  color: var(--muted); width: 40px; text-align: right }
.audio input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; height: 6px; margin: 0;
  padding: 0; min-height: 0; border: 0; border-radius: 999px; background: rgba(255, 245, 235, .16);
  cursor: pointer; touch-action: none }
.audio input[type=range]:focus { outline: none }
.audio input[type=range]:focus-visible { box-shadow: 0 0 0 3px rgba(245, 232, 160, .3) }
/* 22px thumb sits inside a 44px tall transparent hit area via padding on the track parent */
.audio input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%; background: var(--glow-300); cursor: pointer;
  border: 2px solid rgba(12, 24, 10, .55); box-shadow: 0 2px 8px rgba(0, 0, 0, .45) }
.audio input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%;
  background: var(--glow-300); cursor: pointer; border: 2px solid rgba(12, 24, 10, .55) }

/* ---------- compact player panel: fits a phone viewport without scrolling ---------- */
.panel .greet { font-size: 25px; margin: 2px 0 8px }
.panel .stats { margin-bottom: 8px; gap: 10px }
.panel .stat { padding: 8px }
.panel .stat-v { font-size: 21px }
.panel .btn { margin: 5px 0; min-height: 44px; padding: 11px 16px; font-size: 15px }
.panel .btn.jugar { font-size: 20px; padding: 14px 16px; margin: 2px 0 6px }
.panel .navrow { margin-bottom: 0 }
.panel .audio { margin-top: 8px; padding: 9px 14px }
.panel .msg { min-height: 0; margin: 4px 0 }
.panel .link.out { margin: 9px auto 0 }
/* cuenta (cambiar clave / cerrar sesión): alineados abajo a la izquierda */
.panel .acct { text-align: left; margin-top: 12px }
.panel .acct .link { display: block; margin: 0 0 9px; text-align: left }
.panel .acct .link.out { margin: 0; text-align: left }

/* ---------- practice-end buttons (over the canvas) ---------- */
#pracEnd { position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(26px, env(safe-area-inset-bottom)); z-index: 15;
  display: flex; gap: 10px; width: min(430px, calc(100vw - 32px)) }
#pracEnd .btn { flex: 1; margin: 0 }
#pracEnd.hidden { display: none }

/* ---------- últimas competencias ---------- */
.recent-t { max-width: none; margin: 10px 0 0 }

/* ---------- barra de verificación de pago ---------- */
.vbar { height: 14px; margin: 20px 4px 10px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 245, 235, .1); border: 1px solid var(--glass-bd) }
.vfill { height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--forest-300), #9ef07a);
  box-shadow: 0 0 14px rgba(120, 224, 148, .45);
  transition: width .45s linear }

/* ---------- chat de soporte (botón flotante + panel, sin backdrop-blur) ---------- */
#chatBtn { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 30;
  display: inline-flex; align-items: center; gap: 7px; height: 52px; padding: 0 18px;
  border-radius: 999px; cursor: pointer; font-size: 21px; line-height: 1;
  border: 1px solid rgba(245, 232, 160, .55);
  background: linear-gradient(135deg, #f0d878, #dcaf46); color: #1c2a1c;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 26px rgba(245, 232, 160, .3) }
#chatBtn .cb-btn-label { font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: .01em }
#chatBtn:active { transform: scale(.94) }
#chatBtn.hidden { display: none }
#chatBadge { position: absolute; top: -5px; right: -5px; min-width: 22px; height: 22px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  border-radius: 999px; background: #e05a4e; color: #fff;
  font-family: var(--font-mono); font-weight: 700; font-size: 12.5px;
  border: 2px solid #14211a }
#chatBadge.hidden { display: none }
/* titileo del botón + aviso "Mensaje nuevo" cuando hay no-leídos (like the image) */
#chatBtn.has-unread { animation: chatpulse 1.3s ease-in-out infinite }
@keyframes chatpulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 26px rgba(245, 232, 160, .3) }
  50%      { transform: scale(1.06); box-shadow: 0 10px 34px rgba(0, 0, 0, .55), 0 0 30px rgba(255, 107, 107, .6) }
}
#chatNew { position: fixed; right: 18px; z-index: 30; pointer-events: none;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 58px);
  font-family: var(--font-head); font-weight: 700; font-size: 12px; color: #ff6b6b;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7); animation: chatnew-blink 1.3s ease-in-out infinite }
#chatNew.hidden { display: none }
@keyframes chatnew-blink { 0%, 100% { opacity: .6 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { #chatBtn.has-unread, #chatNew { animation: none } }
#chatPanel { position: fixed; right: 12px; bottom: 12px; z-index: 31;
  width: min(400px, calc(100vw - 24px)); height: min(540px, calc(100dvh - 24px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #14211a; border: 1px solid var(--glass-bd); border-radius: 18px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .6) }
#chatPanel.hidden { display: none }
.cb-head { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px;
  border-bottom: 1px solid rgba(255, 245, 235, .1); color: var(--birch-50);
  font-family: var(--font-head); font-size: 17px }
.cb-head button { background: none; border: 0; color: var(--birch-200); font-size: 17px; cursor: pointer; padding: 4px 8px }
.cb-empty { text-align: center; color: var(--birch-200); font-size: 15px; margin: 18px 14px 0 }
.cb-empty.hidden, .cb-note.hidden { display: none }
.cb-note { text-align: center; color: var(--muted); font-size: 12.5px; margin: 6px 14px }
.cb-msgs { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; touch-action: pan-y; padding: 10px 12px }
#chatPanel .cmsg { display: flex; flex-direction: column; align-items: flex-start; margin: 7px 0 }
#chatPanel .cmsg.me { align-items: flex-end }
#chatPanel .cbub { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.45;
  background: rgba(255, 245, 235, .08); border: 1px solid var(--glass-bd); color: var(--birch-50);
  white-space: pre-wrap; word-break: break-word }
#chatPanel .cmsg.me .cbub { background: rgba(245, 232, 160, .15); border-color: rgba(245, 232, 160, .4) }
#chatPanel .cbub a { color: var(--glow-300); text-decoration: underline; word-break: break-all }
.cb-row { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(255, 245, 235, .1) }
.cb-row input { flex: 1; min-width: 0; padding: 11px 14px; font-size: 15px; color: var(--birch-100);
  font-family: var(--font-body); background: rgba(255, 245, 235, .06);
  border: 1px solid rgba(255, 245, 235, .15); border-radius: 999px; outline: none }
.cb-row input:focus { border-color: rgba(245, 232, 160, .5) }
.cb-row button { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 0; cursor: pointer;
  font-size: 18px; background: linear-gradient(135deg, #f0d878, #dcaf46); color: #1c2a1c }
/* botones de imagen y nota de voz (discretos, redondos) */
.cb-row .cb-ico { width: 42px; height: 42px; font-size: 17px; padding: 0;
  background: rgba(255, 245, 235, .07); border: 1px solid var(--glass-bd); color: var(--birch-100) }
.cb-row .cb-ico.rec { background: #e05a4e; border-color: #e05a4e; animation: recpulse 1.2s ease-in-out infinite }
@keyframes recpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 90, 78, .55) } 50% { box-shadow: 0 0 0 9px rgba(224, 90, 78, 0) } }
/* media dentro de las burbujas */
#chatPanel .cbub .cb-media { display: block; max-width: 100%; max-height: 240px; border-radius: 10px }
#chatPanel .cbub .cb-audio { display: block; width: 210px; max-width: 100% }

/* ---------- felicitaciones: modal sobre la bienvenida ----------
   Sin backdrop-filter (regla de perf móvil): el fondo se oscurece con un scrim
   sólido, no con blur. Se dibuja encima de todo (chat incluido). */
.cg-scrim {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; box-sizing: border-box;
  background: rgba(8, 15, 8, .82);
  animation: ov-in .2s ease both;
}
.cg-scrim.hidden { display: none }
.cg-card {
  width: 100%; max-width: 360px; box-sizing: border-box;
  background: var(--forest-700);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55), 0 0 50px rgba(120, 224, 148, .16);
  padding: 26px 22px 22px; text-align: center;
  animation: card-pop .28s var(--bounce) both;
}
.cg-title {
  font-family: var(--font-head); font-weight: 800; font-size: 23px;
  color: var(--glow-300); margin-bottom: 12px; line-height: 1.2;
}
.cg-body { font-size: 15px; line-height: 1.55; color: var(--ink); margin: 0 0 20px }
.cg-card .btn.primary {
  display: inline-block; width: auto; min-width: 150px;
  margin: 0 auto; padding: 13px 34px;
}
/* ---------- rachas de consuelo: píldoras + modal "¿cómo funciona?" ---------- */
.rk-bar { display: flex; gap: 5px }
.rk-seg { flex: 1; height: 15px; border-radius: 5px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .09) }
.rk-seg.on { background: linear-gradient(180deg, #b9f77a, #5fbf3a);
  border-color: rgba(160, 240, 140, .55); box-shadow: 0 0 9px rgba(120, 224, 120, .4) }
.rk-seg.win { background: linear-gradient(180deg, #faf0c0, #dcc860);
  border-color: rgba(245, 232, 160, .65); box-shadow: 0 0 11px rgba(245, 232, 160, .55) }
.cg-pills { margin: 0 0 18px }
.cg-pills.hidden { display: none }
/* componente en el lobby (bajo tickets/saldo) */
.rk { margin: 2px 0 10px; padding: 11px 12px; text-align: left;
  background: rgba(16, 28, 20, .55); border: 1px solid var(--glass-bd); border-radius: 15px }
.rk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px }
.rk-t { font-family: var(--font-head); font-weight: 800; font-size: 12.5px; color: var(--glow-300) }
.rk-help { font-size: 11.5px; font-weight: 700; color: #9ec9ff; cursor: pointer;
  background: rgba(90, 150, 230, .14); border: 1px solid rgba(120, 170, 240, .35);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap }
.rk-help:hover { background: rgba(90, 150, 230, .24) }
.rk-line { display: flex; align-items: center; gap: 9px }
.rk-line .rk-bar { flex: 1 }
.rk-n { font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; color: var(--glow-300) }
/* modal "¿cómo funciona?" */
.cg-card.how { text-align: left }
.cg-card.how .cg-title { text-align: center }
.hr-way { display: flex; gap: 10px; margin: 0 0 11px; padding: 11px 12px;
  background: rgba(16, 28, 20, .5); border: 1px solid var(--glass-bd); border-radius: 13px }
.hr-ico { font-size: 22px; line-height: 1.1 }
.hr-way b { color: var(--birch-50); font-size: 13.5px }
.hr-way p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45 }
.hr-foot { font-size: 12.5px; color: #9ef07a; text-align: center; margin: 4px 0 18px }
.cg-card.how .btn.primary { display: block; margin: 0 auto }
@media (prefers-reduced-motion: reduce) {
  .cg-scrim, .cg-card { animation: none !important }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ov-scrim, .clay-card, .btn { animation: none !important; transition: none !important }
  .ov-scrim::before, .ov-scrim::after { animation: none !important }
  .btn:hover, .btn:active { transform: none }
}