/* ===================================================
   ON ROTATION — shared styles
   used by index.html + every section page
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Caveat:wght@600;700&display=swap');

:root{
  --bg: #000000;
  --panel: #0c0c0c;
  --line: #2a2a2a;
  --ink: #f2f2f2;
  --muted: #a9a9a9;

  --pink: #ff5fc4;
  --pink-soft: #ffb3e6;
  --purple: #b39dff;
  --lilac: #d9c8ff;
  --cyan: #6fe3ff;
  --gold: #ffd35c;

  --window-bg: #ece7f0;   /* light "desktop window" panels like WHAT'S NEW / UPDATES */
  --window-ink: #211c2b;
  --window-muted: #6a6377;

  --leopard-base: #c9a876;
  --leopard-spot: #2b1c12;
}

*{ box-sizing: border-box; }

html, body{ margin:0; padding:0; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  position: relative;
  min-height: 100vh;
}

a{ color: var(--purple); text-decoration: none; }
a:hover{ color: var(--pink); text-decoration: underline; }

/* ---------- twinkling star backdrop ---------- */
.stars{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, #fff 100%, transparent),
    radial-gradient(1px 1px at 80% 10%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 60% 70%, #fff 100%, transparent),
    radial-gradient(1px 1px at 30% 85%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 90% 60%, #ffd6f5 100%, transparent),
    radial-gradient(1px 1px at 45% 40%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 15% 65%, #d6c8ff 100%, transparent),
    radial-gradient(1px 1px at 70% 90%, #fff 100%, transparent);
  background-repeat: repeat;
  background-size: 340px 340px;
  opacity: 0.9;
  animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle{ 0%{ opacity:.55; } 100%{ opacity:1; } }

/* ---------- glitter display text ---------- */
.glitter-text{
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  background:
    radial-gradient(circle at 15% 25%, #fff 0 1px, transparent 1.6px) 0 0/14px 14px,
    radial-gradient(circle at 65% 60%, #ffd6f5 0 1px, transparent 1.6px) 0 0/18px 18px,
    linear-gradient(155deg, #ffffff 0%, #e7d9ff 45%, #b9a6e6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 0.01em;
}

.script{
  font-family: 'Caveat', cursive;
  font-weight: 700;
}

/* ---------- page shell ---------- */
.page{
  position: relative; z-index: 1;
  max-width: 1280px; margin: 0 auto;
  padding: 18px 20px 60px;
  display: grid;
  grid-template-columns: 210px 1fr 230px;
  grid-template-areas:
    "left banner right"
    "left navbar right"
    "left main   right";
  gap: 16px;
}

@media (max-width: 900px){
  .page{
    display: flex; flex-direction: column;
    padding: 14px 14px 50px;
  }
  .banner{ order: 1; }
  .navbar{ order: 2; }
  .main{ order: 3; }
  .sidebar-left{ order: 4; }
  .sidebar-right{ order: 5; }
}

/* ---------- back link (section pages) ---------- */
.back-link{
  grid-column: 1 / -1;
  font-size: 11px; letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 4px;
}
.back-link a{ color: var(--pink); }

/* ---------- banner / header ---------- */
.banner{ grid-area: banner; text-align: center; padding: 10px 0 4px; }
.banner-eyebrow{
  color: var(--pink-soft);
  font-size: 22px;
  margin-bottom: 4px;
  text-shadow: 0 0 10px rgba(255,95,196,0.5);
}
.banner-main{ display:flex; align-items:flex-end; justify-content:center; gap:10px; flex-wrap:wrap; }
.banner-prefix{ font-family:'Caveat', cursive; font-size: 30px; color: var(--muted); margin-bottom: 14px; }
.site-title{
  font-size: clamp(46px, 9vw, 96px);
  line-height: 0.9;
  margin: 0;
}
.banner-suffix{ font-family:'Caveat', cursive; font-size: 36px; color: var(--pink); margin-bottom: 10px; }
.tagline{
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.03em;
  margin-top: 6px;
}

/* ---------- nav bar ---------- */
.navbar{
  grid-area: navbar;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 640px){ .navbar{ grid-template-columns: repeat(2, 1fr); } }

.nav-tile{
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease;
}
.nav-tile:hover{ transform: translateY(-3px); border-color: var(--pink); text-decoration:none; }
.nav-swatch{
  height: 76px;
  display:flex; align-items:center; justify-content:center;
  font-size: 26px; color: rgba(255,255,255,0.85);
}
.nav-label{
  text-align:center; padding: 7px 4px;
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--gold);
  background: #000;
}

/* nav swatch color variants */
.ns-1{ background: radial-gradient(circle at 40% 30%, #4a2b52, #1a0e1e); }
.ns-2{ background: radial-gradient(circle at 40% 30%, #1c3a4a, #0c1620); }
.ns-3{ background: radial-gradient(circle at 40% 30%, #4a1c34, #1c0a14); }
.ns-4{ background: radial-gradient(circle at 40% 30%, #2a2a2a, #0c0c0c); }
.ns-5{ background: radial-gradient(circle at 40% 30%, #3a1c4a, #12081a); }
.ns-6{ background: radial-gradient(circle at 40% 30%, #4a3a1c, #1a1208); }
.ns-7{ background: radial-gradient(circle at 40% 30%, #1c4a3a, #081a12); }
.ns-8{ background: radial-gradient(circle at 40% 30%, #2c2c3a, #0a0a12); }

/* ---------- sidebars ---------- */
.sidebar-left{ grid-area: left; display:flex; flex-direction:column; gap: 16px; }
.sidebar-right{ grid-area: right; display:flex; flex-direction:column; gap: 16px; }

.widget{
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
}
.widget-title{
  font-size: 11px; letter-spacing: 0.08em; font-weight: bold;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.widget-body{ padding: 10px 12px 14px; }

.widget.friends .widget-title{ color: var(--cyan); }
.widget.currently .widget-title{ color: var(--pink); font-family:'Caveat',cursive; font-size:18px; }
.widget.coollinks .widget-title{ color: var(--purple); }
.widget.comment .widget-title{ color: var(--pink); }
.widget.nowplaying .widget-title{ color: var(--purple); }
.widget.siteinfo .widget-title{ color: var(--muted); }

.friend-list, .link-list{ list-style: none; margin:0; padding:0; }
.friend-list li{ padding: 2px 0; font-size: 12px; }
.friend-list li::before{ content:"• "; color: var(--muted); }
.link-list li{ padding: 2px 0; font-size: 12px; }
.link-list li::before{ content:"★ "; color: var(--purple); font-size: 10px; }
.view-all{ display:block; margin-top: 6px; font-size: 11px; }

.currently-list{ list-style:none; margin:0; padding:0; }
.currently-list li{ margin-bottom: 10px; font-size: 12px; }
.currently-list b{ display:block; color: var(--pink-soft); font-size: 11px; letter-spacing:0.04em; }

.comment-body{ text-align:center; padding: 18px 12px; }
.lips{ font-size: 40px; filter: drop-shadow(0 0 8px rgba(255,95,196,0.6)); }
.comment-cta{
  display:inline-block; margin-top: 10px; font-size: 11px;
  border: 1px solid var(--pink); color: var(--pink);
  padding: 6px 14px; border-radius: 999px;
}
.comment-cta:hover{ background: var(--pink); color:#000; text-decoration:none; }

.np-track{ font-family:'Anton', sans-serif; font-size: 20px; letter-spacing: 0.01em; }
.np-artist{ color: var(--muted); font-size: 12px; }
.np-bar{ height: 3px; background: var(--line); border-radius: 3px; margin: 12px 0 8px; position:relative; }
.np-bar::after{ content:""; position:absolute; left:0; top:-3px; width:9px; height:9px; border-radius:50%; background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.np-controls{ display:flex; gap:8px; font-size: 13px; color: var(--muted); }

.odometer{ display:flex; gap:3px; margin: 8px 0; }
.odometer span{
  background:#000; color: #7CFF6B; border:1px solid var(--line);
  font-family: monospace; font-weight:bold; font-size: 16px;
  padding: 4px 3px; width: 20px; text-align:center; border-radius:2px;
}
.credit{
  text-align:center; font-size: 11px; color: var(--muted); padding: 10px 4px;
}
.credit b{ color: var(--pink-soft); font-family:'Caveat',cursive; font-size: 15px; }

/* ---------- main / brain panel ---------- */
.main{ grid-area: main; display:flex; flex-direction:column; gap: 20px; padding-top: 8px; }

.brain-panel{
  position: relative;
  border: 10px solid;
  border-image: repeating-radial-gradient(circle at 20% 30%, var(--leopard-spot) 0 5px, var(--leopard-base) 6px 22px) 10;
  background: #000;
  padding: 34px 30px;
  display: flex; align-items:center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.brain-text{ max-width: 460px; }
.brain-text h2{
  font-family:'Anton', sans-serif; font-weight:400; font-size: 34px;
  color: var(--pink); margin: 0 0 14px;
}
.brain-text p{ font-size: 16px; color: var(--ink); margin: 0 0 14px; }
.brain-sign{ font-family:'Caveat', cursive; font-size: 26px; color: var(--muted); }

.polaroid{
  background: #fff; padding: 10px 10px 34px; width: 190px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.5);
  transform: rotate(3deg);
  position: relative;
}
.polaroid .shot{ height: 140px; background: linear-gradient(200deg, #ff9d5c 0%, #7a4fae 55%, #1c1440 100%); }
.polaroid .cap{ font-family:'Caveat', cursive; color:#333; text-align:center; margin-top: 8px; font-size: 16px; }
.tape{
  position:absolute; top:-14px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 60px; height: 22px; background: rgba(255,182,224,0.75);
}

/* ---------- windows: what's new / updates ---------- */
.content-row{ display:grid; grid-template-columns: 2.4fr 1fr; gap: 16px; }
@media (max-width: 720px){ .content-row{ grid-template-columns: 1fr; } }

.window{ border-radius: 4px; overflow:hidden; border: 1px solid var(--line); }
.window-bar{
  padding: 7px 12px; font-size: 12px; font-weight:bold; letter-spacing:0.05em;
  color: #fff; display:flex; justify-content:space-between; align-items:center;
}
.window-bar .x{ opacity:0.8; cursor:default; }
.window.whatsnew .window-bar{ background: linear-gradient(90deg, #8b6fd6, #6f5ab3); }
.window.updates .window-bar{ background: linear-gradient(90deg, #ff5fa8, #d6478c); }
.window-content{ background: var(--window-bg); color: var(--window-ink); padding: 16px; }

.new-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 620px){ .new-grid{ grid-template-columns: repeat(2, 1fr); } }
.new-item .thumb{ height: 90px; border-radius: 3px; margin-bottom: 8px; }
.new-item .star{ color: var(--purple); font-size: 12px; }
.new-item .t{ font-weight:bold; font-size: 12px; margin: 4px 0 3px; }
.new-item .d{ color: var(--window-muted); font-size: 11px; margin-bottom: 6px; }
.new-item .go{ font-size: 11px; }

.tn-1{ background: linear-gradient(160deg, #f6c6a0, #b3866b); }
.tn-2{ background: linear-gradient(160deg, #f2a6c9, #8a5a86); }
.tn-3{ background: linear-gradient(160deg, #9fd1e0, #4a7a8a); }
.tn-4{ background: linear-gradient(160deg, #e8e8e8, #a9a9a9); }

.updates-list{ list-style:none; margin:0; padding:0; }
.updates-list li{ padding: 6px 0; border-bottom: 1px dashed #cfc7d8; font-size: 12px; }
.updates-list li:last-child{ border-bottom:none; }
.updates-list li::before{ content:"+ "; color: #d6478c; font-weight:bold; }
.updates-check{ display:inline-block; margin-top: 10px; font-size: 11px; color:#8a5a86; }

/* ---------- generic section placeholder page ---------- */
.stub-body{
  grid-area: main;
  text-align:center;
  padding: 60px 20px;
  border: 1px dashed var(--line);
  border-radius: 6px;
}
.stub-body h2{ font-family:'Anton', sans-serif; font-size: 48px; color: var(--pink-soft); margin: 0 0 10px; }
.stub-body p{ color: var(--muted); }

img::selection {
    color: #baea35;
    background-color: transparent;
}

* {
    cursor: url(https://cur.cursors-4u.net/nature/nat-9/nat839.cur), auto;
    scrollbar-color: transparent transparent;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none;  /* internet explorer 10+ */
}