/* ============================================================
   DICE GOBLINZ — Big Boss's Orderz, on a screen
   Same ink and paper as the printed sheet, but it reflows: one
   column on a phone, the sheet's rail | procedure split on a wide
   screen. Lines come from ink.css.
   ============================================================ */

:root {
  /* Pale parchment. */
  --paper: #f7eedb;
  --stain: 150 110 50;
  --glow: 255 253 245;
  --ink: #1d1b16;
  --blood: #7d2418;
  --wash: rgba(0, 0, 0, 0.045);
  --wash-strong: rgba(0, 0, 0, 0.075);

  --font-head: "Rock Salt";
  --font-body: "Fuzzy Bubbles";

  --gutter: 1rem;
}

* { box-sizing: border-box; }

/* The parchment texture, all CSS gradients. Two parts:
   - Grain: rings far thinner than a pixel, drawn from two centres well
     off the page. The browser can't draw them cleanly, and the leftover
     interference reads as fine grain with faint fibres. The two centres
     and spacings were picked so their interference never forms a swirl.
   - Clouds: soft light and dark blotches, each fading to nothing before
     the edge of its tile so there are no seams. The tile sizes are all
     prime, so the layers never line up the same way twice. Small tiles
     are the faintest and the strongest blotches get tiles bigger than a
     screen, so no grid of blotches ever shows. */
html {
  background-color: var(--paper);
  background-image:
    repeating-radial-gradient(circle at -1300px -900px, rgb(var(--stain) / 0.08) 0 0.00031px, transparent 0 0.00067px),
    repeating-radial-gradient(circle at -2300px 2700px, rgb(var(--glow) / 0.30) 0 0.00037px, transparent 0 0.00079px),
    radial-gradient(closest-side, rgb(var(--stain) / 0.025), rgb(var(--stain) / 0.01) 55%, transparent),
    radial-gradient(closest-side, rgb(var(--glow) / 0.3), rgb(var(--glow) / 0.12) 55%, transparent),
    radial-gradient(closest-side, rgb(var(--stain) / 0.045), rgb(var(--stain) / 0.018) 55%, transparent),
    radial-gradient(closest-side, rgb(var(--glow) / 0.45), rgb(var(--glow) / 0.18) 55%, transparent),
    radial-gradient(closest-side, rgb(var(--stain) / 0.06), rgb(var(--stain) / 0.024) 55%, transparent),
    radial-gradient(closest-side, rgb(var(--glow) / 0.4), rgb(var(--glow) / 0.16) 55%, transparent),
    radial-gradient(closest-side, rgb(var(--stain) / 0.05), rgb(var(--stain) / 0.02) 55%, transparent);
  background-size:
    auto, auto,
    241px 223px, 337px 359px, 523px 467px, 787px 853px,
    1123px 1051px, 1531px 1433px, 1999px 1847px;
  background-position:
    0 0, 0 0,
    0 0, 131px 67px, 311px 199px, 97px 421px,
    613px 283px, 1009px 757px, 409px 1201px;
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body { margin: 0; }

svg.defs { position: absolute; width: 0; height: 0; }

/* ---------- the sheet ---------- */
.sheet {
  position: relative;
  max-width: 100rem;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 1.6rem var(--gutter) 2.5rem;
  font-family: var(--font-body), "Comic Sans MS", cursive;
  font-size: 1rem;
  line-height: 1.5;
}
/* On screen the parchment texture replaces the printed sheet's SVG grain. */
.paper-grain { display: none; }
.sheet > * { position: relative; }

/* ---------- masthead ---------- */
.masthead {
  container-type: inline-size;
  padding-bottom: 0.9rem;
  margin-bottom: 1.1rem;
}
.wordmark {
  margin: 0;
  font-family: var(--font-head), cursive;
  /* The wordmark is about 10.8em wide: this fills the masthead. */
  --wordmark-share: 100cqi;
  font-size: min(4.4rem, var(--wordmark-share) / 10.8);
  font-weight: 800;
  line-height: 1.1;
  /* Rock Salt runs its letters together — without this, GOBLINZ reads
     as GOBUNZ. */
  letter-spacing: 0.055em;
  transform: rotate(-1.1deg);
  transform-origin: left bottom;
}

/* Key art: full width under the wordmark on a phone, never taller than
   40% of the screen. */
.art {
  display: block;
  width: 100%;
  height: auto;
  max-height: 40svh;
  object-fit: contain;
  margin: 0.75rem 0 1rem;
  mix-blend-mode: multiply;
}

/* ---------- set-up text ---------- */
/* A touch smaller than the rules, so the header stays compact. */
.intro { font-size: 0.85rem; }
.intro p { margin: 0 0 0.6rem; }
.flavor { font-style: italic; }
.needs { transform: rotate(-0.35deg); }
.rollup {
  font-weight: 700;
  transform: rotate(-0.6deg);
  transform-origin: left;
}
.die { color: var(--blood); font-weight: 700; }

/* ---------- headings ---------- */
.zone {
  position: relative;
  font-family: var(--font-head), cursive;
  margin: 1.6rem 0 0.6rem;
  padding-bottom: 0.45rem;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.2;
  transform: rotate(-0.25deg);
}

/* ---------- tables ---------- */
.tbl-wrap { position: relative; }
/* Breathing room between the two tables. */
.rail .tbl-wrap + .zone { margin-top: 2.75rem; }
.tbl {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.35;
}
.tbl th {
  text-align: left;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.45rem 0.5rem 0.6rem;
}
.tbl td {
  padding: 0.4rem 0.5rem;
  vertical-align: top;
}
.tbl tbody tr:nth-child(odd) { background-color: var(--wash); }

/* Both tables share one grid: the roll columns line up, Goblin + Dice
   is exactly as wide as Item, so Ability and Effect match too. */
.tbl {
  --w-roll: 3rem;
  --w-name: 7.5rem;
  --w-dice: 4rem;
}
.c-roll { width: var(--w-roll); text-align: center; white-space: nowrap; font-weight: 700; color: var(--blood); }
.tbl td.c-roll { font-size: 1.05rem; }
.tbl th:is(.c-roll, .c-dice) { text-align: center; }
.c-name { width: var(--w-name); font-weight: 700; }
.c-dice { width: var(--w-dice); text-align: center; font-weight: 700; }
.c-item { width: calc(var(--w-name) + var(--w-dice)); }
.nowt td { font-style: italic; }

/* ---------- procedure ---------- */
.steps p { margin: 0 0 0.8rem; }
.numbered {
  margin: 0 0 0.8rem;
  padding-left: 1.5rem;
}
.numbered li { margin-bottom: 0.35rem; }
.numbered li::marker { color: var(--blood); font-weight: 700; }

.win {
  position: relative;
  font-family: var(--font-head), cursive;
  margin: 1.6rem 0.4rem 0.5rem 0;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  line-height: 1.55;
  background-color: var(--wash-strong);
  transform: rotate(-1.2deg);
  transform-origin: left center;
}
.win b { color: var(--blood); }

/* ---------- licence ---------- */
.legal {
  margin-top: 2.5rem;
  font-size: 0.85rem;
  line-height: 1.4;
}
.legal p { margin: 0; }
.legal a { color: inherit; }

/* ---------- phone: table rows become little cards ----------
   The columns won't fit side by side, so each row keeps its roll down
   the left, its name – dice on the first line, and lets the long text
   run full width beneath. The header row goes; the cards speak for
   themselves. */
@media (width < 36rem) {
  .tbl, .tbl tbody { display: block; }
  .tbl thead { display: none; }
  .tbl tr {
    display: grid;
    grid-template-columns: 2.6rem auto 1fr;
  }
  .doohickeyz tr { grid-template-columns: 3.4rem 1fr; }
  /* The desktop column widths don't apply to cards. */
  .tbl :is(th, td) { width: auto; }
  .tbl .c-roll { grid-row: span 2; }
  .tbl td:last-child { grid-column: 2 / -1; padding-top: 0; }
  .tbl td.c-name { padding-bottom: 0.15rem; }
  .goblinz td.c-name { padding-right: 0; }
  .goblinz td.c-dice { text-align: left; white-space: nowrap; }
  .goblinz td.c-dice::before {
    content: "\2013\00a0";
    content: "\2013\00a0" / "";
  }
  /* Only the roll column keeps its rule; the rest share a line. */
  .tbl.tbl :is(.c-name, .c-dice) { background: none; }
  .tbl .nowt td.c-name { padding-top: 0.4rem; }
}

/* ---------- tablet: set-up text wraps around the art ---------- */
@media (width >= 36rem) {
  :root { --gutter: 1.75rem; }
}
@media (36rem <= width < 58rem) {
  /* The set-up text wraps around the goblinz themselves, not their box;
     the outline is traced from the painting's left edge. The text always
     runs longer than the art, so the header rule sits under the text. */
  .masthead { display: flow-root; }
  .art {
    float: right;
    /* On wider tablets the text runs shorter, so the art narrows to match. */
    width: min(55%, calc(40rem - 39cqi));
    max-height: none;
    /* Only the goblinz count toward the header's height; the painted ground
       under their feet (the bottom 8.8% of the art, 2.6% of the header's
       width) can overhang. */
    margin: 1rem 0 -2.6%;
    shape-outside: polygon(100% 0, 21.3% 1.6%, 20.6% 7.9%, 20.6% 14.3%, 13.8% 20.8%, 5.2% 27.2%, 0.7% 33.6%, 0.7% 39.9%, 2% 46.5%, 3.5% 52.8%, 5.4% 59.2%, 6.9% 65.6%, 9.6% 72%, 7.1% 78.5%, 4.2% 84.8%, 4.2% 91.2%, 100% 91.2%);
    shape-margin: 0.75rem;
  }
  .masthead .intro { margin-top: 1rem; }
}

/* ---------- wide: the sheet's own split ---------- */
@media (width >= 64rem) {
  .sheet { min-height: 0; padding: 2rem 2.25rem 2.5rem; }

  .body {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    /* Row 2 is the flexible one, so row 1 ends where the tables end and
       the licence line sits right under them. */
    grid-template-rows: auto 1fr;
    gap: 0.5rem 2.25rem;
  }
  .rail { grid-column: 1; grid-row: 1; }
  .proc { grid-column: 2; grid-row: 1 / span 2; }
  .legal { grid-column: 1; grid-row: 2; align-self: start; margin-top: 1.5rem; }
  .rail > .zone:first-child,
  .proc > .zone:first-child { margin-top: 0; }
  .tbl { font-size: 0.9rem; }
  /* Like the printed sheet, the rules run in two columns once there's
     room for two comfortable measures. */
  .steps { columns: 2 17rem; column-gap: 2rem; }
  .steps .lede { break-inside: avoid; }
  .tbl { --w-roll: 2.75rem; --w-name: 6.5rem; --w-dice: 3.5rem; }
}

/* ---------- tablet+ and desktop: the art stands on the header rule ----------
   The tight crop stands on the header rule beside the set-up text, sized
   to be about as tall as the text beside it. */
@media (width >= 58rem) {
  /* The wordmark across the top; under it, the set-up text beside the art. */
  .masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 2.25rem;
  }
  .wordmark { grid-column: 1 / -1; }
  /* The narrower the page, the taller the text runs, so the wider the art. */
  .art {
    grid-column: 2;
    grid-row: 2;
    width: clamp(22rem, calc(66rem - 73cqi), 28rem);
    max-height: none;
    /* Standing on the rule, so the painted ground under the goblinz is
       trimmed off. */
    aspect-ratio: 1318 / 635;
    object-fit: cover;
    object-position: top;
    margin: 1.1rem 0 -0.9rem;
  }

  /* The set-up text's own width decides its columns. One column holds to
     about 80 characters a line; once there's room, it splits into two:
     flavor | who can play, with the d8 line under it. The d8 line never
     wraps, and its column never gets narrower than it. */
  .masthead .intro {
    container: intro / inline-size;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem;
    margin-top: 1.1rem;
  }
  .masthead .intro > * { flex: 1 1 100%; max-width: 37rem; }
  @container intro (width >= 42rem) {
    .masthead .intro > * { flex-basis: 0; max-width: none; }
    .masthead .rollup { white-space: nowrap; }
  }
}
/* Two columns run shorter, so the art comes down to match; this is where
   the text beside it reaches 42rem. */
@media (58rem <= width < 70rem) {
  @container (width >= 62.5rem) {
    .art { width: 17.5rem; }
  }
}
/* With room, the art rises beside the wordmark too, as tall as the wordmark
   and text beside it; the wordmark and text come down a touch so they
   aren't taller than the art. */
@media (width >= 70rem) {
  .wordmark { grid-column: 1; --wordmark-share: 48cqi; }
  .art { grid-row: 1 / span 2; margin-top: 0; width: 31rem; }
  .masthead .intro { align-self: end; margin-top: 0.6rem; }
}