/* ==========================================================================
   qs-88.homes - mobile canvas stylesheet
   Class prefix  : frame70f34-
   Palette       : #8B7355 / #228B22 / #36454F / #FAF0E6 / #1A1A1A
   Canvas        : 320-430px phone first, centered phone canvas on wide screens
   Design notes  : mono accents over regular body text, round buttons with
                   square cards, mixed large/small game cards, question-driven
                   rhythm, short-distance transitions, square high-contrast CTAs
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --frame70f34-bg: #1A1A1A;
  --frame70f34-bg-deep: #131313;
  --frame70f34-bg-outside: #0c0c0c;
  --frame70f34-panel: #36454F;
  --frame70f34-panel-2: #232C32;
  --frame70f34-panel-3: #2B3740;
  --frame70f34-line: #45535d;
  --frame70f34-line-soft: #3a464e;
  --frame70f34-text: #FAF0E6;
  --frame70f34-text-dim: #cfc4b6;
  --frame70f34-text-faint: #a99e8f;
  --frame70f34-green: #228B22;
  --frame70f34-green-hi: #2fb32f;
  --frame70f34-green-ink: #f4ffef;
  --frame70f34-bronze: #8B7355;
  --frame70f34-bronze-hi: #c9a87c;
  --frame70f34-font-mono: ui-monospace, "Cascadia Mono", "Roboto Mono", Menlo, Consolas, "Courier New", monospace;
  --frame70f34-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --frame70f34-top-h: 60px;
  --frame70f34-bottomnav-h: 64px;
  --frame70f34-canvas: 480px;
  --frame70f34-gap: 14px;
  --frame70f34-ease: cubic-bezier(0.33, 0.9, 0.35, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background: var(--frame70f34-bg-outside);
  color: var(--frame70f34-text);
  font-family: var(--frame70f34-font-sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

button {
  font-family: inherit;
  cursor: pointer;
}

a {
  color: var(--frame70f34-bronze-hi);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, p { margin: 0 0 10px; }

h2 { font-size: 19px; line-height: 1.35; letter-spacing: 0.1px; }

h3 { font-size: 15.5px; line-height: 1.4; }

:focus-visible {
  outline: 2px solid var(--frame70f34-green-hi);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Accessible skip link */
.frame70f34-skip {
  position: absolute;
  left: 10px;
  top: -48px;
  z-index: 100;
  background: var(--frame70f34-green);
  color: var(--frame70f34-green-ink);
  padding: 10px 14px;
  font-weight: 700;
  border-radius: 0 0 8px 8px;
  transition: top 0.18s var(--frame70f34-ease);
}

.frame70f34-skip:focus { top: 0; text-decoration: none; }

/* --------------------------------------------------------------------------
   3. Phone canvas shell
   -------------------------------------------------------------------------- */
.frame70f34-shell {
  position: relative;
  width: 100%;
  max-width: var(--frame70f34-canvas);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--frame70f34-bg);
  overflow-x: clip;
}

.frame70f34-noscroll { overflow: hidden; }

/* --------------------------------------------------------------------------
   4. Top brand bar (compact brand bar)
   -------------------------------------------------------------------------- */
.frame70f34-topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--frame70f34-canvas);
  height: var(--frame70f34-top-h);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  background: rgba(24, 24, 24, 0.97);
  border-bottom: 1px solid var(--frame70f34-line-soft);
  backdrop-filter: blur(6px);
}

.frame70f34-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--frame70f34-text);
}

.frame70f34-brand:hover { text-decoration: none; }

.frame70f34-brand img {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--frame70f34-bronze);
  flex: none;
}

.frame70f34-brandname {
  font-family: var(--frame70f34-font-mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1.5px;
  white-space: nowrap;
}

.frame70f34-topacts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

/* Buttons: round for regular actions, square for hard CTAs */
.frame70f34-btn {
  min-height: 44px;
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: transform 0.14s var(--frame70f34-ease), filter 0.14s var(--frame70f34-ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.frame70f34-btn:active { transform: scale(0.94); }

.frame70f34-btn-reg {
  background: var(--frame70f34-green);
  color: var(--frame70f34-green-ink);
  border-color: var(--frame70f34-green-hi);
}

.frame70f34-btn-login {
  background: transparent;
  color: var(--frame70f34-bronze-hi);
  border-color: var(--frame70f34-bronze);
}

.frame70f34-menubtn {
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--frame70f34-panel-2);
  border: 1px solid var(--frame70f34-line-soft);
  border-radius: 10px;
  color: var(--frame70f34-text);
  transition: transform 0.14s var(--frame70f34-ease);
}

.frame70f34-menubtn:active { transform: scale(0.92); }

/* --------------------------------------------------------------------------
   5. Side drawer menu + scrim
   -------------------------------------------------------------------------- */
.frame70f34-scrim {
  position: fixed;
  inset: 0;
  z-index: 58;
  background: rgba(8, 8, 8, 0.66);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s var(--frame70f34-ease), visibility 0.22s;
}

.frame70f34-scrim.frame70f34-open {
  opacity: 1;
  visibility: visible;
}

.frame70f34-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  width: min(86%, 330px);
  background: var(--frame70f34-bg-deep);
  border-left: 2px solid var(--frame70f34-bronze);
  transform: translateX(103%);
  transition: transform 0.26s var(--frame70f34-ease);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-bottom: calc(var(--frame70f34-bottomnav-h) + env(safe-area-inset-bottom, 0px) + 14px);
}

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

.frame70f34-drawer-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 12px;
  border-bottom: 1px dashed var(--frame70f34-line-soft);
}

.frame70f34-drawer-head img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--frame70f34-bronze);
}

.frame70f34-drawer-title {
  font-family: var(--frame70f34-font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.2px;
  margin-right: auto;
}

.frame70f34-drawerclose {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--frame70f34-line-soft);
  border-radius: 10px;
  color: var(--frame70f34-text);
}

.frame70f34-drawer-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px;
}

.frame70f34-drawer-cta .frame70f34-btn { width: 100%; }

.frame70f34-drawer-nav { padding: 4px 14px 18px; }

.frame70f34-drawer-label {
  font-family: var(--frame70f34-font-mono);
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--frame70f34-green-hi);
  margin: 14px 0 6px;
}

.frame70f34-drawer-nav a {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 10px 12px;
  margin: 2px 0;
  color: var(--frame70f34-text);
  background: var(--frame70f34-panel-2);
  border: 1px solid var(--frame70f34-line-soft);
  border-left: 3px solid transparent;
  font-size: 14px;
  border-radius: 0;
  transition: border-color 0.15s var(--frame70f34-ease), background 0.15s var(--frame70f34-ease);
}

.frame70f34-drawer-nav a:hover,
.frame70f34-drawer-nav a:focus-visible {
  text-decoration: none;
  background: var(--frame70f34-panel-3);
  border-left-color: var(--frame70f34-bronze-hi);
}

.frame70f34-drawer-nav a[aria-current="page"] {
  background: var(--frame70f34-text);
  color: #141414;
  font-weight: 700;
  border-left-color: var(--frame70f34-green);
}

/* --------------------------------------------------------------------------
   6. Main column + hero
   -------------------------------------------------------------------------- */
.frame70f34-main {
  padding: calc(var(--frame70f34-top-h) + 14px) var(--frame70f34-gap) calc(var(--frame70f34-bottomnav-h) + 26px + env(safe-area-inset-bottom, 0px));
}

.frame70f34-sec {
  margin: 26px 0;
  scroll-margin-top: calc(var(--frame70f34-top-h) + 10px);
}

.frame70f34-kicker {
  font-family: var(--frame70f34-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--frame70f34-green-hi);
  margin-bottom: 8px;
}

.frame70f34-herotitle {
  font-size: clamp(23px, 6.2vw, 29px);
  line-height: 1.24;
  letter-spacing: 0.2px;
  margin: 0 0 12px;
}

.frame70f34-lead {
  color: var(--frame70f34-text-dim);
  font-size: 14.5px;
}

.frame70f34-ctarow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 6px;
}

/* Square-corner high contrast CTA */
.frame70f34-cta {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--frame70f34-green);
  color: var(--frame70f34-green-ink);
  border: 1px solid var(--frame70f34-green-hi);
  border-radius: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: transform 0.14s var(--frame70f34-ease), filter 0.14s var(--frame70f34-ease);
}

.frame70f34-cta:hover {
  text-decoration: none;
  filter: brightness(1.08);
}

.frame70f34-cta:active { transform: scale(0.96); }

.frame70f34-cta2 {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--frame70f34-bronze-hi);
  border: 1px solid var(--frame70f34-bronze);
  border-radius: 0;
  font-size: 14.5px;
  font-weight: 700;
  transition: transform 0.14s var(--frame70f34-ease);
}

.frame70f34-cta2:hover { text-decoration: none; background: rgba(139, 115, 85, 0.14); }

.frame70f34-cta2:active { transform: scale(0.96); }

/* Mono stat strip */
.frame70f34-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0 4px;
}

.frame70f34-stat {
  background: var(--frame70f34-panel-2);
  border: 1px solid var(--frame70f34-line-soft);
  border-radius: 0;
  padding: 9px 10px;
  font-family: var(--frame70f34-font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--frame70f34-text-faint);
  text-align: center;
}

.frame70f34-stat b {
  display: block;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--frame70f34-text);
}

/* --------------------------------------------------------------------------
   7. Promo banner carousel
   -------------------------------------------------------------------------- */
.frame70f34-carousel {
  position: relative;
  margin: 18px 0 6px;
  border: 1px solid var(--frame70f34-line);
  border-radius: 0;
  background: var(--frame70f34-panel-2);
  overflow: hidden;
}

.frame70f34-cslide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--frame70f34-bg-deep);
  opacity: 0;
  visibility: hidden;
  transform: translateX(14px);
  transition: opacity 0.3s var(--frame70f34-ease), transform 0.3s var(--frame70f34-ease), visibility 0.3s;
}

.frame70f34-cslide.frame70f34-on {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.frame70f34-cslide img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.frame70f34-cdots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 7px;
  z-index: 2;
}

.frame70f34-cdot {
  width: 26px;
  height: 12px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--frame70f34-text);
  background: rgba(20, 20, 20, 0.55);
  transition: background 0.16s var(--frame70f34-ease), transform 0.16s var(--frame70f34-ease);
}

.frame70f34-cdot.frame70f34-on {
  background: var(--frame70f34-green-hi);
  border-color: var(--frame70f34-green-hi);
  transform: scaleX(1.18);
}

.frame70f34-cdot:active { transform: scale(0.9); }

/* --------------------------------------------------------------------------
   8. Category quick chips (anchor jump row)
   -------------------------------------------------------------------------- */
.frame70f34-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 0 10px;
  margin: 0 calc(-1 * var(--frame70f34-gap));
  padding-left: var(--frame70f34-gap);
  padding-right: var(--frame70f34-gap);
  scrollbar-width: none;
}

.frame70f34-chips::-webkit-scrollbar { display: none; }

.frame70f34-chip {
  flex: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-family: var(--frame70f34-font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--frame70f34-text-dim);
  background: var(--frame70f34-panel-2);
  border: 1px solid var(--frame70f34-line-soft);
  border-radius: 10px;
  white-space: nowrap;
  transition: background 0.15s var(--frame70f34-ease), color 0.15s var(--frame70f34-ease), transform 0.15s var(--frame70f34-ease);
}

.frame70f34-chip:hover {
  text-decoration: none;
  color: var(--frame70f34-text);
  background: var(--frame70f34-panel-3);
}

.frame70f34-chip:active { transform: scale(0.94); }

/* --------------------------------------------------------------------------
   9. Category sections + headings
   -------------------------------------------------------------------------- */
.frame70f34-sechead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.frame70f34-secnum {
  font-family: var(--frame70f34-font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--frame70f34-bronze-hi);
  letter-spacing: 1px;
  flex: none;
}

.frame70f34-cat h2 { margin: 0; }

.frame70f34-cat-count {
  font-family: var(--frame70f34-font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--frame70f34-green-hi);
  margin: 6px 0 8px;
}

.frame70f34-cat .frame70f34-lead { font-size: 14px; }

/* --------------------------------------------------------------------------
   10. Game grid: mixed large featured card + compact small cells
   -------------------------------------------------------------------------- */
.frame70f34-gfeat {
  display: grid;
  grid-template-columns: 104px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 12px 0;
  padding: 10px;
  background: linear-gradient(135deg, var(--frame70f34-panel-3), #1e1e1e 78%);
  border: 1px solid var(--frame70f34-bronze);
  border-radius: 0;
  text-align: left;
  color: var(--frame70f34-text);
  transition: transform 0.15s var(--frame70f34-ease), border-color 0.15s var(--frame70f34-ease);
}

.frame70f34-gfeat:active {
  transform: scale(0.97);
  border-color: var(--frame70f34-green-hi);
}

.frame70f34-gfeat img {
  width: 104px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--frame70f34-panel);
  border: 1px solid var(--frame70f34-line);
}

.frame70f34-gfeattag {
  display: block;
  font-family: var(--frame70f34-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--frame70f34-green-hi);
  margin-bottom: 4px;
}

.frame70f34-gfeat .frame70f34-gname {
  font-size: 16px;
  font-weight: 800;
  -webkit-line-clamp: 3;
  text-align: left;
}

.frame70f34-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.frame70f34-gcell {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 4px 8px;
  background: var(--frame70f34-panel-2);
  border: 1px solid var(--frame70f34-line-soft);
  border-radius: 0;
  color: var(--frame70f34-text);
  text-align: center;
  min-height: 44px;
  transition: transform 0.14s var(--frame70f34-ease), border-color 0.14s var(--frame70f34-ease), background 0.14s var(--frame70f34-ease);
}

.frame70f34-gcell:hover {
  border-color: var(--frame70f34-bronze-hi);
  background: var(--frame70f34-panel-3);
}

.frame70f34-gcell:active {
  transform: scale(0.93);
  border-color: var(--frame70f34-green-hi);
}

.frame70f34-gcell img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #1c2429;
}

.frame70f34-gname {
  font-size: 11px;
  line-height: 1.28;
  font-weight: 600;
  color: var(--frame70f34-text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.frame70f34-gcell:hover .frame70f34-gname { color: var(--frame70f34-text); }

/* --------------------------------------------------------------------------
   11. Reviews module
   -------------------------------------------------------------------------- */
.frame70f34-review {
  margin: 10px 0;
  padding: 12px 13px;
  background: var(--frame70f34-panel-2);
  border: 1px solid var(--frame70f34-line-soft);
  border-left: 3px solid var(--frame70f34-bronze);
  border-radius: 0;
}

.frame70f34-review p { font-size: 14px; color: var(--frame70f34-text-dim); margin: 0 0 8px; }

.frame70f34-review-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--frame70f34-font-mono);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--frame70f34-text-faint);
}

.frame70f34-review-name { color: var(--frame70f34-bronze-hi); font-weight: 700; }

.frame70f34-review-stars { color: var(--frame70f34-green-hi); letter-spacing: 2px; }

/* --------------------------------------------------------------------------
   12. Tricks module (numbered, mono markers)
   -------------------------------------------------------------------------- */
.frame70f34-trick {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
  padding: 11px 0;
  border-bottom: 1px dashed var(--frame70f34-line-soft);
}

.frame70f34-trick:last-child { border-bottom: 0; }

.frame70f34-trick-num {
  font-family: var(--frame70f34-font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--frame70f34-green-hi);
  border: 1px solid var(--frame70f34-line-soft);
  background: var(--frame70f34-panel-2);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.frame70f34-trick p { font-size: 14px; color: var(--frame70f34-text-dim); margin: 0; }

.frame70f34-trick b { color: var(--frame70f34-text); }

/* --------------------------------------------------------------------------
   13. Checklist module
   -------------------------------------------------------------------------- */
.frame70f34-checkitem {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--frame70f34-line-soft);
  font-size: 14px;
  color: var(--frame70f34-text-dim);
}

.frame70f34-checkitem:last-child { border-bottom: 0; }

.frame70f34-checkitem::before {
  content: "\2713";
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--frame70f34-font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--frame70f34-green-ink);
  background: var(--frame70f34-green);
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   14. Criteria + quick Q&A modules
   -------------------------------------------------------------------------- */
.frame70f34-crit {
  margin: 10px 0;
  padding: 12px 13px;
  background: var(--frame70f34-panel-2);
  border: 1px solid var(--frame70f34-line-soft);
  border-top: 3px solid var(--frame70f34-green);
  border-radius: 0;
}

.frame70f34-crit h3 { margin: 0 0 6px; color: var(--frame70f34-text); }

.frame70f34-crit p { font-size: 14px; color: var(--frame70f34-text-dim); margin: 0; }

.frame70f34-q {
  margin: 10px 0;
  padding: 12px 13px;
  border: 1px dashed var(--frame70f34-line-soft);
  border-radius: 0;
}

.frame70f34-q h3 { margin: 0 0 6px; font-family: var(--frame70f34-font-mono); font-size: 13.5px; letter-spacing: 0.2px; color: var(--frame70f34-bronze-hi); }

.frame70f34-q p { font-size: 14px; color: var(--frame70f34-text-dim); margin: 0; }

/* --------------------------------------------------------------------------
   15. Homepage extended footer
   order: brand > promotions > directory > disclaimer
   -------------------------------------------------------------------------- */
.frame70f34-xfoot {
  margin-top: 30px;
  padding: 16px 14px 14px;
  border: 1px solid var(--frame70f34-line-soft);
  border-top: 3px solid var(--frame70f34-bronze);
  background: var(--frame70f34-bg-deep);
  border-radius: 0;
}

.frame70f34-ftitle {
  font-family: var(--frame70f34-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--frame70f34-green-hi);
  margin: 0 0 8px;
}

.frame70f34-xfoot-brand p { font-size: 13.5px; color: var(--frame70f34-text-dim); }

/* Five distinct promo actions */
.frame70f34-xpromos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 12px 0;
}

.frame70f34-xpromo {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 13px;
  background: var(--frame70f34-panel-2);
  border: 1px solid var(--frame70f34-line-soft);
  border-left: 3px solid var(--frame70f34-green);
  border-radius: 0;
  color: var(--frame70f34-text);
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
  transition: transform 0.14s var(--frame70f34-ease), background 0.14s var(--frame70f34-ease);
}

.frame70f34-xpromo:hover { background: var(--frame70f34-panel-3); }

.frame70f34-xpromo:active { transform: scale(0.97); }

.frame70f34-xpromo span {
  font-family: var(--frame70f34-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--frame70f34-green-hi);
  flex: none;
}

/* Two-column page directory */
.frame70f34-xdir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin: 12px 0;
}

.frame70f34-xdir a {
  display: block;
  padding: 9px 10px;
  background: var(--frame70f34-panel-2);
  border: 1px solid var(--frame70f34-line-soft);
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--frame70f34-text);
  transition: background 0.15s var(--frame70f34-ease);
}

.frame70f34-xdir a:hover {
  text-decoration: none;
  background: var(--frame70f34-panel-3);
  border-color: var(--frame70f34-bronze);
}

.frame70f34-xdir small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--frame70f34-text-faint);
  margin-top: 2px;
}

/* Conditional disclaimer */
.frame70f34-xnote {
  padding: 11px 12px;
  border: 1px dashed var(--frame70f34-bronze);
  border-radius: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--frame70f34-text-faint);
}

.frame70f34-xnote b { color: var(--frame70f34-bronze-hi); }

/* --------------------------------------------------------------------------
   16. Copyright bar
   -------------------------------------------------------------------------- */
.frame70f34-foot {
  padding: 14px var(--frame70f34-gap) 6px;
  border-top: 1px solid var(--frame70f34-line-soft);
  text-align: center;
}

.frame70f34-foot p {
  font-family: var(--frame70f34-font-mono);
  font-size: 11px;
  letter-spacing: 0.8px;
  color: var(--frame70f34-text-faint);
  margin: 0;
}

/* --------------------------------------------------------------------------
   17. Mobile bottom nav (segmented action bar)
   -------------------------------------------------------------------------- */
.frame70f34-bottomnav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--frame70f34-canvas);
  height: calc(var(--frame70f34-bottomnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(20, 20, 20, 0.98);
  border-top: 1px solid var(--frame70f34-line);
  backdrop-filter: blur(6px);
}

.frame70f34-bn-item {
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px 5px;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--frame70f34-text-dim);
  text-decoration: none;
  transition: transform 0.13s var(--frame70f34-ease);
}

.frame70f34-bn-item:hover { text-decoration: none; }

.frame70f34-bn-item:active { transform: scale(0.9); }

.frame70f34-bn-item svg { flex: none; }

/* Active state: contrast inversion */
.frame70f34-bn-on {
  background: var(--frame70f34-text);
  color: #141414;
  border-radius: 10px 10px 0 0;
}

.frame70f34-bn-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.1;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   18. Breakpoints
   -------------------------------------------------------------------------- */
/* Small phones: keep everything readable inside a 320px canvas */
@media (max-width: 430px) {
  .frame70f34-stats { grid-template-columns: 1fr 1fr; }

  .frame70f34-gname { font-size: 10.5px; }

  .frame70f34-gfeat { grid-template-columns: 88px 1fr; gap: 10px; }

  .frame70f34-gfeat img { width: 88px; }

  .frame70f34-btn { padding: 8px 10px; font-size: 12.5px; }

  .frame70f34-xdir { grid-template-columns: 1fr; }
}

/* Larger phones: wider game name text and 5-column game grid */
@media (min-width: 375px) {
  .frame70f34-gname { font-size: 11.5px; }

  .frame70f34-lead { font-size: 15px; }
}

@media (min-width: 400px) {
  .frame70f34-grid { grid-template-columns: repeat(5, 1fr); gap: 9px; }
}

/* Phone canvas widens slightly inside its frame */
@media (min-width: 431px) {
  .frame70f34-stats { grid-template-columns: repeat(4, 1fr); }

  .frame70f34-xdir { grid-template-columns: 1fr 1fr; }

  .frame70f34-xpromos { grid-template-columns: 1fr 1fr; }
}

/* Wide screens: keep the centered phone canvas with framed edges */
@media (min-width: 520px) {
  .frame70f34-shell {
    box-shadow: 0 0 0 1px #262626, 0 18px 60px rgba(0, 0, 0, 0.55);
  }
}

/* --------------------------------------------------------------------------
   19. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   20. Help-page patterns: tips signal board and guided route
   -------------------------------------------------------------------------- */
.frame70f34-helpintro {
  padding: 14px;
  background: linear-gradient(145deg, var(--frame70f34-panel-3), var(--frame70f34-bg-deep));
  border: 1px solid var(--frame70f34-bronze);
  border-left: 4px solid var(--frame70f34-green-hi);
}

.frame70f34-helpintro p:last-child { margin-bottom: 0; }

.frame70f34-signalrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 14px 0 4px;
}

.frame70f34-signal {
  min-height: 78px;
  padding: 9px 7px;
  background: var(--frame70f34-panel-2);
  border: 1px solid var(--frame70f34-line-soft);
  text-align: center;
}

.frame70f34-signal strong {
  display: block;
  margin-bottom: 4px;
  color: var(--frame70f34-green-hi);
  font-family: var(--frame70f34-font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.frame70f34-signal span { color: var(--frame70f34-text-dim); font-size: 12px; line-height: 1.35; }

.frame70f34-termgrid {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.frame70f34-term {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  padding: 10px;
  background: var(--frame70f34-panel-2);
  border: 1px solid var(--frame70f34-line-soft);
}

.frame70f34-term b { color: var(--frame70f34-bronze-hi); font-family: var(--frame70f34-font-mono); font-size: 12px; }
.frame70f34-term p { margin: 0; color: var(--frame70f34-text-dim); font-size: 13.5px; }

.frame70f34-checkpanel {
  padding: 12px 13px;
  background: repeating-linear-gradient(135deg, rgba(54, 69, 79, .82) 0 12px, rgba(43, 55, 64, .82) 12px 24px);
  border: 1px solid var(--frame70f34-line);
}

.frame70f34-checkpanel ol { counter-reset: helpcheck; }
.frame70f34-checkpanel li {
  counter-increment: helpcheck;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 9px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px dashed var(--frame70f34-line-soft);
  color: var(--frame70f34-text-dim);
  font-size: 14px;
}
.frame70f34-checkpanel li:last-child { border-bottom: 0; }
.frame70f34-checkpanel li::before {
  content: counter(helpcheck, decimal-leading-zero);
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--frame70f34-bg);
  background: var(--frame70f34-bronze-hi);
  font-family: var(--frame70f34-font-mono);
  font-size: 11px;
  font-weight: 800;
}

.frame70f34-alert {
  padding: 12px 13px;
  border: 1px solid var(--frame70f34-bronze);
  border-radius: 10px;
  background: rgba(139, 115, 85, .13);
  color: var(--frame70f34-text-dim);
  font-size: 13.5px;
}
.frame70f34-alert b { color: var(--frame70f34-bronze-hi); }

.frame70f34-factrail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.frame70f34-fact {
  padding: 11px 10px;
  border-top: 3px solid var(--frame70f34-green);
  background: var(--frame70f34-panel-2);
  color: var(--frame70f34-text-dim);
  font-size: 13px;
}
.frame70f34-fact b { display: block; margin-bottom: 3px; color: var(--frame70f34-text); }

.frame70f34-route {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: route;
}
.frame70f34-route li {
  counter-increment: route;
  position: relative;
  margin-left: 16px;
  padding: 0 0 18px 28px;
  border-left: 1px solid var(--frame70f34-bronze);
}
.frame70f34-route li:last-child { padding-bottom: 3px; }
.frame70f34-route li::before {
  content: counter(route);
  position: absolute;
  left: -15px;
  top: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--frame70f34-green-hi);
  border-radius: 50%;
  background: var(--frame70f34-bg);
  color: var(--frame70f34-green-hi);
  font-family: var(--frame70f34-font-mono);
  font-size: 12px;
  font-weight: 800;
}
.frame70f34-route h3 { margin: 0 0 4px; color: var(--frame70f34-text); }
.frame70f34-route p { color: var(--frame70f34-text-dim); font-size: 14px; }

.frame70f34-paytable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 12.5px;
}
.frame70f34-paytable th,
.frame70f34-paytable td { padding: 9px 7px; border: 1px solid var(--frame70f34-line-soft); text-align: left; vertical-align: top; }
.frame70f34-paytable th { color: var(--frame70f34-green-hi); background: var(--frame70f34-panel-2); font-family: var(--frame70f34-font-mono); font-size: 10.5px; letter-spacing: .7px; text-transform: uppercase; }
.frame70f34-paytable td { color: var(--frame70f34-text-dim); }

.frame70f34-branchgrid {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}
.frame70f34-branch {
  padding: 11px 12px;
  background: var(--frame70f34-panel-2);
  border-right: 3px solid var(--frame70f34-green);
}
.frame70f34-branch h3 { margin: 0 0 5px; color: var(--frame70f34-bronze-hi); }
.frame70f34-branch p { margin: 0; color: var(--frame70f34-text-dim); font-size: 13.5px; }

.frame70f34-qa details {
  border-bottom: 1px dashed var(--frame70f34-line-soft);
  padding: 10px 0;
}
.frame70f34-qa summary { cursor: pointer; color: var(--frame70f34-bronze-hi); font-weight: 700; min-height: 44px; padding: 9px 0; }
.frame70f34-qa p { color: var(--frame70f34-text-dim); font-size: 13.5px; padding: 3px 0 0 14px; }

.frame70f34-proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.frame70f34-proscons section { padding: 11px 10px; background: var(--frame70f34-panel-2); border: 1px solid var(--frame70f34-line-soft); }
.frame70f34-proscons h3 { margin: 0 0 6px; color: var(--frame70f34-green-hi); }
.frame70f34-proscons ul { list-style: disc; padding-left: 16px; color: var(--frame70f34-text-dim); font-size: 13px; }
.frame70f34-proscons li { margin: 5px 0; }

@media (max-width: 350px) {
  .frame70f34-signalrow, .frame70f34-proscons { grid-template-columns: 1fr; }
  .frame70f34-term { grid-template-columns: 1fr; gap: 4px; }
  .frame70f34-paytable { font-size: 11.5px; }
}