/* Games page (/beyond/retro-gaming/) — Clean-Room Disassembly identity.
   Aligned with Contact (/contact/), About (/about/), and Beyond (/beyond/):
   dark coordinate-grid split hero with viewport inspector, sharp 0px architectural panels,
   10px seams, numbered engineering steps, and responsive touch-ready interactive solvers. */

.retro-page{
  --rt-accent:var(--t-ink-link,#2ee6b8);
  --rt-seam:10px;
  background:var(--t-page);
  color:var(--fg);
  font:400 1.0625rem/1.55 var(--disp);
  overflow-x:clip;
}
body:has(.retro-page) .foot{margin-top:0}

.rt-wrap{
  max-width:1160px;
  margin:0 auto;
  position:relative;
}
.rt-band{
  position:relative;
  padding:clamp(3.75rem,7.5vw,6.25rem) 1.25rem;
  scroll-margin-top:64px;
}
.rt-band-page{
  background:var(--t-page);
}
.rt-band-soft{
  background:var(--t-soft);
  border-top:1px solid color-mix(in srgb,var(--fg) 10%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--fg) 10%,transparent);
}
.rt-band-dark{
  background:#0a0d14;
  color:#f2f4f8;
  border-top:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.09);
}
[data-theme=neon] .rt-band-dark{
  background:#0c1018;
}

/* ---------- 1. Hero & Clean-Room Viewport Inspector ---------- */
.rt-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#08090d;
  color:#f2f4f8;
  padding:clamp(3.5rem,7.5vw,6rem) 1.25rem clamp(3.5rem,7vw,5.5rem);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.rt-hero::before{
  content:"";
  position:absolute;
  inset:-20%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(55% 50% at 76% 38%,color-mix(in srgb,var(--rt-accent) 18%,transparent),transparent 72%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px;
}

.rt-hero-in{
  max-width:1160px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(2rem,4.5vw,4rem);
  align-items:center;
}
.rt-hero-copy{min-width:0}

.rt-prompt{
  margin:0 0 .85rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem;
  font:500 1rem/1.25 var(--mono);
  color:#9aa3b2;
  overflow-wrap:anywhere;
}
.rt-prompt a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-block:-8px;
  color:#f2f4f8;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.35);
  transition:color .18s,text-decoration-color .18s;
}
.rt-prompt a:hover{
  color:var(--rt-accent);
  text-decoration-color:var(--rt-accent);
}
.rt-prompt span{
  color:var(--rt-accent);
}

.rt-title{
  margin:0;
  max-width:15.5ch;
  font:700 clamp(2.25rem,4.8vw,3.95rem)/1.02 var(--disp);
  letter-spacing:-.046em;
  color:#f2f4f8;
  text-wrap:balance;
}
.rt-lede{
  margin:1.25rem 0 0;
  max-width:40ch;
  font:400 clamp(1.06rem,1.45vw,1.24rem)/1.48 var(--disp);
  color:#c4cad6;
}

.rt-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:1.85rem 0 0;
}
.rt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:.72rem 1.5rem;
  border-radius:999px;
  background:var(--rt-accent);
  border:1px solid var(--rt-accent);
  color:#06100d;
  font:600 .98rem/1.15 var(--disp);
  letter-spacing:-.01em;
  text-decoration:none;
  cursor:pointer;
  transition:filter .2s,transform .2s,background .2s,border-color .2s;
}
.rt-btn:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
  text-decoration:none;
}
.rt-btn.alt{
  background:transparent;
  color:#f2f4f8;
  border-color:rgba(255,255,255,.32);
}
.rt-btn.alt:hover{
  filter:none;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.55);
  color:#fff;
}

/* Viewport Inspector & Clean-Room Window Chrome */
.rt-inspector,
.rt-win{
  min-width:0;
  background:#0d1018;
  border:1px solid rgba(255,255,255,.14);
  border-radius:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 24px 54px -26px rgba(0,0,0,.78);
  color:#f2f4f8;
  overflow:hidden;
}
.rt-win-bar{
  display:flex;
  align-items:center;
  gap:.55rem;
  min-width:0;
  padding:.62rem 1rem;
  background:#121622;
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
  font:500 .78rem/1.2 var(--mono);
  color:#c7cedf;
}
.rt-win-bar i{
  flex:none;
  width:7px;
  height:7px;
  border-radius:1.5px;
  background:var(--rt-accent);
  box-shadow:0 0 8px rgba(46,230,184,.6);
}
.rt-win-bar span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.rt-win-tag{
  margin-left:auto;
  flex:none;
  padding:.2rem .46rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:4px;
  font:600 .72rem/1 var(--mono);
  letter-spacing:.08em;
  color:rgba(242,244,248,.56);
}

.rt-viewport{
  background:#050609;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.rt-viewport img.rt-pixel{
  display:block;
  width:100%;
  max-height:280px;
  aspect-ratio:4/3;
  object-fit:cover;
  image-rendering:pixelated;
  border-radius:0;
}

.rt-specs{
  display:flex;
  flex-direction:column;
  padding:.25rem 1rem;
}
.rt-spec-row{
  display:grid;
  grid-template-columns:7rem minmax(0,1fr);
  gap:.75rem;
  align-items:baseline;
  padding:.48rem 0;
  border-bottom:1px dotted rgba(255,255,255,.15);
}
.rt-spec-row:last-child{border-bottom:0}
.rt-k{
  font:500 .76rem/1.25 var(--mono);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#8f98ad;
}
.rt-v{
  min-width:0;
  font:500 .88rem/1.35 var(--mono);
  color:#e8ecf5;
  overflow-wrap:anywhere;
}

.rt-win-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.55rem 1rem;
  padding:.55rem 1rem;
  background:#101420;
  border-top:1px solid rgba(255,255,255,.09);
}
.rt-win-credit{
  font:500 .78rem/1.25 var(--mono);
  color:#8f98ad;
}
.rt-win-credit cite{font-style:normal;color:#c7cedf}

.rt-crt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:44px;
  padding:0 .9rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.04);
  color:#dce2ef;
  font:500 .8rem/1 var(--mono);
  cursor:pointer;
  transition:border-color .2s,background .2s,color .2s;
}
.rt-crt-btn:hover{
  border-color:rgba(255,255,255,.55);
  color:#fff;
}
.rt-crt-btn[aria-pressed="true"]{
  border-color:var(--rt-accent);
  background:rgba(46,230,184,.16);
  color:#fff;
}
.rt-crt-dot{
  flex:none;
  width:7px;
  height:7px;
  border-radius:1.5px;
  background:rgba(255,255,255,.4);
}
.rt-crt-btn[aria-pressed="true"] .rt-crt-dot{
  background:var(--rt-accent);
  box-shadow:0 0 8px var(--rt-accent);
}

/* ---------- Shared Section Headings ---------- */
.rt-sec-head{
  margin:0 0 clamp(1.85rem,3.6vw,2.75rem);
}
.rt-meta{
  margin:0 0 .55rem;
  font:500 .9rem/1.3 var(--mono);
  color:var(--muted);
}
.rt-meta span{
  color:var(--t-link);
  font-weight:600;
}
.rt-h{
  margin:0;
  max-width:22ch;
  font:700 clamp(2.05rem,4.5vw,3.35rem)/1.04 var(--disp);
  letter-spacing:-.038em;
  color:var(--fg);
  text-wrap:balance;
}
.rt-sub{
  margin:.75rem 0 0;
  max-width:48ch;
  font:400 clamp(1.05rem,1.45vw,1.22rem)/1.46 var(--disp);
  color:var(--muted);
}

.rt-band-dark .rt-meta{color:#9aa3b2}
.rt-band-dark .rt-meta span{color:var(--rt-accent)}
.rt-band-dark .rt-h{color:#f2f4f8}
.rt-band-dark .rt-sub{color:#c4cad6}

/* ---------- Band 1: Two-Column Editorial & Fixed-Camera Corridor ---------- */
.rt-prose-cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.25rem,3vw,2.5rem);
  margin:0 0 clamp(2rem,4vw,2.75rem);
  padding-top:1.35rem;
  border-top:1px solid color-mix(in srgb,var(--fg) 14%,transparent);
}
.rt-prose-cols p{
  margin:0;
  max-width:54ch;
  font:400 1.02rem/1.62 var(--body);
  color:var(--muted);
}
.rt-prose-cols cite{color:var(--fg);font-style:italic}

.cam-toy{
  width:100%;
  max-width:100%;
  margin:0;
  border-radius:0;
  background:var(--t-soft);
  border:1px solid color-mix(in srgb,var(--fg) 14%,transparent);
  box-shadow:var(--t-spec,inset 0 1px 0 rgba(255,255,255,.08));
  text-align:left;
}
.cam-toy .toy-head{
  padding:.95rem 1.25rem;
  border-bottom:1px solid color-mix(in srgb,var(--fg) 12%,transparent);
  background:color-mix(in srgb,var(--fg) 3%,var(--t-soft));
}
.cam-head-copy{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  min-width:0;
}
.cam-kicker{
  font:600 .74rem/1.2 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--t-link);
}
.cam-toy .toy-head h3{
  margin:0;
  font:700 clamp(1.25rem,2vw,1.55rem)/1.18 var(--disp);
  letter-spacing:-.022em;
  color:var(--fg);
}
.cam-toy .toy-head .toy-tag{
  border-radius:4px;
  padding:.26rem .55rem;
  background:var(--t-page);
  border:1px solid color-mix(in srgb,var(--fg) 14%,transparent);
  font:600 .72rem/1.1 var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.cam-toy .toy-body{
  padding:1.25rem;
}
.cam-toy .toy-stage{
  max-width:820px;
  margin:0;
  border-radius:0;
  border:1px solid color-mix(in srgb,var(--fg) 16%,transparent);
}
.cam-toy canvas{
  touch-action:pan-y;
}
#cam-canvas:focus-visible{
  outline:2px dashed var(--t-link);
  outline-offset:-4px;
}

.cam-toy .toy-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.55rem;
  margin-top:1rem;
}
.cam-pad{
  display:grid;
  grid-template-columns:repeat(4,auto);
  gap:.4rem;
}
.cam-toy .toy-modes{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.cam-toy .toy-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  min-width:44px;
  padding:0 .95rem;
  border-radius:999px;
  background:var(--t-page);
  color:var(--fg);
  border:1px solid color-mix(in srgb,var(--fg) 22%,transparent);
  font:500 .84rem/1 var(--mono);
  cursor:pointer;
  transition:border-color .16s,background .16s,color .16s;
}
.cam-pad .toy-btn{
  padding:0;
  width:46px;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.cam-toy .toy-btn:hover{
  border-color:var(--t-link);
  color:var(--t-link);
}
.cam-toy .toy-btn[aria-pressed="true"],
.cam-toy .toy-btn.on{
  background:var(--t-link);
  border-color:var(--t-link);
  color:#fff;
  font-weight:600;
}
[data-theme=neon] .cam-toy .toy-btn[aria-pressed="true"],
[data-theme=neon] .cam-toy .toy-btn.on{
  color:#06100d;
}
.cam-pad .toy-btn.is-held{
  border-color:var(--t-link);
  color:var(--t-link);
  background:color-mix(in srgb,var(--t-link) 14%,var(--t-page));
}
.cam-toy .toy-read{
  margin:1rem 0 0;
  font:600 .84rem/1.4 var(--mono);
  color:var(--t-link);
}
.cam-toy .toy-cap{
  margin:.45rem 0 0;
  max-width:68ch;
  font:400 .96rem/1.58 var(--body);
  color:var(--muted);
}

/* ---------- Numbered 3-Column Steps (Band 2 & Band 4) ---------- */
.rt-steps{
  list-style:none;
  counter-reset:rtstep;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
}
.rt-steps li{
  counter-increment:rtstep;
  padding-top:1.15rem;
  border-top:1px solid color-mix(in srgb,var(--fg) 22%,transparent);
  min-width:0;
}
.rt-steps li::before{
  content:counter(rtstep,decimal-leading-zero);
  display:block;
  margin-bottom:.75rem;
  font:600 .92rem/1 var(--mono);
  letter-spacing:.08em;
  color:var(--t-link);
}
.rt-steps h3{
  margin:0 0 .55rem;
  font:700 clamp(1.25rem,1.8vw,1.5rem)/1.18 var(--disp);
  letter-spacing:-.022em;
  color:var(--fg);
}
.rt-steps p{
  margin:0;
  font:400 1rem/1.58 var(--body);
  color:var(--muted);
}
.rt-steps code{
  font:500 .88em var(--mono);
  padding:.1rem .34rem;
  background:color-mix(in srgb,var(--fg) 8%,transparent);
}

.rt-steps-dark li{
  border-top-color:rgba(255,255,255,.2);
}
.rt-steps-dark li::before{
  color:var(--rt-accent);
}
.rt-steps-dark h3{
  color:#f2f4f8;
}
.rt-steps-dark p{
  color:#c3cadb;
}
.rt-steps-dark code{
  background:rgba(255,255,255,.08);
  color:#e8ecf5;
}

/* ---------- Band 2: RE2R Scene Patch Window & Lock-and-Key Solver ---------- */
.rt-fig{
  margin:clamp(2.25rem,4.5vw,3.25rem) 0 0;
  display:flex;
  flex-direction:column;
  gap:.65rem;
}
.rt-win img{
  display:block;
  width:100%;
  height:auto;
}
.rt-cap{
  margin:0;
  font:400 .82rem/1.5 var(--mono);
  color:var(--muted);
}
.rt-band-dark .rt-cap{
  color:#9aa3b2;
}
.rt-band-dark .rt-cap code{
  color:#dce2ef;
}

.rt-rando{
  width:100%;
  min-width:0;
  margin:clamp(1.5rem,3vw,2.25rem) 0 0;
  padding:clamp(1.35rem,3vw,2.2rem);
  border-radius:0;
  background:#0d1018;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 24px 54px -26px rgba(0,0,0,.78);
  color:#f2f4f8;
  text-align:left;
}
.rt-rando-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.85rem 1rem;
  padding-bottom:1.1rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.rt-rando-kicker{
  display:block;
  font:600 .74rem/1.2 var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--rt-accent);
  margin-bottom:.25rem;
}
.rt-rando-head h3{
  margin:0;
  font:700 clamp(1.35rem,2.4vw,1.75rem)/1.15 var(--disp);
  letter-spacing:-.02em;
  color:#f2f4f8;
}
.rt-rando-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
}
.rt-seed-pill{
  padding:.32rem .75rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  font:500 .78rem/1.2 var(--mono);
  color:#9aa3b2;
}
.rt-seed-pill code{
  font-weight:700;
  color:#f2f4f8;
}
.rt-rando-badge{
  padding:.34rem .8rem;
  border-radius:999px;
  font:700 .74rem/1.2 var(--mono);
  letter-spacing:.05em;
}
.rt-rando-badge.is-ok{
  background:rgba(46,230,184,.16);
  color:#2ee6b8;
  border:1px solid rgba(46,230,184,.42);
}
.rt-rando-badge.is-dead{
  background:rgba(255,69,58,.16);
  color:#ff6961;
  border:1px solid rgba(255,69,58,.45);
}
.rt-rando-sub{
  margin:1rem 0 1.25rem;
  max-width:68ch;
  font:400 .96rem/1.55 var(--body);
  color:#c3cadb;
}

.rt-rando-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--rt-seam);
  align-items:stretch;
}
.rt-rando-map-wrap{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:1rem;
  border-radius:0;
  background:#07090e;
  border:1px solid rgba(255,255,255,.1);
  overflow:hidden;
}
.rt-rando-svg{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  height:auto;
}
.rt-map-hint{
  margin:.65rem 0 0;
  font:400 .76rem/1.4 var(--mono);
  color:#9aa3b2;
  text-align:center;
}

.rt-rooms{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:var(--rt-seam);
}
.rt-room{
  position:relative;
  min-width:0;
  min-height:48px;
  padding:.75rem .95rem;
  border-radius:0;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  display:flex;
  flex-direction:column;
  gap:.32rem;
  cursor:pointer;
  user-select:none;
  transition:border-color .18s,background .18s;
}
.rt-room:hover{
  border-color:var(--rt-accent);
}
.rt-room:focus-visible{
  outline:2px solid var(--rt-accent);
  outline-offset:2px;
}
.rt-room.is-reached{
  border-color:rgba(46,230,184,.45);
}
.rt-room.is-locked{
  border-style:dashed;
  border-color:rgba(255,69,58,.55);
  background:rgba(255,69,58,.05);
}
.rt-room.is-selected{
  border-color:#f5a623;
  background:rgba(245,166,35,.12);
  box-shadow:0 0 0 2px rgba(245,166,35,.28);
}
.rt-room-top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.35rem .5rem;
}
.rt-room-step{
  font:700 .74rem/1 var(--mono);
  padding:.2rem .44rem;
  border-radius:0;
  background:rgba(46,230,184,.16);
  color:#2ee6b8;
}
.rt-room.is-locked .rt-room-step{
  background:rgba(255,69,58,.16);
  color:#ff6961;
}
.rt-room-name{
  font:600 .94rem/1.2 var(--disp);
  color:#f2f4f8;
}
.rt-room-req{
  margin-left:auto;
  font:500 .74rem/1.2 var(--mono);
  color:#9aa3b2;
}
.rt-room-loot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.25rem .5rem;
  font:400 .8rem/1.35 var(--mono);
  color:#9aa3b2;
}
.rt-room-loot b{
  color:#64d2ff;
  font-weight:600;
}
.rt-room-swap-tag{
  font:500 .7rem/1.2 var(--mono);
  color:#9aa3b2;
}
.rt-room.is-selected .rt-room-swap-tag{
  color:#ffd60a;
  font-weight:700;
}

.rt-rando-trace{
  margin-top:var(--rt-seam);
  padding:.78rem 1rem;
  border-radius:0;
  background:rgba(255,255,255,.05);
  border-left:3px solid var(--rt-accent);
  font:400 .85rem/1.55 var(--mono);
  color:#f2f4f8;
  overflow-wrap:anywhere;
}
.rt-rando-trace.is-dead{
  border-left-color:#ff453a;
}

.rt-rando-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.65rem;
  margin-top:1.25rem;
}
.rt-rando-foot{
  margin:1.1rem 0 0;
  padding-top:.85rem;
  border-top:1px solid rgba(255,255,255,.1);
  font:400 .82rem/1.5 var(--mono);
  color:#9aa3b2;
}
.rt-rando-foot code{
  color:#dce2ef;
}

/* ---------- Band 3: 2x2 Architectural Card Grid ---------- */
.rt-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--rt-seam);
}
.rt-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:clamp(1.45rem,2.8vw,2.1rem);
  border-radius:0;
  background:var(--t-card,var(--t-page));
  border:1px solid color-mix(in srgb,var(--fg) 12%,transparent);
  box-shadow:var(--t-spec,inset 0 1px 0 rgba(255,255,255,.08));
  color:var(--fg);
}
.rt-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}
.rt-idx{
  font:500 .84rem/1.3 var(--mono);
  color:var(--muted);
  overflow-wrap:anywhere;
}
.rt-idx span{
  color:var(--t-link);
  font-weight:600;
}
.rt-card h3{
  margin:0;
  font:700 clamp(1.4rem,2.4vw,1.88rem)/1.12 var(--disp);
  letter-spacing:-.028em;
  color:var(--fg);
  overflow-wrap:anywhere;
}
.rt-card p{
  margin:.65rem 0 0;
  max-width:46ch;
  font:400 1rem/1.58 var(--body);
  color:var(--muted);
}
.rt-card-act{
  margin-top:auto;
  padding-top:1.1rem;
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  min-height:44px;
  gap:.38rem;
  font:600 .96rem/1.2 var(--disp);
  color:var(--t-link);
  text-decoration:none;
}
.rt-card-act:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}
.rt-card-act i{
  font-style:normal;
  font-family:var(--mono);
  transition:transform .2s;
}
.rt-card-act:hover i{
  transform:translate(2px,-1px);
}

/* ---------- Closing Explore Strip ---------- */
.rt-next{
  padding-block:clamp(1.5rem,3vw,2.25rem);
  background:var(--t-page);
  border-top:1px solid color-mix(in srgb,var(--fg) 10%,transparent);
}
.rt-next-in{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.75rem 2rem;
}
.rt-next-label{
  font:500 1rem/1.3 var(--disp);
  color:var(--muted);
}
.rt-next-links{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1.75rem;
}
.rt-next-links a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font:600 1.05rem/1.2 var(--disp);
  color:var(--t-link);
  text-decoration:none;
}
.rt-next-links a::after{
  content:"\00a0\2192";
  font-family:var(--mono);
  transition:transform .2s;
}
.rt-next-links a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}
.rt-next-links a:hover::after{
  transform:translateX(3px);
}

/* ---------- Focus & Scroll Motion ---------- */
.retro-page :is(a,button):focus-visible{
  outline:2px solid var(--rt-accent);
  outline-offset:3px;
}

@media (prefers-reduced-motion:no-preference){
  .rt-motion .rt-media{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .55s var(--ease,ease),transform .55s var(--ease,ease);
  }
  .rt-motion .rt-media.in-view{
    opacity:1;
    transform:none;
  }
}
.rt-motion .rt-media:focus,
.rt-motion .rt-media:focus-within{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
}

/* ---------- Responsive (Tablet, 390px, 360px, 320px) ---------- */
@media (max-width:960px){
  .rt-hero-in{
    grid-template-columns:minmax(0,1fr);
  }
  .rt-title{
    max-width:18ch;
  }
  .rt-steps{
    grid-template-columns:minmax(0,1fr);
    gap:1.65rem;
  }
  .rt-rando-grid{
    grid-template-columns:minmax(0,1fr);
  }
}

@media (max-width:820px){
  .rt-prose-cols{
    grid-template-columns:minmax(0,1fr);
    gap:1rem;
  }
}

@media (max-width:740px){
  .rt-grid{
    grid-template-columns:minmax(0,1fr);
  }
}

@media (max-width:560px){
  .rt-hero,
  .rt-band{
    padding-inline:1rem;
  }
  .rt-spec-row{
    grid-template-columns:minmax(0,1fr);
    gap:.2rem;
  }
  .rt-win-tag{
    display:none;
  }
  .rt-cta .rt-btn,
  .rt-rando-actions .rt-btn{
    flex:1 1 auto;
  }
  .cam-toy .toy-head,
  .cam-toy .toy-body{
    padding:.9rem;
  }
  .rt-rando{
    padding:1.1rem .9rem;
  }
  .rt-rando-map-wrap{
    padding:.65rem;
  }
}

@media (max-width:400px){
  .rt-title{
    font-size:clamp(1.9rem,8.4vw,2.25rem);
  }
  .rt-h{
    font-size:clamp(1.75rem,7.8vw,2.05rem);
  }
}

@media (prefers-reduced-motion:reduce){
  .rt-motion .rt-media,
  .rt-btn,
  .rt-card-act i,
  .rt-next-links a::after{
    transition:none;
    opacity:1;
    transform:none;
  }
}

@media print{
  .rt-hero,.rt-band-dark,.rt-inspector,.rt-win,.rt-rando,.rt-win-bar,.rt-win-foot{
    background:none!important;
    color:#000!important;
    box-shadow:none!important;
    border-color:#ccc!important;
  }
  .rt-title,.rt-lede,.rt-band-dark .rt-h,.rt-band-dark .rt-sub,.rt-steps-dark h3,.rt-steps-dark p{
    color:#000!important;
  }
  .rt-motion .rt-media{opacity:1!important;transform:none!important}
}

/* usage numbers in the hero */
.rt-stats{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.5rem;max-width:30rem}
.rt-stats li{padding:.8rem 0 1rem;border-top:1px solid rgba(255,255,255,.16)}
.rt-stats li:last-child:nth-child(odd){grid-column:1/-1}
.rt-stats b{display:block;font:700 clamp(1.6rem,2.8vw,2.3rem)/1.05 var(--disp);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#f2f4f8}
.rt-stats span{display:block;margin-top:.3rem;font:400 1rem/1.4 var(--disp);color:#aab2c2}

/* the games the tools target: four banners with a label */
.rt-arts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rt-arts li{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--fg) 12%,transparent);background:#0c0f16}
.rt-arts img{display:block;width:100%;aspect-ratio:16/6;object-fit:cover;transition:transform .9s var(--ease,ease)}
.rt-arts li:hover img{transform:scale(1.03)}
.rt-arts li::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,12,0) 35%,rgba(7,8,12,.9) 100%)}
.rt-arts span{position:absolute;z-index:1;left:1.1rem;right:1.1rem;bottom:.9rem;font:400 1rem/1.35 var(--disp);color:#d5dae6;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.rt-arts b{display:block;font:700 clamp(1.2rem,1.9vw,1.5rem)/1.15 var(--disp);letter-spacing:-.025em;color:#fff}
.rt-arts-cap{margin:1rem 0 0;font:400 .95rem/1.45 var(--disp);color:var(--muted)}
.rt-arts-cap a{color:var(--t-link);text-decoration:underline;text-underline-offset:3px}
.rt-band-line{border-top:1px solid color-mix(in srgb,var(--fg) 12%,transparent)}
@media (max-width:700px){.rt-arts{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.rt-arts img{transition:none}}

/* fixed-camera toy on wide screens: the map on the left, controls and the readout beside it */
@media (min-width:981px){
  .cam-toy .toy-body{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);column-gap:clamp(1.25rem,2.5vw,2rem);align-content:start}
  .cam-toy .toy-stage{grid-column:1;grid-row:1 / span 4;max-width:none}
  .cam-toy .toy-controls,.cam-toy .toy-read,.cam-toy .toy-cap,.cam-toy .toy-fallback{grid-column:2}
  .cam-toy .toy-controls{margin-top:0}
}