:root{
  --ink:#222222;
  --brown:#543d31;
  --glass:rgba(255,255,255,.70);
  --glass-border:rgba(255,255,255,.96);
  --shadow:0 8px 24px rgba(58,64,58,.10);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;background:#e8eee8;color:var(--ink);font-family:"MiSans","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow:hidden}
html{overscroll-behavior:none}
body{position:relative;height:100vh;height:100dvh;padding:0;overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;border:0;padding:0;background:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:pointer}
button:focus-visible{outline:3px solid rgba(91,145,225,.45);outline-offset:3px}

/* Background is completely independent from the UI artboard. */
.ambient-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#e8eee8}
.ambient-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;transform:none;filter:none;opacity:1}
.ambient-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01) 58%,rgba(247,250,247,.05));pointer-events:none}

/* One 750×1624 design artboard. Mobile sizing is WIDTH-FIRST: the whole UI fills the usable width with one uniform scale.
   The stage stays in normal document flow so unusually short browser viewports can scroll instead of shrinking the entire game. */
.game-stage{position:absolute;z-index:1;left:50%;top:var(--safe-top);width:750px;height:1624px;overflow:visible;pointer-events:auto;transform:translateX(-50%)}
.game-shell{position:absolute;left:0;top:0;width:750px;height:1624px;transform-origin:0 0;overflow:visible;background:transparent;isolation:isolate;touch-action:none}
.scene-bg,.light-wash,.game-shell::after{display:none!important}
.glass{background:var(--glass);border:2px solid var(--glass-border);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.60);-webkit-backdrop-filter:blur(18px) saturate(112%);backdrop-filter:blur(18px) saturate(112%)}

/* ===== Confirmed Sketch coordinates: top HUD ===== */
.hero-hud{position:absolute;left:0;top:0;width:750px;height:386px;pointer-events:none}
.hero-center{position:static;width:auto;height:auto;margin:0;padding:0}

.coin-pill{position:absolute;left:48px;top:var(--coin-y,48px);width:174px;height:68px;border-radius:34px;display:flex;align-items:center;padding:0 24px;gap:8px;pointer-events:auto;white-space:nowrap}
.coin-pill img{width:32px;height:32px;object-fit:contain;flex:0 0 auto}
.coin-pill strong{font-size:26px;line-height:1;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.2px;white-space:nowrap}

.level-plaque{position:absolute;left:251px;top:var(--level-y,40px);width:248px;height:112px;pointer-events:none;animation:plaqueFloat 4.5s ease-in-out infinite}
.level-plaque>img{position:absolute;inset:0;width:248px;height:112px;object-fit:fill;filter:drop-shadow(0 6px 8px rgba(73,62,50,.08))}
.level-plaque>strong{position:absolute;left:0;top:46px;width:248px;height:34px;display:flex;align-items:center;justify-content:center;font-size:34px;line-height:34px;font-weight:700;color:var(--brown);letter-spacing:1px;white-space:nowrap}
.level-plaque.level-102-offset>strong{top:56px}

.status-pill{position:absolute;left:235px;top:var(--status-y,192px);width:280px;height:68px;border-radius:34px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;pointer-events:none}
.status-pill>img{width:48px;height:54px;object-fit:contain;flex:0 0 auto}
.status-pill span{font-size:26px;line-height:1;font-weight:500;white-space:nowrap}
.status-pill strong{font-weight:650;font-variant-numeric:tabular-nums}

.hearts-pill{position:absolute;left:275px;top:var(--hearts-y,286px);width:200px;height:68px;border-radius:34px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;pointer-events:none}
.heart-img{width:50px;height:44px;object-fit:contain;display:block;flex:0 0 50px;filter:drop-shadow(0 2px 2px rgba(179,58,80,.08));transition:opacity .2s,filter .2s}
.heart-img.lost{width:50px;height:44px;flex-basis:50px;filter:grayscale(1) saturate(0) brightness(1.08);opacity:.26;transform:none!important}
.heart-img.heart-hit{animation:heartPop .36s ease}

.side-nav{position:absolute;width:96px;display:flex;flex-direction:column;gap:var(--side-gap,18px);pointer-events:none}
.side-nav--left{left:48px;top:var(--side-y,144px)}
.side-nav--right{left:606px;top:var(--side-y,144px)}
.nav-item{width:96px;height:96px;display:grid;place-items:center;pointer-events:auto}
.nav-item+ .nav-item{margin-top:0}
.nav-item small{display:none!important}
.round-glass{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.58);border:2px solid rgba(255,255,255,.96);box-shadow:0 7px 18px rgba(58,64,58,.11),inset 0 1px 0 rgba(255,255,255,.62);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:transform .12s ease,filter .12s ease}
.side-nav--left .nav-item:first-child .round-glass img{width:52px;height:50px;object-fit:contain}
.side-nav--left .nav-item:last-child .round-glass img{width:54px;height:52px;object-fit:contain}
.side-nav--right .nav-item:first-child .round-glass img{width:50px;height:52px;object-fit:contain}
.side-nav--right .nav-item:last-child .round-glass img{width:32px;height:52px;object-fit:contain}
.nav-item:active .round-glass,.nav-item.fx-press .round-glass{transform:scale(.91);filter:brightness(.98)}

/* ===== Rules ===== */
.rules-panel{position:absolute;left:15px;top:var(--rules-y,386px);width:720px;height:112px;border-radius:24px;display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;align-items:center;padding:18px 28px;pointer-events:none}
.rules-panel>div{min-width:0;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px}
.rules-panel>div b{font-size:24px;line-height:1.15;font-weight:700;white-space:nowrap}
.rules-panel>div small{font-size:24px;line-height:1.15;font-weight:400;white-space:nowrap}
.rules-panel>i{width:1px;height:76px;background:rgba(65,65,65,.18);justify-self:center}
.rule-dot{display:none!important}

/* ===== Board ===== */
.board-zone{position:absolute;left:15px;top:var(--board-y,530px);width:720px;height:720px;padding:0;margin:0;display:block}
.board-panel{position:absolute;inset:0;width:720px;height:720px;border-radius:24px;padding:24px;overflow:hidden}
.board-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.02) 58%);pointer-events:none}
.board{position:relative;z-index:1;width:672px;height:672px;display:grid;gap:12px;touch-action:none}
.cell{position:relative;min-width:0;min-height:0;width:auto;height:auto;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--cell-bg) 82%,#fff 18%);border-radius:8px;background:linear-gradient(180deg,color-mix(in srgb,var(--cell-bg) 95%,#fff 5%),var(--cell-bg));display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.34);transition:transform .075s ease-out,filter .10s ease-out,box-shadow .10s ease-out;animation:cellIn .30s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 7ms);touch-action:none}
.cell::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 35% 20%,rgba(255,255,255,.16),transparent 48%);pointer-events:none}
.cell.cell-pressed{transform:scale(.955);filter:brightness(.985)}
.cell.cell-marked{animation:cellConfirm .24s cubic-bezier(.2,.9,.25,1.2)}
.cell.is-wrong{animation:wrongCell .40s ease;box-shadow:inset 0 0 0 3px rgba(238,89,100,.88),0 0 12px rgba(238,89,100,.22)}
.cell.is-hinted,.cell.is-zone-hint{box-shadow:inset 0 0 0 3px rgba(255,255,255,.94),0 0 16px rgba(255,201,70,.55);animation:hintPulse .9s ease-in-out 2}
.cell.region-complete{filter:saturate(.84) brightness(1.02)}
.mark-x,.mark-q{position:relative;z-index:2;font-family:system-ui,sans-serif;font-weight:760;color:rgba(255,255,255,.92);line-height:1;text-shadow:0 2px 3px rgba(0,0,0,.05);pointer-events:none;animation:markPop .18s ease}
.mark-x{font-size:64px}.mark-q{font-size:52px}
.cell img.panda-mark{position:relative;z-index:2;width:76%;height:82%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 4px 4px rgba(65,50,40,.12));animation:pandaLand .46s cubic-bezier(.17,.84,.44,1.4)}
.cell.cell-hold-ready{transform:scale(.965);filter:brightness(1.045) saturate(1.03);box-shadow:inset 0 0 0 3px rgba(255,255,255,.64),0 3px 10px rgba(62,70,62,.08)}
.cell.cell-hold-confirm{animation:holdConfirm .28s cubic-bezier(.2,.9,.25,1.25)!important}
.board.screen-jolt{animation:screenJolt .34s ease}
.board-panel.fx-level-enter{animation:boardLevelEnter .44s cubic-bezier(.2,.72,.22,1)}
.board-panel.fx-clear{animation:boardClearBreathe .32s ease-out}
.board-panel.fx-error{animation:boardErrorPulse .36s ease-out}
.board-panel.fx-win{animation:boardWinGlow .72s ease-out}
.cell.fx-win-cell{animation:winCellWave .46s cubic-bezier(.2,.9,.25,1.2);animation-delay:var(--wave-delay,0ms)}

/* Panda-found effects */
.cell.panda-found{z-index:3;overflow:visible;animation:pandaCellCelebrate .70s cubic-bezier(.2,.85,.25,1)}
.cell.panda-found .panda-mark{animation:pandaFoundPop .62s cubic-bezier(.18,.9,.3,1.35)}
.cell.panda-found::before{content:"";position:absolute;left:50%;top:50%;width:78%;height:78%;border-radius:50%;background:radial-gradient(circle,rgba(255,244,172,.72),rgba(255,255,255,.24) 42%,transparent 72%);transform:translate(-50%,-50%) scale(.35);z-index:1;pointer-events:none;animation:pandaHalo .64s ease-out forwards}
.panda-burst-ring{position:absolute;left:50%;top:50%;width:42%;aspect-ratio:1;border-radius:50%;border:3px solid rgba(255,255,255,.92);transform:translate(-50%,-50%) scale(.45);z-index:3;pointer-events:none;animation:pandaRing .66s ease-out forwards}
.panda-burst{position:absolute;inset:0;z-index:4;pointer-events:none;display:grid;place-items:center}
.panda-burst i{position:absolute;left:50%;top:50%;font-style:normal;font-size:16px;line-height:1;color:#fff8d5;text-shadow:0 1px 5px rgba(119,91,45,.22);opacity:0;animation:pandaBurstStar .60s ease-out var(--delay) forwards}
.cell-spark{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;z-index:5;pointer-events:none;animation:sparkFly .58s ease-out forwards}

/* ===== Bottom dock ===== */
.action-dock{position:absolute;left:55px;top:var(--dock-y,1360px);width:640px;height:200px;border-radius:24px;padding:22px 32px;display:grid;grid-template-columns:repeat(4,120px);column-gap:32px;align-items:start;overflow:visible}
.action-item{position:relative;width:120px;height:156px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;touch-action:none}
.action-box{position:relative;width:120px;height:120px;border-radius:22px;background:rgba(252,248,243,.80);border:2px solid rgba(255,255,255,.96);box-shadow:0 6px 16px rgba(51,51,51,.10),inset 0 1px 0 rgba(255,255,255,.62);display:grid;place-items:center;transition:transform .12s ease,filter .12s ease}
.action-box img{width:auto;height:auto;max-width:78px;max-height:82px;object-fit:contain}
#clearBtn .action-box img{width:75px;height:78px}
#finderBtn .action-box img{width:76px;height:82px}
#hintBtn .action-box img{width:77px;height:92px;max-height:92px}
#modeBtn .action-box img{width:76px;height:76px}
.action-label,.action-item>span:last-child{font-size:22px;line-height:22px;font-weight:500;white-space:nowrap;text-align:center;color:#0f0f0f}
.action-item:active .action-box,.action-item.fx-press .action-box{transform:translateY(2px) scale(.93);filter:brightness(.98)}
.action-item[disabled]{opacity:.44;cursor:default}.action-item[disabled] .action-box{filter:grayscale(.20)}
.action-box em{position:absolute;right:-7px;top:-7px;min-width:28px;height:28px;padding:0 6px;border-radius:14px;background:#fb7e91;color:#fff;font-size:18px;line-height:28px;font-style:normal;font-weight:750;text-align:center;box-shadow:0 3px 7px rgba(181,72,86,.24);border:1px solid rgba(255,255,255,.65)}
.mode-preview,.mode-state{display:none!important}

/* ===== Floating feedback ===== */
.game-fx{position:absolute;inset:0;pointer-events:none;z-index:25;overflow:hidden}
.leaf-fx{position:absolute;width:10px;height:17px;border-radius:70% 0 70% 0;background:#9fc76b;opacity:.8;animation:leafDrift var(--dur,1.1s) ease-out forwards}
.coin-pill.fx-coin-bump{animation:coinTrayBump .40s cubic-bezier(.2,.9,.25,1.2)}
.status-pill.fx-hud-bump{animation:hudBump .28s cubic-bezier(.2,.9,.25,1.2)}
.hearts-pill.fx-heart-shock{animation:heartTrayShock .32s ease-out}
.coin-float{position:absolute;right:10px;top:50%;z-index:4;font-size:20px;font-weight:800;line-height:1;color:#d99b20;text-shadow:0 2px 3px rgba(255,255,255,.9);pointer-events:none;animation:coinFloat .80s ease-out forwards}

/* ===== Toast / modal: viewport responsive, separate from the scaled artboard ===== */
.toast{position:fixed;z-index:110;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,10px);max-width:min(86vw,520px);padding:10px 16px;border-radius:999px;background:rgba(47,43,39,.84);color:#fff;font-size:14px;line-height:1.35;opacity:0;pointer-events:none;transition:.18s ease;text-align:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 6px 20px rgba(0,0,0,.12)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.confetti-layer{position:fixed;z-index:105;inset:0;pointer-events:none;overflow:hidden}.confetti{position:absolute;top:-20px;width:9px;height:15px;border-radius:2px;background:var(--confetti);animation:confettiFall var(--dur) linear forwards;transform:rotate(var(--rot))}
.modal-backdrop{position:fixed;z-index:120;inset:0;background:rgba(43,50,45,.28);display:grid;place-items:center;padding:18px;-webkit-backdrop-filter:blur(10px) saturate(.9);backdrop-filter:blur(10px) saturate(.9);touch-action:none}
.modal-backdrop[hidden]{display:none}
.modal-card{position:relative;width:min(92vw,430px);max-height:min(86vh,720px);overflow:auto;background:rgba(247,247,242,.94);border:2px solid rgba(255,255,255,.96);border-radius:28px;padding:24px;box-shadow:0 22px 65px rgba(54,62,57,.22);-webkit-backdrop-filter:blur(26px) saturate(112%);backdrop-filter:blur(26px) saturate(112%);text-align:center;animation:modalIn .24s cubic-bezier(.2,.8,.2,1)}
.modal-card.compact-card{padding-top:30px}.modal-close{position:absolute;right:13px;top:13px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.76);font-size:25px;box-shadow:0 3px 10px rgba(0,0,0,.07)}
.panda-medal{width:118px;height:102px;margin:2px auto 12px;display:grid;place-items:end center}.panda-medal img{width:95px;height:102px;object-fit:contain;filter:drop-shadow(0 7px 5px rgba(65,55,45,.11))}.panda-medal--happy{animation:medalBounce 1.8s ease-in-out infinite}.panda-medal--lose{filter:saturate(.75)}
.modal-card h2{margin:2px 0 16px;font-size:28px;color:#513d31;line-height:1.15}.rule-list{display:grid;gap:8px;text-align:left}.rule-list p{margin:0;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.58);padding:10px 12px;border-radius:14px}.rule-list b{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#dbe59d;color:#4b5d34}.rule-list span{font-size:14px;line-height:1.35}.gesture-tip,.lose-copy{font-size:14px;line-height:1.55;color:#665f5a;margin:13px 4px 0}.modal-main,.modal-sub,.setting-row{width:100%;min-height:50px;border-radius:16px}.modal-main{margin-top:16px;background:linear-gradient(180deg,#98c96b,#88b95c);box-shadow:0 6px 14px rgba(89,136,54,.2),inset 0 1px 0 rgba(255,255,255,.24);color:#fff;font-weight:750;font-size:17px}.modal-sub{margin-top:9px;background:rgba(255,255,255,.72);color:#57483f}.setting-row{margin-top:10px;padding:0 15px;background:rgba(255,255,255,.68);display:flex;align-items:center;justify-content:space-between;font-size:16px}.setting-row strong{color:#77a850}.music-credit{margin:14px 6px 0;font-size:11px;line-height:1.45;color:#857a71}
.result-kicker{display:inline-flex;padding:5px 12px;border-radius:999px;background:#f4d56b;color:#705821;font-size:12px;font-weight:800;letter-spacing:.09em}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.result-grid>div{padding:12px 5px;background:rgba(255,255,255,.58);border-radius:14px}.result-grid span{display:block;font-size:12px;color:#7a736d}.result-grid strong{display:block;margin-top:4px;font-size:16px}.empty-hearts{display:flex;justify-content:center;gap:18px;margin:4px 0 8px}.empty-hearts img{width:40px;height:auto;filter:grayscale(1) saturate(0) brightness(1.05);opacity:.26}
.rank-list{display:grid;gap:8px}.rank-row{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:8px;background:rgba(255,255,255,.62);padding:11px;border-radius:13px;text-align:left}.rank-row>b{color:#8ebf62}.rank-row>span{min-width:0}.rank-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.rank-row small{display:block;margin-top:2px;font-size:12px;color:#8b827b}.rank-row em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums}.rank-row.is-me{box-shadow:inset 0 0 0 2px rgba(142,191,98,.28)}.rank-empty{display:grid;gap:5px;padding:18px 10px;background:rgba(255,255,255,.56);border-radius:14px}.rank-empty span{font-size:13px;color:#81786f}

/* ===== Animations ===== */
@keyframes plaqueFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes heartPop{40%{transform:scale(1.18) rotate(-5deg)}100%{transform:scale(1)}}
@keyframes cellIn{from{opacity:0;transform:scale(.90)}to{opacity:1;transform:scale(1)}}
@keyframes cellConfirm{0%{transform:scale(.96)}55%{transform:scale(1.025)}100%{transform:scale(1)}}
@keyframes wrongCell{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
@keyframes screenJolt{20%{translate:-3px 0}45%{translate:4px 0}70%{translate:-2px 0}100%{translate:0 0}}
@keyframes hintPulse{0%,100%{filter:none}50%{filter:brightness(1.10);transform:scale(.97)}}
@keyframes pandaLand{0%{opacity:0;transform:translateY(-14%) scale(.55)}65%{opacity:1;transform:translateY(2%) scale(1.12)}100%{transform:none}}
@keyframes markPop{0%{opacity:0;transform:scale(.4) rotate(-12deg)}100%{opacity:1;transform:none}}
@keyframes holdConfirm{0%{transform:scale(.95)}55%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes boardLevelEnter{0%{opacity:.15;transform:translateY(8px) scale(.985);filter:blur(1px)}100%{opacity:1;transform:none;filter:none}}
@keyframes boardClearBreathe{0%{filter:brightness(1)}45%{filter:brightness(1.04)}100%{filter:brightness(1)}}
@keyframes boardErrorPulse{0%,100%{box-shadow:var(--shadow)}45%{box-shadow:0 0 0 4px rgba(236,107,117,.12),0 8px 28px rgba(143,67,72,.12)}}
@keyframes boardWinGlow{0%{filter:none}40%{filter:brightness(1.06) saturate(1.06);box-shadow:0 0 0 5px rgba(255,255,255,.30),0 10px 34px rgba(142,185,91,.17)}100%{filter:none}}
@keyframes winCellWave{0%{transform:scale(1)}48%{transform:scale(.90)}75%{transform:scale(1.055)}100%{transform:scale(1)}}
@keyframes pandaFoundPop{0%{opacity:.15;transform:translateY(8%) scale(.5) rotate(-5deg)}45%{opacity:1;transform:translateY(-7%) scale(1.16) rotate(3deg)}72%{transform:translateY(1%) scale(.96) rotate(-1deg)}100%{transform:none}}
@keyframes pandaCellCelebrate{0%,100%{filter:none}40%{filter:brightness(1.08) saturate(1.05)}}
@keyframes pandaHalo{0%{opacity:.8;transform:translate(-50%,-50%) scale(.28)}60%{opacity:.52}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}}
@keyframes pandaRing{0%{opacity:.95;transform:translate(-50%,-50%) scale(.35)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}}
@keyframes pandaBurstStar{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}25%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.85)}}
@keyframes sparkFly{to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.1)}}
@keyframes leafDrift{to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(250deg)}}
@keyframes hudBump{0%{transform:scale(1)}48%{transform:scale(.965)}72%{transform:scale(1.025)}100%{transform:scale(1)}}
@keyframes heartTrayShock{0%{transform:translateX(0)}25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-1px)}100%{transform:none}}
@keyframes coinTrayBump{0%{transform:scale(1)}38%{transform:scale(.96)}68%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes coinFloat{0%{opacity:0;transform:translateY(-50%) scale(.65)}22%{opacity:1;transform:translateY(-75%) scale(1.05)}100%{opacity:0;transform:translateY(-155%) scale(.94)}}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes medalBounce{50%{transform:translateY(-4px) rotate(1deg)}}
@keyframes confettiFall{to{transform:translate(var(--drift),105vh) rotate(720deg)}}

@media (prefers-reduced-motion:reduce){
  .level-plaque,.cell,.board-panel,.panda-medal,.heart-img,.coin-pill,.status-pill,.hearts-pill{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .coin-float,.panda-burst-ring,.panda-burst,.cell-spark,.leaf-fx,.confetti{display:none!important}
}

/* v1.0 responsive-fit-final: all visible UI keeps one uniform scale; only vertical gaps compress on short screens. */