:root {
  --bg: #05060d;
  --ink: #e8f1ff;
  --accent: #46e0ff;
  --hot: #ff3d6e;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: "Avenir Next Condensed", "DIN Condensed", "Arial Narrow", system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  overscroll-behavior: none;
}

body { position: fixed; inset: 0; }

#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

#hud {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: calc(env(safe-area-inset-left, 0px) + 14px);
  right: calc(env(safe-area-inset-right, 0px) + 14px);
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

#score { font-size: 30px; font-weight: 700; letter-spacing: 2px; text-shadow: 0 0 12px rgba(70, 224, 255, .7); }
#lives { flex: 1; font-size: 20px; letter-spacing: 4px; color: var(--hot); text-shadow: 0 0 10px rgba(255, 61, 110, .8); }

#mute {
  pointer-events: auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(70, 224, 255, .5);
  background: rgba(5, 6, 13, .5);
  color: var(--accent);
  font-size: 20px;
}
#mute.off { color: #56607a; border-color: #2a3147; text-decoration: line-through; }

#fire {
  position: absolute;
  right: calc(env(safe-area-inset-right, 0px) + 18px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  width: 92px; height: 92px;
  border-radius: 50%;
  border: 2px solid var(--hot);
  background: radial-gradient(circle at 50% 40%, rgba(255, 61, 110, .45), rgba(255, 61, 110, .1));
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2px;
  box-shadow: 0 0 22px rgba(255, 61, 110, .45);
  touch-action: none;
}
#fire.down { background: rgba(255, 61, 110, .75); transform: scale(.94); }
body:not(.playing) #fire { display: none; }

#overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: radial-gradient(ellipse at center, rgba(5, 6, 13, .35), rgba(5, 6, 13, .85));
  text-align: center;
}
body.playing #overlay { display: none; }

.panel { max-width: 340px; }

h1 {
  margin: 0 0 18px;
  font-size: 64px;
  line-height: .9;
  letter-spacing: 6px;
  font-weight: 800;
  text-shadow: 0 0 24px rgba(70, 224, 255, .8);
}
h1 em { font-style: normal; color: var(--hot); text-shadow: 0 0 24px rgba(255, 61, 110, .9); }

p { margin: 0 0 18px; font-size: 18px; line-height: 1.4; color: #b9c6e0; }
#result { font-size: 24px; color: var(--ink); }
#result b { color: var(--accent); }

#start {
  margin: 6px 0 22px;
  padding: 16px 54px;
  border: 2px solid var(--accent);
  background: rgba(70, 224, 255, .12);
  color: var(--ink);
  font: inherit;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 6px;
  box-shadow: 0 0 26px rgba(70, 224, 255, .45), inset 0 0 18px rgba(70, 224, 255, .2);
}
#start:active { background: rgba(70, 224, 255, .35); }

/* Ladebalken für den 5-fach-Laser */
#boost {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 58px);
  left: calc(env(safe-area-inset-left, 0px) + 14px);
  width: 120px; height: 8px;
  border: 1px solid rgba(70, 224, 255, .5);
  pointer-events: none;
}
#boost i {
  display: block;
  width: 100%; height: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
}
#boost span {
  position: absolute;
  left: 128px; top: -7px;
  font-size: 17px; font-weight: 700;
  color: #ffd84a;
  text-shadow: 0 0 10px rgba(255, 216, 74, .9);
  visibility: hidden;
}
#boost.active { border-color: #ffd84a; box-shadow: 0 0 12px rgba(255, 216, 74, .7); }
#boost.active i { background: #ffd84a; }
#boost.active span { visibility: visible; }
body:not(.playing) #boost { display: none; }

/* Startformular mit Pilotenname */
body.over h1 { font-size: 34px; letter-spacing: 4px; margin-bottom: 10px; }
body.over h1 br { display: none; }
body.over .hint, body.over #message { display: none; }
body.over #result { margin-bottom: 10px; }

#startform { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 0 18px; }
#startform label { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: #6f7c99; }
#name {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--accent);
  border-radius: 0;
  background: rgba(5, 6, 13, .7);
  color: var(--ink);
  font: inherit;
  font-size: 20px;   /* ab 16px zoomt iOS beim Fokussieren nicht */
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
  -webkit-user-select: text;
  user-select: text;
}
#name::placeholder { color: #56607a; text-transform: none; letter-spacing: 1px; }
#name.missing { border-color: var(--hot); animation: shake .35s; }
#start { margin: 8px 0 0; }
#start:disabled { opacity: .35; box-shadow: none; }

/* Hiscore-Liste */
#board[hidden], #scorestatus[hidden] { display: none; }
#board h2 { margin: 0 0 6px; font-size: 14px; letter-spacing: 5px; color: #ffd84a; text-shadow: 0 0 10px rgba(255, 216, 74, .6); }
#scorestatus { margin: 4px 0 0; font-size: 13px; color: #6f7c99; }

#scores {
  list-style: none;
  margin: 0 0 14px; padding: 0;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
#scores li { display: flex; gap: 10px; padding: 2px 6px; color: #b9c6e0; }
#scores li span:nth-child(1) { width: 22px; text-align: right; color: #6f7c99; }
#scores li span:nth-child(2) { flex: 1; letter-spacing: 2px; }
#scores li.me { color: #fff; background: rgba(70, 224, 255, .16); text-shadow: 0 0 10px rgba(70, 224, 255, .8); }
#scores li.wait { font-style: italic; }
#scores li span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Startbildschirm-Animation: Titel fliegt ein und pulsiert, der Rest blendet nacheinander auf */
body:not(.over) h1 .t1 { display: inline-block; animation: fly-left .9s cubic-bezier(.2, .9, .3, 1.2) both, pulse-blue 3s 1s ease-in-out infinite; }
body:not(.over) h1 .t2 { display: inline-block; animation: fly-right .9s .25s cubic-bezier(.2, .9, .3, 1.2) both, pulse-red 3s 1.5s ease-in-out infinite; }
body:not(.over) #message, body:not(.over) #startform, body:not(.over) #board, body:not(.over) .hint { animation: fade-up .6s both; }
body:not(.over) #message { animation-delay: .7s; }
body:not(.over) #startform { animation-delay: .9s; }
body:not(.over) #board { animation-delay: 1.1s; }
body:not(.over) .hint { animation-delay: 1.3s; }

@keyframes fly-left { from { transform: translateX(-120vw) skewX(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fly-right { from { transform: translateX(120vw) skewX(25deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse-blue { 50% { text-shadow: 0 0 40px rgba(70, 224, 255, 1), 0 0 8px #fff; } }
@keyframes pulse-red { 50% { text-shadow: 0 0 40px rgba(255, 61, 110, 1), 0 0 8px #fff; } }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

.hint { font-size: 14px; color: #6f7c99; letter-spacing: 1px; }
@media (hover: none) { .desktop { display: none; } }