/* ── RESET ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%; overflow: hidden;
  background: #0a0a0f; color: #fff;
  font-family: 'Inter', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* ── THREE.JS CANVAS ────────────────────────── */
#bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* ── SCREENS ────────────────────────────────── */
.screen { position: fixed; inset: 0; z-index: 10; overflow-y: auto; }
.screen.hidden { display: none; }

/* ── TOP BAR ────────────────────────────────── */
.top-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  background: rgba(8,8,15,.94);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(0,212,255,.12);
}
.logo-text {
  font-family: 'Orbitron', monospace;
  font-size: 1.3rem; font-weight: 900;
  letter-spacing: 3px;
  background: linear-gradient(90deg,#00d4ff,#8b00ff,#ff006e,#00d4ff);
  background-size: 300% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: logo-shift 5s linear infinite;
}
.logo-a { -webkit-text-fill-color: inherit; }
@keyframes logo-shift { 0%{background-position:0%} 100%{background-position:300%} }
.top-bar-left { display: flex; align-items: center; gap: 8px; min-width: 100px; }
.top-bar-right { display: flex; align-items: center; gap: 10px; min-width: 100px; justify-content: flex-end; }
.level-badge {
  font-family: 'Orbitron', monospace;
  font-size: .6rem; font-weight: 700;
  color: #8b00ff; border: 1px solid rgba(139,0,255,.4);
  padding: 3px 9px; border-radius: 50px;
  background: rgba(139,0,255,.1);
  white-space: nowrap;
}
.xp-bar-mini { width: 55px; height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.xp-fill-mini { height: 100%; background: linear-gradient(90deg,#8b00ff,#00d4ff); border-radius: 2px; transition: width .6s ease; width: 0%; }
.streak-pill {
  font-size: .8rem; font-weight: 700; color: #ff9500;
  background: rgba(255,149,0,.1); border: 1px solid rgba(255,149,0,.3);
  padding: 4px 10px; border-radius: 50px;
}
.icon-btn {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%; width: 34px; height: 34px;
  color: #fff; font-size: .9rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.icon-btn:hover { background: rgba(0,212,255,.15); }

/* ── HOME BODY ──────────────────────────────── */
.home-body { padding: 24px 18px 80px; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.home-date-wrap { text-align: center; }
.home-date { font-family: 'Orbitron', monospace; font-size: 1rem; font-weight: 700; color: #00d4ff; letter-spacing: .1em; }
.home-sub { font-size: .75rem; color: rgba(255,255,255,.35); margin-top: 5px; letter-spacing: .12em; text-transform: uppercase; }

/* ── CATEGORY GRID ──────────────────────────── */
.cat-grid { display: flex; flex-direction: column; gap: 14px; }
.cat-card {
  position: relative; border-radius: 18px; overflow: hidden;
  cursor: pointer; border: 1.5px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.04); backdrop-filter: blur(20px);
  transition: transform .2s, border-color .2s, box-shadow .2s;
  transform-style: preserve-3d; will-change: transform;
}
.cat-card.done { border-color: rgba(0,230,118,.35); }
.cat-card-img { width: 100%; height: 110px; object-fit: cover; display: block; filter: brightness(.55) saturate(.7); transition: filter .3s; }
.cat-card:hover .cat-card-img { filter: brightness(.7) saturate(1); }
.cat-card-body { padding: 13px 16px 15px; display: flex; align-items: center; gap: 12px; }
.cat-emoji { font-size: 1.9rem; flex-shrink: 0; }
.cat-info { flex: 1; }
.cat-name { font-family: 'Orbitron', monospace; font-size: .82rem; font-weight: 700; letter-spacing: .08em; margin-bottom: 4px; }
.cat-meta { font-size: .72rem; color: rgba(255,255,255,.45); }
.cat-pts { font-size: .78rem; font-weight: 700; margin-top: 2px; }
.cat-status { font-size: 1.5rem; flex-shrink: 0; }

.cat-card[data-cat="politik"]         .cat-name { color: #ff006e; }
.cat-card[data-cat="wirtschaft"]      .cat-name { color: #00d4ff; }
.cat-card[data-cat="allgemeinwissen"] .cat-name { color: #8b00ff; }
.cat-card[data-cat="politik"]:hover         { border-color: rgba(255,0,110,.45); box-shadow: 0 0 28px rgba(255,0,110,.18); }
.cat-card[data-cat="wirtschaft"]:hover      { border-color: rgba(0,212,255,.45); box-shadow: 0 0 28px rgba(0,212,255,.18); }
.cat-card[data-cat="allgemeinwissen"]:hover { border-color: rgba(139,0,255,.45); box-shadow: 0 0 28px rgba(139,0,255,.18); }

/* ── LEADERBOARD ────────────────────────────── */
.lb-panel { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 16px; backdrop-filter: blur(10px); }
.lb-title { font-family: 'Orbitron', monospace; font-size: .65rem; font-weight: 700; letter-spacing: .2em; color: rgba(255,255,255,.35); margin-bottom: 12px; }
.lb-row { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .84rem; }
.lb-row:last-child { border-bottom: none; }
.lb-rank { width: 26px; font-weight: 700; color: rgba(255,255,255,.35); }
.lb-rank.gold { color: #ffd700; } .lb-rank.silver { color: #c0c0c0; } .lb-rank.bronze { color: #cd7f32; }
.lb-name { flex: 1; font-weight: 600; }
.lb-streak { font-size: .7rem; color: #ff9500; padding: 0 8px; }
.lb-pts { font-family: 'Orbitron', monospace; font-size: .76rem; color: #00d4ff; font-weight: 700; }

/* ── INTRO SCREEN ───────────────────────────── */
#screen-intro { overflow: hidden; }
.intro-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.06); transition: transform .5s; }
.intro-gradient { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.25) 0%, rgba(10,10,15,.96) 55%); }
.intro-body { position: relative; z-index: 2; padding: 20px 24px 52px; display: flex; flex-direction: column; min-height: 100vh; justify-content: flex-end; gap: 16px; }
.intro-badge { display: inline-block; font-family: 'Orbitron', monospace; font-size: .62rem; font-weight: 700; padding: 5px 14px; border-radius: 50px; letter-spacing: .15em; width: fit-content; }
.intro-topic { font-family: 'Orbitron', monospace; font-size: 1.7rem; font-weight: 900; line-height: 1.2; max-width: 500px; }
.intro-info { font-size: .9rem; line-height: 1.68; color: rgba(255,255,255,.75); max-width: 500px; }
.play-btn {
  position: relative; align-self: flex-start;
  padding: 16px 38px; border-radius: 50px; border: none;
  background: linear-gradient(135deg, #8b00ff, #00d4ff);
  color: #fff; font-family: 'Orbitron', monospace;
  font-size: .92rem; font-weight: 700; letter-spacing: .1em;
  cursor: pointer; overflow: hidden;
  box-shadow: 0 0 32px rgba(139,0,255,.55);
  animation: play-pulse 2s ease-in-out infinite;
}
.play-btn:hover { transform: translateY(-2px); box-shadow: 0 0 48px rgba(139,0,255,.8); }
.play-btn:active { transform: scale(.97); }
@keyframes play-pulse { 0%,100%{box-shadow:0 0 32px rgba(139,0,255,.55)} 50%{box-shadow:0 0 60px rgba(139,0,255,.9),0 0 80px rgba(0,212,255,.3)} }
.btn-ring { position: absolute; inset: 0; border-radius: 50px; border: 2px solid rgba(255,255,255,.4); animation: ring-pulse 2s ease-out infinite; }
@keyframes ring-pulse { 0%{transform:scale(1);opacity:.5} 100%{transform:scale(1.18);opacity:0} }

/* ── QUIZ SCREEN ────────────────────────────── */
#screen-quiz { background: #0a0a0f; padding-bottom: 40px; }
.quiz-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  background: rgba(10,10,15,.96); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.prog-wrap { flex: 1; display: flex; align-items: center; gap: 8px; }
.prog-bar { flex: 1; height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.prog-fill { height: 100%; background: linear-gradient(90deg,#8b00ff,#00d4ff); border-radius: 2px; transition: width .4s ease; }
.prog-lbl { font-size: .72rem; color: rgba(255,255,255,.45); white-space: nowrap; }
.quiz-pts-lbl { font-family: 'Orbitron', monospace; font-size: .78rem; color: #00d4ff; font-weight: 700; white-space: nowrap; }

.timer-wrap {
  position: relative; width: 96px; height: 96px;
  margin: 20px auto 8px;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.timer-svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.timer-track { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 5; }
.timer-ring { fill: none; stroke: #00d4ff; stroke-width: 5; stroke-dasharray: 276.46; stroke-dashoffset: 0; stroke-linecap: round; transition: stroke .5s; }
.timer-num { font-family: 'Orbitron', monospace; font-size: 1.55rem; font-weight: 900; color: #fff; z-index: 1; line-height: 1; transition: color .5s, transform .1s; }
.mult-lbl { font-size: .65rem; color: rgba(255,255,255,.45); font-family: 'Orbitron', monospace; z-index: 1; }

.q-card {
  margin: 12px 16px; padding: 20px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; backdrop-filter: blur(20px);
}
.q-text { font-size: 1.03rem; font-weight: 600; line-height: 1.58; color: #fff; }
.opts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 16px; }
.opt-btn {
  padding: 13px 11px; border-radius: 13px;
  border: 1.5px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
  color: #fff; font-family: 'Inter', sans-serif;
  font-size: .84rem; font-weight: 500; text-align: left;
  cursor: pointer; transition: border-color .15s, background .15s, transform .15s;
  line-height: 1.4; backdrop-filter: blur(10px);
}
.opt-btn:hover:not(:disabled) { border-color: rgba(0,212,255,.5); background: rgba(0,212,255,.09); transform: translateY(-2px); }
.opt-btn:disabled { cursor: default; }
.opt-btn.correct { border-color: #00e676 !important; background: rgba(0,230,118,.12) !important; color: #00e676 !important; font-weight: 700; }
.opt-btn.wrong   { border-color: #ff4444 !important; background: rgba(255,68,68,.12) !important; color: #ff4444 !important; }
.opt-prefix { font-family: 'Orbitron', monospace; font-size: .65rem; opacity: .55; display: block; margin-bottom: 4px; }

/* ── RESULT ─────────────────────────────────── */
#screen-result { display: flex; align-items: center; justify-content: center; }
.result-body { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 40px 24px; max-width: 400px; width: 100%; text-align: center; }
.result-stars { font-size: 2.4rem; letter-spacing: .3em; }
.result-orb {
  width: 138px; height: 138px; border-radius: 50%;
  border: 2px solid #8b00ff;
  box-shadow: 0 0 40px rgba(139,0,255,.5), inset 0 0 28px rgba(139,0,255,.1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  animation: orb-pulse 2.5s ease-in-out infinite;
}
@keyframes orb-pulse { 0%,100%{box-shadow:0 0 40px rgba(139,0,255,.5)} 50%{box-shadow:0 0 80px rgba(139,0,255,.85),0 0 110px rgba(0,212,255,.3)} }
.result-pts { font-family: 'Orbitron', monospace; font-size: 2.3rem; font-weight: 900; color: #fff; }
.result-pts-lbl { font-size: .72rem; color: rgba(255,255,255,.45); letter-spacing: .12em; }
.result-detail { font-size: .88rem; color: rgba(255,255,255,.55); }
.result-compare { font-size: .85rem; color: #00d4ff; font-weight: 600; min-height: 20px; }
.result-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.badge-chip { background: rgba(139,0,255,.15); border: 1px solid rgba(139,0,255,.4); border-radius: 50px; padding: 5px 14px; font-size: .73rem; font-weight: 600; color: #c080ff; }
.result-btns { display: flex; gap: 10px; width: 100%; }
.result-btns > * { flex: 1; }

/* ── FRIENDS ────────────────────────────────── */
#screen-friends { overflow-y: auto; }
.friends-body { padding: 24px 20px 70px; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.friends-title { font-family: 'Orbitron', monospace; font-size: 1.2rem; font-weight: 900; }
.glass-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 20px; backdrop-filter: blur(20px); }
.code-lbl { font-family: 'Orbitron', monospace; font-size: .62rem; letter-spacing: .2em; color: rgba(255,255,255,.4); margin-bottom: 8px; }
.my-code { font-family: 'Orbitron', monospace; font-size: 1.8rem; font-weight: 900; letter-spacing: .2em; color: #8b00ff; text-shadow: 0 0 20px rgba(139,0,255,.6); margin-bottom: 12px; word-break: break-all; }
.add-card { display: flex; gap: 10px; align-items: center; }
.code-input {
  flex: 1; padding: 11px 14px; border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05);
  color: #fff; font-family: 'Inter', sans-serif; font-size: .9rem; outline: none;
}
.code-input:focus { border-color: #8b00ff; box-shadow: 0 0 0 3px rgba(139,0,255,.2); }
.friends-lb { display: flex; flex-direction: column; gap: 6px; }

/* ── BUTTONS ────────────────────────────────── */
.btn-primary {
  padding: 13px 22px; border-radius: 12px; border: none;
  background: linear-gradient(135deg,#8b00ff,#00d4ff);
  color: #fff; font-family: 'Orbitron', monospace;
  font-size: .8rem; font-weight: 700; letter-spacing: .07em;
  cursor: pointer; box-shadow: 0 4px 20px rgba(139,0,255,.4);
  transition: transform .15s, box-shadow .15s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 30px rgba(139,0,255,.65); }
.btn-primary:active { transform: scale(.97); }
.btn-primary.small { padding: 10px 18px; font-size: .72rem; }
.btn-secondary {
  padding: 13px 22px; border-radius: 12px;
  border: 1.5px solid rgba(0,212,255,.4); background: rgba(0,212,255,.08);
  color: #00d4ff; font-family: 'Orbitron', monospace;
  font-size: .8rem; font-weight: 700; letter-spacing: .07em;
  cursor: pointer; transition: background .2s, transform .15s;
}
.btn-secondary:hover { background: rgba(0,212,255,.16); transform: translateY(-1px); }
.btn-secondary.small { padding: 10px 18px; font-size: .72rem; }
.back-btn {
  display: inline-flex; align-items: center;
  padding: 8px 15px; border-radius: 50px;
  border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.6); font-family: 'Inter', sans-serif; font-size: .82rem;
  cursor: pointer; transition: color .2s, background .2s; width: fit-content;
}
.back-btn:hover { color: #fff; background: rgba(255,255,255,.1); }
.back-btn.small { padding: 6px 10px; font-size: .76rem; }

/* ── ANIMATIONS ─────────────────────────────── */
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-10px)} 40%{transform:translateX(10px)} 60%{transform:translateX(-8px)} 80%{transform:translateX(8px)} }
.shake { animation: shake .42s ease-out; }

/* ── UTILS ──────────────────────────────────── */
.hidden { display: none !important; }

/* ── RESPONSIVE ─────────────────────────────── */
@media (max-width: 480px) {
  .opts-grid { grid-template-columns: 1fr; }
  .intro-topic { font-size: 1.3rem; }
  .my-code { font-size: 1.3rem; }
  .logo-text { font-size: 1.1rem; }
}