:root{
  --bg:#fff5ec;
  --bg2:#ffe6d0;
  --ink:#2a1a12;
  --ink2:#5b3a29;
  --accent:#8b1e3f;
  --accent2:#c63c5a;
  --gold:#d9a441;
  --green:#3c8458;
  --blue:#3f6fb8;
  --red:#c0392b;
  --shadow:0 8px 24px rgba(139,30,63,.18);
  --radius:18px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:'Nunito',system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(1200px 500px at 10% -10%, #ffd6a5 0%, transparent 60%),
    radial-gradient(1000px 500px at 110% 110%, #ffc2c2 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
  padding-bottom:40px;
}
h1,h2,h3,h4{font-family:'Fraunces',serif;font-weight:700;margin:0 0 .4em 0}
h1{font-size:1.8rem;line-height:1.1}
h2{font-size:1.4rem}
h3{font-size:1.15rem}
p{line-height:1.5;margin:.3em 0 .8em}
b,strong{font-weight:700}
em,i{font-style:italic}

.hidden{display:none !important}

/* HEADER */
#topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%);
  color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
#scoreBar{
  display:flex;gap:10px;align-items:center;
  font-weight:700;font-size:.95rem;
  background:rgba(0,0,0,.18);
  padding:6px 12px;border-radius:999px;
}
#lives{letter-spacing:2px;font-size:.9rem}
.iconbtn{
  background:rgba(255,255,255,.18);border:none;color:#fff;
  width:38px;height:38px;border-radius:50%;
  font-size:1.1rem;cursor:pointer;transition:transform .15s;
}
.iconbtn:active{transform:scale(.92)}

/* MAIN */
#view{
  max-width:640px;margin:0 auto;padding:16px;
}

/* HERO */
.hero{
  background:linear-gradient(135deg,#fff8f0 0%,#ffe9d4 100%);
  border-radius:var(--radius);
  padding:22px 20px;
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;
  margin-bottom:16px;
}
.hero::before{
  content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;
  background:radial-gradient(circle,var(--gold) 0%,transparent 70%);
  opacity:.35;border-radius:50%;
}
.hero h1{color:var(--accent);position:relative}
.hero p{color:var(--ink2);position:relative}
.badge-strip{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;position:relative
}
.badge-strip span{
  background:#fff;border:2px solid var(--gold);color:var(--ink);
  font-weight:700;font-size:.8rem;padding:4px 10px;border-radius:999px;
}

/* MENU CARDS */
.menu-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px;
}
.mcard{
  background:#fff;border-radius:var(--radius);
  padding:18px 14px;text-align:left;border:none;cursor:pointer;
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:6px;
  transition:transform .15s, box-shadow .15s;
  font-family:inherit;color:var(--ink);
  border-top:5px solid var(--accent);
  min-height:120px;
}
.mcard:active{transform:scale(.96)}
.mcard .emoji{font-size:2rem;line-height:1}
.mcard h3{margin:0;font-size:1.05rem;color:var(--accent)}
.mcard small{color:var(--ink2);font-size:.82rem}
.mcard.full{grid-column:1/-1;border-top-color:var(--gold)}
.mcard[data-color="love"]{border-top-color:#e45a72}
.mcard[data-color="home"]{border-top-color:var(--green)}
.mcard[data-color="bible"]{border-top-color:var(--blue)}
.mcard[data-color="folk"]{border-top-color:#b67500}
.mcard[data-color="concept"]{border-top-color:#5d4b8a}
.mcard[data-color="quiz"]{border-top-color:var(--gold);background:linear-gradient(135deg,#fff6e0,#ffecc1)}
.mcard[data-color="book"]{border-top-color:#444}

/* SECTION HEADER */
.section-head{
  display:flex;align-items:center;justify-content:space-between;
  margin:6px 0 12px;
}
.section-head h2{color:var(--accent);margin:0}
.back{
  background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.08);
  padding:6px 12px;border-radius:999px;cursor:pointer;font-weight:700;
  font-family:inherit;font-size:.9rem;
}

/* CONTENT CARD */
.card{
  background:#fff;border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow);margin-bottom:14px;
}
.card h3{color:var(--accent)}
.card .meta{color:var(--ink2);font-size:.88rem;font-style:italic;margin-bottom:8px}

.poem{
  background:linear-gradient(180deg,#fffaf3,#fff3e4);
  border-left:4px solid var(--gold);
  padding:14px 16px;border-radius:10px;
  font-family:'Fraunces',serif;font-style:italic;
  white-space:pre-wrap;line-height:1.55;
  font-size:1rem;
  margin:8px 0;
}
.poem .stanza-num{
  font-style:normal;font-weight:700;color:var(--accent);font-size:.85rem;
  display:block;margin-top:10px;
}
.poem .stanza-num:first-child{margin-top:0}

.factbox{
  background:#f4ede0;padding:12px 14px;border-radius:10px;margin:8px 0;
  border-left:4px solid var(--accent);
}
.factbox h4{margin:0 0 6px;color:var(--accent);font-size:1rem}
.factbox ul{margin:4px 0;padding-left:20px}
.factbox li{margin:3px 0}

.illust{width:100%;border-radius:12px;margin:10px 0;box-shadow:var(--shadow)}
.caption{font-size:.82rem;color:var(--ink2);text-align:center;margin-top:-4px;margin-bottom:10px;font-style:italic}

/* PAGE LIST (sub-menu) */
.sublist{display:flex;flex-direction:column;gap:10px}
.subitem{
  background:#fff;border-radius:14px;padding:14px;
  box-shadow:var(--shadow);display:flex;gap:12px;align-items:center;
  cursor:pointer;border:none;text-align:left;font-family:inherit;color:var(--ink);
}
.subitem:active{transform:scale(.98)}
.subitem .dot{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.1rem;
  flex-shrink:0;
}
.subitem h4{margin:0;color:var(--accent);font-family:'Fraunces',serif}
.subitem small{color:var(--ink2)}

/* QUIZ */
.q-wrap{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:14px}
.q-progress{
  height:10px;background:#f2e3d0;border-radius:999px;overflow:hidden;margin-bottom:14px
}
.q-progress-bar{height:100%;background:linear-gradient(90deg,var(--gold),var(--accent));transition:width .3s}
.q-num{font-weight:700;color:var(--accent);font-size:.9rem;margin-bottom:8px}
.q-question{font-family:'Fraunces',serif;font-size:1.2rem;margin:8px 0 14px;line-height:1.35}
.q-quote{
  background:#fff3e4;border-left:4px solid var(--gold);
  padding:10px 14px;border-radius:8px;font-style:italic;
  font-family:'Fraunces',serif;margin:10px 0;white-space:pre-wrap;
}
.choices{display:flex;flex-direction:column;gap:10px}
.choice{
  background:#fff;border:2px solid #ead9c3;
  padding:14px 16px;border-radius:14px;cursor:pointer;
  font-family:inherit;font-size:1rem;text-align:left;color:var(--ink);
  transition:all .15s;display:flex;align-items:center;gap:10px;
  font-weight:600;
}
.choice:active{transform:scale(.98)}
.choice .letter{
  width:30px;height:30px;border-radius:50%;background:#f4ede0;color:var(--accent);
  display:grid;place-items:center;font-weight:800;flex-shrink:0;font-family:'Fraunces',serif;
}
.choice.correct{background:#e8f5ec;border-color:var(--green);color:#1d5a34}
.choice.correct .letter{background:var(--green);color:#fff}
.choice.wrong{background:#fde9e7;border-color:var(--red);color:#8a201a}
.choice.wrong .letter{background:var(--red);color:#fff}
.choice:disabled{cursor:default;opacity:.6}
.choice.correct:disabled,.choice.wrong:disabled{opacity:1}

.feedback{
  margin-top:12px;padding:12px 14px;border-radius:12px;font-weight:600;
  display:flex;gap:10px;align-items:flex-start;
}
.feedback.ok{background:#e8f5ec;color:#1d5a34;border:1px solid #b7dec4}
.feedback.no{background:#fde9e7;color:#8a201a;border:1px solid #f4c2bc}
.feedback b{display:block;margin-bottom:3px}
.feedback .em{font-size:1.3rem}

.nextbtn{
  width:100%;margin-top:12px;padding:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  border:none;border-radius:14px;font-family:inherit;font-weight:800;font-size:1.05rem;
  cursor:pointer;box-shadow:var(--shadow);
}
.nextbtn:active{transform:scale(.97)}

/* PAIR MATCH */
.pair-wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.pair-col{display:flex;flex-direction:column;gap:8px}
.pair-item{
  background:#fff;border:2px solid #ead9c3;padding:10px;border-radius:12px;
  cursor:pointer;font-weight:600;font-size:.92rem;text-align:center;
  min-height:54px;display:grid;place-items:center;
  font-family:inherit;color:var(--ink);
}
.pair-item.selected{background:#fff4d6;border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,164,65,.25)}
.pair-item.matched{background:#e8f5ec;border-color:var(--green);color:#1d5a34}
.pair-item.wrongflash{animation:shake .35s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* FLASHCARDS */
.flashwrap{perspective:1000px;margin:10px 0}
.flashcard{
  position:relative;width:100%;min-height:220px;
  transform-style:preserve-3d;transition:transform .55s;cursor:pointer;
}
.flashcard.flipped{transform:rotateY(180deg)}
.flashface{
  position:absolute;inset:0;backface-visibility:hidden;
  border-radius:var(--radius);padding:20px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;box-shadow:var(--shadow);
}
.flashfront{
  background:linear-gradient(135deg,#fff,#fff3e4);
  border:2px solid var(--gold);
}
.flashback{
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  transform:rotateY(180deg);
}
.flashfront h3{color:var(--accent);margin:0}
.flashback p{margin:0}
.flashcard .hint{font-size:.82rem;opacity:.7;margin-top:12px}

.flashctrl{display:flex;gap:8px;justify-content:space-between;align-items:center;margin-top:10px}
.flashctrl button{
  background:#fff;border:2px solid var(--accent);color:var(--accent);
  padding:10px 16px;border-radius:12px;font-family:inherit;font-weight:700;
  cursor:pointer;flex:1;
}
.flashctrl .count{font-weight:700;color:var(--ink2);flex:0 0 auto;padding:0 10px}

/* BOOK VIEWER */
.bookwrap{position:relative}
.bookpage{
  width:100%;border-radius:14px;box-shadow:var(--shadow);
  display:block;background:#eee;
}
.booknav{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:12px;gap:10px;
}
.booknav button{
  background:var(--accent);color:#fff;border:none;padding:12px 16px;
  border-radius:12px;font-family:inherit;font-weight:700;cursor:pointer;
  font-size:1rem;
}
.booknav button:disabled{opacity:.4;cursor:not-allowed}
.pageindicator{font-weight:700;color:var(--ink2);font-size:.9rem}

/* RESULT SCREEN */
.result{text-align:center;padding:20px}
.result .bigscore{
  font-family:'Fraunces',serif;font-size:3.5rem;font-weight:800;
  color:var(--accent);line-height:1;margin:10px 0;
}
.result .stars{font-size:2.2rem;margin:10px 0;letter-spacing:6px}
.result .msg{font-size:1.1rem;margin:10px 0}
.result .actions{display:flex;gap:10px;margin-top:16px}
.result .actions button{flex:1;padding:14px;border-radius:14px;font-family:inherit;font-weight:800;cursor:pointer;border:none;font-size:1rem}
.result .again{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.result .home{background:#fff;border:2px solid var(--accent) !important;color:var(--accent)}

/* CONFETTI */
#confetti{position:fixed;inset:0;pointer-events:none;z-index:100}

/* TOAST */
.toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(100px);
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;
  font-weight:700;opacity:0;transition:all .3s;z-index:60;
  box-shadow:0 8px 20px rgba(0,0,0,.3);
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* FILL GAP */
.gap-line{
  font-family:'Fraunces',serif;font-size:1.15rem;line-height:1.6;
  margin:12px 0;background:#fff3e4;padding:12px 14px;border-radius:10px;
  white-space:pre-wrap;font-style:italic;
}
.gap-blank{
  display:inline-block;min-width:80px;padding:2px 12px;margin:0 2px;
  background:#fff;border:2px dashed var(--accent);border-radius:8px;
  font-style:normal;color:var(--accent);font-weight:700;text-align:center;
}

@media (min-width:700px){
  h1{font-size:2.2rem}
  .menu-grid{grid-template-columns:repeat(3,1fr)}
  .q-question{font-size:1.35rem}
}