@font-face {
  font-family: "PSX Kabel";
  src: url("fonts/KabelBkBT.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "PSX CG Times";
  src: url("fonts/CGTimes.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --rail: clamp(10px, 1.7vw, 24px);
  --ink: #090a0c;
  --chrome: #d5d9de;
  --tile: clamp(114px, 9.2vw, 172px);
}
* { box-sizing: border-box; }
html { background: #050608; }
body { margin: 0; background: #050608; color: #e8e8eb; font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; }
.shell { min-height: 100svh; border-left: var(--rail) solid transparent; border-right: var(--rail) solid transparent;
  border-image: linear-gradient(90deg,#020205 0%,#22252c 14%,#08090e 30%,#000 72%,#14161b 90%,#050506 100%) 1;
  background: #070709;
}
/* Overlay highlights keep the side rails feeling like glossy molded plastic. */
.shell::before,.shell::after { content:""; position:fixed; top:0; bottom:0; width:3px; pointer-events:none; z-index:20; opacity:.9; }
.shell::before {left:calc(var(--rail) - 4px);background:linear-gradient(90deg,transparent,#51535c,transparent)}
.shell::after {right:calc(var(--rail) - 4px);background:linear-gradient(90deg,transparent,#444750,transparent)}
.masthead { position: sticky; top: 0; z-index: 12; background:
  radial-gradient(ellipse at 50% -80%,rgba(170,182,201,.22),transparent 68%),
  linear-gradient(180deg,#23262d 0%,#08090d 14%,#181a20 31%,#06070a 52%,#111219 76%,#050507 100%);
  box-shadow: 0 7px 14px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.32);
}
.masthead::before {content:"";pointer-events:none;position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,#121319,#9ea8b5 50%,#121319);opacity:.6}
.masthead-inner {max-width:2000px;margin:auto;min-height:104px;padding:20px clamp(15px,2.8vw,45px);display:flex;align-items:center;justify-content:space-between;gap:20px;}
.brand {font-family:"PSX Kabel","Kabel Bk BT","ITC Kabel","Futura PT","Century Gothic",Arial,sans-serif;font-size:clamp(30px,3.5vw,56px);font-weight:700;letter-spacing:-.062em;line-height:1;white-space:nowrap;color:#dce1e9;
  background:linear-gradient(180deg,#fbfdff 6%,#bdc3ce 26%,#f5f6f8 43%,#575b68 54%,#b5beca 68%,#e8edf4 83%,#737780 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.8)) drop-shadow(0 -1px 0 rgba(255,255,255,.12));}
.brand span {font-weight:500}
.toolbar {flex:none;display:flex;gap:4px;border:1px solid #41454f;padding:4px;border-radius:11px;background:linear-gradient(180deg,#08090e,#22252b);box-shadow:inset 0 2px 5px #000,0 1px 0 #4a4c52}
.sort-button {padding:11px 22px;min-width:86px;border:1px solid transparent;border-radius:7px;background:transparent;color:#aeb3be;cursor:pointer;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;transition:background .17s,color .17s,box-shadow .17s}
.sort-button:hover {color:white}
.sort-button.is-active {background:linear-gradient(#6b6f78,#3c4049 46%,#22252b 52%,#3b3e47);border-color:#7a7e87;box-shadow:inset 0 1px #b4b7be,0 2px 4px #000;color:#fbfcff;text-shadow:0 1px 1px #17191e}
.sort-button:focus-visible,.cover-tile:focus-visible,.close-button:focus-visible {outline:3px solid #c7cbd1;outline-offset:-3px}
.chrome-edge {height:5px;background:linear-gradient(180deg,#626672 0%,#1d2028 24%,#050507 62%,#181b23 100%)}
.wall-wrap {background:#080809;min-height:calc(100svh - 110px);}
.wall {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--tile)),1fr));grid-auto-flow:row dense;grid-auto-rows:2px;gap:0;align-items:start;overflow:visible;}
.cover-tile {padding:0;margin:0;border:0;border-radius:0;background:linear-gradient(145deg,#14171e,#32343c);color:#dcdfe6;display:block;position:relative;cursor:pointer;min-width:0;width:100%;height:100%;overflow:visible;isolation:isolate;transition:transform .18s cubic-bezier(.22,.75,.29,1);transform-origin:center center;}
.cover-tile img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;user-select:none; -webkit-user-drag:none;box-shadow:inset 0 0 1px #000;}
.cover-tile .missing {display:none;position:absolute;inset:0;align-items:center;justify-content:center;padding:10px;font-family:Georgia,serif;font-size:12px;text-align:center;color:#eee;background:linear-gradient(135deg,#26272e,#101014);text-shadow:0 1px #000}
.cover-tile.broken .missing {display:flex}
.cover-tile.broken img {opacity:0}
@media (hover:hover) and (pointer:fine) {
 .cover-tile:hover {z-index:11;transform:scale(1.24);box-shadow:0 4px 12px 3px #000,0 0 0 1px #a4a8b4;}
 .cover-tile:hover img {box-shadow:0 5px 23px #000}
}
.more-trigger {height:1px;pointer-events:none;}
.state-line {padding:22px 12px 34px;text-align:center;color:#747985;letter-spacing:.12em;text-transform:uppercase;font-size:11px;}
.state-line:empty {padding:0;height:0;}
.game-dialog {position:fixed;width:min(960px,calc(100vw - 26px));max-height:min(90dvh,950px);margin:auto;padding:0;border-radius:12px;border:1px solid #565d69;background:#101115;color:#f4f4f6;box-shadow:0 20px 100px #000,0 0 0 5px #050507;overflow:auto;}
.game-dialog::backdrop {background:rgba(0,0,0,.87);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);}
.detail-shell {padding:clamp(22px,3.6vw,40px);background:radial-gradient(ellipse at 20% 0%,rgba(111,119,134,.18),transparent 55%),linear-gradient(155deg,#1a1c21,#0d0e11 72%);}
.close-button {position:absolute;right:15px;top:12px;z-index:2;border:1px solid #555963;background:linear-gradient(#353841,#18191e);color:#dce0e8;border-radius:50%;width:35px;height:35px;line-height:30px;font-size:27px;cursor:pointer}
.close-button:hover {background:#434751}
.detail-top {display:grid;grid-template-columns:minmax(140px,30%) 1fr;gap:clamp(22px,4vw,43px);align-items:start;margin-bottom:29px;padding-right:14px}
.detail-cover-wrap {background:#07070a;box-shadow:0 15px 35px #050506,0 0 0 1px #575b64;}
.detail-cover {display:block;width:100%;height:auto;max-height:360px;object-fit:contain;}
.detail-copy {padding-top:2px}
.detail-kicker {font-size:11px;font-weight:750;letter-spacing:.22em;color:#9ca2af;margin-bottom:12px}
.detail-copy h1 {font-family:"PSX Kabel","Kabel Bk BT","ITC Kabel","Futura PT","Century Gothic",sans-serif;line-height:1.04;font-size:clamp(28px,3.8vw,46px);margin:0 0 12px;font-weight:650;letter-spacing:-.035em;color:#edf0f6}
.detail-region {font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8f95a0;margin:0 0 22px}
.synopsis {font-family:"PSX CG Times","CG Times", "Times New Roman",Times,serif;color:#e0dfe0;font-size:clamp(17px,1.8vw,20px);line-height:1.52;letter-spacing:.004em;margin:0;max-width:58ch;}
.credit {margin-top:16px;font-size:10px;color:#858b97;min-height:12px}
.credit a {color:#9ba5b7;text-decoration:underline;text-underline-offset:3px}
.detail-gallery {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-items:center;}
.gallery-frame {position:relative;min-width:0;background:#09090b;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.gallery-frame img {display:block;width:100%;height:100%;object-fit:contain;}
.gallery-empty {padding:16px;font:italic 16px "PSX CG Times","CG Times",Georgia,serif;color:#9297a0;text-align:center}
@media (max-width:660px) {
 :root {--rail:8px;--tile:clamp(92px,24vw,140px)}
 .masthead-inner {min-height:82px;padding:11px 12px;gap:7px}
 .brand {font-size:clamp(24px,7.4vw,39px);letter-spacing:-.065em;}
 .sort-button {min-width:48px;padding:9px 9px;font-size:10px;letter-spacing:.05em}
 .toolbar {gap:1px;padding:3px;border-radius:8px}
 .sort-button {border-radius:6px}
 .chrome-edge {height:4px}
 .detail-shell {padding:21px 17px 20px}
 .detail-top {grid-template-columns:110px 1fr;gap:15px;padding:0;margin-bottom:18px}
 .detail-kicker {font-size:9px;letter-spacing:.12em;margin-bottom:8px}
 .detail-copy h1 {font-size:clamp(21px,5.5vw,31px);margin-bottom:7px}
 .detail-region {font-size:9px;letter-spacing:.08em;margin-bottom:10px}
 .synopsis {font-size:16px;line-height:1.43}
 .detail-gallery {grid-template-columns:1fr 1fr;gap:4px}
 .detail-gallery .gallery-frame:first-child:last-child {grid-column:span 2}
 .close-button {top:7px;right:8px;width:28px;height:28px;line-height:25px;font-size:20px}
 .detail-copy {padding-right:10px}
}
@media (max-width:390px) {
 .detail-top {grid-template-columns:90px 1fr;gap:11px}
 .synopsis {font-size:15px}
 .brand {font-size:23px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto !important;transition:none !important;animation:none !important}}