/* =====================================================================
   Folio Mundi — Patte Noire Studios
   Pixel art art direction. See DA.md.
   Sharp 2px borders, square corners, no gradient, no blur, no shadow.
   The only animated thing on the page is the legendary border.
   ===================================================================== */

/* =====================================================================
   L'ESPERLUETTE — la seule lettre que Silkscreen ne sait pas écrire

   Silkscreen POSSÈDE un `&`, il n'est ni absent ni remplacé, mais elle
   le dessine dans une forme si compressée qu'elle change de sens : à
   96 px c'est un trait vertical traversant une panse, et ça se lit
   « ¢ ». Six noms de pays en portent un -- Bosnia & Herzegovina,
   São Tomé & Príncipe, Antigua & Barbuda, St Kitts & Nevis,
   Trinidad & Tobago, St Vincent & Gren.

   On ne touche ni aux noms ni à la limite de vingt caractères : c'est
   la police qui cède, et pour CE SEUL CARACTÈRE. La famille `Amp` ne
   couvre que U+0026, donc toute autre lettre la traverse sans la voir
   et retombe sur Silkscreen. Pixelify Sans est déjà la seconde police
   du projet et reste une police pixel : la DA tient.

   LE FICHIER EST DANS LE PROJET, 724 octets, un seul glyphe. Il vient
   du sous-ensemble `text=&` de Google Fonts, téléchargé une fois : une
   URL gstatic peut tourner, un fichier posé ici ne tourne pas.
   ===================================================================== */
@font-face{
  font-family:"Amp";
  src:local("Pixelify Sans"),
      url("assets/fonts/pixelify-ampersand.woff2") format("woff2");
  unicode-range:U+0026;
  font-display:swap;
}

/* =====================================================================
   LES CHIFFRES DU TEXTE COURANT. Pixelify Sans dessine mal ses chiffres
   à 16px -- le 5 surtout se lit comme un S. Le texte courant (--text)
   garde Pixelify pour tout le reste, mais ses chiffres 0 à 9 sont ceux
   de Silkscreen, la police des chiffres du tableau des raretés
   (--pixel) : la face « Digits » ne couvre que U+0030-0039, tout autre
   caractère la traverse, comme « Amp » pour l'esperluette.

   MÊME TAILLE, MÊME LIGNE. Aucune correction de taille : à la même
   font-size, les chiffres de Silkscreen ont la hauteur des capitales de
   Pixelify (625 et 643 unités sur 1000) et la même ligne de base. Ils
   sont plus larges (750 contre 586). Le `ch` reste celui de Pixelify :
   il se mesure sur la première police qui couvre l'espace, et Digits ne
   la couvre pas (les 62ch de l'accueil, le 18ch du nom du Profil).

   LES FICHIERS SONT DANS LE PROJET, 3 Ko chacun : le sous-ensemble
   `text=0123456789` de Google Fonts, régulier et gras, téléchargé une
   fois, comme pour « Amp ».
   ===================================================================== */
@font-face{
  font-family:"Digits";
  src:url("assets/fonts/silkscreen-digits.woff2") format("woff2");
  font-weight:400;
  unicode-range:U+0030-0039;
  font-display:swap;
}
@font-face{
  font-family:"Digits";
  src:url("assets/fonts/silkscreen-digits-bold.woff2") format("woff2");
  font-weight:700;
  unicode-range:U+0030-0039;
  font-display:swap;
}

:root{
  /* --- surfaces ---
     THE PAGE AND THE CARD ARE TWO PAPERS. The card keeps its cream,
     --paper, and the page and everything of the interface on it sit on
     --cream, one step deeper and warmer: barely seen on an empty page,
     enough for a card never to melt into it. Measured (WCAG): ink 16.7,
     ink-soft 6.3 on --cream; the rarity labels keep --paper behind
     them, so their contrast is exactly what it was. */
  --cream:#FBF0D8;        /* page background, the interface        */
  --paper:#FFF8E7;        /* the card's own paper, and nothing else */
  --dots:#E6D9BA;         /* the page's dot grid                   */
  --cream-deep:#F0E6CE;   /* recessed areas: slots, bars, empties  */
  --ink:#141210;          /* text and strong borders               */
  --ink-soft:#5E574B;     /* secondary text, captions, units       */
  --sepia:#5B3A1F;        /* a card's border: the brown of old map inks */
  --line:#C9BEA3;         /* quiet dividers, still 2px             */

  /* --- six rarities, flat, no neon --- */
  --r-C:#8C8577;
  --r-UC:#4E8B3A;
  --r-R:#2E6BA8;
  --r-SR:#7A4A9E;
  --r-UR:#D06A1E;
  --r-L:#C39A28;

  /* --- metrics --- */
  --edge:2px;             /* every border, everywhere              */
  --nav-w:100px;          /* navigation column width               */
  --nav-h:76px;           /* navigation bar height on mobile, the
                             gesture strip below it not counted     */
  --bar-h:34px;           /* language bar height                   */

  /* --- type: two faces, two jobs -----------------------------------
       --pixel   Silkscreen, always in capitals. Titles, place names,
                 buttons, navigation, card attributes, figures,
                 counters, short labels. It draws its lowercase as
                 small capitals, so it can label and never narrate.
       --text    Pixelify Sans (its digits Silkscreen's), in normal case. Descriptions,
                 explanatory copy, credits in the detail panel —
                 anything read as a sentence.

     Silkscreen is missing six letters Turkish needs: g-breve, dotless
     i, s-cedilla and their capitals. Rather than strip the accents and
     misspell the language, those glyphs fall through to Pixelify Sans,
     which has them and is the only other face here. Same look, right
     spelling, and still nothing but the two.

     The catalogue of languages is Latin-alphabet only now, so there is
     no Japanese, Cyrillic or Arabic to carry and no third font. */
  --pixel:"Amp","Silkscreen","Pixelify Sans",sans-serif;

  /* L'IRISATION D'UN FOIL, chiffre par chiffre. Ils sont ICI et non
     sur `.sheen.iris` : déclarés sur l'élément lui-même ils battraient
     l'héritage, et le panneau de réglage de tools/validate.html, qui
     les pose sur `:root`, ne pourrait plus rien changer. */
  --iris-bande:.51;        /* l'opacité de la bande                  */
  --iris-eclat:.84;        /* l'éclat sur les hautes lumières        */
  --iris-tons:.72;         /* la prise dans les tons moyens          */
  --iris-grain:.36;        /* le grain de diffraction                */
  --iris-angle:109deg;     /* l'inclinaison de la bande              */
  --iris-course:.7;        /* l'amplitude du balayage                */
  --iris-fusion:normal;
  /* L'ENCRE, LA GRAVURE ET LES ÉCLATS. Réglés aux curseurs du banc
     d'essai, figés ici à la valeur retenue. Le banc a été supprimé :
     ces six nombres sont ce qu'il en reste. */
  /* 2.6 et non 1.6 : avec une rampe trois fois plus petite, il faut
     la déplacer plus pour que l'encre change de couleur à l'œil quand
     la carte penche. */
  --iris-encre:2.6;        /* la course du balayage sur l'encre      */
  --ec-force:.9;           /* l'intensité d'un éclat allumé          */
  --ec-fen:9;              /* la largeur de la fenêtre d'allumage    */
  --ec-teinte:#FFFDF0;
  /* its digits are Silkscreen's (the "Digits" face, at the top) */
  --text:"Digits","Pixelify Sans",sans-serif;
}

/* Pixel type is drawn, not smoothed. Anti-aliasing is what turns a
   sharp edge into a grey one, and grey edges are the whole thing we
   are avoiding. */
*{box-sizing:border-box;margin:0;padding:0;
  -webkit-font-smoothing:none;font-smooth:never}

html,body{height:100%}
/* NO WORD IS EVER BROKEN, IN ANY LANGUAGE: no automatic hyphenation
   anywhere in the game. `hyphens` is inherited, so it is said once. */
html{-webkit-hyphens:none;hyphens:none}
/* The page is one grid: navigation column on the left, page on the
   right. Every child is placed explicitly, so nav.js can append its
   markup anywhere in <body> without moving anything already there. */
/* THE PAGE'S DOT GRID, in the spirit of the graph paper on the back of
   a card: one pixel in every sixteen, a shade under the page, drawn
   once as a tile -- no gradient. It sits on <body>, which never
   scrolls, so it stays still under the pages that do; a panel, a bar,
   a card covers it. It is never meant to be noticed. */
body{
  background-color:var(--cream);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='1' height='1' fill='%23E6D9BA'/%3E%3C/svg%3E");
  background-size:16px 16px;
  color:var(--ink);
  font-family:var(--text);
  font-size:16px;
  line-height:1.55;
  display:grid;
  grid-template-columns:var(--nav-w) 1fr;
  grid-template-rows:1fr;
}

/* NO TEXT SELECTED BY THE MOUSE. A game is pressed, dragged and swiped,
   and a drag that starts on a word painted the page blue. Selecting
   stays where there is something to copy: what one types, the chat's
   messages, and the legal notice (body.selectable). */
body{-webkit-user-select:none;user-select:none}
input,textarea,select,[contenteditable],.chat .msg p,
.selectable,.selectable *{-webkit-user-select:text;user-select:text}
/* and a card's pictures are never dragged off it (nav.js stops the
   drag too, for the browsers that ignore this) */
.tcard img,.tcard-box img,.tcard-back img{-webkit-user-drag:none;user-drag:none}

/* Nothing in this project is blurred, rounded or shadowed. */
img{image-rendering:pixelated}

/* =====================================================================
   THE MARK, EVERYWHERE IT APPEARS
   One file, assets/brand/compass.svg, and it is never an <img>: it is
   the mask of a box painted with currentColor. So the rose takes the
   ink of whatever it sits in -- ink on cream in the navigation, cream
   on ink where the ground is dark -- with no second file and no
   filter. See DA.md 0.

   THE ROSE IS PIXEL ART, ON A 32 GRID, SHOWN ONLY AT WHOLE MULTIPLES.
   A caller never sets its width: it says the size it wants in --rose-w,
   and nav.js (snapRoses) writes --rose-px, the nearest size at which one
   cell of the grid is a whole number of DEVICE pixels -- the card's
   scale (--s) and the screen's density counted. Every cell then gets
   the same pixels and none is smoothed. Until the script has run, the
   box stands at --rose-w.
   ===================================================================== */
@property --rose-w{syntax:"<length>";inherits:false;initial-value:32px}
.rose{display:inline-block;background-color:currentColor;
  width:var(--rose-px, var(--rose-w));height:var(--rose-px, var(--rose-w));
  -webkit-mask:url("assets/brand/compass.svg?v=457d756c53") center/contain no-repeat;
          mask:url("assets/brand/compass.svg?v=457d756c53") center/contain no-repeat}

/* NO RING, NO FLASH (2026-10). The browser's focus ring -- blue on
   iPhone, round the first button of a window that had just opened --
   is drawn nowhere in the game, on nothing: buttons, links, tabs,
   fields, menus, cards, windows. Nor the grey or blue flash iOS and
   Android lay over what a finger touches. FROM THE KEYBOARD
   (:focus-visible), an element looks exactly as under the mouse: each
   :hover rule of the game names :focus-visible beside it, and nothing
   else is drawn. The windows (dialog.js) take the focus themselves on
   opening, not one of their buttons. The back office (folio/compte/
   admin) keeps its own rules. */
html{-webkit-tap-highlight-color:transparent}
:focus,:focus-visible{outline:none}

/* The hidden attribute has to win. The UA sheet says [hidden]{display:none},
   which any author rule that sets a display beats -- .flags is display:grid,
   so hiding the Language section left the grid on screen. Stated once, with
   the weight to hold, rather than one .thing[hidden] rule per thing. */
[hidden]{display:none !important}

/* ---------- THE SCROLLBARS: pixel, in the project's colours ----------
   Everywhere something scrolls -- the page, the lists, the panels, the
   windows, the hand of cards: a rail of the deeper cream, edged in ink,
   2 px; a thumb of dark ink, square, a 2 px border lit on its top and
   left and shadowed on its bottom and right -- the pixel relief of a
   button -- darker under the pointer, ink when held. No arrows. 14 px.

   CHROME AND EDGE DRAW IT FROM THE ::-webkit-scrollbar PARTS -- and drop
   them the moment scrollbar-color or scrollbar-width is set. So those
   two are given to Firefox alone (@supports below), which reads nothing
   else: its bar takes the same colours, thin, without the relief it
   cannot draw.

   ON A PHONE, THE SYSTEM'S OWN: thin, fading, over the content. Only a
   pointer that hovers gets this bar. The phone's navigation strip keeps
   its bar hidden (.nav-track). */
@media (hover: hover) and (pointer: fine){
  ::-webkit-scrollbar{width:14px;height:14px}
  ::-webkit-scrollbar-button{display:none;width:0;height:0}
  ::-webkit-scrollbar-corner{background:var(--cream-deep)}
  ::-webkit-scrollbar-track{background:var(--cream-deep);border:2px solid var(--ink);border-radius:0}
  ::-webkit-scrollbar-thumb{background:#4A4339;border:2px solid;border-radius:0;
    border-color:var(--ink-soft) var(--ink) var(--ink) var(--ink-soft)}
  ::-webkit-scrollbar-thumb:hover{background:#2E2922}
  ::-webkit-scrollbar-thumb:active{background:var(--ink);
    border-color:#4A4339 var(--ink) var(--ink) #4A4339}
  @supports not selector(::-webkit-scrollbar){
    *{scrollbar-width:thin;scrollbar-color:#4A4339 var(--cream-deep)}
  }
}

/* ---------- titles: caps and a trailing underscore ---------- */
h1,h2,h3,.section-title,.kicker{
  font-family:var(--pixel);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.3;
}
h1::after,h2::after,h3::after,.section-title::after{content:"_"}
h1.bare::after,h2.bare::after,h3.bare::after{content:none}

a{color:var(--ink);text-decoration:none}
a:hover,a:focus-visible{text-decoration:underline;text-underline-offset:3px}

/* Silkscreen is sharp at 8, 16, 24 and nowhere between, so inline
   code takes a fixed 8px rather than an em of whatever surrounds it. */
code{font-family:var(--pixel);font-size:16px}

/* ---------- coordinates ---------- */
.coord{
  font-family:var(--text);
  font-size:16px;
  color:var(--ink-soft);
  display:block;
  margin-top:6px;
  font-variant-numeric:tabular-nums;
}

/* ---------- rarity chip ---------- */
.rar{
  display:inline-block;
  font-family:var(--pixel);
  font-size:16px;
  text-transform:uppercase;
  padding:3px 6px;
  border:var(--edge) solid currentColor;
  background:var(--paper);
}
/* the rarity's icon before its letters (places.js, rarityIcon) */
.rar .ri{margin-right:6px}   /* the gap every icon keeps from its label */
.rar[data-r="C"] {color:var(--r-C)}
.rar[data-r="UC"]{color:var(--r-UC)}
.rar[data-r="R"] {color:var(--r-R)}
.rar[data-r="SR"]{color:var(--r-SR)}
.rar[data-r="UR"]{color:var(--r-UR)}

/* The legendary is the only element in the game with an effect:
   a border that steps through four golds. No glow, no gradient. */
.rar[data-r="L"]{color:var(--r-L);animation:gold 1s steps(1) infinite}
.legendary-edge{animation:gold 1s steps(1) infinite}
/* NOTHING LOOPS UNSEEN (nav.js): a looping animation off the screen, or
   in a hidden tab, is paused -- `.unseen` on the element, `tab-hidden`
   on the page */
.unseen,.unseen::before,.unseen::after,
html.tab-hidden *,html.tab-hidden *::before,html.tab-hidden *::after{animation-play-state:paused!important}
@keyframes gold{
  0%  {border-color:#C39A28}
  25% {border-color:#EBD27A}
  50% {border-color:#8F6E14}
  75% {border-color:#D9B84A}
  100%{border-color:#C39A28}
}

/* =====================================================================
   The card — a printed object, not a piece of interface
   ---------------------------------------------------------------------
   DRAWN ONCE, AT ONE SIZE, AND SHOWN AT WHOLE MULTIPLES OF IT.

   The base is 400 x 560 px. Every measurement inside is a whole number
   of pixels and every type size is 16, 24 or 32 — so at scale 1 the
   type sits on Silkscreen's 8px grid, and at scale 2 or 3 it still
   does, because 16 x 2 and 16 x 3 are multiples of 8 too. That is the
   whole reason the scale is an integer: a card at 1.4x would put every
   glyph on a half pixel.

   `--s` is that integer. The box reserves base x --s, the card is laid
   out at base and scaled into it. Album shows 1. The reveal picks the
   largest that fits about three quarters of the window, in packs.html.

   400 x 560 is 5:7, which is a trading card at 63 x 88 mm to within a
   third of a percent, and both numbers are multiples of 16.
   ===================================================================== */
/* THE ONE SIZE CONTROL
   A card is drawn once, at 400 x 560, and every screen shows that same
   drawing scaled by --s. --s is the only thing a page is allowed to
   set. No page writes a width, a font-size, a padding or a margin on
   a card: if a card looks different on two screens, one of them is
   setting something it must not, and the fix is to delete that rule,
   not to add another.

   --s IS ANY NUMBER. It used to have to be a whole one, because the
   card carried bitmaps -- PNG flags, PNG icon masks -- and a bitmap
   only survives a whole multiple. It does not carry any now: the
   flags, the icons and the mark are SVG, one <rect> per run of
   pixels on the original grid with shape-rendering="crispEdges", so
   the drawing is the same drawing at 0.45 as at 1.6, with hard edges
   at both. Nothing on the card is a bitmap except the photograph,
   and a photograph wants to be resampled. See DA.md 0 ter.

   Set it on the box, or pass it as opt.s to placeCard()/cardBack() --
   they are the same thing, the option just writes the property. */
.tcard-box{
  --s:1;
  width:calc(400px * var(--s));
  height:calc(560px * var(--s));
  flex:none;
}
.tcard-box > .tcard,
.tcard-box > .tcard-back{transform:scale(var(--s));transform-origin:top left}

/* Where each screen stands on that scale.

   --card-mini is the one number behind every reduced card on the
   site: the Album sheet and the row on the Home. Change it here and
   both follow, and so does the Album's column width, which is worked
   out from it rather than typed out again.

   The Album detail panel shows the card at its own size, 1. The
   reveal is worked out from the window -- three quarters of its
   height -- by packs.html, which writes the number into #stage. */
:root{--card-mini:.45}
.sheet .tcard-box,            /* the Album sheet  */
.track .tcard-box{--s:var(--card-mini)}
#detail .tcard-box{--s:1}     /* the detail panel */

.tcard{
  /* THE MARKS, AND WHY THEY ARE VARIABLES.
     The card is shown at any scale, so an icon declared at 32 lands on
     32 x --s x devicePixelRatio device pixels -- 38.4 at 1.2, 14.4 in
     an album slot. A 16px drawing at 38.4 gives each of its pixels
     2.4 device pixels, which crispEdges rounds to a mix of 2 and 3:
     the drawing comes out lumpy, some pixels fatter than others.

     So the sizes below are DEFAULTS, and card.js overwrites them per
     card with the nearest size whose device width is a whole multiple
     of the drawing's own grid -- 11 for a mark, 15 x 10 for a flag.
     Each source pixel then gets a whole number of device pixels, and
     because that number is whole, a fractional origin shifts the whole
     drawing without ever splitting a pixel unevenly.

     The layout absorbs the difference: --mk is a grid track, so the
     label simply starts where the box ends. See snapMarks() in
     card.js. */
  --mk:32px;         /* the square every mark sits in   */
  --mk-gap:8px;      /* box to label, the same for four */
  --mk-icon:32px;    /* the drawing inside the square   */
  --mk-flagw:30px;
  --mk-flagh:20px;
  width:400px;
  height:560px;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  position:relative;
  display:flex;
  flex-direction:column;
  padding:24px;
  gap:16px;
  overflow:hidden;
  box-sizing:border-box;
  border-radius:24px;
  /* the cut: where the paper ends */
  border:2px solid var(--line);
}

/* the printed frame: the rarity, set in from the cut, concentric.
   TWO PIXELS, like the rule round the photograph and like every other
   border in the interface. It was four, and four made the rarity shout
   in a weight it has no business using: the colour carries the rarity,
   the thickness carries nothing. */
/* ONE SEPIA TRAIT, the same for every rarity, on every card, Standard
   and Full Art: 2 px in the brown of old map inks, 16 px inside the
   paper (18 px from the card's outer edge), its corners 8 px.

   ON WHOLE SCREEN PIXELS, AT EVERY SIZE. The card is drawn at 400 x 560
   and shrunk by `transform:scale(--s)`: a 2 px trait drawn in there
   lands on 0.9 of a pixel at the album's 0.45, astride two rows, and
   shimmers as a strip scrolls. So it is drawn in its own layer (.lis,
   card.js) that UNDOES the card's scale -- scale(1/--s) inside scale(--s)
   is no scale at all -- and there, in real pixels, its place and its
   thickness are rounded: round(18 x s) from the edge, round(2 x s) thick,
   never under 1 px. A browser without round() takes the unrounded
   values just before: a trait all the same. */
.tcard > .lis{position:absolute;left:-2px;top:-2px;pointer-events:none;
  width:calc(400px * var(--s, 1));height:calc(560px * var(--s, 1));
  transform:scale(calc(1 / var(--s, 1)));transform-origin:0 0}
.tcard > .lis::before{content:"";position:absolute;
  inset:calc(18px * var(--s, 1));
  inset:round(calc(18px * var(--s, 1)), 1px);
  border-radius:calc(8px * var(--s, 1))}

/* =====================================================================
   LES TRAITS DE LA CARTE : UN SEUL STYLE

   Trois traits sont imprimés sur une carte, et ils sont UN SEUL objet :
     la bordure                  .lis::before
     le trait de séparation      .lis::after, sous les coordonnées,
                                 au-dessus du crédit
     le cadre de la photo        .lis > .frame, sur une Standard
   Tous dans le calque .lis, à l'échelle de l'écran : place et
   épaisseur arrondies au pixel entier, 2 px à l'échelle 1, jamais sous
   un pixel. Tous de la couleur de l'imprimé, --print : le sépia, ou la
   couleur choisie pour une Full Art. En Foil, tous prennent le même
   irisé, --iris-print, par la même règle. Aucun des trois n'a de règle
   à lui : ils ne peuvent plus diverger.

   Le trait et le cadre suivent la mise en page -- un crédit sur deux
   lignes remonte le trait, un nom sur deux lignes raccourcit la photo --
   donc leur place est lue sur la carte par card.js (snapTraits), en
   pixels de carte : --rule-y, --shot-x, --shot-y, --shot-w, --shot-h.
   Les traits de la mise en page (.marks, .shot) restent, transparents,
   pour tenir la place.
   ===================================================================== */
/* the thickness is written out, not put in a variable: a browser
   without round() drops the second line and keeps the first, where a
   variable holding round() would leave no width at all */
.tcard{--print:var(--sepia)}
.tcard > .lis::before,
.tcard > .lis > .frame{
  border:calc(2px * var(--s, 1)) solid var(--print);
  border-width:max(1px, round(calc(2px * var(--s, 1)), 1px))}
.tcard > .lis::after{content:"";position:absolute;
  left:calc(26px * var(--s, 1));
  left:round(calc(26px * var(--s, 1)), 1px);
  right:calc(26px * var(--s, 1));
  right:round(calc(26px * var(--s, 1)), 1px);
  top:calc((var(--rule-y, 492px) - 2px) * var(--s, 1));
  top:round(calc((var(--rule-y, 492px) - 2px) * var(--s, 1)), 1px);
  height:calc(2px * var(--s, 1));
  height:max(1px, round(calc(2px * var(--s, 1)), 1px));
  background:var(--print)}
.tcard > .lis > .frame{position:absolute;box-sizing:border-box;
  left:calc(var(--shot-x, 26px) * var(--s, 1));
  top:calc(var(--shot-y, 210px) * var(--s, 1));
  width:calc(var(--shot-w, 352px) * var(--s, 1));
  height:calc(var(--shot-h, 254px) * var(--s, 1));
  left:round(calc(var(--shot-x, 26px) * var(--s, 1)), 1px);
  top:round(calc(var(--shot-y, 210px) * var(--s, 1)), 1px);
  width:calc(round(calc((var(--shot-x, 26px) + var(--shot-w, 352px)) * var(--s, 1)), 1px)
             - round(calc(var(--shot-x, 26px) * var(--s, 1)), 1px));
  height:calc(round(calc((var(--shot-y, 210px) + var(--shot-h, 254px)) * var(--s, 1)), 1px)
              - round(calc(var(--shot-y, 210px) * var(--s, 1)), 1px))}
.tcard .marks{border-bottom-color:transparent}
.tcard.art-inset .shot{border-color:transparent}
/* the layer over the photograph (.shot is at 2), whose frame it now draws */
.tcard.art-inset > .lis{z-index:3}
/* a Full Art has no photo window: its photograph is the card */
.tcard.art-bleed > .lis > .frame{display:none}

/* EN FOIL, les trois traits prennent l'irisé de l'imprimé, par la même
   règle : leur bordure garde sa place, transparente, et le dégradé
   n'est gardé que sur elle. Une Standard Foil : la roue vive de
   l'encre, qui suit la bande (`+ --swx`) ; une Full Art : celle de sa
   couleur, à l'inverse de la bande de la photographie (`- --swx`),
   pour que l'encre et le fond s'écartent quand la carte penche. */
.tcard.fin-metal,
.tcard.fin-gold{--iris-print:linear-gradient(var(--iris-angle),
    #0D9E55 0%, #1094C4 24%, #9214FF 46%, #FF14A9 68%, #AD860E 88%, #0D9E55 100%);
  --iris-size:170%;
  --iris-pos:calc(50% + var(--swx) * var(--iris-encre) * 1%)}
.tcard.art-bleed.fin-metal,
.tcard.art-bleed.fin-gold{--iris-size:300%;
  --iris-pos:calc(50% - var(--swx) * var(--iris-encre) * 2%)}
.tcard.fin-metal > .lis::before,
.tcard.fin-gold > .lis::before,
.tcard.fin-metal > .lis > .frame,
.tcard.fin-gold > .lis > .frame{
  border-color:transparent;
  background:var(--iris-print) border-box;
  background-size:var(--iris-size) var(--iris-size);
  background-position:var(--iris-pos) 50%;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:background-position 120ms linear;
}
.tcard.fin-metal > .lis::after,
.tcard.fin-gold > .lis::after{
  background:var(--iris-print);
  background-size:var(--iris-size) 100%;
  background-position:var(--iris-pos) 50%;
  transition:background-position 120ms linear;
}
@media (prefers-reduced-motion: reduce){
  .tcard.fin-metal > .lis::before,
  .tcard.fin-gold > .lis::before,
  .tcard.fin-metal > .lis::after,
  .tcard.fin-gold > .lis::after,
  .tcard.fin-metal > .lis > .frame,
  .tcard.fin-gold > .lis > .frame{transition:none}
}

/* ---------- head: the name, and the endurance ---------- */
/* Each row states its height, and its own margin, padding and border,
   so that a rule outside the component cannot lend it any. The card's
   class names -- head, name, end, marks, shot, where, foot, credit,
   ident -- are ordinary words, and a page is free to use them for
   something else; it must not be able to move the card by doing so. */
.tcard > *{margin:0;padding:0;border:0;line-height:1.55}
/* THE TITLE'S RESERVED RECTANGLE, DEFINED ONCE
   The name does not get whatever room is left over: it gets a stated
   rectangle, and the rectangle never changes from one card to the next.

   HEIGHT 80. That is two lines of Silkscreen at 32 -- 32 x 1.25 x 2 --
   which is the largest thing the ladder below can ask for, so the head
   is that tall on every card whether the name needs it or not. It used
   to be 56, and the 24px it takes comes off the photograph: a title
   that fits is worth more than 24px of picture.

   WIDTH 224. The card is 400 wide with a 2px cut either side and 24 of
   padding inside that, the gap to the endurance column is 16, and that
   column is a stated 108 -- which is what ENDURANCE measures in
   Silkscreen at 16, measured rather than assumed: Silkscreen is
   PROPORTIONAL, not monospaced (A is 0.75 em, M 0.875, I 0.375), so
   nine glyphs are not nine of anything. 400 - 4 - 48 - 16 - 108 = 224.

   The column is stated rather than left to fit its contents so the
   name's rectangle cannot move when the endurance goes from one digit
   to two. A translation longer than ENDURANCE would have to change the
   108 and the 224 with it. */
.tcard .head{display:flex;align-items:flex-start;gap:16px;flex:none;height:80px}
.tcard .head .name{flex:1;min-width:0;height:80px;overflow:hidden}
/* THE TITLE FITS ITSELF, AND PREFERS TO BE LARGE.
   Three sizes, and all three are sizes Silkscreen is sharp at: 32, 24,
   16. Nothing between them, nothing scaled. The ladder is tried in this
   order and stops at the first rung that fits the rectangle:

     32 on one line
     32 on two lines      <- before 24 on one line, deliberately
     24 on one line
     24 on two lines
     16 on one line
     16 on two lines

   A bigger size on two lines beats a smaller one on one: MONT-SAINT-
   MICHEL set large across two lines reads as a name, set small on one
   it reads as a caption. Nothing is ever cut and there is no ellipsis:
   a name half printed is not a name.

   A word is never broken either -- overflow-wrap stays normal -- so a
   single long word that will not fit simply fails that rung and the
   ladder goes down a size.

   The choice is made by measuring the real element after it is in the
   page, and only once Silkscreen has actually loaded: fitTitle() in
   card.js. These four declarations are all the states it switches
   between -- a size, and whether the line may wrap.

   overflow:hidden IS LOAD-BEARING, and not for the clipping. Without
   it Chrome reports scrollWidth as the box width even when the text
   runs well past it, so the question "is this name too long" came back
   no on every single card. With it, scrollWidth is the text's own
   width and the answer is true.

   NO max-height HERE, AND THAT IS DELIBERATE. Capping the span and
   asking whether it overflowed looked like the obvious test and was
   wrong: Silkscreen's glyph box at 32 is 41px tall inside a 40px line
   box, so scrollHeight came back 41 against a clientHeight of 40 and
   EVERY name failed the 32 rung by one pixel. The honest question is
   how many line boxes there are, which fitTitle() asks by dividing the
   element's height by its own line-height. The rectangle on .name
   clips, so a rung that lied could only ever lose the excess, never
   push the card about. */
.tcard .head .name span{
  font-family:var(--pixel);text-transform:uppercase;
  display:block;overflow:hidden;
  font-size:32px;line-height:1.25;
  white-space:nowrap;
  overflow-wrap:normal;word-break:normal}
.tcard .head .name span.l2 {white-space:normal}
.tcard .head .name span.s24{font-size:24px}
.tcard .head .name span.s16{font-size:16px}
/* the endurance column: stated, see the rectangle above */
.tcard .head .power{flex:none;width:108px;text-align:right;line-height:1}
.tcard .head .power b{display:block;font-family:var(--pixel);font-size:32px;
  font-weight:400}
.tcard .head .power span{display:block;font-family:var(--pixel);font-size:16px;
  text-transform:uppercase;color:var(--ink-soft);margin-top:8px}

/* ---------- the country and the type ----------
   UNDER THE PHOTOGRAPH, ONE LINE (2026-09, the layout of the cards):
   the country, its flag and its name, on the left; the type, its icon
   and its name, on the right -- one line of 32, the icons' box, over
   the rule (6 below it, then the rule's 2). The continent and the
   coordinates are not on the card: they are the sheet's (album).

   THE RARITY IS IN THE FOOT, as its stars, after the number; its word
   is the sheet's. THE VERSION IS NOT WRITTEN: a Foil carries only the
   little diamonds of its icon, after the stars.

   THE TYPE TAKES WHAT ITS WORD NEEDS, 126 at most (card.js,
   LB_LARGEUR); the country takes the rest (card.js, countryRoom) --
   its name, its short name, closed up, stepped down, 16, 14, 12. */
.tcard .marks{
  height:40px;box-sizing:border-box;flex:none;
  padding-bottom:6px;border-bottom:2px solid transparent;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  column-gap:16px;
}

/* A mark is a square box and a label, and the four are built the same
   way: the box is the same size everywhere, the label always starts
   the same distance after it, and both are centred on each other. The
   box is a grid track rather than a flex gap, so the four labels line
   up on one x whatever is inside the box. */
.tcard .marks .mk{
  display:grid;
  grid-template-columns:var(--mk) 1fr;
  column-gap:var(--mk-gap);
  align-items:center;
  min-width:0;
}
/* the type ends at the right edge: its icon, then its name */
.tcard .marks .mk-type{grid-template-columns:var(--mk) auto;justify-content:end}
/* The box is a LAYOUT slot, 32, the row's height. Type, rarity and
   version are all on the pack's 16 x 16 grid, one-pixel line, each
   file a 16 box centred on its drawing (tools/mark-icons.py,
   tools/rarity-icons.py): 32 on a card at its full size, two device
   pixels a pixel, snapped to whatever the device can paint whole
   (--mk-icon, snapOne in card.js) -- the same pixel in every icon.
   Every drawing sits against the END of its slot, centred on the
   height: every mark is exactly --mk-gap from its label, the three
   icons make one column, and the flag (30) ends where they end. */
.tcard .marks .mkbox{
  width:var(--mk);height:var(--mk);
  display:grid;place-items:center end;
  overflow:visible;
}
.tcard .marks .icon,
.tcard .marks .ri{width:var(--mk-icon);height:var(--mk-icon);display:block}
.tcard .marks .icon{color:var(--ink-soft)}
/* The flag is an SVG on a 15 x 10 viewBox. It sits in the same square
   as the icons, centred, at the largest whole multiple of its own grid
   that the square will take -- so it carries the same weight as a mark
   instead of looking like a stamp beside them. */
.tcard .marks .mk-country img{width:var(--mk-flagw);height:var(--mk-flagh);display:block;flex:none}
/* the country's backstop: measured to fit (card.js), cut if ever not */
.tcard .marks .mk-country .lb{overflow:hidden;text-overflow:ellipsis}
/* The label: same face, same size, same colour for the four, and it
   starts at the same x in every cell because --mk is a track. It is
   centred on its box by align-items on .mk, not by a line-height
   guess. overflow:hidden is the backstop and nothing should reach it;
   a label that does is cut silently, so a new long one is checked by
   looking at the card, not by measuring it. */
.tcard .marks .lb{font-family:var(--pixel);font-size:16px;
  text-transform:uppercase;color:var(--ink-soft);
  min-width:0;
  /* UN NOM DE PAYS NE SE COUPE PAS, ET NE PASSE PAS À LA LIGNE.

     Cette règle a d'abord dit `nowrap` avec `overflow:hidden`, et elle
     imposait les abréviations : une demi-ligne fait 134 px, UNITED
     KINGDOM en veut 151, donc la carte imprimait UNITED KINGD. Elle a
     ensuite laissé le nom passer sur deux lignes — mais la case fait
     trente-deux pixels de haut, si bien que le N de TURKMENISTAN se
     retrouvait dessous, hors du cadre.

     C'est donc le LIBELLÉ qui s'adapte, mesuré une fois par lieu dans
     card.js : l'espacement se resserre d'abord, la taille descend
     ensuite par paliers entiers. Ici, on tient la ligne. */
  white-space:nowrap;line-height:1;
  overflow:visible}


/* THE RARITY'S ICON ON A CARD: the common box above, in its rarity's
   colour: the one touch of the rarity's colour a card carries
   (DA-regles) */

/* ---------- the photograph ----------
   THE SAME WINDOW EVERYWHERE, BY ARITHMETIC.

   .shot used to be flex:1 and nothing else, so it was whatever the
   other rows left over -- which meant the photograph's shape was
   decided by how tall its neighbours happened to be that day. On the
   Home page a page-footer rule called .foot reached into the card's
   own .foot, added 44px of margin, 16px of padding, a border and a
   taller line, and the photograph handed over all 66px: 348 x 205 in
   the row against 348 x 271 everywhere else.

   Every other row now states its height, so the space left is a
   subtraction and not a negotiation:

     508 content box - (80 head + 40 marks + 20 foot)
                     - 3 gaps of 16                            = 320

   .shot keeps flex:1 so any residue still lands on it rather than
   overflowing the card, but there is no residue to land: the window
   is 348 x 320 -- 344 x 316 inside its 2 px frame, the ratio the
   photographs are cut to (tools/photos-r2.py, FENETRE) -- in the
   reveal, in the Album and in the row on the Home. */
.tcard .shot{
  flex:1;min-height:0;
  background:var(--cream-deep);
  border:2px solid var(--line);
  position:relative;
  overflow:hidden;
}
/* The photograph is an <img> and not a background, because a framing
   needs a focal point and a zoom and a background can offer neither:
   object-position says which part of the picture is kept, and the scale
   zooms about that same point. See THE FRAMING in places.js. */
.tcard .shot .pic{
  display:block;width:100%;height:100%;
  object-fit:cover;
  /* the one thing on a card that is NOT pixel art */
  image-rendering:auto;
}
.tcard .shot .ph{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--pixel);font-size:48px;color:var(--line)}

/* ---------- the foot ----------
   THE FOOT HAS ONE HEIGHT ON EVERY CARD: 20, one line. Nothing above it
   moves with the length of a credit. */
.tcard .foot{display:flex;align-items:center;gap:16px;flex:none;height:20px;
  flex-wrap:nowrap;
  font-family:var(--pixel);font-size:16px;color:var(--ink-soft)}
/* UN CRÉDIT NE SE RACCOURCIT PAS, c'est la carte qui s'adapte : CC BY
   demande le nom tel qu'il est donné.

   IL N'EST NI COUPÉ NI MESURÉ. Une version précédente le laissait sur
   une ligne, en `nowrap` et en `overflow:hidden`, et confiait à une
   mesure en JavaScript le soin de choisir la taille : la mesure se
   trompait, et la carte imprimait « Noushin Naba ». Un nom à moitié
   écrit n'est pas un crédit. Le texte se replie donc, toujours, et le
   pied s'ouvre pour le recevoir -- jamais d'abréviation, jamais
   d'ellipse, jamais de coupe. */
/* LE CRÉDIT TIENT SUR UNE LIGNE (card.js, creditFit) : il se resserre,
   descend jusqu'à 12, et au-delà il est coupé par des points de
   suspension. Le crédit entier est sur la fiche du lieu, avec la licence
   et la page Commons (photoCredit). */
.tcard .foot .credit{flex:1;min-width:0;line-height:1;
  display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}
/* the camera stands for "Photo:" (2026-09): the author gets the room */
.tcard .foot .credit .icon{width:var(--sm-icon,16px);height:var(--sm-icon,16px);flex:none}
.tcard .foot .credit .who{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* the pack's photo camera, a mask like every icon (tools/png-to-svg.py) */
.icon-camera{--mk-src:url("assets/Icons/svg/Media_Camera_Photo_Shoot_2.svg");
  -webkit-mask-image:var(--mk-src);mask-image:var(--mk-src)}
/* nowrap: the number, "#856"; then the rarity's stars; then a Foil's
   little diamonds */
.tcard .foot .ident{flex:none;text-align:right;color:var(--ink);
  white-space:nowrap;display:flex;align-items:center;gap:6px;line-height:1}
/* THE STARS: at twice their native size, the pixel of the marks
   (--mk-icon, 32 on a card at its full size), cropped to their drawing
   (--iw x --ih grid pixels, RARITY_INK): centred on the number by
   their own middle, taller than the foot's line (up to 26) and never
   in the way -- nothing above them for 16, nothing below for 24 */
.tcard .foot .stars{display:flex;flex:none;position:relative}
.tcard .foot .stars .ri{display:block;vertical-align:0;
  width:calc(var(--mk-icon,32px) * var(--iw) / 16);
  height:calc(var(--mk-icon,32px) * var(--ih) / 16)}
.tcard .foot .ident .icon{width:var(--sm-icon,16px);height:var(--sm-icon,16px);flex:none}
/* THE FOIL'S DIAMONDS, after the stars and at their size: twice their
   native size, the same snapped pixel (--mk-icon, 32 on a card at its
   full size). Their drawing is 14 x 14 on its 16 grid, one empty pixel
   all round: the margins take it back, so they hold 28 x 28 and sit on
   the stars' line by their own middle, like them. */
.tcard .foot .ident .icon-affix-foil{width:var(--mk-icon,32px);height:var(--mk-icon,32px);
  margin:calc(var(--mk-icon,32px) * -2 / 32)}

/* A THUMBNAIL (card.js: s < 0.3): no credit -- a blur at that size --;
   its room is kept, so nothing else moves; the stars stay */
.tcard-tiny .tcard .foot .credit{visibility:hidden}

/* =====================================================================
   NO RARITY COLOUR ON A CARD. The border is the same sepia trait for
   every rarity (.lis) and the rarity mark is in ink; the rarity is told by its mark and its word. The six rarity colours
   (--r-*) still serve the interface around the cards -- filters,
   statistics -- never the card itself.
   ===================================================================== */

/* ---------- the duplicate stamp ----------
   Struck over the card after it was printed: a block of ink with the
   word knocked out of it, turned off the square, at 88% so the picture
   shows through the way it does under a real stamp. The die is clipped
   to a ragged outline because a rubber die never prints a clean
   rectangle — flat geometry, not a blur. */
.tcard .dup{
  position:absolute;top:34%;left:50%;
  transform:translate(-50%,-50%) rotate(-11deg);
  font-family:var(--pixel);font-size:32px;letter-spacing:4px;
  text-transform:uppercase;white-space:nowrap;
  color:var(--paper);background:var(--ink);
  padding:12px 16px 10px;
  opacity:0.88;pointer-events:none;z-index:3;
  clip-path:polygon(
    0.8% 5%, 13% 0%, 35% 3.5%, 58% 0.6%, 80% 3.5%, 99% 0.4%,
    100% 27%, 98.4% 52%, 100% 77%, 99.3% 97%,
    85% 100%, 62% 96.5%, 38% 100%, 15% 97%, 0.9% 99.6%,
    0% 75%, 1.6% 49%, 0% 23%);
}
.tcard .dup::before{content:"";position:absolute;inset:4px;
  border:2px solid var(--paper);opacity:0.5}

/* =====================================================================
   The back — one back, and it never changes
   It carries no information at all: no rarity, no continent, no
   country. Whatever you can read off a back is a leak, so there is
   nothing to read. The old coloured band is gone with the rest.
   ===================================================================== */
.tcard-back{
  width:400px;
  height:560px;
  border-radius:24px;
  /* the liseré: solid ink all the way round, drawn as the card's own
     padding so no paper and no graticule crosses it. A rule, not a
     band. */
  background:var(--ink);
  padding:3px;
  position:relative;
  overflow:hidden;
  box-sizing:border-box;
  display:flex;
  isolation:isolate;
}

/* ---------- the paper inside the liseré ----------
   A counted graticule at two weights: a step written as a fraction of
   the paper closes on all four sides, 20 by 28 with the heavy line
   every fourth one because 4 divides both. The last two layers are
   the closing rules on the right and at the foot, which a repeated
   tile never draws — it rules the start of each cell, never the end.

   THE COUNT IS WRITTEN ONCE, HERE, and the name on the back reads it
   too (THE NAME ON THE RULING, below): the ruling and the lettering are
   laid on the same measure, so they cannot drift apart. */
.tcard-back .paper{
  --cols:20;         /* fine cells across                    */
  --rows:28;         /* fine cells down                      */
  --every:4;         /* a heavy line every fourth fine one   */
  flex:1;
  border-radius:21px;
  /* THE ORIGINAL BACK IS PLAIN: a cream a step darker than the
     cards' paper. Every other ground is a theme (THE BACKS, below). */
  background-color:var(--cream-deep);
  /* the two things on it are placed against the ruling, not stacked in
     a flow: see the rose and the wordmark below */
  position:relative;
  overflow:hidden;
}

/* =====================================================================
   THE BACKS (cosmetics-rules.js, back.*) -- ONE BACK, ONE THEME.
   A pattern and its colours, thought together, and a name that says
   them; never the same pattern recoloured. On every back FOLIO MUNDI
   and the rose stay where they are, in the colour the theme gives them
   (.markblock color); only the ground under them changes. Each ground
   is a small pixel tile, 1 px rects with crispEdges, repeated.
     Original        plain, a cream a step darker than the cards' paper
   the free pool, earned by playing:
     Graph paper     the counted graticule the back always had
     Topography      a real relief, summits and valleys of different
                     sizes, one composition centred on the card
     Meridians       a globe seen from the front, centred on the rose,
                     meridians and parallels (one composition)
     Portolan        rhumb lines through a wind point on the rose, green
                     and red
     Cadastre        a cadastral plan, parcels and a road, centred with
                     even margins -- no parcel cut by an edge
     Kraft           plain kraft paper and its fibres
   the passes:
     Autumn leaves   a frame of maple, oak and beech leaves, rust,
                     ochre and brown, round a calm straw paper, the
                     rose and the name in dark brown ink
     Constellations  a night sky, a constellation drawn in brass, a
                     brass liseré and brass brackets in the corners
   the founder's:
     Binding         brown leather, a gilt double fillet, four fleurons
   and, drawn but not given yet (the passes to come, cosmetics-rules.js
   DRAFTS): Ocean (two rows of swell, two blues, on deep blue), Dunes,
   Forest, Volcano.
   cardBack({back}) puts the class on; nothing else moves.
   ===================================================================== */
.tcard-back .deco{display:none}
.tcard-back.back-autumn{background:#6E3B1F}
.tcard-back.back-autumn .paper{background-color:#F0DDAE;
  /* ONE COMPOSITION, not a tile (kept 2026-10-30): a frame of dead
     leaves, thickest in the corners, round a calm straw paper with a
     faint grain of fibres and about ten leaves fallen alone on it; the
     rose and the name, every back's, in dark brown ink, no leaf touching
     them (tools/backs-draw.py, autumn). The straw is this background
     colour: the drawing leaves it out. */
  background-image:url("assets/backs/autumn.svg");
  background-size:100% 100%;background-position:center;background-repeat:no-repeat}
.tcard-back.back-autumn .markblock{color:#24160D}
.tcard-back.back-ocean{background:#16385E}
.tcard-back.back-ocean .paper{background-color:#24578C;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2740%27 height=%2720%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%2725%27 y=%272%27 width=%2711%27 height=%271%27 fill=%27%236A9BCB%27/%3E%3Crect x=%2722%27 y=%273%27 width=%273%27 height=%271%27 fill=%27%236A9BCB%27/%3E%3Crect x=%2736%27 y=%273%27 width=%273%27 height=%271%27 fill=%27%236A9BCB%27/%3E%3Crect x=%270%27 y=%274%27 width=%272%27 height=%271%27 fill=%27%236A9BCB%27/%3E%3Crect x=%2719%27 y=%274%27 width=%273%27 height=%271%27 fill=%27%236A9BCB%27/%3E%3Crect x=%2739%27 y=%274%27 width=%271%27 height=%271%27 fill=%27%236A9BCB%27/%3E%3Crect x=%272%27 y=%275%27 width=%273%27 height=%271%27 fill=%27%236A9BCB%27/%3E%3Crect x=%2716%27 y=%275%27 width=%273%27 height=%271%27 fill=%27%236A9BCB%27/%3E%3Crect x=%275%27 y=%276%27 width=%2711%27 height=%271%27 fill=%27%236A9BCB%27/%3E%3Crect x=%275%27 y=%2712%27 width=%2711%27 height=%271%27 fill=%27%233F78B0%27/%3E%3Crect x=%272%27 y=%2713%27 width=%273%27 height=%271%27 fill=%27%233F78B0%27/%3E%3Crect x=%2716%27 y=%2713%27 width=%273%27 height=%271%27 fill=%27%233F78B0%27/%3E%3Crect x=%270%27 y=%2714%27 width=%272%27 height=%271%27 fill=%27%233F78B0%27/%3E%3Crect x=%2719%27 y=%2714%27 width=%273%27 height=%271%27 fill=%27%233F78B0%27/%3E%3Crect x=%2739%27 y=%2714%27 width=%271%27 height=%271%27 fill=%27%233F78B0%27/%3E%3Crect x=%2722%27 y=%2715%27 width=%273%27 height=%271%27 fill=%27%233F78B0%27/%3E%3Crect x=%2736%27 y=%2715%27 width=%273%27 height=%271%27 fill=%27%233F78B0%27/%3E%3Crect x=%2725%27 y=%2716%27 width=%2711%27 height=%271%27 fill=%27%233F78B0%27/%3E%3C/svg%3E");
  background-size:40px 20px;background-position:7px 0;background-repeat:repeat}
.tcard-back.back-ocean .markblock{color:#FFF8E7}
.tcard-back.back-constellations{background:#C39A28}
.tcard-back.back-constellations .paper{background-color:#141C33;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27120%27 height=%27120%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%2731%27 y=%274%27 width=%271%27 height=%271%27 fill=%27%23E9E2CC%27/%3E%3Crect x=%2788%27 y=%276%27 width=%271%27 height=%271%27 fill=%27%23E9E2CC%27/%3E%3Crect x=%277%27 y=%279%27 width=%271%27 height=%271%27 fill=%27%23E9E2CC%27/%3E%3Crect x=%2752%27 y=%2716%27 width=%271%27 height=%271%27 fill=%27%23E9E2CC%27/%3E%3Crect x=%2751%27 y=%2717%27 width=%271%27 height=%271%27 fill=%27%23E9E2CC%27/%3E%3Crect x=%2752%27 y=%2717%27 width=%271%27 height=%271%27 fill=%27%23E8C65A%27/%3E%3Crect x=%2753%27 y=%2717%27 width=%271%27 height=%271%27 fill=%27%23E9E2CC%27/%3E%3Crect x=%2752%27 y=%2718%27 width=%271%27 height=%271%27 fill=%27%23E9E2CC%27/%3E%3Crect x=%27109%27 y=%2721%27 width=%271%27 height=%271%27 fill=%27%23E9E2CC%27/%3E%3Crect x=%2767%27 y=%2738%27 width=%271%27 height=%271%27 fill=%27%23E8C65A%27/%3E%3Crect x=%2767%27 y=%2739%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2768%27 y=%2740%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2768%27 y=%2741%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2768%27 y=%2742%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2769%27 y=%2743%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2715%27 y=%2744%27 width=%271%27 height=%271%27 fill=%27%23E9E2CC%27/%3E%3Crect x=%2769%27 y=%2744%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2769%27 y=%2745%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2770%27 y=%2746%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2770%27 y=%2747%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2771%27 y=%2748%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2771%27 y=%2749%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2771%27 y=%2750%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2772%27 y=%2751%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2798%27 y=%2751%27 width=%271%27 height=%271%27 fill=%27%23E8C65A%27/%3E%3Crect x=%2772%27 y=%2752%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2797%27 y=%2752%27 width=%272%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2772%27 y=%2753%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2796%27 y=%2753%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2799%27 y=%2753%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2773%27 y=%2754%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2795%27 y=%2754%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2799%27 y=%2754%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2773%27 y=%2755%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2794%27 y=%2755%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27100%27 y=%2755%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2773%27 y=%2756%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2793%27 y=%2756%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27100%27 y=%2756%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2774%27 y=%2757%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2793%27 y=%2757%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27100%27 y=%2757%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2774%27 y=%2758%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2792%27 y=%2758%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27101%27 y=%2758%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2774%27 y=%2759%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2791%27 y=%2759%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27101%27 y=%2759%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2775%27 y=%2760%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2790%27 y=%2760%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27102%27 y=%2760%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2775%27 y=%2761%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2789%27 y=%2761%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27102%27 y=%2761%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2741%27 y=%2762%27 width=%271%27 height=%271%27 fill=%27%23E9E2CC%27/%3E%3Crect x=%2775%27 y=%2762%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2788%27 y=%2762%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27102%27 y=%2762%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2740%27 y=%2763%27 width=%271%27 height=%271%27 fill=%27%23E9E2CC%27/%3E%3Crect x=%2741%27 y=%2763%27 width=%271%27 height=%271%27 fill=%27%23E8C65A%27/%3E%3Crect x=%2742%27 y=%2763%27 width=%271%27 height=%271%27 fill=%27%23E9E2CC%27/%3E%3Crect x=%2776%27 y=%2763%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2787%27 y=%2763%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27103%27 y=%2763%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2741%27 y=%2764%27 width=%271%27 height=%271%27 fill=%27%23E9E2CC%27/%3E%3Crect x=%2776%27 y=%2764%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2786%27 y=%2764%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27103%27 y=%2764%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2777%27 y=%2765%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2785%27 y=%2765%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27104%27 y=%2765%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2777%27 y=%2766%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2784%27 y=%2766%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27104%27 y=%2766%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2777%27 y=%2767%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2784%27 y=%2767%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27104%27 y=%2767%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2778%27 y=%2768%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2783%27 y=%2768%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27105%27 y=%2768%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2778%27 y=%2769%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2782%27 y=%2769%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27105%27 y=%2769%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2778%27 y=%2770%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2781%27 y=%2770%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27106%27 y=%2770%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2779%27 y=%2771%27 width=%272%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27106%27 y=%2771%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2779%27 y=%2772%27 width=%271%27 height=%271%27 fill=%27%23E8C65A%27/%3E%3Crect x=%27107%27 y=%2772%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27107%27 y=%2773%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27107%27 y=%2774%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27108%27 y=%2775%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27108%27 y=%2776%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27109%27 y=%2777%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%276%27 y=%2778%27 width=%271%27 height=%271%27 fill=%27%23E9E2CC%27/%3E%3Crect x=%27109%27 y=%2778%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27109%27 y=%2779%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27110%27 y=%2780%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27110%27 y=%2781%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27111%27 y=%2782%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27111%27 y=%2783%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27111%27 y=%2784%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27112%27 y=%2785%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27112%27 y=%2786%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27113%27 y=%2787%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27113%27 y=%2788%27 width=%271%27 height=%271%27 fill=%27%23E8C65A%27/%3E%3Crect x=%27112%27 y=%2789%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27111%27 y=%2790%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2770%27 y=%2791%27 width=%271%27 height=%271%27 fill=%27%23E9E2CC%27/%3E%3Crect x=%27110%27 y=%2791%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27109%27 y=%2792%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27109%27 y=%2793%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27108%27 y=%2794%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27107%27 y=%2795%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27106%27 y=%2796%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2727%27 y=%2797%27 width=%271%27 height=%271%27 fill=%27%23E9E2CC%27/%3E%3Crect x=%27105%27 y=%2797%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27104%27 y=%2798%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27103%27 y=%2799%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27102%27 y=%27100%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27102%27 y=%27101%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27101%27 y=%27102%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%27100%27 y=%27103%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2758%27 y=%27104%27 width=%271%27 height=%271%27 fill=%27%23E9E2CC%27/%3E%3Crect x=%2799%27 y=%27104%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2798%27 y=%27105%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2797%27 y=%27106%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2796%27 y=%27107%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2795%27 y=%27108%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2795%27 y=%27109%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2794%27 y=%27110%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2792%27 y=%27111%27 width=%271%27 height=%271%27 fill=%27%23E9E2CC%27/%3E%3Crect x=%2793%27 y=%27111%27 width=%271%27 height=%271%27 fill=%27%236E5A2A%27/%3E%3Crect x=%2791%27 y=%27112%27 width=%271%27 height=%271%27 fill=%27%23E9E2CC%27/%3E%3Crect x=%2792%27 y=%27112%27 width=%271%27 height=%271%27 fill=%27%23E8C65A%27/%3E%3Crect x=%2793%27 y=%27112%27 width=%271%27 height=%271%27 fill=%27%23E9E2CC%27/%3E%3Crect x=%2792%27 y=%27113%27 width=%271%27 height=%271%27 fill=%27%23E9E2CC%27/%3E%3C/svg%3E");
  background-size:120px 120px;background-position:left top;background-repeat:repeat}
.tcard-back.back-constellations .markblock{color:#E8C65A}
.tcard-back.back-constellations .deco{display:block;position:absolute;inset:14px;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2728%27 height=%2728%27 shape-rendering=%27crispEdges%27%3E%3Cpath d=%27M0 0H28V4H4V28H0Z%27 fill=%27%23C39A28%27/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2728%27 height=%2728%27 shape-rendering=%27crispEdges%27%3E%3Cpath d=%27M0 0H28V28H24V4H0Z%27 fill=%27%23C39A28%27/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2728%27 height=%2728%27 shape-rendering=%27crispEdges%27%3E%3Cpath d=%27M0 0H4V24H28V28H0Z%27 fill=%27%23C39A28%27/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2728%27 height=%2728%27 shape-rendering=%27crispEdges%27%3E%3Cpath d=%27M24 0H28V28H0V24H24Z%27 fill=%27%23C39A28%27/%3E%3C/svg%3E");
  background-position:left top, right top, left bottom, right bottom;
  background-size:28px 28px;background-repeat:no-repeat}
.tcard-back.back-dunes{background:#8C6C0B}
.tcard-back.back-dunes .paper{background-color:#E6C98F;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2760%27 height=%2730%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%2748%27 y=%273%27 width=%273%27 height=%271%27 fill=%27%23B8914F%27/%3E%3Crect x=%2744%27 y=%274%27 width=%274%27 height=%271%27 fill=%27%23B8914F%27/%3E%3Crect x=%2748%27 y=%274%27 width=%273%27 height=%271%27 fill=%27%23D2B274%27/%3E%3Crect x=%2751%27 y=%274%27 width=%273%27 height=%271%27 fill=%27%23B8914F%27/%3E%3Crect x=%2741%27 y=%275%27 width=%273%27 height=%271%27 fill=%27%23B8914F%27/%3E%3Crect x=%2744%27 y=%275%27 width=%274%27 height=%271%27 fill=%27%23D2B274%27/%3E%3Crect x=%2751%27 y=%275%27 width=%273%27 height=%271%27 fill=%27%23D2B274%27/%3E%3Crect x=%2754%27 y=%275%27 width=%273%27 height=%271%27 fill=%27%23B8914F%27/%3E%3Crect x=%2738%27 y=%276%27 width=%273%27 height=%271%27 fill=%27%23B8914F%27/%3E%3Crect x=%2741%27 y=%276%27 width=%273%27 height=%271%27 fill=%27%23D2B274%27/%3E%3Crect x=%2754%27 y=%276%27 width=%273%27 height=%271%27 fill=%27%23D2B274%27/%3E%3Crect x=%2757%27 y=%276%27 width=%271%27 height=%271%27 fill=%27%23B8914F%27/%3E%3Crect x=%2733%27 y=%277%27 width=%275%27 height=%271%27 fill=%27%23B8914F%27/%3E%3Crect x=%2738%27 y=%277%27 width=%273%27 height=%271%27 fill=%27%23D2B274%27/%3E%3Crect x=%2757%27 y=%277%27 width=%271%27 height=%271%27 fill=%27%23D2B274%27/%3E%3Crect x=%2758%27 y=%277%27 width=%272%27 height=%271%27 fill=%27%23B8914F%27/%3E%3Crect x=%270%27 y=%278%27 width=%271%27 height=%271%27 fill=%27%23B8914F%27/%3E%3Crect x=%2728%27 y=%278%27 width=%275%27 height=%271%27 fill=%27%23B8914F%27/%3E%3Crect x=%2733%27 y=%278%27 width=%275%27 height=%271%27 fill=%27%23D2B274%27/%3E%3Crect x=%2758%27 y=%278%27 width=%272%27 height=%271%27 fill=%27%23D2B274%27/%3E%3Crect x=%270%27 y=%279%27 width=%271%27 height=%271%27 fill=%27%23D2B274%27/%3E%3Crect x=%271%27 y=%279%27 width=%272%27 height=%271%27 fill=%27%23B8914F%27/%3E%3Crect x=%2723%27 y=%279%27 width=%275%27 height=%271%27 fill=%27%23B8914F%27/%3E%3Crect x=%2728%27 y=%279%27 width=%275%27 height=%271%27 fill=%27%23D2B274%27/%3E%3Crect x=%271%27 y=%2710%27 width=%272%27 height=%271%27 fill=%27%23D2B274%27/%3E%3Crect x=%273%27 y=%2710%27 width=%271%27 height=%271%27 fill=%27%23B8914F%27/%3E%3Crect x=%2720%27 y=%2710%27 width=%273%27 height=%271%27 fill=%27%23B8914F%27/%3E%3Crect x=%2723%27 y=%2710%27 width=%275%27 height=%271%27 fill=%27%23D2B274%27/%3E%3Crect x=%273%27 y=%2711%27 width=%271%27 height=%271%27 fill=%27%23D2B274%27/%3E%3Crect x=%274%27 y=%2711%27 width=%273%27 height=%271%27 fill=%27%23B8914F%27/%3E%3Crect x=%2717%27 y=%2711%27 width=%273%27 height=%271%27 fill=%27%23B8914F%27/%3E%3Crect x=%2720%27 y=%2711%27 width=%273%27 height=%271%27 fill=%27%23D2B274%27/%3E%3Crect x=%274%27 y=%2712%27 width=%273%27 height=%271%27 fill=%27%23D2B274%27/%3E%3Crect x=%277%27 y=%2712%27 width=%273%27 height=%271%27 fill=%27%23B8914F%27/%3E%3Crect x=%2713%27 y=%2712%27 width=%274%27 height=%271%27 fill=%27%23B8914F%27/%3E%3Crect x=%2717%27 y=%2712%27 width=%273%27 height=%271%27 fill=%27%23D2B274%27/%3E%3Crect x=%277%27 y=%2713%27 width=%273%27 height=%271%27 fill=%27%23D2B274%27/%3E%3Crect x=%2710%27 y=%2713%27 width=%273%27 height=%271%27 fill=%27%23B8914F%27/%3E%3Crect x=%2713%27 y=%2713%27 width=%274%27 height=%271%27 fill=%27%23D2B274%27/%3E%3Crect x=%2710%27 y=%2714%27 width=%273%27 height=%271%27 fill=%27%23D2B274%27/%3E%3Crect x=%2715%27 y=%2720%27 width=%2711%27 height=%271%27 fill=%27%23C9A461%27/%3E%3Crect x=%2711%27 y=%2721%27 width=%274%27 height=%271%27 fill=%27%23C9A461%27/%3E%3Crect x=%2726%27 y=%2721%27 width=%274%27 height=%271%27 fill=%27%23C9A461%27/%3E%3Crect x=%277%27 y=%2722%27 width=%274%27 height=%271%27 fill=%27%23C9A461%27/%3E%3Crect x=%2730%27 y=%2722%27 width=%274%27 height=%271%27 fill=%27%23C9A461%27/%3E%3Crect x=%274%27 y=%2723%27 width=%273%27 height=%271%27 fill=%27%23C9A461%27/%3E%3Crect x=%2734%27 y=%2723%27 width=%273%27 height=%271%27 fill=%27%23C9A461%27/%3E%3Crect x=%270%27 y=%2724%27 width=%274%27 height=%271%27 fill=%27%23C9A461%27/%3E%3Crect x=%2737%27 y=%2724%27 width=%274%27 height=%271%27 fill=%27%23C9A461%27/%3E%3Crect x=%2741%27 y=%2725%27 width=%274%27 height=%271%27 fill=%27%23C9A461%27/%3E%3Crect x=%2756%27 y=%2725%27 width=%274%27 height=%271%27 fill=%27%23C9A461%27/%3E%3Crect x=%2745%27 y=%2726%27 width=%2711%27 height=%271%27 fill=%27%23C9A461%27/%3E%3C/svg%3E");
  background-size:60px 30px;background-position:-4px 0;background-repeat:repeat}
.tcard-back.back-dunes .markblock{color:#5B3A1F}
.tcard-back.back-forest{background:#1E3A18}
.tcard-back.back-forest .paper{background-color:#4A7A3C;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2728%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%275%27 y=%272%27 width=%271%27 height=%271%27 fill=%27%232E5A26%27/%3E%3Crect x=%274%27 y=%273%27 width=%273%27 height=%271%27 fill=%27%232E5A26%27/%3E%3Crect x=%274%27 y=%274%27 width=%273%27 height=%271%27 fill=%27%232E5A26%27/%3E%3Crect x=%273%27 y=%275%27 width=%275%27 height=%271%27 fill=%27%232E5A26%27/%3E%3Crect x=%273%27 y=%276%27 width=%275%27 height=%271%27 fill=%27%232E5A26%27/%3E%3Crect x=%272%27 y=%277%27 width=%277%27 height=%271%27 fill=%27%232E5A26%27/%3E%3Crect x=%272%27 y=%278%27 width=%277%27 height=%271%27 fill=%27%232E5A26%27/%3E%3Crect x=%275%27 y=%279%27 width=%271%27 height=%271%27 fill=%27%233B2A1A%27/%3E%3Crect x=%2717%27 y=%2716%27 width=%271%27 height=%271%27 fill=%27%2336652C%27/%3E%3Crect x=%2716%27 y=%2717%27 width=%273%27 height=%271%27 fill=%27%2336652C%27/%3E%3Crect x=%2716%27 y=%2718%27 width=%273%27 height=%271%27 fill=%27%2336652C%27/%3E%3Crect x=%2715%27 y=%2719%27 width=%275%27 height=%271%27 fill=%27%2336652C%27/%3E%3Crect x=%2715%27 y=%2720%27 width=%275%27 height=%271%27 fill=%27%2336652C%27/%3E%3Crect x=%2714%27 y=%2721%27 width=%277%27 height=%271%27 fill=%27%2336652C%27/%3E%3Crect x=%2714%27 y=%2722%27 width=%277%27 height=%271%27 fill=%27%2336652C%27/%3E%3Crect x=%2717%27 y=%2723%27 width=%271%27 height=%271%27 fill=%27%233B2A1A%27/%3E%3C/svg%3E");
  background-size:24px 28px;background-position:left top;background-repeat:repeat}
.tcard-back.back-forest .markblock{color:#FFF8E7}
.tcard-back.back-volcano{background:#141210}
.tcard-back.back-volcano .paper{background-color:#2B2422;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2748%27 height=%2748%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%2712%27 y=%2711%27 width=%271%27 height=%271%27 fill=%27%23E8913A%27/%3E%3Crect x=%270%27 y=%2712%27 width=%272%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2711%27 y=%2712%27 width=%271%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2713%27 y=%2712%27 width=%271%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%272%27 y=%2713%27 width=%272%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%279%27 y=%2713%27 width=%272%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2714%27 y=%2713%27 width=%271%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%274%27 y=%2714%27 width=%272%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%278%27 y=%2714%27 width=%271%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2715%27 y=%2714%27 width=%271%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%276%27 y=%2715%27 width=%272%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2716%27 y=%2715%27 width=%272%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2718%27 y=%2716%27 width=%271%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2726%27 y=%2716%27 width=%271%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2727%27 y=%2716%27 width=%271%27 height=%271%27 fill=%27%23E8913A%27/%3E%3Crect x=%2719%27 y=%2717%27 width=%271%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2722%27 y=%2717%27 width=%274%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2728%27 y=%2717%27 width=%271%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2720%27 y=%2718%27 width=%272%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2729%27 y=%2718%27 width=%271%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2729%27 y=%2719%27 width=%271%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2730%27 y=%2720%27 width=%271%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2731%27 y=%2721%27 width=%271%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2732%27 y=%2722%27 width=%271%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2739%27 y=%2722%27 width=%271%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2740%27 y=%2722%27 width=%271%27 height=%271%27 fill=%27%23E8913A%27/%3E%3Crect x=%2732%27 y=%2723%27 width=%271%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2735%27 y=%2723%27 width=%274%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2741%27 y=%2723%27 width=%272%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2733%27 y=%2724%27 width=%272%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2743%27 y=%2724%27 width=%271%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2744%27 y=%2725%27 width=%271%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2745%27 y=%2726%27 width=%272%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%2747%27 y=%2727%27 width=%271%27 height=%271%27 fill=%27%23B8432C%27/%3E%3Crect x=%278%27 y=%2735%27 width=%272%27 height=%271%27 fill=%27%238E3423%27/%3E%3Crect x=%275%27 y=%2736%27 width=%273%27 height=%271%27 fill=%27%238E3423%27/%3E%3Crect x=%2710%27 y=%2736%27 width=%271%27 height=%271%27 fill=%27%238E3423%27/%3E%3Crect x=%272%27 y=%2737%27 width=%273%27 height=%271%27 fill=%27%238E3423%27/%3E%3Crect x=%2711%27 y=%2737%27 width=%271%27 height=%271%27 fill=%27%238E3423%27/%3E%3Crect x=%270%27 y=%2738%27 width=%272%27 height=%271%27 fill=%27%238E3423%27/%3E%3Crect x=%2712%27 y=%2738%27 width=%271%27 height=%271%27 fill=%27%238E3423%27/%3E%3Crect x=%2713%27 y=%2739%27 width=%271%27 height=%271%27 fill=%27%238E3423%27/%3E%3Crect x=%2722%27 y=%2739%27 width=%273%27 height=%271%27 fill=%27%238E3423%27/%3E%3Crect x=%2714%27 y=%2740%27 width=%271%27 height=%271%27 fill=%27%238E3423%27/%3E%3Crect x=%2718%27 y=%2740%27 width=%274%27 height=%271%27 fill=%27%238E3423%27/%3E%3Crect x=%2725%27 y=%2740%27 width=%271%27 height=%271%27 fill=%27%238E3423%27/%3E%3Crect x=%2715%27 y=%2741%27 width=%271%27 height=%271%27 fill=%27%23E8913A%27/%3E%3Crect x=%2716%27 y=%2741%27 width=%272%27 height=%271%27 fill=%27%238E3423%27/%3E%3Crect x=%2726%27 y=%2741%27 width=%271%27 height=%271%27 fill=%27%238E3423%27/%3E%3Crect x=%2727%27 y=%2742%27 width=%272%27 height=%271%27 fill=%27%238E3423%27/%3E%3Crect x=%2737%27 y=%2742%27 width=%274%27 height=%271%27 fill=%27%238E3423%27/%3E%3Crect x=%2729%27 y=%2743%27 width=%271%27 height=%271%27 fill=%27%238E3423%27/%3E%3Crect x=%2735%27 y=%2743%27 width=%272%27 height=%271%27 fill=%27%238E3423%27/%3E%3Crect x=%2741%27 y=%2743%27 width=%274%27 height=%271%27 fill=%27%238E3423%27/%3E%3Crect x=%2730%27 y=%2744%27 width=%271%27 height=%271%27 fill=%27%238E3423%27/%3E%3Crect x=%2733%27 y=%2744%27 width=%272%27 height=%271%27 fill=%27%238E3423%27/%3E%3Crect x=%2745%27 y=%2744%27 width=%273%27 height=%271%27 fill=%27%238E3423%27/%3E%3Crect x=%2731%27 y=%2745%27 width=%271%27 height=%271%27 fill=%27%23E8913A%27/%3E%3Crect x=%2732%27 y=%2745%27 width=%271%27 height=%271%27 fill=%27%238E3423%27/%3E%3C/svg%3E");
  background-size:48px 48px;background-position:-2px 0;background-repeat:repeat}
.tcard-back.back-volcano .markblock{color:#F0C9A0}
/* CENTRED ON THE CARD'S AXIS (2026-09): a tile laid from the paper's
   top left corner falls where the 394 of the paper cuts it. Each ground
   is laid so that its own axis is the card's -- measured on the drawn
   back: Portolan and Meridians to the pixel, Ocean, Dunes and Volcano
   to half a pixel (a drawing symmetric about a pixel's middle, on an
   axis between two pixels), the compositions by construction. */
/* THE FREE POOL: earned by playing -- the map-maker's grounds */
.tcard-back.back-contours{background:#5B3A1F}
.tcard-back.back-contours .paper{background-color:#F4EAD3;
  /* ONE COMPOSITION, not a tile: the whole paper, centred (tools/backs-draw.py) */
  background-image:url("assets/backs/contours.svg");
  background-size:100% 100%;background-position:center;background-repeat:no-repeat}
.tcard-back.back-contours .markblock{color:#5B3A1F}
.tcard-back.back-meridians{background:#2F3E50}
.tcard-back.back-meridians .paper{background-color:#EEF1EC;
  /* ONE COMPOSITION, not a tile: a globe seen from the front, centred on
     the rose (tools/backs-draw.py, meridians) */
  background-image:url("assets/backs/meridians.svg");
  background-size:100% 100%;background-position:center;background-repeat:no-repeat}
.tcard-back.back-meridians .markblock{color:#2F3E50}
.tcard-back.back-portolan{background:#3B2A1A}
.tcard-back.back-portolan .paper{background-color:#EFE3C4;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2764%27 height=%2764%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%270%27 y=%270%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%270%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2763%27 y=%270%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%271%27 y=%271%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%271%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2762%27 y=%271%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%272%27 y=%272%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%272%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2761%27 y=%272%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%273%27 y=%273%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%273%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2760%27 y=%273%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%274%27 y=%274%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%274%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2759%27 y=%274%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%275%27 y=%275%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%275%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2758%27 y=%275%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%276%27 y=%276%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%276%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2757%27 y=%276%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%277%27 y=%277%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%277%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2756%27 y=%277%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%278%27 y=%278%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%278%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2755%27 y=%278%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%279%27 y=%279%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%279%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2754%27 y=%279%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2710%27 y=%2710%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2710%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2753%27 y=%2710%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2711%27 y=%2711%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2711%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2752%27 y=%2711%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2712%27 y=%2712%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2712%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2751%27 y=%2712%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2713%27 y=%2713%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2713%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2750%27 y=%2713%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2714%27 y=%2714%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2714%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2749%27 y=%2714%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2715%27 y=%2715%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2715%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2748%27 y=%2715%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2716%27 y=%2716%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2716%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2747%27 y=%2716%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2717%27 y=%2717%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2717%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2746%27 y=%2717%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2718%27 y=%2718%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2718%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2745%27 y=%2718%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2719%27 y=%2719%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2719%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2744%27 y=%2719%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2720%27 y=%2720%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2720%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2743%27 y=%2720%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2721%27 y=%2721%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2721%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2742%27 y=%2721%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2722%27 y=%2722%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2722%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2741%27 y=%2722%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2723%27 y=%2723%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2723%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2740%27 y=%2723%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2724%27 y=%2724%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2724%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2739%27 y=%2724%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2725%27 y=%2725%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2725%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2738%27 y=%2725%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2726%27 y=%2726%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2726%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2737%27 y=%2726%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2727%27 y=%2727%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2727%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2736%27 y=%2727%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2728%27 y=%2728%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2728%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2735%27 y=%2728%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2729%27 y=%2729%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2729%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2734%27 y=%2729%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2730%27 y=%2730%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2730%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2733%27 y=%2730%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%270%27 y=%2731%27 width=%2731%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2731%27 y=%2731%27 width=%272%27 height=%271%27 fill=%27%233B2A1A%27/%3E%3Crect x=%2733%27 y=%2731%27 width=%2731%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%270%27 y=%2732%27 width=%2731%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2731%27 y=%2732%27 width=%272%27 height=%271%27 fill=%27%233B2A1A%27/%3E%3Crect x=%2733%27 y=%2732%27 width=%2731%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2730%27 y=%2733%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2733%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2733%27 y=%2733%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2729%27 y=%2734%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2734%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2734%27 y=%2734%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2728%27 y=%2735%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2735%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2735%27 y=%2735%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2727%27 y=%2736%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2736%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2736%27 y=%2736%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2726%27 y=%2737%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2737%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2737%27 y=%2737%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2725%27 y=%2738%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2738%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2738%27 y=%2738%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2724%27 y=%2739%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2739%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2739%27 y=%2739%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2723%27 y=%2740%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2740%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2740%27 y=%2740%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2722%27 y=%2741%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2741%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2741%27 y=%2741%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2721%27 y=%2742%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2742%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2742%27 y=%2742%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2720%27 y=%2743%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2743%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2743%27 y=%2743%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2719%27 y=%2744%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2744%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2744%27 y=%2744%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2718%27 y=%2745%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2745%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2745%27 y=%2745%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2717%27 y=%2746%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2746%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2746%27 y=%2746%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2716%27 y=%2747%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2747%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2747%27 y=%2747%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2715%27 y=%2748%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2748%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2748%27 y=%2748%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2714%27 y=%2749%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2749%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2749%27 y=%2749%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2713%27 y=%2750%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2750%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2750%27 y=%2750%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2712%27 y=%2751%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2751%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2751%27 y=%2751%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2711%27 y=%2752%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2752%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2752%27 y=%2752%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2710%27 y=%2753%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2753%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2753%27 y=%2753%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%279%27 y=%2754%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2754%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2754%27 y=%2754%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%278%27 y=%2755%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2755%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2755%27 y=%2755%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%277%27 y=%2756%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2756%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2756%27 y=%2756%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%276%27 y=%2757%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2757%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2757%27 y=%2757%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%275%27 y=%2758%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2758%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2758%27 y=%2758%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%274%27 y=%2759%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2759%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2759%27 y=%2759%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%273%27 y=%2760%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2760%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2760%27 y=%2760%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%272%27 y=%2761%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2761%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2761%27 y=%2761%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%271%27 y=%2762%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2762%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2762%27 y=%2762%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%270%27 y=%2763%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3Crect x=%2731%27 y=%2763%27 width=%272%27 height=%271%27 fill=%27%235E8A4E%27/%3E%3Crect x=%2763%27 y=%2763%27 width=%271%27 height=%271%27 fill=%27%23B55A45%27/%3E%3C/svg%3E");
  background-size:64px 64px;background-position:37px 43px;background-repeat:repeat}
.tcard-back.back-portolan .markblock{color:#3B2A1A}
/* THE WIND POINT ON THE ROSE (2026-09). The tile is symmetric about its
   middle, the corner of pixels 31 and 32 across and down: the diagonals
   mirror each other there, the north-south and east-west rhumbs are two
   pixels wide on either side of it. The rose's middle is the paper's
   (197, 139), on a corner of pixels too; 197 - 32 = 165 = 37 + 2 x 64
   and 139 - 32 = 107 = 43 + 64: a wind point of the tile is on the rose,
   and the ground is symmetric about the card's axis, to the pixel. */
.tcard-back.back-cadastre{background:#4A3A28}
.tcard-back.back-cadastre .paper{background-color:#F2EBDD;
  /* ONE COMPOSITION, not a tile: the whole paper, centred (tools/backs-draw.py) */
  background-image:url("assets/backs/cadastre.svg");
  background-size:100% 100%;background-position:center;background-repeat:no-repeat}
.tcard-back.back-cadastre .markblock{color:#4A3A28}
.tcard-back.back-kraft{background:#6B4A2E}
.tcard-back.back-kraft .paper{background-color:#C19A6B;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2748%27 height=%2748%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%2722%27 y=%271%27 width=%272%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%2714%27 y=%272%27 width=%271%27 height=%271%27 fill=%27%23D1AE82%27/%3E%3Crect x=%274%27 y=%273%27 width=%271%27 height=%271%27 fill=%27%23D1AE82%27/%3E%3Crect x=%279%27 y=%275%27 width=%272%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%2711%27 y=%276%27 width=%272%27 height=%271%27 fill=%27%23D1AE82%27/%3E%3Crect x=%2739%27 y=%277%27 width=%272%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%2718%27 y=%278%27 width=%272%27 height=%271%27 fill=%27%23D1AE82%27/%3E%3Crect x=%2720%27 y=%279%27 width=%271%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%2726%27 y=%2710%27 width=%272%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%2737%27 y=%2711%27 width=%272%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%277%27 y=%2714%27 width=%271%27 height=%271%27 fill=%27%23D1AE82%27/%3E%3Crect x=%2742%27 y=%2714%27 width=%272%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%2744%27 y=%2715%27 width=%272%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%275%27 y=%2717%27 width=%271%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%2723%27 y=%2719%27 width=%271%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%2736%27 y=%2719%27 width=%271%27 height=%271%27 fill=%27%23D1AE82%27/%3E%3Crect x=%2736%27 y=%2720%27 width=%271%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%2720%27 y=%2721%27 width=%272%27 height=%271%27 fill=%27%23D1AE82%27/%3E%3Crect x=%2712%27 y=%2723%27 width=%272%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%279%27 y=%2726%27 width=%272%27 height=%271%27 fill=%27%23D1AE82%27/%3E%3Crect x=%2718%27 y=%2726%27 width=%272%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%2727%27 y=%2726%27 width=%272%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%2731%27 y=%2726%27 width=%271%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%2735%27 y=%2727%27 width=%271%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%2720%27 y=%2729%27 width=%271%27 height=%271%27 fill=%27%23D1AE82%27/%3E%3Crect x=%2725%27 y=%2731%27 width=%272%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%2733%27 y=%2731%27 width=%271%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%273%27 y=%2732%27 width=%272%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%274%27 y=%2734%27 width=%272%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%274%27 y=%2735%27 width=%271%27 height=%271%27 fill=%27%23D1AE82%27/%3E%3Crect x=%2725%27 y=%2735%27 width=%271%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%2727%27 y=%2735%27 width=%271%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%273%27 y=%2736%27 width=%271%27 height=%271%27 fill=%27%23D1AE82%27/%3E%3Crect x=%274%27 y=%2736%27 width=%271%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%2741%27 y=%2736%27 width=%271%27 height=%271%27 fill=%27%23D1AE82%27/%3E%3Crect x=%2731%27 y=%2737%27 width=%272%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%2718%27 y=%2738%27 width=%272%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%2722%27 y=%2743%27 width=%271%27 height=%271%27 fill=%27%23A9835A%27/%3E%3Crect x=%2731%27 y=%2743%27 width=%272%27 height=%271%27 fill=%27%23D1AE82%27/%3E%3Crect x=%2718%27 y=%2745%27 width=%271%27 height=%271%27 fill=%27%23A9835A%27/%3E%3C/svg%3E");
  background-size:48px 48px;background-position:left top;background-repeat:repeat}
.tcard-back.back-kraft .markblock{color:#3B2A1A}
/* THE FOUNDER'S: an old book's binding -- brown leather, its grain,
   a gilt double fillet round the paper and a small gilt fleuron in
   each corner; the name and the rose in gold. The most precious of
   the backs, and still a quiet one: one line of gilding, four
   flowers, nothing else. */
.tcard-back.back-binding{background:#2E1A10}
.tcard-back.back-binding .paper{background-color:#5A3521;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%276%27 y=%270%27 width=%271%27 height=%271%27 fill=%27%23683F29%27/%3E%3Crect x=%2710%27 y=%270%27 width=%271%27 height=%271%27 fill=%27%23683F29%27/%3E%3Crect x=%2715%27 y=%270%27 width=%271%27 height=%271%27 fill=%27%23683F29%27/%3E%3Crect x=%274%27 y=%271%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%275%27 y=%272%27 width=%272%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%274%27 y=%273%27 width=%271%27 height=%271%27 fill=%27%23683F29%27/%3E%3Crect x=%2724%27 y=%274%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%270%27 y=%275%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%274%27 y=%276%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%2724%27 y=%277%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%2712%27 y=%278%27 width=%271%27 height=%271%27 fill=%27%23683F29%27/%3E%3Crect x=%2729%27 y=%278%27 width=%272%27 height=%271%27 fill=%27%23683F29%27/%3E%3Crect x=%2711%27 y=%279%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%2712%27 y=%2710%27 width=%271%27 height=%271%27 fill=%27%23683F29%27/%3E%3Crect x=%2712%27 y=%2711%27 width=%271%27 height=%271%27 fill=%27%23683F29%27/%3E%3Crect x=%2713%27 y=%2711%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%2730%27 y=%2711%27 width=%271%27 height=%271%27 fill=%27%23683F29%27/%3E%3Crect x=%2728%27 y=%2712%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%270%27 y=%2713%27 width=%271%27 height=%271%27 fill=%27%23683F29%27/%3E%3Crect x=%275%27 y=%2713%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%2726%27 y=%2713%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%278%27 y=%2715%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%2712%27 y=%2715%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%2714%27 y=%2715%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%275%27 y=%2716%27 width=%271%27 height=%271%27 fill=%27%23683F29%27/%3E%3Crect x=%2712%27 y=%2717%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%276%27 y=%2718%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%2714%27 y=%2718%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%275%27 y=%2719%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%2717%27 y=%2719%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%2728%27 y=%2719%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%270%27 y=%2721%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%2723%27 y=%2723%27 width=%271%27 height=%271%27 fill=%27%23683F29%27/%3E%3Crect x=%270%27 y=%2726%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%2717%27 y=%2726%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%2725%27 y=%2726%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%2712%27 y=%2728%27 width=%272%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%2725%27 y=%2728%27 width=%271%27 height=%271%27 fill=%27%23683F29%27/%3E%3Crect x=%2729%27 y=%2728%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%271%27 y=%2729%27 width=%271%27 height=%271%27 fill=%27%23683F29%27/%3E%3Crect x=%273%27 y=%2730%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3Crect x=%2729%27 y=%2731%27 width=%271%27 height=%271%27 fill=%27%234B2B1A%27/%3E%3C/svg%3E");
  background-size:32px 32px;background-position:left top;background-repeat:repeat}
.tcard-back.back-binding .markblock{color:#D9B45A}
.tcard-back.back-binding .deco{display:block;position:absolute;inset:16px;pointer-events:none;
  border:6px double #C9A24A;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%279%27 height=%279%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%274%27 y=%270%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%273%27 y=%271%27 width=%273%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%274%27 y=%272%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%271%27 y=%273%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%274%27 y=%273%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%277%27 y=%273%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%270%27 y=%274%27 width=%279%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%271%27 y=%275%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%274%27 y=%275%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%277%27 y=%275%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%274%27 y=%276%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%273%27 y=%277%27 width=%273%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%274%27 y=%278%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%279%27 height=%279%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%274%27 y=%270%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%273%27 y=%271%27 width=%273%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%274%27 y=%272%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%271%27 y=%273%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%274%27 y=%273%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%277%27 y=%273%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%270%27 y=%274%27 width=%279%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%271%27 y=%275%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%274%27 y=%275%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%277%27 y=%275%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%274%27 y=%276%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%273%27 y=%277%27 width=%273%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%274%27 y=%278%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%279%27 height=%279%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%274%27 y=%270%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%273%27 y=%271%27 width=%273%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%274%27 y=%272%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%271%27 y=%273%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%274%27 y=%273%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%277%27 y=%273%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%270%27 y=%274%27 width=%279%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%271%27 y=%275%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%274%27 y=%275%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%277%27 y=%275%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%274%27 y=%276%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%273%27 y=%277%27 width=%273%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%274%27 y=%278%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%279%27 height=%279%27 shape-rendering=%27crispEdges%27%3E%3Crect x=%274%27 y=%270%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%273%27 y=%271%27 width=%273%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%274%27 y=%272%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%271%27 y=%273%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%274%27 y=%273%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%277%27 y=%273%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%270%27 y=%274%27 width=%279%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%271%27 y=%275%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%274%27 y=%275%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%277%27 y=%275%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%274%27 y=%276%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%273%27 y=%277%27 width=%273%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3Crect x=%274%27 y=%278%27 width=%271%27 height=%271%27 fill=%27%23D4AF55%27/%3E%3C/svg%3E");
  background-position:6px 6px, calc(100% - 6px) 6px, 6px calc(100% - 6px), calc(100% - 6px) calc(100% - 6px);
  background-size:18px 18px;background-repeat:no-repeat}
/* Graph paper: the ruling described with the paper, above */
.tcard-back.back-graph .paper{
  background-color:var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3Crect width='1' height='1' fill='%23C9BEA3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3Crect width='1' height='1' fill='%23C9BEA3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 0H16M0 16H16M0 0V16M16 0V16' stroke='%23C9BEA3' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 0H16M0 16H16M0 0V16M16 0V16' stroke='%23E6DECA' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  /* EACH LINE STRADDLES ITS DIVISION (2026-09): half of it at the end of
     one cell, half at the start of the next, so the ruling is symmetric
     about the card's axis -- drawn at the start of each cell, it stood
     half a line and more to the right. The closing rules on the right
     and at the foot are the half a heavy line the last cell leaves. */
  background-size:calc(100% / (var(--cols) * 8)) 100%,
                  100% calc(100% / (var(--rows) * 8)),
                  calc(100% * var(--every) / var(--cols))
                  calc(100% * var(--every) / var(--rows)),
                  calc(100% / var(--cols)) calc(100% / var(--rows));
  background-position:right top, left bottom, left top, left top;
  background-repeat:no-repeat, no-repeat, repeat, repeat;
}

/* =====================================================================
   THE BADGES (cosmetics-rules.js, badge.*): a title and its icon, in a
   ruled box of the game -- under a name on a profile, on the "match
   found" screen, in the Profile's choice. Ink, the icon in its colour.
   ===================================================================== */
.cbadge{display:inline-flex;align-items:center;gap:6px;max-width:100%;
  border:var(--edge) solid var(--ink);background:var(--cream-deep);color:var(--ink);
  padding:2px 8px 2px 6px;font-family:var(--pixel);font-size:16px;line-height:1.2;
  text-transform:uppercase;white-space:nowrap;vertical-align:middle}
.cbadge b{font-weight:400;overflow:hidden;text-overflow:ellipsis}
.cbadge .icon{width:16px;height:16px;color:var(--ink)}
.cbadge.b-founder .icon{color:#8C6C0B}
.cbadge.b-pioneer .icon{color:#2E6BA8}
.icon-b-crown{--mk-src:url("assets/Icons/svg/Hats_Crown_King_Monarch_Ruler_Emperor.svg");-webkit-mask-image:var(--mk-src);mask-image:var(--mk-src)}
/* the founders' wall (the founder's pack, its fourth point): the pack's
   stone wall */
.icon-wall{--mk-src:url("assets/Icons/svg/Map_Markers_Building_Stone_Wall_Fortification.svg");-webkit-mask-image:var(--mk-src);mask-image:var(--mk-src)}
.icon-b-flagpole{--mk-src:url("assets/Icons/svg/Map_Markers_Flagpole.svg");-webkit-mask-image:var(--mk-src);mask-image:var(--mk-src)}
.icon-b-map{--mk-src:url("assets/Icons/svg/Map_Markers_Scroll_Map_Location.svg");-webkit-mask-image:var(--mk-src);mask-image:var(--mk-src)}
.icon-b-album{--mk-src:url("assets/Icons/svg/Boardgames_Cards_Deck_Pile.svg");-webkit-mask-image:var(--mk-src);mask-image:var(--mk-src)}
.icon-b-temple{--mk-src:url("assets/Icons/svg/Map_Markers_Building_Bank_Greek_Temple.svg");-webkit-mask-image:var(--mk-src);mask-image:var(--mk-src)}
.icon-b-compass{--mk-src:url("assets/Icons/svg/Map_Markers_Compass_Rose_2.svg");-webkit-mask-image:var(--mk-src);mask-image:var(--mk-src)}
.icon-b-gem{--mk-src:url("assets/Icons/svg/RPG_Gem_Jewelcrafting_Diamond_Points_Currency.svg");-webkit-mask-image:var(--mk-src);mask-image:var(--mk-src)}
.icon-b-sparkles{--mk-src:url("assets/Icons/svg/RPG_Magic_Sparkles_Enchantment.svg");-webkit-mask-image:var(--mk-src);mask-image:var(--mk-src)}
.icon-b-coin{--mk-src:url("assets/Icons/svg/Coin.svg");-webkit-mask-image:var(--mk-src);mask-image:var(--mk-src)}
.icon-b-trophy{--mk-src:url("assets/Icons/svg/Sports_Winner_Award_Cup_Achievement_Trophy.svg");-webkit-mask-image:var(--mk-src);mask-image:var(--mk-src)}

/* The horizontal logotype: the mark, then the name, for the places
   with the room for it. The rose's box is 32 beside the name at 32
   (its grid at 1); .big is 64 beside the name at 48 -- the drawing, the
   middle 24 cells of the box, then stands 48 tall like the name. */
.logotype{display:inline-flex;align-items:center;gap:16px;color:var(--ink)}
.logotype:hover,.logotype:focus-visible{text-decoration:none}
.logotype .rose{--rose-w:32px;flex:none}
.logotype .name{font-family:var(--pixel);font-size:32px;text-transform:uppercase;
  letter-spacing:.06em;line-height:1;white-space:nowrap}
.logotype.big .rose{--rose-w:64px}
.logotype.big .name{font-size:48px}

/* =====================================================================
   THE SHEEN — one component, two materials

   A wide soft band of light lying over an object and sliding across it
   as the object turns. It was written for the booster, where it is the
   thing that makes a flat rectangle read as a bag rather than a card,
   and it is the one gradient in the project. The same component now
   makes a Foil card foil, which is why it lives here and not in
   packs.html.

   WHERE IT GETS ITS ANGLE. --gx, a number from -1 to 1, and whoever
   owns the object writes it: the booster from the pointer's position
   inside itself, a card from --px on the root, which one listener
   writes for the whole page. The fallback chain means an object that
   nobody is driving simply sits still.

   PLAIN is white at 14%: it reads as a sheen because it moves, not
   because it is bright. IRIS is the same geometry in six hues at a
   lower strength -- foil is not a rainbow, it is a grey card that
   throws colour when you tilt it, so the stops are pale and the whole
   thing is weak enough to read as a material rather than a filter. */
.sheen{position:absolute;inset:-20% -60%;pointer-events:none;
  opacity:var(--sheen, .14);
  transform:translateX(calc(var(--gx, var(--px, 0)) * 26%)) rotate(-14deg);
  transition:transform 140ms linear;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 34%, rgba(255,255,255,1) 50%,
    rgba(255,255,255,0) 66%)}

/* =====================================================================
   L'IRISATION D'UN FOIL — un reflet, pas une couche de peinture

   LA CARTE RESTE ENTIÈREMENT LISIBLE. Une version précédente peignait
   huit bandes postérisées saturées en `hard-light` à 55 % : le résultat
   recouvrait la photographie d'un aplat magenta et jaune, et le fond
   crème virait. Si on perd la photo, c'est raté. Référence tenue en
   main : une carte foil ordinaire, où l'illustration se voit en
   entier et le vernis ne fait qu'accrocher la lumière.

   Ce qu'on peint donc :

   UN DÉGRADÉ LISSE, pas des aplats. Une bande large et douce qui
   traverse la carte en diagonale, vert, cyan, rose, or, sans bord
   franc. Une seule bande, pas un motif qui pave la surface. C'est la
   seule exception aux dégradés de la DA, et elle ne vaut que pour la
   finition foil.

   `SOFT-LIGHT`, PAS `HARD-LIGHT`. C'est le mode qui fait le travail :
   il éclaircit doucement ce qui est clair et ne touche presque pas ce
   qui est sombre. L'intensité du reflet suit donc LA LUMINOSITÉ DE CE
   QU'IL Y A DESSOUS, sans qu'on ait rien à mesurer -- fort sur un ciel
   blanc, presque nul dans une ombre. C'est ce qui sépare un vernis
   d'un filtre posé à plat.

   UNE OPACITÉ FAIBLE, 0.30. Réglée à l'œil en comparant cinq couples de
   valeurs côte à côte sur une photo sombre et une photo claire. À 0.22
   la photographie revient parfaitement mais on ne reconnaît plus un
   foil au premier coup d'œil, ce qui est l'autre moitié du critère.
   0.30 est le haut de la plage : au-delà le fond crème commence à
   tirer, en deçà le reflet disparaît sur un ciel d'orage.

   L'INCLINAISON NE CHANGE PAS. Le modèle -- `--tilt-x`, `--tilt-y`,
   `--light-x`, `--light-y` -- est conservé tel quel : seule
   l'apparence de la couche change, pas la façon dont elle est pilotée.
   ===================================================================== */
.sheen.iris{
  --sheen:var(--iris-bande);
  inset:-40% -70%;
  mix-blend-mode:var(--iris-fusion);
  /* la différence `inclinaison - lumière` : une carte retournée ne
     montre pas la même irisation qu'à plat */
  --swx:calc(var(--tilt-x, 0) - var(--light-x, 0));
  --swy:calc(var(--tilt-y, 0) - var(--light-y, -25));
  background:linear-gradient(var(--iris-angle),
    rgba(255,255,255,0)    22%,
    rgba(150,255,200,.55)  33%,
    rgba(130,230,255,.75)  41%,
    rgba(255,235,255,.90)  50%,
    rgba(255,190,225,.75)  59%,
    rgba(255,225,150,.55)  67%,
    rgba(255,255,255,0)    78%);
  transform:rotate(-8deg)
            translate(calc(var(--swx) * var(--iris-course) * 1%),
                      calc(var(--swy) * var(--iris-course) * .44%));
  transition:transform 120ms linear;
}

/* LE COUP DE LUMIÈRE SUR LES ZONES CLAIRES. `soft-light` seul reste
   sage ; cette seconde couche, en `color-dodge` très faible, n'a
   d'effet QUE là où le fond est déjà lumineux -- un ciel, un mur
   blanc, une lettre encrée -- et absolument aucun sur du noir. C'est
   elle qui donne l'éclat du vernis, et elle suit la même inclinaison. */
.sheen.iris::before{
  content:"";position:absolute;inset:0;
  /* 0.80 : c'est CETTE couche qui fait reconnaître un foil, parce
     qu'elle n'agit que sur ce qui est déjà lumineux. Elle peut donc
     être forte sans jamais repeindre une zone sombre. */
  opacity:var(--iris-eclat);
  mix-blend-mode:color-dodge;
  background:linear-gradient(var(--iris-angle),
    rgba(0,0,0,0) 34%,
    rgba(120,190,255,.8) 46%,
    rgba(255,220,255,1)  50%,
    rgba(255,200,140,.8) 54%,
    rgba(0,0,0,0) 66%);
}

/* LA PRISE DANS LES TONS MOYENS. `soft-light` travaille sur tout et
   `color-dodge` seulement sur les hautes lumières ; ni l'un ni l'autre
   n'attaque franchement un demi-ton. Une vraie carte foil, elle, y
   accroche. Cette couche est là pour ça, en `overlay`, et elle vaut
   zéro par défaut : c'est un levier que le panneau de réglage peut
   ouvrir si la bande seule ne suffit pas. */
.sheen.iris > .mid{
  position:absolute;inset:0;
  opacity:var(--iris-tons);
  mix-blend-mode:overlay;
  background:linear-gradient(var(--iris-angle),
    rgba(0,0,0,0)         26%,
    rgba(120,255,190,.75) 38%,
    rgba(150,220,255,.95) 50%,
    rgba(255,170,215,.75) 62%,
    rgba(0,0,0,0)         74%);
}

/* LE GRAIN DE DIFFRACTION, à peine perceptible : une trame d'un pixel
   sur quatre, à 6 % d'opacité. Elle se déplace en sens inverse de la
   bande, ce qui donne la profondeur sans qu'aucune image ne soit
   recalculée. */
.sheen.iris::after{
  content:"";position:absolute;inset:-30%;
  opacity:var(--iris-grain);
  background:repeating-linear-gradient(var(--iris-angle),
    rgba(255,255,255,1) 0 1px,
    rgba(255,255,255,0) 1px 4px);
  transform:translateX(calc(var(--swx) * -.5%));
  transition:transform 120ms linear;
}

/* L'EFFET COUVRE TOUTE LA CARTE, photographie comprise : un vernis
   s'étend sur l'objet entier. */
.tcard.fin-metal > .sheen,
.tcard.fin-gold  > .sheen{z-index:6}

/* L'OR D'UNE SECRET. Même bande douce, même mode, mais la roue se
   resserre sur les ors et les cuivres : une secret n'est pas un foil
   plus coloré, c'est le même vernis dans une seule famille. */
.tcard.fin-gold > .sheen{
  background:linear-gradient(104deg,
    rgba(255,255,255,0)   22%,
    rgba(255,235,180,.60) 34%,
    rgba(255,248,215,.90) 50%,
    rgba(230,190,110,.60) 66%,
    rgba(255,255,255,0)   78%);
}

/* Mouvement réduit : la bande ne balaie plus. Elle reste où elle est,
   donc une carte foil reste une carte foil. */
@media (prefers-reduced-motion: reduce){
  .sheen.iris,
  .sheen.iris::after{transition:none}
}

/* Reduced motion: the band stops sliding. It stays where it is, so a
   foil card still looks like foil and simply does not move. */
@media (prefers-reduced-motion: reduce){
  .sheen{transition:none;transform:rotate(-14deg)}
}

/* =====================================================================
   FOIL, ON A CARD

   A Foil card is made of the same material as the booster: the .sheen
   above, in its iris flavour, lying on the card and sliding as the
   pointer moves. It is not an effect that plays once at the reveal --
   it is what the card is made of, so it is there in the Album too.

   WHERE IT LIES, AND WHAT IT MUST NOT COVER. On a Foil the sheen is
   under the photograph and over everything else: the liseré, the
   paper, the head, the attribute row. A photograph is a real place and
   iridescence over it is a filter on somebody's picture -- which the
   art direction has refused from the start. The photograph simply sits
   in front of the sheen, which needs no mask: one z-index on .shot.

   ON A FULL ART the whole card is the picture and there is no paper
   left to catch the light, so there the sheen goes over everything and
   the card reads as one iridescent sheet.

   --px is written on the root by ONE listener for the whole page (see
   card.js). Every foil on screen reads the same number, so a sheet of
   forty cards in the Album costs one handler and no measurement.
   ===================================================================== */
.tcard{position:relative}
/* ON A CARD THE BAND IS NARROWER AND WEAKER THAN ON THE BAG. The
   booster is a big object seen alone and its sheen is tuned to that;
   the same numbers on a card the size of a postcard flood it, and a
   card washed in colour is a filter, not a material. A quarter of the
   spread and half the strength: what you see is a band crossing the
   card, not the card turning colour. */
.tcard > .sheen{border-radius:22px;z-index:1;
  inset:-8% -26%;--sheen:.15}
/* mais un FOIL reprend ses propres mesures : la règle ci-dessus vaut
   pour la bande blanche d'une carte sans finition, pas pour le chrome.
   Elle a la même spécificité et vient plus bas dans le fichier, donc
   elle gagnerait en silence. */
.tcard > .sheen.iris{inset:-40% -70%;--sheen:var(--iris-bande)}
.tcard.fin-gold > .sheen.iris{--sheen:calc(var(--iris-bande) * .87)}
/* the photograph is in front of the light, not under it */
.tcard .shot{position:relative;z-index:2}

/* =====================================================================
   LE VERNIS D'UN FOIL — sur la couche imprimée, pas sur le carton

   Ce qui précède couvrait la carte entière : la photographie ET le
   papier crème, qui virait au vert d'eau. Une carte vernie ne fait pas
   ça. Le vernis est déposé sur ce qui est IMPRIMÉ — l'image, l'encre,
   les filets — et le carton reste du carton.

   Donc la bande descend DANS `.shot` (voir card.js), qui est déjà en
   `overflow:hidden` : elle est découpée au rectangle de l'image, sans
   masque et sans une règle de plus. Les mesures en `>` de la section
   précédente ne l'atteignent plus une fois descendue d'un cran, son
   débord est donc redonné ici.

   UNE PLEINE PAGE N'EST PAS CONCERNÉE. Sur une Full Art ou une Secret
   toute la carte est l'image : il n'y a pas de papier à épargner, la
   bande reste au niveau de la carte, et rien de cette section ne s'y
   applique.
   ===================================================================== */
.tcard.art-inset .shot > .sheen.iris{inset:-40% -70%;z-index:5}

/* LE BALAYAGE EST PORTÉ PAR LA CARTE. `--swx` était déclarée dans
   `.sheen.iris`, qui est une SŒUR de `.shot`, du texte et des icônes :
   une variable personnalisée ne descend que dans les enfants, jamais
   de côté, et tout ce qui la lisait ailleurs recevait du vide. Elle est
   donc déclarée sur la carte, d'où tout le monde la lit. */
.tcard{
  --swx:calc(var(--tilt-x, 0) - var(--light-x, 0));
  --swy:calc(var(--tilt-y, 0) - var(--light-y, -25));
}

/* L'ENCRE — TOUT L'IMPRIMÉ, SAUF LE DRAPEAU

   Une carte foil est vernie d'un bloc : sur l'objet réel, le film prend
   toute la couche d'encre. Le partager -- le nom verni, les
   coordonnées non -- donne une carte à moitié finie, et l'œil voit le
   partage avant de voir la finition.

   Reçoivent donc le même reflet : le titre, l'endurance et son
   libellé, les quatre libellés d'attributs, les coordonnées, le crédit,
   le numéro de collection, les trois icônes et le liseré.

   TROIS CHOSES Y ÉCHAPPENT, et pour trois raisons différentes :
   le DRAPEAU, parce que ses couleurs sont celles d'un pays et qu'un
   pays ne change pas de couleurs ; la PHOTOGRAPHIE, qui a sa propre
   couche à l'intérieur de sa fenêtre ; le PAPIER, qui est du carton et
   non de l'encre.

   DEUX CHOSES RENDAIENT L'ENCRE INVISIBLE, ET AUCUNE N'ÉTAIT UNE RÈGLE
   MANQUANTE. Le dégradé se peignait bien -- relevé au pixel, zéro gris
   pur dans les lettres -- mais :

     LA RAMPE ÉTAIT TROP GRANDE POUR LE TEXTE. `background-size:300%`
     sur une boîte de deux cents pixels ne laissait voir qu'une tranche
     d'un sixième de la rampe : chaque mot recevait UN ton, pas un
     dégradé. Un ton sombre unique, c'est de l'encre. Elle est ramenée
     à 170 %, si bien que plusieurs teintes traversent un même mot.

     LA PALETTE ÉTAIT DÉSATURÉE. Ses tons mesuraient 35 à 91 de
     saturation, soit un gris coloré. Ils vont de 145 à 235 maintenant,
     à teinte égale et à contraste tenu -- c'est la saturation maximale
     que le crème accepte sans descendre sous le seuil de lecture.

   UN PLANCHER POUR LES PETITS CORPS. Coordonnées, crédit et numéro se
   lisent caractère par caractère : ils prennent la même roue, un cran
   moins claire, qui tient **4,6 contre 1** sur le crème. Les grands
   corps se contentent de 3,2 -- le seuil des grands caractères -- et
   gagnent en échange les tons les plus vifs.

   LES ICÔNES REPRENNENT LA PALETTE CLAIRE, celle du vernis sur la
   photographie : c'est elle qui donne le chrome. Une icône est un
   dessin de seize pixels, pas un texte qu'on déchiffre -- ce qu'elle
   dit est écrit à côté d'elle, en toutes lettres. */
.tcard.art-inset.fin-metal .head .name span,
.tcard.art-inset.fin-metal .head .power b,
.tcard.art-inset.fin-metal .head .power span,
.tcard.art-inset.fin-metal .marks .lb,
.tcard.art-inset.fin-metal .foot .credit,
.tcard.art-inset.fin-metal .foot .ident{
  background:linear-gradient(var(--iris-angle),
    #0D9E55 0%, #1094C4 24%, #9214FF 46%, #FF14A9 68%, #AD860E 88%, #0D9E55 100%);
  /* 170 et non 300 : la rampe doit tenir dans un mot pour qu'on la
     voie, sans quoi chaque mot reçoit un ton uni */
  background-size:170% 100%;
  background-position:calc(50% + var(--swx) * var(--iris-encre) * 1%) 50%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  transition:background-position 120ms linear;
}
/* LE PLANCHER DES PETITS CORPS. La même roue, les mêmes teintes, le
   même mouvement : seules les valeurs descendent d'un cran, ce qui
   porte le point faible de 3,2 à 4,6 contre 1 sur le crème. */
.tcard.art-inset.fin-metal .foot .credit,
.tcard.art-inset.fin-metal .foot .ident{
  background-image:linear-gradient(var(--iris-angle),
    #0A8246 0%, #0D79A1 24%, #9214FF 46%, #D6118E 68%, #8C6C0B 88%, #0A8246 100%);
}

/* les icônes sont des masques : le dégradé se peint À TRAVERS le
   dessin, en remplaçant sa couleur de fond. Le raccourci `background`
   efface le `background-color:currentColor` de `.icon` : sur un Foil,
   la gemme de rareté prend l'irisé, et le libellé nomme la rareté. */
/* the rarity's stars are inline and painted in their colour: on a Foil
   the iridescence is laid OVER them, through the same drawing as a mask
   (assets/Icons/svg/Rarity_*.svg, cropped like them, tools/rarity-icons.py) */
.tcard.art-inset.fin-metal .foot .stars::after{content:"";position:absolute;
  inset:0;pointer-events:none;
  -webkit-mask:var(--rim) center / 100% 100% no-repeat;mask:var(--rim) center / 100% 100% no-repeat;
  background:linear-gradient(var(--iris-angle),
    #7CFFC4 0%, #7BE3FF 22%, #FFE9FF 42%, #FFB6DC 62%, #FFE08C 82%, #7CFFC4 100%);
  background-size:300% 300%;
  background-position:calc(50% + var(--swx) * var(--iris-encre) * 1%)
                      calc(50% + var(--swy) * 1%);
  opacity:.85}
.tcard[data-r="C"]{--rim:url("assets/Icons/svg/Rarity_Stars_1.svg?v=9")}
.tcard[data-r="UC"]{--rim:url("assets/Icons/svg/Rarity_Stars_2.svg?v=9")}
.tcard[data-r="R"]{--rim:url("assets/Icons/svg/Rarity_Stars_3.svg?v=9")}
.tcard[data-r="SR"]{--rim:url("assets/Icons/svg/Rarity_Stars_4.svg?v=9")}
.tcard[data-r="UR"]{--rim:url("assets/Icons/svg/Rarity_Stars_5.svg?v=9")}
.tcard[data-r="L"]{--rim:url("assets/Icons/svg/Rarity_Star_Big.svg?v=9")}
.tcard.art-inset.fin-metal .marks .icon,
.tcard.art-inset.fin-metal .foot .icon{
  background:linear-gradient(var(--iris-angle),
    #7CFFC4 0%, #7BE3FF 22%, #FFE9FF 42%, #FFB6DC 62%, #FFE08C 82%, #7CFFC4 100%);
  background-size:300% 300%;
  background-position:calc(50% + var(--swx) * var(--iris-encre) * 1%)
                      calc(50% + var(--swy) * 1%);
  transition:background-position 120ms linear;
}
/* LE DRAPEAU N'EST PAS DE L'ENCRE. C'est une image, aucune règle
   ci-dessus ne l'atteint, et cette ligne est là pour que la prochaine
   personne qui élargit un sélecteur le lise. */
/* LES TRAITS D'UNE STANDARD FOIL -- bordure, séparation, cadre de la
   photo -- prennent l'irisé comme le reste de l'imprimé : la roue vive
   de l'encre. Voir LES TRAITS DE LA CARTE. */
/* le liseré : un anneau en dégradé, clippé au bord de la carte */
.tcard.art-inset.fin-metal::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:7;
  border-radius:24px;padding:2px;
  background:linear-gradient(var(--iris-angle),
    #7CFFC4, #7BE3FF, #FFE9FF, #FFB6DC, #FFE08C, #7CFFC4);
  background-size:300% 300%;
  background-position:calc(50% + var(--swx) * var(--iris-encre) * 2%) 50%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,
               linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:background-position 120ms linear;
}

/* =====================================================================
   LES ÉCLATS — invisibles à plat, allumés à l'inclinaison

   Ce que font les cartes gravées : de petites facettes réparties,
   INVISIBLES de face, qui s'allument quand la carte s'incline puis
   s'éteignent. CHACUNE A SON PROPRE ANGLE DE DÉCLENCHEMENT, `--a`,
   donc elles ne s'allument pas ensemble : la carte scintille
   progressivement pendant qu'on la tourne.

   L'opacité se calcule en CSS, sans une ligne de JavaScript par
   image :

       opacité = (fenêtre - |inclinaison - angle|) / fenêtre

   `abs()` n'est pas sûr partout, donc la valeur absolue s'écrit
   `max(a - b, b - a)`, et les valeurs négatives sont ramenées à zéro
   par le navigateur. Seule `opacity` bouge : rien n'est recalculé,
   rien n'est peint en plus.
   ===================================================================== */
.eclats{position:absolute;inset:0;pointer-events:none;z-index:8;
  border-radius:22px;overflow:hidden}
.eclat{
  position:absolute;
  width:var(--t,7px);height:var(--t,7px);
  margin:calc(var(--t,7px) / -2) 0 0 calc(var(--t,7px) / -2);
  background:var(--ec-teinte);
  opacity:calc((var(--ec-fen) -
                max(calc(var(--tilt-x,0) - var(--a,0)),
                    calc(var(--a,0) - var(--tilt-x,0)))) / var(--ec-fen)
               * var(--ec-force));
  /* une facette, pas un rond : quatre pointes, dessinées au clip */
  clip-path:polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%,
                    50% 100%, 40% 60%, 0% 50%, 40% 40%);
}

/* =====================================================================
   LE REPOS D'UN FOIL — une inclinaison virtuelle qui oscille

   Une carte Foil, Full Art ou Secret posée à plat n'est pas éteinte :
   elle se comporte comme si on la balançait doucement dans la main.
   C'est l'oscillation du banc bench-foil, reprise telle quelle --

       x = 18° × sin(2π t / 2,6 s)
       y =  9° × sin(2π t / 2,6 s + 1,1)

   un aller-retour de ±18° autour de l'axe vertical en 2,6 s, et un
   léger déphasage vertical qui fait décrire au reflet une ellipse au
   lieu d'une ligne.

   CE N'EST PAS UN EFFET DE PLUS, C'EST LE MODÈLE. L'animation écrit
   `--tilt-x` et `--tilt-y`, les deux nombres que `setTilt` écrit quand
   on incline la carte (card.js) : la bande, l'encre, la gravure et les
   éclats les lisent déjà, et suivent sans une règle de plus. LA CARTE
   NE BOUGE PAS : rien ne lit ces nombres pour la tourner hors de la vue
   3D de l'album, qui pose `.tilted` et prend la main.

   `@property` DONNE UN TYPE AUX DEUX NOMBRES. Sans lui une propriété
   personnalisée ne s'interpole pas -- elle saute d'une image clé à
   l'autre. Déclarées `<number>`, elles glissent.

   LA SINUSOÏDE, EN DEUX IMAGES CLÉS. +18 à 0 %, -18 à 50 %, +18 à
   100 %, et `cubic-bezier(.37,0,.63,1)` sur chaque moitié : c'est la
   courbe « sine in-out », qui suit un cosinus à mieux d'un degré près.
   y part avec 0,455 s d'avance, soit 1,1 radian sur 2,6 s.

   CHAQUE CARTE A SA PHASE. `--ph`, un retard négatif tiré de
   l'identifiant du lieu (card.js), décale son balancement : deux cartes
   voisines ne s'allument pas ensemble, et la même carte garde la même
   phase partout.

   L'INCLINAISON RÉELLE REPREND LA MAIN au survol ou au geste : `.tilted`
   sur la boîte fait tomber l'animation, et les nombres posés en ligne
   par `setTilt` s'appliquent.

   HORS DE L'ÉCRAN, EN PAUSE. Une propriété animée se recalcule à chaque
   image, qu'on la voie ou non : card.js pose `.far` sur toute boîte à
   finition sortie de l'écran, et elle s'arrête là où elle est.

   C'EST LA SECONDE EXCEPTION AU « SEUL ÉLÉMENT ANIMÉ EN CONTINU », et
   elle est écrite dans docs/DA-regles.md. */
@property --tilt-x{syntax:"<number>";inherits:true;initial-value:0}
@property --tilt-y{syntax:"<number>";inherits:true;initial-value:0}
@keyframes osc-x{0%,100%{--tilt-x:18} 50%{--tilt-x:-18}}
@keyframes osc-y{0%,100%{--tilt-y:9}  50%{--tilt-y:-9}}
.tcard-box:not(.tilted) > .tcard.fin-metal,
.tcard-box:not(.tilted) > .tcard.fin-gold{
  animation:osc-x 2.6s cubic-bezier(.37,0,.63,1) var(--ph, 0s) infinite,
            osc-y 2.6s cubic-bezier(.37,0,.63,1)
                  calc(var(--ph, 0s) - .455s) infinite}
.tcard-box.far > .tcard{animation-play-state:paused}
/* SOUS WEBKIT (.wk, card.js : L'INCLINAISON SOUS WEBKIT). WebKit ne
   redessine pas les enfants quand une propriete enregistree et heritee
   change sur leur parent : chaque element de la carte lit donc son
   angle dans le relais --jx / --jy, non enregistre, que card.js ecrit
   (le repos, image par image, et setTilt). L'animation CSS se retire. */
.tcard-box.wk, .tcard-box.wk *{--tilt-x:var(--jx, 0);--tilt-y:var(--jy, 0)}
.tcard-box.wk:not(.tilted) > .tcard.fin-metal,
.tcard-box.wk:not(.tilted) > .tcard.fin-gold{animation:none}

/* LE FOIL FIGÉ — au doigt, un seul Foil vit à la fois (card.js).
   Sur un écran tactile, la carte Foil la plus proche du centre garde
   tout son effet : l'oscillation, la bande irisée et ses trois modes de
   fusion, ses éclats. Toutes les autres portent `.still` : leur reflet
   est une texture pré-calculée (assets/foil-still.webp, or pour une
   Secret ; tools/foil-still.py), posée à plat, sans fusion, sans filtre,
   sans animation, sans couche à elle. C'est ce qui garde la mémoire
   graphique de Safari sous sa limite quand une page montre dix Foil. */
.tcard-box.still > .tcard{animation:none}
.tcard-box.still .sheen{inset:0;transform:none;transition:none;will-change:auto;
  mix-blend-mode:normal;opacity:.34;
  background:url("assets/foil-still.webp") center / 100% 100% no-repeat}
.tcard-box.still .tcard.fin-gold .sheen{background-image:url("assets/foil-still-gold.webp")}
.tcard-box.still .sheen::before,
.tcard-box.still .sheen::after,
.tcard-box.still .sheen > .mid,
.tcard-box.still .eclats{display:none}

/* LA CARTE ALLÉGÉE — dans ce qui défile

   Une rangée de cartes qui glisse sans fin (l'accueil) est UNE couche
   déplacée par le compositeur. Tout ce qui se repeint à l'intérieur la
   fait re-rasteriser, et une carte qui oscille repeint son encre, sa
   gravure et ses éclats à chaque image : c'est exactement ce qui fait
   saccader un défilement.

   Un conteneur marqué `data-lite` garde donc ce qui se voit à cette
   taille et fige le reste :
     la BANDE IRISÉE oscille toujours, mais sur sa propre couche : son
       mouvement est une transformation, rien n'est repeint ;
     l'ENCRE, le LISERÉ et la GRAVURE reprennent leur position à plat --
       `--swx` et `--swy` y valent ce qu'ils valent sans inclinaison, la
       bande, elle, garde les siens (elle les déclare elle-même) ;
     le GRAIN ne bouge plus ;
     les ÉCLATS sont retirés : à 0,45 ce sont des points de trois
       pixels, et vingt-six opacités par carte à recalculer.
   La page pose l'attribut, et c'est tout : la carte reste stylée ici. */
[data-lite] .tcard{
  --swx:calc(0 - var(--light-x, 0));
  --swy:calc(0 - var(--light-y, -25))}
/* its own layer ONLY WHILE IT SWAYS: a Foil paused off screen, or
   still (.far, card.js -- on a phone, all but one), keeps no surface */
[data-lite] .tcard-box:not(.far) .sheen.iris{will-change:transform}
[data-lite] .sheen.iris::after{transform:none}
[data-lite] .eclats{display:none}
/* PAS DE TRANSITION PENDANT L'OSCILLATION. Les 120 ms de lissage de la
   bande, de l'encre, du liseré et de la gravure sont là pour la souris ;
   sous une valeur qui change à chaque image, chacune se relancerait à
   chaque image et traînerait derrière le balancement. */
.tcard-box:not(.tilted) > .tcard.fin-metal *,
.tcard-box:not(.tilted) > .tcard.fin-metal *::after,
.tcard-box:not(.tilted) > .tcard.fin-metal::after,
.tcard-box:not(.tilted) > .tcard.fin-gold *,
.tcard-box:not(.tilted) > .tcard.fin-gold *::after{transition:none}
/* moins d'animations demandé : la carte à plat reste à plat */
@media (prefers-reduced-motion: reduce){
  .tcard-box:not(.tilted) > .tcard.fin-metal,
  .tcard-box:not(.tilted) > .tcard.fin-gold{animation:none}
}

/* Mouvement réduit : l'encre et la gravure cessent de balayer, les
   éclats restent où ils sont. Une carte foil reste une carte foil. */
@media (prefers-reduced-motion: reduce){
  .tcard.art-inset.fin-metal .marks .icon,
  .tcard.art-inset.fin-metal .marks .lb,
  .tcard.art-inset.fin-metal .head .name span,
  .tcard.art-inset.fin-metal .head .power b,
  .tcard.art-inset.fin-metal .head .power span,
  .tcard.art-inset.fin-metal .foot .credit,
  .tcard.art-inset.fin-metal .foot .ident,
  .tcard.art-inset.fin-metal::after{transition:none}
}
/* a Full Art is all picture, so the light goes over the picture */
.tcard.art-bleed > .sheen{z-index:3}
/* the gold of a secret, which is a warmer, quieter version of the same
   material rather than a sixth colour */
/* THE SECRET IS LIT AND THE ROOM IS NOT. Everything on the page dims
   except the scene, which keeps its own light. One class on <body>, no
   filter on the card itself -- a filter on the card would flatten the
   3D the pile is turned in. */
body.secret-lit #veil{background:#17160F}
body.secret-lit .nav,
body.secret-lit #below{opacity:.25;transition:opacity .4s linear}

/* =====================================================================
   THE MARK BLOCK — one composition, two objects

   The rose and the name are ONE drawing, defined here once, and the
   back of a card and the booster both print it. They used to be two
   arrangements that resembled each other: different sizes, different
   positions, drifting apart every time one of them was touched.

     the rose    centred in the upper half of the field
     the name    FOLIO over MUNDI, centred in the lower half

   EVERYTHING IS A PROPORTION OF THE OBJECT'S WIDTH, so the booster is
   the back of a card enlarged and nothing else. --mw is that width and
   it is the only thing a host declares; --k turns it into a multiplier
   of the card's own paper, 394px wide, which is the grid the
   composition is drawn on:

     rose       165px wide, centred on 138.5 — a quarter of the 554
                the paper is tall, which is the middle of its top half
     name       64px Silkscreen on two lines, centred on 415.5, which
                is the middle of the bottom half

   Why the rose is 165 and not the 252 it was: the booster's field is
   the same drawing scaled up by its own width, and its top is eaten by
   the crimped band that tears off. 165 is the largest rose that still
   clears that band on the booster by a margin the random tear line
   cannot cross. The number is decided by the object that has less
   room, which is how a shared component has to be sized.
   ===================================================================== */
/* EVERY NUMBER IS var(--mw) * n / 394, AND NOT var(--mw) / 394 FIRST.
   A ratio cannot be held in a custom property: --k: calc(var(--mw) /
   394) is a LENGTH, not a number, so calc(165px * var(--k)) multiplied
   two lengths together, which is invalid. The declaration is dropped
   in silence and the block collapses to the top-left corner. Written
   as length x number / number it is a length throughout. */
.markblock{position:absolute;inset:0;--mw:394px;
  color:var(--ink);pointer-events:none}

/* the rose's drawing is the middle 24 cells of its 32: a box of 220
   holds a drawing 165 wide, the size above (and the snap to whole cells
   moves it by less than a cell) */
.markblock .rose{position:absolute;left:50%;
  top:calc(var(--mw) * var(--mb-rose, 138.5) / 394);
  --rose-w:calc(var(--mw) * 220 / 394);
  transform:translate(-50%,-50%)}

.markblock .wordmark{position:absolute;left:0;right:0;
  top:calc(var(--mw) * var(--mb-name, 415.5) / 394);
  transform:translateY(-50%);
  font-family:var(--pixel);font-weight:400;
  font-size:calc(var(--mw) * 64 / 394);
  line-height:1.15;text-align:center;text-transform:uppercase;
  color:inherit}
.markblock .wordmark b{display:block;font-weight:400}

/* ---------- the social preview ----------
   One quiet line at the top of every social page: the whole social side
   is simulated in this browser for now (social-api.js). On a local
   address it carries the Reset button. */
.preview-banner{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;
  margin-bottom:20px;padding:8px 12px;border:var(--edge) solid var(--line);
  font-family:var(--pixel);font-size:16px;text-transform:uppercase;
  color:var(--ink-soft)}
.preview-banner .btn{padding:4px 10px}
/* THE PROFILE BLOCK (social-ui.js, profileCard): the avatar at three
   times its grid, the name and its lines, and the four numbers under
   them on one side; the showcase card in its own column on the other,
   the height of the two. On a phone the card stays in its column, next
   to the numbers, which stack one above the other. */
.me-card{display:grid;grid-template-columns:auto 1fr auto;gap:16px 20px;
  grid-template-areas:"av id show" "stats stats show";
  align-items:start;border:var(--edge) solid var(--ink);padding:16px;
  background:var(--cream)}
.me-av{grid-area:av}
.me-id{grid-area:id;min-width:0}
.me-show{grid-area:show;align-self:center}
.me-id h2{overflow-wrap:anywhere}
.me-av svg{display:block;border:var(--edge) solid var(--ink)}
/* A FRAMED AVATAR HAS NO INK EDGE (2026-09). The ink line round an
   avatar closes a bare one; round a frame it is a second line against
   the frame's own, and it spoils it -- Copper all but vanished inside
   it. So a framed avatar keeps the room of the line, which goes clear:
   nothing moves, and nothing touches the frame. Written once, here, for
   every page that rules `... svg{border:...}` round an avatar (chips,
   lists, chat, the profile, the lobby, the studio): the one !important
   of the kind, on purpose. */
svg.avatar.framed{border-color:transparent !important}
/* THE ONE CHOSEN, AMONG COSMETICS (the profile's choice, the studio,
   tools/cosmetics.html): a lightly tinted ground and a little check in
   the corner, in ink -- never a line round the thing chosen. */
.picked{position:relative;background:var(--cream-deep)}
.picked::after{content:"";position:absolute;top:6px;right:6px;width:14px;height:12px;
  background:var(--ink);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 7 6%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27white%27 d=%27M6 0h1v1h-1zM5 1h2v1h-2zM0 2h1v1h-1zM4 2h2v1h-2zM0 3h2v1h-2zM3 3h2v1h-2zM1 4h3v1h-3zM2 5h1v1h-1z%27/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 7 6%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27white%27 d=%27M6 0h1v1h-1zM5 1h2v1h-2zM0 2h1v1h-1zM4 2h2v1h-2zM0 3h2v1h-2zM3 3h2v1h-2zM1 4h3v1h-3zM2 5h1v1h-1z%27/%3E%3C/svg%3E") center / 100% 100% no-repeat}
.me-id h2{font-size:24px;line-height:1.1}
/* the badge the player wears, under the name (cosmetics-ui.js) */
.me-badge{margin-top:6px}
.me-line{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:16px}
.me-line .flag{display:block;image-rendering:pixelated}
.me-card .soft{color:var(--ink-soft)}
.me-noshow{width:144px;height:202px;display:grid;place-items:center;text-align:center;
  border:var(--edge) solid var(--line);font-size:16px;padding:10px}
.me-stats{grid-area:stats;display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--edge);background:var(--line);border:var(--edge) solid var(--line)}
.me-stats div{background:var(--cream);padding:10px 12px}
.me-stats b{display:block;font-family:var(--pixel);font-weight:400;font-size:24px}
.me-stats span{font-family:var(--pixel);font-size:16px;text-transform:uppercase;
  color:var(--ink-soft)}
@media(max-width:900px){
  .me-stats{grid-template-columns:repeat(2,1fr)}
}
/* ON A PHONE THE BLOCK IS STACKED: the avatar and the lines beside
   it, the four numbers two by two, then the showcase card under them,
   centred and smaller (0.28 of its size, over the 0.36 the page asks) */
@media(max-width:720px){
  .me-card{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"av id" "stats stats" "show show";
    gap:14px;padding:14px}
  .me-av svg{width:64px;height:64px}
  .me-card .me-stats{grid-template-columns:repeat(2,1fr)}
  .me-stats span{overflow-wrap:break-word}
  .me-show{justify-self:center}
  .me-show .tcard-box{--s:.28 !important}
  .me-noshow{width:112px;height:157px}
}

/* THE ROW OF ACTIONS UNDER A PROFILE BLOCK: mine on the Social page,
   anyone's on their page. One line of buttons, regularly spaced; on a
   phone they share the width. */
.profile-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.profile-acts .tag{align-self:center}
@media(max-width:720px){ .profile-acts .btn{flex:1 1 auto} }

/* A PLAYER, AS A ROW (social-ui.js, playerRow) */
.prow{display:flex;align-items:center;gap:12px;padding:10px 12px;
  border-bottom:var(--edge) solid var(--line)}
.prow:last-child{border-bottom:0}
.prow > svg{flex:none;display:block;border:var(--edge) solid var(--ink)}
.plink{flex:1;min-width:0;display:flex;align-items:center;gap:12px;color:var(--ink)}
.plink:hover,.plink:focus-visible{text-decoration:none}
.plink:hover b,.plink:focus-visible b{text-decoration:underline}
.plink > svg{flex:none;display:block;border:var(--edge) solid var(--ink)}
.pmeta{flex:1;min-width:140px}
.pmeta b,.pmeta > span{display:block}
.pmeta b{font-family:var(--pixel);font-weight:400;font-size:16px}
.pmeta span{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:16px;color:var(--ink-soft)}
.pmeta .flag{display:block;image-rendering:pixelated}
.pact{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.pact .btn{padding:6px 10px}
.tag{font-family:var(--pixel);font-size:16px;text-transform:uppercase;
  color:var(--ink-soft);padding:4px 8px;border:var(--edge) solid var(--line)}
@media(max-width:720px){
  .prow{flex-wrap:wrap}
  .pact{flex-basis:100%;justify-content:flex-start}
}
/* A FRIEND'S MAP OR ALBUM: a bar saying so, and the ways back */
.friendbar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;
  padding:8px 12px;background:var(--cream);border:var(--edge) solid var(--ink);
  font-family:var(--pixel);font-size:16px;text-transform:uppercase}
.friendbar .btn{padding:4px 10px}

/* THE COIN (assets/Icons/svg/Coin.svg): drawn in two yellows with an
   ink edge, so it is an image and not a mask like the other icons. 16px
   next to 16px text, 32 next to the Market balance; always after the number. */
.coin{display:inline-block;width:16px;height:16px;vertical-align:-2px;margin-left:4px;
  background:url("assets/Icons/svg/Coin.svg") center / 100% 100% no-repeat}
.coins{white-space:nowrap}
/* A PLAYER AS A LINK: the avatar and the name, the way to the profile */
.pchip{display:inline-flex;align-items:center;gap:8px;min-width:0;color:var(--ink)}
.pchip:hover,.pchip:focus-visible{text-decoration:none}
.pchip:hover span,.pchip:focus-visible span{text-decoration:underline}
.pchip svg{flex:none;display:block;border:var(--edge) solid var(--ink)}
.pchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* A CHAT: the guild's, and between two friends. Newest at the foot;
   every message on the same column, never a bubble. */
.chat{border:var(--edge) solid var(--ink);max-height:360px;overflow-y:auto;
  background:var(--cream)}
.chat .msg{display:flex;gap:10px;align-items:flex-start;padding:8px 12px;
  border-bottom:var(--edge) solid var(--line)}
.chat .msg:last-child{border-bottom:0}
.chat .msg .mav{flex:none}
.chat .msg .mav svg{display:block;border:var(--edge) solid var(--ink)}
.chat .msg b a{color:var(--ink)}
.chat .msg > div{flex:1;min-width:0}
.chat .msg b{font-family:var(--pixel);font-weight:400;font-size:16px}
.chat .msg small{font-size:16px;color:var(--ink-soft)}
.chat .msg p{font-size:16px;overflow-wrap:anywhere}
.chat .macts{display:flex;gap:6px;flex-wrap:wrap}
.chat .macts .btn{padding:2px 8px}
.chat .empty{font-size:16px;color:var(--ink-soft);padding:10px 12px}
.chatform{display:flex;gap:8px;margin-top:8px}
.chatform input{flex:1;min-width:0;font:inherit;font-size:16px;padding:8px 10px;
  border:var(--edge) solid var(--ink);border-radius:0;background:var(--cream);color:var(--ink)}
@media(max-width:720px){ .chat .macts{flex-basis:100%} .chat .msg{flex-wrap:wrap} }

/* a short message, bottom centre, gone after a few seconds */
.toast{position:fixed;left:50%;bottom:24px;z-index:990;transform:translateX(-50%);
  max-width:calc(100vw - 32px);padding:10px 16px;background:var(--ink);color:var(--cream);
  font-family:var(--pixel);font-size:16px;opacity:0;pointer-events:none;
  transition:opacity .2s steps(3)}
.toast.on{opacity:1}

/* =====================================================================
   THE GAME'S ONE WINDOW (dialog.js) -- every popup: a confirmation, a
   family's achievements, a friend's challenge, a trade to check, a
   report, a place about to leave the map.

   IN THE MIDDLE OF THE SCREEN, ALWAYS. A browser centres a modal
   <dialog> with margin:auto -- and the reset at the top of this file
   (*{margin:0}) took that margin away, which is why some windows
   opened in the top left corner. It is given back here, to every
   <dialog> of the game: fixed, the four sides at 0 and the margin
   auto, as tall and as wide as its content, so it sits in the middle
   across and down, and stays there when the page scrolls or the window
   changes size. Behind it, the page darkened.
   ===================================================================== */
/* centred INSIDE the safe areas (2026-10): a tall window -- the pass,
   the founder's pack -- reached under the iPhone's status bar */
dialog{position:fixed;margin:auto;width:fit-content;height:fit-content;
  inset:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
        env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  min-width:min(320px, calc(100vw - 32px));max-width:min(560px, calc(100vw - 32px));
  max-height:calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));overflow:auto;
  border:var(--edge) solid var(--ink);border-radius:0;padding:18px;background:var(--cream);color:var(--ink)}
dialog:not([open]){display:none}
dialog::backdrop{background:rgba(20,18,16,.55)}
dialog h2{font-size:16px}
dialog p{font-size:16px;line-height:1.6;margin-top:10px}
dialog ul{margin:10px 0 0 20px;font-size:16px;line-height:1.6}
dialog .acts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}
/* a place about to leave the map (SOCIAL_UI.confirmLost), a plain
   confirmation (FM_DIALOG.confirm): the width of a short paragraph */
dialog.lost,dialog.fm-confirm{max-width:min(480px, calc(100vw - 32px))}

/* THE EXPLORER PASS'S WINDOW, and the founder's (subscription.js): what
   it is first -- a warm line, the month's back on a card, what it
   brings with the game's icons, the price --, then the contract. The
   width of a short paragraph; on a phone it holds without scrolling. */
dialog.fm-pass{max-width:min(440px, calc(100vw - 32px))}
/* THE PREMIUM TOUCH, asked for and kept sober -- the one place of the
   game with a soft shadow and a reflection (DA-regles, exception):
   the title in the game's face with a touch of gilding (a gold pixel
   under each letter), a thin gold frame around the presentation, and
   the month's back set off by a soft shadow and a light sheen */
dialog.fm-pass h2{font-family:var(--pixel);font-size:24px;font-weight:400;text-transform:uppercase;
  letter-spacing:.04em;line-height:1.1;color:var(--ink);text-shadow:1px 1px 0 #C39A28}
.fm-pass .premium{border:var(--edge) solid #C39A28;padding:12px 14px;margin-top:14px;
  box-shadow:inset 0 0 0 2px var(--cream), inset 0 0 0 3px rgba(195,154,40,.45)}
.fm-pass .premium > :first-child{margin-top:0}
.fm-pass .showcase .tcard-box{position:relative;box-shadow:0 6px 14px rgba(20,18,16,.28);border-radius:6px}
.fm-pass .showcase .tcard-box::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.32) 46%, rgba(255,255,255,0) 60%)}
.fm-pass .lede{color:var(--ink-soft)}
.fm-pass .showcase{display:flex;align-items:center;gap:16px;margin-top:14px}
.fm-pass .showcase .tcard-box{flex:none}
/* the caption beside the back -- its name, its month -- and never the
   back's own lettering: `.showcase b` reached FOLIO and MUNDI inside
   the card and set them at 16 before the card's scale (2026-09) */
.fm-pass .showcase > div > b{display:block;font-family:var(--pixel);font-weight:400;font-size:16px;text-transform:uppercase}
.fm-pass .showcase > div > small{display:block;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.fm-pass ul.perks{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.fm-pass .showcase ul.perks{margin:0}
.fm-pass .perks li{display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.fm-pass .perks .icon{margin-top:4px}
.fm-pass .price,.fm-pass .recap{font-family:var(--pixel);text-transform:uppercase;color:var(--ink);line-height:1.5}
.fm-pass .price{margin-top:14px}
.fm-pass .step-2 .recap{margin-top:0}
.fm-pass .back{text-align:center;margin-top:12px}
.fm-pass .linkish{background:none;border:0;padding:6px 0;font:inherit;font-size:16px;color:var(--ink-soft);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fm-pass .linkish:hover,.fm-pass .linkish:focus-visible{color:var(--ink)}
.fm-pass .sub{font-family:var(--pixel);text-transform:uppercase;color:var(--ink-soft);margin-top:14px}
.fm-pass .owned{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
.fm-pass .owned figure{margin:0;font-size:16px;text-align:center}
.fm-pass .owned figcaption{margin-top:6px;color:var(--ink-soft)}
/* A SHORT PHONE (640px and so): the whole window on the screen, no
   scrolling -- the title on one line, the gaps closer (the card is
   drawn smaller by subscription.js) */
@media(max-height:700px){
  dialog.fm-pass{padding:14px}
  dialog.fm-pass h2{font-size:16px}
  .fm-pass .premium{padding:10px 12px;margin-top:10px}
  .fm-pass .showcase,.fm-pass ul.perks,.fm-pass .price{margin-top:10px}
  .fm-pass ul.perks{gap:4px}
  dialog.fm-pass .acts{margin-top:12px}
}

/* a friend's live challenge (nav.js): the friend's avatar, who
   challenges, the seconds left; Accept and Decline under it */
dialog.xinvite .who{display:flex;align-items:center;gap:12px}
dialog.xinvite svg{display:block;flex:none;border:var(--edge) solid var(--ink)}
dialog.xinvite .txt{font-size:16px;line-height:1.5}
dialog.xinvite .txt b{display:block;font-weight:400}
dialog.xinvite .txt .left{display:block;font-family:var(--pixel);color:var(--ink-soft)}

/* ---------- an achievement unlocked (nav.js) ----------
   A notice like the toast, a little wider: the medal -- a flat square
   of the tier's colour, edged in ink -- then "Achievement unlocked" and
   its name. Links to the Profile's grid. */
.ach-toast{position:fixed;left:50%;bottom:24px;z-index:991;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:var(--edge);background:var(--ink);
  border:var(--edge) solid var(--ink);max-width:min(420px, calc(100vw - 32px));
  opacity:0;transition:opacity .28s steps(4);pointer-events:auto}
.ach-toast.on{opacity:1}
.ach-toast a{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--paper);
  color:var(--ink);font-size:16px;text-decoration:none}
.ach-toast a:hover,.ach-toast a:focus-visible{background:var(--cream-deep)}
.ach-toast small{display:block;font-family:var(--pixel);font-size:16px;text-transform:uppercase;
  color:var(--ink-soft)}
/* what the achievement unlocked, named: "New frame: Onyx" */
.ach-toast small.gift{color:var(--ink);margin-top:4px}
.ach-toast .medal,.medal{display:inline-block;flex:none;width:16px;height:16px;
  border:var(--edge) solid var(--ink)}
@media(max-width:720px){ .ach-toast{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px)} }
/* on a computer or a tablet: stacked in the bottom right corner, one
   card each, the newest at the bottom (nav.js, stackAchievements) */
.ach-stack{position:fixed;right:24px;bottom:24px;z-index:991;display:flex;flex-direction:column;
  align-items:flex-end;gap:10px;pointer-events:none}
.ach-stack .ach-toast{position:static;transform:none;width:min(360px, calc(100vw - 48px));max-width:none}
@media(max-width:720px){ .toast{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px)} }

/* "GET MORE PACKS" -- the one component the Home and the Packs page
   share (nav.js, GETPACKS). A disabled button keeps its ink border and
   greys its word the way every disabled button does; "Coming soon"
   sits beside it in the soft ink. */
.getpacks{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.getpacks .soon{font-family:var(--pixel);font-size:16px;
  text-transform:uppercase;color:var(--ink-soft)}
/* what the Explorer Pass brings, on its own line under the button */
.getpacks .perks{flex-basis:100%;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.getpacks.founder{margin-top:10px}
/* A WARNING OF THE MODERATORS (account.js): what was reported, set
   apart as a quotation */
.fm-warning blockquote{margin:0;padding:8px 12px;border-left:var(--edge) solid var(--ink);
  font-size:16px;color:var(--ink-soft);white-space:pre-wrap;overflow-wrap:anywhere}
/* THE STORES' REVIEWERS' WAY IN (account.js): a quiet line under the
   ways in, opening an identifier and a password */
.review-way{margin-top:10px}
.review-way .linkish{background:none;border:0;padding:4px 0;font:inherit;font-size:14px;
  color:var(--ink-soft);text-decoration:underline;cursor:pointer}
.review-way form{display:flex;flex-direction:column;gap:8px;max-width:320px;margin-top:8px}
.review-way form .btn{align-self:flex-start}
.review-way input{font:inherit;font-size:16px;padding:8px 10px;
  border:var(--edge) solid var(--ink);border-radius:0;background:var(--cream);color:var(--ink)}
/* IN THE APPLICATIONS, NO WEB PAYMENT: every payment control carries
   .web-billing, and a page marked in-app (nav.js) hides them -- unless
   the app sells through its store (native.js marks it `iap`), where the
   same controls lead to the store (subscription.js). .app-billing: the
   app's own controls (Restore my purchases), in such an app only */
.in-app:not(.iap) .web-billing{display:none !important}
html:not(.iap) .app-billing{display:none !important}
/* IN THE APPS (native.js): a game, not a page -- no double-tap zoom, no
   long-press callout over a card, no grey flash on a tap */
.in-app{touch-action:manipulation;-webkit-text-size-adjust:100%}
.in-app body{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
/* the subscription's window (subscription.js): the offer, then the box
   to tick before paying -- a box of the game, square, inked */
.fm-subscribe .waiver{display:flex;gap:10px;align-items:flex-start;margin-top:14px;
  font-size:16px;line-height:1.5;color:var(--ink);cursor:pointer;text-align:left}
.fm-subscribe .waiver input{flex:none;width:20px;height:20px;margin:2px 0 0;
  accent-color:var(--ink);border-radius:0}
.fm-subscribe .terms{margin-top:8px;font-size:16px;text-align:left}
.fm-subscribe .terms a{color:var(--ink);text-decoration:underline}
/* the terms of use and the privacy policy, under the button that sells
   (subscription.js, legalLinks) */
.fm-subscribe .legal{text-align:center}
.fm-pass .term{color:var(--ink-soft);line-height:1.5;margin-top:4px}

/* The two hosts, and all either of them says is how wide it is -- and,
   for the booster, where the block sits: --mb-rose and --mb-name move
   it down on the bag to leave the cut line clear (packs.html). */
.tcard-back .markblock{--mw:394px}      /* the paper inside the liseré */

/* THE NAME ON THE RULING. On the back, FOLIO and MUNDI each sit in one
   band of the graticule -- the strip between two heavy lines -- FOLIO
   in the fifth band down and MUNDI in the sixth, centred across and
   centred in their band. The bands are read off the paper's own count
   (--rows, --every), so the lettering is on the ruling by construction.

   CENTRED ON THE LETTERS, NOT ON THE LINE. A line box carries room for
   accents above and descenders below, and centring it puts the capitals
   off the middle of the band. `text-box: trim-both cap alphabetic`
   trims the box to the capitals exactly -- cap height to baseline -- so
   centring the box centres the letters, with no nudge in pixels.

   AT EVERY SIZE. The card is one drawing at 400 x 560, scaled as a
   whole (--s): album, pile and detail are that same layout shrunk or
   enlarged, and the centring holds at all of them.

   The booster prints the same block and keeps its own placement
   (--mb-rose, --mb-name): it has no ruling to sit on. */
.tcard-back .markblock .wordmark{top:0;bottom:0;transform:none;line-height:1}
/* EACH WORD IS CENTRED ON ITS OWN MIDDLE, on one line: left 50%, then
   half its own width back. It used to be a full-width box with its text
   centred inside it, and a text wider than its box -- the pile's backs,
   at their scale, while the pixel font was being drawn -- spilled from
   the box's left edge and was cut on the left. Centred on its middle, a
   word stays whole and centred at every size. */
.tcard-back .markblock .wordmark b{position:absolute;left:50%;right:auto;
  width:max-content;white-space:nowrap;
  /* THE BACK'S LETTERING IS THE BACK'S, WHEREVER IT IS SHOWN (2026-09).
     A page's rule on its own `b` -- a caption beside a back in the
     Pass's window, a tile's name in Profile or the studio -- reached
     FOLIO and MUNDI and set them at the page's size, before the card's
     scale: the name came out a quarter of its size. Everything the
     lettering is drawn with is said here, at a weight no page rule
     reaches (three classes), so the back is the game's back at every
     scale, in every page. */
  font-family:var(--pixel);font-size:inherit;font-weight:400;font-style:normal;
  text-transform:uppercase;letter-spacing:normal;line-height:inherit;color:inherit;
  margin:0;padding:0;border:0;background:none;
  --band-h:calc(100% * var(--every) / var(--rows));
  top:calc(var(--band) * var(--band-h) + var(--band-h) / 2);
  transform:translate(-50%, -50%);
  text-box:trim-both cap alphabetic}
.tcard-back .markblock .wordmark b:first-child{--band:4}   /* the fifth band */
.tcard-back .markblock .wordmark b:last-child{--band:5}    /* the sixth      */

/* ---------- the eight type marks, as masks like every other icon ----
   The order is the order the catalogue is numbered in; see TYPES in
   places.js. One icon per type, for the whole type and not for its
   best-known place. The pack's sprites, on its 16 x 16 grid, each
   file a 16 box centred on its drawing (tools/mark-icons.py), the
   crown of Power drawn on the same grid with the same line -- so type,
   rarity and version have the same pixel and line up in one column
   (THE COMMON BOX below). */
.icon-city    {--mk-src:url("assets/Icons/svg/Mark_City.svg");
                  -webkit-mask-image:var(--mk-src);
                  mask-image:var(--mk-src)}
.icon-faith   {--mk-src:url("assets/Icons/svg/Mark_Faith.svg");
                  -webkit-mask-image:var(--mk-src);
                  mask-image:var(--mk-src)}
.icon-power   {--mk-src:url("assets/Icons/svg/Mark_Power.svg");
                  -webkit-mask-image:var(--mk-src);
                  mask-image:var(--mk-src)}
.icon-culture {--mk-src:url("assets/Icons/svg/Mark_Culture.svg");
                  -webkit-mask-image:var(--mk-src);
                  mask-image:var(--mk-src)}
.icon-works   {--mk-src:url("assets/Icons/svg/Mark_Works.svg");
                  -webkit-mask-image:var(--mk-src);
                  mask-image:var(--mk-src)}
.icon-ruins   {--mk-src:url("assets/Icons/svg/Mark_Ruins.svg");
                  -webkit-mask-image:var(--mk-src);
                  mask-image:var(--mk-src)}
.icon-land    {--mk-src:url("assets/Icons/svg/Mark_Land.svg");
                  -webkit-mask-image:var(--mk-src);
                  mask-image:var(--mk-src)}
.icon-water   {--mk-src:url("assets/Icons/svg/Mark_Water.svg");
                  -webkit-mask-image:var(--mk-src);
                  mask-image:var(--mk-src)}

/* ---------- map pin: 12px square, rarity colour, ink edge ---------- */
/* Used by the Map and by the drifting map behind the Home. */
.pin{width:12px;height:12px;border:var(--edge) solid var(--ink);background:currentColor}
.pin.drop{animation:drop .62s steps(9) both}
@keyframes drop{
  0%{transform:translateY(-70px) scale(.25);opacity:0}
  70%{opacity:1}
  100%{transform:translateY(0) scale(1);opacity:1}
}

/* =====================================================================
   Icons — assets/Icons/Sprites, 16x16, drawn as a CSS mask
   The file is never shown: it cuts a hole that currentColor fills, so
   one PNG follows the palette, the hover states and the rarity colours
   without a second copy on disk.

   mask-mode:luminance is not decoration. The sprites are a white body
   with a black outline on transparency, so an alpha mask — the usual
   way to do this — would take body and outline together and stamp one
   solid blob. Luminance keeps the white body and drops the black, which
   is the shape the eye reads.

   Sizes are whole multiples of 16 (16, 32, 48, 64) and nothing else:
   at 20 or 22 the pixel grid smears.

   The paths are case-sensitive. They are served from a Linux box and
   only look forgiving on Windows: assets/Icons/Sprites, capital I,
   capital S, and the file names exactly as they ship.
   ===================================================================== */
.icon{
  display:inline-block;
  width:16px;height:16px;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;        mask-repeat:no-repeat;
  -webkit-mask-position:center;         mask-position:center;
  -webkit-mask-size:contain;            mask-size:contain;
  -webkit-mask-source-type:luminance;   mask-mode:luminance;
  image-rendering:pixelated;
  flex:none;
}
.icon-32{width:32px;height:32px}
.icon-48{width:48px;height:48px}
.icon-64{width:64px;height:64px}

/* mask-mode is stated but no longer load-bearing. The svg files are a
   one-bit stencil now -- white where the ink goes, transparent
   everywhere else (see tools/png-to-svg.py) -- so alpha and luminance
   mask them identically. A browser with neither used to be served a
   solid blob, which is why the navigation hid its icons entirely;
   there is no blob to hide from any more, so that rule is gone. */

.icon-map    {--mk-src:url("assets/Icons/svg/Map_Markers_Scroll_Map_Location.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
.icon-album  {--mk-src:url("assets/Icons/svg/Boardgames_Cards_Deck_Pile.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
.icon-packs  {--mk-src:url("assets/Icons/svg/RPG_Gift_Present.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
.icon-social {--mk-src:url("assets/Icons/svg/Travel_Person_People_Two.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
.icon-settings{--mk-src:url("assets/Icons/svg/Software_Options_Settings_Cogwheel_Gear_Mechanics.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
.icon-profile{--mk-src:url("assets/Icons/svg/Travel_Person_Player_Character_Single.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
.icon-sound  {--mk-src:url("assets/Icons/svg/Media_Audio_Sound_Volume_2.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
.icon-mute   {--mk-src:url("assets/Icons/svg/Media_Audio_Sound_Volume_X_Disabled.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
/* the Play tab, Expedition: a flag planted on a terrain */
.icon-expedition{--mk-src:url("assets/Icons/svg/Map_Markers_Flagpole.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
/* A CARD NAMED OUTSIDE THE ALBUM (market, trades, wishlist,
   notifications, Expedition's history): its mini face, a link to its
   detail, and its name beside it */
.cthumb{display:flex;align-items:center;gap:10px;min-width:0}
.cthumb .cname{min-width:0;overflow-wrap:break-word}
.cmini{display:block;flex:none;line-height:0;text-decoration:none;cursor:pointer}
/* THE SOCIAL PAGE'S FIVE DOORS, in outline like the navigation's */
/* Friends: a heart -- the two figures are the Social tab's */
.icon-friends{--mk-src:url("assets/Icons/svg/RPG_Stat_HP_Health_Heart.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
/* Trades: two arrows that cross */
.icon-trades{--mk-src:url("assets/Icons/svg/Arrows_Media_Controls_Swap_Shuffle.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
/* Market: a stall */
.icon-market{--mk-src:url("assets/Icons/svg/Map_Markers_Building_Shop_Storefront.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
/* Guild: a heraldic banner */
.icon-guild{--mk-src:url("assets/Icons/svg/Map_Markers_Banner_Heraldry_Hanging.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
/* Rankings: a trophy */
.icon-rankings{--mk-src:url("assets/Icons/svg/Sports_Winner_Award_Cup_Achievement_Trophy.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
/* THE RARITY'S ICON (places.js, rarityIcon): an inline SVG, the pack's
   sprite on its own 16 x 16 grid (stars, 2026-09), filled with currentColor --
   IN ITS RARITY'S COLOUR EVERYWHERE, the cards included. Shown at whole
   multiples of its grid only, so it stays sharp: 16px in the
   interface, 32px on a card at its full size. */
.ri{display:inline-block;width:16px;height:16px;flex:none;vertical-align:-3px;overflow:visible}
.ri.x2{width:32px;height:32px}
/* THE COMMON BOX. The type and version icons are the rarity icons'
   size and line: a 16 box on the pack's grid, centred on its drawing
   (tools/mark-icons.py), 16px beside a label in the interface -- a
   filter, the fiche, Expedition's zones -- like the rarity icon. On a
   card, .tcard .marks sizes all three. */
.icon-city,.icon-faith,.icon-power,.icon-culture,
.icon-works,.icon-ruins,.icon-land,.icon-water,
/* THE FOIL'S DIAMONDS, SHINING, OFF A CARD (2026-09: the Home's table of
   rarities, the Foil column). On a card the iridescence moves with the
   tilt; here nothing tilts, so the same kind of wheel drifts through the
   drawing on the cards' own beat (2.6 s, their swing) -- the wheel of
   the Foil's small print, which reads on cream at 16 (4.6 to 1), where
   the pale wheel of the card's icons would all but vanish. Still under
   reduced motion. The third continuous movement of the game
   (docs/DA-regles.md). */
@keyframes foil-shine{0%,100%{background-position:0% 50%} 50%{background-position:100% 50%}}
.icon.foil-live{
  background:linear-gradient(115deg,
    #0A8246 0%, #0D79A1 24%, #9214FF 46%, #D6118E 68%, #8C6C0B 88%, #0A8246 100%);
  background-size:300% 300%;
  animation:foil-shine 2.6s cubic-bezier(.37,0,.63,1) infinite}
@media (prefers-reduced-motion: reduce){
  .icon.foil-live{animation:none;background-position:50% 50%}
}
.icon-affix-standard,.icon-affix-foil,.icon-affix-fullart,.icon-affix-secret{
  width:16px;height:16px;vertical-align:-3px}
.ri.x3{width:48px;height:48px}
.ri-C{color:var(--r-C)}
.ri-UC{color:var(--r-UC)}
.ri-R{color:var(--r-R)}
.ri-SR{color:var(--r-SR)}
.ri-UR{color:var(--r-UR)}
.ri-L{color:var(--r-L)}
/* an achievement's medal: the tier reached is its colour (profile.html) */
.icon-medal{--mk-src:url("assets/Icons/svg/Sports_Winner_Award_Medal.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
/* Expedition's cost: a price tag, under each card of a team */
.icon-cost{--mk-src:url("assets/Icons/svg/Map_Markers_Price_Tag_Store.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
/* Expedition's waiting room: a compass that turns by steps */
.icon-compass{--mk-src:url("assets/Icons/svg/Map_Markers_Compass_Rose_2.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
/* the music player's, in Settings */
.icon-prev   {--mk-src:url("assets/Icons/svg/Arrows_Media_Controls_Previous.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
.icon-play   {--mk-src:url("assets/Icons/svg/Arrows_Media_Controls_Play_Triangle.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
.icon-pause  {--mk-src:url("assets/Icons/svg/Arrows_Media_Controls_Pause.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
.icon-next   {--mk-src:url("assets/Icons/svg/Arrows_Media_Controls_Next.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
.icon-reset  {--mk-src:url("assets/Icons/svg/Arrows_Reload_Refresh_Rotate_Counterclockwise.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
.icon-unknown{--mk-src:url("assets/Icons/svg/Software_Warning_Sign_Circle_Question_Mark_Help.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
.icon-globe  {--mk-src:url("assets/Icons/svg/Software_Planet_Geography_Localization_Global_Language_Translation_1.svg");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}

/* ---------- rarity and affix, on the card's attribute row ----------
   The rarity is an inline SVG (places.js, rarityIcon), the version
   marks are masks below; both are drawn on the pack's 16 x 16 grid. */
/* THE PADLOCK: a sixteen-pixel drawing, shackle and body, with the
   keyhole cut out -- a one-bit stencil like every other icon. */
.icon-lock{--mk-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M6 1h4v2H6zM4 2h2v5H4zM10 2h2v5h-2zM3 7h10v8H3zM7 9h2v4H7z'/%3E%3C/svg%3E");
              -webkit-mask-image:var(--mk-src);
              mask-image:var(--mk-src)}
/* ---------- the version marks ----------
   Drawn in the common box by tools/mark-icons.py. standard and fullart
   are both a card: the one with its photograph in a box, the other
   with its picture running to the edges -- an ordinary layout against
   a photograph bled to the edges. */
.icon-affix-standard{--mk-src:url("assets/Icons/svg/Mark_Standard.svg");
                     -webkit-mask-image:var(--mk-src);
                     mask-image:var(--mk-src)}
.icon-affix-foil    {--mk-src:url("assets/Icons/svg/Mark_Foil.svg");
                     -webkit-mask-image:var(--mk-src);
                     mask-image:var(--mk-src)}
.icon-affix-fullart {--mk-src:url("assets/Icons/svg/Mark_Fullart.svg");
                     -webkit-mask-image:var(--mk-src);
                     mask-image:var(--mk-src)}
.icon-affix-secret  {--mk-src:url("assets/Icons/svg/Mark_Secret.svg");
                     -webkit-mask-image:var(--mk-src);
                     mask-image:var(--mk-src)}

/* =====================================================================
   THE FINISHES -- DATA ONLY, NOTHING DRAWN YET
   card.js writes art-<frame> and fin-<finish> on every .tcard from the
   recipe in AFFIXES. The classes exist so the markup is already right
   and so a card can be found in the DOM; the metal and the gold are
   not designed. Leave them empty rather than guessing: a half-drawn
   foil is worse than none, and the DA has nothing to say about them
   yet.
   ===================================================================== */
.tcard.art-inset{}    /* the ordinary layout: the photograph in its box */
/* =====================================================================
   FULL ART — la photographie occupe la carte, et rien d'autre ne bouge

   UNE FULL ART ET UNE STANDARD DU MÊME LIEU SE SUPERPOSENT. C'est la
   règle, et c'est ce qui contraint tout le reste : le nom en haut à
   gauche, l'endurance en haut à droite, la ligne d'attributs à sa
   place, le crédit et le numéro en bas, aux mêmes pixels. La seule
   différence est que la photographie passe derrière tout, bord à bord.

   COMMENT LA MISE EN PAGE NE BOUGE PAS. `.shot` reste DANS LE FLUX et
   garde exactement la boîte qu'elle occupe sur une standard -- c'est
   elle qui pousse le pied en bas. Elle perd seulement son cadre et sa
   position relative, si bien que l'image à l'intérieur se place par
   rapport à la CARTE et la couvre entièrement.

   Une version précédente posait un bandeau crème sous le texte. Elle
   est supprimée : elle coupait la carte en deux, et la photographie
   n'occupait plus qu'une fenêtre. Rien ne masque plus la photo.
   ===================================================================== */
.tcard.art-bleed .shot{
  position:static;                 /* l'image se cale sur la carte */
  border:0;background:none;overflow:visible;
}
.tcard.art-bleed .shot .pic{
  position:absolute;inset:0;
  width:100%;height:100%;
  border-radius:22px;
  z-index:0;
}
/* =====================================================================
   L'IMPRIMÉ D'UNE FULL ART : UNE SEULE COULEUR POUR TOUTE LA CARTE

   Une Full Art imprime sur sa photographie, sans contour ni ombre
   autour du texte, et dans UNE couleur -- jamais crème en haut et sépia
   en bas. La couleur est choisie une fois par carte à la génération du
   catalogue (tools/fullart_tone.py) : les deux zones de texte sont
   mesurées, et la carte prend celle qui se lit le mieux sur la plus
   contraignante des deux. card.js la pose en classe (toneClasses) :

     tone-light   photo claire : tout l'imprimé en encre sépia
     tone-dark    photo sombre : tout l'imprimé en crème

   TOUT L'IMPRIMÉ EST DE CETTE COULEUR : textes, icônes, trait de
   bordure et trait de séparation. Le drapeau n'est pas de l'encre.

   EN FOIL, L'IRISÉ PASSE PAR-DESSUS, comme sur une Standard Foil : la
   roue vive de l'encre sur le sépia (le plancher des petits corps en
   bas), la roue claire du Foil sur le crème.
   ===================================================================== */
.tcard.art-bleed.tone-light{--print:var(--sepia);--veil:255,248,231;
  --iris-print:linear-gradient(var(--iris-angle),
    #0D9E55 0%, #1094C4 24%, #9214FF 46%, #FF14A9 68%, #AD860E 88%, #0D9E55 100%);
  --iris-fine:linear-gradient(var(--iris-angle),
    #0A8246 0%, #0D79A1 24%, #9214FF 46%, #D6118E 68%, #8C6C0B 88%, #0A8246 100%);}
.tcard.art-bleed.tone-dark{--print:var(--paper);--veil:20,18,16;
  --iris-print:linear-gradient(var(--iris-angle),
    #7CFFC4 0%, #7BE3FF 22%, #FFE9FF 42%, #FFB6DC 62%, #FFE08C 82%, #7CFFC4 100%);
  --iris-fine:linear-gradient(var(--iris-angle),
    #7CFFC4 0%, #7BE3FF 22%, #FFE9FF 42%, #FFB6DC 62%, #FFE08C 82%, #7CFFC4 100%);}

/* tout le texte passe devant l'image, sans rien derrière lui, et sans
   aucun contour : ni `-webkit-text-stroke`, ni ombre, ni halo */
.tcard.art-bleed > .head,
.tcard.art-bleed > .marks,
.tcard.art-bleed > .foot{position:relative;z-index:3;background:none;
  -webkit-text-stroke-width:0;paint-order:normal}
.tcard.art-bleed .head .name span,
.tcard.art-bleed .head .power b,
.tcard.art-bleed .head .power span,
.tcard.art-bleed .marks .lb,
.tcard.art-bleed .marks .icon,
.tcard.art-bleed .foot .credit,
.tcard.art-bleed .foot .ident{color:var(--print)}

/* LA BORDURE ET LE TRAIT DE SÉPARATION d'une Full Art sont ceux de
   toute carte (LES TRAITS DE LA CARTE), posés sur la photographie, sans
   aucun fond de bande, dans la couleur de l'imprimé ; en Foil, son
   irisé. */
.tcard.art-bleed > .lis{z-index:4}
.tcard.art-bleed.fin-metal .head .name span,
.tcard.art-bleed.fin-metal .head .power b,
.tcard.art-bleed.fin-metal .head .power span,
.tcard.art-bleed.fin-metal .marks .lb,
.tcard.art-bleed.fin-metal .foot .credit,
.tcard.art-bleed.fin-metal .foot .ident{
  background-image:var(--iris-print);
  background-size:170% 100%;
  background-position:calc(50% - var(--swx) * var(--iris-encre) * 1%) 50%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  transition:background-position 120ms linear;
}
/* le plancher des petits corps : crédit, numéro */
.tcard.art-bleed.fin-metal .foot .credit,
.tcard.art-bleed.fin-metal .foot .ident{background-image:var(--iris-fine)}
/* les icônes sont des masques : l'irisé se peint à travers le dessin */
.tcard.art-bleed.fin-metal .marks .icon,
.tcard.art-bleed.fin-metal .foot .icon{
  background-image:var(--iris-print);
  background-size:300% 300%;
  background-position:calc(50% - var(--swx) * var(--iris-encre) * 1%)
                      calc(50% - var(--swy) * 1%);
  transition:background-position 120ms linear;
}
@media (prefers-reduced-motion: reduce){
  .tcard.art-bleed.fin-metal .head .name span,
  .tcard.art-bleed.fin-metal .head .power b,
  .tcard.art-bleed.fin-metal .head .power span,
  .tcard.art-bleed.fin-metal .marks .lb,
  .tcard.art-bleed.fin-metal .foot .credit,
  .tcard.art-bleed.fin-metal .foot .ident,
  .tcard.art-bleed.fin-metal .marks .icon{transition:none}
}

/* LE VOILE (veil-top, veil-bot), dans la zone où la couleur de la
   carte contraste mal avec la photo : un léger dégradé, derrière le
   texte seulement, de la couleur du fond que l'encre attend (crème
   sous le sépia, encre sous le crème), transparent, qui s'estompe
   jusqu'à rien vers la photographie, sans bord visible. Au-dessus de la
   photo, sous la bande de lumière et sous le texte (z-index 1). Celui
   du haut couvre le nom et la Force (24 + 80 = 104 px) et s'efface sur
   les 56 suivants ; celui du bas couvre la ligne, son trait et le pied
   (40 + 16 + 20 + 26 = 102 px) et s'efface au-dessus. */
.tcard.art-bleed.veil-top .shot::before,
.tcard.art-bleed.veil-bot .shot::after{
  content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none;
}
.tcard.art-bleed.veil-top .shot::before{
  top:0;height:160px;border-radius:22px 22px 0 0;
  background:linear-gradient(to bottom,
    rgba(var(--veil), .40) 0%, rgba(var(--veil), .32) 55%,
    rgba(var(--veil), .12) 82%, rgba(var(--veil), 0) 100%);
}
.tcard.art-bleed.veil-bot .shot::after{
  bottom:0;height:170px;border-radius:0 0 22px 22px;
  background:linear-gradient(to top,
    rgba(var(--veil), .40) 0%, rgba(var(--veil), .32) 45%,
    rgba(var(--veil), .12) 75%, rgba(var(--veil), 0) 100%);
}

/* LA LIGNE D'ATTRIBUTS D'UNE FULL ART EST UNE COLONNE. Sur une carte
   standard les quatre marques tiennent dans une grille de deux par
   deux ; sur une full art elles passent en une seule colonne calée à
   gauche, dans l'ordre PAYS, RARETÉ, TYPE, AFFIXE.

   L'ordre du balisage est pays, type, rareté, affixe -- celui de la
   carte standard, qui ne change pas -- donc les deux du milieu sont
   simplement échangées par `order`. Rien n'est réécrit dans card.js :
   une disposition n'a pas à remonter dans le composant.

   C'est la seule chose qui ne se superpose plus à la standard, et
   c'est voulu. */
/* UN PEU D'AIR ENTRE LES LIGNES : chaque rangée est une case de 32 px
   où l'icône de 32 tient tout juste (son dessin fait 30 au plus) ;
   4 px entre deux cases laissent au moins 6 px entre deux dessins. La
   colonne fait 140 px, pris sur la case de la photographie (`.shot`,
   flex:1), si bien que la ligne de coordonnées et le pied restent où
   ils sont. */
/* (2026-09) LA COLONNE EST RETIRÉE : une Full Art porte les mêmes deux
   lignes que toute carte, au même endroit, posées sur sa photographie
   dans la couleur de son imprimé -- le type et la rareté, puis le pays
   et ses coordonnées --, et le même pied. Les blocs de toutes les
   cartes, Full Art comprises, sont alignés au pixel. */

/* NI LES ICÔNES NI LE TEXTE N'ONT DE CONTOUR. Ils sont posés
   directement sur la photographie : ni fond, ni boîte, ni liseré. Une
   icône reste ce qu'elle est sur une carte standard, un masque peint en
   `currentColor` -- l'encre de sa zone. */
.tcard.fin-none {}    /* standard and alt: no finish at all             */
.tcard.fin-metal{}    /* foil and full art: a metal edge, to be drawn   */
.tcard.fin-gold {}    /* secret only: gold, to be drawn                 */

/* For headings a page needs for its structure but must not show. The
   Packs page is one object in an empty room; its <h1> still has to
   exist for anything reading the document rather than looking at it. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- the photograph's rights, in a detail panel ----------
   Never on a card. A card names the photographer; this names the
   licence, and links the file and the deed. Shared by the Map sheet
   and the Album, so it is defined once here and not twice there. */
.photocredit{border-top:var(--edge) solid var(--line);margin-top:12px;
  padding-top:10px;display:flex;flex-direction:column;gap:5px}
.photocredit b{font-family:var(--pixel);font-size:16px;font-weight:400;
  text-transform:uppercase;letter-spacing:.08em;color:var(--line)}
.photocredit .by{font-size:16px;color:var(--ink)}
.photocredit .links{font-family:var(--pixel);font-size:16px;color:var(--ink-soft);
  line-height:1.9}
.photocredit .links a{color:var(--ink-soft);text-decoration:underline}
.photocredit .links a:hover,.photocredit .links a:focus-visible{color:var(--ink)}
/* the description's source, in small print under its text, no heading */
.textcredit{margin:6px 0 0;font-family:var(--pixel);font-size:16px;line-height:1.5;color:var(--ink-soft)}
.textcredit a{color:var(--ink-soft);text-decoration:underline}
.textcredit a:hover,.textcredit a:focus-visible{color:var(--ink)}

/* ---------- boxes ---------- */
.box{background:var(--cream);border:var(--edge) solid var(--ink)}
.box-quiet{background:var(--cream);border:var(--edge) solid var(--line)}
.deep{background:var(--cream-deep)}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--pixel);
  font-size:16px;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--cream);
  border:var(--edge) solid var(--ink);
  padding:10px 18px;
  cursor:pointer;
  display:inline-block;
  --btn-edge:var(--ink);
}
/* THE HOVER, ONE FOR EVERY BUTTON: the colours never change. The
   button lifts two pixels up and to the left, over a solid two-pixel
   shadow in its own border colour -- no blur, the only shadow of the
   interface. Pressed, it lands back in place. A dark button and a
   light one hover the same way. The same rule is repeated for the
   buttons that do not carry .btn (index.html .helpbtn, map.html
   #cvClose). */
.btn:hover,.btn:focus-visible{transform:translate(-2px,-2px);box-shadow:2px 2px 0 var(--btn-edge);text-decoration:none}
.btn:active{transform:none;box-shadow:none}
.btn:disabled,.btn[disabled]{color:var(--line);border-color:var(--line);cursor:default}
.btn:disabled:hover,.btn[disabled]:hover,.btn:disabled:focus-visible,.btn[disabled]:focus-visible{transform:none;box-shadow:none}
.btn-quiet{border-color:var(--line);color:var(--ink-soft);--btn-edge:var(--line)}
/* SIGN IN WITH APPLE: Apple's black button (its Human Interface
   Guidelines: black, white title, Apple's own logo left of it). The
   title is in Apple's system font, as Apple asks -- San Francisco on its
   devices, the system's own font elsewhere --, never the game's pixel
   font, and written as Apple writes it (no capitals forced). The game's
   shape, size and hover; as prominent as the other ways in, never less
   (settings.html, subscription.js) */
.btn-apple{background:#000;color:#fff;border-color:#000;--btn-edge:#000;
  font-family:-apple-system, BlinkMacSystemFont, system-ui, sans-serif;font-weight:500;text-transform:none}
.btn-apple .apple-logo{display:block;width:16px;height:16px;flex:none}
/* the ways in offered in a window (account.js, SIGNIN: the pass, the
   founder's pack, a guest refused, a "Sign in" button), as in Settings:
   the three buttons one under the other, the letter's field below */
.signin-block .signin{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:12px}
.signin-block .btn-signin{display:inline-flex;align-items:center;gap:10px}
.signin-block .btn-signin img{display:block;width:16px;height:16px;flex:none;image-rendering:pixelated}
.signin-block .mailbox{margin-top:12px}
.signin-block .mailbox .chatform{flex-wrap:wrap}
.signin-block .mailbox .chatform input{min-width:12em}
.signin-block .mailbox .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.signin-block .hint,.signin-block .note{margin-top:10px;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.signin-block .note{color:var(--ink)}

/* ---------- content pages ---------- */
.content{max-width:960px;margin:0 auto;padding:40px 24px 72px}
.page-head{border-bottom:var(--edge) solid var(--ink);padding-bottom:16px;margin-bottom:26px}
.page-head h1{font-size:24px}
.page-head .sub{color:var(--ink-soft);font-size:16px;margin-top:8px}
/* a way back under a title ("Back to Social"): in the interface's font */
.page-head .sub > a{font-family:var(--pixel);text-transform:uppercase}
.section-title{font-size:16px;color:var(--ink-soft);margin:34px 0 12px}
.kicker{font-size:16px;color:var(--ink-soft)}

/* =====================================================================
   Navigation column + page
   ===================================================================== */
main{grid-column:2;grid-row:1;min-width:0;min-height:0;position:relative;overflow:auto}
body.fixed main{overflow:hidden}

/* =====================================================================
   EVERY SCREEN, BY WIDTH AND BY KIND OF POINTER -- never by device.
   ===================================================================== */
/* THE HEIGHT REALLY VISIBLE, at every width: 100% of the window is, on
   Safari for the iPad and the iPhone, the height with the browser's
   bars folded away, so the foot of a page went under them */
@supports (height: 100dvh){
  html, body{height:100dvh}
}
/* THE SAFE AREAS OUTSIDE THE PHONE'S LAYOUT: an iPhone on its side is
   wide enough for the navigation column, and its notch is on that side */
@media (min-width: 721px){
  .nav{padding-left:env(safe-area-inset-left)}
  main{padding-right:env(safe-area-inset-right)}
}
/* A FINGER, NOT A MOUSE (pointer: coarse): every control at least
   44 x 44 px, the size a fingertip covers; a field's text at 16 px or
   more, under which Safari zooms the page on it */
@media (pointer: coarse){
  .btn, button.btn{min-height:44px;min-width:44px}
  /* a player's chip, a way back under a title, a small link of the foot:
     their whole line is the target */
  a.pchip, .page-head .sub > a, .legal-link a{display:inline-flex;align-items:center;min-height:44px}
  /* a box to tick is larger, and its label around it takes the finger;
     :not(#_) outweighs the pages' own 18 px boxes (album, market, music) */
  input[type=checkbox]:not(#_){width:24px;height:24px;flex:none}
  label:has(> input[type=checkbox]){min-height:44px;display:inline-flex;align-items:center}
  summary{min-height:44px;display:flex;align-items:center}
  select, input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea{
    min-height:44px;font-size:max(16px, 1em)}
}

.nav{
  grid-column:1;
  grid-row:1;
  background:var(--cream);
  border-right:var(--edge) solid var(--ink);
  display:flex;
  flex-direction:column;
  z-index:1000;
}
/* The mark heads the column, above the six entries, on every page, and
   a click on it goes home. The column is 100px wide; the 32 shown at 1
   leaves 34px of paper either side of it. */
.nav .brand{
  display:grid;
  place-items:center;
  padding:16px 4px;
  border-bottom:var(--edge) solid var(--ink);
}
/* the mark at the head of the column: 32 on a 100px column, taking the
   navigation's ink through currentColor like every other rose */
.nav .brand .rose{display:block;--rose-w:32px}
.nav .brand:hover,.nav .brand:focus-visible{background:var(--cream-deep)}
.nav a.item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:14px 4px;
  color:var(--ink-soft);
  border-left:var(--edge) solid transparent;
}
.nav a.item:hover,.nav a.item:focus-visible{background:var(--cream-deep);color:var(--ink);text-decoration:none}
.nav a.item[aria-current="page"]{
  background:var(--cream-deep);
  color:var(--ink);
  border-left-color:var(--ink);
}
/* the icon inherits the item's colour, so hover and the current page
   carry it without a second rule */
/* the entries sit in a track: a column here, a sideways scroller in the
   phone's bar. Home only exists in the bar: the mark above does it here.
   a.item.item-home, not .item-home: .nav a.item{display:flex} is more
   specific than the class alone, and left an empty cell under the mark */
.nav-track{display:flex;flex-direction:column}
.nav a.item.item-home{display:none}
/* THE LABELS STAY AT 16, AND THE COLUMN MAKES ROOM. At 16 SETTINGS is
   about 83px wide and ran from one edge of the old 84px column to the
   other. The type does not give: Silkscreen is sharp at 8, 16, 24 and 32
   and nowhere between -- 12 would put each of its pixels on one and a
   half screen pixels -- and 8 was too small to read. Tightening the
   letters by a pixel would have left four pixels a side. So the column
   is 100px (--nav-w), about eight pixels of paper either side of the
   longest label, and the six labels keep one size. */
.nav a.item span{font-family:var(--pixel);font-size:16px;text-transform:uppercase;
  /* ONE LINE, NEVER A BROKEN WORD, IN SIX LANGUAGES. Each language names
     its entries with its shortest natural word (docs/glossaire.md,
     Optionen, Opzioni), and a label that still does not fit the 92px the
     column leaves is set smaller by nav.js (fitLabels), the way a card
     fits its labels: 16 down to 8, then tighter. */
  max-width:100%;text-align:center;line-height:1.2;white-space:nowrap}
/* the unread social notifications, a square of ink at the icon's
   top right corner; Silkscreen at 8, the size it is sharp at */
.nav a.item{position:relative}
.nav .badge{position:absolute;top:8px;left:calc(50% + 10px);min-width:18px;padding:3px 3px 2px;
  background:var(--ink);color:var(--cream);font-family:var(--pixel);font-weight:400;
  font-size:8px;line-height:1;text-align:center}

/* Settings is the sixth entry and nothing more: no rule above it, no
   margin pushing it to the foot. Six items, one treatment, one spacing,
   in the order they are declared in nav.js. */

@media(max-width:720px){
  /* one column: page on top, navigation as a bar at the bottom. The
     body is the height the phone really shows (dvh, not the theoretical
     vh that runs under the browser's own bars), and it never scrolls:
     only <main> does. So the bar stays put, above the gesture strip,
     which it pads itself away from (env(safe-area-inset-bottom), with
     viewport-fit=cover on every page). */
  /* THE PAGE ITSELF NEVER MOVES. html and body are exactly the screen
     and scroll in neither direction, without a bounce; only <main>
     scrolls, and only downwards. The one column is minmax(0, 1fr): a
     plain 1fr let the bar's row of entries widen the column -- and the
     whole page with it -- to the length of the bar, so a sideways swipe
     on the bar moved the page. */
  html,body{overflow:hidden;overscroll-behavior:none;width:100%;max-width:100vw}
  body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;height:100vh;height:100dvh}
  main{grid-column:1;grid-row:1;overscroll-behavior-y:contain}
  .nav{
    grid-column:1;
    grid-row:2;
    position:relative;
    flex-direction:row;
    border-right:none;
    border-top:var(--edge) solid var(--ink);
    padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    min-width:0;max-width:100vw;overflow:hidden;
    /* a gesture begun on the bar belongs to the bar: nothing vertical
       is passed on, and the page never takes over at the ends */
    touch-action:pan-x;overscroll-behavior:none;
  }
  /* In the bar there is no above: the mark stays on the column, where
     it has a top, and Home takes the first place instead. */
  .nav .brand{display:none}
  .nav a.item.item-home{display:flex;min-width:64px}
  /* the mark, the same 32 as the icons beside it */
  .nav .item-home .rose{display:block;--rose-w:32px}
  /* THE TRACK SCROLLS SIDEWAYS AND ONLY SIDEWAYS. Nothing is shrunk:
     the icons stay at 32, the labels at 16, and the entries run on past
     the edge when they do not all fit. A vertical thumb on the bar does
     nothing at all -- touch-action lets only a sideways pan through,
     so the bar can never be dragged up or down with the page. */
  .nav-track{flex-direction:row;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;
    touch-action:pan-x;overscroll-behavior:none;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .nav-track::-webkit-scrollbar{display:none}
  .nav a.item{flex:0 0 auto;min-width:76px;height:calc(var(--nav-h) - var(--edge));
    padding:8px 12px 6px;border-left:none;
    border-top:var(--edge) solid transparent}
  .nav a.item[aria-current="page"]{border-left-color:transparent;border-top-color:var(--ink)}
  .nav a.item span{font-size:16px;line-height:1.2;white-space:nowrap}
  /* the cut edge: a soft fade of the paper over the last entries, on the
     side that has more (nav.js sets .more-left and .more-right) -- one
     of the few gradients of the project, see DA-regles.md */
  .nav::before,.nav::after{content:"";position:absolute;top:0;bottom:env(safe-area-inset-bottom);
    width:28px;pointer-events:none;z-index:2;opacity:0}
  .nav::before{left:env(safe-area-inset-left);background:linear-gradient(to right, var(--cream), rgba(251,240,216,0))}
  .nav::after{right:env(safe-area-inset-right);background:linear-gradient(to left, var(--cream), rgba(251,240,216,0))}
  .nav.more-left::before,.nav.more-right::after{opacity:1}
  .content{padding:28px 16px 40px}
  /* A BUTTON ON A PHONE IS FOR A THUMB: 44px high at least, its word
     centred, on every page with content (not the Packs scene, whose
     buttons are sized with it) */
  .content .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  /* THE LISTS ARE COMPACT ROWS: a player's row keeps its avatar and
     name on one line, and its buttons share the line under it */
  .prow{padding:8px 12px;gap:8px 12px}
  .pact{gap:8px}
  .pact .btn{flex:1 1 auto}
  /* a safety net under the page layouts: nothing may push the page
     sideways on a phone, whatever a long word or a wide row does */
  main{overflow-x:hidden}
  .chat .msg p,.pmeta b,.me-id h2{overflow-wrap:anywhere}
}