/* ============================================================
   OKBet Free Spin - mobile canvas stylesheet (en-PH)
   File   : css/frame-mobile-2fe372.css
   Prefix : c37202-
   Canvas : 320-430px phone frame, centered on wide screens
   Palette: #1B263B base / #A0522D earth / #00CED1 cyan
            #FFC0CB soft pink / #FF6347 tomato
   ============================================================ */

/* ---------- design tokens ---------- */
:root {
  --c37202-navy: #1B263B;
  --c37202-navy-deep: #121A2B;
  --c37202-navy-panel: #223252;
  --c37202-navy-card: #1D2A47;
  --c37202-navy-line: #31456E;
  --c37202-sienna: #A0522D;
  --c37202-cyan: #00CED1;
  --c37202-cyan-dim: rgba(0, 206, 209, 0.14);
  --c37202-pink: #FFC0CB;
  --c37202-pink-dim: rgba(255, 192, 203, 0.10);
  --c37202-tomato: #FF6347;
  --c37202-tomato-deep: #C74831;
  --c37202-text: #EDF2F9;
  --c37202-text-dim: #B9C4D8;
  --c37202-text-faint: #8FA0BC;
  --c37202-ink: #0C1220;
  --c37202-mono: "SFMono-Regular", Consolas, "Liberation Mono", "Courier New", monospace;
  --c37202-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --c37202-r: 4px;   /* small radius, high density */
  --c37202-r-lg: 6px;
  --c37202-lift: translateY(-2px); /* short vertical lift micro-interaction */
  --c37202-bar-h: 56px;
  --c37202-bnav-h: 60px;
}

/* ---------- reset / base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: #0B111E;
  color: var(--c37202-text);
  font-family: var(--c37202-sans);
  font-size: 15px;
  line-height: 1.62;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: var(--c37202-cyan); text-decoration: none; }
ul, ol { list-style: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--c37202-cyan);
  outline-offset: 2px;
  border-radius: var(--c37202-r);
}

/* phone canvas: everything lives inside a 430px column */
.c37202-page {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--c37202-navy);
  position: relative;
  padding-bottom: calc(var(--c37202-bnav-h) + 18px);
  box-shadow: 0 0 0 1px rgba(0, 206, 209, 0.06);
}
@media (min-width: 430px) {
  .c37202-page {
    box-shadow: 0 0 0 1px var(--c37202-navy-line), 0 0 46px rgba(0, 0, 0, 0.55);
  }
}

.c37202-skip {
  position: absolute;
  left: 10px;
  top: -48px;
  z-index: 90;
  background: var(--c37202-cyan);
  color: var(--c37202-ink);
  font-family: var(--c37202-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: var(--c37202-r);
  transition: top 0.2s ease;
}
.c37202-skip:focus { top: 6px; }

/* ============================================================
   TOP BAR - asymmetric brand header
   brand block sits on a sienna edge; action cluster on right
   ============================================================ */
.c37202-topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  min-height: var(--c37202-bar-h);
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px 8px 12px;
  background: linear-gradient(180deg, #18233A 0%, #141D30 100%);
  border-bottom: 1px solid var(--c37202-navy-line);
  transition: box-shadow 0.25s ease;
}
.c37202-topbar-solid { box-shadow: 0 8px 20px rgba(5, 9, 18, 0.5); }

.c37202-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  position: relative;
  padding-left: 10px;
  min-width: 0;
}
/* asymmetric accent: thick dual-tone edge hugging the brand block */
.c37202-brand::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--c37202-tomato) 0%, var(--c37202-sienna) 100%);
}
.c37202-logo {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: var(--c37202-r);
  border: 1px solid var(--c37202-navy-line);
  background: #0E1626;
  object-fit: cover;
}
.c37202-brand-name {
  font-family: var(--c37202-mono);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  white-space: nowrap;
  line-height: 1.2;
}
.c37202-brand-name b { color: var(--c37202-cyan); font-weight: 700; }

.c37202-topacts { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

/* segmented action buttons */
.c37202-btn {
  min-height: 36px;
  padding: 0 11px;
  border-radius: var(--c37202-r);
  font-family: var(--c37202-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  transition: transform 0.16s ease, background-color 0.2s ease, color 0.2s ease;
}
.c37202-btn:active { transform: var(--c37202-lift); }
.c37202-btn-reg {
  background: var(--c37202-tomato);
  color: #FFFFFF;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.28);
}
.c37202-btn-log {
  background: var(--c37202-cyan-dim);
  color: var(--c37202-cyan);
  border: 1px solid rgba(0, 206, 209, 0.45);
}

.c37202-burger {
  width: 38px;
  min-height: 36px;
  border-radius: var(--c37202-r);
  background: var(--c37202-navy-panel);
  border: 1px solid var(--c37202-navy-line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.16s ease;
}
.c37202-burger:active { transform: var(--c37202-lift); }
.c37202-burger-box { display: flex; flex-direction: column; gap: 4px; width: 16px; }
.c37202-burger-box span {
  height: 2px;
  border-radius: 1px;
  background: var(--c37202-pink);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.c37202-burger[aria-expanded="true"] .c37202-burger-l1 { transform: translateY(6px) rotate(45deg); }
.c37202-burger[aria-expanded="true"] .c37202-burger-l2 { opacity: 0; }
.c37202-burger[aria-expanded="true"] .c37202-burger-l3 { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   ZONED MENU PANEL - drops under the top bar
   ============================================================ */
.c37202-menu {
  position: fixed;
  top: var(--c37202-bar-h);
  left: 50%;
  width: 100%;
  max-width: 430px;
  z-index: 65;
  background: #141E32;
  border: 1px solid var(--c37202-navy-line);
  border-top: 0;
  border-radius: 0 0 var(--c37202-r-lg) var(--c37202-r-lg);
  padding: 12px 12px 14px;
  max-height: calc(100vh - 76px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-10px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.c37202-menu-open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.c37202-zone { margin-bottom: 10px; }
.c37202-zone:last-child { margin-bottom: 0; }
.c37202-zone-t {
  font-family: var(--c37202-mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c37202-pink);
  margin: 2px 0 6px 3px;
}
.c37202-zone a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px 0 11px;
  border-radius: var(--c37202-r);
  color: var(--c37202-text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.055);
  margin-bottom: 5px;
  font-size: 13.5px;
  line-height: 1.3;
  transition: background-color 0.18s ease, transform 0.16s ease;
}
.c37202-zone a::after {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--c37202-cyan);
  border-top: 1.5px solid var(--c37202-cyan);
  transform: rotate(45deg);
}
.c37202-zone a:active {
  transform: var(--c37202-lift);
  background: var(--c37202-cyan-dim);
}

/* ============================================================
   HERO CAROUSEL
   ============================================================ */
.c37202-hero { position: relative; margin-top: var(--c37202-bar-h); }
.c37202-stage {
  position: relative;
  height: 192px;
  overflow: hidden;
  background: var(--c37202-navy-deep);
}
.c37202-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
  text-align: left;
}
.c37202-slide-on { opacity: 1; transform: none; pointer-events: auto; }
.c37202-slide img { width: 100%; height: 100%; object-fit: cover; }
.c37202-slide-cap {
  position: absolute;
  left: 0;
  right: 56px;
  bottom: 0;
  display: block;
  padding: 30px 12px 12px;
  background: linear-gradient(180deg, rgba(12, 18, 32, 0) 0%, rgba(12, 18, 32, 0.94) 82%);
}
.c37202-slide-tag {
  position: absolute;
  top: 10px;
  left: 12px;
  font-family: var(--c37202-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c37202-ink);
  background: var(--c37202-pink);
  padding: 3px 7px;
  border-radius: 3px;
}
.c37202-slide-t {
  display: block;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1.32;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}
.c37202-slide-s {
  display: block;
  margin-top: 3px;
  color: var(--c37202-cyan);
  font-family: var(--c37202-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.c37202-dots {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 4px;
  z-index: 5;
}
.c37202-dot {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c37202-dot::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.c37202-dot-on::after {
  background: var(--c37202-cyan);
  box-shadow: 0 0 7px rgba(0, 206, 209, 0.85);
}

/* ============================================================
   MAIN CONTENT - padded clear of fixed bars
   ============================================================ */
.c37202-main {
  padding: 18px 0 0;
}
.c37202-sec { padding: 20px 12px 4px; }
.c37202-sec:first-child { padding-top: 16px; }

.c37202-eyebrow {
  font-family: var(--c37202-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c37202-cyan);
  margin-bottom: 6px;
}
.c37202-h1 {
  font-size: 22.5px;
  line-height: 1.32;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin-bottom: 10px;
}
.c37202-lead { color: var(--c37202-text-dim); font-size: 14.2px; margin-bottom: 12px; }
.c37202-lead a, .c37202-secp a, .c37202-body a {
  color: var(--c37202-cyan);
  border-bottom: 1px dotted rgba(0, 206, 209, 0.55);
}
.c37202-body { color: var(--c37202-text-dim); font-size: 13.8px; margin: 8px 0; }
.c37202-body b, .c37202-secp b, .c37202-lead b { color: #FFFFFF; }

.c37202-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 14px; }
.c37202-chip {
  font-family: var(--c37202-mono);
  font-size: 11px;
  color: var(--c37202-pink);
  background: var(--c37202-pink-dim);
  border: 1px solid rgba(255, 192, 203, 0.28);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.c37202-chip b { color: #FFFFFF; font-weight: 700; }

/* quick question cards */
.c37202-qa { display: grid; gap: 8px; margin: 6px 0 4px; }
.c37202-qa article {
  background: var(--c37202-navy-card);
  border: 1px solid var(--c37202-navy-line);
  border-left: 3px solid var(--c37202-cyan);
  border-radius: var(--c37202-r);
  padding: 10px 11px 11px;
}
.c37202-qa h3 { font-size: 14px; line-height: 1.4; color: #FFFFFF; margin-bottom: 4px; }
.c37202-qa h3::before {
  content: "Q";
  font-family: var(--c37202-mono);
  color: var(--c37202-tomato);
  font-size: 12px;
  margin-right: 6px;
}
.c37202-qa p { font-size: 13px; color: var(--c37202-text-dim); }

/* ---------- game section headers ---------- */
.c37202-sechead {
  margin-bottom: 10px;
  padding-left: 10px;
  border-left: 3px solid var(--c37202-sienna);
}
.c37202-secnum {
  display: inline-block;
  font-family: var(--c37202-mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  color: var(--c37202-pink);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.c37202-h2 {
  font-size: 18.5px;
  line-height: 1.38;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 6px;
}
.c37202-secp { color: var(--c37202-text-dim); font-size: 13.6px; margin-top: 2px; }

/* ---------- game grid: 4 cols at 320px, 5 cols from 375px ---------- */
.c37202-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 6px 0 8px;
}
@media (min-width: 375px) {
  .c37202-grid { grid-template-columns: repeat(5, 1fr); }
}
.c37202-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px 4px 6px;
  border-radius: var(--c37202-r);
  background: linear-gradient(180deg, #233356 0%, #1D2A47 100%);
  border: 1px solid var(--c37202-navy-line);
  text-align: center;
  min-width: 0;
  transition: transform 0.16s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.c37202-tile:active {
  transform: var(--c37202-lift);
  border-color: rgba(0, 206, 209, 0.65);
}
.c37202-tile-img {
  display: block;
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 3px;
  overflow: hidden;
  background: #0E1626;
}
.c37202-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.c37202-tile-name {
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--c37202-text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  word-break: break-word;
}
/* large tile variant - mixes big and small cards in one shelf */
.c37202-tile-lg {
  grid-column: span 2;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  background: linear-gradient(135deg, #2B3E68 0%, #1F2C4C 100%);
  border-color: rgba(255, 99, 71, 0.45);
}
.c37202-tile-lg .c37202-tile-img { flex: 0 0 58px; width: 58px; }
.c37202-tile-lg .c37202-tile-name {
  font-size: 12px;
  color: #FFFFFF;
  text-align: left;
  min-height: 0;
  -webkit-line-clamp: 3;
}

/* ============================================================
   CONTENT MODULES - varied presentation per block
   ============================================================ */

/* app module: spec sheet + numbered steps */
.c37202-spec {
  border: 1px solid var(--c37202-navy-line);
  border-radius: var(--c37202-r-lg);
  background: var(--c37202-navy-card);
  padding: 2px 11px;
  margin: 10px 0;
}
.c37202-specrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.09);
  font-size: 12.8px;
}
.c37202-specrow:last-child { border-bottom: 0; }
.c37202-specrow dt {
  font-family: var(--c37202-mono);
  font-size: 11px;
  color: var(--c37202-pink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.c37202-specrow dd { color: var(--c37202-text-dim); text-align: right; }

.c37202-steps { display: grid; gap: 7px; margin: 10px 0; counter-reset: c37202step; }
.c37202-steps li {
  counter-increment: c37202step;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--c37202-r);
  padding: 9px 10px;
  font-size: 13px;
  color: var(--c37202-text-dim);
  line-height: 1.55;
}
.c37202-steps li::before {
  content: counter(c37202step, decimal-leading-zero);
  font-family: var(--c37202-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--c37202-ink);
  background: var(--c37202-pink);
  border-radius: 3px;
  padding: 2px 5px;
  margin-top: 2px;
}
.c37202-steps b { color: #FFFFFF; }

/* security module: cyan checklist */
.c37202-check { display: grid; gap: 7px; margin: 10px 0; }
.c37202-check li {
  position: relative;
  padding: 9px 10px 9px 33px;
  background: rgba(0, 206, 209, 0.05);
  border: 1px solid rgba(0, 206, 209, 0.2);
  border-radius: var(--c37202-r);
  font-size: 13px;
  color: var(--c37202-text-dim);
}
.c37202-check li::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 14px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--c37202-cyan);
  border-bottom: 2px solid var(--c37202-cyan);
  transform: rotate(-45deg);
}
.c37202-check b { color: #FFFFFF; }

/* promotions module: offer rows with icon chip + action pill */
.c37202-offers { display: grid; gap: 7px; margin: 10px 0; }
.c37202-offer {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--c37202-navy-card);
  border: 1px solid var(--c37202-navy-line);
  border-radius: var(--c37202-r);
  padding: 8px 9px;
}
.c37202-offer-ic {
  flex: 0 0 34px;
  height: 34px;
  border-radius: var(--c37202-r);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 99, 71, 0.14);
  border: 1px solid rgba(255, 99, 71, 0.4);
}
.c37202-offer-ic svg { width: 17px; height: 17px; }
.c37202-offer-b { flex: 1 1 auto; min-width: 0; }
.c37202-offer-n { font-size: 13px; font-weight: 700; color: #FFFFFF; line-height: 1.3; }
.c37202-offer-d { font-size: 11.5px; color: var(--c37202-text-faint); line-height: 1.45; }
.c37202-offer-a {
  flex: 0 0 auto;
  font-family: var(--c37202-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c37202-cyan);
  border: 1px solid rgba(0, 206, 209, 0.45);
  border-radius: 999px;
  padding: 7px 11px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  transition: transform 0.16s ease, background-color 0.2s ease;
}
.c37202-offer-a:active { transform: var(--c37202-lift); background: var(--c37202-cyan-dim); }

/* testimonials module: quote cards */
.c37202-revs { display: grid; gap: 8px; margin: 10px 0; }
.c37202-rev {
  background: var(--c37202-navy-card);
  border: 1px solid var(--c37202-navy-line);
  border-radius: var(--c37202-r-lg);
  padding: 11px 11px 10px;
}
.c37202-rev-h { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.c37202-rev-av {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c37202-pink-dim);
  border: 1px solid rgba(255, 192, 203, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--c37202-mono);
  font-size: 11.5px;
  color: var(--c37202-pink);
}
.c37202-rev-n { font-size: 13px; font-weight: 700; color: #FFFFFF; line-height: 1.25; }
.c37202-rev-m {
  font-family: var(--c37202-mono);
  font-size: 10px;
  color: var(--c37202-text-faint);
  letter-spacing: 0.05em;
}
.c37202-rev-q {
  font-size: 13px;
  color: var(--c37202-text-dim);
  border-left: 2px solid var(--c37202-sienna);
  padding-left: 9px;
  line-height: 1.6;
}
.c37202-rev-t {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--c37202-mono);
  font-size: 9.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c37202-cyan);
  border: 1px solid rgba(0, 206, 209, 0.4);
  border-radius: 999px;
  padding: 2px 8px;
}

/* CTA band with segmented action button */
.c37202-ctaband {
  margin: 12px 0 6px;
  background: linear-gradient(135deg, rgba(255, 99, 71, 0.16) 0%, rgba(160, 82, 45, 0.2) 100%);
  border: 1px solid rgba(255, 99, 71, 0.38);
  border-radius: var(--c37202-r-lg);
  padding: 16px 12px 15px;
  text-align: center;
}
.c37202-ctaband .c37202-body { margin: 6px 0 12px; }
.c37202-seg {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--c37202-r);
  overflow: hidden;
  box-shadow: 0 5px 16px rgba(255, 99, 71, 0.3);
  transition: transform 0.16s ease;
}
.c37202-seg:active { transform: var(--c37202-lift); }
.c37202-seg-main {
  background: var(--c37202-tomato);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  padding: 12px 15px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
}
.c37202-seg-more {
  background: var(--c37202-tomato-deep);
  border-left: 1px solid rgba(255, 255, 255, 0.24);
  padding: 12px 11px;
  display: inline-flex;
  align-items: center;
}
.c37202-seg-more::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid #FFE7E2;
  border-top: 2px solid #FFE7E2;
  transform: rotate(45deg);
}
.c37202-ctasub {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--c37202-text-dim);
}
.c37202-ctasub a { border-bottom: 1px dotted rgba(0, 206, 209, 0.55); }
.c37202-ctanote {
  margin-top: 10px;
  font-family: var(--c37202-mono);
  font-size: 10.5px;
  color: var(--c37202-text-faint);
  line-height: 1.5;
}

/* glossary module */
.c37202-gloss { display: grid; gap: 8px; margin: 10px 0; }
.c37202-gloss > div {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--c37202-r);
  padding: 9px 11px 10px;
}
.c37202-gloss dt {
  font-family: var(--c37202-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c37202-cyan);
  margin-bottom: 3px;
}
.c37202-gloss dd { font-size: 13px; color: var(--c37202-text-dim); line-height: 1.58; }

/* ============================================================
   EXTENDED FOOTER (homepage) + common footer
   ============================================================ */
.c37202-xfoot {
  margin-top: 14px;
  border-top: 1px solid var(--c37202-navy-line);
  background: #152036;
  padding: 18px 12px 10px;
}
.c37202-xg { margin-bottom: 15px; }
.c37202-xg-t {
  font-family: var(--c37202-mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c37202-cyan);
  margin-bottom: 7px;
}
.c37202-xbrand { font-size: 12.8px; color: var(--c37202-text-dim); line-height: 1.6; }

.c37202-xdir { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.c37202-xdir a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-height: 46px;
  padding: 7px 9px;
  border-radius: var(--c37202-r);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.065);
  transition: background-color 0.18s ease, transform 0.16s ease;
}
.c37202-xdir a:active { transform: var(--c37202-lift); background: var(--c37202-cyan-dim); }
.c37202-xdir b { color: #FFFFFF; font-weight: 600; font-size: 12px; line-height: 1.3; }
.c37202-xdir span { font-size: 10.5px; color: var(--c37202-text-faint); line-height: 1.35; }

.c37202-xpromo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.c37202-xpromo button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 8px 9px;
  border-radius: var(--c37202-r);
  background: rgba(255, 99, 71, 0.1);
  border: 1px solid rgba(255, 99, 71, 0.35);
  color: #FFD9D2;
  font-size: 11.8px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  transition: transform 0.16s ease, background-color 0.2s ease;
}
.c37202-xpromo button:active { transform: var(--c37202-lift); background: rgba(255, 99, 71, 0.2); }
.c37202-xpromo svg { flex: 0 0 15px; width: 15px; height: 15px; }
.c37202-xp-wide { grid-column: span 2; }

.c37202-xdisc {
  font-size: 11.5px;
  color: var(--c37202-text-faint);
  line-height: 1.6;
  border-left: 3px solid var(--c37202-sienna);
  padding-left: 10px;
}

.c37202-foot { padding: 14px 12px 16px; text-align: center; }
.c37202-foot-c {
  font-family: var(--c37202-mono);
  font-size: 11.5px;
  color: var(--c37202-text-dim);
  letter-spacing: 0.02em;
}
.c37202-foot-s { font-size: 10.5px; color: #71809D; margin-top: 4px; }

/* ============================================================
   BOTTOM NAV - compact icon rack, 5 roles, fixed to canvas
   ============================================================ */
.c37202-bnav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 70;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  background: rgba(16, 24, 40, 0.97);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--c37202-navy-line);
  padding: 5px 4px calc(5px + env(safe-area-inset-bottom, 0px));
}
.c37202-bitem {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 50px;
  padding: 4px 2px;
  border-radius: var(--c37202-r);
  transition: transform 0.16s ease, background-color 0.2s ease;
}
.c37202-bitem:active { transform: var(--c37202-lift); }
.c37202-bitem svg { width: 21px; height: 21px; }
.c37202-bitem span {
  font-family: var(--c37202-mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: #93A2C0;
}
/* active role: background support block + tick */
.c37202-bitem-on { background: var(--c37202-cyan-dim); }
.c37202-bitem-on::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--c37202-cyan);
}
.c37202-bitem-on span { color: var(--c37202-cyan); }

/* promo roles get a warm tint chip behind the icon */
.c37202-bitem-hot svg { filter: drop-shadow(0 0 5px rgba(255, 99, 71, 0.55)); }

/* ============================================================
   MOTION / ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation: none !important; scroll-behavior: auto; }
}
::selection { background: rgba(0, 206, 209, 0.35); color: #FFFFFF; }