/**
 * 방치형 웹 RPG 게임 - 반응형 CSS
 * 360px ~ 1920px 범위 대응
 * Requirements: 14.2
 */

/* === 초소형 모바일 (360px ~ 400px) === */
@media screen and (max-width: 400px) {
  html {
    font-size: 12px;
  }

  .status-bar {
    padding: 6px 8px;
  }

  .status-bar__name {
    max-width: 70px;
    font-size: 0.9rem;
  }

  .status-bar__hp-container,
  .status-bar__exp-container {
    height: 14px;
  }

  .nav-bar__icon {
    font-size: 1rem;
  }

  .nav-bar__label {
    font-size: 0.6rem;
  }

  .nav-bar__tab {
    padding: 4px 1px;
  }

  .game-content {
    padding: 4px;
  }

  .event-log {
    max-height: 100px;
  }

  .offline-popup {
    padding: 16px;
  }

  .offline-popup__title {
    font-size: 1rem;
  }

  .offline-popup__row {
    padding: 6px 8px;
  }

  .map-minimap { top:6px; right:6px; padding:5px; }
  .map-minimap[data-size="small"] { width:112px; }
  .map-minimap[data-size="medium"] { width:142px; }
  .map-minimap[data-size="large"] { width:180px; }
  .map-minimap-open { top:6px; right:6px; }
  .map-minimap__header { margin-bottom:3px; }
  .map-minimap__legend { font-size:.5rem; }
}

/* === 모바일 (401px ~ 600px) === */
@media screen and (min-width: 401px) and (max-width: 600px) {
  html {
    font-size: 13px;
  }

  .status-bar__name {
    max-width: 90px;
  }

  .event-log {
    max-height: 120px;
  }
}

/* === 태블릿 (601px ~ 900px) === */
@media screen and (min-width: 601px) and (max-width: 900px) {
  html {
    font-size: 14px;
  }

  .game-container {
    max-width: 768px;
  }

  .status-bar__name {
    max-width: 150px;
  }

  .status-bar__bars {
    flex-direction: row;
    gap: 8px;
  }

  .status-bar__hp-container,
  .status-bar__exp-container {
    flex: 1;
    height: 18px;
  }

  .nav-bar__tab {
    padding: 8px 4px;
  }

  .nav-bar__icon {
    font-size: 1.3rem;
  }

  .nav-bar__label {
    font-size: 0.75rem;
  }

  .event-log {
    max-height: 180px;
  }

  .game-content {
    padding: 12px;
  }
}

/* === 데스크탑 (901px ~ 1920px) === */
@media screen and (min-width: 901px) {
  html {
    font-size: 15px;
  }

  .game-container {
    max-width: 1024px;
    border-left: 1px solid var(--dp-border-light, #4a3f28);
    border-right: 1px solid var(--dp-border-light, #4a3f28);
  }

  .status-bar {
    padding: 10px 16px;
  }

  .status-bar__name {
    max-width: 200px;
    font-size: 1.1rem;
  }

  .status-bar__bars {
    flex-direction: row;
    gap: 12px;
  }

  .status-bar__hp-container,
  .status-bar__exp-container {
    flex: 1;
    height: 20px;
  }

  .status-bar__hp-text,
  .status-bar__exp-text {
    font-size: 0.75rem;
  }

  .nav-bar__tab {
    padding: 10px 8px;
  }

  .nav-bar__icon {
    font-size: 1.4rem;
  }

  .nav-bar__label {
    font-size: 0.8rem;
  }

  .event-log {
    max-height: 200px;
  }

  .game-content {
    padding: 16px;
  }

  .offline-popup {
    max-width: 420px;
  }
}

/* === 와이드 데스크탑 (1440px+) === */
@media screen and (min-width: 1440px) {
  html {
    font-size: 16px;
  }

  .game-container {
    max-width: 1200px;
  }

  .status-bar__bottom {
    font-size: 0.9rem;
  }
}