:root{
  --glass-bg: rgba(255,255,255,0.08);
  --glass-stroke: rgba(255,255,255,0.22);
  --glass-highlight: rgba(255,255,255,0.45);
  --text: #e6e9ef;
  --muted: rgba(230,233,239,0.65);
  --brand: #0a84ff;
  --panel: rgba(20,22,28,0.65);
  --success: #34c759;
  --danger: #ff453a;
  --card-shadow: 0 24px 80px rgba(0,0,0,0.45);
  --border: rgba(255,255,255,0.1);
}
/* Light theme */
[data-theme="light"]{
  --glass-bg: rgba(255,255,255,0.6);
  --glass-stroke: rgba(0,0,0,0.08);
  --glass-highlight: rgba(255,255,255,0.9);
  --text: #0b0f14;
  --muted: rgba(0,0,0,0.55);
  --brand: #007aff;
  --panel: rgba(255,255,255,0.55);
  --success: #34c759;
  --danger: #ff3b30;
  --card-shadow: 0 24px 60px rgba(0,0,0,0.12);
  --border: rgba(0,0,0,0.12);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',system-ui,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';color:var(--text);}
/* Background image with strong blur */
.bg{
  position:fixed; inset:0;
  background-image: url('assets/background.png');
  background-size: cover;
  background-position: center;
  filter: blur(30px) saturate(1.2) brightness(0.7);
  transform: scale(1.05);
  z-index:-2;
}
/* Subtle overlay for readability */
body::before{
  content:''; position:fixed; inset:0; background: radial-gradient(1200px 800px at 70% 20%, rgba(255,255,255,0.06), transparent 60%),
                                       linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.3));
  z-index:-1;
}

.glass{
  background: var(--panel);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid var(--glass-stroke);
  box-shadow:
    0 1px 0 0 var(--glass-highlight) inset,
    var(--card-shadow);
  border-radius: 20px;
}

#app{max-width:1200px;margin:32px auto;padding:0 16px}

.header{
  display:grid;
  grid-template-columns: 1fr auto auto;
  align-items:center;
  gap:16px;
  padding:12px 16px;
}

.brand{display:flex;gap:10px;align-items:center}
.brand h1{font-size:18px;margin:0;font-weight:700;letter-spacing:.2px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 18px rgba(10,132,255,.7)}

.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  cursor:pointer; user-select:none;
  font-weight:600; letter-spacing:.02em;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
}
.tab.active{border-color: var(--brand); box-shadow: 0 0 0 2px rgba(10,132,255,0.18)}
.tab small{display:block;color:var(--muted);font-weight:500;letter-spacing:0;}

.controls{display:flex;gap:8px;align-items:center}
.toggle{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:14px}
.toggle input{accent-color:var(--brand)}
.btn.icon{padding:10px 12px}

.layout{display:grid;grid-template-columns:280px 1fr;gap:16px;margin-top:16px}
.sidebar{padding:16px}
.sidebar h2{margin:0 0 8px 0;font-size:16px}
#categoryList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:360px;overflow:auto}
#categoryList li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:8px 10px;border-radius:12px;cursor:pointer;border:1px solid transparent}
#categoryList li.active{border-color:var(--brand);background:rgba(10,132,255,0.12)}
#categoryList li .meta{color:var(--muted);font-size:12px}

.stats{margin-top:12px;color:var(--muted);display:grid;gap:4px}

.stage{display:grid;gap:12px;align-items:start}

.card{width:100%;min-height:320px;perspective:1200px;position:relative;outline:none}
.card-face{
  position:absolute; inset:0;
  padding:28px;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  backface-visibility:hidden;
  transition: transform 500ms ease;
  border-radius:20px;
}
.card .text{font-size: clamp(18px, 2.6vw, 28px); line-height:1.4; text-align:center; white-space:pre-line}
.card.flip .card-front{transform: rotateY(180deg)}
.card.flip .card-back{transform: rotateY(0deg)}
.card-front{transform: rotateY(0deg)}
.card-back{transform: rotateY(-180deg)}

.toolbar{display:flex;gap:8px;align-items:center;padding:10px}
.spacer{flex:1}

/* Reveal Richtig/Falsch only after flip */
.answerBtns{display:flex;gap:8px;visibility:hidden;opacity:0;transition:opacity .25s ease}
.toolbar.revealed .answerBtns{visibility:visible;opacity:1}

.btn{
  border:none;
  padding:10px 14px;
  border-radius:14px;
  font-weight:600;
  cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
  border:1px solid var(--border);
}
.btn.primary{background:linear-gradient(180deg, #0a84ff, #0063e6); color:white; border-color:rgba(0,0,0,.2)}
.btn.success{background:linear-gradient(180deg, #34c759, #1f9d3b); color:white}
.btn.danger{background:linear-gradient(180deg, #ff453a, #d9362d); color:white}

.footer{margin-top:16px;padding:12px;text-align:center}

@media (max-width: 900px){
  .layout{grid-template-columns: 1fr}
  .sidebar{order:2}
  .stage{order:1}
}