:root{--purple: #8e3aa3;--purple-deep: #5c2066;--green: #2fae5d;--panel: rgba(12, 14, 22, .72);--text: #f0ecf4;--muted: #a99fb3}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#0b0e14;font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Noto Sans,Noto Sans Kannada,sans-serif}.app{position:relative;width:100%;height:100%}.app canvas{display:block}.hud{position:fixed;top:58px;left:12px;width:252px;padding:14px 16px;border-radius:14px;background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(142,58,163,.35);color:var(--text);-webkit-user-select:none;user-select:none;z-index:10}.hud .brand{display:flex;align-items:center;gap:9px;margin-bottom:2px}.hud .brand .logo{width:34px;height:34px;flex:none;filter:drop-shadow(0 0 6px rgba(255,255,255,.18))}.hud .brand .title{font-weight:700;font-size:15px;letter-spacing:.02em}.hud .sub{color:var(--muted);font-size:11px;margin-bottom:10px}.hud .clockrow{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}.hud .clock{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.03em}.hud .fps{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.hud .fps b{color:var(--green);font-size:14px}.hud label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:10px 0 4px}.hud input[type=range]{width:100%;accent-color:var(--purple)}.hud .row{display:flex;gap:5px;flex-wrap:wrap}.hud button{flex:1;padding:5px 7px;font-size:11px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:#ffffff0f;color:var(--text);cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap}.hud button:hover{background:#8e3aa34d}.hud button.on{background:var(--purple);border-color:var(--purple);font-weight:600}.hud button.greenline:hover{background:#2fae5d4d}.hud button.on.greenline{background:var(--green);border-color:var(--green)}.hud button.yellowline:hover{background:#f2c01e4d}.hud button.on.yellowline{background:#f2c01e;border-color:#f2c01e;color:#1c1a22}.hud .train{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;padding:6px 9px;margin-top:5px;border-radius:8px;background:#ffffff0d;border-left:3px solid var(--purple)}.hud .train.green{border-left-color:var(--green)}.hud .train.yellow{border-left-color:#f2c01e}.hud .train .info{display:flex;flex-direction:column;gap:2px;min-width:0}.hud .train .info .stat{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud .train .cams{display:flex;gap:4px;flex:none}.hud .train .cams button{flex:none;padding:4px 8px;font-size:10px;border-radius:6px}.hud .freecam{width:100%;margin-top:7px;padding:7px;font-size:11.5px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:#ffffff0f;color:var(--text);cursor:pointer;transition:background .15s,border-color .15s}.hud .freecam:hover{background:#ffffff24}.hud .freecam.on{background:#ffffff2e;border-color:#ffffff80;font-weight:600}.hud .train .name{font-weight:600}.hud .train .stat{color:var(--muted);font-variant-numeric:tabular-nums}.hud .train .stat.doors{color:#ffc04d}.hint{position:fixed;right:14px;bottom:12px;font-size:11px;color:#f0ecf48c;background:#0c0e1680;padding:6px 11px;border-radius:9px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:10}@media (max-width: 640px){.hud{width:210px;top:52px}}.walkkeys{position:fixed;right:14px;bottom:46px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 18px 9px;border-radius:14px;background:#0c0e169e;border:1px solid rgba(142,58,163,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;pointer-events:none}.walkkeys .krow{display:flex;gap:6px}.walkkeys kbd{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;font:700 16px ui-sans-serif,system-ui,sans-serif;color:var(--text);background:#ffffff14;border:1.5px solid rgba(255,255,255,.28);border-bottom-width:3.5px;border-radius:8px;transition:background .08s,transform .08s,border-color .08s}.walkkeys kbd.on{background:var(--purple);border-color:#c77ad8;transform:translateY(1.5px);box-shadow:0 0 14px #8e3aa3cc}.walkkeys .klabel{margin-top:2px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
