@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --paper: #e7e6e0;
  --paper-deep: #d9d8d1;
  --ink: #161815;
  --ink-soft: #4c5049;
  --ink-muted: #777b73;
  --line: rgba(23, 26, 23, .18);
  --line-strong: rgba(23, 26, 23, .45);
  --glass: rgba(255, 255, 251, .42);
  --glass-deep: rgba(235, 235, 228, .74);
  --night: #121512;
  --lime: #b9c82d;
  --lime-bright: #d7eb41;
  --lime-fade: rgba(185, 200, 45, .16);
  --danger: #8b3e35;
  --font-display: 'Space Grotesk', Arial, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { overflow: hidden; background: var(--paper); color: var(--ink); font-family: var(--font-display); }
button, input, select { font: inherit; }
button { color: inherit; }

.screen { position: fixed; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .36s var(--ease), visibility .36s; }
.screen.active { opacity: 1; visibility: visible; pointer-events: auto; }

/* ═══════════════════════════════════════════════════════════════
   LOADING / RUNTIME PRE-FLIGHT
   ═══════════════════════════════════════════════════════════════ */
#loading-screen { z-index: 100; display: grid; place-items: center; overflow: hidden; background: #171a17; color: #e7e6e0; }
#loading-screen::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 32px 32px; opacity: .55; mask-image: radial-gradient(circle at center, black, transparent 72%); }
#loading-screen::after { content: ''; position: absolute; width: 82vw; height: 60vh; border: 1px solid rgba(255,255,255,.16); transform: perspective(1100px) rotateX(58deg) translateY(13vh); box-shadow: 0 0 80px rgba(185,200,45,.06); }
.loading-inner { position: relative; z-index: 1; width: min(680px, 88vw); display: grid; gap: 18px; }
.loading-mark { display: flex; gap: 8px; align-items: baseline; font-size: clamp(44px, 8vw, 86px); font-family: var(--font-display); letter-spacing: -.08em; font-weight: 600; }
.loading-mark span:first-child { color: #f3f2ed; }
.loading-mark span:last-child { color: var(--lime-bright); }
.loading-kicker, .loading-hint { margin: 0; font: 10px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: rgba(237,237,230,.58); }
.boot-log { height: 138px; overflow: auto; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.23); padding: 14px; font: 11px/1.65 var(--font-mono); color: rgba(240,241,231,.64); box-shadow: 15px 15px 0 rgba(0,0,0,.12); }
.boot-log .log-ok { color: #d8e66a; }.boot-log .log-warn { color: #e6cd71; }.boot-log .log-error { color: #df7a6b; }.boot-log .log-info { color: rgba(240,241,231,.55); }
.progress-container { display: grid; grid-template-columns: 1fr 48px; gap: 12px; align-items: center; }
.progress-bar { height: 7px; overflow: hidden; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.2); }
.progress-fill { width: 0; height: 100%; background: var(--lime); transition: width .32s var(--ease); box-shadow: 10px 0 28px rgba(185,200,45,.55); }
.progress-text { font: 12px var(--font-mono); text-align: right; color: var(--lime-bright); }

/* ═══════════════════════════════════════════════════════════════
   RetroPlay HUB
   ═══════════════════════════════════════════════════════════════ */
#wad-picker { z-index: 10; overflow-x: hidden; overflow-y: auto; background: var(--paper); }
#wad-picker::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(rgba(24,28,24,.052) 1px, transparent 1px), linear-gradient(90deg, rgba(24,28,24,.052) 1px, transparent 1px), radial-gradient(circle at 85% 11%, rgba(255,255,255,.95), transparent 28%), radial-gradient(circle at 11% 40%, rgba(185,200,45,.12), transparent 21%); background-size: 36px 36px, 36px 36px, auto, auto; }
#wad-picker::after { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .33; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.retro-shell { position: relative; z-index: 1; width: min(1480px, calc(100% - 48px)); min-height: 100vh; margin: 0 auto; padding: 22px 0 20px; }

.retro-header { min-height: 56px; display: grid; grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr); align-items: center; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.brand-mark { appearance: none; width: max-content; border: 0; background: transparent; padding: 0; font: 600 clamp(24px, 2.2vw, 33px)/1 var(--font-display); letter-spacing: -.1em; cursor: pointer; }
.brand-mark span { color: var(--ink); }.brand-mark b { color: var(--ink-soft); font-weight: 500; }
.retro-nav { height: 100%; display: flex; }
.retro-nav button { position: relative; border: 0; background: transparent; padding: 0 18px; cursor: pointer; color: var(--ink-muted); font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .075em; transition: color .2s; }
.retro-nav button::after { content: ''; position: absolute; bottom: -1px; left: 50%; width: 0; height: 2px; background: var(--lime); transform: translateX(-50%); transition: width .25s var(--ease); }
.retro-nav button:hover, .retro-nav button.is-active { color: var(--ink); }.retro-nav button:hover::after, .retro-nav button.is-active::after { width: calc(100% - 36px); }
.retro-nav span { color: var(--lime); padding-left: 5px; }
.header-status { justify-self: end; display: flex; align-items: center; gap: 8px; color: var(--ink-muted); font: 9px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.status-dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); }.header-divider { width: 1px; height: 12px; background: var(--line-strong); }

.retro-main { padding: 70px 0 48px; }
.section-tag { display: flex; gap: 14px; margin: 0 0 13px; color: var(--ink-muted); font: 9px var(--font-mono); text-transform: uppercase; letter-spacing: .095em; }.section-tag span:first-child { color: var(--ink); }.section-tag span:last-child { padding-left: 14px; border-left: 1px solid var(--line-strong); }
.spatial-panel { position: relative; border: 1px solid var(--line-strong); background: var(--glass); box-shadow: 16px 17px 0 rgba(25,28,25,.055), 0 16px 40px rgba(20,23,20,.07); backdrop-filter: blur(14px); }
.spatial-panel::before { content: ''; position: absolute; inset: 7px -8px -8px 7px; z-index: -1; border: 1px solid rgba(24,28,24,.11); pointer-events: none; }.spatial-panel::after { content: ''; position: absolute; top: 16px; left: -1px; width: 27px; height: 2px; background: var(--lime); }

.featured-panel { display: grid; grid-template-columns: minmax(320px, .93fr) minmax(430px, 1.18fr); min-height: 480px; overflow: hidden; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
.featured-media { position: relative; min-height: 360px; overflow: hidden; background: #121412; }.featured-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,18,15,.15), rgba(15,18,15,.67)), linear-gradient(0deg, rgba(15,18,15,.8), transparent 55%); }.featured-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.08); transform: scale(1.02); transition: transform .7s var(--ease); }.featured-panel:hover .featured-media img { transform: scale(1.07); }.media-grid { position: absolute; z-index: 1; inset: 0; background: linear-gradient(rgba(225,235,208,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(225,235,208,.1) 1px, transparent 1px); background-size: 58px 58px; opacity: .24; }.featured-index { position: absolute; z-index: 2; left: 20px; bottom: 19px; color: #eef0e7; font: 10px var(--font-mono); letter-spacing: .12em; }
.featured-copy { padding: 38px 40px 58px; display: flex; flex-direction: column; align-items: flex-start; }.featured-topline { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; color: var(--ink-muted); font: 9px var(--font-mono); text-transform: uppercase; letter-spacing: .07em; }.featured-topline::before { content: ''; width: 28px; height: 1px; background: var(--line-strong); grid-column: 2; }.featured-topline span:nth-child(2) { grid-column: 2; grid-row: 1; margin-left: 36px; }.featured-topline span:last-child { color: var(--ink); }.lime-mark { color: var(--lime); font-size: 16px; }
.featured-copy h1 { max-width: 600px; margin: 38px 0 8px; font-size: clamp(40px, 4.3vw, 68px); line-height: .96; letter-spacing: -.073em; font-weight: 500; }.featured-studio { margin: 0; color: var(--ink-muted); font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .07em; }.featured-description { max-width: 535px; margin: 30px 0; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }.featured-specs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: auto 0 27px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.featured-specs div { min-height: 57px; padding: 10px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.featured-specs dt { color: var(--ink-muted); font: 9px var(--font-mono); text-transform: uppercase; }.featured-specs dd { margin: 6px 0 0; font-size: 12px; }.featured-actions { display: flex; align-items: center; gap: 20px; }.featured-footer { position: absolute; bottom: 0; right: 0; left: 0; display: flex; justify-content: space-between; padding: 13px 20px; border-top: 1px solid var(--line); background: rgba(235,235,228,.42); color: var(--ink-muted); font: 8px var(--font-mono); text-transform: uppercase; letter-spacing: .075em; }

.retro-button { appearance: none; border: 1px solid var(--line-strong); background: var(--glass-deep); min-height: 43px; padding: 0 18px; cursor: pointer; font: 500 10px var(--font-mono); text-transform: uppercase; letter-spacing: .075em; transition: transform .22s var(--ease), background .22s, border-color .22s, box-shadow .22s; }.retro-button:hover { transform: translate(-2px, -2px); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }.retro-button-primary { border-color: var(--ink); background: var(--ink); color: #f3f3ec; }.retro-button-primary:hover { background: var(--lime); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }.retro-button-quiet { background: transparent; }.retro-button-compact { min-height: 34px; padding: 0 12px; font-size: 9px; }.retro-text-button { appearance: none; border: 0; padding: 4px 0; background: transparent; cursor: pointer; color: var(--ink); font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .055em; border-bottom: 1px solid var(--line-strong); }.retro-text-button span { color: var(--lime); }

.genre-deck { margin: 46px 0 90px; }.genre-deck-heading { display: grid; grid-template-columns: minmax(180px,.55fr) minmax(0,1.15fr); gap: 26px; align-items: end; margin-bottom: 24px; }.genre-deck-heading .section-tag { margin: 0 0 5px; }.genre-deck-heading h2 { max-width: 560px; margin: 0; font-size: clamp(32px,4.4vw,62px); font-weight: 500; line-height: .95; letter-spacing: -.075em; }.genre-deck-heading p:last-child { max-width: 560px; margin: 15px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }.collection-strip { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; margin: 0; }.collection-card { position: relative; min-height: 154px; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 15px; border: 1px solid var(--line-strong); background: linear-gradient(140deg, var(--paper-deep), #f1f0eb); cursor: pointer; text-align: left; box-shadow: 8px 9px 0 rgba(25,28,25,.06); transition: transform .28s var(--ease), box-shadow .28s, border-color .28s; }.collection-card::after { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .2; transition: opacity .28s; background-image: linear-gradient(135deg, transparent 0 45%, rgba(25,28,25,.5) 45% 46%, transparent 46%), linear-gradient(45deg, transparent 0 62%, rgba(25,28,25,.4) 62% 63%, transparent 63%); }.collection-card:hover { transform: translateY(-6px); border-color: var(--ink); box-shadow: 12px 15px 0 rgba(25,28,25,.12); }.collection-card:hover::after { opacity: .46; }.collection-card span { position: absolute; top: 14px; left: 14px; color: var(--ink-muted); font: 9px var(--font-mono); }.collection-card b { font-size: 19px; letter-spacing: -.06em; font-weight: 500; }.collection-card small { margin-top: 5px; color: var(--ink-muted); font: 9px/1.35 var(--font-mono); }.collection-card strong { position: absolute; top: 13px; right: 14px; color: var(--lime); font: 14px var(--font-mono); }.collection-horror { background: #20231f; color: #eeeee6; }.collection-horror small, .collection-horror span, .collection-racing small, .collection-racing span, .collection-fantasy small, .collection-fantasy span { color: rgba(238,238,230,.65); }.collection-explore { background: #d5d4ca; }.collection-strategy { background: linear-gradient(135deg,#d9d4bd,#a9b497); }.collection-racing { background: linear-gradient(135deg,#172b3b,#36566b); color:#f4f5ef; }.collection-arcade { background: linear-gradient(135deg,#c4d476,#edf1bb); }.collection-gems { background: linear-gradient(135deg,#d6b26d,#efd39a); }.collection-rhythm { background: linear-gradient(135deg,#764a5d,#e68b75); color:#fff5e9; }.collection-rhythm small,.collection-rhythm span { color:rgba(255,245,233,.7); }.collection-fantasy { background: linear-gradient(135deg,#2d2638,#57435c); color:#f5f0ea; }.collection-experimental { background: #e7e5dd; }.collection-experimental::before { content: ''; position: absolute; z-index: -1; width: 75%; height: 150%; border: 1px solid rgba(25,28,25,.35); transform: rotate(42deg); top: -31%; left: 15%; }

.catalog-layout { display: grid; grid-template-columns: 250px 1fr; gap: 32px; align-items: start; }.catalog-heading { grid-column: 1 / -1; display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 6px; }.catalog-heading h2, .import-copy h2, .library-heading h2 { margin: 0; font-size: clamp(32px, 4.4vw, 62px); font-weight: 500; letter-spacing: -.075em; line-height: .95; }.catalog-tools { display: flex; gap: 12px; align-items: end; }.search-field { display: grid; gap: 6px; color: var(--ink-muted); font: 9px var(--font-mono); text-transform: uppercase; letter-spacing: .07em; }.search-field input { width: 255px; height: 38px; border: 0; border-bottom: 1px solid var(--line-strong); outline: none; background: transparent; color: var(--ink); font: 12px var(--font-mono); }.search-field input:focus { border-color: var(--lime); }.record-count { padding-bottom: 11px; color: var(--ink-muted); font: 9px var(--font-mono); text-transform: uppercase; white-space: nowrap; }
.filter-panel { position: sticky; top: 22px; padding: 23px 19px 19px; }.filter-panel-title { display: flex; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid var(--line); color: var(--ink); font: 9px var(--font-mono); text-transform: uppercase; letter-spacing: .09em; }.filter-reset { border: 0; padding: 0; color: var(--ink-muted); background: transparent; font: inherit; cursor: pointer; }.filter-group { padding: 17px 0; border-bottom: 1px solid var(--line); }.filter-label { display: block; margin-bottom: 10px; color: var(--ink-muted); font: 9px var(--font-mono); text-transform: uppercase; letter-spacing: .09em; }.genre-filter-row { display: flex; flex-wrap: wrap; gap: 6px; }.filter-chip { border: 1px solid var(--line); background: rgba(255,255,255,.22); padding: 7px 8px; cursor: pointer; color: var(--ink-soft); font: 9px var(--font-mono); transition: all .2s; }.filter-chip:hover, .filter-chip.is-active { border-color: var(--ink); color: var(--ink); background: var(--lime); }.filter-group select { width: 100%; border: 1px solid var(--line-strong); border-radius: 0; background: rgba(255,255,255,.42); padding: 9px; color: var(--ink); font: 10px var(--font-mono); }.filter-readout { display: grid; grid-template-columns: 1fr auto; gap: 9px; padding-top: 18px; color: var(--ink-muted); font: 9px var(--font-mono); text-transform: uppercase; }.filter-readout b { color: var(--ink); font-weight: 500; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }.game-card { min-width: 0; overflow: hidden; border: 1px solid var(--line-strong); background: rgba(255,255,251,.43); box-shadow: calc(7px + var(--card-index, 0) * 1px) calc(8px + var(--card-index, 0) * 1px) 0 rgba(25,28,25,.06); transition: transform .3s var(--ease), box-shadow .3s; }.game-card:hover { transform: translateY(-6px); box-shadow: 12px 16px 0 rgba(25,28,25,.11); }.game-card-media { position: relative; display: block; width: 100%; aspect-ratio: 1.43; overflow: hidden; border: 0; padding: 0; background: #252824; cursor: pointer; }.game-card-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,12,10,.75), transparent 60%); }.game-card-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.04); transition: transform .6s var(--ease); }.game-card:hover .game-card-media img { transform: scale(1.06); }.card-index, .card-state { position: absolute; z-index: 1; top: 12px; color: #edeee8; font: 9px var(--font-mono); letter-spacing: .06em; }.card-index { left: 12px; }.card-state { right: 12px; color: rgba(237,238,232,.68); }.card-state.is-ready { color: var(--lime-bright); }.game-card-body { padding: 15px 15px 16px; }.card-overline, .card-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-muted); font: 8px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }.game-card-body h3 { margin: 15px 0 7px; font-size: 21px; letter-spacing: -.06em; font-weight: 500; }.game-card-body p { min-height: 53px; margin: 0 0 15px; color: var(--ink-soft); font-size: 12px; line-height: 1.45; }.card-meta { padding-top: 12px; border-top: 1px solid var(--line); }.card-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }.icon-button { width: 34px; height: 34px; border: 1px solid var(--line-strong); background: transparent; cursor: pointer; color: var(--ink-muted); font-size: 18px; line-height: 1; }.icon-button:hover, .icon-button.is-saved { border-color: var(--ink); color: var(--ink); background: var(--lime); }

.import-panel { display: grid; grid-template-columns: .92fr 1.08fr; gap: 48px; align-items: center; margin: 100px 0; padding: 42px; overflow: hidden; }.import-copy p:last-child { max-width: 390px; margin: 22px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }.import-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.file-button { display: grid; place-items: center; }.drop-zone { grid-column: 1 / -1; display: grid; justify-items: center; gap: 7px; min-height: 112px; padding: 22px; border: 1px dashed var(--line-strong); background: rgba(255,255,255,.18); color: var(--ink-soft); font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; cursor: default; transition: all .2s; }.drop-zone small { color: var(--ink-muted); font-size: 8px; }.drop-zone.drag-over { border-color: var(--ink); background: var(--lime-fade); color: var(--ink); }.import-schematic { position: absolute; right: 41px; bottom: -1px; display: flex; align-items: center; gap: 7px; color: var(--ink-muted); font: 8px var(--font-mono); text-transform: uppercase; }.import-schematic i { width: 20px; height: 1px; background: var(--line-strong); }.import-schematic span:last-child { color: var(--lime); }
.library-section { padding-bottom: 80px; }.library-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 28px; }.library-heading > span { color: var(--ink-muted); font: 9px var(--font-mono); text-transform: uppercase; letter-spacing: .07em; }.library-empty { margin: 0; padding: 34px; border: 1px dashed var(--line-strong); color: var(--ink-muted); font: 12px var(--font-mono); }.library-empty[hidden] { display: none; }.library-grid { margin-top: 20px; }.retro-footer { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; padding: 17px 0 0; border-top: 1px solid var(--line-strong); color: var(--ink-muted); font: 8px var(--font-mono); text-transform: uppercase; letter-spacing: .07em; }.retro-footer span:nth-child(2) { text-align: center; }.retro-footer span:last-child { text-align: right; }

/* ═══════════════════════════════════════════════════════════════
   GAME RUNTIME
   ═══════════════════════════════════════════════════════════════ */
#game-screen { z-index: 60; background: #0d100d; overflow: hidden; }.game-topbar { position: absolute; z-index: 6; top: 14px; left: 14px; right: 14px; display: flex; align-items: center; gap: 12px; color: rgba(237,238,232,.65); font: 9px var(--font-mono); text-transform: uppercase; letter-spacing: .075em; }.game-topbar > span:last-child { margin-left: auto; }.game-return-chip { appearance: none; border: 1px solid rgba(237,238,232,.38); background: rgba(14,17,14,.66); padding: 8px 10px; color: #edf0e7; font: 9px var(--font-mono); letter-spacing: .07em; cursor: pointer; }.game-return-chip:hover { border-color: var(--lime); color: var(--lime-bright); }
#doom-canvas { position: absolute; top: 50%; left: 50%; display: block; transform: translate(-50%, -50%); cursor: crosshair; image-rendering: pixelated; image-rendering: crisp-edges; }.game-topbar + #doom-canvas { box-shadow: 0 0 0 1px rgba(238,240,232,.15), 0 35px 80px rgba(0,0,0,.5); }#crt-overlay { position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: .33; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.23) 2px 4px); box-shadow: inset 0 0 110px rgba(0,0,0,.62); }#crt-overlay.disabled { display: none; }
#hud-overlay { position: absolute; z-index: 7; right: 14px; bottom: 14px; display: flex; gap: 7px; }.hud-chip { border: 1px solid rgba(237,238,232,.3); background: rgba(14,17,14,.7); padding: 6px 8px; color: var(--lime-bright); font: 9px var(--font-mono); }.hidden { display: none !important; }
#pause-overlay, #settings-overlay { position: absolute; z-index: 30; inset: 0; display: grid; place-items: center; background: rgba(11,13,11,.73); backdrop-filter: blur(8px); }.pause-box, .settings-box { width: min(390px, calc(100vw - 42px)); display: flex; flex-direction: column; gap: 12px; padding: 27px; border: 1px solid rgba(237,238,232,.42); background: rgba(28,31,27,.91); color: #eef0e7; box-shadow: 13px 14px 0 rgba(0,0,0,.3); }.pause-title { margin: 0; color: var(--lime-bright); font: 500 26px/.96 var(--font-display); letter-spacing: -.06em; }.pause-hint { margin: 0 0 10px; color: rgba(238,240,231,.58); font: 11px var(--font-mono); }.settings-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(237,238,232,.12); color: rgba(238,240,231,.85); font-size: 12px; }.settings-row label { flex: 1; }.settings-row input, .settings-row select { accent-color: var(--lime); }.settings-row select { max-width: 150px; background: #171a17; color: #eef0e7; border: 1px solid rgba(237,238,232,.25); padding: 5px; }
.click-overlay { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; background: rgba(9,11,9,.66); backdrop-filter: blur(3px); cursor: pointer; }.click-box { padding: 24px 28px; border: 1px solid rgba(237,238,232,.45); background: rgba(21,24,21,.94); color: #edf0e7; text-align: center; box-shadow: 10px 12px 0 rgba(0,0,0,.3); }.click-box p { margin: 0; font: 13px var(--font-mono); }.click-box p.small { margin-top: 8px; color: var(--lime-bright); font-size: 9px; }
#mobile-controls { position: absolute; z-index: 10; inset: 0; display: none; pointer-events: none; user-select: none; -webkit-user-select: none; }
#mobile-controls button { border: 1px solid rgba(237,238,232,.3); background: linear-gradient(145deg, rgba(37,42,36,.88), rgba(8,11,9,.82)); color: rgba(241,243,233,.92); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 13px rgba(0,0,0,.28); cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
#mobile-controls button:active, #mobile-controls button.pressed { background: var(--lime); border-color: var(--lime-bright); color: var(--ink); box-shadow: inset 0 2px 12px rgba(22,24,19,.22), 0 0 0 2px rgba(215,235,65,.14); transform: translateY(1px) scale(.97); }
.touch-look-zone { position: absolute; z-index: 1; top: 72px; right: 18px; bottom: calc(146px + env(safe-area-inset-bottom)); left: 43%; display: grid; place-items: center; border: 1px dashed rgba(237,238,232,.13); background: radial-gradient(circle at center, rgba(185,200,45,.07), transparent 63%); color: rgba(237,238,232,.33); font: 8px var(--font-mono); letter-spacing: .16em; pointer-events: all; touch-action: none; opacity: .55; transition: opacity .2s, border-color .2s, background .2s; }
.touch-look-zone.is-looking { opacity: 1; border-color: rgba(215,235,65,.68); background: radial-gradient(circle at center, rgba(185,200,45,.2), transparent 66%); color: var(--lime-bright); }
.psp-shoulders { position: absolute; z-index: 3; top: 62px; left: 14px; right: 14px; display: flex; justify-content: space-between; pointer-events: all; }
.shoulder-btn { width: 76px; height: 33px; clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%); font: 700 13px/1 var(--font-mono); letter-spacing: .12em; }
.psp-dpad { position: absolute; z-index: 3; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); width: 148px; height: 148px; display: grid; grid-template-areas: '. up .' 'left core right' '. down .'; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px; pointer-events: all; filter: drop-shadow(0 7px 12px rgba(0,0,0,.3)); }
.dpad-btn { min-width: 0; min-height: 0; font-size: 19px; font-weight: 700; }.dpad-btn.up { grid-area: up; border-radius: 13px 13px 4px 4px; }.dpad-btn.left { grid-area: left; border-radius: 13px 4px 4px 13px; }.dpad-btn.right { grid-area: right; border-radius: 4px 13px 13px 4px; }.dpad-btn.down { grid-area: down; border-radius: 4px 4px 13px 13px; }.dpad-core { grid-area: core; border: 1px solid rgba(237,238,232,.18); background: rgba(10,13,10,.58); box-shadow: inset 0 0 14px rgba(0,0,0,.44); }
.psp-actions { position: absolute; z-index: 3; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); width: 148px; height: 148px; pointer-events: all; }.face-btn { position: absolute; width: 58px; height: 58px; border-radius: 50%; font: 700 27px/1 var(--font-display); }.face-triangle { top: 0; left: 45px; }.face-square { top: 45px; left: 0; }.face-circle { top: 45px; right: 0; }.face-cross { bottom: 0; left: 45px; }
.mobile-command-bar { position: absolute; z-index: 2; right: 50%; bottom: max(13px, env(safe-area-inset-bottom)); display: flex; gap: 8px; align-items: center; padding: 6px 9px; border: 1px solid rgba(237,238,232,.16); background: rgba(9,12,9,.54); color: rgba(237,238,232,.52); transform: translateX(50%); font: 7px var(--font-mono); text-transform: uppercase; letter-spacing: .09em; white-space: nowrap; }.mobile-command-bar span:nth-child(1) { color: var(--lime-bright); }.mobile-command-bar span + span::before { content: '·'; padding-right: 8px; color: rgba(237,238,232,.32); }

@media (max-width: 1100px) { .retro-shell { width: min(100% - 34px, 940px); }.featured-panel { grid-template-columns: .86fr 1fr; }.collection-strip { grid-template-columns: repeat(3, 1fr); }.catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { body { overflow: hidden; }.retro-shell { width: min(100% - 28px, 560px); padding-top: 14px; }.genre-deck { margin: 34px 0 66px; }.genre-deck-heading { grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; }.genre-deck-heading .section-tag { margin-bottom: 2px; }.genre-deck-heading h2 { font-size: 43px; }.genre-deck-heading p:last-child { margin-top: 12px; font-size: 12px; }.retro-header { grid-template-columns: 1fr auto; }.retro-nav { order: 3; grid-column: 1 / -1; width: 100%; height: 43px; border-top: 1px solid var(--line); margin-top: 12px; }.retro-nav button { flex: 1; padding: 0 8px; }.retro-nav button:hover::after, .retro-nav button.is-active::after { width: calc(100% - 16px); }.header-status { font-size: 8px; }.header-status span:nth-of-type(2), .header-divider { display: none; }.retro-main { padding-top: 42px; }.featured-panel { grid-template-columns: 1fr; }.featured-media { min-height: 250px; }.featured-copy { padding: 27px 21px 56px; }.featured-copy h1 { margin-top: 30px; font-size: 44px; }.featured-description { margin: 20px 0 25px; }.featured-footer { padding: 10px 13px; font-size: 7px; }.featured-footer span:nth-child(2) { display: none; }.collection-strip { gap: 10px; margin: 34px 0 66px; }.collection-card { min-height: 133px; }.collection-card b { font-size: 18px; }.catalog-layout { grid-template-columns: 1fr; gap: 20px; }.catalog-heading { display: grid; gap: 22px; align-items: start; }.catalog-heading h2, .import-copy h2, .library-heading h2 { font-size: 43px; }.catalog-tools { width: 100%; }.search-field { flex: 1; }.search-field input { width: 100%; }.filter-panel { position: static; padding: 18px; }.filter-group { padding: 13px 0; }.catalog-grid { grid-template-columns: 1fr; }.import-panel { grid-template-columns: 1fr; gap: 28px; margin: 65px 0; padding: 26px 21px 51px; }.import-schematic { left: 21px; right: auto; }.library-heading { align-items: start; gap: 20px; }.library-heading > span { text-align: right; }.retro-footer { grid-template-columns: 1fr; gap: 7px; }.retro-footer span:nth-child(2), .retro-footer span:last-child { text-align: left; }.game-topbar > span { display: none; }.game-topbar > span:last-child { display: block; margin-left: auto; font-size: 7px; } }
@media (max-width: 420px) { .brand-mark { font-size: 27px; }.header-status { display: none; }.featured-specs { grid-template-columns: 1fr 1fr; }.featured-actions { align-items: flex-start; flex-direction: column; gap: 15px; }.collection-strip { grid-template-columns: 1fr 1fr; }.collection-card { padding: 12px; }.collection-card b { font-size: 16px; }.collection-card small { font-size: 8px; }.catalog-tools { display: grid; }.record-count { padding-bottom: 0; }.import-actions { grid-template-columns: 1fr; }.drop-zone { grid-column: auto; }.psp-dpad, .psp-actions { transform: scale(.84); }.psp-dpad { transform-origin: bottom left; }.psp-actions { transform-origin: bottom right; }.shoulder-btn { width: 67px; }.touch-look-zone { left: 39%; bottom: 130px; }.mobile-command-bar { font-size: 6px; } }

:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
::selection { background: var(--lime); color: var(--ink); }
::-webkit-scrollbar { width: 8px; }::-webkit-scrollbar-track { background: rgba(0,0,0,.05); }::-webkit-scrollbar-thumb { background: rgba(25,28,25,.42); }

/* RetroPlay catalog licensing and persistence */
.featured-license, .featured-credit, .card-license { font: 9px/1.4 var(--font-mono); letter-spacing: .035em; }
.featured-license { margin: -9px 0 15px; color: #667024; text-transform: uppercase; }
.featured-credit { margin: 13px 0 0; color: var(--ink-muted); }
.card-license { min-height: auto !important; margin: -5px 0 12px !important; color: #68702b !important; }
.settings-box { max-height: min(760px, calc(100vh - 38px)); overflow-y: auto; }
.settings-note { margin: -3px 0 3px; color: rgba(238,240,231,.58); font: 10px/1.5 var(--font-mono); }
.settings-group { display: grid; gap: 0; padding: 11px 0 2px; border-top: 1px solid rgba(237,238,232,.16); }
.settings-group > span { padding-bottom: 4px; color: var(--lime-bright); font: 8px var(--font-mono); text-transform: uppercase; letter-spacing: .11em; }
.settings-row input[type="range"] { width: 118px; accent-color: var(--lime); }
.settings-row > span { width: 37px; color: var(--lime-bright); font: 9px var(--font-mono); text-align: right; }
.save-slot-list { display: grid; gap: 5px; max-height: 138px; overflow-y: auto; padding: 9px; border: 1px solid rgba(237,238,232,.16); background: rgba(0,0,0,.15); }
.save-slot-list p { margin: 0; color: rgba(238,240,231,.55); font: 9px/1.5 var(--font-mono); }
.save-slot-list > div { display: flex; justify-content: space-between; gap: 12px; color: rgba(238,240,231,.84); font: 9px var(--font-mono); }
.save-slot-list > div span:last-child { color: rgba(238,240,231,.5); text-align: right; }
.save-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.save-actions .retro-button { min-height: 34px; padding: 8px; font-size: 8px; }
html[data-performance="battery"] #crt-overlay { display: none; }
html[data-performance="battery"] .game-topbar + #doom-canvas { box-shadow: none; }
@media (max-width: 420px) { .settings-box { width: calc(100vw - 24px); padding: 20px; } .settings-row input[type="range"] { width: 94px; } .save-actions { grid-template-columns: 1fr; } }

/* Creator profile --------------------------------------------------------- */
.about-panel { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); gap:36px; margin-top:72px; padding:34px; overflow:hidden; background:linear-gradient(135deg,rgba(226,255,84,.16),rgba(255,255,255,.58) 48%,rgba(158,193,218,.18)); }
.about-intro > p:not(.section-tag) { max-width:620px; margin:18px 0 24px; color:var(--ink-muted); font-size:15px; line-height:1.7; }.about-intro strong { color:var(--ink); }.about-intro [lang="fa"] { display:inline-block; color:var(--ink); font-weight:600; }
.about-principles { display:grid; gap:0; align-content:start; border-top:1px solid var(--line); }.about-principles article { padding:18px 0; border-bottom:1px solid var(--line); }.about-principles span { color:var(--lime); font:10px var(--font-mono); letter-spacing:.1em; }.about-principles h3 { margin:8px 0 6px; font-size:18px; letter-spacing:-.03em; }.about-principles p { max-width:520px; margin:0; color:var(--ink-muted); font-size:13px; line-height:1.6; }
@media (max-width:820px) { .about-panel { grid-template-columns:1fr; gap:24px; margin-top:48px; padding:26px; } }
@media (max-width:540px) { .about-panel { margin-top:36px; padding:20px; }.about-intro > p:not(.section-tag) { font-size:14px; }.about-principles article { padding:15px 0; } }
.about-intro h2 { max-width:620px; margin:0; font-size:clamp(32px,4.4vw,62px); font-weight:500; letter-spacing:-.075em; line-height:.95; }