*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;font-family:Poppins,system-ui,sans-serif;background:#fbf4ee}#stage{display:block;width:100vw;height:100vh;touch-action:none}.topbar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 22px;background:#fbf4eec7;backdrop-filter:blur(12px);border-bottom:1px solid rgba(44,42,51,.1);user-select:none}.topbar .brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:#1e1c24;min-width:0;white-space:nowrap}.topbar .brand img{width:25px;height:25px;object-fit:contain}.topbar .brand .home{display:inline-flex;align-items:center;gap:9px;color:#2c2a33;text-decoration:none}.topbar .brand .home:hover{color:#947cf4}.topbar .brand .home .tld{background:linear-gradient(90deg,#947cf4,#fb3854,#feaa39);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.topbar .brand .sep{color:#8b8590;font-weight:300}.topbar .brand .crumb{font-size:15px;font-weight:600;background:linear-gradient(90deg,#947cf4,#fb3854 55%,#feaa39);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.topbar .tag{font-size:12.5px;font-weight:300;color:#2c2a33bf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-help{position:fixed;bottom:22px;left:50%;transform:translate(-50%);display:flex;gap:18px;padding:10px 20px;background:#fffdfacc;border:1px solid rgba(44,42,51,.08);border-radius:999px;backdrop-filter:blur(6px);color:#2c2a33cc;font-size:12.5px;font-weight:300;white-space:nowrap;transition:opacity 1.2s ease;user-select:none;pointer-events:none}.hud-help b{font-weight:600;color:#2c2a33}.hud-help.faded{opacity:.35}.controls{position:fixed;top:58px;right:16px;z-index:25;display:flex;flex-direction:column;gap:8px;align-items:flex-end}.control-chip{font-family:inherit;font-size:12.5px;font-weight:500;color:#2c2a33;background:#fffdfae6;border:1px solid rgba(44,42,51,.16);border-radius:999px;padding:7px 14px;cursor:pointer;white-space:nowrap;backdrop-filter:blur(8px);transition:transform .14s,border-color .14s,background .14s;user-select:none}.control-chip:hover{transform:translateY(-1px);border-color:#947cf499}.control-chip.on{color:#fff;background:linear-gradient(120deg,#947cf4,#fb3854);border-color:transparent}.control-chip .key-hint{font-family:inherit;font-size:10px;font-weight:600;opacity:.6;margin-left:6px}.how-btn{font-family:inherit;font-size:12.5px;font-weight:600;color:#2c2a33;text-decoration:none;background:#fffdfae6;border:1px solid rgba(44,42,51,.14);border-radius:999px;padding:7px 14px;cursor:pointer;white-space:nowrap;transition:transform .15s ease,border-color .15s ease}.how-btn:hover{transform:translateY(-1px);border-color:#947cf499}@media(max-width:720px){.hud-help{display:none}.topbar{gap:10px;padding:calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 10px calc(14px + env(safe-area-inset-left))}.topbar .tag{display:none}.topbar .brand{flex:1 1 auto;min-width:0;overflow:hidden}.topbar .brand .crumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.how-btn{flex:none;gap:0;padding:0;min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;font-size:15px}.how-btn .label{display:none}.controls{top:auto;right:calc(12px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom))}}@media(max-width:720px),(pointer:coarse){.control-chip .key-hint{display:none}.control-chip{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:8px 16px}}
