:root {
  --bg: #050b14;
  --panel: #0c1826;
  --cyan: #34e5ff;
  --cyan-dim: #1a5f6e;
  --text: #d9f4ff;
  --danger: #ff3b5c;
  color-scheme: dark;
}

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

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#app {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* HUD ~7% */
#hud {
  flex: 0 0 7vh; display: flex; align-items: center; gap: 10px;
  padding: 0 10px; font-size: 13px; background: var(--panel);
  border-bottom: 1px solid var(--cyan-dim);
}
#hud .res { color: var(--cyan); white-space: nowrap; }
#hud .res b { color: var(--text); font-weight: 600; margin-left: 2px; }
#sol-label { margin-left: auto; letter-spacing: 1px; color: var(--cyan); font-size: 12px; }
#alarm-bar {
  width: 60px; height: 8px; background: #1a2634; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--cyan-dim);
}
#alarm-fill { height: 100%; width: 0%; background: var(--danger); transition: width .6s ease; }

/* Spielfeld ~40% */
#field { flex: 0 0 40vh; position: relative; background: radial-gradient(ellipse at 50% 30%, #0e2233, #050b14 70%); }
#hexmap { width: 100%; height: 100%; display: block; }

/* Entscheidungstext ~17% */
#decision-text {
  flex: 0 0 17vh; padding: 10px 14px; overflow-y: auto;
  font-size: 15px; line-height: 1.4; background: var(--panel);
  border-top: 1px solid var(--cyan-dim); border-bottom: 1px solid var(--cyan-dim);
}
.com-tag { color: var(--cyan); font-weight: 700; margin-right: 6px; }

/* Buttons ~24% */
#buttons {
  flex: 0 0 24vh; display: flex; flex-direction: column; gap: 8px;
  padding: 10px 14px; padding-right: 108px; overflow-y: auto;
}
.choice-btn {
  width: 100%; min-height: 52px; text-align: left; border-radius: 10px;
  background: linear-gradient(180deg, #123246, #0c2230);
  border: 1px solid var(--cyan-dim); color: var(--text);
  font-size: 14px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px;
}
.choice-btn:active { background: var(--cyan-dim); }
.choice-btn:disabled { opacity: .4; }
.choice-btn .chips { font-size: 11px; color: var(--cyan); }

/* Avatar */
#avatar-wrap {
  position: absolute; right: 8px; bottom: 13vh; width: 92px; height: 130px;
  z-index: 5; pointer-events: none;
}
#avatar-placeholder {
  position: relative; width: 100%; height: 100%;
  border-radius: 46px 46px 30px 30px;
  background: radial-gradient(ellipse at 50% 35%, rgba(52,229,255,.35), rgba(52,229,255,.05) 70%);
  filter: drop-shadow(0 0 14px rgba(52,229,255,.5));
}
#avatar-placeholder .ring {
  position: absolute; inset: -6px; border-radius: 50px;
  border: 2px solid rgba(52,229,255,.4); animation: pulse-ring 3s infinite ease-in-out;
  z-index: 2; pointer-events: none;
}
#avatar-placeholder .avatar-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; border-radius: 46px 46px 30px 30px;
  transition: filter .3s ease;
}
#avatar-placeholder.speaking .avatar-img { animation: talk-glow .28s infinite ease-in-out; }
/* Fallback-Visor/Mund (nur sichtbar, falls das echte Avatarbild fehlt) */
#avatar-placeholder .visor, #avatar-placeholder .mouth { display: none; }
#avatar-placeholder.no-avatar .visor {
  display: block; position: absolute; top: 30%; left: 20%; right: 20%; height: 14px;
  background: var(--cyan); border-radius: 6px; box-shadow: 0 0 12px var(--cyan);
}
#avatar-placeholder.no-avatar .mouth {
  display: block; position: absolute; top: 55%; left: 35%; right: 35%; height: 6px;
  background: rgba(52,229,255,.6); border-radius: 3px; transform: scaleY(1);
  transition: transform .12s ease;
}
#avatar-placeholder.no-avatar.speaking .mouth { animation: talk .28s infinite ease-in-out; }
#avatar-placeholder.emotion-skeptical .avatar-img { filter: sepia(.4) hue-rotate(-30deg) saturate(1.6); }
#avatar-placeholder.emotion-concerned .avatar-img,
#avatar-placeholder.emotion-surprised .avatar-img { filter: hue-rotate(120deg) saturate(1.4); }
#avatar-placeholder.emotion-skeptical.no-avatar .visor { background: #ffcf5c; box-shadow: 0 0 12px #ffcf5c; }
#avatar-placeholder.emotion-concerned.no-avatar .visor,
#avatar-placeholder.emotion-surprised.no-avatar .visor { background: var(--danger); box-shadow: 0 0 12px var(--danger); }
@keyframes talk-glow { 0%,100% { filter: brightness(1);} 50% { filter: brightness(1.35);} }
#avatar-placeholder.emotion-excited .visor,
#avatar-placeholder.emotion-friendly .visor,
#avatar-placeholder.emotion-confident .visor { background: #7dffb0; box-shadow: 0 0 12px #7dffb0; }

@keyframes pulse-ring { 0%,100% { opacity:.3; transform:scale(1);} 50% { opacity:.8; transform:scale(1.04);} }
@keyframes talk { 0%,100% { transform: scaleY(1);} 50% { transform: scaleY(2.4);} }

/* Bottom bar ~12% */
#bottom-bar {
  flex: 0 0 12vh; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--panel); border-top: 1px solid var(--cyan-dim);
}
#play-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--cyan);
  background: transparent; color: var(--cyan); font-size: 16px; flex: 0 0 auto;
}
#play-btn.playing { background: var(--cyan); color: #04141c; animation: pulse-ring 2s infinite; }
#text-input {
  flex: 1 1 auto; min-width: 0; height: 40px; border-radius: 20px; border: 1px solid var(--cyan-dim);
  background: #0a1622; color: var(--text); padding: 0 14px; font-size: 14px;
}
#mic-btn, #send-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--cyan-dim);
  background: #0a1622; color: var(--cyan); font-size: 16px; flex: 0 0 auto;
}
#mic-btn.listening { background: var(--danger); color: white; }

/* Overlays */
#start-overlay, #end-overlay {
  position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: rgba(2,8,14,.94); text-align: center; padding: 24px;
}
#start-overlay[hidden], #end-overlay[hidden] { display: none; }
#start-card h1, #end-card h1 { color: var(--cyan); font-size: 22px; letter-spacing: 1px; }
#start-card p { font-size: 14px; opacity: .8; line-height: 1.6; }
#start-btn, #restart-btn {
  margin-top: 20px; padding: 14px 22px; border-radius: 24px; border: 2px solid var(--cyan);
  background: transparent; color: var(--cyan); font-size: 15px;
}