:root{--ink: #10251a;--panel: rgba(237, 245, 229, .9);--panel-strong: rgba(225, 238, 212, .97);--accent: #c35e16;--accent-soft: #e8b37c;--forest-dark: #11331f;--forest-mid: #2b5d34}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;font-family:Trebuchet MS,Segoe UI,sans-serif;color:var(--ink);background:radial-gradient(circle at 20% 10%,#597b4f,#26452f 45%,#102116)}body.touch-mode{touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}#game-root{width:100%;height:100%}canvas{display:block;touch-action:none}#hud{pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0}#top-bar{position:absolute;top:18px;left:50%;transform:translate(-50%);min-width:min(90vw,540px);padding:10px 14px;border:2px solid rgba(16,37,26,.18);border-radius:14px;background:var(--panel);display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:700}#crosshair{position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%)}#crosshair:before,#crosshair:after{content:"";position:absolute;background:#f7fbeff2;box-shadow:0 0 5px #00000061}#crosshair:before{width:2px;height:18px;left:8px}#crosshair:after{width:18px;height:2px;top:8px}#belt{pointer-events:auto;position:absolute;left:50%;top:78px;transform:translate(-50%);display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:min(96vw,780px)}.belt-item{border:2px solid rgba(17,51,31,.24);border-radius:12px;background:var(--panel);color:var(--ink);padding:10px 14px;font-size:14px;font-weight:700;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease}.belt-item.active{background:var(--panel-strong);border-color:var(--accent);box-shadow:0 5px 14px #10251a33;transform:translateY(-2px)}#controls-card{pointer-events:auto;position:absolute;left:14px;bottom:16px;max-width:min(94vw,390px);border-radius:12px;padding:12px 40px 10px 12px;border:2px solid rgba(17,51,31,.24);background:#e9f3ddcc;font-size:12px;line-height:1.35}#controls-card.hidden{display:none}#controls-close{position:absolute;top:8px;right:8px;width:24px;height:24px;border:0;border-radius:999px;background:#11331f1a;color:var(--ink);font-size:18px;line-height:1;cursor:pointer}#controls-close:active{transform:scale(.94)}#controls-card p{margin:0}#touch-controls{display:none;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}body.touch-mode #touch-controls{display:none}body.touch-mode.session-active #touch-controls{display:block}#touch-dpad,#fire-btn{display:none}body.touch-mode #touch-dpad,body.touch-mode #fire-btn{display:block}#touch-dpad{pointer-events:auto;position:absolute;left:16px;bottom:20px;width:142px;height:142px;border-radius:30px;border:2px solid rgba(17,51,31,.28);background:linear-gradient(145deg,#f4f9ecd1,#c7dab6b3),radial-gradient(circle at 40% 35%,rgba(255,255,255,.45),transparent 54%);box-shadow:0 14px 28px #050f0942;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#touch-dpad.active{border-color:var(--accent);box-shadow:0 16px 32px #050f0957}.dpad-arrow{position:absolute;width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:#fff3;color:#10251ab8;font-size:18px;font-weight:800}.dpad-arrow.up{left:53px;top:10px}.dpad-arrow.right{right:10px;top:53px}.dpad-arrow.down{left:53px;bottom:10px}.dpad-arrow.left{left:10px;top:53px}#dpad-thumb{position:absolute;left:50%;top:50%;width:42px;height:42px;border-radius:16px;border:2px solid rgba(17,51,31,.22);background:linear-gradient(145deg,#f5f9f0f2,#dfecd2e6);box-shadow:0 8px 20px #050f092e;transform:translate(-50%,-50%);transition:transform 80ms ease-out}#fire-btn{pointer-events:auto;position:absolute;right:18px;bottom:28px;width:94px;height:94px;border-radius:999px;border:2px solid rgba(255,249,243,.55);background:radial-gradient(circle at 35% 30%,#ffdec2eb,#c15e16f5);color:#fff9f3;font-size:14px;font-weight:800;box-shadow:0 16px 30px #050f0952}#fire-btn:active{transform:scale(.96)}#start-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:radial-gradient(circle at center,#0c1b1073,#050c08d9);text-align:center;color:#f0f8e8}#start-overlay.hidden{display:none}#start-overlay h1{margin:0 0 10px;font-size:clamp(34px,6vw,64px)}#start-overlay p{margin:0 0 20px;font-size:clamp(15px,2.5vw,20px)}#start-btn{pointer-events:auto;padding:12px 20px;border-radius:12px;border:2px solid rgba(255,255,255,.35);background:linear-gradient(135deg,#ce7b30,#b14f12);color:#fff9f3;font-size:16px;font-weight:800;cursor:pointer}@media (max-width: 780px){#top-bar{font-size:12px;padding:8px 10px}#belt{top:70px;width:min(94vw,560px);gap:8px}.belt-item{font-size:12px;padding:8px 10px}#controls-card{font-size:11px;left:10px;right:10px;max-width:none}body.touch-mode #belt{top:70px;width:min(94vw,420px);gap:8px}body.touch-mode .belt-item{padding:8px 9px;min-width:0}body.touch-mode #controls-card{bottom:176px;right:auto;max-width:min(52vw,220px);background:#e9f3ddb8}body.touch-mode #touch-dpad{width:128px;height:128px}body.touch-mode .dpad-arrow.up,body.touch-mode .dpad-arrow.down{left:46px}body.touch-mode .dpad-arrow.left,body.touch-mode .dpad-arrow.right{top:46px}body.touch-mode #fire-btn{width:86px;height:86px;bottom:32px;font-size:13px}}