:root{
  --bg:#120a07; --bg2:#1c110b; --card:#25160e; --card2:#311d12;
  --line:rgba(255,170,110,.12); --line2:rgba(255,170,110,.24);
  --tx:#FCEFE4; --tx2:#DDB9A0; --tx3:#9c7963;
  --ok:#7FD8A6; --warn:#FFC46B; --bad:#FF8E7A;
  --acc:#FF8A3D; --acc-d:#E2520F; --gold:#FFC46B;
  --fire:linear-gradient(135deg,#FFC46B 0%,#FF8A3D 45%,#E8460F 100%);
  --r:12px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Kein Markieren, Lupe oder Kontextmenü beim Antippen und Langdrücken (Immersion). Eingabefelder und .selectable bleiben auswählbar. */
html{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,[contenteditable],.selectable{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
img,svg{-webkit-user-drag:none}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--tx);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overscroll-behavior:none}
body{background:
  radial-gradient(120% 55% at 50% 112%,rgba(232,70,15,.38) 0%,rgba(255,138,61,.12) 45%,transparent 70%) fixed,
  var(--bg)}
[hidden]{display:none!important}
h1,h2,h3{font-weight:600;margin:0;letter-spacing:.01em}
h2{font-size:20px} h3{font-size:16px}
button{font:inherit;color:var(--tx);background:var(--card);border:1px solid var(--line2);
  border-radius:10px;padding:11px 14px;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;transition:background .15s,transform .1s,border-color .15s}
button:hover{background:var(--card2)}
button:active{transform:scale(.97)}
button:focus-visible,input:focus-visible,textarea:focus-visible,canvas:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
button.primary{background:var(--fire);color:#2a0f04;border-color:transparent;font-weight:700;
  box-shadow:0 6px 22px -6px rgba(255,110,40,.65),inset 0 1px 0 rgba(255,255,255,.35)}
button.primary:hover{filter:brightness(1.08) saturate(1.1);background:var(--fire)}
button.ghost{background:transparent}
button.subtle{color:var(--tx2);font-size:14px}
button.wide{width:100%}
.iconbtn{width:38px;height:38px;padding:0;border-radius:50%;background:transparent;border-color:var(--line)}
svg.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
input,textarea{font:inherit;color:var(--tx);background:var(--bg2);border:1px solid var(--line2);
  border-radius:10px;padding:11px 12px;width:100%}
textarea{resize:vertical;min-height:84px;font-family:ui-monospace,Consolas,monospace;font-size:13px}
input::placeholder,textarea::placeholder{color:var(--tx3)}

/* Splash */
.splash{position:fixed;inset:0;z-index:50;background:linear-gradient(#0c0605 0%,#1f0b06 55%,#4a1607 100%);overflow:hidden;cursor:pointer;
  transition:opacity .6s ease}
.splash.out{opacity:0;pointer-events:none}
.sky{position:absolute;inset:0;width:100%;height:100%}
.tw{animation:tw 2.4s ease-in-out infinite}
.tw:nth-child(3n){animation-delay:.8s}.tw:nth-child(4n){animation-delay:1.6s}
@keyframes tw{50%{opacity:.25}}
/* Splash mit Drache (1.14.5): Bühne der Art als Vollbild, Feuer aus dem Maul (Position je Art in app.js, Farben je Art hier) */
.splash{--f1:#E8460F;--f2:#FF8A3D;--f3:#FFE9B0;--s:.7}
.splash[data-sp="sturm"]{--f1:#6B4FE0;--f2:#B49CFF;--f3:#F2EBFF}
.splash[data-sp="frost"]{--f1:#3C9AE0;--f2:#8FD6F5;--f3:#F0FBFF}
.splash[data-sp="schatten"]{--f1:#B3162B;--f2:#F04E4E;--f3:#FFD8C9}
.splash[data-sp="moos"]{--f1:#5E9A1E;--f2:#B4D84A;--f3:#FFF6B8}
.sp-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;z-index:1;opacity:0;transform-origin:70% 48%}
.splash.go .sp-art{animation:sp-in .7s ease-out both,sp-zoom 5s ease-out both,sp-lit 1.7s .85s ease-in-out both}
.splash.has-dragon::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(rgba(10,4,2,.78) 0%,rgba(10,4,2,.25) 26%,transparent 42%,transparent 72%,rgba(10,4,2,.6) 100%)}
.splash.has-dragon .sky,.splash.has-dragon .flames{display:none}
.splash.has-dragon .splash-title{bottom:auto;top:calc(8vh + env(safe-area-inset-top,0px))}
.splash.has-dragon .splash-title .tap{position:fixed;left:0;right:0;bottom:calc(5vh + var(--safe-b))}
@keyframes sp-in{from{opacity:0}to{opacity:1}}
@keyframes sp-zoom{from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes sp-lit{0%,100%{filter:brightness(1)}35%,60%{filter:brightness(1.22) saturate(1.1)}}
.sp-breath{position:absolute;z-index:3;width:0;height:0;pointer-events:none}
.sp-glow{position:absolute;left:calc(-150px * var(--s) * 1.4);top:calc(-150px * var(--s) * 1.4);width:calc(300px * var(--s) * 1.4);height:calc(300px * var(--s) * 1.4);
  border-radius:50%;background:radial-gradient(circle,var(--f3) 0%,var(--f2) 25%,transparent 68%);mix-blend-mode:screen;opacity:0}
.splash.go .sp-glow{animation:sp-glow 1.7s .85s ease-in-out both}
@keyframes sp-glow{0%{opacity:0;transform:scale(.3)}30%,60%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.15)}}
.sp-jet{position:absolute;left:0;top:0}
.sp-jet i{position:absolute;left:calc(var(--z) / -2);top:calc(var(--z) / -2);width:var(--z);height:var(--z);border-radius:50%;opacity:0;filter:blur(calc(5px * var(--s)));
  background:radial-gradient(circle,var(--c1) 0%,var(--c2) 45%,transparent 70%)}
.splash.go .sp-jet i{animation:sp-puff var(--d) var(--w) cubic-bezier(.25,.6,.4,1) both}
@keyframes sp-puff{0%{opacity:0;transform:translate(0,0) scale(.25)}20%{opacity:.8}60%{opacity:.6}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.4)}}
.sp-sparks i{position:absolute;left:-2px;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--f3);box-shadow:0 0 8px 2px var(--f2);opacity:0}
.splash.go .sp-sparks i{animation:sp-spark var(--d,1.1s) var(--w,1s) ease-out both}
@keyframes sp-spark{0%{opacity:0;transform:translate(0,0) scale(1)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
.sp-egg{position:absolute;z-index:3;left:50%;top:43%;width:min(46vw,200px);margin-left:calc(min(46vw,200px) / -2);margin-top:-12vh;animation:sp-egg 2.8s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 26px rgba(255,140,50,.6))}
.sp-egg svg{display:block;width:100%;height:auto}
@keyframes sp-egg{from{transform:rotate(-3deg) translateY(2px)}to{transform:rotate(3deg) translateY(-6px)}}
html.calm .sp-breath{display:none}
html.calm .sp-art{opacity:1;animation:none!important}
.splash-title{position:absolute;left:0;right:0;bottom:calc(30vh + var(--safe-b));text-align:center}
.splash-title{z-index:3}
.splash-title h1{font-family:var(--serif);font-size:clamp(42px,12.5vw,64px);font-weight:600;letter-spacing:.05em;
  background:linear-gradient(180deg,#FFF1D6 0%,#FFC46B 40%,#FF8A3D 75%,#E8460F 100%);-webkit-background-clip:text;background-clip:text;
  color:transparent;filter:drop-shadow(0 0 18px rgba(255,120,40,.55));animation:rise 1.2s ease-out both}
.splash-title .tag{background:none;border:0;padding:0;border-radius:0;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);opacity:.8;margin:2px 0 0;animation:rise 1.2s .2s ease-out both}
.splash-title .tap{color:var(--tx);text-shadow:0 1px 8px #000;font-size:14px;margin:8px 0 0;animation:pulse 2s ease-in-out 1.2s infinite both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* Layout */
.app{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.screen{flex:1;display:flex;flex-direction:column;padding:16px 18px calc(24px + var(--safe-b))}
.screen-top{display:flex;justify-content:space-between;align-items:center;min-height:40px}
.eyebrow{font-size:13px;color:var(--tx3);text-transform:uppercase;letter-spacing:.12em}
.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.say{font-family:var(--serif);font-size:17px;line-height:1.5;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;margin:0;width:100%;min-height:52px;text-align:left}
.hint{font-size:13px;color:var(--tx3);margin:0;text-align:center}
.err{font-size:14px;color:var(--bad);min-height:20px;margin:4px 0 0;text-align:left}

/* Ei */
.egg{width:min(62vw,240px);aspect-ratio:160/175;padding:0;border:0;background:transparent;border-radius:50%}
.egg:hover{background:transparent}

/* Namensgebung */
.field{width:100%;text-align:left;display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px;color:var(--tx2)}
.sugs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.sugs button{padding:6px 12px;font-size:14px;border-radius:999px}
.portrait{width:min(70vw,260px);aspect-ratio:160/120}
.portrait svg{width:100%;height:100%;display:block;overflow:visible}
.portrait.big{width:min(82vw,300px);margin:0 auto}
@keyframes breathe{50%{transform:scaleY(1.025)}}

/* Main */
.main{flex:1;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.topbar{display:flex;align-items:center;gap:10px;padding:14px 18px 6px;position:sticky;top:0;background:var(--bg);z-index:5}
.who{flex:1;min-width:0}
.name{font-size:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{font-size:13px;color:var(--tx3)}
.chip{font-size:13px;padding:4px 11px;border-radius:999px;white-space:nowrap}
.chip.bad{background:rgba(240,149,149,.14);color:var(--bad)}
.chip.warn{background:rgba(239,159,39,.14);color:var(--warn)}
.chip.ok{background:rgba(93,202,165,.14);color:var(--ok)}
.views{flex:1;overflow-x:clip;padding:6px 18px calc(92px + var(--safe-b))}
.view{display:flex;flex-direction:column;gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.stats{display:flex;flex-direction:column;gap:12px}
.recommend{display:flex;flex-direction:column;gap:10px;border-color:var(--line2);background:linear-gradient(180deg,var(--card2),var(--card))}
.recommend .section-title{margin-bottom:4px}
.recommend p{margin:0;color:var(--tx2);font-size:14px;line-height:1.4}
.recommend button{min-height:48px}
.return-away{color:var(--tx2);font-size:14px;margin:14px 0 8px}
.return-changes{display:flex;flex-direction:column;gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:2px 12px;margin-bottom:14px}
.return-change{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;font-size:14px;color:var(--tx2)}
.return-change+.return-change{border-top:1px solid var(--line)}
.return-change b{color:var(--tx);font-variant-numeric:tabular-nums;white-space:nowrap}
.return-gift{border:1px solid var(--line2);background:var(--card);border-radius:var(--r);padding:12px;margin-bottom:14px}
.return-gift p{font-size:14px;color:var(--tx2);line-height:1.4;margin:0 0 10px}
#return-popup{padding-bottom:calc(16px + var(--safe-b))}
#return-popup .say{margin-top:12px;font-size:15px;min-height:0}
#return-popup #return-ok{min-height:48px}
.stat-row{display:flex;justify-content:space-between;font-size:14px;color:var(--tx2);margin-bottom:5px}
.stat-row b{color:var(--tx);font-weight:600;font-variant-numeric:tabular-nums}
.bar{height:8px;border-radius:4px;background:var(--bg2);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:4px;transition:width .45s ease}
.section-title{font-size:13px;color:var(--tx3);text-transform:uppercase;letter-spacing:.1em;font-weight:500;margin:0 0 8px}
.traits{display:flex;flex-wrap:wrap;gap:6px}
.traits span{font-size:13px;padding:5px 11px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--tx2)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.metric{background:var(--card);border-radius:10px;padding:10px 12px}
.metric small{display:block;font-size:12px;color:var(--tx3)}
.metric strong{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.plus{color:var(--ok)}.minus{color:var(--bad)}
.mini{display:flex;gap:12px;align-items:center}
.mini .portrait{width:110px;flex:none}
.mini .say{font-size:15px}
.act-group{margin-top:6px}
.act{display:flex;align-items:center;gap:12px;width:100%;text-align:left;justify-content:flex-start;
  padding:12px 14px;margin-bottom:8px;border-color:var(--line)}
.act .ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--bg2);flex:none}
.act .ico svg.ic{width:20px;height:20px}
.act .txt{flex:1;display:flex;flex-direction:column}
.act .txt b{font-weight:600;font-size:15px}
.act .txt small{color:var(--tx3);font-size:13px}
.act .cd{font-size:12px;color:var(--tx3);font-variant-numeric:tabular-nums}
.act.locked{opacity:.5;cursor:default}
.act.locked:active{transform:none}

/* Flug */
.hud{display:flex;justify-content:space-between;font-size:14px;color:var(--tx2);font-variant-numeric:tabular-nums}
.hud>span{display:inline-flex;align-items:center;gap:5px}
.hud svg.ic{width:16px;height:16px}
#cv{width:100%;aspect-ratio:340/440;display:block;align-self:center;border-radius:var(--r);background:var(--bg2);
  touch-action:pan-y;cursor:pointer;user-select:none;-webkit-user-select:none}
#cv.live{touch-action:none}
.result{display:flex;flex-direction:column;gap:10px}
.result-head{display:flex;justify-content:space-between;align-items:baseline}
.result-head strong{font-size:24px}
.rec{margin:-6px 0 0;font-size:13px;color:var(--ok);min-height:0}
.rec:empty{display:none}

/* Tabbar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid;grid-template-columns:repeat(5,1fr);
  max-width:480px;margin:0 auto;background:rgba(18,17,24,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:6px 8px calc(8px + var(--safe-b))}
.tab{flex-direction:column;gap:3px;background:transparent;border:0;font-size:12px;color:var(--tx3);padding:8px 4px;border-radius:10px}
.tab:hover{background:transparent;color:var(--tx2)}
.tab svg.ic{width:22px;height:22px}
.tab[aria-selected="true"]{color:var(--acc);font-weight:600}

/* Modal */
.modal{position:fixed;inset:0;z-index:40;background:rgba(5,5,10,.66);display:flex;align-items:flex-end;
  justify-content:center;padding:16px;animation:fade .2s ease}
@media(min-width:560px){.modal{align-items:center}}
@keyframes fade{from{opacity:0}}
.modal-card{background:var(--bg2);border:1px solid var(--line2);border-radius:18px;padding:20px;width:100%;
  max-width:440px;max-height:calc(100dvh - 32px);overflow:auto;animation:up .3s ease}
@keyframes up{from{transform:translateY(20px);opacity:0}}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
#exp-hint{padding-bottom:calc(16px + var(--safe-b))}
#exp-hint .modal-card{background:linear-gradient(160deg,#3a2115,#1c100b);border-color:rgba(255,174,91,.5);border-radius:22px}
#exp-hint h2{font:600 27px/1.2 var(--serif);color:#ffe7bd}
#exp-hint .lead{font-size:16px;line-height:1.5;margin:14px 0 20px}
#exp-hint .modal-actions{display:flex;flex-direction:column;gap:10px}
#exp-hint .modal-actions button{min-height:48px}
.lead{color:var(--tx2);margin:10px 0 14px}
.info-list{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:12px}
.info-list li{display:flex;gap:12px;align-items:flex-start}
.info-list li>svg.ic{width:20px;height:20px;margin-top:2px;color:var(--acc);flex:none}
.info-list b{display:block;font-weight:600}
.info-list span{color:var(--tx2);font-size:14px}
.fine{font-size:12px;color:var(--tx3);margin:0 0 16px}
.bk-sec{margin:16px 0 8px}
#backup .modal-actions{margin-bottom:6px}
#backup .fine{margin:0 0 10px}
/* Cloud-Sicherung (seit 1.12.0) */
#cloud .modal-actions{margin-bottom:6px}
#cloud .fine{margin:0 0 10px}
.row+button.rowbtn{border-top:1px solid var(--line)}
.cd-code{font:600 clamp(14px,4.5vw,19px)/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:center;color:var(--gold);background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:12px 8px;margin:0 0 10px;overflow-wrap:anywhere}
.cd-note{font-size:14px;color:var(--tx);background:var(--card2);border-left:3px solid var(--acc);border-radius:8px;padding:10px 12px;margin:0 0 10px}
.cd-detail{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;user-select:text}
.cd-warn{border:1px solid var(--line2);border-radius:12px;padding:10px 12px;margin:0 0 12px;background:var(--card2)}
.cd-warn p{margin:0 0 8px}
#cd-in{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-transform:uppercase}
#cd-versions{margin:0 0 12px}
.cd-short{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--tx2);margin:0 0 12px}
.cd-short>svg.ic{width:20px;height:20px;flex:none;color:var(--acc);margin-top:1px}
.linkbtn{display:inline;min-height:0;padding:0;border:0;background:none;color:var(--acc);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.linkbtn:hover{background:none}
.hatch-restore{margin:4px 0 0;text-align:left}
.hatch-restore .section-title{margin:0 0 4px}
.hatch-restore .fine{margin:0 0 10px}
.hr-row{display:flex;gap:8px}
.hr-row input{flex:1 1 0;min-width:0;min-height:44px;padding:8px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;text-transform:uppercase}
.hr-row input::placeholder{font-size:11px;letter-spacing:0}
.hr-row button{min-height:44px;padding:0 16px;flex:none}
.hatch-restore .err:empty{min-height:0;margin:0}
.hatch-restore .linkbtn{font-size:14px;margin-top:8px}
.ci-hero{display:flex;justify-content:center;margin:2px 0 8px}
.ci-hero svg.ic{width:56px;height:56px;color:var(--acc);filter:drop-shadow(0 0 12px var(--acc))}
html.calm .ci-hero svg.ic{filter:none}
.lang-switch{display:flex;gap:0;margin:0 0 14px;border:1px solid var(--line2);border-radius:999px;overflow:hidden;width:max-content;max-width:100%}
.lang-switch button{border:0;border-radius:0;background:transparent;padding:7px 18px;font-size:14px;color:var(--tx2)}
.lang-switch button+button{border-left:1px solid var(--line2)}
.lang-switch button[aria-pressed="true"]{background:linear-gradient(180deg,var(--acc),var(--acc-d));color:#1a0b04;font-weight:600}
.fly-mode{align-self:center;margin:0}
.fly-mode button svg.ic{width:14px;height:14px}
.fly-mode button.locked{opacity:.6}
.fly-mode-info{text-align:center;margin:0}
.ios-box{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line2);
  border-radius:12px;padding:12px 14px;margin:0 0 14px}
.ios-box>i{color:var(--acc);flex:none;margin-top:1px}
.ios-box>div{flex:1}
.ios-box b{display:block;font-weight:600}
.ios-box span{color:var(--tx2);font-size:14px}
.ios-box em{font-style:normal;color:var(--gold)}
.ios-box .iconbtn{width:32px;height:32px;flex:none}
#view-drache>.ios-box{margin:0}
.modal-actions{display:flex;flex-direction:column;gap:8px}

.toast{position:fixed;left:50%;bottom:calc(96px + var(--safe-b));transform:translate(-50%,20px);opacity:0;
  background:var(--card2);border:1px solid var(--line2);padding:9px 16px;border-radius:999px;font-size:14px;
  pointer-events:none;transition:.25s;z-index:60;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .embers{display:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Flammen */
.flames{position:absolute;left:-5%;right:-5%;bottom:-2px;height:34vh;z-index:2;pointer-events:none}
.flames svg{position:absolute;bottom:0;width:100%;height:100%}
.fl{transform-box:fill-box;transform-origin:50% 100%;animation:flick 1.6s ease-in-out infinite alternate}
.fl:nth-child(2n){animation-duration:1.15s;animation-delay:-.4s}
.fl:nth-child(3n){animation-duration:1.9s;animation-delay:-.9s}
@keyframes flick{0%{transform:scaleY(1) skewX(0)}35%{transform:scaleY(1.12) skewX(-3deg)}70%{transform:scaleY(.92) skewX(2deg)}100%{transform:scaleY(1.06) skewX(-1deg)}}
.flames .glow{position:absolute;left:0;right:0;bottom:0;height:60%;background:radial-gradient(60% 100% at 50% 100%,rgba(255,150,60,.55),transparent 70%)}

/* Funkenflug */
.embers{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.splash .embers{position:absolute;z-index:2}
.embers i{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:#FFC46B;
  box-shadow:0 0 8px 2px rgba(255,138,61,.8);opacity:0;animation:ember linear infinite}
@keyframes ember{0%{transform:translate(0,0) scale(1);opacity:0}10%{opacity:1}
  100%{transform:translate(var(--dx,20px),-105vh) scale(.3);opacity:0}}
.app{position:relative;z-index:1}

/* Feuerakzente in der App */
.topbar{background:linear-gradient(var(--bg) 70%,transparent)}
.name{background:var(--fire);-webkit-background-clip:text;background-clip:text;color:transparent}
.say{border-color:var(--line2);background:linear-gradient(180deg,var(--card2),var(--card))}
.card,.metric{border:1px solid var(--line)}
.eyebrow,.section-title{color:var(--acc)}
.act:hover .ico{background:rgba(255,138,61,.16);color:var(--acc)}
.act .ico{color:var(--gold)}
.tabbar{background:rgba(18,10,7,.92);border-top-color:var(--line2)}
.tab[aria-selected="true"] svg.ic{filter:drop-shadow(0 0 6px rgba(255,138,61,.7))}
.info-list li>svg.ic{color:var(--acc)}
.modal-card{background:linear-gradient(180deg,#26150d,#170d08);border-color:var(--line2);
  box-shadow:0 -10px 60px -20px rgba(255,110,40,.45)}
#info-title{background:var(--fire);-webkit-background-clip:text;background-clip:text;color:transparent}
.metric strong.plus{color:var(--gold)}

/* Steckbrief Drachenart */
.species-card{width:100%;text-align:left;background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line2);border-left:3px solid var(--spc,var(--acc));border-radius:var(--r);padding:14px;
  display:flex;flex-direction:column;gap:10px}
.sp-head{display:flex;align-items:center;gap:12px}
.sp-dot{width:28px;height:28px;border-radius:50%;flex:none}
.sp-head small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.sp-head b{font-size:19px;font-weight:700;color:var(--spc,var(--tx))}
.sp-desc{margin:0;font-size:14px;color:var(--tx2);line-height:1.5}
.sp-tags{display:flex;flex-wrap:wrap;gap:6px}
.sp-tags span{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--bg2);border:1px solid var(--line);color:var(--tx2)}
.sp-perk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gold)}
.sp-perk b{font-weight:600}

/* Version & Changelog */
.splash-ver{position:absolute;right:16px;top:calc(14px + env(safe-area-inset-top,0px));z-index:4;font-size:11px;
  color:rgba(255,226,194,.75);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.verline{display:block;text-align:center;background:transparent;border:0;padding:6px;font-size:12px;color:var(--tx3);width:100%}
.verline:hover{background:transparent;color:var(--acc)}
.verline.in-modal{text-align:left;padding:0 0 10px;color:var(--acc);font-weight:600}
#cl-title{background:var(--fire);-webkit-background-clip:text;background-clip:text;color:transparent}
.cl-list{list-style:none;margin:14px 0 18px;padding:0;display:flex;flex-direction:column;gap:14px}
.cl-entry{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.cl-entry:first-child{border-color:var(--line2);background:linear-gradient(180deg,var(--card2),var(--card))}
.cl-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.cl-head b{font-weight:700}
.cl-head small{margin-left:auto;color:var(--tx3);font-size:12px}
.cl-new{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:rgba(255,138,61,.18);color:var(--acc)}
.cl-entry ul{margin:0;padding-left:18px;color:var(--tx2);font-size:14px;line-height:1.5}
.cl-entry li::marker{color:var(--acc)}

/* Mehr (Einstellungen) */
#view-mehr section{display:flex;flex-direction:column;gap:8px}
#view-mehr .section-title{margin:6px 0 0}
#view-mehr .fine{margin:0}
.rows{padding:0;overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:13px 14px;min-height:52px}
.row+.row{border-top:1px solid var(--line)}
.row .lbl{flex:1;min-width:0}
.row .lbl b{display:block;font-weight:500;font-size:16px}
.row .lbl small{display:block;font-size:13px;color:var(--tx3);line-height:1.35}
.row .val{color:var(--tx2);font-size:15px;text-align:right}
.row .lang-switch{margin:0}
.row .go{color:var(--tx3);font-size:20px}
button.rowbtn{width:100%;border:0;border-radius:0;background:transparent;text-align:left;justify-content:flex-start}
button.rowbtn:hover{background:var(--card2)}
button.rowbtn+button.rowbtn{border-top:1px solid var(--line)}
.switch{position:relative;width:48px;height:28px;border-radius:999px;padding:0;background:var(--bg2);border:1px solid var(--line2);flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--tx3);transition:transform .18s,background .18s}
.switch[aria-checked="true"]{background:rgba(255,138,61,.25);border-color:var(--acc)}
.switch[aria-checked="true"]::after{transform:translateX(20px);background:var(--fire)}
.exp-today{display:none}
.exp-trust{display:none}
button.danger{color:var(--bad);border-color:rgba(255,142,122,.35)}
button.primary.danger{color:#2a0f04}
#egg-confirm .lead{margin:10px 0 16px}
#ec-yes{color:var(--bad);border-color:rgba(255,142,122,.45)}

/* „Weniger Bewegung“ (eigene Wahl oder Geräteeinstellung) */
html.calm .embers{display:none}
html.calm *,html.calm *::before,html.calm *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}

/* Tal (Vale) */
#vale{display:flex;flex-direction:column;gap:12px}
.glutbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.glutbar .g{font-size:17px;font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums}
.vale-intro{margin:0;font-size:14px;color:var(--tx2)}
.vale-seg{margin:0;align-self:flex-start}
.ware{display:flex;gap:12px;align-items:center;padding:14px}
.ware+.ware{border-top:1px solid var(--line)}
.ware .ico{width:42px;height:42px;border-radius:12px;background:var(--card2);display:grid;place-items:center;color:var(--gold);flex:none}
.ware .t{flex:1;min-width:0}
.ware .t b{display:block;font-weight:600;font-size:15px}
.ware .t small{display:block;color:var(--tx3);font-size:13px;line-height:1.35}
.ware .have{font-size:12px;color:var(--tx3)}
.ware .acts{display:flex;flex-direction:column;gap:6px;align-items:stretch}
button.buy{padding:8px 12px;font-size:14px;white-space:nowrap}
button.buy:disabled{opacity:.5;cursor:default}
button.buy.no{opacity:.55}
button.buy.use{background:transparent;color:var(--gold);border-color:var(--line2)}
.album{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.find{aspect-ratio:1;flex-direction:column;gap:4px;padding:6px;text-align:center;font-size:12px;color:var(--tx2);background:var(--card);border:1px solid var(--line);border-radius:12px}
.find svg.ic{width:30px;height:30px;color:var(--gold)}
.find.locked{border-style:dashed;color:var(--tx3)}
.find.locked svg.ic{color:var(--tx3)}
.find.sel{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.find .p{color:var(--warn);font-weight:600}
.find-info{display:flex;flex-direction:column;gap:8px}
.find-info .fine,.find-info .say{margin:0}
.find-info .say{font-size:15px}
.album-head b{font-weight:600}
.tab{position:relative}
.new-dot{position:absolute;top:6px;left:calc(50% + 10px);width:9px;height:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.hud #h-shield{color:var(--gold)}

/* Willkommens-Splash für Neuerungen (z. B. beim ersten Betreten des Tals) */
.welcome{position:fixed;inset:0;z-index:45;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;padding:18px 18px calc(24px + var(--safe-b));
  background:linear-gradient(#0c0605 0%,#1f0b06 55%,#4a1607 100%);animation:wlfade .5s ease both}
@keyframes wlfade{from{opacity:0}}
.welcome .embers{position:absolute;z-index:2}
.wl-sun{position:absolute;left:50%;top:30%;width:min(78vw,340px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,196,107,.95) 0%,rgba(255,138,61,.55) 32%,rgba(232,70,15,.18) 58%,transparent 72%);
  filter:blur(2px);animation:wlsun 5s ease-in-out infinite alternate}
@keyframes wlsun{from{transform:translate(-50%,-46%) scale(.94);opacity:.8}to{transform:translate(-50%,-54%) scale(1.06);opacity:1}}
.wl-hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:62%;z-index:1}
.wl-hills path{animation:wlhill 1.1s cubic-bezier(.2,.7,.2,1) both}
.wl-hills .h2{animation-delay:.15s}.wl-hills .h3{animation-delay:.3s}
@keyframes wlhill{from{transform:translateY(60px);opacity:0}}
.wl-card{position:relative;z-index:3;width:100%;max-width:440px;text-align:center;display:flex;flex-direction:column;gap:12px}
.wl-card>*{animation:wlrise .8s ease both}
.wl-eyebrow{margin:0;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);animation-delay:.5s}
.wl-card h2{font-family:var(--serif);font-size:clamp(40px,12vw,58px);font-weight:600;letter-spacing:.04em;line-height:1.05;animation-delay:.65s;
  background:linear-gradient(180deg,#FFF1D6 0%,#FFC46B 40%,#FF8A3D 75%,#E8460F 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,120,40,.55))}
.wl-card .lead{margin:0;animation-delay:.85s}
.wl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;text-align:left;animation:none}
.wl-list li{position:relative;padding:10px 14px 10px 38px;background:rgba(37,22,14,.82);border:1px solid var(--line2);border-radius:var(--r);font-size:14px;color:var(--tx2);
  animation:wlrise .7s ease both}
.wl-list li:nth-child(1){animation-delay:1.05s}.wl-list li:nth-child(2){animation-delay:1.25s}
.wl-list li::before{content:"";position:absolute;left:14px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;
  background:var(--fire);box-shadow:0 0 10px 2px rgba(255,138,61,.7);animation:wlglow 2.2s ease-in-out infinite alternate}
@keyframes wlglow{from{opacity:.55}to{opacity:1}}
#wl-ok{animation-delay:1.5s}
@keyframes wlrise{from{opacity:0;transform:translateY(16px)}}

/* Spielschleife: Wünsche und Mitbringsel (1.8.0) */
.loop{display:flex;flex-direction:column;gap:12px}
.loop:empty{display:none}
.loop-card{display:flex;flex-direction:column;gap:10px}
.loop-card .section-title{margin:0}
.loop-card .say{margin:0;font-size:15px}
.loop-card .fine{margin:0}
.adventure-card{border-color:var(--acc)}
.adventure-card p{margin:0;line-height:1.55;overflow-wrap:anywhere}
.adventure-card .adventure-eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx2)}
.adventure-route{display:flex;flex-direction:column;gap:5px}
.adventure-card button{min-height:48px;white-space:normal;line-height:1.4;padding:12px 14px;text-align:left}
.adventure-task{padding:10px 12px;border-left:3px solid var(--acc);background:rgba(255,196,107,.06);border-radius:0 8px 8px 0}
.flight-land{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.flight-land .section-title,.flight-land p{margin:0}
.flight-land select{width:100%;min-width:0;min-height:48px;font:inherit;color:var(--tx);background:var(--card);border:1px solid var(--line2);border-radius:10px;padding:10px}
.flight-land summary{min-height:48px;padding:12px 0;cursor:pointer}
.flight-land-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.land-item{min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;border:1px solid var(--line);border-radius:12px;text-align:center;overflow-wrap:anywhere}
.land-item .gear-ic{width:100%;height:auto;max-width:120px;aspect-ratio:1}
.land-item button.buy{width:100%;min-height:48px;white-space:normal}
.gift-card{border-color:var(--acc);box-shadow:0 0 22px -8px rgba(255,138,61,.6)}
.wish{position:relative;display:flex;flex-direction:column;gap:6px}
.wish-t{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;color:var(--tx2)}
.wish-ok{display:inline-flex;align-items:center;gap:5px;color:#FF8A3D;font-size:13px;white-space:nowrap}
.wish-ok svg.ic{width:14px;height:14px}
.wish .bar{height:6px}
/* Erfüllt und abgeholt: verbrannt statt durchgestrichen (Asche-Schrift, glimmender Balken) */
.wish.is-done .wish-t>span:first-child{color:#6f5647;text-shadow:0 0 1px rgba(0,0,0,.7),0 1px 4px rgba(232,70,15,.28)}
.wish.is-done .bar{background:#1e130e}
.wish.is-done .bar i{background:linear-gradient(90deg,#2a1c15,#4a3326 75%,#a8401a 96%,#FF8A3D)!important;animation:a-smoulder 3.2s ease-in-out infinite}
@keyframes a-smoulder{0%,100%{filter:brightness(.85)}50%{filter:brightness(1.25)}}
/* Gerade abgeholt: Zeile geht in Flammen auf */
.wish.burning .wish-t>span:first-child{animation:a-burntxt 1.7s ease-out both}
.wish.burning .wish-ok{animation:a-burnok 1.7s ease-out both}
.wish.burning .bar i{animation:a-burnbar 1.7s ease-out both}
.wish.burning::before,.wish.burning::after{content:"";position:absolute;left:-6px;right:-6px;bottom:-4px;height:170%;pointer-events:none;mix-blend-mode:screen;transform-origin:50% 100%;
  --fl:radial-gradient(ellipse 50% 100% at 50% 100%,rgba(255,241,214,.95) 0,rgba(255,196,107,.85) 20%,rgba(255,138,61,.6) 45%,rgba(232,70,15,0) 72%);
  background-image:var(--fl),var(--fl),var(--fl);background-repeat:repeat-x;background-position:0 100%,7px 100%,3px 100%;
  animation:a-flames 1.7s cubic-bezier(.3,.6,.4,1) both,a-flick .16s steps(2) infinite}
.wish.burning::before{background-size:17px 60%,23px 85%,37px 45%}
.wish.burning::after{background-size:29px 100%,13px 55%,41px 75%;animation-delay:.12s,0s}
@keyframes a-flames{0%{opacity:0;transform:scaleY(.1)}14%{opacity:1;transform:scaleY(.65)}42%{opacity:1;transform:scaleY(1)}72%{opacity:.75;transform:scaleY(.6)}100%{opacity:0;transform:scaleY(.05)}}
@keyframes a-flick{0%{background-position:0 100%,7px 100%,3px 100%}100%{background-position:6px 100%,0 100%,14px 100%}}
@keyframes a-burntxt{0%{color:var(--tx2);text-shadow:none}
  18%{color:#FFF1D6;text-shadow:0 0 6px #FFC46B,0 0 14px #FF8A3D}
  48%{color:#FF8A3D;text-shadow:0 -3px 10px #E8460F,0 0 4px #FFC46B}
  78%{color:#3d2a20;text-shadow:0 -6px 14px rgba(110,80,64,.55)}
  100%{color:#6f5647;text-shadow:0 0 1px rgba(0,0,0,.7),0 1px 4px rgba(232,70,15,.28)}}
@keyframes a-burnok{0%,40%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:none}}
@keyframes a-burnbar{0%{filter:brightness(2.4) saturate(1.4)}45%{filter:brightness(1.8)}100%{filter:brightness(.85)}}
.rec.gold{color:var(--gold)}

/* Pflege-Minispiele (1.8.1) */
.care-card{display:flex;flex-direction:column;gap:12px}
.care-card .lead{margin:0;min-height:24px}
.care-stage{position:relative;width:100%;aspect-ratio:160/120;border-radius:var(--r);background:radial-gradient(70% 60% at 50% 55%,rgba(255,138,61,.14),transparent 70%),var(--bg);border:1px solid var(--line);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.care-dragon{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.care-dragon svg{width:78%;height:auto;display:block;overflow:visible}
#care-targets{position:absolute;inset:0}
.care-stage .spot,.care-stage .spark{position:absolute;transform:translate(-50%,-50%);padding:0;border:0;border-radius:50%;cursor:pointer}
.care-stage .spot{width:42px;height:42px;background:radial-gradient(circle at 40% 35%,#4a3a34,#1a100c);box-shadow:0 0 0 2px rgba(0,0,0,.35);transition:transform .25s,opacity .25s}
.care-stage .spot.gone{transform:translate(-50%,-50%) scale(0);opacity:0}
.care-stage .spark{width:34px;height:34px;background:radial-gradient(circle,#FFF1D6 0%,#FFC46B 40%,#FF8A3D 75%,transparent 76%);box-shadow:0 0 16px 4px rgba(255,138,61,.8);transition:left .25s ease,top .25s ease;animation:sparkpulse .7s ease-in-out infinite alternate}
@keyframes sparkpulse{to{transform:translate(-50%,-50%) scale(1.18)}}
.care-bar{display:flex;align-items:center;gap:10px}
.care-bar .bar{flex:1;height:8px}
.care-bar i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#FF8A3D,#FFC46B);transition:width .2s}
.care-bar span{font-size:13px;color:var(--tx2);font-variant-numeric:tabular-nums;min-width:42px;text-align:right}

/* Animationen (1.8.2): lebendiger Drache, Berührung, Ei, Tab-Übergänge, Tutorial. Nur transform und opacity. */
/* Tab-Wechsel: Ansicht gleitet ein, Karten kommen gestaffelt */
.view.enter-r{animation:a-vin-r .28s cubic-bezier(.2,.8,.25,1) both}
.view.enter-l{animation:a-vin-l .28s cubic-bezier(.2,.8,.25,1) both}
@keyframes a-vin-r{from{opacity:0;transform:translateX(28px)}}
@keyframes a-vin-l{from{opacity:0;transform:translateX(-28px)}}
.view.enter-r>*,.view.enter-l>*{animation:a-rise .42s cubic-bezier(.2,.8,.25,1) both;animation-delay:calc(var(--i,0)*55ms)}
@keyframes a-rise{from{opacity:0;transform:translateY(14px)}}
.view.enter-r .portrait,.view.enter-l .portrait{animation:a-pop .55s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(var(--i,0)*55ms)}
@keyframes a-pop{from{opacity:0;transform:scale(.88)}}

/* Drache */
.dragon{width:100%;height:auto;display:block;overflow:visible}
.dragon *{transform-box:view-box}
.d-react{transform-origin:80px 112px}
.d-all{transform-origin:80px 112px;animation:a-breathe 3.4s ease-in-out infinite}
@keyframes a-breathe{50%{transform:scale(1.012,1.03)}}
.d-eye{animation:a-blink var(--blink,5s) infinite;animation-delay:var(--bd,1.3s)}
@keyframes a-blink{0%,92%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.07)}}
.d-lid{transition:transform .18s}
.d-pg{animation:a-look var(--look,8s) infinite}
@keyframes a-look{0%,58%,100%{transform:translate(0,0)}62%,70%{transform:translate(-2.6px,.6px)}74%,84%{transform:translate(2.6px,-.5px)}88%{transform:translate(0,0)}}
.d-wl{transform-origin:46px 64px;animation:a-wl 4.6s ease-in-out infinite}
.d-wr{transform-origin:114px 64px;animation:a-wr 4.6s ease-in-out infinite;animation-delay:.08s}
@keyframes a-wl{0%,68%,100%{transform:none}74%{transform:rotate(-6deg)}80%{transform:rotate(2deg)}86%{transform:none}}
@keyframes a-wr{0%,68%,100%{transform:none}74%{transform:rotate(6deg)}80%{transform:rotate(-2deg)}86%{transform:none}}
.d-tail{transform-origin:118px 88px;animation:a-tail 3.6s ease-in-out infinite}
@keyframes a-tail{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(8deg)}}
.d-flame{transform-origin:80px 30px;animation:a-flame 1.3s ease-in-out infinite}
@keyframes a-flame{0%,100%{transform:scale(1,1) skewX(0)}30%{transform:scale(1.06,1.14) skewX(-5deg)}65%{transform:scale(.95,.9) skewX(4deg)}}
.d-crys{animation:a-shimmer 6s ease-in-out infinite}
@keyframes a-shimmer{0%,82%,100%{opacity:1}90%{opacity:.5}}
.d-leafL{transform-origin:58px 42px;animation:a-leafl 4s ease-in-out infinite}.d-leafR{transform-origin:102px 42px;animation:a-leafr 4s ease-in-out infinite}
@keyframes a-leafl{50%{transform:rotate(-5deg)}}@keyframes a-leafr{50%{transform:rotate(5deg)}}
.d-brow{opacity:0;transition:opacity .15s}
.d-smile{opacity:0}.d-mouth0{transition:opacity .15s}.d-smile{transition:opacity .15s}
.d-glow{opacity:0;transition:opacity .35s}
.d-tw{opacity:0}
.d-belly{transform-origin:80px 96px}

/* Charakter je Art (Ruhezustand) */
.dragon[data-sp=sturm] .d-brow{opacity:1}
.dragon[data-sp=sturm] .d-react{animation:a-rumble 4.6s infinite}
@keyframes a-rumble{0%,86%,100%{transform:none}88%{transform:translateX(-1.2px)}90%{transform:translateX(1.2px)}92%{transform:translateX(-1px)}94%{transform:translateX(1px)}96%{transform:none}}
.dragon[data-sp=glut]{--blink:3.4s}
.dragon[data-sp=glut] .d-react{animation:a-fidget 2.6s infinite}
@keyframes a-fidget{0%,70%,100%{transform:none}78%{transform:translateY(-4px) scale(.98,1.04)}86%{transform:translateY(0) scale(1.03,.97)}92%{transform:none}}
.dragon[data-sp=glut] .d-flame{animation-duration:.8s}
.dragon[data-sp=frost]{--blink:9s;--look:11s}
.dragon[data-sp=schatten]{--blink:12s;--look:5s}
.dragon[data-sp=moos] .d-react{animation:a-sway 5s ease-in-out infinite}
@keyframes a-sway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}

/* Zustände */
.dragon[data-mood=hungry] .d-belly{animation:a-tummy 3.4s infinite}
@keyframes a-tummy{0%,80%,100%{transform:none}84%{transform:scale(1.06,.94)}88%{transform:scale(.97,1.05)}92%{transform:scale(1.05,.96)}96%{transform:none}}
.dragon[data-mood=hungry] .d-react{animation:a-restless 2.2s infinite}
@keyframes a-restless{0%,60%,100%{transform:none}70%{transform:translateX(-2px) rotate(-1deg)}80%{transform:translateX(2px) rotate(1deg)}90%{transform:none}}
.dragon[data-mood=hungry] .d-mouth0{transform:translateY(1px)}
.dragon[data-mood=sleepy] .d-lid{transform:scaleY(.3)}
.dragon[data-mood=sleepy] .d-all{animation:a-breathe 5.4s ease-in-out infinite}
.dragon[data-mood=sleepy] .d-react{animation:a-nod 5s ease-in-out infinite}
@keyframes a-nod{0%,100%{transform:rotate(-1deg)}45%{transform:rotate(5deg) translateY(2px)}55%{transform:rotate(5deg) translateY(2px)}80%{transform:rotate(-1.5deg)}}
.dragon[data-mood=sleepy] .d-eye{animation:none}
.dragon[data-mood=happy] .d-tail{animation-duration:1.2s}
.dragon[data-mood=happy] .d-tw{animation:a-tw 2.4s ease-in-out infinite}
.dragon[data-mood=happy] .d-smile{opacity:1}.dragon[data-mood=happy] .d-mouth0{opacity:0}
@keyframes a-tw{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1)}}
.dragon .d-tw1{animation-delay:.4s}.dragon .d-tw2{animation-delay:1.2s}
.d-twg{transform-box:fill-box;transform-origin:center}

/* Partikel */
.pwrap{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:3}
.p{position:absolute;pointer-events:none;will-change:transform,opacity;animation:a-pf var(--t,900ms) cubic-bezier(.2,.7,.3,1) forwards}
@keyframes a-pf{0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0)}14%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(var(--s,1)) rotate(var(--r,0deg))}}
.p.spark{width:7px;height:7px;margin:-3px;border-radius:50%;background:#FFC46B;box-shadow:0 0 8px 2px rgba(255,138,61,.85)}
.p.smoke{width:22px;height:22px;margin:-11px;border-radius:50%;background:radial-gradient(circle,rgba(190,184,210,.6),rgba(120,112,150,0) 70%)}
.p.snow{width:6px;height:6px;margin:-3px;border-radius:50%;background:#E6F1FB;box-shadow:0 0 6px 1px rgba(133,183,235,.9)}
.p.wisp{width:20px;height:20px;margin:-10px;border-radius:50%;background:radial-gradient(circle,rgba(60,56,70,.85),rgba(20,18,26,0) 70%)}
.p.leaf{width:11px;height:11px;margin:-5px;border-radius:0 100% 0 100%;background:#97C459}
.p.heart{font-size:16px;line-height:1;margin:-8px;color:#FF8E7A;text-shadow:0 0 8px rgba(255,138,122,.8)}
.p.heart::before{content:"♥"}
.p.shard{width:12px;height:14px;margin:-6px;background:var(--sh,#993C1D);clip-path:polygon(50% 0,100% 70%,70% 100%,0 60%)}
.p.ring{width:30px;height:30px;margin:-15px;border-radius:50%;border:3px solid rgba(255,196,107,.85);box-shadow:0 0 18px rgba(255,138,61,.7)}
.p.ember{width:4px;height:9px;margin:-4px -2px;border-radius:50%;background:#FF8A3D;box-shadow:0 0 7px 2px rgba(232,70,15,.85)}
.p.ash{width:6px;height:5px;margin:-3px;border-radius:40% 60% 50% 50%;background:#7b6a60;opacity:.8}
.p.glowdot{width:10px;height:10px;margin:-5px;border-radius:50%;background:#FFF1D6;box-shadow:0 0 12px 4px rgba(255,170,90,.9)}

/* Ei */
.egg .eg{position:absolute;inset:0;transform:rotate(calc(var(--tilt,0)*1deg));transition:transform .25s ease-out}
.egg-glow{position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(circle,rgba(255,138,61,.55),rgba(232,70,15,.18) 45%,transparent 68%);opacity:var(--gl,.3);animation:a-eglow var(--beat,2s) ease-in-out infinite;pointer-events:none}
@keyframes a-eglow{0%,100%{transform:scale(.94)}12%{transform:scale(1.04)}24%{transform:scale(.97)}36%{transform:scale(1.02)}}
.egg-svg{width:100%;height:100%;display:block;overflow:visible;animation:a-beat var(--beat,2s) ease-in-out infinite;transform-origin:50% 90%;filter:drop-shadow(0 0 26px rgba(255,120,40,.35))}
@keyframes a-beat{0%,100%{transform:scale(1)}12%{transform:scale(1.03)}24%{transform:scale(1)}36%{transform:scale(1.018)}}
.egg-svg *{transform-box:view-box}
.egg.w1 .egg-svg{animation:a-ew1 .55s ease-in-out,a-beat var(--beat,2s) .55s ease-in-out infinite}
.egg.w2 .egg-svg{animation:a-ew2 .65s ease-in-out,a-beat var(--beat,2s) .65s ease-in-out infinite}
.egg.w3 .egg-svg{animation:a-ew3 .8s ease-in-out,a-beat var(--beat,2s) .8s ease-in-out infinite}
@keyframes a-ew1{20%{transform:rotate(-6deg)}50%{transform:rotate(5deg)}80%{transform:rotate(-2deg)}}
@keyframes a-ew2{15%{transform:rotate(-9deg) translateX(-3px)}40%{transform:rotate(8deg) translateX(3px)}65%{transform:rotate(-6deg)}85%{transform:rotate(3deg)}}
@keyframes a-ew3{10%{transform:rotate(-12deg) translateX(-5px)}28%{transform:rotate(11deg) translateX(5px)}46%{transform:rotate(-10deg) translateX(-4px)}64%{transform:rotate(8deg)}82%{transform:rotate(-4deg)}}
.leak{animation:a-leak 1.1s ease-in-out infinite}
@keyframes a-leak{50%{opacity:.35}}
.egg.hatch .egg-svg{animation:a-ehatch .55s cubic-bezier(.4,0,.8,.4) forwards}
@keyframes a-ehatch{0%{transform:scale(1)}40%{transform:scale(1.12) rotate(-2deg)}100%{transform:scale(1.35);opacity:0}}
.egg.hatch .egg-glow{animation:none;opacity:1;transform:scale(1.4);transition:transform .5s,opacity .5s}
@keyframes a-born{0%{opacity:0;transform:scale(.4) translateY(30px)}100%{opacity:1;transform:none}}
.flash{position:fixed;inset:0;z-index:80;background:radial-gradient(circle at 50% 50%,#FFF1D6,#FFC46B 40%,rgba(255,138,61,0) 75%);opacity:0;pointer-events:none;z-index:35}
.flash.on{animation:a-flash .7s ease-out}
@keyframes a-flash{0%{opacity:0}20%{opacity:.95}100%{opacity:0}}

/* Tutorial */
.tut{position:fixed;inset:0;z-index:44;pointer-events:none}
.tut[hidden]{display:none}
.t-spot{position:absolute;border-radius:26px;box-shadow:0 0 0 1200px rgba(8,4,2,.7);outline:2px solid rgba(255,138,61,.75);outline-offset:-2px;transition:left .45s,top .45s,width .45s,height .45s}
.t-spot::after{content:"";position:absolute;inset:-2px;border-radius:26px;border:2px solid rgba(255,196,107,.7);animation:a-spotpulse 1.8s ease-out infinite}
@keyframes a-spotpulse{from{transform:scale(1);opacity:.9}to{transform:scale(1.12);opacity:0}}
.t-hand{position:absolute;left:0;top:0;width:46px;height:46px;margin:-23px;border-radius:50%;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.8);box-shadow:0 0 0 0 rgba(255,255,255,.5)}
.t-hand.cue-tap{animation:a-cuetap 1.5s ease-in-out infinite}
@keyframes a-cuetap{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,.5)}35%{transform:scale(.78);background:rgba(255,255,255,.4)}65%{transform:scale(1);box-shadow:0 0 0 16px rgba(255,255,255,0)}}
.t-hand.cue-swipe{animation:a-cueswipe 1.9s ease-in-out infinite}
@keyframes a-cueswipe{0%,100%{transform:translateX(-70px) scale(.8);background:rgba(255,255,255,.4)}50%{transform:translateX(70px) scale(.8);background:rgba(255,255,255,.4)}}
.t-tip{position:absolute;left:16px;right:16px;bottom:calc(92px + var(--safe-b));pointer-events:auto;background:linear-gradient(180deg,#2c1a10,#1a0f09);border:1px solid var(--line2);border-radius:16px;padding:14px 16px;box-shadow:0 -10px 40px -16px rgba(255,110,40,.5);animation:inrise .5s ease both}
.t-tip b{font-size:17px}
.t-tip p{margin:4px 0 8px;color:var(--tx2);font-size:14px}
.t-dots{display:flex;gap:6px;margin-bottom:8px}.t-dots i{width:7px;height:7px;border-radius:50%;background:var(--line2);transition:background .3s,transform .3s}.t-dots i.on{background:var(--acc);transform:scale(1.3)}.t-dots i.ok{background:var(--ok)}
.t-actions{display:flex;justify-content:space-between;align-items:center;gap:10px}
.t-actions button{padding:6px 12px;font-size:13px}
.t-actions button:first-child:not(.primary){background:transparent;border:0;color:var(--tx3)}
.t-actions .primary{width:auto;padding:8px 18px}
.t-tip.ok b::after{content:"  ✓";color:var(--ok)}


/* Port aus dem Mockup: Einblenden des Hinweises, Ankunft des geschlüpften Drachen, Tab-Markierung */
@keyframes a-inrise{from{opacity:0;transform:translateY(16px)}}
.tut.done .t-spot{box-shadow:none;outline:none}
.tut.done .t-spot::after{display:none}
[data-portrait]{position:relative;touch-action:pan-y;cursor:pointer;-webkit-tap-highlight-color:transparent}
[data-portrait]:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:14px}
.portrait.born svg{animation:a-born .8s cubic-bezier(.3,1.5,.5,1) both}
.egg{position:relative;touch-action:manipulation}
.fx{position:fixed;inset:0;pointer-events:none;z-index:70}
.tabbar .tab-pill{position:absolute;z-index:0;top:6px;bottom:calc(8px + var(--safe-b));left:0;width:60px;border-radius:12px;background:rgba(255,154,43,.13);border:1px solid var(--species-accent,var(--line2));box-shadow:0 0 16px rgba(255,138,61,.3);transition:transform .34s cubic-bezier(.3,1.25,.5,1),width .34s;pointer-events:none}
.tab{z-index:1}
.tab[aria-selected="true"] svg{animation:a-tabpop .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes a-tabpop{0%{transform:scale(.8) translateY(3px)}50%{transform:scale(1.2) translateY(-3px)}100%{transform:none}}
.toast.on{animation:a-toastpop .4s cubic-bezier(.3,1.5,.5,1)}
@keyframes a-toastpop{from{transform:translate(-50%,24px) scale(.9)}}
.wl-dragon{margin:0 auto;animation-delay:.2s!important}
.wl-skip{background:transparent;border:0;color:var(--tx3);font-size:13px;padding:6px}
.wl-skip:hover{background:transparent;color:var(--tx2)}
.t-spot,.t-hand,.t-tip{box-sizing:border-box}
html.calm .p{display:none}
@media (prefers-reduced-motion:reduce){.p{display:none}}

/* Versionsverlauf: ruhige Karten, nur der Inhalt scrollt. */
#changelog .modal-card{display:flex;flex-direction:column;overflow:hidden}
#changelog .modal-head,#changelog .modal-actions{flex:none}
.cl-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.cl-entry{contain:layout paint}
#cl-more{min-height:48px;margin:0 0 8px}
.cl-head{flex-wrap:wrap}
.cl-head b{white-space:nowrap}
.cl-head small{flex-basis:100%;margin-left:0;font-size:13px}
.reading-changelog #app *,.reading-changelog #app *::before,.reading-changelog #app *::after{animation-play-state:paused!important}

/* Anleitung unter dem Vibrations-Test (Tab „Mehr“) */
.vib-help-row{padding-top:0}
.vib-help{width:100%;font-size:13px;color:var(--tx2)}
.vib-help summary{cursor:pointer;color:var(--gold);padding:2px 0;list-style:none}
.vib-help summary::-webkit-details-marker{display:none}
.vib-help summary::before{content:"›";display:inline-block;margin-right:6px;transition:transform .2s}
.vib-help[open] summary::before{transform:rotate(90deg)}
.vib-help ul{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;line-height:1.4}
/* Zeile „Intensität“: der Schalter behält seine Breite und wird nie vom Namen überdeckt, bei sehr schmalen Handys bricht er unter den Namen um */
.vib-row .lbl{flex:1 1 auto}
.vib-row .lang-switch{flex:none}
@media (max-width:340px){.vib-row{flex-wrap:wrap}.vib-row .lang-switch{margin-left:auto}}
/* Zeile „Intensität“ (Korrektur): Name oben, Schalter darunter über die volle Breite. So überdeckt nichts etwas, auch bei großer Systemschrift. */
.vib-row{flex-wrap:wrap;row-gap:10px}
.vib-row .lbl{flex:1 1 100%}
.vib-row .lang-switch{flex:1 1 100%;width:100%;max-width:none}
.vib-row .lang-switch button{flex:1 1 0;min-width:0;padding-left:6px;padding-right:6px}

/* Ansicht seit 1.9.0 (bis 1.13.1 umschaltbar, seit 1.14.0 die einzige): nur der Hauptbereich, Spiel und Einstiegsablauf bleiben gleich. */
.main{
  --bg:#160b07;--bg2:#20110b;--card:#2b180f;--card2:#382014;
  --line:rgba(255,175,100,.17);--line2:rgba(255,175,100,.35);
  --tx:#fff0df;--tx2:#e2c3a8;--tx3:#b99a80;--acc:#ffa53c;--gold:#ffd17c;
  --r:20px;
  color:var(--tx);
  background:radial-gradient(90% 28% at 50% 3%,rgba(124,51,14,.28),transparent 85%),var(--bg);
}
.topbar{padding:calc(18px + env(safe-area-inset-top,0px)) 20px 14px;background:linear-gradient(#160b07 82%,transparent);align-items:flex-start}
.topbar .name{font:600 clamp(29px,9vw,42px)/1.08 var(--serif);color:#fff0df;background:none;letter-spacing:.01em}
.topbar .sub{margin-top:4px;color:var(--tx2);font-size:14px}
.topbar .chip{align-self:center;border:1px solid var(--line2);background:rgba(255,165,60,.1);color:var(--gold)}
.topbar .iconbtn{flex:none}
.views{padding:4px 18px calc(104px + var(--safe-b))}
.view{gap:16px}
.card,.metric,.species-card{
  background:linear-gradient(150deg,rgba(67,38,24,.95),rgba(38,21,13,.98));border:1px solid var(--line);
  border-radius:20px;box-shadow:0 10px 30px rgba(7,3,1,.18),inset 0 1px rgba(255,220,170,.05)}
.section-title{font:600 21px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--tx)}
.say{background:linear-gradient(145deg,#3b2216,#26150f);border:1px solid var(--line2);border-radius:18px;padding:15px 18px;color:var(--tx);font-size:17px}
.main button.primary{background:linear-gradient(135deg,#ffb447,#ff7a1a);border:0;border-radius:15px;color:#301303;min-height:48px;box-shadow:0 8px 22px rgba(184,66,8,.25)}
.main button:focus-visible{outline-color:#ffd17c}

/* Drache: Bühne, Tageswerte und eindeutiger Weg zur Pflege. */
#view-drache{gap:14px}
#view-drache>.ios-box{order:0}
#view-drache>.portrait.big{
  order:1;position:relative;width:100%;max-width:none;height:clamp(245px,75vw,360px);aspect-ratio:auto;
  display:grid;place-items:center;overflow:hidden;border-radius:23px;
  background:radial-gradient(ellipse 55% 34% at 50% 75%,rgba(255,148,53,.35),transparent 92%),
    radial-gradient(circle at 18% 80%,rgba(245,96,19,.26),transparent 28%),
    radial-gradient(circle at 86% 67%,rgba(220,98,24,.28),transparent 22%),
    linear-gradient(160deg,#32190f 0%,#1b0d08 62%,#3a180a 100%);
  border:1px solid var(--line2);box-shadow:inset 0 -30px 65px rgba(8,3,1,.6),0 18px 35px rgba(0,0,0,.22)}
#view-drache>.portrait.big::before{content:"";position:absolute;inset:auto 4% -12% 4%;height:32%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,125,38,.26),transparent 70%);pointer-events:none}
#view-drache>[data-say]{order:2;margin-top:-38px;z-index:1;max-width:calc(100% - 16px);align-self:center;box-shadow:0 12px 26px rgba(0,0,0,.22)}
#view-drache>.stats{order:4;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:17px}
#view-drache>.stats .stat-row{gap:6px;flex-wrap:wrap}
#view-drache>.stats .stat-row b::after{content:" %";font-weight:400;color:var(--tx3)}
#view-drache>.stats .bar{height:10px;background:#1b0e09}
#recommend,#exp-care{order:5}
#recommend{padding:14px 16px}
#recommend .section-title{font-size:19px}
#loop{order:6}
#drache-species{order:7}
#view-drache>.grid2{order:8}
#view-drache .metric{min-width:0}

/* Aktionen und Flug behalten ihre Bedienlogik und gewinnen eine klare Kartenhierarchie. */
#view-aktionen>.mini{padding:12px 14px;border-radius:20px;background:linear-gradient(135deg,#352015,#24130c);border:1px solid var(--line)}
#view-aktionen>.mini .portrait{width:100px}
#view-aktionen>.mini .say{background:transparent;border:0;padding:0;box-shadow:none;font-size:15px}
.act-group{margin:0 0 20px}
.act-group .section-title{margin:5px 0 12px}
.act{min-height:76px;padding:14px;margin-bottom:10px;border-radius:18px;background:linear-gradient(135deg,#352015,#28160e);border:1px solid var(--line)}
.act .ico{width:48px;height:48px;border-radius:14px;background:rgba(255,159,58,.12);color:var(--gold)}
.act .txt b{font-size:16px;color:var(--tx)}
.act .txt small{color:var(--tx2)}
.act .cd{color:var(--gold)}
.act.locked{opacity:.58}
#view-flug .hud{padding:12px 10px;gap:8px;flex-wrap:wrap;justify-content:space-around;border:1px solid var(--line);border-radius:16px;background:var(--card)}
#cv{border-radius:20px;border:2px solid var(--line2);box-shadow:0 16px 35px rgba(0,0,0,.25)}
#view-flug .result{border-color:var(--line2)}
#view-flug .result-head h3{font:600 23px var(--serif)}
#view-flug .result-head strong{color:var(--gold)}
#view-flug .fly-mode{align-self:stretch}
#view-flug .fly-mode button{min-height:44px;flex:1}

/* Tal: die echten Preise und Vorräte bleiben im vorhandenen Rendering. */
#vale{gap:16px}
#vale>.glutbar h2{font:600 30px var(--serif)}
.glutbar .g{padding:8px 13px;border:1px solid var(--line2);border-radius:999px;background:rgba(255,163,57,.1);color:var(--gold)}
#vale>.vale-intro{color:var(--tx2)}
#vale>.vale-seg{align-self:stretch;display:flex;width:100%;max-width:none;padding:4px;border-radius:16px;background:#29170f;border:1px solid var(--line)}
#vale>.vale-seg button{flex:1;min-height:44px}
#vale .card.rows{display:flex;flex-direction:column;gap:12px;padding:0;border:0;background:none;box-shadow:none;overflow:visible}
#vale .ware{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px 14px;padding:15px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,#392115,#29170f)}
#vale .ware+.ware{border-top:1px solid var(--line)}
#vale .ware .ico{width:52px;height:52px;border-radius:15px;background:rgba(255,163,57,.11)}
#vale .ware .ico svg.ic{width:28px;height:28px}
#vale .ware .t b{font:600 19px var(--serif)}
#vale .ware .t small{color:var(--tx2)}
#vale .ware .have{display:block;margin-top:5px}
#vale .ware .acts{grid-column:1/-1;flex-direction:row;justify-content:flex-end}
#vale .ware .acts button{min-height:44px;min-width:100px}
#vale .album{gap:10px}
#vale .find{min-height:86px;border-radius:16px;background:var(--card)}
#vale .find-info{padding:17px}

/* Einstellungen, Navigation und Dialoge. */
#view-mehr section{gap:10px}
#view-mehr .section-title{margin:8px 0 0}
#view-mehr .row{min-height:56px;padding:14px}
#view-mehr .row .lbl small{color:var(--tx2)}
#view-mehr .rowbtn{min-height:56px}
#view-mehr .switch{min-width:48px}
.tabbar{padding:8px 8px calc(10px + var(--safe-b));background:rgba(31,15,8,.96);border-top:1px solid var(--line2)}
.tab{min-height:55px;color:var(--tx2)}
.tab[aria-selected="true"]{color:var(--gold)}
.modal{background:rgba(10,4,1,.75)}
.modal-card{border-radius:24px;background:linear-gradient(165deg,#3a2115,#1c0e08);border:1px solid rgba(255,175,100,.35);box-shadow:0 -18px 48px rgba(0,0,0,.35)}
.modal-card h2{font-family:var(--serif);font-size:24px}

@media(max-width:355px){
  .topbar{gap:6px;padding-left:14px;padding-right:14px}
  .topbar .name{font-size:27px}
  .topbar .chip{padding:4px 7px;font-size:11px}
  .views{padding-left:12px;padding-right:12px}
  #view-drache>.stats{gap:10px}
  #vale .ware .acts{flex-wrap:wrap}
}

/* Illustrierte Drachenansicht nach dem Android-Mockup. Die SVGs bleiben für Berührung und Minispiele erhalten. */
.exp-illustration{display:none}
.main[data-active-tab="drache"] .topbar{display:none}
.main[data-active-tab="drache"] .views{padding:0 0 calc(100px + var(--safe-b))}
#view-drache{gap:0}
#view-drache>.portrait.big{
  width:100%;height:clamp(420px,63svh,620px);max-width:none;margin:0;border:0;border-radius:0;
  display:block;overflow:hidden;background:#211008;box-shadow:none;touch-action:pan-y}
#view-drache>.portrait.big::before{inset:0;height:auto;border-radius:0;z-index:2;
  background:linear-gradient(180deg,rgba(14,5,2,.18),transparent 36%,transparent 65%,rgba(18,7,3,.74));}
#view-drache>.portrait.big .exp-illustration{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;opacity:1;transition:opacity .5s ease,filter .5s ease;pointer-events:none}
#view-drache>.portrait.big .exp-illustration.resting{opacity:0}
#view-drache>.portrait.big.is-resting .exp-illustration.awake{opacity:0}
#view-drache>.portrait.big.is-resting .exp-illustration.resting{opacity:1}
#view-drache>.portrait.big.art-react .exp-illustration{animation:a-artreact .8s ease}
#view-drache>.portrait.big.art-purring .exp-illustration{animation:a-artpurr 2s ease-in-out infinite alternate}
@keyframes a-artreact{45%{filter:brightness(1.15) saturate(1.12)}}
@keyframes a-artpurr{to{filter:brightness(1.08) saturate(1.06)}}
#view-drache>.portrait.big .pwrap{z-index:3;overflow:hidden}
#view-drache>.stats{order:2;z-index:3;position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  margin:-104px 18px 0;padding:0;border:0;background:none;box-shadow:none}
#view-drache>.stats .stat{min-width:0;min-height:103px;padding:13px 13px 12px;border:1px solid rgba(255,173,94,.3);border-radius:18px;
  background:rgba(38,18,8,.92);box-shadow:0 10px 22px rgba(0,0,0,.32);backdrop-filter:blur(8px);display:flex;flex-direction:column;justify-content:space-between}
#view-drache>.stats .stat-row{display:flex;flex-direction:column;gap:0;margin:0}
#view-drache>.stats .stat-row span{font:500 15px/1.2 var(--serif);color:#ffe3bb}
#view-drache>.stats .stat-row b{font:700 25px/1 var(--serif);color:#fff1d9}
#view-drache>.stats .stat-row b::after{content:none}
#view-drache>.stats .bar{height:10px;margin-top:8px;background:#513729}
#view-drache>.stats .stat:nth-child(1) .bar i{background:linear-gradient(90deg,#f25b38,#ffb24a)!important}
#view-drache>.stats .stat:nth-child(2) .bar i{background:linear-gradient(90deg,#ff7b42,#ffc66a)!important}
#view-drache #recommend,#view-drache #exp-care{order:3;margin:14px 18px 0}
#view-drache #recommend{min-height:146px;padding:15px 16px 12px;border:2px solid #ff9b2f;border-radius:19px;
  background:linear-gradient(135deg,rgba(69,29,12,.97),rgba(44,18,8,.98));box-shadow:0 0 22px rgba(255,126,28,.17)}
#view-drache #recommend .section-title{font:500 16px var(--serif);color:#ffbf64;margin:0}
#view-drache #recommend .section-title::before{content:'✦';margin-right:8px}
#view-drache #recommend-action{min-height:88px;padding:3px;background:none;border:0;box-shadow:none;color:#fff0d6;
  display:grid;grid-template-columns:70px minmax(0,1fr) 42px;gap:12px;text-align:left;font:700 clamp(23px,7vw,32px) var(--serif)}
#view-drache #recommend-action .rec-icon{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;
  border:1px solid #ffa440;background:radial-gradient(circle,#704019,#281207 72%);color:#ffbe61}
#view-drache #recommend-action .rec-icon svg{width:38px;height:38px}
#view-drache #recommend-action .rec-arrow{font:300 36px/1 system-ui;width:40px;height:40px;border:1px solid #ffa440;
  border-radius:50%;display:grid;place-items:center;color:#ffbd5d}
#view-drache #exp-care{min-height:60px}
#view-drache #exp-care{width:calc(100% - 36px)}
#view-drache>[data-say]{order:4;margin:18px 18px 0;width:calc(100% - 36px);max-width:none;align-self:auto;box-shadow:none}
#view-drache #loop{order:5;margin:18px 18px 0}
#view-drache #drache-species{order:6;width:auto;margin:18px 18px 0}
#view-drache>.grid2{order:7;margin:18px}
#view-drache>.grid2 .exp-trust{display:block}
#view-drache>.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Dauerhafte XP-Stufen im orangenen Flammendesign (1.15.4). */
#view-drache>.stats .stage-stat{grid-column:1/-1;min-width:0;padding:12px 14px;border:1px solid #c97c38;border-radius:16px;background:linear-gradient(135deg,rgba(69,29,12,.96),rgba(38,18,8,.96))}
.stage-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-size:14px}
.stage-row b{color:#ffd17c;overflow-wrap:anywhere}
.stage-row span,#stage-hint{color:var(--tx2)}
#stage-hint{display:block;margin-top:7px;font-size:12px;line-height:1.4}
#stage-progress i{background:linear-gradient(90deg,#f26a28,#ff9b2f 55%,#ffd17c);box-shadow:0 0 10px rgba(255,155,47,.3)}
.xp-help{margin-top:5px;font-size:12px;color:var(--tx2);line-height:1.5}
.xp-help summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:#ffc66a}
.xp-help p{margin:0 0 4px}
html.calm #stage-progress i{transition:none}
@media(prefers-reduced-motion:reduce){#stage-progress i{transition:none}}

/* Rückkehr als großes Bottom Sheet über der artgerechten Bühne. */
#return-popup{align-items:flex-end;padding:0;background:rgba(9,3,1,.66)}
#return-popup .modal-card{max-width:480px;width:100%;max-height:85svh;overflow:auto;padding:14px 20px calc(22px + var(--safe-b));
  border-radius:30px 30px 0 0;border:1px solid #d88932;border-bottom:0;background:linear-gradient(165deg,#34190b,#1a0b05 70%)}
#return-popup .modal-card::before{content:"";display:block;width:42px;height:5px;border-radius:5px;background:#977457;margin:0 auto 18px}
#return-popup .modal-head{justify-content:center;position:relative}
#return-popup .modal-head h2{font:700 30px var(--serif);text-align:center;color:#ffe8bf}
#return-popup #return-x{position:absolute;right:0;top:0}
#return-popup #return-away{text-align:center;font:500 17px var(--serif);color:#ffd18b;margin:8px 0 17px}
#return-popup .return-changes{background:rgba(28,12,5,.65);border-radius:18px;border-color:rgba(255,172,85,.25);padding:4px 15px}
#return-popup .return-change{min-height:48px;color:#ffe8ce}
#return-popup .return-change>span{display:flex;align-items:center;gap:10px;font:500 16px var(--serif)}
#return-popup .return-change svg{color:#ffbb68;width:21px;height:21px}
#return-popup .return-change b{display:flex;align-items:center;gap:9px;font:600 20px var(--serif)}
#return-popup .return-change b i{font-style:normal;color:#bca18c}
#return-popup .return-change b em{font-style:normal;color:#ffb956}
#return-popup .return-change.sat b em,#return-popup .return-change.trust b em{color:#ff704b}
#return-popup .return-gift{border-radius:18px;background:linear-gradient(135deg,#42230f,#281207);padding:14px;border-color:rgba(255,170,77,.42)}
#return-popup .return-gift .section-title{color:#ffd49a}
#return-popup #return-accept{min-height:50px}
#return-popup #return-ok{min-height:50px;border-color:#d8842e;color:#ffe1ae;border-radius:14px}
@media(max-width:355px){#view-drache>.stats{margin-left:12px;margin-right:12px;gap:7px}
  #view-drache>.stats .stat{padding:11px}}

/* Die Bildbühne und ihre Akzente richten sich nach der Drachenart. */
.exp-stat-icon{display:none}
.main{--species-accent:#ff9b2f;--species-gold:#ffd17c;--species-glow:rgba(255,126,28,.17);
  --acc:var(--species-accent);--gold:var(--species-gold);--line2:color-mix(in srgb,var(--species-accent) 35%,transparent)}
html[data-dragon-species="sturm"] .main{--species-accent:#afa9ec;--species-gold:#dcd5ff;--species-glow:rgba(160,137,228,.19)}
html[data-dragon-species="frost"] .main{--species-accent:#a4d8ed;--species-gold:#d3f1ff;--species-glow:rgba(106,193,223,.2)}
html[data-dragon-species="schatten"] .main{--species-accent:#f09595;--species-gold:#ffd0ca;--species-glow:rgba(220,104,104,.18)}
html[data-dragon-species="moos"] .main{--species-accent:#a8ca80;--species-gold:#deeeaa;--species-glow:rgba(155,196,89,.18)}
#view-drache>.stats .stat{border-color:color-mix(in srgb,var(--species-accent) 38%,transparent)}
#view-drache>.stats .stat-row{display:grid;grid-template-columns:37px minmax(0,1fr);align-items:center;column-gap:6px}
#view-drache>.stats .stat-row .exp-stat-icon{display:grid;grid-row:1/3;place-items:center;color:var(--species-gold)}
#view-drache>.stats .stat-row .exp-stat-icon svg{width:30px;height:30px}
#view-drache>.stats .stat-row span{grid-column:2}
#view-drache>.stats .stat-row b{grid-column:2}
#view-drache #recommend{border-color:var(--species-accent);box-shadow:0 0 22px var(--species-glow)}
#view-drache #recommend .section-title,#view-drache #recommend-action .rec-icon,#view-drache #recommend-action .rec-arrow{color:var(--species-gold)}
#view-drache #recommend-action .rec-icon,#view-drache #recommend-action .rec-arrow{border-color:var(--species-accent)}
.main button.primary{background:linear-gradient(135deg,var(--species-gold),var(--species-accent));color:#261309}
#view-drache #recommend-action{background:none;color:#fff0d6}
.tab[aria-selected="true"]{color:var(--species-gold)}
#return-popup .modal-card{border-color:var(--species-accent)}
#return-popup #return-away{display:flex;align-items:center;justify-content:center;gap:9px}
#return-popup #return-away svg{width:24px;height:24px}
#view-drache>.portrait.big .exp-illustration{animation:a-art-idle 7s ease-in-out infinite alternate}
#view-drache>.portrait.big.art-react .exp-illustration{animation:a-artreact .8s ease}
#view-drache>.portrait.big.art-purring .exp-illustration{animation:a-artpurr 2s ease-in-out infinite alternate}
@keyframes a-art-idle{to{transform:scale(1.018)}}
@media(prefers-reduced-motion:reduce){#view-drache>.portrait.big .exp-illustration{animation:none}}

/* Schmuck-Shop (1.10.0) */
.gear-cats{flex-wrap:wrap}
.gear-preview{display:flex;flex-direction:column;gap:10px;padding:14px}
.gear-stage{height:190px;display:grid;place-items:center;border-radius:14px;background:radial-gradient(circle at 50% 60%,var(--card2),var(--card))}
.gear-stage svg.dragon{height:100%;width:auto;max-width:100%}
.gear-head-stage{position:relative;height:210px;overflow:hidden}
.gear-head-stage .dhead.gear-head{--box:200px;border:0;box-shadow:none;background:none}
.gear-preview-item{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:58px;height:58px;padding:5px;border-radius:14px;background:var(--card2);border:1px solid var(--line2)}
.gear-preview-item svg{width:100%;height:100%}
.gear-preview .gear-preview-note{margin-top:8px;color:var(--tx2)}
.gear-fitting{border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:var(--card2)}
.gear-detail>span{display:block;padding:10px 12px 0;color:var(--tx);font-size:13px;font-weight:600}
.gear-detail .gear-stage{height:180px;padding:12px;border-radius:0;overflow:hidden}
.gear-detail svg.dragon{width:100%;height:100%;overflow:hidden}
.gear-overview{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 12px;border-top:1px solid var(--line)}
.gear-overview .gear-stage{height:90px;width:120px;flex:0 0 120px;background:none}
.gear-overview>span{font-size:13px;color:var(--tx3);overflow-wrap:anywhere}
/* Anprobe bleibt still, damit kleine Schmuckdetails im Ausschnitt lesbar bleiben. */
.gear-fitting svg.dragon *{animation:none!important}
.gear-land{height:190px;border-radius:14px;overflow:hidden}
.gear-land svg{width:100%;height:100%;display:block}
.gear-preview .t b{display:block;font-weight:600;font-size:16px}
.gear-preview .t small{display:block;color:var(--tx3);font-size:13px;line-height:1.35}
.gear-preview .acts{display:flex}
.gear-preview .acts button.buy{flex:1;min-height:44px}
.gear-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gear-card{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:14px;min-height:44px}
.gear-card svg.gear-ic{width:100%;aspect-ratio:1;border-radius:10px;background:var(--card2)}
.gear-card .gn{font-size:14px;color:var(--tx)}
.gear-card .gp{font-size:12px;color:var(--warn);font-weight:600}
.gear-card.own .gp{color:var(--ok)}
.gear-card.sel{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.rider-row{flex-wrap:wrap;row-gap:10px}
.rider-row .lbl{flex:1 1 100%}
.rider-row input{flex:1 1 0;min-width:0;min-height:44px;padding:8px 12px;font:inherit;font-size:16px;color:var(--tx);background:var(--bg2);border:1px solid var(--line2);border-radius:12px}
.rider-row button{min-height:44px;padding:0 18px}
#mo-glut-val{font-variant-numeric:tabular-nums;white-space:nowrap}
.gear-worn{display:flex;gap:8px;justify-content:center;margin:-4px 0 4px}
.gear-worn .gw{width:34px;height:34px;border-radius:10px;overflow:hidden;border:1px solid var(--line2);background:var(--card2)}
.gear-worn .gw svg{width:100%;height:100%;display:block}

/* Inventar (1.10.0) */
.ware .ico.gear-mini{padding:0;overflow:hidden}
.ware .ico.gear-mini svg{width:100%;height:100%;display:block}
.inv-empty{margin:0;padding:14px;color:var(--tx3)}
.inv-finds{margin:0;padding:12px 14px 12px 32px;color:var(--tx2);font-size:15px;line-height:1.6}
.vale-seg button{padding-left:12px;padding-right:12px}

/* Shop-Ausbau (1.11.0) */
.gear-cats{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
.gear-cats::-webkit-scrollbar{display:none}
.gear-cats button{flex:none;white-space:nowrap}
.gear-grid.today{grid-template-columns:repeat(3,1fr)}
.gear-card{position:relative}
.gear-card .tag{position:absolute;top:4px;left:4px;z-index:1;padding:2px 7px;border-radius:999px;font-size:11px;font-weight:700;background:var(--acc);color:#1a0d07}
.gear-card .tag.rare{background:linear-gradient(135deg,#ffe3a8,#e0b84e);color:#3a2408}
.gear-card.rare{border-color:#e0b84e}
.gear-card.deal{border-color:var(--acc)}
.gear-card .gp s{color:var(--tx3);font-weight:400}

/* Sicherungs-Hinweis (1.11.1) */
.backup-hint .bh-acts{display:flex;gap:10px}
.backup-hint .bh-acts button{flex:1;min-height:48px}

/* Pflicht-Sicherung (1.11.1) */
#bgate{z-index:46;padding-bottom:calc(16px + var(--safe-b))}
#bgate .modal-card{border-color:rgba(255,174,91,.5);border-radius:22px}
#bgate h2{font:600 26px/1.2 var(--serif);color:#ffe7bd;margin:4px 0 6px}
#bgate .lead{font-size:16px;line-height:1.5}
#bgate .info-list span[data-icon]{flex:none;color:var(--acc);margin-top:2px}
#bgate .info-list b{margin-bottom:2px}
#bgate .modal-actions button{min-height:48px}
#bg-text{width:100%;margin:6px 0;font:13px/1.4 monospace}

/* Drachenkopf (1.14.0): Ausschnitt aus dem Wach- bzw. Ruhebild der Art, Kopf mittig und nach vorn blickend.
   Aktionen-Übersicht und Splash „Dein Drache lebt“. Je Art und Bild: Mitte (--ax/--ay wach, --rx/--ry ruhend) und
   Kantenlänge --hs des Ausschnitts in Bildpunkten der 800 × 1200 großen Bilder. */
.dhead{--box:104px;--hs:280;--ax:505;--ay:565;--rx:563;--ry:775;position:relative;width:var(--box);height:var(--box);aspect-ratio:auto;overflow:hidden;
  border-radius:18px;border:1px solid var(--species-accent,var(--line2));background:#211008;box-shadow:0 8px 18px rgba(0,0,0,.28)}
html[data-dragon-species="frost"] .dhead{--ax:505;--ay:560;--rx:560;--ry:780}
html[data-dragon-species="glut"] .dhead{--ax:510;--ay:560;--rx:565;--ry:770}
html[data-dragon-species="moos"] .dhead{--ax:510;--ay:580;--rx:565;--ry:775}
html[data-dragon-species="schatten"] .dhead{--ax:510;--ay:580;--rx:565;--ry:790}
html[data-dragon-species="sturm"] .dhead{--hs:290;--ax:510;--ay:560;--rx:565;--ry:780}
.dhead .exp-illustration{--hx:var(--ax);--hy:var(--ay);display:block;position:absolute;max-width:none;height:auto;
  width:calc(var(--box) * 800 / var(--hs));left:calc(var(--box) * (var(--hs) / 2 - var(--hx)) / var(--hs));top:calc(var(--box) * (var(--hs) / 2 - var(--hy)) / var(--hs));
  transition:opacity .5s ease,filter .5s ease;pointer-events:none}
.dhead .exp-illustration.resting{--hx:var(--rx);--hy:var(--ry);opacity:0}
.dhead.is-resting .exp-illustration.awake{opacity:0}
.dhead.is-resting .exp-illustration.resting{opacity:1}
.dhead::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 -16px 22px rgba(10,4,1,.35),inset 0 1px rgba(255,230,190,.08)}
.dhead.art-react .exp-illustration{animation:a-artreact .8s ease}
.dhead.art-purring .exp-illustration{animation:a-artpurr 2s ease-in-out infinite alternate}
.dhead .pwrap{z-index:3;overflow:hidden}
.mini-dragon{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px}
#view-aktionen>.mini{align-items:center;gap:14px}
.mini-dragon .gear-worn{margin:0;gap:4px;flex-wrap:wrap;max-width:104px}
.mini-dragon .gear-worn .gw{width:22px;height:22px;border-radius:7px}
/* Splash „Dein Drache lebt“: erst schlafend, dann wach */
.wl-dragon.dhead{--box:150px;border-radius:26px}
.wl-dragon.dhead.waking .exp-illustration{transition-duration:1.1s}

/* Neuer Flugrekord (1.13.5): stolzer Drache auf der Bühne der Art, Strecke groß, Teilen */
#record-popup{padding:0;background:rgba(9,3,1,.72)}
#record-popup .modal-card{position:relative;max-width:440px;padding:0 20px calc(22px + var(--safe-b));overflow-x:hidden;text-align:center;
  border-radius:30px 30px 0 0;border:1px solid #d88932;border-bottom:0;background:linear-gradient(170deg,#34190b,#1a0b05 70%)}
@media(min-width:560px){#record-popup{padding:16px}#record-popup .modal-card{border-radius:30px;border-bottom:1px solid #d88932}}
#rec-x{position:absolute;right:12px;top:12px;z-index:2;background:rgba(26,11,5,.6);color:#ffe1ae}
.rec-stage{position:relative;margin:0 -20px;height:min(36svh,320px);overflow:hidden}
.rec-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;animation:rec-rise .9s cubic-bezier(.2,.9,.3,1.2) both}
.rec-stage::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,#2c1509)}
.rec-rays{position:absolute;inset:-40%;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:repeating-conic-gradient(from 0deg at 50% 60%,rgba(255,196,107,.28) 0 6deg,transparent 6deg 18deg);animation:rec-spin 18s linear infinite}
.rec-kicker{margin:-6px 0 0;position:relative;z-index:2;font:700 14px/1 system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
#rec-title{margin:6px 0 2px;font:700 clamp(52px,17vw,72px)/1.05 var(--serif);color:#fff0df;text-shadow:0 0 28px rgba(255,138,61,.55);animation:rec-pop .6s .25s ease both}
.rec-prev{margin:0 0 14px;color:#ffd18b;font:500 16px var(--serif)}
#record-popup .say{text-align:left}
#record-popup .modal-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
#record-popup .modal-actions button{min-height:50px;display:flex;align-items:center;justify-content:center;gap:9px}
#record-popup #rec-ok{border-color:#d8842e;color:#ffe1ae;border-radius:14px}
.rec-msg{margin:10px 0 0;min-height:1em;color:var(--tx2);font-size:14px}
.rec-msg:empty{display:none}
@keyframes rec-rise{from{transform:translateY(30px) scale(.94);opacity:0}}
@keyframes rec-pop{from{transform:scale(.6);opacity:0}}
@keyframes rec-spin{to{transform:rotate(360deg)}}
html.calm .rec-rays{animation:none}

/* Bestenliste im Flug-Tab (1.14.0) */
.top-card{padding:12px 14px}
.top-card .section-title{margin:0 0 6px}
.top-list{list-style:none;margin:0;padding:0;counter-reset:top}
.top-list li{counter-increment:top;display:flex;align-items:baseline;gap:10px;padding:7px 0;border-top:1px solid var(--line,rgba(255,255,255,.08))}
.top-list li:first-child{border-top:0}
.top-list li::before{content:counter(top);width:18px;color:var(--tx3);font-variant-numeric:tabular-nums}
.top-list li:first-child::before{color:var(--gold)}
.top-m{font-weight:600;font-variant-numeric:tabular-nums}
.top-list small{margin-left:auto;color:var(--tx3);font-size:12px}

/* Mehr: Hauptliste und Unterseiten (seit 1.14.2) */
.sub-title{margin:2px 0 4px;outline:none}
.sub-bar{margin:-4px 0 0}
.sub-back{border:0;background:transparent;color:var(--acc);padding:8px 12px 8px 0;min-height:44px;font-size:16px;display:inline-flex;align-items:center;gap:6px}
.sub-back span:first-child{font-size:24px;line-height:1}
.mehr-sub,#mehr-main{display:flex;flex-direction:column;gap:12px}
.mehr-sub>.sub-title,#mehr-main>.sub-title{margin-bottom:0}
.sub-body{display:flex;flex-direction:column;gap:12px}
.sub-in{animation:subIn .22s ease both}
.sub-in-r{animation:subInR .22s ease both}
@keyframes subIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes subInR{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.mehr-item{min-height:60px}
.mehr-item .mi{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,rgba(255,196,107,.16),rgba(232,70,15,.22));border:1px solid rgba(255,138,61,.28);color:#FFB067;display:grid;place-items:center;flex:none}
.mehr-item .mi svg.ic{width:22px;height:22px}
.new-dot.inline{position:static;flex:none}

.main[data-active-tab="mehr"] .topbar{display:none}
.main[data-active-tab="mehr"] .views{padding-top:calc(18px + env(safe-area-inset-top,0px))}
.mehr-hero{display:flex;align-items:center;gap:14px;padding:16px}
.mh-ico{width:52px;height:52px;border-radius:50%;background:var(--fire);display:grid;place-items:center;flex:none;color:#2a0f04}
.mh-ico svg.ic{width:28px;height:28px;stroke-width:2}
.mh-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.mh-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mh-top b{font:600 22px/1.2 var(--serif);overflow-wrap:anywhere}
.mh-top .chip{flex:none}
.mh-tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:13px;padding:2px 10px;border-radius:999px;background:rgba(255,138,61,.14);border:1px solid rgba(255,138,61,.28);color:var(--tx2)}
#mehr-main{min-height:calc(100dvh - 128px - env(safe-area-inset-top,0px) - var(--safe-b));gap:16px}
#mehr-main .mehr-hero{padding:20px 18px}
#mehr-main .mehr-item,#mehr-main .rows>.row:first-child{min-height:76px}
#mehr-main .mehr-item .lbl b{font-size:17px}
#mehr-main>section{margin-top:auto}

/* Parallax (1.14.6): Bild etwas größer, damit beim Verschieben keine Ränder sichtbar werden; Partikel gegenläufig */
#view-drache>.portrait.big{--px:0;--py:0}
#view-drache>.portrait.big .exp-illustration{scale:1.07;translate:calc(var(--px) * -13px) calc(var(--py) * -9px);transition:opacity .5s ease,filter .5s ease,translate .35s ease-out}
#view-drache>.portrait.big .pwrap{translate:calc(var(--px) * 7px) calc(var(--py) * 5px);transition:translate .35s ease-out}
html.calm #view-drache>.portrait.big .exp-illustration{scale:1;translate:none}
html.calm #view-drache>.portrait.big .pwrap{translate:none}

/* Name und Schmuck im Bild (1.14.6) */
#view-drache{position:relative}
.drache-title{display:none}
#view-drache>.drache-title{display:block;position:absolute;z-index:4;top:calc(16px + var(--safe-t,0px));left:0;right:0;text-align:center;pointer-events:none;text-shadow:0 2px 10px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.7)}
.dt-name{font:700 30px/1.1 var(--serif);color:#fff1d9}
.dt-sub{margin-top:3px;font:500 13px/1.3 var(--serif);color:var(--species-gold)}
#view-drache>#gear-worn{position:absolute;z-index:4;top:calc(76px + var(--safe-t,0px));right:14px;margin:0;flex-direction:column;gap:6px}
#view-drache>#gear-worn .gw{background:rgba(38,18,8,.62);backdrop-filter:blur(4px);border-color:color-mix(in srgb,var(--species-accent) 50%,transparent)}
#view-drache>#backup-hint,#view-drache>#ios-hint{order:3;margin:14px 18px 0}

/* Tutorial 1.14.8: Kapitelzeile, Zurück-Knopf, Karte oben, wenn das Ziel unten liegt, Kapitelliste */
.t-chap{display:block;color:var(--tx3);font-size:12px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}
.t-tip.top{bottom:auto;top:calc(16px + var(--safe-t,0px))}
.t-side{display:flex;gap:4px;align-items:center}
.t-actions button{min-height:40px}
.t-actions #t-next:not(.primary){background:transparent;border:1px solid var(--line2);color:var(--tx2)}
#tm-list .tm-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--card2);color:var(--acc);font-weight:700;font-size:13px;margin-right:12px;flex:none}
#tm-list .rowbtn{min-height:56px}
#t-back{background:transparent;border:0;color:var(--tx3)}
/* 1.14.9: Glut prominent im Drache-Tab */
#view-drache>.stats .stat-glut{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;text-align:left;cursor:pointer;color:inherit;font:inherit;
  border-color:rgba(255,155,47,.55);background:linear-gradient(135deg,rgba(69,29,12,.95),rgba(38,18,8,.95))}
#view-drache>.stats .stat-glut .glut-ico{width:28px;height:28px;flex:none;color:#ff9b2f}
#view-drache>.stats .stat-glut .glut-lbl{font:500 15px/1.2 var(--serif);color:#ffe3bb;flex:1}
#view-drache>.stats .stat-glut .glut-num{font:700 28px/1 var(--serif);color:#ffc66a;font-variant-numeric:tabular-nums}
#view-drache>.stats .stat-glut:active{transform:scale(.99)}
#view-drache>.grid2 .metric:last-child:nth-child(odd){grid-column:1/-1}
#view-drache>.stats .stat-glut .glut-ico svg{width:28px;height:28px}

/* Tablets und Querformat (1.14.10): breitere Spalte, im Querformat Bild/Flugfläche links und Bedienung rechts */
@media (min-width:700px){
  .app,.tabbar{max-width:720px}
}
@media (orientation:landscape) and (min-width:560px){
  .app,.tabbar{max-width:1000px}
  #view-drache{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
  #view-drache>*{grid-column:2}
  #view-drache>.portrait.big{grid-column:1;grid-row:1/span 14;position:sticky;top:0;height:calc(100dvh - 84px - var(--safe-b));max-height:760px;align-self:start}
  #view-drache>.stats{margin-top:14px}
  #view-drache>.drache-title{grid-column:1;grid-row:1;position:sticky;top:16px;left:auto;right:auto;height:0;align-self:start}
  #view-flug{display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:start;column-gap:18px}
  #view-flug>*{grid-column:2}
  #view-flug>#cv{grid-column:1;grid-row:1/span 20;align-self:start;justify-self:center;position:sticky;top:0}
  #view-flug>.hud{grid-row:1}
}
@media (orientation:landscape) and (min-width:560px) and (max-height:600px){
  .main[data-active-tab="flug"] .topbar{display:none}   /* Handy quer: jede Zeile Höhe gehört der Flugfläche */
}

/* Vollbild-Flug auf dem Handy (1.14.13) */
.fly-ctl{display:none}
body.fly-full{overflow:hidden}
body.fly-full .tabbar,body.fly-full .topbar{display:none}
body.fly-full #view-flug{position:fixed;inset:0;z-index:60;display:flex;flex-direction:row;align-items:center;justify-content:center;padding:0;gap:0;background:#0d0705;animation:flyin .45s cubic-bezier(.2,.9,.3,1)}
body.fly-full #view-flug>*:not(#cv):not(.hud):not(.fly-ctl){display:none!important}
body.fly-full #view-flug>#cv{grid-column:auto;position:static;border:0;border-radius:0;box-shadow:none;flex:none}
body.fly-full #view-flug>.hud{position:absolute;top:calc(6px + env(safe-area-inset-top,0px));left:calc(8px + env(safe-area-inset-left,0px));z-index:2;width:auto;padding:3px 14px;gap:14px;flex-wrap:nowrap;font-size:13px;background:rgba(18,10,7,.55);border:0;border-radius:999px;pointer-events:none}
body.fly-full .fly-ctl{display:flex;position:absolute;top:calc(6px + env(safe-area-inset-top,0px));right:calc(8px + env(safe-area-inset-right,0px));z-index:2;gap:8px}
.fly-ctl button{min-width:44px;min-height:44px;padding:0 12px;border-radius:999px;background:rgba(18,10,7,.55);border:1px solid var(--line2);color:var(--tx);font-size:15px}
@keyframes flyin{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body.fly-full #view-flug{animation:none}}
html.calm body.fly-full #view-flug{animation:none}

/* Lesbarkeit und Gliederung (1.15.4): Hilfstexte als lesbare zweite Ebene. */
:root{--tx3:#bd9d87}
.hint,.fine,.row .lbl small,.gear-preview .t small,.sp-perk,.vib-help{font-size:14px;line-height:1.55}
.act .txt{min-width:0;gap:5px}
.act .txt b{font-size:17px;line-height:1.35}
.act .txt small{font-size:14px;line-height:1.5;color:var(--tx2)}
.act-meta{display:flex;flex-wrap:wrap;gap:5px 12px;font-size:13px;line-height:1.5;color:#ffc66a}
.act .cd{font-size:13px;min-width:2.4em;text-align:right;align-self:flex-start}
.act.locked{opacity:1;background:var(--bg2)}
.act.locked .ico,.act.locked .txt b{color:var(--tx3)}
.metric small,.top-list small{font-size:13px;line-height:1.45}
.iconbtn{width:44px;height:44px;min-width:44px;min-height:44px}
.modal-card .lead,.info-list li span{font-size:15px;line-height:1.6}
.info-list li{align-items:flex-start}
.modal-card h2,.sub-title{line-height:1.3;overflow-wrap:anywhere}
.xp-help,#stage-hint{font-size:14px;line-height:1.55}
.stage-row{font-size:15px;line-height:1.4}
.stage-row span{font-variant-numeric:tabular-nums}
#stage-progress{height:12px;border-radius:6px}
.row .lbl,.ware .t{min-width:0;overflow-wrap:anywhere}
.topbar .name{font-size:clamp(24px,7.5vw,30px);white-space:normal;overflow-wrap:anywhere;text-overflow:clip}

/* Eigenständige Kopfporträts, kein Ausschnitt aus der Bühne. Wachstum rein optisch. */
.dhead.head-portrait{background:radial-gradient(ellipse at 50% 75%,#58301b,#22120c 72%);isolation:isolate}
.dhead.head-portrait .exp-illustration{inset:0;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:50% 70%;
  scale:var(--head-growth,1);transform-origin:50% 76%;transform:perspective(500px) rotateY(var(--head-turn,0deg));
  transition:opacity .5s,scale .8s,transform .3s,filter .4s;animation:head-breathe 5.5s ease-in-out infinite}
.dhead.head-portrait .exp-illustration.resting{filter:brightness(.72) saturate(.7);rotate:7deg;animation-duration:8s}
.dhead.head-portrait.art-react .exp-illustration{animation:head-nod .65s ease-in-out}
.dhead.head-portrait.art-purring .exp-illustration{animation:head-purr 1.5s ease-in-out infinite}
html[data-dragon-species="glut"] .head-portrait .awake{animation-duration:3.8s}
html[data-dragon-species="frost"] .head-portrait .awake{animation-duration:7s}
html[data-dragon-species="schatten"] .head-portrait .awake{animation-duration:8s}
html[data-dragon-species="moos"] .head-portrait .awake{animation-duration:6.5s}
@keyframes head-breathe{0%,100%{translate:0 1px}50%{translate:0 -3px}}
@keyframes head-nod{0%,100%{rotate:0deg}35%{rotate:-5deg}70%{rotate:3deg}}
@keyframes head-purr{0%,100%{translate:0 0;rotate:-2deg}50%{translate:0 -2px;rotate:2deg}}

/* Aufstieg im orange-goldenen Flammendesign. */
.xp-levelup{background:rgba(10,4,2,.88);padding:16px;z-index:95}
.xp-up-card{width:min(100%,440px);text-align:center;position:relative;overflow:hidden;
  border:1px solid #e3a454;border-radius:28px;background:radial-gradient(ellipse at 50% 30%,#603215,#2d150b 60%,#190c07);padding:24px 20px}
.xp-up-eyebrow{margin:0;color:#ffd17c;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.xp-up-orbit{width:200px;height:200px;margin:14px auto 22px;position:relative;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,rgba(255,166,58,.22),transparent 70%);border:1px solid rgba(255,190,91,.45);box-shadow:0 0 36px rgba(255,129,33,.15);animation:xp-arrive .7s ease-out both}
.xp-up-orbit .dhead{--box:178px;border:0;box-shadow:none;background:none;border-radius:50%}
.xp-up-badge{position:absolute;bottom:-12px;left:calc(50% - 25px);width:50px;height:50px;display:grid;place-items:center;border-radius:50%;
  background:var(--fire);color:#2a1006;border:3px solid #4e270f;font-size:24px;font-weight:800}
.xp-up-card h2{font:600 clamp(24px,7vw,30px)/1.25 var(--serif);color:#ffe5ae;margin:0 0 16px}
.xp-up-card .say{background:rgba(20,9,4,.55);font-size:17px;line-height:1.55;margin-bottom:14px}
.xp-up-card .fine{margin-bottom:18px}
.xp-up-card button{min-height:48px}
@keyframes xp-arrive{from{opacity:0;transform:scale(.78) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
html.calm .head-portrait .exp-illustration,html.calm .xp-up-orbit{animation:none!important;transition:none;transform:none}
html.calm .head-portrait .exp-illustration{translate:none;rotate:none}
@media(prefers-reduced-motion:reduce){.head-portrait .exp-illustration,.xp-up-orbit{animation:none!important;transition:none;transform:none;translate:none}}
@media(max-height:600px){.xp-up-card{padding:16px}.xp-up-orbit{width:132px;height:132px;margin:8px auto 18px}.xp-up-orbit .dhead{--box:120px}.xp-up-card .say{font-size:15px}}
#welcome[data-feature="xp"] .wl-card{max-height:calc(100dvh - 48px - var(--safe-b));overflow-y:auto;padding:8px 4px 12px;display:block}
#welcome[data-feature="xp"] .wl-card>*{margin-bottom:12px;animation:none!important}
#welcome[data-feature="xp"] .wl-list li{animation:none}
#welcome[data-feature="xp"] .wl-dragon{--box:112px;flex:none;margin:0 auto}
#welcome[data-feature="xp"] .wl-card h2{font-size:clamp(30px,8vw,40px);line-height:1.15;letter-spacing:0}
#welcome[data-feature="xp"] .wl-list{font-size:14px;line-height:1.5;text-align:left}
#welcome[data-feature="xp"] .wl-card button{min-height:48px;flex:none}
.xp-help ul{padding-left:20px;margin:0 0 12px;display:grid;gap:8px}

/* 1.15.10: Schmuck in Gruppen, Unterart auf der Karte */
.gear-card .gk{display:block;font-size:11px;color:var(--tx3);margin-top:1px}
.gear-filter{margin-top:8px}

/* Hort (seit 1.16.0): Ebenen über der Illustration, Editor als Unterseite des Drache-Tabs, Hort im Tal. Nur Optik. */
.hort-slot{position:absolute;inset:0;z-index:1;pointer-events:none}
.hort-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hort-layer .hl{position:absolute;display:block;height:auto}
.hl-view{position:absolute;left:0;right:0;top:0;height:64%}
.hv-dusk{background:linear-gradient(180deg,rgba(255,96,48,.34),rgba(255,160,70,.16) 55%,transparent)}
.hv-night{background:linear-gradient(180deg,rgba(8,16,64,.8),rgba(24,40,104,.42) 60%,transparent)}
.hv-fog{background:linear-gradient(180deg,rgba(230,238,242,.1),rgba(230,238,242,.44) 55%,transparent)}
.hv-stars{background:linear-gradient(180deg,rgba(26,8,76,.82),rgba(52,26,112,.42) 60%,transparent)}
.hl-stars{position:absolute;inset:0;width:100%;height:100%}
.hl-stars circle{fill:#fff;animation:hortTwinkle 3.4s ease-in-out infinite alternate}
@keyframes hortTwinkle{from{opacity:.25}to{opacity:1}}
.hort-layer .hl-nestpile{position:absolute;left:-2%;width:104%;bottom:var(--hort-cover,0px);height:var(--hort-pile,16%);display:block}
.hl-embers{animation:hortFlicker 3s ease-in-out infinite alternate}
.hl-nestglow{position:absolute;left:12%;width:76%;bottom:calc(var(--hort-cover,0px) + 20px);height:22%;border-radius:50%}
.hn-1{background:radial-gradient(ellipse,rgba(232,196,100,.26),transparent 70%)}
.hn-2{background:radial-gradient(ellipse,rgba(110,168,87,.28),transparent 70%)}
.hn-3{background:radial-gradient(ellipse,rgba(255,120,40,.34),transparent 70%)}
.hn-4{background:radial-gradient(ellipse,rgba(150,215,245,.32),transparent 70%)}
.hn-5{background:radial-gradient(ellipse,rgba(255,210,70,.36),transparent 70%)}
.hort-layer .hl-banner{right:7%;top:0;width:14%}
.hort-layer .hl-plant{left:3%;top:57%;width:17%}
.hort-layer .hl-lamp{left:6%;top:6%;width:11%}
.hort-layer .hl-crystal{left:4%;top:38%;width:14%}
.hl-glow{position:absolute;border-radius:50%;pointer-events:none}
.hl-lamp-glow{left:-2%;top:2%;width:28%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,170,70,.5),transparent 68%);animation:hortFlicker 2.6s ease-in-out infinite alternate}
.hl-crystal-glow{left:-2%;top:33%;width:30%;aspect-ratio:1;background:radial-gradient(circle,rgba(140,215,255,.5),transparent 68%);animation:hortFlicker 4s ease-in-out infinite alternate}
@keyframes hortFlicker{from{opacity:.65}to{opacity:1}}
.hl-flies{position:absolute;inset:0}
.hl-flies i{position:absolute;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,#f4ffb0 0 35%,rgba(232,255,138,.5) 55%,transparent 72%);width:14px!important;height:14px!important;animation:hortFly 7s ease-in-out infinite alternate}
@keyframes hortFly{0%{transform:translate(0,0);opacity:.35}50%{opacity:1}100%{transform:translate(22px,-26px);opacity:.5}}
.hl-shelf{position:absolute;right:3%;top:54%;width:31%}
.hort-layer .hl-shelf>svg{display:block;width:100%;height:auto;overflow:visible}
.hl-shelf-items{display:flex;justify-content:center;gap:4px;min-height:26px;margin-bottom:-3px}
.hl-shelf-items span{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:rgba(30,14,6,.7);color:#ffd17c}
.hort-layer .hl-shelf-items svg{width:18px;height:18px}
html.calm .hl-flies i,html.calm .hl-stars circle,html.calm .hl-glow,html.calm .hl-embers{animation:none}
#view-drache>.portrait.big{--hort-cover:104px;--hort-pile:58px}
.hort-edit{position:absolute;z-index:4;top:80px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:22px;white-space:nowrap;
  border:1.5px dashed #7ee0b0;background:rgba(24,10,4,.82);color:var(--tx);font-size:15px;font-weight:600}
.hort-edit .new-dot{position:static;display:inline-block;flex:none}
.hort-edit .new-dot[hidden]{display:none}

.hort-page{position:fixed;inset:0;z-index:60;background:var(--bg);overflow-y:auto;padding:calc(8px + env(safe-area-inset-top,0px)) 16px calc(28px + var(--safe-b));overscroll-behavior:contain}
.hort-page[hidden]{display:none}
body.hort-on{overflow:hidden}
body.hort-on .main,body.hort-on .tabbar{content-visibility:hidden}   /* verdeckter Drache-Tab: keine Animationen, kein Zeichnen */
body.hort-on #fx,body.hort-on #flash{display:none}
.hort-bar{display:flex;align-items:center;gap:10px;max-width:720px;margin:0 auto}
.hort-title{flex:1;min-width:0;margin:0;font:600 20px/1.2 var(--serif);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.hort-glut{flex:none;padding:8px 12px;border-radius:18px;border:1px solid var(--line2);background:var(--card);color:var(--gold);font-size:14px;font-weight:600}
.hort-body{display:flex;flex-direction:column;gap:14px;max-width:720px;margin:6px auto 0}
.hort-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.hort-stage{position:relative}
.hort-scene{contain:layout paint;position:relative;width:100%;aspect-ratio:3/4;max-height:58svh;border-radius:18px;overflow:hidden;background:#211008}
.hort-scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;display:block}
.hort-say{margin:10px 0 0;font-size:15px}
.hort-cats{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.hort-cats button{flex:none}
.hort-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.hort-detail,.hort-preview .t{min-width:0}
.hort-detail{display:flex;flex-direction:column;gap:10px;padding:14px}
.hort-detail .t b,.hort-preview .t b{display:block;font-weight:600;font-size:16px}
.hort-detail .t small,.hort-preview .t small{display:block;color:var(--tx2);font-size:14px;line-height:1.5}
.hort-fav{color:var(--gold)!important}
.hort-note{margin:0}
.hort-preview .hort-scene{aspect-ratio:4/3;max-height:260px}
.hort-shelf-pick{grid-template-columns:repeat(3,minmax(0,1fr))}
.hort-shelf-pick .find{min-width:0;padding:10px 4px;overflow-wrap:anywhere}
@media (orientation:landscape) and (min-width:700px){
  .hort-bar{max-width:1000px}
  .hort-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:1000px;align-items:start;gap:20px}
  .hort-stage{position:sticky;top:0}
  .hort-scene{aspect-ratio:auto;height:calc(100dvh - 170px);max-height:none}
  .hort-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Jahreszeiten (seit 1.17.0): Tönung und Teilchen über dem Drachenbild, nur Optik. Bei „Weniger Bewegung“ bleibt nur die Tönung. */
.season-slot{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;contain:layout paint style}
.season-tint{position:absolute;inset:0}
[data-season=spring] .season-tint{background:linear-gradient(180deg,rgba(170,235,150,.3),rgba(255,190,210,.14) 60%,transparent)}
[data-season=summer] .season-tint{background:linear-gradient(180deg,rgba(255,205,80,.32),rgba(255,150,60,.14) 60%,transparent)}
[data-season=autumn] .season-tint{background:linear-gradient(180deg,rgba(210,95,30,.42),rgba(150,60,20,.2) 60%,transparent)}
[data-season=winter] .season-tint{background:linear-gradient(180deg,rgba(120,180,255,.4),rgba(200,225,255,.16) 60%,transparent)}
.season-fx{position:absolute;inset:0}
.season-fx .sx{will-change:transform,opacity;backface-visibility:hidden;position:absolute;top:-8%;width:var(--s);height:var(--s);border-radius:50%;opacity:0;animation:sx-fall var(--t) linear var(--d) infinite}
[data-season=spring] .sx{border-radius:60% 40% 60% 40%;background:#ffc2d1;width:calc(var(--s) * 1.1);height:calc(var(--s) * .7)}
[data-season=autumn] .sx{border-radius:0 70% 0 70%;background:#e0803a;width:calc(var(--s) * 1.3);height:calc(var(--s) * 1.3)}
[data-season=autumn] .sx:nth-child(3n){background:#b6532b}
[data-season=autumn] .sx:nth-child(4n){background:#d6a634}
[data-season=winter] .sx{background:#fff}
[data-season=summer] .sx{top:auto;bottom:18%;background:#ffe27a;box-shadow:0 0 8px 2px rgba(255,220,100,.7);animation:sx-glow var(--t) ease-in-out var(--d) infinite}
[data-season=summer] .sx:nth-child(2n){bottom:34%}
[data-season=summer] .sx:nth-child(3n){bottom:50%}
@keyframes sx-fall{0%{opacity:0;transform:translate(0,0)}10%{opacity:.9}50%{transform:translate(var(--w),var(--f1,60svh)) rotate(120deg)}90%{opacity:.8}100%{opacity:0;transform:translate(calc(var(--w) * -1),var(--f2,115svh)) rotate(260deg)}}
@keyframes sx-glow{0%,100%{opacity:0;transform:translate(0,0)}35%,65%{opacity:.9;transform:translate(var(--w),-18px)}}
html.calm .season-fx{display:none}
.season-row{flex-wrap:wrap;gap:8px}
.season-switch{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.season-switch button{border:1px solid var(--line2);border-radius:999px;background:transparent;padding:7px 14px;font-size:14px;color:var(--tx2)}
.season-switch button[aria-pressed=true]{background:var(--accent,#d9692a);border-color:transparent;color:#1d0f08;font-weight:600}

/* Jahreszeiten-Willkommensfenster und Hort-Stücke (seit 1.17.1) */
.wl-seasons{display:grid;grid-template-columns:1fr 1fr;gap:8px;animation:none}
.ws-tile{position:relative;overflow:hidden;min-height:78px;padding:10px 12px;text-align:left;border:1px solid var(--line2);border-radius:var(--r);background:#2a1810;display:flex;flex-direction:column;justify-content:flex-end;--f1:34px;--f2:84px}
.ws-tile.now{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.ws-tile b,.ws-tile small{position:relative;z-index:1}
.ws-tile b{font-size:15px;color:var(--tx)}
.ws-tile small{font-size:12px;color:var(--tx2)}
.ws-tile .season-tint{opacity:1}
.ws-now{position:absolute;z-index:1;right:8px;top:8px;font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#1d0f08;background:var(--gold);border-radius:999px;padding:2px 8px}
.ws-tile[data-season=spring] .sx,.ws-tile[data-season=autumn] .sx{top:-12%}
.hv-spring{background:linear-gradient(180deg,rgba(255,190,215,.4),rgba(190,235,160,.22) 55%,transparent)}
.hv-summer{background:linear-gradient(180deg,rgba(255,170,60,.44),rgba(255,120,60,.2) 55%,transparent)}
.hv-autumn{background:linear-gradient(180deg,rgba(190,90,30,.5),rgba(230,170,70,.26) 55%,transparent)}
.hv-aurora{background:linear-gradient(180deg,rgba(10,20,70,.78),rgba(40,200,150,.32) 55%,transparent)}
.gear-card.seasonal-lock{opacity:.72}
.gear-card.seasonal-lock .gp{color:var(--gold)}
.hort-season{display:block;color:var(--gold)}

/* Jahreszeiten-Fundstücke (seit 1.17.2) */
.season-finds{margin-top:18px}
.sf-group{margin-top:10px}
.sf-group h4{margin:0 0 6px;font-size:14px;color:var(--tx2);display:flex;gap:8px;align-items:center}
.sf-album{grid-template-columns:repeat(2,1fr)}
.sf-find{aspect-ratio:auto;min-height:88px;justify-content:center}
.sf-find.locked{opacity:.7}
.sf-group[data-season=spring] .sf-find:not(.locked) svg{color:#f3a8c0}
.sf-group[data-season=summer] .sf-find:not(.locked) svg{color:#ffd24a}
.sf-group[data-season=autumn] .sf-find:not(.locked) svg{color:#f08a3a}
.sf-group[data-season=winter] .sf-find:not(.locked) svg{color:#9ccfff}

/* Feste (seit 1.17.3) */
.fest-card{border-color:var(--gold);background:linear-gradient(180deg,rgba(255,196,107,.14),transparent 70%),var(--card)}
.fest-bonus{color:var(--gold);font-weight:600}
.fest-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.fest-fx .fs{position:absolute;bottom:-4%;width:5px;height:5px;border-radius:50%;background:#ffd27a;box-shadow:0 0 8px 2px rgba(255,200,100,.75);opacity:0;animation:fs-rise var(--t) ease-in var(--d) infinite}
@keyframes fs-rise{0%{opacity:0;transform:translateY(0)}15%{opacity:.95}85%{opacity:.7}100%{opacity:0;transform:translateY(-70svh) translateX(14px)}}
html.calm .fest-fx{display:none}

/* Chronik und Abzeichen (seit 1.18.0) */
.chron-pane{margin-top:12px}
.chron-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.chron-item{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.chron-ic{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;color:#FFB067;background:linear-gradient(135deg,rgba(255,196,107,.16),rgba(232,70,15,.22));border:1px solid rgba(255,138,61,.28)}
.chron-ic svg.ic{width:22px;height:22px}
.chron-t{min-width:0;flex:1}
.chron-t b{display:block;font-size:16px}
.chron-t p{margin:3px 0 0;font-size:14px;line-height:1.4;color:var(--tx2)}
.chron-date{display:block;font-size:12px;color:var(--tx3);margin-bottom:2px}
.chron-say{font-style:italic;color:var(--gold)!important}
.chron-before{margin-top:18px}
.chron-empty,.chron-count{margin:8px 0;color:var(--tx2);font-size:14px}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin-bottom:6px}
.badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:12px 8px;border-radius:14px;background:var(--card);border:1px solid var(--line);min-height:112px}
.badge b{font-size:14px;line-height:1.25}
.badge small{font-size:12px;line-height:1.3;color:var(--tx3)}
.badge-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--card2);color:var(--tx3)}
.badge-ic svg.ic{width:24px;height:24px}
.badge.on{border-color:rgba(255,138,61,.45)}
.badge.on .badge-ic{color:#FFB067;background:linear-gradient(135deg,rgba(255,196,107,.2),rgba(232,70,15,.28));border:1px solid rgba(255,138,61,.4)}
.badge.off{opacity:.62}
.collection-reward{margin:8px 0 0}
.collection-reward .primary{width:100%;min-height:44px}
.collection-reward.got{color:var(--tx3);font-size:13px}
.badge-prog{font-weight:700;color:var(--gold)!important;font-variant-numeric:tabular-nums}

/* Zusätzliche Minispiele bei Spielen (seit 1.18.4) */
.care-stage[data-kind=hide] .care-dragon{opacity:0}
.care-stage[data-kind=chase] .care-dragon,.care-stage[data-kind=seq] .care-dragon,.care-stage[data-kind=aim] .care-dragon{opacity:.28}
.care-stage .mg-target{position:absolute;transform:translate(-50%,-50%);padding:0;border:0;cursor:pointer}
.mg-bush{width:72px;height:58px;min-height:44px;border-radius:50% 50% 34% 34%;background:radial-gradient(circle at 40% 30%,#78a653,#2f5a2a);box-shadow:0 3px 0 rgba(0,0,0,.35);transition:left .35s ease}
.mg-bush.ok{box-shadow:0 0 0 3px #7dd87d,0 3px 0 rgba(0,0,0,.35)}
.mg-bush.no{box-shadow:0 0 0 3px #ff8e7a,0 3px 0 rgba(0,0,0,.35)}
.mg-peek{position:absolute;transform:translate(-50%,-50%);width:38px;height:38px;color:#FFC46B;pointer-events:none}
.mg-peek svg.ic{width:100%;height:100%}
.mg-fly{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle,#fff6c9 0 26%,#ffd75a 46%,rgba(255,215,90,0) 70%);box-shadow:0 0 14px 4px rgba(255,215,90,.5);transition:left .06s linear,top .06s linear}
.mg-pad{width:76px;height:76px;border-radius:50%;border:3px solid rgba(255,255,255,.28);opacity:.55;font-size:24px;font-weight:700;color:#1d0f08;--c:#e8460f;background:var(--c);transition:opacity .12s,box-shadow .12s}
.mg-pad.p1{--c:#ffc46b}.mg-pad.p2{--c:#6fa3ff}.mg-pad.p3{--c:#7dd87d}
.mg-pad.on{opacity:1;box-shadow:0 0 24px 8px var(--c);transform:translate(-50%,-50%) scale(1.1)}
.care-stage .mg-fire{inset:0;left:0;top:0;width:100%;height:100%;transform:none;background:transparent;border-radius:0}
.mg-lantern{position:absolute;top:34%;width:34px;height:46px;border-radius:12px 12px 16px 16px;background:linear-gradient(#ffc46b,#d9692a);box-shadow:0 0 14px 3px rgba(255,160,80,.5);transform:translate(-50%,-50%);pointer-events:none;transition:opacity .4s,transform .4s}
.mg-lantern.burn{opacity:0;transform:translate(-50%,-70%) scale(1.5)}
.mg-lantern.missed{opacity:.45}
.mg-mark{position:absolute;top:34%;width:46px;height:46px;border:3px solid #FFC46B;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;transition:left .05s linear;box-shadow:0 0 10px rgba(255,196,107,.6)}
.mg-mark::after{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#FFC46B}
html.calm .mg-fly,html.calm .mg-mark,html.calm .mg-bush,html.calm .mg-pad,html.calm .mg-lantern{transition:none}

/* Erklärung beim ersten Start eines Spiels (seit 1.18.4) */
.care-intro{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:14px 16px;text-align:center;background:rgba(20,12,8,.9)}
.care-intro[hidden]{display:none}
.care-intro p{margin:0;font-size:15px;line-height:1.4;color:var(--tx)}
.care-intro .primary{min-height:44px;padding:0 22px}