/* ============================================================
   Dream Arcades — Custom Arcade Builder — dark theme
   Namespaced .cab- so it can't fight the luxury stylesheet.
   Accent matches the new site: #ee4612
   ============================================================ */
:root {
  --cab-bg: #0d0d11;
  --cab-panel: #17171d;
  --cab-panel-2: #1f1f27;
  --cab-line: #2c2c36;
  --cab-text: #f2f0ec;
  --cab-dim: #a6a39c;
  --cab-accent: #ee4612;
  --cab-accent-soft: rgba(238, 70, 18, 0.14);
  --cab-good: #3ecf6e;
}

.cab-page { background: var(--cab-bg); }
.cab-hero {
  background: radial-gradient(1200px 400px at 50% -100px, rgba(238,70,18,.25), transparent),
              var(--cab-bg);
  color: var(--cab-text);
  text-align: center;
  padding: 4.75rem 1rem 1.5rem;
}
.cab-hero h1 { margin: 0 0 .4rem; font-size: 2.2rem; letter-spacing: .02em; }
.cab-hero p { margin: 0; color: var(--cab-dim); }

.cab-root { background: var(--cab-bg); color: var(--cab-text); min-height: 70vh;
  font-family: inherit; padding: 0 0 5rem; }
.cab-shell { max-width: 1280px; margin: 0 auto; padding: 0 1rem; scroll-margin-top: 90px; }
.cab-noscript, .cab-error { max-width: 640px; margin: 3rem auto; padding: 1.5rem;
  background: var(--cab-panel); border: 1px solid var(--cab-line); border-radius: 10px; text-align: center; }
.cab-error a, .cab-noscript a { color: var(--cab-accent); }

.cab-loading { text-align: center; padding: 5rem 1rem; color: var(--cab-dim); }
.cab-loading-cab { width: 46px; height: 66px; margin: 0 auto 1rem; border-radius: 6px 6px 3px 3px;
  border: 2px solid var(--cab-accent); border-bottom-width: 8px; position: relative; animation: cab-pulse 1.2s infinite; }
.cab-loading-cab::after { content: ""; position: absolute; inset: 8px 6px auto 6px; height: 18px;
  background: var(--cab-accent-soft); border-radius: 3px; }
@keyframes cab-pulse { 50% { opacity: .35; } }

/* ---------- top bar ---------- */
.cab-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 0; position: sticky; top: 0; z-index: 40;
  background: linear-gradient(var(--cab-bg) 85%, transparent); }
.cab-progress { display: flex; flex-wrap: wrap; gap: .4rem; }
.cab-pill { background: var(--cab-panel); color: var(--cab-dim); border: 1px solid var(--cab-line);
  border-radius: 999px; padding: .35rem .8rem; font-size: .78rem; cursor: pointer; }
.cab-pill:hover { color: var(--cab-text); border-color: var(--cab-accent); text-decoration: underline; }
.cab-pill-done { color: var(--cab-text); }
.cab-pill-done::before { content: "\2713 "; color: var(--cab-good); }
.cab-pill-active { background: var(--cab-accent); border-color: var(--cab-accent); color: #fff; }
.cab-topbar-right { display: flex; align-items: center; gap: .8rem; white-space: nowrap; }
.cab-savestate { font-size: .72rem; color: var(--cab-dim); }
.cab-savestate-saved { color: var(--cab-good); }
.cab-savestate-error { color: #ff7a5c; }
.cab-pricebar { text-align: right; }
.cab-price-total { font-size: 1.35rem; font-weight: 700; }
.cab-price-deposit, .cab-price-fin { display: block; font-size: .72rem; color: var(--cab-dim); }

/* ---------- restore banner ---------- */
.cab-restore { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .6rem; }
.cab-restore-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--cab-panel-2); border: 1px solid var(--cab-accent); border-radius: 10px;
  padding: .7rem 1rem; font-size: .9rem; }

/* ---------- columns ---------- */
.cab-columns { display: grid; grid-template-columns: 58% 1fr; gap: 1.4rem; align-items: start; }
.cab-preview-col { position: sticky; top: 72px; }

.cab-stage { position: relative; background: var(--cab-panel); border: 1px solid var(--cab-line);
  border-radius: 14px; overflow: hidden; min-height: 320px; display: flex; align-items: center; justify-content: center; }
.cab-stage-img { max-width: 100%; max-height: 460px; display: block; }
.cab-stage-fallback { text-align: center; color: var(--cab-dim); padding: 4rem 1rem; }
.cab-stage-fallback-name { font-size: 1.4rem; color: var(--cab-text); margin-bottom: .4rem; }
.cab-stage-badge { position: absolute; left: 12px; bottom: 12px; background: rgba(13,13,17,.8);
  border: 1px solid var(--cab-line); border-radius: 8px; padding: .3rem .7rem; font-size: .8rem; }
.cab-stage-marquee { position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  min-width: 55%; max-width: 90%; text-align: center; padding: .45rem 1rem; border-radius: 6px;
  font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .95rem;
  background: #101018; border: 1px solid var(--cab-line); box-shadow: 0 0 22px rgba(238,70,18,.35);
  z-index: 5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-mq-red-black    { color: #ff5030; text-shadow: 0 0 12px rgba(255,80,48,.8); }
.cab-mq-blue-chrome  { color: #7fd0ff; text-shadow: 0 0 12px rgba(127,208,255,.8); }
.cab-mq-neon-purple  { color: #c77dff; text-shadow: 0 0 12px rgba(199,125,255,.8); }
.cab-mq-retro-green  { color: #58e07f; text-shadow: 0 0 12px rgba(88,224,127,.8); }
.cab-mq-designer-s-choice, .cab-mq-default, .cab-mq-custom-describe-in-notes {
  color: #ffd166; text-shadow: 0 0 12px rgba(255,209,102,.8); }

.cab-spec-tray { background: var(--cab-panel); border: 1px solid var(--cab-line); border-radius: 14px;
  margin-top: .9rem; padding: .9rem 1rem; }
.cab-tray-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--cab-dim); margin-bottom: .5rem; }
.cab-tray-empty { color: var(--cab-dim); font-size: .88rem; }
.cab-tray-row { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; border-top: 1px solid var(--cab-line);
  width: 100%; background: transparent; border-left: 0; border-right: 0; border-bottom: 0;
  color: var(--cab-text); cursor: pointer; text-align: left; font: inherit; }
.cab-tray-row:hover .cab-tray-name { color: var(--cab-accent); }
.cab-tray-row:first-of-type { border-top: 0; }
.cab-tray-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; background: var(--cab-panel-2); }
.cab-tray-name { flex: 1; font-size: .88rem; }
.cab-tray-price { font-weight: 600; }
.cab-free-chips { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.cab-included-strip { margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.cab-chip { background: var(--cab-panel-2); border: 1px solid var(--cab-line); color: var(--cab-dim);
  border-radius: 999px; padding: .25rem .7rem; font-size: .74rem; }
.cab-chip-free { color: var(--cab-good); border-color: rgba(62,207,110,.4); }

/* ---------- step panel ---------- */
.cab-step-col { background: var(--cab-panel); border: 1px solid var(--cab-line); border-radius: 14px;
  padding: 1.2rem 1.2rem 1.4rem; }
.cab-step-title { margin: 0 0 .3rem; font-size: 1.35rem; }
.cab-step-intro { margin: 0 0 1rem; color: var(--cab-dim); font-size: .92rem; }
.cab-subhead { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--cab-dim);
  margin: 1.1rem 0 .5rem; }
.cab-subhead-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: 1.1rem 0 .5rem; }
.cab-subhead-row .cab-subhead { margin: 0; }
.cab-subhead-row-solo { margin-top: 0; }
.cab-addall { border-color: var(--cab-accent); color: var(--cab-accent); background: transparent; white-space: nowrap; }
.cab-addall:hover { background: var(--cab-accent-soft); border-color: var(--cab-accent); }

.cab-preset-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.cab-preset { text-align: left; background: var(--cab-panel-2); border: 1px solid var(--cab-line);
  border-radius: 8px; padding: .5rem .75rem; cursor: pointer; color: var(--cab-text); max-width: 230px; }
.cab-preset:hover { border-color: var(--cab-accent); }
.cab-preset-name { font-weight: 700; font-size: .95rem; }
.cab-preset-blurb { font-size: .8rem; color: var(--cab-dim); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.cab-class-tabs { display: flex; gap: .4rem; margin-bottom: .4rem; }
.cab-tab { background: transparent; border: 1px solid var(--cab-line); color: var(--cab-dim);
  border-radius: 8px; padding: .4rem .9rem; cursor: pointer; }
.cab-tab-active { background: var(--cab-accent-soft); border-color: var(--cab-accent); color: var(--cab-text); }
.cab-class-blurb { color: var(--cab-dim); font-size: .85rem; margin: .2rem 0 .8rem; }

.cab-model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .7rem; }
.cab-model-card { background: var(--cab-panel-2); border: 1px solid var(--cab-line); border-radius: 12px;
  padding: .8rem; cursor: pointer; color: var(--cab-text); text-align: center; }
.cab-model-card:hover { border-color: var(--cab-dim); }
.cab-model-img { width: 100%; height: 110px; object-fit: contain; margin-bottom: .4rem; }
.cab-model-name { font-weight: 700; font-size: .9rem; }
.cab-model-price { color: var(--cab-accent); font-weight: 700; margin: .2rem 0; }
.cab-model-fit { font-size: .72rem; color: var(--cab-dim); }
.cab-model-reserve { font-size: .72rem; color: #ffd166; margin-top: .2rem; }

.cab-option-grid { display: flex; flex-direction: column; gap: .55rem; }
.cab-option { display: flex; gap: .7rem; align-items: flex-start; text-align: left; width: 100%;
  background: var(--cab-panel-2); border: 1px solid var(--cab-line); border-radius: 10px;
  padding: .7rem .8rem; cursor: pointer; color: var(--cab-text); }
.cab-option:hover { border-color: var(--cab-dim); }
.cab-option-included { cursor: default; opacity: .92; }
.cab-option-conflict { opacity: .55; }
.cab-card-selected { border-color: var(--cab-accent); background: var(--cab-accent-soft); }
.cab-card-check { color: var(--cab-good); font-size: .74rem; margin-top: .2rem; white-space: nowrap; }
.cab-opt-img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; background: var(--cab-panel); flex: none; }
.cab-opt-body { flex: 1; min-width: 0; }
.cab-opt-name { font-size: .92rem; line-height: 1.35; }
.cab-opt-name span[style] { color: var(--cab-accent) !important; } /* tame legacy red NEW tags */
.cab-opt-details { margin-top: .3rem; font-size: .8rem; color: var(--cab-dim); }
.cab-opt-details summary { cursor: pointer; color: var(--cab-accent); }
.cab-opt-details a { color: var(--cab-accent); }
.cab-opt-note { margin-top: .3rem; font-size: .76rem; color: #ffd166; }
.cab-opt-price { font-weight: 700; white-space: nowrap; text-align: right; }
.cab-opt-free { color: var(--cab-good); font-weight: 600; font-size: .85rem; }
.cab-ghost { display: none; }

.cab-input { width: 100%; background: var(--cab-panel-2); border: 1px solid var(--cab-line);
  color: var(--cab-text); border-radius: 8px; padding: .55rem .7rem; font-size: .95rem; }
.cab-input:focus { outline: 2px solid var(--cab-accent); border-color: var(--cab-accent); }
.cab-fineprint { font-size: .78rem; color: var(--cab-dim); margin: .5rem 0 0; }
.cab-fineprint-warn { color: #ffd166; }

.cab-delivery-tier { border: 1px solid var(--cab-line); border-radius: 10px; padding: .7rem .9rem; margin-bottom: .55rem; background: var(--cab-panel-2); }
.cab-tier-head { display: flex; justify-content: space-between; font-weight: 700; }
.cab-tier-price { color: var(--cab-accent); }
.cab-tier-desc { font-size: .83rem; color: var(--cab-dim); margin-top: .25rem; }
.cab-checkline { display: block; margin-top: .8rem; font-size: .9rem; }
.cab-checkline input { margin-right: .45rem; accent-color: var(--cab-accent); }

.cab-review { border: 1px solid var(--cab-line); border-radius: 12px; background: var(--cab-panel-2); padding: .9rem 1rem; }
.cab-review-line { display: flex; justify-content: space-between; padding: .3rem 0; border-bottom: 1px dashed var(--cab-line); font-size: .92rem; }
.cab-review-free { padding: .45rem 0; font-size: .82rem; color: var(--cab-dim); border-bottom: 1px dashed var(--cab-line); }
.cab-review-total { display: flex; justify-content: space-between; padding-top: .6rem; font-size: 1.15rem; font-weight: 800; }
.cab-review-deposit { margin-top: .5rem; color: #ffd166; font-size: .85rem; }
.cab-review-actions { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }

.cab-btn { background: var(--cab-panel-2); color: var(--cab-text); border: 1px solid var(--cab-line);
  border-radius: 9px; padding: .55rem 1.1rem; font-size: .92rem; cursor: pointer; }
.cab-btn:hover { border-color: var(--cab-dim); }
.cab-btn-primary { background: var(--cab-accent); border-color: var(--cab-accent); color: #fff; font-weight: 700; }
.cab-btn-primary:hover { filter: brightness(1.1); border-color: var(--cab-accent); }
.cab-btn-small { padding: .3rem .7rem; font-size: .8rem; }
.cab-btn-big { padding: .8rem 1.6rem; font-size: 1.05rem; }
.cab-btn:disabled { opacity: .6; cursor: wait; }
.cab-step-nav { display: flex; justify-content: space-between; gap: .6rem; margin-top: 1.2rem; }
.cab-step-nav .cab-btn-primary { margin-left: auto; }

/* ---------- toasts ---------- */
.cab-toasts { position: fixed; top: 84px; right: 16px; z-index: 90; display: flex; flex-direction: column;
  gap: .5rem; max-width: 340px; }
.cab-toast { background: var(--cab-panel-2); border: 1px solid var(--cab-accent); border-radius: 10px;
  padding: .7rem .9rem; font-size: .87rem; box-shadow: 0 8px 30px rgba(0,0,0,.5); animation: cab-in .25s ease; }
.cab-toast-actions { display: flex; gap: .5rem; margin-top: .55rem; }
@keyframes cab-in { from { transform: translateY(-8px); opacity: 0; } }

/* ---------- mobile ---------- */
.cab-mobilebar { display: none; }
@media (max-width: 920px) {
  .cab-columns { grid-template-columns: 1fr; }
  .cab-preview-col { position: static; }
  .cab-stage { min-height: 220px; }
  .cab-stage-img { max-height: 300px; }
  .cab-topbar { flex-direction: column; align-items: stretch; gap: .5rem; }
  .cab-topbar-right { justify-content: space-between; }
  .cab-progress { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .2rem; }
  .cab-pill { flex: none; }
  .cab-mobilebar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 1rem;
    background: rgba(13,13,17,.96); border-top: 1px solid var(--cab-line);
    padding-bottom: calc(.7rem + env(safe-area-inset-bottom)); }
  .cab-root { padding-bottom: 7rem; }
  .cab-toasts { top: auto; bottom: 76px; left: 16px; right: 16px; max-width: none; }
}

/* ---------- round 2: image placeholders + zoom preview ---------- */
.cab-thumb-placeholder { display: inline-flex; align-items: center; justify-content: center;
  background: var(--cab-panel); border: 1px dashed var(--cab-line); color: var(--cab-dim);
  font-size: 1.1rem; flex: none; }
span.cab-opt-img { width: 52px; height: 52px; border-radius: 8px; }
span.cab-tray-thumb { width: 34px; height: 34px; border-radius: 6px; font-size: .9rem; }
.cab-zoomable { cursor: zoom-in; }
.cab-zoom { position: absolute; z-index: 120; background: var(--cab-panel);
  border: 1px solid var(--cab-accent); border-radius: 12px; padding: 6px;
  box-shadow: 0 14px 50px rgba(0,0,0,.65); pointer-events: none; }
.cab-zoom img { display: block; max-width: 330px; max-height: 330px; border-radius: 8px; }
@media (max-width: 920px) {
  .cab-zoom { position: fixed; top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%); pointer-events: auto; }
  .cab-zoom img { max-width: 82vw; max-height: 60vh; }
}

/* ---------- round 3: taglines, desc fade, remove button, bold tabs ---------- */
.cab-tab { font-weight: 700; }
.cab-model-tagline { font-size: .76rem; color: var(--cab-text); opacity: .85; margin: .1rem 0; }
.cab-opt-desc { margin-top: .3rem; cursor: pointer; }
.cab-opt-desc-text { font-size: .8rem; color: var(--cab-dim); max-height: 1.45em; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 12%, transparent 78%);
  mask-image: linear-gradient(180deg, #000 12%, transparent 78%); }
.cab-desc-open .cab-opt-desc-text { max-height: none; -webkit-mask-image: none; mask-image: none; }
.cab-opt-desc a { color: var(--cab-accent); }
.cab-desc-toggle { font-size: .74rem; color: var(--cab-accent); }
.cab-btn-remove { display: block; margin-top: .35rem; margin-left: auto; background: #4a1410;
  color: #ff9d8a; border: 1px solid #7a2318; border-radius: 7px; padding: .22rem .6rem;
  font-size: .72rem; cursor: pointer; }
.cab-btn-remove:hover { background: #6a1c14; color: #fff; }

/* ---------- round 4: transparent machine stage + overlays ---------- */
.cab-stage { background: radial-gradient(60% 70% at 50% 45%, rgba(238,70,18,.09), transparent 75%), var(--cab-panel); }
.cab-stage-imgwrap { position: relative; display: inline-block; max-width: 100%; }
.cab-stage-imgwrap .cab-stage-img { position: relative; z-index: 1; }
.cab-stage-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* ---------- round 5: stage badges + callout markers ---------- */
.cab-stage-badge { top: 12px; bottom: auto; z-index: 6; }
.cab-stage-dims { position: absolute; left: 12px; bottom: 12px; z-index: 6;
  background: rgba(13,13,17,.8); border: 1px solid var(--cab-line); border-radius: 8px;
  padding: .3rem .7rem; font-size: .74rem; color: var(--cab-dim); }
.cab-callout { position: absolute; z-index: 4; display: flex; align-items: center; gap: 0; }
.cab-callout-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--cab-accent);
  box-shadow: 0 0 0 3px rgba(238,70,18,.3), 0 0 14px rgba(238,70,18,.8); flex: none;
  animation: cab-pulse 2s infinite; }
.cab-callout-label { background: rgba(13,13,17,.88); border: 1px solid var(--cab-accent);
  border-left: 0; border-radius: 0 7px 7px 0; padding: .14rem .5rem .14rem .6rem;
  font-size: .68rem; white-space: nowrap; margin-left: 14px; position: relative; }
.cab-callout-label::before { content: ""; position: absolute; left: -14px; top: 50%;
  width: 14px; height: 1px; background: var(--cab-accent); }
@media (max-width: 920px) {
  .cab-callout-label { font-size: .6rem; }
}

/* ---------- round 6: bubble overlays + left-side callouts ---------- */
/* contain keeps full-canvas art aligned AND square bubbles undistorted */
.cab-stage-overlay { object-fit: contain; }
.cab-callout-flip { flex-direction: row-reverse; }
.cab-callout-flip .cab-callout-label { margin-left: 0; margin-right: 14px;
  border: 1px solid var(--cab-accent); border-right: 0; border-radius: 7px 0 0 7px; }
.cab-callout-flip .cab-callout-label::before { left: auto; right: -14px; }

/* ---------- round 7: stage rails + underlays ---------- */
.cab-stage-underlay { position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; object-fit: contain; pointer-events: none; }
.cab-rail-left { position: absolute; left: 10px; top: 12%; z-index: 5;
  display: flex; flex-direction: column; gap: .55rem; max-width: 32%; }
.cab-rail-left .cab-callout { position: static; }
.cab-rail-right { position: absolute; right: 6px; top: 8%; z-index: 5;
  display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; }
.cab-bubble { width: 158px; max-width: 28vw; height: auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.55)); pointer-events: none; }
@media (max-width: 920px) {
  .cab-bubble { width: 104px; }
  .cab-rail-left { max-width: 38%; }
}

/* ---------- round 8: wider left rail, flush labels, icon callouts ---------- */
.cab-rail-left { max-width: 44%; width: 44%; }
.cab-rail-left .cab-callout { width: 100%; justify-content: flex-end; }
.cab-rail-left .cab-callout-label { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.cab-callout-icon img { width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--cab-accent); background: #fff; object-fit: cover;
  box-shadow: 0 0 12px rgba(238,70,18,.45); }
.cab-callout-icon .cab-callout-line { flex: 1; height: 1px; background: var(--cab-accent); min-width: 14px; }
.cab-callout-icon { gap: 0; }
@media (max-width: 920px) {
  .cab-rail-left { max-width: 46%; width: 46%; }
  .cab-callout-icon img { width: 34px; height: 34px; }
}

/* ---------- round 9: multi-line dims, closed rail rows, icon cluster ---------- */
.cab-stage-dims { font-size: .7rem; line-height: 1.5; max-width: 46%; }
.cab-rail-row { display: flex; align-items: center; width: 100%; }
.cab-rail-label { background: rgba(13,13,17,.88); border: 1px solid var(--cab-accent);
  border-radius: 7px; padding: .16rem .55rem; font-size: .68rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 72%; }
.cab-rail-row .cab-callout-line { flex: 1; height: 1px; background: var(--cab-accent); min-width: 12px; }
.cab-rail-row .cab-callout-dot { width: 11px; height: 11px; border-radius: 50%;
  background: var(--cab-accent); flex: none;
  box-shadow: 0 0 0 3px rgba(238,70,18,.3), 0 0 14px rgba(238,70,18,.8);
  animation: cab-pulse 2s infinite; }
.cab-rail-icons { position: absolute; right: 12px; bottom: 12px; z-index: 6;
  display: flex; gap: .45rem; }
.cab-icon-badge { width: 44px; height: 44px; border-radius: 50%; background: #fff;
  border: 1px solid var(--cab-line); object-fit: cover;
  box-shadow: 0 4px 14px rgba(0,0,0,.5); }
@media (max-width: 920px) {
  .cab-stage-dims { font-size: .6rem; max-width: 58%; }
  .cab-icon-badge { width: 34px; height: 34px; }
}

/* ---------- round 10: gallery strip + lightbox + reset ---------- */
.cab-gallery-strip { margin-top: .9rem; padding: .55rem; background: #101014;
  border: 1px solid var(--cab-line); border-radius: 12px;
  display: flex; gap: .45rem; overflow-x: auto; }
.cab-gallery-thumb { position: relative; flex: none; width: 88px; height: 62px;
  border: 1px solid var(--cab-line); border-radius: 8px; overflow: hidden;
  background: #000; cursor: pointer; padding: 0; }
.cab-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cab-gallery-thumb:hover { border-color: var(--cab-accent); }
.cab-play-badge { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 1.15rem;
  background: rgba(0,0,0,.35); text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.cab-lightbox { position: fixed; inset: 0; z-index: 9990; background: rgba(8,8,10,.92);
  display: flex; align-items: center; justify-content: center; }
.cab-lb-content { max-width: min(1100px, 88vw); max-height: 82vh; display: flex;
  align-items: center; justify-content: center; }
.cab-lb-content img { max-width: 100%; max-height: 82vh; border-radius: 10px;
  box-shadow: 0 20px 80px rgba(0,0,0,.8); }
.cab-lb-content iframe { width: min(1100px, 88vw); height: min(620px, 60vw);
  border: 0; border-radius: 10px; }
.cab-lb-x { position: absolute; top: 10px; right: 12px; z-index: 9999; font-size: 2rem;
  line-height: 1; background: rgba(23,23,29,.7); border: 1px solid var(--cab-line);
  border-radius: 50%; width: 46px; height: 46px; color: #fff; cursor: pointer; }
.cab-lb-x:hover { border-color: var(--cab-accent); }
.cab-lb-prev, .cab-lb-next { position: absolute; z-index: 9999; top: 50%; transform: translateY(-50%);
  font-size: 2.6rem; background: rgba(23,23,29,.7); color: #fff;
  border: 1px solid var(--cab-line); border-radius: 50%;
  width: 54px; height: 54px; cursor: pointer; }
.cab-lb-prev { left: 18px; } .cab-lb-next { right: 18px; }
.cab-lb-prev:hover, .cab-lb-next:hover { border-color: var(--cab-accent); }
.cab-btn-reset { border-color: #7a2318; color: #ff9d8a; }
.cab-btn-reset:hover { background: #4a1410; border-color: #7a2318; color: #fff; }
@media (max-width: 920px) {
  .cab-lb-prev, .cab-lb-next { width: 42px; height: 42px; font-size: 2rem; }
}

/* ---------- round 11: themed scrollbars ---------- */
.cab-gallery-strip, .cab-progress {
  scrollbar-width: thin; scrollbar-color: #2c2c36 #101014; }
.cab-gallery-strip::-webkit-scrollbar, .cab-progress::-webkit-scrollbar { height: 7px; }
.cab-gallery-strip::-webkit-scrollbar-track, .cab-progress::-webkit-scrollbar-track {
  background: #101014; border-radius: 99px; }
.cab-gallery-strip::-webkit-scrollbar-thumb, .cab-progress::-webkit-scrollbar-thumb {
  background: #2c2c36; border-radius: 99px; }
.cab-gallery-strip::-webkit-scrollbar-thumb:hover, .cab-progress::-webkit-scrollbar-thumb:hover {
  background: var(--cab-accent); }

/* ---------- Arcade Mike ---------- */
.cab-mike-avatar { width: 46px; height: 46px; border-radius: 50%; flex: none;
  object-fit: cover; border: 2px solid var(--cab-accent); }
.cab-mike-avatar-ph { display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #2a2a33, #17171d);
  font-size: 1.35rem; box-shadow: 0 0 14px rgba(238,70,18,.4); }
.cab-mike-card { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem;
  margin-bottom: 1.1rem; background: linear-gradient(120deg, rgba(238,70,18,.12), transparent 60%), var(--cab-panel);
  border: 1px solid var(--cab-accent); border-radius: 14px; }
.cab-mike-card-body { flex: 1; min-width: 0; }
.cab-mike-name { font-weight: 700; letter-spacing: .02em; }
.cab-mike-card-blurb { font-size: .8rem; color: var(--cab-dim); margin-top: .15rem; }
.cab-mike-lb { align-items: flex-start; padding-top: 8vh; }
.cab-mike-panel { position: relative; width: min(560px, 92vw); background: var(--cab-panel);
  border: 1px solid var(--cab-accent); border-radius: 16px; padding: 1.2rem 1.3rem;
  box-shadow: 0 24px 90px rgba(0,0,0,.75); }
.cab-mike-head { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: .8rem; }
.cab-mike-intro { font-size: .82rem; color: var(--cab-dim); margin-top: .2rem; }
.cab-mike-dots { display: flex; gap: .35rem; margin: .3rem 0 .9rem; }
.cab-mike-dot { width: 9px; height: 9px; border-radius: 50%; background: #2c2c36; }
.cab-mike-dot-on { background: var(--cab-accent); box-shadow: 0 0 8px rgba(238,70,18,.7); }
.cab-mike-dot-done { background: #6b3222; }
.cab-mike-q { font-size: 1.15rem; font-weight: 700; margin-bottom: .8rem; }
.cab-mike-opts { display: flex; flex-direction: column; gap: .5rem; }
.cab-mike-opt { text-align: left; padding: .7rem .9rem; font-size: .95rem;
  background: #101014; color: var(--cab-text); border: 1px solid var(--cab-line);
  border-radius: 10px; cursor: pointer; }
.cab-mike-opt:hover { border-color: var(--cab-accent); background: #17171d; }
.cab-mike-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }
.cab-mike-tip { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem;
  margin: -0.4rem 0 1rem; background: rgba(238,70,18,.06);
  border: 1px dashed rgba(238,70,18,.45); border-radius: 10px; }
.cab-mike-tip .cab-mike-avatar { width: 30px; height: 30px; font-size: .95rem; }
.cab-mike-tip-text { flex: 1; font-size: .78rem; color: var(--cab-dim); }
.cab-mike-tip-x { background: none; border: 0; color: var(--cab-dim); font-size: 1rem; cursor: pointer; }
.cab-mike-summary { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem 1rem;
  margin-bottom: 1rem; background: rgba(238,70,18,.07);
  border: 1px solid var(--cab-accent); border-radius: 12px; }
.cab-mike-why { font-size: .8rem; color: var(--cab-text); margin-top: .3rem; }

/* ---------- round 13: compact review actions, 2-col presets, freight note ---------- */
.cab-review-actions { gap: .45rem; }
.cab-review-actions .cab-btn { padding: .5rem .75rem; font-size: .84rem; }
.cab-review-actions .cab-btn-big { padding: .6rem 1rem; font-size: .95rem; }
.cab-preset-row { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.cab-preset { max-width: none; width: auto; }
.cab-tier-note { margin-top: .35rem; font-size: .72rem; color: #ff6b5e; }
@media (max-width: 560px) { .cab-preset-row { grid-template-columns: 1fr; } }

/* ---------- round 14: oversized canvas layers center on the machine ---------- */
.cab-stage-underlay, .cab-stage-overlay { inset: auto; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 100%; height: 100%;
  object-fit: fill; max-width: none; }
.cab-stage-imgwrap { overflow: visible; }

/* ---------- round 15: exact layer alignment + shorter callout reach ---------- */
/* the wrapper must be EXACTLY the machine's rendered size, or every
   percentage-sized layer drifts. Shrink-wrap it and let the image be
   its natural shape. */
.cab-stage-imgwrap { display: inline-block; line-height: 0; max-width: 100%; }
.cab-stage-imgwrap .cab-stage-img { display: block; width: auto; height: auto;
  max-width: 100%; max-height: 520px; object-fit: unset; }
/* left rail: stop the connector lines short of the machine */
.cab-rail-left { max-width: 27%; width: 27%; }
@media (max-width: 920px) { .cab-rail-left { max-width: 34%; width: 34%; } }

/* ---------- round 16: sticky bar + CTA, top layer ---------- */
.cab-topbar { position: sticky; top: var(--cab-sticky-top, 92px); z-index: 120; background: #0b0b0ef2;
  backdrop-filter: blur(6px); padding: .55rem .25rem; margin: 0 -0.25rem;
  border-bottom: 1px solid var(--cab-line); }
.cab-bar-cta { margin-left: .7rem; padding: .45rem .95rem; font-size: .85rem; white-space: nowrap; }
.cab-topbar-right { display: flex; align-items: center; }
.cab-overlay-top { z-index: 4 !important; }

/* round 17: adjust if the site header height changes */
:root { --cab-sticky-top: 92px; }
@media (max-width: 920px) { :root { --cab-sticky-top: 64px; } }

/* ---------- round 18: toasts above the sticky bar ---------- */
.cab-toasts { z-index: 9500; }

/* ---------- round 19: toasts sit BELOW the sticky bar ---------- */
.cab-toasts { top: calc(var(--cab-sticky-top, 92px) + 72px) !important; z-index: 9500; }

/* ---------- round 21: tighter pills so the bar fits one line ---------- */
.cab-progress { gap: .3rem; }
.cab-pill { padding: .32rem .58rem; font-size: .74rem; }

/* ---------- round 24: side art + sale pricing ---------- */
.cab-bubble-side { width: 300px; max-width: 46%; }
.cab-opt-oldprice { color: var(--cab-dim); font-size: .8em; margin-right: .25rem; }

/* ---------- round 35: cabinet boxes, All Models, first-run glow ---------- */
/* the cabinet styles are the first real decision - make them read as
   buttons you're meant to press, not as quiet filter chips */
.cab-class-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .55rem; }
.cab-tab { font-size: .95rem; font-weight: 700; padding: .58rem .8rem; border-radius: 10px;
  white-space: nowrap;
  color: var(--cab-text); border: 1px solid var(--cab-line);
  background: linear-gradient(180deg, var(--cab-panel-2), var(--cab-panel));
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease; }
.cab-tab:hover { border-color: var(--cab-accent); transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0,0,0,.35); }
.cab-tab-active, .cab-nudge-group .cab-tab-active {
  background: var(--cab-accent); border-color: var(--cab-accent); color: #fff;
  box-shadow: 0 0 0 3px var(--cab-accent-soft); animation: none; }
/* the "everything at once" box sits apart from the three series */
.cab-tab-all { border-style: dashed; color: var(--cab-dim); }
.cab-tab-all:hover, .cab-tab-all.cab-tab-active { border-style: solid; }
.cab-class-prompt { color: var(--cab-text); font-weight: 600; }
.cab-model-grid-all { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* First-run glow: breathes on the cabinet row, then moves to the pill
   for the next step once a cabinet style is picked. */
@keyframes cab-pulse-group {
  0%, 100% { box-shadow: 0 0 0 0 rgba(238,70,18,0); }
  50%      { box-shadow: 0 0 20px 3px rgba(238,70,18,.42); }
}
@keyframes cab-pulse-tab {
  0%, 100% { border-color: var(--cab-line); background: linear-gradient(180deg, var(--cab-panel-2), var(--cab-panel)); }
  50%      { border-color: var(--cab-accent); background: linear-gradient(180deg, var(--cab-panel-2), var(--cab-accent-soft)); }
}
@keyframes cab-pulse-pill {
  0%, 100% { box-shadow: 0 0 0 0 rgba(238,70,18,0); border-color: var(--cab-line); color: var(--cab-dim); }
  50%      { box-shadow: 0 0 14px 2px rgba(238,70,18,.55); border-color: var(--cab-accent); color: var(--cab-text); }
}
.cab-nudge-group { border-radius: 12px; padding: .5rem; margin: -0.5rem -0.5rem .05rem;
  animation: cab-pulse-group 2.2s ease-in-out infinite; }
.cab-nudge-group .cab-tab { animation: cab-pulse-tab 2.2s ease-in-out infinite; }
.cab-pill-nudge { animation: cab-pulse-pill 2.2s ease-in-out infinite; }

/* Anyone who asked their system to stop animations gets the same
   emphasis, held steady instead of breathing. */
@media (prefers-reduced-motion: reduce) {
  .cab-nudge-group, .cab-nudge-group .cab-tab, .cab-pill-nudge { animation: none; }
  .cab-nudge-group { box-shadow: 0 0 16px 2px rgba(238,70,18,.34); }
  .cab-nudge-group .cab-tab { border-color: var(--cab-accent); }
  .cab-pill-nudge { border-color: var(--cab-accent); color: var(--cab-text); }
}

/* ---------- round 36: glow follows every section, then the CTA ---------- */
/* The section pills hand the glow along one at a time (see
   cab-pill-nudge, round 35). On the last section the build button
   picks it up, since putting the build in the cart is all that's left. */
@keyframes cab-pulse-cta {
  0%, 100% { box-shadow: 0 0 0 0 rgba(238,70,18,0); }
  50%      { box-shadow: 0 0 22px 4px rgba(238,70,18,.62); }
}
.cab-cta-nudge { animation: cab-pulse-cta 2.2s ease-in-out infinite; }
.cab-cta-nudge:hover, .cab-cta-nudge:focus-visible { animation: none;
  box-shadow: 0 0 22px 4px rgba(238,70,18,.62); }
.cab-cta-nudge:disabled { animation: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .cab-cta-nudge { animation: none; box-shadow: 0 0 18px 3px rgba(238,70,18,.5); }
}

/* ---------- round 37: Continue refused until a cabinet is picked ---------- */
/* the button kicks back and flashes red rather than silently doing
   nothing, so it reads as "not yet" instead of "broken" */
@keyframes cab-deny {
  0%           { transform: translateX(0); }
  15%          { transform: translateX(-5px); }
  30%          { transform: translateX(5px); }
  45%          { transform: translateX(-3px); }
  60%          { transform: translateX(3px); }
  75%, 100%    { transform: translateX(0); }
}
.cab-btn-deny { animation: cab-deny .45s ease-in-out;
  background: #c02414 !important; border-color: #ff5a3c !important; color: #fff !important;
  box-shadow: 0 0 18px 3px rgba(220,40,20,.6) !important; }

@media (prefers-reduced-motion: reduce) {
  .cab-btn-deny { animation: none; }
}

/* ---------- round 38: Expand strip, roomier dims, grouped tray ---------- */

/* The description used to be the toggle: clicking anywhere in it
   expanded the card instead of adding the upgrade, and on cards with
   long names that was most of the click area. Now the whole card adds
   or removes, and only this strip expands. The word sits between two
   carets with real gaps, and the gaps are part of the button. */
.cab-opt-desc { cursor: inherit; }
.cab-desc-toggle { display: inline-flex; align-items: center; gap: .55rem;
  margin-top: .25rem; padding: .18rem .55rem; border-radius: 7px;
  border: 1px solid transparent; line-height: 1; cursor: pointer;
  -webkit-user-select: none; user-select: none; }
.cab-desc-toggle:hover { background: rgba(238,70,18,.12); border-color: var(--cab-accent); }
.cab-desc-caret { font-size: .8rem; line-height: 1; }
/* included cards aren't clickable as a whole, so don't promise a press */
.cab-option-included { cursor: default; }
.cab-option-included .cab-desc-toggle { cursor: pointer; }

/* the dimension card in the corner of the preview, a size up */
.cab-stage-dims { font-size: .82rem; }

/* Upgrades are listed under the section that sells them, in pill
   order — see trayStepKey()/trayRow() in builder-app.js. */
.cab-tray-group { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--cab-accent); opacity: .9; margin: .75rem 0 .2rem; }
.cab-tray-title + .cab-tray-group { margin-top: .1rem; }
.cab-tray-group + .cab-tray-row { border-top: 0; }

@media (max-width: 920px) {
  .cab-stage-dims { font-size: .72rem; }
}

/* ---------- round 39: marquee glow, safer removes, games panel ---------- */

/* The live marquee preview was a dark box sitting on top of the
   machine's own marquee art. Same glowing letters, no box. */
.cab-stage-marquee { background: none; border: 0; box-shadow: none;
  min-width: 0; padding: .2rem .6rem; }

/* An added upgrade is taken back off with the Remove button only, so
   the card body no longer offers a press. */
.cab-card-selected { cursor: default; }
.cab-card-selected .cab-desc-toggle, .cab-card-selected .cab-btn-remove { cursor: pointer; }

/* The included game library, opened from the "and many more!" link */
.cab-games-link { text-decoration: underline dotted; cursor: help; }
.cab-games { position: fixed; inset: 0; z-index: 9992; background: rgba(8,8,10,.9);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.cab-games-panel { position: relative; background: var(--cab-panel);
  border: 1px solid var(--cab-line); border-radius: 14px;
  width: min(1100px, 100%); max-height: 86vh; display: flex; flex-direction: column;
  padding: 1.1rem 1.2rem 1rem; box-shadow: 0 24px 80px rgba(0,0,0,.8); }
.cab-games-x { position: absolute; top: .5rem; right: .6rem; width: 34px; height: 34px;
  border-radius: 50%; background: var(--cab-panel-2); border: 1px solid var(--cab-line);
  color: var(--cab-text); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.cab-games-x:hover { border-color: var(--cab-accent); }
.cab-games-title { font-size: 1.15rem; font-weight: 700; padding-right: 2.5rem; }
.cab-games-intro { color: var(--cab-dim); font-size: .86rem; margin: .25rem 0 .7rem; }
/* the scroller and the columns are separate boxes on purpose: a
   multicolumn box with a capped height spills sideways instead of
   scrolling, so the columns get their natural height and this
   wrapper does the scrolling */
.cab-games-body { overflow-y: auto; padding-right: .3rem;
  scrollbar-width: thin; scrollbar-color: #2c2c36 var(--cab-panel); }
.cab-games-body::-webkit-scrollbar { width: 8px; }
.cab-games-body::-webkit-scrollbar-thumb { background: #2c2c36; border-radius: 4px; }
.cab-games-cols { columns: 5 190px; column-gap: 1.4rem; }
.cab-games-group { margin-bottom: .9rem; }
.cab-games-group-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--cab-accent); margin-bottom: .2rem;
  /* a heading never gets stranded at the foot of a column */
  break-after: avoid-column; break-inside: avoid-column; }
.cab-games-group ul { list-style: none; margin: 0; padding: 0; }
.cab-games-group li { font-size: .8rem; line-height: 1.45; color: var(--cab-text); }
.cab-games-foot { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--cab-line);
  color: var(--cab-good); font-size: .82rem; }

@media (max-width: 920px) {
  .cab-games { padding: .6rem; }
  .cab-games-panel { max-height: 92vh; padding: 1rem .9rem .9rem; }
  .cab-games-cols { columns: 2 140px; column-gap: 1rem; }
  .cab-games-group li { font-size: .78rem; }
}

/* ---------- round 40: games line, remove from the review list ---------- */

/* The description link only appears once a card is expanded, so the
   card carries its own always-visible way in. */
.cab-games-btn { margin-top: .4rem; }

/* Review list: the × rides in on hover next to the price. The gap
   element holds its place on rows that have none (the machine,
   shipping), so nothing shifts sideways when it appears. */
.cab-review-right { display: flex; align-items: center; gap: .45rem; }
.cab-review-x, .cab-review-x-gap { width: 22px; height: 22px; flex: none; }
.cab-review-x { border-radius: 50%; border: 1px solid var(--cab-line);
  background: #4a1410; color: #ff9d8a; font-size: .95rem; line-height: 1;
  cursor: pointer; padding: 0; opacity: 0; transition: opacity .12s ease; }
.cab-review-line:hover .cab-review-x, .cab-review-x:focus-visible { opacity: 1; }
.cab-review-x:hover { background: #6a1c14; border-color: #7a2318; color: #fff; }

/* Touch has no hover, so there it is simply always there. */
@media (hover: none) {
  .cab-review-x { opacity: 1; }
}

/* ---------- round 42: the phone tap fix, minimize, game-list line ---------- */

/* NOTHING WAS TAPPABLE ON A PHONE. The toast container is
   position:fixed. Round 19 pinned its `top` with !important to keep
   toasts under the sticky bar, which also beat the `top: auto` in the
   narrow-screen block below 920px. That left top AND bottom AND left
   AND right all set, so the empty container stretched to 86% of the
   screen at z-index 9500 and swallowed every tap in the page body.
   Desktop never showed it: with no left/bottom the same box collapses
   to 0x0.
   Two fixes, either of which is enough on its own:
   1. the container never takes a pointer event, only the toasts in it;
   2. `top` goes back to auto on narrow screens, so toasts sit above
      the mobile bar where they were meant to. */
.cab-toasts { pointer-events: none; }
.cab-toast { pointer-events: auto; }
@media (max-width: 920px) {
  .cab-toasts { top: auto !important; }
}

/* Your upgrades: heading line carries the Minimize control */
.cab-tray-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; margin-bottom: .5rem; }
.cab-tray-head .cab-tray-title { margin-bottom: 0; }
.cab-tray-minimize { flex: none; background: none; border: 0; padding: .1rem .2rem;
  color: var(--cab-dim); font-size: .72rem; letter-spacing: .04em; cursor: pointer;
  font-family: inherit; }
.cab-tray-minimize:hover, .cab-tray-minimize:focus-visible { color: var(--cab-accent); }

/* Expand on the left of its line, the game list on the right */
.cab-desc-row { display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; flex-wrap: wrap; }
/* no bubble on this one — it shares the line with the Expand strip */
.cab-games-btn { margin-top: 0; flex: none; background: none; border: 0;
  padding: .18rem .3rem; color: var(--cab-accent); font-size: .74rem;
  text-decoration: underline dotted; }
.cab-games-btn:hover, .cab-games-btn:focus-visible {
  background: rgba(238,70,18,.12); border-radius: 7px; text-decoration: none; }

/* ---------- round 43: phone chrome, hero scaling, BETA ---------- */

/* THE SITE HEADER IS A FIXED 104px BAR ON PHONES, and --cab-sticky-top
   said 64px. So the builder's own sticky bar parked 40px UNDER it and
   the section pills sat at y=73 — behind the header, impossible to
   tap, on every screen after the first scroll. Measured on the live
   site: a pill's centre hit-tested to HEADER. 108px clears the header
   with a little air; everything keyed to this variable (the sticky
   bar, the hero, scroll targets) follows it. */
@media (max-width: 920px) {
  :root { --cab-sticky-top: 108px; }
}
/* jumping to a step must land below BOTH bars, not behind them */
.cab-shell { scroll-margin-top: calc(var(--cab-sticky-top, 92px) + 6px); }

/* The hero cleared 76px of chrome, which is fine against the desktop
   header and 28px short of the phone one — the title was rendering
   underneath it. Tie it to the same measurement, and let the title
   scale with the screen instead of holding 2.2rem on a 390px phone. */
@media (max-width: 920px) {
  .cab-hero { padding: calc(var(--cab-sticky-top, 92px) + 1.25rem) 1rem 1.1rem; }
  .cab-hero h1 { font-size: clamp(1.45rem, 7vw, 2.2rem); line-height: 1.15; }
  .cab-hero p { font-size: .92rem; line-height: 1.35; }
}

.cab-beta { color: var(--cab-accent); font-size: .5em; font-weight: 800;
  letter-spacing: .14em; vertical-align: .5em; margin-left: .3rem;
  text-shadow: 0 0 14px rgba(238,70,18,.5); }

/* Your upgrades goes LAST on a phone. Stacked, it used to sit between
   the machine photo and the step being worked on, so a long build had
   to be scrolled past to reach the next choice.
   Done in CSS, not JS: `display: contents` dissolves the preview
   column's own box on narrow screens so its three children become
   flex items of .cab-columns alongside the step panel, and `order`
   arranges them. The first attempt moved the element with JS on a
   breakpoint event — when that event didn't fire, the list ended up
   parented to a display:none slot and vanished. Layout that only
   holds if an event lands is layout that will eventually be missing.
   Desktop keeps the original DOM and the original order. */
@media (max-width: 920px) {
  .cab-columns { display: flex; flex-direction: column; align-items: stretch; }
  .cab-preview-col { display: contents; }
  .cab-stage { order: 1; }
  .cab-gallery-strip { order: 2; }
  .cab-step-col { order: 3; }
  .cab-spec-tray { order: 4; }

  /* THE PAGE DID NOT FIT THE PHONE. `.cab-columns` carries
     `align-items: start`, so its children sized to their content
     instead of the screen: the photo strip's ten 88px thumbs made the
     column 869px wide inside a 390px viewport — 503px of sideways
     scroll, which is what pushed the machine photo half off the right
     edge. `align-items: stretch` above puts every child back to the
     width of the screen, and the strip scrolls inside itself the way
     it was meant to. `min-width: 0` stops wide content forcing it open
     again — a flex item refuses to shrink under its content without
     it. (This one predates round 43; it was live.) */
  .cab-stage, .cab-gallery-strip, .cab-step-col, .cab-spec-tray { min-width: 0; }
}

/* ---------- round 44: pack artwork + per-pack game lists ---------- */

/* Some packs supply their title list as a picture rather than as text
   (includedGames.packs[].image). It scrolls inside the same panel. */
.cab-games-shot { display: flex; justify-content: center; }
.cab-games-shot img { display: block; max-width: 100%; height: auto;
  border-radius: 8px; background: #0d0d11; }
.cab-games-soon { color: var(--cab-dim); font-size: .9rem; padding: 1.5rem 0; text-align: center; }
.cab-games-soon a { color: var(--cab-accent); }

/* NOTE: card thumbnails stay `object-fit: cover` (52x52). The new pack
   artwork is between square and 4:3, so cover trims at most ~28% off
   the sides — the same treatment every other card gets, and the hover
   zoom shows the whole picture. Switching to `contain` for these would
   change every card on the site, so it is not done here. */

/* ---------- round 45: beta feedback ---------- */

/* The line sits BETWEEN the buttons and takes the leftover width, so
   it is centred in the row whether the step has two buttons or three.
   Deliberately quiet: it must not compete with Continue. */
.cab-feedback-line { flex: 1; align-self: center; text-align: center;
  font-size: .78rem; line-height: 1.3; color: var(--cab-dim); padding: 0 .5rem; }
.cab-feedback-link { background: none; border: 0; padding: 0; font: inherit;
  color: var(--cab-accent); text-decoration: underline dotted; cursor: pointer; }
.cab-feedback-link:hover, .cab-feedback-link:focus-visible { text-decoration: underline; }

.cab-feedback { position: fixed; inset: 0; z-index: 9994; background: rgba(8,8,10,.9);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.cab-feedback-panel { position: relative; background: var(--cab-panel);
  border: 1px solid var(--cab-line); border-radius: 14px; width: min(540px, 100%);
  max-height: 90vh; overflow-y: auto; padding: 1.2rem 1.3rem 1.1rem;
  box-shadow: 0 24px 80px rgba(0,0,0,.8); }
.cab-feedback-x { position: absolute; top: .5rem; right: .6rem; width: 34px; height: 34px;
  border-radius: 50%; background: var(--cab-panel-2); border: 1px solid var(--cab-line);
  color: var(--cab-text); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.cab-feedback-x:hover { border-color: var(--cab-accent); }
.cab-feedback-title { font-size: 1.1rem; font-weight: 700; padding-right: 2.5rem; }
.cab-feedback-intro { color: var(--cab-dim); font-size: .86rem; margin: .3rem 0 .9rem; }
.cab-feedback-label { display: block; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--cab-dim); margin: .7rem 0 .25rem; }
.cab-feedback-count { text-align: right; font-size: .72rem; color: var(--cab-dim); margin-top: .2rem; }
.cab-feedback-note { min-height: 1.1rem; margin-top: .6rem; font-size: .84rem; color: var(--cab-dim); }
.cab-feedback-bad { color: #ff9d8a; }
.cab-feedback-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .8rem; }
/* off-screen rather than display:none — a bot reading the DOM still
   finds it, a person never sees or tabs into it */
.cab-feedback-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- round 48: build number, one toast per message ---------- */

/* The build number rides at the far right of the step heading so a
   tester can say which version they were looking at. */
.cab-step-titlerow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.cab-step-titlerow .cab-step-title { flex: 1; min-width: 0; }
.cab-version { flex: none; font-size: .72rem; color: #6f6f7a; letter-spacing: .06em;
  white-space: nowrap; }

/* An identical message flashes instead of stacking a second copy. */
@keyframes cab-toast-again {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-5px); }
  35%      { transform: translateX(5px); }
  55%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}
.cab-toast-again { animation: cab-toast-again .45s ease-in-out;
  border-color: var(--cab-accent); box-shadow: 0 0 18px 3px rgba(238,70,18,.5); }

@media (prefers-reduced-motion: reduce) {
  /* no shake — the border and glow alone do the pointing */
  .cab-toast-again { animation: none; }
}

@media (max-width: 920px) {
  /* the version drops under the heading rather than squeezing it */
  .cab-step-titlerow { flex-wrap: wrap; }
  .cab-version { order: 99; }
  .cab-step-nav { flex-wrap: wrap; }
  .cab-feedback-line { order: 99; flex-basis: 100%; margin-top: .7rem; }
  /* a 16px-tall link is a poor thumb target; pad it out to ~36 */
  .cab-feedback-link { display: inline-block; padding: .5rem .25rem; }
  .cab-feedback-panel { padding: 1rem .9rem .9rem; }
}