/* Animal Nations — Simple Player (v1.3 FIX)
   Restores the FULL player + adds hero logo above (80% player width).
   NO JS changes.
*/

:root{
  --bg1:#0b0f14;
  --bg2:#05070a;
  --stroke: rgba(255,255,255,.08);
  --txt:#e9eef7;
  --muted:rgba(233,238,247,.72);
  --led:#35d6ff;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--txt);
  background: radial-gradient(1200px 900px at 50% 20%, #1a2634 0%, var(--bg1) 38%, var(--bg2) 100%);
}

.wrap{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:22px;
  gap:14px;
}

/* HERO LOGO ABOVE (80% of player width) */
.heroLogo{
  display:block;
  width: calc(min(460px, 92vw) * 0.80);
  max-width: 80vw;
  text-decoration:none;
}
.heroLogo img{
  width:100%;
  height:auto;
  display:block;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.50));
}

/* PLAYER */
.player{
  width:min(460px, 92vw);
  border-radius:22px;
  background: linear-gradient(180deg, rgba(18,30,44,.92), rgba(9,14,20,.92));
  border:1px solid var(--stroke);
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

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

/* Logo badge (taller than old AN box) */
.logoLink{
  width:44px;
  height:58px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background: rgba(53,214,255,.10);
  border:1px solid rgba(53,214,255,.22);
  box-shadow: inset 0 0 18px rgba(53,214,255,.10);
  text-decoration:none;
  flex:0 0 auto;
}
.logoLink:hover{
  border-color: rgba(53,214,255,.35);
  box-shadow: inset 0 0 22px rgba(53,214,255,.14);
}
.logoLink:focus-visible{
  outline:2px solid rgba(53,214,255,.9);
  outline-offset:2px;
}
.logoImg{
  width:34px;
  height:auto;
  display:block;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.30));
}

.titles .h1{ font-weight:800; letter-spacing:.02em; }
.titles .h2{ font-size:12px; opacity:.75; margin-top:1px; }

.site{
  font-size:12px;
  color:var(--muted);
  text-decoration:none;
  padding:6px 10px;
  border:1px solid var(--stroke);
  border-radius:999px;
}
.site:hover{ border-color: rgba(53,214,255,.25); color: var(--txt); }

.led{
  border-radius:18px;
  padding:12px 12px 10px;
  background: linear-gradient(180deg, rgba(4,20,26,.88), rgba(2,12,16,.88));
  border:1px solid rgba(120,210,235,.18);
  box-shadow: inset 0 0 22px rgba(53,214,255,.15);
}
.led-label{
  font-size:11px;
  letter-spacing:.25em;
  opacity:.75;
}
.led-text{
  margin-top:6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:16px;
  color: var(--led);
  text-shadow: 0 0 12px rgba(53,214,255,.35);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.led-sub{
  margin-top:4px;
  font-size:12px;
  opacity:.7;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.controls{
  display:grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap:10px;
}
.btn{
  height:46px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(20,32,46,.9), rgba(10,16,24,.9));
  color:var(--txt);
  font-size:18px;
  cursor:pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{ outline:2px solid rgba(53,214,255,.9); outline-offset:2px; }

.btn.primary{
  font-size:20px;
  font-weight:800;
  border-color: rgba(53,214,255,.25);
  background: linear-gradient(180deg, rgba(53,214,255,.20), rgba(18,130,160,.18));
}

.seekrow{
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  align-items:center;
  gap:10px;
}
.time{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; opacity:.8; text-align:center; }
.seek{ width:100%; }

.minor{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:2px;
}
.volrow{ display:flex; align-items:center; gap:10px; }
.lab{ font-size:12px; opacity:.8; width:34px; }
.vol{ width:100%; }

.opts{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.chk{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  opacity:.85;
  border:1px solid var(--stroke);
  border-radius:999px;
  padding:6px 10px;
}

.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:4px;
}
.hint{ font-size:12px; opacity:.7; }
.link{
  border:none;
  background: transparent;
  color: rgba(53,214,255,.85);
  cursor:pointer;
  font-weight:700;
}
.link:hover{ color: var(--led); text-decoration: underline; }