/* DYNR Arcade: browser-games landing page.
   DYNR background (near-black 40px grid + scattered "DYNR" watermark) with the DYNR Login (v1) look:
   neumorphic surfaces and the spinning violet/cyan/pink ring. Original DYNR code; Sora is OFL. */

@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --base: #08090c;
  --sd: #000;          /* lower-right shadow */
  --sl: #14161f;       /* upper-left highlight */
  --ink: #e6e9f2;
  --muted: #8a90a3;
  --dim: #5b6072;
  --v: #8b5cf6;
  --c: #22d3ee;
  --p: #ec4899;
  --g: #34d399;
}

body { font-family: 'Sora', sans-serif; background: var(--base); color: var(--ink); overflow-x: hidden; min-height: 100vh; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background:
    url("img/dynr-grid.svg"),
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 320px 320px, 40px 40px, 40px 40px;
}
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.neo { background: var(--base); border-radius: 22px; box-shadow: 9px 9px 22px var(--sd), -7px -7px 18px var(--sl); }
.inset { box-shadow: inset 5px 5px 12px var(--sd), inset -4px -4px 10px var(--sl); }
.grad { background: linear-gradient(90deg, var(--v), var(--c), var(--p)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* header */
header { padding: 22px 0; }
nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-radius: 18px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .5px; white-space: nowrap; }
.logo i { width: 30px; height: 30px; border-radius: 9px; background: conic-gradient(var(--v), var(--c), var(--p), var(--v)); display: grid; place-items: center; font-style: normal; font-size: .75rem; color: #fff; }
.links { display: flex; gap: 6px; font-size: .88rem; }
.links a { padding: 8px 14px; border-radius: 12px; color: var(--muted); transition: color .2s; }
.links a:hover { color: var(--ink); }
.links a.has-icon { display: inline-flex; align-items: center; gap: 7px; }
.links a.has-icon svg { width: 17px; height: 17px; flex: none; }
.links a.nav-discord:hover svg { color: #5865f2; filter: drop-shadow(0 0 6px rgba(88,101,242,.6)); }
.links a.on { color: var(--ink); box-shadow: inset 4px 4px 9px var(--sd), inset -3px -3px 8px var(--sl); }
.signin { font-weight: 600; font-size: .85rem; padding: 10px 16px; border-radius: 12px; display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.signin a { display: flex; gap: 8px; align-items: center; }
.signin.in .who { color: var(--ink); max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
.signin.in a { color: var(--muted); font-weight: 500; }
.signin.in a:hover { color: var(--ink); }

/* news ticker (DYNR News Hub) */
.news { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 10px 16px; border-radius: 14px; font-size: .85rem; color: var(--muted); overflow: hidden; }
.news b { color: var(--c); font-size: .72rem; letter-spacing: 2px; white-space: nowrap; }
.news .t { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.news .t > div { display: inline-block; white-space: nowrap; animation: tk 40s linear infinite; }
.news .t > div:hover { animation-play-state: paused; }
.news span { margin-right: 44px; }
.news time { color: var(--dim); margin-right: 8px; }
.news a { color: var(--c); text-decoration: underline; }
@keyframes tk { to { transform: translateX(-50%); } }

/* hero */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 56px 0 64px; }
.pill { display: inline-flex; gap: 8px; align-items: center; font-size: .75rem; letter-spacing: 1.5px; color: var(--muted); padding: 8px 14px; border-radius: 999px; }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--g); box-shadow: 0 0 10px var(--g); }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.08; margin: 20px 0 16px; letter-spacing: -1px; }
.lead { color: var(--muted); font-size: 1.05rem; line-height: 1.6; max-width: 500px; }
.cta { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.btn { font-family: inherit; font-weight: 700; font-size: .92rem; padding: 15px 26px; border-radius: 14px; border: 0; color: var(--ink); cursor: pointer; display: inline-flex; gap: 10px; align-items: center; transition: transform .2s; }
.btn.hero-b { background: linear-gradient(135deg, var(--v), #6d28d9); box-shadow: 8px 8px 20px var(--sd), -6px -6px 16px var(--sl), inset 0 1px 0 rgba(255,255,255,.2); }
.btn:hover { transform: translateY(-2px); }
.stats { display: flex; gap: 18px; margin-top: 38px; flex-wrap: wrap; }
.stats > div { padding: 14px 18px; border-radius: 16px; font-weight: 700; font-size: 1.3rem; min-width: 110px; }
.stats small { display: block; font-size: .7rem; font-weight: 500; color: var(--dim); letter-spacing: 1.2px; margin-top: 2px; }

/* featured game: spinning ring, same as DYNR Login */
.ring { position: relative; border-radius: 28px; padding: 3px; }
.ring::before, .ring::after { content: ''; position: absolute; border-radius: inherit; background: conic-gradient(from var(--a), var(--v), var(--c), var(--p), var(--v)); animation: spin 6s linear infinite; }
.ring::before { inset: 0; }
.ring::after { inset: -10px; border-radius: 36px; filter: blur(28px); opacity: .35; z-index: -1; }
@keyframes spin { to { --a: 360deg; } }
.feat { position: relative; border-radius: 25px; background: var(--base); overflow: hidden; aspect-ratio: 4/3; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; }
.feat .art { position: absolute; inset: 0; display: grid; place-items: center; font-size: 7.5rem; background: radial-gradient(circle at 65% 35%, color-mix(in srgb, var(--k, var(--c)) 22%, transparent), transparent 55%), radial-gradient(circle at 25% 75%, rgba(139,92,246,.22), transparent 60%); }
.feat .art span { animation: fl 4s ease-in-out infinite; filter: drop-shadow(0 12px 30px rgba(34,211,238,.4)); }
.feat .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feat .art:has(img)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,9,12,.9), transparent 60%); }
@keyframes fl { 50% { transform: translateY(-10px); } }
.feat .meta { position: relative; display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.feat h3 { font-size: 1.4rem; font-weight: 800; }
.feat p { color: var(--muted); font-size: .9rem; }
.feat .lbl { position: absolute; top: 22px; left: 24px; font-size: .68rem; letter-spacing: 2px; font-weight: 700; color: var(--c); z-index: 1; }

/* library */
.sec-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
h2 { font-size: 1.6rem; font-weight: 800; }
.tabs { display: flex; gap: 6px; padding: 6px; border-radius: 16px; flex-wrap: wrap; }
.tabs button { font-family: inherit; font-size: .8rem; font-weight: 600; color: var(--muted); background: none; border: 0; padding: 9px 15px; border-radius: 11px; cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--ink); background: var(--base); box-shadow: 5px 5px 12px var(--sd), -4px -4px 10px var(--sl); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px; padding-bottom: 90px; }
.empty { color: var(--muted); }
.card { --k: var(--v); padding: 16px; transition: transform .25s, box-shadow .25s; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-5px); box-shadow: 9px 9px 22px var(--sd), -7px -7px 18px var(--sl), 0 0 0 1px color-mix(in srgb, var(--k) 55%, transparent), 0 18px 40px -18px var(--k); }
.card .art { height: 140px; border-radius: 16px; display: grid; place-items: center; font-size: 3.6rem; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 65%, color-mix(in srgb, var(--k) 28%, transparent), transparent 70%); }
.card .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .badge { position: absolute; top: 10px; right: 10px; z-index: 1; font-size: .62rem; font-weight: 700; letter-spacing: 1.2px; padding: 4px 8px; border-radius: 8px; color: var(--k); background: color-mix(in srgb, var(--base) 70%, var(--k)); }
.card h3 { font-size: 1rem; font-weight: 700; margin: 16px 4px 4px; }
.card p { color: var(--muted); font-size: .84rem; line-height: 1.5; margin: 0 4px 14px; flex: 1; }
.tags { display: flex; gap: 6px; margin: 0 4px 16px; flex-wrap: wrap; }
.tags span { font-size: .7rem; color: var(--muted); padding: 4px 9px; border-radius: 8px; }
.row { display: flex; justify-content: space-between; align-items: center; margin: 0 4px; }
.mode { font-size: .78rem; color: var(--g); font-weight: 600; display: flex; gap: 7px; align-items: center; }
.mode::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.mode.solo { color: var(--dim); }
.mode.solo::before { box-shadow: none; }
.play { font-weight: 700; font-size: .8rem; padding: 9px 16px; border-radius: 11px; color: var(--ink); background: var(--base); box-shadow: 5px 5px 12px var(--sd), -4px -4px 10px var(--sl); display: flex; gap: 6px; align-items: center; }
.play::before { content: '▶'; font-size: .65rem; color: var(--k); }
.play:active { box-shadow: inset 4px 4px 9px var(--sd), inset -3px -3px 8px var(--sl); }
.card.soon .play, .play[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.card .badge.top { color: #fff; background: linear-gradient(90deg, var(--p), var(--v)); }
.card.is-top { box-shadow: 9px 9px 22px var(--sd), -7px -7px 18px var(--sl), 0 0 0 1px color-mix(in srgb, var(--p) 45%, transparent); }
.leader { font-size: .76rem; color: var(--muted); margin: -4px 4px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leader b { color: var(--ink); }
.muted { color: var(--muted); }
.ver { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 6px; border-radius: 50%; font-size: .6rem; font-weight: 800; color: #08090c; background: var(--c); vertical-align: 1px; }
.guest { margin-left: 8px; font-size: .62rem; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); }

/* segmented control (All-time / This week) */
.seg { display: inline-flex; gap: 4px; padding: 5px; border-radius: 14px; }
.seg button { font-family: inherit; font-size: .78rem; font-weight: 600; color: var(--muted); background: none; border: 0; padding: 8px 14px; border-radius: 10px; cursor: pointer; }
.seg button[aria-selected="true"] { color: var(--ink); background: var(--base); box-shadow: 5px 5px 12px var(--sd), -4px -4px 10px var(--sl); }

/* leaderboards */
.boards { padding-bottom: 90px; scroll-margin-top: 20px; }
.board-wrap { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
.board-tabs { flex-direction: column; flex-wrap: nowrap; }
.board-tabs button { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-card { padding: 24px; }
.board-head { margin-bottom: 18px; }
.board-head h3 { font-size: 1.1rem; font-weight: 700; }
.board-head p { font-size: .8rem; margin-top: 4px; }
ol.board { list-style: none; display: flex; flex-direction: column; gap: 8px; }
ol.board li { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 14px; align-items: center; padding: 11px 14px; border-radius: 14px; font-size: .9rem; box-shadow: inset 3px 3px 8px var(--sd), inset -2px -2px 6px var(--sl); }
ol.board li:has(.rm) { grid-template-columns: 34px 1fr auto auto 26px; }
ol.board .rk { font-weight: 800; color: var(--dim); text-align: center; }
ol.board .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
ol.board .sc { font-weight: 800; font-variant-numeric: tabular-nums; }
ol.board .sc small { font-weight: 500; color: var(--muted); font-size: .7rem; }
ol.board .when { color: var(--dim); font-size: .74rem; min-width: 64px; text-align: right; }
ol.board li.p1 .rk { color: #fbbf24; text-shadow: 0 0 12px rgba(251,191,36,.6); }
ol.board li.p2 .rk { color: #cbd5e1; }
ol.board li.p3 .rk { color: #f59e0b; opacity: .8; }
ol.board li.p1 { box-shadow: inset 3px 3px 8px var(--sd), inset -2px -2px 6px var(--sl), 0 0 0 1px rgba(251,191,36,.35); }
ol.board .rm { background: none; border: 0; color: var(--dim); cursor: pointer; font-size: .8rem; border-radius: 8px; padding: 4px; }
ol.board .rm:hover { color: var(--p); }

/* play page */
body.playing { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.playbar { display: flex; align-items: center; gap: 12px; margin: 12px 12px 0; padding: 10px 14px; border-radius: 16px; position: relative; z-index: 3; }
.playbar .back { white-space: nowrap; font-weight: 700; color: var(--muted); padding: 6px 10px; border-radius: 10px; }
.playbar .back:hover { color: var(--ink); }
.playbar .title { display: flex; gap: 10px; align-items: center; font-size: 1rem; min-width: 0; }
.playbar .title b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playbar .spacer { flex: 1; }
.playbar .signin { padding: 8px 12px; box-shadow: none; }
.tool { font-family: inherit; font-weight: 600; font-size: .82rem; color: var(--ink); background: var(--base); border: 0; padding: 8px 12px; border-radius: 11px; cursor: pointer; box-shadow: 4px 4px 10px var(--sd), -3px -3px 8px var(--sl); display: inline-flex; gap: 6px; align-items: center; }
.tool:active { box-shadow: inset 3px 3px 8px var(--sd), inset -2px -2px 6px var(--sl); }
.stage { position: relative; flex: 1; margin: 12px; min-height: 0; }
.stage iframe { width: 100%; height: 100%; border: 0; border-radius: 18px; background: #000; display: block; box-shadow: 0 0 0 1px color-mix(in srgb, var(--k, var(--v)) 35%, transparent), 0 20px 60px -30px var(--k, var(--v)); }
.stage-msg { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 10px; color: var(--muted); }
.stage-msg .glyph { font-size: 5rem; }
.stage-msg h2 { color: var(--ink); }
.stage-msg a, .hint a { color: var(--c); }
.drawer { position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(360px, calc(100% - 24px)); padding: 18px; border-radius: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; z-index: 2; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.drawer-head h3 { font-size: 1rem; }
.drawer .seg { align-self: flex-start; }
.drawer ol.board li { grid-template-columns: 26px 1fr auto; gap: 10px; padding: 9px 12px; font-size: .84rem; }
.drawer ol.board li:has(.rm) { grid-template-columns: 26px 1fr auto 22px; }
.drawer ol.board .when { display: none; }
.me-line { font-size: .84rem; color: var(--muted); padding: 10px 14px; border-radius: 12px; box-shadow: inset 3px 3px 8px var(--sd), inset -2px -2px 6px var(--sl); }
.me-line b { color: var(--ink); }

/* score dialog */
.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(4,5,8,.7); backdrop-filter: blur(6px); }
.dialog { width: min(420px, 100%); padding: 30px 28px; border-radius: 24px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.dialog .lbl { font-size: .7rem; letter-spacing: 2px; font-weight: 700; color: var(--c); }
.dialog .big { font-size: 3.4rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dialog label { display: block; font-size: .78rem; color: var(--muted); text-align: left; margin: 8px 0 8px 4px; }
.field { width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink); background: var(--base); border: 0; border-radius: 12px; padding: 13px 15px; outline: none; }
.field:focus { box-shadow: inset 4px 4px 10px var(--sd), inset -3px -3px 8px var(--sl), 0 0 0 2px color-mix(in srgb, var(--c) 50%, transparent); }
.hint { font-size: .78rem; color: var(--dim); margin-top: 10px; }
.err { color: #fb7185; font-size: .85rem; }
.actions { display: flex; gap: 12px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.actions .btn { padding: 12px 22px; }
.btn:disabled { opacity: .6; cursor: default; transform: none; }
footer { text-align: center; color: var(--dim); font-size: .8rem; padding: 0 0 36px; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 36px; }
  .links { display: none; }
  .board-wrap { grid-template-columns: 1fr; }
  .board-tabs { flex-direction: row; flex-wrap: wrap; }
  .tool span, .back span { display: none; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .grid { grid-template-columns: 1fr; }
  .signin a span, .tool span, .back span { display: none; }
  .signin.in .who { display: none; }
  nav { padding: 12px 14px; }
  .board-card { padding: 16px; }
  ol.board li { grid-template-columns: 26px 1fr auto; gap: 10px; }
  ol.board li:has(.rm) { grid-template-columns: 26px 1fr auto 22px; }
  ol.board .when { display: none; }
  .playbar { gap: 8px; margin: 8px 8px 0; }
  .stage { margin: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }