/* ==========================================================================
   The Arcane Lexicon — style.css
   Dark-first, jewel-toned; light theme via prefers-color-scheme / host theme
   ========================================================================== */

:root{
  --bg:#0f1422;
  --bg2:#151c31;
  --card:#1a2138;
  --card-edge:#2b3557;
  --ink:#eef1fb;
  --muted:#98a2c2;
  --line:#303b61;
  --accent:#f4a83d;
  --good:#3ddc97;
  --bad:#ff6b81;
  --paper:#f3e8cb;
  --shadow:0 14px 40px rgba(2,5,16,.45);
  --glass:rgba(255,255,255,.05);
  --glass-line:rgba(255,255,255,.16);
  --wood-hi:#a5713e; --wood-lo:#6d4322;
  font-size:16px;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f3ede0; --bg2:#ece3cf;
    --card:#fffdf6; --card-edge:#e2d7bd;
    --ink:#272c40; --muted:#69708f;
    --line:#ded2b6; --accent:#b4680e;
    --good:#0f9d63; --bad:#d8385a;
    --shadow:0 14px 34px rgba(90,70,30,.18);
    --glass:rgba(60,50,20,.04);
    --glass-line:rgba(60,50,20,.22);
    --wood-hi:#b07a45; --wood-lo:#7a4c26;
  }
}
:root[data-theme="light"]{
  --bg:#f3ede0; --bg2:#ece3cf;
  --card:#fffdf6; --card-edge:#e2d7bd;
  --ink:#272c40; --muted:#69708f;
  --line:#ded2b6; --accent:#b4680e;
  --good:#0f9d63; --bad:#d8385a;
  --shadow:0 14px 34px rgba(90,70,30,.18);
  --glass:rgba(60,50,20,.04);
  --glass-line:rgba(60,50,20,.22);
  --wood-hi:#b07a45; --wood-lo:#7a4c26;
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  font-family:"Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(1100px 480px at 85% -10%, rgba(122,90,255,.14), transparent 60%),
    radial-gradient(900px 420px at -10% 20%, rgba(255,166,77,.10), transparent 55%),
    linear-gradient(var(--bg2), var(--bg));
  color:var(--ink);
  min-height:100%;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1100px; margin:0 auto; padding:clamp(14px, 3vw, 28px)}

/* ------------------------------ HEADER -------------------------------- */
.top{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:20px;
}
.brand h1{
  font-family:"Fraunces", Georgia, "Times New Roman", serif;
  font-weight:900; font-optical-sizing:auto;
  font-size:clamp(1.55rem, 4.6vw, 2.35rem);
  letter-spacing:.4px; line-height:1.05;
}
.brand h1 em{color:var(--accent); font-style:normal}
.brand .sub{
  color:var(--muted); font-size:.85rem; letter-spacing:.14em;
  text-transform:uppercase; margin-top:4px;
}
.topActions{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.pill{
  display:flex; align-items:center; gap:7px;
  background:var(--glass); border:1px solid var(--glass-line);
  padding:8px 14px; border-radius:999px; font-weight:600; font-size:.92rem;
  min-height:36px;
}
.pill svg{width:15px;height:15px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pill #pillStreak svg{stroke:currentColor}
.pillLabel{color:var(--muted);font-weight:400;font-size:.8rem}
.pill.hot{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 0 18px rgba(244,168,61,.35)}
.iconBtn{
  width:44px;height:44px;border-radius:12px;cursor:pointer;
  background:var(--glass);border:1px solid var(--glass-line);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .15s, transform .12s, background .15s;
}
.iconBtn:hover{border-color:var(--accent); transform:translateY(-1px)}
.iconBtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.confirmWrap{position:relative}
.confirm{
  position:absolute; right:0; top:calc(100% + 8px); z-index:40;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:14px; width:max-content; box-shadow:var(--shadow); font-size:.9rem;
}
.confirm p{margin-bottom:10px; color:var(--ink)}
.confirmRow{display:flex; gap:8px}
.mini{
  min-width:58px;min-height:40px;border-radius:9px;cursor:pointer;font-weight:700;
  border:1px solid var(--line); background:transparent;color:var(--ink);
}
.mini:hover{border-color:var(--accent)}
.mini.danger{border-color:var(--bad); color:var(--bad)}
.mini.danger:hover{background:var(--bad); color:#fff}

/* ------------------------------ LAYOUT --------------------------------- */
.grid{display:grid; grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr); gap:22px; align-items:start}
@media (max-width:920px){ .grid{grid-template-columns:1fr} }

.card{
  background:var(--card);
  border:1px solid var(--card-edge);
  border-radius:20px;
  box-shadow:var(--shadow);
}

/* ------------------------------- QUIZ ----------------------------------- */
.quizCard{padding:clamp(18px, 3vw, 30px); position:relative; overflow:hidden}
.quizCard::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(420px 160px at 88% -6%, rgba(244,168,61,.09), transparent 60%);
}
.qmeta{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:16px}
.qnum{
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); font-weight:800;
}
.ghostBtn{
  background:none;border:none;color:var(--muted);cursor:pointer;
  font:inherit;font-size:.85rem;text-decoration:underline dotted;
  text-underline-offset:4px; min-height:44px; padding:0 6px;
}
.ghostBtn:hover{color:var(--ink)}
.ghostBtn.light{color:#8d826a}

.wordBox{text-align:center; padding:clamp(14px,2vw,22px) 6px clamp(10px,1.6vw,16px)}
.bigWord{
  font-family:"Fraunces", Georgia, "Times New Roman", serif;
  font-weight:900; font-optical-sizing:auto;
  font-size:clamp(2.1rem, 7.2vw, 3.6rem);
  line-height:1.05; letter-spacing:.5px;
}
.bigWord.pop{animation:wordIn .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes wordIn{from{opacity:0; transform:translateY(14px) scale(.92); filter:blur(4px)} to{opacity:1;transform:none;filter:none}}
.pron{
  margin-top:8px; color:var(--muted); font-size:.98rem;
  font-family:"Fraunces", Georgia, serif; font-style:italic; letter-spacing:.06em;
}
.qprompt{
  text-align:center; color:var(--muted); font-size:.9rem; margin-bottom:16px;
}
.keyHint{opacity:.55; font-size:.8rem}
@media (hover:none){ .keyHint{display:none} }

.opts{display:grid; grid-template-columns:1fr 1fr; gap:11px}
@media (max-width:620px){ .opts{grid-template-columns:1fr} }
.opt{
  display:flex; align-items:center; gap:12px; text-align:left;
  background:var(--glass); border:1.6px solid var(--line);
  color:var(--ink); border-radius:14px; cursor:pointer;
  padding:13px 14px; min-height:56px; font:inherit; font-size:.95rem; line-height:1.35;
  transition:transform .13s, border-color .15s, background .15s, opacity .25s;
}
.opt:not(:disabled):hover{transform:translateY(-2px); border-color:var(--chip)}
.opt:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.chip{
  flex:none; width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;font-weight:800;font-size:.85rem;color:#141018;
  background:var(--chip);
}
.opt.isRight{
  border-color:var(--good);
  background:color-mix(in srgb, var(--good) 12%, transparent);
  animation:rightPulse .5s ease;
}
@keyframes rightPulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent)}
  100%{box-shadow:0 0 0 14px transparent}
}
.opt.isWrong{
  border-color:var(--bad);
  background:color-mix(in srgb, var(--bad) 12%, transparent);
  animation:shake .38s ease;
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-6px)} 48%{transform:translateX(6px)} 74%{transform:translateX(-3px)}
}
.opt.dimmed{opacity:.38}

.verdict{margin-top:20px; animation:rise .35s ease both}
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1;transform:none}}
.verdict h3{font-size:1.18rem; margin-bottom:10px; font-family:"Fraunces",Georgia,serif}
.verdict h3.good{color:var(--good)}
.verdict h3.bad{color:var(--bad)}
.defBox{
  border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:12px; padding:14px 16px; background:var(--glass);
}
.defLine{font-size:1rem; line-height:1.5}
.defLine strong{font-family:"Fraunces",Georgia,serif; font-size:1.1rem}
.exLine{margin-top:8px; color:var(--muted); font-style:italic; font-family:"Fraunces",Georgia,serif; font-size:.93rem; line-height:1.5}

.footRow{display:flex; justify-content:flex-end; margin-top:18px}
.primaryBtn{
  background:linear-gradient(160deg, #ffc766, var(--accent) 60%, #d98a16);
  color:#231703; font:inherit; font-weight:800; font-size:1rem;
  border:none; border-radius:13px; padding:14px 26px; min-height:48px; cursor:pointer;
  box-shadow:0 6px 18px rgba(212,140,25,.4);
  transition:transform .13s, box-shadow .15s;
}
.primaryBtn:hover{transform:translateY(-2px); box-shadow:0 9px 24px rgba(212,140,25,.5)}
.primaryBtn:focus-visible{outline:3px solid var(--ink); outline-offset:2px}

/* ----------------------------- TROPHIES -------------------------------- */
.trophyCard{padding:18px clamp(14px,2.4vw,24px) 22px}
.trophyHead h2{
  font-family:"Fraunces",Georgia,serif; font-weight:700;
  font-size:1.3rem; letter-spacing:.3px;
}
.progressStrip{color:var(--muted); font-size:.86rem; margin-top:4px}
.progressStrip strong{color:var(--accent)}

.tabs{
  display:flex; gap:6px; margin:14px 0; padding:5px;
  background:var(--glass); border:1px solid var(--line); border-radius:12px;
}
.tab{
  flex:1; min-height:42px; border:none; border-radius:9px; cursor:pointer;
  background:transparent; color:var(--muted); font:inherit; font-weight:700; font-size:.87rem;
  transition:background .15s,color .15s;
}
.tab:hover{color:var(--ink)}
.tab.active{background:var(--accent); color:#231703}
.tab:focus-visible{outline:2px solid var(--ink); outline-offset:1px}

.viewPane{animation:rise .3s ease both}

/* ---- jar ---- */
.jarShell{
  position:relative; height:340px;
  border:2px solid var(--glass-line);
  border-radius:16px 16px 34px 34px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 30%, rgba(0,0,10,.10));
  box-shadow:inset 0 0 30px rgba(0,0,0,.28);
  overflow:hidden;
}
.jarShell::after{                       /* neck rim */
  content:""; position:absolute; top:0; left:8%; right:8%; height:8px;
  border-radius:0 0 12px 12px;
  background:var(--glass-line);
  box-shadow:0 1px 0 rgba(255,255,255,.18);
}
.jarInner{position:absolute; inset:6px 6px 6px 6px; overflow:hidden}
.jarInner::before{                      /* glass sheen */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:5;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 40%, rgba(255,255,255,.05) 47%, transparent 58%);
}
.marble{
  position:absolute; width:26px; height:26px; border-radius:50%;
  box-shadow:0 2px 5px rgba(0,0,0,.35), inset 0 -3px 5px rgba(0,0,0,.25);
}
.marble.drop{animation:marbleDrop .55s cubic-bezier(.3,1.5,.5,1) both; animation-delay:var(--delay,0s)}
@keyframes marbleDrop{
  from{translate:0 -190px; opacity:0}
  60%{opacity:1}
  to{translate:0 0; opacity:1}
}
.jarBadge{
  position:absolute; left:10px; right:10px; z-index:6; text-align:center;
  font-size:.74rem; font-weight:700; color:var(--muted);
}
.caption{margin-top:12px; color:var(--muted); font-size:.85rem; line-height:1.5; min-height:2.6em}

/* ---- abacus ---- */
.abacusFrame{
  position:relative; height:340px;
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 22%),
    linear-gradient(160deg, var(--wood-hi), var(--wood-lo) 75%, #503014);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25), inset 0 -6px 14px rgba(0,0,0,.4), var(--shadow);
  padding:14px 10px;
  overflow:hidden;
}
.abacusFrame::before, .abacusFrame::after{
  content:""; position:absolute; left:10px; right:10px; height:12px; border-radius:7px;
  background:linear-gradient(#8a5a2c, #4b2c12); box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.abacusFrame::before{top:6px}
.abacusFrame::after{bottom:6px}
.rods{
  height:100%; display:grid; grid-template-columns:repeat(10,1fr);
  align-items:end; gap:0 2px; padding:8px 4px;
}
.rod{
  position:relative; height:100%; border-radius:12px;
  background:linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.14) 45%, rgba(0,0,0,.35));
}
.bead{
  position:absolute; left:50%; transform:translateX(-50%);
  width:78%; aspect-ratio:28/21; border-radius:999px;
  box-shadow:0 3px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5);
  animation:beadSlide .4s cubic-bezier(.2,1.3,.4,1) both;
}
.bead::after{                 /* threading hole */
  content:""; position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:5px; height:8px; border-radius:3px; background:rgba(20,10,2,.55);
  box-shadow:0 0 3px rgba(0,0,0,.5);
}
@keyframes beadSlide{from{opacity:0; transform:translate(-50%,-24px) scale(.4)} to{opacity:1;transform:translate(-50%,0) scale(1)}}
.rods ~ .hint{position:absolute}

/* ---- honors ---- */
.honorsList{list-style:none; display:flex; flex-direction:column; gap:9px}
.honorsList li{
  display:flex; align-items:center; gap:13px;
  border:1px solid var(--line); border-radius:13px;
  padding:12px 14px; background:var(--glass); min-height:64px;
}
.medalDot{
  flex:none; width:34px;height:34px;border-radius:50%;
  border:2px solid rgba(255,255,255,.25);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.honorsList li > div{flex:1; min-width:0}
.honorsList strong{font-size:.95rem; display:block}
.honorsList small{color:var(--muted); font-size:.78rem}
.earned{color:var(--good); display:inline-flex}
.earned svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pendingTxt{color:var(--muted); font-weight:700; font-variant-numeric:tabular-nums}

/* --------------------------- MODAL / CERT ------------------------------- */
.modal{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:16px}
.modalBackdrop{position:absolute; inset:0; background:rgba(8,10,22,.72); backdrop-filter:blur(5px)}
.sheetWrap{
  position:relative; width:min(620px, 94vw); max-height:94vh; overflow:auto;
  animation:sheetIn .4s cubic-bezier(.2,1.2,.4,1) both; text-align:center;
}
@keyframes sheetIn{from{opacity:0; transform:translateY(26px) scale(.94)} to{opacity:1;transform:none}}
.certSheet{
  background:
    radial-gradient(240px 120px at 20% 0%, rgba(255,255,255,.5), transparent 60%),
    linear-gradient(160deg, #faf3de, #efe3c2);
  color:#3a3120;
  border-radius:14px;
  border:6px double #a29066;
  padding:clamp(22px,4.5vw,40px) clamp(18px,4vw,44px) clamp(20px,3.6vw,34px);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  --ribbon:var(--accent);
}
.certKicker{
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:#8a7b58; font-weight:700; margin-bottom:10px;
}
.certTitle{
  font-family:"Fraunces",Georgia,serif; font-weight:900;
  font-size:clamp(1.5rem, 5vw, 2.15rem); color:#33291a; line-height:1.12;
}
.certAward{
  margin-top:14px; font-style:italic; font-family:"Fraunces",Georgia,serif;
  color:#6d6350; font-size:.95rem;
}
.certTier{
  font-family:"Fraunces",Georgia,serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(1.7rem, 6.2vw, 2.6rem); margin-top:6px; letter-spacing:.02em;
}
.certStats{margin-top:10px; color:#5c5342; font-size:.92rem; font-variant-numeric:tabular-nums}
.sealArea{display:flex; justify-content:center; margin:14px 0 8px}
.seal{width:112px; height:112px}
.seal .ribbon{fill:#a02822; opacity:.92}
.sealLetter{font-size:44px; fill:#ffe9e4}
.certDate{color:#6d6350; font-size:.88rem; margin-top:6px}
.certRule{display:flex; align-items:center; gap:10px; margin:4px 0 12px}
.certRule.bottom{margin:14px 0 0}
.certRule span{flex:1; height:1px; background:linear-gradient(90deg, transparent, #a29066)}
.certRule span:last-child{background:linear-gradient(90deg, #a29066, transparent)}
.certRule svg{width:15px;height:15px;flex:none; fill:#a29066}

.modalActions{display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap}
.modalActions .ghostBtn.light{color:#efe8d5; text-shadow:0 1px 4px rgba(0,0,0,.5)}

/* ------------------------------ TOAST ----------------------------------- */
.toast{
  position:fixed; bottom:18px; left:50%; translate:-50% 16px; z-index:200;
  background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:11px 20px; font-size:.9rem; font-weight:600;
  box-shadow:var(--shadow); opacity:0; transition:opacity .3s, translate .3s;
  pointer-events:none;
}
.toast.show{opacity:1; translate:-50% 0}

.noscriptNote{padding:30px; text-align:center; color:var(--ink)}

footer.footNote{
  margin-top:22px; text-align:center; color:var(--muted);
  font-size:.8rem; font-style:italic;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}