:root{--black:#0E1314;--paper:#F2EBD9;--acid:#D7FF3E;--red:#FF654A;--muted:#BBBCA8;--line:#434943}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#0B1011;color:var(--paper);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:3px solid var(--acid);outline-offset:4px}
.shell{min-height:100vh;display:flex;flex-direction:column;overflow:hidden;background:#0B1011}
.topbar{height:70px;min-height:70px;display:flex;justify-content:space-between;align-items:center;padding:0 33px;border-bottom:1px solid #343D3B;background:#101616;z-index:10}
.brand{display:flex;align-items:center;gap:17px}.brand-mark{width:52px;height:45px;background:var(--acid);color:#101616;font:900 34px/45px Impact,'Arial Black',sans-serif;text-align:center;transform:rotate(-4deg);letter-spacing:-3px}.brand-mark span{font:900 15px Arial;vertical-align:super;letter-spacing:0}
.brand-text{font-weight:1000;font-size:15px;letter-spacing:-.7px}.brand-text span{font-family:monospace;color:var(--acid);font-size:10px;letter-spacing:1px;margin-left:8px}
.topbar-actions{display:flex;align-items:center;gap:7px}.topbar-sign{font:bold 10px monospace;letter-spacing:1.5px;color:#D2D3BD;margin-right:15px}.tool-btn{border:1px solid #444D4A;background:#0E1414;color:#F4EEDF;padding:10px 13px;font-size:18px;display:flex;gap:10px;align-items:center}.tool-btn span{font:bold 10px monospace;letter-spacing:1px}.tool-btn:hover{background:#273030}
.play-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;background:#080D0D}
.stage{width:min(100%,calc((100vh - 110px)*1.77778));max-width:1600px;aspect-ratio:16/9;position:relative;overflow:hidden;isolation:isolate;border-right:1px solid #353F3D;border-left:1px solid #353F3D;background:#1A2222;touch-action:none}
#gameCanvas{display:block;width:100%;height:100%;position:absolute;inset:0;z-index:0}
.scene{position:absolute;inset:0;z-index:2}.hidden{display:none!important}
.menu-scene{display:flex;align-items:stretch;background:linear-gradient(90deg,#0B1010F5 0%,#0D1212DE 36%,#0D121200 72%);pointer-events:none}
.menu-content{pointer-events:auto;width:60%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:3.5% 0 3.5% 5.0%;gap:0}
.eyebrow{font:bold clamp(8px,1vw,12px) monospace;letter-spacing:2.4px;display:flex;gap:10px;align-items:center;color:#EAEAD8}.yellow-line{width:28px;height:5px;background:var(--acid)}
h1{font:900 clamp(50px,7.7vw,130px)/.84 Impact,'Arial Black',sans-serif;letter-spacing:-.06em;margin:20px 0 13px;white-space:nowrap;text-shadow:3px 4px 0 #070B0B}
h1 em{font-style:normal;color:var(--acid)}.eyebrow .edition{color:var(--acid);letter-spacing:1.2px}.red-dot{color:var(--red)}
.menu-tagline{font:bold clamp(9px,.9vw,13px) monospace;letter-spacing:1.2px;color:#F1E7D1;margin:2px 0 24px}
.pick-label{display:flex;align-items:center;gap:15px;font:900 10px monospace;letter-spacing:1.8px;color:var(--paper);width:min(465px,95%);margin-bottom:10px}.pick-label:after{content:'';height:1px;background:#818573;flex:1}.pick-label span{color:var(--acid)}
.character-choices{display:flex;width:min(465px,95%);gap:8px}.char-card{flex:1;min-width:0;border:1px solid #58635C;background:#111817C9;color:var(--paper);display:flex;align-items:center;gap:9px;padding:9px;position:relative;text-align:left;transition:background .14s,border-color .14s}
.char-card:hover{background:#242E2A}.char-card[aria-pressed=true]{border-color:var(--acid);background:#233025;box-shadow:inset 0 -3px var(--acid)}
.char-face{width:35px;height:43px;flex:0 0 35px;border:3px solid #101414;background:var(--body);border-radius:45% 45% 40% 40%;position:relative;transform:rotate(-6deg)}
.char-face:before{content:'';position:absolute;width:6px;height:10px;background:#101414;left:8px;top:11px;border-radius:50%;box-shadow:11px 0 #101414}.char-face:after{content:'';position:absolute;left:10px;top:25px;width:11px;height:5px;border:2px solid #101414;border-radius:50%}
.char-card[data-char=prego] .char-face{border-radius:3px;transform:rotate(4deg)}.char-card[data-char=prego] .char-face:before{width:13px;height:8px;box-shadow:none;left:8px}
.char-card[data-char=zica] .char-face{border-radius:50% 50% 35% 35%;transform:rotate(9deg)}.char-card[data-char=zica] .char-face:before{box-shadow:9px 0 #101414,18px 0 #101414;left:1px}
.char-text b{display:block;font:900 14px Impact,'Arial Black';letter-spacing:1px}.char-text small{display:block;font:9px/1.1 monospace;color:#B4BBAF;margin-top:4px}.char-selected{position:absolute;right:6px;top:4px;color:var(--acid);font-size:11px}
.primary-btn{border:0;background:var(--red);color:#101413;box-shadow:5px 5px 0 var(--acid);font-weight:1000;font-size:clamp(13px,1.25vw,18px);letter-spacing:-.3px;padding:16px 23px;min-height:54px;display:flex;align-items:center;gap:38px;justify-content:space-between;transition:transform .14s,box-shadow .14s}
.primary-btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--acid)}.primary-btn span{font-weight:900;font-size:21px}.menu-content>.primary-btn{margin-top:21px;min-width:min(370px,90%)}
.menu-hint{font:900 9px/1.8 monospace;letter-spacing:.75px;color:#ACB4AA;margin-top:20px}.menu-hint b{color:var(--acid)}
.menu-panel{pointer-events:none;position:absolute;right:3.8%;top:3.6%;width:19%;display:flex;flex-direction:column;align-items:stretch;gap:10px}
.side-index{font:bold 10px monospace;letter-spacing:.4px;color:var(--paper);padding-bottom:11px;border-bottom:1px solid #8A8E79}.side-index span{color:var(--acid);float:right}
.level-preview{display:flex;flex-direction:column;gap:7px}.level-row{display:flex;gap:8px;align-items:center;padding:9px;border:1px solid #81908366;background:#101A1ACA}.level-no{font:900 24px Impact;color:var(--acid)}.level-details b{display:block;font:900 10px/1.1 monospace;color:var(--paper)}.level-details small{display:block;font:9px monospace;color:#B0BEB3;margin-top:5px}.level-row.locked{opacity:.45}.side-foot{font:bold 9px/1.45 monospace;color:#C3C5B1}.side-foot b{color:var(--red)}
.hud{pointer-events:none}.hud-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 31px}.hud-level{font:900 18px Impact,'Arial Black',sans-serif;letter-spacing:.7px;text-shadow:0 2px 2px #111}.hud-index{display:inline-block;font:900 11px monospace;color:#080C0D;background:var(--acid);padding:6px 8px;margin-bottom:5px;letter-spacing:1.6px}.hud-score{text-align:center;display:flex;flex-direction:column;gap:5px}.hud-score span,.hud-lives>span{font:900 10px monospace;letter-spacing:1.8px}.hud-score b{font:900 27px Impact,Arial Black;color:var(--acid);letter-spacing:2px}.hud-lives{text-align:right;display:flex;flex-direction:column;gap:5px}.hud-lives #hudHearts{display:flex;gap:5px;justify-content:flex-end}.heart{color:var(--red);font-size:30px;filter:drop-shadow(2px 2px #111)}.heart.lost{color:#666D65;opacity:.48}
.hud-progress{position:absolute;left:30px;right:30px;top:105px}.progress-track{height:5px;background:#B5BCAD55;position:relative}.progress-track>div{height:5px;width:0;background:var(--acid);transition:width .07s linear}.progress-meta{display:flex;justify-content:space-between;font:bold 10px monospace;letter-spacing:1.2px;color:#DDDCCB;margin-top:6px}.progress-meta b{color:var(--acid)}
.hazard-warning{position:absolute;top:28%;left:50%;transform:translateX(-50%);min-width:280px;text-align:center;border:2px solid var(--red);background:#101616E8;color:#F7ECD5;padding:13px 17px;font:900 16px Impact,'Arial Black';letter-spacing:1.2px;box-shadow:8px 8px 0 #FF684A44;display:flex;gap:15px;justify-content:center;align-items:center;animation:warn-flash .35s alternate infinite}
.warn-symbol{display:grid;place-items:center;border-radius:100%;width:25px;height:25px;background:var(--red);color:#111;font:900 18px Arial}
@keyframes warn-flash{to{box-shadow:2px 2px 0 #FF684A22}}
.balance-box{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);width:380px;text-align:center;padding:14px 14px 12px;border:1px solid #B5BCA458;background:#0B1010DD;backdrop-filter:blur(4px)}
.balance-label{display:flex;justify-content:space-between;align-items:center;gap:9px;font:900 9px monospace;letter-spacing:1px;color:#E5EBD9}.balance-label span{color:#FF917D}.balance-label b{font-size:12px}
.balance-rail{position:relative;margin-top:15px;height:14px;background:linear-gradient(90deg,#FF6F52 0%,#F5CB83 28%,#B8E26C 40%,#B8E26C 60%,#F5CB83 72%,#FF6F52 100%);border:2px solid #0A1010;outline:1px solid #717E71}
.balance-safe{position:absolute;left:34%;right:34%;top:0;bottom:0;border-left:2px solid #101; border-right:2px solid #101;opacity:.55}
.balance-center{position:absolute;left:50%;height:23px;top:-5px;border-left:2px dashed #F6F1E0}.balance-needle{position:absolute;top:-9px;left:50%;width:8px;height:31px;background:#F0EFE6;border:2px solid #131616;transform:translateX(-50%);box-shadow:2px 2px 0 #0A0E0E}
.balance-feedback{font:900 10px monospace;color:var(--acid);letter-spacing:1px;margin-top:9px;min-height:13px}
.pause-btn{position:absolute;right:30px;bottom:27px;pointer-events:auto;background:#0E1515C9;color:#F3ECD8;border:1px solid #C1CCB3;padding:8px 13px;font-size:20px}
.touch-controls{pointer-events:none;position:absolute;inset:0;z-index:4}.touch-btn{pointer-events:auto;position:absolute;bottom:13px;left:18px;width:120px;height:75px;border:2px solid #F7EED7;background:#0B1414D9;color:var(--acid);font:900 33px Arial;display:flex;align-items:center;justify-content:center;gap:10px;flex-direction:column;touch-action:none;user-select:none;-webkit-user-select:none}.touch-btn small{font:900 9px monospace;color:#F7EED7;letter-spacing:1px}.touch-btn:nth-child(2){left:auto;right:18px}.touch-btn.pressed{background:var(--acid);color:#111}.touch-btn.pressed small{color:#111}
.result-scene,.pause-scene{display:flex;align-items:center;justify-content:center}.result-scrim{position:absolute;inset:0;background:#080D0DE6;backdrop-filter:blur(3px)}.result-card,.pause-card{position:relative;width:min(500px,90%);border-top:7px solid var(--acid);padding:34px;background:#121A19;box-shadow:13px 13px 0 #050909B5;border-left:1px solid #7B8E7F;border-right:1px solid #7B8E7F;border-bottom:1px solid #7B8E7F}
.result-overline{font:900 12px monospace;letter-spacing:2px;color:var(--acid)}.result-card h2,.pause-card h2{font:900 clamp(47px,6vw,82px)/.85 Impact,'Arial Black';letter-spacing:-.035em;margin:12px 0 14px}.result-card p,.pause-card p{font:14px/1.45 monospace;color:#D3D6C4;margin-bottom:17px}.result-stat{display:flex;gap:14px;font:900 11px monospace;color:var(--acid);margin-bottom:16px}.result-card .primary-btn,.pause-card .primary-btn{width:100%;margin-top:12px}.text-btn{background:none;border:0;color:#BFCAB9;font:900 11px monospace;text-decoration:underline;text-underline-offset:4px;margin-top:22px;padding:4px}
.pause-scene{background:#070D0DEB;pointer-events:auto}.pause-card{border-top-color:var(--red)}.pause-card h2{color:var(--paper)}
.bottom-strip{height:40px;min-height:40px;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 30px;gap:20px;border-top:1px solid #39433E;background:#0B1011;color:#B1B9AD;font:900 9px monospace;letter-spacing:.5px}.strip-left{display:flex;gap:15px}.strip-left b{color:#F0E6D1}.strip-keys{display:flex;gap:20px}.strip-keys span{white-space:nowrap}.strip-keys kbd{background:#252F2C;color:var(--acid);padding:3px 6px;border:1px solid #566357;margin-right:3px}.strip-best{color:var(--acid);white-space:nowrap}
.portrait-notice{display:none}.sr-only{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (min-width:1650px){h1{font-size:130px}}
@media(max-width:950px){.topbar{height:50px;min-height:50px;padding:0 14px}.brand-mark{width:40px;height:36px;line-height:36px;font-size:27px}.brand{gap:10px}.brand-text{font-size:12px}.brand-text span,.topbar-sign{display:none}.tool-btn{padding:8px 10px}.tool-btn span{display:none}.stage{width:min(100%,calc((100vh - 81px)*1.77778))}.menu-content{padding-left:4%;width:62%}h1{font-size:clamp(43px,7.7vw,90px)}.menu-tagline{margin-bottom:12px}.character-choices{gap:5px}.char-card{padding:5px;gap:4px}.char-face{width:28px;height:34px;flex-basis:28px}.char-text b{font-size:12px}.char-text small{font-size:8px}.menu-content>.primary-btn{margin-top:11px;padding:11px 15px;min-height:40px}.menu-hint{margin-top:10px;font-size:8px}.menu-panel{right:2%;top:3.8%;width:25%}.level-details b{font-size:9px}.level-row{padding:6px}.bottom-strip{height:31px;min-height:31px;padding:0 12px}.strip-left span,.strip-best{display:none}.hud-top{padding:12px 17px}.hud-level{font-size:15px}.hud-index{font-size:9px}.hud-score b{font-size:21px}.hud-score span,.hud-lives>span{font-size:8px}.heart{font-size:22px}.hud-progress{top:74px;left:17px;right:17px}.balance-box{bottom:15px;width:245px;padding:8px 10px}.balance-label span{font-size:8px}.balance-label b{font-size:10px}.balance-rail{margin-top:10px;height:11px}.balance-feedback{font-size:9px}.pause-btn{right:13px;bottom:13px}.touch-btn{bottom:12px;width:86px;height:66px;font-size:29px}.touch-btn small{font-size:7px}.result-card,.pause-card{width:390px;padding:20px}.result-card h2,.pause-card h2{font-size:55px}.result-card p,.pause-card p{font-size:11px;margin-bottom:8px}.result-card .primary-btn,.pause-card .primary-btn{min-height:38px;padding:9px 14px}}
@media(max-width:650px){.menu-panel,.strip-keys,.strip-left span{display:none}.menu-content{width:95%;padding-left:6%}.menu-content h1{font-size:clamp(46px,12vw,76px)}.character-choices{max-width:430px}.menu-tagline{font-size:9px}.menu-hint{max-width:380px}.bottom-strip{justify-content:center}.topbar-actions{gap:3px}}
@media(orientation:portrait) and (max-width:850px){.portrait-notice{display:flex;position:fixed;inset:0;z-index:50;background:#101716;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:40px}.turn-icon{font:900 90px Arial;color:var(--acid)}.portrait-notice h2{font:900 43px Impact,Arial Black;margin:10px}.portrait-notice p{font:13px monospace;max-width:260px;color:#BBC5B6}.play-wrap{display:none}}
@media(max-height:460px) and (orientation:landscape){.topbar{height:40px;min-height:40px}.brand-mark{width:32px;height:30px;font-size:22px;line-height:30px}.stage{width:min(100%,calc((100vh - 65px)*1.77778))}.bottom-strip{height:25px;min-height:25px;font-size:8px}.menu-content h1{font-size:clamp(39px,6vw,75px);margin:6px 0}.menu-tagline{margin:1px 0 8px}.menu-hint{display:none}.character-choices{max-width:420px}.menu-content>.primary-btn{margin-top:8px}.menu-panel{display:none}.level-row{padding:3px}.level-no{font-size:18px}.level-details small{display:none}}
@media(prefers-reduced-motion:reduce){.primary-btn,.char-card{transition:none}.hazard-warning{animation:none}}

/* V2 — survival HUD, hands-on controls and predator pressure */
.hunt-box{position:absolute;left:30px;bottom:29px;width:235px;background:#0B1011E6;border:1px solid #FE735477;padding:12px 14px;color:#F5EADB}
.hunt-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font:900 10px monospace;letter-spacing:.2px}.hunt-head b{color:#FF795E}.hunt-head span{font:900 9px monospace;color:#FFF1DB}
.hunt-track{height:11px;background:#22252A;margin:10px 0 7px;border:1px solid #7C524C;overflow:hidden}
.hunt-track div{width:10%;height:100%;background:linear-gradient(90deg,#C6FF4D,#FFB25C 52%,#FF5248);transition:width .07s linear}
.hunt-box small{font:900 9px monospace;color:#D4FF54;letter-spacing:.35px}
.sprint-btn{pointer-events:auto;position:absolute;right:155px;bottom:13px;width:104px;height:75px;border:2px solid #FF7561;background:#2B1219E8;color:#FFD7B9;font:900 32px Arial;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;touch-action:none;user-select:none}
.sprint-btn small{font:900 10px monospace;letter-spacing:1px}
.sprint-btn.pressed{background:#FF765B;color:#0D1115;box-shadow:0 0 28px #F35C4C66}
.menu-panel{background:#070D13AD;padding:15px;border-left:1px solid #4D5A62;top:5.5%;right:2.3%;width:22%}
.menu-scene{background:linear-gradient(90deg,#080D13F5 0%,#0A1014F3 39%,#0D1318AF 69%,#0D121200 100%)}
.menu-content{width:64%;justify-content:flex-start;padding-top:7%}
.menu-content h1{font-size:clamp(58px,7.0vw,112px);margin-top:10px}
.menu-tagline{margin-bottom:13px}
.menu-hint{margin-top:15px;max-width:390px;font-size:10px;color:#E4E7D4}
@media(max-width:950px){.hunt-box{left:12px;bottom:12px;width:180px;padding:7px 9px}.hunt-head{font-size:8px}.hunt-head span,.hunt-box small{font-size:7px}.hunt-track{margin:5px 0;height:8px}.sprint-btn{right:110px;bottom:11px;width:80px;height:66px;font-size:24px}.sprint-btn small{font-size:8px}.menu-content{padding-top:5%}.menu-content h1{font-size:clamp(44px,7.2vw,88px)}}
@media(max-width:650px){.hunt-box{left:7px;top:119px;bottom:auto;width:154px}.hunt-head{font-size:7px}.hunt-head span{display:none}.sprint-btn{right:104px;width:70px}.menu-content{width:93%;padding-top:7%;padding-left:6%}.menu-content h1{font-size:clamp(43px,10vw,70px)}}
@media(max-height:460px) and (orientation:landscape){.hunt-box{top:77px;bottom:auto;left:8px;width:154px;padding:5px 8px}.hunt-track{height:7px;margin:4px 0}.hunt-box small{display:none}.sprint-btn{bottom:8px;height:60px}.menu-content{padding-top:3%}.menu-content h1{font-size:clamp(38px,6.8vw,79px)}}

/* V3 campaign and power UI. Chapter selection stays accessible on small screens. */
.menu-panel{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#A0AD7C #111C1E;max-height:90%;pointer-events:auto}
.level-preview{gap:5px}.level-row{width:100%;text-align:left;cursor:pointer;color:inherit;border:1px solid #66736966;background:#0E171C;padding:7px 8px}
.level-row:disabled{cursor:not-allowed}.level-row.current{border-color:#D9FF37;box-shadow:inset 4px 0 #D9FF37;background:#222E25}
.level-row:hover:not(:disabled){background:#30413A}
.level-details small{font-size:8px}
.chapter-select-label{display:block;margin-top:12px;margin-bottom:5px;font:900 9px monospace;letter-spacing:1.4px;color:#B5C4AC}
.chapter-select{max-width:min(430px,94%);width:100%;background:#0B171D;color:#E8F2DA;border:1px solid #A2B5A2;padding:8px 10px;font:900 12px monospace;outline-offset:3px}
.chapter-select:focus-visible{outline:2px solid #D9FF37}
.menu-content>.primary-btn{margin-top:12px}
.power-box{pointer-events:auto;position:absolute;bottom:27px;right:29px;min-width:205px;text-align:right}
.power-box button{border:2px solid #899188;padding:11px 14px;background:#12171C;color:#B1B8AE;font:900 12px monospace;white-space:nowrap}
.power-box.ready button{background:#E0FF5A;color:#0A1414;border-color:#F1F1CD;box-shadow:0 0 20px #D9FF3750}
.power-box.active button{background:#B0FAE1;color:#10171B;border-color:#A2FFF6}
.power-box button:disabled{cursor:default;opacity:.70}
.power-notice{position:absolute;right:0;bottom:49px;white-space:nowrap;color:#DFFF71;text-shadow:0 2px #070E10;font:900 12px monospace;letter-spacing:.2px}
.power-mobile-btn{pointer-events:auto;position:absolute;bottom:13px;right:275px;width:78px;height:75px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid #D9FF37;background:#1D3028D9;color:#DAFF37;font:900 30px Arial;touch-action:none}
.power-mobile-btn small{font:900 9px monospace;color:#E6F1D1}.power-mobile-btn:disabled{opacity:.42;border-color:#56645C}
@media(max-width:950px){
 .power-box{right:12px;bottom:91px;min-width:135px}.power-box button{padding:5px 8px;font-size:9px}.power-notice{bottom:33px;font-size:9px;max-width:170px;white-space:normal}
 .power-mobile-btn{right:200px;bottom:11px;width:67px;height:66px;font-size:26px}.power-mobile-btn small{font-size:7px}
 .menu-panel{max-height:94%;padding:10px}.menu-content{padding-top:3%}.chapter-select{padding:5px 7px;font-size:10px}.chapter-select-label{margin-top:7px}
}
@media(max-width:650px){.menu-panel{display:none}.chapter-select-label{font-size:8px}.chapter-select{max-width:360px}}
@media(max-height:460px) and (orientation:landscape){
 .menu-content h1{margin:3px 0}.menu-tagline{margin-bottom:6px}.pick-label{margin-bottom:6px}.menu-content>.primary-btn{margin-top:7px;min-height:34px;padding:8px 13px}
 .power-box{bottom:75px;right:10px}.power-box button{font-size:8px;padding:4px 5px}.power-mobile-btn{right:186px;bottom:8px;height:60px;width:60px}
 .chapter-select-label{margin-top:4px;margin-bottom:3px}.chapter-select{padding:4px 6px}
}

/* Keep all four touch controls separate from the balance gauge. */
@media (pointer:coarse) { .power-box{display:none} }
@media(max-height:460px) and (orientation:landscape) { .balance-box{bottom:90px}.touch-controls{z-index:5} }