body[data-future="signal"] {
  background-image: radial-gradient(circle at 1px 1px, rgba(83,252,24,.16) 1px, transparent 0);
  background-size: 22px 22px;
}
body[data-future="signal"] .side,
body[data-future="signal"] .top,
body[data-future="signal"] .dock {
  background-image: linear-gradient(180deg, rgba(83,252,24,.05), transparent 28%);
}
body[data-future="signal"] .kcard,
body[data-future="signal"] .panel,
body[data-future="signal"] .event-card,
body[data-future="signal"] .metric {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: 0 0 0 1px rgba(83,252,24,.04), 0 16px 40px rgba(0,0,0,.18);
}
body[data-future="signal"] .kcard:hover { transform: translateY(-2px); }
body[data-future="signal"] .pill { box-shadow: 0 0 12px color-mix(in srgb, var(--live) 70%, transparent); }
body[data-motion="live"][data-future="signal"] .pill { animation: signal-pulse 1.6s ease-in-out infinite; }
body[data-future="signal"] .site-btn,
body[data-future="arcade"] .site-btn,
body[data-future="orbit"] .site-btn {
  border-radius: 999px !important;
}
body[data-future="signal"] .site-btn {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 0 0 18px color-mix(in srgb, var(--accent) 28%, transparent) !important;
}
body[data-future="signal"] a.ghost,
body[data-future="signal"] button.ghost:not(.menu):not(.chat-fab) {
  border-radius: 999px !important;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line)) !important;
}
body[data-future="arcade"] {
  --accent: #ff2bd6;
  --accent-text: #ff2bd6;
}
body[data-future="arcade"] .site-btn {
  border-radius: 10px !important;
  box-shadow: 4px 4px 0 #111, 4px 4px 0 1px #fff !important;
}
body[data-future="arcade"] h1,
body[data-future="arcade"] h2 { letter-spacing: .04em; text-transform: uppercase; }
body[data-future="orbit"] {
  background-image: radial-gradient(900px 420px at 10% -10%, rgba(94,224,197,.2), transparent 60%), radial-gradient(700px 380px at 110% 0%, rgba(124,92,255,.22), transparent 55%);
}
body[data-future="orbit"] .site-btn {
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(124,92,255,.25) !important;
}
body[data-motion="still"] .pill,
body[data-motion="still"] .signal-pin i,
body[data-motion="still"] .ping-burst { animation: none !important; }
.signal-radar { margin: 0 0 1.1rem; padding: .8rem .8rem .9rem; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--surface) 86%, transparent); }
.signal-radar header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .55rem; }
.signal-radar header b { letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }
.signal-radar header small { color: var(--muted); }
.signal-row { display: flex; gap: .75rem; overflow: auto; scrollbar-width: none; padding-bottom: .2rem; }
.signal-pin { position: relative; flex: 0 0 7.2rem; display: grid; justify-items: center; gap: .25rem; text-align: center; color: var(--fg); }
.signal-pin .avatar { width: 3.4rem; height: 3.4rem; }
.signal-pin i { position: absolute; top: 0; width: 3.4rem; height: 3.4rem; border-radius: 999px; border: 2px solid var(--accent); animation: signal-ring 1.8s ease-out infinite; pointer-events: none; }
.signal-pin strong, .signal-pin small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signal-pin small { color: var(--accent); font-size: .72rem; }
.ping-btn { display: inline-flex; align-items: center; gap: .45rem; height: 36px; padding: 0 .75rem 0 .85rem; border: 0; border-radius: 999px; background: var(--fg); color: var(--ink, #111); font-weight: 800; cursor: pointer; }
.ping-btn span { min-width: 1.4rem; height: 1.4rem; display: inline-grid; place-items: center; border-radius: 999px; background: var(--accent); color: #111; font-size: .75rem; }
.player { position: relative; }
.ping-burst { position: absolute; left: 50%; top: 46%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 999px; border: 2px solid var(--accent); pointer-events: none; z-index: 6; animation: signal-burst .9s ease-out forwards; }
@keyframes signal-pulse { 50% { filter: brightness(1.35); } }
@keyframes signal-ring { 70%, 100% { transform: scale(1.35); opacity: 0; } }
@keyframes signal-burst { to { transform: scale(18); opacity: 0; } }
@media (max-width: 720px) {
  .signal-pin { flex-basis: 5.6rem; }
}