/* ==========================================================================
   Bingo Plus APK - display stylesheet (bingoplusapk.cyou)
   Palette : #800080 / #E9967A / #999999 / #141414 (dark bg, light text)
   Canvas  : 320-430px mobile frame, centered on wide screens
   Voice   : rounded headings + compact body, pill buttons, square cards,
             image-only game tiles with short names, metric-explainer rhythm,
             color-only state changes (no transform animation budget)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens (every variable carries the shell29fdc- prefix)
   -------------------------------------------------------------------------- */
:root {
  --shell29fdc-ink: #141414;            /* page background            */
  --shell29fdc-void: #0b0b0b;           /* gutter behind the canvas   */
  --shell29fdc-mint: #7ee2c0;           /* secondary readable accent */
  --shell29fdc-surface: #1d1920;        /* raised panel               */
  --shell29fdc-surface-2: #252029;      /* hover / nested surface     */
  --shell29fdc-purple: #800080;         /* brand line color           */
  --shell29fdc-purple-tint: #a03aa0;    /* readable purple tint       */
  --shell29fdc-salmon: #e9967a;         /* primary light accent       */
  --shell29fdc-salmon-deep: #d3826a;    /* pressed salmon             */
  --shell29fdc-gray: #999999;           /* muted labels               */
  --shell29fdc-text: #f5eee9;           /* main light text            */
  --shell29fdc-body: #cfc7c2;           /* paragraph text             */
  --shell29fdc-hair: rgba(153, 153, 153, 0.22);
  --shell29fdc-hair-strong: rgba(153, 153, 153, 0.4);
  --shell29fdc-head-font: 'Baloo 2', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --shell29fdc-body-font: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
  --shell29fdc-canvas: 430px;           /* widest phone canvas        */
  --shell29fdc-mast: 60px;              /* fixed header height        */
  --shell29fdc-dock: 64px;              /* fixed bottom rail height   */
  --shell29fdc-tap: 44px;               /* minimum touch target       */
  --shell29fdc-radius: 6px;             /* square-ish card corner     */
  --shell29fdc-pill: 999px;             /* round button corner        */
  --shell29fdc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --shell29fdc-glow: 0 0 10px rgba(233, 150, 122, 0.45);
}

/* --------------------------------------------------------------------------
   2. Base reset and phone canvas
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

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

body {
  margin: 0 auto;
  max-width: var(--shell29fdc-canvas);
  min-height: 100vh;
  background: var(--shell29fdc-ink);
  color: var(--shell29fdc-body);
  font: 400 15px/1.55 var(--shell29fdc-body-font);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--shell29fdc-head-font);
  color: var(--shell29fdc-text);
  margin: 0;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

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

ul, ol { margin: 0; padding: 0; }

a {
  color: var(--shell29fdc-salmon);
  text-decoration: underline;
  text-decoration-color: rgba(233, 150, 122, 0.45);
  text-underline-offset: 2px;
}
a:hover { color: var(--shell29fdc-text); text-decoration-color: var(--shell29fdc-salmon); }

::selection { background: var(--shell29fdc-purple); color: var(--shell29fdc-text); }

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

/* Wide screens keep the same centered phone canvas with a visible seam */
@media (min-width: 480px) {
  body {
    border-left: 1px solid var(--shell29fdc-hair-strong);
    border-right: 1px solid var(--shell29fdc-hair-strong);
    box-shadow: 0 0 42px rgba(0, 0, 0, 0.65);
  }
}

/* --------------------------------------------------------------------------
   3. Fixed masthead: compact brand bar + action cluster
   -------------------------------------------------------------------------- */
.shell29fdc-mast {
  position: fixed;
  top: 0; left: 0; right: 0;
  margin: 0 auto;
  max-width: var(--shell29fdc-canvas);
  height: var(--shell29fdc-mast);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  background: rgba(20, 20, 20, 0.97);
  border-bottom: 1px solid var(--shell29fdc-hair);
  z-index: 58;
}

.shell29fdc-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  text-decoration: none;
}

.shell29fdc-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1.5px solid var(--shell29fdc-purple-tint);
  object-fit: cover;
  flex: 0 0 auto;
}

.shell29fdc-sitename {
  font: 800 15px/1.05 var(--shell29fdc-head-font);
  color: var(--shell29fdc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shell29fdc-sitename em {
  font-style: normal;
  color: var(--shell29fdc-salmon);
}

.shell29fdc-headacts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   4. Buttons: solid primary pill + outlined secondary pill
   -------------------------------------------------------------------------- */
.shell29fdc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--shell29fdc-tap);
  padding: 0 20px;
  border-radius: var(--shell29fdc-pill);
  border: 1.5px solid transparent;
  font: 700 14px/1 var(--shell29fdc-head-font);
  letter-spacing: 0.03em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.shell29fdc-btn--solid {
  background: var(--shell29fdc-salmon);
  color: #141414;
  border-color: var(--shell29fdc-salmon);
}
.shell29fdc-btn--solid:hover { background: var(--shell29fdc-text); border-color: var(--shell29fdc-text); color: #141414; }
.shell29fdc-btn--solid:active { background: var(--shell29fdc-salmon-deep); border-color: var(--shell29fdc-salmon-deep); box-shadow: var(--shell29fdc-glow); }

.shell29fdc-btn--ghost {
  background: transparent;
  color: var(--shell29fdc-salmon);
  border-color: var(--shell29fdc-salmon);
}
.shell29fdc-btn--ghost:hover { color: var(--shell29fdc-text); border-color: var(--shell29fdc-text); }
.shell29fdc-btn--ghost:active { background: rgba(233, 150, 122, 0.14); box-shadow: var(--shell29fdc-glow); }

/* Compact header variants stay inside 44px height areas */
.shell29fdc-mast .shell29fdc-btn {
  min-height: 38px;
  padding: 0 12px;
  font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   5. Route panel (expandable menu) + scrim + burger
   -------------------------------------------------------------------------- */
.shell29fdc-burger {
  width: 40px;
  height: 38px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: 1.5px solid var(--shell29fdc-hair-strong);
  border-radius: var(--shell29fdc-pill);
  cursor: pointer;
  flex: 0 0 auto;
}
.shell29fdc-burger span {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--shell29fdc-gray);
}
.shell29fdc-burger:hover span { background: var(--shell29fdc-text); }
.shell29fdc-burger:active { box-shadow: var(--shell29fdc-glow); }
.shell29fdc-burger[aria-expanded="true"] span { background: var(--shell29fdc-salmon); }
.shell29fdc-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0.35; }

.shell29fdc-scrim {
  position: fixed;
  inset: 0;
  background: rgba(11, 11, 11, 0.62);
  z-index: 54;
  display: none;
}
.shell29fdc-scrim.shell29fdc-open { display: block; }

.shell29fdc-routes {
  position: fixed;
  top: calc(var(--shell29fdc-mast) + 4px);
  left: 8px;
  right: 8px;
  margin: 0 auto;
  max-width: calc(var(--shell29fdc-canvas) - 16px);
  background: var(--shell29fdc-surface);
  border: 1px solid var(--shell29fdc-hair-strong);
  border-top: 3px solid var(--shell29fdc-purple);
  border-radius: var(--shell29fdc-radius);
  padding: 8px;
  z-index: 56;
  display: none;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.55);
}
.shell29fdc-routes.shell29fdc-open { display: block; }

.shell29fdc-routeslabel {
  font: 700 11px/1.2 var(--shell29fdc-body-font);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--shell29fdc-gray);
  padding: 4px 8px 8px;
  margin: 0;
}

.shell29fdc-routegrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.shell29fdc-route {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: var(--shell29fdc-tap);
  padding: 6px 10px;
  border-radius: var(--shell29fdc-radius);
  border: 1px solid transparent;
  color: var(--shell29fdc-text);
  font: 500 13px/1.2 var(--shell29fdc-body-font);
  text-decoration: none;
}
.shell29fdc-route b {
  font-family: var(--shell29fdc-head-font);
  font-weight: 700;
  font-size: 13.5px;
}
.shell29fdc-route small {
  display: block;
  font-size: 10.5px;
  color: var(--shell29fdc-gray);
}
.shell29fdc-route:hover {
  background: var(--shell29fdc-surface-2);
  border-color: var(--shell29fdc-hair);
  color: var(--shell29fdc-salmon);
}
.shell29fdc-route:active { box-shadow: var(--shell29fdc-glow); }

/* --------------------------------------------------------------------------
   6. Stage: main scroll area between mast and dock
   -------------------------------------------------------------------------- */
.shell29fdc-stage {
  padding: calc(var(--shell29fdc-mast) + 12px) 12px
           calc(var(--shell29fdc-dock) + var(--shell29fdc-safe-bottom) + 26px);
}

.shell29fdc-lead {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(128, 0, 128, 0.35), transparent 60%),
    var(--shell29fdc-surface);
  border: 1px solid var(--shell29fdc-hair);
  border-radius: var(--shell29fdc-radius);
  padding: 16px 14px 14px;
  margin-bottom: 12px;
}

.shell29fdc-lead h1 {
  font-size: 25px;
  line-height: 1.18;
  font-weight: 800;
  margin-bottom: 8px;
}

.shell29fdc-leadtag {
  display: inline-block;
  font: 700 10.5px/1 var(--shell29fdc-body-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--shell29fdc-salmon);
  border: 1px solid rgba(233, 150, 122, 0.5);
  border-radius: var(--shell29fdc-pill);
  padding: 5px 10px;
  margin-bottom: 10px;
}

.shell29fdc-lead p { font-size: 14px; }

.shell29fdc-leadacts {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.shell29fdc-leadacts .shell29fdc-btn { flex: 1 1 auto; min-height: 42px; font-size: 13.5px; }

/* --------------------------------------------------------------------------
   7. Compact metric strip (metric value + short caption rhythm)
   -------------------------------------------------------------------------- */
.shell29fdc-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.shell29fdc-metric {
  background: var(--shell29fdc-surface);
  border: 1px solid var(--shell29fdc-hair);
  border-radius: var(--shell29fdc-radius);
  padding: 10px 6px 9px;
  text-align: center;
}

.shell29fdc-metricval {
  font: 800 19px/1 var(--shell29fdc-head-font);
  color: var(--shell29fdc-salmon);
}

.shell29fdc-metriccap {
  margin-top: 5px;
  font: 400 10.5px/1.3 var(--shell29fdc-body-font);
  color: var(--shell29fdc-gray);
}

/* --------------------------------------------------------------------------
   8. Banner films: native scroll-snap carousel, color-state dots only
   -------------------------------------------------------------------------- */
.shell29fdc-films {
  position: relative;
  margin-bottom: 14px;
}

.shell29fdc-filmtrack {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: var(--shell29fdc-radius);
  border: 1px solid var(--shell29fdc-hair);
  scrollbar-width: none;
}
.shell29fdc-filmtrack::-webkit-scrollbar { display: none; }

.shell29fdc-film {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  display: block;
}
.shell29fdc-film img { width: 100%; }
.shell29fdc-film:active img { filter: brightness(1.18); }

.shell29fdc-filmcta {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: var(--shell29fdc-pill);
  background: var(--shell29fdc-salmon);
  color: #141414;
  font: 700 12px/1 var(--shell29fdc-head-font);
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.shell29fdc-filmdots {
  position: absolute;
  right: 12px;
  bottom: 10px;
  display: flex;
  gap: 6px;
}

.shell29fdc-filmdot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--shell29fdc-salmon);
  background: transparent;
  cursor: pointer;
}
.shell29fdc-filmdot.shell29fdc-on {
  background: var(--shell29fdc-salmon);
  box-shadow: var(--shell29fdc-glow);
}

/* --------------------------------------------------------------------------
   9. Game decks: category header + compact image-only tile grid
   -------------------------------------------------------------------------- */
.shell29fdc-deck { margin-bottom: 20px; }

.shell29fdc-deckhead {
  display: flex;
  align-items: center;
  gap: 8px;
  border-left: 3px solid var(--shell29fdc-purple);
  padding-left: 10px;
  margin-bottom: 8px;
}

.shell29fdc-deckhead h2 {
  font-size: 18.5px;
  line-height: 1.25;
  font-weight: 700;
  flex: 1 1 auto;
}

.shell29fdc-deckcount {
  flex: 0 0 auto;
  font: 700 11px/1 var(--shell29fdc-body-font);
  color: #141414;
  background: var(--shell29fdc-salmon);
  border-radius: var(--shell29fdc-pill);
  padding: 5px 9px;
}

.shell29fdc-decknote {
  font-size: 13.5px;
  color: var(--shell29fdc-body);
  margin: 0 0 10px;
}

/* 4 columns at 320px, 5 columns once the canvas allows it */
.shell29fdc-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 8px;
}

@media (min-width: 392px) {
  .shell29fdc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.shell29fdc-gtap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--shell29fdc-text);
  font-family: var(--shell29fdc-body-font);
}

.shell29fdc-gframe {
  display: block;
  width: 100%;
  border-radius: var(--shell29fdc-radius);
  border: 1px solid var(--shell29fdc-hair);
  background: var(--shell29fdc-surface);
  overflow: hidden;
}
.shell29fdc-gframe img { width: 100%; }
.shell29fdc-gtap:hover .shell29fdc-gframe { border-color: var(--shell29fdc-salmon); }
.shell29fdc-gtap:active .shell29fdc-gframe { border-color: var(--shell29fdc-salmon); box-shadow: var(--shell29fdc-glow); }

.shell29fdc-gname {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 27px;
  font: 500 11px/1.25 var(--shell29fdc-body-font);
  text-align: center;
  color: var(--shell29fdc-text);
}
.shell29fdc-gtap:hover .shell29fdc-gname { color: var(--shell29fdc-salmon); }

/* --------------------------------------------------------------------------
   10. Prose modules: panel shell, tiles, split lists, Q&A, steps
   -------------------------------------------------------------------------- */
.shell29fdc-panel {
  background: var(--shell29fdc-surface);
  border: 1px solid var(--shell29fdc-hair);
  border-radius: var(--shell29fdc-radius);
  padding: 14px;
  margin-bottom: 14px;
}

.shell29fdc-panel > h2 {
  font-size: 18.5px;
  line-height: 1.3;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--shell29fdc-hair-strong);
}

.shell29fdc-panel h3 {
  font-size: 15px;
  line-height: 1.3;
  margin: 14px 0 6px;
  color: var(--shell29fdc-salmon);
}
.shell29fdc-panel h3:first-of-type { margin-top: 4px; }

.shell29fdc-panel p { font-size: 14px; }

/* Reader-goal rows in the selection module */
.shell29fdc-goal {
  border: 1px solid var(--shell29fdc-hair);
  border-radius: var(--shell29fdc-radius);
  padding: 10px 12px;
  margin-top: 8px;
  background: rgba(20, 20, 20, 0.45);
}
.shell29fdc-goal h3 { margin: 0 0 5px; font-size: 14px; color: var(--shell29fdc-text); }
.shell29fdc-goal p { font-size: 13px; margin: 0; }

/* Feature tiles: compact label + explanation pairs */
.shell29fdc-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.shell29fdc-tile {
  border: 1px solid var(--shell29fdc-hair);
  border-left: 3px solid var(--shell29fdc-purple);
  border-radius: var(--shell29fdc-radius);
  padding: 10px;
  background: rgba(20, 20, 20, 0.45);
}
.shell29fdc-tile b {
  display: block;
  font: 700 13px/1.3 var(--shell29fdc-head-font);
  color: var(--shell29fdc-text);
  margin-bottom: 4px;
}
.shell29fdc-tile span { font-size: 12px; line-height: 1.45; color: var(--shell29fdc-gray); }

/* Pros and limitations */
.shell29fdc-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}

.shell29fdc-half {
  border: 1px solid var(--shell29fdc-hair);
  border-radius: var(--shell29fdc-radius);
  padding: 10px 12px;
  background: rgba(20, 20, 20, 0.45);
}
.shell29fdc-half h3 { margin: 0 0 8px; font-size: 14px; }
.shell29fdc-half--good h3 { color: var(--shell29fdc-salmon); }
.shell29fdc-half--bad h3 { color: var(--shell29fdc-gray); }

.shell29fdc-half ul { list-style: none; }
.shell29fdc-half li {
  position: relative;
  padding: 0 0 0 18px;
  margin-bottom: 7px;
  font-size: 13px;
  line-height: 1.45;
}
.shell29fdc-half li:last-child { margin-bottom: 0; }
.shell29fdc-half li::before {
  position: absolute;
  left: 0;
  top: 0;
  font: 700 13px/1.5 var(--shell29fdc-body-font);
}
.shell29fdc-half--good li::before { content: "+"; color: var(--shell29fdc-salmon); }
.shell29fdc-half--bad li::before { content: "\2013"; color: var(--shell29fdc-gray); }

/* Scenario question blocks */
.shell29fdc-qa {
  border-top: 1px dashed var(--shell29fdc-hair-strong);
  padding-top: 12px;
  margin-top: 12px;
}
.shell29fdc-qa:first-of-type { border-top: 0; margin-top: 2px; padding-top: 0; }
.shell29fdc-qa h3 { margin: 0 0 6px; font-size: 14.5px; color: var(--shell29fdc-text); }
.shell29fdc-qa p { font-size: 13.5px; }
.shell29fdc-qa .shell29fdc-averdict {
  color: var(--shell29fdc-salmon);
  font-weight: 700;
}

/* Numbered checklist rows */
.shell29fdc-checklist { list-style: none; counter-reset: shell29fdc-step; }
.shell29fdc-checklist li {
  counter-increment: shell29fdc-step;
  position: relative;
  padding: 0 0 4px 34px;
  margin-bottom: 10px;
  font-size: 13.5px;
  line-height: 1.5;
}
.shell29fdc-checklist li:last-child { margin-bottom: 0; }
.shell29fdc-checklist li::before {
  content: counter(shell29fdc-step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--shell29fdc-purple);
  color: var(--shell29fdc-text);
  font: 700 12px/22px var(--shell29fdc-head-font);
  text-align: center;
}

/* --------------------------------------------------------------------------
   11. Extended footer: brand note > page directory > promo shortcuts > note
   -------------------------------------------------------------------------- */
.shell29fdc-xfoot {
  margin-top: 22px;
  border-top: 3px solid var(--shell29fdc-purple);
  background: rgba(29, 25, 32, 0.75);
  border-radius: 0 0 var(--shell29fdc-radius) var(--shell29fdc-radius);
  padding: 14px 2px 12px;
}

.shell29fdc-xfootitle {
  font: 700 11px/1 var(--shell29fdc-body-font);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--shell29fdc-gray);
  margin: 0 0 8px;
}

.shell29fdc-xbrand {
  padding: 0 2px 14px;
  border-bottom: 1px solid var(--shell29fdc-hair);
}
.shell29fdc-xbrand p { font-size: 12.5px; line-height: 1.55; color: var(--shell29fdc-gray); }

.shell29fdc-xsec { padding: 14px 2px 0; }

.shell29fdc-dirgrid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}
.shell29fdc-dirgrid a {
  display: inline-block;
  min-height: 24px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--shell29fdc-body);
  text-decoration-color: rgba(153, 153, 153, 0.5);
}
.shell29fdc-dirgrid a:hover { color: var(--shell29fdc-salmon); text-decoration-color: var(--shell29fdc-salmon); }

/* Horizontal shortcut rail for the five lobby actions */
.shell29fdc-shorts {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: none;
}
.shell29fdc-shorts::-webkit-scrollbar { display: none; }

.shell29fdc-short {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--shell29fdc-pill);
  border: 1.5px solid var(--shell29fdc-purple-tint);
  background: rgba(128, 0, 128, 0.16);
  color: var(--shell29fdc-text);
  font: 700 12px/1 var(--shell29fdc-head-font);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.shell29fdc-short svg { width: 15px; height: 15px; stroke: var(--shell29fdc-salmon); fill: none; stroke-width: 1.8; }
.shell29fdc-short:hover { border-color: var(--shell29fdc-salmon); color: var(--shell29fdc-salmon); }
.shell29fdc-short:active { background: rgba(233, 150, 122, 0.16); box-shadow: var(--shell29fdc-glow); }

.shell29fdc-xnote {
  margin-top: 14px;
  border: 1px solid var(--shell29fdc-hair);
  border-radius: var(--shell29fdc-radius);
  padding: 10px 12px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--shell29fdc-gray);
  background: rgba(20, 20, 20, 0.5);
}
.shell29fdc-xnote b { color: var(--shell29fdc-salmon); font-weight: 700; }

/* --------------------------------------------------------------------------
   12. Copyright end bar + fixed bottom dock rail
   -------------------------------------------------------------------------- */
.shell29fdc-endbar {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--shell29fdc-gray);
  padding: 14px 0 2px;
}
.shell29fdc-endbar b { color: var(--shell29fdc-body); font-weight: 700; }

.shell29fdc-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: var(--shell29fdc-canvas);
  height: calc(var(--shell29fdc-dock) + var(--shell29fdc-safe-bottom));
  padding-bottom: var(--shell29fdc-safe-bottom);
  display: flex;
  background: rgba(20, 20, 20, 0.97);
  border-top: 1px solid var(--shell29fdc-hair);
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.5);
  z-index: 60;
}

.shell29fdc-dockitem {
  flex: 1 1 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--shell29fdc-dock);
  padding: 0 2px;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  color: var(--shell29fdc-gray);
  font: 500 10px/1.2 var(--shell29fdc-body-font);
  letter-spacing: 0.02em;
  text-decoration: none;
}
.shell29fdc-dockitem svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shell29fdc-dockitem span { white-space: nowrap; }
.shell29fdc-dockitem:hover { color: var(--shell29fdc-text); }
.shell29fdc-dockitem:active { box-shadow: var(--shell29fdc-glow); }

/* Active role: filled icon, salmon tone, underline marker, restrained glow */
.shell29fdc-dockitem.shell29fdc-live { color: var(--shell29fdc-salmon); }
.shell29fdc-dockitem.shell29fdc-live svg { fill: currentColor; stroke: var(--shell29fdc-salmon); }
.shell29fdc-dockitem.shell29fdc-live::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--shell29fdc-salmon);
  box-shadow: var(--shell29fdc-glow);
}

/* --------------------------------------------------------------------------
   13. Focus visibility, tiny-canvas guard, reduced motion
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--shell29fdc-salmon);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (max-width: 330px) {
  .shell29fdc-mast { gap: 5px; padding: 0 6px; }
  .shell29fdc-mast .shell29fdc-btn { padding: 0 9px; font-size: 11.5px; }
  .shell29fdc-sitename { font-size: 13.5px; }
  .shell29fdc-logo { width: 30px; height: 30px; }
  .shell29fdc-lead h1 { font-size: 22.5px; }
  .shell29fdc-metrics { gap: 6px; }
  .shell29fdc-metriccap { font-size: 10px; }
}

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