/*
 * TNO 世界地图创作器
 *
 * 界面边框、按钮、标签页和外交信息面板均直接复用
 * `assets/interface-ui/` 内的原版 TNO 组件。
 */

#topButtons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tnoMapCreator[hidden],
.tnoMapFlagWorkshop[hidden],
.tnoMapPosterWorkshop[hidden],
.tnoMapConfirmDialog[hidden],
.tnoMapCreationPanel[hidden],
.tnoMapCountryInfo[hidden],
.tnoMapHover[hidden],
.tnoMapCountryEditor[hidden],
.tnoMapEmptyState[hidden],
.tnoMapPanelExpand[hidden] {
    display: none !important;
}

body.tnoMapCreatorOpen {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    overflow: clip;
}

.tnoMapCreator {
    --map-toolbar-height: 66px;
    --map-panel-width: clamp(330px, 25vw, 418px);
    position: fixed;
    inset: 0;
    z-index: 900100;
    display: grid;
    grid-template-rows: var(--map-toolbar-height) minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    color: #dce5df;
    background: #020505;
    isolation: isolate;
}

.tnoMapBackdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(0, 4, 5, 0.7), rgba(0, 3, 4, 0.88)),
        url("./assets/branding/tno-map-masthead.png") center / cover no-repeat;
    filter: brightness(0.58) saturate(0.7);
}

.tnoMapCreator::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: 0.1;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 2px,
        rgba(0, 0, 0, 0.48) 3px
    );
    mix-blend-mode: multiply;
}

.tnoMapToolbar {
    position: relative;
    z-index: 60;
    display: grid;
    grid-template-columns: auto minmax(176px, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: var(--map-toolbar-height);
    padding: 4px 10px 8px;
    box-sizing: border-box;
    border-bottom: 7px solid transparent;
    border-image: url("./assets/interface-ui/tile-frontend-bottom.webp") 28 30 70 / 0 0 7px 0 / 0 stretch;
    background:
        url("./assets/interface-ui/header-wider.webp") center / auto 58px repeat-x,
        #171a19;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.82);
}

.tnoMapToolbar button,
.tnoMapCreationPanel button,
.tnoMapCountryballBatchDock button,
.tnoMapFlagWorkshop button,
.tnoMapPosterWorkshop button,
.tnoMapConfirmDialog button,
.tnoMapCountryInfo button {
    min-width: 0;
    overflow: hidden;
    color: #e9efeb;
    font-family: "WenHanJianZhu", "RuiZheng", "PingFang SC", sans-serif;
    line-height: 1.15;
    text-overflow: ellipsis;
    text-shadow: 0 1px #000;
    white-space: nowrap;
    cursor: pointer;
}

.tnoMapReturn,
.tnoMapToolbarActions button,
.tnoMapCreationPanel button,
.tnoMapCountryballBatchDock button,
.tnoMapFlagWorkshop button,
.tnoMapPosterWorkshop button,
.tnoMapConfirmDialog button {
    min-height: 36px;
    padding: 3px 11px;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/button-medium.webp") 7 14 fill / 7px 11px / 0 stretch;
    background-color: #111615;
}

.tnoMapReturn,
.tnoMapToolbarActions #mapCreatorExport,
.tnoMapFlagWorkshop #mapCreatorFlagApply,
.tnoMapPosterWorkshop #mapCreatorPosterDownload {
    border-image-source: url("./assets/interface-ui/button-blue.webp");
    background-color: #071317;
}

.tnoMapCreator button:hover {
    filter: brightness(1.14);
}

.tnoMapCreator button:active {
    transform: translateY(1px);
    filter: brightness(0.92);
}

.tnoMapCreator button:disabled {
    cursor: default;
    filter: grayscale(0.7) brightness(0.58);
}

.tnoMapTitle {
    display: grid;
    align-content: center;
    min-width: 0;
    max-width: 520px;
    height: 46px;
    padding: 2px 13px 2px 15px;
    box-sizing: border-box;
    border-left: 3px solid #c74f54;
    background: rgba(4, 8, 9, 0.82);
}

.tnoMapTitle small,
.tnoMapCreationPanel header small,
.tnoMapFlagWorkshop header small,
.tnoMapPosterWorkshop header small,
.tnoMapSectionHeading small,
.tnoMapCountryInfo header small {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #93a19c;
    font: 9px/1.25 "RuiZheng", "PingFang SC", sans-serif;
    letter-spacing: 0.18em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoMapTitle strong,
.tnoMapCreationPanel > header strong,
.tnoMapFlagWorkshop > header strong,
.tnoMapPosterWorkshop > header strong,
.tnoMapSectionHeading strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #f3f4ef;
    font-family: "WenHanJianZhu", "RuiZheng", "PingFang SC", sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoMapModeTabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(92px, 1fr));
    min-width: 202px;
    align-self: stretch;
}

.tnoMapModeTabs button {
    min-height: 42px;
    padding: 2px 12px;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/large-tab-idle.webp") 7 14 fill / 7px 12px / 0 stretch;
    background: #101413;
    color: #aeb8b3;
    font-size: 13px;
    letter-spacing: 0.06em;
}

.tnoMapModeTabs button.isActive,
.tnoMapModeTabs button[aria-pressed="true"] {
    border-image-source: url("./assets/interface-ui/large-tab-active.webp");
    color: #eef4ef;
    background: #071214;
    text-shadow:
        0 0 8px rgba(89, 199, 195, 0.48),
        0 1px #000;
}

.tnoMapToolbarActions {
    display: grid;
    grid-template-columns: auto auto auto minmax(150px, 1fr);
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.tnoMapToolbarActions button {
    font-size: 12px;
}

#mapCreatorStatus {
    display: flex;
    min-width: 0;
    min-height: 36px;
    max-width: 260px;
    max-height: 36px;
    align-items: center;
    overflow: hidden;
    padding: 0 14px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/find-editbox.webp") 12 22 fill / 7px 10px / 0 stretch;
    color: #91cfca;
    background: #061011;
    font: 11px/1.25 "RuiZheng", "PingFang SC", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mapCreatorStatus.isError {
    color: #ef9a9d;
}

.tnoMapDownloadLink {
    color: #ecf6f1;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tnoMapDownloadLink:hover {
    color: #6fe1db;
}

.tnoMapWorkspace {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.tnoMapCreator.isExporting .tnoMapWorkspace::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 85;
    background: rgba(0, 4, 5, 0.62);
    backdrop-filter: blur(1px);
}

.tnoMapCreator.isExporting .tnoMapWorkspace::after {
    content: "正在渲染高清 PNG…";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 86;
    width: min(310px, calc(100% - 36px));
    min-height: 54px;
    padding: 12px 18px;
    box-sizing: border-box;
    border: 9px solid transparent;
    border-image: url("./assets/interface-ui/tile-overlay-small.webp") 16 fill / 9px / 0 stretch;
    color: #dff5f1;
    font: 16px/1.35 "WenHanJianZhu", "RuiZheng", "PingFang SC", sans-serif;
    letter-spacing: 0.08em;
    text-align: center;
    text-shadow: 0 1px 2px #000;
    transform: translate(-50%, -50%);
}

.tnoMapCreator[data-mode="creation"] .tnoMapWorkspace {
    grid-template-columns: minmax(0, 1fr);
}

.tnoMapViewport {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    overflow: clip;
    border: 10px solid transparent;
    border-image: url("./assets/interface-ui/tile-window-thin-crt.webp") 18 / 10px / 0 stretch;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 50% 48%, rgba(2, 13, 16, 0.42), rgba(0, 2, 3, 0.94) 72%),
        #010303;
    box-shadow:
        inset 0 0 80px rgba(0, 0, 0, 0.85),
        0 5px 20px rgba(0, 0, 0, 0.68);
    outline: none;
    cursor: grab;
    touch-action: none;
}

.tnoMapViewport.isPanning {
    cursor: grabbing;
}

.tnoMapCreator[data-mode="creation"] .tnoMapViewport[data-tool="paint"],
.tnoMapCreator[data-mode="creation"] .tnoMapViewport[data-tool="capital"] {
    cursor: crosshair;
}

.tnoMapCreator[data-mode="creation"] .tnoMapViewport[data-tool="state"],
.tnoMapCreator[data-mode="creation"] .tnoMapViewport[data-tool="pick"] {
    cursor: grab;
}

.tnoMapCreator[data-mode="creation"] .tnoMapViewport[data-tool="state"].isPanning,
.tnoMapCreator[data-mode="creation"] .tnoMapViewport[data-tool="pick"].isPanning {
    cursor: grabbing;
}

.tnoMapCreator[data-mode="creation"] .tnoMapViewport[data-tool="erase"] {
    cursor: not-allowed;
}

.tnoMapWorld {
    position: absolute;
    left: 0;
    top: 0;
    width: 5120px;
    height: 2560px;
    transform: translate3d(var(--map-x, 0px), var(--map-y, 0px), 0) scale(var(--map-scale, 0.2));
    transform-origin: 0 0;
    will-change: transform;
    isolation: isolate;
}

#mapCreatorCanvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 5120px;
    height: 2560px;
    background: #020607;
    image-rendering: auto;
    user-select: none;
}

#mapCreatorCreationBorders,
#mapCreatorToolBoundaries,
#mapCreatorProvinceGuide {
    position: absolute;
    inset: 0;
    display: block;
    width: 5120px;
    height: 2560px;
    pointer-events: none;
    image-rendering: auto;
}

#mapCreatorCreationBorders {
    z-index: 1;
    opacity: 0;
}

.tnoMapCreator[data-mode="creation"] #mapCreatorCreationBorders {
    opacity: 1;
}

.tnoMapCreator[data-mode="creation"][data-creation-border-lod="detail"] #mapCreatorCreationBorders {
    opacity: 0;
}

#mapCreatorToolBoundaries {
    z-index: 2;
    opacity: 1;
    transition: opacity 120ms ease;
}

.tnoMapBoundaryTiles {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease;
}

.tnoMapBoundaryTiles.isReady {
    opacity: 1;
}

.tnoMapCreator[data-boundary-lod="detail"] #mapCreatorToolBoundaries {
    opacity: 0;
}

.tnoMapBoundaryTile {
    position: absolute;
    display: block;
    max-width: none;
    pointer-events: none;
    image-rendering: auto;
    user-select: none;
}

#mapCreatorSharpCreationBorders {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    display: block;
    width: 1px;
    height: 1px;
    pointer-events: none;
    image-rendering: auto;
    opacity: 0;
}

.tnoMapCreator[data-mode="creation"][data-creation-border-lod="detail"] #mapCreatorSharpCreationBorders {
    opacity: 1;
}

#mapCreatorProvinceGuide {
    z-index: 3;
}

.tnoMapCreator[data-mode="creation"] #mapCreatorCanvas {
    image-rendering: auto;
}

.tnoMapLabels {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
    contain: layout paint style;
}

.tnoMapCapitals {
    position: absolute;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    contain: layout paint style;
}

.tnoMapCapitals.areVisible {
    visibility: visible;
}

.tnoMapCountryballs {
    position: absolute;
    inset: 0;
    z-index: 6;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    contain: layout paint style;
}

.tnoMapCountryballs.areVisible {
    visibility: visible;
}

.tnoMapCountryball {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: var(--countryball-map-size, 108px);
    height: var(--countryball-map-size, 108px);
    opacity: 0;
    image-rendering: auto;
    box-sizing: border-box;
    background: transparent center / 100% 100% no-repeat;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.72));
    transform: translate(
        -50%,
        calc(-50% - var(--countryball-map-anchor-offset, 36px))
    );
    transition:
        opacity 140ms ease-out,
        filter 120ms ease-out;
    touch-action: none;
    pointer-events: none;
}

.tnoMapCountryball.isVisible {
    opacity: 1;
}

.tnoMapCountryballHitbox {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: var(--countryball-hit-size, 90px);
    height: var(--countryball-hit-size, 90px);
    visibility: hidden;
    padding: 0;
    border: 0;
    border-radius: 50%;
    outline: none;
    background: transparent;
    box-shadow: none;
    transform: translate(
        -50%,
        calc(-50% - var(--countryball-map-anchor-offset, 36px))
    );
    touch-action: none;
}

.tnoMapCountryballHitbox.isVisible {
    visibility: visible;
}

.tnoMapCreator[data-mode="creation"] .tnoMapCountryballHitbox.isVisible {
    pointer-events: auto;
    cursor: grab;
}

.tnoMapCreator[data-mode="creation"] .tnoMapCountryball.isSelected {
    outline: none;
    background: transparent;
    filter:
        drop-shadow(0 0 2px #020707)
        drop-shadow(0 0 8px rgba(87, 252, 252, 0.92))
        drop-shadow(0 5px 6px rgba(0, 0, 0, 0.8));
}

.tnoMapCreator[data-mode="creation"] .tnoMapCountryball.isDragging {
    outline: none;
    background: transparent;
    filter:
        drop-shadow(0 4px 5px rgba(0, 0, 0, 0.72));
    transition: none;
}

.tnoMapCreator[data-mode="creation"] .tnoMapCountryballHitbox.isDragging {
    cursor: grabbing;
}

.tnoMapCountryballEditor {
    position: relative;
    z-index: 1;
    display: grid;
    width: auto;
    gap: 7px;
    margin: 10px;
    padding: 8px;
    box-sizing: border-box;
    border: 9px solid transparent;
    border-image: url("./assets/interface-ui/tile-overlay-small.webp") 16 fill / 9px / 0 stretch;
    color: #dce7e2;
    background: #071011;
    box-shadow:
        0 7px 22px rgba(0, 0, 0, 0.9),
        0 0 13px rgba(87, 252, 252, 0.16);
    font-family: "RuiZheng", "PingFang SC", sans-serif;
}

.tnoMapCreationPanel[data-countryball-editing="true"]
    > section:not(.tnoMapCountryballEditor),
.tnoMapCreationPanel[data-countryball-editing="true"] > footer {
    display: none;
}

.tnoMapCountryballEditor[hidden] {
    display: none;
}

.tnoMapCountryballEditor > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 2px 4px 2px 10px;
    background: url("./assets/interface-ui/tile-header-small.webp") left center / auto 40px repeat-x;
}

.tnoMapCountryballEditor > header span,
.tnoMapCountryballEditor > header small,
.tnoMapCountryballEditor > header strong {
    display: block;
    min-width: 0;
}

.tnoMapCountryballEditor > header small {
    color: #78c7c3;
    font-size: 8px;
    line-height: 1;
}

.tnoMapCountryballEditor > header strong {
    overflow: hidden;
    margin-top: 4px;
    font: 13px/1 "WenHanJianZhu", "RuiZheng", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoMapCountryballEditor button {
    min-height: 30px;
    padding: 3px 9px;
    border: 6px solid transparent;
    border-image: url("./assets/interface-ui/button-small.webp") 7 12 fill / 6px 9px / 0 stretch;
    color: #e7efeb;
    background: #111615;
    font: 9px/1 "WenHanJianZhu", "RuiZheng", sans-serif;
    cursor: pointer;
}

.tnoMapCountryballEditor > header button {
    width: 34px;
    padding: 1px;
    color: #82d9d4;
    font-size: 15px;
}

.tnoMapCountryballEditor > label {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 45px;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 4px 7px;
    box-sizing: border-box;
    border: 6px solid transparent;
    border-image: url("./assets/interface-ui/tile-color-picker.webp") 12 fill / 6px / 0 stretch;
    font-size: 9px;
}

.tnoMapCountryballEditor input[type="range"] {
    min-width: 0;
    width: 100%;
    accent-color: #57fcfc;
}

.tnoMapCountryballEditor output {
    display: flex;
    min-height: 25px;
    align-items: center;
    justify-content: center;
    border: 5px solid transparent;
    border-image: url("./assets/interface-ui/find-editbox.webp") 12 22 fill / 5px 7px / 0 stretch;
    color: #87ddd8;
    background: #061011;
    font-size: 10px;
}

.tnoMapCountryballEditor > p {
    margin: 0 4px;
    color: #a8b5af;
    font-size: 8px;
    line-height: 1.35;
}

.tnoMapCountryballEditor > div {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4px;
}

.tnoMapCountryballEditor [data-countryball-editor-withdraw] {
    grid-column: 1 / -1;
}

.tnoMapCountryballEditor [data-countryball-editor-workbench] {
    border-image-source: url("./assets/interface-ui/button-blue.webp");
    color: #f0fbf7;
}

.tnoMapCountryballEditor button:hover,
.tnoMapCountryballEditor button:focus-visible {
    filter: brightness(1.15);
}

.tnoMapCities {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    contain: layout paint style;
}

.tnoMapCities.areVisible {
    visibility: visible;
}

.tnoMapCity {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.tnoMapCity.isVisible {
    opacity: 1;
}

.tnoMapCity::before {
    position: absolute;
    left: calc(var(--city-dot-size, 4px) / -2);
    top: calc(var(--city-dot-size, 4px) / -2);
    display: block;
    width: var(--city-dot-size, 4px);
    height: var(--city-dot-size, 4px);
    border: 1px solid rgba(1, 8, 12, 0.94);
    border-radius: 50%;
    background: rgba(224, 233, 229, 0.9);
    box-shadow:
        0 0 0 1px rgba(91, 218, 216, 0.34),
        0 1px 2px rgba(0, 0, 0, 0.92);
    content: "";
}

.tnoMapCity > span {
    position: absolute;
    left: var(--city-label-left, 7px);
    top: var(--city-label-top, -8px);
    display: block;
    width: var(--city-label-width, 120px);
    overflow: hidden;
    color: rgba(220, 230, 226, 0.86);
    font: 500 var(--city-font-size, 11px) / 16px "RuiZheng", "PingFang SC", sans-serif;
    text-align: var(--city-label-align, left);
    text-overflow: ellipsis;
    text-rendering: geometricPrecision;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.98),
        0 0 4px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
}

.tnoMapCapital {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.tnoMapCapital.isVisible {
    opacity: 1;
    transition: opacity 140ms ease-out;
}

.tnoMapCapitalInner {
    position: absolute;
    left: 0;
    top: 0;
    width: 190px;
    height: 28px;
}

.tnoMapCapital img {
    position: absolute;
    left: var(--capital-marker-left, -13px);
    top: var(--capital-marker-top, -12px);
    display: block;
    width: var(--capital-marker-width, 26px);
    height: var(--capital-marker-height, 24px);
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.92));
}

.tnoMapCapitalInner > span {
    position: absolute;
    left: 15px;
    top: -8px;
    display: block;
    max-width: 165px;
    overflow: hidden;
    color: rgba(228, 239, 235, 0.96);
    font: 13px/18px "RuiZheng", "PingFang SC", sans-serif;
    text-overflow: ellipsis;
    text-shadow:
        0 1px 2px #000,
        0 0 5px rgba(0, 0, 0, 0.92);
    text-rendering: geometricPrecision;
    white-space: nowrap;
    opacity: 0;
}

.tnoMapCapital[data-show-name="true"] .tnoMapCapitalInner > span {
    opacity: 1;
}

.tnoMapLabel {
    position: absolute;
    display: flex;
    width: var(--label-width, 260px);
    height: var(--label-height, 64px);
    align-items: center;
    justify-content: center;
    overflow: visible;
    color: rgba(231, 239, 235, 0.8);
    font-family: "RuiZheng", "PingFang SC", sans-serif;
    font-size: var(--label-size, 32px);
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
    text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.78),
        0 0 8px rgba(0, 0, 0, 0.56);
    text-rendering: geometricPrecision;
    transform:
        translate(-50%, -50%)
        rotate(var(--label-angle, 0deg));
    opacity: 0;
    transition: opacity 130ms ease;
}

.tnoMapLabels.areVisible .tnoMapLabel.isVisible {
    opacity: 1;
}

.tnoMapLabel[data-size="large"] {
    --label-size: 48px;
    letter-spacing: 0.04em;
}

.tnoMapLabel[data-size="small"] {
    --label-size: 23px;
}

.tnoMapZoomDock {
    position: absolute;
    right: 18px;
    bottom: 17px;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(3, minmax(50px, auto)) minmax(62px, auto);
    align-items: stretch;
    gap: 2px;
    padding: 5px;
    border: 8px solid transparent;
    border-image: url("./assets/interface-ui/tile-overlay-small.webp") 16 fill / 8px / 0 stretch;
    background: #0a0d0c;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.84);
}

.tnoMapCountryballBatchDock {
    position: absolute;
    right: 18px;
    bottom: 75px;
    z-index: 31;
    display: flex;
    min-width: 0;
    padding: 5px;
    border: 8px solid transparent;
    border-image: url("./assets/interface-ui/tile-overlay-small.webp") 16 fill / 8px / 0 stretch;
    background: #0a0d0c;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.84);
}

.tnoMapCountryballBatchDock[hidden] {
    display: none;
}

.tnoMapCountryballBatchDock button {
    min-height: 30px;
    padding: 2px 11px;
    border: 6px solid transparent;
    border-image: url("./assets/interface-ui/button-small.webp") 7 12 fill / 6px 9px / 0 stretch;
    background: #121615;
    font-size: 10px;
    line-height: 1;
}

.tnoMapCreator[data-mode="creation"] .tnoMapCountryballBatchDock {
    right: calc(var(--map-panel-width) + 18px);
}

.tnoMapCreator[data-mode="creation"][data-panel-collapsed="true"]
    .tnoMapCountryballBatchDock {
    right: 18px;
}

.tnoMapCreator[data-mode="creation"] .tnoMapZoomDock {
    right: calc(var(--map-panel-width) + 18px);
}

.tnoMapCreator[data-mode="creation"][data-panel-collapsed="true"] .tnoMapZoomDock {
    right: 18px;
}

.tnoMapZoomDock button {
    min-height: 30px;
    padding: 2px 9px;
    border: 6px solid transparent;
    border-image: url("./assets/interface-ui/button-small.webp") 7 12 fill / 6px 9px / 0 stretch;
    color: #e5ebe7;
    background: #121615;
    font-family: "WenHanJianZhu", "RuiZheng", sans-serif;
    font-size: 10px;
    line-height: 1;
}

#mapCreatorZoomOutput {
    display: flex;
    min-width: 58px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 2px 7px;
    box-sizing: border-box;
    border: 6px solid transparent;
    border-image: url("./assets/interface-ui/find-editbox.webp") 12 22 fill / 6px 8px / 0 stretch;
    color: #72d7d1;
    background: #061011;
    font: 11px/1 "RuiZheng", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoMapHover {
    position: absolute;
    z-index: 36;
    width: max-content;
    max-width: min(360px, calc(100% - 16px));
    min-height: 28px;
    overflow: hidden;
    padding: 7px 12px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/tile-mini-dialog.webp") 12 fill / 7px / 0 stretch;
    color: #e5ece8;
    background: #071011;
    font: 12px/1.25 "RuiZheng", "PingFang SC", sans-serif;
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: break-word;
    pointer-events: none;
}

.tnoMapHelp {
    position: absolute;
    left: 18px;
    right: 300px;
    bottom: 18px;
    z-index: 28;
    display: flex;
    min-width: 0;
    max-width: none;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0;
    padding: 0 14px;
    box-sizing: border-box;
    border: 6px solid transparent;
    border-image: url("./assets/interface-ui/tile-plain-header.webp") 9 fill / 6px / 0 stretch;
    color: #a8b6b1;
    background: rgba(6, 10, 10, 0.88);
    font: 10px/1.15 "RuiZheng", sans-serif;
    letter-spacing: 0.08em;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.tnoMapCreator[data-mode="creation"] .tnoMapHelp {
    right: calc(var(--map-panel-width) + 300px);
}

.tnoMapCreator[data-mode="creation"][data-panel-collapsed="true"] .tnoMapHelp {
    right: 300px;
}

.tnoMapCountryInfo {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 92;
    width: min(400px, calc(100% - 32px));
    min-width: 0;
    min-height: 174px;
    overflow: hidden;
    padding: 13px 17px 15px;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-image: url("./assets/interface-ui/button-blue.webp") 2 fill / 2px / 0 stretch;
    color: #e6ece8;
    background: #080d0d;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8);
}

.tnoMapCountryInfo > header {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 27px;
    align-items: center;
    gap: 11px;
    min-width: 0;
    min-height: 52px;
    padding-bottom: 7px;
}

.tnoMapCountryInfo > header > img {
    display: block;
    width: 70px;
    height: 44px;
    object-fit: cover;
    border: 2px solid transparent;
    border-image: url("./assets/interface-ui/button-blue.webp") 2 fill / 2px / 0 stretch;
    box-sizing: border-box;
    background: #111;
}

.tnoMapCountryInfo > header > span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.tnoMapCountryInfo > header strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #eef2ee;
    font-family: "WenHanJianZhu", "RuiZheng", sans-serif;
    font-size: clamp(15px, 1.45vw, 20px);
    font-weight: 500;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoMapCountryInfo > header button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
}

.tnoMapCountryInfo > header button img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tnoMapCountryInfoBody {
    display: grid;
    gap: 8px;
    padding-top: 5px;
}

.tnoMapCountryInfoBody dl {
    display: grid;
    grid-template-columns: minmax(58px, 0.7fr) minmax(82px, 0.95fr) minmax(120px, 1.35fr);
    align-items: end;
    gap: 16px;
    min-width: 0;
    margin: 0;
    padding: 6px 2px 5px;
}

.tnoMapCountryInfoBody dl > div {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.tnoMapCountryInfoBody dt,
.tnoMapCountryInfoBody dd {
    min-width: 0;
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoMapCountryInfoBody dt {
    color: #8f9d97;
    font: 9px/1.25 "RuiZheng", sans-serif;
}

.tnoMapCountryInfoBody dd {
    margin-top: 3px;
    color: #86d8d3;
    font: 16px/1.05 "RuiZheng", sans-serif;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.82);
}

#mapCreatorSelectedState {
    min-width: 0;
    max-height: 34px;
    overflow: hidden;
    margin: 0;
    color: #b9c4be;
    font: 10px/1.45 "RuiZheng", sans-serif;
}

.tnoMapImportCountry {
    width: 100%;
    min-height: 38px;
    padding: 4px 12px;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/button-blue.webp") 7 14 fill / 7px 11px / 0 stretch;
    background: #071317;
    color: #e8f4ef;
    font: 12px/1.2 "WenHanJianZhu", "RuiZheng", sans-serif;
    letter-spacing: 0.06em;
}

.tnoMapCreationPanel {
    position: relative;
    z-index: 44;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border: 10px solid transparent;
    border-image: url("./assets/interface-ui/tile-window-border.webp") 18 / 10px / 0 stretch;
    background:
        url("./assets/interface-ui/tile-internal-crt.webp") center / 100% 100% no-repeat,
        #0b0f0e;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.75);
    transition:
        transform 180ms ease,
        visibility 0s linear;
}

.tnoMapCreator[data-mode="creation"] .tnoMapCreationPanel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: var(--map-panel-width);
}

.tnoMapCreator[data-mode="creation"][data-panel-collapsed="true"] .tnoMapCreationPanel {
    visibility: hidden;
    pointer-events: none;
    box-shadow: none;
    transform: translateX(calc(100% + 1px));
    transition:
        transform 180ms ease,
        visibility 0s linear 180ms;
}

.tnoMapCreationPanel > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(88px, auto) 54px;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 58px;
    padding: 7px 9px;
    box-sizing: border-box;
    background: url("./assets/interface-ui/category-header-long.webp") left center / auto 58px repeat-x;
    border-bottom: 1px solid #050606;
}

.tnoMapCreationPanel > header > span {
    min-width: 0;
    overflow: hidden;
}

.tnoMapPanelCollapse {
    width: 54px;
    min-height: 38px;
    padding: 2px 4px;
    border: 6px solid transparent;
    border-image: url("./assets/interface-ui/button-small.webp") 7 12 fill / 6px / 0 stretch;
    color: #e6eeea;
    background: #111514;
    font-size: 9px;
}

.tnoMapPanelExpand {
    position: absolute;
    right: 10px;
    top: 18px;
    z-index: 45;
    display: none;
    width: 38px;
    min-height: 96px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 3px;
    border: 8px solid transparent;
    border-image: url("./assets/interface-ui/button-blue.webp") 7 14 fill / 8px 6px / 0 stretch;
    color: #edf8f5;
    background: #071416;
    font-family: "WenHanJianZhu", "RuiZheng", "PingFang SC", sans-serif;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.78);
    text-shadow:
        0 0 6px rgba(82, 203, 198, 0.45),
        0 1px #000;
}

.tnoMapCreator[data-mode="creation"][data-panel-collapsed="true"]
    .tnoMapPanelExpand:not([hidden]) {
    display: flex;
    flex-direction: column;
}

.tnoMapPanelExpand > span {
    color: #72d7d1;
    font: 19px/1 "RuiZheng", sans-serif;
}

.tnoMapPanelExpand > strong {
    writing-mode: vertical-rl;
    color: inherit;
    font: 10px/1.05 "WenHanJianZhu", "RuiZheng", sans-serif;
    letter-spacing: 0.12em;
}

.tnoMapPanelCollapse:hover,
.tnoMapPanelExpand:hover {
    filter: brightness(1.16);
}

.tnoMapPanelCollapse:focus-visible,
.tnoMapPanelExpand:focus-visible {
    outline: 2px solid #72d7d1;
    outline-offset: 2px;
    filter: brightness(1.16);
}

#mapCreatorProvinceStatus {
    display: flex;
    min-width: 0;
    min-height: 38px;
    max-height: 38px;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    padding: 0 12px;
    box-sizing: border-box;
    border: 6px solid transparent;
    border-image: url("./assets/interface-ui/find-editbox.webp") 12 22 fill / 6px 8px / 0 stretch;
    color: #86c9c5;
    background: #071011;
    font: 10px/1.3 "RuiZheng", sans-serif;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoMapCreationPanel > .tnoMapPanelSection,
.tnoMapCreationPanel > section {
    min-width: 0;
}

.tnoMapCreationPanel {
    scrollbar-color: #579d99 #101514;
    scrollbar-width: thin;
}

.tnoMapPanelSection {
    flex: none;
    padding: 8px 10px 10px;
    border-bottom: 1px solid #454b48;
    box-shadow: 0 1px #050606;
}

.tnoMapSectionHeading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 40px;
    padding: 2px 4px 4px 10px;
    box-sizing: border-box;
    background: url("./assets/interface-ui/tile-header-small.webp") left center / auto 40px repeat-x;
}

.tnoMapSectionHeading > span {
    min-width: 0;
    overflow: hidden;
}

.tnoMapSectionHeading strong {
    font-size: 14px;
}

.tnoMapSectionHeading button {
    min-height: 30px;
    max-width: 118px;
    padding-block: 2px;
    font-size: 10px;
}

.tnoMapCountryList {
    display: grid;
    max-height: 126px;
    gap: 2px;
    overflow: auto;
    padding: 3px 1px;
    scrollbar-color: #579d99 #101514;
    scrollbar-width: thin;
}

.tnoMapCountryEntry {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 36px;
    padding: 3px 8px;
    box-sizing: border-box;
    border: 6px solid transparent;
    border-image: url("./assets/interface-ui/country-entry-idle.webp") 8 14 fill / 6px 8px / 0 stretch;
    background: #111514;
    color: #cbd2ce;
    cursor: pointer;
}

.tnoMapCountryEntry.isActive,
.tnoMapCountryEntry[aria-selected="true"] {
    border-image-source: url("./assets/interface-ui/country-entry-active.webp");
    color: #f0f4f1;
    background: #071416;
}

.tnoMapCountryEntry > span:first-child {
    width: 30px;
    height: 22px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: var(--country-color, #9b353e);
}

.tnoMapCountryEntry strong,
.tnoMapCountryEntry small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoMapCountryEntry strong {
    font: 12px/1.2 "RuiZheng", sans-serif;
}

.tnoMapCountryEntry small {
    color: #85928d;
    font: 8px/1.15 "RuiZheng", sans-serif;
}

.tnoMapCountryEntry output {
    color: #78c7c3;
    font: 10px/1 "RuiZheng", sans-serif;
}

.tnoMapEmptyState {
    max-height: 50px;
    overflow: auto;
    margin: 6px 2px 0;
    padding: 8px 10px;
    box-sizing: border-box;
    border: 6px solid transparent;
    border-image: url("./assets/interface-ui/tile-card-idle.webp") 9 fill / 6px / 0 stretch;
    color: #929d98;
    background: #111514;
    font: 10px/1.45 "RuiZheng", sans-serif;
}

.tnoMapField,
.tnoMapColorField {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin-top: 6px;
}

.tnoMapField > span,
.tnoMapColorField > span {
    min-width: 0;
    overflow: hidden;
    color: #adb8b3;
    font: 10px/1.2 "RuiZheng", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoMapField input {
    width: 100%;
    min-width: 0;
    height: 38px;
    overflow: hidden;
    padding: 0 14px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/find-editbox.webp") 12 22 fill / 7px 10px / 0 stretch;
    color: #e2e9e5;
    background: #061011;
    font: 12px/20px "RuiZheng", "PingFang SC", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoMapColorField {
    grid-template-columns: 76px minmax(44px, 1fr) 80px;
}

.tnoMapColorField input[type="color"] {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 3px;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/tile-color-picker.webp") 12 fill / 7px / 0 stretch;
    background: #0b1110;
    cursor: pointer;
}

.tnoMapColorField output {
    min-width: 0;
    overflow: hidden;
    padding: 7px 8px;
    box-sizing: border-box;
    border: 6px solid transparent;
    border-image: url("./assets/interface-ui/find-editbox.webp") 12 22 fill / 6px 8px / 0 stretch;
    color: #9cd0cc;
    background: #061011;
    font: 10px/1 "RuiZheng", monospace;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoMapCapitalPicker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
    margin-top: 6px;
}

#mapCreatorCapitalProvince {
    display: flex;
    min-width: 0;
    min-height: 38px;
    align-items: center;
    overflow: hidden;
    padding: 0 15px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/find-editbox.webp") 12 22 fill / 7px 10px / 0 stretch;
    color: #8fc8c4;
    background: #061011;
    font: 10px/1.2 "RuiZheng", "PingFang SC", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mapCreatorChooseCapital {
    min-height: 35px;
    padding-inline: 8px;
    font-size: 10px;
}

#mapCreatorChooseCapital.isActive,
#mapCreatorChooseCapital[aria-pressed="true"],
.tnoMapToolButtons [data-map-tool="capital"].isActive,
.tnoMapToolButtons [data-map-tool="capital"][aria-pressed="true"] {
    border-image-source: url("./assets/interface-ui/button-blue.webp");
    color: #f2f6f2;
    background: #071416;
    text-shadow:
        0 0 6px rgba(82, 203, 198, 0.45),
        0 1px #000;
}

.tnoMapButtonGrid,
.tnoMapToolButtons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    min-width: 0;
    margin-top: 7px;
}

.tnoMapButtonGrid button,
.tnoMapToolButtons button {
    min-height: 35px;
    padding-inline: 7px;
    font-size: 10px;
}

.tnoMapToolButtons button.isActive,
.tnoMapToolButtons button[aria-pressed="true"] {
    border-image-source: url("./assets/interface-ui/button-blue.webp");
    color: #f2f6f2;
    background: #071416;
    text-shadow:
        0 0 6px rgba(82, 203, 198, 0.45),
        0 1px #000;
}

.tnoMapToolButtons [data-map-tool="capital"] {
    grid-column: 1 / -1;
}

.tnoMapCreator .isDanger {
    border-image-source: url("./assets/interface-ui/button-red.webp");
    color: #ffdadd;
    background-color: #1d0c0e;
}

.tnoMapToolHint {
    max-height: 46px;
    overflow: auto;
    margin: 7px 2px 0;
    color: #8f9c96;
    font: 9px/1.45 "RuiZheng", sans-serif;
}

.tnoMapCreationPanel > footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    min-width: 0;
    padding: 9px 10px;
    border-top: 1px solid #4a504d;
    background:
        url("./assets/interface-ui/tile-plain-header.webp") center / auto 48px repeat-x,
        #111514;
    margin-top: auto;
    flex: none;
}

.tnoMapCreationPanel > footer button {
    min-height: 38px;
    font-size: 10px;
}

.tnoMapCreationPanel > footer .tnoMapCreatePoster {
    grid-column: 1 / -1;
    border-image-source: url("./assets/interface-ui/button-blue.webp");
    color: #edf9f7;
    background: #071416;
}

.tnoMapCreationPanel > footer .tnoMapCreateCountryball {
    min-height: 48px;
    border-image-source: url("./assets/interface-ui/button-crt-wide.webp");
    color: #f3fffc;
    background: #061416;
    font-family: "WenHanJianZhu", "RuiZheng", "PingFang SC", sans-serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-shadow:
        0 0 8px rgba(87, 252, 252, 0.42),
        0 1px #000;
}

.tnoMapFlagWorkshop,
.tnoMapPosterWorkshop,
.tnoMapConfirmDialog {
    position: fixed;
    z-index: 900250;
    overflow: hidden;
    border: 12px solid transparent;
    border-image: url("./assets/interface-ui/tile-window-border.webp") 18 fill / 12px / 0 stretch;
    color: #e8eeea;
    background: #0a0f0e;
    box-shadow:
        0 0 0 100vmax rgba(0, 0, 0, 0.78),
        0 15px 46px rgba(0, 0, 0, 0.9);
}

.tnoMapFlagWorkshop {
    left: 50%;
    top: 50%;
    display: grid;
    width: min(1180px, calc(100vw - 42px));
    height: min(740px, calc(100dvh - 42px));
    grid-template-rows: 58px minmax(0, 1fr);
    transform: translate(-50%, -50%);
}

.tnoMapFlagWorkshop > header,
.tnoMapPosterWorkshop > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 9px 7px 16px;
    box-sizing: border-box;
    background: url("./assets/interface-ui/header-wide.webp") left center / auto 58px repeat-x;
    border-bottom: 1px solid #040606;
}

.tnoMapFlagWorkshop > header > span,
.tnoMapPosterWorkshop > header > span {
    min-width: 0;
    overflow: hidden;
}

.tnoMapFlagWorkshop > header button,
.tnoMapPosterWorkshop > header button {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
}

.tnoMapFlagWorkshop > header img,
.tnoMapPosterWorkshop > header img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tnoMapFlagWorkshopBody {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 286px);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

#mapCreatorFlagCanvas {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    background:
        radial-gradient(circle at 50% 50%, #111a1a, #020505 72%),
        #020505;
    cursor: move;
}

.tnoMapFlagWorkshopBody > aside {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    padding: 18px 15px;
    box-sizing: border-box;
    border-left: 9px solid transparent;
    border-image: url("./assets/interface-ui/tile-window-thin-crt.webp") 18 / 0 0 0 9px / 0 stretch;
    background: #0c100f;
}

.tnoMapFlagWorkshopBody > aside > strong {
    min-width: 0;
    overflow: hidden;
    color: #f0f3ef;
    font: 18px/1.2 "WenHanJianZhu", "RuiZheng", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoMapFlagWorkshopBody > aside > p {
    max-height: 66px;
    overflow: auto;
    margin: 0;
    color: #a5b0aa;
    font: 11px/1.55 "RuiZheng", sans-serif;
}

.tnoMapFlagWorkshopBody label {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 9px;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/tile-color-picker.webp") 12 fill / 7px / 0 stretch;
    background: #0b1110;
}

.tnoMapFlagWorkshopBody label span,
.tnoMapFlagWorkshopBody label output {
    min-width: 0;
    overflow: hidden;
    color: #bfc9c4;
    font: 10px/1 "RuiZheng", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoMapFlagWorkshopBody input[type="range"] {
    width: 100%;
    min-width: 0;
    accent-color: #61c9c5;
}

.tnoMapPosterWorkshop {
    left: 50%;
    top: 50%;
    display: grid;
    width: min(1640px, calc(100vw - 34px));
    height: min(850px, calc(100dvh - 34px));
    grid-template-rows: 58px minmax(0, 1fr);
    transform: translate(-50%, -50%);
}

.tnoMapPosterWorkshopBody {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(350px, 400px);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.tnoMapPosterPreview {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    padding: 12px;
    box-sizing: border-box;
    overflow: hidden;
    background: radial-gradient(
        circle at 50% 46%,
        rgba(24, 40, 41, 0.46),
        rgba(0, 3, 4, 0.96) 72%
    );
}

#mapCreatorPosterCanvas {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #020404;
    box-shadow:
        0 0 0 1px rgba(87, 252, 252, 0.68),
        0 12px 34px rgba(0, 0, 0, 0.8);
}

#mapCreatorPosterCanvas.isFlagDraggable {
    cursor: grab;
    touch-action: none;
}

#mapCreatorPosterCanvas.isTerritoryDraggable {
    cursor: move;
    touch-action: none;
}

#mapCreatorPosterCanvas.isDraggingFlag {
    cursor: grabbing;
}

#mapCreatorPosterCanvas.isDraggingTerritory {
    cursor: grabbing;
}

.tnoMapPosterWorkshopBody > aside {
    min-width: 0;
    min-height: 0;
    padding: 15px 13px;
    box-sizing: border-box;
    overflow: auto;
    border-left: 9px solid transparent;
    border-image: url("./assets/interface-ui/tile-window-thin-crt.webp") 18 / 0 0 0 9px / 0 stretch;
    background: #0c100f;
}

.tnoMapPosterSettings {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 14px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/tile-overlay-small.webp") 16 fill / 7px / 0 stretch;
    background: #07100f;
}

.tnoMapPosterSummary {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.tnoMapPosterSummary small,
.tnoMapPosterGroup > small,
.tnoMapPosterFields label > span {
    min-width: 0;
    overflow: hidden;
    color: #8e9f99;
    font: 9px/1.25 "RuiZheng", "PingFang SC", sans-serif;
    letter-spacing: 0.12em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoMapPosterSummary strong {
    min-width: 0;
    overflow: hidden;
    color: #f2f4ef;
    font: 19px/1.2 "WenHanJianZhu", "RuiZheng", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoMapPosterSummary span,
.tnoMapPosterHint {
    min-width: 0;
    max-height: 58px;
    overflow: auto;
    color: #abb8b2;
    font: 11px/1.5 "RuiZheng", "PingFang SC", sans-serif;
    overflow-wrap: anywhere;
}

.tnoMapPosterGroup {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.tnoMapPosterGroup > small {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.tnoMapPosterGroup > small output {
    min-width: 0;
    overflow: hidden;
    color: #75d4cf;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoMapPosterBackgrounds {
    display: grid;
    grid-auto-columns: 104px;
    grid-auto-flow: column;
    gap: 5px;
    min-width: 0;
    padding: 1px;
    overflow-x: auto;
    scrollbar-color: #579d99 #101514;
    scrollbar-width: thin;
}

.tnoMapPosterBackground {
    display: grid;
    grid-template-rows: 52px minmax(0, 1fr);
    gap: 2px;
    min-width: 0;
    min-height: 77px;
    padding: 5px;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/tile-card-selectable.webp") 9 fill / 7px / 0 stretch;
    color: #b5c1bc;
    background: #0a100f;
    font: 9px/1.15 "RuiZheng", sans-serif;
}

.tnoMapPosterBackground.isActive,
.tnoMapPosterBackground[aria-selected="true"] {
    border-image-source: url("./assets/interface-ui/tile-card-selected.webp");
    color: #eef7f4;
    background: #071617;
}

.tnoMapPosterBackground img,
.tnoMapPosterBlackBackground {
    display: block;
    width: 100%;
    height: 52px;
    object-fit: cover;
}

.tnoMapPosterBlackBackground {
    background: #000;
}

.tnoMapPosterBackground > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoMapPosterFillModes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
}

.tnoMapPosterFillModes.isThreeColumn {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tnoMapPosterFillModes button {
    min-height: 42px;
    padding: 3px 7px;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/large-tab-idle.webp") 7 14 fill / 7px 11px / 0 stretch;
    color: #b7c0bc;
    background: #101413;
    font-size: 11px;
}

.tnoMapPosterFillModes button.isActive,
.tnoMapPosterFillModes button[aria-pressed="true"] {
    border-image-source: url("./assets/interface-ui/large-tab-active.webp");
    color: #f1f5f0;
    background: #071214;
    text-shadow:
        0 0 8px rgba(89, 225, 220, 0.46),
        0 1px #000;
}

.tnoMapPosterRange {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 38px;
    padding: 6px 9px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/tile-color-picker.webp") 12 fill / 7px / 0 stretch;
    background: #07100f;
}

.tnoMapPosterRange > span {
    min-width: 0;
    overflow: hidden;
    color: #b8c4bf;
    font: 10px/1 "RuiZheng", "PingFang SC", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoMapPosterRange .percentageRangeShell {
    grid-area: auto;
    width: 100%;
    min-width: 0;
}

.tnoMapPosterRange input.percentageRangeInput {
    appearance: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 17px;
    width: calc(100% - 34px);
    min-width: 0;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    cursor: pointer;
    touch-action: pan-y;
}

.tnoMapPosterRange input.percentageRangeInput:focus-visible {
    outline: 1px solid #61c9c5;
    outline-offset: 1px;
}

.tnoMapPosterFields {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.tnoMapPosterFields label {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.tnoMapPosterFields input,
.tnoMapPosterFields select {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    height: 34px;
    padding: 5px 10px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/find-editbox.webp") 12 22 fill / 7px 10px / 0 stretch;
    color: #e2e9e5;
    background: #061011;
    font: 10px/1 "RuiZheng", "PingFang SC", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoMapPosterButtonPair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    min-width: 0;
}

.tnoMapPosterSettings button {
    min-width: 0;
    min-height: 36px;
    overflow: hidden;
    padding-inline: 7px;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoMapPosterHint {
    margin: 0;
}

.tnoMapPosterCountryballControls[hidden],
.tnoMapPosterCountryballNotice[hidden] {
    display: none !important;
}

.tnoMapPosterCountryballNotice {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 9px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/tile-overlay-small.webp") 16 fill / 7px / 0 stretch;
    background: #080e0e;
}

.tnoMapPosterCountryballNotice strong {
    color: #e9efeb;
    font: 13px/1.2 "WenHanJianZhu", "RuiZheng", sans-serif;
}

.tnoMapPosterCountryballNotice p,
.tnoMapPosterCountryballReference {
    margin: 0;
    color: #9eaaa5;
    font: 10px/1.45 "RuiZheng", "PingFang SC", sans-serif;
}

.tnoMapPosterCountryballControls {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.tnoMapPosterCountryballControls .tnoMapPosterRange {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
}

.tnoMapPosterCountryballControls .tnoMapPosterRange output {
    min-width: 0;
    overflow: hidden;
    color: #75d4cf;
    font: 9px/1 "RuiZheng", sans-serif;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mapCreatorPosterCanvas.isCountryballDraggable {
    cursor: move;
    touch-action: none;
}

#mapCreatorPosterCanvas.isDraggingCountryball {
    cursor: grabbing;
}

.tnoMapPosterDownload {
    width: 100%;
    min-height: 44px !important;
    font-size: 13px;
}

.tnoMapConfirmDialog {
    left: 50%;
    top: 50%;
    display: grid;
    width: min(430px, calc(100vw - 32px));
    gap: 10px;
    padding: 20px;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
}

.tnoMapConfirmDialog > strong {
    min-width: 0;
    overflow: hidden;
    color: #f2f3ef;
    font: 20px/1.25 "WenHanJianZhu", "RuiZheng", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoMapConfirmDialog > p {
    max-height: 72px;
    overflow: auto;
    margin: 0;
    color: #b2bdb7;
    font: 12px/1.55 "RuiZheng", sans-serif;
}

.tnoMapConfirmDialog > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

@media screen and (max-width: 1180px) {
    .tnoMapToolbar {
        grid-template-columns: auto minmax(130px, 1fr) auto auto;
    }

    .tnoMapToolbarActions {
        grid-template-columns: repeat(2, minmax(94px, auto));
    }

    .tnoMapToolbarActions #mapCreatorFit {
        display: none;
    }

    .tnoMapTitle {
        max-width: none;
    }

    #mapCreatorStatus {
        display: none;
    }
}

@media screen and (max-width: 860px) {
    .tnoMapCreator {
        --map-toolbar-height: 62px;
        --map-panel-width: min(350px, 44vw);
    }

    .tnoMapTitle small {
        display: none;
    }

    .tnoMapTitle strong {
        font-size: 15px;
    }

    .tnoMapModeTabs {
        min-width: 170px;
        grid-template-columns: repeat(2, minmax(78px, 1fr));
    }

    .tnoMapModeTabs button {
        padding-inline: 6px;
        font-size: 11px;
    }

    .tnoMapCountryInfo {
        width: min(390px, calc(100% - 24px));
    }

    .tnoMapHelp {
        display: none;
    }

    .tnoMapFlagWorkshopBody {
        grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
    }

    .tnoMapPosterWorkshopBody {
        grid-template-columns: minmax(0, 1fr) minmax(290px, 330px);
    }
}

@media screen and (max-width: 700px) {
    #topButtons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tnoMapCreator {
        --map-toolbar-height: 104px;
        --map-panel-width: min(100%, 330px);
    }

    .tnoMapToolbar {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: 48px 45px;
        padding-inline: 7px;
    }

    .tnoMapModeTabs {
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
    }

    .tnoMapToolbarActions {
        position: absolute;
        right: 6px;
        bottom: -46px;
        z-index: 70;
        padding: 4px;
        border: 7px solid transparent;
        border-image: url("./assets/interface-ui/tile-overlay-small.webp") 16 fill / 7px / 0 stretch;
        background: #0a0e0d;
    }

    .tnoMapToolbarActions #mapCreatorFit,
    #mapCreatorStatus {
        display: none;
    }

    .tnoMapCreator[data-mode="creation"] .tnoMapWorkspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .tnoMapCreationPanel {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: var(--map-panel-width);
    }

    .tnoMapZoomDock {
        right: 10px;
        bottom: 10px;
        grid-template-columns: repeat(3, 44px);
    }

    .tnoMapCountryballBatchDock {
        right: 10px;
        bottom: 68px;
    }

    .tnoMapCreator[data-mode="creation"] .tnoMapZoomDock {
        right: calc(var(--map-panel-width) + 10px);
    }

    .tnoMapCreator[data-mode="creation"] .tnoMapCountryballBatchDock {
        right: calc(var(--map-panel-width) + 10px);
    }

    .tnoMapCreator[data-mode="creation"][data-panel-collapsed="true"] .tnoMapZoomDock {
        right: 10px;
    }

    .tnoMapCreator[data-mode="creation"][data-panel-collapsed="true"]
        .tnoMapCountryballBatchDock {
        right: 10px;
    }

    #mapCreatorZoomOutput {
        display: none;
    }

    .tnoMapCountryInfo {
        left: 8px;
        bottom: 8px;
        width: min(350px, calc(100% - 16px));
    }

    .tnoMapCountryInfoBody dl {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tnoMapFlagWorkshop,
    .tnoMapPosterWorkshop {
        width: calc(100vw - 16px);
        height: calc(100dvh - 16px);
    }

    .tnoMapFlagWorkshopBody,
    .tnoMapPosterWorkshopBody {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .tnoMapFlagWorkshopBody > aside,
    .tnoMapPosterWorkshopBody > aside {
        max-height: 280px;
        overflow: auto;
        border-left: 0;
        border-top: 8px solid transparent;
        border-image: url("./assets/interface-ui/tile-window-thin-crt.webp") 18 / 8px 0 0 / 0 stretch;
    }
}

@media screen and (max-width: 1180px) {
    .tnoMapCreator.hasExportResult #mapCreatorStatus,
    .tnoMapCreator #mapCreatorStatus.isError {
        position: fixed;
        left: 14px;
        bottom: 14px;
        z-index: 72;
        display: block;
        width: min(430px, calc(100vw - 28px));
        max-width: none;
        pointer-events: auto;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.82);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tnoMapLabel,
    .tnoMapCreationPanel {
        transition: none;
    }
}