/* ===== MOBILE / RESPONSIVE OVERRIDES =====
   All responsive and mobile-specific styles live here.
   Base desktop styles remain in styles.css. */

/* ===== TABLET / NARROW DESKTOP ===== */
@media (max-width: 1200px) {
  .tally-panel { width: 160px; }
}
@media (max-width: 1050px) {
  :root { --board-size: min(70vh, 380px); }
  .game-area { gap: 16px; }
  .tally-panel { width: 140px; padding: 10px; }
}

/* ===== SMALL SCREENS (≤700px) ===== */
@media (max-width: 700px) {
  html, body { overflow-y: hidden; height: 100%; }
  .screen.active { overflow-y: auto; height: 100vh; scrollbar-width: none; }
  .screen.active::-webkit-scrollbar { display: none; }
  :root { --board-size: min(55vh, 320px); }

  /* --- Screens --- */
  .screen { flex-direction: column; }
  #screen-game, #screen-placement { justify-content: flex-start; }
  .screen-content {
    max-width: 100%;
    width: 100%;
  }
  .screen-content h1 { font-size: 2rem; }
  .screen-content button:not(.chip) {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
  }
  .screen-content input[type="text"] {
    width: 100%;
    max-width: 100%;
    font-size: 1rem;
  }

  /* --- Main menu --- */
  .main-menu { max-width: 100%; }
  .main-menu-body { flex-direction: column; align-items: center; }
  .main-menu-left {
    width: 100%;
    max-width: 100%;
  }
  .menu-panel input[type="text"] { max-width: 100%; width: 100%; }
  .menu-panel button {
    width: 100%;
    margin: 6px 0;
    padding: 12px 16px;
    font-size: 1rem;
  }

  /* --- Player card --- */
  .player-card { width: 100%; max-width: 100%; }
  .player-card-body { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 16px; padding: 12px 20px; }
  .player-card-stats { margin-top: 0; }
  .player-card-winrate { margin-top: 0; }

  /* --- Lobby --- */
  .lobby-options { margin: 12px 0 16px; }
  .lobby-option-group { margin-bottom: 10px; }
  .chip { padding: 10px 14px; min-height: 44px; }
  .side-chip { padding: 8px 16px; }
  .chip-icon { width: 32px; height: 32px; }
  .divider { margin: 14px 0; }

  /* --- Board panels --- */
  .board-panel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* --- Game area stacking --- */
  .game-area {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  /* --- Placement --- */
  .placement-controls { margin-top: 10px; width: 100%; }
  .placement-controls button { width: 100%; margin: 4px 0; }

  /* --- Tally panel --- */
  .tally-panel {
    width: 100%;
    padding: 10px;
    order: 99;
  }

  /* --- Tray --- */
  .tray-item { width: 44px; height: 44px; }

  /* --- Popups --- */
  .popup { padding: 20px 18px; width: 95%; }
  .popup-rules { padding: 20px 16px; max-width: 95%; }
  .popup button:not(.popup-close) { width: 100%; margin: 6px 0; padding: 12px 16px; }
  .popup h2 { font-size: 1.2rem; }

  /* --- Emote chat bookmark widget --- */
  .emote-chat-widget {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: none;
    flex-direction: row;
    align-items: center;
  }
  .emote-chat-widget.widget-visible {
    display: flex;
  }
  .emote-chat-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 44px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-right: none;
    border-radius: 10px 0 0 10px;
    cursor: pointer;
    padding: 0;
    margin: 0;
    position: relative;
    flex-shrink: 0;
    z-index: 2;
  }
  .emote-chat-tab img {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }
  .chat-badge {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
  }
  .chat-badge:not(.visible) { display: none; }
  .chat-badge.visible { display: block; }
  .emote-chat {
    position: static;
    width: 240px;
    max-height: 200px;
    border-radius: 0;
    border-right: none;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    border-width: 0;
    padding: 0;
    transition: max-width .25s ease, opacity .2s ease, border-width .25s ease;
  }
  .emote-chat.hidden {
    display: flex;
    max-width: 0;
    opacity: 0;
    border-width: 0;
  }
  .emote-chat.mobile-open {
    max-width: 240px;
    opacity: 1;
    pointer-events: auto;
    border-width: 2px;
    border-right: none;
  }

  /* --- Emote grid --- */
  .emote-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .emote-option { padding: 8px; }
  .emote-option img { width: 34px; height: 34px; }

  /* --- Game over --- */
  .gameover-scores { gap: 10px; flex-wrap: wrap; }
  .score-line { font-size: .85rem; padding: 4px 10px; }
  .gameover-log { max-height: 140px; }

  /* --- Promote --- */
  .promote-grid { gap: 8px; }
  .promote-option { width: 64px; padding: 8px 4px; }
  .promote-option img { width: 40px; height: 40px; }
}

/* ===== MOBILE (≤500px) ===== */
@media (max-width: 500px) {
  /* board chrome: screen-pad(10*2) + game-pad(6*2) + panel-border(2*2) + panel-pad(10*2) + rank-labels(~19px) = 75px */
  :root {
    --board-size: min(calc(100vw - 76px), calc(100dvh - 200px));
  }

  .screen { padding: 60px 10px 10px; }
  .screen-content { padding: 18px 14px; }
  .screen-content h1 { font-size: 1.6rem; letter-spacing: 2px; }

  .main-menu-logo { max-width: 280px; margin-bottom: 2vh; }
  .main-menu-left { padding: 20px 14px; }
  .menu-panel p { font-size: .85rem; }
  .menu-panel-container { min-height: 120px; }
  .player-card-rating-value { font-size: 1.4rem; }

  .board-panel { padding: 10px; }
  .board-panel h3 { font-size: .8rem; }
  .panel-header { gap: 6px; }

  .game-area { padding: 6px; }
  .piece-tray { gap: 4px; margin-top: 8px; }

  #game-info { padding: 6px 0; gap: 8px; }
}

/* ===== NARROW MOBILE (≤400px) ===== */
@media (max-width: 400px) {
  /* board chrome: screen-pad(10*2) + game-pad(6*2) + panel-border(2*2) + panel-pad(6*2) + rank-labels(~16px) = 64px */
  :root {
    --board-size: min(calc(100vw - 64px), calc(100dvh - 180px));
  }
  .board-panel { padding: 6px; }
  .board-with-labels { grid-template-columns: 1em var(--board-size); }
  .board-rank-labels { font-size: .6rem; }
  .board-file-labels { font-size: .6rem; }
  .main-menu-logo { max-width: 220px; }
  .screen-content h1 { font-size: 1.3rem; }
  .tray-item { width: 40px; height: 40px; }
}

/* ===== TOUCH DEVICE OVERRIDES ===== */
.is-touch .game-tooltip { display: none; }

/* ===== DVH FALLBACK ===== */
@supports not (height: 100dvh) {
  @media (max-width: 500px) {
    :root {
      --board-size: min(calc(100vw - 76px), calc(100vh - 200px));
    }
  }
  @media (max-width: 400px) {
    :root {
      --board-size: min(calc(100vw - 64px), calc(100vh - 180px));
    }
  }
}