/* kriya mobile shell - adaptive layers theme.
   Palette: #2E4057 deep navy canvas / #FFF176 signal yellow / #DEB887 burlywood text / #D2B48C tan lines.
   Design keys: near-square tool corners, light floating game cards, segmented action
   buttons, layered panels, quick scale micro-feedback.
   All class names and custom properties use the shelle070b- prefix. */

:root {
  --shelle070b-bg: #2E4057;
  --shelle070b-bg-deep: #24344A;
  --shelle070b-bg-well: #1D2B3D;
  --shelle070b-bg-raise: #3A5471;
  --shelle070b-yellow: #FFF176;
  --shelle070b-yellow-dim: #E8D768;
  --shelle070b-sand: #DEB887;
  --shelle070b-sand-soft: #C9A878;
  --shelle070b-tan: #D2B48C;
  --shelle070b-line: rgba(210, 180, 140, 0.42);
  --shelle070b-line-soft: rgba(210, 180, 140, 0.18);
  --shelle070b-card: rgba(222, 184, 135, 0.09);
  --shelle070b-card-hi: rgba(255, 241, 118, 0.10);
  --shelle070b-ink-on-yellow: #2E4057;
  --shelle070b-radius: 3px;
  --shelle070b-font: "Hind Siliguri", "Noto Sans Bengali", "SolaimanLipi", -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--shelle070b-bg-well);
  color: var(--shelle070b-sand);
  font-family: var(--shelle070b-font);
  font-size: 15px;
  line-height: 1.6;
}

body.shelle070b-lock { overflow: hidden; }

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

a { color: var(--shelle070b-yellow); text-decoration: none; }
a:hover { color: var(--shelle070b-yellow-dim); }

:focus-visible { outline: 2px solid var(--shelle070b-yellow); outline-offset: 2px; }

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

/* Centered phone canvas kept on wide screens. */
.shelle070b-canvas {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--shelle070b-bg);
  box-shadow: 0 0 0 1px rgba(210, 180, 140, 0.10);
  position: relative;
}

/* ---------- top minimal title action band ---------- */
.shelle070b-strip {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(36, 52, 74, 0.97);
  border-bottom: 2px solid var(--shelle070b-yellow);
  backdrop-filter: blur(6px);
}

.shelle070b-strip-in {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 7px 10px;
}

.shelle070b-idn {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-right: auto;
  min-width: 0;
}

.shelle070b-idn img {
  width: 32px;
  height: 32px;
  border-radius: var(--shelle070b-radius);
  border: 1px solid var(--shelle070b-line);
  flex: 0 0 auto;
}

.shelle070b-idn b {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--shelle070b-yellow);
  white-space: nowrap;
}

/* segmented action pair: filled + outline share one border frame */
.shelle070b-seg {
  display: flex;
  border: 1px solid var(--shelle070b-tan);
  border-radius: var(--shelle070b-radius);
  overflow: hidden;
}

.shelle070b-seg button,
button.shelle070b-seg-act,
a.shelle070b-seg-act {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  transition: transform 0.12s ease, background 0.12s ease;
}

.shelle070b-seg button + button { border-left: 1px solid var(--shelle070b-tan); }

.shelle070b-seg-fil {
  background: var(--shelle070b-yellow);
  color: var(--shelle070b-ink-on-yellow);
}

.shelle070b-seg-out {
  background: transparent;
  color: var(--shelle070b-yellow);
}

.shelle070b-seg button:active,
button.shelle070b-seg-act:active,
a.shelle070b-seg-act:active { transform: scale(0.94); }

.shelle070b-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  align-items: center;
  border: 1px solid var(--shelle070b-line);
  border-radius: var(--shelle070b-radius);
  transition: transform 0.12s ease;
}

.shelle070b-burger:active { transform: scale(0.92); }

.shelle070b-burger i {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--shelle070b-yellow);
}

/* ---------- right side drawer menu ---------- */
.shelle070b-veil {
  position: fixed;
  inset: 0;
  background: rgba(19, 28, 40, 0.66);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 55;
}

.shelle070b-veil-on { opacity: 1; pointer-events: auto; }

.shelle070b-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(84%, 316px);
  background: var(--shelle070b-bg-deep);
  border-left: 2px solid var(--shelle070b-yellow);
  transform: translateX(102%);
  transition: transform 0.22s ease;
  z-index: 60;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.shelle070b-drawer-on { transform: translateX(0); }

.shelle070b-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--shelle070b-line-soft);
}

.shelle070b-drawer-top span { font-weight: 800; color: var(--shelle070b-yellow); letter-spacing: 0.04em; }

.shelle070b-drawer-x {
  width: 34px;
  height: 34px;
  border: 1px solid var(--shelle070b-line);
  border-radius: var(--shelle070b-radius);
  color: var(--shelle070b-yellow);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.12s ease;
}

.shelle070b-drawer-x:active { transform: scale(0.9); }

.shelle070b-drawer-tag {
  margin: 14px 14px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--shelle070b-sand-soft);
  text-transform: uppercase;
}

.shelle070b-drawer a {
  display: block;
  padding: 10px 14px;
  border-left: 3px solid transparent;
  color: var(--shelle070b-sand);
  font-size: 14.5px;
}

.shelle070b-drawer a small {
  display: block;
  font-size: 11px;
  color: var(--shelle070b-sand-soft);
  letter-spacing: 0.04em;
}

.shelle070b-drawer a:active { background: var(--shelle070b-card); }

.shelle070b-drawer-here {
  border-left-color: var(--shelle070b-yellow);
  background: var(--shelle070b-card-hi);
  color: var(--shelle070b-yellow);
}

.shelle070b-drawer-end {
  margin-top: auto;
  padding: 12px 14px 16px;
  font-size: 11.5px;
  color: var(--shelle070b-sand-soft);
  border-top: 1px solid var(--shelle070b-line-soft);
}

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

/* hero: stacked statement layers, conclusion first */
.shelle070b-hero { position: relative; }

.shelle070b-hero-l1 {
  position: relative;
  background: var(--shelle070b-bg-raise);
  border: 1px solid var(--shelle070b-line);
  border-radius: var(--shelle070b-radius);
  padding: 14px 13px 12px;
}

.shelle070b-hero-l1::after {
  content: "";
  position: absolute;
  left: 7px;
  right: -7px;
  top: 7px;
  bottom: -7px;
  border: 1px solid var(--shelle070b-line-soft);
  border-radius: var(--shelle070b-radius);
  z-index: -1;
}

.shelle070b-hero-tab {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--shelle070b-ink-on-yellow);
  background: var(--shelle070b-yellow);
  padding: 3px 8px;
  border-radius: 2px;
  margin-bottom: 9px;
}

h1.shelle070b-hero-title {
  margin: 0 0 8px;
  font-size: clamp(21px, 6.2vw, 27px);
  line-height: 1.28;
  font-weight: 800;
  color: var(--shelle070b-yellow);
}

.shelle070b-hero-copy { margin: 0; font-size: 14px; color: var(--shelle070b-sand); }

.shelle070b-hero-acts { display: flex; gap: 8px; margin-top: 12px; }

.shelle070b-hero-acts .shelle070b-seg { flex: 1 1 auto; }
.shelle070b-hero-acts .shelle070b-seg button { flex: 1; }

/* ---------- promo carousel: snap rail + ticks ---------- */
.shelle070b-railbox {
  margin-top: 16px;
  border: 1px solid var(--shelle070b-line-soft);
  border-radius: var(--shelle070b-radius);
  background: var(--shelle070b-bg-deep);
  padding: 7px;
}

.shelle070b-rail {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.shelle070b-rail::-webkit-scrollbar { display: none; }

.shelle070b-promo {
  flex: 0 0 100%;
  scroll-snap-align: center;
  position: relative;
  border-radius: var(--shelle070b-radius);
  overflow: hidden;
  border: 1px solid var(--shelle070b-line-soft);
  transition: transform 0.12s ease;
}

.shelle070b-promo:active { transform: scale(0.985); }

.shelle070b-promo img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.shelle070b-promo span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--shelle070b-yellow);
  background: linear-gradient(180deg, rgba(29, 43, 61, 0) 0%, rgba(29, 43, 61, 0.92) 55%);
  text-align: left;
}

.shelle070b-ticks {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 8px 0 2px;
}

.shelle070b-tick {
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: var(--shelle070b-line);
  transition: background 0.15s ease, width 0.15s ease;
}

.shelle070b-tick-on { background: var(--shelle070b-yellow); width: 26px; }

/* ---------- game tiers ---------- */
.shelle070b-tier { margin-top: 20px; }

.shelle070b-tier-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--shelle070b-line);
  padding-bottom: 6px;
}

.shelle070b-tier-no {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--shelle070b-ink-on-yellow);
  background: var(--shelle070b-tan);
  padding: 2px 7px;
  border-radius: 2px;
}

h2.shelle070b-tier-title {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 800;
  color: var(--shelle070b-yellow);
}

.shelle070b-tier-n {
  margin-left: auto;
  font-size: 11px;
  color: var(--shelle070b-sand-soft);
  border: 1px solid var(--shelle070b-line-soft);
  padding: 2px 7px;
  border-radius: 2px;
  white-space: nowrap;
}

.shelle070b-tier-lede { margin: 7px 0 9px; font-size: 12.5px; color: var(--shelle070b-sand-soft); }

/* game grid: light floating layer cards */
.shelle070b-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

@media (min-width: 400px) {
  .shelle070b-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
}

.shelle070b-cell {
  display: block;
  text-align: left;
  background: var(--shelle070b-card);
  border: 1px solid var(--shelle070b-line-soft);
  border-radius: var(--shelle070b-radius);
  padding: 5px;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.shelle070b-cell:hover,
.shelle070b-cell:focus-visible {
  border-color: var(--shelle070b-yellow);
  background: var(--shelle070b-card-hi);
}

.shelle070b-cell:active { transform: scale(0.93); }

.shelle070b-cell-art {
  display: block;
  border-radius: 2px;
  overflow: hidden;
  background: var(--shelle070b-bg-well);
}

.shelle070b-cell-art img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.12s ease;
}

.shelle070b-cell:hover .shelle070b-cell-art img { transform: scale(1.05); }

.shelle070b-cell-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--shelle070b-sand);
  min-height: 2.7em;
}

/* ---------- decision band (play-now CTA) ---------- */
.shelle070b-decide {
  margin-top: 22px;
  background: var(--shelle070b-bg-deep);
  border: 1px solid var(--shelle070b-line);
  border-left: 4px solid var(--shelle070b-yellow);
  border-radius: var(--shelle070b-radius);
  padding: 13px 12px;
}

.shelle070b-decide h2 {
  margin: 0 0 6px;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--shelle070b-yellow);
}

.shelle070b-decide p { margin: 0 0 11px; font-size: 13.5px; }

.shelle070b-decide-acts { display: flex; gap: 8px; }
.shelle070b-decide-acts .shelle070b-seg { flex: 1; }
.shelle070b-decide-acts .shelle070b-seg button { flex: 1; }

.shelle070b-micro { margin: 8px 0 0; font-size: 11px; color: var(--shelle070b-sand-soft); }

/* ---------- feature ledger rows ---------- */
.shelle070b-fx { margin-top: 22px; }

h2.shelle070b-h2 {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 800;
  color: var(--shelle070b-yellow);
}

/* Page-specific reading structures retain the same compact visual language. */
.shelle070b-guide-intro {
  margin-top: 16px;
  padding: 14px 13px;
  border-left: 4px solid var(--shelle070b-yellow);
  background: var(--shelle070b-bg-deep);
  border-top: 1px solid var(--shelle070b-line-soft);
  border-bottom: 1px solid var(--shelle070b-line-soft);
}

.shelle070b-guide-intro p { margin: 0; font-size: 13.5px; }
.shelle070b-guide-intro p + p { margin-top: 8px; }

.shelle070b-ledger {
  margin-top: 18px;
  border-top: 2px solid var(--shelle070b-tan);
}

.shelle070b-ledger-row {
  display: grid;
  grid-template-columns: 31% 69%;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--shelle070b-line-soft);
}

.shelle070b-ledger-row strong { color: var(--shelle070b-yellow); font-size: 12.5px; }
.shelle070b-ledger-row span { font-size: 12.5px; }

.shelle070b-checkline {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--shelle070b-line-soft);
}

.shelle070b-checkline li {
  position: relative;
  padding: 10px 10px 10px 31px;
  border-bottom: 1px solid var(--shelle070b-line-soft);
  font-size: 13px;
}

.shelle070b-checkline li:last-child { border-bottom: 0; }
.shelle070b-checkline li::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 14px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--shelle070b-yellow);
  background: transparent;
}

.shelle070b-answer-stack { display: grid; gap: 10px; margin-top: 12px; }
.shelle070b-answer {
  border-left: 3px solid var(--shelle070b-tan);
  padding: 10px 11px;
  background: var(--shelle070b-card);
}
.shelle070b-answer h3 { margin: 0 0 4px; color: var(--shelle070b-yellow); font-size: 14px; }
.shelle070b-answer p { margin: 0; font-size: 13px; }

.shelle070b-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: shelle070bguide;
}

.shelle070b-steps li {
  counter-increment: shelle070bguide;
  position: relative;
  padding: 11px 10px 11px 42px;
  background: var(--shelle070b-card);
  border: 1px solid var(--shelle070b-line-soft);
  font-size: 13px;
}

.shelle070b-steps li::before {
  content: counter(shelle070bguide);
  position: absolute;
  left: 10px;
  top: 10px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: var(--shelle070b-yellow);
  color: var(--shelle070b-ink-on-yellow);
  font-weight: 800;
  font-size: 12px;
}

.shelle070b-promo-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--shelle070b-tan);
  background: var(--shelle070b-bg-deep);
}

.shelle070b-promo-line span { font-size: 12.5px; }
.shelle070b-promo-line button { flex: 0 0 auto; min-height: 44px; padding: 7px 10px; border: 1px solid var(--shelle070b-yellow); color: var(--shelle070b-yellow); font-weight: 800; }

.shelle070b-faq-list { display: grid; gap: 8px; }
.shelle070b-faq-item { border: 1px solid var(--shelle070b-line-soft); background: var(--shelle070b-card); }
.shelle070b-faq-item summary { cursor: pointer; padding: 11px 12px; color: var(--shelle070b-yellow); font-size: 13.5px; font-weight: 800; }
.shelle070b-faq-item p { margin: 0; padding: 0 12px 12px; font-size: 13px; }

@media (max-width: 349px) {
  .shelle070b-ledger-row { grid-template-columns: 1fr; gap: 2px; }
  .shelle070b-promo-line { align-items: flex-start; flex-direction: column; }
}

.shelle070b-fx-row {
  display: flex;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px dashed var(--shelle070b-line-soft);
}

.shelle070b-fx-key {
  flex: 0 0 34%;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--shelle070b-tan);
  letter-spacing: 0.02em;
}

.shelle070b-fx-val { flex: 1; font-size: 13px; }

/* ---------- player voices ---------- */
.shelle070b-voices {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.shelle070b-voice {
  position: relative;
  background: var(--shelle070b-card);
  border: 1px solid var(--shelle070b-line-soft);
  border-radius: var(--shelle070b-radius);
  padding: 11px 12px 9px 34px;
}

.shelle070b-voice::before {
  content: "\201C";
  position: absolute;
  left: 10px;
  top: 4px;
  font-size: 30px;
  font-weight: 800;
  color: var(--shelle070b-yellow);
  opacity: 0.8;
}

.shelle070b-voice p { margin: 0 0 5px; font-size: 13px; }

.shelle070b-voice footer { font-size: 11px; color: var(--shelle070b-sand-soft); }

/* ---------- category guide cards ---------- */
.shelle070b-kinds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.shelle070b-kind {
  background: var(--shelle070b-card);
  border: 1px solid var(--shelle070b-line-soft);
  border-top: 3px solid var(--shelle070b-tan);
  border-radius: var(--shelle070b-radius);
  padding: 10px 9px;
}

.shelle070b-kind h3 {
  margin: 0 0 5px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--shelle070b-yellow);
}

.shelle070b-kind p { margin: 0 0 8px; font-size: 11.5px; color: var(--shelle070b-sand-soft); }

.shelle070b-kind-links { display: flex; flex-direction: column; gap: 4px; }

.shelle070b-kind-links a {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--shelle070b-yellow);
  border: 1px solid var(--shelle070b-line-soft);
  border-radius: 2px;
  padding: 4px 6px;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.shelle070b-kind-links a:active { transform: scale(0.96); }

/* ---------- key takeaways checklist ---------- */
.shelle070b-keeps { margin: 0; padding: 0; list-style: none; }

.shelle070b-keeps li {
  position: relative;
  padding: 7px 6px 7px 26px;
  font-size: 13px;
  border-bottom: 1px solid var(--shelle070b-line-soft);
}

.shelle070b-keeps li::before {
  content: "\2713";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--shelle070b-ink-on-yellow);
  background: var(--shelle070b-yellow);
  border-radius: 2px;
}

/* ---------- step summary ---------- */
.shelle070b-path { margin: 0; padding: 0; list-style: none; counter-reset: shelle070bstep; }

.shelle070b-path li {
  counter-increment: shelle070bstep;
  position: relative;
  padding: 8px 4px 8px 34px;
  font-size: 13px;
}

.shelle070b-path li::before {
  content: counter(shelle070bstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--shelle070b-tan);
  border: 1px solid var(--shelle070b-line);
  border-radius: 2px;
  padding: 2px 4px;
  letter-spacing: 0.05em;
}

/* ---------- extended home footer: directory > brand > promotions > disclaimer ---------- */
.shelle070b-mega {
  margin-top: 26px;
  border: 1px solid var(--shelle070b-line-soft);
  border-radius: var(--shelle070b-radius);
  background: var(--shelle070b-bg-deep);
  padding: 12px 11px;
}

.shelle070b-mega-cap {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--shelle070b-sand-soft);
  text-transform: uppercase;
  margin: 2px 0 6px;
}

.shelle070b-mega-dir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--shelle070b-line-soft);
}

.shelle070b-mega-dir a { font-size: 12px; font-weight: 700; color: var(--shelle070b-sand); }
.shelle070b-mega-dir a:active { color: var(--shelle070b-yellow); }

.shelle070b-mega-brand { padding: 10px 0; border-bottom: 1px solid var(--shelle070b-line-soft); }
.shelle070b-mega-brand p { margin: 0; font-size: 12px; color: var(--shelle070b-sand-soft); }

.shelle070b-mega-promos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 10px 0;
  border-bottom: 1px solid var(--shelle070b-line-soft);
}

.shelle070b-mega-promos button {
  min-height: 40px;
  border: 1px solid var(--shelle070b-tan);
  border-radius: var(--shelle070b-radius);
  color: var(--shelle070b-yellow);
  font-size: 12px;
  font-weight: 700;
  transition: transform 0.12s ease, background 0.12s ease;
}

.shelle070b-mega-promos button:active { transform: scale(0.95); background: var(--shelle070b-card-hi); }

.shelle070b-mega-note { margin: 10px 0 0; font-size: 10.5px; color: var(--shelle070b-sand-soft); }

/* ---------- slim copyright footer ---------- */
.shelle070b-foot {
  margin-top: 14px;
  text-align: center;
  font-size: 11.5px;
  color: var(--shelle070b-sand-soft);
  letter-spacing: 0.03em;
}

/* ---------- bottom segmented action dock ---------- */
.shelle070b-dock {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(29, 43, 61, 0.98);
  border-top: 2px solid var(--shelle070b-yellow);
  z-index: 45;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.shelle070b-dock-it {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 54px;
  padding: 7px 2px 8px;
  color: var(--shelle070b-sand);
  transition: transform 0.12s ease;
}

.shelle070b-dock-it + .shelle070b-dock-it::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--shelle070b-line-soft);
}

.shelle070b-dock-it svg { width: 21px; height: 21px; transition: transform 0.12s ease; }

.shelle070b-dock-it span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; }

.shelle070b-dock-it:active { transform: scale(0.93); }

.shelle070b-dock-it:active svg { transform: scale(0.9); }

.shelle070b-dock-on { color: var(--shelle070b-yellow); }
.shelle070b-dock-on span { font-weight: 800; }

.shelle070b-dock-on::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: var(--shelle070b-yellow);
  border-radius: 2px 2px 0 0;
}

/* wide-screen note: keep the same phone-canvas navigation experience */
@media (min-width: 431px) {
  body { background: var(--shelle070b-bg-well); }
}