/* STEELSOUL — глобальная мобильная вёрстка (home, battle, rating, profile, upload, fm, archive, king) */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  width: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  margin: 0;
}

img, video, iframe, svg, canvas {
  max-width: 100%;
  height: auto;
}

p, h1, h2, h3, h4, h5, h6,
span, div, a, button, label, li, td, th, strong, em, small {
  overflow-wrap: break-word;
  word-break: break-word;
}

header, main, nav, section, article, footer,
.monolith-box, .leaders-panel, .style-card, .category-row,
.knights-order-panel, .king-throne-display, .battle-modal-panel,
.modal-inner, .rule-section, .rule-body, .rule-header,
.blind-deck, .top-tier, .plates-grid, .genre-plate,
.live-monolith-block, .champions-block, .battle-modal,
#robot-modal, .modal-overlay {
  box-sizing: border-box;
  max-width: 100%;
}

.site-panel-row,
.upload-direction-zone,
.vs-grid,
.deck-controls,
.battle-modal-header,
.battle-modal-actions,
#king-passport-container,
.king-controls,
.track-passport,
.track-actions,
.category-row,
.life-submodes,
.life-styles,
.style-grid,
.top-arena-zone,
.rule-header,
.modal-actions-row {
  flex-wrap: wrap;
}

.filter-scroll {
  flex-wrap: nowrap !important;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* flex-контейнеры: перенос + защита от переполнения (без header/main/nav — ломает верхнее меню) */
.modal-overlay,
.category-row,
.upload-direction-zone,
#king-passport-container,
[style*="display: flex"],
[style*="display:flex"] {
  flex-wrap: wrap;
}

header {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

.site-header-top,
.site-header-top[style*="display: flex"],
.site-header-top[style*="display:flex"] {
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.site-nav,
.site-nav[style*="display: flex"],
.site-nav[style*="display:flex"] {
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  justify-content: center !important;
}

@media (max-width: 480px) {
  .site-nav,
  .site-nav[style*="display: flex"],
  .site-nav[style*="display:flex"] {
    flex-wrap: wrap !important;
  }
}

.filter-scroll,
.filter-scroll[style*="display: flex"],
.filter-scroll[style*="display:flex"] {
  flex-wrap: nowrap !important;
}

.site-header-top > .logo,
.site-header-top > .site-header-actions {
  min-width: 0;
}

.site-header-top > .logo,
.site-header-top > .site-header-actions {
  max-width: none;
  flex-shrink: 0;
}

.track-passport > *,
.track-passport span,
#king-passport-container > *,
#king-passport-container span,
.category-row > *,
.upload-direction-zone > *,
.upload-instruction-text,
.rule-body,
.rule-item,
.modal-inner,
.modal-inner * {
  min-width: 0;
  max-width: 100%;
}

.modal-overlay {
  box-sizing: border-box;
  padding: 8px;
  overflow-y: auto;
}

.arena-btn,
button,
input,
textarea,
select {
  box-sizing: border-box;
  max-width: 100%;
}

table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}

/* ——— Планшет (< 768px) ——— */
@media (max-width: 768px) {
  header {
    flex-direction: column !important;
    align-items: stretch !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .leaders-panel {
    max-width: calc(100vw - 16px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  header,
  main,
  .leaders-panel {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  main {
    padding-top: 10px !important;
    padding-bottom: 12px !important;
  }

  .top-arena-zone {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .style-grid {
    grid-template-columns: 1fr !important;
  }

  .top-tier,
  .plates-grid {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  #knights-order-list {
    grid-template-columns: 1fr !important;
  }

  .life-styles {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .champions-block,
  .live-monolith-block {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* ——— Телефон (< 480px) ——— */
@media (max-width: 480px) {
  body {
    font-size: 13px;
    line-height: 1.25;
  }

  header {
    padding: 8px 10px !important;
  }

  main {
    padding: 8px 10px 10px !important;
  }

  .monolith-box,
  .leaders-panel,
  .knights-order-panel,
  .king-throne-display,
  .rule-section,
  .champions-block,
  .live-monolith-block,
  .genre-plate {
    padding: 10px !important;
  }

  .leaders-panel {
    margin-top: 6px !important;
    margin-bottom: 8px !important;
    gap: 8px !important;
  }

  .leaders-panel .panel-label,
  .leaders-panel .upload-instruction-text {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .box-title,
  .knights-order-title {
    font-size: 10px !important;
    margin-bottom: 8px !important;
    letter-spacing: 1px !important;
    line-height: 1.4 !important;
  }

  /* Шапка: строка 1 — логотип/счётчики + кнопки; строка 2 — девиз; nav; король */
  .site-header-top {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 6px 8px !important;
    max-height: none !important;
    padding: 2px 0 !important;
  }

  .site-header-top .logo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }

  .site-header-row--manifesto {
    padding: 4px 0 6px !important;
  }

  .site-header-row--manifesto .arena-manifesto {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(14px, 4.6vw, 18px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding: 0 2px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center !important;
  }

  .site-header-top .user-panel {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-spacing: normal !important;
    max-width: 100% !important;
    text-align: right !important;
    gap: 3px 5px !important;
  }

  .site-header-actions {
    flex: 0 0 auto !important;
    max-width: 52% !important;
    gap: 4px 5px !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  #lang-toggle-btn {
    padding: 3px 7px !important;
    font-size: 9px !important;
    min-width: 34px !important;
  }

  .arena-notifications-btn {
    width: 30px !important;
    height: 30px !important;
  }

  .auth-btn {
    font-size: 8px !important;
    padding: 2px 6px !important;
  }

  .theme-toggle {
    font-size: 13px !important;
    padding: 0 !important;
  }

  .user-passport,
  .user-balance,
  .user-balance-value,
  .user-currency {
    white-space: normal !important;
  }

  .site-nav {
    gap: 4px 6px !important;
    padding: 5px 4px 4px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  .site-nav .nav-link,
  .site-nav .nav-btn {
    flex: 0 0 auto !important;
    padding: 3px 5px !important;
    font-size: 8px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  .guest-votes-strip {
    margin-top: 3px !important;
    padding: 4px 8px !important;
    font-size: 9px !important;
    gap: 6px !important;
  }

  .site-nav .nav-label-short {
    display: inline !important;
  }

  .site-nav .nav-label-full {
    display: none !important;
  }

  #king-passport-container {
    font-size: 11px !important;
    gap: 4px !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
    width: 100% !important;
  }

  .king-controls {
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: center !important;
  }

  .king-controls .arena-btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  /* Upload / leaders block */
  .site-panel-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .site-panel-row > span {
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
    line-height: 1.4 !important;
  }

  .upload-direction-zone {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  .upload-instruction-text {
    font-size: 9px !important;
    flex: 1 1 auto;
    min-width: 0;
  }

  .site-panel-row .arena-btn,
  .category-row .arena-btn {
    flex: 0 0 auto;
    padding: 5px 10px !important;
    font-size: 10px !important;
  }

  /* Battle / live plate (home) */
  .life-submodes {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .submode {
    font-size: 9px !important;
    padding: 7px 4px !important;
  }

  .life-action {
    font-size: 9px !important;
    margin-bottom: 8px !important;
  }

  .life-styles {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .life-styles .style {
    padding: 8px 2px !important;
    font-size: 8px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Rating / profile track rows */
  .category-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .track-passport {
    flex-wrap: wrap !important;
    font-size: 10px !important;
    gap: 4px !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  .track-actions {
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  .track-actions .arena-btn {
    flex: 1 1 calc(33.333% - 4px);
    min-width: 0;
    padding: 5px 4px !important;
    font-size: 9px !important;
    text-align: center;
  }

  /* Style conveyor / cards */
  .style-card {
    padding: 10px !important;
    gap: 6px !important;
  }

  .style-name {
    font-size: 11px !important;
    padding-bottom: 6px !important;
  }

  .category-label {
    font-size: 10px !important;
  }

  .category-row .upload-direction-zone {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .category-row .arena-btn {
    width: 100% !important;
  }

  /* Battle modal */
  .vs-grid {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .battle-modal {
    padding: 8px !important;
  }

  .battle-modal-panel {
    padding: 12px 10px !important;
    width: 100% !important;
  }

  .battle-modal-header {
    flex-direction: column !important;
    margin-bottom: 10px !important;
    gap: 8px !important;
  }

  .battle-modal-title {
    font-size: 11px !important;
    letter-spacing: 1px !important;
  }

  .battle-modal-actions {
    width: 100%;
  }

  .battle-modal-close,
  .battle-modal-minimize {
    flex: 1 1 auto;
    padding: 7px 10px !important;
    font-size: 10px !important;
  }

  .battle-modal-hint {
    font-size: 8px !important;
    margin-bottom: 10px !important;
    letter-spacing: 0.5px !important;
  }

  .deck-controls {
    flex-direction: column !important;
  }

  .deck-btn {
    width: 100% !important;
  }

  .btn-vote,
  #voting-zone .btn-vote {
    width: 100% !important;
  }

  /* Upload robot modal */
  .modal-inner,
  #robot-modal > div {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    padding: 12px !important;
    margin: 8px auto !important;
  }

  .modal-actions-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .modal-actions-row .arena-btn,
  .modal-actions-row button {
    width: 100% !important;
  }

  #detected-name {
    font-size: 12px !important;
    word-break: break-all !important;
  }

  /* Rules / archive text */
  .rule-header {
    font-size: 10px !important;
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  .rule-body {
    padding: 10px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  .rule-item {
    margin-bottom: 8px !important;
    padding-left: 8px !important;
  }

  .battle-modal-close {
    width: auto !important;
    flex: 1 1 auto !important;
  }

  .king-throne-display {
    padding: 8px !important;
  }

  .mode-plate-sub {
    font-size: 8px !important;
    line-height: 1.3 !important;
  }

  .category-label {
    font-size: 10px !important;
    flex: 1 1 100%;
  }

  .upload-instruction-text {
    font-size: 8px !important;
    letter-spacing: 0 !important;
  }

  .filter-scroll .arena-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .modal-overlay button.arena-btn,
  .modal-inner button {
    width: 100% !important;
  }

  /* main.html (battle console) */
  header h1 {
    font-size: 22px !important;
    letter-spacing: 3px !important;
  }

  header p {
    font-size: 10px !important;
    padding: 0 8px;
  }

  .live-genre-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .player-arena {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .track-node {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .vote-action-btn,
  .upload-btn,
  .play-btn {
    width: 100% !important;
    max-width: 100% !important;
  }

  .top-tier {
    margin-bottom: 12px !important;
    gap: 12px !important;
  }
}