:root{--bg: #000000;--topbar: #000000;--accent: #2ecc71;--card: #0b0b0b;--muted: #9ca3af}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial}html,body,#root{height:100%;width:100%;background:var(--bg)}.app-root{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden}.topbar{display:none}.viewport{flex:1;position:relative;width:100%;height:100vh;background:#000;overflow:hidden}.viewport canvas{width:100%!important;height:100%!important;display:block}.modal-overlay{position:fixed;left:0;top:0;right:0;bottom:0;display:none;align-items:center;justify-content:center;background:#00000073;z-index:50;padding:24px}.modal-overlay.visible{display:flex}.left-overlay{position:fixed;left:0;top:0;bottom:0;width:30%;max-width:420px;display:none;background:#000000d9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:24px;overflow:auto;z-index:60;color:#fff;box-shadow:8px 0 30px #00000059}.left-overlay.visible{display:block}.touch-joystick{position:fixed;left:18px;bottom:18px;width:140px;height:140px;border-radius:50%;background:#ffffff0f;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:70;box-shadow:inset 0 2px 8px #00000040,0 8px 24px #0000002e;touch-action:none;-webkit-user-select:none;user-select:none}.touch-joystick .joystick-knob{position:absolute;left:50%;top:50%;width:56px;height:56px;border-radius:50%;background:#ffffff29;box-shadow:0 6px 18px #00000059;transition:none;will-change:transform;transform:translate(-50%,-50%)}.touch-action-btn{position:fixed;right:18px;bottom:28px;width:76px;height:76px;border-radius:50%;background:var(--accent);color:#0f172a;font-weight:700;border:0;z-index:70;box-shadow:0 8px 30px #2ecc712e;display:flex;align-items:center;justify-content:center;font-size:14px;padding:0 6px;cursor:pointer;touch-action:manipulation}.rotate-hint{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:#000000b3;color:#fff;padding:18px 22px;border-radius:10px;z-index:80;font-size:16px;box-shadow:0 12px 36px #00000073;text-align:center;max-width:90%}@media (min-width:721px) and (max-width:1024px){.left-overlay{width:50%;left:0;right:0;max-width:480px;display:block;background:#000000e6}.left-overlay .left-overlay-card{padding:14px;max-height:calc(100vh - 48px)}}@media (max-width:720px){.left-overlay{width:100%;left:0;right:0;max-width:none}.touch-joystick{width:110px;height:110px;left:12px;bottom:12px}.touch-joystick .joystick-knob{width:48px;height:48px}.touch-action-btn{width:64px;height:64px;right:12px;bottom:14px;font-size:13px}}.left-overlay .left-overlay-card{width:100%;height:100%;max-height:calc(100vh - 96px);overflow:auto;padding:12px;box-shadow:none;background:transparent;border-radius:8px;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial}.left-overlay,.left-overlay *{color:#fff!important}.left-overlay a{color:#7ee7b0!important;text-decoration:underline}.modal-card{width:min(720px,96%);background:var(--card);border-radius:10px;padding:20px;box-shadow:0 12px 40px #02061740;position:relative;color:#0f172a}.modal-close{position:absolute;right:12px;top:10px;width:34px;height:34px;border-radius:6px;border:0;background:transparent;font-size:20px;cursor:pointer}.modal-title{font-size:20px;margin-bottom:8px}.modal-desc{color:var(--muted);margin-bottom:12px;line-height:1.4}.modal-link{display:inline-block;padding:8px 12px;background:var(--accent);color:#fff;border-radius:8px;text-decoration:none;font-weight:600}@media (max-width:520px){.topbar{font-size:13px;padding:0 10px}.modal-card{padding:14px;border-radius:8px}.modal-title{font-size:18px}}