:root {
  --ink: #20213a;
  --muted: #6f7089;
  --surface: rgba(255, 255, 255, 0.96);
  --surface-soft: #f5f7ff;
  --line: #e5e7f2;
  --pink: #f50085;
  --pink-dark: #c8006d;
  --blue: #05a9eb;
  --blue-dark: #0877c9;
  --violet: #7138d0;
  --lime: #98dc1f;
  --gold: #ffc92c;
  --shadow: 0 16px 50px rgba(20, 35, 87, 0.18);
  --shadow-soft: 0 8px 24px rgba(20, 35, 87, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #63c5f3;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  background:
    linear-gradient(180deg, rgba(11, 13, 91, 0.16), rgba(89, 49, 188, 0.36) 620px, rgba(157, 232, 255, 0.94) 1100px),
    url("/img/n500.png") right 78px top 78px / 900px auto no-repeat fixed,
    linear-gradient(90deg, rgba(19, 27, 134, 0.8), rgba(73, 39, 184, 0.28) 55%, rgba(18, 21, 105, 0.64)),
    url("/img/fond_site.jpg") center top / 1920px auto no-repeat fixed;
  -webkit-font-smoothing: antialiased;
}

.shop-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

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

.shop-object-card__icon {
  display: grid;
  place-items: center;
  min-height: 155px;
  overflow: hidden;
  background: linear-gradient(145deg, #fbfcff, #edf1fb);
}

.shop-object-card__icon--missing {
  background: #f2f4f8;
}

.shop-object-card__icon img {
  display: block;
  width: 100%;
  height: 155px;
  object-fit: contain;
  border-radius: inherit;
}

.shop-object-card__price {
  display: block;
  margin: 10px 0 14px;
  color: var(--violet);
  font-size: 17px;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

[hidden] {
  display: none !important;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

img {
  max-width: 100%;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: 68px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 8px 30px rgba(23, 44, 91, 0.13);
}

.app-header__inner {
  width: min(1240px, calc(100% - 24px));
  min-height: 68px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.brand img {
  display: block;
  width: 250px;
  height: auto;
}

.brand img.brand__n500-logo {
  width: 360px;
  height: 76px;
  object-fit: cover;
  object-position: center 63%;
  border-radius: 10px;
  filter: drop-shadow(0 3px 5px rgba(31, 16, 88, 0.35));
}

.brand__edition {
  position: absolute;
  right: -3px;
  bottom: -6px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--pink));
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(113, 56, 208, 0.28);
}

.main-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.main-nav a {
  padding: 10px 12px;
  border-radius: 12px;
  color: #53546a;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--pink);
  background: #fff0f8;
  outline: none;
  transform: translateY(-1px);
}

.main-nav a.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--pink), #ff4cae);
  box-shadow: 0 7px 18px rgba(245, 0, 133, 0.25);
}

.server-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid #dce2ee;
  border-radius: 999px;
  color: #616478;
  background: #f8faff;
  font-size: 11px;
  font-weight: 800;
}

.server-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a6a9b7;
  box-shadow: 0 0 0 4px rgba(166, 169, 183, 0.13);
}

.server-pill.is-online {
  color: #297634;
  border-color: #cfe9d0;
  background: #effbef;
}

.server-pill.is-online .server-pill__dot {
  background: #50bd5e;
  box-shadow: 0 0 0 4px rgba(80, 189, 94, 0.16);
}

.launcher-main {
  width: min(1500px, calc(100% - 24px));
  margin: 12px auto 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(245px, 280px);
  gap: 16px;
  align-items: start;
}

.site-notice {
  width: min(1240px, calc(100% - 24px));
  margin: 11px auto 0;
  padding: 11px 15px;
  border: 1px solid #f2c2ce;
  border-radius: 13px;
  color: #93223e;
  background: rgba(255, 239, 244, 0.97);
  box-shadow: var(--shadow-soft);
  font-size: 13px;
  font-weight: 900;
}

.site-notice--success {
  color: #276d38;
  border-color: #bde2c5;
  background: rgba(234, 250, 238, 0.97);
}

.game-card,
.sidebar-card,
.page-card {
  border: 1px solid rgba(255, 255, 255, 0.88);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.game-card {
  width: 100%;
  max-width: none;
  overflow: hidden;
  border-radius: 22px;
}

.game-card__bar {
  min-height: 43px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, #f5f7fc);
}

.game-card__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 900;
}

.game-card__title::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(152, 220, 31, 0.16);
}

.game-card__hint {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.game-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.game-performance-controls {
  position: relative;
  min-height: 39px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 5px 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, #f8fcff, #fff8fc);
}

.game-performance-menu-button {
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid #a8d7f2;
  border-radius: 999px;
  color: #145a8d;
  background: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.game-performance-menu-button:hover,
.game-performance-menu-button:focus-visible {
  color: #fff;
  border-color: var(--blue-dark);
  background: var(--blue-dark);
  outline: none;
}

.game-performance-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% - 1px);
  right: 12px;
  width: min(370px, calc(100vw - 38px));
  padding: 12px;
  border: 1px solid #a8d7f2;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 12px 26px rgba(20, 90, 141, 0.2);
  color: var(--ink);
  background: #fff;
}

.game-performance-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.game-performance-option input {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--blue);
}

.game-performance-option span,
.game-performance-quality {
  display: grid;
  gap: 2px;
}

.game-performance-option strong,
.game-performance-quality strong {
  font-size: 12px;
}

.game-performance-option small,
.game-performance-quality span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.game-performance-quality {
  margin: 10px 0 0 27px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.game-discord-privacy {
  margin-top: 11px;
  padding-top: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
}

.game-discord-privacy[hidden] {
  display: none;
}

.game-discord-privacy > span {
  display: grid;
  gap: 2px;
}

.game-discord-privacy strong {
  font-size: 12px;
}

.game-discord-privacy small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.game-discord-privacy button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid #5865f2;
  border-radius: 9px;
  color: #fff;
  background: #5865f2;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.game-discord-privacy button:hover,
.game-discord-privacy button:focus-visible {
  border-color: #3541c8;
  background: #3541c8;
  outline: none;
}

.game-discord-privacy button.is-camouflaged {
  color: #3f4a5d;
  border-color: #b9c2cf;
  background: #eef2f7;
}

.game-discord-privacy button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.player-report-action {
  max-width: 310px;
  padding: 6px 10px;
  overflow: hidden;
  border: 1px solid #efb8c9;
  border-radius: 999px;
  color: #a42852;
  background: #fff0f5;
  font-size: 10px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.player-report-action:hover {
  color: #fff;
  border-color: #d83369;
  background: #d83369;
}

.player-report-dialog {
  width: min(520px, calc(100% - 28px));
  padding: 0;
  border: 0;
  border-radius: 20px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 28px 80px rgba(17, 25, 56, 0.38);
}

.player-report-dialog::backdrop {
  background: rgba(11, 20, 52, 0.66);
  backdrop-filter: blur(3px);
}

.player-report-form {
  padding: 23px;
}

.player-report-dialog__head,
.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.player-report-dialog__head h2 {
  margin: 2px 0 0;
}

.dialog-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  color: #62667c;
  background: #f0f2f8;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.player-report-form > p {
  color: var(--muted);
  font-size: 13px;
}

.player-report-status {
  min-height: 20px;
  color: #bd315d !important;
  font-weight: 800;
}

.player-report-status.is-success {
  color: #218548 !important;
}

.map-music-dialog {
  width: min(520px, calc(100% - 28px));
  padding: 0;
  border: 0;
  border-radius: 20px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 28px 80px rgba(17, 25, 56, 0.38);
}

.map-music-dialog::backdrop {
  background: rgba(11, 20, 52, 0.66);
  backdrop-filter: blur(3px);
}

.map-music-form {
  padding: 23px;
}

.map-music-form h2,
.map-music-form small {
  margin: 0;
}

.map-music-form > p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.map-music-form [data-map-music-close] {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  color: #62667c;
  background: #f0f2f8;
  font: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.map-music-rules {
  margin: 14px 0;
  padding: 11px 14px 11px 31px;
  border: 1px solid #edd4f7;
  border-radius: 12px;
  color: #62388b;
  background: #fbf3ff;
  font-size: 13px;
  line-height: 1.55;
}

.map-music-file-name {
  min-height: 18px;
  overflow-wrap: anywhere;
  color: var(--ink) !important;
  font-weight: 800;
}

.dialog-actions {
  justify-content: flex-end;
  margin-top: 15px;
}

.power-table small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

.power-table form {
  display: flex;
  align-items: center;
  gap: 7px;
}

.power-table select {
  min-width: 95px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
}

#chat,
.game-stage {
  width: 100%;
  /* Electron 11 (le moteur du launcher Flash) est basé sur Chromium 87,
     qui ne reconnaît pas encore aspect-ratio. Sans hauteur de repli,
     l'objet Flash à 100 % peut alors réduire cette zone à zéro pixel. */
  height: 560px;
  min-height: 560px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #a3dafd;
}

/* Les navigateurs récents conservent un cadre proportionnel et réactif. */
@supports (aspect-ratio: 950 / 560) {
  #chat,
  .game-stage {
    height: auto;
    min-height: 0;
    aspect-ratio: 950 / 560;
  }
}

.skin-wardrobe-dialog {
  /* 604 px inclut les bordures : la scène Flash reçoit exactement 600 px. */
  width: min(604px, calc(100% - 24px));
  max-width: none;
  padding: 0;
  overflow: hidden;
  border: 2px solid #f06bd4;
  border-radius: 18px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 28px 90px rgba(26, 18, 85, 0.5);
}

.skin-wardrobe-dialog::backdrop {
  background: rgba(10, 14, 54, 0.72);
  backdrop-filter: blur(4px);
}

.skin-wardrobe-dialog > header {
  min-height: 58px;
  padding: 9px 14px 9px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: linear-gradient(90deg, #a728e5, #df74e9 58%, #7b6ee9);
}

.skin-wardrobe-dialog h2,
.skin-wardrobe-dialog small {
  margin: 0;
}

.skin-wardrobe-dialog small {
  font-weight: 900;
  opacity: 0.82;
}

.skin-wardrobe-dialog > header button {
  width: 36px;
  height: 36px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #f12873;
  font: inherit;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.skin-wardrobe-stage {
  width: 100%;
  /* Electron 11 / Chromium 87 (le lecteur Flash du launcher) ne gère pas
     encore aspect-ratio : sans dimensions de secours, le contenu du
     vestiaire se réduisait à 0 px et seule sa barre de titre restait
     visible. */
  height: 550px;
  min-height: 550px;
  aspect-ratio: 600 / 550;
  display: grid;
  place-items: center;
  background: linear-gradient(#fff, #fff7fe);
}

@supports (aspect-ratio: 600 / 550) {
  .skin-wardrobe-stage {
    height: auto;
    min-height: 0;
  }
}

.skin-wardrobe-stage object,
.skin-wardrobe-stage embed {
  width: 100%;
  height: 100%;
  display: block;
}

#chat object,
#chat embed {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
}

.flash-fallback {
  max-width: 420px;
  padding: 30px;
  text-align: center;
}

.flash-fallback strong {
  display: block;
  margin-bottom: 8px;
  font-size: 20px;
}

.flash-fallback a {
  color: var(--pink);
  font-weight: 900;
}

.launcher-sidebar {
  display: grid;
  gap: 12px;
}

.sidebar-card {
  overflow: hidden;
  border-radius: 19px;
  box-shadow: var(--shadow-soft);
}

.account-card__head {
  min-height: 126px;
  padding: 8px 10px 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 130%, rgba(255, 255, 255, 0.9), transparent 48%),
    linear-gradient(145deg, #e8f7ff, #f9edff);
}

.account-card__head iframe {
  display: block;
  width: 100px;
  height: 150px;
  margin: -15px auto -10px;
  border: 0;
}

/* L'aperçu Flash n'est pas une miniature responsive par défaut : le cadrage
   est fixé ici plutôt que de laisser les dimensions intrinsèques d'un skin
   empiéter sur toute la carte compte. */
.account-card__head .flash-skin-preview {
  display: block;
  width: 116px;
  height: 118px;
  margin: 0 auto;
  border: 0;
}

/* Le bouton reste séparé du film Flash : en mode jeu, la barre normale est
   masquée et ne doit jamais intercepter les clics de la map. */
.launcher-fullscreen-toggle {
  display: none;
}

.is-game-focus .launcher-fullscreen-toggle.is-available {
  position: fixed;
  z-index: 1000;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 999px;
  color: #fff;
  background: rgba(7, 24, 46, .92);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .38);
  font: 800 13px/1 Arial, sans-serif;
  cursor: pointer;
}

.is-game-focus .launcher-fullscreen-toggle.is-available:hover,
.is-game-focus .launcher-fullscreen-toggle.is-available:focus-visible {
  background: rgba(22, 97, 151, .98);
}

.is-game-focus .launcher-fullscreen-toggle.is-available:disabled {
  opacity: .6;
  cursor: wait;
}
/* Mode ouvert depuis « Jouer » dans le launcher. Le Flash est un canevas
   unique 950 × 560 : on le centre et le redimensionne de manière
   proportionnelle. Ainsi la map et les boutons chat/émoticônes/pouvoirs
   conservent exactement le même repère visuel. */
body.launcher-page.is-game-focus {
  width: 100vw;
  min-width: 0;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  background: #101a46;
}

.is-game-focus [data-launcher-header],
.is-game-focus .launcher-sidebar,
.is-game-focus .site-notice,
.is-game-focus .game-card__bar,
.is-game-focus .game-performance-controls {
  display: none !important;
}

.is-game-focus .launcher-main {
  width: 100vw;
  min-width: 0;
  min-height: 0;
  height: 100vh;
  margin: 0;
  display: grid;
  /* La colonne latérale est masquée dans ce mode. Sans cette remise à une
     seule colonne, la grille conservait son ancien rail de 280 px à droite et
     décalait tout le film Flash vers la gauche. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
}

.is-game-focus .game-card {
  width: var(--bbl-game-viewport-width, 950px);
  min-width: 0;
  min-height: 0;
  height: var(--bbl-game-viewport-height, 560px);
  /* Ce plafond protège également le rendu si un ancien script mis en cache
     tente encore de fournir une dimension plus grande. Les panneaux Flash
     restent ainsi à leur taille d'origine, jamais agrandis. */
  max-width: 950px;
  max-height: 560px;
  justify-self: center;
  align-self: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #a3dafd;
  box-shadow: none;
}

body.launcher-page.is-game-focus #chat,
body.launcher-page.is-game-focus .game-stage {
  width: 100%;
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
}

.is-game-focus #chat object,
.is-game-focus #chat embed {
  width: 100%;
  height: 100%;
}

.account-card__body {
  padding: 13px;
}

.login-form__eyebrow,
.page-eyebrow {
  margin: 0 0 4px;
  color: var(--pink);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.login-form h2 {
  margin: 0 0 11px;
  font-size: 18px;
}

.field {
  display: grid;
  gap: 5px;
  margin-bottom: 9px;
}

.field label {
  color: #5a5d73;
  font-size: 11px;
  font-weight: 800;
}

.field input,
.field select,
.field textarea,
.search-control {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid #d9ddeb;
  border-radius: 11px;
  outline: none;
  color: var(--ink);
  background: #fafbff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.search-control:focus {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(5, 169, 235, 0.12);
}

.btn {
  min-height: 40px;
  padding: 9px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  font-weight: 900;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.04);
  outline: none;
}

.btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--pink), #ff4da7);
  box-shadow: 0 8px 18px rgba(245, 0, 133, 0.22);
}

.btn--blue {
  color: #fff;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  box-shadow: 0 8px 18px rgba(5, 169, 235, 0.2);
}

.btn--ghost {
  color: var(--ink);
  border: 1px solid var(--line);
  background: #fff;
}

.btn--full {
  width: 100%;
}

.login-form__footer {
  margin: 10px 0 0;
  color: var(--muted);
  text-align: center;
  font-size: 11px;
}

.login-form__footer a {
  color: var(--blue-dark);
  font-weight: 900;
}

.player-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.player-card__name {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 19px;
  font-weight: 900;
  text-overflow: ellipsis;
}

.role-badge {
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--pink));
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.player-stats {
  margin: 11px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.player-stats span {
  min-width: 0;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  border-radius: 10px;
  color: #4d5064;
  background: var(--surface-soft);
  font-size: 11px;
  font-weight: 900;
}

.player-stats img {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.player-stats small {
  color: var(--muted);
  font-size: 9px;
}

.player-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.player-card__actions a {
  padding: 8px 5px;
  border-radius: 9px;
  color: var(--blue-dark);
  background: #eef8ff;
  text-align: center;
  font-size: 10px;
  font-weight: 900;
}

.player-card__actions a:last-child {
  color: #a2324d;
  background: #fff0f4;
}

.mystery-promo {
  position: relative;
  min-height: 95px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 216, 68, 0.75) 0 4px, transparent 5px),
    radial-gradient(circle at 78% 72%, rgba(255, 255, 255, 0.6) 0 3px, transparent 4px),
    linear-gradient(135deg, #2f164d, #7138d0 62%, #b83ddb);
  box-shadow: 0 12px 27px rgba(63, 26, 111, 0.3);
}

.mystery-promo::after {
  content: "✦";
  position: absolute;
  right: 14px;
  top: 8px;
  color: #ffe168;
  font-size: 37px;
  transform: rotate(12deg);
}

.mystery-promo small {
  color: #e7d5ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mystery-promo strong {
  margin: 4px 0;
  font-size: 17px;
}

.mystery-promo span {
  color: #fff0a8;
  font-size: 11px;
  font-weight: 800;
}

.quick-links {
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.quick-links a {
  min-height: 53px;
  padding: 9px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 11px;
  background: var(--surface-soft);
  font-size: 11px;
  font-weight: 900;
}

.quick-links a span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.site-main {
  width: min(1100px, calc(100% - 28px));
  margin: 28px auto 60px;
}

.page-card {
  overflow: hidden;
  border-radius: 26px;
}

.page-hero {
  position: relative;
  min-height: 190px;
  padding: 42px clamp(24px, 6vw, 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 86% 20%, rgba(255, 255, 255, 0.2) 0 45px, transparent 46px),
    radial-gradient(circle at 78% 82%, rgba(255, 255, 255, 0.12) 0 76px, transparent 77px),
    linear-gradient(135deg, #0877c9, #05a9eb 56%, #37c6ee);
}

.page-hero--pink {
  background:
    radial-gradient(circle at 86% 20%, rgba(255, 255, 255, 0.18) 0 45px, transparent 46px),
    linear-gradient(135deg, #b90065, var(--pink) 58%, #ff55ad);
}

.page-hero--mystery {
  background:
    radial-gradient(circle at 84% 22%, rgba(255, 219, 72, 0.7) 0 5px, transparent 6px),
    radial-gradient(circle at 74% 65%, rgba(255, 255, 255, 0.55) 0 3px, transparent 4px),
    linear-gradient(135deg, #26103d, #6030ad 55%, #a437d1);
}

.page-hero h1 {
  max-width: 720px;
  margin: 5px 0 8px;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.page-hero p {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 16px;
  line-height: 1.6;
}

.page-hero .page-eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

.page-content {
  padding: clamp(24px, 5vw, 56px);
}

.page-content h2 {
  margin: 0 0 12px;
  font-size: 25px;
  letter-spacing: -0.02em;
}

.page-content h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.page-content p {
  color: var(--muted);
  line-height: 1.7;
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  gap: 34px;
  align-items: center;
}

.signup-art {
  min-height: 390px;
  padding: 36px;
  display: flex;
  align-items: end;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(180deg, transparent 30%, rgba(21, 28, 69, 0.78)),
    url("/img/fond_inscription.jpg") center / cover no-repeat;
  box-shadow: var(--shadow-soft);
}

.signup-art__copy {
  max-width: 420px;
  color: #fff;
}

.signup-art h2 {
  margin-bottom: 6px;
  font-size: 30px;
}

.signup-art p {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
}

.form-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 21px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.form-card .field {
  margin-bottom: 15px;
}

.form-card .field input {
  min-height: 47px;
}

.form-note {
  padding: 11px 13px;
  border-radius: 11px;
  color: #6f5819;
  background: #fff8df;
  font-size: 12px;
  line-height: 1.5;
}

.feature-grid,
.steps-grid,
.rules-grid,
.credits-grid,
.mystery-grid,
.skins-grid {
  display: grid;
  gap: 16px;
}

.feature-grid {
  grid-template-columns: repeat(3, 1fr);
}

.feature-card,
.step-card,
.rule-card,
.credit-card,
.mystery-card,
.skin-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.feature-card,
.step-card,
.rule-card,
.credit-card {
  padding: 22px;
}

.feature-card__icon,
.step-card__number,
.rule-card__number {
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(5, 169, 235, 0.2);
}

.feature-card:nth-child(2) .feature-card__icon,
.rule-card:nth-child(even) .rule-card__number {
  background: linear-gradient(135deg, var(--pink-dark), var(--pink));
}

.feature-card:nth-child(3) .feature-card__icon {
  background: linear-gradient(135deg, #4d9617, var(--lime));
}

.feature-card p,
.step-card p,
.rule-card p,
.credit-card p {
  margin-bottom: 0;
}

.steps-grid {
  grid-template-columns: repeat(3, 1fr);
}

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

.credits-grid {
  grid-template-columns: repeat(3, 1fr);
}

.inline-callout {
  margin-top: 24px;
  padding: 18px 20px;
  border-left: 5px solid var(--pink);
  border-radius: 13px;
  color: #65586c;
  background: #fff4fa;
  line-height: 1.6;
}

.profile-stage {
  min-height: 580px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(145deg, #17182b, #262846);
}

.profile-stage object,
.profile-stage embed {
  display: block;
  width: min(600px, 100%);
  height: 550px;
}

.shop-toolbar {
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: 1fr 220px auto;
  gap: 10px;
}

.shop-status {
  min-height: 24px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.skins-grid {
  grid-template-columns: repeat(3, 1fr);
}

.skin-card {
  overflow: hidden;
}

.skin-card__preview {
  min-height: 208px;
  display: grid;
  place-items: center;
  padding: 8px;
  overflow: hidden;
  background: linear-gradient(145deg, #e7f8ff, #fff0f8);
}

.skin-card__preview-image {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: contain;
  object-position: center center;
  image-rendering: auto;
}

.skin-card__preview iframe {
  width: 110px;
  height: 145px;
  border: 0;
}

.skin-card__preview object {
  width: 150px;
  height: 155px;
  border: 0;
}

.skin-card__fallback {
  display: block;
  padding: 32px 12px;
  color: #5d6684;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.skin-card__body {
  padding: 18px;
}

.skin-card__body h3 {
  margin-bottom: 5px;
}

.skin-card__body p {
  min-height: 46px;
  margin: 0 0 14px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 12px;
}

.load-more {
  margin: 24px auto 0;
  display: flex;
}

.mystery-balance {
  width: fit-content;
  margin-top: 16px;
  padding: 9px 14px;
  border-radius: 999px;
  color: #392900;
  background: var(--gold);
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(255, 201, 44, 0.28);
}

.mystery-message {
  min-height: 22px;
  margin: 0 0 18px;
  color: var(--violet);
  font-weight: 900;
}

.mystery-grid {
  grid-template-columns: repeat(2, 1fr);
}

.mystery-card {
  padding: 22px;
  border-color: #e7dbf6;
}

.mystery-card h2 {
  color: #5e2aa5;
  font-size: 19px;
}

.mystery-card p {
  min-height: 48px;
  font-size: 13px;
}

.mystery-card button {
  min-height: 39px;
  padding: 8px 13px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #5d2aa7, #9c41d8);
  font-weight: 900;
}

.mystery-owned {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 10px;
  color: #28763c;
  background: #e2f8e7;
  font-size: 12px;
  font-weight: 900;
}

.command-list {
  margin-top: 24px;
  padding: 18px;
  border-radius: 15px;
  background: #f5f0fc;
  color: #5d4f6d;
  line-height: 1.8;
}

.command-list code {
  padding: 3px 7px;
  border-radius: 6px;
  color: #5b249d;
  background: #fff;
  font-weight: 900;
}

.footer-note {
  width: min(1100px, calc(100% - 28px));
  margin: -34px auto 34px;
  color: rgba(31, 50, 76, 0.7);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
}

/* Portail Ruffle : structure inspirée des couleurs bleu/rose du site historique. */
.app-header {
  min-height: auto;
  border: 0;
  background: transparent;
}

.app-header__sky {
  border-bottom: 1px solid rgba(255, 255, 255, 0.58);
  background:
    radial-gradient(circle at 16% 22%, rgba(255, 255, 255, 0.75) 0 2px, transparent 3px),
    radial-gradient(circle at 73% 48%, rgba(255, 255, 255, 0.52) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(48, 184, 240, 0.96), rgba(27, 146, 219, 0.96));
}

.app-header__sky .app-header__inner {
  min-height: 78px;
  justify-content: space-between;
}

.nav-strip {
  min-height: 47px;
  padding: 0 max(12px, calc((100vw - 1240px) / 2));
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 4px solid #c70070;
  background: linear-gradient(180deg, #ff29a0, var(--pink));
  box-shadow: 0 8px 24px rgba(90, 10, 76, 0.2);
}

.nav-strip .main-nav {
  justify-content: flex-start;
  gap: 2px;
}

.nav-strip .main-nav a,
.account-nav a {
  padding: 9px 12px;
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.nav-strip .main-nav a:hover,
.nav-strip .main-nav a:focus-visible,
.nav-strip .main-nav a.is-active,
.account-nav a:hover,
.account-nav a:focus-visible {
  color: #fff;
  background: rgba(118, 0, 73, 0.34);
  transform: translateY(-1px);
}

.account-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

.app-header .server-pill {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(0, 91, 158, 0.32);
}

.app-header .server-pill.is-online {
  color: #efffe5;
  border-color: rgba(225, 255, 209, 0.58);
  background: rgba(31, 121, 75, 0.43);
}

.game-stage .ruffle-player,
.profile-stage .ruffle-player,
.ruffle-skin-preview .ruffle-player,
.skin-card__preview .ruffle-player,
ruffle-player {
  display: block;
  width: 100%;
  height: 100%;
}

.account-card__head .ruffle-skin-preview {
  width: 116px;
  height: 150px;
  margin: -13px auto -8px;
}

.player-card__actions {
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
}

.home-community,
.site-footer {
  width: min(1240px, calc(100% - 24px));
  margin-right: auto;
  margin-left: auto;
}

.home-community {
  margin-bottom: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr);
  gap: 16px;
}

.home-welcome,
.home-skins {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}

.home-welcome {
  min-height: 280px;
  padding: 30px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 215px;
  align-items: center;
  gap: 18px;
}

.home-welcome h1 {
  margin: 6px 0 12px;
  color: #167cba;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.03;
}

.home-welcome p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.home-welcome img {
  width: 100%;
  max-height: 230px;
  object-fit: contain;
  object-position: center bottom;
}

.hero-actions {
  margin-top: 19px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.home-skins {
  padding: 24px;
}

.section-heading {
  margin-bottom: 16px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.section-heading h2 {
  margin: 3px 0 0;
}

.section-heading > a {
  color: var(--pink-dark);
  font-size: 12px;
  font-weight: 900;
}

.skin-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.skin-showcase article {
  min-width: 0;
  padding: 8px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(145deg, #e9f9ff, #fff0f8);
  text-align: center;
}

.skin-showcase strong {
  display: block;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ruffle-skin-preview {
  width: 100%;
  height: 130px;
  overflow: hidden;
}

.skin-card__preview .ruffle-player {
  width: 130px !important;
  height: 165px !important;
}

.site-footer {
  margin-bottom: 26px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  color: rgba(31, 50, 76, 0.74);
  font-size: 11px;
  font-weight: 800;
}

.site-footer img {
  width: 110px;
}

.site-footer a {
  color: var(--pink-dark);
}

.auth-page {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.85fr);
  align-items: stretch;
}

.auth-illustration {
  min-height: 500px;
  padding: 42px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(5, 117, 195, 0.06), rgba(4, 66, 138, 0.9)),
    url("/img/fond_inscription.jpg") center / cover no-repeat;
}

.auth-illustration img {
  max-width: 260px;
  max-height: 260px;
  margin: 0 auto 10px;
  object-fit: contain;
}

.auth-illustration h1 {
  margin: 4px 0;
  font-size: 38px;
}

.auth-illustration p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
}

.auth-illustration .page-eyebrow {
  color: #ffc5e5;
}

.auth-form {
  align-self: center;
  margin: 38px;
}

.field textarea {
  min-height: 125px;
  resize: vertical;
}

.page-hero--forum {
  background:
    radial-gradient(circle at 82% 25%, rgba(255, 255, 255, 0.22) 0 55px, transparent 56px),
    linear-gradient(135deg, #166db6, #07a8e8 55%, #f50085 150%);
}

.page-hero--art {
  background:
    linear-gradient(90deg, rgba(86, 29, 153, 0.9), rgba(243, 0, 132, 0.77)),
    url("/img/fond_inscription.jpg") center / cover no-repeat;
}

.hero-link {
  color: #fff;
  font-weight: 900;
}

.forum-layout,
.contact-layout,
.power-admin-layout,
.artist-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.48fr);
  gap: 26px;
  align-items: start;
}

.forum-topics,
.forum-posts {
  display: grid;
  gap: 12px;
}

.forum-topic-card {
  padding: 17px 18px;
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.forum-topic-card:hover {
  border-color: #a9dcf3;
  transform: translateY(-1px);
}

.forum-topic-card__icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #e7f7ff;
  font-size: 20px;
}

.forum-topic-card strong,
.forum-topic-card small {
  display: block;
}

.forum-topic-card small,
.forum-topic-card time {
  color: var(--muted);
  font-size: 11px;
}

.forum-composer {
  position: sticky;
  top: 145px;
}

.forum-post {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.forum-post header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--pink-dark);
}

.forum-post time {
  color: var(--muted);
  font-size: 11px;
}

.forum-post p {
  margin-bottom: 0;
  white-space: pre-wrap;
}

.contact-email {
  color: var(--blue-dark);
  overflow-wrap: anywhere;
}

.contact-cloud {
  margin-top: 24px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 18px;
  color: var(--pink-dark);
  background: linear-gradient(145deg, #e9f9ff, #fff0f8);
}

.contact-cloud img {
  width: 105px;
  height: 90px;
  object-fit: contain;
}

.donation-card {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid #ffc6e6;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff7fc, #eefaff);
  box-shadow: var(--shadow-soft);
}

.donation-card h2 { margin: 5px 0 8px; }

.donation-card form { margin-top: 15px; }

.donation-card__note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.home-donation-link {
  min-height: 58px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(135deg, #7640d2, #f50085 62%, #ff9b2f);
  box-shadow: var(--shadow-soft);
  font-weight: 900;
  transition: transform .16s ease, filter .16s ease;
}

.home-donation-link span {
  color: rgba(255, 255, 255, .9);
  font-size: 11px;
  font-weight: 800;
}

.home-donation-link:hover,
.home-donation-link:focus-visible {
  color: #fff;
  filter: brightness(1.07);
  outline: none;
  transform: translateY(-2px);
}

.success-note {
  padding: 10px 12px;
  border-radius: 10px;
  color: #276b3a;
  background: #e8f9ec;
  font-weight: 800;
}

.artist-intro {
  grid-template-columns: minmax(0, 0.7fr) minmax(340px, 1fr);
  align-items: center;
}

.gallery-section {
  margin-top: 42px;
}

.official-concepts .section-heading p {
  max-width: 720px;
  margin: 7px 0 0;
  color: var(--muted);
}

.concept-card small {
  display: block;
  margin-top: 10px;
  line-height: 1.35;
}

.concept-card > img {
  object-fit: contain;
  background: linear-gradient(145deg, #eefaff, #fff0fa);
}

.artist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.artist-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.artist-card > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  background: #edf7ff;
}

.artist-card > div {
  padding: 16px;
}

.artist-card p {
  min-height: 48px;
  margin: 5px 0;
  font-size: 12px;
}

.artist-card small {
  color: var(--muted);
}

.status-badge,
.catalog-badge {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  color: #754e09;
  background: #fff2c9;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.status-badge--approuve {
  color: #257138;
  background: #e2f7e7;
}

.status-badge--refuse {
  color: #9e2d4c;
  background: #ffe8ef;
}

.catalog-badge {
  margin-bottom: 9px;
  color: #fff;
  background: linear-gradient(135deg, #7140be, #f50085);
}

.catalog-badge--original {
  background: linear-gradient(135deg, #176cb3, #05a9eb);
}

.review-actions {
  margin-top: 12px;
  display: flex;
  gap: 7px;
}

.form-result {
  min-height: 22px;
  margin-bottom: 0;
  color: var(--violet) !important;
  font-weight: 900;
}

.power-admin-layout {
  grid-template-columns: minmax(310px, 0.42fr) minmax(0, 1fr);
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 15px;
}

.power-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.power-table th,
.power-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 12px;
}

.power-table th {
  color: #5e6075;
  background: #f5f7fc;
  font-size: 10px;
  text-transform: uppercase;
}

.empty-state {
  padding: 24px;
  border: 1px dashed #cad2e4;
  border-radius: 14px;
  color: var(--muted);
  background: #f8faff;
  text-align: center;
}

@media (max-width: 1120px) {
  .app-header__inner {
    padding: 9px 0;
    flex-wrap: wrap;
    gap: 10px;
  }

  .main-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
  }

  .launcher-main {
    grid-template-columns: 1fr;
  }

  .launcher-sidebar {
    grid-template-columns: repeat(3, 1fr);
  }

  .nav-strip {
    align-items: stretch;
    /* La barre contient deux zones flex. Le défilement appliqué au parent
       pouvait laisser les liens Compte en dehors de la zone atteignable sur
       les écrans étroits. Chaque zone garde maintenant sa largeur utile. */
    overflow: visible;
  }

  .nav-strip .main-nav {
    order: initial;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .home-community {
    grid-template-columns: 1fr;
  }
}

/* Sous 900 px, afficher tous les onglets au lieu de les couper : le menu
   principal passe sur plusieurs lignes et les liens du compte conservent une
   ligne dédiée. */
@media (max-width: 900px) {
  .nav-strip {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    padding: 0 8px 6px;
  }

  .nav-strip .main-nav {
    flex: 1 0 100%;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    overflow: visible;
  }

  .account-nav {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .brand img {
    width: 205px;
  }

  .brand img.brand__n500-logo {
    width: 250px;
    height: 58px;
  }

  .server-pill {
    margin-left: auto;
  }

  .main-nav a {
    padding: 8px 10px;
  }

  .launcher-sidebar,
  .split-layout,
  .auth-page,
  .forum-layout,
  .contact-layout,
  .power-admin-layout,
  .artist-intro,
  .feature-grid,
  .steps-grid,
  .rules-grid,
  .credits-grid,
  .mystery-grid,
  .skins-grid {
    grid-template-columns: 1fr;
  }

  .artist-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .auth-illustration {
    min-height: 350px;
    padding: 28px;
  }

  .auth-illustration img {
    max-height: 170px;
  }

  .auth-form {
    margin: 20px;
  }

  .forum-composer {
    position: static;
  }

  .home-welcome {
    grid-template-columns: 1fr;
  }

  .home-welcome img {
    display: none;
  }

  .shop-toolbar {
    grid-template-columns: 1fr;
  }

  .page-hero {
    min-height: 165px;
  }

  .page-content {
    padding: 24px 18px;
  }

  .signup-art {
    min-height: 280px;
  }
}

@media (max-width: 520px) {
  .app-header__sky .app-header__inner {
    min-height: 66px;
  }

  .nav-strip {
    min-height: 43px;
  }

  .account-nav {
    border-left: 1px solid rgba(255, 255, 255, 0.32);
  }

  .artist-grid,
  .skin-showcase {
    grid-template-columns: 1fr;
  }

  .ruffle-skin-preview {
    height: 155px;
  }

  .forum-topic-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .forum-topic-card time {
    grid-column: 2;
  }

  .site-footer {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 970px) {
  #chat,
  .game-stage {
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}