/* ════════════════════════════════════════════════════════════
   OnlineQuiz — Design-System (farbenblindfreundlich)
   Palette: Blau #0077bb · Orange #ee7733 · Cyan #33bbee · Grau
   ════════════════════════════════════════════════════════════ */

/* ─── Reset & Grundlage ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Hintergrund */
  --bg-0: #0d1117;
  --bg-1: #161b22;
  --bg-2: #21262d;
  --bg-3: #2d333b;

  /* Markenfarben */
  --blue:   #0077bb;
  --blue-l: #58b4f0;
  --orange: #ee7733;
  --ora-l:  #ffa657;
  --cyan:   #33bbee;
  --cyan-l: #79d8ff;
  --gray:   #8b949e;
  --gray-l: #c9d1d9;

  /* Semantik */
  --correct: #28a745;
  --wrong:   #cc3333;
  --timeout: #555;

  /* Text */
  --text:    #f0f6fc;
  --text-2:  #8b949e;
  --text-3:  #484f58;

  /* Ränder & Schatten */
  --radius:    12px;
  --radius-lg: 20px;
  --shadow:    0 4px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 8px 48px rgba(0,0,0,.65);

  /* Typografie */
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --trans: .2s ease;
}

html, body {
  height: 100%;
  font-family: var(--font);
  background: var(--bg-0);
  color: var(--text);
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* ─── Canvas-Overlays ──────────────────────────────────────── */
#particles-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
}

/* ─── Bildschirm-System ────────────────────────────────────── */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
}

.screen.active {
  opacity: 1;
  pointer-events: all;
  transform: none;
  z-index: 10;
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════
   WELCOME-SCREEN
   ════════════════════════════════════════════════════════════ */
#screen-welcome {
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 60% 30%, #0d2a40 0%, var(--bg-0) 70%);
}

.welcome-inner {
  width: min(480px, 92vw);
  text-align: center;
  animation: fadeUp .6s ease both;
}

.welcome-logo {
  font-size: clamp(2.4rem, 8vw, 4rem);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: .25rem;
}

.welcome-logo span { color: var(--orange); }

.welcome-sub {
  color: var(--text-2);
  margin-bottom: 2.5rem;
  font-size: 1.05rem;
}

.welcome-greeting {
  font-size: 1.1rem;
  color: var(--text-2);
  margin-bottom: 1.5rem;
}

.welcome-greeting strong {
  color: var(--cyan);
}

.welcome-inner input[type="text"] {
  width: 100%;
  padding: .85rem 1.2rem;
  font-size: 1.1rem;
  border: 2px solid var(--bg-3);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--text);
  outline: none;
  transition: border-color var(--trans);
  margin-bottom: 1rem;
}

.welcome-inner input[type="text"]:focus {
  border-color: var(--blue);
}

.welcome-inner input[type="text"]::placeholder { color: var(--text-3); }

.badge-row {
  display: flex;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.badge {
  background: var(--bg-2);
  border: 1px solid var(--bg-3);
  border-radius: 99px;
  padding: .3rem .9rem;
  font-size: .8rem;
  color: var(--text-2);
}

/* ════════════════════════════════════════════════════════════
   GAME-SCREEN
   ════════════════════════════════════════════════════════════ */
#screen-game {
  background: var(--bg-0);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
}

/* Header */
.game-header {
  background: var(--bg-1);
  border-bottom: 1px solid var(--bg-2);
  padding: .75rem 1rem .5rem;
  z-index: 20;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5rem;
  gap: .5rem;
}

.round-info {
  font-size: .85rem;
  color: var(--text-2);
  white-space: nowrap;
}

.round-info strong { color: var(--text); }

.score-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .1rem;
}

#score-display {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  min-width: 5ch;
  text-align: right;
}

.score-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  justify-content: flex-end;
}

#streak-display {
  font-size: .75rem;
  color: var(--ora-l);
  opacity: 0;
  transition: opacity .3s;
  text-align: right;
}
#streak-display.visible { opacity: 1; }

/* Multiplikator-Badge */
.multiplier-badge {
  font-size: .75rem;
  font-weight: 700;
  border-radius: 99px;
  padding: .15rem .55rem;
  transition: background .3s, color .3s;
}

.mult-x1   { color: var(--text-3); background: transparent; }
.mult-x125 { color: var(--orange); background: rgba(238,119,51,.15); }
.mult-x15  {
  color: #fff;
  background: var(--orange);
  animation: multPulse .8s ease-in-out infinite alternate;
}

@keyframes multPulse {
  from { box-shadow: 0 0 0   rgba(238,119,51,.4); }
  to   { box-shadow: 0 0 8px rgba(238,119,51,.8); }
}

.badge-area {
  display: flex;
  gap: .5rem;
  margin-bottom: .4rem;
  flex-wrap: wrap;
}

#type-badge {
  background: var(--blue);
  color: #fff;
  border-radius: 99px;
  padding: .2rem .75rem;
  font-size: .78rem;
  font-weight: 600;
}

#category-badge {
  background: var(--bg-3);
  color: var(--text-2);
  border-radius: 99px;
  padding: .2rem .75rem;
  font-size: .78rem;
}

#category-badge[data-difficulty="3"] { color: var(--orange); }

/* Timer */
.timer-wrap {
  width: 100%;
  height: 14px;
}

#timer-canvas {
  display: block;
  width: 100%;
  height: 14px;
}

/* Frage */
.question-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1.25rem 1rem;
  overflow-y: auto;
}

#question-text {
  font-size: clamp(1.1rem, 3.5vw, 1.6rem);
  font-weight: 600;
  text-align: center;
  max-width: 700px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  transition: none;
}

#question-text.slide-in {
  animation: slideIn .4s ease forwards;
}

/* Antwortbereich */
.answer-area {
  padding: .75rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-height: 55vh;
  overflow-y: auto;
}

/* ─── Antwort-Buttons ──────────────────────────────────────── */
.btn-grid {
  display: grid;
  gap: .65rem;
}

.btn-grid.four  { grid-template-columns: 1fr 1fr; }
.btn-grid.two   { grid-template-columns: 1fr 1fr; }
.btn-grid.two.person,
.btn-grid.two.duel { grid-template-columns: 1fr 1fr; }

.answer-btn {
  padding: 1rem .75rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-size: clamp(.9rem, 2.5vw, 1.05rem);
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: transform .12s, opacity .2s, background .2s;
  text-align: center;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
  word-break: break-word;
}

.answer-btn:not(:disabled):hover  { transform: translateY(-2px); filter: brightness(1.12); }
.answer-btn:not(:disabled):active { transform: scale(.97); }

/* Farbvarianten */
.color-a { background: var(--blue);   color: #fff; }
.color-b { background: var(--orange); color: #fff; }
.color-c { background: var(--cyan);   color: var(--bg-0); }
.color-d { background: #7c4ddb;       color: #fff; }

/* Zustände */
.answer-btn.correct  { background: var(--correct) !important; border-color: #5fff8c; transform: scale(1.04); }
.answer-btn.wrong    { background: var(--wrong)   !important; border-color: #ff8888; }
.answer-btn.timeout  { background: var(--timeout) !important; color: var(--text-2); }
.answer-btn:disabled { cursor: default; }

/* Person-Karte */
.person-card, .duel-card {
  flex-direction: column;
  gap: .3rem;
  padding: 1.2rem .75rem;
  min-height: 90px;
}

.person-name, .duel-name {
  font-size: 1.05rem;
  font-weight: 700;
}

.person-info, .duel-fact {
  font-size: .8rem;
  opacity: .85;
  font-weight: 400;
}

/* Lüge-Buttons */
.lie-btn {
  font-size: .92rem;
  text-align: left;
  padding: .9rem 1rem;
  justify-content: flex-start;
}

/* ─── Näher-dran ───────────────────────────────────────────── */
.closer-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  padding: .5rem 0;
}

.closer-hint {
  color: var(--cyan);
  font-size: .9rem;
  background: rgba(51,187,238,.1);
  border: 1px solid rgba(51,187,238,.25);
  border-radius: var(--radius);
  padding: .4rem 1rem;
}

.number-input {
  width: min(340px, 100%);
  padding: .9rem 1.2rem;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  border: 2px solid var(--bg-3);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--text);
  outline: none;
  transition: border-color var(--trans);
}

.number-input:focus { border-color: var(--blue); }

.unit-label {
  color: var(--text-2);
  font-size: .9rem;
}

/* ─── Reihenfolge-Quiz ─────────────────────────────────────── */
.order-hint {
  text-align: center;
  color: var(--cyan);
  font-size: .85rem;
  margin-bottom: .25rem;
}

.order-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.order-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--bg-2);
  border: 2px solid var(--bg-3);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  cursor: grab;
  font-size: .95rem;
  font-weight: 500;
  user-select: none;
  transition: background var(--trans), transform var(--trans);
}

.order-item:hover  { background: var(--bg-3); }
.order-item.dragging { opacity: .4; border-style: dashed; }

.drag-grip {
  color: var(--text-3);
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ─── Submit-Button ────────────────────────────────────────── */
.btn-submit {
  width: 100%;
  max-width: 340px;
  margin: .25rem auto 0;
  padding: .9rem;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: transform var(--trans), filter var(--trans);
}

.btn-submit:hover  { filter: brightness(1.12); transform: translateY(-2px); }
.btn-submit:active { transform: scale(.97); }

/* ════════════════════════════════════════════════════════════
   ERKLÄRUNG OVERLAY
   ════════════════════════════════════════════════════════════ */
#explanation-overlay {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  width: min(480px, 94vw);
  background: var(--bg-1);
  border: 1px solid var(--bg-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.1rem 1.4rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s, transform .35s;
  z-index: 500;
}

#explanation-overlay.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.exp-icon {
  font-size: 1.8rem;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}

.exp-icon.correct { color: var(--correct); }
.exp-icon.wrong   { color: var(--wrong); }
.exp-icon.partial { color: var(--orange); }

.exp-right { display: flex; flex-direction: column; gap: .3rem; }

#exp-message {
  font-size: 1rem;
  font-weight: 700;
}

#exp-text {
  font-size: .88rem;
  color: var(--text-2);
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   SCORE POPUP
   ════════════════════════════════════════════════════════════ */
.score-popup {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%) scale(.8);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--orange);
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
  pointer-events: none;
  opacity: 0;
  z-index: 8000;
  transition: none;
}

.score-popup.visible {
  animation: scorePop 1.4s ease forwards;
}

/* ════════════════════════════════════════════════════════════
   BETTING-SCREEN
   ════════════════════════════════════════════════════════════ */
#screen-betting {
  background: radial-gradient(ellipse at 50% 30%, #1a0e35, var(--bg-0) 70%);
  align-items: center;
  justify-content: center;
}

.betting-inner {
  width: min(500px, 92vw);
  text-align: center;
  animation: fadeUp .5s ease both;
}

.betting-inner h2 {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 800;
  background: linear-gradient(135deg, var(--orange), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .5rem;
}

.bet-score-display {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  margin: .5rem 0 1.5rem;
}

.bet-score-display small {
  font-size: .9rem;
  font-weight: 400;
  color: var(--text-2);
  display: block;
}

.question-preview {
  background: var(--bg-2);
  border: 1px solid var(--bg-3);
  border-radius: var(--radius);
  padding: .85rem 1.1rem;
  font-size: .95rem;
  color: var(--text-2);
  margin-bottom: 1.5rem;
  font-style: italic;
  line-height: 1.5;
}

.bet-controls {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: center;
}

.bet-controls label {
  font-size: .88rem;
  color: var(--text-2);
}

#bet-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 99px;
  background: var(--bg-3);
  outline: none;
  cursor: pointer;
}

#bet-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--orange);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(238,119,51,.5);
}

#bet-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--orange);
  cursor: pointer;
  border: none;
}

#bet-amount {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════
   GAME-OVER
   ════════════════════════════════════════════════════════════ */
#screen-gameover {
  background: radial-gradient(ellipse at 40% 20%, #0d2a14, var(--bg-0) 70%);
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

.gameover-inner {
  width: min(520px, 94vw);
  text-align: center;
  padding: 2rem 1rem;
  animation: fadeUp .6s ease both;
}

.gameover-inner h2 {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 800;
  margin-bottom: .3rem;
}

#go-player {
  font-size: 1.1rem;
  color: var(--cyan);
  margin-bottom: 1rem;
}

#go-score {
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 800;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: .25rem;
}

#go-stars {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.rounds-grid {
  display: flex;
  gap: .4rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.round-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
}

.round-dot.hit  { background: var(--correct); }
.round-dot.miss { background: var(--wrong); }

/* Mini-Leaderboard */
.mini-lb {
  background: var(--bg-1);
  border: 1px solid var(--bg-3);
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.mini-lb h3 {
  padding: .6rem 1rem;
  font-size: .88rem;
  color: var(--text-2);
  border-bottom: 1px solid var(--bg-3);
  text-align: left;
}

.lb-row {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: .5rem;
  align-items: center;
  padding: .55rem 1rem;
  border-bottom: 1px solid var(--bg-3);
  font-size: .9rem;
}

.lb-row:last-child { border-bottom: none; }
.lb-row.me { background: rgba(0,119,187,.15); color: var(--blue-l); }

.lb-rank  { color: var(--text-2); font-size: .8rem; }
.lb-score { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════════
   LEADERBOARD-SEITE
   ════════════════════════════════════════════════════════════ */
.lb-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 1rem;
  background: radial-gradient(ellipse at 50% 0%, #0a1f33, var(--bg-0) 60%);
}

.lb-page h1 {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 800;
  margin-bottom: 2rem;
}

.lb-page h1 span { color: var(--orange); }

.lb-table {
  width: min(520px, 96vw);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--bg-3);
  box-shadow: var(--shadow);
}

.lb-table-row {
  display: grid;
  grid-template-columns: 3rem 1fr auto auto;
  gap: .5rem;
  align-items: center;
  padding: .75rem 1.1rem;
  border-bottom: 1px solid var(--bg-3);
  font-size: .95rem;
}

.lb-table-row:last-child { border-bottom: none; }

.lb-table-row.head {
  background: var(--bg-2);
  font-size: .8rem;
  color: var(--text-2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.rank-medal { font-size: 1.2rem; }

.lb-table-row .lb-score {
  color: var(--orange);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lb-table-row .lb-date {
  color: var(--text-3);
  font-size: .8rem;
}

.empty-lb {
  padding: 2.5rem;
  text-align: center;
  color: var(--text-2);
  font-size: .95rem;
}

/* ════════════════════════════════════════════════════════════
   GEMEINSAME BUTTONS
   ════════════════════════════════════════════════════════════ */
.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 2rem;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--trans), filter var(--trans), opacity var(--trans);
  min-width: 160px;
  text-align: center;
}

.btn-primary {
  background: var(--blue);
  color: #fff;
}

.btn-secondary {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--bg-3);
}

.btn-primary:hover,
.btn-secondary:hover { filter: brightness(1.15); transform: translateY(-2px); }

.btn-primary:active,
.btn-secondary:active { transform: scale(.97); }

.btn-primary:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.btn-row {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: .75rem;
}

/* ════════════════════════════════════════════════════════════
   ANIMATIONEN
   ════════════════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scorePop {
  0%   { opacity: 0; transform: translateX(-50%) scale(.7) translateY(0); }
  20%  { opacity: 1; transform: translateX(-50%) scale(1.2) translateY(0); }
  80%  { opacity: 1; transform: translateX(-50%) scale(1) translateY(-30px); }
  100% { opacity: 0; transform: translateX(-50%) scale(.9) translateY(-60px); }
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-6px); }
  80%      { transform: translateX(6px); }
}

.shake { animation: shake .5s ease; }

/* ─── Näher-dran: Auflösung ───────────────────────────────── */
.closer-reveal {
  text-align: center;
  padding: .75rem 1rem;
  background: rgba(0,119,187,.12);
  border: 1px solid rgba(0,119,187,.3);
  border-radius: var(--radius);
  font-size: 1rem;
  color: var(--text-2);
  animation: fadeUp .3s ease;
}

.closer-reveal strong {
  color: var(--blue-l);
  font-size: 1.15rem;
}

/* ─── Touch-Clone (Drag) ───────────────────────────────────── */
.touch-clone {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  opacity: .85;
  border-radius: var(--radius);
  background: var(--bg-3);
  padding: .75rem 1rem;
  box-shadow: var(--shadow-lg);
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 640px) {
  .btn-grid.four {
    grid-template-columns: 1fr;
  }

  .btn-grid.two {
    grid-template-columns: 1fr;
  }

  .answer-btn { min-height: 52px; }

  .game-header { padding: .6rem .75rem .4rem; }
}

/* Desktop: Antwortgrid auf 2 Spalten beschränken */
@media (min-width: 900px) {
  #screen-game {
    max-width: 760px;
    margin: 0 auto;
    height: 100%;
  }

  .answer-area { max-height: none; }

  .btn-grid.four {
    grid-template-columns: 1fr 1fr;
  }
}

/* Große Bildschirme: Inhalt zentrieren */
@media (min-width: 900px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #app {
    max-width: 760px;
    height: 100vh;
    border-left:  1px solid var(--bg-2);
    border-right: 1px solid var(--bg-2);
  }
}