@import url('./assets/fonts/fonts.css');
:root{color-scheme:dark;--bg:#000;--panel:#101010;--text:#fff;--muted:#bdbdbd;--quiet:#909090;--line:#ffffff26;--accent:#fff;--blue:#83dce9;--green:#bde39a;--purple:#ba9bdf;--danger:#f28b88;--serif:'Cormorant Garamond',Georgia,serif;--heading:'Playfair Display',Georgia,serif;--sans:'Inter',Arial,sans-serif;font:400 16px/1.5 var(--sans);font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text)}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;cursor:pointer;color:inherit;border:0}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid white;outline-offset:5px}
button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.defs{position:absolute;width:0;height:0;overflow:hidden}
#game-shell{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden;isolation:isolate}
#game-canvas{display:block;width:100%;height:100%;position:absolute;inset:0;touch-action:none;outline-offset:-5px}
.film-grain{display:none}
.edge-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0005,transparent 22%,transparent 80%,#0008);z-index:1}
[data-phase=menu] .edge-vignette{background:linear-gradient(90deg,#000b,transparent 65%),linear-gradient(0deg,#0008,transparent 25%)}
.topbar{position:absolute;top:0;left:0;width:100%;min-height:98px;padding:max(22px,env(safe-area-inset-top)) 6%;display:flex;align-items:center;justify-content:space-between;gap:24px;z-index:10;pointer-events:none}
.topbar a,.topbar button{pointer-events:auto}
.wordmark{display:flex;align-items:center;flex-wrap:wrap;column-gap:22px;row-gap:2px;min-width:0}
.wordmark-brand{font:600 1rem/1.25 var(--sans);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.wordmark-game{border-left:1px solid var(--line);padding-left:22px;color:var(--muted);font:400 12px/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.top-actions{display:flex;gap:10px;flex:none}
.round-button{position:relative;width:44px;height:44px;border:1px solid var(--line);display:grid;place-items:center;border-radius:0;background:#0005;color:#d5d5d5;transition:border-color .2s,background .2s}
.round-button:hover{border-color:#fff8;background:#ffffff0d;color:#fff}
.round-button svg{width:18px;height:18px}
.sound-off{position:absolute;left:10px;top:21px;width:22px;height:1px;background:white;transform:rotate(-45deg);box-shadow:0 0 0 1.5px #000}
.round-button[aria-pressed=true] .sound-off{display:none}

/* The start screen sits over the moving playfield. */
.front-screen{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:98px 0 100px 10%;pointer-events:none}
.front-screen button{pointer-events:auto}
.game-kicker{display:flex;align-items:center;gap:14px;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.game-kicker>span{display:block;width:26px;height:1px;background:#ffffff5c}
h1{font:400 clamp(88px,8.4vw,136px)/.88 var(--serif);letter-spacing:-.035em;margin:0}
h1>span{display:block;margin-top:4px;font-style:italic;font-weight:400;letter-spacing:-.045em}
.intro{font-size:1rem;line-height:1.8;color:var(--muted);margin:26px 0 30px}
.start-actions{display:flex;align-items:center;gap:25px}
.primary-button{display:flex;align-items:center;justify-content:space-between;gap:28px;background:#fff;border:1px solid #fff;color:#000;min-height:56px;padding:16px 25px;font-size:.875rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;border-radius:0;transition:background .18s,border-color .18s}
.primary-button:hover{background:#ddd;border-color:#ddd}
.primary-button:active{background:#c8c8c8}
.primary-button>svg{width:20px;height:20px;flex:none}
.how-button{min-height:48px;background:transparent;padding:12px 0;border-bottom:1px solid #ffffff40;font-size:.875rem;color:#d7d7d7}
.how-button:hover{color:white;border-bottom-color:white}
.record{display:flex;gap:12px;align-items:center;margin-top:28px;font-size:.75rem;letter-spacing:.13em;color:var(--quiet)}
.record-line{width:24px;height:1px;background:var(--line)}
.record strong{font:400 1rem/1.4 var(--sans);color:#e5e5e5;font-variant-numeric:tabular-nums;letter-spacing:.08em}
.menu-footer{position:absolute;bottom:max(26px,env(safe-area-inset-bottom));left:6%;right:6%;display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);padding-top:18px;font-size:.75rem;letter-spacing:.13em;color:var(--quiet);z-index:3;pointer-events:none}
.menu-footer i{font-style:normal;margin:0 12px;color:#5d5d5d}
.controls-hint{letter-spacing:.08em}

.game-hud{position:absolute;inset:0;pointer-events:none;z-index:4}
.bar{height:3px;background:#ffffff24;overflow:hidden}
.bar>i{height:100%;display:block;transition:width .15s linear}
.ink-meter .bar>i{background:var(--blue);width:100%}
.run-toast{position:absolute;z-index:7;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;text-align:center}
.run-toast.visible{opacity:1}
.countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:8;pointer-events:none;background:#0004}
.countdown strong{font:400 clamp(110px,18vw,180px)/1 var(--serif);color:white;text-shadow:0 4px 30px #0008}
.countdown>span{font-size:.875rem;letter-spacing:.16em;margin-top:12px;color:white;text-shadow:0 2px 10px #000}
#damage-flash{position:absolute;inset:0;z-index:6;pointer-events:none;box-shadow:inset 0 0 140px #b42c35;background:#ff331009;opacity:0;transition:opacity .15s}

.overlay-screen{position:absolute;inset:0;background:#000d;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:flex;flex-direction:column;align-items:center;padding:max(28px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom));overflow-y:auto;z-index:20}
.pause-content,.result-content{flex:none;width:min(480px,100%);margin:auto 0;text-align:center}
.eyebrow{font-size:.75rem;line-height:1.6;letter-spacing:.18em;color:var(--muted)}
h2{font:400 clamp(34px,4.5vw,48px)/1.15 var(--heading);letter-spacing:-.025em;margin:20px 0 18px}
.pause-content>p,.result-content>p{font-size:1rem;color:var(--muted);line-height:1.7;margin:0 0 30px}
.pause-content .primary-button,.result-content .primary-button{width:100%;justify-content:center}
.secondary-button{font-size:.875rem;padding:14px 20px;background:transparent;color:var(--muted);min-height:48px}
.secondary-button:hover{color:white}
.result-score{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0 24px;position:relative}
.result-score>span:first-child{display:block;font-size:.75rem;letter-spacing:.2em;color:var(--muted)}
.result-score>strong{font:400 clamp(60px,10vw,88px)/1.15 var(--serif);letter-spacing:-.02em;display:block;margin-top:4px;font-variant-numeric:lining-nums tabular-nums;overflow-wrap:anywhere}
.result-score>strong.long-score{font-size:clamp(34px,7vw,60px)}
.new-record{font-size:.75rem;letter-spacing:.18em;color:white}
.result-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:24px 0 28px}
.result-stats strong{display:block;font:400 26px/1.2 var(--serif);color:white}
.result-stats span{display:block;font-size:.75rem;line-height:1.4;color:var(--muted);margin-top:6px}
.result-content .local-save{font-size:.75rem;margin:14px 0 0;color:var(--quiet)}
.pause-settings{border-top:1px solid var(--line);margin-top:16px;padding-top:8px}
.help-dialog{width:min(620px,calc(100% - 28px));max-height:calc(100dvh - 32px);padding:38px;background:#0b0b0b;color:white;border:1px solid #ffffff38;border-radius:0;overflow-y:auto;box-shadow:0 20px 100px #0009}
.help-dialog::backdrop{background:#000b;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.dialog-close{position:absolute;right:14px;top:14px}
.help-dialog>.eyebrow{display:block;padding-right:38px}
.help-dialog h2{margin:22px 0 18px}
.help-intro{font-size:1rem;line-height:1.7;color:var(--muted);margin-bottom:26px}
.help-row{display:flex;gap:20px;padding-top:24px;margin-top:24px;border-top:1px solid var(--line)}
.help-row>span{color:#aaa;font:400 22px/1.2 var(--serif)}
.help-row h3{font:400 23px/1.2 var(--serif);margin:0 0 10px}
.help-row p{font-size:1rem;line-height:1.7;color:var(--muted);margin:0}
.pickup-explainer{display:flex;flex-wrap:wrap;gap:18px;border:1px solid var(--line);padding:18px;margin:24px 0}
.pickup-explainer>div{display:flex;gap:10px;align-items:center;flex:1;min-width:165px}
.pickup-dot{width:8px;height:8px;border-radius:50%;flex:none}
.ink-dot{background:var(--blue)}
.shield-dot{background:var(--green)}
.pickup-explainer span{font-size:.875rem;color:var(--muted);line-height:1.6}
.pickup-explainer strong{font-weight:500;display:block;color:white}
.help-dialog>.primary-button{width:100%;justify-content:center;margin-top:32px}
.help-note{font-size:.75rem;line-height:1.7;color:var(--quiet);text-align:center;margin:18px 0 0}
.error-screen{z-index:50}

@media(min-width:1600px){.front-screen{padding-left:12%}h1{font-size:154px}}
@media(max-width:850px){.topbar{padding-right:24px;padding-left:24px;gap:16px}.wordmark{column-gap:15px}.wordmark-game{padding-left:15px}.front-screen{padding-left:7%}h1{font-size:clamp(76px,11vw,106px)}.controls-hint{display:none}}
@media(max-width:650px) and (min-height:501px){
 .topbar{min-height:82px;padding:max(18px,env(safe-area-inset-top)) 20px 12px}.wordmark{display:block}.wordmark-brand{display:block;font-size:.875rem;letter-spacing:.14em}.wordmark-game{display:block;border:0;padding:0;margin-top:4px;font-size:.75rem;letter-spacing:.16em}.top-actions{gap:8px}
 .front-screen{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto 1fr auto auto;align-content:stretch;align-items:start;justify-items:center;padding:calc(106px + env(safe-area-inset-top)) 24px calc(66px + env(safe-area-inset-bottom));text-align:center}
 .game-kicker{font-size:.75rem;letter-spacing:.13em;margin:0 0 14px}.game-kicker>span{width:18px}h1{font-size:clamp(64px,17vw,90px);line-height:.88}h1>span{margin-top:0}.intro{max-width:260px;font-size:1rem;line-height:1.5;margin:16px 0 0}
 .start-actions{grid-row:5;width:min(420px,100%);display:grid;grid-template-columns:1fr auto;gap:20px}.primary-button{min-height:56px;padding:16px 20px;letter-spacing:.07em;gap:15px}.how-button{font-size:.875rem}.record{grid-row:6;font-size:.75rem;margin-top:17px;gap:9px}.record strong{font-size:.875rem}
 .menu-footer{left:24px;right:24px;bottom:calc(16px + env(safe-area-inset-bottom));padding-top:12px;justify-content:center;font-size:.75rem;letter-spacing:.08em}.menu-footer>span:first-child{display:none}[data-phase=menu] .edge-vignette{background:linear-gradient(#000a,#0008 28%,transparent 52%,transparent 74%,#000c)}
}
@media(max-width:380px){.topbar{padding-left:16px;padding-right:16px}.wordmark-brand{font-size:.875rem;letter-spacing:.12em}.top-actions{gap:6px}.front-screen{padding-left:20px;padding-right:20px}.start-actions{gap:14px}.primary-button{padding-left:16px;padding-right:16px;font-size:.8125rem}.result-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.help-dialog{padding:30px 22px}.help-row{gap:14px}}
@media(max-height:740px) and (max-width:650px) and (min-height:501px){.front-screen{padding-top:calc(99px + env(safe-area-inset-top));padding-bottom:calc(62px + env(safe-area-inset-bottom))}h1{font-size:clamp(57px,16vw,72px)}.game-kicker{margin-bottom:10px}.intro{margin-top:13px}.record{margin-top:12px}}
@media(max-height:500px){.topbar{min-height:62px;padding-top:10px;padding-bottom:8px}.wordmark-brand{font-size:.875rem}.wordmark-game{font-size:.75rem}.front-screen{padding:72px 0 64px 7%}.game-kicker{margin-bottom:13px}h1{font-size:clamp(49px,11vh,65px);line-height:.86}h1>span{display:inline;margin-left:.15em}.intro{margin:17px 0;max-width:270px;line-height:1.45}.primary-button{min-height:48px;padding:12px 18px}.record{margin-top:14px}.menu-footer{bottom:12px;padding-top:10px}}
@media(max-height:700px) and (min-width:851px){.front-screen{padding-top:90px;padding-bottom:80px}h1{font-size:86px}.game-kicker{margin-bottom:16px}.intro{margin:20px 0}.record{margin-top:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
[data-phase=playing] #game-canvas{cursor:none}