/* possible overrides of default css, use with caution */

/*
 * Paytable page (webui): the Donk (H1) is the FIRST symbol entry of the
 * config() paytable and carries 21 pay tiers (counts 5..24, then 25+) — give
 * it its own centered row above the standard symbols, which keep the default
 * flex-wrap flow on the rows below.
 * Selectors ride the webui paytable DOM (PaytablePage.svelte: .pays >
 * .symbol > .symbol-pays, with pay-count | pay-sep | pay-value cells per
 * tier); plain class names survive Svelte's scoping, and #webui outweighs the
 * scoped rules.
 */
#webui .pays > .symbol:first-child {
  flex-basis: 100%;
}

/* Double-size Donk symbol: 2x the webui $paytable-symbol-size px references
   (desktop/cinema 120, tablet 110, mobile 96), on the webui breakpoints. */
#webui .pays > .symbol:first-child img {
  width: 240px;
  height: 240px;
}

/*
 * COLUMN-MAJOR tier flow: the pays list becomes a 3-column multicol block
 * (2 on mobile). DOM order is highest-count-first, so the highest tiers run
 * DOWN the left column (highest at top-left), continuing in the columns to
 * the right. Each tier ends with a forced line break (the \A after the
 * value); fixed-width right-aligned counts keep each column table-aligned.
 */
#webui .pays > .symbol:first-child .symbol-pays {
  display: block;
  column-count: 3;
  column-gap: 2em;
}
#webui .pays > .symbol:first-child .pay-count {
  display: inline-block;
  min-width: 2.4em;
  text-align: right;
}
#webui .pays > .symbol:first-child .pay-value::after {
  content: '\A';
  white-space: pre;
}

@media (max-width: 820px) {
  /* webui $bp-mobile-max: two columns, mobile symbol size x2. */
  #webui .pays > .symbol:first-child .symbol-pays {
    column-count: 2;
  }
  #webui .pays > .symbol:first-child img {
    width: 192px;
    height: 192px;
  }
}
@media (min-width: 821px) and (max-width: 1279px) {
  /* webui tablet range: tablet symbol size x2. */
  #webui .pays > .symbol:first-child img {
    width: 220px;
    height: 220px;
  }
}

/*
 * Feature-paragraph illustrations (PaytableGenerator: smash / ultra_smash /
 * angry_crush / Bonus / Super-Bonus from raw-assets/paytable): the webui
 * feature layout renders default-branch images unconstrained (the config's
 * imageStyles field is not consumed by PaytablePage), and the sources run up
 * to 720px against the 675px content column — cap them. Scoped by src path so
 * the store-button image and the .symbol pays tiles keep their own sizing.
 */
#webui .feature > img[src*='paytable/'] {
  max-width: 30%;
}
/* The smash/crush feature arts share one larger size (the 'paytable/' prefix
   keeps ultra_smash.png out of the smash.png match). */
#webui .feature > img[src*='paytable/smash.png'],
#webui .feature > img[src*='paytable/ultra_smash.png'],
#webui .feature > img[src*='paytable/angry_crush.png'] {
  max-width: 40%;
}