/* ============ HOUSE OF FARTS! — information pages ============ */
/* SYSTEM: ceremony (WINNER.md), same as css/style.css. This is a SEPARATE
   sheet on purpose: css/style.css locks the document (html,body{overflow:hidden})
   and kills text selection for the game canvas, and a page of prose needs to
   scroll and be copyable. The tokens below are copied VERBATIM out of
   css/style.css's :root — no new hues, no new faces. If a value here ever
   disagrees with that file, that file wins.
   The look is the ceremony's parchment document (.panel + .panel-title caption
   bar, ARTICLE rules, signature foot) standing in the navy chamber the game's
   screens use. Press Start 2P is the wordmark and nothing else. */
:root{
  --ink:#060518; --navy:#0d0b2a; --navy2:#161240; --navy3:#1b1650;
  --gold:#c8a020; --gold-lt:#e8c860; --gold-dk:#7d6110;
  --parch:#f4efe0; --parch2:#e3d7b8; --parch-ink:#231d3f; --parch-mute:#5d5470;
  --velvet:#8c1a24;
  --tx:#efeaff; --tx-mute:#a49cd0;
  --r:3px;
  --px:'Press Start 2P',monospace;
  --dsp:'Oswald',Impact,sans-serif;
  --ui:'IBM Plex Sans',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--ink)}
body{min-height:100%;font-family:var(--ui);font-size:16px;line-height:1.65;color:var(--tx);
  background:radial-gradient(ellipse at 50% 0%,var(--navy3) 0%,var(--navy) 55%,var(--ink) 100%);
  background-attachment:fixed}

.chamber{max-width:860px;margin:0 auto;padding:34px 20px 64px}

/* the brass room plaque, hung above the document — the shared .plaque recipe
   from css/style.css, as a link back to the game */
.plaque{display:block;width:max-content;max-width:100%;margin:0 auto;position:relative;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));color:var(--ink);
  font-family:var(--dsp);font-weight:700;font-size:13px;letter-spacing:3px;text-transform:uppercase;
  text-decoration:none;padding:9px 26px;border:1px solid var(--gold-dk);border-radius:var(--r);
  box-shadow:0 3px 0 var(--gold-dk),inset 0 1px 0 rgba(255,255,255,.4)}
.plaque::before,.plaque::after{content:"";position:absolute;top:50%;width:5px;height:5px;border-radius:50%;
  background:var(--gold-dk);transform:translateY(-50%)}
.plaque::before{left:7px}.plaque::after{right:7px}

/* the nav strip: one row of doors, the same on every page */
.navstrip{margin:20px auto 22px;display:flex;flex-wrap:wrap;justify-content:center;gap:2px;
  background:var(--navy2);border:1px solid var(--gold-dk);border-radius:var(--r);padding:6px}
.navstrip a{font-family:var(--dsp);font-weight:600;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold-lt);text-decoration:none;padding:7px 13px;border-radius:var(--r)}
.navstrip a:hover{background:var(--navy3);color:#fff}
.navstrip a[aria-current="page"]{background:var(--gold);color:var(--ink)}

/* the document itself: .panel with the navy caption bar bleeding to its edges */
.doc{background:var(--parch);color:var(--parch-ink);border:2px solid var(--gold);border-radius:var(--r);
  box-shadow:0 4px 0 rgba(0,0,0,.35);padding:34px 44px 30px;overflow:hidden}
.doc-title{margin:-34px -44px 28px;padding:16px 20px;background:var(--navy2);border-bottom:2px solid var(--gold);
  font-family:var(--dsp);font-weight:600;font-size:clamp(13px,2vw,19px);color:var(--gold-lt);
  letter-spacing:6px;text-transform:uppercase;text-align:center}

h1{text-align:center;margin-bottom:6px}
.wordmark{display:block;font-family:var(--px);font-size:clamp(13px,2.6vw,18px);color:var(--gold-dk);
  line-height:1.7;letter-spacing:0}
.h1-name{display:block;margin-top:14px;font-family:var(--dsp);font-weight:700;
  font-size:clamp(19px,3.4vw,27px);color:var(--velvet);letter-spacing:2px;text-transform:uppercase}
.dateline{text-align:center;font-size:13px;color:var(--parch-mute);letter-spacing:1px;
  text-transform:uppercase;margin-bottom:8px}

/* ARTICLE rules: each section is numbered and separated by a gold rule, the
   same device the mode drawer uses for its cards */
.doc{counter-reset:article}
h2{counter-increment:article;font-family:var(--dsp);font-weight:600;font-size:17px;color:var(--parch-ink);
  letter-spacing:3px;text-transform:uppercase;margin:0 0 12px}
h2::before{content:"ARTICLE " counter(article,upper-roman);display:block;font-size:10px;letter-spacing:3px;
  color:var(--gold-dk);margin-bottom:8px;padding-top:22px;border-top:1px solid var(--gold-dk)}
h3{font-family:var(--dsp);font-weight:600;font-size:14px;color:var(--velvet);letter-spacing:2px;
  text-transform:uppercase;margin:20px 0 6px}
p,li{color:var(--parch-ink);margin:10px 0}
ul,ol{margin:10px 0 10px 22px}
li{margin:6px 0}
strong{font-weight:600;color:var(--velvet)}
code{font-family:var(--ui);font-weight:600;font-size:.94em;background:var(--parch2);
  border:1px solid var(--gold-dk);border-radius:var(--r);padding:1px 6px;white-space:nowrap}
a{color:var(--velvet);text-decoration:underline;text-underline-offset:2px}
.doc a:hover{background:var(--parch2)}

/* the controls table, copied from the pause screen's STANDING ORDERS list */
.orders{margin:14px 0;border:1px solid var(--gold-dk);border-radius:var(--r);background:var(--parch2)}
.orders .row{display:flex;gap:14px;padding:9px 14px;border-bottom:1px solid rgba(125,97,16,.35);
  font-size:14px;align-items:baseline}
.orders .row:last-child{border-bottom:0}
.orders .k{flex:none;width:90px;font-family:var(--dsp);font-weight:600;font-size:12px;letter-spacing:2px;
  color:var(--velvet);text-transform:uppercase}

/* the document foot: countersignature and wax seal, as on the mode drawer */
.docfoot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:30px;padding-top:14px;border-top:1px solid var(--gold-dk)}
.sigline{font-family:var(--dsp);font-weight:600;font-size:13px;letter-spacing:2px;color:var(--parch-ink);
  border-bottom:1px solid var(--parch-ink);padding-bottom:2px;min-width:170px}
.sig{margin-top:3px;font-family:var(--ui);font-size:11px;letter-spacing:.5px;color:var(--parch-mute);
  text-transform:uppercase}
.wax-seal{flex:none;width:32px;height:32px;background:var(--velvet);color:var(--gold-lt);
  border:2px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--dsp);font-weight:700;font-size:10px;letter-spacing:1px;
  box-shadow:2px 3px 0 rgba(0,0,0,.35)}

/* the gold plate that sends you back to the game */
.backplate{display:inline-block;margin:26px auto 0;font-family:var(--dsp);font-weight:600;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;color:var(--ink);text-decoration:none;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));border:2px solid var(--gold-dk);
  border-radius:var(--r);padding:9px 20px;box-shadow:0 3px 0 var(--gold-dk)}
.plate-wrap{text-align:center}

.foot-note{margin-top:26px;text-align:center;font-family:var(--ui);font-size:10px;color:var(--tx-mute);
  line-height:1.9;letter-spacing:.5px}
.foot-note a{color:var(--gold-lt)}

/* the empty chamber (404) */
.doc.empty{text-align:center}
.doc.empty .docfoot{justify-content:center}

@media (max-width:620px){
  .chamber{padding:24px 12px 48px}
  .doc{padding:26px 20px 24px}
  .doc-title{margin:-26px -20px 22px;letter-spacing:3px}
  body{font-size:15px}
  .orders .row{flex-direction:column;gap:2px}
  .orders .k{width:auto}
}