/* ==========================================================================
   Ilustrace v Pravidlech: dvanáct linií a souvislost kombinace

   Dva obrázky ke kapitole Bodování. První rozkládá dvanáctku na tři pole
   5×5 vedle sebe: pět řádků plus pět sloupců plus dvě úhlopříčky. Druhý
   staví pod sebe tytéž čtyři trojky jednou vcelku (100 bodů) a podruhé
   přeťaté devítkou (70 bodů), tedy rozdíl, o kterém mluví odstavec nad
   bodovací tabulkou.

   Proč kresba ve stránce, a ne soubor
   -----------------------------------
   Obrázek by musel existovat čtyřikrát (dva motivy krát dvě šířky, viz
   tools/snimky.mjs) a stejně by nebyl ostrý na každém displeji. Tahle
   kresba je pár desítek značek v HTML: barvy si bere z proměnných motivu,
   takže se ve světlém i tmavém režimu překreslí sama a nic se nestahuje.
   Číslice v ní stojí jako text, takže je vidí i vyhledávač.

   Beze slov
   ---------
   V obrázcích nejsou žádná slova, jenom číslice a znaménka + a =, a ty
   jsou ve všech třech jazycích stejné. Překládá se u nich jenom popis pro
   odečítač obrazovky (<title> uvnitř <svg>, klíče rules.fig.*).

   Stylopis si tahá jenom rules.html, proto stojí zvlášť a ne v prose.css,
   který je na každé stránce webu (tentýž důvod jako u ucitel.css).
   ========================================================================== */

/* Obrázek drží osu sloupce a nepřeroste svoje měřítko: kresba je sice
   vektor a rozmazat se nemůže, ale přes celý sloupec by z ní byl plakát.
   Strop se násobí --ui, aby na velkém displeji rostla s textem kolem sebe.

   Zespodu má víc místa než .prose-figure: kresba končí páskem pod polem,
   který se bez rezervy lepí na nadpisy bodovací tabulky pod sebou. */
.rules-fig {
  margin: var(--sp-2) auto var(--sp-5);
}

.rules-fig--lines {
  max-width: calc(420px * var(--ui));
}

.rules-fig--adjacent {
  max-width: calc(420px * var(--ui));
}

/* <svg> je řádkový prvek, bez tohohle by pod kresbou zůstal proužek
   na účaří (totéž co .prose-figure picture v ucitel.css). */
.rules-fig svg {
  display: block;
  width: 100%;
  height: auto;
}

/* -------------------------------------------------------------- pole 5×5 */
/* Rám a mřížka jsou tytéž barvy jako hrací pole v board.css, aby obrázek
   ukazoval tu hru, kterou čtenář uvidí, a ne obecný čtvercový diagram. */
.fig-frame {
  fill: var(--cell-empty);
  stroke: var(--border-strong);
  stroke-width: 1;
}

/* Rám bez výplně. Řádek s čísly se skládá po vrstvách (podklad, zvýraznění,
   bodové políčko, mřížka) a obrys musí ležet nad nimi, jinak by ho zvýraznění
   zevnitř přetřelo. */
.fig-edge {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1;
}

.fig-plate {
  fill: var(--cell-fill);
}

/* Přepážka před bodovým políčkem. Vlásečnice mřížky na ni nestačí: podklad
   kombinace má tutéž barvu jako bodové políčko (obojí --accent při 16 %),
   takže by body vypadaly jako šestá karta v řadě. */
.fig-split {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1;
}

.fig-grid {
  fill: none;
  stroke: var(--grid-line);
  stroke-width: 1;
}

/* Spojnice vedou středy políček, tedy o půl buňky vedle mřížky. Proto jsou
   ve třech polích po pěti, pěti a dvou, a ne všechny v jednom: dvanáct
   spojnic naráz mřížku přehluší a splyne s ní v kostkovaný vzor.

   Průsvit místo plné barvy, ať je pod linií pořád vidět políčko, kterým
   prochází. Křížení úhlopříček se tím o odstín ztmaví, jedno na celém
   obrázku, to nevadí. */
.fig-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.6;
}

/* Plus a rovnítko mezi poli. Znaménka jsou ve všech třech jazycích stejná,
   proto v obrázku smějí stát; slovo by se muselo překládat. */
.fig-sign {
  fill: var(--text-faint);
  font-family: var(--font-num);
  font-weight: var(--num-weight);
  font-size: 20px;
}

.fig-total {
  fill: var(--text);
  font-family: var(--font-num);
  font-weight: var(--num-weight);
  font-size: 26px;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------- vedle sebe / rozházeně */
/* Pásek pod kombinací. Vcelku, nebo přeťatý, a v tom je celý obrázek:
   souvislost je vidět jako tvar, ne jako věta.

   Kombinace se schválně nepodbarvuje. Zkoušené to bylo a čte se to obráceně:
   podbarvené čtyři trojky nechají devítku svítit bíle, takže oko chytne
   nejdřív ji, tedy to jediné číslo, o které v obrázku nejde. Pásek říká
   totéž a nikomu nesvítí do očí. */
.fig-bar {
  fill: var(--accent);
}

.fig-num {
  fill: var(--cell-ink);
  font-family: var(--font-display);
  font-weight: var(--board-num-weight);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

/* Číslo, které do kombinace nepatří. Šedá cloud-dark z --score-ink, tedy
   týž tón, jakým pole píše body u linie bez kombinace. */
.fig-num--off {
  fill: var(--score-ink);
}

.fig-score-cell {
  fill: var(--score-hot-bg);
}

.fig-score {
  fill: var(--score-hot-ink);
  font-family: var(--font-num);
  font-weight: var(--num-weight);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}