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

  html, body { width: 100%; height: 100%; }

  body {
    background: #1a1a2e;
    background-image:
      radial-gradient(ellipse at 20% 50%, rgba(30,60,114,0.4) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 20%, rgba(42,82,152,0.3) 0%, transparent 50%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Crimson Text', Georgia, serif;
    padding: 20px 12px 28px;
    overflow-x: hidden;
  }

  /* ── Landscape block ── */
  @media screen and (orientation: landscape) and (max-width: 1024px) {
    #book-container, .nav-controls, #swipe-hint { display: none !important; }
    #landscape-overlay { display: flex !important; }
  }

  #landscape-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: #1a1a2e;
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
    padding: 40px;
  }
  #landscape-overlay svg { width: 60px; height: 60px; fill: #c9a96e; animation: rotHint 2s ease-in-out infinite; }
  @keyframes rotHint { 0%,100%{transform:rotate(0)} 40%,60%{transform:rotate(-90deg)} }
  #landscape-overlay p  { font-family:'Playfair Display',serif; color:#c9a96e; font-size:1.1rem; letter-spacing:.1em; }
  #landscape-overlay small { font-family:'Crimson Text',serif; font-style:italic; color:rgba(201,169,110,.55); font-size:.85rem; }

  /* ── Book wrapper ── */
  #book-container { perspective: 2000px; position: relative; }

  #book {
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,.7), 0 10px 20px rgba(0,0,0,.5);
  }

  /* ── Page base ── */
  .page {
    background: #f5f0e8;
    color: #2c2416;
    font-family: 'Crimson Text', Georgia, serif;
    overflow: hidden;
    position: relative;
  }
  .intro-page{
    background: url(Black\ candle.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: left 4px;
    
  }
  .container{
    position:absolute;
    top: 30px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: none;
    width: 180px;
    height: 180px;
    /* transform-origin: center bottom; */
    animation: flicker 3ms 200ms ease-in infinite alternate;
   
  }
  .flame{
    bottom: 20;
    position: absolute;
    border-bottom-right-radius: 50% ;
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%;
    transform: rotate(-45deg) scale(1.5, 1.5);
  } 
  .yellow{
    /* left: px; */
    width: 30px;
    height: 30px;
    background-color: gold;
    box-shadow: 0px 0px 9px 4px gold;
  }
  .orange{
    /* left: 10px; */
    width: 40px;
    height: 40px;
    background-color: orange;
    box-shadow: 0px 0px 9px 4px orange;
  }
  .red{ 
     /* left: 5px; */
    width: 50px;
    height: 50px;
    background-color: orangered;
    box-shadow: 0px 0px 5px 4px orangered;
  }
  .white{
     /* left: 15px; */
     bottom: 50px;
    width: 30px;
    height: 30px;
    background-color: white;
    box-shadow: 0px 0px 9px 4px white;

  }
  .circle{
    border-radius: 50% 20% 20%;
    position:absolute;
  }
  .blue{
    width: 10px;
    height: 10px;
    /* left: 25px; */
    bottom: 40px;
    background-color: slateblue;
    box-shadow: 0px 0px 15px 10px slateblue;
  }
  .black1{
    width: 20px;
    height: 20px;
    /* left: 18px; */
    bottom: 15px;
    background-color: black;
    box-shadow: 0px 0px 15px 10px black;
  }
  @keyframes flicker {
    0% {transform: rotate(-1deg);}
     20% {transform: rotate(1deg);}
      40% {transform: rotate(-1deg);}
       60% {transform: rotate(1deg);}
        80% {transform: rotate(-3deg) scale(0.92);}
         100% {transform: rotate(3deg);}
    
  }

 .scroll-lines {
  position: absolute;
  bottom: 10px;
  width: 90%;
  text-align: center;
  color: rgb(210, 244, 20);
  font-size: 1.2rem;
  font-weight: 300;
  pointer-events: none;
}

.line {
  opacity: 0;
  animation: fadeLine 17s ease-in-out forwards;
}

/* Delay each line so they appear one after another */
.line:nth-child(1) { animation-delay: 0s; }
.line:nth-child(2) { animation-delay: 1s; }
.line:nth-child(3) { animation-delay: 2s; }
.line:nth-child(4) { animation-delay: 3s; }
.line:nth-child(5) { animation-delay: 4s; }
.line:nth-child(6) { animation-delay: 5s; }
.line:nth-child(7) { animation-delay: 6s; }

@keyframes fadeLine {
  0% { opacity: 0; transform: translateY(150px); }
  20% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-180px); }
}



  .page::before {
    content:''; position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  }
  .page-inner { position:relative; z-index:2; height:100%; padding:36px 32px 44px; }

  /* ── Cover ── */
  .cover {
    /* background: linear-gradient(145deg,#1565c0 0%,#0d47a1 40%,#0a3880 70%,#072a6e 100%) !important; */
    /* color:#fff !important; */
    background-image: url(GlossyCoverD.png);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .cover::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    background: repeating-linear-gradient(45deg,transparent,transparent 60px,rgba(255,255,255,.015) 60px,rgba(255,255,255,.015) 61px);
  }
  .cover .page-inner { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
  .cover-frame { position:absolute; inset:16px; border:1px solid rgba(201,169,110,.35); pointer-events:none; z-index:3; }
  .cover-frame::before { content:''; position:absolute; inset:6px; border:1px solid rgba(201,169,110,.15); }
  .cover-ornament { width:60px; height:2px; background:linear-gradient(90deg,transparent,#c9a96e,transparent); margin:12px auto; flex-shrink:0; }
.cover-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.1;
  text-shadow: 0 2px 20px rgba(0,0,0,.4);

  background: linear-gradient(
    225deg,
    #f8f8f8 0%,   /* bright silver highlight */
    #d9d9d9 25%,  /* soft brushed silver */
    #b5b5b5 60%,  /* mid-tone polished steel */
    #8a8a8a 100%  /* deep metallic shadow */
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}



  
  /* .cover-title { font-family:'Playfair Display',serif; font-size:clamp(1.8rem,6vw,3.2rem); font-weight:700; color:#fff; letter-spacing:.06em; text-shadow:0 2px 20px rgba(0,0,0,.4); line-height:1.1; } */
  .cover-subtitle { font-family:'Crimson Text',Georgia,serif; font-style:italic; font-size:clamp(.7rem,2vw,1rem); color:#90caf9; letter-spacing:.12em; margin-top:4px; }

  /* ── Inner pages ── */
  .page-header { font-family:'Playfair Display',serif; font-size:clamp(.55rem,1.5vw,.75rem); letter-spacing:.2em; text-transform:uppercase; color:#8a7a60; border-bottom:1px solid #d4c9b0; padding-bottom:7px; margin-bottom:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .page-text { font-size:clamp(1.10rem, 1.0vw, 1.23rem); line-height:1.7; color:#2c2416; text-align:justify; hyphens:auto; }
  .page-text p+p { text-indent:1.2em; }
  .drop-cap::first-letter { font-family:'Playfair Display',serif; font-size:clamp(2rem,7vw,3.8rem); font-weight:700; float:left; line-height:.8; margin:4px 6px 0 0; color:#1565c0; }
  .page-number { position:absolute; bottom:14px; font-size:clamp(.6rem,1.5vw,.78rem); color:#8a7a60; letter-spacing:.1em; font-style:italic; }
  .page-number.left  { left:32px; }
  .page-number.right { right:32px; }

  /* ── Back cover ── */
  /* .back-cover { background:linear-gradient(225deg,#1565c0 0%,#0d47a1 40%,#0a3880 70%,#072a6e 100%) !important; color:#fff !important; } */
  .back-cover {
 background: linear-gradient(225deg, #5a3410 0%, #4a290d 35%, #3a1f0b 70%, #2a1508 100%) !important;
color: #fff !important;

}
 

  .back-cover .page-inner { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
  .back-cover-text { font-style:italic; color:#90caf9; font-size:clamp(.7rem,2vw,1rem); line-height:1.7; max-width:240px; margin-top:10px; }

  /* ── Corner hotspots ── */
  .corner-hotspot {
    position: absolute;
    width: 70px;
    height: 70px;
    z-index: 200;
    cursor: pointer;
    /* Debug: set background:rgba(255,0,0,.2) to visualise */
  }
  .corner-hotspot.tl { top:0; left:0; }
  .corner-hotspot.tr { top:0; right:0; }
  .corner-hotspot.bl { bottom:0; left:0; }
  .corner-hotspot.br { bottom:0; right:0; }

  /* ── Navigation ── */
  .nav-controls { margin-top:20px; display:flex; align-items:center; gap:14px; }
  .btn {
    background:rgba(201,169,110,.15); border:1px solid rgba(201,169,110,.4); color:#c9a96e;
    padding:9px 20px; font-family:'Playfair Display',serif; font-size:clamp(.7rem,2vw,.83rem);
    letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:all .25s ease;
    border-radius:2px; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  }
  .btn:hover,.btn:active { background:rgba(201,169,110,.3); border-color:#c9a96e; }
  .page-indicator { color:rgba(201,169,110,.65); font-size:.85rem; font-family:'Crimson Text',serif; font-style:italic; min-width:80px; text-align:center; }
  #swipe-hint { display:none; color:rgba(201,169,110,.45); font-size:.72rem; font-style:italic; margin-top:8px; letter-spacing:.08em; }

  @media screen and (max-width: 400px) {
    p{
      font-size: clamp(0.90rem, 2.0vw, 1.1rem);
      line-height: 1.70;
    }
    
    
  }