/* ============================================================
   case 558h - case558h.click
   Mobile-first display layer. Canvas: 320-430px phones.
   Palette: deep #0A0A0A base + plum #DDA0DD accents.
   Direction: geometric headings, mixed radii, horizontal
   icon-name game bars, question-driven rhythm, compact dual
   button groups, soft color transitions.
   ============================================================ */

:root {
  --surface2d5dd-bg: #0a0a0a;
  --surface2d5dd-canvas: #100c10;
  --surface2d5dd-ink: #dda0dd;
  --surface2d5dd-bright: #f6ecf6;
  --surface2d5dd-dim: rgba(221, 160, 221, 0.66);
  --surface2d5dd-faint: rgba(221, 160, 221, 0.4);
  --surface2d5dd-hair: rgba(221, 160, 221, 0.16);
  --surface2d5dd-tile: rgba(221, 160, 221, 0.07);
  --surface2d5dd-press: rgba(221, 160, 221, 0.16);
  --surface2d5dd-deep: #070507;
  --surface2d5dd-radius-a: 18px;
  --surface2d5dd-radius-b: 10px;
  --surface2d5dd-font-head: "Avenir Next", "Poppins", "Segoe UI", "Noto Sans Bengali", "Hind Siliguri", sans-serif;
  --surface2d5dd-font-body: "Segoe UI", "Noto Sans Bengali", "Hind Siliguri", system-ui, sans-serif;
}

* { box-sizing: border-box; }

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

body.surface2d5dd-page {
  margin: 0;
  background: var(--surface2d5dd-deep);
  color: var(--surface2d5dd-bright);
  font-family: var(--surface2d5dd-font-body);
  font-size: 14px;
  line-height: 1.65;
  overflow-x: hidden;
}

body.surface2d5dd-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(520px 240px at 50% -60px, rgba(221, 160, 221, 0.14), transparent 70%),
    radial-gradient(360px 200px at 90% 12%, rgba(221, 160, 221, 0.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

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

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

a { color: var(--surface2d5dd-ink); text-decoration: none; }

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

::selection { background: rgba(221, 160, 221, 0.35); color: #fff; }

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

.surface2d5dd-shell {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--surface2d5dd-canvas);
  border-left: 1px solid var(--surface2d5dd-hair);
  border-right: 1px solid var(--surface2d5dd-hair);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
}

.surface2d5dd-skip {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 60;
  background: var(--surface2d5dd-ink);
  color: #140a14;
  padding: 8px 14px;
  border-radius: 0 0 10px 10px;
  font-size: 12px;
  font-weight: 700;
  transition: top 0.25s ease;
}

.surface2d5dd-skip:focus { top: 0; }

/* ---------- fixed top action bar ---------- */

.surface2d5dd-topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 50;
  background: rgba(12, 9, 12, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--surface2d5dd-hair);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

.surface2d5dd-topbar.surface2d5dd-scrolled {
  background: rgba(10, 7, 10, 0.98);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}

.surface2d5dd-barinner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  min-height: 54px;
}

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

.surface2d5dd-logo {
  width: 32px;
  height: 32px;
  border-radius: 9px 12px 9px 12px;
  border: 1px solid var(--surface2d5dd-hair);
  background: var(--surface2d5dd-tile);
  flex: 0 0 auto;
}

.surface2d5dd-word {
  font-family: var(--surface2d5dd-font-head);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--surface2d5dd-bright);
  white-space: nowrap;
}

.surface2d5dd-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.surface2d5dd-btnlog,
.surface2d5dd-btnreg {
  min-height: 38px;
  padding: 7px 12px;
  border-radius: 12px 6px 12px 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid rgba(221, 160, 221, 0.4);
  background: transparent;
  color: var(--surface2d5dd-ink);
  transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

.surface2d5dd-btnreg {
  background: linear-gradient(135deg, #e6b4e6, var(--surface2d5dd-ink));
  color: #1a0f1a;
  border-color: transparent;
}

.surface2d5dd-btnlog:active,
.surface2d5dd-btnreg:active { transform: scale(0.95); }

.surface2d5dd-burger {
  width: 38px;
  height: 38px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 11px;
  border: 1px solid var(--surface2d5dd-hair);
  background: var(--surface2d5dd-tile);
  transition: background 0.25s ease;
}

.surface2d5dd-burger span {
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--surface2d5dd-ink);
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.surface2d5dd-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.surface2d5dd-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.surface2d5dd-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* layered dropdown menu */

.surface2d5dd-drop {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #140f14;
  border-bottom: 1px solid var(--surface2d5dd-hair);
  box-shadow: 0 22px 34px rgba(0, 0, 0, 0.55);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.surface2d5dd-drop.surface2d5dd-open { max-height: 620px; }

.surface2d5dd-dropgroup { padding: 6px 12px 10px; }

.surface2d5dd-dropgroup + .surface2d5dd-dropgroup {
  border-top: 1px dashed rgba(221, 160, 221, 0.14);
}

.surface2d5dd-dropcap {
  font-family: var(--surface2d5dd-font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--surface2d5dd-faint);
  padding: 8px 4px 4px;
}

.surface2d5dd-droplinks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
}

.surface2d5dd-droplink {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 12px 7px 12px 7px;
  font-size: 12.5px;
  color: var(--surface2d5dd-bright);
  background: transparent;
  transition: background 0.25s ease, color 0.25s ease;
}

.surface2d5dd-droplink::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: rgba(221, 160, 221, 0.35);
  transition: background 0.25s ease;
}

.surface2d5dd-droplink:hover,
.surface2d5dd-droplink:active { background: var(--surface2d5dd-tile); }

.surface2d5dd-droplink.surface2d5dd-current {
  color: var(--surface2d5dd-ink);
  background: var(--surface2d5dd-tile);
  box-shadow: inset 0 2px 0 0 var(--surface2d5dd-ink);
}

.surface2d5dd-droplink.surface2d5dd-current::before { background: var(--surface2d5dd-ink); }

/* ---------- main flow ---------- */

.surface2d5dd-main {
  padding: 74px 14px calc(96px + env(safe-area-inset-bottom, 0px));
}

/* hero */

.surface2d5dd-hero { padding: 18px 0 4px; }

.surface2d5dd-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--surface2d5dd-dim);
  border: 1px solid var(--surface2d5dd-hair);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 12px;
}

.surface2d5dd-kicker::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--surface2d5dd-ink);
}

.surface2d5dd-hero h1 {
  font-family: var(--surface2d5dd-font-head);
  font-size: clamp(20px, 6vw, 27px);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0 0 12px;
  color: #fbf5fb;
}

.surface2d5dd-hero h1 em {
  font-style: normal;
  color: var(--surface2d5dd-ink);
}

.surface2d5dd-lede {
  margin: 0 0 16px;
  font-size: 13.5px;
  color: rgba(246, 236, 246, 0.82);
}

.surface2d5dd-duo {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.surface2d5dd-duo > * {
  flex: 1 1 150px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px 8px 14px 8px;
  font-size: 13px;
  font-weight: 700;
  transition: transform 0.15s ease, background 0.25s ease, color 0.25s ease;
}

.surface2d5dd-duo > *:active { transform: scale(0.96); }

.surface2d5dd-duoprime {
  border: none;
  background: linear-gradient(135deg, #eec2ee, var(--surface2d5dd-ink) 60%, #c98bc9);
  color: #190d19;
}

.surface2d5dd-duoghost {
  border: 1px solid rgba(221, 160, 221, 0.45);
  background: var(--surface2d5dd-tile);
  color: var(--surface2d5dd-ink);
}

/* promo banner carousel */

.surface2d5dd-carousel {
  position: relative;
  margin: 18px 0 6px;
  border-radius: var(--surface2d5dd-radius-a) var(--surface2d5dd-radius-b) var(--surface2d5dd-radius-a) var(--surface2d5dd-radius-b);
  overflow: hidden;
  border: 1px solid var(--surface2d5dd-hair);
  background: #161016;
}

.surface2d5dd-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.33, 0.8, 0.3, 1);
}

.surface2d5dd-slide {
  flex: 0 0 100%;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  display: block;
}

.surface2d5dd-slide img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.surface2d5dd-carofoot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(180deg, transparent, rgba(7, 5, 7, 0.85));
}

.surface2d5dd-carohint {
  font-size: 10.5px;
  color: rgba(246, 236, 246, 0.85);
  letter-spacing: 0.03em;
}

.surface2d5dd-dots {
  display: flex;
  gap: 5px;
}

.surface2d5dd-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(221, 160, 221, 0.6);
  background: transparent;
  transition: width 0.25s ease, background 0.25s ease;
}

.surface2d5dd-dot.surface2d5dd-on {
  width: 22px;
  border-radius: 999px;
  background: var(--surface2d5dd-ink);
  border-color: transparent;
}

/* question chips */

.surface2d5dd-asks {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 2px 12px;
  scrollbar-width: none;
}

.surface2d5dd-asks::-webkit-scrollbar { display: none; }

.surface2d5dd-ask {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--surface2d5dd-hair);
  background: var(--surface2d5dd-tile);
  font-size: 11.5px;
  color: var(--surface2d5dd-dim);
  white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.surface2d5dd-ask:hover { color: var(--surface2d5dd-ink); border-color: rgba(221, 160, 221, 0.4); }

.surface2d5dd-ask::before { content: "?"; font-weight: 800; color: var(--surface2d5dd-ink); }

/* sections */

.surface2d5dd-section { margin-top: 26px; }

.surface2d5dd-sechead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
}

.surface2d5dd-secnum {
  font-family: var(--surface2d5dd-font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #1c102c;
  background: linear-gradient(135deg, #e9bce9, var(--surface2d5dd-ink));
  border-radius: 8px 12px 8px 12px;
  padding: 2px 7px;
  flex: 0 0 auto;
}

.surface2d5dd-section h2 {
  font-family: var(--surface2d5dd-font-head);
  font-size: 16.5px;
  line-height: 1.42;
  font-weight: 800;
  margin: 0;
  color: #f9f2f9;
}

.surface2d5dd-secnote {
  margin: 4px 0 12px;
  font-size: 12.8px;
  color: rgba(246, 236, 246, 0.72);
}

.surface2d5dd-secnote a {
  color: var(--surface2d5dd-ink);
  border-bottom: 1px dashed rgba(221, 160, 221, 0.5);
  padding-bottom: 1px;
}

/* game grid: horizontal icon-name bars */

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

.surface2d5dd-card {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 58px;
  padding: 6px 8px;
  text-align: left;
  border: 1px solid var(--surface2d5dd-hair);
  border-radius: 14px var(--surface2d5dd-radius-b) 14px var(--surface2d5dd-radius-b);
  background: linear-gradient(160deg, rgba(221, 160, 221, 0.1), rgba(221, 160, 221, 0.03));
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}

.surface2d5dd-card:hover,
.surface2d5dd-card:active {
  background: var(--surface2d5dd-press);
  border-color: rgba(221, 160, 221, 0.42);
  transform: scale(0.97);
}

.surface2d5dd-cardimg {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(221, 160, 221, 0.22);
  background: #191219;
}

.surface2d5dd-cardname {
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  color: #efe4ef;
  overflow-wrap: anywhere;
}

.surface2d5dd-more {
  margin-top: 10px;
}

.surface2d5dd-morelink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 12px 7px 12px 7px;
  border: 1px dashed rgba(221, 160, 221, 0.45);
  color: var(--surface2d5dd-ink);
  font-size: 12px;
  font-weight: 700;
  transition: background 0.25s ease;
}

.surface2d5dd-morelink:hover { background: var(--surface2d5dd-tile); }

.surface2d5dd-morelink::after { content: "\203A"; font-weight: 800; }

/* feature tiles */

.surface2d5dd-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.surface2d5dd-tile {
  border: 1px solid var(--surface2d5dd-hair);
  border-radius: var(--surface2d5dd-radius-b) 16px var(--surface2d5dd-radius-b) 16px;
  background: var(--surface2d5dd-tile);
  padding: 10px;
}

.surface2d5dd-tileic {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(221, 160, 221, 0.16);
  color: var(--surface2d5dd-ink);
  margin-bottom: 8px;
}

.surface2d5dd-tile h3 {
  margin: 0 0 4px;
  font-family: var(--surface2d5dd-font-head);
  font-size: 12.5px;
  font-weight: 800;
  color: #f3e9f3;
}

.surface2d5dd-tile p { margin: 0; font-size: 11.6px; color: rgba(246, 236, 246, 0.7); }

/* term list */

.surface2d5dd-terms { border-top: 1px dashed rgba(221, 160, 221, 0.2); }

.surface2d5dd-termrow {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 10px;
  padding: 11px 2px;
  border-bottom: 1px dashed rgba(221, 160, 221, 0.2);
}

.surface2d5dd-termrow h3 {
  margin: 0;
  font-family: var(--surface2d5dd-font-head);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--surface2d5dd-ink);
  letter-spacing: 0.02em;
}

.surface2d5dd-termrow p { margin: 0; font-size: 12px; color: rgba(246, 236, 246, 0.74); }

/* promo cards */

.surface2d5dd-promos {
  display: grid;
  gap: 10px;
}

.surface2d5dd-promo {
  position: relative;
  border: 1px solid rgba(221, 160, 221, 0.28);
  border-radius: 6px 18px 6px 18px;
  background: linear-gradient(150deg, rgba(221, 160, 221, 0.13), rgba(221, 160, 221, 0.04));
  padding: 12px;
}

.surface2d5dd-promotag {
  position: absolute;
  top: -9px;
  left: 12px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #170e17;
  background: var(--surface2d5dd-ink);
  border-radius: 999px;
  padding: 3px 9px;
}

.surface2d5dd-promo h3 {
  margin: 4px 0 6px;
  font-family: var(--surface2d5dd-font-head);
  font-size: 13.5px;
  font-weight: 800;
  color: #f6edf6;
}

.surface2d5dd-promo p { margin: 0 0 10px; font-size: 12.2px; color: rgba(246, 236, 246, 0.74); }

.surface2d5dd-promoact {
  min-height: 42px;
  padding: 9px 16px;
  border: none;
  border-radius: 12px 7px 12px 7px;
  background: var(--surface2d5dd-ink);
  color: #1a0f1a;
  font-size: 12.5px;
  font-weight: 800;
  transition: transform 0.15s ease, filter 0.25s ease;
}

.surface2d5dd-promoact:active { transform: scale(0.96); filter: brightness(1.12); }

/* quotes */

.surface2d5dd-quotes { display: grid; gap: 10px; }

.surface2d5dd-quote {
  border-left: 3px solid var(--surface2d5dd-ink);
  border-radius: 4px 14px 4px 14px;
  background: var(--surface2d5dd-tile);
  padding: 11px 12px;
}

.surface2d5dd-quote p { margin: 0 0 8px; font-size: 12.4px; color: rgba(246, 236, 246, 0.82); }

.surface2d5dd-qwho {
  display: flex;
  align-items: center;
  gap: 8px;
}

.surface2d5dd-qav {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(221, 160, 221, 0.2);
  color: var(--surface2d5dd-ink);
  font-size: 11px;
  font-weight: 800;
}

.surface2d5dd-qwho cite { font-style: normal; font-size: 11px; color: var(--surface2d5dd-dim); }

/* cta band */

.surface2d5dd-ctaband {
  margin-top: 26px;
  border: 1px solid rgba(221, 160, 221, 0.3);
  border-radius: 20px 10px 20px 10px;
  background:
    radial-gradient(240px 120px at 85% 0%, rgba(221, 160, 221, 0.18), transparent 70%),
    var(--surface2d5dd-tile);
  padding: 16px 14px;
}

.surface2d5dd-ctaband h2 {
  font-family: var(--surface2d5dd-font-head);
  font-size: 16.5px;
  font-weight: 800;
  margin: 0 0 6px;
  color: #faf3fa;
}

.surface2d5dd-ctaband p { margin: 0 0 14px; font-size: 12.8px; color: rgba(246, 236, 246, 0.76); }

/* faq */

.surface2d5dd-faqs { display: grid; gap: 8px; }

.surface2d5dd-faq {
  border: 1px solid var(--surface2d5dd-hair);
  border-radius: 14px 8px 14px 8px;
  background: var(--surface2d5dd-tile);
  overflow: hidden;
}

.surface2d5dd-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 11px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #f1e7f1;
  transition: color 0.25s ease;
}

.surface2d5dd-faq summary::-webkit-details-marker { display: none; }

.surface2d5dd-faq summary::after {
  content: "+";
  font-family: var(--surface2d5dd-font-head);
  font-size: 16px;
  font-weight: 800;
  color: var(--surface2d5dd-ink);
  transition: transform 0.3s ease;
}

.surface2d5dd-faq[open] summary::after { transform: rotate(45deg); }

.surface2d5dd-faq p {
  margin: 0;
  padding: 0 12px 12px;
  font-size: 12.4px;
  color: rgba(246, 236, 246, 0.74);
}

.surface2d5dd-faq p a {
  color: var(--surface2d5dd-ink);
  border-bottom: 1px dashed rgba(221, 160, 221, 0.5);
}

/* extended footer */

.surface2d5dd-xfoot {
  margin-top: 30px;
  border-top: 1px solid var(--surface2d5dd-hair);
  padding-top: 18px;
}

.surface2d5dd-xcap {
  font-family: var(--surface2d5dd-font-head);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--surface2d5dd-faint);
  margin: 14px 0 8px;
}

.surface2d5dd-xdir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
}

.surface2d5dd-xdir a {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  font-size: 12px;
  color: rgba(246, 236, 246, 0.82);
  border-bottom: 1px dotted rgba(221, 160, 221, 0.14);
  transition: color 0.25s ease;
}

.surface2d5dd-xdir a::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: rgba(221, 160, 221, 0.45);
  flex: 0 0 auto;
}

.surface2d5dd-xdir a:hover { color: var(--surface2d5dd-ink); }

.surface2d5dd-xbrand {
  font-size: 12.2px;
  color: rgba(246, 236, 246, 0.68);
  margin: 0;
}

.surface2d5dd-xpromos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.surface2d5dd-xpromo {
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid rgba(221, 160, 221, 0.3);
  border-radius: 12px 7px 12px 7px;
  background: var(--surface2d5dd-tile);
  font-size: 11.6px;
  font-weight: 700;
  color: var(--surface2d5dd-ink);
  text-align: left;
  transition: background 0.25s ease, transform 0.15s ease;
}

.surface2d5dd-xpromo:active { transform: scale(0.96); background: var(--surface2d5dd-press); }

.surface2d5dd-xnote {
  margin: 14px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--surface2d5dd-faint);
  border: 1px dashed rgba(221, 160, 221, 0.18);
  border-radius: var(--surface2d5dd-radius-b);
  padding: 9px 11px;
}

/* copyright footer */

.surface2d5dd-foot {
  text-align: center;
  padding: 4px 14px calc(78px + env(safe-area-inset-bottom, 0px));
}

.surface2d5dd-copy {
  margin: 0;
  font-size: 10.8px;
  color: var(--surface2d5dd-faint);
  letter-spacing: 0.04em;
}

/* fixed segmented bottom nav */

.surface2d5dd-bnav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 55;
  display: flex;
  background: rgba(11, 8, 11, 0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--surface2d5dd-hair);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.surface2d5dd-bnavitem {
  position: relative;
  flex: 1 1 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 60px;
  padding: 7px 2px 6px;
  background: none;
  border: none;
  font-size: 9.8px;
  letter-spacing: 0.02em;
  color: #978197;
  text-decoration: none;
  transition: color 0.25s ease;
}

.surface2d5dd-bnavitem::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 34px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--surface2d5dd-ink);
  transition: transform 0.3s ease;
}

.surface2d5dd-bnavitem.surface2d5dd-live { color: var(--surface2d5dd-ink); }
.surface2d5dd-bnavitem.surface2d5dd-live::before { transform: translateX(-50%) scaleX(1); }

.surface2d5dd-bnavic {
  width: 36px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(221, 160, 221, 0.08);
  color: currentColor;
  transition: background 0.25s ease;
}

.surface2d5dd-bnavitem.surface2d5dd-live .surface2d5dd-bnavic { background: rgba(221, 160, 221, 0.22); }

/* small phone refinements */

@media (max-width: 430px) {
  .surface2d5dd-section h2,
  .surface2d5dd-ctaband h2 { font-size: 15.5px; }

  .surface2d5dd-hero h1 { font-size: 20.5px; }

  .surface2d5dd-cardname { font-size: 10.6px; }

  .surface2d5dd-secnote { font-size: 12.4px; }

  .surface2d5dd-btnlog,
  .surface2d5dd-btnreg { padding: 7px 9px; font-size: 11px; }

  .surface2d5dd-slide img { aspect-ratio: 9 / 5; }
}

/* wider phones: three game columns */

@media (min-width: 431px) {
  .surface2d5dd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .surface2d5dd-asks { flex-wrap: wrap; }
}

/* ---------- help page reading layers ---------- */

.surface2d5dd-helpmain { padding-top: 72px; }

.surface2d5dd-helphero,
.surface2d5dd-reviewhero { padding: 18px 0 8px; }

.surface2d5dd-helphero h1,
.surface2d5dd-reviewhero h1 {
  margin: 0 0 12px;
  color: #fbf5fb;
  font-family: var(--surface2d5dd-font-head);
  font-size: clamp(21px, 6vw, 28px);
  line-height: 1.28;
  font-weight: 800;
}

.surface2d5dd-helpdeck {
  margin: 0 0 16px;
  color: rgba(246, 236, 246, 0.82);
  font-size: 13.5px;
}

.surface2d5dd-answerstrip,
.surface2d5dd-verdictbar {
  margin: 16px 0 8px;
  padding: 12px;
  border: 1px solid rgba(221, 160, 221, 0.34);
  border-radius: 8px 18px 8px 18px;
  background: linear-gradient(125deg, rgba(221, 160, 221, 0.15), rgba(221, 160, 221, 0.04));
}

.surface2d5dd-answerflag {
  display: inline-block;
  margin-bottom: 5px;
  color: var(--surface2d5dd-ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.surface2d5dd-answerstrip p { margin: 0; color: #f5eaf5; font-size: 12.8px; }

.surface2d5dd-routegrid,
.surface2d5dd-branchlist,
.surface2d5dd-issueboard,
.surface2d5dd-dimensionlist { display: grid; gap: 8px; }

.surface2d5dd-routeitem,
.surface2d5dd-branch,
.surface2d5dd-issueboard article,
.surface2d5dd-dimensionlist div {
  position: relative;
  padding: 11px 11px 11px 44px;
  border: 1px solid var(--surface2d5dd-hair);
  border-radius: 13px 7px 13px 7px;
  background: rgba(221, 160, 221, 0.055);
}

.surface2d5dd-routeitem > span,
.surface2d5dd-dimensionlist > div > span {
  position: absolute;
  left: 11px;
  top: 11px;
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 8px 4px 8px 4px;
  background: var(--surface2d5dd-ink);
  color: #190d19;
  font-size: 10px;
  font-weight: 800;
}

.surface2d5dd-routeitem h3,
.surface2d5dd-branch h3,
.surface2d5dd-issueboard h3,
.surface2d5dd-dimensionlist h3 {
  margin: 0 0 4px;
  color: #f6edf6;
  font-family: var(--surface2d5dd-font-head);
  font-size: 13px;
  font-weight: 800;
}

.surface2d5dd-routeitem p,
.surface2d5dd-branch p,
.surface2d5dd-issueboard p,
.surface2d5dd-dimensionlist p { margin: 0; color: rgba(246, 236, 246, 0.74); font-size: 12px; }

.surface2d5dd-inlineaction,
.surface2d5dd-actionrail button {
  min-height: 44px;
  margin-top: 10px;
  padding: 9px 13px;
  border: 1px solid rgba(221, 160, 221, 0.46);
  border-radius: 12px 6px 12px 6px;
  background: rgba(221, 160, 221, 0.11);
  color: var(--surface2d5dd-ink);
  font-size: 12px;
  font-weight: 800;
  transition: background 0.25s ease, transform 0.15s ease;
}

.surface2d5dd-inlineaction:active,
.surface2d5dd-actionrail button:active { transform: scale(0.96); background: var(--surface2d5dd-press); }

.surface2d5dd-branchhead { display: flex; align-items: baseline; gap: 7px; }
.surface2d5dd-branchhead > span { color: var(--surface2d5dd-ink); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }

.surface2d5dd-mistakelist { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; counter-reset: safetyMistake; }
.surface2d5dd-mistakelist li { counter-increment: safetyMistake; position: relative; padding: 10px 10px 10px 38px; border-left: 2px solid var(--surface2d5dd-ink); border-bottom: 1px dashed var(--surface2d5dd-hair); color: rgba(246, 236, 246, 0.78); font-size: 12.2px; }
.surface2d5dd-mistakelist li::before { content: counter(safetyMistake, decimal-leading-zero); position: absolute; left: 7px; top: 10px; color: var(--surface2d5dd-ink); font-size: 10px; font-weight: 800; }
.surface2d5dd-mistakelist strong { color: #f8eff8; }

.surface2d5dd-paymentsteps { border-top: 1px solid var(--surface2d5dd-hair); }
.surface2d5dd-paymentsteps > div { display: grid; grid-template-columns: 30px 1fr; gap: 9px; padding: 10px 0; border-bottom: 1px dashed var(--surface2d5dd-hair); }
.surface2d5dd-paymentsteps > div > span { display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 50%; background: rgba(221, 160, 221, 0.18); color: var(--surface2d5dd-ink); font-weight: 800; }
.surface2d5dd-paymentsteps p { margin: 0; color: rgba(246, 236, 246, 0.75); font-size: 12px; }
.surface2d5dd-paymentsteps b { color: #f8eff8; }

.surface2d5dd-diagnose { border-top: 1px solid var(--surface2d5dd-hair); }
.surface2d5dd-diagnoserow { display: grid; grid-template-columns: 28px 1fr; column-gap: 9px; padding: 11px 0; border-bottom: 1px dashed var(--surface2d5dd-hair); }
.surface2d5dd-diagnoserow > span { color: var(--surface2d5dd-ink); font-size: 10px; font-weight: 800; }
.surface2d5dd-diagnoserow h3 { margin: 0 0 3px; color: #f6edf6; font-size: 12.8px; }
.surface2d5dd-diagnoserow p { grid-column: 2; margin: 0; color: rgba(246, 236, 246, 0.72); font-size: 12px; }

.surface2d5dd-permissionrow,
.surface2d5dd-limitlist > div { display: grid; grid-template-columns: 72px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--surface2d5dd-hair); }
.surface2d5dd-permissionrow > span,
.surface2d5dd-limitlist b { color: var(--surface2d5dd-ink); font-size: 11px; font-weight: 800; }
.surface2d5dd-permissionrow p,
.surface2d5dd-limitlist span { margin: 0; color: rgba(246, 236, 246, 0.74); font-size: 12px; }

.surface2d5dd-verdictbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.surface2d5dd-verdictbar div { min-width: 0; padding-right: 7px; border-right: 1px solid var(--surface2d5dd-hair); }
.surface2d5dd-verdictbar div:last-child { border-right: none; }
.surface2d5dd-verdictbar span,
.surface2d5dd-verdictbar b { display: block; }
.surface2d5dd-verdictbar span { color: var(--surface2d5dd-ink); font-size: 10px; font-weight: 800; }
.surface2d5dd-verdictbar b { margin-top: 3px; color: rgba(246, 236, 246, 0.8); font-size: 11px; }

.surface2d5dd-scoretable { overflow: hidden; border: 1px solid var(--surface2d5dd-hair); border-radius: 12px 6px 12px 6px; }
.surface2d5dd-scorehead,
.surface2d5dd-scorerow { display: grid; grid-template-columns: 0.8fr 1.15fr 1.15fr; gap: 6px; padding: 9px 8px; }
.surface2d5dd-scorehead { background: rgba(221, 160, 221, 0.16); color: var(--surface2d5dd-ink); font-size: 10px; font-weight: 800; }
.surface2d5dd-scorerow { border-top: 1px dashed var(--surface2d5dd-hair); color: rgba(246, 236, 246, 0.72); font-size: 10.8px; }
.surface2d5dd-scorerow b { color: #f5eaf5; font-size: 11px; }

.surface2d5dd-procon { display: grid; gap: 8px; }
.surface2d5dd-pro,
.surface2d5dd-con { padding: 12px; border-radius: 5px 16px 5px 16px; border: 1px solid var(--surface2d5dd-hair); }
.surface2d5dd-pro { background: rgba(221, 160, 221, 0.09); }
.surface2d5dd-con { background: rgba(246, 236, 246, 0.035); }
.surface2d5dd-polarity { color: var(--surface2d5dd-ink); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.surface2d5dd-procon h3 { margin: 5px 0 4px; color: #f6edf6; font-size: 13px; }
.surface2d5dd-procon p { margin: 0; color: rgba(246, 236, 246, 0.74); font-size: 12px; }

.surface2d5dd-issueboard article { padding-left: 40px; }
.surface2d5dd-issuecode { position: absolute; top: 11px; left: 11px; color: var(--surface2d5dd-ink); font-family: var(--surface2d5dd-font-head); font-size: 16px; font-weight: 800; }
.surface2d5dd-issueboard p b { color: #f2e7f2; }

.surface2d5dd-devicegrid { display: grid; gap: 8px; }
.surface2d5dd-devicecard { padding: 12px; border: 1px solid var(--surface2d5dd-hair); border-radius: 18px 7px 18px 7px; background: rgba(221, 160, 221, 0.06); }
.surface2d5dd-deviceicon { display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 10px; background: var(--surface2d5dd-ink); color: #190d19; font-weight: 800; }
.surface2d5dd-devicecard h3 { margin: 7px 0 5px; color: #f7eef7; font-size: 13px; }
.surface2d5dd-devicecard ul { margin: 0; padding-left: 17px; color: rgba(246, 236, 246, 0.73); font-size: 11.8px; }
.surface2d5dd-devicecard li + li { margin-top: 3px; }

.surface2d5dd-flowline { display: flex; align-items: center; gap: 5px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; }
.surface2d5dd-flowline::-webkit-scrollbar { display: none; }
.surface2d5dd-flowline > div { flex: 0 0 72px; text-align: center; }
.surface2d5dd-flowline span { display: flex; width: 27px; height: 27px; margin: 0 auto 4px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(221, 160, 221, 0.18); color: var(--surface2d5dd-ink); font-weight: 800; }
.surface2d5dd-flowline b { display: block; color: #f7eef7; font-size: 11px; }
.surface2d5dd-flowline small { display: block; color: var(--surface2d5dd-faint); font-size: 9px; }
.surface2d5dd-flowline i { flex: 0 0 auto; color: var(--surface2d5dd-ink); font-style: normal; }

.surface2d5dd-boundary { display: grid; gap: 6px; }
.surface2d5dd-boundary div { display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 9px; border-radius: 8px; background: var(--surface2d5dd-tile); }
.surface2d5dd-boundary strong { color: var(--surface2d5dd-ink); font-size: 11px; }
.surface2d5dd-boundary span { color: rgba(246, 236, 246, 0.74); font-size: 11.8px; }

.surface2d5dd-dimensionlist { grid-template-columns: 1fr 1fr; }
.surface2d5dd-dimensionlist div { min-height: 86px; padding-left: 43px; }
.surface2d5dd-dimensionlist h3 { font-size: 12px; }
.surface2d5dd-dimensionlist p { font-size: 11.2px; }

.surface2d5dd-ledgergrid,
.surface2d5dd-stopgrid { display: grid; gap: 9px; }
.surface2d5dd-ledgergrid article { padding: 12px; border: 1px solid var(--surface2d5dd-hair); border-radius: 5px 17px 5px 17px; background: linear-gradient(145deg, rgba(221, 160, 221, 0.1), rgba(221, 160, 221, 0.03)); }
.surface2d5dd-ledgerstamp { display: inline-block; padding: 3px 8px; border-radius: 5px; background: rgba(221, 160, 221, 0.18); color: var(--surface2d5dd-ink); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; }
.surface2d5dd-ledgergrid h3 { margin: 7px 0 4px; color: #f7eef7; font-size: 13px; }
.surface2d5dd-ledgergrid p { margin: 0; color: rgba(246, 236, 246, 0.74); font-size: 12px; }
.surface2d5dd-ledgergrid .surface2d5dd-inlineaction { width: 100%; margin-top: 9px; }
.surface2d5dd-stopgrid { grid-template-columns: 1fr 1fr; }
.surface2d5dd-stopgrid div { padding: 10px; border-left: 2px solid var(--surface2d5dd-ink); background: rgba(221, 160, 221, 0.06); }
.surface2d5dd-stopgrid b { color: var(--surface2d5dd-ink); font-size: 11.5px; }
.surface2d5dd-stopgrid p { margin: 4px 0 0; color: rgba(246, 236, 246, 0.72); font-size: 11.5px; }

.surface2d5dd-actionrail { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.surface2d5dd-actionrail button { width: 100%; margin: 0; text-align: left; }

@media (min-width: 431px) {
  .surface2d5dd-routegrid { grid-template-columns: 1fr 1fr; }
  .surface2d5dd-devicegrid,
  .surface2d5dd-procon { grid-template-columns: 1fr 1fr; }
  .surface2d5dd-branchlist,
  .surface2d5dd-issueboard,
  .surface2d5dd-ledgergrid { grid-template-columns: 1fr 1fr; }
}

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