/* ================================================
   RESPONSIVE — Media queries
   Breakpoints :
     xs  : ≤ 360px     (très petits mobiles)
     sm  : 361–480px   (mobiles portrait)
     md  : 481–768px   (paysage / petites tablettes)
     lg  : 769–1024px  (tablettes)
     xl  : ≥ 1025px    (desktop)
     ls  : paysage hauteur ≤ 500px (mobile retourné)
   ================================================ */

/* ── xs : très petits mobiles (≤ 360px) ── */
@media screen and (max-width: 360px) {
  .overlay-bar {
    gap: 4px;
    padding: 0 4px;
  }
  .overlay-item {
    padding: 2px 5px;
    font-size: 7px;
    letter-spacing: 1px;
    gap: 3px;
  }
  .message {
    font-size: 9px;
    gap: 4px;
    padding: 2px 0;
  }
  .message .username {
    min-width: 40px;
    font-size: 8px;
    letter-spacing: 0;
  }
  .zone-overlay .label {
    display: none;
  }
  .tiktok-logo {
    font-size: 7px;
    right: 6px;
    top: 3px;
  }
  .messages-list {
    padding: 2px 6px 4px;
  }
  .zone-camera { height: 12%; padding: 4px 6px; }
  .zone-game   { height: 65%; }
  .zone-overlay { height: 6%; }
  .zone-tiktok { height: 17%; }
  .camera-grid { gap: 3px; }
  .cam-label { font-size: 5px; letter-spacing: 1px; bottom: 2px; left: 3px; }
  .cam-icon { font-size: 10px; }
  .cam::before { width: 8px; }
  .cam::after { height: 8px; }
}

/* ── sm : mobiles portrait (361px – 480px) ── */
@media screen and (min-width: 361px) and (max-width: 480px) {
  .overlay-item {
    font-size: 9px;
    padding: 3px 8px;
    letter-spacing: 1px;
    gap: 4px;
  }
  .message {
    font-size: 10px;
    gap: 6px;
  }
  .message .username {
    min-width: 48px;
    font-size: 9px;
  }
  .zone-camera { height: 12%; padding: 4px 8px; }
  .zone-game   { height: 65%; }
  .zone-overlay { height: 6%; }
  .zone-tiktok { height: 17%; }
  .camera-grid { gap: 4px; }
  .cam-label { font-size: 6px; }
  .messages-list { padding: 3px 8px 5px; }
  .tiktok-logo { font-size: 8px; }
}

/* ── md : mobiles paysage / petites tablettes (481px – 768px) ── */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .overlay-bar {
    gap: 10px;
    justify-content: flex-start;
    padding-left: 8px;
  }
  .overlay-item {
    font-size: 11px;
  }
  .message {
    font-size: 12px;
  }
  .zone-camera { padding: 6px 10px; }
}

/* ── lg : tablettes portrait/paysage (769px – 1024px) ── */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .camera-grid {
    gap: 6px;
  }
  .cam-label {
    font-size: 10px;
  }
  .overlay-bar {
    gap: 18px;
  }
  .overlay-item {
    font-size: 13px;
    padding: 5px 16px;
  }
  .message {
    font-size: 13px;
  }
}

/* ── xl : desktop (≥ 1025px) ── */
@media screen and (min-width: 1025px) {
  .camera-grid {
    gap: 8px;
  }
  .cam-label {
    font-size: 11px;
    padding: 2px 6px;
  }
  .overlay-bar {
    gap: 28px;
    justify-content: flex-start;
    padding-left: 16px;
  }
  .overlay-item {
    font-size: 14px;
    padding: 5px 18px;
  }
  .message {
    font-size: 14px;
  }
  .messages-list {
    gap: 8px;
    padding: 0 16px 10px;
  }
}

/* ── ls : mobiles en paysage (hauteur ≤ 500px) ── */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .layout {
    height: 100dvh;
    overflow: hidden;
  }
  .zone-camera  { height: 12dvh; min-height: 50px;  padding-top: 10px; }
  .zone-game    { height: 63dvh; min-height: 200px; }
  .zone-overlay { height: 8dvh;  min-height: 30px;  }
  .zone-tiktok  { height: 17dvh; min-height: 60px;  }
  .overlay-item { font-size: 10px; padding: 3px 10px; }
  .message { font-size: 11px; }
}

/* ── Bandeaux : réduire sur petits écrans ── */
@media screen and (max-width: 480px) {
  .band {
    width: 5vw;
    min-width: 14px;
  }
  .band-text {
    font-size: clamp(5px, 1.5vw, 8px);
    letter-spacing: 1px;
  }
}

@media screen and (max-width: 360px) {
  /* Bandeaux totalement masqués, l'espace est rendu au layout */
  .band {
    display: none;
  }
}

/* ── Auth overlay (game/index.php) ── */
@media screen and (max-width: 480px) {
  .auth-card {
    padding: 28px 20px 24px;
    border-radius: 8px;
  }
  .auth-logo     { font-size: 22px; letter-spacing: 5px; }
  .auth-subtitle { font-size: 9px; letter-spacing: 3px; }
  .auth-code-input {
    font-size: 20px;
    letter-spacing: 6px;
    padding: 12px 8px;
  }
  .auth-handle-input {
    font-size: 14px;
    letter-spacing: 2px;
    padding: 11px 8px;
  }
  .auth-btn {
    padding: 12px;
    font-size: 12px;
    letter-spacing: 3px;
  }
  .auth-desc {
    font-size: 11px;
    margin-bottom: 16px;
  }
  #room-auth-overlay {
    padding: 16px;
  }
}

@media screen and (max-width: 360px) {
  .auth-card {
    padding: 20px 14px 18px;
  }
  .auth-logo { font-size: 18px; letter-spacing: 4px; }
  .auth-code-input {
    font-size: 18px;
    letter-spacing: 4px;
    padding: 10px 6px;
  }
  .auth-handle-input {
    font-size: 13px;
    letter-spacing: 1px;
    padding: 10px 6px;
  }
}

/* ── Gift actions overlay mobile ── */
@media screen and (max-width: 480px) {
  #gift-actions-overlay {
    bottom: 21%;
    padding: 8px 12px;
    border-radius: 8px;
    max-width: 95vw;
  }
  .ga-overlay-action { font-size: 12px; letter-spacing: 0; }
  .ga-overlay-gift-img { width: 22px; height: 22px; }
  .ga-overlay-gift-name { font-size: 9px; padding: 1px 4px; }
  .ga-overlay-duration { font-size: 9px; padding: 1px 5px; }
  .ga-overlay-arrow { font-size: 13px; }
}

/* ── Kicked overlay mobile ── */
@media screen and (max-width: 480px) {
  #kicked-overlay > div:first-child { font-size: 2rem; }
  #kicked-overlay > div:nth-child(2) { font-size: 1.1rem; }
  #kicked-overlay > div:nth-child(3) { font-size: 0.85rem; padding: 0 20px; }
}