/* ============================================================
   ADVENTURE OF CLAIR — STORYBOOK CSS (UPGRADED)
   ============================================================ */

/* ── OVERLAY ─────────────────────────────────────────────────── */
#sb-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 50% 35%, #1c0808 0%, #0a0004 55%, #04000a 100%);
  opacity: 0;
  transition: opacity 0.45s ease;
  overflow: hidden;
}
#sb-overlay.sb-visible { opacity: 1; }
#sb-overlay.hidden      { display: none !important; }

/* ── TOP BAR ────────────────────────────────────────────────── */
.sb-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 8px;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(245,200,66,0.2);
}
.sb-topbar-title {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: clamp(0.75rem, 2vw, 0.95rem);
  font-weight: 700;
  color: #f5c842;
  text-shadow: 0 0 12px rgba(245,200,66,.45);
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: 7px;
}
.sb-topbar-icon { color: #d06018; }
.sb-topbar-controls { display: flex; gap: 8px; }
.sb-ctrl-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(50,15,8,.7);
  border: 1px solid rgba(245,200,66,.2);
  color: rgba(245,200,66,.65);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, color .2s;
}
.sb-ctrl-btn:hover { background: rgba(160,60,15,.45); border-color: #f5c842; color: #f5c842; }
.sb-ctrl-btn.sb-muted { opacity: .4; }

/* ── BOOK WRAP ──────────────────────────────────────────────── */
#sb-book-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 16px 18px;
  perspective: 1400px;
  min-height: 0;
  position: relative;
}

/* ── CLOSED BOOK SCENE ─────────────────────────────────────── */
.sb-cover-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  animation: cover-fade-in 0.5s ease;
}
@keyframes cover-fade-in {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sb-cover-book {
  position: relative;
  width: clamp(170px, 36vw, 260px);
  height: clamp(230px, 48vw, 350px);
  cursor: pointer;
  transform-style: preserve-3d;
  animation: sb-float 3.6s ease-in-out infinite;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.75));
}
@keyframes sb-float {
  0%,100% {
    transform: translateY(0) rotateY(-10deg) rotateX(3deg);
    filter: drop-shadow(0 18px 36px rgba(0,0,0,.75))
            drop-shadow(0 0 28px rgba(190,70,15,.22));
  }
  50% {
    transform: translateY(-12px) rotateY(-5deg) rotateX(1deg);
    filter: drop-shadow(0 26px 44px rgba(0,0,0,.65))
            drop-shadow(0 0 50px rgba(245,200,66,.28));
  }
}

/* Page-thickness strip on right edge */
.sb-thickness {
  position: absolute;
  right: -14px; top: 4px;
  width: 14px;
  height: calc(100% - 8px);
  background: repeating-linear-gradient(
    to bottom,
    #ede0b8 0px, #e4d0a0 2px, #d8c090 3px, #ede0b8 4px
  );
  border-radius: 0 3px 3px 0;
  box-shadow: 3px 0 6px rgba(0,0,0,.4);
}
.sb-board-back {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg,#1e0606,#120404);
  border-radius: 3px 5px 5px 3px;
  border: 1px solid rgba(140,35,10,.35);
  transform: translateZ(-3px);
}
.sb-board-front {
  position: absolute;
  inset: 0;
  border-radius: 3px 5px 5px 3px;
  border-left: 5px solid #0c0202;
  border-right: 2px solid rgba(180,65,15,.5);
  border-top: 1.5px solid rgba(180,65,15,.4);
  border-bottom: 1.5px solid rgba(180,65,15,.4);
  background:
    linear-gradient(135deg,
      #3a0c0a 0%, #260806 18%,
      #451008 35%, #1c0504 52%,
      #3a0c0a 68%, #260806 85%,
      #380c08 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* Leather grain overlay */
.sb-board-front::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 3px),
    repeating-linear-gradient(90deg,transparent,transparent 6px,rgba(0,0,0,.02) 6px,rgba(0,0,0,.02) 7px);
  pointer-events: none;
}
/* Red inner vignette */
.sb-board-front::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(200,40,10,.07) 0%, transparent 70%);
  pointer-events: none;
  animation: sb-inner-pulse 2.8s ease-in-out infinite;
}
@keyframes sb-inner-pulse {
  0%,100%{opacity:.5} 50%{opacity:1}
}

/* Mystic rings */
.sb-ring {
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.r1 { width:84%;height:84%; border:1.2px solid rgba(190,70,15,.4); animation:sb-ring-pulse 3s ease-in-out infinite; }
.r2 { width:68%;height:68%; border:0.9px dashed rgba(245,200,66,.25); animation:sb-ring-pulse 3s ease-in-out .6s infinite; }
.r3 { width:52%;height:52%; border:0.8px solid rgba(190,70,15,.2); animation:sb-ring-pulse 3s ease-in-out 1.2s infinite; }
@keyframes sb-ring-pulse {
  0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:.9;transform:translate(-50%,-50%) scale(1.03)}
}

/* Brass corner ornaments */
.sb-corner {
  position: absolute;
  width: 16px; height: 16px;
  border-style: solid;
  border-color: rgba(190,110,25,.65);
}
.c-tl { top:7px; left:9px;  border-width:2px 0 0 2px; }
.c-tr { top:7px; right:7px; border-width:2px 2px 0 0; }
.c-bl { bottom:7px; left:9px;  border-width:0 0 2px 2px; }
.c-br { bottom:7px; right:7px; border-width:0 2px 2px 0; }

/* Central emblem */
.sb-emblem {
  position: relative;
  z-index: 2;
  animation: sb-emblem-glow 2.6s ease-in-out infinite;
}
.sb-emblem svg {
  width: clamp(62px,14vw,96px);
  height: clamp(62px,14vw,96px);
}
@keyframes sb-emblem-glow {
  0%,100%{filter:drop-shadow(0 0 6px rgba(245,200,66,.35)) drop-shadow(0 0 18px rgba(190,60,10,.25))}
  50%{filter:drop-shadow(0 0 14px rgba(245,200,66,.65)) drop-shadow(0 0 32px rgba(190,60,10,.45))}
}

/* Title */
.sb-cover-title {
  position: relative;
  z-index: 2;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: clamp(.68rem,2.2vw,.9rem);
  font-weight: 900;
  color: #f5c842;
  text-align: center;
  letter-spacing: .12em;
  text-shadow: 0 0 10px rgba(245,200,66,.55), 0 2px 3px rgba(0,0,0,.8);
  line-height: 1.4;
}

/* Light beams */
.sb-beam {
  position: absolute;
  top: 50%; left: -10%;
  width: 120%; height: 1.5px;
  background: linear-gradient(90deg,transparent,rgba(245,200,66,.1),transparent);
  pointer-events: none;
}
.b1 { transform: rotate(-22deg) translateY(-50%); animation: sb-beam 4.5s ease-in-out infinite; }
.b2 { transform: rotate( 22deg) translateY(-50%); animation: sb-beam 4.5s ease-in-out 2.2s infinite; }
@keyframes sb-beam { 0%,100%{opacity:0} 50%{opacity:1} }

/* Spine on left edge */
.sb-cover-spine {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(to right,#080202,#1c0808,#080202);
  border-radius: 3px 0 0 3px;
}

/* Cover open animation */
.sb-cover-book.sb-opening {
  animation: sb-cover-open 0.85s cubic-bezier(0.4,0,0.2,1) forwards !important;
  transform-origin: left center;
}
@keyframes sb-cover-open {
  0%  { transform: rotateY(-10deg) rotateX(3deg) scale(1); opacity:1; }
  45% { transform: rotateY(-80deg) rotateX(0deg) scale(1.04); opacity:.8; }
  100%{ transform: rotateY(-100deg) scale(.5); opacity:0; }
}

/* Tap hint */
.sb-tap-hint {
  font-family: var(--font-display,'Cinzel',serif);
  font-size: clamp(.68rem,1.8vw,.85rem);
  color: rgba(245,200,66,.55);
  letter-spacing: .1em;
  text-align: center;
  cursor: pointer;
  animation: sb-hint-pulse 2.2s ease-in-out infinite;
  transition: opacity .35s ease;
  margin: 0;
}
@keyframes sb-hint-pulse { 0%,100%{opacity:.55} 50%{opacity:1} }

/* ── OPEN BOOK ─────────────────────────────────────────────── */
.sb-open-book {
  width: 100%;
  max-width: 800px;
  height: clamp(300px,55vh,500px);
  display: flex;
  border-radius: 3px 6px 6px 3px;
  box-shadow:
    0 10px 50px rgba(0,0,0,.8),
    0 0 70px rgba(190,60,10,.12);
  overflow: hidden;
  animation: sb-open-appear .5s cubic-bezier(.34,1.56,.64,1) forwards;
  position: relative;
}
@keyframes sb-open-appear {
  from { transform: scale(.82) rotateX(8deg); opacity:0; }
  to   { transform: scale(1)   rotateX(0);    opacity:1; }
}

/* Page backgrounds with subtle texture */
.sb-page-left, .sb-page-right {
  flex: 1;
  position: relative;
  background: linear-gradient(105deg, #f4ead0 0%, #ede0bc 100%);
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.05);
}
.sb-page-left {
  border-right: none;
}
.sb-page-right {
  background: linear-gradient(75deg, #ede0bc 0%, #f4ead0 100%);
}
/* Parchment texture overlay */
.sb-page-left::after, .sb-page-right::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" opacity="0.05"><path d="M10 10 L190 10 M10 30 L190 30 M10 50 L190 50" stroke="%238b5a2b" stroke-width="0.5"/><circle cx="40" cy="80" r="3" fill="%238b5a2b"/><circle cx="160" cy="140" r="4" fill="%238b5a2b"/></svg>');
  background-repeat: repeat;
  background-size: 40px 40px;
  pointer-events: none;
}
/* Spine */
.sb-spine-open {
  width: 12px;
  flex-shrink: 0;
  background: linear-gradient(to right,#4a1808 0%,#8a4018 30%,#be7030 50%,#8a4018 70%,#4a1808 100%);
  box-shadow: inset 2px 0 4px rgba(0,0,0,.35), inset -2px 0 4px rgba(0,0,0,.35);
  z-index: 2;
  position: relative;
}

/* Page flip animations (enhanced with curl shadow) */
@keyframes sb-flip-out-fwd {
  0%  { transform: rotateY(0); opacity:1; }
  100%{ transform: rotateY(-65deg); opacity:.1; }
}
@keyframes sb-flip-out-back {
  0%  { transform: rotateY(0); opacity:1; }
  100%{ transform: rotateY(65deg); opacity:.1; }
}

/* ── PAGE CONTENT ────────────────────────────────────────────── */
.sb-text-page {
  height: 100%;
  padding: clamp(12px,2.5vw,20px);
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-sizing: border-box;
  background: rgba(255,250,240,0.2);
}
.sb-chapter {
  font-family: var(--font-display,'Cinzel',serif);
  font-size: clamp(.55rem,1.3vw,.68rem);
  font-weight: 700;
  color: #7a4010;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sb-rule {
  border: none;
  border-top: 1px solid rgba(120,70,20,.28);
  margin: 0;
}
.sb-body {
  flex: 1;
  font-family: Georgia,'Times New Roman',serif;
  font-size: clamp(.68rem,1.6vw,.86rem);
  line-height: 1.8;
  color: #1c0e04;
  overflow-y: auto;
  scrollbar-width: none;
  margin: 0;
  position: relative;
}
.sb-body::-webkit-scrollbar { display: none; }
.sb-cursor {
  display: inline-block;
  width: 1.5px; height: .9em;
  background: #7a4010;
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: sb-blink .75s ease-in-out infinite;
}
@keyframes sb-blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Image page */
.sb-image-page {
  height: 100%;
  padding: clamp(10px,2vw,16px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.sb-image-frame {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(120,70,20,.2);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,250,240,.4);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}
.sb-image-frame svg,
.sb-image-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.sb-image-empty {
  align-items: center;
  justify-content: center;
}
.sb-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.sb-image-chapter-note {
  font-family: var(--font-display,'Cinzel',serif);
  font-size: clamp(.58rem,1.4vw,.72rem);
  color: rgba(120,70,20,.55);
  text-align: center;
  margin: 0;
}
.sb-ornament-large { font-size: 2.4rem; color: rgba(120,70,20,.2); }
.sb-blank-page {
  height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.sb-ornament { font-size: 1.6rem; color: rgba(120,70,20,.18); }

/* Locked page */
.sb-locked-page {
  height: 100%;
  position: relative;
  overflow: hidden;
}
.sb-locked-blur {
  position: absolute;
  inset: 0;
  padding: clamp(12px,2.5vw,20px);
  font-family: Georgia,serif;
  font-size: .82rem;
  line-height: 1.8;
  color: #1c0e04;
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
}
.sb-locked-veil {
  position: absolute;
  inset: 0;
  background: rgba(242,234,210,.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  text-align: center;
}
.sb-locked-veil i { font-size: 1.4rem; color: rgba(100,50,15,.55); }
.sb-locked-veil p {
  font-size: .72rem;
  color: #3a1806;
  line-height: 1.5;
  margin: 0;
}
.sb-locked-veil strong { color: #7a4010; }
.sb-play-btn {
  background: linear-gradient(135deg,#c8860a,#f5c842);
  color: #1a0800;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  transition: transform .15s;
}
.sb-play-btn:active { transform: scale(.95); }

/* ── NAV ROW ─────────────────────────────────────────────────── */
.sb-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 800px;
  margin-top: 14px;
  gap: 10px;
}
.sb-nav-btn,
.sb-home-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(45,12,6,.7);
  border: 1.5px solid rgba(245,200,66,.28);
  color: #f5c842;
  font-size: .85rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .15s;
  flex-shrink: 0;
  backdrop-filter: blur(3px);
}
.sb-nav-btn:hover,
.sb-home-btn:hover { background: rgba(160,60,15,.45); transform: scale(1.1); }
.sb-nav-btn:active,
.sb-home-btn:active { transform: scale(.9); }
.sb-nav-placeholder { width: 40px; height: 40px; flex-shrink: 0; }
.sb-nav-center {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-counter {
  font-size: .68rem;
  color: rgba(245,200,66,.45);
  letter-spacing: .06em;
  white-space: nowrap;
  font-family: var(--font-display,'Cinzel',serif);
}

/* ── FLOATING PARTICLES (stars, feathers) ───────────────────── */
.sb-particle {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  animation: sb-particle-float 6s ease-in-out infinite;
}
@keyframes sb-particle-float {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  20%  { opacity: 0.6; }
  80%  { opacity: 0.4; }
  100% { transform: translateY(-80px) rotate(360deg); opacity: 0; }
}

/* ── PAGE TURN SPARKLES ────────────────────────────────────── */
.sb-sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f5c842;
  box-shadow: 0 0 8px #f5c842;
  pointer-events: none;
  z-index: 20;
  animation: sb-sparkle-burst 0.6s ease-out forwards;
}
@keyframes sb-sparkle-burst {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

/* ── EXTRA ANIMATIONS ─────────────────────────────────────── */
.sb-page-corner {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: radial-gradient(ellipse at 30% 30%, rgba(200,100,30,0.3), transparent);
  border-radius: 0 0 8px 0;
  pointer-events: none;
  z-index: 5;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width:600px) {
  #sb-book-wrap { padding: 0 8px 12px; }
  .sb-topbar    { padding: 10px 12px 6px; }
  .sb-spine-open { width: 7px; }
}
@media (max-height:580px) and (orientation:landscape) {
  .sb-open-book  { height: 80vmin; }
  .sb-cover-book { height: 72vmin; width: calc(72vmin * .72); }
}