/* Module refinement: one motion language (120 to 260 ms, one easing, an 8 px rise at most, nothing bounces or shakes) and a Relay re-skin of
   Name Drop's stage. Loaded after settings.css. Every animation sits inside prefers-reduced-motion: no-preference, and body.calm switches them all off. */
:root { --m-fast: 120ms; --m: 180ms; --m-slow: 260ms; --m-ease: cubic-bezier(.2, .7, .2, 1); }

/* ---------- Name Drop: a dark console screen, flat enamel props ---------- */
.nd-stage-wrap { background-color: #0E1819 !important; background-image: none !important; border-color: #050A0A !important; box-shadow: inset 0 0 0 4px #0E1819, inset 0 0 0 5px rgb(237 228 203 / .16) !important; }
.nd-stage:empty::before { content: "Ready when you are"; color: #AFC48B; font: 700 clamp(13px, 1.5vw, 19px) var(--font-mono); letter-spacing: .3em; text-transform: uppercase; }
/* Guess Who */
.ndi-slab { background: #162A29; }
.ndi-top { background: #2F5D57 !important; }
.ndi-front { box-shadow: none; border-color: #202D2C55; }
.ndi-back { background: var(--mod) !important; box-shadow: inset 0 0 0 4px rgb(32 45 44 / .28) !important; }
.ndi-back::after { background: #202D2C; }
/* Plinko */
.ndp-board { background: #16292A !important; border-radius: 14px !important; box-shadow: inset 0 0 0 3px #16292A, inset 0 0 0 4px rgb(237 228 203 / .22) !important; }
.ndp-peg { background: #EDE4CB !important; box-shadow: none !important; }
.ndp-bin { background: #0F1C1D !important; border: 1.5px solid rgb(237 228 203 / .38) !important; border-top: 0 !important; }
.ndp-bin-name { color: #EDE4CB; }
.ndp-glow { background: rgb(232 187 86 / .36) !important; }
.ndp-puck { background: var(--mod) !important; border: 2px solid #202D2C !important; box-shadow: none !important; }
.ndp-puck-name { color: #202D2C; }
/* Capsule machine */
.ndc-base { background: #2F5D57 !important; border-radius: 14px 14px 10px 10px !important; box-shadow: inset 0 0 0 3px #162A29 !important; }
.ndc-slotlabel { color: #EDE4CB; text-shadow: none; font-family: var(--font-mono); }
.ndc-chute { background: #5E716B !important; box-shadow: inset 0 0 0 2px rgb(32 45 44 / .4) !important; }
.ndc-tray { background: #162A29 !important; box-shadow: inset 0 0 0 2px rgb(237 228 203 / .25) !important; }
.ndc-knob { background: #E8BB56 !important; box-shadow: inset 0 0 0 2px #202D2C !important; }
.ndc-knob::after { background: #202D2C; }
.ndc-dome { background: rgb(237 228 203 / .07) !important; border: 2px solid rgb(237 228 203 / .5) !important; box-shadow: none !important; }
.ndc-cap i { box-shadow: inset 0 0 0 1.5px #202D2C; }
.ndc-cap .bot { background: color-mix(in srgb, var(--c) 40%, #EDE4CB); }
.ndc-cap::after { display: none; }
.ndc-slip { background: #FFFBEF; border: 2px solid #202D2C; box-shadow: none; }
/* The result: a solid panel, not a hazy veil */
.nd-result { background: rgb(14 24 25 / .94) !important; }
.ndr-name { color: #EDE4CB; letter-spacing: -.01em; }
.ndr-note { color: #AFC48B; }
.ndr-portrait { border-radius: 10px !important; background: var(--mod) !important; color: #202D2C !important; box-shadow: 0 0 0 3px #0E1819, 0 0 0 5px var(--mod) !important; }
.nd-hint { color: var(--muted); }

/* ---------- base states (no motion) ---------- */
.ndr-card, .gm-card { animation: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Name Drop result: rise 8 px, 260 ms, a little apart for pairs and trios */
  .ndr-card { animation: ndr-in var(--m-slow) var(--m-ease) both; }
  @keyframes ndr-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  /* Group Maker: cards settle in a short wave, no overshoot */
  .gm-card { animation: gm-in var(--m-slow) var(--m-ease) both; animation-delay: calc(var(--i, 0) * 28ms); }
  @keyframes gm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  /* Timer finished: a flat brass wash and one clean ring that fades out, instead of a yellow veil */
  .tm-glow { background: #E8BB56 !important; }
  .tm-stage.tm-done .tm-glow { animation: tm-wash 3.2s ease-in-out infinite alternate; opacity: .12; }
  @keyframes tm-wash { from { opacity: .05; } to { opacity: .2; } }
  .tm-stage.tm-done .tm-face::after { content: ""; position: absolute; inset: -3px; border: 2px solid #E8BB56; border-radius: inherit; pointer-events: none; animation: tm-done-ring 1.8s ease-out infinite; }
  @keyframes tm-done-ring { from { opacity: .85; transform: scale(1); } to { opacity: 0; transform: scale(1.1); } }
  /* Audio Audit: smooth, quick follow of the level; slow breathing when idle; a calm throb (never a shake) on alarm */
  .nm-orb-glow, .nm-orb-core, .nm-orb-peak { transition: transform .16s var(--m-ease) !important; }
  .nm-block { transition: background .12s ease, transform .12s ease !important; }
  .nm-stage[data-zone=idle] .nm-orb-core { animation: nm-breathe 4.2s ease-in-out infinite; }
  .nm-stage[data-alarm=true] { animation: nm-blink 1.4s ease-in-out infinite; }
  .nm-stage[data-alarm=true][data-face=stack] .nm-stack { animation: nm-throb 1s ease-in-out infinite; }
  .nm-stage[data-alarm=true][data-face=orb] .nm-orb-core { animation: nm-thump .9s ease-in-out infinite; }
  @keyframes nm-breathe { 50% { scale: 1.05; } }
  @keyframes nm-blink { 50% { border-color: #ffb199; } }
  @keyframes nm-throb { 50% { scale: 1.015; } }
  @keyframes nm-thump { 50% { scale: 1.04; } }
}
@media (prefers-reduced-motion: reduce) { .nm-orb-glow, .nm-orb-core, .nm-orb-peak, .nm-block { transition: none !important; } }