/* ==========================================================================
   KID & DIE ENTEN — Spielseite
   Baut auf style.css und retro.css auf (Tokens, Pixel-Panels, Buttons).
   Look: Retro-Konsole. Alle Menüs sind Pixel-Panels mit weißem Rahmen,
   abgesetzten Ecken und hartem rotem Schatten (das Rot der Latzhose).
   ========================================================================== */


/* Seite komplett festnageln. iOS Safari ignoriert overflow: hidden auf dem
   Body und lässt die Seite seitlich rutschen – erst position: fixed auf
   html UND body unterbindet das zuverlässig. */
.game-html,
.game-body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.game {
  position: fixed;
  inset: 0;
  background: var(--ink);
  overflow: hidden;
}

#canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
  cursor: pointer;
}


/* HUD ------------------------------------------------------------------- */

.hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) calc(12px + var(--safe-r)) 10px calc(12px + var(--safe-l));
  pointer-events: none;
}
.hud > * { pointer-events: auto; }

.hud-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 44px;
  padding: 4px 12px 2px 10px;
  --frame: 3px; --drop: 4px; --notch: 4px;
}
.hud-label {
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--muted-2);
}
.hud-value {
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1;
  letter-spacing: .04em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  min-width: 3.2ch;
}

.hud-center {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  --frame: 3px; --drop: 4px; --notch: 4px;
}
.hud-duck {
  display: block;
  width: 22px;
  height: 18px;
  background:
    /* kleine CSS-Pixel-Ente: Körper, Kopf, Schnabel, Auge */
    linear-gradient(#f2f2f2, #f2f2f2) 2px 8px / 14px 8px no-repeat,
    linear-gradient(#f2f2f2, #f2f2f2) 12px 2px / 8px 8px no-repeat,
    linear-gradient(#f28c28, #f28c28) 19px 6px / 3px 3px no-repeat,
    linear-gradient(#0a0a0a, #0a0a0a) 16px 4px / 2px 2px no-repeat;
  transition: opacity .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}
.hud-duck.is-lost { opacity: .18; transform: translateY(-6px) rotate(-12deg); }

.hud-right { display: flex; gap: 10px; }

/* Kapitel-Banner --------------------------------------------------------- */

.banner-chapter {
  position: absolute;
  left: 50%;
  top: 22%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
  animation: chapter-in 1.6s cubic-bezier(.16, 1, .3, 1) both;
}
.banner-chapter-num {
  padding: 5px 10px 3px;
  font-size: clamp(12px, 2vw, 16px);
  letter-spacing: .3em;
  color: var(--paper);
  background: var(--game-red);
}
.banner-chapter-name {
  font-size: clamp(34px, 7vw, 72px);
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--drop) var(--drop) 0 var(--game-red);
}
@keyframes chapter-in {
  0%   { opacity: 0; transform: translate(-50%, 16px); }
  18%  { opacity: 1; transform: translate(-50%, 0); }
  80%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -10px); }
}

/* Story-Zeile ------------------------------------------------------------ */

.story-line {
  position: absolute;
  left: 50%;
  top: 30%;
  z-index: 3;
  width: max-content;
  max-width: min(88%, 560px);
  margin: 0;
  padding: 10px 18px 8px;
  transform: translateX(-50%);
  text-align: center;
  font-size: clamp(17px, 2.6vw, 26px);
  line-height: 1.25;
  letter-spacing: .1em;
  color: var(--ink);
  background: var(--paper);   /* wie die Überschriften: weißer Kasten, schwarzer Text */
  box-shadow: 4px 4px 0 var(--game-red);
  text-wrap: balance;
  pointer-events: none;
  animation: story-in 5.2s ease-in-out both;
}
@keyframes story-in {
  0%   { opacity: 0; transform: translate(-50%, 6px); }
  12%  { opacity: 1; transform: translate(-50%, 0); }
  82%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}

/* Trefferwörter und Punkte ----------------------------------------------- */

.hitwords { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.hitword {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: clamp(16px, 2.6vw, 24px);
  letter-spacing: .2em;
  color: var(--paper);
  text-shadow: 2px 2px 0 #0a0a0a;
  animation: hitword-up .9s ease-out forwards;
}
.hitword--score { color: var(--game-gold); font-size: clamp(14px, 2.2vw, 20px); letter-spacing: .12em; }
.hitword--big { font-size: clamp(18px, 3vw, 28px); }
.hitword--cash { color: #c9a3ff; }
@keyframes hitword-up {
  0%   { opacity: 0; transform: translate(-50%, -40%) scale(.7); }
  20%  { opacity: 1; transform: translate(-50%, -60%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -140%) scale(1); }
}

/* Tutorial ---------------------------------------------------------------
   Beim Stopp steht der Hinweis groß und mittig (auf jedem Gerät lesbar),
   danach hängt er klein am Objekt und läuft mit. */

.tut-card {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: min(88vw, 520px);
  padding: 14px 22px 12px;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--game-red);
  pointer-events: none;
  animation: tut-in .25s steps(3) both, tut-pulse 1s ease-in-out .3s infinite;
}
.tut-card span {
  font-size: clamp(20px, 4.5vw, 34px);
  line-height: 1.05;
  letter-spacing: .12em;
  text-wrap: balance;
}
.tut-card span + span {
  font-size: clamp(15px, 3vw, 22px);
  color: #444;
}
@keyframes tut-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.85); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes tut-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.04); }
}

.callouts { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.callout {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 6px 10px 5px;
  background: var(--paper);
  color: var(--ink);
  font-size: clamp(12px, 1.8vw, 16px);
  letter-spacing: .14em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--game-red);
  animation: callout-in .3s ease both;
}
.callout::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 0; height: 0;
  margin-left: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--paper);
}
.callout--below { transform: translate(-50%, 0); }
.callout--below::after {
  bottom: auto;
  top: -7px;
  border-top: 0;
  border-bottom: 7px solid var(--paper);
}
@keyframes callout-in { from { opacity: 0; } to { opacity: 1; } }

/* Andenken an Papa: weißer Kasten unter dem Engel, das ganze letzte Kapitel */
.memorial {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 14px 5px;
  transform: translate(-50%, 0);
  text-align: center;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--game-red);
  white-space: nowrap;
  pointer-events: none;
  animation: callout-in .6s ease both;
}
.memorial::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  width: 0; height: 0;
  margin-left: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 7px solid var(--paper);
}
.memorial-kicker { font-size: 11px; letter-spacing: .3em; color: #666; }
.memorial-text { font-size: clamp(16px, 2.4vw, 22px); letter-spacing: .1em; line-height: 1; }
.memorial-rip { margin-top: 3px; font-size: 11px; letter-spacing: .3em; color: #666; }

/* Intro (nur beim ersten Start) ----------------------------------------- */

.intro {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}
.intro-text {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  padding: 10px 18px 8px;
  transform: translate(-50%, -50%);
  font-size: clamp(18px, 3.4vw, 30px);
  letter-spacing: .3em;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--game-red);
  white-space: nowrap;
  animation: intro-text 1s steps(4) both;
}
.intro.is-scene .intro-text { animation: intro-text-out .4s steps(3) both; }
.intro-title {
  position: absolute;
  left: 50%;
  top: 26%;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  font-size: clamp(40px, 10vw, 90px);
  line-height: .95;
}
.intro-title .hl { box-shadow: var(--drop) var(--drop) 0 var(--game-red); }
.intro.is-title .intro-title { display: flex; animation: intro-title .5s steps(4) both; }
.intro-skip {
  position: absolute;
  left: 50%;
  bottom: calc(14px + var(--safe-b));
  margin: 0;
  transform: translateX(-50%);
  font-size: 13px;
  letter-spacing: .26em;
  color: var(--muted-2);
  white-space: nowrap;
  animation: blink 1.2s steps(1) infinite;
}
@keyframes intro-text { from { opacity: 0; transform: translate(-50%, -40%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes intro-text-out { to { opacity: 0; transform: translate(-50%, -60%); } }
@keyframes intro-title { from { opacity: 0; transform: translate(-50%, 12px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

/* Overlays --------------------------------------------------------------- */

.overlay--finale { background: #0a0a0ab3; }


/* Kleine Handys hochkant: alles etwas kompakter, damit START ohne Scrollen zu sehen ist */
@media (max-height: 760px) and (max-width: 500px) {
  .panel { gap: 10px; }
  .panel-logo { width: min(48%, 200px); }
  .panel-text { display: none; }
  .legend li { min-height: 24px; }
}
/* Legende: was sammeln, was meiden – mit den echten Sprites */
.legend {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 6px 22px;
  width: fit-content;      /* Block zentriert unter dem Titel … */
  max-width: 100%;
  margin: 2px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;        /* … Zeilen darin bündig an den Icons */
}
.legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  font-size: clamp(12px, 1.8vw, 15px);
  letter-spacing: .14em;
  line-height: 1.25;
  color: #c4c4c4;
}
.legend canvas {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.legend-warn { color: var(--game-gold); }
.legend-warn:last-child { grid-column: 1 / -1; }

/* Schwierigkeit: drei Pixel-Buttons, der aktive ist weiß */
.diff {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin-top: 2px;
}
.diff-btn {
  min-height: 40px;
  padding: 8px 14px 6px;
  border: 3px solid var(--paper);
  background: var(--ink);
  color: var(--paper);
  font-size: clamp(14px, 1.9vw, 17px);
  letter-spacing: .16em;
  line-height: 1;
  box-shadow: 4px 4px 0 var(--game-red);
  transition: transform .08s steps(2), box-shadow .08s steps(2), background .15s ease, color .15s ease;
}
.diff-btn:hover { background: #1f1f1f; }
.diff-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--game-red); }
.diff-btn.is-active { background: var(--paper); color: var(--ink); }
.diff-btn[data-diff="hard"].is-active { background: var(--game-red); color: var(--paper); border-color: var(--game-red); box-shadow: 4px 4px 0 var(--paper); }

.panel-score {
  display: flex;
  gap: clamp(20px, 6vw, 48px);
  margin-top: 4px;
}
.panel-score > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.panel-score span { font-size: 13px; letter-spacing: .26em; color: var(--muted-2); }
.panel-score strong {
  font-weight: 400;
  font-size: clamp(40px, 8vw, 64px);
  line-height: 1;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.panel-diffline {
  margin: -6px 0 0;
  font-size: 13px;
  letter-spacing: .26em;
  color: var(--muted-2);
}
.panel-diffline strong { font-weight: 400; color: var(--paper); margin-left: 4px; }
.panel-newbest {
  margin: 0;
  padding: 5px 12px 3px;
  font-size: clamp(16px, 2.4vw, 20px);
  letter-spacing: .26em;
  color: var(--ink);
  background: var(--game-gold);
  animation: rise .35s steps(4) both, newbest .5s steps(1) .4s infinite alternate;
}
.panel-perfect {
  margin: 0;
  padding: 6px 14px 5px;
  font-size: clamp(14px, 2.2vw, 18px);
  letter-spacing: .2em;
  line-height: 1.2;
  color: var(--ink);
  background: var(--game-gold);
}
@keyframes newbest { from { transform: scale(1); } to { transform: scale(1.06); } }

/* Game Over: kurzer roter Blitz, Titel fällt mit Wackler ins Bild */
#ovOver:not([hidden]) { animation: over-flash .6s steps(3) both; }
@keyframes over-flash { 0% { background: #d0342cc7; } 100% { background: #0a0a0ad9; } }
.panel-title--over { animation: over-drop .7s cubic-bezier(.34, 1.56, .64, 1) both !important; animation-delay: .1s !important; }
@keyframes over-drop {
  0%   { opacity: 0; transform: translateY(-70px) rotate(-4deg); }
  60%  { opacity: 1; transform: translateY(6px) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}

/* Breit, aber niedrig (kleine Laptops, Tablets quer): kompakter, damit
   START ohne Scrollen zu sehen ist */
@media (max-height: 720px) and (min-width: 700px) {
  .overlay { padding: 14px 18px; }
  .panel { gap: 9px; padding: 16px 22px 14px; }
  .panel-logo { width: min(36%, 190px); }
  .panel-title { font-size: clamp(34px, 7.5vh, 64px); }
  .panel-text { display: none; }
  .legend { grid-template-columns: repeat(3, max-content); gap: 3px 18px; }
  .legend li { min-height: 26px; font-size: 12px; }
  .legend-warn:last-child { grid-column: auto; }
  .btn--big { min-height: 48px; padding: 10px 36px; font-size: 22px; }
  .panel-score strong { font-size: 44px; }
}

/* Quer auf dem Handy: alles enger, damit START ohne Scrollen sichtbar ist */
@media (max-height: 460px) {
  .overlay { padding: 8px 14px; }
  .panel { gap: 6px; padding: 10px 14px 8px; }
  .panel-logo { display: none; }
  #ovFinale .panel-logo { display: block; width: 110px; }
  .panel-title { font-size: clamp(24px, 7vh, 40px); }
  .panel-text { display: none; }
  .legend { grid-template-columns: repeat(3, max-content); gap: 2px 14px; }
  .legend li { min-height: 22px; font-size: 11px; gap: 6px; }
  .legend canvas { width: 18px; height: 18px; }
  .legend-warn:last-child { grid-column: auto; }
  .diff-btn { min-height: 32px; padding: 6px 10px 4px; font-size: 12px; }
  .btn--big { min-height: 42px; padding: 8px 28px; font-size: 18px; }
  .panel-score strong { font-size: 34px; }
  .panel-back { min-height: 32px; }
  .story-line { top: 12%; font-size: 14px; }
  .tut-card { padding: 10px 16px 8px; }
  .tut-card span { font-size: 18px; }
  .tut-card span + span { font-size: 13px; }
  .intro-title { top: 18%; font-size: clamp(30px, 9vh, 56px); }
}

/* Kleine Handys hochkant: Legende einspaltig, Logo etwas kleiner */
@media (max-width: 400px) {
  .panel-logo { width: min(54%, 220px); }
  .legend { gap: 4px 12px; }
  .legend li { font-size: 11px; letter-spacing: .1em; gap: 7px; min-height: 24px; }
  .legend canvas { width: 22px; height: 22px; }
  .diff { gap: 8px; }
  .diff-btn { padding: 8px 10px 6px; letter-spacing: .1em; }
  .hud-left { padding: 4px 8px 2px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .banner-chapter, .hitword, .story-line, .panel, .panel > *, .panel-title--over,
  .tut-card, .intro-text, .intro-title, .intro-skip, .btn--start::before, .panel-newbest { animation: none !important; opacity: 1; }
  #ovOver:not([hidden]) { animation: none; }
}