/* VIBE GAMING — neon / cyber, modern but minimal.
   Near-black canvas with a faint grid, one hot accent (cyan) + one warm accent (magenta), mono labels,
   hairline borders, clipped corners and glow only where something is interactive. */
:root {
  --bg: #06070b; --bg2: #0b0d14; --bg3: #10131c; --line: rgba(160, 200, 255, 0.09); --line2: rgba(160, 200, 255, 0.18);
  --text: #e8ecf4; --muted: #7d8699; --dim: #4f5668;
  --cyan: #14e0c8; --mag: #ffb547; --violet: #3aa8ff; --lime: #b6ff3b; --amber: #ffc53d; --red: #ff6b6b;
  --hot: var(--mag); --grad: linear-gradient(90deg, var(--mag), var(--cyan));
  --t-trash: #8b93a3; --t-experiment: var(--lime); --t-solid: var(--cyan); --t-masterpiece: var(--amber);
  --mono: ui-monospace, 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  --r: 6px; --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --cut: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  --cut-s: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
* { box-sizing: border-box; }
::selection { background: var(--cyan); color: #000; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; display: flex; flex-direction: column; position: relative; }
/* grid + glows behind everything */
body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(20, 224, 200, 0.10), transparent 60%),
    radial-gradient(800px 480px at 100% 0%, rgba(255, 181, 71, 0.10), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(58, 168, 255, 0.10), transparent 60%),
    var(--bg); }
body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.55;
  background-image: linear-gradient(rgba(160, 200, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(160, 200, 255, 0.035) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.35) 70%, transparent); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -0.01em; }

/* ------------------------------------------------------------------ header */
header#top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 26px; padding: 0 32px; height: 62px;
  background: rgba(6, 7, 11, 0.72); backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--line); }
header#top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(20, 224, 200, 0.55), rgba(255, 181, 71, 0.45), transparent); opacity: 0.6; }
.logo { display: flex; align-items: center; gap: 11px; }
.logo .mark { width: 30px; height: 30px; display: grid; place-items: center; font: 900 15px var(--mono); color: var(--logo); border: 1px solid var(--logo);
  clip-path: var(--cut-s); background: rgba(20, 224, 200, 0.08); text-shadow: 0 0 10px var(--cyan); box-shadow: inset 0 0 12px rgba(20, 224, 200, 0.25); }
.logo .word { font: 800 15px var(--mono); letter-spacing: 0.22em; }
.logo { --logo: var(--cyan); --logo-glow: rgba(20, 224, 200, 0.55); }
.logo .word b { color: var(--logo); margin-left: 2px; text-shadow: 0 0 14px var(--logo-glow); }
.logo .word b::before { content: '//'; color: var(--mag); opacity: 0.75; margin-right: 4px; text-shadow: 0 0 8px rgba(255, 181, 71, 0.45); }
nav { display: flex; gap: 2px; }
nav a { position: relative; white-space: nowrap; padding: 8px 12px; font: 600 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); transition: color 0.15s; }
nav a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); transform: scaleX(0); transition: transform 0.2s var(--ease); }
nav a:hover { color: var(--text); }
nav a.on { color: var(--cyan); } nav a.on::after, nav a:hover::after { transform: scaleX(1); }
nav a i { font-style: normal; background: var(--mag); color: #000; padding: 0 6px; font-size: 11px; margin-left: 6px; border-radius: 3px; }
nav a i:empty { display: none; }
#search { margin-left: auto; position: relative; }
#search::before { content: '⌕'; position: absolute; left: 12px; top: 50%; transform: translateY(-52%); color: var(--dim); font-size: 16px; pointer-events: none; }
#search input { width: 220px; padding: 8px 64px 8px 32px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); outline: none; font: 13px var(--mono); letter-spacing: 0.02em; border-radius: 4px; transition: border-color 0.15s, width 0.25s var(--ease), box-shadow 0.15s; }
#search input::placeholder { color: var(--dim); }
#search input:focus { border-color: rgba(20, 224, 200, 0.6); width: 320px; box-shadow: 0 0 0 3px rgba(20, 224, 200, 0.08), 0 0 18px rgba(20, 224, 200, 0.12); }
#hdr { display: contents; }
#logout .ic { font-size: 15px; letter-spacing: 0; line-height: 1; } #logout .lbl { display: none; } #logout { padding-left: 11px; padding-right: 11px; }
#account .nm { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
#prefs { display: flex; align-items: center; gap: 6px; }
.pref-btn { height: 32px; min-width: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.02); color: var(--muted); cursor: pointer; clip-path: var(--cut-s); font: 700 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; transition: color 0.15s, border-color 0.15s, box-shadow 0.15s; }
.pref-btn .ic { font-size: 15px; line-height: 1; letter-spacing: 0; }
.pref-btn .lbl { display: none; }
.pref-btn:hover { color: var(--cyan); border-color: var(--cyan); box-shadow: inset 0 0 12px rgba(20, 224, 200, 0.15); }
.lang-seg { display: flex; border: 1px solid var(--line2); border-radius: 4px; overflow: hidden; }
.lang-seg button { height: 30px; padding: 0 8px; background: none; border: none; border-right: 1px solid var(--line); color: var(--muted); cursor: pointer; font: 700 11px var(--mono); letter-spacing: 0.08em; transition: color 0.15s, background 0.15s; }
.lang-seg button:last-child { border-right: none; }
.lang-seg button:hover { color: var(--text); }
.lang-seg button.on { color: var(--cyan); background: rgba(20, 224, 200, 0.08); box-shadow: inset 0 -2px 0 var(--cyan); }
#account { display: flex; gap: 8px; align-items: center; }
main { flex: 1; width: min(1280px, 100%); margin: 0 auto; padding: 30px 32px 72px; animation: fadeIn 0.3s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } }
footer { display: flex; flex-direction: column; gap: 6px; padding: 28px 32px 34px; border-top: 1px solid var(--line); font: 12px var(--mono); letter-spacing: 0.06em; text-align: center; color: var(--muted); }
footer span:first-child { color: var(--text); letter-spacing: 0.2em; text-transform: uppercase; }

/* ------------------------------------------------------------------ buttons & inputs */
.btn { position: relative; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.02);
  cursor: pointer; font: 700 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; clip-path: var(--cut-s); transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s; }
.btn:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(20, 224, 200, 0.06); box-shadow: inset 0 0 18px rgba(20, 224, 200, 0.12); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--cyan); border-color: var(--cyan); color: #00201c; box-shadow: 0 0 24px rgba(20, 224, 200, 0.35); }
.btn.primary:hover { background: #5cefdc; color: #00201c; box-shadow: 0 0 34px rgba(20, 224, 200, 0.55); }
.btn.big { padding: 14px 24px; font-size: 13px; clip-path: var(--cut); }
.btn.danger { border-color: rgba(255, 107, 107, 0.55); color: var(--red); } .btn.danger:hover { background: rgba(255, 107, 107, 0.08); box-shadow: inset 0 0 18px rgba(255, 107, 107, 0.15); }
.btn.ok { border-color: rgba(182, 255, 59, 0.55); color: var(--lime); } .btn.ok:hover { background: rgba(182, 255, 59, 0.08); box-shadow: inset 0 0 18px rgba(182, 255, 59, 0.15); }
.btn:disabled { opacity: 0.4; cursor: default; }
label.f { display: flex; flex-direction: column; gap: 7px; font: 700 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
label.f small { font-weight: 500; text-transform: none; letter-spacing: 0.02em; color: var(--dim); }
input.in, textarea.in, select.in { width: 100%; padding: 10px 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.35); color: var(--text); outline: none; border-radius: 4px; font: 14px var(--sans); letter-spacing: 0; text-transform: none; transition: border-color 0.15s, box-shadow 0.15s; }
input.in:focus, textarea.in:focus, select.in:focus { border-color: rgba(20, 224, 200, 0.6); box-shadow: 0 0 0 3px rgba(20, 224, 200, 0.08); }
textarea.in { min-height: 120px; resize: vertical; font: 13px/1.55 var(--mono); }
select.in { appearance: none; padding-right: 30px; background: rgba(0, 0, 0, 0.35) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%237d8699'/></svg>") no-repeat right 12px center; }
.row { display: flex; gap: 14px; } .row > * { flex: 1; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.panel { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01)); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 3px; font: 600 11px var(--mono); letter-spacing: 0.06em; color: #b9c1d2; background: rgba(255, 255, 255, 0.02); transition: border-color 0.15s, color 0.15s; }
a.chip:hover { border-color: var(--cyan); color: var(--cyan); }
.chip.ai { border-color: rgba(20, 224, 200, 0.3); color: #a6f5ea; background: rgba(20, 224, 200, 0.05); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* section headings: // LABEL ────── */
h2.sec { display: flex; align-items: center; gap: 12px; margin: 48px 0 18px; font: 700 13px var(--mono); letter-spacing: 0.22em; text-transform: uppercase; }
h2.sec::before { content: '//'; color: var(--mag); text-shadow: 0 0 10px rgba(255, 181, 71, 0.6); }
h2.sec::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line2), transparent); order: 3; }
h2.sec small { order: 2; font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: none; color: var(--dim); }

/* ------------------------------------------------------------------ tiers & status */
.tier { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; font: 800 10.5px var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  background: rgba(0, 0, 0, 0.72); border: 1px solid currentColor; border-radius: 3px; text-shadow: 0 0 10px currentColor; }
.tier.trash { color: var(--t-trash); text-shadow: none; } .tier.experiment { color: var(--t-experiment); } .tier.solid { color: var(--t-solid); }
.tier.masterpiece { color: var(--t-masterpiece); box-shadow: 0 0 16px rgba(255, 197, 61, 0.35), inset 0 0 10px rgba(255, 197, 61, 0.15); }
.status { font: 800 10px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; border: 1px solid transparent; }
.status.draft { border-color: var(--line2); color: var(--muted); } .status.pending { border-color: rgba(255, 197, 61, 0.5); color: var(--amber); }
.status.approved { border-color: rgba(182, 255, 59, 0.5); color: var(--lime); } .status.rejected { border-color: rgba(255, 107, 107, 0.5); color: var(--red); }

/* ------------------------------------------------------------------ game cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.card { position: relative; display: flex; flex-direction: column; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.2s; }
/* corner brackets that light up on hover */
.card::before, .card::after { content: ''; position: absolute; width: 14px; height: 14px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.2s, transform 0.2s var(--ease); }
.card::before { left: 6px; top: 6px; border-left: 2px solid var(--tc); border-top: 2px solid var(--tc); transform: translate(4px, 4px); }
.card::after { right: 6px; bottom: 6px; border-right: 2px solid var(--mag); border-bottom: 2px solid var(--mag); transform: translate(-4px, -4px); }
.card { --tc: var(--cyan); } .card.t-masterpiece { --tc: var(--amber); } .card.t-experiment { --tc: var(--lime); } .card.t-trash { --tc: #aab2c2; }
.card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tc) 55%, transparent); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6), 0 0 30px color-mix(in srgb, var(--tc) 16%, transparent); }
.card .cov .dots { position: absolute; left: 10px; right: 60px; bottom: 10px; z-index: 1; display: flex; gap: 4px; opacity: 0; transition: opacity 0.2s; }
.card:hover .cov .dots { opacity: 1; }
.card .cov .dots i { flex: 1; max-width: 26px; height: 3px; background: rgba(255, 255, 255, 0.3); border-radius: 2px; }
.card .cov .dots i.on { background: var(--tc); box-shadow: 0 0 6px var(--tc); }
.card .cov { transition: background-image 0.25s; }
.card:hover::before, .card:hover::after { opacity: 1; transform: none; }
.card .cov { aspect-ratio: 16 / 9; background: #0f1220 center / cover no-repeat; position: relative; overflow: hidden; transition: background-size 0.4s var(--ease); }
.card .cov::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(6, 7, 11, 0.85)), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px); }
.card .cov .tier { position: absolute; left: 10px; top: 10px; z-index: 1; }
.card .cov .play { position: absolute; right: 12px; bottom: 12px; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; color: #00201c; background: var(--cyan); font-size: 14px;
  clip-path: var(--cut-s); box-shadow: 0 0 20px var(--cyan); opacity: 0; transform: translateY(6px); transition: 0.2s var(--ease); }
.card:hover .cov .play { opacity: 1; transform: none; }
.card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 7px; }
.card .t { font-weight: 800; font-size: 16px; letter-spacing: 0.01em; transition: color 0.15s; }
.card:hover .t { color: var(--tc); }
.card .tl { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.card .meta { display: flex; gap: 12px; font: 11px var(--mono); letter-spacing: 0.04em; color: var(--dim); align-items: center; }
.card .meta b { color: var(--amber); font-weight: 700; }
.empty { padding: 44px; text-align: center; color: var(--muted); border: 1px dashed var(--line2); border-radius: var(--r); font: 13px var(--mono); }
.empty a { color: var(--cyan); }

/* ------------------------------------------------------------------ home */
.hero { --mx: 70%; --my: 30%; position: relative; height: 480px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #0b0d14; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(420px 300px at var(--mx) var(--my), rgba(20, 224, 200, 0.10), transparent 70%), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px); }
.hero::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(20, 224, 200, 0.06), inset 0 -80px 120px -60px rgba(0, 0, 0, 0.7); }
.hero .slide { position: absolute; inset: 0; display: flex; align-items: flex-end; opacity: 0; visibility: hidden; transition: opacity 0.9s var(--ease), visibility 0.9s; }
.hero .slide.on { opacity: 1; visibility: visible; }
.hero .bgimg { position: absolute; inset: 0; background: #0f1220 center / cover no-repeat; transform: scale(1.12); transition: transform 8s linear; }
.hero .slide.on .bgimg { transform: scale(1.02); }
.hero .slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 7, 11, 0.96) 0%, rgba(6, 7, 11, 0.72) 42%, rgba(6, 7, 11, 0.05) 100%), linear-gradient(0deg, rgba(6, 7, 11, 0.92), transparent 55%); }
.hero .in { position: relative; z-index: 2; padding: 44px 44px 64px; max-width: 660px; display: flex; flex-direction: column; gap: 16px; }
.hero .slide .in > * { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.hero .slide.on .in > * { opacity: 1; transform: none; }
.hero .slide.on .in > :nth-child(2) { transition-delay: 0.08s; } .hero .slide.on .in > :nth-child(3) { transition-delay: 0.16s; } .hero .slide.on .in > :nth-child(4) { transition-delay: 0.22s; } .hero .slide.on .in > :nth-child(5) { transition-delay: 0.28s; }
.hero .acts { display: flex; gap: 12px; margin-top: 6px; }
.hero-nav { position: absolute; z-index: 4; right: 26px; bottom: 24px; display: flex; align-items: center; gap: 8px; }
.hero-nav .hn { width: 30px; height: 30px; display: grid; place-items: center; background: rgba(6, 7, 11, 0.6); border: 1px solid var(--line2); color: var(--text); cursor: pointer; font-size: 18px; line-height: 1; clip-path: var(--cut-s); transition: 0.15s; }
.hero-nav .hn:hover { border-color: var(--cyan); color: var(--cyan); }
.hero-nav .hdot { width: 34px; height: 4px; padding: 0; border: none; background: rgba(255, 255, 255, 0.18); cursor: pointer; overflow: hidden; border-radius: 2px; }
.hero-nav .hdot span { display: block; height: 100%; width: 0; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.hero-nav .hdot.on span { animation: fill 7s linear forwards; }
.hero:hover .hero-nav .hdot.on span { animation-play-state: paused; }
@keyframes fill { to { width: 100%; } }
/* glitchy title */
.hero h1, .nf-code { position: relative; }
.hero h1::before, .hero h1::after, .nf-code::before, .nf-code::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; pointer-events: none; opacity: 0; }
.hero h1::before, .nf-code::before { color: var(--cyan); animation: glitchA 5s infinite steps(1); }
.hero h1::after, .nf-code::after { color: var(--mag); animation: glitchB 5s infinite steps(1); }
@keyframes glitchA { 0%, 91%, 100% { opacity: 0; } 92% { opacity: 0.8; clip-path: inset(10% 0 60% 0); transform: translate(-4px, 0); } 94% { opacity: 0.8; clip-path: inset(55% 0 20% 0); transform: translate(3px, 0); } 96% { opacity: 0; } }
@keyframes glitchB { 0%, 92%, 100% { opacity: 0; } 93% { opacity: 0.8; clip-path: inset(40% 0 35% 0); transform: translate(4px, 0); } 95% { opacity: 0.8; clip-path: inset(75% 0 5% 0); transform: translate(-3px, 0); } 97% { opacity: 0; } }
/* stats strip */
.stats { display: grid; grid-template-columns: repeat(4, 1fr) auto; align-items: center; margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); }
.stats > div { padding: 16px 22px; border-right: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; }
.stats b { font: 800 26px var(--mono); color: var(--text); text-shadow: 0 0 18px rgba(20, 224, 200, 0.35); }
.stats span { font: 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.stats .btn { margin: 0 16px; }
.panel.cta { display: flex; align-items: center; gap: 20px; justify-content: space-between; flex-wrap: wrap; padding: 26px 28px; border-color: rgba(255, 181, 71, 0.25); background: linear-gradient(90deg, rgba(255, 181, 71, 0.06), rgba(20, 224, 200, 0.04)); }
.hero .kicker { font: 700 11px var(--mono); letter-spacing: 0.3em; color: var(--cyan); text-shadow: 0 0 12px rgba(20, 224, 200, 0.6); }
.hero .kicker::before { content: '▍'; margin-right: 8px; color: var(--mag); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero h1 { font-size: 64px; font-weight: 900; letter-spacing: -0.02em; line-height: 0.95; text-shadow: 0 0 30px rgba(20, 224, 200, 0.25), 2px 0 0 rgba(255, 181, 71, 0.35), -2px 0 0 rgba(20, 224, 200, 0.35); }
.hero p { font-size: 17px; color: #c3cad8; margin: 0; max-width: 520px; }
.pitch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 14px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; counter-reset: pitch; }
.pitch .panel { border: none; border-radius: 0; background: var(--bg2); padding: 20px 20px 22px; counter-increment: pitch; transition: background 0.2s; }
.pitch .panel:hover { background: var(--bg3); }
.pitch .panel::before { content: '0' counter(pitch); display: block; font: 700 11px var(--mono); letter-spacing: 0.2em; color: var(--mag); margin-bottom: 10px; }
.pitch h3 { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.pitch p { margin: 0; font-size: 13px; color: var(--muted); }
.tierstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tierstrip a { position: relative; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); display: flex; flex-direction: column; gap: 8px; overflow: hidden; transition: border-color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s; }
.tierstrip a::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: currentColor; opacity: 0.6; box-shadow: 0 0 14px currentColor; }
.tierstrip a:hover { transform: translateY(-3px); border-color: currentColor; box-shadow: 0 0 26px -6px currentColor; }
.tierstrip p { margin: 0; font-size: 13px; color: var(--muted); }
.tierstrip .muted { font: 11px var(--mono); letter-spacing: 0.06em; }

/* ------------------------------------------------------------------ browse */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0 22px; }
.filters .seg { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.filters .seg a { padding: 7px 12px; font: 600 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-right: 1px solid var(--line); transition: color 0.15s, background 0.15s; }
.filters .seg a:last-child { border-right: none; }
.filters .seg a:hover { color: var(--text); background: rgba(255, 255, 255, 0.03); }
.filters .seg a.on { color: var(--cyan); background: rgba(20, 224, 200, 0.08); box-shadow: inset 0 -2px 0 var(--cyan); }
.filters select.in { width: auto; font: 12px var(--mono); }

/* ------------------------------------------------------------------ game page */
.gp-hero { position: relative; margin: -30px calc(50% - 50vw) 28px; padding: 48px max(32px, calc(50vw - 608px)) 34px; overflow: hidden; border-bottom: 1px solid var(--line); }
.gp-hero .bg { position: absolute; inset: -40px; background: center / cover no-repeat; filter: blur(46px) saturate(1.4) brightness(0.35); transform: scale(1.1); }
.gp-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg), transparent 60%); pointer-events: none; }
.gp-hero .in { position: relative; z-index: 1; display: flex; gap: 30px; align-items: flex-end; }
.gp-hero .cover { width: 420px; aspect-ratio: 16 / 9; border-radius: 8px; background: #0f1220 center / cover no-repeat; flex: none; border: 1px solid var(--line2); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(20, 224, 200, 0.08); }
.gp-hero h1 { font-size: 54px; font-weight: 900; letter-spacing: -0.02em; text-shadow: 2px 0 0 rgba(255, 181, 71, 0.35), -2px 0 0 rgba(20, 224, 200, 0.35); }
.gp-hero .tl { font-size: 17px; color: #c3cad8; margin: 10px 0 18px; max-width: 640px; }
.gp-hero .acts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.gp-hero .acts .muted { font: 12px var(--mono); letter-spacing: 0.04em; }
.gp { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.gp > * { min-width: 0; }
.gallery .main { cursor: zoom-in; transition: box-shadow 0.2s, border-color 0.2s; } .gallery .main:hover { border-color: rgba(20, 224, 200, 0.4); box-shadow: 0 0 30px rgba(20, 224, 200, 0.12); }
.chip.feat { color: var(--amber); border-color: rgba(255, 197, 61, 0.45); }
#more { margin-top: 10px; }
.gallery .main { aspect-ratio: 16 / 9; border-radius: var(--r); background: #0f1220 center / cover no-repeat; border: 1px solid var(--line); }
.gallery .thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.gallery .thumbs button { flex: none; width: 112px; aspect-ratio: 16 / 9; border-radius: 4px; border: 1px solid var(--line); background: center / cover no-repeat; cursor: pointer; opacity: 0.5; transition: 0.15s; }
.gallery .thumbs button.on, .gallery .thumbs button:hover { border-color: var(--cyan); opacity: 1; box-shadow: 0 0 14px rgba(20, 224, 200, 0.25); }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin: 30px 0 18px; }
.tabs button { background: none; border: none; padding: 11px 16px; color: var(--muted); font: 700 11px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s; }
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--cyan); border-color: var(--cyan); text-shadow: 0 0 10px rgba(20, 224, 200, 0.5); }
.side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 86px; }
.side .panel > .muted[style], .side .muted[style*='font-size:12px'] { font-family: var(--mono) !important; letter-spacing: 0.16em; font-size: 10.5px !important; }
.side .kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13px; }
.side .kv dt { color: var(--dim); font: 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; align-self: center; }
.side .kv dd { margin: 0; text-align: right; font-weight: 700; }
.stars { display: flex; gap: 2px; font-size: 22px; }
.stars button { background: none; border: none; cursor: pointer; color: #2a3040; padding: 0 1px; transition: transform 0.1s, color 0.1s, text-shadow 0.1s; }
.stars button.on { color: var(--amber); text-shadow: 0 0 10px rgba(255, 197, 61, 0.6); } .stars button:hover { transform: scale(1.15); }
.creator { display: flex; gap: 12px; align-items: center; transition: border-color 0.15s; }
a.creator:hover { border-color: var(--cyan); }
.avatar { width: 42px; height: 42px; display: grid; place-items: center; font: 800 17px var(--mono); color: var(--cyan); background: rgba(20, 224, 200, 0.08); border: 1px solid rgba(20, 224, 200, 0.5); clip-path: var(--cut-s); flex: none; text-shadow: 0 0 8px var(--cyan); }

/* ------------------------------------------------------------------ markdown */
.md { font-size: 15px; color: #d3d9e6; }
.md h1 { font-size: 26px; margin: 24px 0 10px; } .md h2 { font-size: 20px; margin: 28px 0 10px; padding-top: 10px; border-top: 1px solid var(--line); } .md h3 { font: 700 13px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); margin: 20px 0 8px; }
.md p { margin: 9px 0; } .md ul, .md ol { margin: 9px 0; padding-left: 22px; } .md li { margin: 4px 0; } .md li::marker { color: var(--mag); }
.md code { background: rgba(20, 224, 200, 0.07); color: #a6f5ea; padding: 1px 6px; border-radius: 3px; font: 0.88em var(--mono); }
.md pre { background: #05060a; border: 1px solid var(--line); padding: 14px; border-radius: 4px; overflow-x: auto; } .md pre code { background: none; padding: 0; color: #c9d1df; }
.md table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 13.5px; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--line); padding: 8px 11px; text-align: left; vertical-align: top; }
.md th { background: rgba(20, 224, 200, 0.05); font: 700 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); }
.md tr:hover td { background: rgba(255, 255, 255, 0.015); }
.md blockquote { margin: 12px 0; padding: 10px 16px; border-left: 2px solid var(--mag); background: rgba(255, 181, 71, 0.05); color: #c3cad8; }
.md a { color: var(--cyan); border-bottom: 1px solid rgba(20, 224, 200, 0.35); } .md hr { border: none; border-top: 1px solid var(--line); margin: 20px 0; }
details summary { font: 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }

/* ------------------------------------------------------------------ player overlay */
#player { position: fixed; inset: 0; z-index: 50; background: #000; display: flex; flex-direction: column; animation: fadeIn 0.2s; }
#player .bar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
#player .bar b { font: 700 13px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; } #player .bar .sp { flex: 1; }
#player iframe { flex: 1; border: none; width: 100%; background: #000; }

/* ------------------------------------------------------------------ submit */
.steps { display: flex; gap: 8px; margin: 16px 0 22px; }
.steps span { flex: 1; padding: 11px 14px; border: 1px solid var(--line); border-radius: 4px; font: 700 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.steps span.on { border-color: rgba(20, 224, 200, 0.55); color: var(--cyan); background: rgba(20, 224, 200, 0.05); box-shadow: inset 0 -2px 0 var(--cyan); }
.form { display: flex; flex-direction: column; gap: 18px; }
.drop { border: 1px dashed rgba(20, 224, 200, 0.4); border-radius: var(--r); padding: 26px; text-align: center; background: rgba(20, 224, 200, 0.03); transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; cursor: pointer; }
.drop:hover, .drop.over { background: rgba(20, 224, 200, 0.07); border-color: var(--cyan); box-shadow: inset 0 0 24px rgba(20, 224, 200, 0.12); }
.drop b { display: block; margin-bottom: 4px; font: 700 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
.shots { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.shots div { width: 120px; aspect-ratio: 16 / 9; border-radius: 4px; background: center / cover no-repeat; border: 1px solid var(--line); }
.checks { display: flex; flex-direction: column; gap: 10px; }
.checks label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.checks input { margin-top: 4px; accent-color: var(--cyan); }
.aipick { display: flex; flex-wrap: wrap; gap: 6px; }
.aipick button { padding: 5px 11px; border: 1px solid var(--line); border-radius: 3px; background: none; cursor: pointer; font: 600 11px var(--mono); letter-spacing: 0.06em; color: var(--muted); text-transform: none; transition: 0.15s; }
.aipick button:hover { color: var(--text); border-color: var(--line2); }
.aipick button.on { border-color: var(--cyan); color: var(--cyan); background: rgba(20, 224, 200, 0.08); box-shadow: 0 0 12px rgba(20, 224, 200, 0.15); }
.err { color: var(--red); font: 700 12px var(--mono); min-height: 1.2em; }

/* ------------------------------------------------------------------ review */
.queue { display: flex; flex-direction: column; gap: 10px; }
.qrow { display: grid; grid-template-columns: 150px 1fr auto; gap: 18px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); transition: border-color 0.15s, box-shadow 0.15s; }
.qrow:hover { border-color: rgba(20, 224, 200, 0.45); box-shadow: 0 0 22px rgba(20, 224, 200, 0.08); }
.qrow .cov { aspect-ratio: 16 / 9; border-radius: 4px; background: #0f1220 center / cover no-repeat; }
.autocheck { display: flex; flex-direction: column; gap: 6px; font: 13px var(--mono); }
.autocheck .okk::before { content: '[ OK ] '; color: var(--lime); font-weight: 800; } .autocheck .bad::before { content: '[FAIL] '; color: var(--red); font-weight: 800; }
.tierpick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tierpick button { padding: 12px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg2); cursor: pointer; font: 800 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; transition: 0.15s; }
.tierpick button.on { background: rgba(255, 255, 255, 0.04); border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor, 0 0 18px -4px currentColor; text-shadow: 0 0 10px currentColor; }
.preview { aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #000; }
.preview iframe { width: 100%; height: 100%; border: none; }
.hist { font: 12px var(--mono); color: var(--muted); display: flex; flex-direction: column; gap: 5px; }

/* ------------------------------------------------------------------ auth */
.auth { max-width: 420px; margin: 50px auto; }
.auth::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--grad); box-shadow: 0 0 18px rgba(20, 224, 200, 0.5); }
.auth h1 { font-size: 26px; margin-bottom: 20px; letter-spacing: -0.01em; }
.auth a { color: var(--cyan); }

#toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); padding: 12px 18px; background: var(--bg3); border: 1px solid rgba(20, 224, 200, 0.45); border-radius: 4px; font: 700 12px var(--mono); letter-spacing: 0.06em;
  box-shadow: 0 0 24px rgba(20, 224, 200, 0.2); opacity: 0; pointer-events: none; transition: 0.2s var(--ease); z-index: 60; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
.loading { padding: 70px; text-align: center; color: var(--dim); font: 12px var(--mono); letter-spacing: 0.3em; text-transform: uppercase; }
.loading::after { content: '▍'; margin-left: 6px; color: var(--cyan); animation: blink 1s steps(1) infinite; }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #1c2130; border: 2px solid var(--bg); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: #2a3246; }

@media (max-width: 1000px) {
  header#top { flex-wrap: wrap; height: auto; padding: 10px 18px; gap: 10px; } #search input { width: 180px; } #search input:focus { width: 220px; }
  main { padding: 22px 18px 60px; }
  .gp { grid-template-columns: 1fr; } .side { position: static; }
  .gp-hero { margin: -22px -18px 22px; } .gp-hero .in { flex-direction: column; align-items: flex-start; } .gp-hero .cover { width: 100%; }
  .pitch, .tierstrip { grid-template-columns: 1fr 1fr; } .hero h1 { font-size: 42px; } .hero .in { padding: 28px; }
}

/* ------------------------------------------------------------------ header extras */
body.scrolled header#top { background: rgba(6, 7, 11, 0.9); }
#search kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; }
#search input:focus + kbd { opacity: 0; }
kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 3px; font: 600 10px var(--mono); letter-spacing: 0.06em; color: var(--muted); background: rgba(255, 255, 255, 0.03); }
#menu { display: none; width: 38px; height: 34px; background: none; border: 1px solid var(--line2); cursor: pointer; padding: 8px; flex-direction: column; justify-content: space-between; clip-path: var(--cut-s); }
#menu i { display: block; height: 2px; background: var(--text); transition: 0.2s; }
:focus-visible { outline: 1px solid var(--cyan); outline-offset: 3px; box-shadow: 0 0 0 4px rgba(20, 224, 200, 0.15); }

/* ------------------------------------------------------------------ command palette */
#palette { position: fixed; inset: 0; z-index: 70; background: rgba(3, 4, 7, 0.7); backdrop-filter: blur(6px); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; animation: fadeIn 0.15s; }
.pal { width: min(640px, 92vw); background: var(--bg2); border: 1px solid rgba(20, 224, 200, 0.35); border-radius: 8px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 50px rgba(20, 224, 200, 0.12); overflow: hidden; }
.pal-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.pal-in span { color: var(--cyan); font: 800 18px var(--mono); text-shadow: 0 0 10px var(--cyan); }
.pal-in input { flex: 1; background: none; border: none; outline: none; font: 16px var(--sans); color: var(--text); }
.pal-in input::placeholder { color: var(--dim); }
.pal-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.pal-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 5px; border: 1px solid transparent; }
.pal-row.on { background: rgba(20, 224, 200, 0.07); border-color: rgba(20, 224, 200, 0.35); }
.pal-thumb { width: 64px; aspect-ratio: 16 / 9; border-radius: 3px; background: #0f1220 center / cover no-repeat; flex: none; }
.pal-cmd { width: 64px; text-align: center; color: var(--mag); font: 800 16px var(--mono); flex: none; }
.pal-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pal-t b { font-size: 14px; } .pal-t small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-empty { padding: 24px; text-align: center; color: var(--dim); font: 12px var(--mono); }
.pal-foot { display: flex; gap: 18px; padding: 9px 16px; border-top: 1px solid var(--line); font: 10px var(--mono); color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase; }
.pal-foot kbd { margin-right: 3px; }

/* ------------------------------------------------------------------ lightbox */
#lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(3, 4, 7, 0.92); backdrop-filter: blur(8px); animation: fadeIn 0.15s; cursor: zoom-out; }
#lightbox .lb-img { position: absolute; inset: 5vh 6vw; background: center / contain no-repeat; }
#lightbox button { position: absolute; background: rgba(6, 7, 11, 0.7); border: 1px solid var(--line2); color: var(--text); width: 44px; height: 44px; font-size: 22px; cursor: pointer; clip-path: var(--cut-s); transition: 0.15s; }
#lightbox button:hover { border-color: var(--cyan); color: var(--cyan); }
.lb-x { top: 18px; right: 18px; } .lb-p { left: 18px; top: 50%; } .lb-nx { right: 18px; top: 50%; }
.lb-n { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font: 12px var(--mono); letter-spacing: 0.2em; color: var(--muted); }

/* ------------------------------------------------------------------ game boot screen */
#player { position: fixed; } #player .boot { position: absolute; inset: 49px 0 0; z-index: 2; display: grid; place-items: center; background: radial-gradient(600px 300px at 50% 50%, rgba(20, 224, 200, 0.08), transparent), var(--bg); transition: opacity 0.5s; }
#player .boot.done { opacity: 0; pointer-events: none; }
.boot-in { width: min(420px, 80vw); display: flex; flex-direction: column; gap: 14px; }
.boot-t { font: 900 34px var(--sans); letter-spacing: -0.01em; text-shadow: 2px 0 0 rgba(255, 181, 71, 0.4), -2px 0 0 rgba(20, 224, 200, 0.4); }
.boot-bar { height: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 40%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: bootbar 1.1s var(--ease) infinite; }
@keyframes bootbar { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.boot-s { font: 11px var(--mono); letter-spacing: 0.3em; color: var(--muted); } .boot-s span { color: var(--cyan); animation: blink 1s steps(1) infinite; }

/* ------------------------------------------------------------------ 404 */
.nf { min-height: 50vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.nf-code { font: 900 140px/1 var(--mono); letter-spacing: -0.04em; color: var(--text); text-shadow: 0 0 40px rgba(20, 224, 200, 0.3); }
.nf-code::before, .nf-code::after { animation-duration: 2.2s; }
.nf p { color: var(--muted); font: 13px var(--mono); letter-spacing: 0.1em; margin: 0; }
.nf .acts { display: flex; gap: 12px; margin-top: 8px; }

@media (max-width: 1000px) {
  .stats { grid-template-columns: 1fr 1fr; } .stats > div:nth-child(2) { border-right: none; } .stats .btn { margin: 12px 16px; }
  .hero { height: 520px; }
}
/* 1301–1799px: tighten the one-row header */
@media (min-width: 1301px) and (max-width: 1799px) {
  .online-pill span { display: none; } .online-pill { padding: 0 10px; }
  header#top { gap: 14px; padding: 0 24px; }
  nav a { padding: 8px 8px; letter-spacing: 0.08em; } nav a::after { left: 8px; right: 8px; }
  #search input { width: 130px; } #search input:focus { width: 170px; }
  #account .nm { max-width: 90px; }
  #search kbd { display: none; } #search input { padding-right: 12px; }
}
/* ≤1300px: nav, search, prefs and account move into a hamburger drawer */
@media (max-width: 1300px) {
  #menu { display: flex; margin-left: auto; } header#top { flex-wrap: nowrap; height: 58px; padding: 0 20px; }
  /* hamburger → drawer with search, nav and account */
  #menu { width: 44px; height: 40px; padding: 11px 11px; }
  #menu i { transform-origin: center; }
  body.menu-open #menu { border-color: var(--cyan); box-shadow: inset 0 0 12px rgba(20, 224, 200, 0.2); }
  body.menu-open #menu i { background: var(--cyan); }
  body.menu-open #menu i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.menu-open #menu i:nth-child(2) { opacity: 0; }
  body.menu-open #menu i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  #hdr { display: none; }
  body.menu-open #hdr { display: flex; flex-direction: column; gap: 14px; position: fixed; top: 58px; left: 0; right: 0; z-index: 30; max-height: calc(100vh - 58px); max-height: calc(100dvh - 58px); overflow-y: auto; overscroll-behavior: contain;
    padding: 16px 16px 22px; background: var(--bg); border-bottom: 1px solid var(--line2);
    box-shadow: 0 100vmax 0 100vmax rgba(3, 4, 7, 0.6); animation: menuIn 0.22s var(--ease); }
  @keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } }
  #hdr #search { order: 1; margin: 0; }
  #hdr #search input, #hdr #search input:focus { width: 100%; height: 46px; padding: 10px 14px 10px 36px; font-size: 16px; }
  #hdr #search kbd { display: none; }
  #hdr nav { order: 2; display: flex; flex-direction: column; gap: 0; }
  #hdr nav a { display: flex; align-items: center; min-height: 50px; padding: 0 4px; font-size: 13px; border-bottom: 1px solid var(--line); }
  #hdr nav a::before { content: '//'; margin-right: 10px; color: var(--dim); }
  #hdr nav a.on::before { color: var(--mag); text-shadow: 0 0 8px rgba(255, 181, 71, 0.6); }
  #hdr nav a::after { left: auto; right: 6px; top: 50%; bottom: auto; width: 6px; height: 6px; border-radius: 50%; transform: translateY(-50%) scale(0); }
  #hdr nav a.on::after { transform: translateY(-50%) scale(1); }
  #hdr nav a:hover::after { transform: translateY(-50%) scale(0); } #hdr nav a.on:hover::after { transform: translateY(-50%) scale(1); }
  #hdr #prefs { order: 3; gap: 10px; }
  #hdr .pref-btn { flex: 1; height: 46px; } #hdr .pref-btn .lbl { display: inline; }
  #hdr .lang-seg { flex: 1.4; } #hdr .lang-seg button { flex: 1; height: 44px; font-size: 13px; }
  #hdr #account { order: 4; margin: 0; flex-wrap: wrap; }
  #hdr #account > * { flex: 1; justify-content: center; min-height: 46px; }
  #hdr #logout .ic { display: none; } #hdr #logout .lbl { display: inline; } #hdr #account .nm { max-width: none; }
}
@media (min-width: 801px) and (max-width: 1300px) {
  body.menu-open #hdr { left: auto; width: 440px; border-left: 1px solid var(--line2); }
}
@media (max-width: 800px) {
  #menu { display: flex; margin-left: auto; } header#top { flex-wrap: nowrap; height: 58px; padding: 0 16px; }
  .hero h1 { font-size: 36px; } .hero .in { padding: 22px 22px 60px; } .pitch, .tierstrip, .grid2 { grid-template-columns: 1fr; } .qrow { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.pal-in input:focus-visible { outline: none; box-shadow: none; }

/* ------------------------------------------------------------------ page heads, auth, about flow, footer */
.pagehead { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; }
.pagehead h1 { font-size: 40px; font-weight: 900; letter-spacing: -0.02em; } .pagehead h1 .muted { font-size: 18px; font-weight: 500; }
.pagehead .count { font: 12px var(--mono); letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; } .pagehead .count a { color: var(--cyan); }
.authwrap { display: grid; grid-template-columns: 1fr 420px; gap: 34px; align-items: center; max-width: 980px; margin: 40px auto; }
.authwrap .auth { margin: 0; }
.auth-side { position: relative; padding: 10px 0; }
.auth-side .kicker { font: 700 11px var(--mono); letter-spacing: 0.3em; color: var(--cyan); margin-bottom: 14px; }
.auth-side h2 { font-size: 44px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.02; margin-bottom: 22px; text-shadow: 2px 0 0 rgba(255, 181, 71, 0.3), -2px 0 0 rgba(20, 224, 200, 0.3); }
.auth-side ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; color: var(--muted); }
.auth-side li { padding-left: 22px; position: relative; } .auth-side li::before { content: '›'; position: absolute; left: 0; color: var(--mag); font-weight: 900; }
.auth-side li b { color: var(--text); }
.auth-grid { position: absolute; inset: -30px -20px -30px -40px; z-index: -1; opacity: 0.5; background: radial-gradient(300px 200px at 30% 40%, rgba(20, 224, 200, 0.12), transparent 70%), radial-gradient(260px 200px at 70% 70%, rgba(255, 181, 71, 0.1), transparent 70%); }
.flow { display: flex; align-items: stretch; gap: 8px; margin: 18px 0 22px; flex-wrap: wrap; }
.flow > div { flex: 1; min-width: 120px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); display: flex; flex-direction: column; gap: 3px; position: relative; overflow: hidden; }
.flow > div::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--grad); opacity: 0.7; }
.flow span { font: 700 10px var(--mono); letter-spacing: 0.2em; color: var(--mag); } .flow b { font-size: 15px; color: var(--text); } .flow small { font: 11px var(--mono); color: var(--muted); }
.flow i { align-self: center; font-style: normal; color: var(--cyan); font-weight: 900; }
.foot-links { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
.foot-links a { color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; transition: color 0.15s; } .foot-links a:hover { color: var(--cyan); }
@media (max-width: 800px) { .authwrap { grid-template-columns: 1fr; } .auth-side h2 { font-size: 32px; } .flow i { display: none; } }

/* ------------------------------------------------------------------ comments */
.comments { margin-top: 10px; }
.avatar.sm { width: 32px; height: 32px; font-size: 13px; }
.cm-form { display: flex; gap: 12px; align-items: flex-start; }
.cm-form textarea.in { min-height: 70px; font: 14px/1.5 var(--sans); }
.cm-list { display: flex; flex-direction: column; margin-top: 16px; border-top: 1px solid var(--line); }
.cm { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); animation: fadeIn 0.25s var(--ease); }
.cm-b { flex: 1; min-width: 0; }
.cm-h { display: flex; align-items: center; gap: 10px; font-size: 13px; } .cm-h a:hover b { color: var(--cyan); }
.cm-h .muted { font: 11px var(--mono); letter-spacing: 0.04em; }
.cm-h .chip { padding: 0 6px; font-size: 10px; color: var(--mag); border-color: rgba(255, 181, 71, 0.4); }
.cm-x { margin-left: auto; background: none; border: none; color: var(--dim); cursor: pointer; font-size: 12px; } .cm-x:hover { color: var(--red); }
.cm p { margin: 4px 0 0; color: #cfd6e3; font-size: 14px; overflow-wrap: anywhere; }
.cm-none { padding: 16px 0; font: 12px var(--mono); }

/* ------------------------------------------------------------------ mobile / touch (desktop layout above is untouched) */
.desk-note { display: none; position: relative; z-index: 1; margin-top: 16px; padding: 9px 12px; border: 1px solid rgba(255, 197, 61, 0.35); border-radius: 4px; background: rgba(255, 197, 61, 0.06); color: var(--amber); font: 600 11px/1.5 var(--mono); letter-spacing: 0.06em; }
@media (max-width: 800px) {
  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-tap-highlight-color: rgba(20, 224, 200, 0.12); }
  img, video, iframe, canvas { max-width: 100%; }
  /* player bar fits a phone */
  #player .bar { gap: 8px; padding: 6px 8px; overflow-x: auto; scrollbar-width: none; }
  #player .bar::-webkit-scrollbar { display: none; }
  #player .bar b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  #player .bar .tier { display: none; }
  #player .bar .sp { flex: 1 0 0; }
  #player .bar .btn { flex: none; padding: 10px 12px; min-height: 42px; }
  #player .boot { top: 55px; }
  .desk-note { display: block; }
  .kbd-hint { display: none; }
}
@media (max-width: 600px) {
  header#top { padding: 0 14px; }
  .logo .word { font-size: 14px; letter-spacing: 0.18em; }
  main { padding: 16px 14px 56px; }
  .btn { min-height: 42px; padding: 10px 16px; }
  .btn.big { min-height: 48px; padding: 13px 20px; }
  input.in, select.in { min-height: 46px; font-size: 16px; }
  textarea.in, .cm-form textarea.in { font-size: 16px; }
  .row { flex-direction: column; }
  .panel { padding: 16px; }
  h2.sec { flex-wrap: wrap; row-gap: 4px; margin: 36px 0 14px; font-size: 12px; letter-spacing: 0.18em; }
  h2.sec::after { min-width: 24px; }
  h2.sec small { order: 4; flex-basis: 100%; padding-left: 30px; }
  /* home */
  .hero { height: 500px; border-radius: 8px; }
  .hero .slide::after { background: linear-gradient(0deg, rgba(6, 7, 11, 0.98) 0%, rgba(6, 7, 11, 0.85) 45%, rgba(6, 7, 11, 0.2) 100%); }
  .hero .in { padding: 20px 18px 74px; gap: 12px; }
  .hero h1 { font-size: 38px; }
  .hero p { font-size: 15px; }
  .hero .chips .chip:nth-child(n+4) { display: none; }
  .hero .acts { gap: 10px; } .hero .acts .btn { flex: 1; justify-content: center; }
  .hero-nav { left: 12px; right: 12px; bottom: 14px; justify-content: center; gap: 4px; }
  .hero-nav .hn { width: 40px; height: 40px; font-size: 20px; }
  .hero-nav .hdot { width: 40px; height: 28px; border: 12px solid transparent; border-left-width: 4px; border-right-width: 4px; background-clip: padding-box; box-sizing: border-box; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div { padding: 14px 16px; flex-direction: column; gap: 0; border-bottom: 1px solid var(--line); }
  .stats b { font-size: 24px; } .stats span { font-size: 10px; }
  .stats .btn { grid-column: 1 / -1; margin: 12px; justify-content: center; }
  .cards { grid-template-columns: 1fr; gap: 16px; }
  .panel.cta { padding: 20px 18px; } .panel.cta .btn { width: 100%; justify-content: center; }
  /* browse */
  .pagehead h1 { font-size: 30px; } .pagehead h1 .muted { font-size: 16px; display: block; }
  .filters { gap: 8px; }
  .filters .seg { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .filters .seg::-webkit-scrollbar { display: none; }
  .filters .seg a { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; min-height: 42px; white-space: nowrap; }
  .filters select.in { width: 100%; font-size: 16px; }
  /* game page */
  .gp-hero { margin: -16px -14px 18px; padding: 26px 14px 22px; }
  .gp-hero .cover { display: none; }
  .gp-hero h1 { font-size: 40px; }
  .gp-hero .tl { font-size: 15px; margin: 8px 0 16px; }
  .gp-hero .acts { gap: 10px; }
  .gp-hero .acts .btn.primary { flex: 1 1 100%; justify-content: center; }
  .gp-hero .acts .muted { flex-basis: 100%; }
  .gp { gap: 20px; }
  .gallery .thumbs { scroll-snap-type: x mandatory; scrollbar-width: none; }
  .gallery .thumbs::-webkit-scrollbar { display: none; }
  .gallery .thumbs button { width: 30%; min-width: 96px; scroll-snap-align: start; }
  .tabs { margin: 22px 0 14px; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: none; white-space: nowrap; min-height: 46px; padding: 12px 14px; }
  .stars { font-size: 28px; } .stars button { min-width: 44px; min-height: 44px; }
  .md { font-size: 15px; overflow-wrap: break-word; }
  .md h1 { font-size: 22px; } .md h2 { font-size: 18px; }
  .md table { font-size: 13px; -webkit-overflow-scrolling: touch; }
  .md th, .md td { padding: 7px 9px; }
  .md pre { font-size: 12.5px; }
  .md img { max-width: 100%; height: auto; }
  .cm-form { flex-wrap: wrap; } .cm-form > .avatar { display: none; }
  .cm-form textarea.in { flex: 1 1 100%; } .cm-form .btn { margin-left: auto; }
  .cm-x { min-width: 40px; min-height: 40px; margin-right: -10px; }
  /* submit / review / me */
  .steps { gap: 6px; } .steps span { padding: 9px 8px; font-size: 10px; letter-spacing: 0.08em; text-align: center; }
  .drop { padding: 22px 14px; }
  .shots div { width: calc(50% - 4px); }
  .aipick button { min-height: 40px; padding: 8px 12px; }
  .checks label { padding: 6px 0; }
  .checks input { width: 20px; height: 20px; margin-top: 1px; flex: none; }
  .qrow { gap: 12px; }
  .qrow > div:last-child { flex-wrap: wrap; } .qrow > div:last-child .btn { flex: 1; justify-content: center; }
  main > div[style*='space-between'] { flex-wrap: wrap; gap: 12px; }
  .tierpick button { min-height: 52px; }
  /* auth */
  .authwrap { margin: 12px auto 20px; gap: 22px; } .auth-grid { inset: -20px 0; } .authwrap .auth { order: -1; }
  .auth-side h2 { font-size: 28px; margin-bottom: 14px; }
  .auth .btn { width: 100%; justify-content: center; }
  /* 404 */
  .nf-code { font-size: 104px; }
  /* palette */
  #palette { padding: 10px; align-items: flex-start; }
  .pal { width: 100%; }
  .pal-in kbd, .pal-foot { display: none; }
  .pal-list { max-height: calc(100dvh - 110px); }
  .pal-row { min-height: 52px; }
  .pal-thumb, .pal-cmd { width: 56px; }
  /* lightbox */
  #lightbox .lb-img { inset: 66px 6px 80px; }
  .lb-x { top: 12px; right: 12px; }
  .lb-p, .lb-nx { top: auto !important; bottom: 18px; } .lb-p { left: 14px; } .lb-nx { right: 14px; }
  .lb-n { bottom: 32px; }
  #toast { width: max-content; max-width: calc(100vw - 32px); text-align: center; bottom: calc(18px + env(safe-area-inset-bottom)); }
  footer { padding: 24px 16px calc(28px + env(safe-area-inset-bottom)); }
  .foot-links { gap: 2px 8px; } .foot-links a { padding: 10px 8px; }
}
/* game page: on one column, read first (gallery → docs), then the info panels, then comments */
@media (max-width: 1000px) {
  .gp-game { row-gap: 0; grid-template-columns: minmax(0, 1fr); } .gp-game > div:first-child { display: contents; }
  .gp-game .gallery { order: 1; } .gp-game .tabs { order: 2; margin-bottom: 0; } .gp-game #tab { order: 3; padding-top: 14px; } .gp-game .side { order: 4; margin-top: 28px; } .gp-game .comments { order: 5; margin-top: 28px; }
}
/* touch screens: no hover, so show what hover would reveal */
@media (hover: none) {
  .card .cov .play, .card .cov .dots { opacity: 1; transform: none; }
  .card:hover { transform: none; }
  .kbd-hint, #search kbd { display: none; }
  .desk-note { display: block; }
}

/* ================================================================== LIGHT THEME
   Clean, bright paper with the same neon accents (deepened for contrast on white). Image-heavy areas —
   the home hero, the player and the lightbox — stay dark "screens" so artwork keeps its punch. */
[data-theme='light'] {
  --bg: #f4f6fb; --bg2: #ffffff; --bg3: #eceff6; --line: rgba(20, 32, 64, 0.1); --line2: rgba(20, 32, 64, 0.2);
  --text: #0c1120; --muted: #4f586c; --dim: #7b8397;
  --cyan: #0a8f80; --mag: #b45f06; --violet: #1f6fd1; --lime: #3f7d00; --amber: #9a6300; --red: #d64545;
  --t-trash: #626a7b; color-scheme: light;
}
[data-theme='light'] body::before { background: radial-gradient(900px 520px at 8% -8%, rgba(20, 200, 180, 0.12), transparent 60%), radial-gradient(800px 480px at 100% 0%, rgba(255, 181, 71, 0.08), transparent 60%), radial-gradient(900px 600px at 50% 120%, rgba(58, 168, 255, 0.08), transparent 60%), var(--bg); }
[data-theme='light'] body::after { opacity: 0.8; background-image: linear-gradient(rgba(20, 40, 90, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 40, 90, 0.045) 1px, transparent 1px); }
[data-theme='light'] header#top { background: rgba(255, 255, 255, 0.78); }
[data-theme='light'] body.scrolled header#top { background: rgba(255, 255, 255, 0.92); box-shadow: 0 6px 24px rgba(20, 32, 64, 0.06); }
[data-theme='light'] .logo .mark { text-shadow: none; background: rgba(10, 125, 112, 0.08); box-shadow: inset 0 0 10px rgba(20, 170, 150, 0.22); }
[data-theme='light'] .logo { --logo: #087c6f; --logo-glow: rgba(10, 150, 135, 0.18); }
[data-theme='light'] .logo .word b { text-shadow: 0 0 10px var(--logo-glow); } [data-theme='light'] .logo .word b::before { text-shadow: none; opacity: 0.6; }
[data-theme='light'] nav a.on::after, [data-theme='light'] nav a:hover::after { box-shadow: 0 0 6px rgba(20, 200, 180, 0.6); }
[data-theme='light'] #search input { background: #fff; }
[data-theme='light'] .btn { background: #fff; }
[data-theme='light'] .btn:hover { background: rgba(10, 143, 128, 0.06); }
[data-theme='light'] .btn.primary { background: #14d2bb; border-color: #0fb8a3; color: #00261f; box-shadow: 0 6px 20px rgba(20, 190, 170, 0.35); }
[data-theme='light'] .btn.primary:hover { background: #3ae3cd; color: #00261f; box-shadow: 0 8px 26px rgba(20, 190, 170, 0.5); }
[data-theme='light'] .btn.danger:hover { background: rgba(214, 69, 69, 0.06); } [data-theme='light'] .btn.ok:hover { background: rgba(63, 125, 0, 0.06); }
[data-theme='light'] input.in, [data-theme='light'] textarea.in, [data-theme='light'] select.in { background-color: #fff; }
[data-theme='light'] .panel { background: #fff; box-shadow: 0 1px 2px rgba(20, 32, 64, 0.04); }
[data-theme='light'] .chip { color: #3a4356; background: #fff; }
[data-theme='light'] .chip.ai { color: var(--cyan); background: rgba(20, 200, 180, 0.07); border-color: rgba(10, 143, 128, 0.35); }
[data-theme='light'] .tier { background: rgba(255, 255, 255, 0.9); text-shadow: none; }
[data-theme='light'] .tier.masterpiece { box-shadow: 0 0 14px rgba(255, 180, 40, 0.35); }
[data-theme='light'] .card { box-shadow: 0 1px 3px rgba(20, 32, 64, 0.06); }
[data-theme='light'] .card:hover { box-shadow: 0 16px 40px rgba(20, 32, 64, 0.14), 0 0 26px color-mix(in srgb, var(--tc) 22%, transparent); }
[data-theme='light'] .card .cov::after { background: linear-gradient(180deg, transparent 55%, rgba(6, 7, 11, 0.55)); }
[data-theme='light'] .stats b { text-shadow: none; }
[data-theme='light'] h2.sec::before { text-shadow: none; }
[data-theme='light'] .tierstrip a:hover { box-shadow: 0 10px 28px -8px currentColor; }
[data-theme='light'] .filters .seg { background: #fff; }
[data-theme='light'] .filters .seg a.on { background: rgba(20, 200, 180, 0.1); }
[data-theme='light'] .gp-hero .bg { filter: blur(50px) saturate(1.3) brightness(1.1); opacity: 0.45; }
[data-theme='light'] .gp-hero h1 { text-shadow: 2px 0 0 rgba(255, 181, 71, 0.22), -2px 0 0 rgba(20, 200, 180, 0.3); }
[data-theme='light'] .gp-hero .tl { color: #2c3446; }
[data-theme='light'] .gp-hero .cover { box-shadow: 0 24px 60px rgba(20, 32, 64, 0.25); }
[data-theme='light'] .tabs button.on { text-shadow: none; }
[data-theme='light'] .stars button { color: #ccd2de; } [data-theme='light'] .stars button.on { color: #f0a400; text-shadow: 0 0 8px rgba(255, 180, 40, 0.5); }
[data-theme='light'] .avatar { text-shadow: none; background: rgba(20, 200, 180, 0.08); border-color: rgba(10, 143, 128, 0.5); }
[data-theme='light'] .md { color: #262e40; }
[data-theme='light'] .md code { background: rgba(10, 143, 128, 0.08); color: #006b60; }
[data-theme='light'] .md pre { background: #f0f3f9; } [data-theme='light'] .md pre code { color: #262e40; background: none; }
[data-theme='light'] .md th { background: rgba(20, 200, 180, 0.07); }
[data-theme='light'] .md tr:hover td { background: rgba(20, 32, 64, 0.025); }
[data-theme='light'] .md blockquote { color: #3a4356; background: rgba(180, 95, 6, 0.05); }
[data-theme='light'] .cm p { color: #262e40; }
[data-theme='light'] .auth-side h2 { text-shadow: 2px 0 0 rgba(255, 181, 71, 0.2), -2px 0 0 rgba(20, 200, 180, 0.25); }
[data-theme='light'] .auth::before { box-shadow: 0 0 14px rgba(20, 200, 180, 0.35); }
[data-theme='light'] .nf-code { text-shadow: 0 0 30px rgba(20, 200, 180, 0.25); }
[data-theme='light'] .drop { background: rgba(20, 200, 180, 0.04); border-color: rgba(10, 143, 128, 0.45); }
[data-theme='light'] .steps span.on { background: rgba(20, 200, 180, 0.07); }
[data-theme='light'] .aipick button.on { background: rgba(20, 200, 180, 0.1); }
[data-theme='light'] .tierpick button { background: #fff; } [data-theme='light'] .tierpick button.on { text-shadow: none; }
[data-theme='light'] .qrow { box-shadow: 0 1px 2px rgba(20, 32, 64, 0.04); }
[data-theme='light'] .panel.cta { background: linear-gradient(90deg, rgba(255, 181, 71, 0.06), rgba(20, 200, 180, 0.06)), #fff; }
[data-theme='light'] kbd { background: #fff; }
[data-theme='light'] #toast { background: #fff; box-shadow: 0 10px 30px rgba(20, 32, 64, 0.15), 0 0 20px rgba(20, 200, 180, 0.2); }
[data-theme='light'] #palette { background: rgba(30, 38, 60, 0.35); }
[data-theme='light'] .pal { box-shadow: 0 30px 80px rgba(20, 32, 64, 0.3), 0 0 40px rgba(20, 200, 180, 0.15); }
[data-theme='light'] .pal-in span { text-shadow: none; }
[data-theme='light'] .pal-row.on { background: rgba(20, 200, 180, 0.08); }
[data-theme='light'] .pref-btn, [data-theme='light'] .lang-seg { background: #fff; }
[data-theme='light'] .lang-seg button.on { background: rgba(20, 200, 180, 0.1); }
[data-theme='light'] .desk-note { color: #8a5200; background: rgba(255, 180, 40, 0.1); border-color: rgba(168, 100, 0, 0.35); }
[data-theme='light'] ::-webkit-scrollbar-thumb { background: #c9d0dc; } [data-theme='light'] ::-webkit-scrollbar-thumb:hover { background: #aab3c4; }
@media (max-width: 1300px) {
  [data-theme='light'] body.menu-open #hdr { background: #fff; box-shadow: 0 100vmax 0 100vmax rgba(30, 38, 60, 0.35); }
}
/* dark "screens" inside the light theme: re-declare the dark palette locally */
[data-theme='light'] .hero, [data-theme='light'] #player, [data-theme='light'] #lightbox {
  --bg: #06070b; --bg2: #0b0d14; --bg3: #10131c; --line: rgba(160, 200, 255, 0.09); --line2: rgba(160, 200, 255, 0.18);
  --text: #e8ecf4; --muted: #7d8699; --dim: #4f5668;
  --cyan: #14e0c8; --mag: #ffb547; --violet: #3aa8ff; --lime: #b6ff3b; --amber: #ffc53d; --red: #ff6b6b; --t-trash: #8b93a3;
  color: var(--text); color-scheme: dark;
}
[data-theme='light'] .hero { box-shadow: 0 20px 50px rgba(20, 32, 64, 0.18); }
[data-theme='light'] .hero .btn, [data-theme='light'] #player .btn, [data-theme='light'] #lightbox .btn { background: rgba(255, 255, 255, 0.02); }
[data-theme='light'] .hero .btn.primary, [data-theme='light'] #player .btn.primary { background: var(--cyan); border-color: var(--cyan); color: #00201c; }
[data-theme='light'] .hero .chip { background: rgba(255, 255, 255, 0.02); color: #b9c1d2; }
[data-theme='light'] .hero .chip.ai { color: #a6f5ea; background: rgba(20, 224, 200, 0.05); border-color: rgba(20, 224, 200, 0.3); }
[data-theme='light'] .hero .tier { background: rgba(0, 0, 0, 0.65); text-shadow: 0 0 10px currentColor; }

/* ------------------------------------------------------------------ live presence: header pill, badges, "live now" strip, online drawer */
.dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); animation: livePulse 1.8s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: 0.35; } }
.online-pill { height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid rgba(182, 255, 59, 0.35); border-radius: 16px; background: rgba(182, 255, 59, 0.05);
  color: var(--muted); cursor: pointer; font: 700 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; transition: color 0.15s, border-color 0.15s, box-shadow 0.15s; }
.online-pill b { color: var(--text); font-size: 12px; }
.online-pill:hover, .online-pill[aria-expanded='true'] { color: var(--lime); border-color: var(--lime); box-shadow: inset 0 0 12px rgba(182, 255, 59, 0.14); }
.now-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid rgba(182, 255, 59, 0.4); border-radius: 3px; background: rgba(6, 7, 11, 0.72);
  color: var(--lime); font: 700 10.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.now-badge[hidden] { display: none; }
.now-badge .dot { width: 6px; height: 6px; }
.card .cov .now-badge.on-cov { position: absolute; left: 10px; bottom: 10px; z-index: 1; }
.live-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); font: 12px var(--mono); letter-spacing: 0.04em; }
.live-strip:empty { display: none; }
.lv-k { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: 0.24em; color: var(--lime); }
.lv-g { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); transition: color 0.15s; } .lv-g b { color: var(--text); }
.lv-g:hover, .lv-g:hover b { color: var(--cyan); }
.lv-th { width: 40px; height: 22px; flex: none; border-radius: 3px; border: 1px solid var(--line2); background: #0f1220 center / cover no-repeat; }
.lv-open { margin-left: auto; padding: 6px 12px; font-size: 11px; }
#online-panel { position: fixed; inset: 0; z-index: 60; }
#online-panel .op-back { position: absolute; inset: 0; background: rgba(3, 4, 7, 0.6); animation: fadeIn 0.2s; }
#online-panel .op { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--line2);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5); animation: opIn 0.25s var(--ease); }
@keyframes opIn { from { transform: translateX(24px); opacity: 0; } }
#online-panel .op::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, var(--cyan), transparent 40%, var(--mag)); opacity: 0.7; }
.op-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.op-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font: 800 13px var(--mono); letter-spacing: 0.22em; text-transform: uppercase; }
.op-head h2 b { color: var(--lime); }
.op-x { width: 36px; height: 36px; border: 1px solid var(--line2); background: none; color: var(--muted); cursor: pointer; border-radius: 4px; font-size: 14px; }
.op-x:hover { color: var(--cyan); border-color: var(--cyan); }
.op-sum { padding: 10px 20px 0; } .op-sum:empty { display: none; }
.op-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px 12px; }
.op-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.op-row.you { background: linear-gradient(90deg, rgba(20, 224, 200, 0.07), transparent); }
.op-row.playing .op-flag { box-shadow: inset 0 0 0 1px rgba(182, 255, 59, 0.4); }
.op-flag { width: 30px; height: 30px; display: grid; place-items: center; font-size: 19px; line-height: 1; border-radius: 4px; background: rgba(255, 255, 255, 0.03); }
.op-main { min-width: 0; }
.op-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 700; font-size: 14px; }
.op-name > a, .op-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.op-name a:hover { color: var(--cyan); }
.op-name em { font: 600 11px var(--mono); font-style: normal; color: var(--cyan); }
.ip { cursor: copy; font: 600 10.5px var(--mono); letter-spacing: 0.02em; padding: 1px 6px; border-radius: 3px; color: var(--mag); border: 1px solid rgba(255, 181, 71, 0.35); background: rgba(255, 181, 71, 0.06); }
.op-st { display: flex; flex-wrap: wrap; gap: 2px 6px; margin-top: 2px; font: 11.5px var(--mono); color: var(--muted); }
.op-st .pl { color: var(--lime); } .op-st b { color: var(--text); font-weight: 700; } .op-st .pl b { color: inherit; }
.op-t { color: var(--dim); }
.op-th { width: 64px; aspect-ratio: 16 / 9; border-radius: 4px; border: 1px solid var(--line2); background: #0f1220 center / cover no-repeat; }
.op-th:hover { border-color: var(--cyan); }
.op-more { padding: 12px 8px; font: 12px var(--mono); }
.op-foot { padding: 12px 20px 16px; border-top: 1px solid var(--line); font: 11px/1.5 var(--mono); }
@media (max-width: 1300px) {
  #hdr .online-pill { order: 2; width: 100%; min-height: 46px; justify-content: center; border-radius: 4px; font-size: 13px; }
}
@media (max-width: 600px) {
  #online-panel .op { width: 100vw; border-left: none; }
  .live-strip { gap: 8px 14px; } .lv-open { margin-left: 0; width: 100%; justify-content: center; }
}
[data-theme='light'] .online-pill { background: #fff; border-color: rgba(63, 125, 0, 0.35); }
[data-theme='light'] .online-pill:hover, [data-theme='light'] .online-pill[aria-expanded='true'] { box-shadow: inset 0 0 10px rgba(63, 125, 0, 0.1); }
[data-theme='light'] .dot { box-shadow: 0 0 5px rgba(63, 125, 0, 0.5); }
[data-theme='light'] .now-badge { background: #fff; border-color: rgba(63, 125, 0, 0.4); }
[data-theme='light'] .card .cov .now-badge.on-cov { background: rgba(6, 7, 11, 0.72); color: #b6ff3b; border-color: rgba(182, 255, 59, 0.45); }
[data-theme='light'] .card .cov .now-badge.on-cov .dot { background: #b6ff3b; }
[data-theme='light'] #online-panel .op-back { background: rgba(30, 38, 60, 0.35); }
[data-theme='light'] #online-panel .op { background: #fff; box-shadow: -24px 0 60px rgba(20, 32, 64, 0.18); }
[data-theme='light'] .op-flag { background: var(--bg3); }
[data-theme='light'] .ip { background: rgba(180, 95, 6, 0.06); border-color: rgba(180, 95, 6, 0.35); }
[data-theme='light'] .lv-th, [data-theme='light'] .op-th { background-color: #d3d9e6; }

/* ------------------------------------------------------------------ fullscreen player: no hub chrome at all */
#player .fs-edge, #player .fs-exit, #player .fs-corner { display: none; }
html.is-fs header#top, html.is-fs footer, html.is-fs #online-pill, html.is-fs #online-panel, html.is-fs #palette, html.is-fs #toast, html.is-fs #player .bar { display: none !important; }
html.is-fs #player { inset: 0; width: 100vw; height: 100vh; height: 100dvh; }
html.is-fs #player iframe { width: 100vw; height: 100vh; height: 100dvh; flex: 1; }
html.is-fs #player .boot { inset: 0; }
html.pseudo-fs, html.pseudo-fs body { overflow: hidden; }
html.pseudo-fs main { visibility: hidden; }
/* top-edge hot zone + the exit pill it reveals */
html.is-fs #player .fs-edge { display: block; position: absolute; top: 0; left: 0; right: 0; height: 6px; z-index: 6; }
html.is-fs #player .fs-exit { display: inline-flex; position: absolute; top: 0; left: 50%; z-index: 7; align-items: center; gap: 8px; padding: 12px 18px 9px; transform: translate(-50%, -110%);
  border: 1px solid var(--cyan); border-top: none; border-radius: 0 0 8px 8px; background: rgba(6, 7, 11, 0.9); color: var(--cyan); cursor: pointer;
  font: 700 12px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 0 22px rgba(20, 224, 200, 0.35), inset 0 0 14px rgba(20, 224, 200, 0.12);
  transition: transform 0.22s var(--ease); }
html.is-fs #player .fs-exit.on { transform: translate(-50%, 0); }
html.is-fs #player .fs-exit:not(.on) { box-shadow: none; }
html.is-fs #player .fs-exit:hover { background: rgba(20, 224, 200, 0.14); }
html.is-fs #player .fs-exit span { font-size: 14px; }
@media (pointer: coarse) {
  html.is-fs #player .fs-edge { height: 22px; }
  html.is-fs #player .fs-corner { display: grid; place-items: center; position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); z-index: 7; width: 34px; height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 14px; opacity: 0.45; cursor: pointer; }
}
#fs-hint { position: fixed; top: 18px; left: 50%; z-index: 2147483647; transform: translate(-50%, -12px); padding: 9px 16px; border: 1px solid rgba(20, 224, 200, 0.5); border-radius: 4px;
  background: rgba(6, 7, 11, 0.85); color: #e8ecf4; font: 700 12px var(--mono); letter-spacing: 0.08em; pointer-events: none; opacity: 0; transition: opacity 0.3s, transform 0.3s; }
#fs-hint.on { opacity: 1; transform: translate(-50%, 0); }
.op-flag .ccode { font: 800 10.5px var(--mono); letter-spacing: 0.06em; color: var(--text); }
.op-flag .ccode.unk { font-size: 15px; color: var(--dim); }

/* ------------------------------------------------------------------ background music control */
.music { position: relative; display: flex; align-items: center; }
.mu-play { width: 34px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line2); border-radius: 4px; background: rgba(255, 255, 255, 0.02); color: var(--muted); cursor: pointer; transition: color 0.15s, border-color 0.15s, box-shadow 0.15s; }
.mu-play:hover, .music:focus-within .mu-play { color: var(--cyan); border-color: var(--cyan); box-shadow: inset 0 0 12px rgba(20, 224, 200, 0.15); }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.eq i { display: block; width: 3px; height: 4px; background: currentColor; border-radius: 1px; transform-origin: bottom; transition: height 0.3s; }
.eq i:nth-child(1) { height: 6px; } .eq i:nth-child(2) { height: 11px; } .eq i:nth-child(3) { height: 8px; }
.music.on .mu-play { color: var(--cyan); border-color: rgba(20, 224, 200, 0.5); }
.music.on .eq i { height: 13px; animation: eqb 1.1s ease-in-out infinite; } .music.on .eq i:nth-child(2) { animation-delay: -0.4s; animation-duration: 0.9s; } .music.on .eq i:nth-child(3) { animation-delay: -0.7s; animation-duration: 1.3s; }
.music.held .eq i:nth-child(2) { height: 8px; }
@keyframes eqb { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.mu-pop { position: absolute; top: calc(100% + 8px); right: -40px; z-index: 40; width: 250px; padding: 12px 14px; display: none; flex-direction: column; gap: 10px;
  border: 1px solid var(--line2); border-radius: 6px; background: var(--bg); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(20, 224, 200, 0.08); }
.mu-pop::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } /* hover bridge */
.music:hover .mu-pop, .music:focus-within .mu-pop { display: flex; }
.mu-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mu-k { font: 700 9.5px var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); }
.mu-marq { display: block; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mu-t { display: inline-block; padding: 0 6px; font: 700 12.5px var(--mono); letter-spacing: 0.08em; color: var(--cyan); }
.music.on .mu-t { animation: marq 9s linear infinite; }
@keyframes marq { 0%, 18% { transform: translateX(0); } 82%, 100% { transform: translateX(min(0px, calc(-100% + 210px))); } }
.mu-row { display: flex; align-items: center; gap: 10px; }
.mu-next { width: 32px; height: 28px; flex: none; display: grid; place-items: center; border: 1px solid var(--line2); border-radius: 4px; background: none; color: var(--muted); cursor: pointer; font-size: 12px; }
.mu-next:hover { color: var(--cyan); border-color: var(--cyan); }
.mu-vol { flex: 1; min-width: 0; accent-color: var(--cyan); height: 18px; cursor: pointer; }
.mu-v { width: 26px; text-align: right; font: 11px var(--mono); color: var(--dim); }
@media (max-width: 1300px) {
  #hdr .music { order: 2; width: 100%; gap: 10px; }
  #hdr .mu-play { width: 46px; height: 46px; flex: none; }
  #hdr .mu-pop { position: static; display: flex; flex-direction: column; align-items: stretch; gap: 4px; flex: 1; width: auto; min-width: 0; padding: 0; border: none; background: none; box-shadow: none; }
  #hdr .mu-pop::before { display: none; }
  #hdr .mu-name { flex-direction: row; align-items: baseline; gap: 8px; } #hdr .mu-marq { flex: 1; } #hdr .mu-next { height: 34px; width: 40px; }
  #hdr .music { align-items: stretch; } #hdr .mu-play { height: auto; min-height: 62px; }
  #hdr .mu-t { font-size: 12px; }
}
[data-theme='light'] .mu-play, [data-theme='light'] .mu-next { background: #fff; }
[data-theme='light'] .mu-pop { background: #fff; box-shadow: 0 16px 36px rgba(20, 32, 64, 0.14); }
@media (max-width: 1300px) { [data-theme='light'] #hdr .mu-pop { background: none; box-shadow: none; } }

/* ------------------------------------------------------------------ motion layer (fx.js): cursor glow + ring, tilt, parallax, reveals */
#fx-glow { position: fixed; left: -260px; top: -260px; width: 520px; height: 520px; z-index: 2147482000; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity 0.6s;
  background: radial-gradient(circle, rgba(20, 224, 200, 0.07), rgba(20, 224, 200, 0.02) 40%, transparent 68%); will-change: transform; contain: strict; }
#fx-ring { position: fixed; left: -15px; top: -15px; width: 30px; height: 30px; z-index: 2147483000; pointer-events: none; border-radius: 50%; opacity: 0; contain: layout style;
  border: 1.5px solid rgba(20, 224, 200, 0.7); box-shadow: 0 0 12px rgba(20, 224, 200, 0.35); will-change: transform; transition: opacity 0.2s; }
#fx-ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: inherit; transform: scale(0.35); opacity: 0; transition: transform 0.25s var(--ease), opacity 0.25s; }
html.fx-on #fx-glow { opacity: 1; } html.fx-on #fx-ring { opacity: 1; }
#fx-ring.hot { border-color: var(--mag); box-shadow: 0 0 16px rgba(255, 181, 71, 0.45); }
#fx-ring.hot::after { opacity: 0.6; transform: scale(1.6); }
#fx-ring.gone, html.fx-off #fx-ring, html.fx-off #fx-glow, html.is-fs #fx-ring { opacity: 0 !important; }
.card .sheen { position: absolute; left: 0; top: 0; width: 200%; height: 200%; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.25s;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.13), rgba(20, 224, 200, 0.05) 22%, transparent 42%); }
.card.tilting { transition-property: border-color, box-shadow !important; will-change: transform;
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px color-mix(in srgb, var(--tc) 45%, transparent), 0 0 34px color-mix(in srgb, var(--tc) 22%, transparent); }
.card.tilting .sheen { opacity: 1; }
[data-theme='light'] #fx-glow { background: radial-gradient(circle, rgba(10, 143, 128, 0.06), rgba(10, 143, 128, 0.015) 40%, transparent 68%); }
[data-theme='light'] #fx-ring { border-color: rgba(10, 143, 128, 0.75); box-shadow: 0 0 10px rgba(10, 143, 128, 0.25); }
[data-theme='light'] #fx-ring.hot { border-color: var(--mag); box-shadow: 0 0 12px rgba(180, 95, 6, 0.3); }
[data-theme='light'] .card .sheen { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4), rgba(10, 143, 128, 0.06) 22%, transparent 42%); }
[data-theme='light'] .card.tilting { box-shadow: 0 22px 44px rgba(20, 32, 64, 0.18), 0 0 0 1px color-mix(in srgb, var(--tc) 45%, transparent), 0 0 26px color-mix(in srgb, var(--tc) 18%, transparent); }
/* hero depth: .bgimg / .in are nudged with the CSS `translate` property only while the pointer moves (composes with the Ken Burns transform) */
/* reveals */
.rv { opacity: 0; transform: translateY(18px); } /* 2D on purpose: a 3D transform promotes every pending element to its own GPU layer */
.rv.rv-in { opacity: 1; transform: none; transition: opacity 0.6s var(--ease) var(--rv-d, 0ms), transform 0.6s var(--ease) var(--rv-d, 0ms); }
.cards > .card.rv.rv-in { transition: opacity 0.6s var(--ease) var(--rv-d, 0ms), transform 0.6s var(--ease) var(--rv-d, 0ms), border-color 0.2s, box-shadow 0.2s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } #fx-glow, #fx-ring { display: none; } }
@media (hover: none), (pointer: coarse) { #fx-glow, #fx-ring { display: none; } }
@media (min-width: 1301px) and (max-width: 1460px) {
  header#top { gap: 10px; padding: 0 16px; } #hdr > * { flex-shrink: 0; }
  nav a { padding: 8px 5px; letter-spacing: 0.03em; font-size: 11.5px; } nav a::after { left: 5px; right: 5px; }
  .logo .word { letter-spacing: 0.14em; }
  #search input { width: 104px; } #search input:focus { width: 150px; }
  #account .nm { max-width: 70px; } #prefs { gap: 4px; } .lang-seg button { padding: 0 6px; }
}
html.no-presence #online-pill, html.no-presence #live, html.no-presence .now-badge { display: none !important; }

/* ------------------------------------------------------------------ Mini Games: compact, playful cards (teal / amber) */
.minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.mcard { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg2);
  transition: transform 0.18s var(--ease), border-color 0.18s, box-shadow 0.18s; }
.mcard:hover { transform: translateY(-3px) rotate(-0.6deg); border-color: color-mix(in srgb, var(--mag) 60%, transparent); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45), 0 0 22px rgba(255, 181, 71, 0.18); }
.mcov { position: relative; aspect-ratio: 16 / 10; background: #0f1220 center / cover no-repeat; }
.mcov::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 7, 11, 0.55), transparent 55%); pointer-events: none; }
.mtag { position: absolute; left: 8px; top: 8px; z-index: 1; padding: 2px 9px; border-radius: 999px; font: 800 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: #1a1000; background: var(--mag); box-shadow: 0 0 12px rgba(255, 181, 71, 0.45); }
.mplay { position: absolute; right: 10px; bottom: 10px; z-index: 1; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-size: 12px;
  color: #00201c; background: var(--cyan); box-shadow: 0 0 16px rgba(20, 224, 200, 0.5); transform: scale(0.85); opacity: 0.85; transition: transform 0.18s var(--ease), opacity 0.18s; }
.mcard:hover .mplay { transform: scale(1); opacity: 1; }
.mcov .now-badge.on-cov { position: absolute; left: 8px; bottom: 10px; z-index: 1; }
.mb { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; }
.mb b { font: 800 14px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.mcard:hover .mb b { color: var(--mag); }
.mb small { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mmeta { font: 10.5px var(--mono); color: var(--dim); letter-spacing: 0.04em; }
.chip.mini { border-color: rgba(255, 181, 71, 0.45); color: var(--mag); background: rgba(255, 181, 71, 0.07); }
h2.sec-mini::before { content: '✦'; color: var(--mag); }
.sec-more { order: 4; font: 700 11px var(--mono); letter-spacing: 0.12em; color: var(--cyan); text-transform: uppercase; white-space: nowrap; }
.sec-more:hover { color: var(--mag); }
.mini-h { color: var(--mag); text-shadow: 0 0 16px rgba(255, 181, 71, 0.5); }
.mini-intro { margin: -6px 0 16px; max-width: 640px; }
@media (max-width: 600px) { .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .mb { padding: 8px 10px 10px; } .mb b { font-size: 12.5px; } .mb small { font-size: 11.5px; } }
[data-theme='light'] .mcard { background: #fff; box-shadow: 0 1px 2px rgba(20, 32, 64, 0.05); }
[data-theme='light'] .mcard:hover { box-shadow: 0 12px 26px rgba(20, 32, 64, 0.14), 0 0 18px rgba(180, 95, 6, 0.12); }
[data-theme='light'] .mtag { color: #fff; box-shadow: none; }
[data-theme='light'] .chip.mini { background: rgba(180, 95, 6, 0.06); border-color: rgba(180, 95, 6, 0.35); }
[data-theme='light'] .mplay { color: #fff; }

/* the maker's mark: nearly invisible until you look for it */
#egg { align-self: center; margin-top: 10px; font: 10px var(--mono); letter-spacing: 0.35em; text-transform: none; color: var(--text); opacity: 0.07; cursor: default; user-select: none; transition: opacity 0.6s, text-shadow 0.6s, color 0.6s; }
#egg b { font-weight: 400; color: var(--mag); }
#egg:hover { opacity: 0.9; color: var(--cyan); text-shadow: 0 0 12px var(--cyan); letter-spacing: 0.45em; }
#egg.lit { animation: egg 3.2s ease; }
@keyframes egg { 0% { opacity: 0.07; } 12% { opacity: 1; color: var(--cyan); text-shadow: 0 0 18px var(--cyan), 0 0 40px var(--cyan); transform: scale(1.6); letter-spacing: 0.6em; } 20% { transform: scale(1.5) skewX(-8deg); } 24% { transform: scale(1.55); } 70% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0.07; transform: none; } }
@media (prefers-reduced-motion: reduce) { #egg.lit { animation: none; opacity: 1; } }

/* ------------------------------------------------------------------ first viewport: what this site is (intro + hero), how it works, first-visit line */
.top { display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); gap: 30px; align-items: stretch; }
.intro { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 8px 0; }
.intro-k { font: 700 11px var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--cyan); }
.intro-k::before { content: '▍'; margin-right: 8px; color: var(--mag); }
.intro h1 { font-size: clamp(34px, 3.4vw, 52px); font-weight: 900; line-height: 1.04; letter-spacing: -0.02em; }
.intro h1 em { display: block; font-style: normal; background: linear-gradient(90deg, var(--cyan), var(--mag)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.06em; }
.intro-p { margin: 0; max-width: 560px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.intro .acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.intro-chips { display: flex; flex-wrap: wrap; gap: 6px 0; font: 600 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.intro-chips span { padding-right: 12px; margin-right: 12px; border-right: 1px solid var(--line2); }
.intro-chips span:last-child { border-right: none; }
.intro-chips span[hidden] { display: none; }
.intro-chips .on { color: var(--lime); }
.intro-chips .on::before { content: '●'; margin-right: 6px; font-size: 9px; vertical-align: 1px; }
.top .hero { height: auto; min-height: 440px; }
.top .hero .in { padding: 30px 30px 66px; max-width: none; }
.top .hero h1 { font-size: clamp(36px, 3.6vw, 54px); }
.top .hero p { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.top .hero .chips { display: none; }
.how { margin-top: 18px; padding: 16px 22px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); }
.how-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.how-h h2 { font: 700 12px var(--mono); letter-spacing: 0.22em; text-transform: uppercase; }
.how-h h2::before { content: '//'; margin-right: 10px; color: var(--mag); }
.how-h a { font: 700 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); white-space: nowrap; }
.how-h a:hover { color: var(--mag); }
.how ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.how li { position: relative; display: flex; gap: 12px; align-items: flex-start; }
.how li:not(:last-child)::after { content: '→'; position: absolute; right: -22px; top: 8px; color: var(--dim); font-family: var(--mono); }
.how-i { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--cyan); color: var(--cyan); font-size: 15px; box-shadow: inset 0 0 10px rgba(20, 224, 200, 0.14); }
.how li:nth-child(2) .how-i { border-color: var(--mag); color: var(--mag); box-shadow: inset 0 0 10px rgba(255, 181, 71, 0.14); }
.how b { font-size: 14.5px; }
.how p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
#welcome { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 7px 16px; border-bottom: 1px solid var(--line); font: 12.5px var(--mono); letter-spacing: 0.02em; text-align: center;
  background: linear-gradient(90deg, rgba(20, 224, 200, 0.09), rgba(255, 181, 71, 0.09)); color: var(--text); }
#welcome[hidden] { display: none; }
#welcome b { color: var(--mag); }
#welcome a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.wl-x { flex: none; width: 26px; height: 26px; border: none; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; }
.wl-x:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.op-loc { margin-top: 1px; font: 11px var(--mono); color: var(--dim); }
button.ip { line-height: 1.5; }
button.ip:hover { border-color: var(--mag); }
@media (max-width: 1100px) {
  .top { display: block; }
  .intro { padding: 4px 0 24px; }
  .top .hero { min-height: 0; height: 420px; }
}
@media (max-width: 800px) {
  .intro { gap: 12px; padding-bottom: 20px; }
  .intro h1 { font-size: 32px; }
  .intro-p { font-size: 15px; }
  .intro .acts .btn { flex: 1 1 auto; justify-content: center; }
  .top .hero { height: 400px; }
  .how { padding: 14px 16px 16px; }
  .how ol { grid-template-columns: 1fr; gap: 12px; }
  .how li:not(:last-child)::after { display: none; }
  #welcome { font-size: 11.5px; justify-content: space-between; text-align: left; }
}
[data-theme='light'] .how { background: #fff; }
[data-theme='light'] #welcome { background: linear-gradient(90deg, rgba(10, 143, 128, 0.08), rgba(180, 95, 6, 0.08)); }

/* ------------------------------------------------------------------ browser F11 fullscreen: header slides away, top-edge reveal */
#nav-edge { display: none; }
html.f11:not(.is-fs) #nav-edge { display: block; position: fixed; top: 0; left: 0; right: 0; height: 6px; z-index: 25; }
html.f11:not(.is-fs) header#top { position: fixed; top: 0; left: 0; right: 0; transform: translateY(-105%); transition: transform 0.25s var(--ease); }
html.f11.nav-peek:not(.is-fs) header#top { transform: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
html.f11 #welcome, html.is-fs #welcome { display: none; }

/* ------------------------------------------------------------------ presence: online / recently seen sections */
.sd { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.sd.on { background: #2fe06f; box-shadow: 0 0 6px rgba(47, 224, 111, 0.6); animation: livePulse 2.2s ease-in-out infinite; }
.op-sec { display: flex; align-items: center; gap: 9px; width: 100%; margin: 14px 0 4px; padding: 6px 8px; border: none; background: none; color: var(--muted); text-align: left;
  font: 700 11px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }
.op-list > .op-sec:first-child { margin-top: 2px; }
.op-toggle { cursor: pointer; border-top: 1px solid var(--line); padding-top: 14px; }
.op-toggle:hover { color: var(--text); }
.op-toggle .chev { margin-left: auto; transition: transform 0.2s; }
.op-toggle[aria-expanded='false'] .chev { transform: rotate(-90deg); }
.op-off[hidden] { display: none; }
.op-row.off .op-name > a, .op-row.off .op-name > span { color: var(--muted); }
.op-row.off .op-flag { opacity: 0.75; }
.op-row.off .op-th { opacity: 0.55; filter: grayscale(0.5); }
.op-row.off .op-st b { color: var(--muted); }
.op-moreoff { display: flex; margin: 12px auto 4px; }
.op-empty { padding: 18px; }
[data-theme='light'] .sd.on { background: #1f9d4c; box-shadow: 0 0 4px rgba(31, 157, 76, 0.45); }

/* ------------------------------------------------------------------ play time: profile, game page, drawer, leaderboard, admin */
.pt-bar { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pt-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, var(--cyan), var(--mag)); }
.pt-panel { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
.pt-big { display: flex; flex-direction: column; gap: 4px; }
.pt-big b { font: 800 32px var(--mono); color: var(--cyan); text-shadow: 0 0 16px rgba(20, 224, 200, 0.3); }
.pt-big span { font: 11px var(--mono); letter-spacing: 0.08em; color: var(--muted); }
.pt-list { display: flex; flex-direction: column; gap: 8px; }
.pt-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(80px, 2fr) auto; align-items: center; gap: 12px; padding: 4px; border-radius: 6px; }
.pt-row:hover { background: rgba(255, 255, 255, 0.03); }
.pt-th { width: 56px; aspect-ratio: 16 / 9; border-radius: 4px; border: 1px solid var(--line2); background: #0f1220 center / cover no-repeat; }
.pt-n { font: 700 12.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-row b, .lb-t { font: 700 12.5px var(--mono); white-space: nowrap; text-align: right; }
.pt-k { font: 700 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.pt-com { font: 800 26px var(--mono); color: var(--cyan); margin-top: 4px; }
.pt-top { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; counter-reset: pt; }
.pt-top li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; counter-increment: pt; }
.pt-top li::before { content: counter(pt); width: 16px; font: 700 11px var(--mono); color: var(--dim); }
.pt-top li a { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pt-top li a:hover { color: var(--cyan); }
.pt-top b { font: 700 12px var(--mono); }
.pt-lb { display: inline-block; margin-top: 12px; font: 700 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); }
.avatar.sm { width: 24px; height: 24px; font-size: 11px; border-radius: 7px; flex: none; }
.op-pt { font: 600 10.5px var(--mono); letter-spacing: 0.04em; color: var(--dim); }
.viewtabs { display: inline-flex; gap: 0; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.viewtabs a { padding: 7px 14px; font: 700 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border-right: 1px solid var(--line); }
.viewtabs a:last-child { border-right: none; } .viewtabs a:hover { color: var(--text); }
.viewtabs a.on { color: var(--cyan); background: rgba(20, 224, 200, 0.08); box-shadow: inset 0 -2px 0 var(--cyan); }
.lb { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lb li { display: grid; grid-template-columns: 36px minmax(140px, 1.3fr) minmax(0, 1fr) minmax(80px, 1.4fr) 100px; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); }
.lb-r { font: 800 15px var(--mono); color: var(--dim); text-align: center; }
.lb li.top1 .lb-r { color: var(--amber); text-shadow: 0 0 12px rgba(255, 197, 61, 0.5); } .lb li.top2 .lb-r { color: #c9d1df; } .lb li.top3 .lb-r { color: #d08a4a; }
.lb li.top1 { border-color: rgba(255, 197, 61, 0.35); }
.lb-p { display: flex; align-items: center; gap: 10px; min-width: 0; } .lb-p b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-p:hover b { color: var(--cyan); }
.lb-g { font: 11.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-note { margin-top: 16px; font-size: 12.5px; }
.pt-tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pt-tab th { text-align: left; font: 700 10.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line2); }
.pt-tab td { padding: 8px; border-bottom: 1px solid var(--line); } .pt-tab td a:hover { color: var(--cyan); }
.pt-reset { display: flex; align-items: flex-end; gap: 10px; margin-top: 16px; max-width: 520px; } .pt-reset label { flex: 1; }
@media (max-width: 800px) {
  .pt-panel { grid-template-columns: 1fr; gap: 14px; }
  .pt-row { grid-template-columns: 48px minmax(0, 1fr) auto; row-gap: 6px; } .pt-row .pt-th { grid-row: 1 / 3; } .pt-row b { grid-column: 3; grid-row: 1; } .pt-row .pt-bar { grid-column: 2 / 4; grid-row: 2; }
  .lb li { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px 10px; } .lb-g { display: none; } .lb-r { grid-row: 1 / 3; } .lb li .lb-t { grid-column: 3; grid-row: 1; } .lb li .pt-bar { grid-column: 2 / 4; grid-row: 2; }
  .pt-tab { font-size: 12.5px; } .pt-reset { flex-direction: column; align-items: stretch; }
}
[data-theme='light'] .lb li { background: #fff; }
[data-theme='light'] .pt-row:hover { background: rgba(10, 143, 128, 0.05); }
/* longer Vietnamese / Chinese nav labels: tighten the desktop header a little more */
@media (min-width: 1301px) and (max-width: 1920px) {
  html[lang='vi'] nav a, html[lang='zh-CN'] nav a { padding: 8px 5px; letter-spacing: 0.04em; } html[lang='vi'] nav a::after { left: 5px; right: 5px; }
  html[lang='vi'] header#top { gap: 10px; padding: 0 16px; } html[lang='vi'] #search input { width: 110px; }
}

/* ------------------------------------------------------------------ guest names, admin labels, invite links, first-visit card */
.guest { font: 600 9.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 0 5px; border-radius: 3px; border: 1px dashed var(--line2); color: var(--dim); }
.op-name .dev { font: 10.5px var(--mono); color: var(--dim); font-weight: 400; }
.op-name .lbl { color: var(--mag); }
.op-name .lbl-of { font: 11px var(--mono); color: var(--muted); font-weight: 400; }
.nick-edit, .lbl-edit { border: none; background: none; padding: 0 4px; cursor: pointer; font: 600 11px var(--mono); color: var(--cyan); }
.lbl-edit { color: var(--dim); font-size: 13px; } .lbl-edit:hover, .nick-edit:hover { color: var(--mag); }
details.invite { margin: 4px 12px 10px; border: 1px solid var(--line); border-radius: 6px; }
details.invite summary { cursor: pointer; padding: 10px 12px; font: 700 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
details.invite .inv-in, .invite.open .inv-in { display: flex; flex-direction: column; gap: 10px; padding: 0 12px 12px; }
.invite.open .inv-in { padding: 0; max-width: 640px; }
.inv-hint { margin: 0; font-size: 12.5px; }
.inv-out { display: flex; gap: 8px; } .inv-out .in { flex: 1; min-width: 0; font: 12px var(--mono); }
.inv-name.bad { border-color: var(--red); }
#nick-card { position: fixed; left: 18px; bottom: 18px; z-index: 45; width: min(340px, calc(100vw - 36px)); padding: 16px 16px 14px; border: 1px solid var(--cyan); border-radius: 10px;
  background: var(--bg); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 24px rgba(20, 224, 200, 0.14); animation: opIn 0.3s var(--ease); }
#nick-card b { display: block; font-size: 16px; padding-right: 24px; }
#nick-card p { margin: 4px 0 12px; font-size: 13px; }
#nick-card form { display: flex; flex-direction: column; gap: 10px; }
.nc-acts { display: flex; gap: 8px; } .nc-acts .btn { flex: 1; justify-content: center; }
.nc-x { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border: none; background: none; color: var(--muted); cursor: pointer; border-radius: 4px; }
.nc-x:hover { color: var(--text); }
#nick-card .err:empty { display: none; }
html.is-fs #nick-card { display: none; }
@media (max-width: 600px) { #nick-card { left: 10px; right: 10px; bottom: 10px; width: auto; } }
[data-theme='light'] #nick-card { background: #fff; box-shadow: 0 16px 36px rgba(20, 32, 64, 0.16); }