/* ============================================================
   layers-responsive-e087f6.css
   pagcormeaning.click — mobile-first base stylesheet
   Canvas: 320-430px phone frame, centered on wide screens.
   Palette: charcoal #3A3A3A canvas / teal #0097A7 / crimson #DC143C
   Language: poster-weight headings, near-square tool corners,
   horizontal icon-name game bars, segmented action buttons.
   All classes and variables use the ui087f6- prefix.
   ============================================================ */

/* ---------- design tokens ---------- */
:root {
  --ui087f6-canvas: #3A3A3A;
  --ui087f6-panel: #323232;
  --ui087f6-panel-2: #2B2B2B;
  --ui087f6-floor: #232323;
  --ui087f6-void: #1B1B1B;
  --ui087f6-teal: #0097A7;
  --ui087f6-teal-hi: #0AB9CC;
  --ui087f6-teal-tint: rgba(0, 151, 167, 0.14);
  --ui087f6-crimson: #DC143C;
  --ui087f6-crimson-dim: #A80F2F;
  --ui087f6-paper: #EFEFEF;
  --ui087f6-paper-dim: #B4BBBC;
  --ui087f6-paper-faint: #8F9798;
  --ui087f6-line: #4C4C4C;
  --ui087f6-line-soft: #444444;
  --ui087f6-edge: 3px;          /* near-square radius */
  --ui087f6-tap: 44px;          /* minimum touch target */
  --ui087f6-font-head: "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ui087f6-font-body: "Segoe UI", Roboto, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

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

html {
  background: var(--ui087f6-void);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ui087f6-void);
  color: var(--ui087f6-paper);
  font-family: var(--ui087f6-font-body);
  font-size: 15px;
  line-height: 1.58;
  overflow-x: hidden;
}

body.ui087f6-lock { overflow: hidden; }

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

a { color: var(--ui087f6-teal-hi); text-decoration: none; }
a:hover, a:focus-visible { color: #6FDDE9; }

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

:focus-visible {
  outline: 2px solid var(--ui087f6-teal-hi);
  outline-offset: 2px;
}

/* ---------- phone canvas ---------- */
.ui087f6-shell {
  position: relative;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--ui087f6-canvas);
  box-shadow: 0 0 28px rgba(0, 0, 0, 0.55);
  overflow-x: clip;
}

.ui087f6-skip {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 90;
  background: var(--ui087f6-teal);
  color: #06272B;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: var(--ui087f6-edge);
  transition: top 0s;
}
.ui087f6-skip:focus { top: 8px; }

/* ---------- compact brand bar (fixed top) ---------- */
.ui087f6-topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 56px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #333333 0%, var(--ui087f6-canvas) 100%);
  border-bottom: 2px solid var(--ui087f6-teal);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

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

.ui087f6-logo {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  object-fit: contain;
  border-radius: 2px;
}

.ui087f6-brand-name {
  font-family: var(--ui087f6-font-head);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ui087f6-paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* segmented action pair */
.ui087f6-duo {
  display: flex;
  border: 1px solid var(--ui087f6-teal);
  border-radius: var(--ui087f6-edge);
  overflow: hidden;
}

.ui087f6-duo > button {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-family: var(--ui087f6-font-head);
}
.ui087f6-duo > button + button { border-left: 1px solid var(--ui087f6-teal); }

.ui087f6-duo-a {
  background: var(--ui087f6-teal);
  color: #06272B;
}
.ui087f6-duo-a:hover { background: var(--ui087f6-teal-hi); }

.ui087f6-duo-b {
  background: var(--ui087f6-crimson);
  color: #FFE9EE;
}
.ui087f6-duo-b:hover { background: #E8254E; color: #FFFFFF; }

.ui087f6-burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ui087f6-line);
  border-radius: var(--ui087f6-edge);
  color: var(--ui087f6-paper);
  background: var(--ui087f6-panel-2);
}
.ui087f6-burger:hover { border-color: var(--ui087f6-teal); color: var(--ui087f6-teal-hi); }
.ui087f6-burger svg { width: 22px; height: 22px; }

/* ---------- stacked menu overlay ---------- */
.ui087f6-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  background: rgba(27, 27, 27, 0.96);
  overflow-y: auto;
}
.ui087f6-menu.ui087f6-open { display: block; }

.ui087f6-menu-inner {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100%;
  padding: 14px 14px 32px;
  background: var(--ui087f6-floor);
  border-left: 1px solid var(--ui087f6-line-soft);
  border-right: 1px solid var(--ui087f6-line-soft);
}

.ui087f6-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 2px 14px;
  border-bottom: 2px solid var(--ui087f6-crimson);
  margin-bottom: 10px;
}

.ui087f6-menu-title {
  font-family: var(--ui087f6-font-head);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ui087f6-teal-hi);
}

.ui087f6-menu-x {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui087f6-edge);
  border: 1px solid var(--ui087f6-line);
  color: var(--ui087f6-paper);
}
.ui087f6-menu-x:hover { background: var(--ui087f6-crimson); border-color: var(--ui087f6-crimson); color: #FFFFFF; }
.ui087f6-menu-x svg { width: 20px; height: 20px; }

.ui087f6-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ui087f6-menu-list li { border-bottom: 1px solid var(--ui087f6-line-soft); }

.ui087f6-menu-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 12px 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ui087f6-paper);
}
.ui087f6-menu-list a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--ui087f6-paper-faint);
  border-right: 2px solid var(--ui087f6-paper-faint);
  transform: rotate(45deg);
  flex: 0 0 auto;
}
.ui087f6-menu-list a:hover {
  background: var(--ui087f6-teal);
  color: #06272B;
}
.ui087f6-menu-list a:hover::after { border-color: #06272B; }

/* current page inside overlay: contrast inversion */
.ui087f6-menu-list a.ui087f6-on {
  background: var(--ui087f6-teal);
  color: #06272B;
}
.ui087f6-menu-list a.ui087f6-on::after { border-color: #06272B; }

/* ---------- main flow ---------- */
.ui087f6-main {
  padding: 70px 12px calc(96px + env(safe-area-inset-bottom, 0px));
}

.ui087f6-kicker {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 8px;
  border-left: 3px solid var(--ui087f6-crimson);
  background: var(--ui087f6-teal-tint);
  color: var(--ui087f6-teal-hi);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--ui087f6-font-head);
}

.ui087f6-main h1 {
  margin: 0 0 12px;
  font-family: var(--ui087f6-font-head);
  font-size: 26px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.ui087f6-main h2 {
  margin: 0 0 10px;
  font-family: var(--ui087f6-font-head);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #FFFFFF;
  padding-left: 10px;
  border-left: 4px solid var(--ui087f6-crimson);
}

.ui087f6-main h3 {
  margin: 0 0 6px;
  font-family: var(--ui087f6-font-head);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ui087f6-teal-hi);
}

.ui087f6-main p { margin: 0 0 12px; color: var(--ui087f6-paper); }

.ui087f6-lead { margin-bottom: 18px; }

.ui087f6-lead-p {
  font-size: 15px;
  color: var(--ui087f6-paper);
}

.ui087f6-note {
  font-size: 12.5px;
  color: var(--ui087f6-paper-dim);
}

/* section shell: lead intro then sectioned blocks */
.ui087f6-sec { margin: 26px 0; }
.ui087f6-sec-head { margin-bottom: 10px; }
.ui087f6-sec-intro { font-size: 13.5px; color: var(--ui087f6-paper-dim); margin: -4px 0 12px; }

.ui087f6-block {
  background: var(--ui087f6-panel);
  border: 1px solid var(--ui087f6-line-soft);
  border-radius: var(--ui087f6-edge);
  padding: 14px 12px;
  margin: 0 0 12px;
}

/* ---------- banner carousel ---------- */
.ui087f6-hero {
  position: relative;
  margin: 4px 0 22px;
  border: 1px solid var(--ui087f6-line);
  border-radius: var(--ui087f6-edge);
  background: var(--ui087f6-panel-2);
}

.ui087f6-slide {
  display: none;
  width: 100%;
  position: relative;
}
.ui087f6-slide.ui087f6-slide-on { display: block; }

.ui087f6-slide img {
  width: 100%;
  height: 168px;
  object-fit: cover;
  border-radius: calc(var(--ui087f6-edge) - 1px) calc(var(--ui087f6-edge) - 1px) 0 0;
}

.ui087f6-slide-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--ui087f6-floor);
  border-top: 2px solid var(--ui087f6-teal);
}
.ui087f6-slide-cap strong {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ui087f6-paper);
  font-family: var(--ui087f6-font-head);
}
.ui087f6-slide-cap span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ui087f6-crimson);
  border: 1px solid var(--ui087f6-crimson);
  padding: 2px 6px;
  border-radius: 2px;
  flex: 0 0 auto;
}

.ui087f6-dots {
  position: absolute;
  right: 10px;
  bottom: 46px;
  display: flex;
  gap: 6px;
  z-index: 5;
}

.ui087f6-dot {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: rgba(239, 239, 239, 0.45);
}
.ui087f6-dot.ui087f6-dot-on { background: var(--ui087f6-teal-hi); }
.ui087f6-dot:hover { background: #FFFFFF; }

/* ---------- game grid: horizontal icon-name bars ---------- */
.ui087f6-gamegrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ui087f6-gamebar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 54px;
  padding: 6px 8px;
  background: var(--ui087f6-panel-2);
  border: 1px solid var(--ui087f6-line-soft);
  border-left: 3px solid var(--ui087f6-teal);
  border-radius: var(--ui087f6-edge);
  text-align: left;
}
.ui087f6-gamebar:hover {
  border-left-color: var(--ui087f6-crimson);
  background: #303030;
  box-shadow: 0 0 0 1px var(--ui087f6-teal-tint), 0 0 10px rgba(0, 151, 167, 0.25);
}

.ui087f6-gamebar img {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  object-fit: cover;
  border-radius: 2px;
  background: var(--ui087f6-void);
}

.ui087f6-gamebar-nm {
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ui087f6-paper);
  overflow-wrap: break-word;
  word-break: break-word;
}

/* scan chips under some sections */
.ui087f6-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.ui087f6-chips li {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ui087f6-paper-dim);
  border: 1px solid var(--ui087f6-line);
  border-radius: 2px;
  padding: 4px 8px;
  background: var(--ui087f6-panel-2);
}

/* ---------- compare rows (play styles) ---------- */
.ui087f6-cmp {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ui087f6-line-soft);
  border-radius: var(--ui087f6-edge);
  overflow: hidden;
}
.ui087f6-cmp li {
  display: block;
  padding: 12px;
  background: var(--ui087f6-panel);
  border-bottom: 1px solid var(--ui087f6-line-soft);
}
.ui087f6-cmp li:last-child { border-bottom: 0; }
.ui087f6-cmp li:hover { background: #343434; }

.ui087f6-cmp-t {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.ui087f6-cmp-t strong {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #FFFFFF;
  font-family: var(--ui087f6-font-head);
}
.ui087f6-cmp-t em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui087f6-teal-hi);
}
.ui087f6-cmp p { margin: 0; font-size: 13px; color: var(--ui087f6-paper-dim); }

/* ---------- definition rows (payments, requirements) ---------- */
.ui087f6-rows {
  margin: 0;
  border: 1px solid var(--ui087f6-line-soft);
  border-radius: var(--ui087f6-edge);
  overflow: hidden;
}
.ui087f6-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--ui087f6-panel);
  border-bottom: 1px solid var(--ui087f6-line-soft);
}
.ui087f6-row:last-child { border-bottom: 0; }
.ui087f6-row:hover { background: #343434; }

.ui087f6-row-ic {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: var(--ui087f6-teal-hi);
}
.ui087f6-row-ic svg { width: 22px; height: 22px; display: block; }

.ui087f6-row-tx { min-width: 0; }
.ui087f6-row-tx strong {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #FFFFFF;
  font-family: var(--ui087f6-font-head);
  margin-bottom: 2px;
}
.ui087f6-row-tx span { font-size: 13px; color: var(--ui087f6-paper-dim); }

/* checklist */
.ui087f6-check {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.ui087f6-check li {
  position: relative;
  padding: 8px 10px 8px 34px;
  border-bottom: 1px dashed var(--ui087f6-line-soft);
  font-size: 13.5px;
  color: var(--ui087f6-paper);
}
.ui087f6-check li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 12px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--ui087f6-teal);
  border-radius: 2px;
}
.ui087f6-check li:hover::before { background: var(--ui087f6-teal); }

/* ---------- CTA band ---------- */
.ui087f6-cta {
  border: 1px solid var(--ui087f6-teal);
  border-radius: var(--ui087f6-edge);
  background:
    linear-gradient(180deg, rgba(0, 151, 167, 0.12) 0%, rgba(220, 20, 60, 0.08) 100%),
    var(--ui087f6-panel-2);
  padding: 14px 12px;
  margin: 0 0 12px;
}

.ui087f6-duo-lg > button {
  min-height: var(--ui087f6-tap);
  font-size: 13px;
  padding: 10px 14px;
}
.ui087f6-duo-lg { margin-top: 12px; }

.ui087f6-cta p { margin: 0; font-size: 13.5px; color: var(--ui087f6-paper); }

/* mini Q&A rows */
.ui087f6-qa { margin: 12px 0 0; border-top: 1px solid var(--ui087f6-line-soft); padding-top: 10px; }
.ui087f6-qa dt {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ui087f6-teal-hi);
  font-family: var(--ui087f6-font-head);
  margin-bottom: 3px;
}
.ui087f6-qa dd { margin: 0 0 10px; font-size: 13px; color: var(--ui087f6-paper-dim); }

/* ---------- extended footer: sectioned list ---------- */
.ui087f6-ext {
  margin-top: 30px;
  border-top: 3px solid var(--ui087f6-teal);
  padding-top: 6px;
}

.ui087f6-ext-lab {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 8px;
  color: var(--ui087f6-teal-hi);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--ui087f6-font-head);
}
.ui087f6-ext-lab svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* promo action rows (icon + text label) */
.ui087f6-promos {
  margin: 0;
  border: 1px solid var(--ui087f6-line-soft);
  border-radius: var(--ui087f6-edge);
  overflow: hidden;
}
.ui087f6-promo {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--ui087f6-tap);
  padding: 10px 12px;
  background: var(--ui087f6-panel-2);
  border-bottom: 1px solid var(--ui087f6-line-soft);
  text-align: left;
}
.ui087f6-promo:last-child { border-bottom: 0; }
.ui087f6-promo:hover {
  background: #333333;
  box-shadow: inset 3px 0 0 var(--ui087f6-crimson);
}
.ui087f6-promo svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--ui087f6-teal-hi); }
.ui087f6-promo:hover svg { color: var(--ui087f6-crimson); }
.ui087f6-promo span {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--ui087f6-paper);
}
.ui087f6-promo em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ui087f6-crimson);
  flex: 0 0 auto;
}

/* directory grid */
.ui087f6-dir {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.ui087f6-dir li { min-width: 0; }
.ui087f6-dir a {
  display: block;
  min-height: var(--ui087f6-tap);
  padding: 10px 8px;
  border: 1px solid var(--ui087f6-line-soft);
  border-radius: var(--ui087f6-edge);
  background: var(--ui087f6-panel-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ui087f6-paper);
  display: flex;
  align-items: center;
  overflow-wrap: break-word;
}
.ui087f6-dir a:hover {
  background: var(--ui087f6-teal);
  border-color: var(--ui087f6-teal);
  color: #06272B;
}

.ui087f6-disclaim {
  border: 1px dashed var(--ui087f6-line);
  border-radius: var(--ui087f6-edge);
  padding: 10px 12px;
  background: var(--ui087f6-floor);
}
.ui087f6-disclaim p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ui087f6-paper-faint);
}

/* ---------- common foot ---------- */
.ui087f6-foot {
  border-top: 1px solid var(--ui087f6-line-soft);
  background: var(--ui087f6-floor);
  padding: 14px 12px calc(16px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.ui087f6-foot p {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ui087f6-paper-faint);
}

/* ---------- layered bottom nav ---------- */
.ui087f6-bnav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 70;
  display: flex;
  align-items: stretch;
  background: var(--ui087f6-floor);
  border-top: 3px solid var(--ui087f6-teal);
  box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.45);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.ui087f6-bnav > a,
.ui087f6-bnav > button {
  flex: 1 1 20%;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px 7px;
  border-right: 1px solid var(--ui087f6-line-soft);
  color: var(--ui087f6-paper-dim);
}
.ui087f6-bnav > *:last-child { border-right: 0; }

.ui087f6-bnav svg { width: 22px; height: 22px; display: block; }

.ui087f6-bnav-lb {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--ui087f6-font-head);
  text-align: center;
  line-height: 1.15;
}

.ui087f6-bnav > a:hover,
.ui087f6-bnav > button:hover {
  color: #FFFFFF;
  background: #2A2A2A;
}
.ui087f6-bnav > button:hover {
  box-shadow: 0 0 12px rgba(220, 20, 60, 0.35);
}

/* active role: contrast inversion */
.ui087f6-bnav .ui087f6-on,
.ui087f6-bnav .ui087f6-on:hover {
  background: var(--ui087f6-teal);
  color: #06272B;
}

/* ---------- wide-screen behaviour: keep the phone canvas ---------- */
@media (min-width: 431px) {
  html { background: var(--ui087f6-void); }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
      radial-gradient(60% 40% at 50% 0%, rgba(0, 151, 167, 0.10), transparent 70%),
      var(--ui087f6-void);
    z-index: -1;
  }
}

@media (min-width: 375px) {
  .ui087f6-main h1 { font-size: 28px; }
  .ui087f6-main h2 { font-size: 19px; }
  .ui087f6-slide img { height: 178px; }
  .ui087f6-gamebar-nm { font-size: 12.5px; }
}

/* Editorial help layouts keep answers scannable without changing the base language. */
.ui087f6-steps { counter-reset: ui087f6-step; list-style: none; margin: 0; padding: 0; }
.ui087f6-steps li { counter-increment: ui087f6-step; position: relative; margin: 0 0 9px; padding: 11px 11px 11px 42px; background: var(--ui087f6-panel); border-left: 3px solid var(--ui087f6-teal); color: var(--ui087f6-paper); }
.ui087f6-steps li::before { content: counter(ui087f6-step, decimal-leading-zero); position: absolute; left: 10px; top: 11px; color: var(--ui087f6-crimson); font: 800 13px/1 var(--ui087f6-font-head); }
.ui087f6-steps strong { display: block; margin-bottom: 3px; color: #FFFFFF; font-family: var(--ui087f6-font-head); }
.ui087f6-symptom { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1px; margin: 0 0 10px; border: 1px solid var(--ui087f6-line-soft); background: var(--ui087f6-line-soft); }
.ui087f6-symptom > * { margin: 0; padding: 10px; background: var(--ui087f6-panel); }
.ui087f6-symptom dt { color: var(--ui087f6-teal-hi); font: 800 12px/1.3 var(--ui087f6-font-head); text-transform: uppercase; }
.ui087f6-symptom dd { color: var(--ui087f6-paper-dim); font-size: 13px; }
.ui087f6-answer { border-top: 2px solid var(--ui087f6-crimson); padding-top: 10px; }
.ui087f6-answer p:last-child { margin-bottom: 0; }
.ui087f6-ref { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.ui087f6-ref a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 10px; border: 1px solid var(--ui087f6-teal); background: var(--ui087f6-teal-tint); color: var(--ui087f6-paper); font-size: 12px; font-weight: 700; }
.ui087f6-ref a:hover { background: var(--ui087f6-teal); color: #06272B; }

@media (max-width: 359px) {
  .ui087f6-main { padding-left: 10px; padding-right: 10px; }
  .ui087f6-main h1 { font-size: 23px; }
  .ui087f6-slide img { height: 150px; }
  .ui087f6-brand-name { font-size: 14px; }
  .ui087f6-duo > button { padding: 6px 9px; font-size: 11px; }
}

/* reduced motion: state color changes only, nothing else animates */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}