/* ==========================================================================
   SS777 Casino - layers-responsive-7148d6.css
   Mobile-first phone canvas styles (320-430px), every class uses c148d6-
   ========================================================================== */

:root {
  --c148d6-canvas: 430px;            /* hard phone canvas width, see also max-width: 430px */
  --c148d6-bg: #171410;
  --c148d6-bg-deep: #0f0d09;
  --c148d6-panel: #221d15;
  --c148d6-panel-2: #2a2419;
  --c148d6-panel-3: #322a1d;
  --c148d6-ink: #f8f0dd;
  --c148d6-ink-dim: #cfc2a6;
  --c148d6-ink-faint: #9a8f77;
  --c148d6-gold: #cd853f;
  --c148d6-flame: #ff9500;
  --c148d6-sun: #fff176;
  --c148d6-mint: #98fb98;
  --c148d6-edge: rgba(205, 133, 63, 0.30);
  --c148d6-edge-soft: rgba(205, 133, 63, 0.16);
  --c148d6-danger: #ffb199;
  --c148d6-radius-s: 8px;
  --c148d6-radius-m: 13px;
  --c148d6-radius-l: 20px;
  --c148d6-dock-h: 62px;
  --c148d6-tap: 44px;
  --c148d6-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--c148d6-bg-deep);
  color: var(--c148d6-ink);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.c148d6-shell {
  position: relative;
  max-width: 430px;                   /* phone canvas kept on wide viewports */
  margin: 0 auto;
  min-height: 100vh;
  background:
    radial-gradient(120% 42% at 50% 0%, rgba(255, 149, 0, 0.10), transparent 60%),
    linear-gradient(180deg, var(--c148d6-bg) 0%, #131009 100%);
  box-shadow: 0 0 0 1px rgba(205, 133, 63, 0.12);
}

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

a { color: var(--c148d6-sun); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--c148d6-sun);
  outline-offset: 2px;
  border-radius: 4px;
}

.c148d6-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c148d6-sun);
  color: #201a10;
  padding: 8px 14px;
  border-radius: 0 0 var(--c148d6-radius-s) 0;
  font-weight: 700;
  z-index: 60;
}
.c148d6-skip:focus { left: 0; }

/* ---------- top action bar ---------- */
.c148d6-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px 12px;
  background: rgba(18, 15, 10, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c148d6-edge);
}

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

.c148d6-logo {
  width: 34px;
  height: 34px;
  border-radius: var(--c148d6-radius-s);
  border: 1px solid var(--c148d6-edge);
  flex: 0 0 auto;
}

.c148d6-brandname {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.2px;
  color: var(--c148d6-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c148d6-brandname b { color: var(--c148d6-flame); }

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

.c148d6-btn {
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  border: none;
  border-radius: var(--c148d6-radius-s);
  min-height: var(--c148d6-tap);
  min-width: 44px;
  padding: 8px 12px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.c148d6-btn-register {
  background: linear-gradient(180deg, var(--c148d6-flame), #e07c00);
  color: #1d1405;
  box-shadow: 0 2px 10px rgba(255, 149, 0, 0.35);
}
.c148d6-btn-register:hover { filter: brightness(1.08); box-shadow: 0 3px 14px rgba(255, 149, 0, 0.5); }

.c148d6-btn-login {
  background: transparent;
  color: var(--c148d6-sun);
  border: 1px solid var(--c148d6-gold);
}
.c148d6-btn-login:hover { background: rgba(205, 133, 63, 0.16); }

.c148d6-menubtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--c148d6-tap);
  min-width: var(--c148d6-tap);
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--c148d6-ink-dim);
  background: var(--c148d6-panel-2);
  border: 1px solid var(--c148d6-edge-soft);
  border-radius: var(--c148d6-radius-s);
  cursor: pointer;
}
.c148d6-menubtn svg { width: 18px; height: 18px; }
.c148d6-menubtn[aria-expanded="true"] { color: var(--c148d6-sun); border-color: var(--c148d6-gold); }

/* ---------- stacked menu overlay ---------- */
.c148d6-scrim {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 3, 0.66);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  z-index: 45;
}
.c148d6-scrim.c148d6-on { opacity: 1; pointer-events: auto; }

.c148d6-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -102%);
  width: min(100vw, 430px);
  background: linear-gradient(180deg, #241d12, #15110b);
  border-bottom: 2px solid var(--c148d6-gold);
  border-radius: 0 0 var(--c148d6-radius-l) var(--c148d6-radius-l);
  padding: 14px 14px 26px;
  z-index: 50;
  transition: transform 0.28s ease;
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: var(--c148d6-shadow);
}
.c148d6-drawer.c148d6-open { transform: translate(-50%, 0); }

.c148d6-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.c148d6-drawer-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c148d6-flame);
}

.c148d6-drawerclose {
  min-width: var(--c148d6-tap);
  min-height: var(--c148d6-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c148d6-panel-2);
  color: var(--c148d6-ink);
  border: 1px solid var(--c148d6-edge-soft);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.c148d6-drawer-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.c148d6-drawer-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--c148d6-tap);
  padding: 10px 12px;
  border-radius: var(--c148d6-radius-s);
  background: rgba(42, 36, 25, 0.6);
  border: 1px solid var(--c148d6-edge-soft);
  color: var(--c148d6-ink);
  font-weight: 600;
  font-size: 14px;
}
.c148d6-drawer-links a:hover { text-decoration: none; border-color: var(--c148d6-gold); background: rgba(205, 133, 63, 0.14); }
.c148d6-drawer-links svg { width: 17px; height: 17px; color: var(--c148d6-sun); flex: 0 0 auto; }
.c148d6-drawer-links .c148d6-here { border-color: var(--c148d6-flame); background: rgba(255, 149, 0, 0.14); }
.c148d6-drawer-links .c148d6-here svg { color: var(--c148d6-flame); }

/* ---------- hero ---------- */
.c148d6-main { padding: 14px 12px calc(var(--c148d6-dock-h) + 30px); }

.c148d6-hero { margin-bottom: 6px; }

.c148d6-h1 {
  font-size: 21px;
  line-height: 1.3;
  font-weight: 800;
  margin: 4px 0 8px;
  color: var(--c148d6-ink);
}
.c148d6-h1 em {
  font-style: normal;
  color: var(--c148d6-sun);
}

.c148d6-lede {
  margin: 0 0 12px;
  color: var(--c148d6-ink-dim);
  font-size: 14px;
}

.c148d6-duo {
  display: flex;
  gap: 8px;
  margin: 10px 0 14px;
}
.c148d6-duo .c148d6-btn { flex: 1 1 50%; font-size: 14px; padding: 11px 10px; }

/* ---------- carousel ---------- */
.c148d6-carousel {
  position: relative;
  border-radius: var(--c148d6-radius-m);
  overflow: hidden;
  border: 1px solid var(--c148d6-edge);
  background: var(--c148d6-panel);
  margin-bottom: 6px;
}

.c148d6-viewport {
  overflow: hidden;
  touch-action: pan-y;
}

.c148d6-track {
  display: flex;
  transition: transform 0.42s cubic-bezier(0.3, 0.8, 0.3, 1);
}

.c148d6-slide {
  flex: 0 0 100%;
  position: relative;
  display: block;
}
.c148d6-slide img {
  width: 100%;
  aspect-ratio: 2.32 / 1;
  object-fit: cover;
}
.c148d6-slide span {
  position: absolute;
  left: 10px;
  bottom: 8px;
  max-width: 78%;
  background: rgba(12, 9, 5, 0.74);
  border-left: 3px solid var(--c148d6-flame);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c148d6-ink);
  line-height: 1.35;
}

.c148d6-dots {
  position: absolute;
  right: 10px;
  bottom: 9px;
  display: flex;
  gap: 6px;
}
.c148d6-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--c148d6-sun);
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.c148d6-dot.c148d6-now { background: var(--c148d6-sun); }

.c148d6-carbtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  min-height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 241, 118, 0.6);
  background: rgba(10, 8, 4, 0.55);
  color: var(--c148d6-sun);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c148d6-carbtn:hover { background: rgba(255, 149, 0, 0.4); }
.c148d6-prev { left: 6px; }
.c148d6-next { right: 6px; }

/* ---------- section rail (step rhythm) ---------- */
.c148d6-section { margin-top: 26px; }

.c148d6-sec-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.c148d6-stepchip {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #1d1405;
  background: linear-gradient(160deg, var(--c148d6-sun), var(--c148d6-gold));
  box-shadow: 0 2px 8px rgba(205, 133, 63, 0.4);
}

.c148d6-h2 {
  font-size: 17.5px;
  line-height: 1.32;
  font-weight: 800;
  margin: 0;
  color: var(--c148d6-ink);
}

.c148d6-sec-note {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--c148d6-ink-dim);
}
.c148d6-sec-note a { border-bottom: 1px dotted rgba(255, 241, 118, 0.55); }

.c148d6-quickline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.c148d6-quickline li {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c148d6-mint);
  background: rgba(152, 251, 152, 0.08);
  border: 1px solid rgba(152, 251, 152, 0.28);
  border-radius: 999px;
  padding: 3px 9px;
}

/* ---------- game grids ---------- */
.c148d6-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.c148d6-tile {
  display: flex;
  flex-direction: column;
  border-radius: var(--c148d6-radius-s);
  overflow: hidden;
  background: var(--c148d6-panel-2);
  border: 1px solid var(--c148d6-edge-soft);
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.c148d6-tile:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--c148d6-flame);
  box-shadow: 0 4px 12px rgba(255, 149, 0, 0.22);
}
.c148d6-tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #0d0b07;
}
.c148d6-tile b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 30px;
  padding: 4px 5px 5px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c148d6-ink);
  background: linear-gradient(180deg, rgba(205, 133, 63, 0.14), rgba(34, 29, 21, 0.9));
  text-align: center;
}

/* ---------- promo cards (campaigns) ---------- */
.c148d6-camps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.c148d6-camp {
  border: 1px solid var(--c148d6-edge-soft);
  border-left: 4px solid var(--c148d6-flame);
  border-radius: var(--c148d6-radius-s);
  background: var(--c148d6-panel);
  padding: 11px 12px;
}
.c148d6-camp h3 {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--c148d6-sun);
}
.c148d6-camp p {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--c148d6-ink-dim);
}
.c148d6-textlink {
  font-weight: 700;
  font-size: 13px;
  color: var(--c148d6-sun);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 241, 118, 0.6);
}
.c148d6-textlink:hover { color: var(--c148d6-flame); border-bottom-color: var(--c148d6-flame); }

/* ---------- app install block ---------- */
.c148d6-appbox {
  border: 1px solid var(--c148d6-edge);
  border-radius: var(--c148d6-radius-m);
  background:
    linear-gradient(150deg, rgba(255, 149, 0, 0.12), rgba(23, 20, 16, 0.4)),
    var(--c148d6-panel);
  padding: 14px 12px;
}
.c148d6-appbox p { margin: 0 0 10px; font-size: 13.5px; color: var(--c148d6-ink-dim); }
.c148d6-approw {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.c148d6-approw .c148d6-btn { flex: 1 1 140px; }

/* ---------- access summary list ---------- */
.c148d6-sumlist {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.c148d6-sumlist li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  background: var(--c148d6-panel);
  border: 1px solid var(--c148d6-edge-soft);
  border-radius: var(--c148d6-radius-s);
  padding: 9px 11px;
  font-size: 13.5px;
  color: var(--c148d6-ink-dim);
}
.c148d6-sumlist svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--c148d6-mint);
}

/* ---------- how to play steps ---------- */
.c148d6-steps {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  counter-reset: c148d6step;
}
.c148d6-steps li {
  counter-increment: c148d6step;
  position: relative;
  padding: 0 0 12px 34px;
  font-size: 13.5px;
  color: var(--c148d6-ink-dim);
}
.c148d6-steps li::before {
  content: counter(c148d6step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #1d1405;
  background: var(--c148d6-gold);
}
.c148d6-steps li::after {
  content: "";
  position: absolute;
  left: 11.5px;
  top: 27px;
  bottom: 2px;
  width: 1.5px;
  background: var(--c148d6-edge);
}
.c148d6-steps li:last-child::after { display: none; }
.c148d6-steps b { color: var(--c148d6-ink); }

/* ---------- scenario answer ---------- */
.c148d6-scenario {
  border: 1px dashed rgba(255, 241, 118, 0.45);
  border-radius: var(--c148d6-radius-m);
  background: rgba(255, 241, 118, 0.05);
  padding: 13px 12px;
}
.c148d6-scenario .c148d6-q {
  margin: 0 0 6px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--c148d6-sun);
}
.c148d6-scenario p {
  margin: 0 0 8px;
  font-size: 13.5px;
  color: var(--c148d6-ink-dim);
}
.c148d6-scenario p:last-child { margin-bottom: 0; }

/* ---------- fact sheet ---------- */
.c148d6-facts {
  margin: 0 0 6px;
  border: 1px solid var(--c148d6-edge-soft);
  border-radius: var(--c148d6-radius-s);
  overflow: hidden;
}
.c148d6-facts div {
  display: flex;
  gap: 10px;
  padding: 9px 11px;
  font-size: 13px;
  border-bottom: 1px solid rgba(205, 133, 63, 0.12);
  background: var(--c148d6-panel);
}
.c148d6-facts div:last-child { border-bottom: none; }
.c148d6-facts dt {
  flex: 0 0 108px;
  margin: 0;
  font-weight: 700;
  color: var(--c148d6-sun);
}
.c148d6-facts dd { margin: 0; flex: 1 1 auto; color: var(--c148d6-ink-dim); }

/* ---------- extended footer ---------- */
.c148d6-extfoot {
  margin-top: 30px;
  border-top: 1px solid var(--c148d6-edge);
  padding-top: 16px;
}

.c148d6-footbrand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}
.c148d6-footbrand img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--c148d6-edge);
}
.c148d6-footbrand strong { font-size: 15px; color: var(--c148d6-ink); }

.c148d6-footbrand p {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--c148d6-ink-dim);
}

.c148d6-footlabel {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c148d6-flame);
  margin: 14px 0 8px;
}

.c148d6-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}
.c148d6-shortcuts button {
  width: 100%;
  min-height: var(--c148d6-tap);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #1d1405;
  background: linear-gradient(180deg, var(--c148d6-flame), #dd7d06);
  border: none;
  border-radius: var(--c148d6-radius-s);
  cursor: pointer;
  padding: 9px 8px;
  transition: filter 0.15s ease;
}
.c148d6-shortcuts button:hover { filter: brightness(1.08); }

.c148d6-directory {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.c148d6-directory a {
  display: block;
  min-height: 42px;
  padding: 9px 10px;
  border-radius: var(--c148d6-radius-s);
  border: 1px solid var(--c148d6-edge-soft);
  background: rgba(34, 29, 21, 0.7);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c148d6-ink-dim);
  line-height: 1.3;
}
.c148d6-directory a:hover {
  text-decoration: none;
  color: var(--c148d6-sun);
  border-color: var(--c148d6-gold);
}

.c148d6-disclaimer {
  margin: 14px 0 0;
  padding: 10px 11px;
  border-radius: var(--c148d6-radius-s);
  background: rgba(152, 251, 152, 0.06);
  border: 1px solid rgba(152, 251, 152, 0.22);
  font-size: 12px;
  color: var(--c148d6-ink-dim);
}
.c148d6-disclaimer b { color: var(--c148d6-mint); }

/* ---------- common footer ---------- */
.c148d6-foot {
  margin-top: 18px;
  padding: 12px 4px 4px;
  border-top: 1px solid var(--c148d6-edge-soft);
  text-align: center;
  font-size: 12px;
  color: var(--c148d6-ink-faint);
}

/* ---------- bottom dock nav ---------- */
.c148d6-dock {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 430px);
  min-height: var(--c148d6-dock-h);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 5px 6px calc(5px + env(safe-area-inset-bottom, 0px));
  background: rgba(14, 11, 7, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1.5px solid var(--c148d6-gold);
  border-left: 1px solid rgba(205, 133, 63, 0.2);
  border-right: 1px solid rgba(205, 133, 63, 0.2);
  z-index: 42;
}

.c148d6-dock a,
.c148d6-dock button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 50px;
  padding: 4px 2px;
  border: none;
  background: none;
  border-radius: var(--c148d6-radius-s);
  color: var(--c148d6-ink-faint);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.c148d6-dock svg { width: 21px; height: 21px; }
.c148d6-dock a:hover,
.c148d6-dock button:hover { background: rgba(205, 133, 63, 0.14); color: var(--c148d6-ink); text-decoration: none; }

.c148d6-dock .c148d6-live { color: var(--c148d6-flame); }
.c148d6-dock .c148d6-live svg { filter: drop-shadow(0 0 5px rgba(255, 149, 0, 0.6)); }

.c148d6-dock .c148d6-on { color: var(--c148d6-mint); background: rgba(152, 251, 152, 0.10); }
.c148d6-dock .c148d6-on svg { color: var(--c148d6-mint); }

/* ---------- responsive tweaks ---------- */
@media (min-width: 375px) {
  .c148d6-h1 { font-size: 23px; }
  .c148d6-h2 { font-size: 18.5px; }
  .c148d6-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 400px) {
  .c148d6-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
  .c148d6-tile b { font-size: 10px; }
}

@media (min-width: 480px) {
  body { background: #0a0805; }
  .c148d6-shell { box-shadow: 0 0 0 1px rgba(205, 133, 63, 0.18), 0 0 44px rgba(0, 0, 0, 0.6); }
}

@media (max-width: 359px) {
  .c148d6-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .c148d6-tile b { font-size: 9.5px; min-height: 28px; }
  .c148d6-brandname { font-size: 15.5px; }
  .c148d6-btn { padding: 8px 9px; font-size: 12px; }
  .c148d6-directory { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .c148d6-track { transition: none; }
  .c148d6-drawer { transition: none; }
  .c148d6-tile, .c148d6-btn, .c148d6-dock a, .c148d6-dock button { transition: none; }
}

/* ---------- help: review decision board ---------- */
.c148d6-verdict {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--c148d6-radius-m);
  background: linear-gradient(135deg, rgba(255, 149, 0, 0.16), rgba(152, 251, 152, 0.08));
  border: 1px solid var(--c148d6-edge);
  font-size: 13.5px;
  color: var(--c148d6-ink);
}
.c148d6-verdict strong { color: var(--c148d6-sun); }

.c148d6-board {
  margin-top: 18px;
  padding: 12px;
  border-radius: var(--c148d6-radius-m);
  background: var(--c148d6-panel);
  border: 1px solid var(--c148d6-edge-soft);
}
.c148d6-kicker {
  display: block;
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c148d6-flame);
}
.c148d6-board .c148d6-h2 { margin-bottom: 8px; }
.c148d6-board p,
.c148d6-sheet p {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--c148d6-ink-dim);
}
.c148d6-board p:last-child { margin-bottom: 0; }

.c148d6-branch,
.c148d6-checks,
.c148d6-map,
.c148d6-fit {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.c148d6-branch li,
.c148d6-checks li,
.c148d6-map li {
  background: var(--c148d6-panel-2);
  border-radius: var(--c148d6-radius-s);
  padding: 9px 10px;
  font-size: 13.5px;
  color: var(--c148d6-ink-dim);
}
.c148d6-if,
.c148d6-then {
  display: inline-block;
  margin-right: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.c148d6-if { color: var(--c148d6-sun); }
.c148d6-then { color: var(--c148d6-mint); }
.c148d6-checks li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.c148d6-checks li::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-top: 3px;
  flex: 0 0 auto;
  border-radius: 4px;
  border: 2px solid var(--c148d6-mint);
}
.c148d6-fit article {
  border-left: 3px solid var(--c148d6-gold);
  padding: 8px 10px;
  background: rgba(255, 149, 0, 0.07);
  border-radius: 0 var(--c148d6-radius-s) var(--c148d6-radius-s) 0;
}
.c148d6-fit h3 {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--c148d6-sun);
}
.c148d6-fit p { margin: 0; }
.c148d6-map li {
  background: linear-gradient(90deg, rgba(152, 251, 152, 0.12), rgba(34, 29, 21, 0.4) 72%);
}

/* ---------- help: tips worksheet (different skeleton) ---------- */
.c148d6-alert {
  margin: 0 0 12px;
  padding: 10px 12px 10px 14px;
  border-left: 4px solid var(--c148d6-mint);
  background: rgba(152, 251, 152, 0.08);
  border-radius: 0 var(--c148d6-radius-s) var(--c148d6-radius-s) 0;
  font-size: 13.5px;
  color: var(--c148d6-ink);
}
.c148d6-sheet { margin-top: 20px; }
.c148d6-sheet .c148d6-h2 { margin-bottom: 8px; }
.c148d6-fields {
  margin: 0 0 10px;
  border: 1px solid var(--c148d6-edge);
  border-radius: var(--c148d6-radius-s);
  overflow: hidden;
}
.c148d6-fields div {
  padding: 8px 10px;
  background: var(--c148d6-panel);
  border-bottom: 1px solid rgba(205, 133, 63, 0.14);
}
.c148d6-fields div:last-child { border-bottom: none; }
.c148d6-fields dt {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 800;
  color: var(--c148d6-sun);
}
.c148d6-fields dd {
  margin: 0;
  font-size: 13px;
  color: var(--c148d6-ink-dim);
}
.c148d6-letters {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.c148d6-letters li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px;
  border-radius: var(--c148d6-radius-s);
  background: var(--c148d6-panel-2);
  border: 1px solid var(--c148d6-edge-soft);
  font-size: 13.5px;
  color: var(--c148d6-ink-dim);
}
.c148d6-letters b {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--c148d6-gold);
  color: #1d1405;
  font-size: 14px;
}
.c148d6-trouble {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
}
.c148d6-trouble details {
  background: var(--c148d6-panel);
  border: 1px solid var(--c148d6-edge-soft);
  border-radius: var(--c148d6-radius-s);
  padding: 8px 10px;
}
.c148d6-trouble summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 800;
  color: var(--c148d6-sun);
  cursor: pointer;
}
.c148d6-trouble details p { margin: 8px 0 0; }
.c148d6-keep {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: var(--c148d6-radius-m);
  background: rgba(255, 241, 118, 0.08);
  border: 1px dashed rgba(255, 241, 118, 0.45);
}
.c148d6-keep ul {
  margin: 0;
  padding-left: 18px;
  color: var(--c148d6-ink-dim);
  font-size: 13.5px;
}
.c148d6-keep li { margin: 0 0 6px; }
.c148d6-minifacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c148d6-minifacts li {
  background: var(--c148d6-panel-2);
  border-radius: var(--c148d6-radius-s);
  padding: 8px;
  min-height: 44px;
}
.c148d6-minifacts strong {
  display: block;
  font-size: 12px;
  color: var(--c148d6-sun);
}
.c148d6-minifacts span {
  display: block;
  font-size: 12.5px;
  color: var(--c148d6-ink-dim);
  line-height: 1.4;
}
@media (max-width: 359px) {
  .c148d6-minifacts { grid-template-columns: 1fr; }
}