.hp-game{--hp-paper:#f4f0e8;--hp-ink:#0a0a0c;position:absolute;inset:0;isolation:isolate;width:100%;height:100%;min-height:0;overflow:hidden;background:var(--hp-ink);color:var(--hp-paper);font-family:inherit;touch-action:none;box-sizing:border-box}
.hp-game *{box-sizing:border-box}.hp-game [hidden]{display:none!important}.hp-game button{-webkit-tap-highlight-color:transparent}.hp-canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}.hp-canvas:focus-visible{box-shadow:inset 0 0 0 2px #ffc83d}.hp-hud{position:absolute;top:max(86px,calc(env(safe-area-inset-top) + 72px));left:clamp(18px,4vw,54px);width:min(385px,calc(100% - 150px));pointer-events:none}.hp-steps{display:flex;align-items:center;gap:9px;margin-bottom:12px;direction:ltr}.hp-step{width:28px;height:28px;display:grid;place-items:center;border:1px solid #f4f0e82c;border-radius:50%;color:#f4f0e84d;transition:.25s}.hp-step:not(:last-child):after{content:'';position:absolute;width:8px;height:1px;background:#f4f0e82c;transform:translateX(19px)}.hp-step svg{width:16px;height:16px}.hp-step.is-current{border-color:#ffc83d99;color:#ffc83d;background:#ffc83d0d}.hp-step.is-done{border-color:#8fd24d66;color:#8fd24d;background:#8fd24d0d}.hp-objective{display:block;font-size:clamp(13px,1.3vw,16px);font-weight:500;line-height:1.4;letter-spacing:-.01em}.hp-detail{display:block;margin-top:5px;font-size:11px;line-height:1.6;color:#f4f0e899;max-width:350px}.hp-vital{margin-top:12px;max-width:185px}.hp-vital>span{display:block;font-size:10px;color:#f4f0e899;margin-bottom:5px}.hp-vital-track{height:3px;border-radius:3px;background:#f4f0e81a;overflow:hidden}.hp-vital-track i{height:100%;width:100%;display:block;background:#8fd24d;transition:width .15s}.hp-vital.is-danger .hp-vital-track i{background:#e9475f}.hp-skip{position:absolute;top:max(83px,calc(env(safe-area-inset-top) + 68px));right:clamp(18px,4vw,54px);background:#0a0a0c66;border:1px solid #f4f0e833;border-radius:100px;padding:8px 13px;color:var(--hp-paper);font:inherit;font-size:11px;cursor:pointer;backdrop-filter:blur(12px)}.hp-skip:hover{border-color:#f4f0e899}.hp-game button:focus-visible{outline:2px solid #ffc83d;outline-offset:4px}.hp-intro{position:absolute;top:clamp(235px,35vh,300px);left:50%;transform:translateX(-50%);width:calc(100% - 48px);max-width:550px;text-align:center;pointer-events:none;transition:opacity .5s,transform .5s;text-shadow:0 2px 16px #0a0a0c}.hp-intro.is-hidden{opacity:0;transform:translate(-50%,-8px)}.hp-intro strong{display:block;font-size:clamp(22px,3vw,36px);font-weight:500;letter-spacing:-.035em;margin-bottom:9px}.hp-intro p{font-size:12px;line-height:1.9;margin:0;color:#f4f0e8ad}.hp-toast{position:absolute;top:220px;left:50%;transform:translate(-50%,-8px);padding:9px 17px;border-radius:100px;border:1px solid #f4f0e829;background:#0a0a0ce6;font-size:11px;line-height:1.5;max-width:calc(100% - 44px);text-align:center;opacity:0;transition:.25s;pointer-events:none;backdrop-filter:blur(12px)}.hp-toast.is-visible{opacity:1;transform:translate(-50%,0)}.hp-controls{position:absolute;bottom:max(25px,calc(env(safe-area-inset-bottom) + 20px));left:clamp(18px,4vw,54px);right:clamp(18px,4vw,54px);display:flex;justify-content:space-between;align-items:end;direction:ltr;pointer-events:none;gap:16px}.hp-arrows,.hp-actions{display:flex;gap:10px;align-items:end}.hp-control{pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:54px;height:54px;border-radius:50%;border:1px solid #f4f0e847;background:#f4f0e80e;color:var(--hp-paper);font:inherit;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;backdrop-filter:blur(10px);transition:background .15s,transform .15s}.hp-control svg{display:block;width:21px;height:21px;pointer-events:none}.hp-control span:not(.hp-action-icon){font-size:8px;line-height:1;pointer-events:none}.hp-control.is-held,.hp-control:active{background:#f4f0e838;transform:scale(.94)}.hp-jump{width:62px;height:62px;background:#ffc83d14;border-color:#ffc83d80;color:#ffc83d}.hp-action{width:62px;height:62px;color:#f4f0e899}.hp-action.is-ready{border-color:#8fd24db3;color:#8fd24d;background:#8fd24d14;box-shadow:0 0 22px #8fd24d12}.hp-attack{width:62px;height:62px;border-color:#ffc83d80;color:#ffc83d;background:#ffc83d14}.hp-keyboard{position:absolute;bottom:101px;left:50%;transform:translateX(-50%);font-size:10px;color:#f4f0e866;pointer-events:none;white-space:nowrap}.hp-finish,.hp-failure{position:absolute;inset:0;z-index:5;display:grid;place-items:center;text-align:center;padding:clamp(25px,7vw,80px);background:linear-gradient(0deg,#0a0a0cf5,#0a0a0ca8,#0a0a0cd1);backdrop-filter:blur(7px)}.hp-finish-inner{max-width:530px}.hp-flower{display:block;font-size:38px;color:#ffc83d;line-height:1.5}.hp-finish h3,.hp-failure h3{font-size:clamp(27px,4vw,45px);font-weight:500;letter-spacing:-.035em;margin:14px 0}.hp-finish p,.hp-failure p{font-size:clamp(13px,1.5vw,15px);line-height:2;color:#f4f0e8c2;margin:0 0 26px}.hp-continue,.hp-retry{font:inherit;border:1px solid #f4f0e888;border-radius:100px;padding:12px 25px;cursor:pointer;background:#f4f0e8;color:#0a0a0c;font-size:13px}.hp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){.hp-hud{top:85px;left:17px;width:calc(100% - 124px)}.hp-steps{gap:7px;margin-bottom:9px}.hp-step{width:24px;height:24px}.hp-step svg{width:14px;height:14px}.hp-step:not(:last-child):after{transform:translateX(16px);width:6px}.hp-objective{font-size:12px}.hp-detail{font-size:10px;line-height:1.6}.hp-skip{font-size:10px;right:15px;top:81px;padding:8px 11px}.hp-intro{top:250px}.hp-intro p{font-size:11px;line-height:1.8}.hp-controls{left:16px;right:16px;gap:10px}.hp-arrows,.hp-actions{gap:7px}.hp-control{width:46px;height:46px}.hp-jump,.hp-action,.hp-attack{width:53px;height:53px}.hp-control svg{width:19px;height:19px}.hp-control span:not(.hp-action-icon){font-size:7px}.hp-keyboard{display:none}.hp-toast{font-size:10px;top:218px;padding:8px 12px;border-radius:14px;width:max-content;max-width:calc(100% - 38px)}.hp-finish p,.hp-failure p{line-height:1.9}.hp-vital{max-width:155px;margin-top:9px}}
@media(max-width:350px){.hp-arrows,.hp-actions{gap:5px}.hp-controls{left:12px;right:12px}.hp-control{width:42px;height:42px}.hp-jump,.hp-action,.hp-attack{width:48px;height:48px}.hp-intro{top:240px}}
@media(max-height:500px){.hp-hud{top:68px;width:310px;max-width:calc(100% - 160px)}.hp-steps{margin-bottom:6px;gap:7px}.hp-step{width:22px;height:22px}.hp-step svg{width:13px;height:13px}.hp-step:not(:last-child):after{transform:translateX(15px)}.hp-objective{font-size:12px}.hp-detail{font-size:9px;max-width:300px}.hp-vital{margin-top:6px;max-width:170px}.hp-vital>span{font-size:8px;margin-bottom:4px}.hp-skip{top:65px}.hp-intro{top:155px;max-width:470px}.hp-intro strong{font-size:24px}.hp-intro p{font-size:10px;line-height:1.7}.hp-controls{bottom:14px}.hp-control{width:43px;height:43px}.hp-jump,.hp-action,.hp-attack{width:49px;height:49px}.hp-keyboard{bottom:73px;font-size:9px}.hp-toast{top:174px;font-size:10px}.hp-finish,.hp-failure{padding:68px 35px 25px}.hp-finish h3,.hp-failure h3{font-size:25px;margin:5px 0}.hp-flower{font-size:25px}.hp-finish p,.hp-failure p{font-size:12px;line-height:1.7;margin-bottom:15px}}
@media(prefers-reduced-motion:reduce){.hp-game *{transition:none!important}}
/* Controls follow the input device, including a physical keyboard on a narrow screen. */
.hp-keyboard{display:flex;justify-content:center;align-items:center;gap:17px;bottom:104px;max-width:calc(100% - 36px);padding:10px 16px;border:1px solid #f4f0e833;border-radius:12px;background:#0a0a0ce8;color:#f4f0e8;font-size:11px;line-height:1.4;white-space:normal;box-shadow:0 5px 24px #0003;backdrop-filter:blur(12px)}.hp-keyboard>span{display:flex;align-items:center;gap:5px;white-space:nowrap}.hp-keyboard b{font:inherit}.hp-game kbd{font:600 10px/1.2 Inter,Arial,sans-serif;border:1px solid #f4f0e861;border-bottom-width:2px;border-radius:4px;background:#f4f0e814;color:#f4f0e8;min-width:21px;min-height:22px;display:inline-grid;place-items:center;padding:3px 5px}.hp-key-care kbd,.hp-context kbd,.hp-control-key{border-color:#ffc83d99!important;background:#ffc83d20!important;color:#ffc83d!important}.hp-control-key{min-width:16px!important;min-height:15px!important;font-size:8px!important;padding:1px 3px!important;border-bottom-width:1px!important}.hp-context{position:absolute;z-index:4;display:flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid #ffc83d80;border-radius:12px;background:#0a0a0cf0;color:#f4f0e8;box-shadow:0 7px 28px #0006;transform:translate(-50%,-100%);font-size:12px;font-weight:500;white-space:nowrap;pointer-events:none;backdrop-filter:blur(12px)}.hp-context:after{content:'';position:absolute;bottom:-5px;left:50%;width:8px;height:8px;border-right:1px solid #ffc83d80;border-bottom:1px solid #ffc83d80;background:#0a0a0c;transform:translateX(-50%) rotate(45deg)}.hp-game[data-hp-input=touch] .hp-keyboard,.hp-game[data-hp-input=touch] .hp-control-key{display:none}.hp-game[data-hp-input=touch] .hp-context{font-size:11px;padding:8px 12px;border-color:#8fd24d80}.hp-game[data-hp-input=touch] .hp-context:after{border-color:#8fd24d80}
@media(max-width:700px){.hp-keyboard{gap:8px 13px;flex-wrap:wrap;width:max-content;bottom:92px;max-width:calc(100% - 26px);padding:8px 11px;font-size:10px}.hp-keyboard kbd{font-size:9px;min-height:20px;min-width:19px}.hp-context{font-size:11px;padding:8px 11px}.hp-game[data-hp-input=keyboard] .hp-intro{top:240px}}
@media(max-height:500px){.hp-keyboard{bottom:77px;padding:6px 11px;gap:11px;font-size:9px}.hp-keyboard kbd{min-height:18px;min-width:18px;font-size:8px;padding:2px 4px}.hp-context{font-size:10px;padding:6px 9px}.hp-context kbd{font-size:9px;min-height:19px;min-width:19px}}