/* Medinovatech Academy — watercolor golden VN theme */
:root{
  --gold:#e7b75f; --gold-deep:#c9912f; --cream:#fdf6e6; --parchment:#f4e7c8;
  --ink:#4a3520; --ink-soft:#6b5236; --teal:#3aa6a0; --mint:#5fc98a; --rose:#e0716b;
  --panel:rgba(253,246,230,.94); --panel-edge:rgba(201,145,47,.55);
  --shadow:0 8px 28px rgba(74,53,32,.28);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;font-family:"Segoe UI",system-ui,sans-serif;color:var(--ink)}
#app{position:fixed;inset:0;background:#2a1d10;display:flex;align-items:center;justify-content:center}
#stage{position:relative;width:100%;height:100%;max-width:1100px;max-height:720px;
  margin:auto;overflow:hidden;background:#1c130a}
@media(min-aspect-ratio:16/10){#stage{border-radius:14px;box-shadow:var(--shadow)}}

/* layers */
#bg{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:opacity .5s ease;filter:saturate(1.02)}
#bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 30%,transparent 55%,rgba(40,25,8,.45))}
#portrait{position:absolute;left:50%;bottom:200px;transform:translateX(-50%);
  height:54%;max-height:430px;filter:drop-shadow(0 12px 18px rgba(40,25,8,.45));
  opacity:0;transition:opacity .35s ease, transform .35s ease;border-radius:16px}
#portrait.show{opacity:1}
#portrait.pulse{animation:pop .4s ease}
@keyframes pop{0%{transform:translateX(-50%) scale(.96)}60%{transform:translateX(-50%) scale(1.03)}100%{transform:translateX(-50%) scale(1)}}

/* top bar */
#topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;
  padding:10px 14px;z-index:6;background:linear-gradient(rgba(28,19,10,.55),transparent)}
.badge{background:var(--panel);border:1.5px solid var(--panel-edge);border-radius:20px;
  padding:5px 12px;font-size:13px;font-weight:700;color:var(--ink);box-shadow:var(--shadow)}
.badge small{font-weight:600;color:var(--ink-soft)}
#loc{font-weight:800;letter-spacing:.3px}
.spacer{flex:1}
#langBtn{cursor:pointer;border:1.5px solid var(--panel-edge);background:var(--panel);
  border-radius:20px;padding:5px 12px;font-size:13px;font-weight:700;color:var(--ink)}
#langBtn:hover{background:#fff}

/* dialogue box */
#box{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:14px clamp(14px,4vw,42px) 20px}
#namep{display:inline-block;background:var(--gold);color:var(--ink);font-weight:800;
  padding:5px 16px;border-radius:12px 12px 0 0;border:1.5px solid var(--gold-deep);
  border-bottom:none;font-size:15px;box-shadow:var(--shadow)}
#panel{background:var(--panel);border:1.5px solid var(--panel-edge);border-radius:0 14px 14px 14px;
  padding:16px 18px;box-shadow:var(--shadow);min-height:96px}
#text{font-size:clamp(15px,2.4vw,18px);line-height:1.5;margin:0 0 8px}
#options{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.opt{text-align:left;cursor:pointer;border:1.6px solid var(--gold-deep);background:#fff8ea;
  color:var(--ink);border-radius:12px;padding:11px 14px;font-size:clamp(14px,2.2vw,16px);
  font-weight:600;line-height:1.35;transition:transform .08s,background .15s,border-color .15s}
.opt:hover{background:#fff;transform:translateY(-1px)}
.opt.correct{background:#e7fbef;border-color:var(--mint);box-shadow:0 0 0 3px rgba(95,201,138,.35)}
.opt.wrong{background:#fdeceb;border-color:var(--rose);box-shadow:0 0 0 3px rgba(224,113,107,.3)}
.opt.dim{opacity:.5;pointer-events:none}
#prompt{font-size:13px;color:var(--ink-soft);font-style:italic;margin:8px 2px 0}

/* generic button */
.btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:none;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#fff8ea;font-weight:800;
  border-radius:12px;padding:11px 20px;font-size:16px;box-shadow:var(--shadow);
  text-shadow:0 1px 1px rgba(74,53,32,.4)}
.btn:hover{filter:brightness(1.06)}
.btn.calm{background:linear-gradient(180deg,#56b9b2,var(--teal))}
.btn.rose{background:linear-gradient(180deg,#e88a85,var(--rose))}
#nextWrap{margin-top:12px;display:flex;justify-content:flex-end;gap:10px}

/* verdict flash */
#verdict{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%) scale(.8);
  z-index:7;font-size:clamp(30px,8vw,64px);font-weight:900;letter-spacing:2px;opacity:0;
  pointer-events:none;text-shadow:0 4px 14px rgba(40,25,8,.5)}
#verdict.go{animation:flash 1s ease}
#verdict.ok{color:var(--mint)} #verdict.no{color:var(--rose)}
@keyframes flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  25%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  75%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}

/* flashcard / library modal */
#modal{position:absolute;inset:0;z-index:8;display:none;align-items:center;justify-content:center;
  background:rgba(28,19,10,.6);padding:18px}
#modal.show{display:flex}
#modal.library{background:rgba(28,19,10,.72)}
#card{width:min(560px,94%);max-height:86%;overflow:auto;background:var(--cream);
  border:2px solid var(--gold-deep);border-radius:18px;box-shadow:var(--shadow);
  padding:20px 22px;animation:rise .35s ease}
#card.lib{border-color:var(--teal);background:#f3f9f4}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#cardTag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:1px;
  padding:4px 12px;border-radius:20px;background:var(--gold);color:var(--ink);margin-bottom:10px}
#card.lib #cardTag{background:var(--teal);color:#fff}
#cardTitle{margin:0 0 10px;font-size:clamp(19px,3.4vw,24px);color:var(--ink)}
#cardBody{font-size:clamp(14px,2.4vw,16px);line-height:1.6;color:var(--ink-soft);margin:0 0 16px}
#cardRef{font-size:12px;color:var(--gold-deep);font-weight:700;margin-top:4px}
#cardBtns{display:flex;justify-content:flex-end;gap:10px}

/* title & end screens */
.screen{position:absolute;inset:0;z-index:9;display:none;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:24px;
  background-size:cover;background-position:center}
.screen.show{display:flex}
.screen::before{content:"";position:absolute;inset:0;background:rgba(28,19,10,.45)}
.screen>*{position:relative;z-index:1}
.logo{font-size:clamp(30px,7vw,56px);font-weight:900;color:var(--cream);letter-spacing:1px;
  text-shadow:0 4px 18px rgba(0,0,0,.5);margin:0}
.tagline{color:var(--parchment);font-size:clamp(15px,3vw,20px);margin:8px 0 26px;font-weight:600}
.big{font-size:clamp(26px,6vw,44px)}
.statline{color:var(--cream);font-weight:700;margin:6px 0 22px;font-size:clamp(15px,3vw,19px)}
.affwrap{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:6px 0 24px}
.affchip{background:var(--panel);border:1.5px solid var(--panel-edge);border-radius:14px;
  padding:8px 12px;font-size:13px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:6px}
.affchip b{color:var(--teal)}
#backHub{color:var(--parchment);font-size:13px;font-weight:700;text-decoration:none;opacity:.85;
  text-shadow:0 1px 6px rgba(0,0,0,.6)}
#backHub:hover{opacity:1;text-decoration:underline}

/* ---------- 3D anatomy room ---------- */
#anatomy{position:absolute;inset:0;z-index:11;display:none;background:#1c130a}
#anatomy.show{display:block}
#anaCanvas{position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 30%,#fbeccb 0%,#f0d49e 45%,#cf9b54 100%)}
#anaCanvas canvas{display:block;width:100%;height:100%;touch-action:none}
.ana-bar{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:8px;
  padding:10px 12px;background:linear-gradient(rgba(28,19,10,.6),transparent)}
.ana-title{font-weight:800;color:var(--cream);font-size:15px;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.ana-bar .btn{padding:8px 14px;font-size:14px}
.ana-hint{position:absolute;bottom:10px;left:0;right:0;z-index:2;text-align:center;
  color:var(--parchment);font-size:12px;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.7);pointer-events:none}
#anaLoading{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  color:#5a3d20;font-weight:800;font-size:16px;text-shadow:0 1px 4px rgba(255,255,255,.5);pointer-events:none}
.ana-labels{position:absolute;inset:0;z-index:2;pointer-events:none}
.ana-label{position:absolute;transform:translate(-50%,-140%);pointer-events:auto;cursor:pointer;
  background:var(--panel);border:1.5px solid var(--gold-deep);border-radius:14px;
  padding:3px 9px;font-size:11px;font-weight:700;color:var(--ink);white-space:nowrap;
  box-shadow:0 3px 10px rgba(0,0,0,.4)}
.ana-label::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--gold-deep)}
.ana-label:hover{background:#fff;border-color:var(--teal)}
#anaInfo{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:4;display:none;
  width:min(520px,92%);background:var(--cream);border:2px solid var(--teal);border-radius:16px;
  padding:16px 18px;box-shadow:var(--shadow)}
#anaInfo.show{display:block;animation:rise .3s ease}
#anaInfoTag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1px;
  padding:3px 11px;border-radius:20px;background:var(--teal);color:#fff;margin-bottom:8px}
#anaInfoTitle{margin:0 0 6px;font-size:19px;color:var(--ink)}
#anaInfoBody{margin:0 0 12px;font-size:15px;line-height:1.55;color:var(--ink-soft)}
#anaInfo .btn{padding:8px 16px;font-size:14px;float:right}