:root {
  --bg:#0d1117; --surface:#161b22; --surface-2:#1c2230; --line:#262d38; --line-2:#30363d;
  --ink:#e6edf3; --ink-2:#9aa5b1; --ink-3:#6e7781; --accent:#a371f7; --accent-2:#7c5cff;
  --radius:12px;
}
* { box-sizing:border-box; margin:0; padding:0; }
body {
  background:var(--bg); color:var(--ink); min-height:100vh;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.5;
}
a { color:inherit; }
.wrap { max-width:1180px; margin:0 auto; padding:0 20px; }
/* Collection pages use most of the screen; forms/auth stay narrow. */
.lib .wrap { max-width:min(2100px, 95vw); }

/* header */
.top { position:sticky; top:0; z-index:20; background:rgba(13,17,23,.86); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.topbar { display:flex; align-items:center; gap:18px; height:60px; }
.brand { display:flex; align-items:center; gap:9px; font-weight:800; font-size:18px; letter-spacing:-.01em; text-decoration:none; }
.brand .pad { color:var(--accent); }
.brand .logo { width:28px; height:28px; display:block; flex:none; }
.brand .tag { font-size:11px; font-weight:600; color:var(--ink-3); border:1px solid var(--line-2); border-radius:6px; padding:1px 7px; }
.search { margin-left:auto; }
.search input { width:min(320px,42vw); background:var(--surface); border:1px solid var(--line-2); border-radius:9px; color:var(--ink); font:inherit; font-size:14px; padding:8px 13px; outline:none; }
.search input:focus { border-color:var(--accent); }
.top .link { background:none; border:0; color:var(--ink-2); font:inherit; cursor:pointer; margin-left:auto; }
.top .link:hover { color:var(--ink); }

/* stats */
.stats { display:flex; gap:12px; flex-wrap:wrap; margin:26px 0 20px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 18px; min-width:96px; }
.stat b { display:block; font-size:24px; font-weight:800; letter-spacing:-.02em; }
.stat span { font-size:12px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; }

/* filters */
.filters { display:flex; gap:14px 18px; align-items:center; flex-wrap:wrap; margin-bottom:20px; }
.chips { display:flex; gap:7px; flex-wrap:wrap; }
.chip { --c:var(--ink-2); text-decoration:none; font-size:13px; font-weight:600; color:var(--ink-2);
  border:1px solid var(--line-2); border-radius:999px; padding:5px 13px; }
.chip:hover { border-color:var(--c); color:var(--ink); }
.chip.on { background:var(--c); border-color:var(--c); color:#0d1117; }
.controls { margin-left:auto; display:flex; gap:8px; }
.controls select { background:var(--surface); color:var(--ink); border:1px solid var(--line-2); border-radius:9px; font:inherit; font-size:13px; padding:7px 10px; cursor:pointer; }

/* grid */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:18px 16px; padding-bottom:50px; }
.card { text-decoration:none; color:inherit; display:block; }
.cover { position:relative; aspect-ratio:2/3; border-radius:10px; overflow:hidden; background:var(--surface-2);
  border:1px solid var(--line); box-shadow:0 2px 8px rgba(0,0,0,.35); transition:transform .12s ease, box-shadow .12s ease; }
.card:hover .cover { transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,.5); border-color:var(--line-2); }
.cover img { width:100%; height:100%; object-fit:cover; display:block; }
.cover .mono { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:800;
  color:#fff; letter-spacing:1px; background:linear-gradient(160deg, color-mix(in srgb, var(--c) 55%, #1c2230), #12161f); }
.badge.status { position:absolute; left:7px; top:7px; --c:#8b949e; font-size:10.5px; font-weight:700; color:#0d1117;
  background:var(--c); border-radius:5px; padding:2px 7px; text-transform:uppercase; letter-spacing:.04em; }
.cover .star { position:absolute; right:7px; top:6px; color:#f5c518; font-size:15px; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.meta { padding:8px 2px 0; }
.name { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sub { display:flex; align-items:center; gap:8px; margin-top:3px; }
.plat { --c:#8b949e; font-size:11px; font-weight:600; color:var(--c); border:1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius:5px; padding:1px 6px; white-space:nowrap; }
.pt { font-size:11.5px; color:var(--ink-3); }

.empty { text-align:center; padding:70px 20px; color:var(--ink-2); }
.empty h2 { color:var(--ink); margin-bottom:8px; }
.empty a { color:var(--accent); }

.foot { border-top:1px solid var(--line); color:var(--ink-3); font-size:13px; padding:20px 0 40px; margin-top:10px; }
.foot a { color:var(--ink-2); }

/* ---------- admin ---------- */
.flash { border-radius:10px; padding:11px 15px; margin:20px 0; font-size:14px; }
.flash.ok { background:rgba(63,185,80,.14); border:1px solid rgba(63,185,80,.4); color:#7ee787; }
.flash.err { background:rgba(248,81,73,.14); border:1px solid rgba(248,81,73,.4); color:#ffa198; }
.card-form { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; margin:20px 0; }
.card-form h2 { font-size:16px; margin-bottom:14px; }
.card-form.login { max-width:360px; margin:60px auto; }
.card-form label, .modal-card label { display:block; font-size:12px; color:var(--ink-2); margin-bottom:12px; }
.card-form input, .card-form select, .modal-card input, .modal-card select { display:block; width:100%; margin-top:5px; background:var(--bg); color:var(--ink);
  border:1px solid var(--line-2); border-radius:8px; font:inherit; font-size:14px; padding:9px 11px; outline:none; }
.card-form input:focus, .card-form select:focus, .modal-card input:focus, .modal-card select:focus { border-color:var(--accent); }
.btn { background:var(--accent); color:#0d1117; border:0; border-radius:8px; font:inherit; font-weight:700; font-size:14px; padding:9px 18px; cursor:pointer; text-decoration:none; display:inline-block; }
.btn:hover { background:var(--accent-2); color:#fff; }
.btn.ghost { background:transparent; color:var(--ink-2); border:1px solid var(--line-2); }
.btn.ghost:hover { color:var(--ink); border-color:var(--ink-3); }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.inline { display:inline-flex; gap:8px; align-items:center; }
.inline input { width:auto; flex:1; min-width:200px; }
.muted { color:var(--ink-3); }
.fineprint { font-size:12px; color:var(--ink-3); margin-top:14px; }
.fineprint code { background:var(--bg); border:1px solid var(--line-2); border-radius:5px; padding:2px 6px; color:var(--ink-2); }
.steam-status { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.steam-status img { border-radius:6px; }

.gameform { display:grid; grid-template-columns:repeat(4,1fr); gap:0 14px; }
.gameform .wide { grid-column:1 / -1; }
.gameform .check { display:flex; align-items:center; gap:8px; grid-column:1 / -1; }
.gameform .check input { width:auto; margin:0; }

.tablewrap { overflow-x:auto; }
table.gt { width:100%; border-collapse:collapse; font-size:14px; }
table.gt th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); padding:0 10px 8px; border-bottom:1px solid var(--line-2); }
table.gt td { padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.gt .thumb { width:34px; }
table.gt .thumb img { width:34px; height:48px; object-fit:cover; border-radius:4px; display:block; }
.qs select { background:var(--bg); color:var(--c,#e6edf3); border:1px solid var(--line-2); border-radius:6px; font:inherit; font-size:12.5px; padding:4px 6px; cursor:pointer; }
.acts { white-space:nowrap; text-align:right; }
.acts .ic { background:none; border:0; color:var(--ink-3); font-size:15px; cursor:pointer; text-decoration:none; padding:3px 6px; }
.acts .ic:hover { color:var(--ink); }
.acts .ic.del:hover { color:#ff6b6b; }
.star { color:#f5c518; }

/* ---------- accounts / nav / profile ---------- */
.unav { margin-left:auto; display:flex; align-items:center; gap:16px; }
.unav a { color:var(--ink-2); text-decoration:none; font-size:14px; }
.unav a:hover, .unav .link:hover { color:var(--ink); }
.unav .link { background:none; border:0; color:var(--ink-2); font:inherit; font-size:14px; cursor:pointer; }
.btn.small { padding:6px 13px; font-size:13px; }
.tag { font-size:11px; font-weight:600; color:var(--ink-3); border:1px solid var(--line-2); border-radius:6px; padding:1px 7px; }

.tabs { display:flex; gap:6px; margin-bottom:16px; }
.tabs a { padding:6px 14px; border-radius:8px; text-decoration:none; color:var(--ink-2); font-weight:600; font-size:14px; }
.tabs a.on { background:var(--surface-2); color:var(--ink); }

.hero { padding:52px 0 26px; }
.hero h1 { font-size:32px; letter-spacing:-.02em; }
.hero p { color:var(--ink-2); margin:10px 0 22px; font-size:16px; }
.sec { font-size:13px; color:var(--ink-2); margin:24px 0 12px; text-transform:uppercase; letter-spacing:.07em; }
.people { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; padding-bottom:40px; }
.person { display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; text-decoration:none; color:inherit; }
.person:hover { border-color:var(--line-2); }
.person img, .pav { width:44px; height:44px; border-radius:8px; }
.person b { display:block; line-height:1.25; }
.person .muted { font-size:13px; }
.pav { display:inline-flex; align-items:center; justify-content:center; background:var(--surface-2); border:1px solid var(--line-2); font-weight:800; color:var(--accent); }
.pav.big { width:52px; height:52px; border-radius:10px; font-size:22px; }

.profile { display:flex; align-items:center; gap:14px; margin:24px 0 20px; flex-wrap:wrap; }
.profile > img { width:52px; height:52px; border-radius:10px; }
.profile h1 { font-size:22px; }
.statline { color:var(--ink-2); font-size:13.5px; margin-top:3px; }
.statline b { color:var(--ink); }
.viewtoggle { margin-left:auto; display:inline-flex; border:1px solid var(--line-2); border-radius:9px; overflow:hidden; }
.viewtoggle a { padding:7px 13px; font-size:13px; color:var(--ink-2); text-decoration:none; }
.viewtoggle a.on { background:var(--surface-2); color:var(--ink); }

/* ---------- kanban board ---------- */
.board { display:flex; gap:12px; overflow-x:auto; padding-bottom:40px; align-items:flex-start; }
.col { flex:1 1 0; min-width:184px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.col > header { --c:#8b949e; display:flex; align-items:center; gap:9px; font-weight:700; font-size:14px; padding:12px 14px; border-bottom:1px solid var(--line); }
.col > header::before { content:""; width:9px; height:9px; flex:none; border-radius:50%; background:var(--c);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.col > header .n { margin-left:auto; font-size:12px; font-weight:700; color:var(--c);
  background:color-mix(in srgb, var(--c) 14%, var(--bg)); border-radius:999px; padding:1px 9px; }
.col-body { padding:10px; display:flex; flex-direction:column; gap:9px; min-height:60px; }
.col.over { outline:2px dashed var(--accent); outline-offset:-4px; }
.board .card { display:flex; gap:10px; align-items:center; background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:7px 8px; text-decoration:none; color:inherit; }
.board.editable .card { cursor:grab; }
.board .card:hover { border-color:var(--line-2); }
.board .card.dragging { opacity:.35; }
.board .card .cover { width:38px; height:53px; flex:none; aspect-ratio:auto; border-radius:5px; box-shadow:none; }
.board .card .cover:hover { transform:none; }
.board .card .cover .badge, .board .card .cover .star { display:none; }
.board .card .cover .mono { font-size:15px; }
.board .card .meta { padding:0; min-width:0; flex:1; }
.board .card .name { font-size:13px; }
.board .card .pt { margin-left:auto; padding-left:10px; }
.hint-line { color:var(--ink-3); font-size:13px; margin:-22px 0 30px; }

@media (max-width:640px) {
  .gameform { grid-template-columns:repeat(2,1fr); }
  .search input { width:38vw; }
  .grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
  .col { flex:0 0 220px; min-width:220px; }
  .viewtoggle { margin-left:0; }
}

/* ---------- hidden games (owner-only marker) ---------- */
.card.is-hidden { opacity:.5; }
.card.is-hidden:hover { opacity:.82; }
.card .hbadge { position:absolute; left:6px; bottom:6px; font-size:10px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink); background:rgba(13,17,23,.82); border:1px solid var(--line-2);
  border-radius:6px; padding:1px 6px; }
.board .card.is-hidden { opacity:.5; }
.board .card .cover .hbadge { display:none; }

/* privacy bits */
.privtag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3);
  border:1px solid var(--line-2); border-radius:6px; padding:1px 7px; vertical-align:middle; }
.privacy-row { display:flex; align-items:center; gap:16px; justify-content:space-between; flex-wrap:wrap; }
.privacy-row .muted { margin-top:3px; max-width:60ch; }
.tagpill { font-size:11px; font-weight:700; color:var(--ink-3); border:1px solid var(--line-2); border-radius:6px; padding:0 6px; }
.rhidden { opacity:.55; }

/* ---------- custom context menu ---------- */
.ctxmenu { position:fixed; z-index:200; min-width:210px; background:var(--surface); border:1px solid var(--line-2);
  border-radius:11px; padding:6px; box-shadow:0 14px 40px rgba(0,0,0,.5); font-size:14px; user-select:none; }
.ctxmenu[hidden] { display:none; }
.ctxmenu button, .ctxmenu a { display:block; width:100%; text-align:left; background:none; border:0; color:var(--ink);
  font:inherit; cursor:pointer; padding:8px 10px; border-radius:7px; text-decoration:none; }
.ctxmenu button:hover, .ctxmenu a:hover { background:var(--surface-2); }
.ctxmenu .danger { color:#f85149; }
.ctxmenu .danger:hover { background:rgba(248,81,73,.12); }
.ctxmenu .ctx-sep { height:1px; background:var(--line); margin:5px 4px; }
.ctx-h { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); padding:4px 10px 6px; }
.ctx-chips { display:flex; flex-wrap:wrap; gap:5px; padding:0 6px 4px; }
.ctx-chip { --c:var(--ink-2); width:auto !important; font-size:12px; font-weight:600; padding:3px 9px !important;
  border:1px solid var(--line-2) !important; border-radius:999px !important; color:var(--ink-2); }
.ctx-chip:hover { border-color:var(--c) !important; color:var(--ink); }
.ctx-chip.on { background:var(--c) !important; border-color:var(--c) !important; color:#0d1117; }

/* ---------- profile add button + add-game modal ---------- */
.profile-actions { margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.profile-actions .viewtoggle { margin-left:0; }

.modal { position:fixed; inset:0; z-index:300; background:rgba(2,4,8,.66); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.modal[hidden] { display:none; }
.modal-card { background:var(--surface); border:1px solid var(--line-2); border-radius:14px; padding:22px 24px;
  width:min(460px,100%); max-height:90vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.55); }
.modal-card h2 { font-size:17px; margin-bottom:16px; }
.modal-card .two { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.modal-card .check { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.modal-card .check input { width:auto; margin:0; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:6px; }
.modal-note { font-size:12.5px; margin-top:12px; }
.modal-note a { color:var(--accent); }
.modal .err { background:rgba(248,81,73,.12); border:1px solid rgba(248,81,73,.4); color:#ff9d95;
  border-radius:8px; padding:8px 11px; font-size:13px; margin-bottom:6px; }
.modal .err[hidden] { display:none; }

/* ---------- add-game title autocomplete ---------- */
.sugwrap { position:relative; }
.suggest { position:absolute; left:0; right:0; top:100%; margin-top:4px; z-index:20;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:10px; overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.55); max-height:320px; overflow-y:auto; }
.suggest[hidden] { display:none; }
.sug-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:0;
  border-bottom:1px solid var(--line); color:var(--ink); font:inherit; cursor:pointer; padding:7px 10px; }
.sug-item:last-child { border-bottom:0; }
.sug-item:hover { background:var(--surface); }
.sug-item img, .sug-item .sug-ph { width:30px; height:40px; flex:none; border-radius:4px; object-fit:cover;
  background:var(--bg); border:1px solid var(--line); }
.sug-txt { display:flex; flex-direction:column; min-width:0; }
.sug-t { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sug-m { font-size:11.5px; color:var(--ink-3); }

.modal-hint { font-size:12px; margin:-6px 0 12px; }
.sug-note { padding:11px 12px; font-size:13px; color:var(--ink-2); line-height:1.45; }

.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.modal-actions { flex-wrap:wrap; justify-content:flex-end; }
.add-ok { color:#7ee787; font-size:13px; font-weight:600; margin:2px 0; }
.add-ok[hidden] { display:none; }

/* ---------- landing (logged-out home) ---------- */
.landing .wrap { max-width:1200px; }
.hero2 { position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:56px 0 40px; }
.hero2.solo { grid-template-columns:minmax(0,720px); }
.hero-glow { position:absolute; inset:-140px auto auto -10%; width:70%; height:460px; z-index:-1; pointer-events:none;
  background:radial-gradient(55% 75% at 35% 0%, rgba(163,113,247,.22), transparent 72%); }
.eyebrow { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent); background:rgba(163,113,247,.10); border:1px solid rgba(163,113,247,.28); border-radius:999px; padding:5px 12px; margin-bottom:20px; }
.hero-copy h1 { font-size:46px; line-height:1.05; letter-spacing:-.03em; font-weight:800; }
.hero-copy h1 .accent { color:var(--accent); }
.hero-copy .lede { color:var(--ink-2); font-size:17px; line-height:1.55; margin:18px 0 28px; max-width:52ch; }
.cta { display:flex; gap:12px; flex-wrap:wrap; }
.btn.lg { font-size:15px; padding:12px 22px; border-radius:10px; }
.hero-stats { display:flex; gap:32px; margin-top:32px; }
.hero-stats b { display:block; color:var(--ink); font-size:23px; font-weight:800; letter-spacing:-.02em; }
.hero-stats span { color:var(--ink-3); font-size:12px; text-transform:uppercase; letter-spacing:.05em; }

.hero-art { height:430px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent); }
.cover-wall { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cover-wall .col { display:grid; gap:14px; align-content:start; }
.cover-wall .col:nth-child(2) { margin-top:-46px; }
.cover-wall img { width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:10px; border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(0,0,0,.55); background:var(--surface-2); }

.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:16px; padding:24px 0 8px; }
.feat { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px; }
.feat .fi { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:11px;
  background:rgba(163,113,247,.12); border:1px solid rgba(163,113,247,.25); color:var(--accent); margin-bottom:14px; }
.feat h3 { font-size:16px; margin-bottom:6px; }
.feat p { color:var(--ink-2); font-size:14px; line-height:1.5; }

.landing .sec { margin-top:48px; }
.landing .foot { margin-top:36px; }

@media (max-width:900px) {
  .hero2, .hero2.solo { grid-template-columns:1fr; gap:6px; padding:38px 0 20px; }
  .hero-art { display:none; }
  .hero-copy h1 { font-size:34px; }
  .hero-copy .lede { font-size:16px; }
}

/* richer metadata on cards */
.year { font-size:11.5px; color:var(--ink-3); }
.mscore { position:absolute; right:7px; bottom:7px; --c:#8b949e; font-size:11px; font-weight:800; color:#0d1117;
  background:var(--c); border-radius:5px; padding:1px 6px; box-shadow:0 1px 3px rgba(0,0,0,.5); }
.board .card .cover .mscore { display:none; }

/* ---------- what to play next ---------- */
.play-modes { display:flex; gap:8px; margin-bottom:16px; }
.pm { flex:1; background:var(--bg); border:1px solid var(--line-2); color:var(--ink-2); font:inherit; font-size:13.5px;
  font-weight:600; padding:9px 12px; border-radius:9px; cursor:pointer; }
.pm:hover { color:var(--ink); }
.pm.on { background:rgba(163,113,247,.14); border-color:var(--accent); color:var(--ink); }
.play-result { min-height:112px; margin-bottom:16px; }
.play-loading, .play-empty { display:flex; align-items:center; justify-content:center; min-height:112px; color:var(--ink-3); font-size:14px; text-align:center; }
.play-game { display:flex; gap:16px; align-items:center; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:14px; }
.play-game img { width:76px; height:114px; flex:none; object-fit:cover; border-radius:8px; border:1px solid var(--line); box-shadow:0 4px 14px rgba(0,0,0,.5); }
.pg-info { min-width:0; }
.pg-title { font-size:18px; font-weight:800; letter-spacing:-.01em; line-height:1.2; }
.pg-meta { color:var(--ink-2); font-size:13px; margin-top:6px; }

/* ---------- coming soon ---------- */
.coming { margin:8px 0 4px; }
.sec-sub { color:var(--ink-3); font-weight:500; text-transform:none; letter-spacing:0; }
.coming-row { display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; }
.coming-card { flex:0 0 132px; }
.cc-cover { position:relative; aspect-ratio:2/3; border-radius:10px; overflow:hidden; background:var(--surface-2);
  border:1px solid var(--line); box-shadow:0 2px 8px rgba(0,0,0,.35); }
.cc-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.cc-cover .mono { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800;
  color:#fff; background:linear-gradient(160deg, color-mix(in srgb, var(--c) 55%, #1c2230), #12161f); }
.cc-when { position:absolute; left:6px; bottom:6px; right:6px; text-align:center; font-size:11.5px; font-weight:700;
  color:#fff; background:rgba(163,113,247,.9); border-radius:6px; padding:3px 6px; }
.cc-title { font-size:13px; font-weight:600; margin-top:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-plat { --c:#8b949e; font-size:11px; font-weight:600; color:var(--c); margin-top:2px; }

/* ---------- import games (photo / CSV) ---------- */
.import-tools { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:14px; }
.imp { background:var(--bg); border:1px solid var(--line-2); border-radius:12px; padding:16px 18px; }
.imp h3 { font-size:15px; margin-bottom:4px; }
.imp p.muted { font-size:13px; }
.imp input[type=file] { display:block; width:100%; margin-top:10px; font-size:13px; color:var(--ink-2); }
.imp input[type=file]::file-selector-button { background:var(--surface-2); color:var(--ink); border:1px solid var(--line-2);
  border-radius:7px; padding:6px 12px; font:inherit; font-size:13px; margin-right:10px; cursor:pointer; }
.imp-head { color:var(--ink-2); font-size:14px; margin:16px 0 12px; }
.imp-head b { color:var(--ink); }
.imp-all { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); margin-bottom:12px; }
.imp-all select { background:var(--bg); color:var(--ink); border:1px solid var(--line-2); border-radius:7px; font:inherit; font-size:13px; padding:5px 9px; }
.imp-list { display:flex; flex-direction:column; gap:8px; max-height:420px; overflow-y:auto; padding:2px; }
.imp-row { display:flex; align-items:center; gap:10px; background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:8px 10px; }
.imp-row input[type=checkbox] { width:16px; height:16px; flex:none; accent-color:var(--accent); margin:0; }
.imp-row .imp-title { flex:1; min-width:0; background:var(--surface); color:var(--ink); border:1px solid var(--line-2);
  border-radius:7px; font:inherit; font-size:13.5px; padding:6px 9px; margin:0; }
.imp-row .imp-plat { flex:none; width:130px; background:var(--surface); color:var(--ink); border:1px solid var(--line-2);
  border-radius:7px; font:inherit; font-size:12.5px; padding:6px 7px; margin:0; cursor:pointer; }
.imp-row input[type=checkbox]:not(:checked) ~ .imp-title { opacity:.45; text-decoration:line-through; }

.imp-all select { width:auto; margin-top:0; }

/* .card-form label{display:block} outranks .imp-row/.imp-all — restore flex */
.card-form label.imp-row { display:flex; align-items:center; gap:10px; }
.card-form label.imp-all { display:flex; align-items:center; gap:8px; }

/* ---------- game detail popup ---------- */
.grid .card, .coming-card[data-id] { cursor:pointer; }
.gm-card { width:min(560px,100%); padding:0; position:relative; overflow:hidden; }
.gm-x { position:absolute; top:10px; right:10px; z-index:2; width:30px; height:30px; border-radius:8px;
  background:rgba(13,17,23,.55); border:1px solid var(--line-2); color:var(--ink-2); font-size:13px; cursor:pointer; backdrop-filter:blur(4px); }
.gm-x:hover { color:var(--ink); border-color:var(--ink-3); }
.gm-loading { padding:60px 20px; text-align:center; color:var(--ink-3); }
.gm-body { display:flex; align-items:stretch; }
.gm-cover { flex:none; width:196px; background:var(--surface-2); }
.gm-cover img { width:100%; height:100%; min-height:100%; object-fit:cover; display:block; }
.gm-info { flex:1; min-width:0; padding:22px 22px 20px; }
.gm-badge { position:static; display:inline-block; margin-bottom:11px; }
.gm-title { font-size:20px; line-height:1.22; letter-spacing:-.01em; }
.gm-star { color:#f5c518; font-size:16px; }
.gm-rows { margin-top:15px; display:flex; flex-direction:column; }
.gm-row { display:flex; justify-content:space-between; gap:14px; align-items:baseline; font-size:13.5px; padding:7px 0; border-bottom:1px solid var(--line); }
.gm-row:last-child { border-bottom:0; }
.gm-row span { color:var(--ink-3); }
.gm-row b { color:var(--ink); font-weight:600; text-align:right; }
.gm-notes { margin-top:15px; }
.gm-notes span { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); }
.gm-notes p { font-size:13.5px; color:var(--ink-2); margin-top:5px; white-space:pre-wrap; line-height:1.5; }
.gm-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
@media (max-width:520px) {
  .gm-body { flex-direction:column; }
  .gm-cover { width:100%; height:170px; }
}
.gm-time-h { margin-top:13px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:700; padding-bottom:1px; }
.gm-src { font-size:11px; color:var(--ink-3); opacity:.8; padding-top:6px; }