:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#eef2f3;background:#10161b;font-synthesis:none}*{box-sizing:border-box}html,body,#app,#viewport{width:100%;height:100%;margin:0;overflow:hidden}#viewport{background:#dbe1e0}canvas{display:block;touch-action:none}.topbar{position:fixed;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:20px 24px;pointer-events:none;background:linear-gradient(180deg,rgba(11,17,21,.72),transparent)}.brand{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.12em}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border:1px solid #d4b47b;color:#d4b47b;border-radius:6px;font-size:15px;letter-spacing:0}.stats{font-size:12px;color:#d6dddd;background:rgba(13,20,24,.56);padding:8px 11px;border-radius:5px}.loading,.welcome{position:fixed;left:50%;top:50%;width:min(360px,calc(100vw - 48px));transform:translate(-50%,-50%);padding:26px;background:rgba(14,21,25,.93);border:1px solid rgba(212,180,123,.28);border-radius:8px;text-align:center;box-shadow:0 18px 60px #07101480}.loading p{margin:12px 0 14px;font-size:17px}.loading small{display:block;margin-top:9px;color:#aebbbb;font-size:12px}.loader-ring{width:32px;height:32px;margin:auto;border:2px solid #ffffff2b;border-top-color:#d4b47b;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.progress-track{height:4px;background:#ffffff18;border-radius:4px;overflow:hidden}.progress{height:100%;width:0;background:#d4b47b;transition:width .2s}.welcome{padding:38px 32px 34px;text-align:left}.welcome-rule{width:46px;height:2px;background:#d4b47b;margin-bottom:22px}.welcome-kicker{margin:0 0 12px;color:#d4b47b;font-size:12px;letter-spacing:.16em}.welcome h1{margin:0;color:#f5f7f5;font-size:clamp(28px,5vw,42px);line-height:1.05;font-weight:600}.welcome-copy{margin:13px 0 28px;color:#bdc7c5;font-size:16px}.primary-button{min-height:46px;padding:0 20px;border:1px solid #d4b47b;border-radius:5px;background:#d4b47b;color:#10161b;font-weight:700;font-size:14px;cursor:pointer}.primary-button:disabled{opacity:.45;cursor:wait}.controls{position:fixed;right:22px;bottom:22px;display:flex;gap:8px}.icon-button{width:44px;height:44px;border:1px solid #ffffff45;border-radius:6px;background:#10161bd9;color:#f2f5f5;font-size:25px;cursor:pointer}.icon-button:hover{border-color:#d4b47b;color:#d4b47b}.hint{position:fixed;bottom:27px;left:50%;transform:translateX(-50%);padding:9px 12px;background:#10161bd9;color:#d2dada;font-size:12px;border-radius:5px;pointer-events:none}.error-panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(360px,calc(100vw - 48px));padding:24px;background:#21191a;border:1px solid #d8786e;border-radius:8px;text-align:center}.error-panel p{color:#e2c8c6;font-size:14px;line-height:1.5}.error-panel button{padding:10px 16px;border:0;border-radius:5px;background:#d4b47b;color:#10161b;font-weight:700;cursor:pointer}.touch-pad{display:none}.touch-pad button{width:40px;height:36px;margin:2px;border:1px solid #ffffff42;border-radius:5px;background:#10161bd9;color:#f0f3f1;font-size:16px;touch-action:none}.touch-pad button:active{border-color:#d4b47b;color:#d4b47b}.touch-pad>button{display:block;margin:0 auto 2px}.touch-pad>div{display:flex}.touch-pad{pointer-events:auto}@media(max-width:600px){.topbar{padding:14px 16px}.stats{font-size:11px}.hint{bottom:126px;font-size:11px}.controls{right:16px;bottom:16px}.touch-pad{position:fixed;left:14px;bottom:14px;display:block}.welcome{padding:32px 24px}.welcome h1{font-size:30px}}