:root{
  --bg:#0b0f18;
  /* etwas transparenter als vorher */
  --panel:rgba(17,24,40,.70);
  --panel-2:rgba(15,22,36,.58);
  --text:#f3f6ff;
  --muted:#c9d3ee;
  --primary:#10b981;   /* grün */
  --primary-2:#34d399; /* grün hell */
  --danger:#ff6b81;
  --ok:#22c55e;
  --border:#1e2740;
  --shadow: 0 14px 40px rgba(3,8,20,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden
}

#bg-canvas{
  position:fixed; inset:0; width:100%; height:100%; z-index:-1;
  background: radial-gradient(1000px 540px at 70% -10%, rgba(167,243,208,.10), transparent 60%),
              radial-gradient(900px 520px at 20% 110%, rgba(52,211,153,.08), transparent 60%);
}

/* großes, klickbares Logo */
.logo-wrap{display:flex; align-items:center; justify-content:center; padding:26px 16px 8px}
.logo{width:150px; height:150px; border-radius:16px; display:block}

main{padding:16px 16px 56px; max-width:1100px; margin:0 auto}

/* Panels etwas durchsichtiger */
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  padding:20px;
  box-shadow:var(--shadow)
}
.panel-wide{max-width:720px; margin:0 auto 16px}
.panel-title{margin:0 0 14px; font-size:22px; text-align:center}

.list{margin:8px 0 0 0; padding:0 0 0 18px}
.list li{margin:6px 0}

.form{display:grid; gap:12px; grid-template-columns:1fr; max-width:520px; margin:0 auto}
.lbl{font-size:14px; color:var(--muted)}
.input{
  height:48px; border-radius:12px; background:var(--panel-2);
  border:1px solid var(--border); color:var(--text);
  padding:0 12px; outline:none; width:100%
}
.input:focus{border-color:#a7f3d0}
.btn{
  height:48px; padding:0 16px; border-radius:12px; border:1px solid var(--border);
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  color:#082016; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn:hover{filter:brightness(1.06)}

/* hübscher „Zurück“-Button (verify) */
.back-row{display:flex; justify-content:flex-start; margin:14px auto 0; max-width:520px}
.btn.back{
  background:rgba(16,185,129,.10);
  border:1px solid rgba(52,211,153,.55);
  color:#c8ffee;
  box-shadow: 0 0 0 0 rgba(16,185,129,.0);
  transition: box-shadow .2s ease, transform .1s ease;
}
.btn.back:hover{
  box-shadow: 0 0 18px 2px rgba(16,185,129,.25);
  transform: translateY(-1px);
}

/* Ergebnisbanner */
.alert{padding:12px 14px; border-radius:12px; margin:10px auto; max-width:520px}
.alert.ok{background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.35)}
.alert.err{background:rgba(255,107,129,.12); border:1px solid rgba(255,107,129,.35)}

.result{
  padding:12px 14px; border-radius:12px; border:1px dashed var(--border);
  margin:12px auto; max-width:520px; text-align:center
}
.result.win{border-color:rgba(34,197,94,.7); background:linear-gradient(180deg, rgba(34,197,94,.12), rgba(167,243,208,.08))}
.result.lose{border-color:rgba(255,107,129,.7); background:rgba(255,107,129,.06)}

.footer{padding:28px 16px 24px; text-align:center; color:var(--muted)}

/* Links dezent türkis, nicht unterstrichen */
a {
  color: #34d399;
  text-decoration: none;
  transition: color .2s ease, filter .2s ease;
}
a:hover { filter: brightness(1.15); }
a:visited { color: #34d399; }
.footer a { margin: 0 6px; }

/* Ziehungs-Reel-Klassen bleiben vorhanden, aber result.php ist entfernt */
.reel{display:none}

.back-row{display:flex; justify-content:center; margin:14px auto 0; max-width:520px}