@font-face {
  font-family: "Great Vibes";
  src: url("../assets/fonts/great-vibes/great-vibes-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* P5.4E - compact authenticated neighborhood below the public Top 5. */
#localProfilePanelOnline .agora-leaderboard-neighborhood-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 2px;
  color: #f4c570;
  font-size: 0.74rem;
  font-weight: 950;
  text-transform: uppercase;
}

#localProfilePanelOnline .agora-leaderboard-neighborhood-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(215, 168, 96, 0.3);
}

#localProfilePanelOnline .agora-leaderboard-player__name {
  min-width: 0;
}

#localProfilePanelOnline .agora-leaderboard-you-badge {
  flex: 0 0 auto;
  overflow: visible;
  padding: 2px 5px;
  border: 1px solid rgba(92, 214, 153, 0.5);
  border-radius: 4px;
  background: rgba(92, 214, 153, 0.14);
  color: #bdf3d4;
  font-size: 0.58rem;
  font-weight: 950;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 460px) {
  #localProfilePanelOnline .agora-leaderboard-row {
    grid-template-columns: 38px minmax(0, 1fr) minmax(68px, auto);
    gap: 6px;
    padding: 8px;
  }

  #localProfilePanelOnline .agora-leaderboard-player {
    gap: 6px;
  }

  #localProfilePanelOnline .agora-leaderboard-player img {
    width: 26px;
    height: 26px;
  }

  #localProfilePanelOnline .agora-leaderboard-meta {
    display: block;
    grid-column: 2 / -1;
    font-size: 0.7rem;
  }

  #localProfilePanelOnline .agora-leaderboard-you-badge {
    padding-inline: 4px;
    font-size: 0.52rem;
  }
}

@font-face {
  font-family: "Cinzel";
  src: url("../assets/fonts/cinzel/cinzel-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Cinzel";
  src: url("../assets/fonts/cinzel/cinzel-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Cinzel";
  src: url("../assets/fonts/cinzel/cinzel-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Cinzel";
  src: url("../assets/fonts/cinzel/cinzel-900.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("../assets/fonts/eb-garamond/eb-garamond-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("../assets/fonts/eb-garamond/eb-garamond-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("../assets/fonts/eb-garamond/eb-garamond-italic-400.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("../assets/fonts/eb-garamond/eb-garamond-italic-500.ttf") format("truetype");
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}

/* ONLINE-2C.2-B (polish typographique room ONLINE) — Cormorant Garamond et
   Lora sont auto-hebergees, meme strategie que Great Vibes/Cinzel/
   EB Garamond ci-dessus (fichier local, aucun import reseau/Google Fonts
   au chargement de la page). Fichiers variables (axe wght, une seule
   fonte couvre toute la plage de graisses 300-700 / 400-700), licence SIL
   OFL, libre de redistribution.
   ONLINE-2C.2-B (optimisation, confirmee en navigateur reel) : WOFF2
   uniquement (sous-ensemble "latin", couvre tout le francais — accents/
   ligatures U+0000-00FF + U+0152-0153 pour "œ") — ~30x plus leger que le
   TTF variable complet toutes ecritures (Cormorant : 1,17 Mo -> 36,8 Kio ;
   Lora : 207 Kio -> 36,9 Kio). Les fichiers .ttf ont ete retires des deux
   dossiers de polices (cormorant-garamond et lora) apres confirmation
   reseau + rendu identiques : WOFF2 est supporte par tout navigateur
   cible de ce site (aucun repli TTF necessaire), donc aucun format()
   supplementaire n'est liste ici. ATTENTION en modifiant ce commentaire :
   n'y jamais faire figurer la sequence deux caracteres etoile-slash, qui
   fermerait ce commentaire CSS prematurement (bug reellement rencontre et
   corrige ici). */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond/cormorant-garamond-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("../assets/fonts/lora/lora-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* ONLINE-0C-MULTI4-E.4-C, mis a jour ONLINE-2C.2-B — direction
     typographique du salon/plateau d'attente online : Cormorant Garamond
     (titres, noms, code) / Lora (corps, metadonnees, boutons). Les deux
     familles sont desormais auto-hebergees localement (voir @font-face
     ci-dessus, assets/fonts/cormorant-garamond/ et assets/fonts/lora/,
     meme strategie que Great Vibes/Cinzel/EB Garamond : aucun import web/
     Google Fonts, aucune dependance reseau nouvelle). EB Garamond reste en
     repli reel (Georgia/serif generique en dernier recours) si jamais le
     fichier local ne pouvait pas etre charge, jamais une police absente
     silencieusement remplacee par une sans-serif. */
  --font-online-heading: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-online-body: "Lora", "EB Garamond", Georgia, serif;
  --page-top: #0b2a24;
  --page-mid: #081e1a;
  --page-bottom: #061512;
  --ink: #31261d;
  --muted: #756553;
  --line: #5a4635;
  --line-soft: rgba(90, 70, 53, 0.22);
  --panel: rgba(253, 248, 239, 0.9);
  --panel-strong: rgba(255, 250, 242, 0.96);
  --shadow-lg: 0 22px 46px rgba(58, 40, 20, 0.18);
  --shadow-md: 0 10px 22px rgba(58, 40, 20, 0.14);
  --shadow-sm: 0 4px 10px rgba(58, 40, 20, 0.1);
  --wood-dark: #6f543d;
  --wood-mid: #8a694d;
  --wood-light: #b8916f;
  --board-frame: #2d6e77;
  --board-frame-inner: #69aeb3;
  --board-grid: rgba(12, 67, 76, 0.94);
  --board-image: none;
  --board-grid-top: 10.546140%;
  --board-grid-right: 5.555556%;
  --board-grid-bottom: 10.080508%;
  --board-grid-left: 8.286252%;
  --board-grid-column-gap: 0.188324%;
  --board-grid-row-gap: 0.188324%;
  --board-tile-scale: 1;
  --tile-top: #fffaf0;
  --tile-mid: #f3ead1;
  --tile-bottom: #e2cf9f;
  --tile-edge: #7e6a43;
  --tile-shadow: 0 10px 16px rgba(55, 37, 15, 0.18);
  --tile-shadow-active: 0 14px 24px rgba(55, 37, 15, 0.22);
  --tw: #e33a34;
  --dw: #e9b4aa;
  --tl: #1886d4;
  --dl: #c0e9f5;
  --start: #d8b64d;
  --good: #2f6a4a;
  --warn: #9a4f31;
  --accent: #36594c;
}

@property --turn-ring-progress {
  syntax: "<angle>";
  inherits: false;
  initial-value: 360deg;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  position: relative;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 20%, rgba(215, 170, 85, 0.16), transparent 28%),
    radial-gradient(circle at 80% 10%, rgba(42, 140, 101, 0.18), transparent 30%),
    linear-gradient(145deg, #07130f, #10261d 48%, #183527);
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: clamp(340px, 32vw, 580px);
  height: clamp(340px, 32vw, 580px);
  border-radius: 999px;
  filter: blur(36px);
  pointer-events: none;
}

body::before {
  top: 36px;
  left: clamp(-120px, 4vw, 72px);
  opacity: 0.12;
  background: radial-gradient(circle, rgba(215, 170, 85, 0.5), rgba(215, 170, 85, 0.16) 46%, transparent 76%);
}

body::after {
  right: clamp(8px, 7vw, 120px);
  bottom: clamp(24px, 10vh, 130px);
  opacity: 0.15;
  background: radial-gradient(circle, rgba(42, 140, 101, 0.54), rgba(42, 140, 101, 0.18) 48%, transparent 78%);
}

button,
a {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.app-shell {
  position: relative;
  z-index: 1;
  width: min(1440px, calc(100vw - 30px));
  margin: 0 auto;
  padding: 10px 0 24px;
}

.site-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(272px, auto) minmax(0, 1fr) auto;
  gap: 10px 18px;
  align-items: center;
  margin-bottom: 8px;
  padding: 12px 18px;
  border: 1px solid rgba(215, 168, 96, 0.28);
  border-radius: 22px;
  background: #0e1c16;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(247, 241, 227, 0.08);
  backdrop-filter: blur(5px);
}

.platform-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.platform-brand:focus-visible {
  outline: 2px solid #d7a860;
  outline-offset: 3px;
  border-radius: 12px;
}

.platform-brand__icon {
  display: block;
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.24));
}

.platform-brand__copy {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 58px;
  min-width: 0;
}

.platform-brand__name {
  color: #d7a860;
  font-size: clamp(1.26rem, 1.35vw, 1.34rem);
  font-weight: 900;
  letter-spacing: 0.13em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.platform-brand__tagline {
  color: rgba(247, 241, 227, 0.9);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.125em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.online-mode-entry {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.online-mode-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: auto;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid rgba(219, 188, 145, 0.2);
  border-radius: 12px;
  appearance: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
    linear-gradient(180deg, rgba(16, 28, 23, 0.96), rgba(9, 17, 14, 0.96));
  color: rgba(242, 229, 208, 0.84);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 219, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(5px);
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.online-mode-button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(215, 168, 96, 0.98), transparent);
  opacity: 0;
  transform: scaleX(0.5);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.online-mode-button__icon {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.24));
}

.online-mode-button:hover,
.online-mode-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(215, 168, 96, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)),
    rgba(20, 43, 35, 0.72);
  color: #fff7e8;
  box-shadow:
    0 7px 13px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(247, 241, 227, 0.09);
  outline: none;
}

.online-mode-button:hover::after,
.online-mode-button:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

.online-mode-button:focus-visible {
  outline: 2px solid rgba(215, 168, 96, 0.42);
  outline-offset: 3px;
}

.site-header[data-online-user-state="connected"] .online-mode-button--guest,
.site-header[data-online-user-state="guest"] .online-mode-button--connected,
.site-header[data-online-user-state="restoring"] .online-mode-button--guest {
  display: none;
}

.notification-center {
  position: absolute;
  top: var(--notification-center-top, 50%);
  left: var(--notification-center-left, 50%);
  transform: translate(-50%, -50%);
  z-index: 12420;
  /* ONLINE-2B.2 — first paint : la cloche reste masquee tant que le JS ne l'a
     pas positionnee (syncNotificationCenterPlacement ajoute .is-placed). Sans
     ça, le fallback 50%/50% ci-dessus la pose par-dessus le titre "Jeu de
     lettres en local" pendant ~1 frame, puis elle saute a sa position finale
     -> impression d'une 2e cloche. */
  visibility: hidden;
}

.notification-center.is-placed {
  visibility: visible;
}

.notification-bell {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(215, 168, 96, 0.32);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(11, 33, 27, 0.92);
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(247, 241, 227, 0.08);
  cursor: pointer;
  transition:
    transform 150ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.notification-bell:hover,
.notification-bell:focus-visible,
.notification-center.is-open .notification-bell {
  transform: translateY(-1px);
  border-color: rgba(215, 168, 96, 0.55);
  box-shadow:
    0 11px 20px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(215, 168, 96, 0.08);
  outline: none;
}

.notification-bell img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.28));
}

.notification-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border: 1px solid rgba(255, 230, 190, 0.75);
  border-radius: 999px;
  background: linear-gradient(180deg, #ff8d4d, #cc3d22);
  color: #fff9ed;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
}

.notification-badge[hidden],
.notification-panel[hidden],
.notification-empty[hidden] {
  display: none;
}

body:has(#setupModal:not([hidden])) .notification-center,
body:has(#setupModal:not([hidden])) #notificationsPanel {
  display: none !important;
}

body:has(#endGameScreen:not([hidden])) {
  overflow-x: hidden;
}

.notification-panel {
  position: fixed;
  top: var(--notifications-panel-top, 112px);
  left: var(--notifications-panel-left, 50vw);
  width: min(360px, calc(100vw - 32px));
  max-height: min(460px, calc(100vh - 130px));
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(215, 168, 96, 0.42);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    #0d2119;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(247, 241, 227, 0.08);
  color: #f7f1e3;
  transform: translateX(-50%);
  z-index: 13050;
}

.notification-panel__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.notification-panel__head strong {
  min-width: 0;
  color: #f7d58d;
  font-size: 1.08rem;
  line-height: 1.15;
}

.notification-panel__head button {
  padding: 7px 10px;
  border: 1px solid rgba(215, 168, 96, 0.28);
  border-radius: 8px;
  background: rgba(247, 241, 227, 0.05);
  color: rgba(247, 241, 227, 0.84);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.12;
  white-space: nowrap;
}

.notification-panel__close {
  order: 3;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: #fff4d6;
  font-size: 1.05rem;
  line-height: 1;
}

.notification-panel__head button:not(.notification-panel__close) {
  order: 2;
}

.notification-list {
  display: grid;
  gap: 9px;
}

.notification-item {
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 1px solid rgba(215, 168, 96, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
}

.notification-item--avatar {
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.notification-item.is-unread {
  border-color: rgba(255, 141, 77, 0.46);
  background: rgba(255, 141, 77, 0.08);
}

.notification-item__avatar {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid rgba(247, 213, 141, 0.58);
  border-radius: 12px;
  background: rgba(8, 28, 20, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.notification-item__avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  display: block;
}

.notification-item__copy {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.local-profile-avatar-choice.is-avatar-new-reward,
.setup-avatar-option.is-avatar-new-reward {
  border-color: rgba(247, 213, 141, 0.72);
  box-shadow:
    0 0 0 1px rgba(247, 213, 141, 0.22),
    0 0 18px rgba(247, 190, 92, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: avatarNewRewardHalo 920ms ease-out 1;
}

@keyframes avatarNewRewardHalo {
  0% {
    box-shadow:
      0 0 0 1px rgba(247, 213, 141, 0.52),
      0 0 0 rgba(247, 190, 92, 0),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  48% {
    box-shadow:
      0 0 0 2px rgba(247, 213, 141, 0.58),
      0 0 24px rgba(247, 190, 92, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(247, 213, 141, 0.22),
      0 0 18px rgba(247, 190, 92, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .local-profile-avatar-choice.is-avatar-new-reward,
  .setup-avatar-option.is-avatar-new-reward {
    animation: none;
  }
}

.notification-item strong {
  color: #fff4d6;
  font-size: 0.98rem;
  line-height: 1.18;
}

.notification-item p {
  margin: 0;
  color: rgba(247, 241, 227, 0.82);
  font-size: 0.9rem;
  line-height: 1.38;
}

.notification-item time,
.notification-empty {
  color: rgba(247, 241, 227, 0.62);
  font-size: 0.82rem;
  line-height: 1.35;
}

.notification-empty {
  margin: 10px 0 0;
}

.platform-nav {
  display: flex;
  justify-content: center;
  gap: clamp(3px, 0.38vw, 7px);
  min-width: 0;
  overflow: visible;
  scrollbar-width: none;
}

.platform-nav::-webkit-scrollbar {
  display: none;
}

.platform-nav__item {
  position: relative;
  flex: 0 0 auto;
  padding: 7px 8px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: rgba(247, 241, 227, 0.9);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.platform-nav__item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(215, 168, 96, 0.98), transparent);
  opacity: 0;
  transform: scaleX(0.5);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.platform-nav__item:hover,
.platform-nav__item:focus-visible {
  color: #fff7e8;
  border-color: rgba(215, 168, 96, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)),
    rgba(20, 43, 35, 0.72);
  box-shadow:
    0 7px 13px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(247, 241, 227, 0.09);
  outline: none;
  transform: translateY(-1px);
}

.platform-nav__item:hover::after,
.platform-nav__item:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

.platform-nav__item--active {
  color: #fff7e8;
  border-color: rgba(215, 168, 96, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(20, 43, 35, 0.82);
  box-shadow:
    0 8px 14px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(247, 241, 227, 0.1);
}

.platform-nav__item--active::after {
  opacity: 0.82;
  transform: scaleX(1);
}

.platform-nav-more {
  position: relative;
  display: none;
  flex: 0 0 auto;
}

.platform-nav-more__summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 7px 10px 8px;
  border: 1px solid rgba(215, 168, 96, 0.26);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)),
    rgba(20, 43, 35, 0.72);
  color: rgba(247, 241, 227, 0.92);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  list-style: none;
  white-space: nowrap;
  box-shadow:
    0 7px 13px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(247, 241, 227, 0.08);
}

.platform-nav-more__summary::-webkit-details-marker {
  display: none;
}

.platform-nav-more__summary::after {
  content: "⌄";
  margin-left: 6px;
  color: #d7a860;
  font-size: 0.95em;
  line-height: 1;
}

.platform-nav-more[open] .platform-nav-more__summary::after {
  transform: rotate(180deg);
}

.platform-nav-more__dropdown {
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  gap: 4px;
  min-width: 170px;
  padding: 8px;
  border: 1px solid rgba(215, 168, 96, 0.26);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(33, 55, 46, 0.98), rgba(9, 18, 15, 0.98));
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(247, 241, 227, 0.08);
}

.platform-nav-more__item {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(247, 241, 227, 0.9);
  font-size: 0.82rem;
  font-weight: 750;
  text-align: left;
  text-decoration: none;
}

.platform-nav-more__item--mobile-only,
.platform-nav-more__item--download,
.platform-nav-more__item--primary,
.platform-nav-more__header {
  display: none;
}

.platform-nav-more__item:hover,
.platform-nav-more__item:focus-visible {
  background: rgba(215, 168, 96, 0.12);
  color: #fff7e8;
  outline: none;
}

.platform-nav-toast {
  position: fixed;
  /* Doit rester au-dessus du header/menu, qui passe en z-index:7000 (dropdown
     jusqu'a 9100) sous 1180px de large — sinon ce toast se retrouve caché
     derrière l'interface sur mobile/tablette et petites fenêtres desktop. */
  z-index: 20000;
  top: clamp(78px, 9vh, 112px);
  left: 50%;
  max-width: min(520px, calc(100vw - 32px));
  padding: 12px 16px;
  border: 1px solid rgba(215, 168, 96, 0.42);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(34, 61, 48, 0.96), rgba(6, 24, 17, 0.96));
  color: #fff7e8;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 246, 223, 0.09);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  transform: translate(-50%, -8px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.platform-nav-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.platform-nav-toast[hidden] {
  display: none;
}

.cookie-consent-banner {
  position: fixed;
  z-index: 16000;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px clamp(16px, 4vw, 28px);
  padding: clamp(14px, 2.4vh, 20px) clamp(16px, 4vw, 28px);
  padding-bottom: calc(clamp(14px, 2.4vh, 20px) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(215, 168, 96, 0.42);
  background:
    linear-gradient(180deg, rgba(34, 61, 48, 0.97), rgba(6, 24, 17, 0.98));
  color: #fff7e8;
  box-shadow:
    0 -18px 36px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 246, 223, 0.09);
  transform: translateY(12px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.cookie-consent-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

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

.cookie-consent-banner__text {
  flex: 1 1 320px;
  max-width: 640px;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

.cookie-consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 0 auto;
}

.cookie-consent-banner__actions button {
  min-height: 44px;
  min-width: 138px;
  padding: 0 22px;
  border-radius: 16px;
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform 150ms ease,
    filter 150ms ease,
    box-shadow 150ms ease;
}

.cookie-consent-banner__actions button:hover {
  transform: translateY(-1px);
}

.cookie-consent-banner__actions button:active {
  transform: translateY(1px);
  filter: brightness(0.97);
}

.cookie-consent-banner__actions button:focus-visible {
  outline: 2px solid #ffe8a8;
  outline-offset: 2px;
}

.cookie-consent-banner__accept {
  border: 1px solid rgba(120, 86, 30, 0.55);
  background: linear-gradient(180deg, #ffe8a8, #d7a860);
  color: #132018;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.cookie-consent-banner__accept:hover {
  filter: brightness(1.05);
  box-shadow:
    0 13px 24px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.cookie-consent-banner__reject {
  border: 1px solid rgba(215, 168, 96, 0.5);
  background:
    linear-gradient(180deg, rgba(34, 61, 48, 0.98), rgba(6, 20, 14, 0.98));
  color: #fff7e8;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 246, 223, 0.08);
}

.cookie-consent-banner__reject:hover {
  filter: brightness(1.14);
  box-shadow:
    0 13px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 246, 223, 0.12);
}

@media (max-width: 640px) {
  .cookie-consent-banner {
    justify-content: stretch;
    text-align: center;
  }

  .cookie-consent-banner__actions {
    width: 100%;
    justify-content: center;
  }

  .cookie-consent-banner__actions button {
    flex: 1 1 0;
  }
}

@media (max-width: 380px) {
  .cookie-consent-banner__actions {
    flex-direction: column;
  }

  .cookie-consent-banner__actions button {
    width: 100%;
  }
}

.cookie-prefs-inline-link {
  margin-top: 10px;
  padding: 4px 2px;
  border: none;
  background: none;
  color: var(--muted);
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.cookie-prefs-inline-link:hover {
  color: #f5e8d1;
}

.cookie-prefs-inline-link:focus-visible {
  outline: 2px solid #d7a860;
  outline-offset: 2px;
}

.site-game-title {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  gap: 2px;
  padding-top: 0;
  border-top: 0;
  justify-self: center;
  justify-items: center;
  text-align: center;
}

.site-game-title h1 {
  font-size: clamp(1.72rem, 2.15vw, 2.24rem);
  line-height: 1;
  color: #d7a860;
  text-shadow: 0 0 18px rgba(215, 168, 96, 0.14), 0 2px 14px rgba(0, 0, 0, 0.28);
}

.site-game-title .eyebrow {
  color: rgba(247, 241, 227, 0.9);
}

.site-game-title .subtitle {
  font-size: 0.92rem;
}

.online-header-rules-btn {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  align-self: center;
  margin-left: clamp(318px, 27vw, 388px);
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(215, 168, 96, 0.48);
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(252, 238, 202, 0.18), rgba(215, 168, 96, 0.08)),
    rgba(18, 42, 33, 0.88);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  cursor: pointer;
}

.online-header-rules-btn[hidden] {
  display: none;
}

.online-header-rules-btn:hover,
.online-header-rules-btn:focus-visible {
  border-color: rgba(246, 217, 144, 0.86);
  outline: none;
  transform: translateY(-1px);
}

.online-header-rules-btn__icon {
  position: relative;
  width: 17px;
  height: 20px;
  border: 2px solid #f6d990;
  border-radius: 3px;
  background: rgba(246, 217, 144, 0.08);
}

.online-header-rules-btn__icon::before,
.online-header-rules-btn__icon::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  height: 2px;
  border-radius: 999px;
  background: rgba(247, 241, 227, 0.86);
}

.online-header-rules-btn__icon::before {
  top: 5px;
  box-shadow: 0 5px 0 rgba(247, 241, 227, 0.86);
}

.online-header-rules-btn__icon::after {
  bottom: 3px;
}

.online-match-rules-action {
  display: none;
}

.online-match-rules-action[hidden] {
  display: none !important;
}

.online-match-rules-action__icon {
  position: relative;
  width: 14px;
  height: 17px;
  border: 1.5px solid #f6d990;
  border-radius: 3px;
  background: rgba(246, 217, 144, 0.08);
}

.online-match-rules-action__icon::before,
.online-match-rules-action__icon::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  height: 1.5px;
  border-radius: 999px;
  background: rgba(247, 241, 227, 0.86);
}

.online-match-rules-action__icon::before {
  top: 4px;
  box-shadow: 0 4px 0 rgba(247, 241, 227, 0.86);
}

.online-match-rules-action__icon::after {
  bottom: 3px;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid rgba(210, 182, 138, 0.28);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(246, 219, 181, 0.1), rgba(255, 255, 255, 0.02)),
    linear-gradient(135deg, rgba(27, 42, 36, 0.96), rgba(14, 23, 19, 0.98));
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 241, 217, 0.1);
  backdrop-filter: blur(6px);
}

.topbar-brand,
.topbar-actions {
  min-width: 0;
}

.topbar-status {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(205, 177, 132, 0.18);
  background:
    linear-gradient(180deg, rgba(243, 214, 174, 0.13), rgba(255, 255, 255, 0.03)),
    linear-gradient(180deg, rgba(24, 40, 34, 0.96), rgba(15, 24, 20, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 223, 0.08),
    inset 0 0 0 1px rgba(10, 18, 15, 0.28);
}

.topbar-status .subtle {
  color: rgba(236, 222, 196, 0.82);
}

.status-label {
  color: rgba(226, 210, 183, 0.72);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
}

.turn-banner {
  display: block;
  font-size: 1.22rem;
  line-height: 1.2;
  color: #fff3d7;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.turn-meta {
  display: block;
  font-size: 0.92rem;
  line-height: 1.35;
}

.turn-meta-label {
  color: #fff0cc;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.topbar-actions {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.topbar-timing {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.game-controls-bar {
  grid-column: 2 / 4;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.game-controls-bar .topbar-timing {
  gap: 8px;
}

.account-area {
  position: relative;
  justify-self: end;
  min-width: 0;
  /* PASSE B — colonne : rangee [profil local | icone compte] au-dessus,
     gros CTA Connexion / Inscription en dessous (invite hors partie). */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* PASSE B — rangee horizontale PROFIL JOUEUR LOCAL + icone COMPTE AGORA.
   Les deux composants sont independants ; .profile-menu peut se compresser
   (ellipsis du pseudo) sans jamais pousser l'icone compte hors de l'en-tete. */
.account-area__row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.account-area__row .profile-menu {
  min-width: 0;
  flex: 0 1 auto;
}

.account-area[data-account-state="connected"] .account-auth,
.account-area[data-account-state="restoring"] .account-auth {
  display: none;
}

/* ACCOUNT-LOCAL-RESULTS-B5.3 — invite AVEC un profil local deja configure :
   on ne duplique PLUS les gros CTA .account-auth dans le header en meme temps
   que le profil local (surcharge inutile, surtout mobile). A la place, la
   PETITE icone compte separee (.account-menu / #accountMenuGuestBtn) reste
   visible comme porte d'entree discrete (clic -> modale Connexion /
   Inscription) ; Connexion / Inscription restent aussi dans le dropdown du
   profil local (section « Compte Agora », PASSE B3).
   Invite SANS profil configure (data-local-profile-configured="false" ->
   .profile-menu entierement masquee) : .account-auth reste la seule porte
   d'entree hors partie, comportement INCHANGE.
   Connecte / restoring : .account-auth deja masque plus haut, inchange. */
.account-area[data-account-state="guest"][data-local-profile-configured="true"] .account-auth {
  display: none;
}

.account-area[data-account-state="guest"][data-local-profile-configured="true"] .account-menu {
  display: block;
}

.account-area[data-account-state="guest"][data-local-profile-configured="true"] #accountMenuGuestBtn {
  display: inline-flex;
}

/* ============================================================
   PROFILE-UX-1 / GAME-UX-1 — presentation UNIQUEMENT (aucun impact
   identite / gameplay / Auth / rattachement de partie).
   - PROFILE-UX-1 : un invite peut desormais ouvrir son profil LOCAL depuis
     l'en-tete. .profile-menu (deja rempli par renderLocalPlayerProgress())
     n'est plus masque pour data-account-state="guest" ; Connexion /
     Inscription restent visibles a cote.
   - GAME-UX-1 : .site-header[data-match-phase="active"] (pose par
     renderPlayerAccountHeader() quand state.gameSessionStarted && !gameOver)
     masque les CTA compte pendant le jeu et compacte le trigger.
   L'attribut DOM reel est data-match-phase (jamais data-matchPhase).
   ============================================================ */

/* PASSE B — .profile-menu = PROFIL JOUEUR LOCAL, pour TOUS les etats de
   compte (invite / restoring / connecte). Visible uniquement quand :
   - le profil local a ete configure volontairement (PASSE A,
     data-local-profile-configured, cf. renderPlayerAccountHeader), ET
   - app.js l'a rempli (data-local-profile-ready — anti-flash du placeholder
     HTML "Maurice / Niveau 1", et surtout : un compte Agora connecte
     n'affiche JAMAIS le placeholder ni le displayName du compte ici).
   Sur une 1re visite (profil non configure) : aucune zone profil joueur,
   aucun faux "Joueur 1" / "Niveau 1". */
.account-area .profile-menu {
  display: none;
}

.account-area[data-local-profile-ready="true"][data-local-profile-configured="true"] .profile-menu {
  display: block;
}

.account-area[data-local-profile-ready="true"][data-local-profile-configured="false"][data-account-header-fallback="true"] .profile-menu {
  display: block;
}

.account-area[data-account-header-fallback="true"] .profile-level-line {
  display: none;
}

/* Invite : jamais de "Se deconnecter" (aucune session a fermer) — defense
   supplementaire, le dropdown compte connecte n'est de toute facon pas
   rendu pour un invite. */
.account-area[data-account-state="guest"] #playerAccountLogoutBtn {
  display: none;
}

/* Invite : trigger compact (largeur au contenu). PASSE A — on ne masque
   PLUS la ligne "Niveau" pour l'invite : un profil local configure affiche
   avatar + pseudo + Niveau sur desktop (la reduction se fait aux
   breakpoints). Un profil NON configure -> toute la zone .profile-menu est
   masquee (regle .profile-menu configured + ready plus haut). */
.account-area[data-account-state="guest"] .profile-trigger {
  min-width: 0;
}

/* PASSE B — dans la rangee compte, le trigger profil peut se compresser
   (pseudo tronque par ellipsis) pour ne jamais evincer l'icone compte. */
.account-area__row .profile-trigger {
  min-width: 0;
}

.account-area[data-account-state="guest"] .profile-copy {
  gap: 0;
}

/* Invite sur mobile etroit : trigger avatar + chevron seuls (le pseudo est
   deja masque par le design mobile existant ; sans ligne niveau/pays, le
   bloc .profile-copy n'a plus rien a montrer). Selecteur plus specifique
   que le ".profile-copy { display: grid }" du bloc mobile existant. */
@media (max-width: 639px) {
  .account-area[data-account-state="guest"] .profile-copy {
    display: none;
  }
}

/* GAME-UX-1 — une vraie partie est en cours : priorite au jeu.
   Invite : Connexion ET Inscription disparaissent (une partie commencee
   invite reste invite : on ne suggere aucun rattachement en cours de jeu).
   Connecte : .account-auth est deja masquee par data-account-state. */
.site-header[data-match-phase="active"] .account-auth {
  display: none;
}

/* PASSE B (sous-etape B2) — "Se deconnecter" reste disponible pendant une
   partie active, UNIQUEMENT dans le dropdown COMPTE AGORA (.account-menu).
   Le menu PROFIL JOUEUR local ne contient aucun bouton logout. Un logout
   pendant une partie SOLO/LOCAL ne touche ni l'identite de partie
   (state.players[0]) ni state.playerProfile / state.localPlayerProgress
   (cf. logoutPlayerAccount + separation PASSE B). L'ancienne regle
   `.site-header[data-match-phase="active"] #playerAccountLogoutBtn
   { display:none }` est supprimee. */

/* PASSE A — pendant une partie, on NE masque PLUS globalement le texte du
   trigger sur desktop : avatar + pseudo + Niveau restent visibles (l'identite
   affichee vient du snapshot de la partie, cf. renderLocalPlayerProgress).
   Le trigger se contente de s'adapter au contenu (min-width:0). La reduction
   se fait uniquement aux breakpoints ci-dessous. */
.site-header[data-match-phase="active"] .profile-trigger {
  min-width: 0;
}

/* Tablette : masquer d'abord le "Niveau" (ligne secondaire) pendant la partie. */
@media (max-width: 899px) {
  .site-header[data-match-phase="active"] .profile-level-line {
    display: none;
  }
}

/* Petit mobile : masquer ensuite le pseudo ; l'avatar reste visible.
   (Le design mobile existant <=639px reduit deja .profile-copy ; on le
   force ici a "avatar + chevron" pendant la partie.) */
@media (max-width: 639px) {
  .site-header[data-match-phase="active"] .profile-trigger {
    grid-template-columns: auto auto;
  }

  .site-header[data-match-phase="active"] .profile-copy {
    display: none;
  }
}

/* ============================================================
   PASSE B — COMPTE AGORA (.account-menu) : composant separe de
   .profile-menu (PROFIL JOUEUR LOCAL). Petite icone compte + dropdown.
   Aucun role partage : l'identite du compte connecte ne vit QUE ici.
   Invite -> #accountMenuGuestBtn ouvre directement openPlayerAccountModal
   ('signup'). Connecte -> <details id="accountMenuConnected">.
   ============================================================ */

/* Modale "Reprendre la partie" ouverte : les gros CTA du header sont
   masques (l'en-tete est generalement hors viewport a ce moment). L'acces
   compte invite passe par le lien discret #resumeModalAccountBtn dans la
   modale. matchPhase reste "idle" ici, d'ou le selecteur separe. */
body:has(#resumeModal:not([hidden])) .account-auth {
  display: none;
}

/* Zone compte reellement accessible (clic + focus clavier) par-dessus
   l'overlay plein ecran de la modale reprise (z-index 31). Contextuel a
   CETTE modale uniquement — jamais un z-index global. Le dropdown ouvert
   garde son propre z-index (.profile-menu[open] = 12250). */
body:has(#resumeModal:not([hidden])) .account-area {
  position: relative;
  z-index: 40;
}

/* --- .account-menu : conteneur + visibilite ---------------------------- */
.account-menu {
  position: relative;
  display: none;
}

#accountMenuGuestBtn,
.account-menu__connected {
  display: none;
}

/* PASSE B3c — compte connecte : l'icone compte separee devient REDONDANTE
   des que le joueur a un profil local configure (le compte est alors
   accessible depuis le dropdown .profile-menu — Statistiques verifiees /
   Se deconnecter — et depuis la grande fenetre Profil). On la MASQUE dans
   ce cas, en partie comme hors partie -> header = [avatar] Paul / Niveau 1.
   FILET DE SECURITE : connecte AVANT d'avoir configure un profil local
   (data-local-profile-configured="false" -> .profile-menu masquee) :
   l'icone reste VISIBLE, seul acces pratique au compte.
   restoring + cache F5 : idem, gate par data-local-profile-configured
   (attribut pose par renderPlayerAccountHeader des le boot). */
.account-area[data-account-state="connected"][data-local-profile-configured="false"] .account-menu,
.account-area[data-account-state="restoring"][data-account-profile-cache="available"][data-local-profile-configured="false"] .account-menu {
  display: block;
}

.account-area[data-account-state="connected"][data-local-profile-configured="false"] .account-menu__connected,
.account-area[data-account-state="restoring"][data-account-profile-cache="available"][data-local-profile-configured="false"] .account-menu__connected {
  display: block;
}

/* Invite : l'icone compte separee n'apparait que pendant une partie active
   (hors partie, les gros CTA Connexion / Inscription suffisent — pas de
   troisieme acces redondant). Un clic ouvre directement la modale signup. */
.site-header[data-match-phase="active"] .account-area[data-account-state="guest"] .account-menu {
  display: block;
}

.site-header[data-match-phase="active"] .account-area[data-account-state="guest"] #accountMenuGuestBtn {
  display: inline-flex;
}

/* --- .account-menu : trigger (icone) --------------------------------- */
.account-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(215, 168, 96, 0.26);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.016)),
    rgba(11, 33, 27, 0.9);
  color: #e9d6ac;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(247, 241, 227, 0.08);
  list-style: none;
  cursor: pointer;
  transition:
    transform 150ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

.account-menu__trigger::-webkit-details-marker {
  display: none;
}

.account-menu__trigger:hover,
.account-menu__trigger:focus-visible,
.account-menu__connected[open] .account-menu__trigger {
  transform: translateY(-1px);
  border-color: rgba(215, 168, 96, 0.46);
  color: #fff7e8;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025)),
    rgba(15, 43, 35, 0.94);
  box-shadow:
    0 13px 24px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(215, 168, 96, 0.08),
    inset 0 1px 0 rgba(247, 241, 227, 0.11);
  outline: none;
}

.account-menu__icon {
  display: block;
  width: 20px;
  height: 20px;
}

/* --- .account-menu : dropdown (compte connecte) --------------------- */
.account-menu__connected {
  position: relative;
}

.account-menu__connected[open] {
  z-index: 12250 !important;
}

.account-menu__dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 12260 !important;
  display: grid;
  gap: 6px;
  min-width: 232px;
  padding: 46px 10px 12px;
  border: 1px solid rgba(215, 168, 96, 0.26);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(17, 48, 38, 0.98), rgba(7, 22, 17, 0.99)),
    #0e1c16;
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(247, 241, 227, 0.07);
  isolation: isolate;
}

.account-menu__eyebrow {
  padding: 0 4px;
  color: #d7a860;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.account-menu__name {
  padding: 0 4px;
  color: #fff7e8;
  font-size: 1rem;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu__country {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px 4px;
  color: rgba(247, 241, 227, 0.82);
  font-size: 0.78rem;
  font-weight: 700;
}

.country-flag-mini {
  flex: 0 0 auto;
  width: 28px;
  height: 21px;
  border-radius: 3px;
  object-fit: contain;
  background: rgba(10, 28, 22, 0.72);
  box-shadow:
    0 0 0 1px rgba(247, 241, 227, 0.14),
    0 2px 5px rgba(0, 0, 0, 0.16);
}

.country-flag-mini[hidden] {
  display: none;
}

.country-select-with-flag,
.country-inline-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.local-profile-country,
.local-profile-account__country,
.account-menu__country {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.country-select-with-flag {
  width: 100%;
}

.country-select-with-flag select {
  flex: 1 1 auto;
  min-width: 0;
}

.country-select-with-flag .country-picker + .country-flag-mini {
  display: none;
}

.country-select-native {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.country-picker {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.country-picker-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(215, 168, 96, 0.34);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(17, 48, 38, 0.96), rgba(9, 29, 23, 0.98));
  color: #fff4dc;
  font: inherit;
  font-size: 0.96rem;
  font-weight: 800;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 247, 232, 0.08);
}

.country-picker-button:hover,
.country-picker-button:focus-visible {
  border-color: rgba(247, 216, 145, 0.72);
  outline: none;
}

.country-picker-button__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff4dc !important;
  font-size: 0.96rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.country-picker-button__chevron {
  color: rgba(239, 203, 136, 0.82);
  font-size: 0.78rem;
}

.country-picker-panel {
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: none;
  padding: 8px;
  border: 1px solid rgba(215, 168, 96, 0.34);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(15, 45, 35, 0.98), rgba(6, 24, 18, 0.99));
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 247, 232, 0.08);
}

.country-picker.is-open .country-picker-panel {
  display: grid;
  gap: 8px;
}

.country-picker-search {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(215, 168, 96, 0.28);
  border-radius: 9px;
  background: rgba(4, 20, 15, 0.9);
  color: #fff6e4;
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
}

.country-picker-search:focus-visible {
  border-color: rgba(247, 216, 145, 0.74);
  outline: none;
}

.country-picker-list {
  display: grid;
  gap: 2px;
  max-height: min(310px, 45vh);
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 2px;
}

.country-picker-option {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #fff4dc;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 750;
  line-height: 1.22;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.country-picker-option[hidden],
.country-picker-empty[hidden] {
  display: none !important;
}

.country-picker-option:not(:has(img)) {
  grid-template-columns: minmax(0, 1fr);
}

.country-picker-option span {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #fff4dc !important;
  font-size: 0.94rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: normal;
}

.country-picker-option:hover,
.country-picker-option:focus-visible,
.country-picker-option.is-selected {
  border-color: rgba(247, 216, 145, 0.36);
  background: rgba(239, 203, 136, 0.1);
  color: #fff6df;
  outline: none;
}

.country-picker-empty {
  margin: 2px 0 0;
  padding: 12px 10px;
  border: 1px dashed rgba(247, 216, 145, 0.24);
  border-radius: 9px;
  color: rgba(255, 244, 220, 0.78);
  font-size: 0.94rem;
  font-weight: 750;
  text-align: center;
}

@media (max-width: 600px) {
  .country-flag-mini {
    width: 24px;
    height: 18px;
  }

  .country-picker-button {
    min-height: 42px;
    padding: 9px 10px;
  }

  .country-picker-list {
    max-height: min(280px, 42vh);
  }

  .country-picker-option {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .setup-player-chip-copy .country-flag-mini,
  .score-player-country-flag {
    width: 18px;
    height: 13.5px;
  }
}

.account-menu__dropdown button:not(.profile-dropdown__close) {
  padding: 9px 10px;
  border: 1px solid rgba(215, 168, 96, 0.22);
  border-radius: 9px;
  background: rgba(10, 32, 25, 0.7);
  color: #f4ead3;
  font-size: 0.9rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease;
}

.account-menu__dropdown button:not(.profile-dropdown__close):hover,
.account-menu__dropdown button:not(.profile-dropdown__close):focus-visible {
  border-color: rgba(247, 216, 145, 0.6);
  background: rgba(17, 49, 38, 0.95);
  color: #fff7e8;
  outline: none;
}

@media (max-width: 639px) {
  .account-menu__trigger {
    width: 34px;
    height: 34px;
  }

  .account-menu__icon {
    width: 18px;
    height: 18px;
  }

  .account-menu__dropdown {
    min-width: min(232px, calc(100vw - 18px));
  }
}

/* PASSE B3 — acces SECONDAIRE au COMPTE AGORA depuis le bas du dropdown
   PROFIL JOUEUR local. Raccourci + (ACCOUNT-PROFILE-UX-B6.2) rappel du seul
   display name du compte connecte. Toujours PAS d'avatar ni de pays ici, et
   le header garde le pseudo LOCAL : les deux identites restent distinctes.
   Petit bloc discret, pas de gros CTA — les boutons heritent du style
   .profile-dropdown button.
   - Invite    : Connexion + Inscription.
   - Connecte  : nom du compte + Statistiques verifiees + Se deconnecter.
   Jamais affiche pendant "restoring". */
.profile-dropdown__account {
  display: none;
  gap: 4px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(215, 168, 96, 0.2);
}

.account-area[data-account-state="guest"] .profile-dropdown__account,
.account-area[data-account-state="connected"] .profile-dropdown__account {
  display: grid;
}

/* Actions COMPTE AGORA du dropdown profil : jeu de boutons selon l'etat.
   ACCOUNT-PROFILE-B7.2 — #profileMenuAccountSettingsBtn (« Mon compte ») suit
   exactement la meme regle que « Statistiques verifiees » / « Se deconnecter »
   (visible uniquement connecte). Il ouvre la modale #playerAccountSettingsModal. */
#profileMenuAccountSettingsBtn,
#profileMenuVerifiedStatsBtn,
#profileMenuLogoutBtn {
  display: none;
}

.account-area[data-account-state="connected"] #profileMenuLoginBtn,
.account-area[data-account-state="connected"] #profileMenuSignupBtn {
  display: none;
}

.account-area[data-account-state="connected"] #profileMenuAccountSettingsBtn,
.account-area[data-account-state="connected"] #profileMenuVerifiedStatsBtn,
.account-area[data-account-state="connected"] #profileMenuLogoutBtn {
  display: block;
}

.profile-dropdown__account-label {
  padding: 0 9px 2px;
  color: #d7a860;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ACCOUNT-PROFILE-UX-B6.2 — rappel discret de l'identite du COMPTE AGORA
   connecte, sous l'eyebrow « Compte Agora ». Nom seul, informatif (pas un
   bouton), legerement plus marque que l'eyebrow mais secondaire. Rempli par
   app.js UNIQUEMENT en data-account-state="connected" ; masque partout
   ailleurs (defense en profondeur, en plus de l'attribut [hidden]).
   word-break : un display name long ne doit pas elargir le dropdown. */
.profile-dropdown__account-name {
  margin: 0;
  padding: 0 9px 4px;
  color: rgba(232, 216, 193, 0.92);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.account-area:not([data-account-state="connected"]) .profile-dropdown__account-name {
  display: none;
}

/* Repli robuste : quand la modale "Reprendre la partie" est ouverte,
   l'en-tete est souvent hors viewport (focusGameAreaForModal centre le
   plateau). Une action compte DISCRETE integree a la modale garantit
   l'acces sans dependre du scroll. Invite uniquement. */
.resume-modal__account {
  display: none;
  width: fit-content;
  margin: 12px auto 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(232, 216, 193, 0.78);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.resume-modal__account:hover,
.resume-modal__account:focus-visible {
  color: #ffe6a8;
  outline: none;
}

body:has(.site-header[data-online-user-state="guest"]) .resume-modal__account {
  display: block;
}

/* PASSE B — la visibilite de .profile-menu (PROFIL JOUEUR LOCAL) ne depend
   plus de l'etat du compte Agora (data-account-state) : elle est pilotee
   uniquement par data-local-profile-configured + data-local-profile-ready
   (voir plus haut). L'anti-flash F5 "restoring + cache" concerne desormais
   .account-menu (COMPTE AGORA), pas la zone profil local. */

.profile-menu {
  position: relative;
}

@media (min-width: 641px) {
  .account-area {
    /* PASSE B — rangee [trigger profil ~178 + gap 8 + icone compte 38]. */
    width: 236px;
    min-width: 236px;
  }

  /* PROFILE-UX-1 — invite : trigger profil compact (+ Connexion /
     Inscription hors partie). On laisse l'en-tete dimensionner la zone au
     contenu (la colonne nav 1fr absorbe la difference) plutot que la
     largeur fixe de 224px pensee pour le menu compte connecte. */
  .account-area[data-account-state="guest"] {
    width: auto;
    min-width: 0;
  }
}

.profile-menu[open] .profile-chevron {
  transform: rotate(180deg);
}

.profile-trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 178px;
  padding: 6px 8px 6px 6px;
  border: 1px solid rgba(215, 168, 96, 0.26);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.016)),
    rgba(11, 33, 27, 0.9);
  color: #f7f1e3;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(247, 241, 227, 0.08);
  list-style: none;
  cursor: pointer;
  transition:
    transform 150ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.profile-trigger:hover,
.profile-trigger:focus-visible,
.profile-menu[open] .profile-trigger {
  transform: translateY(-1px);
  border-color: rgba(215, 168, 96, 0.46);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025)),
    rgba(15, 43, 35, 0.94);
  box-shadow:
    0 13px 24px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(215, 168, 96, 0.08),
    inset 0 1px 0 rgba(247, 241, 227, 0.11);
  outline: none;
}

.profile-trigger::-webkit-details-marker {
  display: none;
}

.profile-avatar {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 0;
  object-fit: contain;
  border: 0;
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, 0.3));
}

.profile-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.profile-copy strong,
.profile-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-copy strong {
  color: #fff7e8;
  font-size: 0.95rem;
  line-height: 1.08;
}

.profile-copy span {
  color: rgba(247, 241, 227, 0.9);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.08;
}

.profile-level-star {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 3px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  line-height: 1;
  vertical-align: -0.18em;
}

.profile-level-star.is-trophy-icon {
  width: 22px;
  height: 22px;
  margin-left: 5px;
  filter: drop-shadow(0 2px 5px rgba(215, 168, 96, 0.32));
  vertical-align: -0.3em;
}

.profile-chevron {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(215, 168, 96, 0.18));
  transition:
    transform 150ms ease,
    filter 160ms ease;
}

.profile-trigger:hover .profile-chevron,
.profile-trigger:focus-visible .profile-chevron,
.profile-menu[open] .profile-chevron {
  filter: drop-shadow(0 0 12px rgba(215, 168, 96, 0.34));
}

.profile-menu[open] {
  z-index: 12250 !important;
}

.account-auth {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(6, 20, 16, 0.18);
  transition:
    background 160ms ease,
    box-shadow 160ms ease;
}

.account-auth button {
  padding: 9px 15px;
  border: 1px solid rgba(215, 168, 96, 0.4);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(247, 241, 227, 0.06), rgba(247, 241, 227, 0)),
    rgba(10, 32, 25, 0.94);
  color: rgba(247, 241, 227, 0.9);
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: 0.015em;
  box-shadow:
    0 5px 12px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(247, 241, 227, 0.08);
  transition:
    transform 150ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

.account-auth button:nth-child(2) {
  border-color: rgba(247, 216, 145, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 241, 196, 0.28), rgba(215, 168, 96, 0.04)),
    #d7a860;
  color: #0e1c16;
  box-shadow:
    0 7px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 248, 217, 0.55);
}

.account-auth:hover {
  background: rgba(215, 168, 96, 0.06);
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.16);
}

.account-auth button:hover,
.account-auth button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(247, 216, 145, 0.78);
  background:
    linear-gradient(180deg, rgba(247, 241, 227, 0.14), rgba(247, 241, 227, 0.03)),
    rgba(17, 49, 38, 0.98);
  color: #fff7e8;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(215, 168, 96, 0.12),
    0 0 18px rgba(215, 168, 96, 0.18),
    inset 0 1px 0 rgba(247, 241, 227, 0.16);
  outline: none;
}

.account-auth button:nth-child(2):hover,
.account-auth button:nth-child(2):focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 248, 217, 0.42), rgba(215, 168, 96, 0.06)),
    #e3b971;
  color: #07150f;
  box-shadow:
    0 11px 20px rgba(0, 0, 0, 0.24),
    0 0 20px rgba(215, 168, 96, 0.24),
    inset 0 1px 0 rgba(255, 250, 228, 0.7);
  outline: none;
}

.profile-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 12260 !important;
  display: grid;
  gap: 4px;
  min-width: 268px;
  padding: 14px 10px 10px;
  border: 1px solid rgba(215, 168, 96, 0.26);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(17, 48, 38, 0.98), rgba(7, 22, 17, 0.99)),
    #0e1c16;
  opacity: 1;
  isolation: isolate;
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(247, 241, 227, 0.07);
}

.profile-dropdown > * {
  position: relative;
  z-index: 1;
}

.profile-xp-card {
  display: grid;
  gap: 6px;
  padding: 12px 12px 11px;
  margin: 22px 0 6px;
  border: 1px solid rgba(215, 168, 96, 0.26);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.12), rgba(255, 246, 213, 0.022)),
    rgba(15, 43, 35, 0.78);
  color: #fff7e8;
  box-shadow:
    inset 0 1px 0 rgba(247, 241, 227, 0.11),
    inset 0 -10px 18px rgba(0, 0, 0, 0.12),
    0 8px 16px rgba(0, 0, 0, 0.14);
}

.profile-xp-card__eyebrow {
  color: #d7a860;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.profile-xp-card strong {
  color: #fff7e8;
  font-size: 0.95rem;
  line-height: 1.1;
}

.profile-xp-card p {
  margin: 0;
  color: rgba(247, 241, 227, 0.84);
  font-size: 0.78rem;
  line-height: 1.28;
}

.endgame-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.endgame-profile-action {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 14px;
  border-color: rgba(215, 168, 96, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.12), rgba(215, 168, 96, 0.04)),
    rgba(15, 43, 35, 0.82);
  color: #fff7e8;
}

.endgame-profile-action:hover,
.endgame-profile-action:focus-visible {
  border-color: rgba(255, 224, 163, 0.64);
  color: #fff3cf;
}

/* ONLINE-0D-C.7-H.1-E — "Fermer" (ecran final ONLINE) doit visuellement
   etre le meme bouton que "Fermer" au pied de la modale "Historique de la
   partie" (#onlineHistoryCloseFooterBtn.online-mode-modal__primary) : plus
   de finition cream/ivoire dediee ici, #endGameNewGameBtn.endgame-online-
   return-action est desormais un selecteur supplementaire de la regle
   .online-mode-modal__actions .online-mode-modal__primary (voir plus bas
   dans ce fichier) — memes tokens de couleur, une seule declaration
   partagee, jamais deux blocs identiques a maintenir. Geometrie (hauteur/
   padding/rayon) volontairement laissee a .endgame-actions button : deja
   quasi identique a .online-mode-modal__actions button, aucune raison de la
   dupliquer. Classe toujours ajoutee/retiree dynamiquement, LOCAL
   ("Nouvelle partie") reste inchange. */

.profile-xp-bar,
.endgame-xp-progress {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(215, 168, 96, 0.34);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.38), rgba(255, 255, 255, 0.05)),
    rgba(6, 20, 16, 0.72);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.46),
    0 1px 0 rgba(255, 244, 205, 0.08);
}

.profile-xp-bar span,
.endgame-xp-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 247, 213, 0.68), rgba(255, 247, 213, 0.08)),
    linear-gradient(90deg, #916227, #d7a860 54%, #fff0b7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 0 12px rgba(215, 168, 96, 0.32);
  transition: width 420ms ease;
}

.profile-dropdown__close {
  position: absolute;
  top: 10px;
  left: auto;
  right: 10px;
  z-index: 6;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(224, 187, 116, 0.38);
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 239, 190, 0.16), transparent 56%),
    rgba(9, 24, 19, 0.78);
  color: rgba(255, 238, 199, 0.94);
  display: inline-grid;
  place-items: center;
  font-size: 1.72rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.1),
    0 8px 18px rgba(0, 0, 0, 0.24);
  transition:
    transform 120ms ease,
    color 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.profile-dropdown button {
  width: 100%;
  min-height: 40px;
  padding: 8px 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(247, 241, 227, 0.9);
  text-align: left;
  font-size: 0.98rem;
  line-height: 1.25;
}

.profile-dropdown button.profile-dropdown__close {
  position: absolute;
  top: 10px;
  left: auto;
  right: 10px;
  z-index: 6;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(224, 187, 116, 0.38);
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 239, 190, 0.16), transparent 56%),
    rgba(9, 24, 19, 0.78);
  color: rgba(255, 238, 199, 0.94);
  text-align: center;
  font-size: 1.72rem;
  font-weight: 800;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.1),
    0 8px 18px rgba(0, 0, 0, 0.24);
}

.profile-dropdown button.profile-dropdown__close:hover,
.profile-dropdown button.profile-dropdown__close:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 221, 144, 0.78);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 236, 181, 0.28), transparent 58%),
    rgba(27, 48, 38, 0.94);
  color: #ffe6a8;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.18),
    0 10px 20px rgba(0, 0, 0, 0.28),
    0 0 0 3px rgba(231, 185, 100, 0.16);
}

.profile-dropdown button:hover,
.profile-dropdown button:focus-visible {
  background: rgba(215, 168, 96, 0.12);
  color: #fff7e8;
  outline: none;
}

.time-mode-picker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(208, 177, 134, 0.18);
  background:
    linear-gradient(180deg, rgba(243, 214, 174, 0.08), rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, rgba(24, 39, 34, 0.95), rgba(15, 24, 20, 0.94));
  color: rgba(241, 226, 203, 0.82);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.time-mode-picker select {
  border: none;
  outline: none;
  background: transparent;
  color: #fff3db;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

.time-mode-picker select option {
  color: #241a12;
}

.game-timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(219, 188, 145, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
    linear-gradient(180deg, rgba(16, 28, 23, 0.96), rgba(9, 17, 14, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 219, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.16);
  color: #fff3db;
  backdrop-filter: blur(5px);
}

.match-timer {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.match-timer[hidden] {
  display: none;
}

.match-timer__icon {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter:
    drop-shadow(0 1px 0 rgba(255, 242, 214, 0.12))
    drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2));
}

.match-timer .game-timer-label {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: none;
}

.match-timer .game-timer-value {
  margin-left: 0;
  color: #fff7e8;
  font-size: 0.92rem;
}

.game-timer.is-timed {
  border-color: rgba(228, 195, 122, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 219, 0.1),
    0 10px 18px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(216, 177, 105, 0.08);
}

.game-timer-icon {
  opacity: 0.78;
  font-size: 0.95rem;
}

.game-timer-label {
  color: rgba(236, 219, 191, 0.74);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.game-timer-value {
  margin-left: auto;
  font-size: 1rem;
  letter-spacing: 0.06em;
  font-weight: 800;
  color: #fff7ea;
}

.sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 146px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(219, 188, 145, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
    linear-gradient(180deg, rgba(16, 28, 23, 0.96), rgba(9, 17, 14, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 219, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.16);
  color: #fff3db;
  backdrop-filter: blur(5px);
  transition:
    transform 120ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    filter 160ms ease;
}

.sound-toggle:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 219, 0.1),
    0 10px 18px rgba(0, 0, 0, 0.2);
}

.sound-toggle.is-enabled {
  border-color: rgba(120, 214, 147, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 219, 0.08),
    0 10px 18px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(101, 199, 130, 0.08);
}

.sound-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

.sound-toggle-icon img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.sound-toggle-text {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(242, 229, 208, 0.84);
}

.online-reaction-control {
  position: relative;
  z-index: 12440;
}

.online-reaction-control[hidden] {
  display: none;
}

.online-reaction-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid rgba(219, 188, 145, 0.25);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
    linear-gradient(180deg, rgba(29, 45, 37, 0.96), rgba(12, 24, 19, 0.97));
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 219, 0.09),
    0 8px 16px rgba(0, 0, 0, 0.16);
  color: #fff3db;
  backdrop-filter: blur(5px);
  position: relative;
  transition:
    transform 120ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    filter 160ms ease,
    background 160ms ease,
    opacity 160ms ease;
}

.online-reaction-button.is-idle {
  opacity: 0.72;
}

.online-reaction-button.is-idle .online-reaction-button__mark img,
.online-reaction-button.is-sent .online-reaction-button__mark img {
  filter: saturate(0.46) brightness(0.78) contrast(0.95);
}

.online-reaction-button:hover,
.online-reaction-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(239, 205, 125, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 219, 0.12),
    0 11px 20px rgba(0, 0, 0, 0.22);
}

.online-reaction-button.is-suggested {
  border-color: rgba(244, 214, 130, 0.7);
  background:
    linear-gradient(180deg, rgba(255, 238, 185, 0.18), rgba(255, 255, 255, 0.04)),
    linear-gradient(180deg, rgba(45, 59, 42, 0.98), rgba(16, 29, 22, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 219, 0.16),
    0 0 0 3px rgba(244, 214, 130, 0.14),
    0 0 22px rgba(244, 214, 130, 0.24),
    0 14px 24px rgba(0, 0, 0, 0.24);
  animation: onlineReactionWake 880ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.online-reaction-button.is-suggested .online-reaction-button__mark img,
.online-reaction-button.is-open .online-reaction-button__mark img {
  filter: saturate(1.12) brightness(1.06);
}

.online-reaction-button.is-open {
  border-color: rgba(255, 226, 156, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 238, 185, 0.2), rgba(255, 255, 255, 0.06)),
    linear-gradient(180deg, rgba(48, 61, 43, 0.98), rgba(16, 29, 22, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 219, 0.18),
    0 0 0 3px rgba(244, 214, 130, 0.16),
    0 13px 24px rgba(0, 0, 0, 0.24);
}

.online-reaction-button.is-pending {
  cursor: wait;
  opacity: 0.82;
}

.online-reaction-button.is-sent {
  border-color: rgba(112, 201, 144, 0.46);
}

.online-reaction-button__mark {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(255, 244, 212, 0.12), rgba(255, 255, 255, 0) 68%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 12px rgba(244, 214, 130, 0.08);
}

.online-reaction-button__mark img {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
  transition:
    filter 180ms ease,
    transform 180ms ease;
}

.online-reaction-button__sparkles {
  position: absolute;
  inset: -5px;
  pointer-events: none;
  opacity: 0;
}

.online-reaction-button__sparkles span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f8d879;
  box-shadow: 0 0 8px rgba(248, 216, 121, 0.8);
}

.online-reaction-button__sparkles span:nth-child(1) {
  top: 4px;
  left: 7px;
}

.online-reaction-button__sparkles span:nth-child(2) {
  top: 1px;
  right: 12px;
}

.online-reaction-button__sparkles span:nth-child(3) {
  right: 4px;
  bottom: 9px;
}

.online-reaction-button.is-suggested .online-reaction-button__sparkles {
  animation: onlineReactionSparkles 980ms ease-out both;
}

.online-reaction-button__hint {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  max-width: 190px;
  padding: 6px 9px;
  border: 1px solid rgba(244, 214, 130, 0.32);
  border-radius: 999px;
  background: rgba(12, 27, 21, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 219, 0.1),
    0 10px 22px rgba(0, 0, 0, 0.24);
  color: #fff0c9;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.1;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  white-space: nowrap;
}

.online-reaction-button[data-hint]:not([data-hint=""]) .online-reaction-button__hint {
  animation: onlineReactionHint 4.2s ease both;
}

.online-reaction-popover {
  position: fixed;
  top: var(--online-reaction-popover-top, 72px);
  left: var(--online-reaction-popover-left, 50vw);
  right: auto;
  z-index: 12490;
  width: var(--online-reaction-popover-width, min(300px, calc(100vw - 28px)));
  padding: 14px;
  border: 1px solid rgba(220, 188, 139, 0.28);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(36, 58, 48, 0.98), rgba(15, 29, 24, 0.99));
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 243, 219, 0.08);
  color: #f3e6cf;
  transform: translateX(-50%);
}

.online-reaction-popover[hidden] {
  display: none;
}

.online-reaction-popover__title {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.25;
  font-weight: 850;
  color: #fff4dc;
}

.online-reaction-popover__subtitle {
  margin: 4px 0 12px;
  color: rgba(233, 215, 186, 0.72);
  font-size: 0.82rem;
  line-height: 1.35;
}

.online-reaction-choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.online-reaction-choice {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid rgba(217, 181, 118, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff1d7;
  font-size: 0.86rem;
  font-weight: 760;
  text-align: left;
  transition:
    transform 120ms ease,
    background 140ms ease,
    border-color 140ms ease;
}

.online-reaction-choice:hover,
.online-reaction-choice:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(244, 214, 130, 0.48);
  background: rgba(244, 214, 130, 0.12);
}

.online-reaction-choice:disabled {
  cursor: wait;
  opacity: 0.58;
  transform: none;
}

.online-reaction-status {
  min-height: 1.1em;
  margin: 10px 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(232, 216, 188, 0.74);
}

.online-reaction-status[data-state="success"] {
  color: #aee7b5;
}

.online-reaction-status[data-state="error"] {
  color: #ffc4b8;
}

@keyframes onlineReactionWake {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  36% {
    transform: translateY(-1px) scale(1.08) rotate(-5deg);
  }
  72% {
    transform: translateY(0) scale(0.99) rotate(3deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes onlineReactionSparkles {
  0% {
    opacity: 0;
    transform: scale(0.82);
  }
  28%,
  58% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

@keyframes onlineReactionHint {
  0%,
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
  12%,
  78% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .scores .online-reaction-control {
    position: relative;
    justify-self: end;
    align-self: center;
    z-index: 12450;
  }

  .online-reaction-button {
    min-width: 42px;
    min-height: 38px;
    padding: 6px 9px;
  }

  .online-reaction-button__mark {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }

  .online-reaction-button__mark img {
    width: 24px;
    height: 24px;
  }

  .online-reaction-button__hint {
    top: calc(100% + 6px);
    right: 50%;
    max-width: 150px;
    font-size: 0.68rem;
    transform: translate(50%, -4px);
  }

  .online-reaction-button[data-hint]:not([data-hint=""]) .online-reaction-button__hint {
    animation-name: onlineReactionHintMobile;
  }

  .online-reaction-popover {
    width: var(--online-reaction-popover-width, min(268px, calc(100vw - 24px)));
    padding: 10px;
    border-radius: 15px;
    max-height: calc(100dvh - var(--online-reaction-popover-top, 72px) - 10px);
    overflow-y: auto;
  }

  .online-reaction-popover__title {
    font-size: 0.9rem;
  }

  .online-reaction-popover__subtitle {
    margin-bottom: 8px;
    font-size: 0.76rem;
  }

  .online-reaction-choices {
    gap: 5px;
  }

  .online-reaction-choice {
    padding: 7px 9px;
    font-size: 0.8rem;
  }
}

@media (max-width: 380px) {
  .online-reaction-button {
    min-width: 40px;
    padding-inline: 8px;
  }
}

@media (max-height: 450px) and (orientation: landscape) {
  .online-reaction-popover {
    max-height: calc(100dvh - var(--online-reaction-popover-top, 54px) - 8px);
    padding: 8px;
  }

  .online-reaction-choice {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .online-reaction-button,
  .online-reaction-button.is-suggested {
    animation: none;
    transition: none;
  }

  .online-reaction-button.is-suggested .online-reaction-button__sparkles,
  .online-reaction-button[data-hint]:not([data-hint=""]) .online-reaction-button__hint {
    animation: none;
  }

  .online-reaction-button[data-hint]:not([data-hint=""]) .online-reaction-button__hint {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .online-reaction-button[data-hint]:not([data-hint=""]) .online-reaction-button__hint {
    transform: translateX(50%);
  }
}

@keyframes onlineReactionHintMobile {
  0%,
  100% {
    opacity: 0;
    transform: translate(50%, -4px);
  }
  12%,
  78% {
    opacity: 1;
    transform: translate(50%, 0);
  }
}

.topbar-meta {
  justify-content: flex-end;
}

.eyebrow {
  margin: 0 0 4px;
  color: rgba(217, 196, 168, 0.68);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 700;
}

/* ONLINE-0C-MULTI4-E.3-C — pastille discrete indiquant une partie en ligne
   reellement active (voir syncOnlineHeaderState()). Purement decorative
   (aria-hidden) : le texte "Jeu de lettres en ligne" porte deja le sens. */
.online-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border-radius: 50%;
  background: #e0483e;
  vertical-align: middle;
  animation: onlineLiveDotPulse 1.8s ease-in-out infinite;
}

.online-live-dot[hidden] {
  display: none;
}

@keyframes onlineLiveDotPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(224, 72, 62, 0.4);
    opacity: 0.85;
  }
  50% {
    box-shadow: 0 0 6px 3px rgba(224, 72, 62, 0.22);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .online-live-dot {
    animation: none;
    box-shadow: 0 0 4px 1px rgba(224, 72, 62, 0.28);
  }
}

/* ONLINE-0C-MULTI4-E.3-C.1 — RESERVE B : correctifs cibles "ONLINE actif
   uniquement". Ces regles n'alterent AUCUNE regle existante (comportement
   LOCAL historique intact sur ces memes tailles, y compris l'eyebrow
   toujours masque hors ligne) ; elles ajoutent seulement une visibilite
   pour .site-game-title.is-online-live (classe posee par
   syncOnlineHeaderState()). Doivent rester APRES les regles ci-dessus dans
   la cascade ou etre au moins aussi specifiques : ".site-game-title
   .eyebrow"/"site-game-title" existants ont 1-2 classes, ces selecteurs en
   ont 2-3 (plus specifiques), donc l'ordre dans le fichier n'affecte pas
   le resultat. */
@media (min-width: 700px) and (max-width: 899px) {
  .site-game-title.is-online-live .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
}

@media (max-width: 639px) {
  .site-game-title.is-online-live {
    display: grid;
  }

  .site-game-title.is-online-live h1 {
    display: none;
  }

  .site-game-title.is-online-live .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
  }
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: clamp(2rem, 3.35vw, 3rem);
  letter-spacing: 0.02em;
  color: #fff2dc;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}

h2 {
  font-size: 1.08rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

code {
  font-family: "Consolas", "SFMono-Regular", monospace;
  font-size: 0.95em;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.subtitle,
.subtle {
  color: var(--muted);
}

.subtitle {
  margin-top: 3px;
  font-size: 0.9rem;
  color: rgba(227, 212, 189, 0.76);
}

.primary,
.actions button,
.ffsc-link {
  border-radius: 16px;
  border: 1px solid rgba(77, 57, 38, 0.6);
  font-weight: 700;
  transition:
    transform 120ms ease,
    box-shadow 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}

.primary:hover,
.actions button:hover,
.ffsc-link:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ONLINE-0D-C.7-C.1 — lien d'aide lexical gele pendant une partie ONLINE active
   (updateWordVerifierLink/isOnlineLexiconHelpFrozen) : reste visible/lisible
   (jamais masque, evite un saut de mise en page) mais visuellement
   desactive, sans effet hover/translation. */
.ffsc-link.is-online-frozen {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.35);
}

.ffsc-link.is-online-frozen:hover {
  transform: none;
  box-shadow: none;
}

.ffsc-link.word-verifier-link--active {
  border-color: rgba(234, 194, 111, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 236, 178, 0.42), rgba(204, 151, 76, 0.2)),
    linear-gradient(180deg, rgba(31, 91, 67, 0.86), rgba(17, 54, 42, 0.94));
  color: #fff4cf;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
  box-shadow:
    0 10px 24px rgba(10, 35, 27, 0.28),
    0 0 0 3px rgba(222, 177, 91, 0.12),
    inset 0 1px 0 rgba(255, 247, 224, 0.22);
}

.ffsc-link.word-verifier-link--active:hover,
.ffsc-link.word-verifier-link--active:focus-visible {
  border-color: rgba(255, 226, 153, 0.9);
  color: #fff9e8;
  box-shadow:
    0 12px 28px rgba(10, 35, 27, 0.34),
    0 0 0 4px rgba(237, 193, 103, 0.16),
    inset 0 1px 0 rgba(255, 247, 224, 0.28);
}

.ffsc-link.word-verifier-link--pulse {
  animation: wordVerifierPulse 820ms ease-out 1;
}

@keyframes wordVerifierPulse {
  0% {
    transform: scale(1);
    box-shadow:
      0 10px 24px rgba(10, 35, 27, 0.28),
      0 0 0 0 rgba(237, 193, 103, 0.28),
      inset 0 1px 0 rgba(255, 247, 224, 0.22);
  }

  42% {
    transform: scale(1.02);
    box-shadow:
      0 15px 30px rgba(10, 35, 27, 0.36),
      0 0 0 7px rgba(237, 193, 103, 0.18),
      inset 0 1px 0 rgba(255, 247, 224, 0.3);
  }

  100% {
    transform: scale(1);
    box-shadow:
      0 10px 24px rgba(10, 35, 27, 0.28),
      0 0 0 3px rgba(222, 177, 91, 0.12),
      inset 0 1px 0 rgba(255, 247, 224, 0.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ffsc-link.word-verifier-link--pulse {
    animation: none;
  }
}

.primary {
  padding: 12px 20px;
  background:
    linear-gradient(180deg, #d9b26e, #b27f3e),
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent);
  border-color: rgba(105, 66, 27, 0.8);
  color: #fff8ec;
  box-shadow:
    0 14px 22px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 245, 221, 0.48);
}

.layout {
  display: grid;
  grid-template-columns: minmax(236px, 300px) minmax(660px, 1fr) minmax(210px, 260px);
  gap: 14px;
  margin-top: 16px;
  align-items: start;
}

.board-panel,
.panel {
  border-radius: 28px;
  border: 1px solid rgba(205, 177, 132, 0.16);
  background:
    linear-gradient(180deg, rgba(243, 215, 176, 0.08), rgba(255, 255, 255, 0.02)),
    linear-gradient(135deg, rgba(22, 34, 29, 0.96), rgba(15, 22, 19, 0.96));
  box-shadow:
    0 20px 38px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 243, 221, 0.06);
}

.board-panel {
  position: relative;
  display: grid;
  gap: 2px;
  align-content: start;
  padding: 4px 16px 30px;
  min-width: 0;
  background:
    radial-gradient(circle at 50% 22%, rgba(72, 118, 96, 0.28), transparent 32%),
    linear-gradient(180deg, rgba(244, 215, 175, 0.08), rgba(255, 255, 255, 0.02)),
    linear-gradient(135deg, rgba(17, 30, 25, 0.98), rgba(11, 18, 15, 0.98));
  border-color: rgba(205, 177, 132, 0.22);
}

.board-panel h2,
.board-panel .subtle,
.rack-card h2,
.rack-card .subtle {
  color: #f3ead7;
}

.board-header .subtle,
.rack-header .subtle {
  color: rgba(235, 226, 212, 0.78);
}

.panel {
  padding: 16px;
}

.panel-head {
  display: grid;
  gap: 4px;
}

.panel-head--with-icon {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.scores .panel-head--with-icon {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.scores .panel-head--with-icon h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}

.match-online-action {
  display: none;
}

.scores .notification-center {
  position: relative;
  grid-column: 3;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  margin: 0;
  top: auto;
  left: auto;
  transform: none;
}

.scores .notification-bell {
  width: 28px;
  height: 28px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.scores .notification-bell:hover,
.scores .notification-bell:focus-visible,
.scores .notification-center.is-open .notification-bell {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}

.scores .notification-bell img {
  width: 22px;
  height: 22px;
}

.panel-title-icon {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter:
    drop-shadow(0 1px 0 rgba(255, 242, 214, 0.12))
    drop-shadow(0 4px 7px rgba(0, 0, 0, 0.22));
}

.panel-title-icon-players {
  width: 34px;
  height: 34px;
}

.match-title-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.panel-head h2 {
  color: #f6ead3;
}

.panel-head .subtle {
  color: rgba(236, 220, 194, 0.8);
}

.board-header,
.rack-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.board-header > div {
  display: grid;
  gap: 0;
  width: 100%;
}

.board-info {
  min-width: 0;
  width: 100%;
}

.enriched-word-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 4px;
  width: 100%;
  max-width: none;
  height: 92px;
  min-height: 92px;
  margin: 0;
  padding: 7px 14px 8px;
  border-radius: 16px;
  border: 1px solid rgba(226, 191, 126, 0.24);
  background:
    linear-gradient(180deg, rgba(35, 61, 51, 0.9), rgba(14, 25, 21, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 222, 0.1),
    0 6px 14px rgba(0, 0, 0, 0.1);
}

.panel-lexicon {
  padding: 12px;
}

.panel-lexicon .board-header {
  display: block;
}

.panel-lexicon .enriched-word-panel {
  height: 212px;
  min-height: 212px;
  padding: 2px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.panel-status {
  padding-top: 9px;
  padding-bottom: 9px;
}

.panel-status .message {
  max-height: 82px;
  min-height: 62px;
  overflow: auto;
  padding-top: 8px;
  padding-bottom: 8px;
}

.enriched-word-panel[data-state="default"] {
  gap: 4px;
  background: linear-gradient(180deg, rgba(31, 51, 43, 0.76), rgba(14, 25, 21, 0.8));
}

.enriched-word-panel:not([data-state="default"]) {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding-top: 8px;
}

.enriched-word-agora-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.enriched-word-agora-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(239, 203, 136, 0.38);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 236, 178, 0.16), rgba(215, 168, 96, 0.06)),
    rgba(9, 28, 22, 0.72);
  color: #ffe4a8;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 246, 223, 0.08);
}

.enriched-word-agora-link::after {
  content: "→";
  margin-left: 7px;
  line-height: 1;
}

.enriched-word-agora-link:hover,
.enriched-word-agora-link:focus-visible {
  border-color: rgba(255, 230, 167, 0.7);
  background:
    linear-gradient(180deg, rgba(255, 236, 178, 0.24), rgba(215, 168, 96, 0.1)),
    rgba(15, 40, 31, 0.9);
  color: #fff2c9;
  outline: none;
}

.panel-lexicon .enriched-word-panel[data-state="default"],
.panel-lexicon .enriched-word-panel:not([data-state="default"]) {
  background: transparent;
}

.panel-lexicon .enriched-word-panel:not([data-state="default"]) {
  padding-top: 2px;
}

.enriched-word-panel.has-guide-demo {
  display: grid;
  align-content: stretch;
}

.enriched-word-panel.has-guide-demo > :not(.interactive-guide-lexicon-demo) {
  display: none;
}

.board-stage {
  --ms-celebration-board-radius: 0px;
  position: relative;
  display: block;
  width: min(100%, 1062px);
  margin: -18px auto -32px;
  aspect-ratio: 1;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 242, 202, 0.2), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(126, 83, 43, 0.18), transparent 30%),
    linear-gradient(135deg, rgba(255, 241, 207, 0.58), rgba(185, 133, 75, 0.18) 28%, transparent 48%),
    linear-gradient(315deg, rgba(88, 55, 28, 0.22), transparent 42%),
    linear-gradient(180deg, #edd09b 0%, #d9ad70 12%, #a97843 50%, #d2a066 88%, #f1d8a7 100%);
  border: 0;
  box-shadow:
    inset 0 2px 0 rgba(255, 248, 223, 0.48),
    inset 0 -2px 0 rgba(88, 55, 28, 0.22),
    inset 0 0 0 1px rgba(255, 230, 181, 0.2),
    0 24px 40px rgba(0, 0, 0, 0.22);
}

body[data-board-style="classic-css"] .board-stage {
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 250, 222, 0.08), transparent 22%),
    linear-gradient(180deg, rgba(119, 84, 47, 0.94), rgba(69, 49, 28, 0.98));
  border: 1px solid rgba(214, 184, 123, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 214, 0.1),
    inset 0 0 0 1px rgba(36, 23, 12, 0.3),
    0 24px 40px rgba(0, 0, 0, 0.32);
}

body[data-board-style="native-css"] .board-stage {
  --board-grid-top: 5.9%;
  --board-grid-right: 5.45%;
  --board-grid-bottom: 5.45%;
  --board-grid-left: 5.9%;
  --board-grid-column-gap: 0px;
  --board-grid-row-gap: 0px;
  width: min(98%, 1120px);
  max-width: 100%;
  margin: 12px auto 0;
  --ms-celebration-board-radius: 26px;
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255, 241, 207, 0.72), rgba(185, 133, 75, 0.18) 22%, transparent 42%),
    linear-gradient(315deg, rgba(126, 83, 43, 0.34), transparent 38%),
    linear-gradient(180deg, #efd19a 0%, #d8aa68 11%, #a9743f 50%, #d5a365 89%, #f5dca9 100%);
  border: 1px solid rgba(255, 232, 184, 0.62);
  box-shadow:
    inset 0 2px 0 rgba(255, 250, 225, 0.62),
    inset 0 -2px 0 rgba(98, 55, 25, 0.28),
    inset 0 0 0 8px rgba(255, 230, 181, 0.22),
    inset 0 0 0 16px rgba(113, 70, 36, 0.14),
    0 24px 46px rgba(0, 0, 0, 0.28);
}

.word-highlights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.board-tour-target {
  position: absolute;
  inset: var(--board-grid-top) var(--board-grid-right) var(--board-grid-bottom) var(--board-grid-left);
  pointer-events: none;
  z-index: 0;
}

.ai-move-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
}

.ai-move-layer:not(.is-active) {
  display: none;
}

.ai-move-layer .ai-flying-tile {
  position: absolute;
  margin: 0;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 10px 16px rgba(16, 12, 7, 0.2));
  transform: translate3d(0, 0, 0) scale(0.92);
  justify-self: auto;
  align-self: auto;
  transition:
    transform 520ms cubic-bezier(0.2, 0.8, 0.22, 1),
    opacity 170ms ease-out;
  transition-delay: var(--ai-flight-delay, 0ms);
}

.ai-move-layer .ai-flying-tile.is-visible {
  opacity: 1;
}

.ai-move-layer .ai-flying-tile.is-travelling {
  opacity: 1;
  transform: translate3d(var(--ai-flight-dx, 0px), var(--ai-flight-dy, 0px), 0) scale(1);
}

.cell.is-online-arrival-pending > .tile {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ai-move-layer .ai-flying-tile {
    transition-duration: 80ms;
  }
}

.master-move-celebration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.master-move-celebration[hidden] {
  display: none;
}

.joker-picker {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: rgba(8, 15, 13, 0.34);
  backdrop-filter: blur(2px);
}

.joker-picker[hidden] {
  display: none;
}

.confirm-modal {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  background: rgba(8, 15, 13, 0.38);
  backdrop-filter: blur(2px);
}

.confirm-modal[hidden] {
  display: none;
}

.resume-modal,
.setup-modal {
  position: fixed;
  inset: 0;
  min-height: 100dvh;
  padding: clamp(14px, 3vw, 24px);
  overflow: auto;
}

.resume-modal {
  z-index: 31;
}

.setup-modal {
  z-index: 32;
}

.resume-modal-card {
  width: min(92%, 440px);
}

.setup-modal-card {
  width: min(94vw, 1120px);
  min-height: min(84vh, 920px);
  max-height: min(90vh, 940px);
  overflow: hidden;
  padding: 26px 26px 24px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.setup-modal-header {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.interactive-guide-button {
  margin-top: 0;
  border-color: rgba(229, 196, 132, 0.3);
  background:
    linear-gradient(180deg, rgba(229, 196, 132, 0.16), rgba(255, 255, 255, 0.04)),
    rgba(17, 31, 26, 0.9);
}

.interactive-guide-button:hover {
  border-color: rgba(229, 196, 132, 0.52);
}

.setup-modal-card {
  position: relative;
}

.setup-modal-back {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(238, 203, 141, 0.46);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 247, 224, 0.98), rgba(225, 194, 142, 0.92)),
    rgba(238, 203, 141, 0.92);
  color: #2b2015;
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 10px 20px rgba(0, 0, 0, 0.26);
  cursor: pointer;
  transition:
    transform 140ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease;
}

.setup-modal-back:hover,
.setup-modal-back:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 226, 166, 0.72);
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 12px 24px rgba(0, 0, 0, 0.3),
    0 0 0 3px rgba(238, 203, 141, 0.18);
}

.setup-modal-header {
  padding-right: 96px;
}

.setup-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.9fr);
  align-items: stretch;
}

.setup-section {
  display: grid;
  gap: 14px;
  padding: 16px 16px 14px;
  border-radius: 18px;
  border: 1px solid rgba(212, 184, 141, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(13, 20, 18, 0.42);
}

.setup-section--avatars {
  min-height: 0;
}

.setup-section--details {
  align-content: start;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 10px;
  scrollbar-color: rgba(215, 168, 96, 0.82) rgba(7, 22, 17, 0.42);
  scrollbar-width: thin;
}

.setup-section--details::-webkit-scrollbar {
  width: 8px;
}

.setup-section--details::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(7, 22, 17, 0.42);
}

.setup-section--details::-webkit-scrollbar-thumb {
  border: 2px solid rgba(7, 22, 17, 0.42);
  border-radius: 999px;
  background: rgba(215, 168, 96, 0.82);
}

.setup-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.setup-field-grid--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.setup-player-roster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.setup-player-roster[hidden] {
  display: none;
}

.setup-player-chip {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(212, 184, 141, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(11, 18, 16, 0.48);
  color: #f7ead0;
  text-align: left;
  transition:
    transform 120ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.setup-player-chip.is-active {
  border-color: rgba(239, 203, 136, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 225, 0.12),
    0 10px 18px rgba(0, 0, 0, 0.16);
}

.setup-player-chip-thumb {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  object-position: 50% 10%;
  border: 1px solid rgba(255, 247, 232, 0.1);
  background: rgba(15, 23, 19, 0.82);
}

.setup-player-chip-copy {
  display: grid;
  gap: 3px;
}

.setup-player-chip-copy strong {
  color: #fff2d9;
  font-size: 0.92rem;
}

.setup-player-chip-copy span {
  color: rgba(240, 225, 198, 0.78);
  font-size: 0.77rem;
}

.setup-player-chip-copy .country-inline-meta {
  display: inline-flex;
  gap: 6px;
}

.setup-player-chip-copy .country-flag-mini {
  width: 20px;
  height: 15px;
}

.setup-field {
  display: grid;
  gap: 8px;
  min-width: 0;
  align-content: start;
}

#setupInvalidPenaltyField {
  grid-column: 1 / -1;
}

.setup-field span {
  color: rgba(243, 230, 205, 0.82);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-weight: 700;
}

.setup-field .country-picker-button__text,
.setup-field .country-picker-option span {
  color: #fff4dc;
  font-size: 0.94rem;
  letter-spacing: 0;
  line-height: 1.22;
  text-transform: none;
}

.setup-field .country-picker-button__text {
  font-size: 0.96rem;
  line-height: 1.15;
}

.setup-field input,
.setup-field select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(201, 171, 124, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 252, 244, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(12, 20, 17, 0.78);
  color: #f7e9cf;
  padding: 0 12px;
  font: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 246, 225, 0.06);
}

.setup-field input::placeholder {
  color: rgba(232, 216, 193, 0.48);
}

.setup-avatar-grid-wrap {
  min-height: 0;
  overflow: auto;
  padding-right: 6px;
}

.avatar-search-field {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
  color: rgba(248, 232, 202, 0.86);
}

.avatar-search-field[hidden] {
  display: none !important;
}

.avatar-search-field > span {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(231, 202, 154, 0.72);
}

.avatar-search-field input {
  width: 100%;
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(201, 171, 124, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 252, 244, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(9, 17, 15, 0.78);
  color: #f8ead1;
  padding: 0 12px;
  font: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 246, 225, 0.06);
}

.avatar-search-field input::placeholder {
  color: rgba(232, 216, 193, 0.48);
}

.avatar-search-field input:focus {
  outline: none;
  border-color: rgba(239, 203, 136, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 225, 0.08),
    0 0 0 3px rgba(239, 203, 136, 0.14);
}

.avatar-search-field--setup {
  margin-bottom: 8px;
}

.avatar-filter-empty strong,
.avatar-filter-empty span {
  display: block;
}

.avatar-filter-empty strong {
  color: #fff2d8;
  font-size: 0.92em;
}

.avatar-filter-empty span {
  margin-top: 4px;
  color: rgba(232, 216, 193, 0.68);
  font-size: 0.82em;
}

.setup-avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.setup-avatar-option {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(212, 184, 141, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(11, 18, 16, 0.5);
  color: #f7ead0;
  text-align: left;
  transition:
    transform 120ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.setup-avatar-option:hover {
  transform: translateY(-1px);
  border-color: rgba(223, 193, 147, 0.28);
}

.setup-avatar-option.is-selected {
  border-color: rgba(239, 203, 136, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 225, 0.1),
    0 10px 18px rgba(0, 0, 0, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 240, 205, 0.12), rgba(255, 255, 255, 0.03)),
    rgba(17, 28, 23, 0.58);
}

.setup-avatar-option.is-disabled {
  opacity: 0.38;
  filter: saturate(0.58);
  cursor: not-allowed;
}

.setup-avatar-option.is-disabled:hover {
  transform: none;
  border-color: rgba(212, 184, 141, 0.18);
}

.setup-avatar-option.is-avatar-locked {
  position: relative;
  border-color: rgba(222, 190, 126, 0.26);
  background:
    linear-gradient(180deg, rgba(43, 75, 61, 0.18), rgba(255, 255, 255, 0.02)),
    rgba(11, 18, 16, 0.54);
}

.setup-avatar-option.is-avatar-locked::before {
  content: "";
  position: absolute;
  inset: 8px 8px auto;
  aspect-ratio: 1 / 1;
  z-index: 1;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(6, 16, 13, 0.18), rgba(236, 200, 129, 0.12)),
    radial-gradient(circle at 50% 18%, rgba(255, 238, 191, 0.13), transparent 42%);
  box-shadow: inset 0 0 0 1px rgba(239, 205, 137, 0.14);
  pointer-events: none;
}

.setup-avatar-option.is-avatar-locked .setup-avatar-thumb {
  filter: saturate(0.74) contrast(0.92) brightness(0.86) blur(0.35px);
}

.setup-avatar-option.is-avatar-locked .setup-avatar-thumb::after {
  content: none;
}

.avatar-unlock-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(235, 203, 139, 0.42);
  border-radius: 999px;
  background: rgba(18, 52, 40, 0.86);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
  color: #f2d186;
  font-size: 0.74rem;
  line-height: 1;
}

.avatar-unlock-progress {
  display: grid;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin-top: 2px;
  padding: 4px 7px;
  border: 1px solid rgba(215, 168, 96, 0.18);
  border-radius: 999px;
  background: rgba(16, 46, 36, 0.68);
  color: rgba(255, 236, 192, 0.94);
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.avatar-unlock-progress__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.avatar-unlock-progress__bar {
  display: block;
  width: 100%;
  min-width: 42px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
}

.avatar-unlock-progress__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d1a854, #f0d08a);
}

#avatarLockedModal.avatar-locked-modal {
  z-index: 18000;
}

.avatar-locked-card {
  max-width: min(520px, calc(100vw - 28px));
}

@media (min-width: 760px) {
  #onlineSearchModal #onlineSearchModalCard:has(#onlineLobbyIdentity:not([hidden])) {
    width: min(95vw, 940px);
  }
}

#onlineLobbyIdentity .local-profile-avatar-picker__current {
  cursor: pointer;
}

#onlineLobbyIdentity .local-profile-avatar-picker__current:hover,
#onlineLobbyIdentity .local-profile-avatar-picker__current:focus-visible {
  border-color: rgba(247, 216, 145, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.12), rgba(255, 246, 213, 0.04)),
    rgba(10, 28, 22, 0.92);
  outline: none;
}

.avatar-locked-hero {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  align-items: center;
  margin: 12px 0 18px;
}

.avatar-locked-hero img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 1px solid rgba(236, 202, 137, 0.38);
  border-radius: 24px;
  background: rgba(7, 20, 16, 0.76);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 248, 226, 0.08);
}

.avatar-locked-scope {
  width: fit-content;
  margin: 8px 0 0;
  padding: 5px 10px;
  border: 1px solid rgba(232, 197, 126, 0.3);
  border-radius: 999px;
  background: rgba(17, 49, 38, 0.72);
  color: #f1d18a;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.avatar-locked-condition {
  margin: 0 0 14px;
  color: rgba(255, 247, 226, 0.94);
  font-size: 1rem;
  line-height: 1.55;
}

.avatar-locked-progress {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(225, 188, 113, 0.18);
  border-radius: 14px;
  background: rgba(6, 22, 17, 0.5);
}

.avatar-locked-progress p,
.avatar-locked-note {
  margin: 0;
  color: rgba(255, 240, 207, 0.82);
  line-height: 1.5;
}

.avatar-locked-progress__bar {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.avatar-locked-progress__bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #d4a64c, #f1d184);
}

.avatar-locked-note {
  margin-top: 14px;
  font-size: 0.94rem;
}

.setup-avatar-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(255, 247, 232, 0.08);
  background: rgba(15, 23, 19, 0.82);
}

.setup-avatar-copy {
  display: grid;
  gap: 3px;
}

.setup-avatar-name {
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-weight: 800;
  color: #fff2d9;
  font-size: 0.98rem;
}

.setup-avatar-meta {
  display: none;
}

.setup-summary {
  margin: 0;
  line-height: 1.55;
}

.setup-modal-actions {
  margin-top: auto;
}

.setup-opponent-preview[hidden] {
  display: none;
}

.setup-opponent-preview {
  display: grid;
  gap: 10px;
  align-content: start;
  overflow: visible;
  padding: 12px;
  padding-bottom: 14px;
  border: 1px solid rgba(215, 168, 96, 0.18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 16% 0%, rgba(215, 168, 96, 0.13), transparent 42%),
    rgba(7, 22, 17, 0.56);
}

.setup-opponent-preview__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.setup-opponent-preview__head h3 {
  margin: 0;
  color: #fff2d9;
  font-size: 0.98rem;
  line-height: 1.15;
}

.setup-opponent-preview__head span,
.setup-opponent-preview__status {
  color: rgba(243, 230, 205, 0.68);
  font-size: 0.76rem;
  font-weight: 800;
}

.setup-opponent-preview__list {
  display: grid;
  gap: 8px;
}

.setup-opponent-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(212, 184, 141, 0.16);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(11, 18, 16, 0.48);
}

.setup-opponent-card img {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(255, 247, 232, 0.1);
  background: rgba(15, 23, 19, 0.82);
  object-fit: cover;
  object-position: center top;
}

.setup-opponent-card div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.setup-opponent-card strong {
  overflow: hidden;
  color: #fff2d9;
  font-size: 0.92rem;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-opponent-card span {
  width: fit-content;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(215, 168, 96, 0.12);
  color: #ffe4a8;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}

.setup-opponent-card p {
  margin: 0;
  color: rgba(247, 234, 208, 0.78);
  font-size: 0.78rem;
  line-height: 1.28;
}

.setup-opponent-preview__status {
  margin: 0;
}

.setup-field[hidden],
.setup-player-roster[hidden] {
  display: none;
}

.turn-transition-modal {
  position: fixed;
  inset: 0;
  min-height: 100dvh;
  padding: clamp(14px, 3vw, 24px);
  overflow: auto;
  z-index: 34;
}

.turn-transition-card {
  margin: auto;
  width: min(92vw, 430px);
  text-align: center;
  gap: 12px;
  justify-items: center;
}

.game-timer.is-warning {
  border-color: rgba(229, 199, 118, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 218, 0.14),
    0 0 0 1px rgba(224, 191, 118, 0.14),
    0 10px 20px rgba(0, 0, 0, 0.22);
}

.game-timer.match-timer.is-timed,
.game-timer.match-timer.is-warning {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.turn-transition-card .confirm-modal-actions {
  width: 100%;
  justify-content: center;
}

.turn-transition-card button {
  min-width: 210px;
}


.secondary-panel-action {
  margin-top: 14px;
  min-height: 38px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(201, 171, 124, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 252, 244, 0.12), rgba(255, 255, 255, 0.03)),
    rgba(17, 27, 23, 0.84);
  color: #f5e8d1;
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 225, 0.08),
    0 6px 12px rgba(0, 0, 0, 0.16);
}

.secondary-panel-action:hover {
  transform: translateY(-1px);
}

.guide-pdf-download-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

.guide-pdf-download-link:hover {
  color: #fff2dc;
}

.history-export-action {
  margin-top: 10px;
  min-height: 34px;
}

.joker-picker-card {
  width: min(92%, 420px);
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(221, 194, 150, 0.26);
  background:
    linear-gradient(180deg, rgba(249, 238, 219, 0.12), rgba(255, 255, 255, 0.03)),
    linear-gradient(180deg, rgba(22, 34, 29, 0.98), rgba(12, 20, 17, 0.98));
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 246, 225, 0.08);
}

.confirm-modal-card {
  width: min(92%, 380px);
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(221, 194, 150, 0.26);
  background:
    linear-gradient(180deg, rgba(249, 238, 219, 0.12), rgba(255, 255, 255, 0.03)),
    linear-gradient(180deg, rgba(22, 34, 29, 0.98), rgba(12, 20, 17, 0.98));
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 246, 225, 0.08);
}

.confirm-modal-card.setup-modal-card {
  width: min(94vw, 1120px);
  min-height: min(84vh, 920px);
  max-height: min(90vh, 940px);
  overflow: hidden;
  padding: 26px 26px 24px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.legacy-profile-choice-modal {
  position: fixed;
  inset: 0;
  z-index: 20010;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: clamp(14px, 4vw, 28px);
  overflow: auto;
  background: rgba(8, 15, 13, 0.52);
  backdrop-filter: blur(2px);
}

.legacy-profile-choice-card {
  width: min(92vw, 520px);
  max-height: calc(100dvh - clamp(28px, 8vw, 56px));
  overflow-y: auto;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid rgba(221, 194, 150, 0.3);
  background:
    linear-gradient(180deg, rgba(249, 238, 219, 0.12), rgba(255, 255, 255, 0.03)),
    linear-gradient(180deg, rgba(22, 34, 29, 0.98), rgba(12, 20, 17, 0.98));
  box-shadow:
    0 22px 42px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 246, 225, 0.08);
}

.legacy-profile-choice-card h2 {
  margin: 0 0 12px;
  color: #f8edda;
  font-size: clamp(1.35rem, 4vw, 1.8rem);
  line-height: 1.12;
}

.legacy-profile-choice-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(201, 171, 124, 0.22);
  background: rgba(8, 24, 18, 0.52);
}

.legacy-profile-choice-summary img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(245, 216, 144, 0.48);
}

.legacy-profile-choice-summary strong,
.legacy-profile-choice-summary span {
  display: block;
}

.legacy-profile-choice-summary strong {
  color: #fff5df;
  font-size: 1.04rem;
}

.legacy-profile-choice-summary span {
  margin-top: 2px;
  color: rgba(245, 232, 209, 0.78);
  font-size: 0.92rem;
}

.legacy-profile-choice-text {
  margin: 0 0 12px;
  color: rgba(245, 232, 209, 0.86);
  font-size: 0.98rem;
  line-height: 1.48;
}

.legacy-profile-choice-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.legacy-profile-choice-actions .btn {
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(201, 171, 124, 0.34);
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-weight: 800;
  cursor: pointer;
}

.legacy-profile-choice-actions .btn-primary {
  background: linear-gradient(180deg, #f6d890, #d2a84e);
  color: #2a1f14;
}

.legacy-profile-choice-actions .btn-ghost {
  background: rgba(8, 24, 18, 0.72);
  color: #f4e4c9;
}

.joker-picker-card h3 {
  margin: 0 0 6px;
  color: #f8edda;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.confirm-modal-card h3 {
  margin: 0 0 8px;
  color: #f8edda;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.joker-picker-card .subtle {
  color: rgba(232, 216, 193, 0.78);
  font-size: 0.92rem;
}

.confirm-modal-card .subtle {
  color: rgba(232, 216, 193, 0.82);
  font-size: 0.94rem;
  line-height: 1.4;
}

.joker-choices {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.joker-choice,
.joker-picker-actions button {
  border-radius: 12px;
  border: 1px solid rgba(201, 171, 124, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 252, 244, 0.96), rgba(238, 224, 197, 0.94)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent);
  color: #2e2217;
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 6px 12px rgba(0, 0, 0, 0.16);
}

.joker-choice {
  min-height: 40px;
  font-size: 1rem;
}

.joker-choice:hover,
.joker-picker-actions button:hover {
  transform: translateY(-1px);
}

.joker-picker-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.joker-picker-actions button {
  min-height: 36px;
  padding: 0 14px;
  font-size: 0.88rem;
}

.confirm-modal-actions button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(201, 171, 124, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 252, 244, 0.96), rgba(238, 224, 197, 0.94)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent);
  color: #2e2217;
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 6px 12px rgba(0, 0, 0, 0.16);
}

#confirmOkBtn {
  background:
    linear-gradient(180deg, rgba(121, 213, 139, 0.9), rgba(48, 94, 58, 0.98)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent);
  color: #f4fff4;
  border-color: rgba(117, 214, 138, 0.3);
}

.confirm-modal.exchange-modal {
  position: fixed;
  inset: 0;
  z-index: 66;
  padding: clamp(16px, 4vw, 28px);
  background: rgba(4, 12, 9, 0.62);
  backdrop-filter: blur(4px);
}

.exchange-modal-card {
  width: min(94vw, 520px);
}

.exchange-tile-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
  gap: 10px;
  margin: 16px 0 10px;
}

.exchange-tile-option {
  min-height: 62px;
  padding: 8px 6px;
  border-radius: 14px;
  border: 1px solid rgba(215, 168, 96, 0.24);
  background:
    linear-gradient(180deg, rgba(34, 57, 47, 0.92), rgba(12, 24, 19, 0.96));
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 225, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.16);
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    filter 140ms ease;
}

.exchange-tile-option:hover {
  transform: translateY(-1px);
  border-color: rgba(236, 203, 132, 0.48);
  filter: brightness(1.05);
}

.exchange-tile-option.is-selected {
  border-color: rgba(255, 218, 132, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 225, 0.16),
    0 0 0 2px rgba(255, 218, 132, 0.22),
    0 12px 22px rgba(0, 0, 0, 0.24);
}

.exchange-tile-face {
  width: 46px;
  max-width: 100%;
  display: block;
  pointer-events: none;
  cursor: pointer;
}

.exchange-tile-face.tile-joker .tile-art {
  opacity: 1;
  mix-blend-mode: normal;
  filter: drop-shadow(0 2px 3px rgba(32, 23, 9, 0.24));
}

.exchange-modal-status {
  min-height: 1.4em;
  margin: 0;
}

.exchange-modal-status.is-warning {
  color: #ffd083;
}

.exchange-modal-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.exchange-modal-tools button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 11px;
  border: 1px solid rgba(215, 168, 96, 0.28);
  background:
    linear-gradient(180deg, rgba(37, 61, 51, 0.94), rgba(15, 29, 24, 0.98));
  color: #f4ead4;
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 225, 0.08),
    0 6px 12px rgba(0, 0, 0, 0.14);
}

.exchange-modal-tools button:hover {
  transform: translateY(-1px);
  border-color: rgba(236, 203, 132, 0.48);
}

.exchange-confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.online-mode-modal {
  position: fixed;
  inset: 0;
  /* ONLINE-0C-MULTI4-E — doit rester au-dessus de .cookie-consent-banner
     (z-index: 16000, position: fixed, pointer-events: auto une fois
     visible) : sur mobile/tablette, avec 3-4 cartes de sieges, ce dialogue
     modal (role="dialog" aria-modal="true") peut approcher le bas du
     viewport et se faire recouvrir par le bandeau cookies, rendant
     Continuer/Quitter inaccessibles pour un premier visiteur — repere
     via capture d'ecran reelle (390x844/412x915, salle a 4 joueurs).
     Reste sous .platform-nav-toast (20000, notification transitoire). */
  z-index: 16500;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 28px);
  background: rgba(4, 12, 9, 0.62);
  backdrop-filter: blur(5px);
}

.online-mode-modal[hidden] {
  display: none;
}

.online-mode-modal__card {
  position: relative;
  width: min(92vw, 560px);
  transition: width 0.15s ease;
  max-height: min(86vh, 720px);
  overflow: auto;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid rgba(215, 168, 96, 0.34);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(215, 168, 96, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(31, 50, 41, 0.98), rgba(10, 24, 19, 0.98));
  color: rgba(247, 241, 227, 0.92);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 243, 221, 0.08);
}

/* ONLINE-0C-MULTI4-E — l'ecran "salle" (cartes joueurs) a besoin de plus de
   largeur qu'un simple choix creer/rejoindre pour que 3 ou 4 cartes
   respirent (grille 2x2, ligne de 3) sans jamais toucher au gabarit des
   deux autres ecrans du meme modal. */
.online-mode-modal__card--room {
  width: min(94vw, 720px);
  max-height: min(90vh, 780px);
}

@media (min-width: 760px) {
  .online-mode-modal__card--identity {
    width: min(95vw, 940px);
  }
}

/* ONLINE-0C-MULTI4-E.4-C — "Le duel" (2 joueurs) est une composition plus
   resserree/frontale que "La tablee" (3/4 joueurs) : legerement moins
   large, sans jamais toucher au gabarit des deux autres ecrans du meme
   modal (choix/rejoindre), inchange. */
.online-mode-modal__card--room:has(.online-lobby-seats--n2) {
  width: min(92vw, 588px);
}

.online-mode-modal__card--room:has(.online-lobby-seats--n5),
.online-mode-modal__card--room:has(.online-lobby-seats--n6) {
  width: min(96vw, 820px);
}

.online-mode-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(215, 168, 96, 0.26);
  border-radius: 10px;
  background: rgba(9, 22, 17, 0.72);
  color: rgba(247, 241, 227, 0.9);
  font-size: 1.25rem;
  line-height: 1;
}

.online-mode-modal__close:hover,
.online-mode-modal__close:focus-visible {
  border-color: rgba(215, 168, 96, 0.54);
  background: rgba(25, 48, 39, 0.9);
  color: #fff7e8;
  outline: none;
}

.online-mode-modal__eyebrow {
  margin: 0 0 8px;
  color: rgba(215, 168, 96, 0.9);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.online-lobby-room__eyebrow {
  text-align: center;
  /* ONLINE-2C.2-B (polish typographique) — cet eyebrow heritait de
     .online-mode-modal__eyebrow (font-weight:900, aucune font-family
     dediee -> "Palatino Linotype..." de .online-mode-modal__card). Override
     cible sur cet UNIQUE eyebrow (jamais la regle partagee, qui couvre
     aussi l'eyebrow "Mode en ligne" des 3 autres etats, deja masque en
     'room' par ailleurs) : Cormorant Garamond, graisse allegee (900 etait
     trop lourd pour cette famille), tracking legerement resserre pour un
     rendu plus fin/aerien tout en restant lisible en petite taille/majuscules. */
  font-family: var(--font-online-heading);
  font-weight: 600;
  letter-spacing: 0.13em;
}

/* ONLINE-2C.2-B (correctif visuel) — l'etat "room" affiche deja son propre
   eyebrow centre "Mode en ligne · Code du salon" (.online-lobby-room__eyebrow
   ci-dessus, imbrique dans #onlineLobbyRoom). L'eyebrow PARTAGE en haut de
   la carte (.online-mode-modal__eyebrow, enfant DIRECT de la carte, commun
   aux 4 etats du modal) devient alors redondant. Masque uniquement quand
   .online-mode-modal__card--room est actif — cette classe n'est basculee
   par showOnlineLobbyState() QUE pour l'etat 'room' (voir app.js) — et
   uniquement l'enfant DIRECT de la carte : le combinateur '>' exclut
   volontairement .online-lobby-room__eyebrow (imbrique plus profondement
   dans #onlineLobbyRoom), qui reste inchange. Les 3 autres etats (choix,
   rejoindre, restoring) ne portent jamais cette classe et conservent donc
   leur eyebrow partage tel quel. */
.online-mode-modal__card--room > .online-mode-modal__eyebrow {
  display: none;
}

/* ONLINE-0C-MULTI4-E.4-C — "Le duel" / "La tablee" : titre de composition,
   determine uniquement par le nombre de sieges deja reflete par
   renderOnlineLobbySeats() (classe online-lobby-seats--n2/n3/n4/n5/n6, posee
   avant E.4-C) — aucun nouveau champ JS, uniquement un choix CSS via
   :has(). Un seul des deux spans est visible a la fois. */
/* ONLINE polish — countdown de preparation (30 s), bande doree premium
   COLLEE au bord superieur interieur de la carte room (ajustement visuel
   demande : plus epaisse, plus presente, plus proche du design de
   reference, priorite au rendu sur l'evitement du bouton X). Largeur
   pilotee en JS (voir renderOnlineLobbyCountdownBar, app.js) a partir du
   MEME temps autoritatif que le texte "debut dans N s" (aucun second
   timer, logique JS totalement inchangee par cet ajustement — seul le
   CSS de positionnement/epaisseur/couleur a bouge). hidden par defaut
   (voir attribut HTML).
   position:absolute relatif a #onlineSearchModalCard (position:relative
   deja existante) plutot qu'un element en flux : permet de coller
   exactement au coin superieur de la CARTE (au-dessus du padding interne
   de #onlineLobbyRoom), independamment du bouton X (lui-meme
   position:absolute, top:12px/height:34px -> zone 12-46px). Epaisseur
   retenue (10px) volontairement juste sous cette zone (0-10px) : bande
   nettement plus presente qu'avant (2,5x l'epaisseur precedente) sans
   recouvrir la zone cliquable du X (jamais teste/valide en cas de
   recouvrement reel d'une zone interactive — choix delibere pour ne
   jamais risquer de rendre le bouton X non cliquable). */
.online-lobby-countdown-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  /* Coins superieurs alignes sur ceux de .online-mode-modal__card (18px ;
     16px sous 640px, voir media query dediee plus bas dans ce fichier). */
  border-radius: 18px 18px 0 0;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.online-lobby-countdown-bar[hidden] {
  display: none;
}

.online-lobby-countdown-bar__fill {
  height: 100%;
  width: 100%;
  /* Meme famille de dore que le reste de l'UI premium ONLINE (accent
     #d7a860 / #f4dba5 deja utilises par l'eyebrow, les bordures, le code
     de salle, etc.) — quasi opaque pour un rendu plus "assume" que
     l'ancien degrade partiellement transparent. */
  background: linear-gradient(90deg, #d7a860, #f4dba5);
  transition: width 1s linear;
}

@media (max-width: 640px) {
  .online-lobby-countdown-bar {
    border-radius: 16px 16px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .online-lobby-countdown-bar__fill {
    transition: none;
  }
}

.online-lobby-room-kind {
  margin: 0;
  text-align: center;
  font-family: var(--font-online-heading);
  font-size: clamp(1.05rem, 2.3vw, 1.38rem);
  font-weight: 600;
  letter-spacing: 0;
  color: #f4dba5;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}

.online-lobby-rules-btn {
  border: 1px solid rgba(215, 168, 96, 0.28);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(247, 241, 227, 0.1), rgba(247, 241, 227, 0.02)),
    rgba(14, 33, 27, 0.86);
  color: #f5dca7;
  font: 700 0.78rem/1 var(--font-online-body);
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.08);
}

.online-lobby-rules-btn:hover,
.online-lobby-rules-btn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(247, 216, 145, 0.64);
  color: #fff1c8;
  outline: none;
}

.online-mode-modal h3 {
  margin: 0 36px 10px 0;
  color: #fff2dc;
  font-size: clamp(1.35rem, 2vw, 1.72rem);
  line-height: 1.16;
}

/* ONLINE-0C-MULTI4-E.4-C — le libelle d'etat (JS : "Code de la salle" en
   WAITING / "Les joueurs sont prets" en ACTIVE, logique E.4-B inchangee)
   reste toujours present pour le sens/l'accessibilite, mais sa mise en
   avant differe : discret pour "La tablee" (le titre de composition et les
   sieges portent deja la hierarchie visuelle), grand et centre pour
   "Le duel" (compose exactement comme les maquettes, ou ce libelle EST le
   titre principal de l'ecran). */
.online-lobby-room__title {
  margin: 2px 0 0;
  text-align: center;
  font-family: var(--font-online-body);
  color: rgba(230, 218, 190, 0.68);
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

#onlineLobbyRoom:has(.online-lobby-seats--n2) .online-lobby-room__title {
  margin: 6px 0 2px;
  font-family: var(--font-online-heading);
  color: #fff2dc;
  font-size: clamp(1.4rem, 3.2vw, 1.9rem);
  font-weight: 600;
}

.online-mode-modal p {
  margin: 0;
  color: rgba(247, 241, 227, 0.88);
  font-size: 1rem;
  line-height: 1.55;
}

#onlineSignupText {
  font-size: 1rem;
  line-height: 1.58;
}

.online-mode-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.online-mode-benefits li {
  position: relative;
  padding: 9px 10px 9px 28px;
  border: 1px solid rgba(215, 168, 96, 0.16);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 244, 216, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(12, 31, 24, 0.76);
  color: rgba(247, 241, 227, 0.9);
}

.online-mode-benefits li::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d7a860;
  box-shadow: 0 0 12px rgba(215, 168, 96, 0.34);
}

/* ONLINE-2B.4 — bénéfices titre + description (2 lignes par carte). */
.online-mode-benefits li b {
  display: block;
  color: #f0e6cf;
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.25;
}

.online-mode-benefits li span {
  display: block;
  margin-top: 3px;
  color: rgba(240, 240, 224, 0.72);
  /* ONLINE-2B.4 — confort de lecture desktop/tablette : description agrandie
     de 0.76rem à 0.84rem (titres li b non touchés, restent à 0.86rem/850).
     Masquée en mobile portrait / paysage compact (cf. media queries). */
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.38;
}

/* ONLINE-2B.4 — introduction Signup premium (contexte + bénéfices + réassurance),
   visible UNIQUEMENT en mode=signup / step=email. Sélecteurs portés
   ".online-mode-modal .xxx" pour passer devant ".online-mode-modal p { margin:0 }". */
.player-account-intro {
  display: none;
  margin: 16px 0 0;
}

.online-mode-modal[data-account-mode="signup"][data-account-step="email"] .player-account-intro {
  display: block;
}

.online-mode-modal .player-account-intro__context {
  margin: 0 0 12px;
  color: rgba(215, 168, 96, 0.85);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.player-account-intro__context strong {
  color: #f0e6cf;
  font-weight: 850;
}

.online-mode-modal .player-account-intro__trust {
  margin: 12px 0 0;
  color: rgba(240, 240, 224, 0.62);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.42;
}

.online-mode-modal__notice {
  margin-top: 14px;
  padding: 9px 11px;
  border: 1px solid rgba(215, 168, 96, 0.22);
  border-radius: 12px;
  background: rgba(215, 168, 96, 0.08);
  color: #efd39b;
  font-weight: 850;
}

.online-mode-modal__notice[data-state="error"] {
  border-color: rgba(255, 151, 125, 0.34);
  background: rgba(137, 42, 30, 0.24);
  color: #ffd4c8;
}

.online-mode-modal__notice[data-state="success"] {
  border-color: rgba(166, 209, 142, 0.36);
  background: rgba(62, 112, 61, 0.22);
  color: #dff1cf;
}

.online-mode-modal__notice[hidden] {
  display: none;
}

.player-account-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.player-account-step {
  display: grid;
  gap: 12px;
}

.player-account-step[hidden] {
  display: none;
}

.player-account-field {
  display: grid;
  gap: 7px;
  color: rgba(247, 241, 227, 0.9);
  font-size: 0.96rem;
  font-weight: 850;
}

.player-account-field input,
.player-account-field select {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(215, 168, 96, 0.28);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(6, 20, 16, 0.82);
  color: #fff7e8;
  font: inherit;
  font-weight: 700;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 243, 221, 0.06);
}

.player-account-field input::placeholder {
  color: rgba(247, 241, 227, 0.45);
}

#playerAccountEmailInput {
  font-size: 1.03rem;
}

#playerAccountEmailInput::placeholder {
  font-size: 1em;
}

.player-account-field input:focus-visible,
.player-account-field select:focus-visible {
  border-color: rgba(247, 216, 145, 0.78);
  box-shadow:
    0 0 0 3px rgba(215, 168, 96, 0.18),
    inset 0 1px 0 rgba(255, 243, 221, 0.08);
}

.player-account-field select {
  cursor: pointer;
}

/* ONLINE-2B.4 — étape profil : petit texte d'aide discret sous chaque champ
   (pseudo/pays). Additif : ne modifie ni l'ID, ni la validation, ni le
   préremplissage des champs existants. */
.player-account-field__hint {
  display: block;
  color: rgba(240, 240, 224, 0.6);
  /* ONLINE-2B.4 — confort de lecture desktop/tablette : 0.74rem -> 0.9rem
     (masqué sur mobile/paysage bas, cf. media queries plus bas — inchangé). */
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
}

/* ONLINE-2B.4 — aperçu avatar neutre de l'étape profil : purement visuel
   (aucune sélection, aucune galerie). Le backend continue de recevoir
   avatarId: null, inchangé par handlePlayerAccountProfileSubmit(). */
.player-account-profile-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(215, 168, 96, 0.2);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 244, 216, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(12, 31, 24, 0.6);
}

.player-account-profile-preview__button {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.player-account-profile-preview__button:focus-visible {
  outline: 3px solid rgba(247, 216, 145, 0.64);
  outline-offset: 4px;
}

.player-account-profile-preview__button:hover .player-account-profile-preview__avatar,
.player-account-profile-preview__button:focus-visible .player-account-profile-preview__avatar {
  border-color: rgba(247, 216, 145, 0.82);
  box-shadow:
    0 0 0 4px rgba(215, 168, 96, 0.16),
    0 0 18px rgba(215, 168, 96, 0.2);
}

.player-account-profile-preview__avatar {
  width: 60px;
  height: 60px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(215, 168, 96, 0.4);
  box-shadow: 0 0 0 4px rgba(215, 168, 96, 0.1);
  background: rgba(9, 22, 17, 0.6);
  object-fit: cover;
}

.player-account-profile-preview__copy strong {
  display: block;
  margin-bottom: 2px;
  color: #f0e6cf;
  font-size: 0.92rem;
  font-weight: 850;
}

.online-mode-modal .player-account-profile-preview__copy p {
  margin: 0;
  color: rgba(240, 240, 224, 0.72);
  /* ONLINE-2B.4 — confort de lecture desktop/tablette : 0.8rem -> 0.9rem
     ("Votre avatar" en strong ci-dessus reste inchangé à 0.92rem). */
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
}

#playerAccountProfileAvatarGrid {
  max-height: min(52vh, 430px);
  overflow: auto;
}

.local-profile-card #localProfileTitle {
  font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
  line-height: 1 !important;
}

.local-profile-card .local-profile-heading {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.local-profile-card .local-profile-heading #localProfileTitle {
  width: 100%;
}

.local-profile-card .local-profile-country,
.local-profile-card .local-profile-level-line,
.local-profile-card .local-profile-warm-note {
  margin: 0 !important;
}

.local-profile-card .local-profile-level-line {
  gap: 8px !important;
}

.local-profile-card .local-profile-warm-note {
  max-width: min(34ch, 100%) !important;
}

@media (max-width: 640px) {
  .local-profile-card #localProfileTitle {
    font-size: clamp(1.45rem, 8vw, 2rem) !important;
    line-height: 1.05 !important;
  }
}

/* ONLINE-2B.4 — confidentialité de l'email : information secondaire, texte
   seul (aucun encart d'alerte, aucune icône — aucun asset cadenas existant). */
.online-mode-modal .player-account-profile-privacy {
  margin: 2px 0 0;
  color: rgba(240, 240, 224, 0.62);
  /* ONLINE-2B.4 — confort de lecture desktop/tablette : 0.78rem -> 0.9rem. */
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.45;
}

/* ONLINE-2B.4 — étape profil sur petite hauteur/largeur : le step
   #playerAccountProfileStep peut dépasser la carte (footer sticky) une fois
   l'aperçu avatar + les textes d'aide ajoutés. On resserre / masque le
   contenu SECONDAIRE (jamais le pseudo, le pays ou la note de confidentialité)
   pour garder Pseudo/Pays au plus près du haut. Scopé à #playerAccountProfileStep
   pour ne jamais toucher email/otp. */
@media (max-width: 640px) {
  #playerAccountProfileStep {
    gap: 8px;
  }

  .player-account-profile-preview {
    padding: 8px 10px;
    gap: 10px;
  }

  .player-account-profile-preview__avatar {
    width: 52px;
    height: 52px;
  }

  /* Textes d'aide pseudo/pays : explicitement optionnels ("si cela ne
     surcharge pas la modale") — masqués dès que la largeur est réduite. */
  .player-account-field__hint {
    display: none;
  }
}

@media (max-width: 340px) {
  .player-account-profile-preview {
    padding: 6px 8px;
    gap: 8px;
  }

  .player-account-profile-preview__avatar {
    width: 40px;
    height: 40px;
  }

  /* Une ligne "côte à côte" reste plus compacte en hauteur qu'un empilement
     avatar/texte : on garde le rendu en ligne et on masque la description
     (le titre "Votre avatar" suffit à cette largeur). */
  .online-mode-modal .player-account-profile-preview__copy p {
    display: none;
  }

  /* À cette largeur, Pseudo + Pays ne tiennent plus au-dessus du footer
     sticky si le sous-titre reste affiché (mesuré). Le titre "Votre profil
     joueur" suffit à situer l'étape ; le sous-titre redevient visible dès
     que la largeur/hauteur le permet à nouveau (email/otp non concernés :
     #onlineSignupText est un champ partagé, ce masquage ne cible QUE
     step=profile). */
  .online-mode-modal[data-account-step="profile"] #onlineSignupText {
    display: none;
  }
}

/* ONLINE-2B.4 — paysage téléphone bas (ex. 667×375, 896×414) : même logique
   que le bucket largeur ci-dessus mais déclenchée par la hauteur, car un
   téléphone tourné dépasse souvent 640px de large. */
@media (max-height: 480px) {
  #playerAccountProfileStep {
    gap: 2px;
  }

  .online-mode-modal[data-account-step="profile"] .player-account-form {
    margin-top: 4px;
  }

  .online-mode-modal[data-account-step="profile"] .online-mode-modal__eyebrow {
    margin-bottom: 0;
  }

  .online-mode-modal[data-account-step="profile"] #onlineSignupTitle {
    margin-bottom: 0;
  }

  #playerAccountProfileStep .player-account-field {
    gap: 2px;
    font-size: 0.82rem;
  }

  /* Compaction ultime réservée à ce cas extrême (paysage téléphone très bas) :
     les champs Pseudo/Pays restent utilisables (40px reste un champ tactile
     correct) mais gagnent quelques px décisifs pour ne plus passer sous le
     footer sticky. */
  #playerAccountProfileStep .player-account-field input,
  #playerAccountProfileStep .player-account-field select {
    min-height: 40px;
  }

  .player-account-profile-preview {
    padding: 2px 8px;
    gap: 6px;
    border-width: 0;
  }

  .player-account-profile-preview__avatar {
    width: 24px;
    height: 24px;
  }

  .online-mode-modal .player-account-profile-preview__copy p {
    display: none;
  }

  .player-account-field__hint {
    display: none;
  }

  .online-mode-modal .player-account-profile-privacy {
    margin-top: 0;
  }

  /* Même raison qu'en @media (max-width: 340px) ci-dessus : sur un paysage
     téléphone très bas, Pseudo + Pays ne tiennent plus au-dessus du footer
     sticky avec le sous-titre affiché. Masquage strictement limité à
     step=profile. */
  .online-mode-modal[data-account-step="profile"] #onlineSignupText {
    display: none;
  }
}

#playerAccountOtpInput {
  max-width: 190px;
  font-size: 1.35rem;
  letter-spacing: 0.18em;
  text-align: center;
}

.player-account-resend {
  justify-self: start;
  border: 0;
  padding: 0;
  background: transparent;
  color: #efd39b;
  font-size: 0.92rem;
  font-weight: 850;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.player-account-resend:disabled {
  opacity: 0.82;
  cursor: default;
}

/* ONLINE-2B.3 — étape OTP : champ code + contrôle de renvoi sur la même ligne
   (le compte à rebours devient nettement visible, aligné avec le rectangle
   OTP). Réutilise le bouton #playerAccountResendBtn existant, aucune logique
   dupliquée. Passe sous le champ si la largeur est trop serrée (mobile). */
.player-account-otp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 16px;
}

.player-account-otp-row .player-account-field {
  flex: 0 0 auto;
}

.player-account-otp-row .player-account-resend {
  flex: 0 0 auto;
  /* remonte le libellé pour l'aligner sur le centre vertical de l'input OTP
     (min-height 46px) plutôt que sur son bord bas. */
  margin-bottom: 13px;
}

@media (max-width: 430px) {
  .player-account-otp-row .player-account-resend {
    margin-bottom: 0;
  }
}

/* ONLINE-2B.3 — info secondaire : cliquer sur « Renvoyer le code » remplace le
   code précédent. Affichée uniquement quand le renvoi est réellement disponible
   (attribut [hidden] piloté par updatePlayerAccountResendButton). Simple texte
   discret, aucun cadre d'alerte, aucune icône. Sélecteur porté pour passer
   devant ".online-mode-modal p { font-size: 1rem }". */
.online-mode-modal .player-account-otp-note {
  margin: 0;
  color: rgba(240, 240, 224, 0.66);
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.45;
}

.online-mode-modal .player-account-otp-note[hidden] {
  display: none;
}

/* ONLINE-2B.3 — plus d'air entre le bloc « Vous ne voyez pas le code ? » et la
   notice verte juste en dessous. Sélecteur porté (0,0,2,0) pour passer devant
   ".online-mode-modal p { margin: 0 }" (0,0,1,1) qui écrasait sinon la marge. */
.online-mode-modal .online-mode-modal__notice {
  margin-top: 24px;
}

/* ONLINE-2B.3 — aide discrète "Vous ne voyez pas le code ?" (étape OTP). */
.player-account-help {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.player-account-help__toggle {
  justify-self: start;
  border: 0;
  padding: 0;
  background: transparent;
  color: rgba(239, 211, 155, 0.86);
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.player-account-help__toggle:hover,
.player-account-help__toggle:focus-visible {
  color: #f7d891;
  outline: none;
}

.player-account-help__panel {
  position: relative;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(166, 176, 110, 0.32);
  border-radius: 12px;
  background: rgba(41, 58, 34, 0.32);
  color: rgba(240, 240, 224, 0.9);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.45;
}

.player-account-help__panel[hidden] {
  display: none;
}

/* ONLINE-2B.3 — croix de fermeture de l'encart d'aide : discrète, cohérente
   avec .online-mode-modal__close, ne ferme que l'aide. */
.player-account-help__close {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(166, 176, 110, 0.32);
  border-radius: 8px;
  background: rgba(9, 22, 17, 0.55);
  color: rgba(240, 240, 224, 0.82);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.player-account-help__close:hover,
.player-account-help__close:focus-visible {
  border-color: rgba(215, 168, 96, 0.5);
  color: #fff7e8;
  outline: none;
}

.player-account-help__panel strong {
  display: block;
  margin-bottom: 6px;
  padding-right: 30px;
  color: #f0e6cf;
  font-size: 0.98rem;
  font-weight: 850;
  line-height: 1.3;
}

.player-account-help__panel p {
  margin: 0;
}

.player-account-help__panel p + p {
  margin-top: 6px;
}

.online-mode-modal__actions {
  position: sticky;
  z-index: 2;
  bottom: calc(-1 * clamp(20px, 3vw, 28px));
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
  margin-right: calc(-1 * clamp(20px, 3vw, 28px));
  margin-bottom: calc(-1 * clamp(20px, 3vw, 28px));
  margin-left: calc(-1 * clamp(20px, 3vw, 28px));
  padding: 14px clamp(20px, 3vw, 28px) clamp(20px, 3vw, 28px);
  border-top: 1px solid rgba(215, 168, 96, 0.18);
  background:
    linear-gradient(180deg, rgba(18, 34, 28, 0.72), rgba(10, 24, 19, 0.98) 42%),
    rgba(10, 24, 19, 0.98);
  backdrop-filter: blur(8px);
}

/* ONLINE-0D-C.7-H.1-E — #endGameNewGameBtn.endgame-online-return-action
   ("Fermer" de l'ecran final ONLINE) ajoute ici comme second selecteur :
   la demande utilisateur est un rendu EXACTEMENT identique (pas seulement
   "de la meme famille"), donc geometrie (min-height/padding/border-radius/
   font-weight) ET transform:hover sont desormais partages avec cette meme
   regle de base, en plus des couleurs deja partagees plus bas. Specificite
   ID+classe (1-1-0 / 1-1-1 au hover) garantit qu'il surclasse
   .endgame-actions button sans toucher aux 2 autres boutons de la rangee
   de fin (ni a .endgame-actions button lui-meme, non modifie). */
.online-mode-modal__actions button,
#endGameNewGameBtn.endgame-online-return-action {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(215, 168, 96, 0.28);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(247, 241, 227, 0.08), rgba(247, 241, 227, 0.02)),
    rgba(13, 34, 27, 0.92);
  color: rgba(247, 241, 227, 0.92);
  font-weight: 850;
  box-shadow: inset 0 1px 0 rgba(247, 241, 227, 0.08);
}

.online-mode-modal__actions button:hover,
.online-mode-modal__actions button:focus-visible,
#endGameNewGameBtn.endgame-online-return-action:hover,
#endGameNewGameBtn.endgame-online-return-action:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(215, 168, 96, 0.5);
  background:
    linear-gradient(180deg, rgba(247, 241, 227, 0.13), rgba(247, 241, 227, 0.03)),
    rgba(21, 49, 39, 0.98);
  outline: none;
}

/* ONLINE-2C.2-B (polish typographique) — "Quitter la salle" heritait de
   .online-mode-modal__card ("Palatino Linotype...", voir plus bas) et du
   font-weight:850 tres lourd de .online-mode-modal__actions button
   ci-dessus. Override CIBLE sur cet UNIQUE bouton (jamais la regle
   partagee .online-mode-modal__actions button, qui couvre aussi Retour/
   Rejoindre/Annuler/Quitter la partie/Continuer — hors perimetre de cette
   demande) : Lora, graisse intermediaire, coherent avec le reste de la
   room. */
#onlineLobbyLeaveBtn {
  font-family: var(--font-online-body);
  font-weight: 600;
}

/* Typographie : #onlineHistoryCloseFooterBtn herite "Palatino Linotype..."
   de .online-mode-modal__card (police des modales ONLINE) ; #endGameNewGameBtn
   vit dans .endgame-card (police Trebuchet MS des ecrans de fin) et ne peut
   pas heriter la meme valeur — seule propriete encore dupliquee ici, avec
   une valeur strictement recopiee (jamais recalculee), car aucune regle
   commune existante ne couvre les deux contextes pour ce seul token.
   align-self:center — .endgame-actions (display:flex, align-items par
   defaut = stretch) etire sinon ce bouton a 40px pour matcher ses 2 voisins
   ("Retour aux pénalités"/"Voir l'historique détaillé", police Trebuchet
   MS plus haute), alors que min-height:38px vise exactement 38px comme
   #onlineHistoryCloseFooterBtn. Propriete posee uniquement sur ce bouton,
   les 2 voisins et .endgame-actions restent inchanges. */
#endGameNewGameBtn.endgame-online-return-action {
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  align-self: center;
}

.online-mode-modal__actions .online-mode-modal__primary,
#endGameNewGameBtn.endgame-online-return-action {
  border-color: rgba(247, 216, 145, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 241, 196, 0.3), rgba(215, 168, 96, 0.06)),
    #d7a860;
  color: #0e1c16;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 248, 217, 0.55);
}

.online-mode-modal__actions .online-mode-modal__primary:hover,
.online-mode-modal__actions .online-mode-modal__primary:focus-visible,
#endGameNewGameBtn.endgame-online-return-action:hover,
#endGameNewGameBtn.endgame-online-return-action:focus-visible {
  border-color: rgba(255, 229, 166, 0.86);
  background:
    linear-gradient(180deg, rgba(255, 248, 217, 0.42), rgba(215, 168, 96, 0.08)),
    #e3b971;
  color: #07150f;
}

/* ONLINE-2B.3 — bouton principal désactivé (ex. étape OTP tant que le code
   n'a pas 6 chiffres) : on retire le doré/glow premium pour revenir au fond
   neutre des boutons secondaires, texte atténué mais lisible. Placée après la
   règle :hover (même spécificité 0,0,3,0) pour la neutraliser aussi au survol.
   cursor:not-allowed vient de la règle globale button:disabled. */
.online-mode-modal__actions .online-mode-modal__primary:disabled,
.online-mode-modal__actions .online-mode-modal__primary:disabled:hover,
.online-mode-modal__actions .online-mode-modal__primary:disabled:focus-visible {
  border-color: rgba(215, 168, 96, 0.24);
  background:
    linear-gradient(180deg, rgba(247, 241, 227, 0.05), rgba(247, 241, 227, 0.02)),
    rgba(13, 34, 27, 0.9);
  color: rgba(247, 241, 227, 0.5);
  box-shadow: none;
  opacity: 1;
  transform: none;
}

/* ONLINE-0D-C.7-G.3-B — historique detaille de fin de partie ONLINE.
   Reutilise .online-mode-modal / .online-mode-modal__card (esthetique
   premium deja etablie, voir onlineAbandonModal) : uniquement une variante
   de largeur + le contenu propre a la liste chronologique ci-dessous. */
/* Fenetre compacte des regles du match ONLINE : reutilise l'esthetique
   .online-mode-modal sans ajouter de hauteur au lobby principal. */
.online-match-rules-modal {
  z-index: 18100;
}

.online-rules-express-modal {
  z-index: 18120;
}

.online-match-rules-card {
  width: min(620px, calc(100vw - 28px));
  max-height: min(82dvh, 680px);
  overflow: auto;
}

.online-match-rules__subtitle {
  margin: -4px 34px 16px 0;
  color: rgba(244, 219, 165, 0.9);
  font-family: var(--font-online-body);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}

.online-match-rules__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.online-match-rules__item {
  padding: 0 0 8px 13px;
  border-left: 1px solid rgba(215, 168, 96, 0.42);
}

.online-match-rules__item h4 {
  margin: 0 0 3px;
  color: #f6d990;
  font: 850 0.76rem/1.15 var(--font-online-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.online-match-rules__item p {
  margin: 0;
  color: rgba(247, 241, 227, 0.86);
  font-size: 0.92rem;
  line-height: 1.42;
}

.online-match-rules__item:last-child {
  grid-column: 1 / -1;
}

.online-rules-express-card {
  width: min(760px, calc(100vw - 28px));
  max-height: min(86dvh, 720px);
  overflow: auto;
}

.online-rules-express__subtitle {
  margin: -4px 34px 16px 0;
  color: rgba(244, 219, 165, 0.92);
  font-family: var(--font-online-body);
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.34;
}

.online-rules-express__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.online-rules-express__item {
  min-height: 104px;
  padding: 12px 11px;
  border: 1px solid rgba(215, 168, 96, 0.28);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(246, 217, 144, 0.1), rgba(23, 54, 42, 0.1)),
    rgba(10, 24, 19, 0.42);
}

.online-rules-express__item span {
  display: block;
  margin-bottom: 7px;
  font-size: 1.18rem;
  line-height: 1;
}

.online-rules-express__item h4 {
  margin: 0 0 5px;
  color: #f6d990;
  font: 850 0.72rem/1.15 var(--font-online-body);
  text-transform: uppercase;
}

.online-rules-express__item p {
  margin: 0;
  color: rgba(247, 241, 227, 0.88);
  font-size: 0.9rem;
  line-height: 1.32;
}

.online-rules-express__footer {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.online-rules-express__countdown,
.online-rules-express__notice {
  margin: 0;
  color: #bfe9c6;
  font: 850 0.95rem/1.25 var(--font-online-body);
}

.online-rules-express__notice {
  color: #f4dba5;
}

.online-rules-express__notice[hidden] {
  display: none;
}

.online-rules-express__progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(6, 14, 11, 0.58);
  box-shadow: inset 0 0 0 1px rgba(215, 168, 96, 0.2);
}

.online-rules-express__progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9fd7ab, #f6d990);
  transform: scaleX(1);
  transform-origin: left center;
  transition: none;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .online-lobby-rules-btn:hover,
  .online-lobby-rules-btn:focus-visible {
    transform: none;
  }
}

@media (max-width: 520px) {
  .online-header-rules-btn {
    width: 32px;
    height: 32px;
    margin-left: 0;
  }

  .online-match-rules-card {
    width: calc(100vw - 22px);
    max-height: calc(100dvh - 22px);
  }

  .online-rules-express-card {
    width: calc(100vw - 22px);
    max-height: calc(100dvh - 22px);
  }

  .online-match-rules__list {
    grid-template-columns: 1fr;
  }

  .online-rules-express__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .online-match-rules__subtitle {
    margin-right: 30px;
  }

  .online-rules-express__subtitle {
    margin-right: 30px;
  }
}

@media (orientation: landscape) and (max-height: 460px) {
  .online-match-rules-card {
    max-height: calc(100dvh - 18px);
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .online-match-rules__list {
    gap: 6px 12px;
  }

  .online-match-rules__item p {
    font-size: 0.88rem;
    line-height: 1.34;
  }

  .online-rules-express-card {
    max-height: calc(100dvh - 18px);
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .online-rules-express__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .online-rules-express__item {
    min-height: 82px;
    padding: 8px 9px;
  }

  .online-rules-express__item span {
    margin-bottom: 4px;
    font-size: 1rem;
  }

  .online-rules-express__item p {
    font-size: 0.82rem;
    line-height: 1.22;
  }
}

/* Variante historique detaille de fin de partie ONLINE. */
.online-mode-modal__card--history {
  width: min(94vw, 640px);
}

.online-history-status {
  margin: 18px 0 4px;
  padding: 12px 14px;
  border: 1px solid rgba(215, 168, 96, 0.22);
  border-radius: 12px;
  background: rgba(215, 168, 96, 0.08);
  color: rgba(247, 241, 227, 0.88);
  font-weight: 750;
}

.online-history-status[hidden] {
  display: none;
}

.online-history-status[data-state="error"] {
  border-color: rgba(224, 122, 122, 0.4);
  background: rgba(224, 122, 122, 0.12);
  color: #f6d3d3;
}

.online-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.online-history-list[hidden] {
  display: none;
}

.online-history-entry {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(215, 168, 96, 0.16);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 244, 216, 0.06), rgba(255, 255, 255, 0.015)),
    rgba(12, 31, 24, 0.6);
}

.online-history-entry[data-action-type="ACCEPTED"] {
  border-color: rgba(215, 168, 96, 0.3);
}

.online-history-index {
  flex: 0 0 auto;
  min-width: 58px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(215, 168, 96, 0.14);
  color: rgba(215, 168, 96, 0.95);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  height: fit-content;
}

.online-history-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.online-history-text {
  margin: 0;
  color: rgba(247, 241, 227, 0.92);
  font-size: 0.94rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.online-history-text--refused {
  color: rgba(230, 190, 190, 0.85);
  font-style: italic;
}

.online-history-word-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-right: 6px;
}

.online-history-word {
  padding: 1px 8px;
  border: 1px solid rgba(215, 168, 96, 0.4);
  border-radius: 999px;
  background: rgba(215, 168, 96, 0.14);
  color: #f4dba5;
  font-weight: 850;
  font-size: 0.92rem;
  line-height: 1.5;
}

.online-history-word:hover,
.online-history-word:focus-visible {
  border-color: rgba(215, 168, 96, 0.75);
  background: rgba(215, 168, 96, 0.26);
  color: #fff2dc;
  outline: none;
}

.online-history-word-score {
  color: rgba(247, 241, 227, 0.62);
  font-size: 0.82rem;
  font-weight: 700;
}

.online-history-badges {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.online-history-badge {
  padding: 2px 9px;
  border: 1px solid rgba(215, 168, 96, 0.32);
  border-radius: 999px;
  background: rgba(215, 168, 96, 0.1);
  color: rgba(244, 219, 165, 0.92);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.online-history-total {
  align-self: flex-start;
  color: #9be3ab;
  font-weight: 900;
  font-size: 0.92rem;
}

@media (max-width: 480px) {
  .online-history-entry {
    gap: 8px;
    padding: 10px 11px;
  }

  .online-history-index {
    min-width: 46px;
    font-size: 0.66rem;
  }
}

/* ONLINE-0B-FRONT-B — lobby en ligne (creer/rejoindre/attendre une salle) */

.online-lobby-state[hidden] {
  display: none;
}

/* ONLINE-2C.2-B — etat de reconnexion (F5 avec session ONLINE persistee).
   Esthetique volontairement sobre, coherente avec .online-mode-modal__card
   (fond vert fonce/dore) : aucune donnee de salle n'est encore affichee a
   ce stade (voir app.js, resumeOnlineSession). */
.online-lobby-restoring {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 8px 4px 4px;
}

.online-lobby-restoring__spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(215, 168, 96, 0.26);
  border-top-color: rgba(215, 168, 96, 0.92);
  animation: online-lobby-restoring-spin 0.85s linear infinite;
}

@keyframes online-lobby-restoring-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .online-lobby-restoring__spinner {
    animation: none;
  }
}

/* ONLINE-2C.2-B (polish typographique) — le h3/.subtle generiques de cet
   ecran (voir .online-mode-modal h3 / .subtle, partages par TOUTE la
   modale online et au-dela pour .subtle) n'ont pas de font-family dediee :
   scope volontairement etroit a .online-lobby-restoring pour ne jamais
   toucher aux autres ecrans/etats (choix, rejoindre, room garde deja ses
   propres regles via .online-lobby-room__title). */
.online-lobby-restoring h3 {
  font-family: var(--font-online-heading);
  color: #fff2dc;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.online-lobby-restoring .subtle {
  font-family: var(--font-online-body);
  font-size: 0.9rem;
}

.online-lobby-resume {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(215, 168, 96, 0.3);
  border-radius: 12px;
  background: rgba(215, 168, 96, 0.08);
}

.online-lobby-resume__text {
  margin: 0 0 10px;
  color: #efd39b;
  font-weight: 750;
}

.online-lobby-resume__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.online-lobby-choice-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.online-lobby-choice-btn {
  min-height: 48px;
  border: 1px solid rgba(215, 168, 96, 0.28);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(247, 241, 227, 0.08), rgba(247, 241, 227, 0.02)),
    rgba(13, 34, 27, 0.92);
  color: rgba(247, 241, 227, 0.92);
  font-weight: 850;
  font-size: 1rem;
}

.online-lobby-choice-btn:hover,
.online-lobby-choice-btn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(215, 168, 96, 0.5);
  outline: none;
}

/* ONLINE-0C-MULTI4-E — choix du nombre de joueurs avant creation. */
.online-lobby-player-count {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.online-lobby-player-count__label {
  color: rgba(215, 168, 96, 0.9);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.online-lobby-segmented {
  display: inline-flex;
  align-self: flex-start;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(215, 168, 96, 0.3);
  border-radius: 12px;
  background: rgba(9, 22, 17, 0.6);
}

.online-lobby-segmented__btn {
  min-width: 46px;
  min-height: 40px;
  padding: 0 14px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: rgba(247, 241, 227, 0.72);
  font-weight: 850;
  font-size: 0.98rem;
  cursor: pointer;
}

.online-lobby-segmented__btn:hover,
.online-lobby-segmented__btn:focus-visible {
  color: #fff2dc;
  outline: none;
}

.online-lobby-segmented__btn.is-active {
  background:
    linear-gradient(180deg, rgba(255, 241, 196, 0.3), rgba(215, 168, 96, 0.06)),
    #d7a860;
  color: #0e1c16;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 248, 217, 0.5);
}

.online-lobby-field {
  display: block;
  margin: 18px 0 6px;
  color: rgba(215, 168, 96, 0.9);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.online-lobby-code-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid rgba(215, 168, 96, 0.34);
  border-radius: 12px;
  background: rgba(9, 22, 17, 0.72);
  color: #fff2dc;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.28em;
  text-align: center;
  text-transform: uppercase;
}

.online-lobby-code-input:focus-visible {
  outline: none;
  border-color: rgba(215, 168, 96, 0.7);
}

.online-lobby-error {
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px solid rgba(214, 92, 92, 0.4);
  border-radius: 12px;
  background: rgba(214, 92, 92, 0.1);
  color: #f3b8b8;
  font-weight: 750;
  font-size: 0.9rem;
}

.online-lobby-error[hidden] {
  display: none;
}

.online-lobby-code-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin: 16px auto 0;
  padding: 14px 20px;
  border: 1px solid rgba(215, 168, 96, 0.38);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 244, 216, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(9, 22, 17, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 219, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.16);
}

.online-lobby-code-box__label {
  color: rgba(215, 168, 96, 0.8);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.online-lobby-code-value {
  font-family: var(--font-online-heading);
  color: #fff2dc;
  font-size: clamp(1.7rem, 4vw, 2.15rem);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.online-lobby-copy-btn {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(215, 168, 96, 0.36);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(247, 241, 227, 0.1), rgba(247, 241, 227, 0.02)),
    rgba(13, 34, 27, 0.94);
  color: rgba(247, 241, 227, 0.92);
  font-family: var(--font-online-body);
  /* ONLINE-2C.2-B — 700 (gras) adouci en 600 (graisse intermediaire) : Lora
     etant desormais reellement chargee (@font-face plus haut), un 700 plein
     rendait ce petit bouton plus lourd que souhaite ("ne pas donner aux
     boutons un aspect gras/lourd"). */
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
}

.online-lobby-copy-feedback {
  color: #9fd7ab;
  font-family: var(--font-online-body);
  font-weight: 600;
  font-size: 0.84rem;
}

.online-lobby-copy-feedback[hidden] {
  display: none;
}

/* ONLINE-0C-MULTI4-E.4-C — desormais premiere colonne de la barre d'actions
   sticky (voir .online-lobby-room__actions) : petit voyant vert + texte,
   aligne a gauche pendant que Quitter/Continuer restent a droite (meme
   composition que les maquettes). Le voyant reutilise exactement le motif
   deja existant de .online-lobby-ready-message::before. */
.online-lobby-status-text {
  position: relative;
  margin: 0;
  padding-left: 16px;
  flex: 1 1 auto;
  min-width: 140px;
  color: rgba(247, 241, 227, 0.85);
  font-family: var(--font-online-body);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
}

.online-lobby-status-text:not(:empty)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9fd7ab;
  box-shadow: 0 0 10px rgba(159, 215, 171, 0.35);
  transform: translateY(-50%);
}

/* ONLINE-0C-MULTI4-E/P4.13C — grille par defaut = 2 joueurs (identique a avant) ;
   les modificateurs --n3/--n4/--n5/--n6 (ajoutes par renderOnlineLobbySeats()) ne
   changent le nombre de colonnes qu'a partir de 641px (voir media query
   plus bas) pour ne jamais entrer en conflit avec l'empilement mobile. */
.online-lobby-seats-wrap {
  position: relative;
}

.online-lobby-seats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  justify-content: center;
  gap: clamp(20px, 3vw, 28px) clamp(22px, 3.4vw, 30px);
  margin-top: 22px;
}

@media (min-width: 641px) {
  .online-lobby-seats--n3 {
    grid-template-columns: repeat(3, minmax(0, 205px));
  }

  .online-lobby-seats--n4 {
    grid-template-columns: repeat(2, minmax(0, 300px));
  }

  .online-lobby-seats--n5,
  .online-lobby-seats--n6 {
    grid-template-columns: repeat(3, minmax(0, 226px));
    gap: 12px;
    margin-top: 16px;
  }
}

/* P4.13D2.3b — paysage mobile/tablette a faible hauteur (844x390, 667x375,
   932x430 typiquement). Mesure reelle AVANT correctif (CDP, cf rapport) :
   la LARGEUR du salon "La tablee" a 5/6 joueurs etait deja correcte via la
   regle existante .online-mode-modal__card--room:has(n5/n6) ci-dessus (810-
   820px a 844-667px de large, 3 colonnes x 2 lignes, avatars 76-78px —
   INCHANGES ici, deja bien dimensionnes). Le vrai probleme est la HAUTEUR :
   la carte restait plafonnee a 90vh/780px (regle de base .online-mode-
   modal__card, desktop/portrait), soit 351px a 390px de haut pour ~820px de
   contenu reel (entete + code + duree du tour + 2 rangees de sieges) ->
   enorme scroll, impression de salon "tasse". Contrairement aux autres
   modales (#onlineSignupModal / #playerAccountSettingsModal, meme
   breakpoint reutilise plus bas dans ce fichier), ce cas n'avait jamais ete
   compacte. Correctif : chrome resserre (entete/code/duree du tour) pour
   recuperer de la place verticale, plafond de hauteur relache
   (calc(100dvh - 10px) au lieu de 90vh), largeur legerement augmentee pour
   les plus grands paysages (932px : 820px -> ~894px). Scroll residuel
   ASSUME (le footer "Quitter la salle" reste accessible via le
   position:sticky deja en place, cf .online-mode-modal__actions). SCOPE
   strict aux salons 5/6 joueurs (:has()) : duel (n2) et tablees n3/n4,
   desktop, tablette paysage (>932px) et mobile portrait : INCHANGES. */
@media (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  #onlineSearchModal .online-mode-modal__card--room:has(.online-lobby-seats--n5),
  #onlineSearchModal .online-mode-modal__card--room:has(.online-lobby-seats--n6) {
    width: min(96vw, 900px);
    max-height: calc(100dvh - 10px);
    padding: 10px 16px 8px;
  }

  #onlineSearchModal .online-mode-modal__card--room:has(.online-lobby-seats--n5) .online-lobby-room-kind,
  #onlineSearchModal .online-mode-modal__card--room:has(.online-lobby-seats--n6) .online-lobby-room-kind {
    margin: 0;
  }

  #onlineSearchModal .online-mode-modal__card--room:has(.online-lobby-seats--n5) .online-lobby-room__title,
  #onlineSearchModal .online-mode-modal__card--room:has(.online-lobby-seats--n6) .online-lobby-room__title {
    margin: 2px 0 0;
  }

  #onlineSearchModal .online-mode-modal__card--room:has(.online-lobby-seats--n5) .online-lobby-code-box,
  #onlineSearchModal .online-mode-modal__card--room:has(.online-lobby-seats--n6) .online-lobby-code-box {
    margin-top: 8px;
    padding: 8px 16px;
  }

  #onlineSearchModal .online-mode-modal__card--room:has(.online-lobby-seats--n5) .online-lobby-turn-duration,
  #onlineSearchModal .online-mode-modal__card--room:has(.online-lobby-seats--n6) .online-lobby-turn-duration {
    margin-top: 8px;
    padding: 10px 12px;
  }

  #onlineSearchModal .online-mode-modal__card--room:has(.online-lobby-seats--n5) .online-lobby-turn-duration__subtitle,
  #onlineSearchModal .online-mode-modal__card--room:has(.online-lobby-seats--n6) .online-lobby-turn-duration__subtitle {
    display: none;
  }

  #onlineSearchModal .online-mode-modal__card--room:has(.online-lobby-seats--n5) .online-lobby-turn-duration__header,
  #onlineSearchModal .online-mode-modal__card--room:has(.online-lobby-seats--n6) .online-lobby-turn-duration__header {
    margin-bottom: 6px;
  }

  /* Grille 3 colonnes fluide (au lieu des 226px fixes ci-dessus) : la carte
     disposant desormais de legerement plus de largeur aux tailles les plus
     generreuses (932px), 3 colonnes x 2 lignes tiennent confortablement
     meme a 667px de large, sans jamais revenir a une seule colonne. */
  #onlineSearchModal .online-lobby-seats--n5,
  #onlineSearchModal .online-lobby-seats--n6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 800px;
    margin: 10px auto 0;
    gap: 10px;
  }
}

/* ONLINE-0C-MULTI4-E.4-C — "VS" du duel : element purement decoratif
   (aria-hidden, jamais reconstruit par renderOnlineLobbySeats — c'est un
   frere statique de #onlineLobbySeats, pas un enfant, donc jamais efface
   par innerHTML=''). Positionne au centre du wrap, visible uniquement
   pour 2 joueurs. Le sens "duel" est deja porte par le texte reel (titre
   "Le duel", noms des deux joueurs) : ce badge est un renfort visuel, pas
   la seule information. */
.online-lobby-vs {
  display: none;
}

#onlineLobbyRoom:has(.online-lobby-seats--n2) .online-lobby-vs {
  position: absolute;
  left: 50%;
  top: calc(50% + 11px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(215, 168, 96, 0.4);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 246, 219, 0.14), transparent 60%),
    rgba(9, 22, 17, 0.92);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  font-family: var(--font-online-heading);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #efd39b;
}

/* ONLINE-0C-MULTI4-E.4-C — mobile etroit : le duel cote a cote a 2
   colonnes deviendrait trop resserre pour les avatars agrandis (92px).
   Empiler verticalement, VS redevient un separateur horizontal dans le
   flux (plus une position absolue calee sur 2 colonnes qui n'existent
   plus). "La tablee" (n3/n4/n5/n6) garde son empilement 2 colonnes existant,
   deja fonctionnel, non modifie ici. */
@media (max-width: 480px) {
  .online-lobby-seats--n2 {
    grid-template-columns: minmax(0, 300px);
    justify-items: center;
  }

  #onlineLobbyRoom:has(.online-lobby-seats--n2) .online-lobby-vs {
    position: static;
    transform: none;
    margin: 2px auto;
  }
}

.online-lobby-seat {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 218px;
  gap: 8px;
  padding: 18px 14px 18px;
  border: 1px solid rgba(215, 168, 96, 0.32);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 244, 216, 0.1), rgba(255, 255, 255, 0.025)),
    rgba(12, 31, 24, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 219, 0.08),
    0 14px 26px rgba(0, 0, 0, 0.16);
  text-align: center;
  animation: onlineLobbySeatIn 260ms ease both;
}

@keyframes onlineLobbySeatIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.online-lobby-seat::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 246, 219, 0.1), transparent 42%);
  pointer-events: none;
}

.online-lobby-seat--empty {
  border-style: dashed;
  opacity: 0.78;
  box-shadow: inset 0 1px 0 rgba(255, 246, 219, 0.05);
}

/* Halo discret sur les sieges "confirmes" (Vous ou deja entered/"Pret"),
   distincts des sieges encore "dans le salon" — renfort visuel en plus du
   texte du badge, jamais la seule maniere de distinguer les etats. */
.online-lobby-seat:has(.online-lobby-seat__badge:not([hidden]):not(.online-lobby-seat__badge--waiting)) {
  border-color: rgba(239, 211, 155, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 219, 0.08),
    0 0 0 1px rgba(239, 211, 155, 0.16),
    0 14px 26px rgba(0, 0, 0, 0.18);
}

.online-lobby-seat--editable {
  cursor: pointer;
}

.online-lobby-seat--editable:hover,
.online-lobby-seat--editable:focus-visible {
  border-color: rgba(247, 216, 145, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 219, 0.1),
    0 0 0 1px rgba(239, 211, 155, 0.24),
    0 16px 30px rgba(0, 0, 0, 0.22);
  outline: none;
}

.online-lobby-seat__avatar {
  position: relative;
  width: 116px;
  height: 116px;
  border: 3px solid rgba(239, 211, 155, 0.58);
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 0 0 4px rgba(215, 168, 96, 0.08),
    0 10px 20px rgba(0, 0, 0, 0.2);
}

.online-lobby-seat__flag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  width: 24px;
  height: 18px;
  border-radius: 4px;
  object-fit: contain;
  background: rgba(7, 20, 16, 0.82);
  box-shadow:
    0 0 0 1px rgba(255, 247, 232, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

.online-lobby-seat__flag[hidden] {
  display: none;
}

.online-lobby-seat__edit-badge {
  position: absolute;
  top: 110px;
  left: calc(50% + 34px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(239, 211, 155, 0.88);
  border-radius: 50%;
  background: rgba(5, 22, 17, 0.96);
  color: #f1d18a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  pointer-events: auto;
}

.online-lobby-seat__edit-badge svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.online-lobby-seat__edit-badge[hidden] {
  display: none;
}

#onlineLobbyRoom:has(.online-lobby-seats--n2) .online-lobby-seat__avatar {
  width: 124px;
  height: 124px;
  border-width: 3px;
}

#onlineLobbyRoom:has(.online-lobby-seats--n2) .online-lobby-seat__flag {
  top: 12px;
  left: 12px;
  width: 24px;
  height: 18px;
}

#onlineLobbyRoom:has(.online-lobby-seats--n2) .online-lobby-seat__edit-badge {
  top: 118px;
  left: calc(50% + 38px);
}

#onlineLobbyRoom:has(.online-lobby-seats--n5) .online-lobby-seat,
#onlineLobbyRoom:has(.online-lobby-seats--n6) .online-lobby-seat {
  min-height: 158px;
  gap: 6px;
  padding: 12px 10px;
}

#onlineLobbyRoom:has(.online-lobby-seats--n5) .online-lobby-seat__avatar,
#onlineLobbyRoom:has(.online-lobby-seats--n6) .online-lobby-seat__avatar {
  width: 78px;
  height: 78px;
  border-width: 2px;
}

#onlineLobbyRoom:has(.online-lobby-seats--n5) .online-lobby-seat__placeholder,
#onlineLobbyRoom:has(.online-lobby-seats--n6) .online-lobby-seat__placeholder {
  width: 58px;
  height: 58px;
}

#onlineLobbyRoom:has(.online-lobby-seats--n5) .online-lobby-seat__flag,
#onlineLobbyRoom:has(.online-lobby-seats--n6) .online-lobby-seat__flag {
  top: 8px;
  left: 8px;
  width: 22px;
  height: 16px;
}

#onlineLobbyRoom:has(.online-lobby-seats--n5) .online-lobby-seat__edit-badge,
#onlineLobbyRoom:has(.online-lobby-seats--n6) .online-lobby-seat__edit-badge {
  top: 72px;
  left: calc(50% + 22px);
}

#onlineLobbyRoom:has(.online-lobby-seats--n5) .online-lobby-seat__name,
#onlineLobbyRoom:has(.online-lobby-seats--n6) .online-lobby-seat__name {
  font-size: 0.95rem;
}

#onlineLobbyRoom:has(.online-lobby-seats--n5) .online-lobby-seat__meta,
#onlineLobbyRoom:has(.online-lobby-seats--n6) .online-lobby-seat__meta {
  font-size: 0.72rem;
}

#onlineLobbyRoom:has(.online-lobby-seats--n5) .online-lobby-seat__badge,
#onlineLobbyRoom:has(.online-lobby-seats--n6) .online-lobby-seat__badge {
  padding: 3px 7px;
  font-size: 0.6rem;
}

/* P4.13D2.3c — a l'interieur du breakpoint D2.3b (plus haut dans ce fichier),
   UNIQUEMENT pour les paysages assez larges (>=760px : 844x390 et 932x430 ;
   PAS 667x375, qui garde l'empilement vertical D2.3b — mesure reelle : a
   667px de large, 2 zones (260px + 400px + 16px de gap = 676px) depasseraient
   les ~608px de contenu disponible). Constat D2.3b : meme compacte,
   l'empilement VERTICAL (entete -> code -> chrono -> sieges) laissait a
   peine la 1ere rangee de sieges emerger sous le footer sticky ; "3 joueurs
   lisibles sans scroll" n'etait pas honnete visuellement. Correctif : le
   salon "La tablee" (5/6 joueurs) passe en 2 ZONES HORIZONTALES - GAUCHE
   (identification compacte + code + vote chrono, "La tablee" masquee ici,
   redondante avec le titre) / DROITE (grille 3x2 pleine hauteur) - la
   LARGEUR du paysage est exploitee au lieu de la hauteur. #onlineLobbyRoom
   devient une grille 2 colonnes x 7 lignes ; CHAQUE enfant direct recoit un
   placement EXPLICITE (grid-column/grid-row), jamais l'auto-placement :
   robuste que les elements optionnels (barre de countdown, messages
   ready/continue/erreur) soient presents ou non (hidden -> display:none ->
   ne participe pas a la grille, ne decale rien). Footer
   (.online-mode-modal__actions, position:sticky deja en place, INCHANGE) :
   avec tout le contenu qui tient desormais dans la hauteur visible, il ne
   recouvre plus les cartes (verifie par mesure reelle bounding rect, cf
   rapport). PLACEMENT VOLONTAIRE ICI (apres le groupe n5/n6 ci-dessus,
   PAS juste apres D2.3b) : meme specificite #onlineLobbyRoom:has(...) que
   ces regles de base (min-height/avatar/placeholder/flag/edit-badge/name/
   meta/badge 78px...) -> sans cet ordre, la cascade (specificite egale,
   ordre de source) leur aurait laisse gagner malgre ce bloc plus recent.
   SCOPE strict 5/6 joueurs (:has()) : duel (n2), tablees n3/n4, 667x375,
   desktop, tablette paysage et portrait : INCHANGES. */
@media (min-width: 760px) and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  #onlineLobbyRoom:has(.online-lobby-seats--n5),
  #onlineLobbyRoom:has(.online-lobby-seats--n6) {
    display: grid;
    grid-template-columns: minmax(230px, 0.82fr) minmax(360px, 1.4fr);
    grid-template-rows: auto auto auto auto auto auto;
    column-gap: 16px;
    row-gap: 3px;
    align-items: start;
  }

  #onlineLobbyRoom:has(.online-lobby-seats--n5) > #onlineLobbyRoomCountdownBar,
  #onlineLobbyRoom:has(.online-lobby-seats--n6) > #onlineLobbyRoomCountdownBar {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /* P4.13D2.3d — "MODE EN LIGNE · CODE DU SALON" masquee ici (le titre
     "Code de la salle" juste en dessous suffit a identifier la fonction) :
     libere la ligne de grille qu'elle occupait, pour quelques px de marge
     supplementaire au-dessus du footer sur la 2e rangee de sieges. */
  #onlineLobbyRoom:has(.online-lobby-seats--n5) > .online-lobby-room__eyebrow,
  #onlineLobbyRoom:has(.online-lobby-seats--n6) > .online-lobby-room__eyebrow {
    display: none;
  }

  /* "La tablee" : redondante avec le titre juste en dessous, masquee ici
     pour liberer de la hauteur reelle (autorise explicitement §5 D2.3c). */
  #onlineLobbyRoom:has(.online-lobby-seats--n5) > .online-lobby-room-kind,
  #onlineLobbyRoom:has(.online-lobby-seats--n6) > .online-lobby-room-kind {
    display: none;
  }

  #onlineLobbyRoom:has(.online-lobby-seats--n5) > #onlineLobbyRoomTitle,
  #onlineLobbyRoom:has(.online-lobby-seats--n6) > #onlineLobbyRoomTitle {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    text-align: left;
  }

  #onlineLobbyRoom:has(.online-lobby-seats--n5) > #onlineLobbyRoomCodeBox,
  #onlineLobbyRoom:has(.online-lobby-seats--n6) > #onlineLobbyRoomCodeBox {
    grid-column: 1;
    grid-row: 3;
    margin-top: 5px;
    justify-content: flex-start;
    padding: 5px 12px;
  }

  #onlineLobbyRoom:has(.online-lobby-seats--n5) > #onlineLobbyTurnDurationVote,
  #onlineLobbyRoom:has(.online-lobby-seats--n6) > #onlineLobbyTurnDurationVote {
    grid-column: 1;
    grid-row: 4;
    margin-top: 5px;
    padding: 8px 10px;
  }

  #onlineLobbyRoom:has(.online-lobby-seats--n5) .online-lobby-turn-duration__header,
  #onlineLobbyRoom:has(.online-lobby-seats--n6) .online-lobby-turn-duration__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 6px;
  }

  #onlineLobbyRoom:has(.online-lobby-seats--n5) .online-lobby-turn-duration__subtitle,
  #onlineLobbyRoom:has(.online-lobby-seats--n6) .online-lobby-turn-duration__subtitle {
    display: none;
  }

  /* Options du chrono : 2 colonnes (meme valeur que le fallback existant
     @media max-width:640px plus bas dans ce fichier) au lieu de 4 — la zone
     gauche est trop etroite ici pour 4 colonnes sans texte microscopique. */
  #onlineLobbyRoom:has(.online-lobby-seats--n5) #onlineLobbyTurnDurationOptions,
  #onlineLobbyRoom:has(.online-lobby-seats--n6) #onlineLobbyTurnDurationOptions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  #onlineLobbyRoom:has(.online-lobby-seats--n5) > .online-lobby-seats-wrap,
  #onlineLobbyRoom:has(.online-lobby-seats--n6) > .online-lobby-seats-wrap {
    grid-column: 2;
    grid-row: 2 / 5;
    align-self: stretch;
    display: flex;
    align-items: center;
  }

  #onlineLobbyRoom:has(.online-lobby-seats--n5) > #onlineLobbyReadyMessage,
  #onlineLobbyRoom:has(.online-lobby-seats--n6) > #onlineLobbyReadyMessage,
  #onlineLobbyRoom:has(.online-lobby-seats--n5) > #onlineLobbyContinueMessage,
  #onlineLobbyRoom:has(.online-lobby-seats--n6) > #onlineLobbyContinueMessage,
  #onlineLobbyRoom:has(.online-lobby-seats--n5) > #onlineLobbyRoomError,
  #onlineLobbyRoom:has(.online-lobby-seats--n6) > #onlineLobbyRoomError {
    grid-column: 1 / -1;
    grid-row: 5;
    margin-top: 6px;
  }

  #onlineLobbyRoom:has(.online-lobby-seats--n5) > .online-lobby-room__actions,
  #onlineLobbyRoom:has(.online-lobby-seats--n6) > .online-lobby-room__actions {
    grid-column: 1 / -1;
    grid-row: 6;
  }

  /* Zone droite : sieges en grille 3 colonnes fluide dans l'espace
     reellement disponible (plus etroit qu'en D2.3b, partage avec la zone
     gauche) : cartes compactees mais lisibles, avatars 56px (cible 54-68px
     du mandat, mesure/choisie — visages identifiables confirmes). */
  .online-lobby-seats--n5,
  .online-lobby-seats--n6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    width: 100%;
    margin: 0;
    gap: 4px;
  }

  /* P4.13D2.3d — reduction de quelques px supplementaires (padding/gap
     uniquement, avatar INCHANGE a 56px) pour degager les badges de la 2e
     rangee du footer a 844x390, APRES le masquage de l'eyebrow ci-dessus. */
  #onlineLobbyRoom:has(.online-lobby-seats--n5) .online-lobby-seat,
  #onlineLobbyRoom:has(.online-lobby-seats--n6) .online-lobby-seat {
    min-height: 100px;
    gap: 2px;
    padding: 5px 4px 3px;
  }

  #onlineLobbyRoom:has(.online-lobby-seats--n5) .online-lobby-seat__avatar,
  #onlineLobbyRoom:has(.online-lobby-seats--n6) .online-lobby-seat__avatar,
  #onlineLobbyRoom:has(.online-lobby-seats--n5) .online-lobby-seat__placeholder,
  #onlineLobbyRoom:has(.online-lobby-seats--n6) .online-lobby-seat__placeholder {
    width: 56px;
    height: 56px;
  }

  #onlineLobbyRoom:has(.online-lobby-seats--n5) .online-lobby-seat__flag,
  #onlineLobbyRoom:has(.online-lobby-seats--n6) .online-lobby-seat__flag {
    top: 5px;
    left: 5px;
    width: 19px;
    height: 14px;
  }

  #onlineLobbyRoom:has(.online-lobby-seats--n5) .online-lobby-seat__edit-badge,
  #onlineLobbyRoom:has(.online-lobby-seats--n6) .online-lobby-seat__edit-badge {
    top: 52px;
    left: calc(50% + 16px);
    width: 16px;
    height: 16px;
  }

  #onlineLobbyRoom:has(.online-lobby-seats--n5) .online-lobby-seat__name,
  #onlineLobbyRoom:has(.online-lobby-seats--n6) .online-lobby-seat__name {
    font-size: 0.84rem;
  }

  #onlineLobbyRoom:has(.online-lobby-seats--n5) .online-lobby-seat__meta,
  #onlineLobbyRoom:has(.online-lobby-seats--n6) .online-lobby-seat__meta {
    font-size: 0.64rem;
  }

  #onlineLobbyRoom:has(.online-lobby-seats--n5) .online-lobby-seat__badge,
  #onlineLobbyRoom:has(.online-lobby-seats--n6) .online-lobby-seat__badge {
    padding: 2px 6px;
    font-size: 0.58rem;
  }
}

.online-lobby-seat__avatar[hidden] {
  display: none;
}

.online-lobby-seat__placeholder {
  position: relative;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border: 2px dashed rgba(215, 168, 96, 0.42);
  border-radius: 50%;
  color: rgba(215, 168, 96, 0.7);
  font-size: 1.3rem;
  font-weight: 900;
  background: rgba(6, 18, 14, 0.2);
}

#onlineLobbyRoom:has(.online-lobby-seats--n2) .online-lobby-seat__placeholder {
  width: 92px;
  height: 92px;
}

.online-lobby-seat__placeholder[hidden] {
  display: none;
}

/* ONLINE polish — "?" desormais un span dedie (__placeholder-mark) au lieu
   d'un textContent direct sur .online-lobby-seat__placeholder, pour
   coexister avec l'anneau (__placeholder-ring, enfant du meme conteneur).
   Aucun changement visuel pour le mark lui-meme : meme grille/centrage que
   le parent (place-items:center herite, le ring etant en position:absolute
   ne participe pas a la grille). */
.online-lobby-seat__placeholder-mark {
  position: relative;
}

/* Roue premium sur siege vacant : anneau fin tournant AUTOUR du "?"
   existant (inset negatif = deborde legerement le cercle en pointilles,
   qui reste inchange). Meme technique que .online-lobby-restoring__spinner
   (anneau attenue + un segment plus lumineux via border-top-color, pour la
   coherence demandee), mais volontairement plus lent/plus dore/avec un
   halo tres subtil pour un ressenti "on attend un adversaire" plutot que
   "chargement technique". Pur CSS : aucun timer JS, aucune animation par
   siege geree en script (voir renderOnlineLobbySeats — un simple element
   present ou non dans le DOM, jamais recree tant que le siege reste vide,
   voir plus haut). */
.online-lobby-seat__placeholder-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  /* ONLINE polish (harmonisation) — segment actif aligne sur la teinte
     exacte du libelle "CODE" (.online-lobby-code-box__label, rgba(215,
     168, 96, ...)) plutot que le dore plus pale utilise auparavant
     (rgba(244, 219, 165, ...)) : lien visuel direct avec le code de la
     salle, rendu plus "assume" sans devenir criard (opacite elevee mais
     pas de blanc). Base du cercle : meme teinte, translucide/discrete. */
  border: 2px solid rgba(215, 168, 96, 0.22);
  border-top-color: rgba(215, 168, 96, 0.95);
  box-shadow: 0 0 10px rgba(215, 168, 96, 0.16);
  animation: onlineLobbyWaitingSpin 3s linear infinite;
  pointer-events: none;
}

@keyframes onlineLobbyWaitingSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .online-lobby-seat__placeholder-ring {
    /* Le sens fonctionnel (siege vacant) reste porte par l'anneau lui-meme,
       simplement statique : jamais de rotation, jamais disparu. */
    animation: none;
    border-top-color: rgba(215, 168, 96, 0.5);
  }
}

.online-lobby-seat__name {
  position: relative;
  max-width: 100%;
  font-family: var(--font-online-heading);
  color: rgba(247, 241, 227, 0.94);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.18;
  word-break: break-word;
}

#onlineLobbyRoom:has(.online-lobby-seats--n2) .online-lobby-seat__name {
  font-size: 1.28rem;
}

.online-lobby-seat__meta-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: 100%;
}

.online-lobby-seat__meta-row[hidden] {
  display: none;
}

.online-lobby-seat__meta {
  font-family: var(--font-online-body);
  color: rgba(230, 218, 190, 0.74);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.online-lobby-seat__device-icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  object-fit: contain;
  opacity: 0.9;
}

.online-lobby-seat__device-icon[data-device-type="desktop"],
.online-lobby-seat__device-icon[data-device-type="laptop"] {
  width: 18px;
  height: 18px;
}

.online-lobby-seat__device-icon[hidden] {
  display: none;
}

.online-lobby-seat__badge {
  position: relative;
  padding: 3px 9px;
  border: 1px solid rgba(239, 211, 155, 0.28);
  border-radius: 999px;
  background: rgba(215, 168, 96, 0.2);
  color: #f4dba5;
  font-family: var(--font-online-body);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 246, 219, 0.1);
}

/* ONLINE-0C-MULTI4-E.4-C — "Dans le salon" (pas encore entered) : meme
   forme que le badge "Vous"/"Pret", mais plus discret (jamais uniquement
   une difference de couleur : le texte lui-meme change deja). */
.online-lobby-seat__badge--waiting {
  border-color: rgba(230, 218, 190, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(230, 218, 190, 0.68);
  box-shadow: none;
}

.online-lobby-seat__badge[hidden] {
  display: none;
}

/* P5.2b4 — portrait mobile : chaque carte devient un bloc horizontal
   avatar | identite. Le badge sort du flux texte pour ne plus comprimer le
   nom/pays/niveau. Desktop et paysage restent portes par les regles
   existantes. */
@media (max-width: 480px) and (orientation: portrait) {
  #onlineLobbyRoom .online-lobby-seat {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    justify-content: stretch;
    min-height: 118px;
    gap: 4px 10px;
    padding: 16px 10px 12px;
    text-align: left;
  }

  #onlineLobbyRoom .online-lobby-seat__avatar,
  #onlineLobbyRoom .online-lobby-seat__placeholder,
  #onlineLobbyRoom:has(.online-lobby-seats--n2) .online-lobby-seat__avatar,
  #onlineLobbyRoom:has(.online-lobby-seats--n2) .online-lobby-seat__placeholder {
    grid-column: 1;
    grid-row: 1 / 3;
    justify-self: center;
    width: 76px;
    height: 76px;
  }

  #onlineLobbyRoom .online-lobby-seat__edit-badge,
  #onlineLobbyRoom:has(.online-lobby-seats--n2) .online-lobby-seat__edit-badge {
    top: 70px;
    left: 62px;
  }

  #onlineLobbyRoom .online-lobby-seat__name,
  #onlineLobbyRoom:has(.online-lobby-seats--n2) .online-lobby-seat__name {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-self: stretch;
    width: 100%;
    padding-right: 42px;
    font-size: 0.98rem;
    line-height: 1.18;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #onlineLobbyRoom .online-lobby-seat__meta-row {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    justify-items: start;
    gap: 3px;
    width: 100%;
  }

  #onlineLobbyRoom .online-lobby-seat__meta-row[hidden] {
    display: none;
  }

  #onlineLobbyRoom .online-lobby-seat__meta {
    display: block;
    max-width: 100%;
    font-size: 0.72rem;
    line-height: 1.25;
    white-space: pre-line;
    word-break: normal;
    overflow-wrap: normal;
  }

  #onlineLobbyRoom .online-lobby-seat__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    max-width: 62px;
    padding: 2px 6px;
    white-space: normal;
    line-height: 1.15;
    text-align: center;
    font-size: 0.56rem;
    letter-spacing: 0.035em;
  }
}

.online-lobby-turn-duration {
  margin: 18px auto 0;
  padding: 14px;
  max-width: 760px;
  border: 1px solid rgba(215, 168, 96, 0.3);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 244, 216, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(7, 22, 17, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 219, 0.07),
    0 10px 22px rgba(0, 0, 0, 0.13);
}

.online-lobby-turn-duration__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.online-lobby-turn-duration__title {
  margin: 0;
  color: rgba(215, 168, 96, 0.9);
  font-family: var(--font-online-body);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.online-lobby-turn-duration__subtitle,
.online-lobby-turn-duration__current {
  margin: 3px 0 0;
  color: rgba(247, 241, 227, 0.78);
  font-family: var(--font-online-body);
  font-size: 0.84rem;
  font-weight: 600;
}

.online-lobby-turn-duration__current {
  flex: 0 0 auto;
  color: #bfe9c6;
  text-align: right;
}

.online-lobby-turn-duration__options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.online-lobby-turn-duration__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(215, 168, 96, 0.28);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(247, 241, 227, 0.08), rgba(247, 241, 227, 0.02)),
    rgba(12, 31, 24, 0.78);
  color: rgba(247, 241, 227, 0.9);
  font-family: var(--font-online-body);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.online-lobby-turn-duration__option:hover,
.online-lobby-turn-duration__option:focus-visible {
  border-color: rgba(247, 216, 145, 0.72);
  box-shadow: 0 0 0 2px rgba(239, 211, 155, 0.14);
  outline: none;
}

.online-lobby-turn-duration__option.is-selected {
  border-color: rgba(159, 215, 171, 0.76);
  background:
    linear-gradient(180deg, rgba(159, 215, 171, 0.18), rgba(159, 215, 171, 0.08)),
    rgba(12, 31, 24, 0.9);
  color: #f7f1e3;
}

.online-lobby-turn-duration__option.is-leading:not(.is-selected) {
  border-color: rgba(215, 168, 96, 0.54);
}

.online-lobby-turn-duration__option:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.online-lobby-turn-duration__option.is-selected:disabled {
  cursor: default;
  opacity: 1;
}

.online-lobby-turn-duration__option.is-locked:not(.is-selected) {
  opacity: 0.52;
}

.online-lobby-turn-duration__option strong {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(215, 168, 96, 0.18);
  color: #f4dba5;
  font-size: 0.78rem;
  font-weight: 900;
}

.online-lobby-turn-duration__option.is-selected strong {
  background: rgba(159, 215, 171, 0.22);
  color: #bfe9c6;
}

@media (min-width: 641px) {
  #onlineLobbyRoom:has(.online-lobby-seats--n2) .online-lobby-turn-duration__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    align-items: start;
  }

  #onlineLobbyRoom:has(.online-lobby-seats--n2) .online-lobby-turn-duration__header > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
  }

  #onlineLobbyRoom:has(.online-lobby-seats--n2) .online-lobby-turn-duration__title,
  #onlineLobbyRoom:has(.online-lobby-seats--n2) .online-lobby-turn-duration__subtitle {
    margin: 0;
    white-space: nowrap;
  }

  #onlineLobbyRoom:has(.online-lobby-seats--n2) .online-lobby-turn-duration__title::after {
    content: "·";
    margin-left: 8px;
    color: rgba(247, 241, 227, 0.42);
    font-weight: 800;
    letter-spacing: 0;
  }

  #onlineLobbyRoom:has(.online-lobby-seats--n2) .online-lobby-turn-duration__current {
    justify-self: start;
    max-width: 100%;
    margin-top: 0;
    text-align: left;
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .online-lobby-turn-duration__header {
    align-items: stretch;
    flex-direction: column;
  }

  .online-lobby-turn-duration__current {
    text-align: left;
  }

  .online-lobby-turn-duration__options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  .online-lobby-turn-duration__options {
    grid-template-columns: minmax(0, 1fr);
  }
}

.online-mode-modal .online-lobby-ready-message {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
  padding: 10px 12px;
  border: 1px solid rgba(159, 215, 171, 0.42);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(159, 215, 171, 0.13), rgba(159, 215, 171, 0.07)),
    rgba(9, 22, 17, 0.38);
  color: #bfe9c6;
  font-weight: 800;
}

.online-lobby-ready-message::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #9fd7ab;
  box-shadow: 0 0 10px rgba(159, 215, 171, 0.35);
}

.online-lobby-ready-message[hidden] {
  display: none;
}

/* ONLINE-0C-C2 — indicateur discret "En ligne" sur le panneau Match une
   fois le gameplay online affiche (lecture seule). */
.online-game-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 0;
  padding: 3px 9px;
  min-width: max-content;
  border: 1px solid rgba(215, 168, 96, 0.4);
  border-radius: 999px;
  background: rgba(215, 168, 96, 0.14);
  color: #efd39b;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.online-game-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #e25042;
  box-shadow: 0 0 0 2px rgba(226, 80, 66, 0.14);
  animation: onlineMatchBadgePulse 2.1s ease-in-out infinite;
}

.online-game-badge[hidden] {
  display: none;
}

@keyframes onlineMatchBadgePulse {
  0%,
  100% {
    opacity: 0.66;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .online-game-badge::before {
    animation: none;
  }
}

/* ONLINE-0C-MULTI4-E.4-C — plateau d'attente (ONLINE PRE-GAME BOARD).
   Transition de match premium plutot qu'une modale d'erreur : fond
   verre/translucide (le plateau reste devinable derriere), petite carte
   centrale, ombre douce, bordure doree, entree courte. Toggle
   hidden/textContent entierement pilote par renderOnlinePreGameOverlay()
   (E.4-B, logique inchangee) — uniquement l'habillage change ici. */
.online-pregame-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background:
    radial-gradient(circle at 50% 30%, rgba(20, 38, 31, 0.16), transparent 62%),
    rgba(6, 14, 11, 0.22);
  backdrop-filter: blur(1.5px);
  border-radius: inherit;
}

.online-pregame-overlay[hidden] {
  display: none;
}

.online-pregame-overlay__card {
  display: grid;
  gap: 6px;
  width: min(92%, 410px);
  max-width: 410px;
  padding: 16px 22px;
  text-align: center;
  border-radius: 16px;
  border: 1px solid rgba(215, 168, 96, 0.5);
  background:
    radial-gradient(circle at 16% 8%, rgba(159, 215, 171, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(27, 62, 49, 0.94), rgba(10, 24, 19, 0.96));
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 246, 219, 0.1);
  animation: onlinePregameCardIn 220ms ease both;
}

@keyframes onlinePregameCardIn {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.online-pregame-overlay__title {
  margin: 0;
  font-family: var(--font-online-body);
  color: #bff0c8;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(159, 215, 171, 0.18);
}

.online-pregame-overlay__countdown {
  margin: 2px 0;
  font-family: var(--font-online-body);
  color: rgba(255, 247, 228, 0.96);
  font-size: clamp(1rem, 2.4vw, 1.18rem);
  font-weight: 850;
}

.online-pregame-overlay__waiting {
  margin: 0;
  font-family: var(--font-online-body);
  color: rgba(241, 228, 203, 0.84);
  font-size: 0.88rem;
  font-weight: 750;
}

@media (prefers-reduced-motion: reduce) {
  .online-pregame-overlay__card,
  .online-lobby-seat {
    animation: none;
  }

  .online-pregame-overlay__countdown {
    animation: none;
  }
}

.word-highlight {
  position: absolute;
  border-radius: 14px;
  border: 3px solid rgba(255, 244, 212, 0.95);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 0 1px rgba(20, 15, 8, 0.12),
    0 6px 14px rgba(15, 12, 8, 0.14);
  opacity: 1;
}

.word-highlight.vertical {
  border-radius: 16px;
}

.word-highlight.is-main {
  border-width: 4px;
}

.word-highlight.is-cross {
  border-width: 2px;
}

.word-highlight.is-player {
  border-color: rgba(209, 63, 70, 0.94);
  box-shadow:
    inset 0 0 0 1px rgba(255, 229, 231, 0.14),
    0 0 0 1px rgba(81, 23, 26, 0.14),
    0 0 10px rgba(209, 63, 70, 0.18);
}

.word-highlight.is-ai {
  border-color: rgba(244, 133, 34, 0.96);
  box-shadow:
    inset 0 0 0 1px rgba(255, 239, 219, 0.16),
    0 0 0 1px rgba(98, 50, 9, 0.16),
    0 0 10px rgba(244, 133, 34, 0.22);
}

.word-highlight.is-master-move-focus.is-player,
.word-highlight.is-master-move-focus.is-ai {
  box-shadow:
    inset 0 0 0 1px rgba(255, 249, 229, 0.3),
    0 0 0 1px rgba(125, 89, 29, 0.18),
    0 0 16px rgba(255, 222, 118, 0.5),
    0 0 28px rgba(255, 204, 72, 0.3);
}

.word-score-badge {
  position: absolute;
  min-width: 28px;
  height: 17px;
  padding: 0 4px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0;
  color: #fffdf7;
  text-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0.82;
  backdrop-filter: blur(0.25px);
  transform: translateZ(0);
}

.word-score-badge.horizontal {
  transform: translateY(-50%);
}

.word-score-badge.vertical {
  transform: translateY(-50%);
}

.word-score-badge.is-player {
  background:
    linear-gradient(180deg, rgba(209, 63, 70, 0.78), rgba(143, 33, 39, 0.74));
}

.word-score-badge.is-ai {
  background:
    linear-gradient(180deg, rgba(244, 133, 34, 0.8), rgba(188, 95, 17, 0.76));
}

.remarkable-move-celebration {
  position: absolute;
  z-index: 12;
  top: clamp(10px, 5.5%, 42px);
  left: 50%;
  display: grid;
  min-width: min(250px, calc(100% - 32px));
  max-width: min(390px, calc(100% - 32px));
  justify-items: center;
  gap: 2px;
  padding: 9px 18px 10px;
  overflow: hidden;
  border: 1px solid rgba(232, 198, 126, 0.52);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 48, 37, 0.94), rgba(7, 25, 19, 0.92)),
    rgba(8, 27, 20, 0.94);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.25),
    0 0 18px rgba(215, 168, 96, 0.16),
    inset 0 1px 0 rgba(255, 248, 226, 0.12);
  color: #fff7e4;
  pointer-events: none;
  transform: translateX(-50%);
  animation: remarkableMoveEnter 180ms ease-out both;
}

.remarkable-move-celebration.is-excellent {
  border-color: rgba(242, 201, 111, 0.68);
  box-shadow:
    0 13px 28px rgba(0, 0, 0, 0.27),
    0 0 24px rgba(215, 168, 96, 0.25),
    inset 0 1px 0 rgba(255, 248, 226, 0.15);
}

.remarkable-move-celebration.is-exceptionnel {
  border-color: rgba(255, 222, 137, 0.82);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(227, 184, 86, 0.34),
    inset 0 1px 0 rgba(255, 250, 231, 0.2);
}

.remarkable-move-celebration.is-leaving {
  animation: remarkableMoveLeave 180ms ease-in both;
}

.remarkable-move-celebration__level {
  color: #e8c77e;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.remarkable-move-celebration__message {
  overflow: hidden;
  max-width: 100%;
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(1rem, 2.4vw, 1.28rem);
  font-weight: 900;
  line-height: 1.12;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remarkable-move-celebration__author {
  overflow: hidden;
  max-width: 100%;
  color: rgba(255, 244, 219, 0.76);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remarkable-move-celebration__sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.remarkable-move-celebration__sparks i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f8d98d;
  box-shadow: 0 0 7px rgba(248, 217, 141, 0.7);
  animation: remarkableMoveSpark 760ms ease-out both;
}

.remarkable-move-celebration__sparks i:nth-child(1) { left: 8%; top: 24%; --remarkable-spark-x: -8px; --remarkable-spark-y: -10px; }
.remarkable-move-celebration__sparks i:nth-child(2) { left: 18%; top: 76%; --remarkable-spark-x: -5px; --remarkable-spark-y: 9px; animation-delay: 90ms; }
.remarkable-move-celebration__sparks i:nth-child(3) { left: 34%; top: 18%; --remarkable-spark-x: 3px; --remarkable-spark-y: -11px; animation-delay: 140ms; }
.remarkable-move-celebration__sparks i:nth-child(4) { right: 34%; top: 78%; --remarkable-spark-x: -3px; --remarkable-spark-y: 10px; animation-delay: 60ms; }
.remarkable-move-celebration__sparks i:nth-child(5) { right: 18%; top: 20%; --remarkable-spark-x: 5px; --remarkable-spark-y: -9px; animation-delay: 170ms; }
.remarkable-move-celebration__sparks i:nth-child(6) { right: 8%; top: 72%; --remarkable-spark-x: 8px; --remarkable-spark-y: 9px; animation-delay: 110ms; }

@keyframes remarkableMoveEnter {
  from { opacity: 0; transform: translateX(-50%) translateY(-7px) scale(0.98); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes remarkableMoveLeave {
  to { opacity: 0; transform: translateX(-50%) translateY(-3px); }
}

@keyframes remarkableMoveSpark {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--remarkable-spark-x), var(--remarkable-spark-y)) scale(1); }
}

@media (max-width: 639px) {
  .remarkable-move-celebration {
    top: 8px;
    min-width: min(220px, calc(100% - 24px));
    max-width: calc(100% - 24px);
    padding: 8px 14px 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .remarkable-move-celebration {
    animation: remarkableMoveFade 120ms linear both;
  }

  .remarkable-move-celebration.is-leaving {
    animation: remarkableMoveReducedLeave 120ms linear both;
  }

  .remarkable-move-celebration__sparks {
    display: none;
  }
}

@keyframes remarkableMoveFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes remarkableMoveReducedLeave {
  from { opacity: 1; }
  to { opacity: 0; }
}

.master-move-burst {
  position: absolute;
  border-radius: 18px;
  border: 2px solid rgba(255, 220, 128, 0.92);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 228, 142, 0.18), rgba(255, 228, 142, 0.04) 60%, transparent 78%);
  box-shadow:
    0 0 0 1px rgba(255, 248, 224, 0.14),
    0 0 18px rgba(255, 212, 88, 0.42),
    inset 0 0 12px rgba(255, 241, 191, 0.14);
  animation: masterMovePulse 1.2s ease-in-out infinite;
}

.master-move-burst.vertical {
  border-radius: 20px;
}

.master-move-burst.is-ai {
  border-color: rgba(255, 188, 82, 0.96);
  box-shadow:
    0 0 0 1px rgba(255, 242, 214, 0.14),
    0 0 18px rgba(255, 166, 55, 0.44),
    inset 0 0 12px rgba(255, 213, 158, 0.16);
}

.master-move-burst.is-double {
  border-color: rgba(255, 236, 158, 0.98);
  box-shadow:
    0 0 0 2px rgba(255, 247, 217, 0.2),
    0 0 28px rgba(255, 212, 75, 0.72),
    0 0 46px rgba(204, 139, 31, 0.36),
    inset 0 0 18px rgba(255, 246, 205, 0.24);
  animation: masterMoveDoublePulse 1.1s ease-in-out infinite;
}

.master-move-banner {
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
  min-width: 210px;
  padding: 12px 18px 11px;
  border-radius: 20px;
  display: grid;
  justify-items: center;
  gap: 3px;
  background:
    linear-gradient(180deg, rgba(28, 23, 15, 0.86), rgba(11, 12, 10, 0.78)),
    linear-gradient(180deg, rgba(255, 240, 202, 0.12), transparent);
  border: 1px solid rgba(241, 204, 120, 0.42);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 247, 227, 0.16);
  backdrop-filter: blur(3px);
  animation: masterMoveBannerIn 320ms ease-out;
}

.master-move-banner.is-ai {
  border-color: rgba(243, 167, 72, 0.46);
}

.master-move-banner.is-double {
  background:
    linear-gradient(180deg, rgba(57, 42, 17, 0.94), rgba(10, 36, 24, 0.88)),
    radial-gradient(circle at 50% 0%, rgba(255, 236, 161, 0.28), transparent 62%);
  border-color: rgba(255, 221, 126, 0.72);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.3),
    0 0 26px rgba(250, 199, 82, 0.36),
    inset 0 1px 0 rgba(255, 249, 230, 0.24);
  animation: masterMoveBannerIn 320ms ease-out, masterMoveDoubleGlow 1.65s ease-in-out infinite;
}

.master-move-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 228, 169, 0.9);
}

.master-move-message {
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(1.25rem, 2.8vw, 1.72rem);
  font-weight: 900;
  color: #fff4db;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.master-move-player {
  max-width: 360px;
  overflow: hidden;
  color: rgba(255, 244, 219, 0.82);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.master-move-bonus {
  padding: 2px 10px 3px;
  border-radius: 999px;
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-size: 0.92rem;
  font-weight: 900;
  color: #2f1c03;
  background:
    linear-gradient(180deg, rgba(255, 233, 163, 0.96), rgba(245, 192, 71, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 225, 0.65),
    0 6px 14px rgba(85, 51, 6, 0.2);
}

@media (max-width: 639px) {
  .master-move-player {
    max-width: 248px;
    font-size: 0.76rem;
  }
}

.master-move-particles {
  position: absolute;
  inset: 0;
}

.master-move-particle {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: var(--spark-color, rgba(255, 228, 142, 0.92));
  box-shadow: 0 0 10px rgba(255, 226, 153, 0.35);
  opacity: 0;
  animation: masterMoveSpark var(--spark-duration, 2.4s) ease-out var(--spark-delay, 0s) forwards;
}

@keyframes masterMovePulse {
  0%,
  100% {
    transform: scale(0.995);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.018);
    opacity: 1;
  }
}

@keyframes masterMoveDoublePulse {
  0%,
  100% {
    transform: scale(0.99);
    opacity: 0.94;
  }
  50% {
    transform: scale(1.035);
    opacity: 1;
  }
}

@keyframes masterMoveBannerIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes masterMoveDoubleGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(255, 217, 101, 0));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(255, 217, 101, 0.45));
  }
}

@keyframes masterMoveSpark {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.7);
  }
  12% {
    opacity: 1;
  }
  70% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--spark-drift-x, 0), var(--spark-drift-y, 120px), 0) rotate(var(--spark-rotation, 80deg)) scale(1.04);
  }
}

/* ONLINE-0D-C.5 — le Coup de maitre n'avait jusqu'ici aucune regle
   prefers-reduced-motion (audit C.5, LOCAL comme ONLINE en beneficient de
   la meme facon, une seule regle globale). On neutralise uniquement les
   animations continues/decoratives (pulsation, lueur du Double, particules
   volantes) ; le texte/le bonus/le mot restent affiches normalement,
   jamais masques (transform de base .master-move-banner conserve le
   centrage une fois l'animation coupee). */
@media (prefers-reduced-motion: reduce) {
  .master-move-burst,
  .master-move-burst.is-double {
    animation: none;
  }

  .master-move-banner,
  .master-move-banner.is-double {
    animation: none;
  }

  .master-move-particle {
    animation: none;
  }
}

.board-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pill {
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(205, 177, 132, 0.18);
  background:
    linear-gradient(180deg, rgba(243, 214, 174, 0.1), rgba(255, 255, 255, 0.03)),
    rgba(16, 26, 22, 0.88);
  color: #f6ead3;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 0.95rem;
}

.board {
  position: absolute;
  inset: var(--board-grid-top) var(--board-grid-right) var(--board-grid-bottom) var(--board-grid-left);
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  grid-template-rows: repeat(15, minmax(0, 1fr));
  column-gap: var(--board-grid-column-gap);
  row-gap: var(--board-grid-row-gap);
  margin: 0;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  z-index: 2;
}

.board::before {
  display: none;
}

body[data-board-style="classic-css"] .board {
  padding: 0.3%;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(226, 210, 167, 0.92), rgba(201, 180, 132, 0.96));
  box-shadow:
    inset 0 0 0 2px rgba(72, 48, 24, 0.42),
    0 10px 18px rgba(0, 0, 0, 0.2);
}

body[data-board-style="classic-css"] .board::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(67, 48, 27, 0.22), rgba(255, 247, 220, 0.06));
}

body[data-board-style="native-css"] .board {
  padding: 0;
  border-radius: 8px;
  overflow: visible;
  background:
    linear-gradient(180deg, #f6e4bc, #dfbd81);
  border: 1px solid rgba(108, 76, 42, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 252, 235, 0.52),
    0 8px 18px rgba(78, 45, 20, 0.24);
}

body[data-board-style="native-css"] .board::before {
  content: "";
  position: absolute;
  inset: -2.35rem;
  border-radius: 18px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 244, 214, 0.32), rgba(122, 77, 39, 0.08));
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 214, 0.36),
    inset 0 0 0 9px rgba(138, 92, 50, 0.13);
  z-index: -1;
}

.cell {
  position: relative;
  border: none;
  background: transparent;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  transition:
    background 140ms ease,
    transform 120ms ease,
    box-shadow 140ms ease;
}

body[data-board-style="art"] .board .cell {
  overflow: hidden;
}

.cell.empty:hover {
  background: rgba(246, 249, 255, 0.14);
}

.cell.tw {
  background: transparent;
}

.cell.dw {
  background: transparent;
}

.cell.tl {
  background: transparent;
}

.cell.dl {
  background: transparent;
}

.cell.start {
  background: transparent;
}

body[data-board-style="classic-css"] .cell {
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(53, 35, 16, 0.12);
}

body[data-board-style="classic-css"] .cell.empty:hover {
  background: rgba(255, 250, 219, 0.35);
}

body[data-board-style="classic-css"] .cell.tw {
  background: linear-gradient(180deg, rgba(227, 72, 56, 0.96), rgba(173, 35, 30, 0.94));
}

body[data-board-style="classic-css"] .cell.dw {
  background: linear-gradient(180deg, rgba(244, 202, 190, 0.98), rgba(220, 165, 148, 0.96));
}

body[data-board-style="classic-css"] .cell.tl {
  background: linear-gradient(180deg, rgba(69, 145, 223, 0.96), rgba(31, 102, 182, 0.96));
}

body[data-board-style="classic-css"] .cell.dl {
  background: linear-gradient(180deg, rgba(212, 240, 255, 0.98), rgba(165, 215, 236, 0.98));
}

body[data-board-style="classic-css"] .cell.start {
  background: linear-gradient(180deg, rgba(236, 198, 86, 0.98), rgba(198, 154, 49, 0.98));
}

body[data-board-style="native-css"] .cell {
  border-radius: 0;
  overflow: visible;
  background: #f1e3c2;
  box-shadow:
    inset 0 0 0 1px rgba(128, 94, 55, 0.24);
}

body[data-board-style="native-css"] .cell.empty:not(.tw):not(.m4):not(.dw):not(.tl):not(.dl):not(.start):hover {
  background: #f1e3c2;
  box-shadow:
    inset 0 0 0 1px rgba(128, 94, 55, 0.24);
}

body[data-board-style="native-css"] .cell.tw.empty:hover {
  background: linear-gradient(180deg, #7b355f, #623052);
}

body[data-board-style="native-css"] .cell.m4.empty:hover {
  background: linear-gradient(180deg, #0b6d55, #064d3e);
}

body[data-board-style="native-css"] .cell.dw.empty:hover {
  background: linear-gradient(180deg, #5da0a0, #3e817f);
}

body[data-board-style="native-css"] .cell.tl.empty:hover {
  background: linear-gradient(180deg, #d88b42, #ba7134);
}

body[data-board-style="native-css"] .cell.dl.empty:hover {
  background: linear-gradient(180deg, #8aa35d, #6f874a);
}

body[data-board-style="native-css"] .cell.start.empty:hover {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 245, 178, 0.88), transparent 24%),
    linear-gradient(180deg, #11725a, #07503f);
}

body[data-board-style="classic-css"] .cell.empty:hover {
  background: #f5e8ca;
  box-shadow:
    inset 0 0 0 2px rgba(104, 76, 44, 0.18),
    inset 0 0 0 1px rgba(128, 94, 55, 0.24);
}

body[data-board-style="native-css"] .cell.tw {
  background: linear-gradient(180deg, #7b355f, #623052);
}

body[data-board-style="native-css"] .cell.m4 {
  background: linear-gradient(180deg, #0b6d55, #064d3e);
}

body[data-board-style="native-css"] .cell.dw {
  background: linear-gradient(180deg, #5da0a0, #3e817f);
}

body[data-board-style="native-css"] .cell.tl {
  background: linear-gradient(180deg, #d88b42, #ba7134);
}

body[data-board-style="native-css"] .cell.dl {
  background: linear-gradient(180deg, #8aa35d, #6f874a);
}

body[data-board-style="native-css"] .cell.start {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 245, 178, 0.88), transparent 24%),
    linear-gradient(180deg, #11725a, #07503f);
}

.cell.pending {
  box-shadow: inset 0 0 0 2px rgba(255, 242, 197, 0.46);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.cell.drag-over,
.rack-slot.drag-over {
  box-shadow:
    inset 0 0 0 3px rgba(255, 246, 202, 0.74),
    0 0 0 1px rgba(255, 249, 238, 0.65);
}

.bonus {
  display: none;
}

body[data-board-style="classic-css"] .bonus {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 5% 5%;
  white-space: pre-line;
  text-align: center;
  line-height: 1.08;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(0.32rem, 0.56vw, 0.58rem);
  font-weight: 900;
  letter-spacing: 0.025em;
  color: rgba(34, 30, 23, 0.82);
  text-transform: uppercase;
  pointer-events: none;
}

body[data-board-style="native-css"] .bonus {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 6%;
  white-space: pre-line;
  text-align: center;
  line-height: 1.08;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(0.36rem, 0.64vw, 0.72rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: rgba(255, 248, 224, 0.94);
  text-transform: uppercase;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(23, 14, 8, 0.42);
}

body[data-board-style="classic-css"] .cell.start .bonus,
body[data-board-style="native-css"] .cell.start .bonus {
  font-family: Georgia, "Palatino Linotype", serif;
  font-size: clamp(0.92rem, 1.45vw, 1.34rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  color: rgba(255, 245, 203, 0.98);
  text-shadow:
    0 1px 2px rgba(40, 24, 8, 0.4),
    0 0 9px rgba(255, 224, 138, 0.42);
}

body[data-board-style="native-css"] .cell.dw .bonus,
body[data-board-style="native-css"] .cell.dl .bonus,
body[data-board-style="native-css"] .cell.start .bonus {
  color: rgba(255, 251, 227, 0.96);
}

body[data-board-style="native-css"] .cell:not(.tw):not(.m4):not(.dw):not(.tl):not(.dl):not(.start) .bonus {
  display: none;
}

.coord {
  display: none;
}

body[data-board-style="art"] .coord {
  display: block;
  position: absolute;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(92, 70, 40, 0.92);
  text-shadow: 0 1px 0 rgba(255, 247, 228, 0.45);
  pointer-events: none;
}

body[data-board-style="art"] .coord-top {
  left: 50%;
  top: -1.28rem;
  transform: translateX(-50%);
}

body[data-board-style="art"] .coord-left {
  top: 50%;
  left: -1.18rem;
  transform: translateY(-50%);
}

body[data-board-style="classic-css"] .coord {
  display: block;
  position: absolute;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 246, 220, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

body[data-board-style="classic-css"] .coord-top,
body[data-board-style="classic-css"] .coord-bottom {
  left: 50%;
  transform: translateX(-50%);
}

body[data-board-style="classic-css"] .coord-top {
  top: -1.35rem;
}

body[data-board-style="classic-css"] .coord-bottom {
  bottom: -1.35rem;
}

body[data-board-style="classic-css"] .coord-left,
body[data-board-style="classic-css"] .coord-right {
  top: 50%;
  transform: translateY(-50%);
}

body[data-board-style="classic-css"] .coord-left {
  left: -1.1rem;
}

body[data-board-style="classic-css"] .coord-right {
  right: -1.1rem;
}

body[data-board-style="native-css"] .coord {
  display: block;
  position: absolute;
  z-index: 12;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(0.62rem, 0.98vw, 0.96rem);
  font-weight: 900;
  color: rgba(66, 48, 29, 0.96);
  text-shadow:
    0 1px 0 rgba(255, 247, 220, 0.86),
    0 0 6px rgba(255, 238, 194, 0.24);
  pointer-events: none;
}

body[data-board-style="native-css"] .coord-top,
body[data-board-style="native-css"] .coord-bottom {
  left: 50%;
  transform: translateX(-50%);
}

body[data-board-style="native-css"] .coord-top {
  top: -1.42rem;
}

body[data-board-style="native-css"] .coord-bottom {
  display: none;
}

body[data-board-style="native-css"] .coord-left,
body[data-board-style="native-css"] .coord-right {
  top: 50%;
  transform: translateY(-50%);
}

body[data-board-style="native-css"] .coord-left {
  left: -1.38rem;
}

body[data-board-style="native-css"] .coord-right {
  display: none;
}

.tile {
  width: calc(100% * var(--board-tile-scale));
  height: calc(100% * var(--board-tile-scale));
  border-radius: 3px;
  border: none;
  background: transparent;
  box-shadow: none;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  color: #1f1912;
  margin: auto;
  justify-self: center;
  align-self: center;
  transition:
    transform 120ms ease,
    box-shadow 140ms ease,
    filter 140ms ease;
}

body[data-board-style="art"] .board .tile {
  width: calc(100% * var(--board-tile-scale));
  height: calc(100% * var(--board-tile-scale));
  max-width: none;
  aspect-ratio: auto;
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
}

.tile::before {
  display: none;
}

.tile-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 1px 2px rgba(32, 23, 9, 0.16));
}

body[data-board-style="art"] .board .tile-art {
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  object-position: var(--tile-art-x, 50%) var(--tile-art-y, 50%);
  transform: translateX(var(--tile-art-shift-x, 0px));
  filter: none;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255, 251, 232, 0.98), rgba(244, 233, 190, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(126, 106, 67, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

body[data-board-style="art"] .board .cell[data-col="6"] .tile-art {
  object-position: 50% 50%;
  --tile-art-shift-x: -2px;
}

body[data-board-id="original-green"] .board .cell[data-row="14"][data-col="0"] .tile-art {
  --tile-art-shift-x: 1px;
}

body[data-board-style="native-css"] .board .tile {
  border-radius: 5px;
  filter: drop-shadow(0 3px 4px rgba(45, 27, 10, 0.22));
}

.tile-joker {
  background:
    linear-gradient(180deg, #fff9e9 0%, #f3e7c9 54%, #dfc894 100%);
  box-shadow:
    inset 0 0 0 1px rgba(126, 106, 67, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 6px 12px rgba(55, 37, 15, 0.14);
}

.tile-joker .tile-art {
  opacity: 0.88;
  mix-blend-mode: multiply;
}

body[data-board-style="native-css"] .board .tile-art {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: 50% 50%;
  transform: none;
  filter: none;
  border-radius: 5px;
}

.tile-glyph {
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(1.14rem, 1.98vw, 1.82rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.015em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.tile-joker-letter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(1rem, 1.82vw, 1.68rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  color: #a34747;
  text-shadow:
    0 1px 0 rgba(255, 248, 238, 0.72),
    0 0 3px rgba(255, 235, 214, 0.12);
  pointer-events: none;
}

body[data-board-style="art"] .board .tile.tile-joker-assigned {
  background:
    linear-gradient(180deg, rgba(255, 251, 232, 0.98), rgba(244, 233, 190, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(126, 106, 67, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

body[data-board-style="native-css"] .board .tile.tile-joker-assigned {
  background:
    linear-gradient(180deg, #fffece 0%, #fdfcda 54%, #fef9c9 100%);
  box-shadow:
    inset 0 0 0 1px rgba(126, 106, 67, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 6px 12px rgba(55, 37, 15, 0.14);
}

body[data-board-style="art"] .board .tile.tile-joker-assigned .tile-joker-letter {
  color: #a34747;
  font-weight: 900;
  font-size: clamp(1.08rem, 1.98vw, 1.82rem);
  text-shadow:
    0 1px 0 rgba(255, 248, 238, 0.78),
    0 0 3px rgba(255, 235, 214, 0.12);
}

.tile-joker-rack .tile-glyph,
.tile-joker-rack .tile-joker-letter,
.tile-joker-rack .tile-joker-tag,
.tile-joker-rack .tile-value:not(.tile-joker-value) {
  display: none;
}

.rack-tile .tile-joker-letter {
  font-size: clamp(1rem, 1.55vw, 1.28rem);
}

.tile-joker-tag {
  display: none;
}

.tile-joker-value {
  color: rgba(87, 60, 29, 0.72);
}

body[data-board-style="native-css"] .board .tile.tile-joker-assigned .tile-joker-letter {
  font-size: clamp(1.16rem, 2.08vw, 1.92rem);
}

body[data-board-style="art"] .board .tile.tile-joker-assigned .tile-art,
body[data-board-style="art"] .board .tile.tile-joker-assigned .tile-value,
body[data-board-style="art"] .board .tile.tile-joker-assigned .tile-glyph,
body[data-board-style="art"] .board .tile.tile-joker-assigned .tile-joker-tag {
  display: none;
}

.tile small {
  position: absolute;
  right: 5px;
  bottom: 3px;
  font-size: 0.44em;
  font-weight: 800;
  color: rgba(67, 48, 24, 0.7);
}

.tile-fallback {
  opacity: 0;
  pointer-events: none;
}

.tile-image-missing .tile-fallback {
  opacity: 1;
}

.tile-pending {
  filter: none;
}

.rack-card {
  position: relative;
  z-index: 1;
  width: min(100%, 690px);
  max-width: 690px;
  margin: -2px auto 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  display: grid;
  grid-template-columns: minmax(348px, 472px) minmax(154px, 188px);
  align-items: center;
  justify-content: center;
  justify-items: stretch;
  column-gap: 18px;
  row-gap: 6px;
}

body[data-board-style="native-css"] .rack-card {
  margin-top: -10px;
  padding-top: 4px;
}

.rack.is-masked {
  pointer-events: none;
}

.rack-slot.is-masked {
  border-color: rgba(191, 168, 130, 0.18);
  background:
    linear-gradient(180deg, rgba(23, 30, 27, 0.52), rgba(8, 14, 12, 0.62)),
    rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 244, 218, 0.05);
}

.rack-card .subtle {
  max-width: 32rem;
  color: rgba(223, 206, 182, 0.72);
}

.rack-header {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rack-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 0;
  width: auto;
}

.rack-quick-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(30px, 1fr));
  align-items: center;
  justify-content: stretch;
  align-content: center;
  gap: 5px 4px;
  margin-top: 0;
  width: 100%;
  align-self: center;
  justify-self: stretch;
  transform: translateY(20px);
}

.action-icon-button {
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  color: #efdfc7;
  box-shadow: none;
  transition: transform 120ms ease, opacity 140ms ease, filter 140ms ease;
}

.action-icon-art {
  width: 46px;
  height: auto;
  max-height: 46px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18));
  pointer-events: none;
  user-select: none;
}

.action-label {
  font-size: 0.68rem;
  line-height: 1.05;
  color: rgba(239, 223, 199, 0.9);
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.01em;
  pointer-events: none;
}

.action-icon-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.action-icon-button:disabled {
  opacity: 0.46;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.rack {
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  max-width: 472px;
  min-height: 64px;
  margin: 0;
  padding: 8px 6px 15px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 250, 240, 0.03), rgba(255, 255, 255, 0.01)),
    linear-gradient(180deg, rgba(14, 22, 20, 0.12), rgba(10, 16, 14, 0.02));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  justify-self: start;
  align-items: end;
  contain: layout paint;
  isolation: isolate;
}

.rack::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 2px;
  height: 12px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(204, 171, 126, 0.3), rgba(93, 67, 42, 0.42)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent);
  box-shadow:
    0 5px 10px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 242, 214, 0.15);
  pointer-events: none;
}

.rack::after {
  content: "";
  position: absolute;
  left: 5.5%;
  right: 5.5%;
  bottom: 15px;
  height: 2px;
  border-radius: 999px;
  background: rgba(245, 222, 187, 0.16);
  pointer-events: none;
}

.rack-slot {
  position: relative;
  z-index: 1;
  min-height: 0;
  min-width: 0;
  aspect-ratio: 1 / 1.06;
  border-radius: 10px;
  border: none;
  background: transparent;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 2px 0 4px;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.rack-slot.filled {
  align-items: stretch;
}

.rack-tile {
  width: min(94%, 42px);
  min-height: 0;
  aspect-ratio: 80 / 78;
  padding: 0;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #3b2913;
  position: relative;
  overflow: visible;
  box-shadow: none;
  transition:
    transform 120ms ease,
    box-shadow 140ms ease,
    filter 140ms ease;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.rack-tile.tile-joker,
.held-preview.tile-joker {
  background: transparent;
  box-shadow: none;
}

.rack-tile .tile-art {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(32, 23, 9, 0.14));
}

.rack-tile .tile-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
}

.rack-tile small {
  position: absolute;
  right: 4px;
  bottom: 3px;
  font-size: 0.56rem;
  color: rgba(67, 48, 24, 0.82);
}

.rack-tile.selected {
  transform: translateY(-2px);
  box-shadow:
    0 7px 14px rgba(53, 35, 16, 0.14),
    0 0 0 2px rgba(255, 241, 200, 0.32);
}

.rack-slot.drag-over {
  box-shadow:
    inset 0 -3px 0 rgba(255, 242, 197, 0.7),
    0 0 0 1px rgba(255, 249, 238, 0.2);
}

.rack-slot.preview-gap {
  align-items: center;
  justify-items: center;
}

.rack-slot.preview-gap::after {
  content: "";
  width: 3px;
  height: 72%;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 247, 213, 0.98), rgba(222, 187, 98, 0.82));
  box-shadow:
    0 0 0 1px rgba(255, 247, 213, 0.18),
    0 0 14px rgba(239, 203, 125, 0.42);
}

.rack-tile.held-source,
.cell.held-source .tile {
  opacity: 0;
  pointer-events: none;
}

.rack-tile.dragging,
.cell.dragging .tile {
  opacity: 0.38;
  transform: none;
}

.held-preview {
  position: fixed !important;
  left: -9999px;
  top: -9999px;
  margin: 0 !important;
  pointer-events: none !important;
  z-index: 9999 !important;
  opacity: 1 !important;
  transform: none !important;
  will-change: left, top;
}

.held-preview.rack-tile,
.held-preview.tile {
  box-shadow: none;
}

body.tile-held,
body.tile-held * {
  cursor: grabbing !important;
}

.selected-tile {
  min-height: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.actions button,
.ffsc-link {
  padding: 11px 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(244, 231, 210, 0.96)),
    linear-gradient(180deg, rgba(187, 153, 120, 0.08), rgba(255, 255, 255, 0.03));
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.actions button.primary {
  background:
    linear-gradient(180deg, #49685e, #27453a),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent);
  color: #fff8ec;
}

.rack-actions .actions {
  margin-top: 0;
  gap: 10px;
}

.rack-actions .icon-action {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 0;
  box-shadow:
    0 8px 14px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.quick-action.icon-action {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.rack-actions .icon-action::before {
  font-size: 1.15rem;
  line-height: 1;
  font-weight: 800;
}

.quick-action.icon-action::before {
  font-size: 0.98rem;
}

#validateBtn.icon-action {
  background:
    linear-gradient(180deg, rgba(110, 210, 132, 0.32), rgba(18, 52, 32, 0.92)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent);
  border-color: rgba(117, 214, 138, 0.4);
}

#validateBtn.icon-action::before {
  content: "✓";
  color: #f0ffeb;
}

#undoBtn.icon-action,
#passBtn.icon-action {
  background:
    linear-gradient(180deg, rgba(35, 55, 94, 0.95), rgba(17, 28, 51, 0.96)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent);
  border-color: rgba(106, 145, 214, 0.32);
}

#shuffleBtn.icon-action,
#exchangeBtn.icon-action {
  background:
    linear-gradient(180deg, rgba(55, 83, 74, 0.94), rgba(18, 33, 28, 0.96)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent);
  border-color: rgba(168, 205, 187, 0.22);
}

#undoBtn.icon-action::before {
  content: "↶";
  color: #ebf4ff;
}

#passBtn.icon-action::before {
  content: "»";
  color: #ebf4ff;
}

#shuffleBtn.icon-action::before {
  content: "↭";
  color: #eefdf4;
}

#exchangeBtn.icon-action::before {
  content: "⇄";
  color: #eefdf4;
}

.rack-actions .icon-action:hover {
  transform: translateY(-1px);
}

.rack-actions .icon-action:disabled {
  opacity: 0.46;
  cursor: not-allowed;
  transform: none;
}

.rack-quick-actions .icon-action:hover {
  transform: translateY(-1px);
}

.rack-quick-actions .icon-action:disabled {
  opacity: 0.46;
  cursor: not-allowed;
  transform: none;
}

.sidebar {
  display: grid;
  gap: 14px;
  align-content: start;
}

.sidebar-left {
  grid-column: 1;
}

.sidebar-right {
  grid-column: 3;
}

.sidebar-guide-followup {
  display: grid;
  gap: 14px;
}

.scores {
  padding-top: 16px;
}

.sidebar-left .panel,
.sidebar-right .panel {
  border-radius: 24px;
}

.sidebar-left .panel {
  background:
    linear-gradient(180deg, rgba(56, 94, 80, 0.24), rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, rgba(20, 34, 29, 0.98), rgba(13, 20, 17, 0.98));
  border-color: rgba(142, 195, 168, 0.18);
}

.sidebar-right .panel {
  background:
    linear-gradient(180deg, rgba(84, 62, 44, 0.18), rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, rgba(20, 29, 26, 0.98), rgba(12, 18, 16, 0.98));
  border-color: rgba(212, 181, 136, 0.14);
}

.panel-game-quick {
  gap: 10px;
  padding: 13px;
  background:
    radial-gradient(circle at 14% 0%, rgba(219, 177, 100, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(48, 77, 65, 0.38), rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, rgba(17, 30, 25, 0.99), rgba(9, 16, 14, 0.99)) !important;
  border-color: rgba(226, 190, 130, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 220, 0.1),
    inset 0 0 0 1px rgba(7, 15, 12, 0.28),
    0 16px 30px rgba(0, 0, 0, 0.18);
}

.quick-new-game {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 16px;
  border-radius: 17px;
  letter-spacing: 0.01em;
}

.quick-new-game-plus {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 249, 229, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
  font-size: 1.02rem;
  line-height: 1;
}

.quick-match-list {
  display: grid;
  gap: 9px;
  margin-top: 9px;
}

.quick-match-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 38px;
  padding: 8px 11px;
  border-radius: 14px;
  border: 1px solid rgba(212, 181, 136, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 246, 224, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(13, 24, 20, 0.74);
  color: #f3dfb8;
  font-weight: 750;
  box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.05);
}

.quick-match-row.is-observer,
.quick-match-row.is-local-mode {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 10px;
  align-items: center;
}

.quick-match-row.is-observer .turn-meta-label,
.quick-match-row.is-observer .quick-match-value,
.quick-match-row.is-local-mode .turn-meta-label,
.quick-match-row.is-local-mode .quick-match-value {
  min-width: 0;
}

.quick-match-row.is-observer .quick-match-icon,
.quick-match-row.is-local-mode .quick-match-icon {
  grid-row: 1 / 3;
  align-self: center;
}

.quick-match-row.is-observer .turn-meta-label,
.quick-match-row.is-local-mode .turn-meta-label {
  grid-column: 2;
  line-height: 1.05;
  max-width: 100%;
  white-space: normal;
}

.quick-match-row.is-observer .quick-match-value,
.quick-match-row.is-local-mode .quick-match-value {
  grid-column: 2;
  justify-self: start;
  max-width: 100%;
  width: 100%;
  overflow-wrap: anywhere;
  white-space: pre-line;
  font-size: 0.93rem;
  line-height: 1.18;
}

.quick-match-row-status {
  grid-template-columns: auto minmax(0, 1fr);
}

.quick-match-icon {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  object-position: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter:
    drop-shadow(0 1px 0 rgba(255, 242, 214, 0.1))
    drop-shadow(0 3px 5px rgba(0, 0, 0, 0.22));
}

.quick-match-value,
.quick-turn-banner {
  color: #f9e9c8;
  font-weight: 800;
}

.quick-turn-banner {
  font-size: 1rem;
  line-height: 1.2;
}

.quick-match-icon-bag {
  width: 29px;
  height: 29px;
}

.quick-match-icon-clock {
  width: 28px;
  height: 28px;
}

.quick-match-icon-level {
  width: 29px;
  height: 29px;
}

.score-grid {
  display: grid;
  gap: 7px;
  margin-top: 7px;
}

@media (min-width: 900px) {
  .score-grid[data-online-player-count="5"],
  .score-grid[data-online-player-count="6"] {
    max-height: 424px;
    padding-right: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(222, 176, 95, 0.78) rgba(11, 24, 19, 0.64);
    box-shadow: inset -1px 0 0 rgba(222, 176, 95, 0.16);
  }

  .score-grid[data-online-player-count="5"]::-webkit-scrollbar,
  .score-grid[data-online-player-count="6"]::-webkit-scrollbar {
    width: 8px;
  }

  .score-grid[data-online-player-count="5"]::-webkit-scrollbar-track,
  .score-grid[data-online-player-count="6"]::-webkit-scrollbar-track {
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(222, 176, 95, 0.12), rgba(255, 255, 255, 0.04)),
      rgba(11, 24, 19, 0.72);
  }

  .score-grid[data-online-player-count="5"]::-webkit-scrollbar-thumb,
  .score-grid[data-online-player-count="6"]::-webkit-scrollbar-thumb {
    border: 1px solid rgba(255, 241, 204, 0.24);
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(241, 202, 128, 0.9), rgba(174, 124, 55, 0.88));
  }
}

.endgame-ranking.endgame-ranking--scrollable {
  max-height: min(34dvh, 260px);
  padding-right: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(222, 176, 95, 0.78) rgba(11, 24, 19, 0.64);
  box-shadow: inset -1px 0 0 rgba(222, 176, 95, 0.16);
}

.endgame-ranking.endgame-penalties.endgame-ranking--scrollable {
  max-height: min(32dvh, 250px);
}

@media (min-width: 900px) {
  .endgame-ranking.endgame-ranking--scrollable,
  .endgame-ranking.endgame-penalties.endgame-ranking--scrollable {
    max-height: 326px;
  }
}

.endgame-ranking.endgame-ranking--scrollable::-webkit-scrollbar {
  width: 8px;
}

.endgame-ranking.endgame-ranking--scrollable::-webkit-scrollbar-track {
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(222, 176, 95, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(11, 24, 19, 0.72);
}

.endgame-ranking.endgame-ranking--scrollable::-webkit-scrollbar-thumb {
  border: 1px solid rgba(255, 241, 204, 0.24);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(241, 202, 128, 0.9), rgba(174, 124, 55, 0.88));
}

@media (max-width: 932px) and (orientation: landscape) {
  .endgame-ranking.endgame-ranking--scrollable {
    max-height: min(42dvh, 220px);
  }
}

@media (max-width: 640px) {
  .endgame-ranking.endgame-ranking--scrollable {
    max-height: min(38dvh, 240px);
  }
}

/* P5.2b3 — l'ecran de penalites garde une ligne lisible sur desktop, mais
   passe en grille compacte en portrait afin que nom, chevalet et delta ne
   s'ecrasent plus dans trois colonnes trop serrees. */
@media (max-width: 480px) and (orientation: portrait) {
  .endgame-ranking.endgame-penalties > li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
    width: 100%;
  }

  .endgame-ranking.endgame-penalties .endgame-rank {
    align-self: center;
  }

  .endgame-ranking.endgame-penalties .endgame-player {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 8px;
  }

  .endgame-ranking.endgame-penalties .endgame-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }

  .endgame-ranking.endgame-penalties .endgame-player-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
    align-items: flex-start;
    text-align: left;
  }

  .endgame-ranking.endgame-penalties .endgame-player-copy strong {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.18;
  }

  .endgame-ranking.endgame-penalties .endgame-score-penalty {
    align-self: center;
    min-width: 42px;
    text-align: right;
  }

  .endgame-ranking.endgame-penalties .endgame-penalty-rack {
    max-width: 100%;
    justify-content: flex-start;
  }

  .endgame-ranking.endgame-penalties .endgame-penalty-tile {
    width: 28px;
    height: 27px;
  }
}

.match-welcome-empty {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(218, 187, 122, 0.34);
  background:
    radial-gradient(circle at 16% 10%, rgba(236, 200, 132, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(34, 61, 51, 0.9), rgba(12, 24, 20, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 226, 0.12),
    inset 0 0 0 1px rgba(8, 18, 14, 0.28),
    0 8px 18px rgba(0, 0, 0, 0.16);
}

.match-welcome-title {
  color: #fff0d3;
  font-size: 1.05rem;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.match-welcome-copy {
  margin: 0;
  color: rgba(246, 232, 204, 0.82);
  font-size: 0.9rem;
  line-height: 1.45;
}

.match-welcome-action {
  width: 100%;
  min-height: 46px;
  padding: 0.72rem 1rem;
  border: 1px solid rgba(255, 232, 177, 0.54);
  border-radius: 16px;
  background:
    linear-gradient(180deg, #f5d99c 0%, #d99c46 100%);
  color: #22170d;
  font: inherit;
  font-weight: 900;
  letter-spacing: 0.01em;
  box-shadow:
    inset 0 1px 0 rgba(255, 249, 226, 0.6),
    0 8px 18px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(99, 66, 23, 0.2);
  cursor: pointer;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.match-welcome-action:hover,
.match-welcome-action:focus-visible {
  transform: translateY(-1px);
  filter: saturate(1.06) brightness(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 251, 232, 0.76),
    0 10px 22px rgba(0, 0, 0, 0.22),
    0 0 20px rgba(225, 178, 87, 0.24);
}

.score-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 18px;
  border: 1px solid rgba(212, 184, 127, 0.2);
  background:
    radial-gradient(circle at 10% 14%, rgba(233, 201, 129, 0.14), transparent 24%),
    linear-gradient(180deg, rgba(35, 62, 52, 0.96), rgba(15, 26, 22, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 228, 0.12),
    inset 0 0 0 1px rgba(7, 16, 13, 0.28),
    0 6px 12px rgba(0, 0, 0, 0.12);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease,
    filter 220ms ease;
}

.score-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  min-width: 0;
}

.score-avatar {
  width: 74px;
  height: 82px;
  border-radius: 18px;
  object-fit: cover;
  object-position: center top;
  border: 1px solid rgba(255, 241, 212, 0.18);
  background:
    linear-gradient(180deg, rgba(46, 84, 67, 0.34), rgba(18, 29, 24, 0.28));
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 252, 242, 0.08);
}

.score-card-body {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding-right: 44px;
}

.score-player-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.score-card.active {
  transform: translateX(3px) scale(1.012);
  border-color: rgba(244, 209, 138, 0.76);
  background:
    radial-gradient(circle at 11% 14%, rgba(249, 218, 151, 0.28), transparent 30%),
    radial-gradient(circle at 92% 18%, rgba(142, 195, 168, 0.14), transparent 26%),
    linear-gradient(180deg, rgba(51, 89, 73, 0.98), rgba(20, 36, 31, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 226, 0.24),
    inset 0 0 0 1px rgba(255, 221, 156, 0.12),
    0 0 0 2px rgba(236, 198, 122, 0.24),
    0 0 24px rgba(219, 177, 102, 0.18),
    0 10px 20px rgba(0, 0, 0, 0.18);
  filter: saturate(1.06);
}

.score-card.online-player--forfeited,
.score-card.is-forfeited {
  transform: none;
  opacity: 0.62;
  border-color: rgba(169, 143, 111, 0.2);
  background:
    linear-gradient(180deg, rgba(64, 59, 52, 0.82), rgba(24, 25, 23, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 220, 0.06),
    inset 0 0 0 1px rgba(4, 7, 6, 0.22),
    0 4px 10px rgba(0, 0, 0, 0.1);
  filter: saturate(0.62);
}

.score-card.online-player--forfeited .score-avatar,
.score-card.is-forfeited .score-avatar {
  filter: grayscale(0.65) saturate(0.55);
  opacity: 0.72;
  box-shadow: none;
}

.score-card.online-player--forfeited .score-turn-ring,
.score-card.is-forfeited .score-turn-ring {
  display: none;
}

.online-player-forfeited {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid rgba(194, 154, 126, 0.28);
  border-radius: 999px;
  color: rgba(247, 224, 200, 0.84);
  background:
    linear-gradient(180deg, rgba(116, 60, 55, 0.28), rgba(42, 34, 32, 0.5));
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.online-abandon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(207, 161, 91, 0.46);
  border-radius: 12px;
  color: rgba(255, 239, 213, 0.92);
  background:
    linear-gradient(180deg, rgba(68, 33, 35, 0.72), rgba(24, 22, 20, 0.96)),
    #211a17;
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 198, 0.12),
    0 8px 18px rgba(0, 0, 0, 0.16),
    0 0 0 1px rgba(11, 8, 7, 0.24);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.1;
  cursor: pointer;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    filter 140ms ease;
}

.online-abandon-action[hidden] {
  display: none !important;
}

.online-abandon-action:hover {
  transform: translateY(-1px);
  border-color: rgba(226, 178, 104, 0.62);
  filter: brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 208, 0.16),
    0 10px 20px rgba(0, 0, 0, 0.2),
    0 0 16px rgba(176, 96, 74, 0.14);
}

.online-abandon-action:focus-visible {
  outline: 2px solid rgba(236, 198, 122, 0.9);
  outline-offset: 3px;
}

.online-abandon-action:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  transform: none;
  filter: grayscale(0.25);
}

.score-card.is-placeholder {
  border-color: rgba(205, 177, 132, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 252, 244, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(13, 22, 19, 0.56);
}

.score-card.is-placeholder .score-avatar {
  object-fit: contain;
  padding: 5px;
  background:
    radial-gradient(circle at 50% 28%, rgba(240, 222, 184, 0.18), transparent 58%),
    rgba(10, 18, 16, 0.78);
}

.score-card.is-placeholder .score-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.08;
}

.score-name {
  display: -webkit-box;
  color: rgba(255, 238, 210, 0.92);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.12;
  max-width: none;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: normal;
  overflow-wrap: anywhere;
}

.score-player-copy .subtle {
  color: rgba(241, 228, 203, 0.78);
  font-size: 0.8rem;
}

.score-player-meta {
  display: -webkit-box;
  min-width: 0;
  color: rgba(241, 228, 203, 0.68);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.12;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow-wrap: anywhere;
}

/* ONLINE-0C-MULTI4-E.3-C — pays (texte, .score-player-meta existant) +
   icone appareil (image) sur une meme ligne, dans les cartes MATCH online.
   Chacun des deux est independant et optionnel (voir renderOnlinePlayersSnapshot). */
.score-player-meta-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.score-player-country-flag {
  width: 18px;
  height: 13.5px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(247, 241, 227, 0.12);
}

.score-player-device-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: 0.92;
}

.score-player-device-icon[data-device-type="desktop"],
.score-player-device-icon[data-device-type="laptop"] {
  width: 20px;
  height: 20px;
}

.local-profile-device-field small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.3;
}

.score-player-copy .score-ai-style {
  display: -webkit-box;
  color: rgba(229, 196, 126, 0.88);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.16;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

.score-value {
  font-size: 1.55rem;
  line-height: 0.92;
  color: #fff2dc;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.score-value-stack {
  position: absolute;
  top: 14px;
  right: 12px;
  display: grid;
  justify-items: end;
  gap: 13px;
  min-width: 44px;
}

.score-turn-ring {
  --turn-ring-progress: 360deg;
  --turn-ring-track: rgba(255, 236, 190, 0.18);
  --turn-ring-fill: #f1b95f;
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: #fff4d9;
  background:
    radial-gradient(circle at 50% 50%, rgba(22, 43, 36, 0.98) 0 43%, transparent 44%),
    conic-gradient(var(--turn-ring-fill) var(--turn-ring-progress), var(--turn-ring-track) 0deg),
    linear-gradient(145deg, rgba(255, 239, 190, 0.22), rgba(0, 0, 0, 0.2));
  box-shadow:
    inset 0 1px 1px rgba(255, 249, 225, 0.18),
    inset 0 -2px 4px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(241, 185, 95, 0.16),
    0 4px 9px rgba(0, 0, 0, 0.22);
  transition: --turn-ring-progress 0.9s linear;
}

.score-turn-ring::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  border: 1px solid rgba(255, 239, 198, 0.16);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.24);
  pointer-events: none;
}

.score-card.active .score-turn-ring {
  --turn-ring-track: rgba(255, 237, 199, 0.24);
  --turn-ring-fill: #f4bd67;
  box-shadow:
    inset 0 1px 1px rgba(255, 249, 225, 0.22),
    inset 0 -2px 4px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 220, 148, 0.24),
    0 0 14px rgba(231, 170, 78, 0.24),
    0 5px 11px rgba(0, 0, 0, 0.24);
}

#validateBtn {
  grid-column: 1;
  grid-row: 1;
}

#shuffleBtn {
  grid-column: 3;
  grid-row: 1;
}

#undoBtn {
  grid-column: 5;
  grid-row: 1;
}

#passBtn {
  grid-column: 2;
  grid-row: 2;
}

#exchangeBtn {
  grid-column: 4;
  grid-row: 2;
}

.score-turn-ring-value {
  position: relative;
  z-index: 1;
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff2d0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.score-turn-ring.is-warning,
.score-card.active .score-turn-ring.is-warning {
  --turn-ring-fill: #df1f1f;
  --turn-ring-track: rgba(255, 205, 205, 0.28);
  color: #ffe2cc;
  box-shadow:
    inset 0 1px 1px rgba(255, 249, 225, 0.22),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 92, 92, 0.56),
    0 0 18px rgba(223, 31, 31, 0.52),
    0 0 30px rgba(223, 31, 31, 0.2),
    0 5px 11px rgba(0, 0, 0, 0.26);
  animation: turn-ring-warning-pulse 0.86s ease-in-out infinite;
}

.score-turn-ring.is-warning .score-turn-ring-value,
.score-card.active .score-turn-ring.is-warning .score-turn-ring-value {
  color: #fff0d8;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.55),
    0 0 10px rgba(223, 31, 31, 0.62);
}

@keyframes turn-ring-warning-pulse {
  0%,
  100% {
    filter: brightness(1);
    transform: scale(1);
  }
  50% {
    filter: brightness(1.23);
    transform: scale(1.045);
  }
}

@media (prefers-reduced-motion: reduce) {
  .score-turn-ring.is-warning,
  .score-card.active .score-turn-ring.is-warning {
    animation: none;
    filter: brightness(1.12);
  }
}

.score-rack {
  color: rgba(252, 236, 198, 0.96);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.lexicon-loading {
  min-height: 116px;
  margin-top: 10px;
  padding: 16px 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(209, 178, 134, 0.18);
  background:
    linear-gradient(180deg, rgba(246, 221, 180, 0.1), rgba(255, 255, 255, 0.025)),
    linear-gradient(180deg, rgba(18, 29, 25, 0.98), rgba(12, 18, 16, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 229, 0.08),
    inset 0 -10px 18px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(7, 14, 12, 0.32);
}

.lexicon-loading-copy {
  display: grid;
  gap: 6px;
}

.lexicon-loading-title {
  color: #f3e4c5;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.lexicon-loading-detail {
  color: rgba(239, 225, 196, 0.8);
  font-size: 0.88rem;
  line-height: 1.4;
}

.lexicon-loading-progress {
  position: relative;
  margin-top: 14px;
  height: 16px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(110, 92, 57, 0.55);
  background:
    linear-gradient(180deg, rgba(8, 14, 13, 0.9), rgba(21, 33, 29, 0.92));
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.34),
    inset 0 -1px 1px rgba(255, 243, 215, 0.05),
    0 10px 18px rgba(0, 0, 0, 0.14);
}

.lexicon-loading-progress::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 248, 230, 0.08), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, rgba(53, 68, 61, 0.34), rgba(14, 22, 20, 0.12));
  pointer-events: none;
}

.lexicon-loading-fill {
  position: relative;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 247, 218, 0.95) 0%, rgba(232, 202, 122, 0.98) 18%, rgba(187, 154, 76, 0.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 240, 0.65),
    inset 0 -2px 4px rgba(99, 70, 17, 0.22),
    0 0 0 1px rgba(126, 101, 42, 0.18);
  transition: width 220ms ease-out;
}

.lexicon-loading-fill::before {
  content: '';
  position: absolute;
  inset: 1px 1px 7px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.04));
  opacity: 0.95;
}

.lexicon-loading-fill::after {
  content: '';
  position: absolute;
  inset: -30% auto -30% -32%;
  width: 38%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 249, 228, 0.42), rgba(255, 255, 255, 0));
  transform: skewX(-20deg);
  animation: lexicon-loading-sheen 1.5s ease-in-out infinite;
}

.message {
  min-height: 116px;
  margin-top: 10px;
  padding: 14px 15px;
  border-radius: 18px;
  border: 1px solid rgba(209, 178, 134, 0.16);
  background:
    linear-gradient(180deg, rgba(243, 214, 174, 0.08), rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, rgba(18, 29, 25, 0.98), rgba(12, 18, 16, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 221, 0.06),
    inset 0 0 0 1px rgba(8, 15, 13, 0.28);
  line-height: 1.5;
  color: #f2dc97;
}

.lexicon-retry-button {
  width: 100%;
  min-height: 38px;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(232, 202, 122, 0.42);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 246, 214, 0.14), rgba(215, 168, 96, 0.05)),
    rgba(13, 31, 25, 0.96);
  color: #fff0c4;
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 229, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.18);
}

.lexicon-retry-button:hover,
.lexicon-retry-button:focus-visible {
  border-color: rgba(255, 225, 161, 0.66);
  background:
    linear-gradient(180deg, rgba(255, 246, 214, 0.2), rgba(215, 168, 96, 0.08)),
    rgba(18, 43, 34, 0.98);
  outline: none;
}

.message[hidden],
#lastMoveSummary[hidden],
.lexicon-loading[hidden],
.lexicon-retry-button[hidden] {
  display: none !important;
}

@keyframes lexicon-loading-sheen {
  0% {
    transform: translateX(-120%) skewX(-20deg);
    opacity: 0;
  }

  18% {
    opacity: 0.95;
  }

  62% {
    opacity: 0.95;
  }

  100% {
    transform: translateX(320%) skewX(-20deg);
    opacity: 0;
  }
}

#lastMoveSummary {
  display: block;
  margin-top: 10px;
  font-weight: 700;
  color: rgba(240, 223, 195, 0.9);
}

.history {
  margin: 8px 0 0;
  padding-left: 0;
  list-style: none;
  max-height: 176px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(229, 196, 132, 0.54) rgba(10, 20, 17, 0.48);
  scrollbar-width: thin;
  display: grid;
  gap: 7px;
}

.history::-webkit-scrollbar {
  width: 8px;
}

.history::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(10, 20, 17, 0.48);
}

.history::-webkit-scrollbar-thumb {
  border: 2px solid rgba(10, 20, 17, 0.48);
  border-radius: 999px;
  background: rgba(229, 196, 132, 0.62);
}

.history li {
  padding: 9px 11px;
  border-radius: 14px;
  border: 1px solid rgba(159, 205, 180, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, rgba(32, 55, 47, 0.96), rgba(18, 31, 26, 0.98));
  color: #f0e5d2;
  font-size: 0.84rem;
  line-height: 1.3;
  box-shadow: inset 0 1px 0 rgba(255, 243, 221, 0.04);
}

.history li.history-social {
  border-color: rgba(236, 201, 129, 0.26);
  background:
    linear-gradient(180deg, rgba(244, 214, 130, 0.09), rgba(255, 255, 255, 0.025)),
    linear-gradient(180deg, rgba(34, 56, 46, 0.96), rgba(18, 31, 26, 0.98));
  color: #fff1d7;
}

.panel-history:not(.is-expanded) .history {
  max-height: 176px;
  overflow: hidden;
}

.panel-history:not(.is-expanded) .history li:nth-child(n+4) {
  display: none;
}

.panel-history.is-expanded .history {
  max-height: min(32vh, 260px);
  overflow-y: auto;
  overflow-x: hidden;
}

.panel-history.is-observer .history {
  max-height: min(24vh, 176px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.panel-history.is-observer.is-expanded .history {
  max-height: min(26vh, 184px);
  overflow-y: auto;
  overflow-x: hidden;
}

.history-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 10px;
  min-height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(212, 181, 136, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 244, 216, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(11, 22, 19, 0.7);
  color: rgba(244, 230, 204, 0.88);
  font-family: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 140ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.history-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(224, 190, 130, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 244, 216, 0.13), rgba(255, 255, 255, 0.03)),
    rgba(17, 31, 26, 0.82);
}

.panel-tools {
  gap: 16px;
}

.panel-tools .ffsc-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 16px;
  text-align: center;
  white-space: normal;
  line-height: 1.2;
}

.observer-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.observer-controls[hidden] {
  display: none !important;
}

.observer-controls button {
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(212, 181, 136, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 244, 216, 0.1), rgba(255, 255, 255, 0.025)),
    rgba(15, 30, 25, 0.78);
  color: rgba(244, 230, 204, 0.92);
  font-size: 0.78rem;
  font-weight: 800;
}

.observer-controls button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(224, 190, 130, 0.42);
}

.guide-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(219, 188, 145, 0.22);
  appearance: none;
  background:
    linear-gradient(180deg, rgba(255, 244, 216, 0.1), rgba(255, 255, 255, 0.03)),
    linear-gradient(180deg, rgba(16, 28, 23, 0.96), rgba(9, 17, 14, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 219, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.14);
  color: rgba(244, 230, 204, 0.9);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    transform 120ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.guide-link:hover {
  transform: translateY(-1px);
  border-color: rgba(224, 190, 130, 0.42);
  color: #fff3db;
}

.top-guide-button {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  min-height: 42px;
  padding: 10px 18px;
  border-color: rgba(246, 203, 111, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 246, 214, 0.96), rgba(229, 176, 78, 0.96)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    inset 0 -1px 0 rgba(91, 57, 13, 0.2),
    0 10px 20px rgba(0, 0, 0, 0.2),
    0 0 18px rgba(229, 182, 88, 0.22);
  color: #251707;
  font-size: 0.78rem;
  text-shadow: 0 1px 0 rgba(255, 244, 214, 0.45);
}

.top-guide-button:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 220, 142, 0.86);
  background:
    linear-gradient(180deg, rgba(255, 250, 229, 1), rgba(241, 190, 88, 1)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent);
  color: #1b1105;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.64),
    inset 0 -1px 0 rgba(91, 57, 13, 0.18),
    0 12px 22px rgba(0, 0, 0, 0.22),
    0 0 24px rgba(239, 197, 105, 0.32);
}

.top-guide-button:focus-visible {
  outline: 3px solid rgba(255, 239, 191, 0.66);
  outline-offset: 3px;
}

.top-guide-button.is-guide-hint-visible {
  animation: topGuideCtaGlow 1.55s ease-in-out 9;
}

.top-guide-button.is-guide-hint-visible::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -20% -45%;
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255, 255, 255, 0.05) 31%,
      rgba(255, 252, 224, 0.38) 43%,
      rgba(255, 255, 255, 0.88) 50%,
      rgba(255, 232, 148, 0.36) 57%,
      rgba(255, 255, 255, 0.04) 69%,
      transparent 100%
    );
  pointer-events: none;
  transform: translateX(-120%) skewX(-18deg);
  animation: topGuideCtaSheen 1.85s ease-in-out 7;
}

.top-guide-button.is-guide-hint-visible::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -5px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 221, 123, 0.34), transparent 68%);
  opacity: 0;
  pointer-events: none;
  animation: topGuideCtaHalo 1.55s ease-in-out 9;
}

@keyframes topGuideCtaGlow {
  0%,
  100% {
    transform: none;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.52),
      inset 0 -1px 0 rgba(91, 57, 13, 0.2),
      0 10px 20px rgba(0, 0, 0, 0.2),
      0 0 18px rgba(229, 182, 88, 0.28),
      0 0 0 0 rgba(255, 218, 118, 0.2);
  }
  45% {
    transform: none;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 -1px 0 rgba(91, 57, 13, 0.18),
      0 12px 24px rgba(0, 0, 0, 0.24),
      0 0 0 3px rgba(255, 235, 168, 0.2),
      0 0 26px rgba(255, 222, 134, 0.72),
      0 0 46px rgba(235, 174, 65, 0.44);
  }
}

@keyframes topGuideCtaHalo {
  0%,
  100% {
    opacity: 0;
    transform: none;
  }
  45% {
    opacity: 1;
    transform: none;
  }
}

@keyframes topGuideCtaSheen {
  0%,
  100% {
    opacity: 0;
    transform: translateX(-120%) skewX(-18deg);
  }
  14% {
    opacity: 0.95;
  }
  52% {
    opacity: 0;
    transform: translateX(120%) skewX(-18deg);
  }
}

@media (max-width: 1180px) {
  .site-header,
  .account-area,
  .profile-menu,
  .account-menu,
  .account-menu__connected,
  .platform-nav,
  .platform-nav-more {
    position: relative;
    z-index: 7000;
  }

  .platform-nav-more__dropdown,
  .profile-dropdown,
  .account-menu__dropdown {
    z-index: 9100;
  }

  .panel-history.is-expanded .history {
    max-height: min(34vh, 280px);
  }
}

@media (max-width: 1180px) and (min-width: 700px) {
  .endgame-screen {
    align-items: start;
    place-items: start center;
    padding-top: clamp(78px, 11dvh, 118px);
    padding-bottom: 18px;
    overflow: auto;
  }

  .endgame-card {
    max-height: calc(100dvh - clamp(96px, 13dvh, 136px));
    margin: 0 auto;
  }
}

@media (max-width: 1400px) and (min-width: 1280px) {
  .layout {
    grid-template-columns: minmax(220px, 270px) minmax(760px, 1fr) minmax(180px, 220px);
    gap: 8px;
  }

  .board-panel {
    padding-inline: 8px;
  }
}

@media (max-width: 899px) {

  body[data-board-style="native-css"] .rack-card {
    margin-top: 6px;
    padding-top: 8px;
  }

  .rack-card {
    width: min(100%, 544px);
    max-width: 544px;
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 8px;
  }

  .rack {
    width: 100%;
    margin: 0 auto;
    justify-self: center;
  }

  .rack-quick-actions {
    grid-template-columns: repeat(5, minmax(48px, 1fr));
    gap: 8px;
    width: min(100%, 450px);
    margin-top: 0;
    transform: none;
  }
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .platform-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 6px;
  }

  .site-game-title {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .online-mode-entry {
    grid-column: 1;
    grid-row: 4;
    justify-self: start;
  }

  .notification-center {
    position: relative;
    grid-column: 2;
    grid-row: 4;
    justify-self: end;
    margin-left: 0;
    top: auto;
    left: auto;
    transform: none;
  }

  .notification-panel {
    left: var(--notifications-panel-left, calc(100vw - 180px));
    transform: translateX(-50%);
  }

  .game-controls-bar {
    grid-column: 1 / -1;
    grid-row: 5;
    justify-self: end;
  }

  .account-area {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 1279px) and (min-width: 1181px) {
  .layout {
    grid-template-columns: minmax(206px, 250px) minmax(700px, 1fr) minmax(174px, 220px);
    gap: 8px;
    margin-top: 14px;
  }

  .board-panel {
    padding: 4px 8px 24px;
  }

  .panel {
    padding: 14px;
  }

  .rack-card {
    width: min(100%, 660px);
    max-width: 660px;
    grid-template-columns: minmax(320px, 1fr) minmax(150px, 174px);
    column-gap: 12px;
  }

  .rack-quick-actions {
    transform: translateY(8px);
  }
}

@media (max-width: 1180px) and (min-width: 900px) {
  html,
  body {
    overflow-x: hidden;
  }

  .site-header {
    grid-template-columns: minmax(238px, auto) minmax(0, 1fr) auto;
    position: relative;
    z-index: 9000;
    gap: 5px 10px;
    margin-bottom: 6px;
    padding: 8px 12px;
    border-radius: 18px;
  }

  .platform-brand__icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
  }

  .platform-brand__copy {
    gap: 2px;
    min-height: 42px;
  }

  .platform-brand__name {
    font-size: clamp(0.9rem, 1.42vw, 1.04rem);
    letter-spacing: 0.095em;
  }

  .platform-brand__tagline {
    font-size: 0.68rem;
    letter-spacing: 0.045em;
  }

  .platform-nav {
    grid-column: 2;
    grid-row: 1;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 1px;
  }

  .platform-nav-more {
    display: none;
  }

  .platform-nav__item {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 4px 5px 5px;
    border-radius: 6px;
    font-size: clamp(0.6rem, 0.72vw, 0.68rem);
    letter-spacing: 0;
  }

  .platform-nav-more__summary {
    min-height: 34px;
    padding: 4px 8px 5px;
    border-radius: 7px;
    font-size: clamp(0.66rem, 0.9vw, 0.72rem);
  }

  .platform-nav-more__dropdown {
    min-width: 154px;
    padding: 7px;
  }

  .platform-nav-more__item {
    min-height: 38px;
    padding: 7px 8px;
    font-size: 0.78rem;
  }

  .site-game-title {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .site-game-title h1 {
    font-size: clamp(1.34rem, 2.22vw, 1.72rem);
  }

  .site-game-title .eyebrow {
    display: none;
  }

  .online-mode-entry {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  .notification-center {
    position: relative;
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    align-self: center;
    margin-left: clamp(8px, 1.2vw, 16px);
    top: auto;
    left: auto;
    transform: none;
  }

  .online-mode-button {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0.7rem;
  }

  .online-mode-button__icon {
    width: 18px;
    height: 18px;
  }

  .game-controls-bar {
    grid-column: 2 / 4;
    grid-row: 2;
    justify-self: end;
    padding: 0;
  }

  .account-area {
    grid-column: 3;
    grid-row: 1;
    z-index: 9200;
  }

  .platform-nav-more__dropdown,
  .profile-dropdown {
    z-index: 9400;
  }

  .profile-trigger {
    min-width: 150px;
    padding: 4px 7px 4px 4px;
    border-radius: 12px;
  }

  .profile-avatar {
    width: 38px;
    height: 38px;
  }

  .profile-copy strong {
    font-size: 0.9rem;
  }

  .profile-copy span {
    font-size: 0.7rem;
  }

  .sound-toggle {
    min-width: 130px;
    gap: 7px;
    padding: 7px 11px;
  }

  .sound-toggle-icon img {
    width: 19px;
    height: 19px;
  }

  .sound-toggle-text {
    font-size: 0.68rem;
  }

  .top-guide-button {
    min-height: 36px;
    padding: 8px 14px;
    font-size: 0.7rem;
  }

  .layout {
    grid-template-columns: clamp(180px, 18vw, 212px) minmax(0, 1fr) clamp(148px, 16vw, 190px);
    gap: 6px;
    margin-top: 7px;
  }

  .sidebar {
    gap: 8px;
  }

  .board-panel {
    grid-column: 2;
    order: initial;
    padding: 0 4px 12px;
    border-radius: 24px;
  }

  .sidebar-left {
    grid-column: 1;
    order: initial;
  }

  .sidebar-right {
    grid-column: 3;
    order: initial;
  }

  .panel {
    padding: 10px;
    border-radius: 18px;
  }

  .sidebar-left .panel,
  .sidebar-right .panel {
    border-radius: 18px;
  }

  .panel-head {
    gap: 6px;
  }

  .panel-head h2 {
    font-size: 1rem;
  }

  .match-title-icon {
    width: 18px;
    height: 18px;
  }

  .score-card {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 5px;
    padding: 7px 7px;
  }

  .score-avatar {
    width: 42px;
    height: 48px;
    border-radius: 12px;
  }

  .score-card-body {
    gap: 3px;
    padding-right: 24px;
  }

  .score-card-head {
    padding-right: 0;
  }

  .score-name {
    font-size: 0.72rem;
    line-height: 1.08;
  }

  .score-player-copy .subtle {
    font-size: 0.62rem;
    line-height: 1.08;
  }

  .score-player-copy .score-ai-style {
    font-size: 0.58rem;
    line-height: 1.08;
  }

  .score-value-stack {
    top: 8px;
    right: 6px;
    min-width: 24px;
  }

  .score-value {
    font-size: 0.98rem;
  }

  body[data-board-style="native-css"] .board-stage {
    width: min(100%, calc(100dvh - 176px), 744px);
    margin: 8px auto 2px;
    --ms-celebration-board-radius: 22px;
    border-radius: 22px;
  }

  .board-stage {
    width: min(100%, calc(100dvh - 176px), 744px);
    margin: 0 auto -4px;
  }

  body[data-board-style="native-css"] .rack-card {
    margin-top: 4px;
    padding-top: 0;
  }

  .rack-card {
    width: min(100%, 680px);
    max-width: 680px;
    grid-template-columns: minmax(300px, 1fr) minmax(212px, 228px);
    align-items: end;
    justify-items: stretch;
    column-gap: 12px;
    row-gap: 2px;
  }

  .rack {
    max-width: 430px;
    min-height: 58px;
    padding: 7px 5px 13px;
  }

  .rack-quick-actions {
    grid-template-columns: repeat(5, minmax(36px, 1fr));
    align-items: center;
    justify-items: center;
    gap: 2px;
    width: 100%;
    align-self: end;
    transform: translateY(2px);
  }

  .rack-quick-actions #validateBtn,
  .rack-quick-actions #shuffleBtn,
  .rack-quick-actions #undoBtn,
  .rack-quick-actions #passBtn,
  .rack-quick-actions #exchangeBtn {
    grid-column: auto;
    grid-row: auto;
  }

  .rack-quick-actions #validateBtn {
    order: 1;
  }

  .rack-quick-actions #shuffleBtn {
    order: 2;
  }

  .rack-quick-actions #undoBtn {
    order: 3;
  }

  .rack-quick-actions #passBtn {
    order: 4;
  }

  .rack-quick-actions #exchangeBtn {
    order: 5;
  }

  .action-icon-art {
    width: 32px;
    max-height: 32px;
  }

  .action-label {
    font-size: 0.55rem;
  }

  .score-grid {
    gap: 7px;
  }

  .score-card {
    gap: 6px;
    padding: 6px 7px;
    border-radius: 14px;
  }

  .score-avatar {
    width: 46px;
    height: 52px;
    border-radius: 13px;
  }

  .score-card-body {
    gap: 4px;
    padding-right: 0;
  }

  .score-card-head {
    padding-right: 28px;
  }

  .score-name {
    font-size: 0.72rem;
    line-height: 1.08;
  }

  .score-player-copy .subtle {
    font-size: 0.64rem;
    line-height: 1.1;
  }

  .score-player-copy .score-ai-style {
    font-size: 0.61rem;
    line-height: 1.08;
  }

  .score-rack {
    display: block;
    white-space: nowrap;
    font-size: 0.64rem;
    line-height: 1.05;
    letter-spacing: 0;
  }

  .score-value-stack {
    top: 10px;
    right: 7px;
    gap: 8px;
    min-width: 28px;
  }

  .score-value {
    font-size: 1.06rem;
  }

  .score-turn-ring {
    width: 32px;
    height: 32px;
  }

  .match-timer__icon {
    width: 14px;
    height: 14px;
  }

  .scores .panel-head--with-icon {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 4px;
    row-gap: 0;
    align-items: center;
  }

  .scores .panel-head--with-icon h2 {
    min-width: 0;
    font-size: 0.82rem;
    letter-spacing: 0.045em;
    white-space: nowrap;
  }

  .scores .match-timer {
    grid-column: auto;
    justify-self: end;
    margin-top: 0;
    gap: 3px;
    padding: 2px 5px;
    border: 1px solid rgba(215, 168, 96, 0.28);
    border-radius: 999px;
    background: rgba(16, 28, 23, 0.76);
    box-shadow:
      inset 0 1px 0 rgba(255, 243, 219, 0.06),
      0 6px 12px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
  }

  .scores .match-timer .game-timer-label {
    font-size: 0.58rem;
    letter-spacing: 0;
  }

  .scores .match-timer .game-timer-value {
    font-size: 0.78rem;
  }

  .quick-new-game {
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 14px;
  }

  .quick-match-list {
    gap: 6px;
  }

  .quick-match-row {
    gap: 6px;
    min-height: 32px;
    padding: 6px 7px;
    border-radius: 12px;
  }

  #turnMeta.quick-match-row {
    grid-template-columns: 24px max-content minmax(42px, 1fr);
  }

  #turnMeta .turn-meta-label {
    white-space: nowrap;
    font-size: 0.82rem;
    line-height: 1;
  }

  #turnMeta .quick-match-value {
    justify-self: end;
    text-align: right;
    white-space: nowrap;
    font-size: 0.82rem;
    line-height: 1;
  }

  .quick-match-icon {
    width: 24px;
    height: 24px;
  }

  .quick-match-value,
  .quick-turn-banner {
    font-size: 0.86rem;
  }

  .match-welcome-empty {
    gap: 8px;
    padding: 12px;
    border-radius: 16px;
  }

  .match-welcome-title {
    font-size: 0.95rem;
  }

  .match-welcome-copy {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 0.8rem;
    line-height: 1.28;
  }

  .match-welcome-action {
    min-height: 38px;
    padding: 0.6rem 0.75rem;
    border-radius: 14px;
  }

  .panel-lexicon {
    padding: 10px;
  }

  .panel-lexicon .enriched-word-panel {
    height: 146px;
    min-height: 146px;
    padding: 8px 10px;
    overflow: hidden;
    font-size: 0.7rem;
    line-height: 1.2;
  }

  .panel-lexicon .enriched-word-panel[data-state="default"] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 3px;
  }

  .panel-lexicon .enriched-word-panel[data-state="default"] .enriched-word-eyebrow {
    font-size: 0.88rem;
    line-height: 1.05;
  }

  .panel-lexicon .enriched-word-panel[data-state="default"] .enriched-word-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.82rem;
    line-height: 1.15;
  }

  .panel-lexicon .enriched-word-panel:not([data-state="default"]) {
    overflow: auto;
  }

  .panel-lexicon .enriched-word-content {
    font-size: 0.72rem;
    line-height: 1.2;
  }

  .panel-lexicon .enriched-word-definition,
  .panel-lexicon .enriched-word-message,
  .panel-lexicon .enriched-word-notes,
  .panel-lexicon .enriched-word-compact,
  .panel-lexicon .enriched-word-missing-inline {
    font-size: 0.72rem;
    line-height: 1.22;
  }

  .panel-lexicon .enriched-word-detail {
    font-size: 0.66rem;
    line-height: 1.18;
  }

  .panel-lexicon .enriched-word-agora-actions {
    margin-top: 6px;
  }

  .panel-lexicon .enriched-word-agora-link {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.68rem;
  }

  .panel-status .panel-head .subtle,
  .panel-history .panel-head .subtle {
    display: none;
  }

  .panel-status .message {
    min-height: 58px;
    padding: 9px 10px;
    font-size: 0.83rem;
    line-height: 1.28;
  }

  #lastMoveSummary {
    font-size: 0.76rem;
  }

  .history {
    gap: 6px;
    max-height: 116px;
  }

  .history li {
    padding: 8px 9px;
    font-size: 0.78rem;
    line-height: 1.25;
  }

  .panel-history:not(.is-expanded) .history {
    max-height: 116px;
  }

  .history-toggle,
  .history-export-action {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 0.78rem;
  }

  .panel-tools .panel-head .subtle {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.82rem;
    line-height: 1.25;
  }

  .panel-tools .ffsc-link {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 0.83rem;
  }

  .panel-history.is-expanded .history {
    max-height: min(30vh, 240px);
  }
}

@media (max-width: 1099px) and (min-width: 900px) {
  .layout {
    grid-template-columns: clamp(172px, 18vw, 196px) minmax(0, 1fr) clamp(124px, 14vw, 156px);
    gap: 5px;
  }

  .board-panel {
    padding-inline: 2px;
  }

  .panel {
    padding: 8px;
  }

  .platform-nav > .platform-nav__item {
    display: none;
  }

  .platform-nav > a.platform-nav__item {
    display: inline-flex;
  }

  .platform-nav-more {
    display: block;
  }

  .platform-nav-more__item--mobile-only,
  .platform-nav-more__item--primary,
  .platform-nav-more__item--download {
    display: block;
  }

  .platform-nav-more__dropdown {
    position: fixed;
    top: 62px;
    right: 14px;
    width: min(280px, calc(100vw - 28px));
    max-height: calc(100dvh - 76px);
    overflow: auto;
  }
}

@media (max-width: 1180px) and (min-width: 1140px) {
  .platform-nav > .platform-nav__item:nth-of-type(6) {
    display: inline-flex;
  }

  .platform-nav-more__item:nth-child(2) {
    display: none;
  }
}

@media (max-width: 1180px) and (min-width: 1160px) {
  .platform-nav > .platform-nav__item:nth-of-type(7) {
    display: inline-flex;
  }

  .platform-nav-more__item:nth-child(3) {
    display: none;
  }
}

@media (max-width: 1180px) and (min-width: 1180px) {
  .platform-nav > .platform-nav__item:nth-of-type(n+8) {
    display: inline-flex;
  }

  .platform-nav-more {
    display: none;
  }

  .platform-nav {
    gap: 2px;
  }

  .platform-nav__item {
    padding-inline: 7px;
    font-size: 0.7rem;
  }
}

@media (max-width: 920px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .board-panel {
    grid-column: 1;
    order: 1;
  }

  .sidebar-left {
    grid-column: 1;
    order: 2;
  }

  .sidebar-right {
    grid-column: 1;
    order: 3;
  }
}

@media (max-width: 820px) {
  .app-shell {
    width: min(100vw - 16px, 1440px);
  }

  .site-header {
    grid-template-columns: 1fr auto;
    gap: 9px;
    padding: 10px 12px;
  }

  .platform-brand__icon {
    width: 48px;
    height: 48px;
  }

  .platform-brand__copy {
    gap: 3px;
    min-height: 48px;
  }

  .platform-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    padding-bottom: 2px;
  }

  .platform-nav__item {
    padding: 6px 9px 7px;
    font-size: 0.82rem;
  }

  .topbar-actions,
  .topbar-meta {
    justify-items: stretch;
    justify-content: flex-start;
  }

  .game-controls-bar {
    grid-column: 1 / -1;
    grid-row: 5;
    justify-self: stretch;
  }

  .online-mode-entry {
    grid-column: 1;
    grid-row: 4;
    justify-self: start;
  }

  .notification-center {
    grid-column: 2;
    grid-row: 4;
    justify-self: end;
    margin-left: 0;
  }

  .online-header-rules-btn {
    display: none !important;
  }

  .notification-bell {
    width: 34px;
    height: 34px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .notification-bell:hover,
  .notification-bell:focus-visible,
  .notification-center.is-open .notification-bell {
    transform: none;
    border-color: transparent;
    box-shadow: none;
  }

  .notification-bell img {
    width: 25px;
    height: 25px;
  }

  .account-area {
    grid-column: 2;
    grid-row: 1;
  }

  .profile-trigger {
    min-width: 160px;
  }

  .site-game-title {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .panel-history.is-expanded .history {
    max-height: min(32vh, 240px);
  }

  .panel-history.is-observer.is-expanded .history {
    max-height: min(24vh, 168px);
  }

  .topbar,
  .board-panel,
  .panel {
    border-radius: 22px;
  }

  .topbar,
  .board-header,
  .rack-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar {
    grid-template-columns: 1fr;
  }

  .topbar-actions,
  .topbar-meta {
    justify-items: stretch;
    justify-content: flex-start;
  }

  .topbar-timing {
    justify-content: flex-start;
  }

  .rack-actions {
    grid-template-columns: 1fr;
  }

  .confirm-modal-card.setup-modal-card {
    width: min(96vw, 760px);
    min-height: auto;
    overflow: auto;
  }

  .setup-field-grid,
  .setup-field-grid--compact {
    grid-template-columns: 1fr;
  }

  .setup-layout {
    grid-template-columns: 1fr;
  }

  .selected-tile {
    text-align: left;
  }

  .board {
    margin: 0;
  }

  .coord-top,
  .coord-bottom {
    font-size: 0.68rem;
  }

  .coord-left,
  .coord-right {
    font-size: 0.66rem;
  }
}

@media (min-width: 700px) and (max-width: 899px) {
  html,
  body {
    overflow-x: hidden;
  }

  .app-shell {
    width: min(100vw - 14px, 1440px);
  }

  .site-header {
    grid-template-columns: minmax(224px, auto) minmax(0, 1fr) auto;
    position: relative;
    z-index: 9000;
    gap: 6px 10px;
    padding: 8px 10px;
    border-radius: 18px;
    overflow: visible;
  }

  .platform-brand {
    grid-column: 1;
    grid-row: 1;
  }

  .platform-brand__icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
  }

  .platform-brand__copy {
    gap: 2px;
    min-height: 42px;
  }

  .platform-brand__name {
    font-size: 0.98rem;
    letter-spacing: 0.12em;
  }

  .platform-brand__tagline {
    font-size: 0.58rem;
    letter-spacing: 0.045em;
  }

  .account-area {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    z-index: 9300;
  }

  .profile-trigger {
    min-width: 148px;
    padding: 4px 7px 4px 4px;
    border-radius: 12px;
  }

  .profile-avatar {
    width: 38px;
    height: 38px;
  }

  .profile-copy strong {
    font-size: 0.9rem;
  }

  .profile-copy span {
    font-size: 0.68rem;
  }

  .platform-nav {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-start;
    align-self: center;
    flex-wrap: nowrap;
    gap: 2px;
    min-width: 0;
    overflow: visible;
  }

  .platform-nav > .platform-nav__item:nth-of-type(n+5) {
    display: none;
  }

  .platform-nav-more {
    display: block;
    z-index: 9300;
  }

  .platform-nav-more__dropdown {
    position: fixed;
    z-index: 9500;
    top: 74px;
    right: 14px;
    left: auto;
    width: min(238px, calc(100vw - 28px));
    min-width: 0;
    max-height: min(70vh, 520px);
    overflow: auto;
    padding: 10px;
  }

  .platform-nav-more__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 2px 8px;
    color: #d7a860;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .platform-nav-more__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(215, 168, 96, 0.36);
    border-radius: 999px;
    background: rgba(12, 23, 18, 0.88);
    color: #f6dfaa;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
  }

  .profile-dropdown {
    position: fixed;
    z-index: 9600;
    top: 74px;
    right: 14px;
    width: min(220px, calc(100vw - 28px));
  }

  .platform-nav__item,
  .platform-nav-more__summary {
    min-height: 28px;
    padding: 4px 7px 5px;
    border-radius: 7px;
    font-size: clamp(0.64rem, 1vw, 0.72rem);
    letter-spacing: 0;
  }

  .site-game-title {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .site-game-title h1 {
    font-size: clamp(1.34rem, 3.2vw, 1.68rem);
  }

  .site-game-title .eyebrow {
    display: none;
  }

  .online-mode-entry {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    align-self: center;
  }

  .online-mode-button {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
  }

  .online-mode-button__icon {
    width: 18px;
    height: 18px;
  }

  .game-controls-bar {
    grid-column: 2 / 4;
    grid-row: 3;
    justify-self: end;
    align-self: center;
    padding: 0;
  }

  .topbar-timing {
    justify-content: flex-end;
  }

  .sound-toggle {
    min-width: 126px;
    padding: 7px 10px;
    gap: 7px;
  }

  .sound-toggle-icon img {
    width: 18px;
    height: 18px;
  }

  .sound-toggle-text,
  .top-guide-button {
    font-size: 0.68rem;
  }

  .top-guide-button {
    min-height: 36px;
    padding: 8px 14px;
  }

  .layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 10px;
  }

  .sidebar-left,
  .sidebar-right,
  .sidebar-guide-followup {
    display: contents;
  }

  .scores {
    order: 1;
    grid-column: 1;
    padding: 10px;
    border-radius: 20px;
  }

  .scores .panel-head--with-icon {
    grid-template-columns: auto minmax(0, max-content) auto;
    justify-content: start;
    column-gap: 8px;
  }

  .match-title-icon {
    width: 24px;
    height: 24px;
  }

  .scores .panel-head--with-icon h2 {
    font-size: 1rem;
    white-space: nowrap;
  }

  .scores .match-timer {
    justify-self: start;
    padding: 3px 8px;
    border: 1px solid rgba(215, 168, 96, 0.28);
    border-radius: 999px;
    background: rgba(16, 28, 23, 0.76);
    white-space: nowrap;
  }

  .score-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 7px;
  }

  .match-welcome-empty {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 14px;
    padding: 11px 13px;
    border-radius: 16px;
  }

  .match-welcome-title {
    font-size: 0.95rem;
  }

  .match-welcome-copy {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.82rem;
    line-height: 1.25;
  }

  .match-welcome-action {
    grid-row: 1 / span 2;
    grid-column: 2;
    min-height: 38px;
    padding: 0.58rem 0.8rem;
    white-space: nowrap;
  }

  .score-card {
    gap: 6px;
    padding: 6px 7px;
    border-radius: 14px;
  }

  .score-avatar {
    width: 48px;
    height: 54px;
    border-radius: 12px;
  }

  .score-card-body {
    gap: 3px;
    padding-right: 0;
  }

  .score-card-head {
    padding-right: 28px;
  }

  .score-name {
    font-size: 0.72rem;
  }

  .score-player-copy .subtle {
    font-size: 0.64rem;
    line-height: 1.12;
  }

  .score-rack {
    display: block;
    white-space: nowrap;
    font-size: 0.63rem;
    line-height: 1.05;
    letter-spacing: 0;
  }

  .score-value-stack {
    top: 8px;
    right: 7px;
    gap: 7px;
    min-width: 30px;
  }

  .score-value {
    font-size: 1.08rem;
  }

  .score-turn-ring {
    width: 30px;
    height: 30px;
  }

  .board-panel {
    order: 2;
    grid-column: 1;
    padding: 8px 8px 12px;
    border-radius: 22px;
    overflow-x: hidden;
  }

  body[data-board-style="native-css"] .board-stage,
  .board-stage {
    width: min(100%, calc(100vw - 124px), 696px);
    margin: 4px auto 6px;
  }

  body[data-board-style="native-css"] .rack-card {
    margin-top: 6px;
    padding-top: 0;
  }

  .rack-card {
    width: min(100%, 690px);
    max-width: 690px;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 238px);
    align-items: end;
    justify-content: center;
    column-gap: 10px;
    row-gap: 4px;
  }

  .rack-header {
    display: none;
  }

  .rack {
    max-width: none;
    min-height: 56px;
    padding: 7px 6px 14px;
  }

  .rack-quick-actions {
    grid-template-columns: repeat(5, minmax(38px, 1fr));
    gap: 2px;
    align-self: end;
    transform: none;
  }

  .action-icon-art {
    width: 34px;
    max-height: 34px;
  }

  .action-label {
    font-size: 0.54rem;
  }

  .panel-status {
    order: 3;
    grid-column: 1;
    padding: 10px 12px;
    border-radius: 20px;
  }

  .panel-status .panel-head .subtle {
    display: none;
  }

  .panel-status .message {
    min-height: 52px;
    max-height: 78px;
    padding: 9px 10px;
    font-size: 0.86rem;
    line-height: 1.28;
  }

  #lastMoveSummary {
    font-size: 0.78rem;
  }

  .panel-lexicon {
    order: 4;
    grid-column: 1;
    padding: 10px 12px;
    border-radius: 20px;
  }

  .panel-lexicon .enriched-word-panel {
    height: 132px;
    min-height: 132px;
    padding: 8px 10px;
    overflow: auto;
  }

  .panel-history {
    order: 5;
    grid-column: 1;
    padding: 10px 12px;
    border-radius: 20px;
  }

  .history,
  .panel-history:not(.is-expanded) .history {
    max-height: 132px;
  }

  .history li {
    padding: 8px 10px;
    font-size: 0.82rem;
    line-height: 1.25;
  }

  .history-toggle,
  .history-export-action {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 0.82rem;
  }

  .panel-game-quick {
    order: 6;
    grid-column: 1;
    padding: 11px 12px;
    border-radius: 20px;
  }

  .quick-new-game {
    min-height: 38px;
    padding: 8px 12px;
  }

  .quick-match-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .quick-match-row {
    gap: 7px;
    min-height: 34px;
    padding: 7px 9px;
  }

  .quick-match-icon {
    width: 23px;
    height: 23px;
  }

  .quick-match-value,
  .quick-turn-banner,
  #turnMeta .turn-meta-label,
  #turnMeta .quick-match-value {
    font-size: 0.82rem;
  }

  .panel-tools {
    order: 7;
    grid-column: 1;
    padding: 10px 12px;
    border-radius: 20px;
  }

  .panel-tools .panel-head .subtle {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.84rem;
    line-height: 1.24;
  }

  .panel-tools .ffsc-link {
    min-height: 42px;
    padding: 10px 12px;
  }
}

@media (min-width: 700px) and (max-width: 780px) {
  body[data-board-style="native-css"] .board-stage,
  .board-stage {
    width: min(100%, calc(100vw - 220px), 568px);
  }

  .rack-card {
    width: min(100%, 568px);
    max-width: 568px;
    grid-template-columns: minmax(0, 1fr) minmax(196px, 222px);
    column-gap: 8px;
  }

  .rack-quick-actions {
    grid-template-columns: repeat(5, minmax(34px, 1fr));
  }

  .action-icon-art {
    width: 32px;
    max-height: 32px;
  }
}

@media (max-width: 640px) {
  h1 {
    font-size: 2rem;
  }

  .site-header {
    border-radius: 18px;
  }

  .platform-brand__name {
    font-size: 0.86rem;
    letter-spacing: 0.13em;
  }

  .platform-brand__tagline {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
  }

  .online-mode-button {
    min-height: 40px;
    padding: 9px 13px;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
  }

  .platform-nav__item {
    padding: 5px 7px 6px;
    font-size: 0.74rem;
    letter-spacing: 0;
  }

  .site-game-title h1 {
    font-size: 1.62rem;
  }

  .game-controls-bar {
    padding: 8px;
  }

  .profile-trigger {
    min-width: 0;
    grid-template-columns: auto auto;
    padding: 5px 7px 5px 5px;
    border-radius: 12px;
  }

  .profile-copy {
    display: none;
  }

  .profile-avatar {
    width: 36px;
    height: 36px;
  }

  .profile-dropdown {
    right: 0;
  }

  .account-auth {
    gap: 6px;
  }

  .account-auth button {
    padding: 7px 9px;
    font-size: 0.76rem;
  }

  .word-highlight {
    border-width: 2px;
  }

  .word-highlight.is-main {
    border-width: 3px;
  }

  .word-highlight.is-cross {
    border-width: 1.5px;
  }

  .online-mode-modal__card {
    border-radius: 16px;
    padding: 18px;
  }

  .online-mode-benefits {
    grid-template-columns: 1fr;
  }

  /* ONLINE-2B.4 — mobile : le champ email doit rester atteignable sans long
     scroll (footer de la modale en position:sticky : si le contenu déborde,
     il vient sinon recouvrir le champ email au premier affichage). On réduit
     la densité de l'intro Signup plutôt que d'agrandir la modale :
     - 4e bénéfice masqué ("compte unique Agora" repasse en desktop) ;
     - descriptions masquées : titres courts uniquement ("bénéfices courts") ;
     - réassurance masquée (absente de la priorité mobile) ;
     - espacements resserrés. */
  #playerAccountSignupIntro {
    margin-top: 10px;
  }

  #playerAccountSignupIntro .online-mode-benefits li:nth-child(4) {
    display: none;
  }

  #playerAccountSignupIntro .online-mode-benefits li span {
    display: none;
  }

  #playerAccountSignupIntro .online-mode-benefits li {
    padding: 7px 10px 7px 26px;
  }

  #playerAccountSignupIntro .online-mode-benefits {
    gap: 6px;
  }

  .online-mode-modal .player-account-intro__context {
    margin-bottom: 8px;
  }

  .player-account-intro__trust {
    display: none;
  }

  .online-mode-modal__actions {
    justify-content: stretch;
    bottom: -18px;
    margin-right: -18px;
    margin-bottom: -18px;
    margin-left: -18px;
    padding: 12px 18px 18px;
  }

  .online-mode-modal__actions button {
    flex: 1 1 120px;
  }

  .online-lobby-code-value {
    font-size: 1.5rem;
    letter-spacing: 0.16em;
  }

  .online-lobby-code-box {
    padding: 12px;
    gap: 8px;
  }

  .online-lobby-seats {
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: 14px;
    margin-top: 16px;
  }

  .online-lobby-seat {
    min-height: 0;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px;
    text-align: left;
  }

  .online-lobby-seat:has(.online-lobby-seat__flag:not([hidden])) {
    padding-left: 40px;
  }

  .online-lobby-seat__avatar,
  .online-lobby-seat__placeholder,
  #onlineLobbyRoom:has(.online-lobby-seats--n2) .online-lobby-seat__avatar,
  #onlineLobbyRoom:has(.online-lobby-seats--n2) .online-lobby-seat__placeholder {
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
  }

  .online-lobby-seat__flag,
  #onlineLobbyRoom:has(.online-lobby-seats--n2) .online-lobby-seat__flag {
    top: 8px;
    left: 8px;
    width: 22px;
    height: 16px;
  }

  .online-lobby-seat__edit-badge,
  #onlineLobbyRoom:has(.online-lobby-seats--n2) .online-lobby-seat__edit-badge {
    top: 49px;
    left: 78px;
    width: 18px;
    height: 18px;
  }

  .online-lobby-seat__edit-badge svg {
    width: 10px;
    height: 10px;
  }

  .online-lobby-seat__name {
    flex: 1 1 auto;
    min-width: 0;
  }

  .online-lobby-seat__meta {
    flex: 0 1 auto;
    min-width: 0;
  }

  .online-lobby-seat__badge {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .history {
    max-height: 150px;
  }

  .panel-history:not(.is-expanded) .history {
    max-height: 150px;
  }

  .panel-history.is-expanded .history {
    max-height: min(30vh, 220px);
  }

  .panel-history.is-observer .history,
  .panel-history.is-observer.is-expanded .history {
    max-height: min(24vh, 150px);
  }

  .guide-link {
    width: 100%;
  }

  .interactive-guide {
    padding: 12px;
  }

  .interactive-guide__spotlight {
    border-radius: min(var(--tour-spot-radius), 18px);
    box-shadow:
      0 0 0 9999px rgba(5, 11, 9, 0.56),
      0 0 0 4px rgba(229, 196, 132, 0.08),
      0 0 22px rgba(229, 196, 132, 0.24);
  }

  .interactive-guide__card,
  .interactive-guide.is-targetless .interactive-guide__card {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 12px;
    width: auto;
    max-height: min(62vh, 460px);
    overflow: auto;
    padding: 16px;
    border-radius: 18px;
  }

  .interactive-guide__pdf-download {
    position: static;
    justify-self: start;
    width: max-content;
  }

  .interactive-guide__card--actions {
    max-height: min(70vh, 520px);
  }

  .interactive-guide__card--lexicon-demo {
    top: 12px;
    bottom: auto;
    max-height: min(36vh, 280px);
  }

  .interactive-guide-action-item {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .interactive-guide-action-icon {
    width: 30px;
    height: 30px;
  }

  .interactive-guide-action-text span {
    font-size: 0.81rem;
  }

  .interactive-guide-rack-demo {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
    inset: 4px 6px 8px;
    min-height: 54px;
    padding: 9px 8px;
  }

  .interactive-guide-rack-demo__badge {
    left: 8px;
    top: -9px;
    padding: 3px 7px;
  }

  .interactive-guide-rack-demo__tile {
    width: min(96%, 34px);
  }

  .interactive-guide-lexicon-demo {
    padding: 10px;
  }

  .interactive-guide-lexicon-demo p {
    font-size: 0.82rem;
  }

  .tour-demo-tile {
    width: 78%;
    height: 78%;
    border-radius: 6px;
    border-width: 1px;
    font-size: clamp(0.68rem, 3.4vw, 0.98rem);
  }

  .tour-demo-label {
    padding: 3px 5px;
    font-size: clamp(0.42rem, 2vw, 0.58rem);
  }

  .tour-demo-label--horizontal {
    grid-column: 5 / span 7;
  }

  .tour-demo-label--vertical {
    grid-column: 10 / span 5;
  }

  .tour-bonus-label {
    padding: 4px 6px;
    border-radius: 11px 11px 11px 5px;
    font-size: clamp(0.44rem, 2.1vw, 0.62rem);
    line-height: 1.1;
  }

  .tour-bonus-label::after {
    border-left-width: 6px;
    border-right-width: 6px;
  }

  .tour-bonus-label--word4::after,
  .tour-bonus-label--word3::after {
    bottom: -6px;
    border-top-width: 7px;
  }

  .tour-bonus-label--word2::after,
  .tour-bonus-label--letter3::after,
  .tour-bonus-label--letter2::after {
    top: -6px;
    border-bottom-width: 7px;
  }

  .tour-bonus-label--word3 {
    grid-column: 1 / span 5;
  }

  .tour-bonus-label--word2 {
    grid-column: 7 / span 7;
  }

  .tour-bonus-label--letter3 {
    grid-column: 2 / span 5;
  }

  .tour-bonus-label--letter2 {
    grid-column: 8 / span 7;
  }

  .interactive-guide.is-target-clickable .interactive-guide__card {
    top: 12px;
    bottom: auto;
    max-height: min(46vh, 360px);
  }

  .interactive-guide-target-cue::after {
    right: 50%;
    bottom: calc(100% + 7px);
    max-width: min(240px, 70vw);
    transform: translateX(50%);
    white-space: normal;
  }

  .interactive-guide__actions,
  .interactive-guide__nav {
    justify-content: stretch;
  }

  .interactive-guide__actions button {
    flex: 1 1 120px;
  }

  .board-panel {
    padding: 16px;
  }

  .board {
    margin: 0;
  }

  .rack {
    gap: 2px;
    width: min(100%, 424px);
    min-height: 58px;
    padding: 7px 6px 13px;
  }

  .rack-quick-actions {
    grid-template-columns: repeat(3, minmax(54px, 1fr));
    width: min(100%, 280px);
    gap: 7px 9px;
  }

  .action-icon-art {
    width: 36px;
    max-height: 36px;
  }

  .rack-slot {
    min-height: 0;
  }

  .rack-tile {
    min-height: 0;
  }

  .rack-tile .tile-glyph {
    font-size: 1.3rem;
  }

  .actions,
  .actions-secondary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .setup-avatar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ONLINE-2B.4 — paysage compact / petite hauteur (ex. 667×375, 736×414,
   896×414, 932×430 en orientation paysage) : la largeur y dépasse souvent
   640px (donc échappe au bucket "mobile portrait" ci-dessus) alors que la
   hauteur reste très contrainte sous le footer sticky de la modale. Critère
   volontairement basé sur la hauteur (pas l'orientation) : couvre aussi bien
   un téléphone tourné qu'une fenêtre desktop basse. Ne cible que le bloc
   Signup premium ; login compact et autres écrans non concernés. */
@media (max-height: 480px) {
  #playerAccountSignupIntro {
    margin-top: 6px;
  }

  /* Contexte "Inscription depuis..." masqué ici : à cette hauteur, la ligne
     de contexte + les cartes bénéfices ne tiennent plus toutes les deux sans
     recouvrement par le footer sticky ; priorité donnée aux bénéfices. */
  .online-mode-modal .player-account-intro__context {
    display: none;
  }

  #playerAccountSignupIntro .online-mode-benefits li:nth-child(n + 3) {
    display: none;
  }

  #playerAccountSignupIntro .online-mode-benefits li span {
    display: none;
  }

  #playerAccountSignupIntro .online-mode-benefits li {
    padding: 3px 8px 3px 22px;
    border-width: 0;
  }

  #playerAccountSignupIntro .online-mode-benefits li::before {
    top: 8px;
  }

  #playerAccountSignupIntro .online-mode-benefits li b {
    font-size: 0.78rem;
    line-height: 1.2;
  }

  #playerAccountSignupIntro .online-mode-benefits {
    gap: 4px;
  }

  .player-account-intro__trust {
    display: none;
  }
}

/* ONLINE-2B.4 — cas le plus extrême (ex. 667×375) : la grille bénéfices reste
   à 2 colonnes par défaut à cette largeur (>640px, le repli 1 colonne du
   bucket "mobile portrait" ne s'applique pas) : les 2 premiers bénéfices
   tiennent donc CÔTE À CÔTE sur une seule ligne, sans coût de hauteur
   supplémentaire par rapport à 1 seul. On resserre encore un peu les marges
   pour garder le champ email totalement visible, non recouvert par le footer
   sticky. */
@media (max-height: 400px) {
  #playerAccountSignupIntro {
    margin-top: 2px;
  }

  #playerAccountSignupIntro .online-mode-benefits li:nth-child(n + 3) {
    display: none;
  }

  #playerAccountSignupIntro .online-mode-benefits li {
    padding: 2px 8px 2px 22px;
  }

  #playerAccountSignupIntro .online-mode-benefits li::before {
    top: 7px;
  }
}

/* ONLINE-2B.4 — très petit écran PORTRAIT (ex. 320×568) : à cette largeur, même
   3 bénéfices sans description font déborder la carte au point que le champ
   email se retrouve recouvert par le footer sticky dès le premier affichage
   (scrollTop=0). Uniquement #playerAccountSignupIntro et ses enfants sont
   touchés (le login compact, l'OTP et le profil ne chargent pas ce bloc et ne
   sont donc pas concernés). Aucune police essentielle réduite ; on baisse le
   nombre de bénéfices à 1 et on masque le contexte "Inscription depuis…". */
@media (max-width: 340px) {
  #playerAccountSignupIntro {
    margin-top: 4px;
  }

  .online-mode-modal .player-account-intro__context {
    display: none;
  }

  #playerAccountSignupIntro .online-mode-benefits li:nth-child(n + 2) {
    display: none;
  }

  #playerAccountSignupIntro .online-mode-benefits li {
    padding: 5px 10px 5px 24px;
  }
}

@media (max-width: 639px) {
  html,
  body {
    overflow-x: hidden;
  }

  .app-shell {
    width: 100%;
    padding: 6px 6px 16px;
  }

  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
    margin-bottom: 6px;
    padding: 7px 8px;
    border-radius: 16px;
    overflow: visible;
  }

  .platform-brand {
    grid-column: 1;
    grid-row: 1;
    gap: 8px;
    align-self: center;
  }

  .platform-brand__icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
  }

  .platform-brand__copy {
    min-height: 38px;
    gap: 1px;
  }

  .platform-brand__name {
    color: #d7a860;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(0.78rem, 4.1vw, 0.98rem);
    font-weight: 400;
    letter-spacing: 0.11em;
  }

  .platform-brand__tagline {
    max-width: 190px;
    overflow: hidden;
    font-size: clamp(0.48rem, 2.5vw, 0.58rem);
    letter-spacing: 0.055em;
    text-overflow: ellipsis;
  }

  .account-area {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
  }

  .profile-trigger {
    min-width: 0;
    grid-template-columns: auto auto;
    gap: 5px;
    padding: 3px 6px 3px 3px;
    border-radius: 11px;
  }

  .profile-avatar {
    width: 32px;
    height: 32px;
  }

  .profile-chevron {
    font-size: 1rem;
  }

  .profile-dropdown {
    right: 0;
    min-width: min(190px, calc(100vw - 18px));
  }

  .platform-nav,
  .online-mode-entry {
    display: none;
  }

  .site-game-title {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 0;
    padding-top: 1px;
  }

  .site-game-title .eyebrow {
    display: none;
  }

  .site-game-title h1 {
    color: #f1ead7;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.16rem, 6.4vw, 1.45rem);
    font-weight: 700;
    line-height: 0.96;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  }

  .game-controls-bar {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: stretch;
    padding: 0;
  }

  .topbar-timing {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: 7px;
    justify-content: stretch;
    width: 100%;
  }

  .sound-toggle,
  .top-guide-button {
    min-width: 0;
    min-height: 34px;
    width: 100%;
    padding: 7px 8px;
    border-radius: 999px;
  }

  .sound-toggle {
    justify-content: center;
    gap: 6px;
  }

  .sound-toggle-icon img {
    width: 18px;
    height: 18px;
  }

  .sound-toggle-text,
  .top-guide-button {
    font-size: clamp(0.62rem, 2.7vw, 0.72rem);
    letter-spacing: 0.075em;
    white-space: nowrap;
  }

  .guide-link.top-guide-button {
    width: 100%;
  }

  .layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 8px;
  }

  .sidebar-left,
  .sidebar-right,
  .sidebar-guide-followup {
    display: contents;
  }

  .scores {
    order: 1;
    grid-column: 1;
    padding: 8px;
    border-radius: 17px;
    overflow: hidden;
  }

  .scores .panel-head--with-icon {
    grid-template-columns: auto auto minmax(0, 1fr);
    column-gap: 6px;
    align-items: center;
  }

  .match-title-icon {
    width: 22px;
    height: 22px;
  }

  .scores .panel-head--with-icon h2 {
    font-size: 0.98rem;
    line-height: 1;
    white-space: nowrap;
  }

  .scores .match-timer {
    justify-self: end;
    min-width: 0;
    padding: 3px 8px;
    gap: 5px;
    border: 1px solid rgba(215, 168, 96, 0.28);
    border-radius: 999px;
    background: rgba(16, 28, 23, 0.78);
  }

  .match-timer__icon {
    width: 20px;
    height: 20px;
  }

  .match-timer .game-timer-label,
  .match-timer .game-timer-value {
    font-size: 0.76rem;
    line-height: 1;
  }

  .score-grid {
    display: flex;
    gap: 8px;
    margin-top: 7px;
    padding: 0 1px 5px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(215, 168, 96, 0.5) rgba(255, 255, 255, 0.04);
  }

  .score-grid::-webkit-scrollbar {
    height: 5px;
  }

  .score-grid::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(215, 168, 96, 0.52);
  }

  .match-welcome-empty {
    flex: 0 0 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 11px;
    border-radius: 15px;
  }

  .match-welcome-title {
    font-size: 0.86rem;
  }

  .match-welcome-copy {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.76rem;
    line-height: 1.22;
  }

  .match-welcome-action {
    width: 100%;
    min-height: 34px;
    padding: 0.52rem 0.72rem;
    border-radius: 13px;
    font-size: 0.88rem;
  }

  .score-card {
    flex: 0 0 min(68vw, 226px);
    scroll-snap-align: start;
    min-height: 70px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
    padding: 6px 8px;
    border-radius: 15px;
  }

  .score-card.active {
    transform: none;
    border-color: rgba(244, 209, 138, 0.82);
    box-shadow:
      inset 0 1px 0 rgba(255, 246, 226, 0.2),
      0 0 0 2px rgba(236, 198, 122, 0.24),
      0 0 18px rgba(219, 177, 102, 0.2);
  }

  .score-avatar {
    width: 48px;
    height: 54px;
    border-radius: 13px;
  }

  .score-card-body {
    gap: 3px;
    padding-right: 34px;
  }

  .score-card-head {
    gap: 3px;
  }

  .score-name {
    font-size: 0.76rem;
    line-height: 1.02;
  }

  .score-player-copy .subtle {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.62rem;
    line-height: 1.08;
  }

  .score-rack {
    display: block;
    font-size: 0.64rem;
    line-height: 1.05;
    white-space: nowrap;
  }

  .score-value-stack {
    top: 8px;
    right: 7px;
    gap: 7px;
    min-width: 30px;
  }

  .score-value {
    font-size: 1.15rem;
  }

  .score-turn-ring {
    width: 32px;
    height: 32px;
  }

  .score-turn-ring-value {
    font-size: 0.62rem;
  }

  .panel-game-quick {
    order: 2;
    grid-column: 1;
    gap: 7px;
    padding: 8px;
    border-radius: 17px;
  }

  .quick-new-game {
    min-height: 35px;
    padding: 7px 10px;
    border-radius: 13px;
    font-size: 0.9rem;
  }

  .quick-new-game-plus {
    width: 19px;
    height: 19px;
    font-size: 0.92rem;
  }

  .quick-match-list {
    grid-template-columns: 0.78fr 0.78fr 1.44fr;
    gap: 5px;
    margin-top: 0;
  }

  .quick-match-row {
    min-height: 31px;
    gap: 4px;
    padding: 5px 6px;
    border-radius: 12px;
    font-size: 0.66rem;
  }

  .quick-match-row-status {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .quick-match-icon,
  .quick-match-icon-bag,
  .quick-match-icon-clock,
  .quick-match-icon-level {
    width: 19px;
    height: 19px;
  }

  .quick-match-value,
  .quick-turn-banner,
  #turnMeta .turn-meta-label,
  #turnMeta .quick-match-value {
    font-size: 0.66rem;
    line-height: 1.08;
  }

  .quick-turn-banner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .board-panel {
    order: 3;
    grid-column: 1;
    gap: 4px;
    padding: 6px 4px 9px;
    border-radius: 18px;
    overflow-x: hidden;
  }

  body[data-board-style="native-css"] .board-stage,
  .board-stage {
    width: min(100%, calc(100vw - 14px));
    margin: 0 auto 2px;
    --ms-celebration-board-radius: 18px;
    border-radius: 18px;
  }

  .coord-top,
  .coord-bottom {
    font-size: clamp(0.46rem, 1.9vw, 0.6rem);
  }

  .coord-left,
  .coord-right {
    font-size: clamp(0.44rem, 1.8vw, 0.58rem);
  }

  .cell .tile,
  .tile {
    --board-tile-scale: 0.96;
  }

  body[data-board-style="native-css"] .rack-card {
    margin-top: 3px;
    padding-top: 0;
  }

  .rack-card {
    width: min(100%, calc(100vw - 14px));
    max-width: none;
    grid-template-columns: 1fr;
    row-gap: 5px;
    margin: 2px auto 0;
  }

  .rack-header {
    display: none;
  }

  .rack {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    min-height: 54px;
    padding: 6px 6px 13px;
  }

  .rack-slot {
    min-height: 0;
    padding-bottom: 4px;
  }

  .rack-tile {
    width: min(96%, 42px);
  }

  .rack-tile .tile-glyph {
    font-size: clamp(1.05rem, 4.9vw, 1.3rem);
  }

  .rack-tile small {
    right: 14%;
    bottom: 8%;
    font-size: 0.56rem;
  }

  .rack-quick-actions {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    transform: none;
  }

  .action-icon-button {
    gap: 2px;
    min-height: 46px;
  }

  .action-icon-art {
    width: 32px;
    max-height: 32px;
  }

  .action-label {
    font-size: 0.54rem;
    line-height: 1;
  }

  .panel-status {
    order: 4;
    grid-column: 1;
    padding: 8px 10px;
    border-radius: 17px;
  }

  .panel-status .panel-head {
    gap: 1px;
  }

  .panel-status .panel-head h2 {
    font-size: 0.98rem;
    line-height: 1.05;
  }

  .panel-status .panel-head .subtle {
    display: none;
  }

  .panel-status .message {
    min-height: 42px;
    max-height: 62px;
    padding: 8px 9px;
    overflow: auto;
    font-size: 0.82rem;
    line-height: 1.22;
  }

  #lastMoveSummary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.72rem;
    line-height: 1.18;
  }

  .panel-lexicon {
    order: 5;
    grid-column: 1;
    padding: 8px 10px;
    border-radius: 17px;
  }

  .panel-lexicon .board-header {
    display: block;
  }

  .panel-lexicon .enriched-word-panel {
    height: 118px;
    min-height: 118px;
    padding: 8px 9px;
    overflow: auto;
  }

  .panel-lexicon .enriched-word-definition,
  .panel-lexicon .enriched-word-message,
  .panel-lexicon .enriched-word-notes,
  .panel-lexicon .enriched-word-compact,
  .panel-lexicon .enriched-word-missing-inline {
    font-size: 0.74rem;
    line-height: 1.18;
  }

  .panel-history {
    order: 6;
    grid-column: 1;
    padding: 8px 10px;
    border-radius: 17px;
  }

  .panel-history .panel-head {
    gap: 1px;
  }

  .panel-history .panel-head h2,
  .panel-tools .panel-head h2 {
    font-size: 0.98rem;
  }

  .panel-history .panel-head .subtle,
  .panel-tools .panel-head .subtle {
    display: none;
  }

  .history,
  .panel-history:not(.is-expanded) .history {
    max-height: 102px;
  }

  .history li {
    padding: 7px 8px;
    font-size: 0.76rem;
    line-height: 1.18;
  }

  .history-toggle,
  .history-export-action {
    min-height: 32px;
    padding: 6px 9px;
    border-radius: 12px;
    font-size: 0.74rem;
  }

  .panel-tools {
    order: 7;
    grid-column: 1;
    padding: 8px 10px;
    border-radius: 17px;
  }

  .panel-tools .ffsc-link,
  .panel-tools .guide-link,
  .panel-tools .guide-download-link {
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 0.82rem;
  }

  .panel-tools .interactive-guide-button {
    display: none;
  }

  /* Mobile portrait: closer to the dedicated game-app layout. */
  .app-shell {
    padding: 4px 4px 12px;
  }

  .site-header {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-rows: auto auto;
    gap: 2px 5px;
    margin-bottom: 4px;
    padding: 5px 7px 6px;
    border-radius: 14px;
    position: relative;
    z-index: 3000;
  }

  .platform-brand {
    grid-column: 1;
    grid-row: 1;
    gap: 6px;
  }

  .platform-brand__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .platform-brand__copy {
    min-height: 0;
    gap: 0;
  }

  .platform-brand__name {
    max-width: clamp(136px, 37vw, 150px);
    overflow: hidden;
    font-size: clamp(0.66rem, 3.1vw, 0.78rem);
    letter-spacing: 0.12em;
    text-overflow: ellipsis;
  }

  .platform-brand__tagline {
    display: none;
  }

  .site-game-title {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    justify-items: start;
    padding-left: 0;
    text-align: left;
  }

  .site-game-title h1 {
    font-size: clamp(1.18rem, 5.25vw, 1.36rem);
    line-height: 1;
    white-space: nowrap;
  }

  .account-area {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .profile-trigger {
    grid-template-columns: auto auto auto;
    gap: 5px;
    padding: 3px 5px 3px 3px;
    border-radius: 11px;
  }

  .profile-avatar {
    width: 30px;
    height: 30px;
  }

  .profile-copy {
    display: grid;
    max-width: 72px;
    gap: 0;
  }

  .profile-copy strong {
    display: none;
  }

  .profile-copy span {
    display: block;
    color: #f8ead0;
    font-size: 0.58rem;
    line-height: 1;
  }

  .profile-level-star {
    width: 12px;
    height: 12px;
    margin-left: 1px;
  }

  .profile-chevron {
    font-size: 0.92rem;
  }

  .game-controls-bar {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    width: 40px;
  }

  .topbar-timing {
    display: inline-flex;
    gap: 5px;
    width: 40px;
    flex-wrap: nowrap;
  }

  .sound-toggle,
  .top-guide-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 999px;
  }

  .sound-toggle-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .sound-toggle-icon img {
    width: 21px;
    height: 21px;
  }

  .top-guide-button {
    display: none !important;
  }

  .guide-link.top-guide-button {
    display: none !important;
  }

  .platform-nav {
    grid-column: 4;
    grid-row: 1 / span 2;
    display: flex;
    align-self: center;
    justify-self: end;
    overflow: visible;
  }

  .platform-nav > .platform-nav__item {
    display: none;
  }

  .platform-nav-more {
    display: block;
  }

  .platform-nav-more__summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 999px;
    color: transparent;
    font-size: 0;
  }

  .platform-nav-more__summary::before {
    content: "☰";
    color: #d7a860;
    font-size: 1.08rem;
    line-height: 1;
  }

  .platform-nav-more__summary::after {
    content: none;
  }

  .platform-nav-more__summary::before {
    content: "";
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: #d7a860;
    color: #d7a860;
    font-size: 0;
    line-height: 1;
    box-shadow:
      0 -5px 0 currentColor,
      0 5px 0 currentColor;
  }

  .platform-nav-more__dropdown {
    position: fixed;
    z-index: 5200;
    top: 78px;
    right: 8px;
    left: 8px;
    display: grid;
    width: auto;
    min-width: 0;
    max-height: min(72vh, 520px);
    overflow: auto;
    padding: 10px;
    border-color: rgba(215, 168, 96, 0.46);
    background: #0e1c16;
    box-shadow:
      0 20px 38px rgba(0, 0, 0, 0.44),
      inset 0 1px 0 rgba(247, 241, 227, 0.09);
  }

  .platform-nav-more__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 2px 9px;
    color: #d7a860;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .platform-nav-more__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(215, 168, 96, 0.36);
    background: rgba(12, 23, 18, 0.88);
    color: #f6dfaa;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1;
  }

  .platform-nav-more:not([open]) .platform-nav-more__dropdown,
  .profile-menu:not([open]) .profile-dropdown {
    display: none !important;
  }

  .platform-nav-more__item,
  .platform-nav-more__item--mobile-only,
  .platform-nav-more__item--download,
  .platform-nav-more__item--primary {
    display: block;
  }

  .platform-nav-more__item {
    padding: 10px 11px;
    border-radius: 10px;
    font-size: 0.86rem;
  }

  .platform-nav-more__item--download {
    margin-top: 3px;
    border: 1px solid rgba(246, 203, 111, 0.5);
    background:
      linear-gradient(180deg, rgba(255, 246, 214, 0.96), rgba(229, 176, 78, 0.96));
    color: #251707;
    font-weight: 900;
    text-align: center;
  }

  .platform-nav-more__item--primary {
    margin-bottom: 4px;
    border: 1px solid rgba(246, 203, 111, 0.42);
    background:
      linear-gradient(180deg, rgba(229, 178, 92, 0.28), rgba(160, 103, 45, 0.2)),
      rgba(19, 34, 27, 0.96);
    color: #ffe8b2;
    font-weight: 900;
  }

  .profile-dropdown {
    position: fixed;
    z-index: 5300;
    top: 78px;
    right: 8px;
    left: auto;
    width: min(220px, calc(100vw - 16px));
    min-width: 0;
    border-color: rgba(215, 168, 96, 0.46);
    background: #0e1c16;
    box-shadow:
      0 20px 38px rgba(0, 0, 0, 0.44),
      inset 0 1px 0 rgba(247, 241, 227, 0.09);
  }

  .layout {
    gap: 6px;
    margin-top: 4px;
  }

  .scores {
    padding: 6px 8px 7px;
    width: calc(100% + 8px);
    margin-right: -4px;
    margin-left: -4px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .scores .panel-head--with-icon {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 5px;
  }

  .match-title-icon {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
  }

  .scores .panel-head--with-icon h2 {
    flex: 0 0 auto;
    margin-right: auto;
    font-size: 0.86rem;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  .scores .match-online-action {
    flex: 0 1 auto;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 26px;
    padding: 4px 8px;
    border: 1px solid rgba(215, 168, 96, 0.28);
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(255, 246, 224, 0.08), rgba(255, 255, 255, 0.02)),
      rgba(13, 24, 20, 0.74);
    color: #f9e9c8;
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
  }

  .scores .match-online-action img {
    width: 14px;
    height: 14px;
    object-fit: contain;
  }

  .scores .notification-center {
    flex: 0 0 auto;
  }

  .scores .online-reaction-control {
    flex: 0 0 auto;
  }

  .scores .online-match-rules-action {
    flex: 0 0 auto;
    justify-self: center;
    align-self: center;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    border: 1px solid rgba(215, 168, 96, 0.38);
    border-radius: 50%;
    background:
      linear-gradient(180deg, rgba(252, 238, 202, 0.16), rgba(215, 168, 96, 0.06)),
      rgba(18, 42, 33, 0.86);
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .scores .match-timer {
    padding: 2px 7px;
  }

  .match-timer__icon {
    width: 18px;
    height: 18px;
  }

  .match-timer .game-timer-label,
  .match-timer .game-timer-value {
    font-size: 0.68rem;
  }

  .score-grid {
    gap: 6px;
    margin-top: 5px;
    padding-bottom: 2px;
  }

  .score-card {
    flex-basis: min(42vw, 176px);
    min-height: 60px;
    gap: 6px;
    padding: 5px 7px;
    border-radius: 14px;
  }

  .score-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(244, 209, 138, 0.42);
  }

  .score-card-body {
    gap: 2px;
    padding-right: 27px;
  }

  .score-name {
    font-size: 0.68rem;
  }

  .score-player-copy .subtle {
    font-size: 0.54rem;
  }

  .score-rack {
    font-size: 0.58rem;
  }

  .score-value-stack {
    top: 7px;
    right: 6px;
    min-width: 25px;
  }

  .score-value {
    font-size: 1rem;
  }

  .score-turn-ring {
    width: 27px;
    height: 27px;
  }

  .score-turn-ring-value {
    font-size: 0.56rem;
  }

  .panel-game-quick {
    gap: 0;
    width: calc(100% + 8px);
    margin-right: -4px;
    margin-left: -4px;
    padding: 3px 8px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .quick-new-game {
    display: inline-flex;
    min-height: 34px;
    margin-bottom: 4px;
    padding: 7px 10px;
    border-radius: 12px;
    font-size: 0.82rem;
  }

  .quick-match-list {
    grid-template-columns: minmax(70px, 0.72fr) minmax(104px, 1.08fr) minmax(136px, 1.35fr);
    gap: 5px;
  }

  .quick-match-row {
    min-height: 28px;
    padding: 4px 5px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
  }

  .quick-match-icon,
  .quick-match-icon-bag,
  .quick-match-icon-clock,
  .quick-match-icon-level {
    width: 16px;
    height: 16px;
  }

  .quick-match-value,
  .quick-turn-banner,
  #turnMeta .turn-meta-label,
  #turnMeta .quick-match-value {
    font-size: 0.62rem;
    line-height: 1;
    white-space: nowrap;
  }

  .board-panel {
    display: contents;
  }

  body[data-board-style="native-css"] .board-stage,
  .board-stage {
    order: 3;
    grid-column: 1;
    width: min(100%, calc(100vw - 10px));
    margin: 0 auto;
    --ms-celebration-board-radius: 16px;
    border-radius: 16px;
  }

  .panel-status {
    order: 4;
    width: calc(100% + 8px);
    margin-right: -4px;
    margin-left: -4px;
    padding: 4px 8px;
    border-radius: 0;
    border-right: 0;
    border-left: 0;
    align-content: start;
  }

  .panel-status .panel-head {
    margin-bottom: 2px;
  }

  .panel-status .panel-head h2 {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    line-height: 1;
  }

  .panel-status .message {
    min-height: 24px;
    max-height: 28px;
    padding: 4px 7px;
    overflow: hidden;
    font-size: 0.68rem;
    line-height: 1.08;
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .panel-status.is-mobile-status-flash {
    box-shadow:
      inset 0 -1px 0 rgba(246, 203, 111, 0.32),
      inset 0 1px 0 rgba(246, 203, 111, 0.32),
      0 0 18px rgba(229, 178, 92, 0.2);
  }

  .panel-status .lexicon-loading[hidden] {
    display: none !important;
  }

  .panel-status .lexicon-loading {
    min-height: 28px;
    margin-top: 2px;
    padding: 4px 7px;
    border-radius: 10px;
  }

  .panel-status .lexicon-loading-copy {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
  }

  .panel-status .lexicon-loading-title,
  .panel-status .lexicon-loading-detail {
    overflow: hidden;
    font-size: 0.64rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .panel-status .lexicon-loading-progress {
    display: none;
  }

  .panel-status.is-endgame-access {
    padding: 6px 9px;
  }

  .panel-status.is-endgame-access .endgame-status-access {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px 8px;
    padding: 7px 8px;
    border-radius: 13px;
  }

  .panel-status.is-endgame-access .endgame-status-access__eyebrow {
    grid-column: 1 / -1;
    font-size: 0.52rem;
    line-height: 1;
  }

  .panel-status.is-endgame-access #endGameAccessText {
    font-size: 0.76rem;
    line-height: 1.05;
  }

  .panel-status.is-endgame-access .endgame-status-access p:not(.endgame-status-access__eyebrow):not(#endGameAccessText) {
    display: none;
  }

  .panel-status.is-endgame-access #endGameAccessText {
    display: block;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .panel-status.is-endgame-access .endgame-status-access__button {
    min-height: 28px;
    margin: 0;
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 0.66rem;
    white-space: nowrap;
  }

  #lastMoveSummary {
    display: none;
  }

  .rack-card {
    order: 5;
    grid-column: 1;
    width: min(100%, calc(100vw - 10px));
    row-gap: 1px;
    margin: 2px auto 0;
  }

  .rack {
    gap: 4px;
    height: 78px;
    min-height: 78px;
    padding: 14px 8px 9px;
    overflow: visible;
    align-items: center;
  }

  .rack-tile {
    width: min(98%, 52px);
  }

  .rack-tile .tile-glyph {
    font-size: clamp(1.26rem, 5.8vw, 1.54rem);
  }

  .rack-tile small {
    font-size: 0.62rem;
  }

  .rack-quick-actions {
    gap: 4px;
    margin-top: -4px;
  }

  #validateBtn,
  #shuffleBtn,
  #undoBtn,
  #passBtn,
  #exchangeBtn {
    grid-column: auto;
    grid-row: auto;
  }

  .action-icon-button {
    min-height: 54px;
    gap: 3px;
  }

  .action-icon-art {
    width: 38px;
    max-height: 38px;
  }

  .action-label {
    font-size: 0.64rem;
  }

  .word-score-badge {
    display: none;
  }

  .panel-lexicon {
    order: 6;
  }

  .panel-history {
    order: 7;
  }

  .panel-tools {
    order: 8;
  }

  .setup-modal {
    z-index: 6000;
    align-items: start;
    justify-items: center;
    padding: 8px;
    overflow: auto;
  }

  .setup-modal-card {
    width: min(100%, calc(100vw - 16px));
    min-height: 0;
    max-height: calc(100dvh - 16px);
    padding: 12px;
    overflow: auto;
    display: block;
    border-radius: 16px;
  }

  .setup-modal-back {
    top: 10px;
    right: 10px;
    min-height: 34px;
    padding: 0 11px;
    font-size: 0.7rem;
  }

  .setup-modal-header {
    gap: 4px;
    margin-bottom: 9px;
    padding-right: 82px;
  }

  .setup-modal-header .endgame-eyebrow {
    font-size: 0.62rem;
  }

  .setup-modal-header h3 {
    font-size: 1.02rem;
    line-height: 1.1;
  }

  .setup-modal-header .subtle {
    font-size: 0.72rem;
    line-height: 1.2;
  }

  .setup-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-height: 0;
    padding-bottom: 0;
  }

  .setup-section {
    min-height: auto;
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
  }

  .setup-section--avatars,
  .setup-section--details {
    align-content: start;
  }

  .setup-section .panel-head {
    gap: 2px;
  }

  .setup-section .panel-head h2 {
    font-size: 0.9rem;
  }

  .setup-section .panel-head .subtle {
    font-size: 0.68rem;
    line-height: 1.16;
  }

  .setup-field-grid,
  .setup-field-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .setup-field {
    gap: 4px;
  }

  .setup-field span {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }

  .setup-field input,
  .setup-field select {
    min-height: 36px;
    padding: 0 9px;
    border-radius: 10px;
    font-size: 0.8rem;
  }

  .setup-avatar-grid-wrap {
    max-height: clamp(160px, 26dvh, 190px);
    padding-right: 3px;
    overflow: auto;
  }

  .setup-avatar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .setup-avatar-option {
    gap: 5px;
    padding: 6px;
    border-radius: 12px;
  }

  .setup-avatar-option .avatar-unlock-badge {
    top: 5px;
    right: 5px;
    width: 21px;
    height: 21px;
    font-size: 0.62rem;
  }

  .setup-avatar-option .avatar-unlock-progress {
    max-width: 100%;
    padding: 3px 5px;
    font-size: 0.58rem;
  }

  .setup-avatar-thumb {
    border-radius: 10px;
  }

  .setup-avatar-name {
    font-size: 0.72rem;
    line-height: 1.05;
  }

  .setup-summary {
    font-size: 0.7rem;
    line-height: 1.22;
  }

  .setup-modal-actions {
    position: static;
    margin: 4px 0 0;
    padding-top: 2px;
    background: none;
  }

  .setup-modal-actions button {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 11px;
    font-size: 0.82rem;
  }
}

@media (max-width: 380px) {
  .platform-brand__tagline {
    max-width: 168px;
  }

  .topbar-timing {
    gap: 0;
    width: 34px;
  }

  .sound-toggle {
    padding-right: 0;
    padding-left: 0;
  }

  .sound-toggle-text {
    font-size: 0.62rem;
    letter-spacing: 0.055em;
  }

  .score-card {
    flex-basis: min(42vw, 166px);
  }

  .quick-match-row {
    padding-right: 4px;
    padding-left: 4px;
  }

  .action-label {
    font-size: 0.5rem;
  }
}

@media (max-width: 380px) and (max-height: 700px) {
  body[data-board-style="native-css"] .board-stage,
  .board-stage {
    width: min(100%, 350px);
  }

  .panel-status {
    padding-top: 3px;
    padding-bottom: 3px;
  }

  .panel-status .panel-head {
    display: none;
  }

  .panel-status .message {
    min-height: 24px;
    max-height: 24px;
    padding-top: 3px;
    padding-bottom: 3px;
  }

  .panel-status .lexicon-loading {
    min-height: 24px;
    margin-top: 0;
    padding-top: 3px;
    padding-bottom: 3px;
  }
}

@media (max-width: 640px) and (max-height: 760px) and (orientation: portrait) {
  .setup-modal {
    padding: 6px;
  }

  .setup-modal-card {
    width: min(100%, calc(100vw - 12px));
    max-height: calc(100dvh - 12px);
    padding: 9px;
    border-radius: 14px;
  }

  .setup-modal-back {
    top: 8px;
    right: 8px;
    min-height: 31px;
    padding: 0 9px;
    font-size: 0.64rem;
    letter-spacing: 0.03em;
  }

  .setup-modal-header {
    gap: 2px;
    margin-bottom: 6px;
    padding-right: 72px;
  }

  .setup-modal-header .endgame-eyebrow {
    font-size: 0.56rem;
  }

  .setup-modal-header h3 {
    font-size: 0.92rem;
    line-height: 1.05;
  }

  .setup-modal-header .subtle,
  .setup-section .panel-head .subtle {
    display: none;
  }

  .setup-layout {
    gap: 7px;
  }

  .setup-section {
    gap: 6px;
    padding: 8px;
    border-radius: 12px;
  }

  .setup-section .panel-head h2 {
    font-size: 0.82rem;
    line-height: 1.05;
  }

  .avatar-filter-bar--setup {
    margin-bottom: 6px;
    padding-bottom: 4px;
  }

  .avatar-search-field {
    gap: 4px;
    margin-bottom: 6px;
  }

  .avatar-search-field > span {
    font-size: 0.6rem;
  }

  .avatar-search-field input {
    min-height: 30px;
    padding: 0 9px;
    border-radius: 10px;
    font-size: 0.74rem;
  }

  .avatar-filter-bar {
    gap: 4px;
  }

  .avatar-filter-button {
    min-height: 24px;
    padding: 0 7px;
    font-size: 0.64rem;
  }

  .avatar-filter-empty {
    padding: 12px 10px;
    font-size: 0.78rem;
  }

  .setup-avatar-grid-wrap {
    max-height: clamp(150px, 25dvh, 172px);
    padding-right: 2px;
  }

  .setup-avatar-grid {
    gap: 6px;
  }

  .setup-avatar-option {
    gap: 4px;
    padding: 5px;
    border-radius: 10px;
  }

  .setup-avatar-thumb {
    border-radius: 9px;
  }

  .setup-avatar-name {
    font-size: 0.62rem;
    line-height: 1;
  }

  .setup-field-grid,
  .setup-field-grid--compact {
    gap: 6px;
  }

  .setup-field input,
  .setup-field select {
    min-height: 33px;
  }

  .setup-modal-actions button {
    min-height: 34px;
  }
}

@media (max-width: 639px) {
  .joker-picker.is-board-picker {
    position: fixed;
    top: var(--board-picker-top, 8px);
    left: var(--board-picker-left, 8px);
    width: var(--board-picker-width, calc(100vw - 16px));
    height: var(--board-picker-height, min(100vw, 420px));
    inset: auto;
    z-index: 82;
    padding: 8px;
    place-items: center;
  }

  .joker-picker.is-board-picker .joker-picker-card {
    width: min(94%, 420px);
    max-height: calc(var(--board-picker-height, 100dvh) - 16px);
    overflow: auto;
  }

  .confirm-modal.is-board-confirm {
    position: fixed;
    top: var(--board-confirm-top, 8px);
    left: var(--board-confirm-left, 8px);
    width: var(--board-confirm-width, calc(100vw - 16px));
    height: var(--board-confirm-height, min(100vw, 420px));
    inset: auto;
    z-index: 80;
    padding: 8px;
    place-items: center;
  }

  .confirm-modal.is-board-confirm .confirm-modal-card {
    width: min(92%, 340px);
    max-width: 340px;
  }

  .app-shell {
    padding-top: 0;
  }

  .coord {
    display: none !important;
  }

  body[data-board-style="classic-css"] .bonus,
  body[data-board-style="native-css"] .bonus {
    inset: 0;
    width: 100%;
    height: 100%;
    font-size: clamp(0.48rem, 2.05vw, 0.66rem);
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    text-transform: none;
    align-items: center;
    justify-items: center;
    place-items: center;
  }

  body[data-board-style="classic-css"] .bonus {
    color: rgba(34, 30, 23, 0.86);
  }

  body[data-board-style="native-css"] .bonus {
    color: rgba(255, 250, 230, 0.96);
  }

  body[data-board-style="classic-css"] .bonus:not([data-short-label="✦"]),
  body[data-board-style="native-css"] .bonus:not([data-short-label="✦"]) {
    font-size: 0;
  }

  body[data-board-style="classic-css"] .bonus:not([data-short-label="✦"])::after,
  body[data-board-style="native-css"] .bonus:not([data-short-label="✦"])::after {
    content: attr(data-short-label);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: clamp(0.48rem, 2.05vw, 0.66rem);
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    transform: translateY(-0.08em);
  }

  .site-header {
    width: calc(100% + 8px);
    margin: 0 -4px 6px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  body[data-board-style="native-css"] .board-stage,
  .board-stage {
    width: calc(100% + 8px);
    max-width: none;
    margin-right: -4px;
    margin-left: -4px;
    --ms-celebration-board-radius: 0px;
    border-radius: 0;
  }

  .rack {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 2px;
    align-items: end;
    margin-bottom: 4px;
    padding-top: 10px;
    padding-bottom: 14px;
    transform: translateY(-4px);
  }

  .rack-slot {
    min-width: 0;
  }

  .rack-tile {
    width: min(100%, 38px);
  }

  .rack-tile .tile-glyph {
    font-size: clamp(0.98rem, 4.4vw, 1.18rem);
  }

  .rack-tile small {
    font-size: 0.52rem;
  }

  .rack-quick-actions {
    width: min(100%, 300px);
    justify-self: center;
    gap: 2px;
    margin-top: 2px;
  }

  .score-grid {
    position: relative;
    margin: 7px -8px 0;
    padding: 0 8px 7px;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 8px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    scrollbar-width: none;
  }

  .score-grid::-webkit-scrollbar {
    display: none;
  }

  .score-card {
    flex: 0 0 min(67vw, 225px);
    scroll-snap-align: center;
    border-radius: 18px;
  }

  .score-card.active {
    border-radius: 19px;
  }

  .quick-match-row,
  #turnMeta.quick-match-row,
  .quick-match-row.quick-match-row-status {
    border-radius: 0;
  }

  .sidebar-right .panel-game-quick,
  .sidebar-left .scores,
  .sidebar-left .panel-status,
  .sidebar-left .panel-lexicon,
  .panel-game-quick,
  .scores,
  .score-grid,
  .panel-lexicon,
  .panel-status {
    border-radius: 0;
  }

  .quick-match-list {
    border-radius: 0;
  }

  .panel-lexicon {
    width: calc(100% + 8px);
    margin-right: -4px;
    margin-left: -4px;
    border-right: 0;
    border-left: 0;
  }

  .panel-status.is-endgame-access,
  .panel-status.is-endgame-access .endgame-status-access,
  .endgame-status-access {
    border-radius: 0;
  }
}

@media (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  .word-highlight {
    border-width: 2px;
  }

  .word-highlight.is-main {
    border-width: 3px;
  }

  .word-highlight.is-cross {
    border-width: 1.5px;
  }

  html,
  body {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .app-shell {
    display: grid;
    grid-template-columns: minmax(280px, min(52vw, calc(100dvh - 8px))) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(34px, auto) auto auto auto auto auto;
    gap: 0 4px;
    width: 100%;
    min-height: 100dvh;
    padding: 4px 4px 14px;
    overflow: visible;
  }

  .layout,
  .sidebar-left,
  .sidebar-right,
  .sidebar-guide-followup,
  .board-panel {
    display: contents;
  }

  .site-header {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    z-index: 7000;
    width: calc(100% + 8px);
    min-width: 0;
    margin: 0 -4px;
    padding: 3px 8px;
    border-radius: 0;
    border-right: 0;
    border-left: 0;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-rows: auto auto;
    gap: 0 5px;
    align-self: start;
    overflow: visible;
  }

  .platform-brand {
    grid-column: 1;
    grid-row: 1;
    gap: 5px;
    min-width: 0;
  }

  .platform-brand__icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  .platform-brand__copy {
    min-height: 0;
    gap: 0;
    display: none;
  }

  .platform-brand__name {
    max-width: none;
    color: #d7a860;
    font-size: clamp(0.56rem, 1.25vw, 0.68rem);
    font-weight: 400;
    letter-spacing: 0.14em;
  }

  .platform-brand__tagline,
  .online-mode-entry,
  .top-guide-button,
  .guide-link.top-guide-button {
    display: none !important;
  }

  .coord {
    display: none !important;
  }

  body[data-board-style="classic-css"] .bonus,
  body[data-board-style="native-css"] .bonus {
    inset: 0;
    width: 100%;
    height: 100%;
    font-size: clamp(0.44rem, 1.55vw, 0.62rem);
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    text-transform: none;
    align-items: center;
    justify-items: center;
    place-items: center;
  }

  body[data-board-style="classic-css"] .bonus:not([data-short-label="✦"]),
  body[data-board-style="native-css"] .bonus:not([data-short-label="✦"]) {
    font-size: 0;
  }

  body[data-board-style="classic-css"] .bonus:not([data-short-label="✦"])::after,
  body[data-board-style="native-css"] .bonus:not([data-short-label="✦"])::after {
    content: attr(data-short-label);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: clamp(0.44rem, 1.55vw, 0.62rem);
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    transform: translateY(-0.08em);
  }

  .site-game-title {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    justify-items: start;
    padding: 0;
    text-align: left;
    display: none;
  }

  .site-game-title .eyebrow {
    display: none;
  }

  .site-game-title h1 {
    color: #f1ead7;
    font-size: clamp(1.05rem, 2.8vw, 1.34rem);
    line-height: 0.96;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  .account-area {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .profile-trigger {
    min-width: 0;
    grid-template-columns: auto auto auto;
    gap: 6px;
    padding: 2px 7px 2px 2px;
    border-radius: 10px;
  }

  .profile-avatar {
    width: 28px;
    height: 28px;
  }

  .profile-copy {
    max-width: 68px;
  }

  .profile-copy strong {
    display: none;
  }

  .profile-copy span {
    color: #f8ead0;
    font-size: 0.54rem;
    line-height: 1;
  }

  .profile-level-star {
    width: 11px;
    height: 11px;
    margin-left: 1px;
  }

  .profile-chevron {
    font-size: 0.82rem;
  }

  .game-controls-bar {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    width: 40px;
  }

  .topbar-timing {
    display: inline-flex;
    width: 40px;
    gap: 0;
    flex-wrap: nowrap;
  }

  .sound-toggle {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 999px;
  }

  .sound-toggle-icon img {
    width: 20px;
    height: 20px;
  }

  .sound-toggle-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .platform-nav {
    grid-column: 4;
    grid-row: 1 / span 2;
    display: flex;
    align-self: center;
    justify-self: end;
    overflow: visible;
  }

  .platform-nav > .platform-nav__item {
    display: none;
  }

  .platform-nav-more {
    display: block;
  }

  .platform-nav-more__summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 999px;
    color: transparent;
    font-size: 0;
  }

  .platform-nav-more__summary::before {
    content: "";
    width: 15px;
    height: 2px;
    border-radius: 999px;
    background: #d7a860;
    color: #d7a860;
    box-shadow:
      0 -5px 0 currentColor,
      0 5px 0 currentColor;
  }

  .platform-nav-more__summary::after {
    content: none;
  }

  .platform-nav-more__dropdown {
    position: fixed;
    z-index: 9200;
    top: 6px;
    right: 6px;
    left: auto;
    width: min(280px, calc(100vw - 12px));
    min-width: 0;
    max-height: calc(100dvh - 12px);
    overflow: auto;
    padding: 10px;
    border-color: rgba(215, 168, 96, 0.46);
    border-radius: 12px;
    background: #0e1c16;
    box-shadow:
      0 20px 38px rgba(0, 0, 0, 0.44),
      inset 0 1px 0 rgba(247, 241, 227, 0.09);
  }

  .platform-nav-more__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 2px 9px;
    color: #d7a860;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .platform-nav-more__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(215, 168, 96, 0.36);
    border-radius: 999px;
    background: rgba(12, 23, 18, 0.88);
    color: #f6dfaa;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
  }

  .platform-nav-more:not([open]) .platform-nav-more__dropdown,
  .profile-menu:not([open]) .profile-dropdown {
    display: none !important;
  }

  .platform-nav-more__item,
  .platform-nav-more__item--mobile-only,
  .platform-nav-more__item--download,
  .platform-nav-more__item--primary {
    display: block;
  }

  .platform-nav-more__item {
    padding: 9px 10px;
    border-radius: 9px;
    font-size: 0.82rem;
  }

  .platform-nav-more__item--primary {
    margin-bottom: 4px;
    border: 1px solid rgba(246, 203, 111, 0.42);
    background:
      linear-gradient(180deg, rgba(229, 178, 92, 0.28), rgba(160, 103, 45, 0.2)),
      rgba(19, 34, 27, 0.96);
    color: #ffe8b2;
    font-weight: 900;
  }

  .platform-nav-more__item--download {
    margin-top: 3px;
    border: 1px solid rgba(246, 203, 111, 0.5);
    background:
      linear-gradient(180deg, rgba(255, 246, 214, 0.96), rgba(229, 176, 78, 0.96));
    color: #251707;
    font-weight: 900;
    text-align: center;
  }

  .profile-dropdown {
    position: fixed;
    z-index: 9300;
    top: 58px;
    right: 6px;
    width: min(220px, calc(100vw - 12px));
    min-width: 0;
    border-color: rgba(215, 168, 96, 0.46);
    background: #0e1c16;
  }

  .scores,
  .sidebar-left .scores,
  .sidebar-left .panel.scores {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    z-index: 1;
    align-self: stretch;
    min-width: 0;
    width: calc(100% + 8px) !important;
    margin: 0 -4px 0 !important;
    padding: 3px 0 2px !important;
    border-radius: 0 !important;
    border-right: 0;
    border-left: 0;
    overflow: hidden;
  }

  .scores .panel-head--with-icon {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    min-height: 23px;
    margin: 0 0 5px;
    padding: 0 8px;
    transform: none;
  }

  .scores .match-title-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }

  .scores .panel-head--with-icon h2 {
    flex: 0 0 auto;
    margin-right: auto;
    color: #fff3d7;
    font-size: 0.78rem;
    line-height: 1;
    letter-spacing: 0.06em;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  .scores .match-online-action {
    flex: 0 1 auto;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 22px;
    padding: 3px 7px;
    border: 1px solid rgba(215, 168, 96, 0.32);
    border-radius: 999px;
    background: rgba(9, 23, 18, 0.48);
    color: #f9e9c8;
    font-size: 0.56rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
  }

  .scores .match-online-action img {
    width: 12px;
    height: 12px;
  }

  .scores .match-online-action span {
    display: none;
  }

  .scores .notification-center {
    flex: 0 0 auto;
    justify-self: center;
    align-self: center;
    margin: 0;
  }

  .scores .notification-bell {
    width: 25px;
    height: 25px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .scores .notification-bell:hover,
  .scores .notification-bell:focus-visible,
  .scores .notification-center.is-open .notification-bell {
    transform: none;
    border-color: transparent;
    box-shadow: none;
  }

  .scores .notification-bell img {
    width: 20px;
    height: 20px;
  }

  .scores .online-reaction-control {
    flex: 0 0 auto;
  }

  .scores .online-match-rules-action {
    flex: 0 0 auto;
    justify-self: center;
    align-self: center;
    display: inline-grid;
    place-items: center;
    width: 27px;
    height: 27px;
    min-width: 27px;
    padding: 0;
    border: 1px solid rgba(215, 168, 96, 0.36);
    border-radius: 50%;
    background: rgba(14, 35, 28, 0.72);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .scores .match-timer {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #f9e9c8;
  }

  .scores .match-timer[hidden] {
    display: none;
  }

  .scores .match-timer__icon {
    width: 17px;
    height: 17px;
  }

  .scores .match-timer .game-timer-label,
  .scores .match-timer .game-timer-value {
    color: #fff3d7;
    font-size: 0.62rem;
    line-height: 1;
    white-space: nowrap;
  }

  .score-grid {
    display: flex;
    gap: 12px;
    height: 63px;
    width: 100%;
    margin: 0;
    padding: 0 8px 4px;
    border: 0 !important;
    border-radius: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: transparent;
    box-shadow: none;
  }

  .score-grid::-webkit-scrollbar {
    display: none;
  }

  .score-card {
    flex: 0 0 min(62%, 252px);
    min-height: 59px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 5px;
    padding: 4px 7px;
    border-radius: 17px;
    scroll-snap-align: center;
  }

  .score-card.active {
    border-radius: 18px;
  }

  .score-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }

  .score-card-body {
    gap: 3px;
    padding-right: 23px;
  }

  .score-name {
    font-size: 0.66rem;
    line-height: 1.06;
  }

  .score-player-copy .subtle {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.56rem;
    line-height: 1.08;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
  }

  .score-player-copy .score-ai-style {
    font-size: 0.52rem;
    line-height: 1.08;
  }

  .score-rack {
    display: block;
    margin-top: 2px;
    font-size: 0.6rem;
    line-height: 1.05;
    white-space: nowrap;
  }

  .score-value-stack {
    top: 5px;
    right: 5px;
    gap: 4px;
    min-width: 24px;
  }

  .score-value {
    font-size: 0.94rem;
  }

  .score-turn-ring {
    width: 25px;
    height: 25px;
  }

  .score-turn-ring-value {
    font-size: 0.5rem;
  }

  .panel.panel-game-quick {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
    width: calc(100% + 8px) !important;
    margin: 0 -4px !important;
    padding: 2px 8px !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(180deg, rgba(36, 62, 51, 0.28), rgba(8, 20, 16, 0.2)),
      #0e1c16 !important;
    box-shadow: none !important;
    overflow: visible;
  }

  .quick-new-game {
    display: inline-flex;
    min-height: 28px;
    gap: 5px;
    margin-bottom: 3px;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 0.66rem;
    line-height: 1;
    white-space: nowrap;
  }

  .quick-new-game-plus {
    width: 16px;
    height: 16px;
    font-size: 0.78rem;
  }

  .quick-match-list {
    display: grid;
    grid-template-columns: minmax(58px, 0.72fr) minmax(92px, 1fr) minmax(100px, 1.18fr);
    gap: 3px;
    margin: 0;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
  }

  .quick-match-row {
    min-height: 22px;
    gap: 4px;
    padding: 2px 6px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden;
    font-size: 0.6rem;
  }

  #turnMeta.quick-match-row,
  .quick-match-row.quick-match-row-status {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .quick-match-icon,
  .quick-match-icon-bag,
  .quick-match-icon-clock,
  .quick-match-icon-level {
    width: 15px;
    height: 15px;
  }

  .quick-match-value,
  .quick-turn-banner,
  #turnMeta .turn-meta-label,
  #turnMeta .quick-match-value {
    overflow: hidden;
    font-size: 0.6rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .panel.panel-status {
    grid-column: 2;
    grid-row: 4;
    min-width: 0;
    width: calc(100% + 8px) !important;
    margin: 0 -4px !important;
    padding: 4px 8px !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(180deg, rgba(36, 62, 51, 0.28), rgba(8, 20, 16, 0.2)),
      #0e1c16 !important;
    box-shadow: none !important;
    overflow: hidden;
  }

  .match-welcome-empty {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
    padding: 5px 8px;
    border-radius: 10px;
  }

  .match-welcome-title {
    font-size: 0.66rem;
    line-height: 1;
    letter-spacing: 0.055em;
  }

  .match-welcome-copy {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: 0.58rem;
    line-height: 1.08;
  }

  .match-welcome-action {
    grid-row: 1 / span 2;
    grid-column: 2;
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 9px;
    font-size: 0.62rem;
    white-space: nowrap;
  }

  .panel-status .panel-head {
    margin: 0;
    gap: 0;
  }

  .panel-status .panel-head h2 {
    font-size: 0.66rem;
    line-height: 1;
    letter-spacing: 0.11em;
  }

  .panel-status .panel-head .subtle,
  #lastMoveSummary {
    display: none;
  }

  .panel-status .message {
    min-height: 18px;
    max-height: 25px;
    padding: 2px 0;
    overflow: hidden;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff3d7;
    font-size: 0.64rem;
    line-height: 1.14;
  }

  .panel-status.is-endgame-access .endgame-status-access {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 7px;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .panel-status.is-endgame-access .endgame-status-access__eyebrow {
    grid-column: 1 / -1;
    font-size: 0.5rem;
  }

  .panel-status.is-endgame-access #endGameAccessText {
    overflow: hidden;
    font-size: 0.62rem;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .panel-status.is-endgame-access .endgame-status-access__button {
    min-height: 26px;
    margin: 0;
    padding: 4px 8px;
    border-radius: 9px;
    font-size: 0.62rem;
    white-space: nowrap;
  }

  .rack-card {
    grid-column: 2;
    grid-row: 5;
    align-self: start;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: -5px 0 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 2px 8px 2px;
  }

  .rack-header {
    display: none;
  }

  .rack {
    justify-self: center;
    grid-template-columns: repeat(10, minmax(0, 38px));
    justify-content: center;
    align-items: end;
    gap: 2px;
    width: min(100%, 394px);
    min-height: 55px;
    height: 55px;
    padding: 5px 6px 11px;
    transform: translateY(-10px);
    overflow: visible;
  }

  .rack-slot {
    min-width: 0;
    padding-bottom: 4px;
  }

  .rack-tile {
    width: min(100%, 38px);
  }

  .rack-tile .tile-glyph {
    font-size: clamp(1.04rem, 3.05vw, 1.18rem);
  }

  .rack-tile small {
    font-size: 0.52rem;
  }

  .rack-quick-actions {
    justify-self: center;
    grid-template-columns: repeat(5, 50px);
    justify-content: center;
    justify-items: center;
    gap: 9px;
    width: min(100%, 340px);
    margin-top: -10px;
    transform: translateY(-6px);
  }

  .rack-quick-actions #validateBtn,
  .rack-quick-actions #shuffleBtn,
  .rack-quick-actions #undoBtn,
  .rack-quick-actions #passBtn,
  .rack-quick-actions #exchangeBtn {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .rack-quick-actions #validateBtn {
    order: 1;
  }

  .rack-quick-actions #shuffleBtn {
    order: 2;
  }

  .rack-quick-actions #undoBtn {
    order: 3;
  }

  .rack-quick-actions #passBtn {
    order: 4;
  }

  .rack-quick-actions #exchangeBtn {
    order: 5;
  }

  .action-icon-button {
    width: 50px;
    min-height: 45px;
    gap: 2px;
  }

  .action-icon-art {
    width: 36px;
    max-height: 36px;
  }

  .action-label {
    font-size: 0.53rem;
    line-height: 1;
  }

  body[data-board-style="native-css"] .board-stage,
  .board-stage {
    grid-column: 1;
    grid-row: 1 / 7;
    align-self: start;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    --ms-celebration-board-radius: 0px;
    border-radius: 0;
  }

  .joker-picker.is-board-picker {
    position: fixed;
    top: var(--board-picker-top, 8px);
    left: var(--board-picker-left, 8px);
    width: var(--board-picker-width, min(52vw, 420px));
    height: var(--board-picker-height, min(100dvh, 420px));
    inset: auto;
    z-index: 12160;
    padding: 8px;
    place-items: center;
  }

  .joker-picker.is-board-picker .joker-picker-card {
    width: min(94%, 420px);
    max-height: calc(var(--board-picker-height, 100dvh) - 16px);
    overflow: auto;
  }

  .confirm-modal.is-board-confirm {
    position: fixed;
    top: var(--board-confirm-top, 8px);
    left: var(--board-confirm-left, 8px);
    width: var(--board-confirm-width, min(52vw, 420px));
    height: var(--board-confirm-height, min(100dvh, 420px));
    inset: auto;
    z-index: 12150;
    padding: 8px;
    place-items: center;
  }

  .confirm-modal.is-board-confirm .confirm-modal-card {
    width: min(92%, 340px);
    max-width: 340px;
  }

  .panel-lexicon,
  .panel-history,
  .panel-tools {
    display: grid;
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    margin: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .panel-lexicon {
    grid-column: 2;
    grid-row: 6;
    align-self: start;
    width: calc(100% + 8px);
    min-height: 72px;
    margin: -4px -4px 0;
    padding: 7px 10px 8px;
    border-radius: 0 !important;
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(36, 62, 51, 0.34), rgba(8, 20, 16, 0.28)),
      #0e1c16;
  }

  .panel-lexicon .board-header {
    display: block;
  }

  .panel-lexicon .enriched-word-panel {
    height: 62px;
    min-height: 62px;
    max-height: 62px;
    padding: 0;
    border-radius: 0 !important;
    overflow: auto;
  }

  .panel-lexicon .enriched-word-eyebrow {
    font-size: 0.58rem;
    line-height: 1;
  }

  .panel-lexicon .enriched-word-title {
    font-size: 0.72rem;
    line-height: 1.05;
  }

  .panel-lexicon .enriched-word-definition,
  .panel-lexicon .enriched-word-message,
  .panel-lexicon .enriched-word-notes,
  .panel-lexicon .enriched-word-compact,
  .panel-lexicon .enriched-word-missing-inline {
    font-size: 0.68rem;
    line-height: 1.16;
  }

  .panel-lexicon .enriched-word-content {
    max-height: 40px;
  }

  .panel-history {
    grid-column: 1 / -1;
    grid-row: 7;
    padding: 12px 16px;
  }

  .panel-history .panel-head {
    display: grid;
    gap: 2px;
  }

  .history,
  .panel-history:not(.is-expanded) .history {
    max-height: 128px;
  }

  .panel-history.is-expanded .history {
    max-height: min(46vh, 220px);
  }

  .panel-tools {
    grid-column: 1 / -1;
    grid-row: 8;
    gap: 10px;
    padding: 12px 16px;
  }

  .setup-modal {
    z-index: 12100;
    align-items: start;
    justify-items: center;
    padding: 8px;
    overflow: auto;
  }

  .setup-modal-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(820px, calc(100vw - 16px));
    height: calc(100dvh - 8px);
    max-height: calc(100dvh - 8px);
    padding: 9px 10px;
    overflow: hidden;
    border-radius: 12px;
    position: relative;
  }

  .setup-modal-header {
    gap: 2px;
    margin-bottom: 5px;
  }

  .setup-modal-header .endgame-eyebrow {
    font-size: 0.56rem;
  }

  .setup-modal-header h3 {
    font-size: 0.92rem;
    line-height: 1.05;
  }

  .setup-modal-header .subtle {
    font-size: 0.64rem;
    line-height: 1.12;
  }

  .setup-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 7px;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  .setup-section {
    gap: 5px;
    min-height: 0;
    max-height: 100%;
    padding: 7px;
    border-radius: 11px;
    overflow: auto;
    scrollbar-width: thin;
  }

  .setup-section--avatars,
  .setup-section--details {
    align-content: start;
  }

  .setup-section--details {
    scroll-padding-bottom: 48px;
  }

  .setup-section--avatars {
    grid-column: 1;
    grid-row: 1;
    overflow: hidden;
  }

  .setup-section--details {
    grid-column: 2;
    grid-row: 1;
  }

  .setup-section .panel-head h2 {
    font-size: 0.78rem;
  }

  .setup-section .panel-head .subtle {
    font-size: 0.6rem;
    line-height: 1.1;
  }

  .setup-field-grid,
  .setup-field-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .setup-field span {
    font-size: 0.56rem;
  }

  .setup-field input,
  .setup-field select {
    min-height: 29px;
    padding: 0 8px;
    border-radius: 9px;
    font-size: 0.72rem;
  }

  .setup-avatar-grid-wrap {
    height: min(48vh, 185px);
    max-height: min(48vh, 185px);
    overflow: auto;
  }

  .setup-avatar-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .setup-avatar-option {
    gap: 4px;
    padding: 4px 5px;
    border-radius: 10px;
  }

  .setup-avatar-thumb {
    width: clamp(58px, 16vh, 66px);
    height: clamp(58px, 16vh, 66px);
    justify-self: center;
    border-radius: 9px;
  }

  .setup-avatar-name {
    font-size: 0.62rem;
  }

  .setup-summary {
    font-size: 0.62rem;
    line-height: 1.15;
  }

  .setup-modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    width: auto;
    margin-top: 5px;
    padding-top: 6px;
    padding-bottom: 1px;
    justify-content: flex-end;
    background:
      linear-gradient(180deg, rgba(14, 28, 22, 0), rgba(14, 28, 22, 0.96) 34%),
      rgba(14, 28, 22, 0.96);
  }

  .setup-modal-actions button {
    min-height: 32px;
    padding: 0 10px;
    border-radius: 9px;
    font-size: 0.72rem;
  }

  .endgame-screen {
    z-index: 15000;
    align-items: start;
    padding: 10px 8px;
    overflow: auto;
  }

  .endgame-card {
    width: min(92vw, 760px);
    max-height: calc(100dvh - 20px);
    margin: 0 auto;
  }

  .endgame-hero--ceremony {
    min-height: 168px;
    padding: 14px 12px;
    gap: 8px;
  }

  .endgame-hero-palm {
    width: clamp(34px, 10vw, 52px);
    max-height: 112px;
  }

  .endgame-hero-kicker {
    letter-spacing: 0.24em;
    font-size: 0.76rem;
  }

  .endgame-hero--ceremony .endgame-hero-visual {
    width: 78px;
    height: 78px;
    border-radius: 22px;
  }

  .endgame-hero-avatar {
    border-radius: 18px;
  }

  .endgame-victory-title {
    gap: 8px;
    flex-wrap: wrap;
  }

  .endgame-victory-palm {
    width: clamp(28px, 8vw, 42px);
  }

  .endgame-winner-crown {
    width: clamp(24px, 7vw, 32px);
    margin-left: -2px;
  }
}

/* P4.13D2.3b — correctif ciblé d'un effet de bord du grid 2 colonnes
   "jeu" (.app-shell, voir plus haut dans ce meme breakpoint
   max-width:932px/max-height:480px/landscape) : .layout passe en
   display:contents a cette taille, donc TOUS ses enfants directs deviennent
   des items du grid .app-shell (2 colonnes : ~52vw pour le plateau/sidebars,
   le reste pour rien). Les sections de jeu (sidebar-left/droite, board-panel,
   header) ont deja un placement explicite (grid-column/grid-row, voir plus
   haut) ; .seo-game-guide (contenu SEO sous le plateau, AUCUN rapport avec le
   jeu) n'en a PAS et se retrouve donc auto-placee dans la 1re colonne etroite
   (~382px mesures a 844px de large) au lieu de profiter de la largeur totale
   de l'ecran. Un seul correctif : lui redonner explicitement toute la
   largeur du grid. Ne touche a AUCUN element du plateau/sidebars/header
   (aucun selecteur en commun), aucun impact gameplay. */
@media (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  .seo-game-guide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 932px) and (orientation: landscape) {
  .endgame-hero--ceremony {
    min-height: 130px;
    padding-block: 10px;
  }

  .endgame-hero-palm {
    width: 34px;
    max-height: 86px;
  }

  .endgame-hero--ceremony .endgame-hero-visual {
    width: 62px;
    height: 62px;
    border-radius: 18px;
  }

  .endgame-hero-kicker {
    display: none;
  }

  .endgame-victory-palm {
    width: 28px;
  }

  .endgame-winner-crown {
    width: 24px;
  }
}


/* Garde-fou : le menu profil reste opaque et au-dessus des panneaux de jeu. */
.profile-menu[open],
.account-menu__connected[open],
.site-header:has(.profile-menu[open]),
.site-header:has(.account-menu__connected[open]),
.account-area:has(.profile-menu[open]),
.account-area:has(.account-menu__connected[open]) {
  position: relative;
  z-index: 12250 !important;
}

.account-menu__connected[open] .account-menu__dropdown {
  z-index: 12260 !important;
  background:
    linear-gradient(180deg, rgba(17, 48, 38, 0.99), rgba(7, 22, 17, 0.995)),
    #0e1c16 !important;
  opacity: 1 !important;
  isolation: isolate;
}

.account-menu__connected[open] .account-menu__dropdown > .profile-dropdown__close {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  z-index: 6;
}

/* PASSE B4 — bloc "Compte Agora" (onglet Apercu de la grande fenetre
   profil). Herite du cadre .local-profile-section (border/bg/radius/h3 or
   via deferred-ui.css) ; ici : identite compacte + rangee d'actions de la
   meme famille visuelle que .local-profile-editor__actions. Bloc
   SECONDAIRE : compact, jamais dominant, aucune stat dupliquee. */
.local-profile-account__note {
  margin-top: 8px !important;
  color: rgba(255, 247, 232, 0.72) !important;
  font-weight: 700 !important;
  line-height: 1.4;
}

.local-profile-account__note[hidden] {
  display: none;
}

.local-profile-account__identity {
  display: grid;
  gap: 2px;
  margin-top: 8px;
}

.local-profile-account__identity[hidden] {
  display: none;
}

.local-profile-account__identity strong {
  color: #fff7e8;
  font-size: 1.02rem;
  line-height: 1.2;
}

.local-profile-account__country {
  color: rgba(247, 241, 227, 0.82);
  font-size: 0.82rem;
  font-weight: 700;
}

.local-profile-verified-buckets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.local-profile-verified-buckets--turns {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}

.local-profile-verified-bucket {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(215, 168, 96, 0.24);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 247, 232, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(11, 34, 26, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 232, 0.08),
    0 10px 20px rgba(0, 0, 0, 0.14);
}

.local-profile-verified-bucket h4 {
  margin: 0 0 10px;
  color: #f4d99f;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.18;
}

.local-profile-verified-bucket .local-profile-online-format__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  color: rgba(247, 241, 227, 0.72);
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.25;
}

.local-profile-verified-bucket .local-profile-online-format__row + .local-profile-online-format__row {
  margin-top: 6px;
  border-top: 1px solid rgba(215, 168, 96, 0.13);
}

.local-profile-verified-bucket .local-profile-online-format__row strong {
  color: #fff7e8;
  font-size: 0.84rem;
  font-weight: 900;
  text-align: right;
}

.local-profile-account__country[hidden] {
  display: none;
}

.local-profile-account__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.local-profile-account__actions button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(215, 168, 96, 0.34);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.1), rgba(255, 246, 213, 0.03)),
    rgba(7, 22, 17, 0.7);
  color: #fff7e8;
  font-weight: 900;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease;
}

.local-profile-account__actions button[hidden] {
  display: none;
}

.local-profile-account__actions #localProfileAccountSignupBtn,
.local-profile-account__actions #localProfileAccountStatsBtn {
  background:
    linear-gradient(180deg, rgba(255, 236, 178, 0.2), rgba(215, 168, 96, 0.1)),
    rgba(10, 35, 27, 0.82);
  color: #ffe4a8;
}

.local-profile-account__actions button:hover,
.local-profile-account__actions button:focus-visible {
  border-color: rgba(255, 230, 167, 0.62);
  outline: none;
}

.profile-menu[open] .profile-dropdown {
  z-index: 12260 !important;
  background:
    linear-gradient(180deg, rgba(17, 48, 38, 0.99), rgba(7, 22, 17, 0.995)),
    #0e1c16 !important;
  opacity: 1 !important;
  isolation: isolate;
}

.profile-menu[open] .profile-dropdown > * {
  position: relative;
  z-index: 1;
}

.profile-menu[open] .profile-dropdown > .profile-dropdown__close {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  z-index: 6;
}

@media (max-width: 1180px) {
  .profile-dropdown {
    min-width: 0;
  }
}

@media (min-width: 721px) and (max-width: 1180px) {
  #localProfileModal.local-profile-modal {
    align-items: stretch;
    padding: 18px 24px;
  }

  .local-profile-card {
    display: flex;
    width: min(92vw, 820px);
    max-height: calc(100dvh - 36px);
    flex-direction: column;
    overflow: hidden;
  }

  .local-profile-tabs {
    flex: 0 0 auto;
  }

  .local-profile-panels {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding: 0 6px 72px 0;
  }

  .local-profile-actions {
    flex: 0 0 auto;
  }

  .profile-reward-grid {
    gap: 9px;
  }

  .profile-challenges__grid {
    gap: 9px;
  }

  .profile-challenge-card {
    flex-basis: min(286px, 58vw);
  }
}

@media (max-width: 720px) {
  .local-profile-modal {
    align-items: flex-start;
    justify-items: center;
    min-height: 100dvh;
    padding: max(8px, env(safe-area-inset-top, 0px)) 8px max(8px, env(safe-area-inset-bottom, 0px));
    overflow: auto;
  }

  #localProfileModal.local-profile-modal .local-profile-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: calc(100dvh - 16px);
    min-height: 0;
    padding: 14px 12px 12px;
    border-radius: 18px;
    overflow: hidden;
  }

  #localProfileModal.local-profile-modal .local-profile-tabs {
    flex: 0 0 auto;
    margin: 14px 36px 12px 0;
  }

  #localProfileModal.local-profile-modal .local-profile-tabs button {
    min-height: 34px;
    padding-inline: 11px;
    font-size: 0.78rem;
  }

  #localProfileModal.local-profile-modal .local-profile-panels {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding: 0 3px 8px 0;
    -webkit-overflow-scrolling: touch;
  }

  .local-profile-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 12px;
    padding: 16px 14px;
  }

  .local-profile-close {
    top: 8px;
    right: 8px;
  }

  .local-profile-avatar {
    width: 104px;
    height: 104px;
    border-radius: 18px;
  }

  .profile-challenges__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .profile-challenges__grid {
    gap: 8px;
  }

  .profile-challenge-card {
    flex-basis: min(286px, 82vw);
    min-height: 110px;
  }

  body:has(.profile-menu[open]) .scores .notification-center,
  body:has(.local-profile-modal:not([hidden])) .notification-center {
    display: none;
  }

  .local-profile-status {
    display: grid;
    text-align: left;
  }

  .profile-trophy-current {
    width: min(100%, 240px);
    align-self: auto;
  }

  .profile-reward-grid {
    gap: 8px;
  }

  .profile-reward-current-showcase {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .endgame-penalty-rack {
    flex-wrap: wrap;
    gap: 4px;
  }

  .endgame-penalty-tile {
    width: 31px;
    height: 30px;
  }

  .profile-reward-progress-head {
    display: grid;
    gap: 5px;
    text-align: left;
  }

  .profile-reward-progress-metrics {
    grid-template-columns: 1fr;
  }

  .local-profile-status strong {
    text-align: left;
  }

  .local-profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .local-profile-records,
  .local-profile-modes,
  .local-profile-saved-game__details,
  .local-profile-recent-summary-cards,
  .local-profile-online-list,
  .local-profile-stats-grid,
  .local-profile-difficulty-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .local-profile-match-card__head,
  .local-profile-match-card__score {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
}

@media (max-width: 430px) {
  .local-profile-stats,
  .local-profile-records,
  .local-profile-modes,
  .local-profile-saved-game__details,
  .local-profile-recent-summary-cards,
  .local-profile-online-list,
  .local-profile-stats-grid,
  .local-profile-difficulty-grid {
    grid-template-columns: 1fr;
  }

  .local-profile-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

@media (max-height: 480px) and (orientation: landscape) {
  #localProfileModal.local-profile-modal {
    align-items: start;
    justify-items: center;
    min-height: 100dvh;
    padding: max(4px, env(safe-area-inset-top, 0px)) 8px max(4px, env(safe-area-inset-bottom, 0px));
    overflow: auto;
  }

  #localProfileModal.local-profile-modal .local-profile-card {
    display: flex;
    width: min(94vw, 760px);
    max-height: calc(100dvh - 8px);
    min-height: 0;
    flex-direction: column;
    padding: 10px 12px 8px;
    overflow: hidden;
  }

  #localProfileModal.local-profile-modal .local-profile-tabs {
    min-height: 34px;
    margin: 0 44px 6px 0;
    padding: 2px 0 4px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  #localProfileModal.local-profile-modal .local-profile-tabs button {
    min-height: 30px;
    padding-inline: 9px;
    font-size: 0.7rem;
    line-height: 1;
  }

  #localProfileModal.local-profile-modal .local-profile-panels {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    padding: 0 3px 4px 0;
    -webkit-overflow-scrolling: touch;
  }

  .local-profile-hero {
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-items: stretch;
    text-align: left;
    gap: 12px;
    padding: 9px 12px;
  }

  .local-profile-avatar {
    width: 74px;
    height: 74px;
    border-radius: 16px;
  }

  .local-profile-heading h2 {
    font-size: 2rem;
  }

  .local-profile-level-line {
    margin-top: 4px;
  }

  .local-profile-status,
  .local-profile-section {
    margin-top: 10px;
    padding: 12px;
  }

  .profile-trophy-current {
    width: 116px;
    min-width: 116px;
    align-self: stretch;
    padding: 7px;
  }

  .profile-trophy-image {
    width: 52px;
    height: 52px;
  }

  .profile-trophy-current strong {
    font-size: 0.78rem;
  }

  .profile-trophy-current span {
    font-size: 0.58rem;
  }

  .profile-reward-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .profile-reward-card .profile-trophy-image {
    width: 54px;
    height: 54px;
  }

  .profile-reward-current-showcase {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: stretch;
    text-align: left;
    gap: 10px;
    padding: 10px;
  }

  .profile-reward-current-showcase .profile-trophy-image,
  .profile-reward-empty-trophy {
    width: 58px;
    height: 58px;
  }

  .profile-reward-current-showcase strong {
    font-size: 1.05rem;
  }

  .profile-reward-current-showcase p,
  .profile-reward-next p,
  .profile-reward-card p {
    font-size: 0.78rem;
  }

  .profile-reward-grid {
    gap: 8px;
  }

  .profile-reward-card {
    flex-basis: min(286px, 82vw);
    gap: 8px;
    padding: 9px;
  }
}
/* Ajustement manuel - signature diplôme niveau 40 */
.diploma-certificate.is-level-40-certificate .diploma-certificate__direction {
  position: absolute !important;
  right: 6.2% !important;
  bottom: 7.8% !important;
  min-width: 190px;
  text-align: center;
  z-index: 9;
  transform: translateY(-70px) !important;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__direction strong {
  display: block;
  color: #173021;
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__direction strong::after {
  content: "";
  display: block;
  width: 78%;
  height: 1px;
  margin: 0.16em auto 0.28em;
  background: #8e979e;
}

.diploma-certificate.is-level-40-certificate .diploma-certificate__direction span {
  display: block;
  color: #5f6b74;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.48rem, 0.9vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Nettoyage visuel - niveau 40 */
.diploma-certificate.is-level-40-certificate .diploma-certificate__direction strong::after {
  content: none !important;
  display: none !important;
}

.diploma-certificate.is-level-40-certificate .diploma-level40-divider,
.diploma-certificate.is-level-40-certificate .diploma-level40-divider::before,
.diploma-certificate.is-level-40-certificate .diploma-level40-divider::after {
  content: none !important;
  display: none !important;
}

/* Ajustement final signature + séparateurs mobile - diplôme niveau 40 */
.diploma-certificate.is-level-40-certificate .diploma-certificate__direction strong::after {
  content: "";
  display: block !important;
  width: 22% !important;
  max-width: 110px !important;
  height: 1px;
  margin: 0.1em auto 0.28em;
  background: #8e979e;
}

/* Mobile : ligne signature plus courte + suppression des séparateurs stats */
@media (max-width: 640px) {
  .diploma-certificate.is-level-40-certificate .diploma-certificate__direction strong::after {
    width: 18% !important;
    max-width: 48px !important;
  }

  .diploma-certificate.is-level-40-certificate .diploma-certificate__stats div::before,
  .diploma-certificate.is-level-40-certificate .diploma-certificate__stats div::after,
  .diploma-certificate.is-level-40-certificate .diploma-certificate__stats dd::before,
  .diploma-certificate.is-level-40-certificate .diploma-certificate__stats dd::after {
    content: none !important;
    display: none !important;
  }

  .diploma-certificate.is-level-40-certificate .diploma-certificate__stats {
    border: 0 !important;
  }
}
/* Mobile - devise niveau 40 moins haute pour éviter le chevauchement */
@media (max-width: 640px) {
  .diploma-certificate.is-level-40-certificate .diploma-certificate__motto {
    bottom: 40% !important;
    width: 82% !important;
    transform: translate(-50%, -12px) !important;
    font-size: clamp(0.36rem, 1.35vw, 0.52rem);
    line-height: 1.1;
    z-index: 7;
  }
}

/* Diplôme niveau 50 : copie du niveau 40 avec palette suprême. */
.diploma-certificate.is-level-50-certificate {
  background:
    radial-gradient(circle 420px at 12% 14%, rgba(202, 178, 106, 0.2) 0%, transparent 70%),
    radial-gradient(circle 380px at 88% 82%, rgba(64, 140, 96, 0.26) 0%, transparent 72%),
    linear-gradient(135deg, #1d3d2b 0%, #17311f 40%, #122718 70%, #0e2418 100%);
}

.diploma-certificate.is-level-50-certificate::before {
  border-color: #c8a74d;
  box-shadow:
    0 0 0 8px #1a3527,
    0 0 0 10px rgba(200, 167, 77, 0.68),
    0 24px 60px rgba(0, 0, 0, 0.55);
}

.diploma-certificate.is-level-50-certificate::after {
  border-color: rgba(185, 143, 45, 0.55);
}

.diploma-certificate.is-level-50-certificate .diploma-certificate__level40-decor::before,
.diploma-certificate.is-level-50-certificate .diploma-certificate__level40-decor::after,
.diploma-certificate.is-level-40-certificate:not(.is-level-50-certificate) .diploma-level40-arc {
  display: none;
}

.diploma-certificate.is-level-50-certificate .diploma-level40-arc {
  position: absolute;
  top: 50%;
  display: block;
  width: clamp(70px, 9vw, 135px);
  transform: translateY(-50%);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.16));
  opacity: 0.96;
}

.diploma-certificate.is-level-50-certificate .diploma-level40-arc img {
  display: block;
  width: 100%;
  height: auto;
}

.diploma-certificate.is-level-50-certificate .diploma-level40-arc.is-left {
  top: 350px;
  left: -120px;
  right: auto;
}

.diploma-certificate.is-level-50-certificate .diploma-level40-arc.is-right {
  top: 230px;
  right: -120px;
  left: auto;
}

.diploma-certificate.is-level-50-certificate .diploma-level40-palm {
  display: none;
}

.diploma-certificate.is-level-50-certificate .diploma-certificate__brand span,
.diploma-certificate.is-level-50-certificate .diploma-certificate__content h2,
.diploma-certificate.is-level-50-certificate .diploma-certificate__direction strong {
  color: #2f250d;
}

.diploma-certificate.is-level-50-certificate .diploma-certificate__brand strong,
.diploma-certificate.is-level-50-certificate #diplomaPreviewText,
.diploma-certificate.is-level-50-certificate .diploma-certificate__stats dt,
.diploma-certificate.is-level-50-certificate .diploma-certificate__direction span,
.diploma-certificate.is-level-50-certificate .diploma-certificate__qr span {
  color: #7f6f4a;
}

.diploma-certificate.is-level-50-certificate .diploma-certificate__content h2::after {
  background: #b98f2d;
}

.diploma-certificate.is-level-50-certificate .diploma-certificate__direction strong::after {
  content: "";
  display: block;
  width: 38%;
  max-width: 86px;
  height: 1px;
  margin: 0.16em auto 0.28em;
  background: #b98f2d;
}

.diploma-certificate.is-level-50-certificate .diploma-certificate__direction {
  border: 0 !important;
}

.diploma-certificate.is-level-50-certificate .diploma-certificate__direction::before,
.diploma-certificate.is-level-50-certificate .diploma-certificate__direction::after {
  content: none !important;
  display: none !important;
}

/* Niveau 50 - sous-titre et ligne décorative séparés */
.diploma-certificate.is-level-50-certificate .diploma-certificate__brand {
  position: relative;
}

.diploma-certificate.is-level-50-certificate .diploma-certificate__brand span {
  position: relative;
  display: block;
  transform: translateY(-16px) !important;
  z-index: 2;
}

/* On désactive la ligne attachée directement au texte */
.diploma-certificate.is-level-50-certificate .diploma-certificate__brand span::after {
  content: none !important;
  display: none !important;
}

/* On recrée la ligne + losange indépendamment du texte */
.diploma-certificate.is-level-50-certificate .diploma-certificate__brand::after {
  content: "♦";
  position: absolute;
  left: 50%;
  top: calc(100% + 0.75em);
  transform: translateX(-50%);
  display: block;
  width: min(38vw, 460px);
  color: #b98f2d;
  font-size: clamp(0.72rem, 1.1vw, 1rem);
  line-height: 1;
  text-align: center;
  background:
    linear-gradient(
      to right,
      transparent 0%,
      transparent 8%,
      rgba(185, 143, 45, 0.18) 8%,
      rgba(185, 143, 45, 0.55) 47%,
      transparent 47%,
      transparent 53%,
      rgba(185, 143, 45, 0.55) 53%,
      rgba(185, 143, 45, 0.18) 92%,
      transparent 92%,
      transparent 100%
    );
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: center;
}

.diploma-certificate.is-level-50-certificate .diploma-certificate__rank {
  background: linear-gradient(160deg, #8a6519, #c8a74d 35%, #fff2b7 55%, #b98f2d 80%);
  background-clip: text;
  color: transparent;
  font-size: clamp(1rem, 2.55vw, 2.55rem);
  gap: 0.42em;
}

.diploma-certificate.is-level-50-certificate .diploma-certificate__rank::before {
  content: "NIVEAU 50";
  border-color: #c8a74d;
  background: linear-gradient(160deg, #102b1f, #1a3527 55%, #0b2118);
  color: #c8a74d;
}

.diploma-certificate.is-level-50-certificate .diploma-certificate__stats div {
  border-right-color: #c8a74d;
}

/* Niveau 50 - agrandir légèrement les textes des statistiques */
.diploma-certificate.is-level-50-certificate .diploma-certificate__stats dt {
  font-size: clamp(0.46rem, 0.9vw, 0.78rem) !important;
  letter-spacing: 0.13em !important;
  line-height: 1.05 !important;
}

.diploma-certificate.is-level-50-certificate .diploma-certificate__stats dd {
  font-size: clamp(0.68rem, 1.08vw, 0.96rem) !important;
  line-height: 1.05 !important;
}

.diploma-certificate.is-level-50-certificate .diploma-certificate__signature {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.diploma-certificate.is-level-50-certificate .diploma-certificate__qr {
  top: auto !important;
  bottom: 16.2% !important;
  left: 10.9% !important;
  transform: none !important;
}

.diploma-certificate.is-level-50-certificate .diploma-certificate__stats {
  position: absolute;
  bottom: 17.7%;
  left: 26%;
}

.diploma-certificate.is-level-50-certificate .diploma-certificate__direction {
  position: absolute !important;
  left: 72% !important;
  right: auto !important;
  bottom: 5.2% !important;
  width: 18% !important;
  text-align: center;
  z-index: 9;
}

.diploma-certificate.is-level-50-certificate .diploma-certificate__motto {
  position: absolute !important;
  top: 85% !important;
  bottom: auto !important;
  left: 31% !important;
  right: auto !important;
  width: 42% !important;
  text-align: center;
  z-index: 9;
  transform: none !important;
}

@media (max-width: 820px) {
  .diploma-certificate.is-level-50-certificate .diploma-certificate__rank {
    top: 54.5%;
    font-size: clamp(0.92rem, 2.15vw, 1.9rem);
  }

  .diploma-certificate.is-level-50-certificate .diploma-certificate__phrase {
    top: 66.5%;
  }

  .diploma-certificate.is-level-50-certificate .diploma-certificate__motto {
  left: 30% !important;
  right: auto !important;
  bottom: 4.4% !important;
  width: 44% !important;
  transform: translateY(6px) !important;
  text-align: center;
  z-index: 9;
}

/* Niveau 50 - arcs mobile vers l'extérieur avec vide près du cadre intérieur */
.diploma-certificate.is-level-50-certificate .diploma-level40-arc {
  width: clamp(52px, 15vw, 78px) !important;
  transform: translateY(-50%) !important;
  z-index: 2;
  pointer-events: none;
}

.diploma-certificate.is-level-50-certificate .diploma-level40-arc.is-left {
  top: 54% !important;
  left: clamp(-88px, -18vw, -54px) !important;
  right: auto !important;
}

.diploma-certificate.is-level-50-certificate .diploma-level40-arc.is-right {
  top: 36% !important;
  right: clamp(-88px, -18vw, -54px) !important;
  left: auto !important;
}

}

/* Niveau 50 - signature : garder une seule ligne courte */
.diploma-certificate.is-level-50-certificate .diploma-certificate__direction,
.diploma-certificate.is-level-50-certificate .diploma-certificate__direction strong,
.diploma-certificate.is-level-50-certificate .diploma-certificate__direction span {
  border: 0 !important;
  box-shadow: none !important;
}

.diploma-certificate.is-level-50-certificate .diploma-certificate__direction::before,
.diploma-certificate.is-level-50-certificate .diploma-certificate__direction::after,
.diploma-certificate.is-level-50-certificate .diploma-certificate__direction span::before,
.diploma-certificate.is-level-50-certificate .diploma-certificate__direction span::after {
  content: none !important;
  display: none !important;
}

.diploma-certificate.is-level-50-certificate .diploma-certificate__direction strong::after {
  content: "" !important;
  display: block !important;
  width: 110px !important;
  max-width: 110px !important;
  min-width: 110px !important;
  height: 1px !important;
  margin: 0.12em auto 0.28em !important;
  background: #b98f2d !important;
}

/* ONLINE-0D-B.7.3.5 — repositionnement du statut EN LIGNE : retire de
   l'ancien header MATCH (#onlineGameBadge, supprime — chevauchait le chrono
   circulaire #gameTimer, voir index.html), reutilise desormais la zone
   normalement dediee a la difficulte LOCAL (#turnMeta, sidebar "Controles
   rapides"). #turnMeta possede deja plusieurs surcharges responsive de
   grid-template-columns (base + breakpoints existants, non modifies) ;
   !important cible ici uniquement les quelques proprietes qui doivent
   gagner sur TOUTES ces surcharges sans avoir a les dupliquer une a une.
   Pastille/pulsation reprises telles quelles de l'ancien .online-game-badge
   (meme keyframe onlineMatchBadgePulse, meme garde prefers-reduced-motion),
   agrandies pour rester lisibles dans ce nouvel emplacement plus visible. */
#turnMeta.is-online-mode {
  grid-template-columns: 1fr !important;
}

#turnMeta.is-online-mode .quick-match-icon,
#turnMeta.is-online-mode .turn-meta-label,
#turnMeta.is-online-mode .quick-match-value {
  display: none !important;
}

.turn-meta-online-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border: 1px solid rgba(215, 168, 96, 0.45);
  border-radius: 999px;
  background: rgba(215, 168, 96, 0.16);
  color: #efd39b;
  font-size: 0.98rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.turn-meta-online-badge[hidden] {
  display: none;
}

.turn-meta-online-badge::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #e25042;
  box-shadow: 0 0 0 3px rgba(226, 80, 66, 0.16);
  animation: onlineMatchBadgePulse 2.1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .turn-meta-online-badge::before {
    animation: none;
  }
}

@media (max-width: 480px) {
  .turn-meta-online-badge {
    gap: 8px;
    padding: 7px 14px;
    font-size: 0.86rem;
  }

  .turn-meta-online-badge::before {
    width: 9px;
    height: 9px;
  }
}

/* ONLINE-0D-C.3 — mini-notification premium de changement de tour ("X passe
   son tour" puis "A Y de jouer"). Ancree en haut du plateau (#boardStage,
   deja position:relative — voir .word-highlights/.master-move-celebration
   pour le meme systeme de calage), jamais un blocage (pointer-events:none,
   pas de backdrop, pas de modale) : le plateau reste l'element principal.
   z-index 50, sous .online-pregame-overlay (60, plein ecran, mutuellement
   exclusif en pratique : le toast ne se declenche que pendant un gameplay
   deja deverrouille). */
.online-turn-toast {
  position: absolute;
  top: clamp(8px, 2vh, 18px);
  left: 50%;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(86%, 380px);
  padding: 9px 18px 9px 12px;
  border: 1px solid rgba(215, 168, 96, 0.4);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(34, 61, 48, 0.96), rgba(6, 24, 17, 0.96));
  color: #fff7e8;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 246, 223, 0.08);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.online-turn-toast[hidden] {
  display: none;
}

.online-turn-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.online-turn-toast__avatar {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(215, 168, 96, 0.4);
}

.online-turn-toast__avatar[hidden] {
  display: none;
}

.online-turn-toast__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ONLINE-0D-C.7-E.1 — avertissement de fin imminente STALLED : meme
   composant que les toasts PASS/EXCHANGE/TIMEOUT, legerement plus visible
   (bordure ambre plus marquee, jamais de rouge agressif) et texte plus
   long autorise a passer sur deux lignes plutot que d'etre tronque. */
.online-turn-toast.is-stalled-warning {
  max-width: min(90%, 420px);
  border-color: rgba(230, 173, 74, 0.75);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(230, 173, 74, 0.22),
    inset 0 1px 0 rgba(255, 246, 223, 0.08);
}

.online-turn-toast.is-stalled-warning .online-turn-toast__text {
  white-space: normal;
  text-overflow: clip;
}

@media (max-width: 480px) {
  .online-turn-toast.is-stalled-warning {
    max-width: min(94%, 340px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .online-turn-toast {
    transition: opacity 0.01ms linear;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 480px) {
  .online-turn-toast {
    max-width: min(92%, 320px);
    padding: 7px 14px 7px 10px;
    font-size: 0.82rem;
  }

  .online-turn-toast__avatar {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 640px) and (orientation: portrait) {
  .site-game-title {
    min-width: 0;
    max-width: 100%;
  }

  .site-game-title .eyebrow {
    display: none;
  }

  .site-game-title h1 {
    font-size: clamp(0.92rem, 3.8vw, 1.08rem);
    line-height: 0.96;
    white-space: nowrap;
  }
}

@media (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  .site-game-title {
    display: grid;
    min-width: 0;
    max-width: 100%;
  }

  .site-game-title .eyebrow {
    display: none;
  }

  .site-game-title h1 {
    font-size: clamp(0.88rem, 2.35vw, 1rem);
    line-height: 0.94;
    white-space: nowrap;
  }
}

@media (max-width: 700px) and (max-height: 420px) and (orientation: landscape) {
  .site-game-title {
    display: none;
  }
}

@media (min-width: 650px) and (max-width: 700px) and (max-height: 390px) and (orientation: landscape) {
  .account-auth button {
    padding: 7px 11px;
    font-size: 0.88rem;
  }
}

/* Finition responsive du header PROFIL LOCAL : identité en lignes séparées,
   sans interaction avec la logique compte/avatar/progression. */
.local-profile-card .local-profile-hero {
  align-items: start;
}

.local-profile-card .local-profile-heading {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: 6px;
}

.local-profile-card #localProfileTitle {
  overflow-wrap: anywhere;
  font-size: clamp(1.7rem, 3vw, 2.6rem) !important;
  line-height: 1.02 !important;
}

.local-profile-card .local-profile-country {
  display: inline-flex !important;
  align-items: center;
  gap: 8px !important;
  min-width: 0;
  max-width: 100%;
}

.local-profile-card .local-profile-country .country-flag-mini {
  margin: 0 !important;
}

.local-profile-card .local-profile-country span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.local-profile-card .local-profile-level-line {
  display: inline-flex !important;
  align-items: center;
  gap: 8px !important;
}

.local-profile-card .local-profile-warm-note {
  max-width: min(34ch, 100%) !important;
  text-align: left;
}

@media (max-width: 480px) and (orientation: portrait) {
  .local-profile-card {
    padding: 14px 12px 12px;
  }

  .local-profile-panels {
    max-height: calc(100dvh - 152px);
  }

  .local-profile-hero.local-profile-hero--overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: start;
    gap: 10px;
    padding: 12px;
    text-align: left;
  }

  .local-profile-hero--overview .local-profile-heading {
    display: contents !important;
  }

  .local-profile-hero--overview .local-profile-eyebrow {
    order: 1;
    justify-self: center;
    text-align: center;
  }

  .local-profile-hero--overview #localProfileTitle {
    order: 2;
    width: min(100%, 300px);
    justify-self: center;
    text-align: center;
    font-size: clamp(1.65rem, 7.4vw, 1.95rem) !important;
    line-height: 1.05 !important;
  }

  .local-profile-hero--overview .local-profile-avatar {
    order: 3;
    width: 96px;
    height: 96px;
    border-radius: 18px;
    align-self: start;
  }

  .local-profile-hero--overview .local-profile-country,
  .local-profile-hero--overview .local-profile-level-line,
  .local-profile-hero--overview .local-profile-warm-note {
    width: min(100%, 300px);
    justify-self: center;
  }

  .local-profile-hero--overview .local-profile-country {
    order: 4;
  }

  .local-profile-hero--overview .local-profile-level-line {
    order: 5;
  }

  .local-profile-hero--overview .local-profile-warm-note {
    order: 6;
    max-width: min(100%, 300px) !important;
    font-size: 0.88rem;
    line-height: 1.32;
  }

  .local-profile-hero--overview .local-profile-edit-open {
    order: 7;
    justify-self: center;
    min-width: 176px;
    min-height: 38px;
    margin-top: 2px;
    padding: 0 16px;
    white-space: nowrap;
  }

  .local-profile-hero--overview .profile-trophy-current {
    order: 8;
    width: min(100%, 240px);
    min-width: 0;
    align-self: auto;
    justify-self: center;
    padding: 8px 10px;
  }

  .local-profile-hero--overview .profile-trophy-image {
    width: 58px;
    height: 58px;
  }
}

@media (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  .local-profile-card {
    padding: 12px 14px 10px;
  }

  .local-profile-panels {
    max-height: calc(100dvh - 112px);
  }

  .local-profile-hero.local-profile-hero--overview {
    grid-template-columns: auto minmax(0, 1fr) minmax(96px, auto);
    align-items: start;
    gap: 10px;
    padding: 9px 12px;
  }

  .local-profile-hero--overview .local-profile-avatar {
    width: 76px;
    height: 76px;
    align-self: start;
    border-width: 4px;
    border-radius: 16px;
  }

  .local-profile-hero--overview #localProfileTitle {
    font-size: clamp(1.65rem, 4.6vw, 2.05rem) !important;
    line-height: 1.02 !important;
  }

  .local-profile-hero--overview .local-profile-heading {
    gap: 4px;
  }

  .local-profile-hero--overview .local-profile-warm-note {
    font-size: 0.84rem;
    line-height: 1.24;
  }

  .local-profile-hero--overview .local-profile-edit-open {
    min-height: 32px;
    margin-top: 4px;
    padding-inline: 12px;
    white-space: nowrap;
  }

  .local-profile-hero--overview .profile-trophy-current {
    width: 104px;
    min-width: 104px;
    align-self: start;
    padding: 6px;
  }

  .local-profile-hero--overview .profile-trophy-image {
    width: 48px;
    height: 48px;
  }
}

/* Profil compte / création compte : en mobile portrait, réutilise la densité
   visuelle de « Configurer la prochaine manche » pour pseudo/pays + avatars. */
@media (max-width: 600px) and (orientation: portrait) {
  #onlineSignupModal .online-mode-modal__card,
  #playerAccountSettingsModal .online-mode-modal__card {
    display: flex;
    flex-direction: column;
    width: min(100%, calc(100vw - 16px));
    max-height: calc(100dvh - 16px);
    min-height: 0;
    padding: 12px;
    overflow: hidden;
    border-radius: 16px;
  }

  #onlineSignupModal .player-account-form,
  #playerAccountSettingsModal .account-settings-form {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 3px;
    -webkit-overflow-scrolling: touch;
  }

  #onlineSignupModal .online-mode-modal__actions,
  #playerAccountSettingsModal .online-mode-modal__actions {
    position: static;
    flex: 0 0 auto;
    margin: 10px 0 0;
    padding: 10px 0 0;
    gap: 8px;
    border-top-color: rgba(215, 168, 96, 0.16);
    background: transparent;
    backdrop-filter: none;
  }

  #onlineSignupModal .online-mode-modal__actions button,
  #playerAccountSettingsModal .online-mode-modal__actions button {
    min-height: 34px;
    padding: 0 12px;
  }

  #onlineSignupModal .online-mode-modal__card h3,
  #playerAccountSettingsModal .online-mode-modal__card h3 {
    font-size: 1.02rem;
    line-height: 1.1;
  }

  #onlineSignupModal #onlineSignupText,
  #playerAccountSettingsModal #playerAccountSettingsText {
    font-size: 0.72rem;
    line-height: 1.2;
  }

  #playerAccountProfileStep {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
  }

  #playerAccountProfileStep .player-account-profile-preview,
  #playerAccountProfileStep .account-settings-avatar-hint,
  #playerAccountProfileStep .avatar-search-field,
  #playerAccountProfileStep .avatar-filter-bar,
  #playerAccountProfileStep .account-settings-avatar-grid,
  #playerAccountProfileStep .player-account-profile-privacy {
    grid-column: 1 / -1;
  }

  #playerAccountProfileStep .player-account-field {
    gap: 4px;
  }

  #playerAccountProfileStep .player-account-field > span,
  #playerAccountSettingsModal .account-settings-editor-grid label > span,
  #playerAccountSettingsModal .local-profile-avatar-picker > span {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }

  #playerAccountProfileStep .player-account-field input,
  #playerAccountProfileStep .player-account-field select,
  #playerAccountSettingsModal .account-settings-editor-grid input,
  #playerAccountSettingsModal .account-settings-editor-grid select {
    min-height: 36px;
    padding: 0 9px;
    border-radius: 10px;
    font-size: 0.8rem;
  }

  #playerAccountProfileStep .country-picker-button,
  #playerAccountSettingsModal .account-settings-editor-grid .country-picker-button {
    min-height: 36px;
    padding: 0 9px;
    border-radius: 10px;
  }

  #playerAccountProfileStep .country-picker-button__text,
  #playerAccountProfileStep .country-picker-option span,
  #playerAccountSettingsModal .account-settings-editor-grid .country-picker-button__text,
  #playerAccountSettingsModal .account-settings-editor-grid .country-picker-option span {
    color: #fff4dc;
    font-size: 0.94rem;
    letter-spacing: 0;
    line-height: 1.22;
    text-transform: none;
  }

  #playerAccountProfileStep .country-picker-panel,
  #playerAccountSettingsModal .account-settings-editor-grid .country-picker-panel {
    max-height: min(46dvh, 310px);
  }

  #playerAccountProfileStep .country-picker-option,
  #playerAccountSettingsModal .account-settings-editor-grid .country-picker-option {
    min-height: 36px;
    gap: 8px;
    padding: 6px 9px;
  }

  #playerAccountSettingsModal .account-settings-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #playerAccountSettingsModal .local-profile-avatar-picker {
    grid-column: 1 / -1;
  }

  #playerAccountSettingsModal .local-profile-avatar-picker__current {
    min-height: 42px;
    padding: 6px 9px;
    border-radius: 10px;
  }

  #playerAccountSettingsModal .local-profile-avatar-picker__current img {
    width: 34px;
    height: 34px;
  }

  #playerAccountSettingsModal .local-profile-avatar-picker__current strong {
    font-size: 0.82rem;
  }

  #onlineSignupModal .avatar-filter-bar,
  #playerAccountSettingsModal .avatar-filter-bar {
    gap: 5px;
  }

  #onlineSignupModal .avatar-search-field,
  #playerAccountSettingsModal .avatar-search-field {
    gap: 4px;
    margin-bottom: 6px;
  }

  #onlineSignupModal .avatar-search-field input,
  #playerAccountSettingsModal .avatar-search-field input {
    min-height: 32px;
    padding: 0 9px;
    font-size: 0.76rem;
  }

  #onlineSignupModal .avatar-filter-bar button,
  #playerAccountSettingsModal .avatar-filter-bar button {
    min-height: 30px;
    padding: 0 9px;
    font-size: 0.68rem;
  }

  #playerAccountProfileAvatarGrid,
  #playerAccountSettingsModal .account-settings-avatar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    max-height: clamp(210px, 40dvh, 300px) !important;
    margin-top: 0 !important;
    padding-right: 3px;
    overflow: auto;
  }

  #onlineSignupModal .account-settings-avatar-grid .avatar-unlock-badge,
  #playerAccountSettingsModal .account-settings-avatar-grid .avatar-unlock-badge {
    top: 5px;
    right: 5px;
    width: 21px;
    height: 21px;
    font-size: 0.62rem;
  }

  #onlineSignupModal .account-settings-avatar-grid .avatar-unlock-progress,
  #playerAccountSettingsModal .account-settings-avatar-grid .avatar-unlock-progress {
    max-width: 100%;
    padding: 3px 5px;
    font-size: 0.58rem;
  }
}

/* Profil local / mode édition : aligne le mobile portrait sur le modèle compact
   de « Configurer la prochaine manche ». */
@media (max-width: 600px) and (orientation: portrait) {
  #localProfileModal .local-profile-card {
    width: min(96vw, 420px);
  }

  #localProfileModal .local-profile-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
  }

  #localProfileModal .local-profile-editor__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #localProfileModal .local-profile-avatar-picker,
  #localProfileModal .country-select-with-flag,
  #localProfileModal .country-picker,
  #localProfileModal .country-picker-button {
    min-width: 0;
    width: 100%;
  }

  #localProfileModal .local-profile-avatar-picker__current {
    min-height: 36px;
    padding: 6px 9px;
    border-radius: 10px;
    gap: 8px;
  }

  #localProfileModal .local-profile-avatar-picker__current img {
    width: 30px;
    height: 30px;
  }

  #localProfileModal .local-profile-avatar-picker__current strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
  }

  #localProfileModal .country-picker-button {
    min-height: 36px;
    padding: 0 9px;
    border-radius: 10px;
  }

  #localProfileModal .country-picker-button__text,
  #localProfileModal .country-picker-option span {
    color: #fff4dc;
    font-size: 0.94rem;
    letter-spacing: 0;
    line-height: 1.22;
    text-transform: none;
  }

  #localProfileModal .country-picker-panel {
    width: min(100%, calc(96vw - 34px));
    min-width: min(310px, calc(96vw - 34px));
    max-height: min(46dvh, 310px);
  }

  #localProfileModal .country-picker-option {
    min-height: 36px;
    gap: 8px;
    padding: 6px 9px;
  }

  #localProfileModal .avatar-filter-bar {
    gap: 5px;
  }

  #localProfileModal .avatar-search-field {
    gap: 4px;
    margin-bottom: 6px;
  }

  #localProfileModal .avatar-search-field input {
    min-height: 32px;
    padding: 0 9px;
    font-size: 0.76rem;
  }

  #localProfileModal .avatar-filter-bar button {
    min-height: 30px;
    padding: 0 9px;
    font-size: 0.68rem;
  }

  #localProfileModal .local-profile-avatar-grid {
    flex: 1 1 auto;
    min-height: 178px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    max-height: min(42dvh, 300px);
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 3px;
  }

  #localProfileModal .setup-avatar-option {
    gap: 5px;
    padding: 6px;
    border-radius: 12px;
  }

  #localProfileModal .setup-avatar-option .avatar-unlock-badge {
    top: 5px;
    right: 5px;
    width: 21px;
    height: 21px;
    font-size: 0.62rem;
  }

  #localProfileModal .setup-avatar-option .avatar-unlock-progress {
    max-width: 100%;
    padding: 3px 5px;
    font-size: 0.58rem;
  }

  #localProfileModal .setup-avatar-thumb {
    border-radius: 10px;
  }

  #localProfileModal .setup-avatar-name {
    font-size: 0.72rem;
    line-height: 1.05;
  }
}

@media (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  #onlineSignupModal,
  #playerAccountSettingsModal {
    place-items: start center;
    padding: max(4px, env(safe-area-inset-top, 0px)) 8px max(4px, env(safe-area-inset-bottom, 0px));
    overflow: auto;
  }

  #onlineSignupModal .online-mode-modal__card,
  #playerAccountSettingsModal .online-mode-modal__card {
    display: flex;
    flex-direction: column;
    width: min(96vw, 760px);
    max-height: calc(100dvh - 8px);
    min-height: 0;
    padding: 10px 12px 8px;
    overflow: hidden;
  }

  #onlineSignupModal .player-account-form,
  #playerAccountSettingsModal .account-settings-form {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 3px;
    -webkit-overflow-scrolling: touch;
  }

  #onlineSignupModal .online-mode-modal__actions,
  #playerAccountSettingsModal .online-mode-modal__actions {
    position: static;
    flex: 0 0 auto;
    margin: 8px 0 0;
    padding: 8px 0 0;
    gap: 8px;
    border-top-color: rgba(215, 168, 96, 0.16);
    background: transparent;
    backdrop-filter: none;
  }

  #onlineSignupModal .online-mode-modal__actions button,
  #playerAccountSettingsModal .online-mode-modal__actions button {
    min-height: 32px;
    padding: 0 11px;
  }

  #localProfileModal .local-profile-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
  }

  #localProfileModal .local-profile-avatar-grid,
  #playerAccountSettingsModal .account-settings-avatar-grid {
    grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)) !important;
    grid-template-rows: none !important;
    gap: 6px !important;
    flex: 1 1 auto;
    min-height: 118px;
    max-height: min(58dvh, 230px) !important;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 2px;
  }

  #localProfileModal .setup-avatar-option,
  #playerAccountSettingsModal .account-settings-avatar-grid .setup-avatar-option {
    gap: 4px;
    height: auto !important;
    min-height: 108px !important;
    padding: 4px 5px;
    border-radius: 10px;
    grid-template-rows: auto auto !important;
  }

  #localProfileModal .setup-avatar-thumb,
  #playerAccountSettingsModal .account-settings-avatar-grid .setup-avatar-thumb {
    width: clamp(56px, 15vh, 60px);
    height: clamp(56px, 15vh, 60px);
    justify-self: center;
    border-radius: 9px;
  }

  #localProfileModal .setup-avatar-copy,
  #playerAccountSettingsModal .account-settings-avatar-grid .setup-avatar-copy {
    gap: 2px;
    min-height: 0;
  }

  #localProfileModal .setup-avatar-name,
  #playerAccountSettingsModal .account-settings-avatar-grid .setup-avatar-name {
    font-size: 0.62rem;
    line-height: 1;
  }

  #localProfileModal .setup-avatar-option .avatar-unlock-badge,
  #playerAccountSettingsModal .account-settings-avatar-grid .avatar-unlock-badge {
    top: 5px;
    right: 5px;
    width: 21px;
    height: 21px;
    font-size: 0.62rem;
  }

  #localProfileModal .setup-avatar-option .avatar-unlock-progress,
  #playerAccountSettingsModal .account-settings-avatar-grid .avatar-unlock-progress {
    max-width: 100%;
    padding: 3px 5px;
    font-size: 0.58rem;
    line-height: 1.05;
  }

  #localProfileModal .setup-avatar-option.is-avatar-locked::before,
  #playerAccountSettingsModal .account-settings-avatar-grid .setup-avatar-option.is-avatar-locked::before {
    inset: 5px 5px auto;
    border-radius: 9px;
  }

  #localProfileModal .country-picker-panel,
  #playerAccountSettingsModal .account-settings-editor-grid .country-picker-panel {
    left: auto;
    right: 0;
    width: min(300px, calc(100vw - 28px));
    min-width: min(260px, calc(100vw - 28px));
    max-height: min(58dvh, 250px);
  }

  #localProfileModal .country-picker-option,
  #playerAccountSettingsModal .account-settings-editor-grid .country-picker-option {
    min-height: 36px;
    gap: 8px;
    padding: 6px 9px;
  }
}