@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,700;0,800;0,900;1,900&family=Inter:wght@600;700;800&display=swap');
:root{--lime:#c7f24b;--pink:#f08ca7;--danger:#ff513b;--soil:#21150f;--ink:#f8f5eb}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow:hidden;background:#080b08;color:var(--ink);font-family:Inter,Arial,sans-serif}body{display:grid;place-items:center}
.game-shell{width:100vw;height:100vh;max-width:1500px;position:relative;overflow:hidden;background:#172a1c;box-shadow:0 0 90px #000}
header{height:72px;position:relative;z-index:20;display:grid;grid-template-columns:1fr repeat(3,135px) 50px;align-items:center;gap:8px;padding:0 24px;background:#10170f;border-bottom:1px solid #3d4a38}
.brand{display:flex;align-items:center;gap:10px;font:900 19px 'Barlow Condensed';letter-spacing:1px}.brand b{color:var(--lime)}.brand i{width:42px;height:42px;display:grid;place-items:center;background:var(--lime);border-radius:50% 45% 50% 40%;color:#1b2317;font:900 31px/1 serif;transform:rotate(-20deg)}
.stat{height:42px;padding-left:18px;border-left:1px solid #394239;display:grid;grid-template-columns:auto 1fr;align-items:end}.stat small{grid-column:1/-1;color:#8a9786;font-size:8px;letter-spacing:1.5px}.stat strong{font:800 24px/1 'Barlow Condensed'}.stat em{font:700 normal 8px Inter;color:#7e887b;margin:0 0 2px 3px}header button{width:42px;height:42px;border:1px solid #485347;background:#1a241a;color:white;font-weight:900;cursor:pointer}
.stage{height:calc(100% - 72px);position:relative;overflow:hidden}.stage>canvas{display:block;width:100%;height:100%;touch-action:none}
.heat-panel{position:absolute;top:20px;left:20px;width:265px;padding:13px 15px;background:#0d120ddd;border-left:4px solid var(--lime);box-shadow:0 8px 25px #0007;transition:border-color .2s}.heat-panel>div:first-child{display:flex;justify-content:space-between;align-items:center}.heat-panel span{font-size:9px;font-weight:800;letter-spacing:1px;color:var(--lime)}.heat-panel b{font:800 18px 'Barlow Condensed';color:var(--lime)}.heat-track{height:8px;margin:8px 0 5px;background:#384038}.heat-track i{display:block;width:0;height:100%;background:var(--lime);transition:width .12s,background .2s}.heat-panel small{color:#8f998d;font-size:8px}
.legend{position:absolute;right:20px;top:20px;display:flex;gap:15px;padding:11px 14px;background:#0d120ddd;font-size:8px;font-weight:800;letter-spacing:1px}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:10px;height:10px;border-radius:50%;display:block}.good{background:var(--lime)}.bad{background:var(--danger)}
.message{position:absolute;z-index:8;left:50%;top:110px;transform:translateX(-50%);padding:9px 17px;background:#10160fe8;border:1px solid var(--lime);color:var(--lime);font:800 11px Inter;letter-spacing:1px;white-space:nowrap}.hidden{display:none!important}
.overlay{position:absolute;z-index:15;inset:0;display:grid;place-items:center;padding:25px;background:linear-gradient(90deg,#10170fea,#10170fa8);backdrop-filter:blur(4px)}.card{width:min(480px,94%);padding:34px 38px;text-align:center;background:linear-gradient(145deg,#202b1cf5,#10160ef5);border:1px solid #4a5944;border-top:5px solid var(--lime);box-shadow:0 30px 70px #0009}.eyebrow{color:var(--lime)!important;font-size:9px!important;font-weight:800!important;letter-spacing:3px}.eyebrow.danger{color:var(--danger)!important}.card h1,.card h2{margin:7px 0 14px;font:900 italic clamp(62px,9vw,86px)/.7 'Barlow Condensed';letter-spacing:-2px}.card h1 em{font-style:inherit;color:var(--lime)}.card>p:not(.eyebrow){margin:13px auto;max-width:390px;color:#aab5a5;font-size:12px;line-height:1.55}.card button{width:100%;margin:14px 0;padding:15px 18px;border:0;display:flex;justify-content:space-between;background:var(--lime);color:#121910;font:900 16px 'Barlow Condensed';letter-spacing:1.5px;cursor:pointer;box-shadow:5px 5px 0 #617823}.card>small{display:block;color:#768071;font-size:8px}.hero-worm{height:46px;display:flex;justify-content:center;align-items:center;margin:10px}.hero-worm span{width:39px;height:39px;margin-left:-7px;border-radius:50%;background:var(--pink);border:3px solid #7a3c4e}.hero-worm span:nth-child(1){width:30px;height:30px}.hero-worm i{width:45px;height:45px;margin-left:-8px;display:grid;place-items:center;border-radius:50%;background:#f7a2b6;color:#2b1720;font-style:normal}
.result-card h2{font-size:70px}.results{display:grid;gap:2px;margin:18px 0}.results span{display:flex;justify-content:space-between;padding:11px 13px;background:#11180f;color:#929e8e;font-size:11px}.results b{color:white}
.paused{position:absolute;z-index:14;inset:0;display:grid;place-content:center;text-align:center;background:#0a0e08aa;backdrop-filter:blur(4px)}.paused b{font:900 italic 75px 'Barlow Condensed'}.paused small{color:#aeb6aa}
.mobile-controls{display:none;position:absolute;z-index:10;left:18px;bottom:18px;width:168px;height:126px;grid-template:repeat(2,63px)/repeat(3,56px)}.mobile-controls button{touch-action:none;border:1px solid #fff5;background:#10170fce;color:white;font-size:19px;font-weight:900}.mobile-controls .up{grid-area:1/2}.mobile-controls .left{grid-area:2/1}.mobile-controls .down{grid-area:2/2}.mobile-controls .right{grid-area:2/3}
@media(max-width:700px),(pointer:coarse){header{height:61px;padding:0 9px;grid-template-columns:1fr repeat(3,62px) 38px}.stage{height:calc(100% - 61px)}.brand span{display:none}.brand i{width:37px;height:37px}.stat{height:37px;padding-left:7px}.stat strong{font-size:18px}.stat small{font-size:7px}header button{width:35px;height:35px}.legend{display:none}.heat-panel{top:10px;left:10px;width:235px}.mobile-controls{display:grid}.card{padding:26px 23px}.card h1{font-size:62px}}
