html,body,#tf-root{height:100%;margin:0}
body{font-family:system-ui,Segoe UI,Roboto,sans-serif;background:#0b1020;color:#eaf1ff}
#tf-root{position:relative}
#tf-canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block;background:linear-gradient(180deg,#0b1020,#111a33)}
.pauseBadge{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.4);border:1px solid #2a3b66;color:#eaf1ff;padding:4px 8px;border-radius:999px;font-size:12px}
.hud{position:absolute;right:8px;top:8px;display:flex;gap:8px;align-items:center;background:rgba(0,0,0,.35);border:1px solid #2a3b66;border-radius:999px;padding:4px 8px;font-size:12px;color:#eaf1ff}
.hud .dot{width:8px;height:8px;border-radius:50%;background:#24d18a;box-shadow:0 0 8px #24d18a}
.hud .paused{color:#ffbf47}