/* ============================================================
   Kinse Mil — palette + layout stylesheet
   File   : css/dynamic-69d7b7-palette.css
   Prefix : frame69d7b-
   Canvas : mobile-first phone frame, 320px up to 430px wide,
            centred as a phone canvas on wide screens.
   Voice  : deep-navy hull, cyan signal lines, peach text,
            compact square game directory, light press motion.
   ============================================================ */

:root {
  --frame69d7b-night: #0e1524;
  --frame69d7b-hull: #1B263B;
  --frame69d7b-panel: #223252;
  --frame69d7b-panel-soft: #1e2c49;
  --frame69d7b-well: #16203a;
  --frame69d7b-cyan: #00FFFF;
  --frame69d7b-peach: #FFDFBA;
  --frame69d7b-teal: #4DB6AC;
  --frame69d7b-magenta: #AD1457;
  --frame69d7b-rose: #ff5f8d;
  --frame69d7b-mist: #a9b9da;
  --frame69d7b-dim: #7f93b8;
  --frame69d7b-line: rgba(0, 255, 255, 0.18);
  --frame69d7b-line-soft: rgba(255, 223, 186, 0.12);
  --frame69d7b-radius: 14px;
  --frame69d7b-radius-mid: 10px;
  --frame69d7b-radius-s: 7px;
  --frame69d7b-font-head: "Trebuchet MS", "Segoe UI", "Avenir Next", Verdana, sans-serif;
  --frame69d7b-font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --frame69d7b-top-h: 58px;
  --frame69d7b-rail-h: 62px;
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--frame69d7b-night);
  background-image: radial-gradient(120% 60% at 50% 0%, #14203666 0%, transparent 62%);
  color: var(--frame69d7b-peach);
  font-family: var(--frame69d7b-font-body);
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
}

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

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

a { color: var(--frame69d7b-teal); text-decoration: none; }
a:hover { color: var(--frame69d7b-cyan); }

h1, h2, h3 {
  font-family: var(--frame69d7b-font-head);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 8px;
  letter-spacing: 0.2px;
}

p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }

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

::selection { background: var(--frame69d7b-cyan); color: #06121f; }

.frame69d7b-skip {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 60;
  background: var(--frame69d7b-cyan);
  color: #06121f;
  font-weight: 700;
  font-size: 12px;
  padding: 10px 14px;
  border-radius: var(--frame69d7b-radius-s);
  transition: top 0.15s ease;
}
.frame69d7b-skip:focus { top: 8px; }

/* ---------- phone canvas ---------- */

.frame69d7b-canvas {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--frame69d7b-hull);
  overflow-x: clip;
}

/* ---------- fixed top brand bar ---------- */

.frame69d7b-topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: rgba(20, 29, 48, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--frame69d7b-line);
}

.frame69d7b-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-right: auto;
  min-width: 0;
}

.frame69d7b-brand img {
  width: 30px;
  height: 30px;
  border-radius: var(--frame69d7b-radius-s);
  border: 1px solid var(--frame69d7b-line);
  flex: none;
}

.frame69d7b-brand span {
  font-family: var(--frame69d7b-font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--frame69d7b-peach);
  white-space: nowrap;
}

.frame69d7b-register,
.frame69d7b-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--frame69d7b-radius-mid);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: filter 0.18s ease, transform 0.12s ease, color 0.18s ease;
}

.frame69d7b-register {
  background: linear-gradient(135deg, #d81b60 0%, var(--frame69d7b-magenta) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(173, 20, 87, 0.35);
}

.frame69d7b-login {
  border: 1px solid var(--frame69d7b-cyan);
  color: var(--frame69d7b-cyan);
}

.frame69d7b-register:active,
.frame69d7b-login:active { transform: translateY(-2px); }
.frame69d7b-register svg,
.frame69d7b-login svg { width: 13px; height: 13px; flex: none; }

.frame69d7b-menubtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-height: 44px;
  border-radius: var(--frame69d7b-radius-mid);
  border: 1px solid var(--frame69d7b-line-soft);
  color: var(--frame69d7b-peach);
  transition: border-color 0.18s ease, transform 0.12s ease;
}
.frame69d7b-menubtn:active { transform: translateY(-2px); }
.frame69d7b-menubtn svg { width: 18px; height: 18px; }

/* ---------- layered dropdown menu ---------- */

.frame69d7b-menu {
  position: fixed;
  top: var(--frame69d7b-top-h);
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: 100%;
  max-width: 430px;
  z-index: 39;
  background: rgba(18, 26, 43, 0.985);
  border-bottom: 1px solid var(--frame69d7b-line);
  box-shadow: 0 18px 30px rgba(5, 10, 20, 0.5);
  max-height: calc(100vh - var(--frame69d7b-top-h));
  overflow-y: auto;
  padding: 10px 12px 16px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.frame69d7b-menu.frame69d7b-is-open {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.frame69d7b-mgroup { padding: 6px 0 2px; }
.frame69d7b-mgroup + .frame69d7b-mgroup { border-top: 1px dashed var(--frame69d7b-line-soft); }

.frame69d7b-mlabel {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--frame69d7b-teal);
  padding: 6px 4px 4px;
}

.frame69d7b-mlink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: var(--frame69d7b-radius-mid);
  color: var(--frame69d7b-peach);
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}
.frame69d7b-mlink:hover,
.frame69d7b-mlink:focus-visible { background: rgba(0, 255, 255, 0.08); color: var(--frame69d7b-cyan); }

.frame69d7b-mlink em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--frame69d7b-dim);
  white-space: nowrap;
}

/* ---------- main column ---------- */

.frame69d7b-main {
  padding: calc(var(--frame69d7b-top-h) + 12px) 12px
           calc(var(--frame69d7b-rail-h) + 40px + env(safe-area-inset-bottom));
}

/* ---------- hero text block ---------- */

.frame69d7b-hero {
  background: linear-gradient(160deg, var(--frame69d7b-panel) 0%, var(--frame69d7b-well) 100%);
  border: 1px solid var(--frame69d7b-line-soft);
  border-radius: var(--frame69d7b-radius);
  padding: 14px 14px 12px;
  margin-bottom: 12px;
}

.frame69d7b-hero h1 {
  font-size: 21px;
  color: var(--frame69d7b-peach);
  margin-bottom: 8px;
}

.frame69d7b-hero h1 b {
  color: var(--frame69d7b-cyan);
  font-weight: 700;
}

.frame69d7b-hero p {
  font-size: 12.8px;
  color: var(--frame69d7b-mist);
}

/* ---------- banner carousel ---------- */

.frame69d7b-carousel {
  position: relative;
  border-radius: var(--frame69d7b-radius);
  overflow: hidden;
  border: 1px solid var(--frame69d7b-line);
  margin-bottom: 12px;
  background: var(--frame69d7b-well);
}

.frame69d7b-ctrack {
  display: flex;
  transition: transform 0.42s cubic-bezier(0.33, 0.9, 0.3, 1);
}

.frame69d7b-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  display: block;
  padding: 0;
  aspect-ratio: 430 / 168;
  text-align: left;
}

.frame69d7b-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame69d7b-scap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  padding: 26px 12px 9px;
  background: linear-gradient(180deg, rgba(14, 21, 36, 0) 0%, rgba(14, 21, 36, 0.94) 78%);
}

.frame69d7b-scap strong {
  display: block;
  font-family: var(--frame69d7b-font-head);
  font-size: 14px;
  color: var(--frame69d7b-peach);
}

.frame69d7b-scap em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--frame69d7b-mist);
  margin-top: 1px;
}

.frame69d7b-dots {
  position: absolute;
  right: 10px;
  bottom: 8px;
  display: flex;
  gap: 5px;
  z-index: 2;
}

.frame69d7b-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 99px;
  background: rgba(255, 223, 186, 0.38);
  transition: width 0.2s ease, background 0.2s ease;
}
.frame69d7b-dot.frame69d7b-is-on { width: 20px; background: var(--frame69d7b-cyan); }

/* ---------- pre-entry check strip ---------- */

.frame69d7b-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.frame69d7b-step {
  background: var(--frame69d7b-panel-soft);
  border: 1px solid var(--frame69d7b-line-soft);
  border-radius: var(--frame69d7b-radius-mid);
  padding: 9px 8px 8px;
}

.frame69d7b-stepno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 99px;
  background: var(--frame69d7b-teal);
  color: #082421;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 5px;
}

.frame69d7b-step p {
  font-size: 10.8px;
  line-height: 1.4;
  color: var(--frame69d7b-mist);
  margin: 0;
}

.frame69d7b-striphead {
  font-family: var(--frame69d7b-font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--frame69d7b-teal);
  margin: 0 0 7px;
}

/* ---------- lobby racks ---------- */

.frame69d7b-lobby > h2,
.frame69d7b-module > h2 {
  font-size: 17.5px;
  color: var(--frame69d7b-peach);
}

.frame69d7b-lobby > p,
.frame69d7b-module > p {
  font-size: 12.8px;
  color: var(--frame69d7b-mist);
}

.frame69d7b-rack { margin-top: 18px; }

.frame69d7b-rackhead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.frame69d7b-rackhead h3 {
  font-size: 15px;
  color: var(--frame69d7b-peach);
  margin: 0;
}

.frame69d7b-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--frame69d7b-cyan);
  border: 1px solid var(--frame69d7b-line);
  border-radius: 99px;
  padding: 2px 8px;
  white-space: nowrap;
}

.frame69d7b-racknote {
  font-size: 11.8px;
  line-height: 1.5;
  color: var(--frame69d7b-mist);
  margin: 0 0 9px;
}

.frame69d7b-racknote a { border-bottom: 1px dotted var(--frame69d7b-teal); }

/* ---------- compact square game directory ---------- */

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

.frame69d7b-cell { min-width: 0; }

.frame69d7b-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 44px;
  padding: 6px 4px 7px;
  background: var(--frame69d7b-panel-soft);
  border: 1px solid transparent;
  border-radius: var(--frame69d7b-radius-mid);
  text-align: center;
  transition: border-color 0.16s ease, transform 0.12s ease, background 0.16s ease;
}

.frame69d7b-tile:active {
  transform: translateY(-2px);
  border-color: var(--frame69d7b-line);
  background: var(--frame69d7b-panel);
}

.frame69d7b-tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--frame69d7b-radius-s);
  background: var(--frame69d7b-well);
}

.frame69d7b-tname {
  font-size: 10.2px;
  line-height: 1.25;
  color: var(--frame69d7b-mist);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* ---------- content modules ---------- */

.frame69d7b-module {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--frame69d7b-line-soft);
}

/* question blocks */
.frame69d7b-qitem {
  background: var(--frame69d7b-panel-soft);
  border: 1px solid var(--frame69d7b-line-soft);
  border-radius: var(--frame69d7b-radius-mid);
  margin-bottom: 8px;
  overflow: hidden;
}

.frame69d7b-qitem summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--frame69d7b-peach);
  cursor: pointer;
}

.frame69d7b-qitem summary::-webkit-details-marker { display: none; }

.frame69d7b-qmark {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1px solid var(--frame69d7b-teal);
  color: var(--frame69d7b-teal);
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.frame69d7b-qitem[open] .frame69d7b-qmark {
  transform: rotate(45deg);
  background: var(--frame69d7b-teal);
  color: #082421;
}

.frame69d7b-qitem p {
  padding: 0 12px 12px;
  font-size: 12.3px;
  color: var(--frame69d7b-mist);
  margin: 0;
}

/* winners board */
.frame69d7b-board {
  border: 1px solid var(--frame69d7b-line-soft);
  border-radius: var(--frame69d7b-radius-mid);
  background: var(--frame69d7b-well);
  padding: 4px 12px;
  margin-top: 10px;
}

.frame69d7b-brow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
}

.frame69d7b-brow + .frame69d7b-brow { border-top: 1px dashed var(--frame69d7b-line-soft); }

.frame69d7b-brow strong {
  font-size: 12.3px;
  color: var(--frame69d7b-peach);
  white-space: nowrap;
}

.frame69d7b-brow span {
  font-size: 10.8px;
  color: var(--frame69d7b-mist);
  margin-right: auto;
  min-width: 0;
}

.frame69d7b-btime {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  color: var(--frame69d7b-cyan);
  border: 1px solid var(--frame69d7b-line);
  border-radius: 99px;
  padding: 1px 7px;
}

/* tricks counter */
.frame69d7b-tricks {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  counter-reset: frame69d7b-trick;
}

.frame69d7b-tricks li {
  counter-increment: frame69d7b-trick;
  position: relative;
  padding: 0 0 10px 34px;
  font-size: 12.3px;
  color: var(--frame69d7b-mist);
}

.frame69d7b-tricks li::before {
  content: counter(frame69d7b-trick, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: var(--frame69d7b-radius-s);
  background: rgba(77, 182, 172, 0.16);
  border: 1px solid var(--frame69d7b-teal);
  color: var(--frame69d7b-teal);
  font-family: var(--frame69d7b-font-head);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 22px;
}

.frame69d7b-tricks b { color: var(--frame69d7b-peach); }

/* promo cards */
.frame69d7b-pcard {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(173, 20, 87, 0.16) 0%, var(--frame69d7b-panel-soft) 58%);
  border: 1px solid var(--frame69d7b-line-soft);
  border-left: 3px solid var(--frame69d7b-magenta);
  border-radius: var(--frame69d7b-radius-mid);
  padding: 9px 10px;
  margin-top: 8px;
}

.frame69d7b-pcard div { min-width: 0; margin-right: auto; }

.frame69d7b-pcard strong {
  display: block;
  font-family: var(--frame69d7b-font-head);
  font-size: 13px;
  color: var(--frame69d7b-peach);
}

.frame69d7b-pcard span {
  display: block;
  font-size: 10.8px;
  color: var(--frame69d7b-mist);
  margin-top: 1px;
}

.frame69d7b-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 0 13px;
  border-radius: 99px;
  background: linear-gradient(135deg, #d81b60 0%, var(--frame69d7b-magenta) 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(173, 20, 87, 0.35);
  transition: filter 0.16s ease, transform 0.12s ease;
}
.frame69d7b-go:active { transform: translateY(-2px); }
.frame69d7b-go svg { width: 12px; height: 12px; }

/* security checklist */
.frame69d7b-checklist {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.frame69d7b-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 0;
  font-size: 12.3px;
  color: var(--frame69d7b-mist);
}

.frame69d7b-checklist li + li { border-top: 1px dashed var(--frame69d7b-line-soft); }

.frame69d7b-checklist svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  fill: var(--frame69d7b-teal);
}

/* recap chips */
.frame69d7b-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.frame69d7b-flow span {
  font-size: 10.8px;
  font-weight: 700;
  color: var(--frame69d7b-peach);
  border: 1px solid var(--frame69d7b-line);
  border-radius: 99px;
  padding: 5px 10px;
  background: var(--frame69d7b-well);
}

.frame69d7b-flow i {
  font-style: normal;
  color: var(--frame69d7b-teal);
  font-size: 11px;
}

/* ---------- extended home footer ---------- */

.frame69d7b-xfooter {
  margin-top: 26px;
  border-top: 1px solid var(--frame69d7b-line);
  background: var(--frame69d7b-well);
  padding: 16px 12px 14px;
}

.frame69d7b-xfbrand strong {
  display: block;
  font-family: var(--frame69d7b-font-head);
  font-size: 14.5px;
  color: var(--frame69d7b-peach);
  margin-bottom: 5px;
}

.frame69d7b-xfbrand p {
  font-size: 11.8px;
  color: var(--frame69d7b-mist);
  margin: 0;
}

.frame69d7b-xfhead {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--frame69d7b-teal);
  margin: 16px 0 7px;
}

.frame69d7b-xfacts { display: grid; gap: 7px; }

.frame69d7b-xfact {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  width: 100%;
  padding: 8px 11px;
  border-radius: var(--frame69d7b-radius-mid);
  background: var(--frame69d7b-panel-soft);
  border: 1px solid var(--frame69d7b-line-soft);
  text-align: left;
  transition: border-color 0.16s ease, transform 0.12s ease;
}
.frame69d7b-xfact:active { transform: translateY(-2px); border-color: var(--frame69d7b-line); }

.frame69d7b-xfact svg { flex: none; width: 15px; height: 15px; fill: var(--frame69d7b-rose); }

.frame69d7b-xfact strong {
  display: block;
  font-size: 12.3px;
  color: var(--frame69d7b-peach);
}

.frame69d7b-xfact span {
  display: block;
  font-size: 10.4px;
  color: var(--frame69d7b-dim);
}

.frame69d7b-xfdir {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
}

.frame69d7b-xfdir a {
  display: block;
  padding: 7px 9px;
  border-radius: var(--frame69d7b-radius-s);
  background: rgba(34, 50, 82, 0.55);
  border: 1px solid var(--frame69d7b-line-soft);
  font-size: 11.6px;
  font-weight: 700;
  color: var(--frame69d7b-teal);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.frame69d7b-xfdir a:hover,
.frame69d7b-xfdir a:focus-visible { color: var(--frame69d7b-cyan); border-color: var(--frame69d7b-line); }

.frame69d7b-xfdir em {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 9.8px;
  color: var(--frame69d7b-dim);
  margin-top: 1px;
}

.frame69d7b-xfnote {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--frame69d7b-line-soft);
  font-size: 10.6px;
  line-height: 1.5;
  color: var(--frame69d7b-dim);
}

/* ---------- common footer + bottom rail ---------- */

.frame69d7b-footer {
  text-align: center;
  font-size: 11px;
  color: var(--frame69d7b-dim);
  padding: 12px 12px calc(var(--frame69d7b-rail-h) + 26px + env(safe-area-inset-bottom));
}

.frame69d7b-rail {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 41;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(16, 24, 40, 0.97);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--frame69d7b-line);
  padding: 3px 2px calc(3px + env(safe-area-inset-bottom));
}

.frame69d7b-raillink {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 4px 2px;
  border-radius: var(--frame69d7b-radius-s);
  color: var(--frame69d7b-dim);
  transition: transform 0.12s ease, color 0.16s ease;
}

.frame69d7b-raillink:active { transform: translateY(-2px); }

.frame69d7b-raillink svg {
  width: 21px;
  height: 21px;
  fill: var(--frame69d7b-dim);
  transition: fill 0.16s ease;
}

.frame69d7b-raillink span {
  font-size: 9.6px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* active role: top indicator line + cyan fill */
.frame69d7b-raillink.frame69d7b-is-active { color: var(--frame69d7b-cyan); }
.frame69d7b-raillink.frame69d7b-is-active svg { fill: var(--frame69d7b-cyan); }
.frame69d7b-raillink.frame69d7b-is-active::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  border-radius: 99px;
  background: var(--frame69d7b-cyan);
}

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

@media (min-width: 360px) {
  .frame69d7b-hero h1 { font-size: 22px; }
  .frame69d7b-tname { font-size: 10.6px; }
}

/* wider phones: 5 game columns across the 430px canvas */
@media (min-width: 390px) {
  .frame69d7b-grid { grid-template-columns: repeat(5, 1fr); gap: 9px; }
  .frame69d7b-hero h1 { font-size: 23px; }
}

/* wide screens: keep the centred phone canvas, no desktop rebuild */
@media (min-width: 431px) {
  body { padding: 0 0 24px; }
  .frame69d7b-canvas {
    border-left: 1px solid var(--frame69d7b-line-soft);
    border-right: 1px solid var(--frame69d7b-line-soft);
    box-shadow: 0 0 70px rgba(0, 255, 255, 0.05);
    min-height: calc(100vh - 24px);
  }
}

/* ---------- motion budget: light press + colour only ---------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .frame69d7b-ctrack { transition: none !important; }
}

/* ---------- help page layouts ---------- */

.frame69d7b-help-main {
  padding-top: calc(var(--frame69d7b-top-h) + 12px);
}

.frame69d7b-help-hero {
  padding: 16px 14px 14px;
  border: 1px solid var(--frame69d7b-line);
  border-radius: var(--frame69d7b-radius);
  background: linear-gradient(145deg, #263b60 0%, var(--frame69d7b-well) 82%);
  margin-bottom: 14px;
}

.frame69d7b-help-hero h1 {
  font-size: 22px;
  color: var(--frame69d7b-peach);
  margin-bottom: 8px;
}

.frame69d7b-help-hero p,
.frame69d7b-help-card p,
.frame69d7b-faq-card p,
.frame69d7b-answer p {
  font-size: 12.6px;
  color: var(--frame69d7b-mist);
}

.frame69d7b-help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.frame69d7b-help-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 99px;
  background: var(--frame69d7b-magenta);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
}

.frame69d7b-help-action.frame69d7b-secondary {
  background: transparent;
  border: 1px solid var(--frame69d7b-teal);
  color: var(--frame69d7b-teal);
}

.frame69d7b-safety-map {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
}

.frame69d7b-safety-card {
  position: relative;
  padding: 12px 12px 12px 44px;
  border: 1px solid var(--frame69d7b-line-soft);
  border-radius: var(--frame69d7b-radius-mid);
  background: var(--frame69d7b-panel-soft);
}

.frame69d7b-safety-card::before {
  content: attr(data-step);
  position: absolute;
  left: 12px;
  top: 13px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 7px;
  background: var(--frame69d7b-teal);
  color: #082421;
  font-size: 11px;
  font-weight: 800;
}

.frame69d7b-safety-card h3,
.frame69d7b-help-card h3,
.frame69d7b-faq-card h3 {
  font-size: 14px;
  color: var(--frame69d7b-peach);
  margin-bottom: 5px;
}

.frame69d7b-safety-card p,
.frame69d7b-help-card p,
.frame69d7b-faq-card p {
  margin-bottom: 0;
}

.frame69d7b-help-card {
  margin-top: 12px;
  padding: 13px 12px;
  border-top: 3px solid var(--frame69d7b-teal);
  border-radius: var(--frame69d7b-radius-mid);
  background: var(--frame69d7b-panel-soft);
}

.frame69d7b-help-card ul,
.frame69d7b-help-card ol {
  margin: 9px 0 0;
  padding-left: 20px;
  color: var(--frame69d7b-mist);
  font-size: 12.2px;
}

.frame69d7b-help-card li + li { margin-top: 7px; }

.frame69d7b-help-card strong,
.frame69d7b-faq-card strong,
.frame69d7b-answer strong { color: var(--frame69d7b-peach); }

.frame69d7b-support-rail {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.frame69d7b-support-link {
  display: block;
  padding: 10px 11px;
  border: 1px solid var(--frame69d7b-line-soft);
  border-radius: var(--frame69d7b-radius-s);
  background: rgba(34, 50, 82, 0.66);
  color: var(--frame69d7b-teal);
  font-size: 12px;
  font-weight: 700;
}

.frame69d7b-support-link span {
  display: block;
  margin-top: 2px;
  color: var(--frame69d7b-dim);
  font-size: 10.5px;
  font-weight: 400;
}

.frame69d7b-faq-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.frame69d7b-faq-index a {
  min-height: 44px;
  padding: 8px 9px;
  border: 1px solid var(--frame69d7b-line-soft);
  border-radius: var(--frame69d7b-radius-s);
  background: var(--frame69d7b-well);
  color: var(--frame69d7b-teal);
  font-size: 11.2px;
  font-weight: 700;
}

.frame69d7b-faq-card {
  margin-top: 12px;
  padding: 13px 12px;
  border: 1px solid var(--frame69d7b-line-soft);
  border-radius: var(--frame69d7b-radius-mid);
  background: linear-gradient(160deg, var(--frame69d7b-panel-soft), var(--frame69d7b-well));
}

.frame69d7b-faq-card h3 { display: flex; gap: 7px; align-items: baseline; }
.frame69d7b-faq-card h3 span { color: var(--frame69d7b-cyan); font-size: 11px; }

.frame69d7b-faq-check {
  margin-top: 10px;
  padding: 10px 11px;
  border-left: 3px solid var(--frame69d7b-rose);
  background: rgba(173, 20, 87, 0.14);
  color: var(--frame69d7b-mist);
  font-size: 12px;
}

.frame69d7b-faq-check b { color: var(--frame69d7b-peach); }

.frame69d7b-answer {
  margin-top: 12px;
  padding: 14px 12px;
  border-radius: var(--frame69d7b-radius);
  background: #263b60;
  border: 1px solid var(--frame69d7b-line);
}

.frame69d7b-answer h3 {
  font-size: 15px;
  color: var(--frame69d7b-cyan);
  margin-bottom: 6px;
}

.frame69d7b-scenario {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.frame69d7b-scenario article {
  padding: 10px 11px;
  border-radius: var(--frame69d7b-radius-s);
  background: var(--frame69d7b-well);
  border: 1px dashed var(--frame69d7b-line-soft);
}

.frame69d7b-scenario h3 { font-size: 13px; margin-bottom: 4px; }
.frame69d7b-scenario p { margin: 0; font-size: 11.9px; color: var(--frame69d7b-mist); }

.frame69d7b-help-footer {
  margin-top: 20px;
  padding: 14px 12px calc(var(--frame69d7b-rail-h) + 30px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--frame69d7b-line);
  background: var(--frame69d7b-well);
}

.frame69d7b-help-footer p { margin: 0; color: var(--frame69d7b-dim); font-size: 11px; }
.frame69d7b-help-footer nav { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: 9px; }
.frame69d7b-help-footer nav a { font-size: 11px; }

@media (min-width: 360px) {
  .frame69d7b-help-hero h1 { font-size: 23px; }
}