/* ====== THEME ====== */
:root{
  --bg1:#0b0612;
  --bg2:#12081f;
  --panel:#1a0f2a;
  --panel2:#12081f;
  --stroke:#4c3568;
  --stroke2:#2b1a3a;
  --text:#e9ddff;
  --muted:#cbb3ff;
  --glow:#b48cff;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  font: 14px/1.35 system-ui, sans-serif;

  background:
    url("assets/background.png") center top no-repeat fixed,
    linear-gradient(180deg, #12081f, #0b0612);

  background-size: cover;
}

/* center the "window" */
.window{
  width:min(980px, 94vw);
  margin:28px auto;
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(30,16,45,.92), rgba(12,6,18,.92));
  box-shadow: 0 14px 60px rgba(0,0,0,.55);
  border-radius: 16px;
  overflow:hidden;
}

/* fake browser top bar */
.topbar{
  padding:10px 12px;
  background: linear-gradient(180deg, rgba(80,56,115,.65), rgba(40,25,60,.65));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
}
.dot{
  width:10px; height:10px; border-radius:50%;
  background: rgba(255,255,255,.25);
}
.url{
  opacity:.9;
  font-size:12px;
}

/* header image area */
.hero{
  position:relative;
  height:220px;
  background: rgba(0,0,0,.15);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.05) contrast(1.05);
}
.scanlines{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.0) 0px,
      rgba(0,0,0,.0) 2px,
      rgba(0,0,0,.15) 3px,
      rgba(0,0,0,.15) 4px
    );
  mix-blend-mode:multiply;
  pointer-events:none;
}

/* icon navigation */
.iconnav{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:14px 14px 10px;
  background: linear-gradient(180deg, rgba(25,12,40,.9), rgba(20,10,30,.9));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.navbtn{
  width:100%;
  text-decoration:none;
  color:var(--text);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:6px 4px;
  border-radius:12px;
  border:1px solid transparent;
}
.navbtn img{
  width:48px;
  height:48px;
  object-fit:contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.45));
}
.navbtn span{
  font-size:12px;
  opacity:.95;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.navbtn:hover{
  border-color: rgba(180,140,255,.35);
  background: rgba(180,140,255,.08);
}

/* main 3-col layout */
.grid{
  display:grid;
  grid-template-columns: 1.05fr 1.2fr 0.95fr;
  gap:14px;
  padding:14px;
}

/* columns stack panels */
.col{ display:flex; flex-direction:column; gap:14px; }

/* panels */
.panel{
  background: linear-gradient(180deg, rgba(26,15,42,.92), rgba(16,9,28,.92));
  border:1px solid rgba(180,140,255,.25);
  border-radius:14px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.panel-title{
  margin:0;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  letter-spacing:.2px;
  background: linear-gradient(180deg, rgba(90,60,125,.45), rgba(40,24,60,.25));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.chev{
  background: rgba(0,0,0,.25);
  color: var(--text);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  padding:2px 8px;
  font-size:12px;
  opacity:.9;
}
.panel-inner{ padding:12px; }
.panel-inner p{ margin:0 0 8px; }
.panel-inner p:last-child{ margin-bottom:0; }

.mini{ font-size:12px; opacity:.85; }

/* left featured box */
.panel-art .featured{
  width:100%;
  border-radius:12px;
  display:block;
  border:1px solid rgba(255,255,255,.10);
}
.statusline{
  margin-top:10px;
  font-size:12px;
  opacity:.9;
  display:flex; align-items:center; gap:8px;
}
.badge{ color:#a8ffb5; text-shadow:0 0 10px rgba(168,255,181,.4); }

/* profile links */
.linky{
  list-style:none;
  padding:0;
  margin:0 0 10px;
}
.linky a{
  color:var(--muted);
  text-decoration:none;
}
.linky a:hover{ text-decoration:underline; }

/* icon box */
.iconbox{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
}
.iconbox img{
  width:26px; height:26px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}

/* center wide image */
.wide{
  width:100%;
  height:90px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  margin-top:10px;
}

/* schedule table */
.schedule{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
}
.schedule th, .schedule td{
  padding:8px 10px;
  font-size:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.schedule tr:last-child th,
.schedule tr:last-child td{ border-bottom:none; }
.schedule th{
  width:58px;
  color:var(--muted);
  background: rgba(180,140,255,.08);
}

/* latest art */
.latestart img{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  display:block;
}

/* music player */
.player{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.nowplaying{
  font-size:12px;
  opacity:.9;
  padding:6px 8px;
  border-radius:10px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
}
audio{
  width:100%;
  filter: saturate(1.1);
}

/* footer */
.footer{
  padding:12px 14px;
  font-size:12px;
  opacity:.85;
  border-top:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
}

/* responsive */
@media (max-width: 860px){
  .iconnav{ flex-wrap:wrap; justify-content:center; }
  .navbtn{ width: 120px; }
  .grid{ grid-template-columns: 1fr; }
}

.panel-art img.featured{
  transition: box-shadow 0.2s ease, transform 0.1s ease !important;
}

.panel-art img.featured:hover{
  box-shadow: 0 0 18px rgba(180,140,255,.45) !important;
}

.panel-art img.featured:active{
  transform: scale(0.97) !important;
}

.page-doll{
  position: fixed;
  left: max(12px, calc(50% - 790px)); /* hugs the window */
  bottom: 40px;

  width: 220px;       /* adjust to taste */
  height: auto;

  pointer-events: none; /* does not block clicks */
  z-index: 5;

  filter: drop-shadow(0 14px 30px rgba(0,0,0,.55));
}

/* Hide on small screens */
@media (max-width: 1100px){
  .page-doll{
    display:none;
  }
}