.journey-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 12%, rgba(217, 119, 87, .1), transparent 28%),
    radial-gradient(circle at 82% 74%, rgba(121, 212, 208, .08), transparent 32%),
    #080a08;
}

.journey-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .4;
  background:
    linear-gradient(rgba(155, 226, 143, .025) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(155, 226, 143, .025) 1px, transparent 1px) 0 0 / 34px 34px;
  mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
}

.journey-shell {
  width: min(1480px, calc(100% - 32px));
  min-height: 100vh;
  display: grid;
  place-items: center;
}
.journey-header { min-height: 96px; }

/* The journey page is now a direct game launch, without portfolio chrome. */
.journey-header,
.journey-intro,
.drive-by,
.memory-popup-zone,
.route-map,
.journey-footer { display: none; }

.journey-main { width: 100%; margin: 0; display: block; }
.journey-play-layout { display: block; }
.arcade-console {
  width: 100%;
  min-height: min(92vh, 850px);
  padding: 10px;
  border-color: rgba(155,226,143,.23);
  background: rgba(4, 7, 5, .96);
}
.computer-rig {
  min-height: 0;
  padding: 0;
  display: block;
  overflow: visible;
  border: 0;
  background: none;
}
.computer-rig::after,
.cpu-tower,
.keyboard,
.mouse-rig,
.game-controls,
.crt-label,
.crt-lower,
.monitor-neck,
.monitor-foot,
.sound-toggle { display: none; }
.crt-unit { width: 100%; filter: none; }
.crt-case { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; }
.crt-screen-shell { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.game-stage {
  min-height: min(76vh, 760px);
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(155,226,143,.18);
  border-radius: 2px;
}
.touch-controls { display: none; }
@media (hover: none), (max-width: 720px) {
  .journey-body.is-running .touch-controls { display: flex; }
}

.landmark-popup {
  position: absolute;
  z-index: 8;
  top: 13%;
  right: 4%;
  width: min(330px, 40%);
  padding: 13px 15px;
  border: 1px solid rgba(230,184,108,.72);
  background: rgba(7, 10, 8, .9);
  box-shadow: 0 0 28px rgba(230,184,108,.12), inset 0 0 22px rgba(230,184,108,.05);
  color: var(--text);
  pointer-events: none;
}
.landmark-popup.is-showing { animation: landmark-hover 3.8s ease-in-out both; }
.landmark-popup::before {
  content: "★";
  position: absolute;
  right: 12px;
  top: 10px;
  color: #e6b86c;
  font: 500 18px var(--pixel);
  text-shadow: 0 0 11px rgba(230,184,108,.7);
}
.landmark-popup > span { display: block; margin-bottom: 5px; color: #e6b86c; font: 500 7px var(--pixel); letter-spacing: .1em; }
.landmark-popup b { display: block; max-width: calc(100% - 26px); color: var(--accent); font: 500 15px/1.05 var(--pixel); }
.landmark-popup p { margin: 6px 0 4px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.landmark-popup small { color: var(--faint); font-size: 7px; }
.landmark-popup .landmark-copy { margin: 8px 0 0; color: rgba(216,221,215,.72); font-size: 8px; line-height: 1.45; }
@keyframes landmark-hover {
  0% { opacity: 0; transform: translateY(16px) scale(.96); }
  12%, 82% { opacity: 1; transform: translateY(-4px) scale(1); }
  48% { transform: translateY(-10px) scale(1); }
  100% { opacity: 0; transform: translateY(-21px) scale(.98); }
}
@media (max-width: 560px) {
  .landmark-popup { top: 17%; right: 5%; width: 68%; padding: 9px 10px; }
  .landmark-popup b { font-size: 11px; }
  .landmark-popup p { font-size: 6px; }
}

.journey-nav-actions {
  display: flex;
  align-items: center;
  gap: 17px;
  color: var(--muted);
  font-size: 10px;
}

.journey-signal {
  display: flex;
  align-items: center;
  gap: 8px;
}

.journey-signal i,
.route-map .section-title > span i {
  width: 6px;
  height: 6px;
  display: block;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .72);
  animation: pulse 1.4s steps(2) infinite;
}

.journey-nav-actions button,
.memory-actions button {
  padding: 6px 11px;
  border: 1px solid var(--line-bright);
  color: var(--muted);
  background: rgba(8, 11, 9, .8);
  cursor: pointer;
}

.journey-nav-actions button:hover,
.memory-actions button:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.journey-main {
  display: grid;
  gap: 22px;
  margin-top: 22px;
}

.journey-intro {
  min-height: 126px;
  padding: 24px 27px;
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  align-items: end;
  gap: 48px;
}

.journey-eyebrow {
  margin: 0 0 6px;
  color: var(--faint);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.journey-intro h2,
.route-map h2 {
  margin: 0;
  color: var(--accent);
  font: 500 23px/1 var(--pixel);
}

.journey-intro > p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.drive-by {
  min-height: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  overflow: hidden;
  color: var(--faint);
  font: 500 7px var(--pixel);
  letter-spacing: .12em;
  white-space: nowrap;
}

.drive-by span:last-child { text-align: right; }
.drive-by b { color: #e6b86c; font-weight: 500; }
.drive-by i {
  height: 1px;
  min-width: 26px;
  background: linear-gradient(90deg, transparent, rgba(230,184,108,.7));
}
.drive-by i:nth-of-type(2) { background: linear-gradient(90deg, rgba(230,184,108,.7), transparent); }

.journey-play-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 22px;
}

.arcade-console {
  min-width: 0;
  padding: 12px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.012), rgba(255,255,255,0)),
    rgba(4, 7, 5, .96);
}

.game-topbar {
  min-height: 58px;
  padding: 4px 7px 11px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(120px, 24%) auto;
  align-items: center;
  gap: 14px;
}

.sound-toggle {
  padding: 5px 9px;
  border: 1px solid var(--line-bright);
  color: var(--muted);
  background: rgba(8, 11, 9, .8);
  font: 500 8px var(--pixel);
  cursor: pointer;
  white-space: nowrap;
}

.sound-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.game-title {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.game-title span {
  color: var(--orange);
  font: 500 9px var(--pixel);
}

.game-title b {
  overflow: hidden;
  color: var(--text);
  font: 500 13px var(--pixel);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.star-counter {
  padding: 5px 9px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(230, 184, 108, .32);
  color: #e6b86c;
  background: rgba(230, 184, 108, .045);
  font: 500 11px var(--pixel);
  box-shadow: inset 0 0 14px rgba(230, 184, 108, .035);
}

.star-counter > span {
  font-size: 16px;
  text-shadow: 0 0 11px rgba(230, 184, 108, .7);
}

.game-meter {
  display: grid;
  grid-template-columns: 1fr 34px;
  align-items: center;
  gap: 9px;
  color: var(--faint);
  font-size: 8px;
}

.game-meter i {
  height: 7px;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line-bright);
  background: #060806;
}

.game-meter i b {
  width: 0;
  height: 100%;
  display: block;
  background: linear-gradient(90deg, var(--orange), #e6b86c, var(--accent));
  box-shadow: 0 0 11px rgba(var(--accent-rgb), .62);
  transition: width .2s linear;
}

.game-meter em {
  color: var(--accent);
  font-style: normal;
  text-align: right;
}

.computer-rig {
  position: relative;
  min-height: 555px;
  padding: 18px 10px 2px;
  display: grid;
  grid-template-columns: 112px minmax(380px, 1fr) 78px;
  grid-template-rows: auto 118px;
  align-items: end;
  gap: 10px 16px;
  overflow: hidden;
  border: 1px solid #202820;
  background:
    radial-gradient(circle at 50% 20%, rgba(217, 119, 87, .08), transparent 34%),
    linear-gradient(180deg, #0b0d0c 0 75%, #14110f 75% 100%);
  perspective: 1000px;
}

.computer-rig::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 21px;
  height: 74px;
  z-index: 0;
  border-top: 1px solid rgba(217, 119, 87, .16);
  background:
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(217,119,87,.025) 31px 32px),
    linear-gradient(rgba(255,255,255,.018), transparent);
  transform: perspective(420px) rotateX(57deg);
  transform-origin: bottom;
}

.crt-unit {
  position: relative;
  z-index: 3;
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  width: 100%;
  filter: drop-shadow(10px 14px 10px rgba(0,0,0,.45));
}

.crt-case {
  position: relative;
  padding: 12px 13px 10px;
  border: 3px solid #171b18;
  border-radius: 20px 20px 28px 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), transparent 22%),
    #485049;
  box-shadow:
    inset 0 0 0 2px #616a62,
    inset -13px -13px 24px rgba(0,0,0,.2),
    0 0 0 1px #090b09;
  transform: rotateX(-1.4deg);
}

.crt-label {
  min-height: 18px;
  padding: 0 5px 4px;
  display: flex;
  justify-content: space-between;
  color: #1a211b;
  font: 500 7px var(--pixel);
  letter-spacing: .07em;
}

.crt-screen-shell {
  padding: 9px;
  border: 4px solid #171b18;
  border-radius: 22px / 12px;
  background: #070908;
  box-shadow: inset 0 0 18px #000, 0 1px 0 rgba(255,255,255,.2);
}

.game-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  border-radius: 15px / 9px;
  background: #070908;
  isolation: isolate;
  touch-action: none;
  transform: perspective(900px) rotateX(calc(var(--journey-scroll, 0) * -.5deg));
  transform-origin: 50% 70%;
  transition: transform .16s linear, box-shadow .25s ease;
  box-shadow: 0 calc(var(--journey-scroll, 0) * 12px) 25px rgba(0,0,0,.26);
}

#journey-canvas {
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  background: #080b09;
  image-rendering: pixelated;
  filter: saturate(1.14) contrast(1.05);
}

#journey-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }

.game-noise,
.game-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.game-noise {
  opacity: .25;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.045) 2px 3px),
    radial-gradient(circle, rgba(255,255,255,.16) 0 .5px, transparent .7px) 0 0 / 4px 4px;
  mix-blend-mode: soft-light;
}

.game-vignette {
  border-radius: inherit;
  box-shadow: inset 0 0 58px 14px rgba(0,0,0,.84);
}

.crt-lower {
  min-height: 42px;
  padding: 8px 8px 0;
  display: grid;
  grid-template-columns: 72px 1fr 78px;
  align-items: center;
  gap: 9px;
  color: #202620;
}

.crt-speaker {
  display: grid;
  grid-template-columns: repeat(5, 5px);
  gap: 4px;
}

.crt-speaker span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #171b18;
  box-shadow: inset 0 1px 1px #050605;
}

.crt-badge {
  font: 500 7px var(--pixel);
  text-align: center;
  text-transform: uppercase;
}

.crt-knobs {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 8px;
}

.crt-knobs i {
  width: 20px;
  height: 20px;
  border: 2px solid #171b18;
  border-radius: 50%;
  background: #717a72;
  box-shadow: inset 0 0 0 4px #363d37;
}

.crt-knobs b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 9px rgba(217,119,87,.8);
}

.monitor-neck {
  width: 68px;
  height: 26px;
  margin: -1px auto 0;
  border: 2px solid #171b18;
  background: #394039;
  box-shadow: inset 0 8px 12px rgba(0,0,0,.18);
}

.monitor-foot {
  width: 190px;
  height: 17px;
  margin: -1px auto 0;
  border: 2px solid #171b18;
  border-radius: 50% 50% 5px 5px;
  background: #434a43;
  box-shadow: 0 8px 12px rgba(0,0,0,.34);
}

.cpu-tower {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: end;
  width: 108px;
  height: 326px;
  margin-bottom: 26px;
  transform: rotateY(7deg);
  transform-style: preserve-3d;
}

.cpu-face {
  position: absolute;
  inset: 0 10px 0 0;
  padding: 15px 10px;
  border: 2px solid #161a17;
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 28%),
    #464d47;
  box-shadow: inset 0 0 0 2px #5b635c, 8px 10px 12px rgba(0,0,0,.35);
}

.cpu-side {
  position: absolute;
  right: 0;
  top: 8px;
  width: 12px;
  height: 306px;
  background: #282e29;
  transform: skewY(-34deg);
  transform-origin: left;
}

.cpu-brand {
  display: block;
  color: #1b211c;
  font: 500 9px var(--pixel);
  text-align: center;
}

.cpu-display {
  margin: 14px 0 20px;
  padding: 7px 4px;
  border: 2px inset #171a17;
  color: #9be28f;
  background: #111612;
  font: 7px var(--mono);
  text-shadow: 0 0 5px rgba(var(--accent-rgb), .6);
}

.drive-slot {
  height: 15px;
  margin: 0 3px 12px;
  display: block;
  border: 2px inset #2b302c;
  background: #242925;
}

.drive-slot.short { width: 64%; }

.cpu-vents {
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 7px);
  justify-content: center;
  gap: 5px;
}

.cpu-vents span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #171b18;
}

.cpu-power {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #1c211d;
  font: 6px var(--mono);
}

.cpu-power i {
  width: 10px;
  height: 10px;
  border: 2px solid #202520;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 9px rgba(var(--accent-rgb), .72);
}

.keyboard {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  width: 92%;
  height: 112px;
  margin: -3px auto 0;
  padding: 12px 15px;
  border: 3px solid #171b18;
  border-radius: 7px 7px 16px 16px;
  background: #4c534d;
  box-shadow: inset 0 0 0 2px #606861, 0 14px 18px rgba(0,0,0,.4);
  transform: perspective(420px) rotateX(43deg);
  transform-origin: top;
}

.key-row {
  height: 18px;
  display: flex;
  justify-content: center;
  gap: 4px;
}

.key-row.offset { padding-left: 11px; }
.key-row.offset-more { padding-left: 21px; }

.key-row i {
  min-width: 23px;
  height: 15px;
  padding: 2px 4px;
  border: 1px solid #171a17;
  border-radius: 2px;
  color: #8e978f;
  background: #252b26;
  box-shadow: inset 0 1px #3c443d, 0 2px 0 #111411;
  font: 6px var(--mono);
  text-align: center;
}

.key-row i.hot {
  color: #101510;
  background: var(--accent);
  box-shadow: 0 0 7px rgba(var(--accent-rgb), .32), 0 2px 0 #243d25;
}

.key-row i.wide { min-width: 47px; }
.key-row i.space { min-width: 82px; }

.mouse-rig {
  position: relative;
  z-index: 2;
  grid-column: 3;
  grid-row: 2;
  align-self: start;
  height: 112px;
  color: var(--faint);
  font-size: 6px;
  text-align: center;
}

.mouse-cord {
  position: absolute;
  left: 50%;
  top: -36px;
  width: 54px;
  height: 54px;
  border: 2px solid transparent;
  border-top-color: #343b35;
  border-left-color: #343b35;
  border-radius: 50%;
  transform: rotate(32deg);
}

.mouse {
  position: relative;
  width: 54px;
  height: 72px;
  margin: 18px auto 4px;
  border: 3px solid #171b18;
  border-radius: 48% 48% 42% 42%;
  background: #4c534d;
  box-shadow: inset 0 0 0 2px #626a63, 5px 8px 10px rgba(0,0,0,.34);
  transform: rotate(-8deg);
}

.mouse::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 36px;
  border-left: 1px solid #1c211d;
}

.mouse i {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 7px;
  height: 15px;
  border: 1px solid #171b18;
  border-radius: 4px;
  background: #242a25;
  transform: translateX(-50%);
}

.mouse span {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 34px;
  border-top: 1px solid #202520;
}

.game-hud {
  position: absolute;
  top: 10px;
  z-index: 5;
  min-width: 80px;
  padding: 6px 8px;
  border: 1px solid rgba(155, 226, 143, .2);
  color: var(--faint);
  background: rgba(4, 8, 5, .68);
  font-size: 6px;
  backdrop-filter: blur(3px);
}

.game-hud span { display: block; margin-bottom: 1px; letter-spacing: .08em; }
.game-hud strong { display: block; color: var(--accent); font: 500 10px var(--pixel); }
.game-hud-left { left: 10px; }
.game-hud-right { right: 10px; text-align: right; }
.game-hud-right strong { max-width: 160px; }
.game-hud-right em {
  display: block;
  margin-top: 4px;
  color: rgba(230,184,108,.72);
  font: 500 6px var(--pixel);
  font-style: normal;
  letter-spacing: .07em;
}

.game-hud .boost-label { margin-top: 4px; }

.boost-meter {
  width: 66px;
  height: 5px;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(121, 212, 208, .4);
  background: #060806;
}

.boost-meter b {
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #79d4d0, var(--accent));
  box-shadow: 0 0 8px rgba(121, 212, 208, .55);
  transition: width .12s linear;
}

.boost-meter b.is-low { background: linear-gradient(90deg, var(--orange), #e6b86c); }

.game-hud-score {
  left: 50%;
  min-width: 92px;
  text-align: center;
  transform: translateX(-50%);
}

.game-hud-score strong { font-size: 12px; }

.game-hud-score em {
  display: block;
  color: #e6b86c;
  font: 500 8px var(--pixel);
  font-style: normal;
  text-shadow: 0 0 8px rgba(230, 184, 108, .6);
  animation: prompt-bob .62s steps(2) infinite;
}

.game-hud-score b {
  display: block;
  margin-top: 1px;
  color: var(--faint);
  font: 7px var(--mono);
}

.interaction-prompt {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 7;
  padding: 5px 9px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e6b86c;
  color: #e6b86c;
  background: rgba(4, 8, 5, .84);
  font: 500 8px var(--pixel);
  transform: translateX(-50%);
  animation: prompt-bob .62s steps(2) infinite;
}

.interaction-prompt > span { text-shadow: 0 0 9px rgba(230,184,108,.8); }

.game-toast {
  position: absolute;
  left: 50%;
  top: 46px;
  z-index: 8;
  max-width: calc(100% - 40px);
  padding: 5px 9px;
  border-left: 2px solid var(--orange);
  color: #c9cec8;
  background: rgba(8, 11, 9, .88);
  font-size: 7px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.start-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 7, 5, .66);
  backdrop-filter: blur(4px);
  transition: opacity .25s linear, visibility .25s;
}

.start-overlay.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.start-terminal {
  width: min(440px, 100%);
  padding: 18px;
  border: 1px solid var(--line-bright);
  background: rgba(7, 10, 8, .95);
  box-shadow: 7px 7px 0 rgba(0,0,0,.4);
}

.start-terminal > p:first-child { margin-bottom: 11px; color: var(--accent); font-size: 7px; }
.start-terminal h3 { margin-bottom: 8px; color: var(--text); font: 500 18px/1.15 var(--pixel); }
.start-terminal > p:not(:first-child) { margin-bottom: 15px; color: var(--muted); font-size: 8px; }
.start-terminal button {
  padding: 7px 10px;
  border: 1px solid var(--accent);
  color: var(--text);
  background: rgba(var(--accent-rgb), .05);
  cursor: pointer;
}
.start-terminal button span { color: var(--accent); }
.start-terminal button:hover { background: rgba(var(--accent-rgb), .12); }

.finish-overlay {
  position: absolute;
  inset: 0;
  z-index: 13;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 7, 5, .72);
  backdrop-filter: blur(4px);
}

.finish-overlay[hidden] { display: none; }

.finish-terminal { border-color: #e6b86c; box-shadow: 7px 7px 0 rgba(0,0,0,.4), 0 0 38px rgba(230,184,108,.1); }
.finish-terminal > p:first-child { color: #e6b86c; }

.finish-stats {
  margin: 0 0 15px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
  list-style: none;
}

.finish-stats li {
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: rgba(8, 11, 9, .6);
}

.finish-stats span {
  display: block;
  color: var(--faint);
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.finish-stats b {
  color: #e6b86c;
  font: 500 13px var(--pixel);
}

.finish-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.finish-actions button {
  padding: 7px 10px;
  border: 1px solid var(--accent);
  color: var(--text);
  background: rgba(var(--accent-rgb), .05);
  cursor: pointer;
}

.finish-actions button:hover { background: rgba(var(--accent-rgb), .12); }
.finish-actions a { color: #e6b86c; font-size: 8px; }

.touch-controls {
  position: absolute;
  inset: auto 9px 8px;
  z-index: 8;
  display: none;
  align-items: end;
  justify-content: space-between;
  pointer-events: none;
}

.touch-controls button {
  border: 1px solid rgba(155, 226, 143, .35);
  color: rgba(216, 221, 215, .84);
  background: rgba(5, 9, 6, .72);
  pointer-events: auto;
  touch-action: none;
}

.touch-controls button.is-pressed {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), .16);
}

.touch-dpad {
  width: 82px;
  height: 82px;
  display: grid;
  grid-template-columns: repeat(3, 26px);
  grid-template-rows: repeat(3, 26px);
  gap: 2px;
}
.touch-dpad button { width: 26px; height: 26px; padding: 0; font-size: 9px; }
.touch-dpad [data-control="forward"] { grid-column: 2; grid-row: 1; }
.touch-dpad [data-control="left"] { grid-column: 1; grid-row: 2; }
.touch-dpad [data-control="back"] { grid-column: 2; grid-row: 2; }
.touch-dpad [data-control="right"] { grid-column: 3; grid-row: 2; }

.touch-action {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #e6b86c !important;
  font-size: 16px;
}

.game-controls {
  min-height: 36px;
  padding: 10px 7px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--faint);
  font-size: 7px;
}

.game-controls span { display: flex; align-items: center; gap: 5px; }

kbd {
  min-width: 21px;
  padding: 2px 5px;
  border: 1px solid var(--line-bright);
  color: var(--accent);
  background: #0b100c;
  font: 500 8px var(--mono);
  text-align: center;
  box-shadow: 0 2px 0 #020302;
}

.memory-popup-zone {
  position: sticky;
  top: 18px;
  min-width: 0;
}

.memory-standby {
  min-height: 250px;
  padding: 28px 22px;
  display: grid;
  place-content: center;
  justify-items: center;
  border-style: dashed;
  color: var(--muted);
  text-align: center;
  background: rgba(8, 11, 9, .55);
}

.memory-standby > span {
  color: #e6b86c;
  font: 500 58px/1 var(--pixel);
  text-shadow: 0 0 18px rgba(230,184,108,.22);
  animation: star-idle 1.2s steps(2) infinite;
}

.memory-standby p { margin: 15px 0 2px; font: 500 15px var(--pixel); }
.memory-standby small { color: var(--faint); font-size: 8px; }

.memory-panel {
  position: relative;
  width: 100%;
  padding: 25px 22px;
  border-color: #e6b86c;
  background:
    radial-gradient(circle at 82% 8%, rgba(230,184,108,.09), transparent 30%),
    rgba(6, 10, 7, .97);
  box-shadow: 9px 11px 0 rgba(0,0,0,.36), 0 0 42px rgba(230,184,108,.07);
}

.memory-panel.is-ejecting { animation: memory-eject .44s steps(7); }

.memory-panel::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  border: 1px dashed rgba(230,184,108,.14);
}

.memory-close {
  position: absolute;
  right: 12px;
  top: 9px;
  z-index: 2;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: none;
  font-size: 21px;
  cursor: pointer;
}
.memory-close:hover { color: #e6b86c; }

.memory-star {
  margin-bottom: 8px;
  color: #e6b86c;
  font: 500 41px/1 var(--pixel);
  text-shadow: 0 0 16px rgba(230,184,108,.65);
}

.memory-kicker {
  margin-bottom: 7px;
  color: var(--orange);
  font-size: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.memory-panel h3 {
  margin: 0 22px 5px 0;
  color: var(--accent);
  font: 500 23px/1.05 var(--pixel);
}

.memory-org { margin-bottom: 15px; color: #aeb5ae; font-size: 9px; }
.memory-copy { margin-bottom: 17px; color: var(--muted); font-size: 10px; }

.memory-tags {
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}

.memory-tags li {
  padding: 3px 6px;
  border: 1px solid var(--line);
  color: var(--faint);
  font-size: 7px;
}

.memory-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.memory-actions button { color: var(--accent); border-color: rgba(var(--accent-rgb), .45); }
.memory-actions a { color: #e6b86c; font-size: 8px; }

.route-map { padding: 25px 24px; }
.route-map .section-title { align-items: end; }
.route-map .section-title > span { display: flex; align-items: center; gap: 7px; }

.route-list {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  list-style: none;
  counter-reset: route;
}

.route-item {
  min-width: 0;
  border-bottom: 1px solid var(--line);
  counter-increment: route;
}

.route-item:not(:nth-child(3n)) { border-right: 1px solid var(--line); }

.route-item button {
  width: 100%;
  min-height: 78px;
  padding: 12px 13px;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 9px;
  border: 0;
  color: var(--muted);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.route-item button::before {
  content: "☆";
  color: var(--faint);
  font: 500 19px var(--pixel);
  text-align: center;
}

.route-item time { display: block; color: var(--faint); font-size: 8px; }
.route-item b {
  display: block;
  overflow: hidden;
  color: #737c74;
  font: 500 13px/1.2 var(--pixel);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-item button:hover,
.route-item.is-active button { background: rgba(var(--accent-rgb), .035); }

.route-item button:hover b,
.route-item.is-active b,
.route-item.is-reached b { color: var(--accent); }

.route-item.is-reached button::before {
  content: "★";
  color: #e6b86c;
  text-shadow: 0 0 9px rgba(230,184,108,.55);
}

.route-item.is-reached button::after {
  content: "memory unlocked";
  grid-column: 2;
  color: var(--faint);
  font-size: 7px;
}

.journey-footer {
  min-height: 72px;
  padding: 0 4px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  color: var(--faint);
  font-size: 9px;
}
.journey-footer b { font-weight: 400; }
.journey-footer > a { justify-self: end; }
.journey-footer > a:hover { color: var(--accent); }

@keyframes prompt-bob { 50% { transform: translate(-50%, -3px); } }
@keyframes star-idle { 50% { opacity: .42; transform: scale(.94); } }
@keyframes memory-eject {
  0% { opacity: 0; transform: translate(-34px, 8px) rotate(-2deg); }
  70% { opacity: 1; transform: translate(4px, -2px) rotate(.5deg); }
  100% { transform: none; }
}

@media (hover: none), (max-width: 720px) {
  .touch-controls { display: flex; }
  .interaction-prompt { bottom: 96px; }
}

@media (max-width: 1040px) {
  .journey-play-layout { grid-template-columns: 1fr; }
  .memory-popup-zone { position: static; }
  .memory-standby { min-height: 150px; }
  .memory-panel { max-width: 620px; margin: 0 auto; }
}

@media (max-width: 820px) {
  .journey-shell { width: min(720px, calc(100% - 24px)); padding-top: 12px; }
  .journey-header { align-items: flex-start; padding: 16px; }
  .journey-intro { grid-template-columns: 1fr; gap: 14px; padding: 21px 19px; }
  .drive-by { font-size: 6px; }
  .computer-rig {
    min-height: 500px;
    grid-template-columns: 76px minmax(280px, 1fr) 58px;
    grid-template-rows: auto 105px;
    gap: 8px;
  }
  .cpu-tower { width: 72px; height: 238px; margin-bottom: 28px; }
  .cpu-face { padding: 12px 7px; }
  .cpu-display { font-size: 5px; }
  .cpu-side { height: 220px; }
  .drive-slot { height: 10px; }
  .cpu-vents { grid-template-columns: repeat(3, 5px); gap: 4px; }
  .cpu-vents span { width: 5px; height: 5px; }
  .cpu-brand { font-size: 6px; }
  .cpu-power span { display: none; }
  .keyboard { width: 100%; height: 100px; padding: 10px 8px; }
  .key-row i { min-width: 18px; padding: 2px; }
  .key-row i.space { min-width: 58px; }
  .key-row i.wide { min-width: 36px; }
  .mouse { width: 44px; height: 62px; }
  .route-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-item:not(:nth-child(3n)) { border-right: 0; }
  .route-item:nth-child(odd) { border-right: 1px solid var(--line); }
}

@media (max-width: 560px) {
  .journey-header { flex-direction: column; }
  .journey-nav-actions { width: 100%; justify-content: space-between; }
  .journey-signal { font-size: 8px; }
  .drive-by { grid-template-columns: 1fr; min-height: 22px; text-align: center; }
  .drive-by span:first-child, .drive-by span:last-child, .drive-by i { display: none; }
  .arcade-console { padding: 6px; }
  .game-topbar {
    min-height: 68px;
    padding: 4px 4px 9px;
    grid-template-columns: 1fr auto auto;
    gap: 6px;
  }
  .game-title b { max-width: 150px; font-size: 11px; }
  .star-counter { padding: 4px 7px; }
  .game-meter { grid-column: 1 / -1; }
  .sound-toggle { padding: 4px 6px; font-size: 7px; }
  .game-hud-score { min-width: 74px; padding: 4px 5px; }
  .game-hud-score strong { font-size: 9px; }
  .boost-meter { width: 48px; height: 4px; }
  .computer-rig {
    min-height: 420px;
    padding: 12px 3px 0;
    grid-template-columns: 43px minmax(220px, 1fr) 38px;
    grid-template-rows: auto 82px;
    gap: 4px;
  }
  .crt-case { padding: 7px 7px 6px; border-radius: 14px 14px 19px 19px; }
  .crt-label { font-size: 5px; }
  .crt-screen-shell { padding: 5px; border-width: 3px; border-radius: 13px / 8px; }
  .crt-lower { min-height: 29px; padding-top: 5px; grid-template-columns: 38px 1fr 40px; }
  .crt-speaker { grid-template-columns: repeat(5, 3px); gap: 2px; }
  .crt-speaker span { width: 3px; height: 3px; }
  .crt-badge { font-size: 4px; }
  .crt-knobs { gap: 4px; }
  .crt-knobs i { width: 12px; height: 12px; border-width: 1px; }
  .monitor-neck { width: 42px; height: 17px; }
  .monitor-foot { width: 112px; height: 10px; }
  .cpu-tower { width: 41px; height: 175px; margin-bottom: 18px; }
  .cpu-face { right: 5px; padding: 7px 4px; border-width: 1px; }
  .cpu-side { right: 0; width: 6px; height: 164px; }
  .cpu-brand, .cpu-display, .drive-slot.short, .cpu-power span { display: none; }
  .drive-slot { height: 7px; margin: 12px 1px; border-width: 1px; }
  .cpu-vents { margin-top: 23px; grid-template-columns: repeat(2, 4px); gap: 3px; }
  .cpu-vents span { width: 4px; height: 4px; }
  .cpu-power { left: 8px; bottom: 9px; }
  .keyboard { height: 76px; padding: 7px 5px; border-width: 2px; }
  .key-row { height: 13px; gap: 2px; }
  .key-row i { min-width: 12px; height: 10px; padding: 1px; font-size: 4px; }
  .key-row i.space { min-width: 38px; }
  .key-row i.wide { min-width: 25px; }
  .mouse-rig small { display: none; }
  .mouse { width: 31px; height: 44px; border-width: 2px; }
  .mouse-cord { width: 30px; height: 34px; top: -22px; }
  .game-hud { top: 6px; min-width: 59px; padding: 4px 5px; font-size: 5px; }
  .game-hud-left { left: 6px; }
  .game-hud-right { right: 6px; }
  .game-hud strong { font-size: 8px; }
  .game-hud-right strong { max-width: 105px; }
  .game-hud-right em { display: none; }
  .start-overlay { padding: 9px; }
  .start-terminal { padding: 12px; }
  .start-terminal h3 { font-size: 14px; }
  .start-terminal > p:not(:first-child) { font-size: 6px; }
  .game-controls { display: none; }
  .memory-panel { padding: 22px 18px; }
  .route-map { padding: 21px 15px; }
  .route-map .section-title > span { display: none; }
  .route-list { grid-template-columns: 1fr; }
  .route-item:nth-child(odd) { border-right: 0; }
  .route-item button { min-height: 67px; }
  .journey-footer { grid-template-columns: 1fr auto; }
  .journey-footer .footer-status { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .interaction-prompt,
  .memory-standby > span,
  .memory-panel.is-ejecting { animation: none; }
}

/* Keep the page itself as the game viewport at every breakpoint. */
.journey-header,
.journey-intro,
.drive-by,
.memory-popup-zone,
.route-map,
.journey-footer { display: none !important; }
.journey-main { width: 100%; margin: 0; display: block; }
.journey-play-layout { display: block; }
.arcade-console { width: 100%; min-height: min(92vh, 850px); padding: 10px; }
.computer-rig { min-height: 0; padding: 0; display: block; overflow: visible; border: 0; background: none; }
.computer-rig::after,
.cpu-tower,
.keyboard,
.mouse-rig,
.game-controls,
.crt-label,
.crt-lower,
.monitor-neck,
.monitor-foot,
.sound-toggle { display: none; }
.crt-unit { width: 100%; filter: none; }
.crt-case { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; }
.crt-screen-shell { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.game-stage { min-height: min(76vh, 760px); aspect-ratio: 16 / 9; border: 1px solid rgba(155,226,143,.18); border-radius: 2px; }
.touch-controls { display: none; }
@media (hover: none), (max-width: 720px) {
  .journey-body.is-running .touch-controls { display: flex; }
}