/* ==========================================================================
   Dreamland — theme styled after "Max & Luci: The Dreamland Adventure"
   ========================================================================== */

:root {
  --night-1: #1a1140;
  --night-2: #3a1e63;
  --night-3: #6d2b7a;
  --dusk:    #b5478f;
  --glow:    #ffd27a;
  --glow-2:  #ff9e6d;
  --cloud:   #f5b3d6;
  --paper:   #fbf3e2;
  --paper-2: #f3e6cd;
  --ink:     #3b2a4d;
  --star:    #fff4c9;
  --accent:  #ffcf4d;
  --blue:    #4a6bd6;
  --red:     #e0503b;

  --font-title: "Baloo 2", "Quicksand", system-ui, sans-serif;
  --font-body:  "Quicksand", "Nunito", system-ui, sans-serif;
  --font-story: "Gaegu", "Baloo 2", cursive;

  --shadow-soft: 0 20px 60px rgba(10,4,30,.55);
  --radius: 22px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--paper);
  min-height: 100vh;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(255,210,122,.18), transparent 60%),
    radial-gradient(900px 600px at 85% 15%, rgba(181,71,143,.35), transparent 60%),
    radial-gradient(900px 600px at 10% 25%, rgba(74,107,214,.30), transparent 60%),
    linear-gradient(180deg, var(--night-1) 0%, var(--night-2) 45%, var(--night-3) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* twinkling starfield */
.stars, .stars::after {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 20% 30%, var(--star), transparent),
    radial-gradient(1.4px 1.4px at 70% 20%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 40% 70%, var(--star), transparent),
    radial-gradient(1.2px 1.2px at 85% 60%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 45%, var(--star), transparent),
    radial-gradient(1.3px 1.3px at 15% 80%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 90% 85%, var(--star), transparent);
  background-repeat: repeat;
  background-size: 100% 100%;
  animation: twinkle 5s ease-in-out infinite alternate;
}
.stars::after { content:""; background-size: 120% 120%; animation-delay: 2.5s; opacity:.6; }
@keyframes twinkle { from { opacity:.35 } to { opacity:.9 } }

.wrap { position: relative; z-index: 1; }

/* ---------- top bar ---------- */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  gap: 14px; padding: 16px clamp(14px, 4vw, 40px);
  position: sticky; top:0; z-index: 30;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(20,10,40,.55), rgba(20,10,40,0));
}
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--paper); }
.brand .mark {
  width:42px; height:42px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--glow), var(--glow-2) 60%, var(--red));
  box-shadow: 0 0 22px rgba(255,180,90,.6);
  display:grid; place-items:center; font-size:22px;
}
.brand b { font-family: var(--font-title); font-size: clamp(18px, 2.4vw, 24px); font-weight:800; letter-spacing:.3px; }
.brand span { display:block; font-size: 11px; opacity:.75; margin-top:-2px; }

.nav { display:flex; align-items:center; gap:10px; }
.nav a, .nav button { color: var(--paper); }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-body); font-weight:700; font-size:15px;
  border:0; cursor:pointer; border-radius: 999px; padding: 11px 20px;
  color:#3a1a12; background: linear-gradient(180deg, var(--glow), var(--glow-2));
  box-shadow: 0 8px 20px rgba(255,140,80,.35); transition: transform .12s, box-shadow .12s, filter .12s;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255,140,80,.45); }
.btn:active { transform: translateY(0); }
.btn.ghost { background: rgba(255,255,255,.10); color: var(--paper); box-shadow:none; border:1.5px solid rgba(255,255,255,.28); }
.btn.ghost:hover { background: rgba(255,255,255,.18); }
.btn.small { padding: 8px 14px; font-size: 13px; }
.btn.blue { background: linear-gradient(180deg, #6f8ff0, var(--blue)); color:#fff; box-shadow:0 8px 20px rgba(74,107,214,.4); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* ---------- hero ---------- */
.hero { text-align:center; padding: 26px 16px 6px; }
.hero h1 {
  font-family: var(--font-title); font-weight: 800;
  font-size: clamp(30px, 7vw, 62px); line-height:1.02; margin:.2em 0 .1em;
  color: var(--glow);
  text-shadow: 0 2px 0 #a8410f, 0 0 30px rgba(255,190,90,.5);
}
.hero .sub { font-size: clamp(14px, 2.4vw, 19px); opacity:.9; margin:0 0 6px; }

/* ==========================================================================
   FLIPBOOK
   ========================================================================== */
.stage { display:grid; place-items:center; padding: 10px clamp(8px,3vw,30px) 30px; }
.flipbook {
  position: relative;
  width: min(92vw, 620px);
  aspect-ratio: 1 / 1;              /* square, like the cover */
  perspective: 2200px;
  touch-action: pan-y;
  user-select: none;
}
.flipbook.wide { width: min(96vw, 980px); aspect-ratio: 2 / 1; } /* two-page desktop spread (future) */

.leaf {
  position: absolute; inset: 0;
  border-radius: 14px;
  transform-style: preserve-3d;
  transform-origin: left center;
  background: linear-gradient(135deg, var(--paper), var(--paper-2));
  box-shadow: var(--shadow-soft);
  will-change: transform;
  overflow: hidden;
}
.leaf .face {
  position:absolute; inset:0; border-radius:14px; overflow:hidden;
  backface-visibility: hidden;
  display:flex; align-items:center; justify-content:center;
  background:#0b0620;
}
.leaf .face img { width:100%; height:100%; object-fit: cover; display:block; }

/* caption box overlaid on the illustration */
.cap {
  position:absolute; transform: translate(-50%, -50%);
  padding: .5em .7em; border-radius: 14px;
  font-family: var(--font-story);
  line-height: 1.28; text-align:center;
  color:#fff; text-shadow: 0 2px 8px rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  pointer-events:none; max-width: 92%;
}

/* page-number pill */
.leaf .pageno {
  position:absolute; bottom:10px; right:14px; font-size:12px; color:#8a6f57;
  background: rgba(255,255,255,.5); border-radius:999px; padding:2px 9px; font-weight:700;
}
.leaf.left .pageno { right:auto; left:14px; }

/* the flip shading */
.leaf .shade {
  position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 30%);
  opacity:0; transition: opacity .1s;
}

/* locked page (sign-up gate) */
.leaf.locked .face { filter: blur(9px) brightness(.6); }
.lockcard {
  position:absolute; inset:0; display:flex; flex-direction:column; gap:14px;
  align-items:center; justify-content:center; text-align:center; padding:24px;
  color: var(--paper); z-index:3;
}
.lockcard .lock { font-size:44px; }
.lockcard h3 { font-family:var(--font-title); font-size:24px; margin:0; color:var(--glow); }
.lockcard p { margin:0; max-width: 320px; opacity:.9; }

/* nav controls */
.controls { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:16px; }
.arrow {
  width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  background: rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.3);
  color:#fff; font-size:24px; display:grid; place-items:center;
  transition: background .12s, transform .12s;
}
.arrow:hover { background: rgba(255,255,255,.24); transform: scale(1.06); }
.arrow:disabled { opacity:.3; cursor:default; transform:none; }
.pageind { min-width:78px; text-align:center; font-weight:700; opacity:.85; }

.langbar { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin: 6px 0 2px; }
.langbar button {
  border:1.5px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08);
  color:var(--paper); border-radius:999px; padding:6px 13px; font-size:13px; font-weight:700; cursor:pointer;
}
.langbar button.active { background: linear-gradient(180deg,var(--glow),var(--glow-2)); color:#3a1a12; border-color:transparent; }

.hint { text-align:center; opacity:.6; font-size:13px; margin-top:10px; }

/* ==========================================================================
   MODAL (auth)
   ========================================================================== */
.modal-back {
  position:fixed; inset:0; z-index:50; background:rgba(10,5,25,.7);
  backdrop-filter: blur(6px); display:none; align-items:center; justify-content:center; padding:18px;
}
.modal-back.open { display:flex; }
.modal {
  width:min(94vw, 420px); background: linear-gradient(160deg,#2a1850,#3a1e63);
  border:1.5px solid rgba(255,255,255,.15); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-soft); position:relative;
}
.modal h2 { font-family:var(--font-title); color:var(--glow); margin:.1em 0 .1em; font-size:26px; }
.modal p.lead { opacity:.85; margin:.2em 0 16px; font-size:14px; }
.modal .close { position:absolute; top:12px; right:14px; background:none; border:0; color:#fff; font-size:24px; cursor:pointer; opacity:.7; }
.field { margin-bottom:12px; }
.field label { display:block; font-size:13px; margin-bottom:5px; opacity:.85; font-weight:700; }
.field input, .field textarea, .field select {
  width:100%; border-radius:12px; border:1.5px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08); color:#fff; padding:11px 13px; font-size:15px; font-family:var(--font-body);
}
.field input:focus, .field textarea:focus { outline:none; border-color:var(--glow); }
.modal .btn { width:100%; justify-content:center; margin-top:6px; }
.switcher { text-align:center; margin-top:14px; font-size:14px; opacity:.85; }
.switcher a { color:var(--glow); cursor:pointer; font-weight:700; }
.err { color:#ffb4a2; font-size:14px; margin:8px 0 0; min-height:18px; }
.ok  { color:#b7f0b0; font-size:14px; margin:8px 0 0; }

/* ==========================================================================
   JOURNAL
   ========================================================================== */
.journal-head { text-align:center; padding: 18px 16px 4px; }
.journal-head h1 { font-family:var(--font-title); color:var(--glow); font-size:clamp(26px,5vw,44px); margin:.1em 0; }
.composer {
  width:min(94vw, 620px); margin: 8px auto 0;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1.5px solid rgba(255,255,255,.14); border-radius: var(--radius); padding:18px;
}
.composer .row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.composer textarea { min-height:120px; resize:vertical; line-height:1.5; }
.moods { display:flex; gap:6px; flex-wrap:wrap; }
.mood-btn { font-size:20px; background:rgba(255,255,255,.08); border:1.5px solid transparent; border-radius:12px; padding:6px 9px; cursor:pointer; }
.mood-btn.active { border-color:var(--glow); background:rgba(255,210,122,.18); }

.rec-btn { background: linear-gradient(180deg,#ff7a7a,var(--red)); color:#fff; box-shadow:0 8px 20px rgba(224,80,59,.4); }
.rec-btn.recording { animation: pulse 1.1s infinite; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(224,80,59,.5) } 50%{ box-shadow:0 0 0 14px rgba(224,80,59,0) } }
.rec-status { font-size:13px; opacity:.8; }

.empty-note { text-align:center; opacity:.75; margin:26px auto; max-width:420px; }

/* dream page (reuses .leaf but paper look, no image) */
.leaf.paper .face { background: linear-gradient(135deg, var(--paper), var(--paper-2)); color:var(--ink); }
.dreampage { padding: 34px 30px; color:var(--ink); width:100%; height:100%; display:flex; flex-direction:column; }
.dreampage .date { font-family:var(--font-title); font-weight:800; color:#a8410f; font-size:18px; }
.dreampage .mood { font-size:26px; }
.dreampage h3 { font-family:var(--font-title); margin:.2em 0; font-size:24px; color:var(--ink); }
.dreampage .text { font-family:var(--font-story); font-size:19px; line-height:1.5; white-space:pre-wrap; overflow:auto; flex:1; }
.dreampage audio { width:100%; margin-top:10px; }
.dreampage .tools { display:flex; gap:8px; margin-top:8px; }
.dreampage .tools button { background:none; border:1.5px solid #d8c3a0; color:#8a6f57; border-radius:999px; padding:5px 12px; font-size:13px; cursor:pointer; }

@media (max-width:520px){
  .composer .row { gap:8px; }
  .arrow { width:50px; height:50px; }
}

/* footer */
.foot { text-align:center; padding:26px 16px 40px; opacity:.65; font-size:13px; }