:root{
  --stage-height: 420px;
  --story-offset: 460px;
}

/* ===============================
   RESET & BASE
================================ */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:Garamond, Georgia, serif;
  background:#fdfbf6;
  overflow-x:hidden;
}

/* ===============================
   FIXED STAGE BACKGROUND (VEIL)
================================ */
#stage-bg{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height: var(--stage-height);
  background:url("../image/tiny_story_stage9.png") center top / cover no-repeat;
  z-index:10;
  pointer-events:none;
}
/* ===============================
   FIXED STAGE — TWO ROWS (FINAL)
================================ */

/* FIXED STAGE WITH TRUE POSITIONING */
#stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--stage-height);
  z-index: 20;
}

/* TOP ROW */
.top-buttons {
  position: absolute;
  top: 30px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* BOTTOM ROW */
.control-buttons {
  position: absolute;
  bottom: 80px;   /* ← stable anchor */
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 14px;
}

/* ---------- I18N BAR (future, optional) ---------- */
.i18n-bar{
  text-align: center;
  margin-bottom: 18px;
}

/* ==================================
   SCROLL BUTTONS — BASE (ALL DEVICES)
   ================================== */

.scroll-btn img,
.top-buttons img,
.control-buttons img {
  width: 110px;          /* phone-perfect size */
  height: auto;
  max-width: 100%;
  cursor: pointer;
}
/* ======================================
   SCROLL BUTTON MAGIC GLOW
====================================== */

.top-buttons img,
.control-buttons img {
  transition: transform 0.25s ease, filter 0.25s ease;
}

.top-buttons img:hover,
.control-buttons img:hover {
  transform: translateY(-2px) scale(1.04);
  filter:
    drop-shadow(0 0 8px rgba(212,175,55,0.7))
    drop-shadow(0 0 14px rgba(255,220,120,0.5));
}

/* ===============================
   STORY SCROLL AREA
================================ */
#story-scroll{
  position:relative;
  z-index:1;
  padding:460px 4rem 6rem; /* allows content under veil */
  padding-top: var(--story-offset);
  
}

/* ===============================
   SET LABEL
================================ */
.set-label{
  text-align:center;
  font-size:32px;
  letter-spacing:0.12em;
  margin:5rem 0 3rem;
  color:#7a8a74;
  font-style:italic;
}
.prep-mark {
  font-size: 0.6em;
  vertical-align: super;
  margin-left: 4px;
  letter-spacing: 0;
}

/* ===============================
   STORY SETS & COLUMNS
================================ */
.story-set{
  margin-bottom:6rem;
}

/* Pull FIRST set up under veil */
.story-set:first-of-type{
  margin-top:-40px;
  pointer-events:none; /* protect buttons */
}

/* Re-enable interaction for content */
.story-set:first-of-type .story-columns{
  pointer-events:auto;
}

.story-columns{
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:4rem;
   justify-items:center;
}

.story-column h3{
  font-size:22px;
  margin-bottom:1.2rem;
  text-align:center;
}

.story-column p{
  font-size:20px;
  line-height:2.2;
  max-width:28ch;
  margin:0 auto 1.6rem;
}

/* ===============================
   RESPONSIVE
================================ */

/* TABLET */
@media (max-width:1024px){
  .story-columns{
    grid-template-columns:repeat(2, 1fr);
  }
}

/* ===============================
   PHONE — TINY STORY STAGE ONLY
================================ */
@media (max-width:600px){

  .story-columns{
    grid-template-columns:1fr;
  }

  /* Top row buttons */
  .tiny-stage .top-buttons img{
    width:100px;
  }

  /* Bottom row buttons (media controls) */
  .tiny-stage .control-buttons{
    margin-top:auto;
    gap:6px;
  }

  .tiny-stage .control-buttons img{
    width:80px;
  }

}