:root{
  --bg:#0b1f17;
  --bg-soft:#112a20;
  --fg:#e6f5ec;
  --fg-muted:#9fc7b2;
  --accent:#4ade80;
  --border:#1f3a2d;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:820px;margin:0 auto;padding:2.5rem 1.25rem 4rem}
header.site{padding:1.5rem 1.25rem 0;max-width:820px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
header.site .brand{font-weight:700;font-size:1.25rem;letter-spacing:-.01em}
header.site .brand .dot{color:var(--accent)}
header.site nav a{margin-left:1.25rem;color:var(--fg-muted);font-size:.95rem}
header.site nav a:hover{color:var(--fg)}
h1{font-size:clamp(1.9rem,5vw,3rem);letter-spacing:-.02em;margin:0 0 .5rem}
h2{font-size:1.35rem;margin:2rem 0 .5rem;color:var(--fg)}
p{margin:.5rem 0 1rem}
.lead{color:var(--fg-muted);font-size:1.1rem;margin-bottom:2rem}
.tips{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.tips li{background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;padding:1rem 1.25rem}
.tips li h3{margin:0 0 .25rem;font-size:1.05rem}
.tips li p{margin:0;color:var(--fg-muted);font-size:.98rem}
footer.site{border-top:1px solid var(--border);margin-top:3rem;padding:1.5rem 1.25rem;max-width:820px;margin-left:auto;margin-right:auto;color:var(--fg-muted);font-size:.9rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer.site a{color:var(--fg-muted)}
footer.site a:hover{color:var(--fg)}
.legal h2{margin-top:1.75rem}
.legal p, .legal li{color:var(--fg-muted)}
.legal ul{padding-left:1.25rem}
.legal .meta{font-size:.9rem;color:var(--fg-muted);margin-bottom:2rem}

/* --- Game: Energie-Ninja --- */
.ninja-hero{width:180px;margin:0 auto 1rem}
.ninja-hero.small{width:90px;margin:0 auto .5rem}
.ninja-hero svg,.scenario-ninja svg{width:100%;height:auto;display:block}

#form-start{display:flex;flex-direction:column;gap:.75rem;max-width:320px;margin:1.5rem auto}
#form-start label{font-size:.9rem;color:var(--fg-muted)}
#form-start input[type=text]{background:var(--bg-soft);border:1px solid var(--border);color:var(--fg);padding:.75rem 1rem;border-radius:8px;font:inherit;width:100%}
#form-start input[type=text]:focus{outline:2px solid var(--accent);outline-offset:1px}

button{background:var(--accent);color:#0b1f17;border:none;padding:.75rem 1rem;font:inherit;font-weight:600;border-radius:8px;cursor:pointer}
button:hover{background:#22c55e}
button:disabled{cursor:default}
.btn-secondary{background:transparent!important;color:var(--fg-muted)!important;border:1px solid var(--border)!important}
.btn-secondary:hover{background:var(--bg-soft)!important;color:var(--fg)!important}

.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;padding:.75rem;margin-bottom:1.25rem}
.hud-stat{display:flex;flex-direction:column;align-items:center;gap:.15rem}
.hud-label{font-size:.7rem;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.06em}
.hud-val{font-weight:700;font-size:1rem}

.scenario-card{background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:1.5rem}
.scenario-ninja{position:relative;width:110px;margin:0 auto 1rem}
.speech-bubble{position:absolute;top:-10px;left:120%;background:#e6f5ec;color:#0b1f17;padding:.6rem .85rem;border-radius:10px;font-size:.88rem;max-width:240px;min-width:180px;box-shadow:0 4px 14px rgba(0,0,0,.35);animation:bubble .18s ease-out;line-height:1.4}
.speech-bubble::before{content:'';position:absolute;left:-10px;top:16px;width:0;height:0;border:6px solid transparent;border-right-color:#e6f5ec}
@keyframes bubble{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
@media (max-width:720px){.speech-bubble{position:static;margin:.75rem auto 0;max-width:none;width:100%}.speech-bubble::before{display:none}}

.scenario-day{color:var(--fg-muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;text-align:center}
.scenario-card h2{margin:.3rem 0 .5rem;text-align:center;font-size:1.4rem}
.scenario-card header p{text-align:center;color:var(--fg-muted);margin:0 0 1.25rem}

.options{display:grid;gap:.6rem}
.option-btn{background:var(--bg);border:1px solid var(--border);color:var(--fg);text-align:left;padding:.9rem 1rem;border-radius:8px;cursor:pointer;font:inherit;font-weight:500;transition:border-color .12s,background .12s}
.option-btn:hover:not(:disabled){border-color:var(--accent);background:#13271c}
.option-btn:disabled{opacity:.45}
.option-btn.chosen{border-color:var(--accent);background:rgba(74,222,128,.12);opacity:1}
.option-btn.chosen::before{content:"\2713  ";color:var(--accent);font-weight:700}

.continue-wrap{margin-top:1.25rem;text-align:right}
#btn-continue{padding:.6rem 1.1rem}

.end-stats{text-align:center;margin:1.5rem 0 2rem}
.big-number-val{font-size:clamp(2.25rem,7vw,3.5rem);font-weight:800;letter-spacing:-.02em;color:var(--accent);line-height:1.1}
.big-number-label{color:var(--fg-muted);margin-top:.25rem}
.end-breakdown{list-style:none;padding:0;margin:1.25rem auto 0;max-width:360px;background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.end-breakdown li{display:flex;justify-content:space-between;padding:.55rem .9rem;border-bottom:1px solid var(--border);color:var(--fg-muted)}
.end-breakdown li:last-child{border-bottom:none}
.end-breakdown li span:last-child{color:var(--fg);font-weight:600}

.end-highscore,.highscore-preview{margin-top:2rem}
.end-highscore h2,.highscore-preview h2{margin-bottom:.75rem}
.highscore-table{width:100%;border-collapse:collapse;background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.highscore-table th,.highscore-table td{padding:.55rem .8rem;text-align:left;border-bottom:1px solid var(--border);font-size:.95rem}
.highscore-table th{color:var(--fg-muted);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;background:var(--bg)}
.highscore-table tbody tr:last-child td{border-bottom:none}
.highscore-table tr.me td{background:rgba(74,222,128,.1);color:var(--accent);font-weight:700}
.highscore-empty{color:var(--fg-muted);text-align:center;padding:1rem;border:1px dashed var(--border);border-radius:10px}

.end-actions{display:flex;gap:.75rem;justify-content:center;margin-top:1.5rem;flex-wrap:wrap}

/* --- Landing-Page: Game-Teaser --- */
.game-teaser{background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:1.25rem 1.5rem;margin:2rem 0;display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap}
.game-teaser .teaser-ninja{width:80px;flex-shrink:0}
.game-teaser .teaser-ninja svg{width:100%;height:auto;display:block}
.game-teaser .teaser-text{flex:1;min-width:220px}
.game-teaser h2{margin:0 0 .4rem;font-size:1.2rem}
.game-teaser p{margin:0 0 .75rem;color:var(--fg-muted);font-size:.95rem}
.game-teaser a.btn-play{display:inline-block;background:var(--accent);color:#0b1f17;padding:.55rem 1rem;border-radius:8px;font-weight:600;text-decoration:none}
.game-teaser a.btn-play:hover{background:#22c55e;text-decoration:none}