@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  --bg0: #070b22;
  --bg1: #0e1540;
  --bg2: #1a1f5e;
  --panel: rgba(255, 255, 255, .06);
  --panel2: rgba(255, 255, 255, .1);
  --line: rgba(255, 255, 255, .12);
  --text: #f3f4ff;
  --muted: #a5abd6;
  --gold: #f7c948;
  --gold2: #ffde7a;
  --red: #ff4d5e;
  --green: #2ee59d;
  --blue: #5aa2ff;
  --display: 'Archivo Black', 'Arial Black', 'Trebuchet MS', system-ui, sans-serif;
  --body: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--body);
  color: var(--text);
  background: var(--bg0);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* Hintergrund mit Lichtstimmung */
.bg-stage {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(116, 76, 255, .35), transparent 60%),
    radial-gradient(900px 600px at 110% 20%, rgba(255, 76, 140, .22), transparent 60%),
    radial-gradient(1000px 700px at 50% 120%, rgba(30, 160, 255, .25), transparent 60%),
    linear-gradient(160deg, var(--bg1), var(--bg0) 60%);
}
.bg-stage::before {
  content: ''; position: absolute; inset: -50%;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.5px);
  background-size: 36px 36px;
  animation: drift 60s linear infinite;
  mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 75%);
}
.bg-stage::after {
  content: ''; position: absolute; left: 50%; top: 100%; width: 160vmax; height: 160vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .035) 0 4deg, transparent 4deg 12deg);
  animation: spin 120s linear infinite;
  border-radius: 50%;
}
@keyframes drift { to { transform: translate(36px, 36px); } }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.btn {
  border: 0; border-radius: 16px; padding: 14px 22px; font-weight: 800; font-size: 18px; letter-spacing: .02em;
  color: #1a1300; background: linear-gradient(180deg, var(--gold2), var(--gold));
  box-shadow: 0 6px 0 #b48a1c, 0 12px 30px rgba(247, 201, 72, .3);
  transition: transform .12s, box-shadow .12s, filter .2s;
}
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #b48a1c, 0 6px 16px rgba(247, 201, 72, .25); }
.btn:disabled { filter: grayscale(1) brightness(.6); cursor: not-allowed; }
.btn.ghost { background: var(--panel2); color: var(--text); box-shadow: 0 4px 0 rgba(0, 0, 0, .35); border: 1px solid var(--line); }
.btn.red { background: linear-gradient(180deg, #ff7381, #ff3349); color: #fff; box-shadow: 0 6px 0 #a3172a, 0 12px 30px rgba(255, 51, 73, .3); }
.btn.green { background: linear-gradient(180deg, #6bffc4, #20cf86); color: #03281a; box-shadow: 0 6px 0 #11815a, 0 12px 30px rgba(32, 207, 134, .3); }
.btn.small { padding: 8px 14px; font-size: 14px; border-radius: 12px; }

.seg { display: inline-flex; background: rgba(0, 0, 0, .3); border-radius: 999px; padding: 4px; border: 1px solid var(--line); }
.seg button { border: 0; background: transparent; color: var(--muted); padding: 6px 14px; border-radius: 999px; font-weight: 700; }
.seg button.on { background: var(--gold); color: #1a1300; }

/* Parteilogo */
.plogo { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--pc); color: var(--pt); font-family: var(--display); font-size: 17px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 0 2px rgba(255, 255, 255, .15); flex: none; }
.avatar { display: block; width: 100%; height: 100%; }

/* Themen-Chip */
.tchip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--tc) 22%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 60%, transparent); font-weight: 700; font-size: .85em; white-space: nowrap; }
.tchip.big { font-size: 1.15em; padding: 6px 16px; }
.tchip.active { box-shadow: 0 0 0 2px var(--tc), 0 0 18px var(--tc); background: color-mix(in srgb, var(--tc) 40%, transparent); }

/* Kandidat:innen-Karte */
.ccard {
  --pc: #f7c948;
  width: 210px; border-radius: 18px; padding: 12px; position: relative; overflow: hidden;
  background: linear-gradient(170deg, #fffaf0, #f2e6cf); color: #1d1a2e;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 0 3px var(--pc), inset 0 0 0 6px #fff8;
}
.ccard::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 96px; background: linear-gradient(135deg, var(--pc), color-mix(in srgb, var(--pc) 50%, #000)); }
.ccard-head { position: relative; width: 110px; height: 110px; margin: 6px auto 4px; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); overflow: hidden; background: #fff; }
.ccard-name { position: relative; text-align: center; font-family: var(--display); font-size: 17px; line-height: 1.1; margin: 4px 0 6px; }
.ccard-camp { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; }
.ccard-camp b { font-family: var(--display); font-size: 28px; color: #fff; background: #1d1a2e; border-radius: 12px; padding: 0 12px; line-height: 40px; }
.ccard-camp span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #5b5470; }
.mod { font-family: var(--display); font-size: 15px; padding: 2px 7px; border-radius: 8px; color: #fff; }
.mod.plus { background: #16a36a; } .mod.minus { background: #d72f43; } .mod.scan { background: #7a1020; }
.ccard-skills { display: grid; gap: 4px; }
.sk { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; font-size: 13px; font-weight: 700; background: rgba(29, 26, 46, .07); border-radius: 8px; padding: 3px 6px; }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 11px; height: 11px; border-radius: 50%; background: rgba(29, 26, 46, .15); }
.pips i.on { background: #1d1a2e; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #1d1a2e; }
.ccard.empty { display: grid; place-items: center; min-height: 260px; background: rgba(255, 255, 255, .06); color: var(--muted); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15); }
.ccard.empty::before { display: none; }
.ccard-none { text-align: center; font-weight: 700; font-size: 15px; }
.ccard-none { font-size: 16px; line-height: 1.8; }

/* Wahlversprechen */
.pcard { --tc: #f59e0b; border-radius: 14px; overflow: hidden; background: #fffdf7; color: #1d1a2e; box-shadow: 0 6px 18px rgba(0, 0, 0, .3), inset 0 0 0 2px var(--tc); min-width: 0; }
.pcard-head { background: var(--tc); color: #fff; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding: 6px 10px; }
.pcard-title { padding: 8px 10px 4px; font-weight: 800; font-size: 16px; line-height: 1.15; }
.pcard-vp { padding: 0 10px 8px; color: #c78c00; font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
.pcard-vp span { color: #1d1a2e; font-weight: 800; font-size: 12px; }

/* Opposition */
.ocard { border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #3a0d1e, #1c0712); border: 2px solid #ff4d6d; color: #ffe8ec; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.ocard-head { background: #ff4d6d; color: #fff; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding: 6px 10px; }
.ocard-title { padding: 8px 10px 2px; font-family: var(--display); font-size: 16px; }
.ocard-desc { padding: 2px 10px 10px; font-size: 13px; opacity: .85; }

/* Skandal */
.scard { width: 120px; min-height: 84px; border-radius: 10px; background: #f4f0e6; color: #1b1b1b; padding: 6px 8px; font-size: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); position: relative; }
.scard-head { font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; border-bottom: 2px solid #1b1b1b; margin-bottom: 4px; }
.scard-title { font-weight: 800; line-height: 1.15; font-family: Georgia, 'Times New Roman', serif; }
.scard-eff { position: absolute; right: 6px; bottom: 4px; }
.scard-eff b { background: #d72f43; color: #fff; border-radius: 6px; padding: 1px 6px; font-family: var(--display); font-size: 13px; }
.scard-eff b.res { background: #000; font-size: 10px; }
.scard.revealed { background: #fff3c4; box-shadow: 0 0 0 2px #d72f43, 0 6px 16px rgba(215, 47, 67, .4); }
.scard.secret { opacity: .95; }
.scard.back { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #2a2f6b, #2a2f6b 6px, #222760 6px, #222760 12px); border: 2px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .6); font-family: var(--display); font-size: 26px; }

/* Regierungsamt */
.gchip { --pc: transparent; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px dashed rgba(255, 255, 255, .25); font-weight: 700; white-space: nowrap; }
.gchip.held { border: 1px solid var(--pc); background: color-mix(in srgb, var(--pc) 22%, rgba(0, 0, 0, .25)); }
.gchip .gi { font-size: 1.2em; }
.gchip .gv { color: var(--gold); font-weight: 800; }
.gchip .gh { margin-left: 4px; padding: 2px 8px; border-radius: 8px; background: var(--pc); color: #fff; font-size: .85em; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }

/* Würfel */
.die { --s: 64px; --h: calc(var(--s) / 2); width: var(--s); height: var(--s); perspective: 500px; display: inline-block; }
.die .cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; }
.die .face { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 14%; gap: 4%;
  background: linear-gradient(145deg, #ffffff, #e7e3f5); border-radius: 18%; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .08), inset -4px -5px 10px rgba(0, 0, 0, .12); backface-visibility: hidden; }
.die .face i { border-radius: 50%; }
.die .face i.p { background: radial-gradient(circle at 35% 35%, #50487a, #120e2a); }
.die.idle .cube { animation: wobble 2.4s ease-in-out infinite; }
.die.landed { animation: thump .5s ease-out; }
.die.big { --s: 110px; }
.die.mid { --s: 80px; }
.die.small { --s: 40px; }
@keyframes wobble { 0%, 100% { transform: rotateX(-18deg) rotateY(25deg); } 50% { transform: rotateX(-25deg) rotateY(-30deg) translateY(-6px); } }
@keyframes thump { 0% { transform: scale(1.25); } 60% { transform: scale(.92); } 100% { transform: scale(1); } }

/* Toasts */
#toasts { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 9999; display: grid; gap: 8px; pointer-events: none; width: min(92vw, 520px); }
.toast { background: rgba(20, 22, 60, .95); border: 1px solid var(--line); border-left: 4px solid var(--gold); padding: 12px 16px; border-radius: 12px; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); animation: tin .35s ease-out; }
.toast.err { border-left-color: var(--red); }
.toast.out { opacity: 0; transform: translateY(-10px); transition: .5s; }
@keyframes tin { from { opacity: 0; transform: translateY(-14px) scale(.96); } }

/* Konfetti */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9000; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--dx), 110vh) rotate(var(--rot)); } }

/* Parlament */
.seat { transition: transform .9s cubic-bezier(.3, 1.3, .4, 1), fill .8s, opacity .6s; stroke: rgba(0, 0, 0, .35); stroke-width: 1.5; }
.seat.dark { stroke: rgba(255, 255, 255, .35); }
.seat.gov { stroke: #fff; stroke-width: 2.4; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .55)); }
.seat.dim { opacity: .55; }
.seat.gone { opacity: 0; }
.seat.born { opacity: .2; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .2s !important; }
}