*{margin:0;padding:0;box-sizing:border-box;font-family:"Segoe UI",Tahoma,sans-serif}
body{min-height:100vh;background:#050505;color:#e5e5e5;overflow-x:hidden}

.muted{color:#aaa}

/* Background */
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-3;
    background:url("https://raw.githubusercontent.com/NeofastFTL-Backup/Imaged/refs/heads/main/bg.png") center/cover no-repeat;
    opacity:.45;
    filter:saturate(1.25) contrast(1.15);
    transform:scale(1.05);
    background-attachment:fixed;
}
body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    background:
        radial-gradient(circle at center,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 70%,rgba(0,0,0,.7) 100%),
        linear-gradient(135deg,rgba(0,0,0,.65),rgba(15,15,15,.55),rgba(26,26,26,.5));
    backdrop-filter:blur(3px);
}

/* Embers */
#embers{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* Header */
header{text-align:center;padding:2.5rem 2rem}
header h1{
    font-size:3rem;
    background:linear-gradient(90deg,#00ffcc,#7f5cff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent
}
header p{color:#aaa;margin-top:.5rem}

/* Fire Ring */
.fire-ring{
  position:relative;
  display:inline-block;
  border-radius:50%;
}
.fire-ring::before{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:50%;
  background:conic-gradient(#ff3c00,#ff7a00,#ffd000,#ff7a00,#ff3c00);
  filter:blur(10px);
  animation:fireSpin 4s linear infinite;
  z-index:-1;
}
.fire-ring::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  box-shadow:
    0 0 25px rgba(255,120,40,.6),
    0 0 60px rgba(255,80,20,.4);
  z-index:-1;
}
@keyframes fireSpin{to{transform:rotate(360deg)}}

/* Profile image */
.profile-image{
    width:180px;height:180px;border-radius:50%;
    margin:2rem auto 1rem;object-fit:cover;
    animation:emberPulse 3.5s ease-in-out infinite;
}
@keyframes emberPulse{
    0%{box-shadow:0 0 25px rgba(255,120,40,.3)}
    50%{box-shadow:0 0 55px rgba(255,140,60,.55)}
    100%{box-shadow:0 0 25px rgba(255,120,40,.3)}
}

/* Nav */
nav{display:flex;justify-content:center;gap:2rem;margin-top:1.5rem;flex-wrap:wrap}
nav a{color:#ccc;text-decoration:none;font-weight:600;position:relative;padding:.25rem .35rem;border-radius:10px}
nav a:hover{color:#00ffcc}

/* Active */
body[data-page="home"] nav a[data-nav="home"],
body[data-page="projects"] nav a[data-nav="projects"],
body[data-page="skills"] nav a[data-nav="skills"],
body[data-page="contact"] nav a[data-nav="contact"],
body[data-page="rss"] nav a[data-nav="rss"]{
  color:#00ffcc;
  background:rgba(0,255,204,.08);
  border:1px solid rgba(0,255,204,.18);
}


/* Sections */
main{padding-bottom:4rem}
section{max-width:1100px;margin:3.25rem auto;padding:0 2rem}
section h2{font-size:2rem;margin-bottom:1.5rem;border-left:4px solid #00ffcc;padding-left:1rem}

/* Cards */
.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}
.card{
    background:rgba(15,15,18,.38);
    border:1px solid rgba(255,255,255,.1);
    border-radius:18px;
    padding:1.5rem;
    backdrop-filter:blur(12px);
    box-shadow:0 10px 40px rgba(0,0,0,.55);
    transition:transform .25s ease
}
.card:hover{transform:translateY(-6px)}

/* Music UI */
.sound-toggle{
    position:fixed;right:18px;bottom:18px;z-index:50;
    padding:10px 14px;border-radius:999px;
    background:rgba(15,15,18,.45);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    color:#eee;cursor:pointer;
}
.sound-toggle.on{border-color:rgba(0,255,204,.4)}
.volume-panel{
    position:fixed;right:18px;bottom:70px;z-index:49;
    padding:12px 14px;border-radius:14px;
    background:rgba(15,15,18,.45);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    color:#ddd;font-size:.85rem
}

/* Mobile */
@media(max-width:600px){
  nav{gap:1rem}
  header h1{font-size:2.3rem}
  .profile-image{width:150px;height:150px}
  .volume-panel{bottom:120px;right:10px}
}


/* Platform icons */
.platform {
  display:flex;
  align-items:center;
  gap:.75rem;
}

.platform img {
  width:28px;
  height:28px;
  filter:drop-shadow(0 0 6px rgba(0,255,204,.45));
}

.card h3 {
  display:flex;
  align-items:center;
  gap:.6rem;
}

body[data-page="support"] nav a[data-nav="support"]{
  color:#00ffcc;
  background:rgba(0,255,204,.08);
  border:1px solid rgba(0,255,204,.18);
}


/* RSS page */
.rss-controls{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin-top:1rem}
.rss-controls input{
  width:260px;max-width:100%;
  padding:10px 12px;border-radius:12px;
  background:rgba(10,10,12,.55);
  border:1px solid rgba(255,255,255,.12);
  color:#eee;outline:none
}
.rss-controls input:focus{border-color:rgba(0,255,204,.35)}
.rss-btn{
  padding:10px 14px;border-radius:999px;
  background:rgba(0,255,204,.14);
  border:1px solid rgba(0,255,204,.28);
  color:#eafffb;cursor:pointer;font-weight:600
}
.rss-btn:hover{filter:brightness(1.08)}

.feed-links{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.7rem}
.feed-links a{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem .65rem;border-radius:999px;
  background:rgba(15,15,18,.35);
  border:1px solid rgba(255,255,255,.10);
  text-decoration:none;color:#ddd;font-size:.9rem
}
.feed-links a:hover{border-color:rgba(0,255,204,.28);color:#00ffcc}

.feed-items{margin-top:1rem}
.feed-items ul{margin:.5rem 0 0 1.1rem}
.feed-items li{margin:.35rem 0;color:#d7d7d7}
.feed-items small{color:#a9a9a9}

.skeleton{
  border-radius:14px;
  background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.12),rgba(255,255,255,.06));
  background-size:200% 100%;
  animation:sweep 1.4s ease-in-out infinite
}
@keyframes sweep{0%{background-position:0% 0}100%{background-position:200% 0}}

/* RSS / GitHub feed page */
.rss-controls{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;margin-top:1rem}
.rss-controls input{
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:10px 12px;
  color:#eee;
  outline:none;
  min-width:220px;
}
.rss-btn{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(0,255,204,.25);
  background:rgba(0,255,204,.12);
  color:#e5e5e5;
  cursor:pointer;
  font-weight:600;
}
.rss-btn:hover{border-color:rgba(0,255,204,.45)}

.feed-meta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.35rem}
.feed-meta a{color:#00ffcc;text-decoration:none;font-weight:600}
.feed-meta a:hover{text-decoration:underline}

.feed-list{margin-top:.9rem;display:flex;flex-direction:column;gap:.55rem}

/* RSS page: commit preview rows */
.commit-list{display:block}
.commit-row{margin-top:.45rem}
.feed-link{color:var(--accent,#00ffcc);text-decoration:none;font-weight:700}
.feed-link:hover{text-decoration:underline}
.feed-item{padding:.55rem .65rem;border-radius:14px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08)}
.feed-item .muted{font-size:.85rem}

.badge{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.15rem .55rem;border-radius:999px;
  background:rgba(127,92,255,.14);
  border:1px solid rgba(127,92,255,.22);
  font-size:.8rem;color:#ddd
}


/* ===== Home Selector ===== */
.home-selector{text-align:center;}
.selector-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2.5rem;margin-top:2.5rem;}
.selector-card{display:block;text-decoration:none;color:#e5e5e5;padding:2rem;border-radius:22px;background:rgba(15,15,18,.45);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);transition:all .25s ease;position:relative;overflow:hidden;}
.selector-card h3{font-size:1.8rem;margin-bottom:.7rem;}
.selector-card p{color:#bbb;margin-bottom:1.3rem;}
.selector-card span{font-weight:700;color:#00ffcc;}
.selector-card:hover{transform:translateY(-8px) scale(1.02);border-color:rgba(0,255,204,.35);box-shadow:0 0 40px rgba(0,255,204,.15);}
.selector-card.wiki:hover{box-shadow:0 0 50px rgba(127,92,255,.25);}
.selector-card.portfolio:hover{box-shadow:0 0 50px rgba(0,255,204,.25);}

/* Crafting grid */
.crafting-grid{display:grid;grid-template-columns:repeat(3,60px);gap:6px;margin-top:12px;}
.slot{width:60px;height:60px;background:#8b8b8b;border:3px solid #3c3c3c;display:flex;align-items:center;justify-content:center;font-size:11px;color:white;}
.slot.empty{background:#3a3a3a;}