/* Mahjong Compendium — styled to match pandaren.org:
   ink-wash greens and browns, cream text, temple-gold accents, and the
   "ZCOOL XiaoWei" display face for headings and chrome. Body copy stays a
   serif at reading size, as the hub site does, so long entries remain legible. */

:root{
  /* ground */
  --bg:#10271f; --bg-mid:#1f5142; --bg-warm:#6f342d;

  /* surfaces — translucent, so the ground gradient shows through */
  --panel:rgba(12,32,25,.62); --panel-2:rgba(8,24,19,.8);
  --line:rgba(214,173,85,.22); --line-strong:rgba(214,173,85,.44);

  /* ink */
  --ink:#f3e3bd; --ink-bright:#fffaeb;
  --dim:rgba(243,227,189,.74); --faint:rgba(243,227,189,.52);

  /* temple gold */
  --accent:#d6ad55; --accent-lit:#f0cd7d; --accent-ink:#24160d;

  /* evidence grades, warmed to the palette but kept apart from one another */
  --corroborated:#52b98d; --partial:#d6ad55; --conflicting:#d2624a;
  --single-source:#5aa9c9; --unsupported:#a78bd0;

  --display:"ZCOOL XiaoWei",Georgia,"Times New Roman",serif;
  --body:Georgia,"Times New Roman",serif;
  --ui:Arial,Helvetica,sans-serif;

  --radius:12px; --max:76rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; color:var(--ink);
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 50% 0,rgba(214,173,85,.18),transparent 30rem),
    linear-gradient(135deg,#10271f 0%,#1f5142 45%,#6f342d 100%);
  background-attachment:fixed; background-repeat:no-repeat; background-size:cover;
  font:16px/1.7 var(--body);
}
/* keeps the warm end of the gradient from washing out long-form text */
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(5,15,11,.2) 0%,rgba(5,15,11,.55) 100%)}

a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-lit); text-decoration:underline; text-underline-offset:.18em}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
::selection{background:rgba(214,173,85,.3); color:var(--ink-bright)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em;
  background:var(--panel-2); border:1px solid var(--line); color:var(--ink);
  padding:.1em .35em; border-radius:5px}
main{max-width:var(--max); margin:0 auto; padding:2rem 1rem 4rem}

/* ZCOOL XiaoWei ships one weight, so headings hold at 400 and lean on size,
   colour and shadow for hierarchy rather than a synthesised bold. */
h1,h2,h3{font-family:var(--display); font-weight:400; letter-spacing:.01em}
h1{font-size:clamp(2rem,4.4vw,2.9rem); line-height:1.18; margin:0 0 .5rem;
  color:var(--ink-bright); text-shadow:0 .35rem 1.1rem rgba(0,0,0,.5)}
h2{font-size:1.6rem; margin:2.3rem 0 .6rem; color:var(--ink-bright)}
h3{font-size:1.2rem; margin:1.7rem 0 .4rem; color:var(--accent)}
p{margin:.7rem 0}
.lede{font-size:1.12rem; font-style:italic; color:var(--dim); max-width:60ch}
.dim{color:var(--dim)}

/* chrome */
.bar{display:flex; gap:1rem; align-items:center; justify-content:space-between;
  padding:.7rem 1rem; background:linear-gradient(180deg,rgba(7,19,15,.94),rgba(7,19,15,.78));
  border-bottom:1px solid var(--line-strong);
  position:sticky; top:0; z-index:20; backdrop-filter:blur(8px); flex-wrap:wrap}
.brand{font-family:var(--display); font-size:1.3rem; color:var(--ink-bright);
  letter-spacing:.02em; text-shadow:0 .25rem .8rem rgba(0,0,0,.6)}
.brand:hover{color:var(--accent); text-decoration:none}
.bar nav{display:flex; gap:.25rem; flex-wrap:wrap}
.bar nav a{font-family:var(--display); color:var(--dim); padding:.3rem .65rem;
  border:1px solid transparent; border-radius:8px; font-size:1rem}
.bar nav a:hover{background:rgba(214,173,85,.12); border-color:var(--line);
  color:var(--ink-bright); text-decoration:none}
.foot{position:static; border-top:1px solid var(--line-strong); border-bottom:0;
  background:linear-gradient(0deg,rgba(7,19,15,.9),rgba(7,19,15,.6));
  color:var(--faint); font-family:var(--ui); font-size:.8rem; margin-top:3rem}

/* landing */
.hero{display:grid; gap:1.5rem; grid-template-columns:1fr; align-items:stretch}
@media(min-width:60rem){.hero{grid-template-columns:1.35fr 1fr}}
.stage{position:relative; min-height:26rem; height:min(70vh,40rem);
  background:radial-gradient(120% 120% at 50% 10%,#1d4538 0%,#081712 72%);
  border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 1.2rem 2.6rem rgba(0,0,0,.45), inset 0 0 3rem rgba(0,0,0,.45)}
@media(max-width:60rem){.stage{min-height:0; height:min(52vh,22rem)}}
.view{display:flex; flex-direction:column; gap:.55rem}
/* deliberately quiet: the tree is the front page, this is a footnote to it */
.learn{margin:0; text-align:center; font-family:var(--ui); font-size:.78rem; letter-spacing:.04em}
.learn a{color:var(--faint); text-decoration:underline; text-underline-offset:.18em;
  text-decoration-color:var(--line-strong)}
.learn a:hover{color:var(--accent); text-decoration-color:var(--accent)}
#tree{display:block; width:100%; height:100%; cursor:grab}
#tree:active{cursor:grabbing}
#hud{position:absolute; inset:0; pointer-events:none}
.hint{position:absolute; left:0; right:0; bottom:.6rem; text-align:center;
  color:var(--faint); font-family:var(--ui); font-size:.76rem; letter-spacing:.06em; margin:0}
.hint a{pointer-events:auto}
#labels{position:absolute; inset:0; overflow:hidden}
/* label text sits over a busy canvas, so it stays sans for crispness at 12px */
.lab{position:absolute; left:0; top:0; white-space:nowrap; font-family:var(--ui);
  font-size:.76rem; font-weight:600; padding:.08rem .35rem; border-radius:6px;
  will-change:transform; background:rgba(6,17,13,.74); opacity:0; transition:opacity .2s ease}
.lab.on{opacity:.96}
#tip{position:absolute; padding:.5rem .7rem; background:rgba(9,25,20,.97);
  border:1px solid var(--line-strong); border-left-width:3px; border-radius:9px;
  font-size:.85rem; max-width:17rem; transform:translate(-50%,-125%); line-height:1.45;
  box-shadow:0 .6rem 1.6rem rgba(0,0,0,.5)}
#tip b{display:block; font-family:var(--display); font-weight:400; font-size:1rem;
  color:var(--ink-bright)}
#tip span{color:var(--dim)}
.intro{display:flex; flex-direction:column; justify-content:center}
.legend{list-style:none; display:flex; flex-wrap:wrap; gap:.4rem .9rem; padding:0; margin:1rem 0}
.legend li{display:flex; align-items:center; gap:.4rem; color:var(--dim);
  font-family:var(--ui); font-size:.82rem}
.legend i{width:.7rem; height:.7rem; border-radius:50%; display:inline-block;
  box-shadow:0 0 .4rem rgba(0,0,0,.5)}
.cta{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.8rem}

/* buttons borrow the hub's lacquered-plaque treatment */
.btn{display:inline-block; font-family:var(--display); font-size:1.02rem;
  background:rgba(243,227,189,.9); color:var(--accent-ink);
  border:2px solid rgba(214,173,85,.78); border-radius:.3rem; padding:.5rem 1.1rem;
  text-shadow:0 .1rem .3rem rgba(0,0,0,.2); box-shadow:0 .35rem 1rem rgba(0,0,0,.35);
  transition:transform 200ms ease, background 200ms ease, box-shadow 200ms ease}
.btn:hover{background:rgba(255,240,200,.96); text-decoration:none;
  transform:translateY(-2px); box-shadow:0 .5rem 1.3rem rgba(0,0,0,.45)}
.btn:active{transform:translateY(0); box-shadow:0 .2rem .8rem rgba(0,0,0,.35)}
.btn.ghost{background:rgba(16,39,31,.55); color:var(--ink); border-color:var(--line-strong)}
.btn.ghost:hover{background:rgba(31,81,66,.65); color:var(--ink-bright)}

.counts{display:flex; gap:.6rem; flex-wrap:wrap; margin:1.5rem 0}
.counts.wide{margin-top:2.5rem}
.count{flex:1 1 8rem; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:.8rem 1rem; border-top:3px solid var(--line-strong);
  box-shadow:0 .5rem 1.2rem rgba(0,0,0,.3)}
.count b{display:block; font-family:var(--display); font-weight:400; font-size:1.9rem;
  line-height:1.15; color:var(--ink-bright)}
.count span{color:var(--dim); font-family:var(--ui); font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase}
.count.e-corroborated{border-top-color:var(--corroborated)}
.count.e-partial{border-top-color:var(--partial)}
.count.e-conflicting{border-top-color:var(--conflicting)}
.count.e-single-source{border-top-color:var(--single-source)}
.count.e-unsupported{border-top-color:var(--unsupported)}

/* tables */
.scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);
  margin:1rem 0; background:var(--panel)}
table{border-collapse:collapse; width:100%; font-size:.9rem}
th,td{text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--line); vertical-align:top}
thead th{background:var(--panel-2); color:var(--accent); font-family:var(--ui);
  font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap; position:sticky; top:0}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(214,173,85,.08)}
.cmp td{min-width:9rem}
.cmp .src{min-width:3.5rem; white-space:nowrap}
.list td:first-child{min-width:16rem}

/* pills + tags */
.pill,.tags li{display:inline-block; padding:.12rem .5rem; border-radius:999px;
  font-family:var(--ui); font-size:.74rem; border:1px solid var(--line);
  background:var(--panel-2); color:var(--dim); white-space:nowrap}
.tags{list-style:none; display:flex; gap:.4rem; flex-wrap:wrap; padding:0; margin:.8rem 0 0}
.tags .fam{border-color:var(--fam); color:var(--fam)}
.e-corroborated{color:var(--corroborated); border-color:color-mix(in srgb,var(--corroborated) 45%,transparent)}
.e-partial{color:var(--partial); border-color:color-mix(in srgb,var(--partial) 45%,transparent)}
.e-conflicting{color:var(--conflicting); border-color:color-mix(in srgb,var(--conflicting) 45%,transparent)}
.e-single-source{color:var(--single-source); border-color:color-mix(in srgb,var(--single-source) 45%,transparent)}
.e-unsupported{color:var(--unsupported); border-color:color-mix(in srgb,var(--unsupported) 45%,transparent)}

/* variant page */
.variant{max-width:68ch}
/* prose stays a readable column, but the comparison table may use the
   whole page width where there is room for it */
@media(min-width:72rem){.variant .scroll{width:min(calc(var(--max) - 2rem),66rem)}}
.variant .crumb{color:var(--faint); font-family:var(--ui); font-size:.8rem; margin:0 0 .8rem}
.crumb .sep{opacity:.5; padding:0 .15rem}
.variant h1{border-left:4px solid var(--fam); padding-left:.7rem; margin-left:-.7rem}
.caveat{border-left:3px solid var(--partial); padding:.2rem 0 .2rem 1rem; background:var(--panel);
  border-radius:0 var(--radius) var(--radius) 0}
.verdict{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:.6rem .8rem; font-size:.92rem}
.kids,.srcs{padding-left:1.2rem}
.kids li,.srcs li{margin:.3rem 0}
.kids li::marker,.srcs li::marker,.notes li::marker{color:var(--accent)}
.notes{padding-left:1.1rem; color:var(--dim); font-size:.92rem}
.notes li{margin:.5rem 0}
.srcs .role{color:var(--faint); font-family:var(--ui); font-size:.74rem}
.srcs .canonical .role{color:var(--accent)}
/* footnotes carry the whole source, so a reader never has to leave the page */
.srcs li{margin:1.1rem 0}
.srcs .cite{margin:0}
.srcs .dim{font-size:.92rem; margin:.15rem 0}
.srcs .url{font-size:.84rem; word-break:break-all; margin:.15rem 0}
.srcs .cited{font-size:.86rem; color:var(--dim); margin:.15rem 0}
.srcs .when{color:var(--faint); font-family:var(--ui); font-size:.74rem}
.srcs li:target{background:var(--panel); border-radius:var(--radius);
  box-shadow:0 0 0 .6rem var(--panel)}
.back{margin-top:2.5rem}

/* about */
.prose{max-width:68ch}
.limit{margin:1.8rem 0}
/* the chart's own wording, set apart from the reading of it that follows */
.claim{border-left:3px solid var(--partial); padding:.15rem 0 .15rem .9rem;
  color:var(--dim); font-style:italic; margin:.5rem 0 .9rem}
.anchors{font-family:var(--ui); font-size:.78rem; color:var(--faint); margin-top:.8rem}
.anchors .sep{opacity:.5; padding:0 .15rem}

/* findings + references */
.finding{border:1px solid var(--line); border-radius:var(--radius); padding:.6rem .9rem;
  margin:.5rem 0; background:var(--panel)}
.finding summary{cursor:pointer; font-family:var(--display); font-weight:400;
  font-size:1.05rem; color:var(--ink-bright)}
.finding summary::marker{color:var(--accent)}
.finding p{color:var(--dim); font-size:.94rem}
.ref{border-top:1px solid var(--line); padding:1rem 0}
.ref .cite{margin:0 0 .2rem}
.ref .url{font-size:.82rem; word-break:break-all; margin:.2rem 0}
.ref .cited{font-size:.86rem; color:var(--dim)}
.ref .uncited{color:var(--faint); font-style:italic}
.ref:target{background:var(--panel); border-radius:var(--radius);
  box-shadow:0 0 0 .6rem var(--panel), inset 0 0 0 1px var(--line-strong)}

@media(max-width:40rem){
  body{font-size:15px}
  main{padding:1.5rem 1rem 3rem}
  /* keep the sticky bar to two rows on a phone: the display face is wider
     than the sans it replaced, so the nav is pulled back in to compensate */
  .bar{padding:.55rem .8rem; gap:.4rem}
  .brand{font-size:1.15rem}
  .bar nav{gap:.1rem}
  .bar nav a{font-size:.92rem; padding:.25rem .4rem}
  h2{font-size:1.4rem}
}

/* the bar is sticky and wraps to two or three rows on narrow screens, so a
   targeted footnote has to clear whatever height it currently has */
.srcs li,.ref{scroll-margin-top:9rem}
@media(min-width:22rem){.srcs li,.ref{scroll-margin-top:6.5rem}}
@media(min-width:35rem){.srcs li,.ref{scroll-margin-top:4.5rem}}

@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}