/* Animal Nations Radio - restored blue player + small logo + share button */

:root{
  --bg1:#06111d;
  --bg2:#12304d;
  --panel1:#102a45;
  --panel2:#071725;
  --cyan:#35d6ff;
  --cyan2:#7ee8ff;
  --text:#e7f8ff;
  --muted:#9fc5d3;
  --accent:#35d6ff;
  --accent2:#7ee8ff;
  --hot:#ff5570;
  --bodyGlow:rgba(53,214,255,.22);
  --bodyTop:#123a5d;
  --bodyMid:#071421;
  --bodyBottom:#03080d;
  --panelBorder:rgba(53,214,255,.28);
  --buttonTop:#173c5e;
  --buttonBottom:#0c2237;
  --primaryTop:#45ddff;
  --primaryBottom:#0c9ccc;
}

*{
  box-sizing:border-box;
}

html, body{
  margin:0;
  min-height:100%;
}

body{
  font-family:Arial, Helvetica, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top center, var(--bodyGlow), transparent 35%),
    linear-gradient(180deg, var(--bodyTop) 0%, var(--bodyMid) 65%, var(--bodyBottom) 100%);
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:34px 18px;
}

.wrap{
  width:100%;
  max-width:720px;
  margin:0 auto;
}

.projectTitle{
  text-align:center;
  color:var(--cyan2);
  font-size:1rem;
  margin:0 0 12px;
  letter-spacing:.3px;
}

/* PLAYER CARD */
.player{
  width:100%;
  background:linear-gradient(180deg, var(--panel1), var(--panel2));
  border:1px solid var(--panelBorder);
  border-radius:24px;
  padding:22px;
  box-shadow:
    0 18px 55px rgba(0,0,0,.52),
    inset 0 0 32px rgba(53,214,255,.08);
}

/* TOP HEADER */
.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
}

/* LOGO SIZE LOCK - prevents huge logo */
.logoLink{
  flex:0 0 auto;
  display:block;
  width:72px !important;
  max-width:72px !important;
  height:72px !important;
  max-height:72px !important;
  overflow:hidden;
}

.logoImg,
.logoLink img{
  display:block !important;
  width:72px !important;
  max-width:72px !important;
  height:72px !important;
  max-height:72px !important;
  object-fit:contain !important;
  margin:0 !important;
  padding:0 !important;
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 34%, transparent));
}

.titles{
  text-align:left;
  min-width:0;
}

.h1{
  font-size:1.6rem;
  line-height:1.05;
  font-weight:800;
  letter-spacing:.2px;
}

.h2{
  margin-top:4px;
  color:var(--muted);
  font-size:.95rem;
}

.site{
  color:var(--cyan2);
  text-decoration:none;
  font-size:.9rem;
  white-space:nowrap;
}

.site:hover{
  text-decoration:underline;
}


/* THEME SWITCHER - Phase 1 safe theme engine */
.themeSwitcher{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:-4px 0 18px;
  flex-wrap:wrap;
}

.themeBtn{
  border:1px solid rgba(126,232,255,.18);
  border-radius:999px;
  padding:9px 15px;
  background:rgba(12,34,55,.82);
  color:var(--text);
  cursor:pointer;
  font-weight:800;
  letter-spacing:.2px;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}

.themeBtn:hover{
  border-color:color-mix(in srgb, var(--accent2) 62%, transparent);
}

.themeBtn.active{
  background:linear-gradient(180deg, var(--primaryTop), var(--primaryBottom));
  color:#00131f;
  border-color:color-mix(in srgb, var(--accent2) 70%, transparent);
}

body.theme-fire{
  --cyan:#ffb347;
  --cyan2:#ffd37a;
  --text:#fff3df;
  --muted:#e8b87c;
  --accent:#ff8a1d;
  --accent2:#ffd37a;
  --hot:#ff3344;
  --bodyGlow:rgba(255,112,26,.25);
  --bodyTop:#4a1608;
  --bodyMid:#160907;
  --bodyBottom:#050202;
  --panel1:#3b170d;
  --panel2:#100604;
  --panelBorder:rgba(255,138,29,.34);
  --buttonTop:#6b2a12;
  --buttonBottom:#2b0d07;
  --primaryTop:#ffce55;
  --primaryBottom:#ff6b1a;
}

body.theme-fire .player{
  box-shadow:
    0 18px 55px rgba(0,0,0,.58),
    inset 0 0 34px rgba(255,126,32,.12),
    0 0 30px rgba(255,82,20,.10);
}

body.theme-fire .led{
  background:
    radial-gradient(circle at top left, rgba(255,171,53,.16), transparent 42%),
    #120503;
  border-color:rgba(255,161,47,.34);
  box-shadow:inset 0 0 24px rgba(255,108,26,.13);
}

body.theme-fire .shareSong,
body.theme-fire .navBtn.active{
  background:linear-gradient(180deg, #ffd45d, #ff6a1a);
  color:#1f0900;
}

body.theme-fire #fxCanvas{
  opacity:.50;
}

body.theme-aurora{
  color-scheme:dark;
}

/* NOW PLAYING LED */
.led{
  background:
    radial-gradient(circle at top left, rgba(53,214,255,.12), transparent 42%),
    #020a11;
  border:1px solid rgba(53,214,255,.30);
  border-radius:17px;
  padding:18px;
  margin-bottom:19px;
  box-shadow:inset 0 0 22px rgba(53,214,255,.10);
}

.led-label{
  color:var(--cyan);
  font-size:.73rem;
  font-weight:700;
  letter-spacing:2.2px;
  margin-bottom:8px;
}

.led-text{
  font-size:1.16rem;
  font-weight:800;
  margin-bottom:8px;
  overflow-wrap:anywhere;
}

.led-sub{
  color:var(--muted);
  font-size:.9rem;
}

/* CONTROLS */
.controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin:18px 0;
}

.btn{
  width:58px;
  height:58px;
  border:1px solid rgba(126,232,255,.18);
  border-radius:999px;
  background:linear-gradient(180deg, var(--buttonTop), var(--buttonBottom));
  color:white;
  font-size:1.22rem;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.26);
}

.btn:hover{
  border-color:rgba(126,232,255,.45);
}

.btn.primary{
  background:linear-gradient(180deg, var(--primaryTop), var(--primaryBottom));
  color:#00131f;
  font-weight:900;
}

/* SEEK / VOLUME */
.seekrow{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:18px;
}

.seek,
.vol{
  width:100%;
  accent-color:var(--accent);
}

.time,
.lab{
  color:var(--muted);
  font-size:.84rem;
  white-space:nowrap;
}

.minor{
  margin-bottom:17px;
}

.volrow{
  display:flex;
  align-items:center;
  gap:10px;
}

.options{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:18px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(12,34,55,.82);
  border:1px solid rgba(126,232,255,.14);
  border-radius:999px;
  padding:8px 12px;
  color:#d8f5ff;
  font-size:.84rem;
}

/* FOOTERS / SHARE */
.footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  border-top:1px solid rgba(126,232,255,.10);
  padding-top:13px;
  margin-top:13px;
}

.hint{
  color:var(--muted);
  font-size:.9rem;
  text-align:left;
}

.appActions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.link{
  border:1px solid rgba(126,232,255,.18);
  border-radius:999px;
  padding:9px 14px;
  background:#153750;
  color:#fff;
  cursor:pointer;
  text-decoration:none;
  font-size:.9rem;
}

.shareSong{
  border-color:rgba(53,214,255,.34);
  background:linear-gradient(180deg, rgba(53,214,255,.95), rgba(13,132,170,.95));
  color:#00131f;
  font-weight:800;
  white-space:nowrap;
}

.shareSong:hover,
.link:hover{
  border-color:rgba(126,232,255,.58);
}

/* Global image safety: never let images explode */
img{
  max-width:100%;
  height:auto;
}

audio{
  width:100%;
}

@media (max-width:640px){
  .themeSwitcher{ margin-top:0; }

  body{
    padding:22px 12px;
  }

  .player{
    padding:18px;
    border-radius:20px;
  }

  .top{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .brand{
    flex-direction:column;
  }

  .titles{
    text-align:center;
  }

  .site{
    font-size:.86rem;
  }

  .footer{
    justify-content:center;
    text-align:center;
  }

  .hint{
    text-align:center;
  }

  .appActions{
    justify-content:center;
  }
}

/* Phase 1 App Shell: app-only bottom navigation and views */
.appView{ display:none; }
.appView.active{ display:block; }

.bottomNav{
  display:flex;
  position:sticky;
  bottom:10px;
  z-index:10;
  margin:18px -6px -8px;
  padding:8px;
  gap:6px;
  background:rgba(2,10,17,.86);
  border:1px solid rgba(126,232,255,.18);
  border-radius:18px;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 28px rgba(0,0,0,.34);
}

body.app-shell .bottomNav{ display:flex; }
body.app-shell{ padding-bottom:16px; }

.navBtn{
  flex:1 1 0;
  border:1px solid rgba(126,232,255,.10);
  border-radius:14px;
  background:rgba(21,55,80,.62);
  color:var(--text);
  cursor:pointer;
  font-size:1.05rem;
  min-height:54px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
}

.navBtn span{ font-size:.68rem; color:var(--muted); }
.navBtn.active{
  background:linear-gradient(180deg, rgba(53,214,255,.95), rgba(13,132,170,.95));
  color:#00131f;
  font-weight:800;
}
.navBtn.active span{ color:#002235; }

.viewHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.viewTitle{
  color:var(--cyan2);
  font-size:1.25rem;
  font-weight:900;
  margin-bottom:4px;
}
.viewSub{ color:var(--muted); font-size:.92rem; margin-bottom:14px; }

.songList{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:56vh;
  overflow:auto;
  padding-right:4px;
}

.songItem{
  display:grid;
  grid-template-columns:54px 1fr auto;
  align-items:center;
  gap:11px;
  padding:10px;
  border:1px solid rgba(126,232,255,.12);
  border-radius:16px;
  background:rgba(2,10,17,.34);
}

.songThumb{
  width:54px;
  height:54px;
  border-radius:12px;
  object-fit:cover;
  background:#071725;
  border:1px solid rgba(126,232,255,.18);
}

.songMeta{ min-width:0; }
.songTitle{
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.songTags{ color:var(--muted); font-size:.78rem; margin-top:3px; }
.songActions{ display:flex; gap:6px; }
.iconBtn{
  border:1px solid rgba(126,232,255,.16);
  background:#153750;
  color:white;
  border-radius:999px;
  min-width:38px;
  height:38px;
  cursor:pointer;
}
.iconBtn.faved{ background:linear-gradient(180deg, #ff6aa2, #b71e5b); }

.btnWide{
  width:100%;
  border:1px solid rgba(53,214,255,.34);
  border-radius:16px;
  padding:14px 16px;
  cursor:pointer;
  font-size:1rem;
}
.infoCard{
  border:1px solid rgba(126,232,255,.12);
  border-radius:16px;
  background:rgba(2,10,17,.34);
  padding:14px;
  margin-bottom:10px;
  line-height:1.45;
}
.mutedCard{ color:var(--muted); }

@media (max-width:640px){
  .songItem{ grid-template-columns:48px 1fr auto; gap:9px; }
  .songThumb{ width:48px; height:48px; }
  .songActions{ flex-direction:column; }
  .iconBtn{ min-width:34px; height:34px; }
}


/* Phase 2 Favorites polish */
.favoriteBtn.active,
.iconBtn.faved{
  border-color:rgba(255,120,160,.55);
  color:#ffb7cb;
  box-shadow:0 0 14px rgba(255,120,160,.25);
}

.favoriteBtn{
  margin-right:8px;
}

.songItem{
  cursor:default;
}

.songActions .iconBtn{
  min-width:42px;
}

/* Phase 3 Visualizer Canvas Layer - safe non-breaking overlay */
.player{
  position:relative;
  overflow:hidden;
}

#fxCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
  opacity:.42;
}

.player > :not(#fxCanvas){
  position:relative;
  z-index:1;
}


/* Phase 2 Sacred Fire Full UI Conversion - non-breaking visual layer */
body.theme-fire .projectTitle,
body.theme-fire .viewTitle,
body.theme-fire .site{
  color:var(--cyan2);
  text-shadow:0 0 14px rgba(255,126,32,.20);
}

body.theme-fire .h1{
  color:#fff2d4;
  text-shadow:0 0 18px rgba(255,126,32,.22);
}

body.theme-fire .h2,
body.theme-fire .led-sub,
body.theme-fire .viewSub,
body.theme-fire .hint,
body.theme-fire .time,
body.theme-fire .lab,
body.theme-fire .songTags,
body.theme-fire .mutedCard{
  color:var(--muted);
}

body.theme-fire .footer{
  border-top-color:rgba(255,184,74,.18);
}

body.theme-fire .pill{
  background:linear-gradient(180deg, rgba(86,31,12,.86), rgba(38,12,6,.86));
  border-color:rgba(255,184,74,.22);
  color:#fff0d6;
  box-shadow:inset 0 0 14px rgba(255,94,20,.07);
}

body.theme-fire .link,
body.theme-fire .iconBtn{
  background:linear-gradient(180deg, rgba(91,32,12,.94), rgba(38,12,6,.94));
  border-color:rgba(255,184,74,.24);
  color:#fff2d8;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

body.theme-fire .link:hover,
body.theme-fire .iconBtn:hover,
body.theme-fire .btn:hover{
  border-color:rgba(255,216,108,.55);
  box-shadow:
    0 0 18px rgba(255,92,20,.18),
    0 6px 18px rgba(0,0,0,.28);
}

body.theme-fire .shareSong,
body.theme-fire .btnWide.shareSong{
  border-color:rgba(255,218,107,.45);
  background:linear-gradient(180deg, #ffd35d, #ff831f 52%, #cf310f);
  color:#1b0700;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
  box-shadow:
    0 0 20px rgba(255,102,26,.20),
    0 8px 20px rgba(0,0,0,.28);
}

body.theme-fire .bottomNav{
  background:
    radial-gradient(circle at top center, rgba(255,123,28,.18), transparent 55%),
    rgba(20,6,3,.92);
  border-color:rgba(255,184,74,.22);
  box-shadow:
    0 10px 28px rgba(0,0,0,.42),
    inset 0 0 24px rgba(255,78,18,.08);
}

body.theme-fire .navBtn{
  background:linear-gradient(180deg, rgba(83,29,12,.82), rgba(31,9,5,.82));
  border-color:rgba(255,184,74,.16);
  color:#fff2d8;
}

body.theme-fire .navBtn span{
  color:#e8b87c;
}

body.theme-fire .navBtn.active{
  background:linear-gradient(180deg, #ffd35d, #ff831f 52%, #cf310f);
  border-color:rgba(255,230,144,.45);
  color:#1b0700;
  box-shadow:
    0 0 18px rgba(255,99,24,.24),
    inset 0 0 12px rgba(255,255,255,.10);
}

body.theme-fire .navBtn.active span{
  color:#391000;
}

body.theme-fire .songItem,
body.theme-fire .infoCard{
  background:
    radial-gradient(circle at top left, rgba(255,119,25,.10), transparent 45%),
    rgba(24,7,4,.62);
  border-color:rgba(255,184,74,.18);
  box-shadow:inset 0 0 18px rgba(255,92,20,.045);
}

body.theme-fire .songThumb{
  background:#160604;
  border-color:rgba(255,184,74,.24);
  box-shadow:0 0 14px rgba(255,92,20,.10);
}

body.theme-fire .favoriteBtn.active,
body.theme-fire .iconBtn.faved{
  background:linear-gradient(180deg, #ffcf58, #ff4d22);
  border-color:rgba(255,230,144,.45);
  color:#240800;
  box-shadow:0 0 16px rgba(255,92,20,.30);
}

body.theme-fire .led-label{
  color:#ffca58;
  text-shadow:0 0 12px rgba(255,92,20,.35);
}

body.theme-fire .led-text{
  color:#fff0d2;
  text-shadow:
    0 0 12px rgba(255,128,32,.20),
    0 0 22px rgba(255,62,18,.12);
}

body.theme-fire .seek,
body.theme-fire .vol{
  accent-color:#ff8a1d;
}

body.theme-fire .themeSwitcher{
  border-radius:999px;
  filter:drop-shadow(0 0 12px rgba(255,92,20,.12));
}

body.theme-fire .themeBtn{
  background:linear-gradient(180deg, rgba(85,30,12,.86), rgba(34,10,5,.86));
  border-color:rgba(255,184,74,.20);
  color:#fff0d6;
}

body.theme-fire .themeBtn.active{
  background:linear-gradient(180deg, #ffd35d, #ff831f 52%, #cf310f);
  border-color:rgba(255,230,144,.48);
  color:#1b0700;
  box-shadow:0 0 18px rgba(255,92,20,.22);
}

body.theme-fire .player::before{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 20% 90%, rgba(255,62,18,.13), transparent 24%),
    radial-gradient(circle at 75% 15%, rgba(255,194,75,.10), transparent 26%),
    radial-gradient(circle at 55% 105%, rgba(255,116,28,.16), transparent 26%);
  opacity:.85;
  animation:sacredFireBreath 6s ease-in-out infinite;
}

body.theme-fire .player > :not(#fxCanvas){
  position:relative;
  z-index:1;
}

@keyframes sacredFireBreath{
  0%,100%{ opacity:.55; transform:scale(1); }
  50%{ opacity:.95; transform:scale(1.035); }
}