/* Mongoose Screens engine styles. Scoped under .ms-root so the editor preview and the player share them. Themes: axiom (AXIOM's
   notched glass panels and Rajdhani/Chakra Petch type), glass (soft frosted cards), minimal (type straight on the scene). */
.ms-root { position: relative; overflow: hidden; background: #02040a; color: #dbe7f7; --ms-accent: #4de3ff; --ms-accent2: #8b5cff; --ms-scale: 1;
  font-family: 'Rajdhani', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; user-select: none; }
.ms-root .ms-scene { position: absolute; inset: 0; display: block; }
.ms-root .ms-hud { position: absolute; inset: 0; pointer-events: none; display: grid; grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  padding: calc(22px * var(--ms-scale)); gap: calc(14px * var(--ms-scale)); will-change: transform; }
.ms-root .slot { display: flex; flex-direction: column; gap: calc(12px * var(--ms-scale)); min-width: 0; }
.ms-root .slot-tl, .ms-root .slot-ml, .ms-root .slot-bl { align-items: flex-start; }
.ms-root .slot-tc, .ms-root .slot-mc, .ms-root .slot-bc { align-items: center; text-align: center; }
.ms-root .slot-tr, .ms-root .slot-mr, .ms-root .slot-br { align-items: flex-end; text-align: right; }
.ms-root .slot-ml, .ms-root .slot-mc, .ms-root .slot-mr { justify-content: center; }
.ms-root .slot-bl, .ms-root .slot-bc, .ms-root .slot-br { justify-content: flex-end; }
.ms-root .w { pointer-events: auto; max-width: calc(380px * var(--ms-scale)); }
.ms-root .w canvas { display: block; width: 100%; height: auto; }

/* AXIOM */
.ms-hud[data-theme="axiom"] .w { background: rgba(9, 15, 30, .42); border: 1px solid rgba(110, 170, 255, .14);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: calc(14px * var(--ms-scale)) calc(16px * var(--ms-scale));
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.ms-hud[data-theme="axiom"] .w-title, .ms-hud[data-theme="axiom"] .clock-sub, .ms-hud[data-theme="axiom"] .cd-sub, .ms-hud[data-theme="axiom"] .g-label,
.ms-hud[data-theme="axiom"] .weather-sub, .ms-hud[data-theme="axiom"] .date { font: 400 calc(11px * var(--ms-scale))/1.4 'Chakra Petch', ui-monospace, monospace;
  letter-spacing: .22em; text-transform: uppercase; color: #6b7c9c; }
.ms-hud[data-theme="axiom"] .clock-time, .ms-hud[data-theme="axiom"] .cd-big, .ms-hud[data-theme="axiom"] .weather-temp { font-weight: 500; letter-spacing: .06em; color: #e6f1ff; }

/* Glass */
.ms-hud[data-theme="glass"] .w { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); border-radius: calc(18px * var(--ms-scale));
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); padding: calc(14px * var(--ms-scale)) calc(18px * var(--ms-scale));
  box-shadow: 0 10px 40px rgba(0, 0, 0, .18); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
.ms-hud[data-theme="glass"] .w-title, .ms-hud[data-theme="glass"] .clock-sub, .ms-hud[data-theme="glass"] .cd-sub, .ms-hud[data-theme="glass"] .weather-sub,
.ms-hud[data-theme="glass"] .g-label { font-size: calc(12px * var(--ms-scale)); opacity: .78; letter-spacing: .04em; }
/* Minimal */
.ms-hud[data-theme="minimal"] .w { text-shadow: 0 2px 18px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .5); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
.ms-hud[data-theme="minimal"] .w-title, .ms-hud[data-theme="minimal"] .clock-sub, .ms-hud[data-theme="minimal"] .cd-sub, .ms-hud[data-theme="minimal"] .weather-sub { font-size: calc(13px * var(--ms-scale)); opacity: .8; }
.ms-hud[data-theme="minimal"] .telemetry, .ms-hud[data-theme="minimal"] .lattice, .ms-hud[data-theme="minimal"] .wave { opacity: .8; }

/* Widgets */
.ms-root .clock-time { font-size: calc(30px * var(--ms-scale)); line-height: 1.05; font-variant-numeric: tabular-nums; }
.ms-root .clock.big .clock-time { font-size: calc(96px * var(--ms-scale)); font-weight: 300; letter-spacing: .02em; }
.ms-root .date { font-size: calc(18px * var(--ms-scale)); }
.ms-root .weather-temp, .ms-root .cd-big { font-size: calc(34px * var(--ms-scale)); line-height: 1.05; font-variant-numeric: tabular-nums; }
.ms-root .quote { margin: 0; max-width: calc(520px * var(--ms-scale)); }
.ms-root .quote blockquote { margin: 0; font-size: calc(22px * var(--ms-scale)); line-height: 1.35; font-weight: 500; }
.ms-root .quote figcaption { margin-top: 6px; font-size: calc(13px * var(--ms-scale)); opacity: .7; }
.ms-root .quote.in { animation: ms-fade 1.2s ease both; }
.ms-root .gauges { display: flex; gap: calc(6px * var(--ms-scale)); }
.ms-root .gauge { width: calc(84px * var(--ms-scale)); text-align: center; }
.ms-root .gauge .g-label { display: block; margin-top: -4px; }
.ms-root .focus-btn { margin-top: 8px; font: inherit; font-size: calc(13px * var(--ms-scale)); color: inherit; background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; padding: 4px 14px; cursor: pointer; }
.ms-root .note { font-size: calc(17px * var(--ms-scale)); line-height: 1.4; white-space: pre-wrap; }
.ms-root .telemetry .stream { margin-top: 8px; font: calc(11px * var(--ms-scale))/1.7 'Chakra Petch', ui-monospace, monospace; letter-spacing: .12em; min-width: calc(250px * var(--ms-scale)); }
.ms-root .telemetry .ln { display: flex; justify-content: space-between; gap: 18px; color: #6b7c9c; animation: ms-fade .6s ease both; }
.ms-root .telemetry .ln.hot span { color: var(--ms-accent); }
.ms-root .telemetry em { font-style: normal; color: #3a4a66; }
.ms-root .lattice, .ms-root .wave { width: calc(290px * var(--ms-scale)); }
.ms-root .w-title { margin-bottom: 6px; }

/* Pop-ups */
.ms-root .ms-toasts { position: absolute; inset: 0; pointer-events: none; }
.ms-root .ms-toast { position: absolute; left: calc(26px * var(--ms-scale)); bottom: calc(34px * var(--ms-scale)); max-width: min(420px, 70%);
  background: rgba(9, 15, 30, .72); border: 1px solid rgba(110, 170, 255, .22); color: #e6f1ff; padding: 12px 16px; border-radius: 14px;
  font: 500 calc(15px * var(--ms-scale))/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
.ms-root .ms-toast.pet { transform: translate(-50%, 10px); background: #fffdf8; color: #2a2116; border-color: rgba(0, 0, 0, .08); border-radius: 18px; }
.ms-root .ms-toast.pet::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #fffdf8; }
.ms-root .ms-toast.in { opacity: 1; transform: translateY(0); }
.ms-root .ms-toast.pet.in { transform: translate(-50%, 0); }
@keyframes ms-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ms-root .quote.in, .ms-root .telemetry .ln { animation: none; } .ms-root .ms-toast { transition: opacity .3s; } }