:root{
  --orange:#ff6d3a;
  --dark:#1c0f0f;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background-color:var(--dark);
  color:#fff;
  font-family:'Segoe UI',Tahoma,sans-serif;
  text-align:center;
  overflow-x:hidden;
}

.title{
  font-size:48px;
  margin:20px 0 10px;
  color:var(--orange);
  text-shadow:0 0 8px var(--orange),0 0 20px #f8945d;
  letter-spacing:1px;
}

.center{
  display:flex;
  justify-content:center;
}

#hedgehog{
  width:260px;
  cursor:pointer;
  transition:transform 0.8s ease-in-out;
}

.story-box{
  width:90%;
  max-width:900px;
  margin:30px auto 20px;
  padding:30px 25px;
  border:2px solid var(--orange);
  border-radius:8px;
  box-shadow:0 0 12px var(--orange);
  background:rgba(0,0,0,0.25);
  font-size:18px;
  line-height:1.45em;
  min-height:110px;
}

.prompt{
  margin-top:14px;
  color:#ffd28a;
}

.choices{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:22px;
  margin-bottom:25px;
}

.choices button{
  padding:12px 32px;
  font-size:16px;
  border:none;
  border-radius:50px;
  cursor:pointer;
  background:linear-gradient(145deg,#ff7b4c,#ff5f2c);
  color:#fff;
  transition:opacity 0.3s;
}

.choices button:hover{opacity:0.85;}

.counter{
  margin:10px 0 35px;
  font-size:18px;
  color:#ffb74d;
}

footer{
  margin-bottom:25px;
}

footer a{
  color:#ffb74d;
  margin:0 16px;
  text-decoration:none;
  transition:color 0.3s;
}

footer a:hover{color:#ffd37e;}

/* fire spark */
.spark{
  position:fixed;
  width:60px;
  height:60px;
  background:radial-gradient(circle,orange,red,transparent);
  border-radius:50%;
  pointer-events:none;
  animation:fly 0.9s linear forwards;
}

.big-spark{
  width:110px;
  height:110px;
  background:radial-gradient(circle,yellow,orange,red,transparent);
  animation:fly-big 1.2s linear forwards;
}

@keyframes fly{
  from{opacity:1;transform:scale(0.6);}
  to{opacity:0;transform:translateY(-120px) scale(1.8);}
}

@keyframes fly-big{
  from{opacity:1;transform:scale(1);}
  to{opacity:0;transform:translateY(-200px) scale(2.5);}
}

/* Movement classes */
.move-left   {transform:translateX(-180px) translateY(60px) rotate(-10deg);}
.move-up     {transform:translateY(-160px) rotate(10deg);}
.move-right  {transform:translateX(180px) translateY(60px) rotate(10deg);}

/* Edge Flames */
.edge-flame{
  position:fixed;
  top:0;
  bottom:0;
  width:90px;
  pointer-events:none;
  z-index:-1;
  background:radial-gradient(circle at 30% 80%,rgba(255,220,120,0.9) 5%,rgba(255,120,0,0.8) 40%,rgba(255,70,0,0.6) 60%,rgba(0,0,0,0) 85%);
  animation:flicker 1.2s infinite ease-in-out alternate;
  filter:blur(6px);
}

.edge-flame.left{left:0;transform:scaleX(-1);} /* mirror */
.edge-flame.right{right:0;}

@keyframes flicker{
  0%  {background-position:0 0;}
  100%{background-position:0 -100px;}
}

/* Achievements */
.achievements{
  margin-top:15px;
}
.achievements span{
  font-size:26px;
  margin:0 6px;
  opacity:0.25;
  transition:opacity 0.3s, transform 0.3s;
  cursor:default;
}
.achievements span.active{
  opacity:1;
  text-shadow:0 0 8px var(--orange),0 0 15px rgba(255,140,60,0.8);
  transform:scale(1.15);
}

/* Meteor canvas */
#meteorCanvas{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  pointer-events:none;
  z-index:-2;
}

/* Lore & Gallery */
section{
  width:90%;
  max-width:950px;
  margin:50px auto;
}

.lore h2,
.gallery h2{
  color:var(--orange);
  font-size:32px;
  margin-bottom:18px;
  text-shadow:0 0 6px var(--orange);
}

.lore p{
  text-align:left;
  margin-bottom:15px;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px;
}

.gallery-grid img{
  width:100%;
  border-radius:8px;
  object-fit:cover;
  box-shadow:0 0 8px rgba(0,0,0,0.6);
  transition:transform 0.4s, box-shadow 0.4s;
}

.gallery-grid img:hover{
  transform:scale(1.05);
  box-shadow:0 0 15px var(--orange);
}