@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;800;900&family=Russo+One&display=swap');

:root {
  --bg: #060a1a;
  --bg2: #0b1230;
  --panel: rgba(12, 20, 48, .88);
  --panel2: #142050;
  --line: rgba(80, 200, 255, .28);
  --neon: #3fd8ff;
  --neon-soft: rgba(63, 216, 255, .45);
  --text: #f1f5ff;
  --muted: #8c9bd0;
  --gold: #ffc531;
  --gold-dark: #b9801a;
  --red: #ff2d55;
  --red-soft: rgba(255, 45, 85, .55);
  --green: #27e08a;
  --pill1: #2457ff;
  --pill2: #2a2fb8;
  --orange: #ff9a1f;
  --radius: 16px;
  --display: "Russo One", "Rubik", system-ui, sans-serif;
  font-family: "Rubik", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--text);
  background:
    radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 12%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 72%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 64%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 40%, #fff4 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 22% 88%, #fff5 50%, transparent 51%),
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(63,216,255,.16), transparent 70%),
    radial-gradient(ellipse 50% 50% at 100% 100%, rgba(140,60,255,.16), transparent 70%),
    radial-gradient(ellipse 50% 50% at 0% 100%, rgba(255,45,85,.10), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
button {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 12px;
  padding: .6em 1.1em; cursor: pointer; transition: transform .08s, box-shadow .15s, border-color .15s, background .15s;
}
button:hover { border-color: var(--neon); box-shadow: 0 0 12px var(--neon-soft); }
button:active { transform: scale(.97); }
button:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
button.primary { background: linear-gradient(180deg, #4de1ff, #179fd6); color: #00141f; border-color: #8beeff; font-weight: 800; }
button.gold { background: linear-gradient(180deg, #ffd65c, #e9a412); color: #2a1900; border-color: #ffe08a; font-weight: 800; }
button.good { background: linear-gradient(180deg, #3cf29e, #12a862); border-color: #6ff7b9; color: #002614; font-weight: 800; }
button.bad { background: linear-gradient(180deg, #ff5577, #d8113b); border-color: #ff8aa1; color: #fff; font-weight: 800; }
button.on { background: var(--neon); border-color: var(--neon); color: #00141f; font-weight: 800; }
button.small { padding: .25em .6em; font-size: .85em; border-radius: 8px; }
input, textarea, select {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: .6em .85em; width: 100%;
}
input:focus, textarea:focus { outline: 2px solid var(--neon); outline-offset: 1px; }
label { color: var(--muted); font-size: .9em; }
h1, h2, h3 { margin: 0 0 .5em; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stack { display: grid; gap: 12px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; backdrop-filter: blur(6px); }

/* ---------- Logo ---------- */
.logo { text-align: center; line-height: .95; font-family: var(--display); user-select: none; }
.logo .l1 {
  display: block; font-size: 1em; letter-spacing: .02em; color: #eaffff;
  text-shadow: 0 0 6px var(--neon), 0 0 18px var(--neon), 0 0 34px rgba(63,216,255,.6);
  -webkit-text-stroke: 1px rgba(63,216,255,.6);
}
.logo .l2 {
  display: inline-flex; align-items: center; gap: .25em; font-size: .9em; color: var(--gold);
  text-shadow: 0 0 6px rgba(255,197,49,.9), 0 0 20px rgba(255,140,0,.6);
}
.logo .l2 .bh { font-size: .8em; filter: drop-shadow(0 0 6px var(--red)); }

.roundtag {
  font-family: var(--display); color: var(--neon); letter-spacing: .06em; text-transform: uppercase;
  text-shadow: 0 0 8px var(--neon-soft); white-space: nowrap;
}
.roundtag .extra { color: var(--orange); text-shadow: 0 0 8px rgba(255,154,31,.6); }

/* ---------- Spieler-Kacheln ---------- */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.tile {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #1b2a66 0%, #0c1436 70%);
  border: 2px solid rgba(63,216,255,.25);
  box-shadow: inset 0 0 30px rgba(0,0,0,.5);
  transition: border-color .25s, box-shadow .25s, transform .25s, filter .4s, opacity .4s;
}
.tile .avatar { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(38px, 5vw, 74px); padding-bottom: 14%; }
.tile .avatar span { filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.tile.active {
  border-color: var(--neon);
  box-shadow: 0 0 0 2px rgba(63,216,255,.4), 0 0 26px var(--neon-soft), inset 0 0 30px rgba(63,216,255,.15);
  transform: translateY(-3px);
}
.tile.loser, .tile.cand-top { border-color: var(--red); box-shadow: 0 0 0 2px rgba(255,45,85,.35), 0 0 26px var(--red-soft); }
.tile.voting { border-color: rgba(39,224,138,.6); box-shadow: 0 0 14px rgba(39,224,138,.25); }
.tile.out { filter: grayscale(1) brightness(.55); }
.tile.out::after {
  content: "RAUS"; position: absolute; inset: 0; display: grid; place-items: center; z-index: 3; pointer-events: none;
  font-family: var(--display); font-size: clamp(22px, 2.6vw, 38px);
  color: var(--red); transform: rotate(-12deg); text-shadow: 0 0 10px rgba(0,0,0,.8); letter-spacing: .08em;
}
/* Kamera-Bild oder 3D-Avatar füllt die Kachel */
.tile .media { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.tile.has-media .avatar { display: none; }
.media .avatar3d { height: 104%; width: auto; max-width: 100%; aspect-ratio: 1; margin-bottom: -2%; }
.media .cam-video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.tile.mine .cam-video { transform: scaleX(-1); } /* eigenes Bild gespiegelt wie ein Spiegel */
.tile.has-cam .namepill, .tile.has-cam .hearts-pill, .tile.has-cam .coin, .tile.has-cam .dots { box-shadow: 0 2px 10px rgba(0,0,0,.7); }
.tile .namepill, .tile .hearts-pill, .tile .coin, .tile .dots, .tile .votes-badge, .tile .voted-check, .tile .joker-tag { z-index: 2; }

.av-img { width: 1.7em; height: 1.7em; border-radius: 50%; vertical-align: middle; background: #18245a; object-fit: cover; border: 1px solid rgba(255,255,255,.15); }
.voter .av .av-img, .who .av .av-img { width: 100%; height: 100%; border: 0; }
.tile.offline .avatar { opacity: .5; }

.namepill {
  position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%); max-width: 88%;
  padding: .3em .9em; border-radius: 999px; font-family: var(--display); font-size: clamp(11px, .95vw, 15px);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(180deg, var(--pill1), var(--pill2)); border: 1.5px solid rgba(160,190,255,.7);
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.tile.loser .namepill, .tile.out .namepill { background: linear-gradient(180deg, #ff3b62, #b10f33); border-color: #ff9fb3; }

.hearts-pill {
  position: absolute; right: 8px; bottom: 9px; display: flex; gap: 1px; padding: 3px 6px;
  border-radius: 9px; background: rgba(5,8,22,.85); border: 1px solid rgba(255,255,255,.12); font-size: clamp(11px, 1vw, 16px); line-height: 1;
}
.heart { color: var(--red); text-shadow: 0 0 6px rgba(255,45,85,.7); }
.heart.lost { color: #1b1d2b; text-shadow: none; -webkit-text-stroke: .5px #444a66; }
.heart.pop { animation: heartPop 1.2s ease-out; }
@keyframes heartPop { 0% { transform: scale(1); color: var(--red); } 30% { transform: scale(2.2); color: #fff; } 100% { transform: scale(1); } }

.coin {
  position: absolute; left: 8px; top: 8px; width: clamp(20px, 1.9vw, 28px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--display); font-size: clamp(10px, .9vw, 14px); color: #4a2d00;
  background: radial-gradient(circle at 35% 30%, #fff1a6, var(--gold) 50%, var(--gold-dark));
  border: 2px solid #ffe58c; box-shadow: 0 0 10px rgba(255,197,49,.6);
}
.coin.used { filter: grayscale(1) brightness(.5); box-shadow: none; }
.coin + .coin { left: calc(8px + clamp(20px, 1.9vw, 28px) + 4px); }

.dots { position: absolute; right: 8px; top: 8px; display: grid; gap: 4px; }
.dot { width: 11px; height: 11px; border-radius: 50%; background: #2a3358; border: 1px solid rgba(255,255,255,.18); }
.dot.ok { background: var(--green); box-shadow: 0 0 6px var(--green); }
.dot.no { background: var(--red); box-shadow: 0 0 6px var(--red); }
.dot[data-pid] { position: relative; cursor: pointer; }
.dot[data-pid]::after { content: ""; position: absolute; inset: -6px -8px; } /* größere Tippfläche fürs Handy */
@media (pointer: coarse) { .dot { width: 14px; height: 14px; } .dots { gap: 6px; } }

.answer-pop {
  position: fixed; z-index: 70; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.35;
  background: rgba(10, 16, 40, .97); border: 1.5px solid var(--neon-soft); box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 18px rgba(63,216,255,.2);
}
.answer-pop[hidden] { display: none; }
.answer-pop .ap-head { font-weight: 800; margin-bottom: 6px; }
.answer-pop .ap-head.ok { color: var(--green); }
.answer-pop .ap-head.no { color: #ff7c97; }
.answer-pop .ap-q { font-weight: 700; margin-bottom: 6px; }
.answer-pop .ap-row { margin-top: 2px; }

/* Joker: eigene Münze antippbar, danach Mitspieler-Kachel wählen */
.can-joker .tile.mine .coin:not(.used) { cursor: pointer; animation: coinPulse 1.2s infinite; }
@keyframes coinPulse { 50% { transform: scale(1.18); box-shadow: 0 0 18px rgba(255,197,49,.95); } }
.picking-joker .tile:not(.mine):not(.out) { cursor: pointer; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,197,49,.35), 0 0 18px rgba(255,197,49,.35); }

.votes-badge {
  position: absolute; left: 8px; top: 8px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; font-family: var(--display); font-size: 15px;
  background: var(--red); color: #fff; box-shadow: 0 0 12px var(--red-soft); border: 2px solid #ffb3c2;
}
.votes-badge.zero { background: #3a2030; box-shadow: none; border-color: #6a4256; }
.voted-check {
  position: absolute; left: 8px; bottom: 9px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #00240f;
  background: var(--green); box-shadow: 0 0 10px rgba(39,224,138,.7);
}
.joker-tag {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--display); font-size: 11px; padding: .2em .6em; border-radius: 999px;
  background: var(--gold); color: #3a2400; box-shadow: 0 0 10px rgba(255,197,49,.6);
}
.tile.flash-good { animation: tileGood 1s; }
.tile.flash-bad { animation: tileBad 1s; }
@keyframes tileGood { 30% { box-shadow: 0 0 0 4px var(--green), 0 0 40px var(--green); } }
@keyframes tileBad { 20%,60% { box-shadow: 0 0 0 4px var(--red), 0 0 40px var(--red); transform: translateX(-5px); } 40%,80% { transform: translateX(5px); } }

/* ---------- untere Leiste ---------- */
.bar {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 18px;
  border-radius: var(--radius); background: linear-gradient(180deg, rgba(14,24,60,.95), rgba(8,13,36,.95));
  border: 1.5px solid rgba(63,216,255,.55); box-shadow: 0 0 22px rgba(63,216,255,.22), inset 0 0 24px rgba(63,216,255,.07);
}
.bar .label {
  flex: none; font-family: var(--display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  padding: .45em .8em; border-radius: 999px; color: var(--neon); border: 1px solid var(--neon-soft); background: rgba(63,216,255,.08);
}
.bar .label.red { color: #ff7c97; border-color: var(--red-soft); background: rgba(255,45,85,.1); }
.bar .label.gold { color: var(--gold); border-color: rgba(255,197,49,.5); background: rgba(255,197,49,.08); }
.bar .text { flex: 1; font-weight: 800; font-size: clamp(16px, 1.6vw, 26px); line-height: 1.25; }
.bar .answer { color: var(--green); font-weight: 800; margin-top: 4px; font-size: .85em; }

.clock {
  flex: none; display: flex; align-items: center; gap: 6px; font-family: var(--display); color: var(--gold);
  font-size: clamp(18px, 1.8vw, 28px); text-shadow: 0 0 10px rgba(255,197,49,.6); font-variant-numeric: tabular-nums;
}
.clock small { display: block; font-size: 9px; letter-spacing: .12em; color: #c9a55a; text-shadow: none; }
.clock.low { color: var(--red); text-shadow: 0 0 10px var(--red-soft); animation: blink .5s infinite alternate; }
@keyframes blink { to { opacity: .55; } }

.voters { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; align-items: center; }
.voter { display: grid; justify-items: center; gap: 2px; font-size: 10px; color: var(--muted); opacity: .35; transition: opacity .2s; }
.voter.done { opacity: 1; color: var(--text); }
.voter .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: #18245a; border: 2px solid #2b3a7a; }
.voter.done .av { border-color: var(--green); box-shadow: 0 0 8px rgba(39,224,138,.6); }

.tb-panel { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.tb-cand { flex: 1; min-width: 140px; display: grid; gap: 6px; }
.tb-cand .nm { font-weight: 800; display: flex; justify-content: space-between; }
.tb-track { height: 10px; border-radius: 999px; background: #1a2150; overflow: hidden; }
.tb-track > div { height: 100%; background: linear-gradient(90deg, var(--red), var(--orange)); transition: width .4s; }

.wrong-list { display: grid; gap: 6px; font-size: .9em; }
.wrong-list .w { background: rgba(255,45,85,.08); border: 1px solid rgba(255,45,85,.3); border-radius: 10px; padding: 6px 10px; }
.wrong-list .w b { color: #ff8aa1; }

/* Vollbild-Effekte */
.flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 60; display: grid; place-items: center; font-family: var(--display); font-size: 13vmin; color: #fff; text-align: center; white-space: pre-line; line-height: 1.1; }
.flash.good { background: radial-gradient(circle, rgba(39,224,138,.35), transparent 70%); animation: fade 1.1s; }
.flash.bad { background: radial-gradient(circle, rgba(255,45,85,.4), transparent 70%); animation: fade 1.1s; }
.flash.big { background: radial-gradient(circle, rgba(255,45,85,.55), rgba(6,10,26,.85) 75%); animation: fade 2.8s; font-size: 9vmin; text-shadow: 0 0 30px var(--red); }
.flash.win { background: radial-gradient(circle, rgba(255,197,49,.45), rgba(6,10,26,.85) 75%); animation: fade 4s; font-size: 9vmin; color: var(--gold); text-shadow: 0 0 30px var(--gold); }
.flash.joker { background: radial-gradient(circle, rgba(255,197,49,.35), transparent 70%); animation: fade 1.6s; font-size: 8vmin; color: var(--gold); text-shadow: 0 0 20px rgba(255,140,0,.8); }
@keyframes fade { 0% { opacity: 0; transform: scale(.9); } 12% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }