/* ======================================================================
   Gemeinsame Grundlage für Wir und die Spiele-App (/shared/base.css)
   Farbwelten über CSS-Variablen (html[data-theme]), mobile first, Safe Areas.
   Glas für Karten, runde Formen, Quicksand + Caveat.
   App-eigene Styles liegen in app/style.css bzw. spiele/style.css.
   ====================================================================== */
/* ---------- Farbwelten ---------- */
:root, html[data-theme="rose"]{
  color-scheme: light;
  --bg1:#fff4f8; --bg2:#fde3ee; --bg3:#f8cfe2;
  --ink:#b8165a; --ink-soft:#c4648c; --ink-faint:#e3a3bf;
  --accent:#e0457b; --accent2:#f88fb5; --accent-ink:#fff;
  --glass:rgba(255,255,255,.58); --glass-strong:rgba(255,255,255,.8); --glass-border:rgba(255,255,255,.85);
  --shadow:224,69,123;
  --input-bg:#fff6fa; --input-ink:#a3134f; --placeholder:#d48aa9;
  --liquid1:#ff9cc2; --liquid2:#e0457b;
  --glow:#ff7aa8; --glow2:#ffc2d9;
  --paper:#fffaf5; --paper-line:#f5d3df; --paper-ink:#7a2348; --paper-margin:#f7a9c4;
  --chip:#fde3ee;
  --swatch:linear-gradient(135deg,#fde3ee,#f88fb5,#e0457b);
}
html[data-theme="gluehwein"]{
  color-scheme: dark;
  --bg1:#2e0815; --bg2:#3e0d1e; --bg3:#651129;
  --ink:#fde9e6; --ink-soft:#eca59d; --ink-faint:#b9727a;
  --accent:#e87d87; --accent2:#eca59d; --accent-ink:#3e0d1e;
  --glass:rgba(255,235,235,.08); --glass-strong:rgba(255,235,235,.14); --glass-border:rgba(255,220,220,.18);
  --shadow:10,0,4;
  --input-bg:rgba(20,2,8,.45); --input-ink:#fde9e6; --placeholder:#c98a90;
  --liquid1:#eca59d; --liquid2:#b4204a;
  --glow:#e87d87; --glow2:#9d0d2f;
  --paper:#fbefe9; --paper-line:#efcac2; --paper-ink:#4a0f22; --paper-margin:#e87d87;
  --chip:rgba(255,235,235,.1);
  --swatch:linear-gradient(135deg,#3e0d1e,#9d0d2f,#b4204a,#e87d87,#eca59d);
}
html[data-theme="mondnacht"]{
  color-scheme: dark;
  --bg1:#170425; --bg2:#210635; --bg3:#420D4B;
  --ink:#F5D5E0; --ink-soft:#c9a9dc; --ink-faint:#8f74a8;
  --accent:#7B337E; --accent2:#6667AB; --accent-ink:#fff;
  --glass:rgba(245,213,224,.08); --glass-strong:rgba(245,213,224,.14); --glass-border:rgba(245,213,224,.18);
  --shadow:5,0,12;
  --input-bg:rgba(10,2,20,.45); --input-ink:#F5D5E0; --placeholder:#a68cbd;
  --liquid1:#F5D5E0; --liquid2:#7B337E;
  --glow:#a98be0; --glow2:#7B337E;
  --paper:#f8eef3; --paper-line:#e4cde0; --paper-ink:#420D4B; --paper-margin:#c49ad0;
  --chip:rgba(245,213,224,.1);
  --swatch:linear-gradient(135deg,#210635,#420D4B,#7B337E,#6667AB,#F5D5E0);
}
html[data-theme="zuckerwatte"]{
  color-scheme: light;
  --bg1:#F4E7F8; --bg2:#F2DDDC; --bg3:#C3C7F4;
  --ink:#5d3470; --ink-soft:#86639a; --ink-faint:#b49ac4;
  --accent:#E3AADD; --accent2:#C8A8E9; --accent-ink:#45224f;
  --glass:rgba(255,255,255,.55); --glass-strong:rgba(255,255,255,.78); --glass-border:rgba(255,255,255,.85);
  --shadow:150,110,190;
  --input-bg:#fcf7fe; --input-ink:#5d3470; --placeholder:#a98bb8;
  --liquid1:#F6BCBA; --liquid2:#C8A8E9;
  --glow:#C8A8E9; --glow2:#F6BCBA;
  --paper:#fffafd; --paper-line:#ead8ef; --paper-ink:#5d3470; --paper-margin:#E3AADD;
  --chip:rgba(255,255,255,.6);
  --swatch:linear-gradient(135deg,#F4E7F8,#F6BCBA,#E3AADD,#C8A8E9,#C3C7F4);
}
/* Pfirsich (27.10.2026): warm, Koralle -> Pfirsich, sehr heller Hintergrund, eher weiße Karten */
html[data-theme="pfirsich"]{
  color-scheme: light;
  --bg1:#fffaf6; --bg2:#fff0e7; --bg3:#ffe1d2;
  --ink:#8c3b28; --ink-soft:#b46a54; --ink-faint:#e6b8a6;
  --accent:#f26d5b; --accent2:#f7a072; --accent-ink:#fff;
  --glass:rgba(255,255,255,.74); --glass-strong:rgba(255,255,255,.92); --glass-border:rgba(255,255,255,.96);
  --shadow:226,104,82;
  --input-bg:#fff8f3; --input-ink:#7c3020; --placeholder:#d49b87;
  --liquid1:#f7a072; --liquid2:#f26d5b;
  --glow:#f7a072; --glow2:#ffd4bf;
  --paper:#fffaf5; --paper-line:#f6dacb; --paper-ink:#6e2e1e; --paper-margin:#f3a48c;
  --chip:#ffece2;
  --swatch:linear-gradient(135deg,#fff0e7,#f7a072,#f26d5b);
}
/* Lavendel (27.10.2026): Lila -> Pink, heller lila Hintergrund, Glas mit leicht lila Rand */
html[data-theme="lavendel"]{
  color-scheme: light;
  --bg1:#f8f2ff; --bg2:#efe4ff; --bg3:#e2cffd;
  --ink:#5a2a8a; --ink-soft:#8a5db6; --ink-faint:#c7aae6;
  --accent:#b46bff; --accent2:#ff7ab8; --accent-ink:#fff;
  --glass:rgba(255,255,255,.6); --glass-strong:rgba(255,255,255,.84); --glass-border:rgba(212,182,255,.75);
  --shadow:140,80,210;
  --input-bg:#fbf7ff; --input-ink:#4f2380; --placeholder:#a98cd0;
  --liquid1:#ff7ab8; --liquid2:#b46bff;
  --glow:#c98bff; --glow2:#ffb8da;
  --paper:#fffbff; --paper-line:#eadcf7; --paper-ink:#4f2380; --paper-margin:#d3a5ef;
  --chip:#f1e6ff;
  --swatch:linear-gradient(135deg,#efe4ff,#b46bff,#ff7ab8);
}

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{
  font-family:'Quicksand',system-ui,sans-serif;color:var(--ink);
  background:linear-gradient(165deg,var(--bg1) 0%,var(--bg2) 55%,var(--bg3) 100%);
  overflow:hidden;user-select:none;-webkit-user-select:none;
  --top-h:calc(58px + env(safe-area-inset-top));
  --nav-h:calc(70px + env(safe-area-inset-bottom));
}
button{font-family:inherit;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}

.bg-hearts{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bg-hearts span{position:absolute;bottom:-40px;opacity:.28;animation:floatUp linear infinite}
@keyframes floatUp{to{transform:translateY(-115vh) rotate(25deg)}}

/* Glas – nur für Karten und Herzen */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--glass-border);
  box-shadow:0 10px 30px rgba(var(--shadow),.14), inset 0 1px 0 rgba(255,255,255,.35);
}

/* ---------- Bildschirme ---------- */
.screen{
  position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16px;opacity:0;pointer-events:none;transition:opacity .45s ease,transform .45s ease;z-index:1;
}
.screen.active{opacity:1;pointer-events:auto}
.page{
  justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:calc(var(--top-h) + 10px) max(16px,env(safe-area-inset-right)) calc(var(--nav-h) + 24px) max(16px,env(safe-area-inset-left));
  transform:translateY(10px);
}
.page.active{transform:none}
.page > *{width:100%;max-width:440px;flex-shrink:0}

/* ---------- Oben: Avatar + Titel ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:30;height:var(--top-h);
  padding:env(safe-area-inset-top) 16px 0;display:flex;align-items:center;gap:12px;
  background:linear-gradient(var(--bg1),rgba(0,0,0,0));
  opacity:0;pointer-events:none;transition:opacity .4s;
}
.topbar h1{flex:1;text-align:center;font-size:18px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-spacer{width:44px;flex-shrink:0}
/* Kopf: links Avatar + Sync-Herz, rechts gleich breit (z. B. Coins im Spielebereich) -> Titel bleibt mittig */
.top-left,.top-right{flex:0 0 98px;display:flex;align-items:center;gap:8px;min-width:0}
.top-right{justify-content:flex-end}
.topbar h1{min-width:0}
@media (max-width:360px){.topbar{gap:8px;padding-left:12px;padding-right:12px}.topbar h1{font-size:16px}}
body.in-app .topbar{opacity:1;pointer-events:auto}

/* ---------- Unten: Navigation ---------- */
.tabbar{
  position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));z-index:30;
  max-width:460px;margin:0 auto;height:66px;padding:0 6px;border-radius:33px;
  display:flex;align-items:center;justify-content:space-around;
  background:var(--glass-strong);
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--glass-border);box-shadow:0 12px 34px rgba(var(--shadow),.22);
  transform:translateY(140%);transition:transform .5s cubic-bezier(.2,.9,.3,1.1);
}
body.in-app .tabbar{transform:none}
.tab-btn{flex:1;min-width:0;height:62px;border:none;background:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink-soft)}
.tab-ico{position:relative;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:20px;transition:transform .25s,background .25s,box-shadow .25s}
.tab-lbl{font-size:10.5px;font-weight:700;letter-spacing:.1px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tab-btn.on{color:var(--ink)}
.tab-btn.on .tab-ico{background:linear-gradient(135deg,var(--accent2),var(--accent));transform:translateY(-3px) scale(1.06);
  box-shadow:0 6px 16px rgba(var(--shadow),.35)}
.tab-btn:active .tab-ico{transform:scale(.9)}
.nav-dot{position:absolute;top:2px;right:2px;width:10px;height:10px;border-radius:50%;background:#ff3b6b;border:2px solid var(--glass-strong)}

/* ---------- Avatare ---------- */
.avatar{flex-shrink:0;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent2),var(--accent)) center/cover no-repeat;color:var(--accent-ink);
  font-weight:700;box-shadow:0 4px 14px rgba(var(--shadow),.25),0 0 0 3px var(--glass-border);cursor:pointer;overflow:hidden}
.avatar.has{color:transparent}
.avatar.sm{width:42px;height:42px;font-size:17px}
.avatar.md{width:54px;height:54px;font-size:22px}
.avatar.lg{width:56px;height:56px;font-size:23px}
.avatar.xl{width:96px;height:96px;font-size:38px}

/* ---------- Karten, Knöpfe, Felder ---------- */
.card{border-radius:26px;padding:22px 18px;text-align:center}
.card h1{font-size:21px;font-weight:700;color:var(--ink)}
.hint{font-size:11px;letter-spacing:2px;color:var(--ink-soft);margin-top:6px;font-weight:700}
.err{min-height:18px;margin-top:6px;font-size:13px;color:var(--ink-soft);font-weight:600}
.mem-note{font-size:13px;font-weight:600;color:var(--ink-soft);line-height:1.4;text-align:left}
.mem-form{display:flex;flex-direction:column;gap:10px}
.mem-status{min-height:18px;font-size:13px;font-weight:600;color:var(--ink-soft);text-align:center}
.list-head{margin:22px 0 10px;font-size:14px;font-weight:700;color:var(--ink-soft);letter-spacing:.5px;text-transform:uppercase}

.mem-input{
  display:block;width:100%;min-height:50px;font-family:inherit;font-size:16px;font-weight:600;color:var(--input-ink);
  background:var(--input-bg);border:none;border-radius:16px;padding:13px 16px;outline:none;
  -webkit-appearance:none;appearance:none;
  box-shadow:inset 0 2px 7px rgba(var(--shadow),.18), inset 0 0 0 1px rgba(var(--shadow),.08);
  -webkit-user-select:text;user-select:text;transition:box-shadow .2s;
}
.mem-input::placeholder{color:var(--placeholder);opacity:1}
.mem-input:focus{box-shadow:inset 0 2px 7px rgba(var(--shadow),.2), 0 0 0 3px rgba(var(--shadow),.25)}
input[type="date"].mem-input,input[type="datetime-local"].mem-input{text-align:left;line-height:24px}
input[type="date"].mem-input::-webkit-date-and-time-value,input[type="datetime-local"].mem-input::-webkit-date-and-time-value{text-align:left}
textarea.mem-input{resize:none;line-height:1.45}

.mem-btn{
  position:relative;display:block;width:100%;height:52px;line-height:52px;border:none;border-radius:26px;
  background:linear-gradient(135deg,var(--accent2),var(--accent));color:var(--accent-ink);font-size:17px;font-weight:700;text-align:center;
  cursor:pointer;box-shadow:0 8px 20px rgba(var(--shadow),.3);transition:transform .15s;
}
.mem-btn:active{transform:scale(.96)}
.mem-btn:focus-visible,label.mem-btn:focus-within,.mem-input:focus-visible,.pack-btn:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}
.pack-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border:none;background:var(--glass-strong);color:var(--ink);font-weight:700;
  font-size:15px;padding:10px 18px;border-radius:22px;box-shadow:0 4px 14px rgba(var(--shadow),.16);cursor:pointer;transition:transform .15s}
.pack-btn:active{transform:scale(.95)}
.link-btn{border:none;background:none;font-size:13px;font-weight:700;color:var(--ink-soft);cursor:pointer;padding:8px;text-decoration:underline}
.logout{align-self:center;border:none;background:none;font-size:14px;font-weight:700;color:var(--ink-soft);cursor:pointer;padding:12px}
.chip-btn{border:none;background:var(--chip);color:var(--ink);font-size:13px;font-weight:700;border-radius:16px;padding:8px 12px;cursor:pointer;min-height:36px}

.row{display:flex;gap:10px;align-items:center}
.row > .mem-input{flex:1;min-width:0}
.row > .mem-btn{flex:1}
.emoji-input.mem-input{flex:0 0 64px;text-align:center;font-size:22px;padding:10px 6px}
.check{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left}
.add-card{display:flex;flex-direction:column;gap:12px;margin-top:14px;text-align:left}
.add-card h1{margin-bottom:2px;text-align:center}
.add-toggle{align-self:center;width:auto!important;margin:16px 0 0}
.mem-tools{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}

.switch{-webkit-appearance:none;appearance:none;flex-shrink:0;width:52px;height:30px;border-radius:15px;background:var(--chip);
  box-shadow:inset 0 2px 5px rgba(var(--shadow),.2);position:relative;cursor:pointer;transition:background .2s;outline:none;margin:0}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .2s}
.switch:checked{background:linear-gradient(135deg,var(--accent2),var(--accent))}
.switch:checked::after{transform:translateX(22px)}
.switch:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}

/* ---------- Unterseiten-Kopf ---------- */
.sub-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sub-head h2{font-size:22px;color:var(--ink)}
.back-btn,.folder-btn{width:44px;height:44px;border-radius:50%;border:none;background:var(--glass-strong);color:var(--ink);font-size:20px;
  box-shadow:0 4px 14px rgba(var(--shadow),.18);cursor:pointer;flex-shrink:0}
.folder-btn{margin-left:auto}
.back-btn:active,.folder-btn:active{transform:scale(.92)}

/* ---------- Login ---------- */
.lock-card{width:100%;max-width:340px;padding:28px 22px 22px}
.lock-heart{font-size:46px;animation:beat 1.8s ease-in-out infinite}
.login-form{margin-top:18px}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(1)}45%{transform:scale(1.12)}}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.3)}100%{transform:scale(1)}}

/* ---------- Herzfarbe ---------- */
.heart-colors{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:10px;justify-items:center}
.hc-btn{position:relative;width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;background:var(--c);
  box-shadow:0 4px 10px rgba(var(--shadow),.22),inset 0 -3px 6px rgba(0,0,0,.12),inset 0 3px 6px rgba(255,255,255,.35);transition:transform .15s}
.hc-btn:active{transform:scale(.9)}
.hc-btn.on{box-shadow:0 0 0 3px var(--card,#fff),0 0 0 6px var(--c),0 4px 12px rgba(var(--shadow),.3)}
.hc-btn.on::before{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.hc-btn.taken{filter:grayscale(.75);opacity:.45;cursor:not-allowed}
.hc-av{position:absolute;right:-6px;bottom:-6px;width:22px!important;height:22px!important;min-width:0;font-size:10px!important;
  border:2px solid #fff;filter:none}
@media (max-width:360px){.heart-colors{gap:8px}.hc-btn{width:38px;height:38px}}

/* ---------- Listen-Zeilen ---------- */
.dates{display:flex;flex-direction:column;gap:10px}
.date{position:relative;display:flex;align-items:center;gap:14px;border-radius:20px;padding:13px 14px;
  background:var(--glass);border:1px solid var(--glass-border);box-shadow:0 6px 18px rgba(var(--shadow),.1)}
.date .ico{font-size:26px;flex-shrink:0}
.date > div{flex:1;min-width:0}
.date b{display:block;color:var(--ink);font-size:15px}
.date div span{font-size:14px;font-weight:600}
.date em,.date small{display:block;font-style:normal;font-size:12px;color:var(--ink-soft);font-weight:600;margin-top:2px}
.del-x{width:34px;height:34px;border-radius:50%;border:none;background:var(--chip);color:var(--ink-soft);font-size:13px;font-weight:700;cursor:pointer;flex-shrink:0}
.del-x:active{transform:scale(.92)}
.empty-note{grid-column:1/-1;text-align:center;font-size:14px;font-weight:600;color:var(--ink-soft);padding:22px 0}

/* ---------- Übersichts-Kacheln + Auswahl-Zeilen ---------- */
.hub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.hub-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;border-radius:22px;padding:16px 14px;cursor:pointer;min-height:122px;transition:transform .15s}
.hub-card:active{transform:scale(.96)}
.hub-card .ico{font-size:30px;margin-bottom:4px}
.hub-card b{font-size:16px;color:var(--ink)}
.hub-card small{font-size:12px;font-weight:600;color:var(--ink-soft);line-height:1.3}
.opt{width:100%;display:flex;align-items:center;gap:14px;border-radius:20px;padding:14px 16px;text-align:left;cursor:pointer;
  background:var(--glass);border:1px solid var(--glass-border);box-shadow:0 6px 18px rgba(var(--shadow),.1);transition:transform .15s}
.opt:active{transform:scale(.97)}
.opt .ico{font-size:28px}
.opt b{display:block;font-size:16px;color:var(--ink)}
.opt small{font-size:12px;color:var(--ink-soft);font-weight:600}
.opt .lock-note{display:block;font-size:12px;color:var(--ink-soft);font-weight:600;margin-top:2px}
.opt.locked{opacity:.65;cursor:default}
.opt-new{margin-top:10px;background:transparent;border:2px dashed var(--ink-faint);box-shadow:none}
.opt.fresh{animation:fresh 1.2s ease-in-out 3}
@keyframes fresh{0%,100%{transform:scale(1)}50%{transform:scale(1.04);box-shadow:0 10px 30px rgba(var(--shadow),.35)}}

/* ---------- Umschalter ---------- */
.segmented{display:flex;padding:4px;border-radius:24px;background:var(--glass);border:1px solid var(--glass-border);margin-bottom:14px}
.seg{flex:1;height:42px;border:none;border-radius:20px;background:none;font-size:15px;font-weight:700;color:var(--ink-soft);cursor:pointer;transition:background .25s,color .25s}
.seg.on{background:linear-gradient(135deg,var(--accent2),var(--accent));color:var(--accent-ink);box-shadow:0 4px 12px rgba(var(--shadow),.25)}

/* ---------- Einstellungen ---------- */
.set-card{margin-bottom:14px;text-align:left;display:flex;flex-direction:column;gap:12px}
.set-card h3{font-size:16px;font-weight:700}
.profile-card{flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px}
.profile-info{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.profile-info b{font-size:20px}
.profile-card .mem-status{flex-basis:100%;text-align:left}
.theme-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.swatch{display:flex;flex-direction:column;align-items:center;gap:6px;border:none;background:none;cursor:pointer;font-size:12px;font-weight:700;color:var(--ink-soft)}
.swatch i{width:56px;height:56px;border-radius:50%;box-shadow:0 6px 14px rgba(var(--shadow),.2),inset 0 0 0 2px rgba(255,255,255,.5);transition:transform .2s}
.swatch[data-theme="rose"] i{background:linear-gradient(135deg,#fde3ee,#f88fb5,#e0457b)}
.swatch[data-theme="gluehwein"] i{background:linear-gradient(135deg,#3e0d1e,#9d0d2f,#b4204a,#e87d87,#eca59d)}
.swatch[data-theme="mondnacht"] i{background:linear-gradient(135deg,#210635,#420D4B,#7B337E,#6667AB,#F5D5E0)}
.swatch[data-theme="zuckerwatte"] i{background:linear-gradient(135deg,#F4E7F8,#F6BCBA,#E3AADD,#C8A8E9,#C3C7F4)}
.swatch[data-theme="pfirsich"] i{background:linear-gradient(135deg,#fff0e7,#f7a072,#f26d5b)}
.swatch[data-theme="lavendel"] i{background:linear-gradient(135deg,#efe4ff,#b46bff,#ff7ab8)}
.swatch.on{color:var(--ink)}
.swatch.on i{transform:scale(1.06);box-shadow:0 0 0 3px var(--bg1),0 0 0 6px var(--accent),0 8px 18px rgba(var(--shadow),.3)}
.push-state{font-size:14px;font-weight:600;color:var(--ink-soft)}
.app-card{align-items:center}
.app-card .pack-btn{width:100%}

/* ---------- Bottom-Sheets ---------- */
.sheet-wrap{position:fixed;inset:0;z-index:55}
.sheet-backdrop{position:absolute;inset:0;background:rgba(20,4,14,.35);opacity:0;transition:opacity .3s}
.sheet-wrap.open .sheet-backdrop{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;max-height:88vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:12px;padding:10px 18px calc(18px + env(safe-area-inset-bottom));
  border-radius:28px 28px 0 0;background:var(--bg1);box-shadow:0 -12px 40px rgba(0,0,0,.25);
  transform:translateY(105%);transition:transform .35s cubic-bezier(.2,.9,.3,1)}
.sheet-wrap.open .sheet{transform:none}
.sheet-grip{width:44px;height:5px;border-radius:3px;background:var(--ink-faint);margin:0 auto 4px;opacity:.7}
.sheet-title{font-size:19px;text-align:center}

/* ---------- Update-Hinweis ---------- */
.update-bar{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 10px);z-index:60;transform:translate(-50%,-180%);
  width:calc(100% - 32px);max-width:360px;border:none;border-radius:25px;padding:14px 18px;
  background:linear-gradient(135deg,var(--accent2),var(--accent));color:var(--accent-ink);font-size:15px;font-weight:700;cursor:pointer;
  box-shadow:0 10px 28px rgba(var(--shadow),.35);transition:transform .5s cubic-bezier(.2,.9,.3,1.2)}
.update-bar.show{transform:translate(-50%,0)}

/* Herz-Explosion */
.burst{position:fixed;pointer-events:none;z-index:40;font-size:22px;animation:burst 1.4s ease-out forwards}
@keyframes burst{to{transform:translate(var(--x),var(--y)) scale(.4) rotate(var(--r));opacity:0}}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .bg-hearts{display:none}
}
@media (max-width:360px){.tab-lbl{font-size:9.5px}}

.sheet-x{position:absolute;top:10px;right:12px;width:40px;height:40px;border-radius:50%;border:none;background:var(--chip);color:inherit;font-size:16px;cursor:pointer;opacity:.85}
.set-card .mem-status:empty{display:none}

/* ---------- Feinschliff 26.10.2026: schmale Handys, Tastatur ---------- */
@media (max-width:400px){.tab-lbl{font-size:9.8px;letter-spacing:-.2px}}
/* Bottom-Sheets über der Bildschirmtastatur halten (--kb setzt ui.js aus visualViewport) */
.sheet{bottom:var(--kb,0px);max-height:calc(88vh - var(--kb,0px))}