/* Last Land MU — local guides. Dark gold skin, compact layout. */
:root{
  --bg:#17131b; --bg2:#1e1822; --card:#241d28; --card2:#2b2333;
  --line:#3a2f44; --line2:#4a3b56;
  --txt:#e8e0ef; --dim:#a596b4; --dim2:#8b7c99;
  --gold:#d8ad5a; --gold2:#f2cd81; --goldq:#5a4620;
  --red:#c75b5b; --grn:#6fbf7a; --blu:#6b9fd4;
  --txt1:#ded2ea; --txt2:#f4eefa;
  --head:#2a2232; --hover:#342a3e; --chip:#241d2b; --panel:#1b1620; --panel2:#15111a; --deep:#120f16;
  --r:10px; --mx:1180px;
  --fs:15px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* light theme */
:root[data-theme="light"]{
  --bg:#f3eff7; --bg2:#ffffff; --card:#ffffff; --card2:#f7f3fa;
  --line:#ddd3e6; --line2:#c9bbd6;
  --txt:#241d2b; --dim:#5d5069; --dim2:#7d7088;
  --gold:#8a6213; --gold2:#6d4d0c; --goldq:#f0e2c4;
  --red:#a33b3b; --grn:#2f7a3e; --blu:#2d5f94;
  --txt1:#2f2738; --txt2:#1d1626;
  --head:#efe8f5; --hover:#f0eaf6; --chip:#f2ecf8; --panel:#faf7fc; --panel2:#f4eff8; --deep:#f2ecf6;
}
:root[data-theme="light"] body{
  background-image:
    radial-gradient(900px 420px at 12% -8%, rgba(216,173,90,.18), transparent 70%),
    radial-gradient(700px 380px at 92% 0%, rgba(107,159,212,.12), transparent 70%);
}
:root[data-theme="light"] .bgv-tint{
  background:linear-gradient(180deg, rgba(246,243,249,.86) 0%, rgba(246,243,249,.93) 40%, rgba(246,243,249,.97) 100%);
}
:root[data-theme="light"] .hd{background:rgba(255,255,255,.93)}
:root[data-theme="light"] code,
:root[data-theme="light"] .mu-tab-content input,
:root[data-theme="light"] .bigask input,
:root[data-theme="light"] .hask input,
:root[data-theme="light"] .mrow input{background:#f2ecf6; color:var(--txt)}
:root[data-theme="light"] code{color:#7a5410}
:root[data-theme="light"] .item-ic img,
:root[data-theme="light"] .mon-art img{filter:none}
:root[data-theme="light"] .mon-art{
  background:radial-gradient(circle at 50% 45%, rgba(216,173,90,.16), transparent 68%), #17121c}
:root[data-theme="light"] .items,
:root[data-theme="light"] .spec,
:root[data-theme="light"] .stat,
:root[data-theme="light"] .feat,
:root[data-theme="light"] .kbd{background:#faf7fc}
:root[data-theme="light"] .sh,
:root[data-theme="light"] .mon-h,
:root[data-theme="light"] .spec-hd,
:root[data-theme="light"] thead th{background:#efe8f5}
:root[data-theme="light"] .tipbox{background:#fff; color:var(--txt)}
:root[data-theme="light"] .tipbox::after{border-top-color:#fff}
:root[data-theme="light"] .tip.flip>.tipbox::after{border-bottom-color:#fff}
:root[data-theme="light"] .tipbox .tip-i{color:#35508c}
:root[data-theme="light"] .item-n{color:var(--txt)}
:root[data-theme="light"] .key{background:#ece5f2; color:#6b5d77}
:root[data-theme="light"] .key.has{
  background:linear-gradient(180deg,#f6e4bb,#e8d19a); color:#4a340a; border-color:#c7a861;
}
:root[data-theme="light"] .ans{background:linear-gradient(180deg,#fff,#faf6fd)}

html{background:var(--bg)}
body{
  margin:0; background-color:transparent; color:var(--txt); font-size:var(--fs);
  font-family:"Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  line-height:1.55;
  background-image:
    radial-gradient(900px 420px at 12% -8%, rgba(216,173,90,.10), transparent 70%),
    radial-gradient(700px 380px at 92% 0%, rgba(107,159,212,.07), transparent 70%);
  background-attachment:fixed;
}

/* site background: the same clip the live guides use, held behind everything */
.bgv{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none}
.bgv video{
  width:100%; height:100%; object-fit:cover; display:block;
  background:var(--bg) center/cover no-repeat;
}
.bgv-tint{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(20,16,24,.55) 0%, rgba(20,16,24,.74) 38%, rgba(20,16,24,.88) 100%);
}
@media (prefers-reduced-motion:reduce){
  .bgv video{display:none}
  .bgv{background:url("../img/Site-background-bksmelf.png") center/cover no-repeat var(--bg)}
}
a{color:var(--gold2); text-decoration:none}
a:hover{text-decoration:underline}
code{
  background:var(--deep); border:1px solid var(--line); border-radius:5px;
  padding:1px 5px; font-family:Consolas,"Courier New",monospace; font-size:.9em;
  color:var(--gold2); white-space:nowrap;
}
.wrap{max-width:var(--mx); margin:0 auto; padding:0 16px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; background:var(--card); padding:8px 12px; z-index:99}
img{max-width:100%; height:auto}

/* ---------------- main-site strip (lastlandmu.com links + Discord) ---------------- */
.topbar{background:#0f0c12; border-bottom:1px solid var(--line); position:relative; z-index:41}
.tb-in{
  max-width:var(--mx); margin:0 auto; padding:0 16px; min-height:36px;
  display:flex; align-items:center; gap:10px;
}
.tb-home{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim2); font-weight:700; white-space:nowrap}
.tb-home:hover{color:var(--gold2); text-decoration:none}
.tb-nav{display:flex; align-items:center; gap:4px; margin-left:auto; overflow-x:auto; scrollbar-width:none}
.tb-nav::-webkit-scrollbar{display:none}
.tb-a{
  font-size:12px; font-weight:600; color:var(--txt1); padding:4px 10px; border-radius:6px;
  border:1px solid transparent; white-space:nowrap;
}
.tb-a:hover{color:var(--gold2); border-color:var(--line2); background:var(--head); text-decoration:none}
.tb-a.tb-reg{color:#201705; background:linear-gradient(180deg,#e0b863,#bd8f3c); border-color:#8e6a2b}
.tb-a.tb-reg:hover{filter:brightness(1.08); color:#201705}
.discord{
  flex:0 0 auto; width:28px; height:28px; border-radius:8px; background:#5865f2; color:#fff;
  display:inline-flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(88,101,242,.35);
}
.discord svg{width:17px; height:17px; display:block}
.discord:hover{background:#4752c4; text-decoration:none}
:root[data-theme="light"] .topbar{background:#e9e2f0}
:root[data-theme="light"] .tb-a{color:var(--txt)}

/* ---------------- header ---------------- */
.hd{
  position:sticky; top:0; z-index:40;
  background:rgba(23,19,27,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.hd-in{
  max-width:var(--mx); margin:0 auto; padding:0 16px;
  display:flex; align-items:center; gap:14px; min-height:54px;
}
.brand{display:flex; align-items:center; gap:9px; flex:0 0 auto; text-decoration:none}
.brand:hover{text-decoration:none}
.blogo{width:34px; height:34px; object-fit:contain; flex:0 0 auto}
.btx{display:flex; flex-direction:column; line-height:1}
.bm{font-weight:800; letter-spacing:.11em; font-size:13px; color:var(--gold)}
.bs{font-size:9.5px; letter-spacing:.2em; color:var(--dim2); margin-top:3px}
.nav{display:flex; gap:2px; flex:1 1 auto; min-width:0}
.nv{position:relative}
.nv>button{
  background:none; border:0; color:var(--dim); font:inherit; font-size:13px;
  padding:7px 10px; border-radius:7px; cursor:pointer; display:flex; align-items:center; gap:4px;
}
.nv>button i{font-style:normal; font-size:9px; opacity:.6}
.nv:hover>button,.nv.on>button{color:var(--gold2); background:var(--head)}
.dd{
  position:absolute; top:100%; left:0; min-width:230px; display:none;
  background:var(--card); border:1px solid var(--line2); border-radius:var(--r);
  padding:6px; box-shadow:0 14px 34px rgba(0,0,0,.55); z-index:50;
}
.nv:hover .dd,.nv.open .dd{display:block}
.dd a{display:block; padding:6px 9px; border-radius:6px; font-size:13px; color:var(--txt)}
.dd a:hover{background:var(--hover); text-decoration:none; color:var(--gold2)}
.dd a.on{color:var(--gold); background:var(--hover)}
.hask{display:flex; gap:0; flex:0 0 auto; position:relative}
.hask .sugg{left:auto; right:0; width:min(340px,90vw)}
.hask input{
  background:var(--deep); border:1px solid var(--line2); border-right:0;
  border-radius:7px 0 0 7px; color:var(--txt); padding:6px 10px; font:inherit; font-size:13px; width:150px;
}
.hask input:focus{outline:none; border-color:var(--gold); box-shadow:inset 0 0 0 1px rgba(216,173,90,.25)}
.hask button{
  background:var(--goldq); border:1px solid var(--line2); border-left:0; border-radius:0 7px 7px 0;
  color:var(--gold2); padding:6px 11px; font:inherit; font-size:13px; cursor:pointer;
}
.hask button:hover{background:#6d5527}
.burger{display:none; background:none; border:1px solid var(--line2); color:var(--gold2);
  border-radius:7px; width:34px; height:30px; font-size:15px; cursor:pointer}
.thm{
  background:none; border:1px solid var(--line2); color:var(--dim); width:32px; height:30px;
  border-radius:7px; cursor:pointer; font-size:14px; flex:0 0 auto; line-height:1;
}
.thm:hover{color:var(--gold2); border-color:var(--gold)}

/* ---------------- hero / search ---------------- */
.hero{padding:40px 0 26px; text-align:center}
.kicker{
  margin:0 0 12px; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim2);
}
.hero h1{
  margin:0 0 10px; font-size:clamp(25px,4.6vw,42px); line-height:1.12; letter-spacing:-.4px;
  font-weight:800; color:var(--txt2);
}
.lede{margin:0 auto 22px; max-width:620px; color:var(--dim); font-size:15px}
.bigask{display:flex; max-width:660px; margin:0 auto; gap:0}
.sbox{position:relative; flex:1 1 auto; min-width:0; display:flex}
.sbox input{flex:1 1 auto}
/* suggestions while typing */
.sugg{
  position:absolute; left:0; right:0; top:calc(100% + 5px); z-index:55; text-align:left;
  background:var(--card); border:1px solid var(--line2); border-radius:var(--r); padding:5px;
  box-shadow:0 16px 36px rgba(0,0,0,.55);
}
.sugg[hidden]{display:none}
.sg{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:8px 10px; border-radius:7px; color:var(--txt); font-size:13.5px;
}
.sg b{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.sg i{font-style:normal; font-size:11.5px; color:var(--dim2); white-space:nowrap; flex:0 0 auto}
.sg:hover,.sg.on{background:var(--hover); color:var(--gold2); text-decoration:none}
.bigask input{
  flex:1 1 auto; min-width:0; background:var(--deep); border:1px solid var(--line2); border-right:0;
  color:var(--txt); font:inherit; font-size:15px; padding:12px 16px; border-radius:var(--r) 0 0 var(--r);
}
.bigask input::placeholder{color:#6f6179}
.bigask input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(216,173,90,.12)}
.bigask button{
  flex:0 0 auto; background:linear-gradient(180deg,#e0b863,#bd8f3c); border:1px solid #8e6a2b;
  color:#201705; font-weight:700; font-size:15px; padding:12px 24px;
  border-radius:0 var(--r) var(--r) 0; cursor:pointer;
}
.bigask button:hover{filter:brightness(1.08)}
.bigask.sm input,.bigask.sm button{font-size:14px; padding:10px 14px}
.chips{display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:16px auto 0; max-width:720px}
.chip{
  background:#241d28; border:1px solid var(--line); color:var(--dim); font:inherit; font-size:12px;
  padding:5px 11px; border-radius:999px; cursor:pointer;
}
.chip:hover{border-color:var(--gold); color:var(--gold2)}
.chips-h{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim2); align-self:center; margin-right:2px}

/* ---------------- answer ---------------- */
.answer{margin:0 0 30px}
.answer:empty{display:none}
.ans{
  background:linear-gradient(180deg,#261f2c,#211b27); border:1px solid var(--line2);
  border-left:3px solid var(--gold); border-radius:var(--r); padding:16px 18px; margin:0 0 14px;
}
.ans .q{font-size:12px; color:var(--dim2); margin:0 0 9px}
.ans .q b{color:var(--txt); font-weight:600}
.ans h2{margin:0 0 8px; font-size:19px; color:var(--gold2); line-height:1.3}
.ans .dir{margin:0 0 10px; font-size:15.5px; color:var(--txt2)}
.ans .dir strong{color:var(--gold2)}
.ans .meta{
  display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; padding-top:10px;
  border-top:1px solid var(--line);
}
.pill{
  display:inline-flex; align-items:center; gap:5px; background:var(--panel); border:1px solid var(--line);
  border-radius:999px; padding:3px 10px; font-size:11.5px; color:var(--dim);
}
.pill b{color:var(--gold2); font-weight:600}
.pill.k{background:#20301f; border-color:#3c5a3a; color:#a9d8ae}
.dir-ic{width:40px; height:40px; object-fit:contain; float:left; margin:0 12px 6px 0}
.q-was{display:block; margin-top:2px; font-size:11.5px; color:var(--dim2)}
.more-h{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim2); font-weight:700; margin:14px 0 7px}
.srcbox{border:1px solid var(--line); border-radius:var(--r); background:var(--card); overflow:hidden; margin:0 0 12px}
.srcbox>summary{
  cursor:pointer; padding:10px 14px; font-size:13px; color:var(--dim); list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.srcbox>summary::-webkit-details-marker{display:none}
.srcbox>summary::after{content:"▾"; font-size:10px; color:var(--dim2)}
.srcbox[open]>summary::after{content:"▴"}
.srcbox>summary:hover{color:var(--gold2)}
.srcbox>summary b{color:var(--txt); font-weight:600}
.srcbody{padding:4px 14px 14px; border-top:1px solid var(--line)}
.more{display:flex; flex-wrap:wrap; gap:7px; margin:4px 0 0}
.more a{
  background:#241d28; border:1px solid var(--line); border-radius:999px; padding:4px 11px;
  font-size:12px; color:var(--dim);
}
.more a:hover{border-color:var(--gold); color:var(--gold2); text-decoration:none}
.nores{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px}

/* ---------------- browse ---------------- */
.browse{padding:6px 16px 40px}
.bh{font-size:13px; letter-spacing:.11em; text-transform:uppercase; color:var(--dim2); font-weight:600; margin:0 0 14px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:12px}
.gcard{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:13px 14px}
.gcard h3{
  margin:0 0 9px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
  padding-bottom:8px; border-bottom:1px solid var(--line);
}
.gcard ul{list-style:none; margin:0; padding:0}
.gcard li+li{margin-top:1px}
.gcard a{display:block; padding:5px 7px; border-radius:6px; color:var(--txt)}
.gcard a:hover{background:var(--hover); text-decoration:none}
.gcard b{display:block; font-size:13.5px; font-weight:600}
.gcard i{display:block; font-style:normal; font-size:11.5px; color:var(--dim2); margin-top:1px}

/* ---------------- guide page ---------------- */
.crumb{font-size:11.5px; color:var(--dim2); padding:16px 0 0}
.crumb span{opacity:.5; margin:0 5px}
.h1{margin:7px 0 4px; font-size:clamp(22px,3.4vw,31px); font-weight:800; color:var(--txt2); letter-spacing:-.3px}
.sub-l{margin:0 0 14px; color:var(--dim); font-size:14px}
.toc{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:10px 12px; margin:0 0 20px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
}
.toc>span{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim2); margin-right:4px}
.toc a{font-size:12px; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:3px 10px; color:var(--dim)}
.toc a:hover{border-color:var(--gold); color:var(--gold2); text-decoration:none}
.doc{padding-bottom:30px}
.sec{
  margin:0 0 14px; scroll-margin-top:66px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:visible;
}
.sec.plain{background:none; border:0; border-radius:0; padding:0}
.sh{
  margin:0; padding:11px 15px; font-size:13px; font-weight:700; color:var(--gold);
  letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid var(--line);
  background:var(--head); border-radius:var(--r) var(--r) 0 0;
}
h3.sh{font-size:12px; color:var(--gold2)}
.secbody{padding:13px 15px}
.secbody>:last-child{margin-bottom:0}
.doc h4.sub,.doc h5{margin:14px 0 6px; font-size:14.5px; color:var(--txt2); font-weight:700}
.doc p{margin:0 0 9px}
.doc .lead{color:var(--dim); font-size:14.5px}
.lbl{
  display:inline-block; margin:9px 8px 5px 0; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold); background:#241d28; border:1px solid var(--goldq);
  border-radius:5px; padding:3px 9px; font-weight:600;
}
.lbl.wide{display:block; text-transform:none; letter-spacing:0; font-size:13px; color:var(--txt);
  background:none; border:0; padding:0; font-weight:600}
.lbl.warn{color:#ff6b6b; background:rgba(199,91,91,.14); border-color:#b94a4a; font-weight:700}
:root[data-theme="light"] .lbl.warn{color:#b42318; background:#fdecec; border-color:#e3a19b}
.bul{margin:0 0 10px; padding-left:17px}
.bul li{margin:2px 0}
.bul li::marker{color:var(--gold); font-size:.85em}
.fig{margin:10px 0; display:inline-block; max-width:100%}
.fig img{border-radius:8px; border:1px solid var(--line); vertical-align:middle}
.fig.big{display:block}
.fig.big img{width:100%}
.fig.art,.fig.bossart{display:block; width:100%; max-width:420px; margin:0 0 14px}
.fig.art img,.fig.bossart img{width:100%; height:240px; object-fit:contain; border-radius:10px; background:#000}
.fig figcaption{font-size:11.5px; color:var(--dim2); margin-top:5px; text-align:center}

/* ---------------- item icon rows + tooltips ---------------- */
.items{
  display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:10px;
}
.item{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:7px;
  width:112px; padding:11px 6px 9px; border-radius:9px; cursor:help;
  border:1px solid transparent; text-align:center;
}
.item:hover,.item:focus-visible,.item.on{
  background:var(--hover); border-color:var(--line2); outline:none;
}
.item-ic{
  width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  position:relative;
}
.qty{
  position:absolute; right:-7px; bottom:-4px;
  background:var(--deep); border:1px solid var(--gold); border-radius:999px;
  color:var(--gold2); font-size:10px; font-weight:700; line-height:1;
  padding:2px 5px; white-space:nowrap;
}
.tips .tip{position:relative}
.tips .tip .qty{right:-6px; bottom:-5px; font-size:9px; padding:1px 4px}
.tip-q{color:var(--gold2); font-size:12.5px; margin:0 0 6px!important}
.tip-q b{color:#ffe0a3}
.qty.pct{border-color:#4a7bb5; color:#9fc4ee}
.qty.extra{border-color:#7a5ab5; color:#c3a8ee}
.item-r{font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#d79ae0; line-height:1.1}
:root[data-theme="light"] .item-r{color:#7a3b8a}
/* light theme: the badges sit on white, so they need dark text to be read */
:root[data-theme="light"] .qty{background:#fff7e6; color:#7a5410; border-color:#c9a14f}
:root[data-theme="light"] .qty.pct{background:#eaf2fb; color:#1f5d96; border-color:#7fa6d3}
:root[data-theme="light"] .qty.extra{background:#f3edfb; color:#5b3f96; border-color:#a68bd4}
.crow{
  display:flex; align-items:center; gap:10px; padding:7px 0;
  border-top:1px solid var(--line); font-size:13.5px; color:var(--txt1);
}
.crow:first-child{border-top:0}
.cbadge{
  flex:0 0 auto; min-width:52px; text-align:center;
  background:#1b2a3d; border:1px solid #4a7bb5; color:#9fc4ee;
  border-radius:999px; padding:3px 10px; font-size:11.5px; font-weight:700;
}
.cbadge.word{background:var(--chip); border-color:var(--gold); color:var(--gold2); min-width:0}
/* the chance in a boss card's "Bonus Drop" row */
.cbadge.tl{display:inline-block; min-width:0; padding:2px 8px; font-size:11px; margin:0 6px 3px 0; vertical-align:middle}
:root[data-theme="light"] .cbadge{background:#e6eefa; border-color:#5b86bb; color:#2d5f94}
.stage{
  margin:14px 0 7px!important; font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold); font-weight:700; display:flex; align-items:center; gap:10px;
}
.stage::after{content:""; flex:1 1 auto; height:1px; background:var(--line)}
.stage:first-child{margin-top:0!important}
.item-ic img{max-width:44px; max-height:44px; width:auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.item-n{
  font-size:12px; line-height:1.3; color:var(--txt1); font-weight:600; word-break:break-word;
}
.item:hover .item-n,.item.on .item-n{color:var(--gold2)}

/* the hover card */
.tip{position:relative}
.tipbox{
  display:none; position:absolute; left:50%; bottom:calc(100% + 11px); transform:translateX(-50%);
  width:min(410px,86vw); z-index:70; text-align:center; cursor:default;
  background:#2a2233; border:1px solid var(--line2); border-radius:12px;
  padding:15px 17px; box-shadow:0 18px 44px rgba(0,0,0,.62);
  font-size:13px; line-height:1.55; color:var(--txt1); white-space:normal;
}
.tipbox::after{
  content:""; position:absolute; top:100%; left:var(--ax, 50%); margin-left:-7px;
  border:7px solid transparent; border-top-color:#2a2233;
}
.tip:hover>.tipbox,.tip:focus-visible>.tipbox,.tip.on>.tipbox{display:block}
.tip.flip>.tipbox{bottom:auto; top:calc(100% + 11px)}
.tip.flip>.tipbox::after{top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:#2a2233}
.tipbox .tip-t{
  display:block; color:var(--gold2); font-size:14.5px; font-weight:700; margin:0 0 9px;
}
.tipbox p{margin:0 0 7px}
.tipbox p:last-child{margin-bottom:0}
.tipbox .tip-l{
  color:var(--gold); font-weight:700; margin:11px 0 4px; font-size:12.5px;
}
.tipbox .tip-l.sp{color:#d79ae0}
.tipbox .tip-l.st{color:#7fd39a}
.tipbox .tip-i{color:#9fb6e8; font-size:12.5px}
.tipbox .tip-i span{color:#6b5f78; margin:0 2px}
.tipbox .tw{margin:8px 0 0}
.tipbox table{font-size:12px; min-width:0}

/* reward icon inside a monster tile */
.tips{display:inline-flex; gap:5px; flex-wrap:wrap; vertical-align:middle}
.tips .tip{
  display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center;
  background:var(--panel2); border:1px solid var(--line); border-radius:7px; cursor:help;
}
.tips .tip:hover,.tips .tip.on{border-color:var(--gold)}
.tips .tip>img{max-width:26px; max-height:26px}

/* stage reward table: name | reward line | its icons */
.rwt{display:grid; gap:10px; margin:0 0 14px}
.rw-row{
  display:grid; grid-template-columns:190px 1fr; gap:14px; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 14px;
}
.rw-name{font-size:16px; font-weight:800; color:var(--gold2)}
.rw-lines{display:grid; gap:8px; min-width:0}
.rw-line{
  display:grid; grid-template-columns:minmax(150px,260px) 1fr; gap:14px; align-items:center;
}
.rw-lab{
  font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--dim); font-weight:700; line-height:1.4;
}
.rw-items{display:flex; flex-wrap:wrap; align-items:center; gap:2px}
.item.sm{width:78px; padding:5px 3px 4px; gap:4px}
.item.sm .item-ic{width:34px; height:34px}
.item.sm .item-ic img{max-width:32px; max-height:32px}
.item.sm .item-n{font-size:10px; line-height:1.25}
.item.sm .qty{font-size:9px; padding:1px 4px; right:-5px; bottom:-3px}
/* or / and between reward icons, written the owner's way: "/" and "&" */
.orsep{
  margin:0 4px; padding:0 2px; font-size:18px; font-weight:700; line-height:1;
  align-self:center; color:var(--gold); font-family:Georgia, "Times New Roman", serif;
}
.orsep.andsep{font-size:17px}
:root[data-theme="light"] .orsep{color:#8a5a00}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* "Horn & Early Box" / "Horn & Mid Box": each side of a choice kept together */
.combo{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:2px; padding:3px 6px;
  border-radius:10px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.05);
}
:root[data-theme="light"] .combo{background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.06)}
.combo .orsep{margin:0 2px}
/* "2x random jewels": the amount of the whole row, in front of it */
.qchip.pool{margin:0 6px 0 0; align-self:center; padding:3px 9px; font-size:11px}
/* invasion tile: "3x random box" beside the label, every box on one line below */
.mf.gq{row-gap:8px}
.mf.gq .qchip.pool{margin:0}
.mf.gq .gq-ic{grid-column:1 / -1; display:flex; justify-content:center}
.mf.gq .gq-ic .tips{justify-content:center}
/* a second row of icons inside the same reward ("Early Box OR Mid Box" under
   the jewels) starts on its own line */
.rbr{flex-basis:100%; height:0; margin:0}
.rw-items:has(.combo) .rbr{display:none}
@media (max-width:820px){
  .rw-row{grid-template-columns:1fr; gap:8px}
  .rw-line{grid-template-columns:1fr; gap:4px}
}
/* ---------------- monster / boss tiles ---------------- */
.mongrid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:12px; margin:0 0 22px;
}
.mon{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:visible;
  display:flex; flex-direction:column;
}
.mon.solo{max-width:330px}
.mon-h{
  margin:0; padding:11px 13px; font-size:15px; font-weight:700; color:var(--gold2);
  text-align:center; border-bottom:1px solid var(--line); background:var(--head);
  border-radius:var(--r) var(--r) 0 0;
}
.mon-art{
  position:relative; height:178px; overflow:hidden;
  background:radial-gradient(circle at 50% 45%, rgba(216,173,90,.12), transparent 68%), var(--deep);
}
.mon-art img{
  width:100%; height:100%; object-fit:contain; object-position:center; display:block;
}
.mon-f{margin:0; padding:9px 13px 11px; display:grid; gap:7px}
.mf{display:grid; grid-template-columns:86px 1fr; gap:10px; align-items:center}
.mf dt{
  font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--dim2); font-weight:700;
}
.mf dd{margin:0; font-size:13px; color:var(--txt1)}
.mon .fig{margin:0 13px 11px}
/* one card per boss, everything it gives inside (Crywolf) */
.bossgrid{grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); margin:16px 0 4px; align-items:start}
.boss .mon-art{height:280px}
.bc-b{padding:12px 14px 14px; display:grid; gap:0}
.bc-k{
  text-align:center; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); font-weight:800; margin:0 0 8px;
}
.bc-pts{display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:0 0 4px}
.bc-pts .bdg{margin:0}
.bc-line{
  display:grid; justify-items:center; gap:8px; text-align:center;
  padding:11px 0 2px; margin-top:9px; border-top:1px solid var(--line);
}
.bc-lab{
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; line-height:1.45;
  color:var(--gold2); font-weight:700; max-width:330px;
}
.bc-line .rw-items{justify-content:center}
.bc-line .rw-items:has(.combo){flex-direction:column; gap:6px}
.bossgrid:has(> .mon:only-child){grid-template-columns:minmax(0,560px)}
.bc-b > .bc-k:not(:first-child){border-top:1px solid var(--line); padding-top:11px; margin-top:9px}
.bc-kv{display:flex; justify-content:center; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-size:13px; color:var(--txt1); margin:0 0 10px; text-align:center}
.bc-kk{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:800}
.bc-val{text-align:center; font-size:13px; font-weight:700; color:var(--txt2); margin:6px 0 0}
.lbl.gold{color:#f2c876; border-color:rgba(242,200,118,.55); background:rgba(242,200,118,.08); font-weight:700}
:root[data-theme="light"] .lbl.gold{color:#8a5a00; background:#fdf3dc; border-color:#d9b46a}
.bc-line .crow{justify-content:center; margin:0}
.bc-line .chips-l{justify-content:center; margin:0}
.bdg{
  display:inline-block; background:var(--panel); border:1px solid var(--line2); border-radius:6px;
  padding:2px 8px; font-size:11.5px; color:var(--dim); margin:0 5px 3px 0; white-space:nowrap;
}
.bdg b{color:var(--gold2); font-weight:700}
.bdg.t{
  font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:700;
  color:var(--gold2); background:var(--deep); border-color:var(--goldq);
  padding:3px 9px; margin:0 5px 4px 0;
}
.sched{padding:0; gap:7px; margin:0 0 10px}
.sched .mf{grid-template-columns:104px 1fr; align-items:baseline}
.sched .mf dd{display:flex; flex-wrap:wrap; align-items:center}
.mf-rest{display:block; margin-top:4px; font-size:12.5px; color:var(--dim)}
.qchip i{font-style:normal; font-weight:600; color:var(--dim); margin-left:5px; text-transform:none; letter-spacing:0}
.qchip{
  display:inline-flex; align-items:center; background:var(--chip); border:1px solid var(--gold);
  color:var(--gold2); border-radius:999px; padding:3px 10px; font-size:11.5px; font-weight:700;
  margin:0 0 8px;
}

/* ---------------- spec / drop-list cards ---------------- */
.spec-h{
  margin:18px 0 10px!important; font-size:12px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gold); font-weight:700;
}
.specs{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:11px; margin:0 0 14px; align-items:start;
}
.spec{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.spec-hd{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 13px; background:var(--head); border-bottom:1px solid var(--line);
}
.spec-hd h5{margin:0; font-size:13.5px; color:var(--gold2); font-weight:700}
.spec-bd{padding:11px 13px}
.spec-p{margin:0 0 8px; font-size:13px; color:var(--dim)}
.dl-row{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  padding:6px 0; border-top:1px solid var(--line); font-size:13px;
}
.dl-row:first-child{border-top:0}
.dl-pl{
  flex:0 0 auto; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); font-weight:700; background:var(--chip); border:1px solid var(--line2);
  border-radius:5px; padding:2px 7px;
}
.dl-txt{flex:1 1 150px; color:var(--txt1); min-width:0}
.dl-row .rate{margin-left:auto}
.rate{
  flex:0 0 auto; font-size:10px; letter-spacing:.07em; text-transform:uppercase; font-weight:700;
  padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.rate.hi{background:#1f3722; color:#8fd79b; border:1px solid #3c6342}
.rate.mid{background:#2f2a1a; color:#e0c47c; border:1px solid #5d5128}
.rate.lo{background:#3a2024; color:#e49a9a; border:1px solid #67393d}
.chips-l{display:flex; flex-wrap:wrap; gap:5px; margin:0 0 10px}
.ch{
  background:var(--chip); border:1px solid var(--line2); border-radius:6px; padding:3px 9px;
  font-size:12px; color:var(--txt1);
}
.spec .mon-f{padding:0; gap:5px; border-top:1px solid var(--line); padding-top:9px}
.spec .mf{grid-template-columns:72px 1fr}
.spec .mf dd{font-size:12.5px; color:var(--dim)}

/* tables */
.tw{overflow-x:auto; margin:0 0 13px; border:1px solid var(--line); border-radius:var(--r); background:var(--card)}
table{border-collapse:collapse; width:100%; font-size:13.5px; min-width:380px}
thead th{
  background:var(--head); color:var(--gold); font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  text-align:left; padding:9px 11px; border-bottom:1px solid var(--line2); white-space:nowrap;
}
tbody td{padding:8px 11px; border-top:1px solid var(--line); vertical-align:middle}
tbody tr:nth-child(even){background:rgba(255,255,255,.015)}
tbody tr:hover{background:var(--hover)}
td img.ic{max-width:30px; max-height:30px}
.src{font-size:11.5px; color:var(--dim2); border-top:1px solid var(--line); padding-top:12px; margin:8px 0 0}
.trunc{color:var(--dim2)}

/* ---------------- search dock / modal ---------------- */
.askdock{position:fixed; right:16px; bottom:16px; z-index:45}
.askfab{
  display:inline-flex; align-items:center; gap:7px;
  background:linear-gradient(180deg,#e0b863,#bd8f3c); border:1px solid #8e6a2b; color:#201705;
  font-weight:800; font-size:13.5px; padding:11px 18px; border-radius:999px; cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.askfab svg{width:16px; height:16px; display:block}
.askfab:hover{filter:brightness(1.08)}
.modal{position:fixed; inset:0; z-index:60; background:rgba(8,6,10,.72); backdrop-filter:blur(3px);
  display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px 16px; overflow:auto}
.modal[hidden]{display:none}
.modal-bd{
  position:relative; width:100%; max-width:760px; background:var(--bg2);
  border:1px solid var(--line2); border-radius:14px; padding:22px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.modal-x{
  position:absolute; top:9px; right:11px; background:none; border:0; color:var(--dim);
  font-size:25px; line-height:1; cursor:pointer;
}
.modal-x:hover{color:var(--gold2)}
.modal-bd h3{margin:0 0 7px; font-size:17px; color:var(--gold2)}
.mnote{font-size:12px; color:var(--dim2); margin:0 0 14px; line-height:1.5}
#askOut2{margin-top:14px}
.ft{border-top:1px solid var(--line); padding:18px 0; font-size:11.5px; color:var(--dim2); text-align:center}

/* ---------------- page tabs ---------------- */
.tabbar{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 16px}
.tabb{
  background:var(--card); border:1px solid var(--line2); color:var(--dim);
  font:inherit; font-size:13.5px; font-weight:700; padding:8px 20px;
  border-radius:999px; cursor:pointer;
}
.tabb:hover{border-color:var(--gold); color:var(--gold2)}
.tabb.on{
  background:linear-gradient(180deg,#e0b863,#bd8f3c); border-color:#8e6a2b; color:#201705;
}
.tabpane.hid{display:none}

/* ---------------- stat grid ---------------- */
.stats{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(205px,1fr));
  gap:8px; margin:0 0 12px; align-items:start;
}
.stat{
  background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:9px 12px;
  border-left:2px solid var(--goldq);
}
.stat dt{
  font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--dim2);
  font-weight:700; margin:0 0 3px;
}
.stat dd{margin:0; font-size:14px; color:var(--txt2); font-weight:600; line-height:1.4}
.grp{
  margin:16px 0 8px!important; font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gold); font-weight:700; padding-bottom:6px; border-bottom:1px solid var(--line);
}
.grp:first-child{margin-top:0!important}
.bul.notes{
  margin-top:4px; font-size:13px; color:var(--dim);
  columns:2; column-gap:26px; padding-left:16px;
}
.bul.notes li{break-inside:avoid; margin:3px 0}
@media (max-width:720px){ .bul.notes{columns:1} }

.notice{
  display:block; background:#2a1f1f; border:1px solid #6b4040; border-left:3px solid var(--red);
  border-radius:8px; padding:9px 13px; margin:0 0 8px; font-size:13px; color:var(--txt1);
}
:root[data-theme="light"] .notice{background:#fdf1f1; border-color:#d9b4b4; border-left-color:#a33b3b}
.sched.days .mf{grid-template-columns:150px 1fr}
.notices .rules-h{margin-bottom:6px}
.notice.tip{background:rgba(107,159,212,.10); border-color:rgba(107,159,212,.35); border-left:4px solid #6b9fd4; color:var(--txt2); font-weight:600}
:root[data-theme="light"] .notice.tip{background:#eaf2fb; border-color:#b9cfe8; border-left-color:#2d5f94}
.notice.note{background:rgba(255,193,7,.07); border-color:rgba(242,200,118,.35); border-left:4px solid #f2c876}
.notice.note b{color:#f2c876; margin-right:4px}
:root[data-theme="light"] .notice.note{background:#fdf6e6; border-color:#e8d3a6; border-left-color:#b8862b}
:root[data-theme="light"] .notice.note b{color:#8a5a00}
/* the live pages' own emphasis: bold key words, coloured durations/chances */
.em-b{font-weight:700; color:var(--txt2)}
.em-dur{color:#c7f0ff}
.em-ch{color:#ffb4b4; font-weight:600}
.em-ok{color:#9dffb0; font-weight:700}
.em-bad{color:#ff9d9d; font-weight:700}
:root[data-theme="light"] .em-dur{color:#1f5d96}
:root[data-theme="light"] .em-ch{color:#b42318}
:root[data-theme="light"] .em-ok{color:#2f7a3e}
:root[data-theme="light"] .em-bad{color:#b42318}
.steps{display:grid; gap:9px; margin:0 0 12px}
.step{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 14px;
}
.step-n{
  width:28px; height:28px; border-radius:50%; background:var(--chip); border:1px solid var(--gold);
  color:var(--gold2); font-weight:800; font-size:13px; display:flex; align-items:center;
  justify-content:center;
}
.step h5{margin:0 0 3px; font-size:14px; color:var(--gold2); font-weight:700}
.step p{margin:0; font-size:13px; color:var(--dim)}
/* paired illustrations: same size, side by side */
/* screenshots: one justified row, every picture whole and the same height
   (each figure's flex share is its aspect ratio, set inline) */
.shots{display:flex; gap:10px; margin:4px 0 14px; align-items:flex-start}
.shot{margin:0; min-width:0}
.shot img{
  width:100%; height:auto; display:block; border-radius:10px;
  border:1px solid var(--line); background:#000;
}
@media (max-width:640px){
  .shots{flex-direction:column; max-width:100%!important}
  .shot{flex:none!important; width:100%}
}
/* winner tiers: each tier owns its points and its items */
.tiers{display:grid; gap:12px; margin:0 0 14px}
.tier{
  background:linear-gradient(180deg, var(--panel), var(--chip));
  border:1px solid var(--line2); border-top:2px solid var(--gold);
  border-radius:12px; padding:14px 16px;
}
.tier-h{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.tier-h h5{
  margin:0; font-size:13px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold2); font-weight:800;
}
.tier-d{margin:6px 0 0; font-size:12.5px; color:var(--dim); line-height:1.5}
.tier-b{margin-top:10px; padding-top:10px; border-top:1px solid var(--line); display:grid; gap:8px}
.tier-n{margin:-2px 0 0; font-size:12px; color:var(--dim2); font-style:italic}
.rw-line.nolab{grid-template-columns:1fr}/* prize cards */
.prizes{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; margin:0 0 12px}
.prize{
  background:linear-gradient(180deg, var(--panel), var(--chip));
  border:1px solid var(--line2); border-top:2px solid var(--gold);
  border-radius:10px; padding:12px 14px;
}
.prize h5{
  margin:0 0 8px; font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold2); font-weight:800;
}
.prize-b{display:flex; flex-wrap:wrap; gap:5px; align-items:center}
.prize-b .bdg{margin:0}
.prize-b .orsep{margin:0 4px}
.pz-more{display:inline-flex; align-items:center; gap:2px}
.prize-d{margin:8px 0 0; font-size:12.5px; color:var(--dim); line-height:1.5}
/* conduct rules */
.rules{
  background:linear-gradient(180deg, rgba(167,74,74,.10), transparent 60%), var(--panel);
  border:1px solid #6b4040; border-left:3px solid var(--red);
  border-radius:10px; padding:12px 15px; margin:0 0 12px;
}
:root[data-theme="light"] .rules{background:#fdf3f3; border-color:#d9b4b4; border-left-color:#a33b3b}
.rules-h{
  font-size:11px; letter-spacing:.11em; text-transform:uppercase; font-weight:800;
  color:#e49a9a; margin:0 0 8px; display:flex; align-items:center; gap:7px;
}
:root[data-theme="light"] .rules-h{color:#a33b3b}
.rules-h::before{content:"\26A0"; font-size:13px}
.rules ul{margin:0; padding-left:17px}
.rules li{margin:5px 0; font-size:13px; color:var(--txt1); line-height:1.55}
.rules li::marker{color:var(--red)}
/* bonus / buff callout */
.bonus{
  display:flex; align-items:baseline; gap:9px; margin:0 0 10px;
  background:linear-gradient(90deg, rgba(111,191,122,.14), transparent 70%);
  border:1px solid #3c6342; border-left:3px solid var(--grn);
  border-radius:9px; padding:9px 13px; font-size:13.5px; color:var(--txt1);
}
.bonus b{
  flex:0 0 auto; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:#8fd79b; font-weight:800;
}
:root[data-theme="light"] .bonus{background:#eef8f0; border-color:#aacfb2; border-left-color:#2f7a3e}
/* "Location:" + one line per spawn (Kundun): map | which | start | duration */
.spawns{display:grid; gap:6px; margin:0 0 12px}
.sp-h{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:800; margin:0 0 2px}
.sp-row{
  display:grid; grid-template-columns:minmax(90px,130px) minmax(120px,1fr) auto auto auto auto;
  align-items:center; gap:6px 12px; background:var(--panel); border:1px solid var(--line);
  border-radius:9px; padding:8px 12px; font-size:13.5px; color:var(--txt1);
}
.sp-pl{font-weight:800; color:var(--gold2)}
.sp-k{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim2); font-weight:700}
.sp-v .bdg.t{margin:0}
@media (max-width:640px){ .sp-row{grid-template-columns:auto 1fr; } }
/* "Socket Set Items" + when it drops */
.dl-only{
  margin-left:auto; font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:800;
  color:#f2c876; border:1px solid rgba(242,200,118,.5); background:rgba(242,200,118,.08);
  border-radius:999px; padding:2px 9px; white-space:nowrap;
}
:root[data-theme="light"] .dl-only{color:#8a5a00; border-color:#d9b46a; background:#fdf3dc}
.bonus-l{margin:0; padding:0 0 0 16px; display:grid; gap:3px}
.bonus-l li::marker{color:var(--grn)}
:root[data-theme="light"] .bonus b{color:#2f7a3e}
/* ---------------- feature strip ---------------- */
.hls{display:grid; grid-template-columns:repeat(auto-fit,minmax(142px,1fr)); gap:9px; margin:0 0 12px}
.hl{
  background:linear-gradient(180deg, var(--panel), var(--chip));
  border:1px solid var(--line2); border-top:2px solid var(--gold);
  border-radius:10px; padding:13px 12px; text-align:center;
}
.hl b{display:block; font-size:24px; font-weight:800; color:var(--gold2); line-height:1.1; letter-spacing:-.5px}
.hl span{
  display:block; margin-top:5px; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--dim2); font-weight:700;
}.fchips{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px}
.fchip{
  background:var(--chip); border:1px solid var(--line2); border-radius:999px; padding:4px 12px;
  font-size:12.5px; color:var(--gold2); font-weight:600;
}
.feats{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  gap:9px; margin:0 0 12px; align-items:start;
}
.feat{
  background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:11px 13px;
  border-top:2px solid var(--goldq);
}
.feat h5{margin:0 0 4px; font-size:13.5px; color:var(--gold2); font-weight:700}
.feat p{margin:0; font-size:12.5px; color:var(--dim); line-height:1.5}

/* ---------------- command list ---------------- */
.cmds{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:0 18px;
  margin:0 0 10px;
}
.cmd{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:baseline;
  padding:7px 0; border-top:1px solid var(--line);
}
.cmd code{
  background:var(--deep); border:1px solid var(--line2); border-radius:5px; padding:2px 8px;
  color:var(--gold2); font-size:12.5px; white-space:nowrap; font-weight:600;
}
.cmd span{font-size:13px; color:var(--txt1)}
.cmd.note{grid-template-columns:1fr}
.cmd.note span{color:var(--dim2); font-size:12.5px}

/* ---------------- keyboard ---------------- */
.kbd{
  background:var(--panel2); border:1px solid var(--line2); border-radius:12px;
  padding:12px; margin:0 0 20px; display:grid; gap:6px; overflow-x:auto;
}
.kbd-row{display:flex; gap:5px; min-width:760px}
.key{
  flex:1 1 0; min-width:0; height:42px; display:flex; align-items:center; justify-content:center;
  background:var(--chip); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:6px; font-size:11.5px; color:#7f7189; font-weight:600;
  text-align:center; padding:0 3px; position:relative; user-select:none;
}
.key.has{
  background:linear-gradient(180deg,#3a2f20,#2e2518); border-color:var(--goldq);
  border-bottom-color:#7a5f28; color:var(--gold2); cursor:help;
}
.key.has:hover,.key.has:focus-visible,.key.has.on{
  background:linear-gradient(180deg,#54421f,#3d3017); color:#ffe0a3; outline:none;
  border-color:var(--gold); top:1px; border-bottom-width:1px;
  /* (a transform here would trap the key's pinned hover card inside the key) */
}
.key .tipbox{width:min(300px,80vw)}
.key .tipbox p{margin:0; color:var(--txt1)}

/* full bind list */
.kl{
  display:grid; grid-template-columns:104px 1fr; gap:10px; align-items:baseline;
  padding:5px 0; border-top:1px solid var(--line);
}
.kl:first-child{border-top:0}
.kl kbd{
  background:var(--chip); border:1px solid var(--line2); border-bottom-width:2px; border-radius:5px;
  padding:2px 6px; font-size:11px; font-family:inherit; font-weight:700; color:var(--gold2);
  text-align:center; display:block; line-height:1.35; word-break:break-word; min-height:21px;
}
.kl span{font-size:13px; color:var(--txt1)}

/* ---------------- class formula calculator ---------------- */
.mu-calculator{max-width:100%; border-radius:14px; padding:0; color:var(--txt)}
.mu-calculator h2{
  text-align:center; margin:0 0 16px; color:var(--gold2); font-size:26px; font-weight:800;
  letter-spacing:-.3px;
}
.mu-tab-menu{display:flex; margin-bottom:14px; cursor:pointer; justify-content:center; flex-wrap:wrap; gap:6px}
.mu-tab-menu .mu-tab{
  padding:7px 17px; text-align:center; border-radius:50px; font-weight:700; font-size:13px;
  color:var(--dim); background:var(--card); border:1px solid var(--line); white-space:nowrap;
  user-select:none;
}
.mu-tab-menu .mu-tab:hover{border-color:var(--gold); color:var(--gold2)}
.mu-tab-menu .mu-tab.active{
  background:linear-gradient(180deg,#e0b863,#bd8f3c); color:#201705; border-color:#8e6a2b;
}
.mu-tab-content{
  display:none; background:var(--card); border:1px solid var(--line);
  padding:18px; border-radius:var(--r);
}
.mu-tab-content.active{display:block}
.mu-layout{display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap}
.mu-inputs{flex:1 1 230px; min-width:200px}
.mu-results{flex:2 1 400px; min-width:240px}
.mu-tab-content label{
  display:block; margin:9px 0 3px; font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--dim2); font-weight:700;
}
.mu-tab-content input{
  width:100%; padding:8px 10px; border-radius:7px; border:1px solid var(--line2);
  background:var(--deep); color:var(--txt); font:inherit; font-size:14px; box-sizing:border-box;
}
.mu-tab-content input:focus{outline:none; border-color:var(--gold)}
.mu-tab-content button{
  margin-top:15px; width:100%; padding:10px;
  background:linear-gradient(180deg,#e0b863,#bd8f3c); color:#201705;
  border:1px solid #8e6a2b; border-radius:8px; font-weight:800; cursor:pointer; font-size:14px;
}
.mu-tab-content button:hover{filter:brightness(1.08)}
.mu-result-box{
  margin-top:11px; padding:12px 14px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); line-height:1.65; width:100%; box-sizing:border-box; font-size:13.5px;
}
.mu-result-box:first-child{margin-top:0}
.mu-result-box b{color:var(--gold2); font-weight:700}
.mu-formula{display:block; font-size:11.5px; color:var(--dim2); margin:2px 0 6px; font-family:Consolas,monospace}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    background:var(--bg2); border-bottom:1px solid var(--line2); padding:8px; gap:4px;
    max-height:72vh; overflow:auto;
  }
  .nav.show{display:flex}
  .nv>button{width:100%; justify-content:space-between; font-size:14px}
  .dd{position:static; display:none; min-width:0; box-shadow:none; margin:3px 0 6px}
  .nv.open .dd{display:block}
  .nv:hover .dd{display:none}
  .nv.open:hover .dd{display:block}
  .burger{display:block; margin-left:auto}
  .hask{display:none}
  .hd-in{position:relative; flex-wrap:wrap}
}
@media (max-width:560px){
  :root{--fs:14.5px}
  .hero{padding:26px 0 18px}
  .bigask{flex-wrap:wrap; gap:8px}
  .sbox{flex-basis:100%}
  .bigask input{border-radius:var(--r); border-right:1px solid var(--line2); width:100%; flex-basis:100%}
  .tb-home, .tb-x{display:none}
  .tb-in{padding:0 12px; gap:6px}
  .tb-nav{margin-left:0; gap:2px}
  .tb-a{padding:4px 8px}
  .discord{margin-left:auto}
  .bigask button{border-radius:var(--r); width:100%}
  .card{flex-direction:column; gap:8px}
  .card-ic{width:46px; height:46px}
  .grid{grid-template-columns:1fr}
  .modal{padding:0}
  .modal-bd{border-radius:0; min-height:100%; padding:18px 14px}
  .askfab{padding:10px 15px; font-size:13px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}