/* ---------------------------------------------------------------------------
   Phosphor terminal. Monochrome green on black; the box art is the only colour
   on the page. Type is monospace throughout — VT323 for display, IBM Plex Mono
   for anything you actually have to read.
   --------------------------------------------------------------------------- */
@font-face{font-family:'IBM Plex Mono';src:url(fonts/ibm-plex-mono-400.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(fonts/ibm-plex-mono-600.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'VT323';src:url(fonts/vt323-400.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}

:root{
  --bg:#061009; --bg2:#06100a; --surface:#08170e; --surface2:#0c2214;
  --line:#17482b; --line2:#1d5836;
  --text:#7dfbaf; --mid:#45cf87; --dim:#2b9a60; --dim2:#1d6b43;
  --glow:rgba(77,245,143,.32);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --display:'VT323','IBM Plex Mono',ui-monospace,monospace;
  --wrap:1440px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--text); font:14px/1.6 var(--mono); -webkit-font-smoothing:antialiased;
  /* the phosphor bloom every piece of text gets; brighter elements layer their own on top */
  text-shadow:0 0 4px rgba(77,245,143,.12);
  /* CRT texture lives *behind* the content, never on top of it: artwork and the
     detail panel paint their own opaque background and stay perfectly clean. */
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse at 50% 40%,transparent 66%,rgba(0,0,0,.42) 100%),
    repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.20) 2px 4px);
  background-attachment:fixed;
}
@media (prefers-reduced-motion:reduce){
  body{background-image:radial-gradient(ellipse at 50% 40%,transparent 66%,rgba(0,0,0,.42) 100%)}
}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
a{color:var(--text)}
button,select,input{font:inherit; color:inherit}
::selection{background:var(--text); color:#020403}

/* ---------- hero ---------- */
.hero{padding:44px 0 22px; border-bottom:1px solid var(--line2)}
.hero h1{margin:0}
/* The wordmark is block-letter art drawn as SVG rather than as text: relying on
   a font's full-block glyph to tile pixel-perfectly proved unreliable — the
   glyph is taller than a squashed line box, so rows overlapped, and gaps let
   the scanline background break the letterforms apart. */
.wordmark-svg{
  display:block; width:min(100%,640px); height:auto; color:var(--text);
  filter:drop-shadow(0 0 6px var(--glow)) drop-shadow(0 0 20px rgba(77,245,143,.20));
}
.stats{
  display:flex; flex-wrap:wrap; gap:0 26px; margin:20px 0 0;
  font-size:12.5px; text-transform:uppercase; letter-spacing:.06em;
}
.stats div{display:flex; align-items:baseline; gap:7px}
.stats dt{order:2; color:var(--dim)}
.stats dd{order:1; margin:0; color:var(--text); font-weight:600; font-variant-numeric:tabular-nums}
.stats div+div::before{content:"│"; color:var(--line2); margin-right:26px}

/* ---------- toolbar ---------- */
.toolbar{border-bottom:1px solid var(--line2)}
/* Only the search row stays put — the system pills wrap to two rows and would
   eat a lot of the viewport if the whole bar were pinned. The sticky element is
   full-bleed with the content column nested inside, so the pinned background
   spans the viewport rather than stopping at the 1440px wrap. */
.searchbar{
  position:sticky; top:0; z-index:30; padding:11px 0;
  background:rgba(4,8,6,.96); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.row-systems{padding:10px 0 12px}
.row{display:flex; gap:10px; align-items:center}
.row-search{flex-wrap:wrap}

.search{position:relative; flex:1 1 300px; min-width:220px; display:flex; align-items:center}
.search svg{display:none}
.search::before{
  content:">"; position:absolute; left:11px; top:50%; transform:translateY(-50%);
  color:var(--mid); font-weight:600; pointer-events:none;
}
.search input{
  width:100%; padding:9px 32px 9px 28px; border-radius:0;
  border:1px solid var(--line2); background:var(--surface); color:var(--text); outline:none;
}
.search input::placeholder{color:var(--dim2)}
.search input:focus{border-color:var(--mid); box-shadow:0 0 0 1px var(--mid),0 0 14px var(--glow)}
.search input::-webkit-search-cancel-button{display:none}
/* the prompt blinks while the field is untouched, like a waiting terminal */
.search:has(input:placeholder-shown):not(:focus-within)::before{
  animation:blink 1.15s steps(1,end) infinite;
}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:.15}}
@media (prefers-reduced-motion:reduce){ .search::before{animation:none} }
#qclear{
  position:absolute; right:7px; top:50%; transform:translateY(-50%);
  border:0; background:none; color:var(--dim); cursor:pointer; padding:2px 5px; line-height:1;
}
#qclear:hover{color:var(--text)}

select{
  padding:9px 28px 9px 11px; border-radius:0; border:1px solid var(--line2);
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' stroke='%232b9a60' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 8px center/11px;
  -webkit-appearance:none; appearance:none; cursor:pointer;
  text-transform:uppercase; font-size:12.5px; letter-spacing:.04em;
}
select:hover{border-color:var(--mid)}
#genre{min-width:14rem}
#sort{min-width:11rem}


.row-systems{margin-top:9px; flex-wrap:wrap; gap:7px}
.pill{
  flex:0 0 auto; display:inline-flex; align-items:baseline; gap:7px; white-space:nowrap;
  padding:5px 10px; border:1px solid var(--line); background:transparent; color:var(--dim);
  cursor:pointer; border-radius:0; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em;
}
.pill::before{content:"["; color:var(--line2)}
.pill::after{content:"]"; color:var(--line2)}
.pill:hover{color:var(--text); border-color:var(--line2)}
.pill .n{color:var(--dim2); font-variant-numeric:tabular-nums}
.pill[aria-pressed="true"]{background:var(--mid); border-color:var(--mid); color:#020403; font-weight:600}
.pill[aria-pressed="true"]::before,.pill[aria-pressed="true"]::after{color:#020403}
.pill[aria-pressed="true"] .n{color:rgba(2,4,3,.65)}

/* ---------- grid ---------- */
.count{
  color:var(--dim); font-size:12px; margin:20px 0 13px;
  text-transform:uppercase; letter-spacing:.09em; font-variant-numeric:tabular-nums;
}
.count::before{content:"── "; color:var(--line2)}
.grid{display:grid; gap:20px 16px; grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.card{
  border:0; background:none; padding:0; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:8px;
}
.art{
  position:relative; aspect-ratio:1/1; border:1px solid var(--line);
  background:var(--surface); overflow:hidden; display:grid; place-items:center;
  transition:border-color .12s, box-shadow .12s;
}
.card:hover .art,.card:focus-visible .art{border-color:var(--mid); box-shadow:0 0 16px var(--glow)}
.card:focus-visible{outline:none}
.art img{width:100%; height:100%; object-fit:contain; display:block}
.art .noart{color:var(--dim2); font-size:10px; letter-spacing:.14em; text-transform:uppercase}
.badge{
  position:absolute; top:0; right:0; z-index:2; background:var(--bg); color:var(--text);
  border-left:1px solid var(--line); border-bottom:1px solid var(--line);
  font-size:11px; font-weight:600; padding:2px 6px; font-variant-numeric:tabular-nums;
}
.meta{display:flex; flex-direction:column; gap:2px; min-width:0}
.name{
  font-size:12.5px; line-height:1.35; color:var(--text); text-transform:uppercase; letter-spacing:.01em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sub{font-size:11px; color:var(--dim2); text-transform:uppercase; letter-spacing:.05em}
.sub .sys{color:var(--dim)}

.empty{text-align:center; color:var(--dim); padding:60px 0; text-transform:uppercase; letter-spacing:.1em}
.more{
  display:block; margin:26px auto 8px; padding:10px 24px; cursor:pointer; border-radius:0;
  border:1px solid var(--line2); background:var(--surface); color:var(--text);
  text-transform:uppercase; letter-spacing:.08em; font-size:12.5px;
}
.more:hover{border-color:var(--mid); box-shadow:0 0 14px var(--glow)}
.foot{
  color:var(--dim2); font-size:11.5px; padding:32px 24px 52px;
  border-top:1px solid var(--line2); margin-top:36px;
}
.foot p{margin:4px 0}

/* ---------- detail sheet ---------- */
.modal{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px}
.modal-back{position:absolute; inset:0; background:rgba(2,5,3,.86)}
.sheet{
  position:relative; z-index:1; width:min(900px,100%); max-height:88vh; overflow-y:auto;
  background:var(--bg2); border:1px solid var(--mid); box-shadow:0 0 40px rgba(77,245,143,.16);
  scrollbar-width:thin; scrollbar-color:var(--line2) transparent;
}
.close{
  position:absolute; top:9px; right:10px; z-index:3; width:26px; height:26px; border-radius:0;
  border:1px solid var(--line2); background:var(--bg); color:var(--dim); cursor:pointer; line-height:1;
}
.close:hover{color:var(--text); border-color:var(--mid)}
.sheet-body{padding:24px 26px 26px}
.sheet-logo{display:block; max-width:min(320px,70%); max-height:80px; margin:0 auto 20px; object-fit:contain}
.sheet-head{display:flex; gap:22px; flex-wrap:wrap}
.sheet-media{flex:0 0 200px; display:flex; flex-direction:column; gap:11px}
.sheet-art{border:1px solid var(--line2); background:var(--surface)}
.sheet-art img{width:100%; display:block}
.sheet-disc{align-self:center; width:112px; height:112px; object-fit:contain}
.sheet-info{flex:1 1 320px; min-width:260px}
.sheet-info h2{
  margin:0 0 3px; font-family:var(--display); font-weight:400; font-size:34px; line-height:1;
  text-transform:uppercase; text-shadow:0 0 12px var(--glow);
}
.sheet-sys{color:var(--dim); font-size:12px; margin:0 0 15px; text-transform:uppercase; letter-spacing:.09em}
.score{margin:0 0 16px; font-size:13.5px; letter-spacing:.04em; font-variant-numeric:tabular-nums}
.score .meter{color:var(--text); text-shadow:0 0 8px var(--glow)}
.score .none{color:var(--dim2); text-transform:uppercase; font-size:12px; letter-spacing:.08em}
.facts{margin:0; display:flex; flex-direction:column}
.facts div{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:5px 0; border-bottom:1px dotted var(--line2);
}
.facts dt{color:var(--dim); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap}
.facts dd{margin:0; font-size:13px; text-align:right; overflow-wrap:anywhere}
.desc{
  margin:22px 0 0; padding-top:18px; border-top:1px solid var(--line2);
  color:var(--mid); font-size:13.5px; line-height:1.75;
}
.caps{display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:20px}
.caps figure{margin:0}
.caps img{width:100%; display:block; border:1px solid var(--line2); background:#000; image-rendering:pixelated}
.caps figcaption{
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim2); margin-top:5px; text-align:center;
}
.filename{margin-top:16px; font-size:11px; color:var(--dim2); overflow-wrap:anywhere}
.filename::before{content:"» "; color:var(--line2)}

@media (max-width:640px){
  .wrap{padding:0 15px}
  .hero{padding:30px 0 18px}
  .stats{gap:4px 18px; flex-direction:column}
  .stats div+div::before{content:none}
  .grid{grid-template-columns:repeat(auto-fill,minmax(124px,1fr)); gap:16px 11px}
  .sheet-body{padding:20px 16px}
  .sheet-media{flex-basis:135px}
  .sheet-disc{width:80px; height:80px}
  .caps{grid-template-columns:1fr}
}

/* ---------- game of the month ---------- */
.gotm{padding:26px 24px 0}
.gotm-card{
  display:flex; gap:22px; width:100%; text-align:left; cursor:pointer;
  padding:18px; border:1px solid var(--line2); background:var(--surface);
  border-radius:0; transition:border-color .13s, box-shadow .13s;
}
.gotm-card:hover, .gotm-card:focus-visible{
  border-color:var(--mid); box-shadow:0 0 22px var(--glow); outline:none;
}
.gotm-art{
  flex:0 0 168px; align-self:flex-start; border:1px solid var(--line);
  background:var(--bg2); display:block;
}
.gotm-art img{width:100%; display:block}
.gotm-body{display:flex; flex-direction:column; gap:9px; min-width:0; flex:1 1 auto}
.gotm-label{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}
.gotm-label::before{content:"▚ "; color:var(--line2)}
.gotm-logo{max-width:min(320px,80%); max-height:64px; object-fit:contain; object-position:left center}
.gotm-title{
  font-family:var(--display); font-size:32px; line-height:1;
  text-transform:uppercase; text-shadow:0 0 12px var(--glow);
}
.gotm-meta{font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.05em}
.gotm-score{font-size:13px; letter-spacing:.04em; font-variant-numeric:tabular-nums}
.gotm-score .meter{color:var(--text); text-shadow:0 0 8px var(--glow)}
.gotm-desc{
  font-size:13px; line-height:1.7; color:var(--mid);
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
@media (max-width:640px){
  .gotm{padding:18px 15px 0}
  .gotm-card{flex-direction:column; gap:14px}
  .gotm-art{flex-basis:auto; max-width:150px}
  .gotm-desc{-webkit-line-clamp:6}
}