/* ===== Themes: alle Farben laufen über Variablen ===== */
:root, [data-theme="dark"] {
  /* angehoben (vorher #050a1a): wirkt auf hellen/matten Displays nicht mehr fast schwarz */
  --bg: #121826; --bg2: #19223a; --panel: rgba(30, 44, 80, .82); --panel-solid: #1c2949;
  --line: #3a7be0; --glow: #4aa8ff; --glow-soft: rgba(74,168,255,.30);
  --text: #e3eeff; --muted: #a8bbdc; --accent: #74c8ff; --gold: #ffd36b;
  --danger: #ff6b78; --ok: #5cf2b0; --chip: rgba(74,168,255,.16);
  --radius: 10px; --font: "Segoe UI", Roboto, system-ui, sans-serif;
  --title-font: "Segoe UI", Roboto, system-ui, sans-serif; --title-spacing: .12em;
  --bg-image: radial-gradient(ellipse at 50% -10%, #1f3a78 0%, transparent 60%), radial-gradient(ellipse at 100% 100%, #172a58 0%, transparent 55%);
  --overlay: rgba(0,0,0,.5);
}
[data-theme="pastel"] {
  --bg: #fff4f8; --bg2: #ffe9f1; --panel: rgba(255,255,255,.9); --panel-solid: #ffffff;
  --line: #f3a6c4; --glow: #ff8fb8; --glow-soft: rgba(255,143,184,.25);
  --text: #4a2c3d; --muted: #7d5a6c; --accent: #c0417a; --gold: #9a6700;
  --danger: #e0435b; --ok: #3fbf8a; --chip: rgba(255,143,184,.16);
  --radius: 18px; --title-spacing: .04em;
  --bg-image: radial-gradient(circle at 10% 0%, #ffd9e8 0%, transparent 45%), radial-gradient(circle at 100% 90%, #e5dcff 0%, transparent 50%);
}
[data-theme="neutral"] {
  --bg: #f3f5f8; --bg2: #e8ecf2; --panel: #ffffff; --panel-solid: #ffffff;
  --line: #cfd6e0; --glow: #2a9097; --glow-soft: rgba(42,144,151,.0);
  --text: #1d2430; --muted: #596475; --accent: #2a9097; --gold: #946a10;
  --danger: #d64545; --ok: #2f9e6d; --chip: #eef2f8;
  --radius: 12px; --title-spacing: .02em; --bg-image: none;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); }
body { background-image: var(--bg-image); background-attachment: fixed; }
button, input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
#app { max-width: 560px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; padding-bottom: 76px; }

/* ===== Systemfenster ===== */
.syswin { position: sticky; top: 0; z-index: 5; margin: 10px; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel); backdrop-filter: blur(8px);
  box-shadow: 0 0 18px var(--glow-soft), inset 0 0 22px var(--glow-soft); }
.sys-row { display: flex; align-items: center; gap: 12px; }
.sys-row.small { margin-top: 10px; justify-content: space-between; font-size: 13px; }
.avatar { width: 58px; height: 58px; border-radius: 50%; padding: 3px; flex: none;
  background: conic-gradient(var(--glow), var(--line), var(--glow)); box-shadow: 0 0 12px var(--glow-soft); }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar.dmg1 { background: #ff6b6b; } .avatar.dmg2 { background: #c62828; } .avatar.dmg3 { background: #6d0c0c; }
.sys-main { flex: 1; min-width: 0; }
.sys-title { font-weight: 700; letter-spacing: var(--title-spacing); text-transform: uppercase; font-size: 14px; }
.tag { color: var(--accent); text-shadow: 0 0 8px var(--glow-soft); }
.sys-sub { display: flex; gap: 14px; font-size: 13px; color: var(--muted); margin: 3px 0 6px; }
.sys-sub b { color: var(--text); font-size: 15px; }
.gold b { color: var(--gold); }
.bar { position: relative; height: 14px; border-radius: 99px; background: var(--chip); border: 1px solid var(--line); overflow: hidden; }
.bar .fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--line), var(--glow)); box-shadow: 0 0 10px var(--glow); transition: width .6s ease; }
.bar-label { position: absolute; inset: 0; font-size: 10px; display: grid; place-items: center; font-weight: 700; letter-spacing: .05em; }
.dmg { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.dmgbar { width: 90px; height: 8px; } .dmgbar .fill { background: var(--danger); box-shadow: none; }
.streak b { color: var(--accent); font-size: 15px; }
.mult { margin-left: 4px; padding: 1px 7px; border-radius: 99px; background: var(--chip); border: 1px solid var(--line); font-weight: 700; color: var(--gold); }
.icon-btn { background: none; border: 1px solid var(--line); border-radius: 8px; width: 38px; height: 38px; font-size: 18px; cursor: pointer; }

/* ===== Inhalt ===== */
main { flex: 1; padding: 0 10px; }
.h { font-size: 13px; text-transform: uppercase; letter-spacing: var(--title-spacing); color: var(--accent); margin: 18px 4px 8px; display: flex; justify-content: space-between; align-items: center; }
.h small { color: var(--muted); text-transform: none; letter-spacing: 0; }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 12px; margin-bottom: 8px; }
.greet { display: flex; gap: 12px; align-items: center; }
.greet img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line); flex: none; }
.greet p { margin: 0; font-size: 14px; line-height: 1.4; }
.greet .who { font-size: 11px; color: var(--accent); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; }
.greet .x { margin-left: auto; align-self: flex-start; background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; }

.quest { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.quest .check { width: 30px; height: 30px; flex: none; border-radius: 8px; border: 2px solid var(--line); background: transparent; cursor: pointer; font-size: 16px; display: grid; place-items: center; }
.quest.done .check { background: var(--line); border-color: var(--glow); color: #fff; box-shadow: 0 0 10px var(--glow-soft); }
.quest.done .qtitle { text-decoration: line-through; opacity: .6; }
.qbody { flex: 1; min-width: 0; }
.qtitle { font-size: 15px; font-weight: 600; }
.qmeta { font-size: 12px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.cat { padding: 1px 7px; border-radius: 99px; background: var(--chip); border-left: 3px solid var(--c, var(--line)); }
.rew { color: var(--gold); }
.edit { background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; padding: 4px; }
.empty { text-align: center; color: var(--muted); font-size: 14px; padding: 18px; }
.btn { border: 1px solid var(--glow); background: var(--chip); color: var(--text); border-radius: var(--radius); padding: 11px 14px; font-weight: 700; letter-spacing: .04em; cursor: pointer; }
.btn.primary { background: linear-gradient(90deg, var(--line), var(--glow)); color: #fff; border: 0; box-shadow: 0 0 14px var(--glow-soft); }
.btn.danger { border-color: var(--danger); color: var(--danger); background: transparent; }
.btn.block { width: 100%; }
.row { display: flex; gap: 8px; } .row > * { flex: 1; }
.fab { width: 100%; margin: 6px 0 4px; }

/* ===== Untere Leiste ===== */
.bottombar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 6; display: flex; justify-content: center;
  background: var(--panel-solid); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 18px var(--glow-soft); }
.tab { flex: 1; max-width: 186px; background: none; border: 0; padding: 8px 0 10px; color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tab span { font-size: 20px; }
.tab.active { color: var(--accent); text-shadow: 0 0 8px var(--glow); }

/* ===== Modal ===== */
.modal { position: fixed; inset: 0; z-index: 20; background: var(--overlay, rgba(0,0,0,.45)); display: grid; place-items: center; padding: 14px; }
.modal-card { width: 100%; max-width: 460px; max-height: 90vh; overflow: auto; border: 1px solid var(--glow); border-radius: var(--radius);
  background: var(--panel-solid); padding: 16px; box-shadow: 0 0 30px var(--glow-soft); animation: pop .25s ease; }
.modal-card h2 { margin: 0 0 12px; font-size: 16px; letter-spacing: var(--title-spacing); text-transform: uppercase; color: var(--accent); }
label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
input[type=text], input[type=number], select, textarea { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg2); }
.seg { display: flex; gap: 6px; } .seg button { flex: 1; padding: 9px 4px; border-radius: 8px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 13px; }
.seg button.on { background: var(--line); color: #fff; border-color: var(--glow); }
.actions { display: flex; gap: 8px; margin-top: 16px; } .actions .btn { flex: 1; }
.sum-list { list-style: none; padding: 0; margin: 8px 0; font-size: 14px; } .sum-list li { padding: 5px 0; border-bottom: 1px dashed var(--line); display: flex; justify-content: space-between; }
.note { font-size: 12px; color: var(--muted); line-height: 1.45; }
.placeholder { text-align: center; padding: 26px 16px; }
.placeholder .big { font-size: 40px; }
.lock { opacity: .55; }

/* ===== Effekte (nur bei Erfolgen) ===== */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 30; display: grid; place-items: center; }
.float { position: fixed; font-weight: 800; color: var(--gold); text-shadow: 0 0 8px var(--glow); animation: floatUp 1.2s ease forwards; font-size: 15px; }
.lvlup { text-align: center; animation: lvl 2.6s ease forwards; }
.lvlup .ring { padding: 18px 26px; border: 2px solid var(--glow); border-radius: 12px; background: rgba(5,10,26,.88); box-shadow: 0 0 40px var(--glow), inset 0 0 30px var(--glow-soft); color: #dbe9ff; }
.lvlup img { width: 90px; height: 90px; border-radius: 50%; border: 2px solid var(--glow); object-fit: cover; }
.lvlup .t1 { font-size: 13px; letter-spacing: .3em; color: #6cc4ff; }
.lvlup .t2 { font-size: 34px; font-weight: 900; letter-spacing: .1em; text-shadow: 0 0 16px #4aa8ff; }
.quest.flash { animation: flash .7s ease; }
@keyframes floatUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-60px); } }
@keyframes lvl { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1.05); } 20% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: scale(1.02); } }
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes flash { 0% { box-shadow: 0 0 0 var(--glow); } 40% { box-shadow: 0 0 24px var(--glow); } 100% { box-shadow: 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; animation-delay: 0s !important; transition: none !important; } }

/* ===== Rang / Avatar-Knopf ===== */
button.avatar { border: 0; cursor: pointer; }
.sys-rank { font-size: 11px; color: var(--muted); letter-spacing: .06em; }

/* ===== Sari: Floating-Button, Dialog, Toast ===== */
.sari-fab { position: fixed; right: 14px; bottom: 84px; z-index: 7; border: 1px solid var(--glow); background: var(--panel-solid); border-radius: 99px;
  padding: 4px 12px 4px 4px; display: flex; align-items: center; gap: 6px; cursor: pointer; box-shadow: 0 0 16px var(--glow-soft); font-weight: 700; color: var(--accent); }
.sari-fab img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.sari-dlg { display: flex; flex-direction: column; gap: 10px; }
.sari-head { display: flex; gap: 12px; align-items: flex-end; }
.sari-head img { width: 84px; height: 84px; border-radius: 14px; object-fit: cover; border: 1px solid var(--glow); box-shadow: 0 0 14px var(--glow-soft); flex: none; }
.bubble { position: relative; flex: 1; background: var(--chip); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; font-size: 14px; line-height: 1.45; }
.bubble::before { content: ""; position: absolute; left: -7px; bottom: 14px; width: 12px; height: 12px; background: inherit; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); background: var(--panel-solid); }
.sari-name { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.questcard { border: 1px dashed var(--glow); border-radius: var(--radius); padding: 10px 12px; }
.questcard .qtitle { font-size: 16px; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 140px; z-index: 25; max-width: 92%; display: flex; gap: 8px; align-items: center;
  background: var(--panel-solid); border: 1px solid var(--glow); border-radius: 99px; padding: 5px 14px 5px 5px; box-shadow: 0 0 16px var(--glow-soft); font-size: 13px; animation: pop .25s ease; }
.toast img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

/* ===== Chat ===== */
.chat { position: fixed; inset: 0; z-index: 15; background: var(--bg); background-image: var(--bg-image); display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }
.chat-top { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
.chat-top img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--glow); }
.chat-top .t { flex: 1; } .chat-top .t b { display: block; } .chat-top .t small { color: var(--muted); font-size: 11px; }
.chat-log { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 84%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-line; }
.msg.sari { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.me { align-self: flex-end; background: var(--line); color: #fff; border-bottom-right-radius: 4px; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 0 12px 8px; }
.chips button { flex: none; border: 1px solid var(--line); background: var(--chip); border-radius: 99px; padding: 6px 11px; font-size: 12px; cursor: pointer; }
.chat-in { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--panel-solid); }
.chat-in input { flex: 1; }
.real-sari { margin: 0 12px 8px; font-size: 12px; }

/* ===== Onboarding ===== */
.onboarding { position: fixed; inset: 0; z-index: 18; overflow: auto; background: var(--bg); background-image: var(--bg-image); padding: 22px 16px 30px; }
.onb-inner { max-width: 520px; margin: 0 auto; }
.onb-step { font-size: 11px; letter-spacing: .2em; color: var(--accent); text-transform: uppercase; }
.onb-title { font-size: 22px; font-weight: 800; letter-spacing: var(--title-spacing); margin: 4px 0 4px; text-transform: uppercase; text-shadow: 0 0 12px var(--glow-soft); }
.onb-sub { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pick { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 8px; cursor: pointer; text-align: left; }
.pick img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--radius) - 4px); display: block; }
.pick b { display: block; margin-top: 7px; font-size: 14px; } .pick small { color: var(--muted); font-size: 11px; }
.pick.on { border: 2px solid var(--glow); box-shadow: 0 0 18px var(--glow-soft); }
.pick.on::after { content: "✓"; position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--glow); color: #fff; display: grid; place-items: center; font-weight: 800; }
.pick.disabled { cursor: default; opacity: .5; display: grid; place-items: center; text-align: center; min-height: 160px; border-style: dashed; }
.pick .badge { position: absolute; top: 12px; left: 12px; font-size: 10px; padding: 2px 7px; border-radius: 99px; background: var(--panel-solid); border: 1px solid var(--line); }
.theme-offer { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 13px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--chip); }
.theme-offer input { width: 20px; height: 20px; }
.onb-actions { display: flex; gap: 8px; margin-top: 16px; } .onb-actions .btn { flex: 1; }

/* ===== Helligkeit/Kontrast (⚙): Standard · Heller · Hoher Kontrast ===== */
[data-theme="dark"][data-contrast="bright"] {
  --bg: #1b2336; --bg2: #232d46; --panel: rgba(42, 58, 98, .86); --panel-solid: #28385e;
  --line: #4a8cec; --text: #f0f5ff; --muted: #bccbe6; --chip: rgba(74,168,255,.2);
  --bg-image: radial-gradient(ellipse at 50% -10%, #2a4a8c 0%, transparent 60%), radial-gradient(ellipse at 100% 100%, #213766 0%, transparent 55%);
}
[data-theme="dark"][data-contrast="high"] {
  --bg: #0d1119; --bg2: #141a26; --panel: #161d2b; --panel-solid: #161d2b;
  --line: #7ab4ff; --glow: #8fc8ff; --glow-soft: rgba(143,200,255,.18);
  --text: #ffffff; --muted: #d6e0f2; --accent: #9ad8ff; --gold: #ffe08f; --danger: #ff8a94;
  --chip: rgba(143,200,255,.16); --bg-image: none;
}
[data-theme="pastel"][data-contrast="bright"] { --bg: #fffafc; --bg2: #fff2f7; --panel: #ffffff; }
[data-theme="pastel"][data-contrast="high"] {
  --bg: #fff8fb; --panel: #ffffff; --panel-solid: #ffffff; --line: #b8466f;
  --text: #2a1520; --muted: #5a3a4a; --accent: #a8305f; --gold: #8a5d00; --bg-image: none;
}
[data-theme="neutral"][data-contrast="bright"] { --bg: #fafbfd; --bg2: #f1f4f8; }
[data-theme="neutral"][data-contrast="high"] {
  --bg: #ffffff; --line: #5b6678; --text: #0b0f16; --muted: #3a4352; --accent: #116a70; --gold: #7a5600;
}

/* ===== Übergang Begrüßung → Quests (siehe closeGreeting in app.js) ===== */
.greet.leaving { pointer-events: none; }

/* ===== Bewegungssystem: nur transform/opacity (60 fps), bei „Bewegung reduzieren“ aus ===== */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.34, 1.5, .64, 1); }
/* Quest-Karten gleiten gestaffelt von der Seite herein */
.enter > * { animation: slideIn .42s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes slideIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
/* Sari-Dialoge, Sprechblasen, Begrüßung: weicher Federsprung 0.9 → 1.03 → 1 */
@keyframes spring { 0% { opacity: 0; transform: scale(.9); } 60% { opacity: 1; transform: scale(1.03); } 100% { transform: scale(1); } }
.sari-dlg .bubble { transform-origin: 0 100%; animation: spring .48s var(--ease-out) .06s both; }
.sari-dlg .sari-head img { animation: spring .42s var(--ease-out) both; }
.enter > .greet { transform-origin: 30px 50%; animation: spring .5s var(--ease-out) both; }
.msg.sari:last-child { transform-origin: 0 100%; animation: spring .42s var(--ease-out) both; }
.msg.me:last-child { transform-origin: 100% 100%; animation: spring .32s var(--ease-out) both; }
.toast { animation: toastIn .45s var(--ease-out) both; }
@keyframes toastIn { 0% { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.9); } 60% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.03); } 100% { transform: translateX(-50%) scale(1); } }
/* Modals/Sheets gleiten von unten hoch */
.modal:not(.hidden) { animation: fadeIn .22s ease-out both; }
.modal-card { animation: sheetUp .36s var(--ease-out) both; }
@keyframes sheetUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.chat:not(.hidden) { animation: sheetUp .34s var(--ease-out) both; }
/* Tab-Wechsel: je nach Richtung von links/rechts */
.view.from-right { animation: fromRight .32s var(--ease-out) both; }
.view.from-left { animation: fromLeft .32s var(--ease-out) both; }
@keyframes fromRight { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes fromLeft { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
/* Quest abhaken: kleiner Hüpfer + Häkchen zeichnet sich */
.quest .check svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.quest.justdone .check { animation: checkBounce .45s var(--spring); }
.quest.justdone .check path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: draw .34s var(--ease-out) .08s forwards; }
@keyframes checkBounce { 0% { transform: scale(.8); } 55% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
/* Buttons: dezentes Eindrücken */
.btn, .icon-btn, .check, .tab, .pick, .edit, .sari-fab, #sariFab { transition: transform .12s ease-out; }
.btn:active, .icon-btn:active, .check:active, .tab:active, .pick:active, .edit:active, #sariFab:active { transform: scale(.95); }
/* Zähler (Gold/XP): kurzer Puls beim Hochzählen */
.bump { display: inline-block; animation: bump .5s var(--ease-out); }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .quest.justdone .check path { stroke-dashoffset: 0; }
}

/* ===== Sari lebt (Ecke unten rechts): schweben/atmen, Glow-Puls, Idle & Reaktionen ===== */
.sari-live { position: relative; width: 40px; height: 40px; flex: none; display: block; }
.sari-live img { position: relative; z-index: 1; display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  animation: breathe 4.2s ease-in-out infinite; will-change: transform; }
.sari-live .aura { position: absolute; inset: -4px; border-radius: 50%; background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
  opacity: .35; animation: aura 3.2s ease-in-out infinite; pointer-events: none; }
.sari-live .fx { position: absolute; z-index: 2; right: -8px; top: -10px; font-style: normal; font-size: 16px; pointer-events: none; }
.sari-live { animation: float 5.5s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04) translateY(-1px); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes aura { 0%, 100% { opacity: .25; transform: scale(.95); } 50% { opacity: .5; transform: scale(1.1); } }
/* Idle */
.sari-fab.look .sari-live img { animation: look 1.8s var(--ease-out); }
@keyframes look { 0%, 100% { transform: none; } 25% { transform: rotate(-10deg) translateX(-1px); } 60% { transform: rotate(8deg) translateX(1px); } }
.sari-fab.wave .fx { animation: wave 1.4s ease-in-out; transform-origin: 30% 90%; }
@keyframes wave { 0% { opacity: 0; transform: scale(.6); } 15% { opacity: 1; transform: scale(1) rotate(0); } 30% { transform: rotate(18deg); } 45% { transform: rotate(-10deg); } 60% { transform: rotate(16deg); } 85% { opacity: 1; } 100% { opacity: 0; transform: rotate(0); } }
.sari-fab.flare .aura { animation: flare 1.4s var(--ease-out); }
@keyframes flare { 0% { opacity: .3; transform: scale(1); } 35% { opacity: .9; transform: scale(1.45); } 100% { opacity: .3; transform: scale(1); } }
/* Reaktionen */
.sari-fab.cheer .sari-live { animation: cheer .7s var(--spring) 2; }
.sari-fab.cheer .aura { animation: flare 1.2s var(--ease-out); }
.sari-fab.cheer .fx { animation: pop .3s var(--ease-out); }
@keyframes cheer { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-9px) scale(1.08); } }
.sari-fab.worried .sari-live img { animation: worried 4.2s ease-in-out; filter: saturate(.75); }
.sari-fab.worried .aura { opacity: .12; animation: none; }
.sari-fab.worried .fx { animation: drip 1.6s ease-in infinite; }
@keyframes worried { 0% { transform: none; } 12%, 88% { transform: rotate(-7deg) translateY(2px) scale(.97); } 100% { transform: none; } }
@keyframes drip { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(6px); } }
/* Sprechblase über Sari – tippt man nicht an, blockiert nichts */
.sari-say { position: fixed; right: 14px; bottom: 140px; z-index: 7; max-width: 230px; padding: 9px 12px; border-radius: 14px 14px 4px 14px;
  background: var(--panel-solid); border: 1px solid var(--glow); color: var(--text); font-size: 13px; line-height: 1.4;
  box-shadow: 0 0 14px var(--glow-soft); pointer-events: none; transform-origin: 100% 100%; }
.sari-say.in { animation: spring .45s var(--ease-out) both; }
.sari-say.out { animation: sayOut .25s ease-in forwards; }
@keyframes sayOut { to { opacity: 0; transform: translateY(6px) scale(.96); } }
/* Chat: Denk-Pose + Tipp-Punkte */
.chat-top img { transition: transform .3s var(--ease-out); }
.chat-top.thinking img { animation: think 1.2s ease-in-out infinite; }
@keyframes think { 0%, 100% { transform: rotate(-6deg) translateY(-1px); } 50% { transform: rotate(-2deg) translateY(1px); } }
.typing { align-self: flex-start; display: flex; gap: 4px; padding: 11px 14px; border-radius: 14px; border-bottom-left-radius: 4px;
  background: var(--panel); border: 1px solid var(--line); animation: spring .3s var(--ease-out) both; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: dot 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .sari-live, .sari-live img, .sari-live .aura { animation: none !important; }
  .typing i { animation: none !important; opacity: .8; }
}

/* ===== Foto-Editor & Avatar-Auswahl ===== */
.ph-wrap { display: grid; place-items: center; padding: 6px 0; }
.ph-wrap canvas { border-radius: 50%; cursor: grab; background: var(--chip); }
.seg { display: flex; gap: 8px; margin-top: 12px; } .seg .btn { flex: 1; }
input[type=range] { width: 100%; accent-color: var(--glow); }
.pick.upload img { border-radius: 50%; }
.onb-sari { margin: 10px 0 14px; } .onb-sari img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
#obName { width: 100%; font-size: 18px; padding: 12px; margin-top: 8px; }
.btn:disabled { opacity: .45; cursor: default; }

/* ===== Goldene Sari (Ganzkörper-Animation): in runden/quadratischen Rahmen Kopf & Schultern zeigen ===== */
img[src$="sari_avatar.webp"], img[src$="sari_avatar_still.png"], img[src$="sari_system.webp"], img[src$="sari_system_still.png"] { object-fit: cover; object-position: 50% 6%; background: radial-gradient(circle at 50% 40%, #fff6e6, #f6d9a8); }
img[src$="sari_system.webp"], img[src$="sari_system_still.png"] { background: radial-gradient(circle at 50% 40%, #1d3a66, #0b1430); }
@supports (object-view-box: inset(0)) {
  img[src$="sari_avatar.webp"], img[src$="sari_avatar_still.png"], img[src$="sari_system.webp"], img[src$="sari_system_still.png"] { object-view-box: inset(4% 20% 62% 20%); object-position: 50% 50%; }
}
.warm-preview { display: grid; place-items: center; margin: 10px 0 4px; }
.warm-preview img { width: 150px; height: 230px; object-view-box: none !important; object-fit: contain !important; object-position: 50% 50% !important;
  border-radius: 16px; border: 1px solid var(--glow); box-shadow: 0 0 22px rgba(255, 196, 107, .45); }
.badge.gold { background: linear-gradient(135deg, #ffd36b, #ff9f6b); color: #3a2400; }
/* Begleiterin-Auswahl in den Einstellungen */
.comp-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.comp-pick .cp { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border-radius: var(--radius);
  background: var(--chip); border: 2px solid var(--line); color: var(--text); font: inherit; cursor: pointer; transition: transform .2s var(--ease-out), border-color .2s; }
.comp-pick .cp img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid var(--glow); }
.comp-pick .cp b { font-size: 13px; } .comp-pick .cp small { font-size: 11px; color: var(--muted); text-align: center; }
.comp-pick .cp.on { border-color: var(--accent); box-shadow: 0 0 14px var(--glow-soft); }
.comp-pick .cp:active { transform: scale(.97); }
.comp-pick .badge { position: absolute; top: 6px; left: 6px; font-size: 10px; padding: 2px 7px; border-radius: 99px; }
.actions .btn { min-width: 0; padding-left: 8px; padding-right: 8px; }

/* ===== Quest-Karte: ganze Karte = Details, Häkchen = erledigen, ✎ = bearbeiten ===== */
.quest[data-act="details"] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.quest[data-act="details"]:active { transform: scale(.99); }
.quest .check { width: 36px; height: 36px; border-color: var(--glow); position: relative; }
.quest .check::after { content: ""; position: absolute; inset: -8px; } /* größere Trefferfläche */
.quest .edit { min-width: 40px; min-height: 40px; border-radius: 10px; background: var(--chip); border: 1px solid var(--line); color: var(--text); font-size: 17px; }
.qmeta .more { color: var(--accent); font-weight: 600; }
/* Quest-Details */
.qd-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.qdetail .qmeta .ok { color: var(--accent); font-weight: 700; }
.qdetail .h { margin: 14px 0 6px; }
ol.steps { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
ol.steps li::marker { color: var(--accent); font-weight: 700; }
ol.steps li.sub { list-style: none; margin-left: -4px; padding-left: 14px; position: relative; }
ol.steps li.sub::before { content: "•"; position: absolute; left: 0; color: var(--accent); }
textarea { resize: vertical; min-height: 96px; line-height: 1.4; }
.btn.small { padding: 7px 10px; font-size: 13px; margin-top: 8px; }
/* Befehlsliste */
.cmds .cmd { display: block; width: 100%; text-align: left; margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: var(--chip); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.cmds .cmd b { display: block; font-size: 14px; } .cmds .cmd small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.cmds .cmd:active { transform: scale(.98); border-color: var(--glow); }
.cmds .h { margin: 14px 0 8px; }
/* ===== Bibliothek ===== */
.bottombar .tab span { position: relative; }
.tab-badge { position: absolute; top: -4px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: #ff6b6b; color: #fff; font: 700 10px/16px system-ui, sans-serif; font-style: normal; text-align: center; }
.libitem, .inbox { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.libitem .lk { font-size: 24px; width: 36px; text-align: center; flex: none; }
.libitem .more { color: var(--accent); font-size: 22px; }
.inbox { border-style: dashed; cursor: default; }
.libsum { margin-bottom: 4px; }
.rd-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { padding: 7px 11px; border-radius: 99px; border: 1px solid var(--line); background: var(--chip); color: var(--text); font-size: 13px; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-btn.on { border-color: var(--glow); background: var(--line); box-shadow: 0 0 10px var(--glow-soft); }
#rdNew { margin-top: 8px; }
.lnote { font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--line); } .lnote small { color: var(--muted); }
.libd .seg .btn, .rd .seg .btn { font-size: 13px; padding: 8px 6px; }
.rd-match { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--glow); background: var(--chip); font-size: 13px; }
.rd-match span { flex: 1 1 100%; } .rd-match .btn.small { margin-top: 0; }
.lb-dates { line-height: 1.6; }
.sari-badge { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 10px; font-weight: 700; background: linear-gradient(135deg, #ffd36b, #ff9f6b); color: #3a2400; }
.libitem .vno { font-size: 15px; font-weight: 800; color: var(--accent); border: 1px solid var(--line); border-radius: 8px; height: 32px; line-height: 30px; }
.libitem.st-ungelesen { opacity: .78; border-style: dashed; }
.libitem.st-fertig .vno { background: var(--line); color: #fff; }
.libitem .x { background: none; border: 0; color: var(--muted); font-size: 22px; min-width: 40px; min-height: 40px; cursor: pointer; }