/* ── Retro Vault ─────────────────────────────────────────────
   Builds on site.css tokens. The one bold element is the cabinet:
   a CRT screen in the site's pink→violet→cyan gradient frame. */

.retro-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: end; padding: 36px 0 20px; }
.retro-hero h1 { font-size: clamp(2.3em, 6vw, 3.6em); margin: 0 0 .15em; }
.retro-hero .glow { background: linear-gradient(90deg, var(--cyan), var(--pink), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.retro-hero .lede { color: var(--muted); font-size: 1.08em; max-width: 36em; margin: 0; }
.retro-eyebrow { margin: 0 0 6px; font-size: .78em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.retro-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.retro-facts li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; }
.retro-facts b { font: 800 1.8em var(--font-head); font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.1; }
.retro-facts span { color: var(--muted); font-size: .85em; }
@media (max-width: 820px) { .retro-hero { grid-template-columns: 1fr; align-items: start; } }

/* Cabinet */
.cabinet-wrap { margin: 8px 0 12px; scroll-margin-top: 80px; }
.cabinet {
  padding: 3px; border-radius: 22px;
  background: linear-gradient(135deg, var(--pink), #8b5cf6 55%, var(--cyan));
  box-shadow: 0 20px 60px -20px #c026d3aa;
}
.cabinet-screen { position: relative; border-radius: 19px; overflow: hidden; background: #05050f; aspect-ratio: 4 / 3; max-height: min(72vh, 720px); width: 100%; }
.cabinet-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #05050f; }
/* faint scanlines over the glass; clicks pass straight through */
.cabinet-screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.12) 2px 3px);
  box-shadow: inset 0 0 60px rgba(0,0,0,.55);
}
.cabinet.playing .cabinet-screen::after { opacity: .5; }
/* Phones (portrait): room for the picture plus our touch controls underneath it */
@media (pointer: coarse) and (orientation: portrait) {
  .cabinet-screen { aspect-ratio: auto; height: calc((100vw - 38px) * .75 + 270px); max-height: calc(100dvh - 90px); min-height: 460px; }
  .cabinet { border-radius: 18px; } .cabinet-screen { border-radius: 15px; }
}
/* No scanlines over the touch controls */
@media (pointer: coarse) { .cabinet-screen::after { display: none; } .cabinet-screen { touch-action: manipulation; } }

/* ── Big screen: the game fills the whole screen (works on iPhone, where real fullscreen isn't allowed) ── */
.big-exit { display: none; }
html.big-screen, html.big-screen body { overflow: hidden; height: 100%; }
.cabinet-wrap.big {
  position: fixed; inset: 0; z-index: 1000; margin: 0; background: #05050f;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.cabinet-wrap.big .cabinet { flex: 1; min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.cabinet-wrap.big .cabinet-screen { aspect-ratio: auto; height: 100%; max-height: none; min-height: 0; border-radius: 0; }
.cabinet-wrap.big .now-playing, .cabinet-wrap.big .keys, .cabinet-wrap.big .badge-hint { display: none; }
.cabinet-wrap.big .big-exit {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-end; margin: 6px 8px;
  font: 700 .9em var(--font-body); color: var(--text); background: #ffffff14; border: 1px solid #ffffff26; border-radius: 999px; padding: .4em .9em; cursor: pointer;
}
.cabinet-wrap.big .big-exit:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* Sideways: float the exit button in the top corner, over the empty space beside the picture */
@media (orientation: landscape) {
  .cabinet-wrap.big .big-exit { position: absolute; top: calc(6px + env(safe-area-inset-top, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); margin: 0; z-index: 2; opacity: .8; }
}


.now-playing { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.np-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.np-label { font-size: .72em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.np-info b { font: 700 1.25em var(--font-head); }
.np-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.keys { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 2px 0; font-size: .88em; color: #d6d5f0; }
.keys kbd + kbd { margin-left: 2px; }
@media (hover: none) { .keys span:not(.muted) { display: none; } }

/* Hosted game cards: whole card is a button */
button.game-card { font: inherit; text-align: left; padding: 0; cursor: pointer; width: 100%; }
.game-card .thumb.shot { background: #05050f; }
.game-card .thumb.shot img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.game-card:hover .thumb.shot img { transform: none; }
.game-card .sys { position: absolute; bottom: 10px; left: 12px; font-weight: 800; font-size: .75em; letter-spacing: .04em; color: #0b0b1a; background: var(--c); padding: .15em .6em; border-radius: 999px; }
.game-card .lic { font-size: .8em; color: var(--muted); }
.game-card.current { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 14px 40px -12px var(--c); }
.game-card.current .play-cta { opacity: 1; transform: none; }

/* Bring your own ROM */
.byor { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
@media (max-width: 760px) { .byor { grid-template-columns: 1fr; } }
.drop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px;
  min-height: 190px; padding: 24px 18px; border-radius: var(--radius); cursor: pointer;
  border: 2px dashed #45458a; background: #ffffff06; transition: border-color .15s, background .15s;
}
.drop:hover, .drop.over, .drop:focus-within { border-color: var(--cyan); background: #22d3ee12; }
.drop.has-file { border-style: solid; border-color: var(--lime); background: #a3e63510; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }
.drop-icon { font-size: 2.2em; line-height: 1; }
.drop b { font-family: var(--font-head); font-size: 1.15em; overflow-wrap: anywhere; }
.byor-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .9em; color: var(--muted); }
.field select { font: 1em var(--font-body); color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .6em .8em; }
.field select:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.byor-side .btn { align-self: flex-start; }
.byor-side .btn:disabled { cursor: not-allowed; }
.byor-note { margin: 0; }
.byor-hint { margin: 0; padding: 10px 14px; border-radius: 12px; background: #3b2a06; border: 1px solid #a16207; color: #fde68a; font-size: .92em; }

/* Download-first and paid lists */
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.dl-card { --c: var(--cyan); display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.dl-card .top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dl-card h3 { font-size: 1.2em; margin: 0; }
.dl-card .sys { flex: none; font-size: .72em; font-weight: 800; letter-spacing: .04em; color: var(--c); border: 1px solid var(--c); border-radius: 999px; padding: .1em .6em; }
.dl-card .by { font-size: .85em; color: var(--muted); margin: 0; }
.dl-card p.blurb { margin: 0; color: #d6d5f0; font-size: .93em; }
.dl-card .lic { margin: 0; font-size: .8em; color: var(--muted); }
.dl-card .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.dl-card .btn { font-size: .9em; padding: .45em .95em; }
.dl-card.paid { border-color: #be185d66; }
#filters { margin: 0 0 14px; }
#filters .tab { --c: var(--cyan); }

/* Credits */
.credit-table-wrap { overflow-x: auto; margin: 6px 0 14px; }
.credit-table { width: 100%; border-collapse: collapse; font-size: .92em; min-width: 560px; }
.credit-table th { text-align: left; color: var(--muted); font-size: .8em; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.credit-table td { padding: 10px; border-bottom: 1px solid #ffffff0d; vertical-align: top; color: #d6d5f0; }
.credit-table td a { white-space: nowrap; }
.credits code { background: #2c2c5a; padding: 0 .3em; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) { .drop { transition: none; } }
#hosted-grid { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 16px; }
#hosted-grid .game-card h3 { font-size: 1.2em; }

/* Badge toast (same look as the in-game one) */
.retro-toast { position: fixed; left: 50%; top: calc(76px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: .7em; padding: .5em 1.1em .5em .6em; background: linear-gradient(135deg, #3b2a06, #1a1a3d); border: 1px solid var(--gold); border-radius: 999px; box-shadow: 0 8px 30px #000a; white-space: nowrap; animation: retroToastIn .4s cubic-bezier(.2, 1.4, .4, 1); }
.retro-toast small { display: block; color: var(--gold); font-size: .72em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.retro-toast b { font-family: var(--font-head); }
.retro-toast .toast-icon { font-size: 1.6em; }
.retro-toast.out { opacity: 0; transform: translate(-50%, -10px); transition: .4s; }
@keyframes retroToastIn { from { opacity: 0; transform: translate(-50%, -14px) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .retro-toast { animation: none; } .retro-toast.out { transition: none; } }
.badge-hint { margin: 10px 2px 0; font-size: .88em; color: var(--muted); }
.badge-hint b { color: var(--gold); }