@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Bangers&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
*{box-sizing:border-box}body{margin:0;background:#171a17;color:#f3efdf;font-family:'IBM Plex Mono',monospace;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:1px solid #55594b;background:#242820;cursor:pointer;border-radius:3px;padding:12px}button:hover{border-color:#f5d565;background:#34372c}button:focus-visible{outline:3px solid #f5d565;outline-offset:3px}button:disabled{opacity:.5;cursor:wait}#game{width:100vw;height:100dvh;display:block}header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:16px;padding:18px 26px;background:linear-gradient(#121711f5,#121711d9);border-bottom:1px solid #4f5844}a{color:inherit}.brand{font:900 42px/1 'Barlow Condensed',Impact,sans-serif;text-decoration:none;color:#f3d76f;display:flex;align-items:center;gap:12px}.brand span{font:10px/1.6 'IBM Plex Mono',monospace;width:90px;color:#c6c9b5}#hud{display:flex;gap:34px;margin:auto}small{font-size:10px;color:#b3b9a4}#hud small{display:block;letter-spacing:1px}strong{display:block;font-size:25px;font-weight:500;margin-top:4px}#fire{color:#ff975a}.bar{height:3px;width:150px;background:#4b4b36;margin-top:4px}.bar i{display:block;background:#ff8c4c;width:70%;height:100%}#radar{position:absolute;right:24px;top:120px;background:#171d18ee;border:1px solid #626952;padding:12px;font-size:11px;box-shadow:5px 5px 0 #10181055}#radar span{float:right;color:#f4d775}#mini{display:block;width:190px;height:160px;margin:10px 0}#toast{position:absolute;top:114px;left:50%;transform:translateX(-50%);background:#f3d76f;color:#22291e;font-size:12px;max-width:80vw;text-align:center;padding:12px 18px;opacity:0;transition:opacity .2s;pointer-events:none}#context{position:absolute;bottom:85px;left:50%;transform:translateX(-50%);font-size:13px;background:#182118dd;padding:10px 16px;display:none;border:1px solid #f3d76f;text-align:center}footer{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;font-size:10px;color:#c2c6b2;padding:12px 24px;background:#141c14ce}footer a{color:#b7bca8}.overlay{position:absolute;inset:0;z-index:10;background:#151a15ee;display:flex;align-items:center;justify-content:center;gap:5vw;padding:5vw;background-image:radial-gradient(ellipse at 80% 50%,#3d482a88,transparent 60%)}.intro-copy{width:540px;max-width:55vw}.eyebrow{font-size:11px;letter-spacing:2px;color:#f3d76f;margin-bottom:20px}h1{font:900 clamp(50px,6.6vw,100px)/.88 'Barlow Condensed',Impact,sans-serif;letter-spacing:-1px;margin:0 0 24px}h1 em{font-style:normal;color:#f2d36b}h1 span{font-size:23px;vertical-align:top}p{font-size:13px;line-height:1.8;color:#c7cbb8}.levels{display:flex;gap:8px;margin:24px 0 16px}.levels button{flex:1;text-align:left;font-size:11px;padding:13px 10px}.levels small{display:block;font-size:9px;margin-top:8px;line-height:1.5}.levels .selected{border-color:#f3d76f;background:#f3d76f;color:#24291d}.selected small{color:#4c503a}.primary{background:#f3d76f;color:#1e261a;font-weight:600;border:0;padding:19px 26px;letter-spacing:1px}.primary:hover{background:#ffe598}.fine{font-size:9px;opacity:.7;margin-top:19px}.hero{width:380px;position:relative;align-self:center;transform:rotate(-4deg)}.stamp{position:absolute;right:0;top:-40px;border:2px solid #f3d76f;padding:12px;color:#f3d76f;font-size:13px;transform:rotate(12deg)}.hero-art{height:400px;position:relative;filter:drop-shadow(10px 14px 0 #050b0666);animation:bob 3s ease-in-out infinite}.helmet{position:absolute;top:10px;left:55px;width:220px;height:100px;border-radius:110px 110px 12px 12px;background:#e9b83d;border-bottom:16px solid #a87822;color:#fffbd7;font-size:65px;text-align:center;z-index:2}.face{position:absolute;top:95px;left:85px;background:#cc9866;border-radius:15px 15px 55px 55px;width:160px;height:135px;color:#29291e;text-align:center;font-size:35px;padding-top:25px;border:12px solid #4c4430}.face span{font-size:25px}.body{position:absolute;top:210px;left:35px;width:270px;height:180px;background:#40493d;border:18px solid #252f27;border-radius:80px 80px 15px 15px;text-align:center;padding-top:35px;color:#f7d365;font-size:22px}.body b{font-size:12px;color:#b9bda4}.rock{position:absolute;bottom:0;right:0;font-size:150px;color:#121713;text-shadow:6px 0 #65705c;transform:rotate(20deg)}.flame{position:absolute;left:-15px;bottom:25px;font-size:140px;color:#ff7d3d}.hero-caption{margin-top:15px;border-top:1px solid #687257;padding-top:15px;font-size:10px;letter-spacing:1px}#card{position:absolute;right:0;top:0;bottom:0;width:48%;z-index:30;background:#f2d16a;color:#1b271c;padding:5vw;box-shadow:-20px 0 100px #0009;display:flex;flex-direction:column;justify-content:center;animation:slide .4s}#card .eyebrow{color:#55603a}#card h2{font:900 60px/.95 'Barlow Condensed',Impact,sans-serif;margin:16px 0}#card p{color:#3e492d}#card .primary{background:#233321;color:#f3d76f;align-self:flex-start}#portrait{font-size:140px;line-height:1.3;animation:bob 1.5s infinite;filter:drop-shadow(8px 8px 0 #9f8638)}.hidden{display:none!important}#end{text-align:center}#end h1{font-size:110px}#back{display:block;margin:15px auto}#touch{display:none}@keyframes bob{50%{transform:translateY(-12px) rotate(4deg)}}@keyframes slide{from{transform:translateX(100%)}to{transform:translateX(0)}}@media(max-width:800px){header{padding:10px;gap:7px}.brand{font-size:28px}.brand span{display:none}#hud{gap:12px}#hud small{font-size:7px;letter-spacing:0}strong{font-size:17px}.bar{width:85px}header button{padding:8px}#radar{right:10px;top:90px;padding:7px;font-size:9px}#mini{width:125px;height:105px}#radar small{font-size:8px}.overlay{padding:25px;gap:0}.intro-copy{max-width:none;width:100%}h1{font-size:72px}.hero{display:none}.levels{margin:16px 0}.levels button{font-size:10px}.fine{font-size:8px}footer{padding:5px 8px;justify-content:flex-end;font-size:8px}footer span{display:none}#touch{display:flex;position:absolute;bottom:35px;left:20px;right:20px;justify-content:space-between;align-items:flex-end;pointer-events:none}#pad{display:grid;grid-template-columns:50px 50px 50px;gap:4px;pointer-events:auto;touch-action:none}#pad button{font-size:22px;padding:10px;background:#172117bb}#pad button:first-child{grid-column:2}#pad button:nth-child(2){grid-column:1}#act{border-radius:50%;width:75px;height:75px;background:#f3d76fdd;color:#192419;pointer-events:auto;touch-action:none}#act small{color:#38442a;font-size:8px}#context{bottom:170px;width:85%;font-size:11px}#toast{top:75px;width:80%;font-size:11px}#card{top:auto;bottom:0;width:100%;height:55%;padding:25px;animation:slide .3s}#card h2{font-size:38px;margin:5px 0}#portrait{font-size:65px;position:absolute;right:25px;top:18px}#card p{font-size:12px;max-width:85%}#card .eyebrow{margin-bottom:12px}}
#portrait{height:230px;max-width:300px;line-height:1;flex-shrink:0}#portrait svg{height:100%;width:100%;overflow:visible}.blink{transform-origin:120px 112px;animation:blink 4s infinite}@keyframes blink{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.1)}}@media(max-width:800px){#portrait{height:105px;width:115px;top:0;right:5px}#card .eyebrow{max-width:65%}#card h2{max-width:76%}}

.credit{font-size:11px;line-height:1.65;color:#dedbc5;border-left:3px solid #f3d76f;padding-left:12px;margin:18px 0 12px}.credit strong{font:inherit;color:#f3d76f;margin-top:5px}#menu{overflow-y:auto}@media(max-height:760px){#menu{align-items:flex-start}.intro-copy{margin-block:auto}}@media(max-width:800px){.credit{font-size:10px;margin:14px 0 10px}}

#boss-panel{position:absolute;left:24px;bottom:65px;display:flex;flex-direction:column;gap:8px;padding:10px;background:#182018e8;border-left:3px solid #f06480;font-size:10px;color:#ffb3c1}#throw{padding:12px 16px;color:#eed6a6}#throw.ready{background:#f4d16b;color:#1a2518;border-color:#f4d16b}#throw:disabled{cursor:default;opacity:.55}@media(max-width:800px){#boss-panel{left:auto;right:20px;bottom:127px;max-width:180px;padding:7px;font-size:8px}#throw{font-size:11px;padding:14px}#context{bottom:235px}}
/* Unified comic-book art direction: paper, ink, halftone and panels. */

:root{--ink:#24352c;--paper:#fff2cd;--yellow:#ffda58;--pink:#eb6784}body{background:var(--paper);color:var(--ink);font-family:'IBM Plex Mono',monospace}button{border:3px solid var(--ink);border-radius:4px;background:var(--paper);color:var(--ink);box-shadow:3px 4px 0 var(--ink);font-weight:600}button:hover{background:#ffe497;border-color:var(--ink);transform:translateY(-1px)}button:active{transform:translate(2px,2px);box-shadow:1px 2px 0 var(--ink)}button:disabled{cursor:default}header{background:var(--paper);border-bottom:4px solid var(--ink);box-shadow:0 4px 0 #24352c33}header .brand{color:#e96044;text-shadow:2px 2px 0 var(--ink);font-family:'Bangers',Impact,sans-serif}header .brand span{color:var(--ink);text-shadow:none}#hud small,small{color:#4c5948}#hud strong{font-family:'Bangers',Impact,sans-serif;font-size:30px;letter-spacing:1px}#fire{color:#d6432c}.bar{height:6px;background:#bfae81;border:1px solid var(--ink)}.bar i{background:#f06e3f}#radar{background:var(--paper);border:3px solid var(--ink);box-shadow:5px 6px 0 var(--ink);transform:rotate(1deg)}#radar span{color:#b94e3f}#mini{border:2px solid var(--ink)}#toast{background:var(--yellow);color:var(--ink);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);font-weight:600}#context{background:var(--paper);border:3px solid var(--ink);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}footer{background:var(--paper);color:var(--ink);border-top:2px solid var(--ink)}footer a{color:var(--ink)}.overlay{background-color:#f6d46f;background-image:radial-gradient(#6c543426 1.2px,transparent 1.3px),linear-gradient(115deg,#fff3cfaa 50%,#f19c6277 50%);background-size:8px 8px,100% 100%}.intro-copy{position:relative}h1{font-family:'Bangers',Impact,sans-serif;color:var(--ink);letter-spacing:1px;line-height:.94;transform:rotate(-2deg);text-shadow:3px 3px 0 #fff5cf}h1 em{color:#e7583d;-webkit-text-stroke:1px var(--ink);text-shadow:4px 4px 0 var(--ink)}.eyebrow{background:var(--ink);color:#ffdf79;padding:8px 12px;display:inline-block;transform:rotate(-1deg);font-weight:600}p{color:#344536}.intro-copy>p:not(.fine):not(.credit){background:var(--paper);padding:12px 15px;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);max-width:430px}.levels button{background:var(--paper);border:3px solid var(--ink);color:var(--ink)}.levels small,.selected small{color:#4b5444}.levels .selected{background:var(--yellow);border-color:var(--ink);transform:rotate(-2deg)}.primary{background:var(--yellow);color:var(--ink);border:3px solid var(--ink);box-shadow:5px 6px 0 var(--ink)}.primary:hover{background:#fff09b}.fine{color:#3e4b36;opacity:1}.credit{border-left:4px solid var(--ink);color:var(--ink)}.credit strong{color:#9c342d;font-weight:bold}.hero{background:#ffe5a6;border:5px solid var(--ink);box-shadow:10px 12px 0 var(--ink);padding:18px;background-image:radial-gradient(#705e3733 1.2px,transparent 1.3px);background-size:7px 7px}.hero-art{transform:scale(.9);transform-origin:center}.helmet{border:5px solid var(--ink);border-bottom-width:14px}.face{border-color:var(--ink)}.body{background:#388ea5;border-color:var(--ink)}.body b{color:#f6e9c5}.stamp{background:#ee7153;color:var(--ink);border:3px solid var(--ink);font-weight:bold;box-shadow:4px 4px 0 var(--ink);right:-30px;top:-25px;z-index:3}.hero-caption{color:var(--ink);border-top:3px solid var(--ink);font-weight:bold}#card{background-color:var(--paper);background-image:radial-gradient(#a08a4a26 1px,transparent 1.2px);background-size:7px 7px;border:5px solid var(--ink);box-shadow:-12px 0 0 #24352c66}#card .eyebrow{color:var(--yellow)}#card h2{font-family:'Bangers',Impact,sans-serif;color:var(--ink);letter-spacing:1px;transform:rotate(-2deg)}#card p{color:var(--ink);background:#fff8e6;padding:12px;border:2px solid var(--ink);box-shadow:4px 4px 0 #24352c33}#card .primary{background:var(--yellow);color:var(--ink)}#portrait{filter:drop-shadow(5px 6px 0 #24352c55)}#boss-panel{background:var(--paper);color:#962d4b;border:3px solid var(--ink);border-top:6px solid var(--pink);box-shadow:4px 4px 0 var(--ink)}#throw{color:var(--ink);background:#f8c5d2}#throw.ready{color:var(--ink);background:var(--yellow);border-color:var(--ink)}#end>div{background:var(--paper);border:5px solid var(--ink);box-shadow:10px 12px 0 var(--ink);padding:30px}#end h1{font-size:95px}@media(max-width:800px){#hud strong{font-size:21px}header{gap:6px}header button{padding:5px;border-width:2px}.brand{font-size:27px}#radar{border-width:2px;box-shadow:3px 3px 0 var(--ink)}#pad button{color:var(--ink);background:#fff0bde8;border:3px solid var(--ink)}#act{background:var(--yellow);color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}#boss-panel{font-size:8px}#card{border-width:4px;height:62%;overflow-y:auto}#card h2{font-size:36px}#card p{font-size:11px;margin:8px 0 12px;max-width:100%}#card .eyebrow{font-size:9px}h1{font-size:64px}.intro-copy>p:not(.fine):not(.credit){font-size:11px;padding:8px 12px;margin:12px 0}.levels{gap:6px}.levels button{padding:9px 6px;font-size:9px}.primary{padding:14px 18px}.overlay{padding:22px}.credit{font-size:9px}#end>div{padding:20px}#end h1{font-size:75px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
