*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#e8e8e8;color:#080808;font-family:monospace;touch-action:none;overscroll-behavior:none}body{display:grid;place-items:center}#phone{position:relative;width:min(100vw,calc(100dvh * .5625));height:100dvh;max-width:480px;background:#fff;overflow:hidden;box-shadow:0 0 0 1px #333}canvas{display:block;width:100%;height:100%;image-rendering:pixelated}button{font-family:inherit;color:#080808;background:#fff;border:2px solid #080808;border-radius:0;font-size:16px;font-weight:bold;padding:18px 22px;cursor:pointer;touch-action:none}button:active,button.pressed{background:#080808;color:#fff}button:focus-visible{outline:3px solid #999;outline-offset:5px}[hidden]{display:none!important}section{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:#fff}#start{font-size:20px;padding:23px 25px}#hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:calc(18px + env(safe-area-inset-top)) 18px 12px;background:linear-gradient(#fff 70%,transparent);pointer-events:none}#hud>div{display:flex;flex-direction:column;gap:6px}#level{font-size:20px}#best{font-size:12px;color:#555}#pause{pointer-events:auto;padding:8px 12px;font-size:20px}#controls{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:16px 14px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(transparent,#fff 45%)}.direction{display:flex;gap:8px}#controls button{height:66px;width:65px;padding:0;font-size:22px;user-select:none;-webkit-user-select:none}#controls .jump{width:99px;font-size:16px}h1{font-size:25px;margin:0}p{font-size:14px;color:#555;text-align:center;padding:0 16px}#paused small{margin-top:8px;font-size:12px;color:#555}

#menu{background:#071379;display:block}#menuArt{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}#menu #start{position:absolute;left:18%;top:25.8%;width:64%;height:17%;padding:0;background:transparent;border:0;color:transparent;font-size:0;cursor:pointer}#menu #start:focus-visible{outline:3px solid #fff;outline-offset:4px}.signature{position:absolute;bottom:calc(8px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;color:rgba(255,255,255,.75);font-size:10px;text-shadow:0 1px 2px #17212f;pointer-events:none}

#menu #start{left:25.2%;top:28.5%;width:49.6%;height:12.2%}.signature{color:transparent;font-size:0;text-shadow:none}

#hud{background:linear-gradient(rgba(15,39,62,.5),transparent);color:#fff}#level,#best{color:#fff;text-shadow:1px 1px 0 #184265}#controls{background:linear-gradient(transparent,rgba(15,39,62,.32))}#controls button{background:rgba(255,255,255,.92)}#controls button.pressed{background:#142b49;color:#fff}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}#hud{background:none}#pause{background:rgba(255,255,255,.9);color:#142b49}

#pause{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;width:70px;height:34px;background:transparent;border:0;color:transparent;font-size:0;padding:0}

#pause{width:86px}
#controls{background:none;padding-bottom:calc(22px + env(safe-area-inset-bottom));align-items:center}
#controls button{position:relative;background:#219bdd;border:4px solid #103c74;color:#a7e9ff;width:65px;height:60px;font-size:34px;line-height:1;box-shadow:0 6px 0 #103c74,inset 0 4px 0 #76d5fa,inset 0 -5px 0 #1675b2;transition:transform 60ms,background 60ms,box-shadow 60ms;clip-path:polygon(12% 0,88% 0,88% 10%,100% 10%,100% 90%,88% 90%,88% 100%,12% 100%,12% 90%,0 90%,0 10%,12% 10%)}
#controls button.pressed,#controls button:active{background:#1666a3;color:#6abada;transform:translateY(5px);box-shadow:0 1px 0 #103c74,inset 0 5px 0 #104b80,inset 0 -2px 0 #3487bb}
#controls .jump{width:64px;height:64px;border-radius:50%;clip-path:none;background:#f258a6;border-color:#9c245b;color:#a91e59;font-size:44px;box-shadow:0 6px 0 #9c245b,inset 0 4px 0 #ffb1d7,inset 0 -5px 0 #ce367e}
#controls .jump.pressed,#controls .jump:active{background:#c53278;color:#81204b;box-shadow:0 1px 0 #9c245b,inset 0 5px 0 #982255,inset 0 -2px 0 #e65499}

#controls [data-key="left"]{clip-path:polygon(0 40%,10% 40%,10% 30%,20% 30%,20% 20%,30% 20%,30% 8%,44% 8%,44% 22%,94% 22%,94% 78%,44% 78%,44% 92%,30% 92%,30% 80%,20% 80%,20% 70%,10% 70%,10% 60%,0 60%);color:transparent;font-size:0;width:72px;height:70px}
#controls [data-key="right"]{clip-path:polygon(100% 40%,90% 40%,90% 30%,80% 30%,80% 20%,70% 20%,70% 8%,56% 8%,56% 22%,6% 22%,6% 78%,56% 78%,56% 92%,70% 92%,70% 80%,80% 80%,80% 70%,90% 70%,90% 60%,100% 60%);color:transparent;font-size:0;width:72px;height:70px}

#controls{gap:4px;padding:10px 9px calc(14px + env(safe-area-inset-bottom));align-items:center;justify-content:space-between}
#controls .direction{gap:2px}
#controls button,#controls [data-key="left"],#controls [data-key="right"],#controls .jump{background:transparent!important;border:0!important;box-shadow:none!important;clip-path:none!important;border-radius:0!important;color:transparent!important;transform:none!important;transition:none;width:56px;height:56px;padding:0;flex-shrink:0}
#controls [data-key="power"]{width:120px}
#controls button canvas{width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
@media(max-width:340px){#controls button,#controls [data-key="left"],#controls [data-key="right"],#controls .jump{width:50px;height:50px}#controls [data-key="power"]{width:110px}}

#controls{gap:4px}
#controls button,#controls [data-key="left"],#controls [data-key="right"],#controls .jump{width:72px;height:72px}
#controls [data-key="power"]{width:116px;height:56px}
@media(max-width:340px){#controls button,#controls [data-key="left"],#controls [data-key="right"],#controls .jump{width:64px;height:64px}#controls [data-key="power"]{width:98px;height:50px}}

#controls{display:grid;grid-template-columns:70px 70px minmax(0,1fr) 70px;gap:3px;padding:10px 7px calc(14px + env(safe-area-inset-bottom));align-items:center}
#controls .direction{display:contents}
#controls button,#controls [data-key="left"],#controls [data-key="right"],#controls .jump,#controls [data-key="power"]{width:100%;height:76px}
#controls [data-key="power"]{grid-column:3}
#controls .jump{grid-column:4}
@media(max-width:340px){#controls{grid-template-columns:60px 60px minmax(0,1fr) 60px}#controls button,#controls [data-key="left"],#controls [data-key="right"],#controls .jump,#controls [data-key="power"]{width:100%;height:68px}}

#phone{container-type:inline-size}
#controls{gap:3px;padding:10px 8px calc(14px + env(safe-area-inset-bottom));align-items:center}
#controls .direction{gap:3px}
#controls button,#controls [data-key="left"],#controls [data-key="right"],#controls .jump{width:clamp(50px,17.5cqw,80px);height:clamp(50px,17.5cqw,80px)}
#controls [data-key="power"]{width:clamp(116px,40cqw,178px);height:clamp(50px,17.5cqw,80px)}

#controls{display:flex;justify-content:space-between;gap:6px;padding:10px 10px calc(16px + env(safe-area-inset-bottom))}
#controls .direction{display:flex;gap:9px}
#controls button,#controls [data-key="left"],#controls [data-key="right"],#controls .jump{width:clamp(48px,15.5cqw,74px);height:clamp(48px,15.5cqw,74px)}
#controls [data-key="power"]{width:clamp(106px,36cqw,170px);height:clamp(48px,15.5cqw,74px)}
#dialogue{--dialogue-color:#219ee3;position:absolute;z-index:10;left:4%;right:4%;bottom:calc(24px + env(safe-area-inset-bottom));animation:dialogue-enter 180ms ease-out both;cursor:pointer}
#dialogue.leaving{animation:dialogue-leave 180ms ease-in both}
#dialoguePortrait{position:absolute;right:4px;bottom:calc(100% - 8px);width:132px;height:132px;image-rendering:pixelated;pointer-events:none}
#dialogueName{position:relative;width:max-content;min-width:120px;background:var(--dialogue-color);color:#fff;font-size:17px;font-weight:bold;letter-spacing:1px;border:3px solid #fff;padding:7px 16px;z-index:2;overflow:hidden}
#dialogueName:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.65) 48%,transparent 61%);transform:translateX(-140%);animation:dialogue-shine 3.8s ease-in-out infinite;pointer-events:none}
#dialogueBox{background:#fff;border:4px solid var(--dialogue-color);outline:3px solid #fff;padding:16px 14px 12px;position:relative;margin-top:-3px;min-height:120px;box-shadow:none}
#dialogueText{color:#353b43;font-family:monospace;font-size:15px;line-height:1.55;text-align:left;margin:0;padding:0;white-space:normal}
#dialogueBox small{display:block;text-align:right;color:#929aa4;font-size:11px;margin-top:12px;font-family:monospace}
@keyframes dialogue-enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes dialogue-leave{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(6px)}}
@keyframes dialogue-shine{0%,65%{transform:translateX(-140%)}95%,100%{transform:translateX(140%)}}
@media(max-height:520px){#dialoguePortrait{width:95px;height:95px}#dialogueText{font-size:14px;line-height:1.4}}

#dialogue{left:16%;right:4%;top:59%;bottom:auto}
#dialoguePortrait{right:0;bottom:calc(100% - 2px);width:178px;height:178px;z-index:1}
#dialogueName{position:absolute;top:-31px;left:4px;min-width:0;width:126px;height:36px;padding:0;z-index:0;border:3px solid #fff}
#dialogueNameCanvas{width:120px;height:26px;image-rendering:pixelated}
#dialogueBox{margin-top:0;z-index:2;padding:14px 12px 23px;min-height:110px}
#dialogueBox small{position:absolute;bottom:4px;right:6px;margin:0}
#dialogueText{font-size:14px;line-height:1.5}
@media(max-height:520px){#dialogue{top:54%}#dialoguePortrait{width:115px;height:115px}#dialogueText{font-size:13px;line-height:1.35}#dialogueBox{padding:10px 10px 23px}}

/* Patch 29: fixed bottom dialogue and flat controls. */
#dialogue{top:auto;bottom:calc(20px + env(safe-area-inset-bottom));left:16%;right:4%}
#dialogueNameCanvas{width:100%;height:30px}
#dialogueName{height:36px;top:-31px}
#dialogueBox{padding-bottom:30px}
#dialogueBox small{font-size:10px;max-width:100%;bottom:6px;right:7px}
.mention-mailza{color:#ef479b;font-weight:800}.mention-other{color:#159ee3;font-weight:800}
#controls button{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;outline:0;transform:none!important;filter:none;box-shadow:none!important}
#controls [data-key="left"],#controls [data-key="right"]{clip-path:var(--arrow-clip)!important}
#controls .jump{clip-path:circle(42.647% at 50% 50%)!important}
#paused{z-index:20;background:#071379;gap:22px}
#paused button,#paused button:active{width:78%;max-width:360px;height:82px;padding:0;background:transparent;border:0;transform:none;box-shadow:none}
#paused button canvas{width:100%;height:100%;object-fit:fill;pointer-events:none}
@media(max-height:520px){#dialogue{top:auto;bottom:16px}#dialoguePortrait{width:110px;height:110px}#paused{gap:14px}#paused button{height:65px}}

/* Patch 30: quieter pause buttons and clear name tabs. */
#dialogueName{top:-38px;height:43px}
#dialogueNameCanvas{height:32px}
#paused{gap:24px}
#paused button,#paused button:active{width:66%;max-width:280px;height:66px}
@media(max-height:520px){#paused{gap:18px}#paused button,#paused button:active{height:56px;width:64%}}

/* Patch 31: extra room around the raised-hair portrait. */
#dialogue[data-portrait="rocket"] #dialoguePortrait{width:222px;height:178px;max-width:none}
@media(max-height:520px){#dialogue[data-portrait="rocket"] #dialoguePortrait{width:138px;height:110px}}

/* Aggregate statistics use the pause palette and the same fixed button artwork. */
#statisticsPage{z-index:21;background:#071379;justify-content:center;gap:20px;padding:24px 16px calc(24px + env(safe-area-inset-bottom))}
#statisticsArt{width:100%;height:auto;max-height:70%;aspect-ratio:360/450;object-fit:contain}
#statisticsBack,#statisticsBack:active{width:66%;max-width:280px;height:66px;padding:0;background:transparent;border:0;box-shadow:none;transform:none}
#statisticsBack canvas{pointer-events:none}
@media(max-height:520px){#statisticsPage{gap:10px;padding:12px}#statisticsBack,#statisticsBack:active{height:56px}#paused{gap:14px}}