:root {
  --bg1: #ffe8f0; --bg2: #e0f2ff;
  --card: #ffffff;
  --primary: #7c3aed; --primary-dark: #5b21b6;
  --accent: #f59e0b;
  --ok: #10b981; --err: #ef4444;
  --ink: #2a2438;
  font-size: 20px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100dvh; overflow: hidden;
  font-family: "Comic Sans MS", "Baloo 2", "Segoe UI", rounded, sans-serif;
  color: var(--ink);
  background: linear-gradient(160deg, var(--bg1), var(--bg2));
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
button { font-family: inherit; cursor: pointer; border: none; }

/* ---------- Screens ---------- */
.screen {
  display: none; flex-direction: column; align-items: center;
  height: 100dvh; padding: 2vh 3vw; text-align: center;
}
.screen.active { display: flex; }
h1 { font-size: 2.6rem; margin: 1vh 0 2vh; color: var(--primary); text-shadow: 2px 2px 0 #fff; }
h2 { font-size: 1.7rem; margin: 0; color: var(--primary-dark); }
.big-emoji { font-size: 5.5rem; margin-top: 4vh; }

/* ---------- Top bar ---------- */
.bar {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 12px; margin-bottom: 2.5vh; min-height: 64px;
}
.btn-icon {
  font-size: 2rem; background: var(--card); border-radius: 18px;
  padding: 12px 16px; box-shadow: 0 4px 0 #d8d2e8; transition: transform .08s;
}
.btn-icon:active { transform: scale(.93); }

/* ---------- Tiles ---------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 190px));
  justify-content: center;
  gap: 18px; width: 100%; max-width: 900px;
  overflow-y: auto; padding-bottom: 3vh;
  align-content: start; flex: 1;
}
.tile {
  background: var(--card); border-radius: 26px; padding: 18px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  box-shadow: 0 6px 0 #e3dced; border: 4px solid transparent;
  transition: transform .08s, border-color .1s; min-height: 130px; justify-content: center;
}
.tile .emoji { font-size: 3.6rem; line-height: 1; }
.tile .label { font-size: 1rem; font-weight: 700; }
.tile:active { transform: scale(.94); }
.tile.picked { border-color: var(--accent); }
.tile.special { background: #fff7e0; }

/* ---------- PIN ---------- */
.pin-dots { display: flex; gap: 18px; justify-content: center; margin: 2.5vh 0; min-height: 44px; }
.pin-dots span { font-size: 2.4rem; color: #cfc7e0; }
.pin-dots span.filled { color: var(--primary); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 96px); gap: 14px; justify-content: center; }
.pin-pad button {
  font-size: 2rem; font-weight: 700; padding: 18px 0; border-radius: 22px;
  background: var(--card); box-shadow: 0 5px 0 #e3dced; color: var(--ink);
}
.pin-pad button:active { transform: scale(.94); }
.pin-pad button.del { font-size: 1.6rem; }
.speak-hint { font-size: 1.3rem; margin: 1vh 0 0; }

/* ---------- Riesige Buttons ---------- */
.btn-giant {
  font-size: 1.8rem; font-weight: 800; color: #fff;
  background: var(--ok); border-radius: 32px; padding: 22px 46px;
  box-shadow: 0 8px 0 #0a9e6f; display: inline-flex; align-items: center; gap: 14px;
  margin-top: 3vh; transition: transform .08s;
}
.btn-giant:active { transform: scale(.95); }
.btn-giant.print { background: var(--primary); box-shadow: 0 8px 0 var(--primary-dark); }
.btn-giant.again { background: var(--accent); box-shadow: 0 8px 0 #c47d08; }
.hidden { display: none !important; }

/* ---------- Zauber-Screen ---------- */
.cast-preview { font-size: 6rem; margin: 3vh 0 1vh; }
.cast-preview .plus, .wait-preview .plus { font-size: 3rem; color: var(--primary); }
.wait-preview { font-size: 4rem; margin-bottom: 1vh; min-height: 64px; }
.btn-cast {
  font-size: 2.6rem; padding: 26px 60px; border-radius: 40px;
  background: linear-gradient(180deg, #a78bfa, var(--primary));
  color: #fff; box-shadow: 0 10px 0 var(--primary-dark), 0 0 40px #c4b5fd;
  display: inline-flex; align-items: center; gap: 16px; font-weight: 800;
  animation: pulse 1.6s infinite;
}
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.btn-under { margin-top: 4vh; font-size: 1.6rem; background: transparent; box-shadow: none; }

/* ---------- Warten ---------- */
.magic-wand { font-size: 7rem; animation: wave 1.2s ease-in-out infinite; display: inline-block; }
@keyframes wave { 0%,100% { transform: rotate(-14deg); } 50% { transform: rotate(18deg); } }
.sparkles { font-size: 2rem; letter-spacing: 14px; animation: twinkle 1s infinite alternate; }
@keyframes twinkle { from { opacity: .4; } to { opacity: 1; } }
.queue-stars { font-size: 2.2rem; margin: 2vh 0; min-height: 40px; }
.progress { width: min(70vw, 500px); height: 26px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: inset 0 2px 6px #0002; }
#progress-bar { height: 100%; width: 0%; border-radius: 14px;
  background: repeating-linear-gradient(45deg, var(--accent), var(--accent) 14px, #fbbf24 14px, #fbbf24 28px);
  transition: width 1s linear; }

/* ---------- Fertig ---------- */
.done-images { display: flex; gap: 3vw; justify-content: center; margin: 2.5vh 0; flex-wrap: wrap; }
.done-images img {
  max-height: 44dvh; max-width: 42vw; background: #fff; padding: 10px;
  border-radius: 18px; box-shadow: 0 8px 24px #0002; object-fit: contain;
}
.done-actions { display: flex; gap: 4vw; flex-wrap: wrap; justify-content: center; }

/* ---------- Galerie ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(255, 255, 255, .97);
  z-index: 50; display: flex; flex-direction: column; padding: 2vh 3vw;
}
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px; overflow-y: auto; }
.gallery-grid .pair { display: flex; gap: 8px; background: #fff; border-radius: 16px; padding: 8px; box-shadow: 0 4px 12px #0001; }
.gallery-grid img { width: 50%; border-radius: 8px; object-fit: contain; }

/* ---------- Error ---------- */
#error-text { font-size: 1.3rem; max-width: 600px; }