@font-face {
  font-family: 'GameFont';
  src: url('/assets/fonts/text_font.ttf') format('truetype');
  font-display: swap;
}

:root {
  /* Modern-UI-Palette: Pergament / Holz / Navy */
  --bg: #c49869;
  --parch: #d6c7a4;       /* Pergament (Panel-Füllung) */
  --parch2: #cbba90;      /* dunkleres Pergament (Karten) */
  --wood: #b5713b;        /* Holz-Rand */
  --navy: #c49869;        /* dunkle Umrandung */
  --accent: #ffce40;      /* Gold / Stern */
  --accent2: #359595;
  --good: #7fb83f;
  --bad: #d94a3d;
  --text: #f3eeff;        /* HELLE Schrift – nur für dunkle Flächen (Topbar, Arena-Labels) */
  --ink: #3a2a16;         /* dunkle Schrift – Standard auf Pergament/Braun */
  --muted: #6f5d3e;       /* gedämpft auf Pergament */
  --panel: var(--parch);
  --panel2: var(--parch2);
  /* 9-slice Rahmen-Quellen (Slice/Breite/repeat je Element unterschiedlich) */
  --frame-wood: url('/assets/ui/panel_wood.png');
  --frame-slot: url('/assets/ui/frame_slot.png');
}

* { box-sizing: border-box; }
/* Fluide Basis-Schriftgröße: skaliert die gesamte rem/em-basierte UI mit der
   Bildschirmbreite mit (Handy ~16px, iPad ~19–22px, großes Tablet bis 26px). */
html { font-size: clamp(15px, 0.7vw + 9px, 20px); }
html, body {
  margin: 0;
  height: 100%;
  font-family: 'GameFont', system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #359595;
  color: var(--ink);              /* Standard-Schrift dunkel (brauner Hintergrund) */
  -webkit-user-select: none;
  user-select: none;
}

/* Formularelemente erben die Spiel-Schrift (sonst Browser-Default). */
button, input, select, textarea { font-family: inherit; }

.hidden { display: none !important; }
.screen { min-height: 100vh; }

/* Spiel-Shell: füllt exakt die Viewport-Höhe (dvh wegen iOS-URL-Leiste).
   Topbar oben fix, Board füllt den Rest, Footer unten fix. Safe-Area-Insets
   halten im Querformat alles vom iPhone-Notch frei. */
.game-screen {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---- Sprites ---- */
/* Größe über --w steuerbar (echte Layoutgröße, kein transform-scale). Sheets sind
   600x100 = 6 Frames; background-size skaliert die ganze Sheet auf 6*--w breit. */
.sprite {
  --w: 100px;
  --frames: 6;            /* Idle = 6 Frames; Attack-Sheets variieren (per JS gesetzt) */
  width: var(--w);
  height: var(--w);
  background-repeat: no-repeat;
  background-size: calc(var(--w) * var(--frames)) var(--w);
  image-rendering: pixelated;
  transform-origin: center bottom;
  animation: sheet 0.8s steps(6) infinite;
}
/* Ein Keyframe für Idle und Attack – Endposition richtet sich nach --frames. */
@keyframes sheet {
  from { background-position: 0 0; }
  to { background-position: calc(var(--w) * -1 * var(--frames)) 0; }
}

/* Treffer-Effekt auf dem Gegner (hit.png = 6 Spalten x 2 Zeilen = 12 Frames à 32x32px). */
.hit-fx {
  position: absolute;
  left: 50%; top: 45%;
  width: 32px; height: 32px;
  margin: -16px 0 0 -16px;
  transform: scale(2);
  background: url('/assets/players/hit.png') 0 0 / 192px 64px no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  /* x: 2x durch 6 Spalten (je 0.3s) · y: nach der Hälfte in Zeile 2 */
  animation: hitx 0.3s steps(6) 2 forwards, hity 0.6s steps(2, jump-none) 1 forwards;
}
@keyframes hitx { from { background-position-x: 0; } to { background-position-x: -192px; } }
@keyframes hity { from { background-position-y: 0; } to { background-position-y: -32px; } }

/* ---- Pixel-Icons (statt Emojis) ---- */
.ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
  vertical-align: -0.15em;
}
.ico-star  { background-image: url('/assets/ui/icon_star.png'); }
.ico-check { background-image: url('/assets/ui/icon_check.png'); }
.ico-clock { background-image: url('/assets/ui/icon_clock.png'); }
.ico-cross { background-image: url('/assets/ui/icon_cross.png'); }
.ico-gear  { background-image: url('/assets/ui/icon_gear.png'); }

/* Icon-Button (Zahnrad): quadratisch, Icon zentriert */
.btn.icon-btn { padding: 0.1rem 0.45rem; }
.btn.icon-btn .ico { width: 1.3em; height: 1.3em; vertical-align: -0.25em; }

/* Optionen-Modal */
.option-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; font-size: 1.2rem; font-weight: 700; margin: 1rem 0;
}
.toggle {
  width: 70px; height: 28px; padding: 0; border: none; cursor: pointer;
  background: url('/assets/ui/toggle_off.png') center/contain no-repeat;
  image-rendering: pixelated;
}
.toggle.on { background-image: url('/assets/ui/toggle_on.png'); }

/* Aktueller Song */
.song-row { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; margin: 0.4rem 0 1rem; }
.song-row .btn { font-size: 1.1rem; min-width: 160px; }
.song-hint { font-size: 0.75rem; color: var(--muted); }

/* Optionen-Footer */
.options-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }

/* Credits-Modal */
.credits-box { max-width: min(92vw, 420px); max-height: 80vh; overflow-y: auto; text-align: left; }
.credits-list { margin: 0.5rem 0 1.2rem; }
.credits-category { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 1.1rem; margin-bottom: 0.3rem; font-size: 1rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--wood); padding-bottom: 0.2rem; }
.credits-cat-icon { width: 28px; height: 28px; image-rendering: pixelated; flex-shrink: 0; vertical-align: middle; }
.credits-entry { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0.35rem 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
.credits-entry:last-child { border-bottom: none; }
.credits-title { font-size: 1rem; font-weight: 700; color: var(--ink); }
.credits-meta { font-size: 0.8rem; color: var(--muted); margin-top: 0.1rem; }
.credits-link { font-size: 0.78rem; color: var(--accent2); }

/* Lautstärke-Slider: rote Pille (9-slice) als Track + beiger Knauf als Regler. */
input[type="range"].vol {
  -webkit-appearance: none; appearance: none;
  width: 220px; padding: 0; cursor: pointer;
  background: transparent;
}
/* Track = rote Pille als echtes 9-slice (Source 44x22, Kappenradius ~11px) */
input[type="range"].vol::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 6px; background: transparent;
  border: 8px solid transparent;
  border-image: url('/assets/ui/slider_track.png') 11 fill / 8px stretch;
  image-rendering: pixelated;
}
input[type="range"].vol::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; margin-top: -16px;   /* zentriert den Knauf auf dem Track */
  background: url('/assets/ui/slider_knob.png') center / contain no-repeat;
  image-rendering: pixelated; border: none;
}
input[type="range"].vol::-moz-range-track {
  height: 6px; background: transparent;
  border: 8px solid transparent;
  border-image: url('/assets/ui/slider_track.png') 11 fill / 8px stretch;
  image-rendering: pixelated;
}
input[type="range"].vol::-moz-range-thumb {
  width: 30px; height: 30px; border: none;
  background: url('/assets/ui/slider_knob.png') center / contain no-repeat;
  image-rendering: pixelated;
}

/* ---- Login ---- */
.login-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  text-align: center;
  color: var(--ink);          /* dunkle Schrift auf dem braunen Hintergrund */
}
.login-screen h1 { font-size: 2.4rem; margin: 0; }
.login-logo { width: 50%; max-width: 600px; height: auto; image-rendering: pixelated; margin-bottom: -5rem; }
.kid-picker { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
.kid-card {
  background: none;
  border: 20px solid transparent;
  border-image: var(--frame-wood) 18 fill / 20px repeat;
  image-rendering: pixelated;
  border-radius: 0;
  padding: 0.6rem 1.4rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.1s;
}
.kid-card:active { transform: scale(0.95); }
.kid-card-name { font-size: 1.8rem; }
.admin-link { color: #5c3d1a; margin-top: 2rem; font-size: 0.9rem; text-decoration: underline; }
.login-note { margin-top: 0.8rem; font-size: 0.8rem; opacity: 0.75; text-align: center; max-width: 28rem; }

/* ---- Landing / Login / Legal ---- */
.landing-text { max-width: 32rem; text-align: center; color: var(--ink); font-size: 1.1rem; line-height: 1.5; margin: 0 1rem; }
.landing-links { margin-top: 1.5rem; font-size: 0.9rem; }
.landing-links a { color: #5c3d1a; text-decoration: underline; }
.auth-form { display: flex; flex-direction: column; gap: 0.8rem; width: min(90vw, 22rem); align-items: stretch; }
/* Eingabefelder (gemeinsam für Login, Eltern-PIN und Admin) */
.input {
  background: #d0be9c;
  border: 2px solid var(--navy);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  color: var(--ink);
  font-size: 1rem;
}
.input.narrow { width: 70px; }
.auth-form .input { font-size: 1.1rem; }
.auth-form .btn { align-self: center; margin-top: 0.3rem; }
.error { color: var(--bad); font-weight: 700; min-height: 1.2rem; text-align: center; }
.legal-page { max-width: 44rem; margin: 0 auto; padding: 2rem 1.2rem; color: var(--ink); line-height: 1.55; }
.legal-page h1 { margin-top: 0; }
.legal-page h2 { margin-top: 1.6rem; }
.legal-page a { color: #5c3d1a; }

/* ---- Topbar (Modern UI: Holzrahmen-Bar mit Pergament) ---- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  margin-top: 8px;
  margin-left: 18px;
  margin-right: 18px;
  background: none;
  border: 16px solid transparent;
  border-image: var(--frame-wood) 16 fill / 20px repeat;
  image-rendering: pixelated;
  padding: 0.5rem 0.5rem;
  color: var(--ink);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 0.7rem; }
.hero-name { font-size: 1.3rem; font-weight: 800; color: var(--ink); }
/* Level/XP als Fortschrittsleiste aus 3 Segmenten (32x32-Assets):
   [Start-Kappe][Mitte (dehnt sich)][End-Kappe] — Kappen werden NIE skaliert
   (feste, quadratische Zellen), nur die Mitte streckt sich. Hintergrund-Balken
   und gelbe Füllung sind je ein eigenes 3-Segment-Set. */
.xpbar {
  --xp: 0%;
  --xpbar-h: 2.8rem;       /* Höhe = Breite der quadratischen Kappen */
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--xpbar-h);
  padding: 0 4rem;         /* horizontale Luft -> Balken immer breiter als der Text */
  flex-shrink: 0;
  image-rendering: pixelated;
}
/* 3-Spalten-Grid: [quadratische Startkappe] [dehnbare Mitte (1fr)] [quadratische Endkappe].
   Kappen-Spalten sind so breit wie der Balken hoch -> das 32x32-Asset wird UNIFORM
   skaliert (keine Verzerrung); nur die Mitte streckt sich. Hintergrund + Füllung gleich. */
.xpbar-track, .xpbar-fill { display: grid; grid-template-columns: var(--xpbar-h) 1fr var(--xpbar-h); }
.xpbar-track { position: absolute; inset: 0; z-index: 0; }
.xpbar-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: var(--xp);
  min-width: var(--xpbar-h);   /* ab 1 XP immer mind. die Startkappe zeigen */
  overflow: hidden;
  transition: width 0.5s;
  z-index: 1;
}
.xpbar-cap, .xpbar-mid { height: 100%; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; }
.xpbar-bg-start { background-image: url('/assets/ui/progressbar_bg_start.png'); }
.xpbar-bg-mid   { background-image: url('/assets/ui/progressbar_bg_middle.png'); }
.xpbar-bg-end   { background-image: url('/assets/ui/progressbar_bg_end.png'); }
.xpbar-fill-start { background-image: url('/assets/ui/progressbar_fill_start.png'); }
.xpbar-fill-mid   { background-image: url('/assets/ui/progressbar_fill_middle_yellow.png'); }
.xpbar-fill-end   { background-image: url('/assets/ui/progressbar_fill_end_yellow.png'); }
.xpbar-text {
  position: relative; z-index: 2;     /* in-flow -> bestimmt die Balkenbreite, liegt über Balken+Füllung */
  font-size: 1.05rem; font-weight: 700; color: #fff; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 3px rgba(0,0,0,0.6);
}
.stars-big { font-size: 1.4rem; font-weight: 800; color: var(--ink); }

/* ---- Buttons (9-slice aus dem UI-Sheet) ---- */
.btn {
  background: none;
  color: #2a2336;                 /* dunkle Schrift auf hellem Button */
  border: 9px solid transparent;  /* Rahmenbreite = gerenderte Slice-Dicke */
  border-image: url('/assets/ui/btn_default.png') 7 fill / 9px repeat;
  border-radius: 0;
  image-rendering: pixelated;
  padding: 0.15rem 0.7rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.btn:active { transform: translateY(1px); filter: brightness(0.93); }
.btn.small { padding: 0.02rem 0.45rem; font-size: 0.85rem; }
.btn.ghost  { border-image-source: url('/assets/ui/btn_ghost.png');  color: #3a2a14; }
.btn.good   { border-image-source: url('/assets/ui/btn_good.png');   color: #1f3010; }
.btn.danger { border-image-source: url('/assets/ui/btn_attack.png'); color: #fff; }
.btn.attack { border-image-source: url('/assets/ui/btn_attack.png'); color: #fff; font-size: 1.1rem; padding: 0.35rem 1.2rem; }
.btn.step { width: 46px; height: 46px; font-size: 1.5rem; padding: 0; }

/* ---- Board ---- */
.board {
  flex: 1 1 auto;
  min-height: 0;                 /* erlaubt internes Scrollen statt Seiten-Overflow */
  display: grid;
  grid-template-columns: 1fr 2fr; /* Missionen 1/3, Arena 2/3 */
  gap: 1rem;
  padding: 1rem;
  align-items: stretch;          /* beide Spalten füllen die volle Board-Höhe */
}
.col { background: var(--panel); border-radius: 16px; padding: 1rem; min-width: 0; }
.missions-col, .battle-col { height: 100%; min-height: 0; }
.missions-col { display: flex; flex-direction: column; }
.battle-col { display: flex; flex-direction: column; }
.missions-col h2 { flex-shrink: 0; }
.col h2 { margin: 0 0 0.8rem; font-size: 1.2rem; color: var(--ink); }

/* Spalten mit Holzrahmen aus dem UI-Sheet (9-slice border-image).
   'fill' nutzt das beige Zentrum als Hintergrund; pixelated hält die Pixel knackig. */
.missions-col,
.battle-col {
  background: none;
  border-style: solid;
  border-width: 26px;
  border-image: var(--frame-wood) 18 fill / 26px / 0 repeat;
  border-radius: 0;
  image-rendering: pixelated;
  padding: 0.4rem 0.4rem;

}
/* Kampf-Spalte ohne Innenabstand -> Szene liegt direkt am Holzrahmen an. */
.battle-col { padding: 0; }
.missions-col .empty { color: var(--muted); }

/* ---- Missionen ---- */
.mission-list { list-style: none; margin: 0; padding: 0 0.3rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; min-height: 0; overflow-y: auto; }
.mission {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 11px solid transparent;
  border-image: var(--frame-slot) 14 fill / 11px stretch;
  image-rendering: pixelated;
  padding: 0.15rem 0.4rem;
  color: var(--ink);
  cursor: pointer;
}
.mission[data-checkable="false"] { cursor: default; }
.mission .mtitle { flex: 1; }
.mission .mstars { color: var(--ink); font-weight: 800; white-space: nowrap; }
.mission .mstate { font-size: 1.2rem; }
.mission .check { color: var(--muted); font-size: 1.3rem; }
.mission.done { opacity: 0.6; }
.mission.pending { outline: 2px dashed var(--wood); outline-offset: -5px; }
.mission .empty, .empty { color: var(--muted); font-style: italic; }

/* ---- Arena ---- */
/* Pixelart-Hintergrund: Datei unter assets/bg/arena.png ablegen (empf. 384x160 px,
   Boden im unteren Viertel). Wird am unteren Rand verankert skaliert; der
   Gradient bleibt als Fallback, falls die Datei (noch) fehlt. */
/* "Bühne": reserviert die skalierte Höhe und beschneidet seitlichen Überlauf.
   --scene-scale ist DER eine Regler für die gesamte 2D-Szene (BG + Helden + Monster). */
/* "Bühne": feste Design-Größe der Szene (Seitenverhältnis = Hintergrundbild 2.4),
   per JS wird --scene-scale gesetzt, damit die Szene immer exakt die verfügbare
   Breite füllt (voll responsiv, kein seitliches Scrollen). */
.arena-stage {
  --scene-w: 1152px;
  --scene-h: 864px;       /* 4:3 = Hintergrund 384x288 ×3 */
  --scene-scale: 1;
  position: relative;
  flex: 1 1 auto;         /* füllt die Höhe der Kampfspalte über dem Attack-Panel */
  min-height: 0;
  /* Szene über den inneren Holzrand ziehen, damit kein beiger Pergament-Saum
     (border-image fill) zwischen Szene und Holz durchscheint */
  margin: -7px;
  width: calc(100% + 14px);
  overflow: hidden;       /* Szene "covert" die Bühne, Bleed-Rand wird beschnitten */
}
.arena {
  position: absolute;
  top: 50%; left: 50%;            /* in der Bühne zentriert */
  transform: translate(-50%, -50%) scale(var(--scene-scale));
  transform-origin: center center;
  display: flex;
  align-items: flex-end;          /* Figuren stehen auf der Bodenlinie */
  justify-content: space-between; /* Helden links, Monster rechts */
  /* Paddings an die FESTEN Design-Maße koppeln (nicht an die variable Container-
     breite!), damit die Figuren immer am selben Punkt des Hintergrunds kleben.
     seitlich = Safe-Zone-Reserve · unten = Füße auf die Bodenlinie heben */
  /* padding-bottom so, dass die Füße exakt auf 50% des Hintergrunds landen:
     50% Höhe minus dem 40%-Leerraum unter den Füßen im Helden-Frame (--hero-size, gesetzt in app.js) */
  padding: 0 calc(var(--scene-w) * 0.07) calc(var(--scene-h) * 0.4 - var(--hero-size) * 0.4);
  width: var(--scene-w);
  height: var(--scene-h);
  background: url('/assets/bg/arena.png') center center / cover no-repeat;
  image-rendering: pixelated;
  border-radius: 0;
}
/* Beschriftungen über den Figuren mit Schatten für Lesbarkeit auf dem Pixel-Hintergrund. */
.arena .hero-label, .arena .monster-name, .arena .streak, .arena .hptext {
  text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 3px rgba(0,0,0,0.6);
}
/* Helden bekommen die linken 66% der Arena, das Monster die rechten 33% (Zonen
   per flex-basis -> Monster wird nie rausgedrückt, egal wie viele Kinder). */
.heroes { flex: 2 1 0; min-width: 0; display: flex; align-items: flex-end; }
/* Jedes Kind bekommt einen gleich breiten Slot -> automatisch gleichmäßig verteilt
   (1 bis 4 Kinder). Der Sprite ist im Slot zentriert; bei vielen Kindern überlappen
   sich nur die transparenten Frame-Ränder, nicht die Figuren. */
.hero { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; }
/* Name + Level als Overlay knapp über der Figur (skaliert mit --fig). */
.hero-label {
  position: absolute;
  left: 50%;
  bottom: calc(var(--fig, 360px) * 0.75);
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
.hero-label .lvl { color: var(--accent); }

.monster-box {
  flex: 1 1 0;
  position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0;
  /* Füße auf die Helden-Bodenlinie heben: jeder Frame hat 40% Leerraum unter den
     Füßen, daher steht ein kleineres Monster (var(--msize)) tiefer als die 420px-
     Helden. Differenz × 0.4 als margin-bottom gleicht das für jede Monstergröße aus. */
  margin-bottom: calc((var(--hero-size) - var(--msize, 360px)) * 0.4);
}
/* Name + HP-Leiste als Overlay direkt über dem Monster-Körper (skaliert mit --msize). */
.monster-info {
  position: absolute;
  left: 50%;
  bottom: calc(var(--msize, 200px) * 0.7);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: max-content;
}
.streak { font-weight: 700; color: #ff9a3c; font-size: 0.95rem; }
.monster-name { font-weight: 700; font-size: 1.15rem; color: #ff7b7b; }
.hpbar { width: 170px; height: 16px; background: #4a2030; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.hpfill { height: 100%; background: linear-gradient(90deg, var(--bad), #ff9a6b); transition: width 0.3s; }
.hptext { font-size: 1.2rem; color: #efe6cf; }
.victory { font-size: 2rem; text-align: center; font-weight: 700; color: var(--good); }

/* ---- Attack panel (auf Pergament -> dunkle Schrift) ---- */
.attack-panel { margin-top: 8px; padding: 0.35rem 0.8rem; text-align: center; color: var(--ink); }
.attack-controls { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-top: 0.25rem; }
.attack-amount { font-size: 1.6rem; font-weight: 800; min-width: 2ch; color: var(--ink); }
/* Feedback nur sichtbar, wenn es eine Meldung gibt (sonst kein leerer Platz). */
.battle-msg-row { min-height: 0; display: flex; align-items: center; justify-content: center; }
.battle-msg-row:has(.battle-msg:not(:empty)) { margin-top: 0.25rem; }
.battle-msg { margin: 0; }
.battle-msg:empty { display: none; }
.battle-msg:not(:empty) {
  display: inline-block;
  background: var(--wood);
  color: #fff;
  font-weight: 800;
  padding: 0.3rem 0.9rem;
  border-radius: 10px;
  border: 2px solid var(--navy);
}

/* ---- Modal ---- */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 2.5vh 2vw;             /* Box klebt nie am Viewport-Rand */
  z-index: 50;
}
.modal-box {
  background: none;
  border: 24px solid transparent;
  border-image: var(--frame-wood) 18 fill / 24px repeat;
  image-rendering: pixelated;
  border-radius: 0;
  padding: 0.5rem 1rem; max-width: 90vw; text-align: center;
  color: var(--ink);
  /* nie höher als der Bildschirm -> Header/Footer bleiben sichtbar, Inhalt scrollt */
  max-height: 95dvh;
  display: flex; flex-direction: column; min-height: 0;
}
.modal-box h2 { color: var(--ink); }
/* Auswahl-Bereich scrollt intern, wenn viele Charaktere -> Footer bleibt sichtbar. */
.sprite-choices { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin: 1rem 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sprite-choice {
  background: none;
  border: 11px solid transparent;
  border-image: var(--frame-slot) 14 fill / 11px stretch;
  image-rendering: pixelated;
  padding: 0.6rem 0.6rem 0.3rem; cursor: pointer; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
/* fixe, beschnittene Box -> Figur groß skaliert, leerer Sprite-Rand wird abgeschnitten. */
.choice-fig { width: clamp(88px, 15vw, 130px); height: clamp(88px, 15vw, 130px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sprite-choice.selected { outline: 3px solid var(--accent); outline-offset: -8px; }
.sprite-choice.locked { opacity: 0.5; cursor: not-allowed; }
.sc-label { font-weight: 700; }
.sc-req { font-size: 0.8rem; color: var(--muted); }
.char-modal-footer { display: flex; justify-content: center; gap: 1rem; margin-top: 0.5rem; }

/* Level-Up-Modal */
.levelup-box { animation: pop 0.3s ease-out; }
#levelupTitle { color: #b8860b; font-size: 2rem; margin: 0.2rem 0; }
@keyframes pop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---- Footer (Platzhalter, wächst mit Inhalt) ---- */
.appfoot {
  flex: 0 0 auto;
  padding: 0 18px;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}
.appfoot:empty { padding: 0; }

/* ---- Querformat erzwingen ---- */
/* Overlay nur im Hochformat sichtbar; deckt die ganze App ab. */
.rotate-hint { display: none; }
@media (orientation: portrait) {
  .rotate-hint {
    display: flex;
    position: fixed; inset: 0; z-index: 100;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 1.2rem; padding: 2rem;
    background: var(--bg); color: var(--ink); text-align: center;
  }
  .rotate-hint p { font-size: 1.3rem; font-weight: 700; margin: 0; }
  .rotate-icon {
    width: 12rem; height: 12rem;
    background: url('/assets/ui/icon_phone.png') center / contain no-repeat;
    image-rendering: pixelated;
    animation: rotatehint 1.6s ease-in-out infinite;
  }
}
@keyframes rotatehint {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(78deg); }
}