/* Immersive listening — a Sanctuary-night layer over the existing audio engine. */
body.player-open{ overflow:hidden; }
.immersive-player{ position:fixed; inset:0; z-index:1200; display:none; overflow:hidden;
  color:#f8f2ff; background:#100d2d; isolation:isolate; }
.immersive-player.open{ display:block; }
.ip-sky{ position:absolute; inset:0; z-index:-3;
  background:
    radial-gradient(circle at 78% 15%, rgba(255,226,163,.28), transparent 12%),
    radial-gradient(ellipse at 50% 110%, rgba(199,130,240,.34), transparent 46%),
    linear-gradient(180deg,#0e0d2d 0%,#211750 48%,#5b387b 100%); }
.ip-stars,.ip-stars::before{ position:absolute; inset:0; content:""; pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.75) 0 1px,transparent 1.5px);
  background-size:67px 67px; opacity:.26; }
.ip-stars::before{ transform:translate(31px,18px); background-size:97px 97px; opacity:.45; }
.ip-moon{ position:absolute; width:132px; height:132px; right:-28px; top:7%; border-radius:50%;
  background:radial-gradient(circle at 38% 38%,#fff9df,#eedcae 60%,#cda7d9 100%);
  box-shadow:0 0 45px rgba(255,230,171,.32),0 0 110px rgba(199,156,237,.23); opacity:.82; }
.ip-cloud{ position:absolute; left:-22%; width:145%; height:24%; border-radius:50%; filter:blur(22px);
  background:radial-gradient(ellipse,rgba(223,199,249,.26),rgba(113,73,160,.09) 55%,transparent 72%);
  pointer-events:none; }
.ip-cloud.one{ top:19%; animation:ip-drift 38s ease-in-out infinite alternate; }
.ip-cloud.two{ bottom:-2%; opacity:.8; animation:ip-drift 52s ease-in-out infinite alternate-reverse; }
@keyframes ip-drift{ from{ transform:translate3d(-3%,0,0); } to{ transform:translate3d(5%,1.5%,0); } }
.ip-shell{ position:relative; height:100%; height:100dvh; max-width:720px; margin:0 auto;
  display:grid; grid-template-rows:auto minmax(190px,1fr) auto; gap:16px;
  padding:max(18px,env(safe-area-inset-top)) 20px max(18px,env(safe-area-inset-bottom)); }
.ip-top{ display:flex; align-items:center; justify-content:space-between; min-height:44px; }
.ip-icon-btn{ width:44px; height:44px; border:1px solid rgba(255,255,255,.16); border-radius:50%;
  display:grid; place-items:center; background:rgba(20,13,47,.30); color:#fff8f0; cursor:pointer;
  backdrop-filter:blur(13px); -webkit-backdrop-filter:blur(13px); transition:.2s ease; }
.ip-icon-btn:hover,.ip-icon-btn:focus-visible{ border-color:#e8c989; color:#f8dca2; transform:translateY(-1px); }
.ip-icon-btn.sel{ color:#f7d893; border-color:rgba(247,216,147,.72); background:rgba(239,188,109,.14); }
.ip-kicker{ font-size:10px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:#d3b9ed; }
.ip-hero{ position:relative; align-self:stretch; min-height:240px; overflow:hidden; text-align:center;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%); }
.ip-affirmation-stream{ position:absolute; inset:0; overflow:hidden; }
.ip-affirmation{ position:absolute; top:50%; left:0; right:0; width:100%; max-width:620px; margin:0 auto;
  padding:0 8px; font-family:var(--serif); font-size:clamp(29px,7vw,48px); line-height:1.24;
  font-weight:400; letter-spacing:-.025em; text-wrap:balance; color:#fff9f3;
  text-shadow:0 3px 30px rgba(17,8,42,.55); transform:translateY(-50%); opacity:1;
  transition:opacity .9s ease,transform .9s cubic-bezier(.22,.72,.16,1); will-change:transform,opacity; }
.ip-affirmation.entering{ opacity:0; transform:translateY(70%); }
.ip-affirmation.departing{ opacity:.16; transform:translateY(-165%); }
.ip-affirmation.leaving{ opacity:0; transform:translateY(-275%); }
.ip-lower{ display:flex; flex-direction:column; gap:13px; }
.ip-track-copy{text-align:center;}
.ip-track-copy small{ display:block; color:#c8b9df; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.ip-track-copy h2{ margin:2px 0 0; font-family:var(--serif); font-size:20px; font-weight:400; color:#fff8f1; }
.ip-ambience-card{ width:100%; display:flex; align-items:center; gap:13px; text-align:left; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:12px 14px;
  color:#fff; background:rgba(28,18,63,.46); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.ip-ambience-mark{ width:38px; height:38px; border-radius:13px; display:grid; place-items:center; flex:0 0 auto;
  color:#f4d99b; background:linear-gradient(145deg,rgba(196,150,240,.32),rgba(244,177,187,.18)); }
.ip-ambience-copy{ min-width:0; flex:1; }
.ip-ambience-copy small{ display:block; color:#c5b6dd; font-size:11px; }
.ip-ambience-copy b{ display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; font-weight:500; }
.ip-change{ color:#f2d394; font-size:12px; }
.ip-balance{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; color:#d6c8e6; font-size:11px; }
.ip-balance input{ width:100%; accent-color:#e9c67d; }
.ip-progress-track{ height:3px; border-radius:99px; background:rgba(255,255,255,.14); overflow:hidden; }
.ip-progress-fill{ height:100%; width:0; background:linear-gradient(90deg,#bf9cea,#efc8b6,#f0d28d); transition:width .35s linear; }
.ip-times{ display:flex; justify-content:space-between; color:#b8a8cf; font-size:10.5px; font-variant-numeric:tabular-nums; margin-top:5px; }
.ip-controls{ display:grid; grid-template-columns:repeat(7,1fr); align-items:center; gap:3px; }
.ip-control{ min-width:0; border:0; background:none; color:#d9cde8; display:flex; flex-direction:column;
  align-items:center; gap:4px; font:inherit; font-size:9px; cursor:pointer; padding:5px 0; }
.ip-control svg{ width:21px; height:21px; }
.ip-control.sel{ color:#f4d28c; }
.ip-main-play{ width:56px; height:56px; border-radius:50%; border:1px solid rgba(255,255,255,.42);
  display:grid; place-items:center; color:#2c204c; background:linear-gradient(145deg,#fff9ee,#edce91);
  box-shadow:0 9px 30px rgba(239,199,122,.24); cursor:pointer; margin:-7px auto; }
.ip-main-play svg{ width:22px; height:22px; }

.player-sheet{ position:fixed; inset:0; z-index:1300; display:none; align-items:flex-end; background:rgba(8,6,24,.56); }
.player-sheet.open{ display:flex; }
.ps-panel{ width:min(100%,720px); max-height:88dvh; margin:0 auto; overflow:hidden; display:flex; flex-direction:column;
  border:1px solid rgba(255,255,255,.13); border-bottom:0; border-radius:27px 27px 0 0;
  color:#f8f3ff; background:linear-gradient(180deg,rgba(41,27,78,.98),rgba(20,15,47,.99));
  box-shadow:0 -24px 70px rgba(4,2,18,.42); }
.ps-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 18px 10px; }
.ps-head h3{ font-family:var(--serif); font-size:23px; font-weight:400; }
.ps-close{ border:0; background:rgba(255,255,255,.08); color:#fff; border-radius:50%; width:36px; height:36px; cursor:pointer; }
.ps-categories{ display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding:7px 18px 14px; }
.ps-categories::-webkit-scrollbar{ display:none; }
.ps-chip{ flex:0 0 auto; border:1px solid rgba(255,255,255,.13); border-radius:999px; padding:7px 13px;
  color:#cbbde0; background:rgba(255,255,255,.035); font:inherit; font-size:11.5px; cursor:pointer; }
.ps-chip.sel{ color:#2d2148; border-color:#efd18e; background:#efd18e; box-shadow:0 0 0 2px rgba(239,209,142,.14); }
.ps-list{ overflow-y:auto; padding:0 12px 110px; }
.ps-track{ width:100%; display:grid; grid-template-columns:42px 1fr 42px 28px; align-items:center; gap:10px;
  border:1px solid transparent; border-radius:16px; padding:10px; color:#f8f3ff; background:transparent; text-align:left; }
.ps-track.sel{ border-color:rgba(226,191,126,.52); background:rgba(226,191,126,.10); }
.ps-track.unavailable{ opacity:.48; }
.ps-preview,.ps-heart{ width:38px; height:38px; border:0; border-radius:50%; display:grid; place-items:center;
  color:#f7e9ff; background:rgba(255,255,255,.08); cursor:pointer; }
.ps-heart{ width:36px; height:36px; background:none; color:#baa8d2; }
.ps-heart.sel{ color:#f3a9bd; }
.ps-track-copy{ min-width:0; cursor:pointer; }
.ps-track-copy b{ display:block; font-size:14px; font-weight:500; }
.ps-track-copy small{ color:#aFA1c7; font-size:10.5px; }
.ps-check{ color:#f2d394; font-size:18px; text-align:center; }
.ps-confirm{ position:absolute; left:0; right:0; bottom:0; padding:13px 18px max(14px,env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:14px; background:linear-gradient(180deg,rgba(22,15,50,.55),#161032 30%); }
.ps-selected{ flex:1; min-width:0; }
.ps-selected small{ display:block; color:#ae9fc5; font-size:10px; text-transform:uppercase; letter-spacing:.13em; }
.ps-selected b{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.ps-use{ border:0; border-radius:999px; padding:12px 17px; background:linear-gradient(135deg,#c6a7ee,#efbdc9,#efd08d);
  color:#2b1f47; font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.ps-simple{ padding:4px 18px max(28px,env(safe-area-inset-bottom)); display:grid; gap:9px; overflow:auto; }
.ps-option{ width:100%; display:flex; justify-content:space-between; align-items:center; border:1px solid rgba(255,255,255,.12);
  border-radius:15px; padding:14px 15px; background:rgba(255,255,255,.035); color:#f3edf9; font:inherit; cursor:pointer; }
.ps-option.sel{ border-color:#e8c67f; background:rgba(232,198,127,.11); color:#f3d99f; }
.ps-custom{ display:none; grid-template-columns:1fr auto; gap:8px; }
.ps-custom.open{ display:grid; }
.ps-custom input{ min-width:0; border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:11px 12px;
  color:#fff; background:rgba(0,0,0,.16); font:inherit; }
@media (min-width:721px){ .immersive-player{ background:rgba(6,4,18,.94); } .ip-shell{ box-shadow:0 0 90px rgba(8,4,25,.48); } }
@media (prefers-reduced-motion:reduce){
  .ip-cloud{ animation:none!important; }
  .ip-affirmation{ transition:none; }
  .ip-affirmation.entering{ opacity:1; transform:translateY(-50%); }
  .ip-affirmation.departing,.ip-affirmation.leaving{ display:none; }
}