:root{--paper:#fbfaf8;--white:#fffefc;--ink:#302d2b;--muted:#77716d;--prop:#e5e1dc;--prop-line:#aaa39d;--pink:#e9789b;--cord:#45403d}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--paper);color:var(--ink);font-family:Arial,ui-rounded,system-ui,sans-serif}.game-shell{display:grid;width:min(100%,48rem);height:100dvh;margin:0 auto;padding:max(.5rem,env(safe-area-inset-top)) max(.65rem,env(safe-area-inset-right)) max(.55rem,env(safe-area-inset-bottom)) max(.65rem,env(safe-area-inset-left));grid-template-rows:44px 34px minmax(0,1fr) 58px}.game-header,.status-row,.game-footer,.result-actions{display:flex;align-items:center}.game-header{justify-content:space-between}.text-button,.level-button,button,.result a{min-width:48px;min-height:48px;border:0;border-radius:12px;background:transparent;color:inherit;font:900 .75rem/1 Arial,sans-serif;letter-spacing:.06em;text-decoration:none;cursor:pointer}.level-button{padding:0 .75rem;background:#efebe7}.status-row{gap:.75rem;justify-content:space-between;padding:0 .2rem;font-size:.72rem;letter-spacing:.05em}.ink{display:flex;align-items:center;gap:.45rem;color:var(--muted);font-size:.65rem;font-weight:900}.ink-track{width:5.5rem;height:6px;border-radius:6px;background:#ded9d4;overflow:hidden}.ink-track i{display:block;width:100%;height:100%;background:var(--pink);transform-origin:left}.game-world{position:relative;min-height:0;overflow:hidden;border:2px solid #d6d1cc;border-radius:18px;background:var(--white);touch-action:none;outline-offset:3px;isolation:isolate}.props,.barrier-canvas{position:absolute;inset:0}.prop{position:absolute;border:2px solid var(--prop-line);border-radius:10px;background:var(--prop)}.barrier-canvas{z-index:3;width:100%;height:100%;pointer-events:none}.barrier-canvas polyline{fill:none;stroke:var(--cord);stroke-linecap:round;stroke-linejoin:round}.barrier-canvas [data-stroke]{opacity:.85}.virtual-pen{display:none;fill:var(--pink);stroke:var(--white);stroke-width:.005}.anchor-dot{fill:var(--pink);stroke:var(--white);stroke-width:.005}.game-world.keyboard .virtual-pen{display:block}.character{position:absolute;z-index:2;width:14%;aspect-ratio:1;transform:translate(-50%,-50%);user-select:none}.peanut{transform:translate(-50%,-50%) rotate(var(--peanut-rotation,0rad))}.character img{width:100%;height:100%;object-fit:contain;pointer-events:none}.sad-face,.tear,.happy-face,.hearts{display:none;position:absolute;z-index:4;pointer-events:none}.game-shell[data-game-state="SUCCESS_FREEZE"] .peanut,.game-shell[data-game-state="SUCCESS_REACTION"] .peanut,.game-shell[data-game-state="RESULT_SUCCESS"] .peanut{transform:translate(-50%,-50%) rotate(calc(var(--peanut-rotation,0rad) + .1rad)) scale(.96)}.game-shell[data-game-state="SUCCESS_REACTION"] .target,.game-shell[data-game-state="RESULT_SUCCESS"] .target{animation:happy-hop .48s ease-out}.game-shell[data-game-state^="SUCCESS"] .sad-face,.game-shell[data-game-state="RESULT_SUCCESS"] .sad-face,.game-shell[data-game-state^="SUCCESS"] .tear,.game-shell[data-game-state="RESULT_SUCCESS"] .tear,.game-shell[data-game-state="SUCCESS_REACTION"] .happy-face,.game-shell[data-game-state="RESULT_SUCCESS"] .happy-face,.game-shell[data-game-state="SUCCESS_REACTION"] .hearts,.game-shell[data-game-state="RESULT_SUCCESS"] .hearts{display:block}.sad-face{left:45%;bottom:21%;font-size:1.2rem}.tear{right:27%;top:49%;width:7px;height:11px;border-radius:70% 30% 60% 40%;background:#6faadc}.happy-face{left:46%;bottom:22%;font-size:1.1rem}.hearts{top:9%;right:-8%;color:var(--pink);font-size:.9rem}.intro-note{position:absolute;z-index:5;left:50%;top:9%;padding:.5rem .7rem;border-radius:10px;background:var(--white);font-size:.72rem;font-weight:950;transform:translateX(-50%);white-space:nowrap}.defense-progress{flex:1;min-width:2.5rem;height:6px;overflow:hidden;border-radius:6px;background:#ded9d4}.defense-progress i{display:block;width:100%;height:100%;background:var(--pink);transform:scaleX(0);transform-origin:left}.first-gesture{position:absolute;z-index:5;left:50%;top:48%;display:grid;gap:.25rem;justify-items:center;color:var(--muted);font-size:.62rem;font-weight:900;letter-spacing:.08em;pointer-events:none;transform:translate(-50%,-50%)}.first-gesture i{display:block;width:4.5rem;height:.35rem;border-radius:1rem;background:var(--cord);transform-origin:left;animation:gesture-draw 1.2s ease-in-out 1}.first-gesture span{padding:.2rem .35rem;border-radius:.35rem;background:rgba(255,254,252,.9)}.game-footer{justify-content:space-between}.game-footer p{display:grid;margin:0;font-size:.72rem;line-height:1.2}.game-footer p span{color:var(--muted);font-size:.63rem;font-weight:800}.game-footer button,.panel button,.result button,.result a{padding:.7rem 1rem;background:#efebe7}.panel,.result{position:fixed;inset:0;z-index:50;display:grid;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));place-items:center;background:rgba(251,250,248,.97)}[hidden]{display:none!important}.panel-body{position:relative;width:min(100%,30rem);max-height:100%;overflow:auto;padding:1.4rem;border:2px solid #d6d1cc;border-radius:18px;background:var(--white)}.panel-body h1,.result h1{margin:.4rem 0 1rem;font:950 clamp(2rem,10vw,4.5rem)/.9 "Arial Black",Arial,sans-serif;letter-spacing:-.06em}.panel-body p{color:var(--muted);font-size:.9rem;line-height:1.45}.panel-close{float:right}.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.level-grid button{aspect-ratio:1;padding:0}.level-grid button[disabled]{color:#aaa;background:#f5f2ef;cursor:not-allowed}.level-grid button.cleared{background:#f7d6e0}.result{z-index:60;align-items:center;justify-content:center;text-align:center}.result-card{width:min(100%,30rem);max-height:100%;overflow:auto;padding:clamp(1rem,4vw,2rem);border:2px solid #d6d1cc;border-radius:18px;background:var(--white)}.result-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}.result-actions>*{display:grid;place-items:center;min-height:48px}.result [data-action="next"]{grid-column:1/-1;background:var(--pink);color:#2d2024}.kiss-closeup{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;background:#fffefc}.kiss-closeup img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;display:block}.kiss-closeup p{max-width:24ch;padding:1rem;color:var(--ink);font-weight:900;text-align:center}.sr-status{position:fixed;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}.barrier-canvas [data-barrier-trail]{stroke:#f1a8ba;stroke-dasharray:8 7;opacity:0;filter:blur(.5px)}.barrier-canvas.is-breaking-out [data-barrier-trail]{opacity:.6}.impact-fx{position:absolute;z-index:7;inset:0;pointer-events:none;overflow:hidden;opacity:0;--impact-x:50%;--impact-y:50%}.impact-fx.is-active{opacity:1}.impact-flash,.impact-ring,.impact-streak{position:absolute;left:var(--impact-x);top:var(--impact-y);display:block;pointer-events:none}.impact-flash{width:7rem;height:7rem;border-radius:50%;background:radial-gradient(circle,#fffefc 0 12%,#ffe6ee 28%,transparent 72%);transform:translate(-50%,-50%);opacity:0}.impact-ring{width:2.2rem;height:2.2rem;border:2px solid #f29ab5;border-radius:50%;transform:translate(-50%,-50%) scale(.35);opacity:0;box-shadow:0 0 0 1px rgb(255 255 255 / .8)}.impact-ring-b{width:3rem;height:3rem;border-color:#f5c1cf}.impact-streak{width:2px;height:1.5rem;border-radius:2px;background:linear-gradient(#fff,#ef8eaa 65%,transparent);transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(calc((var(--streak-index, 0) * 36deg))) scaleY(.2);opacity:0}.impact-streak[data-streak="1"]{--streak-index:0}.impact-streak[data-streak="2"]{--streak-index:1}.impact-streak[data-streak="3"]{--streak-index:2}.impact-streak[data-streak="4"]{--streak-index:3}.impact-streak[data-streak="5"]{--streak-index:4}.impact-streak[data-streak="6"]{--streak-index:5}.impact-streak[data-streak="7"]{--streak-index:6}.impact-streak[data-streak="8"]{--streak-index:7}.impact-streak[data-streak="9"]{--streak-index:8}.impact-streak[data-streak="10"]{--streak-index:9}.impact-fx.is-active .impact-flash{animation:impact-flash .38s ease-out both}.impact-fx.is-active .impact-ring-a{animation:impact-ring .4s cubic-bezier(.2,.8,.2,1) both}.impact-fx.is-active .impact-ring-b{animation:impact-ring .4s .04s cubic-bezier(.2,.8,.2,1) both}.impact-fx.is-active .impact-streak{animation:impact-streak .4s cubic-bezier(.2,.8,.2,1) both}.impact-peanut{animation:peanut-impact .42s cubic-bezier(.18,.8,.22,1)}.game-world.impact-hit{animation:world-shake .28s ease-out}.game-world:has(.impact-fx.is-active) .peanut{filter:drop-shadow(0 0 8px rgb(255 165 190 / .9))}.game-shell[data-game-state="DEFENSE"] .peanut{transition:filter .12s ease}
@keyframes impact-flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}18%{opacity:.98}100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}}@keyframes impact-ring{0%{opacity:.9;transform:translate(-50%,-50%) scale(.35)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.8)}}@keyframes impact-streak{0%{opacity:0;transform:translate(-50%,-100%) rotate(calc(var(--streak-index, 0) * 36deg)) scaleY(.15)}22%{opacity:1}100%{opacity:0;transform:translate(-50%,-100%) rotate(calc(var(--streak-index, 0) * 36deg)) scaleY(1)}}@keyframes world-shake{0%,100%{transform:translate(0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-1px)}}@keyframes peanut-impact{0%{transform:translate(-50%,-50%) rotate(var(--peanut-rotation,0rad)) scale(1)}35%{transform:translate(-50%,-50%) rotate(var(--peanut-rotation,0rad)) scale(1.18)}100%{transform:translate(-50%,-50%) rotate(var(--peanut-rotation,0rad)) scale(1)}}
@media(prefers-reduced-motion:reduce){.game-world.impact-hit{animation:none}.impact-peanut{animation:none}.game-world:has(.impact-fx.is-active) .peanut{filter:none}.impact-fx.is-active .impact-flash{animation:impact-flash-reduced .35s ease-out both;animation-duration:.35s!important}.impact-fx.is-active .impact-ring-a,.impact-fx.is-active .impact-ring-b{animation:impact-ring-reduced .35s ease-out both;animation-duration:.35s!important}.impact-fx.is-active .impact-streak{animation:none;opacity:.45}@keyframes impact-flash-reduced{0%{opacity:0}20%{opacity:.95}100%{opacity:0}}@keyframes impact-ring-reduced{0%{opacity:.8;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}}
@keyframes happy-hop{50%{transform:translate(-50%,-50%) scale(1.05)}}@keyframes gesture-draw{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.game-shell[data-game-state="SUCCESS_REACTION"] .target{animation:none}.first-gesture i{animation:none}}@media(max-width:22rem){.game-shell{padding-left:max(.4rem,env(safe-area-inset-left));padding-right:max(.4rem,env(safe-area-inset-right))}.ink-track{width:4rem}.character{width:18%}.game-footer p span{display:none}.result-actions{grid-template-columns:1fr}}@media(max-height:30rem) and (orientation:landscape){.game-shell{width:100%;padding-top:max(.25rem,env(safe-area-inset-top));padding-bottom:max(.25rem,env(safe-area-inset-bottom));grid-template-columns:7.5rem minmax(0,1fr) 7.5rem;grid-template-rows:88px minmax(0,1fr)}.game-header{position:relative;z-index:2;display:grid;grid-column:1;grid-row:1;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:44px 44px;padding-right:.25rem}.game-header .level-button{grid-column:1/-1;grid-row:2;margin:0}.status-row{position:relative;z-index:2;display:grid;grid-column:3;grid-row:1;align-content:center;gap:.3rem;padding-left:.35rem}.status-row>strong{display:block;overflow-wrap:anywhere;font-size:.62rem;line-height:1.05}.defense-progress{width:100%}.ink{width:100%;gap:.25rem}.ink-track{flex:1;min-width:0}.game-world{z-index:1;grid-column:2;grid-row:1/3}.game-footer{position:relative;z-index:2;display:grid;grid-column:1;grid-row:2;align-content:space-between;padding:.35rem .25rem .35rem 0}.game-footer p{align-self:start}.game-footer button{width:100%}.character{width:13%}.intro-note{top:4%}.first-gesture{top:50%}.result{padding:max(.35rem,env(safe-area-inset-top)) max(.5rem,env(safe-area-inset-right)) max(.35rem,env(safe-area-inset-bottom)) max(.5rem,env(safe-area-inset-left))}.result-card{width:min(100%,34rem);max-height:100%;padding:.6rem 1rem}.result h1{margin:0 0 .5rem;font-size:clamp(1.5rem,8vh,2.3rem)}.result-actions{max-width:34rem;margin:0 auto}}