/* ============== CABINET (SPA) STYLES ============== */

.cabinet {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 24px 20px;
  gap: 14px;
  background: var(--bg);
}

.cabinet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 48px;
  flex: 0 0 auto;
}

/* ch-wordmark is a BUTTON that wraps the home logo. Thin outlined frame
   matches the sibling header buttons (.ch-mute, .ch-nav-btn) and the
   logo fills the frame edge-to-edge so it's actually visible. */
.ch-wordmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 1px solid var(--fg-faint);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, filter 0.15s ease, border-color 0.15s ease;
  overflow: hidden;
}
.ch-wordmark:hover, .ch-wordmark:focus-visible {
  filter: brightness(1.15);
  border-color: var(--fg);
}
.ch-wordmark:active { transform: translateY(1px); }
.ch-wordmark:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }

.ch-wordmark .ch-logo { height: 100%; width: auto; max-height: 100%; display: block; }

.ch-nav {
  display: flex;
  gap: 4px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  flex-wrap: wrap;
  justify-content: center;
}
.ch-nav-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-dim);
  padding: 6px 10px;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ch-nav-btn:hover { color: var(--fg); border-color: var(--fg-faint); }
.ch-nav-btn.is-active { color: var(--bg); background: var(--fg); border-color: var(--fg); }

.ch-status { display: flex; align-items: center; gap: 14px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--fg-dim); text-transform: uppercase; }
.ch-mute { background: transparent; border: 1px solid var(--fg-faint); color: var(--fg-dim); font: inherit; letter-spacing: inherit; padding: 5px 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; text-transform: inherit; }
.ch-mute:hover { color: var(--fg); border-color: var(--fg); }
.ch-mute.muted { opacity: 0.5; }
.ch-online { display: flex; align-items: center; gap: 6px; }
.ch-online .dot { width: 8px; height: 8px; background: var(--fg); box-shadow: 0 0 8px var(--phos-glow); animation: pulse 1.6s ease-in-out infinite; }

.cabinet-console {
  flex: 1 1 0;
  min-height: 0;
  max-width: none;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.cabinet-console .screen {
  flex: 1 1 0;
  min-height: 0;
}

.console-chrome .sep { opacity: 0.35; margin: 0 4px; }

/* ============ SCREEN CONTENT ============ */
.home-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 50px 20px 56px;
  z-index: 11;
}

.home-header { text-align: center; }
.home-header .hh-line {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--fg-dim);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.home-header .hero-title {
  font-family: var(--f-display);
  font-size: clamp(22px, 3.6vw, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 4px 0;
  position: relative;
  white-space: nowrap;
}
.home-header .hero-sub {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--fg-dim);
  text-transform: uppercase;
  margin-top: 6px;
}

.home-footer {
  /* 3-column grid with equal flex sides keeps the center (dots) anchored
     to the true midpoint of the stage. A plain `space-between` flex layout
     drifted the dots whenever the current-venture label on the left
     changed length (e.g. CONTENT SURGEON vs PURO AI LABS). */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  font-family: var(--f-pixel);
  font-size: 18px;
  color: var(--fg);
  letter-spacing: 0.1em;
}
.home-footer .hf-cur { justify-self: start; }
.home-footer .hf-dots { justify-self: center; }
.home-footer .hf-hint { justify-self: end; }
.hf-hint { color: var(--fg-dim); font-size: 16px; }
.key-inline {
  display: inline-block;
  padding: 2px 7px;
  margin: 0 4px;
  border: 1px solid var(--fg);
  font-family: var(--f-mono);
  font-size: 11px;
  background: var(--bg);
}

/* ============ SLIDE STACK ============ */
.slide-stack {
  position: absolute;
  inset: 44px 60px 44px 60px;
  z-index: 10;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s;
  will-change: transform, opacity;
}

.slide-inner {
  width: 100%;
  max-width: 1100px;
  max-height: 100%;
  overflow-y: auto;
  padding: 20px 28px;
  font-family: var(--f-display);
  color: var(--fg);
}
.slide-inner::-webkit-scrollbar { width: 4px; }
.slide-inner::-webkit-scrollbar-track { background: transparent; }
.slide-inner::-webkit-scrollbar-thumb { background: var(--fg-faint); }

/* ============ SECTION FRAME ============ */
.sec-frame { display: flex; flex-direction: column; gap: 16px; }
.sec-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--fg-dim);
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--fg-faint);
}
.sec-title {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.sec-kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.24em;
  font-weight: 500;
}
.sec-body { font-size: 16px; line-height: 1.6; }

.big-hero {
  font-family: var(--f-display);
  font-size: clamp(40px, 5.5vw, 84px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.92;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.big-hero em { font-style: normal; opacity: 0.55; }

.venture-intro .lede {
  font-family: var(--f-display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--fg);
}
.venture-intro .body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-dim);
  max-width: 720px;
  margin-bottom: 10px;
}

.meta-row {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding-top: 18px;
  border-top: 1px dashed var(--fg-faint);
}
.meta-row .m { display: flex; flex-direction: column; gap: 2px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }
.meta-row .m .k { color: var(--fg-dim); }
.meta-row .m strong { color: var(--fg); font-weight: 700; }

.body-lg {
  font-family: var(--f-display);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  color: var(--fg);
  max-width: 820px;
}
.body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-dim);
  max-width: 780px;
  margin-top: 10px;
}

/* Inline stat grid for slides */
.stat-grid-inline {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.sc { border: 1px solid var(--fg-faint); padding: 14px 16px; }
.sc .v { font-family: var(--f-pixel); font-size: 36px; line-height: 1; color: var(--fg); }
.sc .k { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-dim); margin-top: 6px; }
.sc .s { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--fg-dim); margin-top: 3px; }

/* Service grid */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.svc { border: 1px solid var(--fg-faint); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; transition: border-color 0.15s, background 0.15s; }
.svc:hover { border-color: var(--fg); background: rgba(244,241,234,0.03); }
.svc .n { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--fg-dim); text-transform: uppercase; }
.svc h3 { font-family: var(--f-display); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; }
.svc p { font-size: 13px; color: var(--fg-dim); line-height: 1.5; }
.svc .go { margin-top: auto; padding-top: 8px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--fg); opacity: 0.7; text-transform: uppercase; }

/* Method list */
.method-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
/* Two columns × two rows. The numeral spans both rows; title and body stack
   on the right. Without explicit row placement, the third child (body text)
   wrapped back into the 40px first column — one word per line. */
.ml {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--fg-faint);
  align-items: start;
}
.ml .n {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--f-pixel);
  font-size: 20px;
  color: var(--fg-dim);
  align-self: start;
}
.ml strong {
  grid-column: 2;
  grid-row: 1;
  display: block;
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin-bottom: 2px;
  color: var(--fg);
}
.ml strong + span {
  grid-column: 2;
  grid-row: 2;
  font-size: 13px;
  color: var(--fg-dim);
  line-height: 1.55;
}

/* Skill grid */
.skill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 14px; }
.sk { border: 1px solid var(--fg-faint); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.sk span { font-family: var(--f-pixel); font-size: 24px; color: var(--fg); }
.sk strong { font-family: var(--f-display); font-size: 15px; font-weight: 700; letter-spacing: -0.005em; text-transform: uppercase; }
.sk small { font-family: var(--f-mono); font-size: 10px; color: var(--fg-dim); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 3px; }

/* Live slide */
.live-slide { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 0; }
.live-url-big { font-family: var(--f-display); font-size: clamp(30px, 4vw, 54px); font-weight: 700; letter-spacing: -0.02em; text-transform: uppercase; }
.live-desc { font-size: 14px; color: var(--fg-dim); max-width: 600px; line-height: 1.6; }
.live-cta {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 30px; padding: 18px 22px;
  background: var(--fg); color: var(--bg); text-decoration: none;
  font-family: var(--f-display); font-weight: 800; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: transform 0.15s;
  min-width: 340px;
}
.live-cta:hover { transform: translate(2px, 2px); }
.live-cta .lc-lbl { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.live-cta .lc-k { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.24em; opacity: 0.65; }
.live-cta .lc-arr { font-size: 20px; }

/* Live chip (inline) */
.live-chip { display: inline-flex; align-items: center; gap: 14px; padding: 10px 16px; border: 1px solid var(--fg-faint); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-dim); }
.live-chip .led { width: 8px; height: 8px; border-radius: 50%; background: var(--fg); animation: pulse 1.4s ease-in-out infinite; }
.live-chip.soon .led { animation: none; opacity: 0.4; }
.live-chip .live-url { color: var(--fg); font-family: var(--f-display); font-weight: 700; }

/* Ventures-live list (Comms) */
.ventures-live { display: grid; gap: 10px; margin-top: 14px; }
.venture-live { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--fg-faint); text-decoration: none; color: inherit; transition: border-color 0.15s, background 0.15s; }
.venture-live:hover:not(.soon) { border-color: var(--fg); background: rgba(244,241,234,0.05); }
.venture-live.soon { opacity: 0.5; }
.venture-live .lv-num { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--fg-dim); }
.venture-live .lv-body strong { display: block; font-family: var(--f-display); font-size: 16px; font-weight: 700; letter-spacing: -0.005em; }
.venture-live .lv-body span { font-family: var(--f-display); font-size: 12px; color: var(--fg-dim); }
.venture-live .lv-go { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--fg); padding: 8px 14px; border: 1px solid var(--fg); text-transform: uppercase; }
.venture-live .lv-go.soon { opacity: 0.4; border-style: dashed; }

/* ============ QUICK-JUMP OVERLAY ============ */
.qjump-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 8, 0.92);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  animation: qjFade 0.2s ease-out;
}
@keyframes qjFade { from { opacity: 0; } to { opacity: 1; } }

.qjump {
  width: 92%;
  max-width: 1100px;
  max-height: 92%;
  overflow-y: auto;
  background: var(--bg-2);
  border: 2px solid var(--fg);
  padding: 24px 28px;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--fg);
}
.qj-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1px dashed var(--fg-faint); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.24em; color: var(--fg-dim); text-transform: uppercase; margin-bottom: 20px; }
.qj-eyebrow { color: var(--fg); font-weight: 700; letter-spacing: 0.28em; }
.qj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.qj-col { border: 1px solid var(--fg-faint); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.qj-col.is-current { border-color: var(--fg); background: rgba(244,241,234,0.04); }
.qj-route { background: transparent; border: none; padding: 0; text-align: left; cursor: pointer; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; color: var(--fg); display: flex; flex-direction: column; gap: 4px; }
.qj-r-num { font-family: var(--f-mono); font-size: 10px; color: var(--fg-dim); letter-spacing: 0.22em; }
.qj-r-label { font-size: 15px; letter-spacing: -0.005em; }
.qj-secs { display: flex; flex-direction: column; gap: 2px; padding-left: 2px; border-left: 1px dashed var(--fg-faint); }
.qj-sec { background: transparent; border: none; padding: 6px 10px; cursor: pointer; font-family: var(--f-mono); font-size: 11px; color: var(--fg-dim); letter-spacing: 0.14em; text-transform: uppercase; display: flex; gap: 10px; align-items: center; text-align: left; transition: color 0.15s, background 0.15s; }
.qj-sec:hover { color: var(--fg); background: rgba(244,241,234,0.06); }
.qj-sec.is-current { color: var(--fg); background: rgba(244,241,234,0.1); }
.qj-n { color: var(--fg-dim); font-size: 10px; min-width: 20px; }

/* ============ TRANSITIONS ============ */
.cabinet.dir-left .slide.is-active { animation: slideFromLeft 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.cabinet.dir-right .slide.is-active { animation: slideFromRight 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.cabinet.dir-zoom .screen { animation: crtZoom 0.5s ease-out; }
.cabinet.dir-up .screen, .cabinet.dir-down .screen { animation: crtFlicker 0.4s steps(3); }

@keyframes slideFromRight { from { transform: translateX(30%) scale(0.95); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } }
@keyframes slideFromLeft { from { transform: translateX(-30%) scale(0.95); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } }
@keyframes crtZoom { 0% { filter: brightness(2) contrast(1.5); transform: scale(0.97); } 40% { filter: brightness(0.6); } 100% { filter: none; transform: scale(1); } }
@keyframes crtFlicker { 0%, 100% { filter: none; } 50% { filter: brightness(0.4) contrast(1.4); } }

/* ============ KEY HINTS ON BUTTONS ============ */
.abxy-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.abxy-label { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.01em; }
.abxy-key {
  position: absolute;
  top: -8px; right: -8px;
  font-family: var(--f-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--fg);
  padding: 1px 4px;
  line-height: 1;
  min-width: 14px;
  text-align: center;
  border-radius: 0;
  pointer-events: none;
}
.abxy-btn.press .abxy-key { background: var(--fg); color: var(--bg); }

.dpad-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dpad-key {
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--fg-dim);
  letter-spacing: 0.05em;
  pointer-events: none;
}
.dpad-btn.active .dpad-key { color: var(--bg); }
.dpad-btn.active { background: var(--fg) !important; }
.dpad-center {
  background: var(--bg-3);
  border: 1px solid var(--fg-faint);
}

/* Hide key hints on small touch devices (screen real estate) */
@media (max-width: 640px) {
  .abxy-key { font-size: 7px; padding: 1px 3px; top: -6px; right: -6px; }
  .dpad-key { font-size: 8px; }
}

/* ============ CABINET: ensure chassis always fits viewport ============ */
.ch-nav { flex-wrap: nowrap; overflow: hidden; }
.ch-nav-btn { white-space: nowrap; }
.screen-hud > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }

/* Hamburger hidden on desktop */
.ch-hamburger { display: none; background: transparent; border: 1px solid var(--fg-faint); width: 38px; height: 38px; cursor: pointer; flex-direction: column; gap: 4px; align-items: center; justify-content: center; padding: 0; }
.ch-hamburger span { display: block; width: 18px; height: 2px; background: var(--fg); }
.ch-nav-header { display: none; }
.ch-nav-scrim { display: none; }

/* Short-viewport adaptations — keep ABXY and D-pad visible */
@media (max-height: 780px) {
  .cabinet { padding: 8px 14px 10px; gap: 8px; }
  .cabinet-header { height: 36px; }
  .ch-wordmark .ch-logo { height: 22px; }
  .ch-nav-btn { padding: 4px 7px; font-size: 9px; letter-spacing: 0.1em; }
  .ch-status { gap: 10px; font-size: 9px; }
  .cabinet-console.console { padding: 10px; }
  .console-chrome { font-size: 8px; padding-bottom: 6px; margin-bottom: 6px; }
  .console-controls { margin-top: 6px; padding-top: 6px; gap: 10px; }
  .abxy { transform: scale(0.85); transform-origin: right center; }
  .dpad { grid-template-columns: repeat(3, 18px); grid-template-rows: repeat(3, 18px); }
  .console-legend { font-size: 9px; gap: 10px; }
}
@media (max-height: 620px) {
  .cabinet { padding: 6px 10px 8px; gap: 6px; }
  .cabinet-header { height: 30px; }
  .ch-wordmark .ch-logo { height: 18px; }
  .ch-nav-btn { padding: 3px 5px; font-size: 8px; letter-spacing: 0.08em; }
  .console-legend { display: none; }
  .abxy { transform: scale(0.75); transform-origin: right center; }
  .dpad { grid-template-columns: repeat(3, 14px); grid-template-rows: repeat(3, 14px); }
  .screen-hud { font-size: 14px; top: 8px; left: 10px; right: 10px; }
  .screen-footer { font-size: 12px; bottom: 8px; left: 10px; right: 10px; }
}
@media (max-width: 1100px) {
  .ch-nav-btn { padding: 4px 6px; font-size: 9px; letter-spacing: 0.08em; }
  .ch-status .ch-online { display: none; }
}

/* ============ MOBILE / TABLET (<900px) ============ */
@media (max-width: 900px) {
  .cabinet { padding: 10px 12px 12px; gap: 10px; }
  .cabinet-header { height: 44px; gap: 12px; }
  /* Logo fills the nav bar edge-to-edge — more visibility, more clickable */
  .ch-wordmark { height: 100%; padding: 0; }
  .ch-wordmark .ch-logo { height: 100%; width: auto; max-height: 100%; }
  .ch-hamburger { display: flex; }

  /* ===== PAUSE MENU (replaces right-sidebar drawer on touch) =====
     Nav opens as a centered, arcade-cabinet-style pause screen.
     Semi-transparent scanline backdrop, scale-in entrance, sharp
     bordered card, big tappable route buttons. Feels like pressing
     pause inside a game, not opening a phone's menu drawer. */
  .ch-nav {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(92vw, 420px);
    max-height: min(82vh, 640px);
    flex-direction: column;
    gap: 6px;
    padding: 22px 22px 20px;
    background:
      linear-gradient(180deg, rgba(20,20,24,0.96), rgba(8,8,10,0.96));
    border: 2px solid var(--fg);
    box-shadow:
      0 0 0 1px var(--bg),
      0 0 0 3px rgba(244,241,234,0.08),
      0 0 60px var(--venture-accent-glow, rgba(244,241,234,0.25)),
      0 24px 60px rgba(0,0,0,0.75);
    transform: translate(-50%, -48%) scale(0.94);
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.18s ease;
    z-index: 160;
    overflow-y: auto;
    justify-content: flex-start;
    align-items: stretch;
    /* subtle scanline overlay for immersion */
    background-image:
      linear-gradient(180deg, rgba(20,20,24,0.96), rgba(8,8,10,0.96)),
      repeating-linear-gradient(
        to bottom,
        rgba(244,241,234,0.04) 0px,
        rgba(244,241,234,0.04) 1px,
        transparent 1px,
        transparent 3px
      );
    background-blend-mode: normal, overlay;
  }
  .ch-nav.is-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
  }
  .ch-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.32em;
    color: var(--fg-dim);
    padding: 4px 2px 12px;
    margin-bottom: 14px;
    border-bottom: 1px dashed var(--fg-faint);
    text-transform: uppercase;
  }
  .ch-nav-header > span::before {
    content: '◆ ';
    color: var(--venture-accent, var(--fg));
  }
  .ch-nav-close {
    background: transparent;
    border: 1.5px solid var(--fg-faint);
    color: var(--fg);
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    font-family: var(--f-pixel);
    transition: background 0.15s, color 0.15s;
  }
  .ch-nav-close:hover, .ch-nav-close:active {
    background: var(--fg);
    color: var(--bg);
  }
  .ch-nav-btn {
    text-align: left;
    padding: 14px 18px;
    font-size: 13px;
    letter-spacing: 0.22em;
    border: 1.5px solid var(--fg-faint);
    background: transparent;
    color: var(--fg);
    font-family: var(--f-mono);
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.12s, background 0.15s, color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .ch-nav-btn:hover, .ch-nav-btn:focus-visible {
    border-color: var(--fg);
    background: rgba(244,241,234,0.05);
    transform: translateX(2px);
    outline: none;
  }
  .ch-nav-btn.is-active {
    background: var(--venture-accent, var(--fg));
    color: var(--bg);
    border-color: var(--venture-accent, var(--fg));
  }
  .ch-nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(4,4,6,0.72);
    z-index: 150;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* Swipe brief inside the pause menu — tells first-time mobile users
     what the gestures do so the no-scroll design doesn't feel like a
     dead end. Sits below the route list. */
  .ch-nav-swipe-brief {
    margin-top: 14px;
    padding: 14px 4px 4px;
    border-top: 1px dashed var(--fg-faint);
    font-family: var(--f-mono);
    color: var(--fg-dim);
  }
  .ch-nav-swipe-brief .nsb-head {
    font-size: 10px;
    letter-spacing: 0.32em;
    color: var(--venture-accent, var(--fg));
    margin-bottom: 10px;
  }
  .ch-nav-swipe-brief .nsb-row {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: 12px;
    padding: 6px 2px;
  }
  .ch-nav-swipe-brief .nsb-glyph {
    font-family: var(--f-pixel);
    font-size: 20px;
    color: var(--fg);
    text-align: center;
    line-height: 1;
  }
  .ch-nav-swipe-brief .nsb-row strong {
    display: block;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--fg);
    text-transform: uppercase;
    margin-bottom: 2px;
  }
  .ch-nav-swipe-brief .nsb-row small {
    display: block;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--fg-dim);
    text-transform: none;
    line-height: 1.35;
  }
  .ch-status .ch-online { display: none; }
  .ch-status { font-size: 9px; }

  /* Screen gets more room, controls stacked below */
  .cabinet-console.console { padding: 8px; }
  .console-chrome { font-size: 8px; padding-bottom: 6px; margin-bottom: 6px; gap: 6px; }
  .console-chrome .right { display: none; }
  .screen-hud { font-size: 12px; top: 8px; left: 10px; right: 10px; }
  .screen-footer { font-size: 11px; bottom: 8px; left: 10px; right: 10px; }
  /* Mobile: hide carousel arrows on subpages — they sit on top of the text
     and fight the user's reading. Swipe + D-pad + HUD menu cover the same
     navigation, and the one-time swipe hint has already been shown. */
  .carousel-btn { display: none !important; }

  /* Console controls: Game Boy layout — dpad left, ABXY right, legend hidden */
  .console-controls { margin-top: 8px; padding-top: 8px; gap: 12px; justify-content: space-between; }
  .console-legend { display: none; }
  .dpad { grid-template-columns: repeat(3, 36px); grid-template-rows: repeat(3, 36px); gap: 3px; }
  .dpad div { min-width: 36px; min-height: 36px; }
  .abxy { transform: scale(1); gap: 6px; }
  .abxy div { width: 44px; height: 44px; font-size: 13px; }

  /* Slide content reflows single-column */
  .slide-stack { inset: 40px 10px 40px 10px; }
  .slide-inner { padding: 14px 10px; }
  .big-hero { font-size: clamp(28px, 9vw, 52px); }
  .sec-title { font-size: clamp(22px, 6vw, 34px); flex-direction: column; gap: 6px; align-items: flex-start; }
  .meta-row, .stat-grid-inline, .svc-grid, .skill-grid { grid-template-columns: 1fr; }
  .venture-live { grid-template-columns: 40px 1fr; }
  .venture-live .lv-go { grid-column: 2; justify-self: end; }
  .live-cta { min-width: 0; width: 100%; }

  /* Quick-jump fullscreen on mobile */
  .qjump { width: 94%; max-width: none; padding: 16px; }
  .qj-grid { grid-template-columns: 1fr; }
}

/* ============ PORTRAIT HANDHELD (<640px) — Game Boy ============ */
@media (max-width: 640px) {
  .cabinet { padding: 8px 10px 10px; gap: 8px; }
  .cabinet-header { height: 40px; gap: 10px; }
  /* Logo fills the full nav-bar height for visibility + tap target */
  .ch-wordmark .ch-logo { height: 100%; width: auto; max-height: 100%; }
  .ch-status .ch-mute { padding: 4px 8px; font-size: 9px; }

  /* Tighter screen, bigger touch targets */
  .cabinet-console.console { padding: 6px; box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--fg), 0 10px 30px rgba(0,0,0,0.6); }
  .screen-hud { font-size: 11px; }
  .screen-footer { font-size: 10px; }
  .screen-hud > div { max-width: 50%; }

  /* Controls: stack dpad + abxy side-by-side, bigger */
  .console-controls { gap: 8px; }
  .dpad { grid-template-columns: repeat(3, 32px); grid-template-rows: repeat(3, 32px); }
  .dpad div { min-width: 32px; min-height: 32px; }
  .abxy div { width: 38px; height: 38px; font-size: 12px; }

  /* Slide content — single column, big touch */
  .slide-inner { padding: 12px 6px; }
  .big-hero { font-size: clamp(26px, 8vw, 40px); line-height: 0.95; }
  .sec-title { font-size: clamp(20px, 5.5vw, 28px); }
  .sec-eyebrow { font-size: 10px; letter-spacing: 0.22em; }
  .sec-body { font-size: 14px; }
  .body-lg { font-size: 15px; }
  .body { font-size: 13px; }
  .venture-intro .lede { font-size: 15px; }
  .svc, .ml, .sk, .sc { padding: 12px 14px; }
  .live-url-big { font-size: clamp(22px, 7vw, 36px); }
}

/* Very small phones */
@media (max-width: 380px) {
  .dpad { grid-template-columns: repeat(3, 28px); grid-template-rows: repeat(3, 28px); }
  .dpad div { min-width: 28px; min-height: 28px; }
  .abxy div { width: 34px; height: 34px; font-size: 11px; }
  /* Keep MUSIC + SFX reachable on small phones, just compress */
  .ch-status { gap: 4px; }
  .ch-mute { padding: 3px 6px; font-size: 8px; }
}

/* ============ CHASSIS BORDER HINTS ============ */
.chassis-hint {
  position: relative;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--fg-faint);
  text-align: center;
  text-transform: uppercase;
  padding: 4px 10px;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chassis-hint b { color: var(--fg-dim); font-weight: 700; letter-spacing: 0.18em; }
.chassis-hint-top { margin: 0 0 6px; border-bottom: 1px dashed var(--fg-faint); }
.chassis-hint-bottom { margin: 6px 0 0; border-top: 1px dashed var(--fg-faint); }
@media (max-width: 900px) {
  .chassis-hint { font-size: 9px; letter-spacing: 0.15em; padding: 3px 6px; }
  .chassis-hint-top { display: none; } /* keep only bottom on mobile; swipe hint covers top */
}
@media (max-width: 640px) {
  .chassis-hint-bottom { font-size: 8px; letter-spacing: 0.1em; }
}

/* ============ HELP BUTTON (header) ============ */
.ch-help {
  background: transparent;
  border: 1px solid var(--fg-faint);
  color: var(--fg-dim);
  font: inherit;
  letter-spacing: inherit;
  padding: 5px 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}
.ch-help:hover { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.ch-help span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 50%;
  font-size: 10px; font-weight: 700;
}
@media (max-width: 640px) {
  .ch-help { padding: 4px 7px; font-size: 9px; }
  .ch-help span { width: 12px; height: 12px; font-size: 9px; }
}

/* ============ HUD MENU BUTTON (inside screen) ============ */
.hud-menu-btn {
  display: none;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--fg-faint);
  color: var(--fg);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  padding: 4px 10px;
  cursor: pointer;
  text-transform: uppercase;
}
.hud-menu-btn:hover, .hud-menu-btn:active { background: var(--fg); color: var(--bg); }
@media (max-width: 900px) {
  .hud-menu-btn { display: inline-flex; align-items: center; gap: 4px; }
  .screen-hud { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .screen-hud > div { max-width: 35% !important; }
}

/* ============ MOBILE SWIPE HINT ============ */
.swipe-hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 80;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 70%);
  animation: swipeHintFade 3.2s ease-out forwards;
}
.swipe-hint .sh-icon {
  display: flex; align-items: center; gap: 20px;
  font-size: 28px; color: var(--fg);
  filter: drop-shadow(0 0 8px var(--phos-glow));
}
.swipe-hint .sh-arrow { animation: swipeArrow 1.4s ease-in-out infinite; }
.swipe-hint .sh-arrow.left { animation-delay: 0s; }
.swipe-hint .sh-arrow.right { animation-delay: 0.2s; }
.swipe-hint .sh-hand { font-size: 36px; animation: swipeHand 1.4s ease-in-out infinite; }
.swipe-hint .sh-text {
  font-family: var(--f-mono);
  font-size: 14px;
  letter-spacing: 0.3em;
  color: var(--fg);
  background: rgba(0,0,0,0.6);
  padding: 6px 14px;
  border: 1px solid var(--fg-dim);
  text-transform: uppercase;
}
@keyframes swipeHintFade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes swipeArrow {
  0%, 100% { transform: translateX(0); opacity: 0.3; }
  50% { transform: translateX(-8px); opacity: 1; }
}
.swipe-hint .sh-arrow.right { animation-name: swipeArrowR; }
@keyframes swipeArrowR {
  0%, 100% { transform: translateX(0); opacity: 0.3; }
  50% { transform: translateX(8px); opacity: 1; }
}
@keyframes swipeHand {
  0%, 100% { transform: translateX(-12px); }
  50% { transform: translateX(12px); }
}

/* ============ CAROUSEL BTN PULSE (mobile first-visit) ============ */
.carousel-btn.pulse { animation: btnPulse 1.2s ease-in-out infinite; }
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--fg-rgb, 220, 220, 220), 0.5); transform: translateY(-50%) scale(1); }
  50% { box-shadow: 0 0 0 10px rgba(var(--fg-rgb, 220, 220, 220), 0); transform: translateY(-50%) scale(1.08); }
}

/* ============ HELP / TUTORIAL OVERLAY ============ */
.help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 10, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: helpFade 0.25s ease-out;
}
@keyframes helpFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.help-card {
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--fg);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--fg-faint), 0 30px 80px rgba(0,0,0,0.7);
  color: var(--fg);
  font-family: var(--f-mono);
  padding: 26px 28px;
  position: relative;
  animation: helpSlide 0.3s cubic-bezier(.2,.8,.2,1);
}
@keyframes helpSlide {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.help-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 1px dashed var(--fg-faint);
}
.help-eyebrow {
  font-size: 10px; letter-spacing: 0.3em; color: var(--fg-dim);
  margin-bottom: 6px; text-transform: uppercase;
}
.help-title {
  font-family: var(--f-display, var(--f-mono));
  font-size: 28px; letter-spacing: 0.08em; margin: 0;
  text-transform: uppercase; font-weight: 700;
}
.help-close {
  background: transparent; border: 1px solid var(--fg-faint); color: var(--fg);
  font-size: 20px; line-height: 1; width: 32px; height: 32px;
  cursor: pointer; flex-shrink: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.help-close:hover { background: var(--fg); color: var(--bg); }

.help-section { margin-bottom: 22px; }
.help-section:last-of-type { margin-bottom: 16px; }
.help-label {
  font-size: 10px; letter-spacing: 0.3em; color: var(--fg-dim);
  margin-bottom: 10px; text-transform: uppercase;
  padding-left: 14px; position: relative;
}
.help-label::before {
  content: "▸"; position: absolute; left: 0; color: var(--fg);
}
.help-grid { display: flex; flex-direction: column; gap: 10px; }
.help-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  align-items: center;
  font-size: 13px;
  color: var(--fg);
  line-height: 1.4;
}
.help-keys { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.help-keys kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 8px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--fg);
  box-shadow: 0 2px 0 var(--fg-faint);
  font-family: var(--f-mono); font-size: 12px; font-weight: 700;
  border-radius: 2px;
}
.help-keys .help-or { font-size: 10px; color: var(--fg-dim); letter-spacing: 0.1em; }
.help-keys .help-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 10px; height: 26px;
  background: var(--fg); color: var(--bg);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  border: 1px solid var(--fg);
}

.help-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; margin-top: 18px; padding-top: 14px;
  border-top: 1px dashed var(--fg-faint);
  flex-wrap: wrap;
}
.help-ok {
  background: var(--fg); color: var(--bg); border: 1px solid var(--fg);
  font-family: var(--f-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; padding: 10px 18px; cursor: pointer;
  text-transform: uppercase;
}
.help-ok:hover { background: var(--bg); color: var(--fg); }
.help-meta { font-size: 10px; color: var(--fg-dim); letter-spacing: 0.15em; text-transform: uppercase; }

@media (max-width: 640px) {
  .help-card { padding: 20px 18px; max-height: 92vh; }
  .help-title { font-size: 22px; }
  .help-row { grid-template-columns: 100px 1fr; font-size: 12px; gap: 10px; }
  .help-keys kbd { min-width: 24px; height: 24px; font-size: 11px; padding: 0 6px; }
  .help-keys .help-chip { padding: 3px 8px; height: 22px; font-size: 10px; }
  .help-ok { width: 100%; text-align: center; }
  .help-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .help-meta { text-align: center; }
}

/* ============ SEPARATE MUSIC + SFX BUTTONS ============ */
.ch-mute-music, .ch-mute-sfx { min-width: 0; }
.ch-mute-music span, .ch-mute-sfx span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 10px;
}
@media (max-width: 900px) {
  .ch-mute { padding: 4px 7px; font-size: 9px; letter-spacing: 0.1em; gap: 4px; }
}
@media (max-width: 380px) {
  .ch-mute-music, .ch-mute-sfx { padding: 3px 5px; font-size: 8px; }
}

/* =====================================================================
   MOBILE REIMAGINED (<900px — phones AND tablets)
   Aesthetic stays — cabinet chrome, chassis hints, SFX, screen HUD —
   but tappable on-screen BUTTONS are removed. Users navigate with:
     • swipe on the screen (already wired)
     • tap a card to enter it (the carousel cards are tappable)
     • hamburger menu (top right) for jumping to routes
     • circular "?" FAB (bottom right) to open the help panel
   Tablet follows the same protocol — per user direction.
   ===================================================================== */
@media (max-width: 900px) {
  /* Cabinet frame: tighter, let screen flex-grow */
  .cabinet { padding: 6px 8px 8px; gap: 6px; }
  .cabinet-console.console {
    padding: 4px;
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--fg), 0 8px 24px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
  }

  /* Chrome row (SYS · TTTCS-ARCADE V1.04 · ROUTE ·) — AESTHETIC, keep */
  .console-chrome { font-size: 7px; padding-bottom: 4px; margin-bottom: 4px; gap: 4px; flex-wrap: wrap; }
  .console-chrome .right { display: none; }

  /* Chassis hints: aesthetic flavor text, keep bottom as thin strip */
  .chassis-hint-top { display: none; }
  .chassis-hint-bottom { font-size: 7px; letter-spacing: 0.08em; padding: 2px 4px; }

  /* HIDE ALL tappable on-screen buttons (the point: mobile is scroll+tap+swipe,
     not a touch game-pad). */
  .console-controls { display: none; }   /* D-pad + ABXY cluster */
  .hud-menu-btn { display: none !important; }  /* in-screen MENU button */

  /* Let the screen take all the remaining space */
  .screen { flex: 1; min-height: 0; }

  /* Screen HUD: visual flavor, non-interactive */
  .screen-hud {
    top: 4px; left: 6px; right: 6px;
    font-size: 10px; letter-spacing: 0.12em;
    gap: 6px;
    pointer-events: none;
  }
  .screen-hud > div { max-width: 48%; }
  .screen-footer {
    font-size: 9px; letter-spacing: 0.12em;
    bottom: 4px; left: 6px; right: 6px;
    pointer-events: none;
  }

  /* ===== HOME carousel on mobile: single full-width card, no peek =====
     The cards still exist in DOM for swipe-to-cycle, but we clip the stage
     so only the active card is visible. Dots below indicate position. */
  .home-stage { padding: 34px 0 16px; }  /* clear screen-hud at top */
  .home-header { padding: 0 10px; }
  .home-header .hh-line { font-size: 9px; letter-spacing: 0.14em; text-align: center; }
  .home-header .hero-title {
    font-size: clamp(30px, 9vw, 42px);
    line-height: 0.92;
    white-space: normal;          /* override desktop's nowrap */
    word-break: break-word;
    overflow-wrap: anywhere;
    text-align: center;
    padding: 0 6px;
  }
  .home-header .hero-title .glitch-layer {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  /* Hero-sub is a pretty-but-redundant restatement of the hh-line on
     mobile. Hide it so the card gets more vertical breathing room. */
  .home-header .hero-sub { display: none; }
  /* Dial the hero-title back so it wraps to 2 lines, not 3. */
  .home-header .hero-title { font-size: clamp(22px, 7vw, 34px); }
  .carousel-stage {
    /* Previously 208px top inset — tight when the hero-title wrapped
       to 3 lines and ended up overlapping the card. */
    inset: 170px 0 58px;
    overflow: hidden;
  }
  .carousel { width: min(88vw, 320px); }
  .card {
    width: min(88vw, 320px);
    /* dvh so the card resizes as the mobile browser's URL bar shows/
       hides; the 62vh fallback keeps older browsers sane. */
    max-height: 62vh;
    max-height: 62dvh;
    height: 100%;
  }
  .card-inner { padding: 10px 14px 8px; }
  .card-tag { font-size: 9px; letter-spacing: 0.18em; }
  .card-title { font-size: clamp(18px, 5vw, 22px); margin: 2px 0 3px; line-height: 0.95; }
  .card-role { font-size: 9px; letter-spacing: 0.14em; margin-bottom: 6px; }
  /* Emblem fills whatever vertical space the card has left after the
     text rows — no max-height cap so the card never has a dead gap
     above the bottom tag. The SVG inside is width:70%, so even when
     the container grows it stays visually balanced. min-height keeps
     it readable on very short viewports. */
  .card-emblem {
    flex: 1 1 auto;
    min-height: 70px;
    margin: 4px 0;
  }
  .card-stats { font-size: 13px; gap: 3px 10px; margin-bottom: 4px; }
  .card-stats .stat .k { font-size: 10px; letter-spacing: 0.1em; }
  .card-bar { height: 4px; margin: 4px 0 6px; }
  /* Suppress adjacent-card peek so only active card is visible */
  .card:not(.active) { opacity: 0 !important; pointer-events: none !important; }
  .home-footer { padding: 0 10px; font-size: 9px; letter-spacing: 0.14em; }
  /* Hide the SWIPE/TAP hint-line on narrow phones — it wraps into 3
     lines and fights the dots. The bottom chassis-hint already tells
     users the same thing. */
  .home-footer .hf-hint { display: none; }

  /* ===== Venture subpages (SlideStack) on mobile =====
     Give text real breathing room and stop any accidental overlap.
     Top inset now clears both the screen-hud AND the swipe-cue chip
     row (which ends ~54px in from the top of .screen), so slide
     content and the chips live in separate bands. */
  .slide-stack { inset: 64px 4px 8px 4px; }
  .slide { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .slide-inner { padding: 16px 14px 28px; }
  .big-hero { font-size: clamp(28px, 9vw, 44px); line-height: 0.98; }
  .sec-title { font-size: clamp(22px, 6vw, 30px); line-height: 1.05; gap: 4px; }
  .sec-eyebrow { font-size: 10px; letter-spacing: 0.18em; margin-bottom: 6px; }
  .sec-body, .body { font-size: 14px; line-height: 1.55; }
  .body-lg, .venture-intro .lede { font-size: 16px; line-height: 1.45; }

  /* Any decorative absolute element inside the screen shouldn't sit over text */
  .slide .carousel-btn,
  .slide-stack .carousel-btn,
  .screen > .carousel-btn { display: none !important; }

  /* Swipe hint: make sure it doesn't overlap the HUD title */
  .swipe-hint { top: 28px; }
}

/* Very small phones: compress everything a notch further */
@media (max-width: 380px) {
  .cabinet { padding: 4px 6px 6px; }
  .screen-hud { font-size: 9px; }
  .home-header .hero-title { font-size: 34px; }
  .card-title { font-size: 18px; }
  .card-stats { font-size: 13px; }
  .slide-inner { padding: 14px 10px 24px; }
}

/* =====================================================================
   VENTURE LOGO CHIP (on each venture intro slide)
   Display each venture's actual brand logo in a small pill above the big
   hero text. Logos keep their native colors; the chip gives black-on-white
   logos a white bed so they stay readable on the dark arcade screen.
   ===================================================================== */
/* Venture-logo chip — big, prominent, per-venture accent glow.
   The blue Lazzzy file has lots of empty blue margin; we punch in with
   object-fit:cover so the lockup reads much larger without a re-crop. */
.venture-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 26px;
  margin: 0 0 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    3px 3px 0 0 var(--venture-accent, var(--fg-faint)),
    0 0 36px var(--venture-accent-glow, rgba(255,255,255,0.14));
}
.venture-logo img {
  display: block;
  height: 130px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.venture-logo--light { background: #ffffff; }

/* Blue variant (Lazzzy) — crop in on the lockup. The source file is a
   3:4 portrait with huge empty blue margin; we fix the chip to a
   landscape box and object-fit:cover to eat the padding. The chip
   background is the EXACT blue of the source PNG so no two-tone seam
   is visible where image meets chip, and we kill the offset shadow
   (which was reading as a second blue rectangle). */
.venture-logo--blue {
  background: #003CF2;
  padding: 0;
  width: 240px;
  height: 230px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.15),
    0 0 40px rgba(10,60,255,0.40);
}
.venture-logo--blue img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;  /* equal breathing top + bottom */
}

@media (max-width: 900px) {
  .venture-logo { padding: 14px 22px; margin-bottom: 16px; }
  .venture-logo img { height: 100px; }
  .venture-logo--blue { padding: 0; width: 200px; height: 190px; }
  .venture-logo--blue img { height: 100%; }
}
@media (max-width: 640px) {
  .venture-logo { padding: 12px 18px; margin-bottom: 14px; }
  .venture-logo img { height: 78px; }
  .venture-logo--blue { padding: 0; width: 170px; height: 165px; }
  .venture-logo--blue img { height: 100%; }
}

/* When a venture-logo is present, dial the big-hero title down a bit —
   the logo now carries the brand, the type is supporting. */
.venture-intro .venture-logo + .big-hero,
.venture-intro .venture-logo ~ .big-hero {
  font-size: clamp(32px, 5vw, 60px);
  line-height: 0.98;
  margin-top: 4px;
}
@media (max-width: 900px) {
  .venture-intro .venture-logo + .big-hero,
  .venture-intro .venture-logo ~ .big-hero {
    font-size: clamp(24px, 6.5vw, 38px);
  }
}
@media (max-width: 640px) {
  .venture-intro .venture-logo + .big-hero,
  .venture-intro .venture-logo ~ .big-hero {
    font-size: clamp(22px, 7vw, 32px);
  }
}

/* =====================================================================
   SWIPE CUES — subtle per-page hints in the top corners of a venture
   page that name the previous and next sections. They teach the
   gesture by showing *where* it leads. Tappable as a fallback.
   ===================================================================== */
.swipe-cue {
  position: absolute;
  top: 36px;
  z-index: 15;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  max-width: 42%;
  /* Near-opaque so any page text sitting behind the chip doesn't bleed
     through. Previously rgba(4,4,6,0.45) + a 0.72 outer opacity meant
     the chip was ~55% transparent — the headline underneath was
     visibly peeking out. */
  background: rgba(6,6,8,0.92);
  border: 1px solid var(--fg-faint);
  color: var(--fg-dim);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  /* Let long labels truncate with an ellipsis rather than pushing past
     the screen edge */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: auto;
  animation: scFade 0.35s ease both;
}
.swipe-cue:hover, .swipe-cue:focus-visible {
  color: var(--fg);
  border-color: var(--fg);
  background: rgba(6,6,8,0.98);
  outline: none;
}
.swipe-cue-left  { left: 12px; }
.swipe-cue-right { right: 12px; }
.swipe-cue .sc-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.swipe-cue .sc-arrow {
  color: var(--venture-accent, var(--fg));
  font-size: 11px;
  /* Gentle horizontal breathing so the arrow reads as "motion" without
     jumping around. Paused when prefers-reduced-motion is set. */
  animation: scArrowDrift 2.4s ease-in-out infinite;
}
.swipe-cue-left  .sc-arrow { animation-name: scArrowDriftLeft; }
@keyframes scArrowDrift      { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3px);  } }
@keyframes scArrowDriftLeft  { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
@keyframes scFade            { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .swipe-cue .sc-arrow { animation: none; }
}

/* Mobile: slightly smaller, tighter. Sit just under the screen-hud. */
@media (max-width: 640px) {
  .swipe-cue {
    top: 28px;
    font-size: 9px;
    letter-spacing: 0.14em;
    padding: 4px 7px;
    max-width: 44%;
  }
}

/* =====================================================================
   CARD EMBLEM ANIMATIONS (HOME carousel)
   Each faction's glyph loops gently when its card is SELECTED so the
   carousel feels alive — but inactive cards stay still so the page
   doesn't jitter. All animations respect prefers-reduced-motion.
   ===================================================================== */
.emb { overflow: visible; }
.emb-outer, .emb-inner, .emb-core,
.emb-ring, .emb-orbit, .emb-chev {
  transform-origin: center;
  transform-box: fill-box;
  will-change: transform, opacity;
}

/* ===== SURGEON: two diamonds slow-spinning against each other, center
   dot pulsing like a heartbeat. Precise-instrument vibe. ===== */
.emb-surgeon.is-active .emb-outer { animation: embSpinCW  22s linear infinite; }
.emb-surgeon.is-active .emb-inner { animation: embSpinCCW 14s linear infinite; }
.emb-surgeon.is-active .emb-core  { animation: embPulseDot 1.8s ease-in-out infinite; }

/* ===== AI: ring steady, the two orbit ellipses rotate in opposite
   directions (reads as an atom / satellite model), core pulses fast. ===== */
.emb-ai.is-active .emb-orbit-h { animation: embSpinCCW 9s linear infinite; }
.emb-ai.is-active .emb-orbit-v { animation: embSpinCW  11s linear infinite; }
.emb-ai.is-active .emb-core    { animation: embPulseDot 1.3s ease-in-out infinite; }

/* ===== LAZY: three chevrons march upward — each chevron rises,
   fades, and gets replaced by the one below in a staggered loop. ===== */
.emb-lazy.is-active .emb-chev-1 { animation: embChevRise 1.8s ease-in-out infinite; animation-delay: 0s;    --emb-chev-opa: 0.35; }
.emb-lazy.is-active .emb-chev-2 { animation: embChevRise 1.8s ease-in-out infinite; animation-delay: 0.28s; --emb-chev-opa: 0.65; }
.emb-lazy.is-active .emb-chev-3 { animation: embChevRise 1.8s ease-in-out infinite; animation-delay: 0.56s; --emb-chev-opa: 1;    }

@keyframes embSpinCW  { from { transform: rotate(0deg);   } to { transform: rotate(360deg);  } }
@keyframes embSpinCCW { from { transform: rotate(0deg);   } to { transform: rotate(-360deg); } }
@keyframes embPulseDot {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.6); opacity: 0.5; }
}
@keyframes embChevRise {
  0%   { transform: translateY(0);   opacity: var(--emb-chev-opa, 1); }
  50%  { transform: translateY(-3px); opacity: 1; }
  100% { transform: translateY(0);   opacity: var(--emb-chev-opa, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .emb-outer, .emb-inner, .emb-core,
  .emb-ring, .emb-orbit, .emb-chev { animation: none !important; }
}

/* =====================================================================
   ROUTE-SWITCH CONFIRM — "Leave this venture?" prompt that appears when
   a strong vertical swipe is detected inside a venture. Replaces the
   silent route switch so a reader doesn't get yanked out of content by
   an accidental gesture.
   ===================================================================== */
.route-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  /* Softer scrim — no blur (blur read as "system alert") and lighter
     opacity so the confirm reads as a prompt, not a warning. */
  background: rgba(4,4,6,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: rcFade 0.18s ease-out both;
}
@keyframes rcFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.route-confirm-card {
  width: min(86vw, 380px);
  background: var(--bg-2, #0e0e12);
  border: 1px solid var(--fg-faint);
  box-shadow:
    0 1px 0 rgba(244,241,234,0.04) inset,
    0 18px 40px rgba(0,0,0,0.5);
  padding: 18px 20px 16px;
  color: var(--fg);
  font-family: var(--f-mono);
  transform: translateY(6px);
  opacity: 0;
  animation: rcPop 0.18s ease-out 0.02s forwards;
}
@keyframes rcPop {
  to { transform: translateY(0); opacity: 1; }
}
.rc-eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--fg-dim);
  margin-bottom: 10px;
  text-transform: none;   /* keep sentence-case — feels more human */
}
.rc-title {
  font-family: var(--f-display);
  font-size: clamp(18px, 4vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-bottom: 16px;
  text-transform: uppercase;
}
.rc-title .rc-target {
  color: var(--venture-accent, var(--fg));
}
.rc-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.rc-btn {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;   /* sentence-case buttons: 'Keep reading' not 'KEEP READING' */
  padding: 11px 10px;
  border: 1px solid var(--fg-faint);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.rc-btn:hover, .rc-btn:focus-visible {
  border-color: var(--fg);
  outline: none;
}
.rc-btn:active { transform: translateY(1px); }
.rc-no:hover, .rc-no:focus-visible {
  background: rgba(244,241,234,0.04);
}
.rc-yes {
  border-color: var(--venture-accent, var(--fg));
  color: var(--venture-accent, var(--fg));
  background: rgba(244,241,234,0.02);
}
.rc-yes:hover, .rc-yes:focus-visible {
  background: var(--venture-accent, var(--fg));
  color: var(--bg);
  border-color: var(--venture-accent, var(--fg));
}
.rc-hint {
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.4;
  color: var(--fg-dim);
  text-align: center;
  letter-spacing: 0.02em;
}
.rc-hint b {
  font-weight: 600;
  color: var(--fg);
}

/* =====================================================================
   PLAYER PORTRAIT — character-select style, no box, bottom already faded
   in the PNG itself. Pinned to the right on desktop, sits behind the
   text as a faint watermark on mobile so it never fights the name.
   ===================================================================== */
.venture-intro--portrait {
  position: relative;
  /* Reserve space on the right so text doesn't collide with the portrait */
  padding-right: clamp(180px, 28vw, 320px);
  min-height: 380px;
}
.player-mugshot {
  position: absolute;
  top: -8px;
  right: -12px;
  height: 100%;
  max-height: 520px;
  width: auto;
  pointer-events: none;
  user-select: none;
  filter:
    drop-shadow(0 0 22px var(--venture-accent-glow, rgba(244,241,234,0.25)))
    drop-shadow(0 18px 28px rgba(0,0,0,0.55));
}
/* Desktop-only warp-in; mobile uses the portrait as a static watermark
   so the opacity override below is stable. */
@media (min-width: 901px) {
  .player-mugshot {
    animation: portrait-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes portrait-in {
    from { opacity: 0; transform: translateX(16px) scale(0.98); }
    to   { opacity: 1; transform: translateX(0)    scale(1);    }
  }
}

@media (max-width: 900px) {
  .venture-intro--portrait {
    padding-right: 0;
    min-height: 0;
  }
  .player-mugshot {
    position: absolute;
    top: -20px;
    right: -24px;
    height: 280px;
    max-height: none;
    opacity: 0.38;
    z-index: 0;
    filter:
      drop-shadow(0 0 30px var(--venture-accent-glow, rgba(244,241,234,0.25)));
  }
  /* Ensure text sits above the watermark */
  .venture-intro--portrait > *:not(.player-mugshot) {
    position: relative;
    z-index: 1;
  }
}
@media (max-width: 640px) {
  .player-mugshot { height: 220px; right: -32px; top: -28px; opacity: 0.32; }
}

/* =====================================================================
   HOME FOOTER: dots + mobile vs desktop hint text
   ===================================================================== */
.hf-dots {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
}
.hf-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--fg-dim);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.hf-dot:hover { border-color: var(--fg); }
.hf-dot.is-active {
  background: var(--phos, var(--fg));
  border-color: var(--phos, var(--fg));
  box-shadow: 0 0 10px var(--phos-glow);
  transform: scale(1.25);
}

/* Show only the desktop variant on desktop, only the touch variant
   anywhere with touch protocol (phones + tablets, <900px). */
.hf-hint-mobile { display: none; }
@media (max-width: 900px) {
  .hf-hint-desktop { display: none; }
  .hf-hint-mobile { display: inline-flex; align-items: center; gap: 6px; }
  .hf-hint-mobile .blink { font-size: 12px; }
}

/* =====================================================================
   MOBILE HELP FAB — small circular "?" button, bottom-right on mobile.
   Opens the same HelpOverlay (which shows mobile-specific content).
   ===================================================================== */
.mobile-help-fab {
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-2, #0a0a0d);
  color: var(--fg);
  border: 2px solid var(--fg);
  font-family: var(--f-display, var(--f-pixel));
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 130;
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 18px var(--phos-glow),
    0 6px 18px rgba(0,0,0,0.55);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.mobile-help-fab:hover, .mobile-help-fab:active {
  background: var(--phos, #f4f1ea);
  color: var(--bg);
  transform: translateY(-1px);
}

/* Help-section: new intro/context card inside the mobile help overlay */
.help-section-intro { border: 1px solid var(--fg-faint); padding: 12px 14px; margin-bottom: 22px; }
.help-prose {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg);
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}
.help-prose:last-child { margin-bottom: 0; }
.help-prose-dim { color: var(--fg-dim); }

/* Landscape phones: the ? FAB shifts slightly so it doesn't cover the edge */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .mobile-help-fab { right: 10px; bottom: 10px; width: 40px; height: 40px; font-size: 22px; }
}