:root{ --bg: #0b0b0b; --fg:#eee; --muted:#aaa; --line:#222 }
*{ box-sizing: border-box }
html,body{ height:100%; margin:0; background:var(--bg); color:var(--fg); font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif }
header{ position:sticky; top:0; backdrop-filter:saturate(180%) blur(8px); background:#1118; border-bottom:1px solid var(--line); padding:10px 14px; display:flex; gap:10px; align-items:center}
main{ display:grid; grid-template-columns:1fr 340px; gap:16px; padding:14px; }
@media (max-width: 900px){ main{ grid-template-columns:1fr } }
#game-root{ width:100%; height:70vh; border:1px solid var(--line); border-radius:14px; overflow:hidden }
.panel{ border:1px solid var(--line); border-radius:14px; padding:12px }
input,button{ padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:transparent; color:var(--fg) }
button{ cursor:pointer }
form{ display:grid; gap:8px; grid-template-columns:1fr auto; align-items:center }
#name{ grid-column:1 / span 1 }
#score{ grid-column:1 / span 1 }
form button{ grid-column:2; align-self:stretch }
.hr{ height:1px; background:var(--line); margin:12px 0 }
.panel ol{ padding-left:20px; margin:8px 0 0 }
footer{ border-top:1px solid var(--line); padding:10px 14px; color:var(--muted) }
a{ color:inherit }
header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: #050505;
  box-shadow: 0 2px 6px #00ffff33;
}
header .nav { margin-left: auto; display: flex; gap: 14px; }
header .nav a { color: #9ff; text-decoration: none; opacity: .85; }
header .nav a:hover { opacity: 1; text-decoration: underline; }

.app-icon {
  width: 36px; height: 36px; border-radius: 8px;
  box-shadow: 0 0 10px #00ffff55; object-fit: cover;
}
main #game-root { width: 100vw; height: 70vh; } /* anpassen, wenn vollflächig gewünscht */

.legal { padding: 24px 16px; max-width: 1000px; margin: 0 auto; }
.legal h2 { color: #0ff; margin-top: 24px; }
.legal h3 { color: #8ff; margin-top: 18px; }
.legal p, .legal li { line-height: 1.5; }
.legal .note { color: #bbb; font-size: .9rem; }
header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #050505;
  box-shadow: 0 2px 6px #00ffff33;
}
header .nav {
  margin-left: auto;
  display: flex;
  gap: 14px;
}
header .nav a {
  color: #9ff;
  text-decoration: none;
  opacity: 0.85;
}
header .nav a:hover {
  opacity: 1;
  text-decoration: underline;
}
.app-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  box-shadow: 0 0 10px #00ffff55;
  object-fit: cover;
}
.legal {
  padding: 24px 16px;
  max-width: 900px;
  margin: 0 auto;
  color: #eee;
  line-height: 1.6;
}
.legal h2 {
  color: #00ffff;
  margin-top: 24px;
  font-size: 1.4rem;
}
.legal h3 {
  color: #7ff;
  margin-top: 18px;
  font-size: 1.2rem;
}
.legal a {
  color: #0ff;
  text-decoration: underline;
}
.legal ul {
  margin: 0.5em 0 1em 1.4em;
}
.legal .note {
  color: #999;
  font-size: 0.9rem;
  margin-top: 20px;
  border-top: 1px solid #222;
  padding-top: 8px;
}
#game-root {
  width: 100%;
  height: 70vh;           /* ggf. 100vh - Headerhöhe, wenn du Fullscreen willst */
  background: #0a0a0a;
  border: 1px solid #111;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 #0b2d2d;
}

#start-wrap {
  display: grid;
  place-items: center;
  height: 20vh;           /* steht über dem Canvas; passe an, falls du mehr Platz willst */
  padding: 16px 0;
}

#start-btn {
  appearance: none;
  background: linear-gradient(180deg, #00ffff 0%, #00baba 100%);
  color: #001b1b;
  font: 600 18px/1.2 system-ui, sans-serif;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  box-shadow: 0 6px 18px #00ffff33, inset 0 1px 0 #ffffffaa;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
#start-btn:hover { filter: brightness(1.05); }
#start-btn:active { transform: translateY(1px) scale(.99); }
/* --- Mobile Fullscreen beim Spielen (ohne Layout sonst zu ändern) --- */
/* === Mobile Fullscreen nur während des Spiels ========================== */
:root { --vh: 1vh; }  /* iOS-Fallback für 100vh */

body.playing { overflow: hidden; background: #000; }

/* Header/Legal ausblenden, Grid-Padding weg */
body.playing header,
body.playing .legal,
body.playing #start-wrap { display: none !important; }
body.playing main { padding: 0 !important; }

/* Spielfeld wirklich fullscreen (inkl. Notch / URL-Bar) */
body.playing #game-root{
  position: fixed !important;
  top:    env(safe-area-inset-top);
  right:  env(safe-area-inset-right);
  bottom: env(safe-area-inset-bottom);
  left:   env(safe-area-inset-left);
  width: 100vw !important;

  /* Höhe – Fallback + moderne Units */
  height: calc(var(--vh, 1vh) * 100) !important;  /* iOS-Fallback */
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: #000; z-index: 1;
}

/* Moderne Browser: echte Viewport-Höhen */
@supports (height: 100dvh) { body.playing #game-root { height: 100dvh !important; } }
@supports (height: 100svh) { body.playing #game-root { height: 100svh !important; } }

/* iOS-Extras für 100%-Höhe und kein Pull-to-Refresh */
html, body { height: -webkit-fill-available; }
body.playing { overscroll-behavior: none; touch-action: none; }

/* Fallback für ältere iOS-WebViews */
@supports (-webkit-touch-callout: none) {
  body.playing #game-root { height: -webkit-fill-available !important; }
}
/* Phaser-Canvas immer voll im Container und sichtbar */
/* Phaser-Canvas immer sichtbar und so groß wie der Container */
body.playing #game-root { z-index: 9999 !important; }
body.playing #game-root canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;   /* <- verhindert 0px Höhe */
}