*{box-sizing:border-box}
:root{--green:#21754f;--lime:#beff6f;--bg:#06110c;--glass:rgba(5,17,12,.78);--line:rgba(255,255,255,.13);--muted:#9eb1a6}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:#f6fff9;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#game{position:fixed;inset:0}canvas{display:block}
.hud{position:fixed;z-index:20;top:0;left:0;right:0;padding:16px 20px;display:flex;align-items:center;gap:18px;pointer-events:none;text-shadow:0 2px 10px #000}
.brand{display:flex;align-items:center;gap:10px;min-width:220px}.brand-mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;border:1px solid #79aa77;background:rgba(5,25,16,.8);color:var(--lime);font-weight:900}.brand b{display:block;font-size:12px;letter-spacing:2px}.brand small{font-size:9px;color:#b7c8bf;letter-spacing:1px}
.stats{display:flex;align-items:center;gap:18px;margin:auto}.stats div>span,.nitro span{font-size:8px;color:#a5b8ad;letter-spacing:1.5px;display:block}.stats b{font-size:11px}.progress{width:180px}.progress i,.nitro i{display:block;height:5px;border-radius:99px;background:#ffffff1c;overflow:hidden;margin-top:5px}.progress em,.nitro em{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--green),var(--lime));border-radius:99px}
.icon-btn{pointer-events:auto;border:1px solid var(--line);background:#071710c9;color:#fff;width:42px;height:42px;border-radius:12px;cursor:pointer}
.nitro{position:fixed;z-index:20;left:20px;bottom:24px;width:190px;padding:11px 13px;background:#06150ec7;border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(10px)}.nitro>div{display:flex;justify-content:space-between}.nitro b{font-size:10px;color:var(--lime)}.nitro em{background:linear-gradient(90deg,#6bd8ff,#beff6f)}
.overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at center,transparent 0,rgba(0,0,0,.72) 100%);transition:.4s}.overlay.hidden,.modal.hidden{display:none}
.intro-card,.pause-card{width:min(720px,94vw);padding:42px;border:1px solid var(--line);border-radius:30px;background:#06130dcc;backdrop-filter:blur(20px);box-shadow:0 30px 100px #0008;overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none;}.intro-card::-webkit-scrollbar,.pause-card::-webkit-scrollbar { display: none; }.eyebrow{font-size:10px;letter-spacing:3px;color:var(--lime);font-weight:900}.intro-card h1{font-size:clamp(45px,8vw,82px);line-height:.9;letter-spacing:-4px;margin:16px 0}.intro-card h1 span{color:var(--lime)}.intro-card p,.pause-card p,.help-card p{color:#b9c9c0;line-height:1.7;font-size:14px;max-width:620px}.actions{display:flex;gap:9px;margin-top:27px}.primary,.secondary{border-radius:13px;padding:13px 18px;font-weight:900;cursor:pointer}.primary{border:0;background:var(--lime);color:#07170e}.secondary{background:transparent;border:1px solid var(--line);color:#fff}.keys{display:flex;gap:6px;align-items:center;margin-top:24px;color:#82978c}.keys kbd{font-size:10px;border:1px solid #3b5046;background:#102019;padding:7px 8px;border-radius:7px}.keys small{font-size:10px;margin-left:5px}
.pause-card.pause-card-table{height: 100%;}
.info-panel{position:fixed;z-index:35;right:16px;top:78px;width:min(410px,calc(100vw - 32px));max-height:calc(100vh - 96px);overflow:auto;padding:28px;border-radius:25px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(20px);transform:translateX(120%);transition:.4s}.info-panel.open{transform:none}.close{position:absolute;right:14px;top:10px;border:0;background:transparent;color:#fff;font-size:28px;cursor:pointer}.info-panel h2,.project-detail h2,.help-card h2{font-size:30px;letter-spacing:-1.5px;margin:9px 0 3px}.year{font-size:10px;color:var(--lime)}.info-panel p{font-size:14px;color:#bfd0c7;line-height:1.7}.chips{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}.chip{padding:7px 9px;border-radius:99px;background:#beff6f0d;border:1px solid #beff6f35;font-size:10px;color:#e5f9db}.project-copy{padding:14px;border-radius:14px;background:#ffffff08;border:1px solid var(--line);font-size:12px;color:#d5e2dc;line-height:1.6}.project-btn{width:100%;margin-top:13px;border:1px solid #beff6f66;background:#beff6f12;color:var(--lime);padding:12px;border-radius:12px;font-weight:900;cursor:pointer}
.modal{position:fixed;z-index:60;inset:0;display:grid;place-items:center;padding:18px;background:#0009;backdrop-filter:blur(8px)}.project-modal{position:relative;width:min(950px,96vw);height:min(650px,90vh);display:grid;grid-template-columns:1.25fr .75fr;background:#07150e;border:1px solid var(--line);border-radius:25px;overflow:hidden}.project-view {min-height: auto;background: radial-gradient(circle, #173d2a, #06110c);display: flex;justify-content: center;align-items: center;overflow: hidden;}.project-view canvas {display: block;}.project-detail{padding:30px;overflow:auto}.help-card{position:relative;width:min(450px,94vw);padding:30px;border:1px solid var(--line);border-radius:24px;background:#07150e}
.toast{position:fixed;z-index:70;left:50%;bottom:35px;transform:translate(-50%,25px);opacity:0;pointer-events:none;padding:11px 17px;border-radius:99px;background:#0c2619;border:1px solid #beff6f55;color:#eaffdf;font-size:11px;font-weight:900;transition:.3s}.toast.show{opacity:1;transform:translate(-50%,0)}
.menu-setting-table table { width: 100%; max-width: 600px; margin: 0 auto; margin-bottom: 10px; border-collapse: collapse; } .menu-setting-table table th, .menu-setting-table table td { border: 1px solid #262f2c; padding: 8px 10px; text-align: center; } .menu-setting-table table th { background-color: #33413d; font-weight: 600; } .menu-setting-table kbd { display: inline-block; padding: 3px 8px; border: 1px solid #bbb; border-radius: 4px; background-color: #f7f7f7; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); font-family: monospace; font-size: 14px; } @media (max-width: 480px) { .menu-setting-table table { font-size: 14px; } .menu-setting-table table th, .menu-setting-table table td { padding: 5px 8px; } .menu-setting-table kbd { padding: 2px 6px; font-size: 13px; } }
.menu-setting-table .keys-tables {align-items: center;color: #82978c;}
.button-container{display: flex;justify-content: flex-end;width: 100%;}.button-container .button-settings-tools{margin-left: auto;}
#minimap{position:fixed;z-index:20;right:18px;bottom:18px;width:190px;height:190px;padding:7px;background:#06120dc9;border:1px solid var(--line);border-radius:17px;backdrop-filter:blur(10px)}#mapCanvas{width:100%;height:100%;border-radius:11px}.map-label{position:absolute;left:11px;top:10px;font-size:8px;letter-spacing:2px;color:#c9d9d1}
.mobile-controls{display:none;position:fixed;z-index:25;left:0;right:0;bottom:calc(13px + env(safe-area-inset-bottom));padding:0 14px;justify-content:space-between;align-items:end;pointer-events:none}.dpad{position:relative;width:140px;height:140px}.dpad button,.round{pointer-events:auto;touch-action:none;border:1px solid #ffffff25;background:#071710cc;color:#fff;backdrop-filter:blur(10px);box-shadow:0 7px 20px #0006}.dpad button{position:absolute;width:46px;height:46px;border-radius:13px;font-size:14px}.dpad button:nth-child(1){left:47px;top:0}.dpad button:nth-child(2){left:0;top:47px}.dpad button:nth-child(3){left:47px;top:47px}.dpad button:nth-child(4){right:0;top:47px}.round{width:66px;height:66px;border-radius:50%;font-size:9px;font-weight:900}.nitro-btn{color:#9feaff}
@media(max-width:720px){.hud{padding:10px}.brand{min-width:auto}.brand small{display:none}.brand-mark{width:35px;height:35px}.stats{gap:8px}.stats>div:not(.progress){display:none}.progress{width:110px}.icon-btn{width:36px;height:36px}.nitro{left:12px;bottom:178px;width:130px}.mobile-controls{display:flex}#minimap{width:125px;height:125px;right:10px;top:55px}.intro-card{padding:28px;border-radius:23px}.intro-card h1{letter-spacing:-2px}.keys{display:none}.project-modal{grid-template-columns:1fr;height:90vh}.project-detail{padding:22px}}