/* =====================================================================
   Darkastral · Kokpit arayüzü
   "Oyuncu menüye gitmez; menüler geminin kokpitinin bir parçasıdır."
   Bu dosya yalnızca görünümü tanımlar. Oyun mantığı client/*.js içindedir.
   ===================================================================== */

:root {
    /* Gövde renkleri */
    --void: #03060B;
    --hull: #07101C;
    --plate: rgba(7, 15, 27, .74);
    --plate-hi: rgba(12, 24, 40, .82);
    --line: rgba(120, 196, 228, .15);
    --line-2: rgba(120, 196, 228, .28);
    --text: #E2ECF7;
    --text-2: #B3C1D6;
    --muted: #7A8BA6;

    /* Vurgu */
    --ion: #3FE0F0;
    --ion-deep: #1593C2;
    --ion-glow: rgba(63, 224, 240, .35);
    --violet: #8E7CFF;

    /* Durum */
    --ok: #46E29A;
    --warn: #FFC548;
    --danger: #FF4D5E;
    --hp: #46E29A;
    --sh: #4AA3FF;

    /* Eski adlar (JS tarafında satır içi renklerle uyum için) */
    --amber: var(--warn);
    --teal: var(--ion);

    --display: "Saira Semi Condensed", "Arial Narrow", "Roboto Condensed", "Segoe UI", system-ui, sans-serif;
    --body: "Figtree", "Segoe UI", system-ui, sans-serif;

    --gap: 12px;
    --top-h: 46px;
    --dock-w: 268px;
    --radar-w: 248px;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: var(--void);
    color: var(--text);
    font: 14px/1.45 var(--body);
    -webkit-font-smoothing: antialiased;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: default; }
#view.is-hover { cursor: pointer; }

[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.dim { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: var(--display); font-variant-numeric: tabular-nums; }

button { font-family: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
    outline: 1px solid var(--ion);
    outline-offset: 2px;
}

kbd {
    display: inline-grid; place-items: center;
    min-width: 16px; height: 16px; padding: 0 4px;
    border: 1px solid currentColor; border-radius: 2px;
    font: 600 10px/1 var(--display);
    opacity: .6;
}

/* Küçük sistem etiketi: "Aktif görev", "Hedef kilidi" ... */
.label {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--muted);
    font: 600 10.5px/1 var(--display);
    letter-spacing: .14em;
    text-transform: uppercase;
}
.label::before {
    content: "";
    width: 5px; height: 5px;
    background: var(--ion);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    opacity: .85;
}

/* =====================================================================
   HUD iskeleti
   ===================================================================== */
.hud { position: fixed; inset: 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud > .dock, .hud > .notify, .hud > .fx-damage, .hud > .fx-dim, .hud > .tip, .hud > .console { pointer-events: none; }
.dock > *, .console > .gauge, .console > .console__bays { pointer-events: auto; }

/* Cam plaka: ince çerçeve + köşe braketleri */
.panel {
    position: absolute;
    border: 1px solid var(--line);
    border-radius: 3px;
    background:
        linear-gradient(180deg, rgba(63, 224, 240, .045), transparent 38%),
        var(--plate);
    backdrop-filter: blur(9px) saturate(1.15);
    -webkit-backdrop-filter: blur(9px) saturate(1.15);
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .03);
}
.panel::before, .panel::after {
    content: "";
    position: absolute;
    width: 9px; height: 9px;
    pointer-events: none;
    border-color: rgba(63, 224, 240, .55);
    border-style: solid;
}
.panel::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.panel::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

/* Ekran kenarı hasar efekti ve pencere karartması */
.fx-damage {
    position: absolute; inset: 0; z-index: 40;
    opacity: 0;
    box-shadow: inset 0 0 120px 10px rgba(255, 50, 70, .55);
    transition: opacity .5s ease-out;
}
.fx-damage.is-hit { opacity: var(--hit, .5); transition: opacity .06s linear; }
.fx-dim {
    position: absolute; inset: 0; z-index: 4;
    background: radial-gradient(120% 90% at 50% 50%, rgba(3, 6, 11, .1), rgba(3, 6, 11, .45));
    opacity: 0;
    transition: opacity .25s ease;
}
.fx-dim.is-on { opacity: 1; }

/* =====================================================================
   Üst konsol
   ===================================================================== */
.console-top {
    position: absolute; top: 0; left: 0; right: 0;
    height: var(--top-h);
    display: flex; align-items: center; gap: 18px;
    padding: 0 var(--gap);
    background: linear-gradient(180deg, rgba(3, 7, 13, .92), rgba(5, 11, 20, .72));
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 20;
}
/* Konsolun alt kenarındaki ince ışık çizgisi */
.console-top::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(63, 224, 240, .5) 18%, rgba(142, 124, 255, .35) 60%, transparent);
    pointer-events: none;
}

.brand { display: flex; align-items: center; gap: 9px; flex: none; }
.brand__mark { width: 22px; height: 22px; color: var(--ion); filter: drop-shadow(0 0 6px var(--ion-glow)); }
.brand__name {
    font: 700 15px/1 var(--display);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text);
}

.winbar { display: flex; align-items: stretch; height: 100%; gap: 2px; min-width: 0; }
.winbar button {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--text-2);
    font: 600 12px/1 var(--display);
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}
.winbar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; transition: filter .15s ease; }
.winbar kbd { margin-left: 2px; }
.winbar button::after {
    content: "";
    position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px;
    background: var(--ion);
    box-shadow: 0 0 10px var(--ion), 0 0 2px var(--ion);
    transform: scaleX(0);
    transition: transform .2s var(--ease);
}
.winbar button:hover { color: #fff; background: linear-gradient(180deg, transparent, rgba(63, 224, 240, .08)); }
.winbar button:hover svg { filter: drop-shadow(0 0 5px var(--ion)); color: var(--ion); }
.winbar button.is-open { color: #fff; }
.winbar button.is-open svg { color: var(--ion); }
.winbar button.is-open::after { transform: scaleX(1); }

.readouts { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }
.readout {
    display: flex; align-items: baseline; gap: 7px;
    padding: 5px 12px;
    border-left: 1px solid var(--line);
}
.readout__k { color: var(--muted); font: 600 10.5px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.readout b { font: 600 15px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--text); }
.readout--credits b { color: var(--warn); }
.readout--honor b { color: #C9BEFF; }

.sysbtns { display: flex; align-items: center; gap: 2px; flex: none; padding-left: 8px; border-left: 1px solid var(--line); }
.iconbtn {
    position: relative;
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border: 1px solid transparent; border-radius: 3px;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    transition: color .15s, border-color .15s, background-color .15s;
}
.iconbtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn:hover, .iconbtn.is-open { color: var(--ion); border-color: rgba(63, 224, 240, .35); background: rgba(63, 224, 240, .07); }
.iconbtn--danger:hover { color: var(--danger); border-color: rgba(255, 77, 94, .45); background: rgba(255, 77, 94, .08); }
.iconbtn__dot { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 6px var(--warn); }

/* =====================================================================
   Doklar
   ===================================================================== */
.dock {
    position: absolute;
    top: calc(var(--top-h) + var(--gap));
    display: flex; flex-direction: column; gap: 10px;
    max-height: calc(100% - var(--top-h) - 150px);
}
.dock--left { left: var(--gap); width: var(--dock-w); }
.dock--right { right: var(--gap); width: var(--radar-w); align-items: stretch; }
.dock .panel { position: relative; }

/* ---------- Pilot paneli ---------- */
.ship { padding: 12px 14px 12px; display: grid; gap: 8px; }
.ship__head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ship__head strong {
    font: 700 16px/1.1 var(--display);
    letter-spacing: .06em;
    text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.faction-badge {
    width: 10px; height: 10px; flex: none;
    transform: rotate(45deg);
    background: var(--muted);
    box-shadow: 0 0 8px currentColor;
}
.lvl {
    margin-left: auto; flex: none;
    padding: 3px 7px 2px;
    border: 1px solid rgba(142, 124, 255, .5);
    border-radius: 2px;
    background: rgba(142, 124, 255, .1);
    color: #CFC6FF;
    font: 700 11px/1 var(--display);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.ship__sub { margin-top: -5px; color: var(--muted); font: 500 12px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; }

/* Barlar: üstte etiket + değer, altta segmentli ince ölçek */
.bar { position: relative; height: 24px; }
.bar::before {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
    background: rgba(255, 255, 255, .06);
    border-radius: 1px;
}
.bar__fill {
    --fill: 100%;
    position: absolute; left: 0; bottom: 0;
    height: 6px; width: var(--fill);
    border-radius: 1px;
    overflow: hidden;
    transition: width .35s var(--ease);
}
/* 4px segment ızgarası */
.bar__fill::before {
    content: "";
    position: absolute; inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(3, 6, 11, .55) 5px 6px);
}
/* Yavaş akan parlama */
.bar__fill::after {
    content: "";
    position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    animation: sheen 3.8s ease-in-out infinite;
}
@keyframes sheen { 0%, 55% { transform: translateX(0); } 100% { transform: translateX(360%); } }
.bar--hp .bar__fill { background: linear-gradient(90deg, #1E9E66, var(--hp)); box-shadow: 0 0 10px rgba(70, 226, 154, .35); }
.bar--sh .bar__fill { background: linear-gradient(90deg, #2262C9, var(--sh)); box-shadow: 0 0 10px rgba(74, 163, 255, .35); }
.bar__text {
    position: absolute; left: 0; right: 0; top: 0;
    display: flex; justify-content: space-between; align-items: baseline;
    font: 600 12px/1 var(--display);
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.bar__text b { color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.bar--thin { height: 4px; }
.bar--thin::before, .bar--thin .bar__fill { height: 4px; }
.bar--thin .bar__fill::after { display: none; }

.ship.is-low .bar--hp .bar__fill { background: linear-gradient(90deg, #B3202F, var(--danger)); animation: lowPulse 1s ease-in-out infinite; }
.ship.is-low .bar--hp .bar__text span { color: #FF8F99; }
@keyframes lowPulse { 50% { opacity: .55; } }
.ship.is-hit .bar--hp .bar__fill, .ship.is-hit-sh .bar--sh .bar__fill { filter: brightness(1.9); transition: filter 0s; }

.ship__stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    margin: 2px 0 0; padding-top: 8px;
    border-top: 1px solid var(--line);
}
.ship__stats div { display: grid; gap: 3px; }
.ship__stats div + div { padding-left: 10px; border-left: 1px solid var(--line); }
.ship__stats dt { color: var(--muted); font: 600 10px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.ship__stats dd { margin: 0; font: 600 14px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }

.safe {
    margin: 0;
    padding: 5px 8px;
    border-left: 2px solid var(--ion);
    background: rgba(63, 224, 240, .07);
    color: #A6F1F8;
    font: 500 12px/1.3 var(--display);
    letter-spacing: .02em;
}

.boosts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.boosts:empty { display: none; }
.boosts li {
    display: flex; align-items: center; gap: 5px;
    padding: 2px 7px 2px 5px;
    border: 1px solid var(--line); border-radius: 2px;
    background: rgba(255, 255, 255, .03);
    font: 600 11px/1.3 var(--display); color: var(--text-2);
}
.boosts i { width: 8px; height: 8px; transform: rotate(45deg); background: var(--bc); box-shadow: 0 0 6px var(--bc); }
.boosts .b-damage { --bc: #FF8A5A; } .boosts .b-shield { --bc: var(--sh); } .boosts .b-hp { --bc: var(--hp); }
.boosts .b-xp { --bc: var(--warn); } .boosts .b-honor { --bc: var(--violet); }

.ship__flags { display: flex; flex-wrap: wrap; gap: 6px; }
.comp-flag, .cargo-flag {
    padding: 4px 9px;
    border: 1px solid var(--line); border-radius: 2px;
    background: rgba(255, 255, 255, .03);
    color: var(--text-2);
    font: 600 11.5px/1.2 var(--display); letter-spacing: .04em;
    cursor: pointer;
    transition: border-color .15s, color .15s, background-color .15s;
}
.comp-flag:hover, .cargo-flag:hover { border-color: rgba(63, 224, 240, .5); color: #fff; background: rgba(63, 224, 240, .07); }
.comp-flag.is-guard { border-color: rgba(255, 138, 90, .55); color: #FFB08A; }
.comp-flag.is-collect { border-color: rgba(63, 224, 240, .5); color: #9EEFF7; }
.cargo-flag.is-full { border-color: rgba(255, 77, 94, .6); color: #FF8F99; }

/* ---------- Görev takipçisi ---------- */
.tracker { padding: 0; display: grid; }
.tracker__head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px 6px;
    border: 0; background: none; color: inherit; text-align: left;
    cursor: pointer;
}
.tracker__total { margin-left: auto; color: var(--muted); font: 600 11px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.tracker__chev { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; transform: rotate(180deg); transition: transform .2s var(--ease); }
.tracker__head[aria-expanded="true"] .tracker__chev { transform: rotate(0); }
.tracker__head:hover .tracker__chev { stroke: var(--ion); }
.tracker__main { display: grid; gap: 6px; padding: 2px 14px 10px; }
.tracker__title { display: flex; align-items: baseline; gap: 8px; }
.tracker__title strong { font: 600 15px/1.2 var(--display); letter-spacing: .02em; }
.tracker__kind {
    flex: none;
    padding: 1px 5px;
    border: 1px solid var(--line-2); border-radius: 2px;
    color: var(--text-2);
    font: 600 9.5px/1.4 var(--display); letter-spacing: .12em; text-transform: uppercase;
}
.tracker__kind.is-story { border-color: rgba(142, 124, 255, .55); color: #CFC6FF; }
.tracker__prog { display: flex; align-items: center; gap: 10px; }
.tracker__prog .bar { flex: 1; }
.tracker__prog .bar__fill { background: linear-gradient(90deg, var(--ion-deep), var(--ion)); box-shadow: 0 0 10px var(--ion-glow); }
.tracker__num { font: 600 13px/1 var(--display); font-variant-numeric: tabular-nums; }
.tracker__num span { color: var(--muted); }
.tracker__note { margin: 0; color: var(--muted); font-size: 12px; }
.tracker__empty { margin: 0; color: var(--muted); font-size: 12.5px; }

.tracker__more { list-style: none; margin: 0; padding: 8px 14px 10px; display: grid; gap: 8px; border-top: 1px solid var(--line); max-height: 220px; overflow-y: auto; scrollbar-width: thin; }
.tracker__more li { display: grid; gap: 4px; font-size: 12.5px; }
.tracker__more .row { display: flex; justify-content: space-between; gap: 8px; }
.tracker__more .row span:last-child { font: 600 12px/1.3 var(--display); font-variant-numeric: tabular-nums; color: var(--text-2); }
.tracker__more .is-done { color: var(--ok); }
.tracker__more .is-done .bar__fill { background: var(--ok); }
.tracker__more .bar__fill { background: var(--ion-deep); }
.tracker__more:not([hidden]) { animation: unfold .22s var(--ease); }
@keyframes unfold { from { opacity: 0; transform: translateY(-4px); } }

.tracker__open {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 14px;
    border: 0; border-top: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    font: 600 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
    cursor: pointer;
}
.tracker__open:hover { color: var(--ion); background: rgba(63, 224, 240, .05); }

.tracker.is-complete { animation: completeGlow 1.6s var(--ease); }
.tracker.is-complete .tracker__check { display: inline-grid; }
@keyframes completeGlow {
    0% { box-shadow: 0 0 0 1px rgba(70, 226, 154, .9), 0 0 28px rgba(70, 226, 154, .5); }
    100% { box-shadow: 0 0 0 1px transparent, 0 0 0 transparent; }
}
.tracker__check {
    display: none; place-items: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--ok); color: #03130B;
}
.tracker__check svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .5s .15s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.tracker__main.is-done strong { color: var(--ok); }

/* ---------- Filo ---------- */
.fleet { padding: 0 0 8px; }
.fleet__head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px 8px; border: 0; background: none; color: inherit; cursor: pointer; }
.fleet__head:hover .label { color: var(--ion); }
.fleet__count { margin-left: auto; color: var(--muted); font: 600 11px/1 var(--display); }
.fleet__list { list-style: none; margin: 0; padding: 0 14px; display: grid; gap: 8px; }
.fleet__list li { display: grid; grid-template-columns: 1fr; gap: 3px; }
.fleet__list .who { display: flex; justify-content: space-between; gap: 8px; font: 600 12.5px/1.2 var(--display); letter-spacing: .03em; }
.fleet__list .who span:last-child { color: var(--muted); font-weight: 500; font-size: 11px; }
.fleet__list .lead { color: var(--warn); }
.fleet__list .is-down { opacity: .45; }
.fleet__list .bar--thin + .bar--thin { margin-top: 1px; }
.fleet__list .bar--thin, .fleet__list .bar--thin::before, .fleet__list .bar--thin .bar__fill { height: 3px; }

/* ---------- Radar ---------- */
.radar { padding: 10px; display: grid; gap: 8px; }
/* Pahlı (altıgen hissi veren) tarama ekranı */
.scope {
    --cut: 14px;
    position: relative;
    padding: 1px;
    background: linear-gradient(160deg, rgba(63, 224, 240, .55), rgba(142, 124, 255, .25) 55%, rgba(63, 224, 240, .4));
    clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
#minimap {
    display: block;
    width: 100%; aspect-ratio: 3 / 2; height: auto;
    background: #020509;
    clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
    cursor: pointer;
}
/* Çok hafif dönen tarama ışını */
.scope__sweep {
    position: absolute; inset: 1px;
    pointer-events: none;
    overflow: hidden;
    clip-path: inherit;
    mix-blend-mode: screen;
}
.scope__sweep::before {
    content: "";
    position: absolute; left: 50%; top: 50%;
    width: 200%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: conic-gradient(from 0deg, rgba(63, 224, 240, .16), rgba(63, 224, 240, 0) 50deg, transparent 360deg);
    animation: sweep 5s linear infinite;
}
@keyframes sweep { to { transform: translate(-50%, -50%) rotate(360deg); } }
.hud.no-minimap .scope { display: none; }

.status {
    display: flex; align-items: center; gap: 8px;
    padding: 0 2px;
    color: var(--muted);
    font: 500 12px/1.2 var(--display);
    white-space: nowrap;
}
.status strong { color: var(--text); font: 600 13px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.status__coords { margin-left: auto; color: var(--text-2); }
.status--net { justify-content: space-between; font-size: 11.5px; }
.net-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); vertical-align: 1px; }
.pvp {
    padding: 2px 6px 1px;
    border: 1px solid rgba(255, 77, 94, .6); border-radius: 2px;
    background: rgba(255, 77, 94, .14);
    color: #FF8F99;
    font: 700 10.5px/1.2 var(--display); letter-spacing: .14em;
    animation: lowPulse 2.4s ease-in-out infinite;
}
.session {
    display: grid; grid-template-columns: repeat(4, 1fr);
    margin: 0; padding-top: 8px;
    border-top: 1px solid var(--line);
    text-align: center;
}
.session dt { color: var(--muted); font: 600 9.5px/1.4 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.session dd { margin: 0; font: 600 13px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.session div + div { border-left: 1px solid var(--line); }

/* ---------- Hedef kilidi ---------- */
.target, .notarget { padding: 11px 14px 12px; display: grid; gap: 5px; }
.target { border-color: rgba(63, 224, 240, .35); }
.target.is-hostile { border-color: rgba(255, 77, 94, .45); }
.target.is-hostile::before, .target.is-hostile::after { border-color: rgba(255, 77, 94, .8); }
.target__top { display: flex; align-items: center; justify-content: space-between; }
.target__state { color: var(--ion); font: 700 10.5px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.target.is-hostile .target__state { color: #FF8F99; }
.target.is-firing .target__state { color: var(--warn); animation: lowPulse .7s ease-in-out infinite; }
.target__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 2px; }
.target__head strong { font: 700 15px/1.2 var(--display); letter-spacing: .04em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.target.is-hostile .target__head strong { color: #FF9BA4; }
.target__head .mono { font-size: 12px; flex: none; }
.target__class { margin: -2px 0 2px; color: var(--muted); font: 500 11.5px/1.2 var(--display); letter-spacing: .06em; }
.target__row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 2px; }
.target__row span { color: var(--muted); font: 600 10px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.target__row b { font: 600 12px/1 var(--display); font-variant-numeric: tabular-nums; }
/* Kilitlenme animasyonu: dört köşe içeri kapanır */
.target__reticle { position: absolute; inset: -6px; pointer-events: none; opacity: 0; }
.target.is-locking .target__reticle {
    animation: lockOn .55s var(--ease);
    background:
        linear-gradient(var(--lc), var(--lc)) 0 0 / 14px 1.5px, linear-gradient(var(--lc), var(--lc)) 0 0 / 1.5px 14px,
        linear-gradient(var(--lc), var(--lc)) 100% 0 / 14px 1.5px, linear-gradient(var(--lc), var(--lc)) 100% 0 / 1.5px 14px,
        linear-gradient(var(--lc), var(--lc)) 0 100% / 14px 1.5px, linear-gradient(var(--lc), var(--lc)) 0 100% / 1.5px 14px,
        linear-gradient(var(--lc), var(--lc)) 100% 100% / 14px 1.5px, linear-gradient(var(--lc), var(--lc)) 100% 100% / 1.5px 14px;
    background-repeat: no-repeat;
}
.target { --lc: var(--ion); }
.target.is-hostile { --lc: var(--danger); }
@keyframes lockOn {
    0% { opacity: 0; inset: -22px; }
    60% { opacity: 1; inset: -4px; }
    100% { opacity: 0; inset: -4px; }
}

.btn-attack {
    margin-top: 6px;
    padding: 9px;
    border: 1px solid rgba(255, 77, 94, .55);
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(255, 77, 94, .16), rgba(255, 77, 94, .06));
    color: #FFB3BA;
    font: 700 13px/1 var(--display);
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s, box-shadow .15s;
}
.btn-attack:hover { background: rgba(255, 77, 94, .22); box-shadow: 0 0 14px -2px rgba(255, 77, 94, .5); }
.btn-attack.is-on { background: var(--danger); color: #1B0306; border-color: var(--danger); box-shadow: 0 0 20px rgba(255, 77, 94, .5); }
.btn-attack kbd { margin-left: 6px; }
.btn-attack[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

.notarget { color: var(--muted); }
.notarget p { margin: 4px 0 0; color: var(--text-2); font: 600 15px/1.2 var(--display); letter-spacing: .2em; text-transform: uppercase; }
.notarget::before, .notarget::after { border-color: rgba(120, 196, 228, .3); }
#target:not([hidden]) + .notarget { display: none; }

.btn-ghost {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    background: transparent;
    color: var(--text);
    font: 600 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.btn-ghost:hover { border-color: rgba(63, 224, 240, .5); background: rgba(63, 224, 240, .06); }

/* =====================================================================
   Bildirimler
   ===================================================================== */
.toast { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.notify {
    position: absolute;
    top: calc(var(--top-h) + var(--gap));
    right: calc(var(--radar-w) + var(--gap) * 2);
    width: 290px;
    display: flex; flex-direction: column; gap: 6px;
    z-index: 25;
}
.note {
    --nc: var(--ion);
    position: relative;
    display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center;
    padding: 9px 12px 9px 10px;
    border: 1px solid color-mix(in srgb, var(--nc) 45%, transparent);
    border-left: 2px solid var(--nc);
    border-radius: 2px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--nc) 14%, transparent), rgba(5, 10, 18, .88) 60%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 12px 24px -16px rgba(0, 0, 0, .9);
    animation: noteIn .28s var(--ease);
}
.note.is-out { animation: noteOut .3s ease-in forwards; }
.note svg { width: 20px; height: 20px; fill: none; stroke: var(--nc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.note b { display: block; color: var(--nc); font: 700 11px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.note span { display: block; font: 500 13px/1.3 var(--display); color: var(--text); }
.note--ok { --nc: var(--ok); }
.note--warn { --nc: var(--warn); }
.note--danger { --nc: var(--danger); }
.note--nav { --nc: var(--violet); }
@keyframes noteIn { from { opacity: 0; transform: translateX(16px); } }
@keyframes noteOut { to { opacity: 0; transform: translateX(16px); } }

/* =====================================================================
   Alt konsol: gövde ölçeği · silah yuvaları · kalkan ölçeği
   ===================================================================== */
.console {
    position: absolute; left: 50%; bottom: 10px;
    transform: translateX(-50%);
    display: flex; align-items: flex-end; gap: 4px;
    z-index: 3;
}
.console__bays {
    position: relative;
    display: flex; align-items: flex-end; gap: 10px;
    padding: 8px 10px 8px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background:
        linear-gradient(180deg, rgba(63, 224, 240, .05), transparent 50%),
        rgba(5, 11, 20, .78);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%, 0 12px);
}
.console__bays::before {
    content: "";
    position: absolute; left: 24px; right: 24px; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--ion), transparent);
    opacity: .6;
}

.gauge { position: relative; width: 112px; height: 104px; display: flex; align-items: flex-end; }
.gauge svg { position: absolute; bottom: 0; width: 64px; height: 104px; overflow: visible; fill: none; }
.gauge--hull svg { right: 0; }
.gauge--shield svg { left: 0; }
.gauge__track { stroke: rgba(255, 255, 255, .07); stroke-width: 7; }
.gauge__ticks { stroke: var(--line-2); stroke-width: 4; stroke-dasharray: 1 5; }
.gauge__fill {
    stroke-width: 7;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .4s var(--ease), stroke .3s;
}
.gauge--hull .gauge__fill { stroke: var(--hp); filter: drop-shadow(0 0 5px rgba(70, 226, 154, .55)); }
.gauge--shield .gauge__fill { stroke: var(--sh); filter: drop-shadow(0 0 5px rgba(74, 163, 255, .55)); }
.gauge.is-low .gauge__fill { stroke: var(--danger); filter: drop-shadow(0 0 6px rgba(255, 77, 94, .7)); animation: lowPulse 1s infinite; }
.gauge.is-hit .gauge__fill { filter: brightness(2) drop-shadow(0 0 8px #fff); transition: none; }
.gauge__read { position: relative; display: grid; gap: 2px; padding-bottom: 6px; }
.gauge--hull .gauge__read { margin-right: auto; padding-left: 2px; text-align: left; }
.gauge--shield .gauge__read { margin-left: auto; padding-right: 2px; text-align: right; }
.gauge__read b { font: 700 20px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.gauge--hull .gauge__read b { color: #B6F5D6; }
.gauge--shield .gauge__read b { color: #BCDCFF; }
.gauge.is-low .gauge__read b { color: #FF8F99; }
.gauge__read span { color: var(--muted); font: 600 10px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; }

/* Silah yuvaları */
.hotbar { display: flex; align-items: flex-end; gap: 5px; }
.hotbar--tech { padding-left: 10px; border-left: 1px solid var(--line); }
.slot {
    --slot-color: var(--ion);
    position: relative;
    width: 58px; height: 62px;
    display: grid; justify-items: center; align-content: end; gap: 2px;
    padding: 0 0 6px;
    border: 1px solid var(--line-2); border-radius: 2px;
    background:
        radial-gradient(70% 55% at 50% 38%, color-mix(in srgb, var(--slot-color) 14%, transparent), transparent 70%),
        rgba(3, 7, 13, .7);
    color: var(--text);
    font: 600 11px/1 var(--display);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s, transform .1s;
}
.slot:hover { border-color: color-mix(in srgb, var(--slot-color) 70%, transparent); box-shadow: 0 0 12px -3px var(--slot-color); }
.slot:active { transform: translateY(1px); }
.slot.is-active {
    border-color: var(--slot-color);
    box-shadow: inset 0 0 0 1px var(--slot-color), 0 0 16px -2px var(--slot-color);
}
.slot.is-active::after {
    content: "";
    position: absolute; left: 8px; right: 8px; top: 0; height: 2px;
    background: var(--slot-color);
    box-shadow: 0 0 8px var(--slot-color);
    animation: lowPulse 1.6s ease-in-out infinite;
}
.slot.is-empty { opacity: .42; filter: grayscale(.6); }
.slot__key { position: absolute; top: 4px; left: 5px; color: var(--muted); font: 700 10px/1 var(--display); }
.slot.is-active .slot__key { color: var(--slot-color); }
.slot__icon {
    width: 22px; height: 22px;
    margin-bottom: 2px;
    background: var(--slot-color);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    filter: drop-shadow(0 0 4px var(--slot-color));
}
.slot__name { font-size: 9.5px; color: var(--text-2); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; max-width: 52px; overflow: hidden; text-overflow: ellipsis; }
.slot__count { font-size: 12px; font-variant-numeric: tabular-nums; }
/* Bekleme: aşağıdan yukarı inen perde, üst kenarında ışık çizgisi */
.slot__cd {
    --cd: 0%;
    position: absolute; inset: auto 0 0 0;
    height: var(--cd);
    background: linear-gradient(180deg, rgba(63, 224, 240, .22), rgba(3, 7, 13, .78) 3px);
    border-top: 1px solid rgba(63, 224, 240, .7);
    pointer-events: none;
    transition: height .12s linear;
}
.slot__cd[style*="--cd: 0%"] { border-top-color: transparent; }
.slot-sep { width: 1px; align-self: stretch; margin: 6px 2px; background: var(--line); }

/* Yuva ikonları (özgün, sade geometrik çizimler) */
:root {
    --ico-x1: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23fff%27%3E%3Crect x=%2710.5%27 y=%272%27 width=%273%27 height=%2720%27 rx=%271.5%27/%3E%3C/svg%3E");
    --ico-x2: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23fff%27%3E%3Crect x=%276.5%27 y=%272%27 width=%273%27 height=%2720%27 rx=%271.5%27/%3E%3Crect x=%2714.5%27 y=%272%27 width=%273%27 height=%2720%27 rx=%271.5%27/%3E%3C/svg%3E");
    --ico-x3: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23fff%27%3E%3Crect x=%274%27 y=%273%27 width=%273%27 height=%2718%27 rx=%271.5%27/%3E%3Crect x=%2710.5%27 y=%271%27 width=%273%27 height=%2722%27 rx=%271.5%27/%3E%3Crect x=%2717%27 y=%273%27 width=%273%27 height=%2718%27 rx=%271.5%27/%3E%3C/svg%3E");
    --ico-x4: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23fff%27%3E%3Cpath d=%27M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z%27/%3E%3C/svg%3E");
    --ico-r1: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23fff%27%3E%3Cpath d=%27M12 1.5c2.8 2.6 3.8 6.4 3.8 10.2l2.2 4.3v3h-3.2l-.8 2.5h-4l-.8-2.5H6v-3l2.2-4.3C8.2 7.9 9.2 4.1 12 1.5z%27/%3E%3C/svg%3E");
    --ico-r2: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23fff%27%3E%3Cpath d=%27M12 .5c3.4 2.8 4.4 7 4.4 11L21 16.5V20h-5l-1 3H9l-1-3H3v-3.5l4.6-5C7.6 7.5 8.6 3.3 12 .5zM12 6a1.6 1.6 0 100 3.2A1.6 1.6 0 0012 6z%27 fill-rule=%27evenodd%27/%3E%3C/svg%3E");
    --ico-tsh: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23fff%27%3E%3Cpath d=%27M12 1.5l9 3.8v6.2c0 5.6-3.8 9.4-9 11.5-5.2-2.1-9-5.9-9-11.5V5.3z%27/%3E%3C/svg%3E");
    --ico-tsp: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23fff%27%3E%3Cpath d=%27M2 4h4.5l8 8-8 8H2l8-8zM10 4h4.5l8 8-8 8H10l8-8z%27/%3E%3C/svg%3E");
    --ico-trp: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23fff%27%3E%3Cpath d=%27M9 2h6v7h7v6h-7v7H9v-7H2V9h7z%27/%3E%3C/svg%3E");
    --ico-ability: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23fff%27%3E%3Cpath d=%27M14 1L4 14h6.5L9 23l11-13.5h-6.8z%27/%3E%3C/svg%3E");
    --ico-mine: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23fff%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%276%27/%3E%3Cpath d=%27M11 0h2v5h-2zM11 19h2v5h-2zM0 11h5v2H0zM19 11h5v2h-5zM3.5 5L5 3.5 8.5 7 7 8.5zM15.5 17l1.5-1.5 3.5 3.5-1.5 1.5zM3.5 19L7 15.5 8.5 17 5 20.5zM15.5 7L19 3.5 20.5 5 17 8.5z%27/%3E%3C/svg%3E");
    --ico-ore: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23fff%27%3E%3Cpath d=%27M12 1l7 7-7 15L5 8z%27/%3E%3C/svg%3E");
    --ico-fuel: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23fff%27%3E%3Cpath d=%27M12 1.5c3.5 5 7 8.4 7 12.5a7 7 0 01-14 0c0-4.1 3.5-7.5 7-12.5z%27/%3E%3C/svg%3E");
    --ico-key: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23fff%27%3E%3Cpath d=%27M8 3a6 6 0 015.6 8.1L22 19.5V23h-4v-2.5h-2.5V18h-2.4l-1.3-1.3A6 6 0 118 3zm-1 4a2 2 0 100 4 2 2 0 000-4z%27 fill-rule=%27evenodd%27/%3E%3C/svg%3E");
    --ico-drone: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23fff%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%274%27/%3E%3Ccircle cx=%274%27 cy=%274%27 r=%273%27/%3E%3Ccircle cx=%2720%27 cy=%274%27 r=%273%27/%3E%3Ccircle cx=%274%27 cy=%2720%27 r=%273%27/%3E%3Ccircle cx=%2720%27 cy=%2720%27 r=%273%27/%3E%3Cpath d=%27M5 6.5L6.5 5 19 17.5 17.5 19zM17.5 5L19 6.5 6.5 19 5 17.5z%27/%3E%3C/svg%3E");
    --ico-cpu: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23fff%27%3E%3Cpath d=%27M6 6h12v12H6z%27/%3E%3Cpath d=%27M8 1h2v4H8zM14 1h2v4h-2zM8 19h2v4H8zM14 19h2v4h-2zM1 8h4v2H1zM1 14h4v2H1zM19 8h4v2h-4zM19 14h4v2h-4z%27/%3E%3C/svg%3E");
    --ico-kuvars: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23fff%27%3E%3Cpath d=%27M12 1l9 6v10l-9 6-9-6V7z%27/%3E%3C/svg%3E");
}
.slot[data-code="x1"] { --icon: var(--ico-x1); }
.slot[data-code="x2"] { --icon: var(--ico-x2); }
.slot[data-code="x3"] { --icon: var(--ico-x3); }
.slot[data-code="x4"] { --icon: var(--ico-x4); }
.slot[data-code="r1"] { --icon: var(--ico-r1); }
.slot[data-code="r2"] { --icon: var(--ico-r2); }
.slot[data-code="tsh"] { --icon: var(--ico-tsh); }
.slot[data-code="tsp"] { --icon: var(--ico-tsp); }
.slot[data-code="trp"] { --icon: var(--ico-trp); }
.slot[data-code="ability"] { --icon: var(--ico-ability); }
.slot[data-code="mine"] { --icon: var(--ico-mine); }

/* Uçuşan hasar sayıları */
.floaters { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.floater {
    position: absolute; bottom: 100%;
    font: 700 18px/1 var(--display);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    text-shadow: 0 0 10px currentColor, 0 1px 2px #000;
    white-space: nowrap;
    animation: floatUp 1.1s var(--ease) forwards;
}
.floater--hull { left: 26px; color: #FF6B78; }
.floater--sh { right: 26px; color: #8EC4FF; font-size: 15px; }
.floater small { font-size: 10px; letter-spacing: .14em; margin-left: 4px; }
@keyframes floatUp {
    0% { opacity: 0; transform: translateY(6px) scale(.9); }
    15% { opacity: 1; transform: translateY(-4px) scale(1.05); }
    100% { opacity: 0; transform: translateY(-46px) scale(1); }
}

.gate-hud {
    position: absolute; top: calc(var(--top-h) + 14px); left: 50%;
    transform: translateX(-50%);
    padding: 8px 18px;
    border: 1px solid rgba(255, 197, 72, .55);
    border-radius: 2px;
    background: rgba(28, 19, 4, .8);
    color: var(--warn);
    font: 700 13px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase;
    white-space: nowrap;
}

.jump-hint {
    position: absolute; left: 50%; bottom: 140px;
    transform: translateX(-50%);
    padding: 9px 18px;
    border: 1px solid rgba(142, 124, 255, .7);
    border-radius: 2px;
    background: rgba(18, 14, 42, .82);
    color: #D8D0FF;
    font: 700 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase;
    cursor: pointer;
    animation: hintPulse 1.4s ease-in-out infinite;
}
.jump-hint kbd { margin-left: 6px; }
@keyframes hintPulse { 50% { box-shadow: 0 0 22px rgba(142, 124, 255, .55); } }

/* =====================================================================
   İletişim (sohbet)
   ===================================================================== */
.chat {
    position: absolute; left: var(--gap); bottom: 10px;
    width: clamp(240px, calc(50% - 520px), 340px);
    display: grid; gap: 4px;
    z-index: 3;
}
.chat__bar { display: flex; align-items: center; gap: 6px; padding: 0 2px; }
.chat__bar .label { margin-right: auto; }
.chat__tool {
    padding: 3px 8px;
    border: 1px solid var(--line); border-radius: 2px;
    background: rgba(3, 7, 13, .6);
    color: var(--muted);
    font: 600 10.5px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase;
    cursor: pointer;
}
.chat__tool:hover, .chat__tool[aria-pressed="true"] { color: var(--ion); border-color: rgba(63, 224, 240, .45); }
.chat__tool--icon { display: grid; place-items: center; width: 24px; height: 21px; padding: 0; }
.chat__tool--icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s; }
.chat.is-grown .chat__tool--icon svg { transform: rotate(180deg); }

.chat__log {
    list-style: none; margin: 0; padding: 8px 10px;
    max-height: 150px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px;
    border-left: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(3, 7, 13, .55), transparent);
    font-size: 13px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
    scrollbar-width: none;
    mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
    transition: max-height .25s var(--ease);
}
.chat.is-grown .chat__log, .chat:focus-within .chat__log { max-height: 300px; }
.chat__log li { padding: 1px 0; overflow-wrap: anywhere; line-height: 1.4; }
.chat__log .from { color: var(--ion); font: 600 13px/1.4 var(--display); letter-spacing: .03em; margin-right: 6px; }
.chat__log .from::after { content: ":"; opacity: .6; }
.chat__log .sys { color: var(--muted); font-size: 12.5px; }
.chat__log .sys::before { content: "SİSTEM"; margin-right: 6px; color: var(--violet); font: 700 9.5px/1 var(--display); letter-spacing: .14em; }
.chat__log .gain { color: var(--warn); font: 600 12.5px/1.4 var(--display); letter-spacing: .02em; }
.chat__log .sys.admin { color: #FF9CA5; font-weight: 600; }
.chat__log .ch-clan .from, .chat__log .ch-clan .chan { color: var(--warn); }
.chat__log .ch-group .from, .chat__log .ch-group .chan { color: var(--ok); }
.chat__log .chan { margin-right: 5px; font: 700 9.5px/1 var(--display); letter-spacing: .14em; opacity: .9; }
.chat.only-sys .chat__log li:not(.sys) { display: none; }

.chat__form { display: grid; gap: 4px; }
.chat__tabs { display: flex; gap: 2px; order: 2; }
.chat__tabs button {
    padding: 3px 10px 2px;
    border: 0; border-bottom: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    font: 600 10.5px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase;
    cursor: pointer;
}
.chat__tabs button:hover { color: var(--text); }
.chat__tabs button.is-active { color: var(--ion); border-bottom-color: var(--ion); }
.chat__tabs button[data-ch="clan"].is-active { color: var(--warn); border-bottom-color: var(--warn); }
.chat__tabs button[data-ch="group"].is-active { color: var(--ok); border-bottom-color: var(--ok); }
.chat__form input {
    width: 100%; height: 32px; padding: 0 10px;
    border: 1px solid var(--line); border-radius: 2px;
    background: rgba(3, 7, 13, .72); color: var(--text);
    font: 13px var(--body);
    user-select: text; -webkit-user-select: text;
}
.chat__form input::placeholder { color: var(--muted); }
.chat__form input:focus { outline: none; border-color: rgba(63, 224, 240, .6); box-shadow: 0 0 0 1px rgba(63, 224, 240, .15), 0 0 14px -6px var(--ion); }
.hud.no-chat .chat__log, .hud.no-chat .chat__bar { display: none; }

/* =====================================================================
   Sistem pencereleri (holografik terminal)
   ===================================================================== */
.win {
    top: 120px; left: 300px;
    width: 320px;
    max-height: calc(100vh - var(--top-h) - 150px);
    overflow-y: auto;
    padding: 0 0 14px;
    z-index: 6;
    border-color: rgba(63, 224, 240, .28);
    background:
        linear-gradient(180deg, rgba(63, 224, 240, .06), transparent 90px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 3px),
        rgba(6, 13, 24, .88);
    scrollbar-width: thin;
    scrollbar-color: rgba(63, 224, 240, .3) transparent;
    animation: winIn .22s var(--ease);
}
.win--wide { width: 440px; }
.win--ship { width: 380px; }
.win--cargo { width: 360px; }
@keyframes winIn { from { opacity: 0; transform: translateY(8px) scale(.985); filter: brightness(1.4); } }

.win__head {
    position: sticky; top: 0; z-index: 1;
    display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px;
    padding: 10px 10px 9px 14px; margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
    background: rgba(6, 13, 24, .94);
    cursor: move; touch-action: none;
}
.win__head::after {
    content: "";
    position: absolute; left: 14px; bottom: -1px; width: 48px; height: 1px;
    background: var(--ion); box-shadow: 0 0 8px var(--ion);
}
.win__sys {
    grid-column: 1; grid-row: 1;
    color: var(--ion);
    font: 600 9.5px/1.2 var(--display); letter-spacing: .24em; text-transform: uppercase;
    opacity: .85;
}
.win__head strong { grid-column: 1; grid-row: 2; font: 700 17px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.win__close {
    grid-column: 2; grid-row: 1 / span 2; align-self: center;
    width: 28px; height: 28px;
    border: 1px solid transparent; border-radius: 2px;
    background: none; color: var(--muted);
    font-size: 18px; line-height: 1;
    cursor: pointer;
}
.win__close:hover { border-color: rgba(255, 77, 94, .45); background: rgba(255, 77, 94, .08); color: #FF9CA5; }

.win__grid { display: grid; grid-template-columns: 1fr auto; gap: 7px 14px; margin: 0; padding: 0 14px; font-size: 13px; }
.win__grid dt { color: var(--muted); }
.win__grid dd { margin: 0; text-align: right; font: 600 13.5px/1.3 var(--display); font-variant-numeric: tabular-nums; }
.win__grid .gain { color: var(--warn); font-size: 11.5px; margin-left: 5px; }
.win__grid .sep { grid-column: 1 / -1; height: 1px; margin: 3px 0; background: var(--line); }
.win__note { margin: 12px 14px 0; font-size: 12px; line-height: 1.5; }

/* ---------- Gemi sistemi ---------- */
.shiphero { margin: -12px 0 12px; padding: 0 14px 12px; border-bottom: 1px solid var(--line); }
.shiphero__stage {
    position: relative;
    margin: 0 -14px;
    background:
        radial-gradient(50% 60% at 50% 55%, rgba(63, 224, 240, .1), transparent 70%),
        linear-gradient(rgba(63, 224, 240, .07) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(90deg, rgba(63, 224, 240, .07) 1px, transparent 1px) 0 0 / 24px 24px;
}
.shiphero__stage::after {
    content: "";
    position: absolute; left: 50%; bottom: 14px;
    width: 46%; height: 18px;
    transform: translateX(-50%);
    border: 1px solid rgba(63, 224, 240, .35);
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(63, 224, 240, .2);
}
#ck-ship-canvas { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.shiphero__name { margin: 4px 0 10px; text-align: center; font: 700 20px/1 var(--display); letter-spacing: .3em; text-transform: uppercase; }
.slots { display: grid; gap: 8px; }
.slots__row { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 8px; }
.slots__row > span { color: var(--muted); font: 600 10px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.slots__cells { display: flex; flex-wrap: wrap; gap: 4px; }
.cell {
    --cc: var(--ion);
    position: relative;
    display: grid; place-items: center;
    min-width: 30px; height: 30px; padding: 0 6px;
    border: 1px solid color-mix(in srgb, var(--cc) 55%, transparent);
    border-radius: 2px;
    background: color-mix(in srgb, var(--cc) 10%, rgba(3, 7, 13, .7));
    color: var(--text);
    font: 600 10.5px/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
}
.cell i { width: 14px; height: 14px; background: var(--cc); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.cell--empty { --cc: var(--muted); opacity: .45; }

.ship-switch { display: grid; gap: 6px; margin: 12px 14px 0; }
.ship-switch button {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--line-2); border-radius: 2px;
    background: rgba(3, 7, 13, .5);
    color: var(--text);
    font: 600 12.5px/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
    cursor: pointer;
}
.ship-switch button span:last-child { color: var(--muted); font-size: 11px; }
.ship-switch button:hover:not([disabled]) { border-color: var(--ion); }
.ship-switch button[disabled] { opacity: .5; cursor: not-allowed; }
.ship-switch button.is-active { border-color: rgba(63, 224, 240, .7); background: rgba(63, 224, 240, .08); cursor: default; opacity: 1; }
.ship-switch button.is-active span:last-child { color: var(--ion); }

/* ---------- Kargo sistemi ---------- */
.hold { padding: 0 14px 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.hold__cap { display: grid; gap: 4px; }
.hold__cap .row { display: flex; justify-content: space-between; font: 600 12px/1 var(--display); font-variant-numeric: tabular-nums; }
.hold__cap .row span:first-child { color: var(--muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.hold__cap .bar__fill { background: linear-gradient(90deg, var(--violet), var(--ion)); }
.hold__cap.is-full .bar__fill { background: var(--danger); }
.hold__group { display: grid; gap: 6px; }
.hold__group > span { color: var(--muted); font: 600 10px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.hold__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.item {
    --cc: var(--ion);
    position: relative;
    display: grid; justify-items: center; align-content: center; gap: 4px;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--cc) 35%, transparent);
    border-radius: 2px;
    background:
        radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--cc) 16%, transparent), transparent 75%),
        rgba(3, 7, 13, .7);
    cursor: default;
    transition: border-color .15s, box-shadow .15s;
}
.item:hover { border-color: var(--cc); box-shadow: 0 0 12px -3px var(--cc); }
.item i { width: 20px; height: 20px; background: var(--cc); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; filter: drop-shadow(0 0 3px var(--cc)); }
.item b { font: 600 11px/1 var(--display); font-variant-numeric: tabular-nums; }
.item.is-zero { opacity: .38; }
.cargo-unload { margin: 12px 14px 0; width: calc(100% - 28px); }
.cargo-unload[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Görev kontrolü ---------- */
.qlist { list-style: none; margin: 0; padding: 0 14px; display: grid; gap: 8px; max-height: 360px; overflow-y: auto; }
.qlist li { display: grid; gap: 6px; padding: 9px 10px; border: 1px solid var(--line); border-left: 2px solid var(--ion-deep); border-radius: 2px; background: rgba(3, 7, 13, .45); }
.qlist .q-head { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.qlist .q-title { font: 600 14px/1.25 var(--display); letter-spacing: .02em; }
.qlist .q-kind { color: var(--muted); font: 600 10px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; margin-left: 4px; }
.qlist .q-count { flex: none; font: 600 13px/1.25 var(--display); font-variant-numeric: tabular-nums; }
.qlist .bar--thin .bar__fill { background: linear-gradient(90deg, var(--ion-deep), var(--ion)); }
.qlist li.is-done { border-left-color: var(--ok); }
.qlist li.is-done .q-title, .qlist li.is-done .q-count { color: var(--ok); }
.qlist li.is-done .bar__fill { background: var(--ok); }
.qlist .q-desc { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.qlist .q-reward { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.qlist .q-reward__lab { color: var(--muted); font: 600 10px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; margin-right: 2px; }
.qlist .q-chip { padding: 2px 7px; border: 1px solid var(--line); border-radius: 999px; background: rgba(155, 227, 168, .08); color: #9be3a8; font: 600 11px/1.3 var(--display); font-variant-numeric: tabular-nums; }
.qlist .empty { color: var(--muted); font-size: 13px; border-left-color: var(--line); }

/* ---------- Navigasyon (yıldız sistemi) ---------- */
.galaxy {
    margin: 0 14px;
    padding: 6px 0;
    border: 1px solid var(--line);
    border-radius: 2px;
    background:
        radial-gradient(60% 70% at 50% 46%, rgba(142, 124, 255, .1), transparent 70%),
        linear-gradient(rgba(63, 224, 240, .05) 1px, transparent 1px) 0 0 / 20px 20px,
        linear-gradient(90deg, rgba(63, 224, 240, .05) 1px, transparent 1px) 0 0 / 20px 20px,
        #02050A;
}
.galaxy svg { display: block; width: 100%; height: auto; overflow: visible; }
/* JS'in çizdiği bağlantı çizgileri: akan veri hattı */
.galaxy line { stroke: rgba(63, 224, 240, .5); stroke-width: 1.5; stroke-dasharray: 4 6; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -20; } }
.galaxy circle[r="19"] { fill: rgba(3, 7, 13, .92); stroke-width: 2; }
.galaxy text { font-family: var(--display); letter-spacing: .06em; }
/* Bulunduğun sektör: nabız atan halka */
.galaxy circle[r="27"] { stroke: var(--ion); stroke-width: 1.5; stroke-dasharray: 3 4; filter: drop-shadow(0 0 5px var(--ion)); transform-box: fill-box; transform-origin: center; animation: here 2.4s ease-in-out infinite; }
@keyframes here { 50% { transform: scale(1.12); opacity: .55; } }

/* ---------- Filo ağı ---------- */
.glist { list-style: none; margin: 0; padding: 0 14px; display: grid; gap: 6px; }
.glist li { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 2px; background: rgba(3, 7, 13, .45); font-size: 13px; }
.glist .g-head { display: flex; align-items: center; gap: 6px; }
.glist .g-name { flex: 1; font: 600 13.5px/1.2 var(--display); letter-spacing: .03em; }
.glist .g-lead { color: var(--warn); font: 700 10px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.glist .g-map { color: var(--muted); font-size: 11.5px; }
.glist .g-kick { border: 0; background: none; color: var(--danger); font: 600 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.glist .bar--thin + .bar--thin { margin-top: 2px; }
.glist li.is-down { opacity: .5; }
.glist .empty { color: var(--muted); }
.ginvite { display: flex; gap: 6px; margin: 12px 14px 0; }
.ginvite input {
    flex: 1; min-width: 0; height: 32px; padding: 0 10px;
    border: 1px solid var(--line-2); border-radius: 2px;
    background: rgba(3, 7, 13, .7); color: var(--text);
    font: 13px var(--body);
    user-select: text; -webkit-user-select: text;
}
.ginvite input:focus { outline: none; border-color: var(--ion); }
.ginvite button {
    padding: 0 12px;
    border: 1px solid rgba(70, 226, 154, .6); border-radius: 2px;
    background: rgba(70, 226, 154, .1); color: var(--ok);
    font: 600 11.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
    cursor: pointer;
}
.gleave { margin: 10px 14px 0; width: calc(100% - 28px); }

.invite { position: absolute; top: 110px; left: 50%; transform: translateX(-50%); width: 330px; padding: 14px 16px; z-index: 30; display: grid; gap: 10px; text-align: center; justify-items: center; border-color: rgba(70, 226, 154, .5); }
.invite p { margin: 0; font: 600 14px/1.4 var(--display); }
.invite__actions { display: flex; gap: 8px; width: 100%; }
.invite__actions button { flex: 1; margin: 0; }
.invite .btn-attack { border-color: rgba(70, 226, 154, .6); background: rgba(70, 226, 154, .12); color: var(--ok); }

/* ---------- Günlük ---------- */
.log { list-style: none; margin: 0; padding: 0 14px; max-height: 320px; overflow-y: auto; display: grid; gap: 3px; font-size: 12.5px; user-select: text; -webkit-user-select: text; }
.log li { display: grid; grid-template-columns: 62px 1fr; gap: 8px; padding: 2px 0; border-bottom: 1px solid rgba(120, 196, 228, .06); }
.log time { color: var(--muted); font: 500 12px/1.4 var(--display); font-variant-numeric: tabular-nums; }
.log .k-gain { color: var(--warn); }
.log .k-kill { color: var(--ok); }
.log .k-warn { color: #FF8F99; }
.log .k-map { color: #C9BEFF; }

/* ---------- Ayarlar ---------- */
.settings { display: grid; gap: 9px; padding: 0 14px; font-size: 13px; }
.settings label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.settings input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--ion); }
.settings--audio { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.settings__title { margin: 0 0 2px; color: var(--muted); font: 600 10.5px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.settings .range { display: grid !important; grid-template-columns: 70px 1fr 34px; gap: 8px; align-items: center; }
.settings .range input { width: 100%; height: auto; accent-color: var(--ion); }
.settings .range output { color: var(--muted); font: 600 12px/1 var(--display); text-align: right; }

.help { width: 360px; }
.help ul { margin: 0; padding: 0 14px 0 30px; display: grid; gap: 7px; color: var(--text-2); font-size: 13px; }
.help li::marker { color: var(--ion); }
.help b { color: var(--text); font-family: var(--display); font-weight: 600; }

/* =====================================================================
   İpucu (tooltip)
   ===================================================================== */
.tip {
    position: fixed; left: 0; top: 0; z-index: 60;
    max-width: 240px;
    padding: 8px 10px;
    border: 1px solid rgba(63, 224, 240, .4);
    border-radius: 2px;
    background: rgba(4, 9, 17, .94);
    box-shadow: 0 0 14px -4px var(--ion-glow), 0 12px 24px -12px #000;
    pointer-events: none;
    animation: tipIn .12s ease-out;
}
.tip b { display: block; color: var(--ion); font: 700 11.5px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.tip span { display: block; margin-top: 2px; color: var(--text-2); font: 500 12px/1.4 var(--display); }
@keyframes tipIn { from { opacity: 0; transform: translateY(3px); } }

/* =====================================================================
   Giriş kapısı, çıkış ve ölüm ekranları
   ===================================================================== */
.gate {
    position: fixed; inset: 0;
    display: grid; place-items: center;
    background:
        radial-gradient(700px 460px at 50% 55%, rgba(63, 224, 240, .08), transparent 70%),
        linear-gradient(rgba(63, 224, 240, .035) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(63, 224, 240, .035) 1px, transparent 1px) 0 0 / 32px 32px,
        rgba(3, 6, 11, .94);
    z-index: 10;
}
.gate__box { width: min(400px, calc(100% - 40px)); text-align: center; }
.gate__mark { width: 44px; height: 44px; color: var(--ion); filter: drop-shadow(0 0 12px var(--ion-glow)); }
.gate__brand { margin: 10px 0 22px; color: var(--ion); font: 700 14px/1 var(--display); letter-spacing: .36em; text-transform: uppercase; }
.gate h1 { margin: 0 0 8px; font: 600 28px/1.2 var(--display); letter-spacing: .04em; }
.guest { margin-top: 24px; display: grid; gap: 10px; text-align: left; }
.guest label { color: var(--muted); font: 600 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.guest input, .guest select {
    height: 44px; padding: 0 14px;
    border: 1px solid var(--line-2); border-radius: 2px;
    background: rgba(3, 7, 13, .75); color: var(--text);
    font: 14px var(--body);
    user-select: text; -webkit-user-select: text;
}
.guest input:focus, .guest select:focus { outline: none; border-color: var(--ion); }
.guest button {
    height: 46px; margin-top: 6px;
    border: 1px solid var(--ion); border-radius: 2px;
    background: linear-gradient(180deg, rgba(63, 224, 240, .28), rgba(63, 224, 240, .12));
    color: #DFFBFF;
    font: 700 14px/1 var(--display); letter-spacing: .2em; text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 18px -6px var(--ion);
}
.guest button:hover { background: rgba(63, 224, 240, .32); }
.gate__link { display: inline-block; margin-top: 18px; color: var(--ion); font: 600 13px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }

.logout-overlay {
    position: fixed; inset: 0;
    display: grid; place-content: center; text-align: center;
    pointer-events: none;
    background: radial-gradient(500px 300px at 50% 50%, rgba(63, 224, 240, .1), transparent 70%);
    z-index: 30;
}
.logout-overlay__count { margin: 0; font: 700 72px/1 var(--display); color: #BDF7FC; text-shadow: 0 0 30px var(--ion-glow); }

.death {
    position: fixed; inset: 0;
    display: grid; place-content: center; justify-items: center; text-align: center; gap: 4px;
    background: radial-gradient(600px 400px at 50% 50%, rgba(255, 77, 94, .16), transparent 70%), rgba(3, 6, 11, .45);
    z-index: 30;
}
.death__title { margin: 0 0 6px; font: 700 34px/1.1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #FF8F99; text-shadow: 0 0 24px rgba(255, 77, 94, .45); }
.repair-btn {
    margin-top: 18px; min-width: 220px; height: 48px;
    border: 1px solid var(--ion); border-radius: 2px;
    background: linear-gradient(180deg, rgba(63, 224, 240, .3), rgba(63, 224, 240, .12));
    color: #DFFBFF;
    font: 700 14px/1 var(--display); letter-spacing: .18em; text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 22px -6px var(--ion);
}
.repair-btn[disabled] { border-color: var(--line-2); background: rgba(255, 255, 255, .04); color: var(--muted); cursor: wait; box-shadow: none; }

/* =====================================================================
   Duyarlı yerleşim
   ===================================================================== */
@media (min-width: 1700px) {
    :root { --dock-w: 290px; --radar-w: 272px; }
    .slot { width: 62px; height: 66px; }
}
@media (max-width: 1599px) {
    .winbar kbd { display: none; }
}
@media (max-width: 1440px) {
    :root { --gap: 10px; --dock-w: 250px; --radar-w: 228px; }
    .winbar button { padding: 0 9px; gap: 6px; letter-spacing: .08em; }
    .readout { padding: 5px 9px; }
    .slot { width: 52px; height: 58px; }
    .slot__name { font-size: 9px; max-width: 46px; }
    .gauge { width: 96px; }
    .gauge__read b { font-size: 17px; }
    .ship__head strong { font-size: 15px; letter-spacing: .03em; }
}
@media (max-width: 1520px) {
    .chat { bottom: 120px; width: 300px; }
}
@media (max-width: 1280px) {
    .brand__name { display: none; }
    .readout--honor { display: none; }
    .slot__name { display: none; }
    .slot { width: 48px; height: 50px; }
    .notify { width: 250px; }
}
@media (max-width: 1100px) {
    .winbar__label { display: none; }
    .winbar button { padding: 0 11px; }
    .ship__stats { display: none; }
    .gauge { width: 92px; }
    .gauge__read span { display: none; }
    .gauge__read b { font-size: 14px; }
    .chat { width: 270px; bottom: 110px; }
    .tracker__open { display: none; }
}

@media (max-width: 760px) {
    :root { --top-h: 42px; --gap: 8px; --dock-w: 200px; --radar-w: 150px; }
    .console-top { gap: 6px; padding: 0 6px; overflow-x: auto; scrollbar-width: none; }
    .brand { display: none; }
    .winbar button { padding: 0 8px; }
    .readouts { margin-left: 0; }
    .readout { padding: 4px 7px; }
    .readout__k { display: none; }
    .readout b { font-size: 13px; }
    .sysbtns { padding-left: 4px; }
    .iconbtn { width: 30px; height: 30px; }
    .iconbtn[data-win="help"] { display: none; }

    .ship { padding: 9px 10px; gap: 6px; }
    .ship__head strong { font-size: 13px; }
    .ship__sub, .boosts { display: none; }
    .tracker__main { padding: 0 10px 8px; }
    .tracker__head { padding: 8px 10px 4px; }
    .tracker__title strong { font-size: 13px; }
    .tracker__note { display: none; }
    .fleet { display: none; }

    .radar { padding: 6px; gap: 5px; }
    .session, .status--net { display: none; }
    .status { font-size: 11px; }
    .status strong { font-size: 11px; }
    .status__coords { display: none; }
    .target, .notarget { padding: 8px 10px; }
    .target__class, .target__row { display: none; }
    .notarget .small { display: none; }

    .console { bottom: 6px; gap: 0; }
    .console__bays { flex-direction: column-reverse; align-items: center; gap: 6px; padding: 6px; }
    .hotbar--tech { padding-left: 0; border-left: 0; }
    .slot { width: 40px; height: 42px; padding-bottom: 4px; }
    .slot__icon { width: 16px; height: 16px; }
    .slot__count { font-size: 10px; }
    .slot-sep { margin: 4px 1px; }
    .gauge { width: 34px; height: 80px; }
    .gauge svg { width: 50px; height: 80px; }
    .gauge__read { display: none; }

    .readout:first-child { display: none; }
    .notify { right: var(--gap); left: var(--gap); width: auto; top: auto; bottom: 330px; }
    .chat { left: var(--gap); right: var(--gap); bottom: 168px; width: auto; min-width: 0; }
    .chat__log { max-height: 64px; font-size: 12px; padding: 4px 8px; }
    .chat.is-grown .chat__log, .chat:focus-within .chat__log { max-height: 160px; }
    .chat__tabs { display: none; }
    .jump-hint { bottom: auto; top: 46%; }
    .win, .win--wide, .win--ship, .win--cargo { left: 8px !important; right: 8px; top: calc(var(--top-h) + 8px) !important; width: auto; max-height: calc(100vh - var(--top-h) - 150px); }
    .help { width: auto; }
}
@media (max-height: 760px) and (min-width: 761px) {
    .shiphero__stage { max-height: 170px; }
    #ck-ship-canvas { max-height: 170px; width: auto; margin: 0 auto; }
    .tracker__more { max-height: 140px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .scope__sweep, .bar__fill::after { display: none; }
}

/* =====================================================================
   METAL KOKPİT TEMASI
   Gerçek model görselleriyle uyumlu: fırçalanmış çelik plakalar, pahlı
   çerçeveler, cam ekranlar. Yerleşim aynı, malzeme dili değişti.
   ===================================================================== */
:root {
    --steel-hi: rgba(196, 214, 232, .22);
    --steel-lo: rgba(0, 0, 0, .55);
    --steel-1: #26303C;
    --steel-2: #121820;
    --ion: #56D4E8;
    --gold: #E2B458;
    --plate: linear-gradient(180deg, rgba(34, 44, 56, .9), rgba(13, 18, 25, .9));
}

/* Plaka: çelik degrade + üst ışık kenarı + iç çizgi */
.panel {
    border: 1px solid #070A0E;
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 30%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 3px),
        var(--plate);
    box-shadow:
        inset 0 1px 0 var(--steel-hi),
        inset 0 0 0 1px rgba(120, 150, 175, .14),
        inset 0 -1px 0 rgba(0, 0, 0, .6),
        0 14px 34px -14px rgba(0, 0, 0, .95);
}
.panel::before, .panel::after {
    width: 5px; height: 5px;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #C9D6E3, #4A5664 60%, #1A2028);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .6);
}
.panel::before { top: 5px; left: 5px; }
.panel::after { bottom: 5px; right: 5px; }

/* Üst konsol: koyu çelik şerit */
.console-top {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 45%),
        linear-gradient(180deg, #1B232D, #0B1016);
    border-bottom: 1px solid #000;
    box-shadow: inset 0 -1px 0 rgba(120, 150, 175, .18), 0 8px 24px -10px #000;
}
.console-top::after { background: linear-gradient(90deg, transparent, rgba(86, 212, 232, .55) 20%, rgba(226, 180, 88, .35) 70%, transparent); }

/* Menü: kare çelik tuşlar */
.winbar { gap: 4px; align-items: center; }
.winbar button {
    height: 34px;
    padding: 0 11px 0 8px;
    border: 1px solid #06090D;
    border-radius: 3px;
    background: linear-gradient(180deg, #2B3643, #161D26);
    box-shadow: inset 0 1px 0 var(--steel-hi), inset 0 -1px 0 rgba(0, 0, 0, .5);
}
.winbar button::after { left: 6px; right: 6px; bottom: 2px; }
.winbar button:hover { background: linear-gradient(180deg, #344456, #1A2430); }
.winbar button.is-open { background: linear-gradient(180deg, #1E3A46, #10222B); box-shadow: inset 0 1px 0 rgba(86, 212, 232, .35), inset 0 0 12px rgba(86, 212, 232, .15); }
.iconbtn { border: 1px solid #06090D; background: linear-gradient(180deg, #2B3643, #161D26); box-shadow: inset 0 1px 0 var(--steel-hi); }

/* Radar ekranı: çelik çerçeve */
.scope { background: linear-gradient(160deg, #6B7C8E, #2A333E 40%, #56687A); }

/* Alt konsol yuvaları: gerçek item modelleri */
.console__bays {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 40%),
        linear-gradient(180deg, #202A35, #0D1319);
    border: 1px solid #05080B;
    box-shadow: inset 0 1px 0 var(--steel-hi), inset 0 0 0 1px rgba(120, 150, 175, .12), 0 16px 34px -12px #000;
}
.slot {
    width: 60px; height: 60px;
    padding: 0;
    align-content: center;
    border: 1px solid #05080B;
    border-radius: 3px;
    background:
        radial-gradient(75% 70% at 50% 45%, rgba(86, 212, 232, .08), transparent 70%),
        linear-gradient(180deg, #0C1117, #161E27);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(120, 150, 175, .16), 0 1px 0 rgba(255, 255, 255, .06);
}
.slot:hover { border-color: #05080B; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(86, 212, 232, .5), 0 0 12px -3px var(--ion); }
.slot.is-active { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 14px rgba(226, 180, 88, .25), 0 0 14px -2px rgba(226, 180, 88, .7); }
.slot.is-active::after { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.slot.is-active .slot__key { color: var(--gold); }
.slot__icon {
    width: 46px; height: 46px; margin: 0;
    background: var(--img) center / contain no-repeat;
    -webkit-mask: none; mask: none;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .7));
}
.slot__name { display: none; }
.slot__count {
    position: absolute; right: 4px; bottom: 3px;
    font-size: 11px; font-weight: 700;
    text-shadow: 0 1px 2px #000, 0 0 4px #000;
}
.slot__key { z-index: 1; text-shadow: 0 1px 2px #000; }
.slot__cd { z-index: 1; }
.slot[data-code="x1"] { --img: url("/assets/game/icons/x1.png"); }
.slot[data-code="x2"] { --img: url("/assets/game/icons/x2.png"); }
.slot[data-code="x3"] { --img: url("/assets/game/icons/x3.png"); }
.slot[data-code="x4"] { --img: url("/assets/game/icons/x4.png"); }
.slot[data-code="r1"] { --img: url("/assets/game/icons/r1.png"); }
.slot[data-code="r2"] { --img: url("/assets/game/icons/r2.png"); }
.slot[data-code="tsh"] { --img: url("/assets/game/icons/tsh.png"); }
.slot[data-code="tsp"] { --img: url("/assets/game/icons/tsp.png"); }
.slot[data-code="trp"] { --img: url("/assets/game/icons/trp.png"); }
.slot[data-code="ability"] { --img: url("/assets/game/icons/ability.png"); }
.slot[data-code="mine"] { --img: url("/assets/game/icons/mine.png"); }

/* Envanter ve donanım hücreleri: model görselleri */
.item i, .cell i {
    background: var(--img) center / contain no-repeat;
    -webkit-mask: none; mask: none;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .7));
}
.item i { width: 34px; height: 34px; }
.cell i { width: 22px; height: 22px; }
.item {
    background: radial-gradient(70% 70% at 50% 40%, color-mix(in srgb, var(--cc) 12%, transparent), transparent 75%), linear-gradient(180deg, #0C1117, #161E27);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7);
}

/* Pencereler: çelik terminal */
.win {
    border: 1px solid #05080B;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 80px),
        linear-gradient(180deg, rgba(24, 32, 42, .96), rgba(10, 14, 20, .96));
}
.win__head { background: linear-gradient(180deg, #232D39, #141B24); border-bottom: 1px solid #05080B; box-shadow: inset 0 1px 0 var(--steel-hi); }
.btn-attack, .btn-ghost, .chat__tool, .comp-flag, .cargo-flag, .ship-switch button { border-radius: 3px; }

@media (max-width: 1440px) { .slot { width: 54px; height: 54px; } .slot__icon { width: 40px; height: 40px; } }
@media (max-width: 1280px) { .slot { width: 50px; height: 50px; } .slot__icon { width: 36px; height: 36px; } }
@media (max-width: 760px) { .slot { width: 42px; height: 42px; } .slot__icon { width: 30px; height: 30px; } }

/* =====================================================================
   AÇILIR / KAPANIR PANELLER
   ===================================================================== */

.collapse-btn {
    position: absolute; top: 5px; right: 5px; z-index: 3;
    display: grid; place-items: center;
    width: 22px; height: 22px;
    padding: 0;
    border: 1px solid #05080B; border-radius: 3px;
    background: linear-gradient(180deg, #2B3643, #161D26);
    box-shadow: inset 0 1px 0 var(--steel-hi);
    color: var(--text-2);
    cursor: pointer;
    transition: color .15s, box-shadow .15s;
}
.collapse-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; transform: rotate(180deg); transition: transform .25s var(--ease); }
.collapse-btn:hover { color: var(--ion); box-shadow: inset 0 1px 0 var(--steel-hi), 0 0 10px -2px var(--ion); }
.is-collapsed > .collapse-btn svg { transform: rotate(0deg); }

/* Başlık alanı düğmeye yer açar */
.ship__head, .tracker__head, .fleet__head, .chat__bar, .target__top { padding-right: 26px; }
.tracker__head { padding-right: 34px; }
.radar > .status:not(.status--net) { padding-right: 26px; }

/* Panel gövdesinin kayarak kapanması */
.is-collapsible > * { transition: opacity .2s ease; }
.ship.is-collapsed > :not(.ship__head):not(.bar):not(.collapse-btn) { display: none; }
.ship.is-collapsed { gap: 5px; }
#ck-mission.is-collapsed > :not(.tracker__head):not(.collapse-btn) { display: none; }
#ck-mission.is-collapsed .tracker__chev { display: none; }
#ck-fleet.is-collapsed .fleet__list { display: none; }
.radar.is-collapsed .scope, .radar.is-collapsed .session, .radar.is-collapsed .status--net { display: none; }
#target.is-collapsed .target__class, #target.is-collapsed .target__row, #target.is-collapsed .bar { display: none; }
#ck-chat.is-collapsed .chat__log, #ck-chat.is-collapsed .chat__form { display: none; }
#ck-chat.is-collapsed { width: auto; min-width: 0; }
#ck-chat .collapse-btn { top: -2px; right: 0; }
/* Konsol: kapanınca yalnızca göstergeler kalır */
#ck-console > .collapse-btn { top: auto; bottom: calc(100% + 4px); right: 50%; transform: translateX(50%); }
#ck-console.is-collapsed .console__bays { display: none; }
#ck-console.is-collapsed .gauge { width: 70px; }

/* =====================================================================
   MOBİL KONTROL MODU (touch.js) — iki joystick
   ===================================================================== */
.touch { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.touch > * { pointer-events: auto; }
.stick {
    --size: clamp(118px, 17vmin, 168px);
    position: absolute; bottom: max(14px, env(safe-area-inset-bottom));
    width: var(--size); height: var(--size);
    border-radius: 50%;
    touch-action: none;
    user-select: none; -webkit-user-select: none;
}
.stick--move { left: max(14px, env(safe-area-inset-left)); }
.stick--aim { right: max(14px, env(safe-area-inset-right)); }
.stick__ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(86, 212, 232, .06) 0 40%, transparent 41%),
        repeating-conic-gradient(from 0deg, rgba(120, 160, 190, .35) 0 2deg, transparent 2deg 30deg),
        radial-gradient(circle, rgba(10, 16, 24, .55), rgba(10, 16, 24, .75));
    border: 1px solid rgba(0, 0, 0, .8);
    box-shadow: inset 0 0 0 1px rgba(120, 155, 185, .2), inset 0 0 24px rgba(0, 0, 0, .7), 0 10px 30px -10px #000;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    transition: box-shadow .2s;
}
.stick__knob {
    position: absolute; left: 50%; top: 50%;
    width: 42%; height: 42%;
    margin: -21% 0 0 -21%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #A9B9CA, #4C5A6A 45%, #1A222C 80%);
    border: 1px solid #05080B;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px rgba(0, 0, 0, .7);
    transition: transform .12s var(--ease);
    pointer-events: none;
}
.stick.is-active .stick__knob { transition: none; }
.stick--move .stick__knob::after, .stick--aim .stick__knob::after {
    content: ""; position: absolute; inset: 30%; border-radius: 50%;
    background: radial-gradient(circle, var(--ion), transparent 70%);
    opacity: .55;
}
.stick--aim .stick__knob::after { background: radial-gradient(circle, #FF6B78, transparent 70%); }
.stick.is-active .stick__ring { box-shadow: inset 0 0 0 1px rgba(86, 212, 232, .6), inset 0 0 24px rgba(0, 0, 0, .7), 0 0 26px -6px var(--ion); }
.stick--aim.is-engaged .stick__ring { box-shadow: inset 0 0 0 1px rgba(255, 77, 94, .6), inset 0 0 24px rgba(0, 0, 0, .7), 0 0 22px -8px var(--danger); }
.stick--aim.is-firing .stick__ring { animation: aimPulse .8s ease-in-out infinite; }
.stick--aim.has-lock .stick__knob { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 3px rgba(255, 77, 94, .55), 0 0 18px rgba(255, 77, 94, .7); }
@keyframes aimPulse { 50% { box-shadow: inset 0 0 0 2px rgba(255, 77, 94, .85), inset 0 0 24px rgba(0, 0, 0, .7), 0 0 30px -4px var(--danger); } }
.stick__label {
    position: absolute; left: 50%; bottom: -2px;
    transform: translate(-50%, 100%);
    color: var(--muted);
    font: 600 9.5px/1.6 var(--display); letter-spacing: .14em; text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 1px 2px #000;
    pointer-events: none;
}
.touch__btns {
    position: absolute;
    right: calc(max(14px, env(safe-area-inset-right)) + clamp(118px, 17vmin, 168px) + 10px);
    bottom: max(18px, env(safe-area-inset-bottom));
    display: grid; gap: 8px;
}
.touch__btn {
    display: grid; justify-items: center; gap: 1px;
    width: 58px; height: 58px; padding: 6px 0 0;
    border: 1px solid #05080B; border-radius: 50%;
    background: radial-gradient(circle at 40% 30%, #2F3B49, #121820 75%);
    box-shadow: inset 0 1px 0 var(--steel-hi), 0 8px 20px -8px #000;
    color: var(--text-2);
    font: 600 9px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase;
    touch-action: manipulation;
}
.touch__btn:active { transform: scale(.95); box-shadow: inset 0 1px 0 var(--steel-hi), 0 0 16px -4px var(--ion); }
.touch__btn i { width: 28px; height: 28px; background: center / contain no-repeat; filter: drop-shadow(0 2px 2px #000); }
.touch__btn--rocket i { background-image: url("/assets/game/icons/r1.png"); }
.touch__btn--clear { width: 46px; height: 46px; justify-self: center; padding-top: 4px; }
.touch__btn--clear i { width: 18px; height: 18px; background: none; border: 2px solid currentColor; border-radius: 50%; position: relative; }
.touch__btn--clear i::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: currentColor; transform: rotate(45deg); }

/* Mobil modda HUD yerleşimi */
.touch-mode kbd, .touch-mode .tracker__open kbd { display: none; }
.touch-mode .chat { left: calc(max(14px, env(safe-area-inset-left)) + clamp(118px, 17vmin, 168px) + 12px); bottom: 12px; width: min(280px, 30vw); min-width: 0; }
.touch-mode .chat__tabs { display: none; }
.touch-mode .console { bottom: 8px; }
.touch-mode .gauge { width: 54px; height: 86px; }
.touch-mode .gauge svg { width: 52px; height: 86px; }
.touch-mode .gauge__read span { display: none; }
.touch-mode .gauge__read b { font-size: 13px; }
.touch-mode .slot { width: 46px; height: 46px; }
.touch-mode .slot__icon { width: 34px; height: 34px; }
.touch-mode .notify { width: 240px; }
.touch-mode .jump-hint { bottom: auto; top: 40%; padding: 14px 22px; }
.touch-mode .collapse-btn { width: 28px; height: 28px; }
.touch-mode .collapse-btn svg { width: 16px; height: 16px; }

/* Yatay telefon: konsol iki joystick arasında, sohbet üstte */
@media (max-height: 520px) {
    .touch-mode .console__bays { flex-direction: row; padding: 5px; gap: 6px; }
    .touch-mode .hotbar--tech { padding-left: 6px; border-left: 1px solid var(--line); }
    .touch-mode .slot { width: 38px; height: 38px; }
    .touch-mode .slot__icon { width: 28px; height: 28px; }
    .touch-mode .slot__key { display: none; }
    .touch-mode .gauge { display: none; }
    .touch-mode .chat { top: calc(var(--top-h) + 8px); bottom: auto; left: 50%; transform: translateX(-50%); width: 300px; }
    .touch-mode .dock { max-height: calc(100% - var(--top-h) - 20px); }
    .touch-mode .dock--left { width: 210px; }
    .touch-mode .dock--right { width: 170px; }
    .touch-mode .ship__sub, .touch-mode .boosts, .touch-mode .ship__stats { display: none; }
    .touch-mode .stick { --size: clamp(110px, 30vh, 150px); }
}
/* Dikey telefon: konsol joysticklerin üstünde */
@media (max-width: 760px) and (min-height: 521px) {
    .touch-mode .console { bottom: calc(max(14px, env(safe-area-inset-bottom)) + clamp(118px, 17vmin, 168px) + 22px); }
    .touch-mode .console__bays { flex-direction: column-reverse; }
    .touch-mode .gauge { display: none; }
    .touch-mode .slot { width: 40px; height: 40px; }
    .touch-mode .slot__icon { width: 30px; height: 30px; }
    .touch-mode .chat { display: none; }
    .touch-mode .touch__btns { right: 50%; transform: translateX(50%); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 24px); grid-auto-flow: column; align-items: center; }
    .touch-mode .notify { bottom: auto; top: calc(var(--top-h) + 8px); }
}

/* Üst konsol taşmasın (mobil tarayıcı sayfayı uzaklaştırmasın) */
.console-top { min-width: 0; }
@media (max-width: 1100px) {
    .console-top { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .console-top::-webkit-scrollbar { display: none; }
    .winbar { flex: none; }
}
.touch-mode .brand { display: none; }
.touch-mode .readout--honor { display: none; }

/* Yatay telefon: sağ dok sade, sohbet sabit genişlikte üst ortada */
@media (max-height: 520px) {
    .touch-mode #ck-chat, .touch-mode #ck-chat.is-collapsed { width: 260px; }
    .touch-mode .radar .session, .touch-mode .radar .status--net { display: none; }
    .touch-mode .notarget { display: none; }
    .touch-mode .target__class, .touch-mode .target__row { display: none; }
    .touch-mode .target { padding: 8px 10px; }
    .touch-mode .target .btn-attack { display: none; }   /* yalnızca hedef panelindeki saldır düğmesi (HUD düzenle, boşalt vb. görünür kalır) */
    .touch-mode .dock { gap: 6px; }
    .touch-mode .ship { padding: 8px 10px; gap: 5px; }
    .touch-mode .tracker__head { padding-top: 7px; padding-bottom: 5px; }
}
.radar { grid-template-columns: minmax(0, 1fr); }
.scope, #minimap, .radar .status { min-width: 0; }

/* ========== Ödül satırı: şeffaf, yalnızca +kredi +kuvars +xp +onur ========== */
.win-banner {
    position: absolute;
    top: calc(var(--top-h) + 10px);
    left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    pointer-events: none;
    z-index: 30;
}
.wb-line {
    display: flex; gap: 12px; white-space: nowrap;
    font: 700 13px/1.25 var(--display, sans-serif);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 6px rgba(0, 0, 0, .7);
    opacity: 0; transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease;
}
.wb-line.is-in { opacity: 1; transform: none; }
.wb-line.is-out { opacity: 0; transform: translateY(-6px); transition-duration: .45s; }
.wb-line + .wb-line { font-size: 11.5px; }
.wb-credits { color: #FFD27A; }
.wb-kuvars { color: #C7B6FF; }
.wb-xp { color: #8FE3F0; }
.wb-honor { color: #F4B9B9; }
.wb-demirit { color: #C9D2DE; }
.wb-kristalit { color: #9BE2F7; }
.wb-plazmit { color: #E2D0FF; }

#win-galaxy { width: min(760px, calc(100vw - 24px)); }

/* =====================================================================
   SEÇENEK ÇUBUĞU (Tab), SİMGEYE KÜÇÜLEN PANELLER, KOMPAKT MENÜLER
   ===================================================================== */

/* Konsol: gövde/kalkan göstergeleri kaldırıldı; Tab ile üstünde seçenek satırı açılır */
.console { flex-direction: column; align-items: center; gap: 6px; }
.console > .console__more { pointer-events: auto; }
.console__more {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
    padding: 6px 10px;
    border: 1px solid var(--line); border-radius: 3px;
    background: rgba(5, 11, 20, .8);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    animation: winIn .18s var(--ease);
}
.console__more[hidden] { display: none; }
.opt-group { display: flex; align-items: center; gap: 6px; }
.opt-group.is-off .opt { opacity: .55; }
.opt-group__label { color: var(--muted); font: 600 9.5px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; }
.opt-group__items { display: flex; gap: 4px; }
.opt {
    display: inline-flex; align-items: center; gap: 5px;
    height: 26px; padding: 0 9px;
    border: 1px solid var(--line-2); border-radius: 2px;
    background: rgba(3, 7, 13, .7); color: var(--text-2);
    font: 600 11px/1 var(--display); letter-spacing: .04em;
    cursor: pointer;
}
.opt i { width: 14px; height: 14px; background: var(--img) center / contain no-repeat; }
.opt:hover { border-color: rgba(63, 224, 240, .5); color: var(--text); }
.opt.is-active { border-color: var(--ion); color: #E8FBFF; box-shadow: inset 0 0 0 1px rgba(63, 224, 240, .35), 0 0 10px -3px var(--ion); }
.opt-group#opt-cpu .opt:not(.is-active) { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255, 77, 94, .6); }
.opt-empty { color: var(--muted); font-size: 11px; }
.opt-pending { margin: 0; color: var(--warn); font-size: 11px; }
.console__tab {
    align-self: stretch;
    display: grid; place-items: center; gap: 2px;
    width: 30px; padding: 0;
    border: 1px solid var(--line-2); border-radius: 2px;
    background: rgba(3, 7, 13, .7); color: var(--muted);
    cursor: pointer;
}
.console__tab svg { fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform .2s var(--ease); }
.console__tab kbd { font: 600 8.5px/1 var(--display); letter-spacing: .05em; border: 0; background: none; padding: 0; color: inherit; }
.console__tab:hover, .console__tab[aria-expanded="true"] { color: var(--ion); border-color: rgba(63, 224, 240, .5); }
.console__tab[aria-expanded="true"] svg { transform: rotate(180deg); }
.console__tab.has-pending { color: var(--warn); border-color: rgba(242, 181, 68, .6); }

/* Paneller simgeye küçülür (silah konsolu hariç); simgeye basınca yeniden açılır */
.collapse-btn__ico { display: none; }
.is-collapsed > .collapse-btn .collapse-btn__chev { display: none; }
.is-collapsed > .collapse-btn .collapse-btn__ico { display: block; transform: none !important; stroke-width: 1.8; }
.dock > .is-collapsed, #ck-chat.is-collapsed {
    width: 34px !important; min-width: 0 !important; height: 34px; padding: 0 !important;
    overflow: hidden; background: rgba(5, 11, 20, .78);
}
.dock--left > .is-collapsed { align-self: flex-start; }
.dock--right > .is-collapsed { align-self: flex-end; }
.dock > .is-collapsed > :not(.collapse-btn), #ck-chat.is-collapsed > :not(.collapse-btn) { display: none !important; }
.dock > .is-collapsed > .collapse-btn, #ck-chat.is-collapsed > .collapse-btn {
    position: static; width: 34px; height: 34px; transform: none;
}
.dock > .is-collapsed > .collapse-btn svg, #ck-chat.is-collapsed > .collapse-btn svg { width: 18px; height: 18px; }
.dock > .is-collapsed::before, .dock > .is-collapsed::after { display: none; }

/* Kompakt menüler */
:root { --dock-w: 228px; --radar-w: 208px; }
@media (min-width: 1700px) { :root { --dock-w: 248px; --radar-w: 226px; } .slot { width: 54px; height: 58px; } }
@media (max-width: 1440px) { :root { --dock-w: 216px; --radar-w: 196px; } }
.win { width: 272px; padding-bottom: 10px; }
.win--wide { width: 370px; }
.win--ship { width: 318px; }
.win--cargo { width: 300px; }
.win__head { padding: 7px 8px 7px 12px; margin-bottom: 9px; }
.win__head strong { font-size: 14px; }
.win__sys { font-size: 8.5px; }
.win__close { width: 24px; height: 24px; font-size: 16px; }
.win__grid { gap: 5px 12px; padding: 0 12px; font-size: 12px; }
.win__grid dd { font-size: 12.5px; }
.win__note { margin: 10px 12px 0; font-size: 11px; }
.settings, .help ul { font-size: 12px; }
.slot { width: 50px; height: 54px; }
.slot__icon { width: 19px; height: 19px; }
.slot__name { font-size: 8.5px; max-width: 44px; }
.slot__count { font-size: 11px; }
.console__bays { gap: 8px; padding: 6px 8px; }
.chat { width: 290px; }

/* =====================================================================
   v2: TRANSPARAN KOMPAKT ÜST BAR, KÜÇÜK ALT YUVALAR, HEDEF PANELİ YOK
   ===================================================================== */

/* Üst bar: arka plansız, ince; boş alanı tıklamalar haritaya geçer */
:root { --top-h: 36px; }
.console-top {
    height: var(--top-h);
    gap: 8px;
    padding: 0 8px;
    background: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    pointer-events: none;
}
.console-top::after { display: none; }
.console-top > * { pointer-events: auto; }
.console-top .brand { display: none; }
.winbar { gap: 3px; height: auto; }
.winbar button {
    height: 28px; padding: 0 7px; gap: 0;
    border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(6, 10, 18, .42) !important;
    box-shadow: none !important;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.winbar button:hover { background: rgba(20, 40, 52, .62) !important; }
.winbar button.is-open { background: rgba(18, 52, 64, .62) !important; border-color: rgba(86, 212, 232, .45); }
.winbar .winbar__label, .winbar kbd { display: none; }
.winbar svg { width: 15px; height: 15px; }
.winbar button::after { left: 5px; right: 5px; bottom: 1px; height: 1.5px; }
.readouts { gap: 2px; }
.readout {
    padding: 3px 8px; border: 0; border-radius: 3px;
    background: rgba(6, 10, 18, .42);
}
.readout__k { font-size: 9px; letter-spacing: .1em; }
.readout b { font-size: 13px; }
.sysbtns { gap: 3px; padding-left: 4px; border: 0; }
.iconbtn { width: 28px; height: 28px; border: 1px solid rgba(255, 255, 255, .06) !important; background: rgba(6, 10, 18, .42) !important; box-shadow: none !important; }
.iconbtn svg { width: 15px; height: 15px; }

/* Hedef kilidi paneli kaldırıldı (hedef seçimi ve Ctrl ile saldırı aynen çalışır; hedefin barı haritada) */
#target, .notarget { display: none !important; }

/* Alt bar: daha küçük yuvalar, biraz daha büyük ikonlar */
.slot { width: 42px; height: 42px; padding: 0; gap: 0; align-content: center; }
.slot__icon { width: 26px; height: 26px; margin: 0; }
.slot__name { display: none; }
.slot__key { top: 2px; left: 3px; font-size: 8.5px; }
.slot__count { position: absolute; right: 3px; bottom: 2px; font-size: 9.5px; text-shadow: 0 1px 2px #000; }
.slot.is-active::after { left: 5px; right: 5px; }
.console__bays { gap: 6px; padding: 5px 6px; }
.hotbar { gap: 3px; }
.hotbar--tech { padding-left: 6px; }
.slot-sep { margin: 4px 1px; }
.console__tab { width: 24px; }
.opt { height: 22px; padding: 0 7px; font-size: 10.5px; }
@media (min-width: 1700px) { .slot { width: 46px; height: 46px; } .slot__icon { width: 28px; height: 28px; } }

/* =====================================================================
   v3: ÜST SOL BAR PANEL DÜĞMELERİ, SADE RADAR, ARITMA / GÜÇLENDİRME
   ===================================================================== */
.is-dock-hidden { display: none !important; }
.winbar__dock--last { margin-right: 8px; position: relative; }
.winbar__dock--last::before { content: ""; position: absolute; right: -6px; top: 5px; bottom: 5px; width: 1px; background: rgba(255, 255, 255, .14); }
.winbar__dock.is-open svg { color: var(--ion); }

/* Radar: yalnızca harita, harita adı ve koordinat */
.radar .status--net, .radar .session { display: none !important; }
.radar { gap: 4px; padding-bottom: 6px; }
.radar > .status:not(.status--net) { flex-wrap: wrap; row-gap: 2px; }
.radar #map-name { white-space: normal; overflow: visible; text-overflow: clip; font-size: 12px; line-height: 1.2; }
.radar .status__coords { margin-left: auto; font-size: 11px; }

/* Kargo penceresi sekmeleri */
.win-tabs { display: flex; gap: 3px; margin: -2px 12px 10px; }
.win-tabs button {
    padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 2px;
    background: linear-gradient(180deg, #2A333E, #161C24); color: var(--text-2);
    font: 600 11px/1.2 var(--display); letter-spacing: .04em; cursor: pointer;
}
.win-tabs button.is-active { background: linear-gradient(180deg, #4A5562, #2B333D); color: #fff; border-color: rgba(255, 255, 255, .3); }
.win--cargo.win--refine { width: 360px; }
.cargo-pane[hidden] { display: none; }

/* Görseldeki gibi kutucuklar: koyu başlık şeridi, metal görsel kutusu, sayaç şeridi */
.rf-tile, .rf-target {
    display: grid; grid-template-rows: auto auto auto; justify-items: stretch; gap: 3px;
    position: relative; z-index: 1;
}
.rf-tile__name {
    display: block; padding: 2px 4px; text-align: center;
    background: #05080C; border: 1px solid #2B333D;
    color: #fff; font: 700 10.5px/1.25 var(--display); letter-spacing: .02em;
}
.rf-tile__img {
    display: block; height: 62px;
    border: 1px solid #3A4552; border-radius: 1px;
    background:
        var(--img) center / 46px no-repeat,
        linear-gradient(180deg, #59636E 0%, #3A434D 48%, #262D35 50%, #2E363F 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -8px 14px rgba(0, 0, 0, .35);
}
.rf-tile__img--target { background-size: 44px, auto; }
.rf-tile__count {
    display: block; padding: 2px 4px; text-align: center;
    background: #05080C; border: 1px solid #2B333D;
    color: #fff; font: 700 11px/1.3 var(--display); font-variant-numeric: tabular-nums;
}
.rf-btn {
    margin-top: 2px; padding: 3px 0;
    border: 1px solid #5A6470; border-radius: 1px;
    background: linear-gradient(180deg, #5C6672, #333B45); color: #fff;
    font: 600 10.5px/1.2 var(--display); cursor: pointer;
}
.rf-btn:hover:not(:disabled) { background: linear-gradient(180deg, #6E7A88, #3D4753); }
.rf-btn:disabled { opacity: .45; cursor: default; }

.rf-tree {
    position: relative;
    display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: auto; gap: 16px 6px;
    margin: 0 12px; padding: 4px 0;
}
.rf-tree .rf-tile { width: 92%; justify-self: center; }
.rf-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.rf-lines line { stroke: #C9D2DC; stroke-width: 1.2; opacity: .8; }

.rf-qty { display: flex; align-items: center; gap: 5px; margin: 10px 12px 0; font-size: 11.5px; color: var(--muted); }
.rf-qty input { width: 64px; height: 24px; padding: 0 6px; border: 1px solid var(--line-2); border-radius: 2px; background: rgba(3, 7, 13, .7); color: var(--text); font: 600 12px var(--display); }
.rf-chip { height: 24px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 2px; background: rgba(3, 7, 13, .7); color: var(--text-2); font: 600 11px var(--display); cursor: pointer; }
.rf-chip.is-active, .rf-chip:hover { border-color: var(--ion); color: #fff; }

.rf-label { margin: 0 12px 6px; color: #fff; font: 600 11.5px/1.35 var(--display); }
.rf-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 12px; }
.rf-row--targets { grid-template-columns: repeat(2, 1fr); margin-top: 12px; }
.rf-row .rf-tile[draggable="true"] { cursor: grab; }
.rf-row .rf-tile.is-empty { opacity: .45; }
.rf-row .rf-tile.is-selected .rf-tile__img { border-color: var(--gold, #E2B458); box-shadow: 0 0 0 1px var(--gold, #E2B458), 0 0 12px -2px var(--gold, #E2B458); }
.rf-target { cursor: pointer; }
.rf-target.is-ok .rf-tile__img { border-color: #7BD99F; box-shadow: 0 0 0 1px rgba(123, 217, 159, .6); }
.rf-target.is-no { opacity: .45; }
.rf-target.is-over .rf-tile__img { box-shadow: 0 0 0 2px #7BD99F, 0 0 14px -2px #7BD99F; }
.rf-upg { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; min-height: 18px; }
.rf-upg li { display: flex; align-items: center; gap: 5px; padding: 1px 4px; font: 600 10.5px/1.3 var(--display); color: var(--muted); }
.rf-upg li.is-active { color: #fff; background: rgba(123, 217, 159, .1); }
.rf-upg i { width: 12px; height: 12px; background: var(--img) center / contain no-repeat; flex: none; }

/* ---------- v4: seçenek çubuğu ikonları, rütbe, XP / Kuvars ---------- */
.opt { gap: 4px; padding: 0 6px 0 3px; height: 26px; }
.opt__fm { width: 30px; height: 18px; background: var(--img) center / cover no-repeat; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.opt__ico { width: 18px; height: 18px; background: var(--img) center / contain no-repeat; }
.opt__txt { white-space: nowrap; }
.opt-group__items { flex-wrap: wrap; max-width: 760px; }
@media (max-width: 1100px) { #opt-formation .opt__txt { display: none; } #opt-formation .opt { padding: 0 3px; } }
.readout--xp b { color: #8FE3F0; }
.readout--kuvars b { color: #C7B6FF; }
.readout--rank { gap: 5px; align-items: center; }
.readout--rank img { width: 18px; height: 18px; }
.readout--rank b { font-size: 11.5px; color: #F3D9A0; }
.ship__head .rank-ico { width: 20px; height: 20px; flex: none; }

/* ---------- Taşınabilir pilot / görev / radar panelleri ---------- */
.dock-grip {
    display: flex; align-items: center; gap: 6px;
    margin: -4px -4px 4px; padding: 0 2px 0 6px; height: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    cursor: move; touch-action: none; user-select: none;
}
.dock-grip__t { flex: 1; color: var(--muted); font: 600 9px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; }
.dock-grip__x {
    width: 16px; height: 16px; padding: 0; border: 0; border-radius: 2px;
    background: none; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer;
}
.dock-grip__x:hover { color: #FF9CA5; background: rgba(255, 77, 94, .12); }
.is-movable.is-floating { position: fixed !important; z-index: 8; margin: 0 !important; }

/* =====================================================================
   v5: KOMPAKT OYUN ARAYÜZÜ (masaüstü) + MOBİL ELDEN GEÇİRME
   ===================================================================== */

/* ---- Alt eşya çubuğu: yalnızca ikonlar, bilgi ipucunda ---- */
.slot__key, .slot__count, .slot__name { display: none !important; }
.slot { width: 38px !important; height: 38px !important; padding: 0 !important; display: grid; place-items: center; }
.slot__icon { width: 30px !important; height: 30px !important; margin: 0 !important; }
.slot.is-empty .slot__icon { filter: grayscale(.85) brightness(.55); }
.slot.is-active { box-shadow: inset 0 0 0 2px var(--slot-color, var(--ion)), 0 0 10px -2px var(--slot-color, var(--ion)) !important; }
.console__bays { gap: 5px; padding: 4px 5px; }
.hotbar { gap: 2px; }
.slot-sep { margin: 3px 2px; }
.console__tab { width: 22px; }
.console__tab kbd { display: none; }

/* ---- Genel küçültme ---- */
:root { --dock-w: 208px; --radar-w: 188px; --top-h: 34px; }
@media (min-width: 1700px) { :root { --dock-w: 224px; --radar-w: 204px; } }
.panel { font-size: 12px; }
.win { width: 260px; }
.win--wide { width: 340px; }
.win--ship { width: 290px; }
.win--cargo { width: 280px; }
.win--cargo.win--refine { width: 340px; }
.win__head strong { font-size: 13px; }
.win__grid { font-size: 11.5px; gap: 4px 10px; }
.win__grid dd { font-size: 12px; }
.ship { padding: 8px 10px; gap: 5px; }
.ship__name { font-size: 13px; }
.ship__stats b { font-size: 12.5px; }
.readout { padding: 2px 6px; }
.readout b { font-size: 12px; }
.readout__k { font-size: 8.5px; }
.winbar button, .iconbtn { height: 26px; }
.iconbtn { width: 26px; }
.winbar svg, .iconbtn svg { width: 14px; height: 14px; }
.opt { height: 24px; font-size: 10.5px; }
.opt__fm { width: 26px; height: 16px; }
.console__more { padding: 4px 8px; gap: 10px; }
.chat { width: 270px; }
.chat__log { max-height: 120px; }
.dock { gap: 6px; }
.dock-grip { height: 14px; }

/* ---- Mobil (dokunmatik) ---- */
.touch-mode .slot { width: 42px !important; height: 42px !important; }
.touch-mode .slot__icon { width: 32px !important; height: 32px !important; }
.touch-mode .console__more { max-width: calc(100vw - 16px); overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
.touch-mode .opt-group__items { flex-wrap: nowrap; }
.touch-mode .opt__txt { display: none; }
.touch-mode .opt { padding: 0 4px; height: 30px; }
.touch-mode .opt__fm { width: 30px; height: 18px; }
.touch-mode .opt__ico { width: 20px; height: 20px; }
/* Üst bar: yatay kaydırılabilir, yalnızca Kredi ve Kuvars */
.touch-mode .console-top { gap: 4px; padding: 0 max(6px, env(safe-area-inset-left)); }
.touch-mode .winbar { overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.touch-mode .winbar::-webkit-scrollbar { display: none; }
.touch-mode .winbar button { height: 30px; min-width: 30px; flex: none; }
.touch-mode .readout--level, .touch-mode .readout--honor, .touch-mode .readout--xp, .touch-mode .readout--rank b { display: none; }
.touch-mode .sysbtns .iconbtn:not(#ck-touch-btn):not([data-win="win-settings"]) { display: none; }
/* Pencereler: alttan açılan, ekrana sığan sayfalar */
.touch-mode .win {
    left: 50% !important; top: auto !important; bottom: max(8px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%);
    width: min(420px, calc(100vw - 16px)) !important;
    max-height: min(70vh, calc(100vh - var(--top-h) - 24px));
    z-index: 12;
}
.touch-mode .win__close { width: 34px; height: 34px; font-size: 20px; }
/* Kenar panelleri küçük */
.touch-mode .dock--left { width: 176px; }
.touch-mode .dock--right { width: 150px; }
.touch-mode .ship__stats, .touch-mode .boosts, .touch-mode .ship__sub { display: none; }
.touch-mode .radar .scope { max-height: 120px; }
.touch-mode .dock-grip__x { width: 24px; height: 20px; font-size: 18px; }
.touch-mode .win-banner { top: calc(var(--top-h) + 4px); }
.touch-mode .wb-line { font-size: 11.5px; }
.touch-mode .stick { --size: clamp(96px, 24vmin, 140px); }
@media (max-width: 760px) and (orientation: portrait) {
    .touch-mode .dock--left { width: 150px; }
    .touch-mode .dock--right { width: 128px; }
    .touch-mode .rf-tree { gap: 10px 4px; }
    .touch-mode .rf-tile__img { height: 46px; background-size: 34px, auto; }
}
@media (max-height: 460px) {
    .touch-mode .dock--left .ship { padding: 6px 8px; }
    .touch-mode #ck-mission { display: none; }
    .touch-mode .radar .scope { max-height: 96px; }
}
/* Mobil yatay: eşya çubuğu iki joystick arasında, roket/bırak düğmeleri sağ joystickin üstünde */
@media (orientation: landscape) {
    .touch-mode .console {
        left: 50%; transform: translateX(-50%);
        max-width: calc(100vw - 2 * (max(14px, env(safe-area-inset-left)) + clamp(96px, 24vmin, 140px)) - 30px);
    }
    .touch-mode .console__bays { flex-wrap: wrap; justify-content: center; }
    .touch-mode .slot { width: 36px !important; height: 36px !important; }
    .touch-mode .slot__icon { width: 28px !important; height: 28px !important; }
    .touch-mode .touch__btns {
        right: max(14px, env(safe-area-inset-right)); left: auto; transform: none;
        bottom: calc(max(14px, env(safe-area-inset-bottom)) + clamp(96px, 24vmin, 140px) + 14px);
        grid-auto-flow: column;
    }
    .touch-mode .touch__btn { width: 48px; height: 48px; }
    .touch-mode .notify { left: 50%; right: auto; transform: translateX(-50%); top: calc(var(--top-h) + 6px); bottom: auto; }
}
@media (orientation: portrait) {
    .touch-mode .dock--left { width: 168px; }
    .touch-mode .ship__vit b, .touch-mode .ship .vital b, .touch-mode .ship [id^="ck-hp"], .touch-mode .ship [id^="ck-sh"] { font-size: 10.5px; }
}
.touch-mode .bar__text { font-size: 10px; }
.touch-mode .bar__text b { letter-spacing: .06em; }
.touch-mode .ship__head .lvl { display: none; }
@media (orientation: portrait) { .touch-mode #hp-text, .touch-mode #sh-text { font-size: 9.5px; } }

/* ---------- Eşya çubuğu: kategori düğmeleri + yalnızca seçili kategorinin ikonları ---------- */
.catbar { display: flex; gap: 2px; padding-right: 6px; margin-right: 2px; border-right: 1px solid var(--line); }
.cat {
    display: grid; place-items: center;
    width: 30px; height: 38px; padding: 0;
    border: 1px solid transparent; border-radius: 3px;
    background: rgba(3, 7, 13, .55); cursor: pointer;
}
.cat__icon { width: 22px; height: 22px; background: var(--img) center / contain no-repeat; opacity: .55; filter: grayscale(.5); transition: opacity .15s, filter .15s; }
.cat:hover .cat__icon { opacity: .9; filter: none; }
.cat.is-active { border-color: rgba(63, 224, 240, .55); background: rgba(18, 52, 64, .6); box-shadow: inset 0 0 8px rgba(63, 224, 240, .25); }
.cat.is-active .cat__icon { opacity: 1; filter: none; }
.hotbar--fm { display: flex; gap: 2px; }
.slot--fm .slot__icon { background-size: cover !important; border-radius: 3px; }
/* Yalnızca seçili kategori görünür; tüm ikonlar aynı boyut */
.console[data-cat] #hotbar .slot, .console[data-cat] #techbar .slot, .console[data-cat] #fmbar .slot { display: none; }
.console[data-cat="laser"] .slot[data-cat="laser"],
.console[data-cat="rocket"] .slot[data-cat="rocket"],
.console[data-cat="mine"] .slot[data-cat="mine"],
.console[data-cat="tech"] .slot[data-cat="tech"],
.console[data-cat="ability"] .slot[data-cat="ability"],
.console[data-cat="formation"] .slot[data-cat="formation"] { display: grid !important; }
.console[data-cat] .slot-sep { display: none; }
.console[data-cat] .hotbar--tech { padding-left: 0; border-left: 0; }
.console[data-cat]:not([data-cat="laser"]):not([data-cat="rocket"]) #hotbar,
.console[data-cat]:not([data-cat="tech"]):not([data-cat="ability"]):not([data-cat="mine"]) #techbar,
.console[data-cat]:not([data-cat="formation"]) #fmbar { display: none; }
.console__bays { min-width: 0; }
.touch-mode .cat { width: 36px; height: 40px; }
.touch-mode .cat__icon { width: 24px; height: 24px; }
/* Mobilde tam ekran ve güvenli çıkış düğmeleri görünür */
.touch-mode .sysbtns #ck-fullscreen, .touch-mode .sysbtns #logout-btn { display: grid !important; }
/* Mobil: kenar panelleri ve pencereler daha küçük */
.touch-mode .dock { zoom: .8; }
.touch-mode .win { zoom: .9; }
.touch-mode .console { zoom: .92; }
@media (max-height: 460px) { .touch-mode .dock { zoom: .72; } }

/* =====================================================================
   SABİT EŞYA ÇUBUĞU + TAB MENÜSÜ (kategoriler ve eşyalar üstte açılır)
   ===================================================================== */
.legacy-bar, #ck-more { display: none !important; }
.quickbar { display: flex; gap: 3px; }
.qslot { --slot-color: var(--ion); }
.qslot.is-blank { background: rgba(3, 7, 13, .35); border-style: dashed; }
.qslot.is-blank .slot__icon { background: none; }
.qslot.is-over { box-shadow: inset 0 0 0 2px #7BD99F, 0 0 10px -2px #7BD99F !important; }
.qslot.is-drag { opacity: .35; }
.slot.is-wide .slot__icon { background-size: cover !important; border-radius: 3px; height: 22px !important; }
.qb-menu {
    display: grid; justify-items: center; gap: 5px;
    margin-bottom: 4px; pointer-events: auto;
}
.qb-menu[hidden] { display: none; }
.qb-row {
    display: flex; gap: 3px; padding: 4px 5px;
    border: 1px solid var(--line); border-radius: 3px;
    background: rgba(5, 11, 20, .86);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: none;
    animation: winIn .15s var(--ease);
}
.qb-row[hidden] { display: none; }
.qb-row--items .slot { cursor: grab; }
.qb-row--items .slot.is-picked { box-shadow: inset 0 0 0 2px var(--gold), 0 0 10px -2px var(--gold) !important; }
.qb-row--cats .cat { width: 34px; height: 34px; }
.qb-empty { color: var(--muted); padding: 0 10px; font-size: 12px; align-self: center; }
.qb-hint { margin: 0; color: var(--muted); font-size: 10px; letter-spacing: .04em; text-shadow: 0 1px 2px #000; }
.touch-mode .qb-hint { display: none; }
.console.is-expanded .console__tab svg { transform: rotate(180deg); }

/* =====================================================================
   MOBİL v3: 2× joystick, ortalanmış çubuklar, sağ joystick çevresinde 9 eşya düğmesi,
   büyük üst düğmeler, sohbet sol üstte
   ===================================================================== */
.touch-mode { --top-h: 62px; }
.touch-mode .stick {
    --size: clamp(180px, 46vmin, 280px) !important;
    bottom: max(5vh, env(safe-area-inset-bottom)) !important;
}
.touch-mode .stick--move { left: max(7vw, env(safe-area-inset-left)) !important; }
.touch-mode .stick--aim { right: max(9vw, env(safe-area-inset-right)) !important; }
@media (orientation: portrait) {
    .touch-mode .stick { --size: clamp(150px, 40vw, 220px) !important; bottom: max(4vh, env(safe-area-inset-bottom)) !important; }
    .touch-mode .stick--move { left: max(4vw, env(safe-area-inset-left)) !important; }
    .touch-mode .stick--aim { right: max(12vw, env(safe-area-inset-right)) !important; }
}
.touch-mode .stick__knob { width: 40%; height: 40%; }
.touch-mode .stick__label { font-size: 11px; }
.touch__btns { display: none !important; }

/* Sağ joystickin çevresinde 9 eşya düğmesi (alttaki barın 1–9 yuvaları) */
.touch__ring {
    position: absolute;
    right: max(9vw, env(safe-area-inset-right)); bottom: max(5vh, env(safe-area-inset-bottom));
    width: clamp(180px, 46vmin, 280px); height: clamp(180px, 46vmin, 280px);
    pointer-events: none;
}
@media (orientation: portrait) {
    .touch__ring { right: max(12vw, env(safe-area-inset-right)); bottom: max(4vh, env(safe-area-inset-bottom)); width: clamp(150px, 40vw, 220px); height: clamp(150px, 40vw, 220px); }
}
.tq-btn {
    --a: calc(150deg + var(--i) * 20.6deg);
    --r: calc(50% + 0px);
    position: absolute; left: 50%; top: 50%;
    width: 46px !important; height: 46px !important; margin: -23px 0 0 -23px;
    transform: rotate(var(--a)) translateX(calc(clamp(180px, 46vmin, 280px) / 2 + 30px)) rotate(calc(-1 * var(--a)));
    border-radius: 50% !important;
    pointer-events: auto;
    background: rgba(6, 12, 22, .78) !important;
    box-shadow: inset 0 0 0 1px rgba(120, 170, 210, .35) !important;
}
@media (orientation: portrait) {
    .tq-btn { width: 40px !important; height: 40px !important; margin: -20px 0 0 -20px; transform: rotate(var(--a)) translateX(calc(clamp(150px, 40vw, 220px) / 2 + 24px)) rotate(calc(-1 * var(--a))); }
}
.tq-btn .slot__icon { width: 30px !important; height: 30px !important; }
.tq-btn.is-active { box-shadow: inset 0 0 0 2px var(--gold), 0 0 12px -2px var(--gold) !important; }
.tq-btn.is-blank { opacity: .45; }
.tq-btn .slot__cd { border-radius: 50%; }

/* Mobilde alttaki bar yerine halka kullanılır; Tab menüsü düğmesi ortada kalır */
.touch-mode .quickbar { display: none; }
.touch-mode .console { bottom: max(6px, env(safe-area-inset-bottom)) !important; zoom: 1 !important; }
.touch-mode .console__bays { padding: 2px; background: none; border: 0; box-shadow: none; }
.touch-mode .console__tab { width: 44px; height: 32px; }

/* Üst sol ve üst sağ düğmeler 2× */
.touch-mode .winbar button { height: 54px !important; min-width: 54px; padding: 0 10px; }
.touch-mode .winbar svg { width: 26px !important; height: 26px !important; }
.touch-mode .sysbtns .iconbtn, .touch-mode .iconbtn { width: 54px !important; height: 54px !important; }
.touch-mode .iconbtn svg { width: 26px !important; height: 26px !important; }
.touch-mode .readout { padding: 6px 10px; }
.touch-mode .readout b { font-size: 16px; }
.touch-mode .readout--rank img { width: 28px; height: 28px; }

/* Sohbet düğmesi sol üstte; pilot paneli onun altında */
.touch-mode #ck-chat {
    top: calc(var(--top-h) + 6px) !important; bottom: auto !important; left: max(8px, env(safe-area-inset-left)) !important;
    z-index: 9;
}
.touch-mode #ck-chat.is-collapsed { width: 54px !important; height: 54px !important; }
.touch-mode #ck-chat.is-collapsed > .collapse-btn, .touch-mode #ck-chat.is-collapsed > .collapse-btn svg { width: 54px !important; height: 54px !important; }
.touch-mode #ck-chat.is-collapsed > .collapse-btn svg { padding: 14px; }
.touch-mode #ck-chat:not(.is-collapsed) { width: min(340px, calc(100vw - 16px)) !important; }
.touch-mode .dock--left { top: calc(var(--top-h) + 68px) !important; }

/* =====================================================================
   MOBİL v4: halka sağ joystickin içinde, paneller sıkışmasın, HUD düzenleyici
   ===================================================================== */
.touch__ring { position: absolute !important; inset: 0 !important; right: auto !important; bottom: auto !important; width: 100% !important; height: 100% !important; pointer-events: none; }
.tq-btn {
    --a: calc(140deg + var(--i) * 16.9deg);
    transform: rotate(var(--a)) translateX(calc(var(--size) / 2 + 30px)) rotate(calc(-1 * var(--a))) !important;
}
@media (orientation: portrait) {
    .tq-btn { transform: rotate(var(--a)) translateX(calc(var(--size) / 2 + 24px)) rotate(calc(-1 * var(--a))) !important; }
}
/* Kenar panelleri: konteyner değil panelin kendisi küçülür (HUD düzenleyiciyle uyumlu) */
.touch-mode .dock { zoom: 1 !important; transform: none !important; }
.touch-mode .dock > .panel { zoom: .7; }
@media (orientation: landscape) and (max-height: 460px) {
    .touch-mode .dock > .panel { zoom: .58; }
    .touch-mode .stick { --size: clamp(160px, 44vmin, 260px) !important; }
}
.touch-mode .dock--left { top: calc(var(--top-h) + 64px) !important; }

/* HUD düzenleme katmanı */
.hud-edit { position: fixed; inset: 0; z-index: 200; background: rgba(2, 6, 12, .35); touch-action: none; }
.hud-edit__bar {
    position: fixed; left: 50%; top: max(8px, env(safe-area-inset-top)); transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
    padding: 8px 12px; border: 1px solid rgba(63, 224, 240, .5); border-radius: 4px;
    background: rgba(5, 11, 20, .95); color: var(--text); font-size: 12px; z-index: 2;
    max-width: calc(100vw - 16px);
}
.hud-edit__bar strong { color: var(--ion); letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }
.hud-edit__bar span { color: var(--muted); }
.hud-edit__bar button { height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 3px; background: rgba(3, 7, 13, .8); color: var(--text); font: 600 12px var(--display); cursor: pointer; }
.hud-edit__bar button.is-primary { border-color: var(--ion); background: rgba(18, 52, 64, .9); color: #fff; }
.hud-edit__frame {
    position: fixed; box-sizing: border-box;
    border: 2px dashed rgba(63, 224, 240, .85); border-radius: 4px;
    background: rgba(63, 224, 240, .08); cursor: move; touch-action: none;
}
.hud-edit__label { position: absolute; left: 4px; top: 2px; padding: 1px 6px; border-radius: 2px; background: rgba(5, 11, 20, .9); color: #CFF6FF; font: 600 10px var(--display); white-space: nowrap; pointer-events: none; }
.hud-edit__size {
    position: absolute; right: -10px; bottom: -10px; width: 26px; height: 26px; border-radius: 50%;
    background: var(--ion); box-shadow: 0 0 0 3px rgba(5, 11, 20, .9); cursor: nwse-resize; touch-action: none;
}
.touch-mode .hud-edit__size { width: 34px; height: 34px; right: -14px; bottom: -14px; }
.settings--hud .settings__row { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.btn-ghost-sm { height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 3px; background: rgba(3, 7, 13, .7); color: var(--text-2); font: 600 12px var(--display); cursor: pointer; }
.btn-ghost-sm:hover { border-color: var(--ion); color: #fff; }

/* =====================================================================
   MOBİL v5: dokunma sorunu (joystick alanları düğmeleri örtmesin), 2× minik düğmeler,
   saydam radar, sabit açılan eşya menüsü, sohbet düğmesi üst barda
   ===================================================================== */
/* Joystickler arayüzün ALTINDA: paneller, düğmeler ve pencereler her zaman dokunulabilir */
.touch-mode .touch { z-index: 3 !important; }
.touch-mode .dock, .touch-mode #ck-chat, .touch-mode .console, .touch-mode .console-top { z-index: 9 !important; }
.touch-mode .win { z-index: 14 !important; }
.touch-mode .stick { z-index: 1; }
@media (orientation: portrait) {
    /* dikeyde iki joystick ortadaki menü düğmesini örtmesin */
    .touch-mode .stick { --size: clamp(140px, 37vw, 210px) !important; }
    .touch-mode .stick--move { left: max(3vw, env(safe-area-inset-left)) !important; }
    .touch-mode .stick--aim { right: max(3vw, env(safe-area-inset-right)) !important; }
}

/* Minik düğmeler 2× */
.touch-mode .dock-grip { height: 34px; margin: -4px -4px 6px; }
.touch-mode .dock-grip__t { font-size: 12px; }
.touch-mode .dock-grip__x { width: 44px !important; height: 34px !important; font-size: 26px !important; }
.touch-mode .collapse-btn { width: 44px !important; height: 44px !important; }
.touch-mode .collapse-btn svg { width: 22px !important; height: 22px !important; }
.touch-mode .win__close { width: 48px !important; height: 48px !important; font-size: 28px !important; }
.touch-mode .console__tab { width: 76px !important; height: 52px !important; }
.touch-mode .console__tab svg { width: 24px; height: 24px; }
.touch-mode .qb-row .slot, .touch-mode .qb-row .cat { width: 56px !important; height: 56px !important; }
.touch-mode .qb-row .slot__icon, .touch-mode .qb-row .cat__icon { width: 38px !important; height: 38px !important; }
.touch-mode .tq-btn { width: 56px !important; height: 56px !important; margin: -28px 0 0 -28px !important; }
.touch-mode .tq-btn .slot__icon { width: 36px !important; height: 36px !important; }
.touch-mode .tq-btn { transform: rotate(var(--a)) translateX(calc(var(--size) / 2 + 36px)) rotate(calc(-1 * var(--a))) !important; }
.touch-mode .opt, .touch-mode .rf-chip, .touch-mode .win-tabs button { min-height: 44px; }

/* Radar: çerçeve saydam */
.radar, .radar .scope { background: transparent !important; border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.radar::before, .radar::after, .radar .scope::before, .radar .scope::after { display: none !important; }
.radar .status, .radar .dock-grip { text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, .8); border-color: transparent; }

/* Eşya menüsü: konsolun üstünde ayrı katman — açılırken alttaki düğme yerinden oynamaz */
.console { position: absolute; }
.qb-menu {
    position: absolute; left: 50%; bottom: calc(100% + 6px);
    transform: translateX(-50%);
    width: max-content; max-width: calc(100vw - 16px);
    margin: 0;
}

/* Sohbet düğmesi üst barda (mobil); sohbetin kendi daraltılmış simgesi gizli */
.winbar__chat { display: none; }
.touch-mode .winbar__chat { display: inline-flex; }
.touch-mode #ck-chat.is-collapsed { display: none !important; }
.touch-mode #ck-chat:not(.is-collapsed) { top: calc(var(--top-h) + 6px) !important; }
.touch-mode .dock--left { top: calc(var(--top-h) + 8px) !important; }
/* Dikey telefon: üst bar iki satır — üstte menü düğmeleri, altta bakiye ve sistem düğmeleri */
@media (orientation: portrait) {
    .touch-mode { --top-h: 124px; }
    .touch-mode .console-top { flex-wrap: wrap; height: auto !important; row-gap: 4px; align-content: flex-start; padding-top: max(4px, env(safe-area-inset-top)); }
    .touch-mode .winbar { flex: 1 0 100%; order: 1; }
    .touch-mode .readouts { order: 2; }
    .touch-mode .sysbtns { order: 3; margin-left: auto; }
}
/* Dikeyde halka: iki kat yay, düğmeler joystickin solunda ve üstünde (ekrandan taşmaz, menüyü örtmez) */
@media (orientation: portrait) {
    .touch-mode .tq-btn { width: 50px !important; height: 50px !important; margin: -25px 0 0 -25px !important; }
    .touch-mode .tq-btn:nth-child(-n+5) { --a: calc(188deg + var(--i) * 24deg); transform: rotate(var(--a)) translateX(calc(var(--size) / 2 + 32px)) rotate(calc(-1 * var(--a))) !important; }
    .touch-mode .tq-btn:nth-child(n+6) { --a: calc(196deg + (var(--i) - 5) * 26deg); transform: rotate(var(--a)) translateX(calc(var(--size) / 2 + 88px)) rotate(calc(-1 * var(--a))) !important; }
}

/* =====================================================================
   MOBİL v6: pencere görünümlü panel başlıkları, tam dokunulabilir üst düğmeler,
   üst-orta bildirimler, ayraç kaldırıldı
   ===================================================================== */
/* Pilot / görev / radar başlıkları diğer pencereler (Komuta, Gemi…) gibi: koyu başlık şeridi, sürükle-taşı, × */
.dock-grip {
    position: relative;
    height: 28px !important; margin: -8px -10px 8px !important; padding: 0 4px 0 12px !important;
    background: rgba(6, 13, 24, .94); border-bottom: 1px solid var(--line) !important;
    cursor: move;
}
.dock-grip::after { content: ""; position: absolute; left: 12px; bottom: -1px; width: 40px; height: 1px; background: var(--ion); }
.dock-grip__t { color: var(--text) !important; font: 700 11px/1 var(--display) !important; letter-spacing: .14em !important; }
.radar .dock-grip { background: rgba(6, 13, 24, .55); }
.touch-mode .dock-grip { height: 40px !important; }
.touch-mode .dock-grip__t { font-size: 13px !important; }

/* Radar sonrası tek çizgi ayracı kaldırıldı */
.winbar__dock--last { margin-right: 0 !important; }
.winbar__dock--last::before { display: none !important; }

/* Üst düğmeler: ekranın en üst kenarı (sistem kaydırma alanı) dışında, kutunun tamamı dokunulabilir */
.touch-mode .console-top { padding-top: max(10px, env(safe-area-inset-top)) !important; }
.touch-mode { --top-h: 72px; }
@media (orientation: portrait) { .touch-mode { --top-h: 134px; } }
.touch-mode .winbar { overflow-x: auto; overflow-y: hidden; contain: paint; }
.touch-mode .winbar button, .touch-mode .iconbtn { touch-action: manipulation; position: relative; }
.touch-mode .winbar button > *, .touch-mode .iconbtn > * { pointer-events: none; }
.touch-mode .readouts { flex: none; }

/* Ödül ve bilgi yazıları: oyun ekranının tam üst ortasında, boşluksuz */
.win-banner { top: var(--top-h) !important; gap: 0 !important; }
.notify {
    top: calc(var(--top-h) + 2px) !important; right: auto !important; left: 50% !important;
    transform: translateX(-50%); align-items: center; width: min(420px, calc(100vw - 16px)) !important;
    pointer-events: none;
}
.notify > * { pointer-events: auto; }
.win-banner:not(:empty) ~ .notify { top: calc(var(--top-h) + 24px) !important; }
.touch-mode .tip { display: none !important; }   /* dokunmatikte ipucu baloncukları ekranda asılı kalmasın */

/* =====================================================================
   MASAÜSTÜ / RADAR YAZILARI
   ===================================================================== */
/* Masaüstü üst düğmeler %20 büyük */
html:not(.touch-mode) .winbar button { height: 31px !important; padding: 0 8px; }
html:not(.touch-mode) .winbar svg { width: 17px !important; height: 17px !important; }
html:not(.touch-mode) .iconbtn { width: 31px !important; height: 31px !important; }
html:not(.touch-mode) .iconbtn svg { width: 17px !important; height: 17px !important; }
html:not(.touch-mode) .readout { padding: 3px 8px; }
html:not(.touch-mode) .readout b { font-size: 14px; }
html:not(.touch-mode) .readout__k { font-size: 10px; }
html:not(.touch-mode) { --top-h: 40px; }

/* Masaüstü: görev takipçisi düğmesi ve sohbetin (iletişim) daraltma düğmesi yok */
html:not(.touch-mode) [data-dock="tracker"] { display: none !important; }
html:not(.touch-mode) #ck-chat > .collapse-btn { display: none !important; }

/* Radar başlığı, harita adı ve koordinat yazıları %70 küçük */
.radar .dock-grip__t { font-size: 7px !important; letter-spacing: .1em !important; }
.radar #map-name { font-size: 7px !important; line-height: 1.1 !important; letter-spacing: .04em !important; }
.radar .status__coords, .radar #coords { font-size: 7px !important; }
.radar .dock-grip { height: 16px !important; }
.radar .status { gap: 2px; padding-top: 0; }

/* Mobil: radarın "RADAR" yazısı yok, yer kaplamaz; × köşede küçük durur */
.touch-mode .radar .dock-grip {
    position: absolute !important; top: 0; right: 0; left: auto;
    height: auto !important; margin: 0 !important; padding: 0 !important;
    background: none !important; border: 0 !important; z-index: 2;
}
.touch-mode .radar .dock-grip::after, .touch-mode .radar .dock-grip__t { display: none !important; }
html:not(.touch-mode) .winbar .winbar__chat { display: none !important; }   /* sohbet düğmesi yalnızca mobilde */

/* Sohbet kanalları: Global, Şirket, Klan, Grup */
.chat__log .ch-global .chan { color: #FFD27A; }
.chat__log .ch-faction .chan { color: #7FD4F0; }
.chat__log .ch-map .chan { color: #AEB7CC; }
.chat__tabs { display: flex; flex-wrap: wrap; }
.touch-mode .chat__tabs button { min-height: 40px; padding: 0 12px; }

/* Görev takipçisi ekranı kaldırıldı (görev kontrolü penceresi — Q — kalır) */
#ck-mission, [data-dock="tracker"] { display: none !important; }

/* Pilot paneli: arka plan tüm paneli kaplar (yarı saydam cam efekti ölçek/taşıma ile bölünüyordu) */
.ship {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 30%),
        rgba(8, 14, 22, .93) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    overflow: hidden;
    box-sizing: border-box;
}
.ship > * { max-width: 100%; }

/* ==================== Büyük harita (client/bigmap.js) ==================== */
#minimap { cursor: zoom-in; }
.bigmap {
    position: fixed; inset: 0; z-index: 150;
    display: grid; place-items: center;
    padding: clamp(8px, 3vw, 40px);
    background: rgba(2, 5, 10, .62);
    backdrop-filter: blur(2px);
}
.bigmap[hidden] { display: none; }
.bigmap__panel {
    display: grid; grid-template-rows: auto 1fr auto;
    width: min(1200px, 100%); height: min(820px, 100%);
    border: 1px solid rgba(63, 224, 240, .32);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(24, 32, 42, .97), rgba(8, 12, 18, .97));
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05);
    overflow: hidden;
}
.bigmap__head {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px 8px 14px;
    background: linear-gradient(180deg, #232D39, #141B24);
    border-bottom: 1px solid #05080B;
}
.bigmap__sys { font: 500 10px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ion); opacity: .8; }
.bigmap__title { font: 600 15px/1.2 var(--display); color: var(--text); }
.bigmap__coords { margin-left: auto; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.bigmap__close {
    width: 28px; height: 28px;
    border: 1px solid transparent; border-radius: 2px;
    background: none; color: var(--muted);
    font-size: 18px; line-height: 1; cursor: pointer;
}
.bigmap__close:hover { border-color: rgba(255, 77, 94, .45); background: rgba(255, 77, 94, .08); color: #FF9CA5; }
.bigmap__stage { position: relative; min-height: 0; }
.bigmap__canvas { position: absolute; inset: 0; display: block; cursor: default; touch-action: none; }
.bigmap__foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
    padding: 8px 14px;
    border-top: 1px solid rgba(120, 196, 228, .12);
    font-size: 11.5px; color: var(--text-2);
}
.bigmap__foot span { display: inline-flex; align-items: center; gap: 6px; }
.bigmap__hint { margin-left: auto; color: var(--muted); }
.bm-key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.bm-key--me { width: 0; height: 0; border-radius: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid #E8FDFF; }
.bm-key--foe { background: #FF4D5E; }
.bm-key--npc { background: rgba(179, 193, 214, .85); }
.bm-key--ally { background: #3FE0F0; }
.bm-key--portal { border-radius: 0; transform: rotate(45deg); border: 2px solid #B9AEFF; width: 7px; height: 7px; }
.bm-key--base { border-radius: 0; background: #3FE0F0; }
@media (max-width: 760px) {
    .bigmap { padding: 0; }
    .bigmap__panel { width: 100%; height: 100%; border-radius: 0; }
    .bigmap__hint { display: none; }
    .bigmap__sys { display: none; }
}

/* Pilot paneli başlığı: kapatma düğmesi artık üst şeritte; pilot adı için yer aç */
.ship .ship__head { padding-right: 0; gap: 6px; }
.ship .ship__head strong { font-size: 14px; letter-spacing: .03em; }
.ship .ship__head .lvl { padding: 3px 5px 2px; letter-spacing: .06em; }

/* Galaksi Kapıları penceresi */
.gate-list { display: grid; gap: 8px; margin: 8px 0; }
.gate-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid rgba(120, 196, 228, .16); border-radius: 3px; background: rgba(255, 255, 255, .03); }
.gate-row > div { display: grid; gap: 2px; font-size: 12px; }
.gate-row strong { font-size: 13px; letter-spacing: .04em; }
.gate-row .btn-attack { min-width: 72px; }

.gate-row .gate-pic { flex: none; width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(127, 232, 255, .35)); }
.gate-row > div { flex: 1; }

/* ---------- Eşya menüsü: Satın al kategorisi (oyun içi mağaza) ---------- */
.cat--shop .cat__icon { opacity: .85; filter: none; }
.qb-row--shop {
    flex-direction: column; gap: 4px; padding: 8px;
    width: min(600px, calc(100vw - 16px)); max-height: 48vh; overflow-y: auto; scrollbar-width: thin;
}
.shop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px 4px; border-bottom: 1px solid var(--line); }
.shop-head strong { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold, #F2C55C); }
.shop-head__bal { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.shop-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 4px; border-radius: 3px; }
.shop-item:hover { background: rgba(255, 255, 255, .04); }
.shop-item__icon { width: 38px; height: 38px; background: var(--img) center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
.shop-item__info { display: grid; gap: 2px; min-width: 0; }
.shop-item__info b { font-size: 12.5px; font-weight: 700; }
.shop-item__info small { color: var(--muted); font-size: 10.5px; line-height: 1.25; }
.shop-item__packs { display: flex; gap: 4px; }
.shop-pack {
    display: grid; justify-items: center; gap: 1px; min-width: 66px; padding: 4px 6px;
    border: 1px solid rgba(242, 197, 92, .35); border-radius: 3px; cursor: pointer;
    background: linear-gradient(180deg, rgba(242, 197, 92, .16), rgba(242, 197, 92, .04));
    color: #F6E7BE; font: inherit;
    transition: border-color .15s, background-color .15s, filter .15s;
}
.shop-pack b { font-size: 12px; }
.shop-pack span { font-size: 10px; color: #CDB98A; font-variant-numeric: tabular-nums; }
.shop-pack:hover:not(:disabled) { border-color: #F2C55C; filter: brightness(1.2); }
.shop-pack:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 560px) {
    .shop-item { grid-template-columns: 32px minmax(0, 1fr); }
    .shop-item__packs { grid-column: 1 / -1; }
    .shop-pack { flex: 1; min-width: 0; }
}
.touch-mode .shop-pack { min-height: 44px; }

/* ==============================================================   v7: EŞYA ÇUBUĞU + EŞYA MENÜSÜ TEK BLOK, GRUPLU ÜST DÜĞMELER,
   MOBİLDE TARAYICI PENCERELERİ (uzun bas menüsü, metin arama, seçim) KAPALI
   ===================================================================== */
/* Tab menüsü çubuğun hemen üstüne yapışık, aynı çerçeve ve zeminle tek parça görünür */
.qb-menu {
    bottom: 100% !important; gap: 4px !important; margin: 0 !important;
    min-width: 100%; box-sizing: border-box;
    padding: 5px 6px 4px;
    border: 1px solid #05080B; border-bottom: 0; border-radius: 3px 3px 0 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 40%),
        linear-gradient(180deg, #202A35, #0D1319);
    box-shadow: inset 0 1px 0 var(--steel-hi), 0 -10px 30px -14px #000;
    animation: winIn .15s var(--ease);
}
.qb-menu .qb-row {
    border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none; animation: none;
    max-width: calc(100vw - 28px);
}
.qb-menu .qb-row--items:not([hidden]) + .qb-row--cats { padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, .07); }
.console.is-expanded .console__bays { clip-path: none; border-top-left-radius: 0; border-top-right-radius: 0; }
/* Çubuk ekranın üst kısmına taşındıysa menü aşağı doğru açılır */
.console.qb-down .qb-menu { bottom: auto !important; top: 100%; border: 1px solid #05080B; border-top: 0; border-radius: 0 0 3px 3px; flex-direction: column-reverse; }
.console.qb-down .qb-menu { display: flex; align-items: center; }
.console.qb-down .qb-menu[hidden] { display: none; }
.console.qb-down .qb-menu .qb-row--items:not([hidden]) + .qb-row--cats { padding-top: 0; border-top: 0; padding-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
/* Mobil: çubuk yerine yalnızca Tab düğmesi var; menü düğmenin üstünde aynı blok */
.touch-mode .console.is-expanded .console__tab { border-top-left-radius: 0; border-top-right-radius: 0; }
.touch-mode .qb-menu { min-width: 0; }

/* Üst düğme grupları: HUD düzenleyicide tek blok taşınır */
.winbar, .sysbtns { box-sizing: border-box; }

/* HUD düzenleme çubuğu ekranın ortasında: üst düğme gruplarının çerçevelerini örtmez */
.hud-edit__bar { top: 50% !important; transform: translate(-50%, -50%) !important; }

/* Dokunmatik: uzun basınca açılan tarayıcı menüsü, "dokun ve ara" penceresi, metin seçimi ve vurgu yok */
.hud, .hud *, .touch, .touch * { -webkit-touch-callout: none; }
.touch-mode body, .touch-mode .hud, .touch-mode .touch {
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.touch-mode .hud input, .touch-mode .hud textarea, .touch-mode .hud select {
    -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}
.touch-mode .console-top img, .touch-mode .console-top svg { -webkit-user-drag: none; pointer-events: none; }
.touch-mode .console-top button, .touch-mode .console-top .readout { touch-action: manipulation; }
.hud-spacer { flex: none; pointer-events: none; visibility: hidden; }

/* =====================================================================
   v8: ÜST SOL DÜĞMELER KAYMAZ (hepsi sığar), EŞYA HALKASI AYARLARI
   ===================================================================== */
/* Mobil: sol üst düğmeler yatay kaydırma yerine sığacak kadar küçülür, tek sıra düz durur */
.touch-mode .winbar {
    overflow: visible !important; contain: none !important;
    flex: 1 1 auto; min-width: 0; flex-wrap: nowrap;
}
.touch-mode .winbar button {
    flex: 1 1 0 !important; min-width: 0 !important; max-width: 54px;
    height: auto !important; max-height: 54px; aspect-ratio: 1;
    padding: 0 !important; justify-content: center;
}
.touch-mode .winbar svg { width: min(26px, 60%) !important; height: auto !important; aspect-ratio: 1; }

/* Halka düğmeleri JS ile yerleştirilir; eski açı kuralları devre dışı */
.tq-btn { --a: 0deg; }

/* Dikey: sol üst düğmeler ilk satırın tamamını kaplar */
@media (orientation: portrait) { .touch-mode .winbar { flex: 1 0 100% !important; } }

/* HUD düzenleyici: eşya halkası ayar paneli */
.hud-ring { flex: 1 0 100%; display: grid; gap: 6px; }
.hud-ring__toggle {
    height: 30px !important; border-color: rgba(63, 224, 240, .4) !important; color: var(--ion) !important;
}
.hud-ring__grid { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 4px 14px; }
.hud-ring__grid[hidden] { display: none; }
.hud-ring__row { display: grid; grid-template-columns: 52px 32px 50px 32px; align-items: center; gap: 3px; }
.hud-ring__k { color: var(--text-2) !important; font-size: 11px; white-space: nowrap; overflow: hidden; }
.hud-ring__row b { text-align: center; font: 600 12px var(--display); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud-ring__row button { width: 32px; height: 30px !important; padding: 0 !important; font-size: 18px !important; line-height: 1; touch-action: manipulation; }
.hud-ring__def { grid-column: 1 / -1; justify-self: center; height: 28px !important; }
/* Mobil: düzenleme çubuğu halkayı örtmesin — yatayda sol yarıda, dikeyde üst-ortada */
.touch-mode .hud-edit__bar { max-height: calc(100vh - 16px); overflow-y: auto; padding: 6px 8px; gap: 6px; }
.touch-mode .hud-edit__bar > span { display: none; }
@media (orientation: landscape) {
    .touch-mode .hud-edit__bar { left: max(8px, env(safe-area-inset-left)) !important; top: 50% !important; transform: translateY(-50%) !important; max-width: min(400px, 52vw); }
}
@media (orientation: portrait) {
    .touch-mode .hud-edit__bar { top: 24% !important; transform: translateX(-50%) !important; }
}

/* =====================================================================
   v9: GRAFİK AYARLARI, FPS GÖSTERGESİ
   ===================================================================== */
.settings--gfx { display: grid; gap: 8px; }
.seg { display: flex; gap: 4px; flex-wrap: wrap; }
.seg button {
    flex: 1 1 0; min-height: 32px; padding: 0 10px;
    border: 1px solid var(--line-2); border-radius: 3px;
    background: rgba(3, 7, 13, .7); color: var(--text-2);
    font: 600 12px var(--display); letter-spacing: .04em; cursor: pointer; white-space: nowrap;
}
.seg button:hover { border-color: rgba(63, 224, 240, .5); color: #fff; }
.seg button.is-active { border-color: var(--ion); background: rgba(18, 52, 64, .9); color: #fff; box-shadow: inset 0 0 0 1px rgba(63, 224, 240, .35); }
.touch-mode .seg button { min-height: 44px; }
.fps-meter {
    position: fixed; left: 50%; bottom: 2px; transform: translateX(-50%); z-index: 30;
    padding: 1px 6px; border-radius: 2px; background: rgba(3, 7, 13, .7);
    color: #7BD99F; font: 600 10px/1.4 var(--display); font-variant-numeric: tabular-nums; pointer-events: none;
}
.fps-meter[hidden] { display: none; }
=======
/* ---- Roketatar: eşya çubuğunda dolum rozeti ---- */
.slot__badge { position: absolute; right: 2px; bottom: 1px; z-index: 2; font: 700 10px/1 var(--font-display, sans-serif); color: #FFE2B8; text-shadow: 0 1px 2px #000; pointer-events: none; }
.slot.is-ready { box-shadow: inset 0 0 0 2px #FFB040, 0 0 12px -2px #FFB040; animation: slot-ready 0.9s ease-in-out infinite alternate; }
.slot.is-ready .slot__badge { color: #FFFFFF; }
@keyframes slot-ready { from { filter: brightness(1); } to { filter: brightness(1.35); } }

/* =====================================================================
   v10: ISINMA — telefonda ekran kartını yoran efektler kapalı
   ===================================================================== */
/* Bulanık cam (backdrop-filter): altındaki oyun görüntüsü her karede değiştiği için her karede yeniden hesaplanır.
   Dokunmatikte her kalitede, masaüstünde Düşük/Orta'da kapalı; panel zemini biraz koyulaşır */
.touch-mode *, .touch-mode *::before, .touch-mode *::after,
.gfx-low *, .gfx-low *::before, .gfx-low *::after,
.gfx-medium *, .gfx-medium *::before, .gfx-medium *::after {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.touch-mode .winbar button, .touch-mode .iconbtn, .touch-mode .readout { background: rgba(6, 10, 18, .72) !important; }
.touch-mode .stick__ring { background-color: rgba(6, 12, 22, .35); }
/* Sürekli dönen süs animasyonları (radar taraması, bar parıltısı, nabız) Düşük/Orta'da ve telefonda bir kez oynar */
.touch-mode:not(.gfx-high) *, .touch-mode:not(.gfx-high) *::before, .touch-mode:not(.gfx-high) *::after,
.gfx-low *, .gfx-low *::before, .gfx-low *::after,
.gfx-medium *, .gfx-medium *::before, .gfx-medium *::after {
    animation-iteration-count: 1 !important;
}
.gfx-low .scope__sweep, .gfx-medium .scope__sweep, .touch-mode:not(.gfx-high) .scope__sweep { display: none; }

/* =====================================================================
   v8: MASAÜSTÜ EŞYA MENÜSÜ — ikonun altında kısa ad (mobildeki gibi), mağaza ikon ızgarası
   ===================================================================== */
html:not(.m-lite) #qb-items:not(.qb-row--shop) .slot {
    width: 58px !important; height: 60px !important;
    display: grid !important; place-items: center; align-content: center; gap: 3px; padding: 3px 2px !important;
}
html:not(.m-lite) #qb-items:not(.qb-row--shop) .slot__icon { width: 32px !important; height: 32px !important; }
html:not(.m-lite) #qb-items .slot__name,
html:not(.m-lite) #qb-cats .cat__name {
    display: block !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 600 9.5px/1.15 "Figtree", system-ui, sans-serif; color: #CFE3F2; text-align: center; letter-spacing: .01em; text-transform: none;
}
html:not(.m-lite) #qb-cats .cat { height: auto !important; min-height: 54px; display: grid; place-items: center; align-content: center; gap: 3px; padding: 4px 2px; }
html:not(.m-lite) #qb-cats .cat__name { font-size: 9px; color: #9FB4C8; }
html:not(.m-lite) #qb-cats .cat.is-active .cat__name { color: #FFD27A; }

/* Mağaza: ikon ızgarası, seçilen ürünün paketleri üstte */
html:not(.m-lite) .qb-row--shop { width: min(640px, calc(100vw - 16px)); gap: 8px; max-height: 56vh; }
html:not(.m-lite) .shopx-head { padding: 8px 10px; gap: 8px; }
html:not(.m-lite) .shopx-head__top { font-size: 14px; }
html:not(.m-lite) .shopx-head__top span { font-size: 12px; }
html:not(.m-lite) .shopx-packs .shop-pack { min-height: 44px; }
html:not(.m-lite) .shopx-packs .shop-pack b { font-size: 13px; }
html:not(.m-lite) .shopx-packs .shop-pack span { font-size: 11px; }
html:not(.m-lite) .shopx-bal { font-size: 11.5px; }
html:not(.m-lite) .shopx-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
html:not(.m-lite) .shopx-tile { min-height: 84px; cursor: pointer; }
html:not(.m-lite) .shopx-hint { font-size: 11px; }
html:not(.m-lite) .shopx-tile__qty, html:not(.m-lite) .shopx-tile__have { font-size: 10px; }
html:not(.m-lite) .shopx-tile:hover { border-color: rgba(255, 210, 122, .6); }
html:not(.m-lite) .shopx-tile__icon { width: 36px; height: 36px; }
html:not(.m-lite) .shopx-tile__name, html:not(.m-lite) .shopx-tile__price { font-size: 10px; }
/* 1.000'lik paket öne çıkar */
.shop-pack.is-best { border-color: #F2C55C; background: linear-gradient(180deg, rgba(242, 197, 92, .34), rgba(242, 197, 92, .1)); box-shadow: 0 0 10px -3px rgba(242, 197, 92, .8); }
.shop-pack.is-best b { color: #FFE7A8; }
/* Fareyle sürüklenen eşya */
.qb-ghost { position: fixed; left: 0; top: 0; z-index: 9999; width: 40px; height: 40px; pointer-events: none; border-radius: 4px;
    background: var(--img) center / 80% no-repeat, rgba(8, 14, 22, .85); box-shadow: 0 0 0 1px #7FE6EC, 0 6px 16px rgba(0, 0, 0, .6); }
.slot, .cat { user-select: none; -webkit-user-select: none; }
html[lang="en"] .chat__log .sys::before { content: "SYSTEM"; }
/* Masaüstü eşya menüsü: kategori adları sığsın */
html:not(.m-lite) #qb-cats .cat { width: 50px !important; }

/* Gemiye özel yetenek çubuğu: konsolun sağında, alt hizalı */
.skillbar {
    position: absolute; left: calc(100% + 8px); bottom: 0;
    display: flex; gap: 5px; padding: 6px;
    border: 1px solid #05080B; border-radius: 3px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 40%), linear-gradient(180deg, #202A35, #0D1319);
    box-shadow: inset 0 1px 0 var(--steel-hi, rgba(255,255,255,.12)), 0 16px 34px -12px #000;
    pointer-events: auto;
}
.skillbar[hidden] { display: none; }
.skillbar .slot { width: 52px; height: 52px; }
.skillbar .slot__icon { width: 44px; height: 44px; }
.skillbar .slot.is-active { border-color: #9BE3A8; box-shadow: inset 0 0 0 1px #9BE3A8, 0 0 14px -2px rgba(111, 230, 154, .8); }
.skillbar .slot__badge { position: absolute; right: 3px; bottom: 2px; font-size: 11px; font-weight: 700; color: #CFF7DA; text-shadow: 0 1px 2px #000; z-index: 2; }
@media (max-width: 1180px) {
    .skillbar { left: auto; right: 0; bottom: calc(100% + 6px); }
}
.skillbar .slot__key { display: block !important; top: 3px; left: 4px; font-size: 9.5px; color: #CFE6F5; z-index: 2; }
.touch-mode .skillbar .slot__key { display: none !important; }
.touch-mode .skillbar .slot { width: 44px; height: 44px; }
.touch-mode .skillbar .slot__icon { width: 36px; height: 36px; }

/* ===== Yükleme ekranı ===== */
.gate__bg { position: absolute; inset: 0; z-index: -1; background: var(--bg-img, none) center / cover no-repeat; opacity: .38; filter: saturate(1.15); transition: opacity .8s; }
.gate__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, transparent, rgba(3, 6, 11, .85)); }
.gate { isolation: isolate; }
.loader { margin: 22px auto 0; width: 100%; }
.loader[hidden] { display: none; }
.loader__bar { position: relative; height: 6px; border: 1px solid var(--line-2); border-radius: 3px; background: rgba(3, 7, 13, .8); overflow: hidden; }
.loader__bar span { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #2BB8D0, var(--ion)); box-shadow: 0 0 12px var(--ion); transition: width .15s linear; }
.loader__txt { margin: 8px 0 0; color: var(--muted); font: 600 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.gate__start {
    margin-top: 22px; min-width: 200px; height: 52px;
    border: 1px solid var(--ion); border-radius: 2px;
    background: linear-gradient(180deg, rgba(63, 224, 240, .32), rgba(63, 224, 240, .12));
    color: #DFFBFF; font: 700 16px/1 var(--display); letter-spacing: .3em; text-transform: uppercase;
    cursor: pointer; box-shadow: 0 0 24px -6px var(--ion);
    animation: startPulse 1.8s ease-in-out infinite;
}
.gate__start:hover { background: rgba(63, 224, 240, .38); }
.gate__start[hidden] { display: none; }
@keyframes startPulse { 50% { box-shadow: 0 0 34px -2px var(--ion); } }
.gate__tip { margin-top: 18px; min-height: 1.4em; }

/* ===== Ayarlar penceresi (masaüstünde geniş, sekmeli) ===== */
.win--settings { width: min(640px, calc(100vw - 40px)); }
.set-tabs { display: flex; gap: 4px; padding: 0 14px 10px; flex-wrap: wrap; }
.set-tabs button {
    padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 2px; background: rgba(3, 7, 13, .6);
    color: var(--muted); font: 600 11px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.set-tabs button:hover { color: #fff; border-color: rgba(63, 224, 240, .5); }
.set-tabs button.is-active { color: #fff; border-color: var(--ion); background: rgba(18, 52, 64, .9); }
.win--settings [data-set-pane][hidden] { display: none !important; }
.win--settings .settings--audio, .win--settings .settings--hud { margin-top: 0; border-top: 0; padding-top: 0; }
.win--settings #settings-form { grid-template-columns: 1fr 1fr; column-gap: 18px; }
.win--settings #settings-form .settings__title { grid-column: 1 / -1; margin-top: 6px; }
.keybinds { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.keybind { display: grid; gap: 4px; justify-items: center; padding: 6px 4px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255, 255, 255, .03); }
.keybind__slot { color: var(--muted); font: 600 10px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.keybind__ico { width: 30px; height: 30px; background: var(--img) center / contain no-repeat; }
.keybind button { min-width: 54px; height: 28px; border: 1px solid var(--line-2); border-radius: 2px; background: rgba(3, 7, 13, .7); color: #fff; font: 700 12px/1 var(--display); cursor: pointer; }
.keybind button.is-listening { border-color: var(--gold); color: var(--gold); animation: startPulse 1s infinite; }
.touch-mode .win--settings #settings-form { grid-template-columns: 1fr; }
.touch-mode .keybinds { grid-template-columns: repeat(2, 1fr); }
.winbar__mode .winbar__label { min-width: 52px; }
.touch-mode .winbar__mode { display: none; }
.no-dmgfx .fx-damage { display: none !important; }
/* Sohbet komutları: sonuç satırları ve "/" önerileri */
.chat__log li.cmd { color: #9fe3ff; white-space: pre-line; }
.chat__log li.cmd-error { color: #ff9a8a; }
.chat__form { position: relative; }
.chat__hint { position: absolute; left: 0; right: 0; bottom: 100%; margin: 0 0 4px; padding: 4px; list-style: none; background: rgba(8, 12, 24, 0.94); border: 1px solid rgba(120, 200, 255, 0.25); border-radius: 8px; z-index: 5; max-height: 220px; overflow: auto; }
.chat__hint li { display: flex; gap: 8px; align-items: baseline; padding: 4px 6px; border-radius: 5px; cursor: pointer; font-size: 12px; }
.chat__hint li:hover { background: rgba(120, 200, 255, 0.12); }
.chat__hint b { color: #7fd4ff; font-weight: 700; white-space: nowrap; }
.chat__hint span { color: #a9b6c9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Yeniden doğuş seçenekleri */
.death__opts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }
.death__opts .repair-btn { margin-top: 0; min-width: 200px; padding: 0 16px; letter-spacing: .1em; }
.death__opts .repair-btn[hidden] { display: none; }
.repair-btn--base { border-color: #7fe0a0; background: linear-gradient(180deg, rgba(127, 224, 160, .26), rgba(127, 224, 160, .1)); box-shadow: 0 0 22px -6px #7fe0a0; }
.death__note { min-height: 1.2em; margin-top: 8px; }

/* İstasyon ticaret modülü (kargo penceresi) */
.tr-status { margin: 0 12px 8px; padding: 6px 8px; border: 1px solid #2B333D; background: #05080C; color: var(--muted); font: 600 11.5px/1.35 var(--display); }
.tr-status.is-ok { color: #7BD99F; border-color: rgba(123, 217, 159, .45); }
.tr-list { list-style: none; margin: 0 12px; padding: 0; display: grid; gap: 4px; }
.tr-row { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 8px; padding: 4px 6px; border: 1px solid #2B333D; background: linear-gradient(180deg, rgba(42, 51, 62, .55), rgba(22, 28, 36, .55)); }
.tr-row.is-zero { opacity: .5; }
.tr-row i { width: 30px; height: 30px; background: var(--img) center / 26px no-repeat, linear-gradient(180deg, #59636E 0%, #3A434D 48%, #262D35 50%, #2E363F 100%); border: 1px solid #3A4552; }
.tr-row b { display: block; color: #fff; font: 700 11.5px/1.2 var(--display); }
.tr-row small { display: block; color: var(--muted); font: 600 10.5px/1.25 var(--display); font-variant-numeric: tabular-nums; }
.tr-row em { font-style: normal; color: #FFD27A; font: 700 11px/1.2 var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.tr-row .rf-btn { margin: 0; padding: 4px 10px; }

/* Ödül satırı (kredi, kuvars, XP, onur): HUD'un en üstü, üst şeritteki boş alana ortalı */
.win-banner.is-top { top: var(--wb-top, 6px) !important; left: var(--wb-x, 50%) !important; z-index: 80; }
.win-banner.is-top:not(:empty) ~ .notify { top: calc(var(--top-h) + 2px) !important; }

/* =====================================================================
   KOMUTA MERKEZİ (masaüstünde eski pilot paneli) ve minimal gemi sistemi
   ===================================================================== */
.pilot-mini, .ship-mini { display: none; }
html:not(.touch-mode) .panel.ship > :not(.dock-grip):not(.pilot-mini) { display: none !important; }
html:not(.touch-mode) .panel.ship { width: 200px !important; }
html:not(.touch-mode) .pilot-mini { display: grid; gap: 5px; margin: 0; padding: 2px 2px 4px; }
.pilot-mini div, .ship-mini .sm-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; }
.pilot-mini dt, .ship-mini dt, .sm-comp > span { color: var(--muted); font: 600 11px/1.3 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.pilot-mini dd, .ship-mini dd { margin: 0; color: #fff; font: 700 13px/1.3 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pm-xp { color: #8FE3F0; }
#pm-credits { color: #FFD27A; }
#pm-honor { color: #F4B9B9; }
#pm-kuvars { color: #C7B6FF; }
/* Sağ üstteki seviye, deneyim, kredi, onur ve kuvars komuta merkezine taşındı; komuta penceresi düğmesi yerine dok düğmesi */
html:not(.touch-mode) .readouts .readout--level,
html:not(.touch-mode) .readouts .readout--credits,
html:not(.touch-mode) .readouts .readout--honor,
html:not(.touch-mode) .readouts .readout--xp,
html:not(.touch-mode) .readouts .readout--kuvars,
html:not(.touch-mode) .winbar [data-win="win-player"],
.winbar__mode { display: none !important; }
html.touch-mode .winbar [data-dock="pilot"] kbd { display: none; }
/* Mobil / masaüstü düğmesi en sağda */
.sysbtns #ck-touch-btn { order: 99; }

/* Gemi sistemi: yalnızca can, kalkan, hız, kargo ve eşlikçi modu (masaüstü ve mobil) */
#win-ship > :not(.win__head):not(.ship-mini) { display: none !important; }
#win-ship.win { width: 248px; padding-bottom: 10px; }
.ship-mini { display: grid !important; gap: 10px; padding: 0 12px; }
.ship-mini dl { margin: 0; display: grid; gap: 6px; }
.sm-row { position: relative; padding-bottom: 3px; }
.sm-row i { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: rgba(255, 255, 255, .08); }
.sm-row i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--fill, 100%); background: currentColor; }
.sm-row--hp i { color: #3FD07F; }
.sm-row--sh i { color: #4F9BFF; }
.sm-comp { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.sm-comp__modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.sm-comp__modes button {
    height: 28px; padding: 0 4px; border: 1px solid var(--line-2); border-radius: 3px;
    background: rgba(3, 7, 13, .7); color: var(--text-2); font: 600 11px/1 var(--display); cursor: pointer;
}
@media (hover: hover) { .sm-comp__modes button:hover { border-color: var(--ion); color: #fff; } }
.sm-comp__modes button.is-active { border-color: var(--ion); background: rgba(63, 224, 240, .14); color: #fff; }
.sm-comp__none { color: var(--muted); font-size: 11.5px; }
.sm-comp.is-none .sm-comp__modes { display: none; }
.sm-comp:not(.is-none) .sm-comp__none { display: none; }

/* =====================================================================
   MOBİL PENCERELER: ekrana sığan, kaydırılabilen, büyük dokunma alanlı sayfalar
   (ayarlar, kargo, görevler, filo, kapılar, günlük, komuta, gemi…)
   ===================================================================== */
html.touch-mode .hud .win {
    zoom: 1 !important;
    left: 50% !important; right: auto !important; top: auto !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: min(560px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;
    max-height: calc(100dvh - 12px - env(safe-area-inset-top)) !important;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    padding-bottom: 12px;
}
html.touch-mode .hud #win-ship.win, html.touch-mode .hud #win-player.win { width: min(300px, calc(100vw - 16px)) !important; }
html.touch-mode .hud .win__head { grid-template-rows: auto; align-items: center; padding: 4px 4px 4px 12px; margin-bottom: 8px; cursor: default; }
html.touch-mode .hud .win__sys { display: none; }
html.touch-mode .hud .win__head strong { grid-row: 1; font-size: 15px; align-self: center; }
html.touch-mode .hud .win__head .win__close { grid-row: 1; }
html.touch-mode .hud .win__close { width: 40px; height: 40px; font-size: 22px; }
/* Sekmeler: tek satır, kaydırılabilir */
html.touch-mode .win-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; margin-bottom: 8px; }
html.touch-mode .win-tabs::-webkit-scrollbar { display: none; }
html.touch-mode .win-tabs button { flex: none; min-height: 40px; padding: 0 14px; font-size: 13px; }
/* Ayarlar: yatay ekranda iki sütun, büyük onay kutuları */
@media (orientation: landscape) { html.touch-mode .win--settings #settings-form { grid-template-columns: 1fr 1fr !important; column-gap: 14px; } }
html.touch-mode .win--settings label { min-height: 40px; align-items: center; }
html.touch-mode .win--settings input[type="checkbox"] { width: 22px; height: 22px; }
html.touch-mode .win--settings input[type="range"] { height: 32px; }
/* Kargo: daha küçük kutucuklar, satır başına daha çok öğe */
html.touch-mode .hold__grid { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)) !important; }
html.touch-mode .hold .item { min-height: 0; }
html.touch-mode .rf-tile__img { height: 46px; background-size: 34px, auto; }
html.touch-mode .rf-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html.touch-mode .rf-row--targets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html.touch-mode .rf-btn, html.touch-mode .tr-row .rf-btn { min-height: 34px; }
html.touch-mode .tr-row { grid-template-columns: 30px 1fr auto auto; padding: 6px; }
html.touch-mode .cargo-unload { min-height: 44px; }
/* Gemi sistemi: eşlikçi düğmeleri parmakla rahat basılsın */
html.touch-mode .sm-comp__modes button { height: 38px; font-size: 12.5px; }
/* Filo daveti */
html.touch-mode .ginvite input, html.touch-mode .ginvite button { min-height: 42px; font-size: 14px; }
.ginvite input.is-filled { animation: fillFlash 1.2s ease; }
@keyframes fillFlash { 0% { border-color: var(--ion); box-shadow: 0 0 0 2px rgba(63, 224, 240, .35); } 100% { box-shadow: none; } }

/* =====================================================================
   044: Komuta merkezi = gemi sistemi penceresiyle aynı görünüm · üstte rütbe yok · istasyonda "Ticaret yap"
   ===================================================================== */
.readout--rank { display: none !important; }

/* Masaüstü komuta merkezi (taşınabilir panel) gemi sistemi penceresi gibi */
html:not(.touch-mode) .panel.ship {
    width: 248px !important; padding: 0 0 10px !important; gap: 0 !important;
    border: 1px solid #05080B;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 80px),
        linear-gradient(180deg, rgba(24, 32, 42, .96), rgba(10, 14, 20, .96));
}
html:not(.touch-mode) .panel.ship > .dock-grip {
    height: auto !important; margin: 0 0 9px !important; padding: 7px 8px 7px 12px !important;
    background: linear-gradient(180deg, #232D39, #141B24);
    border-bottom: 1px solid #05080B !important; box-shadow: inset 0 1px 0 var(--steel-hi);
}
html:not(.touch-mode) .panel.ship > .dock-grip::after { left: 12px; width: 48px; box-shadow: 0 0 8px var(--ion); }
html:not(.touch-mode) .panel.ship .dock-grip__t { font: 700 14px/1.2 var(--display) !important; letter-spacing: .06em !important; }
html:not(.touch-mode) .panel.ship .dock-grip__t::before {
    content: "Command center"; display: block; margin-bottom: 1px;
    color: var(--ion); opacity: .85; font: 600 8.5px/1.2 var(--display); letter-spacing: .24em;
}
html:not(.touch-mode) .panel.ship .dock-grip__x { width: 24px; height: 24px; font-size: 16px; }
html:not(.touch-mode) .pilot-mini { gap: 6px; padding: 0 12px; }
.pilot-mini div { position: relative; padding-bottom: 3px; }
#pm-level, #pm-xp, #pm-credits, #pm-honor, #pm-kuvars { color: #fff; }

/* Komuta merkezi penceresi (mobil): gemi sistemi ile aynı satırlar */
#win-player.win { width: 248px; padding-bottom: 10px; }
.cc-mini .gain { margin-left: 5px; color: var(--warn); font-size: 11px; }

/* İstasyon üssünde: Ticaret yap */
.trade-hint {
    position: absolute; left: 50%; bottom: 186px; transform: translateX(-50%);
    padding: 9px 18px;
    border: 1px solid rgba(255, 210, 122, .75); border-radius: 3px;
    background: rgba(34, 24, 6, .84); color: #FFE2A6;
    font: 700 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase;
    cursor: pointer;
}
@media (hover: hover) { .trade-hint:hover { box-shadow: 0 0 18px rgba(255, 210, 122, .45); color: #fff; } }
.touch-mode .trade-hint { bottom: auto; top: calc(40% + 58px); padding: 14px 22px; }

/* =====================================================================
   060: ikinci eşya çubuğu, eylem tuşları, konfigürasyon, radar efekti yok
   ===================================================================== */
.qbars { display: flex; flex-direction: column; gap: 4px; }
.quickbar--2[hidden] { display: none !important; }
.touch-mode .desk-only { display: none !important; }
/* Masaüstü radarında dönen tarama efekti kaldırıldı */
html:not(.touch-mode) .scope__sweep { display: none !important; }
.keybinds--acts { grid-template-columns: 1fr; }
.keybind--act { grid-template-columns: 1fr auto; justify-items: start; align-items: center; }
.sm-cfg__btns { grid-template-columns: repeat(2, 1fr) !important; }
.sm-cfg[hidden] { display: none !important; }

/* Eşya çubuğu: Tab menüsü kapalıyken ikonlar kilitli (sürüklenmez) */
.console__bays .qslot, .console__bays .qslot * { cursor: default !important; }
#ck-console.is-expanded .console__bays .qslot:not(.is-blank), #ck-console.is-expanded .console__bays .qslot:not(.is-blank) * { cursor: grab !important; }