/* Chaos Protocol — club campaign rules for Marvel: Crisis Protocol.
   Inherits the club look from the league stylesheet, then adds what a rules
   document needs that a league table does not: a sticky chapter rail, roll
   buttons that highlight the row they landed on, and a printable Icon card.
   iPad-first like the rest: every control clears 34px, nothing needs hover,
   and the two-column table pairs collapse early because they are text-heavy. */
@import url('/league/league.css');

main { width: min(1180px, 96vw); }

/* grit overlay, same as the club front page */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

/* ---- masthead ---- */

.head { border-bottom: 2px solid #2b221b; padding-bottom: 18px; margin-bottom: 4px; }
.head h1 { margin-bottom: 2px; }
.head .eventline {
  font-family: 'Black Ops One'; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dust); margin-top: 8px;
}
.head .eventline b { color: var(--rust); }
.head .tagline { font-size: 16.5px; line-height: 1.5; color: var(--bone); max-width: 70ch; margin-top: 10px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fact {
  background: var(--panel); border: 1px solid #3a2f26; border-left: 3px solid var(--rust-dk);
  padding: 6px 12px; line-height: 1.3;
}
.fact .k {
  display: block; font-family: 'Black Ops One'; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dust);
}
.fact .v { color: var(--bone); font-size: 15px; }

/* ---- chapter rail ---- */

.rail {
  position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; gap: 2px 16px;
  background: #0a0806; border-bottom: 2px solid #2b221b; padding: 9px 2px; margin-bottom: 22px;
}
.rail a {
  color: var(--bone); font-size: 14px; text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 2px solid transparent; padding: 2px 0; min-height: 26px;
}
.rail a:hover, .rail a:focus-visible { color: var(--rust); border-bottom-color: var(--rust); text-decoration: none; }

/* ---- sections ---- */

.sec { border-top: 1px dashed #2b221b; padding-top: 26px; margin-bottom: 8px; }
.sec:first-of-type { border-top: none; padding-top: 6px; }
.sec > h2 { font-size: clamp(22px, 3vw, 28px); margin: 0 0 4px; }
.eyebrow {
  font-family: 'Black Ops One'; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dust); margin-bottom: 8px;
}
.sec h3 { font-size: 17px; color: var(--bone); margin: 24px 0 8px; }
.lede { font-size: 17px; line-height: 1.5; color: var(--bone); max-width: 72ch; margin-bottom: 14px; }
.prose { font-size: 16px; line-height: 1.5; color: var(--bone); max-width: 72ch; margin-bottom: 14px; }
.sec ul, .sec ol { margin: 0 0 16px 20px; max-width: 76ch; }
.sec li { margin-bottom: 7px; line-height: 1.45; }
.sec b { color: #fff; font-weight: 600; }

/* two tables side by side (hero/villain, ridiculous/bad luck) */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .pair { grid-template-columns: 1fr; } }
.pair > * { min-width: 0; }

/* ---- numbered panels ---- */

.panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 16px; }
.pnl { background: var(--panel); border: 1px solid #2b221b; border-top: 3px solid var(--rust-dk); padding: 12px 14px; }
.pnl .num { font-family: 'Black Ops One'; font-size: 11px; letter-spacing: .12em; color: var(--rust); }
.pnl h4 { font-family: 'Black Ops One'; font-weight: 400; text-transform: uppercase; letter-spacing: .05em;
          font-size: 15px; color: var(--bone); margin: 3px 0 6px; }
.pnl p { font-size: 15px; line-height: 1.45; color: var(--dust); }
.pnl p b { color: var(--bone); }

/* ---- the Watcher's asides ---- */

.aside {
  background: #ff6a1a10; border: 1px solid #3a2f26; border-left: 3px solid var(--rust);
  padding: 13px 16px; margin: 16px 0; max-width: 84ch;
}
.aside .who {
  font-family: 'Black Ops One'; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rust); display: block; margin-bottom: 5px;
}
.aside p { font-size: 15.5px; line-height: 1.5; color: var(--bone); }
.aside p + p { margin-top: 8px; }

/* ---- tables + roll buttons ---- */

.tbl { margin-bottom: 26px; }
.tbl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.tbl-head h3 { margin: 0; font-family: 'Black Ops One'; font-weight: 400; text-transform: uppercase;
               letter-spacing: .05em; font-size: 16px; color: var(--rust); }
.tbl-head .dice { color: var(--dust); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.roll {
  cursor: pointer; background: var(--blood); color: #fff; border: 2px solid #ff8b4a;
  font-family: 'Black Ops One'; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 0 14px; min-height: 34px; box-shadow: 3px 3px 0 #000;
}
.roll:active { background: var(--rust-dk); transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.result { font-family: 'Black Ops One'; font-size: 13px; letter-spacing: .06em; color: var(--bone); }
.result b { color: var(--rust); font-size: 16px; margin-right: 5px; }

.scroll { overflow-x: auto; }
.tbl table { background: var(--panel); border: 1px solid #2b221b; }
.tbl td { vertical-align: top; line-height: 1.45; font-size: 15.5px; }
.tbl td.n {
  font-family: 'Black Ops One'; color: var(--rust); white-space: nowrap; width: 1%;
  font-variant-numeric: tabular-nums; font-size: 15px;
}
.tbl td.first { color: var(--bone); font-weight: 600; white-space: nowrap; }
.tbl tr.hit td { background: #ff6a1a1f; }
.tbl tr.hit td.n { color: #ffd23f; }
.tbl tr.hit td.n::before { content: '> '; }
.tbl.hero th { color: #6fa8c8; }
.tbl.villain th { color: #b384d6; }
.tbl .note { color: var(--dust); font-size: 14px; margin-top: 8px; line-height: 1.45; }
@media (max-width: 700px) { .tbl td.first { white-space: normal; } }

/* ---- schedule ---- */

.sched { border: 1px solid #2b221b; background: var(--panel); max-width: 820px; margin-bottom: 18px; }
.sched .row { display: flex; gap: 14px; padding: 9px 14px; border-top: 1px dashed #2b221b; }
.sched .row:first-child { border-top: none; }
.sched .t {
  flex: none; width: 58px; font-family: 'Black Ops One'; color: var(--rust); font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.sched .what { font-size: 15.5px; line-height: 1.45; }
.sched .what b { color: var(--bone); }
@media (max-width: 560px) { .sched .row { flex-direction: column; gap: 3px; } }

/* ---- cosmic scale ---- */

.scale { display: flex; border: 1px solid #2b221b; max-width: 780px; margin-bottom: 18px; text-align: center; }
.scale div {
  flex: 1; padding: 10px 2px; font-family: 'Black Ops One'; font-size: 15px;
  border-left: 1px solid #0c0a08;
}
.scale div:first-child { border-left: none; }
.scale .evil { background: #6b2d8b; color: #fff; }
.scale .good { background: #2f5d8c; color: #fff; }
.scale .bal  { background: #d8b46a; color: #0c0a08; }
.scale small { display: block; font-size: 9.5px; letter-spacing: .1em; }

/* ---- the three parties ---- */

.parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; margin-bottom: 18px; }
.party { background: var(--panel); border: 1px solid #2b221b; border-top: 3px solid var(--dust); padding: 14px 16px; }
.party .who {
  font-family: 'Black Ops One'; font-size: 15px; text-transform: uppercase; letter-spacing: .06em;
}
.party .want { display: block; color: var(--bone); font-size: 16px; font-weight: 700; margin: 4px 0 8px; }
.party p { font-size: 15px; line-height: 1.5; color: var(--dust); }
.party p b { color: var(--bone); }
.party.hero    { border-top-color: #6fa8c8; } .party.hero .who    { color: #6fa8c8; }
.party.villain { border-top-color: #b384d6; } .party.villain .who { color: #b384d6; }
.party.accord  { border-top-color: var(--ok); } .party.accord .who  { color: var(--ok); }

/* ---- act briefs ---- */

.briefs { display: grid; gap: 14px; margin-bottom: 18px; }
.brief { background: var(--panel); border: 1px solid #2b221b; border-left: 3px solid var(--rust); padding: 14px 16px; }
.bhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.bn { font-family: 'Black Ops One'; font-size: 12px; letter-spacing: .12em; color: var(--rust); }
.bhead h4 {
  font-family: 'Black Ops One'; font-weight: 400; text-transform: uppercase; letter-spacing: .05em;
  font-size: 19px; color: var(--bone);
}
.bwhen { color: var(--dust); font-size: 13px; text-transform: uppercase; letter-spacing: .07em; margin-left: auto; }
.bsit { font-size: 15.5px; line-height: 1.5; color: var(--bone); margin: 9px 0 12px; max-width: 80ch; }
.bsides { display: grid; gap: 7px; }
.bside { display: flex; gap: 12px; align-items: baseline; border-top: 1px dashed #2b221b; padding-top: 7px; }
.bwho {
  flex: none; width: 74px; font-family: 'Black Ops One'; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rust); line-height: 1.5;
}
.bwant { flex: 1; min-width: 0; font-size: 15px; line-height: 1.45; color: var(--bone); }
@media (max-width: 620px) {
  .bwhen { margin-left: 0; width: 100%; }
  .bside { flex-direction: column; gap: 2px; }
  .bwho { width: auto; }
}

/* ---- war clock ---- */

.warclock { display: flex; border: 1px solid #2b221b; max-width: 620px; margin-bottom: 16px; text-align: center; }
.warclock div {
  flex: 1; padding: 10px 2px; font-family: 'Black Ops One'; font-size: 16px;
  border-left: 1px solid #0c0a08; color: #fff;
}
.warclock div:first-child { border-left: none; }
.warclock .cold { background: #2f5d8c; }
.warclock .mid  { background: #6b4a2a; }
.warclock .hot  { background: var(--blood); }
.warclock .start { box-shadow: inset 0 0 0 2px #ffd23f; }
.warclock small { display: block; font-size: 9px; letter-spacing: .08em; color: #f0e6d2; }

/* ---- Panel One dealer ---- */

.dealer { background: var(--panel); border: 1px solid #2b221b; border-top: 3px solid var(--rust); padding: 16px 18px; margin: 18px 0; }
.dealer .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.dealer .bar .lbl { font-family: 'Black Ops One'; font-size: 13px; letter-spacing: .08em; color: var(--rust); text-transform: uppercase; }
.dealer .bar .hint { color: var(--dust); font-size: 13px; }
.dice-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.die {
  width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;
  font-family: 'Black Ops One'; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  border: 2px solid; box-shadow: 3px 3px 0 #000; text-align: center;
}
.die.f-crit  { background: var(--blood);  color: #fff;      border-color: #ff8b4a; }
.die.f-wild  { background: #d8b46a;       color: #0c0a08;   border-color: #ffd23f; }
.die.f-hit   { background: var(--rust-dk);color: #fff;      border-color: #ff8b4a; }
.die.f-block { background: #2f5d8c;       color: #fff;      border-color: #6fa8c8; }
.die.f-skull { background: #6b2d8b;       color: #fff;      border-color: #b384d6; }
.die.f-blank { background: var(--panel2); color: var(--dust); border-color: #4a3d31; }
.verdict { margin-top: 14px; border-top: 1px dashed #2b221b; padding-top: 12px; }
.verdict .hand {
  display: block; font-family: 'Black Ops One'; font-size: 20px; color: var(--rust);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; text-shadow: 2px 2px 0 #000;
}
.verdict p { font-size: 15.5px; line-height: 1.5; color: var(--bone); margin-bottom: 5px; max-width: 76ch; }
.verdict p b { color: #fff; }
.verdict .demo { color: var(--dust); font-style: italic; }

/* ---- printable Icon card ---- */

.iconcard { background: var(--panel); border: 1px solid #2b221b; border-top: 3px solid var(--rust); padding: 18px 20px; max-width: 880px; }
.iconcard .grp {
  font-family: 'Black Ops One'; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rust); margin: 16px 0 6px;
}
.iconcard .grp:first-child { margin-top: 0; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 16px; }
.fld { border-bottom: 1px dashed #4a3d31; padding: 4px 0 3px; min-height: 36px; color: var(--dust); font-size: 12px; }
.fld.tall { min-height: 58px; }
.iconcard td { height: 34px; }

.printnote { color: var(--dust); font-size: 14px; margin-top: 10px; }

/* ---- print: the Watcher runs this off a printer, not an iPad ---- */

@media print {
  body { background: #fff; color: #000; }
  body::before, nav, footer, .rail, .roll, .result, .dealer .bar, .printnote { display: none !important; }
  main { width: 100%; margin: 0; }
  a { color: #000; text-decoration: none; }
  h1, h2, h3, .tbl-head h3, .eyebrow, .pnl .num, .iconcard .grp, .aside .who { color: #000; text-shadow: none; }
  .sec { break-before: page; border-top: none; }
  .sec:first-of-type { break-before: auto; }
  .tbl, .pnl, .aside, .iconcard, .sched, .dealer { break-inside: avoid; }
  .tbl table, .pnl, .aside, .iconcard, .sched, .dealer, .fact { background: #fff; border-color: #999; box-shadow: none; }
  .tbl th, .tbl td.n, .sched .t { color: #000; }
  .tbl td, .pnl p, .lede, .prose, .aside p, .verdict p { color: #000; }
  .die { box-shadow: none; }
}