body {
    background-color: var(--tg-theme-bg-color, #ffffff);
    color: var(--tg-theme-text-color, #000000);
    font-family: sans-serif; margin: 0; padding: 5px;
    display: flex; flex-direction: column; align-items: center; user-select: none;
    overflow-x: hidden;
}

/* Компактное лобби */
.menu-screen {
    display: flex; flex-direction: column; gap: 10px; width: 90%; max-width: 280px; margin-top: 20px;
}
input { padding: 10px; border-radius: 8px; border: 1px solid #ccc; text-align: center; font-size: 16px; text-transform: uppercase; }

/* Уменьшенные поля */
.board {
    display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(11, 1fr);
    gap: 1px; width: 92vw; max-width: 320px; aspect-ratio: 1; margin: 0 auto;
}

.cell {
    background-color: #e0e0e0; width: 100%; height: 100%; border: 1px solid #999;
    box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 16px;
}

/* Буквы и цифры ближе к полю */
.label { 
    font-size: 11px; font-weight: bold; color: #777; 
    display: flex; align-items: center; justify-content: center;
}

.cell.ship { background-color: #3390ec; }
.cell.hit { background-color: #ff4d4d !important; color: white; }
.cell.miss { background-color: #b0b0b0 !important; color: white; }
.cell.sunk { background-color: #444 !important; color: white !important; }

/* Блок статуса МЕЖДУ полями */
.mid-info {
    display: flex; flex-direction: column; align-items: center;
    margin: 5px 0; width: 100%; min-height: 50px; justify-content: center;
}

#status-text { margin: 0; font-size: 18px; font-weight: bold; }

.fleet-counter { 
    display: flex; gap: 6px; margin-top: 3px; font-weight: bold; font-size: 12px; 
}
.ship-count.sunk-label { text-decoration: line-through; opacity: 0.5; color: #ff4d4d; }

/* Кнопки */
.tg-button { padding: 10px; border-radius: 8px; border: none; font-weight: bold; cursor: pointer; }
.btn-purple { background: #8e44ad; color: white; }
.btn-red { background: #e74c3c; color: white; }
.btn-green { background: #2ecc71; color: white; }

.dock { background: rgba(128,128,128,0.1); padding: 8px; border-radius: 10px; width: 100%; max-width: 320px; margin-top: 5px; }
.dock-controls { display: flex; gap: 8px; margin-bottom: 8px; }
.ships-list { display: flex; justify-content: space-around; }
.ship-item { cursor: pointer; padding: 3px; border: 2px solid transparent; border-radius: 5px; text-align: center;}
.ship-item.selected { border-color: #3390ec; background: rgba(51,144,236,0.1); }
.ship-preview { height: 6px; background: #3390ec; border-radius: 2px; margin-bottom: 2px;}
.size-4 { width: 35px; } .size-3 { width: 25px; } .size-2 { width: 15px; } .size-1 { width: 8px; }

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 1000; align-items: center; justify-content: center; }
.modal-content { background: white; padding: 20px; border-radius: 20px; text-align: center; }