/* =========================================================
   Schaltus – Landung auf Emmaus
   Gemeinsames Styling für Spiel-Menü, HUD und Bestenliste
   ========================================================= */
:root {
  --bg-1:#0a0e27;
  --bg-2:#141a3d;
  --accent:#5eead4;     /* Schaltus-Turquoise */
  --accent-2:#a78bfa;   /* violett (Emmaus) */
  --gold:#fbbf24;
  --text:#e6ebff;
  --muted:#9aa3c7;
  --panel:rgba(18,22,52,0.82);
}

* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body {
  font-family:'Trebuchet MS','Segoe UI',system-ui,sans-serif;
  color:var(--text);
  background:radial-gradient(ellipse at 50% 20%, #1a2150 0%, var(--bg-1) 70%);
  overflow:hidden;
}

/* Canvas */
#game { position:fixed; inset:0; width:100%; height:100%; display:block; }

/* Screens (Menü/Ergebnis/GameOver) */
.screen {
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:linear-gradient(160deg, rgba(8,10,30,.75), rgba(20,10,40,.85));
  z-index:20;
}
.hidden { display:none !important; }

/* Bewegende Sterne im Weltraum – Hintergrund der Startseite */
.menu-stars { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1;
  background:radial-gradient(ellipse at 50% 30%, #141a4d 0%, #070920 60%, #04050f 100%); }
.menu-stars::before { content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(122,92,255,.20), transparent 45%),
    radial-gradient(ellipse at 80% 20%, rgba(94,234,212,.16), transparent 45%); }
.mstar { position:absolute; border-radius:50%; box-shadow:0 0 6px rgba(255,255,255,.7);
  animation:mTwinkle 3s ease-in-out infinite, mDrift 45s linear infinite; }
@keyframes mTwinkle { 0%,100% { opacity:.25 } 50% { opacity:1 } }
@keyframes mDrift { from { transform:translate(0,0) } to { transform:translate(-70px,45px) } }
#menu .panel { position:relative; z-index:2; }

.panel {
  max-width:560px; width:100%;
  background:var(--panel);
  border:1px solid rgba(94,234,212,.35);
  border-radius:20px;
  padding:34px 38px;
  box-shadow:0 20px 60px rgba(0,0,0,.5), inset 0 0 40px rgba(94,234,212,.06);
  backdrop-filter:blur(6px);
  text-align:center;
}

.title {
  font-size:52px; letter-spacing:6px; margin:0 0 4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 30px rgba(167,139,250,.4);
}
.title.win { background:linear-gradient(90deg,var(--gold),var(--accent)); -webkit-background-clip:text; background-clip:text; }
.title.lose { background:linear-gradient(90deg,#f87171,var(--accent-2)); -webkit-background-clip:text; background-clip:text; }
.title.oracle { background:linear-gradient(90deg,var(--accent-2),var(--gold)); -webkit-background-clip:text; background-clip:text; }
.riddle-text { font-size:17px; line-height:1.8; font-style:italic; text-shadow:0 0 18px rgba(167,139,250,.5); }
.subtitle {
  margin:0 0 14px; color:var(--accent); letter-spacing:3px;
  text-transform:uppercase; font-size:14px; font-weight:bold;
}
.story { line-height:1.6; color:var(--text); font-size:15px; }

.controls-box {
  margin:18px auto; max-width:380px; text-align:left;
  background:rgba(255,255,255,.04); border-radius:12px; padding:14px 18px;
}
.controls-box h3 { margin:0 0 8px; color:var(--accent); font-size:13px; text-transform:uppercase; letter-spacing:2px; }

.code-box {
  margin:18px auto; max-width:380px; text-align:left;
  background:rgba(255,255,255,.04); border-radius:12px; padding:14px 18px;
}
.code-box h3 { margin:0 0 8px; color:var(--accent-2); font-size:13px; text-transform:uppercase; letter-spacing:2px; }
.code-hint { margin:8px 0 0; font-size:12.5px; line-height:1.6; color:var(--muted); }
#codeMsg { margin:8px 0 0; min-height:16px; font-size:13px; color:#fbbf24; text-align:center; }
.controls-box ul { margin:0; padding-left:18px; line-height:1.7; font-size:14px; color:var(--muted); }

.btn {
  display:inline-block; margin:10px auto; padding:13px 26px;
  font-size:16px; font-weight:bold; letter-spacing:1px;
  color:#08111a; background:linear-gradient(90deg,var(--accent),#7ef0d0);
  border:none; border-radius:40px; cursor:pointer;
  box-shadow:0 6px 20px rgba(94,234,212,.4);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(94,234,212,.55); }
.btn.ghost {
  background:transparent; color:var(--accent);
  border:1px solid var(--accent); box-shadow:none;
}

input[type=text] {
  width:100%; margin:8px 0 4px; padding:12px 16px;
  font-size:16px; color:var(--text);
  background:rgba(255,255,255,.06); border:1px solid rgba(94,234,212,.4);
  border-radius:10px; outline:none;
}
input[type=text]:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(94,234,212,.15); }
label { font-size:14px; color:var(--muted); }
.final-time { font-size:18px; margin:6px 0; }
#submitMsg { min-height:20px; color:var(--accent); font-size:14px; }

/* HUD */
#hud { position:fixed; top:0; left:0; right:0; z-index:15; pointer-events:none;
  display:flex; justify-content:space-between; padding:14px 20px; }

/* Level-Code-Anzeige unten rechts */
#levelCodeTag {
  position:fixed; bottom:18px; right:20px; z-index:15; pointer-events:none;
  background:var(--panel); border:1px solid rgba(94,234,212,.35);
  padding:9px 18px; border-radius:30px; font-size:14px; color:var(--muted);
  box-shadow:0 4px 14px rgba(0,0,0,.4); letter-spacing:.5px;
}
#levelCodeName { color:var(--accent); font-size:15px; margin-left:2px; }
.hud-box {
  background:var(--panel); border:1px solid rgba(94,234,212,.3);
  padding:8px 16px; border-radius:30px; font-size:15px; font-weight:bold;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}

/* ===================== BESTENLISTE (PHP-Seite) ===================== */
.lb-page {
  min-height:100vh; overflow:auto;
  display:flex; flex-direction:column; align-items:center;
  padding:40px 20px 60px;
}
.lb-header { text-align:center; margin-bottom:26px; }
.lb-header .title { font-size:40px; }
.lb-sub { color:var(--muted); letter-spacing:2px; text-transform:uppercase; font-size:13px; margin-top:6px; }

.lb-table-wrap { width:100%; max-width:520px; }
table.lb {
  width:100%; border-collapse:collapse;
  background:var(--panel); border-radius:16px; overflow:hidden;
  box-shadow:0 16px 44px rgba(0,0,0,.45);
}
table.lb th, table.lb td { padding:15px 18px; text-align:left; }
table.lb thead th {
  background:rgba(94,234,212,.12); color:var(--accent);
  font-size:12px; letter-spacing:2px; text-transform:uppercase;
}
table.lb tbody tr { border-top:1px solid rgba(255,255,255,.06); }
table.lb tbody tr:nth-child(odd) { background:rgba(255,255,255,.02); }
table.lb td.rank { font-weight:bold; color:var(--muted); width:48px; text-align:center; }
table.lb .name { font-weight:bold; }
table.lb .time { color:var(--accent); font-variant-numeric:tabular-nums; }

/* Podium-Highlight für Top 3 */
table.lb tbody tr.top1 td { background:rgba(251,191,36,.14); }
table.lb tbody tr.top1 .rank { color:var(--gold); font-size:18px; }
table.lb tbody tr.top2 td { background:rgba(200,215,225,.10); }
table.lb tbody tr.top3 td { background:rgba(200,120,60,.12); }

.empty { text-align:center; color:var(--muted); padding:40px 0; font-size:16px; }

.lb-form {
  margin-top:28px; width:100%; max-width:520px;
  background:var(--panel); border-radius:16px; padding:24px;
  box-shadow:0 16px 44px rgba(0,0,0,.4);
}
.lb-form h3 { margin:0 0 12px; color:var(--accent); letter-spacing:1px; }
.lb-form .row { display:flex; gap:12px; flex-wrap:wrap; }
.lb-form .row > div { flex:1; min-width:140px; }
.lb-form input[type=text], .lb-form input[type=number] {
  width:100%; padding:11px 14px; font-size:15px; color:var(--text);
  background:rgba(255,255,255,.06); border:1px solid rgba(94,234,212,.4);
  border-radius:10px; outline:none;
}
.lb-form input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(94,234,212,.15); }

.lb-msg { margin-top:12px; font-size:14px; min-height:18px; }
.lb-msg.ok { color:var(--accent); }
.lb-msg.err { color:#f87171; }

@media (max-width:560px) {
  .title { font-size:34px; letter-spacing:3px; }
  .panel { padding:26px 22px; }
}