:root {
      --bg-color: #0f111a;
      --accent-red: #ff5370;
      --accent-green: #c3e88d;
      --accent-blue: #82aaff;
      --accent-yellow: #ffcb6b;
      --accent-purple: #c792ea;
      --text-color: #eeffff;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    }

    /* Accessibilité universelle : Focus Clavier & Tabulation (WCAG 2.2 AAA) */
    :focus-visible {
      outline: 3px solid #ffd166 !important;
      outline-offset: 3px !important;
      box-shadow: 0 0 14px rgba(255, 209, 102, 0.75) !important;
    }

    body.high-contrast-active :focus-visible {
      outline: 4px solid #ffffff !important;
      outline-offset: 3px !important;
      box-shadow: 0 0 16px #ffffff !important;
    }

    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-color);
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      width: 100vw;
      height: 100dvh;
      max-height: 100vh;
      padding: 6px 10px;
      gap: 6px;
      box-sizing: border-box;
    }

    header {
      width: 100%;
      padding: clamp(4px, 0.9vmin, 8px) clamp(10px, 1.8vw, 18px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(135deg, rgba(38, 28, 22, 0.92) 0%, rgba(22, 17, 14, 0.96) 100%);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius: 14px;
      border: 1.5px solid rgba(224, 169, 72, 0.38);
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 225, 140, 0.25);
      flex-shrink: 0;
      position: relative;
    }

    .brand-container {
      display: flex;
      align-items: center;
      gap: clamp(8px, 1.2vw, 14px);
    }

    .brand-mole-badge {
      width: clamp(34px, 4.5vmin, 44px);
      height: clamp(34px, 4.5vmin, 44px);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 209, 102, 0.25) 0%, rgba(42, 28, 20, 0.9) 100%);
      border: 1.5px solid #ffd166;
      box-shadow: 0 0 12px rgba(255, 209, 102, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .brand-mole-badge:hover {
      transform: scale(1.1) rotate(-6deg);
    }
    .brand-mole-badge:active {
      transform: scale(0.95);
    }
    .brand-mole-badge:focus-visible {
      outline: 2px solid var(--accent-yellow);
      outline-offset: 2px;
    }

    .header-mole-avatar {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
    }

    .brand-titles {
      display: flex;
      flex-direction: column;
      justify-content: center;
      user-select: none;
    }

    .game-logo-text {
      font-size: clamp(1.05rem, 2.2vw, 1.45rem);
      font-weight: 900;
      letter-spacing: 0.8px;
      line-height: 1.1;
      margin: 0;
      background: linear-gradient(180deg, #fff7d6 0%, #ffd166 45%, #ff9f1c 80%, #e07a5f 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 10px rgba(255, 175, 50, 0.3));
      display: inline-flex;
      align-items: center;
      gap: 0.3em;
      text-transform: uppercase;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    }

    .logo-excl {
      display: inline-block;
      margin-left: 0.15em;
      color: #ff5370;
      -webkit-text-fill-color: #ff5370;
      filter: drop-shadow(0 0 6px rgba(255, 83, 112, 0.6));
      animation: pulse-excl 2s infinite ease-in-out;
    }

    @keyframes pulse-excl {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.18); }
    }

    .hud-gauge {
      display: flex;
      align-items: center;
      gap: clamp(8px, 1.4vw, 14px);
      background: rgba(18, 14, 12, 0.85);
      padding: clamp(4px, 0.8vmin, 6px) clamp(8px, 1.2vw, 14px);
      border-radius: 10px;
      border: 1px solid rgba(224, 169, 72, 0.25);
      box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
    }

    .timer-display {
      font-size: clamp(1.1rem, 2.2vw, 1.4rem);
      font-weight: 900;
      font-family: monospace;
      color: var(--accent-yellow);
      min-width: 75px;
      text-shadow: 0 0 8px rgba(255, 209, 102, 0.4);
    }

    .gauge-bar-container {
      width: clamp(90px, 18vw, 210px);
      height: 14px;
      background: #090a10;
      border-radius: 9px;
      overflow: hidden;
      border: 1px solid rgba(255, 209, 102, 0.2);
      position: relative;
    }

    .gauge-fill {
      height: 100%;
      width: 40%;
      background: linear-gradient(90deg, #ff5370, #ffcb6b, #c3e88d);
      transition: width 0.2s ease-out;
      box-shadow: 0 0 8px rgba(195, 232, 141, 0.5);
    }

    .stats-box {
      font-size: clamp(0.8rem, 1.6vw, 0.95rem);
      font-weight: 700;
      color: var(--accent-green);
      white-space: nowrap;
    }

    .score-display-hud {
      font-size: clamp(0.85rem, 1.7vw, 1.05rem);
      font-weight: 800;
      color: #ffd700;
      background: rgba(255, 215, 0, 0.12);
      border: 1px solid rgba(255, 215, 0, 0.35);
      border-radius: 6px;
      padding: 2px 8px;
      white-space: nowrap;
      text-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
      font-variant-numeric: tabular-nums;
      transition: transform 0.15s ease, background 0.15s ease;
    }

    .fs-score-box {
      font-size: 0.78rem;
      font-weight: 800;
      color: #ffd700;
      white-space: nowrap;
      line-height: 1.1;
      text-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
    }

    .header-sound-btn,
    .header-pause-btn,
    .header-fullscreen-btn,
    .header-settings-btn {
      background: rgba(255, 209, 102, 0.15);
      border: 1.5px solid rgba(255, 209, 102, 0.4);
      color: #ffd166;
      border-radius: 8px;
      font-size: clamp(1.0rem, 2.2vw, 1.25rem);
      padding: 3px 10px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      transition: all 0.2s ease;
      touch-action: manipulation;
      margin-left: 4px;
    }
    .header-sound-btn:hover,
    .header-pause-btn:hover,
    .header-fullscreen-btn:hover,
    .header-settings-btn:hover {
      background: rgba(255, 209, 102, 0.3);
      border-color: #ffd166;
      transform: scale(1.06);
    }
    .header-sound-btn:active,
    .header-pause-btn:active,
    .header-fullscreen-btn:active,
    .header-settings-btn:active {
      transform: scale(0.94);
    }
    .header-sound-btn:focus-visible,
    .header-pause-btn:focus-visible,
    .header-fullscreen-btn:focus-visible,
    .header-settings-btn:focus-visible {
      outline: 2.5px solid #ffd166;
      outline-offset: 2px;
      box-shadow: 0 0 10px rgba(255, 209, 102, 0.5);
    }
    .header-sound-btn.is-muted {
      background: rgba(255, 83, 112, 0.2);
      border-color: #ff5370;
      color: #ff5370;
    }
    .header-pause-btn.is-paused {
      background: rgba(255, 83, 112, 0.25);
      border-color: #ff5370;
      color: #ff5370;
      animation: pulse-pause 1.2s infinite ease-in-out;
    }
    .header-fullscreen-btn.is-fullscreen {
      background: rgba(255, 209, 102, 0.25);
      border-color: #ffd166;
      color: #ffd166;
    }
    @keyframes pulse-pause {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.08); }
    }

    /* =========================================================================
       MODALE DE RÉGLAGES & ACCESSIBILITÉ (A11Y & REMAPPING)
       ========================================================================= */
    .settings-modal-container {
      width: 100%;
      max-width: 640px;
      max-height: 100%;
      overflow-y: visible;
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: clamp(4px, 1.2vmin, 12px);
      text-align: left;
      color: #f5e6d3;
      box-sizing: border-box;
    }

    .settings-section {
      background: rgba(30, 22, 18, 0.7);
      border: 1.5px solid rgba(224, 169, 72, 0.35);
      border-radius: 12px;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .settings-section-title {
      font-size: 1.05rem;
      font-weight: 800;
      color: #ffd166;
      display: flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid rgba(255, 209, 102, 0.2);
      padding-bottom: 6px;
      margin: 0;
    }

    .settings-swap-notice {
      background: rgba(255, 209, 102, 0.15);
      border: 1.5px solid #ffd166;
      border-radius: 8px;
      padding: 8px 12px;
      margin-bottom: 10px;
      color: #ffd166;
      font-size: 0.84rem;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .settings-tab-desc {
      font-size: 0.8rem;
      color: #cbd5e1;
      margin: 0 0 6px 0;
    }

    .settings-reset-row {
      margin-top: 8px;
      text-align: right;
    }

    .settings-reset-btn {
      min-height: 34px;
      padding: 4px 12px;
      font-size: 0.78rem;
    }

    .settings-toggle-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      font-size: 0.92rem;
      font-weight: 600;
      color: #f1f5f9;
    }

    .settings-toggle-label {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .settings-toggle-desc {
      font-size: 0.78rem;
      color: #cbd5e1;
      font-weight: normal;
    }

    /* Switch toggle accessible */
    .switch-toggle {
      position: relative;
      display: inline-block;
      width: 48px;
      height: 26px;
      flex-shrink: 0;
    }
    .switch-toggle input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .switch-slider {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: #334155;
      transition: 0.25s ease;
      border-radius: 26px;
      border: 1.5px solid rgba(255, 255, 255, 0.2);
    }
    .switch-slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 2.5px;
      background-color: #ffffff;
      transition: 0.25s ease;
      border-radius: 50%;
      box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    }
    .switch-toggle input:checked + .switch-slider {
      background-color: #10b981;
      border-color: #34d399;
    }
    .switch-toggle input:checked + .switch-slider:before {
      transform: translateX(22px);
    }
    .switch-toggle input:focus-visible + .switch-slider {
      outline: none;
      box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.6);
    }

    /* Grille de remappage des touches */
    .remapping-grid {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .remap-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      padding: 6px 10px;
    }
    .remap-action {
      font-size: 0.85rem;
      font-weight: 700;
      color: #e2e8f0;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .remap-key-btn {
      background: #1e293b;
      border: 1.5px solid #475569;
      color: #ffd166;
      font-family: monospace;
      font-size: 0.88rem;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
      min-width: 60px;
      text-align: center;
    }
    .remap-key-btn:hover {
      background: rgba(255, 209, 102, 0.3);
      transform: translateY(-1px);
    }
    .remap-key-btn:focus-visible {
      outline: 2.5px solid #ffd166;
      outline-offset: 2px;
      box-shadow: 0 0 10px rgba(255, 209, 102, 0.5);
    }
    .remap-key-btn.is-listening {
      background: #ff5370;
      color: #ffffff;
      border-color: #ff80ab;
      animation: pulse-pause 0.8s infinite ease-in-out;
    }

    /* Sélecteur de titre royal */
    .royal-title-selector {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }

    .royal-title-btn {
      flex: 1;
      min-width: 100px;
      padding: 8px 12px;
      font-size: 0.9rem;
      font-weight: 700;
      color: #cbd5e1;
      background: rgba(255, 255, 255, 0.05);
      border: 1.5px solid rgba(255, 255, 255, 0.15);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.15s ease;
      text-align: center;
    }

    .royal-title-btn:hover {
      background: rgba(255, 209, 102, 0.12);
      border-color: #ffd166;
      color: #ffd166;
      transform: translateY(-1px);
    }

    .royal-title-btn--active {
      background: rgba(255, 209, 102, 0.2);
      border-color: #ffd166;
      color: #ffd166;
      box-shadow: 0 0 10px rgba(255, 209, 102, 0.25);
    }

    .royal-title-btn--active:hover {
      background: rgba(255, 209, 102, 0.28);
    }

    .settings-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 44px;
      padding: 8px 22px;
      font-size: clamp(0.9rem, 1.8vmin, 1.1rem);
      font-weight: 900;
      color: #ffffff;
      background: linear-gradient(180deg, #4f5d75 0%, #2d3748 55%, #1a202c 100%);
      border: 2.5px solid #cbd5e0;
      border-radius: 12px;
      cursor: pointer;
      box-shadow: 0 4px 0 #0f141c, 0 8px 18px rgba(0, 0, 0, 0.45);
      transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
      text-transform: uppercase;
      letter-spacing: 1px;
      flex-shrink: 0;
    }
    .settings-btn:hover {
      transform: translateY(-2px);
      filter: brightness(1.15);
      border-color: #ffd166;
      box-shadow: 0 6px 0 #0f141c, 0 12px 22px rgba(0, 0, 0, 0.55);
    }
    .settings-btn:active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 #0f141c, 0 4px 8px rgba(0, 0, 0, 0.4);
    }
    .settings-btn:focus-visible {
      outline: 3px solid #ffd166;
      outline-offset: 2px;
      box-shadow: 0 0 12px rgba(255, 209, 102, 0.5);
    }

    .action-btn-small, .settings-btn-small {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 38px;
      padding: 6px 16px;
      font-size: clamp(0.82rem, 1.5vmin, 0.95rem);
      font-weight: 800;
      color: #ffffff;
      background: linear-gradient(180deg, #4f5d75 0%, #2d3748 55%, #1a202c 100%);
      border: 2px solid #cbd5e0;
      border-radius: 10px;
      cursor: pointer;
      box-shadow: 0 3px 0 #0f141c, 0 6px 14px rgba(0, 0, 0, 0.35);
      transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease, border-color 0.15s ease;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      flex-shrink: 0;
      user-select: none;
      font-family: inherit;
    }
    .action-btn-small:hover, .settings-btn-small:hover {
      transform: translateY(-2px);
      filter: brightness(1.15);
      border-color: #ffd166;
      box-shadow: 0 5px 0 #0f141c, 0 10px 18px rgba(0, 0, 0, 0.45);
    }
    .action-btn-small:active, .settings-btn-small:active {
      transform: translateY(2px);
      box-shadow: 0 1px 0 #0f141c, 0 3px 6px rgba(0, 0, 0, 0.3);
    }
    .action-btn-small:focus-visible, .settings-btn-small:focus-visible {
      outline: 3px solid #ffd166;
      outline-offset: 2px;
      box-shadow: 0 0 12px rgba(255, 209, 102, 0.6);
    }

    main {
      position: relative;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
      border-radius: 20px;
      overflow: hidden;
      border: 2px solid rgba(255, 255, 255, 0.15);
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      flex: 1 1 0;
      min-height: 0;
      max-height: 100%;
    }

    canvas {
      display: block;
      background: #000000;
      width: 100%;
      height: 100%;
      touch-action: none;
      will-change: transform;
      transform: translate3d(0, 0, 0);
    }

    #confetti-canvas {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      pointer-events: none;
      z-index: 1;
      background: transparent;
    }

    .overlay {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background: radial-gradient(circle at center, rgba(107, 91, 80, 0.96) 0%, rgba(53, 42, 36, 0.98) 100%);
      display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
      gap: clamp(6px, 1.2vmin, 12px);
      padding: clamp(8px, 1.6vmin, 16px) clamp(6px, 1.2vmin, 14px) clamp(24px, 5vmin, 40px) clamp(6px, 1.2vmin, 14px);
      z-index: 10; transition: opacity 0.3s ease;
      overflow-y: auto; /* Scroll global sur la page / modale complète */
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
      scrollbar-width: thin;
      scrollbar-color: #ffd166 rgba(30, 22, 18, 0.7);
    }

    .overlay::-webkit-scrollbar {
      width: 8px;
    }

    .overlay::-webkit-scrollbar-track {
      background: rgba(26, 19, 15, 0.75);
      border-radius: 6px;
      margin: 6px 0;
    }

    .overlay::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #ffd166, #e09f3e);
      border-radius: 6px;
      border: 1.5px solid rgba(38, 28, 22, 0.6);
    }

    .overlay::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #ffe082, #ffd166);
      box-shadow: 0 0 8px rgba(255, 209, 102, 0.7);
    }

    .overlay > * {
      position: relative;
      z-index: 2;
    }

    .overlay.hidden { opacity: 0; pointer-events: none; }

    #overlay-title {
      color: #f5e6d3; 
      text-shadow: 0 3px 12px rgba(0,0,0,0.6), 0 2px 0px #352a24;
      font-size: clamp(1.0rem, 2.6vmin, 1.6rem);
      font-weight: 900;
      text-align: center;
      line-height: 1.15;
      margin: 0;
      flex-shrink: 0;
    }
    
    .mole-story-box {
      background: linear-gradient(135deg, #7c6a5d 0%, #5d4e44 100%);
      border: 2px solid #9c8a7d;
      border-radius: clamp(10px, 1.8vmin, 16px);
      padding: clamp(8px, 1.6vmin, 16px);
      max-width: min(98%, 1020px);
      width: 100%;
      color: #f5e6d3;
      line-height: 1.35;
      font-size: clamp(0.72rem, 1.5vmin, 0.92rem);
      box-shadow: inset 0 0 16px rgba(0,0,0,0.25), 0 10px 25px rgba(0,0,0,0.5);
      text-align: center;
      overflow: visible;
      box-sizing: border-box;
    }
    
    .mole-story-box p { margin: 0 0 clamp(3px, 0.8vmin, 6px) 0; }
    .mole-story-box p strong { color: #ffb4a2; }
    
    .mole-story-box .highlight { 
      color: #ffd166; font-weight: 900;
      font-size: clamp(0.78rem, 1.6vmin, 0.98rem); 
      margin-top: clamp(4px, 1vmin, 8px);
      margin-bottom: clamp(6px, 1.2vmin, 10px);
      text-transform: uppercase; 
      letter-spacing: 0.5px;
    }

    .endgame-svg {
      width: clamp(110px, 20vmin, 180px);
      height: auto;
      max-height: 18vh;
      margin: 0 auto clamp(2px, 0.8vmin, 8px) auto;
      display: block;
      overflow: visible;
    }

    .highlight-win {
      color: var(--accent-green) !important;
      font-weight: 900;
      font-size: clamp(0.9rem, 2vmin, 1.2rem) !important;
      margin: 0 0 clamp(4px, 1vmin, 8px) 0 !important;
    }

    .highlight-lose {
      color: var(--accent-red) !important;
      font-weight: 900;
      font-size: clamp(0.9rem, 2vmin, 1.2rem) !important;
      margin: 0 0 clamp(4px, 1vmin, 8px) 0 !important;
    }

    /* =========================================================================
       👑 VICTORY SCORING & HONORIFIC TITLES
       ========================================================================= */
    .victory-score-card {
      background: rgba(15, 23, 42, 0.9);
      border: 1.5px solid rgba(255, 215, 0, 0.45);
      border-radius: clamp(8px, 1.5vmin, 14px);
      padding: clamp(10px, 1.8vmin, 18px);
      margin: clamp(8px, 1.5vmin, 16px) auto;
      max-width: min(98%, 680px);
      width: 100%;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(255, 215, 0, 0.08);
      text-align: left;
      box-sizing: border-box;
    }

    .victory-rank-badge-wrapper {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: clamp(10px, 2vmin, 16px);
      margin-bottom: clamp(8px, 1.5vmin, 12px);
      padding-bottom: clamp(6px, 1vmin, 10px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .victory-rank-badge {
      width: clamp(46px, 7.5vmin, 62px);
      height: clamp(46px, 7.5vmin, 62px);
      border-radius: clamp(10px, 1.8vmin, 16px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.5);
      position: relative;
      animation: rankBadgePop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    }

    @keyframes rankBadgePop {
      0% { transform: scale(0.3) rotate(-15deg); opacity: 0; }
      100% { transform: scale(1) rotate(0deg); opacity: 1; }
    }

    .rank-badge-s {
      background: linear-gradient(135deg, #ffd700, #ff8f00, #ff6f00);
      border: 2px solid #fff9c4;
      box-shadow: 0 0 16px rgba(255, 215, 0, 0.75);
    }
    .rank-badge-a {
      background: linear-gradient(135deg, #00e5ff, #0091ea, #01579b);
      border: 2px solid #b3e5fc;
      box-shadow: 0 0 14px rgba(0, 229, 255, 0.65);
    }
    .rank-badge-b {
      background: linear-gradient(135deg, #a7ffeb, #00bfa5, #004d40);
      border: 2px solid #e0f2f1;
      box-shadow: 0 0 12px rgba(0, 191, 165, 0.55);
    }
    .rank-badge-c {
      background: linear-gradient(135deg, #ffcc80, #ef6c00, #b71c1c);
      border: 2px solid #ffe0b2;
      box-shadow: 0 0 10px rgba(239, 108, 0, 0.45);
    }

    .rank-label {
      font-size: clamp(0.55rem, 1vmin, 0.7rem);
      font-weight: 800;
      color: rgba(255, 255, 255, 0.9);
      letter-spacing: 1px;
      line-height: 1;
    }

    .rank-letter {
      font-size: clamp(1.4rem, 3.2vmin, 2.2rem);
      font-weight: 900;
      color: #ffffff;
      line-height: 1;
      text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }

    .victory-title-block {
      flex: 1;
      min-width: 0;
    }

    .victory-honorific-title {
      font-size: clamp(0.95rem, 2vmin, 1.25rem);
      font-weight: 900;
      line-height: 1.25;
      text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    }

    .victory-honorific-desc {
      font-size: clamp(0.7rem, 1.4vmin, 0.85rem);
      color: rgba(240, 246, 252, 0.85);
      margin-top: 3px;
      line-height: 1.35;
    }

    .victory-score-table {
      display: flex;
      flex-direction: column;
      gap: clamp(3px, 0.6vmin, 6px);
      font-size: clamp(0.72rem, 1.4vmin, 0.88rem);
    }

    .score-row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: clamp(2px, 0.4vmin, 4px) 0;
      color: #e2e8f0;
    }

    .score-label {
      opacity: 0.9;
    }

    .score-penalty-row {
      color: #ff7b92;
      border-top: 1px dashed rgba(255, 107, 129, 0.25);
      padding-top: clamp(3px, 0.6vmin, 5px);
    }

    .score-penalty-label {
      color: #ff9aa8;
    }

    .score-penalty-val {
      color: #ff5370;
      font-weight: 800;
    }

    .stat-malus-tag {
      font-size: 0.72rem;
      color: #ff6b81;
      font-weight: 600;
      margin-left: 2px;
      white-space: nowrap;
    }

    .score-total-row {
      margin-top: clamp(4px, 0.8vmin, 8px);
      padding-top: clamp(6px, 1vmin, 10px);
      border-top: 1.5px dashed rgba(255, 215, 0, 0.35);
      font-weight: 900;
      font-size: clamp(0.9rem, 1.8vmin, 1.15rem);
    }

    .score-total-label {
      color: #ffffff;
      letter-spacing: 0.5px;
    }

    .score-total-val {
      color: #06d6a0;
      text-shadow: 0 0 10px rgba(6, 214, 160, 0.4);
      font-variant-numeric: tabular-nums;
    }

    /* Tableau des 10 meilleurs scores (Leaderboard Arcade) */
    .leaderboard-card {
      background: rgba(10, 16, 30, 0.95);
      border: 1.5px solid rgba(255, 215, 0, 0.35);
      border-radius: clamp(8px, 1.5vmin, 12px);
      padding: clamp(8px, 1.2vmin, 12px);
      margin-top: clamp(8px, 1.5vmin, 14px);
    }

    .leaderboard-header-title {
      font-size: clamp(0.78rem, 1.5vmin, 0.95rem);
      font-weight: 800;
      color: #ffd700;
      text-align: center;
      margin-bottom: clamp(6px, 1vmin, 10px);
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .leaderboard-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
      overflow: visible; /* Pleine hauteur sans ascenseur intérieur */
    }

    .leaderboard-list::-webkit-scrollbar {
      width: 6px;
    }

    .leaderboard-list::-webkit-scrollbar-track {
      background: rgba(10, 16, 30, 0.6);
      border-radius: 4px;
    }

    .leaderboard-list::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #ffd700, #ff8f00);
      border-radius: 4px;
      border: 1px solid rgba(255, 215, 0, 0.3);
    }

    .leaderboard-list::-webkit-scrollbar-thumb:hover {
      background: #ffd700;
      box-shadow: 0 0 6px rgba(255, 215, 0, 0.8);
    }

    .leaderboard-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: clamp(3px, 0.5vmin, 5px) clamp(6px, 1vmin, 10px);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.04);
      font-size: clamp(0.68rem, 1.3vmin, 0.82rem);
      color: #cbd5e1;
      font-variant-numeric: tabular-nums;
      transition: background 0.2s ease;
    }

    .leaderboard-row.highlight-current-score {
      background: linear-gradient(90deg, rgba(255, 215, 0, 0.25), rgba(6, 214, 160, 0.25)) !important;
      border: 1.5px solid #ffd700 !important;
      color: #ffffff !important;
      font-weight: 900 !important;
      box-shadow: 0 0 12px rgba(255, 215, 0, 0.55), inset 0 0 8px rgba(6, 214, 160, 0.35);
      animation: currentScoreGlow 1.8s ease-in-out infinite alternate;
    }

    @keyframes currentScoreGlow {
      0% { box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); }
      100% { box-shadow: 0 0 18px rgba(255, 215, 0, 0.8), 0 0 10px rgba(6, 214, 160, 0.6); }
    }

    .taupe-1-celebration-banner {
      position: relative;
      background: linear-gradient(110deg, #b8860b 0%, #ffd700 20%, #fffbe0 40%, #ffd700 60%, #ff8f00 80%, #b8860b 100%);
      background-size: 250% 100%;
      color: #0b1523;
      font-size: clamp(0.82rem, 1.7vmin, 1.08rem);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      padding: clamp(8px, 1.3vmin, 12px) clamp(12px, 2vmin, 22px);
      border-radius: clamp(10px, 1.5vmin, 14px);
      margin: clamp(12px, 1.8vmin, 16px) auto clamp(8px, 1.2vmin, 12px) auto;
      text-align: center;
      box-shadow: 0 0 16px rgba(255, 215, 0, 0.7), 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 3px rgba(255, 255, 255, 0.85);
      border: 2px solid #ffffff;
      animation: taupe1Pop 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) both, taupe1Shimmer 3.5s linear infinite, taupe1Glow 2s ease-in-out infinite alternate;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      overflow: hidden;
      text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
    }

    .taupe-1-celebration-banner .taupe-1-star {
      font-size: 1.15em;
      display: inline-block;
      animation: taupe1StarTwinkle 1.4s ease-in-out infinite alternate;
      filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.85));
    }

    .taupe-1-celebration-banner .taupe-1-star:last-child {
      animation-delay: 0.7s;
    }

    .taupe-1-celebration-banner .taupe-1-text {
      flex-shrink: 0;
    }

    @keyframes taupe1Pop {
      0% { transform: scale(0.65) translateY(-8px); opacity: 0; }
      100% { transform: scale(1) translateY(0); opacity: 1; }
    }

    @keyframes taupe1Shimmer {
      0% { background-position: 250% 0; }
      100% { background-position: -250% 0; }
    }

    @keyframes taupe1Glow {
      0% {
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.6);
      }
      100% {
        box-shadow: 0 0 24px rgba(255, 215, 0, 0.95), 0 0 12px rgba(255, 240, 150, 0.7), 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 4px rgba(255, 255, 255, 0.9);
      }
    }

    @keyframes taupe1StarTwinkle {
      0% { transform: scale(0.85) rotate(-10deg); opacity: 0.75; }
      100% { transform: scale(1.25) rotate(15deg); opacity: 1; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1)); }
    }

    .leaderboard-pos {
      font-weight: 800;
      min-width: 24px;
      color: #94a3b8;
    }

    .leaderboard-row.highlight-current-score .leaderboard-pos {
      color: #ffd700;
    }

    .leaderboard-rank-tag {
      font-weight: 900;
      padding: 1px 6px;
      border-radius: 4px;
      font-size: 0.72rem;
      line-height: 1.2;
    }

    .leaderboard-tag-s { background: #ff8f00; color: #fff; }
    .leaderboard-tag-a { background: #0091ea; color: #fff; }
    .leaderboard-tag-b { background: #00bfa5; color: #fff; }
    .leaderboard-tag-c { background: #e65100; color: #fff; }

    .leaderboard-pts {
      font-weight: 700;
      color: #ffd166;
    }

    .leaderboard-date {
      opacity: 0.65;
      font-size: 0.65rem;
    }
    
    .rules-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
      gap: clamp(4px, 1vmin, 8px);
      justify-content: center;
      margin-top: clamp(4px, 1vmin, 8px);
    }
    
    .rule-card {
      background: #4a3b32; border: 1.5px solid #6b5b50;
      border-radius: clamp(6px, 1.2vmin, 10px);
      padding: clamp(4px, 1vmin, 8px);
      text-align: left;
      font-size: clamp(0.65rem, 1.3vmin, 0.8rem);
      display: flex; align-items: center;
      gap: clamp(4px, 1vmin, 8px);
      box-shadow: 0 3px 8px rgba(0,0,0,0.3);
      color: #f5e6d3;
    }
    .rule-card .emoji {
      font-size: clamp(1.0rem, 2.0vmin, 1.35rem);
      filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
      flex-shrink: 0;
    }

    .overlay-buttons-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: clamp(8px, 1.6vmin, 16px);
      flex-wrap: wrap;
      flex-shrink: 0;
      margin-top: clamp(2px, 0.8vmin, 6px);
    }

    #start-btn, .action-btn, .multi-btn, #start-multi-btn, #multi-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 44px;
      padding: 8px 24px;
      font-size: clamp(0.9rem, 1.8vmin, 1.1rem);
      font-weight: 900;
      color: #ffffff;
      background: linear-gradient(180deg, #4f5d75 0%, #2d3748 55%, #1a202c 100%);
      border: 2.5px solid #cbd5e0;
      border-radius: 12px;
      cursor: pointer;
      box-shadow: 0 4px 0 #0f141c, 0 8px 18px rgba(0, 0, 0, 0.45);
      transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      flex-shrink: 0;
      user-select: none;
    }
    #start-btn:hover, .action-btn:hover, .multi-btn:hover, #start-multi-btn:hover, #multi-btn:hover {
      transform: translateY(-2px);
      filter: brightness(1.15);
      border-color: #ffd166;
      box-shadow: 0 6px 0 #0f141c, 0 12px 22px rgba(0, 0, 0, 0.55);
    }
    #start-btn:active, .action-btn:active, .multi-btn:active, #start-multi-btn:active, #multi-btn:active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 #0f141c, 0 4px 8px rgba(0, 0, 0, 0.4);
    }
    #start-btn:focus-visible, .action-btn:focus-visible, .multi-btn:focus-visible, #start-multi-btn:focus-visible, #multi-btn:focus-visible {
      outline: 3px solid #ffd166;
      outline-offset: 2px;
      box-shadow: 0 0 14px rgba(255, 209, 102, 0.6);
    }

    #how-to-play-btn, .secondary-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 44px;
      padding: 8px 22px;
      font-size: clamp(0.9rem, 1.8vmin, 1.1rem);
      font-weight: 900;
      color: #ffffff;
      background: linear-gradient(180deg, #4f5d75 0%, #2d3748 55%, #1a202c 100%);
      border: 2.5px solid #cbd5e0;
      border-radius: 12px;
      cursor: pointer;
      box-shadow: 0 4px 0 #0f141c, 0 8px 18px rgba(0, 0, 0, 0.45);
      transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
      text-transform: uppercase;
      letter-spacing: 1px;
      flex-shrink: 0;
      user-select: none;
    }
    #how-to-play-btn:hover, .secondary-btn:hover {
      transform: translateY(-2px);
      filter: brightness(1.15);
      border-color: #ffd166;
      box-shadow: 0 6px 0 #0f141c, 0 12px 22px rgba(0, 0, 0, 0.55);
    }
    #how-to-play-btn:active, .secondary-btn:active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 #0f141c, 0 4px 8px rgba(0, 0, 0, 0.4);
    }
    #how-to-play-btn:focus-visible, .secondary-btn:focus-visible {
      outline: 3px solid #ffd166;
      outline-offset: 2px;
      box-shadow: 0 0 14px rgba(255, 209, 102, 0.6);
    }

    #back-btn, .back-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 44px;
      padding: 8px 22px;
      font-size: clamp(0.9rem, 1.8vmin, 1.1rem);
      font-weight: 900;
      color: #ffffff;
      background: linear-gradient(180deg, #4f5d75 0%, #2d3748 55%, #1a202c 100%);
      border: 2.5px solid #cbd5e0;
      border-radius: 12px;
      cursor: pointer;
      box-shadow: 0 4px 0 #0f141c, 0 8px 18px rgba(0, 0, 0, 0.45);
      transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
      text-transform: uppercase;
      letter-spacing: 1px;
      flex-shrink: 0;
      user-select: none;
    }
    #back-btn:hover, .back-btn:hover {
      transform: translateY(-2px);
      filter: brightness(1.15);
      border-color: #ffd166;
      box-shadow: 0 6px 0 #0f141c, 0 12px 22px rgba(0, 0, 0, 0.55);
    }
    #back-btn:active, .back-btn:active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 #0f141c, 0 4px 8px rgba(0, 0, 0, 0.4);
    }
    #back-btn:focus-visible, .back-btn:focus-visible {
      outline: 3px solid #ffd166;
      outline-offset: 2px;
      box-shadow: 0 0 14px rgba(255, 209, 102, 0.6);
    }

    /* Manuel / Guide du Jeu Adaptatif & Pleine Page (Scroll global) */
    .doc-modal-container {
      display: flex;
      flex-direction: column;
      gap: clamp(8px, 1.4vmin, 12px);
      text-align: left;
      width: 100%;
      max-width: min(98%, 1020px);
      overflow: visible; /* Élimination complète du scroll intérieur imbriqué */
      padding: 4px 4px;
      box-sizing: border-box;
    }
    /* Scrollbar personnalisée et discrète */
    .doc-modal-container, .mole-story-box {
      scrollbar-width: thin;
      scrollbar-color: #ffd166 rgba(30, 22, 18, 0.7);
    }
    .doc-modal-container::-webkit-scrollbar, .mole-story-box::-webkit-scrollbar {
      width: 6px;
    }
    .doc-modal-container::-webkit-scrollbar-track, .mole-story-box::-webkit-scrollbar-track {
      background: rgba(26, 19, 15, 0.75);
      border-radius: 4px;
    }
    .doc-modal-container::-webkit-scrollbar-thumb, .mole-story-box::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #ffd166, #e09f3e);
      border-radius: 4px;
      border: 1px solid rgba(38, 28, 22, 0.6);
    }
    .doc-modal-container::-webkit-scrollbar-thumb:hover, .mole-story-box::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #ffe082, #ffd166);
      box-shadow: 0 0 6px rgba(255, 209, 102, 0.7);
    }

    .doc-section-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
      gap: clamp(6px, 1.2vmin, 10px);
      width: 100%;
      box-sizing: border-box;
    }
    .doc-card {
      background: linear-gradient(145deg, rgba(58, 46, 38, 0.95), rgba(38, 29, 24, 0.98));
      border: 1.5px solid #8e7766;
      border-radius: clamp(8px, 1.4vmin, 12px);
      padding: clamp(5px, 1vmin, 8px) clamp(8px, 1.4vmin, 12px);
      display: flex;
      flex-direction: column;
      gap: 4px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.15);
      box-sizing: border-box;
    }
    .doc-card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 900;
      font-size: clamp(0.8rem, 1.6vmin, 0.94rem);
      color: #ffd166;
      border-bottom: 1px solid rgba(255,209,102,0.25);
      padding-bottom: 3px;
      letter-spacing: 0.3px;
    }
    .doc-card-body {
      font-size: clamp(0.72rem, 1.4vmin, 0.85rem);
      line-height: 1.4;
      color: #f0e6dc;
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: 4px;
      text-align: left;
    }
    .doc-row {
      display: block; /* Bloc standard pour flux de texte continu normal */
      margin: 0;
      text-align: left;
      word-break: normal;
    }
    .doc-row strong {
      color: #ffb4a2;
      font-weight: 800;
    }
    .doc-row em {
      color: #ffd166;
      font-style: italic;
    }
    .doc-tag {
      background: rgba(255, 209, 102, 0.18);
      color: #ffd166;
      padding: 1px 6px;
      border-radius: 4px;
      font-weight: 800;
      font-size: 0.88em;
      border: 1px solid rgba(255, 209, 102, 0.35);
      white-space: nowrap;
    }
    .doc-anim-canvas {
      width: 100%;
      height: 84px;
      border-radius: 8px;
      background: #191410;
      border: 1.5px solid #4a3a30;
      display: block;
      margin-top: auto;
      box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
    }

    /* =========================================================================
       FOOTER & QUICK CONTROLS BAR (A11Y WCAG AAA COMPLIANT)
       ========================================================================= */
    footer {
      width: 100%;
      background: linear-gradient(135deg, rgba(32, 25, 20, 0.90), rgba(20, 16, 14, 0.95));
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(224, 169, 72, 0.28);
      border-radius: 10px;
      padding: clamp(4px, 0.8vmin, 6px) clamp(10px, 1.5vw, 16px);
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      flex-shrink: 0;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
      z-index: 10;
    }

    .controls-list {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: clamp(8px, 1.8vw, 24px);
      margin: 0;
      padding: 0;
      color: #f8fafc; /* Contraste > 13:1 sur fond sombre (WCAG AAA) */
      font-size: clamp(0.78rem, 1.35vw, 0.90rem);
      font-weight: 600;
      line-height: 1.4;
    }

    .controls-list li {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }

    .controls-icon {
      font-size: 1.1em;
      line-height: 1;
    }

    .controls-desc {
      color: #e2e8f0; /* Contraste élevé et lisibilité optimale */
    }

    kbd.key-badge {
      display: inline-block;
      padding: 2px 7px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 0.85em;
      font-weight: 800;
      line-height: 1.2;
      color: #ffd166; /* Doré haute visibilité */
      background: rgba(255, 209, 102, 0.14);
      border: 1px solid rgba(255, 209, 102, 0.45);
      border-bottom: 2px solid rgba(255, 209, 102, 0.75);
      border-radius: 5px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    /* Badge de version haute visibilité dans le footer */
    .version-badge {
      display: inline-flex;
      align-items: center;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 0.76rem;
      font-weight: 700;
      color: #ffd166;
      background: rgba(255, 209, 102, 0.14);
      border: 1px solid rgba(255, 209, 102, 0.45);
      padding: 2px 8px;
      border-radius: 5px;
      letter-spacing: 0.5px;
      user-select: text;
      white-space: nowrap;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
      transition: all 0.2s ease;
      cursor: default;
    }

    .version-badge:hover {
      color: #ffffff;
      background: rgba(255, 209, 102, 0.28);
      border-color: rgba(255, 209, 102, 0.75);
    }

    @media (min-width: 960px) {
      .version-list-item {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .key-badge-p1 {
      border-color: #ffd166;
      color: #ffd166;
    }

    .key-badge-p2 {
      border-color: #ffb74d;
      color: #ffb74d;
    }

    .endgame-badge-row {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin: 8px 0;
    }

    /* Flou Gaussien dynamique appliqué au Canvas de jeu */
    canvas.blurred {
      filter: blur(var(--blur-amount, 8px));
      transition: filter 0.5s ease;
    }

    /* Mode Plein Écran iOS / Safari Fallback (Pseudo Fullscreen) */
    body.pseudo-fullscreen,
    body.in-fullscreen-mode {
      position: fixed !important;
      inset: 0 !important;
      width: 100vw !important;
      height: 100dvh !important;
      max-height: 100dvh !important;
      padding: 0 !important;
      margin: 0 !important;
      gap: 0 !important;
      z-index: 999999 !important;
      background-color: var(--bg-color) !important;
      overflow: hidden !important;
    }

    /* Masquer header et footer en mode plein écran (pseudo ou natif) */
    body.pseudo-fullscreen header,
    body.in-fullscreen-mode header,
    :fullscreen header,
    body.pseudo-fullscreen footer,
    body.in-fullscreen-mode footer,
    :fullscreen footer {
      display: none !important;
    }

    /* Main prend tout l'espace + safe areas sur main, pas body */
    body.pseudo-fullscreen main,
    body.in-fullscreen-mode main,
    :fullscreen main {
      width: 100% !important;
      height: 100% !important;
      flex: 1 1 auto !important;
      border-radius: 0 !important;
      border: none !important;
      padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
               env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) !important;
    }

    /* =========================================================================
       BARRE LATÉRALE DROITE PLEIN ÉCRAN MOBILE (PILLARBOX)
       ========================================================================= */
    .fullscreen-sidebar {
      display: none;
      position: fixed;
      top: max(8px, env(safe-area-inset-top));
      right: max(6px, env(safe-area-inset-right));
      z-index: 1000000;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      pointer-events: auto;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Affichage actif en plein écran */
    body.pseudo-fullscreen .fullscreen-sidebar,
    body.in-fullscreen-mode .fullscreen-sidebar,
    :fullscreen .fullscreen-sidebar {
      display: flex !important;
    }

    /* Bloc Statistiques du Jeu (Toujours visible) */
    .fs-game-stats {
      background: linear-gradient(145deg, rgba(32, 24, 18, 0.94) 0%, rgba(18, 14, 12, 0.96) 100%);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1.5px solid rgba(255, 209, 102, 0.42);
      border-radius: 12px;
      padding: 6px 8px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(255, 225, 140, 0.2);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      min-width: 58px;
    }

    .fs-timer-display {
      font-family: monospace;
      font-weight: 900;
      font-size: 0.95rem;
      color: var(--accent-yellow);
      text-shadow: 0 0 6px rgba(255, 209, 102, 0.5);
      line-height: 1.1;
    }

    .fs-gauge-container {
      width: 48px;
      height: 6px;
      background: #090a10;
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid rgba(255, 209, 102, 0.25);
    }

    .fs-gauge-fill {
      height: 100%;
      width: 40%;
      background: linear-gradient(90deg, #ff5370, #ffcb6b, #c3e88d);
      transition: width 0.2s ease-out;
      box-shadow: 0 0 6px rgba(195, 232, 141, 0.5);
    }

    .fs-loot-box {
      font-size: 0.76rem;
      font-weight: 800;
      color: var(--accent-green);
      white-space: nowrap;
      line-height: 1.1;
    }

    /* Bloc Contrôles Repliable */
    .fs-controls-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      position: relative;
    }

    .fs-menu-toggle-btn {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: linear-gradient(145deg, rgba(38, 28, 22, 0.92) 0%, rgba(22, 17, 14, 0.96) 100%);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1.5px solid rgba(255, 209, 102, 0.45);
      color: #ffd166;
      font-size: 1.1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
      transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    .fs-menu-toggle-btn:hover {
      background: rgba(255, 209, 102, 0.25);
      border-color: #ffd166;
      transform: scale(1.06);
    }

    .fs-menu-toggle-btn.is-active {
      background: rgba(255, 209, 102, 0.3);
      border-color: #ffd166;
      box-shadow: 0 0 12px rgba(255, 209, 102, 0.4);
    }

    /* Tiroir rétractable des boutons de commande */
    .fs-controls-drawer {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      transform: translateY(-8px) scale(0.92);
      transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 0.25s ease,
                  transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .fs-controls-drawer.is-open {
      max-height: 220px;
      opacity: 1;
      overflow: visible;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }

    .fs-ctrl-btn {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: linear-gradient(145deg, rgba(28, 20, 16, 0.94) 0%, rgba(18, 14, 12, 0.96) 100%);
      border: 1.3px solid rgba(255, 209, 102, 0.35);
      color: #ffd166;
      font-size: 0.98rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      transition: all 0.2s ease;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    }

    .fs-ctrl-btn:hover {
      background: rgba(255, 209, 102, 0.3);
      border-color: #ffd166;
      transform: scale(1.08);
    }

    .fs-ctrl-btn:active {
      transform: scale(0.94);
    }

    .fs-exit-btn {
      border-color: rgba(255, 83, 112, 0.45);
      color: #ff8599;
    }
    .fs-exit-btn:hover {
      background: rgba(255, 83, 112, 0.25);
      border-color: #ff5370;
    }

    .fs-icon {
      display: inline-block;
      vertical-align: middle;
      width: clamp(16px, 2.2vmin, 22px);
      height: clamp(16px, 2.2vmin, 22px);
      pointer-events: none;
      flex-shrink: 0;
    }



    @media (pointer: coarse), (max-width: 768px), (max-height: 520px) {
      canvas.blurred {
        filter: blur(var(--blur-amount, 3.5px));
      }
    }

    /* Bulle de dialogue du Joueur */
    .speech-bubble {
      position: absolute;
      top: 30px;
      left: 50%;
      transform: translateX(-50%) translateY(-20px) scale(0.8);
      background: linear-gradient(135deg, #ffffff, #f0f4f8);
      color: #0f111a;
      padding: 12px 24px;
      border-radius: 50px;
      font-size: clamp(1rem, 2vw, 1.25rem);
      font-weight: 800;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 203, 107, 0.6);
      border: 3px solid var(--accent-yellow);
      opacity: 0;
      pointer-events: none;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      z-index: 60;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .speech-bubble.active {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1);
    }

    .speech-bubble::after {
      content: '';
      position: absolute;
      bottom: -12px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 12px 12px 0;
      border-style: solid;
      border-color: #ffffff transparent;
      display: block;
      width: 0;
    }

    /* Lunettes qui tombent de l'écran */
    .glasses-falling-overlay {
      position: absolute;
      top: -100px;
      left: 50%;
      transform: translateX(-50%);
      width: 160px;
      height: 80px;
      pointer-events: none;
      z-index: 55;
      opacity: 0;
      transform-origin: center center;
    }

    .glasses-falling-overlay.animate {
      animation: fallFromFace 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    @keyframes fallFromFace {
      0% {
        top: -80px;
        left: 50%;
        transform: translateX(-50%) rotate(0deg) scale(calc(1.4 * var(--glasses-scale, 1.0)));
        opacity: 0;
      }
      15% {
        opacity: 1;
        transform: translateX(-50%) rotate(-12deg) scale(calc(1.25 * var(--glasses-scale, 1.0)));
      }
      45% {
        top: 240px;
        left: 51%;
        transform: translateX(-50%) rotate(35deg) scale(calc(1.05 * var(--glasses-scale, 1.0)));
      }
      75% {
        top: 480px;
        left: 49%;
        transform: translateX(-50%) rotate(85deg) scale(calc(0.95 * var(--glasses-scale, 1.0)));
        opacity: 0.95;
      }
      100% {
        top: 720px;
        left: 50%;
        transform: translateX(-50%) rotate(140deg) scale(calc(0.85 * var(--glasses-scale, 1.0)));
        opacity: 0;
      }
    }


    /* Masquage automatique du mode multijoueur local et du tag (SOLO) sur appareils tactiles et mobiles */
    @media (pointer: coarse), (hover: none), (max-width: 850px) {
      .multi-btn, #multi-btn, #start-multi-btn, .desktop-only-btn, .btn-solo-tag {
        display: none !important;
      }
    }

    /* Styles réactifs compacts pour petits écrans et fenêtres réduites */
    @media (max-height: 700px), (max-width: 700px) {
      body {
        padding: 4px 6px;
        gap: 4px;
      }
      header {
        padding: 4px 10px;
        border-radius: 8px;
      }
      .hud-gauge {
        padding: 4px 8px;
        gap: 8px;
      }
      main {
        border-radius: 12px;
      }
      footer {
        padding: 3px 6px;
      }
      .controls-list {
        gap: 6px 12px;
        font-size: 0.75rem;
      }
    }

    /* Optimisation spéciale pour mode Portrait sur Mobile (Android / iOS) */
    @media (max-width: 600px), (orientation: portrait) and (max-width: 900px) {
      .brand-titles {
        display: none !important;
      }
      .brand-container {
        gap: 0 !important;
      }
      .brand-mole-badge {
        width: 32px !important;
        height: 32px !important;
      }
      header {
        padding: 4px 6px !important;
        gap: 4px !important;
      }
      .hud-gauge {
        padding: 3px 6px !important;
        gap: clamp(3px, 1vw, 6px) !important;
        flex: 1 1 auto !important;
        justify-content: flex-end !important;
      }
      .timer-display {
        font-size: 1.05rem !important;
        min-width: 55px !important;
      }
      .gauge-bar-container {
        display: none !important;
      }
      .stats-box {
        display: none !important;
      }
      .score-display-hud {
        font-size: 0.78rem !important;
        padding: 2px 5px !important;
      }
      .header-sound-btn,
      .header-pause-btn,
      .header-fullscreen-btn,
      .header-settings-btn {
        font-size: 0.92rem !important;
        padding: 2px 5px !important;
        min-width: 26px !important;
        height: 26px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
      }
      .speech-bubble {
        top: 8px !important;
        padding: 6px 14px !important;
        font-size: clamp(0.72rem, 2.4vw, 0.85rem) !important;
        border-width: 2px !important;
        gap: 6px !important;
        max-width: 88vw !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
      }
      .speech-bubble::after {
        bottom: -8px !important;
        border-width: 8px 8px 0 !important;
      }
    }

    @media (max-width: 400px) {
      .gauge-bar-container {
        display: none !important;
      }
      .stats-box {
        font-size: 0.72rem !important;
      }
    }

    @media (max-height: 520px) {
      body {
        padding: 2px 4px;
        gap: 2px;
      }
      header {
        padding: 2px 8px;
        border-radius: 6px;
      }
      .hud-gauge {
        padding: 2px 6px;
        gap: 6px;
      }
      .gauge-bar-container {
        display: none;
      }
      main {
        border-radius: 8px;
        border-width: 1px;
      }
      footer {
        display: none;
      }
      .overlay {
        justify-content: flex-start !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: clamp(6px, 1.5vmin, 12px) clamp(4px, 1.2vmin, 8px) clamp(16px, 3vmin, 24px) clamp(4px, 1.2vmin, 8px) !important;
        gap: clamp(4px, 1vmin, 8px) !important;
      }
      .mole-story-box {
        max-height: none !important;
        padding: 4px 8px !important;
        font-size: 0.72rem !important;
      }
      .rules-grid {
        display: none !important;
      }
      #overlay-title {
        font-size: 1.05rem !important;
      }
      #start-btn, .action-btn, #back-btn, .back-btn, #how-to-play-btn, .secondary-btn {
        min-height: 36px !important;
        padding: 6px 18px !important;
        font-size: 0.85rem !important;
      }
      .speech-bubble {
        top: 4px !important;
        padding: 4px 10px !important;
        font-size: 0.72rem !important;
        border-width: 1.5px !important;
        gap: 4px !important;
        max-width: 85vw !important;
      }
      .speech-bubble::after {
        bottom: -6px !important;
        border-width: 6px 6px 0 !important;
      }
    }

    /* =========================================================================
       BANNIÈRE DE CONSENTEMENT COOKIES RGPD
       ========================================================================= */
    .cookie-banner {
      position: fixed;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      width: min(96%, 760px);
      background: linear-gradient(135deg, rgba(35, 26, 20, 0.97) 0%, rgba(20, 16, 14, 0.98) 100%);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1.5px solid rgba(255, 209, 102, 0.45);
      border-radius: 14px;
      padding: clamp(10px, 1.8vmin, 16px) clamp(14px, 2.2vw, 22px);
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), 0 0 16px rgba(255, 209, 102, 0.2);
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: opacity 0.3s ease, transform 0.3s ease;
      color: #f1f5f9;
      font-size: clamp(0.8rem, 1.4vw, 0.9rem);
    }

    .cookie-banner.hidden {
      display: none !important;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      transform: translateX(-50%) translateY(30px);
    }

    .cookie-content {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .cookie-icon {
      font-size: 1.8rem;
      line-height: 1;
      flex-shrink: 0;
    }

    .cookie-text {
      display: flex;
      flex-direction: column;
      gap: 4px;
      line-height: 1.4;
    }

    .cookie-text strong {
      color: #ffd166;
      font-size: 0.95rem;
    }

    .cookie-text p {
      margin: 0;
      color: #e2e8f0;
      font-size: 0.82rem;
    }

    .cookie-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
    }

    .cookie-btn-accept {
      background: linear-gradient(180deg, #10b981 0%, #059669 100%);
      color: #ffffff;
      border: 1.5px solid #34d399;
      border-radius: 8px;
      padding: 6px 16px;
      font-weight: 800;
      font-size: 0.85rem;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0,0,0,0.4);
      transition: all 0.15s ease;
    }
    .cookie-btn-accept:hover {
      filter: brightness(1.15);
      transform: translateY(-1px);
    }
    .cookie-btn-accept:focus-visible {
      outline: 2.5px solid #ffd166;
      outline-offset: 2px;
      box-shadow: 0 0 10px rgba(255, 209, 102, 0.5);
    }

    .cookie-btn-decline {
      background: rgba(255, 255, 255, 0.08);
      color: #cbd5e1;
      border: 1.5px solid rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      padding: 6px 14px;
      font-weight: 700;
      font-size: 0.85rem;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .cookie-btn-decline:hover {
      background: rgba(255, 255, 255, 0.15);
      color: #ffffff;
      border-color: #ffd166;
    }
    .cookie-btn-decline:focus-visible {
      outline: 2.5px solid #ffd166;
      outline-offset: 2px;
      box-shadow: 0 0 10px rgba(255, 209, 102, 0.5);
    }

    /* Support Accessibilité : Mode Contraste Renforcé (WCAG AAA) */
    body.high-contrast-active {
      --bg-color: #000000;
      background-color: #000000;
    }
    body.high-contrast-active #gameCanvas {
      filter: contrast(1.35) saturate(1.2) brightness(1.05);
      border: 3px solid #ffffff !important;
      box-shadow: 0 0 0 2px #000000, 0 0 20px rgba(255, 255, 255, 0.4);
    }
    body.high-contrast-active header {
      background: #000000 !important;
      border: 2.5px solid #ffd166 !important;
      box-shadow: 0 0 15px rgba(255, 209, 102, 0.5) !important;
    }
    body.high-contrast-active .hud-gauge {
      background: #000000 !important;
      border: 2px solid #ffffff !important;
    }
    body.high-contrast-active .timer-display {
      color: #ffffff !important;
      text-shadow: 0 0 8px #ffd166 !important;
      font-weight: 900;
    }
    body.high-contrast-active .stats-box {
      color: #00ff66 !important;
      font-weight: 900;
    }
    body.high-contrast-active .header-sound-btn,
    body.high-contrast-active .header-settings-btn,
    body.high-contrast-active .header-pause-btn,
    body.high-contrast-active .header-fullscreen-btn {
      background: #000000 !important;
      border: 2px solid #ffd166 !important;
      color: #ffd166 !important;
    }
    body.high-contrast-active .modal,
    body.high-contrast-active .settings-section {
      background: #0b0d14 !important;
      border: 2.5px solid #ffd166 !important;
    }
    body.high-contrast-active .remap-key-btn,
    body.high-contrast-active .action-btn-small,
    body.high-contrast-active .settings-btn-small {
      border: 2px solid #ffd166 !important;
      background: #111827 !important;
      color: #ffffff !important;
    }

    /* Classe utilitaire pour lecteurs d'écran (WCAG 2.2 / Screen Readers Only) */
    .sr-only {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    /* Support Accessibilité : Réduction de mouvement système */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      .glasses-falling-overlay {
        display: none !important;
      }
    }

    /* =========================================================================
       MODE MULTIJOUEUR LOCAL — LOBBY, SÉLECTION SKINS & RÉGLAGES 👥👑
       ========================================================================= */


    .lobby-header-container {
      text-align: center;
      margin-bottom: 8px;
    }

    .lobby-header-desc {
      font-size: 0.88rem;
      color: #cbd5e1;
      margin: 4px 0 10px 0;
    }

    .lobby-header-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      border-radius: 20px;
      background: rgba(124, 77, 255, 0.15);
      border: 1.5px solid #7c4dff;
      color: #b388ff;
      font-size: 0.85rem;
      font-weight: 800;
      margin-bottom: 12px;
    }

    .multiplayer-lobby-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 16px;
      width: 100%;
      margin: 10px 0 16px 0;
    }

    .player-lobby-card {
      background: rgba(15, 23, 42, 0.75);
      border: 2px solid rgba(255, 255, 255, 0.12);
      border-radius: 14px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
      position: relative;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .player-lobby-card.p1-card {
      border-top: 4px solid #ffd166;
    }
    .player-lobby-card.p2-card {
      border-top: 4px solid #ffb74d;
    }

    .player-lobby-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      padding-bottom: 8px;
    }

    .player-pill-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.85rem;
      font-weight: 900;
      padding: 3px 10px;
      border-radius: 12px;
    }
    .p1-badge {
      background: rgba(255, 209, 102, 0.15);
      border: 1.5px solid #ffd166;
      color: #ffd166;
    }
    .p2-badge {
      background: rgba(255, 183, 77, 0.15);
      border: 1.5px solid #ffb74d;
      color: #ffb74d;
    }

    .player-control-hint {
      font-size: 0.78rem;
      color: #94a3b8;
      font-family: monospace;
    }

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

    .skin-option-btn {
      background: rgba(255, 255, 255, 0.04);
      border: 1.5px solid rgba(255, 255, 255, 0.12);
      border-radius: 10px;
      padding: 10px 6px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      color: #cbd5e1;
      transition: all 0.15s ease;
    }
    .skin-option-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 209, 102, 0.6);
      transform: translateY(-2px);
    }
    .skin-option-btn.active {
      background: rgba(255, 209, 102, 0.18);
      border-color: #ffd166;
      color: #ffd166;
      font-weight: 800;
      box-shadow: 0 0 12px rgba(255, 209, 102, 0.3);
    }
    .skin-option-btn .skin-emoji {
      font-size: 1.6rem;
    }
    .skin-option-btn .skin-title {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .duplicate-notice-container {
      min-height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 4px;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease, visibility 0.2s ease;
    }
    .duplicate-notice-container.visible {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
    }

    .duplicate-notice-box {
      width: 100%;
      background: rgba(255, 183, 77, 0.12);
      border: 1.5px dashed #ffb74d;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 0.8rem;
      color: #ffd54f;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* Onglets Réglages P1 / P2 / Général */
    .settings-tab-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      border-bottom: 2px solid rgba(255, 255, 255, 0.1);
      padding-bottom: 6px;
    }
    .settings-tab-btn {
      flex: 1;
      padding: 8px 12px;
      font-size: 0.85rem;
      font-weight: 800;
      color: #cbd5e1;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px 8px 0 0;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .settings-tab-btn:hover {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.08);
    }
    .settings-tab-btn.active {
      color: #ffd166;
      border-color: #ffd166 #ffd166 transparent #ffd166;
      background: rgba(255, 209, 102, 0.12);
      box-shadow: 0 -2px 8px rgba(255, 209, 102, 0.2);
    }
    .settings-tab-btn:focus-visible,
    .royal-title-btn:focus-visible,
    .skin-option-btn:focus-visible {
      outline: 2px solid #ffd166;
      outline-offset: 2px;
    }
/* =========================================================================
   MODE MULTIJOUEUR LOCAL — LOBBY, SÉLECTION SKINS & RÉGLAGES 👥👑
   ========================================================================= */


.lobby-header-container {
  text-align: center;
  margin-bottom: 8px;
}

.lobby-header-desc {
  font-size: 0.88rem;
  color: #cbd5e1;
  margin: 4px 0 10px 0;
}

.lobby-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(124, 77, 255, 0.15);
  border: 1.5px solid #7c4dff;
  color: #b388ff;
  font-size: 0.85rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.multiplayer-lobby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  width: 100%;
  margin: 10px 0 16px 0;
}

.player-lobby-card {
  background: rgba(15, 23, 42, 0.75);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.player-lobby-card.p1-card {
  border-top: 4px solid #ffd166;
}
.player-lobby-card.p2-card {
  border-top: 4px solid #ffb74d;
}

.player-lobby-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}

.player-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 12px;
}
.p1-badge {
  background: rgba(255, 209, 102, 0.15);
  border: 1.5px solid #ffd166;
  color: #ffd166;
}
.p2-badge {
  background: rgba(255, 183, 77, 0.15);
  border: 1.5px solid #ffb74d;
  color: #ffb74d;
}

.player-control-hint {
  font-size: 0.78rem;
  color: #94a3b8;
  font-family: monospace;
}

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

.skin-option-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #cbd5e1;
  transition: all 0.15s ease;
}
.skin-option-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 209, 102, 0.6);
  transform: translateY(-2px);
}
.skin-option-btn.active {
  background: rgba(255, 209, 102, 0.18);
  border-color: #ffd166;
  color: #ffd166;
  font-weight: 800;
  box-shadow: 0 0 12px rgba(255, 209, 102, 0.3);
}
.skin-option-btn .skin-emoji {
  font-size: 1.6rem;
}
.skin-option-btn .skin-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.duplicate-notice-container {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.duplicate-notice-container.visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.duplicate-notice-box {
  width: 100%;
  background: rgba(255, 183, 77, 0.12);
  border: 1.5px dashed #ffb74d;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.8rem;
  color: #ffd54f;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Onglets Réglages P1 / P2 / Général */
.settings-tab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 6px;
}
.settings-tab-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 800;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: all 0.15s ease;
}
.settings-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}
.settings-tab-btn.active {
  color: #ffd166;
  border-color: #ffd166 #ffd166 transparent #ffd166;
  background: rgba(255, 209, 102, 0.12);
  box-shadow: 0 -2px 8px rgba(255, 209, 102, 0.2);
}
.settings-tab-btn:focus-visible,
.royal-title-btn:focus-visible,
.skin-option-btn:focus-visible {
  outline: 3px solid #ffd166;
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(255, 209, 102, 0.5);
}

/* ══════════════════════════════════════════════════════
   PWA — Toasts (Mobiles uniquement, masqué sur PC)
   ══════════════════════════════════════════════════════ */
.pwa-toast {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  bottom: auto;
  left: 50%;
  transform: translateX(-50%) translateY(-150%);
  z-index: 1000001;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 9999px;
  background: rgba(18, 22, 36, 0.95);
  border: 1px solid rgba(255, 209, 102, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55);
  color: #e8eaf6;
  font-size: 0.76rem;
  max-width: calc(100vw - 24px);
  width: max-content;
  height: 38px;
  box-sizing: border-box;
  white-space: nowrap;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.25s ease;
  opacity: 0;
  pointer-events: none;
}

.pwa-toast.visible {
  display: flex !important;
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.pwa-toast-icon {
  font-size: 1.05rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.pwa-toast-text {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pwa-toast-text strong {
  color: #ffd166;
  font-size: 0.76rem;
}

.pwa-toast-text span {
  color: #cfd8dc;
  font-size: 0.74rem;
  line-height: 1.2;
}

.pwa-toast-text em {
  color: #90a4ae;
  font-style: normal;
  font-size: 0.70rem;
  opacity: 0.85;
}

.pwa-toast-close {
  background: transparent;
  border: none;
  color: #90a4ae;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 2px 6px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s, background-color 0.2s;
}

.pwa-toast-close:hover,
.pwa-toast-close:active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}

.pwa-toast-btn {
  background: #ffd166;
  border: none;
  color: #0f111a;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 9999px;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, transform 0.1s;
}

.pwa-toast-btn:hover {
  background: #ffe599;
}

.pwa-toast-btn:active {
  transform: scale(0.95);
}

/* Toast iOS — style discret */
.pwa-ios-toast {
  border-color: rgba(255, 152, 0, 0.5);
}

/* Toast Android */
.pwa-android-toast {
  border-color: rgba(102, 187, 106, 0.5);
}

/* Toast Mise à jour */
.pwa-update-toast {
  border-color: rgba(79, 195, 247, 0.5);
}

.pwa-update-toast .pwa-toast-btn {
  background: #4fc3f7;
  color: #051923;
}

.pwa-update-toast .pwa-toast-btn:hover {
  background: #81d4fa;
}

/* Désactivation des guides d'installation mobile sur PC / grands écrans */
@media (min-width: 1025px), (hover: hover) and (pointer: fine) and (min-width: 769px) {
  .pwa-android-toast,
  .pwa-ios-toast {
    display: none !important;
  }
  .mobile-touch-controls {
    display: none !important;
  }
}

/* ==========================================================================
   🎮 CONTRÔLES TACTILES ERGONOMIQUES MOBILES (TRACKPAD RELATIF DYNAMIQUE)
   ========================================================================== */
.mobile-touch-controls {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 95;
  user-select: none;
  -webkit-user-select: none;
}

body:has(#overlay:not(.hidden)) .mobile-touch-controls,
body:has(#how-to-play-modal:not(.hidden)) .mobile-touch-controls,
body:has(#settings-modal:not(.hidden)) .mobile-touch-controls {
  display: none !important;
}

/* Visualiseur du Trackpad Relatif sous le pouce */
.touch-trackpad-visual {
  position: fixed;
  width: 90px;
  height: 90px;
  margin-left: -45px;
  margin-top: -45px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, opacity, left, top;
}

.touch-trackpad-visual.is-active {
  opacity: 1;
  transform: scale(1);
}

.trackpad-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 209, 102, 0.45);
  background: radial-gradient(circle, rgba(255, 209, 102, 0.15) 0%, rgba(20, 15, 10, 0.4) 100%);
  box-shadow: 0 0 16px rgba(255, 209, 102, 0.25), inset 0 0 10px rgba(255, 209, 102, 0.1);
}

.trackpad-nub {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe599 0%, #ffd166 40%, #e09f3e 100%);
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 8px rgba(255, 209, 102, 0.5);
  top: 50%;
  left: 50%;
  margin-left: -17px;
  margin-top: -17px;
  pointer-events: none;
  will-change: transform;
}

/* ==========================================================================
   🛡️ CARTE DU BILAN DE SURVIE & MÉSAVENTURES (ÉCRAN DE VICTOIRE)
   ========================================================================== */
.survival-stats-card {
  background: rgba(20, 14, 10, 0.7);
  border: 1.5px solid rgba(255, 179, 0, 0.35);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.survival-stats-header {
  font-family: var(--font-title, sans-serif);
  font-size: 0.88rem;
  font-weight: 800;
  color: #ffca28;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 10px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 202, 40, 0.2);
  padding-bottom: 6px;
}

.survival-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.survival-stat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(40, 26, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 10px;
  gap: 8px;
}

.survival-stat-icon {
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}

.survival-stat-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: left;
  gap: 2px;
  min-width: 0;
}

.survival-stat-label {
  font-size: 0.76rem;
  color: #e0d4c8;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.survival-stat-penalty-line {
  font-size: 0.72rem;
  color: #ff6b81;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}

.survival-stat-val {
  font-family: var(--font-title, sans-serif);
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffd54f;
  min-width: 26px;
  text-align: right;
  flex-shrink: 0;
}

/* ==========================================================================
   🎓 ONBOARDING PÉDAGOGIQUE (BANNIÈRES & CARTES D'ÉTAPE PROGRESSIVE)
   ========================================================================== */

.onboarding-modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 26, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 16px;
  animation: onboardingFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.onboarding-modal-overlay.is-closing {
  animation: onboardingFadeOut 0.2s ease forwards;
}

@keyframes onboardingFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

@keyframes onboardingFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.onboarding-card {
  background: linear-gradient(145deg, rgba(28, 38, 58, 0.96), rgba(16, 22, 36, 0.98));
  border: 2px solid #ffd166;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 24px rgba(255, 209, 102, 0.25);
  border-radius: 18px;
  max-width: 520px;
  width: 90%;
  padding: clamp(16px, 3vmin, 26px);
  color: #f8f9fa;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: onboardingCardPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes onboardingCardPop {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.onboarding-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.onboarding-icon {
  font-size: clamp(1.8rem, 4vmin, 2.6rem);
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.onboarding-title {
  margin: 0;
  font-family: var(--font-title, sans-serif);
  font-size: clamp(1.15rem, 2.8vmin, 1.45rem);
  font-weight: 900;
  color: #ffd166;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.5px;
}

.onboarding-body {
  font-size: clamp(0.88rem, 1.9vmin, 1.02rem);
  line-height: 1.55;
  color: #e9ecef;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px 18px;
  text-align: left;
}

.onboarding-body p {
  margin: 0 0 10px 0;
  line-height: 1.45;
}

.onboarding-body p:last-child {
  margin-bottom: 0;
}

.onboarding-body strong {
  color: #ffd166;
  font-weight: 700;
}

.onboarding-footer {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.onboarding-btn {
  background: linear-gradient(180deg, #06d6a0, #049f76);
  color: #0b1f17;
  font-family: var(--font-title, sans-serif);
  font-size: clamp(0.95rem, 2.2vmin, 1.15rem);
  font-weight: 900;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(6, 214, 160, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.onboarding-btn:hover,
.onboarding-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(6, 214, 160, 0.6);
  outline: 3px solid #ffffff;
}

.onboarding-btn:active {
  transform: translateY(1px);
}

.onboarding-hint-key {
  font-size: 0.78rem;
  opacity: 0.85;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════ */
/* ⚔️ Niveaux de Difficulté & Multiplicateur Hardcore           */
/* ═══════════════════════════════════════════════════════════ */

.difficulty-select-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: clamp(6px, 1.2vmin, 12px) auto;
  padding: 6px 14px;
  background: rgba(15, 20, 30, 0.75);
  border: 1.5px solid rgba(255, 209, 102, 0.35);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  max-width: 380px;
  width: 92%;
  box-sizing: border-box;
}

.difficulty-label {
  font-weight: 800;
  font-size: clamp(0.75rem, 1.4vmin, 0.9rem);
  color: #ffd166;
  white-space: nowrap;
  user-select: none;
}

.difficulty-select {
  background: linear-gradient(180deg, #2d3748 0%, #1a202c 100%);
  color: #ffffff;
  border: 1.5px solid #ffd166;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: clamp(0.78rem, 1.4vmin, 0.92rem);
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.difficulty-select:focus-visible {
  outline: 2px solid #ffd166;
  outline-offset: 2px;
  box-shadow: 0 0 10px rgba(255, 209, 102, 0.5);
}

.difficulty-select option {
  background: #1a202c;
  color: #ffffff;
  font-weight: 700;
  padding: 6px;
}

.speed-boost-hud {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: clamp(0.78rem, 1.4vmin, 0.9rem);
  color: #ff5722;
  background: rgba(255, 87, 34, 0.15);
  border: 1.5px solid #ff5722;
  border-radius: 8px;
  padding: 2px 8px;
  animation: speedFlamePulse 1.2s infinite ease-in-out;
  box-shadow: 0 0 8px rgba(255, 87, 34, 0.35);
  user-select: none;
}

.fs-speed-box {
  background: rgba(255, 87, 34, 0.2);
  border: 1.5px solid #ff5722;
  color: #ff7043;
  font-weight: 900;
  font-size: 0.85rem;
  padding: 4px 6px;
  border-radius: 8px;
  text-align: center;
  animation: speedFlamePulse 1.2s infinite ease-in-out;
}

@keyframes speedFlamePulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(255, 87, 34, 0.4)); }
  50% { transform: scale(1.05); filter: drop-shadow(0 0 10px rgba(255, 87, 34, 0.8)); }
}

.leaderboard-diff {
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
}

.victory-diff-line {
  font-size: 0.85rem;
  color: #cbd5e0;
  margin-top: 4px;
}

.victory-diff-line strong {
  color: #ffd166;
}

/* Règle utilitaire universelle de masquage */
.hidden {
  display: none !important;
}