/* noir.css: shared look for every Noir panel (card dashboard + player panel).
   Tokens match the player panel's original palette. */
:root{
  --ink:#08080d;--panel:#12121a;--panel2:#16161f;--inset:#0c0c12;--line:#23232f;--line2:#2e2e3e;
  --txt:#e8e6f0;--dim:#8b8899;--faint:#55525f;
  --gold:#d4af37;--gold-soft:#e8cf7a;--violet:#8b6cd9;--violet-soft:#b39ddb;
  --ok:#6ee7a0;--bad:#fca5a5;--warn:#fde68a;
  --r-common:#9ca3af;--r-rare:#60a5fa;--r-epic:#c084fc;--r-legendary:#facc15;
  --radius:12px;--radius-sm:8px;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --font:'Inter',-apple-system,'Segoe UI',sans-serif;--display:'Marcellus',serif;
  --side-w:232px;
}
html{color-scheme:dark}
body{background:var(--ink);color:var(--txt);font-family:var(--font);
  background-image:radial-gradient(1200px 600px at 70% -10%,rgba(139,108,217,.08),transparent 60%),
                   radial-gradient(900px 500px at -10% 110%,rgba(212,175,55,.05),transparent 60%);
  background-attachment:fixed}
a{color:var(--violet-soft)}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}

/* ── Surfaces ── */
.n-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.n-card h3,.n-h{font-family:var(--display);font-weight:400;letter-spacing:.06em;font-size:1.05rem;margin:0 0 12px}
.n-eyebrow{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.n-muted{color:var(--dim)}
.n-grid{display:grid;gap:14px}
.n-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.n-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.n-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.n-grid.cols-3,.n-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.n-grid.cols-2,.n-grid.cols-3{grid-template-columns:minmax(0,1fr)}}

/* ── KPI tiles ── */
.n-kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.n-kpi .v{font-family:var(--display);font-size:1.7rem;line-height:1.1;color:var(--txt)}
.n-kpi .l{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.n-kpi.gold .v{color:var(--gold-soft)}.n-kpi.violet .v{color:var(--violet-soft)}
.n-kpi.ok .v{color:var(--ok)}.n-kpi.warn .v{color:var(--warn)}

/* ── Buttons ── */
.n-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--line2);background:var(--panel2);color:var(--txt);font:600 .84rem var(--font);
  cursor:pointer;text-decoration:none;transition:border-color .15s,background .15s}
.n-btn:hover{border-color:var(--violet)}
.n-btn.primary{background:var(--violet);border-color:var(--violet);color:#fff}
.n-btn.primary:hover{background:#9b7ee6}
.n-btn.gold{background:transparent;border-color:var(--gold);color:var(--gold-soft)}
.n-btn.sm{padding:5px 10px;font-size:.76rem}
.n-btn:disabled{opacity:.45;cursor:default}

/* ── Chips / badges ── */
.n-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  border:1px solid var(--line2);background:var(--inset);color:var(--dim);font-size:.78rem;cursor:pointer;
  white-space:nowrap;user-select:none}
.n-chip:hover{color:var(--txt)}
.n-chip.on{border-color:var(--violet);color:var(--txt);background:rgba(139,108,217,.14)}
.n-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.68rem;font-weight:700;letter-spacing:.04em}
.n-badge.active,.n-badge.released{background:rgba(110,231,160,.12);color:var(--ok)}
.n-badge.queued{background:rgba(253,230,138,.12);color:var(--warn)}
.n-badge.retired{background:rgba(252,165,165,.12);color:var(--bad)}
.n-badge.event{background:rgba(212,175,55,.14);color:var(--gold-soft)}

/* ── Progress ── */
.n-progress{height:6px;border-radius:99px;background:var(--inset);overflow:hidden;border:1px solid var(--line)}
.n-progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--gold));border-radius:99px}

/* ── Empty state ── */
.n-empty{text-align:center;padding:34px 16px;color:var(--dim)}
.n-empty .glyph{color:var(--gold);font-size:1.2rem;margin-bottom:8px}
.n-empty b{display:block;color:var(--txt);font-weight:600;margin-bottom:4px}

/* ── Forms ── */
.n-field label{display:block;font-size:.74rem;color:var(--dim);margin-bottom:5px}
.n-input,.n-field input,.n-field select,.n-field textarea{width:100%;padding:9px 12px;background:var(--inset);
  border:1px solid var(--line2);border-radius:var(--radius-sm);color:var(--txt);font:.88rem var(--font)}
.n-switch{display:flex;align-items:center;gap:10px;font-size:.86rem;cursor:pointer}
.n-switch input{appearance:none;width:36px;height:20px;border-radius:99px;background:var(--line2);position:relative;
  cursor:pointer;transition:background .15s;flex:none}
.n-switch input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:left .15s}
.n-switch input:checked{background:var(--violet)}
.n-switch input:checked::after{left:18px}

/* ── Framed card tile ── */
.n-tile{position:relative;border-radius:10px;overflow:hidden;background:var(--panel2);border:1px solid var(--line);
  aspect-ratio:1162/1692}
.n-tile img{width:100%;height:100%;object-fit:cover;display:block}
.n-tile .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 8px 7px;font-size:.74rem;
  background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff}
.n-tile .cap b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n-tile .corner{position:absolute;top:6px;right:6px}

/* ── Timeline ── */
.n-steps{display:flex;gap:0;align-items:center;margin:8px 0 2px}
.n-steps .s{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--faint)}
.n-steps .s i{width:9px;height:9px;border-radius:50%;background:var(--line2);flex:none}
.n-steps .s.done{color:var(--dim)}.n-steps .s.done i{background:var(--violet)}
.n-steps .s.now{color:var(--txt)}.n-steps .s.now i{background:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.2)}
.n-steps .s.bad i{background:var(--bad)}
.n-steps .bar{flex:1;height:1px;background:var(--line2);margin:0 8px;min-width:14px}