:root {
  --night: #0b1f33;
  --night2: #12324a;
  --pine: #1f6b3a;
  --pine-light: #2a8a4b;
  --red: #c0392b;
  --gold: #ffd34d;
  --cream: #fdf6e3;
  --ink: #0b2e1f;
  --card: rgba(255, 255, 255, .96);
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --opt0: #c0392b; --opt1: #2e86c1; --opt2: #d68910; --opt3: #2a8a4b;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--cream);
  background: radial-gradient(ellipse at top, var(--night2), var(--night) 70%) fixed;
  overflow-x: hidden;
}
.snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.confetti-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000; }
.hidden { display: none !important; }
button { font: inherit; cursor: pointer; }

.title-font { font-family: Georgia, "Times New Roman", serif; letter-spacing: .5px; }
.gold { color: var(--gold); }

/* ---------- Spieler ---------- */
.app { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 16px; min-height: 100%; display: flex; flex-direction: column; }
.screen { flex: 1; display: flex; flex-direction: column; gap: 14px; animation: pop .35s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.card { background: var(--card); color: var(--ink); border-radius: 18px; padding: 18px; box-shadow: var(--shadow); }
.card h1, .card h2 { margin: 0 0 8px; }
.hero { text-align: center; padding-top: 12px; }
.hero h1 { font-size: 2rem; margin: 8px 0 4px; color: var(--gold); text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.hero p { margin: 0; opacity: .85; }
.art svg { width: 100%; height: auto; display: block; }
.art { background: linear-gradient(#eaf4fb, #fdfdfd); border-radius: 14px; overflow: hidden; }

input[type=text] {
  width: 100%; font-size: 1.25rem; padding: 14px 16px; border-radius: 12px; border: 2px solid #c9d6cf; outline: none; color: var(--ink);
}
input[type=text]:focus { border-color: var(--pine-light); }
.btn {
  display: block; width: 100%; border: 0; border-radius: 14px; padding: 16px; font-size: 1.2rem; font-weight: 700;
  background: linear-gradient(var(--red), #9e2c21); color: #fff; box-shadow: 0 4px 0 #6e1f17; transition: transform .08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #6e1f17; }
.btn.green { background: linear-gradient(var(--pine-light), var(--pine)); box-shadow: 0 4px 0 #10452a; }
.btn:disabled { opacity: .5; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; }
.chip { background: rgba(255,255,255,.12); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.chip.timer.low { background: var(--red); animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.progress { height: 8px; background: rgba(255,255,255,.15); border-radius: 99px; overflow: hidden; }
.progress > div { height: 100%; background: linear-gradient(90deg, var(--gold), #ffb627); transition: width .4s; }

.qtext { font-size: 1.3rem; font-weight: 700; line-height: 1.3; margin: 0; }
.options { display: grid; gap: 10px; }
.opt {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; border: 0; border-radius: 14px; padding: 14px;
  font-size: 1.05rem; font-weight: 600; color: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.3); transition: transform .08s, opacity .2s;
}
.opt:active { transform: translateY(3px); }
.opt .sym { font-size: 1.4rem; width: 1.6em; text-align: center; flex-shrink: 0; }
.opt0 { background: var(--opt0); } .opt1 { background: var(--opt1); } .opt2 { background: var(--opt2); } .opt3 { background: var(--opt3); }
.opt.dim { opacity: .35; }
.opt.right { outline: 4px solid var(--gold); opacity: 1; }
.opt.picked { outline: 4px solid #fff; }

.verdict { text-align: center; padding: 22px 16px; border-radius: 18px; box-shadow: var(--shadow); }
.verdict.ok { background: linear-gradient(var(--pine-light), var(--pine)); }
.verdict.no { background: linear-gradient(#a93226, #7b241c); }
.verdict .big { font-size: 3.4rem; line-height: 1; }
.verdict h2 { margin: 8px 0 4px; font-size: 1.7rem; }
.points { font-size: 1.4rem; font-weight: 800; color: var(--gold); }
.explain { font-size: 1.05rem; line-height: 1.45; }
.explain b { color: var(--pine); }

.avatar-big { font-size: 4.5rem; text-align: center; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(4deg); } }
.center { text-align: center; }
.muted { opacity: .75; }
.banner { position: fixed; top: 0; left: 0; right: 0; background: var(--red); color: #fff; text-align: center; padding: 6px; z-index: 50; font-weight: 600; }

.rankbig { font-size: 5rem; font-weight: 900; color: var(--gold); text-shadow: 0 4px 20px rgba(255, 211, 77, .5); margin: 0; }

/* Flackernde Flammen */
.flame { animation: flicker 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.flame:nth-of-type(2n) { animation-duration: 1.1s; }
@keyframes flicker { 0%,100% { transform: scale(1, 1); } 30% { transform: scale(.92, 1.08) skewX(2deg); } 60% { transform: scale(1.05, .95) skewX(-2deg); } }