/* ══════════════════════════════════════════
   Kartenkiste – cozy & smooth, pixel als akzent
   ══════════════════════════════════════════ */

:root {
  --bg:        #faf6ec;
  --bg-alt:    #e8dcc1;
  --surface:   #fffdf8;
  --ink:       #5b3f26;
  --ink-soft:  #815b37;
  --line:      #e0d2b4;
  --line-strong: #c5ae85;

  /* Primärfarbe = Hauptgrün (laut Spec) */
  --lilac:     #6a8a41;
  --lilac-dk:  #46652a;
  --lilac-lt:  #eaf0d9;

  --mint:      #b3ca85;
  --mint-dk:   #6a8a41;
  --sage:      #b6ccaa;
  --rose:      #e0857e;
  --rose-dk:   #cc6b64;
  --butter:    #e0a845;
  --butter-dk: #c48a2c;
  --peach:     #d27730;
  --peach-dk:  #b9611f;
  --sky:       #a3c6d6;
  --sky-dk:    #6fa2b8;

  --pix: 'Press Start 2P', monospace;
  --font: 'Nunito Sans', ui-rounded, 'Segoe UI', system-ui, sans-serif;

  --shadow:    0 12px 32px rgba(91, 63, 38, .08);
  --shadow-lg: 0 18px 40px rgba(91, 63, 38, .16);
  --radius:    24px;
  --radius-sm: 14px;
}

/* 12 Pastellfarben für Karten (warm & sanft) */
.pc-0  { --card-bg: #fffdf7; --card-edge: #ece0cd; }
.pc-1  { --card-bg: #f1e9ff; --card-edge: #cdb8f5; }
.pc-2  { --card-bg: #ffe6ec; --card-edge: #ffb0bb; }
.pc-3  { --card-bg: #ffe9d8; --card-edge: #ffbf9e; }
.pc-4  { --card-bg: #fff6d9; --card-edge: #ffdc94; }
.pc-5  { --card-bg: #f0f6d4; --card-edge: #cfe0a0; }
.pc-6  { --card-bg: #dcf1e3; --card-edge: #a8dcbb; }
.pc-7  { --card-bg: #d9f0f0; --card-edge: #9fe0e0; }
.pc-8  { --card-bg: #dcedff; --card-edge: #a9d0ef; }
.pc-9  { --card-bg: #e6e3ff; --card-edge: #bdb8f2; }
.pc-10 { --card-bg: #f8e5f6; --card-edge: #ecb7e8; }
.pc-11 { --card-bg: #f1e8d6; --card-edge: #dcc9a9; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  background-image:
    radial-gradient(circle at 10% 6%, #faf0dc 0%, transparent 44%),
    radial-gradient(circle at 92% 90%, #e8f3e4 0%, transparent 46%),
    radial-gradient(circle at 96% 10%, #fdeadf 0%, transparent 38%);
  background-attachment: fixed;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: .95rem; color: inherit; }
.hidden { display: none !important; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.01em; }
.pix { font-family: var(--pix); font-weight: 400; letter-spacing: 0; }
code { font-family: ui-monospace, monospace; font-size: .82em; background: var(--lilac-lt); color: #6f5a97; padding: 1px 6px; border-radius: 5px; }

/* Pixel-Art scharf, alles andere weich */
.buddy-art, .buddy-big, .summary-buddy, .acc-icon { image-rendering: pixelated; }
img[src$=".png"] { image-rendering: pixelated; }

.scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 70; display: none; background: repeating-linear-gradient(rgba(0,0,0,.045) 0 1px, transparent 1px 3px); }
body.crt .scanlines { display: block; }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; display: none; }

.app { display: flex; min-height: 100vh; }

/* ── Sidebar ── */
.sidebar {
  width: 286px; flex-shrink: 0;
  background: rgba(255,253,247,.8); backdrop-filter: blur(10px);
  border-right: 1px solid var(--line);
  padding: 22px 16px; display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand h1 { font-family: var(--pix); font-size: .74rem; line-height: 1.5; color: var(--lilac-dk); }
.brand-sub { font-size: .74rem; color: var(--ink-soft); margin-top: 3px; }
.brand-deco { width: 42px; height: 42px; object-fit: cover; border-radius: 12px; flex-shrink: 0; box-shadow: var(--shadow); }
.brand-deco:not([src]) { display: none; }

/* ── Maskottchen ── */
.buddy-box {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: linear-gradient(155deg, #fff7ec, var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 11px 13px; transition: transform .14s, box-shadow .14s;
}
.buddy-box:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.buddy-art { width: 54px; height: 54px; flex-shrink: 0; }
.buddy-art svg, .buddy-big svg, .summary-buddy svg, .acc-icon svg { width: 100%; height: 100%; display: block; }

/* Katze + PNG-Accessoire als Overlay */
.cat-wrap { position: relative; width: 100%; height: 100%; }
.cat-wrap > svg, .cat-wrap > img:not(.cat-acc) { width: 100%; height: 100%; display: block; }
.cat-wrap .cat-acc { position: absolute; height: auto; pointer-events: none; image-rendering: pixelated; }
/* Sinnvolle Position je Accessoire-Typ auf der Katze */
.cat-wrap .cat-acc-hat     { top: -16%; left: 11%; width: 78%; }
.cat-wrap .cat-acc-bow     { top: -2%;  left: 4%;  width: 42%; }
.cat-wrap .cat-acc-glasses { top: 30%;  left: 17%; width: 66%; }
.cat-wrap .cat-acc-scarf   { bottom: -8%; left: 15%; width: 70%; }
.buddy-info { flex: 1; min-width: 0; }
.buddy-lvl { font-family: var(--pix); font-size: .54rem; color: var(--lilac-dk); }
.buddy-lvl.big { font-size: .78rem; margin: 8px 0; }
.xp-bar { height: 11px; background: var(--bg-alt); border-radius: 20px; overflow: hidden; margin: 6px 0; }
.xp-bar.big { height: 16px; }
.xp-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--lilac), #d6c2ff); border-radius: 20px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.buddy-xp { font-size: .74rem; color: var(--ink-soft); }

/* ── Serie ── */
.streak-box { background: linear-gradient(150deg, #fff2df, var(--surface)); border: 1px solid #f4e2c8; border-radius: var(--radius); box-shadow: var(--shadow); padding: 11px 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.streak-flame { font-size: 1.4rem; }
.streak-num { font-size: 1.02rem; font-weight: 700; }
.streak-lbl { font-size: .7rem; color: var(--ink-soft); }
.streak-week { width: 100%; margin-top: 3px; }
.week-dots { display: flex; gap: 4px; margin-bottom: 5px; }
.week-dot { flex: 1; height: 8px; background: var(--bg-alt); border-radius: 5px; }
.week-dot.done { background: var(--mint-dk); }
.week-dot.today { box-shadow: 0 0 0 2px var(--lilac); }

.side-section { flex: 1; overflow-y: auto; min-height: 0; padding-right: 8px; scrollbar-gutter: stable; }
.side-head { display: flex; justify-content: space-between; align-items: center; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; padding: 0 4px; }
.icon-btn { width: 26px; height: 26px; border-radius: 9px; background: var(--lilac-lt); color: var(--lilac-dk); font-size: 1.05rem; line-height: 1; transition: .15s; }
.icon-btn:hover { background: var(--lilac); color: #fff; }

.course-tree { display: flex; flex-direction: column; gap: 4px; }
.course-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 9px 10px; border-radius: var(--radius-sm); font-weight: 600; font-size: .92rem; transition: .14s; }
.course-row:hover { background: var(--bg-alt); }
.course-row.selected { background: var(--lilac-lt); color: #6f5a97; }
.course-row.archived, .deck-row.archived { opacity: .5; }
.caret { font-size: .6rem; color: var(--ink-soft); transition: transform .18s; width: 11px; flex-shrink: 0; }
.caret.open { transform: rotate(90deg); }
.course-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { font-size: .68rem; font-weight: 700; color: var(--ink-soft); background: var(--bg-alt); padding: 2px 8px; border-radius: 20px; }
.badge.due { background: var(--rose); color: #fff; }

.deck-list { padding: 3px 0 6px 20px; display: flex; flex-direction: column; gap: 3px; }
.deck-row { display: flex; align-items: center; gap: 7px; width: 100%; border-radius: var(--radius-sm); padding-right: 6px; color: var(--ink-soft); transition: .14s; overflow: hidden; }
.deck-row:hover { background: var(--bg-alt); color: var(--ink); }
.deck-row.selected { background: var(--mint); color: #2f6b45; font-weight: 600; }
.deck-swatch { width: 6px; align-self: stretch; background: var(--card-edge, var(--line)); flex-shrink: 0; }
.deck-pick { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 8px 0 8px 6px; text-align: left; font-size: .88rem; }
.deck-edit { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; font-size: .82rem; color: var(--ink-soft); opacity: .5; transition: .14s; }
.deck-row:hover .deck-edit { opacity: 1; }
.deck-edit:hover { background: var(--surface); color: var(--lilac-dk); }
.deck-mini { font-size: .8rem; color: var(--lilac-dk); font-weight: 600; padding: 6px 10px; border-radius: 9px; text-align: left; width: 100%; }
.deck-mini:hover { background: var(--lilac-lt); }
.show-arch { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--ink-soft); padding: 12px 4px 0; cursor: pointer; }
.show-arch input, .toggle input { accent-color: var(--lilac-dk); width: 15px; height: 15px; }

.side-foot { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 12px; }
.nav-link { padding: 9px 10px; border-radius: 10px; text-align: left; font-size: .88rem; font-weight: 600; color: var(--ink-soft); transition: .14s; }
.nav-link:hover { background: var(--bg-alt); color: var(--ink); }
.nav-link.active { background: var(--lilac-lt); color: #6f5a97; }
.foot-deco { width: 100%; max-height: 90px; object-fit: contain; margin-top: 10px; border-radius: var(--radius-sm); }
.foot-deco:not([src]) { display: none; }

/* ── Main ── */
.main { flex: 1; padding: 26px 42px 60px; max-width: 1000px; }
.tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tab { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 700; padding: 10px 14px; border-radius: 12px 12px 0 0; color: var(--ink-soft); border-bottom: 3px solid transparent; margin-bottom: -1px; transition: .16s; }
.tab:hover { color: var(--ink); background: var(--bg-alt); }
.tab.active { color: var(--lilac-dk); border-bottom-color: var(--lilac); }
.tab-ico { width: 22px; height: 22px; flex-shrink: 0; }
.nav-ico { width: 20px; height: 20px; vertical-align: -4px; margin-right: 4px; }
.streak-ico { width: 34px; height: 34px; }

.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 22px; }
.page-head h2 { font-size: 1.6rem; }
.page-sub { font-size: .9rem; color: var(--ink-soft); margin-top: 5px; }
.head-deco { width: 76px; height: 76px; object-fit: cover; border-radius: 16px; flex-shrink: 0; box-shadow: var(--shadow); }
.head-deco:not([src]) { display: none; }

.card-panel {
  position: relative; overflow: hidden;
  background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px 24px; margin-bottom: 16px;
  background-repeat: no-repeat;
  background-position: 6px 6px, right 6px top 6px, left 6px bottom 6px, right 6px bottom 6px;
  background-size: 26px 26px;
  background-image:
    url("assets/corner_top_left.png"),
    url("assets/corner_top_right.png"),
    url("assets/corner_bottom_left.png"),
    url("assets/corner_bottom_right.png");
}
/* Pixel-Deko rechts unten in Panels */
.panel-decor { position: absolute; right: 12px; bottom: 10px; pointer-events: none; image-rendering: pixelated; z-index: 0; }
.panel-decor.cat { width: 150px; opacity: .97; }
.panel-decor.desk { width: 96px; opacity: .97; right: 16px; bottom: 12px; }
/* Panel hoch genug, damit der Schreibtisch den „Termin setzen"-Button nie erreicht */
#exam-panel { min-height: 188px; }
/* Studien-Katze oben rechts, damit der „Los geht's"-Button sie nicht überdeckt */
.panel-decor.start-cat { width: 150px; top: 6px; right: 12px; bottom: auto; }
/* Blatt-Girlande sitzt auf dem oberen Rahmen der Box */
.panel-topper { position: absolute; top: 0; left: 50%; transform: translate(-50%, -52%); width: 190px; height: auto; z-index: 3; pointer-events: none; image-rendering: pixelated; }
.card-panel > *:not(.panel-decor):not(.panel-topper) { position: relative; z-index: 1; }
/* Inhalt macht Platz, damit Deko frei steht (auf großen Screens) */
@media (min-width: 901px) {
  #exam-body, .mini-stats { padding-right: 132px; }
  #view-dashboard .card-panel > h3 { padding-right: 150px; }
}
/* Icons einheitlich groß & unverzerrt */
.tab-ico, .nav-ico, .chip-ico, .coll-ico, .ach-ico, .pd-ico, .prof-ach-ico, .streak-ico, .currency-bar .cur img, .pen-ico { object-fit: contain; }
.card-panel h3 { font-size: 1.02rem; margin-bottom: 8px; }
.card-panel.danger { border-color: #f7d5da; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.panel-head h3 { margin: 0; }
.pct { font-size: 1.35rem; font-weight: 700; color: var(--lilac-dk); }
.soon { font-size: .58rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--sky-dk); padding: 3px 8px; border-radius: 12px; vertical-align: middle; }

.bar { height: 15px; background: var(--bg-alt); border-radius: 20px; overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--lilac), #d9c6ff); border-radius: 20px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.bar-note { font-size: .84rem; color: var(--ink-soft); margin-top: 10px; }
.mini-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.mini-stat { font-size: .82rem; color: var(--ink-soft); }
.mini-stat b { font-size: 1.15rem; color: var(--ink); display: block; margin-bottom: 1px; }

.level-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.level-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; position: relative; }
.dot { position: absolute; top: 18px; right: 18px; width: 12px; height: 12px; border-radius: 50%; }
.lvl-red .dot { background: var(--rose); } .lvl-yellow .dot { background: var(--butter-dk); } .lvl-green .dot { background: var(--mint-dk); }
.lvl-red { background: linear-gradient(160deg, #fff3f4, var(--surface)); }
.lvl-yellow { background: linear-gradient(160deg, #fff9e9, var(--surface)); }
.lvl-green { background: linear-gradient(160deg, #eff9f2, var(--surface)); }
.level-num { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; }
.level-lbl { font-size: .76rem; color: var(--ink-soft); margin-top: 4px; }

.opt-row { display: flex; align-items: center; gap: 14px; margin: 14px 0; flex-wrap: wrap; }
.opt-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); width: 96px; flex-shrink: 0; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { font-size: .88rem; font-weight: 600; padding: 8px 15px; border-radius: 20px; background: var(--bg-alt); color: var(--ink-soft); transition: .15s; }
.chip:hover { background: var(--lilac-lt); color: var(--lilac-dk); }
.chip.active { background: var(--lilac); color: #fff; box-shadow: 0 4px 12px rgba(161,132,230,.34); }
.scope-note { font-size: .9rem; flex: 1; }
.due-note { font-size: .84rem; color: var(--ink-soft); text-align: center; margin-top: 10px; }

.input, .textarea, .select, .mini-input { background: var(--bg-alt); border: 1.5px solid transparent; border-radius: var(--radius-sm); padding: 11px 14px; width: 100%; transition: .15s; outline: none; }
.input:focus, .textarea:focus, .select:focus, .mini-input:focus { border-color: var(--lilac); background: var(--surface); }
.textarea { resize: vertical; line-height: 1.5; }
.mini-input { width: 110px; }
.select { cursor: pointer; }
.card-panel > .input, .card-panel > .textarea { margin: 12px 0; }
.filter-row { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.search { max-width: 240px; }
.toggle { display: flex; align-items: center; gap: 10px; font-size: .9rem; padding: 8px 0; cursor: pointer; }

.btn-primary { font-weight: 700; font-size: .9rem; color: #fff; background: var(--lilac); border-radius: 20px; padding: 11px 22px; box-shadow: 0 4px 14px rgba(161,132,230,.32); transition: .15s; }
.btn-primary:hover { background: var(--lilac-dk); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary.big { width: 100%; padding: 14px; font-size: .98rem; margin-top: 8px; }
.btn-primary.tiny, .btn-ghost.tiny { font-size: .8rem; padding: 8px 14px; }
.btn-ghost { font-weight: 600; font-size: .88rem; color: var(--ink-soft); padding: 10px 16px; border-radius: 20px; transition: .14s; }
.btn-ghost:hover { background: var(--bg-alt); color: var(--ink); }
.btn-ghost.outline { border: 1.5px solid var(--line); }
.btn-ghost.outline:hover { border-color: var(--lilac); background: var(--lilac-lt); color: var(--lilac-dk); }
.btn-danger { font-weight: 700; font-size: .88rem; color: #fff; background: var(--rose); border-radius: 20px; padding: 10px 18px; box-shadow: 0 4px 14px rgba(255,176,187,.5); transition: .15s; }
.btn-danger:hover { background: var(--rose-dk); }

/* ── Study ── */
.study-head { align-items: center; }
.study-progress { display: flex; align-items: center; gap: 12px; }
#study-counter { font-size: .84rem; font-weight: 700; color: var(--ink-soft); }
.mini-bar { width: 170px; height: 9px; background: var(--bg-alt); border-radius: 10px; overflow: hidden; }
.mini-bar-fill { height: 100%; width: 0; background: var(--lilac); border-radius: 10px; transition: width .35s; }

.stage { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.flashcard { width: 100%; max-width: 640px; height: 380px; perspective: 1600px; cursor: pointer; }
.flip-inner { position: relative; width: 100%; height: 100%; transition: transform .58s cubic-bezier(.4,.15,.2,1); transform-style: preserve-3d; }
.flip-inner.flipped { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1.5px solid var(--card-edge, var(--line)); border-radius: 22px; box-shadow: var(--shadow-lg); background: var(--card-bg, var(--surface)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 48px 34px 34px; text-align: center; overflow: auto; }
.face.back { transform: rotateY(180deg); }
.face-text { font-size: 1.3rem; font-weight: 600; line-height: 1.5; }
.face-img { max-width: 100%; max-height: 220px; object-fit: contain; border-radius: var(--radius-sm); }
.face-top { position: absolute; top: 14px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.face-deck { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.face-status { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--ink-soft); flex-shrink: 0; }
.face-status .pill { width: 10px; height: 10px; border-radius: 50%; }
.face-side { position: absolute; bottom: 14px; left: 0; right: 0; font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); opacity: .7; }
.face-flags { position: absolute; top: 40px; right: 20px; font-size: .9rem; }

.card-tools { display: flex; gap: 8px; }
.tool-btn { width: 42px; height: 42px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); font-size: 1rem; box-shadow: var(--shadow); transition: .14s; }
.tool-btn:hover { border-color: var(--lilac); background: var(--lilac-lt); transform: translateY(-1px); }
.tool-btn.on { background: var(--butter); border-color: var(--butter-dk); }

.hint-box { max-width: 640px; width: 100%; background: #fff7e2; border: 1px solid var(--butter-dk); border-radius: var(--radius-sm); padding: 14px 16px; font-size: .92rem; line-height: 1.5; display: flex; align-items: center; gap: 12px; }
.hint-cat { width: 46px; height: 46px; flex-shrink: 0; image-rendering: pixelated; }
.hint { font-size: .82rem; color: var(--ink-soft); text-align: center; }

.answer-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.rate { font-weight: 700; font-size: .88rem; padding: 12px 20px; border-radius: 16px; transition: .15s; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 108px; box-shadow: var(--shadow); }
.rate small { font-size: .62rem; opacity: .65; font-weight: 600; }
.rate:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.rate-again { background: var(--rose); color: #fff; }
.rate-hard { background: var(--butter); color: #8a6413; }
.rate-good { background: var(--mint); color: #2f6b45; }
.rate-easy { background: var(--sky); color: #2c5578; }

.summary { text-align: center; padding: 26px 0; }
.summary h2 { font-size: 1.55rem; margin-bottom: 10px; }
.summary > p { color: var(--ink-soft); margin-bottom: 18px; }
.summary-buddy { margin: 0 auto 6px; }
.cat-emote { width: 210px; height: auto; image-rendering: pixelated; display: block; margin: 0 auto; }
.summary-stats { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.sum-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 12px 18px; }
.sum-num { font-size: 1.4rem; font-weight: 700; }
.sum-lbl { font-size: .72rem; color: var(--ink-soft); margin-top: 3px; }
.summary-actions { display: flex; gap: 12px; justify-content: center; }

/* ── Kartenliste ── */
.card-list { display: flex; flex-direction: column; gap: 10px; }
.mini-card { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 13px 16px; display: flex; align-items: center; gap: 13px; transition: .15s; }
.mini-card:hover { transform: translateX(2px); box-shadow: var(--shadow-lg); }
.mini-card.lvl-red { border-left-color: var(--rose); } .mini-card.lvl-yellow { border-left-color: var(--butter-dk); } .mini-card.lvl-green { border-left-color: var(--mint-dk); }
.mini-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.mini-swatch { width: 10px; height: 46px; border-radius: 5px; background: var(--card-bg); border: 1px solid var(--card-edge); flex-shrink: 0; }
.mini-body { flex: 1; min-width: 0; }
.mini-q { font-weight: 600; font-size: .95rem; margin-bottom: 2px; }
.mini-a { font-size: .84rem; color: var(--ink-soft); }
.mini-q, .mini-a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-deck { font-size: .72rem; color: var(--ink-soft); margin-top: 4px; }
.mini-actions { display: flex; gap: 4px; flex-shrink: 0; }
.mini-btn { width: 32px; height: 32px; border-radius: 9px; font-size: .85rem; color: var(--ink-soft); transition: .14s; }
.mini-btn:hover { background: var(--bg-alt); color: var(--ink); }
.mini-btn.on { color: var(--butter-dk); }
.mini-btn.del:hover { background: #ffe6ec; color: var(--rose-dk); }
.empty { text-align: center; padding: 52px 20px; color: var(--ink-soft); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); }
.empty-emoji { font-size: 2.1rem; display: block; margin-bottom: 10px; }

/* ── Sammlungen ── */
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 14px; margin-bottom: 16px; }
.coll-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; text-align: left; transition: .15s; }
.coll-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.coll-emoji { font-size: 1.5rem; }
.coll-num { font-size: 1.7rem; font-weight: 700; margin-top: 6px; }
.coll-name { font-weight: 700; font-size: .94rem; margin-top: 2px; }
.coll-desc { font-size: .76rem; color: var(--ink-soft); margin-top: 5px; line-height: 1.4; }

/* ── Kalender ── */
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-weekdays { margin-bottom: 6px; }
.cal-weekdays span { text-align: center; font-size: .68rem; font-weight: 700; text-transform: uppercase; color: var(--ink-soft); }
.cal-day { aspect-ratio: 1; border-radius: 11px; background: var(--bg-alt); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .82rem; font-weight: 600; transition: .14s; position: relative; border: 2px solid transparent; }
.cal-day:hover { border-color: var(--lilac); }
.cal-day.blank { background: none; cursor: default; }
.cal-day.blank:hover { border-color: transparent; }
.cal-day.today { border-color: var(--lilac-dk); }
.cal-day.selected { box-shadow: var(--shadow); border-color: var(--ink-soft); }
.cal-day .n { font-size: .6rem; font-weight: 600; color: var(--ink-soft); }
.cal-day.d1 { background: #dcf1e3; } .cal-day.d2 { background: #b6e4c6; } .cal-day.d3 { background: #8fd6a8; } .cal-day.d4 { background: var(--mint-dk); }
.cal-day.exam { background: var(--rose); color: #fff; } .cal-day.exam .n { color: #fff; }
.cal-day .due-mark { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--lilac-dk); }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: .78rem; color: var(--ink-soft); }
.cal-legend span { display: flex; align-items: center; gap: 5px; }
.sw { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.sw0 { background: var(--bg-alt); } .sw1 { background: #b6e4c6; } .sw3 { background: var(--mint-dk); } .sw-exam { background: var(--rose); } .sw-due { background: var(--lilac-dk); border-radius: 50%; }

/* ── Statistik ── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 16px; }
.stat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.stat-num { font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; }
.stat-lbl { font-size: .74rem; color: var(--ink-soft); margin-top: 4px; }
.stat-row { margin-bottom: 12px; }
.stat-row-head { display: flex; justify-content: space-between; font-size: .86rem; margin-bottom: 5px; }
.stat-row-head span { color: var(--ink-soft); font-size: .8rem; }
.stat-bar { height: 10px; background: var(--bg-alt); border-radius: 10px; overflow: hidden; }
.stat-bar i { display: block; height: 100%; background: var(--lilac); border-radius: 10px; }

/* ── Belohnungen ── */
.buddy-panel { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.buddy-panel { background: linear-gradient(150deg, #fff6ea, var(--surface)); }
.buddy-big { width: 128px; height: 128px; flex-shrink: 0; }
.buddy-big-info { flex: 1; min-width: 200px; }
.acc-grid, .ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.acc-card, .ach-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 14px 10px; text-align: center; }
.acc-card { cursor: pointer; transition: .15s; }
.acc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.acc-card.locked, .ach-card.locked { opacity: .5; }
.acc-card.equipped { background: var(--lilac-lt); border-color: var(--lilac); }
.acc-icon { width: 46px; height: 46px; margin: 0 auto 7px; }
.acc-name { font-size: .82rem; font-weight: 600; }
.acc-need { font-size: .7rem; color: var(--ink-soft); margin-top: 3px; }
.ach-emoji { font-size: 1.7rem; }
.ach-name { font-weight: 700; font-size: .84rem; margin-top: 8px; }
.ach-need { font-size: .74rem; color: var(--ink-soft); margin-top: 5px; }
.ach-card.done { background: linear-gradient(160deg, #eff9f2, var(--surface)); border-color: var(--mint-dk); }

/* ── Modal ── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(87,77,99,.3); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 90; }
.modal { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 26px; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; animation: pop .22s cubic-bezier(.34,1.4,.64,1); }
@keyframes pop { from { opacity: 0; transform: scale(.95) translateY(8px); } }
.modal h3 { font-size: 1.2rem; margin-bottom: 16px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7px; }
.img-slot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.img-slot img { width: 58px; height: 58px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.file-btn { font-size: .8rem; font-weight: 600; color: var(--lilac-dk); padding: 8px 13px; border-radius: 11px; background: var(--lilac-lt); }
.file-btn:hover { background: var(--lilac); color: #fff; }
.swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.swatch { width: 32px; height: 32px; border-radius: 9px; background: var(--card-bg); border: 2px solid var(--card-edge); transition: .14s; }
.swatch:hover { transform: scale(1.12); }
.swatch.sel { box-shadow: 0 0 0 3px var(--lilac-dk); }
.row-actions { display: flex; gap: 8px; margin: 14px 0 8px; flex-wrap: wrap; }
.radio-row { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.radio-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: .14s; }
.radio-opt:hover { border-color: var(--lilac); background: var(--lilac-lt); }
.radio-opt input { margin-top: 3px; accent-color: var(--lilac-dk); }
.radio-opt strong { font-size: .95rem; display: block; }
.radio-opt span { font-size: .8rem; color: var(--ink-soft); line-height: 1.4; }

.backup-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.status { font-size: .84rem; color: var(--ink-soft); margin-top: 12px; min-height: 20px; }
.status.err { color: var(--rose-dk); font-weight: 600; }
.status.ok { color: var(--mint-dk); font-weight: 600; }
.deco-preview { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.deco-preview img { width: 74px; height: 74px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); }

.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); font-weight: 600; font-size: .9rem; background: var(--ink); color: #fff; padding: 13px 22px; border-radius: 20px; box-shadow: var(--shadow-lg); z-index: 95; animation: rise .26s cubic-bezier(.34,1.4,.64,1); }
@keyframes rise { from { opacity: 0; transform: translateX(-50%) translateY(10px); } }

/* Erfolgs-Benachrichtigung unten links */
.ach-pop { position: fixed; right: 22px; bottom: 22px; z-index: 96; display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow-lg);
  padding: 12px 16px 12px 12px; max-width: 320px; animation: achIn .3s cubic-bezier(.34,1.5,.6,1); }
.ach-pop.hide { animation: achOut .3s ease forwards; }
.ach-pop .pop-ico { width: 52px; height: 52px; flex-shrink: 0; image-rendering: pixelated; }
.ach-pop .pop-eyebrow { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lilac-dk); }
.ach-pop .pop-name { font-weight: 800; font-size: 1rem; }
.ach-pop .pop-reward { font-size: .78rem; color: var(--ink-soft); }
@keyframes achIn { from { opacity: 0; transform: translateX(24px); } }
@keyframes achOut { to { opacity: 0; transform: translateX(24px); } }

/* Profil */
.prof-head { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.prof-avatar { width: 120px; height: 120px; flex-shrink: 0; }
.prof-avatar svg, .prof-avatar img { width: 100%; height: 100%; image-rendering: pixelated; }
.prof-name { font-size: 1.5rem; font-weight: 800; }
.prof-meta { color: var(--ink-soft); font-size: .92rem; margin-top: 2px; }
.prof-bio { margin-top: 10px; line-height: 1.5; }
.prof-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.prof-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--lilac-lt); border: 1px solid var(--mint); color: var(--lilac-dk); font-weight: 700; font-size: .8rem; padding: 5px 12px; border-radius: 20px; }
.prof-ach { display: flex; gap: 8px; flex-wrap: wrap; }
.prof-ach .acc-icon { width: 42px; height: 42px; }
.prof-deck { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; background: var(--surface); }
.prof-deck .pd-body { flex: 1; min-width: 0; }
.prof-deck .pd-title { font-weight: 700; }
.prof-deck .pd-sub { font-size: .78rem; color: var(--ink-soft); }
.prof-deck .pd-likes { font-weight: 800; color: var(--rose-dk); white-space: nowrap; }
.field-lbl { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7px; }

/* ── PNG-Widgets & Deko ── */
.panel-decor.desk { width: 148px; opacity: .96; bottom: 0; right: 8px; }
.panel-decor.chest { width: 96px; bottom: 10px; right: 14px; }
.coll-ico { width: 40px; height: 40px; image-rendering: pixelated; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty-img { width: 180px; max-width: 60%; image-rendering: pixelated; opacity: .95; }
.chip-ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; image-rendering: pixelated; }

/* Accessoire-Shop mit echten Rahmen-PNGs */
.acc-slot { position: relative; width: 84px; height: 84px; margin: 0 auto 8px; }
.acc-slot .slot-frame { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.acc-slot .cat-wrap { position: absolute; inset: 16%; width: 68%; height: 68%; }
.acc-card .acc-need { min-height: 16px; }

/* Erfolge mit Icon-PNGs */
.ach-ico { width: 40px; height: 40px; image-rendering: pixelated; }
.ach-card { display: flex; flex-direction: column; align-items: center; }
.ach-card.locked .ach-ico { filter: grayscale(1); opacity: .45; }
.ach-reward { color: var(--lilac-dk); font-weight: 700; }

/* Profil – Inline-Bearbeitung (Discord-Stil) */
.prof-card .prof-head { align-items: center; }
.prof-main { flex: 1; min-width: 0; }
.pf-pen { font-size: .8rem; color: var(--ink-soft); opacity: .55; padding: 2px 6px; border-radius: 8px; margin-left: 6px; transition: .14s; }
.pf-pen:hover { opacity: 1; background: var(--lilac-lt); color: var(--lilac-dk); }
.prof-name { display: flex; align-items: center; gap: 2px; }
.prof-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pf-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-alt); border-radius: 20px; padding: 5px 6px 5px 12px; font-size: .84rem; }
.pf-chip .pf-k { font-weight: 700; color: var(--ink-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.prof-bio { display: flex; align-items: flex-start; gap: 2px; }
.prof-bio .pf-val { flex: 1; }
.pf-edit { max-width: 100%; margin: 2px 0; }
select.pf-edit, input.pf-edit { width: auto; min-width: 140px; }
textarea.pf-edit { width: 100%; }
.prof-ach-ico { width: 40px; height: 40px; image-rendering: pixelated; }
.pd-ico { width: 34px; height: 34px; image-rendering: pixelated; }

/* Bestenliste / Medaillen */
.medals { display: flex; flex-direction: column; gap: 8px; }
.medal-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.medal-row.me { border-color: var(--lilac); background: var(--lilac-lt); }
.medal-row.empty { opacity: .5; }
.medal-rank { font-size: 1.4rem; width: 28px; text-align: center; }
.medal-name { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.medal-cards { font-size: .82rem; color: var(--ink-soft); }

/* Kalender – Termin-Typen & Lern-Pausen */
.ev-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ev-klausur { background: var(--rose); } .ev-testat { background: var(--peach); } .ev-uebung { background: var(--sky-dk); }
.ev-dots { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; gap: 3px; justify-content: center; }
.cal-day.blocked { background: repeating-linear-gradient(45deg, #efe6d4, #efe6d4 4px, #e4d7bd 4px, #e4d7bd 8px); color: var(--ink-soft); }
.sw-block { background: repeating-linear-gradient(45deg, #efe6d4, #efe6d4 3px, #d8c8a6 3px, #d8c8a6 6px); }
.ev-block { margin: 8px 0 4px; }
.ev-block-head { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.ev-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.ev-name { flex: 1; font-size: .9rem; }
.ev-add { margin-top: 12px; }
.ev-add-row { display: flex; gap: 8px; margin-top: 10px; }
.ev-add-row .input { flex: 1; }
.block-toggle { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; }

/* ── Währung (Coins & Diamanten) ── */
.currency-bar { display: flex; gap: 10px; }
.currency-bar .cur { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(150deg, #fff7e6, var(--surface)); border: 1px solid #f0e2c4; border-radius: 14px;
  box-shadow: var(--shadow); padding: 8px 10px; font-weight: 800; }
.currency-bar .cur img { width: 24px; height: 24px; image-rendering: pixelated; }
.summary-reward { display: flex; gap: 14px; justify-content: center; margin-bottom: 16px; }
.cur-earn { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 1.15rem; color: var(--ink);
  background: #fff7e6; border: 1px solid #f0e2c4; border-radius: 16px; padding: 7px 15px; box-shadow: var(--shadow); }
.cur-earn img { width: 26px; height: 26px; image-rendering: pixelated; }
.pen-ico { width: 15px; height: 15px; vertical-align: -2px; image-rendering: pixelated; }

/* Schwierigere Accessoires größer anzeigen */
.acc-icon { image-rendering: pixelated; }
.acc-tier-2 .acc-icon { width: 56px; height: 56px; }
.acc-tier-3 .acc-icon { width: 66px; height: 66px; }

/* Blatt-Trenner unter Seitentiteln */
.section-divider { display: block; width: 100%; max-width: 360px; height: auto; margin: -6px auto 18px; opacity: .85; image-rendering: pixelated; pointer-events: none; }
/* Profil-Avatar im Blätterkranz */
.prof-avatar-wrap { position: relative; width: 150px; height: 150px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.prof-wreath { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.prof-avatar-wrap .prof-avatar { width: 84px; height: 84px; }
/* Pflanze im Sidebar-Fuß */
.foot-plant { display: block; width: 62px; height: auto; margin: 8px auto 0; image-rendering: pixelated; }

@media (max-width: 900px) {
  .app { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--line); }
  .side-section { max-height: 240px; }
  .main { padding: 20px 16px 50px; }
  .level-grid { grid-template-columns: 1fr; }
  .flashcard { height: 340px; }
  .opt-label { width: 100%; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .tab { white-space: nowrap; }
  .landing-title { font-size: 2rem; }
  .cat-emote { width: 160px; }
}

/* ══════════ Landing / Login ══════════ */
.landing { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; }
.landing-bg { position: absolute; inset: 0; background: url("assets/bg_landing.jpg") center/cover no-repeat; image-rendering: pixelated; }
.landing-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,20,10,.28), rgba(30,20,10,.5)); }
.landing-inner { position: relative; z-index: 1; text-align: center; width: 100%; max-width: 420px; }
.landing-title { font-family: var(--pix); font-size: 2.9rem; color: #fff; text-shadow: 0 4px 0 #3a2a18, 0 8px 22px rgba(0,0,0,.5); letter-spacing: 1px; }
.landing-tagline { font-size: 1.15rem; font-weight: 700; color: #fff; margin: 14px 0 24px; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.auth-card { background: rgba(255,253,248,.97); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 22px; text-align: left; }
.auth-tabs { display: flex; gap: 6px; background: var(--bg-alt); padding: 5px; border-radius: 14px; margin-bottom: 18px; }
.auth-tab { flex: 1; padding: 9px; border-radius: 10px; font-weight: 700; font-size: .9rem; color: var(--ink-soft); transition: .15s; }
.auth-tab.active { background: var(--surface); color: var(--lilac-dk); box-shadow: var(--shadow); }
.auth-form { display: flex; flex-direction: column; gap: 4px; }
.auth-form .field-lbl { margin-top: 10px; }
.auth-form .btn-primary { margin-top: 16px; }
.auth-status { font-size: .86rem; font-weight: 600; min-height: 18px; margin-top: 12px; text-align: center; }
.auth-status.err { color: var(--rose-dk); }
.auth-status.ok { color: var(--mint-dk); }
.auth-note { font-size: .74rem; color: var(--ink-soft); text-align: center; margin-top: 10px; }
.magic-sent { margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--lilac-lt); border: 1px solid var(--mint); text-align: center; font-size: .88rem; font-weight: 600; color: var(--lilac-dk); }
.magic-sent a { color: var(--lilac-dk); }

/* Belohnungen: Truhe nach oben, damit sie den XP-Balken nicht überdeckt */
.panel-decor.chest { width: 84px; top: 14px; right: 16px; bottom: auto; }
.buddy-panel { padding-right: 110px; }

/* ══════════ Shop & Zimmer ══════════ */
.shop-wallet { display: flex; gap: 10px; }
.shop-wallet .cur { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(150deg, #fff7e6, var(--surface)); border: 1px solid #f0e2c4; border-radius: 14px; box-shadow: var(--shadow); padding: 8px 14px; font-weight: 800; }
.shop-wallet .cur img { width: 24px; height: 24px; image-rendering: pixelated; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.shop-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 14px; text-align: center; transition: .15s; }
.shop-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.shop-card.owned { background: var(--lilac-lt); border-color: var(--mint-dk); }
.shop-thumb { height: 92px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.shop-thumb img { max-width: 100%; max-height: 92px; image-rendering: pixelated; }
.shop-name { font-weight: 700; font-size: .9rem; }
.shop-price { font-size: .82rem; color: var(--ink-soft); margin: 4px 0 10px; font-weight: 700; }
.buy-btn { width: 100%; }
.buy-btn:disabled { opacity: 1; background: var(--mint-dk); }

.room-stage { position: relative; width: 100%; height: 340px; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--wall, #efe4cb); border: 1px solid var(--line-strong); touch-action: none; }
.room-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: var(--floor, #cdb488); box-shadow: inset 0 3px 6px rgba(0,0,0,.08); }
.theme-swatch { display: block; width: 60px; height: 60px; border-radius: 10px; border: 1px solid var(--line-strong); }
.shop-thumb svg { image-rendering: pixelated; }
/* Erfolgs-Fortschrittsbalken */
.ach-bar { height: 7px; background: var(--bg-alt); border-radius: 6px; overflow: hidden; margin: 8px 4px 0; }
.ach-bar i { display: block; height: 100%; background: var(--lilac); border-radius: 6px; }
.ach-prog { font-size: .7rem; color: var(--ink-soft); margin-top: 4px; }
.room-cat { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); width: 78px; height: 78px; z-index: 5; pointer-events: none; }
.room-cat svg, .room-cat img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.room-item { position: absolute; width: 92px; height: auto; image-rendering: pixelated; cursor: grab; user-select: none; transform: translate(-50%, -50%); transition: filter .12s; z-index: 3; }
.room-item:hover { filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.room-item.dragging { cursor: grabbing; filter: drop-shadow(0 8px 12px rgba(0,0,0,.35)); z-index: 9; }
.room-stage.readonly .room-item { cursor: default; pointer-events: none; }
.room-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--ink-soft); font-size: .9rem; padding: 20px; }

/* ══════════ Lern-Modi (Schreiben / Quiz) ══════════ */
.flashcard.locked { cursor: default; }
.write-box { display: flex; gap: 10px; width: 100%; max-width: 640px; }
.write-box .input { flex: 1; }
.quiz-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; width: 100%; max-width: 640px; }
.quiz-opt { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; font-size: .94rem; font-weight: 600; box-shadow: var(--shadow); transition: .14s; }
.quiz-opt:hover:not(:disabled) { border-color: var(--lilac); background: var(--lilac-lt); transform: translateY(-1px); }
.quiz-opt .qkey { width: 22px; height: 22px; flex-shrink: 0; border-radius: 7px; background: var(--bg-alt); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; }
.quiz-opt.correct { border-color: var(--mint-dk); background: #eff9f2; }
.quiz-opt.correct .qkey { background: var(--mint-dk); color: #fff; }
.quiz-opt.wrong { border-color: var(--rose-dk); background: #ffe6ec; }
.quiz-opt:disabled { cursor: default; }
.answer-fb { width: 100%; max-width: 640px; text-align: center; font-weight: 700; padding: 11px; border-radius: var(--radius-sm); }
.answer-fb.ok { background: #eff9f2; color: var(--mint-dk); }
.answer-fb.no { background: #ffe6ec; color: var(--rose-dk); }

/* ═══════════ Design-Umschalter ═══════════ */
.design-toggle { position: fixed; top: 14px; right: 16px; z-index: 120; display:flex; align-items:center; gap:6px;
  background: var(--surface); border:1px solid var(--line-strong); border-radius: 20px; padding:8px 14px;
  font-weight:700; font-size:.82rem; color: var(--ink-soft); box-shadow: var(--shadow); cursor:pointer; }
.design-toggle:hover { background: var(--lilac-lt); color: var(--lilac-dk); }

/* ═══════════ VERSION 2 (Redesign) ═══════════ */
body.design-v2 {
  --bg:#fbf7ed; --surface:#fffdf8; --ink:#4a3525; --ink-soft:#795c3e; --line:#e5d6b7; --line-strong:#ccb98f;
  --lilac:#739642; --lilac-dk:#526f2f; --lilac-lt:#edf3dd; --mint:#dce9bd; --mint-dk:#526f2f;
  --rose:#d87870; --rose-dk:#c0645c; --butter:#dfb551; --peach:#df954b;
  --shadow:0 8px 28px rgba(89,66,41,.07); --shadow-lg:0 12px 34px rgba(89,66,41,.11);
  background-image:
    radial-gradient(circle at 88% 85%, rgba(192,216,159,.22), transparent 34%),
    linear-gradient(135deg,#fffaf1 0%,#fbf7ed 60%,#f5f7e9 100%);
}
body.design-v2 .card-panel { background-image:none; }
body.design-v2 .tab.active { background: var(--lilac-lt); border-radius:12px 12px 0 0; }
body.design-v2 .buddy-box, body.design-v2 .streak-box, body.design-v2 .currency-bar .cur { border-radius:18px; }

.v2-head { margin-bottom:18px; }
.v2-title { font-size:30px; font-weight:800; color:var(--ink); }
.v2-sub { font-size:14px; color:var(--ink-soft); margin-top:4px; }
.v2-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(320px,.85fr); gap:20px; align-items:start; }
.v2-main, .v2-side { display:flex; flex-direction:column; gap:20px; min-width:0; }
.v2-card { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:22px 24px; box-shadow:var(--shadow); }
.v2-cardtitle { font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px; }
.v2-cardtop { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.v2-cardtop .v2-cardtitle { margin:0; }
.v2-pct { font-size:26px; font-weight:800; color:var(--lilac-dk); }
.v2-click { text-align:left; width:100%; cursor:pointer; transition:.16s; display:block; }
.v2-click:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }

.v2-exam-inner { display:grid; grid-template-columns:1fr 220px; align-items:center; gap:12px; }
.v2-exam-illu { width:100%; max-width:240px; justify-self:end; image-rendering:auto; }
.v2-empty-title { font-weight:800; font-size:1.05rem; color:var(--ink); margin-bottom:6px; }
.v2-empty-text { font-size:.9rem; color:var(--ink-soft); line-height:1.5; margin-bottom:14px; }
.v2-greenbtn { background:var(--lilac); color:#fff; border-radius:12px; padding:12px 20px; font-weight:700; font-size:.9rem; box-shadow:0 5px 14px rgba(83,113,48,.2); transition:.15s; cursor:pointer; }
.v2-greenbtn:hover { background:var(--lilac-dk); transform:translateY(-1px); }

.v2-bar { height:16px; background:var(--lilac-lt); border-radius:20px; overflow:hidden; margin:6px 0 10px; }
.v2-bar-fill { height:100%; width:0; background:linear-gradient(90deg,var(--lilac),#a9c97e); border-radius:20px; transition:width .6s cubic-bezier(.4,0,.2,1); }
.v2-barnote { font-size:.85rem; color:var(--ink-soft); }
.v2-progstats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:16px; max-width:calc(100% - 110px); }
.v2-stat b { display:block; font-size:1.5rem; font-weight:800; color:var(--ink); }
.v2-stat span { font-size:.74rem; color:var(--ink-soft); }
.v2-sleepcat { position:absolute; right:26px; bottom:18px; width:92px; image-rendering:pixelated; pointer-events:none; }

.v2-status { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.v2-scard { border:1px solid var(--line); border-radius:18px; padding:16px 18px; box-shadow:var(--shadow); background:var(--surface); }
.v2-sdot { width:12px; height:12px; border-radius:50%; display:inline-block; }
.v2-snum { font-size:1.7rem; font-weight:800; margin:8px 0 2px; }
.v2-sname { font-weight:700; font-size:.92rem; }
.v2-sdesc { font-size:.76rem; color:var(--ink-soft); margin-top:2px; }
.v2-sbar { height:6px; border-radius:6px; background:var(--lilac-lt); margin-top:10px; overflow:hidden; }
.v2-sbar i { display:block; height:100%; border-radius:6px; }
.v2-scard.red { background:#fff9f7; border-color:rgba(216,120,112,.35); }
.v2-scard.yellow { background:#fffdf3; border-color:rgba(223,181,81,.35); }
.v2-scard.green { background:#f7fbef; border-color:rgba(115,150,66,.35); }

.v2-start-grid { display:grid; grid-template-columns:1fr 200px; gap:20px; align-items:center; }
.v2-optrow { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.v2-optlabel { width:74px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
.v2-seg { display:inline-flex; gap:6px; flex-wrap:wrap; }
.v2-segbtn { background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); border-radius:10px; padding:8px 13px; font-size:.82rem; font-weight:600; transition:.14s; cursor:pointer; }
.v2-segbtn:hover { border-color:var(--lilac); }
.v2-segbtn.active { background:var(--lilac); color:#fff; border-color:var(--lilac); box-shadow:0 5px 14px rgba(83,113,48,.2); }
.v2-start-cta { text-align:center; }
.v2-startcat { width:96px; image-rendering:pixelated; display:block; margin:0 auto 10px; }
.v2-startbtn { width:100%; background:var(--lilac); color:#fff; border-radius:14px; padding:14px; font-weight:800; font-size:1rem; box-shadow:0 6px 16px rgba(83,113,48,.25); transition:.15s; cursor:pointer; }
.v2-startbtn:hover { background:var(--lilac-dk); transform:translateY(-1px); }
.v2-scopenote { font-size:.76rem; color:var(--ink-soft); margin-top:8px; }

.v2-daily-inner { display:flex; align-items:center; gap:16px; }
.v2-ring { width:96px; height:96px; flex-shrink:0; }
.v2-daily-frac { font-size:1.6rem; font-weight:800; color:var(--ink); }
.v2-daily-lbl { font-size:.8rem; color:var(--ink-soft); }
.v2-speech { display:flex; align-items:center; gap:10px; margin-top:14px; background:var(--lilac-lt); border-radius:14px; padding:10px 12px; }
.v2-speechcat { width:44px; image-rendering:pixelated; flex-shrink:0; }
.v2-speech span { font-size:.82rem; color:var(--lilac-dk); font-weight:600; line-height:1.4; }

.v2-streak-num { font-size:.9rem; color:var(--ink-soft); margin-bottom:18px; }
.v2-streak-num b { font-size:1.4rem; color:var(--ink); }
.v2-milestones { display:flex; align-items:flex-start; justify-content:space-between; position:relative; }
.v2-milestones:before { content:''; position:absolute; left:14px; right:14px; top:9px; height:2px; background:var(--line); z-index:0; }
.v2-ms { display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; z-index:1; }
.v2-msdot { width:20px; height:20px; border-radius:50%; background:var(--surface); border:2px solid var(--line-strong); }
.v2-ms.done .v2-msdot { background:var(--lilac); border-color:var(--lilac-dk); }
.v2-mslbl { font-size:.68rem; color:var(--ink-soft); font-weight:600; }

.v2-cardline { display:flex; align-items:center; gap:12px; }
.v2-cardline > img { width:30px; height:30px; }
.v2-cardbig { font-weight:800; font-size:1rem; color:var(--ink); }
.v2-cardsmall { font-size:.8rem; color:var(--ink-soft); margin-top:2px; }
.v2-arrow { margin-left:auto; color:var(--lilac-dk); font-size:1.2rem; transition:transform .15s; }
.v2-click:hover .v2-arrow { transform:translateX(3px); }

.v2-motiv { display:flex; align-items:center; gap:18px; margin-top:20px; background:var(--lilac-lt); border:1px solid var(--mint); border-radius:20px; padding:14px 22px; }
.v2-motiv-plant { width:56px; image-rendering:pixelated; }
.v2-motiv-shelf { width:80px; image-rendering:pixelated; margin-left:auto; }
.v2-motiv-txt b { display:block; font-size:1.02rem; color:var(--lilac-dk); }
.v2-motiv-txt span { font-size:.86rem; color:var(--ink-soft); }

@media (max-width:1100px){
  .v2-grid { grid-template-columns:1fr; }
  .v2-status { grid-template-columns:1fr; }
  .v2-exam-inner, .v2-start-grid { grid-template-columns:1fr; }
  .v2-exam-illu { justify-self:center; max-width:200px; }
  .v2-progstats { max-width:100%; grid-template-columns:repeat(2,1fr); }
}

/* ── v2 Feinschliff: volle Breite · „Lernen starten" oben · größere Katzen ── */
body.design-v2 .main { max-width: none; padding-left: 34px; padding-right: 34px; }
.v2-start { order: -1; }                 /* Lernen starten zuerst (oben, direkt anklickbar) */
.v2-start .v2-startbtn { font-size: 1.05rem; padding: 16px; }

/* größere Katzen-Widgets */
.v2-sleepcat { width: 140px; }
.v2-progstats { max-width: calc(100% - 160px); }
.v2-startcat { width: 150px; }
.v2-speechcat { width: 60px; }
.v2-duetoday .v2-cardline > img { width: 46px; height: 46px; }

/* ── v2: Klausurplan kompakter (nicht so hoch) ── */
.v2-exam { padding: 16px 22px; }
.v2-exam .v2-cardtitle { margin-bottom: 8px; }
.v2-exam .v2-exam-inner { grid-template-columns: 1fr 120px; gap: 10px; }
.v2-exam .v2-exam-illu { max-width: 118px; }
.v2-exam .v2-empty-title { font-size: 1rem; margin-bottom: 3px; }
.v2-exam .v2-empty-text { font-size: .84rem; line-height: 1.45; margin-bottom: 10px; }
.v2-exam .v2-greenbtn { padding: 9px 16px; font-size: .85rem; }
@media (max-width:1100px){ .v2-exam .v2-exam-illu { max-width: 96px; } }

/* ── v2: großes Studien-Kätzchen rechts vom Tagesziel ── */
.v2-daily-row { display:flex; align-items:center; gap:14px; }
.v2-daily-left { flex:1; min-width:0; }
.v2-daily-cat { width:132px; flex-shrink:0; align-self:center; image-rendering:pixelated; }

/* ── v2: Illustrationen in Lernen starten / Klausurplan / Fortschritt größer ── */
.v2-startcat { width:192px; }
.v2-sleepcat { width:178px; }
.v2-progstats { max-width:calc(100% - 200px); }
.v2-exam .v2-exam-inner { grid-template-columns:1fr 148px; }
.v2-exam .v2-exam-illu { max-width:148px; }

@media (max-width:1100px){
  .v2-startcat { width:150px; }
  .v2-sleepcat { width:132px; }
  .v2-progstats { max-width:100%; }
  .v2-exam .v2-exam-illu { max-width:120px; }
  .v2-daily-cat { width:120px; }
}

/* ── v2: alle Deko-Widgets ca. doppelt so groß ── */
.v2-start-grid { grid-template-columns: 1fr 320px; }
.v2-startcat { width: 300px; }
.v2-sleepcat { width: 290px; }
.v2-progstats { max-width: calc(100% - 320px); }
.v2-exam .v2-exam-inner { grid-template-columns: 1fr 240px; }
.v2-exam .v2-exam-illu { max-width: 240px; }
.v2-daily-cat { width: 220px; }
.v2-speechcat { width: 96px; }
.v2-ring { width: 150px; height: 150px; }
.v2-daily-frac { font-size: 2rem; }
.v2-msdot { width: 30px; height: 30px; }
.v2-milestones:before { top: 14px; }
.v2-nextexam .v2-cardline > img { width: 54px; height: 54px; }
.v2-duetoday .v2-cardline > img { width: 74px; height: 74px; }

@media (max-width:1100px){
  .v2-start-grid { grid-template-columns: 1fr; }
  .v2-startcat { width: 210px; }
  .v2-sleepcat { width: 180px; }
  .v2-progstats { max-width: 100%; }
  .v2-exam .v2-exam-illu { max-width: 170px; }
  .v2-daily-cat { width: 170px; }
}

/* ── v2: Lernen starten & Klausurplan wieder auf vorherige (kleinere) Größe ── */
.v2-start-grid { grid-template-columns: 1fr 210px; }
.v2-startcat { width: 190px; }
.v2-exam .v2-exam-inner { grid-template-columns: 1fr 150px; }
.v2-exam .v2-exam-illu { max-width: 148px; }
@media (max-width:1100px){
  .v2-start-grid { grid-template-columns: 1fr; }
  .v2-startcat { width: 150px; }
  .v2-exam .v2-exam-illu { max-width: 120px; }
}

/* ── v2: Klausurplan & Lernen starten – große Illustration, aber KOMPAKTE Box ──
   (Illustration als Ecken-Deko wie die schlafende Katze → bläht die Box nicht auf) */
.v2-exam { position: relative; overflow: hidden; padding: 16px 20px; }
.v2-exam .v2-exam-inner { display: block; }
.v2-exam .v2-exam-body { max-width: calc(100% - 185px); }
.v2-exam .v2-exam-illu { position: absolute; right: 12px; bottom: 2px; width: 180px; max-width: 180px; margin: 0; }

.v2-start { position: relative; overflow: hidden; padding: 18px 22px; }
.v2-start-grid { grid-template-columns: 1fr 200px; align-items: start; }
.v2-startcat { position: absolute; right: 14px; bottom: 2px; width: 214px; margin: 0; z-index: 0; pointer-events: none; }
.v2-start-cta { position: relative; z-index: 1; text-align: center; }

@media (max-width:1100px){
  .v2-start-grid { grid-template-columns: 1fr; }
  .v2-startcat { position: static; width: 180px; margin: 10px auto 0; display: block; }
  .v2-exam .v2-exam-illu { position: static; width: 150px; margin: 10px auto 0; display: block; }
  .v2-exam .v2-exam-body { max-width: 100%; }
}

/* v2: schlafende Katze weiter nach unten rechts */
.v2-sleepcat { right: 2px; bottom: -8px; }
.v2-sleepcat { right: -14px; bottom: -16px; }

/* ── v2 Korrektur ── */
/* Lernen-starten-Katze zurück an Originalplatz (im Flow, über dem Button) */
.v2-startcat { position: static; width: 190px; margin: 0 auto 10px; z-index: auto; pointer-events: auto; }
.v2-start-grid { align-items: center; }
/* schlafende Katze weiter nach unten & etwas nach links */
.v2-sleepcat { right: 26px; bottom: -24px; }

/* ═══════════ Coming Soon ═══════════ */
.soon-hero { display:grid; grid-template-columns: 1fr 340px; gap:24px; align-items:center;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding:26px 30px; margin-bottom:22px; }
.soon-title { font-size:1.9rem; font-weight:800; color:var(--ink); }
.soon-lead { font-size:1rem; color:var(--ink-soft); margin-top:8px; font-weight:600; }
.soon-desc { font-size:.92rem; color:var(--ink-soft); margin-top:10px; line-height:1.55; max-width:52ch; }
.soon-hero-widget { position:relative; text-align:center; background: var(--lilac-lt);
  border:2px dashed var(--line-strong); border-radius: var(--radius-sm); padding:20px 18px; }
.soon-hero-cat { width:120px; image-rendering:pixelated; }
.soon-pill { display:inline-block; margin-top:6px; background: var(--lilac); color:#fff; font-weight:800;
  letter-spacing:.06em; font-size:.9rem; padding:9px 22px; border-radius:20px; box-shadow:0 5px 14px rgba(83,113,48,.25); }
.soon-pill-sub { font-size:.8rem; color:var(--lilac-dk); font-weight:600; margin-top:8px; }
.soon-spark { position:absolute; font-size:1rem; opacity:.9; }
.soon-spark.s1 { top:10px; left:14px; } .soon-spark.s2 { top:14px; right:16px; } .soon-spark.s3 { bottom:12px; right:22px; }

.soon-section-title { font-size:1.05rem; font-weight:800; color:var(--ink); margin:6px 2px 14px; }
.soon-grid { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; max-width:1080px; margin:0 auto 22px; }
.soon-card { flex:0 1 320px; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding:16px 18px; transition:.16s; }
.soon-card:hover { transform:translateY(-3px); box-shadow: var(--shadow-lg); }
.soon-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.soon-card-ico { font-size:1.5rem; }
.soon-badge { font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--lilac-dk); background:var(--lilac-lt); border:1px solid var(--mint); padding:4px 10px; border-radius:20px; }
.soon-thumb { background: var(--lilac-lt); border:1px solid var(--line); border-radius: var(--radius-sm);
  height:130px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.soon-thumb img { width:110px; image-rendering:pixelated; }
.soon-card-title { font-size:1.05rem; font-weight:800; color:var(--ink); margin:12px 0 4px; }
.soon-card-desc { font-size:.85rem; color:var(--ink-soft); line-height:1.5; flex:1; }
.soon-notify { margin-top:14px; width:100%; font-weight:700; font-size:.86rem; padding:10px 14px; border-radius:14px;
  border:1.5px solid var(--line-strong); color:var(--ink-soft); background:var(--surface); transition:.15s; cursor:pointer; }
.soon-notify:hover { border-color:var(--lilac); background:var(--lilac-lt); color:var(--lilac-dk); }
.soon-notify.on { background:var(--lilac); border-color:var(--lilac); color:#fff; box-shadow:0 5px 14px rgba(83,113,48,.22); }

.soon-feedback { display:flex; align-items:center; gap:18px; background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding:18px 24px; margin-bottom:16px; }
.soon-fb-plant { width:56px; image-rendering:pixelated; flex-shrink:0; }
.soon-fb-text { flex:1; }
.soon-fb-text h3 { font-size:1.05rem; }
.soon-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background: var(--lilac-lt); border:1px solid var(--mint); border-radius: var(--radius); padding:16px 24px; }
.soon-footer-text b { color:var(--lilac-dk); } .soon-footer-text span { color:var(--ink-soft); font-size:.9rem; }
.soon-social { display:flex; gap:10px; font-size:1.3rem; }

@media (max-width:900px){
  .soon-hero { grid-template-columns:1fr; }
  .soon-feedback { flex-direction:column; text-align:center; }
}

/* ── Coming Soon: echte Mockup-Bilder ── */
.soon-hero-widget { background:none; border:none; padding:0; }
.soon-hero-img { width:100%; max-width:360px; border-radius:18px; display:block; margin:0 auto; box-shadow:var(--shadow); image-rendering:auto; }
.soon-grid { max-width:1120px; }
.soon-card { flex:0 1 340px; padding:0; overflow:hidden; }
.soon-cover { line-height:0; }
.soon-cover img { width:100%; display:block; image-rendering:auto; }
.soon-card-body { padding:16px 18px; display:flex; flex-direction:column; flex:1; }
.soon-card-body .soon-card-desc { flex:1; }

/* Coming-Soon-Schild groß, halbe Hero-Box, ohne eigenen Rahmen */
.soon-hero { grid-template-columns: 1fr 1fr; align-items: center; }
/* Coming-Soon-Schild groß, halbe Hero-Box, ohne eigenen Rahmen */
.soon-hero { grid-template-columns: 1fr 1fr; align-items: center; }
.soon-hero-img { width: 100%; max-width: none; border-radius: 0; box-shadow: none; }

/* Coming-Soon-Hero: kompakte Box, Widget groß aber gedeckelt (kein Aufblähen auf breiten Screens) */
.soon-hero { padding: 16px 30px; align-items: center; }
.soon-hero-img { width: 100%; max-width: 440px; margin: 0 auto; border-radius: 0; box-shadow: none; }

/* Coming-Soon-Hero: Widget entkoppelt von der Box-Höhe (Widget schwebt, Box bleibt kompakt) */
.soon-hero { display: block; position: relative; overflow: visible; padding: 20px 30px; min-height: 190px; margin: 40px 0 80px; }
.soon-hero-text { max-width: calc(100% - 500px); }
.soon-hero-widget { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 460px; margin: 0; }
.soon-hero-img { width: 100%; max-width: none; border-radius: 0; box-shadow: none; }
@media (max-width: 900px){
  .soon-hero { min-height: 0; margin: 0 0 22px; padding: 22px; }
  .soon-hero-text { max-width: 100%; }
  .soon-hero-widget { position: static; transform: none; width: 100%; max-width: 340px; margin: 14px auto 0; }
}

/* Coming-Soon-Widget auf 600 px, hängt sauber unter der kompakten Box */
.soon-hero-widget { width: 600px; top: -20px; transform: none; right: 24px; }
.soon-hero { min-height: 170px; margin: 28px 0 250px; }
.soon-hero-text { max-width: calc(100% - 640px); }
@media (max-width: 1000px){
  .soon-hero-widget { position: static; transform: none; width: 100%; max-width: 360px; margin: 14px auto 0; top: auto; }
  .soon-hero { min-height: 0; margin: 0 0 22px; }
  .soon-hero-text { max-width: 100%; }
}

/* ═══════════ Community & Freunde ═══════════ */
.soc-need { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding:22px 26px; color: var(--ink-soft); font-weight:600; line-height:1.6; }

.com-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.com-tab { display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.9rem; color:var(--ink-soft);
  background:var(--surface); border:1.5px solid var(--line); border-radius:16px; padding:9px 16px; cursor:pointer; transition:.15s; }
.com-tab .tab-ico { width:18px; height:18px; image-rendering:pixelated; }
.com-tab:hover { border-color:var(--lilac); color:var(--lilac-dk); }
.com-tab.active { background:var(--lilac); border-color:var(--lilac); color:#fff; box-shadow:0 5px 14px rgba(83,113,48,.22); }

.com-toolbar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.com-toolbar .mini-input { flex:1; min-width:180px; max-width:340px; }
.select.mini { padding:8px 12px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); font:inherit; color:var(--ink); }

.com-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.com-loading { color:var(--ink-soft); padding:24px; }
.deck-card { display:flex; flex-direction:column; gap:8px; background:var(--surface); border:1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding:16px 18px; transition:.16s; }
.deck-card:hover { transform:translateY(-3px); box-shadow: var(--shadow-lg); }
.deck-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.deck-card-title { font-size:1.05rem; font-weight:800; color:var(--ink); line-height:1.25; }
.deck-card-subj { flex-shrink:0; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  color:var(--lilac-dk); background:var(--lilac-lt); border:1px solid var(--mint); padding:3px 9px; border-radius:20px; }
.deck-card-desc { font-size:.86rem; color:var(--ink-soft); line-height:1.5; }
.deck-card-meta { display:flex; flex-wrap:wrap; gap:12px; font-size:.8rem; color:var(--ink-soft); font-weight:600; margin-top:2px; }
.deck-vis { color:var(--lilac-dk); font-weight:800; }
.deck-card-actions { display:flex; align-items:center; gap:10px; margin-top:6px; }
.deck-card-actions .btn-primary { flex:1; }
.dc-likes { font-weight:800; color:var(--rose, #d98a9a); }
.dc-like { display:inline-flex; align-items:center; gap:5px; font-weight:800; font-size:.9rem; cursor:pointer;
  border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink-soft); border-radius:14px; padding:8px 14px; transition:.15s; }
.dc-like:hover { border-color:#e08a9a; color:#d0687a; }
.dc-like.on { background:#fbe4ea; border-color:#e59aaa; color:#c85a72; }

.fr-list { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.fr-row { display:flex; align-items:center; gap:12px; background:var(--lilac-lt); border:1px solid var(--line);
  border-radius:14px; padding:9px 14px; }
.fr-av { width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--lilac); color:#fff; font-weight:800; border-radius:50%; }
.fr-name { flex:1; font-weight:700; color:var(--ink); }
.fr-btns { display:flex; align-items:center; gap:8px; }
.fr-pending { font-size:.82rem; color:var(--ink-soft); font-weight:600; font-style:italic; }
.fr-badge { display:inline-block; min-width:20px; text-align:center; font-size:.78rem; font-weight:800; color:#fff;
  background:var(--lilac); border-radius:20px; padding:1px 8px; margin-left:4px; }
.fr-sub { font-size:.82rem; font-weight:700; color:var(--ink-soft); margin:16px 0 0; }

/* ─── Freunde: schmale Spalte links + großes Widget rechts ─── */
.fr-layout { display:grid; grid-template-columns: minmax(0, 440px) 1fr; gap:28px; align-items:start; }
.fr-col { display:flex; flex-direction:column; gap:16px; min-width:0; }
.fr-col .opt-row { display:flex; gap:10px; align-items:center; flex-wrap:nowrap; }
.fr-col .mini-input { flex:1 1 auto; width:auto; min-width:0; }
.fr-col .opt-row .btn-primary { flex:0 0 auto; }
.fr-hero { position:sticky; top:16px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:10px; }
.fr-hero-img { width:100%; max-width:560px; image-rendering:auto; filter: drop-shadow(0 18px 30px rgba(91,63,38,.18)); }
.fr-hero-cap { margin-top:10px; font-weight:800; font-size:1.1rem; color:var(--lilac-dk); text-align:center; }
@media (max-width:1000px){
  .fr-layout { grid-template-columns: 1fr; }
  .fr-hero { order:-1; position:static; } .fr-hero-img { max-width:360px; }
}

/* ─── Kebab-Menü (⋮) an Kursen ─── */
.tree-kebab { margin-left:auto; background:none; border:none; cursor:pointer; color:var(--ink-soft);
  font-size:1.05rem; line-height:1; padding:2px 6px; border-radius:8px; }
.tree-kebab:hover { background:var(--lilac-lt); color:var(--lilac-dk); }
.pop-menu { position:fixed; z-index:120; background:var(--surface); border:1px solid var(--line-strong);
  border-radius:12px; box-shadow: var(--shadow-lg); padding:6px; min-width:190px; }
.pop-menu button { display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:none; border:none;
  font:inherit; font-size:.9rem; font-weight:600; color:var(--ink); padding:9px 12px; border-radius:8px; cursor:pointer; }
.pop-menu button:hover { background:var(--lilac-lt); color:var(--lilac-dk); }
.pop-menu button.danger { color:#c0645c; }
.pop-menu button.danger:hover { background:#fbe4e4; }
.pop-menu .pop-sep { height:1px; background:var(--line); margin:5px 4px; }

/* ─── veröffentlichte Decks im Profil ─── */
.prof-deck-list { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:12px; margin-top:6px; }
.prof-deck { background:var(--lilac-lt); border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.prof-deck b { color:var(--ink); font-size:.98rem; }
.prof-deck .pd-meta { font-size:.8rem; color:var(--ink-soft); font-weight:600; margin-top:5px; display:flex; gap:12px; flex-wrap:wrap; }

.course-head { display:flex; align-items:center; gap:1px; }
.course-head .course-row { flex:1; min-width:0; }
.course-head .tree-kebab { flex-shrink:0; }

/* ═══════════════════════════════════════════════════════════
   Lernansicht – visuelle Überarbeitung (cozy Pixel-Art)
   Logik unverändert; nur Layout, Größen, Farben, Rahmen, Deko.
   ═══════════════════════════════════════════════════════════ */
#view-study {
  position: relative;
  min-height: calc(100vh - 46px);
  background: url(assets/study_bg.jpg) center top / cover no-repeat fixed;
  padding: 8px clamp(12px, 4vw, 48px) 40px;
  border-radius: 18px;
}
/* Kopfzeile: Beenden links, Fortschritt rechts */
.study-head { align-items: center; margin-bottom: clamp(20px, 4vh, 36px); }
#btn-quit {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 13px; border: none; background: transparent;
  color: #5b4a38; font-weight: 700; font-size: .9rem; cursor: pointer; transition: .15s;
}
#btn-quit:hover { background: rgba(120, 90, 55, .12); }
.study-progress { gap: 9px; }
#study-counter { font-size: .82rem; font-weight: 800; color: #6a5540; }
.mini-bar { width: clamp(120px, 22vw, 210px); height: 10px; background: #efe6d0;
  border: 1px solid #e2d4b6; border-radius: 20px; box-shadow: inset 0 1px 2px rgba(120,90,55,.08); }
.mini-bar-fill { background: linear-gradient(90deg, #9cc46a, #7ba545); border-radius: 20px; }

/* Bühne + große, mittige Karte */
.stage { gap: 16px; padding-top: clamp(4px, 2vh, 18px); }
.flashcard {
  width: min(860px, 100%); max-width: 860px; height: auto; aspect-ratio: 900 / 538;
  position: relative; perspective: 1800px; margin: 0 auto;
}
/* PNG-Rahmen liegt auf JEDER Kartenseite → dreht sich beim Umblättern mit */
.face::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: url(assets/card_frame.png) center / 100% 100% no-repeat;
}
.flip-inner { transition: transform .6s cubic-bezier(.4,.15,.2,1); }
.face {
  border: 1px solid #efe6d3; border-radius: 20px; gap: 14px;
  padding: clamp(46px, 8%, 70px) clamp(38px, 8%, 68px) clamp(50px, 9%, 70px);
  background: var(--card-bg, #fffdf7);
  box-shadow: 0 18px 45px rgba(94,70,42,.12), 0 4px 12px rgba(94,70,42,.06);
  transition: box-shadow .35s ease;
}
.face.back { background: #fffdf7; }
.flip-inner.flipped .face.front { box-shadow: 0 10px 30px rgba(94,70,42,.10); }
/* Frage/Antwort groß & prominent */
.face-text { font-size: clamp(1.45rem, 1rem + 1.6vw, 2.15rem); font-weight: 700;
  color: #4a3525; line-height: 1.4; max-width: 74%; }
.face-img { max-height: 46%; }
/* Kopfzeile der Karte – Setname & Status weiter zur Kartenmitte gerückt */
.face-top { top: clamp(23px, 5.2%, 35px); left: clamp(42px, 9%, 76px); right: clamp(42px, 9%, 76px); }
.face-deck { font-size: .68rem; color: #9a866c; letter-spacing: .06em; }
.face-status { font-size: .72rem; color: #a3765f; }
.face-status .pill { width: 9px; height: 9px; }
.face-flags { top: clamp(47px, 10%, 62px); right: clamp(42px, 9%, 76px); }
/* „FRAGE / ANTWORT" als zarter Zierstreifen im unteren Rahmenspalt */
.face-side {
  bottom: clamp(16px, 4.4%, 28px); font-size: .6rem; letter-spacing: .18em;
  color: #b08a5a; opacity: .85; font-weight: 800;
}
.face-side::before { content: '— ✦ '; color: #cfa96f; }
.face-side::after  { content: ' ✦ —'; color: #cfa96f; }

/* Werkzeugbuttons: gleich groß, cremig, weicher Schatten */
.card-tools { gap: 10px; margin-top: 2px; }
.tool-btn {
  width: 46px; height: 46px; border-radius: 14px; font-size: 1.05rem;
  background: #fffdf7; border: 1.5px solid #e7d9bd; color: #6a5540;
  box-shadow: 0 4px 10px rgba(94,70,42,.08); transition: .15s;
}
.tool-btn:hover { border-color: #cbe09f; background: #f4f8e4; transform: translateY(-2px); }
.tool-btn.on { background: #ffe9a8; border-color: #eccf76; }

/* Hinweistext dezent */
.hint { font-size: .8rem; color: #8a755d; margin-top: 4px; opacity: .9; }

/* Bewertungsbuttons mit Pixel-Icons */
.answer-row { gap: 12px; margin-top: 4px; }
.rate {
  min-width: 122px; flex: 1 1 122px; max-width: 172px;
  padding: 12px 14px 11px; border-radius: 18px; gap: 5px;
  border: 1.5px solid transparent; box-shadow: 0 5px 14px rgba(94,70,42,.10);
}
.rate-ico { width: 40px; height: 40px; image-rendering: pixelated; margin-bottom: 1px; }
.rate span { font-weight: 800; font-size: .86rem; }
.rate small { font-size: .6rem; opacity: .6; }
.rate:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(94,70,42,.16); }
.rate-again { background: #fbe6e3; color: #b5524a; border-color: #f2cfc9; }
.rate-hard  { background: #fdf0d5; color: #9a7526; border-color: #f0dfb0; }
.rate-good  { background: #e7f2df; color: #4f8a52; border-color: #cbe4c1; }
.rate-easy  { background: #e3eef8; color: #4a7ba8; border-color: #c6dbee; }

/* kleine Deko-Katze, unten rechts im freien Bereich – nur wenn Platz ist */
.study-cat {
  position: absolute; right: 16px; bottom: 14px; width: 78px; height: auto;
  image-rendering: pixelated; opacity: .92; pointer-events: none; z-index: 1;
  filter: drop-shadow(0 6px 10px rgba(94,70,42,.14));
}
@media (max-width: 1040px) { .study-cat { display: none; } }

/* Zusammenfassung: auf dem cozy Hintergrund gut lesbar */
#view-study .summary { background: rgba(255,253,247,.9); backdrop-filter: blur(4px);
  border-radius: 22px; padding: 30px 26px; box-shadow: var(--shadow-lg); }

@media (max-width: 720px) {
  .flashcard { max-width: 100%; }
  .face-text { max-width: 88%; }
  .answer-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .rate { max-width: none; min-width: 0; }
  .study-cat { display: none; }
  #view-study { background-attachment: scroll; }
}

/* ─── Freunde-Anfrage-Punkt am Reiter ─── */
.tab { position: relative; }
.tab-dot { display: inline-block; width: 9px; height: 9px; margin-left: 5px; vertical-align: middle;
  background: #e0685f; border-radius: 50%; box-shadow: 0 0 0 3px rgba(224,104,95,.22); animation: dotPulse 1.6s ease-in-out infinite; }
@keyframes dotPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }

/* ─── Sterne-Bewertung auf Deck-Karten ─── */
.deck-stars { font-size: .85rem; margin: 2px 0; display: flex; align-items: center; gap: 6px; }
.deck-stars .stars-on { color: #eab54c; letter-spacing: 1px; }
.deck-stars.muted .stars-on, .deck-stars.muted { color: #c8b59a; }
.deck-stars b { color: var(--ink); }
.deck-stars .stars-n { color: var(--ink-soft); font-size: .78rem; font-weight: 600; }

/* ─── Deck-Detail-Modal (Vorschau, Bewerten, Melden) ─── */
.dd-summary { font-size: .84rem; color: var(--ink-soft); font-weight: 600; margin: 10px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dd-h { font-size: .82rem; font-weight: 800; color: var(--ink); margin: 16px 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.dd-cards { display: flex; flex-direction: column; gap: 8px; }
.dd-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.dd-q { padding: 9px 12px; background: var(--lilac-lt); font-weight: 700; color: var(--ink); font-size: .92rem; }
.dd-a { padding: 9px 12px; color: var(--ink-soft); font-size: .9rem; }
.dd-stars { display: flex; gap: 4px; margin-bottom: 8px; }
.dd-star { font-size: 1.7rem; line-height: 1; background: none; border: none; cursor: pointer; color: #d9c9a8; transition: .12s; padding: 0 2px; }
.dd-star:hover, .dd-star.on { color: #eab54c; transform: scale(1.1); }
.dd-reviews { display: flex; flex-direction: column; gap: 8px; }
.dd-review { background: var(--lilac-lt); border-radius: 10px; padding: 8px 12px; font-size: .86rem; }
.dd-review .stars-on { color: #eab54c; }
.dd-rev-c { color: var(--ink-soft); margin-top: 3px; }

/* ═══════════ Feinschliff-Overrides (gewinnen per Reihenfolge) ═══════════ */

/* Bewertungsbuttons: Zahlen alle auf gleicher Höhe (Label-Bereich fixe Höhe) */
.rate { justify-content: flex-start; }
.rate span { min-height: 2.5em; display: flex; align-items: center; justify-content: center; text-align: center; }
.rate small { margin-top: auto; }

/* Tagesziel: Studien-Katze nach oben rechts → grüner Text nutzt volle Breite */
.v2-daily { position: relative; }
.v2-daily-row { display: block; }
.v2-daily-left { width: 100%; }
.v2-daily-inner { padding-right: 96px; }
.v2-daily-cat { position: absolute; top: 30px; right: 12px; width: 90px; height: auto; align-self: auto; margin: 0; }

/* Heute fällig: Katze breiter & proportional (nicht mehr quadratisch verzerrt) */
.v2-duetoday .v2-cardline > img { width: 96px; height: auto; }

/* Fortschritt: schlafende Katze etwas weiter nach unten rechts (kein Überlappen) */
.v2-sleepcat { right: 6px; bottom: -30px; }

/* Deck-Detail: alle Karten in gleich großer Box mit Scrollbar */
.dd-cards { max-height: 246px; overflow-y: auto; padding-right: 6px; scrollbar-gutter: stable; }

/* Community „Meine Decks": breitere Kästen, Buttons dürfen umbrechen */
.deck-card-actions { flex-wrap: wrap; }
.com-grid.mine { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }

/* ═══════════ Katzenzimmer: neuer Hintergrund + Leer-Popup ═══════════ */
.room-stage.room-bg { background: url(assets/room_bg.jpg) center bottom / cover no-repeat; }
.room-stage.room-bg .room-floor { display: none; }
.room-empty-pop { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
  width: min(400px, 82%); text-align: center; background: rgba(255,253,247,.92); backdrop-filter: blur(3px);
  border: 2px dashed var(--line-strong); border-radius: 20px; padding: 20px 24px 22px; box-shadow: 0 12px 30px rgba(94,70,42,.16); z-index: 6; }
.rep-spark { color: var(--lilac); font-size: 1.1rem; margin-bottom: 4px; }
.rep-title { font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.rep-text { font-size: .86rem; color: var(--ink-soft); line-height: 1.5; margin: 8px 0 14px; }
.rep-btn { font-size: .9rem; }

/* ═══════════ Bestenliste ═══════════ */
.lb-tabs { display: flex; gap: 6px; }
.lb-tab { font-weight: 700; font-size: .8rem; color: var(--ink-soft); background: var(--surface);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 6px 12px; cursor: pointer; transition: .14s; }
.lb-tab:hover { border-color: var(--lilac); color: var(--lilac-dk); }
.lb-tab.active { background: var(--lilac); border-color: var(--lilac); color: #fff; }
.lb-cat { width: 46px; height: 46px; flex-shrink: 0; }
.lb-cat.big { width: 68px; height: 68px; }
.lb-cat svg { width: 100%; height: 100%; image-rendering: pixelated; }
.leaderboard { margin-top: 14px; }
.lb-podium { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; align-items: end; margin-bottom: 14px; }
.lb-pod { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px; padding: 12px 8px 14px; cursor: pointer; transition: .15s; }
.lb-pod:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.lb-pod-1 { background: linear-gradient(180deg,#fff6df,#fdeec4); border-color: #eccf76; padding-top: 18px; }
.lb-pod-2 { background: linear-gradient(180deg,#f4f5f7,#e7eaee); border-color: #cfd6de; }
.lb-pod-3 { background: linear-gradient(180deg,#fbeede,#f4dcc2); border-color: #e3bd94; }
.lb-pod.me { outline: 2px solid var(--lilac); }
.lb-pod-medal { font-size: 1.3rem; }
.lb-pod-name { font-weight: 800; font-size: .9rem; color: var(--ink); text-align: center; line-height: 1.2; }
.lb-pod-val { font-size: .8rem; color: var(--ink-soft); font-weight: 700; }
.lb-list { display: flex; flex-direction: column; gap: 6px; }
.lb-row { display: flex; align-items: center; gap: 12px; background: var(--lilac-lt); border: 1px solid var(--line);
  border-radius: 14px; padding: 7px 14px; cursor: pointer; transition: .14s; width: 100%; text-align: left; }
.lb-row:hover { border-color: var(--lilac); }
.lb-row.me { background: #eef4dd; border-color: var(--lilac); }
.lb-rank { font-weight: 800; color: var(--ink-soft); min-width: 24px; }
.lb-name { flex: 1; font-weight: 700; color: var(--ink); }
.lb-name small { display: block; font-weight: 600; font-size: .74rem; color: var(--ink-soft); }
.lb-val { font-weight: 800; color: var(--lilac-dk); }
.lb-myrank { margin-top: 12px; text-align: center; font-size: .86rem; color: var(--ink-soft); }

/* ═══════════ Öffentliches Profil-Popup ═══════════ */
.pp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pp-name { font-weight: 800; font-size: 1.2rem; color: var(--ink); }
.pp-friend { font-size: .74rem; color: var(--lilac-dk); background: var(--lilac-lt); border-radius: 10px; padding: 2px 8px; vertical-align: middle; }
.pp-meta { font-size: .84rem; color: var(--ink-soft); margin-top: 2px; }
.pp-bio { font-size: .86rem; color: var(--ink-soft); margin-top: 4px; font-style: italic; }
.pp-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 6px; }
.pp-stat { background: var(--lilac-lt); border-radius: 12px; padding: 10px; text-align: center; }
.pp-stat b { display: block; font-size: 1.2rem; color: var(--ink); }
.pp-stat span { font-size: .72rem; color: var(--ink-soft); }
.pp-decks { display: flex; flex-direction: column; gap: 8px; }
.pp-deck { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; }
.pp-deck-meta { font-size: .78rem; color: var(--ink-soft); margin-top: 3px; }

/* ═══════════ Fächer-Filter-Chips ═══════════ */
.subject-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.subject-chip { font-size: .8rem; font-weight: 700; color: var(--ink-soft); background: var(--surface);
  border: 1.5px solid var(--line); border-radius: 20px; padding: 5px 13px; cursor: pointer; transition: .14s; }
.subject-chip:hover { border-color: var(--lilac); color: var(--lilac-dk); }
.subject-chip.active { background: var(--lilac); border-color: var(--lilac); color: #fff; }

/* ═══════════ Communitys ═══════════ */
.comm-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.comm-row { display: flex; align-items: center; gap: 10px; background: var(--lilac-lt); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; }
.comm-open { flex: 1; display: flex; align-items: center; gap: 11px; background: none; border: none; cursor: pointer; text-align: left; min-width: 0; }
.comm-ico { font-size: 1.4rem; flex-shrink: 0; }
.comm-name { font-weight: 700; color: var(--ink); min-width: 0; }
.comm-name small { display: block; font-weight: 600; font-size: .74rem; color: var(--ink-soft); }
.comm-open:hover .comm-name { color: var(--lilac-dk); }

/* ═══════════ Öffentliches Profil: klickbare Freunde ═══════════ */
.fr-open { display: flex; align-items: center; gap: 12px; flex: 1; background: none; border: none; cursor: pointer; text-align: left; min-width: 0; padding: 0; }
.fr-open:hover .fr-name { color: var(--lilac-dk); text-decoration: underline; }

/* ═══════════ Lern-Duelle ═══════════ */
#fr-duels { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.duel { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--surface); }
.duel.active { border-color: var(--mint); background: #f4f8ea; }
.duel.won { border-color: #eccf76; background: #fff8e6; }
.duel.lost { border-color: #e2c2c2; background: #fbeeee; }
.duel.tie { border-color: var(--line-strong); }
.duel-head { font-weight: 700; color: var(--ink); }
.duel-sub { font-size: .8rem; color: var(--ink-soft); margin-top: 3px; }
.duel-score { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; }
.ds-me, .ds-opp { font-weight: 800; font-size: 1.05rem; }
.ds-me { color: var(--lilac-dk); }
.ds-opp { color: var(--rose-dk, #c0645c); }
.duel-bar { flex: 1; height: 12px; background: #f0dede; border-radius: 20px; overflow: hidden; }
.duel-bar i { display: block; height: 100%; background: linear-gradient(90deg,#9cc46a,#7ba545); border-radius: 20px; transition: width .4s; }

/* Bilder in Deck-Vorschau */
.dd-img { display: block; max-width: 100%; max-height: 120px; object-fit: contain; border-radius: 8px; margin-bottom: 4px; }

/* ══════════ Rich-Text auf Karten: Formeln, Code, fett/kursiv ══════════ */
.face-text .katex { font-size: 1.05em; }
.cc-code { display: block; text-align: left; background: rgba(91,63,38,.08); border: 1px solid rgba(91,63,38,.16);
  border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-family: 'Nunito Sans', ui-monospace, Menlo, Consolas, monospace;
  font-size: .82em; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.cc-ic { background: rgba(91,63,38,.10); border-radius: 6px; padding: 1px 6px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88em; }

/* Lückentext */
.cloze-gap { display: inline-block; min-width: 3.2em; text-align: center; color: var(--rose-dk, #c0645c);
  background: rgba(224,133,126,.14); border-bottom: 2px solid var(--rose, #e0857e); border-radius: 6px 6px 0 0; padding: 0 6px; font-weight: 800; }
.cloze-a { color: var(--lilac-dk, #526f2f); background: rgba(179,202,133,.30); border-radius: 6px; padding: 0 6px; font-weight: 800; }

/* Tags auf der Lernkarte */
.face-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.face-tag { font-size: .68rem; font-weight: 800; color: var(--lilac-dk, #526f2f); background: rgba(179,202,133,.28);
  border: 1px solid rgba(115,150,66,.35); border-radius: 20px; padding: 2px 9px; }

/* Vorlesen-Knopf */
.tts-btn { position: absolute; top: 10px; right: 12px; z-index: 4; width: 34px; height: 34px; border: none;
  border-radius: 50%; background: rgba(255,255,255,.72); box-shadow: 0 2px 6px rgba(91,63,38,.18); cursor: pointer;
  font-size: 15px; line-height: 34px; padding: 0; transition: transform .12s, background .12s; }
.tts-btn:hover { transform: scale(1.12); background: #fff; }

/* Formatierungs-Hinweis + Cloze-Toggle im Karten-Editor */
.fmt-hint { font-size: .74rem; color: var(--ink-soft, #795c3e); margin: -2px 0 10px; line-height: 1.5; }
.fmt-hint code, .cloze-toggle code { background: rgba(91,63,38,.10); border-radius: 5px; padding: 1px 5px; font-family: ui-monospace, monospace; }
.cloze-toggle { margin: 4px 0 6px; }

/* ══════════ Tag-Filter-Chips (Karten verwalten) ══════════ */
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.tchip { font-size: .74rem; font-weight: 800; color: var(--lilac-dk, #526f2f); background: var(--lilac-lt, #edf3dd);
  border: 1px solid rgba(115,150,66,.35); border-radius: 20px; padding: 4px 11px; cursor: pointer; transition: transform .1s; }
.tchip small { opacity: .6; font-weight: 700; }
.tchip:hover { transform: translateY(-1px); }
.tchip.active { background: var(--lilac, #739642); color: #fff; border-color: var(--lilac-dk, #526f2f); }
.tchip.clear { color: var(--rose-dk, #c0645c); background: #fbe9e7; border-color: rgba(192,100,92,.35); }

/* ══════════════════════════════════════════════════════
   DUNKLES DESIGN (Umschalter in Einstellungen)
   Überschreibt die Design-Variablen; helle Lernkarte bleibt hell
   (wirkt wie eine beleuchtete Karte auf dunklem Tisch).
   ══════════════════════════════════════════════════════ */
body.design-v2.dark {
  --bg:#1b1522; --surface:#251d30; --ink:#ece6f2; --ink-soft:#b9aecb; --line:#3a2f47; --line-strong:#4d4059;
  --lilac:#9bd06a; --lilac-dk:#b6e089; --lilac-lt:#2c3324; --mint:#33402a; --mint-dk:#b6e089;
  --rose:#e58c85; --rose-dk:#f0a49d; --butter:#e6c05e; --peach:#e6a35a;
  --shadow:0 8px 28px rgba(0,0,0,.45); --shadow-lg:0 14px 38px rgba(0,0,0,.55);
  background-image:
    radial-gradient(circle at 88% 85%, rgba(120,150,80,.14), transparent 36%),
    linear-gradient(135deg,#221a2c 0%,#1b1522 60%,#191420 100%);
  color: var(--ink);
}
body.dark .card-panel, body.dark .v2-card, body.dark .modal-card, body.dark .modal-box,
body.dark .mini-card, body.dark .lb-row, body.dark .comm-row, body.dark .fr-card,
body.dark .dd-card, body.dark .pp-card, body.dark .deck-card, body.dark .prof-deck {
  background: var(--surface); border-color: var(--line); color: var(--ink);
}
body.dark .input, body.dark .select, body.dark .textarea, body.dark .mini-input, body.dark .search {
  background:#1f1829; border-color: var(--line-strong); color: var(--ink);
}
body.dark .input::placeholder, body.dark .textarea::placeholder, body.dark .search::placeholder { color:#7d7190; }
body.dark .chip, body.dark .v2-segbtn { background:#241d30; color: var(--ink-soft); border-color: var(--line); }
body.dark .chip.active, body.dark .v2-segbtn.active { background: var(--lilac); color:#14210a; }
body.dark .page-sub, body.dark .v2-sub, body.dark small { color: var(--ink-soft); }
body.dark .cc-code, body.dark .cc-ic { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
body.dark .tts-btn { background: rgba(40,32,52,.85); }
body.dark .tts-btn:hover { background:#312742; }
body.dark .topbar, body.dark .sidebar, body.dark .nav { background: var(--surface); border-color: var(--line); }
body.dark .modal-backdrop, body.dark .modal { background: rgba(0,0,0,.55); }

/* ══════════ Onboarding-Tour ══════════ */
.tour-ov { position: fixed; inset: 0; z-index: 4000; background: rgba(30,20,40,.55); }
.tour-spot { position: absolute; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(30,20,40,.55);
  border: 3px solid #b6e089; transition: all .28s cubic-bezier(.4,1.2,.5,1); pointer-events: none; }
.tour-pop { position: absolute; width: 320px; max-width: calc(100vw - 24px); background: var(--surface,#fffdf8);
  border: 1px solid var(--line,#e5d6b7); border-radius: 18px; padding: 18px 20px 16px; box-shadow: 0 16px 44px rgba(0,0,0,.32); }
.tour-step { font-size: .72rem; font-weight: 800; color: var(--lilac-dk,#526f2f); letter-spacing: .5px; }
.tour-title { margin: 4px 0 6px; font-size: 1.12rem; color: var(--ink,#4a3525); }
.tour-text { margin: 0 0 14px; font-size: .92rem; line-height: 1.55; color: var(--ink-soft,#795c3e); }
.tour-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tour-skip { background: none; border: none; color: var(--ink-soft,#795c3e); font-weight: 700; cursor: pointer; font-size: .84rem; }
.tour-next { cursor: pointer; }

/* ══════════ Aktivitäts-Feed ══════════ */
.feed-item { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line, #e5d6b7); }
.feed-item:last-child { border-bottom: none; }
.feed-av .lb-cat, .feed-cat { width: 40px; height: 40px; flex: 0 0 40px; }
.feed-av { width: 40px; height: 40px; }
.feed-main { flex: 1; min-width: 0; }
.feed-text { font-size: .95rem; color: var(--ink, #4a3525); line-height: 1.4; }
.feed-meta { font-size: .74rem; color: var(--ink-soft, #795c3e); margin-top: 2px; }
.feed-react { border: 1px solid var(--line-strong, #ccb98f); background: var(--surface, #fffdf8); border-radius: 20px;
  padding: 5px 11px; cursor: pointer; font-size: .82rem; color: var(--ink-soft, #795c3e); font-weight: 700; white-space: nowrap; }
.feed-react.on { background: #fbe3e1; border-color: var(--rose, #e0857e); color: var(--rose-dk, #c0645c); }

/* ══════════ Gemeinsame Decks ══════════ */
.collab-card { border: 1px solid var(--line, #e5d6b7); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; background: var(--surface, #fffdf8); }
.collab-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.collab-owner { font-size: .68rem; font-weight: 800; color: #fff; background: var(--lilac, #739642); border-radius: 20px; padding: 2px 8px; }
.collab-meta { font-size: .78rem; color: var(--ink-soft, #795c3e); }
.collab-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ══════════ Einladungscode ══════════ */
.invite-code-row { display: flex; align-items: center; gap: 10px; }
.invite-code { font-family: 'Press Start 2P', monospace; font-size: 1.05rem; letter-spacing: 2px; color: var(--lilac-dk, #526f2f);
  background: var(--lilac-lt, #edf3dd); border: 2px dashed var(--lilac, #739642); border-radius: 12px; padding: 8px 16px; }

/* ══════════ Zurücknehmen: Animation + Overlay ══════════ */
@keyframes rewindSpin {
  0%   { transform: rotate(0) scale(1); }
  35%  { transform: rotate(-9deg) scale(.94); }
  70%  { transform: rotate(4deg) scale(1.01); }
  100% { transform: rotate(0) scale(1); }
}
.flashcard.rewind { animation: rewindSpin .6s cubic-bezier(.36,1.3,.4,1) both; }
#undo-flash {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.7);
  z-index: 3500; pointer-events: none; opacity: 0;
  font-family: 'Press Start 2P', monospace; font-size: clamp(15px, 3.4vw, 26px);
  color: #fff; background: rgba(91,63,38,.92); padding: 16px 26px; border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.32); letter-spacing: 1px; white-space: nowrap;
}
body.dark #undo-flash { background: rgba(60,48,74,.94); }
#undo-flash.show { animation: undoFlashPop 1.2s ease both; }
@keyframes undoFlashPop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.6) rotate(-6deg); }
  18%  { opacity: 1; transform: translate(-50%,-50%) scale(1.06) rotate(0); }
  30%  { transform: translate(-50%,-50%) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(.96); }
}

/* Nacht-Hintergrund für die Lernansicht im dunklen Design */
body.dark #view-study {
  background-image: url(assets/study_bg_night.jpg);
}
body.dark #view-study .summary { background: rgba(37,29,48,.88); color: var(--ink); }

/* ══════════ Lückentext-Editor: Lücken-Felder ══════════ */
.cloze-box { background: rgba(179,202,133,.12); border: 1px solid rgba(115,150,66,.3); border-radius: 12px; padding: 12px 14px; }
.cloze-box > label small { font-weight: 600; color: var(--ink-soft, #795c3e); }
.gap-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.gap-row .gap-inp { flex: 1; }
.gap-del { flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--line-strong, #ccb98f); background: var(--surface, #fffdf8);
  border-radius: 9px; cursor: pointer; color: var(--rose-dk, #c0645c); font-weight: 800; }
.gap-del:hover { background: #fbe9e7; }

/* ══════════════════════════════════════════════════════
   WISSENSABENTEUER (Idle-Modus)
   ══════════════════════════════════════════════════════ */
.adv-arena {
  position: relative; border-radius: 20px; overflow: hidden;
  background-size: cover; background-position: center;
  padding: 14px; margin-bottom: 16px;
  box-shadow: var(--shadow-lg, 0 12px 34px rgba(89,66,41,.11));
  border: 2px solid rgba(255,255,255,.25);
}
.adv-arena::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,10,30,.05), rgba(20,10,30,.35)); pointer-events: none; }
.adv-arena.exam { box-shadow: 0 0 0 3px rgba(224,133,126,.6), var(--shadow-lg, 0 12px 34px rgba(0,0,0,.3)); }
.adv-top { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.adv-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.86);
  border-radius: 20px; padding: 5px 11px; font-size: .8rem; font-weight: 800; color: #4a3525; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.adv-chip img { width: 15px; height: 15px; }
.adv-stage { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; min-height: 230px; padding: 18px 10px 8px; }
.adv-hero { flex: 0 0 auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); animation: advHeroBob 2.6s ease-in-out infinite; }
.adv-hero svg { width: clamp(96px, 20vw, 140px); height: clamp(96px, 20vw, 140px); image-rendering: pixelated; }
@keyframes advHeroBob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
.adv-enemy { flex: 0 0 auto; text-align: center; max-width: 46%; }
.adv-enemy-img { width: clamp(120px, 30vw, 210px); height: auto; image-rendering: pixelated;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.4)); animation: advEnemyBob 2.1s ease-in-out infinite; }
@keyframes advEnemyBob { 0%,100% { transform: translateY(0) rotate(-1deg) } 50% { transform: translateY(-12px) rotate(1deg) } }
.adv-enemy.boss .adv-enemy-img { width: clamp(150px, 36vw, 260px); filter: drop-shadow(0 0 16px rgba(224,133,126,.8)) drop-shadow(0 8px 12px rgba(0,0,0,.4)); }
.adv-enemy-name { font-size: .82rem; font-weight: 800; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.7); margin-bottom: 5px; }
.adv-hpbar { position: relative; height: 16px; border-radius: 20px; background: rgba(0,0,0,.45); overflow: hidden; margin-bottom: 6px; border: 1px solid rgba(255,255,255,.35); }
.adv-hpbar i { display: block; height: 100%; background: linear-gradient(90deg, #e0857e, #ffd67e); transition: width .35s cubic-bezier(.4,1,.5,1); }
.adv-hpbar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .64rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.adv-foot { position: relative; z-index: 2; text-align: center; font-size: .74rem; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.75); padding: 4px; }

.adv-actions { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.adv-fight { flex: 1; min-width: 200px; font-size: 1rem; }
.adv-chest-btn { flex: 0 0 auto; border: 2px solid var(--line-strong, #ccb98f); background: var(--surface, #fffdf8); border-radius: 14px;
  padding: 0 18px; font-weight: 800; cursor: pointer; color: var(--ink, #4a3525); }
.adv-chest-btn.has { border-color: var(--butter, #dfb551); background: #fff6df; animation: chestPulse 1.4s ease-in-out infinite; }
@keyframes chestPulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 rgba(223,181,81,0) } 50% { transform: scale(1.04); box-shadow: 0 0 16px rgba(223,181,81,.6) } }

.adv-upgrades { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adv-up { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--lilac-lt, #edf3dd);
  border: 1px solid rgba(115,150,66,.3); border-radius: 14px; padding: 10px 12px; cursor: pointer; transition: transform .1s; }
.adv-up:hover { transform: translateY(-2px); }
.adv-up.poor { opacity: .6; }
.adv-up-ic { font-size: 1.4rem; flex: 0 0 auto; }
.adv-up-main { flex: 1; min-width: 0; font-size: .86rem; color: var(--ink, #4a3525); line-height: 1.3; }
.adv-up-main small { color: var(--lilac-dk, #526f2f); font-weight: 800; }
.adv-up-desc { display: block; font-size: .72rem; color: var(--ink-soft, #795c3e); margin-top: 2px; }
.adv-up-cost { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--peach, #df954b); font-size: .84rem; }
.adv-up-cost img { width: 15px; height: 15px; }

.adv-gear { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.adv-gear-item { display: flex; flex-direction: column; align-items: center; width: 92px; text-align: center; }
.adv-gear-item img { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 3px 5px rgba(0,0,0,.25)); }
.adv-gear-lvl { font-size: .72rem; font-weight: 800; color: var(--lilac-dk, #526f2f); }
.adv-gear-bon { font-size: .66rem; color: var(--ink-soft, #795c3e); }
.adv-hint { margin-top: 12px; }

/* Schwebende Schadenszahl beim Lernen */
.dmg-float { position: absolute; top: 30%; z-index: 20; pointer-events: none; font-family: 'Press Start 2P', monospace;
  font-size: 15px; color: #ffd67e; text-shadow: 0 2px 4px rgba(0,0,0,.6); animation: dmgFloat .95s ease-out forwards; }
.dmg-float.crit { font-size: 21px; color: #ff9fb0; }
@keyframes dmgFloat { 0% { opacity: 0; transform: translateY(10px) scale(.6) } 20% { opacity: 1; transform: translateY(-6px) scale(1.1) } 100% { opacity: 0; transform: translateY(-60px) scale(1) } }

/* ── Lootbox / Truhe ── */
.chest-ov { position: fixed; inset: 0; z-index: 4200; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at center, rgba(40,25,10,.75), rgba(10,6,16,.92)); }
.chest-stage { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 20px; }
.chest-img { width: min(340px, 74vw); height: auto; image-rendering: pixelated; animation: chestShake .3s ease-in-out; filter: drop-shadow(0 0 40px rgba(255,210,120,.5)); }
@keyframes chestShake { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-3deg) } 75% { transform: rotate(3deg) } }
.chest-close { margin-top: 4px; }
.loot-reward { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 30px; border-radius: 20px;
  background: rgba(255,255,255,.06); animation: lootPop .5s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes lootPop { 0% { opacity: 0; transform: scale(.5) } 100% { opacity: 1; transform: scale(1) } }
.loot-frame { width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; border-radius: 18px;
  font-size: 66px; background: rgba(255,255,255,.08); border: 3px solid #bbb; box-shadow: 0 0 26px rgba(255,255,255,.15); }
.loot-frame img { width: 118px; height: 118px; object-fit: contain; image-rendering: pixelated; }
.loot-frame.plain { border-color: transparent; box-shadow: none; background: none; }
.loot-frame.plain img { width: 130px; height: 130px; }
.loot-rar { font-family: 'Press Start 2P', monospace; font-size: 12px; letter-spacing: 1px; }
.loot-name { color: #fff; font-size: 1.15rem; }
.loot-desc { color: #ffe9b8; font-size: .9rem; }
.r-common .loot-frame { border-color: #b9b9c4; box-shadow: 0 0 22px rgba(185,185,196,.4); }
.r-common .loot-rar { color: #cfcfd8; }
.r-rare .loot-frame { border-color: #6bb0f0; box-shadow: 0 0 30px rgba(107,176,240,.7); }
.r-rare .loot-rar { color: #9fd0ff; }
.r-epic .loot-frame { border-color: #c58cf0; box-shadow: 0 0 34px rgba(197,140,240,.8); }
.r-epic .loot-rar { color: #e0b6ff; }
.r-legend .loot-frame { border-color: #ffd257; box-shadow: 0 0 44px rgba(255,210,87,.95); animation: legendGlow 1.1s ease-in-out infinite; }
.r-legend .loot-rar { color: #ffe08a; }
@keyframes legendGlow { 0%,100% { box-shadow: 0 0 30px rgba(255,210,87,.7) } 50% { box-shadow: 0 0 55px rgba(255,210,87,1) } }

/* ── Intro-Comic & Offline-Popup ── */
.adv-intro-ov { position: fixed; inset: 0; z-index: 4300; display: flex; align-items: center; justify-content: center;
  background: rgba(20,12,28,.8); padding: 16px; }
.adv-intro-card { background: var(--surface, #fffdf8); border-radius: 22px; overflow: hidden; max-width: 620px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: lootPop .45s cubic-bezier(.3,1.3,.5,1) both; }
.adv-intro-card.small { max-width: 420px; text-align: center; }
.adv-intro-img { display: block; width: 100%; height: auto; }
.adv-offline-img { display: block; width: 130px; height: auto; margin: 20px auto 0; image-rendering: pixelated; }
.adv-intro-text { padding: 20px 24px 24px; }
.adv-intro-text h3 { margin: 0 0 8px; font-size: 1.25rem; color: var(--ink, #4a3525); }
.adv-intro-text p { margin: 0 0 14px; line-height: 1.6; color: var(--ink-soft, #795c3e); font-size: .95rem; }

@media (max-width: 620px) {
  .adv-upgrades { grid-template-columns: 1fr; }
  .adv-stage { min-height: 190px; }
}
body.dark .adv-chip { background: rgba(40,32,52,.9); color: #ece6f2; }
body.dark .adv-up { background: #241d30; border-color: #3a2f47; }
body.dark .adv-chest-btn { background: #251d30; color: #ece6f2; }

/* ══════════════════════════════════════════════════════
   WISSENSABENTEUER v2 — Idle-RPG-Look (Design-Tokens)
   ══════════════════════════════════════════════════════ */
:root {
  --game-bg: #17111f; --game-panel: #24192f; --game-panel-soft: #2d2039;
  --game-border: #4b345e; --game-border-gold: #9a6a35;
  --game-text: #fff8ed; --game-text-muted: #c9b8d7;
  --game-green: #8bc94e; --game-green-hover: #9ddd58;
  --game-gold: #f4b942; --game-purple: #a95ce8; --game-red: #e45b69; --game-orange: #e99a3c;
}

/* Aktiver Abenteuer-Reiter deutlicher */
.tab.tab-adv.active { background: #23331c; box-shadow: inset 0 -3px 0 var(--game-green), 0 0 14px rgba(139,201,78,.35); }
.tab.tab-adv.active .tab-ico { filter: brightness(1.2); }

#view-adventure {
  background: radial-gradient(circle at 22% -12%, #26193a, var(--game-bg) 62%);
  border-radius: 20px; padding: 20px clamp(14px, 3vw, 30px) 26px; color: var(--game-text);
}
.adv-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.adv-emblem { width: 52px; height: 52px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  font-size: 26px; background: linear-gradient(160deg, #3a2550, #2a1b3d); border: 2px solid var(--game-border-gold);
  border-radius: 14px; box-shadow: 0 0 18px rgba(169,92,232,.3); }
.adv-title { font-size: clamp(26px, 4vw, 38px); font-weight: 800; margin: 0; line-height: 1.05;
  background: linear-gradient(90deg, #d7b3ff, #a95ce8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.adv-sub { margin: 4px 0 0; color: var(--game-text-muted); font-size: .95rem; }
.adv-hl { color: var(--game-gold); }

/* Arena */
.adv-arena {
  position: relative; border-radius: 20px; overflow: hidden; padding: 14px;
  min-height: 300px; background-size: cover; background-position: center;
  border: 2px solid transparent; background-clip: padding-box;
  box-shadow: 0 0 0 2px var(--game-border-gold), 0 16px 40px rgba(0,0,0,.5); margin-bottom: 18px;
}
.adv-arena::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(23,17,31,.25), rgba(23,17,31,.55)); }
.adv-arena.exam { box-shadow: 0 0 0 3px var(--game-red), 0 16px 40px rgba(0,0,0,.55); }
.adv-top { position: relative; z-index: 2; display: flex; gap: 8px; flex-wrap: wrap; }
.adv-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(20,12,28,.72);
  border: 1px solid var(--game-border); border-radius: 20px; padding: 5px 12px; font-size: .8rem; font-weight: 800; color: var(--game-text); }
.adv-chip img { width: 15px; height: 15px; }
.adv-stage { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; min-height: 240px; padding: 20px 18px 10px; }

.adv-hero-wrap { position: relative; flex: 0 0 auto; }
.adv-hero-wrap::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 62%; height: 16px; background: radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%); }
.adv-hero-img { position: relative; height: clamp(150px, 26vw, 210px); width: auto; image-rendering: pixelated;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); animation: advHeroBob 2.6s ease-in-out infinite; }
@keyframes advHeroBob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
.adv-speech { position: absolute; top: -6px; left: 50%; transform: translateX(-40%); background: #fff8ed; color: #3a2a1c;
  font-size: .8rem; font-weight: 700; padding: 7px 12px; border-radius: 12px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.35); z-index: 3; }
.adv-speech::after { content: ''; position: absolute; bottom: -7px; left: 30%; border: 7px solid transparent; border-top-color: #fff8ed; border-bottom: 0; }

.adv-enemy { flex: 0 0 auto; text-align: center; max-width: 44%; }
.adv-enemy-name { font-size: 1rem; font-weight: 800; color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,.8); margin-bottom: 6px; }
.adv-hpbar { position: relative; height: 15px; border-radius: 20px; background: rgba(0,0,0,.5); overflow: hidden; border: 1px solid rgba(255,255,255,.3); }
.adv-hpbar i { display: block; height: 100%; background: linear-gradient(90deg, #e0455a, #ff8fb0); box-shadow: inset 0 2px 3px rgba(255,255,255,.4); transition: width .4s cubic-bezier(.4,1,.5,1); }
.adv-hp-text { font-size: .78rem; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); margin-top: 4px; }
.adv-enemy-img { width: clamp(150px, 32vw, 230px); height: auto; margin-top: 6px; image-rendering: pixelated;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.45)); animation: advEnemyBob 2.1s ease-in-out infinite; }
@keyframes advEnemyBob { 0%,100% { transform: translateY(0) rotate(-1deg) } 50% { transform: translateY(-12px) rotate(1deg) } }
.adv-enemy.boss .adv-enemy-img { width: clamp(180px, 38vw, 270px); filter: drop-shadow(0 0 16px rgba(228,91,105,.8)) drop-shadow(0 8px 12px rgba(0,0,0,.45)); }

.adv-statsbar { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  margin: 0 auto; max-width: 620px; background: rgba(20,12,28,.7); border: 1px solid var(--game-border);
  border-radius: 16px; padding: 9px 18px; }
.adv-statsbar span { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 800; color: var(--game-text); }
.adv-statsbar img { width: 15px; height: 15px; }

/* Aktionen */
.adv-actions { display: flex; gap: 12px; margin-bottom: 18px; }
.adv-fight { flex: 1; font-size: 1.08rem; font-weight: 800; color: #16330a; cursor: pointer; border: none;
  border-radius: 16px; padding: 15px; background: linear-gradient(180deg, var(--game-green-hover), var(--game-green) 60%, #6fae3a);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.15), 0 8px 20px rgba(110,174,58,.4);
  transition: transform .1s, box-shadow .1s, filter .1s; }
.adv-fight:hover { filter: brightness(1.06); transform: translateY(-2px); }
.adv-fight:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0,0,0,.25); }
.adv-fight:disabled { filter: grayscale(.7); box-shadow: none; cursor: not-allowed; }
.adv-chest-btn { flex: 0 0 auto; font-weight: 800; cursor: pointer; color: var(--game-text);
  background: linear-gradient(180deg, #322145, var(--game-panel)); border: 2px solid var(--game-border-gold);
  border-radius: 16px; padding: 0 20px; transition: transform .1s, box-shadow .1s; }
.adv-chest-btn.has { border-color: var(--game-gold); box-shadow: 0 0 16px rgba(244,185,66,.55); animation: chestPulse 1.4s ease-in-out infinite; }
@keyframes chestPulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.04) } }

/* Game-Panels */
.game-panel { background: var(--game-panel); border: 1px solid var(--game-border); border-radius: 18px; padding: 16px 18px; margin-bottom: 16px; }
.game-h { margin: 0 0 12px; font-size: 1.05rem; color: var(--game-text); }
.adv-upgrades { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.adv-up { display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  background: var(--game-panel-soft); border: 1px solid var(--game-border); border-radius: 14px; padding: 12px 14px; transition: transform .1s, border-color .1s; }
.adv-up.buyable:hover { transform: translateY(-2px); border-color: var(--game-gold); }
.adv-up.poor { opacity: .55; cursor: not-allowed; }
.adv-up-ic { font-size: 1.5rem; flex: 0 0 auto; }
.adv-up-main { flex: 1; min-width: 0; font-size: .9rem; color: var(--game-text); line-height: 1.3; }
.adv-up-main small { color: var(--game-purple); font-weight: 800; }
.adv-up-desc { display: block; font-size: .74rem; color: var(--game-text-muted); margin-top: 2px; }
.adv-up-cost { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: .9rem; color: var(--game-gold); }
.adv-up.poor .adv-up-cost { color: var(--game-red); }
.adv-up-cost img { width: 16px; height: 16px; }

.adv-gear { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.adv-gear-item { display: flex; flex-direction: column; align-items: center; width: 96px; text-align: center; }
.adv-gear-item img { width: 60px; height: 60px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.adv-gear-lvl { font-size: .74rem; font-weight: 800; color: var(--game-gold); }
.adv-gear-bon { font-size: .68rem; color: var(--game-text-muted); }
.adv-gear-empty { display: flex; align-items: center; gap: 14px; color: var(--game-text); }
.adv-gear-empty-img { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; opacity: .8; }
.adv-gear-empty .page-sub { color: var(--game-text-muted); }

.adv-tip { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(20,12,28,.6); border: 1px solid var(--game-border); border-radius: 14px; padding: 10px 16px; font-size: .84rem; color: var(--game-text-muted); }
.adv-tip-l b { color: var(--game-gold); }
.adv-tip-chest { font-size: 1.2rem; }

@media (max-width: 720px) { .adv-upgrades { grid-template-columns: 1fr; } }

/* ── Karten-Box auf der Übersicht ── */
.v2-cardmgr-sub { font-size: .82rem; color: var(--ink-soft, #795c3e); margin: 4px 0 12px; }
.v2-cardmgr-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.v2-cardmgr-btns .btn-primary, .v2-cardmgr-btns .btn-ghost { width: 100%; }
.v2-cardmgr-btns #dash-manage { grid-column: 1 / -1; }

/* ── Karten-Verwaltung als Popup ── */
.cardmgr-ov { position: fixed; inset: 0; z-index: 3600; background: rgba(20,12,28,.6); display: flex; align-items: flex-start; justify-content: center; padding: 3vh 16px; overflow: auto; }
.cardmgr-box { background: var(--surface, #fffdf8); border-radius: 18px; width: min(900px, 100%); max-height: 94vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.cardmgr-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line, #e5d6b7); position: sticky; top: 0; background: var(--surface, #fffdf8); border-radius: 18px 18px 0 0; }
.cardmgr-host { padding: 16px 18px 20px; overflow: auto; }
.cardmgr-host .page-head { margin-bottom: 12px; }

/* ── Sammlungen unten in der Statistik ── */
.stats-collections { margin-top: 22px; padding-top: 18px; border-top: 2px dashed var(--line, #e5d6b7); }
.coll-heading { margin: 0 0 4px; font-size: 1.15rem; }

body.dark #view-adventure { background: radial-gradient(circle at 22% -12%, #241833, #140f1c 62%); }

/* ══════════ Abenteuer folgt Hell/Dunkel-Modus ══════════ */
:root {
  --game-bg: #efe7f7; --game-panel: #fffdf8; --game-panel-soft: #f4ecfa;
  --game-border: #e2d3ee; --game-border-gold: #d9aa55;
  --game-text: #3a2a4a; --game-text-muted: #7a6a88;
  --game-green: #8bc94e; --game-green-hover: #9ddd58;
  --game-gold: #c9902f; --game-purple: #8a44c8; --game-red: #d8455a; --game-orange: #df9138;
}
body.dark {
  --game-bg: #17111f; --game-panel: #24192f; --game-panel-soft: #2d2039;
  --game-border: #4b345e; --game-border-gold: #9a6a35;
  --game-text: #fff8ed; --game-text-muted: #c9b8d7;
  --game-gold: #f4b942; --game-purple: #a95ce8; --game-red: #e45b69;
}
#view-adventure { background: radial-gradient(circle at 22% -12%, #f6eefc, var(--game-bg) 62%); }
body.dark #view-adventure { background: radial-gradient(circle at 22% -12%, #241833, #140f1c 62%); }
.adv-title { background: linear-gradient(90deg, var(--game-purple), #6d34a8); -webkit-background-clip: text; background-clip: text; }
body.dark .adv-title { background: linear-gradient(90deg, #d7b3ff, #a95ce8); -webkit-background-clip: text; background-clip: text; }
.adv-tip { background: var(--game-panel-soft); }
.adv-chest-btn { background: linear-gradient(180deg, var(--game-panel-soft), var(--game-panel)); }
.adv-emblem { background: linear-gradient(160deg, #efe0fb, #f6eefc); }
body.dark .adv-emblem { background: linear-gradient(160deg, #3a2550, #2a1b3d); }

/* Community-Unterreiter: kleine Gruppen-Labels */
.com-tabgroup { align-self: center; font-size: .68rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink-soft, #795c3e); opacity: .7; padding: 0 4px 0 10px; }
.com-tabgroup:first-child { padding-left: 0; }

/* ══════════════════════════════════════════════════════
   WISSENSDUELL — Kampfscreen im aktiven Lernen
   Folgt Hell/Dunkel-Modus über die --game-* Tokens.
   ══════════════════════════════════════════════════════ */
#battle-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; grid-area: head; }
.bh-left { display: flex; align-items: center; gap: 12px; }
.bh-emblem { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: var(--game-panel-soft); border: 2px solid var(--game-border-gold); border-radius: 12px; }
.bh-title { margin: 0; font-size: 1.7rem; font-weight: 800; color: var(--game-text); }
.bh-sub { margin: 2px 0 0; color: var(--game-text-muted); font-size: .88rem; }
.bh-exit { background: var(--game-panel-soft); color: var(--game-text); border: 1px solid var(--game-border); border-radius: 12px;
  padding: 9px 16px; font-weight: 700; cursor: pointer; }
.bh-exit:hover { filter: brightness(1.08); }

/* Kampf-Seiten-Layout (Desktop) */
#view-study.battle {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px;
  grid-template-areas: "head head" "hud hud" "stage side"; gap: 16px; align-items: start;
  padding: 4px clamp(8px, 2vw, 20px) 24px; border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(150, 90, 200, 0.12), transparent 45%),
    linear-gradient(180deg, #f3ecfa, #efe7f7);
}
body.dark #view-study.battle {
  background:
    radial-gradient(circle at 50% 0%, rgba(95, 49, 135, 0.22), transparent 42%),
    linear-gradient(180deg, #171020, #120d19);
}
#view-study.battle #battle-hud { grid-area: hud; }
#view-study.battle #stage { grid-area: stage; }
#view-study.battle #battle-sidebar { grid-area: side; }
#view-study.battle #summary { grid-column: 1 / -1; }
#view-study.battle .study-cat { display: none; }

/* Kampf-HUD */
.bhud { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  min-height: 240px; padding: 16px 22px; border-radius: 24px; overflow: hidden; background-size: cover; background-position: center;
  border: 1px solid var(--game-border-gold); box-shadow: 0 14px 35px rgba(0,0,0,.34); }
.bhud::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(15,8,22,.28), rgba(15,8,22,.55)); }
.bhud.exam { border-color: var(--game-red); box-shadow: 0 0 0 2px var(--game-red), 0 14px 35px rgba(0,0,0,.4); }
.bhud > * { position: relative; z-index: 2; }
.sprite-stage { width: 150px; height: 160px; display: grid; place-items: end center; }
.sprite-stage.enemy { width: 170px; height: 170px; }
.pixel-sprite { image-rendering: pixelated; image-rendering: crisp-edges; object-fit: contain; user-select: none; pointer-events: none; max-width: 100%; max-height: 100%; }
.bhud-hero { display: flex; align-items: flex-end; gap: 10px; }
.bhud-hero-img { filter: drop-shadow(0 6px 9px rgba(0,0,0,.45)); animation: advHeroBob 2.6s ease-in-out infinite; }
.bhud-hero-info { text-align: left; color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,.8); padding-bottom: 6px; }
.bhud-name { font-weight: 800; font-size: 1.1rem; }
.bhud-substat { font-size: .72rem; opacity: .85; margin-top: 2px; }
.bhud-know { font-weight: 800; color: #ffe08a; }
.bhud-hearts { font-size: .8rem; margin-top: 4px; letter-spacing: 1px; }
.bhud-lv { display: inline-block; margin-top: 5px; font-size: .72rem; font-weight: 800; background: rgba(120,80,180,.55); border: 1px solid rgba(255,255,255,.35); border-radius: 20px; padding: 2px 10px; }

.bhud-mid { display: flex; flex-direction: column; gap: 8px; }
.bhud-center { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; background: rgba(15,8,22,.62); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 10px 8px; }
.bhud-col { text-align: center; }
.bhud-col span { display: block; font-size: .6rem; font-weight: 800; letter-spacing: .5px; color: #cbb9d9; }
.bhud-col b { font-size: 1.5rem; font-family: 'Press Start 2P', monospace; }
.bhud-col .c-green { color: #9edc5a; } .bhud-col .c-gold { color: #ffcf5a; } .bhud-col .c-cream { color: #fff5e2; font-size: 1.15rem; }
.bhud-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; background: rgba(15,8,22,.5); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 7px 12px; }
.bhud-strip span { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; color: #efe6f6; }
.bhud-strip img { width: 14px; height: 14px; }
.bhud-strip b { color: #fff; }

.bhud-enemy { text-align: center; }
.bhud-ename { font-weight: 800; color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,.8); font-size: 1.05rem; margin-bottom: 6px; }
.enemy-health { height: 16px; border-radius: 999px; background: rgba(20,10,28,.85); border: 2px solid rgba(244,211,255,.75); overflow: hidden; }
.enemy-health__fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e85c78, #f38aa3); box-shadow: inset 0 2px 3px rgba(255,255,255,.4); transition: width 320ms ease; }
.bhud-ehp { font-size: .8rem; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); margin-top: 4px; }
.bhud-enemy-img { filter: drop-shadow(0 8px 12px rgba(0,0,0,.45)); animation: advEnemyBob 2.1s ease-in-out infinite; }
.bhud-enemy-img.boss { filter: drop-shadow(0 0 14px rgba(228,91,105,.8)) drop-shadow(0 8px 12px rgba(0,0,0,.45)); }

/* Angriffs-Animationen */
@keyframes heroAttack { 0% { transform: translateX(0) } 28% { transform: translateX(20px) scale(1.06) } 100% { transform: translateX(0) } }
.bhud-hero-img.attack { animation: heroAttack .42s ease; }
@keyframes enemyShake { 0%,100% { transform: translateX(0) } 20% { transform: translateX(-9px) } 50% { transform: translateX(7px) } 75% { transform: translateX(-4px) } }
.sprite-stage.enemy.hit .bhud-enemy-img { animation: enemyShake .35s ease; filter: brightness(2) drop-shadow(0 8px 12px rgba(0,0,0,.45)); }
.bhud-bolt { position: absolute; top: 44%; left: 26%; z-index: 3; font-size: 26px; color: #ffe08a; text-shadow: 0 0 10px #ffcf5a; pointer-events: none; animation: boltFly .43s ease-in forwards; }
.bhud-bolt.crit { font-size: 34px; color: #ff9fb0; text-shadow: 0 0 12px #ff6f8f; }
@keyframes boltFly { 0% { left: 26%; opacity: 0; transform: scale(.4) rotate(0) } 20% { opacity: 1 } 100% { left: 74%; opacity: 0; transform: scale(1.5) rotate(90deg) } }
.bhud-dmg { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 4; font-family: 'Press Start 2P', monospace; font-size: 16px; color: #ffd67e; text-shadow: 0 2px 4px rgba(0,0,0,.7); pointer-events: none; animation: dmgFloat .9s ease-out forwards; }
.bhud-dmg.crit { font-size: 22px; color: #ff9fb0; }
@keyframes enemyDie { 0% { opacity: 1; transform: scale(1) } 40% { opacity: 1; transform: scale(1.12) } 100% { opacity: 0; transform: scale(.6) rotate(12deg) } }
.bhud-enemy-img.defeated { animation: enemyDie .5s ease forwards; }

/* Bewertungsbuttons: Angriffs-Labels (nur im Kampf sichtbar) */
.rate-atk { display: none; }
#view-study.battle .rate { flex-direction: column; gap: 3px; padding: 12px 8px; }
#view-study.battle .rate .rate-atk { display: block; font-size: .68rem; font-weight: 800; opacity: .95; }
#view-study.battle .rate small { display: none; }
#view-study.battle .rate-again .rate-atk { color: var(--game-red); }
#view-study.battle .rate-hard .rate-atk { color: var(--game-orange); }
#view-study.battle .rate-good .rate-atk { color: var(--game-green); }
#view-study.battle .rate-easy .rate-atk { color: var(--game-purple); }
#view-study.battle .rate-easy { box-shadow: 0 0 12px rgba(169,92,232,.35); }
#view-study.battle .rate.picked { animation: ratePick .3s ease; }
@keyframes ratePick { 0% { transform: scale(1) } 50% { transform: scale(.94) } 100% { transform: scale(1) } }

/* Rechte Seitenleiste */
#battle-sidebar { display: flex; flex-direction: column; gap: 14px; }
.bside-card { background: var(--game-panel); border: 1px solid var(--game-border); border-radius: 16px; padding: 14px 16px; color: var(--game-text); }
.bside-h { font-weight: 800; font-size: .95rem; margin-bottom: 8px; }
.bside-sub { font-size: .8rem; color: var(--game-text-muted); }
.bside-atkrow { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.bside-atkval { font-family: 'Press Start 2P', monospace; font-size: 1.25rem; color: var(--game-purple); }
body.dark .bside-atkval { color: #c79bff; }
.bside-sword { width: 46px; height: 46px; object-fit: contain; image-rendering: pixelated; }
.bside-rew span { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.bside-rew img { width: 16px; height: 16px; }
.bside-note { font-size: .72rem; color: var(--game-text-muted); margin-top: 4px; }
.bside-meter { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .78rem; }
.bside-meter:last-child { margin-bottom: 0; }
.bside-bar { height: 12px; border-radius: 20px; background: rgba(0,0,0,.15); overflow: hidden; }
body.dark .bside-bar { background: rgba(0,0,0,.4); }
.bside-bar i { display: block; height: 100%; border-radius: 20px; transition: width .3s; }
.bside-bar.green i { background: linear-gradient(90deg, #8bc94e, #b6e874); }
.bside-bar.purple i { background: linear-gradient(90deg, #a95ce8, #c79bff); }
.bside-info { font-size: .82rem; color: var(--game-text-muted); line-height: 1.5; margin: 0; }

@media (max-width: 1150px) {
  #view-study.battle { grid-template-columns: 1fr; grid-template-areas: "head" "hud" "stage" "side"; }
  .bhud { grid-template-columns: 1fr; text-align: center; }
  .bhud-hero { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .bhud-hero-img, .bhud-enemy-img, .bhud-hero-img.attack, .sprite-stage.enemy.hit .bhud-enemy-img { animation: none; }
  .bhud-bolt { display: none; }
}

/* ══════════ Wissensduell / Abenteuer – Feinschliff-Runde ══════════ */
/* Heller Modus: sehr helles Hellgrün statt Lila (passend zur Website) */
#view-study.battle {
  background:
    radial-gradient(circle at 50% 0%, rgba(139,201,78,.14), transparent 45%),
    linear-gradient(180deg, #f2f9e9, #e9f4db);
}
#view-adventure {
  background: radial-gradient(circle at 22% -12%, #f1f9e4, #eaf5dc 62%);
}
body.dark #view-study.battle {
  background:
    radial-gradient(circle at 50% 0%, rgba(95,49,135,.22), transparent 42%),
    linear-gradient(180deg, #171020, #120d19);
}
body.dark #view-adventure { background: radial-gradient(circle at 22% -12%, #241833, #140f1c 62%); }

/* Kontrast: Text auf dunklen Bild-Panels immer hell */
.adv-statsbar span { color: #fff8ed; }
.adv-statsbar img { filter: none; }
.adv-chip { color: #fff8ed; }

/* Karte im Kampf kleiner, damit Bewertungen ohne Scrollen sichtbar sind */
#view-study.battle .bhud { min-height: 208px; padding: 12px 20px; }
#view-study.battle .flashcard { width: min(560px, 100%); margin: 0 auto; }
#view-study.battle .face-text { font-size: clamp(1.15rem, 2.4vw, 1.7rem); }
#view-study.battle #stage { padding-top: 4px; }
#view-study.battle .card-tools { transform: scale(.92); }

/* Angriffsstärke: unterschiedliche Held-Ausfallschritte */
@keyframes heroAttack { 0% { transform: translateX(0) scale(1) } 28% { transform: translateX(var(--atk,20px)) scale(var(--asc,1.05)) } 100% { transform: translateX(0) scale(1) } }
.bhud-hero-img.attack { animation: heroAttack .42s ease; }
.bhud-hero-img.a1 { --atk: 8px; --asc: 1.02; }
.bhud-hero-img.a2 { --atk: 14px; --asc: 1.03; }
.bhud-hero-img.a3 { --atk: 20px; --asc: 1.05; }
.bhud-hero-img.a4 { --atk: 28px; --asc: 1.09; }
.bhud-hero-img.a5 { --atk: 38px; --asc: 1.16; }

/* Impuls: Größe/Farbe je nach Stärke */
.bhud-bolt.a1 { font-size: 16px; } .bhud-bolt.a2 { font-size: 20px; }
.bhud-bolt.a3 { font-size: 26px; } .bhud-bolt.a4 { font-size: 32px; }
.bhud-bolt.a5, .bhud-bolt.fokus { font-size: 42px; color: #ffe08a; text-shadow: 0 0 16px #ffcf5a; }

/* Gegner-Erschütterung: klein/groß */
@keyframes enemyShakeBig { 0%,100% { transform: translateX(0) rotate(0) } 15% { transform: translateX(-14px) rotate(-3deg) } 45% { transform: translateX(11px) rotate(3deg) } 75% { transform: translateX(-6px) rotate(-1deg) } }
.sprite-stage.enemy.hit.a4 .bhud-enemy-img, .sprite-stage.enemy.hit.a5 .bhud-enemy-img { animation: enemyShakeBig .4s ease; }
.bhud-dmg.a4 { font-size: 20px; } .bhud-dmg.a5 { font-size: 26px; color: #ffd67e; }

/* Explosion beim Sieg */
.bhud-boom { position: absolute; top: 46%; left: 50%; width: 0; height: 0; z-index: 6; pointer-events: none; }
.bhud-boom::before { content: ''; position: absolute; left: -34px; top: -34px; width: 68px; height: 68px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,240,180,.95), rgba(255,180,80,.5) 55%, transparent 72%); animation: boomFlash .5s ease-out forwards; }
@keyframes boomFlash { 0% { transform: scale(.2); opacity: 1 } 100% { transform: scale(2.4); opacity: 0 } }
.boom-p { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, #fff, #ffce55); box-shadow: 0 0 8px #ffcf5a; animation: boomP .62s ease-out forwards; }
@keyframes boomP { 0% { transform: translate(0,0) scale(1); opacity: 1 } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0 } }

/* Fokus-Spezialangriff */
.bhud-fokusflash { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 7;
  font-family: 'Press Start 2P', monospace; font-size: 15px; color: #ffe08a; text-shadow: 0 0 14px #ffcf5a; pointer-events: none; animation: fokusFlash .7s ease; }
@keyframes fokusFlash { 0% { opacity: 0; transform: translateX(-50%) scale(.6) } 30% { opacity: 1; transform: translateX(-50%) scale(1.15) } 100% { opacity: 0; transform: translateX(-50%) scale(1) } }
.bside-card.fokus-ready { border-color: var(--game-gold); box-shadow: 0 0 16px rgba(240,180,60,.5); }
.bside-fokusnote { font-size: .72rem; color: var(--game-text-muted); margin-top: 4px; line-height: 1.4; }
.bside-card.fokus-ready .bside-fokusnote:first-of-type { color: var(--game-gold); font-weight: 800; }
.bside-card.fokus-ready .bside-bar.green i { background: linear-gradient(90deg, #f0b43c, #ffd67e); }

.bhud-substat, .bhud-lv, .bhud-col[title] { cursor: help; }

@media (prefers-reduced-motion: reduce) {
  .boom-p, .bhud-boom::before, .bhud-fokusflash { display: none; }
}

/* ══════════ Lernbegleiter: Ausrüstung + Inventar ══════════ */
.gear-slots { display: flex; gap: 12px; margin-bottom: 14px; }
.gear-slot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 8px;
  background: var(--game-panel-soft); border: 2px solid var(--game-border); border-radius: 14px; min-height: 92px; cursor: default; }
.gear-slot[data-equip] { cursor: pointer; }
.gear-slot-lbl { font-size: .68rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--game-text-muted); }
.gear-slot img { width: 46px; height: 46px; object-fit: contain; image-rendering: pixelated; }
.gear-slot-lv { font-size: .7rem; font-weight: 800; color: var(--game-gold); }
.gear-slot-empty { font-size: .8rem; color: var(--game-text-muted); opacity: .6; margin-top: 14px; }
.gear-slot.empty { border-style: dashed; }

.gear-inv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.inv-item { text-align: center; cursor: pointer; background: var(--game-panel-soft); border: 2px solid var(--game-border);
  border-radius: 14px; padding: 10px 8px 8px; color: var(--game-text); transition: transform .1s, box-shadow .12s; }
.inv-item:hover { transform: translateY(-2px); }
.inv-item.equipped { box-shadow: 0 0 0 2px var(--game-green) inset; }
.inv-icon { position: relative; }
.inv-icon img { width: 52px; height: 52px; object-fit: contain; image-rendering: pixelated; }
.inv-eq { position: absolute; top: -2px; right: 30%; background: var(--game-green); color: #14330a; font-size: .7rem; font-weight: 800;
  width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.inv-name { font-size: .82rem; font-weight: 800; margin-top: 2px; }
.inv-tier { font-size: .68rem; color: var(--game-text-muted); }
.inv-stars { font-size: .78rem; letter-spacing: 1px; color: var(--game-gold); margin: 2px 0; }
.inv-prog { height: 7px; border-radius: 20px; background: rgba(0,0,0,.15); overflow: hidden; margin: 3px 4px 2px; }
body.dark .inv-prog { background: rgba(0,0,0,.4); }
.inv-prog i { display: block; height: 100%; background: linear-gradient(90deg, #a95ce8, #c79bff); border-radius: 20px; }
.inv-progtxt { font-size: .64rem; color: var(--game-text-muted); }

/* Seltenheits-Ränder (auch Slots/Inventar) */
.gear-slot.r-common, .inv-item.r-common { border-color: #9aa0ac; }
.gear-slot.r-rare, .inv-item.r-rare { border-color: #5aa0e6; }
.gear-slot.r-epic, .inv-item.r-epic { border-color: #b072e6; }
.gear-slot.r-legend, .inv-item.r-legend { border-color: #f0b43c; box-shadow: 0 0 10px rgba(240,180,60,.35); }
.gear-slot.r-myth, .inv-item.r-myth { border-color: #ff7a9c; box-shadow: 0 0 12px rgba(255,122,156,.45); }
.r-myth .loot-frame { border-color: #ff7a9c; box-shadow: 0 0 40px rgba(255,122,156,.9); animation: legendGlow 1.1s ease-in-out infinite; }
.r-myth .loot-rar { color: #ff9db4; }
.inv-item.r-myth .inv-stars, .inv-item.r-legend .inv-stars { color: #ffd67e; }

/* ══════════ Tagesziel-Quest ══════════ */
.quest-panel.ready { box-shadow: 0 0 0 2px var(--game-gold), 0 8px 20px rgba(0,0,0,.15); }
.quest-sub { font-size: .68rem; font-weight: 600; color: var(--game-text-muted); }
.quest-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.quest-goal > span { font-size: .82rem; font-weight: 700; color: var(--game-text); display: block; margin-bottom: 5px; }
.quest-bar { position: relative; height: 18px; border-radius: 20px; background: rgba(0,0,0,.12); overflow: hidden; }
body.dark .quest-bar { background: rgba(0,0,0,.4); }
.quest-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8bc94e, #b6e874); border-radius: 20px; transition: width .3s; }
.quest-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 800; color: var(--game-text); }
.quest-claim-btn { width: 100%; }
.quest-claimed { text-align: center; font-weight: 700; color: var(--game-green); }
.quest-note { font-size: .82rem; color: var(--game-text-muted); }
@media (max-width: 620px) { .quest-goals { grid-template-columns: 1fr; } }

/* Explosion kräftiger */
.bhud-boom::before { width: 90px; height: 90px; left: -45px; top: -45px;
  background: radial-gradient(circle, rgba(255,248,210,1), rgba(255,180,80,.7) 45%, transparent 70%); }
.boom-p { width: 12px; height: 12px; box-shadow: 0 0 12px #ffcf5a, 0 0 4px #fff; }

/* Wochenziel-Akzent */
.quest-panel.weekly { border-color: var(--game-border-gold); }
.quest-panel.weekly .quest-bar i { background: linear-gradient(90deg, #a95ce8, #f0b43c); }
.quest-panel.ready { animation: questReady 1.6s ease-in-out infinite; }
@keyframes questReady { 0%,100% { box-shadow: 0 0 0 2px var(--game-gold) } 50% { box-shadow: 0 0 16px 2px rgba(240,180,60,.6) } }

/* ══════════ Verbesserungen als Fähigkeits-Nodes (mit Sprites) ══════════ */
.adv-up { position: relative; overflow: hidden; }
.adv-up::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; opacity: .85; }
.skill-knowledge::before { background: #f4b942; }
.skill-focus::before { background: #e0857e; }
.skill-collection::before { background: #8bc94e; }
.skill-insight::before { background: #c79bff; }
.skill-combo::before { background: #e99a3c; }
.skill-fortune::before { background: #7fd06a; }
.adv-up-ic { position: relative; width: 58px; height: 58px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.adv-up-ic img { width: 54px; height: 54px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 5px rgba(0,0,0,.4)); transition: transform .12s; }
.adv-up.buyable:hover .adv-up-ic img { transform: scale(1.12) rotate(-3deg); }
.adv-up-lv { position: absolute; bottom: -3px; right: -6px; font-size: .6rem; font-weight: 800; color: #fff;
  background: var(--game-purple); border-radius: 20px; padding: 1px 7px; box-shadow: 0 1px 3px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.25); }
.skill-knowledge .adv-up-lv { background: #d99a1e; } .skill-collection .adv-up-lv, .skill-fortune .adv-up-lv { background: #5b9e35; }
.skill-focus .adv-up-lv { background: #c0645c; } .skill-combo .adv-up-lv { background: #cf7a2a; }
.adv-up.buyable:hover { border-color: var(--game-gold); box-shadow: 0 6px 16px rgba(0,0,0,.18); }

/* ══════════ Mehrere Items pro Truhe (nacheinander) ══════════ */
.loot-multi { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: stretch; max-width: 780px; }
.loot-slot { opacity: 0; animation: lootPop .5s cubic-bezier(.3,1.5,.5,1) forwards; display: flex; }
.loot-multi .loot-reward { padding: 14px 16px; }
.loot-multi .loot-frame { width: 104px; height: 104px; }
.loot-multi .loot-frame img { width: 82px; height: 82px; }
.loot-multi .loot-frame.plain img { width: 90px; height: 90px; }
.loot-multi .loot-name { font-size: .92rem; }
.loot-multi .loot-desc { font-size: .76rem; }
.loot-multi .loot-rar { font-size: 10px; }

/* ══════════ Dunkler Modus: Seitenleiste/Menü ══════════ */
body.dark .sidebar { background: linear-gradient(180deg, #1d1626, #171020); border-color: var(--line); }
body.dark .buddy-box, body.dark .buddy-panel, body.dark .streak-box, body.dark .card-panel.buddy-panel {
  background: var(--surface); border-color: var(--line); color: var(--ink);
}
body.dark .currency-bar .cur { background: var(--surface); border-color: var(--line); color: var(--ink); }
body.dark .brand-sub, body.dark .streak-lbl, body.dark .buddy-xp, body.dark .side-head, body.dark .side-section { color: var(--ink-soft); }
body.dark .nav-link { color: var(--ink); }
body.dark .nav-link:hover { background: var(--game-panel-soft); }
body.dark .streak-week span, body.dark .streak-week i { border-color: var(--line); }
body.dark .course-head, body.dark .course-row { color: var(--ink); }
body.dark .course-row:hover, body.dark .deck-row:hover { background: var(--game-panel-soft); }
body.dark .buddy-lvl, body.dark .buddy-lvl.big { color: var(--game-purple); }

/* ══════════════════════════════════════════════════════
   KALENDER — sanfteres, hell/dunkel-taugliches Redesign
   (Heatmap in Grüntönen passend zum Rest der Seite)
   ══════════════════════════════════════════════════════ */
:root {
  --cal-empty: #f3efe4; --cal-d1: #e6f2d4; --cal-d2: #c6e4a2; --cal-d3: #97cf66; --cal-d4: #6fae3a;
  --cal-ink-strong: #33501c;
}
body.dark {
  --cal-empty: #241d30; --cal-d1: #2f3b24; --cal-d2: #40562f; --cal-d3: #5f8f40; --cal-d4: #83c451;
  --cal-ink-strong: #eaf6d8;
}
#view-calendar .card-panel { border-radius: 22px; }
#view-calendar .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
#view-calendar .panel-head h3 { font-size: 1.15rem; text-transform: capitalize; letter-spacing: .2px; }
#cal-prev, #cal-next { width: 38px; height: 38px; border-radius: 12px; font-size: 1.1rem; font-weight: 800;
  background: var(--game-panel-soft, #f4ecfa); border: 1px solid var(--line, #e5d6b7); color: var(--ink, #4a3525); transition: transform .1s, background .12s; }
#cal-prev:hover, #cal-next:hover { transform: translateY(-1px); background: var(--lilac-lt, #edf3dd); }

.cal-weekdays { margin-bottom: 8px; }
.cal-weekdays span { text-align: center; font-size: .66rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-soft, #795c3e); opacity: .75; }
.cal-weekdays, .cal-grid { gap: 7px; }

.cal-day { aspect-ratio: 1; border-radius: 13px; background: var(--cal-empty);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 700; color: var(--ink, #4a3525); position: relative;
  border: 2px solid transparent; transition: transform .12s, box-shadow .12s, border-color .12s; }
.cal-day:not(.blank):hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.12); border-color: var(--lilac, #739642); }
.cal-day.blank { background: none; }
.cal-day.blank:hover { transform: none; box-shadow: none; border-color: transparent; }
.cal-day .n { font-size: .58rem; font-weight: 800; color: var(--ink-soft, #795c3e); margin-top: 1px; }
.cal-day.d1 { background: var(--cal-d1); }
.cal-day.d2 { background: var(--cal-d2); }
.cal-day.d3 { background: var(--cal-d3); color: var(--cal-ink-strong); }
.cal-day.d4 { background: var(--cal-d4); color: #fff; }
.cal-day.d3 .n, .cal-day.d4 .n { color: inherit; opacity: .85; }
.cal-day.today { border-color: var(--game-gold, #f4b942); box-shadow: 0 0 0 2px rgba(244,185,66,.35); }
.cal-day.selected { border-color: var(--lilac-dk, #526f2f); transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 18px rgba(0,0,0,.18); z-index: 2; }
.cal-day .due-mark { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--peach, #df954b); box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
body.dark .cal-day .due-mark { box-shadow: 0 0 0 2px rgba(0,0,0,.4); }
.cal-day.blocked { background: repeating-linear-gradient(45deg, var(--cal-empty), var(--cal-empty) 5px, rgba(0,0,0,.05) 5px, rgba(0,0,0,.05) 10px); color: var(--ink-soft, #795c3e); }

.ev-dots { position: absolute; bottom: 5px; left: 0; right: 0; display: flex; gap: 3px; justify-content: center; }
.ev-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

.cal-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line, #e5d6b7); font-size: .78rem; color: var(--ink-soft, #795c3e); }
.cal-legend .sw { width: 14px; height: 14px; border-radius: 5px; display: inline-block; }
.sw0 { background: var(--cal-empty); } .sw1 { background: var(--cal-d2); } .sw3 { background: var(--cal-d4); }
.cal-legend .ev-dot { width: 9px; height: 9px; }

/* ══════════════════════════════════════════════════════
   DARK-MODE-KONSISTENZ — helle Boxen im dunklen Design fixen
   ══════════════════════════════════════════════════════ */
/* Klausur-Box im Kalender (vorher inline hell-rosa) */
.cal-exam-box { background: #ffe3ea; border-color: var(--rose-dk); color: var(--ink); }
.cal-exam-box b { color: var(--rose-dk); }
body.dark .cal-exam-box { background: #3a2531; border-color: var(--rose, #e0857e); color: var(--ink); }
body.dark .cal-exam-box b { color: #f0a49d; }

/* Belohnungs-Chips im Rundenabschluss */
body.dark .cur-earn { background: #2d2039; border-color: var(--line); color: var(--ink); }
/* Hinweis-Box (Lernen + Kalender) */
body.dark .hint-box { background: #2e2733; border-color: var(--butter, #dfb551); color: var(--ink); }

/* Dashboard-Statuskarten R/G/G */
body.dark .v2-scard.red { background: #33232a; border-color: rgba(224,133,126,.4); }
body.dark .v2-scard.yellow { background: #33301f; border-color: rgba(223,181,81,.4); }
body.dark .v2-scard.green { background: #24301f; border-color: rgba(139,201,78,.4); }

/* Bewertungsknöpfe (normale Lernansicht, ohne Kampf) */
body.dark .rate-again { background: #3a2226; color: #f0a49d; border-color: #5a2f34; }
body.dark .rate-hard  { background: #3a3220; color: #e6c05e; border-color: #5a4c2a; }
body.dark .rate-good  { background: #223524; color: #9edc7a; border-color: #2f5a35; }
body.dark .rate-easy  { background: #202f3a; color: #8fbde6; border-color: #2a4a5a; }
body.dark .answer-fb.ok { background: #223524; color: #9edc7a; }
body.dark .answer-fb.no { background: #3a2226; color: #f0a49d; }
body.dark .quiz-opt.wrong { background: #3a2226; }
body.dark .tool-btn.on { background: #3a3220; border-color: #5a4c2a; }

/* Duelle */
body.dark .duel.active { background: #24301f; border-color: var(--mint, #b3ca85); }
body.dark .duel.won { background: #33301f; border-color: #d9b24a; }
body.dark .duel.lost { background: #33232a; border-color: #7a4a4a; }

/* Abenteuer: aktive Truhen-Taste */
body.dark .adv-chest-btn.has { background: linear-gradient(180deg, #3a2f18, #2d2039); }

/* kleine rote Hover-Zustände dunkler */
body.dark .mini-btn.del:hover, body.dark .gap-del:hover, body.dark .tchip.clear,
body.dark .pop-menu button.danger:hover, body.dark .feed-react.on, body.dark .dc-like.on {
  background: #3a2226; color: #f0a49d; border-color: #5a2f34;
}

/* ══════════ Kalender: zweispaltig (schmaler + Termine rechts) ══════════ */
.cal-layout { display: grid; grid-template-columns: minmax(0, 600px) minmax(240px, 330px); gap: 18px; align-items: start; justify-content: start; }
.cal-side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cal-side-head h3 { font-size: 1.05rem; }
.up-row { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 12px; cursor: pointer; transition: background .12s; }
.up-row:hover { background: var(--lilac-lt, #edf3dd); }
body.dark .up-row:hover { background: var(--game-panel-soft, #2d2039); }
.up-row .ev-dot { width: 9px; height: 9px; flex: 0 0 auto; }
.up-date { font-weight: 800; font-size: .82rem; color: var(--ink, #4a3525); flex: 0 0 auto; min-width: 42px; }
.up-title { flex: 1; min-width: 0; font-size: .86rem; color: var(--ink, #4a3525); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-x { flex: 0 0 auto; width: 26px; height: 26px; border: none; background: none; border-radius: 8px; cursor: pointer;
  color: var(--ink-soft, #795c3e); font-weight: 800; transition: background .12s, color .12s; }
.up-x:hover { background: #fbe3e1; color: var(--rose-dk, #c0645c); }
body.dark .up-x:hover { background: #3a2226; color: #f0a49d; }
@media (max-width: 900px) { .cal-layout { grid-template-columns: 1fr; } }

/* ══════════ Community: „Meine Decks" ✕ oben rechts ══════════ */
.deck-card { position: relative; }
.deck-card-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 28px; height: 28px; border-radius: 9px;
  border: 1px solid var(--line, #e5d6b7); background: var(--surface, #fffdf8); color: var(--ink-soft, #795c3e);
  font-weight: 800; cursor: pointer; line-height: 1; transition: background .12s, color .12s, transform .1s; }
.deck-card-x:hover { background: #fbe3e1; color: var(--rose-dk, #c0645c); transform: scale(1.08); }
body.dark .deck-card-x { background: var(--game-panel-soft, #2d2039); border-color: var(--line); }
body.dark .deck-card-x:hover { background: #3a2226; color: #f0a49d; }
.deck-card.is-mine .deck-card-top { padding-right: 34px; }

/* ══════════ Coming Soon: Katze höher rechts + klickbare Vorschauen ══════════ */
.soon-hero { align-items: flex-start; }
.soon-hero-widget { align-self: flex-start; transform: translate(12px, -20px); }
.soon-cover { position: relative; cursor: zoom-in; }
.soon-zoom { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(20,12,28,.62); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px;
  opacity: 0; transition: opacity .15s; }
.soon-card:hover .soon-zoom { opacity: 1; }

/* ══════════ Bild-Lightbox ══════════ */
.img-lightbox { position: fixed; inset: 0; z-index: 4500; display: flex; align-items: center; justify-content: center;
  background: rgba(15,8,22,.85); padding: 24px; cursor: zoom-out; }
.lb-fig { margin: 0; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lb-fig img { max-width: 92vw; max-height: 80vh; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.6); image-rendering: auto; }
.lb-fig figcaption { color: #fff; font-weight: 800; font-size: 1.1rem; }
.lb-close { position: fixed; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.15); color: #fff; font-size: 1.2rem; cursor: pointer; }
.lb-close:hover { background: rgba(255,255,255,.28); }

/* ══════════ Dark-Mode: Erfolge + Tab-Hover ══════════ */
body.dark .ach-card.done { background: linear-gradient(160deg, #223524, var(--surface)); border-color: #5f8f40; }
body.dark .acc-card.done { background: linear-gradient(160deg, #223524, var(--surface)); border-color: #5f8f40; }
body.dark .ach-reward { color: #9edc7a; }
body.dark .tab:hover { background: var(--game-panel-soft, #2d2039); color: var(--ink); }
body.dark .tab { color: var(--ink-soft); }

/* ══════════ Coming Soon: Katze deutlich weiter oben rechts ══════════ */
.soon-hero { overflow: visible; }
.soon-hero-widget { align-self: flex-start; transform: translate(34px, -76px); position: relative; z-index: 3; }
@media (max-width: 720px) { .soon-hero-widget { transform: translate(0, -10px); } }

/* ══════════ Lightbox: angenehmer Öffnungseffekt ══════════ */
.img-lightbox { animation: lbBg .24s ease; }
@keyframes lbBg { from { opacity: 0; } to { opacity: 1; } }
.lb-fig { animation: lbIn .34s cubic-bezier(.3,1.35,.5,1); }
@keyframes lbIn { 0% { opacity: 0; transform: scale(.82) translateY(12px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }

/* ══════════ Fähigkeits-Meilenstein-Effekt ══════════ */
.adv-up.milestone { box-shadow: 0 0 0 2px var(--game-gold), 0 0 18px rgba(244,185,66,.6); animation: skillPulse .55s ease 2; }
@keyframes skillPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.adv-up.milestone .adv-up-ic img { animation: skillSpin .6s ease; }
@keyframes skillSpin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(10deg) scale(1.25); } 100% { transform: rotate(0) scale(1); } }
.skill-ring { position: absolute; left: 29px; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  border: 3px solid var(--game-gold); pointer-events: none; animation: skillRing .85s ease-out forwards; }
@keyframes skillRing { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(4.5); } }

/* ═══════════ Batch 4: Items/Sets · Skilltree · Reisekarte · Kompendium · Bestenliste · Duell ═══════════ */

/* ── Dark Mode: Seitenmenü-Zähler/Benachrichtigungen ── */
body.dark .badge { background: var(--game-panel-soft, #241a30); color: var(--ink-soft); }
body.dark .badge.due { background: var(--rose); color: #fff; }
body.dark .tab-dot { box-shadow: 0 0 0 2px var(--surface); }
body.dark .fr-badge { background: var(--game-purple); color: #fff; }
body.dark .soon-badge, body.dark .soon-notify { background: var(--game-panel-soft); color: var(--ink); border-color: var(--line); }
body.dark .soon-notify.on { background: var(--game-green, #4f8f3a); color: #fff; }

/* ── Abenteuer-Werkzeugleiste ── */
.adv-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.adv-tool { flex: 1 1 auto; min-width: 130px; padding: 10px 12px; border-radius: 12px; font-weight: 700; font-size: .9rem;
  cursor: pointer; border: 1.5px solid var(--game-line, #e5dcc8); background: var(--game-panel, #fff); color: var(--ink);
  transition: transform .1s, box-shadow .12s, border-color .12s; }
.adv-tool:hover { transform: translateY(-2px); border-color: var(--game-gold); box-shadow: 0 6px 14px rgba(0,0,0,.12); }
body.dark .adv-tool { background: var(--surface); border-color: var(--line); color: var(--ink); }
body.dark .adv-tool:hover { border-color: var(--game-gold); background: var(--game-panel-soft); }

/* ── 2-Item-Plätze pro Kategorie ── */
.gear-hint { font-size: .84rem; color: var(--ink-soft); margin: 0 0 10px; }
.gear-slots { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.gear-cat { flex: 1 1 150px; }
.gear-cat > .gear-slot-lbl { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 5px; }
.gear-cat-slots { display: flex; gap: 8px; }
.gear-slot { position: relative; flex: 1 1 0; aspect-ratio: 1; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--game-panel-soft, #f6efdf); border: 2px dashed var(--game-line, #e0d6bf); overflow: hidden; }
.gear-slot img { width: 74%; height: 74%; object-fit: contain; image-rendering: auto; }
.gear-slot[data-equip] { cursor: pointer; border-style: solid; }
.gear-slot[data-equip]:hover { transform: scale(1.05); }
.gear-slot-empty { font-size: .74rem; color: var(--ink-soft); opacity: .7; }
.gear-slot-lv { position: absolute; bottom: 2px; left: 3px; font-size: .58rem; font-weight: 800; background: rgba(0,0,0,.6); color: #fff; padding: 0 5px; border-radius: 10px; }
.gear-slot-grp { position: absolute; top: 2px; right: 3px; font-size: .72rem; }
body.dark .gear-slot { background: var(--game-panel-soft, #211830); border-color: var(--line); }

/* Set-Boni Badges */
.set-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.set-badge { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 11px; border: 1.5px solid var(--game-line, #e5dcc8);
  background: var(--game-panel-soft, #f6efdf); opacity: .62; transition: all .15s; }
.set-badge.on { opacity: 1; border-color: var(--game-gold); box-shadow: 0 3px 10px rgba(212,160,60,.22); background: linear-gradient(135deg, rgba(244,185,66,.14), transparent); }
.set-badge .set-ic { font-size: 1.05rem; }
.set-badge .set-name { font-size: .78rem; font-weight: 800; color: var(--ink); }
.set-badge .set-cnt { font-size: .68rem; font-weight: 700; color: var(--ink-soft); }
.set-badge .set-bon { font-size: .72rem; font-weight: 700; color: var(--game-green, #5b9e35); }
.set-badge.on .set-bon { color: var(--game-gold, #c98a1a); }
body.dark .set-badge { background: var(--game-panel-soft, #211830); border-color: var(--line); }

/* Inventar nach Set gruppiert */
.inv-group { margin-bottom: 14px; }
.inv-group-h { font-size: .84rem; font-weight: 800; color: var(--ink); margin: 0 0 7px; display: flex; align-items: center; gap: 6px; }
.inv-group-h small { font-weight: 600; color: var(--ink-soft); }

/* ── Skill-Baum (Fokus-Spezialangriff) ── */
.skilltree { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.skill-card { display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 12px; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--game-line, #e5dcc8); background: var(--game-panel, #fff); transition: transform .12s, border-color .12s, box-shadow .12s; }
.skill-card:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.1); }
.skill-card.active { border-color: var(--game-gold); background: linear-gradient(135deg, rgba(244,185,66,.16), transparent); box-shadow: 0 4px 14px rgba(212,160,60,.25); }
.skill-card.locked { opacity: .55; cursor: not-allowed; }
.skill-card-ic { font-size: 1.7rem; flex: 0 0 auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.skill-card-body { display: flex; flex-direction: column; gap: 2px; }
.skill-card-body b { font-size: .94rem; color: var(--ink); }
.skill-card-desc { font-size: .76rem; color: var(--ink-soft); line-height: 1.35; }
.skill-card-tag { margin-left: auto; flex: 0 0 auto; font-size: .68rem; font-weight: 800; padding: 3px 8px; border-radius: 20px;
  background: var(--game-panel-soft, #f2ead8); color: var(--ink-soft); white-space: nowrap; align-self: center; }
.skill-card.active .skill-card-tag { background: var(--game-gold); color: #fff; }
body.dark .skill-card { background: var(--surface); border-color: var(--line); }
body.dark .skill-card.active { background: linear-gradient(135deg, rgba(244,185,66,.14), transparent); }
body.dark .skill-card-tag { background: var(--game-panel-soft); color: var(--ink-soft); }

/* ── Abenteuer-Overlay (Modal) ── */
.adv-modal-ov { position: fixed; inset: 0; z-index: 6000; display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(28,20,38,.55); backdrop-filter: blur(3px); animation: lbBg .22s ease; }
.adv-modal { position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; border-radius: 20px; padding: 22px;
  background: var(--game-panel, #fff); border: 1.5px solid var(--game-line, #e5dcc8); box-shadow: 0 22px 60px rgba(0,0,0,.35);
  animation: lbIn .3s cubic-bezier(.3,1.3,.5,1); }
.adv-modal.wide { max-width: 760px; }
body.dark .adv-modal { background: var(--surface); border-color: var(--line); }
.adv-modal-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--game-panel-soft, #f2ead8); color: var(--ink); font-size: 1rem; }
.adv-modal-x:hover { background: var(--rose); color: #fff; }
.adv-modal-h { margin: 0 30px 6px 0; font-size: 1.25rem; color: var(--ink); }
.adv-modal-sub { font-size: .86rem; color: var(--ink-soft); margin: 0 0 14px; }
.adv-loading { padding: 30px; text-align: center; color: var(--ink-soft); }

/* ── Reisekarte ── */
.journey-map { display: flex; flex-direction: column; align-items: center; gap: 0; }
.jm-node { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 460px; padding: 10px; border-radius: 16px;
  border: 2px solid var(--game-line, #e5dcc8); background: var(--game-panel-soft, #f6efdf); }
.jm-node.current { border-color: var(--game-gold); box-shadow: 0 4px 16px rgba(212,160,60,.28); background: linear-gradient(135deg, rgba(244,185,66,.14), transparent); }
.jm-node.cleared { border-color: var(--game-green, #6ab04c); }
.jm-node.locked { opacity: .5; }
.jm-thumb { position: relative; width: 96px; height: 66px; flex: 0 0 auto; border-radius: 12px; background-size: cover; background-position: center; overflow: hidden; }
.jm-node.locked .jm-thumb { filter: grayscale(1) brightness(.8); }
.jm-badge { position: absolute; top: 3px; left: 4px; font-size: 1rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.jm-hero { position: absolute; bottom: -2px; right: 2px; width: 42px; height: 42px; object-fit: contain; animation: jmBob 1.6s ease-in-out infinite; }
@keyframes jmBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.jm-info { display: flex; flex-direction: column; gap: 2px; }
.jm-info b { font-size: .92rem; color: var(--ink); }
.jm-sub { font-size: .76rem; color: var(--ink-soft); }
.jm-boss { font-size: .74rem; color: var(--ink-soft); }
.jm-link { width: 4px; height: 22px; background: repeating-linear-gradient(var(--game-line, #d9cfb6) 0 4px, transparent 4px 8px); }
.jm-link.done { background: var(--game-green, #6ab04c); }
body.dark .jm-node { background: var(--game-panel-soft, #211830); border-color: var(--line); }

/* ── Kompendium ── */
.kp-tabs, .alb-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.kp-tab, .alb-tab { flex: 1; padding: 8px; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: .84rem;
  border: 1.5px solid var(--game-line, #e5dcc8); background: var(--game-panel-soft, #f6efdf); color: var(--ink-soft); }
.kp-tab.active, .alb-tab.active { background: var(--game-gold); color: #fff; border-color: var(--game-gold); }
.kp-tab b, .alb-tab b { font-weight: 800; }
body.dark .kp-tab, body.dark .alb-tab { background: var(--game-panel-soft, #211830); border-color: var(--line); color: var(--ink-soft); }
body.dark .kp-tab.active, body.dark .alb-tab.active { color: #fff; }
.kp-group-h { font-size: .82rem; font-weight: 800; color: var(--ink); margin: 12px 0 7px; }
.kp-group-h small { color: var(--ink-soft); font-weight: 600; }
.kp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 9px; }
.kp-cell { text-align: center; padding: 8px 4px; border-radius: 12px; border: 1.5px solid var(--game-line, #e5dcc8); background: var(--game-panel-soft, #f6efdf); }
.kp-cell.boss { border-color: var(--game-purple, #a06bd6); }
.kp-cell.locked { opacity: .8; }
.kp-cell.locked .kp-img img { filter: grayscale(1) brightness(0) opacity(.28); }
.kp-img { position: relative; width: 56px; height: 56px; margin: 0 auto 4px; display: flex; align-items: center; justify-content: center; }
.kp-img img { width: 100%; height: 100%; object-fit: contain; }
.kp-q { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 900; color: var(--ink-soft); }
.kp-lv { position: absolute; bottom: -2px; right: -2px; font-size: .56rem; font-weight: 800; background: rgba(0,0,0,.6); color: #fff; padding: 0 5px; border-radius: 10px; }
.kp-name { font-size: .68rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.kp-tag { display: inline-block; margin-top: 3px; font-size: .58rem; font-weight: 800; padding: 1px 6px; border-radius: 10px; background: var(--game-purple, #a06bd6); color: #fff; }
body.dark .kp-cell { background: var(--game-panel-soft, #211830); border-color: var(--line); }

/* ── Abenteuer-Bestenliste / Duell ── */
.alb-list { display: flex; flex-direction: column; gap: 4px; }
.alb-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 11px; background: var(--game-panel-soft, #f6efdf); }
.alb-row.me { background: linear-gradient(135deg, rgba(244,185,66,.2), transparent); border: 1.5px solid var(--game-gold); }
.alb-rank { flex: 0 0 30px; font-weight: 800; text-align: center; color: var(--ink-soft); }
.alb-name { flex: 1; font-weight: 700; color: var(--ink); cursor: pointer; }
.alb-name[data-uid]:hover { text-decoration: underline; }
.alb-val { font-weight: 800; color: var(--game-gold, #c98a1a); font-size: .86rem; }
body.dark .alb-row { background: var(--game-panel-soft, #211830); }
body.dark .alb-row.me { background: linear-gradient(135deg, rgba(244,185,66,.22), transparent); }

.duel-list { display: flex; flex-direction: column; gap: 7px; }
.duel-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 11px; background: var(--game-panel-soft, #f6efdf); }
.duel-row.me { border: 1.5px solid var(--game-gold); background: linear-gradient(135deg, rgba(244,185,66,.2), transparent); }
.duel-rank { flex: 0 0 26px; text-align: center; font-weight: 800; color: var(--ink-soft); }
.duel-name { flex: 0 0 30%; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-name[data-uid] { cursor: pointer; }
.duel-bar { flex: 1; height: 12px; border-radius: 8px; background: var(--game-line, #e5dcc8); overflow: hidden; }
.duel-bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--game-gold, #f4b942), var(--game-green, #6ab04c)); transition: width .5s; }
.duel-val { flex: 0 0 auto; font-weight: 800; color: var(--game-green, #5b9e35); font-size: .84rem; }
body.dark .duel-row { background: var(--game-panel-soft, #211830); }
body.dark .duel-bar { background: var(--line); }

/* ═══════════ Batch 5: Slot-Kennzeichnung · echter Skill-Tree · Feinschliff ═══════════ */

/* ── Platz-Chips (Kopf / Gesicht / Talisman) ── */
.slot-chip { display: inline-flex; align-items: center; gap: 3px; font-size: .64rem; font-weight: 800; line-height: 1;
  padding: 3px 7px; border-radius: 20px; white-space: nowrap; letter-spacing: .01em; }
.slot-chip.mini { padding: 3px 6px; font-size: .72rem; gap: 0; }
.slot-head    { background: rgba(244,185,66,.20);  color: #a9720f; }
.slot-face    { background: rgba(160,107,214,.20); color: #7742ad; }
.slot-trinket { background: rgba(64,182,150,.20);  color: #1f8a63; }
body.dark .slot-head    { background: rgba(244,185,66,.20);  color: #f4c976; }
body.dark .slot-face    { background: rgba(180,130,235,.22); color: #d4b3f5; }
body.dark .slot-trinket { background: rgba(90,205,170,.20);  color: #86e3c4; }

.inv-group-slots { display: inline-flex; gap: 4px; margin-left: auto; }

/* Platz-Chip auf jeder Inventar-Karte (oben links) */
.inv-item { position: relative; }
.inv-item > .slot-chip { position: absolute; top: 6px; left: 6px; z-index: 2; box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* Set-Badge: Kopf + welche Plätze das Set abdeckt */
.set-badge { gap: 4px; }
.set-badge-top { display: flex; align-items: center; gap: 6px; }
.set-badge-top .set-name { flex: 1; }
.set-badge-slots { display: flex; gap: 4px; }
.set-badge-slots .slot-chip { padding: 2px 6px; }

/* Kompendium-Zelle: Platz-Icon (Ecke) + Platzname */
.kp-cell { position: relative; }
.kp-slot { position: absolute; top: 4px; left: 4px; z-index: 2; font-size: .78rem; padding: 2px 5px; border-radius: 20px; }
.kp-slotname { font-size: .6rem; font-weight: 700; color: var(--ink-soft); margin-top: 2px; }
.kp-cell.locked .kp-slotname { opacity: .6; }

/* ══════════ Echter Skill-Tree (verzweigt) ══════════ */
.skilltree-wrap { display: flex; flex-direction: column; align-items: center; }
.skilltree-tree { position: relative; width: 100%; max-width: 400px; aspect-ratio: 400 / 300; margin: 2px auto 6px; }
.st-edges { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }
.st-edge { stroke: var(--game-line, #ddd2b8); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 3 7; opacity: .8; }
.st-edge.on { stroke: url(#stgrad); stroke: var(--game-gold, #f4b942); stroke-dasharray: none; stroke-width: 6; opacity: 1; filter: drop-shadow(0 0 3px rgba(244,185,66,.55)); }
body.dark .st-edge { stroke: #3a2d4d; }
body.dark .st-edge.on { stroke: var(--game-gold, #f4b942); }

.st-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 108px; background: none; border: none; padding: 0; cursor: default; z-index: 1; }
.st-node-ring { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 28%, #fff, var(--game-panel-soft, #f3ead6)); border: 3px solid var(--game-line, #e0d6bf);
  box-shadow: 0 4px 12px rgba(0,0,0,.14), inset 0 1px 3px rgba(255,255,255,.6); transition: transform .16s, box-shadow .16s, border-color .16s; }
.st-node-ic { font-size: 1.7rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.st-node-name { font-size: .78rem; font-weight: 800; color: var(--ink); text-align: center; line-height: 1.05; }
.st-node-tag { font-size: .62rem; font-weight: 800; padding: 2px 8px; border-radius: 20px; background: var(--game-panel-soft, #efe6d2); color: var(--ink-soft); }
body.dark .st-node-ring { background: radial-gradient(circle at 32% 28%, #2c2140, #201730); border-color: var(--line); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
body.dark .st-node-tag { background: var(--game-panel-soft, #251b36); color: var(--ink-soft); }

/* Zustände */
.st-node.avail { cursor: pointer; }
.st-node.avail .st-node-ring { border-color: var(--game-green, #7cc44e); }
.st-node.avail:hover .st-node-ring { transform: scale(1.1); box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.st-node.avail .st-node-tag { background: var(--game-green, #7cc44e); color: #fff; }
.st-node.active { cursor: default; }
.st-node.active .st-node-ring { border-color: var(--game-gold, #f4b942); background: radial-gradient(circle at 32% 28%, #fff7e3, #ffe6a8);
  box-shadow: 0 0 0 4px rgba(244,185,66,.28), 0 6px 18px rgba(212,160,60,.4); animation: stPulse 2.2s ease-in-out infinite; }
.st-node.active .st-node-tag { background: var(--game-gold, #e0a41c); color: #fff; }
.st-node.active .st-node-name { color: var(--game-gold, #b5820e); }
body.dark .st-node.active .st-node-ring { background: radial-gradient(circle at 32% 28%, #4a3a1a, #33260f); }
body.dark .st-node.active .st-node-name { color: #f4c976; }
.st-node.locked { opacity: .58; cursor: not-allowed; }
.st-node.locked .st-node-ic { filter: grayscale(.4); }
@keyframes stPulse { 0%,100% { box-shadow: 0 0 0 4px rgba(244,185,66,.28), 0 6px 18px rgba(212,160,60,.4); } 50% { box-shadow: 0 0 0 7px rgba(244,185,66,.14), 0 6px 22px rgba(212,160,60,.5); } }
@media (prefers-reduced-motion: reduce) { .st-node.active .st-node-ring { animation: none; } }

/* Detailzeile + Hinweis */
.st-detail { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 460px; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(244,185,66,.14), transparent); border: 1.5px solid var(--game-gold, #e9cf94); }
.st-detail-ic { font-size: 1.9rem; flex: 0 0 auto; }
.st-detail-body b { font-size: .9rem; color: var(--ink); }
.st-detail-body p { margin: 2px 0 0; font-size: .78rem; color: var(--ink-soft); line-height: 1.35; }
body.dark .st-detail { border-color: rgba(244,185,66,.4); }
.st-hint { font-size: .76rem; color: var(--ink-soft); text-align: center; margin: 10px 0 0; max-width: 460px; }

/* ── Feinschliff: weichere Karten, Übergänge ── */
.inv-item, .set-badge, .kp-cell, .adv-tool, .st-detail { transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.inv-item:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.12); }
.inv-item.equipped { box-shadow: 0 0 0 2px var(--game-gold, #f4b942), 0 6px 16px rgba(212,160,60,.25); }
.kp-cell.found:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.1); }
.set-badge { border-radius: 13px; }
.gear-slot { transition: transform .14s ease, box-shadow .14s ease; }
.gear-slot[data-equip]:hover { box-shadow: 0 6px 14px rgba(0,0,0,.16); }
.skilltree-panel { overflow: hidden; }

/* Reisekarte: Gegneranzahl-Badge pro Welt */
.jm-foecount { position: absolute; bottom: 3px; left: 4px; font-size: .62rem; font-weight: 800; color: #fff;
  background: rgba(0,0,0,.6); padding: 1px 6px; border-radius: 20px; z-index: 2; }
.jm-node.cleared .jm-foecount { background: var(--game-green, #5b9e35); }

/* ═══════════ Batch 6: Haustier-Begleiter (Diamant-Truhen) ═══════════ */

/* Begleiter neben dem Helden in der Arena */
.adv-hero-wrap { position: relative; }
.adv-pet { position: absolute; bottom: 2px; left: -34px; width: 62px; height: 62px; object-fit: contain;
  image-rendering: auto; filter: drop-shadow(0 3px 5px rgba(0,0,0,.4)); animation: petBob 2.4s ease-in-out infinite; z-index: 3; }
@keyframes petBob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .adv-pet { animation: none; } }
@media (max-width: 560px) { .adv-pet { width: 46px; height: 46px; left: -12px; } }

/* Modal-Kopf: aktiver Begleiter + Truhen-Button */
.pet-top { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; margin-bottom: 6px; }
.pet-active { flex: 1 1 220px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px;
  background: var(--game-panel-soft, #f6efdf); border: 2px solid var(--game-line, #e5dcc8); }
.pet-active img { width: 58px; height: 58px; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.pet-active b { font-size: .92rem; color: var(--ink); display: block; }
.pet-active span { font-size: .8rem; color: var(--game-green, #5b9e35); font-weight: 700; }
.pet-active-none { font-size: .85rem; color: var(--ink-soft); }
.pet-open-btn { flex: 0 0 auto; align-self: center; }
body.dark .pet-active { background: var(--game-panel-soft, #211830); border-color: var(--line); }

/* Sammlungs-Grid */
.pet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.pet-cell { position: relative; text-align: center; padding: 12px 8px 10px; border-radius: 14px; cursor: pointer;
  background: var(--game-panel-soft, #f6efdf); border: 2px solid var(--game-line, #e5dcc8); transition: transform .14s, box-shadow .14s; }
.pet-cell[data-pet]:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.14); }
.pet-cell.locked { opacity: .82; cursor: default; }
.pet-cell.active { box-shadow: 0 0 0 3px var(--game-gold, #f4b942), 0 6px 16px rgba(212,160,60,.3); }
.pet-cell-img { position: relative; width: 74px; height: 74px; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; }
.pet-cell-img img { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.pet-cell.locked .pet-cell-img img { filter: grayscale(1) brightness(0) opacity(.26); }
.pet-cell-name { font-size: .82rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.pet-cell-rar { font-size: .66rem; font-weight: 800; margin-top: 2px; }
.pet-cell-desc { font-size: .7rem; color: var(--game-green, #5b9e35); font-weight: 700; margin-top: 3px; }
.pet-on { position: absolute; top: -2px; right: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--game-gold, #f4b942);
  color: #fff; font-size: .72rem; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
body.dark .pet-cell { background: var(--game-panel-soft, #211830); border-color: var(--line); }
/* Seltenheits-Ränder wiederverwenden */
.pet-cell.r-rare, .pet-active.r-rare { border-color: #4f9dd8; } .pet-cell.r-rare .pet-cell-rar { color: #2f7bb3; }
.pet-cell.r-epic, .pet-active.r-epic { border-color: #a06bd6; } .pet-cell.r-epic .pet-cell-rar { color: #7742ad; }
.pet-cell.r-legend, .pet-active.r-legend { border-color: #f0a53a; } .pet-cell.r-legend .pet-cell-rar { color: #c98a1a; }
.pet-cell.r-myth, .pet-active.r-myth { border-color: #e2557a; box-shadow: 0 0 0 1px rgba(226,85,122,.4); } .pet-cell.r-myth .pet-cell-rar { color: #d13c66; }

/* Reveal in der Truhen-Animation */
.pet-reveal { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 22px; border-radius: 20px;
  background: rgba(255,255,255,.06); animation: lootPop .5s cubic-bezier(.3,1.5,.5,1); }
.pet-reveal-rar { font-size: .8rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #fff; opacity: .9; }
.pet-frame { width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; }
.pet-frame img { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); animation: petBob 2s ease-in-out infinite; }
.pet-reveal-name { font-size: 1.3rem; color: #fff; }
.pet-reveal-desc { font-size: .9rem; color: #ffe9a8; font-weight: 700; }
.pet-reveal.r-legend .pet-reveal-rar, .pet-reveal.r-legend .pet-reveal-name { color: #ffd873; }
.pet-reveal.r-myth .pet-reveal-rar, .pet-reveal.r-myth .pet-reveal-name { color: #ff9dbb; }

/* ═══════════ Batch 7: XP-Leiste · Gear-Filter · Verzaubern · Boss-Schild · Set-Komplett · Pet-Stufen ═══════════ */

/* XP-Leiste zur nächsten Lernstufe */
.adv-xp { display: flex; align-items: center; gap: 8px; margin: 8px auto 2px; max-width: 460px; padding: 4px 10px;
  background: rgba(0,0,0,.28); border-radius: 20px; }
.adv-xp-lbl { font-size: .72rem; font-weight: 800; color: #fff; white-space: nowrap; }
.adv-xp-bar { flex: 1; height: 9px; border-radius: 6px; background: rgba(255,255,255,.18); overflow: hidden; }
.adv-xp-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #7cc4ff, #b28bff); transition: width .4s; }
.adv-xp-num { font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.85); white-space: nowrap; }

/* Boss-Schild */
.adv-shield { font-size: .82rem; font-weight: 800; color: #8fd0ff; letter-spacing: 1px; margin-bottom: 2px;
  text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* Gear-Toolbar (Sortieren/Filter) */
.gear-toolbar { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
.gear-tb-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gear-tb-lbl { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); min-width: 64px; }
.gear-chip { font-size: .74rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; cursor: pointer;
  border: 1.5px solid var(--game-line, #e5dcc8); background: var(--game-panel-soft, #f6efdf); color: var(--ink-soft); transition: all .12s; }
.gear-chip:hover { border-color: var(--game-gold); }
.gear-chip.on { background: var(--game-gold, #f4b942); color: #fff; border-color: var(--game-gold); }
body.dark .gear-chip { background: var(--game-panel-soft, #211830); border-color: var(--line); color: var(--ink-soft); }
body.dark .gear-chip.on { color: #fff; }

/* Item verzaubern (✨-Button + +N-Badge) */
.inv-ench-btn { position: absolute; top: 5px; right: 5px; z-index: 3; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: .9rem; cursor: pointer;
  background: linear-gradient(135deg, #b28bff, #7c5bd6); color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: transform .12s; }
.inv-ench-btn:hover { transform: scale(1.18); }
.inv-ench-btn.maxed { background: var(--game-panel-soft, #e8dfcb); color: var(--ink-soft); cursor: default; }
.inv-ench-btn.maxed i { font-size: .5rem; font-weight: 900; font-style: normal; }
.inv-ench { position: absolute; bottom: -3px; right: -4px; font-size: .6rem; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, #b28bff, #7c5bd6); border-radius: 20px; padding: 1px 6px; box-shadow: 0 1px 3px rgba(0,0,0,.4); }

/* Set-Badge komplett */
.set-badge.full { border-color: var(--game-gold); background: linear-gradient(135deg, rgba(244,185,66,.28), rgba(178,139,255,.14));
  box-shadow: 0 4px 14px rgba(212,160,60,.34); }
.set-badge.full .set-bon { color: var(--game-gold, #c98a1a); font-weight: 800; }
.set-badge.full .set-cnt { color: var(--game-gold, #c98a1a); }

/* Haustier-Stufen (Modal) */
.pet-lv { position: absolute; bottom: -2px; right: -2px; font-size: .58rem; font-weight: 800; background: rgba(0,0,0,.62);
  color: #fff; padding: 0 5px; border-radius: 10px; }
.pet-cell-stars { font-size: .62rem; letter-spacing: 1px; color: var(--game-gold, #e0a41c); margin-top: 1px; }

/* ═══════════ Batch 8: Talentbaum (Punkte-Freischaltung) ═══════════ */
.skilltree-tree.big { max-width: 460px; aspect-ratio: 460 / 400; }
.st-points { text-align: center; font-size: .9rem; color: var(--ink); margin: 0 auto 4px; padding: 6px 14px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(244,185,66,.18), transparent); border: 1.5px solid var(--game-gold, #e9cf94); display: inline-block; }
.st-points b { color: var(--game-gold, #c98a1a); font-size: 1.05rem; }
.st-points small { color: var(--ink-soft); font-weight: 600; }
.skilltree-wrap { position: relative; }
.skilltree-wrap > .st-points { position: relative; left: 50%; transform: translateX(-50%); }

/* Freigeschaltete Passiv-Knoten (blau/grün gefüllt) */
.st-node.unlocked.done .st-node-ring { border-color: #4f9dd8; background: radial-gradient(circle at 32% 28%, #eaf6ff, #bfe0f7); }
.st-node.unlocked.done .st-node-tag { background: #4f9dd8; color: #fff; }
.st-node.unlocked.done .st-node-name { color: #2f7bb3; }
body.dark .st-node.unlocked.done .st-node-ring { background: radial-gradient(circle at 32% 28%, #1e3346, #16283a); }
body.dark .st-node.unlocked.done .st-node-name { color: #8fd0ff; }

/* Freigeschalteter Fokus-Knoten (lila), aktiv = gold (nutzt .active) */
.st-node.fokus:not(.active) .st-node-ring { border-color: #a06bd6; background: radial-gradient(circle at 32% 28%, #f4ecff, #d9c2f5); }
.st-node.fokus:not(.active) .st-node-tag { background: #8c5bd0; color: #fff; }
.st-node.fokus:not(.active) .st-node-name { color: #7742ad; }
body.dark .st-node.fokus:not(.active) .st-node-ring { background: radial-gradient(circle at 32% 28%, #33244a, #241832); }
body.dark .st-node.fokus:not(.active) .st-node-name { color: #d4b3f5; }

/* „Verfügbar zum Freischalten" hebt sich ab (grün pulsierend, Kosten-Tag) */
.st-node.avail .st-node-tag { background: var(--game-green, #5b9e35); color: #fff; }
.st-node.locked { cursor: not-allowed; }

/* ═══════════ Batch 9: Gegner-Formationen (Gruppen & Boss-Handlanger) ═══════════ */

/* Arena: mehrere Gegner nebeneinander */
.adv-enemy-imgs { display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.adv-enemy.group .adv-enemy-img { width: clamp(78px, 20vw, 150px); }
.adv-enemy-img.is-side { width: clamp(70px, 17vw, 130px); opacity: .96; align-self: flex-end; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); }
.adv-enemy.boss .adv-enemy-img.is-side { width: clamp(80px, 20vw, 150px); }   /* Boss-Handlanger etwas kleiner als Boss */
.adv-enemy.boss .adv-enemy-img.is-boss { z-index: 2; }

/* Kampf-HUD: Gruppe/Handlanger im sprite-stage */
.sprite-stage.enemy.group { width: auto; min-width: 170px; display: flex; align-items: flex-end; justify-content: center; gap: 6px; }
.sprite-stage.enemy.group .bhud-enemy-img { width: 96px; height: 96px; }
.sprite-stage.enemy .bhud-enemy-img.is-side { width: 82px; height: 82px; opacity: .95; }

/* „Gruppe/Handlanger"-Hinweis im Namen bleibt über die adv-enemy-name/bhud-ename */

/* ═══════════ Batch 10: Champion-Gegner + Raum-Mini-Map ═══════════ */

/* Champion (Elite): gold-schimmernd */
.adv-enemy.elite .adv-enemy-img, .sprite-stage.enemy.elite .bhud-enemy-img {
  animation: eliteShimmer 1.6s ease-in-out infinite;
}
@keyframes eliteShimmer {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255,205,80,.75)) drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
  50%      { filter: drop-shadow(0 0 20px rgba(255,228,130,1)) drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
}
.adv-enemy.elite .adv-enemy-name, .bhud-enemy .bhud-ename.elite { color: #ffcf5a; text-shadow: 0 0 8px rgba(255,205,80,.6); }
@media (prefers-reduced-motion: reduce) { .adv-enemy.elite .adv-enemy-img, .sprite-stage.enemy.elite .bhud-enemy-img { animation: none; } }

/* Raum-Mini-Map in der Arena-Kopfzeile */
.adv-rooms { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 4px auto 0; max-width: 480px; font-size: .72rem; }
.adv-rooms.bar { gap: 10px; }
.room-lbl { color: #fff; font-weight: 700; opacity: .92; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.room-lbl b { color: #ffe08a; }
.room-dots { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.room-dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.26); display: flex; align-items: center; justify-content: center; font-size: 9px; transition: all .2s; }
.room-dot.done { background: var(--game-green, #7cc44e); }
.room-dot.cur { background: var(--game-gold, #f4b942); width: 17px; height: 17px; font-size: 11px; box-shadow: 0 0 7px rgba(244,185,66,.8); }
.room-dot.boss { background: transparent !important; width: auto; height: auto; font-size: 15px; box-shadow: none; }
.room-bar { flex: 1; min-width: 120px; height: 8px; border-radius: 6px; background: rgba(255,255,255,.22); overflow: hidden; }
.room-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--game-green, #7cc44e), var(--game-gold, #f4b942)); transition: width .4s; }

/* ═══════════ Batch 11: Mehrere Truhen öffnen + Welt-befreit-Popup ═══════════ */

/* Truhen-Anzahl-Auswahl */
.chest-choose { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.chest-choose .chest-n { min-width: 92px; padding: 12px 16px; font-size: 1rem; font-weight: 800; }

/* Sammel-Reveal */
.chest-reveal-h { font-size: 1.3rem; font-weight: 900; color: #fff; text-align: center; margin-bottom: 12px; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.loot-multi.bulk { max-height: 62vh; overflow-y: auto; gap: 10px; padding: 4px; }
.loot-multi.bulk .loot-reward.bulk { width: 120px; padding: 10px 8px; }
.loot-multi.bulk .loot-frame { width: 78px; height: 78px; }
.loot-multi.bulk .loot-frame img { width: 62px; height: 62px; }
.loot-multi.bulk .loot-name { font-size: .82rem; }
.loot-multi.bulk .loot-desc { font-size: .7rem; }
.bulk-none { color: #fff; opacity: .85; text-align: center; padding: 20px; }
.bulk-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }
.bulk-chip { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: .95rem; color: #fff;
  background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.28); border-radius: 20px; padding: 6px 14px; }
.bulk-chip img { width: 20px; height: 20px; }

/* „Welt befreit!"-Popup */
.world-clear-ov .adv-intro-card.world-clear { text-align: center; max-width: 400px; }
.wc-crown { font-size: 3.4rem; line-height: 1; margin-bottom: 4px; animation: wcCrown 1.8s ease-in-out infinite; }
@keyframes wcCrown { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
.adv-intro-card.world-clear h3 { font-size: 1.5rem; margin: 4px 0 6px; color: var(--game-gold, #d99a1e); }
.wc-reward { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.05rem; color: var(--ink);
  background: linear-gradient(135deg, rgba(244,185,66,.2), transparent); border: 1.5px solid var(--game-gold, #e9cf94);
  border-radius: 14px; padding: 8px 16px; margin: 8px 0; }
.wc-reward img { width: 22px; height: 22px; vertical-align: middle; }
.wc-next { font-size: .9rem; color: var(--ink-soft); margin: 6px 0 14px; }
@media (prefers-reduced-motion: reduce) { .wc-crown { animation: none; } }