/* ═══════════════════════════════════════════════════════════════════
   INANI ACADEMY — "The Quarry Face"
   obsidian panels · gold veining · lot-stamp typography
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --ink:#0b0a09;
  --ink2:#100e0d;
  --panel:#15120f;
  --panel2:#1d1915;
  --edge:#2b2521;
  --edge2:#3a322c;
  --bone:#ece5db;
  --mute:#8d8278;
  --mute2:#63594f;
  --gold:#c9a227;
  --gold-lt:#e9d394;
  --jade:#4fb286;
  --jasper:#cb4a40;
  --r:3px;
  --maxw:1120px;
  --ff-d:"Bricolage Grotesque",sans-serif;
  --ff-b:"DM Sans",sans-serif;
  --ff-m:"JetBrains Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--ff-b);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--ff-d);font-weight:700;letter-spacing:-.025em;line-height:1.05;margin:0}
.num,code,kbd{font-family:var(--ff-m);font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
::selection{background:var(--gold);color:#120f0b}

/* grain overlay ---------------------------------------------------- */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* scrollbar -------------------------------------------------------- */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:var(--ink)}
*::-webkit-scrollbar-thumb{background:var(--edge);border-radius:9px}
*::-webkit-scrollbar-thumb:hover{background:var(--edge2)}

/* ═══════════════════════ GATE ═══════════════════════ */
.gate{position:fixed;inset:0;z-index:500;display:grid;place-items:center;overflow:hidden}
.gate-bg{
  position:absolute;inset:-6%;
  background:url("img/stone/maharaja-backlit.jpg") center/cover no-repeat;
  filter:saturate(.72) brightness(.5) contrast(1.1);
  transform:scale(1.06);
  animation:drift 46s ease-in-out infinite alternate;
}
.gate-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(135% 105% at 50% 42%, rgba(11,10,9,.12) 0%, rgba(11,10,9,.78) 58%, rgba(11,10,9,.97) 100%),
    linear-gradient(180deg,rgba(11,10,9,.7),transparent 30%,rgba(11,10,9,.9));
}
@keyframes drift{from{transform:scale(1.06) translate3d(-1.2%,-.8%,0)}to{transform:scale(1.12) translate3d(1.4%,1%,0)}}

.gate-inner{position:relative;text-align:center;padding:32px 24px;max-width:580px;width:100%}
.gate-mark svg{width:84px;height:42px;stroke:var(--gold);stroke-width:3;fill:none;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:260;stroke-dashoffset:260;animation:draw 1.5s .15s cubic-bezier(.65,0,.35,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.gate-eyebrow{
  font-family:var(--ff-m);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:#9a8e80;margin:20px 0 14px;text-shadow:0 1px 14px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.9);
  opacity:0;animation:rise .8s .5s both;
}
.gate-title{
  font-size:clamp(54px,13vw,96px);font-weight:800;letter-spacing:-.045em;
  opacity:0;animation:rise .9s .65s both;
}
.gate-title em{font-style:normal;color:var(--gold-lt);display:block;
  text-shadow:0 0 52px rgba(201,162,39,.3)}
.gate-sub{color:var(--mute);max-width:40ch;margin:18px auto 30px;font-size:14.5px;
  opacity:0;animation:rise .9s .85s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

#gate-form{opacity:0;animation:rise .9s 1s both}
.gate-field{
  display:flex;gap:0;max-width:400px;margin:0 auto;
  border:1px solid var(--edge2);background:rgba(10,9,8,.72);backdrop-filter:blur(14px);
  border-radius:var(--r);overflow:hidden;
  transition:border-color .25s,box-shadow .25s;
}
.gate-field:focus-within{border-color:var(--gold);box-shadow:0 0 0 1px rgba(201,162,39,.3),0 0 40px -12px rgba(201,162,39,.5)}
#pw{
  flex:1;min-width:0;background:none;border:0;outline:0;color:var(--bone);
  padding:15px 18px;font-family:var(--ff-m);font-size:14px;letter-spacing:.14em;
}
#pw::placeholder{color:var(--mute2);letter-spacing:.2em}
#gate-btn{
  padding:0 26px;background:var(--gold);color:#120f0b;font-weight:700;
  font-family:var(--ff-d);letter-spacing:.02em;transition:background .2s;
}
#gate-btn:hover{background:var(--gold-lt)}
#gate-btn[disabled]{opacity:.5;cursor:wait}
.gate-msg{min-height:22px;font-family:var(--ff-m);font-size:11.5px;letter-spacing:.08em;margin:14px 0 0;color:var(--jasper)}
.gate-msg.ok{color:var(--jade)}
.gate-foot{font-family:var(--ff-m);font-size:9px;letter-spacing:.18em;color:#4a4139;margin-top:34px;
  opacity:0;animation:rise .9s 1.3s both}
.gate.out{animation:gateOut .8s cubic-bezier(.7,0,.3,1) forwards}
@keyframes gateOut{to{opacity:0;transform:scale(1.07);visibility:hidden}}

/* ═══════════════════════ CHROME ═══════════════════════ */
.topbar{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:18px;
  padding:0 20px;height:56px;
  background:rgba(11,10,9,.86);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--edge);
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--ff-d);font-size:13px;letter-spacing:.14em}
.brand b{color:var(--gold-lt);font-weight:700}
.brand-mark{width:28px;height:15px;stroke:var(--gold);stroke-width:4;fill:none;stroke-linejoin:round}
.topbar-stats{margin-left:auto;display:flex;gap:26px}
.tstat{text-align:right;line-height:1.15}
.tstat span{display:block;font-size:13.5px;font-weight:700;font-family:var(--ff-d)}
.tstat .num{color:var(--gold-lt)}
.tstat em{font-style:normal;font-family:var(--ff-m);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute2)}
.burger{display:none;width:26px;height:18px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2px;background:var(--bone);border-radius:2px;transition:.25s}

.shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:calc(100vh - 56px)}

/* ── rail / core sample ── */
.rail{
  border-right:1px solid var(--edge);padding:24px 0 20px;
  display:flex;flex-direction:column;gap:22px;
  position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;
  background:linear-gradient(180deg,var(--ink2),var(--ink));
}
.core{padding:0 20px}
.core-label{font-family:var(--ff-m);font-size:8.5px;letter-spacing:.28em;color:var(--mute2);margin-bottom:10px}
.core-tube{
  position:relative;height:118px;border:1px solid var(--edge2);border-radius:2px;
  background:
    repeating-linear-gradient(180deg,rgba(255,255,255,.012) 0 3px,transparent 3px 6px),
    var(--ink);
  overflow:hidden;
}
.core-fill{
  position:absolute;left:0;right:0;bottom:0;height:0%;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold) 28%,#8a6c16 100%);
  transition:height 1.1s cubic-bezier(.4,0,.2,1);
}
.core-fill::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.14) 0 2px,transparent 2px 7px);
}
.core-ticks{position:absolute;inset:0;pointer-events:none}
.core-ticks i{position:absolute;left:0;right:0;height:1px;background:rgba(236,229,219,.1)}
.core-ticks i.hit{background:rgba(236,229,219,.3)}
.core-now{margin-top:12px}
.core-mohs{display:flex;align-items:baseline;gap:6px}
.core-mohs span{font-family:var(--ff-d);font-size:30px;font-weight:800;color:var(--gold-lt);line-height:1}
.core-mohs em{font-style:normal;font-family:var(--ff-m);font-size:8.5px;letter-spacing:.2em;color:var(--mute2);text-transform:uppercase}
.core-title{font-family:var(--ff-d);font-size:17px;font-weight:700;margin-top:3px}
.core-line{font-size:12px;color:var(--mute);line-height:1.45;margin-top:3px}
.core-next{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.1em;color:var(--mute2);margin-top:9px}

.nav{display:flex;flex-direction:column;padding:0 10px}
.nav button{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r);
  font-size:13.5px;color:var(--mute);text-align:left;transition:.16s;position:relative;
}
.nav button i{font-style:normal;width:15px;text-align:center;font-size:11px;color:var(--mute2);transition:.16s}
.nav button b{margin-left:auto;font-family:var(--ff-m);font-size:9.5px;background:var(--jasper);color:#fff;
  padding:1px 6px;border-radius:9px;font-weight:700}
.nav button b:empty{display:none}
.nav button:hover{color:var(--bone);background:var(--panel)}
.nav button.on{color:var(--bone);background:var(--panel2)}
.nav button.on i{color:var(--gold)}
.nav button.on::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;background:var(--gold)}

.rail-foot{margin-top:auto;padding:0 20px}
.ghost-btn{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.14em;color:var(--mute2);
  border:1px solid var(--edge);padding:6px 10px;border-radius:var(--r);transition:.2s;text-transform:uppercase}
.ghost-btn:hover{color:var(--jasper);border-color:var(--jasper)}
.build{font-family:var(--ff-m);font-size:8.5px;letter-spacing:.12em;color:#443c35;margin:12px 0 0}

/* ═══════════════════════ MAIN ═══════════════════════ */
.main{padding:40px 36px 100px;max-width:calc(var(--maxw) + 72px);width:100%}
.view{animation:viewIn .5s cubic-bezier(.3,0,.2,1)}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.eyebrow{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.h-big{font-size:clamp(34px,5.2vw,52px);font-weight:800;letter-spacing:-.04em}
.h-big em{font-style:normal;color:var(--gold-lt)}
.lede{color:var(--mute);max-width:62ch;margin:14px 0 0;font-size:15px}

/* gold vein divider */
.vein{height:16px;margin:34px 0;position:relative;opacity:.8}
.vein svg{width:100%;height:100%;display:block}
.vein path{fill:none;stroke:var(--gold);stroke-width:.9;opacity:.5}

/* ── cards grid ── */
.grid{display:grid;gap:14px;margin-top:26px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

.card{
  position:relative;border:1px solid var(--edge);background:var(--panel);
  border-radius:var(--r);padding:20px;overflow:hidden;transition:.22s;
  text-align:left;display:block;width:100%;
}
.card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .25s;pointer-events:none;
  background:radial-gradient(90% 120% at 10% 0%,rgba(201,162,39,.11),transparent 62%);
}
button.card:hover{border-color:var(--edge2);transform:translateY(-2px)}
button.card:hover::before{opacity:1}
.card-k{font-family:var(--ff-m);font-size:9px;letter-spacing:.22em;color:var(--mute2);text-transform:uppercase}
.card h3{font-size:19px;margin:7px 0 6px}
.card p{color:var(--mute);font-size:13.2px;margin:0;line-height:1.5}
.card-go{font-family:var(--ff-m);font-size:10px;letter-spacing:.16em;color:var(--gold);margin-top:14px;display:block}

/* chapter tile */
.chap{display:flex;gap:16px;align-items:flex-start}
.chap-n{
  font-family:var(--ff-d);font-size:28px;font-weight:800;color:var(--edge2);line-height:1;
  min-width:42px;transition:color .25s;
}
button.card:hover .chap-n{color:var(--gold)}
.chap.done .chap-n{color:var(--jade)}
.chap-bar{height:2px;background:var(--edge);margin-top:13px;border-radius:2px;overflow:hidden}
.chap-bar i{display:block;height:100%;background:var(--gold);transition:width .8s cubic-bezier(.3,0,.2,1)}
.chap.done .chap-bar i{background:var(--jade)}
.lock{opacity:.4;pointer-events:none}
.lock .card-go{color:var(--mute2)}

/* ── stat tiles ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--edge);
  border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;margin-top:26px}
.stat{background:var(--panel);padding:18px 16px}
.stat b{display:block;font-family:var(--ff-d);font-size:28px;font-weight:800;color:var(--gold-lt);line-height:1.05;letter-spacing:-.03em}
.stat span{font-family:var(--ff-m);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute2);display:block;margin-top:6px}

/* ═══════════════════════ ARENA ═══════════════════════ */
.arena{max-width:820px}
.arena-top{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.pill{
  font-family:var(--ff-m);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
  border:1px solid var(--edge2);padding:4px 10px;border-radius:40px;color:var(--mute);
}
.pill.gold{border-color:rgba(201,162,39,.45);color:var(--gold-lt)}
.pill.hot{border-color:var(--jasper);color:var(--jasper)}
.lives{margin-left:auto;display:flex;gap:5px}
.lives i{width:9px;height:9px;border-radius:50%;background:var(--jasper);display:block;transition:.3s}
.lives i.gone{background:var(--edge2);transform:scale(.6)}

.progwrap{height:2px;background:var(--edge);border-radius:2px;overflow:hidden;margin-bottom:4px}
.progwrap i{display:block;height:100%;background:var(--gold);transition:width .45s cubic-bezier(.3,0,.2,1)}
.timerwrap{height:2px;background:transparent;border-radius:2px;overflow:hidden;margin-bottom:26px}
.timerwrap i{display:block;height:100%;background:var(--jade);transition:width .25s linear,background .3s}
.timerwrap i.warn{background:var(--jasper)}

/* question */
.qstamp{
  display:inline-flex;gap:10px;align-items:center;font-family:var(--ff-m);font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mute2);
  border:1px dashed var(--edge2);padding:5px 11px;border-radius:2px;margin-bottom:18px;
  transform:rotate(-.5deg);
}
.qstamp em{font-style:normal;color:var(--gold)}
.qtext{font-family:var(--ff-d);font-size:clamp(21px,3vw,29px);font-weight:500;letter-spacing:-.02em;line-height:1.26;margin:0 0 24px}
.qimg{
  margin:0 0 24px;border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;
  background:var(--panel);position:relative;
}
.qimg img{display:block;width:100%;height:auto;max-height:340px;object-fit:cover}
.qimg::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 60px rgba(0,0,0,.45);pointer-events:none}

.opts{display:flex;flex-direction:column;gap:9px}
.opt{
  position:relative;display:flex;gap:14px;align-items:flex-start;
  border:1px solid var(--edge);background:var(--panel);border-radius:var(--r);
  padding:15px 17px;text-align:left;transition:.18s;overflow:hidden;line-height:1.45;font-size:14.5px;
}
.opt:hover:not(:disabled){border-color:var(--edge2);background:var(--panel2);transform:translateX(3px)}
.opt kbd{
  font-family:var(--ff-m);font-size:10px;width:19px;height:19px;flex:none;display:grid;place-items:center;
  border:1px solid var(--edge2);border-radius:2px;color:var(--mute2);margin-top:1px;transition:.18s;
}
.opt:hover:not(:disabled) kbd{border-color:var(--gold);color:var(--gold)}
.opt:disabled{cursor:default}
.opt.right{border-color:var(--jade);background:rgba(79,178,134,.08)}
.opt.right kbd{border-color:var(--jade);color:var(--jade)}
.opt.right::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(236,229,219,.13) 48%,transparent 66%);
  transform:translateX(-120%);animation:polish .75s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes polish{to{transform:translateX(120%)}}
.opt.wrong{border-color:var(--jasper);background:rgba(203,74,64,.08);animation:shake .4s}
.opt.wrong kbd{border-color:var(--jasper);color:var(--jasper)}
.opt.wrong::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--jasper) 18%,transparent 24%,var(--jasper) 52%,transparent 58%,var(--jasper) 88%,transparent);
  opacity:.55;
}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-4px)}}
.opt.dim{opacity:.4}

/* typed answer */
.typed{display:flex;gap:0;border:1px solid var(--edge2);border-radius:var(--r);overflow:hidden;max-width:380px;
  transition:border-color .2s}
.typed:focus-within{border-color:var(--gold)}
.typed .cur{padding:15px 0 15px 17px;font-family:var(--ff-m);color:var(--gold-lt);font-size:17px}
.typed input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--bone);padding:15px 8px;
  font-family:var(--ff-m);font-size:17px}
.typed button{padding:0 22px;background:var(--gold);color:#120f0b;font-weight:700;font-family:var(--ff-d)}
.typed.right{border-color:var(--jade)}
.typed.wrong{border-color:var(--jasper);animation:shake .4s}

/* ordering */
.order-list{display:flex;flex-direction:column;gap:7px;counter-reset:o}
.order-item{
  display:flex;gap:13px;align-items:center;border:1px solid var(--edge);background:var(--panel);
  border-radius:var(--r);padding:12px 15px;cursor:grab;font-size:14px;transition:.18s;
}
.order-item:hover{border-color:var(--edge2)}
.order-item.drag{opacity:.35}
.order-item::before{counter-increment:o;content:counter(o);font-family:var(--ff-m);font-size:11px;
  color:var(--mute2);width:18px;flex:none}
.order-item .moves{margin-left:auto;display:flex;gap:4px;flex:none}
.order-item .mv{
  width:30px;height:30px;display:grid;place-items:center;font-size:9px;line-height:1;
  border:1px solid var(--edge2);border-radius:2px;color:var(--mute2);transition:.15s;
}
.order-item .mv:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,162,39,.07)}
.order-item .mv:active{transform:scale(.9)}
.order-item.right{border-color:var(--jade)}
.order-item.wrong{border-color:var(--jasper)}

/* explanation */
.why{
  margin-top:22px;border-left:2px solid var(--gold);background:var(--panel);
  padding:17px 20px;border-radius:0 var(--r) var(--r) 0;
  animation:whyIn .45s cubic-bezier(.3,0,.2,1);
}
@keyframes whyIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.why-k{font-family:var(--ff-m);font-size:9px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:8px}
.why-k.good{color:var(--jade)}
.why-k.bad{color:var(--jasper)}
.why p{margin:0;font-size:14px;color:#cfc6ba;line-height:1.62;white-space:pre-line}
.why .pts{font-family:var(--ff-m);font-size:11px;color:var(--gold-lt);margin-top:11px;letter-spacing:.06em}

.nextbar{display:flex;align-items:center;gap:14px;margin-top:22px}
.btn{
  background:var(--gold);color:#120f0b;font-family:var(--ff-d);font-weight:700;font-size:14.5px;
  padding:12px 26px;border-radius:var(--r);transition:.2s;letter-spacing:-.01em;
}
.btn:hover{background:var(--gold-lt);transform:translateY(-1px)}
.btn.quiet{background:none;border:1px solid var(--edge2);color:var(--mute)}
.btn.quiet:hover{background:var(--panel2);color:var(--bone);border-color:var(--edge2)}
.hint{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.12em;color:var(--mute2)}

/* streak flare */
.streak{
  position:fixed;right:26px;bottom:26px;z-index:80;
  font-family:var(--ff-d);font-weight:800;font-size:15px;letter-spacing:-.02em;
  background:var(--panel2);border:1px solid var(--gold);color:var(--gold-lt);
  padding:9px 16px;border-radius:40px;
  transform:translateY(80px);opacity:0;transition:.4s cubic-bezier(.3,0,.2,1);
  box-shadow:0 10px 40px -12px rgba(201,162,39,.5);
}
.streak.show{transform:none;opacity:1}

/* ═══════════════════════ RESULT ═══════════════════════ */
.result{max-width:640px;text-align:center;margin:40px auto}
.result-ring{position:relative;width:188px;height:188px;margin:0 auto 26px}
.result-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.result-ring circle{fill:none;stroke-width:3}
.result-ring .bg{stroke:var(--edge)}
.result-ring .fg{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset 1.3s cubic-bezier(.3,0,.2,1)}
.result-ring.pass .fg{stroke:var(--jade)}
.result-ring b{
  position:absolute;inset:0;display:grid;place-content:center;align-content:center;
  font-family:var(--ff-d);font-size:48px;font-weight:800;letter-spacing:-.04em;
}
.result-ring b em{font-style:normal;font-size:15px;color:var(--mute2);display:block;
  font-family:var(--ff-m);letter-spacing:.2em;margin-top:2px}
.result h2{font-size:34px;margin-bottom:10px}
.result .lede{margin:0 auto}
.rbreak{display:inline-flex;gap:1px;margin:30px 0;background:var(--edge);border:1px solid var(--edge);border-radius:var(--r);overflow:hidden}
.rbreak div{background:var(--panel);padding:14px 22px;min-width:92px}
.rbreak b{display:block;font-family:var(--ff-d);font-size:21px;font-weight:800;color:var(--gold-lt)}
.rbreak span{font-family:var(--ff-m);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute2)}
.levelup{
  border:1px solid var(--gold);background:linear-gradient(135deg,rgba(201,162,39,.12),transparent 62%);
  padding:20px;border-radius:var(--r);margin:24px 0;animation:rise .6s .3s both;
}
.levelup .k{font-family:var(--ff-m);font-size:9px;letter-spacing:.3em;color:var(--gold);text-transform:uppercase}
.levelup h3{font-size:27px;margin:8px 0 4px}
.levelup p{color:var(--mute);font-size:13.5px;margin:0}

/* review list */
.review{margin-top:36px;text-align:left}
.review h4{font-size:13px;font-family:var(--ff-m);font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--mute2);margin-bottom:14px}
.rev-item{border-left:2px solid var(--jasper);background:var(--panel);padding:13px 17px;margin-bottom:9px;border-radius:0 var(--r) var(--r) 0}
.rev-item .q{font-size:13.8px;font-weight:500;margin:0 0 6px}
.rev-item .a{font-size:13px;color:var(--jade);margin:0}
.rev-item .w{font-size:12.5px;color:var(--mute);margin:6px 0 0;line-height:1.55;white-space:pre-line}

/* ═══════════════════════ VAULT ═══════════════════════ */
.vault-search{
  display:flex;align-items:center;gap:12px;border:1px solid var(--edge2);background:var(--panel);
  border-radius:var(--r);padding:0 16px;margin:26px 0 18px;transition:border-color .2s;max-width:560px;
}
.vault-search:focus-within{border-color:var(--gold)}
.vault-search input{flex:1;background:none;border:0;outline:0;color:var(--bone);padding:14px 0;font-size:15px}
.vault-search span{color:var(--mute2);font-family:var(--ff-m);font-size:11px}
.tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:26px}
.tabs button{
  font-family:var(--ff-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--edge);padding:6px 12px;border-radius:40px;color:var(--mute);transition:.18s;
}
.tabs button:hover{border-color:var(--edge2);color:var(--bone)}
.tabs button.on{border-color:var(--gold);color:var(--gold-lt);background:rgba(201,162,39,.07)}

.vrow{border-bottom:1px solid var(--edge);padding:15px 0;display:grid;grid-template-columns:200px 1fr;gap:22px}
.vrow:last-child{border-bottom:0}
.vrow dt{font-family:var(--ff-d);font-weight:700;font-size:15px;letter-spacing:-.01em}
.vrow dt small{display:block;font-family:var(--ff-m);font-weight:400;font-size:8.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute2);margin-top:4px}
.vrow dd{margin:0;color:#c3bab0;font-size:14px;line-height:1.6}
.vrow dd b{color:var(--gold-lt);font-weight:500}

.ptable{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:8px}
.ptable th{
  font-family:var(--ff-m);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute2);
  text-align:right;padding:10px 12px;border-bottom:1px solid var(--edge2);font-weight:400;white-space:nowrap;
}
.ptable th:first-child{text-align:left}
.ptable td{padding:9px 12px;border-bottom:1px solid var(--edge);text-align:right;font-family:var(--ff-m);font-size:12.5px}
.ptable td:first-child{text-align:left;font-family:var(--ff-b);font-size:14px}
.ptable tr:hover td{background:var(--panel)}
.ptable .cris td:first-child::after{content:"CRIS";font-family:var(--ff-m);font-size:7.5px;letter-spacing:.14em;
  background:rgba(201,162,39,.16);color:var(--gold-lt);padding:1px 5px;border-radius:2px;margin-left:8px;vertical-align:middle}
.tscroll{overflow-x:auto;border:1px solid var(--edge);border-radius:var(--r);background:var(--panel);padding:0 6px}

.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px;margin-top:8px}
.swatch{border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.swatch img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.swatch div{padding:9px 11px}
.swatch b{display:block;font-family:var(--ff-d);font-size:13px;font-weight:700;letter-spacing:-.01em}
.swatch span{font-family:var(--ff-m);font-size:9px;letter-spacing:.12em;color:var(--mute2);text-transform:uppercase}
.swatch em{font-style:normal;color:var(--gold-lt)}

.note{border-left:2px solid var(--edge2);padding:12px 16px;background:var(--panel);margin:18px 0;font-size:13.5px;color:var(--mute);border-radius:0 var(--r) var(--r) 0}
.note b{color:var(--gold-lt);font-weight:500}
.warn{border-left-color:var(--jasper)}
.warn b{color:var(--jasper)}

/* mastery bars */
.mastery{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.mrow{display:grid;grid-template-columns:168px 1fr 52px;gap:14px;align-items:center;font-size:13.5px}
.mrow .bar{height:5px;background:var(--edge);border-radius:4px;overflow:hidden}
.mrow .bar i{display:block;height:100%;background:var(--gold);transition:width .9s cubic-bezier(.3,0,.2,1)}
.mrow .bar i.hi{background:var(--jade)}
.mrow .bar i.lo{background:var(--jasper)}
.mrow .pct{font-family:var(--ff-m);font-size:11.5px;color:var(--mute);text-align:right}

.empty{color:var(--mute2);font-style:italic;padding:36px 0;text-align:center}

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .burger{display:flex}
  .rail{
    position:fixed;top:56px;left:0;bottom:0;width:260px;z-index:55;
    transform:translateX(-102%);transition:transform .32s cubic-bezier(.3,0,.2,1);
    border-right:1px solid var(--edge);background:var(--ink2);height:auto;
  }
  .rail.open{transform:none;box-shadow:30px 0 60px -20px rgba(0,0,0,.8)}
  .main{padding:26px 18px 90px}
  .topbar{padding:0 16px;gap:12px}
  .topbar-stats{gap:16px}
  .tstat:first-child{display:none}
  .vrow{grid-template-columns:1fr;gap:6px}
  .mrow{grid-template-columns:112px 1fr 44px;gap:10px;font-size:12.5px}
  .rbreak{flex-wrap:wrap}
}
@media(max-width:560px){
  .grid.c2,.grid.c3{grid-template-columns:1fr}
  .qtext{font-size:21px}
  .result-ring{width:150px;height:150px}
  .result-ring b{font-size:38px}
  .streak{right:14px;bottom:14px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .gate-bg{animation:none}
}