@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); }

/* ═══════════════════════════════════════════════════════════════
   PLAYCHIVE 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; display: inline-flex; align-items: center; gap: 9px; 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-icon { display: block; width: 36px; height: 36px; flex: 0 0 auto; filter: drop-shadow(0 3px 7px rgba(12, 20, 71, .2)); transition: transform .24s var(--ease), filter .24s var(--ease); }.brand-mark:hover .brand-icon, .brand-mark:focus-visible .brand-icon { transform: rotate(-4deg) scale(1.06); filter: drop-shadow(0 5px 10px rgba(12, 20, 71, .28)); }
.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); }.card-download-link { display: block; width: fit-content; margin-top: 12px; padding-bottom: 3px; border-bottom: 1px solid var(--ink); color: var(--ink); font: 9px var(--font-mono); letter-spacing: .055em; text-decoration: none; text-transform: uppercase; }.card-download-link:hover { color: var(--ink); border-color: var(--lime); background: var(--lime); }.card-download-note { min-height: 0 !important; margin: 8px 0 0 !important; color: var(--ink-muted) !important; font: 9px/1.45 var(--font-mono) !important; }

.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 { gap: 7px; font-size: 27px; }.brand-icon { width: 30px; height: 30px; }.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); }

/* PLAYCHIVE 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; }


/* Featured carousel and curated catalog order -------------------------------- */
.featured-panel { transition: opacity .22s var(--ease), transform .22s var(--ease), filter .22s var(--ease); }
.featured-panel.is-transitioning { opacity: .22; transform: translateY(8px) scale(.992); filter: saturate(.72) blur(1px); pointer-events: none; }
.featured-panel.is-arriving { animation: featured-arrive .56s var(--ease); }
@keyframes featured-arrive { from { opacity:.58; transform:translateY(-9px) scale(.994); } to { opacity:1; transform:translateY(0) scale(1); } }
.featured-media-caption { position:absolute; z-index:2; right:16px; bottom:16px; display:flex; align-items:center; gap:8px; color:rgba(241,243,233,.72); font:8px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
.featured-media-caption i { width:72px; height:2px; overflow:hidden; background:rgba(241,243,233,.25); }
.featured-media-caption i::after { content:''; display:block; width:100%; height:100%; background:var(--lime-bright); transform-origin:left; }
.featured-media-caption i.is-counting::after { animation: featured-timer 10s linear forwards; }
@keyframes featured-timer { from { transform:scaleX(1); } to { transform:scaleX(0); } }
.featured-panel.is-transitioning .featured-media-caption i::after, .featured-panel.is-paused .featured-media-caption i::after { animation-play-state:paused; }
.featured-carousel-controls { display:flex; align-items:center; justify-content:center; gap:8px; }
.featured-arrow { width:27px; height:26px; border:1px solid var(--line-strong); background:rgba(255,255,255,.32); color:var(--ink); cursor:pointer; font:14px/1 var(--font-display); transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.featured-arrow:hover { background:var(--lime); transform:translateY(-2px); }
.featured-dots { display:flex; align-items:center; gap:4px; }
.featured-dot { appearance:none; display:grid; place-items:center; width:18px; height:18px; overflow:hidden; border:1px solid var(--line-strong); background:transparent; color:var(--ink-muted); cursor:pointer; font:6px var(--font-mono); transition:width .24s var(--ease), background .24s var(--ease), color .24s var(--ease); }
.featured-dot:hover, .featured-dot.is-active { width:30px; border-color:var(--ink); background:var(--lime); color:var(--ink); }
.catalog-group { grid-column:1 / -1; }.catalog-group + .catalog-group { margin-top:54px; }
.catalog-group-heading { display:grid; grid-template-columns:minmax(92px,.28fr) minmax(0,1fr) auto; gap:20px; align-items:end; margin:0 0 19px; padding:0 0 15px; border-bottom:1px solid var(--line-strong); }
.catalog-group-heading > span, .catalog-group-heading > b { color:var(--ink-muted); font:9px var(--font-mono); letter-spacing:.09em; text-transform:uppercase; }.catalog-group-heading > b { color:var(--lime); font-size:15px; font-weight:500; }
.catalog-group-heading h3 { margin:0; font-size:clamp(26px,3vw,42px); line-height:.94; letter-spacing:-.07em; font-weight:500; }.catalog-group-heading p { max-width:580px; margin:8px 0 0; color:var(--ink-muted); font-size:12px; line-height:1.45; }
.catalog-group-more .catalog-group-heading { border-bottom-color:var(--line); }.catalog-empty { grid-column:1 / -1; margin:0; padding:28px; border:1px dashed var(--line-strong); color:var(--ink-muted); font:11px/1.5 var(--font-mono); }
@media (max-width:760px) { .featured-media-caption { right:12px; bottom:12px; }.featured-media-caption i { width:54px; }.featured-carousel-controls { gap:5px; }.featured-dots { max-width:170px; overflow-x:auto; padding:2px; }.featured-footer { gap:8px; }.featured-footer > span:first-child { display:none; }.featured-arrow { width:25px; height:24px; }.featured-dot { flex:0 0 17px; }.featured-dot.is-active { flex-basis:27px; }.catalog-group + .catalog-group { margin-top:38px; }.catalog-group-heading { grid-template-columns:1fr auto; gap:11px; }.catalog-group-heading > span { grid-column:1 / -1; }.catalog-group-heading h3 { font-size:32px; }.catalog-group-heading p { font-size:11px; } }
@media (prefers-reduced-motion: reduce) { .featured-panel, .featured-panel * { transition:none !important; animation:none !important; } }


/* Interface polish: wordmark, motion and tactile surfaces ------------------ */
.brand-mark { gap:5px; letter-spacing:-.085em; }
.brand-mark i { width:8px; height:8px; margin-left:8px; border:1px solid var(--ink); background:var(--lime); transform:rotate(45deg); box-shadow:0 0 0 3px rgba(185,200,45,.12); animation:brand-beacon 2.6s ease-in-out infinite; }
@keyframes brand-beacon { 0%,100% { transform:rotate(45deg) scale(.78); opacity:.55; } 50% { transform:rotate(225deg) scale(1.12); opacity:1; } }
.retro-header { position:relative; }.retro-header::after { content:''; position:absolute; right:0; bottom:-1px; width:84px; height:2px; background:linear-gradient(90deg,transparent,var(--lime),transparent); opacity:.82; animation:header-scan 5s var(--ease) infinite; }
@keyframes header-scan { 0%,100% { transform:translateX(-164px); opacity:0; } 18%,76% { opacity:.82; } 54% { transform:translateX(0); opacity:.82; } }
.status-dot { animation:runtime-pulse 2.1s ease-in-out infinite; }.header-status { padding-right:4px; }
@keyframes runtime-pulse { 0%,100% { transform:scale(.78); box-shadow:0 0 0 0 rgba(185,200,45,.34); } 50% { transform:scale(1); box-shadow:0 0 0 6px rgba(185,200,45,0); } }
.featured-panel { isolation:isolate; }.featured-panel::selection { background:var(--lime); }.featured-panel::before { z-index:0; }.featured-panel > * { position:relative; z-index:1; }
.featured-panel::marker { display:none; }.featured-copy::after { content:'SELECT / LAUNCH / PLAY'; position:absolute; top:20px; right:25px; color:rgba(22,24,21,.22); font:8px var(--font-mono); letter-spacing:.14em; }
.featured-media::before { content:''; position:absolute; z-index:3; inset:10px; border:1px solid rgba(237,240,231,.18); clip-path:polygon(0 0, 26px 0, 26px 1px, 100% 1px, 100% 27px, calc(100% - 1px) 27px, calc(100% - 1px) 100%, calc(100% - 27px) 100%, calc(100% - 27px) calc(100% - 1px), 1px calc(100% - 1px), 1px calc(100% - 27px), 0 calc(100% - 27px)); pointer-events:none; opacity:.72; }
.collection-card, .game-card { isolation:isolate; }.collection-card::before, .game-card::before { content:''; position:absolute; z-index:2; inset:0; pointer-events:none; opacity:0; background:radial-gradient(250px circle at var(--pointer-x,50%) var(--pointer-y,50%), rgba(232,249,85,.36), transparent 42%); mix-blend-mode:soft-light; transition:opacity .26s var(--ease); }.collection-card:hover::before, .game-card:hover::before { opacity:1; }
.collection-card::after { transition:opacity .28s, transform .5s var(--ease); }.collection-card:hover::after { transform:scale(1.13) rotate(2deg); }
.game-card { position:relative; clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }.game-card::after { content:''; position:absolute; z-index:4; top:0; left:-34%; width:20%; height:100%; pointer-events:none; background:linear-gradient(90deg, transparent, rgba(255,255,255,.52), transparent); transform:skewX(-20deg); transition:left .56s var(--ease); }.game-card:hover::after { left:118%; }
.game-card-media::before { content:'OPEN'; position:absolute; z-index:3; right:12px; bottom:11px; padding:5px 6px; border:1px solid rgba(238,240,232,.3); color:rgba(238,240,232,.86); background:rgba(15,18,15,.48); font:8px var(--font-mono); letter-spacing:.1em; opacity:0; transform:translateY(7px); transition:opacity .24s var(--ease), transform .24s var(--ease); }.game-card:hover .game-card-media::before { opacity:1; transform:translateY(0); }
.retro-button-primary { position:relative; overflow:hidden; }.retro-button-primary::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg,transparent 24%,rgba(255,255,255,.42) 46%,transparent 64%); transform:translateX(-130%); transition:transform .52s var(--ease); }.retro-button-primary:hover::after { transform:translateX(130%); }
.catalog-group-heading { position:relative; }.catalog-group-heading::after { content:''; position:absolute; right:0; bottom:-1px; width:34px; height:2px; background:var(--lime); transition:width .4s var(--ease); }.catalog-group:hover .catalog-group-heading::after { width:112px; }
.motion-ready .reveal-target { opacity:0; transform:translateY(22px); filter:blur(3px); transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); transition-delay:var(--reveal-delay,0ms); }.motion-ready .reveal-target.is-revealed { opacity:1; transform:translateY(0); filter:none; }
.motion-ready .game-card { transition:transform .3s var(--ease), box-shadow .3s, opacity .56s var(--ease), filter .56s var(--ease); }
@media (max-width:760px) { .brand-mark i { width:7px; height:7px; margin-left:5px; }.featured-copy::after { top:14px; right:18px; font-size:7px; }.featured-media::before { inset:8px; }.game-card-media::before { display:none; } }
@media (prefers-reduced-motion: reduce) { .brand-mark i, .retro-header::after, .status-dot { animation:none !important; } .collection-card::before, .game-card::before, .game-card::after, .game-card-media::before, .retro-button-primary::after { display:none; } }
.game-card.is-current { border-color:rgba(112,124,28,.68); box-shadow:0 0 0 2px rgba(185,200,45,.16), 11px 14px 0 rgba(25,28,25,.1); }
.game-card.is-current .card-state { color:var(--lime-bright); }.game-card.is-current .game-card-media::after { background:linear-gradient(0deg, rgba(10,12,10,.77), rgba(185,200,45,.11) 60%, transparent); }
@media (prefers-reduced-motion: reduce) { .game-card.is-current { box-shadow:0 0 0 2px rgba(185,200,45,.2); } }
.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%; background:none; opacity:1; mix-blend-mode:normal; }


/* Native 3D card lab: PLAYCHIVE tilt / depth / quick-view ----------------- */
.catalog-group .catalog-grid { perspective:1180px; perspective-origin:50% 38%; }
.card-quickview { position:fixed; z-index:100; top:var(--tooltip-y,0); left:var(--tooltip-x,0); display:flex; align-items:center; gap:7px; max-width:calc(100vw - 28px); padding:6px 8px; border:1px solid rgba(24,28,24,.82); background:rgba(232,249,85,.96); color:var(--ink); box-shadow:4px 4px 0 rgba(24,28,24,.78); font:8px/1 var(--font-mono); letter-spacing:.075em; pointer-events:none; opacity:0; transform:translate3d(0,8px,0) rotate(-2deg); transition:opacity .18s var(--ease), transform .25s var(--ease); }
.card-quickview span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.card-quickview i { width:5px; height:5px; flex:0 0 auto; background:var(--ink); transform:rotate(45deg); }.card-quickview.is-visible { opacity:1; transform:translate3d(0,0,0) rotate(-2deg); }
@media (hover:hover) and (pointer:fine) {
  .game-card.is-tilt-ready { transform-style:preserve-3d; will-change:transform; transition:transform .34s cubic-bezier(.16,1,.3,1), box-shadow .34s var(--ease), border-color .26s var(--ease); }
  .game-card.is-tilting { z-index:5; transform:translate3d(0,-8px,0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale3d(1.018,1.018,1.018); border-color:rgba(23,27,22,.9); box-shadow:calc(15px + var(--tilt-shift,0px)) 24px 0 rgba(24,28,24,.16), 0 28px 45px rgba(24,28,24,.14); }
  .game-card.is-tilting .game-card-media { transform:translate3d(var(--tilt-shift,0px),0,24px); transition:transform .22s var(--ease); }
  .game-card.is-tilting .game-card-media img { transform:scale(1.105); filter:saturate(.92) contrast(1.11); }
  .game-card.is-tilting .game-card-body { transform:translate3d(0,0,14px); transition:transform .22s var(--ease); }
  .game-card.is-tilting .card-overline { color:var(--ink); }.game-card.is-tilting .card-state { color:var(--lime-bright); text-shadow:0 1px 8px rgba(215,235,65,.38); }
  .game-card.is-tilting::before { opacity:.92; background:radial-gradient(210px circle at var(--pointer-x,50%) var(--pointer-y,50%), rgba(232,249,85,.52), transparent 44%); }
  .game-card.is-tilting::after { left:123%; transition:left .38s var(--ease); }
  .game-card.is-tilting .retro-button-compact { transform:translate3d(var(--tilt-shift,0px),0,20px); }
}
.game-card:focus-within { z-index:4; border-color:var(--ink); box-shadow:0 0 0 2px rgba(185,200,45,.36), 10px 14px 0 rgba(25,28,25,.1); }
@media (hover:none), (pointer:coarse), (prefers-reduced-motion:reduce) { .card-quickview { display:none !important; }.game-card.is-tilting, .game-card.is-tilt-ready { transform:none !important; }.game-card.is-tilting .game-card-media, .game-card.is-tilting .game-card-body, .game-card.is-tilting .retro-button-compact { transform:none !important; } }


/* React Bits-inspired local visual suite: depth, accordion, waves and eye */
.brand-mark { position:relative; }.brand-mark .evil-eye { width:36px; height:20px; margin-left:8px; border:1px solid rgba(24,28,24,.58); background:rgba(21,25,18,.96); box-shadow:0 0 0 3px rgba(185,200,45,.1), 3px 3px 0 rgba(24,28,24,.12); transform:skewX(-8deg); }
.brand-mark .evil-eye.is-unavailable { display:none; }
.gradient-waves { position:absolute; z-index:2; inset:0; width:100%; height:100%; pointer-events:none; mix-blend-mode:screen; opacity:.48; transition:opacity .5s var(--ease); }.gradient-waves.is-unavailable { display:none; }.featured-panel:hover .gradient-waves { opacity:.7; }
.depth-deck { position:absolute; z-index:5; right:12px; bottom:12px; width:min(67%,300px); height:46%; min-height:134px; perspective:860px; perspective-origin:52% 55%; cursor:grab; touch-action:pan-y; user-select:none; outline:none; }.depth-deck:active { cursor:grabbing; }.depth-deck:focus-visible { outline:2px solid var(--lime-bright); outline-offset:3px; }
.depth-deck-stage { position:absolute; inset:0; transform-style:preserve-3d; }.depth-deck-card { position:absolute; top:50%; left:50%; width:73%; height:87%; overflow:hidden; padding:0; border:1px solid rgba(238,240,231,.5); border-radius:0; background:#101410; box-shadow:0 22px 36px -16px rgba(0,0,0,.75); transform-style:preserve-3d; transform-origin:center; cursor:pointer; will-change:transform,opacity,filter; transition-property:transform,opacity,filter; transition-timing-function:cubic-bezier(.16,1,.3,1); }.depth-deck-card img { width:100%; height:100%; object-fit:cover; opacity:.9; pointer-events:none; -webkit-user-drag:none; }.depth-deck-card::after { content:''; position:absolute; inset:0; background:linear-gradient(120deg,rgba(11,14,11,.64),transparent 48%), linear-gradient(0deg,rgba(11,14,11,.75),transparent 50%); pointer-events:none; }.depth-deck-card span { position:absolute; z-index:1; top:8px; right:8px; color:var(--lime-bright); font:8px var(--font-mono); letter-spacing:.12em; text-shadow:0 1px 6px #000; }.depth-deck-card.is-depth-active { border-color:var(--lime-bright); box-shadow:0 0 0 2px rgba(215,235,65,.22),0 24px 38px -13px rgba(0,0,0,.78); }.depth-deck-hint { position:absolute; z-index:140; right:7px; bottom:7px; color:rgba(238,240,231,.72); font:7px var(--font-mono); letter-spacing:.12em; text-shadow:0 1px 4px #000; pointer-events:none; }
.accordion-genre-strip { display:flex; height:236px; gap:10px; perspective:1200px; perspective-origin:50% 45%; }.accordion-genre-strip .collection-card { flex:1 1 0; min-width:0; min-height:0; transform-style:preserve-3d; transform-origin:center; filter:grayscale(.72) brightness(.8); transition:flex-grow .58s cubic-bezier(.16,1,.3,1), transform .58s cubic-bezier(.16,1,.3,1), filter .45s var(--ease), box-shadow .45s var(--ease); }.accordion-genre-strip .collection-card:hover, .accordion-genre-strip .collection-card:focus-visible { flex-grow:4.4; transform:translateY(-4px) rotateY(0); filter:grayscale(0) brightness(1); box-shadow:0 18px 36px -18px rgba(24,28,24,.48); z-index:2; }.accordion-genre-strip .collection-card:not(:hover) { transform:rotateY(-7deg); }.accordion-genre-strip .collection-card b, .accordion-genre-strip .collection-card small { opacity:.05; transform:translateX(-12px); transition:opacity .28s var(--ease),transform .35s var(--ease); }.accordion-genre-strip .collection-card:hover b, .accordion-genre-strip .collection-card:hover small, .accordion-genre-strip .collection-card:focus-visible b, .accordion-genre-strip .collection-card:focus-visible small { opacity:1; transform:none; }.accordion-genre-strip .collection-card:hover::before { opacity:.56; }
.elastic-depth-control { display:flex; align-items:center; gap:8px; min-width:188px; padding:5px 7px; border:1px solid var(--line-strong); background:rgba(255,255,255,.24); color:var(--ink-muted); font:8px var(--font-mono); letter-spacing:.075em; transition:transform .24s var(--ease),border-color .24s,box-shadow .24s; }.elastic-depth-control > span { color:var(--lime); font-size:13px; transition:transform .22s var(--ease); }.elastic-depth-control label { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:6px; flex:1; }.elastic-depth-control label b { font:inherit; text-transform:uppercase; }.elastic-depth-control input { appearance:none; width:100%; height:5px; border-radius:99px; background:linear-gradient(90deg,var(--lime) 0 var(--range-fill,63%),rgba(24,28,24,.22) var(--range-fill,63%) 100%); cursor:grab; touch-action:none; }.elastic-depth-control input:active { cursor:grabbing; }.elastic-depth-control input::-webkit-slider-thumb { appearance:none; width:12px; height:12px; border:1px solid var(--ink); border-radius:50%; background:var(--paper); box-shadow:2px 2px 0 rgba(24,28,24,.22); }.elastic-depth-control output { width:28px; color:var(--ink); text-align:right; }.elastic-depth-control:hover,.elastic-depth-control.is-adjusting { border-color:var(--ink); box-shadow:3px 3px 0 rgba(24,28,24,.12); transform:translateY(-1px) scale(1.025); }.elastic-depth-control.is-adjusting > span:first-child { animation:elastic-nudge .25s ease-in-out infinite alternate; }.elastic-depth-control.is-adjusting > span:last-child { animation:elastic-nudge .25s .08s ease-in-out infinite alternate-reverse; }@keyframes elastic-nudge { from{transform:translateX(0) scale(1)}to{transform:translateX(4px) scale(1.24)} }
@media (max-width:1100px) { .depth-deck { width:min(73%,270px); }.accordion-genre-strip { height:218px; } }
@media (max-width:760px) { .brand-mark .evil-eye { width:29px; height:17px; margin-left:6px; }.gradient-waves { opacity:.27; }.depth-deck { right:9px; bottom:9px; width:58%; height:40%; min-height:96px; }.depth-deck-card { width:78%; }.depth-deck-hint { display:none; }.accordion-genre-strip { display:grid; grid-template-columns:1fr 1fr; height:auto; perspective:none; }.accordion-genre-strip .collection-card,.accordion-genre-strip .collection-card:not(:hover) { min-height:126px; transform:none; filter:none; }.accordion-genre-strip .collection-card:hover,.accordion-genre-strip .collection-card:focus-visible { flex-grow:initial; transform:translateY(-3px); }.accordion-genre-strip .collection-card b,.accordion-genre-strip .collection-card small { opacity:1; transform:none; }.catalog-tools { flex-wrap:wrap; }.elastic-depth-control { order:3; width:100%; min-width:0; }.elastic-depth-control label { grid-template-columns:auto 1fr; } }
@media (prefers-reduced-motion:reduce) { .gradient-waves { display:none; }.depth-deck { display:none; }.accordion-genre-strip .collection-card,.accordion-genre-strip .collection-card:not(:hover) { transform:none !important; filter:none; }.accordion-genre-strip .collection-card b,.accordion-genre-strip .collection-card small { opacity:1; transform:none; }.elastic-depth-control.is-adjusting > span { animation:none; } }
.evil-eye-fallback { display:none; position:relative; width:36px; height:20px; margin-left:8px; overflow:hidden; border:1px solid rgba(24,28,24,.78); background:radial-gradient(ellipse at 50% 50%,#d7eb41 0 19%,#93b720 22%,#26330c 45%,#141810 68%); box-shadow:0 0 12px rgba(185,200,45,.42),3px 3px 0 rgba(24,28,24,.12); transform:skewX(-8deg); }.evil-eye-fallback::before { content:''; position:absolute; inset:2px 3px; border-radius:50%; border-top:2px solid rgba(234,247,134,.72); border-bottom:2px solid rgba(18,23,14,.86); }.evil-eye-fallback i { position:absolute; top:50%; left:50%; width:7px; height:13px; border-radius:50%; background:#11150e; box-shadow:0 0 0 2px rgba(215,235,65,.18); transform:translate(-50%,-50%); animation:eye-scan 3.2s ease-in-out infinite; }@keyframes eye-scan { 0%,100%{margin-left:-6px}50%{margin-left:6px} }.evil-eye.is-unavailable + .evil-eye-fallback { display:inline-block; }.evil-eye:not(.is-unavailable) + .evil-eye-fallback { display:none; }@media (max-width:760px){.evil-eye-fallback{width:29px;height:17px;margin-left:6px}}@media (prefers-reduced-motion:reduce){.evil-eye-fallback i{animation:none}}
.waves-fallback { display:none; position:absolute; z-index:1; inset:auto -20% -18% -20%; height:58%; opacity:.42; pointer-events:none; mix-blend-mode:screen; background:repeating-radial-gradient(ellipse at 48% 110%,rgba(222,245,96,.65) 0 1px,transparent 2px 18px),linear-gradient(180deg,transparent,rgba(95,131,23,.2)); transform:perspective(380px) rotateX(62deg) scale(1.5); transform-origin:bottom; animation:waves-fallback-roll 7s linear infinite; }.gradient-waves.is-unavailable + .waves-fallback { display:block; }@keyframes waves-fallback-roll { from{background-position:0 0,0 0}to{background-position:0 64px,0 0} }@media (prefers-reduced-motion:reduce){.waves-fallback{animation:none}}


/* ═══════════════════════════════════════════════════════════════
   THEME TOKENS — the depth system reads these surfaces as light.
   ═══════════════════════════════════════════════════════════════ */
:root, html[data-theme='light'] {
  --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);
  --lime: #9fac25;
  --lime-bright: #c4d833;
  --lime-fade: rgba(159,172,37,.16);
  --theme-grid: rgba(24,28,24,.052);
  --theme-glow: rgba(159,172,37,.12);
  --surface-raised: rgba(255,255,251,.43);
  --surface-footer: rgba(235,235,228,.42);
  --depth-card-surface: #101410;
  --depth-card-border: rgba(238,240,231,.5);
  --depth-card-shadow: rgba(12,14,12,.74);
  --depth-overlay-a: rgba(11,14,11,.64);
  --depth-overlay-b: rgba(11,14,11,.75);
  --depth-active-ring: rgba(190,214,45,.23);
  --depth-active-shadow: rgba(12,14,12,.78);
  --depth-panel-tint: .16;
  --wave-line: rgba(212,228,84,.62);
  --wave-fog: rgba(94,123,27,.20);
  --eye-shell: #d7eb41;
  --eye-core: #11150e;
  --toggle-track: #c8c7bf;
  --toggle-knob: #f8f7ef;
  --toggle-icon: #4b5047;
  --detail-grid: rgba(23,26,23,.10);
  --detail-media-fade: rgba(245,245,239,.94);
}
html[data-theme='dark'] {
  --paper: #10140f;
  --paper-deep: #171d15;
  --ink: #edf2e8;
  --ink-soft: #bec8b8;
  --ink-muted: #8d9988;
  --line: rgba(225,240,218,.15);
  --line-strong: rgba(225,240,218,.38);
  --glass: rgba(24,31,22,.76);
  --glass-deep: rgba(32,40,29,.9);
  --lime: #b9d83b;
  --lime-bright: #d9fa5d;
  --lime-fade: rgba(185,216,59,.18);
  --theme-grid: rgba(222,241,206,.052);
  --theme-glow: rgba(185,216,59,.14);
  --surface-raised: rgba(25,32,23,.88);
  --surface-footer: rgba(18,24,16,.84);
  --depth-card-surface: #071008;
  --depth-card-border: rgba(218,247,122,.7);
  --depth-card-shadow: rgba(0,0,0,.92);
  --depth-overlay-a: rgba(0,9,2,.48);
  --depth-overlay-b: rgba(0,6,1,.78);
  --depth-active-ring: rgba(217,250,93,.42);
  --depth-active-shadow: rgba(0,0,0,.95);
  --depth-panel-tint: .31;
  --wave-line: rgba(202,248,82,.78);
  --wave-fog: rgba(73,132,45,.28);
  --eye-shell: #c9f45d;
  --eye-core: #030702;
  --toggle-track: #27371e;
  --toggle-knob: #d9fa5d;
  --toggle-icon: #c8e975;
  --detail-grid: rgba(225,240,218,.08);
  --detail-media-fade: rgba(17,22,15,.96);
}
html[data-theme] body, html[data-theme] #wad-picker { background:var(--paper); color:var(--ink); }
html[data-theme] #wad-picker::before { background:linear-gradient(var(--theme-grid) 1px,transparent 1px),linear-gradient(90deg,var(--theme-grid) 1px,transparent 1px),radial-gradient(circle at 85% 11%,color-mix(in srgb,var(--paper) 20%,transparent),transparent 28%),radial-gradient(circle at 11% 40%,var(--theme-glow),transparent 21%); background-size:36px 36px,36px 36px,auto,auto; }
html[data-theme='dark'] #wad-picker::after { opacity:.16; mix-blend-mode:screen; }
html[data-theme] .spatial-panel { box-shadow:16px 17px 0 color-mix(in srgb,var(--ink) 7%,transparent),0 16px 40px color-mix(in srgb,var(--ink) 11%,transparent); }
html[data-theme] .spatial-panel::before { border-color:color-mix(in srgb,var(--ink) 18%,transparent); }
html[data-theme] .featured-footer { background:var(--surface-footer); }
html[data-theme] .game-card { background:var(--surface-raised); box-shadow:calc(7px + var(--card-index,0) * 1px) calc(8px + var(--card-index,0) * 1px) 0 color-mix(in srgb,var(--ink) 9%,transparent); }
html[data-theme='dark'] .game-card:hover { box-shadow:12px 16px 0 color-mix(in srgb,var(--lime) 16%,transparent),0 20px 35px rgba(0,0,0,.36); }
html[data-theme] .filter-chip, html[data-theme] .filter-group select, html[data-theme] .drop-zone { background:color-mix(in srgb,var(--glass-deep) 58%,transparent); color:var(--ink-soft); }
html[data-theme='dark'] .collection-card.collection-action, html[data-theme='dark'] .collection-card.collection-explore, html[data-theme='dark'] .collection-card.collection-experimental { background:linear-gradient(145deg,#20291d,#121811); color:var(--ink); }
html[data-theme='dark'] .collection-card.collection-strategy { background:linear-gradient(135deg,#34462c,#182214); color:var(--ink); }
html[data-theme='dark'] .collection-card.collection-arcade { background:linear-gradient(135deg,#5d7024,#182110); color:#f5fae8; }
html[data-theme='dark'] .collection-card.collection-gems { background:linear-gradient(135deg,#755a27,#261c0c); color:#fff1cf; }
html[data-theme='dark'] .collection-card.collection-rhythm { background:linear-gradient(135deg,#522f44,#231320); }
html[data-theme] .depth-deck-card { background:var(--depth-card-surface); border-color:var(--depth-card-border); box-shadow:0 22px 36px -16px var(--depth-card-shadow); }
html[data-theme] .depth-deck-card::after { background:linear-gradient(120deg,var(--depth-overlay-a),transparent 48%),linear-gradient(0deg,var(--depth-overlay-b),transparent 50%); }
html[data-theme] .depth-deck-card.is-depth-active { border-color:var(--lime-bright); box-shadow:0 0 0 2px var(--depth-active-ring),0 24px 38px -13px var(--depth-active-shadow); }
html[data-theme='dark'] .depth-deck-card { filter:brightness(.96); }
html[data-theme] .waves-fallback { background:repeating-radial-gradient(ellipse at 48% 110%,var(--wave-line) 0 1px,transparent 2px 18px),linear-gradient(180deg,transparent,var(--wave-fog)); }
html[data-theme] .evil-eye-fallback { background:radial-gradient(ellipse at 50% 50%,var(--eye-shell) 0 19%,color-mix(in srgb,var(--eye-shell) 70%,#29370d) 22%,#26330c 45%,#141810 68%); }
html[data-theme] .evil-eye-fallback i { background:var(--eye-core); box-shadow:0 0 0 2px color-mix(in srgb,var(--eye-shell) 18%,transparent); }
/* Header theme switch */
.header-utility { justify-self:end; display:flex; align-items:center; gap:14px; }.theme-toggle { display:inline-flex; align-items:center; gap:7px; min-height:28px; padding:0; border:0; background:transparent; color:var(--ink-muted); cursor:pointer; font:8px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }.theme-toggle-track { position:relative; display:block; width:30px; height:16px; border:1px solid var(--line-strong); border-radius:99px; background:var(--toggle-track); box-shadow:inset 0 1px 2px color-mix(in srgb,var(--ink) 20%,transparent); transition:background .32s var(--ease),border-color .32s var(--ease),box-shadow .32s var(--ease); }.theme-toggle-track::before { content:'☼'; position:absolute; left:3px; top:0; color:var(--toggle-icon); font:10px/14px var(--font-mono); transition:opacity .22s var(--ease); }.theme-toggle-track::after { content:'◐'; position:absolute; right:3px; top:0; color:var(--toggle-icon); font:10px/14px var(--font-mono); opacity:0; transition:opacity .22s var(--ease); }.theme-toggle-track i { position:absolute; z-index:1; top:2px; left:2px; width:10px; height:10px; border-radius:50%; background:var(--toggle-knob); box-shadow:0 1px 3px rgba(0,0,0,.28); transition:transform .34s var(--ease),background .34s var(--ease); }.theme-toggle[aria-pressed='true'] .theme-toggle-track i { transform:translateX(14px); }.theme-toggle[aria-pressed='true'] .theme-toggle-track::before { opacity:0; }.theme-toggle[aria-pressed='true'] .theme-toggle-track::after { opacity:1; }.theme-toggle:hover .theme-toggle-track,.theme-toggle:focus-visible .theme-toggle-track { border-color:var(--lime); box-shadow:0 0 0 3px var(--lime-fade); }.theme-toggle:focus-visible { outline:none; }.theme-toggle:focus-visible [data-theme-label] { color:var(--ink); }
/* Theme transitions are opt-in to avoid first-load animation and respect reduced motion. */
html.theme-transitioning #wad-picker,html.theme-transitioning .spatial-panel,html.theme-transitioning .game-card,html.theme-transitioning .filter-panel,html.theme-transitioning .collection-card,html.theme-transitioning .retro-header,html.theme-transitioning .retro-footer,html.theme-transitioning .featured-footer { transition:background-color .34s var(--ease),color .3s var(--ease),border-color .34s var(--ease),box-shadow .34s var(--ease),filter .34s var(--ease); }
@media (max-width:760px){.header-utility{gap:8px}.header-utility .header-status{justify-self:auto}.theme-toggle [data-theme-label]{display:none}.theme-toggle{min-width:30px}.theme-toggle-track{width:30px}}@media (max-width:420px){.header-utility .header-status{display:none}}@media (prefers-reduced-motion:reduce){html.theme-transitioning #wad-picker,html.theme-transitioning .spatial-panel,html.theme-transitioning .game-card,html.theme-transitioning .filter-panel,html.theme-transitioning .collection-card,html.theme-transitioning .retro-header,html.theme-transitioning .retro-footer,html.theme-transitioning .featured-footer{transition:none}.theme-toggle-track,.theme-toggle-track i,.theme-toggle-track::before,.theme-toggle-track::after{transition:none}}


/* Theme hotfix: never cross-fade page-scale surfaces. A half-dark surface with
   half-light typography is worse than a deliberate, instant theme swap. */
html.theme-transitioning #wad-picker,
html.theme-transitioning .spatial-panel,
html.theme-transitioning .game-card,
html.theme-transitioning .filter-panel,
html.theme-transitioning .collection-card,
html.theme-transitioning .retro-header,
html.theme-transitioning .retro-footer,
html.theme-transitioning .featured-footer { transition: none !important; }
html[data-theme='light'] { --glass:rgba(255,255,251,.62); --glass-deep:rgba(248,248,241,.94); --surface-raised:rgba(255,255,251,.78); }
html[data-theme='dark'] { --glass:rgba(19,26,18,.92); --glass-deep:rgba(24,33,22,.98); --surface-raised:rgba(22,30,20,.96); --ink-soft:#cbd6c5; }
html[data-theme] .featured-copy { background:var(--glass-deep); }
html[data-theme] .filter-panel,html[data-theme] .game-card { backdrop-filter:none; }
/* React Bits Magnet, adapted natively for launch CTA buttons only. */
[data-magnet] { --magnet-x:0px; --magnet-y:0px; will-change:transform; }
[data-magnet].is-magnet-active { transform:translate(calc(var(--magnet-x) - 2px),calc(var(--magnet-y) - 2px)) !important; transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s var(--ease),background-color .22s var(--ease),color .22s var(--ease); }
[data-magnet]:not(.is-magnet-active) { transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .24s var(--ease),background-color .24s var(--ease),color .24s var(--ease); }
html[data-theme='dark'] [data-magnet].is-magnet-active { box-shadow:5px 5px 0 rgba(217,250,93,.44),0 0 20px rgba(185,216,59,.14); }
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){[data-magnet],[data-magnet].is-magnet-active{transform:none !important;transition:none;will-change:auto}}


/* Performance budget: visual effects progressively enhance capable devices only. */
html[data-visual-quality='static'] .depth-deck { display:none; }
html[data-visual-quality='static'] .waves-fallback,
html[data-visual-quality='static'] .evil-eye-fallback { animation:none; }
.is-status-rotating { display:inline-block; will-change:transform,opacity; }
.is-status-rotating.is-status-exiting { opacity:0; transform:translateY(-4px); transition:transform 140ms ease,opacity 140ms ease; }
.is-status-rotating.is-status-entering { animation:retroplay-status-in 220ms var(--ease); }
@keyframes retroplay-status-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){.is-status-rotating,.is-status-rotating.is-status-exiting,.is-status-rotating.is-status-entering{animation:none;transition:none;transform:none}}

/* PLAYCHIVE brand lockup: PLAY + CHIVE / THE PLAYABLE ARCHIVE */
.loading-mark { display:flex; flex-direction:column; align-items:flex-start; gap:8px; letter-spacing:0; }
.loading-mark > strong, .brand-lockup > strong { display:flex; align-items:baseline; gap:.08em; font-family:var(--font-display); font-weight:700; letter-spacing:-.095em; line-height:.88; }
.loading-mark > strong { font-size:clamp(50px,9vw,96px); }
.loading-mark > strong span, .brand-lockup > strong span { color:#f3f2ed; }
.loading-mark > strong b, .brand-lockup > strong b { color:var(--lime-bright); font-weight:700; }
.loading-mark > small, .brand-lockup > small { display:block; color:rgba(237,237,230,.62); font:500 9px/1 var(--font-mono); letter-spacing:.24em; }
.loading-mark > small::before, .brand-lockup > small::before { content:'// '; color:var(--lime-bright); }
.brand-mark { gap:10px; letter-spacing:0; }
.brand-lockup { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.brand-lockup > strong { font-size:clamp(22px,2.05vw,31px); }
.brand-lockup > small { color:var(--ink-muted); font-size:6px; letter-spacing:.17em; }
.brand-lockup > small::before { color:var(--lime); }
.brand-mark .brand-lockup > strong span { color:var(--ink); }
.brand-mark .brand-lockup > strong b { color:var(--lime); }
.brand-mark .evil-eye { margin-left:3px; }
.brand-mark:hover .brand-lockup > strong b, .brand-mark:focus-visible .brand-lockup > strong b { color:var(--lime-bright); }
@media (max-width:760px) {
  .brand-lockup > strong { font-size:25px; }
  .brand-lockup > small { font-size:5px; letter-spacing:.13em; }
  .brand-mark { gap:7px; }
}
@media (max-width:420px) {
  .brand-lockup > strong { font-size:22px; }
  .brand-lockup > small { font-size:4.5px; letter-spacing:.1em; }
}


/* Drift Wall: local React Bits-inspired loading backdrop. It remains decorative,
   pointer-inert and is never created for eco/static quality tiers. */
.loading-drift-wall { position:absolute; inset:-18vh -12vw; z-index:0; display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:16px; overflow:hidden; opacity:.34; pointer-events:none; transform:perspective(1200px) rotateX(14deg) rotateY(-10deg) translate3d(0,4vh,-120px); transform-origin:center; mask-image:linear-gradient(90deg,transparent 0%,black 16%,black 84%,transparent 100%),linear-gradient(180deg,transparent 0%,black 18%,black 76%,transparent 100%); }
.loading-drift-column { display:grid; align-content:start; gap:14px; min-width:0; animation:loading-drift-up 26s linear infinite; will-change:transform; }
.loading-drift-column:nth-child(even) { animation-name:loading-drift-down; animation-duration:31s; }
.loading-drift-column:nth-child(3) { animation-duration:28s; }.loading-drift-column:nth-child(4) { animation-duration:34s; }
.loading-drift-column i { display:block; height:112px; border:1px solid color-mix(in srgb,var(--lime) 38%,transparent); border-radius:10px; background-image:linear-gradient(135deg,color-mix(in srgb,var(--paper) 17%,transparent),rgba(0,0,0,.52)),var(--drift-image); background-size:cover; background-position:center; box-shadow:0 18px 35px rgba(0,0,0,.22); filter:grayscale(.34) saturate(.76) contrast(1.02); }
.loading-drift-column i:nth-child(2) { background-image:linear-gradient(135deg,color-mix(in srgb,var(--lime) 12%,transparent),rgba(0,0,0,.74)),var(--drift-next); }.loading-drift-column i:nth-child(3) { background-image:linear-gradient(135deg,rgba(0,0,0,.72),color-mix(in srgb,var(--lime) 9%,transparent)),var(--drift-image); }
.loading-inner { z-index:2; }
@keyframes loading-drift-up { from { transform:translate3d(0,4%,0); } to { transform:translate3d(0,-31%,0); } }
@keyframes loading-drift-down { from { transform:translate3d(0,-28%,0); } to { transform:translate3d(0,7%,0); } }
#loading-screen:not(.active) .loading-drift-column { animation-play-state:paused; }
html[data-visual-quality='static'] .loading-drift-wall { display:none; }
@media (prefers-reduced-motion:reduce){.loading-drift-wall{display:none}.loading-inner{z-index:2}}

/* Offline Pack: one-tap local archive download --------------------------- */
.offline-pack-button { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:0 9px; border:1px solid var(--line-strong); background:var(--glass); color:var(--ink); cursor:pointer; font:8px var(--font-mono); letter-spacing:.055em; text-transform:uppercase; transition:transform .2s var(--ease),background .2s,border-color .2s,box-shadow .2s; }
.offline-pack-button > span:first-child { color:var(--lime); font-size:13px; line-height:1; }
.offline-pack-button:hover,.offline-pack-button:focus-visible { border-color:var(--ink); background:var(--lime-fade); box-shadow:3px 3px 0 color-mix(in srgb,var(--ink) 22%,transparent); transform:translate(-1px,-1px); }
.offline-pack-button:active { transform:translate(0,0) scale(.97); }
.offline-pack-button:disabled { cursor:wait; opacity:.7; }
.offline-pack-button[data-offline-state='ready'] { border-color:var(--lime); }
.offline-pack-button[data-offline-state='ready'] > span:first-child { color:var(--lime-bright); }
.offline-pack-status { max-width:82px; overflow:hidden; color:var(--ink-muted); font:7px var(--font-mono); letter-spacing:.04em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
html[data-theme='dark'] .offline-pack-button { background:var(--glass-deep); }
@media (max-width:760px) { .offline-pack-status { display:none; }.offline-pack-button > span:last-child { display:none; }.offline-pack-button { width:30px; justify-content:center; padding:0; }.header-utility { gap:8px; } }
@media (prefers-reduced-motion:reduce) { .offline-pack-button { transition:none; } }

/* PLAYCHIVE wordmark: the archive opens on approach ---------------------- */
.brand-word { display:inline-flex; align-items:baseline; gap:0; white-space:nowrap; letter-spacing:-.095em; }
.brand-play { color:var(--ink); }
.brand-chive { position:relative; display:inline-block; width:5.05ch; overflow:clip; color:var(--lime); transition:width .34s var(--ease); }
.brand-short,.brand-long { display:block; color:inherit; }
.brand-long { position:absolute; inset:0 auto auto 0; opacity:0; clip-path:inset(0 100% 0 0); transform:translateX(-.12em); transition:opacity .18s var(--ease),clip-path .34s var(--ease),transform .34s var(--ease); }
.brand-mark:hover .brand-chive,.brand-mark:focus-visible .brand-chive { width:7.05ch; }
.brand-mark:hover .brand-short,.brand-mark:focus-visible .brand-short { opacity:0; }
.brand-mark:hover .brand-long,.brand-mark:focus-visible .brand-long { opacity:1; clip-path:inset(0 0 0 0); transform:translateX(0); }
.brand-mark .brand-word { font-size:inherit; }
.loading-mark .brand-word { font-size:inherit; }
.loading-mark .brand-play { color:#f3f2ed; }
.brand-mark .brand-lockup > strong .brand-chive,.brand-mark .brand-lockup > strong .brand-chive > span { color:var(--lime); }
.loading-mark > strong .brand-chive,.loading-mark > strong .brand-chive > span { color:var(--lime-bright); width:5.05ch; }
.loading-mark .brand-chive { animation:brand-loading-open 1.1s .42s var(--ease) both; }
.loading-mark .brand-short { animation:brand-loading-short 1.1s .42s var(--ease) both; }
.loading-mark .brand-long { animation:brand-loading-long 1.1s .42s var(--ease) both; }
@keyframes brand-loading-open { from { width:5.05ch; } to { width:7.05ch; } }
@keyframes brand-loading-short { 0%,38% { opacity:1; } 58%,100% { opacity:0; } }
@keyframes brand-loading-long { 0%,38% { opacity:0; clip-path:inset(0 100% 0 0); transform:translateX(-.12em); } 58% { opacity:1; clip-path:inset(0 35% 0 0); transform:translateX(-.03em); } 100% { opacity:1; clip-path:inset(0 0 0 0); transform:translateX(0); } }
@media (max-width:760px) { .brand-chive { width:5ch; }.brand-mark:hover .brand-chive,.brand-mark:focus-visible .brand-chive { width:6.95ch; } }
@media (prefers-reduced-motion:reduce) { .brand-chive,.brand-long,.loading-mark .brand-chive { animation:none; transition:none; }.loading-mark .brand-chive { width:7.05ch; }.brand-short { display:none; }.brand-long { position:static; opacity:1; clip-path:none; transform:none; } }


/* Retro Audio: opt-in chiptune controls remain compact in the runtime header. */
.retro-audio { display:flex; align-items:center; gap:7px; color:var(--ink-muted); font:8px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.audio-toggle { display:inline-flex; align-items:center; gap:5px; min-height:28px; padding:0 7px; border:1px solid var(--line-strong); background:var(--surface-raised); color:var(--ink-muted); cursor:pointer; font:inherit; letter-spacing:inherit; text-transform:inherit; transition:border-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease); }
.audio-toggle:hover,.audio-toggle:focus-visible,.audio-toggle.is-audio-active { border-color:var(--lime); color:var(--ink); box-shadow:0 0 0 3px var(--lime-fade); outline:none; }.audio-toggle:active { transform:translateY(1px); }
.audio-toggle-icon { color:var(--lime); font-size:13px; line-height:1; }.audio-toggle.is-audio-active .audio-toggle-icon { animation:audio-note-pulse 1.2s steps(2,end) infinite; }@keyframes audio-note-pulse { 50% { transform:translateY(-2px) rotate(-8deg); color:var(--lime-bright); } }
.audio-volume { display:flex; align-items:center; gap:5px; color:var(--ink-muted); }.audio-volume input { width:54px; height:4px; accent-color:var(--lime); cursor:pointer; }.audio-volume span { font-size:7px; }

/* Game detail modal: a full archive-card view, populated from the catalog's canonical data. */
body.detail-open { overflow:hidden; }.game-detail-dialog { width:min(1040px,calc(100vw - 34px)); max-width:none; margin:auto; padding:0; border:1px solid var(--line-strong); background:var(--surface-raised); color:var(--ink); box-shadow:0 28px 90px rgba(0,0,0,.56),0 0 0 1px var(--lime-fade); }.game-detail-dialog::backdrop { background:color-mix(in srgb,var(--ink) 72%,transparent); backdrop-filter:blur(10px) saturate(.78); }.game-detail-dialog[open] { animation:detail-dialog-in .34s var(--ease); }@keyframes detail-dialog-in { from { opacity:0; transform:translateY(18px) scale(.985); } to { opacity:1; transform:none; } }
.game-detail-shell { position:relative; display:grid; grid-template-columns:minmax(300px,.92fr) minmax(0,1.08fr); min-height:min(650px,78vh); overflow:hidden; background:linear-gradient(145deg,color-mix(in srgb,var(--surface-raised) 95%,var(--lime-fade)),var(--surface-raised)); }.game-detail-shell::before { content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(var(--detail-grid) 1px,transparent 1px),linear-gradient(90deg,var(--detail-grid) 1px,transparent 1px); background-size:34px 34px; opacity:.42; mask-image:linear-gradient(90deg,black,transparent 70%); }
.game-detail-close { position:absolute; z-index:5; top:14px; right:14px; width:34px; height:34px; border:1px solid var(--line-strong); background:var(--surface-raised); color:var(--ink); cursor:pointer; font:22px/28px var(--font-mono); transition:border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease); }.game-detail-close:hover,.game-detail-close:focus-visible { border-color:var(--lime); color:var(--lime); transform:rotate(90deg); outline:none; }
.game-detail-media { position:relative; min-height:100%; overflow:hidden; background:var(--ink); }.game-detail-media::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg,var(--detail-media-fade) 0%,transparent 46%),linear-gradient(90deg,rgba(0,0,0,.26),transparent 65%); }.game-detail-media img { width:100%; height:100%; min-height:650px; object-fit:cover; filter:saturate(.86) contrast(1.05); }.detail-state,.detail-index { position:absolute; z-index:2; color:var(--lime-bright); font:8px var(--font-mono); letter-spacing:.12em; text-shadow:0 1px 6px #000; }.detail-state { top:18px; left:18px; padding:6px 8px; border:1px solid color-mix(in srgb,var(--lime) 48%,transparent); background:rgba(0,0,0,.46); }.detail-index { bottom:18px; left:18px; }
.game-detail-copy { position:relative; z-index:1; display:flex; flex-direction:column; padding:60px clamp(26px,4vw,54px) 38px; }.detail-overline { margin:0 0 13px; color:var(--lime); font:9px var(--font-mono); letter-spacing:.14em; text-transform:uppercase; }.game-detail-copy h2 { max-width:640px; margin:0; color:var(--ink); font:clamp(36px,5vw,68px)/.92 var(--font-display); letter-spacing:-.055em; }.detail-studio { margin:13px 0 24px; color:var(--ink-muted); font:9px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }.detail-description { max-width:62ch; margin:0; color:var(--ink); font-size:15px; line-height:1.66; }.detail-specs { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:30px 0 16px; border:1px solid var(--line); background:var(--line); }.detail-specs div { min-height:70px; padding:11px; background:var(--surface-raised); }.detail-specs dt { margin-bottom:6px; color:var(--ink-muted); font:7px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }.detail-specs dd { margin:0; color:var(--ink); font-size:11px; line-height:1.35; }.detail-credit { margin:0 0 14px; color:var(--ink-muted); font:9px/1.45 var(--font-mono); }.detail-links { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; min-height:0; margin:0 0 22px; }.detail-links a { color:var(--lime); font:8px var(--font-mono); letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }.detail-links a:hover,.detail-links a:focus-visible { color:var(--lime-bright); text-decoration:underline; text-underline-offset:4px; outline:none; }.detail-download-note { flex-basis:100%; margin:0; color:var(--ink-muted); font:8px/1.5 var(--font-mono); }.detail-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:auto; }.detail-note { max-width:58ch; margin:20px 0 0; color:var(--ink-muted); font:9px/1.5 var(--font-mono); }
.card-detail-button { align-self:center; padding:0; border:0; background:none; color:var(--ink-muted); cursor:pointer; font:8px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }.card-detail-button:hover,.card-detail-button:focus-visible { color:var(--lime); outline:none; text-decoration:underline; text-underline-offset:4px; }
@media (max-width:1050px) { .header-utility { gap:8px; }.retro-audio { order:3; }.audio-volume { display:none; }.game-detail-dialog { width:min(760px,calc(100vw - 26px)); }.game-detail-shell { grid-template-columns:39% 61%; }.game-detail-media img { min-height:620px; } }
@media (max-width:720px) { .header-utility { display:grid; grid-template-columns:auto auto; justify-content:end; }.retro-audio { grid-column:1 / -1; justify-content:end; }.audio-volume { display:flex; }.game-detail-dialog { width:calc(100vw - 16px); max-height:calc(100vh - 16px); }.game-detail-shell { display:block; overflow:auto; max-height:calc(100vh - 16px); }.game-detail-media { min-height:250px; height:33vh; }.game-detail-media img { min-height:0; height:100%; }.game-detail-copy { padding:34px 22px 28px; }.game-detail-copy h2 { font-size:43px; }.detail-specs { grid-template-columns:1fr; }.detail-actions { margin-top:6px; }.game-detail-close { top:9px; right:9px; }.detail-state { top:13px; left:13px; }.detail-index { bottom:13px; left:13px; } }
@media (prefers-reduced-motion:reduce) { .audio-toggle.is-audio-active .audio-toggle-icon,.game-detail-dialog[open] { animation:none; } }

.retro-footer-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* External experiments: execute the original host in-place when framing is allowed. */
.external-frame-dialog { width:min(1440px,calc(100vw - 26px)); max-width:none; height:min(900px,calc(100vh - 26px)); max-height:none; margin:auto; padding:0; border:1px solid var(--line-strong); background:var(--surface-raised); color:var(--ink); box-shadow:0 28px 90px rgba(0,0,0,.62),0 0 0 1px var(--lime-fade); }
.external-frame-dialog::backdrop { background:rgba(8,11,8,.82); backdrop-filter:blur(9px); }
.external-frame-dialog[open] { animation:detail-dialog-in .28s var(--ease); }
.external-frame-shell { display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:100%; }
.external-frame-header { position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 62px 15px 24px; border-bottom:1px solid var(--line); background:linear-gradient(120deg,var(--surface-raised),color-mix(in srgb,var(--lime-fade) 44%,var(--surface-raised))); }
.external-frame-header h2 { margin:0; font:clamp(22px,3vw,42px)/.95 var(--font-display); letter-spacing:-.06em; }
.external-frame-header .detail-overline { margin:0 0 7px; }
.external-frame-status { margin:8px 0 0; color:var(--ink-muted); font:9px/1.45 var(--font-mono); }
.external-frame-body { min-height:0; background:#080b08; }
.external-frame-body iframe { display:block; width:100%; height:100%; min-height:300px; border:0; background:#080b08; }
.external-frame-footer { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px 18px; border-top:1px solid var(--line); color:var(--ink-muted); font:8px/1.4 var(--font-mono); }
.external-frame-footer div { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.external-frame-footer .retro-button { min-height:32px; font-size:8px; }
@media (max-width:720px) { .external-frame-dialog { width:calc(100vw - 16px); max-height:calc(100vh - 16px); }.external-frame-header { padding:16px 48px 13px 16px; }.external-frame-footer { align-items:stretch; flex-direction:column; }.external-frame-footer div { justify-content:stretch; }.external-frame-footer .retro-button { flex:1 1 100%; } }