/* ==========================================================================
   tinc88top.click - mobile-first viewport stylesheet
   Prefix contract: every class uses ui6a2ce- (site hash 96a2cef5)
   Palette: ember #FF5722 / mist #CED4DA / lavender #E6E6FA / night #1A1A2E
            amethyst #9370DB / gold #FFAA00
   Design tone: geometric headings + neutral body, mixed radii, compact
   square tile catalog, question-driven rhythm, short-range transitions,
   segmented action buttons.
   ========================================================================== */

:root {
  --ui6a2ce-night: #1A1A2E;
  --ui6a2ce-deep: #14142a;
  --ui6a2ce-panel: #23234a;
  --ui6a2ce-panel-2: #2b2b57;
  --ui6a2ce-line: #3a3a6e;
  --ui6a2ce-lav: #E6E6FA;
  --ui6a2ce-mist: #CED4DA;
  --ui6a2ce-ember: #FF5722;
  --ui6a2ce-ember-deep: #d84315;
  --ui6a2ce-amethyst: #9370DB;
  --ui6a2ce-gold: #FFAA00;
  --ui6a2ce-radius-lg: 18px;
  --ui6a2ce-radius-md: 12px;
  --ui6a2ce-radius-sm: 7px;
  --ui6a2ce-topbar-h: 58px;
  --ui6a2ce-dock-h: 68px;
  --ui6a2ce-font-head: "Avenir Next", "Segoe UI", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
  --ui6a2ce-font-body: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: var(--ui6a2ce-font-body);
  background: var(--ui6a2ce-deep);
  color: var(--ui6a2ce-lav);
  font-size: 15px;
  line-height: 1.62;
  min-height: 100vh;
}

/* Centered phone canvas on wide screens */
.ui6a2ce-shell {
  max-width: 478px;
  margin: 0 auto;
  min-height: 100vh;
  background:
    radial-gradient(120% 42% at 50% 0%, #2c2050 0%, var(--ui6a2ce-night) 46%, var(--ui6a2ce-night) 100%);
  box-shadow: 0 0 44px rgba(0, 0, 0, .55);
  position: relative;
}

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

a { color: var(--ui6a2ce-gold); text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ui6a2ce-gold);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Top bar : logo-led action strip
   -------------------------------------------------------------------------- */
.ui6a2ce-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--ui6a2ce-topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: linear-gradient(180deg, #201f42 0%, #1b1b38 100%);
  border-bottom: 1px solid var(--ui6a2ce-line);
}

.ui6a2ce-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.ui6a2ce-brand__logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--ui6a2ce-amethyst);
  object-fit: cover;
  flex: none;
  background: #0e0e20;
}

.ui6a2ce-brand__name {
  font-family: var(--ui6a2ce-font-head);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .4px;
  color: #fff;
  white-space: nowrap;
}
.ui6a2ce-brand__name em {
  font-style: normal;
  color: var(--ui6a2ce-ember);
}

/* segmented action buttons */
.ui6a2ce-actions { display: flex; align-items: stretch; gap: 6px; flex: none; }

.ui6a2ce-act {
  font-family: var(--ui6a2ce-font-head);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .3px;
  min-height: 44px;
  padding: 0 13px;
  border: none;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease;
}
.ui6a2ce-act:active { transform: translateY(1px) scale(.97); }

.ui6a2ce-act--reg {
  background: linear-gradient(135deg, var(--ui6a2ce-ember) 0%, #ff8a3d 100%);
  color: #fff;
  border-radius: var(--ui6a2ce-radius-sm) var(--ui6a2ce-radius-sm) var(--ui6a2ce-radius-sm) 4px;
}
.ui6a2ce-act--log {
  background: transparent;
  color: var(--ui6a2ce-lav);
  border: 1px solid var(--ui6a2ce-amethyst);
  border-radius: 4px var(--ui6a2ce-radius-sm) var(--ui6a2ce-radius-sm) var(--ui6a2ce-radius-sm);
}

.ui6a2ce-burger {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--ui6a2ce-line);
  border-radius: var(--ui6a2ce-radius-sm);
  cursor: pointer;
}
.ui6a2ce-burger i {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ui6a2ce-mist);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.ui6a2ce-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ui6a2ce-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.ui6a2ce-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Layered dropdown menu
   -------------------------------------------------------------------------- */
.ui6a2ce-menu {
  position: absolute;
  top: var(--ui6a2ce-topbar-h);
  left: 0;
  right: 0;
  z-index: 55;
  background: #191932;
  border-bottom: 1px solid var(--ui6a2ce-line);
  box-shadow: 0 16px 26px rgba(0, 0, 0, .5);
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;
}
.ui6a2ce-menu.ui6a2ce-menu--open { max-height: 620px; }

.ui6a2ce-menu__layer { padding: 8px 12px 4px; }
.ui6a2ce-menu__layer + .ui6a2ce-menu__layer { border-top: 1px dashed #33335f; }

.ui6a2ce-menu__tag {
  display: block;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ui6a2ce-amethyst);
  font-weight: 700;
  padding: 6px 2px 4px;
}

.ui6a2ce-menu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-bottom: 6px; }

.ui6a2ce-menu__link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  background: #212144;
  border: 1px solid #34345f;
  border-radius: var(--ui6a2ce-radius-sm);
  color: var(--ui6a2ce-lav);
  font-size: 13.5px;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease;
}
.ui6a2ce-menu__link:active { background: #2c2c58; border-color: var(--ui6a2ce-amethyst); }
.ui6a2ce-menu__link span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ui6a2ce-ember); flex: none;
}

/* --------------------------------------------------------------------------
   Hero carousel
   -------------------------------------------------------------------------- */
.ui6a2ce-hero {
  position: relative;
  margin: 10px 10px 4px;
  border-radius: var(--ui6a2ce-radius-lg);
  overflow: hidden;
  border: 1px solid #3c3c72;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .4);
}

.ui6a2ce-track { display: flex; transition: transform .38s ease; }

.ui6a2ce-slide {
  flex: 0 0 100%;
  position: relative;
  cursor: pointer;
  display: block;
}
.ui6a2ce-slide__img { width: 100%; height: 172px; object-fit: cover; }
.ui6a2ce-slide__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 12px 10px;
  background: linear-gradient(180deg, rgba(20, 20, 42, 0) 0%, rgba(20, 20, 42, .92) 78%);
  font-family: var(--ui6a2ce-font-head);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.ui6a2ce-slide__cap b { color: var(--ui6a2ce-gold); }

.ui6a2ce-dots {
  position: absolute;
  right: 10px; bottom: 8px;
  display: flex; gap: 6px;
}
.ui6a2ce-dots button {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid var(--ui6a2ce-mist);
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.ui6a2ce-dots button.ui6a2ce-dots--on {
  background: var(--ui6a2ce-ember);
  border-color: var(--ui6a2ce-ember);
}

/* --------------------------------------------------------------------------
   Main flow
   -------------------------------------------------------------------------- */
.ui6a2ce-main { padding: 4px 12px calc(var(--ui6a2ce-dock-h) + 26px); }

.ui6a2ce-h1 {
  font-family: var(--ui6a2ce-font-head);
  font-size: 21px;
  line-height: 1.32;
  font-weight: 800;
  color: #fff;
  padding: 8px 2px 2px;
}
.ui6a2ce-h1 b { color: var(--ui6a2ce-gold); }

.ui6a2ce-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ui6a2ce-gold);
  border: 1px dashed #6a5a1e;
  border-radius: 999px;
  padding: 3px 10px;
}

.ui6a2ce-h2 {
  font-family: var(--ui6a2ce-font-head);
  font-size: 17.5px;
  line-height: 1.38;
  font-weight: 800;
  color: #fff;
  margin: 26px 0 8px;
  padding-left: 10px;
  border-left: 4px solid var(--ui6a2ce-ember);
}
.ui6a2ce-h2 em { font-style: normal; color: var(--ui6a2ce-ember); }

.ui6a2ce-h3 {
  font-family: var(--ui6a2ce-font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--ui6a2ce-lav);
  margin: 14px 0 6px;
}
.ui6a2ce-h3 span { color: var(--ui6a2ce-amethyst); }

.ui6a2ce-p { margin: 8px 0; color: var(--ui6a2ce-mist); }
.ui6a2ce-p strong { color: var(--ui6a2ce-lav); }
.ui6a2ce-p a { border-bottom: 1px dotted var(--ui6a2ce-gold); }

.ui6a2ce-cta-inline {
  display: inline-block;
  margin: 10px 0 4px;
  padding: 9px 16px;
  border: none;
  cursor: pointer;
  font-family: var(--ui6a2ce-font-head);
  font-weight: 700;
  font-size: 13.5px;
  color: #fff;
  background: linear-gradient(135deg, var(--ui6a2ce-amethyst) 0%, #7a5bd0 100%);
  border-radius: 4px 14px 4px 14px;
}
.ui6a2ce-cta-inline:active { transform: scale(.97); }

/* generic panel */
.ui6a2ce-panel {
  background: linear-gradient(180deg, var(--ui6a2ce-panel) 0%, #1f1f40 100%);
  border: 1px solid #373768;
  border-radius: var(--ui6a2ce-radius-md);
  padding: 12px;
  margin: 10px 0;
}

/* quick stat strip under h1 */
.ui6a2ce-statstrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 12px 0 4px;
}
.ui6a2ce-statstrip div {
  background: #212144;
  border: 1px solid #34345f;
  border-radius: var(--ui6a2ce-radius-sm) var(--ui6a2ce-radius-sm) 3px 3px;
  padding: 8px 4px;
  text-align: center;
}
.ui6a2ce-statstrip b {
  display: block;
  font-family: var(--ui6a2ce-font-head);
  font-size: 15px;
  color: var(--ui6a2ce-gold);
}
.ui6a2ce-statstrip small { font-size: 10.5px; color: var(--ui6a2ce-mist); letter-spacing: .3px; }

/* --------------------------------------------------------------------------
   Game catalog : compact square tiles
   -------------------------------------------------------------------------- */
.ui6a2ce-cat { margin: 18px 0 6px; }

.ui6a2ce-cat__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(90deg, #2a2452 0%, #1e1e3e 100%);
  border-left: 4px solid var(--ui6a2ce-amethyst);
  border-radius: 3px 12px 12px 3px;
}
.ui6a2ce-cat__badge {
  font-family: var(--ui6a2ce-font-head);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: var(--ui6a2ce-ember);
  padding: 2px 7px;
  border-radius: 4px;
  flex: none;
}
.ui6a2ce-cat__badge--violet { background: var(--ui6a2ce-amethyst); }
.ui6a2ce-cat__badge--gold { background: var(--ui6a2ce-gold); color: #241a00; }
.ui6a2ce-cat__title {
  font-family: var(--ui6a2ce-font-head);
  font-weight: 800;
  font-size: 15.5px;
  color: #fff;
  flex: 1;
  min-width: 0;
}
.ui6a2ce-cat__note { font-size: 11px; color: var(--ui6a2ce-mist); flex: none; }

.ui6a2ce-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 9px;
}

.ui6a2ce-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #23224a;
  border: 1px solid #37366a;
  border-radius: 10px 10px 6px 6px;
  padding: 6px 3px 7px;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease;
}
.ui6a2ce-tile:active {
  transform: scale(.94);
  border-color: var(--ui6a2ce-ember);
}
.ui6a2ce-tile__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  background: #17172f;
}
.ui6a2ce-tile__name {
  font-size: 10.5px;
  line-height: 1.3;
  text-align: center;
  color: var(--ui6a2ce-mist);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 27px;
  word-break: break-word;
}

@media (min-width: 375px) {
  .ui6a2ce-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
}

/* Large-phone refinements up to the 430px edge of the phone canvas */
@media (max-width: 430px) and (min-width: 400px) {
  .ui6a2ce-h1 { font-size: 22px; }
  .ui6a2ce-slide__img { height: 186px; }
  .ui6a2ce-tile__name { font-size: 11px; }
}

/* --------------------------------------------------------------------------
   Winners ticker
   -------------------------------------------------------------------------- */
.ui6a2ce-winrow {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 8px;
  border-bottom: 1px dashed #35356a;
  font-size: 12.5px;
}
.ui6a2ce-winrow:last-child { border-bottom: none; }
.ui6a2ce-winrow__user {
  font-weight: 700;
  color: var(--ui6a2ce-amethyst);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui6a2ce-winrow__game { color: var(--ui6a2ce-mist); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui6a2ce-winrow__amt {
  font-family: var(--ui6a2ce-font-head);
  font-weight: 800;
  color: var(--ui6a2ce-gold);
  font-size: 12px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   RTP bars
   -------------------------------------------------------------------------- */
.ui6a2ce-rtprow {
  display: grid;
  grid-template-columns: 108px 1fr 42px;
  align-items: center;
  gap: 8px;
  margin: 9px 0;
  font-size: 12.5px;
}
.ui6a2ce-rtprow__name { color: var(--ui6a2ce-mist); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui6a2ce-rtpbar {
  height: 8px;
  background: #191936;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #30305e;
}
.ui6a2ce-rtpbar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ui6a2ce-amethyst) 0%, var(--ui6a2ce-ember) 100%);
  border-radius: 999px;
}
.ui6a2ce-rtprow__val {
  font-family: var(--ui6a2ce-font-head);
  font-weight: 800;
  color: var(--ui6a2ce-gold);
  text-align: right;
}

/* --------------------------------------------------------------------------
   Achievement milestones
   -------------------------------------------------------------------------- */
.ui6a2ce-mile {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px dashed #35356a;
}
.ui6a2ce-mile:last-child { border-bottom: none; }
.ui6a2ce-mile__num {
  flex: none;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  font-family: var(--ui6a2ce-font-head);
  font-weight: 800;
  font-size: 13px;
  color: #241a00;
  background: linear-gradient(135deg, var(--ui6a2ce-gold), #ffd262);
  border-radius: 9px 3px 9px 3px;
}
.ui6a2ce-mile b { display: block; font-size: 13.5px; color: #fff; }
.ui6a2ce-mile p { font-size: 12.5px; color: var(--ui6a2ce-mist); }

/* --------------------------------------------------------------------------
   Payment conditions
   -------------------------------------------------------------------------- */
.ui6a2ce-paygrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 10px;
}
.ui6a2ce-paycard {
  background: #20204433;
  border: 1px solid #35356a;
  border-radius: var(--ui6a2ce-radius-sm);
  padding: 9px 10px;
}
.ui6a2ce-paycard b {
  display: block;
  font-family: var(--ui6a2ce-font-head);
  font-size: 13px;
  color: var(--ui6a2ce-lav);
}
.ui6a2ce-paycard small { font-size: 11.5px; color: var(--ui6a2ce-mist); display: block; margin-top: 2px; }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.ui6a2ce-quote {
  background: #20204a;
  border: 1px solid #37366a;
  border-radius: 14px 4px 14px 4px;
  padding: 10px 12px;
  margin: 8px 0;
}
.ui6a2ce-quote__stars { color: var(--ui6a2ce-gold); font-size: 12px; letter-spacing: 2px; }
.ui6a2ce-quote p { font-size: 13px; color: var(--ui6a2ce-mist); margin: 4px 0 6px; }
.ui6a2ce-quote__who { font-size: 11.5px; color: var(--ui6a2ce-amethyst); font-weight: 700; }

/* --------------------------------------------------------------------------
   Term list (definition rows)
   -------------------------------------------------------------------------- */
.ui6a2ce-term {
  padding: 8px 0;
  border-bottom: 1px dashed #35356a;
}
.ui6a2ce-term:last-child { border-bottom: none; }
.ui6a2ce-term dt {
  font-family: var(--ui6a2ce-font-head);
  font-weight: 800;
  font-size: 13.5px;
  color: var(--ui6a2ce-gold);
}
.ui6a2ce-term dd { font-size: 12.8px; color: var(--ui6a2ce-mist); margin-top: 2px; }

/* question-driven collapsible blocks */
.ui6a2ce-qa { border: 1px solid #37366a; border-radius: var(--ui6a2ce-radius-md); background: #1f1f40; margin: 8px 0; overflow: hidden; }
.ui6a2ce-qa summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 12px;
  font-family: var(--ui6a2ce-font-head);
  font-weight: 700;
  font-size: 13.5px;
  color: #fff;
  background: #262652;
}
.ui6a2ce-qa summary::-webkit-details-marker { display: none; }
.ui6a2ce-qa summary::after {
  content: "+";
  margin-left: auto;
  color: var(--ui6a2ce-ember);
  font-size: 17px;
  font-weight: 800;
  transition: transform .2s ease;
}
.ui6a2ce-qa[open] summary::after { transform: rotate(45deg); }
.ui6a2ce-qa__body { padding: 10px 12px 12px; font-size: 13px; color: var(--ui6a2ce-mist); }

/* --------------------------------------------------------------------------
   Extended home footer : promo shortcuts > brand > directory > disclaimer
   -------------------------------------------------------------------------- */
.ui6a2ce-ext {
  margin: 30px 0 0;
  border-top: 1px solid var(--ui6a2ce-line);
  background: #171730;
  padding: 14px 12px 16px;
}

.ui6a2ce-shortcuts {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.ui6a2ce-shortcuts::-webkit-scrollbar { display: none; }

.ui6a2ce-shortcut {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: none;
  cursor: pointer;
  font-family: var(--ui6a2ce-font-head);
  font-weight: 700;
  font-size: 12.5px;
  color: #fff;
  background: linear-gradient(135deg, var(--ui6a2ce-ember) 0%, #ff7d3a 100%);
  border-radius: 4px 16px 4px 16px;
  white-space: nowrap;
}
.ui6a2ce-shortcut:nth-child(even) {
  background: linear-gradient(135deg, var(--ui6a2ce-amethyst) 0%, #7a5cd6 100%);
  border-radius: 16px 4px 16px 4px;
}
.ui6a2ce-shortcut:active { transform: scale(.96); }
.ui6a2ce-shortcut svg { width: 15px; height: 15px; }

.ui6a2ce-ext__title {
  font-family: var(--ui6a2ce-font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ui6a2ce-amethyst);
  margin: 14px 0 6px;
}

.ui6a2ce-ext__brand { font-size: 12.8px; color: var(--ui6a2ce-mist); }

.ui6a2ce-dir { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ui6a2ce-dir a {
  font-size: 12.3px;
  color: var(--ui6a2ce-mist);
  padding: 7px 9px;
  background: #1d1d3a;
  border: 1px solid #30305c;
  border-radius: var(--ui6a2ce-radius-sm);
  display: flex;
  align-items: center;
  min-height: 38px;
  gap: 6px;
}
.ui6a2ce-dir a::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ui6a2ce-ember);
  flex: none;
}
.ui6a2ce-dir a:active { border-color: var(--ui6a2ce-gold); color: var(--ui6a2ce-gold); }

.ui6a2ce-ext__note {
  margin-top: 12px;
  font-size: 11.3px;
  line-height: 1.6;
  color: #8f8fb8;
  border-top: 1px dashed #30305c;
  padding-top: 10px;
}

/* --------------------------------------------------------------------------
   Common footer
   -------------------------------------------------------------------------- */
.ui6a2ce-foot {
  text-align: center;
  font-size: 11.5px;
  color: #7d7da8;
  padding: 12px 16px calc(var(--ui6a2ce-dock-h) + 18px);
  background: #14142a;
}
.ui6a2ce-foot b { color: var(--ui6a2ce-mist); }

/* --------------------------------------------------------------------------
   Mobile dock : 5 roles, layered strip, linear icons with filled active state
   -------------------------------------------------------------------------- */
.ui6a2ce-dock {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 478px;
  height: var(--ui6a2ce-dock-h);
  z-index: 70;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: linear-gradient(180deg, #1d1d3c 0%, #12122a 100%);
  border-top: 1px solid var(--ui6a2ce-line);
  padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px));
}

.ui6a2ce-dock__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  background: transparent;
  border: none;
  border-radius: 12px 12px 4px 4px;
  color: var(--ui6a2ce-mist);
  cursor: pointer;
  position: relative;
  padding: 2px 0 0;
  transition: color .18s ease, background .18s ease;
}
.ui6a2ce-dock__item svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}
.ui6a2ce-dock__item span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2px;
  font-family: var(--ui6a2ce-font-head);
}
/* label reveal micro-interaction on active */
.ui6a2ce-dock__item .ui6a2ce-dock__label { opacity: .82; transform: translateY(0); transition: opacity .2s ease, transform .2s ease; }
.ui6a2ce-dock__item:hover .ui6a2ce-dock__label,
.ui6a2ce-dock__item:focus-visible .ui6a2ce-dock__label { opacity: 1; }

.ui6a2ce-dock__item.ui6a2ce-dock--promo {
  color: var(--ui6a2ce-gold);
}
.ui6a2ce-dock__item.ui6a2ce-dock--promo svg {
  stroke: var(--ui6a2ce-gold);
  fill: rgba(255, 170, 0, .14);
}
.ui6a2ce-dock__item.ui6a2ce-dock--on {
  color: var(--ui6a2ce-ember);
  background: #262650;
}
.ui6a2ce-dock__item.ui6a2ce-dock--on svg {
  stroke: var(--ui6a2ce-ember);
  fill: rgba(255, 87, 34, .22);
  transform: translateY(-1px);
}
.ui6a2ce-dock__item:active svg { transform: scale(.9); }

/* promo dock roles get a soft pulsing halo */
.ui6a2ce-dock__item.ui6a2ce-dock--promo::after {
  content: "";
  position: absolute;
  top: 3px; right: 12px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ui6a2ce-ember);
  box-shadow: 0 0 0 0 rgba(255, 87, 34, .6);
  animation: ui6a2ce-halo 2.2s ease-out infinite;
}
@keyframes ui6a2ce-halo {
  0%   { box-shadow: 0 0 0 0 rgba(255, 87, 34, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 87, 34, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0); }
}

/* short-distance section entrance (respects reduced motion) */
@media (prefers-reduced-motion: reduce) {
  .ui6a2ce-dock__item.ui6a2ce-dock--promo::after { animation: none; }
  * { transition: none !important; }
}

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

/* ==========================================================================
   Help pages (review / safety) - shared doc strip + two distinct page bodies
   ========================================================================== */

/* compact doc strip: breadcrumb tag + one-line context (no carousel here) */
.ui6a2ce-doc {
  margin: 10px 10px 2px;
  padding: 12px 12px 11px;
  border: 1px solid #3c3c72;
  border-left: 4px solid var(--ui6a2ce-gold);
  border-radius: 3px 14px 14px 3px;
  background: linear-gradient(135deg, #262450 0%, #1c1c3c 100%);
}
.ui6a2ce-doc__crumb {
  font-family: var(--ui6a2ce-font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ui6a2ce-amethyst);
}
.ui6a2ce-doc__crumb b { color: var(--ui6a2ce-gold); font-weight: 800; }
.ui6a2ce-doc__line {
  margin-top: 4px;
  font-size: 12.6px;
  line-height: 1.55;
  color: var(--ui6a2ce-mist);
}

/* ---- review page: verdict score + dimension rows + symptom table -------- */
.ui6a2ce-verdict {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  margin: 10px 0;
  background: linear-gradient(180deg, #2c2456 0%, #1f1f40 100%);
  border: 1px solid #43437a;
  border-radius: var(--ui6a2ce-radius-md);
}
.ui6a2ce-verdict__score {
  text-align: center;
  padding: 10px 6px;
  background: #17172f;
  border: 1px dashed #6a5a1e;
  border-radius: 10px;
}
.ui6a2ce-verdict__score b {
  display: block;
  font-family: var(--ui6a2ce-font-head);
  font-size: 26px;
  line-height: 1.1;
  color: var(--ui6a2ce-gold);
}
.ui6a2ce-verdict__score small { font-size: 10.5px; color: var(--ui6a2ce-mist); }
.ui6a2ce-verdict__note { font-size: 12.8px; color: var(--ui6a2ce-mist); }
.ui6a2ce-verdict__note strong { color: var(--ui6a2ce-lav); }
.ui6a2ce-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ui6a2ce-chips span {
  font-family: var(--ui6a2ce-font-head);
  font-size: 11px;
  font-weight: 700;
  color: var(--ui6a2ce-lav);
  background: #20204a;
  border: 1px solid #3d3d74;
  border-radius: 999px;
  padding: 4px 10px;
}

/* assessment rows: dimension + segmented meter */
.ui6a2ce-dimrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  gap: 8px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed #35356a;
}
.ui6a2ce-dimrow:last-child { border-bottom: none; }
.ui6a2ce-dimrow b {
  display: block;
  font-family: var(--ui6a2ce-font-head);
  font-size: 13px;
  color: var(--ui6a2ce-lav);
}
.ui6a2ce-dimrow small { font-size: 11.8px; color: var(--ui6a2ce-mist); display: block; margin-top: 1px; }
.ui6a2ce-dimrow__meter {
  display: flex;
  gap: 3px;
  justify-content: flex-end;
}
.ui6a2ce-dimrow__meter i {
  width: 12px;
  height: 6px;
  border-radius: 2px;
  background: #26265a;
}
.ui6a2ce-dimrow__meter i.ui6a2ce-dimrow--fill {
  background: linear-gradient(90deg, var(--ui6a2ce-amethyst), var(--ui6a2ce-ember));
}

/* symptom / cause / action rows */
.ui6a2ce-tri {
  border: 1px solid #37366a;
  border-radius: var(--ui6a2ce-radius-md);
  background: #1f1f40;
  margin: 8px 0;
  padding: 10px 11px;
}
.ui6a2ce-tri__sym {
  font-family: var(--ui6a2ce-font-head);
  font-weight: 800;
  font-size: 13.2px;
  color: #fff;
  display: flex;
  gap: 7px;
  align-items: baseline;
}
.ui6a2ce-tri__sym::before {
  content: "!";
  flex: none;
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: #241a00;
  background: var(--ui6a2ce-gold);
  border-radius: 5px;
  transform: translateY(2px);
}
.ui6a2ce-tri__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 6px 8px;
  margin-top: 8px;
  font-size: 12.4px;
}
.ui6a2ce-tri__row dt { color: var(--ui6a2ce-amethyst); font-weight: 700; }
.ui6a2ce-tri__row dd { color: var(--ui6a2ce-mist); }

/* ---- safety page: checklist + flow + branch + warn ---------------------- */
.ui6a2ce-check {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 9px;
  padding: 9px 0;
  border-bottom: 1px dashed #35356a;
}
.ui6a2ce-check:last-child { border-bottom: none; }
.ui6a2ce-check::before {
  content: "";
  width: 18px; height: 18px;
  margin-top: 2px;
  border: 1.6px solid var(--ui6a2ce-amethyst);
  border-radius: 5px;
  background:
    linear-gradient(135deg, transparent 46%, var(--ui6a2ce-amethyst) 46% 58%, transparent 58%) no-repeat center/12px 12px;
}
.ui6a2ce-check b {
  font-family: var(--ui6a2ce-font-head);
  font-size: 13.2px;
  color: var(--ui6a2ce-lav);
  display: block;
}
.ui6a2ce-check small { font-size: 12.2px; color: var(--ui6a2ce-mist); display: block; margin-top: 1px; }

/* vertical verification flow with connector */
.ui6a2ce-flow { margin: 10px 0 4px; }
.ui6a2ce-flow__step {
  position: relative;
  padding: 0 0 14px 34px;
}
.ui6a2ce-flow__step::before {
  content: "";
  position: absolute;
  left: 13px; top: 24px; bottom: -2px;
  width: 2px;
  background: #34346a;
}
.ui6a2ce-flow__step:last-child::before { display: none; }
.ui6a2ce-flow__step::after {
  content: attr(data-n);
  position: absolute;
  left: 0; top: 0;
  width: 27px; height: 27px;
  display: grid;
  place-items: center;
  font-family: var(--ui6a2ce-font-head);
  font-weight: 800;
  font-size: 12.5px;
  color: #fff;
  background: linear-gradient(135deg, var(--ui6a2ce-ember), #ff8a3d);
  border-radius: 9px 3px 9px 3px;
}
.ui6a2ce-flow__step b {
  font-family: var(--ui6a2ce-font-head);
  font-size: 13.4px;
  color: var(--ui6a2ce-lav);
  display: block;
}
.ui6a2ce-flow__step p { font-size: 12.5px; color: var(--ui6a2ce-mist); }

/* conditional branch cards */
.ui6a2ce-branch {
  border: 1px solid #3a3a70;
  border-top: 3px solid var(--ui6a2ce-amethyst);
  border-radius: 4px var(--ui6a2ce-radius-md) var(--ui6a2ce-radius-md) 4px;
  background: #20204a;
  padding: 10px 11px;
  margin: 8px 0;
}
.ui6a2ce-branch--alert { border-top-color: var(--ui6a2ce-ember); }
.ui6a2ce-branch b {
  font-family: var(--ui6a2ce-font-head);
  font-size: 13px;
  color: #fff;
  display: block;
}
.ui6a2ce-branch p { font-size: 12.4px; color: var(--ui6a2ce-mist); margin-top: 2px; }

/* caution callout */
.ui6a2ce-warn {
  display: flex;
  gap: 9px;
  padding: 10px 11px;
  margin: 10px 0;
  background: rgba(255, 87, 34, .08);
  border: 1px solid #6b3520;
  border-radius: var(--ui6a2ce-radius-sm);
  font-size: 12.6px;
  color: var(--ui6a2ce-mist);
}
.ui6a2ce-warn::before {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid var(--ui6a2ce-ember);
  background:
    linear-gradient(180deg, transparent 42%, var(--ui6a2ce-ember) 42% 58%, transparent 58%) no-repeat center/8px 8px;
}
.ui6a2ce-warn strong { color: var(--ui6a2ce-lav); }

/* inline next-page pointers on help pages */
.ui6a2ce-next {
  display: grid;
  gap: 7px;
  margin: 10px 0 2px;
}
.ui6a2ce-next a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 8px 11px;
  background: #1d1d3e;
  border: 1px solid #32325f;
  border-radius: var(--ui6a2ce-radius-sm);
  color: var(--ui6a2ce-lav);
  font-size: 12.8px;
  font-weight: 600;
}
.ui6a2ce-next a::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-top: 2px solid var(--ui6a2ce-gold);
  border-right: 2px solid var(--ui6a2ce-gold);
  transform: rotate(45deg);
}
.ui6a2ce-next a:active { border-color: var(--ui6a2ce-gold); }
.ui6a2ce-next small {
  display: block;
  font-size: 11.4px;
  font-weight: 400;
  color: var(--ui6a2ce-mist);
}

/* wide-phone tweaks for help components */
@media (max-width: 430px) and (min-width: 400px) {
  .ui6a2ce-verdict { grid-template-columns: 104px minmax(0, 1fr); }
  .ui6a2ce-tri__row { grid-template-columns: 96px minmax(0, 1fr); }
}