/* ============================================================
   tata-game.click  mobile-first stylesheet
   class prefix : view68294-
   canvas       : 320 - 430px phone frame, centered on wide
   palette      : #0D1117 / #FFEB3B / #228B22 / #FFF176 / #00FF00
   ============================================================ */

/* ---------- design tokens ---------- */
:root {
  --view68294-ink: #0D1117;
  --view68294-panel: #141B25;
  --view68294-panelHi: #1B2432;
  --view68294-line: #2A3546;
  --view68294-yellow: #FFEB3B;
  --view68294-yellowSoft: #FFF176;
  --view68294-green: #228B22;
  --view68294-mint: #00FF00;
  --view68294-text: #E9EEF5;
  --view68294-muted: #9AA7B6;
  --view68294-radiusS: 8px;
  --view68294-radiusM: 12px;
  --view68294-radiusL: 16px;
  --view68294-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  --view68294-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Bengali", "Hind Siliguri", Roboto, Arial, sans-serif;
  --view68294-topH: 96px;
  --view68294-bnavH: 66px;
}

/* ---------- reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img { display: block; max-width: 100%; border: 0; }
button, a { -webkit-tap-highlight-color: rgba(255, 235, 59, 0.14); }
ul, ol { list-style: none; }

/* ---------- phone canvas ---------- */
body {
  background: var(--view68294-ink);
  color: var(--view68294-text);
  font-family: var(--view68294-body);
  font-size: 15px;
  line-height: 1.7;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  padding-top: var(--view68294-topH);
  /* room for the fixed layered bottom bar */
  padding-bottom: calc(var(--view68294-bnavH) + 30px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}
@media (min-width: 480px) {
  body {
    box-shadow: 0 0 0 1px var(--view68294-line), 0 0 60px rgba(0, 0, 0, 0.65);
    min-height: 100vh;
  }
}

/* ---------- utilities ---------- */
.view68294-sr {
  position: absolute; width: 1px; height: 1px;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.view68294-skip {
  position: fixed; top: -60px; left: 12px; z-index: 260;
  background: var(--view68294-yellow); color: var(--view68294-ink);
  font-family: var(--view68294-mono); font-size: 12px;
  padding: 10px 14px; border-radius: var(--view68294-radiusS);
  transition: top 0.2s ease;
}
.view68294-skip:focus { top: 8px; }
:focus-visible {
  outline: 2px solid var(--view68294-yellow);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   fixed tab-style top bar
   ============================================================ */
.view68294-topbar {
  position: fixed; top: 0; left: 0; right: 0;
  margin: 0 auto; width: 100%; max-width: 430px;
  z-index: 200;
  background: rgba(13, 17, 23, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--view68294-line);
}
.view68294-brandrow {
  display: flex; align-items: center; gap: 8px;
  min-height: 56px; padding: 8px 10px 6px;
}
.view68294-brand {
  display: flex; align-items: center; gap: 8px;
  margin-right: auto; min-width: 0;
  text-decoration: none; color: var(--view68294-text);
}
.view68294-brandLogo {
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 10px;
  border: 1px solid var(--view68294-line);
  background: var(--view68294-panel);
  object-fit: cover;
}
.view68294-brandName {
  font-family: var(--view68294-mono);
  font-size: 17px; font-weight: 700; letter-spacing: 0.4px;
  color: var(--view68294-yellow);
  white-space: nowrap;
}
.view68294-actions { display: flex; align-items: center; gap: 6px; }

/* staggered primary / secondary CTA pair */
.view68294-btn {
  font-family: var(--view68294-mono);
  border: 1px solid transparent;
  border-radius: var(--view68294-radiusS);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.view68294-btn:active { transform: scale(0.96); }
.view68294-btnReg {
  background: var(--view68294-yellow); color: var(--view68294-ink);
  font-weight: 700; font-size: 12px;
  min-height: 34px; padding: 6px 12px;
}
.view68294-btnReg:hover { box-shadow: 0 0 12px rgba(255, 235, 59, 0.35); }
.view68294-btnLog {
  background: transparent; color: var(--view68294-yellowSoft);
  border-color: var(--view68294-green);
  font-size: 12px; min-height: 34px; padding: 5px 10px;
}
.view68294-btnLog:hover { box-shadow: 0 0 10px rgba(34, 139, 34, 0.5); }

.view68294-menuBtn {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--view68294-panelHi);
  border: 1px solid var(--view68294-line);
  border-radius: var(--view68294-radiusS);
  color: var(--view68294-yellowSoft); cursor: pointer;
}
.view68294-menuBtn svg { width: 20px; height: 20px; }
.view68294-menuBtn:active { transform: scale(0.94); }

/* category quick tabs */
.view68294-tabs {
  display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
  padding: 4px 10px 8px;
}
.view68294-tabs::-webkit-scrollbar { display: none; }
.view68294-tab {
  flex: 0 0 auto;
  font-family: var(--view68294-mono);
  font-size: 11.5px; letter-spacing: 0.3px;
  color: var(--view68294-muted);
  text-decoration: none;
  border: 1px solid var(--view68294-line);
  background: var(--view68294-panel);
  padding: 6px 12px;
  border-radius: 999px;
  position: relative;
  min-height: 30px; display: inline-flex; align-items: center;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.view68294-tab:active { color: var(--view68294-yellow); }
.view68294-tab:hover { color: var(--view68294-yellowSoft); border-color: var(--view68294-green); }

/* ============================================================
   sectioned slide-down menu
   ============================================================ */
.view68294-menuWrap {
  position: fixed; top: var(--view68294-topH); left: 0; right: 0;
  margin: 0 auto; max-width: 430px; width: 100%;
  z-index: 190;
  visibility: hidden; opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.view68294-menuWrap.view68294-menuOn {
  visibility: visible; opacity: 1; transform: translateY(0);
}
.view68294-menupanel {
  background: var(--view68294-panel);
  border-bottom: 1px solid var(--view68294-line);
  max-height: calc(100vh - var(--view68294-topH));
  overflow-y: auto;
  padding: 12px 12px 16px;
}
.view68294-menugroup + .view68294-menugroup { margin-top: 14px; }
.view68294-menuLabel {
  font-family: var(--view68294-mono);
  font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--view68294-green);
  margin-bottom: 6px; padding-left: 2px;
}
.view68294-menulinks {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.view68294-menulink {
  display: flex; align-items: center; gap: 8px;
  background: var(--view68294-panelHi);
  border: 1px solid var(--view68294-line);
  border-radius: var(--view68294-radiusS);
  color: var(--view68294-text);
  text-decoration: none;
  font-size: 12.5px;
  min-height: 44px; padding: 8px 10px;
}
.view68294-menulink:hover { border-color: var(--view68294-green); color: var(--view68294-yellowSoft); }
.view68294-menulink .view68294-dot {
  width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%;
  background: var(--view68294-yellow); opacity: 0.75;
}
.view68294-scrim {
  position: fixed; inset: 0; z-index: 185;
  background: rgba(5, 8, 12, 0.6);
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.view68294-scrim.view68294-menuOn { opacity: 1; visibility: visible; }

/* ============================================================
   main column
   ============================================================ */
main { display: block; padding: 0 12px; }
.view68294-section { padding: 20px 0 4px; scroll-margin-top: calc(var(--view68294-topH) + 6px); }
.view68294-kicker {
  font-family: var(--view68294-mono);
  font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--view68294-green);
  margin-bottom: 6px;
}
h1.view68294-h1 {
  font-size: 21px; line-height: 1.45; font-weight: 800;
  color: var(--view68294-yellow);
  margin-bottom: 10px;
}
h2.view68294-h2 {
  font-size: 17.5px; line-height: 1.5; font-weight: 700;
  color: var(--view68294-text);
  margin: 0 0 8px;
}
h3.view68294-h3 {
  font-size: 14.5px; font-weight: 700; color: var(--view68294-yellowSoft);
  margin: 14px 0 6px;
}
.view68294-lead {
  border-left: 3px solid var(--view68294-green);
  padding: 2px 0 2px 10px;
  color: var(--view68294-muted);
  font-size: 13.5px;
  margin-bottom: 12px;
}
.view68294-lead strong { color: var(--view68294-text); font-weight: 600; }
.view68294-p { font-size: 14px; color: var(--view68294-muted); margin-bottom: 10px; }
.view68294-p strong { color: var(--view68294-text); font-weight: 600; }
.view68294-inlink {
  color: var(--view68294-yellowSoft); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--view68294-green);
  text-underline-offset: 3px;
}
.view68294-inlink:hover { color: var(--view68294-yellow); }

/* ============================================================
   hero carousel
   ============================================================ */
.view68294-hero {
  position: relative;
  border-radius: var(--view68294-radiusM);
  overflow: hidden;
  border: 1px solid var(--view68294-line);
  background: var(--view68294-panel);
  margin-top: 12px;
}
.view68294-slide {
  display: block; width: 100%;
  border: 0; padding: 0; cursor: pointer;
  position: relative;
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
  position: absolute; inset: 0;
}
.view68294-slide.view68294-on { opacity: 1; visibility: visible; position: relative; }
.view68294-slideImg {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--view68294-panelHi);
}
.view68294-slideCap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 26px 12px 9px;
  background: linear-gradient(180deg, rgba(13, 17, 23, 0) 0%, rgba(13, 17, 23, 0.92) 78%);
}
.view68294-slideTxt { flex: 1 1 auto; min-width: 0; text-align: left; }
.view68294-slideTitle {
  font-family: var(--view68294-mono);
  font-size: 12.5px; font-weight: 700; color: var(--view68294-yellow);
  line-height: 1.35;
}
.view68294-slideSub { font-size: 11px; color: var(--view68294-muted); }
.view68294-slideGo {
  flex: 0 0 auto;
  font-family: var(--view68294-mono); font-size: 10.5px; font-weight: 700;
  background: var(--view68294-yellow); color: var(--view68294-ink);
  border-radius: 999px; padding: 6px 11px;
}
.view68294-dots {
  position: absolute; right: 10px; top: 10px;
  display: flex; gap: 5px; z-index: 5;
}
.view68294-dot2 {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--view68294-yellowSoft);
  background: rgba(13, 17, 23, 0.55);
  cursor: pointer; padding: 0;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.view68294-dot2.view68294-on {
  background: var(--view68294-yellow);
  box-shadow: 0 0 6px rgba(0, 255, 0, 0.55);
}

/* quick CTA row (staggered sizes) */
.view68294-ctaRow {
  display: flex; align-items: stretch; gap: 8px;
  margin: 12px 0 2px;
}
.view68294-ctaMain {
  flex: 1 1 auto;
  background: linear-gradient(135deg, var(--view68294-yellow) 0%, var(--view68294-yellowSoft) 100%);
  color: var(--view68294-ink);
  font-family: var(--view68294-mono); font-weight: 800; font-size: 14px;
  min-height: 48px; padding: 10px 12px;
  border-radius: var(--view68294-radiusM);
  box-shadow: 0 4px 14px rgba(255, 235, 59, 0.18);
}
.view68294-ctaMain:hover { box-shadow: 0 0 18px rgba(0, 255, 0, 0.28); }
.view68294-ctaSide {
  flex: 0 0 38%;
  background: transparent;
  color: var(--view68294-yellowSoft);
  border: 1px solid var(--view68294-green);
  font-family: var(--view68294-mono); font-size: 12px; font-weight: 600;
  min-height: 48px; padding: 10px 8px;
  border-radius: var(--view68294-radiusS);
}
.view68294-ctaSide:hover { box-shadow: 0 0 12px rgba(34, 139, 34, 0.55); }

/* monospace stat tokens */
.view68294-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; margin: 14px 0 2px;
}
.view68294-stat {
  background: var(--view68294-panel);
  border: 1px solid var(--view68294-line);
  border-radius: var(--view68294-radiusS);
  padding: 8px 6px; text-align: center;
}
.view68294-statNum {
  font-family: var(--view68294-mono);
  font-size: 16px; font-weight: 800; color: var(--view68294-mint);
  line-height: 1.2;
}
.view68294-statLbl { font-size: 10.5px; color: var(--view68294-muted); }

/* why-list */
.view68294-why { display: grid; gap: 6px; margin-bottom: 4px; }
.view68294-whyItem {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--view68294-panel);
  border: 1px solid var(--view68294-line);
  border-radius: var(--view68294-radiusS);
  padding: 9px 11px;
  font-size: 12.5px; color: var(--view68294-muted);
}
.view68294-whyItem strong { color: var(--view68294-text); }
.view68294-whyTick {
  flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px;
  color: var(--view68294-green);
}

/* ============================================================
   game grids : 4 col on 320-399px, 5 col on 400px+
   ============================================================ */
.view68294-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 6px;
  margin-bottom: 6px;
}
@media (min-width: 400px) {
  .view68294-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 8px; }
}
.view68294-tile {
  background: var(--view68294-panel);
  border: 1px solid var(--view68294-line);
  border-radius: var(--view68294-radiusM);
  overflow: hidden; cursor: pointer;
  padding: 0; text-align: center;
  display: flex; flex-direction: column;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.view68294-tile:hover { border-color: var(--view68294-green); }
.view68294-tile:active { transform: scale(0.95); }
.view68294-tileImg {
  width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; background: var(--view68294-panelHi);
}
.view68294-tileName {
  display: block;
  font-size: 10.5px; line-height: 1.35;
  color: var(--view68294-muted);
  background: var(--view68294-panelHi);
  border-top: 1px solid var(--view68294-line);
  padding: 4px 3px 5px;
  min-height: 30px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.view68294-tile:hover .view68294-tileName { color: var(--view68294-yellowSoft); }

/* horizontal icon + name bars (today's top picks) */
.view68294-bars { display: grid; gap: 6px; margin: 10px 0 4px; }
.view68294-bar {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: var(--view68294-panel);
  border: 1px solid var(--view68294-line);
  border-radius: var(--view68294-radiusM);
  padding: 7px 10px 7px 7px;
  cursor: pointer;
  min-height: 56px;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.view68294-bar:hover { border-color: var(--view68294-green); }
.view68294-bar:active { transform: scale(0.98); }
.view68294-barImg {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 9px; object-fit: cover;
  background: var(--view68294-panelHi);
}
.view68294-barTxt { flex: 1 1 auto; min-width: 0; }
.view68294-barName {
  font-size: 13px; font-weight: 700; color: var(--view68294-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.view68294-barMeta {
  font-family: var(--view68294-mono);
  font-size: 10px; color: var(--view68294-green); letter-spacing: 0.4px;
}
.view68294-barArrow {
  flex: 0 0 auto; color: var(--view68294-yellow);
  font-family: var(--view68294-mono); font-size: 14px;
}

/* ============================================================
   promos / reviews / app / faq / entity modules
   ============================================================ */
.view68294-offers { display: grid; gap: 8px; margin-bottom: 4px; }
.view68294-offer {
  border: 1px solid var(--view68294-line);
  border-radius: var(--view68294-radiusM);
  background: var(--view68294-panel);
  padding: 11px 12px;
}
.view68294-offerMain {
  background: linear-gradient(140deg, rgba(34, 139, 34, 0.22) 0%, rgba(13, 17, 23, 0.4) 60%), var(--view68294-panelHi);
  border-color: var(--view68294-green);
}
.view68294-offerTag {
  display: inline-block;
  font-family: var(--view68294-mono);
  font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--view68294-ink);
  background: var(--view68294-yellow);
  border-radius: 4px; padding: 2px 7px;
  margin-bottom: 6px;
}
.view68294-offerTitle { font-size: 14px; font-weight: 700; color: var(--view68294-text); margin-bottom: 4px; }
.view68294-offerTxt { font-size: 12.5px; color: var(--view68294-muted); margin-bottom: 8px; }
.view68294-offerCta {
  font-family: var(--view68294-mono); font-size: 11.5px; font-weight: 700;
  color: var(--view68294-yellow);
  background: transparent;
  border: 1px solid var(--view68294-yellow);
  border-radius: 999px;
  min-height: 36px; padding: 6px 14px;
  cursor: pointer;
}
.view68294-offerCta:hover { box-shadow: 0 0 10px rgba(255, 235, 59, 0.4); }

.view68294-reviews { display: grid; gap: 8px; margin-bottom: 4px; }
.view68294-review {
  background: var(--view68294-panel);
  border: 1px solid var(--view68294-line);
  border-left: 3px solid var(--view68294-yellow);
  border-radius: var(--view68294-radiusM);
  padding: 10px 12px;
}
.view68294-reviewTop {
  display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
}
.view68294-reviewAv {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 50%;
  background: var(--view68294-panelHi);
  border: 1px solid var(--view68294-green);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--view68294-mono); font-size: 12px; font-weight: 700;
  color: var(--view68294-yellowSoft);
}
.view68294-reviewName { font-size: 12.5px; font-weight: 700; color: var(--view68294-text); }
.view68294-reviewGeo {
  font-family: var(--view68294-mono); font-size: 9.5px; color: var(--view68294-muted);
}
.view68294-stars {
  margin-left: auto;
  font-size: 11px; letter-spacing: 1.5px; color: var(--view68294-yellow);
}
.view68294-reviewTxt { font-size: 12.5px; color: var(--view68294-muted); }

.view68294-steps { counter-reset: view68294step; display: grid; gap: 6px; margin: 10px 0; }
.view68294-step {
  counter-increment: view68294step;
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--view68294-panel);
  border: 1px solid var(--view68294-line);
  border-radius: var(--view68294-radiusS);
  padding: 9px 11px;
  font-size: 12.5px; color: var(--view68294-muted);
}
.view68294-step::before {
  content: counter(view68294step, decimal-leading-zero);
  font-family: var(--view68294-mono);
  font-size: 12px; font-weight: 800; color: var(--view68294-mint);
  background: var(--view68294-panelHi);
  border: 1px solid var(--view68294-line);
  border-radius: 6px;
  padding: 2px 6px; margin-top: 1px;
}
.view68294-step strong { color: var(--view68294-text); }

.view68294-note {
  display: flex; gap: 8px; align-items: flex-start;
  background: rgba(34, 139, 34, 0.12);
  border: 1px dashed var(--view68294-green);
  border-radius: var(--view68294-radiusS);
  padding: 9px 11px;
  font-size: 12px; color: var(--view68294-muted);
  margin: 8px 0;
}
.view68294-note strong { color: var(--view68294-yellowSoft); }

/* FAQ accordions */
.view68294-faq { display: grid; gap: 7px; margin-bottom: 4px; }
.view68294-faqItem {
  background: var(--view68294-panel);
  border: 1px solid var(--view68294-line);
  border-radius: var(--view68294-radiusM);
  overflow: hidden;
}
.view68294-faqItem[open] { border-color: var(--view68294-green); }
.view68294-faqQ {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  list-style: none;
  padding: 11px 12px;
  font-size: 13px; font-weight: 700; color: var(--view68294-text);
  min-height: 44px;
}
.view68294-faqQ::-webkit-details-marker { display: none; }
.view68294-faqQ::before {
  content: "+";
  font-family: var(--view68294-mono);
  color: var(--view68294-yellow); font-size: 15px; font-weight: 700;
  flex: 0 0 auto;
}
.view68294-faqItem[open] .view68294-faqQ::before { content: "−"; color: var(--view68294-mint); }
.view68294-faqA {
  padding: 0 12px 11px 30px;
  font-size: 12.5px; color: var(--view68294-muted);
}

/* ============================================================
   extended homepage footer (sectioned list)
   ============================================================ */
.view68294-xfooter {
  margin-top: 22px;
  border-top: 1px solid var(--view68294-line);
  padding: 16px 0 4px;
}
.view68294-xblock + .view68294-xblock { margin-top: 16px; }
.view68294-xhead {
  font-family: var(--view68294-mono);
  font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--view68294-green);
  margin-bottom: 7px;
}
.view68294-xdir {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
}
.view68294-xlink {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--view68294-muted);
  text-decoration: none;
  background: var(--view68294-panel);
  border: 1px solid var(--view68294-line);
  border-radius: var(--view68294-radiusS);
  padding: 8px 9px;
  min-height: 40px;
}
.view68294-xlink:hover { color: var(--view68294-yellowSoft); border-color: var(--view68294-green); }
.view68294-xlink::before {
  content: "›"; color: var(--view68294-yellow);
  font-family: var(--view68294-mono);
}
.view68294-xpromo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left;
  font-family: var(--view68294-mono); font-size: 12px; font-weight: 700;
  color: var(--view68294-yellowSoft);
  background: linear-gradient(90deg, rgba(255, 235, 59, 0.08) 0%, rgba(34, 139, 34, 0.10) 100%);
  border: 1px solid var(--view68294-line);
  border-radius: var(--view68294-radiusS);
  padding: 9px 11px;
  min-height: 44px; cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.view68294-xpromo:hover { border-color: var(--view68294-yellow); box-shadow: 0 0 10px rgba(0, 255, 0, 0.18); }
.view68294-xpromo span:last-child { color: var(--view68294-mint); }
.view68294-xpromoList { display: grid; gap: 5px; }
.view68294-xdisc {
  font-size: 11.5px; line-height: 1.65; color: var(--view68294-muted);
  background: var(--view68294-panel);
  border: 1px dashed var(--view68294-line);
  border-radius: var(--view68294-radiusS);
  padding: 9px 11px;
}

/* copyright bar */
.view68294-copy {
  text-align: center;
  font-family: var(--view68294-mono);
  font-size: 10.5px; letter-spacing: 0.6px;
  color: var(--view68294-muted);
  padding: 14px 0 6px;
  border-top: 1px solid var(--view68294-line);
  margin-top: 14px;
}

/* ============================================================
   layered bottom navigation (5 roles)
   ============================================================ */
.view68294-bnav {
  position: fixed; bottom: 0; left: 0; right: 0;
  margin: 0 auto; width: 100%; max-width: 430px;
  z-index: 210;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: linear-gradient(180deg, rgba(20, 27, 37, 0.97) 0%, #0D1117 100%);
  border-top: 1px solid var(--view68294-line);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.45);
  padding: 4px 2px calc(6px + env(safe-area-inset-bottom, 0px));
}
.view68294-bnItem {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  min-height: 56px;
  background: none; border: 0; cursor: pointer;
  color: var(--view68294-muted);
  text-decoration: none;
  border-radius: var(--view68294-radiusS);
  padding: 4px 2px;
  transition: color 0.15s ease;
}
.view68294-bnItem::before {
  /* top indicator line for the active role */
  content: "";
  position: absolute; top: -5px; left: 50%; transform: translateX(-50%) scaleX(0);
  width: 26px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--view68294-yellow);
  transition: transform 0.18s ease;
}
.view68294-bnItem.view68294-bnActive { color: var(--view68294-yellow); }
.view68294-bnItem.view68294-bnActive::before { transform: translateX(-50%) scaleX(1); }
.view68294-bnIcon {
  width: 22px; height: 22px;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.view68294-bnItem svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.view68294-bnItem.view68294-bnActive svg { fill: currentColor; stroke: var(--view68294-ink); stroke-width: 1.1; }
.view68294-bnItem:active .view68294-bnIcon { transform: translateY(-1px) scale(1.08); }
.view68294-bnItem.view68294-bnHot .view68294-bnIcon { color: var(--view68294-mint); }
.view68294-bnLbl {
  font-family: var(--view68294-mono);
  font-size: 9.5px; letter-spacing: 0.3px;
}

/* subtle motion budget */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}