*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;overscroll-behavior:none}
:root{
  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  --bg1:#fdf4ff; --bg2:#eef2ff; --ink:#2a1f3d; --muted:#6b6280; --card:#ffffffd9; --line:#e9e1f2;
  --accent:#7c4dff; --accent-ink:#fff; --accent-soft:#efe8ff; --good:#14a35a; --bad:#e0435b;
  --key:#ffffff; --key-ink:#2a1f3d; --key-shadow:#d9cfe8;
  --r:22px; --pad:clamp(12px,2.4vw,24px);
}
body[data-theme="unicorn"]{--bg1:#fff0fa;--bg2:#f1e9ff;--accent:#d63c9a;--accent-soft:#ffe3f3;--key-shadow:#f0cde3;--line:#f3dcec}
body[data-theme="mech"]{--bg1:#e9f3ff;--bg2:#e3e8f7;--ink:#14213d;--muted:#55627c;--accent:#1f5fe0;--accent-soft:#dfeaff;--key-shadow:#c8d3e8;--line:#d7e0ef}
body{
  font-family:var(--font); color:var(--ink);
  background:radial-gradient(1200px 700px at 10% -10%,var(--bg1),transparent 60%),radial-gradient(900px 700px at 110% 110%,var(--bg2),transparent 60%),linear-gradient(var(--bg1),var(--bg2));
  background-attachment:fixed; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none;
  touch-action:manipulation; -webkit-text-size-adjust:100%;
}
button{font-family:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
#app{height:100dvh;min-height:100%;position:relative;overflow:hidden}
.screen{position:absolute;inset:0;display:none;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(env(safe-area-inset-top) + var(--pad)) calc(env(safe-area-inset-right) + var(--pad)) calc(env(safe-area-inset-bottom) + var(--pad)) calc(env(safe-area-inset-left) + var(--pad))}
.screen.active{display:flex;animation:fadein .25s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Buttons */
.btn{border:0;border-radius:16px;padding:12px 18px;font-size:17px;font-weight:500;background:var(--card);box-shadow:0 2px 0 var(--key-shadow),0 6px 18px rgba(60,30,90,.06);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;color:var(--ink)}
.btn:active{transform:translateY(2px);box-shadow:0 0 0 var(--key-shadow)}
.btn.primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 65%,#000)}
.btn.primary:active{box-shadow:0 0 0 transparent;transform:translateY(4px)}
.btn.big{font-size:22px;padding:16px 26px;min-height:62px;border-radius:20px}
.btn.ghost{background:transparent;box-shadow:none;color:var(--muted)}
.btn.icon{width:48px;height:48px;padding:0;font-size:26px;border-radius:50%}
.btn.danger{color:var(--bad)}
.btn:disabled{opacity:.45;pointer-events:none}

/* Home */
.brand{display:flex;align-items:center;gap:14px;margin:8px auto 22px;max-width:960px;width:100%;color:var(--accent)}
.brand .logo{width:56px;height:56px;flex:none}
.brand h1{font-size:clamp(30px,5vw,44px);color:var(--ink)}
.sub{margin:2px 0 0;color:var(--muted);font-size:16px}
.profile-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px;max-width:960px;width:100%;margin:0 auto}
.pcard{background:var(--card);border-radius:28px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 30px rgba(60,30,90,.08);border:2px solid #fff;position:relative}
.pcard.unicorn{background:linear-gradient(160deg,#fff 0%,#ffeef8 60%,#f4ebff 100%)}
.pcard.mech{background:linear-gradient(160deg,#fff 0%,#eaf3ff 60%,#e5e9f8 100%)}
.pcard .pfig{height:clamp(170px,26vh,240px)}
.pcard .pfig .figure{height:100%}
.pcard .pname{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pcard h2{font-size:28px}
.pcard .plast{color:var(--muted);font-size:15px;min-height:20px}
.pcard .prow{display:flex;gap:10px}
.pcard .prow .btn{flex:1}
.pcard.unicorn .btn.primary{background:#d63c9a;box-shadow:0 4px 0 #9c2470}
.pcard.mech .btn.primary{background:#1f5fe0;box-shadow:0 4px 0 #143f99}
.pcard.pumpkin{background:linear-gradient(160deg,#fff 0%,#fff1e0 55%,#ffe0c2 100%)}
.pcard.pumpkin .btn.primary{background:#e36a16;box-shadow:0 4px 0 #a3470c}
body[data-theme="pumpkin"]{--bg1:#fff6ec;--bg2:#ffe8d2;--ink:#2a160c;--muted:#7a5a42;--accent:#e36a16;--accent-soft:#ffe3cc;--accent-ink:#fff;--key-shadow:#f0d2b8;--line:#f3e0d0}
@media (max-width:700px){
  .profile-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-width:0}
  .pcard{min-width:0;padding:8px;border-radius:18px;gap:6px;overflow:hidden}
  .pcard .pfig{height:112px}
  .pcard h2{font-size:12px;line-height:1.1;max-width:100%}
  .pcard .plast{font-size:11px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pcard .prow{flex-direction:column;gap:6px}
  .pcard .prow .btn,.pcard .prow .btn.big{font-size:13px;padding:8px 4px;min-height:36px;border-radius:12px}
  .pcard .pname{flex-direction:column;align-items:stretch;gap:0}
  .pcard h2{text-align:center}
  .edit-btn{font-size:12px;padding:0;text-align:center}
}
.edit-btn{background:none;border:0;font-size:15px;color:var(--muted);padding:8px;border-radius:10px}
.home-actions{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.sync-note{text-align:center;color:var(--ink);font-size:15px;line-height:1.35;margin:0 auto 22px;padding:12px 16px;background:#ffffffcc;border-radius:16px;max-width:960px;width:100%}
.sync-note.warn{color:var(--bad)}

/* Topbar */
.topbar{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:10px;margin-bottom:12px}
.topbar h2{text-align:center;font-size:24px}

/* Setup */
.setup-body{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--pad);max-width:1100px;width:100%;margin:0 auto;align-items:start}
.setup-fig{position:sticky;top:0}
#setup-figure{height:min(46vh,380px)}
.setup-form{display:flex;flex-direction:column;gap:14px}
.card{background:var(--card);border-radius:var(--r);padding:16px;box-shadow:0 6px 22px rgba(60,30,90,.06);border:1px solid #fff}
.card h3{font-size:19px;margin-bottom:10px}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.card-head h3{margin:0}
.quick{display:flex;gap:6px}
.chip-mini{border:0;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:8px 14px;font-size:15px;font-weight:600}
.chips{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.chip{border:2px solid var(--line);background:#fff;border-radius:16px;height:56px;font-size:24px;font-weight:600;color:var(--muted)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 60%,#000)}
.range{margin-top:12px}
.range summary{color:var(--muted);font-size:15px;padding:6px 0;cursor:pointer}
.steppers{display:grid;gap:8px;margin-top:8px}
.stepper{display:grid;grid-template-columns:1fr 44px 52px 44px;align-items:center;gap:6px;font-size:16px}
.stepper button{height:44px;border-radius:12px;border:0;background:var(--accent-soft);color:var(--accent);font-size:22px;font-weight:700}
.stepper b{text-align:center;font-size:22px}
.hint{color:var(--muted);font-size:14px;margin:8px 0 0}
.modes{display:grid;gap:10px}
.mode{border:2px solid var(--line);background:#fff;border-radius:18px;padding:14px 16px;text-align:left;display:flex;flex-direction:column;gap:3px}
.mode b{font-size:20px;font-weight:600}
.mode span{color:var(--muted);font-size:15px}
.mode.on{border-color:var(--accent);background:var(--accent-soft)}
.mode.on b{color:var(--accent)}

/* Game */
#screen-game{overflow:hidden;padding-bottom:calc(env(safe-area-inset-bottom) + 10px)}
.game-top{margin-bottom:6px}
.hud{display:flex;justify-content:center;gap:clamp(10px,4vw,34px)}
.hud-item{display:flex;flex-direction:column;align-items:center;line-height:1.05}
.hud-item small{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.hud-item b{font-size:clamp(20px,3.2vw,28px);font-variant-numeric:tabular-nums;font-weight:600}
.progress{height:10px;background:#ffffffaa;border-radius:99px;position:relative;overflow:hidden;margin:0 4px 8px}
#progress-bar{height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .3s}
#pace-mark{position:absolute;top:0;bottom:0;width:4px;border-radius:2px;background:#ffc83d;left:0;transition:left .5s linear;box-shadow:0 0 0 2px #fff}
.game-main{flex:1;min-height:0;display:grid;grid-template-columns:1fr minmax(340px,1fr);gap:var(--pad);align-items:stretch}
.stage{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;background:#ffffff66;border-radius:28px;border:1px solid #fff}
#game-figure{width:100%;height:100%;max-height:100%}
.mood{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:15px;color:var(--muted);font-weight:500}
.play{display:flex;flex-direction:column;min-height:0;justify-content:center;gap:8px;max-width:520px;width:100%;justify-self:center}
.task-row{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:10px;background:#fff;border-radius:24px;padding:10px 14px 10px 20px;box-shadow:0 6px 22px rgba(60,30,90,.08);border:3px solid transparent;transition:border-color .15s}
.task{font-size:clamp(38px,7vh,64px);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.eq{font-size:clamp(34px,6vh,56px);color:var(--muted)}
.answer{height:clamp(58px,10vh,88px);border-radius:18px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:clamp(38px,7vh,64px);font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent);min-width:110px}
.caret{display:inline-block;width:3px;height:.9em;background:var(--accent);margin-left:3px;border-radius:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.task-row.ok{border-color:var(--good)}
.task-row.ok .answer{background:#dcf7e8;color:var(--good)}
.task-row.no{border-color:var(--bad);animation:shake .35s}
.task-row.no .answer{background:#ffe1e6;color:var(--bad)}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.feedback{text-align:center;font-size:clamp(18px,3vh,24px);min-height:1.4em;font-weight:500}
.feedback.no{color:var(--bad)}
.feedback.ok{color:var(--good)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,1.2vh,12px)}
.keypad button{border:0;border-radius:20px;background:var(--key);color:var(--key-ink);font-size:clamp(28px,4.6vh,40px);font-weight:600;height:clamp(50px,9vh,84px);box-shadow:0 4px 0 var(--key-shadow);transition:transform .05s}
.keypad button.down{transform:translateY(4px);box-shadow:0 0 0 var(--key-shadow)}
.keypad .k-del{background:#f5f1fa;color:var(--muted);font-size:clamp(24px,3.8vh,32px)}
.keypad .k-ok{grid-column:1/-1;background:var(--good);color:#fff;font-size:clamp(26px,4.4vh,38px);height:clamp(60px,11vh,96px);box-shadow:0 5px 0 #0c7a41}
.keypad .k-ok.down{box-shadow:0 0 0 #0c7a41}
.countdown-overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg1) 80%,transparent);z-index:10}
.countdown-overlay.show{display:flex}
.countdown-overlay span{font-size:160px;font-weight:700;color:var(--accent);animation:pop .8s ease}
@keyframes pop{0%{transform:scale(.4);opacity:0}40%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}

/* Result */
.result-wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);max-width:1100px;width:100%;margin:auto;align-items:center}
#result-figure{height:min(62vh,480px)}
.result-info{display:flex;flex-direction:column;gap:14px}
.result-info h2{font-size:clamp(28px,4.5vw,42px)}
.result-text{margin:0;color:var(--muted);font-size:18px;line-height:1.4}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.stat{background:var(--card);border-radius:18px;padding:12px 14px;border:1px solid #fff}
.stat small{display:block;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.stat b{font-size:28px;font-weight:600;font-variant-numeric:tabular-nums}
.stat.goal-yes b{color:var(--good)}
.stat.goal-no b{color:var(--muted)}
.wrong-list{display:flex;flex-wrap:wrap;gap:6px}
.wrong-list .w{background:#ffe9ed;color:#b4233a;border-radius:10px;padding:6px 10px;font-size:16px;font-weight:500}
.result-actions{display:flex;gap:10px;flex-wrap:wrap}

/* History */
.history-body{display:flex;flex-direction:column;gap:14px;max-width:1000px;width:100%;margin:0 auto}
.chart svg{width:100%;height:auto;display:block}
.chart .empty,.tricky .empty{color:var(--muted);font-size:15px}
.legend{display:flex;gap:16px;font-size:14px;color:var(--muted);margin-top:6px;flex-wrap:wrap}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.tricky{display:flex;flex-wrap:wrap;gap:8px}
.tricky .t{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-size:17px}
.tricky .t small{color:var(--muted);font-size:13px;display:block}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:15px;font-variant-numeric:tabular-nums;-webkit-user-select:text;user-select:text}
th,td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--muted);font-weight:500;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
th:first-child,td:first-child,th:nth-child(2),td:nth-child(2),th:nth-child(3),td:nth-child(3){text-align:left}
td.yes{color:var(--good);font-weight:600}
.history-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(30,20,50,.35);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.modal[hidden]{display:none}
.modal-card{background:#fff;border-radius:24px;padding:22px;width:min(440px,100%);max-height:min(92dvh,720px);overflow:auto;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 60px rgba(30,20,50,.3)}
.modal-card h3{font-size:22px}
.modal-card p{margin:0;color:var(--muted);line-height:1.4}
.modal-card input[type=text]{font:inherit;font-size:20px;padding:12px 14px;border-radius:14px;border:2px solid var(--line);width:100%;-webkit-user-select:text;user-select:text}
.fig-pick{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.fig-pick button{border:2px solid var(--line);background:#fff;border-radius:16px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:16px}
.fig-pick button.on{border-color:var(--accent);background:var(--accent-soft)}
.fig-pick .mini{width:100%;height:84px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* Figures */
.figure{display:flex;align-items:center;justify-content:center}
.figure svg{width:100%;height:100%;overflow:visible}
.figure svg path.tw{transform-box:fill-box;transform-origin:center;animation:twinkle 1.8s ease-in-out infinite}
@keyframes twinkle{0%,100%{transform:scale(.6) rotate(0);opacity:.6}50%{transform:scale(1.15) rotate(20deg);opacity:1}}
.figure.happy svg{animation:bob 1.6s ease-in-out infinite}
.figure.fly .h-flyer,.figure.fly .mech,.figure.fly .p-flyer{animation:hover 1.45s ease-in-out infinite;transform-box:view-box;transform-origin:150px 230px}
.figure.sad svg{animation:droop 3.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes hover{0%,100%{transform:translateY(-12px)}50%{transform:translateY(-20px)}}
.figure.fly .h-wing-flap{transform-box:view-box;transform-origin:150px 160px;animation:flap .46s ease-in-out infinite}
.figure.fly .h-wing-far .h-wing-flap{transform-origin:162px 156px;animation-delay:.06s}
@keyframes flap{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-16deg)}}
.figure.fly .m-flame{transform-box:view-box;animation:thrust .16s ease-in-out infinite}
.figure.fly .m-flame:nth-child(1){transform-origin:124px 263px}
.figure.fly .m-flame:nth-child(2){transform-origin:176px 263px;animation-delay:.06s}
@keyframes thrust{0%,100%{transform:scaleY(.68) scaleX(.86)}50%{transform:scaleY(1.16) scaleX(1.05)}}
.figure.fly .p-wing-flap{transform-box:view-box}
.figure.fly .p-wing-near .p-wing-flap{transform-origin:100px 176px;animation:flap-out .46s ease-in-out infinite}
.figure.fly .p-wing-far .p-wing-flap{transform-origin:200px 176px;animation:flap-out-r .46s ease-in-out infinite;animation-delay:.05s}
@keyframes flap-out{0%,100%{transform:rotate(0)}50%{transform:rotate(14deg)}}
@keyframes flap-out-r{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
.p-bat{transform-box:view-box;animation:batbob 2.4s ease-in-out infinite}
@keyframes batbob{0%,100%{transform:translate(0,0)}50%{transform:translate(7px,-9px)}}

@keyframes droop{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(-3px) rotate(-1deg)}}
.u-cloud .rain{animation:rain .9s linear infinite}
@keyframes rain{from{transform:translateY(-4px);opacity:1}to{transform:translateY(14px);opacity:0}}
.u-tear{animation:tear 2s ease-in infinite}
@keyframes tear{0%,40%{transform:translateY(0)}100%{transform:translateY(26px)}}
.u-burst .bp{opacity:0;transform-box:fill-box;transform-origin:center}
.m-aura{transform-origin:150px 160px;animation:spin 12s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.m-smoke .sm{fill:#8a8d91;animation:smoke 2.1s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes smoke{0%{transform:translate(0,0) scale(.5);opacity:.85}100%{transform:translate(18px,-50px) scale(1.8);opacity:0}}
.m-sparks .spk{animation:spark .7s steps(2) infinite;transform-box:fill-box;transform-origin:center}
@keyframes spark{0%{opacity:1;transform:scale(1)}50%{opacity:0;transform:scale(.4)}}
.figure.sad .m-eye2{animation:flicker 1.3s steps(1) infinite}
@keyframes flicker{0%,70%,90%{opacity:1}75%,95%{opacity:.15}}
.m-muzzle{transform-box:fill-box;transform-origin:center;animation:charge 1.1s ease-in-out infinite}
@keyframes charge{50%{transform:scale(1.3)}}
.m-beam{opacity:0;transform-box:fill-box;transform-origin:left center;transform:scaleX(0)}
.m-bolt-fall{opacity:0}

.figure.pulse-good svg{animation:pgood .4s ease}
.figure.pulse-bad svg{animation:pbad .4s ease}
@keyframes pgood{40%{transform:scale(1.05) translateY(-6px)}}
@keyframes pbad{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* Finale */
.figure.finale-win svg{animation:jump 1s ease 3}
@keyframes jump{0%,100%{transform:translateY(0)}40%{transform:translateY(-34px) rotate(-3deg)}70%{transform:translateY(0)}}
.figure-unicorn.finale-win .bp{animation:burst 1.4s ease-out 3}
@keyframes burst{0%{opacity:1;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.4) rotate(90deg)}}
.figure-mech.finale-win .m-beam{animation:beam 1s ease-out 3;animation-delay:.3s}
@keyframes beam{0%{opacity:0;transform:scaleX(0)}15%{opacity:1;transform:scaleX(1)}60%{opacity:1}100%{opacity:0;transform:scaleX(1)}}
.figure.finale-ok svg{animation:wiggle .9s ease 2}
@keyframes wiggle{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
.figure.finale-sad svg{animation:sigh 1.8s ease 2}
@keyframes sigh{50%{transform:translateY(8px) scaleY(.96)}}
.figure-mech.finale-sad .m-bolt-fall{opacity:1}.figure-mech.finale-sad .m-bolt-fall circle{animation:boltfall 1.6s ease-out 1 forwards}
@keyframes boltfall{0%{opacity:1;transform:translate(0,0)}100%{opacity:1;transform:translate(-90px,22px) rotate(-420deg)}}
.m-bolt-fall circle{transform-box:fill-box;transform-origin:center}
.u-flies .fly{transform-box:view-box;transform-origin:248px 76px;animation:flyc 1.5s linear infinite}
@keyframes flyc{to{transform:rotate(360deg)}}

/* Responsive */
@media (orientation:portrait), (max-width:820px){
  .game-main{grid-template-columns:1fr;grid-template-rows:minmax(110px,1fr) auto}
  .stage{border-radius:22px}
  .mood{bottom:4px;font-size:13px}
  .play{max-width:560px}
  .setup-body{grid-template-columns:1fr}
  .setup-fig{position:static}
  #setup-figure{height:min(26vh,220px)}
  .result-wrap{grid-template-columns:1fr}
  #result-figure{height:min(36vh,320px)}
}
@media (max-width:420px){
  .chips{grid-template-columns:repeat(5,1fr);gap:6px}
  .chip{height:50px;font-size:21px}
  .task-row{padding:8px 10px 8px 14px;gap:6px}
  .answer{min-width:92px}
  .stats{grid-template-columns:1fr 1fr}
  .stat b{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  .figure svg,.figure svg *{animation:none!important}
  .figure.fly .h-flyer,.figure.fly .mech,.figure.fly .p-flyer{transform:translateY(-14px)}
}

/* Nachbesserungen */
#btn-start{position:sticky;bottom:calc(env(safe-area-inset-bottom) + 8px);z-index:5;box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 65%,#000),0 10px 30px rgba(0,0,0,.15)}
.setup-form{padding-bottom:96px}
@media (max-width:600px){ .pcard .pfig{height:112px} .pcard h2{font-size:12px} }
.play{max-width:580px}

.hud-target{font-size:11px!important;text-transform:none!important;letter-spacing:0!important;margin-top:2px}
@media (max-width:520px){
  .game-top{grid-template-columns:40px 1fr 40px;gap:6px}
  .game-top .btn.icon{width:40px;height:40px;font-size:22px}
  .hud{gap:10px}
  .hud-item small{font-size:10px;letter-spacing:.03em}
  .hud-item b{font-size:19px}
  .hud-target{font-size:10px!important}
}

.hud-item b{color:var(--ink)!important}

/* Bonus-Effekt im Höchstzustand */
.figure-unicorn.zap .bp{animation:burst 1.1s ease-out 1}
.figure-mech.zap .m-beam{animation:beam .9s ease-out 1}
.figure-mech.zap .m-muzzle{animation:charge .3s ease-in-out 3}
.figure.zap svg{animation:zapjump .5s ease 1}
@keyframes zapjump{40%{transform:translateY(-10px) scale(1.03)}}
.rp{opacity:0}
.figure-unicorn.zap .rp{animation:rain 1.1s ease-in 1}
@keyframes rain{0%{opacity:0;transform:translateY(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(330px) rotate(180deg)}}
.rp{transform-box:fill-box;transform-origin:center}
#screen-game .stage{overflow:hidden}

/* Plus & Minus bis 1000 */
[hidden]{display:none!important}
.fams .mode{padding:10px 14px}
.fams .mode b{font-size:18px}
.fams .mode span{font-size:14px}
.play{position:relative}
.chain{text-align:center;font-size:clamp(14px,2.2vh,18px);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-tail{display:none}
.task-row.long .task,.task-row.long .answer,.task-row.long .task-tail{font-size:clamp(30px,5.6vh,54px)}
.task-row.long .eq{font-size:clamp(28px,5vh,48px)}
.task-row.long .answer{min-width:0;padding:0 8px}
.task-row.missing{grid-template-columns:auto minmax(0,1fr) auto}
.task-row.missing .eq{display:none}
.task-row.missing .task-tail{display:block;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.hintbox{position:absolute;left:0;right:0;bottom:0;z-index:4;background:#fff;border:3px solid var(--bad);border-radius:22px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;justify-content:center;text-align:center;box-shadow:0 8px 30px rgba(60,30,90,.18);min-height:55%}
.hintbox .h-res{font-size:clamp(24px,4vh,34px);font-weight:700;color:var(--good);font-variant-numeric:tabular-nums}
.hintbox .h-way{font-size:clamp(17px,2.6vh,22px);font-variant-numeric:tabular-nums;line-height:1.35}
.hintbox .h-diag{font-size:clamp(15px,2.2vh,19px);color:var(--accent);font-weight:600;line-height:1.3}
.hintbox .h-next{font-size:13px;color:var(--muted)}
.famtable{width:100%;border-collapse:collapse;font-size:14px;margin-top:4px}
.famtable th,.famtable td{padding:5px 4px;border-bottom:1px solid var(--line);text-align:right}
.famtable th:first-child,.famtable td:first-child{text-align:left}
.famtable td.yes{color:var(--good);font-weight:600}
@media (max-width:420px){
  .task-row.long{padding:8px 8px 8px 12px;gap:5px}
  .task-row.long .task,.task-row.long .answer,.task-row.long .task-tail{font-size:clamp(26px,4.6vh,40px)}
  .task-row.long .eq{font-size:clamp(24px,4.2vh,36px)}
}
.hintbox .h-way span{white-space:nowrap}
.famtable th:last-child,.famtable td:last-child{padding-right:8px}
@media (max-width:420px){.famtable{font-size:13px}.famtable th{font-size:11px}}
.fam-opt{margin:-4px 0 2px 14px;padding:8px 10px;border-left:3px solid var(--accent);display:grid;gap:6px}
.fam-opt small{color:var(--muted);font-size:13px}
.fam-opt>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chip-opt{border:2px solid var(--line);background:#fff;border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:2px;text-align:center}
.chip-opt b{font-size:16px}.chip-opt span{font-size:12px;color:var(--muted)}
.chip-opt.on{border-color:var(--accent);background:var(--accent-soft)}.chip-opt.on b{color:var(--accent)}