/* v522: the Sound Scan page, the flight to the dock, and the dock at rest. */

/* The dock stays in the top right after a listen: quiet gold at rest,
   green and pulsing while the mic is live. */
.merlin-listening-dock:not(.is-live) { border-color:rgba(214,168,79,.5); box-shadow:0 0 12px rgba(214,168,79,.14); }
.merlin-listening-dock:not(.is-live) .merlin-listening-pulse { display:none; }
.merlin-listening-dock.arriving { visibility:hidden; }
.merlin-listening-dock.catch { animation:sspDockCatch .8s cubic-bezier(.3,1.6,.5,1); }
.merlin-listening-dock.heard::after { content:'♪'; position:absolute; left:50%; top:100%; color:#69e0b8; font-size:14px; font-weight:900; pointer-events:none; animation:sspDockNote 1.3s ease-out forwards; }
@keyframes sspDockCatch { 0%{transform:scale(.6)} 45%{transform:scale(1.28); box-shadow:0 0 26px rgba(105,224,184,.8)} 100%{transform:scale(1)} }
@keyframes sspDockNote { 0%{opacity:0; transform:translate(-50%,0)} 25%{opacity:1} 100%{opacity:0; transform:translate(-50%,16px)} }

.sound-scan-flyer { position:fixed; z-index:10050; width:46px; height:46px; pointer-events:none; will-change:transform,opacity; }
.sound-scan-flyer .ssf-core { position:absolute; inset:0; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 40% 35%,#1f3a30,#07120d 70%); border:2px solid #69e0b8; box-shadow:0 0 18px rgba(105,224,184,.85),0 0 42px rgba(105,224,184,.35); overflow:hidden; }
.sound-scan-flyer .ssf-core img { width:36px; height:36px; object-fit:cover; border-radius:50%; }
.sound-scan-flyer .ssf-ring { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(105,224,184,.7); animation:ssfRing .9s ease-out infinite; }
.sound-scan-flyer .ssf-ring-2 { animation-delay:.45s; }
@keyframes ssfRing { from{transform:scale(1); opacity:.8} to{transform:scale(2.1); opacity:0} }
.sound-scan-spark { position:fixed; z-index:10049; pointer-events:none; color:#9ff0d4; font-size:13px; font-weight:900; text-shadow:0 0 8px rgba(105,224,184,.9); }

/* The page. */
.sound-scan-page { --ssp-teal:#69e0b8; --ssp-gold:#d6a84f; --ssp-ink:#f4ead4; --ssp-dim:#a9b8ad;
  position:fixed; inset:0; z-index:9000; display:flex; flex-direction:column; color:var(--ssp-ink);
  background:radial-gradient(120% 70% at 50% 0%,#17352b 0%,#0b1813 45%,#050807 100%);
  padding-top:var(--safe-top,0px); opacity:0; transform:translateY(18px); transition:opacity .24s ease,transform .24s ease; }
.sound-scan-page.show { opacity:1; transform:none; }
.sound-scan-page[hidden] { display:none; }
html.sound-scan-page-open .global-money-hud { visibility:hidden; }
.ssp-sky { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.ssp-sky i { position:absolute; width:3px; height:3px; border-radius:50%; background:#fff6d8; opacity:.5; animation:sspTwinkle 4s ease-in-out infinite; }
.ssp-sky i:nth-child(1){left:12%;top:8%} .ssp-sky i:nth-child(2){left:78%;top:5%;animation-delay:1s}
.ssp-sky i:nth-child(3){left:60%;top:16%;animation-delay:2s} .ssp-sky i:nth-child(4){left:30%;top:20%;animation-delay:3s}
.ssp-sky i:nth-child(5){left:88%;top:24%;animation-delay:1.6s} .ssp-sky i:nth-child(6){left:6%;top:30%;animation-delay:2.6s}
@keyframes sspTwinkle { 0%,100%{opacity:.15} 50%{opacity:.8} }

.ssp-top { position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:10px 16px; }
.ssp-back { display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:0 12px 0 6px; border-radius:22px; border:1px solid rgba(214,168,79,.4); background:rgba(0,0,0,.35); color:var(--ssp-ink); font-weight:700; }
.ssp-back svg { width:20px; height:20px; }
.ssp-top h2 { margin:0; text-align:center; font-family:'Russo One',sans-serif; font-size:20px; letter-spacing:.04em; color:#fff3d2; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.ssp-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:16px; background:rgba(0,0,0,.4); border:1px solid rgba(214,168,79,.35); font-size:12px; font-weight:700; color:var(--ssp-dim); white-space:nowrap; }
.ssp-pill-dot { width:8px; height:8px; border-radius:50%; background:#6f6a5c; }
.is-live .ssp-pill { color:#c9f7e6; border-color:rgba(105,224,184,.55); }
.is-live .ssp-pill-dot { background:var(--ssp-teal); animation:merlinListeningPulse 1.8s ease-out infinite; }

.ssp-scroll { position:relative; flex:1; overflow-y:auto; overscroll-behavior:contain; padding:0 16px calc(24px + var(--safe-bottom,0px)); display:flex; flex-direction:column; gap:14px; width:100%; max-width:560px; margin:0 auto; }
.ssp-hero { display:flex; flex-direction:column; align-items:center; gap:6px; }
.ssp-orb { position:relative; width:min(62vw,240px); aspect-ratio:1; }
.ssp-orb canvas { position:absolute; inset:0; width:100%; height:100%; }
.ssp-orb img { position:absolute; left:50%; top:50%; width:52%; height:52%; transform:translate(-50%,-50%); object-fit:cover; border-radius:50%; border:3px solid rgba(214,168,79,.7); box-shadow:0 0 0 6px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.6); filter:saturate(.8) brightness(.85); transition:filter .4s,border-color .4s,box-shadow .4s; }
.is-live .ssp-orb img { filter:none; border-color:var(--ssp-teal); box-shadow:0 0 0 6px rgba(0,0,0,.35),0 0 34px rgba(105,224,184,.55); animation:sspBreathe 3.2s ease-in-out infinite; }
@keyframes sspBreathe { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.04)} }
.ssp-status { margin:0; min-height:2.6em; text-align:center; font-size:14px; color:var(--ssp-ink); max-width:34ch; }

.ssp-spectro-card,.ssp-section { border-radius:14px; border:1px solid rgba(214,168,79,.22); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.25)); padding:12px; }
.ssp-card-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; font-family:'Rajdhani',sans-serif; font-weight:800; font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:#f0d9a2; }
.ssp-card-head small { font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ssp-dim); }
.ssp-spectro { position:relative; height:120px; border-radius:10px; overflow:hidden; background:#07100d; }
.ssp-spectro canvas { width:100%; height:100%; display:block; }
/* 2–9 kHz of an 11 kHz picture: 18%–82% from the bottom. */
.ssp-band { position:absolute; left:0; right:0; bottom:18.2%; height:63.6%; border-top:1px dashed rgba(214,168,79,.35); border-bottom:1px dashed rgba(214,168,79,.35); pointer-events:none; }
.ssp-mic-off { position:absolute; inset:0; display:grid; place-items:center; font-weight:700; color:var(--ssp-dim); background:rgba(0,0,0,.35); }
.ssp-mic-off[hidden] { display:none; }

.ssp-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.ssp-stats div { display:flex; flex-direction:column; align-items:center; padding:10px 4px; border-radius:12px; background:rgba(0,0,0,.3); border:1px solid rgba(105,224,184,.18); }
.ssp-stats strong { font-family:'Russo One',sans-serif; font-size:20px; color:#fff3d2; font-variant-numeric:tabular-nums; }
.ssp-stats span { font-size:11px; color:var(--ssp-dim); }

.ssp-main { min-height:52px; border-radius:26px; font-family:'Rajdhani',sans-serif; font-weight:900; font-size:18px; letter-spacing:.06em; text-transform:uppercase; color:#12100b; background:linear-gradient(135deg,#8ff0cf,#3fbf93); box-shadow:0 6px 22px rgba(63,191,147,.35); }
.ssp-main.is-stop { color:#fff0d5; background:linear-gradient(135deg,#7a4636,#4f2a20); border:1px solid #d5aa68; box-shadow:none; }
.ssp-main:disabled { opacity:.7; }

.ssp-saved { color:#9ff0d4 !important; font-weight:700 !important; }
.ssp-saved[hidden],.ssp-when[hidden] { display:none; }
.ssp-when { margin:-4px 0 8px; font-size:12px; color:var(--ssp-dim); }
.ssp-birds { display:grid; gap:8px; }
.ssp-bird { position:relative; display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:10px; min-height:64px; padding:6px 10px 6px 6px; text-align:left; border-radius:12px; background:rgba(0,0,0,.32); border:1px solid rgba(214,168,79,.2); animation:sspBirdIn .45s ease-out; }
.ssp-bird-art { position:relative; width:56px; height:56px; display:grid; place-items:center; border-radius:10px; overflow:hidden; background:rgba(214,168,79,.1); font-size:26px; }
.ssp-bird-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ssp-bird-copy { display:flex; flex-direction:column; min-width:0; }
.ssp-bird-copy strong { font-size:15px; color:#fff3d2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ssp-bird-copy em { font-size:12px; color:var(--ssp-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ssp-bird-copy small { font-size:11px; color:#9fb3a6; }
.ssp-bird-new { padding:3px 8px; border-radius:10px; background:var(--ssp-gold); color:#12100b; font-size:11px; font-weight:900; text-transform:uppercase; }
.ssp-bird.rarity-rare { border-color:rgba(201,201,201,.5); }
.ssp-bird.rarity-epic { border-color:rgba(180,138,214,.6); }
.ssp-bird.rarity-legendary { border-color:rgba(240,199,103,.7); }
@keyframes sspBirdIn { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.ssp-empty { margin:0; font-size:13px; color:var(--ssp-dim); }
.ssp-log { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.ssp-log li { display:grid; grid-template-columns:auto 1fr; gap:8px; font-size:13px; }
.ssp-log time { color:var(--ssp-teal); font-variant-numeric:tabular-nums; font-size:12px; padding-top:1px; }
.ssp-location { display:flex; align-items:center; gap:8px; min-height:44px; font-size:13px; color:var(--ssp-ink); }
.ssp-location input { width:20px; height:20px; accent-color:var(--ssp-teal); }
.ssp-privacy { margin:0; font-size:11px; color:var(--ssp-dim); }

@media (prefers-reduced-motion:reduce) {
  .sound-scan-page { transition:none; transform:none; }
  .ssp-sky i,.is-live .ssp-orb img,.is-live .ssp-pill-dot,.ssp-bird,.sound-scan-flyer .ssf-ring,.merlin-listening-dock.catch,.merlin-listening-dock.heard::after { animation:none; }
}