/* RO3: Abyss theme for the upstream RO3Emu player panel (/panel/*, GPL-3.0, unmodified).
   Only design tokens and a few surfaces are overridden; every page, route and API call is the panel's own. */
:root, :root[data-theme="dark"] {
  --ink: #f2e8d0; --ink-2: #ffe7ae; --muted: #a9b1c6; --faint: #7d86a0;
  --blue: #2ea8ff; --blue-ink: #7fe6ff; --amber: #e3b257; --amber-ink: #ffe7ae;
  --green-ink: #5fe3a1; --green-bg: rgba(95, 227, 161, .12); --red-ink: #ff8c9d; --red-bg: rgba(255, 116, 116, .12);
  --blue-bg: rgba(46, 168, 255, .12); --grey-bg: rgba(242, 232, 208, .07); --amber-bg: rgba(227, 178, 87, .14);
  --surface: rgba(10, 17, 40, .86); --surface-sub: rgba(6, 11, 28, .82); --hover: rgba(46, 168, 255, .09);
  --line: rgba(227, 178, 87, .26); --line-soft: rgba(227, 178, 87, .13); --line-strong: rgba(227, 178, 87, .45);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px rgba(0, 0, 0, .45);
  --ring: 0 0 0 3px rgba(127, 230, 255, .3);
  --on-ink: #1c1100; --on-amber: #1c1100; --danger: #d4405a; --danger-hover: #e0566e; --amber-hover: #f4c966;
  --tint: rgba(242, 232, 208, .05); --tint-2: rgba(242, 232, 208, .09); --line-hover: rgba(227, 178, 87, .6);
  --amber-line: rgba(227, 178, 87, .35); --red-line: rgba(255, 140, 157, .3); --blue-line: rgba(127, 230, 255, .3);
  --glass: rgba(4, 6, 14, .9); --foot-bg: rgba(2, 3, 8, .92); --cloud: transparent;
  --rank-2: #3a3f5c; --rank-3: #4b3828;
  --page-bg: #04060d; --sky-glow: transparent; --sky: none;
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

/* the night plate behind every portal page */
body { background: #04060d; }
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(75% 65% at 50% 40%, rgba(4, 6, 13, .45), rgba(4, 6, 13, .88)),
    linear-gradient(180deg, rgba(4, 6, 13, .5), rgba(4, 6, 13, .15) 30%, rgba(4, 6, 13, .55) 75%, #04060d),
    url("../img/abyss-night-1280.webp") 82% 50% / cover no-repeat; }
.sky, .theme-btn { display: none !important; }

/* header: the site's gold hairline nav */
.top { background: linear-gradient(180deg, rgba(3, 5, 12, .95), rgba(3, 5, 12, .82)); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.top .brand-logo { height: 40px; width: auto; filter: drop-shadow(0 0 8px rgba(46, 168, 255, .5)); }
.top .brand #brand-star { display: none; }
.top .brand span { font-family: var(--display); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.top .link { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #e7dabb; }
.top .link[aria-current="page"], .top .link:hover { color: #fff; background: var(--amber-bg); }

/* type */
.page-head .title, h1.title, .title { font-family: var(--display); letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff3cf 0%, #f3cf7c 42%, #c48a26 72%, #f6dc9a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card-head h2, .card h2, .card-head .t { font-family: var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.crumbs a { color: var(--blue-ink); }

/* surfaces */
.card { backdrop-filter: blur(8px); border-radius: 0; box-shadow: inset 0 0 0 1px rgba(4, 6, 13, .5), 0 18px 40px rgba(0, 0, 0, .4); }
.kpi .num, .kpi b, .kpi strong { color: var(--blue-ink); text-shadow: 0 0 12px rgba(127, 230, 255, .4); }
.btn { border-radius: 0; font-family: var(--display); letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.btn.primary { background: linear-gradient(180deg, #fff1c2 0%, #f4c966 34%, #d39a2c 62%, #a16a14 100%); color: #1c1100; }
.btn.primary:not(:disabled):hover { filter: brightness(1.1); background: linear-gradient(180deg, #fff1c2 0%, #f4c966 34%, #d39a2c 62%, #a16a14 100%); }
.input, input, select, textarea { background: rgba(2, 5, 14, .8); border-color: var(--line); border-radius: 0; color: #fff; }
.chip { border-radius: 2px; }
.foot { border-top-color: var(--line); }
.foot .gpl { display: block; margin-top: 6px; font-size: 12px; color: var(--faint); }
.foot .gpl a { color: var(--blue-ink); }

.prereg-banner { margin-bottom: var(--s5); padding: var(--s4) var(--s5); border-left: 3px solid var(--blue-ink);
  background: linear-gradient(90deg, rgba(46, 168, 255, .12), rgba(10, 17, 40, .88)); }
.prereg-banner h2 { margin-bottom: 6px; }
.prereg-banner p { color: #d3d8e5; }