:root{color:#513527;background:#fff4df;font-family:Trebuchet MS,Segoe UI,Arial,sans-serif;--panel: rgba(255, 249, 233, .86);--ink: #513527;--honey: #ffc94a;--berry: #d86f82;--mint: #75bea4;--sky: #7eb8d8}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app,#game-root{width:100%;height:100%;margin:0;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none}body{min-width:320px}canvas{display:block;width:100%;height:100%}.hidden{display:none!important}.screen{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:radial-gradient(circle at 18% 24%,rgba(255,255,255,.65),transparent 18%),radial-gradient(circle at 76% 16%,rgba(255,210,105,.42),transparent 20%),linear-gradient(160deg,#ffe6c8,#e4f3ec 45%,#f9d6dc)}.start-panel,.celebration-panel{width:min(920px,94vw);max-height:92vh;padding:clamp(20px,4vh,40px);border:4px solid rgba(255,255,255,.68);border-radius:26px;background:linear-gradient(135deg,rgba(255,255,255,.3),transparent 46%),var(--panel);box-shadow:0 18px 45px #50321f2e,inset 0 -12px #63432f09;text-align:center;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}h1,h2,p{margin:0}h1{font-family:Georgia,Times New Roman,serif;font-size:clamp(2.1rem,6vw,4.8rem);line-height:1}h2{font-family:Georgia,Times New Roman,serif;font-size:clamp(2rem,5vw,4rem);line-height:1.05}p{margin-top:12px;font-size:clamp(1.05rem,2.2vw,1.55rem);font-weight:700}.character-picker{display:grid;grid-template-columns:repeat(2,minmax(170px,1fr));gap:clamp(14px,3vw,28px);margin:clamp(20px,4vh,34px) auto}.character-card{display:grid;gap:12px;place-items:center;min-height:clamp(170px,30vh,260px);border:4px solid rgba(255,255,255,.85);border-radius:20px;color:var(--ink);background:radial-gradient(circle at 50% 25%,rgba(255,255,255,.5),transparent 34%),#ffffff94;box-shadow:inset 0 -12px #64432f0d,0 8px 22px #50321f1f;cursor:pointer;font-size:clamp(1.3rem,3vw,2.1rem);font-weight:900}.character-card.selected{border-color:var(--honey);background:#fff6c9e0;transform:translateY(-3px)}.primary-button{min-width:min(360px,86vw);min-height:76px;border:0;border-radius:999px;color:#4b2f20;background:linear-gradient(#ffe27d,#ffc64b);box-shadow:0 9px #d79935,0 18px 34px #50321f33;cursor:pointer;font-size:clamp(1.35rem,3vw,2rem);font-weight:1000}.primary-button:active,.character-card:active,.touch-button:active,.jump-button:active,.sound-button:active{transform:translateY(3px) scale(.98)}.controller-badge,.controller-hint{color:#513527;background:#fffae6c7;border:3px solid rgba(255,255,255,.75);box-shadow:0 8px 20px #50321f1f;font-weight:900}.controller-badge{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:-10px 0 18px;padding:8px 18px;border-radius:999px;font-size:clamp(1rem,2vw,1.25rem)}.controller-hint{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));z-index:8;transform:translate(-50%);padding:10px 18px;border-radius:999px;font-size:clamp(.95rem,2vw,1.2rem);pointer-events:none;white-space:nowrap}.mini-character{position:relative;display:block;width:clamp(96px,15vw,150px);height:clamp(116px,18vw,180px);filter:drop-shadow(0 10px 9px rgba(80,50,31,.18))}.mini-character:before,.mini-character:after{content:"";position:absolute;left:50%;transform:translate(-50%)}.koala-preview{background:radial-gradient(ellipse at 48% 31%,#111 0 14%,transparent 15%),radial-gradient(circle at 37% 24%,#151515 0 4%,#6b4637 5% 7%,transparent 8%),radial-gradient(circle at 63% 24%,#151515 0 4%,#6b4637 5% 7%,transparent 8%),radial-gradient(ellipse at 50% 42%,#f0eadc 0 19%,transparent 20%),radial-gradient(ellipse at 50% 73%,#f0eadc 0 34%,transparent 35%),radial-gradient(circle at 20% 16%,#f0eadc 0 10%,#666b69 11% 22%,transparent 23%),radial-gradient(circle at 80% 16%,#f0eadc 0 10%,#666b69 11% 22%,transparent 23%),radial-gradient(ellipse at 48% 27%,#979a96 0 37%,transparent 38%),radial-gradient(ellipse at 48% 72%,#979a96 0 39%,transparent 40%),radial-gradient(ellipse at 33% 73%,#6f7472 0 10%,transparent 11%),radial-gradient(ellipse at 67% 72%,#6f7472 0 10%,transparent 11%)}.bear-preview{background:radial-gradient(ellipse at 50% 35%,#19110d 0 5%,transparent 6%),radial-gradient(circle at 38% 24%,#15110d 0 4%,#7a4d2d 5% 8%,transparent 9%),radial-gradient(circle at 62% 24%,#15110d 0 4%,#7a4d2d 5% 8%,transparent 9%),radial-gradient(ellipse at 50% 39%,#f2dfbd 0 23%,transparent 24%),radial-gradient(circle at 24% 15%,#f2dfbd 0 12%,#7c402f 13% 21%,transparent 22%),radial-gradient(circle at 76% 15%,#f2dfbd 0 12%,#7c402f 13% 21%,transparent 22%),radial-gradient(ellipse at 50% 26%,#9f5a42 0 35%,transparent 36%),radial-gradient(ellipse at 50% 72%,#9f5a42 0 40%,transparent 41%),radial-gradient(ellipse at 35% 94%,#f2dfbd 0 12%,transparent 13%),radial-gradient(ellipse at 65% 94%,#f2dfbd 0 12%,transparent 13%)}.hud{position:fixed;inset:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) auto max(14px,env(safe-area-inset-left));z-index:6;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.star-counter,.sound-button{min-height:56px;border:3px solid rgba(255,255,255,.72);border-radius:999px;background:#fffae6c7;box-shadow:0 8px 20px #50321f1f;color:var(--ink);font-size:clamp(1.25rem,2.7vw,1.8rem);font-weight:1000}.star-counter{display:flex;gap:8px;align-items:center;padding:8px 20px}.star-counter.pulse{animation:hud-pop .42s ease-out}.hud-star,.big-star{color:var(--honey);text-shadow:0 0 14px rgba(255,205,62,.65)}.sound-button{width:64px;pointer-events:auto;cursor:pointer}.touch-controls{position:fixed;inset:auto max(26px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(26px,env(safe-area-inset-left));z-index:7;display:flex;justify-content:space-between;align-items:end;pointer-events:none}.move-buttons{display:flex;gap:18px}.touch-button,.jump-button{pointer-events:auto;border:4px solid rgba(255,255,255,.72);border-radius:999px;background:#fff6da8f;color:#513527;box-shadow:0 10px 24px #482d1f29,inset 0 -8px #5a3a250f;font-weight:1000;touch-action:none}.touch-button{width:clamp(88px,13vw,118px);height:clamp(88px,13vw,118px);font-size:clamp(3rem,8vw,4.8rem);line-height:.8}.jump-button{width:clamp(138px,19vw,188px);height:clamp(112px,16vw,152px);background:#ffcf60a8;font-size:clamp(1.35rem,3vw,2rem)}.completion-art{display:flex;align-items:center;justify-content:center;gap:clamp(12px,4vw,36px);min-height:clamp(130px,28vh,250px);margin-bottom:10px}.celebration-panel{position:relative;overflow:hidden}.celebration-panel:before,.celebration-panel:after{content:"★  ✦  ★  ✦  ★";position:absolute;left:50%;width:100%;transform:translate(-50%);color:#ffc94a73;font-size:clamp(1.4rem,4vw,3rem);pointer-events:none;animation:soft-confetti 2.8s ease-in-out infinite alternate}.celebration-panel:before{top:18px}.celebration-panel:after{bottom:18px;animation-delay:-1.4s}.completion-art .mini-character{animation:cuddle-bounce .9s ease-in-out infinite alternate}.big-star{font-size:clamp(4.5rem,12vw,9rem);animation:star-pop 1.1s ease-in-out infinite alternate}.final-party .celebration-panel{background:radial-gradient(circle at 20% 18%,rgba(255,201,74,.5),transparent 13%),radial-gradient(circle at 79% 23%,rgba(117,190,164,.48),transparent 16%),var(--panel)}.rotate-message{display:none;position:fixed;inset:0;z-index:30;place-items:center;padding:24px;background:#fff4df;color:var(--ink);text-align:center;font-size:clamp(1.6rem,8vw,3rem);font-weight:1000}.rotate-message div{max-width:360px}@keyframes cuddle-bounce{0%{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-10px) rotate(2deg)}}@keyframes star-pop{0%{transform:scale(.95) rotate(-5deg)}to{transform:scale(1.08) rotate(6deg)}}@keyframes hud-pop{0%{transform:scale(1)}45%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes soft-confetti{0%{transform:translate(-52%) translateY(-3px);opacity:.5}to{transform:translate(-48%) translateY(6px);opacity:.85}}@media(pointer:fine)and (min-width:900px){.touch-controls{opacity:0}}@media(max-width:760px){.start-panel,.celebration-panel{padding:18px}.character-picker{gap:12px}.touch-controls{inset-right:max(18px,env(safe-area-inset-right));inset-left:max(18px,env(safe-area-inset-left))}}@media(orientation:portrait)and (max-width:680px){.rotate-message{display:grid}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}