/* ==========================================================================
   game.css — Amiral Battı: denizler, gemiler, atış efektleri, filo panelleri, yerleştirme rıhtımı.
   Boyutlar JS (game.js -> layout) tarafından ayarlanır:
     --bw-enemy : rakip deniz kenarı     --bw-small : küçük (kendi) deniz     --bw-place : yerleştirme sırasındaki büyük deniz
   Renkler / dokular şablon değişkenlerinden gelir (bkz. templates.js):
     sea (sea-1 sea-2 grid frame frame-2 coord wave hover fog) · ships (ship-1 ship-2 ship-deck ship-line ship-accent ship-glow)
     marker (hit-1 hit-2 fire miss-1 miss-2 ring sunk shape)
   ========================================================================== */

#screen-game {
    --bw-enemy: 320px;
    --bw-small: 140px;
    --bw-place: 320px;
    color: #fff;
    touch-action: manipulation;
    overflow: hidden;
}

/* ---------- Üst çubuk ---------- */
.g-top { display: flex; align-items: center; gap: 8px; padding: 8px 10px 4px; flex: 0 0 auto; }
.g-info {
    flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    font-size: 13px; color: rgba(255, 255, 255, 0.85); white-space: nowrap; overflow: hidden; font-weight: 700;
}
.g-info b { color: #fff; }
.g-sub { font-size: 11px; opacity: 0.65; overflow: hidden; text-overflow: ellipsis; }
.dotsep { opacity: 0.4; }
.g-tag { padding: 1px 7px; border-radius: 6px; background: #16a34a; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; }
.g-tag.ranked { background: #d97706; }
#screen-game .icon-btn { background: rgba(0, 0, 0, 0.42); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
#screen-game .icon-btn.is-off { opacity: 0.55; }

/* ---------- Filo panelleri ---------- */
.fleet-panel {
    position: relative; display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
    margin: 4px 12px; padding: 7px 12px; border-radius: 16px;
    background: linear-gradient(180deg, rgba(8, 20, 40, 0.62), rgba(4, 12, 26, 0.62));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 6px 14px rgba(0, 0, 0, 0.28);
    transition: box-shadow 0.25s;
}
.fleet-panel .avatar { flex: 0 0 auto; width: 36px; height: 36px; font-size: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.fleet-panel.is-turn { box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.95), 0 0 20px rgba(251, 191, 36, 0.45); }
.fleet-panel.is-turn .avatar { animation: turnPulse 1.2s ease-in-out infinite; }
@keyframes turnPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7); } 50% { box-shadow: 0 0 0 7px rgba(251, 191, 36, 0); } }
.fp-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fp-meta b { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-meta .pp-status { font-size: 11px; color: rgba(255, 255, 255, 0.78); min-height: 15px; }
.fp-meta .pp-level { display: flex; align-items: center; gap: 6px; }
.pips { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 6px; max-width: 46%; }
.fleet-pip { position: relative; display: inline-block; width: calc(var(--len) * 8px); height: 9px; }
.fleet-pip .ship-svg { width: 100%; height: 100%; display: block; }
.fleet-pip.is-sunk { opacity: 0.4; filter: grayscale(1); }
.fleet-pip.is-sunk::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; background: #ff5a4f; transform: rotate(-14deg); }

/* ---------- Sahne ve denizler ---------- */
.stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 2px 0; }
.me-row { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 0 12px; }
.me-row .fleet-panel { flex: 1; margin: 0; min-width: 0; flex-direction: column; align-items: flex-start; gap: 6px; padding: 9px 12px; }
.me-row .fleet-panel .avatar { position: absolute; right: 10px; top: 8px; width: 30px; height: 30px; font-size: 15px; }
.me-row .fleet-panel .fp-meta { width: 100%; padding-right: 38px; }
.me-row .fleet-panel .pips { justify-content: flex-start; max-width: 100%; }
.me-row .fleet-panel .pp-status { white-space: normal; line-height: 1.2; }

.bd-wrap {
    --bw: var(--bw-enemy);
    position: relative; display: grid; flex: 0 0 auto;
    grid-template-columns: 16px var(--bw); grid-template-rows: 16px var(--bw);
    padding: 0 7px 7px 0;
}
.bd-wrap.mine { --bw: var(--bw-small); }
.bd-label { display: none; }
.bd-x, .bd-y { display: grid; font-size: 10px; font-weight: 800; color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.bd-x { grid-column: 2; grid-row: 1; grid-template-columns: repeat(var(--n), 1fr); text-align: center; align-items: end; }
.bd-y { grid-column: 1; grid-row: 2; grid-template-rows: repeat(var(--n), 1fr); align-items: center; justify-items: center; }
.bd-wrap.mine .bd-x, .bd-wrap.mine .bd-y { font-size: 8px; }

#screen-game[data-phase="place"] .bd-wrap.enemy { display: none; }
#screen-game[data-phase="place"] .bd-wrap.mine { --bw: var(--bw-place); }
#screen-game[data-phase="place"] .me-row { flex-direction: column; }
#screen-game[data-phase="place"] .me-row .fleet-panel { display: none; }
#screen-game[data-phase="over"] .g-actions { visibility: hidden; }

.bd {
    position: relative; grid-column: 2; grid-row: 2;
    width: var(--bw); height: var(--bw); border-radius: 6px;
    box-shadow: 0 0 0 5px var(--frame), 0 0 0 7px var(--frame-2), 0 12px 26px rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, var(--sea-1), var(--sea-2));
    overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
    transition: box-shadow 0.3s;
}
.bd-water { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bd-water::before {
    content: ''; position: absolute; inset: -20%;
    background: repeating-linear-gradient(115deg, var(--wave) 0 2px, transparent 2px 15px);
    animation: waterDrift 14s linear infinite;
}
.bd-water::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 10%, rgba(255, 255, 255, 0.18), transparent 55%); }
@keyframes waterDrift { from { transform: translate(0, 0); } to { transform: translate(60px, 24px); } }

.bd-ships, .bd-cells, .bd-fx { position: absolute; inset: 0; }
.bd-ships { pointer-events: none; }
.bd-wrap.mine .bd-ships .ship { pointer-events: auto; }
.bd-cells { display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr); pointer-events: none; }
.bd-fx { pointer-events: none; overflow: visible; z-index: 5; }
.bd { contain: layout; }

.cell { position: relative; box-shadow: inset 0 0 0 0.5px var(--grid); }
.bd-wrap.enemy .cell:not(.is-miss):not(.is-hit) { background: var(--fog); }
.bd-wrap.enemy .bd.is-aiming .cell:not(.is-miss):not(.is-hit):hover { background: var(--hover); }
.cell.is-sunk { background: var(--sunk); }

/* ---------- İşaretler ---------- */
.mk { position: absolute; left: 50%; top: 50%; width: 66%; height: 66%; transform: translate(-50%, -50%); display: none; pointer-events: none; }
.cell.is-miss .mk {
    display: block; border-radius: var(--shape); border: 2px solid var(--ring);
    background: radial-gradient(circle, var(--miss-1) 0 26%, var(--miss-2) 28% 60%, transparent 62%);
    animation: mkPop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.cell.is-hit .mk {
    display: block; border-radius: var(--shape);
    background: radial-gradient(circle at 38% 32%, var(--hit-1), var(--hit-2) 70%);
    box-shadow: 0 0 8px var(--fire), inset 0 0 4px rgba(0, 0, 0, 0.35);
    animation: mkPop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.cell.is-hit .mk::after {
    content: ''; position: absolute; inset: -45%; border-radius: 50%;
    background: radial-gradient(circle, var(--fire), transparent 62%); opacity: 0.55; animation: flame 0.9s ease-in-out infinite alternate;
}
.cell.is-hit.is-sunk .mk { filter: saturate(0.55) brightness(0.8); box-shadow: none; }
.cell.is-hit.is-sunk .mk::after { animation: none; opacity: 0.25; }
@keyframes mkPop { 0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes flame { from { transform: scale(0.85); opacity: 0.35; } to { transform: scale(1.15); opacity: 0.7; } }

/* ---------- Gemiler ---------- */
.ship { position: absolute; box-sizing: border-box; padding: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 6px var(--ship-glow)); }
.ship-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ship.is-sunk { filter: grayscale(0.75) brightness(0.72) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.ship.is-enemy.is-sunk { animation: shipReveal 0.8s ease-out; }
.ship.is-enemy.is-revealed { opacity: 0.8; }
.ship.is-sinking { animation: shipSink 1.5s ease-out; }
.ship.is-placing { cursor: grab; touch-action: none; }
.ship.is-dragged { opacity: 0; }
.ship.ghost { position: fixed; z-index: 300; pointer-events: none; opacity: 0.92; transition: filter 0.1s; }
.ship.ghost.is-ok { filter: drop-shadow(0 0 10px #4ade80) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }
.ship.ghost.is-bad { filter: drop-shadow(0 0 10px #ef4444) saturate(0.6) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }
@keyframes shipReveal { 0% { opacity: 0; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
@keyframes shipSink { 0% { transform: scale(1); filter: brightness(1.8) saturate(1.4); } 40% { transform: scale(1.06) rotate(1.5deg); } 100% { transform: scale(1); } }

.snap { position: absolute; border-radius: 6px; border: 2px dashed; }
.snap.ok { border-color: #4ade80; background: rgba(74, 222, 128, 0.25); }
.snap.bad { border-color: #ef4444; background: rgba(239, 68, 68, 0.22); }

/* ---------- Nişan ---------- */
.reticle {
    position: absolute; width: calc(100% / var(--n) * 1.9); aspect-ratio: 1; transform: translate(-50%, -50%);
    border: 2px solid #ff5a4f; border-radius: 50%; box-shadow: 0 0 12px rgba(255, 90, 79, 0.9), inset 0 0 8px rgba(255, 90, 79, 0.5);
    animation: reticleLock 0.9s ease-in-out infinite;
}
.reticle::before, .reticle::after { content: ''; position: absolute; background: #ff5a4f; box-shadow: 0 0 6px rgba(255, 90, 79, 0.9); }
.reticle::before { left: -22%; right: -22%; top: calc(50% - 1px); height: 2px; }
.reticle::after { top: -22%; bottom: -22%; left: calc(50% - 1px); width: 2px; }
@keyframes reticleLock { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(0.82); } }
.hint-mark {
    position: absolute; width: calc(100% / var(--n) * 1.5); aspect-ratio: 1; transform: translate(-50%, -50%);
    border: 3px solid #fde047; border-radius: 50%; box-shadow: 0 0 14px #fde047; animation: hintPulse 1s ease-in-out infinite;
}
@keyframes hintPulse { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.45; transform: translate(-50%, -50%) scale(1.25); } }

/* ---------- Deniz durumları ---------- */
.bd.is-aiming { box-shadow: 0 0 0 5px var(--frame), 0 0 0 7px #fbbf24, 0 0 24px rgba(251, 191, 36, 0.6), 0 12px 26px rgba(0, 0, 0, 0.45); }
.bd.is-under-fire { box-shadow: 0 0 0 5px var(--frame), 0 0 0 7px #ef4444, 0 0 20px rgba(239, 68, 68, 0.5), 0 12px 26px rgba(0, 0, 0, 0.45); }
.bd.is-scanning .bd-water::after {
    inset: -50%; background: conic-gradient(from 0deg, rgba(120, 255, 190, 0) 0 305deg, rgba(120, 255, 190, 0.24) 352deg, rgba(120, 255, 190, 0) 360deg);
    animation: sweep 3.2s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }
.is-shake { animation: bdShake 0.45s; }
@keyframes bdShake { 0%, 100% { transform: translate(0, 0); } 15% { transform: translate(-4px, 2px); } 30% { transform: translate(4px, -3px); } 45% { transform: translate(-3px, -2px); } 60% { transform: translate(3px, 2px); } 80% { transform: translate(-1px, 1px); } }

/* ---------- Atış efektleri ---------- */
.fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 55; overflow: hidden; }
.shell {
    position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #ffc04d 40%, #a03a0c); box-shadow: 0 0 12px #ffb02e, 0 0 24px rgba(255, 140, 40, 0.6);
}
.bd-fx > i { position: absolute; pointer-events: none; transform: translate(-50%, -50%); }
.fx-ring { width: calc(100% / var(--n)); aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.9); animation: ringOut 0.9s ease-out forwards; }
.fx-ring.r2 { animation-delay: 0.14s; opacity: 0; animation-duration: 1s; }
.fx-ring.boom { border: 3px solid #ffb02e; animation-name: ringBoom; animation-duration: 1s; }
@keyframes ringOut { 0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(3); opacity: 0; } }
@keyframes ringBoom { 0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(5); opacity: 0; } }
.fx-drop { width: calc(100% / var(--n) * 0.18); aspect-ratio: 1; border-radius: 50%; background: #e6f6ff; animation: dropFly 0.7s ease-out forwards; }
@keyframes dropFly { 0% { transform: translate(-50%, -50%); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx) * 330%), calc(-50% + var(--dy) * 330% + 160%)); opacity: 0; } }
.fx-flash { width: calc(100% / var(--n) * 2.4); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff7c2 0%, #ffb02e 35%, rgba(255, 90, 20, 0) 70%); animation: flashOut 0.5s ease-out forwards; }
@keyframes flashOut { 0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
.fx-spark { width: calc(100% / var(--n) * 0.16); aspect-ratio: 1; border-radius: 40%; background: #ffcf5a; box-shadow: 0 0 6px #ff7a1a; animation: sparkFly 0.8s ease-out forwards; }
@keyframes sparkFly { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx) * 520%), calc(-50% + var(--dy) * 520%)) scale(0.3); opacity: 0; } }
.fx-smoke { width: calc(100% / var(--n) * 0.9); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(60, 60, 66, 0.85), rgba(60, 60, 66, 0) 70%); animation: smokeUp 1.7s ease-out forwards; }
.fx-smoke.s2 { animation-delay: 0.25s; opacity: 0; }
@keyframes smokeUp { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.85; } 100% { transform: translate(-50%, -190%) scale(2.6); opacity: 0; } }

/* ---------- Duyuru şeridi ---------- */
.banner {
    position: absolute; left: 50%; top: 24%; z-index: 40; transform: translate(-50%, -50%) scale(0.6); opacity: 0; pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.2, 1.5, 0.4, 1), opacity 0.2s; max-width: 94%;
}
.banner.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.banner span {
    display: block; padding: 9px 24px; border-radius: 14px; font-size: clamp(18px, 6vw, 28px); font-weight: 900; letter-spacing: 0.06em; text-align: center;
    color: #fff; background: rgba(8, 20, 40, 0.78); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.18); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
.banner.hit span { background: linear-gradient(180deg, #ff8a3d, #d9360f); }
.banner.sunk span { background: linear-gradient(180deg, #ef4444, #8f1111); font-size: clamp(19px, 6.4vw, 30px); box-shadow: 0 0 30px rgba(239, 68, 68, 0.7), inset 0 0 0 2px rgba(255, 255, 255, 0.25); }
.banner.miss span { background: linear-gradient(180deg, #4c8fd6, #1d4f8a); }
.banner.lost span { background: linear-gradient(180deg, #b91c1c, #5f0f0f); }
.banner.big span { background: linear-gradient(180deg, #fbbf24, #b45309); color: #2a1500; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); }
.banner.info span { background: rgba(8, 20, 40, 0.82); }

/* ---------- Rıhtım (yerleştirme) ---------- */
.dock {
    flex: 0 0 auto; margin: 6px 12px 4px; padding: 10px 12px 12px; border-radius: 18px;
    background: linear-gradient(180deg, rgba(8, 20, 40, 0.72), rgba(4, 12, 26, 0.72)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 8px 18px rgba(0, 0, 0, 0.3);
}
.dock-hint { font-size: 12px; text-align: center; color: rgba(255, 255, 255, 0.82); margin-bottom: 8px; }
.dock-ships { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; align-items: flex-end; min-height: 56px; }
.dock-ship { display: flex; flex-direction: column; align-items: center; gap: 2px; touch-action: none; cursor: grab; padding: 4px 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); }
.dock-ship:active { background: rgba(255, 255, 255, 0.16); }
.dock-ship .ship-svg { width: calc(var(--len) * 26px); height: 26px; }
.dock-ship.is-vertical .ship-svg { width: 26px; height: calc(var(--len) * 26px); }
.dock-ship small { font-size: 10px; opacity: 0.75; }
.dock-done { font-size: 14px; font-weight: 800; color: #86efac; padding: 12px 0; }
.dock-actions { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.dock-wait { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 0; text-align: center; }
.dock-wait small { opacity: 0.7; }

.g-actions { flex: 0 0 auto; display: flex; justify-content: center; padding: 4px 12px 8px; min-height: 66px; align-items: center; }
#screen-game[data-phase="place"] .g-actions { display: none; }
.btn-fire {
    min-width: 62%; min-height: 54px; border-radius: 999px; font-size: 20px; font-weight: 900; letter-spacing: 0.1em; color: #fff;
    background: linear-gradient(180deg, #ff6a4d, #c0220f); box-shadow: 0 6px 0 #7d1208, 0 12px 22px rgba(0, 0, 0, 0.4); transition: transform 0.1s, box-shadow 0.1s, filter 0.2s;
}
.btn-fire:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #7d1208, 0 6px 12px rgba(0, 0, 0, 0.4); }
.btn-fire:disabled { filter: grayscale(0.8) brightness(0.7); box-shadow: 0 4px 0 #3b3b3b; }
.btn-fire.is-ready { animation: firePulse 1s ease-in-out infinite; }
@keyframes firePulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }

/* ---------- İfade / mesaj ---------- */
.emote-layer { position: absolute; inset: 0; pointer-events: none; z-index: 60; }
.emote-pop { position: absolute; font-size: 34px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); animation: emotePop 2s ease-out forwards; }
@keyframes emotePop { 0% { opacity: 0; transform: translate(-50%, 0) scale(0.4); } 15% { opacity: 1; transform: translate(-50%, -10px) scale(1.2); } 80% { opacity: 1; transform: translate(-50%, -26px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -40px) scale(1); } }
.table-msg {
    position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); z-index: 30;
    max-width: 78%; padding: 8px 18px; border-radius: 999px; background: rgba(0, 0, 0, 0.74); font-size: 15px; font-weight: 800;
    text-align: center; opacity: 0; transition: opacity 0.25s; pointer-events: none;
}
.table-msg.is-on { opacity: 1; }

/* ---------- Görünüm ekranı / admin önizlemeleri ---------- */
.sea-preview { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 6px; }
.sea-preview .bd { height: 100%; width: auto; aspect-ratio: 1; box-shadow: 0 0 0 3px var(--frame), 0 0 0 4px var(--frame-2); }
.ship-preview { display: flex; flex-direction: column; gap: 4px; justify-content: center; height: 100%; padding: 8px 12px; background: linear-gradient(160deg, #1f77b8, #0d4a80); }
.sp-row { height: 14%; width: calc(var(--len) * 15%); }
.sp-row .ship-svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 4px var(--ship-glow)); }
.marker-preview { display: flex; gap: 10px; align-items: center; justify-content: center; height: 100%; background: linear-gradient(160deg, #1f77b8, #0d4a80); }
.marker-preview .cell { width: 34px; height: 34px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }

@media (max-height: 700px) { .fleet-panel { padding: 5px 10px; } .fleet-panel .avatar { width: 30px; height: 30px; font-size: 15px; } .btn-fire { min-height: 46px; } .g-actions { min-height: 56px; } }