#mapPanel{position:absolute;right:30px;top:115px;width:158px;padding:14px;background:#3b301eb3;border:1px solid #e2bd6655;border-radius:5px;font-size:8px;letter-spacing:2px;color:#eadbb7}#mapPanel canvas{display:block;width:130px;height:104px;margin:9px auto}#mapPanel small{font-size:7px;color:#f6d478}@media(max-width:700px){#mapPanel{display:none}}@media(max-height:540px){#mapPanel{width:120px;right:20px;top:75px;padding:9px}#mapPanel canvas{width:100px;height:80px}}:root{color-scheme:dark;--cream:#fff0cf;--gold:#ffc763;--cyan:#80eafd;--ink:#241910}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#639397;font-family:Arial,Helvetica,sans-serif;color:var(--cream);touch-action:none}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #a9f5ff;outline-offset:5px}#world,#world canvas,.vignette{position:absolute;inset:0;width:100%;height:100%}.vignette{pointer-events:none;background:linear-gradient(180deg,rgba(21,16,9,.42),transparent 24%,transparent 65%,rgba(19,13,9,.62)),linear-gradient(90deg,rgba(19,14,11,.22),transparent 55%)}header{position:absolute;top:30px;left:36px;right:36px;display:flex;align-items:center;justify-content:space-between;z-index:5}.brand{display:flex;align-items:center;gap:11px;font-size:24px;letter-spacing:3px;font-weight:900;text-shadow:0 2px 9px #482714}.brand b{color:var(--gold)}.brand small{display:block;font-weight:500;font-size:8px;letter-spacing:4px;margin-top:5px}.brand-icon{display:grid;place-items:center;border:1px solid #e9c28299;transform:rotate(45deg);height:35px;width:35px;font-size:27px;color:var(--gold);margin:0 6px}.top-tools{display:flex;gap:9px}.top-tools button{height:38px;min-width:38px;border:1px solid #f2d4a338;background:#30241880;border-radius:5px;font-size:19px}.top-tools span{font-size:9px;letter-spacing:1px;margin:0 8px}#quest{position:absolute;top:119px;left:39px;z-index:3;max-width:380px;text-shadow:0 2px 8px #201a12}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.4px;color:var(--gold)}.eyebrow i{display:inline-block;width:4px;height:4px;background:#edbb75;transform:rotate(45deg);margin:0 8px 2px}#quest h2{font-size:17px;line-height:1.3;margin:10px 0 7px}#quest p{font-size:11px;color:#efdfc5c4;margin:0;line-height:1.5}#waveProgress{display:none;gap:5px;margin-top:12px}#waveProgress span{width:45px;height:3px;background:#fff3}#waveProgress .on{background:var(--gold)}.location{position:absolute;right:37px;bottom:32px;font-size:9px;letter-spacing:2px;font-weight:700;text-align:right;line-height:1.6;text-shadow:0 2px 8px #000}.location span{color:var(--gold);font-size:16px;margin-right:4px}.location small{display:block;font-size:7px;color:#d5d9cd99;letter-spacing:2.5px}#intro{position:absolute;left:7%;top:38%;z-index:4;text-shadow:0 2px 24px #2a120e,0 2px 4px #1c1608aa}#intro h1{font-size:clamp(37px,4.5vw,68px);font-weight:850;letter-spacing:-2.7px;line-height:1.02;margin:17px 0 18px}#intro em{font-style:normal;color:var(--gold)}#intro p{font-size:13px;line-height:1.8;color:#f2e0c8;margin-bottom:26px}.gold-button{display:flex;align-items:center;justify-content:space-between;gap:25px;border:1px solid #ffdc8c;background:linear-gradient(145deg,#ffdb84,#eeac48);color:#372614;font-size:10px;font-weight:900;letter-spacing:1.3px;border-radius:4px;padding:17px 20px;box-shadow:0 5px 0 #8a501f,0 9px 24px #27190f55;transition:filter .2s,transform .2s;text-shadow:none}.gold-button:hover{filter:brightness(1.12);transform:translateY(-2px)}.gold-button span{font-size:20px;line-height:14px}.start-hint{font-size:9px;color:#eedac2b0;margin-top:18px;letter-spacing:.2px}.key{border:1px solid #f3d8ae44;border-radius:2px;padding:3px 6px;font-size:8px;margin-right:5px}.start-hint i{font-style:normal;margin:0 8px}#expeditionComplete{position:absolute;z-index:6;top:185px;left:39px;padding:10px 12px;border:1px solid #c6b16e88;border-radius:4px;background:#24382ce8;color:#ffdc8c;font-size:9px;letter-spacing:1px}@media(max-width:600px){#expeditionComplete{top:167px;left:23px;font-size:8px}}@media(max-height:540px) and (min-width:601px){#expeditionComplete{top:151px;left:25px}}.hidden{display:none!important}#hud{position:absolute;bottom:26px;left:0;width:100%;z-index:5;pointer-events:none}.hero-status{position:absolute;bottom:27px;left:32px;display:flex;gap:11px;align-items:center}.portrait{background:#30291be0;border:2px solid #c8a469;border-radius:50%;height:57px;width:57px;display:grid;place-items:center;font-size:35px;box-shadow:0 4px 13px #0007}.health-box{width:155px}.hero-label{font-size:10px;letter-spacing:2px;display:flex;justify-content:space-between;margin-bottom:7px}.hero-label span{font-size:9px;color:var(--gold);letter-spacing:1px}.health-track{height:8px;border:1px solid #d8b27b66;background:#371913;transform:skewX(-10deg)}#healthFill{height:100%;width:100%;background:linear-gradient(90deg,#e77150,#ffb96a);transition:width .2s}.health-caption{display:flex;justify-content:space-between;font-size:8px;color:#f0dfc6ab;margin-top:7px}#gold{color:var(--gold)}.ability-bar{display:flex;gap:7px;justify-content:center;pointer-events:auto}.ability{position:relative;width:78px;height:79px;border:1px solid #c5b18b66;border-bottom:3px solid #917744;border-radius:6px;background:linear-gradient(145deg,#262b27ed,#172524ef);box-shadow:0 3px 15px #1a170a77;padding:8px 5px 7px;overflow:hidden}.ability:hover{border-color:var(--cyan);background:#284845}.ability.primary{border-color:#80d4d8}.ability svg{width:32px;height:32px;fill:#51bed626;stroke:#8df0fc;stroke-width:1.5;margin:10px 0 3px;filter:drop-shadow(0 0 5px #2df0fb88)}.ability.potion svg{stroke:#ffb794;fill:#e57a5430;filter:drop-shadow(0 0 5px #fa6d4977)}.ability b{display:block;white-space:nowrap;font-size:7px;letter-spacing:.5px;font-weight:600}.binding{position:absolute;top:5px;left:7px;font-size:7px;color:#eedbbe9c;letter-spacing:.4px}.cooldown{position:absolute;inset:0;background:#10201de3;font-size:22px;font-weight:700;display:none;align-items:center;justify-content:center;pointer-events:none}.control-hint{text-align:center;font-size:8px;letter-spacing:1px;margin-top:12px;color:#ffedcbbb}.control-hint span{color:#deceb495;letter-spacing:.1px;margin-left:4px}.control-hint i{font-style:normal;margin:0 8px;color:#fff5}body.playing .location{bottom:43px}#joystick{position:absolute;bottom:42px;left:25px;height:100px;width:100px;border:1px solid #fff5;border-radius:50%;background:#32474177;display:none;z-index:10;touch-action:none}#stick{position:absolute;width:42px;height:42px;left:28px;top:28px;border-radius:50%;background:#eed5aa77;border:1px solid #ffebc4aa;pointer-events:none}#toast{position:absolute;top:25%;left:50%;transform:translate(-50%,-8px);text-align:center;z-index:20;font-size:13px;color:#fff2cd;letter-spacing:1px;background:#24342dd9;border:1px solid #dec39466;border-radius:4px;padding:13px 22px;opacity:0;transition:.25s;pointer-events:none;max-width:80%;width:max-content}#toast.show{opacity:1;transform:translate(-50%,0)}#damageNumbers{position:absolute;inset:0;pointer-events:none;overflow:hidden}.damage-number{position:absolute;color:#fff1b8;font-size:20px;font-weight:900;text-shadow:0 2px 3px #592d10;animation:rise .8s forwards}.damage-number.hurt{color:#ff795b}@keyframes rise{from{transform:translate(-50%,0);opacity:1}to{transform:translate(-50%,-55px);opacity:0}}#modal{position:absolute;inset:0;display:grid;place-items:center;z-index:30;background:#13262599;backdrop-filter:blur(9px)}.modal-card{padding:42px;max-width:440px;width:90%;background:linear-gradient(145deg,#343a2bed,#1b2826f5);border:1px solid #d4c08b77;border-radius:8px;text-align:center;box-shadow:0 30px 80px #0005}.modal-card h2{font-size:34px;letter-spacing:-1px;margin:16px 0}.modal-card p{color:#d2d1b7;font-size:13px;line-height:1.8}.modal-card .gold-button{margin:24px auto 18px}.text-button{border:0;background:none;color:#ddd1b4;font-size:10px;text-decoration:underline;padding:8px}#load{position:absolute;inset:0;z-index:99;background:#153e46;display:flex;justify-content:center;align-items:center;flex-direction:column;font-size:10px;letter-spacing:4px;gap:20px}#load span{width:120px;height:2px;background:linear-gradient(90deg,transparent,#ffd683,transparent);animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.3}}body.playing #intro{display:none}body.playing #quest{top:110px}body.playing #quest h2{font-size:16px}
@media(max-width:1000px){.hero-status{left:22px;bottom:28px}.health-box{width:105px}.portrait{width:45px;height:45px;font-size:27px}.location{font-size:8px;right:22px}.location small{font-size:6px}.ability{width:64px}#intro{left:6%}}
@media(pointer:coarse){body.playing #joystick{display:block}.control-hint{display:none}body.playing .ability-bar{position:absolute;right:23px;bottom:0;display:grid;grid-template-columns:repeat(2,64px)}.ability{height:65px}.ability svg{height:27px;width:27px;margin-top:5px}.binding{display:none}.hero-status{bottom:150px}.location{display:none}#hud{bottom:28px}}
@media(max-width:600px){header{top:21px;left:20px;right:20px}.brand{font-size:17px;letter-spacing:2px;gap:8px}.brand small{font-size:6px;letter-spacing:2.5px}.brand-icon{height:25px;width:25px;font-size:20px;margin-right:4px}.top-tools button{height:31px;min-width:31px}.top-tools span{display:none}#quest{top:91px;left:23px;max-width:280px}.eyebrow{font-size:8px;letter-spacing:1.8px}#quest h2{font-size:14px;max-width:260px}#quest p{font-size:10px;max-width:270px}#intro{top:auto;bottom:51px;left:24px;right:20px}#intro h1{font-size:40px;letter-spacing:-1.6px;margin:10px 0}#intro p{font-size:11px;margin:12px 0 18px;line-height:1.6}#intro .eyebrow{font-size:7px}#intro .gold-button{font-size:9px;width:100%;max-width:333px;padding:15px}.start-hint{font-size:8px;margin-top:16px}.location{display:none}.vignette{background:linear-gradient(180deg,#13221b55,transparent 20%,transparent 43%,#17281e55 62%,#16251ccf)}body.playing .hero-status{left:22px;bottom:135px}.health-box{width:118px}.hero-label{font-size:9px}body.playing #quest{top:91px}body.playing #quest h2{font-size:14px}.control-hint{display:none}.ability-bar{justify-content:flex-end;margin-right:18px;gap:4px}.ability{width:54px;height:65px}.ability b{font-size:6px}#toast{top:30%;font-size:11px;padding:12px 15px}.modal-card{padding:27px}.modal-card h2{font-size:29px}}
@media(max-height:540px) and (min-width:601px){header{top:17px;left:24px;right:24px}.brand{font-size:19px}.brand small{font-size:6px}#quest,body.playing #quest{top:79px;left:25px}#quest h2{font-size:13px}#quest p{font-size:9px}#intro{top:36%;left:6%}#intro h1{font-size:37px;margin:10px 0}#intro p{font-size:10px;margin:10px 0 14px}.gold-button{padding:13px 16px}.start-hint{margin-top:13px;font-size:8px}#intro .eyebrow{font-size:7px}.hero-status{bottom:7px}.location{display:none}#hud{bottom:15px}.ability{height:67px}.control-hint{display:none}body.playing .hero-status{bottom:92px}#joystick{bottom:25px;width:85px;height:85px}#stick{left:21px;top:21px}body.playing .ability-bar{grid-template-columns:repeat(4,58px);right:20px}.ability{width:58px}#quest{max-width:300px}}
@media(max-width:340px){.brand{font-size:14px}.brand-icon{display:none}header{left:15px;right:15px}#quest{left:18px}#intro{left:18px;bottom:27px}#intro h1{font-size:34px}#intro p{font-size:10px}.start-hint{font-size:7px}#joystick{left:14px;width:80px;height:80px}#stick{left:18px;top:18px}body.playing .ability-bar{right:13px;grid-template-columns:repeat(2,55px)}body.playing .hero-status{left:14px}.ability{width:55px}}
@media(pointer:coarse){.top-tools button{min-width:40px;height:40px}.ability b{font-size:7px;letter-spacing:0}.start-hint{font-size:0}.start-hint::after{content:'Tap to begin · Drag the thumbstick to move';font-size:9px}.start-hint>*{display:none}#hud{bottom:max(28px,env(safe-area-inset-bottom))}#joystick{bottom:max(42px,env(safe-area-inset-bottom))}}
@media(max-width:700px) and (min-height:620px){body.playing #mapPanel{display:block;right:16px;top:172px;width:83px;padding:6px;font-size:6px;letter-spacing:.5px;pointer-events:none}#mapPanel canvas{width:68px;height:54px;margin:4px auto}#mapPanel small{display:none}}
@media(max-height:450px){#intro{top:auto;bottom:24px;left:24px;right:20px}#intro h1{font-size:clamp(24px,5vw,34px);letter-spacing:-1px;margin:8px 0}#intro p{font-size:10px;margin:8px 0 12px}#intro .eyebrow,.start-hint{display:none}body:not(.playing) #quest{display:none}.gold-button{padding:12px;gap:12px}header{top:12px}.modal-card{padding:18px;max-height:95%;overflow:auto}.modal-card h2{font-size:24px;margin:10px 0}.modal-card .gold-button{margin:15px auto}.ability{height:58px}body.playing .hero-status{bottom:105px}#toast{top:43%;padding:9px 12px;font-size:10px}}
@media(max-width:300px){header{left:12px;right:12px}.brand{font-size:12px;letter-spacing:.5px}.brand small{font-size:5px;letter-spacing:1px}.top-tools{gap:4px}.top-tools button{min-width:34px;height:34px}.gold-button{font-size:8px;letter-spacing:.5px;gap:8px}#intro{left:16px;right:16px}#intro h1{font-size:29px}#quest,body.playing #quest{left:16px;right:12px;top:68px}#quest h2{font-size:12px}#quest p{font-size:9px}#quest .eyebrow{font-size:7px;letter-spacing:1px}.hero-status{gap:6px}.portrait{width:34px;height:34px;font-size:22px}.health-box{width:90px}.ability{width:48px;height:55px}.ability svg{width:22px;height:22px;margin:3px 0 1px}.ability b{font-size:6px}body.playing .ability-bar{right:9px;grid-template-columns:repeat(2,48px);gap:4px}#joystick{width:70px;height:70px;left:12px}#stick{left:13px;top:13px}.modal-card{padding:16px}#expeditionComplete{left:16px;right:12px;top:146px;font-size:7px}}

/* Pause keeps the world clear and leaves gameplay controls reachable. */
#modal{inset:auto 24px auto auto;top:80px;display:block;width:auto;max-width:calc(100% - 32px);background:none;backdrop-filter:none;pointer-events:none} .pause-controls{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px;background:#24382ef0;border:1px solid #d4c08b77;border-radius:5px;max-width:285px;pointer-events:auto}.pause-controls button{padding:10px 12px;border:1px solid #c5b18b66;border-radius:3px;background:#344c40;font-size:11px}.pause-controls #resume{background:#f4c76f;color:#352718;font-weight:700}.pause-controls small{width:100%;text-align:center;color:#e5dabd;font-size:9px;padding:2px}@media(max-width:600px){#modal{top:170px;right:16px}.pause-controls{max-width:245px}}@media(max-height:450px){#modal{top:64px;right:20px}.pause-controls small{display:none}}
