/* Layout: a black page lit from above by one violet glow, with hairline-edged cards and a game rail beside the grid. */
:root {
  --bg:#08070c; --panel:#100f16; --raised:#1a1823; --line:#2a2735; --line-hi:#6d3fd6;
  --fg:#f5f3fb; --muted:#a6a1b8; --lav:#c4adff; --focus:#b794ff;
  --accent-hi:#8f55ff; --accent-lo:#6a2bdc; --on-accent:#ffffff;
  --tint:rgb(139 92 246 / .14); --glow:rgb(124 58 237 / .45); --glow-2:rgb(192 38 211 / .16); --sheen:rgb(255 255 255 / .22); --scrim:rgb(4 3 8 / .78);
  --ok:#4fdc9c; --warn:#f2b45a; --bad:#ff7d8c; --idle:#a6a1b8;
  --code-bg:#07060b; --code-fg:#e4dfff;
  --display:"Sora","Segoe UI",system-ui,sans-serif;
  --body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,Consolas,monospace;
  color-scheme:dark;
}

*,*::before,*::after { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--fg); font:400 1rem/1.55 var(--body); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
p { margin:0; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.wrap { max-width:1240px; margin-inline:auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); }
.lbl { margin:0 0 10px; font:500 .75rem/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

.plate { padding-block:18px 48px; border-bottom:1px solid var(--line);
  background:radial-gradient(70% 130% at 15% -30%, var(--glow), transparent 70%), radial-gradient(50% 100% at 88% -35%, var(--glow-2), transparent 70%), var(--bg); }
.top { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
.mark { display:inline-flex; align-items:center; gap:10px; margin-right:auto; font:600 1.125rem/1 var(--display); letter-spacing:-.02em; text-decoration:none; }
.mark::before { content:""; width:12px; height:12px; border-radius:3px; rotate:45deg; background:linear-gradient(135deg,var(--lav),var(--accent-lo)); box-shadow:0 0 14px var(--glow); }
.tabs { display:flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.tabs a { display:flex; align-items:center; min-height:40px; padding:0 14px; border-radius:9px; color:var(--muted); font-size:.9375rem; font-weight:500; text-decoration:none; }
.tabs a:hover { color:var(--fg); }
.tabs a[aria-current] { background:var(--raised); color:var(--fg); }
.hero { margin-top:48px; }
.hero h1 { margin:0; max-width:15ch; padding-bottom:.08em; font:600 clamp(2.4rem,6vw,4rem)/1.05 var(--display); letter-spacing:-.04em; text-wrap:balance;
  background:linear-gradient(180deg,var(--fg) 35%,var(--lav)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { margin-top:16px; max-width:58ch; color:var(--muted); font-size:1.0625rem; }
.search { position:relative; max-width:660px; margin-top:28px; }
.search svg { position:absolute; left:17px; top:50%; translate:0 -50%; color:var(--muted); pointer-events:none; }
.search input { width:100%; min-height:54px; padding:0 18px 0 50px; border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--fg); font:400 1rem var(--body); box-shadow:0 14px 44px -20px var(--glow); }
.search input::placeholder { color:var(--muted); }

main { padding-block:28px 64px; }
.note { margin-bottom:28px; padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--muted); font-size:.875rem; }
.note b { color:var(--fg); font-weight:600; }
.layout { display:grid; grid-template-columns:210px minmax(0,1fr); gap:36px; align-items:start; }
.rail { position:sticky; top:calc(var(--nav-h) + 16px); }
.games { display:flex; flex-direction:column; gap:2px; }
.game { display:flex; align-items:center; gap:11px; width:100%; min-height:42px; padding:6px 11px; border:0; border-radius:10px; background:transparent; color:var(--fg); font:500 .9375rem var(--body); text-align:left; cursor:pointer; }
.game:hover { background:var(--raised); }
.game[aria-pressed="true"] { background:var(--tint); color:var(--lav); box-shadow:inset 0 0 0 1px var(--line-hi); }
.swatch { flex:none; width:9px; height:9px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c); }
.game .n { margin-left:auto; color:var(--muted); font:400 .8125rem var(--mono); }

.bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-bottom:20px; }
.count { margin-right:auto; color:var(--muted); font:500 .875rem var(--mono); }
.group { display:flex; gap:6px; }
.chip { min-height:36px; padding:0 12px; border:1px solid var(--line); border-radius:9px; background:transparent; color:var(--fg); font:500 .875rem var(--body); cursor:pointer; transition:border-color .15s; }
.chip:hover { border-color:var(--muted); }
.chip[aria-pressed="true"] { border-color:var(--line-hi); background:var(--tint); color:var(--lav); }
.sort { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.875rem; }
select { min-height:36px; padding:0 8px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--fg); font:500 .875rem var(--body); }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); gap:18px; }
.card { display:flex; flex-direction:column; min-width:0; border:1px solid var(--line); border-radius:16px; background:var(--panel); overflow:hidden; transition:border-color .18s, box-shadow .18s, translate .18s; }
.card:hover { border-color:var(--line-hi); box-shadow:0 20px 54px -26px var(--glow); translate:0 -2px; }
.tile { display:flex; align-items:flex-end; aspect-ratio:16/5; padding:14px 16px; border-bottom:1px solid var(--line); color:var(--fg); font:600 .9375rem/1.2 var(--display); letter-spacing:-.01em; text-decoration:none;
  background:radial-gradient(95% 170% at 100% 0%, var(--c), transparent 72%), var(--raised); }
.card-body { display:flex; flex-direction:column; flex:1; gap:10px; padding:16px; }
.card h3 { margin:0; font:600 1.0625rem/1.3 var(--display); letter-spacing:-.015em; text-wrap:balance; }
.card h3 a { text-decoration:none; }
.card h3 a:hover { color:var(--lav); }
.st { display:flex; align-items:center; gap:7px; margin:0; font-size:.875rem; font-weight:500; }
.st i { flex:none; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.st-working { color:var(--ok); } .st-stale { color:var(--warn); } .st-patched,.st-down { color:var(--bad); } .st-unknown { color:var(--idle); }
.feats { color:var(--muted); font-size:.9375rem; }
.pills { display:flex; flex-wrap:wrap; gap:6px; }
.pill { padding:1px 8px; border:1px solid var(--line); border-radius:6px; color:var(--muted); font:500 .75rem/1.7 var(--mono); }
.free,.nokey { color:var(--lav); } .paid { color:var(--fg); } .key { color:var(--warn); }
.actions { display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:10px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border:0; border-radius:11px; background:linear-gradient(180deg,var(--accent-hi),var(--accent-lo)); color:var(--on-accent); font:600 .9375rem var(--body); text-decoration:none; cursor:pointer; box-shadow:inset 0 1px 0 var(--sheen), 0 10px 26px -12px var(--glow); transition:filter .15s, translate .08s; }
.btn:hover { filter:brightness(1.12); }
.btn:active { translate:0 1px; }
.btn.quiet { background:transparent; color:var(--fg); box-shadow:inset 0 0 0 1px var(--line); }
.btn.quiet:hover { box-shadow:inset 0 0 0 1px var(--line-hi); filter:none; }
.more { color:var(--muted); font-size:.9375rem; font-weight:500; text-decoration:none; }
.more:hover { color:var(--fg); }
.empty { display:grid; justify-items:start; gap:14px; padding:28px 0; }

.warn-box { margin-bottom:22px; max-width:75ch; color:var(--muted); font-size:.9375rem; }
.table-box { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
th,td { padding:15px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
th { color:var(--muted); font:500 .8125rem var(--mono); } /* Not uppercased: "sUNC" is case-sensitive. */
td small { display:block; color:var(--muted); font-size:.875rem; }
td b { font-weight:600; }
.m { display:flex; align-items:center; gap:9px; white-space:nowrap; }
.m span { width:64px; height:5px; border-radius:3px; background:var(--raised); overflow:hidden; }
.m i { display:block; height:100%; background:linear-gradient(90deg,var(--accent-lo),var(--lav)); }
.m b { font:500 .875rem var(--mono); }
.none { color:var(--muted); white-space:nowrap; }

dialog { width:min(680px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid var(--line); border-radius:18px; background:var(--panel); color:var(--fg); overflow:auto; box-shadow:0 40px 120px -40px var(--glow); }
dialog::backdrop { background:var(--scrim); backdrop-filter:blur(6px); }
.d { position:relative; }
.d .tile { aspect-ratio:auto; min-height:92px; }
.close { position:absolute; top:10px; right:10px; display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--fg); cursor:pointer; }
.d-body { display:grid; gap:20px; padding:22px; }
.d-body > * { min-width:0; }
.d-body a:not(.btn) { color:var(--lav); }
.d h2 { margin:0 0 8px; font:600 1.625rem/1.15 var(--display); letter-spacing:-.025em; text-wrap:balance; }
.d ol,.d ul { margin:0; padding-left:1.3em; }
.d li + li { margin-top:4px; }
pre { margin:0 0 14px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--code-bg); color:var(--code-fg); font:400 .8125rem/1.65 var(--mono); overflow-x:auto; }
footer { padding-block:0 32px; color:var(--muted); font-size:.875rem; }

@media (max-width:860px) {
  .layout { grid-template-columns:minmax(0,1fr); gap:20px; }
  .rail { position:static; }
  .games { flex-direction:row; flex-wrap:wrap; gap:6px; }
  .game { width:auto; box-shadow:inset 0 0 0 1px var(--line); }
  .game .n { margin-left:2px; }
}
@media (max-width:520px) {
  .hero { margin-top:36px; }
  .count { flex-basis:100%; }
  /* One swipeable row, so the first script card isn't pushed below the fold on phones. */
  .games { flex-wrap:nowrap; overflow-x:auto; padding:1px 1px 6px; }
  .game { flex:none; }
}
@media (max-width:720px) {
  thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  tbody,tr,td { display:block; }
  tr { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; padding-block:18px; border-bottom:1px solid var(--line); }
  td { padding:0; border:0; min-width:0; }
  td[data-l]::before { content:attr(data-l); display:block; margin-bottom:2px; color:var(--muted); font:500 .8125rem var(--mono); }
  td.wide { grid-column:1 / -1; }
  td.wide[data-l]::before { content:none; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after,::backdrop { transition:none !important; animation:none !important; }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation:none !important; }
}

/* Locked listings and thumbnails */
.tile { position:relative; aspect-ratio:16/7; overflow:hidden; }
.tile span { position:relative; z-index:1; }
.tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tile.thumb::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 45%, var(--scrim)); }
.d .tile.thumb { aspect-ratio:16/7; }
.locked { display:grid; gap:8px; margin-bottom:16px; padding:14px; border:1px solid var(--line-hi); border-radius:12px; background:var(--tint); }
.locked small { color:var(--muted); font-size:.875rem; }
.mark { font-size:1rem; letter-spacing:.05em; }
.btn:disabled { opacity:.6; cursor:wait; }

/* Admin panel */
.plate.slim { padding-block:14px; }
.plate.slim .mark { margin-right:0; }
.tag { padding:1px 8px; border:1px solid var(--line-hi); border-radius:6px; color:var(--lav); font:500 .75rem/1.7 var(--mono); }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:24px; }
.stat { padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.stat b { display:block; font:600 1.75rem/1.2 var(--display); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat small { color:var(--muted); font-size:.875rem; }
.row-actions { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.chip.danger { color:var(--bad); }
.panel-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.panel-head h1 { margin:0; font:600 1.5rem/1.2 var(--display); letter-spacing:-.02em; }
.login { display:grid; gap:14px; max-width:380px; margin:48px auto; padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.login h1 { margin:0; font:600 1.5rem/1.2 var(--display); letter-spacing:-.02em; }
.form { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; padding:22px; }
.form h2 { margin:0; padding-right:48px; font:600 1.375rem/1.2 var(--display); letter-spacing:-.02em; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:14px; }
.field { display:grid; grid-template-columns:minmax(0,1fr); align-content:start; gap:6px; min-width:0; color:var(--muted); font-size:.875rem; font-weight:500; }
.field input:not([type="checkbox"],[type="color"],[type="file"]),.field select,.field textarea { width:100%; min-height:42px; padding:8px 11px; border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--fg); font:400 .9375rem var(--body); }
.field textarea { resize:vertical; }
.field textarea.code { min-height:150px; font:400 .8125rem/1.6 var(--mono); }
.field input[type="file"] { color:var(--muted); font:400 .875rem var(--body); max-width:100%; }
input[type="color"] { width:42px; height:36px; padding:2px; border:1px solid var(--line); border-radius:8px; background:var(--bg); cursor:pointer; }
.check { display:flex; align-items:center; gap:8px; color:var(--fg); font-size:.9375rem; }
.checks { display:flex; flex-wrap:wrap; gap:8px 16px; }
.inline-input { width:100%; min-height:36px; padding:4px 9px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); font:400 .9375rem var(--body); }
.form-actions { display:flex; align-items:center; gap:14px; }
.form-error { color:var(--bad); font-size:.9375rem; }
.form-error:empty { display:none; }

/* Socials page */
.socials { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:18px; max-width:820px; }
.social { display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.social svg { color:var(--lav); }
.social h2 { margin:0; font:600 1.375rem/1.2 var(--display); letter-spacing:-.02em; }
.social p { flex:1; color:var(--muted); }

/* Votes, footer and readable text pages */
.votes { color:var(--muted); font-size:.875rem; font-weight:500; }
.votes.bad { color:var(--warn); }
.form-actions { flex-wrap:wrap; }
.site-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; }
.site-foot nav { display:flex; gap:16px; }
.site-foot a { text-underline-offset:3px; }
.legal { max-width:68ch; margin-bottom:28px; }
.legal h1 { margin:0 0 8px; font:600 clamp(1.75rem,5vw,2.5rem)/1.1 var(--display); letter-spacing:-.03em; }
.legal h2 { margin:28px 0 8px; font:600 1.125rem/1.3 var(--display); letter-spacing:-.01em; }
.legal p, .legal ul { margin:0 0 12px; color:var(--muted); }
.legal li + li { margin-top:4px; }
.legal b { color:var(--fg); font-weight:600; }
.legal a { color:var(--lav); }

/* Daily charts */
:root { --chart:#a970ff; }
.charts { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:12px; margin-bottom:12px; }
.chart { min-width:0; margin:0; padding:16px 18px 12px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.chart figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; margin-bottom:18px; }
.chart figcaption b { font-weight:600; }
.chart figcaption small { color:var(--muted); font-size:.875rem; }
.plot { position:relative; height:120px; margin-left:34px; }
.tick { position:absolute; left:0; right:0; border-top:1px solid var(--line); }
.tick span { position:absolute; right:100%; margin-right:8px; translate:0 -50%; color:var(--muted); font:400 .75rem var(--mono); font-variant-numeric:tabular-nums; }
.bars { position:absolute; inset:0; display:flex; gap:2px; }
.slot { flex:1; min-width:0; display:flex; align-items:flex-end; justify-content:center; border-radius:4px 4px 0 0; }
.slot:hover { background:var(--tint); }
.slot i { display:block; width:100%; max-width:24px; border-radius:4px 4px 0 0; background:var(--chart); }
.plot-empty { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:.875rem; pointer-events:none; }
.tip { position:absolute; bottom:calc(100% + 6px); translate:-50% 0; padding:4px 9px; border:1px solid var(--line); border-radius:7px; background:var(--raised); color:var(--fg); font-size:.8125rem; white-space:nowrap; pointer-events:none; z-index:2; }
.x-axis { display:flex; justify-content:space-between; margin:8px 0 0 34px; color:var(--muted); font:400 .75rem var(--mono); }
.chart-table { margin-bottom:28px; color:var(--muted); font-size:.875rem; }
.chart-table summary { cursor:pointer; }
.chart-table summary:hover { color:var(--fg); }
.chart-table table { margin-top:10px; color:var(--fg); }

/* Admin settings */
.settings { display:grid; gap:18px; max-width:640px; }
.settings .panel-head { margin:0; }
.settings-form { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.settings-form h2 { margin:0; font:600 1.125rem/1.3 var(--display); }
.settings-form > p { color:var(--muted); font-size:.9375rem; }
.field small { color:var(--muted); font-weight:400; }
#settings-status { color:var(--ok); font-size:.9375rem; }

/* ---------- Premium layer: one drifting glow, quiet entrances, smooth page changes ---------- */
:root {
  --nav-h:68px; --ease:cubic-bezier(.2,.7,.2,1);
  --nav-bg:rgb(8 7 12 / .68); --line-soft:rgb(255 255 255 / .07); --tint-strong:rgb(139 92 246 / .2);
}
html { scrollbar-color:var(--raised) var(--bg); }
::selection { background:var(--accent-lo); color:var(--on-accent); }

@keyframes rise { from { opacity:0; translate:0 14px; } to { opacity:1; translate:0 0; } }
@keyframes drift-a { from { transform:translate3d(-6%,-4%,0) scale(1); } to { transform:translate3d(16%,10%,0) scale(1.18); } }
@keyframes drift-b { from { transform:translate3d(8%,6%,0) scale(1.1); } to { transform:translate3d(-14%,-6%,0) scale(.95); } }

/* Sticky top bar */
.navbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; height:var(--nav-h); border-bottom:1px solid var(--line-soft); background:var(--nav-bg); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); }
.navbar .wrap { width:100%; }
.navbar .top { flex-wrap:nowrap; }
.mark { white-space:nowrap; }
.mark-name, .mark-rest { display:inline; }
.nav-search { display:flex; align-items:center; gap:8px; min-height:40px; padding:0 8px 0 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--muted); font:500 .875rem var(--body); white-space:nowrap; cursor:pointer; transition:border-color .2s, color .2s; }
.nav-search:hover { border-color:var(--line-hi); color:var(--fg); }
kbd { padding:1px 6px; border:1px solid var(--line); border-radius:5px; color:var(--muted); font:500 .6875rem/1.6 var(--mono); white-space:nowrap; }
.tabs { isolation:isolate; }
.tabs a { position:relative; transition:color .2s; }
.tabs a[aria-current] { background:transparent; }
.tabs a[aria-current]::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:9px; background:var(--raised); }

/* The hero slides under the translucent bar, with two slow lights drifting behind it. */
.plate { position:relative; isolation:isolate; overflow:hidden; margin-top:calc(var(--nav-h) * -1); padding-block:calc(var(--nav-h) + 8px) 52px; }
.plate.slim { margin-top:0; padding-block:14px; overflow:visible; }
.plate::before, .plate::after { content:""; position:absolute; z-index:-1; aspect-ratio:1; border-radius:50%; pointer-events:none; will-change:transform; }
.plate::before { width:min(820px,110vw); left:-12%; top:-75%; background:radial-gradient(closest-side, var(--glow), transparent); animation:drift-a 24s ease-in-out infinite alternate; }
.plate::after { width:min(680px,90vw); right:-8%; top:-85%; background:radial-gradient(closest-side, var(--glow-2), transparent); animation:drift-b 31s ease-in-out infinite alternate; }
.plate.slim::before, .plate.slim::after { display:none; }
.hero { margin-top:40px; }
.hero > * { animation:rise .8s var(--ease) backwards; }
.hero > :nth-child(2) { animation-delay:.08s; }
.hero > :nth-child(3) { animation-delay:.16s; }
.hero > :nth-child(4) { animation-delay:.24s; }
.search input { transition:border-color .2s, box-shadow .2s; }
.search input:focus { border-color:var(--line-hi); box-shadow:0 0 0 3px var(--tint), 0 18px 50px -18px var(--glow); }

/* Live stats */
.hero-stats { display:flex; flex-wrap:wrap; gap:12px 36px; margin:28px 0 0; }
.hero-stats:empty { display:none; }
.hero-stats div { display:flex; flex-direction:column-reverse; gap:2px; }
.hero-stats dt { color:var(--muted); font-size:.875rem; }
.hero-stats dd { margin:0; font:600 1.75rem/1.1 var(--display); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }

/* Fade in on scroll. Never hides anything for people who turn motion off. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal]:not(.in) { opacity:0; }
  [data-reveal].in { animation:rise .65s var(--ease) backwards; animation-delay:calc(var(--i, 0) * 55ms); }
}

/* Glow that follows the cursor: a soft wash inside and a lit border. */
.glow { position:relative; }
.card { overflow:visible; }
.card > .tile { border-radius:15px 15px 0 0; }
@media (hover: hover) {
  .glow::before, .glow::after { content:""; position:absolute; pointer-events:none; border-radius:inherit; opacity:0; transition:opacity .3s; }
  .glow::before { inset:0; background:radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), var(--tint-strong), transparent 70%); }
  .glow::after {
    inset:-1px; padding:1px;
    background:radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--lav), transparent 70%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
  }
  .glow:hover::before, .glow:hover::after { opacity:1; }
}
.social { transition:border-color .2s, box-shadow .2s, translate .2s; }
.social:hover { box-shadow:0 20px 54px -26px var(--glow); translate:0 -2px; }
.tile img { transition:scale .6s var(--ease); }
.card:hover .tile img { scale:1.04; }

/* Buttons */
.btn { transition:filter .2s, translate .2s var(--ease), box-shadow .2s; }
.btn:hover { translate:0 -1px; box-shadow:inset 0 1px 0 var(--sheen), 0 16px 34px -12px var(--glow); }
.more { transition:color .2s; }

/* Featured script */
#featured { margin-bottom:32px; }
.featured { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); border:1px solid var(--line); border-radius:20px; background:var(--panel); box-shadow:0 34px 90px -56px var(--glow); }
.featured-art { position:relative; display:flex; align-items:flex-end; min-height:270px; padding:22px; overflow:hidden; border-radius:19px 0 0 19px; color:var(--fg); font:600 1.375rem/1.2 var(--display); letter-spacing:-.02em; text-decoration:none; background:radial-gradient(110% 130% at 88% 0%, var(--c), transparent 72%), var(--raised); }
.featured-art span { position:relative; z-index:1; }
.featured-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.featured-art.thumb::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 50%, var(--scrim)); }
.featured-body { display:flex; flex-direction:column; justify-content:center; gap:12px; min-width:0; padding:28px; }
.eyebrow { color:var(--lav); font:500 .75rem/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.featured h2 { margin:0; font:600 clamp(1.5rem,3vw,2.125rem)/1.12 var(--display); letter-spacing:-.03em; text-wrap:balance; }
.featured h2 a { text-decoration:none; }
.featured h2 a:hover { color:var(--lav); }
.featured .actions { margin-top:4px; }

/* Pop-ups slide in and out. Browsers without exit support simply close them. */
dialog { opacity:0; translate:0 18px; transition:opacity .25s var(--ease), translate .25s var(--ease), display .25s allow-discrete, overlay .25s allow-discrete; }
dialog[open] { opacity:1; translate:0 0; }
dialog::backdrop { opacity:0; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:opacity .25s, display .25s allow-discrete, overlay .25s allow-discrete; }
dialog[open]::backdrop { opacity:1; }
@starting-style {
  dialog[open] { opacity:0; translate:0 18px; }
  dialog[open]::backdrop { opacity:0; }
}

/* Page cross-fade */
::view-transition-old(root), ::view-transition-new(root) { animation-duration:.28s; animation-timing-function:var(--ease); }

/* Quick search */
#palette { width:min(620px,calc(100% - 32px)); margin:12vh auto auto; overflow:hidden; }
.palette-input { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); color:var(--muted); }
.palette-input svg { flex:none; }
.palette-input input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--fg); font:400 1.0625rem var(--body); }
.palette-input input::placeholder { color:var(--muted); }
#palette-list { max-height:min(420px,56vh); overflow-y:auto; padding:6px; }
#palette-list:empty { display:none; }
.palette-item { display:flex; align-items:center; gap:11px; min-height:44px; padding:8px 11px; border-radius:10px; text-decoration:none; }
.palette-item:hover { background:var(--raised); }
.palette-item[aria-selected="true"] { background:var(--tint); box-shadow:inset 0 0 0 1px var(--line-hi); }
.palette-title { min-width:0; overflow-wrap:anywhere; font-weight:500; }
.palette-meta { flex:none; margin-left:auto; padding-left:12px; color:var(--muted); font-size:.8125rem; }
.palette-empty { padding:20px 16px; color:var(--muted); }

/* Live executor status */
.st-updated { color:var(--ok); } .st-outdated { color:var(--bad); } .st-issues { color:var(--warn); }
.detected { display:inline-block; margin-top:3px; padding:0 6px; border:1px solid var(--line); border-radius:5px; color:var(--warn) !important; font:500 .6875rem/1.7 var(--mono) !important; }
td b a { text-decoration:none; }
td b a:hover { color:var(--lav); text-decoration:underline; text-underline-offset:3px; }
.sync-note { margin-top:18px; color:var(--muted); font-size:.875rem; }
.d-body-top { padding-top:24px; }
.d-body-top h2 { padding-right:48px; }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr)); gap:14px 20px; margin:0; }
.facts dt { color:var(--muted); font-size:.875rem; }
.facts dd { margin:2px 0 0; font-weight:500; overflow-wrap:anywhere; }

/* Works-now line, saved stars, New and Updated labels, game links */
.works-now { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:.875rem; }
.works-now i { flex:none; width:7px; height:7px; border-radius:50%; background:var(--ok); }
.works-now.none { color:var(--warn); }
.works-now.none i { background:var(--warn); }
.save { position:absolute; top:10px; right:10px; z-index:2; display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--muted); cursor:pointer; transition:color .2s, border-color .2s; }
.save svg { fill:none; }
.save:hover { border-color:var(--line-hi); color:var(--fg); }
.save[aria-pressed="true"] { border-color:var(--line-hi); color:var(--lav); }
.save[aria-pressed="true"] svg { fill:currentColor; }
.pill.new { border-color:transparent; background:linear-gradient(180deg,var(--accent-hi),var(--accent-lo)); color:var(--on-accent); }
.game { text-decoration:none; }
.game[aria-current] { background:var(--tint); color:var(--lav); box-shadow:inset 0 0 0 1px var(--line-hi); }
.d h3 a { color:inherit; }

#icon-preview { border-radius:10px; }

/* Admin drafts, row menus and bulk actions */
.draft-row td { opacity:.82; }
.draft-row .tag { margin-left:6px; }
details.menu { position:relative; }
details.menu > summary { list-style:none; display:inline-flex; align-items:center; }
details.menu > summary::-webkit-details-marker { display:none; }
.menu-list { position:absolute; right:0; top:calc(100% + 6px); z-index:5; display:grid; gap:4px; min-width:170px; padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:0 18px 40px -18px var(--glow); }
.menu-list .chip { justify-content:flex-start; text-align:left; border-color:transparent; }
.menu-list .chip:hover { border-color:var(--line); }
.bulk-bar { padding:10px 12px; border:1px solid var(--line-hi); border-radius:12px; background:var(--tint); }
.whats-new p { white-space:pre-line; }
.preview-note { border-color:var(--line-hi); }
label[for="icon-file"] { cursor:pointer; }
label[for="icon-file"]:has(+ #icon-file:focus-visible) { outline:2px solid var(--focus); outline-offset:2px; }
.copy-row { display:flex; gap:8px; align-items:center; }
.copy-row input { flex:1; min-width:0; font-family:var(--mono) !important; font-size:.8125rem !important; }
.copy-row .chip { flex:none; }
.btn:disabled { cursor:not-allowed; }

/* Script requests */
.link-btn { padding:0; border:0; background:transparent; color:inherit; font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.link-btn:hover { color:var(--fg); }
.request-strip { margin-top:24px; color:var(--muted); font-size:.9375rem; }
.request-strip .link-btn { color:var(--lav); }
.form-fields { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.site-foot nav { flex-wrap:wrap; align-items:center; }
.request-note { color:var(--muted); font-size:.875rem; }

@media (max-width:980px) { .nav-search { display:none; } }
@media (max-width:720px) {
  .featured { grid-template-columns:minmax(0,1fr); }
  .featured-art { min-height:130px; border-radius:19px 19px 0 0; }
  .featured-body { padding:20px; }
}
@media (max-width:520px) {
  :root { --nav-h:60px; }
  .navbar .top { gap:8px; }
  .mark-rest { display:none; }
  .tabs a { min-height:38px; padding:0 9px; font-size:.875rem; }
  .hero { margin-top:30px; }
  .hero-stats { gap:12px 28px; }
  .palette-meta { display:none; }
}
@media (max-width:380px) { .tabs a { padding:0 6px; font-size:.8125rem; } }
@media (max-width:340px) { .mark-name { display:none; } }

/* Executor cards, chooser, platform tabs and Roblox update history */
.xtabs { display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 14px; }
.xtab .n { margin-left:4px; color:var(--muted); font:500 .75rem var(--mono); }
.xtab[aria-pressed="true"] .n { color:inherit; }
.xgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr)); gap:16px; margin-top:16px; }
.xcard { display:flex; flex-direction:column; gap:8px; min-width:0; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--panel); transition:border-color .18s, translate .18s; }
.xcard:hover { border-color:var(--line-hi); translate:0 -2px; }
.xcard.up { box-shadow:inset 0 2px 0 var(--ok); }
.xcard-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.xcard h3 { margin:0; font-size:1.125rem; overflow-wrap:anywhere; }
.xcard h3 a, .pick h3 a { color:inherit; text-decoration:none; }
.xcard h3 a:hover, .pick h3 a:hover { color:var(--lav); }
.xcard .st { margin:0; }
.since, .xmeta, .xnote { margin:0; color:var(--muted); font-size:.875rem; }
.xscores { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:4px 0; }
.xscores dt { color:var(--muted); font:500 .75rem var(--mono); }
.xscores dd { margin:3px 0 0; }
.xscores .m span { width:100%; max-width:80px; }
.detected-note { margin:4px 0 0; max-width:75ch; color:var(--muted); font-size:.875rem; }
.chooser { margin-bottom:8px; padding:20px; border:1px solid var(--line-hi); border-radius:18px; background:linear-gradient(160deg,var(--tint),transparent 60%), var(--panel); }
.chooser h2 { margin:0 0 12px; font-size:1.125rem; }
.chooser-steps { display:flex; flex-wrap:wrap; gap:10px 18px; }
.chooser-steps .group { display:flex; flex-wrap:wrap; gap:8px; }
#chooser-result { margin-top:14px; }
.pick { display:grid; gap:6px; justify-items:start; }
.pick h3 { margin:0; font-size:1.375rem; }
.pick p { margin:0; color:var(--muted); }
.alts { margin:10px 0 0; color:var(--muted); font-size:.875rem; }
.alts a { color:var(--lav); }
.muted-line { margin:0; color:var(--muted); font-size:.9375rem; }
.history { margin-top:36px; }
.history h2 { margin:0 0 12px; font-size:1.125rem; }
.history-list { display:grid; gap:10px; margin:0 0 10px; padding:0; list-style:none; }
.history-list li { display:grid; gap:4px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.history-list li div { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
.history-list b { font:500 .875rem var(--mono); overflow-wrap:anywhere; }
.history-list small, .history-list p { margin:0; color:var(--muted); font-size:.875rem; }
.trending { margin-bottom:28px; }
.xcard .detected { align-self:flex-start; margin-top:0; }