:root {
  --ink: #1b1b1b;
  --paper: #fff7fb;
  --pink: #ee3fb4;
  --rosa: #f9c6e4;
  --mint: #c4f0de;
  --yellow: #ffe666;
  --blue: #8fd0ee;
  --font: "Chalkboard SE", "Comic Sans MS", "Comic Neue", "Marker Felt", "Segoe Print", cursive, sans-serif;
}

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

html, body {
  margin: 0; height: 100%; overflow: hidden;
  font-family: var(--font); color: var(--ink);
  background: var(--paper);
  background-image:
    radial-gradient(circle at 12% 18%, #ffe3f3 0 60px, transparent 61px),
    radial-gradient(circle at 88% 85%, #dff6ec 0 90px, transparent 91px),
    radial-gradient(circle at 92% 12%, #fff4b8 0 40px, transparent 41px),
    radial-gradient(#f3d6e6 1.5px, transparent 1.5px);
  background-size: auto, auto, auto, 26px 26px;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}

.hidden { display: none !important; }
.screen { position: fixed; inset: 0; }

/* ---------- Knöpfe ---------- */
.btn {
  font-family: var(--font); font-size: clamp(16px, 2.4vmin, 24px); font-weight: bold;
  color: var(--ink); background: #fff;
  border: 3px solid var(--ink); border-radius: 18px;
  padding: .55em 1.2em; cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .1s, box-shadow .1s;
}
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn.pink { background: var(--pink); color: #fff; }
.btn.mint { background: var(--mint); }
.btn.yellow { background: var(--yellow); }
.btn.small { font-size: clamp(14px, 2vmin, 20px); padding: .4em .9em; }
.btn.big { font-size: clamp(22px, 4vmin, 40px); padding: .5em 1.6em; border-radius: 26px; }
.btn:disabled { opacity: .35; pointer-events: none; }

/* ---------- Start ---------- */
#start { display: grid; place-items: center; text-align: center; padding: 16px; }
.start-box { display: flex; flex-direction: column; align-items: center; gap: 1.5vmin; }
.start-preview { width: min(48vmin, 380px); animation: wobble 3s ease-in-out infinite; }
.start-preview svg { width: 100%; height: auto; display: block; }
h1 { font-size: clamp(30px, 6.5vmin, 72px); margin: 0; line-height: 1.1; }
h1 span { color: var(--pink); }
#start p { font-size: clamp(16px, 2.8vmin, 28px); margin: 0 0 1vmin; }

/* ---------- Baukasten ---------- */
#builder { display: grid; grid-template-rows: auto 1fr auto; }
header, footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 1.6vmin 2.5vmin;
}
#steps { display: flex; flex-wrap: wrap; gap: 6px; }
.step-dot {
  font-family: var(--font); font-size: clamp(12px, 2vmin, 20px); font-weight: bold;
  border: 2.5px solid var(--ink); border-radius: 999px; background: #fff;
  padding: .25em .7em; cursor: pointer; color: var(--ink);
}
.step-dot.done { background: var(--mint); }
.step-dot.active { background: var(--pink); color: #fff; transform: scale(1.08); }

main {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 2vmin;
  padding: 0 2.5vmin; min-height: 0;
}
.stage {
  position: relative; min-height: 0;
  display: grid; place-items: center;
  background: #fff; border: 3px solid var(--ink); border-radius: 28px;
  box-shadow: 6px 6px 0 var(--ink);
  background-image: radial-gradient(#f6e3ee 1.5px, transparent 1.5px); background-size: 22px 22px;
}
#preview { width: 100%; height: 100%; max-height: 100%; display: block; padding: 2vmin; }
#preview.pop { animation: pop .35s ease; }

.panel { display: flex; flex-direction: column; min-height: 0; }
h2 { font-size: clamp(20px, 3.6vmin, 40px); margin: .2em 0 .6em; text-align: center; }

.options {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid; gap: 1.6vmin; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(clamp(110px, 21vmin, 220px), 1fr));
  padding: 6px 10px 12px 6px;
}
.options.many { grid-template-columns: repeat(auto-fill, minmax(clamp(95px, 15vmin, 170px), 1fr)); }
.options.colors { grid-template-columns: repeat(6, 1fr); }
.opt {
  font-family: var(--font); color: var(--ink);
  background: #fff; border: 3px solid var(--ink); border-radius: 20px;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 8px 6px 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform .12s;
}
.opt:nth-child(odd) { transform: rotate(-1deg); }
.opt:nth-child(even) { transform: rotate(1deg); }
.opt:active { transform: scale(.95); }
.opt svg { width: 100%; aspect-ratio: 4 / 3; height: auto; display: block; }
.opt .none-icon { width: 55%; aspect-ratio: 1; margin: 6% auto; }
.opt span { font-size: clamp(12px, 1.8vmin, 18px); font-weight: bold; text-align: center; line-height: 1.1; overflow-wrap: anywhere; hyphens: auto; }
.opt.selected { background: var(--yellow); transform: scale(1.04) rotate(0); box-shadow: 0 0 0 4px var(--pink), 4px 4px 0 4px var(--ink); }
.options.colors .opt svg { aspect-ratio: 1; width: 70%; }

/* ---------- Fertig ---------- */
.finish { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 1vmin; }
.small-label { font-size: clamp(16px, 2.6vmin, 26px); margin: 0; }
.pbname { font-size: clamp(30px, 6vmin, 64px); font-weight: bold; color: var(--pink); margin: 0 0 2vmin; text-shadow: 3px 3px 0 var(--yellow); }
.row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.battery {
  position: absolute; top: 2.5vmin; left: 50%; transform: translateX(-50%);
  width: 50%; height: 5vmin; min-height: 30px;
  border: 3px solid var(--ink); border-radius: 12px; background: #fff; overflow: hidden;
}
.battery::after { content: ""; position: absolute; right: -10px; top: 30%; width: 7px; height: 40%; background: var(--ink); border-radius: 0 4px 4px 0; }
.battery .fill { height: 100%; width: 0; background: linear-gradient(90deg, #8fdcb4, #3fbf5a); transition: width .1s linear; }
.battery span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: bold; font-size: clamp(14px, 2.4vmin, 24px); }

/* ---------- Konfetti ---------- */
#confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 10; }
.conf { position: absolute; top: -30px; width: 14px; height: 18px; border-radius: 3px; animation: fall linear forwards; }

@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.06) rotate(-1.5deg); } 100% { transform: scale(1); } }
@keyframes wobble { 0%,100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-10px); } }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* ---------- Hochkant-Bildschirm (9:16, Powerbank-Station) ---------- */
@media (orientation: portrait) {
  header { justify-content: center; padding: 2.2vw 3vw 1.5vw; }
  footer { padding: 2.2vw 3vw 3vw; }
  #steps { justify-content: center; gap: 1.1vw; }
  .step-dot { font-size: 2.3vw; padding: .3em .8em; border-width: 3px; }

  main { grid-template-columns: 1fr; grid-template-rows: minmax(0, .94fr) minmax(0, 1.06fr); gap: 1.5vw; padding: 0 3vw; }
  .stage { border-radius: 4vw; }
  #preview { padding: 3vw; }
  h2 { font-size: 4.6vw; margin: .3em 0 .5em; }

  .options { gap: 2.4vw; grid-template-columns: repeat(auto-fill, minmax(21vw, 1fr)); padding: 1vw 1.5vw 2vw 1vw; }
  .options.many { grid-template-columns: repeat(5, 1fr); gap: 2vw; }
  .options.colors { grid-template-columns: repeat(7, 1fr); gap: 1.5vw 1.4vw; }
  .options.colors .opt span { font-size: 1.75vw; }
  .options.colors .opt svg { width: 66%; }
  .opt { border-radius: 3vw; padding: 1.2vw 1vw 1vw; }
  .opt span { font-size: 2.4vw; }
  .options.many .opt span { font-size: 2.1vw; }

  .btn { font-size: 3.6vw; border-radius: 2.6vw; }
  .btn.big { font-size: 6.5vw; border-radius: 4vw; }
  .battery { height: 6vw; }
  .battery span { font-size: 3vw; }
  .small-label { font-size: 4vw; }
  .pbname { font-size: 8vw; }

  .start-box { gap: 3vh; }
  .start-preview { width: 78vw; max-width: none; }
  h1 { font-size: 9.5vw; }
  #start p { font-size: 3.8vw; padding: 0 4vw; }
}