html,
body,
body * {
  cursor: url('/assets/wukong-cursor.cur'), url('/assets/wukong-cursor.png') 7 6, auto !important;
}

a,
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
label[for],
select,
summary {
  cursor: url('/assets/wukong-cursor.cur'), url('/assets/wukong-cursor.png') 7 6, pointer !important;
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea,
[contenteditable="true"] {
  cursor: url('/assets/wukong-cursor.cur'), url('/assets/wukong-cursor.png') 7 6, text !important;
}

:root[data-theme="light"] {
  --bg: #f4f0ff;
  --surface: rgba(255,255,255,.86);
  --surface2: rgba(244,246,255,.92);
  --card: rgba(255,255,255,.88);
  --border: rgba(38,31,62,.14);
  --text: #171423;
  --muted: rgba(23,20,35,.58);
}

html {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Keep pop-ups attached to the viewport, never to an animated card. */
.p4-modal-layer {
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 100100 !important;
}

.p4-modal-layer > :first-child {
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

html:has(.p4-modal-layer.show),
html:has(.p4-modal-layer.open) {
  overflow: hidden;
}

@media (max-width: 720px) {
  .p4-modal-layer {
    padding: max(10px, env(safe-area-inset-top, 0px))
      max(10px, env(safe-area-inset-right, 0px))
      max(10px, env(safe-area-inset-bottom, 0px))
      max(10px, env(safe-area-inset-left, 0px)) !important;
  }

  .p4-modal-layer > :first-child {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 20px);
  }
}

body.p4-wallpaper-mode {
  --surface: transparent;
  --surface2: transparent;
  --card: transparent;
  --border: rgba(255,255,255,.20);
  background: #000 !important;
  background-image: none !important;
}

body.p4-wallpaper-mode::before,
body.p4-wallpaper-mode::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* Profil automatique pour GPU anciens/intégrés. La composition et les couleurs
   restent intactes ; on évite surtout les flous et repaints continus. */
html.p4-performance-lite *,
html.p4-performance-lite *::before,
html.p4-performance-lite *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.p4-performance-lite .bg-grid,
html.p4-performance-lite .bg-orbs,
html.p4-performance-lite .orb,
html.p4-performance-lite .stars,
html.p4-performance-lite .scanlines,
html.p4-performance-lite .noise,
html.p4-performance-lite .tokens-bg,
html.p4-performance-lite .hero-ticker-track,
html.p4-performance-lite .player-card.active,
html.p4-performance-lite .cell:not(.drop):not(.winning)::before {
  animation: none !important;
}
html.p4-performance-lite .bg-orbs,
html.p4-performance-lite .orb,
html.p4-performance-lite .scanlines,
html.p4-performance-lite .noise,
html.p4-performance-lite .tokens-bg {
  display: none !important;
}
html.p4-performance-lite body.p4-wallpaper-mode::before {
  background-attachment: scroll !important;
}

body.p4-wallpaper-mode::before {
  z-index: 0;
  background: var(--p4-wallpaper-image) center / cover no-repeat fixed;
  opacity: var(--p4-wallpaper-opacity, .48);
  width: auto !important;
  height: auto !important;
  inset: 0 !important;
  transform: none !important;
  filter: none !important;
}

body.p4-wallpaper-mode > :not(#p4-global-menu-toggle):not(.p4-global-menu-backdrop):not(#p4-global-menu-panel):not(.p4-fps-meter):not(.p4-egg-spark):not(.p4-page-egg):not(.p4-egg-toast):not(.p4-egg-banner):not(.egg-burst):not(.egg-toast):not(.egg-win-card):not(.reaction-pop) {
  position: relative;
}

body.p4-wallpaper-mode::after {
  z-index: 0;
  background: rgba(0,0,0,var(--p4-wallpaper-dim, .28));
  width: auto !important;
  height: auto !important;
  inset: 0 !important;
  transform: none !important;
  filter: none !important;
}

body.p4-wallpaper-mode .bg-grid,
body.p4-wallpaper-mode .bg-orbs,
body.p4-wallpaper-mode .scanlines,
body.p4-wallpaper-mode .stars,
body.p4-wallpaper-mode .orb,
body.p4-wallpaper-mode .noise {
  display: none !important;
}

/* Historical wallpaper treatment restored from d57b200:
   page furniture becomes transparent while gameplay boards keep their own skin. */
body.p4-wallpaper-mode .panel,
body.p4-wallpaper-mode .card,
body.p4-wallpaper-mode .game-card,
body.p4-wallpaper-mode .spec-card,
body.p4-wallpaper-mode .analysis-card,
body.p4-wallpaper-mode .elo-history-card,
body.p4-wallpaper-mode .admin-card,
body.p4-wallpaper-mode .hero,
body.p4-wallpaper-mode .hero-panel-card,
body.p4-wallpaper-mode .hero-ticker,
body.p4-wallpaper-mode .hero-cgu-cta,
body.p4-wallpaper-mode .section,
body.p4-wallpaper-mode .endpoint,
body.p4-wallpaper-mode .grid,
body.p4-wallpaper-mode .wrap,
body.p4-wallpaper-mode .container,
body.p4-wallpaper-mode .layout,
body.p4-wallpaper-mode .stats-card,
body.p4-wallpaper-mode .leader-card,
body.p4-wallpaper-mode .rank-card,
body.p4-wallpaper-mode .shop-card,
body.p4-wallpaper-mode .product-card,
body.p4-wallpaper-mode .news-card,
body.p4-wallpaper-mode .rule-card,
body.p4-wallpaper-mode .progress-card,
body.p4-wallpaper-mode .quest-card,
body.p4-wallpaper-mode .player-card,
body.p4-wallpaper-mode .duel-card,
body.p4-wallpaper-mode .auth-card,
body.leaderboard-page.p4-wallpaper-mode .nav,
body.leaderboard-page.p4-wallpaper-mode .tabs,
body.leaderboard-page.p4-wallpaper-mode .list-row,
body.leaderboard-page.p4-wallpaper-mode .clan-row,
body.p4-wallpaper-mode .modal,
body.p4-wallpaper-mode [class*="panel"],
body.p4-wallpaper-mode [class*="card"],
body.p4-wallpaper-mode [class*="tile"],
body.p4-wallpaper-mode [class*="box"] {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.p4-wallpaper-mode .p4-global-menu-toggle {
  position: fixed;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,45,85,.18), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(10,10,22,.86) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.34) !important;
  backdrop-filter: blur(14px) !important;
}

body.p4-wallpaper-mode .p4-global-menu-backdrop {
  position: fixed;
  background: rgba(0,0,0,.28) !important;
  backdrop-filter: blur(2px) !important;
}

body.p4-wallpaper-mode .p4-global-menu-panel {
  position: fixed;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,45,85,.18), transparent 34%),
    radial-gradient(circle at 100% 42%, rgba(133,235,255,.12), transparent 38%),
    linear-gradient(180deg, rgba(20,20,40,.96), rgba(9,9,20,.95)) !important;
  box-shadow: -18px 0 70px rgba(0,0,0,.46) !important;
  backdrop-filter: blur(18px) !important;
}

body.p4-wallpaper-mode.cgu-page nav,
body.p4-wallpaper-mode.cgu-page .card,
body.p4-wallpaper-mode.cgu-page .rule-list li,
body.p4-wallpaper-mode.cgu-page .sanction-cell,
body.p4-wallpaper-mode.cgu-page .quick-links a,
body.p4-wallpaper-mode.cgu-page .highlight {
  background: linear-gradient(180deg, rgba(7,7,18,.62), rgba(7,7,18,.42)) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(10px) !important;
}

body.p4-wallpaper-mode.cgu-page .card::before {
  display: block !important;
}

body.p4-wallpaper-mode .hero::before,
body.p4-wallpaper-mode .hero::after,
body.p4-wallpaper-mode .card::before,
body.p4-wallpaper-mode .card::after,
body.p4-wallpaper-mode .panel::before,
body.p4-wallpaper-mode .panel::after,
body.p4-wallpaper-mode [class*="card"]::before,
body.p4-wallpaper-mode [class*="card"]::after {
  display: none !important;
}

body.p4-wallpaper-mode input,
body.p4-wallpaper-mode select,
body.p4-wallpaper-mode textarea {
  background: transparent !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

html,
body {
  max-width: 100%;
}

body {
  overflow-wrap: anywhere;
}

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

pre,
code {
  max-width: 100%;
}

pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap,
.admin-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 720px) {
  body {
    min-width: 0;
  }

  .page,
  .wrap,
  .container,
  .layout,
  .hero,
  .card,
  .panel,
  .section,
  .endpoint,
  .profile-shell,
  .admin-stack,
  .grid {
    min-width: 0;
    max-width: 100%;
  }

  input,
  select,
  textarea,
  button {
    min-width: 0 !important;
    max-width: 100%;
  }

  a,
  button,
  .btn,
  .nav-btn,
  [class*="button"],
  [class*="actions"] > * {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  [style*="grid-template-columns"],
  [class*="grid"],
  [class*="layout"],
  [class*="row"] {
    min-width: 0;
  }

  textarea {
    resize: vertical;
  }

  pre code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .modal,
  [class*="modal"] {
    max-width: calc(100vw - 20px);
  }

  .p4-global-menu-panel {
    max-height: calc(100dvh - 20px);
    overflow: hidden;
  }

  .p4-global-menu-grid {
    min-height: 0;
    overscroll-behavior: contain;
  }
}

:root[data-theme="light"] body {
  color: var(--text) !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(255,45,85,.14), transparent 30%),
    radial-gradient(circle at 82% 14%, rgba(133,235,255,.20), transparent 28%),
    linear-gradient(rgba(38,31,62,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38,31,62,.08) 1px, transparent 1px),
    var(--bg) !important;
  background-size: auto, auto, 48px 48px, 48px 48px !important;
}

:root[data-theme="light"] .panel,
:root[data-theme="light"] .game-card,
:root[data-theme="light"] .spec-card,
:root[data-theme="light"] .analysis-card,
:root[data-theme="light"] .elo-history-card,
:root[data-theme="light"] .admin-card {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,244,255,.80)) !important;
  border-color: rgba(38,31,62,.14) !important;
  box-shadow: 0 22px 70px rgba(52,43,88,.14) !important;
}

:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  background: rgba(255,255,255,.74) !important;
  color: var(--text) !important;
  border-color: rgba(38,31,62,.16) !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 10% 10%, rgba(255,45,85,.10), transparent 32%),
    radial-gradient(circle at 88% 8%, rgba(133,235,255,.18), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,244,255,.90)) !important;
  border-color: rgba(38,31,62,.16) !important;
  box-shadow: 0 28px 80px rgba(52,43,88,.16) !important;
  color: #171423 !important;
}

:root[data-theme="light"] .hero::before {
  background: radial-gradient(circle, rgba(255,214,10,.22), transparent 68%) !important;
}

:root[data-theme="light"] .hero::after {
  background: radial-gradient(circle, rgba(255,45,85,.12), transparent 70%) !important;
}

:root[data-theme="light"] .logo-p4,
:root[data-theme="light"] .logo,
:root[data-theme="light"] .card-topline-badge span:last-child {
  color: #171423 !important;
}

:root[data-theme="light"] .logo-tagline,
:root[data-theme="light"] .hero-copy,
:root[data-theme="light"] .hero-panel-copy,
:root[data-theme="light"] .hero-ticker-item,
:root[data-theme="light"] .card-label {
  color: rgba(23,20,35,.68) !important;
}

:root[data-theme="light"] .hero-panel-card {
  background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.48)) !important;
  border-color: rgba(38,31,62,.13) !important;
  box-shadow: 0 18px 42px rgba(52,43,88,.12) !important;
}

:root[data-theme="light"] .hero-panel-card::before {
  background: linear-gradient(140deg, rgba(255,255,255,.70), transparent 46%) !important;
}

:root[data-theme="light"] .hero-panel-kicker {
  color: rgba(23,20,35,.50) !important;
}

:root[data-theme="light"] .hero-ticker {
  background: rgba(255,255,255,.62) !important;
  border-color: rgba(38,31,62,.13) !important;
}

:root[data-theme="light"] .hero-cgu-cta {
  background:
    radial-gradient(circle at 8% 20%, rgba(255,214,10,.22), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,245,214,.58)) !important;
  border-color: rgba(184,128,0,.22) !important;
}

:root[data-theme="light"] .hero-cgu-text {
  color: rgba(23,20,35,.64) !important;
}

:root[data-theme="light"] .board-deco {
  opacity: .64 !important;
}

:root[data-theme="light"] .board-deco-cell {
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(221,220,238,.86)) !important;
  border-color: rgba(38,31,62,.14) !important;
  box-shadow: inset 0 2px 6px rgba(52,43,88,.12), 0 0 0 1px rgba(255,255,255,.6) !important;
}

:root[data-theme="light"] .board-deco-cell.r {
  background: var(--red) !important;
  border-color: var(--red) !important;
}

:root[data-theme="light"] .board-deco-cell.y {
  background: var(--yellow) !important;
  border-color: var(--yellow) !important;
}

:root[data-theme="light"] .card {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,248,255,.90)) !important;
  border-color: rgba(38,31,62,.14) !important;
  box-shadow: 0 28px 80px rgba(52,43,88,.15), inset 0 1px 0 rgba(255,255,255,.85) !important;
  color: #171423 !important;
}

:root[data-theme="light"] .card::before {
  background: linear-gradient(140deg, rgba(255,255,255,.72), transparent 42%) !important;
}

:root[data-theme="light"] .auth-tabs {
  background: rgba(236,235,248,.82) !important;
  border: 1px solid rgba(38,31,62,.08) !important;
}

:root[data-theme="light"] .auth-tab.active,
:root[data-theme="light"] .btn-ghost:hover {
  background: rgba(255,255,255,.88) !important;
  color: #171423 !important;
  box-shadow: 0 8px 22px rgba(52,43,88,.12) !important;
}

:root[data-theme="light"] .btn-ghost,
:root[data-theme="light"] .btn-robot {
  background: rgba(255,255,255,.54) !important;
  border-color: rgba(76,110,245,.24) !important;
}

.p4-theme-menu-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  color: #f4f4fb;
  cursor: pointer;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.p4-theme-menu-button:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
}

.p4-theme-menu-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  font-size: 18px;
}

.p4-fps-meter {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  z-index: 100020;
  min-width: 68px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: rgba(8,8,18,.74);
  color: var(--p4-fps-good, #30d158);
  font: 800 11px/1 "Barlow", system-ui, sans-serif;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}

body.p4-menu-mounted .p4-fps-meter {
  top: max(12px, env(safe-area-inset-top));
}

.p4-fps-meter[data-state="ok"] {
  color: var(--p4-fps-ok, #ffd60a);
  border-color: rgba(255,214,10,.28);
}

.p4-fps-meter[data-state="bad"] {
  color: var(--p4-fps-bad, #ff2d55);
  border-color: rgba(255,45,85,.32);
}

.p4-fps-meter.rgb {
  animation: p4FpsRgb 2.2s linear infinite;
}
:root[data-theme="light"] .p4-theme-menu-button {
  background: rgba(255,255,255,.64);
  color: #171423;
  border-color: rgba(38,31,62,.14);
}

:root[data-theme="light"] .p4-fps-meter {
  background: rgba(255,255,255,.82);
  border-color: rgba(35,27,60,.16);
  box-shadow: 0 10px 26px rgba(34,25,70,.15), inset 0 1px 0 rgba(255,255,255,.9);
}


@keyframes p4FpsRgb {
  to { filter: hue-rotate(360deg); }
}

@media (max-width: 720px) {
  .p4-fps-meter {
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    right: auto;
    bottom: auto;
    max-width: calc(100vw - 82px);
    white-space: nowrap;
  }
}

.p4-global-menu-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 99997;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,45,85,.18), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(10,10,22,.86);
  color: #f4f4fb;
  box-shadow: 0 18px 46px rgba(0,0,0,.34);
  backdrop-filter: blur(14px);
  cursor: pointer;
  font: 900 13px "Barlow Condensed", sans-serif;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.p4-global-menu-toggle:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 22px 56px rgba(255,45,85,.14), 0 18px 46px rgba(0,0,0,.38);
}

.p4-global-menu-toggle-icon {
  width: 24px;
  height: 24px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(255,45,85,.14);
  color: #ff6f8b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.p4-global-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99995;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease;
}

.p4-global-menu-panel {
  position: fixed;
  top: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 99996;
  width: min(390px, calc(100vw - 28px));
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 20% 0%, rgba(255,45,85,.18), transparent 34%),
    radial-gradient(circle at 100% 42%, rgba(133,235,255,.12), transparent 38%),
    linear-gradient(180deg, rgba(20,20,40,.96), rgba(9,9,20,.95));
  box-shadow: -18px 0 70px rgba(0,0,0,.46);
  backdrop-filter: blur(18px);
  transform: translateX(calc(100% + 32px));
  opacity: .65;
  visibility: hidden;
  pointer-events: none;
  transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .22s ease, visibility 0s linear .28s;
}

.p4-global-menu-open .p4-global-menu-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.p4-global-menu-open .p4-global-menu-panel {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.p4-global-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.p4-global-menu-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.p4-global-menu-logo {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 30px rgba(0,0,0,.24);
}

.p4-global-menu-eyebrow {
  font: 800 11px "Barlow Condensed", sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ff496d;
}

.p4-global-menu-title {
  font: 900 24px "Barlow Condensed", sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #f4f4fb;
  line-height: .95;
}

.p4-global-menu-title span {
  color: #ff2d55;
}

.p4-global-menu-close {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  color: #f4f4fb;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.p4-global-menu-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 2px;
}

.p4-global-menu-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.075);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  color: #f4f4fb;
  text-decoration: none;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.p4-global-menu-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.13) 48%, transparent 78%);
  transform: translateX(-130%);
  opacity: 0;
  pointer-events: none;
}

.p4-global-menu-link:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.20);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
}

.p4-global-menu-link:hover::after {
  opacity: 1;
  animation: p4GlobalMenuSheen .7s ease;
}

.p4-global-menu-emoji {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  flex-shrink: 0;
  transition: transform .2s ease, filter .2s ease;
}

.p4-global-menu-link:hover .p4-global-menu-emoji {
  transform: rotate(-10deg) scale(1.1);
  filter: drop-shadow(0 0 10px rgba(255,255,255,.24));
}

.p4-global-menu-link[href="/"]:hover .p4-global-menu-emoji { animation:p4MenuHome .65s ease; }
.p4-global-menu-link[href="/profil"]:hover .p4-global-menu-emoji { animation:p4MenuProfile .7s ease; }
.p4-global-menu-link[href="/live"]:hover .p4-global-menu-emoji { animation:p4MenuPulse .75s ease; }
.p4-global-menu-link[href="/local"]:hover .p4-global-menu-emoji { animation:p4MenuDice .7s ease; }
.p4-global-menu-link[href="/players"]:hover .p4-global-menu-emoji { animation:p4MenuPeople .7s ease; }
.p4-global-menu-link[href="/leaderboard"]:hover .p4-global-menu-emoji { animation:p4MenuTrophy .75s ease; }
.p4-global-menu-link[href="/clan"]:hover .p4-global-menu-emoji { animation:p4MenuShield .75s ease; }
.p4-global-menu-link[href="/analyse"]:hover .p4-global-menu-emoji { animation:p4MenuBrain .8s ease; }
.p4-global-menu-link[href="/boutique"]:hover .p4-global-menu-emoji { animation:p4MenuCart .75s ease; }
.p4-global-menu-link[href="/stats"]:hover .p4-global-menu-emoji { animation:p4MenuStats .75s ease; }
.p4-global-menu-link[href="/news"]:hover .p4-global-menu-emoji { animation:p4MenuStats .75s ease; }
.p4-global-menu-link[href="/regles"]:hover .p4-global-menu-emoji { animation:p4MenuBook .75s ease; }
.p4-global-menu-link[href="/api-doc"]:hover .p4-global-menu-emoji { animation:p4MenuApi .85s ease; }
.p4-global-menu-link[href^="https://discord"]:hover .p4-global-menu-emoji { animation:p4MenuDiscord .75s ease; }

.p4-global-menu-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.p4-global-menu-label {
  font: 900 13px "Barlow Condensed", sans-serif;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p4-global-menu-sub {
  color: rgba(244,244,251,.44);
  font-size: 10px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p4-global-menu-foot {
  margin-top: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,214,10,.18);
  background: rgba(255,214,10,.065);
  color: rgba(244,244,251,.70);
  font-size: 12px;
  line-height: 1.45;
}

.p4-menu-language-box {
  margin-top: auto;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(133,235,255,.18);
  background: rgba(133,235,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.p4-menu-language-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.p4-menu-language-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
}

.p4-menu-language-head strong {
  display: block;
  font: 900 13px "Barlow Condensed", sans-serif;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.p4-menu-language-head small {
  display: block;
  color: rgba(244,244,251,.50);
  font-size: 10px;
  margin-top: 1px;
}

.p4-menu-language-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.p4-menu-language-select,
.p4-menu-language-save {
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.065);
  color: #f4f4fb;
  font: 800 12px "Barlow Condensed", sans-serif;
  letter-spacing: .8px;
}

.p4-menu-language-select {
  min-width: 0;
  padding: 0 10px;
  outline: none;
}

.p4-menu-language-select option {
  color: #171423;
}

.p4-menu-language-save {
  padding: 0 12px;
  cursor: pointer;
  text-transform: uppercase;
  border-color: rgba(133,235,255,.28);
  background: rgba(133,235,255,.12);
}

.p4-menu-language-save:hover {
  border-color: rgba(133,235,255,.48);
  background: rgba(133,235,255,.18);
}

.p4-menu-language-save:disabled {
  opacity: .55;
  cursor: wait;
}

.p4-install-app {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,214,10,.32);
  background: linear-gradient(135deg, rgba(255,214,10,.14), rgba(255,45,85,.10));
  color: #f4f4fb;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.p4-install-app[hidden] {
  display: none;
}

.p4-install-app:hover {
  transform: translateY(-2px);
  border-color: rgba(255,214,10,.58);
  background: linear-gradient(135deg, rgba(255,214,10,.22), rgba(255,45,85,.15));
}

.p4-install-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffd60a, #ff8a3d);
  color: #17120a;
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 0 18px rgba(255,214,10,.18);
  animation: p4InstallPulse 2.4s ease-in-out infinite;
}

@keyframes p4InstallPulse {
  50% { transform: translateY(2px); box-shadow: 0 0 26px rgba(255,214,10,.34); }
}

.p4-global-menu-copyright {
  display: block;
  margin-top: 8px;
  color: #ffd60a;
  text-decoration: none;
  font: 900 12px "Barlow Condensed", sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.p4-global-menu-copyright:hover {
  text-decoration: underline;
}

body.p4-menu-mounted .home-dock .dock-links {
  display: none !important;
}

@keyframes p4GlobalMenuSheen {
  to { transform: translateX(130%); }
}

@keyframes p4MenuHome{0%,100%{transform:scale(1.1)}45%{transform:translateY(-4px) scale(1.18)}}
@keyframes p4MenuProfile{0%,100%{transform:rotate(-8deg) scale(1.12)}50%{transform:rotate(8deg) scale(1.18)}}
@keyframes p4MenuPulse{0%,100%{transform:scale(1.08);box-shadow:0 0 0 0 rgba(255,45,85,.22)}50%{transform:scale(1.22);box-shadow:0 0 0 8px rgba(255,45,85,.08)}}
@keyframes p4MenuDice{0%,100%{transform:rotate(0) scale(1.1)}35%{transform:rotate(90deg) scale(1.18)}70%{transform:rotate(180deg) scale(1.14)}}
@keyframes p4MenuPeople{0%,100%{transform:translateX(0) scale(1.1)}35%{transform:translateX(-3px) scale(1.14)}70%{transform:translateX(3px) scale(1.14)}}
@keyframes p4MenuTrophy{0%,100%{transform:translateY(0) scale(1.1)}35%{transform:translateY(-5px) rotate(-6deg) scale(1.2)}70%{transform:translateY(1px) rotate(5deg) scale(1.15)}}
@keyframes p4MenuShield{0%,100%{transform:scale(1.1)}45%{transform:scale(1.22);filter:drop-shadow(0 0 14px rgba(133,235,255,.35))}}
@keyframes p4MenuStadium{0%,100%{transform:rotate(0) scale(1.1)}50%{transform:rotate(-12deg) translateY(-3px) scale(1.18)}}
@keyframes p4MenuBrain{0%,100%{transform:scale(1.1)}30%{transform:scale(1.18) rotate(-5deg)}65%{transform:scale(1.14) rotate(5deg)}}
@keyframes p4MenuCart{0%,100%{transform:translateX(0) rotate(0) scale(1.1)}45%{transform:translateX(5px) rotate(-8deg) scale(1.15)}}
@keyframes p4MenuStats{0%,100%{transform:scale(1.1)}25%{transform:translateY(4px) scale(1.08)}60%{transform:translateY(-5px) scale(1.2)}}
@keyframes p4MenuBook{0%,100%{transform:perspective(120px) rotateY(0) scale(1.1)}50%{transform:perspective(120px) rotateY(-34deg) scale(1.17)}}
@keyframes p4MenuApi{0%,100%{transform:rotate(0) scale(1.1)}40%{transform:rotate(-16deg) scale(1.18)}75%{transform:rotate(10deg) scale(1.14)}}
@keyframes p4MenuLaw{0%,100%{transform:rotate(0) scale(1.1)}35%{transform:rotate(-10deg) scale(1.17)}70%{transform:rotate(10deg) scale(1.17)}}
@keyframes p4MenuDiscord{0%,100%{transform:scale(1.1)}45%{transform:translateY(-4px) rotate(-10deg) scale(1.2)}}

:root[data-theme="light"] .p4-global-menu-toggle {
  background: rgba(255,255,255,.88);
  color: #171423;
  border-color: rgba(38,31,62,.14);
  box-shadow: 0 18px 46px rgba(52,43,88,.16);
}

:root[data-theme="light"] .p4-global-menu-panel {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,45,85,.13), transparent 34%),
    radial-gradient(circle at 100% 42%, rgba(133,235,255,.18), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,244,255,.94));
  color: #171423;
  border-color: rgba(38,31,62,.14);
  box-shadow: -18px 0 70px rgba(52,43,88,.22);
}

:root[data-theme="light"] .p4-global-menu-title,
:root[data-theme="light"] .p4-global-menu-close,
:root[data-theme="light"] .p4-global-menu-link {
  color: #171423;
}

:root[data-theme="light"] .p4-global-menu-link {
  background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.46));
  border-color: rgba(38,31,62,.12);
}

:root[data-theme="light"] .p4-global-menu-sub,
:root[data-theme="light"] .p4-global-menu-foot {
  color: rgba(23,20,35,.58);
}

:root[data-theme="light"] .p4-menu-language-box {
  background: rgba(133,235,255,.12);
  border-color: rgba(38,31,62,.12);
}

:root[data-theme="light"] .p4-menu-language-head small {
  color: rgba(23,20,35,.56);
}

:root[data-theme="light"] .p4-menu-language-select,
:root[data-theme="light"] .p4-menu-language-save {
  color: #171423;
  background: rgba(255,255,255,.64);
  border-color: rgba(38,31,62,.14);
}

@media (max-width: 720px) {
  .p4-global-menu-toggle {
    top: 12px;
    right: 12px;
    min-height: 42px;
    padding: 0 12px;
  }

  .p4-global-menu-toggle-text {
    display: none;
  }

  .p4-global-menu-panel {
    top: 10px;
    right: 10px;
    bottom: 10px;
    width: min(360px, calc(100vw - 20px));
    border-radius: 24px;
    padding: 14px;
  }

  .p4-global-menu-link { min-height: 50px; }
  .p4-global-menu-label { font-size: 12px; }
  .p4-global-menu-sub { font-size: 9px; }
  .p4-global-menu-logo { width: 42px; height: 42px; border-radius: 14px; }
  .p4-global-menu-title { font-size: 21px; }
}

/* Pions voyageurs: easter eggs partages entre les pages publiques. */
.p4-page-egg {
  --egg-color: #ffd60a;
  --p4-egg-size: 46px;
  --p4-coin-egg-size: 31px;
  --p4-chaos-egg-size: 34px;
  position: fixed;
  left: var(--egg-layer-left, 42px);
  top: var(--egg-layer-top, 96px);
  display: grid;
  place-items: center;
  z-index: 99940;
  width: var(--p4-egg-size);
  height: var(--p4-egg-size);
  min-width: var(--p4-egg-size);
  min-height: var(--p4-egg-size);
  max-width: var(--p4-egg-size);
  max-height: var(--p4-egg-size);
  margin: 0;
  padding: 0;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 27%, rgba(255,255,255,.92) 0 5%, transparent 7%),
    radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--egg-color) 86%, white) 0 48%, var(--egg-color) 68%, color-mix(in srgb, var(--egg-color) 52%, black) 100%);
  box-shadow: 0 0 24px color-mix(in srgb, var(--egg-color) 42%, transparent), inset 0 0 0 5px rgba(255,255,255,.08), inset 0 -7px 11px rgba(0,0,0,.28);
  cursor: pointer;
  opacity: .92;
  transition: left .38s cubic-bezier(.2,.9,.2,1), top .38s cubic-bezier(.2,.9,.2,1), transform .2s ease, opacity .3s ease, filter .2s ease;
}

.p4-page-egg::before,
.p4-page-egg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.p4-page-egg::before {
  inset: 7px;
  border: 2px solid rgba(255,255,255,.2);
  box-shadow: inset 0 3px 5px rgba(255,255,255,.12), inset 0 -4px 6px rgba(0,0,0,.22);
}
.p4-page-egg::after {
  inset: 15px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.13);
  background: rgba(255,255,255,.055);
}

.p4-page-egg[data-design="grooved"]::before { inset: 8px; border: 5px double rgba(255,255,255,.28); }
.p4-page-egg[data-design="ring"]::before {
  inset: 12px;
  border: 6px solid rgba(6,8,18,.28);
  box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}
.p4-page-egg[data-design="metal"] {
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.22) 0 2px,transparent 2px 6px),
    radial-gradient(circle at 35% 28%,#fff,transparent 12%),
    linear-gradient(135deg,color-mix(in srgb,var(--egg-color) 82%,white),color-mix(in srgb,var(--egg-color) 58%,black));
}
.p4-page-egg[data-design="star"]::after {
  inset: 10px;
  border: 0;
  border-radius: 0;
  background: rgba(255,255,255,.35);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 56%,79% 93%,50% 70%,21% 93%,32% 56%,2% 35%,39% 35%);
}
.p4-page-egg[data-design="gem"]::after,
.p4-page-egg[data-design="dragon-gem"]::after {
  inset: 9px;
  border: 0;
  border-radius: 28%;
  background: linear-gradient(135deg,rgba(255,255,255,.7),transparent 42%),conic-gradient(from 45deg,transparent,rgba(255,255,255,.32),transparent);
  transform: rotate(45deg);
}
.p4-page-egg[data-design="pearl"] {
  filter: saturate(.76);
  box-shadow: inset 0 0 13px rgba(133,235,255,.45),0 0 24px color-mix(in srgb,var(--egg-color) 45%,transparent);
}
.p4-page-egg[data-design="prism"],
.p4-page-egg[data-design="mythic"],
.p4-page-egg[data-design="cosmos"],
.p4-page-egg[data-design="spectral"] {
  background: conic-gradient(from 25deg,var(--egg-color),#fff6a8,#ff5ca8,#8b5cf6,var(--egg-color));
}
.p4-page-egg[data-design="sun"]::after {
  inset: 10px;
  border: 0;
  background: repeating-conic-gradient(rgba(255,255,255,.85) 0 7deg,transparent 7deg 22deg);
  mask: radial-gradient(circle,transparent 0 38%,#000 40%);
}
.p4-page-egg[data-design="scale"]::after {
  inset: 8px;
  border: 0;
  background:
    radial-gradient(circle at 25% 25%,rgba(255,255,255,.46) 0 12%,transparent 13%),
    radial-gradient(circle at 75% 25%,rgba(255,255,255,.32) 0 12%,transparent 13%),
    radial-gradient(circle at 50% 70%,rgba(255,255,255,.34) 0 15%,transparent 16%);
}
.p4-page-egg[data-design="flame"]::after {
  inset: 10px;
  border: 0;
  border-radius: 55% 45% 55% 45%;
  background: linear-gradient(145deg,#fff7a8,#ff7a00 48%,#ff1744);
  transform: rotate(45deg);
}
.p4-page-egg[data-design="moon"]::after {
  inset: 10px;
  border: 0;
  background: #fff;
  box-shadow: 8px 0 0 0 color-mix(in srgb,var(--egg-color) 65%,#5754c9);
}
.p4-page-egg[data-design="artifact"]::after {
  inset: 10px;
  border: 2px dashed rgba(255,255,255,.8);
  background: radial-gradient(circle,rgba(255,255,255,.45),transparent 58%);
}
.p4-page-egg[data-design="clock"]::after {
  inset: 9px;
  border: 3px solid rgba(255,255,255,.55);
  background: linear-gradient(90deg,transparent 48%,#fff 49% 52%,transparent 53%),linear-gradient(0deg,transparent 48%,#fff 49% 52%,transparent 53%);
}
.p4-page-egg[data-design="rune"]::after {
  content: "◇";
  inset: 4px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 27px;
  text-shadow: 0 0 8px #fff;
}
.p4-page-egg[data-design="fantastic"],
.p4-page-egg[data-design="dragon-gem"],
.p4-page-egg[data-design="oracle"],
.p4-page-egg[data-design="crown-gem"] {
  background: conic-gradient(from 130deg,var(--egg-color),#fff,#ff83d1,#8b5cf6,var(--egg-color));
}
.p4-page-egg[data-design="fantastic"]::after,
.p4-page-egg[data-design="oracle"]::after,
.p4-page-egg[data-design="crown-gem"]::after {
  inset: 5px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 28px;
  text-shadow: 0 0 10px var(--egg-color);
}
.p4-page-egg[data-design="fantastic"]::after { content: "✦"; }
.p4-page-egg[data-design="oracle"]::after { content: "☾"; }
.p4-page-egg[data-design="crown-gem"]::after { content: "♕"; color:#fff7c2; }
.p4-page-egg[data-design="queen"]::after {
  content: "♛";
  inset: 5px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #3a214d;
  font-size: 25px;
  text-shadow: 0 1px 0 #fff,0 0 8px #fff;
}
.p4-page-egg[data-design="queen-dark"] {
  background: conic-gradient(from 20deg,#5c5278,#ff4dc4,#fff2a8,#5c5278);
}
.p4-page-egg[data-design="queen-dark"]::after {
  content: "♛";
  inset: 5px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #ffe7fb;
  font-size: 25px;
  text-shadow: 0 0 10px #ff4dc4;
}
.p4-page-egg[data-design^="event"] {
  background: radial-gradient(circle at 32% 24%,rgba(255,255,255,.82),transparent 13%),conic-gradient(from 25deg,var(--egg-color),#25d5ff,#111,var(--egg-color));
  border-color: rgba(133,235,255,.5);
}
.p4-page-egg[data-design^="event"]::after {
  content: "★";
  inset: 7px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(255,255,255,.58);
  background: transparent;
  color: #fff;
  font-size: 22px;
  text-shadow: 0 0 10px var(--egg-color);
}
.p4-page-egg[data-design="event-crown"]::after { content: "♛"; }
.p4-page-egg[data-design="event-shadow"]::after { content: "◆"; }
.p4-page-egg[data-design]::before { inset: 22% !important; border-width: 1px !important; }
.p4-page-egg[data-design]::after { inset: 34% !important; border-width: 1px !important; font-size: .72em !important; }
.p4-page-egg[data-design="star"]::after,
.p4-page-egg[data-design="gem"]::after,
.p4-page-egg[data-design="dragon-gem"]::after,
.p4-page-egg[data-design="flame"]::after,
.p4-page-egg[data-design="artifact"]::after,
.p4-page-egg[data-design="clock"]::after,
.p4-page-egg[data-design="sun"]::after,
.p4-page-egg[data-design="scale"]::after {
  inset: 23% !important;
}
.p4-page-egg[data-design="queen"]::after,
.p4-page-egg[data-design="queen-dark"]::after,
.p4-page-egg[data-design="fantastic"]::after,
.p4-page-egg[data-design="oracle"]::after,
.p4-page-egg[data-design="crown-gem"]::after,
.p4-page-egg[data-design^="event"]::after {
  inset: 0 !important;
  font-size: .78em !important;
}
.p4-page-egg:hover,
.p4-page-egg:focus-visible { opacity: 1; filter: saturate(1.15); transform: rotate(-10deg) scale(1.18); outline: 2px solid rgba(255,255,255,.78); outline-offset: 3px; }
.p4-page-egg.escaping { animation: p4EggEscape .42s cubic-bezier(.2, .9, .35, 1.15) !important; }
.p4-page-egg.caught { transform: scale(1.7) rotate(360deg); opacity: 0; pointer-events: none; }
.p4-page-egg[data-rarity="rare"] { box-shadow: 0 0 28px #4c8dff99, inset 0 -7px 11px rgba(0,0,0,.24); }
.p4-page-egg[data-rarity="epic"] { box-shadow: 0 0 34px #bf5af2aa, inset 0 -7px 11px rgba(0,0,0,.24); animation:p4EggEpic 2s ease-in-out infinite; }
.p4-page-egg[data-rarity="legendary"] { border-color:#fff2a8;box-shadow:0 0 18px #ffd60a,0 0 42px #ff9f0a88,inset 0 -7px 11px rgba(0,0,0,.24);animation:p4EggLegendary 1.3s ease-in-out infinite alternate }
.p4-page-egg[data-rarity="mythic"] { border-color:#ffc1e3;box-shadow:0 0 20px #ff2d86,0 0 48px #8b5cf688;animation:p4EggSpectral 2.4s linear infinite }
.p4-page-egg[data-rarity="artifact"] { border-color:#cafff1;box-shadow:0 0 20px #72f7d4,0 0 52px #e8cf7888;animation:p4EggArtifact 1.8s ease-in-out infinite alternate }
.p4-page-egg[data-rarity="queenpawn"] { border-color:#fff;box-shadow:0 0 16px #fff,0 0 38px #d39bff,0 0 68px #ffd60a88;animation:p4EggQueen 1.25s ease-in-out infinite alternate }
.p4-page-egg.p4-coin-egg {
  width: var(--p4-coin-egg-size);
  height: var(--p4-coin-egg-size);
  min-width: var(--p4-coin-egg-size);
  min-height: var(--p4-coin-egg-size);
  max-width: var(--p4-coin-egg-size);
  max-height: var(--p4-coin-egg-size);
  opacity: .76;
  border-width: 1px;
  filter: saturate(.95);
  outline: 1px solid rgba(255,255,255,.10);
}
.p4-page-egg.p4-coin-egg::before { inset: 22%; border-width: 1px; }
.p4-page-egg.p4-coin-egg::after { inset: 38%; border-width: 1px; }
.p4-page-egg.p4-coin-egg:hover,
.p4-page-egg.p4-coin-egg:focus-visible { opacity: 1; filter: saturate(1.2); }

@media (min-width: 769px) {
  .p4-page-egg {
    --p4-egg-size: 46px;
    --p4-coin-egg-size: 31px;
    --p4-chaos-egg-size: 34px;
  }

  .p4-chaos-egg {
    --p4-chaos-egg-size: 34px;
  }
}

@media (max-width: 768px) {
  .p4-page-egg {
    --p4-egg-size: 38px;
    --p4-coin-egg-size: 28px;
    --p4-chaos-egg-size: 30px;
    box-shadow: 0 0 14px color-mix(in srgb, var(--egg-color) 38%, transparent), inset 0 0 0 3px rgba(255,255,255,.08), inset 0 -4px 7px rgba(0,0,0,.28);
  }

  .p4-page-egg.p4-coin-egg {
    opacity: .82;
  }

  .p4-chaos-egg {
    --p4-chaos-egg-size: 30px;
  }
}

@keyframes p4EggEscape {
  0% { transform: rotate(0deg) scale(1); }
  35% { transform: rotate(-16deg) scale(.82); }
  70% { transform: rotate(12deg) scale(1.14); }
  100% { transform: rotate(0deg) scale(1); }
}

.p4-chaos-egg {
  position: relative;
  display: inline-grid;
  place-items: center;
  z-index: 2;
  width: 1.05em;
  height: 1.05em;
  min-width: 15px;
  min-height: 15px;
  margin: 0 .16em;
  vertical-align: -.14em;
  padding: 0;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: rgba(255,255,255,.22);
  font-size: .8em;
  transition: .2s ease;
}
.p4-chaos-egg:hover,
.p4-chaos-egg:focus-visible { color: #fff; border-color: #bf5af2; background: rgba(191,90,242,.14); transform: rotate(12deg) scale(1.12); outline: none; }

.p4-page-egg.p4-egg-fixed {
  position: fixed !important;
  left: var(--egg-layer-left, 42px) !important;
  top: var(--egg-layer-top, 96px) !important;
  width: var(--p4-egg-size) !important;
  height: var(--p4-egg-size) !important;
  min-width: var(--p4-egg-size) !important;
  min-height: var(--p4-egg-size) !important;
  max-width: var(--p4-egg-size) !important;
  max-height: var(--p4-egg-size) !important;
  margin: 0 !important;
  opacity: .92 !important;
  pointer-events: auto;
}

.p4-page-egg.p4-egg-fixed.p4-coin-egg {
  width: var(--p4-coin-egg-size) !important;
  height: var(--p4-coin-egg-size) !important;
  min-width: var(--p4-coin-egg-size) !important;
  min-height: var(--p4-coin-egg-size) !important;
  max-width: var(--p4-coin-egg-size) !important;
  max-height: var(--p4-coin-egg-size) !important;
  opacity: .82 !important;
}

.p4-chaos-egg.p4-egg-fixed {
  position: fixed !important;
  left: var(--egg-layer-left, 42px) !important;
  top: var(--egg-layer-top, 96px) !important;
  width: var(--p4-chaos-egg-size, 34px) !important;
  height: var(--p4-chaos-egg-size, 34px) !important;
  min-width: var(--p4-chaos-egg-size, 34px) !important;
  min-height: var(--p4-chaos-egg-size, 34px) !important;
  margin: 0 !important;
  font-size: 16px;
  opacity: .72;
  z-index: 99939;
}

body.p4-egg-chaos .p4-global-menu-toggle { animation: p4EggMenuDance .45s ease-in-out infinite alternate; }
body.p4-egg-chaos main,
body.p4-egg-chaos .page,
body.p4-egg-chaos .wrap { animation: p4EggPageWobble .7s ease-in-out 4; }
.p4-egg-banner {
  position: fixed;
  z-index: 100018;
  left: 50%;
  top: 18px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #bf5af2, #ff2d55);
  color: #fff;
  font: 900 16px "Barlow Condensed", sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  box-shadow: 0 16px 40px rgba(191,90,242,.35);
  transform: translateX(-50%) rotate(-2deg);
  animation: p4EggBanner 3.2s ease forwards;
}

.p4-egg-toast {
  position: fixed;
  z-index: 100020;
  left: var(--egg-toast-left, 50%);
  top: var(--egg-toast-top, 120px);
  width: min(380px, calc(100vw - 24px));
  padding: 11px 15px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 18px;
  background: rgba(12,10,27,.94);
  color: #fff;
  font: 900 15px/1.35 "Barlow Condensed", sans-serif;
  letter-spacing: .5px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  box-shadow: 0 22px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
  backdrop-filter: blur(18px);
  transform: translate(-50%, 8px) scale(.96);
  opacity: 0;
  pointer-events: none;
  transition: .3s ease;
}

.p4-egg-toast.in-box {
  background: linear-gradient(135deg, rgba(255,45,85,.92), rgba(12,10,27,.96));
  border-color: rgba(255,255,255,.24);
}

.p4-egg-toast.after-catch-zone {
  background: rgba(12,10,27,.97);
  border-color: rgba(133,235,255,.28);
  box-shadow: 0 18px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(133,235,255,.08) inset;
}

.p4-egg-toast.show { transform: translate(-50%, 0) scale(1); opacity: 1; }
.p4-egg-spark {
  --mini-egg-color: #ffd60a;
  position: fixed;
  z-index: 100015;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  pointer-events: none;
  background-color: var(--mini-egg-color);
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.9) 0 9%, transparent 11%),
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--mini-egg-color) 82%, white) 0 46%, var(--mini-egg-color) 66%, color-mix(in srgb, var(--mini-egg-color) 55%, black) 100%);
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: 0 0 14px color-mix(in srgb, var(--mini-egg-color) 56%, transparent), inset 0 -3px 5px rgba(0,0,0,.26);
  animation: p4EggSpark 1.45s cubic-bezier(.16,.84,.28,1) forwards;
}

.p4-egg-spark::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.16);
  background: rgba(255,255,255,.08);
}

.p4-egg-spark.big {
  width: 22px;
  height: 22px;
}

@keyframes p4EggSpark {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(.9); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(var(--spark-x) - 50%), calc(var(--spark-y) - 50%)) rotate(var(--spark-rotate, 540deg)) scale(.22); opacity: 0; }
}
@keyframes p4EggEpic { 50% { transform:translateY(-4px) rotate(5deg);filter:brightness(1.2) } }
@keyframes p4EggLegendary { to { transform:scale(1.12) rotate(-6deg);filter:brightness(1.25) } }
@keyframes p4EggSpectral { to { filter:hue-rotate(360deg);transform:rotate(360deg) } }
@keyframes p4EggArtifact { to { transform:translateY(-5px) rotate(8deg);filter:brightness(1.25) } }
@keyframes p4EggQueen { to { transform:scale(1.16);filter:brightness(1.25) } }
@keyframes p4EggMenuDance { to { transform: rotate(8deg) scale(1.08); } }
@keyframes p4EggPageWobble { 25% { transform: rotate(.35deg); } 75% { transform: rotate(-.35deg); } }
@keyframes p4EggBanner { 0% { opacity:0;transform:translate(-50%,-20px) rotate(-5deg) } 12%,82% { opacity:1;transform:translateX(-50%) rotate(-2deg) } 100% { opacity:0;transform:translate(-50%,-12px) rotate(3deg) } }

@media (prefers-reduced-motion: reduce) {
  .p4-page-egg,
  .p4-egg-toast { transition-duration: .01ms !important; }
  .p4-egg-spark,
  .p4-page-egg[data-rarity],
  .p4-egg-banner,
  body.p4-egg-chaos main,
  body.p4-egg-chaos .page,
  body.p4-egg-chaos .wrap,
  body.p4-egg-chaos .p4-global-menu-toggle { animation: none !important; }
}

/* Stable overlay layer: wallpaper must never change modal positioning or paint order. */
body.p4-wallpaper-mode #bot-modal,
body.p4-wallpaper-mode #duel-modal,
body.p4-wallpaper-mode #training-modal,
body.p4-wallpaper-mode .modal-bg,
body.p4-wallpaper-mode .preview-modal-bg,
body.p4-wallpaper-mode [role="dialog"] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100100 !important;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
}

body.p4-wallpaper-mode #bot-modal > div,
body.p4-wallpaper-mode #duel-modal > div,
body.p4-wallpaper-mode #training-modal > div,
body.p4-wallpaper-mode .modal-bg > .modal,
body.p4-wallpaper-mode .preview-modal-bg > * {
  position: relative;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overflow-x: hidden;
}

body.p4-wallpaper-mode .p4-egg-toast,
body.p4-wallpaper-mode .p4-egg-banner,
body.p4-wallpaper-mode .egg-toast,
body.p4-wallpaper-mode .egg-win-card {
  position: fixed !important;
  z-index: 100110 !important;
  max-width: calc(100vw - 24px);
}

/* Opening the menu should not keep repainting the animated background underneath it. */
body.p4-global-menu-open .bg-grid,
body.p4-global-menu-open .bg-orbs,
body.p4-global-menu-open .bg-orbs *,
body.p4-global-menu-open .scanlines,
body.p4-global-menu-open .stars {
  animation-play-state: paused !important;
}

body.p4-global-menu-open .p4-global-menu-backdrop,
body.p4-global-menu-open .p4-global-menu-panel,
body.p4-wallpaper-mode .p4-global-menu-toggle,
body.p4-wallpaper-mode .p4-global-menu-backdrop,
body.p4-wallpaper-mode .p4-global-menu-panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 720px) {
  body {
    min-height: 100dvh;
  }

  body.p4-wallpaper-mode #bot-modal,
  body.p4-wallpaper-mode #duel-modal,
  body.p4-wallpaper-mode #training-modal,
  body.p4-wallpaper-mode .modal-bg,
  body.p4-wallpaper-mode .preview-modal-bg {
    padding: max(12px, env(safe-area-inset-top, 0px))
      max(12px, env(safe-area-inset-right, 0px))
      max(12px, env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px));
  }

  body.p4-wallpaper-mode #bot-modal > div,
  body.p4-wallpaper-mode #duel-modal > div,
  body.p4-wallpaper-mode #training-modal > div,
  body.p4-wallpaper-mode .modal-bg > .modal,
  body.p4-wallpaper-mode .preview-modal-bg > * {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 24px);
  }

  body.p4-wallpaper-mode .p4-egg-toast,
  body.p4-wallpaper-mode .egg-toast {
    left: 50% !important;
    top: auto !important;
    bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
  }
}
/* Keep normal prose intact on desktop; use aggressive wrapping only where narrow screens need it. */
body {
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 720px) {
  body {
    overflow-wrap: anywhere;
  }
}