/* Base */
html, body { margin:0; padding:0; font-family: system-ui, Arial, sans-serif; background:#f5f7fb; }

/* Top bar */
.bar {
  display:flex; gap:.5rem; justify-content:center; align-items:center;
  padding:12px; background:#fff; border-bottom:1px solid #e6ebf1;
  position: sticky; top:0; z-index:10;
}
/* Top bar buttons with Christmas theme */
.btn {
  border:none;
  padding:.6rem 1.1rem;
  border-radius:8px;
  font-weight:700;
  color:#fff;
  cursor:pointer;
  text-decoration:none;
  transition:background .25s, transform .15s;
}
.btn:first-of-type { background:#c62828; }   
.btn:last-of-type  { background:#c62828; }   /* red: Download */

.btn:hover { transform:translateY(-2px); filter:brightness(1.1); }

/* Stage */
.wrap {
  min-height: calc(100svh - 56px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px;
  gap:12px;
}


/* Frame around book */
.frame {
  background:#fff;
  border:1px solid #e9edf3;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  padding:12px;
  position:relative;
}

/* Flipbook and pages */
#flipbook { background:#fff; }
#flipbook .page { background:#fff; }
#flipbook .page img { width:100%; height:100%; object-fit:contain; display:block; }

/* Desktop arrows (sides) */
/* Christmas arrows (SVG perfectly centered) */
.nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#c62828; /* default green */
  color:#fff;
  cursor:pointer; user-select:none;
  transition:transform .15s, filter .25s;
}
.nav svg{ width:28px; height:28px; display:block; } /* <- keeps chevron centered */

.nav.left  { left:-80px; background:#c62828; }
.nav.right { right:-80px; background:#c62828; } /* red   */

.nav:hover{ filter:brightness(1.12); transform:translateY(-50%) scale(1.05); }
.nav.disabled{ opacity:.35; pointer-events:none; }


#mPrev{ background:#c62828; color:#fff; }
#mNext{ background:#c62828; color:#fff; }




@media (max-width: 700px){
  .nav{ width:56px; height:56px; }
  .nav.left{  left:-56px; }
  .nav.right{ right:-56px; }
  .nav svg{ width:24px; height:24px; }
}


@media (max-width: 520px){
  .nav{ display:none; }
  .mobile-controls{ display:flex; }
}


@media (max-width: 380px){
  .wrap{ padding:10px; }
  .frame{ padding:8px; border-radius:12px; }
  .mobile-controls{ gap:8px; }
  .mnav{ height:40px; font-size:14px; }
}


@media (max-width: 320px){
  .wrap{ padding:8px; }
  .frame{ padding:6px; }
  .mnav{ height:38px; font-size:13px; }
}


/* Mobile controls (below book) */

/* Mobile bottom buttons (Christmas theme) */
.mobile-controls { display:none; width:100%; max-width:560px; gap:10px; }
.mnav {
  flex:1 1 0; height:44px;
  border:none; border-radius:10px;
  font-weight:700; font-size:15px; color:#fff;
  cursor:pointer; transition:background .25s, transform .15s;
}
#mPrev { background:#c62828; }  
#mNext { background:#c62828; }  /* red */
.mnav:hover { filter:brightness(1.1); transform:translateY(-2px); }
.mnav:disabled { opacity:.4; }



/* Responsiveness */
@media (max-width: 1100px){
  .nav.left  { left:-56px; }
  .nav.right { right:-56px; }
}
@media (max-width: 820px){
  .nav { width:48px; height:48px; font-size:28px; }
}
@media (max-width: 520px){
 
  .nav { display:none; }
  .mobile-controls { display:flex; }
  .frame { padding:10px; }
  .wrap { padding:16px; }
}


@media (max-width: 450px){
  .wrap { padding: 10px; }
  .frame { padding: 8px; border-radius: 12px; }
  .mobile-controls { gap: 8px; flex-direction: column; max-width: 100%; }
  .mnav { height: 40px; font-size: 15px; }
}


@media (max-width: 520px){
  
  .nav{ display: none !important; }

 
  .mobile-controls{
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr); 
    gap: 12px;
    width: 100%;
    max-width: 560px;
    margin-top: 12px;
  }


  .mnav{
    width: 100%;
    min-width: 0;               
    height: 56px;
    font-size: 18px;
    border: none;
    border-radius: 14px;
    padding: 0 12px;
    white-space: nowrap;         
  }
}


@media (max-width: 380px){
  .mobile-controls{ gap: 10px; }
  .mnav{ height: 52px; font-size: 16px; border-radius: 12px; padding: 0 10px; }
}

@media (max-width: 320px){
  .mobile-controls{ gap: 8px; }
  .mnav{ height: 48px; font-size: 15px; border-radius: 12px; padding: 0 8px; }
}