/* The member space (template/espace): the night of the games, a column of forms on a phone, white cards in the
   lobby; the games full screen, with cards and dice of the night. */

body.esp-body {
  background: #2a0f33;
  /* The site hides the horizontal overflow of the body; clip does the same without making the body a scrolling box,
     so that the tab bar of the space sticks to the bottom of the screen. */
  overflow-x: clip;
  overflow-y: visible;
  -webkit-tap-highlight-color: transparent;
}

/* An app (2026-10-16): no scroll bar, no pull of the page that would reload it, the chrome not selectable, and the
   pages that melt into each other, the top and the tab bar staying in place (where the browser knows how). */
/* No scroll bar anywhere in the space, whichever box scrolls (the page, the body the site makes scroll, a list). */
* {
  scrollbar-width: none;
}

::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}

html {
  overscroll-behavior-y: none;
}

.esp-top,
.esp-tabs,
.esp-tile,
.esp-row {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

@view-transition {
  navigation: auto;
}

.esp-top {
  view-transition-name: esp-top;
}

.esp-tabs {
  view-transition-name: esp-tabs;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .22s;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* A column as high as the screen, whose middle grows (.esp-shell): the tab bar stays at its foot, even while the page
   fills. */
.esp-page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  /* clip, not hidden: the tab bar sticks to the bottom of the screen. */
  overflow: clip;
  color: #ffffff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background:
    radial-gradient(90% 34% at 50% 0%, rgba(247, 37, 133, .30), transparent 70%),
    radial-gradient(80% 40% at 100% 100%, rgba(139, 44, 246, .30), transparent 70%),
    linear-gradient(170deg, #2a0f33 0%, #3b163f 50%, #4a1d6e 100%);
}

.esp-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.esp-lights span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, var(--c), transparent 72%);
  box-shadow: 0 0 calc(var(--s) * 1.6) var(--c);
  animation: esp-drift var(--d) ease-in-out var(--delay) infinite alternate;
}

@keyframes esp-drift {
  from { transform: translate3d(0, 0, 0); opacity: .35; }
  to { transform: translate3d(0, -28px, 0); opacity: .9; }
}

@keyframes esp-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.esp-top,
.esp-shell {
  position: relative;
  z-index: 1;
  width: min(440px, calc(100% - 32px));
  margin: 0 auto;
}

.esp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0 10px;
}

.esp-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.01em;
  text-decoration: none;
}

.esp-brand img {
  border-radius: 11px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}

.esp-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(150deg, #6c4dff, #c8105a);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .18);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.esp-signout {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  background: none;
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.esp-shell {
  flex: 1 0 auto;
  padding: 8px 0 64px;
}

.esp-shell--tabs {
  padding-bottom: 40px;
}

.esp-kicker {
  margin: 0;
  color: #ffd98a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Said only when the space takes a while: most of the time the page is there before. In the lobby, which shows at
   once, it stays empty unless something goes wrong. */
.esp-loading:empty {
  display: none;
}

.esp-loading {
  margin: 48px 0;
  color: rgba(255, 255, 255, .8);
  font-weight: 700;
  text-align: center;
  animation: esp-in .3s ease .4s both;
}

.esp-page[data-state="ready"] .esp-loading {
  display: none;
}

/* The forms. */

.esp-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: esp-in .35s ease both;
}

.esp-panel[hidden] {
  display: none;
}

.esp-pill {
  align-self: center;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(255, 217, 138, .45);
  border-radius: 999px;
  background: rgba(255, 217, 138, .14);
  color: #ffd98a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
}

.esp-title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(26px, 7vw, 30px);
  font-weight: 850;
  letter-spacing: -.025em;
  line-height: 1.1;
  text-align: center;
}

.esp-intro {
  margin: 0;
  color: rgba(255, 255, 255, .86);
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}

.esp-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}

.esp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.esp-field label {
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
  font-weight: 800;
}

.esp-field input {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1.5px solid rgba(255, 255, 255, .24);
  border-radius: 14px;
  background: rgba(255, 255, 255, .08);
  color: #ffffff;
  font: inherit;
  font-size: 16px;
}

.esp-field input::placeholder {
  color: rgba(255, 255, 255, .55);
}

.esp-field input:focus-visible {
  border-color: #ffd98a;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 217, 138, .25);
}

.esp-field input.esp-code {
  height: 58px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .4em;
  text-align: center;
}

.esp-secret {
  position: relative;
}

.esp-secret input {
  padding-right: 52px;
}

.esp-eye {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: #ffffff;
  cursor: pointer;
}

.esp-eye[aria-pressed="true"] {
  color: #ffd98a;
}

.esp-names {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.esp-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 0;
  color: rgba(255, 255, 255, .9);
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}

.esp-check input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: #f72585;
}

.esp-check a {
  color: #ffffff;
  font-weight: 800;
  text-underline-offset: 3px;
}

/* The message line keeps its height, so that an error never pushes the button. */
.esp-error {
  min-height: 1.4em;
  margin: 0;
  color: #ffb4c8;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.esp-error[data-tone="info"] {
  color: #ffd98a;
}

.esp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #e0156f, #d63a28);
  box-shadow: 0 16px 32px rgba(224, 21, 111, .38);
  color: #ffffff;
  font: inherit;
  font-size: 17px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, opacity .2s ease;
}

.esp-cta:hover {
  color: #ffffff;
}

.esp-cta:active {
  transform: scale(.98);
}

.esp-cta[aria-busy="true"] {
  opacity: .7;
  cursor: progress;
}

.esp-cta--inline {
  min-height: 46px;
  font-size: 16px;
}

.esp-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
}

.esp-link {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.esp-link:disabled {
  opacity: .5;
  cursor: default;
}

.esp-alt {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, .86);
  font-size: 14px;
  text-align: center;
}

.esp-alt a {
  color: #ffffff;
  font-weight: 900;
  text-underline-offset: 3px;
}

.esp-note {
  margin: 0;
  color: rgba(255, 255, 255, .75);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.esp-note a {
  color: #ffffff;
  font-weight: 800;
  text-underline-offset: 3px;
}

.esp-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #ffd98a;
  box-shadow: 0 12px 26px rgba(255, 217, 138, .25);
  color: #3b163f;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.esp-gold:hover {
  color: #3b163f;
}

.esp-gold--wide {
  align-self: stretch;
  min-height: 56px;
  font-size: 17px;
}

.esp-gold:disabled {
  box-shadow: none;
  opacity: .55;
  cursor: not-allowed;
}

/* The badges of the tiles. */

.esp-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.esp-badge--pass {
  background: #ffd98a;
  color: #3b163f;
  font-weight: 900;
}

.esp-badge--soon {
  border: 1px solid rgba(255, 255, 255, .5);
  background: none;
}

/* The lobby. */

.esp-lobby__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: esp-in .35s ease both;
}

.esp-lobby__content[hidden] {
  display: none;
}

/* Japanese breaks its lines between phrases where the browser knows how, as the games of the site. */
.esp-page:lang(ja) {
  word-break: auto-phrase;
}

/* Back on the lobby, from what this tab already saw: it is there at once, without coming in. */
.esp-page.is-instant .esp-lobby__content {
  animation: none;
}

.esp-hello-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.esp-hello {
  margin: 6px 0 0;
  font-size: clamp(28px, 8vw, 32px);
  font-weight: 850;
  letter-spacing: -.025em;
  line-height: 1.05;
}

.esp-nights {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: 14px;
  font-weight: 700;
}

/* The idea of tonight: one at a time, in a card of fixed height. */
.esp-tonight-card {
  position: relative;
  height: 224px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 26px;
  background:
    radial-gradient(90% 80% at 12% 0%, rgba(255, 176, 120, .34), transparent 60%),
    linear-gradient(160deg, #3b163f 0%, #6a1b6e 60%, #b5179e 120%);
  box-shadow: 0 24px 50px rgba(10, 2, 18, .45);
}

.esp-idea {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  animation: esp-in .3s ease both;
}

.esp-idea[hidden] {
  display: none;
}

.esp-idea__title {
  margin: 0;
  font-size: 21px;
  font-weight: 850;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.esp-idea__meta {
  margin: 0;
  color: rgba(255, 255, 255, .86);
  font-size: 14px;
  font-weight: 600;
  transition: opacity .3s ease;
}

.esp-idea__meta.is-waiting {
  opacity: 0;
}

.esp-idea__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}

.esp-section-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -.02em;
}

.esp-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.esp-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 172px;
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04));
  color: #ffffff;
  text-decoration: none;
  transition: transform .15s ease, border-color .2s ease;
}

a.esp-tile:hover {
  border-color: rgba(255, 217, 138, .5);
  color: #ffffff;
}

a.esp-tile:active {
  transform: scale(.98);
}

.esp-tile--soon {
  border-style: dashed;
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .03);
}

.esp-tile__name {
  font-size: 16px;
  font-weight: 850;
  line-height: 1.15;
}

.esp-tile__text {
  margin-top: -4px;
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
  font-weight: 700;
}

.esp-tile .esp-badge {
  margin-top: auto;
}

/* The drawings of the tiles. */
.esp-art {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  height: 40px;
}

.esp-art--aov span {
  position: absolute;
  top: 2px;
  display: grid;
  place-items: center;
  width: 27px;
  height: 36px;
  border-radius: 7px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
  font-size: 16px;
  font-weight: 900;
}

.esp-art--aov span:first-child {
  left: 0;
  background: linear-gradient(155deg, #9b8cff, #5132d8);
  transform: rotate(-10deg);
}

.esp-art--aov span:last-child {
  left: 22px;
  background: linear-gradient(155deg, #ff7eb3, #c8105a);
  transform: rotate(8deg);
}

.esp-art--wyr span {
  position: absolute;
  top: 2px;
  width: 24px;
  height: 36px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}

.esp-art--wyr span:nth-child(1) {
  left: 0;
  border-radius: 8px 3px 3px 8px;
  background: linear-gradient(150deg, #6c4dff, #9b3dff);
}

.esp-art--wyr span:nth-child(2) {
  left: 28px;
  border-radius: 3px 8px 8px 3px;
  background: linear-gradient(150deg, #e0156f, #f0503a);
}

/* The word between the two halves, centred on their gap: a round badge for « ou », « or », « o », a pill for longer
   words (« oder »). `translate` leaves `transform` to the pop of the badge. */
.esp-art--wyr span:nth-child(3) {
  top: 9px;
  left: 26px;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: auto;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 11px;
  white-space: nowrap;
  background: #ffffff;
  box-shadow: none;
  color: #2a0f33;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.esp-art--who span {
  position: absolute;
  top: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}

.esp-art--who span:nth-child(1) {
  left: 0;
  background: linear-gradient(150deg, #6c4dff, #9b3dff);
}

.esp-art--who span:nth-child(2) {
  left: 42px;
  background: linear-gradient(150deg, #e0156f, #f0503a);
}

.esp-art--who span:nth-child(3) {
  top: 10px;
  left: 27px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  background: #ffd98a;
  box-shadow: none;
}

.esp-art--wheel span:first-child {
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: conic-gradient(#e0156f 0deg 60deg, #ffb070 60deg 110deg, #6c4dff 110deg 170deg, #b5179e 170deg 230deg, #ffd98a 230deg 270deg, #9b3dff 270deg 360deg);
}

.esp-art--wheel span:last-child {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
}

.esp-banner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid rgba(255, 217, 138, .45);
  border-radius: 26px;
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(247, 37, 133, .28), transparent 65%),
    linear-gradient(135deg, rgba(255, 217, 138, .16), rgba(108, 77, 255, .18));
}

.esp-banner[hidden] {
  display: none;
}

.esp-banner__title {
  margin: 0;
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.esp-banner__text {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, .88);
  font-size: 14px;
  line-height: 1.5;
}

.esp-mine {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.esp-mine .esp-section-title {
  margin: 0;
}

.esp-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background: rgba(255, 255, 255, .07);
  color: #ffffff;
  text-decoration: none;
}

.esp-row:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .3);
}

.esp-row__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.esp-row__icon--violet { background: linear-gradient(150deg, #6c4dff, #9b3dff); }
.esp-row__icon--pink { background: linear-gradient(150deg, #e0156f, #d63a28); }
.esp-row__icon--ember { background: linear-gradient(150deg, #ffb070, #c8105a); }

.esp-row__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.esp-row__text strong {
  font-size: 16px;
  font-weight: 850;
}

.esp-row__text span {
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
}

.esp-row__chevron {
  flex: none;
  color: rgba(255, 255, 255, .7);
}

/* The tab bar, at the bottom of the screen. */
.esp-tabs {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 146px));
  justify-content: center;
  padding: 6px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: #1a0820;
}

.esp-tabs a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 52px;
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.esp-tabs a[aria-current="page"] {
  color: #ff7eb3;
  font-weight: 900;
}

/* ---- The games of the space, full screen (2026-10-16): the evening of the wheel of the site, the same bar on top
   of every game (static/css/game-top.css), and cards with relief: deep colours, a gold frame, dealt from the deck ---- */

/* The colours of the moment, so that the lamp and the light from below change softly (where the browser knows how). */
@property --esp-halo {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(247, 37, 133, .14);
}

@property --esp-ember {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(255, 112, 70, 0);
}

.esp-game {
  /* The back of the cards: a plum night, gold rings around a heart. */
  --esp-back:
    radial-gradient(circle at 50% 50%, rgba(255, 217, 138, .2) 0, rgba(255, 217, 138, 0) 32%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 217, 138, .09) 0 1px, rgba(255, 217, 138, 0) 1.5px 11px),
    radial-gradient(80% 60% at 18% 8%, rgba(255, 126, 179, .38), rgba(255, 126, 179, 0) 62%),
    linear-gradient(155deg, #7a1f5c 0%, #4a1648 46%, #2a0f33 100%);
  /* A fine grain, as printed cards. */
  --esp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.esp-sky,
.esp-sky span {
  position: absolute;
  pointer-events: none;
}

.esp-sky {
  inset: 0;
  overflow: hidden;
}

.esp-sky__lamp {
  --esp-halo: rgba(247, 37, 133, .14);
  top: -16%;
  left: 50%;
  width: min(900px, 150vw);
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% 0;
  background: radial-gradient(circle, rgba(255, 176, 120, .3) 0%, var(--esp-halo) 45%, rgba(247, 37, 133, 0) 70%);
  animation: esp-breathe 7s ease-in-out infinite;
  transition: --esp-halo 1.2s ease;
}

.esp-sky__stars {
  inset: 0;
  opacity: .8;
  background:
    radial-gradient(1.6px 1.6px at 8% 12%, rgba(255, 255, 255, .85), transparent 70%),
    radial-gradient(1.2px 1.2px at 22% 38%, rgba(255, 255, 255, .6), transparent 70%),
    radial-gradient(2px 2px at 38% 9%, rgba(255, 217, 138, .75), transparent 70%),
    radial-gradient(1.2px 1.2px at 64% 22%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(1.6px 1.6px at 79% 7%, rgba(255, 255, 255, .8), transparent 70%),
    radial-gradient(1.4px 1.4px at 91% 31%, rgba(255, 217, 138, .65), transparent 70%),
    radial-gradient(1.2px 1.2px at 13% 58%, rgba(255, 255, 255, .5), transparent 70%),
    radial-gradient(1.4px 1.4px at 95% 52%, rgba(255, 255, 255, .55), transparent 70%);
}

.esp-sky__ember {
  --esp-ember: rgba(255, 112, 70, 0);
  inset: 0;
  background: radial-gradient(85% 42% at 50% 100%, var(--esp-ember), rgba(255, 112, 70, 0) 72%);
  transition: --esp-ember 1.2s ease;
}

.esp-game[data-mood="truth"] .esp-sky__lamp { --esp-halo: rgba(139, 92, 255, .22); }
.esp-game[data-mood="dare"] .esp-sky__lamp { --esp-halo: rgba(247, 37, 133, .26); }
.esp-game[data-mood="mine"] .esp-sky__lamp { --esp-halo: rgba(255, 200, 110, .2); }
.esp-game[data-mood="truth"] .esp-sky__ember { --esp-ember: rgba(120, 80, 255, .3); }
.esp-game[data-mood="dare"] .esp-sky__ember { --esp-ember: rgba(255, 90, 60, .36); }
.esp-game[data-mood="mine"] .esp-sky__ember { --esp-ember: rgba(255, 190, 90, .26); }

@keyframes esp-breathe {
  0%, 100% { opacity: .75; scale: 1; }
  50% { opacity: 1; scale: 1.06; }
}

@keyframes esp-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.esp-game__shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(440px, calc(100% - 32px));
  min-height: 100vh;
  min-height: 100svh;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 12px 0 max(20px, env(safe-area-inset-bottom));
}

.esp-cats {
  display: flex;
  gap: 8px;
  margin: 0 -16px;
  padding: 2px 16px 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.esp-cats::-webkit-scrollbar {
  display: none;
}

.esp-cat {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 6px;
  min-height: 40px;
  box-sizing: border-box;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .9);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.esp-cat[hidden] {
  display: none;
}

.esp-cat[aria-pressed="true"] {
  border-color: #ffffff;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(247, 37, 133, .38);
  color: #3b163f;
}

.esp-cat--locked {
  border-color: rgba(255, 217, 138, .5);
  background: rgba(255, 217, 138, .06);
  color: #ffd98a;
}

.esp-cat--locked:hover {
  color: #ffd98a;
}

.esp-cat--mine {
  border-color: rgba(255, 126, 179, .55);
}

.esp-game__table {
  position: relative;
  flex: 1;
  min-height: 340px;
}

/* ---- Action ou Vérité: the deck, and the card in play ---- */
.esp-aov__table {
  max-height: 560px;
  perspective: 1400px;
}

.esp-deck,
.esp-deck span {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.esp-deck span {
  border-radius: 28px;
  background: var(--esp-back);
  box-shadow: 0 18px 44px rgba(10, 2, 18, .45), inset 0 0 0 1px rgba(255, 217, 138, .2);
}

.esp-deck span:first-child {
  opacity: .45;
  transform: translate(10px, 12px) rotate(3.5deg);
}

.esp-deck span:last-child {
  opacity: .75;
  transform: translate(-7px, 7px) rotate(-2.5deg);
}

.esp-card--game {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  transform-style: preserve-3d;
}

.esp-card--game[hidden] {
  display: none;
}

/* Face down on the deck while the space opens; then each card is turned over from it. */
.esp-card--game.is-down {
  transform: rotateY(180deg);
}

.esp-card--game.is-dealt {
  animation: esp-flip .72s cubic-bezier(.2, .8, .2, 1) backwards;
}

@keyframes esp-flip {
  from { transform: translate3d(0, 18px, 0) rotateY(180deg) scale(.94); }
  to { transform: none; }
}

/* The card that was in play, flying off the table. */
.esp-card--ghost {
  z-index: 3;
  pointer-events: none;
  transition: transform .55s cubic-bezier(.45, 0, .7, .4), opacity .45s ease .08s;
}

.esp-card__face {
  grid-area: 1 / 1;
  min-height: 0;
  border-radius: 28px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.esp-card__front {
  /* The colour of the card: violet to talk (Vérité), and below, a pink glow. */
  --tint: 139, 92, 255;
  --tint-2: 247, 37, 133;
  --deep-a: #3d2194;
  --deep-b: #26115f;
  --deep-c: #160939;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  padding: 24px 24px 20px;
  background:
    var(--esp-grain),
    radial-gradient(110% 70% at 0% 0%, rgba(var(--tint), .55), rgba(var(--tint), 0) 58%),
    radial-gradient(90% 60% at 100% 100%, rgba(var(--tint-2), .32), rgba(var(--tint-2), 0) 62%),
    linear-gradient(160deg, var(--deep-a) 0%, var(--deep-b) 55%, var(--deep-c) 100%);
  box-shadow: 0 30px 70px rgba(10, 2, 18, .6), 0 0 80px rgba(var(--tint), .22), inset 0 1px 0 rgba(255, 255, 255, .16);
  color: #ffffff;
}

/* Pink and ember to act (Action), gold for the couple's own cards, plum for a line instead of a card. */
.esp-card--game[data-kind="dare"] .esp-card__front {
  --tint: 255, 96, 110;
  --tint-2: 255, 170, 90;
  --deep-a: #c0134f;
  --deep-b: #760a37;
  --deep-c: #32041a;
}

.esp-card--game[data-kind="mine"] .esp-card__front {
  --tint: 255, 205, 120;
  --tint-2: 247, 37, 133;
  --deep-a: #7d5216;
  --deep-b: #4a2c0b;
  --deep-c: #231405;
}

.esp-card--game:not([data-kind]) .esp-card__front {
  --tint: 247, 37, 133;
  --tint-2: 139, 92, 255;
  --deep-a: #5a1f78;
  --deep-b: #3b163f;
  --deep-c: #2a0f33;
}

/* The gold frame, and the sign of the card in the background: a quote to talk, a star to act, a heart of their own. */
.esp-card__front::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10px;
  border: 1px solid rgba(255, 217, 138, .4);
  border-radius: 20px;
  pointer-events: none;
}

.esp-card__front::after {
  content: "\201D";
  position: absolute;
  z-index: -1;
  right: 16px;
  bottom: -64px;
  color: rgba(255, 217, 138, .1);
  font: 700 230px/1 Georgia, "Times New Roman", serif;
  pointer-events: none;
}

.esp-card--game[data-kind="dare"] .esp-card__front::after {
  content: "\2726";
  right: 22px;
  bottom: 8px;
  font-size: 150px;
}

.esp-card--game[data-kind="mine"] .esp-card__front::after {
  content: "\2665\FE0E";
  right: 20px;
  bottom: -6px;
  font-size: 170px;
}

.esp-card--game:not([data-kind]) .esp-card__front::after {
  content: none;
}

/* The light that crosses a card turned over. */
.esp-card__shine {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .2) 47%, rgba(255, 255, 255, .05) 53%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-130%);
  pointer-events: none;
}

.esp-card--game.is-dealt .esp-card__shine {
  animation: esp-shine 1.1s ease .38s both;
}

@keyframes esp-shine {
  from { transform: translateX(-130%); }
  to { transform: translateX(130%); }
}

.esp-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}

.esp-card__kind {
  flex: none;
  padding: 7px 12px;
  border: 1px solid rgba(255, 217, 138, .55);
  border-radius: 999px;
  background: rgba(255, 217, 138, .12);
  color: #ffd98a;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.esp-card__kind:empty {
  visibility: hidden;
}

.esp-card__kind--mine {
  align-self: flex-start;
  border-color: #ffd98a;
  background: #ffd98a;
  color: #3b163f;
}

.esp-card__category {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.esp-card__heart {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  margin: -4px -6px -4px 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #ffffff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.esp-card__heart[hidden] {
  display: none;
}

.esp-card__heart svg {
  fill: none;
}

.esp-card__heart[aria-pressed="true"] {
  border-color: rgba(255, 126, 179, .65);
  background: rgba(255, 126, 179, .2);
  color: #ff8fbd;
}

.esp-card__heart[aria-pressed="true"] svg {
  fill: currentColor;
}

.esp-card__heart.is-beating {
  animation: esp-beat .45s cubic-bezier(.2, .8, .2, 1);
}

@keyframes esp-beat {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* The question or the challenge: one block in the middle of the card, the first names in gold. */
.esp-card__text {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin: 0;
  padding: 4px 6px;
  text-align: center;
}

.esp-card__line {
  font-size: clamp(23px, 6.4vw, 29px);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.26;
  text-shadow: 0 2px 22px rgba(10, 2, 18, .35);
  text-wrap: balance;
}

.esp-card__line em,
.esp-dice__line em {
  font-style: normal;
  background: linear-gradient(90deg, #ffd98a, #ffb070 45%, #ff9cc4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.esp-card__line.is-quiet {
  color: rgba(255, 255, 255, .84);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}

.esp-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 22px;
}

.esp-card__count {
  color: rgba(255, 255, 255, .56);
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.esp-card__sign {
  margin-left: auto;
  color: rgba(255, 217, 138, .8);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-style: italic;
}

.esp-card__sign::before {
  content: "\2665\FE0E\00A0";
  font-style: normal;
}

/* The back of the cards. */
.esp-card__back {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--esp-back);
  box-shadow: 0 30px 70px rgba(10, 2, 18, .6), inset 0 1px 0 rgba(255, 255, 255, .14);
  transform: rotateY(180deg);
}

.esp-card__back::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 217, 138, .45);
  border-radius: 20px;
}

.esp-card__back span {
  display: grid;
  justify-items: center;
  gap: 10px;
  color: #ffe7b8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-style: italic;
  text-shadow: 0 2px 16px rgba(59, 22, 63, .5);
}

.esp-card__back span::before {
  content: "\2665\FE0E";
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1.5px solid rgba(255, 217, 138, .6);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 217, 138, .26), rgba(255, 217, 138, 0) 70%);
  font-size: 26px;
  font-style: normal;
}

/* ---- The cards that ask something, on the table: the first name of tonight, « ma carte » ---- */
.esp-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  padding: 28px 24px 24px;
  border-radius: 28px;
  background:
    var(--esp-grain),
    radial-gradient(110% 70% at 0% 0%, rgba(255, 217, 138, .18), rgba(255, 217, 138, 0) 55%),
    radial-gradient(90% 60% at 100% 100%, rgba(247, 37, 133, .26), rgba(247, 37, 133, 0) 60%),
    linear-gradient(160deg, #4f2075 0%, #35134d 55%, #22092e 100%);
  box-shadow: 0 30px 70px rgba(10, 2, 18, .6), inset 0 1px 0 rgba(255, 255, 255, .14);
  color: #ffffff;
}

.esp-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10px;
  border: 1px solid rgba(255, 217, 138, .32);
  border-radius: 20px;
  pointer-events: none;
}

.esp-card--write {
  position: absolute;
  z-index: 2;
  inset: 0;
}

.esp-card[hidden] {
  display: none;
}

.esp-card.is-dealt {
  animation: esp-deal .5s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes esp-deal {
  from { opacity: 0; transform: translateY(14px) rotate(-1.5deg) scale(.97); }
  to { opacity: 1; transform: none; }
}

.esp-card--tonight {
  justify-content: center;
}

.esp-tonight__label {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.12;
}

.esp-tonight__name {
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  padding: 0 18px;
  border: 1.5px solid rgba(255, 255, 255, .24);
  border-radius: 18px;
  background: rgba(255, 255, 255, .08);
  color: #ffffff;
  font: inherit;
  font-size: 23px;
  font-weight: 800;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.esp-tonight__name::placeholder {
  color: rgba(255, 255, 255, .42);
}

.esp-tonight__name:focus-visible {
  border-color: #ffd98a;
  box-shadow: 0 0 0 4px rgba(255, 217, 138, .16);
  outline: none;
}

.esp-writer__label {
  font-size: 16px;
  font-weight: 800;
}

.esp-writer__text {
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
  padding: 14px;
  border: 1.5px solid rgba(255, 255, 255, .22);
  border-radius: 18px;
  background: rgba(255, 255, 255, .07);
  color: #ffffff;
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  resize: none;
}

.esp-writer__text::placeholder {
  color: rgba(255, 255, 255, .42);
}

.esp-writer__text:focus-visible {
  border-color: #ffd98a;
  outline: none;
}

.esp-writer__kinds {
  display: flex;
  gap: 8px;
}

.esp-writer__kinds label {
  flex: 1;
  cursor: pointer;
}

.esp-writer__kinds input {
  position: absolute;
  opacity: 0;
}

.esp-writer__kinds span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1.5px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
}

.esp-writer__kinds input:checked + span {
  border-color: #ffd98a;
  background: #ffd98a;
  color: #3b163f;
}

.esp-writer__kinds input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(255, 217, 138, .35);
}

.esp-error--dark {
  min-height: 0;
  color: #ffb3c9;
}

.esp-error--dark:empty {
  display: none;
}

.esp-writer__limit {
  margin: 0;
  color: rgba(255, 255, 255, .86);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.esp-writer__limit[hidden] {
  display: none;
}

.esp-writer__limit a {
  color: #ffd98a;
  font-weight: 900;
}

.esp-writer__actions {
  display: flex;
  gap: 10px;
}

.esp-writer__actions button {
  min-height: 50px;
  padding: 0 18px;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

.esp-writer__cancel {
  flex: none;
  border: 1.5px solid rgba(255, 255, 255, .3);
  background: none;
  color: #ffffff;
}

.esp-writer__save {
  flex: 1;
  border: 0;
  background: linear-gradient(135deg, #e0156f, #f0503a);
  box-shadow: 0 12px 26px rgba(240, 40, 100, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  color: #ffffff;
}

/* ---- Vérité, Action: as the buttons of the games of the site, with their light sweep ---- */
.esp-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.esp-duo button,
.esp-roll {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 58px;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  font: inherit;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .2s ease, transform .18s cubic-bezier(.2, .8, .2, 1);
}

.esp-duo button::after,
.esp-roll::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .38), rgba(255, 255, 255, 0));
  transform: skewX(-18deg);
  animation: esp-sweep 7s ease-in-out 2s infinite;
  pointer-events: none;
}

.esp-duo__dare::after {
  animation-delay: 2.5s;
}

@keyframes esp-sweep {
  0%, 72% { left: -60%; }
  100% { left: 130%; }
}

.esp-duo button:active,
.esp-roll:active {
  transform: scale(.96);
}

.esp-duo button:disabled {
  box-shadow: none;
  opacity: .4;
  cursor: not-allowed;
}

.esp-duo__truth {
  background: linear-gradient(135deg, #6c4dff, #9b3dff);
  box-shadow: 0 14px 30px rgba(108, 77, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.esp-duo__dare,
.esp-roll {
  background: linear-gradient(135deg, #e0156f, #f0503a);
  box-shadow: 0 14px 30px rgba(240, 40, 100, .38), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.esp-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  box-sizing: border-box;
  padding: 8px 14px;
  border: 1px solid rgba(255, 217, 138, .4);
  border-radius: 18px;
  background: rgba(255, 217, 138, .1);
  color: #ffffff;
  text-decoration: none;
}

.esp-strip[hidden] {
  display: none;
}

.esp-strip:hover {
  color: #ffffff;
}

.esp-strip__lock {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffd98a;
  color: #3b163f;
}

.esp-strip__text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

/* While the first name of tonight is asked, the rest of the table waits. */
.esp-game .esp-cats,
.esp-game .esp-duo,
.esp-game .esp-dice__actions {
  transition: opacity .25s ease;
}

.esp-game [inert] {
  opacity: .35;
}

@media (prefers-reduced-motion: reduce) {
  .esp-sky__lamp,
  .esp-card--game.is-dealt,
  .esp-card--game.is-dealt .esp-card__shine,
  .esp-card__heart.is-beating,
  .esp-card.is-dealt,
  .esp-duo button::after,
  .esp-roll::after {
    animation: none;
  }

  .esp-card--ghost {
    transition: none;
  }
}

/* The Pass. */

.esp-pass-art {
  position: relative;
  height: 100px;
  margin: 6px 0 16px;
}

.esp-pass-art span {
  position: absolute;
  box-sizing: border-box;
  border-radius: 12px;
}

.esp-pass-art__left,
.esp-pass-art__right {
  top: 14px;
  width: 58px;
  height: 80px;
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 14px 30px rgba(10, 2, 18, .45);
}

.esp-pass-art__left {
  left: calc(50% - 84px);
  background: linear-gradient(155deg, #9b8cff, #5132d8);
  transform: rotate(-14deg);
}

.esp-pass-art__right {
  left: calc(50% + 26px);
  background: linear-gradient(155deg, #ff7eb3, #c8105a);
  transform: rotate(14deg);
}

.esp-pass-art__ticket {
  top: 2px;
  left: calc(50% - 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 64px;
  height: 90px;
  background: linear-gradient(160deg, #fff1c9, #ffd98a 55%, #f4b860);
  box-shadow: 0 18px 36px rgba(10, 2, 18, .5), 0 0 0 4px rgba(255, 217, 138, .35);
  color: #3b163f;
}

.esp-pass-art__ticket span {
  position: static;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
}

.esp-pass-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
  text-align: center;
}

.esp-features {
  margin: 0 0 22px;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  background: rgba(255, 255, 255, .07);
  list-style: none;
}

.esp-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.esp-features li + li {
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.esp-features__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(150deg, #6c4dff, #9b3dff);
}

.esp-features__icon--pink {
  background: linear-gradient(150deg, #e0156f, #d63a28);
}

.esp-features__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.esp-features__text strong {
  font-size: 16px;
  font-weight: 850;
}

.esp-features__text span {
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
}

/* What comes later in the Pass: a quieter line, its « Bientôt » on the right. */
.esp-features .esp-badge {
  flex: none;
  align-self: center;
  margin-left: auto;
}

.esp-features li.is-soon .esp-features__icon {
  opacity: .5;
}

.esp-features li.is-soon .esp-features__text {
  opacity: .78;
}

.esp-offer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 2px solid #ffd98a;
  border-radius: 24px;
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(247, 37, 133, .2), transparent 65%),
    rgba(255, 217, 138, .1);
}

.esp-offer[hidden] {
  display: none;
}

.esp-offer__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.esp-offer__name {
  margin: 0;
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -.02em;
}

.esp-offer__price {
  color: #ffd98a;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.esp-offer__text {
  margin: 0;
  color: rgba(255, 255, 255, .9);
  font-size: 15px;
  line-height: 1.45;
}

.esp-offer__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: 13px;
  line-height: 1.45;
}

.esp-offer__note svg {
  flex: none;
  margin-top: 1px;
}

/* One payment, said twice: under the price, and ticked under the offer. */
.esp-offer__price {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
}

.esp-offer__price small {
  margin-top: 6px;
  color: rgba(255, 255, 255, .8);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.esp-offer__promises {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.esp-offer__promises li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: rgba(255, 255, 255, .92);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.esp-offer__promises svg {
  flex: none;
  margin-top: 2px;
}

/* Buying the Pass: the box of the terms, the button, and the word of Stripe. */
.esp-buy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.esp-buy .esp-check {
  font-size: 13px;
}

.esp-gold[aria-busy="true"] {
  opacity: .7;
  cursor: progress;
}

.esp-buy__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font-size: 12px;
  font-weight: 700;
}

/* The ticket of the Pass waits with the payment, then greets the Pass that has just come. */
.esp-pass-page[data-pass="checking"] .esp-pass-art__ticket {
  animation: esp-ticket-wait 1.4s ease-in-out infinite alternate;
}

.esp-pass-page.is-new[data-pass="owned"] .esp-pass-art__ticket {
  animation: esp-ticket-new .9s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes esp-ticket-wait {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -6px, 0); box-shadow: 0 24px 40px rgba(10, 2, 18, .5), 0 0 0 9px rgba(255, 217, 138, .2); }
}

@keyframes esp-ticket-new {
  0% { transform: scale(1); }
  45% { transform: scale(1.14) rotate(-4deg); box-shadow: 0 18px 36px rgba(10, 2, 18, .5), 0 0 0 14px rgba(255, 217, 138, .25); }
  100% { transform: none; }
}

/* Nous deux. */

.esp-us .esp-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.esp-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  background: rgba(255, 255, 255, .07);
}

.esp-box__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.esp-box__title {
  margin: 0;
  font-size: 18px;
  font-weight: 850;
}

.esp-box__text {
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  line-height: 1.45;
}

/* Votre compte: signing out, and deleting the account, quieter (2026-10-16). */
.esp-account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.esp-delete {
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: rgba(255, 180, 200, .92);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(255, 180, 200, .4);
  text-underline-offset: 4px;
  cursor: pointer;
}

.esp-delete:hover {
  color: #ffd0dc;
}

/* The window that asks before the account goes: the night of the space, its two steps in one place (the window keeps
   its height from one to the other). */
.esp-confirm {
  width: min(400px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 28px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(247, 37, 133, .22), transparent 70%),
    linear-gradient(170deg, #3b163f 0%, #2a0f33 100%);
  box-shadow: 0 30px 80px rgba(10, 2, 18, .6);
  color: #ffffff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.esp-confirm[open] {
  animation: esp-in .24s ease both;
}

.esp-confirm::backdrop {
  background: rgba(14, 4, 22, .72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.esp-confirm__steps {
  display: grid;
}

.esp-confirm__step {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 26px 22px 22px;
  transition: opacity .25s ease, visibility 0s;
}

/* The step that leaves fades, then hides; the one that comes is there at once (its button can take the focus). */
.esp-confirm[data-step="ask"] .esp-confirm__step--done,
.esp-confirm[data-step="done"] .esp-confirm__step--ask {
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease, visibility 0s .25s;
}

/* The goodbye is shorter than the question: in the middle of the same window. */
.esp-confirm__step--done {
  justify-content: center;
}

.esp-confirm__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 77, 109, .16);
  box-shadow: 0 0 0 1px rgba(255, 77, 109, .3);
  color: #ff8fa8;
}

.esp-confirm__icon--done {
  background: rgba(247, 37, 133, .18);
  box-shadow: 0 0 0 1px rgba(247, 37, 133, .35);
  color: #ff7ab8;
}

.esp-confirm__title {
  margin: 4px 0 0;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.2;
}

.esp-confirm__text {
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: 15px;
  line-height: 1.5;
}

.esp-confirm__text--pass {
  color: #ffd98a;
  font-weight: 800;
}

.esp-confirm__text[hidden] {
  display: none;
}

.esp-confirm__actions {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 10px;
  margin-top: 6px;
}

.esp-confirm__danger,
.esp-confirm__cancel {
  min-height: 52px;
  padding: 0 20px;
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .15s ease, opacity .2s ease;
}

.esp-confirm__danger {
  border: 0;
  background: linear-gradient(135deg, #ff4d6d, #c8105a);
  box-shadow: 0 14px 30px rgba(200, 16, 90, .38);
  color: #ffffff;
}

.esp-confirm__cancel {
  border: 1.5px solid rgba(255, 255, 255, .35);
  background: none;
  color: #ffffff;
}

.esp-confirm__danger:active,
.esp-confirm__cancel:active {
  transform: scale(.98);
}

.esp-confirm__danger[aria-busy="true"],
.esp-confirm__cancel:disabled {
  opacity: .6;
  cursor: progress;
}

.esp-confirm__step--done .esp-cta {
  align-self: stretch;
  margin-top: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .esp-confirm[open] {
    animation: none;
  }

  .esp-confirm__step {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .esp-lights span,
  .esp-panel,
  .esp-lobby__content,
  .esp-idea,
  .esp-card.is-dealt {
    animation: none;
  }

  .esp-pass-page .esp-pass-art__ticket {
    animation: none !important;
  }
}

/* ---- The second first name may stay empty (2026-10-15): the games ask for it when the evening starts ---- */
.esp-optional {
  margin-left: 4px;
  color: rgba(255, 255, 255, .55);
  font-weight: 700;
}

/* Nous deux: the cross that clears it. */
.esp-clearable {
  position: relative;
}

/* Room for the cross only when there is something to clear; the hint keeps the whole width. */
.esp-clearable input:not(:placeholder-shown) {
  padding-right: 48px;
}

.esp-clear {
  position: absolute;
  top: 50%;
  right: 9px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: #ffffff;
  cursor: pointer;
}

.esp-clear[hidden] {
  display: none;
}

/* ---- Nous écrire (2026-10-15): a message to the support, sent by e-mail ---- */
.esp-intro--left {
  margin-bottom: 6px;
  text-align: left;
}

.esp-row__icon--gold { background: linear-gradient(150deg, #fff1c9, #ffd98a 55%, #f4b860); }

.esp-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.esp-kind {
  position: relative;
  cursor: pointer;
}

.esp-kind input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.esp-kind span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
}

.esp-kind input:checked + span {
  border-color: #ffffff;
  background: #ffffff;
  color: #3b163f;
}

.esp-kind input:focus-visible + span {
  outline: 3px solid rgba(255, 217, 138, .7);
  outline-offset: 2px;
}

.esp-field textarea {
  width: 100%;
  min-height: 150px;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1.5px solid rgba(255, 255, 255, .24);
  border-radius: 14px;
  background: rgba(255, 255, 255, .08);
  color: #ffffff;
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
  resize: vertical;
}

.esp-field textarea::placeholder {
  color: rgba(255, 255, 255, .55);
}

.esp-field textarea:focus-visible {
  border-color: #ffd98a;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 217, 138, .25);
}

.esp-contact-link {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
}

.esp-sent .esp-link {
  align-self: flex-start;
}

.esp-box[hidden] {
  display: none;
}

/* ---- Les dés coquins (2026-10-16): two dice of the night, rose and amethyst, garnet and onyx for Coquin, thrown
   on the table under the lamp; the script moves them, lights their faces and lets them bounce ---- */
.esp-dice__table {
  display: grid;
  place-items: center;
}

.esp-dice__play {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.esp-dice__play[hidden] {
  display: none;
}

.esp-dice__tray {
  --die: min(33vw, 136px);
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(38px, 12vw, 64px);
  width: 100%;
  height: calc(var(--die) * 2);
  padding-bottom: calc(var(--die) * .3);
  box-sizing: border-box;
  /* One point of view for both dice, as two dice on the same table, seen from a little above. */
  perspective: 900px;
  perspective-origin: 50% 10%;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.esp-dice__tray.is-holding {
  cursor: grabbing;
}

/* The light of the lamp on the table, where the dice land. */
.esp-dice__pool {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: min(118%, 520px);
  height: calc(var(--die) * 1.05);
  border-radius: 50%;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgba(255, 186, 130, .24), rgba(247, 37, 133, .1) 55%, rgba(247, 37, 133, 0));
  pointer-events: none;
  transition: opacity .6s ease;
}

.esp-dice[data-level="coquin"] .esp-dice__pool {
  background: radial-gradient(closest-side, rgba(255, 118, 80, .3), rgba(200, 16, 90, .14) 55%, rgba(200, 16, 90, 0));
}

.esp-dice[data-level="coquin"] .esp-sky__ember {
  --esp-ember: rgba(255, 80, 60, .38);
}

.esp-die-slot {
  position: relative;
  flex: none;
  width: var(--die);
  height: var(--die);
  transform-style: preserve-3d;
}

.esp-die__shadow {
  position: absolute;
  right: 4%;
  bottom: calc(var(--die) * -.13);
  left: 4%;
  height: calc(var(--die) * .3);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8, 0, 14, .72), rgba(8, 0, 14, 0));
  pointer-events: none;
}

/* A die of one piece, as a real one: its six faces, its twelve edges cut on the bias (--bevel), and inside, a cube a
   little smaller that fills its corners. Each face and each edge is lit by the script as the die turns. */
.esp-die {
  --bevel: calc(var(--die) * .1);
  --edge-width: calc(var(--bevel) * 1.4142);
  --edge-length: calc(var(--die) - var(--bevel) * 2);
  --edge-reach: calc((var(--die) - var(--bevel)) * .7071);
  --inside: calc(var(--die) / 2 - var(--bevel) * .55);
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

/* At rest before the script moves them, as it will. */
.esp-die--gesture {
  transform: rotateX(-16deg) rotateY(22deg);
}

.esp-die--zone {
  transform: rotateX(-16deg) rotateY(-22deg);
}

.esp-die__face,
.esp-die__edge,
.esp-die__inner {
  position: absolute;
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.esp-die__inner {
  inset: calc(var(--bevel) * .55);
  background: var(--die-core);
}

.esp-die__inner--front { transform: translateZ(var(--inside)); }
.esp-die__inner--back { transform: rotateY(180deg) translateZ(var(--inside)); }
.esp-die__inner--right { transform: rotateY(90deg) translateZ(var(--inside)); }
.esp-die__inner--left { transform: rotateY(-90deg) translateZ(var(--inside)); }
.esp-die__inner--top { transform: rotateX(90deg) translateZ(var(--inside)); }
.esp-die__inner--bottom { transform: rotateX(-90deg) translateZ(var(--inside)); }

.esp-die__face {
  inset: var(--bevel);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 5%;
  border-radius: 3px;
  background: var(--die-face);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 16px rgba(0, 0, 0, .14);
  color: var(--die-ink);
}

.esp-die__face--front { transform: translateZ(calc(var(--die) / 2)); }
.esp-die__face--back { transform: rotateY(180deg) translateZ(calc(var(--die) / 2)); }
.esp-die__face--right { transform: rotateY(90deg) translateZ(calc(var(--die) / 2)); }
.esp-die__face--left { transform: rotateY(-90deg) translateZ(calc(var(--die) / 2)); }
.esp-die__face--top { transform: rotateX(90deg) translateZ(calc(var(--die) / 2)); }
.esp-die__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--die) / 2)); }

/* An edge: a strip on the bias between two faces, lying along them; those of the sides of the front and of the back
   stand up. */
.esp-die__edge {
  top: 50%;
  left: 50%;
  width: var(--edge-length);
  height: var(--edge-width);
  margin: calc(var(--edge-width) / -2) 0 0 calc(var(--edge-length) / -2);
  background: var(--die-edge);
}

.esp-die__edge[data-esp-edge="lf"],
.esp-die__edge[data-esp-edge="rf"],
.esp-die__edge[data-esp-edge="lb"],
.esp-die__edge[data-esp-edge="rb"] {
  width: var(--edge-width);
  height: var(--edge-length);
  margin: calc(var(--edge-length) / -2) 0 0 calc(var(--edge-width) / -2);
}

.esp-die__edge[data-esp-edge="tf"] { transform: rotateX(45deg) translateZ(var(--edge-reach)); }
.esp-die__edge[data-esp-edge="bf"] { transform: rotateX(-45deg) translateZ(var(--edge-reach)); }
.esp-die__edge[data-esp-edge="lf"] { transform: rotateY(-45deg) translateZ(var(--edge-reach)); }
.esp-die__edge[data-esp-edge="rf"] { transform: rotateY(45deg) translateZ(var(--edge-reach)); }
.esp-die__edge[data-esp-edge="tb"] { transform: rotateX(135deg) translateZ(var(--edge-reach)); }
.esp-die__edge[data-esp-edge="bb"] { transform: rotateX(-135deg) translateZ(var(--edge-reach)); }
.esp-die__edge[data-esp-edge="lb"] { transform: rotateY(-135deg) translateZ(var(--edge-reach)); }
.esp-die__edge[data-esp-edge="rb"] { transform: rotateY(135deg) translateZ(var(--edge-reach)); }
.esp-die__edge[data-esp-edge="tl"] { transform: rotateZ(-135deg) rotateY(90deg) translateZ(var(--edge-reach)); }
.esp-die__edge[data-esp-edge="tr"] { transform: rotateZ(-45deg) rotateY(90deg) translateZ(var(--edge-reach)); }
.esp-die__edge[data-esp-edge="br"] { transform: rotateZ(45deg) rotateY(90deg) translateZ(var(--edge-reach)); }
.esp-die__edge[data-esp-edge="bl"] { transform: rotateZ(135deg) rotateY(90deg) translateZ(var(--edge-reach)); }

/* The lamp on a face or an edge, written by the script as the die turns: its shade, then its gleam. */
.esp-die__face::before,
.esp-die__face::after,
.esp-die__edge::before,
.esp-die__edge::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.esp-die__face::before,
.esp-die__edge::before {
  background: #0c0016;
  opacity: var(--shade, .22);
}

.esp-die__face::after {
  z-index: 4;
  background: radial-gradient(120% 90% at 26% 16%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 52%);
  opacity: var(--gleam, .3);
}

.esp-die__edge::after {
  background: rgba(255, 255, 255, .55);
  opacity: calc(var(--gleam, .3) * .8);
}

/* The word stays clear on the face in the light, and fades with the face in the shade. */
.esp-die__word {
  position: relative;
  z-index: 3;
  opacity: calc(1 - var(--shade, .2) * .9);
  font-size: calc(var(--die) * .14);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.06;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .32), 0 0 14px rgba(0, 0, 0, .22);
  text-wrap: balance;
}

.esp-die__word.is-long {
  font-size: calc(var(--die) * .112);
}

/* Japanese has no spaces to break at, and wide signs: its words may break anywhere, a little smaller. */
.esp-page:lang(ja) .esp-die__word {
  font-size: calc(var(--die) * .112);
  word-break: break-all;
}

/* A small gold heart under the word, as the pips of a die. */
.esp-die__word::after {
  content: "\2665\FE0E";
  display: block;
  margin-top: .38em;
  color: #ffd98a;
  font-size: .6em;
  opacity: .85;
}

/* The stones: rose quartz for the gestures, amethyst for the places; garnet and onyx with gold words for Coquin. */
.esp-die--gesture {
  --die-face: radial-gradient(130% 120% at 28% 18%, #ffa3c8 0%, #f2448a 38%, #c3125f 76%, #a50e50 100%);
  --die-edge: linear-gradient(#f05b97, #d8216d);
  --die-core: #8e0b45;
  --die-ink: #ffffff;
}

.esp-die--zone {
  --die-face: radial-gradient(130% 120% at 28% 18%, #d2bcff 0%, #8b63ff 38%, #5f35d6 76%, #4b28b3 100%);
  --die-edge: linear-gradient(#9c7bff, #6a43e0);
  --die-core: #3d1f9e;
  --die-ink: #ffffff;
}

.esp-dice[data-level="coquin"] .esp-die--gesture {
  --die-face: radial-gradient(130% 120% at 28% 18%, #ff7aa0 0%, #c4124f 36%, #7a0936 76%, #5c0627 100%);
  --die-edge: linear-gradient(#d1205c, #8f0b3e);
  --die-core: #3a0419;
  --die-ink: #ffe3a6;
}

.esp-dice[data-level="coquin"] .esp-die--zone {
  --die-face: radial-gradient(130% 120% at 28% 18%, #a585ff 0%, #4d25bd 36%, #2b1373 76%, #1e0c52 100%);
  --die-edge: linear-gradient(#5b33cc, #2e1580);
  --die-core: #120734;
  --die-ink: #ffe3a6;
}

/* The line keeps the room of three lines, so that nothing jumps when it changes: whose turn, then what to do, the
   first names in gold. */
.esp-dice__line {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: calc(3 * 1.25em);
  margin: 0;
  font-size: clamp(21px, 5.8vw, 27px);
  font-weight: 900;
  letter-spacing: -.015em;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  transition: opacity .25s ease;
}

.esp-dice__line.is-waiting {
  opacity: .25;
}

.esp-dice__line.is-dealt {
  animation: esp-verdict .6s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes esp-verdict {
  from { opacity: 0; transform: translateY(10px) scale(.97); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

.esp-timer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 6px 16px 6px 8px;
  border: 1px solid rgba(255, 217, 138, .38);
  border-radius: 999px;
  background: rgba(255, 217, 138, .08);
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

/* Hidden, it keeps its room. */
.esp-timer[hidden] {
  display: inline-flex;
  visibility: hidden;
}

.esp-timer__ring {
  transform: rotate(-90deg);
}

.esp-timer__ring circle {
  fill: none;
  stroke-width: 4;
}

.esp-timer__track {
  stroke: rgba(255, 255, 255, .18);
}

.esp-timer__left {
  stroke: #ffd98a;
  stroke-linecap: round;
}

.esp-timer.is-running {
  border-color: rgba(255, 217, 138, .7);
}

.esp-timer.is-done {
  border-color: #ffd98a;
  background: rgba(255, 217, 138, .16);
  color: #ffd98a;
}

.esp-dice__actions {
  display: grid;
  gap: 8px;
  text-align: center;
}

.esp-roll {
  width: 100%;
  font-size: 19px;
}

.esp-roll:disabled {
  box-shadow: none;
  opacity: .4;
  cursor: progress;
}

.esp-dice__hint {
  min-height: 1.4em;
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .esp-dice__line.is-dealt {
    animation: none;
  }
}

/* ---- Idées couple (2026-10-16): the list of the week, three cards of the night ticked when done ---- */
.esp-ideas .esp-sky__ember {
  --esp-ember: rgba(255, 140, 90, .2);
}

.esp-ideas__head {
  display: grid;
  gap: 4px;
}

.esp-ideas__next {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  font-weight: 700;
}

.esp-ideas__list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.esp-idea-card {
  /* A gentle idea: the violet of the night; the coquin one, pink and ember. */
  --tint: 139, 92, 255;
  --tint-2: 247, 37, 133;
  --deep-a: #3d2194;
  --deep-b: #26115f;
  --deep-c: #160939;
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 12px;
  overflow: hidden;
  padding: 22px 22px 24px;
  border-radius: 24px;
  background:
    var(--esp-grain),
    radial-gradient(110% 80% at 0% 0%, rgba(var(--tint), .5), rgba(var(--tint), 0) 58%),
    radial-gradient(90% 70% at 100% 100%, rgba(var(--tint-2), .24), rgba(var(--tint-2), 0) 60%),
    linear-gradient(160deg, var(--deep-a) 0%, var(--deep-b) 55%, var(--deep-c) 100%);
  box-shadow: 0 22px 48px rgba(10, 2, 18, .5), 0 0 50px rgba(var(--tint), .16), inset 0 1px 0 rgba(255, 255, 255, .15);
  color: #ffffff;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .2s ease, box-shadow .4s ease;
  animation: esp-rise .6s cubic-bezier(.2, .8, .2, 1) backwards;
}

.esp-idea-card:nth-child(2) {
  animation-delay: .07s;
}

.esp-idea-card:nth-child(3) {
  animation-delay: .14s;
}

.esp-idea-card[data-category="coquine"] {
  --tint: 255, 96, 110;
  --tint-2: 255, 170, 90;
  --deep-a: #c0134f;
  --deep-b: #760a37;
  --deep-c: #32041a;
}

/* The gold frame; the hold bar is the other side (::after). */
.esp-idea-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8px;
  border: 1px solid rgba(255, 217, 138, .3);
  border-radius: 17px;
  pointer-events: none;
}

.esp-idea-card__kind {
  justify-self: start;
  padding: 6px 11px;
  border: 1px solid rgba(255, 217, 138, .55);
  border-radius: 999px;
  background: rgba(255, 217, 138, .12);
  color: #ffd98a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.esp-idea-card__text {
  margin: 0;
  padding-right: 64px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.32;
  text-shadow: 0 2px 18px rgba(10, 2, 18, .3);
}

.esp-idea-card__tick,
.esp-idea-card__lock {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 7px;
  min-height: 42px;
  padding: 0 16px;
  border: 1.5px solid rgba(255, 217, 138, .6);
  border-radius: 999px;
  background: rgba(255, 217, 138, .06);
  color: #ffd98a;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.esp-idea-card__tick[hidden],
.esp-idea-card__lock[hidden] {
  display: none;
}

.esp-idea-card__tick[aria-pressed="true"] {
  border-color: #ffd98a;
  background: #ffd98a;
  color: #3b163f;
}

.esp-idea-card__lock:hover {
  color: #ffd98a;
}

/* An idea done: the gold stamp lands, with a few sparks, and stays; the card keeps a gold glow. */
.esp-idea-card.is-done {
  box-shadow: 0 22px 48px rgba(10, 2, 18, .5), 0 0 0 1.5px rgba(255, 217, 138, .55), 0 0 44px rgba(255, 217, 138, .2), inset 0 1px 0 rgba(255, 255, 255, .15);
}

.esp-idea-card__stamp {
  position: absolute;
  top: 18px;
  right: 16px;
  padding: 4px 10px;
  border: 3px solid #ffd98a;
  border-radius: 10px;
  color: #ffd98a;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .06em;
  text-shadow: 0 0 14px rgba(255, 217, 138, .5);
  text-transform: uppercase;
  opacity: 0;
  transform: rotate(-12deg) scale(.6);
  pointer-events: none;
}

.esp-idea-card.is-done .esp-idea-card__stamp {
  opacity: 1;
  transform: rotate(-12deg);
}

.esp-idea-card.is-stamped .esp-idea-card__stamp {
  animation: esp-stamp .42s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes esp-stamp {
  from { opacity: 0; transform: rotate(-20deg) scale(1.9); }
  70% { opacity: 1; transform: rotate(-11deg) scale(.94); }
  to { opacity: 1; transform: rotate(-12deg); }
}

.esp-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px;
  border-radius: 50%;
  background: #ffd98a;
  box-shadow: 0 0 8px rgba(255, 217, 138, .9);
  pointer-events: none;
  animation: esp-spark .7s cubic-bezier(.2, .8, .2, 1) both;
}

.esp-spark:nth-child(3n) {
  background: #ff9cc4;
  box-shadow: 0 0 8px rgba(255, 156, 196, .9);
}

@keyframes esp-spark {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); }
}

/* A finger kept on an idea: the gold bar fills, then the idea is ticked. */
.esp-idea-card::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 10px;
  left: 20px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ffd98a, #ffb070);
  box-shadow: 0 0 10px rgba(255, 217, 138, .6);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}

.esp-idea-card.is-pressing {
  transform: scale(.985);
}

.esp-idea-card.is-pressing::after {
  opacity: 1;
  transform: scaleX(1);
  transition: transform .65s linear, opacity .15s ease;
}

/* The coquin idea, without the Pass. */
.esp-idea-card[data-locked] {
  border: 1.5px dashed rgba(255, 217, 138, .55);
  background: rgba(255, 255, 255, .05);
  box-shadow: none;
}

.esp-idea-card[data-locked]::before {
  content: none;
}

.esp-idea-card[data-locked] .esp-idea-card__text {
  color: rgba(255, 255, 255, .86);
}

.esp-ideas__foot {
  display: grid;
  gap: 4px;
  text-align: center;
}

.esp-ideas__progress {
  min-height: 1.4em;
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  .esp-idea-card,
  .esp-idea-card.is-pressing::after {
    transition: none;
  }

  .esp-idea-card,
  .esp-idea-card.is-stamped .esp-idea-card__stamp,
  .esp-spark {
    animation: none;
  }
}

/* ---- The lobby comes alive (2026-10-16): each drawing moves a little, in its own time, without moving anything
   around it; only transforms, which the phone draws without effort ---- */
.esp-art__die,
.esp-art__heart,
.esp-art__kid {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .esp-art--aov span:first-child {
    animation: esp-sway-left 4.4s ease-in-out infinite;
  }

  .esp-art--aov span:last-child {
    animation: esp-sway-right 4.4s ease-in-out infinite;
  }

  .esp-art__die {
    animation: esp-die-hop 5.2s cubic-bezier(.3, .7, .3, 1) 1s infinite;
  }

  .esp-art__die + .esp-art__die {
    animation-delay: 1.12s;
  }

  .esp-art__heart {
    animation: esp-heartbeat 2.8s ease-in-out .4s infinite;
  }

  .esp-art--wyr span:nth-child(1) {
    animation: esp-nudge-left 3.8s ease-in-out .6s infinite;
  }

  .esp-art--wyr span:nth-child(2) {
    animation: esp-nudge-right 3.8s ease-in-out .6s infinite;
  }

  .esp-art--wyr span:nth-child(3),
  .esp-art--who span:nth-child(3) {
    animation: esp-pop 3.8s ease-in-out .6s infinite;
  }

  .esp-art--who span:nth-child(1) {
    animation: esp-nudge-right 3.4s ease-in-out 1.4s infinite;
  }

  .esp-art--who span:nth-child(2) {
    animation: esp-nudge-left 3.4s ease-in-out 1.4s infinite;
  }

  .esp-art--who span:nth-child(3) {
    animation-duration: 3.4s;
    animation-delay: 1.4s;
  }

  .esp-art--wheel span:first-child {
    animation: esp-turn 16s linear infinite;
  }

  .esp-art__kid {
    animation: esp-kid-hop 3.6s ease-in-out 1.8s infinite;
  }

  /* The light that crosses the button of tonight, as on the buttons of the games. */
  .esp-tonight-card .esp-cta {
    position: relative;
    overflow: hidden;
  }

  .esp-tonight-card .esp-cta::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .38), rgba(255, 255, 255, 0));
    transform: skewX(-18deg);
    animation: esp-sweep 7s ease-in-out 2s infinite;
    pointer-events: none;
  }
}

@keyframes esp-sway-left {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: translateX(-2px) rotate(-16deg); }
}

@keyframes esp-sway-right {
  0%, 100% { transform: rotate(8deg); }
  50% { transform: translateX(2px) rotate(14deg); }
}

/* A die jumps, turns once and lands, now and then. */
@keyframes esp-die-hop {
  0%, 70%, 100% { transform: none; }
  78% { transform: translateY(-6px) rotate(180deg); }
  86% { transform: translateY(0) rotate(360deg); }
  91% { transform: translateY(-1.5px) rotate(360deg); }
}

@keyframes esp-heartbeat {
  0%, 36%, 100% { transform: none; }
  9% { transform: scale(1.2); }
  18% { transform: none; }
  27% { transform: scale(1.12); }
}

@keyframes esp-nudge-left {
  0%, 60%, 100% { transform: none; }
  75% { transform: translateX(-3px); }
}

@keyframes esp-nudge-right {
  0%, 60%, 100% { transform: none; }
  75% { transform: translateX(3px); }
}

@keyframes esp-pop {
  0%, 60%, 100% { transform: none; }
  75% { transform: scale(1.18); }
}

@keyframes esp-turn {
  to { transform: rotate(360deg); }
}

@keyframes esp-kid-hop {
  0%, 66%, 100% { transform: none; }
  74% { transform: translateY(-5px); }
  82% { transform: none; }
  88% { transform: translateY(-2px); }
}

/* ---- Paramètres (2026-10-16): the switch of the sound, and the line of the brand at the bottom ---- */
.esp-switch {
  position: relative;
  flex: none;
  width: 52px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  cursor: pointer;
  transition: background .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.esp-switch span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(10, 2, 18, .35);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}

.esp-switch[aria-checked="true"] {
  background: linear-gradient(135deg, #e0156f, #f0503a);
}

.esp-switch[aria-checked="true"] span {
  transform: translateX(20px);
}

.esp-switch:focus-visible {
  outline: 3px solid rgba(255, 185, 56, .9);
  outline-offset: 3px;
}

.esp-brandline {
  display: grid;
  gap: 4px;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, .5);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.esp-brandline strong {
  color: rgba(255, 255, 255, .78);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
  .esp-loading,
  .esp-switch,
  .esp-switch span {
    animation: none;
    transition: none;
  }
}

/* At the foot of the doors of the space (sign-in, sign-up): the documents and the brand, small. */
.esp-legal {
  margin: 28px 0 0;
  color: rgba(255, 255, 255, .5);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}

.esp-legal a {
  color: rgba(255, 255, 255, .72);
}