/* Rarity styling is retained inside popups; panel tiles have no borders. */
#tcs-operator-effects .tcs-effect-card,
#op-disease .tcs-effect-card,
#op-hunger .tcs-effect-card,
#op-morality .tcs-effect-card {
    display: block;
    position: relative;
}
.tcs-effect-card > .tcs-effect-placeholder {
    visibility: hidden;
    pointer-events: none;
}
.tcs-effect-card > .tcs-effect-inline {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
}
.tcs-effect-inline > .tcs-effect-icon {
    display: block;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.tcs-effect-inline > .profile-row-count {
    display: none;
}

/* Panel width on PC: edit width here. max-width fits narrow screens. */
#tcs-operator-panel {
    --tcs-panel-gap: 8px;
    --tcs-effect-icon-size: 75%;
    --tcs-empty-icon-size: 100%;
    --tcs-item-padding: 15%;
    width: 600px;
    max-width: calc(100% - 20px);
    box-sizing: border-box;
    min-width: 0;
    padding: 0;
    margin: 0 auto;
}
/* Both rows use the same six columns, including the three empty cells. */
#tcs-operator-panel > .tcs-panel-row {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-flow: row;
    gap: var(--tcs-panel-gap);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    align-items: stretch;
}
/* A theme clearfix must not take up an extra grid cell. */
#tcs-operator-panel > .tcs-panel-row::before,
#tcs-operator-panel > .tcs-panel-row::after {
    content: none;
    display: none;
}
#tcs-operator-panel > .tcs-panel-row > .tcs-panel-slot {
    /* Keep each slot in exactly one column, overriding theme spans. */
    grid-column: auto !important;
    grid-row: auto !important;
    order: 0;
    float: none;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 0;
}
#tcs-operator-panel .tcs-panel-slot > .loot-item {
    display: block;
    position: relative;
    float: none;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 1 / 1;
    margin: 0;
    margin-bottom: 10px;
    padding: 0;
    background: rgba(0, 0, 0, .2);
    border-radius: 25px;
    border: 0;
    box-shadow: none;
}
#tcs-operator-panel .tcs-effect-tile.tcs-effect-warning {
    background: rgba(255, 196, 0, .2);
}
#tcs-operator-panel .tcs-effect-tile.tcs-effect-danger {
    background: rgba(255, 55, 55, .2);
}
#tcs-operator-panel .tcs-panel-slot > .loot-item > .open_popup {
    display: flex;
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    overflow: hidden;
}
#tcs-operator-panel .tcs-panel-slot > .loot-item > .open_popup > img {
    display: block;
    position: static;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    transform: none;
    object-fit: contain;
}
#tcs-operator-panel .tcs-panel-slot > .loot-item:not(.tcs-gear-empty) > .open_popup > .loot-image {
    padding: var(--tcs-item-padding);
    opacity: 1;
}
#tcs-operator-panel .tcs-panel-slot > .loot-item.tcs-gear-empty > .open_popup > img {
    width: var(--tcs-empty-icon-size);
    height: var(--tcs-empty-icon-size);
    padding: 0;
    opacity: .5;
}
#tcs-operator-panel .tcs-effect-card > .tcs-effect-placeholder {
    display: none;
}
#tcs-operator-panel .tcs-effect-inline {
    width: 100%;
    height: 100%;
    gap: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    min-width: 0;
}
#tcs-operator-panel .tcs-effect-icon {
    position: static;
    flex: 0 0 var(--tcs-effect-icon-size);
    width: var(--tcs-effect-icon-size);
    height: var(--tcs-effect-icon-size);
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    transform: none;
}

/* Presets, skin and name use the same centered icon size as the status tiles. */
#tcs-operator-panel .tcs-setting-open {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    color: #fff;
    border: 0;
    border-radius: inherit;
    box-shadow: none;
    cursor: pointer;
    transform: none;
}
#tcs-operator-panel .tcs-setting-open .tcs-effect-inline { pointer-events: none; }
#tcs-operator-panel .tcs-setting-open:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* One square on the left spans the two original rows, including their 20px gap. */
#tcs-operator-panel {
    --tcs-panel-row-gap: 10px;
    display: grid;
    grid-template-columns: calc((100% - 6 * var(--tcs-panel-gap) + 3 * var(--tcs-panel-row-gap)) / 4) minmax(0, 1fr);
    column-gap: var(--tcs-panel-gap);
    row-gap: 0;
}
#tcs-operator-panel > #tcs-operator-effects { grid-column: 2; grid-row: 1; }
#tcs-operator-panel > #tcs-operator-backpack { grid-column: 2; grid-row: 2; }
#tcs-operator-panel .tcs-panel-slot > .loot-item { margin-bottom: var(--tcs-panel-row-gap); }
#tcs-operator-panel > .tcs-skills-launch {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 0 var(--tcs-panel-row-gap);
    padding: 0;
    background: rgba(0, 0, 0, .2);
    border: 0;
    box-shadow: none;
    border-radius: 25px;
}
#tcs-operator-panel .tcs-skills-open {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 17%;
    margin: 0;
    background: transparent;
    color: #fff;
    border: 0;
    border-radius: inherit;
    box-shadow: none;
    cursor: pointer;
}
#tcs-operator-panel .tcs-skills-open:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#tcs-operator-panel .tcs-skills-emblem {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    object-fit: contain;
    transform: none;
}
.tcs-skills-points {
    position: absolute;
    right: 10%;
    bottom: 9%;
    color: #fff;
    font-family: 'Bender', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
/* Only the new tree is styled here. Activation popups keep the theme's wmodal rules. */
.tcs-skills-modal > .wmodal-full { box-sizing: border-box; width: calc(100% - 32px); max-width: 1240px; }
.tcs-skills-modal .tcs-skills-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin: 24px 0;
    color: rgba(255,255,255,.6);
    font-size: 14px;
}
.tcs-skills-summary b { color: #fff; margin-left: 6px; }
.tcs-skills-summary [data-tcs-skill-points] { color: #fff; font-family: 'Bender', sans-serif; }
.tcs-skills-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 0 0 18px; }
.tcs-skills-legend { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12px; color: rgba(255,255,255,.6); }
.tcs-skills-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.tcs-skills-legend > span::before { content: ''; width: 8px; height: 8px; transform: rotate(45deg); border: 1px solid currentColor; }
.tcs-skill-legend-learned { color: #fff; }
.tcs-skill-legend-available { color: #a2e7d1; }
.tcs-skill-legend-locked { color: rgba(255,255,255,.3); }
.tcs-skills-zoom { display: flex; gap: 8px; }
.tcs-skills-zoom .btn { min-width: 34px; padding: 7px 12px; }
.tcs-skills-modal .op-skills {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}
.tcs-skills-modal .tcs-skill-tree,
.tcs-skills-modal .tcs-skill-tree-viewport,
.tcs-skills-modal .tcs-skill-tree-canvas {
    overflow: visible;
    max-height: none;
    min-width: 0;
}
.tcs-skill-tree-viewport { width: 100%; }
.tcs-skill-tree-canvas { position: relative; margin: 0 auto; --tcs-tree-node-size: 72px; --tcs-tree-scale: 1; }
.tcs-skill-tree-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.tcs-skill-link { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.tcs-skill-link--learned { stroke: rgba(255,255,255,.85); }
.tcs-skill-link--available { stroke: #7cbfa9; }
.tcs-skill-link--locked { stroke: rgba(255,255,255,.13); stroke-dasharray: 5 7; }
.tcs-skills-modal .tcs-skill-node,
.tcs-skills-modal .tcs-skill-rank {
    position: absolute;
    width: var(--tcs-tree-node-size);
    height: var(--tcs-tree-node-size);
    margin-left: calc(var(--tcs-tree-node-size) / -2);
    margin-top: calc(var(--tcs-tree-node-size) / -2);
    /* Keep transforms on the cube only so the theme's fixed popups keep their position. */
    transform: none;
}
.tcs-skills-modal .op-skill-cube {
    box-sizing: border-box;
    background: #121212;
    border: 1px solid rgba(255,255,255,.3);
    transform: rotate(45deg);
    aspect-ratio: 1 / 1;
}
.tcs-skills-modal .op-skill-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.tcs-skills-modal .op-skill-icon img { display: block; width: 100%; }
.tcs-skills-modal .op-skill-level-cube { box-sizing: border-box; background: #121212; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; aspect-ratio: 1 / 1; }
.tcs-skills-modal .op-skill-level-icon { position: absolute; top: 50%; left: 50%; width: 68%; transform: translate(-50%, -50%); }
.tcs-skills-modal .op-skill-level-icon img { display: block; width: 100%; }
.tcs-skills-modal .op-skills-lock { opacity: .3; }
.tcs-skills-modal .op-skill-done { border: 1px solid #fff; background: #242424; }
.tcs-skills-modal .tcs-skill-node--available .op-skill-cube { border-color: #82c4ae; }
.tcs-skill-node > .open_popup { display: block; width: 100%; height: 100%; cursor: pointer; }
.tcs-skill-node > .open_popup:hover .op-skill-cube,
.tcs-skill-node > .open_popup:focus-visible .op-skill-cube { border-color: #fff; box-shadow: 0 0 20px rgba(255,255,255,.08); }
.tcs-skill-node > .open_popup:focus-visible { outline: none; }
.tcs-skill-rank .tcs-skill-label { position: absolute; top: calc(100% + 18px); left: 50%; width: calc(120px * var(--tcs-tree-scale)); transform: translateX(-50%); color: rgba(255,255,255,.6); font-size: 11px; line-height: 1.35; text-align: center; pointer-events: none; }
.tcs-skill-tree-canvas[data-tree-layout='compact'] .tcs-skill-rank .tcs-skill-label { display: none; }
.tcs-skills-reset { margin-top: 24px; }
.tcs-skills-loading { padding: 40px 0; color: rgba(255,255,255,.6); }
@media (max-width: 640px) {
    .tcs-skills-modal > .wmodal-full { width: calc(100% - 20px); }
    .tcs-skills-modal .tcs-skills-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; font-size: 12px; }
    .tcs-skills-summary > span { min-width: 0; }
    .tcs-skills-summary b { display: block; margin: 4px 0 0; }
    .tcs-skills-modal .tcs-skills-toolbar { flex-direction: column; align-items: stretch; gap: 16px; }
    .tcs-skills-legend { justify-content: space-between; gap: 8px; }
    .tcs-skills-legend > span { gap: 6px; }
    .tcs-skills-zoom { justify-content: center; }
    .tcs-skills-zoom .btn { min-height: 40px; }
    .tcs-skills-reset { text-align: center; }
}