:root{
  --glass: rgba(0,0,0,.45);
  --glass2: rgba(10,20,40,.45);
  --stroke: rgba(255,255,255,.18);
  --text: #e9f2ff;
  --muted: rgba(233,242,255,.75);
  --accent: #3aa7ff;
  --danger: #ff4d4d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  overflow-x:hidden;
}

/* Hintergrund (ersetzt später gern durch eigenes Bild in assets/img/bg.jpg) */
.bg{
  position:fixed; inset:0;
  background:
    radial-gradient(1200px 700px at 10% 30%, rgba(0,140,255,.35), transparent 65%),
    radial-gradient(900px 600px at 80% 40%, rgba(200,0,255,.25), transparent 60%),
    linear-gradient(120deg, rgba(0,0,0,.95), rgba(0,10,30,.92));
  filter:saturate(1.15) contrast(1.05);
  z-index:-2;
}
.bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, transparent 2px, transparent 6px);
  opacity:.12;
  pointer-events:none;
}

.shell{max-width:1180px; margin:0 auto; padding:18px 16px 28px}

.header{
  position:relative;
  display:grid;
  grid-template-columns: 260px 1fr 280px;
  align-items:center;
  gap:14px;
}
.logo img{width:220px; max-width:100%; height:auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.6));}

.shoutbox-title{
  text-align:center;
  font-size:18px;
  font-weight:700;
  text-shadow:0 6px 18px rgba(0,0,0,.75);
}
.muted{color:var(--muted)}

.loginbox{display:flex; justify-content:flex-end}
.loginform{display:flex; gap:8px; align-items:center}
.loginform input{
  width:120px;
  padding:8px 10px;
  border-radius:6px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.12);
  color:var(--text);
  outline:none;
}
.loginform input::placeholder{color:rgba(233,242,255,.7)}
.loginform button{
  width:38px; height:38px;
  border-radius:8px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.14);
  color:var(--text);
  cursor:pointer;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(58,167,255,.45);
  background:rgba(58,167,255,.16);
  color:var(--text);
  text-decoration:none;
  font-weight:700;
}
.btn.ghost{
  border-color:var(--stroke);
  background:rgba(255,255,255,.10);
}

.toast{
  margin:14px auto 0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.45);
  max-width:520px;
  text-align:center;
}
.toast.ok{border-color:rgba(60,255,160,.35)}
.toast.err{border-color:rgba(255,80,80,.35)}

.grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: 320px 1fr 340px;
  gap:18px;
  align-items:start;
}

.panel{
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, var(--glass2), var(--glass));
  box-shadow:0 20px 50px rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}
.panel-title{font-weight:800; padding:12px 14px 0; text-shadow:0 6px 18px rgba(0,0,0,.75)}
.panel-body{padding:12px 14px 14px; line-height:1.35}

.left{min-height:200px}
.right{min-height:200px}

.center{
  min-height:250px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
  justify-content:center;
}
.player{display:flex; gap:12px; align-items:center}
.player .ic{
  width:40px; height:40px;
  border-radius:10px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.10);
  color:var(--text);
  cursor:pointer;
}
.player .play{
  width:52px; height:52px;
  border-radius:16px;
  border:1px solid rgba(58,167,255,.55);
  background:rgba(58,167,255,.18);
  color:var(--text);
  cursor:pointer;
  font-size:18px;
  box-shadow:0 10px 24px rgba(58,167,255,.18);
}

.wish{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
  padding:14px;
  text-align:center;
}
.wish-text{color:var(--danger); font-weight:800; margin-bottom:10px}
.wish-state{font-weight:800}

.menu{
  grid-column: 1 / -1;
  display:flex;
  justify-content:center;
  gap:22px;
  padding:10px 12px;
  text-shadow:0 6px 18px rgba(0,0,0,.75);
}
.menu a{
  color:var(--text);
  text-decoration:none;
  font-weight:800;
}
.menu a:hover{color:#ffffff}

.news{grid-column: 1 / 3; min-height:160px}
.special{grid-column: 3 / 4; min-height:160px}
.red{color:var(--danger); font-weight:900; letter-spacing:.5px; text-align:center}

.foot{margin-top:18px; text-align:center; color:var(--muted); text-shadow:0 6px 18px rgba(0,0,0,.75)}

@media (max-width: 980px){
  .header{grid-template-columns: 1fr; justify-items:center}
  .loginbox{justify-content:center; width:100%}
  .grid{grid-template-columns: 1fr;}
  .news,.special{grid-column:auto}
  .menu{flex-wrap:wrap; gap:12px}
}