/* ============================================================================
   rivok.css — gemeinsame Design-Sprache (Tokens + Basis-Komponenten)
   ----------------------------------------------------------------------------
   Eine Quelle für alle Seiten. Jede Seite linkt <link rel="stylesheet" href="/rivok.css">.
   play.html behält sein Spiel-CSS inline, zieht aber Tokens + Komponenten hier raus.

   THEME-AWARE: body[data-theme="a|b|c"] schaltet die Token-Schicht um.
     A · Command Console  (Default, frei)     — dunkel, Cyan/Amber, Glow-Akzentkante
     B · Feldhandbuch     (Premium)            — helles Taktik-Papier, Olive/Orange, Mono, Stempel
     C · Neon Glass        (Premium)            — Glasmorphismus, Blau/Pink-Neon
   Default ohne Attribut = A. Komponenten sind token-getrieben; B/C haben zusätzlich
   einen kleinen strukturellen Override-Block am Ende (Papier-Härte bzw. Glas-Blur).
   ============================================================================ */


/* ===== Token-Schicht ausgelagert nach rivok-tokens.css (single source). ===== */
/* play.html linkt NUR rivok-tokens.css (Tokens, KEINE Komponenten → keine Klassen-Kollisionen). */
@import url('rivok-tokens.css?v=9');


/* ================================ BASE ===================================== */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  color:var(--text);
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.5;
  background:var(--body-bg);
  background-attachment:var(--body-bg-attach);
  -webkit-font-smoothing:antialiased;
}
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
::selection{ background:var(--accent); color:var(--bg); }

/* Typografie-Helfer */
h1,h2,h3,h4{ margin:0 0 .4em; line-height:1.15; letter-spacing:-.01em; font-weight:700; }
h1{ font-size:clamp(22px,3vw,30px); font-weight:800; }
h2{ font-size:20px; }
h3{ font-size:17px; }
.eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent);
}
/* Sektions-Label mit auslaufender Linie */
.lbl{
  font-size:10.5px; text-transform:uppercase; letter-spacing:1.4px;
  color:var(--text-dim); font-weight:700; margin:30px 0 12px;
  display:flex; align-items:center; gap:10px;
}
.lbl::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--border),transparent); }

/* Layout-Helfer */
.row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.grid{ display:grid; gap:18px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:760px){ .g2,.g3{ grid-template-columns:1fr; } }

/* ================================ CARD ===================================== */
.card{
  position:relative;
  background:var(--card-bg);
  border:var(--card-border-w) solid var(--card-border);
  border-radius:var(--radius);
  padding:16px 16px 16px 18px;
  box-shadow:var(--card-shadow);
  backdrop-filter:var(--card-blur);
  -webkit-backdrop-filter:var(--card-blur);
}
/* linke Akzent-Kante (A/C); B blendet sie über --card-edge-w:0 aus */
.card::before{
  content:""; position:absolute; left:0; top:12px; bottom:12px;
  width:var(--card-edge-w); border-radius:2px;
  background:var(--card-edge); box-shadow:var(--card-edge-glow);
  pointer-events:none;
}
/* gestrichelte Innenkante (nur B sichtbar) */
.card::after{
  content:""; position:absolute; inset:4px;
  border:var(--card-inner); border-radius:calc(var(--radius) - 3px);
  pointer-events:none;
}
.card.warm::before{ background:linear-gradient(180deg,var(--warm),transparent); box-shadow:0 0 10px rgba(240,183,58,.4); }
.card-head{
  font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  color:var(--text-mute); margin:0 0 12px;
}
/* dekorativer Ecken-Tick (A/C) */
.tick{ position:absolute; top:8px; right:8px; width:9px; height:9px;
  border-top:1.5px solid var(--border-hi); border-right:1.5px solid var(--border-hi); opacity:.7; }
/* Klassifizierungs-Stempel (vor allem B) */
.stamp{ position:absolute; top:9px; right:9px; font-size:9px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--danger); border:2px solid var(--danger);
  padding:2px 6px; transform:rotate(7deg); opacity:.78; }

/* =============================== BUTTONS =================================== */
.btn{
  font:inherit; font-weight:600; font-size:13px; cursor:pointer;
  border-radius:var(--btn-radius); padding:9px 15px;
  border:var(--btn-border-w) solid var(--btn-border);
  background:var(--btn-bg); color:var(--text);
  box-shadow:var(--btn-shadow);
  transition:.15s; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  text-decoration:none;
}
.btn:hover{ border-color:var(--border-hi); transform:translateY(-1px); }
.btn:disabled,.btn.is-disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; pointer-events:none; }
.btn.primary{ border:none; color:var(--btn-primary-on); background:var(--btn-primary-bg); box-shadow:var(--btn-primary-shadow); }
.btn.primary:hover{ box-shadow:var(--btn-primary-shadow-hover); }
.btn.warm{ border:none; color:var(--btn-warm-on); background:var(--btn-warm-bg); box-shadow:var(--btn-primary-shadow); }
.btn.danger{ border:var(--btn-border-w) solid var(--btn-danger-border); color:var(--btn-danger-fg); background:var(--btn-danger-bg); box-shadow:none; }
.btn.ghost{ background:transparent; border-color:var(--border); box-shadow:none; }
.btn.block{ width:100%; }
.btn.lg{ padding:13px 22px; font-size:15px; }
.btn.sm{ padding:6px 11px; font-size:12px; }
/* „bald"-Badge in deaktivierten Slot-Buttons */
.soon{ font-size:9px; font-weight:700; letter-spacing:.5px; background:var(--border-hi); color:var(--text-mute);
  padding:1px 5px; border-radius:6px; text-transform:uppercase; }

/* =============================== FELDER ==================================== */
.field{ margin-bottom:12px; position:relative; }
.field > label{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--text-dim); margin-bottom:5px; font-weight:600; }
.inp,select,textarea{
  width:100%; font:inherit; font-size:13.5px; color:var(--text);
  background:var(--input-bg); border:var(--input-border-w) solid var(--input-border);
  border-radius:var(--radius-sm); padding:9px 11px; transition:.15s;
}
.inp:focus,select:focus,textarea:focus{ outline:none; border-color:var(--focus-border); box-shadow:var(--focus-ring); }
.inp::placeholder,textarea::placeholder{ color:var(--text-dim); }
input[type=range]{ width:100%; accent-color:var(--accent); }
/* Native <option>-Popups brauchen einen SOLIDEN Hintergrund — sonst sind sie auf
   transparenten Glas-Selects (Theme C) unlesbar. Gilt global für alle <select>. */
option{ background:var(--menu-bg); color:var(--text); }

/* =============================== PILLS ===================================== */
.pill{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  padding:3px 9px; border-radius:var(--radius-pill);
  background:var(--pill-bg); color:var(--pill-fg); border:1px solid var(--pill-border); }
.pill.amber,.pill.warm{ background:rgba(240,183,58,.12); color:var(--warm); border-color:rgba(240,183,58,.28); }
.pill.green,.pill.good{ background:rgba(124,217,124,.12); color:var(--good); border-color:rgba(124,217,124,.28); }
.pill.red,.pill.danger{ background:rgba(255,93,93,.12); color:var(--danger); border-color:rgba(255,93,93,.28); }
.pill.purple{ background:rgba(163,113,247,.12); color:var(--purple); border-color:rgba(163,113,247,.28); }
.dot{ width:9px; height:9px; border-radius:3px; display:inline-block; }

/* =========================== SPIELERKARTE (NEU) ============================ */
.pcard{ max-width:340px; }
.pc-top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.pc-ava{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  font-weight:800; font-size:19px; color:var(--btn-primary-on);
  background:var(--btn-primary-bg); box-shadow:0 0 0 1px rgba(255,255,255,.1),0 6px 16px rgba(93,217,255,.3); }
.pc-name{ font-size:16px; font-weight:700; line-height:1.1; }
.pc-meta{ display:flex; gap:6px; margin-top:5px; flex-wrap:wrap; }
.pc-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--border); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:13px; }
.pc-stat{ background:var(--input-bg); padding:9px 11px; }
.pc-stat .k{ font-size:10px; text-transform:uppercase; letter-spacing:.7px; color:var(--text-dim); }
.pc-stat .v{ font-size:16px; font-weight:700; margin-top:2px; }
.pc-rel{ font-size:12px; color:var(--text-mute); margin-bottom:13px; display:flex; align-items:center; gap:7px; }
.pc-actions{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pc-actions .btn{ padding:8px 6px; font-size:12px; flex-direction:column; gap:4px; }

/* ============================== KONTAKTBOX ================================= */
.contacts{ max-width:248px; }
.contact{ background:var(--input-bg); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:9px 10px; margin-bottom:8px; cursor:pointer; transition:.15s; }
.contact:hover{ border-color:var(--border-hi); }
.c-top{ display:flex; align-items:center; gap:7px; font-size:12.5px; }
.c-top .nm{ flex:1; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-top .ar{ color:var(--text-dim); font-size:11px; }
.c-bar{ display:flex; height:5px; border-radius:3px; overflow:hidden; margin:7px 0 4px; background:var(--bar-track); }
.c-bar .me{ background:var(--bar-me); }
.c-bar .them{ background:var(--bar-them); }
.c-nums{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--text-dim); }

/* =========================== LOBBY · RAUMKARTE ============================= */
.room{ display:flex; align-items:center; gap:13px; cursor:pointer; }
.room .map{ width:54px; height:40px; border-radius:7px; border:1px solid var(--border-hi);
  background:radial-gradient(circle at 30% 40%,#16324a,#0c1622); flex:none; position:relative; overflow:hidden; }
.room .info{ flex:1; min-width:0; }
.room .rn{ font-weight:700; font-size:14px; }
.room .rs{ font-size:11.5px; color:var(--text-dim); margin-top:2px; }

/* ============================ HUD · BOTTOMBAR ============================== */
.hud{ display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-pill); overflow:hidden;
  background:var(--card-bg); box-shadow:var(--card-shadow); backdrop-filter:var(--card-blur); -webkit-backdrop-filter:var(--card-blur); }
.hud .seg{ padding:8px 16px; display:flex; flex-direction:column; align-items:center; border-right:1px solid var(--border); }
.hud .seg:last-child{ border:none; }
.hud .k{ font-size:9px; text-transform:uppercase; letter-spacing:.8px; color:var(--text-dim); }
.hud .v{ font-size:15px; font-weight:700; margin-top:1px; }

/* =============================== MODAL ===================================== */
.modal-overlay{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(2,3,6,.62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.modal{ position:relative; width:100%; max-width:440px;
  background:var(--card-bg); border:var(--card-border-w) solid var(--card-border); border-radius:var(--radius);
  box-shadow:var(--card-shadow), 0 30px 80px rgba(0,0,0,.5); backdrop-filter:var(--card-blur); -webkit-backdrop-filter:var(--card-blur);
  padding:24px; }
.modal h2{ margin-bottom:6px; }
.modal .modal-sub{ color:var(--text-mute); font-size:13.5px; margin-bottom:18px; }

/* ===================== STRUKTUR-OVERRIDE · THEME B ========================= */
/* Papier-Härte: Mono-Versalien, kein Hover-Lift, Active-Versatz, kein Edge-Glow */
[data-theme="b"] .btn{ text-transform:uppercase; letter-spacing:1px; font-weight:700; }
[data-theme="b"] .btn:hover{ transform:none; }
[data-theme="b"] .btn:active{ transform:translate(2px,2px); box-shadow:none; }
[data-theme="b"] .card-head{ border-left:4px solid var(--warm); padding-left:8px; color:var(--text); }
[data-theme="b"] .pc-name,
[data-theme="b"] .room .rn,
[data-theme="b"] .c-top .nm{ text-transform:uppercase; letter-spacing:.5px; }
[data-theme="b"] .dot{ border-radius:0; border:1px solid var(--text); }
[data-theme="b"] .pc-ava{ border-radius:0; background:var(--accent); color:#f1ecdc; border:2px solid var(--text); box-shadow:none; }
[data-theme="b"] .c-bar{ height:8px; border:1px solid var(--text); border-radius:0; }
[data-theme="b"] .room .map{ border:2px solid var(--text); border-radius:0;
  background:repeating-linear-gradient(45deg,var(--bg-soft) 0 4px,var(--bg) 4px 8px); }

/* ===================== STRUKTUR-OVERRIDE · THEME C ========================= */
/* Glas: Nav/Buttons frosten ebenfalls; runde Avatare; Glow-Dots */
[data-theme="c"] .btn{ backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
[data-theme="c"] .pc-ava{ border-radius:14px; }
[data-theme="c"] .dot{ border-radius:50%; box-shadow:0 0 8px currentColor; }
[data-theme="c"] .pc-stats{ gap:8px; background:transparent; }
[data-theme="c"] .pc-stat{ border:1px solid var(--border); border-radius:var(--radius-sm); }
[data-theme="c"] .room .map{ background:linear-gradient(135deg,#1b2c6e,#3a1450); border-radius:10px; }