@media (max-width: 800px) {
  body {
    flex-direction: column;
    padding: 0;
    justify-content: flex-start;
    gap: 12px; /* Espace réduit entre les éléments */
  }

  :root {
    /* L'échiquier prend 95% de la largeur, les cases s'adaptent */
    --size: calc(95vw / 8);
  }

  #board-container {
    order: 2; /* L'échiquier vient après les infos de base */
    width: 95vw;
    height: 95vw;
    margin: 0 auto; /* Centrage */
  }
  
    #board {
    width: 100%;
    height: 100%;
    
    display:grid; 
    grid-template-columns: repeat(8, var(--size));
    grid-template-rows: repeat(8, var(--size));
    border:4px solid #fff;
  }

  #ui {
    width: 100%;
    order: 1; /* L'UI passe au-dessus du plateau */
    padding: 0 12px; /* Aération sur les côtés */
    gap: 8px;
  }

  .piece {
     /* Taille des pièces ajustée à la taille de la case */
     width: calc(var(--size) - 6px); 
     height: calc(var(--size) - 6px);
     font-size: calc(var(--size) * 0.5); /* Police proportionnelle */
  }

  .hint {
    width: 25%; /* Indicateurs proportionnels */
    height: 25%;
  }

  #log {
    height: 80px; /* Log plus compact */
    font-size: 0.8em;
  }

  /* --- Écran de sélection --- */
  #game-selection-screen {
    padding: 10px;
    gap: 15px;
  }

  #game-selection-screen h1 {
    font-size: 1.8em;
  }

  #game-selection-screen button, #ai-difficulty {
    width: 90vw; /* Les boutons prennent presque toute la largeur */
    max-width: 400px;
    font-size: 1.1em;
    padding: 15px 20px;
  }

  #game-menu-wrapper > div {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }

  /* --- Écran de duel --- */
  #duel-screen {
    justify-content: space-around;
    padding: 10px 0;
  }
  #duel-title { font-size: 1.5em; }
  #duel-score { font-size: 1.2em; }
  #duel-board {
    gap: 10px;
    transform: scale(0.9);
  }
  .player-hand {
    flex-wrap: wrap; /* Les cartes peuvent passer à la ligne */
    justify-content: center;
    height: auto;
    padding: 5px;
    gap: 5px;
  }
  .card {
    width: 55px;
    height: 80px;
    font-size: 1.5em;
    border-width: 2px;
  }
  .played-card {
    width: 70px;
    height: 100px;
    font-size: 2.2em;
  }
}
  
  
  
  
  
  
  
  
  
  
  
  :root { --size: 72px; }
  * { box-sizing: border-box }
  body{
    margin:0; min-height:100vh; display:flex; gap:24px; align-items:center; justify-content:center;
    background:#1f2330; color:#fff; font-family:system-ui, Arial, sans-serif
  }
  #ui { width: 320px; display:flex; flex-direction:column; gap:12px }
  #title { font-weight:800; letter-spacing:.3px }
  #turn { padding:8px 12px; border:1px solid #ffffff30; border-radius:12px; background:#ffffff10 }
  #controls { display:flex; gap:8px; flex-wrap:wrap }
  button { padding:10px 14px; border-radius:10px; border:1px solid #ffffff30; background:#2b3145; color:#fff; cursor:pointer }
  button:hover{ filter:brightness(1.1) }
  button:disabled { opacity: 0.5; cursor: not-allowed; }
  #log { height: 220px; overflow:auto; border:1px solid #ffffff30; border-radius:12px; padding:8px 10px; background:#0f1320 }
  #captures { display:flex; gap:8px; flex-wrap:wrap }
  .cap { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#ffffff18; font-size:14px }

  #board-container { position: relative; }
  #board {
    display:grid; grid-template-columns: repeat(8, var(--size));
    grid-template-rows: repeat(8, var(--size));
    border:4px solid #fff; border-radius:12px; box-shadow:0 8px 40px #0008; user-select:none
  }
  .cell{
    width:var(--size); height:var(--size); display:flex; align-items:center; justify-content:center; position:relative;
    font-weight:700; font-size:18px; cursor:pointer
  }
  .light{ background:#e6edf5 }
  .dark{ background:#769656; color:#fff }
  .coord{ position:absolute; font-size:11px; opacity:.35; left:6px; top:4px }
  .piece{
    width: calc(var(--size) - 14px); height: calc(var(--size) - 14px); border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-weight:900; font-size:24px;
    transition: transform .08s ease; box-shadow: inset 0 0 0 2px #0002, 0 4px 10px #0004
  }
  .white{ background:#f3fbff; color:#1a2b3c }
  .green{ background:#d6ffd6; color:#123 }
  .sel { outline:4px solid #ffd54f; z-index:1 }
  .hint { position:absolute; width:18px; height:18px; border-radius:50%; background:#222b; outline:2px solid #ffdb4d; }
  .hint.capture{ width:calc(100% - 8px); height:calc(100% - 8px); background:#ff4d4d55; outline-color:#ff4d4d }
  .hint.special{ background:#4da6ff55; outline-color:#4da6ff; }
  .hint.placement{ width:calc(100% - 16px); height:calc(100% - 16px); background:#4dff8c55; outline: 3px solid #4dff8c; }
  .hint.placement-aoe { width:calc(100% - 8px); height:calc(100% - 8px); background:#8c4dff55; outline: 3px solid #8c4dff; }
  .checkMark{
    position:absolute; inset:0; border:4px solid #ff4d4d; pointer-events:none
  }

  /* --- Modal Styles --- */
  .modal {
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
    background: #2b3145; border: 2px solid #fff; border-radius:12px;
    padding: 20px; box-shadow: 0 8px 40px #000A; z-index: 100;
    display:none; flex-direction:column; gap:12px; align-items:center;
  }
  #modal-title { font-size: 20px; font-weight: bold; }
  #modal-buttons { display:flex; gap:10px; }

  /* --- Invocation Modal --- */
  #invoke-modal { width: 400px; }
  #invoke-options { display: flex; flex-direction: column; gap: 10px; width: 100%; }
  .invoke-option {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px; background: #3c4461; border-radius: 8px; cursor: pointer;
    border: 1px solid #ffffff30;
  }
  .invoke-option:hover { background: #4a5474; }
  .invoke-option.disabled { opacity: 0.5; pointer-events: none; background: #333; }
  .invoke-piece { font-size: 2em; }
  .invoke-name { font-size: 1.2em; font-weight: bold; }
  .invoke-cost { font-size: 1.2em; font-weight: bold; color: #ffd54f;}

  /* --- Game Selection Screen Styles --- */
  #game-selection-screen {
    position: fixed; inset: 0; background: #1f2330; z-index: 200;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  }
  #game-selection-screen h1 { font-size: 3em; margin: 0; }
  #game-selection-screen button { font-size: 1.5em; padding: 20px 40px; width: 400px; text-align: center; }
    
  /* --- Bouton Quitter --- */
 #btn-quit {
  position: fixed; top: 10px; right: 10px; /* ajusté pour mobile */
  z-index: 500; /* Valeur très élevée pour être toujours au premier plan */
  background: #8c2a2a; border-color: #ff8a8a80; 
  font-size: 1em; /* Taille ajustée */
  padding: 8px 12px;
  display: none;
}

  /* --- Invocation Points --- */
  #invocation-points {
    display: flex; justify-content: space-between; padding: 8px 12px;
    border: 1px solid #ffffff30; border-radius: 12px; background: #ffffff10;
  }

  /* --- Duel Screen --- */
  #duel-screen {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 300;
    display: none; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
    color: white; text-align: center;
  }
  #duel-title { font-size: 2.5em; font-weight: bold; }
  #duel-status { font-size: 1.5em; min-height: 1.5em; }
  #duel-board { display: flex; align-items: center; justify-content: center; gap: 40px; }
  .player-area { display: flex; flex-direction: column; align-items: center; gap: 15px; }
  .player-hand { display: flex; gap: 10px; height: 120px; align-items: center; }
  .card {
    width: 80px; height: 110px; border: 3px solid #aaa; border-radius: 8px; background: #334;
    display: flex; align-items: center; justify-content: center; font-size: 2em; font-weight: bold;
    cursor: pointer; transition: all 0.2s ease;
  }
  .card.hidden { background: #112; content: '?'; color: transparent; }
  .card:hover { transform: translateY(-10px) scale(1.05); }
  .card.white-turn { border-color: #f3fbff; background-color: #4a5474; }
  .card.green-turn { border-color: #d6ffd6; background-color: #445944; }
  .card.white-turn:hover { border-color: #fff; }
  .card.green-turn:hover { border-color: #fff; }

  .played-card { font-size: 3em; width: 100px; height: 140px; }
  #duel-score { font-size: 1.8em; }
  #pass-button { background-color: #795548; border-color: #a1887f;}
/* --- Animation pour le ciblage AoE --- */
  .aoe-target .piece {
    animation: flash-red 0.7s infinite;
  }

  @keyframes flash-red {
    0%, 100% {
      outline: 4px solid #ff4d4d;
      outline-offset: 2px;
    }
    50% {
      outline-color: transparent;
    }
  }
  
#opponent-info {
  font-size: 14px;
}

#opponent-name {
  color: #ffd54f;
}

#turn-overlay {
  position: absolute;
  inset: 0; /* Prend toute la place du conteneur parent */
  background: rgba(0, 0, 0, 0.6);
  color: white;
  display: none; /* Caché par défaut */
  align-items: center;
  justify-content: center;
  font-size: 1.8em;
  font-weight: bold;
  text-align: center;
  z-index: 50; /* Au-dessus du plateau mais sous les modales */
  backdrop-filter: blur(4px);
  border-radius: 12px;
}

#message-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none; /* Caché par défaut */
  align-items: center;
  justify-content: center;
  z-index: 400; /* Au-dessus de tout */
}

#message-modal {
  background: #2b3145;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #ffffff30;
  text-align: center;
  width: 90%;
  max-width: 400px;
}

#message-modal-title {
  margin-top: 0;
}