* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #161a3a; font: 12px ui-monospace, Menlo, Consolas, monospace; }
#scene { position: absolute; inset: 0; margin: auto; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
#card { position: fixed; z-index: 3; pointer-events: none; padding: 7px 10px; background: #f4f6ff; color: #1a1e44; border-radius: 4px; box-shadow: 0 3px 0 rgba(0,0,0,.3); display: flex; flex-direction: column; gap: 2px; }
#card[hidden] { display: none; }
#card span { opacity: .75; display: flex; align-items: center; gap: 5px; }
#card i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
#log { position: fixed; left: 12px; bottom: 10px; z-index: 2; width: min(36vw, 420px); padding: 6px 9px;
  background: rgba(12, 14, 30, .78); border: 1px solid rgba(124, 240, 182, .25); border-radius: 6px;
  color: #cfd8f0; font-size: clamp(9px, 0.95vw, 12px); line-height: 1.35; text-decoration: none; backdrop-filter: blur(2px); }
#log:hover { border-color: rgba(124, 240, 182, .6); }
#log p { margin: 0 0 5px; padding-bottom: 5px; border-bottom: 1px solid rgba(124, 240, 182, .15); color: #e6ecff; white-space: normal; line-height: 1.4; }
#log header { color: #8f9bc0; margin-bottom: 3px; }
#log header b { color: #7cf0b6; font-weight: 600; animation: blink 1.6s infinite; }
#log ol { margin: 0; padding: 0; list-style: none; }
#log li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#log time { color: #5c6690; }
#log em { color: #5c6690; font-style: normal; }
#log .in { color: #7fd3ff; } #log .route { color: #c9a8ff; } #log .tool { color: #7cf0b6; }
#log .out { color: #ffe066; } #log .handoff { color: #f4f6ff; } #log .alert { color: #ff6b81; } #log .sys { color: #7f8db5; }
#log li:last-child { animation: slidein .25s ease-out; }
@keyframes slidein { from { opacity: 0; transform: translateY(4px); } }
@keyframes blink { 50% { opacity: .35; } }
/* Near-square and portrait screens: the log sits in the free space under the scene. */
@media (max-aspect-ratio: 4/3) { #log { width: calc(100vw - 24px); font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { #log header b, #log li:last-child { animation: none; } }