/* Chaos theme for the calculator pages.
 * (The file keeps its old name because every tool links it by URL.)
 *
 * The tools (IAS Calculator, Advanced Stats, Hit Chance, Damage Atlas,
 * Spawn Simulator, Base Finder) share one "stone and gold" design: the same
 * variables (--void, --stone, --gold, --display…) and the same HD dungeon
 * skin (gilded panels, stone tab buttons, gold-gradient titles). This sheet
 * turns that design into the Chaos theme: black stone, dull brass, Barlow Condensed.
 * Load it after the page's own styles, together with tristram.css, and put
 * class="tri" on <body>:
 *   <link rel="stylesheet" href="https://roofooevazan.github.io/assets/tristram.css">
 *   <link rel="stylesheet" href="https://roofooevazan.github.io/assets/tristram-tools.css">
 */
:root{
  --void:#090807;
  --stone:#14110f;
  --stone-2:#1e1814;
  --pit:#0d0b09;
  --edge:#4e3b28;
  --edge-hi:#6e5230;
  --ink:#f0e6d6;
  --muted:#a89480;
  --gold:#c4924a;
  --gold-hi:#e0b878;
  --blood:#a8321f;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Barlow Semi Condensed","Arial Narrow",sans-serif;
  --heat-slow:#1a1511;
}
/* The plate is dimmed more than on the main page: tool text sits on it. */
body.tri{--tri-dim:62%;background:transparent}
a{color:#d9a860}

/* ---------- header: engraved title, no globes, a thin brass rule ---------- */
.globe,.orb{display:none}
h1{
  font:700 clamp(26px,4.4vw,42px)/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--tri-fg);-webkit-text-fill-color:currentColor;filter:none;text-shadow:none;
}
.rune-rule{height:10px;background:linear-gradient(90deg,transparent,var(--tri-gold) 20%,var(--tri-gold) 80%,transparent) center/100% 1px no-repeat}
.rune-rule::after{display:none}
.eyebrow,.page-head .eyebrow{font:400 12px var(--display);letter-spacing:.14em;color:var(--tri-gold)}

/* ---------- panels: obsidian sheets edged in brass ---------- */
.panel{
  background:color-mix(in srgb,var(--tri-panel) 95%,transparent);
  border:1px solid color-mix(in srgb,var(--tri-gold) 60%,transparent);border-radius:0;
  box-shadow:0 14px 40px rgba(0,0,0,.6);
}
.panel::before,.panel::after{display:none}

/* ---------- tabs and buttons: flat, square, brass when chosen ---------- */
.tab,.subtab,.btn{
  font:400 13px var(--display);letter-spacing:.1em;text-transform:uppercase;
  color:var(--tri-fg);background:var(--tri-bg);
  border:1px solid var(--tri-line);border-radius:0;
  box-shadow:none;text-shadow:none;padding:12px 16px;
}
.subtab,.btn{padding:10px 14px}
.tab:hover,.subtab:hover,.btn:hover{filter:brightness(1.15);color:var(--tri-fg)}
.tab:active,.subtab:active,.btn:active{box-shadow:none}
.tab[aria-selected="true"],.subtab[aria-selected="true"],.btn.primary{
  color:var(--tri-accent-fg);background:var(--tri-accent);border-color:var(--tri-accent);box-shadow:none;
}

/* Segmented toggles (Advanced Stats' character/mercenary, Damage Atlas' compare sides). */
.seg{border:1px solid var(--tri-line);box-shadow:none}
.seg button,.subt button{
  font:400 13px var(--display);letter-spacing:.1em;text-transform:uppercase;
  color:var(--tri-fg);background:var(--tri-bg);box-shadow:none;
}
.subt button{border:1px solid var(--tri-line)}
.seg button[aria-pressed="true"],.subt button[aria-pressed="true"]{
  color:var(--tri-accent-fg);background:var(--tri-accent);box-shadow:none;
}

/* ---------- inputs ---------- */
input[type=number],input[type=text],input[type=search],select,textarea{
  background-color:var(--tri-bg);border:1px solid var(--tri-line);border-radius:0;box-shadow:none;color:var(--tri-fg);
}
input[type=number]:focus,input[type=text]:focus,input[type=search]:focus,select:focus,textarea:focus{
  box-shadow:none;outline:2px solid var(--tri-gold);outline-offset:1px;
}
input[type=checkbox]{border:1px solid var(--tri-line);border-radius:0;background-color:var(--tri-bg);box-shadow:none}

/* ---------- headings ---------- */
h2,legend{font:400 14px var(--display);letter-spacing:.12em;color:var(--tri-gold)}
legend::before,h2::before{width:6px;height:6px;transform:none;background:var(--tri-accent);box-shadow:none}
h3{font:700 19px/1.35 var(--display);letter-spacing:.03em}
h4{font:400 15px var(--display);letter-spacing:.04em}
th{font:400 11px var(--display);letter-spacing:.1em}
.heat-axis,.worked .tag,.res .lab{font:400 11px var(--display);letter-spacing:.1em}
.chain .link b{font:400 13px var(--display);letter-spacing:.04em}
ol.steps > li::before{font:400 12px var(--display);background:var(--tri-accent);color:var(--tri-accent-fg)}
.badge{font:400 9px var(--display);letter-spacing:.05em;border-radius:0}
details.fx.c > summary{font:700 18px var(--display);letter-spacing:.03em}
details.fx.f > summary{font:400 15px var(--display);letter-spacing:.03em}
details.fx.t > summary .n{font:700 17px var(--display)}

/* Result numbers: plain brass instead of the gilded gradient. */
.res{background:rgba(9,8,7,.85);border:1px solid var(--tri-line);box-shadow:none;border-radius:0}
.res .big,.worked .total b{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--tri-gold);-webkit-text-fill-color:currentColor;filter:none;text-shadow:none;
}
.res .big{font:700 48px/1.1 var(--display)}
.worked .total b{font:700 32px var(--display)}

/* ---------- boxes ---------- */
.worked,.toc,pre.code,.eq,.chain .link,.note,.callout,.chip,code,details.fx.c,details.fx.t{border-radius:0}
.worked,.toc{background:rgba(9,8,7,.7);border-color:var(--tri-line)}
.callout{border-left-color:var(--tri-accent)}
details.fx.c{border:1px solid var(--tri-line);box-shadow:none}
details.fx.f{border-left-color:var(--tri-accent)}
details.fx > summary::before{border-left-color:var(--tri-gold)}

@media (max-width:640px){
  .tab{padding:11px 6px}
}