:root{--bg: #7ec3e8;--panel: rgba(12, 42, 64, .72);--line: rgba(255, 255, 255, .38);--text: #f4fbff;--accent: #ffd97a;font-family:Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 20%,#a8dcf5,var(--bg) 70%);color:var(--text)}canvas#game{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}#hud{position:fixed;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:20;text-shadow:0 1px 3px rgba(0,20,40,.55)}.hud-left,.hud-right{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);min-width:168px}.hud-right{text-align:right}.kicker{font-size:10px;letter-spacing:3px;color:var(--accent);margin-bottom:5px}.stat{font-size:12px;letter-spacing:1.4px;margin-top:2px}.stat b{font-size:17px}.stat.muted{opacity:.75}.tag{font-size:10px;color:var(--accent);letter-spacing:1px}#compass-key{position:fixed;left:18px;bottom:168px;z-index:20;pointer-events:none;display:flex;gap:10px;font-size:10px;letter-spacing:1.4px;text-shadow:0 1px 3px rgba(0,20,40,.7)}#compass-key[hidden]{display:none}#compass-key .awa{color:#ff6a5a}#compass-key .twd{color:#3dcc6a}#help{position:fixed;bottom:10px;left:50%;transform:translate(-50%);font-size:11px;letter-spacing:1px;background:#0a22348c;border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:5px 14px;z-index:20;pointer-events:none;white-space:nowrap}#overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 38%,rgba(255,250,220,.3),transparent 46%),linear-gradient(180deg,#7ec3e8eb,#1f547af0);transition:opacity .35s ease}#overlay.hidden{opacity:0;pointer-events:none}#overlay-box{max-width:470px;margin:16px;text-align:center;background:#0a263ad9;border:1px solid var(--line);border-radius:14px;padding:30px 34px 26px;box-shadow:0 22px 60px #04162680}#overlay-title{margin:0;font-size:40px;letter-spacing:9px;color:#fff}#overlay-sub{margin:6px 0 14px;color:var(--accent);letter-spacing:3px;font-size:12px;text-transform:uppercase}#overlay-body{font-size:14px;line-height:1.55;opacity:.92}.help-lines{display:flex;flex-direction:column;gap:3px;margin:16px 0 20px;font-size:11.5px;letter-spacing:1px;opacity:.8}#btn-start{font:inherit;font-size:15px;letter-spacing:3px;color:#0b2740;background:linear-gradient(180deg,#ffe9a8,#ffc85c);border:none;border-radius:8px;padding:12px 34px;cursor:pointer;font-weight:700;box-shadow:0 6px 20px #ffc85a59}#btn-start:hover{filter:brightness(1.06)}#touch-pad{position:fixed;bottom:12px;left:12px;right:12px;display:none;justify-content:space-between;align-items:flex-end;z-index:30}#touch-pad.active{display:flex}.touch-actions{display:grid;grid-template-columns:repeat(4,auto);gap:8px}.touch-btn{font:inherit;font-size:11px;letter-spacing:1px;color:var(--text);background:#0c2a40a8;border:1px solid var(--line);border-radius:10px;padding:12px;min-width:64px;touch-action:none;user-select:none;-webkit-user-select:none}.touch-btn:active{background:#4082b0bf}#version{position:fixed;bottom:6px;right:10px;font-size:10px;opacity:.55;z-index:20;pointer-events:none}#rotate-hint{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;background:#081a28f0;align-items:center;justify-content:center;flex-direction:column;gap:18px}#rotate-hint.show{display:flex}#rotate-hint .phone{width:46px;height:78px;border:3px solid #fff;border-radius:8px;animation:rotate-phone 1.6s ease-in-out infinite}@keyframes rotate-phone{0%,20%{transform:rotate(0)}60%,to{transform:rotate(90deg)}}@media(max-width:900px){#help{display:none}.hud-left,.hud-right{min-width:128px;padding:7px 10px}.stat{font-size:10px}.stat b{font-size:13px}.touch-btn{min-width:52px;padding:10px 8px;font-size:10px}}