/* ===== Imposta — Theme (mobil zuerst) =====
   Bewusst dieselbe Farbwelt wie Akajajo: fast schwarz, kräftiges Blau,
   goldene Akzente. Regel wie dort: GOLD ist Akzent (Schriftzug, Highlights,
   der Imposter-Moment) — nie Buttonfläche. Farben laufen über Variablen,
   blaue Schimmer über --accent-rgb, damit nichts fest verdrahtet ist.

   Party-Spiel bei Nacht -> bewusst nur dunkel, kein heller Modus. */
:root{
  --bg:#080a14;
  --surface:#12151f;
  --surface-2:#1a1e2b;
  --border:#2a2f40;
  --text:#f3f5fa;
  --text-dim:#9aa0b4;
  --accent:#1c4fd0;
  --accent-2:#2a5ee0;
  --accent-rgb:47,102,224;
  --accent-text:#8fb0ff;
  --accent-ink:#ffffff;
  --gold:#e8c268;
  --gold-rgb:232,194,104;
  --radius:16px;
  --radius-sm:11px;
  --shadow:0 20px 60px rgba(0,0,0,.6);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Oswald",var(--font);

  --glow:rgba(var(--accent-rgb),.16);
  --inset-hi:rgba(255,255,255,.04);
  --wordmark-a:#f0d488;
  --wordmark-b:#cf9b3a;
  --placeholder:#5c6072;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  background:
    radial-gradient(1100px 560px at 50% -12%, var(--glow), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:var(--font);
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  padding:max(16px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));
}

/* ---------- Screens ---------- */
.screen{display:none;max-width:480px;margin:0 auto}
.screen.active{display:block;animation:page-in .2s ease}
@keyframes page-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.center-stage{
  min-height:calc(100dvh - 60px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:18px;padding:12px 0;
}

/* ---------- Kopf ---------- */
.app-header{text-align:center;margin:14px 0 22px}

.logo{
  font-family:var(--font-display);
  font-weight:700;font-size:2.7rem;line-height:1;letter-spacing:.24em;
  padding-left:.24em; /* optische Mitte bei letter-spacing */
  background:linear-gradient(90deg,var(--wordmark-a),var(--wordmark-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tagline{color:var(--text-dim);font-size:.9rem;margin-top:.45rem;letter-spacing:.02em}

/* ---------- Panels ---------- */
.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem;margin-bottom:.9rem;
  box-shadow:var(--shadow), inset 0 1px 0 var(--inset-hi);
}
.panel h2{
  font-family:var(--font-display);font-weight:600;
  font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text);margin-bottom:.8rem;
}
.hint-text{color:var(--text-dim);font-weight:400;font-size:.78rem;letter-spacing:0;text-transform:none}

/* ---------- Buttons ---------- */
.btn-primary{
  display:block;width:100%;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  color:var(--accent-ink);border:none;border-radius:var(--radius-sm);
  padding:1rem;font-size:.95rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;box-shadow:0 8px 24px rgba(var(--accent-rgb),.35);
  transition:transform .1s, box-shadow .15s, filter .15s;
}
.btn-primary:hover{box-shadow:0 10px 30px rgba(var(--accent-rgb),.48)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{filter:grayscale(.85) brightness(.55);box-shadow:none;cursor:default}

.btn-ghost{
  display:block;width:100%;
  background:transparent;border:1px solid var(--border);color:var(--text-dim);
  border-radius:999px;padding:.7rem;font-size:.85rem;cursor:pointer;transition:.15s;
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-text)}

.btn-small{
  width:44px;height:44px;flex:none;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--accent-text);
  font-size:1.4rem;font-weight:700;cursor:pointer;transition:.15s;
}
.btn-small:hover{border-color:var(--accent)}
.btn-small:active{transform:translateY(1px)}

/* Auflösen-Knopf: scharf gestellt = goldener Rand (Achtung, gleich passiert was) */
.btn-resolve.armed{
  background:linear-gradient(135deg,var(--accent),#12327f);
  box-shadow:0 0 0 2px rgba(var(--gold-rgb),.75), 0 10px 30px rgba(var(--gold-rgb),.25);
}

/* ---------- Spieler ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.7rem}
.chip{
  display:inline-flex;align-items:center;gap:.35rem;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:999px;padding:.4rem .35rem .4rem .8rem;font-size:.9rem;
}
.chip-x{
  background:none;border:none;color:var(--text-dim);
  font-size:1.05rem;line-height:1;cursor:pointer;padding:.1rem .45rem;transition:color .15s;
}
.chip-x:hover{color:var(--text)}

.add-row{display:flex;gap:.5rem}
.add-row input{
  flex:1;padding:.75rem .85rem;
  border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font-size:1rem;outline:none;transition:.15s;
}
.add-row input::placeholder{color:var(--placeholder)}
.add-row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}

/* Zuletzt gespielte Namen — ein Tipp genügt, kein Tippen nötig */
.recent-row{margin-top:.85rem}
.recent-label{
  color:var(--text-dim);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:.45rem;
}
.recent-label .hint-text{letter-spacing:.02em;font-size:.7rem}
.chip-recent{
  cursor:pointer;padding:.4rem .8rem;color:var(--text-dim);
  border-style:dashed;font-size:.88rem;
  transition:.15s;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.chip-recent:hover{border-color:var(--accent);border-style:solid;color:var(--text)}
.chip-recent:active{transform:scale(.96)}

/* ---------- Zähler ---------- */
.counter{display:flex;align-items:center;gap:1.2rem}
.counter-value{
  font-family:var(--font-display);font-size:1.7rem;font-weight:600;
  min-width:2rem;text-align:center;color:var(--gold);
}

/* ---------- Runden-Typen ----------
   Nur noch drei statt neun Kategorien -> jede bekommt eine eigene Zeile mit
   Platz für Beschreibung. Nebeneinander gequetscht sähen sie belanglos aus. */
.cat-grid{display:flex;flex-direction:column;gap:.55rem}
.cat{
  position:relative;display:flex;align-items:center;gap:.75rem;
  padding:.85rem .9rem;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--surface-2);
  color:var(--text-dim);text-align:left;cursor:pointer;
  transition:border-color .15s, color .15s, background .15s, box-shadow .15s;
}
.cat.on{
  border-color:var(--accent);color:var(--text);
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.08));
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35), 0 6px 18px rgba(var(--accent-rgb),.18);
}
.cat-emoji{font-size:1.5rem;flex:none}
.cat-text{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.cat-name{
  font-family:var(--font-display);font-weight:500;
  font-size:1.05rem;letter-spacing:.03em;line-height:1.2;
}
.cat-desc{font-size:.74rem;color:var(--text-dim);line-height:1.3}
.cat.on .cat-name{color:var(--text)}
.badge18{
  position:absolute;top:-7px;right:-5px;
  background:linear-gradient(135deg,var(--wordmark-a),var(--wordmark-b));
  color:#1d1400;font-size:.6rem;font-weight:800;letter-spacing:.04em;
  padding:.18rem .4rem;border-radius:999px;
}

/* ---------- Schalter ---------- */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:.9rem;padding:.5rem 0}
.toggle-label{font-size:.92rem}
.toggle-sub{display:block;color:var(--text-dim);font-size:.76rem;margin-top:.15rem;line-height:1.4}

.toggle{
  width:50px;height:29px;border-radius:999px;flex:none;
  background:var(--surface-2);border:1px solid var(--border);
  position:relative;cursor:pointer;transition:background .2s, border-color .2s;
}
.toggle .knob{
  position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:var(--placeholder);transition:left .2s, background .2s;
}
.toggle.on{
  background:linear-gradient(135deg,var(--accent-2),var(--accent));border-color:transparent;
  box-shadow:0 4px 14px rgba(var(--accent-rgb),.4);
}
.toggle.on .knob{left:24px;background:#fff}
.toggle.locked{opacity:.5;cursor:default}

.lock-note{color:var(--accent-text);font-size:.78rem;margin-top:.4rem;line-height:1.45}
.setup-msg{color:var(--text-dim);text-align:center;font-size:.85rem;min-height:1.4em;margin-bottom:.6rem}

/* ---------- Weitergeben ---------- */
.progress{
  color:var(--text-dim);font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;
}
.pass-lead{font-size:1.05rem;color:var(--text-dim)}
.pass-name{
  font-family:var(--font-display);font-weight:700;
  font-size:2.5rem;line-height:1.1;letter-spacing:.03em;word-break:break-word;
  background:linear-gradient(90deg,var(--wordmark-a),var(--wordmark-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.small-note{color:var(--text-dim);font-size:.78rem;line-height:1.45}

/* ---------- Karte ---------- */
.reveal-for{color:var(--text-dim);font-size:.9rem}
.reveal-for strong{color:var(--text)}

.card{width:min(85vw,320px);height:420px;perspective:1200px;cursor:pointer}
.card-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.4,.1,.2,1);
}
.card.flipped .card-inner{transform:rotateY(180deg)}

.card-face{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:22px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;padding:1.5rem;text-align:center;overflow:hidden;
}

/* Rückseite: blauer Verlauf mit goldenem Schriftzug */
.card-back{
  background:linear-gradient(160deg,#1d2a52,#0e1226);
  border:1px solid var(--border);
  box-shadow:var(--shadow), inset 0 1px 0 var(--inset-hi);
}
/* Blauer Lichtschein hinterm Schriftzug */
.card-back::before{
  content:"";position:absolute;top:-90px;left:50%;transform:translateX(-50%);
  width:300px;height:240px;pointer-events:none;
  background:radial-gradient(circle, rgba(var(--accent-rgb),.5), transparent 70%);
}
.card-back > *{position:relative}
.card-logo{
  font-family:var(--font-display);font-weight:700;
  font-size:1.5rem;letter-spacing:.24em;padding-left:.24em;
  background:linear-gradient(90deg,var(--wordmark-a),var(--wordmark-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.card-tap{color:var(--text-dim);font-size:.85rem;letter-spacing:.02em}

/* Vorderseite: normale Karte (Crew — und der Undercover-Imposter, der es
   nicht weiß; die beiden MÜSSEN identisch aussehen) */
.card-front{
  background:var(--surface);
  border:1px solid var(--border);
  transform:rotateY(180deg);
  box-shadow:var(--shadow), inset 0 1px 0 var(--inset-hi);
}
.card-front::before{
  content:"";position:absolute;top:-90px;left:50%;transform:translateX(-50%);
  width:300px;height:240px;pointer-events:none;
  background:radial-gradient(circle, rgba(var(--accent-rgb),.3), transparent 70%);
}
.card-front > *{position:relative}

/* Imposter-Karte (nur im Splash-Modus): Gold statt Blau — der eine Moment,
   in dem Gold die Bühne bekommt. */
.card.imposter-card .card-front{
  border-color:rgba(var(--gold-rgb),.55);
  box-shadow:var(--shadow), inset 0 1px 0 var(--inset-hi), 0 0 0 1px rgba(var(--gold-rgb),.25);
}
.card.imposter-card .card-front::before{
  background:radial-gradient(circle, rgba(var(--gold-rgb),.3), transparent 70%);
}

.card-label{color:var(--text-dim);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.card-word{
  font-family:var(--font-display);font-weight:600;
  font-size:2.1rem;line-height:1.15;word-break:break-word;letter-spacing:.01em;
}
.card-role{
  font-family:var(--font-display);font-weight:700;
  font-size:1.75rem;line-height:1.25;letter-spacing:.06em;
  background:linear-gradient(90deg,var(--wordmark-a),var(--wordmark-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.card-hint{color:var(--text-dim);font-size:.92rem;line-height:1.55}
.card-hint strong{display:block;margin-top:.3rem;font-size:1.45rem;color:var(--text);font-family:var(--font-display);font-weight:500}

#btn-next-player{max-width:320px}

/* ---------- Runde ---------- */
.round-lead{color:var(--text-dim);font-size:.95rem}
.round-starter{font-family:var(--font-display);font-weight:600;font-size:1.7rem;letter-spacing:.02em}
.round-starter span{
  background:linear-gradient(90deg,var(--wordmark-a),var(--wordmark-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.round-rules{text-align:left;font-size:.87rem;color:var(--text-dim);line-height:1.6;width:100%}
.round-rules p + p{margin-top:.6rem}
.round-rules strong{color:var(--text)}
.btn-resolve,#btn-abort,#btn-again,#btn-home{max-width:320px}

/* ---------- Auflösung ---------- */
.result-imposters{display:flex;flex-direction:column;gap:.3rem}
.imposter-name{
  font-family:var(--font-display);font-weight:700;font-size:1.9rem;letter-spacing:.02em;
  background:linear-gradient(90deg,var(--wordmark-a),var(--wordmark-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.imposter-hint{color:var(--text-dim);font-size:.8rem;margin:-.1rem 0 .5rem}
.result-panel{width:100%;text-align:center}
.result-word{font-family:var(--font-display);font-weight:600;font-size:1.8rem;margin:.35rem 0}
.result-cat{color:var(--text-dim);font-size:.85rem}
.result-hint{color:var(--accent-text);font-size:.85rem;margin-top:.7rem}