/* ========== THEME ========== */
:root{
  --bg: #fff6fb;
  --paper: #ffffff;
  --ink: #2b2b2b;
  --side: #fff2d9;
  --accent: #ffb6da;    /* pink borders/buttons */
  --accent2: #ffd24d;   /* yellow for newsflash box */
  --btn: #ffd7e6;
  --btn-hover: #ff9ec5;
  --shadow: rgba(0,0,0,.12);
}

/* ========== BASE ========== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  color:var(--ink);
  font-family: "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
  background: var(--bg);
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 14px; background:#fff; border-bottom:4px solid var(--accent);
  position:sticky; top:0; z-index:10;
  box-shadow:0 2px 0 var(--accent);
}
.brand .logo-text{ font-family:"Press Start 2P", monospace; font-size:14px }

/* LAYOUT GRID */
.wrap{
  display:grid; grid-template-columns: 240px 1fr; gap:14px; padding:14px;
  min-height: calc(100vh - 46px);
}
.sidebar{
  background:var(--side);
  border:3px solid var(--accent);
  border-radius:10px;
  padding:12px;
  box-shadow:0 3px 0 var(--accent), 0 6px 12px var(--shadow) inset;
}
.content{
  background:var(--paper);
  border:3px solid var(--accent);
  border-radius:10px;
  padding:16px;
  box-shadow:0 3px 0 var(--accent), 0 6px 12px var(--shadow);
}

/* Sidebar blocks */
.profile-card{ display:grid; grid-template-columns:64px 1fr; gap:10px; align-items:center; margin-bottom:10px }
.avatar{ width:64px; height:64px;border:2px solid var(--accent) }
.status{ font-size:12px; line-height:1.2 }

/* Menu buttons */
.menu{ list-style:none; padding:0; margin:0 0 12px }
.btn{
  display:block; text-decoration:none; color:#222;
  background:var(--btn); border:2px solid var(--accent);
  border-radius:10px; padding:6px 10px; margin-bottom:8px;
  box-shadow:0 2px 0 var(--accent);
}
.btn:hover{ background:var(--btn-hover); color:#fff }

/* Newsflash = its own yellow box */
.newsflash{
  background:#fff; border:2px solid var(--accent2); border-radius:10px; margin-top:8px;
  box-shadow:0 2px 0 var(--accent2);
}
.nf-title{
  background:var(--accent2); padding:6px 10px; font-weight:bold; border-radius:8px 8px 0 0;
  text-transform: lowercase;
}
.nf-body{ padding:10px; min-height:20px; font-size:12px }

/* Clock line */
.clock{ margin-top:10px; font-family:"VT323", monospace; font-size:20px }

/* Content styles */
h1{
  font-family:"Press Start 2P", monospace;
  font-size:18px; margin:6px 0 12px;
}
.lead{ margin-top:0 }

.cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
}
/* Wide “one line a day” bar */
.cards .one-line{
  grid-column: 1 / -1;     /* span across the row */
  width: 50%;              /* stop ~15% into the second column */
  justify-self: start;     /* keep it aligned to the left */
}
.card{
  background:#fffdf9; border:2px solid #eab676; border-radius:10px; padding:12px;
  box-shadow:0 2px 0 #eab676;
}
.card h2{ margin:6px 0 8px; font-size:16px }
.embed .placeholder{
  width:100%; aspect-ratio:16/9; border:2px dashed #bbb; border-radius:8px;
  display:grid; place-items:center; font-family:"VT323", monospace; color:#777
}
.cta{ display:inline-block; margin-top:8px; text-decoration:none; background:#ffe9a8; border:2px solid #eab676; padding:4px 8px; border-radius:8px }
.cta:hover{ background:#ffd96b }

.bullets{ padding-left:16px }
.updates{ list-style:none; padding:0; margin:0 }
.updates li{ margin-bottom:6px }
.updates .date{ background:#eef; border:1px solid #99a; border-radius:6px; padding:1px 6px; margin-right:6px }

/* Footer */
.footer{ text-align:center; padding:12px; font-size:12px; color:#555 }

/* Mobile */
@media (max-width: 760px){
  .cards .one-line{
    width: 100%;
  }
}

/* ===== Sparkly cursor + star trail ===== */
/* actual cursor is a gold star */
body{
  cursor: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'>\
    <defs><filter id='g'><feGaussianBlur stdDeviation='0.6'/></filter></defs>\
    <polygon points='10,1 12.5,7 19,10 12.5,13 10,19 7.5,13 1,10 7.5,7' fill='%23ffd24d' filter='url(%23g)'/>\
    <polygon points='10,2 12,7 17,10 12,12.5 10,18 8,12.5 3,10 8,7' fill='%23ffbf00'/>\
  </svg>") 10 10, auto;
}

/* sparkle stars */
.sparkle {
  position: fixed;
  width: 5px;
  height: 5px;
  background: gold;
  border-radius: 50%;
  pointer-events: none;
  animation: sparkleFade 0.8s ease-out forwards;
  filter: drop-shadow(0 0 4px gold);
}
@keyframes sparkleFade {
  0% { transform: scale(1.2) translateY(0); opacity: 1; }
  100% { transform: scale(0) translateY(20px); opacity: 0; }
}