/* ============================================================
   Leeroy Jenkins — $LEEROY
   Palette and chrome taken from the vanilla World of Warcraft
   interface: Blackrock stone, UI brass, and the item-quality
   colours used semantically rather than decoratively.
   ============================================================ */

:root{
  /* stone */
  --stone-900:#0d0906;
  --stone-850:#120c07;
  --stone-800:#171009;
  --stone-700:#20170c;
  --stone-600:#2c2013;
  --stone-500:#3b2c1a;

  /* brass */
  --brass:#c8aa6e;
  --brass-hi:#f0e2b6;
  --brass-mid:#9c7f45;
  --brass-lo:#5d4820;

  /* item quality */
  --legendary:#ff8000;
  --epic:#a335ee;
  --epic-txt:#c58cff;
  --rare:#0070dd;
  --uncommon:#1eff00;
  --flavor:#ffd100;

  /* bars */
  --blood:#9d1d12;
  --blood-hi:#d4462f;

  /* parchment */
  --parch:#e7d3a8;
  --parch-dk:#d3bb8b;
  --ink:#3c2a12;
  --ink-soft:#6a5230;

  /* text on stone */
  --txt:#dccdb1;
  --txt-dim:#a3927a;

  --wrap:1080px;
  --pad:clamp(72px,9vw,124px);

  --noise: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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}

/* author display rules otherwise beat the UA rule for [hidden] */
[hidden]{display:none !important}

html{scroll-behavior:smooth;scroll-padding-top:84px}

body{
  margin:0;
  background:var(--stone-900);
  color:var(--txt);
  font:400 17px/1.62 "Barlow Semi Condensed",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%}

::selection{background:var(--legendary);color:var(--stone-900)}

.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--brass);color:var(--stone-900);
  padding:10px 18px;font-weight:600;
}
.skip:focus{left:12px;top:12px}

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--legendary);
  outline-offset:3px;
}

/* ─────────────── shared chrome ─────────────── */

/* Riveted brass-edged stone panel, the core WoW UI container. */
.panel{
  position:relative;
  border:1px solid var(--brass-lo);
  background:
    radial-gradient(circle at 9px 9px, var(--brass-hi) 0 1.4px, var(--brass-mid) 1.4px 3px, transparent 3.3px),
    radial-gradient(circle at calc(100% - 9px) 9px, var(--brass-hi) 0 1.4px, var(--brass-mid) 1.4px 3px, transparent 3.3px),
    radial-gradient(circle at 9px calc(100% - 9px), var(--brass-hi) 0 1.4px, var(--brass-mid) 1.4px 3px, transparent 3.3px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), var(--brass-hi) 0 1.4px, var(--brass-mid) 1.4px 3px, transparent 3.3px),
    linear-gradient(180deg,var(--stone-700),var(--stone-850));
  box-shadow:
    inset 0 1px 0 rgba(240,226,182,.10),
    inset 0 0 60px rgba(0,0,0,.55),
    0 3px 0 rgba(0,0,0,.45);
}

.panel-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 18px;
  border-bottom:1px solid var(--brass-lo);
  background:linear-gradient(180deg,rgba(200,170,110,.14),rgba(0,0,0,.25));
}
.guild{
  font-family:"Grenze Gotisch",serif;font-weight:700;font-size:19px;
  color:var(--brass-hi);letter-spacing:.01em;
}
.zone{font-size:14px;color:var(--txt-dim)}

/* buttons */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  font:600 17px/1 "Barlow Semi Condensed",sans-serif;
  padding:14px 26px;border-radius:2px;
  border:1px solid var(--stone-900);
  transition:filter .15s ease, transform .08s ease;
}
.btn-sm{padding:9px 16px;font-size:15px}

.btn-gold{
  color:#2a1c06;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass) 45%,var(--brass-mid));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.28), 0 2px 0 rgba(0,0,0,.5);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.btn-gold:hover{filter:brightness(1.12)}
.btn-gold:active{transform:translateY(1px)}
.btn-gold[disabled]{opacity:.45;cursor:not-allowed;filter:none}

.btn-ghost{
  color:var(--brass);
  background:linear-gradient(180deg,rgba(200,170,110,.10),rgba(0,0,0,.3));
  border-color:var(--brass-lo);
  box-shadow:inset 0 1px 0 rgba(240,226,182,.12);
}
.btn-ghost:hover{color:var(--brass-hi);border-color:var(--brass-mid)}

/* headings */
.h2{
  font-family:"Grenze Gotisch",serif;
  font-weight:700;
  font-size:clamp(38px,5.5vw,62px);
  line-height:1;
  margin:0 0 10px;
  color:var(--brass-hi);
}
.h2.ink{color:var(--ink)}
.sub{margin:0 0 42px;font-size:19px;color:var(--txt-dim);max-width:46ch}

.section{padding-block:var(--pad)}

/* ─────────────── top bar ─────────────── */

.bar{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--brass-lo);
  background:linear-gradient(180deg,rgba(32,23,12,.96),rgba(13,9,6,.96));
  backdrop-filter:blur(6px);
}
.bar-in{display:flex;align-items:center;gap:20px;min-height:62px}

.mark{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--brass);margin-right:auto;
}
.crest{width:28px;height:28px;flex:none}
.mark-txt{
  font-family:"Grenze Gotisch",serif;font-weight:700;font-size:23px;
  color:var(--brass-hi);white-space:nowrap;
}

.nav{display:flex;gap:26px}
.nav a{
  color:var(--txt-dim);text-decoration:none;font-size:16px;
  padding:4px 0;border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--brass-hi);border-bottom-color:var(--brass-mid)}

/* ─────────────── hero ─────────────── */

.hero{
  position:relative;
  padding-block:clamp(56px,9vw,104px) clamp(64px,8vw,96px);
  background:var(--stone-900);
  border-bottom:1px solid var(--brass-lo);
  overflow:hidden;
}
/* torchlight rising off the rookery floor */
.hero-glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(150% 82% at 50% 119%, rgba(255,128,0,.44), rgba(255,128,0,.09) 46%, transparent 72%),
    radial-gradient(105% 72% at 50% -18%, rgba(163,53,238,.15), transparent 64%),
    linear-gradient(180deg,#150e08,#0a0605);
}
.hero-glow::before{
  content:"";position:absolute;inset:0;
  background:var(--noise);
  opacity:.055;
}
.hero-glow::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(118% 92% at 50% 46%, transparent 36%, rgba(0,0,0,.62));
}
.hero-in{position:relative;text-align:center}

/* the token itself, lit like a legendary drop */
.token{display:block;position:relative;width:fit-content;margin:0 auto clamp(18px,3vw,30px)}
.token::before{
  content:"";position:absolute;z-index:-1;
  inset:-14%;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,128,0,.42), rgba(255,128,0,.10) 62%, transparent 78%);
}
.token img{
  display:block;
  width:clamp(186px,28vw,324px);height:auto;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.65));
}

.shout{
  margin:0;
  font-family:"Grenze Gotisch",serif;
  font-weight:900;
  font-size:clamp(50px,11.5vw,134px);
  line-height:.87;
  letter-spacing:-.005em;
  color:var(--legendary);
  text-shadow:
    0 0 1px rgba(0,0,0,.9),
    0 4px 0 rgba(0,0,0,.55),
    0 0 46px rgba(255,128,0,.34);
}
.shout span{display:block}
.shout span:last-child{color:var(--brass-hi);text-shadow:0 4px 0 rgba(0,0,0,.55)}

/* the caption under the token: a shout, so it is set as one */
.caption{
  margin:22px auto 0;max-width:24ch;
  font-weight:600;font-size:clamp(20px,2.7vw,31px);
  line-height:1.2;letter-spacing:.055em;
  text-transform:uppercase;
  color:var(--brass-hi);
}

.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}

/* battle cry button */
.btn-cry{display:inline-flex;align-items:center;gap:9px}
/* the player is parked off-screen rather than display:none, which some
   browsers treat as a reason to refuse playback */
.cry-player{
  position:fixed;left:-10000px;top:0;
  width:240px;height:135px;
  opacity:0;pointer-events:none;
}
.cry-ico{
  width:0;height:0;flex:none;
  border-left:10px solid currentColor;
  border-block:6.5px solid transparent;
}
.btn-cry.is-playing .cry-ico{
  width:10px;height:12px;border:0;
  background:currentColor;
  clip-path:polygon(0 0,38% 0,38% 100%,0 100%,0 0,62% 0,100% 0,100% 100%,62% 100%,62% 0);
}
.btn-cry.is-playing{color:var(--legendary);border-color:var(--legendary)}

/* ─────────────── the king (description) ─────────────── */

.about{
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(255,128,0,.06), transparent 62%),
    var(--stone-900);
  border-bottom:1px solid var(--brass-lo);
}
.about-in{max-width:68ch}
.lnk{
  color:var(--legendary);text-decoration:none;
  border-bottom:1px solid rgba(255,128,0,.45);
}
.lnk:hover{border-bottom-color:var(--legendary)}
.about p{
  font-family:"Grenze",serif;font-size:20px;line-height:1.72;
  margin:0 0 18px;color:var(--txt);
}
.about-lead{font-size:24px !important;line-height:1.62 !important;color:var(--brass-hi) !important}

.warcry{
  font-family:"Barlow Semi Condensed",sans-serif !important;
  font-weight:600;
  font-size:clamp(22px,3.3vw,40px) !important;
  line-height:1.15 !important;
  letter-spacing:.045em;
  text-transform:uppercase;
  color:var(--legendary) !important;
  margin:30px 0 0 !important;
  text-shadow:0 0 34px rgba(255,128,0,.3);
}

/* ─────────────── the original clip ─────────────── */

.tube{margin-top:clamp(38px,5vw,56px)}
.tube-play{
  display:block;position:relative;width:100%;
  padding:0;border:0;cursor:pointer;background:#000;
  aspect-ratio:16/9;overflow:hidden;
}
.tube-play img{
  position:absolute;inset:0;margin:auto;
  width:100%;height:100%;object-fit:contain;
  opacity:.72;transition:opacity .25s ease,transform .3s ease;
}
.tube-play:hover img{opacity:.92;transform:scale(1.02)}

/* brass play bezel, same language as the spell icons */
.tube-tri{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:84px;height:84px;display:grid;place-items:center;
  border:2px solid var(--brass-mid);
  background:linear-gradient(150deg,rgba(60,44,26,.94),rgba(13,9,6,.94));
  box-shadow:inset 0 2px 0 rgba(240,226,182,.22), 0 4px 0 rgba(0,0,0,.6);
  transition:filter .2s ease;
}
.tube-tri::after{
  content:"";
  width:0;height:0;margin-left:7px;
  border-left:26px solid var(--brass-hi);
  border-block:16px solid transparent;
}
.tube-play:hover .tube-tri{filter:brightness(1.22)}

.tube-label{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 18px;
  font-family:"Grenze Gotisch",serif;font-weight:700;font-size:22px;
  color:var(--brass-hi);text-align:left;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));
}
.tube iframe{display:block;width:100%;aspect-ratio:16/9;border:0}

/* ─────────────── the plan (quest scroll) ─────────────── */

.plan{background:var(--stone-900)}

.scroll{
  position:relative;
  padding:clamp(34px,5vw,62px) clamp(28px,5vw,64px);
  color:var(--ink);
  border:1px solid #8a6f3d;
  background:
    radial-gradient(135% 115% at 50% -5%, #f6e9cb, transparent 58%),
    radial-gradient(90% 80% at 6% 102%, rgba(120,88,40,.20), transparent 58%),
    radial-gradient(80% 70% at 97% 18%, rgba(120,88,40,.16), transparent 58%),
    linear-gradient(180deg,var(--parch),var(--parch-dk));
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 18px 50px rgba(0,0,0,.55);
}
/* fibre grain and the aged edge */
.scroll::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--noise);
  opacity:.07;
  box-shadow:inset 0 0 70px rgba(92,64,24,.4);
}
/* keep the quest text above the grain layer */
.scroll > *{position:relative;z-index:1}

.quest{max-width:58ch;margin-top:20px;position:relative}
.quest p{
  font-family:"Grenze",serif;font-size:21px;line-height:1.7;
  margin:0 0 16px;color:var(--ink);
}

.brief{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:1px;
  margin:38px 0 0;padding:0;
  background:rgba(92,64,24,.4);
  border:1px solid rgba(92,64,24,.45);
}
.brief > div{background:rgba(255,248,230,.5);padding:16px 18px}
.brief dt{font-size:14px;color:var(--ink-soft);margin-bottom:2px}
.brief dd{
  margin:0;font-family:"Grenze Gotisch",serif;font-weight:700;
  font-size:22px;line-height:1.15;color:var(--ink);
}

.odds{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin:40px 0 0;padding-top:28px;
  border-top:2px solid rgba(92,64,24,.35);
}
.odds b{
  font-family:"Grenze Gotisch",serif;font-weight:900;
  font-size:clamp(50px,8.5vw,92px);line-height:.9;color:var(--ink);
}
.odds span{
  font-family:"Grenze",serif;font-style:italic;
  font-size:clamp(18px,2.2vw,23px);color:var(--ink-soft);max-width:30ch;
}
.aside{margin:16px 0 0;font-size:16.5px;color:var(--ink-soft)}

/* ─────────────── the charge (action bar) ─────────────── */

.charge{
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255,128,0,.07), transparent 65%),
    var(--stone-850);
  border-block:1px solid var(--brass-lo);
}

.actionbar{
  position:relative;
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
/* the hotbar the four icons are seated in */
@media (min-width:901px){
  .actionbar::before{
    content:"";position:absolute;z-index:0;
    left:0;right:0;top:-11px;height:104px;
    border-block:1px solid var(--brass-lo);
    background:linear-gradient(180deg,rgba(200,170,110,.08),rgba(0,0,0,.38));
  }
}
.slot{min-width:0;position:relative;z-index:1}
.slot h3{
  font-family:"Grenze Gotisch",serif;font-weight:700;font-size:28px;
  margin:20px 0 7px;color:var(--brass-hi);
}
.slot p{margin:0;font-size:16.5px;line-height:1.6;color:var(--txt-dim);max-width:34ch}

/* spell icon: dark slate square in a brass bezel with a keybind corner */
.icon{
  position:relative;display:grid;place-items:center;
  width:82px;height:82px;
  border:2px solid var(--brass-mid);
  background:
    radial-gradient(85% 85% at 30% 22%, rgba(255,128,0,.14), transparent 70%),
    linear-gradient(150deg,var(--stone-500),var(--stone-900));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.8),
    inset 0 2px 0 rgba(240,226,182,.22),
    0 3px 0 rgba(0,0,0,.55);
}
.icon svg{
  width:40px;height:40px;fill:none;stroke:var(--brass-hi);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.key{
  position:absolute;top:-2px;left:-2px;
  min-width:20px;height:20px;padding:0 4px;
  display:grid;place-items:center;
  font-size:13px;font-weight:600;line-height:1;
  color:var(--brass-hi);background:rgba(0,0,0,.9);
  border:1px solid var(--brass-mid);
}

/* ─────────────── contract panel ─────────────── */

.contract{margin-top:clamp(34px,4.5vw,48px)}
.contract-body{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:18px;
}
.addr{
  flex:1 1 320px;min-width:0;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:15px;color:var(--brass-hi);
  word-break:break-all;
  padding:11px 13px;
  background:rgba(0,0,0,.5);
  border:1px solid var(--brass-lo);
}
.contract[data-address=""] .addr{color:var(--txt-dim);font-style:italic}
.contract-note{
  margin:0;padding:0 18px 16px;
  font-size:15px;color:var(--txt-dim);
}
.contract-note.ok{color:var(--uncommon)}

/* ─────────────── footer ─────────────── */

.foot{
  padding-block:clamp(56px,7vw,86px);
  border-top:1px solid var(--brass-lo);
  background:
    radial-gradient(100% 70% at 50% 120%, rgba(255,128,0,.10), transparent 60%),
    var(--stone-850);
}
.foot-in{text-align:center}
.chicken{
  margin:0;
  font-family:"Grenze Gotisch",serif;font-weight:700;
  font-size:clamp(30px,5.4vw,58px);line-height:1;
  color:var(--brass-hi);
}
.links{display:flex;justify-content:center;gap:24px;margin:26px 0 34px}
.links a{color:var(--brass);text-decoration:none;font-size:17px;border-bottom:1px solid rgba(200,170,110,.35)}
.links a:hover{color:var(--brass-hi);border-bottom-color:var(--brass)}
.fine{
  margin:0 auto 12px;max-width:66ch;
  font-size:14.5px;line-height:1.65;color:#95866f;
}

/* ─────────────── responsive ─────────────── */

@media (max-width:900px){
  .actionbar{grid-template-columns:repeat(2,1fr);gap:28px}
  .drops{grid-template-columns:1fr}
  .about-lead{font-size:22px !important}
}

@media (max-width:640px){
  body{font-size:16px}
  .nav{display:none}
  .mark-txt{font-size:20px}
  .actionbar{grid-template-columns:1fr;gap:26px}
  .odds{gap:8px}
  .about p{font-size:18px}
  .about-lead{font-size:20px !important}
  .tube-tri{width:62px;height:62px}
  .tube-tri::after{border-left-width:19px;border-block-width:12px}
  .tube-label{font-size:18px;padding:12px 14px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .tube-play:hover img{transform:none}
}