/* JACKPOT.EXE — layout-specific styling. base.css owns tokens and primitives. */

/* ===== Layout B: Vertical Console (portrait) ===== */

.layout-b {
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--fg);
  border: 1px solid var(--accent-1);
  background: var(--bg);
  overflow: hidden;
}

.lb-header {
  text-align: center;
  border-bottom: 1px dashed var(--fg-mute);
  padding-bottom: 4px;
}
.lb-marquee {
  font-size: 0.82em;
  line-height: 1;
  display: inline-block;
}
.lb-header-meta {
  font-size: 0.78em;
  margin-top: 3px;
  letter-spacing: 0.05em;
}
.lb-header-pal {
  margin-top: 3px;
  font-size: 0.78em;
}

.lb-kpi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  border: 1px solid var(--fg-mute);
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.3);
}
.lb-kpi .kpi { text-align: center; }
.lb-kpi .kpi-label {
  font-size: 0.64em;
  letter-spacing: 0.1em;
}
.lb-kpi .kpi-value {
  font-size: 1.24em;
  line-height: 1.05;
}

/* Leveling is now secondary on mobile: keep the context as a tiny
   terminal status strip, but give the vertical budget back to reels. */
.lb-milestone-line {
  display: flex;
  justify-content: center;
  font-size: 0.72em;
  line-height: 1.05;
  opacity: 0.82;
  margin-top: -2px;
}
.lb-milestone-bar { display: none; }

.lb-reels {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.lb-reels > .box-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.lb-payline {
  text-align: center;
  letter-spacing: 0;
  font-size: 0.82em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-payline-bonus, .la-reels-footer-bonus {
  text-shadow: 0 0 6px currentColor;
  animation: bonus-banner-pulse 1.6s ease-in-out infinite;
}
@keyframes bonus-banner-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; text-shadow: 0 0 10px currentColor, 0 0 3px currentColor; }
}
.lb-reel-holder {
  --reel-base-font-size: 1.08em;
  --reel-fit-scale: 1em;
  --reel-rows4-scale: 0.92em;
  --reel-min-scale: 0.62;
  --reel-max-scale: 1.05;
  --reel-portrait-scale: 0.90em;
  --reel-portrait-rows4-scale: 0.74em;
  --reel-portrait-tall-scale: 1.00em;
  --reel-portrait-tall-rows4-scale: 0.98em;
  --reel-portrait-xl-scale: 1.05em;
  --reel-portrait-xl-rows4-scale: 1.04em;
  --reel-short-landscape-rows4-scale: 0.62em;
  --reel-blackice-rows4-scale: 0.76em;
  --reel-trace-rows4-scale: 0.72em;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  font-size: var(--reel-base-font-size);
  min-height: 0;
  overflow: hidden;
}
.lb-reel-holder .reelbank-wrap { --reel-base-font-size: 1em; }
.lb-reel-holder .reelbank-wrap.rows-4 { --reel-rows4-scale: 0.92em; }
@media (max-width: 430px) {
  .lb-reel-holder .reelbank { gap: 2px; }
  .lb-reel-holder .reelbank-wrap { --reel-fit-scale: var(--reel-portrait-scale); }
  .lb-reel-holder .reel { width: 8ch; flex-basis: 8ch; min-width: 7ch; padding-left: 4px; padding-right: 4px; }
  .lb-reel-holder .reelbank-wrap.rows-4 { --reel-rows4-scale: var(--reel-portrait-rows4-scale); }
}
@media (max-width: 430px) and (min-height: 760px) and (orientation: portrait) {
  .lb-reel-holder .reelbank-wrap { --reel-fit-scale: var(--reel-portrait-tall-scale); }
  .lb-reel-holder .reelbank-wrap .reel .sym {
    line-height: 1.08;
    padding-top: 3px;
    padding-bottom: 3px;
  }
  .lb-reel-holder .reelbank-wrap.rows-4 { --reel-rows4-scale: var(--reel-portrait-tall-rows4-scale); }
  .lb-reel-holder .reelbank-wrap.rows-4 .reel .sym { line-height: 1.12; }
}
@media (min-width: 414px) and (max-width: 430px) and (min-height: 880px) and (orientation: portrait) {
  .lb-reel-holder .reelbank-wrap { --reel-fit-scale: var(--reel-portrait-xl-scale); }
  .lb-reel-holder .reelbank-wrap.rows-4 { --reel-rows4-scale: var(--reel-portrait-xl-rows4-scale); }
}

/* Short phone landscape has desktop-ish width but very little vertical room.
   Keep LayoutB (see main.js) and aggressively compress non-critical chrome so
   5x4 BLACKICE reels remain visible and the command bar stays clickable. */
@media (max-height: 430px) and (orientation: landscape) {
  .layout-b {
    gap: 5px;
    padding: 8px;
  }
  .lb-marquee,
  .lb-milestone-line,
  .lb-milestone-bar,
  .lb-narrator {
    display: none;
  }
  .lb-header {
    padding-bottom: 2px;
  }
  .lb-header-meta,
  .lb-header-pal {
    margin-top: 0;
    font-size: 0.78em;
  }
  .lb-kpi {
    padding: 3px 8px;
  }
  .lb-kpi .kpi-label {
    font-size: 0.62em;
  }
  .lb-kpi .kpi-value {
    font-size: 1.05em;
  }
  .lb-reels > .box-body {
    gap: 4px;
    justify-content: flex-start;
  }
  .lb-reel-holder .reelbank { gap: 2px; }
  .lb-reel-holder .reel {
    width: 8ch;
    flex-basis: 8ch;
    min-width: 7ch;
    padding-left: 4px;
    padding-right: 4px;
  }
  .lb-reel-holder .reelbank-wrap.rows-4 {
    --reel-rows4-scale: var(--reel-short-landscape-rows4-scale);
  }
  .lb-result {
    font-size: 0.9em;
    min-height: 1em;
  }
  .lb-ledger-ribbon {
    min-height: 1.5em;
    padding: 2px 6px;
    font-size: 0.72em;
  }
  .lb-cmdbar .cmdbtn {
    padding: 6px 4px;
  }
}
.lb-result {
  text-align: center;
  text-shadow: 0 0 8px currentColor;
  font-size: 0.95em;
  letter-spacing: 0.14em;
  line-height: 1.05;
  min-height: 1.05em;
  transition: opacity 200ms ease;
}

/* Compact running ledger on mobile. Session events (wins, misses,
   bonus lifecycle) flow in from the left; older entries clip off the
   right edge when they run out of room. No manual scroll. */
.lb-ledger-ribbon {
  display: flex;
  overflow: hidden;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--fg-mute);
  padding: 2px 7px;
  font-size: 0.74em;
  background: rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  min-height: 1.55em;
}
.lb-ledger-label {
  font-size: 0.72em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.lb-ledger-empty { font-size: 0.8em; flex: 0 0 auto; }
.lb-ledger-chip {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.lb-narrator {
  font-size: 0.78em;
  padding: 9px 10px 6px;
}
.lb-narrator > .box-body { justify-content: center; }
.lb-nar-lines > div:not(:last-child) { display: none; }
.lb-nar-lines > div + div { margin-top: 2px; }

.lb-cmdbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.lb-cmdbar .cmdbtn { padding: 9px 4px; }

/* ROOT WINDOW is the tallest mobile state. In portrait browser shells
   (Discord/iOS especially), reclaim chrome by hiding non-critical
   session furniture and compressing the pick board. */
.layout-b.blackice-active {
  gap: 6px;
  padding: 10px;
}
.layout-b.blackice-active .lb-marquee {
  display: none;
}
.layout-b.blackice-active .lb-header {
  padding-bottom: 4px;
}
.layout-b.blackice-active .lb-header-meta,
.layout-b.blackice-active .lb-header-pal {
  margin-top: 2px;
}
.layout-b.blackice-active .lb-kpi {
  padding: 4px 8px;
}
.layout-b.blackice-active .lb-kpi .kpi-value {
  font-size: 1.25em;
}
.layout-b.blackice-active .lb-milestone-line,
.layout-b.blackice-active .lb-milestone-bar,
.layout-b.blackice-active .lb-result,
.layout-b.blackice-active .lb-narrator {
  display: none;
}
.layout-b.blackice-active .lb-reels > .box-body {
  gap: 5px;
  justify-content: flex-start;
}
.layout-b.blackice-active .lb-ledger-ribbon {
  min-height: 1.6em;
  padding: 2px 6px;
  font-size: 0.76em;
}
.layout-b.blackice-active .lb-cmdbar .cmdbtn {
  padding: 8px 4px;
}
.layout-b.blackice-active .lb-reel-holder .reelbank-wrap.rows-4 {
  --reel-rows4-scale: var(--reel-blackice-rows4-scale);
}
.layout-b.blackice-trace-intro .lb-reel-holder .reelbank-wrap.rows-4 {
  --reel-rows4-scale: var(--reel-trace-rows4-scale);
}
.layout-b.blackice-active .box-title {
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Layout A: Dense HUD (landscape) ===== */

.layout-a {
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  padding: 14px 16px 12px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  /* minmax(0, 1fr) is critical — plain `1fr` lets the track grow to
     its content min-size, which means a full ledger or tall reels
     would push the whole page past the viewport. */
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  /* Row-gap bigger than column-gap so the absolute-positioned
     .box-title (top:-10px) doesn't overlap the milestone row above. */
  column-gap: 8px;
  row-gap: 16px;
  color: var(--fg);
  border: 1px solid var(--accent-1);
  background: var(--bg);
  font-size: var(--font-size);
  overflow: hidden;
}

.la-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--accent-1);
  border-bottom: 1px dashed var(--fg-mute);
  padding-bottom: 6px;
  flex-wrap: wrap;
}
.la-brand {
  font-weight: 600;
  letter-spacing: 0.15em;
}
.la-title-meta, .la-title-state {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.la-milestone {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.la-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  /* overflow: visible — box-titles use top:-10px to overlay the border,
     so a clipping column chops the titles at the column edge. Any
     internal region that can grow (ledger) owns its own scroll. */
}
.la-col-1 { grid-column: 1 / 2; grid-row: 3 / 4; }
.la-col-2 { grid-column: 2 / 3; grid-row: 3 / 4; }
.la-col-3 { grid-column: 3 / 4; grid-row: 3 / 4; }

.la-records-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 3px;
  column-gap: 10px;
  font-size: 0.9em;
}

.la-ledger-box { flex: 1; min-height: 0; }
.la-ledger-box > .box-body { overflow: auto; }
.la-ledger-list { font-size: 0.88em; line-height: 1.45; }
.la-ledger-row {
  display: grid;
  grid-template-columns: 42px 48px 1fr;
  gap: 8px;
  align-items: baseline;
}

.la-reels-box { flex: 1; min-height: 0; }
.la-reels-box > .box-body {
  justify-content: center;
  gap: 8px;
}
.la-reels-stats {
  display: flex;
  justify-content: space-between;
  font-size: 0.95em;
  flex-wrap: wrap;
  gap: 6px;
}
.la-reel-holder {
  --reel-base-font-size: 1.2em;
  --reel-fit-scale: 1em;
  --reel-rows4-scale: 0.78em;
  --reel-min-scale: 0.42;
  --reel-max-scale: 1.2;
  --reel-layout-a-rows3-scale: 1em;
  --reel-layout-a-rows4-scale: 0.78em;
  display: flex;
  justify-content: center;
  flex: 1;
  min-height: 0;
  align-items: center;
  font-size: var(--reel-base-font-size);
  overflow: hidden;
}
.la-reel-holder .reelbank-wrap {
  --reel-base-font-size: 1em;
  --reel-min-scale: 0.42;
}
.la-reel-holder .reelbank-wrap[data-reel-fit-surface="layout-a"][data-reel-rows="3"] {
  --reel-fit-scale: var(--reel-layout-a-rows3-scale);
}
.la-reel-holder .reel { padding: 8px 10px; }
/* BLACKICE uses 4 visible rows. In Layout A's shorter landscape shells
   (notably 1365x768), the inherited desktop reel scale is taller than the
   centered holder and gets clipped by the holder's intentional overflow mask.
   Keep this scoped to Layout A so Layout B/mobile sizing stays independent. */
.la-reel-holder .reelbank-wrap[data-reel-fit-surface="layout-a"][data-reel-rows="4"] {
  --reel-rows4-scale: var(--reel-layout-a-rows4-scale);
  --reel-fit-scale: var(--reel-layout-a-rows4-scale);
}

@media (max-height: 820px) and (orientation: landscape) {
  .la-reel-holder {
    --reel-layout-a-rows3-scale: 0.96em;
    --reel-layout-a-rows4-scale: 0.74em;
  }
}
@media (min-height: 900px) and (orientation: landscape) {
  .la-reel-holder {
    --reel-layout-a-rows3-scale: 1.04em;
    --reel-layout-a-rows4-scale: 0.82em;
  }
}
@media (min-height: 980px) and (orientation: landscape) {
  .la-reel-holder {
    --reel-layout-a-rows3-scale: 1.08em;
    --reel-layout-a-rows4-scale: 0.84em;
  }
}
.la-reels-footer {
  text-align: center;
  letter-spacing: 0;
}
.la-rs-cr { font-size: 1.3em; }

.la-subrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.la-bet-ladder {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.la-spark { font-size: 1.1em; }
.la-spark-summary { font-size: 0.85em; margin-top: 4px; text-align: center; }

.la-paytable-grid {
  display: grid;
  grid-template-columns: auto auto auto auto;
  column-gap: 10px;
  row-gap: 2px;
  font-size: 0.95em;
}
.pt-right { text-align: right; }

.la-row4 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
  align-items: stretch;
}
.la-narrator { font-size: 0.95em; }
.la-nar-lines > div + div { margin-top: 2px; }
.la-keys-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  font-size: 0.9em;
}

.la-cmdbar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.la-cmdbar .cmdbtn { padding: 10px 8px; }

/* Scale font down a touch on very small portrait screens */
@media (max-width: 480px) {
  :root { --font-size: 12px; }
  .lb-cmdbar .cmdbtn { padding: 8px 2px; }
}

/* Reel theme / machine variant picker */
.theme-rail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}
.theme-label {
  font-size: 0.72em;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.theme-rail .pal-chip {
  padding: 2px 7px;
}
.theme-rail .theme-name {
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-variant-rail {
  width: 100%;
  padding: 1px 0 0;
}
.la-variant-rail {
  margin-left: auto;
}
.info-theme-row {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.info-theme-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
@media (max-width: 420px) {
  .theme-label { font-size: 0.66em; }
  .theme-rail .pal-chip { padding: 2px 5px; }
  .theme-rail .theme-name { max-width: 13ch; }
}

/* BLACKICE.EXE ROOT WINDOW pick bonus */
.blackice-board {
  width: min(100%, 520px);
  margin: 0 auto;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px dashed var(--accent-2);
  box-shadow: inset 0 0 14px rgba(96, 220, 255, 0.14), 0 0 14px rgba(96, 220, 255, 0.08);
  background: rgba(0, 18, 26, 0.72);
}
.blackice-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.9em;
  letter-spacing: 0.08em;
}
.blackice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(52px, 1fr));
  gap: 8px;
}
.blackice-node {
  min-height: 52px;
  border: 1px solid var(--accent-2);
  background: rgba(0, 0, 0, 0.35);
  color: var(--accent-2);
  font: inherit;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: inset 0 0 9px rgba(96, 220, 255, 0.12);
}
.blackice-node:not(:disabled):hover,
.blackice-node:not(:disabled):focus-visible {
  background: rgba(96, 220, 255, 0.14);
  outline: 1px solid var(--accent-1);
}
.blackice-node.revealed {
  cursor: default;
  color: var(--accent-4);
  border-color: var(--accent-4);
}
.blackice-node.ice.revealed {
  color: var(--accent-3);
  border-color: var(--accent-3);
  animation: bonus-banner-pulse 0.7s ease-in-out 2;
}
.blackice-meter {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.82em;
}
.blackice-prompt {
  text-align: center;
  font-size: 0.76em;
  letter-spacing: 0.08em;
}
.layout-b.blackice-active .blackice-board {
  gap: 5px;
  padding: 7px;
}
.layout-b.blackice-active .blackice-head {
  font-size: 0.78em;
}
.layout-b.blackice-active .blackice-grid {
  gap: 5px;
}
.layout-b.blackice-active .blackice-node {
  min-height: clamp(38px, 6.1svh, 48px);
  padding: 2px 4px;
  line-height: 1;
}
.layout-b.blackice-active .blackice-meter {
  font-size: 0.72em;
  gap: 5px;
}
.layout-b.blackice-active .blackice-prompt {
  font-size: 0.66em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 760px) {
  .blackice-grid { grid-template-columns: repeat(4, minmax(64px, 1fr)); }
  .blackice-node { min-height: 58px; }
}
.blackice-node.pending {
  color: var(--accent-1);
  border-color: var(--accent-1);
  background: rgba(96, 220, 255, 0.2);
  animation: bonus-banner-pulse 0.55s ease-in-out infinite;
}
.blackice-node:active:not(:disabled) {
  transform: translateY(1px) scale(0.985);
  background: rgba(96, 220, 255, 0.24);
}

/* Machine lobby modal */
.machine-card { max-width: min(860px, calc(100vw - 24px)); }
.machine-body {
  max-height: min(72vh, 620px);
  overflow-y: auto;
  overflow-x: hidden;
}
.machine-intro {
  margin-bottom: 8px;
  line-height: 1.35;
}
.machine-lobby-meta {
  margin-bottom: 10px;
  font-size: 0.75em;
  letter-spacing: 0.12em;
}
.machine-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 10px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.machine-option {
  --machine-accent: var(--accent-1);
  width: 100%;
  min-height: 190px;
  text-align: left;
  border: 1px solid var(--muted);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.28)),
    rgba(0, 0, 0, 0.34);
  color: var(--fg);
  font: inherit;
  padding: 12px;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 8px;
  cursor: pointer;
  scroll-snap-align: start;
  position: relative;
}
.machine-option::before {
  content: '';
  position: absolute;
  inset: 0;
  border-top: 2px solid color-mix(in srgb, var(--machine-accent) 70%, transparent);
  opacity: 0.8;
  pointer-events: none;
}
.machine-option:disabled {
  cursor: wait;
  opacity: 0.9;
}
.machine-option:hover:not(:disabled),
.machine-option:focus-visible {
  border-color: var(--machine-accent);
  outline: 1px solid var(--machine-accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--machine-accent) 18%, transparent);
}
.machine-option.machine-state-active,
.machine-option.machine-state-ready {
  border-color: var(--accent-4);
  box-shadow: inset 0 0 12px rgba(215, 255, 60, 0.12), 0 0 10px rgba(215, 255, 60, 0.08);
}
.machine-option.machine-state-failed {
  border-color: var(--accent-3);
  box-shadow: inset 0 0 12px rgba(255, 96, 96, 0.12);
}
.machine-option.machine-state-loading .machine-progress span {
  animation: machine-progress-pulse 0.8s linear infinite;
}
.machine-option-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.machine-title { font-size: 1.05em; }
.machine-selected {
  font-size: 0.76em;
  white-space: nowrap;
  letter-spacing: 0.12em;
}
.machine-tagline,
.machine-bonus {
  font-size: 0.86em;
  line-height: 1.3;
}
.machine-progress {
  height: 8px;
  border: 1px solid var(--fg-mute);
  background: rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.machine-progress span {
  display: block;
  height: 100%;
  min-width: 0;
  background: linear-gradient(90deg, var(--machine-accent), var(--accent-4));
  box-shadow: 0 0 10px var(--machine-accent);
  transition: width 160ms ease;
}
.machine-card-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font-size: 0.78em;
  letter-spacing: 0.08em;
}
.machine-state-copy,
.machine-cta { white-space: nowrap; }
.machine-cta { color: var(--fg); }
@keyframes machine-progress-pulse {
  0%, 100% { filter: brightness(0.9); }
  50% { filter: brightness(1.45); }
}
@media (max-width: 520px) {
  .machine-card {
    width: calc(100vw - 18px);
    max-height: 88vh;
  }
  .machine-body { max-height: 76vh; }
  .machine-list {
    grid-auto-columns: minmax(82vw, 1fr);
  }
  .machine-option {
    min-height: 180px;
    padding: 10px 9px;
  }
  .machine-option-head { align-items: start; }
  .machine-card-footer { align-items: start; flex-direction: column; gap: 3px; }
}

/* ===== Home Screen Launcher (2026-05 design handoff integration) ===== */
.home-screen-root[hidden] { display: none !important; }
.home-screen-root {
  width: 100%;
  height: 100%;
  min-height: 0;
  color: var(--fg);
}
.home-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(168px, 220px) minmax(0, 1fr) minmax(190px, 260px);
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--accent-1);
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent-1) 7%, transparent), transparent 35%),
    linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.42)),
    var(--bg);
  overflow: hidden;
}
.home-titlebar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px dashed var(--fg-mute);
  background: rgba(0,0,0,0.45);
  letter-spacing: 0.08em;
  font-size: 0.9em;
}
.home-titlebrand { min-width: 0; }
.home-menu-button {
  display: none;
  border: 1px solid var(--fg-mute);
  background: transparent;
  color: var(--fg);
  padding: 5px 9px;
  font: inherit;
  cursor: pointer;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
}
.home-menu-button span {
  display: block;
  width: 14px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 0 5px currentColor;
}
.home-menu-button:hover,
.home-menu-button:focus-visible,
.home-menu-close:hover,
.home-menu-close:focus-visible { color: var(--accent-1); border-color: var(--accent-1); outline: none; }
.home-online { display: flex; gap: 10px; white-space: nowrap; font-size: 0.86em; }
.home-menu-backdrop {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: rgba(0,0,0,0.72);
  display: flex;
}
.home-menu-drawer {
  width: min(78vw, 320px);
  height: 100%;
  background: var(--bg-deep);
  border-right: 1px solid var(--accent-1);
  box-shadow: 0 0 30px rgba(0,0,0,0.9), 0 0 18px color-mix(in srgb, var(--accent-1) 18%, transparent);
  display: flex;
  flex-direction: column;
  animation: home-menu-slide-in .18s ease-out;
}
@keyframes home-menu-slide-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.home-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--fg-mute);
  background: rgba(0,0,0,0.42);
  letter-spacing: 0.14em;
}
.home-menu-close {
  margin-left: auto;
  border: 1px solid var(--fg-mute);
  background: transparent;
  color: var(--fg-dim);
  font: inherit;
  padding: 2px 8px;
  cursor: pointer;
}
.home-menu-player {
  margin: 12px 12px 8px;
  padding: 10px;
  border: 1px solid var(--fg-mute);
  background: rgba(0,0,0,0.42);
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-menu-section { padding: 6px 12px; display: grid; gap: 7px; }
.home-menu-item {
  width: 100%;
  border: 1px solid var(--fg-mute);
  background: rgba(0,0,0,0.30);
  color: var(--fg);
  font: inherit;
  padding: 10px 11px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}
.home-menu-item:hover,
.home-menu-item:focus-visible { border-color: var(--accent-1); outline: none; background: rgba(255,255,255,0.04); }
.home-menu-item strong { letter-spacing: 0.10em; }
.home-menu-item small { grid-column: 2; color: var(--fg-mute); font-size: 0.72em; letter-spacing: 0.04em; }
.home-menu-muted { border-top: 1px dashed var(--fg-mute); margin-top: 4px; }
.home-menu-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 2px; color: var(--fg-dim); letter-spacing: 0.10em; }
.home-menu-row small { color: var(--fg-mute); }
.home-menu-footer { margin-top: auto; padding: 10px 14px; border-top: 1px solid var(--fg-mute); display: flex; justify-content: space-between; gap: 8px; color: var(--fg-mute); font-size: 0.7em; letter-spacing: 0.08em; background: rgba(0,0,0,0.4); }
.home-side {
  min-height: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.home-left { border-right: 1px solid var(--fg-mute); }
.home-right { border-left: 1px solid var(--fg-mute); }
.home-panel {
  border: 1px solid var(--fg-mute);
  background: rgba(0,0,0,0.36);
  padding: 10px;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.25);
}
.home-panel-label, .home-kicker {
  font-size: 0.72em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.home-player-row { display: flex; align-items: center; gap: 10px; }
.home-player-row strong { letter-spacing: 0.08em; }
.home-big-number { font-weight: 700; font-size: clamp(1.05em, 2vw, 1.35em); letter-spacing: 0.06em; white-space: nowrap; }
.home-nav-list { border-top: 1px dashed var(--fg-mute); padding-top: 8px; display: grid; gap: 4px; }
.home-nav-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  border-left: 2px solid transparent;
  color: var(--fg-dim);
  letter-spacing: 0.09em;
  font-size: 0.86em;
}
.home-nav-item.is-active { color: var(--accent-1); border-left-color: var(--accent-1); background: rgba(255,225,105,0.04); text-shadow: 0 0 5px currentColor; }
.home-nav-item.is-placeholder span { color: var(--fg-mute); font-size: 0.78em; }
.home-main {
  min-width: 0;
  min-height: 0;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.home-section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.home-section-head h1 { margin: 0; color: var(--fg); font-size: clamp(1.25em, 3vw, 2em); line-height: 1; letter-spacing: 0.12em; text-shadow: 0 0 7px currentColor; }
.home-selected-chip {
  border: 1px solid var(--home-accent, var(--accent-1));
  color: var(--home-accent, var(--accent-1));
  padding: 4px 8px;
  background: color-mix(in srgb, var(--home-accent, var(--accent-1)) 8%, transparent);
  text-shadow: 0 0 5px currentColor;
  font-size: 0.78em;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.home-carousel-wrap {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  gap: 10px;
  align-items: stretch;
}
.home-arrow {
  border: 1px solid var(--fg-mute);
  background: rgba(0,0,0,0.36);
  color: var(--fg-dim);
  font: inherit;
  font-size: 1.7em;
  cursor: pointer;
}
.home-arrow:hover, .home-arrow:focus-visible { color: var(--accent-1); border-color: var(--accent-1); outline: none; }
.home-carousel {
  min-width: 0;
  min-height: 0;
  display: flex;
  gap: 12px;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px max(18px, 12%) 8px;
}
.home-carousel::-webkit-scrollbar { display: none; }
.home-machine-card {
  --home-accent: var(--accent-1);
  scroll-snap-align: center;
  flex: 0 0 clamp(240px, 44%, 390px);
  min-height: 0;
  border: 1px solid color-mix(in srgb, var(--home-accent) 55%, var(--fg-mute));
  background: linear-gradient(180deg, rgba(0,0,0,0.20), rgba(0,0,0,0.58)), var(--bg-deep);
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 8px;
  padding: 10px;
  opacity: 0.64;
  transform: scale(0.93);
  transition: transform .18s ease, opacity .18s ease, border-color .18s ease, box-shadow .18s ease;
  position: relative;
  overflow: hidden;
}
.home-machine-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-top: 2px solid color-mix(in srgb, var(--home-accent) 70%, transparent);
  opacity: 0.65;
}
.home-machine-card:hover, .home-machine-card:focus-visible { opacity: 0.86; outline: none; border-color: var(--home-accent); }
.home-machine-card.is-selected {
  opacity: 1;
  transform: scale(1);
  border-color: var(--home-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--home-accent) 45%, transparent), 0 0 30px color-mix(in srgb, var(--home-accent) 18%, transparent), inset 0 0 24px rgba(0,0,0,0.45);
}
.home-machine-card.is-locked { filter: grayscale(0.3); }
.home-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--home-accent); font-weight: 700; letter-spacing: 0.08em; }
.home-card-top small { color: var(--fg-dim); font-size: 0.7em; white-space: nowrap; }
.home-hero-art {
  min-height: 0;
  border: 1px solid color-mix(in srgb, var(--home-accent) 35%, var(--fg-mute));
  background: radial-gradient(circle at center, color-mix(in srgb, var(--home-accent) 14%, transparent), rgba(0,0,0,0.75));
  overflow: hidden;
  display: grid;
  place-items: center;
}
.home-hero-art img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.04) contrast(1.08); }
.home-locked-art { width: 100%; height: 100%; min-height: 220px; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--home-accent); font-weight: 700; letter-spacing: 0.18em; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 8px, transparent 8px 16px); }
.home-locked-art span:first-child, .home-locked-art span:last-child { font-size: 3em; opacity: 0.55; }
.home-card-meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: 0.76em; letter-spacing: 0.08em; color: var(--fg-dim); }
.home-card-meta > * { border: 1px solid var(--fg-mute); padding: 2px 5px; background: rgba(0,0,0,0.25); }
.home-card-meta strong { color: var(--home-accent); font-weight: 700; }
.home-machine-card p { margin: 0; color: var(--fg-dim); font-size: 0.78em; line-height: 1.25; min-height: 2.5em; }
.home-boot-strip {
  --home-accent: var(--accent-1);
  border: 1px solid var(--home-accent);
  background: color-mix(in srgb, var(--home-accent) 6%, rgba(0,0,0,0.42));
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(140px, 0.8fr) auto auto;
  gap: 10px;
  align-items: center;
  box-shadow: 0 0 18px color-mix(in srgb, var(--home-accent) 10%, transparent);
}
.home-boot-copy { min-width: 0; display: grid; gap: 1px; }
.home-boot-copy strong { color: var(--home-accent); letter-spacing: 0.1em; text-shadow: 0 0 5px currentColor; }
.home-boot-copy small { color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-boot-progress { height: 8px; border: 1px solid var(--fg-mute); background: rgba(0,0,0,0.65); overflow: hidden; }
.home-boot-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--home-accent), var(--accent-4)); box-shadow: 0 0 10px var(--home-accent); transition: width .18s ease; }
.home-boot-status { color: var(--home-accent); font-size: 0.78em; letter-spacing: 0.1em; white-space: nowrap; }
.home-boot-status.is-busy { animation: blink-soft 1s ease-in-out infinite; }
.home-boot-btn {
  border: 1px solid var(--accent-4);
  background: rgba(80,250,123,0.08);
  color: var(--accent-4);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 9px 12px;
  cursor: pointer;
  text-shadow: 0 0 5px currentColor;
  white-space: nowrap;
}
.home-boot-btn:disabled { cursor: default; opacity: 0.48; filter: grayscale(0.7); }
.home-stat { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--fg-mute); padding: 6px 0; }
.home-stat:last-child { border-bottom: 0; }
.home-stat span { color: var(--fg-dim); font-size: 0.78em; letter-spacing: 0.1em; }
.home-stat strong { color: var(--accent-1); letter-spacing: 0.06em; }
.home-action-list { display: grid; gap: 7px; }
.home-action-btn {
  width: 100%;
  border: 1px solid var(--fg-mute);
  background: rgba(0,0,0,0.30);
  color: var(--fg);
  font: inherit;
  padding: 8px 9px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 8px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}
.home-action-btn:hover,
.home-action-btn:focus-visible { border-color: var(--accent-1); outline: none; background: rgba(255,255,255,0.04); }
.home-action-btn strong { letter-spacing: 0.09em; font-size: 0.88em; }
.home-action-btn small { grid-column: 2; color: var(--fg-mute); font-size: 0.68em; line-height: 1.2; }
.home-disclaimer { color: var(--fg-dim); font-size: 0.78em; line-height: 1.45; margin-top: auto; }

@media (max-width: 900px) {
  .home-shell { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .home-titlebar { font-size: 0.78em; padding: 8px 10px; justify-content: flex-start; }
  .home-menu-button { display: flex; }
  .home-online { margin-left: auto; }
  .home-online .c-mute { display: none; }
  .home-side { padding: 8px 10px; border: 0; }
  .home-left { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .home-left .home-nav-list { display: none; }
  .home-right { display: none; }
  .home-main { padding: 10px; gap: 9px; }
  .home-section-head h1 { font-size: 1.25em; }
  .home-kicker { margin-bottom: 3px; }
  .home-carousel-wrap { grid-template-columns: 24px minmax(0, 1fr) 24px; gap: 6px; }
  .home-carousel { padding: 2px 16% 6px; gap: 10px; }
  .home-machine-card { flex-basis: 78%; min-height: 350px; padding: 9px; }
  .home-boot-strip { grid-template-columns: 1fr; gap: 7px; }
  .home-boot-copy small { white-space: normal; }
}

@media (max-width: 430px) {
  .home-left { grid-template-columns: 1fr; }
  .home-left .player-panel { display: none; }
  .home-machine-card { flex-basis: 82%; min-height: 330px; }
  .home-hero-art { min-height: 210px; }
  .home-card-top { font-size: 0.9em; }
  .home-card-meta { font-size: 0.69em; }
}
#home-root { width: 100%; flex: 1; min-height: 0; }
.layout-stage[hidden] { display: none !important; }
.home-card-top span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-machine-card p { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }