:root{--ink:#44305f;--cream:#fff8e7;--paper:#fffdf6;--action:#e96991;--action-deep:#9d3854;--lime:#cdf45e;--lime-deep:#8fbf36}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{background:radial-gradient(ellipse at 30% 12%,#ffd6e6,transparent 60%),radial-gradient(ellipse at 80% 90%,#c9f3ff,transparent 55%),#f3a7c4;color:var(--ink);font-family:ui-rounded,SF Pro Rounded,Arial Rounded MT Bold,Avenir Next,Nunito,system-ui,sans-serif;font-synthesis:none;display:grid;place-items:center;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#stage{position:relative;width:100vw;height:100svh;container-type:size;isolation:isolate;overflow:hidden;background:#3fd0e6}#ui{--u:min(1cqw,.9cqh,5.4px)}#game,#ui{position:absolute;inset:0}.game-canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}#ui{pointer-events:none;display:flex;flex-direction:column;gap:calc(2.2*var(--u));padding:max(calc(2.6*var(--u)),env(safe-area-inset-top)) max(calc(4.5*var(--u)),env(safe-area-inset-right)) 0 max(calc(4.5*var(--u)),env(safe-area-inset-left))}header{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:calc(2*var(--u));padding:calc(1.3*var(--u)) calc(3.6*var(--u)) calc(1.3*var(--u)) calc(1.5*var(--u));border-radius:calc(6*var(--u));background:var(--cream);border:calc(.6*var(--u)) solid var(--ink);box-shadow:0 calc(.9*var(--u)) 0 #44305f38}.brand-mark{display:grid;place-items:center;width:calc(8.6*var(--u));height:calc(8.6*var(--u));transform:rotate(-8deg)}.brand-mark svg{width:100%;height:100%}h1{font-size:calc(4.5*var(--u));letter-spacing:calc(-.12*var(--u));line-height:1;margin:0;font-weight:900}.tools{display:flex;gap:calc(1.8*var(--u))}button{font:inherit;color:var(--ink);background:var(--cream);border:calc(.6*var(--u)) solid var(--ink);display:flex;align-items:center;justify-content:center;gap:calc(2*var(--u));min-width:44px;min-height:44px;width:calc(11*var(--u));height:calc(11*var(--u));border-radius:calc(4.2*var(--u));pointer-events:auto;cursor:pointer;touch-action:manipulation;box-shadow:0 calc(.9*var(--u)) 0 #44305f38;transition:transform .12s,box-shadow .12s,filter .12s}button svg{width:calc(5.2*var(--u));height:calc(5.2*var(--u));flex:none;stroke-width:2.6}button:hover{filter:brightness(1.04);transform:translateY(-1px)}button:active{transform:translateY(calc(.7*var(--u)));box-shadow:0 calc(.2*var(--u)) 0 #44305f38}button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}button:disabled{opacity:.35;cursor:default}.score-row{display:flex;align-items:center;justify-content:space-between}#status{display:flex;align-items:baseline;gap:calc(2.6*var(--u))}#status strong{font-size:calc(8*var(--u));letter-spacing:calc(-.25*var(--u));line-height:1;font-weight:950;color:var(--cream);-webkit-text-stroke:calc(1.5*var(--u)) var(--ink);paint-order:stroke fill;filter:drop-shadow(0 calc(.7*var(--u)) 0 #44305f40)}#status span{font-size:calc(2.7*var(--u));font-weight:900;letter-spacing:calc(.12*var(--u));padding:calc(.9*var(--u)) calc(2.2*var(--u));border-radius:calc(3*var(--u));background:var(--ink);color:var(--cream);transform:translateY(calc(-1*var(--u)))}.score-row button{width:calc(9.5*var(--u));height:calc(9.5*var(--u));min-width:40px;min-height:40px;border-radius:50%}.meter{width:100%;height:calc(2.6*var(--u));flex:none;border-radius:20px;overflow:hidden;background:#44305f33;border:calc(.45*var(--u)) solid var(--ink);box-shadow:0 calc(.6*var(--u)) 0 #44305f2b}.meter i{display:block;width:100%;height:100%;background:linear-gradient(var(--lime),var(--lime-deep));transform-origin:left;transition:transform .18s;transform:scaleX(0)}#hint{position:absolute;bottom:max(2.6%,env(safe-area-inset-bottom));left:50%;translate:-50% 0;width:max-content;max-width:92%;display:flex;align-items:center;justify-content:center;gap:calc(3*var(--u));font-size:calc(3.3*var(--u));font-weight:900;line-height:1.35;text-align:center;color:var(--ink)}#hint:not(:empty){padding:calc(2*var(--u)) calc(3*var(--u));border-radius:calc(6*var(--u));background:#fff8e7ee;border:calc(.6*var(--u)) solid var(--ink);box-shadow:0 calc(1*var(--u)) 0 #44305f38;animation:rise .45s cubic-bezier(.2,1.4,.4,1) both}#hint>svg{width:calc(34*var(--u));height:calc(13*var(--u));flex:none}#controls{position:absolute;left:6%;right:6%;bottom:3%;display:flex;justify-content:center;gap:calc(4*var(--u))}#controls button{width:auto;padding:0 calc(4*var(--u));font-size:calc(3.2*var(--u));font-weight:850}dialog{pointer-events:auto;position:absolute;margin:auto;width:min(84%,calc(84*var(--u)));max-width:84%;max-height:90%;padding:calc(7*var(--u)) calc(6*var(--u)) calc(6*var(--u));border:calc(1.3*var(--u)) solid #ffffffc2;outline:calc(.6*var(--u)) solid var(--ink);border-radius:calc(9*var(--u));color:var(--ink);background:var(--paper);box-shadow:0 calc(2.6*var(--u)) 0 #44305f33,0 25px 80px #2c1d4255;text-align:center}dialog[open]{animation:pop .32s cubic-bezier(.2,1.5,.4,1) both}dialog::backdrop{background:#44305f66;backdrop-filter:blur(5px)}dialog h2{font-size:calc(8*var(--u));line-height:1.05;letter-spacing:calc(-.25*var(--u));margin:calc(3*var(--u)) 0 calc(2*var(--u));font-weight:950}dialog p{font-size:calc(3.5*var(--u));line-height:1.5;margin:0 0 calc(5*var(--u));color:#765f86;font-weight:700}dialog p:empty{margin-bottom:calc(3*var(--u))}dialog .dialog-art>svg{width:100%;height:calc(26*var(--u));max-width:100%;color:var(--action)}.dialog-buttons{display:grid;gap:calc(3.4*var(--u))}.dialog-buttons button{width:100%;height:calc(13.5*var(--u));font-size:calc(4.2*var(--u));font-weight:900;min-height:48px;border-radius:calc(5*var(--u))}.primary{background:var(--action);color:#fff;border-color:var(--action-deep);box-shadow:0 calc(1.3*var(--u)) 0 var(--action-deep)}.primary:active{box-shadow:0 calc(.3*var(--u)) 0 var(--action-deep)}.stars{display:flex;justify-content:center;gap:calc(2*var(--u))}.stars span{color:#e9dfd2;display:grid}.stars svg{width:calc(19*var(--u));height:calc(22*var(--u));stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;overflow:visible}.stars svg path{stroke:var(--ink);stroke-width:1.6}.stars .earned{color:#ffc93c;animation:star-pop .5s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(var(--i)*.14s + .15s)}.stars span:nth-child(2) svg{transform:translateY(calc(-2.5*var(--u))) scale(1.12)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.tap-target{position:absolute;background:transparent;box-shadow:none;border:0;border-radius:calc(5*var(--u));color:transparent}.tap-target:hover{background:#ffffff14}.tap-target:focus-visible{outline:3px solid var(--action)}@keyframes pop{0%{transform:scale(.86);opacity:0}}@keyframes rise{0%{transform:translateY(calc(3*var(--u)));opacity:0}}@keyframes star-pop{0%{transform:scale(0) rotate(-40deg);opacity:0}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}