/* Class and text colors are tuned to reach at least 4.5:1 contrast
   against the background in both light and dark mode. */
:root {
  --bg:#fafafa; --fg:#1a1a1a; --muted:#707070; --line:#ddd;
  --accent:var(--fg); --accent-line:var(--line);
  --alliance:#1e5fbf; --horde:#b3261e;
  --c-druid:#b84f00; --c-hunter:#4f7a1a; --c-mage:#0a769a;
  --c-paladin:#b8426f; --c-priest:#6b6b6b; --c-rogue:#806e00;
  --c-shaman:#0058b0; --c-warlock:#5e5fd0; --c-warrior:#8a6334;
  --gold:#8a6100;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#111; --fg:#eee; --muted:#8a8a8a; --line:#333;
    --alliance:#5b9bf0; --horde:#e5534b;
    --c-druid:#ff7c0a; --c-hunter:#aad372; --c-mage:#3fc7eb;
    --c-paladin:#f48cba; --c-priest:#ffffff; --c-rogue:#fff468;
    --c-shaman:#3a93f2; --c-warlock:#8788ee; --c-warrior:#c69b6d;
    --gold:#f0b93a;
  }
}
:root[data-faction="Alliance"] { --accent:var(--alliance); --accent-line:var(--alliance); }
:root[data-faction="Horde"]    { --accent:var(--horde);    --accent-line:var(--horde); }
* { box-sizing: border-box; }
/* Author display rules (e.g. dl { display: grid }) would otherwise
   override the [hidden] attribute. */
[hidden] { display: none !important; }
html, body { min-height: 100%; margin: 0; }
/* Keep room for the scrollbar at all times, so the page does not shift
   sideways when the content grows tall enough to need one. */
html { scrollbar-gutter: stable; }
body {
  background: var(--bg); color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  /* Content starts from the top rather than being centred vertically:
     centred content moves every time something appears below it. */
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; padding: clamp(32px, 10vh, 96px) 24px 32px;
  min-height: 100vh; min-height: 100dvh; /* dvh avoids jumps from mobile browser bars */
}
h1 {
  font-size: .8rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 40px;
  padding-bottom: 14px; border-bottom: 1px solid var(--accent-line);
  transition: border-color .3s;
}
dl {
  margin: 0 0 40px; display: grid; grid-template-columns: auto auto;
  gap: 12px 32px; text-align: left; font-size: 1.4rem;
}
dt { color: var(--muted); font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; align-self: center; }
dd { margin: 0; }

/* Roll animation: a short fade and rise, staggered top to bottom. */
.roll {
  animation: roll .4s ease-out both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes roll {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .roll { animation: none; }
}

.msg { color: var(--muted); font-size: 1rem; margin: 0 0 40px; }
.hint { color: var(--muted); font-size: .8rem; max-width: 36ch; margin: 16px 0 0; line-height: 1.4; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 56px; }
button, select {
  font: inherit; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
  background: none; color: var(--fg); border: 1px solid var(--line);
  padding: 12px 24px; cursor: pointer; transition: border-color .3s; border-radius: 0;
}
button:hover, button:focus-visible, select:hover, select:focus-visible { border-color: var(--accent); outline: none; }
button:disabled { opacity: .4; cursor: not-allowed; }
button:disabled:hover { border-color: var(--line); }
/* The main action is filled with the accent colour: neutral until a
   character is rolled, then the faction's blue or red. */
#roll {
  background: var(--accent); border-color: var(--accent); color: var(--bg);
  transition: background-color .3s, border-color .3s, opacity .2s;
}
#roll:hover { opacity: .85; }
#roll:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#roll:disabled, #roll:disabled:hover { opacity: .4; }
select { padding: 8px 12px; letter-spacing: .05em; text-transform: none; font-size: .9rem; }
option { background: var(--bg); color: var(--fg); }
.filters { display: grid; grid-template-columns: auto auto; gap: 10px 16px; align-items: center; text-align: left; }
.filters label { color: var(--muted); font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; }
.filters-title { color: var(--muted); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 16px; }

/* History */
.history { width: 100%; max-width: 560px; margin: -16px 0 48px; }
.history-head { display: flex; justify-content: center; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.history-head .filters-title { margin-bottom: 0; }
button.link {
  border: none; padding: 0; font-size: .7rem; letter-spacing: .1em;
  color: var(--muted); text-decoration: underline;
}
button.link:hover, button.link:focus-visible { color: var(--fg); }
#historyList { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
#historyList button {
  width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px;
  border-color: transparent; padding: 8px 10px;
  font-size: .85rem; letter-spacing: .02em; text-transform: none;
}
#historyList button:hover, #historyList button:focus-visible { border-color: var(--accent-line); }
.options-title { margin-top: 40px; }

/* Two-column layout: roll on the left, filters on the right.
   Stacks into one column on narrow screens. */
.layout {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 64px; align-items: start; width: 100%; max-width: 900px;
}
.roll-col { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.roll-col dl { margin-bottom: 40px; }
.roll-col .actions { margin-bottom: 40px; }
.roll-col .history { margin: 0; }
.filter-col {
  text-align: left; padding-left: 64px; border-left: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: flex-start;
}
.filter-col .hint { max-width: 32ch; margin-top: 12px; }
button.small { margin-top: 24px; padding: 8px 20px; font-size: .75rem; }
@media (max-width: 760px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 48px 0; }
  .roll-col { align-items: center; }
  .filter-col { padding-left: 0; border-left: none; border-top: 1px solid var(--line); padding-top: 32px; align-items: center; text-align: center; }
  .filter-col .filters { text-align: left; }
}

/* Status line under the roll buttons (e.g. "No other class matches your filters."). */
.note { color: var(--muted); font-size: .8rem; margin: -24px 0 32px; }

/* Backstory hook under the result. Its space is kept even while it is
   hidden (before the first roll), and the text always has room for its
   longest version, so the buttons underneath stay where they are. */
.backstory-wrap { position: relative; width: 100%; max-width: 40ch; margin: -16px 0 40px; }
.backstory-wrap[hidden] { display: block !important; visibility: hidden; }
/* A prompt shown in that kept space until the first roll. It sits on top
   of the (still invisible) backstory area, so it adds no height of its own. */
.prompt { display: none; }
.backstory-wrap[hidden] .prompt {
  visibility: visible; position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 1rem; font-style: italic;
}
.backstory { margin: 0 0 8px; min-height: 4.5em; font-size: 1rem; line-height: 1.5; font-style: italic; }
/* On a phone the lines are shorter, so the longest backstory needs more of them. */
@media (max-width: 440px) { .backstory { min-height: 6em; } }
@media (max-width: 340px) { .backstory { min-height: 7.5em; } }

/* Price tags on buttons (Joelinton mode), in gold. On the filled "Roll all"
   button gold would be hard to read, so there the tag keeps the button's
   own text colour. */
.cost { text-transform: none; letter-spacing: 0; color: var(--gold); margin-left: 4px; }
.cost:empty { display: none; }
#roll .cost { color: inherit; opacity: .8; }

/* Joelinton's panel under the roll buttons. */
.oracle { width: 100%; max-width: 40ch; margin: -8px 0 40px; }
.oracle .purse { margin: 0 0 12px; font-size: .8rem; color: var(--muted); display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* The purse in gold, with a small coin drawn in front of it. */
#purse { color: var(--gold); font-weight: 600; }
#purse::before {
  content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .5em;
  border-radius: 50%; background: var(--gold);
}
/* What Joelinton says, set apart as a quote with a gold rule down the side. */
.oracle .say {
  margin: 0; min-height: 4.5em; font-size: .9rem; line-height: 1.5; font-style: italic;
  text-align: left; padding: 2px 0 2px 16px; border-left: 2px solid var(--gold);
}
.oracle .small { margin-top: 12px; }
.check { display: flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

.filter-col .filters + .hint + .check { margin-top: 16px; }