/* =====================================================================
   93k.click — tokens-responsive-a5f9a8.css
   Mobile-first base stylesheet for the 93k gaming portal.
   Every class and CSS variable uses the "shell9a897-" prefix.
   Design language: tech-feel titles + open body, light-rounded compact
   buttons, grouped cover game cards, lead-in sectioned rhythm, focus
   indicator slide motion, light-rounded text CTA groups.
   Navigation language: tab-style top bar, compact route panel,
   segmented action bottom bar, containerized symbol tiles,
   contrast-inversion active state, label-reveal micro-interaction.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --shell9a897-bg-deep: #1E1E1E;
  --shell9a897-bg-soft: #262626;
  --shell9a897-bg-panel: #2E2E2E;
  --shell9a897-text-mute: #B2DFDB;
  --shell9a897-text-strong: #E6F5F3;
  --shell9a897-accent: #FF8C00;
  --shell9a897-accent-soft: #FFB24D;
  --shell9a897-teal: #4DB6AC;
  --shell9a897-teal-deep: #0097A7;
  --shell9a897-line: rgba(178, 223, 219, 0.16);
  --shell9a897-line-strong: rgba(178, 223, 219, 0.32);
  --shell9a897-radius-sm: 8px;
  --shell9a897-radius-md: 12px;
  --shell9a897-radius-lg: 18px;
  --shell9a897-radius-pill: 999px;
  --shell9a897-gap-xs: 4px;
  --shell9a897-gap-sm: 8px;
  --shell9a897-gap-md: 14px;
  --shell9a897-gap-lg: 22px;
  --shell9a897-gap-xl: 32px;
  --shell9a897-header-h: 58px;
  --shell9a897-bottomnav-h: 64px;
  --shell9a897-shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.32);
  --shell9a897-shadow-focus: 0 0 0 3px rgba(255, 140, 0, 0.45);
  --shell9a897-canvas-max: 440px;
  --shell9a897-font-title: "Segoe UI", "Noto Sans Bengali", "SolaimanLipi", system-ui, -apple-system, sans-serif;
  --shell9a897-font-body: "Noto Sans Bengali", "SolaimanLipi", "Segoe UI", system-ui, -apple-system, sans-serif;
}

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

html,
body {
  margin: 0;
  padding: 0;
  background: var(--shell9a897-bg-deep);
  color: var(--shell9a897-text-mute);
  font-family: var(--shell9a897-font-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

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

a {
  color: var(--shell9a897-teal);
  text-decoration: none;
  transition: color 0.18s ease;
}
a:hover { color: var(--shell9a897-accent-soft); }
a:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: var(--shell9a897-shadow-focus);
  border-radius: var(--shell9a897-radius-sm);
}

h1, h2, h3, h4 {
  font-family: var(--shell9a897-font-title);
  color: var(--shell9a897-text-strong);
  letter-spacing: 0.2px;
  margin: 0 0 var(--shell9a897-gap-sm);
  line-height: 1.3;
}

p { margin: 0 0 var(--shell9a897-gap-sm); }

ul, ol { margin: 0 0 var(--shell9a897-gap-sm); padding-left: 1.15rem; }

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

/* ---------- Page canvas ---------- */
.shell9a897-page {
  max-width: var(--shell9a897-canvas-max);
  margin: 0 auto;
  min-height: 100vh;
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(0, 151, 167, 0.18), transparent 60%),
    var(--shell9a897-bg-deep);
  position: relative;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}

/* Header offset so fixed bar never hides content */
.shell9a897-top-spacer { height: var(--shell9a897-header-h); }

/* Bottom padding keeps content clear of fixed bottom nav */
.shell9a897-main {
  padding: var(--shell9a897-gap-md) var(--shell9a897-gap-md) calc(var(--shell9a897-bottomnav-h) + 36px);
}

/* =====================================================================
   Top bar — tab-style header
   ===================================================================== */
.shell9a897-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  max-width: var(--shell9a897-canvas-max);
  margin: 0 auto;
  height: var(--shell9a897-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--shell9a897-gap-sm);
  padding: 0 var(--shell9a897-gap-sm);
  background: linear-gradient(180deg, rgba(38, 38, 38, 0.98), rgba(30, 30, 30, 0.94));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--shell9a897-line);
}

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

.shell9a897-brand-logo {
  width: 38px;
  height: 38px;
  border-radius: var(--shell9a897-radius-sm);
  object-fit: cover;
  border: 1px solid var(--shell9a897-line-strong);
  background: var(--shell9a897-bg-panel);
  flex-shrink: 0;
}

.shell9a897-brand-name {
  font-family: var(--shell9a897-font-title);
  font-weight: 800;
  font-size: 20px;
  color: var(--shell9a897-text-strong);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.shell9a897-brand-name span {
  color: var(--shell9a897-accent);
}

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

.shell9a897-btn {
  font-family: var(--shell9a897-font-title);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 14px;
  border-radius: var(--shell9a897-radius-pill);
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  line-height: 1;
}

.shell9a897-btn:active { transform: scale(0.96); }

.shell9a897-btn--login {
  background: transparent;
  color: var(--shell9a897-text-mute);
  border: 1px solid var(--shell9a897-line-strong);
}

.shell9a897-btn--register {
  background: linear-gradient(135deg, var(--shell9a897-accent), #ff7400);
  color: #1a1a1a;
  box-shadow: 0 3px 10px rgba(255, 140, 0, 0.35);
}

.shell9a897-menu-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--shell9a897-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--shell9a897-bg-panel);
  border: 1px solid var(--shell9a897-line);
  color: var(--shell9a897-text-strong);
  font-size: 18px;
}

/* =====================================================================
   Compact route panel (slide-down menu)
   ===================================================================== */
.shell9a897-route-panel {
  position: fixed;
  top: var(--shell9a897-header-h);
  left: 0;
  right: 0;
  z-index: 49;
  max-width: var(--shell9a897-canvas-max);
  margin: 0 auto;
  background: var(--shell9a897-bg-soft);
  border-bottom: 1px solid var(--shell9a897-line-strong);
  box-shadow: var(--shell9a897-shadow-soft);
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.22s ease, opacity 0.22s ease, visibility 0.22s;
  max-height: calc(100vh - var(--shell9a897-header-h));
  overflow-y: auto;
}

.shell9a897-route-panel[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.shell9a897-route-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: var(--shell9a897-gap-sm);
}

.shell9a897-route-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: var(--shell9a897-radius-md);
  background: var(--shell9a897-bg-panel);
  border: 1px solid var(--shell9a897-line);
  min-height: 60px;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.shell9a897-route-tile:hover,
.shell9a897-route-tile:focus-visible {
  background: #353535;
  border-color: var(--shell9a897-teal);
}

.shell9a897-route-tile b {
  color: var(--shell9a897-text-strong);
  font-size: 13px;
  font-family: var(--shell9a897-font-title);
}

.shell9a897-route-tile small {
  color: var(--shell9a897-text-mute);
  font-size: 11px;
  opacity: 0.8;
}

.shell9a897-route-tile--promo {
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.18), rgba(0, 151, 167, 0.12));
  border-color: rgba(255, 140, 0, 0.45);
}

.shell9a897-route-tile--promo b { color: var(--shell9a897-accent-soft); }

.shell9a897-route-backdrop {
  position: fixed;
  inset: 0;
  z-index: 48;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s;
}

.shell9a897-route-backdrop[data-open="true"] {
  opacity: 1;
  visibility: visible;
}

/* =====================================================================
   Hero carousel
   ===================================================================== */
.shell9a897-hero {
  position: relative;
  border-radius: var(--shell9a897-radius-lg);
  overflow: hidden;
  margin-bottom: var(--shell9a897-gap-md);
  background: var(--shell9a897-bg-panel);
  box-shadow: var(--shell9a897-shadow-soft);
}

.shell9a897-hero-track {
  display: flex;
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0.3, 1);
  will-change: transform;
}

.shell9a897-hero-slide {
  flex: 0 0 100%;
  position: relative;
  display: block;
  width: 100%;
}

/* Allow the whole slide to act as a single promo CTA button */
button.shell9a897-hero-slide {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.shell9a897-hero-slide img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.shell9a897-hero-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px var(--shell9a897-gap-md) var(--shell9a897-gap-sm);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82));
  color: var(--shell9a897-text-strong);
}

.shell9a897-hero-caption b {
  display: block;
  font-family: var(--shell9a897-font-title);
  font-size: 16px;
  margin-bottom: 2px;
}

.shell9a897-hero-caption span {
  font-size: 12px;
  color: var(--shell9a897-accent-soft);
}

.shell9a897-hero-dots {
  position: absolute;
  bottom: 8px;
  right: 12px;
  display: flex;
  gap: 5px;
  z-index: 2;
}

.shell9a897-hero-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(230, 245, 243, 0.4);
  border: none;
  padding: 0;
  transition: background 0.2s ease, width 0.2s ease;
}

.shell9a897-hero-dot[aria-current="true"] {
  background: var(--shell9a897-accent);
  width: 18px;
  border-radius: var(--shell9a897-radius-pill);
}

/* =====================================================================
   Intro / lead section
   ===================================================================== */
.shell9a897-lead {
  margin-bottom: var(--shell9a897-gap-md);
  padding: var(--shell9a897-gap-md);
  border-radius: var(--shell9a897-radius-md);
  background: linear-gradient(135deg, rgba(0, 151, 167, 0.14), rgba(77, 182, 172, 0.06));
  border: 1px solid var(--shell9a897-line);
}

.shell9a897-lead p {
  margin: 0;
  color: var(--shell9a897-text-mute);
  font-size: 14px;
}

.shell9a897-lead strong { color: var(--shell9a897-accent-soft); }

/* =====================================================================
   Section heading
   ===================================================================== */
.shell9a897-section {
  margin-bottom: var(--shell9a897-gap-lg);
}

.shell9a897-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--shell9a897-gap-sm);
  margin-bottom: var(--shell9a897-gap-sm);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--shell9a897-line);
}

.shell9a897-section-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--shell9a897-text-strong);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.shell9a897-section-title::before {
  content: "";
  width: 4px;
  height: 18px;
  background: linear-gradient(180deg, var(--shell9a897-accent), var(--shell9a897-teal-deep));
  border-radius: 2px;
}

.shell9a897-section-tag {
  font-size: 11px;
  font-family: var(--shell9a897-font-title);
  color: var(--shell9a897-teal);
  padding: 3px 8px;
  border-radius: var(--shell9a897-radius-pill);
  background: rgba(77, 182, 172, 0.12);
  border: 1px solid rgba(77, 182, 172, 0.28);
}

/* =====================================================================
   Game grid — grouped cover cards
   320px → 4 columns, expands at 430px breakpoint.
   ===================================================================== */
.shell9a897-game-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.shell9a897-game-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  border-radius: var(--shell9a897-radius-md);
  overflow: hidden;
  background: var(--shell9a897-bg-panel);
  border: 1px solid var(--shell9a897-line);
  transition: transform 0.14s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.shell9a897-game-card:hover {
  transform: translateY(-2px);
  border-color: var(--shell9a897-accent);
  box-shadow: 0 6px 14px rgba(255, 140, 0, 0.18);
}

.shell9a897-game-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #111;
  display: block;
}

.shell9a897-game-name {
  font-size: 11px;
  line-height: 1.25;
  color: var(--shell9a897-text-mute);
  padding: 5px 4px 6px;
  min-height: 32px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--shell9a897-font-body);
}

/* 430px breakpoint — add a 5th column where canvas allows */
@media (min-width: 430px) {
  .shell9a897-game-grid { grid-template-columns: repeat(5, 1fr); }
  .shell9a897-hero-slide img { height: 200px; }
  .shell9a897-route-grid { grid-template-columns: repeat(3, 1fr); }
  body { font-size: 15.5px; }
}

@media (min-width: 360px) and (max-width: 429px) {
  .shell9a897-game-grid { gap: 9px; }
}

/* =====================================================================
   Info modules (Latest Winners, Mobile App, Comparison, Criteria)
   ===================================================================== */
.shell9a897-card {
  background: var(--shell9a897-bg-soft);
  border: 1px solid var(--shell9a897-line);
  border-radius: var(--shell9a897-radius-md);
  padding: var(--shell9a897-gap-md);
  margin-bottom: var(--shell9a897-gap-sm);
}

.shell9a897-card h2 { font-size: 16px; }

.shell9a897-card p { font-size: 14px; color: var(--shell9a897-text-mute); }

/* Latest winners ticker list */
.shell9a897-winners {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shell9a897-winner-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--shell9a897-radius-sm);
  background: var(--shell9a897-bg-panel);
  border: 1px solid var(--shell9a897-line);
}

.shell9a897-winner-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--shell9a897-font-title);
  font-weight: 800;
  font-size: 12px;
  color: #1a1a1a;
  background: linear-gradient(135deg, var(--shell9a897-accent), var(--shell9a897-accent-soft));
  flex-shrink: 0;
}

.shell9a897-winner-meta { flex: 1; min-width: 0; }

.shell9a897-winner-meta b {
  display: block;
  font-size: 13px;
  color: var(--shell9a897-text-strong);
  font-family: var(--shell9a897-font-title);
}

.shell9a897-winner-meta span {
  font-size: 11px;
  color: var(--shell9a897-text-mute);
  opacity: 0.8;
}

.shell9a897-winner-amount {
  font-family: var(--shell9a897-font-title);
  font-weight: 800;
  font-size: 13px;
  color: var(--shell9a897-accent-soft);
  white-space: nowrap;
}

/* App download block */
.shell9a897-app-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--shell9a897-gap-sm);
}

.shell9a897-app-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.shell9a897-chip {
  font-size: 12px;
  font-family: var(--shell9a897-font-title);
  padding: 6px 12px;
  border-radius: var(--shell9a897-radius-pill);
  background: rgba(77, 182, 172, 0.12);
  border: 1px solid rgba(77, 182, 172, 0.3);
  color: var(--shell9a897-teal);
}

.shell9a897-chip--accent {
  background: rgba(255, 140, 0, 0.12);
  border-color: rgba(255, 140, 0, 0.35);
  color: var(--shell9a897-accent-soft);
}

/* Comparison table */
.shell9a897-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.shell9a897-compare th,
.shell9a897-compare td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--shell9a897-line);
  vertical-align: top;
}

.shell9a897-compare th {
  font-family: var(--shell9a897-font-title);
  color: var(--shell9a897-text-strong);
  font-size: 12px;
  background: var(--shell9a897-bg-panel);
}

.shell9a897-compare td { color: var(--shell9a897-text-mute); }

.shell9a897-compare tr:last-child td { border-bottom: none; }

/* Criteria list */
.shell9a897-criteria {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shell9a897-criteria li {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: var(--shell9a897-radius-sm);
  background: var(--shell9a897-bg-panel);
  border: 1px solid var(--shell9a897-line);
}

.shell9a897-criteria-num {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--shell9a897-teal-deep), var(--shell9a897-teal));
  color: #fff;
  font-family: var(--shell9a897-font-title);
  font-weight: 800;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.shell9a897-criteria b { color: var(--shell9a897-text-strong); font-size: 13px; }
.shell9a897-criteria span { display: block; font-size: 12px; color: var(--shell9a897-text-mute); }

/* =====================================================================
   Inline promo strip
   ===================================================================== */
.shell9a897-promo-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--shell9a897-gap-sm);
  padding: 12px var(--shell9a897-gap-md);
  border-radius: var(--shell9a897-radius-md);
  background: linear-gradient(120deg, rgba(255, 140, 0, 0.18), rgba(0, 151, 167, 0.12));
  border: 1px solid rgba(255, 140, 0, 0.35);
  margin-bottom: var(--shell9a897-gap-md);
}

.shell9a897-promo-strip-text {
  font-size: 13px;
  color: var(--shell9a897-text-strong);
  font-family: var(--shell9a897-font-title);
}

.shell9a897-promo-strip-text small {
  display: block;
  font-size: 11px;
  color: var(--shell9a897-text-mute);
  font-family: var(--shell9a897-font-body);
}

/* =====================================================================
   Extended footer — two-column directory
   ===================================================================== */
.shell9a897-extended {
  margin-top: var(--shell9a897-gap-lg);
  padding: var(--shell9a897-gap-md);
  border-radius: var(--shell9a897-radius-md);
  background: var(--shell9a897-bg-soft);
  border: 1px solid var(--shell9a897-line);
}

.shell9a897-extended-brand {
  font-size: 13px;
  color: var(--shell9a897-text-mute);
  margin-bottom: var(--shell9a897-gap-md);
  padding-bottom: var(--shell9a897-gap-sm);
  border-bottom: 1px dashed var(--shell9a897-line-strong);
}

.shell9a897-extended-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 12px;
  margin-bottom: var(--shell9a897-gap-md);
}

.shell9a897-extended-grid a {
  font-size: 12.5px;
  color: var(--shell9a897-text-mute);
  padding: 6px 0;
  border-bottom: 1px solid rgba(178, 223, 219, 0.08);
  display: block;
}

.shell9a897-extended-grid a:hover { color: var(--shell9a897-accent-soft); }

.shell9a897-extended-promos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: var(--shell9a897-gap-sm);
}

.shell9a897-promo-entry {
  text-align: center;
  padding: 12px 8px;
  border-radius: var(--shell9a897-radius-md);
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.16), rgba(255, 140, 0, 0.04));
  border: 1px solid rgba(255, 140, 0, 0.32);
  color: var(--shell9a897-text-strong);
  font-family: var(--shell9a897-font-title);
  font-size: 12.5px;
  font-weight: 700;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shell9a897-promo-entry small {
  display: block;
  font-weight: 400;
  font-size: 10.5px;
  color: var(--shell9a897-accent-soft);
  margin-top: 2px;
}

.shell9a897-disclaimer {
  font-size: 11.5px;
  color: var(--shell9a897-text-mute);
  opacity: 0.78;
  line-height: 1.55;
  padding-top: var(--shell9a897-gap-sm);
  border-top: 1px solid var(--shell9a897-line);
}

/* =====================================================================
   Common footer (copyright only)
   ===================================================================== */
.shell9a897-footer {
  text-align: center;
  padding: var(--shell9a897-gap-md) 0 calc(var(--shell9a897-bottomnav-h) + 22px);
  font-size: 11.5px;
  color: var(--shell9a897-text-mute);
  opacity: 0.7;
  font-family: var(--shell9a897-font-title);
}

/* =====================================================================
   Bottom nav — segmented action bar
   ===================================================================== */
.shell9a897-bottomnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  max-width: var(--shell9a897-canvas-max);
  margin: 0 auto;
  height: var(--shell9a897-bottomnav-h);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
  background: linear-gradient(180deg, rgba(38, 38, 38, 0.98), rgba(20, 20, 20, 0.98));
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--shell9a897-line-strong);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.shell9a897-bottomnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px;
  color: var(--shell9a897-text-mute);
  font-size: 10px;
  font-family: var(--shell9a897-font-title);
  border-right: 1px solid rgba(178, 223, 219, 0.08);
  transition: color 0.18s ease, background 0.18s ease;
  min-height: 44px;
}

.shell9a897-bottomnav-item:last-child { border-right: none; }

.shell9a897-bottomnav-item:hover { color: var(--shell9a897-text-strong); }

.shell9a897-bottomnav-item[aria-current="page"] {
  color: var(--shell9a897-accent);
  background: rgba(255, 140, 0, 0.1);
}

/* Containerized symbol tiles */
.shell9a897-nav-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--shell9a897-bg-panel);
  border: 1px solid var(--shell9a897-line);
  font-size: 14px;
  color: var(--shell9a897-teal);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.shell9a897-bottomnav-item:hover .shell9a897-nav-icon {
  transform: translateY(-1px);
}

.shell9a897-bottomnav-item[aria-current="page"] .shell9a897-nav-icon,
.shell9a897-bottomnav-item--promo .shell9a897-nav-icon {
  background: linear-gradient(135deg, var(--shell9a897-accent), #ff7400);
  color: #1a1a1a;
  border-color: transparent;
}

.shell9a897-bottomnav-label {
  font-size: 10px;
  letter-spacing: 0.2px;
}

/* =====================================================================
   Utility & accessibility
   ===================================================================== */
.shell9a897-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--shell9a897-accent);
  color: #1a1a1a;
  padding: 8px 12px;
  border-radius: var(--shell9a897-radius-sm);
  z-index: 100;
  font-family: var(--shell9a897-font-title);
}

.shell9a897-skip:focus {
  left: 10px;
  top: 10px;
}

.shell9a897-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .shell9a897-hero-track { transition: none; }
}

/* Long-text safety on the narrowest canvas */
@media (max-width: 339px) {
  .shell9a897-game-grid { grid-template-columns: repeat(3, 1fr); }
  .shell9a897-extended-grid { grid-template-columns: 1fr; }
  .shell9a897-extended-promos { grid-template-columns: 1fr; }
}