/* Lotl the axolotl and the floating study-music player */
.radio-pet{--tilt:0deg;--beat:.8s;--tint:#f39bb6;position:fixed;left:0;top:0;z-index:82;width:84px;height:76px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;will-change:transform;outline:none}
.radio-pet:focus-visible .pet-bob{filter:drop-shadow(0 0 0 3px var(--gold))}
.radio-pet:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:24px}
.radio-pet.dragging{cursor:grabbing}
.pet-menu-backdrop{position:fixed;inset:0;z-index:84;background:transparent;touch-action:none}
.pet-menu-backdrop[hidden]{display:none!important}
.pet-radial-menu[hidden]{display:none!important}
.pet-fruit{position:absolute;z-index:2;right:-7px;top:-22px;width:40px;height:40px;display:grid;place-items:center;pointer-events:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.22));animation:fruitGift .5s cubic-bezier(.2,.9,.3,1.3) both}
.pet-fruit svg{width:100%;height:100%}
.pet-crop{position:absolute;left:50%;top:54%;z-index:1;width:22px;height:22px;display:grid;place-items:center;pointer-events:none;transform:translate(-50%,-50%) scale(var(--growth,.34));transform-origin:center;transition:transform .55s cubic-bezier(.2,.8,.3,1.25);filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.pet-crop[hidden]{display:none!important}
.pet-crop svg{width:100%;height:100%}
@keyframes fruitGift{0%{opacity:0;transform:translateY(12px) scale(.2) rotate(-20deg)}70%{opacity:1;transform:translateY(-3px) scale(1.16) rotate(8deg)}100%{transform:translateY(0) scale(1) rotate(0)}}
.radio-pet.menu-open{cursor:default}
.pet-bob{position:absolute;inset:0;display:block;transition:filter .2s}
.radio-pet .axo{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 10px var(--axo-glow,rgba(229,85,127,.28)))}
.pet-shadow{position:absolute;left:22%;right:22%;bottom:-8px;height:9px;border-radius:50%;background:radial-gradient(closest-side,rgba(30,20,40,.22),transparent)}
.radio-pet.open .axo{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--tint) 75%,transparent))}
/* Body parts */
:is(.radio-pet,.auth-axo,.lotl-preview) .axo-gills-l{transform-origin:34px 46px;animation:gillWaveL 1.8s ease-in-out infinite}
:is(.radio-pet,.auth-axo,.lotl-preview) .axo-gills-r{transform-origin:98px 46px;animation:gillWaveR 1.8s ease-in-out infinite}
:is(.radio-pet,.auth-axo,.lotl-preview) .axo-tail{transform-origin:84px 88px;animation:tailSway 2.2s ease-in-out infinite}
:is(.radio-pet,.auth-axo,.lotl-preview) .axo-eyes .eye{transform-box:fill-box;transform-origin:center;animation:blink 5.5s infinite}
:is(.radio-pet,.auth-axo,.lotl-preview) .axo-eyes .eye:last-child{animation-delay:.04s}
:is(.radio-pet,.auth-axo,.lotl-preview) .axo-arm-l{transform-box:fill-box;transform-origin:100% 0;animation:waveArm 3.4s ease-in-out infinite}
.axo-arm-r{transform-box:fill-box;transform-origin:0 0}
.radio-pet.playing .axo-mouth{d:path("M58 59 q8 9 16 0")}
/* Music notes and speech bubble */
.pet-notes{position:absolute;inset:0;pointer-events:none}
.pet-note{position:absolute;left:50%;top:10%;font-size:18px;font-weight:900;text-shadow:0 1px 0 #fff;animation:noteUp 2.6s ease-out forwards}
.pet-bubble{position:absolute;bottom:calc(100% + 10px);right:0;white-space:nowrap;padding:8px 12px;border-radius:16px 16px 4px 16px;background:var(--bg);color:var(--ink);font-size:12.5px;font-weight:800;box-shadow:var(--raise-sm);border:1px solid var(--edge);animation:tourPop .4s cubic-bezier(.2,.9,.3,1.3);pointer-events:none}
/* Player panel */
.radio-panel{position:fixed;z-index:83;display:flex;flex-direction:column;gap:12px;padding:16px;max-height:calc(var(--vh,100vh) - 16px);overflow-y:auto;border-radius:24px;background:var(--bg);box-shadow:0 20px 50px rgba(0,0,0,.28),var(--raise-sm);border:1px solid var(--edge);animation:tourPop .3s cubic-bezier(.2,.9,.3,1.2);overscroll-behavior:contain}
.rp-head{display:flex;align-items:center;gap:10px}
.rp-head>div{flex:1;min-width:0}
.rp-head strong{display:block;font-size:15px}
.rp-head small{display:block;font-size:11px;color:var(--muted);line-height:1.3}
.rp-avatar{width:48px;height:42px;flex-shrink:0}
.rp-avatar .axo{width:100%;height:100%}
.rp-avatar .axo-phones{opacity:1;transform:none}
.rp-close{width:36px;height:36px;min-height:36px;border:0;border-radius:12px;background:var(--bg);box-shadow:var(--raise-xs);color:var(--muted);display:grid;place-items:center;flex-shrink:0}
.rp-close svg{width:16px;height:16px}
.rp-now{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;box-shadow:var(--inset-sm);background:linear-gradient(135deg,color-mix(in srgb,var(--tint) 22%,var(--bg)),var(--bg) 70%)}
.rp-now small{display:block;font-size:11px;font-weight:800;letter-spacing:.3px;color:var(--muted)}
.rp-now strong{display:block;font-size:16px;line-height:1.25}
.rp-meta{display:block;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.rp-eq{display:flex;align-items:flex-end;gap:3px;width:30px;height:28px;flex-shrink:0}
.rp-eq span{flex:1;height:30%;border-radius:3px;background:var(--tint)}
.rp-eq.on span{animation:eq .9s ease-in-out infinite}
.rp-eq.on span:nth-child(2){animation-delay:-.3s}.rp-eq.on span:nth-child(3){animation-delay:-.6s}.rp-eq.on span:nth-child(4){animation-delay:-.15s}
.rp-progress{height:6px;border-radius:6px;box-shadow:var(--inset-sm);overflow:hidden}
.rp-progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width 1s linear}
.rp-controls{display:flex;justify-content:center;align-items:center;gap:18px}
.rp-controls button{width:50px;height:50px;border:0;border-radius:50%;background:var(--bg);box-shadow:var(--raise-sm);color:var(--ink);display:grid;place-items:center;transition:transform .15s,box-shadow .15s}
.rp-controls button svg{width:22px;height:22px}
.rp-controls button:active:not(:disabled){transform:scale(.92);box-shadow:var(--inset-sm)}
.rp-controls .rp-play{width:64px;height:64px;color:#fff;background:linear-gradient(145deg,var(--accent-2),var(--accent))}
.rp-controls .rp-play svg{width:28px;height:28px}
.rp-vol{display:flex;align-items:center;gap:10px;color:var(--muted)}
.rp-vol svg{width:20px;height:20px}
.rp-vol input{flex:1;accent-color:var(--accent);min-height:32px}
.rp-stations{display:grid;gap:8px}
.rp-station{display:flex;align-items:center;gap:10px;text-align:left;border:0;border-radius:14px;padding:8px 10px;min-height:44px;background:var(--bg);box-shadow:var(--raise-xs);color:var(--ink)}
.rp-station strong{display:block;font-size:13px}
.rp-station small{display:block;font-size:11px;color:var(--muted);line-height:1.3}
.rp-station.on{box-shadow:var(--inset-sm),inset 3px 0 0 var(--tint)}
.rp-dot{width:12px;height:12px;border-radius:50%;background:var(--tint);flex-shrink:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--tint) 30%,transparent)}
.rp-vol-note{margin:0;font-size:12px;color:var(--muted);text-align:center}
.rp-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--muted)}
.rp-style{border:0;border-radius:999px;padding:7px 12px;min-height:36px;background:var(--bg);box-shadow:var(--raise-xs);color:var(--accent);font-weight:800;font-size:12px;flex-shrink:0}
.rp-style:active{box-shadow:var(--inset-sm)}
@media(max-width:780px){.radio-pet{width:72px;height:66px}.radio-panel{gap:10px;padding:14px}.rp-stations{grid-template-columns:1fr 1fr;gap:6px}.rp-station{padding:6px 8px;min-height:40px}.rp-station small{display:none}.rp-station strong{font-size:12px;line-height:1.2}.rp-head small{display:none}.rp-controls button{width:46px;height:46px}.rp-controls .rp-play{width:58px;height:58px}}
@media print{.radio-pet,.radio-panel{display:none!important}}

@keyframes petFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes petShadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.8);opacity:.6}}
@keyframes petDance{0%,100%{transform:translateY(0) rotate(-6deg) scale(1,1)}25%{transform:translateY(-6px) rotate(0) scale(.97,1.04)}50%{transform:translateY(0) rotate(6deg) scale(1.03,.97)}75%{transform:translateY(-6px) rotate(0) scale(.97,1.04)}}
@keyframes petPop{0%{transform:scale(.85)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes gillWaveL{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
@keyframes gillWaveR{0%,100%{transform:rotate(0)}50%{transform:rotate(7deg)}}
@keyframes tailSway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(9deg)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes waveArm{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
@keyframes noteUp{0%{opacity:0;transform:translate(-50%,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-70px) scale(1.15) rotate(12deg)}}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
@media(prefers-reduced-motion:reduce){.pet-bob,.pet-shadow,.axo-gills-l,.axo-gills-r,.axo-tail,.axo-eyes .eye,.axo-arm-l,.axo-arm-r,.rp-eq span,.radio-pet::before,.pet-fruit,.pet-crop{animation:none!important;transition:none!important}.radio-pet.dragging::before{display:none}.radio-pet.landing .pet-bob,.radio-pet.timer-complete .pet-bob,.radio-pet.timer-stopped .pet-bob{animation:none!important}.pet-radial-menu{animation:none!important}}
.radio-panel{max-width:calc(100vw - 24px)}
/* Source tabs and your own Spotify / YouTube playlist */
.rp-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;box-shadow:var(--inset-sm)}
.rp-tabs button{border:0;border-radius:10px;background:transparent;font-weight:800;font-size:12.5px;color:var(--muted);min-height:38px}
.rp-tabs button.on{background:var(--bg);box-shadow:var(--raise-xs);color:var(--accent)}
.rp-link{display:flex;gap:8px;align-items:flex-end}
.rp-link-field{display:grid;gap:4px;flex:1;min-width:0;font-size:12px;font-weight:800;color:var(--muted)}
.rp-link-field input{width:100%;min-height:44px;border:0;border-radius:12px;padding:10px 12px;background:var(--bg);box-shadow:var(--inset-sm);color:var(--ink);font-size:14px}
.rp-load{border:0;border-radius:12px;min-height:44px;padding:0 16px;font-weight:800;color:var(--on-accent);background:linear-gradient(145deg,var(--accent-2),var(--accent));box-shadow:var(--raise-xs)}
.rp-link-status{margin:0;font-size:12px;color:var(--coral);min-height:0}
.rp-link-status:empty{display:none}
.rp-now-ext{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;box-shadow:var(--inset-sm)}
.rp-now-ext strong{font-size:13.5px;flex:1;min-width:0}
.rp-ext-actions{display:flex;gap:6px}
.rp-ext-actions button,.rp-recent button{border:0;border-radius:10px;padding:6px 10px;min-height:36px;background:var(--bg);box-shadow:var(--raise-xs);font-weight:700;font-size:12.5px;color:var(--ink)}
.rp-recent{display:grid;gap:6px}
.rp-recent-row{display:flex;gap:6px;align-items:stretch}
.rp-recent-row [data-playlist-index]{flex:1;min-width:0;display:flex;align-items:center;gap:8px;text-align:left}
.rp-recent-row [data-playlist-index] span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-recent .rp-recent-x{width:36px;padding:0;flex-shrink:0;display:grid;place-items:center;color:var(--muted)}
.rp-recent .rp-recent-x svg{width:14px;height:14px}
.rp-recent .rp-recent-x:hover{color:var(--ink)}
.rp-recent small{font-size:11px;font-weight:800;color:var(--muted)}
.rp-recent button{display:flex;align-items:center;gap:8px;text-align:left}
.rp-badge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:900;letter-spacing:.3px;padding:2px 8px;border-radius:99px;color:#fff;flex-shrink:0}
.rp-badge.spotify{background:#1db954}.rp-badge.youtube{background:#e62117}
.rp-note{margin:0;font-size:11.5px;color:var(--muted);line-height:1.45}
/* Your own playlist: the YouTube or podcast player is laid over the panel's video slot while the panel is open,
   and parked off screen (still playing) when it is closed. */
.rp-video{aspect-ratio:16/9;flex-shrink:0;border-radius:14px;background:#000;box-shadow:var(--inset-sm)}
.rp-video.podcast{aspect-ratio:auto;height:152px}
.lotl-embed{position:fixed;left:-10000px;top:0;width:320px;height:180px;z-index:84;border-radius:14px;overflow:hidden;background:#000;pointer-events:none}
.lotl-embed.docked{left:var(--x);top:var(--y);width:var(--w);height:var(--h);pointer-events:auto}
.lotl-embed iframe,.lotl-embed #lotlYt{display:block;width:100%;height:100%;border:0}
/* Lotl's emotes */
.pet-emote{position:absolute;left:50%;top:-6px;width:24px;height:24px;margin-left:-12px;pointer-events:none;animation:emoteUp 1.8s ease-out forwards}
.pet-emote svg{width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
@keyframes emoteUp{0%{opacity:0;transform:translateY(6px) scale(.4)}20%{opacity:1;transform:translateY(-6px) scale(1.15)}100%{opacity:0;transform:translateY(-44px) scale(1)}}
.pet-bubble{width:max-content;max-width:min(260px,70vw);white-space:normal!important;line-height:1.35;bottom:calc(100% + 42px)!important}
/* Options Lotl ruled out */
.q-option.is-eliminated,.match-option.is-eliminated{opacity:.42;text-decoration:line-through;text-decoration-thickness:2px;filter:grayscale(.6)}
@media(prefers-reduced-motion:reduce){.pet-emote{animation:none;display:none}}
/* Gestures, reactions, drag and state motion are drawn by AXOLOTL.motion in axolotl.js (see docs/lotl-animation-review.md). */

/* Speech stays attached to Lotl instead of floating above the emote icon. */
.pet-bubble{bottom:auto!important;animation:none;max-width:min(260px,calc(100vw - 16px));border-radius:14px;line-height:1.45;z-index:3}
.pet-bubble::after{content:"";position:absolute;left:var(--bubble-tail-x,50%);width:12px;height:12px;margin-left:-6px;background:var(--bg);transform:rotate(45deg);border-right:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.pet-bubble[data-placement="above"]::after{bottom:-7px}
.pet-bubble[data-placement="below"]::after{top:-7px;transform:rotate(225deg)}
/* Speech sits beside Lotl, tail pointing at it. */
.pet-bubble[data-placement="left"]::after,.pet-bubble[data-placement="right"]::after{left:auto;top:var(--bubble-tail-y,50%);margin:-6px 0 0}
.pet-bubble[data-placement="left"]::after{right:-7px;transform:rotate(-45deg)}
.pet-bubble[data-placement="right"]::after{left:-7px;transform:rotate(135deg)}
/* Emote icons rise beside Lotl, on the speech side, so they never cover the timer above its head. */
.radio-pet .pet-emote{top:8px;margin:0;left:calc(100% + 4px)}
.radio-pet[data-bubble="left"] .pet-emote{left:auto;right:calc(100% + 4px)}
.radio-pet:has(.pet-bubble:not([hidden])) .pet-emote{display:none}

/* ---------- Quick buttons: two round icon buttons that spring out of Lotl ---------- */
.pet-radial-menu{position:fixed;z-index:85;width:50px;height:110px;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.pet-radial-option{position:absolute;left:0;top:calc(var(--oy,0)*1px);display:grid;place-items:center;width:50px;height:50px;padding:0;border:0;border-radius:50%;background:var(--bg);color:var(--accent);box-shadow:0 8px 20px rgba(0,0,0,.25),var(--raise-xs);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;animation:petBtnPop .42s cubic-bezier(.34,1.56,.64,1) var(--dl,0s) both}
.pet-radial-option svg{width:27px;height:27px;pointer-events:none}
.pet-radial-option:hover{filter:brightness(1.06)}
.pet-radial-option:active{transform:scale(.92);animation:none}
.pet-radial-option:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.pet-radial-option[data-running="true"]::after{content:"";position:absolute;right:3px;top:3px;width:11px;height:11px;border-radius:50%;background:#3fbf6a;border:2px solid var(--bg)}
@keyframes petBtnPop{0%{transform:translate(var(--fx,0),var(--fy,0)) scale(.15);opacity:0}100%{transform:translate(0,0) scale(1);opacity:1}}
/* ---------- Lotl's motion: AXOLOTL.motion owns every part of a .lotl-live SVG, so no stylesheet may animate or transform them. ---------- */
.lotl-live :is(.axo-rig,.axo-body,.axo-tail,.ga-tail,.axo-leg-l,.axo-leg-r,.axo-neck,.axo-head,.axo-gills-l,.axo-gills-r,.gill,.axo-eyes,.eye,.eye-ball,.eye-arc,.axo-mouth,.mo,.axo-cheek,.axo-arms,.ga-arm-l,.ga-arm-r,.axo-arm-l,.axo-arm-r,.axo-phones,.fx){animation:none!important;transition:none!important;rotate:none!important;translate:none!important;scale:none!important}
.radio-pet .pet-bob,.radio-pet .pet-shadow{animation:none!important}
.radio-pet .pet-shadow{transform-origin:50% 50%}
.item-axo .axo{overflow:visible}
/* Wind: streaks spawn behind Lotl along the drag direction, drift back and fade (radio.js). */
.pet-wind{position:absolute;left:0;top:0;width:0;height:0;z-index:-1;pointer-events:none}
.pet-wind i{position:absolute;left:0;top:0;height:2.6px;margin-top:-1.3px;border-radius:2px;opacity:0;transform-origin:100% 50%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--tint) 45%,#fff) 70%,#fff);box-shadow:0 0 3px color-mix(in srgb,var(--tint) 40%,transparent);will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.pet-wind{display:none}.pet-radial-option{animation:none!important}}