/* ============================================================
   GRID QUEST RPG — Mobile / Responsive Stylesheet
   ------------------------------------------------------------
   Loaded AFTER style.css so these rules override the desktop
   layout on small screens. Goal: "playable enough" on a phone,
   not a pixel-perfect redesign.

   Breakpoints:
     • max-width: 768px            → tablets & large phones
     • max-width: 600px (portrait) → phones, vertical stack
     • landscape + short height    → phones held sideways
   ============================================================ */

/* ============================================================
   1. TABLET / LARGE PHONE  (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* Stack the main grid: game on top, log + party beneath.
     (Mirrors the base rule in style.css but kept here so all
     responsive behaviour lives in one place.) */
  #app {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto auto;
    grid-template-areas:
      "game"
      "log"
      "party";
  }
  #app.log-hidden {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "game"
      "party";
  }

  #action-log {
    max-height: 26vh;
    border-left: none;
    border-top: 2px solid var(--border-gold);
  }
  #party-panel {
    border-top: 2px solid var(--border-gold);
    border-bottom: none;
  }

  /* Smaller character / job pickers so they fit narrower panels */
  .job-grid { grid-template-columns: repeat(3, 1fr); }
  .job-card img,
  .character-choice img { width: 72px; height: 72px; }
}

/* ============================================================
   2. PHONE PORTRAIT  (≤ 600px)
   ============================================================ */
@media (max-width: 600px) {

  /* Use dynamic viewport units so the mobile browser chrome
     (address bar) doesn't cut off the bottom party panel. */
  html, body { height: 100dvh; }
  #app       { height: 100dvh; }

  /* Inputs ≥16px prevent iOS Safari from auto-zooming on focus */
  #chat-input,
  .lobby-input { font-size: 16px; }

  /* ── Party panel — fixed-width cards that scroll horizontally
        so every player stays readable instead of being squished ── */
  #party-panel {
    min-height: 0;
    padding: 5px;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-dim) transparent;
  }
  #party-panel::-webkit-scrollbar { height: 5px; }
  #party-panel::-webkit-scrollbar-thumb {
    background: var(--border-dim); border-radius: 3px;
  }
  .player-card {
    flex: 0 0 auto;          /* don't shrink — keep readable width */
    width: 168px;
    padding: 5px 6px;
    gap: 6px;
    scroll-snap-align: start;
  }
  .player-card .portrait { width: 46px; height: 46px; }
  .player-card .card-name { font-size: 8px; }
  .player-card .card-info { gap: 3px; }
  .player-card .bar-row { font-size: 11px; gap: 5px; }
  .player-card .bar-label { width: 18px; }
  .player-card .bar-wrap { height: 7px; }
  .player-card .bar-val { min-width: 0; font-size: 11px; }
  .player-card .card-job { font-size: 11px; }
  .player-card .card-gold { font-size: 11px; }

  /* ── Action log ── */
  #action-log { max-height: 30vh; }
  .log-entry { font-size: 13px; }
  #action-log-header { font-size: 8px; padding: 6px 8px; }
  #chat-input { padding: 6px; }

  /* ── HUD buttons — re-flow so nothing runs off-screen ──
     Fixed widths + centred text make the positions deterministic
     on screens ≥ 320px wide. */
  .hud-btn {
    font-size: 7px;
    padding: 4px 4px;
    letter-spacing: 0.5px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  #local-map-btn {
    top: 6px; left: 6px;
    min-width: 90px; max-width: 56vw;
  }
  /* Second row */
  #world-map-btn { top: 36px; left: 6px;   width: 52px; }
  #status-btn    { top: 36px; left: 62px;  width: 54px; }
  #inventory-btn { top: 36px; left: 120px; width: 42px; }
  #quest-log-btn { top: 36px; left: 166px; width: 60px; min-width: 0; }
  #hud-save-btn  { top: 36px; left: 230px; width: 48px; }

  /* ── Control panel (centre overlay) ── */
  #control-panel {
    width: min(640px, 94%);
    max-height: calc(100% - 16px);
    padding: 12px 14px;
  }
  #game-area.combat-mode #control-panel {
    top: 16%;
    max-height: 62%;
  }

  /* ── Map / status / quest floating windows ── */
  .map-window { max-width: calc(100vw - 16px); }
  #local-map-window,
  #world-map-window,
  #status-window,
  #quest-log-window {
    left: 8px;
    width: calc(100vw - 16px);
  }
  #minimap-local,
  #minimap-world { max-height: 50vh; }
  #status-content { max-height: 60vh; }

  /* ── Combat monster sprites — shrink + wrap so EVERY enemy stays
        on-screen instead of being clipped off the sides ── */
  #combat-monsters-layer {
    flex-wrap: wrap;
    align-content: flex-end;
    gap: 6px 10px;
    padding: 0 6px;
    bottom: 7%;
    height: auto;
    max-height: 72%;
  }
  .map-monster-img { width: 56px; height: 56px; }
  .map-monster-name { font-size: 9px; }

  /* ── Sound widget ── */
  #sound-toggle-btn { width: 38px; height: 38px; font-size: 16px; }
  #sound-panel { width: min(270px, calc(100vw - 24px)); }

  /* ── Fullscreen overlays (modal / level-up / draft / dice) ── */
  #modal-box,
  #levelup-inner,
  #draft-inner {
    max-width: 94vw;
    max-height: 90vh;
    overflow-y: auto;
  }
  #draft-inner { min-width: 0; padding: 18px 16px; }
  #modal-box   { padding: 16px; }

  #dice-popup-inner { padding: 20px 24px; min-width: 0; }
  .die { width: 56px; height: 56px; font-size: 22px; }

  /* ── Pre-game panels ── */
  .pregame-panel { padding: 14px; }
  .job-grid { grid-template-columns: repeat(2, 1fr); }

  /* Touch targets: a touch slightly larger menu button hit area */
  .menu-btn { padding: 12px 14px; }
}

/* ============================================================
   3. VERY NARROW PHONES  (≤ 380px)
   ============================================================ */
@media (max-width: 380px) {
  /* Party cards still scroll horizontally, so no need to shrink them */
  /* HUD second row gets even tighter */
  #status-btn    { left: 60px; width: 50px; }
  #inventory-btn { left: 114px; width: 40px; }
  #quest-log-btn { left: 158px; width: 56px; }
  #hud-save-btn  { left: 218px; width: 46px; }
}

/* ============================================================
   4. PHONE LANDSCAPE  (short height, held sideways)
   Keep the log as a narrow side column so the game area stays
   tall enough to be usable.
   ============================================================ */
@media (max-height: 480px) and (orientation: landscape) {
  #app {
    grid-template-columns: 1fr 200px;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "game  log"
      "party party";
  }
  #app.log-hidden {
    grid-template-columns: 1fr;
    grid-template-areas:
      "game"
      "party";
  }
  #action-log {
    max-height: none;
    border-left: 2px solid var(--border-gold);
    border-top: none;
  }
  #party-panel { min-height: 0; padding: 3px; }
  .player-card { flex-direction: row; padding: 3px; }
  .player-card .portrait { width: 34px; height: 34px; }
}