/* ===========================================================
   Teacher Mari's English Hub — Nanhsing Elementary School
   Faithful recreation of the original Google Site, rebuilt for
   changhua-bilingual.org. Playful + animated, large readable type.
   =========================================================== */

:root{
  --font-body:'Inter','PingFang TC','Apple LiGothic Medium','Microsoft JhengHei',sans-serif;
  --font-display:'Fredoka','Inter','PingFang TC',sans-serif;
  --font-script:'Caveat','Fredoka',cursive;
  --ink:#23252b;
  --muted:#5a5f6b;
  --line:#e7e9ef;
  --card:#ffffff;
  /* theme defaults (overridden per section) */
  --accent:#e8a13a;
  --accent2:#e0533d;
  --hero-bg:radial-gradient(120% 120% at 50% 0%,#3a2a20 0%,#241712 70%);
  --hero-ink:#fff;
  --halo:rgba(232,161,58,.5);
}

/* ---- section themes ---- */
body.theme-home{ --accent:#e8a13a; --accent2:#c9702a; --hero-bg:radial-gradient(130% 110% at 50% -10%,#4a3526 0%,#2a1b13 72%); --halo:rgba(232,161,58,.45); }
body.theme-school{ --accent:#2f6fd0; --accent2:#e0533d; --hero-bg:radial-gradient(130% 110% at 50% -10%,#1e3a64 0%,#101f38 75%); --halo:rgba(86,150,235,.45); }
body.theme-bilingual{ --accent:#46e08a; --accent2:#ff5cc8; --hero-bg:radial-gradient(130% 120% at 70% -10%,#241a52 0%,#0d1030 72%); --halo:rgba(120,90,255,.5); }
body.theme-game{ --accent:#3fb6ff; --accent2:#ffd23f; --hero-bg:linear-gradient(180deg,#bfe9ff 0%,#9fdcff 60%,#7fce6e 60%,#5fa84e 100%); --hero-ink:#1c2350; --halo:rgba(63,182,255,.4); }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:#fff; font-size:20px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}

/* ===================== NAV ===================== */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(18,18,24,.72); backdrop-filter:blur(12px) saturate(1.3);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-in{max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:14px; padding:12px 20px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:#fff; font-weight:600}
.brand img{width:38px; height:38px; border-radius:50%; background:#fff}
.brand b{font-family:var(--font-script); font-size:25px; font-weight:700; line-height:1; letter-spacing:.3px}
.brand small{display:block; font-size:12px; color:rgba(255,255,255,.6); letter-spacing:.12em; text-transform:uppercase}
.menu{margin-left:auto; display:flex; align-items:center; gap:4px}
.menu>li{position:relative; list-style:none}
.menu a{display:block; text-decoration:none; color:rgba(255,255,255,.86); font-size:16px; font-weight:500; padding:10px 14px; border-radius:10px; transition:.18s}
.menu a:hover,.menu a.here{background:rgba(255,255,255,.12); color:#fff}
.has-sub>a::after{content:'▾'; margin-left:6px; opacity:.6; font-size:12px}
.sub{position:absolute; top:100%; left:0; min-width:220px; background:#1b1b24; border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:8px; opacity:0; visibility:hidden; transform:translateY(8px); transition:.18s; box-shadow:0 24px 50px rgba(0,0,0,.4); margin:0; list-style:none}
.menu>li:hover .sub,.menu>li:focus-within .sub{opacity:1; visibility:visible; transform:translateY(4px)}
.sub a{font-size:15.5px; padding:9px 12px}
.burger{display:none; margin-left:auto; background:none; border:0; color:#fff; font-size:26px; cursor:pointer; padding:6px 10px}

/* ===================== HERO ===================== */
.hero{position:relative; min-height:clamp(440px,76vh,760px); display:grid; place-items:center;
  background:var(--hero-bg); color:var(--hero-ink); overflow:hidden; padding:60px 20px 84px}
.hero-art{position:relative; z-index:3; max-width:min(940px,92%); width:100%;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.45)); border-radius:18px; animation:floaty 7s ease-in-out infinite}
.hero-art.video{box-shadow:0 30px 70px rgba(0,0,0,.5); border:3px solid rgba(255,255,255,.14)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero-cap{position:relative; z-index:3; margin-top:26px; text-align:center; max-width:760px}
.hero-cap .eyebrow{font-family:var(--font-script); font-size:30px; color:var(--accent); line-height:1}
.hero-cap h1{font-family:var(--font-display); font-weight:700; font-size:clamp(30px,5vw,52px); margin:6px 0 0; letter-spacing:.5px}
.hero-cap p{font-size:19px; color:rgba(255,255,255,.78); margin:12px 0 0}
body.theme-game .hero-cap p{color:rgba(28,35,80,.8)}
/* floating orbs */
.orb{position:absolute; border-radius:50%; filter:blur(2px); z-index:1; background:radial-gradient(circle at 30% 30%,var(--halo),transparent 70%); opacity:.8; animation:drift 14s ease-in-out infinite}
.orb.b{width:300px;height:300px; top:-60px; left:-60px}
.orb.c{width:220px;height:220px; bottom:-50px; right:-40px; animation-delay:-5s}
.orb.d{width:140px;height:140px; top:40%; right:12%; animation-delay:-9s}
@keyframes drift{0%,100%{transform:translate(0,0)}33%{transform:translate(30px,-24px)}66%{transform:translate(-20px,20px)}}
.scrolldown{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:4; color:var(--hero-ink); font-size:30px; opacity:.7; animation:bob 1.8s ease-in-out infinite; text-decoration:none}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ===================== LAYOUT ===================== */
.wrap{max-width:1080px; margin:0 auto; padding:0 22px}
section.block{padding:64px 0}
.block.tint{background:linear-gradient(180deg,#fbfbfd,#f4f6fb)}
.lead{font-size:21px; line-height:1.8; color:#33373f}
.lead .zh{display:block; margin-top:14px; font-size:18px; color:#565b66; line-height:1.85}
h2.sec{font-family:var(--font-display); font-weight:600; font-size:clamp(26px,3.6vw,38px); margin:0 0 8px; color:var(--ink)}
.sec-eyebrow{font-family:var(--font-script); font-size:25px; color:var(--accent2); line-height:1; margin-bottom:2px}
.sec-head{text-align:center; max-width:720px; margin:0 auto 38px}
.sec-head p{font-size:18px; color:var(--muted)}

/* welcome split */
.split{display:grid; grid-template-columns:1.3fr .9fr; gap:42px; align-items:center}
.split .photo{border-radius:20px; overflow:hidden; box-shadow:0 22px 46px rgba(20,25,50,.16); transform:rotate(-1.4deg)}
.split .photo img{width:100%; height:100%; object-fit:cover}

/* ribbon */
.ribbon{background:linear-gradient(100deg,var(--accent),var(--accent2)); color:#fff; text-align:center;
  font-family:var(--font-display); font-weight:600; font-size:clamp(20px,2.6vw,27px); padding:26px 20px; letter-spacing:.3px}
.ribbon .heart{display:inline-block; animation:beat 1.3s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}30%{transform:scale(1.25)}}

/* video */
.video-wrap{max-width:880px; margin:0 auto}
.vframe{position:relative; padding-top:56.25%; border-radius:18px; overflow:hidden; box-shadow:0 24px 54px rgba(20,25,50,.22); background:#000}
.vframe iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video-grid{display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

/* feature banner image */
.feature{border-radius:18px; overflow:hidden; box-shadow:0 18px 40px rgba(20,25,50,.14); margin:0 auto; max-width:920px}

/* ===================== GALLERY ===================== */
.gallery{columns:3; column-gap:16px}
.gallery .gi{break-inside:avoid; margin:0 0 16px; border-radius:14px; overflow:hidden; cursor:zoom-in;
  box-shadow:0 8px 22px rgba(20,25,50,.12); background:#eef0f5; position:relative}
.gallery .gi img{width:100%; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.gallery .gi:hover img{transform:scale(1.06)}
.gallery .gi::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.18),transparent 40%); opacity:0; transition:.3s}
.gallery .gi:hover::after{opacity:1}

/* ===================== CARDS (hub) ===================== */
.cards{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.tcard{position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:210px;
  border-radius:20px; padding:24px; text-decoration:none; color:#fff; overflow:hidden; isolation:isolate;
  box-shadow:0 16px 38px rgba(20,25,50,.2); transition:transform .25s, box-shadow .25s}
.tcard:hover{transform:translateY(-7px); box-shadow:0 26px 54px rgba(20,25,50,.3)}
.tcard .emoji{font-size:46px; line-height:1; margin-bottom:auto}
.tcard h3{font-family:var(--font-display); font-weight:600; font-size:24px; margin:14px 0 2px}
.tcard span{font-size:16px; opacity:.92}
.tcard::before{content:''; position:absolute; inset:0; z-index:-1; opacity:.95}
.c1::before{background:linear-gradient(150deg,#ff8a4c,#ff5d8f)}
.c2::before{background:linear-gradient(150deg,#5b8def,#7b5cff)}
.c3::before{background:linear-gradient(150deg,#21c8a8,#10a0c0)}
.c4::before{background:linear-gradient(150deg,#f6a93b,#ef5d6f)}

/* lesson slides (english corner letter cards) */
.slides{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.slides img{border-radius:14px; box-shadow:0 8px 22px rgba(20,25,50,.12); cursor:zoom-in; transition:transform .3s}
.slides img:hover{transform:translateY(-4px)}

/* game zone */
.gamezone{border-radius:22px; padding:38px 30px; text-align:center; color:#1c2350;
  background:repeating-linear-gradient(45deg,#eaf7ff,#eaf7ff 18px,#dff0ff 18px,#dff0ff 36px); border:3px dashed #8fd0ff}
.gamezone .big{font-family:var(--font-display); font-weight:700; font-size:30px}
.pill{display:inline-block; background:#1c2350; color:#fff; border-radius:999px; padding:10px 22px; font-weight:600; text-decoration:none; margin-top:16px; font-size:17px}
.credit-note{font-size:16px; color:var(--muted); margin-top:18px}

/* breadcrumb back */
.subnav{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:34px}
.subnav a{font-size:16px; text-decoration:none; color:var(--accent2); border:1px solid var(--line); padding:8px 16px; border-radius:999px; transition:.18s; background:#fff}
.subnav a:hover{background:var(--accent2); color:#fff; border-color:var(--accent2)}

/* ===================== REVEAL ===================== */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}

/* page footer (above cb-credit) */
.page-foot{background:#1b1d24; color:rgba(255,255,255,.7); text-align:center; padding:40px 20px 22px}
.page-foot .ml{font-family:var(--font-script); font-size:27px; color:#fff}
.page-foot .row{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:12px; font-size:16px}
.page-foot a{color:var(--accent); text-decoration:none}

/* ===================== LIGHTBOX ===================== */
.lb{position:fixed; inset:0; z-index:200; background:rgba(8,8,14,.92); display:none; place-items:center; padding:30px}
.lb.open{display:grid}
.lb img{max-width:94vw; max-height:90vh; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb .x{position:absolute; top:18px; right:24px; color:#fff; font-size:40px; cursor:pointer; line-height:1; background:none; border:0}
.lb .nav-btn{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); color:#fff; border:0;
  font-size:30px; width:54px; height:54px; border-radius:50%; cursor:pointer}
.lb .prev{left:20px} .lb .next{right:20px}

/* ===================== RESPONSIVE ===================== */
@media (max-width:980px){ .gallery{columns:2} }
@media (max-width:720px){
  body{font-size:20px}
  .menu{position:fixed; inset:60px 0 auto 0; background:#16161e; flex-direction:column; align-items:stretch;
    padding:10px 14px 18px; gap:2px; display:none; border-bottom:1px solid rgba(255,255,255,.1)}
  .menu.show{display:flex}
  .menu>li{width:100%}
  .has-sub>a::after{float:right}
  .sub{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; background:rgba(255,255,255,.05); margin:2px 0 6px 12px; display:none}
  .menu>li.open .sub{display:block}
  .burger{display:block}
  .split{grid-template-columns:1fr; gap:26px}
  .split .photo{transform:none}
  section.block{padding:46px 0}
}
@media (max-width:520px){ .gallery{columns:1} }

/* ===================== STORY QUIZ GAME ===================== */
.quiz{max-width:780px; margin:0 auto; background:#fff; border-radius:26px; overflow:hidden;
  box-shadow:0 26px 60px rgba(20,25,50,.22); border:3px solid #ffe08a; position:relative}
.quiz-top{background:linear-gradient(110deg,#ff8a4c,#ff5d8f 55%,#7b5cff); color:#fff; padding:22px 26px; text-align:center}
.quiz-top h3{font-family:var(--font-display); font-weight:700; font-size:27px; margin:0}
.quiz-top p{margin:6px 0 0; font-size:16px; opacity:.95}
.quiz-bar{height:12px; background:#ffe6ef}
.quiz-bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,#ffd23f,#ff7a3c); transition:width .5s cubic-bezier(.2,.7,.2,1)}
.quiz-body{padding:24px 26px 30px}
.quiz-meta{display:flex; justify-content:space-between; align-items:center; font-size:16px; color:var(--muted); font-weight:600; margin-bottom:14px}
.quiz-meta .score b{color:#ef5d6f}
.q-photo{border-radius:16px; overflow:hidden; box-shadow:0 12px 28px rgba(20,25,50,.16); margin-bottom:18px; max-height:300px}
.q-photo img{width:100%; height:100%; max-height:300px; object-fit:cover}
.q-text{display:flex; align-items:flex-start; gap:12px; font-family:var(--font-display); font-weight:600; font-size:23px; line-height:1.4; color:var(--ink); margin-bottom:4px}
.q-zh{font-size:17px; color:var(--muted); margin:0 0 18px 44px}
.say-btn{flex:none; width:40px; height:40px; border-radius:50%; border:0; cursor:pointer; font-size:20px;
  background:#fff3d6; color:#e08a1a; box-shadow:0 4px 10px rgba(224,138,26,.25); transition:transform .15s}
.say-btn:hover{transform:scale(1.12)}
.say-btn:active{transform:scale(.9)}
.opts{display:grid; gap:12px}
.opt{display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  background:#f6f7fb; border:2.5px solid #e7e9ef; border-radius:16px; padding:15px 18px; font-size:19px;
  font-family:var(--font-body); color:var(--ink); transition:.16s}
.opt:hover:not(:disabled){border-color:#ffb13c; background:#fff8ec; transform:translateY(-2px)}
.opt .key{flex:none; width:34px; height:34px; border-radius:10px; background:#fff; border:2px solid #e7e9ef;
  display:grid; place-items:center; font-weight:700; font-family:var(--font-display); color:#8a8f9c}
.opt.correct{border-color:#27c08a; background:#e8fbf2}
.opt.correct .key{background:#27c08a; color:#fff; border-color:#27c08a}
.opt.wrong{border-color:#ff6b6b; background:#fff0f0}
.opt.wrong .key{background:#ff6b6b; color:#fff; border-color:#ff6b6b}
.opt:disabled{cursor:default}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(5px)}50%{transform:translateX(-7px)}}
.opt.shake{animation:shake .4s}
.explain{margin-top:16px; padding:15px 18px; border-radius:14px; background:#eef4ff; font-size:17px; line-height:1.6; display:none}
.explain.show{display:block; animation:pop .35s}
.explain b{color:#3a6fd0}
.explain .zh{display:block; margin-top:4px; color:var(--muted); font-size:16px}
@keyframes pop{0%{transform:scale(.94);opacity:0}100%{transform:scale(1);opacity:1}}
.quiz-next{margin-top:18px; text-align:right}
.btn-go{font-family:var(--font-display); font-weight:600; font-size:18px; color:#fff; background:linear-gradient(100deg,#ff7a3c,#ff5d8f);
  border:0; border-radius:999px; padding:13px 30px; cursor:pointer; box-shadow:0 10px 22px rgba(255,93,143,.35); transition:transform .15s; opacity:0; pointer-events:none}
.btn-go.show{opacity:1; pointer-events:auto}
.btn-go:hover{transform:translateY(-2px)}
/* result */
.quiz-result{text-align:center; padding:18px 10px}
.quiz-result .big{font-family:var(--font-display); font-weight:700; font-size:60px; line-height:1}
.quiz-result h4{font-family:var(--font-display); font-size:26px; margin:10px 0 4px}
.quiz-result p{font-size:18px; color:var(--muted); margin:0 0 6px}
.stars{font-size:38px; letter-spacing:6px; margin:8px 0}
/* confetti */
.confetti{position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:hidden; z-index:5}
.confetti i{position:absolute; top:-12px; width:10px; height:14px; border-radius:2px; opacity:.95; animation:fall linear forwards}
@keyframes fall{to{transform:translateY(620px) rotate(540deg); opacity:0}}
@media (max-width:720px){
  .q-text{font-size:21px} .opt{font-size:18px}
  .quiz-body{padding:20px 16px 24px}
}