/* ==========================================================================
   111f.click — surface-native basefile stylesheet
   File   : css/surface-native-d5730c.css
   Prefix : surface30c34-   (all classes and custom properties)
   Canvas : mobile-first, 320-430px, centered phone frame on wide screens
   Palette: #273746 ink / #008000 leaf / #2E8B57 pine / #A0522D clay
            #F5F5F5 paper / #BDC3C7 mist
   ========================================================================== */

/* ---------- custom properties ---------- */
:root {
  --surface30c34-ink: #273746;
  --surface30c34-ink-deep: #1b2833;
  --surface30c34-ink-soft: #223140;
  --surface30c34-leaf: #008000;
  --surface30c34-pine: #2e8b57;
  --surface30c34-clay: #a0522d;
  --surface30c34-paper: #f5f5f5;
  --surface30c34-mist: #bdc3c7;
  --surface30c34-panel: rgba(245, 245, 245, 0.055);
  --surface30c34-panel-strong: rgba(245, 245, 245, 0.1);
  --surface30c34-line: rgba(189, 195, 199, 0.22);
  --surface30c34-line-soft: rgba(189, 195, 199, 0.13);
  --surface30c34-shadow-card: 0 10px 22px rgba(9, 14, 19, 0.45);
  --surface30c34-radius-card: 14px;
  --surface30c34-radius-soft: 10px;
  --surface30c34-radius-pill: 999px;
  --surface30c34-font-head: "Baloo Da 2", "Hind Siliguri", "Noto Sans Bengali", system-ui, sans-serif;
  --surface30c34-font-body: "Hind Siliguri", "Noto Sans Bengali", system-ui, -apple-system, sans-serif;
  --surface30c34-dock-h: 68px;
  --surface30c34-topbar-h: 64px;
}

/* ---------- reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: #12181f;
  color: var(--surface30c34-paper);
  font-family: var(--surface30c34-font-body);
  font-size: 14.5px;
  line-height: 1.7;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

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

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

a { color: var(--surface30c34-mist); }

:focus-visible {
  outline: 2px solid var(--surface30c34-pine);
  outline-offset: 2px;
  border-radius: 4px;
}

/* phone canvas: everything lives inside a 430px column */
.surface30c34-page {
  position: relative;
  max-width: 430px;
  margin-inline: auto;
  background: var(--surface30c34-ink);
  min-height: 100dvh;
  overflow-x: clip;
}

@media (min-width: 430px) {
  .surface30c34-page {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 26px 70px rgba(0, 0, 0, 0.55);
  }
}

/* skip link */
.surface30c34-skip {
  position: absolute;
  left: 10px;
  top: -52px;
  z-index: 200;
  background: var(--surface30c34-leaf);
  color: var(--surface30c34-paper);
  padding: 10px 16px;
  border-radius: var(--surface30c34-radius-soft);
  text-decoration: none;
  font-weight: 600;
  transition: top 0.2s ease;
}

.surface30c34-skip:focus { top: 8px; }

/* ---------- asymmetric top bar ---------- */
.surface30c34-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  max-width: 430px;
  margin-inline: auto;
  min-height: var(--surface30c34-topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 9px 12px;
  background: linear-gradient(180deg, rgba(27, 40, 51, 0.99), rgba(27, 40, 51, 0.94));
  border-bottom: 1px solid var(--surface30c34-line);
  backdrop-filter: blur(10px);
}

/* brand cluster — logo breaks the bar baseline for an asymmetric feel */
.surface30c34-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
  text-decoration: none;
  color: var(--surface30c34-paper);
  min-height: 46px;
}

.surface30c34-brand-logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--surface30c34-pine);
  box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.18);
  transform: translateY(5px);
  background: var(--surface30c34-ink-deep);
}

.surface30c34-brand-name {
  font-family: var(--surface30c34-font-head);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.4px;
  transform: translateY(2px);
}

.surface30c34-brand-name::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--surface30c34-clay), transparent);
}

/* segmented Register/Login control (compact, split by a divider) */
.surface30c34-duo {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--surface30c34-pine);
  border-radius: var(--surface30c34-radius-soft);
  overflow: hidden;
  background: rgba(0, 128, 0, 0.12);
  flex: 0 0 auto;
}

.surface30c34-duo-btn {
  min-height: 38px;
  padding: 7px 12px;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  transition: background 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}

.surface30c34-duo-btn:active { transform: scale(0.96); }

.surface30c34-duo-btn--primary {
  background: var(--surface30c34-leaf);
  color: var(--surface30c34-paper);
}

.surface30c34-duo-btn--primary:hover { background: #009000; }

.surface30c34-duo-sep {
  width: 1px;
  background: var(--surface30c34-line);
  flex: 0 0 1px;
}

/* menu trigger icon button */
.surface30c34-menu-trigger {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--surface30c34-line);
  border-radius: var(--surface30c34-radius-soft);
  background: var(--surface30c34-panel);
  color: var(--surface30c34-paper);
  flex: 0 0 auto;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.surface30c34-menu-trigger:hover,
.surface30c34-menu-trigger:active {
  border-color: var(--surface30c34-clay);
  background: var(--surface30c34-panel-strong);
}

.surface30c34-menu-trigger svg { width: 21px; height: 21px; }

/* ---------- slide-up route sheet (mobile menu) ---------- */
.surface30c34-veil {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(8, 12, 16, 0.62);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.26s ease, visibility 0.26s ease;
  border: 0;
  padding: 0;
}

.surface30c34-veil--show { opacity: 1; visibility: visible; }

.surface30c34-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 130;
  max-width: 430px;
  margin-inline: auto;
  max-height: 80dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, var(--surface30c34-ink-soft), var(--surface30c34-ink-deep));
  border: 1px solid var(--surface30c34-line);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  padding: 12px 14px calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(105%);
  visibility: hidden;
  transition: transform 0.34s cubic-bezier(0.22, 0.9, 0.32, 1), visibility 0.34s ease;
  box-shadow: 0 -18px 48px rgba(5, 9, 13, 0.55);
}

.surface30c34-sheet--show {
  transform: translateY(0);
  visibility: visible;
}

.surface30c34-sheet-grip {
  width: 44px;
  height: 4px;
  border-radius: 4px;
  background: var(--surface30c34-line);
  margin: 2px auto 10px;
}

.surface30c34-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.surface30c34-sheet-title {
  margin: 0;
  font-family: var(--surface30c34-font-head);
  font-size: 17px;
  font-weight: 600;
}

.surface30c34-sheet-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--surface30c34-line);
  background: var(--surface30c34-panel);
  color: var(--surface30c34-paper);
  display: grid;
  place-items: center;
}

.surface30c34-sheet-close svg { width: 16px; height: 16px; }

.surface30c34-sheet-group { margin-top: 12px; }

.surface30c34-sheet-label {
  margin: 0 2px 7px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--surface30c34-mist);
  opacity: 0.85;
}

.surface30c34-sheet-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.surface30c34-sheet-link {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 9px 11px;
  border: 1px solid var(--surface30c34-line-soft);
  border-radius: var(--surface30c34-radius-soft);
  background: var(--surface30c34-panel);
  text-decoration: none;
  color: var(--surface30c34-paper);
  font-size: 13.5px;
  font-weight: 500;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.surface30c34-sheet-link:hover,
.surface30c34-sheet-link:focus-visible {
  border-color: var(--surface30c34-pine);
  background: var(--surface30c34-panel-strong);
  transform: translateY(-1px);
}

.surface30c34-sheet-link--wide { grid-column: 1 / -1; }

.surface30c34-sheet-link--on {
  border-color: var(--surface30c34-clay);
  background: rgba(160, 82, 45, 0.16);
  font-weight: 700;
}

.surface30c34-sheet-ico {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--surface30c34-mist);
}

.surface30c34-sheet-link--on .surface30c34-sheet-ico { color: var(--surface30c34-clay); }

/* ---------- main column ---------- */
.surface30c34-main {
  padding-top: calc(var(--surface30c34-topbar-h) + 12px);
  /* keep clear of the fixed bottom dock */
  padding-bottom: calc(var(--surface30c34-dock-h) + 26px + env(safe-area-inset-bottom, 0px));
}

/* ---------- intro / H1 block ---------- */
.surface30c34-intro {
  padding: 4px 14px 2px;
}

.surface30c34-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--surface30c34-radius-pill);
  border: 1px solid rgba(160, 82, 45, 0.55);
  background: rgba(160, 82, 45, 0.14);
  color: #e8c4a8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  margin-bottom: 9px;
}

.surface30c34-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--surface30c34-clay);
}

.surface30c34-title {
  margin: 0 0 8px;
  font-family: var(--surface30c34-font-head);
  font-size: clamp(21px, 6.2vw, 26px);
  line-height: 1.3;
  font-weight: 700;
  color: var(--surface30c34-paper);
}

.surface30c34-lead {
  margin: 0 0 12px;
  color: var(--surface30c34-mist);
  font-size: 14px;
}

.surface30c34-lead strong { color: var(--surface30c34-paper); }

/* segmented in-body CTA */
.surface30c34-duo--cta {
  border-color: var(--surface30c34-leaf);
  background: rgba(0, 128, 0, 0.1);
}

.surface30c34-duo--cta .surface30c34-duo-btn {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 14px;
  flex: 1 1 auto;
}

/* ---------- hero carousel ---------- */
.surface30c34-hero {
  position: relative;
  margin: 12px 12px 4px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--surface30c34-line);
  background: var(--surface30c34-ink-deep);
}

.surface30c34-hero-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.surface30c34-hero-track::-webkit-scrollbar { display: none; }

.surface30c34-hero-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  scroll-snap-align: center;
  text-align: left;
}

.surface30c34-hero-slide img {
  width: 100%;
  height: clamp(178px, 50vw, 224px);
  object-fit: cover;
}

.surface30c34-hero-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 30px 13px 12px;
  background: linear-gradient(180deg, rgba(13, 20, 27, 0) 8%, rgba(13, 20, 27, 0.88) 78%);
}

.surface30c34-hero-cap-txt { min-width: 0; }

.surface30c34-hero-kicker {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9fd8b4;
  margin-bottom: 2px;
}

.surface30c34-hero-cap h2,
.surface30c34-hero-cap p {
  margin: 0;
  color: var(--surface30c34-paper);
}

.surface30c34-hero-cap h2 {
  font-family: var(--surface30c34-font-head);
  font-size: 16.5px;
  line-height: 1.3;
  font-weight: 600;
}

.surface30c34-hero-cap p { font-size: 11.5px; color: var(--surface30c34-mist); }

.surface30c34-hero-chip {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 8px 13px;
  border-radius: var(--surface30c34-radius-pill);
  border: 1px solid rgba(245, 245, 245, 0.35);
  background: rgba(0, 128, 0, 0.82);
  color: var(--surface30c34-paper);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 0.18s ease, background 0.18s ease;
}

.surface30c34-hero-chip:active { transform: scale(0.95); }

.surface30c34-hero-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 8px;
  display: flex;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 2;
}

.surface30c34-hero-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: var(--surface30c34-radius-pill);
  background: rgba(245, 245, 245, 0.38);
  transition: width 0.24s ease, background 0.24s ease;
}

.surface30c34-hero-dot--on {
  width: 20px;
  background: var(--surface30c34-pine);
}

/* ---------- content sections ---------- */
.surface30c34-block {
  margin: 22px 12px 0;
  padding: 15px 13px 16px;
  border: 1px solid var(--surface30c34-line-soft);
  border-radius: var(--surface30c34-radius-card);
  background: var(--surface30c34-panel);
}

.surface30c34-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.surface30c34-block-head h2 {
  margin: 0;
  font-family: var(--surface30c34-font-head);
  font-size: 18.5px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--surface30c34-paper);
}

.surface30c34-count {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: var(--surface30c34-radius-pill);
  background: rgba(46, 139, 87, 0.18);
  border: 1px solid rgba(46, 139, 87, 0.45);
  color: #9fd8b4;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.surface30c34-note {
  margin: 4px 0 12px;
  font-size: 13px;
  color: var(--surface30c34-mist);
}

.surface30c34-note a {
  color: #8fd4a8;
  font-weight: 600;
  text-decoration-color: rgba(143, 212, 168, 0.5);
}

/* ---------- game grid (compact square catalog) ---------- */
.surface30c34-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 7px;
}

@media (min-width: 375px) {
  .surface30c34-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px 9px;
  }
}

.surface30c34-game {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 5px 5px 7px;
  border: 1px solid var(--surface30c34-line-soft);
  border-radius: 12px;
  background: var(--surface30c34-ink-soft);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.surface30c34-game:hover,
.surface30c34-game:focus-visible {
  transform: translateY(-3px); /* card lift */
  border-color: rgba(46, 139, 87, 0.7);
  box-shadow: var(--surface30c34-shadow-card);
}

.surface30c34-game:active { transform: translateY(-1px) scale(0.98); }

.surface30c34-game-frame {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface30c34-ink-deep);
}

.surface30c34-game-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.surface30c34-game-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1.35;
  font-weight: 500;
  text-align: center;
  color: var(--surface30c34-paper);
  min-height: 2.7em;
}

/* ---------- feature tiles ---------- */
.surface30c34-tiles {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.surface30c34-tile {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 11px 11px 12px;
  border: 1px solid var(--surface30c34-line-soft);
  border-radius: var(--surface30c34-radius-soft);
  background: var(--surface30c34-ink-soft);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.surface30c34-tile:hover { transform: translateY(-2px); border-color: rgba(160, 82, 45, 0.55); }

.surface30c34-tile-ico {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(46, 139, 87, 0.16);
  color: #8fd4a8;
}

.surface30c34-tile-ico svg { width: 16px; height: 16px; }

.surface30c34-tile h3 {
  margin: 0 0 2px;
  font-family: var(--surface30c34-font-head);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--surface30c34-paper);
}

.surface30c34-tile p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--surface30c34-mist);
}

/* mini comparison strip */
.surface30c34-compare {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.surface30c34-compare-cell {
  padding: 9px 9px 10px;
  border-radius: var(--surface30c34-radius-soft);
  border: 1px dashed var(--surface30c34-line);
  background: rgba(39, 55, 70, 0.55);
  text-align: center;
}

.surface30c34-compare-cell strong {
  display: block;
  font-family: var(--surface30c34-font-head);
  font-size: 12.5px;
  color: #e8c4a8;
  margin-bottom: 3px;
}

.surface30c34-compare-cell span {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: var(--surface30c34-mist);
}

/* ---------- reviews ---------- */
.surface30c34-reviews {
  list-style: none;
  display: flex;
  gap: 10px;
  margin: 12px 0 0;
  padding: 2px 2px 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.surface30c34-reviews::-webkit-scrollbar { display: none; }

.surface30c34-review {
  flex: 0 0 84%;
  scroll-snap-align: start;
  padding: 12px 12px 13px;
  border: 1px solid var(--surface30c34-line-soft);
  border-radius: var(--surface30c34-radius-soft);
  background: var(--surface30c34-ink-soft);
}

@media (min-width: 375px) {
  .surface30c34-review { flex: 0 0 68%; }
}

.surface30c34-review-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
}

.surface30c34-review-ava {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--surface30c34-font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--surface30c34-ink-deep);
  background: linear-gradient(135deg, var(--surface30c34-mist), #dfe6e9);
}

.surface30c34-review-name { font-size: 13px; font-weight: 700; color: var(--surface30c34-paper); }

.surface30c34-review-meta { font-size: 11px; color: var(--surface30c34-mist); }

.surface30c34-stars {
  color: #e8c4a8;
  font-size: 12px;
  letter-spacing: 2px;
  margin-left: auto;
}

.surface30c34-review p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--surface30c34-mist);
}

.surface30c34-review-foot {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--surface30c34-line-soft);
  font-size: 11px;
  color: rgba(189, 195, 199, 0.75);
}

/* ---------- app download band ---------- */
.surface30c34-appband {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.surface30c34-appband-art {
  border-radius: var(--surface30c34-radius-soft);
  border: 1px solid var(--surface30c34-line);
  overflow: hidden;
  background: var(--surface30c34-ink-deep);
}

.surface30c34-appband-art img { width: 100%; height: 96px; object-fit: cover; }

.surface30c34-appsteps {
  list-style: none;
  margin: 8px 0 10px;
  padding: 0;
  display: grid;
  gap: 7px;
}

.surface30c34-appstep {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--surface30c34-mist);
}

.surface30c34-appstep b { color: var(--surface30c34-paper); }

.surface30c34-appnum {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(160, 82, 45, 0.25);
  border: 1px solid rgba(160, 82, 45, 0.6);
  color: #e8c4a8;
  font-size: 11px;
  font-weight: 700;
  margin-top: 2px;
}

/* ---------- offers ---------- */
.surface30c34-offers {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.surface30c34-offer {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border: 1px solid var(--surface30c34-line-soft);
  border-radius: var(--surface30c34-radius-soft);
  background: var(--surface30c34-ink-soft);
}

.surface30c34-offer-ico {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(0, 128, 0, 0.16);
  border: 1px solid rgba(46, 139, 87, 0.45);
  color: #9fd8b4;
}

.surface30c34-offer-ico svg { width: 18px; height: 18px; }

.surface30c34-offer-body { min-width: 0; flex: 1 1 auto; }

.surface30c34-offer-body h3 {
  margin: 0 0 2px;
  font-family: var(--surface30c34-font-head);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--surface30c34-paper);
}

.surface30c34-offer-body p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--surface30c34-mist);
}

.surface30c34-offer-btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 13px;
  border: 0;
  border-radius: var(--surface30c34-radius-soft);
  background: var(--surface30c34-leaf);
  color: var(--surface30c34-paper);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.18s ease, transform 0.18s ease;
}

.surface30c34-offer-btn:hover { background: #009000; }

.surface30c34-offer-btn:active { transform: scale(0.95); }

/* ---------- question cards ---------- */
.surface30c34-qa {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.surface30c34-qa-item {
  border: 1px solid var(--surface30c34-line-soft);
  border-left: 3px solid var(--surface30c34-clay);
  border-radius: var(--surface30c34-radius-soft);
  background: var(--surface30c34-ink-soft);
  padding: 11px 12px 12px;
}

.surface30c34-qa-item h3 {
  margin: 0 0 5px;
  font-family: var(--surface30c34-font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--surface30c34-paper);
  line-height: 1.4;
}

.surface30c34-qa-item p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--surface30c34-mist);
}

/* ---------- step line ---------- */
.surface30c34-steps {
  list-style: none;
  counter-reset: surface30c34-step;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.surface30c34-step {
  counter-increment: surface30c34-step;
  position: relative;
  padding: 0 0 13px 36px;
}

.surface30c34-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 2px;
  width: 2px;
  background: var(--surface30c34-line-soft);
}

.surface30c34-step::after {
  content: counter(surface30c34-step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(46, 139, 87, 0.2);
  border: 1px solid rgba(46, 139, 87, 0.6);
  color: #9fd8b4;
  font-family: var(--surface30c34-font-head);
  font-size: 13px;
  font-weight: 700;
}

.surface30c34-step h3 {
  margin: 0 0 2px;
  font-family: var(--surface30c34-font-head);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--surface30c34-paper);
}

.surface30c34-step p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--surface30c34-mist);
}

/* ---------- homepage extended footer ---------- */
.surface30c34-homefoot {
  margin: 26px 12px 0;
  padding: 15px 13px;
  border: 1px solid var(--surface30c34-line-soft);
  border-radius: var(--surface30c34-radius-card);
  background: linear-gradient(180deg, rgba(34, 49, 64, 0.9), rgba(27, 40, 51, 0.9));
}

.surface30c34-homefoot-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.surface30c34-homefoot-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--surface30c34-pine);
}

.surface30c34-homefoot-brand h2 {
  margin: 0;
  font-family: var(--surface30c34-font-head);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--surface30c34-paper);
}

.surface30c34-homefoot-brand small {
  display: block;
  font-size: 11px;
  color: var(--surface30c34-mist);
  font-weight: 400;
}

.surface30c34-homefoot-blurb {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--surface30c34-mist);
}

/* horizontal shortcut rail — 7 promotion actions */
.surface30c34-rail {
  display: flex;
  gap: 8px;
  margin: 13px 0 0;
  padding: 2px 2px 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.surface30c34-rail::-webkit-scrollbar { display: none; }

.surface30c34-rail-btn {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 9px 14px;
  border-radius: var(--surface30c34-radius-pill);
  border: 1px solid rgba(46, 139, 87, 0.55);
  background: rgba(0, 128, 0, 0.14);
  color: var(--surface30c34-paper);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.surface30c34-rail-btn:hover {
  background: rgba(0, 128, 0, 0.3);
  border-color: var(--surface30c34-pine);
  transform: translateY(-2px);
}

.surface30c34-rail-btn:active { transform: scale(0.96); }

.surface30c34-rail-btn svg { width: 15px; height: 15px; color: #9fd8b4; }

.surface30c34-rail-btn--clay {
  border-color: rgba(160, 82, 45, 0.6);
  background: rgba(160, 82, 45, 0.16);
}

.surface30c34-rail-btn--clay svg { color: #e8c4a8; }

/* page directory */
.surface30c34-dir-label {
  margin: 15px 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--surface30c34-mist);
  opacity: 0.85;
}

.surface30c34-dir {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.surface30c34-dir a {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 46px;
  justify-content: center;
  padding: 8px 10px;
  border-radius: var(--surface30c34-radius-soft);
  border: 1px solid var(--surface30c34-line-soft);
  background: var(--surface30c34-panel);
  text-decoration: none;
  color: var(--surface30c34-paper);
  font-size: 12.5px;
  font-weight: 600;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.surface30c34-dir a:hover,
.surface30c34-dir a:focus-visible {
  border-color: var(--surface30c34-clay);
  transform: translateY(-1px);
}

.surface30c34-dir a small {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--surface30c34-mist);
}

/* responsible entertainment disclaimer */
.surface30c34-disclaimer {
  margin: 15px 0 0;
  padding: 11px 12px;
  border-radius: var(--surface30c34-radius-soft);
  border: 1px dashed rgba(160, 82, 45, 0.55);
  background: rgba(160, 82, 45, 0.09);
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(189, 195, 199, 0.92);
}

.surface30c34-disclaimer strong { color: #e8c4a8; }

/* ---------- common footer ---------- */
.surface30c34-footer {
  margin-top: 18px;
  padding: 14px 16px 10px;
  border-top: 1px solid var(--surface30c34-line-soft);
  text-align: center;
}

.surface30c34-copy {
  margin: 0;
  font-size: 11.5px;
  color: rgba(189, 195, 199, 0.72);
}

/* ---------- layered bottom dock ---------- */
.surface30c34-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  max-width: 430px;
  margin-inline: auto;
  background: linear-gradient(180deg, rgba(27, 40, 51, 0.97), rgba(20, 30, 39, 0.99));
  border-top: 1px solid var(--surface30c34-line);
  backdrop-filter: blur(10px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.surface30c34-dock-inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  min-height: var(--surface30c34-dock-h);
}

/* sliding accent indicator on the layered top edge */
.surface30c34-dock-indicator {
  position: absolute;
  top: -1px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--surface30c34-pine), var(--surface30c34-leaf));
  transition: left 0.3s cubic-bezier(0.25, 0.9, 0.35, 1), width 0.3s cubic-bezier(0.25, 0.9, 0.35, 1);
}

.surface30c34-dock-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  padding: 8px 2px 7px;
  border: 0;
  background: none;
  text-decoration: none;
  color: var(--surface30c34-mist);
  transition: color 0.2s ease;
}

.surface30c34-dock-item:active { transform: translateY(1px); }

.surface30c34-dock-ico { width: 22px; height: 22px; }

.surface30c34-dock-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-align: center;
  line-height: 1.2;
}

.surface30c34-dock-item--on .surface30c34-dock-label {
  color: var(--surface30c34-paper);
  font-weight: 700; /* label emphasis for the active tab */
}

.surface30c34-dock-item--on .surface30c34-dock-ico { color: #9fd8b4; }

.surface30c34-dock-item--promo .surface30c34-dock-ico { color: #e8c4a8; }

.surface30c34-dock-item--promo .surface30c34-dock-label { color: #e8c4a8; }

/* ---------- helpers ---------- */
.surface30c34-noscroll { overflow: hidden; }

html.surface30c34-noscroll { overflow: hidden; }

.surface30c34-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

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

/* ---------- help pages: practical reading patterns ---------- */
.surface30c34-help-main { padding-top: calc(var(--surface30c34-topbar-h) + 14px); }
.surface30c34-help-intro { padding: 6px 14px 4px; }
.surface30c34-help-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  border: 1px solid rgba(46, 139, 87, 0.55);
  border-radius: var(--surface30c34-radius-pill);
  color: #9fd8b4;
  background: rgba(46, 139, 87, 0.13);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.surface30c34-help-title {
  margin: 0 0 8px;
  font-family: var(--surface30c34-font-head);
  font-size: clamp(22px, 6.2vw, 27px);
  line-height: 1.28;
  color: var(--surface30c34-paper);
}
.surface30c34-help-lead { margin: 0; color: var(--surface30c34-mist); font-size: 14px; }
.surface30c34-help-lead strong { color: var(--surface30c34-paper); }
.surface30c34-help-panel {
  margin: 18px 12px 0;
  padding: 15px 13px 16px;
  border: 1px solid var(--surface30c34-line-soft);
  border-radius: var(--surface30c34-radius-card);
  background: linear-gradient(145deg, rgba(34, 49, 64, 0.94), rgba(27, 40, 51, 0.82));
}
.surface30c34-help-panel h2 {
  margin: 0 0 6px;
  font-family: var(--surface30c34-font-head);
  font-size: 18px;
  line-height: 1.35;
  color: var(--surface30c34-paper);
}
.surface30c34-help-panel > p { margin: 0; color: var(--surface30c34-mist); font-size: 13px; }
.surface30c34-help-panel > p a,
.surface30c34-help-copy a { color: #9fd8b4; font-weight: 600; }
.surface30c34-help-kicker {
  margin: 0 0 7px;
  color: #e8c4a8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.surface30c34-help-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--surface30c34-line-soft);
}
.surface30c34-help-row:last-child { border-bottom: 0; padding-bottom: 0; }
.surface30c34-help-index {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(160, 82, 45, 0.2);
  border: 1px solid rgba(160, 82, 45, 0.55);
  color: #e8c4a8;
  font-weight: 700;
  font-size: 12px;
}
.surface30c34-help-row h3,
.surface30c34-help-card h3,
.surface30c34-safety-rule h3 { margin: 0 0 3px; font-family: var(--surface30c34-font-head); font-size: 14px; color: var(--surface30c34-paper); }
.surface30c34-help-row p,
.surface30c34-help-card p,
.surface30c34-safety-rule p { margin: 0; color: var(--surface30c34-mist); font-size: 12.5px; line-height: 1.62; }
.surface30c34-help-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.surface30c34-help-action {
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid rgba(46, 139, 87, 0.58);
  border-radius: var(--surface30c34-radius-soft);
  background: rgba(0, 128, 0, 0.18);
  color: var(--surface30c34-paper);
  font: 600 12px/1.2 var(--surface30c34-font-body);
}
.surface30c34-help-action--clay { border-color: rgba(160, 82, 45, 0.65); background: rgba(160, 82, 45, 0.18); }
.surface30c34-help-table { display: grid; gap: 7px; margin-top: 12px; }
.surface30c34-help-card { padding: 11px; border: 1px solid var(--surface30c34-line-soft); border-radius: var(--surface30c34-radius-soft); background: rgba(27, 40, 51, 0.72); }
.surface30c34-help-card strong { color: #e8c4a8; }
.surface30c34-help-card + .surface30c34-help-card { margin-top: 7px; }
.surface30c34-help-columns { display: grid; gap: 8px; margin-top: 12px; }
.surface30c34-help-columns .surface30c34-help-card { margin: 0; }
.surface30c34-help-qa { display: grid; gap: 8px; margin-top: 12px; }
.surface30c34-help-qa details { border: 1px solid var(--surface30c34-line-soft); border-radius: var(--surface30c34-radius-soft); background: rgba(27, 40, 51, 0.76); }
.surface30c34-help-qa summary { min-height: 46px; padding: 12px; cursor: pointer; color: var(--surface30c34-paper); font: 600 13px/1.4 var(--surface30c34-font-head); }
.surface30c34-help-qa details p { margin: 0; padding: 0 12px 12px; color: var(--surface30c34-mist); font-size: 12.5px; line-height: 1.62; }
.surface30c34-help-callout { margin-top: 12px; padding: 11px 12px; border-left: 3px solid var(--surface30c34-clay); border-radius: 0 var(--surface30c34-radius-soft) var(--surface30c34-radius-soft) 0; background: rgba(160, 82, 45, 0.13); color: var(--surface30c34-mist); font-size: 12.5px; line-height: 1.62; }
.surface30c34-help-callout strong { color: #e8c4a8; }
.surface30c34-safety-banner { margin: 14px 12px 0; padding: 14px; border: 1px solid rgba(160, 82, 45, 0.55); border-radius: 18px 8px 18px 8px; background: linear-gradient(120deg, rgba(160, 82, 45, 0.22), rgba(34, 49, 64, 0.9)); }
.surface30c34-safety-banner h2 { margin: 0 0 5px; font-family: var(--surface30c34-font-head); font-size: 17px; color: var(--surface30c34-paper); }
.surface30c34-safety-banner p { margin: 0; color: var(--surface30c34-mist); font-size: 12.5px; line-height: 1.6; }
.surface30c34-safety-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.surface30c34-safety-stat { padding: 9px 6px; border: 1px solid var(--surface30c34-line-soft); border-radius: 10px; background: rgba(27, 40, 51, 0.7); text-align: center; }
.surface30c34-safety-stat b { display: block; color: #9fd8b4; font: 700 16px/1.2 var(--surface30c34-font-head); }
.surface30c34-safety-stat span { display: block; margin-top: 3px; color: var(--surface30c34-mist); font-size: 10.5px; line-height: 1.3; }
.surface30c34-safety-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.surface30c34-safety-rule { position: relative; padding: 12px 12px 12px 42px; border: 1px solid var(--surface30c34-line-soft); border-radius: 12px 12px 5px 12px; background: rgba(27, 40, 51, 0.74); }
.surface30c34-safety-rule::before { content: "✓"; position: absolute; left: 12px; top: 12px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: rgba(46, 139, 87, 0.22); color: #9fd8b4; font-size: 13px; font-weight: 700; }
.surface30c34-safety-rule--stop { border-color: rgba(160, 82, 45, 0.5); }
.surface30c34-safety-rule--stop::before { content: "!"; background: rgba(160, 82, 45, 0.25); color: #e8c4a8; }
.surface30c34-safety-rule a { color: #9fd8b4; font-weight: 600; }
.surface30c34-term-list { display: grid; gap: 0; margin-top: 10px; }
.surface30c34-term { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 9px; padding: 10px 0; border-bottom: 1px solid var(--surface30c34-line-soft); }
.surface30c34-term:last-child { border-bottom: 0; padding-bottom: 0; }
.surface30c34-term dt { color: #e8c4a8; font-size: 12px; font-weight: 700; }
.surface30c34-term dd { margin: 0; color: var(--surface30c34-mist); font-size: 12px; line-height: 1.55; }
.surface30c34-safety-linkbox { display: grid; gap: 7px; margin-top: 12px; }
.surface30c34-safety-linkbox a { display: block; padding: 11px 12px; border: 1px solid rgba(46, 139, 87, 0.42); border-radius: 10px; color: var(--surface30c34-paper); text-decoration: none; background: rgba(0, 128, 0, 0.12); font-size: 12.5px; font-weight: 600; }
.surface30c34-safety-linkbox a small { display: block; margin-top: 2px; color: var(--surface30c34-mist); font-size: 11px; font-weight: 400; }
.surface30c34-help-copy { color: var(--surface30c34-mist); font-size: 12.5px; line-height: 1.65; }
.surface30c34-help-copy .surface30c34-help-action { display: inline-flex; align-items: center; vertical-align: middle; min-height: 36px; padding: 7px 10px; }
@media (min-width: 375px) {
  .surface30c34-help-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}