@font-face {
    font-family: EurostileTHea;
    src: url('2_EurostileTHea.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Battle Station penceresi. İçerik 232 px. Kenarlar window1 dilimlerinin dış kenarıdır. */
.cbs-build-window {
    --cbs-t: 36px;
    --cbs-l: 20px;
    --cbs-r: 28px;
    --cbs-b: 18px;
    --cbs-col: 232px;
    pointer-events: auto;
    position: fixed;
    z-index: 40;
    left: 0;
    top: 0;
    width: calc(var(--cbs-l) + var(--cbs-col) + var(--cbs-r));
    max-width: calc(100vw - 8px);
    max-height: calc(100vh - 8px);
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.65);
    color: #d5dde6;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cbs-build-window.hidden {
    display: none !important;
}

.cbs-build-window .cbs-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100vh - 8px);
    overflow: auto;
}

.cbs-build-window .cbs-shell::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 12px;
    bottom: 3px;
    background: #05070d;
    z-index: 0;
    pointer-events: none;
}

.cbs-build-window .cbs-row-top {
    display: grid;
    grid-template-columns: var(--cbs-l) minmax(0, 1fr) var(--cbs-r);
    height: var(--cbs-t);
    margin-bottom: -14px;
    position: relative;
    z-index: 6;
    cursor: grab;
    user-select: none;
    flex: 0 0 auto;
}

.cbs-build-window .cbs-row-top:active {
    cursor: grabbing;
}

.cbs-build-window .cbs-tl {
    width: var(--cbs-l);
    height: var(--cbs-t);
    overflow: hidden;
    background: url('img/Darkorbit/window1/32.png') left top / 40px 36px no-repeat;
}

.cbs-build-window .cbs-t {
    height: var(--cbs-t);
    min-width: 0;
    background: url('img/Darkorbit/window1/31.png') center / auto 100% repeat-x;
    display: flex;
    align-items: flex-start;
    padding: 11px 6px 0 8px;
    box-sizing: border-box;
}

.cbs-build-window .cbs-title {
    color: #e4e8ee;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 0 #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cbs-build-window .cbs-tr {
    position: relative;
    width: var(--cbs-r);
    height: var(--cbs-t);
    overflow: hidden;
    background: url('img/Darkorbit/window1/30.png') right top / 79px 36px no-repeat;
}

.cbs-build-window .cbs-close {
    position: absolute;
    top: 5px;
    right: 4px;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent url('img/Darkorbit/ui/571_winCloseBtn_normal.png') center / 16px 16px no-repeat;
    color: transparent;
    font-size: 0;
    cursor: pointer;
}

.cbs-build-window .cbs-close:hover {
    background-image: url('img/Darkorbit/ui/572_winCloseBtn_over.png');
}

.cbs-build-window .cbs-close:active {
    background-image: url('img/Darkorbit/ui/573_winCloseBtn_down.png');
}

.cbs-build-window .cbs-mid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: var(--cbs-l) minmax(0, 1fr) var(--cbs-r);
    min-height: 0;
}

.cbs-build-window .cbs-l {
    overflow: hidden;
    background: url('img/Darkorbit/window1/33.png') left top / 40px auto repeat-y;
}

.cbs-build-window .cbs-r {
    overflow: hidden;
    background: url('img/Darkorbit/window1/28.png') right top / 79px 100% no-repeat;
}

.cbs-build-window .cbs-body {
    width: var(--cbs-col);
    max-width: 100%;
    box-sizing: border-box;
    padding: 2px 0 4px;
    position: relative;
    z-index: 1;
}

.cbs-build-window .cbs-section-head {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) 16px;
    align-items: center;
    width: 225px;
    margin: 0 auto 3px;
}

.cbs-build-window .cbs-section-title {
    margin: 0 0 4px;
    text-align: center;
    font-family: EurostileTHea, Tahoma, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.1;
    color: #ffcc00;
    text-shadow: 0 1px 0 #000;
}

.cbs-build-window .cbs-section-head .cbs-section-title {
    margin: 0;
}

.cbs-build-window .cbs-fold {
    width: 16px;
    height: 12px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent url('img/Darkorbit/prepared/ui/slider_arrow.png') center / 8px 5px no-repeat;
    cursor: pointer;
}

.cbs-build-window.is-inv-collapsed .cbs-fold {
    transform: rotate(180deg);
}

.cbs-build-window.is-inv-collapsed .cbs-inv-block {
    display: none;
}

.cbs-build-window .cbs-inv-block {
    display: flex;
    align-items: stretch;
    gap: 3px;
    width: 225px;
    margin: 0 auto 8px;
    padding: 3px;
    box-sizing: border-box;
    background: #07090e;
    border: 1px solid #2c3a4c;
}

.cbs-build-window .cbs-inv {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(6, 30px);
    grid-template-rows: repeat(3, 30px);
    gap: 2px;
    justify-content: center;
    min-width: 0;
}

.cbs-build-window .cbs-inv-cell {
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    background: #0b1018 url('img/Darkorbit/prepared/ui/itemslot_empty.png') center / 30px 30px no-repeat;
}

.cbs-build-window .cbs-inv-cell.has-module {
    cursor: grab;
    touch-action: none;
    -webkit-user-drag: none;
    user-select: none;
    background-color: #0b1018;
    background-size: 26px 26px, 30px 30px;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

.cbs-build-window .cbs-inv-cell.is-drag-source {
    opacity: 0.45;
}

.cbs-build-window .cbs-inv-cell.is-selected {
    outline: 1px solid #ffcc00;
    outline-offset: -1px;
}

.cbs-build-window .cbs-inv-note {
    width: 225px;
    margin: -4px auto 6px;
    min-height: 0;
    font-size: 11px;
    line-height: 1.2;
    color: #d7c27a;
    text-align: center;
}

.cbs-build-window .cbs-inv-note[hidden] {
    display: none;
}

.cbs-build-window .cbs-slot.has-preview {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26px 26px;
    cursor: grab;
    touch-action: none;
    -webkit-user-drag: none;
}

.cbs-build-window .cbs-slot.is-preview {
    outline: 1px dashed #ffcc00;
    outline-offset: -2px;
}

.cbs-build-window .cbs-slot.is-drop-ok {
    outline: 1px solid #7dff6a;
    outline-offset: -1px;
}

.cbs-build-window .cbs-inv-block.is-drop-ok {
    outline: 1px solid #7dff6a;
    outline-offset: -1px;
}

.cbs-build-window .cbs-vscroll {
    flex: 0 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.cbs-build-window .cbs-scroll {
    width: 15px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent url('img/Darkorbit/prepared/ui/slider_button_normal.png') center / 18px 15px no-repeat;
    cursor: pointer;
}

.cbs-build-window .cbs-scroll-up {
    transform: rotate(-90deg);
}

.cbs-build-window .cbs-scroll-down {
    transform: rotate(90deg);
}

.cbs-build-window .cbs-scroll:hover:not(:disabled) {
    background-image: url('img/Darkorbit/prepared/ui/slider_button_hover.png');
}

.cbs-build-window .cbs-scroll:disabled {
    opacity: 0.4;
    cursor: default;
}

.cbs-build-window .cbs-scroll-track {
    flex: 1 1 auto;
    width: 4px;
    margin: 2px 0;
    background: #121820;
    border: 1px solid #243140;
}

.cbs-build-window .cbs-stage {
    position: relative;
    width: 225px;
    height: 189px;
    margin: 0 auto;
}

.cbs-build-window .cbs-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 225px;
    height: 189px;
    display: block;
    pointer-events: none;
    user-select: none;
}

.cbs-build-window .cbs-slots {
    position: absolute;
    left: 0;
    top: 0;
    width: 225px;
    height: 189px;
}

.cbs-build-window .cbs-slot {
    position: absolute;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: default;
    touch-action: none;
    -webkit-user-drag: none;
    user-select: none;
}

.cbs-drag-ghost {
    position: fixed;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    z-index: 80;
    pointer-events: none;
    background: center / 26px 26px no-repeat;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8));
}

html.cbs-module-dragging,
html.cbs-module-dragging * {
    cursor: grabbing !important;
}

.cbs-build-window .cbs-slot:hover {
    outline: 1px solid rgba(255, 204, 0, 0.45);
    outline-offset: -1px;
}

.cbs-build-window .cbs-slot.is-drop-ok,
.cbs-build-window .cbs-slot.is-drop-ok:hover {
    outline: 1px solid #7dff6a;
    outline-offset: -1px;
}

.cbs-build-window .cbs-slot.is-drag-source {
    opacity: 0.45;
}

.cbs-build-window .cbs-slot.is-foreign,
.cbs-build-window .cbs-slot.is-foreign:hover {
    cursor: default;
}

.cbs-build-window .cbs-status-title {
    width: 225px;
    margin: 8px auto 4px;
    text-align: left;
}

.cbs-build-window .cbs-contrib {
    width: 225px;
    max-height: 120px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
}

.cbs-build-window .cbs-contrib.is-empty {
    min-height: 22px;
}

.cbs-build-window .cbs-contrib-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1px 8px;
    margin: 0 0 6px;
    font-size: 11px;
    line-height: 1.2;
    color: #d7dee6;
}

.cbs-build-window .cbs-contrib-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cbs-build-window .cbs-contrib-pct {
    color: #f2f2f2;
}

.cbs-build-window .cbs-contrib-bar {
    grid-column: 1 / -1;
    height: 7px;
    background: #140e08;
    border: 1px solid #5a4318;
    box-sizing: border-box;
}

.cbs-build-window .cbs-contrib-fill {
    height: 100%;
    background: url('img/Darkorbit/prepared/ui/progress_bar_bg.jpg') left center / 100% 100% no-repeat;
}

.cbs-build-window .cbs-deflector {
    width: 225px;
    margin: 0 auto 4px;
    padding: 6px 8px 8px;
    box-sizing: border-box;
    background: linear-gradient(#141920, #07090e);
    border: 1px solid #3a4658;
    color: #d5dde6;
}

.cbs-build-window .cbs-deflector p {
    margin: 0 0 4px;
    font-size: 11px;
    line-height: 1.3;
}

.cbs-build-window .cbs-deflector-time {
    color: #f2f6fb;
}

.cbs-build-window .cbs-deflector-rate {
    color: #7dcea0;
}

.cbs-build-window .cbs-deflector-status {
    color: #cbb98a;
}

.cbs-build-window .cbs-deflector-toggle {
    display: block;
    width: 100%;
    height: 24px;
    margin-top: 4px;
    border: 1px solid #6d5a34;
    background: linear-gradient(#3a3124, #16130e);
    color: #cbb98a;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 12px;
    cursor: pointer;
}

.cbs-build-window .cbs-deflector-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.cbs-build-window .cbs-build-note {
    width: 225px;
    margin: 6px auto 0;
    font-size: 11px;
    line-height: 1.35;
    color: #e7b3b3;
}

.cbs-build-window .cbs-build-note[hidden] {
    display: none;
}

.cbs-build-window .cbs-build {
    display: block;
    width: 225px;
    height: 26px;
    margin: 8px auto 2px;
    padding: 0 8px;
    border: 1px solid #6d5a34;
    background: linear-gradient(#3a3124, #16130e);
    color: #cbb98a;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.03em;
    cursor: not-allowed;
    opacity: 0.7;
}

.cbs-build-window .cbs-build:not(:disabled) {
    cursor: pointer;
    opacity: 1;
}

.cbs-build-window .cbs-bottom {
    position: relative;
    z-index: 3;
    height: 22px;
    margin-top: -6px;
    flex: 0 0 auto;
    background:
        url('img/Darkorbit/window1/35.png') left bottom / 40px 22px no-repeat,
        url('img/Darkorbit/window1/63.png') right bottom / 79px 22px no-repeat,
        url('img/Darkorbit/window1/34.png') center bottom / auto 22px repeat-x;
}

.cbs-build-window .cbs-message {
    width: 225px;
    max-width: 100%;
    margin: 8px auto 12px;
    font-size: 12px;
    line-height: 1.35;
    color: #e6edf4;
    white-space: pre-line;
}

.cbs-progress-window {
    --cbs-col: 226px;
}

.cbs-progress-window .cbs-body {
    width: 226px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 0 6px;
}

.cbs-progress-window .cbs-progress-kicker {
    margin: 2px 0 6px;
    text-align: center;
    color: #f0d78c;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.cbs-progress-window .cbs-progress-stage {
    position: relative;
    width: 226px;
    max-width: 100%;
    height: 150px;
    margin: 0 auto;
    background: url('img/Darkorbit/prepared/ui/progress_background.jpg') center / 100% 100% no-repeat;
    overflow: hidden;
}

.cbs-progress-window .cbs-progress-state {
    margin: 8px 10px 0;
    text-align: center;
    color: #d5dde8;
    font-size: 11px;
}

.cbs-progress-window .cbs-progress-name {
    margin: 1px 10px 0;
    text-align: center;
    color: #f4f7fb;
    font-size: 13px;
    font-weight: 700;
}

.cbs-progress-window .cbs-progress-logo {
    position: absolute;
    left: 50%;
    top: 86px;
    width: 168px;
    height: auto;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
}

.cbs-progress-window .cbs-progress-time {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    margin: 0;
    text-align: center;
    color: #f3f6fb;
    font-family: EurostileTHea, Tahoma, Arial, sans-serif;
    font-size: 16px;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 0 #000;
}

@media (max-width: 340px) {
    .cbs-build-window:not(.cbs-progress-window) {
        --cbs-l: 10px;
        --cbs-r: 22px;
        --cbs-col: 212px;
    }

    .cbs-build-window .cbs-inv {
        grid-template-columns: repeat(6, 26px);
        grid-template-rows: repeat(3, 26px);
    }

    .cbs-build-window .cbs-inv-cell {
        width: 26px;
        height: 26px;
        background-size: 26px 26px;
    }

    .cbs-build-window .cbs-section-head,
    .cbs-build-window .cbs-inv-block,
    .cbs-build-window .cbs-stage,
    .cbs-build-window .cbs-status-title,
    .cbs-build-window .cbs-contrib,
    .cbs-build-window .cbs-deflector,
    .cbs-build-window .cbs-build-note,
    .cbs-build-window .cbs-build,
    .cbs-build-window .cbs-message {
        width: 204px;
    }

    .cbs-build-window .cbs-bg,
    .cbs-build-window .cbs-slots {
        width: 204px;
        height: 171px;
    }

    .cbs-build-window .cbs-stage {
        height: 171px;
    }

    .cbs-build-window .cbs-slots {
        transform: scale(0.9067);
        transform-origin: top left;
    }
}

/* Yatay telefon: yalnız .cbs-mobile-fit. Masaüstü bu sınıfı almaz. */
.cbs-build-window.cbs-mobile-fit {
    min-height: 0;
    max-width: calc(100vw - 12px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    max-height: calc(100dvh - 8px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

.cbs-build-window.cbs-mobile-fit .cbs-shell {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    height: auto;
    max-height: 100%;
    overflow: hidden;
}

.cbs-build-window.cbs-mobile-fit .cbs-row-top,
.cbs-build-window.cbs-mobile-fit .cbs-bottom {
    flex: 0 0 auto;
}

.cbs-build-window.cbs-mobile-fit .cbs-row-top {
    touch-action: none;
}

.cbs-build-window.cbs-mobile-fit .cbs-close {
    top: 4px;
    right: 3px;
    width: 22px;
    height: 22px;
    background-size: 16px 16px;
}

.cbs-build-window.cbs-mobile-fit .cbs-mid {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    grid-template-rows: minmax(0, 1fr);
}

.cbs-build-window.cbs-mobile-fit .cbs-body {
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
}

.cbs-build-window.cbs-mobile-fit .cbs-deflector-toggle {
    min-height: 32px;
    height: auto;
    touch-action: manipulation;
}

.cbs-build-window.cbs-mobile-fit .cbs-build {
    position: sticky;
    bottom: 0;
    z-index: 5;
    min-height: 32px;
    height: auto;
    margin-bottom: 0;
    touch-action: manipulation;
    box-shadow: 0 -6px 10px rgba(0, 0, 0, 0.45);
}

/* style.css yatay telefonda .ui-panel genişliğini 105px / 130px !important yapıyor.
   Savaş istasyonu da ui-panel olduğu için 225px kurulum alanı sağdan kesiliyordu.
   Bu blok yalnız .cbs-build-window. Masaüstü 1080p bu sorguya girmez. */
@media (max-width: 768px) and (orientation: landscape),
       (max-height: 500px) and (orientation: landscape) {
    .ui-panel.cbs-build-window {
        width: calc(var(--cbs-l) + var(--cbs-col) + var(--cbs-r)) !important;
        min-width: calc(var(--cbs-l) + var(--cbs-col) + var(--cbs-r)) !important;
        max-width: calc(100vw - 12px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
        max-height: calc(100dvh - 8px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.65) !important;
        font-size: 12px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        flex: none !important;
        position: fixed !important;
    }

    .ui-panel.cbs-build-window .cbs-shell {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    .ui-panel.cbs-build-window .cbs-row-top,
    .ui-panel.cbs-build-window .cbs-bottom {
        flex: 0 0 auto !important;
    }

    .ui-panel.cbs-build-window .cbs-mid {
        display: grid !important;
        grid-template-columns: var(--cbs-l) var(--cbs-col) var(--cbs-r) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .ui-panel.cbs-build-window .cbs-body {
        width: var(--cbs-col) !important;
        min-width: var(--cbs-col) !important;
        max-width: var(--cbs-col) !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior: contain;
    }

    .ui-panel.cbs-build-window .cbs-section-head,
    .ui-panel.cbs-build-window .cbs-inv-block,
    .ui-panel.cbs-build-window .cbs-stage,
    .ui-panel.cbs-build-window .cbs-status-title,
    .ui-panel.cbs-build-window .cbs-contrib,
    .ui-panel.cbs-build-window .cbs-deflector,
    .ui-panel.cbs-build-window .cbs-build-note,
    .ui-panel.cbs-build-window .cbs-build,
    .ui-panel.cbs-build-window .cbs-message {
        width: 225px !important;
        max-width: 225px !important;
        transform: none !important;
    }

    .ui-panel.cbs-build-window .cbs-stage,
    .ui-panel.cbs-build-window .cbs-bg,
    .ui-panel.cbs-build-window .cbs-slots {
        width: 225px !important;
        height: 189px !important;
        transform: none !important;
    }

    .ui-panel.cbs-build-window .cbs-inv {
        grid-template-columns: repeat(6, 30px) !important;
        grid-template-rows: repeat(3, 30px) !important;
    }

    .ui-panel.cbs-build-window .cbs-inv-cell {
        width: 30px !important;
        height: 30px !important;
    }

    .ui-panel.cbs-build-window .cbs-build {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 5 !important;
        min-height: 32px !important;
        height: auto !important;
    }

    .ui-panel.cbs-build-window.cbs-progress-window {
        --cbs-col: 226px;
        width: calc(var(--cbs-l) + 226px + var(--cbs-r)) !important;
        min-width: calc(var(--cbs-l) + 226px + var(--cbs-r)) !important;
    }

    .ui-panel.cbs-build-window.cbs-progress-window .cbs-body,
    .ui-panel.cbs-build-window.cbs-progress-window .cbs-progress-stage {
        width: 226px !important;
        min-width: 226px !important;
        max-width: 226px !important;
    }

    .ui-panel.cbs-build-window.cbs-progress-window .cbs-progress-stage {
        height: 150px !important;
    }
}