:root {
  color-scheme: dark;
  --ink: #f2ead9;
  --muted: #a69d8d;
  --paper: #12110f;
  --panel: #1d1b17;
  --line: #343028;
  --amber: #ffb000;
  --orange: #ef5a24;
  --green: #89a45c;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .035; 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }

.topbar { height: 88px; padding: max(18px, env(safe-area-inset-top)) 20px 12px; display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; background: rgba(18,17,15,.94); backdrop-filter: blur(18px); }
.topbar h1 { margin: 1px 0 0; font-family: Georgia, serif; font-size: 25px; letter-spacing: -.7px; }
.eyebrow, .hero-kicker { color: var(--amber); font-weight: 800; letter-spacing: 1.8px; font-size: 10px; margin: 0; }
.icon-button { width: 42px; height: 42px; padding: 11px 9px; border: 1px solid var(--line); background: var(--panel); border-radius: 50%; display: grid; gap: 4px; align-content: center; }
.icon-button span { height: 2px; border-radius: 2px; background: var(--ink); display: block; }
.topbar-actions { display:flex; gap:10px; align-items:center; }
.sync-status { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.8px; font-weight:800; }
.sync-status i { width:7px; height:7px; border-radius:50%; background:#777; box-shadow:0 0 0 3px #7772; }
.sync-status[data-state="online"] i { background:#84b85a; box-shadow:0 0 0 3px #84b85a22; }
.sync-status[data-state="offline"] i { background:var(--orange); box-shadow:0 0 0 3px #ef5a2422; }

main { padding-bottom: calc(100px + var(--safe-bottom)); }
.hero { min-height: 310px; padding: 42px 20px 34px; overflow: hidden; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; background: radial-gradient(circle at 85% 22%, #463516 0, transparent 36%), linear-gradient(135deg, #181611 0%, #100f0d 65%); border-bottom: 1px solid var(--line); }
.hero h2 { font-family: Georgia, serif; font-size: clamp(36px, 10vw, 58px); line-height: .95; letter-spacing: -2px; margin: 10px 0 17px; max-width: 540px; }
.hero-copy > p:last-child { color: var(--muted); line-height: 1.5; font-size: 13px; max-width: 330px; }
.hero-art { height: 220px; position: relative; perspective: 600px; }
.cartridge { width: 158px; height: 188px; position: absolute; top: 15px; left: 50%; transform: translateX(-48%) rotate(8deg) rotateY(-8deg); border-radius: 7px 7px 16px 16px; background: linear-gradient(135deg,#88877f,#4b4a45 48%,#292824); box-shadow: -18px 24px 40px #0009, inset 0 0 0 4px #a6a49b33; }
.cartridge::after { content:""; position:absolute; inset: 8px; border: 2px solid #2b2925; border-radius: 4px 4px 11px 11px; }
.cartridge-notch { position: absolute; width: 76px; height: 18px; border-radius: 0 0 10px 10px; background: #24231f; left: 41px; top: 0; }
.cartridge-label { position: absolute; z-index: 2; inset: 39px 22px 34px; background: linear-gradient(155deg,#f2aa17,#d7441d); border-radius: 3px; color: #211407; padding: 17px 12px; box-shadow: inset 0 0 0 3px #f5d27699; transform: rotate(-1deg); }
.cartridge-label small { font-size: 8px; font-weight: 900; letter-spacing: 2px; }
.cartridge-label strong { display: block; margin-top: 7px; font-family: Georgia,serif; font-size: 22px; line-height: .9; }
.cartridge-label i { font-style: normal; display:block; text-align:right; font-size: 28px; margin-top: 8px; }

.stats { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--line); }
.stats div { padding: 20px 8px; text-align: center; border-right: 1px solid var(--line); }
.stats div:last-child { border: 0; }
.stats strong { display: block; font-family: Georgia,serif; font-size: 27px; }
.stats span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 1.3px; font-weight: 700; }

.controls { padding: 24px 20px 8px; }
.search { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 15px; border: 1px solid var(--line); border-radius: 4px; background: #191713; }
.search span { color: var(--amber); font-size: 26px; transform: rotate(-15deg); }
.search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 16px; }
.search input::placeholder { color: #777064; }
.filter-button { width: 100%; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); background: transparent; display: flex; justify-content: space-between; border-radius: 4px; color: var(--muted); font-size: 12px; }
.filter-button b { color: var(--ink); }
.platform-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 12px -20px 0; padding: 0 20px 8px; }
.platform-chips::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1px solid var(--line); border-radius: 99px; background: transparent; padding: 8px 12px; color: var(--muted); font-size: 11px; }
.chip.active { background: var(--amber); border-color: var(--amber); color: #181007; font-weight: 800; }

.collection-section, .photos-section { padding: 24px 20px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.section-heading h2 { font-family: Georgia,serif; font-size: 27px; margin: 3px 0 0; }
.text-button { background: none; border: 0; color: var(--muted); font-size: 12px; }
.view-actions { display:flex; align-items:center; gap:5px; }
.view-button { width:34px; height:34px; border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:3px; font-size:18px; }
.view-button.active { color:#171006; border-color:var(--amber); background:var(--amber); }
.game-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 13px; }
.game-card { padding: 0; background: none; border: 0; text-align: left; min-width: 0; cursor: pointer; }
.cover { --accent: var(--amber); aspect-ratio: 3/4; position: relative; overflow: hidden; padding: 15px 12px; border-radius: 3px; background: linear-gradient(145deg,color-mix(in srgb,var(--accent) 84%,white 6%),color-mix(in srgb,var(--accent) 55%,#090807)); box-shadow: 0 8px 20px #0008, inset 0 0 0 1px #ffffff22; isolation: isolate; }
.cover::before { content:""; position:absolute; inset:0; z-index:-1; background: repeating-linear-gradient(145deg,transparent 0 11px,#ffffff0a 12px 13px); }
.cover::after { content:""; position:absolute; width:130px; height:130px; border:20px solid #ffffff16; border-radius:50%; right:-55px; bottom:-38px; }
.cover-console { font-size: 8px; letter-spacing: 1.1px; text-transform: uppercase; font-weight: 900; color: #fff; opacity: .84; }
.cover-title { font-family: Georgia,serif; font-weight: 900; font-size: clamp(18px,5vw,26px); line-height: .94; margin-top: 28%; color: #fff; text-shadow: 0 2px 1px #0005; word-break: break-word; }
.cover-image { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#090807; z-index:3; }
.cover-copy { position:absolute; right:9px; bottom:8px; border:1px solid #ffffff66; border-radius:50%; width:23px; height:23px; display:grid; place-items:center; font-size:8px; font-weight:900; }
.game-meta h3 { margin: 10px 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.game-meta p { color: var(--muted); margin: 0; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; }
.game-grid.list-view { grid-template-columns:1fr; gap:0; border-top:1px solid var(--line); }
.game-grid.list-view .game-card { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:14px; padding:10px 2px; border-bottom:1px solid var(--line); }
.game-grid.list-view .cover { width:64px; aspect-ratio:3/4; padding:6px; box-shadow:0 3px 10px #0007; }
.game-grid.list-view .cover-console { font-size:4px; }
.game-grid.list-view .cover-title { font-size:9px; margin-top:24%; }
.game-grid.list-view .cover-copy { width:14px; height:14px; right:4px; bottom:4px; font-size:5px; }
.game-grid.list-view .game-meta h3 { margin:0 0 5px; font-size:16px; white-space:normal; }
.game-grid.list-view .game-meta p { font-size:10px; }
.empty-state { text-align:center; color:var(--muted); padding:50px 20px; }
.empty-state div { width:70px; height:70px; margin:auto; display:grid; place-items:center; border:1px dashed var(--line); border-radius:50%; color:var(--amber); font-family:Georgia,serif; font-size:32px; }
.empty-state h3 { color:var(--ink); margin-bottom:4px; }

.photos-section { border-top: 1px solid var(--line); }
.photo-strip { display:flex; overflow-x:auto; gap:11px; margin:0 -20px; padding:0 20px 8px; scrollbar-width:none; }
.photo-strip::-webkit-scrollbar { display:none; }
.photo-thumb { flex:none; width:72%; max-width:280px; aspect-ratio:4/5; padding:0; border:1px solid var(--line); background:#191713; border-radius:4px; overflow:hidden; }
.photo-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

.bottom-nav { position:fixed; z-index:12; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(3,1fr); padding:9px 14px calc(8px + var(--safe-bottom)); border-top:1px solid var(--line); background:rgba(18,17,15,.96); backdrop-filter:blur(18px); }
.bottom-nav button { border:0; background:none; color:var(--muted); display:grid; justify-items:center; gap:2px; font-size:9px; }
.bottom-nav b { font-size:22px; font-weight:400; }
.bottom-nav .active, .bottom-nav button:active { color:var(--amber); }

.scrim { position:fixed; z-index:30; inset:0; background:#0009; backdrop-filter:blur(3px); }
.sheet { position:fixed; z-index:31; left:0; right:0; bottom:0; max-height:90vh; overflow:auto; background:#211f1a; border-radius:18px 18px 0 0; box-shadow:0 -20px 50px #000b; transform:translateY(105%); transition:transform .28s ease; padding-bottom:var(--safe-bottom); }
.sheet.open { transform:translateY(0); }
.sheet-handle { display:block; width:48px; height:5px; border:0; border-radius:8px; background:#625d53; margin:10px auto 2px; }
.sheet-content { padding:20px 22px 28px; }
.sheet-content h2 { font-family:Georgia,serif; font-size:32px; margin:5px 0 12px; }
.sheet-content > p { color:var(--muted); line-height:1.5; }
.sheet-content label { display:grid; gap:7px; margin:17px 0; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:1px; font-weight:800; }
.sheet-content input, .sheet-content select, .sheet-content textarea { width:100%; border:1px solid var(--line); border-radius:4px; background:#151411; color:var(--ink); padding:13px; outline:none; text-transform:none; letter-spacing:0; }
.sheet-content textarea { min-height:80px; resize:vertical; }
.primary-action, .secondary-action, .photo-picker { display:block; width:100%; margin:10px 0; padding:14px; border-radius:4px; text-align:center; border:1px solid var(--amber); background:var(--amber); color:#1a1105 !important; font-weight:900; font-size:12px !important; text-transform:uppercase; letter-spacing:1px; }
.secondary-action, .photo-picker { background:transparent; color:var(--ink) !important; border-color:var(--line); }
.data-note { color:#756f64; text-align:center; font-size:10px; margin-top:18px; }
.cloud-card { display:flex; justify-content:space-between; gap:15px; margin:18px 0; padding:13px; border:1px solid var(--line); background:#171612; border-radius:4px; font-size:11px; }
.cloud-card span { color:var(--muted); text-align:right; }

.detail-hero { padding:18px 22px 24px; display:grid; grid-template-columns:115px 1fr; gap:18px; align-items:center; }
.detail-hero .cover { width:115px; }
.detail-hero h2 { font-family:Georgia,serif; font-size:29px; line-height:1; margin:6px 0 9px; }
.detail-hero p { color:var(--muted); margin:5px 0; font-size:12px; }
.detail-body { border-top:1px solid var(--line); padding:20px 22px 30px; }
.detail-badges { display:flex; flex-wrap:wrap; gap:7px; }
.badge { border:1px solid var(--line); border-radius:99px; padding:7px 10px; color:var(--muted); font-size:10px; }
.detail-notes { width:100%; min-height:90px; margin-top:18px; background:#161511; border:1px solid var(--line); color:var(--ink); padding:12px; border-radius:4px; }
.cover-credit { color:var(--muted); font-size:10px; margin:15px 0 0; }
.cover-credit a { color:var(--amber); }

dialog { width:100%; max-width:760px; height:100%; max-height:none; border:0; padding:0; background:#090807; }
dialog::backdrop { background:#000d; }
dialog img { width:100%; height:100%; object-fit:contain; }
dialog button { position:fixed; z-index:2; right:14px; top:max(14px,env(safe-area-inset-top)); border:0; border-radius:50%; width:42px; height:42px; background:#000a; font-size:28px; }

@media (min-width: 700px) {
  .topbar, main { max-width: 980px; margin-left:auto; margin-right:auto; }
  body::before { content:""; position:fixed; inset:0; z-index:-1; background:radial-gradient(circle at 50% 10%,#2b2415,#0b0a09 60%); }
  .topbar { border-left:1px solid var(--line); border-right:1px solid var(--line); }
  main { border-left:1px solid var(--line); border-right:1px solid var(--line); }
  .game-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .bottom-nav { left:50%; transform:translateX(-50%); max-width:980px; }
  .sheet { left:50%; transform:translate(-50%,105%); max-width:620px; }
  .sheet.open { transform:translate(-50%,0); }
}