@import "https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Archivo:wght@500;700;800&display=swap";:root{--studio:#1c4a50;--studio-deep:#0e2a2e;--cream:#f4e7c9;--paper:#fbf3df;--ink:#2a1a12;--tomato:#d9442b;--mustard:#e9b233;--bulb:#fff1b0;--potato:#c98a3c;--potato-deep:#8f5a22;--muted:#9fb8b6;--flight:.16s}*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{background:radial-gradient(ellipse at 50% 48%, #ffecb433 0%, #ffecb40d 32%, transparent 58%), repeating-linear-gradient(90deg, #00000014 0 2px, transparent 2px 46px), radial-gradient(circle at 50% 45%, var(--studio) 0%, var(--studio-deep) 80%);color:var(--cream);-webkit-font-smoothing:antialiased;touch-action:manipulation;font-family:Archivo,Segoe UI,system-ui,sans-serif;overflow:hidden}#app{height:100dvh}.hp{-webkit-user-select:none;user-select:none;height:100%;position:relative}.hp__bulbs{pointer-events:none;z-index:1;justify-content:space-around;height:10px;display:flex;position:absolute;left:0;right:0}.hp__bulbs--top{top:4px}.hp__bulbs--bottom{bottom:4px}.hp__bulbs i{background:var(--bulb);width:8px;height:8px;animation:1.6s step-end infinite hp-chase;animation-delay:calc(var(--i) * -.2s);border-radius:50%;box-shadow:0 0 6px 1px #ffe18cb3}@keyframes hp-chase{0%,to{opacity:1}50%{opacity:.25}}.hp__stage{flex-direction:column;justify-content:center;align-items:center;gap:10px;height:100%;padding:18px 16px;display:flex;position:relative}.hp__stage[hidden]{display:none}.hp__stage.is-boom{animation:.45s ease-out hp-quake}.hp__arena{aspect-ratio:1;width:min(94vw,80vh,640px);position:relative}.hp__center{text-align:center;pointer-events:none;flex-direction:column;align-items:center;gap:2px;width:46%;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hp__meter{width:62%;overflow:visible}.hp__meter-band{fill:none;stroke-width:9px}.hp__meter-band--cool{stroke:var(--cream)}.hp__meter-band--warm{stroke:var(--mustard)}.hp__meter-band--hot{stroke:var(--tomato)}.hp__needle{transform-box:view-box;transform-origin:60px 62px;transform:rotate(-90deg)}.hp__needle path{stroke:var(--ink);stroke-width:3.5px;stroke-linecap:round}.hp__needle circle{fill:var(--ink);stroke:var(--cream);stroke-width:2px}.hp__big{color:var(--cream);text-transform:uppercase;text-shadow:0 3px 0 var(--ink);text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-family:Alfa Slab One,Georgia,serif;font-size:clamp(1.3rem,5.4vmin,2.4rem);line-height:1.05;overflow:hidden}.hp__stage.is-mine .hp__big{color:var(--mustard)}.hp__small{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;min-height:1.2em;font-size:clamp(.72rem,2.4vmin,.95rem);font-weight:700}.hp__seq{gap:clamp(3px,1vmin,6px);min-height:clamp(30px,7.5vmin,46px);margin-top:6px;display:flex}.hp__seq.is-wrong{animation:.3s ease-out hp-shake}.hp__tile{background:var(--paper);border:3px solid var(--ink);width:clamp(30px,7.5vmin,46px);height:clamp(30px,7.5vmin,46px);box-shadow:0 3px 0 var(--ink);border-radius:8px;place-items:center;display:grid}.hp__tile svg,.hp__key svg{width:70%;height:70%;transform:rotate(var(--rot,0deg));fill:none;stroke:var(--ink);stroke-width:3.6px;stroke-linecap:round;stroke-linejoin:round}.hp__tile.is-next{background:var(--mustard);transform:translateY(-3px)}.hp__tile.is-done{background:var(--studio-deep);border-color:var(--studio-deep);box-shadow:none}.hp__tile.is-done svg{stroke:var(--muted)}.hp__risk{color:var(--cream);background:var(--studio-deep);border-radius:999px;margin-bottom:2px;padding:2px 10px;font-size:clamp(.68rem,2.2vmin,.85rem);font-weight:700}.hp__risk.is-hot{color:var(--ink);background:var(--mustard)}.hp__note{color:var(--tomato);background:var(--paper);opacity:0;border-radius:999px;padding:2px 10px;font-size:.8rem;font-weight:700;transition:opacity .15s}.hp__note.is-on{opacity:1}.hp__player{cursor:default;flex-direction:column;align-items:center;gap:3px;width:clamp(76px,20vmin,124px);transition:opacity .2s,filter .2s;display:flex;position:absolute;transform:translate(-50%,-50%)}.hp__player.is-targetable{cursor:pointer}.hp__head{width:clamp(34px,9vmin,54px);height:clamp(34px,9vmin,54px)}.hp__head svg{width:100%;height:100%;overflow:visible}.hp__head circle:not(.hp__head-skin),.hp__mouth--panic{fill:var(--ink)}.hp__head-skin{fill:var(--seat);stroke:var(--ink);stroke-width:2.5px}.hp__mouth--ok{fill:none;stroke:var(--ink);stroke-width:2.2px;stroke-linecap:round}.hp__mouth--panic,.hp__player.is-holder .hp__mouth--ok{display:none}.hp__player.is-holder .hp__mouth--panic{display:inline}.hp__plate{background:var(--paper);width:100%;color:var(--ink);border:3px solid var(--ink);border-bottom:7px solid var(--seat);box-shadow:0 3px 0 var(--ink);text-align:center;white-space:nowrap;text-overflow:ellipsis;border-radius:6px;padding:4px 6px;font-size:clamp(.66rem,2.3vmin,.9rem);font-weight:800;overflow:hidden}.hp__player.is-me .hp__plate{background:var(--mustard)}.hp__player.is-holder .hp__plate{box-shadow:0 0 0 3px var(--bulb), 0 0 18px 4px #ffe18c8c}.hp__player.is-off{opacity:.55}.hp__aim,.hp__stamp{text-transform:uppercase;pointer-events:none;white-space:nowrap;font-weight:800;position:absolute;left:50%}.hp__aim{letter-spacing:.1em;color:var(--ink);background:var(--mustard);border:2px solid var(--ink);opacity:0;border-radius:999px;padding:1px 8px;font-size:.66rem;transition:opacity .1s;top:-16px;transform:translate(-50%)}.hp__player.is-target .hp__aim{opacity:1}.hp__stamp{color:var(--tomato);border:3px solid var(--tomato);background:#fbf3dfe6;border-radius:6px;padding:0 6px;font-family:Alfa Slab One,Georgia,serif;font-size:clamp(.8rem,3vmin,1.1rem);display:none;top:42%;transform:translate(-50%,-50%)rotate(-12deg)}.hp__player.is-out .hp__stamp{display:block}.hp__player.is-out .hp__head,.hp__player.is-out .hp__plate{filter:grayscale();opacity:.5}.hp__player.is-boom{animation:.35s ease-out 2 hp-shake}.hp__potato{--heat:0;width:clamp(48px,13vmin,78px);height:clamp(48px,13vmin,78px);transition:left var(--flight) cubic-bezier(.3, .7, .4, 1), top var(--flight) cubic-bezier(.3, .7, .4, 1), opacity .12s;pointer-events:none;z-index:5;filter:drop-shadow(0 5px #00000059);position:absolute;transform:translate(-50%,-50%)}.hp__potato.no-flight{transition:none}.hp__potato.is-hidden{opacity:0}.hp__potato-svg{width:100%;height:100%;animation:.5s ease-in-out infinite hp-jiggle;overflow:visible}.hp__stage.is-hot .hp__potato-svg{animation-duration:.14s}.hp__potato-body{fill:var(--potato);stroke:var(--ink);stroke-width:3.5px}.hp__potato-hot{fill:var(--tomato);opacity:calc(var(--heat) * .85)}.hp__potato-hi{fill:#f1c27d;opacity:.6}.hp__potato-spot{fill:var(--potato-deep)}.hp__potato-eye{fill:var(--ink)}.hp__potato-ln{fill:none;stroke:var(--ink);stroke-width:3px;stroke-linecap:round}.hp__steam path{fill:none;stroke:var(--cream);stroke-width:3px;stroke-linecap:round;opacity:calc(.25 + var(--heat) * .75);animation:1.1s ease-in-out infinite hp-steam}.hp__steam path:nth-child(2){animation-delay:-.35s}.hp__steam path:nth-child(3){animation-delay:-.7s}.hp__burst{aspect-ratio:1;background:var(--mustard);clip-path:polygon(50% 0,61% 30%,93% 18%,72% 44%,100% 58%,68% 64%,78% 96%,50% 74%,22% 96%,32% 64%,0 58%,28% 44%,7% 18%,39% 30%);pointer-events:none;z-index:6;opacity:0;place-items:center;width:clamp(110px,28vmin,170px);display:grid;position:absolute;transform:translate(-50%,-50%)scale(0)}.hp__burst span{color:var(--tomato);font-family:Alfa Slab One,Georgia,serif;font-size:clamp(1rem,4.4vmin,1.6rem);transform:rotate(-8deg)}.hp__burst.is-boom{animation:.9s ease-out forwards hp-burst}.hp__pad{opacity:.45;grid-template-rows:repeat(2,clamp(58px,17vw,76px));grid-template-columns:repeat(3,clamp(58px,17vw,76px));grid-template-areas:".u.""l d r";gap:8px;transition:opacity .1s;display:none}.hp__pad.is-live{opacity:1}@media (hover:none),(pointer:coarse){.hp__pad{display:grid}.hp__arena{width:min(94vw,58vh,640px)}}.hp__key{background:var(--paper);border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);touch-action:none;-webkit-tap-highlight-color:transparent;border-radius:14px;place-items:center;padding:0;display:grid}.hp__key--U{grid-area:u}.hp__key--L{--rot:270deg;grid-area:l}.hp__key--D{--rot:180deg;grid-area:d}.hp__key--R{--rot:90deg;grid-area:r}.hp__key.is-pressed{animation:.12s ease-out hp-press}.hp__ping{color:var(--muted);letter-spacing:.06em;font-size:.72rem;font-weight:700;position:absolute;bottom:18px;right:14px}.hp__overlay{z-index:20;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.hp__overlay[hidden]{display:none}.hp__card{background:var(--paper);width:min(440px,100%);color:var(--ink);border:4px solid var(--ink);box-shadow:0 8px 0 var(--ink);text-align:center;border-radius:16px;padding:22px 22px 24px}.hp__card-kicker{letter-spacing:.18em;text-transform:uppercase;color:var(--paper);background:var(--tomato);border-radius:999px;padding:2px 10px;font-size:.7rem;font-weight:800;display:inline-block}.hp__title{color:var(--tomato);margin:10px 0 8px;font-family:Alfa Slab One,Georgia,serif;font-size:clamp(1.7rem,7vw,2.4rem);font-weight:400}.hp__body{font-size:.98rem;line-height:1.45}.hp__btn{font:inherit;color:var(--ink);background:var(--mustard);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);cursor:pointer;border-radius:999px;margin-top:16px;padding:8px 20px;font-weight:800}.hp__countdown{z-index:40;color:var(--mustard);text-shadow:0 8px 0 var(--ink);pointer-events:none;justify-content:center;align-items:center;font-family:Alfa Slab One,Georgia,serif;font-size:clamp(5rem,22vw,12rem);display:flex;position:absolute;inset:0}.hp__countdown[hidden]{display:none}.hp__countdown.is-pop{animation:.7s ease-out countdown-pop}@keyframes countdown-pop{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1.1)}to{opacity:.9;transform:scale(1)}}@keyframes hp-jiggle{0%,to{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}@keyframes hp-steam{0%{opacity:0;transform:translateY(6px)}40%{opacity:1}to{opacity:0;transform:translateY(-8px)}}@keyframes hp-shake{0%,to{translate:0}25%{translate:-6px}75%{translate:6px}}@keyframes hp-quake{0%,to{translate:0}20%{translate:-8px 4px}40%{translate:7px -5px}60%{translate:-4px 3px}80%{translate:3px -2px}}@keyframes hp-burst{0%{opacity:1;transform:translate(-50%,-50%)scale(0)rotate(-20deg)}25%{opacity:1;transform:translate(-50%,-50%)scale(1.15)rotate(4deg)}70%{opacity:1;transform:translate(-50%,-50%)scale(1)rotate(0)}to{opacity:0;transform:translate(-50%,-50%)scale(1)rotate(0)}}@keyframes hp-press{0%{transform:translateY(0)}50%{box-shadow:0 1px 0 var(--ink);transform:translateY(4px)}to{transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.hp__bulbs i,.hp__potato-svg,.hp__steam path{animation:none}}