/* The games of the site on a public page, in the theme of the app (2026-10-27): the items of the lobby of the space
   (static/css/espace.css, .lc-deck: a cream card with the plain plum shadow of the app, the name of the game, its line,
   « Jouer », its drawing on its colours from template/espace/partials/lc-art.php), in a block of framboise. Everything
   is scoped to .lc-pubGames, with its own variables: the site already uses --lc-shadow for something else. */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("../fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.lc-pubGames {
  --lcg-cream: #fbf8ef;
  --lcg-plum: #702a71;
  --lcg-mauve: #8d346a;
  --lcg-rose: #c4285b;
  --lcg-shadow: rgba(112, 42, 113, .45);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* On a phone, the block takes the width of the white card of the article (its padding, less a thin margin), as the
     lobby gives its items the width of the screen. */
  margin: 30px calc(10px - clamp(22px, 4vw, 42px));
  padding: 24px 12px 28px;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 6%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 34%),
    linear-gradient(170deg, #d70298 0%, #b0128a 24%, #8d346a 58%, #702a71 100%);
  color: #ffffff;
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
  scroll-margin-top: 24px;
}

/* The site gives its titles and paragraphs its own font (static/css/styles.css); here, the font of the app. */
.lc-pubGames :where(h2, p, span) {
  font-family: inherit;
}

/* Two classes: the article gives its titles and paragraphs a colour and a line height of its own (static/css/seo-pillar.css). */
.lc-pubGames .lc-pubGames__title {
  margin: 0 6px;
  color: #ffffff;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.12;
}

.lc-pubGames .lc-pubGames__lead {
  margin: -4px 6px 6px;
  color: rgba(255, 255, 255, .88);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.lc-pubGames .lc-deck {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px;
  min-height: 132px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--lcg-cream);
  box-shadow: 0 5px 0 var(--lcg-shadow);
  color: var(--lcg-plum);
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.lc-pubGames .lc-deck:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--lcg-shadow);
}

.lc-pubGames .lc-deck:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

.lc-pubGames .lc-deck__words {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 14px 14px 14px 18px;
}

.lc-pubGames .lc-deck__game {
  color: var(--lcg-rose);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lc-pubGames .lc-deck__card {
  color: var(--lcg-plum);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}

.lc-pubGames .lc-deck__go {
  color: var(--lcg-rose);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lc-pubGames .lc-deck__panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lc-pubGames .lc-deck__panel .lc-art {
  width: 92px;
  height: 92px;
}

/* Wider screens: the cards two by two, inside the white card, at the size of the lobby. */
@media (min-width: 760px) {
  .lc-pubGames {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 30px 0;
    padding: 32px 28px 36px;
  }

  .lc-pubGames .lc-deck {
    grid-template-columns: minmax(0, 1fr) 118px;
  }

  .lc-pubGames .lc-deck__panel .lc-art {
    width: 104px;
    height: 104px;
  }

  .lc-pubGames__title,
  .lc-pubGames__lead {
    grid-column: 1 / -1;
  }
}

/* The drawings of the games: what moves in them, softly (as in static/css/espace.css). */
.lc-pubGames .lc-art {
  display: block;
  overflow: visible;
}

.lc-pubGames .lc-art text {
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
}

.lc-pubGames .lc-art__word {
  text-transform: uppercase;
}

.lc-pubGames .lc-art__beat {
  transform-box: fill-box;
  transform-origin: center;
  animation: lc-beat 1.8s ease-in-out infinite;
}

.lc-pubGames .lc-art__twinkle {
  animation: lc-twinkle 2.8s ease-in-out infinite;
}

.lc-pubGames .lc-art__twinkle--2 { animation-delay: .9s; }
.lc-pubGames .lc-art__twinkle--3 { animation-delay: 1.7s; }

.lc-pubGames .lc-art__rise {
  animation: lc-art-rise 3.4s ease-in-out infinite;
}

.lc-pubGames .lc-art__spin {
  transform-origin: 60px 54px;
  animation: lc-spin 30s linear infinite;
}

.lc-pubGames .lc-art__glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: lc-art-glow 2.6s ease-in-out infinite;
}

.lc-pubGames .lc-art__hop {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: lc-art-hop 2.4s ease-in-out infinite;
}

.lc-pubGames .lc-art__needle {
  transform-origin: 60px 76px;
  animation: lc-art-needle 3.2s ease-in-out infinite;
}

@keyframes lc-beat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

@keyframes lc-twinkle {
  0%, 100% { opacity: .3; }
  50% { opacity: 1; }
}

@keyframes lc-art-rise {
  0%, 100% { opacity: .6; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-5px); }
}

@keyframes lc-spin {
  to { transform: rotate(360deg); }
}

@keyframes lc-art-glow {
  0%, 100% { opacity: .1; transform: scale(.94); }
  50% { opacity: .22; transform: scale(1.04); }
}

@keyframes lc-art-hop {
  0%, 60%, 100% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-6px) rotate(-6deg); }
}

@keyframes lc-art-needle {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .lc-pubGames .lc-art * {
    animation: none;
  }
}