/* ─────────── General page layout ─────────── */
html,body{margin:0;height:100%}
body{
  display:flex;justify-content:center;align-items:center;
  background:#333 url('../assets/optimized/BackgroundAlbum.webp') center/cover fixed;
  overflow:hidden;padding-inline:5vw;
}

/* ─────────── Flipbook container ─────────── */
.scaler{position:relative;overflow:visible;}
#book  {position:absolute;inset:0;width:100%;height:100%;}

/* ─────────── Individual pages ─────────── */
.page{position:relative}
.page,[data-density="hard"]{
  display:flex;align-items:center;justify-content:center;
  font:32px/1.2 'Comic Sans MS',sans-serif;
}
.page{color:#2c2a2a;background:#f1f0f0}
[data-density="hard"]{color:#fff;background:#c33;font-weight:bold}

/* Prevent clicks while a page is turning */
.flip-blocker{position:absolute;inset:0;pointer-events:none;z-index:9}
#book.turning .flip-blocker{pointer-events:auto}

/* Grab‑corners (transparent 60×60px squares) */
.flip-hotspot{position:absolute;width:60px;height:60px;cursor:grab;background:transparent;z-index:10}
.flip-hotspot.tl{top:0;left:0}
.flip-hotspot.bl{bottom:0;left:0}
.flip-hotspot.tr{top:0;right:0}
.flip-hotspot.br{bottom:0;right:0}

/* Image‑full‑page helpers */
.page-image-container{
  width:100%;height:100%;
  display:flex;align-items:stretch;justify-content:stretch;
}
.cover-front{
  background:transparent;
}
.page-image{
  width:100%;height:100%;
  object-fit:cover;display:block;
}

/* Interactive nail‑polish scene */
.nail-polish iframe{
  width:800px;height:600px;border:0;transform-origin:top left;
}

iframe.scene-iframe {
  width: 700px;
  height: 773px;
  border: 0;
  transform-origin: top left;
}

/* Page number styling */
.page-number-container {
  position: absolute;
  bottom: 1.5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  cursor: default;
  user-select: none;
  pointer-events: auto;
}

.page-number {
  font-size: 1.2vw;
  font-weight: bold;
  text-align: center;
  transition: opacity 0.3s ease;
  color: #999494;
  position: relative;
}

.page-number-persian {
  opacity: 1;
}

.page-number-english {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9vw;
}

.page-number-container:hover .page-number-persian {
  opacity: 0;
}

.page-number-container:hover .page-number-english {
  opacity: 1;
}

/* Add to public/css/main.css */
#flipbook-message {
  text-align: center;
  color: white;
  margin-top: 15px; /* Adjust if not using fixed positioning */
  font-family: 'Comic Sans MS', cursive, sans-serif;
  font-size: 18px;
  display: none; /* Initially hidden */
  position: fixed; /* Or absolute/relative depending on desired placement */
  bottom: 20px;    /* Example fixed positioning */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px 20px;
  border-radius: 10px;
  z-index: 1000; /* Ensure it's above other elements */
  transition: opacity 0.5s ease-in-out; /* For fade effects */
}