/* ============================================================
   hibachi.homes - mobile-first canvas stylesheet
   File: css/mobile-e0f6e0-canvas.css
   Class prefix: mobilef6e02-
   Palette: slate #34495E (panels) / silver #C0C0C0 / light cyan #E0FFFF
   Canvas: 320-430px phone layout, centered on wide screens
   ============================================================ */

/* ---------- design tokens ---------- */
:root {
  --mobilef6e02-ink: #E0FFFF;              /* primary light text */
  --mobilef6e02-silver: #C0C0C0;           /* secondary text / lines */
  --mobilef6e02-slate: #34495E;            /* raised panel color */
  --mobilef6e02-canvas: #22303C;           /* page background (slate shade) */
  --mobilef6e02-deep: #19242E;             /* recessed background */
  --mobilef6e02-slateHi: #3E5570;          /* hover / active panel */
  --mobilef6e02-line: rgba(192, 192, 192, 0.22);
  --mobilef6e02-lineSoft: rgba(192, 192, 192, 0.12);
  --mobilef6e02-ctaInk: #1A252F;           /* ink on light CTA fill */
  --mobilef6e02-r-card: 13px;
  --mobilef6e02-r-chip: 8px;
  --mobilef6e02-r-btn: 10px;
  --mobilef6e02-r-img: 9px;
  --mobilef6e02-font-body: 'Hind Siliguri', 'Noto Sans Bengali', system-ui, sans-serif;
  --mobilef6e02-font-display: 'Baloo Da 2', 'Hind Siliguri', system-ui, sans-serif;
  --mobilef6e02-headH: 104px;              /* fixed header total height */
  --mobilef6e02-dockH: 64px;               /* fixed bottom dock height */
}

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

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

body {
  margin: 0;
  background: var(--mobilef6e02-deep);
  color: var(--mobilef6e02-ink);
  font-family: var(--mobilef6e02-font-body);
  font-size: 15px;
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100dvh;
}

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

h1, h2, h3 {
  font-family: var(--mobilef6e02-font-display);
  line-height: 1.28;
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}

p { margin: 0 0 12px; overflow-wrap: anywhere; }

a {
  color: var(--mobilef6e02-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--mobilef6e02-line);
}
a:hover { border-bottom-color: var(--mobilef6e02-silver); }

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

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

/* phone canvas: keeps a stable 430px column on any wide screen */
.mobilef6e02-shell {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
  background: var(--mobilef6e02-canvas);
  min-height: 100dvh;
  overflow-x: clip;
}

/* ---------- fixed top bar: centered identity + action row ---------- */
.mobilef6e02-topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 60;
  background: rgba(25, 36, 46, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--mobilef6e02-lineSoft);
  transition: box-shadow 0.3s ease;
}
.mobilef6e02-topbar.is-scrolled { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }

/* identity strip: logo + name only, visually centered */
.mobilef6e02-idstrip {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  min-height: 54px;
  padding: 7px 10px 4px;
}
.mobilef6e02-idspacer { width: 44px; }

.mobilef6e02-brand {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
}
.mobilef6e02-brandLogo {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  object-fit: cover;
  border: 1px solid var(--mobilef6e02-line);
  flex: none;
}
.mobilef6e02-brandName {
  font-family: var(--mobilef6e02-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--mobilef6e02-ink);
  white-space: nowrap;
}

/* action row: drawer trigger + register / login, outside the identity strip */
.mobilef6e02-actionrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 8px;
  min-height: 48px;
}

.mobilef6e02-burger {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--mobilef6e02-line);
  border-radius: var(--mobilef6e02-r-btn);
}
.mobilef6e02-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--mobilef6e02-ink);
  border-radius: 2px;
  box-shadow: 0 -6px 0 var(--mobilef6e02-ink), 0 6px 0 var(--mobilef6e02-ink);
  transition: transform 0.25s ease;
}
.mobilef6e02-burger[aria-expanded="true"] span { transform: rotate(45deg); }

.mobilef6e02-actionpush { flex: 1; }

/* CTA shapes: solid primary + outlined secondary */
.mobilef6e02-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 9px 14px;
  border-radius: var(--mobilef6e02-r-btn);
  font-size: 14px;
  font-weight: 600;
  border: 2px solid transparent;
  transition: transform 0.15s ease, filter 0.15s ease, background 0.2s ease;
}
.mobilef6e02-btn:active { transform: scale(0.97); }

.mobilef6e02-btn--solid {
  background: var(--mobilef6e02-ink);
  color: var(--mobilef6e02-ctaInk);
}
.mobilef6e02-btn--solid:hover { filter: brightness(1.06); }

.mobilef6e02-btn--ghost {
  background: transparent;
  color: var(--mobilef6e02-ink);
  border-color: var(--mobilef6e02-silver);
}
.mobilef6e02-btn--ghost:hover { background: rgba(192, 192, 192, 0.12); }

/* ---------- side drawer menu ---------- */
.mobilef6e02-veil {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 20, 0.6);
  z-index: 70;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.mobilef6e02-veil.is-open { opacity: 1; visibility: visible; }

.mobilef6e02-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: max(0px, calc(50% - 215px));
  width: min(84vw, 318px);
  z-index: 80;
  background: var(--mobilef6e02-deep);
  border-right: 1px solid var(--mobilef6e02-lineSoft);
  display: flex;
  flex-direction: column;
  transform: translateX(-104%);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mobilef6e02-drawer.is-open { transform: translateX(0); }

.mobilef6e02-drawerHead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--mobilef6e02-lineSoft);
}
.mobilef6e02-drawerHead img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
}
.mobilef6e02-drawerTitle {
  font-family: var(--mobilef6e02-font-display);
  font-size: 18px;
  font-weight: 700;
}
.mobilef6e02-drawerClose {
  margin-left: auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--mobilef6e02-line);
  border-radius: var(--mobilef6e02-r-btn);
  font-size: 18px;
  line-height: 1;
  color: var(--mobilef6e02-silver);
}

.mobilef6e02-drawerNav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px 14px;
}
.mobilef6e02-drawerGroup {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--mobilef6e02-silver);
  opacity: 0.85;
  padding: 0 10px;
}
.mobilef6e02-drawerLink {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 10px;
  margin: 2px 0;
  border-radius: var(--mobilef6e02-r-chip);
  border-bottom: 0;
  color: var(--mobilef6e02-ink);
  font-size: 15px;
  position: relative;
}
.mobilef6e02-drawerLink::before {
  content: "";
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--mobilef6e02-line);
  transition: background 0.2s ease;
}
.mobilef6e02-drawerLink:hover { background: var(--mobilef6e02-slate); }
.mobilef6e02-drawerLink[aria-current="page"]::before { background: var(--mobilef6e02-ink); }
.mobilef6e02-drawerLink[aria-current="page"] { background: var(--mobilef6e02-slate); font-weight: 600; }

.mobilef6e02-drawerFoot {
  padding: 12px;
  border-top: 1px solid var(--mobilef6e02-lineSoft);
}
.mobilef6e02-drawerFoot .mobilef6e02-btn { width: 100%; }

/* ---------- page body spacing ---------- */
.mobilef6e02-main {
  padding: calc(var(--mobilef6e02-headH) + 6px) 12px
           calc(var(--mobilef6e02-dockH) + 46px + env(safe-area-inset-bottom));
}

/* ---------- hero carousel ---------- */
.mobilef6e02-hero {
  position: relative;
  border-radius: var(--mobilef6e02-r-card);
  overflow: hidden;
  border: 1px solid var(--mobilef6e02-lineSoft);
  background: var(--mobilef6e02-deep);
}
.mobilef6e02-heroTrack {
  display: flex;
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mobilef6e02-slide {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  cursor: pointer;
}
.mobilef6e02-slide img {
  width: 100%;
  aspect-ratio: 1915 / 450;
  object-fit: cover;
}
.mobilef6e02-slideCap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 12px 9px;
  background: linear-gradient(180deg, rgba(25, 36, 46, 0) 0%, rgba(25, 36, 46, 0.92) 78%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mobilef6e02-slideTxt {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--mobilef6e02-ink);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.mobilef6e02-slideChip {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--mobilef6e02-ink);
  color: var(--mobilef6e02-ctaInk);
}

.mobilef6e02-heroNav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(25, 36, 46, 0.72);
  border: 1px solid var(--mobilef6e02-lineSoft);
  border-radius: var(--mobilef6e02-r-chip);
  color: var(--mobilef6e02-ink);
  font-size: 16px;
  padding: 0;
}
.mobilef6e02-heroNav--prev { left: 6px; }
.mobilef6e02-heroNav--next { right: 6px; }

.mobilef6e02-heroDots {
  position: absolute;
  top: 9px;
  right: 10px;
  display: flex;
  gap: 6px;
}
.mobilef6e02-heroDot {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  border: 0;
  padding: 0;
  background: rgba(192, 192, 192, 0.45);
  transition: background 0.25s ease;
}
.mobilef6e02-heroDot.is-on { background: var(--mobilef6e02-ink); }

/* ---------- section shells (question-driven rhythm) ---------- */
.mobilef6e02-sec { margin: 22px 0 0; }

.mobilef6e02-secHead {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 10px;
  padding-left: 10px;
  border-left: 3px solid var(--mobilef6e02-silver);
}
.mobilef6e02-qchip {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--mobilef6e02-silver);
  background: rgba(192, 192, 192, 0.1);
  border-radius: 999px;
  padding: 2px 9px;
}
.mobilef6e02-secHead h2 {
  font-size: 19px;
  font-weight: 700;
  margin: 0;
}
.mobilef6e02-lead {
  color: var(--mobilef6e02-silver);
  font-size: 13.5px;
  margin: 0 0 12px;
}
.mobilef6e02-lead a { font-weight: 600; }

/* ---------- game catalog: compact square grid ---------- */
.mobilef6e02-catpanel {
  background: var(--mobilef6e02-slate);
  border: 1px solid var(--mobilef6e02-lineSoft);
  border-radius: var(--mobilef6e02-r-card);
  padding: 12px 10px 14px;
  margin: 0 0 14px;
}
.mobilef6e02-catpanel h3 {
  font-size: 15px;
  margin: 0 0 8px;
  color: var(--mobilef6e02-ink);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.mobilef6e02-catCount {
  font-family: var(--mobilef6e02-font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--mobilef6e02-silver);
  background: rgba(224, 255, 255, 0.08);
  padding: 1px 8px;
  border-radius: 999px;
}

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

.mobilef6e02-gcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 4px 7px;
  background: var(--mobilef6e02-deep);
  border: 1px solid var(--mobilef6e02-lineSoft);
  border-radius: 12px 12px 10px 10px;
  transition: transform 0.15s ease, border-color 0.2s ease;
  min-width: 0;
}
.mobilef6e02-gcard:hover { border-color: var(--mobilef6e02-silver); transform: translateY(-2px); }
.mobilef6e02-gcard:active { transform: scale(0.96); }

.mobilef6e02-gcard img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--mobilef6e02-r-img);
}
.mobilef6e02-gname {
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  color: var(--mobilef6e02-silver);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  overflow-wrap: anywhere;
}

/* ---------- recent rounds list ---------- */
.mobilef6e02-rounds {
  background: var(--mobilef6e02-slate);
  border: 1px solid var(--mobilef6e02-lineSoft);
  border-radius: var(--mobilef6e02-r-card);
  overflow: hidden;
}
.mobilef6e02-round {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--mobilef6e02-lineSoft);
  font-size: 13px;
}
.mobilef6e02-round:last-child { border-bottom: 0; }
.mobilef6e02-roundDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mobilef6e02-silver);
}
.mobilef6e02-roundGame { font-weight: 600; color: var(--mobilef6e02-ink); }
.mobilef6e02-roundNote { color: var(--mobilef6e02-silver); font-size: 12px; }
.mobilef6e02-roundWhen {
  font-size: 11px;
  color: var(--mobilef6e02-silver);
  background: rgba(192, 192, 192, 0.1);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- play style comparison rows ---------- */
.mobilef6e02-styles {
  display: grid;
  gap: 9px;
}
.mobilef6e02-styleCard {
  background: var(--mobilef6e02-slate);
  border: 1px solid var(--mobilef6e02-lineSoft);
  border-left: 3px solid var(--mobilef6e02-silver);
  border-radius: var(--mobilef6e02-r-chip);
  padding: 10px 12px;
}
.mobilef6e02-styleCard h3 {
  font-size: 14px;
  margin: 0 0 4px;
}
.mobilef6e02-styleCard p {
  margin: 0;
  font-size: 12.5px;
  color: var(--mobilef6e02-silver);
}

/* ---------- fact summary chips ---------- */
.mobilef6e02-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.mobilef6e02-fact {
  background: var(--mobilef6e02-slate);
  border: 1px solid var(--mobilef6e02-lineSoft);
  border-radius: var(--mobilef6e02-r-chip);
  padding: 10px 11px;
}
.mobilef6e02-factNum {
  display: block;
  font-family: var(--mobilef6e02-font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--mobilef6e02-ink);
}
.mobilef6e02-factTxt {
  font-size: 11.5px;
  color: var(--mobilef6e02-silver);
  line-height: 1.45;
}

/* ---------- scenario answer block ---------- */
.mobilef6e02-scenario {
  background: var(--mobilef6e02-slate);
  border: 1px solid var(--mobilef6e02-lineSoft);
  border-radius: var(--mobilef6e02-r-card);
  padding: 13px 13px 6px;
}
.mobilef6e02-scenarioQ {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-weight: 700;
  font-size: 14.5px;
  margin: 0 0 9px;
  color: var(--mobilef6e02-ink);
}
.mobilef6e02-scenarioQ::before {
  content: "?";
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mobilef6e02-ink);
  color: var(--mobilef6e02-ctaInk);
  font-size: 14px;
  font-family: var(--mobilef6e02-font-display);
}
.mobilef6e02-scenario p { font-size: 13.5px; color: var(--mobilef6e02-silver); }
.mobilef6e02-scenario p strong { color: var(--mobilef6e02-ink); font-weight: 600; }

/* ---------- extended footer (home only) ---------- */
.mobilef6e02-xfoot {
  margin: 26px 0 0;
  border-top: 1px solid var(--mobilef6e02-line);
  padding-top: 18px;
}
.mobilef6e02-xfootIntro {
  font-size: 12.5px;
  color: var(--mobilef6e02-silver);
  background: rgba(52, 73, 94, 0.45);
  border-radius: var(--mobilef6e02-r-chip);
  padding: 11px 12px;
  margin: 0 0 14px;
}

.mobilef6e02-xfootTitle {
  font-family: var(--mobilef6e02-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--mobilef6e02-silver);
  margin: 0 0 9px;
}

.mobilef6e02-promoGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
}
.mobilef6e02-promoGrid .mobilef6e02-btn { width: 100%; padding: 9px 8px; font-size: 12.5px; min-height: 46px; }

.mobilef6e02-dirList {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.mobilef6e02-dirList a {
  display: block;
  padding: 9px 11px;
  background: var(--mobilef6e02-slate);
  border: 1px solid var(--mobilef6e02-lineSoft);
  border-radius: var(--mobilef6e02-r-chip);
  border-bottom: 1px solid var(--mobilef6e02-lineSoft);
  font-size: 13px;
}
.mobilef6e02-dirList a:hover { background: var(--mobilef6e02-slateHi); }
.mobilef6e02-dirList small {
  display: block;
  color: var(--mobilef6e02-silver);
  font-size: 11px;
  margin-top: 1px;
}

.mobilef6e02-note {
  border-left: 3px solid var(--mobilef6e02-silver);
  background: rgba(192, 192, 192, 0.07);
  border-radius: 0 var(--mobilef6e02-r-chip) var(--mobilef6e02-r-chip) 0;
  padding: 9px 12px;
  font-size: 11.5px;
  color: var(--mobilef6e02-silver);
  line-height: 1.55;
}

/* ---------- common copyright bar ---------- */
.mobilef6e02-copy {
  margin: 18px 0 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--mobilef6e02-silver);
  padding: 10px 0 2px;
  border-top: 1px solid var(--mobilef6e02-lineSoft);
}

/* ---------- fixed bottom dock: center raised navigation ---------- */
.mobilef6e02-dock {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  height: calc(var(--mobilef6e02-dockH) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 65;
  background: rgba(25, 36, 46, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--mobilef6e02-lineSoft);
}
.mobilef6e02-dockRow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  height: 100%;
}

/* sliding top indicator line */
.mobilef6e02-dockInd {
  position: absolute;
  top: 0;
  height: 3px;
  width: 34px;
  border-radius: 0 0 3px 3px;
  background: var(--mobilef6e02-ink);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), width 0.3s ease;
  left: 0;
}

.mobilef6e02-dockItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  height: 100%;
  padding: 8px 2px 7px;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--mobilef6e02-silver);
  text-align: center;
  transition: color 0.2s ease;
}
.mobilef6e02-dockItem svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mobilef6e02-dockItem.is-on { color: var(--mobilef6e02-ink); font-weight: 700; }
.mobilef6e02-dockItem:hover { color: var(--mobilef6e02-ink); }

a.mobilef6e02-dockItem { text-decoration: none; border-bottom: 0; }

/* raised center promo button */
.mobilef6e02-dockItem--raised { padding-top: 0; }
.mobilef6e02-dockRaise {
  width: 56px;
  height: 56px;
  margin-top: -26px;
  border-radius: 50%;
  border: 2px solid var(--mobilef6e02-deep);
  background: var(--mobilef6e02-ink);
  color: var(--mobilef6e02-ctaInk);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease;
}
.mobilef6e02-dockRaise:active { transform: scale(0.94); }
.mobilef6e02-dockRaise svg {
  width: 24px;
  height: 24px;
  stroke: var(--mobilef6e02-ctaInk);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- restrained reveal animation ---------- */
.mobilef6e02-rv {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.mobilef6e02-rv.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mobilef6e02-rv { opacity: 1; transform: none; transition: none; }
  .mobilef6e02-heroTrack,
  .mobilef6e02-drawer,
  .mobilef6e02-dockInd { transition: none; }
}

/* ---------- responsive ladder ---------- */

/* 375px and up: room for a 5th game column and two-column lists */
@media (min-width: 375px) {
  .mobilef6e02-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mobilef6e02-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobilef6e02-dirList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobilef6e02-secHead h2 { font-size: 20px; }
}

/* 430px phone canvas boundary: wider gutters inside the same canvas */
@media (min-width: 430px) {
  .mobilef6e02-main { padding-left: 16px; padding-right: 16px; }
  .mobilef6e02-grid { gap: 10px 8px; }
  .mobilef6e02-gname { font-size: 11.5px; }
  .mobilef6e02-promoGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* beyond the phone canvas: float the canvas on a deep backdrop */
@media (min-width: 431px) {
  .mobilef6e02-shell {
    box-shadow: 0 0 0 1px rgba(192, 192, 192, 0.14), 0 24px 60px rgba(0, 0, 0, 0.5);
  }
}

/* very small phones: tighten type so nothing overflows at 320px */
@media (max-width: 359px) {
  .mobilef6e02-brandName { font-size: 19px; }
  .mobilef6e02-btn { padding: 8px 10px; font-size: 13px; }
  .mobilef6e02-secHead h2 { font-size: 17.5px; }
  .mobilef6e02-slideChip { font-size: 10px; padding: 4px 8px; }
}

/* ---------- help pages: editorial tools and decision paths ---------- */
.mobilef6e02-helpIntro {
  border: 1px solid var(--mobilef6e02-line);
  border-radius: 18px 8px 18px 8px;
  padding: 15px 14px 12px;
  background: linear-gradient(145deg, rgba(52, 73, 94, 0.95), rgba(25, 36, 46, 0.82));
}
.mobilef6e02-helpIntro p:last-child { margin-bottom: 0; }
.mobilef6e02-helpKicker {
  color: var(--mobilef6e02-silver);
  font-size: 11px;
  letter-spacing: 0.65px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.mobilef6e02-helpGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.mobilef6e02-helpTile {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--mobilef6e02-lineSoft);
  border-radius: 10px 4px 10px 4px;
  background: var(--mobilef6e02-slate);
}
.mobilef6e02-helpTile strong {
  display: block;
  color: var(--mobilef6e02-ink);
  font-family: var(--mobilef6e02-font-display);
  font-size: 15px;
  line-height: 1.35;
  margin-bottom: 3px;
}
.mobilef6e02-helpTile span { color: var(--mobilef6e02-silver); font-size: 12px; line-height: 1.45; }
.mobilef6e02-helpSteps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: helpstep;
  display: grid;
  gap: 8px;
}
.mobilef6e02-helpSteps li {
  counter-increment: helpstep;
  position: relative;
  padding: 11px 11px 11px 45px;
  border-left: 2px solid var(--mobilef6e02-silver);
  border-radius: 0 10px 10px 0;
  background: rgba(52, 73, 94, 0.72);
  color: var(--mobilef6e02-silver);
  font-size: 13px;
}
.mobilef6e02-helpSteps li::before {
  content: counter(helpstep, decimal-leading-zero);
  position: absolute;
  left: 10px;
  top: 11px;
  color: var(--mobilef6e02-ctaInk);
  background: var(--mobilef6e02-ink);
  border-radius: 6px;
  padding: 2px 6px;
  font-family: var(--mobilef6e02-font-display);
  font-weight: 700;
  font-size: 12px;
}
.mobilef6e02-helpSteps strong { color: var(--mobilef6e02-ink); }
.mobilef6e02-helpTable {
  display: grid;
  gap: 1px;
  border: 1px solid var(--mobilef6e02-lineSoft);
  border-radius: 12px;
  overflow: hidden;
  background: var(--mobilef6e02-lineSoft);
}
.mobilef6e02-helpRow {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 8px;
  padding: 10px 11px;
  background: var(--mobilef6e02-slate);
  font-size: 12.5px;
}
.mobilef6e02-helpRow strong { color: var(--mobilef6e02-ink); }
.mobilef6e02-helpRow span { color: var(--mobilef6e02-silver); }
.mobilef6e02-callout {
  padding: 12px 13px;
  border: 1px solid var(--mobilef6e02-silver);
  border-radius: 8px 16px 8px 16px;
  background: rgba(224, 255, 255, 0.08);
}
.mobilef6e02-callout strong { color: var(--mobilef6e02-ink); }
.mobilef6e02-callout p:last-child { margin-bottom: 0; }
.mobilef6e02-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.mobilef6e02-checklist li {
  position: relative;
  padding: 9px 10px 9px 31px;
  border-bottom: 1px solid var(--mobilef6e02-lineSoft);
  color: var(--mobilef6e02-silver);
  font-size: 13px;
}
.mobilef6e02-checklist li::before {
  content: "✓";
  position: absolute;
  left: 7px;
  top: 8px;
  color: var(--mobilef6e02-ink);
  font-weight: 700;
}
.mobilef6e02-termList { display: grid; gap: 8px; }
.mobilef6e02-term {
  padding: 10px 12px;
  border-bottom: 1px solid var(--mobilef6e02-lineSoft);
}
.mobilef6e02-term dt { color: var(--mobilef6e02-ink); font-weight: 700; margin-bottom: 3px; }
.mobilef6e02-term dd { margin: 0; color: var(--mobilef6e02-silver); font-size: 12.5px; }
.mobilef6e02-promoLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 10px 11px;
  border: 1px dashed var(--mobilef6e02-silver);
  border-radius: 9px;
  background: rgba(52, 73, 94, 0.7);
}
.mobilef6e02-promoLine p { margin: 0; color: var(--mobilef6e02-silver); font-size: 12.5px; }
.mobilef6e02-promoLine .mobilef6e02-btn { flex: none; padding-inline: 11px; }

@media (max-width: 359px) {
  .mobilef6e02-helpGrid { grid-template-columns: 1fr; }
  .mobilef6e02-helpRow { grid-template-columns: 1fr; gap: 2px; }
  .mobilef6e02-promoLine { align-items: flex-start; flex-direction: column; }
}