/* AURORA 極光 — platform compatibility UI (src/ui/compat.js): the "audio paused — tap to resume" pill shown
   after an iOS interruption / backgrounding, and the splash warning when the page cannot make sound
   (http://<LAN-IP> is not a secure context). Tokens from css/style.css. */

/* ── resume pill ── */
.resume-pill {
  position: fixed; left: 50%; top: calc(var(--topbar-h, 60px) + 12px + env(safe-area-inset-top, 0px)); z-index: 4200;
  display: flex; align-items: center; gap: 11px; max-width: calc(100vw - 32px); padding: 10px 18px 10px 14px;
  border: 0; border-radius: 999px; cursor: pointer; text-align: left; color: var(--text, #e8ecff);
  font: inherit; font-family: var(--font-ui, system-ui, sans-serif);
  background: linear-gradient(180deg, rgba(44, 36, 20, .96), rgba(24, 20, 14, .96));
  box-shadow: 0 0 0 1px rgba(255, 196, 107, .45), 0 14px 40px rgba(0, 0, 0, .55), 0 0 40px rgba(255, 196, 107, .18);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transform: translate(-50%, -8px) scale(.97);
  transition: opacity .25s ease, transform .35s var(--ease-spring, ease);
}
.resume-pill.is-in { opacity: 1; transform: translate(-50%, 0); }
.resume-pill[hidden] { display: none; }
.resume-pill:hover { box-shadow: 0 0 0 1px rgba(255, 196, 107, .8), 0 14px 40px rgba(0, 0, 0, .55), 0 0 50px rgba(255, 196, 107, .3); }
.resume-pill:focus-visible { outline: 2px solid var(--a-amber, #ffc46b); outline-offset: 3px; }
.resume-pill__dot {
  flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--a-amber, #ffc46b);
  box-shadow: 0 0 10px var(--a-amber, #ffc46b); animation: resume-blink 1.2s ease-in-out infinite;
}
.resume-pill__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.25; }
.resume-pill__txt b { font-size: 14px; font-weight: 650; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resume-pill__txt small { font-size: 11px; color: var(--text-dim, #8e97b8); letter-spacing: .04em; }
@keyframes resume-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .resume-pill__dot { animation: none; } }

/* while the context is suspended the engine sends no state: freeze the "live" animations instead of faking motion */
.audio-suspended .dc-btn.is-live .dc-btn__live,
.audio-suspended .np__ic i,
.audio-suspended .sv-cover__eq i { animation-play-state: paused; }
.audio-suspended .np, .audio-suspended .th__progFill { opacity: .55; transition: opacity .3s; }

/* ── splash: this page cannot make sound (insecure context) ── */
.splash__warn {
  display: flex; flex-direction: column; align-items: center; gap: 3px; max-width: min(520px, calc(100vw - 32px));
  margin: 22px auto 0; padding: 10px 16px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; text-align: center;
  color: var(--text, #e8ecff); background: rgba(255, 196, 107, .1); box-shadow: inset 0 0 0 1px rgba(255, 196, 107, .4);
}
.splash__warn b { color: var(--a-amber, #ffc46b); font-weight: 650; }
.splash__warn span { color: var(--text-dim, #8e97b8); font-size: 11.5px; }
.splash__warn small { margin-top: 3px; color: var(--text-faint, #5a6284); font-size: 11px; }
.splash__midi[hidden] { display: none; }

/* ── splash: boot failed (e.g. malformed saved data) → reset saved data ── */
.splash__reset {
  display: block; margin: 16px auto 0; padding: 9px 18px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--text, #e8ecff);
  background: rgba(255, 107, 129, .14); box-shadow: inset 0 0 0 1px rgba(255, 107, 129, .5);
  transition: background .2s;
}
.splash__reset:hover { background: rgba(255, 107, 129, .26); }
.splash__reset:focus-visible { outline: 2px solid var(--a-red, #ff6b81); outline-offset: 3px; }