/* ═══════════════════════════════════════════════════════════════════════════
   🔧 GARAJ (garage.js) — solda gemi önizlemesi, sağda 5 parça yuvası
   Yatay telefon öncelikli (320px yüksekliğe kadar). Animasyonlar transform/opacity.
   ═══════════════════════════════════════════════════════════════════════════ */

.gr-root {
    position: fixed; inset: 0; z-index: 10010;
    display: flex; flex-direction: column;
    color: #e8fbff; font-family: 'Orbitron', sans-serif;
    background: #03070d;
    animation: gr-in 0.28s ease-out;
    -webkit-tap-highlight-color: transparent;
    user-select: none; -webkit-user-select: none;
}
.gr-root.gr-out { animation: gr-out 0.26s ease-in forwards; pointer-events: none; }
/* Garaj açıkken alttaki lobi boyanmasın */
body.garage-open .main-screen-wrapper { visibility: hidden; }

.gr-bg {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 60% 70% at 28% 55%, rgba(0, 160, 255, 0.16), transparent 70%),
        linear-gradient(rgba(0, 234, 255, 0.05) 1px, transparent 1px) 0 0 / 36px 36px,
        linear-gradient(90deg, rgba(0, 234, 255, 0.05) 1px, transparent 1px) 0 0 / 36px 36px,
        linear-gradient(180deg, #050b14, #02050a);
}

/* ── Üst çubuk ─────────────────────────────────────────────────────────── */
.gr-top {
    position: relative; z-index: 2; flex: none;
    display: flex; align-items: center; gap: 12px;
    padding: max(8px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 6px max(14px, env(safe-area-inset-left));
}
.gr-back {
    width: 40px; height: 40px; flex: none; border-radius: 12px; cursor: pointer;
    color: #e8fbff; background: rgba(0, 30, 50, 0.7); border: 1px solid rgba(0, 234, 255, 0.35);
    font-size: 16px;
}
.gr-back:active { transform: scale(0.94); }
.gr-title { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.gr-title span { font-size: 10px; letter-spacing: 3px; color: rgba(0, 234, 255, 0.75); }
.gr-title b { font-size: clamp(15px, 4.4vh, 22px); letter-spacing: 2px; color: #fff; text-shadow: 0 0 12px rgba(0, 234, 255, 0.5); }
.gr-money {
    margin-left: auto; display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px;
    font-size: 15px; color: var(--crystal, #7ff6ff);
    border: 1px solid rgba(127, 246, 255, 0.6); border-radius: 18px; background: rgba(0, 0, 0, 0.45);
}

/* ── Gövde ─────────────────────────────────────────────────────────────── */
.gr-main {
    position: relative; z-index: 1; flex: 1; min-height: 0;
    display: grid; grid-template-columns: 44% 1fr; gap: 12px;
    padding: 0 max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
.gr-stage { position: relative; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gr-pad { /* ışıklı iniş pisti */
    position: absolute; left: 50%; top: 52%; width: 78%; aspect-ratio: 2.4; transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 234, 255, 0.22), rgba(0, 120, 255, 0.06) 55%, transparent 70%);
    border: 1px solid rgba(0, 234, 255, 0.25);
}
.gr-ship {
    position: relative; width: 100%; flex: 1; min-height: 0;
    animation: gr-float 3.4s ease-in-out infinite; will-change: transform;
}
.gr-stage.installing .gr-ship { animation: gr-install 0.55s cubic-bezier(.2, 1.6, .4, 1); }
.gr-sparks { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; }
.gr-sparks i {
    position: absolute; width: 5px; height: 5px; border-radius: 50%;
    background: #bff9ff; box-shadow: 0 0 8px #33eaff;
    animation: gr-spark 0.7s ease-out forwards;
}
.gr-power { display: flex; align-items: center; gap: 8px; width: 86%; font-size: 10px; letter-spacing: 2px; color: rgba(232, 251, 255, 0.7); flex: none; }
.gr-power-bar { flex: 1; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.gr-power-bar i { display: block; height: 100%; background: linear-gradient(90deg, #00eaff, #b98cff); transition: width 0.4s ease; }
.gr-power b { font-size: 12px; color: #fff; }
.gr-hint {
    margin-top: 6px; flex: none; text-align: center; font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
    font-size: 11px; color: rgba(232, 251, 255, 0.5);
}

/* ── Parça yuvaları ────────────────────────────────────────────────────── */
.gr-slots { min-height: 0; display: flex; flex-direction: column; gap: 7px; overflow-y: auto; }
.gr-slot {
    flex: 1 1 0; min-height: 50px; max-height: 84px;
    display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px;
    background: linear-gradient(90deg, rgba(0, 30, 52, 0.92), rgba(0, 14, 26, 0.92));
    border: 1px solid rgba(0, 234, 255, 0.18); border-radius: 12px;
    animation: gr-row 0.35s ease-out both;
}
.gr-slot:nth-child(2) { animation-delay: 0.04s; } .gr-slot:nth-child(3) { animation-delay: 0.08s; }
.gr-slot:nth-child(4) { animation-delay: 0.12s; } .gr-slot:nth-child(5) { animation-delay: 0.16s; }
.gr-slot.flash { animation: gr-flash 0.6s ease-out; }
.gr-slot.shake { animation: gr-shake 0.35s; }
.gr-slot.max { border-color: rgba(255, 215, 0, 0.35); }
.gr-ic {
    width: 40px; height: 40px; flex: none; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    color: #33eaff; background: rgba(0, 234, 255, 0.08); border: 1px solid rgba(0, 234, 255, 0.25);
}
.gr-slot[data-slot="nitro"] .gr-ic { color: #ff9a3c; border-color: rgba(255, 154, 60, 0.35); background: rgba(255, 154, 60, 0.08); }
.gr-slot.max .gr-ic { color: #ffd700; border-color: rgba(255, 215, 0, 0.4); }
.gr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gr-slot-name { font-size: 12px; font-weight: 900; letter-spacing: 1.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-fx { font-family: 'Segoe UI', Roboto, system-ui, sans-serif; font-size: 11.5px; color: rgba(232, 251, 255, 0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-fx b { color: #3dff8f; font-weight: 700; }
.gr-fx em { font-style: normal; color: rgba(61, 255, 143, 0.6); }
.gr-pips { display: flex; gap: 4px; }
.gr-pips span { width: 18px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
.gr-pips span.on { background: linear-gradient(90deg, #00eaff, #7ff6ff); box-shadow: 0 0 6px rgba(0, 234, 255, 0.6); }
.gr-slot.max .gr-pips span.on { background: #ffd700; box-shadow: 0 0 6px rgba(255, 215, 0, 0.6); }
.gr-buy {
    flex: none; min-width: 104px; height: 40px; padding: 0 12px; border-radius: 10px; cursor: pointer;
    font-family: 'Orbitron', sans-serif; font-size: 12.5px; font-weight: 900; letter-spacing: 0.5px;
    color: #021018; background: linear-gradient(135deg, #00eaff, #0090ff); border: none;
    box-shadow: 0 0 14px rgba(0, 200, 255, 0.35);
    display: flex; align-items: center; justify-content: center; gap: 5px;
    transition: transform 0.12s, box-shadow 0.2s;
}
.gr-buy .crystal-ic { filter: none; background: linear-gradient(135deg, #ffffff, #1b3a66); -webkit-background-clip: text; background-clip: text; }
.gr-buy:active:not(:disabled) { transform: scale(0.95); }
.gr-buy.poor { color: rgba(232, 251, 255, 0.55); background: rgba(255, 255, 255, 0.07); box-shadow: none; border: 1px solid rgba(255, 80, 110, 0.35); }
.gr-buy.poor .crystal-ic { background: linear-gradient(135deg, #f0ffff, #6ff3ff 42%, #b98cff); -webkit-background-clip: text; background-clip: text; }
.gr-buy:disabled { color: #ffd700; background: rgba(255, 215, 0, 0.08); border: 1px solid rgba(255, 215, 0, 0.35); box-shadow: none; cursor: default; }

.gr-toast {
    position: absolute; left: 50%; top: max(10px, env(safe-area-inset-top)); z-index: 5;
    transform: translate(-50%, -20px); opacity: 0; pointer-events: none;
    padding: 8px 18px; border-radius: 20px; font-size: 12px; letter-spacing: 1px;
    color: #021018; background: #3dff8f; box-shadow: 0 0 18px rgba(61, 255, 143, 0.5);
    transition: transform 0.25s, opacity 0.25s;
}
.gr-toast.show { transform: translate(-50%, 0); opacity: 1; }
.gr-toast.bad { color: #fff; background: #ff3366; box-shadow: 0 0 18px rgba(255, 51, 102, 0.5); }

/* ── Kısa ekran (yatay telefon) ────────────────────────────────────────── */
@media (max-height: 430px) {
    .gr-top { padding-top: max(5px, env(safe-area-inset-top)); padding-bottom: 4px; }
    .gr-back { width: 34px; height: 34px; }
    .gr-money { height: 30px; font-size: 13px; }
    .gr-slots { gap: 5px; }
    .gr-slot { min-height: 0; padding: 3px 6px 3px 4px; gap: 8px; border-radius: 10px; }
    .gr-ic { width: 32px; height: 32px; font-size: 14px; }
    .gr-slot-name { font-size: 10.5px; }
    .gr-fx { font-size: 10px; }
    .gr-pips span { width: 14px; height: 4px; }
    .gr-buy { height: 32px; min-width: 88px; font-size: 11px; }
    .gr-hint { display: none; }
}
/* Dik/dar ekran: gemi üstte, yuvalar altta */
@media (max-width: 620px) and (orientation: portrait) {
    .gr-main { grid-template-columns: 1fr; grid-template-rows: 38% 1fr; }
}

/* ── Hangar kartındaki garaj düğmesi (alt satırda, durumun yanında) ────── */
.owned-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; flex-wrap: nowrap; }
.owned-row .garage-badge { max-width: 100%; justify-content: center; white-space: nowrap; overflow: hidden; }
@media (max-height: 430px) { .owned-row .garage-badge { padding: 4px 6px; gap: 4px; font-size: 8px; } }
.garage-badge {
    position: relative; z-index: 10; flex: none;
    display: flex; align-items: center; gap: 5px;
    padding: 5px 8px; border: none; border-radius: 8px; cursor: pointer;
    font-family: 'Orbitron', sans-serif; font-size: 9px; font-weight: bold; letter-spacing: 0.5px;
    color: #021018; background: linear-gradient(135deg, #7ff6ff, #3aa0ff);
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.6);
}
.garage-badge b { font-weight: 900; opacity: 0.75; }
.garage-badge.can-up { animation: gr-badge 1.6s ease-in-out infinite; }

@keyframes gr-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes gr-out { to { opacity: 0; transform: scale(1.03); } }
@keyframes gr-float { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(5px); } }
@keyframes gr-install { 0% { transform: scale(1); } 35% { transform: scale(1.09); } 100% { transform: scale(1); } }
@keyframes gr-spark { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; } }
@keyframes gr-row { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* yatay kayma ekran kenarından taşıyordu */
@keyframes gr-flash { 0% { background: rgba(61, 255, 143, 0.35); border-color: #3dff8f; } 100% { } }
@keyframes gr-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes gr-badge { 0%, 100% { box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.6); } 50% { box-shadow: 0 0 14px rgba(127, 246, 255, 0.9); } }

/* ═══ Faz D: parça seçimi (alternatifler + ★ imza) ═══════════════════════ */
.gr-fx .pos { color: #3dff8f; }
.gr-fx .neg, .gr-totals .neg { color: #ff5c7a; }
.gr-totals .pos { color: #3dff8f; }
.gr-fx em { color: rgba(232, 251, 255, 0.45); font-style: normal; }
.gr-totals {
    margin-top: 5px; flex: none; text-align: center; max-width: 92%;
    font-family: 'Segoe UI', Roboto, system-ui, sans-serif; font-size: 11.5px; line-height: 1.35;
    color: rgba(232, 251, 255, 0.6);
}
.gr-slot-name small { font-size: 0.82em; letter-spacing: 0.5px; color: var(--crystal, #7ff6ff); font-weight: 700; }
.gr-slot.sig { border-color: rgba(255, 210, 107, 0.55); box-shadow: inset 0 0 14px rgba(255, 210, 107, 0.12); }
.gr-slot.sig .gr-slot-name small { color: #ffd36b; }
.gr-swap {
    flex: none; width: 54px; height: 40px; border-radius: 10px; cursor: pointer; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    font-family: 'Orbitron', sans-serif; font-size: 7.5px; letter-spacing: 0.5px; font-weight: 700;
    color: var(--crystal, #7ff6ff); background: rgba(0, 234, 255, 0.07); border: 1px solid rgba(127, 246, 255, 0.35);
}
.gr-swap i { font-size: 13px; }
.gr-swap:active { transform: scale(0.95); }
.gr-swap.has-sig::after { /* bu yuvada geminin imza parçası var */
    content: '★'; position: absolute; top: -6px; right: -5px; font-size: 12px; color: #ffd36b;
    text-shadow: 0 0 6px rgba(255, 211, 107, 0.8);
}

.gr-slots.picking { gap: 6px; }
.gr-pick-head {
    flex: none; display: flex; align-items: center; gap: 9px; padding: 2px 2px 4px;
    font-size: 13px; letter-spacing: 1.5px; color: #fff;
}
.gr-pick-head > i { color: #33eaff; }
.gr-pick-back {
    width: 34px; height: 34px; border-radius: 10px; cursor: pointer; color: #e8fbff;
    background: rgba(0, 30, 50, 0.7); border: 1px solid rgba(0, 234, 255, 0.35);
}
.gr-pick-lv { margin-left: auto; font-size: 11px; color: rgba(232, 251, 255, 0.6); }
.gr-opt {
    flex: 1 1 0; min-height: 46px; max-height: 90px;
    display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px;
    background: linear-gradient(90deg, rgba(0, 30, 52, 0.92), rgba(0, 14, 26, 0.92));
    border: 1px solid rgba(0, 234, 255, 0.18); border-radius: 12px;
    animation: gr-row 0.3s ease-out both;
}
.gr-opt:nth-child(3) { animation-delay: 0.04s; } .gr-opt:nth-child(4) { animation-delay: 0.08s; } .gr-opt:nth-child(5) { animation-delay: 0.12s; }
.gr-opt.on { border-color: rgba(61, 255, 143, 0.6); box-shadow: inset 0 0 14px rgba(61, 255, 143, 0.1); }
.gr-opt.sig { border-color: rgba(255, 210, 107, 0.55); background: linear-gradient(90deg, rgba(48, 34, 0, 0.9), rgba(16, 12, 0, 0.92)); }
.gr-opt.shake { animation: gr-shake 0.35s; }
.gr-opt-info { flex: 1; min-width: 0; }
.gr-opt-name { font-size: 12px; font-weight: 900; letter-spacing: 1px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-opt-name em { font-style: normal; color: #ffd36b; font-size: 0.85em; }
.gr-opt .gr-fx { white-space: normal; line-height: 1.35; }
.gr-perlv, .gr-atlv { display: block; }
.gr-opt { overflow: hidden; }
.gr-opt-btn {
    flex: none; min-width: 96px; height: 36px; padding: 0 10px; border-radius: 10px; cursor: pointer;
    font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 900; letter-spacing: 0.5px;
    display: flex; align-items: center; justify-content: center; gap: 5px; border: none;
}
.gr-opt-btn.equip { color: #021018; background: linear-gradient(135deg, #3dff8f, #00c070); }
.gr-opt-btn.buy { color: #021018; background: linear-gradient(135deg, #00eaff, #0090ff); box-shadow: 0 0 12px rgba(0, 200, 255, 0.3); }
.gr-opt-btn.buy .crystal-ic { filter: none; background: linear-gradient(135deg, #ffffff, #1b3a66); -webkit-background-clip: text; background-clip: text; }
.gr-opt-btn.buy.poor { color: rgba(232, 251, 255, 0.55); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 80, 110, 0.35); box-shadow: none; }
.gr-opt-btn:disabled { color: #3dff8f; background: rgba(61, 255, 143, 0.08); border: 1px solid rgba(61, 255, 143, 0.4); cursor: default; }
.gr-opt-btn:active:not(:disabled) { transform: scale(0.95); }

@media (max-height: 430px) {
    .gr-swap { width: 44px; height: 32px; font-size: 6.5px; }
    .gr-swap i { font-size: 11px; }
    .gr-totals { font-size: 9.5px; margin-top: 3px; }
    .gr-pick-head { font-size: 11px; padding-bottom: 2px; }
    .gr-pick-back { width: 28px; height: 28px; }
    .gr-opt { min-height: 0; padding: 3px 6px 3px 9px; gap: 7px; }
    .gr-opt-name { font-size: 10.5px; }
    .gr-opt .gr-fx { font-size: 9.5px; }
    .gr-opt-btn { min-width: 78px; height: 30px; font-size: 9.5px; }
    .gr-opt.has-lv .gr-perlv { display: none; } /* kısa ekranda sadece mevcut seviyenin etkisi */
}

/* v2.16: Uzun yuva adları (ES CAÑÓN PRINCIPAL, RU ГЛАВНОЕ ОРУДИЕ) kısa ekranda "…" ile kesiliyordu →
   iki satıra izin ver, satır aralığı sıkı. */
.gr-slot-name { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.05 !important; word-break: normal; overflow-wrap: normal; }
@media (max-height: 430px) { .gr-slot-name { letter-spacing: 0.2px !important; font-size: 9.5px !important; } }