/* The Ember Roll.
   One idea carries the page: rank is heat. A level-1 character is a dull coal,
   the level cap is white-hot, and every bar, dot and rule takes its color from
   where it sits on that ramp (set from app.js). Everything else stays quiet:
   char-brown ground, bone text, old-print names, plain rules instead of cards.

   Char  #1b1416   Ash   #2b2124   Smoke #9d8f89   Bone #ebe1d1
   Coal  #7a2016   Ember #e2571c   Flame #f6a52b   White heat #fff0c2 */
@font-face { font-family: "Fell"; src: url("/fonts/im_fell_english-normal-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Fell"; font-style: italic; src: url("/fonts/im_fell_english-italic-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Alegreya Sans"; font-weight: 400; src: url("/fonts/alegreya_sans-normal-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Alegreya Sans"; font-weight: 500; src: url("/fonts/alegreya_sans-normal-500.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Alegreya Sans"; font-weight: 700; src: url("/fonts/alegreya_sans-normal-700.woff2") format("woff2"); font-display: swap; }

:root {
  --char: #1b1416;
  --ash: #2b2124;
  --rule: #40333a;
  --smoke: #9d8f89;
  --bone: #ebe1d1;
  --coal: #7a2016;
  --ember: #e2571c;
  --flame: #f6a52b;
  --white-heat: #fff0c2;
  --good: #8fcf8a;
  --bad: #e8806c;
  --ramp: linear-gradient(90deg, #6e1d16 0%, #c8401a 35%, #f0892b 65%, #f8c555 85%, #fff0c2 100%);
  --name: "Fell", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --text: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--char); }
body { margin: 0; color: var(--bone); font: 400 1.0625rem/1.5 var(--text); font-variant-numeric: lining-nums; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px); }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
:focus-visible { outline: 2px solid var(--flame); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--name); font-weight: 400; margin: 0; }
h2 { font-size: 1.75rem; line-height: 1.15; }
section { margin: 0 0 72px; }

/* --- masthead ----------------------------------------------------------- */
.masthead { padding-top: clamp(36px, 7vw, 84px); padding-bottom: clamp(28px, 4vw, 48px); }
.world { margin: 0 0 2px; font-family: var(--name); font-style: italic; font-size: 1.25rem; color: var(--flame); }
h1 { font-size: clamp(3.2rem, 11vw, 7.5rem); line-height: .92; letter-spacing: -.012em; margin-left: -.04em; }
.status { margin: 22px 0 0; max-width: 46ch; color: var(--smoke); font-size: 1.125rem; }
.status button { color: var(--bone); border-bottom: 1px solid var(--ember); }
.status button:hover { color: var(--white-heat); }
.status .lit { color: var(--good); }
.status .out { color: var(--bad); }

.notice { margin: 0 0 40px; padding: 12px 0 12px 16px; border-left: 3px solid var(--flame); color: var(--white-heat); max-width: 70ch; }

/* --- the climb ---------------------------------------------------------- */
.climb h2 { margin-bottom: 30px; }
.track { position: relative; height: 34px; margin: 0 9px; }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 2px; background: var(--ramp); opacity: .28; }
.reach { position: absolute; left: 0; top: 7px; height: 4px; border-radius: 2px; background: var(--ramp); background-size: var(--full, 100%) 100%; }
.tick { position: absolute; top: 0; width: 1px; height: 18px; background: var(--rule); }
.tick b { position: absolute; top: 20px; left: 0; transform: translateX(-50%); font: 400 .875rem var(--text); color: var(--smoke); }
.coal { position: absolute; top: 9px; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--heat); border: 3px solid var(--char); box-shadow: 0 0 0 1px var(--heat), 0 0 18px 2px var(--heat); z-index: 1; }
.coal.here { box-shadow: 0 0 0 1px var(--heat), 0 0 0 5px rgba(143, 207, 138, .5), 0 0 18px 2px var(--heat); }
.lanes { position: relative; margin: 6px 9px 0; }
.lead { position: absolute; top: -18px; width: 1px; background: var(--rule); }
.tag { position: absolute; white-space: nowrap; font-family: var(--name); font-size: 1.25rem; line-height: 28px; padding: 0 2px; }
.tag i { font: 500 1.0625rem var(--text); color: var(--heat); margin-left: 7px; }
.tag:hover { color: var(--white-heat); }

/* --- the standings ------------------------------------------------------ */
.boardhead { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; justify-content: space-between; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.tab { color: var(--smoke); padding: 4px 0; border-bottom: 2px solid transparent; }
.tab:hover { color: var(--bone); }
.tab[aria-selected="true"] { color: var(--bone); border-bottom-color: var(--ember); }
.hint { color: var(--smoke); margin: 6px 0 14px; min-height: 1.5em; }

.board { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.row { position: relative; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; column-gap: 12px; align-items: center; width: 100%; padding: 16px 0 18px; }
/* The rule under each row is the bar: its lit length is the score. */
.row::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); }
.row::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 3px; width: var(--w, 0%); background: var(--heat); border-radius: 0 2px 2px 0; box-shadow: 0 0 12px var(--heat); }
.row:hover .name { color: var(--white-heat); }
.rank { font: 500 1.75rem/1 var(--text); color: var(--smoke); }
.board li:first-child .rank { color: var(--heat); }
.name { font-family: var(--name); font-size: 1.6rem; line-height: 1.15; overflow-wrap: anywhere; }
.sub { display: block; font: 400 1rem/1.35 var(--text); color: var(--smoke); }
.live { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--good); margin-left: 10px; vertical-align: middle; }
.val { text-align: right; white-space: nowrap; font-size: 1.25rem; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.val small { display: block; font-size: 1rem; font-weight: 400; color: var(--smoke); }
.empty { padding: 28px 0; color: var(--smoke); border-bottom: 1px solid var(--rule); max-width: 60ch; }

/* --- chronicle and margin ----------------------------------------------- */
.lower { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 6vw, 88px); }
.lower h2 { margin-bottom: 14px; }
.margin section { margin-bottom: 48px; }
.feed, .firsts, .news { list-style: none; margin: 0; padding: 0; }
.feed li { padding: 12px 0; border-bottom: 1px solid var(--rule); max-width: 62ch; font-size: 1.125rem; }
.feed li.first { color: var(--white-heat); }
.feed li.none { color: var(--smoke); border-bottom: 0; }
.feed time, .news time { display: block; color: var(--smoke); font-size: 1rem; }
.firsts li { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.firsts b { font: 400 1.25rem var(--name); color: var(--heat); }
.firsts .open { color: var(--smoke); font-family: var(--name); font-style: italic; }
.guild { padding: 10px 0 12px; border-bottom: 1px solid var(--rule); }
.guild h3 { font-size: 1.35rem; }
.guild p { margin: 2px 0 0; color: var(--smoke); }
.news li { padding: 10px 0; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }

.foot { color: var(--smoke); padding-bottom: 56px; }
.foot p { margin: 0; }

/* --- a character's sheet ------------------------------------------------- */
dialog { width: min(780px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); border: 1px solid var(--rule); border-top: 3px solid var(--heat, var(--ember)); border-radius: 4px; background: var(--ash); color: var(--bone); padding: 0; }
dialog::backdrop { background: rgba(12, 7, 8, .82); }
#sheetBody { padding: clamp(20px, 4vw, 40px); }
.close { position: sticky; top: 10px; float: right; margin: 10px 12px 0 0; width: 40px; height: 40px; text-align: center; font-size: 1.6rem; line-height: 1; color: var(--smoke); z-index: 1; }
.close:hover { color: var(--white-heat); }
.sheethead h2 { font-size: clamp(2.4rem, 8vw, 4rem); line-height: 1; overflow-wrap: anywhere; }
.sheethead p { margin: 6px 0 0; color: var(--smoke); max-width: 60ch; }
.sheethead p:first-of-type { color: var(--bone); font-size: 1.1875rem; margin-top: 10px; }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 18px 24px; margin: 28px 0 8px; padding: 18px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.figure span { display: block; color: var(--smoke); }
.figure b { display: block; font: 500 1.5rem/1.2 var(--text); font-variant-numeric: tabular-nums lining-nums; }
.figure small { display: block; color: var(--smoke); font-size: 1rem; }
.sheet h3 { font-size: 1.35rem; margin: 30px 0 8px; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 32px; margin: 0; }
.kv div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--rule); padding: 6px 0; }
.kv dt { color: var(--smoke); }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.pos { color: var(--good); } .neg { color: var(--bad); }
.listed { margin: 0; color: var(--bone); max-width: 68ch; }

@media (max-width: 760px) {
  section { margin-bottom: 56px; }
  .lower { grid-template-columns: 1fr; }
  .row { grid-template-columns: 2.4rem minmax(0, 1fr) auto; }
  .rank { font-size: 1.4rem; }
  .name { font-size: 1.35rem; }
  .tag { font-size: 1.0625rem; line-height: 26px; }
}

/* One moment of motion: on first load the coals travel up the track to
   their levels. Nothing else moves by itself. */
@media (prefers-reduced-motion: no-preference) {
  .first-run .coal { transition: left 1.1s cubic-bezier(.2, .7, .2, 1); }
  .first-run .reach { transition: width 1.1s cubic-bezier(.2, .7, .2, 1); }
  .first-run .lanes { transition: opacity .5s ease .9s; }
  .first-run.cold .lanes { opacity: 0; }
  .row::after { transition: width .45s ease; }
}