/* Gestion et salle d'attente Skyjo uniquement, jamais le plateau actif. */
.skyjo-salon:not(.is-playing) {
  --paper: #f3f9f2;
  --ink: #233c32;
  --muted: #607367;
  --line: #cdded0;
  --felt: #226d50;
  --felt-dark: #18513c;
  --mist: #e4f2bb;
  --red: #b63e3d;
  min-height: 100vh;
  background: #f3f9f2;
  color: var(--ink);
  font-family: 'Segoe UI', system-ui, sans-serif;
}
.skyjo-salon:not(.is-playing) .site-header { max-width: 1100px; padding: 24px 32px; border-color: var(--line); }
.skyjo-salon:not(.is-playing) .brand { font: 700 1.1rem 'Segoe UI', system-ui, sans-serif; letter-spacing: -.035em; color: #234c39; }
.skyjo-salon:not(.is-playing) .site-header .text-link { margin: 0; }
.skyjo-salon:not(.is-playing) .section { max-width: 1020px; padding-top: 30px; }
.skyjo-salon:not(.is-playing) .section.narrow { max-width: 860px; }
.skyjo-salon:not(.is-playing) .form-layout { gap: 45px; padding-top: 40px; }
.skyjo-salon:not(.is-playing) h1 { color: #234c39; font: 750 clamp(2rem, 4vw, 3.1rem)/1.13 'Segoe UI', system-ui, sans-serif; letter-spacing: -.04em; overflow-wrap: anywhere; margin-bottom: 20px; }
.skyjo-salon:not(.is-playing) h2 { color: #234c39; font: 700 1.35rem/1.2 'Segoe UI', system-ui, sans-serif; letter-spacing: -.025em; }
.skyjo-salon:not(.is-playing) h3 { color: #234c39; }
.skyjo-salon:not(.is-playing) .eyebrow { color: #226d50; letter-spacing: .15em; }
.skyjo-salon:not(.is-playing) .lead { font-size: 1rem; line-height: 1.7; }
.skyjo-salon:not(.is-playing) .panel,
.skyjo-salon:not(.is-playing) .room-list-item { background: #fffef8; border: 1px solid var(--line); border-top: 2px solid #8cc34e; border-radius: 1px; box-shadow: none; }
.skyjo-salon:not(.is-playing) .panel p { font-size: .9rem; line-height: 1.7; }
.skyjo-salon:not(.is-playing) .button { background: #226d50; border: 1px solid #226d50; border-radius: 1px; transform: none; }
.skyjo-salon:not(.is-playing) .button:hover:not(:disabled) { background: #18513c; border-color: #18513c; }
.skyjo-salon:not(.is-playing) .button.secondary { background: transparent; color: #226d50; border-color: #81ad94; }
.skyjo-salon:not(.is-playing) .button.secondary:hover { background: #e8f5df; }
.skyjo-salon:not(.is-playing) .button.danger { background: #a63d3b; border-color: #a63d3b; }
.skyjo-salon:not(.is-playing) .button.danger:hover { background: #86302f; }
.skyjo-salon:not(.is-playing) .field input,
.skyjo-salon:not(.is-playing) .field select,
.skyjo-salon:not(.is-playing) .directory-filters select { background: #fffef8; border: 1px solid #b2cdbb; border-radius: 1px; color: var(--ink); }
.skyjo-salon:not(.is-playing) .field label { color: #234c39; }
.skyjo-salon:not(.is-playing) .form-panel .button { width: 100%; }
.skyjo-salon:not(.is-playing) .badge,
.skyjo-salon:not(.is-playing) .player-avatar { background: #e4f2bb; color: #234c39; border-radius: 1px; }
.skyjo-salon:not(.is-playing) .lobby-person { border-radius: 1px; background: #edf6e7; }
.skyjo-salon:not(.is-playing) .errorlist { border-radius: 1px; }
.skyjo-salon:not(.is-playing) .flash-message { border-radius: 1px; background: #fffef8; color: #234c39; border-color: #b2cdbb; }
.skyjo-salon:not(.is-playing) a:focus-visible,
.skyjo-salon:not(.is-playing) button:focus-visible,
.skyjo-salon:not(.is-playing) input:focus-visible,
.skyjo-salon:not(.is-playing) select:focus-visible { outline: 3px solid #9c6816; outline-offset: 4px; }
.skyjo-salon:not(.is-playing) .salon-game-identity { display: flex; width: fit-content; align-items: center; gap: 12px; margin-bottom: 22px; color: #234c39; text-decoration: none; }
.skyjo-salon:not(.is-playing) .salon-game-identity img { width: 66px; height: 66px; object-fit: contain; background: #fff; border: 1px solid #8cc34e; }
.skyjo-salon:not(.is-playing) .salon-game-identity span { font: 700 2rem/1 'Segoe UI', system-ui, sans-serif; letter-spacing: -.05em; }
.skyjo-salon:not(.is-playing) .salon-game-identity em { font: inherit; }
.skyjo-salon:not(.is-playing) footer { border-color: var(--line); max-width: 1036px; font-size: .72rem; }
@media(max-width: 750px) {
  .skyjo-salon:not(.is-playing) .site-header { padding: 18px 22px; }
  .skyjo-salon:not(.is-playing) .form-layout { gap: 14px; padding-top: 26px; }
  .skyjo-salon:not(.is-playing) .section { padding-top: 26px; }
  .skyjo-salon:not(.is-playing) h1 { font-size: 2.3rem; }
  .skyjo-salon:not(.is-playing) .salon-game-identity { margin-bottom: 18px; }
  .skyjo-salon:not(.is-playing) .button-row .button { flex: 1 1 190px; }
}

.skyjo-salon:not(.is-playing) .panel { border-top: 3px solid #8cc34e; }
.skyjo-salon:not(.is-playing) .salon-game-identity strong { color: #226d50; }
.skyjo-salon:not(.is-playing) .language-switcher select, .skyjo-salon:not(.is-playing) .language-switcher button { border-radius: 1px; }

/* Les couleurs des cartes, en un seul liseré discret. */
.skyjo-salon:not(.is-playing) .panel,
.skyjo-salon:not(.is-playing) .room-list-item {
  border-top: 1px solid var(--line);
  background-image: linear-gradient(90deg, #6662ba 0 20%, #5cc5d0 20% 40%, #83c84b 40% 60%, #f0d746 60% 80%, #e66c65 80%);
  background-size: 100% 3px;
  background-repeat: no-repeat;
}
.skyjo-salon:not(.is-playing) .salon-game-identity span { font-family: Georgia, serif; letter-spacing: -.06em; }