/* ================================================================
   Ummu Umāra – Das mutige Herz · Stil (eigene Farbwelt: Morgenrot – Pfirsich/Rosé + Olivgrün)
   Knöpfe in Kissenform mit genähter Naht, Tafeln wie Stofftücher mit kleinem Saum oben,
   Titel auf einer Zeltbahn im Wind, Kapitelwahl als Dattelpalme, Namensschild als Wassertropfen.
   ================================================================ */
@font-face { font-family: 'Signika'; font-weight: 400; font-display: swap; src: url('../fonts/signika-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Signika'; font-weight: 400; font-display: swap; src: url('../fonts/signika-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Signika'; font-weight: 600; font-display: swap; src: url('../fonts/signika-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Signika'; font-weight: 600; font-display: swap; src: url('../fonts/signika-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Signika'; font-weight: 700; font-display: swap; src: url('../fonts/signika-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Signika'; font-weight: 700; font-display: swap; src: url('../fonts/signika-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Comfortaa'; font-weight: 700; font-display: swap; src: url('../fonts/comfortaa-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Comfortaa'; font-weight: 700; font-display: swap; src: url('../fonts/comfortaa-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02BE, U+02C0-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rakkas'; font-weight: 400; font-display: swap; src: url('../fonts/rakkas-arabic-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Amiri'; font-weight: 400; font-display: swap; src: url('../fonts/amiri-arabic-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Amiri'; font-weight: 700; font-display: swap; src: url('../fonts/amiri-arabic-700-normal.woff2') format('woff2'); }

:root {
  --night: #2b2a1c;      /* Oliv-Nacht (Text, Nacht, theme-color) */
  --night2: #3e3c28;
  --olive: #8a9a3e;      /* Olivgrün */
  --olive2: #55642a;     /* dunkles Oliv */
  --olivePale: #e4e8c4;
  --peach: #ffc4a3;      /* Pfirsich */
  --peach2: #ffab85;
  --peachPale: #ffe9dc;
  --rose: #f28c8c;       /* Rosé */
  --rose2: #d9637a;      /* tiefes Rosé */
  --rosePale: #fde3e3;
  --cream: #fff6ee;      /* Creme (Tuch) */
  --cream2: #fbeadc;
  --water: #5fb8ec;
  --water2: #2f7fc4;
  --ink: #3a2f22;        /* Text auf hellen Tafeln */
  --muted: #7d6c58;
  --panel: rgba(255, 246, 238, .96);
  --good: #6b8a2a;
  --bad: #d9637a;
  --radius: 16px;
  --shadow: 0 12px 30px rgba(43, 42, 28, .3);
  --font: 'Signika', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --font-title: 'Comfortaa', 'Signika', 'Trebuchet MS', system-ui, sans-serif;
  --ar: 'Amiri', 'Scheherazade New', 'Geeza Pro', 'Traditional Arabic', 'Noto Naskh Arabic', serif;
  --ar-title: 'Rakkas', 'Amiri', 'Geeza Pro', serif;
  --seam: 2px dashed rgba(217, 99, 122, .55);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--night); overflow: hidden; }
body { font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
button { font-family: inherit; }

.game-root { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(180deg, #5a6fb0, #ffb8a0 70%, #f6d6c4); touch-action: pan-y; }
.game-root.playing { touch-action: none; }
.game-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; outline: none; transition: filter 1.2s ease; }
.hidden { display: none !important; }

/* ---------------------------------------------------------------- Lader: ein Tropfen fällt in die Schale */
#loader { position: absolute; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: linear-gradient(180deg, #4a5a9a, #f2a898 64%, #ffd8c4); transition: opacity .8s ease; }
#loader.done { opacity: 0; pointer-events: none; }
.ld-scene { position: relative; width: 180px; height: 150px; }
.ld-drop { position: absolute; left: 50%; top: 0; width: 26px; height: 26px; margin-left: -13px; background: linear-gradient(160deg, #d8f2ff, var(--water) 60%, var(--water2)); border-radius: 50% 0 50% 50%; transform: rotate(-45deg); box-shadow: 0 0 0 3px var(--cream); animation: ldDrop 1.4s cubic-bezier(.5, 0, .9, .5) infinite; }
@keyframes ldDrop { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 62% { top: 88px; opacity: 1; } 66%, 100% { top: 92px; opacity: 0; } }
.ld-bowl { position: absolute; left: 30px; right: 30px; bottom: 6px; height: 46px; border-radius: 0 0 60px 60px / 0 0 46px 46px; background: linear-gradient(180deg, #c07a46, #8a4a22); border: 3px solid #5a2e14; }
.ld-bowl::before { content: ''; position: absolute; left: 6px; right: 6px; top: 4px; height: 12px; border-radius: 50%; background: radial-gradient(ellipse, #bfe8ff, #5fb8ec); }
.ld-ripple { position: absolute; left: 50%; bottom: 40px; width: 20px; height: 8px; margin-left: -10px; border-radius: 50%; border: 2px solid #fff; opacity: 0; animation: ldRip 1.4s ease-out infinite; }
@keyframes ldRip { 0%, 64% { opacity: 0; transform: scale(.3); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(4.2); } }
.ld-ar { font-family: var(--ar-title); font-size: 50px; color: var(--cream); text-shadow: 0 4px 16px rgba(43, 42, 28, .45); line-height: 1.3; }
.nowebgl { max-width: 460px; text-align: center; padding: 0 20px; font-size: 18px; color: var(--cream); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- Knöpfe: Kissenform mit genähter Naht */
.btn { position: relative; appearance: none; border: 3px solid var(--olive2); background: var(--cream); color: var(--ink); font-weight: 700; font-size: 18px; padding: 11px 28px; cursor: pointer; border-radius: 999px; transition: transform .15s ease, background .2s ease, box-shadow .2s; min-height: 50px; box-shadow: 0 4px 0 var(--olive2), 0 8px 16px rgba(43, 42, 28, .22); }
.btn::after { content: ''; position: absolute; inset: 4px; border-radius: inherit; border: var(--seam); pointer-events: none; }
.btn:hover { background: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--olive2), 0 4px 8px rgba(43, 42, 28, .22); }
.btn:focus-visible { outline: 3px solid var(--water); outline-offset: 3px; }
.btn.primary { background: linear-gradient(180deg, #ffb6a4, var(--rose) 50%, var(--rose2)); color: #fff; border-color: #8a3448; box-shadow: 0 4px 0 #8a3448, 0 8px 18px rgba(138, 52, 72, .35); text-shadow: 0 1px 0 rgba(90, 30, 40, .4); }
.btn.primary::after { border-color: rgba(255, 246, 238, .75); }
.btn.primary:hover { background: linear-gradient(180deg, #ffc4b4, #f6a0a0 50%, #e2748a); }
.btn.ghost { background: rgba(255, 246, 238, .78); border-color: rgba(85, 100, 42, .7); }
.btn.big { font-size: 22px; padding: 13px 36px; min-height: 58px; }
.btn:disabled { opacity: .5; cursor: default; }
.row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.col { display: flex; flex-direction: column; gap: 12px; align-items: stretch; width: min(340px, 86vw); }

/* Tafeln: Stofftuch mit genähter Naht und kleinem Saum oben */
.panel, .set-list, .about-text, .hud-obj, .dlg-box, .stat, .v-badge, .mg-hint, .vp-card, .pc-card, .rh-card {
  position: relative; background: var(--panel); border: 2.5px solid var(--olive2); border-radius: var(--radius);
  outline: var(--seam); outline-offset: -7px; box-shadow: var(--shadow);
}
.set-list::after, .hud-obj::after, .dlg-box::after, .vp-card::after, .pc-card::after, .rh-card::after, .mg-hint::after {
  content: ''; position: absolute; left: 14px; right: 14px; top: -7px; height: 7px; pointer-events: none;
  background: radial-gradient(circle at 6px 7px, var(--rose) 5px, transparent 5.5px) 0 0 / 12px 7px repeat-x;
}

/* ---------------------------------------------------------------- Menüs */
.menus { position: absolute; inset: 0; z-index: 70; display: none; }
.menus.open { display: block; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 24px 18px; overflow-y: auto; background: linear-gradient(180deg, rgba(90, 111, 176, .45), rgba(255, 184, 160, .5)); animation: fadeIn .45s ease; }
.screen h2 { font-family: var(--font-title); font-size: clamp(28px, 4.4vw, 44px); margin: 0 0 18px; color: var(--cream); text-shadow: 0 3px 0 var(--rose2), 0 6px 18px rgba(43, 42, 28, .5); font-weight: 700; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.screen > :first-child { margin-top: auto; }
.screen > :last-child { margin-bottom: auto; }
.screen > * { flex-shrink: 0; }

/* ---------------- Hauptmenü: Titel auf einer Zeltbahn zwischen zwei Palmstämmen (links), Ummu Umāra in 3D (rechts) */
.title-screen { background: linear-gradient(90deg, rgba(43, 42, 28, .42) 0%, rgba(43, 42, 28, .14) 46%, rgba(43, 42, 28, 0) 70%); align-items: flex-start; padding-left: clamp(18px, 6vw, 96px); }
.title-wrap { display: flex; flex-direction: column; align-items: center; width: min(500px, 48vw); animation: rise .9s cubic-bezier(.2, .8, .2, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.t-banner { position: relative; width: 100%; padding: 26px 34px 0; margin-bottom: 10px; }
.t-pole { position: absolute; top: 0; bottom: -40px; width: 16px; border-radius: 6px; background: repeating-linear-gradient(180deg, #8a5a34 0 10px, #6e4426 10px 13px); box-shadow: inset -3px 0 0 rgba(0, 0, 0, .2), 0 6px 14px rgba(43, 42, 28, .35); }
.t-pole.l { left: 4px; } .t-pole.r { right: 4px; }
.t-pole::before { content: ''; position: absolute; left: 50%; top: -14px; width: 70px; height: 26px; margin-left: -35px; background: radial-gradient(ellipse at 50% 100%, var(--olive) 0 45%, transparent 47%), radial-gradient(ellipse at 20% 100%, var(--olive2) 0 35%, transparent 37%), radial-gradient(ellipse at 80% 100%, var(--olive2) 0 35%, transparent 37%); }
.t-cloth { position: relative; transform-origin: 50% 0; animation: cloth 3.6s ease-in-out infinite, clothIn 1s cubic-bezier(.2, 1.3, .4, 1) both; background: linear-gradient(180deg, var(--cream), #fff0e4 60%, var(--peachPale)); border: 3px solid var(--rose2); border-bottom: 0; border-radius: 10px 10px 0 0; padding: 16px 18px 10px; box-shadow: 0 16px 30px rgba(43, 42, 28, .35); }
.t-cloth::before { content: ''; position: absolute; inset: 7px 7px -6px; border: var(--seam); border-bottom: 0; border-radius: 6px 6px 0 0; pointer-events: none; }
.t-cloth::after { content: ''; position: absolute; left: -30px; right: -30px; top: -2px; height: 2px; background: #8a6a44; }
@keyframes cloth { 0%, 100% { transform: skewX(0) rotate(0); } 30% { transform: skewX(-1.4deg) rotate(.6deg); } 65% { transform: skewX(1.2deg) rotate(-.5deg); } }
@keyframes clothIn { from { transform: scaleY(.1); opacity: 0; } to { transform: none; opacity: 1; } }
.tb-hem { position: absolute; left: -3px; right: -3px; bottom: -22px; width: calc(100% + 6px); height: 24px; display: block; animation: hem 1.8s ease-in-out infinite; }
@keyframes hem { 50% { transform: translateX(-6px) scaleY(1.15); } }
.t-text { position: relative; z-index: 1; text-align: center; }
.title-ar { font-family: var(--ar-title); font-size: clamp(34px, 5vw, 58px); line-height: 1.35; color: var(--rose2); text-shadow: 0 2px 0 #fff; }
.title-ar.small { font-size: 42px; margin-bottom: 0; color: var(--cream); text-shadow: 0 3px 0 var(--rose2); }
.title-main { font-family: var(--font-title); font-size: clamp(36px, 5.4vw, 64px); --tm: clamp(36px, 5.4vw, 64px); line-height: 1.02; margin: 0; font-weight: 700; color: var(--night); text-shadow: 0 3px 0 var(--peach); white-space: nowrap; }
.title-sub { font-family: var(--font-title); font-size: clamp(16px, 2.1vw, 24px); color: var(--olive2); font-weight: 700; margin-top: 6px; }
.title-tag { font-size: 15.5px; color: var(--ink); margin: 26px 0 14px; background: rgba(255, 246, 238, .88); padding: 4px 16px; border-radius: 999px; text-align: center; }
.title-buttons { display: flex; flex-direction: column; gap: 12px; width: min(330px, 80vw); margin-bottom: 14px; }
.light-note { font-size: 13px; color: var(--ink); max-width: 430px; line-height: 1.35; margin: 12px 0 0; padding: 7px 14px; background: rgba(255, 246, 238, .86); border-radius: 14px; text-align: center; }

.lang-switch { display: inline-flex; background: var(--panel); border: 2px solid var(--olive2); border-radius: 999px; padding: 4px; gap: 4px; }
.lang-switch button, .seg button { border: 0; background: transparent; color: var(--ink); font-weight: 700; font-size: 16px; padding: 7px 16px; border-radius: 999px; cursor: pointer; min-height: 38px; }
.lang-switch button.on, .seg button.on { background: var(--olive); color: #fff; }

/* ---------------- Kapitelwahl: Dattelpalme mit fünf Datteltrauben */
.pt-wrap { position: relative; width: min(860px, 96vw); height: min(440px, 62vh); }
.pt-crown { position: absolute; left: 0; top: 0; width: 100%; height: 72%; filter: drop-shadow(0 10px 14px rgba(43, 42, 28, .35)); }
.pt-bunches { position: absolute; inset: 0; }
.ch-card.pb-bunch { position: absolute; appearance: none; background: none; border: 0; padding: 0; cursor: pointer; width: clamp(110px, 16vw, 150px); display: flex; flex-direction: column; align-items: center; color: var(--ink); font-family: inherit;
  left: calc(10% + var(--i) * 20%); transform: translateX(-50%); top: calc(16% + (2 - (var(--i) - 2) * (var(--i) - 2) / 2) * 6%); transform-origin: 50% 0; animation: sway 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
@keyframes sway { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
.ch-card.pb-bunch:hover:not(:disabled) .pb-svg { transform: scale(1.08); }
.ch-card.pb-bunch:disabled { cursor: default; }
.pb-svg { width: 74%; height: auto; transition: transform .2s cubic-bezier(.2, 1.4, .4, 1); filter: drop-shadow(0 6px 8px rgba(43, 42, 28, .35)); }
.pb-bunch .ch-num { position: absolute; top: 18%; left: 8%; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: var(--rose2); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 16px; border: 2px solid var(--cream); }
.pb-bunch.locked .ch-num { background: #9aa07a; }
.pb-tag { position: relative; width: 100%; margin-top: 6px; background: var(--cream); border: 2.5px solid var(--olive2); border-radius: 14px; padding: 7px 6px; display: flex; flex-direction: column; gap: 2px; text-align: center; box-shadow: 0 6px 14px rgba(43, 42, 28, .25); outline: var(--seam); outline-offset: -6px; }
.pb-bunch.locked .pb-tag { background: #ece8d8; border-color: #9aa07a; color: #6a6a58; }
.ch-title { font-weight: 700; font-size: 15px; line-height: 1.15; }
.ch-sub { font-size: 12.5px; color: var(--muted); line-height: 1.2; }
.ch-done { position: absolute; top: 14%; right: 6%; width: 28px; height: 28px; color: #ffd36a; filter: drop-shadow(0 2px 3px rgba(43, 42, 28, .6)); }
.ch-grid { display: block; }

/* Einstellungen */
.set-list { display: flex; flex-direction: column; gap: 10px; width: min(620px, 94vw); padding: 20px 24px; margin-bottom: 18px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 17px; flex-wrap: wrap; }
.set-row > span { flex: 1 1 200px; }
.seg { display: inline-flex; background: var(--cream2); border: 2px solid var(--olive2); border-radius: 999px; padding: 4px; gap: 4px; }
input[type=range] { width: 200px; accent-color: var(--rose2); height: 28px; }

/* Für Eltern */
.about-text { width: min(760px, 94vw); max-height: 62vh; overflow-y: auto; padding: 12px 28px 22px; margin-bottom: 18px; font-size: 16px; line-height: 1.55; user-select: text; -webkit-user-select: text; }
.about-text h3 { color: var(--rose2); margin: 16px 0 4px; font-size: 19px; font-family: var(--font-title); }
.about-text ul { padding-left: 20px; margin: 6px 0; }
.about-text li { margin: 3px 0; }
.about-text code { background: var(--peachPale); padding: 1px 6px; border-radius: 6px; }
.pause-controls { max-width: 560px; text-align: center; color: var(--ink); font-size: 14px; margin-top: 22px; background: rgba(255, 246, 238, .88); padding: 8px 16px; border-radius: 14px; }

/* Kapitelende */
.done-stars { display: flex; gap: 8px; margin-bottom: 6px; }
.done-stars svg { width: 46px; height: 46px; color: #ffd36a; filter: drop-shadow(0 3px 0 var(--rose2)) drop-shadow(0 6px 12px rgba(43, 42, 28, .3)); animation: pop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.done-stars svg:nth-child(2) { width: 62px; height: 62px; animation-delay: .12s; }
.done-stars svg:nth-child(3) { animation-delay: .24s; }
@keyframes pop { from { transform: scale(0) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
.done-name { font-size: 20px; color: var(--ink); margin-top: -10px; background: rgba(255, 246, 238, .9); padding: 2px 16px; border-radius: 999px; }
.done-stats { display: flex; gap: 16px; margin-top: 18px; }
.stat { display: flex; flex-direction: column; align-items: center; padding: 12px 22px; min-width: 128px; }
.stat .ic { width: 30px; height: 30px; color: var(--water); }
.stat .ic-pearl { color: #b08ad8; }
.stat b { font-size: 26px; line-height: 1.1; }
.stat small { color: var(--muted); font-size: 14px; }

/* Abschluss & Quiz */
.v-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(740px, 94vw); }
.v-badge { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-weight: 700; font-size: 16.5px; opacity: .55; }
.v-badge .vi { width: 34px; height: 34px; flex: none; color: #a8a890; }
.v-badge.got { opacity: 1; border-color: var(--rose2); }
.v-badge.got .vi { color: var(--rose2); }
.end-text { max-width: 700px; text-align: center; font-size: 18.5px; line-height: 1.5; margin: 20px 16px 0; min-height: 3.2em; color: var(--ink); background: rgba(255, 246, 238, .92); border-radius: 18px; padding: 10px 18px; }
.end-text:empty { visibility: hidden; }
.end-text.in { animation: rise .6s ease; }
.quiz-head { color: var(--olive2); font-weight: 700; font-size: 17px; margin-bottom: 10px; background: rgba(255, 246, 238, .9); padding: 3px 16px; border-radius: 999px; }
.quiz-q { font-family: var(--font-title); font-size: clamp(21px, 3.2vw, 30px); font-weight: 700; text-align: center; max-width: 820px; line-height: 1.3; margin-bottom: 22px; color: var(--night); background: rgba(255, 246, 238, .94); padding: 12px 22px; border-radius: 22px; outline: var(--seam); outline-offset: -7px; }
.quiz-a { display: flex; flex-direction: column; gap: 14px; width: min(560px, 92vw); }
.btn.answer { font-size: 18px; padding: 14px 30px; text-align: center; font-weight: 600; }
.btn.answer.right { background: #e2efc0; border-color: var(--good); box-shadow: 0 4px 0 var(--good); }
.btn.answer.wrong { background: var(--rosePale); border-color: var(--bad); box-shadow: 0 4px 0 var(--bad); animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.quiz-fb { margin-top: 16px; font-size: 20px; font-weight: 700; min-height: 1.5em; color: var(--cream); text-shadow: 0 2px 6px rgba(43, 42, 28, .6); }
.quiz-score { font-size: 24px; margin: -6px 0 6px; background: rgba(255, 246, 238, .9); padding: 4px 18px; border-radius: 999px; }
.quiz-score b { font-size: 40px; color: var(--rose2); }

/* ---------------------------------------------------------------- HUD */
.hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.hud-obj { position: absolute; top: max(16px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 10px; padding: 11px 16px 11px 11px; max-width: min(440px, 62vw); }
.hud-obj.pop { animation: objPop .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes objPop { from { transform: translateX(-20px); opacity: 0; } to { transform: none; opacity: 1; } }
.hud-obj-icon { width: 32px; height: 32px; flex: none; color: var(--rose2); }
.hud-obj-text { font-weight: 700; font-size: 16.5px; line-height: 1.2; }
.hud-obj-hint { font-size: 13.5px; color: var(--muted); line-height: 1.2; margin-top: 2px; }
.hud-obj-count { margin-left: 6px; background: var(--olive); color: #fff; font-weight: 800; border-radius: 999px; padding: 2px 11px; font-size: 16px; border: 2px solid var(--olive2); }
.hud-obj-count.bump { animation: bump .45s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes bump { 40% { transform: scale(1.35); } }
.hud-right { position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: flex; gap: 8px; align-items: center; }
.hud-chip { display: flex; align-items: center; gap: 5px; background: var(--panel); border: 2px solid var(--olive2); border-radius: 999px; padding: 4px 12px 4px 8px; font-weight: 700; font-size: 16px; box-shadow: 0 4px 12px rgba(43, 42, 28, .2); }
.hud-chip .ic { width: 22px; height: 22px; }
.hud-drops .ic { color: var(--water); }
.hud-pearls .ic { color: #b08ad8; }
.hud-btn { pointer-events: auto; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--olive2); background: var(--panel); color: var(--olive2); padding: 9px; cursor: pointer; box-shadow: 0 4px 12px rgba(43, 42, 28, .2); }
.hud-btn:hover { background: #fff; }
.hud-btn svg { width: 100%; height: 100%; display: block; }

/* Wasserschlauch-Anzeige (oben rechts unter den Zählern) */
.qirba { position: absolute; top: calc(max(14px, env(safe-area-inset-top)) + 54px); right: max(14px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 6px; background: var(--panel); border: 2px solid var(--olive2); border-radius: 999px; padding: 4px 12px 4px 6px; box-shadow: 0 4px 12px rgba(43, 42, 28, .2); outline: var(--seam); outline-offset: -5px; }
.qb-bag { width: 32px; height: 32px; display: block; }
.qb-bag svg { width: 100%; height: 100%; display: block; }
.qb-sips { display: flex; gap: 4px; }
.qb-sips i { width: 16px; height: 16px; border-radius: 50% 0 50% 50%; transform: rotate(-45deg); background: #e6dccc; border: 2px solid #b8a890; transition: background .3s, border-color .3s; }
.qb-sips i.on { background: linear-gradient(160deg, #d8f2ff, var(--water) 60%, var(--water2)); border-color: var(--water2); }
.qirba.pop { animation: bump .45s cubic-bezier(.2, 1.8, .4, 1); }
.qirba.slosh .qb-bag { animation: slosh .5s ease-in-out infinite; }
@keyframes slosh { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.qirba.empty .qb-bag { opacity: .65; }

.npc-label { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 5px; white-space: nowrap; background: rgba(255, 246, 238, .9); color: var(--ink); border: 1.5px solid var(--olive2); padding: 1px 10px; border-radius: 999px; font-weight: 700; font-size: 14px; transition: opacity .2s; will-change: transform; }
.npc-label .q { display: none; width: 20px; height: 20px; border-radius: 50%; background: var(--rose2); color: #fff; font-weight: 800; text-align: center; line-height: 20px; font-size: 14px; animation: hop 1s ease-in-out infinite; }
.npc-label.quest .q { display: inline-block; }
@keyframes hop { 50% { transform: translateY(-4px); } }
.hud-prompt { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; background: var(--peach); color: var(--night); font-weight: 800; font-size: 16px; padding: 5px 16px 5px 6px; border-radius: 999px; border: 2px solid var(--rose2); box-shadow: 0 6px 18px rgba(43, 42, 28, .3); will-change: transform; animation: promptIn .25s ease; }
.hud-prompt .key { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid var(--rose2); font-size: 15px; }
.hud-prompt.touch .key { display: none; }
.hud-prompt.touch { padding-left: 16px; }
@keyframes promptIn { from { opacity: 0; } to { opacity: 1; } }
.hud-edge { position: absolute; left: 0; top: 0; width: 46px; height: 46px; color: var(--rose); filter: drop-shadow(0 0 2px var(--olive2)) drop-shadow(0 3px 8px rgba(43, 42, 28, .5)); will-change: transform; }
.hud-edge svg { width: 100%; height: 100%; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.15); } }
.hud-toast { position: absolute; top: 84px; left: 50%; transform: translateX(-50%) translateY(-10px); background: var(--panel); border: 2px solid var(--rose2); color: var(--ink); border-radius: 999px; padding: 8px 20px; font-weight: 700; opacity: 0; transition: opacity .3s, transform .3s; max-width: 90vw; text-align: center; }
.hud-toast.show { opacity: 1; transform: translateX(-50%); }
.hud-controls { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); background: rgba(255, 246, 238, .92); border: 1.5px solid var(--olive2); border-radius: 999px; padding: 7px 18px; font-size: 14px; color: var(--ink); text-align: center; max-width: 92vw; opacity: 0; transition: opacity .6s; }
.hud-controls.show { opacity: 1; }

/* ---------------------------------------------------------------- Dialog: Stofftuch mit Naht, Namensschild als Wassertropfen-Etikett */
.dialog { position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(820px, 94vw); z-index: 20; }
.dlg-box { padding: 20px 24px 14px; cursor: pointer; min-height: 104px; color: var(--ink); }
.dlg-box.in { animation: dlgIn .28s ease; }
@keyframes dlgIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.dlg-name { position: absolute; top: -20px; left: 20px; z-index: 2; display: flex; align-items: center; gap: 8px; background: var(--olive2); color: #fff; border-radius: 999px 999px 999px 6px; padding: 3px 18px 3px 8px; font-weight: 700; font-size: 16px; box-shadow: 0 4px 10px rgba(43, 42, 28, .3); border: 2px solid var(--cream); }
.dlg-speaker { position: relative; z-index: 1; color: #fff !important; }
.dlg-dot { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50% 0 50% 50%; transform: rotate(-45deg); border: 2px solid #fff; }
.dlg-text { font-size: clamp(17px, 2.2vw, 20.5px); line-height: 1.45; font-weight: 400; min-height: 2.8em; }
.dlg-next { position: absolute; right: 22px; bottom: 9px; font-size: 14px; font-weight: 700; color: var(--rose2); opacity: 0; transition: opacity .2s; }
.dlg-next.show { opacity: 1; animation: nudge 1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(5px); } }
.dialog.narrator .dlg-box { background: rgba(255, 228, 210, .97); border-color: var(--rose2); }
.dialog.narrator .dlg-name { background: var(--rose2); }
.dialog.narrator .dlg-speaker { color: #fff !important; }
.dialog.narrator .dlg-text { color: #3a2a20; }
.dlg-skip { position: absolute; right: 8px; top: -46px; border: 2px solid var(--olive2); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 4px 14px; font-weight: 700; font-size: 14px; cursor: pointer; }
.bark { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%) translateY(8px); z-index: 21; background: var(--panel); border: 2px solid var(--olive2); color: var(--ink); border-radius: 16px; padding: 8px 18px; font-size: 17px; max-width: min(640px, 90vw); text-align: center; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; }
.bark.show { opacity: 1; transform: translateX(-50%); }

/* ---------------------------------------------------------------- Übergänge */
.fade { position: absolute; inset: 0; background: #1c1b12; opacity: 0; pointer-events: none; z-index: 60; transition-property: opacity; transition-timing-function: ease; }
.fade.on { opacity: 1; }
.letterbox { position: absolute; left: 0; right: 0; height: 8vh; background: #1c1b12; z-index: 18; transition: transform .7s ease; pointer-events: none; }
.letterbox.top { top: 0; transform: translateY(-100%); }
.letterbox.bottom { bottom: 0; transform: translateY(100%); }
.letterbox.on { transform: none; }
.title-card { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 65; text-align: center; opacity: 0; pointer-events: none; transition: opacity .9s ease, transform 1.2s ease; padding: 26px 50px 30px; background: linear-gradient(180deg, rgba(255, 246, 238, .95), rgba(255, 233, 220, .93)); border: 3px solid var(--rose2); border-radius: 12px 12px 4px 4px; box-shadow: var(--shadow); outline: var(--seam); outline-offset: -9px; }
.title-card.show { opacity: 1; transform: translate(-50%, -54%); }
.tc-num { font-size: 18px; font-weight: 700; color: var(--olive2); letter-spacing: 4px; text-transform: uppercase; }
.tc-num::before, .tc-num::after { content: '❦'; margin: 0 12px; font-size: 18px; color: var(--rose2); }
.tc-title { font-family: var(--font-title); font-size: clamp(32px, 5.6vw, 60px); font-weight: 700; color: var(--night); line-height: 1.1; text-shadow: 0 3px 0 var(--peach); }
.tc-sub { font-size: clamp(17px, 2.5vw, 24px); color: var(--rose2); margin-top: 8px; font-weight: 600; }

/* Erinnerung: warmes, sepiafarbenes Bild mit weichem Rand */
.game-root.memory .game-canvas { filter: sepia(.7) saturate(.8) brightness(1.06) contrast(.95); }
.game-root::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(ellipse at center, transparent 50%, rgba(90, 40, 40, .55)); opacity: 0; transition: opacity 1.2s ease; }
.game-root.memory::after { opacity: 1; }

/* ---------------------------------------------------------------- Overlays (Tugend, Perle) */
.overlay-layer { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(43, 42, 28, .38); opacity: 0; transition: opacity .35s; pointer-events: auto; padding: 16px; }
.overlay.open { opacity: 1; }
.vp-card, .pc-card, .rh-card { width: min(470px, 92vw); padding: 30px 26px 22px; text-align: center; transform: scale(.85); transition: transform .45s cubic-bezier(.2, 1.5, .4, 1); }
.overlay.open .vp-card, .overlay.open .pc-card, .overlay.open .rh-card { transform: none; }
.vp-rays { position: absolute; left: 50%; top: 64px; width: 340px; height: 340px; margin: -170px 0 0 -170px; background: repeating-conic-gradient(rgba(242, 140, 140, .28) 0 10deg, transparent 10deg 20deg); border-radius: 50%; animation: spin 18s linear infinite; mask-image: radial-gradient(circle, #000 20%, transparent 65%); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 65%); pointer-events: none; }
.vp-icon { position: relative; width: 86px; height: 86px; margin: 0 auto 8px; color: var(--rose2); background: radial-gradient(circle closest-side, #fff 0 80%, var(--peach) 80% 90%, transparent 92%); border-radius: 50%; padding: 18px; }
.vp-kicker, .pc-kicker { position: relative; color: var(--olive2); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 14px; }
.vp-name { position: relative; font-family: var(--font-title); font-size: 32px; font-weight: 700; color: var(--night); margin: 2px 0 6px; }
.vp-text, .pc-text { position: relative; font-size: 17.5px; line-height: 1.5; margin-bottom: 18px; }
.pc-pearl { width: 70px; height: 70px; margin: 0 auto 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #f6eaff 35%, #c8a8e8 75%, #9a78c8); box-shadow: 0 0 30px rgba(176, 138, 216, .6); animation: float 2.5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px); } }
.rh-phone { width: 46px; height: 76px; margin: 0 auto 12px; border: 4px solid var(--olive2); border-radius: 10px; animation: turn 2s ease-in-out infinite; }
@keyframes turn { 50% { transform: rotate(-90deg); } }
.rh-card p { font-size: 18px; margin: 0 0 16px; }

/* ---------------------------------------------------------------- Minispiele (gemeinsam) */
.mg { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10vh 16px max(22px, env(safe-area-inset-bottom)); opacity: 0; transition: opacity .5s; touch-action: none; cursor: pointer; background: radial-gradient(ellipse at center, rgba(43, 42, 28, .08), rgba(43, 42, 28, .42)); }
.mg.open { opacity: 1; }
.mg-hint { padding: 10px 22px; font-weight: 700; font-size: 16.5px; text-align: center; max-width: min(760px, 92vw); color: var(--ink); }
.mg-center { position: absolute; left: 72%; top: 50%; width: 0; height: 0; }
.mg-target { position: absolute; left: 0; top: 0; width: 150px; height: 150px; transform: translate(-50%, -50%); border-radius: 50%; border: 6px solid var(--cream); box-shadow: 0 0 0 3px var(--olive2), 0 0 30px rgba(255, 246, 238, .6), inset 0 0 0 3px var(--olive2); transition: box-shadow .15s, border-color .15s, transform .15s; }
.mg-target.near { border-color: var(--peach); box-shadow: 0 0 0 3px var(--rose2), 0 0 50px rgba(255, 196, 163, .95), inset 0 0 0 3px var(--rose2); }
.mg-target.hit { transform: translate(-50%, -50%) scale(1.18); }
.mg-ring { position: absolute; left: 0; top: 0; width: 150px; height: 150px; border-radius: 50%; border: 7px solid var(--rose); box-shadow: 0 0 0 2px var(--olive2), 0 0 24px rgba(242, 140, 140, .8); transform: translate(-50%, -50%) scale(2.7); pointer-events: none; }
.mg-pop { position: absolute; left: 0; top: -130px; transform: translate(-50%, 0); font-family: var(--font-title); font-size: 38px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 6; }
.mg-pop.show { animation: popWord 1.1s ease forwards; }
.mg-pop.good { color: var(--cream); text-shadow: 0 3px 0 var(--rose2), 0 0 18px rgba(43, 42, 28, .6); }
.mg-pop.miss { color: #fff; font-size: 24px; text-shadow: 0 2px 0 var(--olive2), 0 3px 10px rgba(43, 42, 28, .7); }
@keyframes popWord { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.7); } 25% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -30px) scale(1); } }
.mg-dots { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; justify-content: center; }
.mg-dot { width: 22px; height: 22px; border-radius: 50% 0 50% 50%; transform: rotate(-45deg); border: 3px solid var(--olive2); background: rgba(255, 246, 238, .85); transition: background .3s, transform .3s; }
.mg-dot.on { background: linear-gradient(160deg, #d8f2ff, var(--water) 60%, var(--water2)); box-shadow: 0 0 12px rgba(95, 184, 236, .9); transform: rotate(-45deg) scale(1.15); }
.mg-btn { position: absolute; right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); min-width: 150px; height: 72px; border: 3px solid #8a3448; border-radius: 999px; background: linear-gradient(180deg, #ffb6a4, var(--rose) 50%, var(--rose2)); color: #fff; font-size: 24px; font-weight: 700; cursor: pointer; padding: 0 34px; box-shadow: 0 5px 0 #8a3448, 0 10px 20px rgba(43, 42, 28, .35); }
.mg-btn::after { content: ''; position: absolute; inset: 5px; border-radius: inherit; border: 2px dashed rgba(255, 246, 238, .75); pointer-events: none; }
.mg-btn:active, .mg-btn.down { transform: translateY(3px); box-shadow: 0 2px 0 #8a3448; }
.mg-verse { position: absolute; top: 17vh; left: 50%; transform: translateX(-50%); text-align: center; width: min(860px, 94vw); opacity: 0; transition: opacity .5s; pointer-events: none; background: var(--panel); border: 2.5px solid var(--olive2); border-radius: 22px; padding: 12px 22px 16px; box-shadow: var(--shadow); outline: var(--seam); outline-offset: -8px; }
.mg-verse.in { opacity: 1; }
.mg-ar { font-family: var(--ar); font-size: clamp(30px, 5.6vw, 54px); color: var(--night); line-height: 1.75; }
.mg-tl { font-size: clamp(16px, 2.4vw, 22px); font-weight: 700; color: var(--rose2); }
.mg-mean { font-size: clamp(15.5px, 2.2vw, 20px); color: var(--ink); margin-top: 4px; line-height: 1.4; }
.mg-verse-game .mg-center { top: 70%; }
@media (max-width: 700px) { .mg-center { left: 50%; top: 68%; } }

/* Paare finden */
.pr-stage { position: relative; flex: 1; width: min(94vw, 820px); display: grid; place-items: center; }
.pr-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 16px); width: 100%; }
.pr-card { position: relative; aspect-ratio: 3 / 4; max-height: 26vh; appearance: none; border: 0; padding: 0; background: none; cursor: pointer; perspective: 600px; }
.pr-back, .pr-face { position: absolute; inset: 0; border-radius: 14px; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); box-shadow: 0 6px 14px rgba(43, 42, 28, .3); }
.pr-back { background: repeating-linear-gradient(45deg, var(--rose) 0 10px, var(--rose2) 10px 20px); border: 3px solid var(--cream); outline: 2px dashed rgba(255, 246, 238, .8); outline-offset: -8px; }
.pr-back::after { content: ''; width: 34%; aspect-ratio: 1; border-radius: 50% 0 50% 50%; transform: rotate(-45deg); background: var(--cream); opacity: .9; }
.pr-face { background: var(--cream); border: 3px solid var(--olive2); transform: rotateY(180deg); padding: 10%; }
.pr-face svg { width: 92%; height: auto; }
.pr-face.word b { font-family: var(--font-title); font-size: clamp(13px, 1.8vw, 18px); color: var(--night); text-align: center; line-height: 1.25; }
.pr-card.open .pr-back { transform: rotateY(180deg); }
.pr-card.open .pr-face { transform: rotateY(360deg); }
.pr-card.done .pr-face { border-color: var(--good); background: #eef4d6; box-shadow: 0 0 0 4px rgba(138, 154, 62, .5), 0 6px 14px rgba(43, 42, 28, .3); }
.pr-card.focus .pr-back, .pr-card.focus .pr-face { outline: 3px solid var(--water); outline-offset: 2px; }
.pr-stage .mg-pop { left: 50%; top: -6%; }

/* Niemanden wecken */
.mg-sleep { padding-top: 9vh; }
.sl-stage { position: relative; flex: 1; width: min(94vw, 900px); max-height: 56vh; margin: 12px 0; border-radius: 22px; overflow: hidden; border: 3px solid var(--olive2); box-shadow: var(--shadow); }
.sl-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.sl-sleeper { position: absolute; bottom: 14%; width: 9%; height: 13%; transform: translateX(-50%); }
.sl-body { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; border-radius: 40% 40% 12% 12%; background: #5a5070; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .2); }
.sl-head { position: absolute; left: 6%; bottom: 36%; width: 32%; aspect-ratio: 1; border-radius: 50%; background: #8a7064; transition: transform .3s; }
.sl-z { position: absolute; left: 30%; bottom: 80%; font-weight: 800; color: #dfe4ff; font-size: clamp(14px, 2vw, 20px); animation: zz 2.2s ease-in-out infinite; }
.sl-z small { font-size: 70%; margin-left: 2px; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -14px); } }
.sl-q { position: absolute; left: 20%; bottom: 82%; background: var(--peach); color: var(--night); font-weight: 800; border-radius: 999px; padding: 0 8px; font-size: 14px; opacity: 0; transition: opacity .2s; }
.sl-sleeper.stir .sl-z { display: none; }
.sl-sleeper.stir .sl-head { transform: translateY(-14%) rotate(-12deg); }
.sl-sleeper.stir .sl-body { animation: stir .4s ease-in-out 2; }
@keyframes stir { 50% { transform: translateY(-6%); } }
.sl-sleeper.look .sl-q { opacity: 1; }
.sl-sleeper.look .sl-head { transform: translateY(-30%); background: #a08070; box-shadow: inset 4px -2px 0 #fff, inset -4px -2px 0 #fff; }
.sl-walker { position: absolute; bottom: 13%; left: 4%; width: 5.4%; transform: translateX(-50%); transition: left .1s linear; filter: drop-shadow(0 0 6px rgba(255, 220, 180, .6)); }
.sl-walker svg { width: 100%; height: auto; display: block; }
.sl-walker.walk svg { animation: tiptoe .5s ease-in-out infinite; }
@keyframes tiptoe { 50% { transform: translateY(-4%) rotate(2deg); } }
.sl-walker.caught { animation: caught .9s ease; }
@keyframes caught { 20% { transform: translateX(-50%) scale(.9); } 40% { transform: translateX(-60%); } }
.sl-goal { position: absolute; right: 2%; bottom: 30%; background: var(--olive); color: #fff; border-radius: 999px; padding: 2px 12px; font-weight: 700; font-size: 14px; border: 2px solid var(--cream); }
.sl-bar { position: absolute; left: 4%; right: 4%; bottom: 4%; height: 10px; border-radius: 999px; background: rgba(255, 246, 238, .3); overflow: hidden; }
.sl-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--peach), var(--rose)); }
.sl-stage[data-safe="0"] { box-shadow: 0 0 0 4px var(--rose), var(--shadow); }
.sl-stage .mg-pop { left: 50%; top: 18%; }

/* Fladenbrote backen */
.bd-stage { position: relative; flex: 1; width: min(94vw, 760px); display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 36px); flex-wrap: wrap; }
.bd-saj { position: relative; width: min(60vw, 44vh, 400px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 45% 40%, #6a625c, #3a3634 60%, #22201e); box-shadow: 0 0 0 8px #5a4a40, 0 0 40px 10px rgba(255, 106, 42, .45), var(--shadow); }
.bd-slot { position: absolute; width: 40%; aspect-ratio: 1; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; --k: 0; --dark: 0; }
.bd-slot[data-i="0"] { left: 8%; top: 12%; } .bd-slot[data-i="1"] { right: 8%; top: 12%; } .bd-slot[data-i="2"] { left: 30%; bottom: 6%; }
.bd-ring { position: absolute; inset: -7%; border-radius: 50%; background: conic-gradient(var(--peach) calc(var(--k) * 360deg), rgba(255, 246, 238, .18) 0); -webkit-mask: radial-gradient(circle, transparent 64%, #000 66%); mask: radial-gradient(circle, transparent 64%, #000 66%); opacity: 0; transition: opacity .3s; }
.bd-slot[data-state="a"] .bd-ring, .bd-slot[data-state="b"] .bd-ring { opacity: 1; }
.bd-slot.ready .bd-ring { background: conic-gradient(#ffd36a calc(var(--k) * 360deg), rgba(255, 246, 238, .18) 0); filter: drop-shadow(0 0 6px #ffd36a); }
.bd-bread { position: absolute; inset: 6%; border-radius: 50%; transform: scale(0); transition: transform .35s cubic-bezier(.2, 1.4, .4, 1);
  background: radial-gradient(circle at 40% 35%, color-mix(in srgb, #f3e2c0 calc((1 - var(--k)) * 100%), #d99a4a), color-mix(in srgb, #e8d0a8 calc((1 - var(--k)) * 100%), #b8742e));
  filter: brightness(calc(1 - var(--dark) * .45)); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15); }
.bd-slot[data-state="a"] .bd-bread, .bd-slot[data-state="b"] .bd-bread { transform: scale(1); }
.bd-bread i { position: absolute; width: 9%; aspect-ratio: 1; border-radius: 50%; background: rgba(140, 80, 30, calc(var(--k) * .8)); }
.bd-bread i:nth-child(1) { left: 30%; top: 30%; } .bd-bread i:nth-child(2) { left: 60%; top: 45%; } .bd-bread i:nth-child(3) { left: 38%; top: 64%; }
.bd-slot.flip .bd-bread { animation: flip .45s ease; }
@keyframes flip { 50% { transform: scale(1) rotateX(90deg) translateY(-30%); } }
.bd-key { position: absolute; right: -4%; bottom: -4%; width: 26px; height: 26px; border-radius: 50%; background: var(--cream); color: var(--olive2); font-weight: 800; font-size: 14px; display: grid; place-items: center; border: 2px solid var(--olive2); }
.bd-plate { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bd-stack { position: relative; width: 120px; height: 90px; border-radius: 0 0 60px 60px / 0 0 36px 36px; background: linear-gradient(180deg, #c07a46, #8a4a22); border: 3px solid #5a2e14; display: flex; flex-direction: column-reverse; align-items: center; padding-bottom: 14px; }
.bd-stack i { width: 86px; height: 12px; margin-top: -4px; border-radius: 50%; background: radial-gradient(ellipse, #e8c48a, #c0884a); border: 1.5px solid #8a5a2a; }
.bd-count { background: var(--panel); border: 2px solid var(--olive2); border-radius: 999px; padding: 2px 14px; }
.bd-stage .mg-pop { left: 50%; top: 2%; }

/* Schützend stehen */
.sh-stage { position: relative; flex: 1; width: 100%; display: grid; place-items: center; cursor: crosshair; }
.sh-field { position: relative; width: min(84vw, 56vh, 480px); aspect-ratio: 1; }
.sh-ring { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 246, 238, .1) 0 40%, rgba(220, 176, 128, .28) 41% 70%, rgba(160, 110, 80, .2) 71%); border: 2px dashed rgba(255, 246, 238, .55); }
.sh-light { position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, rgba(255, 250, 235, .85) 45%, rgba(255, 240, 210, 0) 70%); box-shadow: 0 0 60px 20px rgba(255, 248, 230, .7); animation: glowL 2.4s ease-in-out infinite; }
@keyframes glowL { 50% { box-shadow: 0 0 80px 30px rgba(255, 248, 230, .85); } }
.sh-arm { position: absolute; left: 24.5%; top: 24.5%; width: 51%; height: 51%; transition: transform .06s linear; }
.sh-shield { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 8px rgba(43, 42, 28, .6)); }
.sh-swirl { position: absolute; width: 12%; aspect-ratio: 1; transform: translate(-50%, -50%); transition: opacity .6s; }
.sh-swirl i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(70, 52, 40, .85) 0 30%, rgba(90, 66, 50, .55) 50%, rgba(110, 82, 60, 0) 70%); animation: swirl 1.2s linear infinite; }
.sh-swirl i:nth-child(2) { inset: 15%; animation-duration: .8s; animation-direction: reverse; }
.sh-swirl i:nth-child(3) { inset: 30%; animation-duration: .6s; }
@keyframes swirl { to { transform: rotate(360deg) scale(1.05); } }
.sh-swirl.puff { animation: puff .6s ease forwards; }
@keyframes puff { to { transform: translate(-50%, -50%) scale(2.2); opacity: 0; filter: brightness(2.2) sepia(1); } }
.sh-swirl.fade { opacity: 0; }
.sh-field .mg-pop { left: 50%; top: -8%; }

/* Webmuster */
.wv-stage { position: relative; flex: 1; width: min(94vw, 760px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.wv-band { width: min(70vw, 200px); height: min(30vh, 220px); border-radius: 8px; background: repeating-linear-gradient(90deg, #efe3c5 0 6px, #e2d2b0 6px 8px); border: 4px solid var(--olive2); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column-reverse; }
.wv-rows { display: flex; flex-direction: column-reverse; overflow: hidden; }
.wv-rows i { display: block; height: 16px; flex: none; border-top: 1px solid rgba(0, 0, 0, .12); background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .2) 0 4px, transparent 4px 8px); animation: rowIn .3s ease; }
@keyframes rowIn { from { transform: scaleX(0); } }
.wv-status { font-weight: 700; font-size: 17px; color: var(--cream); text-shadow: 0 2px 6px rgba(43, 42, 28, .7); min-height: 1.4em; }
.wv-spools { display: flex; gap: clamp(10px, 3vw, 26px); }
.wv-spool { position: relative; width: clamp(66px, 14vw, 96px); aspect-ratio: 3 / 4; border: 0; padding: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; transition: transform .15s; }
.wv-yarn { width: 80%; aspect-ratio: 1; border-radius: 50%; background: repeating-linear-gradient(30deg, var(--c) 0 5px, color-mix(in srgb, var(--c) 78%, #000) 5px 7px); border: 3px solid var(--olive2); box-shadow: 0 6px 12px rgba(43, 42, 28, .35); transition: transform .2s, box-shadow .2s; }
.wv-name { margin-top: 4px; background: var(--panel); border: 2px solid var(--olive2); border-radius: 999px; padding: 0 8px; font-weight: 700; font-size: 13px; }
.wv-key { position: absolute; top: 0; right: 4%; width: 22px; height: 22px; border-radius: 50%; background: var(--cream); color: var(--olive2); font-size: 12px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--olive2); }
.wv-spool.lit .wv-yarn { transform: scale(1.18) translateY(-6px); box-shadow: 0 0 0 5px rgba(255, 246, 238, .9), 0 0 30px 6px var(--c); }
.wv-stage.showing .wv-spool { cursor: default; }
.wv-stage .mg-pop { left: 50%; top: -2%; }

/* ---------------------------------------------------------------- Touch-Steuerung */
.touch-layer { position: absolute; inset: 0; z-index: 15; display: none; }
.game-root.is-touch.playing .touch-layer { display: block; }
.game-root.talking .touch-layer .touch-zone, .game-root.talking .touch-layer .joy { display: none; }
.touch-zone { position: absolute; top: 70px; bottom: 0; }
.touch-left { left: 0; width: 45%; }
.touch-right { right: 0; width: 55%; }
.joy { position: absolute; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; border: 3px solid rgba(255, 246, 238, .75); background: rgba(138, 154, 62, .22); opacity: 0; transition: opacity .15s; pointer-events: none; left: 110px; top: calc(100% - 130px); }
.joy.active { opacity: 1; }
.game-root.is-touch.playing:not(.talking) .joy:not(.active) { opacity: .5; }
.joy-knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, var(--peach)); border: 3px solid var(--rose2); transform: translate(-50%, -50%); }
.tbtn { position: absolute; border-radius: 50%; border: 3px solid var(--olive2); background: rgba(255, 246, 238, .82); color: var(--olive2); display: grid; place-items: center; padding: 0; touch-action: none; }
.tbtn svg { width: 55%; height: 55%; }
.tbtn.down { transform: scale(.92); background: var(--peach); }
.tbtn-jump { right: max(28px, env(safe-area-inset-right)); bottom: max(34px, env(safe-area-inset-bottom)); width: 78px; height: 78px; }
.tbtn-action { right: max(118px, calc(env(safe-area-inset-right) + 96px)); bottom: max(78px, env(safe-area-inset-bottom)); width: 70px; height: 70px; opacity: .6; }
.tbtn-action.available { opacity: 1; border-color: var(--rose2); background: var(--peach); color: var(--night); animation: glowBtn 1.2s ease-in-out infinite; }
@keyframes glowBtn { 50% { box-shadow: 0 0 22px rgba(255, 196, 163, .95); } }
.tbtn-label { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 700; background: var(--panel); color: var(--ink); padding: 0 8px; border-radius: 999px; }
.tbtn-label:empty { display: none; }
.game-root.talking .tbtn { opacity: .25; }

/* ---------------------------------------------------------------- Konfetti */
.confetti { position: absolute; inset: 0; z-index: 75; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 50% 0 50% 50%; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* ---------------------------------------------------------------- Kleine Bildschirme */
.game-root.small .hud-obj { max-width: 58vw; padding: 7px 10px 7px 7px; border-radius: 14px; outline-offset: -6px; }
.game-root.small .hud-obj-text { font-size: 14px; }
.game-root.small .hud-obj-hint { font-size: 12px; }
.game-root.small .hud-obj-icon { width: 24px; height: 24px; }
.game-root.small .hud-chip { font-size: 14px; padding: 2px 9px 2px 6px; }
.game-root.small .hud-chip .ic { width: 18px; height: 18px; }
.game-root.small .hud-btn { width: 38px; height: 38px; padding: 8px; }
.game-root.small .qirba { top: calc(max(14px, env(safe-area-inset-top)) + 46px); padding: 2px 9px 2px 4px; }
.game-root.small .qb-bag { width: 26px; height: 26px; }
.game-root.small .qb-sips i { width: 13px; height: 13px; }
.game-root.small .dlg-box { padding: 16px 16px 10px; min-height: 84px; border-radius: 14px; }
.game-root.small .dlg-text { font-size: 15.5px; }
.game-root.small .mg-target, .game-root.small .mg-ring { width: 110px; height: 110px; }
.game-root.small .mg-btn { height: 60px; font-size: 20px; min-width: 120px; }
.game-root.small .title-buttons .btn { min-height: 44px; padding: 8px 24px; font-size: 16px; }
.game-root.small .title-buttons .btn.big { font-size: 18px; }
.game-root.small .light-note { font-size: 11.5px; }
.game-root.small .screen h2 { margin-bottom: 10px; }
.game-root.small .bark { bottom: 100px; font-size: 15px; }
.game-root.small .mg-hint { font-size: 14.5px; padding: 7px 14px; }
@media (max-width: 760px) {
  .v-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .title-screen { align-items: center; padding-left: 18px; background: rgba(43, 42, 28, .28); }
  .title-wrap { width: min(440px, 94vw); }
  /* Dattelpalme wird zur Liste: jede Traube eine Zeile */
  .pt-wrap { height: auto; }
  .pt-crown { display: none; }
  .pt-bunches { position: static; display: flex; flex-direction: column; gap: 10px; width: min(460px, 92vw); margin: 0 auto; }
  .ch-card.pb-bunch { position: relative; left: auto; top: auto; transform: none; animation: none; width: 100%; flex-direction: row; align-items: center; gap: 10px; padding: 4px 12px 4px 6px; background: var(--cream); border: 2.5px solid var(--olive2); border-radius: 999px; box-shadow: 0 4px 0 var(--olive2); }
  .ch-card.pb-bunch.locked { background: #ece8d8; }
  .pb-svg { width: 46px; flex: none; }
  .pb-bunch .ch-num { position: static; flex: none; }
  .pb-tag { margin: 0; border: 0; box-shadow: none; outline: 0; background: transparent; text-align: left; padding: 4px 0; }
  .pb-bunch.locked .pb-tag { background: transparent; }
  .ch-done { top: 50%; right: 14px; transform: translateY(-50%); }
  .pr-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
}
@media (max-width: 520px) {
  .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(80vw, 300px); }
  .pr-card { max-height: 13vh; aspect-ratio: 4 / 3; }
}
@media (max-height: 760px) {
  .title-main { font-size: clamp(32px, 7.5vh, 58px); --tm: clamp(32px, 7.5vh, 58px); }
  .title-ar { font-size: clamp(28px, 6vh, 50px); }
  .title-sub { font-size: clamp(15px, 3vh, 22px); }
  .title-tag { margin-bottom: 10px; font-size: 14px; }
  .title-buttons { display: grid; grid-template-columns: 1fr 1fr; width: min(470px, 86vw); gap: 10px; margin-bottom: 10px; }
  .title-buttons .btn.big { grid-column: span 2; }
  .title-buttons .btn { min-height: 44px; padding: 8px 20px; font-size: 15.5px; }
  .light-note { font-size: 12px; margin-top: 6px; }
  .screen h2 { margin-bottom: 10px; }
}
/* niedrig und quer: Zeltbahn links, Knöpfe rechts (hochkant bleibt alles untereinander) */
@media (max-height: 520px) and (orientation: landscape) {
  .title-screen { justify-content: center; }
  .title-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 18px; align-items: center; width: min(660px, 70vw); }
  .t-banner { grid-column: 1; grid-row: 1 / span 3; padding: 18px 24px 0; }
  .title-tag, .title-buttons, .lang-switch { grid-column: 2; justify-self: center; }
  .title-tag { margin-top: 0; }
  .title-buttons { width: 100%; grid-template-columns: 1fr 1fr; }
}
@media (max-height: 520px) {
  .title-ar { font-size: 26px; } .title-main { font-size: 30px; --tm: 30px; } .title-sub { font-size: 14px; }
  .title-buttons .btn { min-height: 40px; font-size: 14px; padding: 6px 12px; }
  .light-note { display: none; }
  .mg { padding-top: 3vh; }
  .mg-verse { top: 9vh; }
  .mg-dots { margin-bottom: 6px; }
  .screen { padding-top: 10px; padding-bottom: 10px; }
  .screen h2 { font-size: 26px; margin-bottom: 2px; }
  .pr-card { max-height: 30vh; }
  .sl-stage { max-height: 60vh; }
}
@media (max-height: 520px) and (min-width: 761px) {
  .pt-wrap { height: 70vh; }
  .ch-card.pb-bunch { width: clamp(96px, 13vw, 130px); }
  .pb-svg { width: 58%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Touch & Hochformat: Hinweise nicht über den Knöpfen */
.game-root.is-touch .hud-controls { bottom: auto; top: 70px; max-width: min(520px, 92vw); }
.game-root.portrait .hud-obj { top: calc(max(14px, env(safe-area-inset-top)) + 54px); max-width: calc(100vw - 120px); }
.game-root.portrait .qirba { top: calc(max(14px, env(safe-area-inset-top)) + 54px); }
.game-root.portrait.is-touch .hud-controls { top: 130px; }
.game-root.portrait .bark { bottom: 190px; }
.game-root.portrait .mg-btn { right: 50%; transform: translateX(50%); }
.game-root.portrait .mg-btn:active, .game-root.portrait .mg-btn.down { transform: translateX(50%) translateY(3px); }
.game-root.portrait .mg-dots { margin-bottom: 96px; }
.game-root.portrait .mg-sleep .mg-dots { margin-bottom: 96px; }

/* Der Titel passt immer auf die Zeltbahn: höchstens so groß, dass „Ummu Umāra“ (≈ 7,3 Schriftgrößen breit) hineinpasst */
@supports (width: 1cqi) {
  .t-text { container-type: inline-size; }
  .title-main { font-size: min(var(--tm), 12.8cqi); }
}