/* ==========================================================================
   Ok Panalo APK - display-responsive stylesheet
   Site: okpanaloapk.cfd  |  Language: en-PH
   Canvas strategy: mobile-first 320-430px phone canvas; wider viewports keep
   the same centered canvas so the lobby stays thumb-operable everywhere.
   Class prefix: mobiled2935-
   Visual language: dark graphite zones, goldenrod accents, humanist serif
   headings over a clean sans body, low-radius zoned sections, square-corner
   high-contrast CTAs, and state-color-only motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --mobiled2935-gold: #b8860b;
  --mobiled2935-gold-hi: #dcaa34;
  --mobiled2935-gold-deep: #8f6708;
  --mobiled2935-ink: #2d2d2d;
  --mobiled2935-ink-deep: #222222;
  --mobiled2935-surface: #363636;
  --mobiled2935-surface-2: #3e3e3e;
  --mobiled2935-surface-3: #464646;
  --mobiled2935-line: #4d4d4d;
  --mobiled2935-line-soft: #434343;
  --mobiled2935-text: #f2ecdf;
  --mobiled2935-muted: #bcb3a1;
  --mobiled2935-faint: #948c7c;
  --mobiled2935-on-gold: #1c1503;
  --mobiled2935-warn: #e2b45c;
  --mobiled2935-good: #9dc57c;
  --mobiled2935-focus-ring: #eccf7e;
  --mobiled2935-font-head: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  --mobiled2935-font-body: "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mobiled2935-rail-h: 64px;
  --mobiled2935-head-h: 56px;
  --mobiled2935-gap: 12px;
  --mobiled2935-pad: 14px;
  --mobiled2935-radius: 3px;
  --mobiled2935-tap: 44px;
}

/* --------------------------------------------------------------------------
   2. Base + phone canvas framing
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html {
  background: #1b1b1b;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0 auto;
  max-width: 430px;
  min-height: 100vh;
  background: var(--mobiled2935-ink);
  color: var(--mobiled2935-text);
  font-family: var(--mobiled2935-font-body);
  font-size: 15px;
  line-height: 1.62;
  overflow-x: hidden;
}

/* Wide viewports: keep the phone canvas centered with a quiet edge frame */
@media (min-width: 431px) {
  body {
    box-shadow: 0 0 0 1px #4a4a4a, 0 0 42px rgba(0, 0, 0, 0.55);
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: var(--mobiled2935-gold-hi);
  text-decoration: none;
}

a:hover { color: #f0c766; }

:focus-visible {
  outline: 2px solid var(--mobiled2935-focus-ring);
  outline-offset: 2px;
}

::selection {
  background: var(--mobiled2935-gold);
  color: var(--mobiled2935-on-gold);
}

/* --------------------------------------------------------------------------
   3. Skip link + shared heading voices
   -------------------------------------------------------------------------- */
.mobiled2935-skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 120;
  background: var(--mobiled2935-gold);
  color: var(--mobiled2935-on-gold);
  padding: 10px 14px;
  font-weight: 700;
}

.mobiled2935-skip:focus {
  left: 8px;
}

h1, h2, h3, h4 {
  font-family: var(--mobiled2935-font-head);
  font-weight: 700;
  line-height: 1.24;
  margin: 0 0 10px;
  letter-spacing: 0.1px;
}

h1 { font-size: 25px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }
h4 { font-size: 15px; }

p { margin: 0 0 12px; }

ul, ol { margin: 0 0 12px; padding-left: 20px; }
li { margin: 0 0 6px; }

strong { color: #fff; font-weight: 700; }

/* --------------------------------------------------------------------------
   4. Top bar - edge-aligned functional header
   -------------------------------------------------------------------------- */
.mobiled2935-header {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: var(--mobiled2935-head-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px var(--mobiled2935-pad);
  background: #262626;
  border-bottom: 2px solid var(--mobiled2935-gold);
}

.mobiled2935-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.mobiled2935-brand-logo {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--mobiled2935-line);
  background: #111;
  object-fit: cover;
}

.mobiled2935-brand-name {
  font-family: var(--mobiled2935-font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--mobiled2935-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobiled2935-brand-name em {
  font-style: normal;
  color: var(--mobiled2935-gold-hi);
}

.mobiled2935-head-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

/* Square-corner high-contrast CTAs */
.mobiled2935-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--mobiled2935-tap);
  padding: 9px 15px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  border-radius: 0;
  transition: background-color 0.15s linear, color 0.15s linear, border-color 0.15s linear;
}

.mobiled2935-btn-solid {
  background: var(--mobiled2935-gold);
  color: var(--mobiled2935-on-gold);
}

.mobiled2935-btn-solid:hover {
  background: var(--mobiled2935-gold-hi);
  color: #140f02;
}

.mobiled2935-btn-line {
  border: 1px solid var(--mobiled2935-gold);
  color: var(--mobiled2935-gold-hi);
  background: transparent;
}

.mobiled2935-btn-line:hover {
  background: rgba(184, 134, 11, 0.16);
  border-color: var(--mobiled2935-gold-hi);
  color: #f0c766;
}

/* Compact register/login pair stays inside 320px */
.mobiled2935-btn-cta {
  padding: 9px 11px;
  font-size: 13px;
}

/* Menu toggle */
.mobiled2935-menu-btn {
  width: var(--mobiled2935-tap);
  height: var(--mobiled2935-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mobiled2935-line);
  background: #303030;
  color: var(--mobiled2935-text);
  transition: background-color 0.15s linear, border-color 0.15s linear;
}

.mobiled2935-menu-btn:hover,
.mobiled2935-menu-btn[aria-expanded="true"] {
  background: #3e3e3e;
  border-color: var(--mobiled2935-gold);
  color: var(--mobiled2935-gold-hi);
}

.mobiled2935-menu-btn svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* --------------------------------------------------------------------------
   5. Zoned full-screen menu
   -------------------------------------------------------------------------- */
.mobiled2935-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  max-width: 430px;
  margin: 0 auto;
  background: rgba(24, 24, 24, 0.97);
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding: 0 0 calc(var(--mobiled2935-rail-h) + 18px);
}

.mobiled2935-menu[data-open="true"] {
  display: flex;
}

.mobiled2935-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--mobiled2935-head-h);
  padding: 8px var(--mobiled2935-pad);
  border-bottom: 1px solid var(--mobiled2935-line-soft);
  position: sticky;
  top: 0;
  background: #242424;
}

.mobiled2935-menu-title {
  font-family: var(--mobiled2935-font-head);
  font-size: 18px;
  font-weight: 700;
}

.mobiled2935-menu-close {
  width: var(--mobiled2935-tap);
  height: var(--mobiled2935-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mobiled2935-line);
  color: var(--mobiled2935-text);
  background: #303030;
  transition: background-color 0.15s linear, color 0.15s linear;
}

.mobiled2935-menu-close:hover {
  background: #3e3e3e;
  color: var(--mobiled2935-gold-hi);
}

.mobiled2935-menu-zone {
  padding: 16px var(--mobiled2935-pad) 6px;
  border-bottom: 1px solid var(--mobiled2935-line-soft);
}

.mobiled2935-menu-zone:last-child {
  border-bottom: 0;
}

.mobiled2935-menu-zone-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--mobiled2935-gold);
  margin: 0 0 8px;
}

.mobiled2935-menu-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobiled2935-menu-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: var(--mobiled2935-tap);
  padding: 10px 12px;
  margin: 0 0 4px;
  background: #303030;
  border-left: 3px solid var(--mobiled2935-line);
  color: var(--mobiled2935-text);
  font-size: 14.5px;
  transition: background-color 0.15s linear, border-color 0.15s linear, color 0.15s linear;
}

.mobiled2935-menu-links a:hover {
  background: #3b3b3b;
  border-left-color: var(--mobiled2935-gold);
  color: #f4d98a;
}

.mobiled2935-menu-links a::after {
  content: ">";
  color: var(--mobiled2935-gold);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   6. Layout shell
   -------------------------------------------------------------------------- */
.mobiled2935-main {
  padding: 16px var(--mobiled2935-pad) calc(var(--mobiled2935-rail-h) + 30px);
}

.mobiled2935-zone {
  margin: 0 0 22px;
}

/* Zoned section: low radius, top rule + side keyline */
.mobiled2935-panel {
  background: var(--mobiled2935-surface);
  border: 1px solid var(--mobiled2935-line-soft);
  border-top: 2px solid var(--mobiled2935-gold);
  border-radius: var(--mobiled2935-radius);
  padding: 15px 14px 8px;
  margin: 0 0 20px;
}

.mobiled2935-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--mobiled2935-gold);
  margin: 0 0 6px;
}

/* Fact-first lead line before the expansion */
.mobiled2935-lead {
  font-size: 15.5px;
  color: #fff;
  border-left: 3px solid var(--mobiled2935-gold);
  padding-left: 10px;
  margin: 0 0 12px;
}

.mobiled2935-muted { color: var(--mobiled2935-muted); }
.mobiled2935-fine { font-size: 12.5px; color: var(--mobiled2935-faint); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.mobiled2935-hero {
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--mobiled2935-line-soft);
  margin: 0 0 16px;
}

.mobiled2935-hero h1 {
  color: var(--mobiled2935-text);
}

.mobiled2935-hero h1 .mobiled2935-hero-accent {
  color: var(--mobiled2935-gold-hi);
}

.mobiled2935-hero-facts {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 6px;
}

.mobiled2935-hero-facts li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 13.5px;
  color: var(--mobiled2935-muted);
}

.mobiled2935-hero-facts li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 7px;
  background: var(--mobiled2935-gold);
}

/* --------------------------------------------------------------------------
   8. Promo carousel
   -------------------------------------------------------------------------- */
.mobiled2935-carousel {
  position: relative;
  margin: 0 0 20px;
  border: 1px solid var(--mobiled2935-line-soft);
  background: #1f1f1f;
}

.mobiled2935-slide {
  position: relative;
  display: none;
  width: 100%;
  min-height: 150px;
}

.mobiled2935-slide.mobiled2935-slide-on {
  display: block;
}

.mobiled2935-slide-banner {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.mobiled2935-slide-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 12px 10px;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0.92) 78%);
  text-align: left;
  pointer-events: none;
}

.mobiled2935-slide-cap strong {
  display: block;
  font-family: var(--mobiled2935-font-head);
  font-size: 16px;
  color: #f6d98b;
}

.mobiled2935-slide-cap span {
  font-size: 12.5px;
  color: var(--mobiled2935-muted);
}

.mobiled2935-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(24, 24, 24, 0.78);
  border: 1px solid var(--mobiled2935-line);
  color: var(--mobiled2935-text);
  transition: background-color 0.15s linear, color 0.15s linear;
}

.mobiled2935-carousel-nav:hover {
  background: var(--mobiled2935-gold);
  color: var(--mobiled2935-on-gold);
}

.mobiled2935-carousel-prev { left: 4px; }
.mobiled2935-carousel-next { right: 4px; }

.mobiled2935-carousel-nav svg {
  width: 18px;
  height: 18px;
}

.mobiled2935-carousel-dots {
  position: absolute;
  bottom: 6px;
  right: 10px;
  display: flex;
  gap: 6px;
}

.mobiled2935-carousel-dots button {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobiled2935-carousel-dots button::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #6f6f6f;
  transition: background-color 0.15s linear;
}

.mobiled2935-carousel-dots button:hover::before {
  background: #a8a8a8;
}

.mobiled2935-carousel-dots button[aria-current="true"]::before {
  background: var(--mobiled2935-gold-hi);
}

/* --------------------------------------------------------------------------
   9. Game sections and tiles (pure image card + short name below)
   -------------------------------------------------------------------------- */
.mobiled2935-gamehead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 2px solid var(--mobiled2935-gold);
  margin: 0 0 10px;
  padding-bottom: 6px;
}

.mobiled2935-gamehead h2 {
  font-size: 18px;
  margin: 0;
}

.mobiled2935-count {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--mobiled2935-on-gold);
  background: var(--mobiled2935-gold);
  padding: 3px 8px;
  border-radius: 0;
}

.mobiled2935-gamegrid {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px 7px;
}

/* Slightly wider phones gain a fifth icon column */
@media (min-width: 396px) and (max-width: 430px) {
  .mobiled2935-gamegrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.mobiled2935-gtile {
  margin: 0;
  min-width: 0;
}

.mobiled2935-gbtn {
  width: 100%;
  display: block;
  text-align: center;
  background: #333333;
  border: 1px solid #454545;
  border-radius: var(--mobiled2935-radius);
  padding: 4px 3px 6px;
  transition: border-color 0.15s linear, background-color 0.15s linear;
}

.mobiled2935-gbtn:hover {
  border-color: var(--mobiled2935-gold-hi);
  background: #3c3c3c;
}

.mobiled2935-gimg {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #1c1c1c;
}

.mobiled2935-gname {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.3;
  color: var(--mobiled2935-muted);
  margin-top: 4px;
  min-height: 2.6em;
  word-break: break-word;
}

.mobiled2935-gbtn:hover .mobiled2935-gname {
  color: var(--mobiled2935-text);
}

/* Pressed feedback (state color only, toggled by the session script) */
.mobiled2935-gbtn.mobiled2935-pressed,
.mobiled2935-promo button.mobiled2935-pressed {
  background: var(--mobiled2935-gold-deep);
  border-color: var(--mobiled2935-gold-hi);
}

/* Category intro copy under each grid */
.mobiled2935-gamenote {
  font-size: 14px;
  color: var(--mobiled2935-muted);
}

/* --------------------------------------------------------------------------
   10. Testimonials
   -------------------------------------------------------------------------- */
.mobiled2935-quotes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.mobiled2935-quote {
  margin: 0;
  background: #313131;
  border: 1px solid var(--mobiled2935-line-soft);
  border-left: 3px solid var(--mobiled2935-gold);
  padding: 11px 12px 9px;
}

.mobiled2935-quote p {
  margin: 0 0 7px;
  font-size: 14px;
  color: #e9e2d3;
}

.mobiled2935-quote footer {
  font-size: 12px;
  color: var(--mobiled2935-faint);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   11. Payment grid + comparison rows
   -------------------------------------------------------------------------- */
.mobiled2935-paygrid {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mobiled2935-pay {
  margin: 0;
  background: #313131;
  border: 1px solid var(--mobiled2935-line-soft);
  border-radius: var(--mobiled2935-radius);
  padding: 10px 10px 8px;
}

.mobiled2935-pay h3 {
  font-size: 14.5px;
  margin: 0 0 4px;
  color: var(--mobiled2935-gold-hi);
}

.mobiled2935-pay p {
  margin: 0;
  font-size: 12.5px;
  color: var(--mobiled2935-muted);
  line-height: 1.5;
}

.mobiled2935-versus {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--mobiled2935-line-soft);
}

.mobiled2935-versus li {
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: 8px;
  padding: 9px 10px;
  margin: 0;
  border-bottom: 1px solid var(--mobiled2935-line-soft);
  font-size: 13px;
}

.mobiled2935-versus li:last-child { border-bottom: 0; }

.mobiled2935-versus b {
  color: var(--mobiled2935-gold-hi);
  font-weight: 700;
}

.mobiled2935-versus span { color: var(--mobiled2935-muted); }

/* --------------------------------------------------------------------------
   12. Checklist / step rows
   -------------------------------------------------------------------------- */
.mobiled2935-checklist {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.mobiled2935-checklist li {
  position: relative;
  margin: 0 0 6px;
  padding: 0 0 0 24px;
  font-size: 14px;
  color: #e5ddcc;
}

.mobiled2935-checklist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--mobiled2935-gold);
}

.mobiled2935-steps {
  list-style: none;
  counter-reset: mobiled2935step;
  margin: 0 0 12px;
  padding: 0;
}

.mobiled2935-steps li {
  counter-increment: mobiled2935step;
  position: relative;
  margin: 0 0 8px;
  padding: 0 0 0 34px;
  font-size: 14px;
}

.mobiled2935-steps li::before {
  content: counter(mobiled2935step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mobiled2935-gold);
  color: var(--mobiled2935-on-gold);
  font-weight: 700;
  font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   13. Extended footer (homepage): directory > brand > promos > disclaimer
   -------------------------------------------------------------------------- */
.mobiled2935-extfoot {
  margin: 26px 0 0;
  border-top: 3px double var(--mobiled2935-gold);
  padding: 16px 0 0;
}

.mobiled2935-extfoot-title {
  font-size: 16px;
  color: var(--mobiled2935-gold-hi);
  margin: 0 0 10px;
}

.mobiled2935-directory {
  columns: 2;
  column-gap: 16px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.mobiled2935-directory li {
  margin: 0 0 7px;
  padding: 0 0 7px;
  border-bottom: 1px dotted var(--mobiled2935-line);
  break-inside: avoid;
  font-size: 13px;
}

.mobiled2935-directory a {
  color: var(--mobiled2935-text);
  display: block;
  line-height: 1.35;
}

.mobiled2935-directory a:hover { color: var(--mobiled2935-gold-hi); }

.mobiled2935-directory small {
  display: block;
  color: var(--mobiled2935-faint);
  font-size: 11px;
}

.mobiled2935-brandnote {
  font-size: 13px;
  color: var(--mobiled2935-muted);
  border: 1px solid var(--mobiled2935-line-soft);
  background: #303030;
  padding: 11px 12px;
  margin: 0 0 14px;
}

.mobiled2935-promoblock {
  margin: 0 0 14px;
}

.mobiled2935-promogrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mobiled2935-promo {
  margin: 0;
}

.mobiled2935-promo button {
  width: 100%;
  min-height: var(--mobiled2935-tap);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  background: #302409;
  border: 1px solid var(--mobiled2935-gold);
  color: var(--mobiled2935-text);
  font-weight: 700;
  font-size: 13px;
  text-align: left;
  transition: background-color 0.15s linear, color 0.15s linear, border-color 0.15s linear;
}

.mobiled2935-promo button:hover {
  background: var(--mobiled2935-gold);
  color: var(--mobiled2935-on-gold);
}

.mobiled2935-promo svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.mobiled2935-promo small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--mobiled2935-muted);
}

.mobiled2935-promo button:hover small {
  color: #3a2c08;
}

.mobiled2935-disclaimer {
  font-size: 12px;
  line-height: 1.55;
  color: var(--mobiled2935-faint);
  background: #262626;
  border-left: 3px solid var(--mobiled2935-line);
  padding: 10px 11px;
}

/* --------------------------------------------------------------------------
   14. Common footer (copyright only)
   -------------------------------------------------------------------------- */
.mobiled2935-footer {
  padding: 14px var(--mobiled2935-pad) calc(var(--mobiled2935-rail-h) + 18px);
  border-top: 1px solid var(--mobiled2935-line-soft);
  text-align: center;
  background: #242424;
}

.mobiled2935-footer p {
  margin: 0;
  font-size: 12px;
  color: var(--mobiled2935-faint);
}

/* --------------------------------------------------------------------------
   15. Bottom navigation rail (full-width, 5 roles)
   -------------------------------------------------------------------------- */
.mobiled2935-rail {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  max-width: 430px;
  margin: 0 auto;
  height: calc(var(--mobiled2935-rail-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: #212121;
  border-top: 2px solid var(--mobiled2935-gold);
}

.mobiled2935-rail a,
.mobiled2935-rail button {
  min-width: 0;
  min-height: var(--mobiled2935-rail-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 2px 4px;
  color: var(--mobiled2935-muted);
  border-top: 3px solid transparent; /* accent indicator slot */
  transition: color 0.15s linear, border-color 0.15s linear, background-color 0.15s linear;
}

.mobiled2935-rail svg {
  width: 22px;
  height: 22px;
}

.mobiled2935-rail-label {
  font-size: 10.5px;
  letter-spacing: 0.4px;
  line-height: 1.2;
}

/* Promo rail slots wear gold to separate them from internal routes */
.mobiled2935-rail-go {
  color: var(--mobiled2935-gold-hi);
}

.mobiled2935-rail a:hover,
.mobiled2935-rail button:hover {
  color: #f4d98a;
  background: #2c2c2c;
}

/* Active page: icon fill flips to gold + top indicator */
.mobiled2935-rail a[aria-current="page"] {
  color: var(--mobiled2935-gold-hi);
  border-top-color: var(--mobiled2935-gold);
  background: #2e2e2e;
}

/* --------------------------------------------------------------------------
   16. Motion budget: state colors only; honor reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   17. Small-phone guardrails (320px and below)
   -------------------------------------------------------------------------- */
@media (max-width: 339px) {
  body { font-size: 14px; }
  h1 { font-size: 22px; }
  h2 { font-size: 17.5px; }
  .mobiled2935-btn-cta { padding: 8px 8px; font-size: 12px; }
  .mobiled2935-brand-name { font-size: 15.5px; max-width: 110px; }
  .mobiled2935-gamegrid { gap: 7px 5px; }
  .mobiled2935-directory { columns: 1; }
  .mobiled2935-paygrid { grid-template-columns: 1fr; }
  .mobiled2935-promogrid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   18. Help-page reading tools: timelines, check rows, and answer disclosure
   -------------------------------------------------------------------------- */
.mobiled2935-help-main {
  padding-top: 12px;
}

.mobiled2935-help-hero {
  margin: 0 0 18px;
  padding: 15px 14px 13px;
  background: linear-gradient(135deg, #3d3219 0%, #2f2f2f 58%, #292929 100%);
  border: 1px solid var(--mobiled2935-gold-deep);
  border-left: 4px solid var(--mobiled2935-gold-hi);
}

.mobiled2935-help-hero h1 {
  color: #fff4d0;
  margin-bottom: 8px;
}

.mobiled2935-help-hero p:last-child {
  margin-bottom: 0;
}

.mobiled2935-help-answer {
  padding: 12px 13px;
  margin: 0 0 13px;
  background: #262626;
  border: 1px solid var(--mobiled2935-line);
  color: #f3ead8;
}

.mobiled2935-help-answer strong {
  color: var(--mobiled2935-gold-hi);
}

.mobiled2935-help-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 2px;
}

.mobiled2935-help-action {
  min-height: 52px;
  padding: 9px 10px;
  background: #302409;
  border: 1px solid var(--mobiled2935-gold);
  color: var(--mobiled2935-text);
  text-align: left;
  font-weight: 700;
  line-height: 1.3;
  transition: background-color 0.15s linear, color 0.15s linear, border-color 0.15s linear;
}

.mobiled2935-help-action small {
  display: block;
  margin-top: 3px;
  color: var(--mobiled2935-muted);
  font-size: 11px;
  font-weight: 400;
}

.mobiled2935-help-action:hover {
  background: var(--mobiled2935-gold);
  color: var(--mobiled2935-on-gold);
}

.mobiled2935-help-action:hover small {
  color: #3a2c08;
}

.mobiled2935-help-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: helpstep;
}

.mobiled2935-help-steps li {
  counter-increment: helpstep;
  position: relative;
  min-height: 54px;
  margin: 0 0 10px;
  padding: 10px 10px 9px 45px;
  background: #303030;
  border: 1px solid var(--mobiled2935-line-soft);
  color: #e9e1d1;
}

.mobiled2935-help-steps li::before {
  content: counter(helpstep, decimal-leading-zero);
  position: absolute;
  left: 10px;
  top: 12px;
  color: var(--mobiled2935-gold-hi);
  font-family: var(--mobiled2935-font-head);
  font-size: 17px;
  font-weight: 700;
}

.mobiled2935-help-steps b {
  display: block;
  color: #fff;
  margin-bottom: 2px;
}

.mobiled2935-help-steps span {
  display: block;
  color: var(--mobiled2935-muted);
  font-size: 13px;
  line-height: 1.5;
}

.mobiled2935-help-checks {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobiled2935-help-checks li {
  margin: 0;
  padding: 9px 10px 9px 30px;
  position: relative;
  background: #303030;
  border-bottom: 1px solid var(--mobiled2935-line-soft);
  color: #e8dfce;
  font-size: 13.5px;
}

.mobiled2935-help-checks li::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 14px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--mobiled2935-gold);
}

.mobiled2935-help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.mobiled2935-help-table th,
.mobiled2935-help-table td {
  padding: 9px 8px;
  border: 1px solid var(--mobiled2935-line-soft);
  text-align: left;
  vertical-align: top;
}

.mobiled2935-help-table th {
  width: 34%;
  color: var(--mobiled2935-gold-hi);
  background: #2a2a2a;
  font-weight: 700;
}

.mobiled2935-help-table td {
  color: var(--mobiled2935-muted);
  background: #343434;
}

.mobiled2935-help-warning {
  margin: 12px 0 0;
  padding: 10px 11px;
  border-left: 3px solid var(--mobiled2935-warn);
  background: #332c1d;
  color: #e8dcc4;
  font-size: 13px;
}

.mobiled2935-help-faq {
  margin: 0;
}

.mobiled2935-help-faq details {
  margin: 0 0 7px;
  border: 1px solid var(--mobiled2935-line-soft);
  background: #303030;
}

.mobiled2935-help-faq summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 9px 11px;
  cursor: pointer;
  color: #f0d58e;
  font-weight: 700;
}

.mobiled2935-help-faq details p {
  margin: 0;
  padding: 0 11px 11px;
  color: var(--mobiled2935-muted);
  font-size: 13.5px;
}

.mobiled2935-help-duo {
  display: grid;
  gap: 9px;
}

.mobiled2935-help-duo > div {
  padding: 11px 12px;
  border-top: 2px solid var(--mobiled2935-gold);
  background: #313131;
}

.mobiled2935-help-duo h3 {
  color: var(--mobiled2935-gold-hi);
  margin-bottom: 5px;
}

.mobiled2935-help-duo p {
  margin: 0;
  color: var(--mobiled2935-muted);
  font-size: 13.5px;
}

@media (max-width: 339px) {
  .mobiled2935-help-actions { grid-template-columns: 1fr; }
  .mobiled2935-help-table { font-size: 12px; }
  .mobiled2935-help-table th,
  .mobiled2935-help-table td { padding: 8px 6px; }
}