:root{--ink:#293d34;--paper:#eeeddc;--yellow:#f6cc47;--muted:#758477;--line:#293d3430}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper)}button,a{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #e89045;outline-offset:5px}button{user-select:none;-webkit-user-select:none}button[hidden],[hidden]{display:none!important}#game{height:100dvh;min-height:420px;position:relative;isolation:isolate;overflow:hidden}canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.grain{position:absolute;inset:0;pointer-events:none;opacity:.13;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.5' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}header{position:absolute;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top) + 26px) 32px 15px;display:flex;align-items:center;gap:24px;z-index:3}.wordmark{font-family:Georgia,serif;font-weight:900;font-size:29px;letter-spacing:-2px;text-decoration:none;color:inherit}.wordmark span{color:#d68c36}#stageLabel{display:flex;flex-direction:column;gap:5px}#chapter{font-size:10px;letter-spacing:2.2px;font-weight:700}#worldName{font-family:Georgia,serif;font-size:17px;font-weight:normal}.utility{display:flex;gap:8px;margin-left:auto}.utility button{position:relative;border:1px solid var(--line);border-radius:50%;background:color-mix(in srgb,var(--paper) 80%,transparent);width:40px;height:40px;font-size:22px}#soundSlash{position:absolute;left:18px;top:9px;font-size:23px}#hud{position:absolute;top:calc(env(safe-area-inset-top) + 108px);left:32px;right:32px;display:flex;align-items:center;justify-content:space-between}.chase{font-size:13px}.steps{display:flex;gap:6px;margin-top:10px}.steps i{width:26px;height:5px;border-radius:2px;background:var(--ink);transition:opacity .25s}.steps i.lost{opacity:.15}.time{display:flex;align-items:center;gap:8px}.time strong{font-family:Georgia,serif;font-size:35px;font-weight:normal}.time span{font-size:9px;letter-spacing:1.3px}.progress{position:absolute;top:65px;left:0;right:0;height:2px;background:var(--line)}#progressFill{height:100%;width:0;background:var(--ink)}.screen{position:absolute;inset:0;pointer-events:none}.screen button,.screen a{pointer-events:auto}.intro-title{position:absolute;left:max(8vw,32px);top:16.5%;}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.2px;line-height:1.6}h1{font-family:Georgia,'Times New Roman',serif;font-weight:normal;letter-spacing:-5px;font-size:clamp(60px,8vw,106px);line-height:.92;margin:20px 0 23px;transform:rotate(-3deg)}h1 em{font-weight:normal;color:#8a9b68;font-style:italic}.title-line{width:58px;height:3px;transform:rotate(-3deg);background:var(--ink)}.start-bottom{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 46px);left:50%;transform:translateX(-50%);width:min(360px,calc(100% - 48px));text-align:center}.primary{width:100%;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);padding:18px 23px;border-radius:7px;box-shadow:0 4px 0 #17291e26;font-size:18px;display:flex;align-items:center;justify-content:space-between;font-weight:600;transition:transform .15s}.primary:active{transform:translateY(3px)}.primary span{font-size:25px;line-height:18px}.start-bottom p{font-size:12px;margin:17px 0 0;color:var(--ink)}.worlds{display:flex;justify-content:center;margin-bottom:18px;gap:4px}.worlds button{border:0;background:transparent;padding:9px 12px;font-size:10px;letter-spacing:1px;opacity:.5}.worlds button span{font-size:13px;letter-spacing:0;margin-left:3px}.worlds button.chosen{opacity:1;border-bottom:1px solid var(--ink)}#controls{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 27px);left:50%;width:min(430px,calc(100% - 40px));transform:translateX(-50%)}.control-note{text-align:center;font-size:9px;letter-spacing:1.7px;font-weight:700;margin-bottom:18px}.control-row{display:flex;gap:12px}.action{flex:1;border:1px solid var(--ink);background:var(--paper);border-radius:10px;min-height:78px;display:flex;align-items:center;gap:19px;padding:13px 20px;box-shadow:0 5px 0 #233b3120;touch-action:none}.action.jump{background:var(--yellow);color:#293d34}.action span:last-child{text-align:left}.action b{display:block;font-family:Georgia,serif;font-size:26px;font-weight:normal}.action small{display:block;font-size:8px;letter-spacing:1px;margin-top:6px}.action-icon{font-size:33px}.action:active,.action.pressed{transform:translateY(4px);box-shadow:0 1px 0 #233b3120}.corner{position:absolute;bottom:18px;left:32px;font-size:9px;letter-spacing:2px;opacity:.55}#cue{position:absolute;top:28%;left:50%;transform:translateX(-50%);font-family:Georgia,serif;font-size:29px;white-space:nowrap;pointer-events:none;text-align:center;transition:opacity .2s;opacity:0}#overlay{z-index:6;background:#182d3155;backdrop-filter:blur(7px);display:grid;place-items:center;pointer-events:auto}.modal{width:min(370px,calc(100% - 44px));background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:36px 29px 24px;box-shadow:0 15px 60px #0002;border-radius:12px;text-align:center}h2{font-family:Georgia,serif;font-size:41px;font-weight:normal;letter-spacing:-1.5px;margin:18px 0}.modal p{font-size:14px;line-height:1.7;margin:0 0 27px}.text-button{border:0;background:none;padding:21px 10px 5px;font-size:12px;text-decoration:underline;text-underline-offset:4px}@media(min-width:800px){header{padding-left:44px;padding-right:44px}#hud{left:44px;right:44px}.start-bottom{left:auto;right:8vw;transform:none;bottom:15%}.intro-title{top:25%}.worlds{justify-content:flex-start}#controls{bottom:40px}.corner{left:44px;bottom:25px}}@media(max-width:480px){header{padding:calc(env(safe-area-inset-top) + 21px) 23px 12px;gap:19px}.intro-title{top:15%;left:30px}h1{font-size:66px;letter-spacing:-3px}.eyebrow{font-size:8px;letter-spacing:1.6px}.corner{display:none}#hud{left:24px;right:24px}.start-bottom{bottom:calc(env(safe-area-inset-bottom) + 27px)}#worldName{font-size:16px}.utility button{width:36px;height:36px}#soundSlash{top:6px;left:16px}}@media(max-height:620px){.intro-title{top:20%}h1{font-size:53px}.intro-title .eyebrow,.title-line{display:none}.start-bottom{bottom:20px}.start-bottom p{margin-top:10px}#controls{bottom:15px}.control-note{display:none}.action{min-height:61px}#hud{top:90px}.progress{top:49px}}

/* Keep small labels readable on handheld screens. */
#chapter,.eyebrow,.time span,.start-bottom p,.worlds button,.control-note,.corner,.action small{font-size:12px}.action{gap:12px;padding:13px 16px}.action-icon{font-size:28px}.action small{letter-spacing:.3px}.control-note{letter-spacing:.7px}.corner{letter-spacing:1px}@media(max-width:480px){.eyebrow{font-size:10px}.time span{font-size:10px}#chapter{font-size:10px}.control-note{font-size:10px}.action small{font-size:10px}.worlds button{padding:9px 10px}.intro-title{right:22px}}

#pace{position:absolute;right:0;top:76px;font-size:12px;letter-spacing:.4px;opacity:.7}.intro-title h1{color:var(--ink)}.intro-title{z-index:1}.primary:disabled{opacity:.65;cursor:wait}@media(max-height:620px){#pace{top:57px}}

.worlds{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 4px}.worlds button{padding:8px 6px;white-space:nowrap}.worlds button.chosen{background:color-mix(in srgb,var(--ink) 8%,transparent);border-radius:4px}#bestScore{position:absolute;left:0;top:76px;font-size:12px;letter-spacing:.4px}.time strong{font-variant-numeric:tabular-nums}.time{gap:7px}#cue{white-space:normal;width:calc(100% - 44px);max-width:550px;font-size:25px;line-height:1.2;text-wrap:balance}@media(max-height:620px){#bestScore{top:57px}.worlds{margin-bottom:10px}.worlds button{padding:5px}.start-bottom{width:min(360px,calc(100% - 48px))}}@media(max-width:480px){.time strong{font-size:30px}header{gap:13px}#worldName{font-size:15px}.worlds button span{font-size:13px}}

.chase{max-width:45%}.time{flex-shrink:0}#hitsLabel{display:block}@media(max-width:360px){.time strong{font-size:25px}.time span{font-size:9px}}
