/* ===== BJ CASE • Y2K MAXI (skinny, glitter, leopard) ===== */
/* Neocities-safe: no CSS vars, no filters that hide images. */

/* RESET */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

/* REAL PINK GLITTER BACKGROUND (tiling) */
html{background:#000}
body{
  background-image:url("https://upload.wikimedia.org/wikipedia/commons/7/7f/Lovelight_Texture_No._1_Pink_Glitterific_%286133978688%29.jpg") !important;
  background-repeat:repeat !important;
  background-position:center top !important;
  background-attachment:fixed !important;
  background-size:600px !important; /* 400–800px = denser/softer glitter */
  color:#f7f4ff; font-family:Arial,Helvetica,sans-serif; line-height:1.55; letter-spacing:.005em;
}

/* LINKS */
a{color:#19c3ff;text-decoration:none}
a:hover{color:#ff7ec6;text-decoration:underline}

/* SKINNY WRAPPER */
.wrapper{max-width:820px;margin:24px auto 40px;padding:0 10px}

/* HEADER = REAL PURPLE LEOPARD */
.site-header{
  background-image:url("https://cdn.pixabay.com/photo/2020/10/25/17/13/leopard-5684599_1280.jpg");
  background-repeat:no-repeat;background-position:center;background-size:cover;
  border-radius:18px; border:3px solid #ff4da6; margin:0 auto 18px; padding:24px 12px 16px; text-align:center;
  box-shadow:0 0 24px rgba(255,77,166,.55),0 0 24px rgba(25,195,255,.25)
}
.site-header h1{
  font:700 36px/1 "Trebuchet MS",Tahoma,Verdana,Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 0 #000,0 0 10px #ff4da6,0 0 12px #19c3ff
}
.site-header .tagline{
  font:600 12px/1.2 "Trebuchet MS",Tahoma,Verdana,Arial,sans-serif; letter-spacing:.22em; color:#fff; margin-top:6px
}

/* NAV — JELLY + SPARKLE HOVER */
.top-nav{margin-top:12px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.top-nav a{
  position:relative; overflow:hidden;
  display:inline-block; padding:9px 16px; border-radius:18px;
  background:#0b0a14; color:#ffd1ea; border:2px solid #a45cff;
  font:700 12px/1 "Trebuchet MS",Tahoma,Verdana,Arial,sans-serif; text-transform:uppercase; letter-spacing:.08em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 10px rgba(0,0,0,.45),0 0 0 3px rgba(0,0,0,.2);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.top-nav a:before{
  /* sparkle sweep */
  content:""; position:absolute; top:0; left:-150%; width:150%; height:100%;
  background:linear-gradient(120deg, transparent 0 40%, rgba(255,255,255,.9) 50%, transparent 60% 100%);
  opacity:.65; transform:skewX(-20deg);
}
.top-nav a:hover{
  border-color:#ff4da6; color:#fff; transform:translateY(-2px);
  box-shadow:0 0 14px #ff4da6, 0 0 22px rgba(25,195,255,.35), inset 0 0 0 2px rgba(255,255,255,.15);
}
.top-nav a:hover:before{ animation:sweep .5s linear }
@keyframes sweep{ to{ left:120% } }

/* PAGE GRID */
.grid{display:grid;grid-template-columns:180px 1fr 180px;gap:12px;position:relative}
@media (max-width:900px){.grid{grid-template-columns:1fr}}

/* SIDE STICKERS */
.grid:before,.grid:after{content:"";position:absolute;top:-10px;bottom:-10px;width:96px;pointer-events:none}
.grid:before{
  left:-106px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><polygon points='32,3 38,23 61,23 41,36 47,58 32,45 17,58 23,36 3,23 26,23' fill='%23ff4da6'/></svg>") 8px 38px/56px 56px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path d='M24 44s-9-5-15-12C3 26 6 16 14 16c5 0 8 4 10 6 2-2 5-6 10-6 8 0 11 10 5 16-6 7-15 12-15 12z' fill='%23ff0040'/></svg>") 38px 128px/42px 42px no-repeat;
  filter:drop-shadow(0 0 6px rgba(255,77,166,.6))
}
.grid:after{
  right:-106px;
  background:
    radial-gradient(6px 6px at 25% 25%,#19c3ff 0 55%,transparent 56%),
    radial-gradient(4px 4px at 70% 70%,#ffffff 0 55%,transparent 56%);
  filter:drop-shadow(0 0 6px rgba(25,195,255,.55))
}
@media (max-width:900px){.grid:before,.grid:after{display:none}}

/* PANELS — DOUBLE/NEON BORDERS */
.panel{
  background:rgba(12,8,20,.86);
  border:2px solid #3a1a44; border-radius:14px; padding:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.04), 0 0 0 3px rgba(255,77,166,.15);
  position:relative;
}
.panel:after{
  /* inner neon hairline */
  content:""; position:absolute; inset:6px; border-radius:10px; pointer-events:none;
  border:1px dotted rgba(255,126,198,.55);
}

/* VARIANTS */
.angled{border-radius:0}
.rounded{border-radius:14px}

/* TITLES */
h2,h3{font-family:"Trebuchet MS",Tahoma,Verdana,Arial,sans-serif;color:#fff}
h2{font-size:20px;letter-spacing:.06em;margin:0 0 6px}
h3{font-size:14px;letter-spacing:.10em;text-transform:uppercase;margin:0 0 6px;color:#ff0040;text-shadow:0 0 6px #ff4da6}

/* LISTS / LINKS IN WIDGETS */
.widget ul{list-style:none}
.widget li{margin:4px 0}
.widget a{color:#f6f3ff}
.widget a:hover{color:#19c3ff}

/* SEARCH */
.search input{width:100%;padding:7px 9px;border-radius:8px;border:2px solid #3a1a44;background:#000;color:#fff}

/* POSTS with candy top/bottom bars */
.post{background:rgba(0,0,0,.46);border:2px solid #3a1a44;border-radius:14px;padding:12px 14px;margin-bottom:14px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.03)}
.post:before,.post:after{content:"";display:block;height:8px;margin:0 -6px;background:repeating-linear-gradient(90deg,#ff4da6 0 6px,transparent 6px 12px),repeating-linear-gradient(90deg,#19c3ff 0 8px,transparent 8px 16px);opacity:.9;border-radius:8px}
.post h2{color:#ff4da6;border-bottom:2px dotted #19c3ff;padding-bottom:4px}
.meta{color:#c7c3d1;font-size:.9rem;border-bottom:1px dotted rgba(255,255,255,.35);padding-bottom:4px;margin-bottom:8px}
.post p{margin-bottom:.8em}

/* STATUS CIRCLE */
.status{display:flex;justify-content:center;margin-bottom:14px}
.status .bubble{
  width:180px;height:180px;border-radius:50%;background:#140a1f;border:3px solid #ff4da6;
  box-shadow:0 0 16px rgba(255,77,166,.55),0 0 22px rgba(25,195,255,.35) inset;
  padding:14px;text-align:center;color:#fff;display:flex;flex-direction:column;justify-content:center
}
.status h4{font:700 12px/1 "Trebuchet MS",Tahoma,Verdana,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.status ul{list-style:none;font-size:.9rem;line-height:1.4}
.status em{color:#ffb0da}

/* FOOTER */
.site-footer{text-align:center;color:#bdb9c9;font-size:.86rem;margin:26px auto 40px;padding-top:10px;border-top:1px solid rgba(255,255,255,.25);max-width:820px}

/* LAYOUT HELPERS */
.grid-left{grid-column:1}
.grid-center{grid-column:2}
.grid-right{grid-column:3}
/* ==== GLITTER + LEOPARD — HARD OVERRIDES ==== */

/* Page background: try local uploads first, then CDNs */
body{
  background-image:
    url("/assets/bg_glitter.jpg"),
    url("/assets/bg_glitter.png"),
    url("https://cdn.pixabay.com/photo/2016/11/21/15/47/glitter-1845140_1280.jpg"),
    url("https://cdn.pixabay.com/photo/2016/11/29/08/21/glitter-1868195_1280.jpg") !important;
  background-repeat: repeat !important;
  background-position: center top !important;
  background-attachment: fixed !important;
  background-size: 600px, 600px, 600px, 600px !important; /* dense glitter */
}

/* Header: local leopard first, then CDN */
.site-header{
  background-image:
    url("/assets/header_leopard.jpg"),
    url("https://cdn.pixabay.com/photo/2020/10/25/17/13/leopard-5684599_1280.jpg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}