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

:root {
  --bg: #0f172a;
  --glass: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.2);
  --text: #f1f5f9;
  --accent: #22c55e;
  --accent-2: #60a5fa;
  --muted: #94a3b8;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x:hidden;
}

/* Hintergrund-Glows */
body::before, body::after {
  content:"";
  position:fixed;
  width:600px; height:600px;
  background: radial-gradient(circle, rgba(96,165,250,.25), transparent 70%);
  animation: float1 18s linear infinite;
  z-index:-1;
}
body::after {
  background: radial-gradient(circle, rgba(34,197,94,.25), transparent 70%);
  width:700px; height:700px;
  top:40%; left:60%;
  animation: float2 25s linear infinite;
}
@keyframes float1 { from{top:-20%; left:-20%;} to{top:120%; left:120%;} }
@keyframes float2 { from{top:120%; left:80%;} to{top:-40%; left:-40%;} }

header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(15,23,42,.6);
  border-bottom: 1px solid var(--border);
}
header .container {
  display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem;
}
nav a {
  color: var(--text); text-decoration:none; margin-left:1rem;
  padding:.4rem .8rem; border-radius:12px; transition:.3s;
}
nav a.active, nav a:hover { background: rgba(255,255,255,.1); }

.container { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; }

.block {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  margin-bottom: 2rem;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  transition: transform .2s;
}
.block:hover { transform:translateY(-4px); }

h1, h2, h3 { margin-top: 0; font-weight: 800; }
h1 { font-size: 2.4rem; }

.btn {
  border:none; border-radius:999px; padding:.8rem 1.4rem; font-weight:600; cursor:pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#0f172a;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  transition: transform .2s;
}
.btn:hover { transform: scale(1.05); }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }

.gif-box img {
  max-width:100%; border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
}

ul.fun-list, ul.todo-list { list-style:none; padding-left:0; }
ul.fun-list li, ul.todo-list li {
  margin:.6rem 0; padding:.6rem 1rem; border-radius:12px;
  background: rgba(255,255,255,.05); cursor:pointer;
}
ul.todo-list li.done {
  text-decoration: line-through; color:#9ca3af;
  background: rgba(34,197,94,.15);
}

.graveyard {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
  gap:1rem; margin-top:2rem;
}
.tombstone {
  font-size:2rem; background:rgba(255,255,255,.08);
  border:1px solid var(--border); border-radius:12px;
  padding:1rem; text-align:center; cursor:pointer; transition:.2s;
}
.tombstone:hover { transform: scale(1.1); background:rgba(255,255,255,.15); }

/* Bingo */
.bingo-grid {
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:.5rem; margin-top:1rem;
}
.bingo-cell {
  background:rgba(255,255,255,.1); border-radius:8px;
  padding:1rem; text-align:center; cursor:pointer; transition:.2s;
  font-size:.8rem;
}
.bingo-cell.marked { background:rgba(34,197,94,.3); transform:scale(1.1); }

footer {
  text-align:center; padding:2rem;
  font-size:.9rem; color:var(--muted);
}

.toast {
  position: fixed; bottom: 20px; right: 20px;
  background:rgba(17,24,39,.9); color:#e5e7eb;
  border:1px solid rgba(148,163,184,.3); padding:.6rem 1rem;
  border-radius:12px; opacity:0; transform:translateY(20px);
  transition:all .3s; z-index:200;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.toast.show { opacity:1; transform:translateY(0); }

.modal {
  position:fixed; inset:0; background:rgba(0,0,0,.7);
  display:flex; align-items:center; justify-content:center;
  z-index:300;
}
.modal.hidden { display:none; }
.modal video {
  max-width:90%; max-height:80%;
  border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.6);
}
.closeBtn {
  position:absolute; top:20px; right:20px;
  background:#ef4444; border:none; padding:.6rem 1rem;
  border-radius:12px; color:#fff; cursor:pointer; font-weight:600;
}