:root {
  color-scheme: dark;
  --ink:#05070d; --panel:#0c1019; --cream:#f3eddf; --blue:#70a7ff;
  --blue-deep:#2d6cdf; --wine:#a81932; --fire:#ff6c2f; --muted:#a6adba;
  --safe-t:max(1rem,env(safe-area-inset-top)); --safe-r:max(1rem,env(safe-area-inset-right));
  --safe-b:max(1rem,env(safe-area-inset-bottom)); --safe-l:max(1rem,env(safe-area-inset-left));
  font-family: Inter, "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; min-width:320px; background:var(--ink); color:var(--cream); }
button,a,input { font:inherit; }
button,a,[role="button"] { -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; }
button { color:inherit; }
a { color:inherit; }
.catalog-body { overflow-x:hidden; background:radial-gradient(circle at 82% 4%,#2d6cdf45,transparent 28%),radial-gradient(circle at 8% 28%,#a819322e,transparent 24%),var(--ink); }
.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:var(--safe-t) var(--safe-r) 0 var(--safe-l); max-width:1280px; margin:auto; }
.wordmark { display:flex; align-items:center; gap:.65rem; font-weight:950; font-size:.78rem; letter-spacing:.12em; text-decoration:none; white-space:nowrap; }
.wordmark span { width:42px; height:42px; display:grid; place-items:center; border:1px solid #ffffff35; border-radius:50%; font-size:.7rem; color:var(--blue); }
.topbar__actions { display:flex; gap:.5rem; }
.icon-button { min-height:48px; min-width:48px; border:1px solid #ffffff20; border-radius:999px; background:#0c1019cc; display:flex; align-items:center; justify-content:center; gap:.45rem; padding:.7rem 1rem; cursor:pointer; }
.icon-button span { max-width:110px; overflow:hidden; text-overflow:ellipsis; }
.catalog-hero { min-height:min(800px,94dvh); position:relative; display:grid; grid-template-rows:auto 1fr; isolation:isolate; overflow:hidden; }
.catalog-hero::before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,#05070d 0 42%,#05070d8c 68%,#05070d 100%),url("../assets/images/photos/fire-ring.jpg") 86% 50%/min(55vw,720px) auto no-repeat; opacity:.9; filter:saturate(1.12) contrast(1.08); }
.catalog-hero::after { content:""; position:absolute; inset:auto 0 0; height:45%; z-index:-1; background:linear-gradient(transparent,var(--ink)); }
.hero-copy { width:min(1280px,100%); margin:auto; padding:clamp(4rem,8vw,8rem) var(--safe-r) 5rem var(--safe-l); position:relative; z-index:1; }
.eyebrow { color:var(--blue); font-size:.73rem; font-weight:900; letter-spacing:.2em; text-transform:uppercase; }
.eyebrow--red { color:var(--wine); }
.hero-copy h1 { max-width:11ch; margin:.5rem 0 1.5rem; font-size:clamp(3.5rem,9vw,8rem); line-height:.84; letter-spacing:-.065em; text-transform:uppercase; }
.hero-copy h1 em { color:var(--fire); font-style:normal; }
.hero-copy__intro { color:var(--muted); max-width:42ch; line-height:1.7; margin-bottom:2rem; }
.primary-button,.secondary-button { min-height:56px; display:inline-flex; align-items:center; justify-content:center; gap:.8rem; border:0; border-radius:999px; padding:1rem 1.4rem; text-decoration:none; font-weight:900; cursor:pointer; }
.primary-button { background:var(--cream); color:var(--ink); }
.secondary-button { background:#ffffff0b; border:1px solid #ffffff28; color:var(--cream); }
.catalog { padding:5rem var(--safe-r) 7rem var(--safe-l); max-width:1280px; margin:auto; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:2rem; }
.section-heading h2 { font-size:clamp(2.3rem,5vw,4.5rem); line-height:.9; letter-spacing:-.055em; margin:.4rem 0 0; }
.section-heading>p { color:var(--muted); max-width:36ch; line-height:1.6; }
.global-ranking { margin-top:4rem; }
.global-ranking__list { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; max-width:640px; }
.global-ranking__list li { display:grid; grid-template-columns:34px 1fr auto auto; gap:.8rem; align-items:center; padding:.7rem 1rem; border-radius:12px; background:#ffffff08; }
.global-ranking__list li b:first-child { color:var(--blue); }
.global-ranking__list li span { color:var(--muted); font-size:.78rem; }
.global-ranking__empty { color:var(--muted); background:none !important; padding:0 !important; }
.section-heading__row { display:flex; align-items:center; gap:1rem; }
.link-button { border:1px solid #ffffff28; background:#ffffff0b; color:var(--cream); border-radius:999px; padding:.65rem 1.1rem; font-weight:900; font-size:.82rem; cursor:pointer; white-space:nowrap; }
.ranking-screen { position:fixed; inset:0; z-index:1000; background:var(--ink); overflow-y:auto; padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); }
.ranking-screen[hidden] { display:none; }
.ranking-screen__header { display:flex; align-items:center; gap:1rem; max-width:1000px; margin:1rem auto 2rem; }
.ranking-screen__header h2 { font-size:clamp(1.8rem,4vw,3rem); margin:0; letter-spacing:-.04em; }
.ranking-tabs { max-width:1000px; margin:0 auto 1.2rem; display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.3rem; }
.ranking-tabs button { flex:none; border:1px solid #ffffff24; background:#ffffff0b; color:var(--muted); border-radius:999px; padding:.55rem 1rem; font-weight:900; font-size:.78rem; white-space:nowrap; cursor:pointer; }
.ranking-tabs button.is-active { background:var(--cream); color:var(--ink); border-color:var(--cream); }
.ranking-screen__status { max-width:1000px; margin:0 auto 1rem; color:var(--muted); font-size:.85rem; }
.ranking-table-wrap { max-width:1000px; margin:0 auto; overflow-x:auto; }
.ranking-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.ranking-table th,.ranking-table td { padding:.75rem .9rem; text-align:left; white-space:nowrap; border-bottom:1px solid #ffffff14; }
.ranking-table th { color:var(--blue); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; position:sticky; top:0; background:var(--ink); }
.ranking-table td:first-child,.ranking-table th:first-child { color:var(--blue); font-weight:900; }
.ranking-table tr:hover td { background:#ffffff06; }
.game-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; }
.game-card { grid-column:span 4; min-height:360px; position:relative; overflow:hidden; border:1px solid #ffffff1c; border-radius:22px; padding:1.3rem; text-decoration:none; background:linear-gradient(155deg,var(--card,#15213b),#0c1019 72%); display:flex; flex-direction:column; justify-content:space-between; transition:transform .25s,border .25s; isolation:isolate; }
.game-card:nth-child(1),.game-card:nth-child(6) { grid-column:span 8; }
.game-card:hover,.game-card:focus-visible { transform:translateY(-5px); border-color:#70a7ff88; outline:none; }
.game-card::before { content:""; position:absolute; width:220px; height:220px; right:-65px; top:28px; z-index:-1; border:32px solid var(--accent); border-radius:50%; opacity:.15; }
.game-card::after { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(135deg,transparent 30%,#05070d 88%),repeating-linear-gradient(110deg,transparent 0 20px,#fff 21px 22px); opacity:.09; }
.game-card__num { color:#ffffff65; font-size:.75rem; font-weight:900; letter-spacing:.18em; }
.game-card__song { display:block; margin-bottom:.55rem; color:var(--accent); font-size:.77rem; font-weight:950; letter-spacing:.14em; text-transform:uppercase; }
.game-card__index { position:absolute; right:-.05em; top:.12em; color:var(--accent); opacity:.18; font-size:clamp(8rem,17vw,13rem); line-height:.8; font-weight:950; letter-spacing:-.1em; }
.game-card__copy { position:relative; z-index:1; max-width:76%; }
.game-card h3 { font-size:clamp(1.6rem,3vw,2.6rem); margin:0 0 .6rem; line-height:.95; letter-spacing:-.04em; text-transform:uppercase; }
.game-card__play { position:absolute; right:1.2rem; bottom:1.2rem; width:50px; height:50px; display:grid; place-items:center; border-radius:50%; background:var(--cream); color:var(--ink); font-weight:900; }
.catalog-footer { border-top:1px solid #ffffff12; min-height:150px; padding:2rem var(--safe-r) max(2rem,var(--safe-b)) var(--safe-l); display:flex; align-items:center; justify-content:space-between; gap:2rem; color:var(--muted); max-width:1280px; margin:auto; font-size:.85rem; }
.catalog-footer>a:last-child { color:var(--cream); }
.visit-counter { color:var(--blue); font-weight:900; letter-spacing:.12em; white-space:nowrap; }
.modal-backdrop { position:fixed; inset:0; z-index:1000; padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); display:grid; place-items:center; background:#05070de8; backdrop-filter:blur(14px); }
.modal-backdrop[hidden] { display:none; }
.modal { width:min(430px,100%); padding:2rem; border:1px solid #ffffff22; border-radius:24px; background:var(--panel); box-shadow:0 30px 100px #000a; }
.modal h2 { font-size:2.2rem; line-height:.95; margin:.4rem 0 1rem; letter-spacing:-.04em; }
.modal p { color:var(--muted); line-height:1.5; }
.modal label { display:block; font-size:.78rem; font-weight:900; letter-spacing:.1em; margin:1.5rem 0 .5rem; }
.modal input { width:100%; min-height:58px; border:1px solid #ffffff32; border-radius:14px; background:#05070d; color:var(--cream); padding:.8rem 1rem; font-size:1.05rem; }
.modal .error { color:#ff8c79; min-height:1.4rem; margin:.4rem 0; font-size:.85rem; }
.modal .primary-button { width:100%; }
@media (max-width:800px) {
  .game-card,.game-card:nth-child(1),.game-card:nth-child(6) { grid-column:span 6; min-height:310px; }
  .section-heading { align-items:start; flex-direction:column; }
  .catalog-footer { align-items:flex-start; flex-direction:column; }
}
@media (max-width:540px) {
  .topbar { height:70px; }
  .icon-button span { display:none; }
  .catalog-hero { min-height:100dvh; }
  .hero-copy { align-self:center; padding-top:2rem; padding-bottom:6rem; }
  .hero-copy h1 { font-size:clamp(3.2rem,18vw,5.4rem); }
  .catalog-hero::before { background:linear-gradient(180deg,#05070d 0 32%,#05070d70 68%,#05070d),url("../assets/images/photos/fire-ring.jpg") 74% 78%/118vw auto no-repeat; opacity:.88; }
  .game-card,.game-card:nth-child(1),.game-card:nth-child(6) { grid-column:1/-1; min-height:270px; }
  .game-card__copy { max-width:76%; }
  .game-card__index { font-size:9rem; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }