:root {
  --bg: #050814;
  --panel: rgba(5, 12, 28, 0.76);
  --line: rgba(76, 230, 255, 0.75);
  --text: #d8f7ff;
  --muted: #86a8b9;
  --accent: #5fffea;
  --danger: #ff4f81;
  --warning: #ffd166;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  background: radial-gradient(circle at center, #101a3a 0%, var(--bg) 62%, #02030a 100%);
  color: var(--text);
}

.game-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  background:
    radial-gradient(circle at 20% 20%, rgba(95,255,234,0.10), transparent 26%),
    radial-gradient(circle at 78% 75%, rgba(255,79,129,0.08), transparent 28%),
    linear-gradient(180deg, rgba(10,18,42,0.72), rgba(2,5,14,1));
}

#gameCanvas {
  display: block;
  width: 100vw;
  height: 100vh;
  image-rendering: pixelated;
}

.hud-panel {
  position: absolute;
  z-index: 5;
  padding: 12px 14px;
  border: 1px solid rgba(95,255,234,0.28);
  background: var(--panel);
  box-shadow: 0 0 22px rgba(95,255,234,0.10), inset 0 0 18px rgba(95,255,234,0.04);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  text-shadow: 0 0 12px rgba(95,255,234,0.45);
  pointer-events: none;
}
.top-left { top: 18px; left: 18px; }
.top-right { top: 18px; right: 18px; text-align: right; font-size: 13px; color: var(--muted); }
.bottom-right { bottom: 18px; right: 18px; text-align: right; font-size: 13px; color: var(--muted); max-width: 390px; }
.bottom-left { bottom: 18px; left: 18px; max-width: 420px; }
.brand { font-size: 22px; color: var(--accent); font-weight: 800; letter-spacing: 0.04em; }
.sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.node-title { color: var(--warning); font-weight: 800; margin-bottom: 4px; }
.node-desc { color: var(--muted); line-height: 1.35; }

.node-hover-info {
  position: fixed;
  z-index: 8;
  width: min(280px, calc(100vw - 28px));
  padding: 10px 12px 11px;
  border: 1px solid rgba(95,255,234,0.34);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(5,12,28,0.88), rgba(13,26,52,0.76));
  box-shadow: 0 0 24px rgba(95,255,234,0.16), inset 0 0 18px rgba(95,255,234,0.05);
  backdrop-filter: blur(9px);
  color: var(--text);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0) scale(0.97);
  transition: opacity 120ms ease, transform 120ms ease;
  text-shadow: 0 0 10px rgba(95,255,234,0.32);
}
.node-hover-info.is-visible {
  opacity: 1;
  transform: translate3d(var(--hover-x), var(--hover-y), 0) scale(1);
}
.node-hover-info[data-state="locked"] {
  border-color: rgba(255,79,129,0.42);
  box-shadow: 0 0 24px rgba(255,79,129,0.16), inset 0 0 18px rgba(255,79,129,0.05);
}
.node-hover-info[data-state="boss"] {
  border-color: rgba(255,209,102,0.46);
  box-shadow: 0 0 24px rgba(255,209,102,0.14), inset 0 0 18px rgba(255,209,102,0.05);
}
.hover-kicker {
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.node-hover-info[data-state="locked"] .hover-kicker { color: var(--danger); }
.node-hover-info[data-state="boss"] .hover-kicker { color: var(--warning); }
.hover-title {
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}
.hover-meta {
  margin-top: 4px;
  color: var(--warning);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.hover-desc {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0.16;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
}
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(circle at center, transparent 42%, rgba(0,0,0,0.52) 100%);
}

@media (max-width: 760px) {
  .top-right, .bottom-right { display: none; }
  .brand { font-size: 17px; }
  .hud-panel { padding: 10px 11px; font-size: 12px; }
}

#gameCanvas { cursor: default; }
#gameCanvas.is-panning { cursor: grabbing; }


.top-right{
  top:20px;
  right:20px;
  min-width:180px;
  text-align:right;
}

.top-right strong{
  letter-spacing:4px;
  font-size:20px;
}


/* Level-HUD wirklich nur im Level anzeigen. Auf der Map hat das Ding nichts verloren. */
body:not([data-mode="level"]) #levelHud,
body[data-mode="map"] #levelHud{
  display:none !important;
}
body[data-mode="level"] #mapTitleHud,
body[data-mode="level"] #mapControlsHud,
body[data-mode="level"] #nodeInfo,
body[data-mode="level"] #nodeHoverInfo{
  display:none !important;
}
body[data-mode="level"] #levelHud{
  display:block !important;
}

.top-center-editor{top:18px;left:50%;transform:translateX(-50%);pointer-events:auto;}
.top-center-editor a{color:var(--warning);text-decoration:none;font-weight:800;}
body[data-mode="level"] .top-center-editor{display:none!important;}

.editor-link-panel{
  top:18px;
  right:18px;
  pointer-events:auto;
}
.editor-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:190px;
  color:#071020;
  text-decoration:none;
  font-weight:900;
  letter-spacing:.03em;
  background:linear-gradient(135deg, var(--accent), #ffd166);
  border-radius:10px;
  padding:10px 12px;
  box-shadow:0 0 18px rgba(95,255,234,.25);
  text-shadow:none;
}
.editor-link:hover{
  filter:brightness(1.08);
}
body.level-mode #editorLinkHud{
  display:none;
}
body.level-mode #levelHud{
  display:block;
}
body:not(.level-mode) #levelHud{
  display:none;
}

.login-panel{left:18px;bottom:18px;top:auto;min-width:260px;max-width:420px;z-index:30}.session-title{font-size:11px;text-transform:uppercase;color:rgba(216,247,255,.62);margin-bottom:7px}.login-flash{border:1px solid rgba(255,209,102,.85);background:linear-gradient(135deg,#ffd166,#ff8c42);color:#06101f;border-radius:10px;padding:9px 16px;font-weight:900;cursor:pointer;box-shadow:0 0 18px rgba(255,209,102,.55);animation:loginPulse 1s infinite alternate}.session-info{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.session-info.hidden,.login-modal.hidden{display:none}.session-info span{color:#ffd166;font-weight:800}.session-info button,.login-dialog button{border:1px solid rgba(95,255,234,.25);background:rgba(8,18,38,.88);color:#d8f7ff;border-radius:8px;padding:6px 9px;cursor:pointer}@keyframes loginPulse{from{transform:scale(1);filter:brightness(1)}to{transform:scale(1.045);filter:brightness(1.2)}}.login-modal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.58);display:grid;place-items:center}.login-dialog{width:min(440px,calc(100vw - 32px));background:rgba(8,18,38,.98);border:1px solid rgba(95,255,234,.32);border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.55);overflow:hidden}.login-dialog-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:rgba(95,255,234,.08);color:#5fffea}.login-dialog-head button{font-size:20px;line-height:1}.login-dialog-body{padding:16px;color:#d8f7ff}.login-dialog-body p{margin:0 0 14px;color:rgba(216,247,255,.72)}.login-dialog-body label{display:block;margin:10px 0;font-size:12px;text-transform:uppercase;color:rgba(216,247,255,.72)}.login-dialog-body input{width:100%;box-sizing:border-box;margin-top:6px;border:1px solid rgba(95,255,234,.22);border-radius:10px;background:#06101f;color:#fff;padding:10px 11px;font:16px monospace}.login-error{min-height:20px;color:#ff4f81;font-weight:700;margin:8px 0}.btn.primary{background:linear-gradient(135deg,#5fffea,#31d27c)!important;color:#06101f!important;font-weight:900!important}.result-modal{position:fixed;inset:0;z-index:190;background:rgba(0,0,0,.56);display:grid;place-items:center}.result-modal.hidden{display:none}.result-box{width:min(520px,calc(100vw - 32px));border:1px solid rgba(255,209,102,.45);background:rgba(8,18,38,.98);border-radius:18px;padding:18px;box-shadow:0 24px 80px rgba(0,0,0,.6);color:#d8f7ff}.result-box h2{margin:0 0 10px;color:#ffd166}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.result-grid div{background:rgba(95,255,234,.07);border:1px solid rgba(95,255,234,.16);border-radius:10px;padding:10px}.result-box button{border:0;border-radius:10px;padding:10px 14px;background:linear-gradient(135deg,#ffd166,#ff8c42);color:#06101f;font-weight:900;cursor:pointer}


/* Login/Profile needs real pointer events although HUD panels are normally passive overlays. */
.login-panel, .login-panel * { pointer-events: auto; }
.login-modal, .login-modal * { pointer-events: auto; }


/* Im laufenden Level nur Spiel-HUD anzeigen, kein Spielerprofil von der Map. */
body[data-mode="level"] #sessionPanel{
  display:none!important;
}



/* Alter Infobereich links unten wird nicht mehr angezeigt; dort sitzt jetzt das Spielerprofil. */
#nodeInfo{
  display:none!important;
}

/* Spielerprofil sitzt unten links auf der Map und bleibt im Level ausgeblendet. */
body:not([data-mode="level"]) #sessionPanel{
  display:block;
}
body[data-mode="level"] #sessionPanel{
  display:none!important;
}

/* Vorschaltseite / Spielwiese-Einstieg */
body.splash-page{
  min-height:100vh;
  overflow:auto;
  background:
    radial-gradient(circle at 18% 8%, rgba(95,255,234,.16), transparent 28%),
    radial-gradient(circle at 85% 30%, rgba(255,79,129,.12), transparent 28%),
    linear-gradient(180deg,#050814,#091127 48%,#03050d);
}
.splash-shell{
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
  padding:42px 0 60px;
}
.splash-hero,
.splash-card{
  border:1px solid rgba(95,255,234,.25);
  background:linear-gradient(135deg,rgba(5,12,28,.86),rgba(14,31,60,.72));
  border-radius:24px;
  box-shadow:0 24px 80px rgba(0,0,0,.34), inset 0 0 32px rgba(95,255,234,.04);
  backdrop-filter:blur(10px);
}
.splash-hero{
  padding:34px;
  margin-bottom:22px;
  position:relative;
  overflow:hidden;
}
.splash-hero:before{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(90deg,transparent,rgba(95,255,234,.13),transparent);
  transform:translateX(-70%);
  animation:splashScan 5s infinite linear;
  pointer-events:none;
}
@keyframes splashScan{to{transform:translateX(70%)}}
.splash-kicker{
  color:var(--warning);
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  margin-bottom:10px;
}
.splash-hero h1{
  margin:0;
  font-size:clamp(38px,6vw,76px);
  color:var(--accent);
  text-shadow:0 0 26px rgba(95,255,234,.45);
}
.splash-lead{
  max-width:850px;
  color:rgba(216,247,255,.84);
  line-height:1.65;
  font-size:17px;
}
.splash-note{
  color:rgba(216,247,255,.62);
  max-width:860px;
  line-height:1.55;
  margin:18px 0 0;
}
.splash-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}
.splash-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 20px;
  border-radius:14px;
  text-decoration:none;
  font-weight:900;
  letter-spacing:.03em;
}
.splash-btn.primary{
  background:linear-gradient(135deg,var(--accent),#31d27c);
  color:#06101f;
  box-shadow:0 0 28px rgba(95,255,234,.26);
}
.splash-btn.secondary{
  border:1px solid rgba(255,209,102,.42);
  color:#ffd166;
  background:rgba(255,209,102,.07);
}
.splash-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;}
.splash-card{padding:26px;}
.splash-card h2{color:var(--accent);margin:0 0 18px;font-size:25px;}
.splash-card h3{color:var(--warning);margin:22px 0 8px;font-size:16px;}
.splash-card p,.splash-card li{color:rgba(216,247,255,.78);line-height:1.55;}
.splash-card ul{padding-left:20px;}
.splash-card code{color:#fff;background:rgba(95,255,234,.1);border:1px solid rgba(95,255,234,.16);border-radius:6px;padding:1px 5px;}
.playground-back{
  display:inline-flex;
  margin-bottom:8px;
  padding:7px 10px;
  border-radius:9px;
  background:linear-gradient(135deg,rgba(255,209,102,.95),rgba(255,140,66,.95));
  color:#06101f;
  text-decoration:none;
  font-weight:900;
  box-shadow:0 0 16px rgba(255,209,102,.35);
}
@media (max-width:900px){.splash-grid{grid-template-columns:1fr}.splash-hero{padding:24px}.splash-card{padding:20px}}