/* The poster is deliberately single-theme: it exists to be printed on white
   paper, so it paints its own light ground rather than following the viewer. */
:root {
  --ink: #231F1E;
  --soft: #5F5854;
  --line: #D8D0CB;
  --paper: #FFFFFF;
  --ground: #EFEAE4;
  --red: #C70039;
  --go: #2E7D32;
  --go-soft: #E7F1E7;
  --sunk: #F5F1EC;
}

* { box-sizing: border-box; }

/* A percentage height on .sheet only resolves if its ancestors have one,
   which is what lets the printed footer sit on the bottom margin. */
html { background: var(--ground); height: 100%; }

body {
  margin: 0;
  padding: 8mm;
  background: var(--ground);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

/* One A4 sheet. On screen it floats on the grey ground; on paper it fills
   the page and the shadow disappears. */
.sheet {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 14mm 14mm 10mm;
  background: var(--paper);
  box-shadow: 0 2px 6px rgba(0,0,0,.10), 0 18px 50px -20px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
}

.masthead {
  border-bottom: 2.5pt solid var(--ink);
  padding-bottom: 4mm;
}

.kicker {
  margin: 0 0 1.5mm;
  font-size: 9pt;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
}

h1 {
  margin: 0;
  font-size: 30pt;
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.01em;
}

.lede {
  margin: 3mm 0 0;
  font-size: 11.5pt;
  color: var(--soft);
}

/* ---- the five steps, blown up ---- */

.rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5mm;
  margin: 9mm 0 0;
}

.step { display: flex; flex-direction: column; position: relative; }

/* The text column has to stretch for the badge's margin-top:auto to push
   against anything - otherwise every badge stops where its copy ends. */
.txt {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.disc {
  width: 20mm;
  height: 20mm;
  border-radius: 50%;
  border: 1.2pt solid var(--ink);
  display: grid;
  place-items: center;
  margin-bottom: 3.5mm;
  position: relative;
  /* the numbered badge sits on top of this circle, not under its border */
  z-index: 0;
}

.disc svg { width: 9mm; height: 9mm; }

.n {
  position: absolute;
  top: -1.5mm;
  left: 14.5mm;
  width: 7mm;
  height: 7mm;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 9pt;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 1pt solid var(--paper);
  line-height: 1;
  z-index: 2;
}

.step h3 {
  margin: 0 0 1.5mm;
  font-size: 11.5pt;
  font-weight: 700;
  line-height: 1.15;
}

.step p {
  margin: 0;
  font-size: 8.5pt;
  color: var(--soft);
  line-height: 1.4;
}

/* Role badges: a tinted fill inside a matching outline, one hue per role.
   Both stay well below full saturation, so five of them printed in a row
   read as a set rather than as bunting. */

.actors {
  margin-top: auto;
  padding-top: 2.5mm;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2mm;
  align-items: flex-end;
}

.actor {
  font-size: 6.5pt;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: .8mm 1.8mm;
  border-radius: 99px;
  border: .3mm solid var(--role-line);
  background: var(--role-bg);
  color: var(--role-fg);
}

.actor.player    { --role-bg:#EAF0F7; --role-line:#9DB6D6; --role-fg:#2A4A73; }
.actor.organiser { --role-bg:#F7EDE8; --role-line:#DCB49C; --role-fg:#8A4A28; }
.actor.referee   { --role-bg:#EDEBF5; --role-line:#B3ACD9; --role-fg:#453C77; }
.actor.auto      { --role-bg:#E9F1EA; --role-line:#A5C9AB; --role-fg:#2E6B36; }

/* ---- the three cases ---- */

.h2 {
  margin: 10mm 0 4mm;
  font-size: 13pt;
  font-weight: 700;
  border-left: 2.5pt solid var(--red);
  padding-left: 3.5mm;
}

.cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4mm;
}

.case {
  border: .8pt solid var(--line);
  border-radius: 1.5mm;
  padding: 4.5mm;
  display: flex;
  flex-direction: column;
}

.case-top {
  display: flex;
  align-items: center;
  gap: 2.5mm;
  margin-bottom: 1mm;
}

.case-top svg { width: 5.5mm; height: 5.5mm; flex: none; color: var(--red); }

.case h3 { margin: 0; font-size: 10.5pt; font-weight: 700; line-height: 1.15; }

.ctx {
  margin: 1.5mm 0 3.5mm;
  font-size: 8pt;
  font-style: italic;
  color: var(--soft);
  line-height: 1.4;
}

.case ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: s;
  flex: 1;
}

.case li {
  counter-increment: s;
  position: relative;
  padding-left: 6mm;
  margin: 0 0 2mm;
  font-size: 8.5pt;
  line-height: 1.4;
}

.case li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: .3mm;
  width: 4mm;
  height: 4mm;
  border-radius: 50%;
  background: var(--sunk);
  color: var(--soft);
  font-size: 6.5pt;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.verdict {
  margin-top: 3mm;
  padding-top: 2.5mm;
  border-top: .8pt solid var(--line);
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 1.5mm;
}

.verdict svg { width: 3.5mm; height: 3.5mm; flex: none; }

/* ---- footer with the QR ---- */

.foot {
  margin-top: auto;
  padding-top: 7mm;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8mm;
}

.qr-block { display: flex; align-items: center; gap: 4mm; }

.qr { display: block; border: .8pt solid var(--line); padding: 1.5mm; background: #fff; }

.qr-text b {
  display: block;
  font-size: 10pt;
  font-weight: 700;
  margin-bottom: .8mm;
}

.qr-text span { font-size: 8.5pt; color: var(--soft); }

.brand {
  font-size: 8pt;
  color: var(--soft);
  text-align: right;
  letter-spacing: .04em;
}

/* ---- the print button, screen only ---- */

.print-bar {
  max-width: 210mm;
  margin: 0 auto 5mm;
  display: flex;
  justify-content: flex-end;
  gap: 3mm;
  transition: max-width .15s;
}

body.landscape .print-bar { max-width: 297mm; }

.orientation {
  font: inherit;
  font-size: 10pt;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2mm;
  padding: 2.5mm 5mm;
  display: inline-flex;
  align-items: center;
  gap: 2mm;
}

.orientation:hover { border-color: var(--red); color: var(--red); }
.orientation:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.orientation svg { width: 4mm; height: 4mm; }

.print-btn {
  font: inherit;
  font-size: 10pt;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  background: var(--red);
  border: none;
  border-radius: 2mm;
  padding: 2.5mm 5mm;
  display: inline-flex;
  align-items: center;
  gap: 2mm;
}

.print-btn:hover { background: #A50030; }
.print-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.print-btn svg { width: 4mm; height: 4mm; }

@page {
  size: A4 portrait;
  margin: 0;
}

/* Landscape is a body class, not a separate document: the same markup, a
   wider sheet and a rail that has room to breathe. */
body.landscape .sheet {
  width: 297mm;
  min-height: 0;
  height: 210mm;
  padding: 8mm 12mm 6mm;
}

body.landscape h1 { font-size: 30pt; }
body.landscape .lede { font-size: 11pt; margin-top: 2mm; }
body.landscape .rail { margin-top: 6mm; gap: 6mm; }
body.landscape .disc { width: 19mm; height: 19mm; margin-bottom: 2.5mm; }
body.landscape .disc svg { width: 8.5mm; height: 8.5mm; }
body.landscape .n { left: 13.5mm; }
body.landscape .step h3 { font-size: 12.5pt; }
body.landscape .step p { font-size: 9pt; }
body.landscape .h2 { margin: 6mm 0 3mm; font-size: 13.5pt; }
body.landscape .case h3 { font-size: 11.5pt; }
body.landscape .case li { font-size: 9pt; }
body.landscape .ctx { font-size: 8.5pt; margin-bottom: 2.5mm; }
body.landscape .foot { padding-top: 4mm; }
body.landscape .case { padding: 3.5mm; }
body.landscape .case li { margin-bottom: 1.5mm; }

@media print {
  html, body { background: #fff; }
  .actor { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { padding: 0; }
  .print-bar { display: none; }
  .orientation { display: none; }

  /* The sheet must fill the page for .foot's margin-top:auto to push the QR
     block down. A height of auto lets the sheet shrink to its content and
     the footer rides up with it. */
  /* A percentage height has no containing block to resolve against when
     printing, so the sheet would collapse to its content and the footer
     would ride up under the cards. Pin it to the physical page instead. */
  .sheet {
    box-shadow: none;
    margin: 0;
    width: auto;
    height: 297mm;
    min-height: 297mm;
    padding: 12mm 12mm 8mm;
  }
}

/* Chrome reads @page from the stylesheet, so the orientation toggle swaps
   which of these two rules is active. */
@media print {
  body.landscape .sheet { height: 210mm; min-height: 210mm; padding: 9mm 12mm 6mm; }
}

/* A narrow screen still has to show something usable. */
@media screen and (max-width: 230mm) {
  body { padding: 3mm; }
  .sheet { width: 100%; min-height: 0; padding: 8mm; }
  .rail { grid-template-columns: repeat(2, 1fr); gap: 6mm; }
  .cases { grid-template-columns: 1fr; }
  .foot { flex-direction: column; align-items: flex-start; }
}