* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #0d1a2a; color: #fff;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none;
}
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }
#bild { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

/* Knöpfe oben */
#oben {
  position: fixed; top: 0; left: 0; right: 0; display: flex; gap: 10px; align-items: center;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
  pointer-events: none; z-index: 5;
}
#oben .luecke { flex: 1; }
.rund {
  pointer-events: auto; width: clamp(56px, 10vmin, 72px); height: clamp(56px, 10vmin, 72px); border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.85); background: rgba(20, 40, 70, 0.55); font-size: clamp(24px, 4.6vmin, 34px);
  display: grid; place-items: center; padding: 0; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); transition: transform 0.12s;
}
.rund:active { transform: scale(0.92); }
#pippaknopf { background: radial-gradient(circle at 40% 35%, #fff6d6, #ffd36b 70%); border-color: #e03a2f; }
#pippaknopf canvas { width: 88%; height: 88%; }
#buchknopf.neu { animation: puls 1s ease-in-out infinite; border-color: #ffd84d; }
@keyframes puls { 50% { transform: scale(1.14); box-shadow: 0 0 18px #ffd84d; } }
body.beschaeftigt #zeigknopf, body.beschaeftigt #buchknopf { opacity: 0.55; }

/* Inventarleiste */
#inventar {
  --fach: clamp(52px, 9vmin, 84px);
  position: fixed; left: 50%; bottom: max(6px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; gap: 8px; padding: 7px 10px; min-width: calc(var(--fach) * 3); min-height: calc(var(--fach) + 18px);
  background: rgba(15, 20, 30, 0.55); border: 4px solid #8a5a2b; border-radius: 16px;
  box-shadow: inset 0 0 0 2px #c08a4d, 0 4px 10px rgba(0, 0, 0, 0.35); z-index: 4;
}
#inventar.leer { opacity: 0.6; }
.fach {
  width: var(--fach); height: var(--fach); border-radius: 12px; background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.35); touch-action: none;
}
.fach canvas { width: 100%; height: 100%; display: block; pointer-events: none; }
.fach.neu { animation: huepf 0.7s ease-out 2; }
@keyframes huepf { 30% { transform: translateY(-14px) scale(1.12); } 60% { transform: translateY(0) scale(0.96); } }
#zieh {
  position: fixed; left: 0; top: 0; width: clamp(64px, 12vmin, 104px); height: clamp(64px, 12vmin, 104px);
  pointer-events: none; z-index: 20; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.4));
}

/* Sprechblase */
#blase {
  position: fixed; left: 0; top: 0; max-width: min(64vw, 520px); padding: 0.5em 0.8em; z-index: 12;
  background: #fff; color: #2b2b2b; border-radius: 18px; border: 4px solid #2fa84f;
  font-size: clamp(16px, 3.2vmin, 26px); line-height: 1.25; font-weight: 600; pointer-events: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); animation: blaseRein 0.18s ease-out;
}
#blase.milo { border-color: #2fa84f; }
#blase.pippa { border-color: #e03a2f; }
#blase.gordon, #blase.phuong { border-color: #2f6fd6; }
#blase.wackelbart { border-color: #7cc8f2; }
#blase.erzaehler { border-color: #8a5a2b; }
@keyframes blaseRein { from { opacity: 0; transform: scale(0.8); } }

/* Dialog-Symbole */
#wahl {
  position: fixed; left: 50%; bottom: calc(clamp(52px, 9vmin, 84px) + 40px); transform: translateX(-50%);
  display: flex; gap: 14px; z-index: 11;
}
#wahl button {
  width: 72px; height: 72px; border-radius: 50%; font-size: 38px; background: #fff8e6; border: 4px solid #e03a2f;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); padding: 0; animation: blaseRein 0.2s ease-out;
}
#wahl button:active { transform: scale(0.9); }

/* Gedankenbuch */
#buch {
  position: fixed; inset: 0; background: rgba(5, 10, 20, 0.6); display: grid; place-items: center; z-index: 15;
}
#buch .seite {
  width: min(92vw, 640px); max-height: 86vh; overflow: auto; padding: 18px 22px 22px;
  background: linear-gradient(#fff8e4, #f3e3bd); color: #4a3418; border-radius: 18px;
  border: 6px solid #8a5a2b; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
#buch h2 { margin: 0 0 12px; text-align: center; font-size: clamp(22px, 4vmin, 32px); }
#buchliste { display: flex; flex-direction: column; gap: 10px; }
.eintrag {
  display: flex; align-items: center; gap: 14px; text-align: left; padding: 8px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.6); border: 3px solid #d9c08e; color: #4a3418; font-size: clamp(16px, 3vmin, 22px); font-weight: 600;
}
.eintrag canvas { width: clamp(48px, 9vmin, 64px); height: clamp(48px, 9vmin, 64px); flex: none; }
.eintrag.fertig { opacity: 0.7; }
.eintrag.fertig span { text-decoration: line-through; text-decoration-color: rgba(47, 168, 79, 0.8); text-decoration-thickness: 3px; }
.eintrag.fertig::after { content: "✔"; margin-left: auto; color: #2fa84f; font-size: 1.6em; }
.leer-text { text-align: center; opacity: 0.7; }

/* Bild groß (Flaschenpost) */
#gross { position: fixed; inset: 0; background: rgba(5, 10, 20, 0.7); display: grid; place-items: center; z-index: 10; }
#grossbild { width: min(84vw, 100vh); aspect-ratio: 4 / 3; max-height: 82vh; }
#gross .zu {
  position: fixed; right: 16px; top: 16px; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.9); color: #4a3418; font-size: 30px; font-weight: bold;
}
#gross.fertig .zu { animation: puls 1s ease-in-out infinite; }

/* Blende */
#schwarz { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.45s; z-index: 9; }
#schwarz.an { opacity: 1; }

/* Startbild */
#start {
  position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(rgba(10, 40, 80, 0.35), rgba(10, 30, 60, 0.15) 45%, rgba(40, 25, 5, 0.45));
}
#start .kopf { text-align: center; }
#titel {
  margin: 0; font-size: clamp(34px, 9vmin, 76px); line-height: 1; color: #ffd84d; letter-spacing: 0.02em;
  text-shadow: 0 3px 0 #b5561c, 0 6px 0 #6b2d0c, 0 8px 14px rgba(0, 0, 0, 0.5); transform: rotate(-2deg);
}
#untertitel { margin: 0.4em 0 0; font-size: clamp(16px, 4vmin, 30px); font-weight: bold; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); }
#start .mitte { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.los {
  width: clamp(84px, 20vmin, 140px); height: clamp(84px, 20vmin, 140px); border-radius: 50%; font-size: clamp(40px, 10vmin, 70px);
  background: radial-gradient(circle at 40% 35%, #7fe08f, #2fa84f 70%); border: 5px solid #fff; padding-left: 0.15em;
  box-shadow: 0 6px 0 #1d7a37, 0 10px 20px rgba(0, 0, 0, 0.45); animation: atmen 2s ease-in-out infinite;
}
@keyframes atmen { 50% { transform: scale(1.06); } }
#lostext { font-size: clamp(18px, 3.6vmin, 26px); font-weight: bold; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); }
.klein {
  min-height: 48px; padding: 8px 18px; border-radius: 24px; border: 3px solid rgba(255, 255, 255, 0.85);
  background: rgba(20, 40, 70, 0.6); font-size: clamp(15px, 2.8vmin, 20px); font-weight: bold;
}
#kapitelwahl { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
#kapitelwahl button {
  min-height: 52px; padding: 8px 16px; border-radius: 16px; border: 3px solid #ffd84d; background: rgba(120, 60, 10, 0.7);
  font-size: clamp(15px, 2.8vmin, 20px); font-weight: bold;
}
#kapitelwahl button:disabled { opacity: 0.4; filter: grayscale(1); border-color: #aaa; }
#start .fuss { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
#sprachen { display: flex; gap: 6px; }
#sprachen button {
  width: 56px; height: 56px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.7); background: rgba(20, 40, 70, 0.6);
  font-weight: bold; font-size: 18px;
}
#sprachen button.an { background: #ffd84d; color: #5a2d0c; border-color: #fff; }
#tonhinweis { font-size: clamp(14px, 2.6vmin, 18px); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); }

/* Ende */
#ende {
  position: fixed; inset: 0; z-index: 25; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(circle, rgba(30, 60, 100, 0.85), rgba(5, 10, 25, 0.96)); text-align: center; padding: 16px;
}
#endetitel { margin: 0; font-size: clamp(32px, 8vmin, 64px); color: #ffd84d; text-shadow: 0 3px 0 #b5561c, 0 6px 12px rgba(0, 0, 0, 0.5); }
#endetext { margin: 0; font-size: clamp(16px, 3.6vmin, 26px); font-weight: bold; }
#ende .knoepfe { display: flex; gap: 12px; margin-top: 10px; }

/* sehr flache Bildschirme (Fold außen quer) */
@media (max-height: 460px) {
  #start .kopf { margin-top: -4px; }
  #titel { font-size: clamp(28px, 11vh, 46px); }
  #untertitel { font-size: clamp(14px, 5vh, 20px); margin-top: 0.2em; }
  .los { width: 76px; height: 76px; font-size: 38px; }
  #kapitelwahl button, .klein { min-height: 44px; padding: 6px 12px; }
  #sprachen button { width: 48px; height: 48px; }
}
/* Startbild und Abschluss: Spielknöpfe und Inventar ausblenden (scheinen sonst durch, Arne 25.10.) */
body:has(#start:not([hidden])) #oben, body:has(#start:not([hidden])) #inventar,
body:has(#ende:not([hidden])) #oben, body:has(#ende:not([hidden])) #inventar { visibility: hidden; }