/* HarHar.de – edge-to-edge mobile, vertical-first, print-ready */

/*
 * Themes — default is a painted “delft / denim” blue
 * (not #0000ff / not Bootstrap primary).
 */
:root,
[data-theme="azure"] {
  --bg: #e8eef6;
  --paper: #ffffff;
  --ink: #152033;
  --muted: #5a6578;
  --accent: #3a6ea5;       /* delft blue */
  --accent-dark: #2d5785;
  --chip: #d5e0ef;
  --chip-active: #3a6ea5;
  --shadow: 0 6px 22px rgba(25, 45, 75, 0.13);
  --donate: #4a7ab5;       /* same family, slightly lighter for CTA */
  --donate-dark: #355f94;
  --radius: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pad-x: 6px;
  --chevron-w: 40px;
}

/* misty grey-blue */
[data-theme="mist"] {
  --bg: #e9eef2;
  --ink: #1a222b;
  --muted: #5e6a75;
  --accent: #5b7c99;
  --accent-dark: #46627d;
  --chip: #d7e1e9;
  --chip-active: #5b7c99;
  --shadow: 0 6px 20px rgba(30, 45, 60, 0.12);
  --donate: #4f7394;
  --donate-dark: #3b5a78;
}

/* soft teal (previous soft, kept) */
[data-theme="soft"] {
  --bg: #eef3f7;
  --ink: #1c2430;
  --muted: #5c6775;
  --accent: #2f8f9a;
  --accent-dark: #24747d;
  --chip: #dce8ec;
  --chip-active: #2f8f9a;
  --shadow: 0 6px 20px rgba(20, 40, 55, 0.12);
  --donate: #3d7ea6;
  --donate-dark: #2f6486;
}

/* lavender dusk */
[data-theme="lilac"] {
  --bg: #f0ecf6;
  --ink: #221a2e;
  --muted: #655a72;
  --accent: #7a5ea8;
  --accent-dark: #634a8c;
  --chip: #e4dceb;
  --chip-active: #7a5ea8;
  --shadow: 0 6px 20px rgba(50, 30, 70, 0.12);
  --donate: #5c6eb5;
  --donate-dark: #485a9a;
}

[data-theme="berry"] {
  --bg: #f6eef3;
  --ink: #2a1a24;
  --muted: #6d5562;
  --accent: #c44d7a;
  --accent-dark: #a33a62;
  --chip: #f0dce6;
  --chip-active: #c44d7a;
  --shadow: 0 6px 20px rgba(60, 20, 40, 0.12);
  --donate: #6b5b95;
  --donate-dark: #55487a;
}

[data-theme="forest"] {
  --bg: #eef4ee;
  --ink: #1a261c;
  --muted: #55665a;
  --accent: #3d8b5a;
  --accent-dark: #2f6e47;
  --chip: #dce9df;
  --chip-active: #3d8b5a;
  --shadow: 0 6px 20px rgba(20, 45, 28, 0.12);
  --donate: #3d7a6a;
  --donate-dark: #2d5e52;
}

/* deep night */
[data-theme="ink"] {
  --bg: #e6e8ee;
  --ink: #12141c;
  --muted: #555a68;
  --accent: #3a4258;
  --accent-dark: #2a3044;
  --chip: #d5d8e2;
  --chip-active: #3a4258;
  --shadow: 0 6px 20px rgba(10, 12, 24, 0.14);
  --donate: #4a6290;
  --donate-dark: #384d73;
}

/* warm clay (no yellow CTA) */
[data-theme="sunset"] {
  --bg: #f5f0ec;
  --ink: #261c18;
  --muted: #6b5c54;
  --accent: #c46a52;
  --accent-dark: #a85540;
  --chip: #efe0d8;
  --chip-active: #c46a52;
  --shadow: 0 6px 20px rgba(50, 25, 15, 0.12);
  --donate: #5a7a96;
  --donate-dark: #456078;
}

/* sand / parchment */
[data-theme="sand"] {
  --bg: #f3efe6;
  --ink: #2a261c;
  --muted: #6b6558;
  --accent: #a68b5b;
  --accent-dark: #8a7249;
  --chip: #e8e0d0;
  --chip-active: #a68b5b;
  --shadow: 0 6px 20px rgba(50, 40, 20, 0.12);
  --donate: #5c7a8f;
  --donate-dark: #465f72;
}

/* rose clay */
[data-theme="rose"] {
  --bg: #f7eef0;
  --ink: #2a1c20;
  --muted: #6d585e;
  --accent: #b86b7a;
  --accent-dark: #9a5462;
  --chip: #efdce1;
  --chip-active: #b86b7a;
  --shadow: 0 6px 20px rgba(55, 25, 35, 0.12);
  --donate: #6a7aa8;
  --donate-dark: #53628a;
}

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

html,
body {
  margin: 0;
  height: 100%;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  overscroll-behavior: none;
}

body {
  min-height: 100dvh;
  min-height: 100svh;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* SEO keyword block: available to crawlers, not in the way of the PWA UI */
.seo-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Full-viewport app: stage · print (settings FAB overlays top-right) */
#app {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100dvh;
  height: 100svh;
  max-height: 100dvh;
  max-height: 100svh;
  width: 100%;
  max-width: none;
  margin: 0;
  padding:
    calc(6px + var(--safe-t))
    max(var(--pad-x), var(--safe-r))
    calc(6px + var(--safe-b))
    max(var(--pad-x), var(--safe-l));
  gap: 6px;
  position: relative;
  overflow: hidden;
}

/* —— Floating FABs: left tools · right help/legal/settings —— */
.top-bar {
  position: absolute;
  top: calc(6px + var(--safe-t));
  left: max(6px, var(--safe-l));
  right: max(6px, var(--safe-r));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  z-index: 40;
  pointer-events: none;
}

.top-left,
.top-right {
  display: flex;
  gap: 5px;
  pointer-events: none;
}

.top-left .fab,
.top-right .fab {
  pointer-events: auto;
}

.fab {
  border: none;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow);
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
  display: grid;
  place-items: center;
  line-height: 1;
}

.fab-sm {
  width: 38px;
  height: 38px;
  font-size: 0.88rem;
  padding: 0;
}

.fab:active {
  transform: scale(0.96);
}

.fab.chip-toggle[aria-pressed="false"] {
  opacity: 0.42;
  background: #e8e8e8;
}

/* Compact settings under top-right */
.settings-panel {
  position: absolute;
  top: calc(50px + var(--safe-t));
  right: max(6px, var(--safe-r));
  z-index: 50;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px 10px 10px;
  display: grid;
  gap: 8px;
  width: min(240px, calc(100vw - 16px));
  animation: pop 0.15s ease-out;
}

.settings-panel[hidden] {
  display: none;
}

.settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
}

.settings-brand-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.settings-brand {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* Tiny legal mark next to brand */
.settings-legal {
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.65;
}

.settings-legal:hover,
.settings-legal:focus-visible {
  opacity: 1;
  color: var(--ink);
  background: var(--chip);
  outline: none;
}

.settings-close {
  border: none;
  background: var(--chip);
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  width: 32px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

/* Paper + layout side by side, icon tight to select */
.settings-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.set-mini {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
}

.set-icon {
  font-size: 0.95rem;
  width: 1.15rem;
  text-align: center;
  flex: 0 0 auto;
  line-height: 1;
}

.set-mini select {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid #d5dde4;
  border-radius: 8px;
  padding: 5px 4px;
  background: var(--bg);
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.settings-lang {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.lang-panel-inline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}

.lang-chip {
  border: 1px solid #d5dde4;
  background: var(--bg);
  border-radius: 7px;
  font: inherit;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 5px 1px;
  cursor: pointer;
  color: var(--ink);
}

.lang-chip.active {
  background: var(--chip-active);
  border-color: var(--chip-active);
  color: #fff;
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* —— Stage: max paper, chevrons on sides —— */
.stage {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
  touch-action: pan-y;
  user-select: none;
  gap: 4px;
  /* room so ⚙ does not cover the sheet */
  padding-top: 4px;
}

.frame-row {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: var(--chevron-w) minmax(0, 1fr) var(--chevron-w);
  align-items: center;
  gap: 2px;
  min-height: 0;
  width: 100%;
}

.nav-chevron {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1;
  height: min(120px, 40%);
  min-height: 48px;
  width: 100%;
  padding: 0;
  cursor: pointer;
  border-radius: 12px;
  display: grid;
  place-items: center;
  opacity: 0.55;
  transition: opacity 0.15s, background 0.15s;
}

.nav-chevron:hover,
.nav-chevron:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, 0.55);
  outline: none;
}

.nav-chevron:active {
  opacity: 1;
  transform: scale(0.94);
}

.frame-row {
  container-type: size;
}

.paper {
  background: var(--paper);
  box-shadow: var(--shadow);
  border-radius: 4px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: 1px solid #eee4da;
  /* Fit largest A4 inside the middle grid cell (width & height constrained) */
  aspect-ratio: 210 / 297;
  width: min(100%, calc(100cqh * 210 / 297));
  height: min(100%, calc(100cqw * 297 / 210));
  max-width: 100%;
  max-height: 100%;
}

.paper.paper-letter {
  aspect-ratio: 8.5 / 11;
  width: min(100%, calc(100cqh * 8.5 / 11));
  height: min(100%, calc(100cqw * 11 / 8.5));
}

.motif-wrap {
  flex: 1 1 auto;
  width: 88%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4%;
  transition: transform 0.25s ease;
}

.paper.is-blank .motif-wrap {
  display: none;
}

.motif-wrap img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

/* —— Blank free-draw page + kid text shapes (not chat bubbles) —— */
.blank-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* keep pinches from scrolling the page behind the sheet */
  touch-action: none;
}

.blank-layer:not([hidden]) {
  pointer-events: auto;
}

.balloons {
  position: absolute;
  inset: 0;
}

.text-shape {
  position: absolute;
  /* width/height set in JS as % of paper — no tight max-width lock */
  min-width: 12%;
  max-width: 94%;
  min-height: 10%;
  max-height: 80%;
  transform: translate(-50%, -50%) var(--shape-tf, rotate(0deg));
  transform-origin: center center;
  touch-action: none;
  cursor: grab;
  z-index: 3;
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
}

.text-shape:active {
  cursor: grabbing;
}

.text-shape .shape-body {
  position: relative;
  background: #fff;
  border: 0.75px solid #222;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  container-type: size;
  overflow: hidden;
}

.text-shape .text-layer {
  position: absolute;
  inset: 8%;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
}

/* Arc text (SVG) — follows curve up/down */
.text-shape .text-arc-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.text-shape .text-arc-letters {
  fill: transparent;
  stroke: #222;
  stroke-width: 0.9;
  paint-order: stroke fill;
  font-weight: 700;
  font-size: calc(9px * var(--fs, 1));
  letter-spacing: 0.06em;
}

/* Cloud — free width + height */
.text-shape.shape-cloud .shape-body {
  border-radius: 48% 52% 50% 50% / 58% 58% 42% 42%;
  padding: 14px 18px;
  border-width: 0.75px;
}

/* Circle stays round (height follows width via aspect-ratio on host) */
.text-shape.shape-circle .shape-body {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  padding: 14%;
}

/* Star */
.text-shape.shape-star .shape-body {
  border: none;
  background: transparent;
  padding: 22% 18% 18%;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 0.75px #222;
  /* fallback ring via filter for browsers weak on clip+border */
  filter: drop-shadow(0 0 0.4px #222) drop-shadow(0 0 0.4px #222);
}

/* Heart */
.text-shape.shape-heart .shape-body {
  border: none;
  background: transparent;
  padding: 22% 14% 16%;
  clip-path: path(
    "M 50 88 C 20 65 5 45 5 28 C 5 12 18 5 30 5 C 40 5 47 12 50 20 C 53 12 60 5 70 5 C 82 5 95 12 95 28 C 95 45 80 65 50 88 Z"
  );
  background: #fff;
  filter: drop-shadow(0 0 0.4px #222) drop-shadow(0 0 0.4px #222);
  min-width: 0;
  min-height: 0;
}

/* Box — classic writing frame */
.text-shape.shape-box .shape-body {
  border-radius: 6px;
  border-width: 0.75px;
  border-style: solid;
  border-color: #222;
  min-height: 0;
}

/* Flat text: stretches with cloud (scaleX from width, scaleY from height) */
.text-shape textarea {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 2em;
  border: none;
  resize: none;
  background: transparent;
  font: inherit;
  font-size: calc(0.95rem * var(--fs, 1));
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.1em;
  word-spacing: 0.05em;
  outline: none;
  text-align: center;
  -webkit-text-stroke: 0.75px #222;
  paint-order: stroke fill;
  color: transparent;
  caret-color: #111;
  transform: scale(var(--tx, 1), var(--ty, 1));
  transform-origin: center center;
}

.text-shape.has-arc textarea {
  /* when arcing, SVG is the look; textarea for edit */
  position: absolute;
  inset: 10%;
  width: auto;
  height: auto;
  opacity: 0.12;
  transform: none;
  font-size: 0.85rem;
  -webkit-text-stroke: 0;
  color: #111;
}

.text-shape.has-arc textarea:focus,
.text-shape.has-arc textarea:not(.is-dimmed) {
  opacity: 0.92;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  z-index: 3;
}

.text-shape textarea:focus {
  color: #111;
  -webkit-text-stroke: 0;
  transform: scale(var(--tx, 1), var(--ty, 1));
}

.text-shape .shape-tools {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  z-index: 4;
  flex-wrap: nowrap;
}

.text-shape .shape-cycle,
.text-shape .shape-rot90,
.text-shape .shape-arc-up,
.text-shape .shape-arc-dn,
.text-shape .balloon-remove {
  width: 26px;
  height: 26px;
  border: 0.75px solid #222;
  border-radius: 999px;
  background: #fff;
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  color: #222;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  flex: 0 0 auto;
}

/* Corner resize handle — larger for touch */
.text-shape .shape-resize {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 28px;
  height: 28px;
  border: 0.75px solid #222;
  border-radius: 8px;
  background: #fff;
  cursor: nwse-resize;
  z-index: 6;
  touch-action: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}

.text-shape .shape-resize::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  pointer-events: none;
}

.fab-plus {
  position: absolute;
  right: 8%;
  bottom: 14%;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(232, 78, 44, 0.35);
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 0 0 2px;
}

.fab-plus:active {
  transform: scale(0.95);
}

/* Title inside the printable sheet — loose tracking, soft 0.75 outline */
.motif-title {
  flex: 0 0 auto;
  margin: 0 0 5.5% 0;
  padding: 0 10%;
  width: 100%;
  font-size: clamp(1rem, 4.2cqw, 1.45rem);
  font-weight: 700;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 0.75px #222;
  paint-order: stroke fill;
  letter-spacing: 0.14em;
  line-height: 1.4;
  word-spacing: 0.08em;
}

.motif-title.is-hidden {
  display: none;
}

.paper.is-blank .motif-title {
  display: none !important;
}

.dots {
  display: flex;
  gap: 5px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
  padding: 0 2px 2px;
  flex: 0 0 auto;
}

.dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d9cfc4;
  transition: background 0.15s, transform 0.15s;
}

.dots span.active {
  background: var(--accent);
  transform: scale(1.25);
}

.paper.swipe-left {
  animation: swipeL 0.22s ease;
}
.paper.swipe-right {
  animation: swipeR 0.22s ease;
}

@keyframes swipeL {
  0% { transform: translateX(0); opacity: 1; }
  40% { transform: translateX(-20px); opacity: 0.45; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes swipeR {
  0% { transform: translateX(0); opacity: 1; }
  40% { transform: translateX(20px); opacity: 0.45; }
  100% { transform: translateX(0); opacity: 1; }
}

/* —— Compact print footer —— */
.actions {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 8px 0;
  flex: 0 0 auto;
}

.btn-print {
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 10px 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(232, 78, 44, 0.32);
  width: auto;
  max-width: none;
}

.btn-print:active {
  transform: scale(0.98);
}

.btn-print-icon {
  font-size: 1.1rem;
}

/* Landscape / short height: tighter chrome, still full motif */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --chevron-w: 36px;
  }

  .btn-print {
    padding: 8px 22px;
    font-size: 0.95rem;
  }

  .motif-title {
    margin-bottom: 3%;
  }
}

/* Wider desktop: keep vertical paper, don't stretch to ultra-wide */
@media (min-width: 720px) {
  #app {
    max-width: 640px;
    margin: 0 auto;
  }
}

/* —— Dialogs —— */
.tutorial-dialog,
.thanks-dialog {
  border: none;
  border-radius: 22px;
  padding: 0;
  max-width: 360px;
  width: calc(100% - 32px);
  box-shadow: var(--shadow);
}

.tutorial-dialog::backdrop,
.thanks-dialog::backdrop {
  background: rgba(30, 20, 10, 0.45);
}

.tutorial-card {
  padding: 26px 22px 20px;
  display: grid;
  gap: 10px;
  text-align: center;
  justify-items: center;
}

.tutorial-step-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.tutorial-icon {
  font-size: 2.4rem;
  line-height: 1;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  background: var(--chip);
  border-radius: 50%;
  margin: 4px 0;
}

.tutorial-card h2 {
  margin: 0;
  font-size: 1.3rem;
}

.tutorial-card p#tutorial-body {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.98rem;
}

.tutorial-dots {
  display: flex;
  gap: 7px;
  justify-content: center;
  padding: 4px 0 2px;
}

.tutorial-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d9cfc4;
}

.tutorial-dots span.active {
  background: var(--accent);
  transform: scale(1.2);
}

.tutorial-actions {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.btn-tutorial-next {
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  font: inherit;
  font-weight: 800;
  padding: 12px 22px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(232, 78, 44, 0.3);
}

.thanks-card {
  padding: 22px 18px 16px;
  display: grid;
  gap: 10px;
  text-align: center;
}

.impressum-card {
  padding: 28px 24px 22px;
  display: grid;
  gap: 12px;
  text-align: center;
}

.thanks-card h2,
.impressum-card h2 {
  margin: 0;
  font-size: 1.28rem;
}

.thanks-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
  font-size: 0.92rem;
  padding: 0 4px;
}

.impressum-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.impressum-body {
  font-size: 0.98rem;
}

/* Compact donate strip: chips + Danke */
.donate-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  padding: 8px;
  margin: 2px 0 0;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--donate) 8%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--donate) 18%, transparent);
  border-radius: 14px;
}

.donate-amounts {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}

.amt-chip {
  border: 1px solid #d5dde4;
  background: #fff;
  border-radius: 10px;
  padding: 5px 7px;
  min-width: 40px;
  cursor: pointer;
  display: grid;
  place-items: center;
  gap: 0;
  font: inherit;
  color: var(--ink);
}

.amt-chip .amt-ico {
  font-size: 0.88rem;
  line-height: 1;
}

.amt-chip .amt-val {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.amt-chip.active {
  border-color: var(--donate);
  background: color-mix(in srgb, var(--donate) 16%, #fff);
  box-shadow: inset 0 0 0 1px var(--donate);
}

.btn-donate {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: linear-gradient(180deg, var(--donate) 0%, var(--donate-dark) 100%);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow:
    0 4px 12px color-mix(in srgb, var(--donate) 40%, transparent),
    0 0 0 1px color-mix(in srgb, var(--donate-dark) 30%, transparent);
}

.btn-donate:active {
  transform: scale(0.98);
}

/* Weiter malen — colored + soft glow */
.btn-continue {
  border: none;
  margin-top: 4px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 1rem;
  padding: 12px 18px;
  cursor: pointer;
  box-shadow:
    0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent),
    0 0 24px color-mix(in srgb, var(--accent) 28%, transparent);
}

.btn-continue:active {
  transform: scale(0.98);
}

.btn-close {
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
}

.impressum-dialog {
  border: none;
  border-radius: 22px;
  padding: 0;
  max-width: 360px;
  width: calc(100% - 32px);
  box-shadow: var(--shadow);
}

.impressum-dialog::backdrop {
  background: rgba(20, 30, 40, 0.45);
}

/* —— Print: single page or multi-sheet poster tiles —— */
.print-root {
  display: none;
}

@media print {
  @page {
    margin: 8mm;
  }

  html,
  body {
    background: #fff !important;
    height: auto !important;
    margin: 0 !important;
  }

  #app,
  .tutorial-dialog,
  .thanks-dialog,
  .impressum-dialog {
    display: none !important;
  }

  .print-root {
    display: block !important;
  }

  .print-page {
    page-break-after: always;
    break-after: page;
    page-break-inside: avoid;
    break-inside: avoid;
    width: 100%;
    /* Prefer page box over vh — vh is flaky in print engines */
    height: 100%;
    min-height: 260mm;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .print-page:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  /*
   * Poster tiles: one image spans cols×rows pages.
   * left/top shift by full page widths so each sheet is a non-empty slice.
   * object-fit: fill → every tile has lines (no empty corners).
   */
  .print-page.print-tile {
    min-height: 0;
    height: 285mm; /* A4 content-ish under ~6mm margins */
  }

  .print-poster-src {
    position: absolute;
    display: block;
    /* Size = full poster in page-percentage units of THIS page */
    width: calc(var(--cols, 1) * 100%);
    height: calc(var(--rows, 1) * 100%);
    left: calc(var(--col, 0) * -100%);
    top: calc(var(--row, 0) * -100%);
    max-width: none !important;
    max-height: none !important;
    margin: 0;
    padding: 0;
    object-fit: fill;
    object-position: center;
  }

  .print-poster-src.is-rotated {
    /* Keep tile math; rotation is cosmetic best-effort on multi-sheet */
    transform: rotate(var(--rot, 0deg));
    transform-origin: center center;
  }

  .print-title-tile {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4%;
    z-index: 2;
    margin: 0;
    font-weight: 700;
    font-size: 16pt;
    color: transparent;
    -webkit-text-stroke: 0.75pt #222;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
  }

  .print-tile-mark {
    position: absolute;
    top: 2mm;
    right: 2mm;
    font-size: 7pt;
    color: #999;
    z-index: 2;
  }

  /* Single page: simple centered sheet */
  .print-page.single {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4%;
    position: relative;
    height: auto;
    min-height: 260mm;
  }

  .print-page.single.is-blank {
    justify-content: stretch;
    height: 285mm;
  }

  .print-page.single img {
    max-width: 90%;
    max-height: 230mm;
    object-fit: contain;
  }

  .print-page.single .print-title {
    margin-top: 3%;
    font-weight: 700;
    font-size: 20pt;
    color: transparent;
    -webkit-text-stroke: 0.75pt #222;
    letter-spacing: 0.14em;
    line-height: 1.4;
  }

  .print-page .print-shape {
    position: absolute;
    transform: translate(-50%, -50%) var(--shape-tf, rotate(0deg) scale(1));
    transform-origin: center center;
    width: var(--shape-w, 32%);
    min-width: 18%;
    max-width: 70%;
  }

  .print-page .print-shape .shape-body {
    background: #fff;
    border: 0.75pt solid #222;
    padding: 8pt 10pt;
    text-align: center;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    box-sizing: border-box;
  }

  .print-page .print-shape .text-flat-print {
    font-weight: 700;
    font-size: calc(11pt * var(--fs, 1));
    letter-spacing: 0.1em;
    line-height: 1.35;
    color: transparent;
    -webkit-text-stroke: 0.75pt #222;
    transform: scale(var(--tx, 1), var(--ty, 1));
    transform-origin: center center;
    max-width: 100%;
    word-break: break-word;
  }

  .print-page .print-shape .text-arc-svg {
    width: 100%;
    height: 100%;
  }

  .print-page .print-shape .text-arc-letters {
    fill: transparent;
    stroke: #111;
    stroke-width: 0.85;
    paint-order: stroke fill;
    font-weight: 700;
    font-size: calc(8px * var(--fs, 1));
    letter-spacing: 0.05em;
  }

  .print-page .print-shape.shape-cloud .shape-body {
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  }

  .print-page .print-shape.shape-circle .shape-body {
    border-radius: 50%;
    aspect-ratio: 1;
    min-width: 28mm;
    min-height: 28mm;
    display: grid;
    place-items: center;
  }

  .print-page .print-shape.shape-box .shape-body {
    border-radius: 4pt;
  }

  .print-page .print-shape.shape-star .shape-body {
    border: none;
    clip-path: polygon(
      50% 0%,
      61% 35%,
      98% 35%,
      68% 57%,
      79% 91%,
      50% 70%,
      21% 91%,
      32% 57%,
      2% 35%,
      39% 35%
    );
    filter: drop-shadow(0 0 0.3pt #222);
    padding: 18% 14% 14%;
  }

  .print-page .print-shape.shape-heart .shape-body {
    border: none;
    clip-path: path(
      "M 50 88 C 20 65 5 45 5 28 C 5 12 18 5 30 5 C 40 5 47 12 50 20 C 53 12 60 5 70 5 C 82 5 95 12 95 28 C 95 45 80 65 50 88 Z"
    );
    filter: drop-shadow(0 0 0.3pt #222);
    padding: 22% 12% 14%;
    min-width: 32mm;
    min-height: 30mm;
  }

  .print-page .fab-plus,
  .print-page .balloon-remove,
  .print-page .shape-tools,
  .print-page .shape-resize,
  .print-page .shape-arc-up,
  .print-page .shape-arc-dn {
    display: none !important;
  }
}