/* ==========================================================================
   okay play (okay-play.click) - mobile-first base stylesheet
   phone canvas: 320-430px, centered on wide screens
   palette: #E9967A / #FF0000 / #1B263B / #FA8072
   shape rules: pill buttons, square cards, horizontal icon+name bars
   ========================================================================== */

/* ---------- design tokens ---------- */
:root {
  --uicce8b-bg: #1B263B;
  --uicce8b-bg-deep: #131b2c;
  --uicce8b-panel: #223252;
  --uicce8b-panel-2: #2a3c61;
  --uicce8b-panel-3: #1f2c47;
  --uicce8b-line: rgba(233, 150, 122, 0.24);
  --uicce8b-line-soft: rgba(250, 128, 114, 0.14);
  --uicce8b-rose: #FA8072;
  --uicce8b-peach: #E9967A;
  --uicce8b-cream: #FDEFE8;
  --uicce8b-cream-dim: rgba(253, 239, 232, 0.78);
  --uicce8b-alert: #FF0000;
  --uicce8b-alert-deep: #cc0000;
  --uicce8b-canvas: 430px;
  --uicce8b-top-h: 100px;
  --uicce8b-dock-h: 62px;
  --uicce8b-r-card: 3px;
  --uicce8b-r-pill: 999px;
  --uicce8b-disp: "Arial Black", "Segoe UI Black", "Trebuchet MS", system-ui, sans-serif;
  --uicce8b-body: "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --uicce8b-shadow: 0 10px 26px rgba(10, 15, 27, 0.55);
}

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

html {
  background: var(--uicce8b-bg-deep);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0 auto;
  max-width: var(--uicce8b-canvas);
  min-height: 100vh;
  background: var(--uicce8b-bg);
  color: var(--uicce8b-cream-dim);
  font-family: var(--uicce8b-body);
  font-size: 15px;
  line-height: 1.62;
  box-shadow: 0 0 44px rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--uicce8b-disp);
  color: var(--uicce8b-cream);
  line-height: 1.22;
  margin: 0 0 0.5em;
  letter-spacing: 0.2px;
}

h1 { font-size: 1.42rem; text-transform: none; }
h2 { font-size: 1.12rem; }
h3 { font-size: 0.98rem; color: var(--uicce8b-peach); }

p { margin: 0 0 0.85em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--uicce8b-rose);
  text-decoration: none;
}
a:hover, a:focus-visible { color: var(--uicce8b-cream); text-decoration: underline; }

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

:focus-visible {
  outline: 2px solid var(--uicce8b-rose);
  outline-offset: 2px;
  border-radius: 2px;
}

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

/* main canvas keeps clear of the fixed top bar and the dock */
.uicce8b-main {
  padding: calc(var(--uicce8b-top-h) + 10px) 12px calc(var(--uicce8b-dock-h) + 34px);
}

/* ==========================================================================
   top bar - two layers: brand strip above the action strip
   ========================================================================== */
.uicce8b-topbar {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--uicce8b-canvas);
  z-index: 70;
  background: linear-gradient(180deg, #1d2a44 0%, var(--uicce8b-bg) 100%);
  border-bottom: 1px solid var(--uicce8b-line);
}

/* brand layer: real logo image + wordmark only */
.uicce8b-brandrow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 7px 12px 4px;
}

.uicce8b-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--uicce8b-cream);
}
.uicce8b-brand:hover, .uicce8b-brand:focus-visible { text-decoration: none; color: var(--uicce8b-cream); }

.uicce8b-logo {
  width: 38px; height: 38px;
  object-fit: contain;
  border-radius: var(--uicce8b-r-card);
  background: var(--uicce8b-panel);
  border: 1px solid var(--uicce8b-line);
  flex: 0 0 auto;
}

.uicce8b-wordmark {
  font-family: var(--uicce8b-disp);
  font-size: 1.18rem;
  color: var(--uicce8b-cream);
  letter-spacing: 0.4px;
  line-height: 1;
}
.uicce8b-wordmark b { color: var(--uicce8b-rose); font-weight: 900; }

/* action layer: register / login / route toggle */
.uicce8b-actrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 8px;
}

.uicce8b-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--uicce8b-r-pill);
  font-family: var(--uicce8b-disp);
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background-color 0.15s linear, color 0.15s linear, border-color 0.15s linear;
}

.uicce8b-btn--reg {
  background: var(--uicce8b-alert);
  color: #fff;
  flex: 1 1 auto;
  box-shadow: 0 4px 14px rgba(255, 0, 0, 0.32);
}
.uicce8b-btn--reg:hover, .uicce8b-btn--reg:focus-visible {
  background: var(--uicce8b-alert-deep);
  color: #fff;
}

.uicce8b-btn--log {
  border: 1px solid var(--uicce8b-peach);
  color: var(--uicce8b-peach);
  flex: 0 0 auto;
  padding: 0 16px;
}
.uicce8b-btn--log:hover, .uicce8b-btn--log:focus-visible {
  background: var(--uicce8b-panel-2);
  color: var(--uicce8b-cream);
}

/* burger: 3 stacked bars, no icon font needed */
.uicce8b-burger {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--uicce8b-line);
  border-radius: var(--uicce8b-r-card);
  background: var(--uicce8b-panel-3);
}
.uicce8b-burger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--uicce8b-peach);
  border-radius: 2px;
  transition: background-color 0.15s linear, transform 0.15s linear;
}
.uicce8b-burger[aria-expanded="true"] { background: var(--uicce8b-panel-2); }
.uicce8b-burger[aria-expanded="true"] span { background: var(--uicce8b-cream); }
.uicce8b-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.uicce8b-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.uicce8b-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* expandable compact route panel */
.uicce8b-routes {
  display: none;
  padding: 6px 12px 12px;
  background: var(--uicce8b-panel-3);
  border-top: 1px solid var(--uicce8b-line-soft);
}
.uicce8b-routes.uicce8b-is-open { display: block; }

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

.uicce8b-route {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--uicce8b-line-soft);
  border-radius: var(--uicce8b-r-card);
  background: var(--uicce8b-bg);
  color: var(--uicce8b-cream-dim);
  font-size: 0.86rem;
  line-height: 1.2;
}
.uicce8b-route::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--uicce8b-peach);
  flex: 0 0 auto;
}
.uicce8b-route:hover, .uicce8b-route:focus-visible {
  background: var(--uicce8b-panel-2);
  color: var(--uicce8b-cream);
  text-decoration: none;
}
.uicce8b-route[aria-current="page"] {
  background: var(--uicce8b-rose);
  border-color: var(--uicce8b-rose);
  color: #241009;
  font-weight: 700;
}
.uicce8b-route[aria-current="page"]::before { background: #241009; }

/* ==========================================================================
   hero showcase - 3 real promo banners, slides are promo entries
   ========================================================================== */
.uicce8b-showcase {
  position: relative;
  margin: 2px 0 16px;
  border-radius: var(--uicce8b-r-card);
  overflow: hidden;
  border: 1px solid var(--uicce8b-line);
  background: var(--uicce8b-panel);
  box-shadow: var(--uicce8b-shadow);
}

.uicce8b-track {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.uicce8b-slide {
  position: relative;
  flex: 0 0 100%;
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
}
.uicce8b-slide img {
  width: 100%;
  aspect-ratio: 750 / 300;
  object-fit: cover;
}

.uicce8b-slide__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(180deg, rgba(19, 27, 44, 0) 0%, rgba(19, 27, 44, 0.92) 78%);
  display: block;
}
.uicce8b-slide__t {
  display: block;
  font-family: var(--uicce8b-disp);
  font-size: 1rem;
  color: var(--uicce8b-cream);
  line-height: 1.2;
}
.uicce8b-slide__s {
  display: block;
  font-size: 0.78rem;
  color: var(--uicce8b-cream-dim);
  margin-top: 3px;
  line-height: 1.4;
}

/* track transform driven by JS class switch (state color budget only) */
.uicce8b-slide[hidden] { display: none; }

.uicce8b-dots {
  position: absolute;
  right: 10px; bottom: 10px;
  display: flex;
  gap: 6px;
}
.uicce8b-dot {
  width: 22px; height: 8px;
  border-radius: var(--uicce8b-r-pill);
  background: rgba(253, 239, 232, 0.35);
  transition: background-color 0.15s linear;
}
.uicce8b-dot.uicce8b-is-on { background: var(--uicce8b-rose); }
.uicce8b-dot:hover { background: var(--uicce8b-cream); }

/* ==========================================================================
   intro block + category jump chips
   ========================================================================== */
.uicce8b-intro {
  margin: 0 0 18px;
  padding: 14px 14px 16px;
  background: var(--uicce8b-panel);
  border: 1px solid var(--uicce8b-line);
  border-left: 4px solid var(--uicce8b-alert);
  border-radius: var(--uicce8b-r-card);
}

.uicce8b-kicker {
  display: block;
  font-family: var(--uicce8b-disp);
  font-size: 0.66rem;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--uicce8b-rose);
  margin-bottom: 6px;
}

.uicce8b-lede { font-size: 0.92rem; }

.uicce8b-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.uicce8b-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 4px 13px;
  border: 1px solid var(--uicce8b-line);
  border-radius: var(--uicce8b-r-pill);
  background: var(--uicce8b-bg);
  color: var(--uicce8b-peach);
  font-size: 0.78rem;
  font-weight: 600;
  transition: background-color 0.15s linear, color 0.15s linear;
}
.uicce8b-chip:hover, .uicce8b-chip:focus-visible {
  background: var(--uicce8b-rose);
  border-color: var(--uicce8b-rose);
  color: #241009;
  text-decoration: none;
}

/* ==========================================================================
   section shells - each section header gets its own rhythm
   ========================================================================== */
.uicce8b-sec { margin: 0 0 22px; }

.uicce8b-sechead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px solid var(--uicce8b-line);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.uicce8b-sechead h2 { margin: 0; }
.uicce8b-sechead--flat {
  border-bottom: 0;
  padding: 8px 10px;
  background: var(--uicce8b-panel-3);
  border-left: 4px solid var(--uicce8b-peach);
  border-radius: var(--uicce8b-r-card);
  margin-bottom: 12px;
}
.uicce8b-sechead--flat h2 { font-size: 1.02rem; }

.uicce8b-count {
  flex: 0 0 auto;
  font-family: var(--uicce8b-disp);
  font-size: 0.68rem;
  color: #241009;
  background: var(--uicce8b-rose);
  border-radius: var(--uicce8b-r-pill);
  padding: 3px 10px;
  white-space: nowrap;
}

.uicce8b-catlede { font-size: 0.87rem; margin: 0 0 10px; }

.uicce8b-subhead {
  font-family: var(--uicce8b-disp);
  font-size: 0.92rem;
  color: var(--uicce8b-peach);
  margin: 0 0 8px;
}

/* ==========================================================================
   game areas - five different presentations, all written in HTML
   ========================================================================== */

/* hot: 4-col compact icon grid (5 cols on wider phones) */
.uicce8b-hotgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.uicce8b-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px;
  background: var(--uicce8b-panel-3);
  border: 1px solid var(--uicce8b-line-soft);
  border-radius: var(--uicce8b-r-card);
  text-align: center;
  transition: background-color 0.15s linear, border-color 0.15s linear;
}
.uicce8b-tile:hover, .uicce8b-tile:focus-visible {
  background: var(--uicce8b-panel-2);
  border-color: var(--uicce8b-rose);
}
.uicce8b-tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 2px;
}
.uicce8b-tile__name {
  font-size: 0.62rem;
  line-height: 1.25;
  color: var(--uicce8b-cream-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 1.6em;
}

/* slot: 2-col horizontal icon+name bars */
.uicce8b-barlist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.uicce8b-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: var(--uicce8b-panel-3);
  border: 1px solid var(--uicce8b-line-soft);
  border-radius: var(--uicce8b-r-card);
  min-height: 58px;
  text-align: left;
  transition: background-color 0.15s linear, border-color 0.15s linear;
}
.uicce8b-bar:hover, .uicce8b-bar:focus-visible {
  background: var(--uicce8b-panel-2);
  border-color: var(--uicce8b-rose);
}
.uicce8b-bar img {
  width: 44px; height: 44px;
  object-fit: cover;
  border-radius: 2px;
  flex: 0 0 auto;
}
.uicce8b-bar__name {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--uicce8b-cream-dim);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* fishing: swipeable rail of square cards */
.uicce8b-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 10px;
  -webkit-overflow-scrolling: touch;
}
.uicce8b-rail::-webkit-scrollbar { height: 4px; }
.uicce8b-rail::-webkit-scrollbar-thumb { background: var(--uicce8b-panel-2); border-radius: 4px; }
.uicce8b-railcard {
  flex: 0 0 92px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px;
  background: var(--uicce8b-panel-3);
  border: 1px solid var(--uicce8b-line-soft);
  border-radius: var(--uicce8b-r-card);
  text-align: center;
  transition: background-color 0.15s linear, border-color 0.15s linear;
}
.uicce8b-railcard:hover, .uicce8b-railcard:focus-visible {
  background: var(--uicce8b-panel-2);
  border-color: var(--uicce8b-rose);
}
.uicce8b-railcard img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 2px;
}
.uicce8b-railcard__name {
  font-size: 0.64rem;
  line-height: 1.25;
  color: var(--uicce8b-cream-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.uicce8b-railhint {
  font-size: 0.72rem;
  color: var(--uicce8b-peach);
  margin: 2px 0 8px;
}

/* cards: 2-col bars, name first + icon right (mirror of slot bars) */
.uicce8b-deckgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.uicce8b-deck {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  background: var(--uicce8b-panel-3);
  border: 1px solid var(--uicce8b-line-soft);
  border-radius: var(--uicce8b-r-card);
  min-height: 60px;
  text-align: left;
  transition: background-color 0.15s linear, border-color 0.15s linear;
}
.uicce8b-deck:hover, .uicce8b-deck:focus-visible {
  background: var(--uicce8b-panel-2);
  border-color: var(--uicce8b-rose);
}
.uicce8b-deck__name {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--uicce8b-cream-dim);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.uicce8b-deck img {
  width: 46px; height: 46px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--uicce8b-line);
  flex: 0 0 auto;
}

/* live: single-column table bars with LIVE tag */
.uicce8b-tables {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}
.uicce8b-table {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  background: linear-gradient(90deg, var(--uicce8b-panel-3) 0%, var(--uicce8b-panel) 100%);
  border: 1px solid var(--uicce8b-line-soft);
  border-radius: var(--uicce8b-r-card);
  min-height: 64px;
  text-align: left;
  transition: background-color 0.15s linear, border-color 0.15s linear;
}
.uicce8b-table:hover, .uicce8b-table:focus-visible {
  border-color: var(--uicce8b-rose);
  background: linear-gradient(90deg, var(--uicce8b-panel-2) 0%, var(--uicce8b-panel) 100%);
}
.uicce8b-table img {
  width: 48px; height: 48px;
  object-fit: cover;
  border-radius: var(--uicce8b-r-card);
  flex: 0 0 auto;
}
.uicce8b-table__name {
  flex: 1 1 auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--uicce8b-cream-dim);
  line-height: 1.3;
}
.uicce8b-table__tag {
  flex: 0 0 auto;
  font-family: var(--uicce8b-disp);
  font-size: 0.58rem;
  letter-spacing: 1px;
  color: #fff;
  background: var(--uicce8b-alert);
  border-radius: var(--uicce8b-r-pill);
  padding: 3px 8px;
}

/* ==========================================================================
   content modules
   ========================================================================== */
.uicce8b-panel {
  background: var(--uicce8b-panel);
  border: 1px solid var(--uicce8b-line);
  border-radius: var(--uicce8b-r-card);
  padding: 14px 14px 16px;
  margin: 0 0 22px;
}
.uicce8b-panel p { font-size: 0.88rem; }

/* quick answers: question strip + plain answer */
.uicce8b-qa {
  border-top: 1px dashed var(--uicce8b-line);
  padding-top: 12px;
  margin-top: 12px;
}
.uicce8b-qa:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.uicce8b-qa h3 {
  margin: 0 0 4px;
  font-size: 0.9rem;
  color: var(--uicce8b-rose);
}
.uicce8b-qa p { margin: 0; font-size: 0.86rem; }

/* category fit rows (definition list) */
.uicce8b-fit { margin: 0; }
.uicce8b-fit__row {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--uicce8b-line-soft);
}
.uicce8b-fit__row:last-child { border-bottom: 0; }
.uicce8b-fit dt {
  flex: 0 0 78px;
  font-family: var(--uicce8b-disp);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--uicce8b-peach);
  padding-top: 2px;
}
.uicce8b-fit dd {
  margin: 0;
  font-size: 0.85rem;
  flex: 1 1 auto;
}

/* numbered safety checks */
.uicce8b-checks {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: uicce8b-check;
}
.uicce8b-checks li {
  counter-increment: uicce8b-check;
  position: relative;
  padding: 0 0 10px 40px;
  font-size: 0.86rem;
}
.uicce8b-checks li:last-child { padding-bottom: 0; }
.uicce8b-checks li::before {
  content: counter(uicce8b-check, decimal-leading-zero);
  position: absolute;
  left: 0; top: 1px;
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--uicce8b-panel-2);
  border: 1px solid var(--uicce8b-line);
  border-radius: var(--uicce8b-r-card);
  font-family: var(--uicce8b-disp);
  font-size: 0.68rem;
  color: var(--uicce8b-rose);
}
.uicce8b-checks b { color: var(--uicce8b-cream); }

/* ordered play steps */
.uicce8b-steps {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: uicce8b-step;
}
.uicce8b-steps li {
  counter-increment: uicce8b-step;
  position: relative;
  margin: 0 0 10px;
  padding: 10px 12px 10px 52px;
  background: var(--uicce8b-panel-3);
  border: 1px solid var(--uicce8b-line-soft);
  border-radius: var(--uicce8b-r-card);
  font-size: 0.86rem;
}
.uicce8b-steps li:last-child { margin-bottom: 0; }
.uicce8b-steps li::before {
  content: counter(uicce8b-step);
  position: absolute;
  left: 10px; top: 10px;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--uicce8b-rose);
  color: #241009;
  border-radius: 50%;
  font-family: var(--uicce8b-disp);
  font-size: 0.85rem;
}
.uicce8b-steps b { color: var(--uicce8b-cream); display: block; margin-bottom: 2px; }

/* step summary recap */
.uicce8b-recap {
  background: var(--uicce8b-panel-3);
  border: 1px solid var(--uicce8b-line);
  border-left: 4px solid var(--uicce8b-rose);
  border-radius: var(--uicce8b-r-card);
  padding: 12px 14px;
}
.uicce8b-recap ul {
  list-style: none;
  margin: 0; padding: 0;
}
.uicce8b-recap li {
  position: relative;
  padding: 0 0 8px 22px;
  font-size: 0.86rem;
}
.uicce8b-recap li:last-child { padding-bottom: 0; }
.uicce8b-recap li::before {
  content: "";
  position: absolute;
  left: 2px; top: 7px;
  width: 8px; height: 8px;
  background: var(--uicce8b-peach);
  border-radius: 2px;
}

/* ==========================================================================
   extended footer (homepage only): promos > brand > directory > note
   ========================================================================== */
.uicce8b-xfooter {
  margin: 26px 0 0;
  border-top: 2px solid var(--uicce8b-line);
  padding: 16px 12px 8px;
  background: var(--uicce8b-bg-deep);
}

.uicce8b-xf-label {
  font-family: var(--uicce8b-disp);
  font-size: 0.68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--uicce8b-peach);
  margin: 0 0 10px;
}

/* promo actions: one large + four medium, staggered sizes */
.uicce8b-xf-promos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
}
.uicce8b-xf-promo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: var(--uicce8b-r-pill);
  font-family: var(--uicce8b-disp);
  font-size: 0.74rem;
  line-height: 1.2;
  letter-spacing: 0.3px;
  text-align: left;
  transition: background-color 0.15s linear, color 0.15s linear;
}
.uicce8b-xf-promo svg { flex: 0 0 auto; }
.uicce8b-xf-promo--hero {
  grid-column: 1 / -1;
  min-height: 56px;
  font-size: 0.88rem;
  justify-content: center;
  background: var(--uicce8b-alert);
  color: #fff;
  box-shadow: 0 4px 16px rgba(255, 0, 0, 0.3);
}
.uicce8b-xf-promo--hero:hover, .uicce8b-xf-promo--hero:focus-visible { background: var(--uicce8b-alert-deep); color: #fff; }
.uicce8b-xf-promo--alt {
  background: var(--uicce8b-panel-2);
  color: var(--uicce8b-cream);
  border: 1px solid var(--uicce8b-line);
}
.uicce8b-xf-promo--alt:hover, .uicce8b-xf-promo--alt:focus-visible { background: var(--uicce8b-rose); color: #241009; border-color: var(--uicce8b-rose); }

.uicce8b-xf-brand {
  font-size: 0.84rem;
  color: var(--uicce8b-cream-dim);
  margin: 0 0 18px;
}

/* two-column page directory */
.uicce8b-xf-dir {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin: 0 0 18px;
}
.uicce8b-xf-dir a {
  display: block;
  padding: 7px 2px;
  border-bottom: 1px solid var(--uicce8b-line-soft);
  font-size: 0.8rem;
  color: var(--uicce8b-cream-dim);
}
.uicce8b-xf-dir a:hover, .uicce8b-xf-dir a:focus-visible {
  color: var(--uicce8b-rose);
  text-decoration: none;
  border-bottom-color: var(--uicce8b-rose);
}

.uicce8b-xf-note {
  font-size: 0.72rem;
  line-height: 1.55;
  color: rgba(253, 239, 232, 0.55);
  border-top: 1px solid var(--uicce8b-line-soft);
  padding-top: 10px;
  margin: 0 0 8px;
}

/* plain copyright strip */
.uicce8b-foot {
  padding: 10px 12px 12px;
  background: var(--uicce8b-bg-deep);
  border-top: 1px solid var(--uicce8b-line-soft);
  text-align: center;
  font-size: 0.74rem;
  color: rgba(253, 239, 232, 0.5);
}

/* ==========================================================================
   mobile dock: 5 fixed roles at the bottom of the phone canvas
   ========================================================================== */
.uicce8b-dock {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--uicce8b-canvas);
  z-index: 80;
  display: flex;
  background: #16203a;
  border-top: 1px solid var(--uicce8b-line);
  padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px));
}

.uicce8b-dock__btn {
  flex: 1 1 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 54px;
  min-width: 44px;
  color: var(--uicce8b-peach);
  border-radius: var(--uicce8b-r-card);
  transition: color 0.15s linear, transform 0.15s linear;
}
.uicce8b-dock__btn span {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1;
}
.uicce8b-dock__btn:hover { color: var(--uicce8b-cream); }
.uicce8b-dock__btn:active { transform: translateY(-2px); }

/* active role: contrast inversion */
.uicce8b-dock__btn--on {
  background: var(--uicce8b-rose);
  color: #241009;
}
.uicce8b-dock__btn--on:hover, .uicce8b-dock__btn--on:focus-visible { color: #241009; }

/* promo roles wear the alert red */
.uicce8b-dock__btn--promo { color: #ff5a4d; }
.uicce8b-dock__btn--promo:hover { color: #ffb3a8; }

/* ==========================================================================
   small utilities
   ========================================================================== */
.uicce8b-grouplink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 18px;
  margin: 4px 0 0;
  border-radius: var(--uicce8b-r-pill);
  background: var(--uicce8b-alert);
  color: #fff;
  font-family: var(--uicce8b-disp);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background-color 0.15s linear;
}
.uicce8b-grouplink:hover, .uicce8b-grouplink:focus-visible { background: var(--uicce8b-alert-deep); color: #fff; text-decoration: none; }

.uicce8b-totop {
  position: fixed;
  right: calc(50% - var(--uicce8b-canvas) / 2 + 10px);
  bottom: calc(var(--uicce8b-dock-h) + 14px);
  z-index: 60;
  width: 40px; height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--uicce8b-r-pill);
  background: var(--uicce8b-panel-2);
  border: 1px solid var(--uicce8b-line);
  color: var(--uicce8b-peach);
}
.uicce8b-totop.uicce8b-is-shown { display: flex; }
.uicce8b-totop:hover { color: var(--uicce8b-cream); background: var(--uicce8b-panel); }

/* ==========================================================================
   responsive steps inside the 320-430px phone band
   ========================================================================== */

/* small phones: tighten the hot grid, keep 4 tracks */
@media (max-width: 359px) {
  .uicce8b-tile__name { font-size: 0.58rem; }
  .uicce8b-bar img { width: 40px; height: 40px; }
  .uicce8b-xf-promo { font-size: 0.68rem; }
}

/* 375px and up: a little air */
@media (min-width: 375px) {
  .uicce8b-lede { font-size: 0.95rem; }
  .uicce8b-railcard { flex-basis: 98px; }
  .uicce8b-tile__name { font-size: 0.66rem; }
}

/* 400px and up: hot grid widens to 5 tracks */
@media (min-width: 400px) {
  .uicce8b-hotgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* 430px and beyond: canvas locks, spacing settles */
@media (min-width: 430px) {
  .uicce8b-main { padding-left: 16px; padding-right: 16px; }
  .uicce8b-panel { padding: 16px 16px 18px; }
  .uicce8b-slide__t { font-size: 1.08rem; }
  .uicce8b-tables { gap: 8px; }
  .uicce8b-xfooter { padding-left: 16px; padding-right: 16px; }
}

/* wide screens: keep the phone canvas centered, darken the letterbox */
@media (min-width: 560px) {
  body { border-left: 1px solid rgba(233, 150, 122, 0.18); border-right: 1px solid rgba(233, 150, 122, 0.18); }
}

/* respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .uicce8b-dock__btn:active { transform: none; }
}

/* ---------- help-page editorial layouts ---------- */
.uicce8b-pageintro {
  padding: 16px 14px 18px;
  margin: 0 0 18px;
  border: 1px solid var(--uicce8b-line);
  border-top: 4px solid var(--uicce8b-rose);
  background: linear-gradient(145deg, var(--uicce8b-panel) 0%, var(--uicce8b-panel-3) 100%);
  border-radius: var(--uicce8b-r-card);
}
.uicce8b-pageintro h1 { margin-bottom: 10px; }
.uicce8b-pageintro p { font-size: 0.9rem; }
.uicce8b-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--uicce8b-peach);
  font-family: var(--uicce8b-disp);
  font-size: 0.66rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.uicce8b-journey {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: uicce8b-journey;
}
.uicce8b-journey li {
  position: relative;
  min-height: 70px;
  padding: 11px 12px 11px 58px;
  border-left: 3px solid var(--uicce8b-peach);
  background: var(--uicce8b-panel-3);
  border-radius: 0 var(--uicce8b-r-card) var(--uicce8b-r-card) 0;
}
.uicce8b-journey li::before {
  counter-increment: uicce8b-journey;
  content: counter(uicce8b-journey, decimal-leading-zero);
  position: absolute;
  left: 12px;
  top: 13px;
  color: var(--uicce8b-bg);
  background: var(--uicce8b-peach);
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--uicce8b-disp);
  font-size: 0.68rem;
}
.uicce8b-journey strong, .uicce8b-task strong { color: var(--uicce8b-cream); }
.uicce8b-journey p { margin: 3px 0 0; font-size: 0.84rem; }
.uicce8b-compare {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1px;
  margin: 0;
  border: 1px solid var(--uicce8b-line-soft);
  background: var(--uicce8b-line-soft);
}
.uicce8b-compare dt, .uicce8b-compare dd {
  margin: 0;
  padding: 9px 10px;
  background: var(--uicce8b-panel-3);
  font-size: 0.82rem;
}
.uicce8b-compare dt {
  color: var(--uicce8b-peach);
  font-family: var(--uicce8b-disp);
  font-size: 0.7rem;
  letter-spacing: 0.4px;
}
.uicce8b-quote {
  margin: 0 0 18px;
  padding: 13px 15px;
  border-left: 4px solid var(--uicce8b-alert);
  background: rgba(255, 0, 0, 0.08);
  color: var(--uicce8b-cream);
  font-size: 0.94rem;
}
.uicce8b-taskgrid {
  display: grid;
  gap: 9px;
  margin: 0;
}
.uicce8b-task {
  padding: 12px 13px;
  border: 1px solid var(--uicce8b-line-soft);
  border-radius: var(--uicce8b-r-card);
  background: var(--uicce8b-panel-3);
}
.uicce8b-task strong { display: block; margin-bottom: 4px; color: var(--uicce8b-rose); }
.uicce8b-task p { margin: 0; font-size: 0.84rem; }
.uicce8b-split {
  display: grid;
  gap: 10px;
}
.uicce8b-split > div {
  padding: 11px 12px;
  border-top: 2px solid var(--uicce8b-peach);
  background: var(--uicce8b-panel-3);
}
.uicce8b-split h3 { margin-bottom: 5px; }
.uicce8b-split p { font-size: 0.84rem; }
.uicce8b-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.uicce8b-inline-actions .uicce8b-grouplink { margin: 0; }
@media (min-width: 375px) {
  .uicce8b-pageintro { padding-left: 16px; padding-right: 16px; }
  .uicce8b-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}