/* sager.click gallery — shared styles (light; Konami turns the lights off) */
:root{
  --paper:#faf8f3; --paper-2:#f0ece3; --card:#ffffff; --ink:#1d2430; --soft:#454c57; --muted:#7d8189; --line:#e4dfd5; --line-2:#cfc8bb;
  --tekhelet:#24507f; --game:#24507f; --story:#7a4f2a; --toy:#4f6b3a; --film:#8c2f39;
  --accent:var(--tekhelet); --shadow:0 1px 2px rgba(29,36,48,.05),0 14px 34px -22px rgba(29,36,48,.38);
  --serif:"Frank Ruhl Libre", Georgia, serif; --sans:"IBM Plex Sans", system-ui, sans-serif; --mono:"IBM Plex Mono", ui-monospace, monospace;
  --gutter:clamp(16px,3vw,40px);
}
:root[data-theme="dark"]{
  --paper:#11151c; --paper-2:#1a1f28; --card:#161b23; --ink:#ece8df; --soft:#c4c6cb; --muted:#8b9099; --line:#262c36; --line-2:#363d49;
  --tekhelet:#8fb4e0; --game:#8fb4e0; --story:#d8a878; --toy:#a9c58c; --film:#e48a92; --shadow:0 12px 32px -18px #000;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font:15px/1.6 var(--sans);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background .4s,color .4s}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.k-game{--c:var(--game)} .k-story{--c:var(--story)} .k-toy{--c:var(--toy)} .k-film{--c:var(--film)}
.num{font:500 12px var(--mono);letter-spacing:.04em}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:20px;padding:14px var(--gutter);
  background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.mark{text-decoration:none;margin-right:auto;font:500 25px/1 var(--serif);letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.mark i{font-style:italic;color:var(--muted)}
.mark .dot{width:9px;height:9px;border-radius:50%;background:var(--tekhelet);display:inline-block;transform:translateY(-3px)}
.top nav{display:flex;gap:2px;flex-wrap:wrap}
.top nav a{padding:7px 12px;border-radius:999px;font-size:14px;color:var(--soft);text-decoration:none}
.top nav a:hover,.top nav a[aria-current=page]{background:var(--paper-2);color:var(--ink)}
.top nav a.tv{border:1px solid var(--line-2)}
@media (max-width:640px){.top{gap:8px;flex-wrap:wrap}.mark{font-size:24px}.top nav a{padding:6px 9px;font-size:13px}}

/* ---------- tiles ---------- */
.tile{position:relative;display:block;overflow:hidden;border-radius:10px;background:var(--paper-2);text-decoration:none;isolation:isolate;box-shadow:var(--shadow);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.tile:hover,.tile:focus-visible{transform:translateY(-3px);box-shadow:0 2px 4px rgba(28,25,21,.08),0 22px 44px -18px rgba(28,25,21,.45)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s ease,transform 6s ease-out}
.tile img.flip{opacity:0}
.tile img.flip.show{opacity:1}
.tile:hover img{transform:scale(1.05)}
.tile .label{position:absolute;left:10px;bottom:10px;right:10px;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;pointer-events:none}
.tile .label span{display:inline-block;max-width:100%;padding:6px 10px 6px;border-radius:7px;background:rgba(255,253,249,.94);color:#1c1915;
  font:500 17px/1.15 var(--serif);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.tile.big .label span{font-size:clamp(22px,2.3vw,32px);padding:8px 14px}
.tile .label small{display:block;font:600 10px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--c);margin-bottom:3px}
.tile .no{position:absolute;top:9px;left:10px;z-index:2;padding:2px 7px;border-radius:5px;background:rgba(255,253,249,.9);color:#4a443b;font:500 11px var(--mono)}
.tile .poster{position:absolute;inset:0;display:grid;place-items:center;padding:12%;text-align:center;font:400 30px/1 var(--serif);color:var(--c);background:var(--paper-2)}
.dots{position:absolute;top:11px;right:11px;z-index:2;display:flex;gap:4px;opacity:0;transition:opacity .2s}
.dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.dots i.on{background:#fff}
.tile:hover .dots{opacity:1}

/* ---------- buttons, chips ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;font:600 14px var(--sans);text-decoration:none;border:1px solid var(--line-2);color:var(--ink);background:var(--card)}
.btn:hover{border-color:var(--ink)}
.btn.ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.ink:hover{opacity:.88}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:13px;color:var(--soft);text-decoration:none}
.chip:hover{border-color:var(--line-2);color:var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip b{font-weight:500;opacity:.55;margin-left:4px}

/* ---------- small overlays ---------- */
.osd{position:fixed;top:78px;right:var(--gutter);z-index:90;padding:8px 14px;border-radius:10px;background:var(--ink);color:var(--paper);
  font:500 22px var(--mono);pointer-events:none;opacity:0;transform:translateY(-6px);transition:.2s}
.osd.on{opacity:1;transform:none}
.osd small{display:block;font:500 11px var(--sans);letter-spacing:.06em;opacity:.7}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:110;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--paper);
  font:600 13px var(--sans);opacity:0;transition:.3s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.overlay{position:fixed;inset:0;z-index:100;display:none}
.overlay.on{display:block}
.help{place-items:center;background:color-mix(in srgb,var(--paper) 70%,transparent);backdrop-filter:blur(8px)}
.help.on{display:grid}
.keys{width:min(380px,calc(100vw - 32px));padding:24px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.keys h2{font:400 32px var(--serif);margin:0 0 4px}
.keys p{margin:0 0 16px;color:var(--muted);font-size:13px}
.keys dl{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;margin:0}
.keys dt{text-align:right}.keys dd{margin:0;color:var(--soft);font-size:13.5px}
kbd{display:inline-block;min-width:24px;padding:2px 7px;border-radius:6px;border:1px solid var(--line-2);background:var(--paper);font:500 11px var(--mono);text-align:center;box-shadow:inset 0 -2px 0 var(--line)}
.saver{background:var(--paper);cursor:none}
.saver b{position:absolute;font:400 64px/1 var(--serif);white-space:nowrap;will-change:transform}
.saver b i{font-style:italic}
.saver span{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-size:12px;letter-spacing:.12em;color:var(--muted)}

/* ---------- footer ---------- */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:36px var(--gutter) 48px;margin-top:40px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.foot a{color:var(--soft);text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .zero{color:var(--line-2)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}