@media (min-width: 2000px) {
  :root {
    --cell-size: 58px;
    --cell-gap: 1px;
    --board-padding: 4px;
  }
}

@media (min-width: 2200px) {
  :root {
    --cell-size: 64px;
    --cell-gap: 1px;
    --board-padding: 4px;
  }
}

@media (max-width: 1600px) {
  :root {
    --cell-size: 42px;
    --cell-gap: 1px;
    --board-padding: 4px;
  }
}
@media (max-width: 1400px) {
  :root {
    --cell-size: 36px;
    --cell-gap: 1px;
    --board-padding: 4px;
  }
}
@media (max-width: 1200px) {
  :root {
    --cell-size: 32px;
    --cell-gap: 1px;
    --board-padding: 4px;
  }
}


/* Планшеты */
@media (max-width: 1024px) and (min-width: 769px) {
  :root {
    --cell-size: 30px;
    --cell-gap: 1px;
    --board-padding: 4px;
  }
  
  .game-boards {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  
  .abilities-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  
  .ability-block {
    min-width: unset;
    max-width: unset;
    width: 100%;
    min-height: 120px;
  }
  
  .fleet-layout {
    grid-template-columns: 1fr 1fr;
  }
  
  .fleet-block {
    min-width: 80px;
    min-height: 72px;
  }
  
  .deploy-ship-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .deploy-ship-block {
    width: 100%;
    min-height: 140px;
  }
  
  .battle-log {
    max-height: 134px;
  }
  .toast {
    font-size: 14px;
    padding: 10px 20px;
  }
  .battle-notification {
    font-size: 22px !important;
    padding: 12px 24px !important;
  }
  .cell-float {
    font-size: 11px;
    padding: 2px 6px;
  }
  .cell-float.destroyed {
    font-size: 13px;
  }
  .cell-big-float {
    font-size: 14px;
    padding: 5px 10px;
  }
}


@media (max-width: 768px) {
.menu-container {
min-width: 90vw;
}	
    .room-options {
min-width: 90vw;
    }
	
  :root {
    --cell-size: 30px;
    --cell-gap: 1px;
    --board-padding: 4px;
  }
  
  .screen {
    padding: 4px 4px;
}
  .game-top-bar {
    font-size: 12px;
    padding: 4px 8px;
	margin-bottom: 4px;
  }
  .game-boards {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  
  .fleet-layout {
    grid-template-columns: 1fr;
  }
  .turn-indicator{
	display: none;
  }
  .menu-container {
    padding-top: 5vh;
  }
  .game-title {
    font-size: 28px;
  }
  .btn {
    padding: 6px 8px;
    font-size: 13px;
  }
  
  .ship-card {
    padding: 8px;
    gap: 6px;
  }
  .ship-card .ship-name {
    font-size: 12px;
  }
  .ship-card .ship-stats {
    font-size: 10px;
  }
  .mini-cell {
    font-size: 8px;
  }
  
  /* Блоки способностей — по 2 в ряд */
  .abilities-panel{
	overflow: hidden;
    max-height: 380px;
    overflow-y: auto;
	margin-top: 4px;
	padding: 8px 6px;
  }
  
  .abilities-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  
  .ability-block {
    min-width: unset;
    max-width: unset;
    width: 100%;
  }
  
  /* Модалка вывода */
  .deploy-ship-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .deploy-ship-block {
    width: 100%;
    min-height: 140px;
    padding: 10px 6px;
  }
  
  .battle-log {
    max-height: 172px;
  }
  
  .toast {
    font-size: 12px!important;
    padding: 6px 8px!important;
	text-align: center;
	min-width: 96vw!important;
    word-wrap: break-word!important;
	white-space: normal!important;
  }
  .battle-notification {
    font-size: 16px !important;
    padding: 10px 18px !important;
    top: 22% !important;
    max-width: 95vw;
    text-align: center;
  }
  .cell-float {
    font-size: 10px;
    padding: 1px 5px;
  }
  .cell-float.destroyed {
    font-size: 12px;
  }
  .cell-big-float {
    font-size: 12px;
    padding: 4px 8px;
  }
  .modal-overlay{
	padding: 12px;
  }
  #modal-help .modal{
	max-width:95vh;
	max-height:85vh;
	padding: 8px;
  }
  #modal-deploy .modal{
	padding: 8px;
  }
  .battle-log-entries{
	  padding: 4px 6px;
  }
  .battle-log h4{
	  padding: 6px 6px;
  }
  
  .cell.highlight-valid,
  .cell.highlight-target,
  .cell.highlight-hover {
    border-radius: 4px;
  }
  @keyframes pulse-valid {
    0%, 100% { box-shadow: 0 0 0 2px var(--success), 0 0 8px rgba(46,204,113,0.5); }
    50% { box-shadow: 0 0 0 3px var(--success), 0 0 14px rgba(46,204,113,0.7); }
  }
  .cell.shot-animation::before {
    inset: -2px;
    border-width: 2px;
  }
  .cell.hit-animation::before {
    inset: -2px;
    border-width: 2px;
  }
  .cell.miss-animation::before {
    inset: -1px;
    border-width: 1px;
  }
  .cell.ability-animation::before {
    inset: -2px;
    border-width: 2px;
  }
  .cell.shot-marker::before {
    inset: -1px;
    border-width: 1px;
  }
  @keyframes shot-marker-ring {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.03); }
  }
  
  .join-room {
    flex-direction: column;
  }
  .join-room input {
    width: 100%;
    font-size: 16px;
    letter-spacing: 4px;
    padding: 10px;
  }
  .join-room .btn {
    width: 100%;
  }
  
  .action-info {
	font-size: 14px;
  }
  .top-bar h2{
	font-size: 16px;
  }
  
  .progress-ships-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
/* ЛЁГКИЙ ДЫМ — 💨 */
.cell.ship-light-dmg {
  background: var(--cell-ship-light-dmg);
}
.cell.ship-light-dmg::after {

  animation: light-smoke 2.5s ease-out infinite;
}
@keyframes light-smoke {
  0%, 100% { opacity: 0.5; transform: translateY(2px) scale(0.9); }
  50% { opacity: 1; transform: translateY(-2px) scale(1.05); }
}

/* ТЯЖЁЛЫЙ ДЫМ — 💥 */
.cell.ship-heavy-dmg {
  background: var(--cell-ship-heavy-dmg);
}
.cell.ship-heavy-dmg::after {

  animation: heavy-smoke 1.8s ease-out infinite;
}
@keyframes heavy-smoke {
  0%, 100% { opacity: 0.7; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* УНИЧТОЖЕН — 💀 */
.cell.ship-destroyed {
  background: var(--cell-ship-destroyed);
  box-shadow: inset 0 0 12px var(--fire-glow), 0 0 6px var(--fire-glow);
  animation: fire-flicker 0.2s ease-in-out alternate;
  animation-iteration-count: 1; 
}
.cell.ship-destroyed::after {

  animation: fire-blaze 0.8s ease-out;
}
#modal-deploy .modal {
  max-width: 95vw;
}  
.deploy-ability-name{
font-size: 12px;
margin-left: 2px;
}
.deploy-ability .ability-block-icon img{
	height:32px;
}
.ship-card-block .ship-mini-grid{
max-width: 80px;
}
.ship-abilities .ability-detail{
display:flex;
align-items:flex-start;
gap:8px;
}
.ship-abilities .ability-detail img{
	width:42px;
	height:42px;
}
}


@media (max-width: 400px) {
	
.menu-container {
min-width: 90vw;
}	
    .room-options {
min-width: 90vw;
    }
	
  :root {
    --cell-size: 26px;
    --cell-gap: 1px;
    --board-padding: 4px;
  }
  

  .turn-indicator {
    font-size: 13px;
  }
  
  .abilities-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .ability-block .ability-block-name {
    font-size: 12px;
  }
  .ability-block .ability-block-desc {
    font-size: 11px;
  }
  
  .fleet-slot {
    padding: 6px 8px;
    min-height: 36px;
  }
  .fleet-slot .fleet-ship-name {
    font-size: 11px;
  }
  
  
  
  .toast {
    font-size: 12px!important;
    padding: 6px 8px!important;
	text-align: center;
	min-width: 96vw;
    word-wrap: break-word!important;
	white-space: normal!important;
  }
  .battle-notification {
    font-size: 13px !important;
    padding: 4px 8px !important;
    top: 20% !important;
    max-width: 95vw;
    text-align: center;
  }
  .cell-float {
    font-size: 9px;
    padding: 1px 4px;
  }
  .cell-float.destroyed {
    font-size: 11px;
  }
  .cell-big-float {
    font-size: 11px;
    padding: 3px 6px;
  }
  
  .cell.highlight-valid {
    /*box-shadow: 0 0 0 1px var(--success), 0 0 6px rgba(46,204,113,0.4);*/
	filter: brightness(1.1);
        border-width: 1px;
        border-color: rgba(46, 204, 113, 0.9);
  }
  .cell.highlight-target {
    box-shadow: 0 0 0 1px var(--danger), 0 0 6px rgba(231,76,60,0.4);
  }
  .cell.highlight-hover {
      filter:brightness(1.1);
border-width: 1px;
    border-color:rgba(95,185,255,.60);
  animation: none;
  }
  @keyframes pulse-valid {
    0%, 100% { box-shadow: 0 0 0 1px var(--success), 0 0 5px rgba(46,204,113,0.4); }
    50% { box-shadow: 0 0 0 2px var(--success), 0 0 10px rgba(46,204,113,0.6); }
  }
  .cell.shot-animation::before,
  .cell.hit-animation::before,
  .cell.ability-animation::before {
    inset: -1px;
    border-width: 1px;
  }
  .cell.miss-animation::before {
    inset: -1px;
    border-width: 1px;
  }
  .cell.shot-marker::before {
    inset: -1px;
    border-width: 1px;
  }

  .join-room input {
    font-size: 14px;
    letter-spacing: 3px;
    padding: 8px;
  }

  .progress-ships-grid {
    grid-template-columns: 1fr;
  }
.deploy-ability-name{
font-size: 11px;
margin-left: 2px;
}
.ship-abilities .ability-detail img{
	width:36px;
	height:36px;
}
.ability-block {
  min-width: 140px;
  max-width: 210px;
  min-height: 140px;
  padding: 4px;
  gap: 2px;
}  

.ability-block .ability-block-header .ability-block-icon img{
height:42px;
}
.deploy-ship-block .deploy-ship-name {
    font-size: 13px;
    font-weight: 700;
}
}