/* ═══════════════════════════════════════════════════════════════════════
       DESIGN TOKENS — aligné sur leonora-gdpr.lu (comic-inspired, clean)
       Pivot 2026-05-22 : moins de bordures épaisses, gradient rouge→violet,
       gros halftone, cards blanches subtiles, boutons pill cyan.
       ═══════════════════════════════════════════════════════════════════════ */
    :root {
      /* Palette landing Léonora */
      --color-primary: #00aeef;          /* cyan boutons / accents (déjà dans le header) */
      --color-primary-light: #5dd8ff;
      --color-primary-dark: #007fb3;
      --color-accent: #e53935;           /* rouge BD du gradient */
      --color-accent-light: #ff6f60;
      --color-accent-dark: #b71c1c;
      --color-purple: #6a1b9a;            /* violet du gradient */
      --color-purple-dark: #4a148c;

      --color-success: #2ecc71;
      --color-warning: #f59e0b;
      --color-error: #e53935;

      --color-surface: #ffffff;
      --color-surface-hover: #fafafa;
      --color-border: #000000;
      --color-border-strong: #000000;

      --color-text: #111111;
      --color-text-secondary: #444444;
      --color-text-muted: #777777;

      --color-brand-pink: #ec4899;
      --color-brand-gold: #f59e0b;
      --color-brand-yellow: #ffd83d;

      /* Ombres : offset léger, pas de blur, signature « stickers BD » discrète */
      --shadow-sm: 2px 2px 0 #000;
      --shadow-md: 3px 3px 0 #000;
      --shadow-lg: 4px 4px 0 #000;
      --shadow-xl: 6px 6px 0 #000;

      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 12px;
      --radius-xl: 16px;
      --radius-pill: 999px;

      /* Bordures fines (la landing utilise des bordures 1-2px) */
      --border-ink: 2px solid #000;
      --border-ink-thick: 2px solid #000;

      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 1rem;
      --spacing-lg: 1.5rem;
      --spacing-xl: 2rem;
      --spacing-2xl: 3rem;

      --transition: 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
      --transition-spring: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

      --font-comic-display: 'League Spartan', Arial, Helvetica, sans-serif;
      --font-body: 'League Spartan', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    /* Fond identique au .intro de la landing leonora-gdpr.lu :
       JPG rouge/violet halftone, cover, fixed pour rester pendant le scroll. */
    html {
      background: url('images/landing-intro.webp') center / cover no-repeat fixed,
                  #6a1b9a;
      min-height: 100%;
    }

    /* Battle scene en sticky footer : fixée au bas du viewport, derrière les cards.
       z-index: -1 → au-dessus du fond html (canvas), sous le contenu en flux. */
    body::before {
      content: '';
      position: fixed;
      bottom: -20vh;            /* dépasse 20% sous le bas du viewport */
      left: 0;
      right: 0;
      height: 90vh;             /* réduite (110vh → 90vh) */
      background-image: url('images/landing-battle2.webp');
      background-size: contain;
      background-position: bottom center;
      background-repeat: no-repeat;
      z-index: -1;
      pointer-events: none;
    }
    body {
      font-family: var(--font-body);
      background-color: transparent;
      min-height: 100vh;
      overflow-x: hidden;
      color: #fff;
      font-size: 16px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Titres de slides + gros affichages = Bangers (comic display) */
    .slide-title, .session-code {
      font-family: var(--font-comic-display);
      letter-spacing: 0.03em;
    }
    h1, h2, h3, h4, h5, h6,
    .header-btn, .btn-start, .btn-nav, .btn-next-monster, .btn-modal {
      font-family: var(--font-body);
      letter-spacing: -0.01em;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       HEADER (transparent, en flux, façon landing leonora-gdpr.lu)
       Layout : [nav left] [LOGO] [nav right], 3 colonnes égales centrées.
       ═══════════════════════════════════════════════════════════════════════ */
    .header-sticky {
      position: relative;
      background: transparent;
      padding: 24px 32px 0;
      z-index: 10;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 2rem;
      border: none;
      box-shadow: none;
      height: auto;
    }

    /* Nav landing — copie le style de leonora-gdpr.lu .intro nav.desktop */
    .landing-nav {
      display: flex;
      align-items: center;
      gap: 2rem;
      list-style: none;
    }
    .landing-nav-left  { justify-content: flex-end; }
    .landing-nav-right { justify-content: flex-start; }
    .landing-nav a {
      color: #fff;
      text-decoration: none;
      font-family: var(--font-body);
      font-size: 1.2rem;
      font-weight: 500;
      letter-spacing: 0.02em;
      transition: opacity 0.18s ease, transform 0.18s ease;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
      cursor: pointer;
      padding: 6px 4px;
    }
    .landing-nav a:hover {
      opacity: 0.78;
      transform: translateY(-1px);
    }
    .landing-nav a:active { transform: translateY(0); }

    /* Utility bar : connexion + outils dev, ancrée en haut-droite, hors flux nav */
    .header-utility {
      position: fixed;
      top: 12px;
      right: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      z-index: 100;
    }

    .header-left {
      display: flex;
      align-items: center;
      justify-self: start;
      gap: 12px;
    }

    .header-title { display: none; }

    /* Logo centré dans le flux (plus de translateY de débordement) */
    .header-logo {
      justify-self: center;
      display: flex;
      align-items: center;
      cursor: pointer;
      transition: transform var(--transition);
      filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
    }
    .header-logo img {
      height: 110px;
      width: auto;
      display: block;
    }
    .header-logo:hover { transform: scale(1.04); }

    /* Pill connexion : dot animé + texte, soft, lisible sur fond bleu */
    .connection-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 14px 7px 12px;
      font-size: 0.75rem;
      font-weight: 600;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
      letter-spacing: 0.02em;
      backdrop-filter: blur(8px);
    }
    .connection-status::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .connection-status.connected::before {
      background: var(--color-success);
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.4);
    }
    .connection-status.disconnected::before {
      background: var(--color-error);
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.4);
      animation: connDotPulse 1.4s ease-in-out infinite;
    }
    @keyframes connDotPulse {
      0%, 100% { opacity: 1; }
      50%      { opacity: 0.5; }
    }

    .header-actions { display: flex; gap: 8px; justify-self: end; }

    .header-btn {
      padding: 8px 16px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: var(--radius-sm);
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      transition: all var(--transition);
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
      backdrop-filter: blur(8px);
    }
    .header-btn:hover {
      background: rgba(255, 255, 255, 0.25);
      border-color: rgba(255, 255, 255, 0.5);
      transform: translateY(-1px);
    }
    .btn-settings { background: rgba(139, 92, 246, 0.9); color: #fff; border-color: rgba(255, 255, 255, 0.2); }
    .btn-replay { background: rgba(236, 72, 153, 0.9); color: #fff; border-color: rgba(255, 255, 255, 0.2); }

    .arena-lang-selector {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      border: 2px solid #000;
      background: #feca57;
      cursor: pointer;
      transition: all 0.2s;
      font-size: 0.85rem;
      font-weight: 600;
    }
    .arena-lang-selector:hover { transform: translateY(-2px); box-shadow: 3px 3px 0 #000; }
    .arena-lang-selector select {
      border: none;
      background: transparent;
      font-weight: 700;
      cursor: pointer;
      outline: none;
      font-size: 0.85rem;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       CONTAINER + SLIDES (clean, generous spacing)
       ═══════════════════════════════════════════════════════════════════════ */
    .container {
      /* Header 80px + logo qui dépasse ~80px sous le header (logo 150px
         centré + translateY 30%) = bas du logo à ~160px. On laisse 175px
         pour que le titre "Choisis ton épisode" ne soit jamais recouvert
         par le logo en position fixed. */
      padding-top: 0;                /* header en flux, plus besoin de réserver */
      min-height: 100vh;
      padding-bottom: 60px;
    }

    .slide {
      display: none;
      min-height: calc(100vh - 200px);
      padding: 32px 32px 56px;
      animation: slideIn 0.4s ease-out;
    }
    .slide.active { display: block; }

    @keyframes slideIn {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .slide-title {
      text-align: center;
      color: #fff;
      font-family: var(--font-comic-display);
      font-size: 3.6rem;
      font-weight: 900;            /* League Spartan Black */
      letter-spacing: -0.01em;
      margin: 0 0 8px;
      line-height: 1.05;
      text-shadow: 0 3px 14px rgba(0, 0, 0, 0.25);   /* lisibilité sur gradient */
    }
    .slide-title::after { content: none; }            /* plus de ruban jaune */

    /* Pill blanche cernée noire — copie exacte de .intro .container .box h2 span de la landing.
       display: block + width fit-content pour qu'elle entoure juste le texte et reste centrée. */
    .slide-subtitle {
      display: block;
      width: fit-content;
      max-width: 90%;
      background-color: #fff;
      color: #000;
      border: 3px solid #000;
      padding: 10px 26px;
      box-shadow: 0 6px 0 #000;
      font-family: var(--font-body);
      font-size: 1.05rem;
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: 0.01em;
      text-align: center;
      margin: 22px auto 52px;
      transform: rotate(-2deg);
    }

    /* Lobby : le titre "Salle d'attente" est réduit pour laisser plus de
       place et de poids visuel à l'information du sous-titre (consignes
       à l'enseignant + scan QR code). Pill du sous-titre élargie pour
       accueillir le paragraphe long. */
    #slide-lobby .slide-title {
      font-size: 2.2rem;
      margin-bottom: 4px;
    }
    #slide-lobby .slide-subtitle {
      font-size: 1.15rem;
      padding: 16px 32px;
      max-width: min(900px, 92vw);
      margin: 18px auto 36px;
      line-height: 1.5;
      transform: none;       /* pas de rotation cute sur un long paragraphe */
      text-align: left;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       ÉPISODES — cards clean blanches, soft shadow, rounded
       ═══════════════════════════════════════════════════════════════════════ */
    .episodes-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 18px;
      max-width: 1280px;
      margin: 0 auto;
    }

    .episode-card {
      background: var(--color-surface);
      border: var(--border-ink);
      border-radius: 0;             /* coins droits */
      overflow: hidden;
      cursor: pointer;
      transition: transform var(--transition), box-shadow var(--transition);
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-md);
      animation: cardEntrance 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
      position: relative;
    }
    .episode-card:nth-child(odd)  { transform: rotate(-1.2deg); }
    .episode-card:nth-child(even) { transform: rotate(1.2deg); }
    .episode-card:hover {
      transform: rotate(0deg) translateY(-4px);
      box-shadow: var(--shadow-lg);
      z-index: 2;
    }
    /* Badge numéro discret en haut à gauche */
    .episode-card .episode-number {
      font-family: var(--font-comic-display);
      width: 36px;
      height: 36px;
      background: #fff;
      color: var(--color-accent);
      border: 2px solid #000;
      box-shadow: 2px 2px 0 #000;
      border-radius: 50%;
      font-size: 1.05rem;
      font-weight: 900;
      letter-spacing: 0;
      top: 12px;
      left: 12px;
    }
    /* Stagger l'entrée des cartes */
    .episode-card:nth-child(1) { animation-delay: 0.05s; }
    .episode-card:nth-child(2) { animation-delay: 0.12s; }
    .episode-card:nth-child(3) { animation-delay: 0.19s; }
    .episode-card:nth-child(4) { animation-delay: 0.26s; }
    .episode-card:nth-child(5) { animation-delay: 0.33s; }
    .episode-card:nth-child(6) { animation-delay: 0.40s; }
    @keyframes cardEntrance {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ═══════════════════════════════════════════════════════════════════════
       PROFILE CARDS — clean blanc, ombre douce, image hero
       ═══════════════════════════════════════════════════════════════════════ */
    .profile-card {
      background: var(--color-surface);
      border: var(--border-ink);
      border-radius: 0;
      padding: 0;
      cursor: pointer;
      transition: all var(--transition);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: var(--shadow-md);
      position: relative;
    }
    .profile-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
    }
    .profile-card:hover .pc-image {
      transform: scale(1.04);
    }
    .profile-card .pc-image-wrap {
      width: 100%;
      height: 140px;                 /* condensé (180 → 140) */
      overflow: hidden;
      position: relative;
      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    }
    .profile-card .pc-image {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.4s ease;
    }
    .profile-card .pc-image .pc-icon {
      font-size: 3.5rem;
      color: rgba(255, 255, 255, 0.95);
    }
    .profile-card .pc-image-wrap::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 50%;
      background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 100%);
      pointer-events: none;
    }
    .profile-card .pc-age-badge {
      position: absolute;
      top: 14px;
      right: 14px;
      background: var(--color-brand-yellow);
      color: #000;
      padding: 5px 14px;
      border-radius: 999px;
      border: 2px solid #000;
      font-weight: 800;
      font-size: 0.78rem;
      box-shadow: 2px 2px 0 #000;
      z-index: 3;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }
    .profile-card .pc-name-overlay {
      position: absolute;
      bottom: 14px;
      left: 18px;
      right: 18px;
      color: #fff;
      font-family: var(--font-comic-display);
      font-weight: 900;
      font-size: 1.9rem;
      line-height: 1;
      letter-spacing: 0.01em;
      -webkit-text-stroke: 1.5px #000;
      text-shadow: 3px 3px 0 #000;
      z-index: 3;
      text-transform: uppercase;
    }
    .profile-card .pc-body {
      padding: 12px 14px 14px;       /* condensé */
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }
    .profile-card .pc-description {
      font-size: 0.92rem;
      color: var(--color-text-secondary);
      line-height: 1.55;
      padding-left: 12px;
      border-left: 3px solid var(--color-accent);
    }
    .profile-card .pc-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: auto;
    }
    .pc-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      transition: transform 0.15s ease;
    }
    .pc-pill:hover { transform: translateY(-1px); }
    .pc-pill .pc-pill-icon { font-size: 0.85rem; }
    .pc-pill.duration  { background: #fef3c7; color: #92400e; }
    .pc-pill.boss      { background: #fce7f3; color: #9d174d; }
    .pc-pill.frequency { background: #ede9fe; color: #5b21b6; }
    .pc-pill.streak    { background: #d1fae5; color: #065f46; }
    .pc-pill.questions { background: #dbeafe; color: #1e40af; }

    /* ═══════════════════════════════════════════════════════════════════════
       LANGUAGE CARDS — clean clear pour la slide langue
       ═══════════════════════════════════════════════════════════════════════ */
    .languages-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 8px;
    }
    .language-card {
      background: var(--color-surface);
      border: var(--border-ink);
      border-radius: 0;
      box-shadow: var(--shadow-md);
      padding: 22px 18px;            /* condensé (36/24 → 22/18) */
      cursor: pointer;
      transition: all var(--transition);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      text-align: center;
    }
    .language-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
    }
    .language-card .lang-flag {
      width: 110px;
      height: 78px;
      object-fit: cover;
      border-radius: 6px;
      border: 2px solid #000;
      box-shadow: 3px 3px 0 #000;
    }
    .language-card .lang-name {
      font-family: var(--font-comic-display);
      font-weight: 900;
      font-size: 1.25rem;
      letter-spacing: 0.02em;
      color: #000;
      text-transform: uppercase;
    }

    .episode-image {
      width: 100%;
      height: 170px;                 /* condensé (220 → 170) */
      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
      background-size: cover;
      background-position: center;
      position: relative;
      border-bottom: var(--border-ink);
    }
    /* Léger overlay halftone sur l'image pour homogénéiser avec le style BD */
    .episode-image::before {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.18) 1px, transparent 1.5px);
      background-size: 6px 6px;
      mix-blend-mode: multiply;
      opacity: 0.4;
      pointer-events: none;
    }
    .episode-image::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
    }
    .episode-number {
      position: absolute;
      display: flex; align-items: center; justify-content: center;
      z-index: 2;
    }
    .episode-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
    .episode-body h3 {
      font-family: var(--font-comic-display);
      font-size: 1.3rem;
      font-weight: 900;
      margin-bottom: 8px;
      color: #000;
      letter-spacing: 0.01em;
      line-height: 1.05;
      text-transform: uppercase;
    }
    .episode-themes {
      list-style: none;
      padding: 0;
      margin: 4px 0 0 0;
    }
    .episode-theme {
      display: block;
      font-size: 0.875rem;
      color: var(--color-text-secondary);
      line-height: 1.55;
      padding: 2px 0 2px 14px;
      position: relative;
    }
    .episode-theme::before {
      content: '';
      position: absolute;
      left: 2px;
      top: 11px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--color-accent);
    }
    /* Read more — les thèmes au-delà du 4ème sont cachés par défaut */
    .episode-themes-extra { display: none; }
    .episode-card.themes-expanded .episode-themes-extra { display: contents; }
    /* Bouton « Voir plus » : style exact de .btn de leonora-gdpr.lu (cyan pill, bordure noire). */
    .themes-toggle {
      align-self: flex-start;
      margin-top: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.6rem 1.6rem;
      background-color: #00aeef;
      color: #fff;
      border: 2px solid #000;
      border-radius: 2rem;
      font-family: var(--font-body);
      font-size: 0.95rem;
      font-weight: 500;
      cursor: pointer;
      transition: filter 0.2s ease;
    }
    .themes-toggle:hover { filter: brightness(1.08); }
    .themes-toggle:active { filter: brightness(0.95); }

    /* Petit numéro de version discret en bas de page */
    .app-version {
      position: fixed;
      bottom: 32px;                  /* relevé pour ne pas masquer le footer */
      right: 10px;
      font-size: 0.65rem;
      color: rgba(255, 255, 255, 0.55);
      font-family: 'Orbitron', sans-serif;
      letter-spacing: 0.5px;
      pointer-events: none;
      user-select: none;
      z-index: 4;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    }

    /* Footer condensé : sticky bas du viewport, sur fond semi-transparent.
       z-index 5 → au-dessus de la battle image (z-index: -1). */
    .gm-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 5;
      padding: 8px 20px;
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.75);
      letter-spacing: 0.01em;
    }
    .gm-footer a {
      color: #fff;
      text-decoration: none;
      transition: opacity 0.15s ease;
    }
    .gm-footer a:hover { opacity: 0.7; text-decoration: underline; }
    .gm-footer-sep { color: rgba(255, 255, 255, 0.35); user-select: none; }
    .gm-footer-copy { opacity: 0.6; font-size: 0.72rem; }
    @media (max-width: 720px) {
      .gm-footer { font-size: 0.7rem; padding: 6px 12px; }
    }

    /* ===== LOBBY ===== */
    .lobby-container {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
    }

    .qr-section, .players-section {
      background: #faf0e6;
      border: 3px solid #000;
      padding: 30px;
    }

    .qr-section { text-align: center; }
    .qr-section h2 { font-size: 1.5rem; margin-bottom: 20px; color: #000; }

    #qrcode {
      width: 240px; height: 240px;
      margin: 15px auto;
      background: #fff;
      border: 2px solid #000;
      padding: 10px;
      display: flex; align-items: center; justify-content: center;
    }
    #qrcode img { display: block; }

    .session-code {
      font-size: 2.8rem;
      color: #000;
      font-weight: 900;
      letter-spacing: 6px;
      margin: 15px 0;
    }

    .join-url {
      color: #495057;
      font-size: 0.9rem;
      margin-top: 10px;
    }
    .join-url strong { color: #000; }

    .players-section h2 {
      font-size: 1.5rem;
      margin-bottom: 15px;
      color: #000;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .players-count {
      background: #667eea;
      color: #fff;
      padding: 4px 12px;
      font-size: 1rem;
      border: 2px solid #000;
    }

    .players-list { max-height: 400px; overflow-y: auto; }
    .players-empty {
      color: #adb5bd;
      text-align: center;
      padding: 40px 0;
      font-style: italic;
    }

    .player-item {
      background: #fff;
      padding: 12px 15px;
      border: 2px solid #000;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 12px;
      animation: playerJoin 0.4s ease;
    }
    @keyframes playerJoin {
      from { opacity: 0; transform: translateX(-20px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .player-avatar {
      width: 42px; height: 42px;
      background: linear-gradient(135deg, #667eea, #764ba2);
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-weight: 900; font-size: 1.1rem;
      border: 2px solid #000;
    }
    .player-name { font-weight: 700; font-size: 1rem; color: #2d3436; }
    .player-status { font-size: 0.75rem; color: #51cf66; font-weight: 600; }

    .start-game-section { margin-top: 25px; text-align: center; }

    .btn-start {
      padding: 18px 45px;
      background: #51cf66;
      color: #fff;
      border: 3px solid #000;
      font-size: 1.3rem;
      font-weight: 900;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 4px 4px 0 #000;
      display: none;
    }
    .btn-start.visible { display: inline-block; }
    .btn-start:hover {
      transform: translateY(-2px);
      box-shadow: 6px 6px 0 #000;
    }
    .btn-start:disabled { opacity: 0.5; cursor: not-allowed; }

    /* ===== GAME ===== */
    .game-container {
      max-width: 100%;
      display: flex;
      flex-direction: column;
      height: calc(100vh - 80px);
    }

    .arena-container {
      flex: 1;
      background: #000;
      position: relative;
      border: 3px solid #000;
    }
    .arena-iframe {
      width: 100%; height: 100%;
      border: none;
      display: block;
    }

    .game-info-bar {
      background: #faf0e6;
      border: 3px solid #000;
      border-top: none;
      padding: 12px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 15px;
    }
    .game-info-item { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
    .game-info-label { color: #868e96; font-weight: 600; }
    .game-info-value { font-weight: 700; color: #000; }

    .game-controls { display: flex; gap: 10px; }

    .btn-game {
      padding: 8px 16px;
      border: 2px solid #000;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s;
      font-size: 0.85rem;
    }
    .btn-game:hover { transform: translateY(-1px); box-shadow: 2px 2px 0 #000; }

    .btn-pause { background: #ffa94d; color: #000; }
    .btn-resume { background: #51cf66; color: #000; }
    .btn-next-monster { background: #ff6b6b; color: #fff; }
    .btn-end { background: #495057; color: #fff; }

    /* ===== NAVIGATION ===== */
    .navigation {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-top: 30px;
    }
    .btn-nav {
      padding: 12px 28px;
      background: #fff;
      color: #000;
      border: var(--border-ink);
      border-radius: var(--radius-sm);
      font-family: var(--font-body);
      font-size: 0.95rem;
      font-weight: 800;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 4px 4px 0 #000;
      transition: all var(--transition);
    }
    .btn-nav:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 #000;
      background: var(--color-brand-yellow);
    }
    .btn-nav:active {
      transform: translate(2px, 2px);
      box-shadow: 1px 1px 0 #000;
    }

    /* ===== MODAL ===== */
    .modal {
      display: none;
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.7);
      z-index: 2000;
      align-items: center; justify-content: center;
    }
    .modal.active { display: flex; }

    .modal-content {
      background: #faf0e6;
      border: 3px solid #000;
      padding: 30px;
      max-width: 500px;
      text-align: center;
      animation: modalPop 0.3s ease;
    }
    @keyframes modalPop {
      from { opacity: 0; transform: scale(0.85); }
      to { opacity: 1; transform: scale(1); }
    }
    .modal-title { font-size: 1.5rem; margin-bottom: 15px; color: #000; }
    .modal-text { font-size: 0.95rem; color: #495057; margin-bottom: 20px; line-height: 1.5; white-space: pre-line; }
    .modal-actions { display: flex; gap: 12px; justify-content: center; }
    .btn-modal { padding: 12px 25px; border: 2px solid #000; font-weight: 700; cursor: pointer; transition: all 0.2s; }
    .btn-modal:hover { transform: translateY(-1px); box-shadow: 2px 2px 0 #000; }
    .btn-confirm { background: #51cf66; color: #fff; }
    .btn-cancel { background: #fff; color: #495057; }

    /* ===== SETTINGS PANEL (BOTTOM) ===== */
    .settings-panel {
      background: #faf0e6;
      border-top: 3px solid #000;
      padding: 25px 20px;
      display: none;
    }
    .settings-panel.visible { display: block; }

    .settings-container { max-width: 1400px; margin: 0 auto; }

    .settings-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .settings-header h2 { font-size: 1.4rem; color: #000; }

    .settings-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 25px;
    }

    .settings-group {
      background: #fff;
      border: 2px solid #000;
      padding: 15px;
    }
    .settings-group h3 {
      font-size: 0.95rem;
      color: #000;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 2px solid #000;
    }

    .settings-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }
    .settings-row label { font-size: 0.85rem; color: #495057; flex: 1; }
    .settings-row input, .settings-row select {
      width: 100px;
      padding: 6px 8px;
      border: 2px solid #000;
      background: #fff;
      font-family: 'League Spartan', sans-serif;
      font-size: 0.85rem;
      font-weight: 600;
    }
    .settings-row input:focus, .settings-row select:focus { outline: 2px solid #667eea; }

    .config-status {
      text-align: center;
      font-size: 0.85rem;
      color: #495057;
      margin-top: 15px;
      min-height: 20px;
    }

    .btn-reset {
      background: #e74c3c;
      color: #fff;
      padding: 8px 16px;
      border: 2px solid #000;
      font-weight: 700;
      cursor: pointer;
      font-size: 0.85rem;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      gap: 10px;
      margin-bottom: 15px;
    }
    .stat-item {
      text-align: center;
      padding: 10px;
      background: #f8f9fa;
      border: 2px solid #000;
    }
    .stat-value {
      font-family: 'Orbitron', sans-serif;
      font-size: 1.5rem;
      font-weight: 900;
    }
    .stat-label { font-size: 0.7rem; color: #495057; font-weight: 600; }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
      .slide-title { font-size: 1.9rem; letter-spacing: -0.5px; }
      .slide-subtitle { font-size: 0.95rem; }
      .lobby-container { grid-template-columns: 1fr; }
      .episodes-grid { grid-template-columns: 1fr; }
      .header-sticky { padding: 6px 14px; gap: 10px; height: 60px; }
      .header-logo img { height: 110px; }
      .connection-status { font-size: 0.65rem; padding: 5px 10px 5px 8px; }
      .connection-status::before { width: 6px; height: 6px; }
      .header-actions { gap: 6px; }
      .container { padding-top: 130px; }
      .slide { min-height: calc(100vh - 130px); padding-top: 24px; }
    }