/* The game cards of the home page and of Mochalunt (one card: <a|div class="gc c-<game>"> with <span class="ct">name</span>
   <span class="bar"></span><span class="art"></span>); the pages lay them out. The images are fixed files made from the
   recipes in maquettes/final/: a change to a game's page does not change its card. Dark colours as in common/theme.js. */
/* game cards: the game's name top left, a piece of its board bottom right behind an oblique cut underlined in the
   game's accent; each card takes the game page's tint, ink and accent (dark: its panel tint); images in img/cartes/ */
.gc{position:relative;display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--gbg);color:var(--gink);text-decoration:none;isolation:isolate}
.gc .ct{position:absolute;left:18px;top:14px;z-index:3;max-width:50%;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:2.15rem;line-height:1.05;letter-spacing:-.01em;transition:color .2s}
.gc .ct em{font-style:italic}
.c-ponte .ct{font-size:1.9rem}
a.gc:hover .ct,a.gc:focus-visible .ct{color:var(--gacc)}
a.gc:focus-visible{outline:2px solid var(--gacc);outline-offset:3px}
/* the image fills the right 76 % exactly (it has that box's proportions); cut from 52 % at the top to the box's left edge
   at the bottom, with a 6 px bar in the accent along the cut */
.gc .art,.gc .bar{position:absolute;right:0;top:0;bottom:0;width:76%}
.gc .art{background:var(--img) center/cover no-repeat;clip-path:polygon(calc(52% + 6px) 0,100% 0,100% 100%,6px 100%)}
.gc .bar{background:var(--gacc);clip-path:polygon(52% 0,calc(52% + 6px) 0,6px 100%,0 100%)}
.c-pente{--gbg:#e8d1d1;--gink:#1B211F;--gacc:#9C2E3A;--img:url(../img/cartes/pente.svg)}
.c-ponte{--gbg:#ece4d9;--gink:#1d2729;--gacc:#a8761c;--img:url(../img/cartes/ponte.svg)}
.c-zertz{--gbg:#c5dce2;--gink:#1c282d;--gacc:#5b8792;--img:url(../img/cartes/zertz.svg)}
.c-volo{--gbg:#ccd9e9;--gink:#1c282d;--gacc:#2f6fd6;--img:url(../img/cartes/volo.svg)}
.c-arimaa{--gbg:#c5dce2;--gink:#26231d;--gacc:#2f7d8c;--img:url(../img/cartes/arimaa.svg)}
.c-gyges{--gbg:#ede4d9;--gink:#26231d;--gacc:#d98f1f;--img:url(../img/cartes/gyges.svg)}
.c-tintas{--gbg:#dbd4e6;--gink:#1d2629;--gacc:#6a3790;--img:url(../img/cartes/tintas.svg)}
.c-dblocks{--gbg:#f0e1e5;--gink:#22231f;--gacc:#9c2457;--img:url(../img/cartes/dblocks.svg)}
.c-quarto{--gbg:#cad4bb;--gink:#26231d;--gacc:#6f8f66;--img:url(../img/cartes/quarto.svg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .c-pente{--gbg:#251b1b;--gink:#E5EAE6;--gacc:#b8434f;--img:url(../img/cartes/pente-dark.svg)}:root:not([data-theme="light"]) .c-ponte{--gbg:#29241c;--gink:#e3e8e6;--gacc:#e0a94a;--img:url(../img/cartes/ponte-dark.svg)}:root:not([data-theme="light"]) .c-zertz{--gbg:#152023;--gink:#e2e9eb;--gacc:#5d8a98;--img:url(../img/cartes/zertz-dark.svg)}:root:not([data-theme="light"]) .c-volo{--gbg:#1a1e26;--gink:#e2e9eb;--gacc:#6aa2f5;--img:url(../img/cartes/volo-dark.svg)}:root:not([data-theme="light"]) .c-arimaa{--gbg:#201e19;--gink:#ebe6db;--gacc:#3f95a5;--img:url(../img/cartes/arimaa-dark.svg)}:root:not([data-theme="light"]) .c-gyges{--gbg:#2d261f;--gink:#ebe5d8;--gacc:#efa93c;--img:url(../img/cartes/gyges-dark.svg)}:root:not([data-theme="light"]) .c-tintas{--gbg:#201c24;--gink:#e2e9eb;--gacc:#a676d4;--img:url(../img/cartes/tintas-dark.svg)}:root:not([data-theme="light"]) .c-dblocks{--gbg:#251b1e;--gink:#e6e8e3;--gacc:#d4588a;--img:url(../img/cartes/dblocks-dark.svg)}:root:not([data-theme="light"]) .c-quarto{--gbg:#1d2f21;--gink:#ebe5d8;--gacc:#9cb894;--img:url(../img/cartes/quarto-dark.svg)}}
:root[data-theme="dark"] .c-pente{--gbg:#251b1b;--gink:#E5EAE6;--gacc:#b8434f;--img:url(../img/cartes/pente-dark.svg)}:root[data-theme="dark"] .c-ponte{--gbg:#29241c;--gink:#e3e8e6;--gacc:#e0a94a;--img:url(../img/cartes/ponte-dark.svg)}:root[data-theme="dark"] .c-zertz{--gbg:#152023;--gink:#e2e9eb;--gacc:#5d8a98;--img:url(../img/cartes/zertz-dark.svg)}:root[data-theme="dark"] .c-volo{--gbg:#1a1e26;--gink:#e2e9eb;--gacc:#6aa2f5;--img:url(../img/cartes/volo-dark.svg)}:root[data-theme="dark"] .c-arimaa{--gbg:#201e19;--gink:#ebe6db;--gacc:#3f95a5;--img:url(../img/cartes/arimaa-dark.svg)}:root[data-theme="dark"] .c-gyges{--gbg:#2d261f;--gink:#ebe5d8;--gacc:#efa93c;--img:url(../img/cartes/gyges-dark.svg)}:root[data-theme="dark"] .c-tintas{--gbg:#201c24;--gink:#e2e9eb;--gacc:#a676d4;--img:url(../img/cartes/tintas-dark.svg)}:root[data-theme="dark"] .c-dblocks{--gbg:#251b1e;--gink:#e6e8e3;--gacc:#d4588a;--img:url(../img/cartes/dblocks-dark.svg)}:root[data-theme="dark"] .c-quarto{--gbg:#1d2f21;--gink:#ebe5d8;--gacc:#9cb894;--img:url(../img/cartes/quarto-dark.svg)}