:root {
    color-scheme: dark;
    --bg: #071018;
    --panel: rgba(12, 24, 34, 0.82);
    --panel-strong: rgba(17, 35, 48, 0.94);
    --text: #f4f7fb;
    --muted: #a8b6c5;
    --line: rgba(166, 190, 211, 0.22);
    --gold: #f2c94c;
    --cyan: #5bd7ff;
    --green: #62d394;
    --red: #ff6f61;
    --app-rail-width: 58px;
    --app-rail-expanded-width: 168px;
    --app-side-gap: 14px;
    --app-hud-width: 340px;
    --app-content-max: 1180px;
}

/* Public landing page */
body.is-public-landing {
    background: #030914;
}

body.is-public-landing .page-shell {
    overflow: clip;
    background:
        radial-gradient(circle at 16% 0%, rgba(39, 149, 184, .2), transparent 34rem),
        radial-gradient(circle at 90% 12%, rgba(128, 77, 190, .14), transparent 32rem),
        #030914;
}

body.is-public-landing .app-topbar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 20;
    width: min(100% - 40px, 1320px);
    max-width: none;
    min-height: 82px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(139, 216, 242, .16);
}

body.is-public-landing .app-topbar nav {
    gap: 4px;
}

body.is-public-landing .app-topbar nav a {
    color: #b6c8d8;
    font-size: .86rem;
    letter-spacing: .02em;
}

body.is-public-landing .app-topbar nav a:hover {
    color: #f4fbff;
}

body.is-public-landing .app-topbar .nav-cta {
    margin-left: 10px;
    border: 1px solid rgba(98, 222, 255, .46);
    background: rgba(29, 124, 155, .16);
    color: #e8faff;
}

.public-landing {
    --landing-max: 1320px;
    --landing-copy: #b4c5d5;
    --landing-line: rgba(139, 216, 242, .16);
    position: relative;
    color: #f4f9fc;
}

.public-landing a:focus-visible,
.public-landing button:focus-visible,
body.is-public-landing .app-topbar a:focus-visible {
    outline: 2px solid #6ae2ff;
    outline-offset: 4px;
}

.landing-hero {
    position: relative;
    display: grid;
    min-height: max(760px, 100svh);
    padding: 132px max(24px, calc((100vw - var(--landing-max)) / 2)) 82px;
    align-items: center;
    isolation: isolate;
}

.landing-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        linear-gradient(90deg, rgba(3, 9, 20, .98) 0%, rgba(3, 9, 20, .91) 42%, rgba(3, 9, 20, .42) 76%, rgba(3, 9, 20, .72) 100%),
        radial-gradient(circle at 76% 48%, rgba(37, 174, 215, .16), transparent 34%),
        linear-gradient(180deg, #040b17 0%, #050d19 72%, #030914 100%);
}

.landing-hero::after {
    content: "";
    position: absolute;
    right: -12%;
    bottom: -22%;
    z-index: -2;
    width: 58vw;
    height: 58vw;
    border: 1px solid rgba(89, 220, 255, .08);
    border-radius: 50%;
    box-shadow:
        0 0 0 7vw rgba(89, 220, 255, .018),
        0 0 0 14vw rgba(89, 220, 255, .012);
}

.landing-hero-stars {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .42;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .76) 0 1px, transparent 1.4px),
        radial-gradient(circle, rgba(105, 224, 255, .62) 0 1px, transparent 1.5px);
    background-position: 0 0, 47px 35px;
    background-size: 137px 137px, 211px 211px;
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 74%, transparent 100%);
}

.landing-hero-grid {
    display: grid;
    grid-template-columns: minmax(440px, .86fr) minmax(520px, 1.14fr);
    width: 100%;
    max-width: var(--landing-max);
    margin: 0 auto;
    gap: clamp(36px, 5vw, 84px);
    align-items: center;
}

.landing-hero-copy {
    position: relative;
    z-index: 3;
    max-width: 650px;
}

.landing-kicker {
    display: inline-flex;
    margin: 0 0 26px;
    align-items: center;
    gap: 10px;
    color: #80dff5;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.landing-kicker span,
.landing-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #65e6ff;
    box-shadow: 0 0 16px rgba(101, 230, 255, .9);
}

.landing-hero h1 {
    max-width: none;
    margin: 0 0 26px;
    color: #f5fbff;
    font-size: clamp(4.3rem, 8vw, 8.5rem);
    font-weight: 850;
    line-height: .78;
    letter-spacing: -.075em;
    text-transform: uppercase;
}

.landing-hero h1 span {
    display: block;
    color: transparent;
    font-size: .42em;
    line-height: 1.3;
    letter-spacing: .3em;
    -webkit-text-stroke: 1px rgba(145, 221, 241, .72);
}

.landing-hero-statement {
    max-width: 580px;
    margin: 0 0 14px;
    color: #eef7fb;
    font-size: clamp(1.28rem, 2.1vw, 1.8rem);
    font-weight: 720;
    line-height: 1.3;
}

.landing-hero-lead {
    max-width: 610px;
    margin: 0;
    color: var(--landing-copy);
    font-size: clamp(1rem, 1.35vw, 1.14rem);
    line-height: 1.72;
}

.landing-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.landing-hero-actions .button,
.landing-access .button {
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 5px;
    letter-spacing: .015em;
}

.landing-hero-actions .button.primary,
.landing-access .button.primary {
    border-color: rgba(104, 230, 255, .82);
    background: linear-gradient(135deg, #64dcf2, #3aa7cb);
    color: #021017;
    box-shadow: 0 12px 36px rgba(49, 173, 207, .24);
}

.landing-quiet-action {
    border-color: rgba(183, 217, 232, .22);
    background: rgba(4, 16, 28, .52);
    color: #eaf8fd;
    backdrop-filter: blur(10px);
}

.landing-inline-link {
    display: inline-flex;
    margin-top: 17px;
    align-items: center;
    gap: 8px;
    color: #87dff4;
    font-size: .86rem;
}

.landing-inline-link span {
    transition: transform 160ms ease;
}

.landing-inline-link:hover span {
    transform: translateX(4px);
}

.landing-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 42px 0 0;
    padding: 0;
    border-top: 1px solid var(--landing-line);
    list-style: none;
}

.landing-facts li {
    display: grid;
    min-width: 0;
    gap: 4px;
    padding: 16px 18px 0 0;
}

.landing-facts li + li {
    padding-left: 18px;
    border-left: 1px solid var(--landing-line);
}

.landing-facts strong {
    color: #e7f7fc;
    font-size: .76rem;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.landing-facts span {
    color: #7f94a5;
    font-size: .72rem;
    line-height: 1.4;
}

.landing-hero-visual {
    position: relative;
    width: min(58vw, 860px);
    margin: 0 -18% 0 0;
    justify-self: end;
    perspective: 1400px;
}

.landing-visual-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(127, 222, 245, .32);
    border-radius: 12px;
    background: #050b14;
    box-shadow:
        -32px 42px 100px rgba(0, 0, 0, .6),
        0 0 70px rgba(34, 158, 195, .09);
    transform: rotateY(-7deg) rotateX(2deg);
    transform-origin: center left;
}

.landing-visual-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(3, 9, 20, .48), transparent 28%, transparent 78%, rgba(3, 9, 20, .18));
}

.landing-visual-frame img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.landing-visual-frame figcaption {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: inline-flex;
    padding: 8px 11px;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(137, 220, 242, .2);
    border-radius: 999px;
    background: rgba(3, 12, 23, .78);
    color: #bdd5df;
    font-size: .7rem;
    letter-spacing: .04em;
    backdrop-filter: blur(10px);
}

.landing-visual-scan {
    position: absolute;
    inset: -70% -20%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 42%, rgba(105, 226, 255, .08) 49.5%, rgba(205, 249, 255, .18) 50%, rgba(105, 226, 255, .08) 50.5%, transparent 58%);
    animation: landing-scan 9s ease-in-out infinite;
}

.landing-scroll-cue {
    position: absolute;
    bottom: 28px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transform: translateX(-50%);
    color: #7892a5;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.landing-scroll-cue span {
    display: block;
    width: 1px;
    height: 30px;
    background: linear-gradient(#69dbf4, transparent);
}

.landing-section {
    position: relative;
    padding: clamp(76px, 9vw, 132px) max(24px, calc((100vw - var(--landing-max)) / 2));
}

.landing-section-intro {
    display: grid;
    grid-template-columns: minmax(240px, .72fr) minmax(420px, 1.28fr);
    max-width: var(--landing-max);
    margin: 0 auto clamp(42px, 6vw, 78px);
    gap: 18px 64px;
    align-items: start;
}

.landing-section-intro .eyebrow {
    grid-column: 1;
    padding-top: 11px;
}

.landing-section-intro h2 {
    grid-column: 2;
    margin: 0;
    color: #eff8fc;
    font-size: clamp(2.2rem, 4vw, 4.6rem);
    line-height: .98;
    letter-spacing: -.05em;
}

.landing-section-intro > p:last-child {
    grid-column: 2;
    max-width: 760px;
    margin: 0;
    color: var(--landing-copy);
    font-size: 1.02rem;
    line-height: 1.75;
}

.landing-section-intro-wide {
    grid-template-columns: minmax(220px, .52fr) minmax(520px, 1.48fr);
}

.landing-world {
    background:
        linear-gradient(180deg, rgba(6, 17, 30, .96), rgba(4, 11, 22, .98)),
        #07111e;
}

.landing-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(340px, .7fr);
    max-width: var(--landing-max);
    margin: 0 auto;
    gap: clamp(28px, 5vw, 68px);
    align-items: center;
}

.landing-story-visual,
.landing-map-showcase {
    position: relative;
    margin: 0;
}

.landing-story-visual img,
.landing-map-showcase img {
    display: block;
    width: 100%;
    border: 1px solid rgba(132, 212, 235, .22);
    border-radius: 10px;
    background: #040913;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .38);
}

.landing-story-visual figcaption {
    position: absolute;
    right: 20px;
    bottom: -22px;
    display: flex;
    max-width: 380px;
    padding: 16px 19px;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(119, 220, 245, .25);
    border-radius: 6px;
    background: rgba(5, 17, 29, .94);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .36);
}

.landing-story-visual figcaption span {
    color: #68dff7;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.landing-command-list {
    display: grid;
}

.landing-command-list article {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    padding: 23px 0;
    border-top: 1px solid var(--landing-line);
}

.landing-command-list article:last-child {
    border-bottom: 1px solid var(--landing-line);
}

.landing-command-list article > span {
    color: #54cce9;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .13em;
}

.landing-command-list h3 {
    margin: 0 0 7px;
    color: #eaf6fb;
    font-size: 1.04rem;
}

.landing-command-list p {
    margin: 0;
    color: #8fa5b6;
    font-size: .88rem;
    line-height: 1.65;
}

.landing-galaxy {
    background:
        radial-gradient(circle at 50% 48%, rgba(34, 153, 190, .12), transparent 34rem),
        #030914;
}

.landing-map-showcase {
    max-width: var(--landing-max);
    margin: 0 auto;
}

.landing-map-showcase::before {
    content: "";
    position: absolute;
    inset: -12px;
    z-index: -1;
    border: 1px solid rgba(98, 214, 242, .09);
    border-radius: 16px;
}

.landing-map-showcase figcaption {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0 22px;
    border: 1px solid rgba(120, 210, 235, .18);
    border-top: 0;
    background: rgba(5, 16, 28, .86);
}

.landing-map-showcase figcaption span {
    display: grid;
    gap: 5px;
    padding: 17px 20px;
    color: #829bad;
    font-size: .76rem;
    line-height: 1.45;
}

.landing-map-showcase figcaption span + span {
    border-left: 1px solid var(--landing-line);
}

.landing-map-showcase figcaption b {
    color: #dceef5;
    font-size: .8rem;
}

.landing-fronts {
    background: linear-gradient(180deg, #07111e, #050c17);
}

.landing-front-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: var(--landing-max);
    margin: 0 auto;
    gap: 18px;
}

.landing-front-card {
    position: relative;
    display: grid;
    min-height: 460px;
    overflow: hidden;
    border: 1px solid rgba(137, 214, 236, .14);
    border-radius: 8px;
    background: #07121f;
    grid-template-rows: minmax(240px, 1fr) auto;
}

.landing-front-art {
    position: relative;
    min-height: 250px;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(86, 171, 203, .12), transparent 58%),
        #050d17;
    filter: saturate(.8) contrast(1.06);
    transition: transform 500ms ease, filter 500ms ease;
}

.landing-front-art::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, transparent 42%, #07121f 100%);
    pointer-events: none;
}

.landing-front-art img {
    width: 100%;
    height: 100%;
    min-height: 250px;
    object-fit: contain;
}

.landing-front-card:hover .landing-front-art {
    transform: scale(1.025);
    filter: saturate(1) contrast(1.08);
}

.landing-front-veyr .landing-front-art {
    background: radial-gradient(circle at center, rgba(118, 70, 187, .19), transparent 58%), #050d17;
}

.landing-front-council .landing-front-art {
    background: radial-gradient(circle at center, rgba(240, 196, 78, .16), transparent 60%), #050d17;
}

.landing-front-pvp .landing-front-art img {
    object-fit: cover;
}

.landing-front-card > div:last-child {
    position: relative;
    z-index: 2;
    padding: 4px 24px 25px;
}

.landing-front-card > div > span {
    color: #62d9f2;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.landing-front-card h3 {
    margin: 9px 0 10px;
    color: #edf8fc;
    font-size: 1.26rem;
}

.landing-front-card p {
    margin: 0;
    color: #94a9b8;
    font-size: .88rem;
    line-height: 1.65;
}

.landing-principles {
    background: #030914;
}

.landing-principle-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: var(--landing-max);
    margin: 0 auto;
    border-block: 1px solid var(--landing-line);
}

.landing-principle-grid article {
    min-width: 0;
    padding: 28px;
}

.landing-principle-grid article + article {
    border-left: 1px solid var(--landing-line);
}

.landing-principle-grid article > span {
    display: block;
    margin-bottom: 38px;
    color: #64dff7;
    font-size: 1.55rem;
}

.landing-principle-grid h3 {
    margin: 0 0 10px;
    color: #e7f4fa;
    font-size: 1rem;
}

.landing-principle-grid p {
    margin: 0;
    color: #849baa;
    font-size: .84rem;
    line-height: 1.65;
}

.landing-access {
    display: grid;
    grid-template-columns: minmax(320px, .78fr) minmax(460px, 1.22fr);
    gap: clamp(34px, 7vw, 100px);
    align-items: center;
    background:
        linear-gradient(110deg, rgba(4, 14, 25, .96), rgba(6, 25, 39, .92)),
        radial-gradient(circle at 80% 50%, rgba(74, 202, 234, .17), transparent 26rem);
    border-block: 1px solid rgba(104, 218, 246, .17);
}

.landing-access-copy h2 {
    margin: 0 0 20px;
    color: #f2fbff;
    font-size: clamp(2.25rem, 4.2vw, 4.7rem);
    line-height: .98;
    letter-spacing: -.05em;
}

.landing-access-copy > p:not(.eyebrow) {
    max-width: 580px;
    margin-bottom: 26px;
    color: var(--landing-copy);
    line-height: 1.72;
}

.landing-access-form,
.landing-access-status {
    width: 100%;
    max-width: 650px;
    justify-self: end;
    padding: clamp(22px, 3vw, 36px);
    border: 1px solid rgba(127, 220, 245, .21);
    border-radius: 8px;
    background: rgba(3, 13, 24, .78);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.landing-access-form input[type="email"] {
    min-height: 50px;
    border-color: rgba(137, 218, 241, .25);
    background: rgba(5, 17, 29, .92);
}

.landing-access-form .hardware-check {
    margin: 0;
    background: rgba(8, 27, 40, .58);
}

.landing-access-form .hardware-check .button {
    min-height: 44px;
}

.landing-access-form > .button {
    justify-self: stretch;
}

.landing-access-status {
    display: grid;
    gap: 13px;
}

.landing-access-status > span {
    color: #6eddf5;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.landing-access-status > strong {
    font-size: 1.5rem;
}

.landing-footer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    max-width: var(--landing-max);
    margin: 0 auto;
    padding: 34px 24px;
    align-items: center;
    gap: 28px;
    color: #708797;
    font-size: .76rem;
}

.landing-footer .brand {
    color: #d9edf5;
}

.landing-footer p {
    margin: 0;
}

.landing-footer nav {
    font-size: .76rem;
}

@keyframes landing-scan {
    0%, 22% { transform: translateX(-60%); opacity: 0; }
    36%, 58% { opacity: 1; }
    72%, 100% { transform: translateX(60%); opacity: 0; }
}

@media (max-width: 1100px) {
    .landing-hero-grid {
        grid-template-columns: minmax(360px, .92fr) minmax(430px, 1.08fr);
    }

    .landing-hero-visual {
        width: min(62vw, 760px);
        margin-right: -25%;
    }

    .landing-front-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-front-card:last-child {
        grid-column: 1 / -1;
        grid-template-columns: minmax(300px, 1.1fr) minmax(300px, .9fr);
        grid-template-rows: none;
        min-height: 320px;
    }

    .landing-principle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-principle-grid article:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--landing-line);
    }

    .landing-principle-grid article:nth-child(4) {
        border-top: 1px solid var(--landing-line);
    }
}

@media (max-width: 820px) {
    body.is-public-landing .app-topbar {
        width: min(100% - 28px, 1320px);
    }

    body.is-public-landing .app-topbar nav a:not(.nav-cta) {
        display: none;
    }

    .landing-hero {
        min-height: 100svh;
        padding: 112px 18px 64px;
        align-items: start;
    }

    .landing-hero-grid,
    .landing-story-grid,
    .landing-access {
        grid-template-columns: 1fr;
    }

    .landing-hero-copy {
        max-width: 680px;
    }

    .landing-hero h1 {
        font-size: clamp(4.1rem, 20vw, 7rem);
    }

    .landing-hero-visual {
        width: calc(100vw - 18px);
        margin: 10px -18px 0 0;
    }

    .landing-visual-frame {
        border-radius: 8px 0 0 8px;
        transform: none;
    }

    .landing-scroll-cue {
        display: none;
    }

    .landing-section {
        padding: 78px 18px;
    }

    .landing-section-intro,
    .landing-section-intro-wide {
        grid-template-columns: 1fr;
        margin-bottom: 42px;
        gap: 13px;
    }

    .landing-section-intro .eyebrow,
    .landing-section-intro h2,
    .landing-section-intro > p:last-child {
        grid-column: 1;
        padding-top: 0;
    }

    .landing-section-intro h2 {
        font-size: clamp(2.25rem, 10vw, 3.75rem);
    }

    .landing-story-grid {
        gap: 46px;
    }

    .landing-map-showcase figcaption {
        grid-template-columns: 1fr;
        margin-inline: 8px;
    }

    .landing-map-showcase figcaption span + span {
        border-top: 1px solid var(--landing-line);
        border-left: 0;
    }

    .landing-front-grid {
        grid-template-columns: 1fr;
    }

    .landing-front-card:last-child {
        grid-column: auto;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(240px, 1fr) auto;
        min-height: 460px;
    }

    .landing-access {
        gap: 34px;
    }

    .landing-access-form,
    .landing-access-status {
        max-width: none;
        justify-self: stretch;
    }

    .landing-footer {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

@media (max-width: 540px) {
    body.is-public-landing .app-topbar {
        min-height: 70px;
        padding: 10px 0;
    }

    body.is-public-landing .app-topbar .brand-mark,
    .landing-footer .brand-mark {
        width: 38px;
        height: 38px;
    }

    .landing-hero {
        padding-top: 96px;
    }

    .landing-kicker {
        margin-bottom: 20px;
        font-size: .61rem;
        letter-spacing: .13em;
    }

    .landing-hero h1 {
        margin-bottom: 20px;
        font-size: clamp(3.8rem, 21vw, 5.7rem);
    }

    .landing-hero-statement {
        font-size: 1.24rem;
    }

    .landing-hero-lead {
        font-size: .93rem;
    }

    .landing-hero-actions,
    .landing-hero-actions .button {
        width: 100%;
    }

    .landing-facts {
        grid-template-columns: 1fr;
        margin-top: 32px;
    }

    .landing-facts li,
    .landing-facts li + li {
        grid-template-columns: 120px 1fr;
        padding: 12px 0;
        border-left: 0;
    }

    .landing-facts li + li {
        border-top: 1px solid var(--landing-line);
    }

    .landing-visual-frame figcaption {
        right: 8px;
        bottom: 8px;
        padding: 6px 8px;
        font-size: .6rem;
    }

    .landing-story-visual figcaption {
        position: relative;
        right: auto;
        bottom: auto;
        max-width: none;
        margin: -1px 10px 0;
    }

    .landing-command-list article {
        grid-template-columns: 32px 1fr;
    }

    .landing-front-card {
        min-height: 420px;
    }

    .landing-principle-grid {
        grid-template-columns: 1fr;
    }

    .landing-principle-grid article + article,
    .landing-principle-grid article:nth-child(3) {
        border-top: 1px solid var(--landing-line);
        border-left: 0;
    }

    .landing-principle-grid article > span {
        margin-bottom: 22px;
    }

    .landing-access-form {
        padding: 18px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .landing-visual-scan {
        display: none;
    }

    .landing-front-art,
    .landing-inline-link span {
        transition: none;
    }
}

body.is-session-expired {
    overflow: hidden !important;
}

body.is-session-expired::after {
    content: "Sitzung abgelaufen · Anmeldung wird geöffnet …";
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    padding: 24px;
    place-items: center;
    color: #d9f5ff;
    background:
        radial-gradient(circle at 50% 36%, rgba(45, 141, 174, 0.2), transparent 34%),
        #02080e;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-align: center;
}

/* Alliance command center: the alliance is a third primary game view. */
.alliance-command-page > .module-heading {
    display: none;
}

.alliance-command-identity,
.alliance-command-center {
    width: min(1180px, 100%);
    margin-inline: auto;
}

.alliance-command-identity {
    position: relative;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(91, 215, 255, 0.28);
    border-radius: 14px;
    background: linear-gradient(115deg, rgba(12, 28, 42, 0.94), rgba(9, 18, 31, 0.82));
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
}

.alliance-command-emblem {
    width: 76px;
    height: 62px;
    overflow: hidden;
    border-radius: 10px;
}

.alliance-command-emblem .alliance-banner-compact {
    width: 100%;
    min-height: 62px;
    margin: 0;
}

.alliance-command-emblem .alliance-banner-identity {
    display: none;
}

.alliance-command-title {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.alliance-command-title h1 {
    margin: 0;
    overflow: hidden;
    font-size: clamp(1.08rem, 2vw, 1.45rem);
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alliance-command-title > span:last-child,
.alliance-command-status small {
    color: var(--muted);
    font-size: 0.78rem;
}

.alliance-command-title .alliance-badge {
    width: max-content;
    padding: 2px 7px;
    font-size: 0.66rem;
}

.alliance-command-status {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0 5px;
    align-items: baseline;
    text-align: right;
}

.alliance-command-status strong {
    color: #79e8b1;
    font-size: 1.35rem;
}

.alliance-command-status small {
    grid-column: 1 / -1;
}

.alliance-hive-link {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(91, 215, 255, 0.35);
    border-radius: 11px;
    color: #bceaff;
    background: rgba(91, 215, 255, 0.08);
    font-size: 1.35rem;
    text-decoration: none;
}

.alliance-tool-alert-dot {
    position: absolute;
    top: 6px;
    right: 7px;
    width: 9px;
    height: 9px;
    border: 2px solid rgba(7, 16, 27, 0.96);
    border-radius: 50%;
    background: #ff4f62;
    box-shadow: 0 0 0 2px rgba(255, 79, 98, 0.14), 0 0 10px rgba(255, 79, 98, 0.72);
}

.alliance-command-center {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr);
    gap: 14px;
    align-items: start;
    margin-top: 14px;
}

.alliance-communication-stage {
    min-width: 0;
    border: 1px solid rgba(91, 215, 255, 0.25);
    border-radius: 14px;
    background: rgba(7, 16, 27, 0.9);
    overflow: hidden;
}

.alliance-communication-stage > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border-bottom: 1px solid rgba(148, 181, 207, 0.16);
}

.alliance-communication-stage h2 {
    margin: 2px 0 0;
    font-size: 1rem;
}

.alliance-command-kicker {
    color: #80cef4;
    font-size: 0.63rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.alliance-live-indicator {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: #f0c77c;
    font-size: 0.72rem;
    font-weight: 800;
}

.alliance-live-indicator i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e1ae50;
    box-shadow: 0 0 9px rgba(225, 174, 80, 0.62);
}

.alliance-live-indicator[data-state="live"] {
    color: #8ce6b7;
}

.alliance-live-indicator[data-state="live"] i {
    background: #60d99a;
    box-shadow: 0 0 9px rgba(96, 217, 154, 0.78);
}

.alliance-live-indicator[data-state="offline"] {
    color: #ff9aa5;
}

.alliance-live-indicator[data-state="offline"] i {
    background: #ff6375;
    box-shadow: 0 0 9px rgba(255, 99, 117, 0.68);
}

.alliance-chat-mount {
    min-height: 560px;
}

.global-chat-widget.is-alliance-embedded,
.global-chat-widget.is-alliance-embedded:not(.is-collapsed) {
    position: static;
    inset: auto;
    z-index: auto;
    width: 100%;
    min-height: 560px;
    pointer-events: auto;
}

.global-chat-widget.is-alliance-embedded::before,
.global-chat-widget.is-alliance-embedded:not(.is-collapsed)::before,
.global-chat-widget.is-alliance-embedded .global-chat-toggle,
.global-chat-widget.is-alliance-embedded .mobile-chat-preview {
    display: none;
}

.global-chat-widget.is-alliance-embedded .global-chat-panel,
.global-chat-widget.is-alliance-embedded.is-collapsed .global-chat-panel {
    display: grid;
    grid-template-rows: auto minmax(350px, 1fr) auto auto;
    min-height: 560px;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.global-chat-widget.is-alliance-embedded .global-chat-log {
    min-height: 350px;
    max-height: 430px;
}

.alliance-command-page > .alliance-contribution-section > .alliance-contribution-overview,
.alliance-command-page > [data-alliance-event-overview],
.alliance-command-page > .alliance-dashboard {
    display: none;
}

dialog.alliance-secondary-dialog {
    width: min(1080px, calc(100vw - 32px));
    max-height: min(90dvh, 920px);
}

.alliance-secondary-dialog-body {
    min-width: 0;
}

.alliance-secondary-dialog-body > .alliance-panel,
.alliance-secondary-dialog-body > details.alliance-panel {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.alliance-secondary-dialog-body > .alliance-panel > h2,
.alliance-secondary-dialog-body > details.alliance-panel > summary {
    display: none;
}

@media (max-width: 760px) {
    .alliance-command-page {
        padding-inline: 8px;
    }

    .alliance-command-identity {
        grid-template-columns: 54px minmax(0, 1fr) auto;
        gap: 9px;
        margin-top: 4px;
        padding: 9px;
    }

    .alliance-command-emblem {
        width: 54px;
        height: 52px;
    }

    .alliance-command-emblem .alliance-banner-compact {
        min-height: 52px;
    }

    .alliance-command-title > span:last-child,
    .alliance-command-status small,
    .alliance-hive-link {
        display: none;
    }

    .alliance-command-title h1 {
        font-size: 0.96rem;
    }

    .alliance-command-status {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        align-items: center;
        text-align: center;
    }

    .alliance-command-status strong {
        font-size: 1.08rem;
    }

    .alliance-command-status span {
        font-size: 0.65rem;
    }

    .alliance-command-center {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 10px;
    }

    .alliance-communication-stage > header {
        padding: 9px 10px;
    }

    .alliance-chat-mount,
    .global-chat-widget.is-alliance-embedded,
    .global-chat-widget.is-alliance-embedded:not(.is-collapsed),
    .global-chat-widget.is-alliance-embedded .global-chat-panel,
    .global-chat-widget.is-alliance-embedded.is-collapsed .global-chat-panel {
        min-height: 52dvh;
    }

    .global-chat-widget.is-alliance-embedded .global-chat-panel,
    .global-chat-widget.is-alliance-embedded.is-collapsed .global-chat-panel {
        grid-template-rows: auto minmax(230px, 1fr) auto auto;
    }

    .global-chat-widget.is-alliance-embedded .global-chat-log {
        min-height: 230px;
        max-height: 38dvh;
    }

    dialog.alliance-secondary-dialog {
        position: fixed;
        inset: 0;
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: none;
        margin: 0;
        border-radius: 0;
    }

    .alliance-secondary-dialog-body .alliance-donation-actions,
    .alliance-secondary-dialog-body .form-grid.two,
    .alliance-secondary-dialog-body .form-grid.three {
        grid-template-columns: 1fr;
    }
}

/* Public access, waitlist and player feedback */
.landing-showcase {
    display: grid;
    gap: 1.5rem;
}

.landing-shot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.landing-shot-card {
    overflow: hidden;
    border: 1px solid rgba(116, 190, 255, .22);
    border-radius: 18px;
    background: rgba(8, 18, 31, .86);
}

.landing-shot-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #050911;
}

.landing-shot-card > div {
    padding: 1rem;
}

.landing-feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.waitlist-band {
    display: grid;
    gap: 1rem;
    border-block: 1px solid rgba(116, 190, 255, .16);
}

.waitlist-band > .section-heading,
.waitlist-band > .waitlist-form,
.waitlist-band > .field-help {
    width: min(100%, 760px);
    margin-inline: auto;
}

.waitlist-band > .section-heading {
    grid-template-columns: 1fr;
    align-items: start;
    gap: .75rem;
    margin-bottom: .5rem;
}

.waitlist-form {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: .75rem;
}

.waitlist-form > .button { justify-self: start; }

.waitlist-form label {
    display: grid;
    gap: .4rem;
}

.public-legal-links {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    padding: 1.5rem;
    color: var(--muted);
}

.legal-page {
    max-width: 980px;
    margin-inline: auto;
}

.legal-copy {
    display: grid;
    gap: .65rem;
}

.legal-copy h2 {
    margin: 1rem 0 0;
}

.global-feedback-button {
    position: fixed;
    right: calc(var(--app-side-gap) + var(--app-hud-width) + 12px);
    bottom: 14px;
    z-index: 211;
    border: 1px solid rgba(116, 190, 255, .38);
    border-radius: 999px;
    padding: .65rem 1rem;
    color: #dff4ff;
    background: rgba(8, 22, 37, .94);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
}

.feedback-dialog {
    width: min(680px, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow: auto;
}

.feedback-dialog textarea,
.feedback-admin-row textarea {
    min-height: 8rem;
    resize: vertical;
}

.radar-missions-dialog { width: min(960px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
.radar-missions-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding-right:38px; }
.radar-missions-head h2 { margin-top:0; }
.radar-experience { display:grid; width:min(280px,42vw); gap:3px; text-align:right; }
.radar-experience span { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.radar-experience strong { font-size:1.05rem; }
.radar-experience em { display:block; height:9px; overflow:hidden; border:1px solid rgba(91,215,255,.35); border-radius:999px; background:rgba(3,12,20,.86); }
.radar-experience i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#3d9fc8,#65e6ff); box-shadow:0 0 12px rgba(91,215,255,.65); }
.radar-mission-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.radar-mission-summary span { padding: 6px 9px; border: 1px solid rgba(91,215,255,.25); border-radius: 999px; background: rgba(7,22,34,.9); }
.radar-tactical-map { position: relative; min-height: 520px; overflow: hidden; border: 1px solid rgba(91,215,255,.3); border-radius: 16px; background:radial-gradient(circle at 13% 19%,#d9f6ff 0 1px,transparent 2px),radial-gradient(circle at 72% 28%,#87dfff 0 1px,transparent 2px),radial-gradient(circle at 31% 77%,#fff 0 1px,transparent 2px),radial-gradient(circle at 86% 68%,#9fd8ff 0 1.5px,transparent 2.5px),linear-gradient(rgba(73,171,205,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(73,171,205,.08) 1px,transparent 1px),radial-gradient(circle at center,rgba(15,69,86,.72),rgba(3,12,20,.99) 68%); background-size:173px 131px,211px 179px,257px 223px,307px 269px,32px 32px,32px 32px,auto; }
.radar-tactical-map::before { content:""; position:absolute; inset:10%; border:1px solid rgba(91,215,255,.16); border-radius:50%; box-shadow:0 0 0 80px rgba(91,215,255,.03),0 0 0 160px rgba(91,215,255,.025); pointer-events:none; }
.radar-tactical-map-sweep { position:absolute; z-index:1; inset:0; display:grid; place-items:center; transform:rotate(0deg); transform-origin:center; animation:radar-sweep-rotate 5.6s linear infinite; will-change:transform; pointer-events:none; }
.radar-tactical-map-sweep::before { content:""; display:block; height:156%; aspect-ratio:1; border-radius:50%; background:conic-gradient(from 0deg,transparent 0 348deg,rgba(35,137,168,.008) 350deg,rgba(46,166,198,.026) 353deg,rgba(61,190,220,.075) 356deg,rgba(78,210,239,.17) 358deg,rgba(105,226,250,.38) 359.15deg,rgba(207,249,255,.96) 359.58deg,rgba(112,230,252,.18) 359.78deg,transparent 360deg); -webkit-mask-image:radial-gradient(circle closest-side at center,transparent 0 3%,rgba(0,0,0,.5) 6%,#000 14%,#000 70%,rgba(0,0,0,.72) 77%,transparent 84%); mask-image:radial-gradient(circle closest-side at center,transparent 0 3%,rgba(0,0,0,.5) 6%,#000 14%,#000 70%,rgba(0,0,0,.72) 77%,transparent 84%); filter:drop-shadow(0 0 5px rgba(92,220,247,.16)); }
.radar-tactical-map-content { position:relative; z-index:2; min-height:inherit; }
.radar-signal-poi { position:absolute; z-index:2; left:var(--radar-x); top:var(--radar-y); display:grid; width:58px; min-width:58px; max-width:58px; height:58px; min-height:58px; max-height:58px; box-sizing:border-box; padding:4px; place-items:stretch; transform:translate(-50%,-50%); overflow:visible; border:2px solid #7bcfe9; border-radius:50%; background:rgba(4,16,27,.94); box-shadow:0 0 0 5px rgba(91,215,255,.09),0 0 20px rgba(91,215,255,.34); cursor:pointer; }
.radar-signal-poi img { display:block; width:100%; min-width:0; max-width:100%; height:100%; min-height:0; max-height:100%; aspect-ratio:1; border-radius:50%; object-fit:cover; }
.radar-signal-poi.rarity-uncommon { border-color:#50dc8c; box-shadow:0 0 0 5px rgba(80,220,140,.1),0 0 20px rgba(80,220,140,.4); }
.radar-signal-poi.rarity-rare { border-color:#a78bfa; box-shadow:0 0 0 5px rgba(167,139,250,.11),0 0 22px rgba(167,139,250,.48); }
.radar-signal-poi.is-selected { transform:translate(-50%,-50%) scale(1.16); outline:2px solid #fff; outline-offset:3px; }
.radar-pulse { position:absolute; width:9px; height:9px; right:-2px; top:-2px; border-radius:50%; background:#5bd7ff; box-shadow:0 0 0 0 rgba(91,215,255,.6); animation:radar-signal-pulse 1.8s infinite; }
.radar-signal-detail { position:absolute; right:12px; bottom:12px; left:12px; z-index:4; display:grid; grid-template-columns:84px 1fr; gap:12px; max-height:calc(100% - 24px); margin:0; padding:12px; overflow:hidden; border:1px solid rgba(91,215,255,.35); border-radius:14px; background:rgba(5,17,28,.96); box-shadow:0 14px 36px rgba(0,0,0,.48); backdrop-filter:blur(8px); }
.radar-signal-detail[hidden] { display:none; }
.radar-signal-detail > img { width:84px; height:84px; border-radius:50%; object-fit:cover; border:2px solid rgba(91,215,255,.55); }
.radar-signal-detail h3,.radar-signal-detail p { margin:0 0 7px; }
.radar-signal-detail .button { min-height:36px; margin:8px 0 0 10px; padding:7px 11px; }
.radar-signal-detail-close { position:absolute; top:7px; right:9px; border:0; background:transparent; color:var(--muted); font-size:1.5rem; cursor:pointer; }
.radar-reward-result { grid-column:1/-1; }
.radar-reward-items { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:10px; }
.radar-reward-items article { display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid rgba(91,215,255,.28); border-radius:10px; background:rgba(7,25,38,.9); }
.radar-reward-items article img { width:44px; height:44px; border-radius:50%; object-fit:cover; }
.radar-reward-items article span { display:grid; gap:2px; }
.radar-reward-items article small { color:var(--muted); }
.radar-reward-items article.rarity-rare { border-color:rgba(99,137,255,.7); box-shadow:0 0 14px rgba(73,103,255,.16); }
.radar-reward-items article.rarity-epic { border-color:rgba(194,91,255,.8); box-shadow:0 0 16px rgba(176,70,255,.22); }
@keyframes radar-signal-pulse { 70% { box-shadow:0 0 0 12px rgba(91,215,255,0); } 100% { box-shadow:0 0 0 0 rgba(91,215,255,0); } }
@keyframes radar-sweep-rotate { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){.radar-tactical-map-sweep{animation-duration:16s}.radar-pulse{animation:none}}
@media (min-width:761px){.radar-missions-dialog.game-overlay{height:min(900px,calc(100dvh - 24px))}}
@media (max-width:720px){.radar-missions-head{display:grid;gap:8px}.radar-experience{width:100%;text-align:left}.radar-tactical-map{min-height:360px}.radar-signal-poi{width:50px;min-width:50px;max-width:50px;height:50px;min-height:50px;max-height:50px}.radar-signal-detail{right:8px;bottom:8px;left:8px;grid-template-columns:56px 1fr;gap:9px;max-height:calc(100% - 16px);padding:9px;font-size:.78rem}.radar-signal-detail>img{width:56px;height:56px}.radar-signal-detail h3{margin-bottom:3px;font-size:.98rem}.radar-signal-detail p:not(.eyebrow){display:-webkit-box;margin-bottom:4px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}.radar-signal-detail .button{display:inline-flex;min-height:34px;margin:6px 0 0;padding:6px 9px}.radar-signal-detail-close{top:3px;right:5px}.radar-reward-items{gap:5px;margin-top:5px}.radar-reward-items article{padding:4px 6px}.radar-reward-items article img{width:32px;height:32px}}

.feedback-admin-row {
    align-items: stretch;
}

.feedback-admin-row p,
.feedback-admin-row small {
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .landing-shot-grid,
    .waitlist-form {
        grid-template-columns: 1fr;
    }

    .global-feedback-button {
        display: none;
    }
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.alert-edge::after,
body.has-critical-alert::after,
body.jump-imminent::after,
body.council-office-alert::after,
body.outgoing-player-attack-warning::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 220;
    border: 4px solid rgba(255, 37, 66, 0.62);
    pointer-events: none;
    background:
        linear-gradient(to right, rgba(255, 37, 66, 0.34), rgba(255, 37, 66, 0.16) 30px, transparent 96px),
        linear-gradient(to left, rgba(255, 37, 66, 0.34), rgba(255, 37, 66, 0.16) 30px, transparent 96px),
        linear-gradient(to bottom, rgba(255, 37, 66, 0.34), rgba(255, 37, 66, 0.16) 30px, transparent 96px),
        linear-gradient(to top, rgba(255, 37, 66, 0.34), rgba(255, 37, 66, 0.16) 30px, transparent 96px);
    box-shadow: inset 0 0 56px rgba(255, 37, 66, 0.24), 0 0 24px rgba(255, 37, 66, 0.16);
    animation: alert-edge-pulse 1.05s ease-in-out infinite alternate;
}

body.alert-edge-jump::after,
body.jump-imminent::after {
    border-color: rgba(91, 215, 255, 0.82);
    background:
        linear-gradient(to right, rgba(91, 215, 255, 0.34), rgba(91, 215, 255, 0.16) 30px, transparent 96px),
        linear-gradient(to left, rgba(91, 215, 255, 0.34), rgba(91, 215, 255, 0.16) 30px, transparent 96px),
        linear-gradient(to bottom, rgba(91, 215, 255, 0.34), rgba(91, 215, 255, 0.16) 30px, transparent 96px),
        linear-gradient(to top, rgba(91, 215, 255, 0.34), rgba(91, 215, 255, 0.16) 30px, transparent 96px);
    box-shadow: inset 0 0 56px rgba(91, 215, 255, 0.24), 0 0 24px rgba(91, 215, 255, 0.16);
    animation-duration: 0.58s;
}

body.alert-edge-veyr::after {
    border-color: rgba(167, 139, 250, 0.86);
    background:
        linear-gradient(to right, rgba(167, 139, 250, 0.34), rgba(34, 211, 238, 0.16) 32px, transparent 100px),
        linear-gradient(to left, rgba(167, 139, 250, 0.34), rgba(34, 211, 238, 0.16) 32px, transparent 100px),
        linear-gradient(to bottom, rgba(34, 211, 238, 0.28), rgba(167, 139, 250, 0.16) 32px, transparent 100px),
        linear-gradient(to top, rgba(34, 211, 238, 0.28), rgba(167, 139, 250, 0.16) 32px, transparent 100px),
        radial-gradient(circle at 50% 50%, transparent 48%, rgba(167, 139, 250, 0.12));
    box-shadow: inset 0 0 64px rgba(167, 139, 250, 0.24), 0 0 26px rgba(34, 211, 238, 0.16);
    animation-duration: 0.72s;
}

body.outgoing-player-attack-warning::after {
    border-color: rgba(255, 207, 107, 0.9);
    background:
        linear-gradient(to right, rgba(255, 207, 107, 0.34), rgba(255, 79, 94, 0.14) 30px, transparent 96px),
        linear-gradient(to left, rgba(255, 207, 107, 0.34), rgba(255, 79, 94, 0.14) 30px, transparent 96px),
        linear-gradient(to bottom, rgba(255, 207, 107, 0.34), rgba(255, 79, 94, 0.14) 30px, transparent 96px),
        linear-gradient(to top, rgba(255, 207, 107, 0.34), rgba(255, 79, 94, 0.14) 30px, transparent 96px);
    box-shadow: inset 0 0 56px rgba(255, 79, 94, 0.24), 0 0 24px rgba(255, 207, 107, 0.16);
    animation-duration: 0.58s;
}

body.council-office-alert::after {
    border-color: rgba(250, 204, 21, 0.86);
    background:
        linear-gradient(to right, rgba(250, 204, 21, 0.3), rgba(245, 158, 11, 0.13) 30px, transparent 96px),
        linear-gradient(to left, rgba(250, 204, 21, 0.3), rgba(245, 158, 11, 0.13) 30px, transparent 96px),
        linear-gradient(to bottom, rgba(250, 204, 21, 0.3), rgba(245, 158, 11, 0.13) 30px, transparent 96px),
        linear-gradient(to top, rgba(250, 204, 21, 0.3), rgba(245, 158, 11, 0.13) 30px, transparent 96px);
    box-shadow: inset 0 0 58px rgba(250, 204, 21, 0.22), 0 0 24px rgba(245, 158, 11, 0.14);
    animation-duration: 0.5s;
}

body.alert-edge-threat::after,
body.threat-warning::after,
body.has-critical-alert::after {
    border-color: rgba(255, 37, 66, 0.68);
    background:
        linear-gradient(to right, rgba(255, 37, 66, 0.34), rgba(255, 37, 66, 0.16) 30px, transparent 96px),
        linear-gradient(to left, rgba(255, 37, 66, 0.34), rgba(255, 37, 66, 0.16) 30px, transparent 96px),
        linear-gradient(to bottom, rgba(255, 37, 66, 0.34), rgba(255, 37, 66, 0.16) 30px, transparent 96px),
        linear-gradient(to top, rgba(255, 37, 66, 0.34), rgba(255, 37, 66, 0.16) 30px, transparent 96px);
    box-shadow: inset 0 0 56px rgba(255, 37, 66, 0.24), 0 0 24px rgba(255, 37, 66, 0.16);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

button {
    color: inherit;
}

.app-topbar {
    padding: 24px clamp(18px, 5vw, 72px) 0;
}

body.has-app-user .page-shell {
    padding-left: var(--app-rail-width);
    padding-right: calc(var(--app-hud-width) + var(--app-side-gap));
    transition: padding-left 160ms ease, padding-right 160ms ease;
}

body.has-app-user.nav-rail-expanded .page-shell {
    padding-left: var(--app-rail-expanded-width);
}

body.has-app-user .app-topbar {
    padding: 10px clamp(14px, 3vw, 34px) 0;
}

body.has-app-user .topbar {
    max-width: var(--app-content-max);
}

body.has-app-user .brand-mark {
    width: 34px;
    height: 34px;
}

.topbar-account-nav {
    margin-left: auto;
}

.game-sound-open-button {
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(128, 218, 255, 0.24);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    cursor: pointer;
}

.game-sound-open-button.is-active {
    border-color: rgba(103, 216, 255, 0.7);
    color: #aeeaff;
    box-shadow: 0 0 14px rgba(57, 186, 232, 0.2);
}

@media (max-width: 760px) {
    .game-sound-open-button { display: none; }
}

.nav-form {
    margin: 0;
}

.nav-form button {
    padding: 10px 12px;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    cursor: pointer;
}

.topbar-user-link {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-nav-rail {
    --rail-icon: url("/assets/icons/actions/base.svg");
    position: fixed;
    left: 6px;
    top: 82px;
    bottom: 14px;
    z-index: 215;
    display: grid;
    align-content: start;
    gap: 8px;
    width: 46px;
    padding: 6px;
    border: 1px solid rgba(91, 215, 255, 0.15);
    border-radius: 10px;
    background: rgba(7, 16, 24, 0.82);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(14px);
    transition: width 160ms ease;
}

.app-nav-rail.is-expanded {
    width: 156px;
}

.app-nav-link,
.app-nav-toggle {
    --rail-icon: url("/assets/icons/actions/base.svg");
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.035);
    text-align: left;
}

.app-nav-toggle {
    --rail-icon: url("/assets/icons/actions/jump.svg");
    margin-bottom: 4px;
    cursor: pointer;
    font: inherit;
}

.app-nav-link:hover,
.app-nav-link:focus-visible,
.app-nav-link.active,
.app-nav-toggle:hover,
.app-nav-toggle:focus-visible {
    color: var(--text);
    border-color: rgba(91, 215, 255, 0.42);
    background: rgba(91, 215, 255, 0.13);
}

.app-nav-rail.is-expanded .app-nav-link,
.app-nav-rail.is-expanded .app-nav-toggle {
    grid-template-columns: 34px minmax(0, 1fr);
    justify-items: stretch;
    width: 142px;
}

.app-nav-icon {
    width: 19px;
    height: 19px;
    justify-self: center;
    background: currentColor;
    mask: var(--rail-icon) center / contain no-repeat;
    -webkit-mask: var(--rail-icon) center / contain no-repeat;
}

.app-nav-badge {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 8px;
    height: 8px;
    border: 1px solid rgba(255, 245, 245, 0.82);
    border-radius: 999px;
    background: #ff355d;
    box-shadow: 0 0 0 2px rgba(7, 16, 24, 0.92), 0 0 12px rgba(255, 53, 93, 0.75);
    opacity: 0;
    transform: scale(0.45);
    transition: opacity 120ms ease, transform 120ms ease;
}

.app-nav-link.has-nav-badge .app-nav-badge {
    opacity: 1;
    transform: scale(1);
}

.app-nav-label {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    z-index: 2;
    transform: translateY(-50%) translateX(-4px);
    opacity: 0;
    pointer-events: none;
    padding: 6px 9px;
    border: 1px solid rgba(91, 215, 255, 0.24);
    border-radius: 7px;
    background: rgba(6, 14, 21, 0.98);
    color: var(--text);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36);
    font-size: 0.82rem;
    white-space: nowrap;
    transition: opacity 120ms ease, transform 120ms ease;
}

.app-nav-link:hover .app-nav-label,
.app-nav-link:focus-visible .app-nav-label {
    opacity: 1;
    transform: translateY(-50%);
}

.app-nav-rail.is-expanded .app-nav-label {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: currentColor;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-nav-rail.is-expanded .app-nav-link:hover .app-nav-label,
.app-nav-rail.is-expanded .app-nav-link:focus-visible .app-nav-label {
    transform: none;
}

.app-nav-command { --rail-icon: url("/assets/icons/actions/command.svg"); }
.app-nav-world { --rail-icon: url("/assets/icons/actions/world.svg"); }
.app-nav-base { --rail-icon: url("/assets/icons/actions/base.svg"); }
.app-nav-build { --rail-icon: url("/assets/icons/actions/build.svg"); }
.app-nav-upgrade { --rail-icon: url("/assets/icons/actions/upgrade.svg"); }
.app-nav-jump { --rail-icon: url("/assets/icons/actions/jump.svg"); }
.app-nav-ship { --rail-icon: url("/assets/icons/actions/ship.svg"); }
.app-nav-research { --rail-icon: url("/assets/icons/actions/research.svg"); }
.app-nav-hive,
.app-nav-raid { --rail-icon: url("/assets/icons/actions/hive.svg"); }
.app-nav-report { --rail-icon: url("/assets/icons/actions/report.svg"); }
.app-nav-inventory { --rail-icon: url("/assets/icons/actions/save.svg"); }
.app-nav-commanders { --rail-icon: url("/assets/icons/actions/player.svg"); }
.app-nav-repair { --rail-icon: url("/assets/icons/actions/repair.svg"); }
.app-nav-market { --rail-icon: url("/assets/icons/actions/shop.svg"); }
.app-nav-shop { --rail-icon: url("/assets/icons/actions/shop.svg"); }
.app-nav-save { --rail-icon: url("/assets/icons/actions/save.svg"); }
.app-nav-menu { --rail-icon: url("/assets/icons/actions/menu.svg"); }
.app-nav-audio { --rail-icon: url("/assets/icons/actions/audio.svg"); }

.mobile-hubbar,
.mobile-hub-sheet,
.mobile-chat-preview {
    display: none;
}

.mobile-hub-toggle.has-nav-badge .app-nav-badge,
.mobile-hub-item.has-nav-badge .app-nav-badge {
    opacity: 1;
    transform: scale(1);
}

.global-status-stack {
    position: sticky;
    top: 0;
    z-index: 170;
    max-width: var(--app-content-max);
    margin: 6px auto 0;
}

.global-compact-status-bar {
    max-width: var(--app-content-max);
    margin: 4px auto 0;
    padding: 4px 6px;
    border: 1px solid rgba(92, 196, 255, 0.24);
    border-radius: 8px;
    background: rgba(8, 18, 34, 0.82);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    backdrop-filter: blur(14px);
    scrollbar-width: thin;
}

.compact-status-pill {
    min-height: 30px;
    padding: 3px 6px;
    border: 1px solid rgba(92, 196, 255, 0.24);
    border-radius: 999px;
    background: rgba(13, 26, 48, 0.74);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    color: var(--text);
    font-size: 0.78rem;
}

.compact-status-pill strong {
    font-size: 0.82rem;
    line-height: 1;
    white-space: nowrap;
}

.compact-status-pill small {
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1;
    white-space: nowrap;
}

button.compact-status-pill {
    font: inherit;
    cursor: pointer;
}

.ship-capacity-icon {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(245, 185, 83, 0.52);
    border-radius: 999px;
    background: url("/assets/icons/actions/ship.svg") center / 15px 15px no-repeat;
}

.ship-capacity-dialog.game-overlay,
.event-calendar-dialog.game-overlay {
    width: min(72rem, calc(100vw - 2rem));
}

.ship-capacity-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.ship-capacity-detail-grid article {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.ship-capacity-detail-grid article > span,
.ship-capacity-detail-grid small {
    color: var(--muted);
}

.event-calendar-content {
    display: grid;
    gap: 12px;
}

.event-calendar-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 4px;
    margin-bottom: 14px;
    border: 1px solid rgba(152, 218, 242, 0.2);
    border-radius: 999px;
    background: rgba(3, 10, 20, 0.64);
}

.event-calendar-mode-switch button {
    min-height: 42px;
    border: 0;
    border-radius: 999px;
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.event-calendar-mode-switch button.is-active {
    color: #f7fcff;
    background: linear-gradient(135deg, rgba(35, 154, 194, 0.72), rgba(73, 101, 206, 0.68));
    box-shadow: 0 8px 20px rgba(0, 12, 31, 0.34);
}

.event-calendar-mode-switch b {
    display: inline-grid;
    min-width: 1.55rem;
    min-height: 1.55rem;
    place-items: center;
    margin-left: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.76rem;
}

.event-calendar-timeline,
.event-calendar-short-list {
    display: grid;
    gap: 9px;
}

.event-calendar-day-header {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px;
    position: sticky;
    top: 76px;
    z-index: 3;
    padding: 7px 0;
    background: rgba(6, 12, 23, 0.96);
    backdrop-filter: blur(12px);
}

.event-calendar-day-header > div {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.event-calendar-day-header > div > span {
    display: grid;
    min-width: 0;
    place-items: center;
    gap: 2px;
    padding: 5px 1px;
    border-left: 1px solid rgba(171, 222, 241, 0.12);
    color: var(--muted);
    font-size: clamp(0.62rem, 2.6vw, 0.78rem);
}

.event-calendar-day-header > div > span.is-today {
    border-radius: 7px;
    color: #c7f5ff;
    background: rgba(61, 186, 216, 0.14);
}

.event-calendar-day-header small {
    font-size: 0.64rem;
}

.event-calendar-timeline-row,
.event-calendar-short-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px;
    padding: 10px 8px;
    border: 1px solid rgba(171, 222, 241, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
}

.event-calendar-timeline-row.is-active,
.event-calendar-short-row.is-active {
    border-color: rgba(91, 222, 239, 0.56);
    box-shadow: inset 3px 0 0 rgba(91, 222, 239, 0.74);
}

.event-calendar-icon {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    align-self: start;
    border: 1px solid color-mix(in srgb, currentColor 56%, transparent);
    border-radius: 10px;
    color: #9deeff;
    background: color-mix(in srgb, currentColor 12%, rgba(4, 11, 21, 0.92));
    font-size: 1.08rem;
    font-weight: 900;
}

.event-calendar-icon.tone-blue { color: #8ebcff; }
.event-calendar-icon.tone-green { color: #8ae6b1; }
.event-calendar-icon.tone-amber { color: #ffd17a; }
.event-calendar-icon.tone-red { color: #ff8e91; }
.event-calendar-icon.tone-violet { color: #c9a0ff; }

.event-calendar-timeline-main {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.event-calendar-row-copy {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 8px;
}

.event-calendar-row-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-calendar-row-copy > span,
.event-calendar-timeline-main > small,
.event-calendar-short-row small {
    color: var(--muted);
}

.event-calendar-row-copy > span {
    margin-left: auto;
    white-space: nowrap;
    font-size: 0.74rem;
}

.event-calendar-track {
    position: relative;
    height: 32px;
    overflow: hidden;
    border: 1px solid rgba(171, 222, 241, 0.13);
    border-radius: 8px;
    background-color: rgba(3, 9, 18, 0.7);
    background-image: linear-gradient(90deg, rgba(171, 222, 241, 0.13) 1px, transparent 1px);
    background-size: 12.5% 100%;
}

.event-calendar-bar {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: var(--event-left);
    width: var(--event-width);
    min-width: 5px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0 7px;
    border: 1px solid rgba(186, 242, 255, 0.54);
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(31, 170, 202, 0.86), rgba(82, 94, 203, 0.82));
    box-shadow: 0 4px 12px rgba(0, 16, 34, 0.38);
}

.event-calendar-bar b {
    overflow: hidden;
    color: #fff;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-calendar-short-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
}

.event-calendar-short-row > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.event-calendar-short-row > div > span {
    color: #9ed6e7;
    font-size: 0.76rem;
    font-weight: 750;
}

.event-calendar-short-row.is-past {
    opacity: 0.46;
    filter: saturate(0.35);
}

.admin-event-source-grid,
.admin-event-template-list,
.admin-event-entry-list {
    display: grid;
    gap: 12px;
}

.admin-event-source-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-event-source-card,
.admin-event-template-card,
.admin-event-entry-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
}

.admin-event-source-card span {
    color: var(--muted);
    font-size: 0.82rem;
}

.admin-event-entry-card {
    grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(155px, 1fr)) auto;
    align-items: end;
}

.admin-event-entry-card.is-cancelled {
    opacity: 0.58;
}

.admin-event-template-card.is-new {
    margin-bottom: 14px;
    border-color: rgba(92, 196, 255, 0.38);
}

.admin-event-description {
    grid-column: span 2;
}

.admin-form-action {
    display: flex;
    align-items: end;
}

.fleet-readiness-icon {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(92, 196, 255, 0.5);
    color: #9bdcff;
    font-weight: 800;
    font-size: 0.68rem;
}

.scout-status-icon,
.pirate-heat-icon {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    font-weight: 800;
    font-size: 0.78rem;
}

.scout-status-icon {
    border: 1px solid rgba(118, 213, 255, 0.48);
    background: rgba(118, 213, 255, 0.10) center / 16px 16px no-repeat url("/assets/images/map/fleet-scout.svg");
}

.scout-status-compact.is-empty {
    opacity: 0.68;
}

.pirate-heat-compact {
    border-color: rgba(160, 167, 181, 0.25);
}

.pirate-heat-icon {
    border: 1px solid rgba(160, 167, 181, 0.55);
    background: rgba(160, 167, 181, 0.12);
}

.pirate-heat-symbol {
    display: inline-block;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    object-fit: contain;
    vertical-align: middle;
}

.pirate-heat-icon .pirate-heat-symbol {
    width: 21px;
    height: 21px;
}

.pirate-heat-compact.heat-noticed {
    border-color: rgba(255, 181, 92, 0.34);
}

.pirate-heat-compact.heat-noticed .pirate-heat-icon {
    border-color: rgba(255, 181, 92, 0.7);
    color: #ffd08a;
    background: rgba(255, 181, 92, 0.15);
}

.pirate-heat-compact.heat-hunted {
    border-color: rgba(255, 88, 88, 0.42);
}

.pirate-heat-compact.heat-hunted .pirate-heat-icon {
    border-color: rgba(255, 88, 88, 0.78);
    color: #ff9c9c;
    background: rgba(255, 88, 88, 0.18);
}

.pirate-heat-compact.heat-enemy {
    border-color: rgba(204, 112, 255, 0.48);
}

.pirate-heat-compact.heat-enemy .pirate-heat-icon {
    border-color: rgba(204, 112, 255, 0.85);
    color: #e2b4ff;
    background: rgba(204, 112, 255, 0.20);
}

.pulse-once {
    animation: statusPulseOnce 1.1s ease-out;
}

@keyframes statusPulseOnce {
    0% { box-shadow: 0 0 0 rgba(255, 167, 92, 0); }
    35% { box-shadow: 0 0 24px rgba(255, 167, 92, 0.38); }
    100% { box-shadow: 0 0 0 rgba(255, 167, 92, 0); }
}

.sector-objective-bar {
    max-width: var(--app-content-max);
    margin: 10px auto 0;
    padding: 10px 12px;
    border: 1px solid rgba(242, 201, 76, 0.26);
    border-radius: 8px;
    background: rgba(22, 22, 13, 0.82);
    display: grid;
    grid-template-columns: minmax(230px, 1.1fr) minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.sector-objective-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sector-objective-main small {
    display: block;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sector-objective-icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(242, 201, 76, 0.44);
    background: rgba(242, 201, 76, 0.14);
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 800;
}

.sector-objective-help {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(242, 201, 76, 0.42);
    background: rgba(242, 201, 76, 0.12);
    color: var(--gold);
    display: inline-grid;
    place-items: center;
    font-weight: 900;
    cursor: pointer;
    flex: 0 0 auto;
}

.sector-objective-help:hover,
.sector-objective-help:focus-visible {
    background: rgba(242, 201, 76, 0.22);
}

.sector-objective-schedule-backdrop {
    position: fixed;
    inset: 0;
    z-index: 760;
    background: rgba(2, 4, 10, 0.52);
    display: grid;
    place-items: start end;
    padding: 90px 24px 24px;
}

.sector-objective-schedule-backdrop[hidden] {
    display: none !important;
}

.sector-objective-schedule-dialog {
    position: relative;
    width: min(380px, calc(100vw - 32px));
    max-height: min(720px, calc(100vh - 130px));
    overflow: auto;
    border: 1px solid rgba(242, 201, 76, 0.35);
    border-radius: 8px;
    background: rgba(13, 17, 27, 0.97);
    color: var(--text);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    padding: 18px;
}

.sector-objective-schedule-dialog h3 {
    margin: 0 36px 14px 0;
}

.sector-objective-schedule-list {
    display: grid;
    gap: 8px;
}

.sector-objective-schedule-list article {
    display: grid;
    grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
}

.sector-objective-schedule-list time {
    color: var(--muted);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sector-objective-schedule-list strong { line-height: 1.3; }

.sector-objective-progress {
    display: grid;
    min-width: 0;
}

.sector-objective-meter {
    position: relative;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(3, 8, 14, 0.72);
    box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.45);
}

.sector-objective-meter-fill {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    border-radius: 11px 0 0 11px;
    background: linear-gradient(90deg, rgba(242, 201, 76, 0.66), rgba(98, 211, 148, 0.68));
    box-shadow: 0 0 16px rgba(98, 211, 148, 0.28);
    transition: width 180ms ease;
}

.sector-objective-star {
    position: absolute;
    z-index: 2;
    top: 2px;
    left: clamp(13px, var(--star-position), calc(100% - 13px));
    width: 24px;
    height: 24px;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    color: rgba(3, 8, 14, 0.9);
    font-size: 1.25rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
    transition: color 180ms ease, filter 180ms ease, transform 180ms ease;
}

.sector-objective-star > span {
    -webkit-text-stroke: 1px rgba(238, 244, 251, 0.76);
}

.sector-objective-star.complete {
    transform: translateX(-50%) scale(1.08);
}

.sector-objective-star.tier-bronze.complete { color: #d58a4a; }
.sector-objective-star.tier-silver.complete { color: #dce8f2; }
.sector-objective-star.tier-gold.complete { color: #f2c94c; }

.sector-objective-star.complete > span {
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.45);
}

.sector-objective-meter-copy {
    position: absolute;
    z-index: 3;
    right: 8px;
    bottom: 3px;
    left: 8px;
    min-width: 0;
    overflow: hidden;
    color: rgba(246, 249, 252, 0.94);
    font-size: 0.76rem;
    line-height: 1.15;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.92);
    font-variant-numeric: tabular-nums;
}

.sector-objective-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
}

.sector-objective-footer small {
    color: var(--muted);
    white-space: nowrap;
}

.sector-objective-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.sector-objective-link {
    padding: 5px 8px;
    border: 1px solid rgba(242, 201, 76, 0.42);
    border-radius: 999px;
    color: var(--text);
    background: rgba(242, 201, 76, 0.14);
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.sector-objective-link:hover,
.sector-objective-link:focus-visible {
    border-color: rgba(242, 201, 76, 0.72);
    background: rgba(242, 201, 76, 0.22);
}

dialog.conflict-tasks-dialog.game-overlay {
    width: min(980px, calc(100vw - 32px));
    max-height: min(880px, calc(100dvh - 32px));
}

.conflict-tasks-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid rgba(117, 223, 255, 0.24);
    background: rgba(12, 23, 36, 0.78);
}

.conflict-tasks-summary > div {
    display: grid;
    gap: 2px;
}

.conflict-tasks-summary span,
.conflict-tasks-summary small {
    color: var(--muted);
}

.conflict-tasks-content {
    display: grid;
    gap: 22px;
    overflow-y: auto;
    min-height: 0;
    padding-right: 3px;
}

.conflict-task-selected,
.conflict-task-offers {
    display: grid;
    gap: 12px;
}

.conflict-task-selected > header h3,
.conflict-task-offers > header h3 {
    margin: 0;
}

.conflict-task-offers > header > span {
    color: var(--muted);
    font-size: 0.82rem;
}

.conflict-task-card,
.conflict-task-offer {
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: linear-gradient(135deg, rgba(16, 28, 43, 0.96), rgba(8, 15, 25, 0.95));
    padding: 14px;
}

.conflict-task-card.is-complete {
    border-color: rgba(95, 225, 166, 0.5);
    box-shadow: inset 3px 0 rgba(95, 225, 166, 0.75);
}

.conflict-task-card > header,
.conflict-task-offer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.conflict-task-card h3,
.conflict-task-offer h3 {
    margin: 2px 0 0;
    font-size: 1rem;
}

.conflict-task-card p,
.conflict-task-offer p {
    margin: 8px 0;
    color: var(--muted);
}

.conflict-task-card header > b,
.conflict-task-offer aside > b {
    color: #ffad94;
    white-space: nowrap;
}

.conflict-task-progress {
    position: relative;
    height: 28px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.28);
}

.conflict-task-progress > span {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, rgba(215, 76, 83, 0.74), rgba(255, 158, 105, 0.7));
}

.conflict-task-progress > b {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    height: 100%;
    font-size: 0.78rem;
}

.conflict-task-card footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.conflict-task-offer aside {
    display: grid;
    justify-items: end;
    gap: 10px;
    min-width: 190px;
}

.conflict-task-offer.is-locked {
    opacity: 0.62;
}

@media (max-width: 720px) {
    dialog.conflict-tasks-dialog.game-overlay {
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: none;
        margin: 0;
        inset: 0 0 auto 0;
    }

    .conflict-task-card > header,
    .conflict-task-offer {
        gap: 10px;
    }

    .conflict-task-offer {
        display: grid;
    }

    .conflict-task-offer aside {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-width: 0;
    }
}

dialog.sector-objective-contest-dialog.game-overlay {
    --game-overlay-padding: 16px;
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    overflow: hidden;
    border-radius: 0;
}

dialog.sector-objective-contest-dialog.game-overlay[open] {
    display: flex;
    flex-direction: column;
}

dialog.sector-objective-contest-dialog.game-overlay .game-overlay-head {
    position: relative;
    top: auto;
    flex: 0 0 auto;
    margin-bottom: 10px;
}

.sector-objective-contest-task {
    flex: 0 0 auto;
}

.sector-objective-contest-task-card.sector-objective-bar {
    max-width: none;
    margin: 0;
    background: rgba(22, 22, 13, 0.9);
}

.sector-objective-contest-task-card .sector-objective-main small {
    white-space: normal;
}

.sector-objective-contest-summary {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 8px 18px;
    margin-top: 10px;
    padding: 12px 16px;
    border: 1px solid rgba(242, 201, 76, 0.28);
    border-radius: 10px;
    background: rgba(242, 201, 76, 0.08);
}

.sector-objective-contest-summary > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.sector-objective-contest-summary > div small {
    justify-self: start;
}

.sector-objective-contest-summary span {
    color: var(--gold);
    font-weight: 800;
}

.sector-objective-contest-summary small {
    justify-self: end;
    color: var(--muted);
}

.sector-objective-contest-list {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 5px;
    margin-top: 8px;
    padding-right: 3px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.sector-objective-contest-entry {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
}

.sector-objective-contest-entry.is-self {
    border-color: rgba(87, 214, 230, 0.48);
    background: rgba(87, 214, 230, 0.09);
}

.sector-objective-contest-entry > div {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.sector-objective-contest-entry > div strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    line-height: 1.2;
}

.sector-objective-contest-entry small,
.sector-objective-contest-entry > span {
    color: var(--muted);
    font-size: 0.72rem;
}

.sector-objective-contest-rank {
    color: var(--gold);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
    dialog.sector-objective-contest-dialog.game-overlay {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    dialog.sector-objective-contest-dialog.game-overlay .game-overlay-head {
        margin-bottom: 8px;
    }

    .sector-objective-contest-task-card.sector-objective-bar {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 9px 10px;
    }

    .sector-objective-contest-task-card .sector-objective-meter {
        height: 44px;
    }

    .sector-objective-contest-summary {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 10px;
        margin-top: 8px;
        padding: 8px 10px;
    }

    .sector-objective-contest-summary > span,
    .sector-objective-contest-summary > small {
        font-size: 0.7rem;
    }

    .sector-objective-contest-summary > small {
        justify-self: end;
    }

    .sector-objective-contest-entry {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        min-height: 32px;
        padding-inline: 8px;
    }
}

.fleet-readiness-action {
    margin: 0;
    flex: 0 0 auto;
}

.fleet-readiness-action .button {
    min-height: 0;
    padding: 5px 8px;
    font-size: 0.78rem;
    line-height: 1.1;
}

.fleet-readiness-action .button.compact {
    min-width: 44px;
    text-align: center;
}

.base-shield-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 1180px;
    margin: 6px auto 0;
    padding: 7px 10px;
    border: 1px solid rgba(140, 235, 255, 0.36);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(42, 147, 197, 0.22), rgba(7, 16, 24, 0.84)),
        rgba(8, 18, 34, 0.82);
    box-shadow: 0 0 24px rgba(91, 215, 255, 0.13), inset 0 0 20px rgba(91, 215, 255, 0.08);
    color: #d9fbff;
    overflow: hidden;
    backdrop-filter: blur(14px);
}

.base-shield-bar::after {
    content: "";
    position: absolute;
    inset: -40% auto -40% -18%;
    width: 32%;
    background: linear-gradient(90deg, transparent, rgba(180, 250, 255, 0.18), transparent);
    transform: skewX(-18deg);
    animation: shield-status-sweep 3.2s ease-in-out infinite;
    pointer-events: none;
}

.base-shield-icon {
    position: relative;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    border: 2px solid rgba(170, 242, 255, 0.85);
    border-radius: 50% 50% 45% 45%;
    background:
        radial-gradient(circle at 50% 38%, rgba(170, 242, 255, 0.48), transparent 45%),
        rgba(18, 62, 85, 0.7);
    clip-path: polygon(50% 0, 92% 20%, 82% 76%, 50% 100%, 18% 76%, 8% 20%);
    box-shadow: 0 0 12px rgba(91, 215, 255, 0.4);
}

.base-shield-bar strong,
.base-shield-bar small {
    position: relative;
    z-index: 1;
}

.base-shield-bar strong {
    font-size: 0.86rem;
}

.base-shield-bar small {
    color: #aeefff;
    font-size: 0.78rem;
}

.base-shield-bar b {
    color: var(--text);
}

.notice {
    max-width: 1180px;
    margin: 22px auto 0;
    padding: 14px 16px;
    border: 1px solid rgba(98, 211, 148, 0.45);
    border-radius: 8px;
    background: rgba(98, 211, 148, 0.12);
    color: #dff8ea;
}

.notice.danger {
    margin: 12px 0;
    border-color: rgba(255, 111, 97, 0.45);
    background: rgba(255, 111, 97, 0.12);
    color: #ffd8d3;
}

.notice.info,
.notice-card.notice-info {
    border-color: rgba(91, 215, 255, 0.5);
    background: rgba(13, 68, 88, 0.88);
    color: #def8ff;
}

.notice.success,
.notice-card.notice-success {
    border-color: rgba(98, 211, 148, 0.58);
    background: rgba(23, 83, 55, 0.88);
    color: #dff8ea;
}

.notice.warning,
.notice-card.notice-warning {
    border-color: rgba(242, 201, 76, 0.68);
    background: rgba(91, 67, 12, 0.9);
    color: #fff2bd;
}

.notice.error,
.notice-card.notice-error {
    border-color: rgba(255, 111, 97, 0.68);
    background: rgba(82, 24, 29, 0.92);
    color: #ffd8d3;
}

.notice.is-dismissing {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 380ms ease, transform 380ms ease;
}

.command-alert-hud {
    position: fixed;
    top: 82px;
    right: var(--app-side-gap);
    z-index: 210;
    display: grid;
    gap: 8px;
    width: var(--app-hud-width);
    max-height: calc(100vh - 276px);
    overflow: auto;
    pointer-events: none;
    scrollbar-width: thin;
}

.command-alert-hud .sector-objective-bar {
    max-width: none;
    margin: 0;
    padding: 10px 11px;
    grid-template-columns: 1fr;
    gap: 9px;
    pointer-events: auto;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.36), 0 0 24px rgba(242, 201, 76, 0.12);
}

.command-alert-hud .sector-objective-main small {
    white-space: normal;
}

.command-alert-hud .sector-objective-footer {
    justify-content: space-between;
}

.command-alert-card {
    padding: 10px 11px;
    border: 1px solid rgba(91, 215, 255, 0.42);
    border-radius: 8px;
    background: rgba(8, 18, 28, 0.94);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.36), 0 0 24px rgba(91, 215, 255, 0.12);
    color: var(--text);
    pointer-events: auto;
}

.critical-fullscreen-warning {
    position: fixed;
    inset: 0;
    z-index: 245;
    display: grid;
    place-items: center;
    padding: 24px;
    background: radial-gradient(circle at 50% 50%, rgba(255, 37, 66, 0.18), rgba(4, 10, 16, 0.42) 42%, rgba(4, 10, 16, 0.72));
    pointer-events: auto;
    animation: critical-warning-in 0.22s ease-out both;
}

.critical-fullscreen-warning-card {
    position: relative;
    width: min(520px, 92vw);
    display: grid;
    gap: 10px;
    padding: 22px 24px 20px;
    border: 1px solid rgba(255, 80, 120, 0.64);
    border-radius: 10px;
    background: rgba(14, 20, 30, 0.94);
    box-shadow: 0 0 34px rgba(255, 37, 66, 0.24), inset 0 0 26px rgba(255, 80, 120, 0.08);
    text-align: center;
}

.critical-fullscreen-warning-card strong {
    color: #fff1f4;
    font-size: 1.08rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.critical-fullscreen-warning-card span {
    color: var(--text);
    line-height: 1.45;
}

.critical-fullscreen-warning-card button {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    cursor: pointer;
}

.command-alert-card strong,
.command-alert-card span,
.command-alert-card small {
    display: block;
}

.command-alert-card strong {
    margin-bottom: 4px;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.notice-card {
    position: relative;
    padding-right: 40px;
}

.notice-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: currentColor;
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.notice-close:hover,
.notice-close:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

.command-alert-card span,
.command-alert-card small {
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.35;
}

.command-alert-card b {
    color: var(--cyan);
}

.command-alert-card.jump.urgent {
    animation: command-jump-urgent 0.42s ease-in-out infinite alternate;
}

.command-alert-card.threat {
    border-color: rgba(255, 79, 94, 0.64);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.36), 0 0 26px rgba(255, 79, 94, 0.2);
}

.command-alert-card.threat.alliance-threat {
    border-color: rgba(255, 153, 102, 0.58);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.34), 0 0 22px rgba(255, 153, 102, 0.16);
}

.command-alert-card.threat-map-link {
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.command-alert-card.threat-map-link:hover,
.command-alert-card.threat-map-link:focus-visible {
    border-color: rgba(255, 185, 132, 0.88);
    background: rgba(19, 29, 40, 0.97);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.38), 0 0 28px rgba(255, 153, 102, 0.28);
    outline: none;
}

.command-alert-card .threat-map-hint {
    margin-top: 7px;
    color: var(--cyan);
    font-weight: 700;
}

.threat-card-summary {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
}

.threat-type-image {
    display: block;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    background: rgba(5, 12, 20, 0.82);
    object-fit: cover;
}

.command-alert-card.threat-empty {
    display: none;
}

.command-alert-card .threat-stars {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1px;
    margin-inline: 2px;
    color: var(--gold);
    white-space: nowrap;
    vertical-align: -0.08em;
    text-shadow: 0 0 10px rgba(242, 201, 76, 0.36);
}

.threat-star {
    font-size: 0.78rem;
    line-height: 1;
}

.command-alert-card.impact-notice {
    border-color: rgba(255, 79, 94, 0.82);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.36), 0 0 34px rgba(255, 79, 94, 0.34);
    animation: threat-card-impact 0.32s ease-out 3;
}

.command-alert-card.veyr-impact-notice {
    border-color: rgba(192, 132, 252, 0.9);
    background: linear-gradient(135deg, rgba(88, 28, 135, 0.92), rgba(49, 46, 129, 0.88));
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.36), 0 0 36px rgba(192, 132, 252, 0.4);
    animation: threat-card-impact 0.32s ease-out 3;
}

.command-alert-card.veyr-event {
    border-color: rgba(167, 139, 250, 0.76);
    background: linear-gradient(135deg, rgba(49, 46, 129, 0.86), rgba(12, 74, 110, 0.78));
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.36), 0 0 30px rgba(34, 211, 238, 0.2);
}

body.threat-impact::before {
    position: fixed;
    inset: 0;
    z-index: 206;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(to right, rgba(255, 37, 66, 0.48), rgba(255, 37, 66, 0.18) 34px, transparent 104px),
        linear-gradient(to left, rgba(255, 37, 66, 0.48), rgba(255, 37, 66, 0.18) 34px, transparent 104px),
        linear-gradient(to bottom, rgba(255, 37, 66, 0.48), rgba(255, 37, 66, 0.18) 34px, transparent 104px),
        linear-gradient(to top, rgba(255, 37, 66, 0.48), rgba(255, 37, 66, 0.18) 34px, transparent 104px),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18), rgba(255, 79, 94, 0.24) 18%, transparent 48%),
        rgba(80, 0, 10, 0.2);
    animation: threat-impact-flash 2.6s ease-out forwards;
}

body.veyr-structure-impact::before {
    position: fixed;
    inset: 0;
    z-index: 206;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(to right, rgba(168, 85, 247, 0.56), rgba(192, 132, 252, 0.2) 38px, transparent 112px),
        linear-gradient(to left, rgba(168, 85, 247, 0.56), rgba(192, 132, 252, 0.2) 38px, transparent 112px),
        linear-gradient(to bottom, rgba(168, 85, 247, 0.56), rgba(192, 132, 252, 0.2) 38px, transparent 112px),
        linear-gradient(to top, rgba(168, 85, 247, 0.56), rgba(192, 132, 252, 0.2) 38px, transparent 112px),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2), rgba(168, 85, 247, 0.28) 18%, transparent 50%),
        rgba(59, 7, 100, 0.22);
    animation: veyr-structure-impact-flash 2.6s ease-out forwards;
}

body.threat-warning::after {
    z-index: 240;
    border: 4px solid rgba(255, 37, 66, 0.68);
    background:
        linear-gradient(to right, rgba(255, 37, 66, 0.34), rgba(255, 37, 66, 0.16) 30px, transparent 96px),
        linear-gradient(to left, rgba(255, 37, 66, 0.34), rgba(255, 37, 66, 0.16) 30px, transparent 96px),
        linear-gradient(to bottom, rgba(255, 37, 66, 0.34), rgba(255, 37, 66, 0.16) 30px, transparent 96px),
        linear-gradient(to top, rgba(255, 37, 66, 0.34), rgba(255, 37, 66, 0.16) 30px, transparent 96px);
    box-shadow: inset 0 0 56px rgba(255, 37, 66, 0.24), 0 0 24px rgba(255, 37, 66, 0.16);
    animation: alert-edge-pulse 1.05s ease-in-out infinite alternate;
}

.command-alert-card.raid {
    border-color: rgba(242, 201, 76, 0.66);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.36), 0 0 26px rgba(242, 201, 76, 0.18);
}

.raid-alert-stack {
    display: contents;
}

.raid-alert-button {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.raid-alert-button:hover,
.raid-alert-button:focus-visible {
    border-color: rgba(242, 201, 76, 0.95);
    background: rgba(38, 34, 20, 0.96);
    outline: 2px solid rgba(242, 201, 76, 0.32);
    outline-offset: 2px;
}

.command-alert-card.alliance-event {
    border-color: rgba(168, 120, 255, 0.68);
    background:
        linear-gradient(135deg, rgba(168, 120, 255, 0.15), rgba(8, 18, 28, 0.94) 48%),
        rgba(8, 18, 28, 0.94);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.36), 0 0 26px rgba(168, 120, 255, 0.18);
}

.command-alert-card.alliance-event b {
    color: #c7a8ff;
}

.alliance-event-standings {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.alliance-event-standings > strong {
    margin: 0;
    color: var(--text);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.alliance-event-standings ol {
    display: grid;
    gap: 5px;
    max-height: 260px;
    margin: 0;
    padding: 0;
    overflow: auto;
    list-style: none;
}

.alliance-event-standings li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 6px 7px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
}

.alliance-event-standings li.active {
    border-color: rgba(97, 211, 148, 0.22);
}

.alliance-event-standings li.defeated {
    opacity: 0.72;
}

.alliance-event-standings li span,
.alliance-event-standings li small,
.alliance-event-standings li em,
.alliance-event-standings li i {
    display: block;
}

.alliance-event-standings li b {
    color: var(--text);
    font-size: 0.82rem;
}

.alliance-event-standings li em,
.alliance-event-standings li i {
    color: var(--muted);
    font-size: 0.74rem;
    font-style: normal;
    white-space: nowrap;
}

.alliance-event-standings li.active i {
    color: var(--green);
}

.alliance-event-poi.alliance-event-imminent .poi-icon {
    animation: alliance-event-wave-pulse 0.55s ease-in-out infinite alternate;
}

.alliance-event-poi.alliance-event-imminent::after {
    position: absolute;
    inset: -24%;
    border: 1px solid rgba(255, 196, 87, 0.56);
    border-radius: 10px;
    box-shadow: 0 0 18px rgba(255, 196, 87, 0.28);
    content: "";
    pointer-events: none;
    animation: alliance-event-wave-ring 1s ease-out infinite;
}

@keyframes alliance-event-wave-pulse {
    from {
        filter: brightness(1) saturate(1);
        transform: scale(1);
    }
    to {
        filter: brightness(1.45) saturate(1.25);
        transform: scale(1.08);
    }
}

@keyframes alliance-event-wave-ring {
    from {
        opacity: 0.85;
        transform: scale(0.86);
    }
    to {
        opacity: 0;
        transform: scale(1.18);
    }
}

.command-alert-card.fleet-status {
    border-color: rgba(97, 211, 148, 0.18);
    background:
        linear-gradient(135deg, rgba(97, 211, 148, 0.07), rgba(8, 18, 28, 0.94) 34%),
        rgba(8, 18, 28, 0.94);
}

.fleet-status-list {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.fleet-status-row {
    display: grid;
    gap: 2px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
    cursor: pointer;
}

.fleet-status-row:hover,
.fleet-status-row:focus-visible {
    background: rgba(91, 215, 255, 0.08);
    outline: 1px solid rgba(91, 215, 255, 0.32);
    outline-offset: 2px;
}

.fleet-status-row:first-child {
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.fleet-status-line {
    white-space: normal;
}

.fleet-status-countdown-group {
    white-space: nowrap;
}

.fleet-status-row.specialized {
    border: 1px dashed rgba(91, 215, 255, 0.72);
    border-radius: 7px;
    background: rgba(91, 215, 255, 0.06);
}

.fleet-status-row.specialized.tier-2 {
    border-style: solid;
    border-color: rgba(97, 211, 148, 0.82);
    background: rgba(97, 211, 148, 0.07);
}

.fleet-status-action {
    margin-top: 5px;
}

.fleet-status-action button {
    width: fit-content;
    padding: 4px 8px;
    border: 1px solid rgba(91, 215, 255, 0.35);
    border-radius: 6px;
    background: rgba(91, 215, 255, 0.13);
    color: var(--text);
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
}

.command-alert-card.threat b {
    color: #ff7d89;
}

.auth-shell,
.app-section {
    min-height: calc(100vh - 84px);
    padding: clamp(38px, 7vw, 92px) clamp(18px, 5vw, 72px);
}

.app-section {
    --content-width: var(--app-content-max);
}

body.has-app-user .app-section {
    min-height: calc(100vh - 128px);
    padding: 16px clamp(14px, 3vw, 34px) 34px;
}

.auth-shell {
    display: grid;
    place-items: start center;
}

.auth-card,
.admin-panel {
    width: min(100%, 520px);
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-strong);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24);
}

.auth-card h1,
.admin-panel h1,
.app-section h1 {
    margin-bottom: 14px;
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    line-height: 0.98;
}

.wide-admin-panel {
    width: min(100%, 1280px);
    margin-inline: auto;
}

.balancing-cockpit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    width: min(100%, 1280px);
    margin: 0 auto 18px;
}

.balancing-cockpit-card {
    width: 100%;
    min-height: 220px;
    padding: 18px;
}

.balancing-cockpit-card h2 {
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.balancing-cockpit-card strong {
    display: block;
    margin-bottom: 10px;
    color: var(--accent);
}

.balancing-cockpit-card p {
    min-height: 64px;
    color: var(--muted);
}

.test-tools-grid {
    grid-template-columns: repeat(2, minmax(360px, 1fr));
    align-items: stretch;
}

.test-tools-grid .balancing-cockpit-card {
    min-height: 0;
}

.test-tools-grid .balancing-cockpit-card p {
    min-height: 0;
}

.test-tools-grid .settings-form {
    width: 100%;
}

.test-tool-form-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    align-items: end;
}

.test-tool-form-grid label,
.test-tool-form-grid button {
    min-width: 0;
}

.test-tool-form-grid input {
    width: 100%;
}

.test-tool-form-grid button {
    min-height: 42px;
    white-space: normal;
}

.admin-nav-groups {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    width: min(100%, 1280px);
    margin: 0 auto 18px;
}

.admin-nav-group {
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: rgba(7, 16, 24, 0.68);
}

.admin-nav-group h2 {
    margin: 0 0 10px;
    color: var(--accent);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-nav-group div {
    display: grid;
    gap: 6px;
}

.admin-nav-group a {
    display: block;
    padding: 7px 9px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    background: rgba(15, 23, 42, 0.52);
}

.admin-nav-group a:hover,
.admin-nav-group a.active {
    border-color: rgba(125, 211, 252, 0.52);
    background: rgba(14, 165, 233, 0.16);
}

@media (max-width: 1180px) {
    .balancing-cockpit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-nav-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .test-tools-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .test-tool-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Shared player overlay shell. Large game views, catalogs and settings use
   one visual hierarchy while their feature-specific bodies keep their own
   responsive layout. */
dialog.game-overlay {
    --game-overlay-padding: 18px;
    position: relative;
    box-sizing: border-box;
    padding: var(--game-overlay-padding);
    overflow: auto;
    border: 1px solid rgba(244, 250, 255, 0.82);
    border-radius: 16px;
    color: var(--text);
    background: rgba(5, 12, 24, 0.99);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62), 0 0 26px rgba(190, 228, 255, 0.08);
    pointer-events: auto;
}

dialog.game-overlay::backdrop {
    background: rgba(1, 5, 12, 0.72);
    backdrop-filter: blur(4px);
}

dialog.game-overlay .game-overlay-head {
    position: sticky;
    top: calc(-1 * var(--game-overlay-padding));
    z-index: 8;
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: calc(-1 * var(--game-overlay-padding)) calc(-1 * var(--game-overlay-padding)) 16px;
    padding: var(--game-overlay-padding) 58px 14px var(--game-overlay-padding);
    border-bottom: 1px solid rgba(244, 250, 255, 0.16);
    background: linear-gradient(180deg, rgba(5, 12, 24, 1), rgba(5, 12, 24, 0.96));
    backdrop-filter: blur(12px);
}

.game-overlay-head > div:first-child {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.game-overlay-head h2,
.game-overlay-head h3,
.game-overlay-head p {
    margin: 0;
}

.game-overlay-head h2 {
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    line-height: 1.15;
}

.game-overlay-head > div:first-child > p:last-child {
    max-width: 72ch;
    color: var(--muted);
}

.game-overlay .game-overlay-head .dialog-close,
dialog.game-overlay > .dialog-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    float: none;
    display: inline-grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(244, 250, 255, 0.5);
    border-radius: 10px;
    color: #f7fbff;
    background: rgba(15, 23, 42, 0.92);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.game-overlay .game-overlay-head .dialog-close:hover,
.game-overlay .game-overlay-head .dialog-close:focus-visible,
dialog.game-overlay > .dialog-close:hover,
dialog.game-overlay > .dialog-close:focus-visible {
    border-color: #fff;
    background: rgba(38, 56, 78, 0.98);
    outline: 2px solid rgba(159, 226, 255, 0.32);
    outline-offset: 2px;
}

.shipyard-dialog.game-overlay {
    border-color: rgba(244, 250, 255, 0.82);
}

.shipyard-dialog.game-overlay .shipyard-dialog-tools {
    display: contents;
}

.shipyard-dialog.game-overlay .inline-help-button {
    position: absolute;
    top: 14px;
    right: 60px;
}

.shipyard-dialog.game-overlay .game-overlay-head {
    padding-right: 104px;
}

.global-inventory-dialog.game-overlay {
    padding: 0;
    border-color: rgba(244, 250, 255, 0.82);
}

.global-inventory-dialog.game-overlay .global-inventory-head-actions > span {
    margin-right: 46px;
}

@media (max-width: 760px) {
    dialog.game-overlay {
        --game-overlay-padding: 14px;
        position: fixed;
        inset: 0;
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: none;
        margin: 0;
        padding: var(--game-overlay-padding) 12px calc(16px + env(safe-area-inset-bottom));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: none;
        border-radius: 0;
        -webkit-overflow-scrolling: touch;
    }

    dialog.game-overlay .game-overlay-head {
        top: -14px;
        margin: -14px -12px 12px;
        padding: 14px 54px 12px 14px;
    }

    .game-overlay-head > div:first-child > p:last-child {
        font-size: 0.82rem;
        line-height: 1.35;
    }

    .game-overlay .game-overlay-head .dialog-close,
    dialog.game-overlay > .dialog-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }

    .shipyard-dialog.game-overlay .inline-help-button {
        top: 12px;
        right: 58px;
    }

    .shipyard-dialog.game-overlay .game-overlay-head {
        padding-right: 102px;
    }

    .radar-missions-dialog.game-overlay .radar-missions-head {
        display: grid;
        gap: 8px;
    }

    .radar-missions-dialog.game-overlay .radar-experience {
        width: min(100%, 320px);
        text-align: left;
    }

    .global-inventory-dialog.game-overlay {
        padding: 0;
    }

    .global-inventory-dialog.game-overlay .game-overlay-head {
        margin: -14px -14px 12px;
        padding: 14px 58px 12px 14px;
    }
}

.app-section > .section-heading,
.app-section > .auth-copy,
.app-section > .hero-actions,
.app-section > .admin-panel:not(.wide-admin-panel),
.app-section > .commander-collection-panel,
.app-section > .alliance-panel,
.app-section > .shop-panel,
.app-section > .message-channel-tabs,
.app-section > .alliance-poll-strip,
.app-section > .reports-layout,
.app-section > .fleet-detail-panel,
.app-section > .shipyard-capacity,
.app-section > .shipyard-lane-swiper,
.app-section > .shipyard-level-note,
.app-section > .shipyard-queue,
.app-section > .shipyard-grid,
.app-section > .combat-primer {
    width: min(100%, var(--content-width));
    margin-inline: auto;
}

.app-section > .admin-panel:not(.wide-admin-panel) {
    max-width: var(--content-width);
}

.admin-readiness-section {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 22px;
}

.auth-copy {
    color: var(--muted);
    line-height: 1.6;
}

.auth-form,
.settings-form {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.auth-form label,
.settings-form label {
    display: grid;
    gap: 8px;
    color: #d6e0ea;
    font-weight: 700;
}

.auth-form input[type="email"],
.auth-form input[type="password"],
.settings-form input[type="number"],
.settings-form input[type="text"],
.settings-form input:not([type]),
.settings-form select,
.settings-form textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
}

.settings-form select,
.settings-form select option {
    background: #101b29;
    color: var(--text);
}

.settings-form textarea {
    resize: vertical;
}

.auth-form input:focus {
    outline: 2px solid rgba(91, 215, 255, 0.48);
    outline-offset: 2px;
}

.toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #d6e0ea;
    font-weight: 700;
}

.toggle-row.compact {
    align-items: flex-start;
    font-weight: 600;
}

.toggle-row input {
    width: 20px;
    height: 20px;
    accent-color: var(--gold);
}

.field-help {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 400;
}

.admin-inline-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(91, 215, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.app-section > .admin-research-formula-panel {
    width: min(100%, var(--content-width));
    margin-inline: auto;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.settings-form-section {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
}

.settings-form-section > strong {
    color: var(--text);
}

.inline-form-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(110px, 150px);
    gap: 10px;
    align-items: end;
}

@media (max-width: 680px) {
    .inline-form-row {
        grid-template-columns: 1fr;
    }
}

.button-row.compact .button {
    min-height: 36px;
    padding: 8px 12px;
}

.admin-help-box {
    margin: 14px 0;
    padding: 12px 14px;
    border: 1px solid rgba(97, 211, 148, 0.22);
    border-radius: 8px;
    background: rgba(97, 211, 148, 0.06);
}

.admin-help-box summary {
    cursor: pointer;
    color: var(--text);
    font-weight: 800;
}

.admin-help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.admin-help-grid div {
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
}

.admin-help-grid strong {
    display: block;
    margin-bottom: 5px;
    color: var(--text);
}

.admin-help-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.formula-note {
    margin: 14px 0 18px;
    padding: 14px 16px;
    border: 1px solid rgba(91, 215, 255, 0.2);
    border-radius: 8px;
    background: rgba(91, 215, 255, 0.07);
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.formula-note strong {
    display: block;
    color: var(--text);
    margin-bottom: 8px;
}

.formula-note ul {
    margin: 0;
    padding-left: 18px;
}

.formula-note li + li {
    margin-top: 5px;
}

.formula-tier-list {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.formula-tier {
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.36);
    padding: 10px 12px;
}

.formula-tier summary {
    cursor: pointer;
    font-weight: 800;
    color: var(--text);
}

.formula-tier .form-grid {
    margin-top: 12px;
}

.field-title-with-help {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.inline-help-button {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(91, 215, 255, 0.38);
    border-radius: 999px;
    background: rgba(91, 215, 255, 0.12);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 900;
    cursor: pointer;
}

.inline-help-button:hover,
.inline-help-button:focus-visible {
    background: rgba(91, 215, 255, 0.22);
}

.form-divider {
    height: 1px;
    margin: 28px 0 4px;
    background: var(--line);
}

.compact-form {
    margin-top: 18px;
}

.compact-actions {
    margin: 18px 0 0;
}

.admin-table-wrap {
    overflow-x: auto;
    width: 100%;
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px;
    text-align: left;
}

.admin-table.compact input[type="number"] {
    width: 100%;
    min-width: 96px;
}

.alliance-event-admin-scroll {
    min-width: 0;
    max-width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
}

.alliance-event-admin-form {
    width: 100%;
    min-width: 0;
}

.alliance-event-admin-form > .wide-admin-panel {
    min-width: 0;
}

.alliance-event-admin-table {
    min-width: 1780px;
}

.alliance-event-admin-table th,
.alliance-event-admin-table td {
    vertical-align: top;
}

.alliance-event-admin-table input,
.alliance-event-admin-table select,
.alliance-event-admin-table textarea {
    min-width: 120px;
}

.alliance-event-admin-table td:nth-child(2) input,
.alliance-event-admin-table td:nth-child(5) input {
    min-width: 210px;
}

.alliance-event-admin-table td:nth-child(15) textarea {
    min-width: 360px;
}

.item-admin-panel {
    display: grid;
    gap: 18px;
    margin: 0 auto 24px;
}

.compact-admin-layout {
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    align-items: start;
}

.item-admin-panel .settings-form {
    align-self: start;
    align-content: start;
}

.item-admin-panel .settings-form label {
    align-content: start;
}

.item-admin-panel .settings-form input[type="number"],
.item-admin-panel .settings-form input[type="text"],
.item-admin-panel .settings-form input:not([type]),
.item-admin-panel .settings-form select {
    min-height: 40px;
    padding: 9px 11px;
}

.admin-grid.two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.compact-list {
    margin-top: 12px;
}

.compact-list .audit-row {
    padding-block: 8px;
}

.admin-factor-tool {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid rgba(91, 215, 255, 0.18);
    border-radius: 8px;
    background: rgba(91, 215, 255, 0.06);
}

.admin-factor-tool label {
    min-width: 180px;
}

.admin-factor-tool .field-help {
    flex-basis: 100%;
}

.admin-mission-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.admin-mission-card {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    padding: 16px;
    background: rgba(15, 23, 42, 0.42);
}

.admin-mission-card legend {
    padding: 0 6px;
    font-weight: 800;
    color: #f8fafc;
}

.wormhole-admin-form {
    width: min(100%, 1280px);
    margin-inline: auto;
}

.wormhole-admin-heading {
    width: min(100%, 1280px);
    margin-inline: auto;
}

.wormhole-admin-form .wide-admin-panel {
    width: 100%;
}

.wormhole-admin-form .admin-table-wrap {
    margin-top: 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    background: rgba(7, 16, 24, 0.34);
}

.wormhole-level-table {
    min-width: 1180px;
}

.wormhole-level-table th:first-child,
.wormhole-level-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: rgba(7, 16, 24, 0.98);
}

.wormhole-admin-form .button.primary {
    justify-self: start;
}

.ship-level-admin-table {
    min-width: 1720px;
}

.building-level-admin-table {
    min-width: 1640px;
}

.building-level-admin-table th:nth-child(3),
.building-level-admin-table td:nth-child(3) {
    min-width: 132px;
    white-space: nowrap;
}

.admin-table.compact input.building-time-input {
    width: 12ch;
    min-width: 12ch;
    font-variant-numeric: tabular-nums;
}

.pirate-level-table {
    min-width: 1560px;
}

.ship-level-admin-table th:first-child,
.ship-level-admin-table td:first-child,
.building-level-admin-table th:first-child,
.building-level-admin-table td:first-child,
.pirate-level-table th:first-child,
.pirate-level-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: rgba(7, 16, 24, 0.98);
}

.building-level-admin-table tr.configured th:first-child {
    color: var(--gold);
}

.building-level-admin-table tr.selected {
    outline: 1px solid rgba(91, 215, 255, 0.34);
    outline-offset: -1px;
}

.building-level-admin-table tr.selected input:disabled {
    opacity: 0.58;
}

.notice-list {
    display: grid;
    gap: 10px;
    max-width: 1180px;
    margin: 0 auto 18px;
}

.jump-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto 28px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(12, 24, 34, 0.72);
}

.jump-panel h2 {
    margin: 0 0 8px;
}

.jump-panel p {
    color: var(--muted);
}

.jump-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}

.alliance-layout,
.alliance-dashboard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    max-width: 1180px;
    margin: 24px auto 0;
}

.alliance-panel {
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(12, 24, 34, 0.72);
}

.alliance-panel.wide {
    grid-column: 1 / -1;
}

.alliance-settings-drawer {
    display: grid;
    gap: 12px;
    max-width: 1180px;
    margin: 14px auto 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(12, 24, 34, 0.72);
}

.alliance-settings-drawer > summary,
.alliance-collapsible-panel > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    cursor: pointer;
    list-style: none;
}

.alliance-settings-drawer > summary::-webkit-details-marker,
.alliance-collapsible-panel > summary::-webkit-details-marker {
    display: none;
}

.alliance-settings-drawer > summary {
    justify-content: flex-start;
}

.alliance-settings-drawer > summary > strong {
    color: var(--text);
}

.alliance-settings-drawer > summary > span:not(.alliance-badge):not(.alliance-settings-gear) {
    color: var(--muted);
    font-size: 0.86rem;
}

.alliance-settings-gear {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-left: auto;
    border: 1px solid rgba(91, 215, 255, 0.28);
    border-radius: 999px;
    color: var(--cyan);
    background: rgba(91, 215, 255, 0.08);
    font-size: 1rem;
    line-height: 1;
}

.alliance-settings-drawer-body {
    display: grid;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.alliance-collapsible-panel > summary {
    justify-content: space-between;
}

.alliance-collapsible-panel > summary span {
    display: grid;
    gap: 2px;
}

.alliance-collapsible-panel > summary strong {
    font-size: 1.05rem;
}

.alliance-collapsible-panel > summary small {
    color: var(--muted);
    font-size: 0.8rem;
}

.alliance-collapsible-panel > summary::after {
    content: "Einklappen";
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.alliance-collapsible-panel:not([open]) > summary::after {
    content: "Aufklappen";
}

.alliance-overview {
    margin-top: 16px;
}

.alliance-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.alliance-status-tile {
    display: grid;
    gap: 6px;
    min-height: 96px;
    padding: 12px;
    border: 1px solid rgba(140, 160, 190, 0.22);
    border-radius: 8px;
    background: rgba(5, 12, 20, 0.34);
}

.alliance-status-tile strong,
.alliance-status-tile span,
.alliance-status-tile small {
    min-width: 0;
}

.alliance-status-tile small {
    color: var(--muted);
}

.alliance-admin-details {
    border: 1px solid rgba(140, 160, 190, 0.22);
    border-radius: 8px;
    padding: 10px 12px;
    background: rgba(5, 12, 20, 0.22);
}

.alliance-admin-details summary {
    cursor: pointer;
    font-weight: 700;
}

.alliance-directory-panel {
    max-width: 1180px;
    margin: 24px auto 0;
}

.alliance-settings-panel {
    max-width: 860px;
    margin: 24px auto 0;
}

.permission-matrix {
    display: grid;
    gap: 1px;
    overflow-x: auto;
    border: 1px solid rgba(140, 160, 190, 0.24);
    border-radius: 8px;
    background: rgba(140, 160, 190, 0.16);
}

.permission-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) repeat(5, minmax(92px, 0.7fr));
    gap: 1px;
    min-width: 760px;
}

.permission-row > span,
.permission-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 54px;
    padding: 8px 10px;
    background: rgba(8, 14, 24, 0.88);
}

.permission-head > span {
    min-height: 38px;
    font-weight: 700;
    color: #dbeafe;
    background: rgba(20, 32, 52, 0.96);
}

.permission-row small {
    color: var(--muted);
}

.permission-toggle {
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.permission-toggle input {
    width: 18px;
    height: 18px;
}

.permission-toggle input:disabled + span {
    opacity: 0.75;
}

.alliance-profile-card {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
    gap: 18px;
    max-width: 1180px;
    margin: 24px auto 0;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        radial-gradient(circle at 8% 14%, rgba(91, 215, 255, 0.14), transparent 28%),
        rgba(12, 24, 34, 0.78);
}

.alliance-banner {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 150px;
    overflow: hidden;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--banner-accent) 55%, transparent);
    border-radius: 10px;
    background: linear-gradient(135deg, var(--banner-primary), var(--banner-secondary));
    isolation: isolate;
}

.alliance-banner::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -35%;
    opacity: 0;
    pointer-events: none;
}

.banner-background-nebula { background: radial-gradient(circle at 68% 32%, var(--banner-accent), var(--banner-secondary) 32%, var(--banner-primary) 72%); }
.banner-background-horizon { background: linear-gradient(180deg, var(--banner-primary) 15%, var(--banner-secondary) 75%, var(--banner-accent)); }
.banner-background-radial { background: radial-gradient(circle at 65% 35%, var(--banner-accent), var(--banner-secondary) 18%, var(--banner-primary) 65%); }
.banner-background-deep_space { background: linear-gradient(145deg, #050812, var(--banner-primary) 60%, var(--banner-secondary)); }
.banner-background-eclipse { background: radial-gradient(circle at 62% 38%, #03060b 0 16%, var(--banner-accent) 18%, var(--banner-secondary) 24%, var(--banner-primary) 68%); }
.banner-background-split { background: linear-gradient(135deg, var(--banner-primary) 0 48%, var(--banner-accent) 48% 52%, var(--banner-secondary) 52% 100%); }
.alliance-banner::before, .hive-zone::before { content: ""; position: absolute; inset: 0; opacity: .28; pointer-events: none; }
.banner-pattern-stars::before { background-image: radial-gradient(circle, var(--banner-accent) 1px, transparent 1.5px); background-size: 19px 19px; }
.banner-pattern-stripes::before { background: repeating-linear-gradient(115deg, transparent 0 13px, var(--banner-accent) 14px 16px); }
.banner-pattern-grid::before { background-image: linear-gradient(var(--banner-accent) 1px, transparent 1px), linear-gradient(90deg, var(--banner-accent) 1px, transparent 1px); background-size: 22px 22px; }
.banner-pattern-chevrons::before { background: repeating-linear-gradient(45deg, transparent 0 16px, var(--banner-accent) 17px 19px); }
.banner-pattern-diamonds::before { background-image: linear-gradient(45deg, transparent 46%, var(--banner-accent) 47% 51%, transparent 52%), linear-gradient(-45deg, transparent 46%, var(--banner-accent) 47% 51%, transparent 52%); background-size: 30px 30px; }
.banner-pattern-orbits::before { background-image: repeating-radial-gradient(ellipse at 64% 38%, transparent 0 13px, var(--banner-accent) 14px 16px, transparent 17px 29px); }
.alliance-banner-shape { position: absolute; top: 18px; right: 8%; width: 86px; height: 86px; background: linear-gradient(145deg, color-mix(in srgb, var(--banner-accent) 92%, white 8%), color-mix(in srgb, var(--banner-secondary) 74%, transparent)); clip-path: polygon(var(--banner-shape-polygon, 50% 0, 92% 17%, 82% 72%, 50% 100%, 18% 72%, 8% 17%)); filter: drop-shadow(0 0 14px color-mix(in srgb, var(--banner-secondary) 84%, transparent)); }
.alliance-banner-shape::before { content: ""; position: absolute; inset: 13%; background: color-mix(in srgb, var(--banner-primary) 76%, transparent); clip-path: inherit; }
.alliance-banner-shape::after { content: ""; position: absolute; left: 47%; top: 13%; width: 6%; height: 74%; background: color-mix(in srgb, var(--banner-accent) 55%, transparent); transform: rotate(18deg); }
.banner-shape-shield { clip-path: polygon(50% 0, 92% 17%, 82% 72%, 50% 100%, 18% 72%, 8% 17%); }
.banner-shape-crest { clip-path: polygon(50% 0, 92% 28%, 76% 100%, 50% 80%, 24% 100%, 8% 28%); }
.banner-shape-spearhead { clip-path: polygon(50% 0, 94% 100%, 50% 76%, 6% 100%); }
.banner-shape-diamond { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.banner-shape-hexagon { clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%); }
.banner-shape-star { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 35%, 39% 35%); }
.banner-shape-cross { clip-path: polygon(38% 0, 62% 0, 62% 36%, 100% 36%, 100% 64%, 62% 64%, 62% 100%, 38% 100%, 38% 64%, 0 64%, 0 36%, 38% 36%); }
.alliance-banner-shape[data-alliance-banner-shape], .alliance-banner-option-visual .alliance-banner-shape { clip-path: polygon(var(--banner-shape-polygon, 50% 0, 92% 17%, 82% 72%, 50% 100%, 18% 72%, 8% 17%)); }
.banner-motion-pulse::after { background: radial-gradient(circle, transparent 0 24%, color-mix(in srgb, var(--banner-accent) 55%, transparent) 26% 30%, transparent 32%); animation: alliance-banner-pulse 4.8s ease-in-out infinite; }
.banner-motion-sweep::after { background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--banner-accent) 42%, transparent) 48% 52%, transparent 62%); animation: alliance-banner-sweep 6.4s ease-in-out infinite; }
@keyframes alliance-banner-pulse { 0%, 70%, 100% { opacity: 0; transform: scale(.58); } 80% { opacity: .55; } 96% { opacity: 0; transform: scale(1.15); } }
@keyframes alliance-banner-sweep { 0%, 62% { opacity: 0; transform: translateX(-38%); } 68% { opacity: .62; } 84%, 100% { opacity: 0; transform: translateX(38%); } }
.alliance-banner-identity { position: relative; z-index: 1; font-size: 1.1rem; text-shadow: 0 2px 8px #000; }
.alliance-banner-compact { min-height: 82px; margin-bottom: 12px; }
.alliance-banner-compact .alliance-banner-shape { width: 54px; height: 54px; top: 12px; }
.alliance-banner-preview-status { display: block; margin: 7px 0 12px; color: var(--muted); }
.alliance-banner-preview-status.is-dirty { color: var(--warning); }
.alliance-banner-contrast { min-height: 1.2em; margin: 0 0 14px; color: var(--muted); font-size: .78rem; }
.alliance-banner-contrast.success { color: var(--green); }
.alliance-banner-contrast.warning { color: var(--warning); }
.alliance-hive-scale-previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.alliance-hive-scale-previews figure { display: grid; place-items: center; gap: 7px; min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(4, 12, 20, .42); }
.alliance-hive-scale-previews figcaption { color: var(--muted); font-size: .68rem; text-align: center; }
.alliance-hive-preview-shell { display: grid; place-items: center; min-height: 146px; width: 100%; }
.alliance-banner-hive-far, .alliance-banner-hive-mid, .alliance-banner-hive-high { align-items: end; aspect-ratio: 1; min-height: 0; width: 100%; margin: 0; padding: 8px; border-radius: 2px; }
.alliance-banner-hive-far { width: 42px; }
.alliance-banner-hive-mid { width: 88px; }
.alliance-banner-hive-high { width: 138px; }
.alliance-banner-hive-far::before { display: none; }
.alliance-banner-hive-far .alliance-banner-shape { inset: 25%; width: 50%; height: 50%; filter: none; }
.alliance-banner-hive-mid .alliance-banner-shape { top: 13px; right: 24%; width: 46px; height: 46px; }
.alliance-banner-hive-high .alliance-banner-shape { top: 16px; right: 24%; width: 70px; height: 70px; }
.alliance-banner-hive-mid .alliance-banner-identity { width: 100%; font-size: .72rem; text-align: center; }
.alliance-banner-hive-high .alliance-banner-identity { position: absolute; right: 7px; bottom: 8px; left: 7px; overflow: hidden; width: auto; font-size: .68rem; line-height: 1; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.alliance-banner-hive-info { position: absolute; z-index: 1; top: 6px; right: auto; bottom: auto; left: 6px; overflow: hidden; max-width: 58%; padding: 2px 4px; border-radius: 3px; background: rgba(3,9,15,.68); color: rgba(255,255,255,.8); font-size: .52rem; line-height: 1; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.alliance-banner-option-groups { display: grid; gap: 15px; }
.alliance-banner-option-group { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; }
.alliance-banner-option-group legend { padding: 0 7px; font-weight: 800; }
.alliance-banner-option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 9px; }
.alliance-banner-option-card { position: relative; display: grid; gap: 6px; min-width: 0; padding: 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.025); cursor: pointer; }
.alliance-banner-option-card:has(input:checked) { border-color: var(--accent); background: rgba(91, 215, 255, .1); box-shadow: inset 0 0 0 1px rgba(91, 215, 255, .2); }
.alliance-banner-option-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.alliance-banner-option-card > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.alliance-banner-option-card > strong { overflow: hidden; font-size: .72rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.alliance-banner-option-visual.alliance-banner { display: block; width: 100%; min-height: 62px; padding: 0; border-radius: 5px; }
.alliance-banner-option-visual .alliance-banner-shape { top: 10px; right: calc(50% - 22px); width: 44px; height: 44px; }
.alliance-banner-option-visual.palette { display: grid; grid-template-columns: repeat(3, 1fr); height: 62px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--banner-accent) 55%, transparent); border-radius: 5px; }
.alliance-banner-option-visual.palette i:nth-child(1) { background: var(--banner-primary); }
.alliance-banner-option-visual.palette i:nth-child(2) { background: var(--banner-secondary); }
.alliance-banner-option-visual.palette i:nth-child(3) { background: var(--banner-accent); }
.alliance-hq-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr); gap: 16px; max-width: 1180px; margin: 22px auto; }
.alliance-hq-summary { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: rgba(12, 24, 34, .82); }

.alliance-situation-board, #alliance-polls { max-width: 1180px; margin: 18px auto; }
.alliance-situation-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.alliance-situation-heading h2 { margin: 5px 0 0; }
.alliance-situation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.alliance-action-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 9px; background: rgba(12, 24, 34, .86); }
.alliance-action-card > header { display: flex; justify-content: space-between; gap: 10px; }
.alliance-action-card > header > span { min-width: 28px; padding: 3px 8px; border-radius: 999px; background: rgba(91, 215, 255, .12); text-align: center; }
.alliance-action-card.danger { border-color: rgba(255, 91, 111, .7); }
.alliance-action-card.attention { border-color: rgba(242, 201, 76, .62); }
.alliance-action-card.reward { border-color: rgba(97, 211, 148, .68); }
.alliance-action-row { display: grid; gap: 3px; padding: 9px; border-radius: 7px; background: rgba(255, 255, 255, .045); }
.alliance-action-row small { color: var(--muted); }
.alliance-action-card > .button, .alliance-action-card > form:last-child { margin-top: auto; }

.alliance-research-workspace { display: grid; gap: 16px; }
.alliance-research-queue { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(4, 12, 20, .35); }
.alliance-storage-balances { gap: 7px; margin: 0; }
.alliance-storage-balances .resource-pill { padding: 6px 9px; }
.alliance-donation-cap { display: grid; gap: 9px; padding: 10px 12px; border: 1px solid rgba(97, 211, 148, .28); border-radius: 8px; background: rgba(97, 211, 148, .07); }
.alliance-donation-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.alliance-donation-heading small, .alliance-donation-actions small { color: var(--muted); }
.alliance-donation-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.alliance-donation-actions form { display: grid; gap: 3px; min-width: 0; }
.alliance-donation-button { width: 100%; min-height: 36px; padding: 7px 10px; }
.alliance-research-job { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border-radius: 7px; background: rgba(255, 255, 255, .04); }
.alliance-research-job > div { display: grid; gap: 3px; }
.alliance-research-job.running { border-left: 3px solid var(--accent); }
.alliance-workspace-divider { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.alliance-workspace-divider h3 { margin: 6px 0 0; }
.alliance-research-funding { display: grid; gap: 7px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: rgba(4, 12, 20, .32); }
.alliance-research-progress { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.alliance-research-progress > span { display: block; height: 100%; max-width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), rgba(97, 211, 148, .92)); }
.alliance-research-effect-comparison span { display: grid; gap: 2px; }
.alliance-research-effect-comparison small { color: var(--muted); font-size: .7rem; text-transform: uppercase; }
.research-requirement-missing { color: #f2c94c; }
.alliance-management-layout { align-items: start; }
.alliance-invitations-panel { max-width: 1180px; margin: 20px auto; border-color: rgba(97, 211, 148, .62); }

@media (max-width: 760px) {
    .alliance-hq-hero { grid-template-columns: 1fr; }
    .alliance-situation-grid { grid-template-columns: 1fr; }
    .alliance-situation-heading { align-items: flex-start; flex-direction: column; }
    .alliance-workspace-divider { align-items: flex-start; flex-direction: column; }
    .alliance-donation-actions { grid-template-columns: 1fr; }
    .alliance-banner { min-height: 118px; }
    .alliance-banner-shape { width: 66px; height: 66px; }
    .alliance-hive-scale-previews { grid-template-columns: 1fr; }
    .alliance-hive-preview-shell { min-height: 112px; }
    .alliance-banner-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .banner-motion-pulse::after, .banner-motion-sweep::after { animation: none; opacity: 0; }
}

.alliance-profile-card h2 {
    margin: 8px 0;
}

.alliance-profile-card p {
    color: var(--muted);
}

.alliance-profile-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.alliance-profile-stats span {
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
    font-size: 0.82rem;
}

.alliance-profile-stats strong {
    color: var(--text);
    font-size: 1rem;
}

.alliance-badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 4px 8px;
    border: 1px solid rgba(91, 215, 255, 0.35);
    border-radius: 999px;
    background: rgba(91, 215, 255, 0.11);
    color: var(--cyan);
    font-size: 0.72rem;
    font-weight: 800;
}

.alliance-directory-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.4fr) minmax(150px, 0.35fr) auto auto;
    gap: 10px;
    align-items: end;
}

.alliance-directory-filters label {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.alliance-directory-filters input,
.alliance-directory-filters select {
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #10202c;
    color: var(--text);
    font: inherit;
}

.alliance-panel h2,
.alliance-panel h3 {
    margin: 0;
}

.alliance-chat-panel {
    position: sticky;
    bottom: 14px;
    z-index: 35;
}

.alliance-members,
.chat-log,
.raid-list {
    display: grid;
    gap: 10px;
}

.alliance-directory-list {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.alliance-directory-card {
    display: grid;
    gap: 8px;
}

.alliance-directory-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.alliance-directory-title {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: start;
}

.alliance-join-summary {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.alliance-join-summary span:last-child {
    color: var(--muted);
    font-size: 0.9rem;
}

.alliance-application-list {
    display: grid;
    gap: 10px;
}

.alliance-application-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.alliance-application-card span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.86rem;
}

.alliance-members > div,
.chat-log > div,
.raid-row {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.05);
}

.alliance-members span,
.chat-log span,
.raid-row span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.9rem;
}

.global-chat-widget {
    position: fixed;
    right: var(--app-side-gap);
    bottom: 14px;
    z-index: 210;
    width: var(--app-hud-width);
    color: var(--text);
}

.global-chat-widget:not(.is-collapsed) {
    z-index: 300;
}

.global-inventory-widget {
    position: fixed;
    right: var(--app-side-gap);
    bottom: 66px;
    z-index: 320;
    width: var(--app-hud-width);
    color: var(--text);
}

.global-inventory-widget.is-collapsed {
    z-index: 205;
}

.global-inventory-dialog {
    width: min(780px, calc(100vw - 48px));
    max-height: min(84vh, 820px);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 209, 102, 0.42);
    border-radius: 14px;
    background: rgba(7, 16, 24, 0.99);
    color: var(--text);
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.68), 0 0 38px rgba(255, 209, 102, 0.1);
}

.global-inventory-dialog::backdrop {
    background: rgba(2, 6, 14, 0.76);
    backdrop-filter: blur(3px);
}

.global-inventory-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid rgba(255, 209, 102, 0.28);
    border-radius: 8px 8px 0 0;
    background: rgba(7, 16, 24, 0.96);
    color: var(--text);
    font-weight: 900;
    cursor: pointer;
}

.global-inventory-toggle b {
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 209, 102, 0.18);
    color: #ffe6a3;
    font-size: 0.76rem;
    text-align: center;
}

.global-inventory-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, auto) auto;
    gap: 10px;
    padding: 9px;
    border: 1px solid rgba(255, 209, 102, 0.24);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: rgba(7, 16, 24, 0.97);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
}

.global-inventory-dialog .global-inventory-panel {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    padding: 18px 20px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.global-inventory-widget.is-collapsed .global-inventory-panel {
    display: none;
}

.global-inventory-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.global-inventory-head strong {
    font-size: 0.95rem;
}

.global-inventory-head h2,
.global-inventory-head p {
    margin: 0;
}

.global-inventory-head h2 {
    font-size: 1.45rem;
}

.global-inventory-head-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.global-inventory-head-actions .dialog-close {
    position: static;
    flex: 0 0 auto;
}

.global-inventory-head span,
.inventory-pager span {
    color: var(--muted);
    font-size: 0.78rem;
}

.inventory-filter-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(max-content, 1fr));
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.inventory-filter-tabs::-webkit-scrollbar {
    display: none;
}

.inventory-filter-tabs button {
    min-height: 30px;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
}

.inventory-filter-tabs button:hover,
.inventory-filter-tabs button:focus-visible {
    border-color: rgba(255, 209, 102, 0.42);
    color: var(--text);
}

.inventory-filter-tabs button.is-active {
    border-color: rgba(255, 209, 102, 0.62);
    color: #ffe6a3;
    background: rgba(255, 209, 102, 0.13);
}

.inventory-filter-empty {
    min-height: min(42vh, 360px);
    align-content: center;
    justify-items: center;
    text-align: center;
}

.inventory-pager button:disabled {
    opacity: 0.35;
    cursor: default;
}

.inventory-page {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.global-inventory-dialog .inventory-page {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    max-height: min(62vh, 610px);
    padding: 2px 4px 2px 2px;
    overflow-y: auto;
}

.global-inventory-dialog .inventory-slot-name {
    max-width: calc(100% - 16px);
    padding: 3px 7px;
    font-size: 0.76rem;
}

.global-inventory-dialog .inventory-slot b {
    padding: 2px 7px;
    font-size: 0.78rem;
}

.inventory-page[hidden] {
    display: none;
}

.inventory-slot {
    position: relative;
    aspect-ratio: 1 / 1;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
}

.inventory-slot.has-item {
    display: block;
    padding: 5px;
    border-color: rgba(148, 163, 184, 0.52);
    color: var(--text);
    cursor: pointer;
    overflow: hidden;
}

.inventory-slot.empty {
    display: block;
    opacity: 0.55;
}

.inventory-slot-icon {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.17), rgba(91, 215, 255, 0.08) 46%, rgba(0, 0, 0, 0.06));
    color: #ffe6a3;
    font-size: 1.05rem;
    font-weight: 900;
    overflow: hidden;
}

.inventory-slot-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-icon-art {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.item-icon-art > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-icon-level-badge {
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 3;
    display: grid;
    min-width: 25px;
    height: 19px;
    padding: 0 5px;
    place-items: center;
    border: 1px solid rgba(91, 215, 255, 0.88);
    border-radius: 5px;
    background: linear-gradient(145deg, rgba(5, 20, 37, 0.94), rgba(10, 48, 76, 0.94));
    box-shadow: 0 0 8px rgba(44, 196, 255, 0.38), inset 0 0 5px rgba(91, 215, 255, 0.18);
    color: #f2fbff;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.item-icon-duration-badge {
    position: absolute;
    bottom: 5px;
    left: 5px;
    z-index: 3;
    display: grid;
    min-width: 25px;
    height: 19px;
    padding: 0 5px;
    place-items: center;
    border: 1px solid rgba(255, 190, 77, 0.86);
    border-radius: 5px;
    background: linear-gradient(145deg, rgba(38, 21, 5, 0.95), rgba(91, 50, 8, 0.94));
    box-shadow: 0 0 8px rgba(255, 164, 44, 0.34), inset 0 0 5px rgba(255, 218, 132, 0.16);
    color: #fff4d8;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.inventory-slot:has(.item-icon-duration-badge) > b {
    right: 5px;
    left: auto;
    transform: none;
}

.inventory-slot:has(.item-icon-level-badge) > b {
    right: auto;
    left: 5px;
    transform: none;
}

.inventory-slot-name {
    position: absolute;
    top: 5px;
    left: 50%;
    z-index: 2;
    max-width: calc(100% - 12px);
    min-width: 0;
    padding: 2px 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.18));
    overflow: hidden;
    color: var(--text);
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    text-overflow: ellipsis;
    transform: translateX(-50%);
    white-space: nowrap;
}

.inventory-slot b {
    position: absolute;
    left: 50%;
    bottom: 5px;
    z-index: 2;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.58);
    color: var(--text);
    font-size: 0.66rem;
    transform: translateX(-50%);
}

.inventory-slot.rarity-uncommon {
    border-color: rgba(34, 197, 94, 0.72);
}

.inventory-slot.rarity-rare {
    border-color: rgba(59, 130, 246, 0.78);
}

.inventory-slot.rarity-epic {
    border-color: rgba(168, 85, 247, 0.82);
}

.inventory-slot.rarity-legendary {
    border-color: rgba(245, 158, 11, 0.86);
}

.inventory-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.inventory-item-dialog {
    width: min(92vw, 430px);
    border: 1px solid rgba(91, 215, 255, 0.28);
    border-radius: 8px;
    background: var(--panel-strong);
    color: var(--text);
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.48);
}

.inventory-item-dialog::backdrop {
    background: rgba(2, 6, 23, 0.58);
}

.inventory-dialog-head {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.inventory-dialog-head .inventory-slot-icon {
    aspect-ratio: 1 / 1;
}

.inventory-item-dialog h2 {
    margin: 0;
    font-size: 1.45rem;
}

.inventory-item-dialog p[data-inventory-dialog-description] {
    color: var(--muted);
    line-height: 1.5;
}

.inventory-item-dialog [hidden] {
    display: none !important;
}

.inventory-dialog-note {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(125, 211, 252, 0.22);
    border-radius: 8px;
    background: rgba(14, 165, 233, 0.08);
    color: var(--muted);
    font-size: 0.88rem;
}

.inventory-dialog-note[hidden] {
    display: none !important;
}

.item-reward-dialog {
    width: min(92vw, 440px);
    border: 1px solid rgba(245, 158, 11, 0.42);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.18), transparent 36%),
        var(--panel-strong);
    color: var(--text);
    box-shadow: 0 30px 110px rgba(0, 0, 0, 0.58);
    animation: reward-dialog-pop 420ms cubic-bezier(0.2, 0.9, 0.2, 1.08);
}

.item-reward-dialog::backdrop {
    background: rgba(2, 6, 23, 0.7);
}

.item-reward-dialog.is-large {
    width: min(94vw, 500px);
}

.item-reward-head {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 4px 28px 12px;
    text-align: center;
}

.item-reward-head h2 {
    margin: 0;
    font-size: clamp(1.15rem, 2.4vw, 1.55rem);
}

.item-reward-head > span:not(.item-reward-burst) {
    color: var(--muted);
}

.item-reward-burst {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(255, 230, 163, 0.95), rgba(245, 158, 11, 0.42) 38%, transparent 70%);
    box-shadow: 0 0 42px rgba(245, 158, 11, 0.58);
    animation: reward-burst-pulse 1.25s ease-in-out infinite;
}

.item-reward-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 76px);
    justify-content: center;
    gap: 8px;
    margin: 6px 0 16px;
}

.item-reward-dialog.is-large .item-reward-grid {
    grid-template-columns: repeat(5, 76px);
}

.item-reward-grid .inventory-slot {
    width: 76px;
    min-height: 76px;
    animation: reward-item-rise 520ms ease both;
}

.item-reward-grid .inventory-slot.reward-highlight {
    border-width: 2px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 0 26px rgba(168, 85, 247, 0.58),
        inset 0 0 18px rgba(168, 85, 247, 0.18);
    animation: reward-item-rise 520ms ease both, reward-epic-glow 1.4s ease-in-out infinite;
}

.reward-flyout {
    position: fixed;
    z-index: 14000;
    width: 54px;
    height: 54px;
    pointer-events: none;
    animation: reward-fly-to-inventory 620ms cubic-bezier(0.22, 0.9, 0.3, 1) forwards;
}

.item-reward-grid .inventory-slot:nth-child(2) {
    animation-delay: 70ms;
}

.item-reward-grid .inventory-slot:nth-child(3) {
    animation-delay: 140ms;
}

.item-reward-grid .inventory-slot:nth-child(4) {
    animation-delay: 210ms;
}

.item-reward-grid .inventory-slot:nth-child(5) {
    animation-delay: 280ms;
}

.inventory-pager button {
    width: 36px;
    height: 30px;
    border: 1px solid rgba(255, 209, 102, 0.28);
    border-radius: 7px;
    background: rgba(255, 209, 102, 0.1);
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 900;
    cursor: pointer;
}

@keyframes reward-dialog-pop {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes reward-burst-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.88;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

@keyframes reward-item-rise {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes reward-epic-glow {
    0%, 100% {
        filter: saturate(1);
        transform: translateY(0) scale(1);
    }
    50% {
        filter: saturate(1.25);
        transform: translateY(-1px) scale(1.035);
    }
}

@keyframes reward-fly-to-inventory {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--reward-fly-x, 0), var(--reward-fly-y, 0)) scale(0.35);
    }
}

.global-chat-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid rgba(91, 215, 255, 0.28);
    border-radius: 8px 8px 0 0;
    background: rgba(7, 16, 24, 0.96);
    color: var(--text);
    font-weight: 900;
    cursor: pointer;
}

.global-chat-toggle b {
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 0.76rem;
}

.global-chat-panel {
    display: grid;
    grid-template-rows: auto minmax(160px, 260px) auto auto;
    border: 1px solid rgba(91, 215, 255, 0.24);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: rgba(7, 16, 24, 0.97);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
    overflow: hidden;
}

.global-chat-widget.is-collapsed .global-chat-panel {
    display: none;
}

.private-chat-threads {
    grid-row: 1;
    display: grid;
    gap: 6px;
    max-height: 132px;
    padding: 8px;
    border-bottom: 1px solid var(--line);
    overflow: auto;
}

.private-chat-threads[hidden] {
    display: none;
}

.private-thread-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 8px;
    width: 100%;
    padding: 7px 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.private-thread-item.active,
.private-thread-item:hover,
.private-thread-item:focus-visible {
    border-color: rgba(91, 215, 255, 0.44);
    background: rgba(91, 215, 255, 0.13);
}

.private-thread-item strong,
.private-thread-item small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.private-thread-item span,
.private-thread-empty {
    color: var(--muted);
    font-size: 0.78rem;
}

.private-thread-item small {
    grid-column: 1 / -1;
    color: var(--muted);
}

.private-thread-empty {
    padding: 8px;
}

.shortcut-help-dialog {
    width: min(420px, calc(100vw - 32px));
    border: 1px solid rgba(91, 215, 255, 0.28);
    border-radius: 8px;
    background: rgba(7, 16, 24, 0.98);
    color: var(--text);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

.shortcut-help-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.shortcut-help-dialog h2 {
    margin: 0 0 14px;
    font-size: 1.05rem;
}

.shortcut-help-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 12px;
    align-items: center;
}

.shortcut-help-grid kbd {
    min-width: 34px;
    padding: 5px 8px;
    border: 1px solid rgba(91, 215, 255, 0.34);
    border-radius: 6px;
    background: rgba(91, 215, 255, 0.11);
    color: var(--text);
    font: inherit;
    font-weight: 900;
    text-align: center;
}

.shortcut-help-grid span {
    color: var(--muted);
}

.global-chat-tabs {
    grid-row: 3;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border-top: 1px solid var(--line);
    overflow-x: auto;
}

.global-chat-tabs button {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    padding: 7px 9px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
}

.global-chat-tabs button.active {
    border-color: rgba(91, 215, 255, 0.45);
    color: var(--text);
    background: rgba(91, 215, 255, 0.14);
}

.global-chat-log {
    grid-row: 2;
    display: grid;
    align-content: start;
    gap: 4px;
    padding: 9px;
    overflow: auto;
}

.global-chat-message {
    padding: 5px 7px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.045);
}

.global-chat-message-line {
    margin: 0;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.global-chat-message-line > strong {
    margin-right: 4px;
}

.chat-sender-name.is-own {
    color: var(--map-color-player-own);
}

.chat-sender-name.is-alliance {
    color: var(--map-color-player-alliance);
}

.chat-sender-name.is-other {
    color: var(--map-color-player-foreign);
}

.global-chat-message.is-system-message .global-chat-message-line > strong,
.chat-sender-name.is-system {
    color: var(--map-color-special-gold);
}

.global-chat-message-content {
    display: inline;
    color: var(--text);
    overflow-wrap: anywhere;
}

.global-chat-message-content a {
    color: var(--map-color-special-violet);
    text-decoration: underline;
    text-decoration-color: rgba(192, 132, 252, 0.58);
    text-underline-offset: 2px;
}

.global-chat-message-content a:hover,
.global-chat-message-content a:focus-visible {
    color: color-mix(in srgb, var(--map-color-special-violet) 72%, white);
    text-decoration-color: currentColor;
}

.global-chat-message p {
    margin: 2px 0 0;
    color: var(--text);
    overflow-wrap: anywhere;
}

.chat-time-divider {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 5px 1px 2px;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1;
    white-space: nowrap;
}

.chat-time-divider::before,
.chat-time-divider::after {
    content: '';
    min-width: 8px;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
}

.chat-time-divider::before {
    flex: 0 1 18px;
}

.chat-time-divider::after {
    flex: 1 1 auto;
}

.inline-chat-action {
    display: inline-flex;
    margin-left: 6px;
}

.inline-chat-action button {
    border: 1px solid rgba(124, 217, 255, 0.45);
    border-radius: 999px;
    background: rgba(24, 40, 63, 0.85);
    color: #dcefff;
    font-size: 0.72rem;
    line-height: 1;
    padding: 5px 8px;
    cursor: pointer;
}

.global-chat-form {
    grid-row: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-top: 1px solid var(--line);
}

.mention-field {
    position: relative;
    display: block;
    min-width: 0;
}

.mention-field input,
.mention-field textarea {
    width: 100%;
}

.mention-menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 260;
    display: grid;
    gap: 4px;
    max-height: 240px;
    overflow: auto;
    padding: 6px;
    border: 1px solid rgba(91, 215, 255, 0.28);
    border-radius: 8px;
    background: rgba(6, 14, 21, 0.98);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
}

.mention-menu[hidden] {
    display: none;
}

.mention-menu button {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 8px 9px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.mention-menu button:hover,
.mention-menu button:focus-visible {
    border-color: rgba(91, 215, 255, 0.44);
    background: rgba(91, 215, 255, 0.14);
}

.mention-menu span {
    color: var(--muted);
    font-size: 0.78rem;
}

.global-chat-form input {
    height: 38px;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text);
    padding: 9px 10px;
}

.global-chat-form > button[type="submit"] {
    align-self: center;
    height: 38px;
    min-width: 76px;
    padding: 9px 12px;
    border: 1px solid rgba(91, 215, 255, 0.35);
    border-radius: 7px;
    background: rgba(91, 215, 255, 0.15);
    color: var(--text);
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

.dev-debug-widget {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 280;
    width: min(520px, calc(100vw - 36px));
    color: var(--text);
    pointer-events: none;
}

.dev-debug-toggle,
.dev-debug-copy-compact,
.dev-debug-panel {
    pointer-events: auto;
}

.dev-debug-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    pointer-events: auto;
}

.dev-debug-toggle {
    border: 1px solid rgba(255, 207, 107, 0.7);
    border-radius: 8px;
    background: rgba(26, 19, 8, 0.96);
    color: var(--yellow);
    font-weight: 900;
    padding: 8px 11px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34), 0 0 22px rgba(255, 207, 107, 0.18);
}

.dev-debug-copy-compact {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(5, 11, 18, 0.94);
    color: var(--text);
    font-weight: 800;
    padding: 8px 10px;
}

.dev-debug-toggle b {
    margin-left: 6px;
    color: var(--text);
}

.dev-debug-panel {
    margin-top: 8px;
    border: 1px solid rgba(255, 207, 107, 0.45);
    border-radius: 8px;
    background: rgba(5, 11, 18, 0.97);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.42);
    overflow: hidden;
}

.dev-debug-widget.is-collapsed .dev-debug-panel {
    display: none;
}

.dev-debug-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dev-debug-head strong {
    color: var(--yellow);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dev-debug-head button {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text);
    font-weight: 700;
    padding: 5px 8px;
}

.dev-debug-panel pre {
    max-height: 42vh;
    margin: 0;
    padding: 12px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    color: rgba(232, 246, 255, 0.9);
    font-size: 0.76rem;
    line-height: 1.38;
}

.raid-dashboard {
    align-items: stretch;
}

.raid-dialog {
    width: min(960px, calc(100vw - 32px));
    max-height: min(82vh, 860px);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(242, 201, 76, 0.45);
    border-radius: 12px;
    background: rgba(7, 15, 24, 0.98);
    color: var(--text);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.7), 0 0 36px rgba(242, 201, 76, 0.12);
}

.raid-dialog::backdrop {
    background: rgba(2, 7, 12, 0.76);
    backdrop-filter: blur(3px);
}

.raid-dialog-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(7, 15, 24, 0.98);
}

.raid-dialog-head h2,
.raid-dialog-head p {
    margin: 0;
}

.raid-dialog-head > div > p:last-child {
    max-width: 68ch;
    margin-top: 5px;
    color: var(--muted);
}

.raid-dialog .raid-notice {
    margin: 14px 22px 0;
}

.raid-dialog-list {
    max-height: calc(min(82vh, 860px) - 124px);
    padding: 18px 22px 24px;
    overflow-y: auto;
}

.raid-card.is-highlighted {
    animation: raid-card-highlight 0.8s ease-in-out 2 alternate;
}

@keyframes raid-card-highlight {
    to {
        border-color: rgba(242, 201, 76, 0.95);
        box-shadow: 0 0 28px rgba(242, 201, 76, 0.22);
    }
}

@media (max-width: 900px) {
    .raid-dialog {
        width: 100vw;
        max-width: none;
        max-height: calc(100dvh - 56px);
        margin: auto 0 0;
        border-width: 1px 0 0;
        border-radius: 16px 16px 0 0;
    }

    .raid-dialog-head {
        padding: 16px 16px 13px;
    }

    .raid-dialog-head > div > p:last-child {
        font-size: 0.84rem;
    }

    .raid-dialog-list {
        max-height: calc(100dvh - 190px);
        grid-template-columns: 1fr;
        padding: 14px 14px calc(24px + env(safe-area-inset-bottom, 0px));
    }

    .raid-dialog .raid-notice {
        margin-inline: 14px;
    }

    .global-inventory-dialog {
        width: 100vw;
        max-width: none;
        max-height: calc(100dvh - 58px);
        margin: auto 0 0;
        border-width: 1px 0 0;
        border-radius: 16px 16px 0 0;
    }

    .global-inventory-dialog .global-inventory-panel {
        max-height: calc(100dvh - 58px);
        padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px));
    }

    .global-inventory-dialog .inventory-page {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 7px;
        max-height: min(58vh, 520px);
    }

    body.mobile-inventory-open .global-inventory-widget {
        display: none;
    }
}

.raid-card {
    gap: 14px;
}

.raid-card.empty {
    opacity: 0.78;
}

.raid-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.raid-card-head h3,
.raid-card-head p {
    margin: 0;
}

.raid-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--muted);
    font-size: 0.9rem;
}

.raid-status-badge {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1;
}

.raid-status-badge.forming {
    border-color: rgba(59, 130, 246, 0.5);
    color: #93c5fd;
}

.raid-status-badge.launched {
    border-color: rgba(34, 197, 94, 0.5);
    color: #86efac;
}

.raid-status-badge.expired,
.raid-status-badge.cancelled {
    border-color: rgba(248, 113, 113, 0.45);
    color: #fca5a5;
}

.raid-action-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.raid-action-form select {
    min-width: 180px;
}

.raid-management-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.raid-management-actions .raid-action-form {
    flex: 0 0 auto;
}

.raid-management-actions .button {
    min-height: 0;
    padding: 6px 10px;
    font-size: 0.78rem;
    line-height: 1.15;
}

.alliance-member-list {
    display: grid;
    gap: 4px;
}

.alliance-rank-divider {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.alliance-member-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(112px, auto) auto;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 5px 0;
}

.alliance-member-row.is-removing {
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.alliance-member-row.inactive strong,
.alliance-member-row.inactive .member-last-online {
    opacity: 0.62;
}

.alliance-member-row strong {
    min-width: 0;
    font-size: 0.9rem;
}

.alliance-member-row strong a {
    color: var(--text);
}

.member-last-online {
    color: var(--muted);
    font-size: 0.82rem;
    white-space: nowrap;
}

.member-last-online.online {
    color: var(--green);
    font-weight: 800;
}

.member-actions {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
}

.icon-form {
    margin: 0;
}

.icon-form button {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font-weight: 900;
    cursor: pointer;
}

.icon-form.danger button {
    color: var(--red);
}

.icon-form button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.chat-log {
    max-height: 360px;
    overflow: auto;
}

.chat-log p {
    margin: 8px 0 0;
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.tech-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.effect-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.effect-list span {
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.05);
}

.admin-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 18px;
    max-width: 1180px;
    margin: 28px auto 0;
}

.admin-list,
.admin-editor {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(12, 24, 34, 0.72);
}

.admin-list {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
}

.admin-research-list {
    position: sticky;
    top: 112px;
    max-height: calc(100vh - 132px);
    overflow: auto;
}

.admin-research-tree-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.admin-research-tree-tabs button {
    min-height: 36px;
    border: 1px solid rgba(147, 197, 253, 0.2);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--muted);
    font-weight: 800;
    cursor: pointer;
}

.admin-research-tree-tabs button.active,
.admin-research-tree-tabs button:hover {
    border-color: rgba(91, 215, 255, 0.48);
    background: rgba(91, 215, 255, 0.12);
    color: var(--text);
}

.admin-research-tree-list {
    display: none;
    gap: 8px;
}

.admin-research-tree-list.active {
    display: grid;
}

.admin-mini-card {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(147, 197, 253, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
}

.admin-mini-card strong {
    color: var(--text);
}

.admin-mini-card span,
.admin-mini-card small {
    color: var(--muted);
}

.compact-form {
    gap: 10px;
    margin-top: 10px;
}

.admin-list a,
.admin-list > div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 7px;
    color: var(--muted);
}

.admin-research-tree-list {
    display: none;
    gap: 8px;
}

.admin-research-tree-list.active {
    display: grid;
}

.admin-list a.active,
.admin-list a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
}

.admin-list-divider {
    margin: 10px 2px 2px;
    padding: 8px 10px;
    border-top: 1px solid rgba(147, 197, 253, 0.22);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-list span {
    font-size: 0.84rem;
}

.admin-editor {
    padding: 22px;
}

.pirate-admin-editor {
    width: min(100%, 1280px);
    margin: 28px auto 0;
}

.pirate-admin-status {
    display: grid;
    grid-template-columns: minmax(180px, .8fr) minmax(0, 2fr) auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px;
    border: 1px solid rgba(91, 215, 255, .2);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
}

.pirate-admin-status h2,
.pirate-admin-status .eyebrow {
    margin: 0;
}

.pirate-admin-status-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(90px, 1fr));
    gap: 8px;
}

.pirate-admin-status-grid span {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 10px;
    border-radius: 7px;
    color: var(--muted);
    background: rgba(255, 255, 255, .05);
    font-size: .78rem;
}

.pirate-admin-status-grid strong {
    color: var(--text);
    font-size: 1.15rem;
}

.factor-slider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.factor-slider {
    display: grid;
    gap: 9px;
    margin: 14px 0;
    padding: 12px;
    border: 1px solid rgba(91, 215, 255, .2);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
}

.factor-slider > span:first-child {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-weight: 800;
}

.factor-slider output {
    min-width: 3.5rem;
    padding: 3px 7px;
    border-radius: 7px;
    color: var(--accent);
    background: rgba(91, 215, 255, .1);
    text-align: center;
}

.factor-slider input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
}

@media (max-width: 900px) {
    .pirate-admin-status {
        grid-template-columns: 1fr;
    }

    .pirate-admin-status-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .pirate-admin-status .button {
        justify-self: start;
    }
}

.admin-dependency-panel {
    max-width: 1180px;
    margin: 22px auto 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(12, 24, 34, 0.72);
}

.admin-dependency-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 16px;
    align-items: end;
    margin-bottom: 14px;
}

.admin-dependency-head h2 {
    margin: 0 0 4px;
}

.admin-search-field {
    display: grid;
    gap: 6px;
}

.admin-search-field.compact {
    max-width: 420px;
}

.dependency-matrix {
    display: grid;
    gap: 8px;
    max-height: min(460px, 52vh);
    overflow: auto;
    padding-right: 4px;
}

.dependency-row {
    display: grid;
    grid-template-columns: 94px minmax(180px, 1fr) 28px minmax(180px, 1fr) minmax(96px, auto);
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid rgba(147, 197, 253, 0.18);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
}

.dependency-row.selected {
    border-color: rgba(91, 215, 255, 0.58);
    background: rgba(91, 215, 255, 0.09);
}

.dependency-row.broken {
    border-color: rgba(255, 94, 94, 0.58);
    background: rgba(255, 94, 94, 0.08);
}

.dependency-tree,
.dependency-level,
.dependency-arrow {
    color: var(--muted);
    font-size: 0.84rem;
}

.dependency-arrow {
    text-align: center;
}

.dependency-node {
    display: grid;
    gap: 2px;
    min-width: 0;
    color: var(--text);
}

.dependency-node:hover {
    color: var(--accent);
}

.dependency-node strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dependency-node small {
    color: var(--muted);
}

.admin-building-form + .admin-building-form {
    margin-top: 18px;
}

.admin-building-form h2 {
    margin: 16px 0 0;
    font-size: 1.35rem;
}

.form-grid {
    display: grid;
    gap: 12px;
}

.form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.form-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.form-grid.five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.form-grid.six {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.form-grid.resources {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-map-color-grid input[type="color"] {
    width: 100%;
    min-height: 48px;
    padding: 4px;
    cursor: pointer;
}

.pirate-loot-min-table th small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-weight: 500;
}

.pirate-loot-min-table td[data-pirate-loot-preview] {
    min-width: 72px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.level-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.level-list h2 {
    flex-basis: 100%;
    margin-bottom: 0;
}

.level-list a {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
}

.section-heading.single {
    display: block;
}

.module-heading {
    --module-icon: url("/assets/icons/actions/base.svg");
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    border: 1px solid rgba(91, 215, 255, 0.18);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(91, 215, 255, 0.08), transparent 42%),
        rgba(12, 24, 34, 0.34);
}

.module-heading-icon {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(91, 215, 255, 0.34);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 40%, rgba(91, 215, 255, 0.2), transparent 66%),
        rgba(7, 16, 24, 0.8);
    color: var(--cyan);
    box-shadow: inset 0 0 18px rgba(91, 215, 255, 0.09), 0 0 18px rgba(91, 215, 255, 0.11);
}

.module-heading-icon::before {
    content: "";
    width: 21px;
    height: 21px;
    background: currentColor;
    mask: var(--module-icon) center / contain no-repeat;
    -webkit-mask: var(--module-icon) center / contain no-repeat;
}

.module-heading h1 {
    margin-bottom: 0;
    font-size: clamp(1.45rem, 2.6vw, 2.25rem);
    line-height: 1.02;
}

.module-heading .eyebrow {
    margin-bottom: 2px;
}

.module-heading-copy {
    max-width: 840px;
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.module-base {
    --module-icon: url("/assets/icons/actions/base.svg");
}

.module-command {
    --module-icon: url("/assets/icons/actions/command.svg");
}

.module-map,
.module-jump {
    --module-icon: url("/assets/icons/actions/jump.svg");
}

.module-fleet,
.module-shipyard,
.module-hangar {
    --module-icon: url("/assets/icons/actions/ship.svg");
}

.module-research {
    --module-icon: url("/assets/icons/actions/research.svg");
}

.module-repair {
    --module-icon: url("/assets/icons/actions/repair.svg");
}

.module-alliance,
.module-raid {
    --module-icon: url("/assets/icons/actions/hive.svg");
}

.module-shop {
    --module-icon: url("/assets/icons/actions/shop.svg");
}

.module-report {
    --module-icon: url("/assets/icons/actions/report.svg");
}

.module-player {
    --module-icon: url("/assets/icons/actions/player.svg");
}

.empty-state {
    display: grid;
    gap: 8px;
    place-items: center;
    text-align: center;
    min-height: 150px;
    padding: 22px;
    border: 1px dashed rgba(148, 163, 184, 0.34);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 0%, rgba(91, 215, 255, 0.08), transparent 46%),
        rgba(7, 16, 24, 0.52);
    color: var(--muted);
}

.empty-state strong {
    color: var(--text);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 1180px;
    margin: 28px auto 0;
}

.app-actions {
    max-width: 1180px;
    margin-inline: auto;
}

.global-resource-bar {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 8px;
    max-width: none;
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(91, 215, 255, 0.16);
    border-radius: 8px;
    background: rgba(7, 16, 24, 0.94);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(14px);
}

.world-resource-status {
    display: none;
}

.global-resource-pill {
    appearance: none;
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.global-resource-pill:hover,
.global-resource-pill:focus-visible,
.global-resource-pill[aria-expanded="true"] {
    border-color: rgba(124, 225, 255, .62);
    background: rgba(22, 48, 67, .96);
}

.global-resource-pill:focus-visible {
    outline: 2px solid #a7ecff;
    outline-offset: 1px;
}

.global-resource-details {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 16px;
    padding: 10px 12px;
    border: 1px solid rgba(102, 215, 255, .32);
    border-radius: 8px;
    background: rgba(10, 27, 40, .98);
}

.global-resource-details[hidden] { display: none; }
.global-resource-details-head { display: flex; align-items: center; gap: 8px; }
.global-resource-details-head .resource-icon { width: 26px; height: 26px; flex: 0 0 26px; }
.global-resource-details-values { display: flex; justify-content: center; gap: clamp(18px, 4vw, 54px); }
.global-resource-details-values > span { display: grid; gap: 1px; }
.global-resource-details-values > span[hidden] { display: none; }
.global-resource-details-values small { color: var(--muted); font-size: .68rem; }
.global-resource-details-values strong { font-size: .88rem; }
.global-resource-details > .resource-progress { width: min(180px, 18vw); }

body.has-app-user .global-resource-bar {
    gap: 6px;
    padding: 6px;
}

body.has-app-user .global-resource-pill {
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 6px;
    padding: 5px 7px;
}

body.has-app-user .global-resource-pill .resource-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    border-radius: 5px;
}

body.has-app-user .global-resource-pill strong {
    font-size: 0.82rem;
}

body.has-app-user .global-resource-pill small {
    font-size: 0.62rem;
}

body.has-app-user .global-resource-collect-form {
    min-width: 32px;
}

body.has-app-user .global-resource-collect-button {
    width: 32px;
    font-size: 1rem;
}

@media (max-width: 1680px) and (min-width: 901px) {
    :root {
        --app-hud-width: 300px;
        --app-side-gap: 10px;
        --app-content-max: 1080px;
    }

    body.has-app-user .app-section {
        padding-inline: clamp(12px, 2vw, 28px);
    }

    .command-alert-card {
        font-size: 0.9rem;
    }

    .fleet-status-row {
        padding: 7px;
    }
}

@media (max-width: 1360px) and (min-width: 901px) {
    :root {
        --app-hud-width: 268px;
        --app-content-max: 980px;
    }

    body.has-app-user .page-shell {
        padding-right: calc(var(--app-hud-width) + 8px);
    }

    .command-alert-hud {
        top: 76px;
        max-height: calc(100vh - 248px);
    }

    .global-chat-panel {
        grid-template-rows: auto minmax(140px, 220px) auto auto;
    }
}

.global-resource-pill {
    position: relative;
    overflow: hidden;
    min-width: 0;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: center;
    padding: 7px 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.05);
}

.global-resource-pill::before,
.global-resource-pill::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
}

.global-resource-pill::before {
    opacity: 0.28;
    background-image: var(--resource-header-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    filter: saturate(1.08);
}

.global-resource-pill::after {
    background:
        linear-gradient(90deg, rgba(7, 16, 24, 0.22), rgba(7, 16, 24, 0.78) 42%, rgba(7, 16, 24, 0.92)),
        linear-gradient(0deg, rgba(7, 16, 24, 0.56), transparent 48%);
}

.global-resource-pill > * {
    position: relative;
    z-index: 1;
}

.global-resource-pill .resource-icon {
    grid-row: 1 / span 2;
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    border-radius: 6px;
}

.global-resource-pill strong,
.global-resource-pill small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-resource-claim-dot {
    position: absolute;
    z-index: 3;
    top: 4px;
    right: 4px;
    width: 9px;
    height: 9px;
    border: 1px solid rgba(255, 245, 245, 0.9);
    border-radius: 999px;
    background: #ff355d;
    box-shadow: 0 0 0 2px rgba(7, 16, 24, 0.9), 0 0 10px rgba(255, 53, 93, 0.78);
}

.global-resource-claim-dot[hidden] {
    display: none;
}

.global-resource-pill strong {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 900;
}

.global-resource-pill small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
}

.global-resource-collect-form {
    display: flex;
    align-items: stretch;
    min-width: 38px;
}

.global-resource-collect-button {
    width: 38px;
    min-height: 100%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(91, 215, 255, 0.22);
    border-radius: 7px;
    color: var(--text);
    background: rgba(91, 215, 255, 0.1);
    cursor: pointer;
    font: inherit;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
}

.global-resource-collect-button:hover:not(:disabled),
.global-resource-collect-button:focus-visible {
    border-color: rgba(91, 215, 255, 0.52);
    background: rgba(91, 215, 255, 0.18);
}

.global-resource-collect-button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

[data-fleets-page].is-loading {
    opacity: 0.72;
    pointer-events: none;
    transition: opacity 140ms ease;
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    max-width: 1180px;
    margin: 24px auto 18px;
}

.base-integrity-card {
    display: grid;
    gap: 8px;
    max-width: 1180px;
    margin: 0 auto 12px;
    padding: 12px 14px;
    border: 1px solid rgba(91, 215, 255, 0.24);
    border-radius: 8px;
    background: rgba(12, 24, 34, 0.72);
}

.base-integrity-card > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: var(--muted);
    font-weight: 800;
}

.base-integrity-card strong {
    color: var(--text);
}

.base-integrity-card small {
    color: var(--muted);
}

.resource-card,
.slot-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-strong);
}

.resource-card {
    display: grid;
    gap: 8px;
    min-height: 122px;
    padding: 14px;
}

.resource-card span,
.resource-card small,
.slot-card small {
    color: var(--muted);
}

.resource-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.resource-head span:last-child {
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 800;
}

.resource-icon {
    position: relative;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid currentColor;
    border-radius: 8px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.06);
    background-image: var(--resource-icon-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.22);
}

.resource-icon::before,
.resource-icon::after {
    content: "";
    position: absolute;
}

.resource-metal .resource-icon {
    color: #c7b79a;
}

.resource-metal .resource-icon::before {
    inset: 8px 7px 7px 9px;
    border-radius: 42% 58% 48% 52%;
    background: currentColor;
    transform: rotate(-17deg);
}

.resource-metal .resource-icon::after {
    inset: 13px 12px 12px 15px;
    border-radius: 50%;
    background: rgba(6, 14, 21, 0.42);
}

.resource-crystal .resource-icon {
    color: #8de8ff;
}

.resource-crystal .resource-icon::before {
    inset: 6px 10px;
    clip-path: polygon(50% 0, 100% 36%, 78% 100%, 22% 100%, 0 36%);
    background: currentColor;
}

.resource-crystal .resource-icon::after {
    inset: 8px 15px 10px 16px;
    background: rgba(255, 255, 255, 0.46);
}

.resource-energy .resource-icon {
    color: #f2c94c;
}

.resource-energy .resource-icon::before {
    inset: 5px 11px 5px 9px;
    clip-path: polygon(58% 0, 100% 0, 64% 42%, 92% 42%, 30% 100%, 44% 54%, 8% 54%);
    background: currentColor;
}

.resource-exotic_matter .resource-icon {
    color: #d4a8ff;
}

.resource-exotic_matter .resource-icon::before {
    inset: 7px;
    clip-path: polygon(50% 0, 84% 18%, 100% 55%, 70% 100%, 30% 100%, 0 55%, 16% 18%);
    background: currentColor;
}

.resource-exotic_matter .resource-icon::after {
    inset: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.52);
}

.resource-credits .resource-icon {
    color: #ffdd78;
}

.resource-credits .resource-icon::before {
    inset: 7px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.resource-credits .resource-icon::after {
    inset: 12px 10px;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.resource-metal {
    --resource-icon-image: url("/assets/images/resources/metal-icon.webp");
    --resource-header-image: url("/assets/images/resources/metal-header.webp");
}

.resource-crystal {
    --resource-icon-image: url("/assets/images/resources/crystal-icon.webp");
    --resource-header-image: url("/assets/images/resources/crystal-header.webp");
}

.resource-exotic_matter {
    --resource-icon-image: url("/assets/images/resources/exotic_matter-icon.webp");
    --resource-header-image: url("/assets/images/resources/exotic_matter-header.webp");
}

.resource-energy {
    --resource-icon-image: url("/assets/images/resources/energy-icon.webp");
    --resource-header-image: url("/assets/images/resources/energy-header.webp");
}

.resource-credits {
    --resource-icon-image: url("/assets/images/resources/credits-icon.webp");
    --resource-header-image: url("/assets/images/resources/credits-header.webp");
}

.resource-metal .resource-icon::before,
.resource-metal .resource-icon::after,
.resource-crystal .resource-icon::before,
.resource-crystal .resource-icon::after,
.resource-exotic_matter .resource-icon::before,
.resource-exotic_matter .resource-icon::after,
.resource-energy .resource-icon::before,
.resource-energy .resource-icon::after,
.resource-credits .resource-icon::before,
.resource-credits .resource-icon::after {
    display: none;
}

.resource-card strong {
    display: block;
    color: var(--text);
    font-size: 1.2rem;
}

.resource-list {
    display: grid;
    gap: 7px;
}

.inline-resource-cost {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    vertical-align: middle;
}

.resource-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-weight: 800;
}

.resource-pill .resource-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    border-radius: 6px;
}

.resource-pill strong {
    color: var(--text);
    font-size: 0.92rem;
}

.resource-pill.is-insufficient,
.resource-pill.is-insufficient strong,
.resource-pill.is-insufficient small {
    color: #ff7474;
}

.resource-pill.is-insufficient {
    flex-wrap: wrap;
}

.resource-pill.is-insufficient small {
    width: 100%;
    padding-left: 32px;
    font-size: .72rem;
    font-weight: 800;
}

.compact-resource-list {
    gap: 5px;
    margin-top: 4px;
}

.compact-resource-list .resource-pill {
    min-height: 24px;
}

.compact-resource-list .resource-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    border-radius: 5px;
}

.resource-progress {
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.resource-progress em {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: currentColor;
    transition: width 0.6s ease;
}

.resource-card.resource-receiving,
.global-resource-pill.resource-receiving {
    animation: resource-receive-pulse 820ms ease-out;
}

.base-live-message {
    position: sticky;
    top: 10px;
    z-index: 45;
    max-width: 1180px;
    margin: 0 auto 16px;
    padding: 10px 12px;
    border: 1px solid rgba(43, 224, 151, 0.36);
    border-radius: 8px;
    background: rgba(15, 56, 45, 0.82);
    color: #d8fff1;
    font-weight: 800;
}

.base-live-message.error {
    border-color: rgba(255, 107, 107, 0.48);
    background: rgba(58, 20, 24, 0.9);
    color: #ffd4d4;
}

.building-storage {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.upgrade-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.upgrade-preview-dialog {
    position: relative;
    width: min(460px, calc(100vw - 28px));
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 18px;
    background: rgba(8, 18, 28, 0.98);
    color: var(--text);
    box-shadow: var(--shadow);
}

.upgrade-preview-dialog::backdrop {
    background: rgba(0, 0, 0, 0.62);
}

.upgrade-preview-dialog h3 {
    margin: 0 42px 14px 0;
}

.upgrade-preview-section {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.upgrade-preview-section h4 {
    margin: 0;
    color: var(--gold);
    font-size: 0.78rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.upgrade-preview-list {
    display: grid;
    gap: 8px;
}

.upgrade-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.045);
}

.upgrade-preview-row span {
    color: var(--muted);
    font-size: 0.86rem;
}

.upgrade-preview-row strong {
    color: #d8fff1;
    white-space: nowrap;
}

.upgrade-preview-row.negative strong {
    color: #ffd4d4;
}

.upgrade-preview-row.muted {
    opacity: 0.62;
}

.construction-job {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(242, 201, 76, 0.34);
    border-radius: 8px;
    background: rgba(242, 201, 76, 0.08);
}

.construction-job strong {
    color: var(--gold);
}

.construction-job span {
    color: var(--muted);
    font-size: 0.86rem;
}

.building-storage-row {
    display: grid;
    gap: 5px;
    color: var(--muted);
}

.building-storage-row span,
.building-storage-row strong {
    color: var(--text);
    font-weight: 800;
}

.building-storage-row em {
    display: block;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    overflow: hidden;
}

.building-storage-row i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: currentColor;
}

.building-storage-row.resource-metal {
    color: #c7b79a;
}

.building-storage-row.resource-crystal {
    color: #8de8ff;
}

.building-storage-row.resource-energy {
    color: #f2c94c;
}

.building-storage-row.resource-exotic_matter {
    color: #d4a8ff;
}

.building-storage-row.resource-credits {
    color: #ffdd78;
}

.empty-slot-button {
    min-height: 220px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    width: 100%;
    border: 1px dashed rgba(91, 215, 255, 0.36);
    border-radius: 8px;
    background: rgba(91, 215, 255, 0.06);
    color: var(--text);
    cursor: pointer;
}

.empty-slot-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.empty-slot-button small {
    color: var(--muted);
    font-weight: 900;
}

.build-choice-dialog {
    position: relative;
    width: min(960px, calc(100vw - 28px));
    max-height: min(820px, calc(100vh - 28px));
    border: 1px solid rgba(91, 215, 255, 0.22);
    border-radius: 8px;
    background: #071018;
    color: var(--text);
    padding: 18px;
}

.build-choice-dialog h3 {
    margin-right: 44px;
}

.build-choice-dialog::backdrop {
    background: rgba(0, 0, 0, 0.7);
}

.build-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.build-choice-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 220px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.building-art {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(91, 215, 255, 0.16);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(91, 215, 255, 0.1), rgba(242, 201, 76, 0.06));
    box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.28);
}

.building-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 38%),
        radial-gradient(circle at 50% 110%, rgba(91, 215, 255, 0.16), transparent 60%);
    pointer-events: none;
}

.building-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.building-art-small {
    max-height: 160px;
}

.build-choice-art {
    margin-bottom: 2px;
}

.build-choice-card[hidden] {
    display: none;
}

.build-choice-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 14px;
    border: 1px dashed rgba(148, 163, 184, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
}

.build-choice-group-label {
    grid-column: 1 / -1;
    margin: 6px 0 -2px;
    color: #9bd7ff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.build-choice-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.premium-building-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 3px 7px;
    border: 1px solid rgba(255, 211, 122, 0.55);
    border-radius: 999px;
    color: #ffe0a3;
    background: rgba(255, 183, 77, 0.13);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.premium-building-note {
    padding: 7px 8px;
    border: 1px solid rgba(255, 211, 122, 0.28);
    border-radius: 6px;
    color: #ffe0a3;
    background: rgba(255, 183, 77, 0.08);
}

.build-duration-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 8px;
    border: 1px solid rgba(125, 199, 255, 0.24);
    border-radius: 6px;
    background: rgba(125, 199, 255, 0.08);
}

.build-choice-card.disabled {
    isolation: isolate;
}

.build-choice-card.disabled::after {
    content: none;
}

.building-state-overlay {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: clamp(2px, .6vw, 8px);
    padding: clamp(4px, 1vw, 14px);
    overflow: hidden;
    border: 2px solid currentColor;
    border-radius: inherit;
    text-align: center;
    pointer-events: none;
    backdrop-filter: blur(2px);
}

.building-state-overlay-symbol {
    display: grid;
    place-items: center;
    width: clamp(32px, 44%, 84px);
    aspect-ratio: 1;
    color: inherit;
    border: .09em solid currentColor;
    border-radius: 50%;
    font-size: clamp(1.4rem, 5vw, 3.8rem);
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .65);
}

.building-state-overlay strong {
    width: 100%;
    color: inherit;
    font-size: clamp(.62rem, 1.2vw, 1rem);
    line-height: 1.1;
    white-space: normal;
}

.building-state-overlay small {
    max-width: 95%;
    color: rgba(255, 255, 255, .9);
    font-size: clamp(.54rem, .9vw, .78rem);
    line-height: 1.2;
}

.building-state-overlay.is-unavailable {
    color: #ff9aa7;
    background: rgba(25, 29, 39, .9);
}

.building-state-overlay.is-premium {
    color: #ffd36f;
    background: linear-gradient(145deg, rgba(53, 33, 9, .94), rgba(21, 14, 31, .95));
}

.building-state-overlay.is-power-off {
    color: #8fb7cc;
    background: rgba(7, 19, 29, .92);
}

.build-choice-card p,
.build-choice-card span,
.build-choice-card small {
    color: var(--muted);
    font-size: 0.84rem;
}

.resource-spark {
    position: fixed;
    z-index: 1000;
    width: 10px;
    height: 10px;
    pointer-events: none;
    border-radius: 50%;
    background: var(--resource-flight-icon) center / cover no-repeat;
    color: var(--gold);
    box-shadow: 0 0 16px currentColor, 0 0 32px currentColor;
    animation: collect-flight 920ms cubic-bezier(0.18, 0.82, 0.28, 1) forwards;
}

.resource-spark::after {
    position: absolute;
    left: 14px;
    top: -7px;
    content: attr(data-amount);
    color: currentColor;
    font-size: 0.72rem;
    font-weight: 900;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72);
    white-space: nowrap;
}

.resource-spark.metal {
    color: #c7b79a;
    --resource-flight-icon: url("/assets/images/resources/metal-icon.webp");
}

.resource-spark.crystal {
    color: #8de8ff;
    --resource-flight-icon: url("/assets/images/resources/crystal-icon.webp");
}

.resource-spark.energy {
    color: #f2c94c;
    --resource-flight-icon: url("/assets/images/resources/energy-icon.webp");
}

.resource-spark.credits {
    color: #ffdd78;
    --resource-flight-icon: url("/assets/images/resources/credits-icon.webp");
}

.resource-spark.exotic_matter {
    color: #d4a8ff;
    --resource-flight-icon: url("/assets/images/resources/exotic_matter-icon.webp");
}

@keyframes collect-flight {
    0% {
        opacity: 0;
        transform: translate(var(--ox, 0), var(--oy, 0)) scale(0.5);
    }

    14% {
        opacity: 1;
        transform: translate(calc(var(--ox, 0) * 1.8), calc(var(--oy, 0) * 1.8)) scale(1);
    }

    70% {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate(calc(var(--dx) + var(--ox, 0)), calc(var(--dy) + var(--oy, 0))) scale(0.28);
    }
}

@keyframes resource-receive-pulse {
    0% {
        box-shadow: 0 0 0 rgba(43, 224, 151, 0);
    }

    35% {
        box-shadow: 0 0 0 2px rgba(43, 224, 151, 0.58), 0 0 28px rgba(43, 224, 151, 0.28);
        transform: translateY(-1px);
    }

    100% {
        box-shadow: 0 0 0 rgba(43, 224, 151, 0);
        transform: translateY(0);
    }
}

.base-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    column-gap: 18px;
    row-gap: 34px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px;
    border: 1px solid rgba(91, 215, 255, 0.18);
    border-radius: 10px;
    background:
        linear-gradient(120deg, rgba(91, 215, 255, 0.08), transparent 32%),
        linear-gradient(300deg, rgba(242, 201, 76, 0.06), transparent 34%),
        repeating-linear-gradient(30deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 44px),
        rgba(8, 18, 28, 0.64);
    box-shadow: inset 0 0 42px rgba(91, 215, 255, 0.06), 0 22px 52px rgba(0, 0, 0, 0.22);
}

.base-grid::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(91, 215, 255, 0.18);
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 50%, rgba(91, 215, 255, 0.12), transparent 28%),
        linear-gradient(135deg, transparent 48%, rgba(91, 215, 255, 0.16) 49%, rgba(91, 215, 255, 0.16) 51%, transparent 52%),
        linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.08) 49%, rgba(255, 255, 255, 0.08) 51%, transparent 52%);
    pointer-events: none;
}

.base-grid::after {
    content: "Basisdeck";
    position: absolute;
    right: 28px;
    top: 18px;
    color: rgba(168, 182, 197, 0.58);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.slot-card {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 260px;
    padding: 18px;
    border-color: rgba(91, 215, 255, 0.2);
    background:
        linear-gradient(180deg, rgba(18, 42, 56, 0.94), rgba(9, 22, 32, 0.94)),
        rgba(12, 24, 34, 0.84);
    box-shadow: 0 10px 0 rgba(4, 10, 16, 0.65), 0 18px 32px rgba(0, 0, 0, 0.34);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.slot-card::before {
    content: "";
    position: absolute;
    inset: 8px;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    pointer-events: none;
}

.slot-card > * {
    position: relative;
    z-index: 1;
}

.slot-card.is-working {
    --work-color: 91, 215, 255;
    border-color: rgba(var(--work-color), 0.46);
    box-shadow:
        0 10px 0 rgba(4, 10, 16, 0.65),
        0 18px 32px rgba(0, 0, 0, 0.34),
        0 0 22px rgba(var(--work-color), 0.12);
    overflow: hidden;
}

.slot-card.is-working::before {
    border-color: rgba(var(--work-color), 0.22);
    animation: building-work-pulse 2.8s ease-in-out infinite;
}

.slot-card.is-working::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(115deg, transparent 0 28%, rgba(var(--work-color), 0.16) 43%, transparent 58% 100%);
    transform: translateX(-70%);
    animation: building-work-scan 3.8s linear infinite;
    pointer-events: none;
}

.slot-card.work-research {
    --work-color: 168, 85, 247;
}

.slot-card.work-shipyard {
    --work-color: 91, 215, 255;
}

.slot-card.work-repair {
    --work-color: 97, 211, 148;
}

.slot-card.work-construction {
    --work-color: 242, 201, 76;
}

.slot-card.work-training {
    --work-color: 255, 157, 77;
}

.building-work-badge {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid rgba(var(--work-color), 0.36);
    border-radius: 999px;
    background: rgba(var(--work-color), 0.1);
    color: rgb(var(--work-color));
    font-size: 0.78rem;
    font-weight: 900;
}

.building-work-badge span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
    animation: building-work-dot 1.4s ease-in-out infinite;
}

.building-work-badge strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.building-work-badge small {
    color: rgba(226, 232, 240, 0.82);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.veyr-event-settings-form {
    gap: 18px;
}

.veyr-event-admin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
}

.veyr-event-admin-card,
.veyr-weapon-matrix {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.38);
    padding: 16px;
}

.veyr-event-admin-card h3,
.veyr-weapon-matrix h3 {
    margin: 0 0 8px;
}

.veyr-event-admin-card .admin-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 12px;
}

.veyr-stat-hint {
    margin-top: 12px;
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 10px;
    background: rgba(34, 211, 238, 0.08);
    color: rgba(226, 232, 240, 0.86);
    font-size: 0.82rem;
    line-height: 1.45;
    padding: 10px 12px;
}

.veyr-weapon-matrix {
    width: 100%;
}

.veyr-weapon-matrix .compact-table th,
.veyr-weapon-matrix .compact-table td {
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .veyr-event-admin-grid {
        grid-template-columns: 1fr;
    }
}

@keyframes building-work-scan {
    from {
        transform: translateX(-70%);
    }
    to {
        transform: translateX(70%);
    }
}

@keyframes building-work-pulse {
    0%,
    100% {
        box-shadow: inset 0 0 0 rgba(var(--work-color), 0);
    }
    50% {
        box-shadow: inset 0 0 18px rgba(var(--work-color), 0.12);
    }
}

@keyframes building-work-dot {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(0.85);
    }
    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}

.slot-card:hover,
.slot-card:focus-within {
    border-color: rgba(91, 215, 255, 0.44);
    box-shadow: 0 8px 0 rgba(4, 10, 16, 0.68), 0 20px 38px rgba(0, 0, 0, 0.38), 0 0 24px rgba(91, 215, 255, 0.1);
    transform: translateY(-4px);
}

.slot-card.is-inactive {
    opacity: 0.58;
}

.slot-card.is-inactive h3,
.slot-card.is-inactive p,
.slot-card.is-inactive .building-storage {
    filter: grayscale(0.45);
}

.building-level-badge {
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 8px;
    padding: 6px 9px;
    border: 1px solid rgba(242, 201, 76, .76);
    border-radius: 7px;
    color: #f2c94c;
    background: rgba(9, 19, 28, .88);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .34);
    font-size: .78rem;
    font-weight: 900;
    line-height: 1.1;
}

.building-level-badge.is-without-image {
    position: static;
    width: max-content;
    margin-left: auto;
}

.slot-card h3 {
    margin-bottom: 0;
}

.slot-card p {
    color: var(--muted);
    line-height: 1.5;
}

.slot-card form {
    display: grid;
    gap: 10px;
    margin-top: auto;
}

.slot-card .power-form {
    margin-top: 0;
}

.power-button {
    display: inline-flex;
    width: max-content;
    min-height: 36px;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    border: 1px solid currentColor;
    border-radius: 7px;
    background: rgba(9, 19, 28, 0.58);
    color: #f2c94c;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

.power-button:disabled {
    cursor: default;
    opacity: 0.78;
}

.power-button.is-off {
    color: rgba(181, 195, 207, 0.58);
}

.power-button.is-producer {
    color: #4ee39a;
    cursor: default;
    background: rgba(23, 92, 61, 0.24);
    box-shadow: 0 0 0 1px rgba(78, 227, 154, 0.18), 0 0 18px rgba(78, 227, 154, 0.12);
}

.power-icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.power-icon::before,
.power-icon::after {
    content: "";
    position: absolute;
}

.power-icon::before {
    left: 50%;
    top: -5px;
    width: 2px;
    height: 12px;
    border-radius: 2px;
    background: currentColor;
    transform: translateX(-50%);
}

.power-icon::after {
    display: none;
    left: -4px;
    right: -4px;
    top: 50%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: rotate(-35deg);
}

.power-button.is-off .power-icon::after {
    display: block;
}

.slot-form label {
    display: grid;
    gap: 8px;
    color: #d6e0ea;
    font-weight: 700;
}

.slot-form select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #10202c;
    color: var(--text);
}

.fleet-layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.45fr) minmax(560px, 1.55fr);
    gap: 18px;
    max-width: 1180px;
    margin: 22px auto 0;
}

.fleet-picker {
    display: flex;
    gap: 8px;
    max-width: 1180px;
    margin: 18px auto 0;
    overflow-x: auto;
    padding-bottom: 4px;
}

.fleet-picker-item {
    min-width: 170px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(12, 24, 34, 0.72);
    color: inherit;
    text-decoration: none;
}

.fleet-picker-item strong,
.fleet-picker-item span {
    display: block;
}

.fleet-picker-item span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.78rem;
}

.fleet-picker-item.active {
    border-color: rgba(91, 215, 255, 0.72);
    background: rgba(14, 35, 50, 0.86);
}

.fleet-picker-item.unavailable {
    opacity: 0.58;
    border-color: rgba(255, 110, 110, 0.45);
}

.fleet-picker-item.specialized {
    border-style: dashed;
}

.fleet-picker-item.specialized.tier-2 {
    border-style: solid;
    border-color: rgba(97, 211, 148, 0.82);
}

.fleet-inventory-panel {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(12, 24, 34, 0.72);
}

.fleet-inventory-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.fleet-inventory-head h3 {
    margin: 0;
}

.fleet-ship-palette {
    display: grid;
    gap: 10px;
}

.fleet-ship-card {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    min-height: 118px;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(5, 12, 20, 0.9), rgba(5, 12, 20, 0.56) 52%, rgba(5, 12, 20, 0.18)),
        var(--ship-card-bg, linear-gradient(135deg, rgba(20, 42, 58, 0.78), rgba(7, 16, 24, 0.92)));
    background-position: center;
    background-size: cover;
    cursor: grab;
    transition: border-color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.fleet-ship-card.filtered-out {
    display: none;
}

.fleet-ship-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 74% 22%, var(--ship-tier-glow, rgba(91, 215, 255, 0.28)), transparent 34%),
        linear-gradient(180deg, transparent, rgba(4, 9, 15, 0.48));
    pointer-events: none;
}

.fleet-ship-card:active {
    cursor: grabbing;
}

.fleet-ship-card:hover {
    border-color: rgba(91, 215, 255, 0.62);
    transform: translateY(-1px);
}

.fleet-ship-card strong {
    color: var(--text);
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.fleet-ship-card span,
.fleet-ship-card small {
    color: var(--muted);
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}

.fleet-ship-card.level-tier-2 {
    --ship-tier-glow: rgba(97, 211, 148, 0.34);
    border-color: rgba(97, 211, 148, 0.38);
}

.fleet-ship-card.level-tier-3 {
    --ship-tier-glow: rgba(191, 132, 255, 0.36);
    border-color: rgba(191, 132, 255, 0.44);
}

.fleet-ship-card.level-tier-4 {
    --ship-tier-glow: rgba(255, 195, 92, 0.38);
    border-color: rgba(255, 195, 92, 0.52);
}

.fleet-ship-card.depleted {
    cursor: not-allowed;
    opacity: 0.48;
    filter: saturate(0.55);
}

.fleet-main-panel {
    min-width: 0;
}

.fleet-card {
    min-height: 0;
    color: inherit;
    text-decoration: none;
}

.fleet-card:hover,
.fleet-card.active {
    border-color: rgba(91, 215, 255, 0.72);
    background: rgba(14, 35, 50, 0.86);
}

.fleet-card.specialized {
    border-color: rgba(91, 215, 255, 0.72);
    border-style: dashed;
}

.fleet-card.specialized.tier-2 {
    border-color: rgba(97, 211, 148, 0.82);
    border-style: solid;
}

.fleet-detail-panel {
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(12, 24, 34, 0.78);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.fleet-detail-panel h2,
.fleet-detail-panel h3 {
    margin: 0;
}

.fleet-detail-panel p {
    color: var(--muted);
}

.fleet-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.commander-slot-grid,
.commander-page-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.commander-page-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
}

.commander-collection-panel {
    width: min(100%, 1180px);
    margin: 0 auto 18px;
}

.commander-collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.fleet-configuration-dialog,
.repair-hangar-dialog,
.training-camp-dialog,
.research-dialog,
.shipyard-dialog {
    width: min(1180px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    padding: 18px;
    overflow: auto;
}

.fleet-configuration-dialog::backdrop,
.repair-hangar-dialog::backdrop,
.training-camp-dialog::backdrop,
.research-dialog::backdrop,
.shipyard-dialog::backdrop {
    background: rgba(1, 5, 12, 0.72);
    backdrop-filter: blur(4px);
}

.repair-hangar-dialog {
    width: min(940px, calc(100vw - 32px));
}

.research-dialog {
    position: relative;
    width: min(1280px, calc(100vw - 32px));
    height: min(920px, calc(100dvh - 32px));
    border-color: rgba(91, 215, 255, 0.3);
    background: rgba(5, 12, 24, 0.99);
}

.shipyard-dialog {
    position: relative;
    width: min(1220px, calc(100vw - 32px));
    height: min(920px, calc(100dvh - 32px));
    padding: 18px;
    border-color: rgba(245, 185, 83, 0.34);
    background: rgba(5, 12, 24, 0.99);
}

.shipyard-dialog-head {
    position: sticky;
    top: -18px;
    z-index: 6;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: -18px -18px 14px;
    padding: 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(5, 12, 24, 0.99), rgba(5, 12, 24, 0.94));
    backdrop-filter: blur(12px);
}

.shipyard-dialog-head h2,
.shipyard-dialog-head p {
    margin: 0;
}

.shipyard-dialog-head > div:first-child {
    display: grid;
    gap: 4px;
}

.shipyard-dialog-head > div:first-child > p:last-child {
    color: var(--muted);
}

.shipyard-dialog-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.shipyard-dialog-tools .dialog-close {
    position: static;
}

.shipyard-dialog > [data-shipyard-notice] {
    position: sticky;
    top: 78px;
    z-index: 7;
    margin-bottom: 10px;
}

.shipyard-dialog-body {
    min-height: 520px;
}

.research-dialog-head {
    position: sticky;
    top: -18px;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: -18px -18px 16px;
    padding: 18px 58px 14px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(5, 12, 24, 0.99), rgba(5, 12, 24, 0.94));
    backdrop-filter: blur(12px);
}

.research-dialog-head h2,
.research-dialog-head p {
    margin: 0;
}

.research-dialog-head > div {
    display: grid;
    gap: 4px;
}

.research-dialog-head > div > p:last-child {
    color: var(--muted);
}

.research-dialog-head .dialog-close {
    position: absolute;
    top: 14px;
    right: 14px;
}

.research-dialog > [data-research-notice] {
    position: sticky;
    top: 76px;
    z-index: 5;
    margin-bottom: 12px;
}

.research-dialog-body {
    min-height: 520px;
}

.research-panel-root {
    display: grid;
    gap: 14px;
}

.fleet-configuration-dialog {
    width: min(1040px, calc(100vw - 32px));
    position: relative;
}

.fleet-configuration-dialog-head {
    position: sticky;
    top: -18px;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: -18px -18px 16px;
    padding: 18px 58px 14px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(5, 12, 24, 0.99), rgba(5, 12, 24, 0.94));
    backdrop-filter: blur(12px);
}

.fleet-configuration-dialog-head h2,
.fleet-configuration-dialog-head p {
    margin: 0;
}

.fleet-configuration-dialog-head > div:first-child {
    flex: 1;
    min-width: 0;
}

.fleet-configuration-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.fleet-configuration-dialog-defense {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin: -2px 0;
    padding: 2px 8px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
}

.fleet-configuration-dialog-defense[hidden] {
    display: none;
}

.fleet-configuration-dialog-defense.is-active {
    border-color: rgba(34, 197, 94, 0.42);
    background: rgba(34, 197, 94, 0.08);
}

.fleet-configuration-dialog-defense[aria-busy="true"] {
    opacity: 0.68;
}

.fleet-configuration-dialog-head p:last-child {
    margin-top: 4px;
    color: var(--muted);
}

.fleet-configuration-dialog > [data-fleet-configuration-notice] {
    position: sticky;
    top: 76px;
    z-index: 5;
    margin-bottom: 12px;
}

.fleet-configuration-dialog-body[aria-busy="true"] {
    opacity: 0.68;
}

.fleet-configuration {
    display: grid;
    gap: 14px;
}

.fleet-configuration-overview {
    display: grid;
    gap: 14px;
}

.fleet-configuration-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.fleet-configuration-tab {
    display: grid;
    gap: 3px;
    min-width: 0;
    min-height: 74px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 11px;
    background: rgba(15, 23, 42, 0.68);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.fleet-configuration-tab span,
.fleet-configuration-tab small {
    color: var(--muted);
}

.fleet-configuration-tab strong,
.fleet-configuration-tab small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fleet-configuration-tab.is-active {
    border-color: rgba(91, 215, 255, 0.68);
    background: linear-gradient(145deg, rgba(20, 73, 104, 0.72), rgba(15, 23, 42, 0.76));
    box-shadow: inset 0 0 0 1px rgba(91, 215, 255, 0.12), 0 0 18px rgba(56, 189, 248, 0.1);
}

.fleet-configuration-command,
.fleet-configuration-commander-warning,
.fleet-configuration-commanders,
.fleet-configuration-readiness,
.fleet-configuration-bonuses,
.fleet-configuration-combat,
.fleet-configuration-form {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.68);
}

.fleet-configuration-command {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 16px;
    padding: 14px;
    border-color: rgba(242, 201, 76, 0.34);
}

.fleet-configuration-command-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 112px;
    overflow: hidden;
    border-radius: 10px;
    background: radial-gradient(circle, rgba(242, 201, 76, 0.14), rgba(2, 6, 23, 0.48));
    border: 1px solid transparent;
    color: #f8d66d;
    cursor: pointer;
    font: inherit;
    padding: 0;
}

.fleet-configuration-command-visual:not(:disabled):hover,
.fleet-configuration-command-visual:not(:disabled):focus-visible {
    border-color: rgba(242, 201, 76, 0.68);
    box-shadow: 0 0 18px rgba(242, 201, 76, 0.14);
}

.fleet-configuration-command-visual:disabled {
    cursor: default;
}

.fleet-configuration-command-visual > span {
    position: absolute;
    right: 7px;
    bottom: 7px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.86);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.fleet-configuration-command-visual img {
    width: 100%;
    height: 120px;
    object-fit: contain;
}

.fleet-configuration-command-copy {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 8px;
}

.fleet-configuration-command-score {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid rgba(242, 201, 76, 0.42);
    border-radius: 9px;
    background: rgba(242, 201, 76, 0.09);
}

.fleet-configuration-command-score span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.fleet-configuration-command-score strong {
    color: #f8d66d;
    font-size: 1.2rem;
}

.fleet-configuration-command-copy h3,
.fleet-configuration-command-copy p,
.fleet-configuration-readiness p,
.fleet-configuration-bonuses h3,
.fleet-configuration-bonuses p,
.fleet-configuration-combat h3,
.fleet-configuration-combat p,
.fleet-configuration-form h3,
.fleet-configuration-form p {
    margin: 0;
}

.fleet-configuration-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.fleet-configuration-status {
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 900;
}

.fleet-configuration-status.is-ready {
    border: 1px solid rgba(34, 197, 94, 0.36);
    color: #dcfce7;
    background: rgba(34, 197, 94, 0.1);
}

.fleet-configuration-status.is-warning {
    border: 1px solid rgba(242, 201, 76, 0.38);
    color: #fef3c7;
    background: rgba(242, 201, 76, 0.1);
}

.fleet-configuration-commander-warning {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border-color: rgba(248, 113, 113, 0.5);
    background: linear-gradient(90deg, rgba(127, 29, 29, 0.24), rgba(15, 23, 42, 0.72));
}

.fleet-configuration-commander-warning > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(248, 113, 113, 0.58);
    border-radius: 50%;
    color: #fecaca;
    background: rgba(127, 29, 29, 0.42);
    font-weight: 950;
}

.fleet-configuration-commander-warning strong {
    color: #fee2e2;
}

.fleet-configuration-commander-warning p {
    margin: 2px 0 0;
    color: #fecaca;
    font-size: 0.84rem;
}

.fleet-configuration-readiness {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
}

.fleet-configuration-readiness > div {
    display: grid;
    gap: 2px;
}

.fleet-configuration-readiness > div span,
.fleet-configuration-readiness p {
    color: var(--muted);
    font-size: 0.84rem;
}

.fleet-configuration-readiness > div strong {
    font-size: 1.22rem;
}

.fleet-configuration-readiness.is-warning {
    border-color: rgba(242, 201, 76, 0.38);
    background: linear-gradient(90deg, rgba(242, 201, 76, 0.09), rgba(15, 23, 42, 0.68));
}

.fleet-configuration-defense-switch {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(132px, auto);
    align-items: center;
    gap: 9px;
    min-height: 44px;
    cursor: pointer;
}

.fleet-configuration-defense-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.fleet-configuration-defense-switch > span {
    position: relative;
    width: 52px;
    height: 30px;
    border: 1px solid rgba(148, 163, 184, 0.42);
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.68);
    transition: border-color 160ms ease, background-color 160ms ease;
}

.fleet-configuration-defense-switch > span::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #cbd5e1;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.34);
    transition: transform 160ms ease, background-color 160ms ease;
}

.fleet-configuration-defense-switch input:checked + span {
    border-color: rgba(34, 197, 94, 0.68);
    background: rgba(34, 197, 94, 0.26);
}

.fleet-configuration-defense-switch input:checked + span::after {
    transform: translateX(22px);
    background: #dcfce7;
}

.fleet-configuration-defense-switch input:focus-visible + span {
    outline: 2px solid #5bd7ff;
    outline-offset: 3px;
}

.fleet-configuration-defense-switch input:disabled + span,
.fleet-configuration-defense-switch input:disabled ~ b {
    opacity: 0.48;
}

.fleet-configuration-defense-switch:has(input:disabled) {
    cursor: not-allowed;
}

.fleet-configuration-defense-switch > b {
    font-size: 0.82rem;
}

.fleet-configuration-bonuses {
    padding: 14px;
}

.fleet-configuration-commanders,
.fleet-configuration-combat {
    padding: 14px;
}

.fleet-configuration-commanders > header,
.fleet-configuration-foldout > summary,
.fleet-configuration-slots-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.fleet-configuration-commanders > header > span,
.fleet-configuration-foldout > summary > span,
.fleet-configuration-slots-head > span {
    padding: 5px 8px;
    border: 1px solid rgba(91, 215, 255, 0.25);
    border-radius: 999px;
    color: #e0f2fe;
    background: rgba(14, 165, 233, 0.08);
    font-size: 0.78rem;
    font-weight: 800;
}

.fleet-configuration-foldout > summary {
    cursor: pointer;
    list-style: none;
}

.fleet-configuration-foldout > summary::-webkit-details-marker {
    display: none;
}

.fleet-configuration-foldout > summary > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.fleet-configuration-foldout > summary > span::after {
    content: '▾';
    color: #a4e6ff;
    font-size: 0.82rem;
    transition: transform 160ms ease;
}

.fleet-configuration-foldout[open] > summary > span::after {
    transform: rotate(180deg);
}

.fleet-configuration-commander-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.fleet-configuration-commander,
.fleet-configuration-slot-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 72px;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 9px;
    color: var(--text);
    background: rgba(2, 6, 23, 0.42);
    text-align: left;
}

.fleet-configuration-commander:not(:disabled):hover,
.fleet-configuration-slot-card:not(:disabled):hover {
    border-color: rgba(91, 215, 255, 0.48);
    background: rgba(14, 165, 233, 0.09);
}

.fleet-configuration-commander-image,
.fleet-configuration-slot-image {
    display: grid;
    place-items: center;
    width: 58px;
    height: 54px;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.82);
}

.fleet-configuration-commander-image img,
.fleet-configuration-slot-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fleet-configuration-commander-image b,
.fleet-configuration-slot-image b {
    color: #a4e6ff;
    font-size: 1.65rem;
}

.fleet-configuration-commander > span:last-child,
.fleet-configuration-slot-card > span:last-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.fleet-configuration-commander strong,
.fleet-configuration-slot-card strong,
.fleet-configuration-commander small,
.fleet-configuration-slot-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fleet-configuration-commander small,
.fleet-configuration-slot-card small {
    color: var(--muted);
    font-size: 0.76rem;
}

.fleet-configuration-bonus-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.fleet-configuration-bonus-grid > div {
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 9px;
    background: rgba(2, 6, 23, 0.34);
}

.fleet-configuration-bonus-grid span {
    color: var(--muted);
    font-size: 0.76rem;
}

.fleet-configuration-bonus-grid strong {
    color: #a4e6ff;
    font-size: 1.02rem;
}

.fleet-configuration-combat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.fleet-configuration-combat-grid > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 8px;
    background: rgba(2, 6, 23, 0.32);
}

.fleet-configuration-combat-grid span {
    color: var(--muted);
    font-size: 0.74rem;
}

.fleet-configuration-combat-grid strong {
    font-size: 0.86rem;
}

.fleet-configuration-form {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.fleet-configuration-slot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.fleet-configuration-slot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 9px;
    padding: 11px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.34);
}

.fleet-configuration-slot-card {
    width: 100%;
}

.fleet-configuration-slot.is-warning {
    border-color: rgba(242, 201, 76, 0.36);
}

.fleet-configuration-slot > header {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.fleet-configuration-slot > header span,
.fleet-configuration-slot > small,
.fleet-configuration-slot label > span {
    color: var(--muted);
    font-size: 0.76rem;
}

.fleet-configuration-slot label {
    display: grid;
    gap: 4px;
}

.fleet-configuration-slot input[type="number"] {
    width: 100%;
    min-height: 44px;
}

.fleet-configuration-picker {
    position: fixed;
    z-index: 20;
    left: 50%;
    bottom: max(24px, env(safe-area-inset-bottom));
    width: min(760px, calc(100vw - 32px));
    max-height: min(78dvh, 760px);
    padding: 14px;
    overflow: auto;
    transform: translateX(-50%);
    border: 1px solid rgba(91, 215, 255, 0.38);
    border-radius: 16px;
    background: rgba(5, 12, 24, 0.99);
    box-shadow: 0 0 0 100vmax rgba(1, 5, 12, 0.58), 0 24px 80px rgba(0, 0, 0, 0.56);
}

.fleet-configuration-picker[hidden] {
    display: none;
}

.fleet-configuration-picker > header {
    position: sticky;
    top: -14px;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: -14px -14px 12px;
    padding: 14px 54px 12px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(5, 12, 24, 0.98);
}

.fleet-configuration-picker h3,
.fleet-configuration-picker p {
    margin: 0;
}

.fleet-configuration-choice-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.fleet-configuration-choice {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 3px 10px;
    min-height: 82px;
    padding: 9px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 10px;
    color: var(--text);
    background: rgba(15, 23, 42, 0.76);
    text-align: left;
}

.fleet-configuration-choice > span {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 72px;
    height: 62px;
    overflow: hidden;
    border-radius: 8px;
    color: #a4e6ff;
    background: rgba(2, 6, 23, 0.55);
    font-size: 1.65rem;
}

.fleet-configuration-choice img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fleet-configuration-choice small,
.fleet-configuration-choice b {
    color: var(--muted);
    font-size: 0.75rem;
}

.fleet-configuration-choice > b {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    color: #a4e6ff;
}

.fleet-configuration-choice.is-selected {
    border-color: rgba(34, 197, 94, 0.58);
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.18);
}

.fleet-configuration-choice:disabled {
    opacity: 0.45;
}

.fleet-configuration-choice:not(:disabled):hover {
    border-color: rgba(91, 215, 255, 0.5);
}

.fleet-configuration-commander.rarity-common,
.fleet-configuration-choice.commander.rarity-common {
    border-color: rgba(148, 163, 184, 0.62);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.1);
}

.fleet-configuration-commander.rarity-uncommon,
.fleet-configuration-choice.commander.rarity-uncommon {
    border-color: rgba(34, 197, 94, 0.78);
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.12);
}

.fleet-configuration-commander.rarity-rare,
.fleet-configuration-choice.commander.rarity-rare {
    border-color: rgba(56, 189, 248, 0.82);
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.14);
}

.fleet-configuration-commander.rarity-epic,
.fleet-configuration-choice.commander.rarity-epic {
    border-color: rgba(168, 85, 247, 0.86);
    box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.15);
}

.fleet-configuration-commander.rarity-legendary,
.fleet-configuration-choice.commander.rarity-legendary {
    border-color: rgba(245, 158, 11, 0.9);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.16);
}

.fleet-configuration-choice.commander.is-selected {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.72);
}

.fleet-configuration-slot > small {
    grid-column: 1 / -1;
    color: #fef3c7;
}

.fleet-configuration-form > footer {
    display: flex;
    justify-content: flex-end;
}

.fleet-configuration-autosave-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
}

.fleet-configuration-autosave-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.72);
}

.fleet-configuration-autosave-status[data-state="pending"]::before,
.fleet-configuration-autosave-status[data-state="saving"]::before {
    border: 2px solid rgba(91, 215, 255, 0.3);
    border-top-color: #5bd7ff;
    background: transparent;
    animation: fleet-autosave-spin 0.7s linear infinite;
}

.fleet-configuration-autosave-status[data-state="saved"] {
    color: #86efac;
}

.fleet-configuration-autosave-status[data-state="saved"]::before {
    background: #22c55e;
}

.fleet-configuration-autosave-status[data-state="error"] {
    color: #fca5a5;
}

.fleet-configuration-autosave-status[data-state="error"]::before {
    background: #ef4444;
}

@keyframes fleet-autosave-spin {
    to { transform: rotate(360deg); }
}

.repair-hangar-dialog-head {
    position: sticky;
    top: -18px;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: -18px -18px 16px;
    padding: 18px 58px 14px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(5, 12, 24, 0.99), rgba(5, 12, 24, 0.94));
    backdrop-filter: blur(12px);
}

.repair-hangar-dialog-head h2,
.repair-hangar-dialog-head p {
    margin: 0;
}

.repair-hangar-dialog-head p:last-child {
    margin-top: 4px;
    color: var(--muted);
}

.repair-hangar-dialog > [data-repair-hangar-notice] {
    position: sticky;
    top: 76px;
    z-index: 5;
    margin-bottom: 12px;
}

.repair-hangar-dialog-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.repair-hangar-group {
    display: grid;
    grid-template-rows: auto minmax(120px, 1fr) auto;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.68);
}

.repair-hangar-group > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.repair-hangar-group h3,
.repair-hangar-group p {
    margin: 0;
}

.repair-hangar-group > header > strong {
    display: grid;
    place-items: center;
    min-width: 38px;
    min-height: 32px;
    padding: 4px 9px;
    border: 1px solid rgba(91, 215, 255, 0.3);
    border-radius: 999px;
    color: #e0f2fe;
    background: rgba(14, 165, 233, 0.1);
}

.repair-hangar-damage-list {
    display: grid;
    align-content: start;
    gap: 8px;
}

.repair-hangar-damage-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 10px 11px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 9px;
    background: rgba(2, 6, 23, 0.38);
}

.repair-hangar-damage-row.is-repairing {
    border-color: rgba(91, 215, 255, 0.36);
}

.repair-hangar-damage-row > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.repair-hangar-damage-row strong,
.repair-hangar-damage-row span {
    overflow-wrap: anywhere;
}

.repair-hangar-damage-row > div span,
.repair-hangar-damage-row > span {
    color: var(--muted);
    font-size: 0.82rem;
}

.repair-hangar-group form,
.repair-hangar-group .button {
    width: 100%;
}

.repair-hangar-group form {
    display: grid;
    gap: 8px;
}

.combat-round-persistent-damage {
    display: grid;
    gap: 4px;
    margin-top: 8px;
    padding: 9px 10px;
    border-left: 2px solid rgba(248, 113, 113, 0.55);
    border-radius: 0 8px 8px 0;
    background: rgba(127, 29, 29, 0.12);
}

.combat-round-persistent-damage span {
    color: var(--muted);
    font-size: 0.82rem;
}

.repair-hangar-cost {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    color: var(--muted);
    font-size: 0.8rem;
}

.repair-hangar-cost:empty {
    display: none;
}

.repair-hangar-cost > strong {
    color: #fca5a5;
}

.repair-hangar-group .button {
    min-height: 46px;
}

.training-camp-dialog-head {
    position: sticky;
    top: -18px;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: -18px -18px 14px;
    padding: 18px 58px 14px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(5, 12, 24, 0.99), rgba(5, 12, 24, 0.94));
    backdrop-filter: blur(12px);
}

.training-camp-dialog-head h2,
.training-camp-dialog-head p {
    margin: 0;
}

.training-camp-dialog-head p:last-child {
    margin-top: 4px;
    color: var(--muted);
}

.training-camp-dialog > [data-training-camp-notice] {
    position: sticky;
    top: 76px;
    z-index: 5;
    margin-bottom: 12px;
}

.training-camp-milestone {
    position: fixed;
    top: max(76px, env(safe-area-inset-top));
    left: 50%;
    z-index: 12;
    display: grid;
    width: min(560px, calc(100vw - 32px));
    max-height: min(460px, calc(100dvh - 112px));
    gap: 8px;
    margin: 0;
    padding: 14px 46px 14px 14px;
    overflow: auto;
    border: 1px solid rgba(34, 197, 94, 0.42);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(14, 165, 233, 0.08));
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.52), 0 0 24px rgba(34, 197, 94, 0.12);
    backdrop-filter: blur(16px);
    transform: translateX(-50%);
}

.training-camp-milestone[hidden] {
    display: none;
}

.training-camp-milestone h3,
.training-camp-milestone p {
    margin: 0;
}

.training-camp-milestone-dismiss {
    position: absolute;
    top: 9px;
    right: 9px;
    display: inline-grid;
    width: 32px;
    height: 32px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(220, 252, 231, 0.36);
    border-radius: 8px;
    color: #f0fdf4;
    background: rgba(6, 24, 20, 0.84);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.training-camp-milestone-dismiss:hover,
.training-camp-milestone-dismiss:focus-visible {
    border-color: rgba(220, 252, 231, 0.78);
    outline: 2px solid rgba(34, 197, 94, 0.24);
    outline-offset: 2px;
}

.training-camp-panel {
    display: grid;
    gap: 14px;
}

.training-camp-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.training-camp-head h2 {
    margin: 0 0 5px;
}

.training-camp-head p,
.training-camp-note {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.training-camp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(91, 215, 255, 0.32);
    background: rgba(14, 165, 233, 0.1);
    color: #e0f2fe;
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

.training-camp-note {
    padding: 10px 12px;
    border: 1px solid rgba(34, 197, 94, 0.26);
    border-radius: 8px;
    background: rgba(34, 197, 94, 0.08);
    color: #dcfce7;
}

.training-milestone-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.training-milestone-progress[hidden],
.training-camp-catch-up[hidden] {
    display: none;
}

.training-milestone-tier {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.58);
}

.training-milestone-tier span,
.training-milestone-tier strong {
    font-weight: 800;
}

.training-milestone-tier small {
    grid-column: 1 / -1;
    color: var(--muted);
}

.training-milestone-tier.is-awarded {
    border-color: rgba(34, 197, 94, 0.42);
    background: rgba(34, 197, 94, 0.09);
}

.training-camp-catch-up {
    display: grid;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.training-camp-catch-up h3,
.training-camp-catch-up p {
    margin: 0;
}

.training-camp-catch-up > div:first-child {
    display: grid;
    gap: 4px;
}

.training-camp-catch-up > div:first-child > p:last-child {
    color: var(--muted);
}

.training-camp-pool {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.training-camp-pool span {
    display: grid;
    gap: 2px;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.5);
    color: var(--muted);
    font-size: 0.78rem;
}

.training-camp-pool b {
    color: var(--text);
    font-size: 0.98rem;
}

.training-mission-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.training-mission-card {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 214px;
    padding: 13px;
    border: 2px solid rgba(148, 163, 184, 0.28);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(148, 163, 184, 0.07), transparent 46%),
        rgba(15, 23, 42, 0.72);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 14px 34px rgba(0, 0, 0, 0.18);
}

.training-mission-card.completed {
    opacity: 0.78;
}

.training-mission-main {
    display: grid;
    gap: 4px;
}

.training-mission-main strong {
    font-size: 1rem;
}

.training-mission-main > span {
    color: var(--muted);
    font-size: 0.82rem;
}

.training-mission-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 8px;
}

.training-mission-milestone-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid color-mix(in srgb, var(--training-milestone-color, #94a3b8) 66%, transparent);
    border-radius: 999px;
    color: color-mix(in srgb, var(--training-milestone-color, #94a3b8) 72%, white);
    background: color-mix(in srgb, var(--training-milestone-color, #94a3b8) 13%, rgba(2, 6, 23, 0.84));
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.training-mission-milestone-badge::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--training-milestone-color, #94a3b8);
    box-shadow: 0 0 8px color-mix(in srgb, var(--training-milestone-color, #94a3b8) 68%, transparent);
    content: '';
}

.training-mission-card p {
    margin: 0;
    color: #cbd5e1;
    line-height: 1.45;
}

.training-mission-duration {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 9px;
    border: 1px solid rgba(91, 215, 255, 0.18);
    border-radius: 8px;
    background: rgba(14, 165, 233, 0.07);
    color: var(--muted);
    font-size: 0.78rem;
}

.training-mission-duration strong {
    color: #e0f2fe;
    font-size: 0.9rem;
}

.training-mission-reward {
    display: grid;
    gap: 3px;
    margin-top: auto;
    padding: 9px 10px;
    border-radius: 8px;
    background: rgba(2, 6, 23, 0.34);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.training-mission-reward span {
    color: var(--muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0;
}

.training-mission-reward strong {
    color: #f8fafc;
    font-size: 0.9rem;
}

.training-mission-card .compact-form {
    display: grid;
}

.training-mission-card .button {
    min-height: 40px;
}

.training-mission-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    touch-action: manipulation;
}

.training-mission-card.completed .training-mission-action:disabled {
    border-color: rgba(34, 197, 94, 0.42);
    color: #dcfce7;
    opacity: 1;
}

.training-mission-complete-mark {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #22c55e;
    color: #03130a;
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.34);
}

@media (max-width: 760px) {
    .fleet-configuration-dialog,
    .repair-hangar-dialog,
    .training-camp-dialog,
    .research-dialog,
    .shipyard-dialog {
        width: 100vw;
        max-width: none;
        height: min(94dvh, 920px);
        max-height: 94dvh;
        margin: auto 0 0;
        padding: 14px 12px calc(16px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
    }

    .fleet-configuration-dialog-head,
    .repair-hangar-dialog-head,
    .research-dialog-head,
    .shipyard-dialog-head {
        top: -14px;
        margin: -14px -12px 12px;
        padding: 14px 54px 12px 14px;
    }

    .fleet-configuration-tabs {
        display: flex;
        gap: 8px;
        margin-inline: -2px;
        padding: 2px 2px 5px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .fleet-configuration-tab {
        flex: 0 0 min(72vw, 220px);
        min-height: 68px;
        scroll-snap-align: start;
    }

    .fleet-configuration-dialog > [data-fleet-configuration-notice],
    .repair-hangar-dialog > [data-repair-hangar-notice],
    .research-dialog > [data-research-notice],
    .shipyard-dialog > [data-shipyard-notice] {
        top: 66px;
    }

    .research-dialog-body {
        min-height: calc(94dvh - 92px - env(safe-area-inset-bottom));
    }

    .shipyard-dialog-body {
        min-height: calc(94dvh - 92px - env(safe-area-inset-bottom));
    }

    .shipyard-dialog-head {
        gap: 8px;
        padding-right: 12px;
        overflow: hidden;
    }

    .shipyard-dialog-head > div:first-child {
        min-width: 0;
    }

    .shipyard-dialog-head > div:first-child > p:last-child {
        display: none;
    }

    .research-dialog-head h2 {
        font-size: 1.25rem;
    }

    .research-dialog-head p:last-child {
        font-size: 0.82rem;
    }

    .fleet-configuration-command {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .fleet-configuration-command-visual {
        min-height: 96px;
    }

    .fleet-configuration-command-visual img {
        height: 96px;
    }

    .fleet-configuration-readiness {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 11px 12px;
    }

    .fleet-configuration-readiness .button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .fleet-configuration-title-row {
        display: grid;
        justify-items: start;
    }

    .fleet-configuration-dialog-defense {
        max-width: 100%;
    }

    .fleet-configuration-defense-switch {
        grid-template-columns: 52px minmax(128px, 1fr);
    }

    .fleet-configuration-bonus-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fleet-configuration-commander-grid,
    .fleet-configuration-combat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fleet-configuration-slot-grid {
        grid-template-columns: 1fr;
    }

    .fleet-configuration-foldout > summary,
    .fleet-configuration-commanders > header,
    .fleet-configuration-slots-head {
        display: grid;
    }

    .fleet-configuration-picker {
        bottom: 0;
        width: 100vw;
        max-width: none;
        max-height: 82dvh;
        padding: 12px 10px calc(14px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
    }

    .fleet-configuration-picker > header {
        top: -12px;
        margin: -12px -10px 10px;
    }

    .fleet-configuration-choice-list {
        grid-template-columns: 1fr;
    }

    .fleet-configuration-form > footer {
        width: 100%;
    }

    .repair-hangar-dialog-body {
        grid-template-columns: 1fr;
    }

    .repair-hangar-group {
        grid-template-rows: auto auto auto;
        padding: 12px;
    }

    .repair-hangar-damage-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .repair-hangar-damage-row > span:last-child {
        grid-column: 1 / -1;
    }

    .training-camp-dialog-head {
        top: -14px;
        margin: -14px -12px 12px;
        padding: 14px 54px 12px 14px;
    }

    .training-camp-dialog > [data-training-camp-notice] {
        top: 66px;
    }

    .training-camp-dialog-head h2 {
        font-size: 1.25rem;
    }

    .training-camp-dialog-head p:last-child {
        font-size: 0.82rem;
    }

    .training-camp-milestone {
        top: calc(68px + env(safe-area-inset-top));
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 92px - env(safe-area-inset-top));
        padding: 12px 44px 12px 12px;
    }

    .training-camp-panel {
        gap: 12px;
    }

    .training-camp-head {
        display: grid;
        gap: 10px;
    }

    .training-camp-badge {
        width: fit-content;
    }

    .training-camp-pool {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .training-milestone-progress {
        grid-template-columns: 1fr;
    }

    .training-mission-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .training-mission-card {
        min-height: 0;
        padding: 12px;
    }

    .training-mission-card .button {
        width: 100%;
        min-height: 44px;
    }
}

.commander-source-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.commander-source-card {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 132px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 8px;
    padding: 12px;
    color: var(--text);
    text-decoration: none;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.74)),
        rgba(15, 23, 42, 0.76);
}

.commander-source-card.primary {
    border-color: rgba(245, 158, 11, 0.48);
    background:
        radial-gradient(circle at 86% 16%, rgba(245, 158, 11, 0.2), transparent 34%),
        linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(2, 6, 23, 0.78));
}

.commander-source-card strong {
    font-size: 1rem;
}

.commander-source-card span {
    color: var(--muted);
    line-height: 1.45;
}

.commander-source-card:hover {
    border-color: rgba(91, 215, 255, 0.5);
}

.commander-slot-card,
.commander-card {
    border: 2px solid rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.72);
    border-radius: 8px;
    padding: 12px;
}

.commander-slot-card {
    display: grid;
    gap: 8px;
    text-align: left;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

.commander-slot-card.empty {
    min-height: 132px;
    place-items: center;
    align-content: center;
    justify-content: center;
    text-align: center;
}

.commander-slot-card.empty .fleet-slot-plus {
    margin: 0 auto;
}

.commander-slot-card:disabled {
    cursor: default;
    opacity: 0.72;
}

.commander-card-list {
    display: grid;
    gap: 10px;
}

.commander-hub-dialog {
    position: relative;
    width: min(1180px, calc(100vw - 32px));
    max-width: none;
    height: min(900px, calc(100dvh - 32px));
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 18px;
    overflow: auto;
    border: 1px solid rgba(91, 215, 255, 0.34);
    border-radius: 12px;
    color: var(--text);
    background: rgba(5, 12, 24, 0.99);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
}

.commander-hub-dialog[open] {
    display: block;
}

.game-overlay.has-reward-reveal {
    overflow: hidden;
}

.commander-hub-dialog::backdrop {
    background: rgba(1, 5, 12, 0.72);
    backdrop-filter: blur(4px);
}

.commander-hub-dialog-head {
    position: sticky;
    top: -18px;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: -18px -18px 16px;
    padding: 18px 58px 14px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(5, 12, 24, 0.99), rgba(5, 12, 24, 0.94));
    backdrop-filter: blur(12px);
}

.commander-hub-dialog-head h2,
.commander-hub-dialog-head p {
    margin: 0;
}

.commander-hub-dialog-head > div {
    display: grid;
    gap: 4px;
}

.commander-hub-dialog-head > div > p:last-child {
    color: var(--muted);
}

.commander-hub-dialog-head .dialog-close {
    position: absolute;
    top: 14px;
    right: 14px;
}

.commander-hub-dialog > [data-commanders-notice] {
    position: sticky;
    top: 76px;
    z-index: 5;
    margin-bottom: 12px;
}

.commander-hub-dialog-body {
    position: relative;
    min-height: 540px;
}

.reward-reveal {
    --reward-reveal-color: #94a3b8;
    position: absolute;
    z-index: 20;
    inset: 0;
    display: grid;
    place-items: center;
    min-height: 100%;
    padding: 28px;
    overflow: hidden;
    border-radius: inherit;
    background:
        radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--reward-reveal-color) 28%, transparent), transparent 34%),
        radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.995) 70%);
    isolation: isolate;
}

.reward-reveal[hidden] {
    display: none;
}

.reward-reveal::before {
    position: absolute;
    z-index: -3;
    width: min(860px, 108vw);
    aspect-ratio: 1;
    content: "";
    opacity: 0;
    background: repeating-conic-gradient(
        from 0deg,
        transparent 0deg 10deg,
        color-mix(in srgb, var(--reward-reveal-color) 16%, transparent) 12deg 14deg,
        transparent 16deg 28deg
    );
    mask-image: radial-gradient(circle, transparent 0 20%, #000 42%, transparent 72%);
}

.reward-reveal.is-active::before {
    animation: reward-reveal-beams 2.8s cubic-bezier(0.16, 0.8, 0.24, 1) both;
}

.reward-reveal-radiance,
.reward-reveal-radiance::before,
.reward-reveal-radiance::after {
    position: absolute;
    z-index: -2;
    width: min(520px, 78vw);
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--reward-reveal-color) 72%, transparent);
    border-radius: 50%;
    content: "";
    box-shadow:
        0 0 38px color-mix(in srgb, var(--reward-reveal-color) 34%, transparent),
        inset 0 0 38px color-mix(in srgb, var(--reward-reveal-color) 18%, transparent);
    opacity: 0;
}

.reward-reveal-radiance::before {
    inset: 8%;
    width: auto;
}

.reward-reveal-radiance::after {
    inset: 18%;
    width: auto;
}

.reward-reveal.is-active .reward-reveal-radiance,
.reward-reveal.is-active .reward-reveal-radiance::before,
.reward-reveal.is-active .reward-reveal-radiance::after {
    animation: reward-reveal-radiance 1.45s cubic-bezier(0.18, 0.82, 0.25, 1) both;
}

.reward-reveal.is-active .reward-reveal-radiance::before { animation-delay: 110ms; }
.reward-reveal.is-active .reward-reveal-radiance::after { animation-delay: 220ms; }

.reward-reveal-particles {
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
}

.reward-reveal-particles i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 20px;
    border-radius: 999px;
    background: var(--reward-reveal-color);
    box-shadow: 0 0 12px var(--reward-reveal-color);
    opacity: 0;
}

.reward-reveal.is-active .reward-reveal-particles i {
    animation: reward-reveal-spark 1.15s cubic-bezier(0.12, 0.72, 0.3, 1) both;
    animation-delay: calc(260ms + var(--particle-index) * 32ms);
}

.reward-reveal-card {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 8px;
    width: min(390px, 88vw);
    padding: 20px 22px 18px;
    text-align: center;
    opacity: 0;
}

.reward-reveal.is-active .reward-reveal-card {
    animation: reward-reveal-card-arrive 900ms cubic-bezier(0.14, 0.88, 0.22, 1.08) 160ms both;
}

.reward-reveal-card .eyebrow {
    margin: 0;
    color: color-mix(in srgb, var(--reward-reveal-color) 78%, white);
    letter-spacing: 0.18em;
}

.reward-reveal-image {
    position: relative;
    width: min(270px, 56vw);
    aspect-ratio: 4 / 5;
    margin: 2px 0 6px;
    overflow: hidden;
    border: 3px solid var(--reward-reveal-color);
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--reward-reveal-color) 24%, transparent), transparent 48%),
        rgba(2, 6, 23, 0.94);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.18),
        0 0 42px color-mix(in srgb, var(--reward-reveal-color) 62%, transparent),
        0 28px 70px rgba(0, 0, 0, 0.58);
}

.reward-reveal.is-square .reward-reveal-image {
    width: min(300px, 62vw);
    aspect-ratio: 1;
}

.reward-reveal-image::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.7) 48%, transparent 70%);
    transform: translateX(-140%);
}

.reward-reveal.is-active .reward-reveal-image::after {
    animation: reward-reveal-sheen 1.1s ease 620ms both;
}

.reward-reveal-image img,
.reward-reveal-image > span {
    width: 100%;
    height: 100%;
}

.reward-reveal-image img {
    display: block;
    object-fit: cover;
}

.reward-reveal-image > span {
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--reward-reveal-color) 74%, white);
    font-size: clamp(3rem, 12vw, 6rem);
    font-weight: 900;
}

.reward-reveal-image > span[hidden],
.reward-reveal-image img[hidden] {
    display: none;
}

.reward-reveal-card h3,
.reward-reveal-card > p {
    margin: 0;
}

.reward-reveal-card h3 {
    color: #f8fafc;
    font-size: clamp(1.35rem, 3.6vw, 2rem);
    text-shadow: 0 0 22px color-mix(in srgb, var(--reward-reveal-color) 54%, transparent);
}

.reward-reveal-card > p:not(.eyebrow) {
    color: color-mix(in srgb, var(--reward-reveal-color) 54%, #e2e8f0);
    font-weight: 800;
}

.reward-reveal-card .button {
    min-width: 150px;
    margin-top: 8px;
    border-color: color-mix(in srgb, var(--reward-reveal-color) 68%, white);
    box-shadow: 0 0 22px color-mix(in srgb, var(--reward-reveal-color) 28%, transparent);
}

@keyframes reward-reveal-beams {
    0% { opacity: 0; transform: rotate(-18deg) scale(0.58); }
    24% { opacity: 0.95; }
    100% { opacity: 0.34; transform: rotate(42deg) scale(1); }
}

@keyframes reward-reveal-radiance {
    0% { opacity: 0; transform: scale(0.34); }
    58% { opacity: 0.9; }
    100% { opacity: 0.32; transform: scale(1.18); }
}

@keyframes reward-reveal-spark {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--particle-index) * 22.5deg)) translateY(-24px) scaleY(0.2); }
    24% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--particle-index) * 22.5deg)) translateY(-250px) scaleY(0.65); }
}

@keyframes reward-reveal-card-arrive {
    0% { opacity: 0; filter: brightness(2.4) blur(10px); transform: translateY(34px) scale(0.72); }
    58% { opacity: 1; filter: brightness(1.32) blur(0); transform: translateY(-4px) scale(1.035); }
    100% { opacity: 1; filter: brightness(1) blur(0); transform: translateY(0) scale(1); }
}

@keyframes reward-reveal-sheen {
    from { transform: translateX(-140%); }
    to { transform: translateX(140%); }
}

@media (prefers-reduced-motion: reduce) {
    .reward-reveal.is-active::before,
    .reward-reveal.is-active .reward-reveal-radiance,
    .reward-reveal.is-active .reward-reveal-radiance::before,
    .reward-reveal.is-active .reward-reveal-radiance::after,
    .reward-reveal.is-active .reward-reveal-card,
    .reward-reveal.is-active .reward-reveal-image::after {
        animation: none;
    }

    .reward-reveal.is-active::before,
    .reward-reveal.is-active .reward-reveal-radiance {
        opacity: 0.28;
    }

    .reward-reveal.is-active .reward-reveal-card {
        opacity: 1;
    }

    .reward-reveal-particles {
        display: none;
    }
}

.commander-panel-root {
    display: grid;
    gap: 14px;
}

.commander-roster-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.commander-roster-summary span,
.commander-roster-summary strong {
    padding: 5px 8px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(15, 23, 42, 0.66);
    font-size: 0.76rem;
}

.commander-roster-summary strong {
    border-color: rgba(34, 197, 94, 0.42);
    color: #dcfce7;
}

.commander-recruitment-panel > summary {
    cursor: pointer;
    list-style: none;
}

.commander-recruitment-panel > summary::-webkit-details-marker {
    display: none;
}

.commander-recruitment-panel > summary::after {
    content: '+';
    font-size: 1.25rem;
}

.commander-recruitment-panel[open] > summary::after {
    content: '−';
}

.commander-hub-dialog .commander-detail-sheet {
    position: absolute;
    z-index: 8;
    inset: 0;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    min-height: 100%;
    margin: 0;
    padding: 16px;
    overflow: auto;
    border: 0;
    border-radius: 0;
    background: rgba(5, 12, 24, 0.995);
    box-shadow: none;
}

.commander-hub-dialog .commander-detail-sheet[hidden] {
    display: none;
}

.commander-hub-dialog .commander-detail-sheet > .dialog-close {
    top: 0;
    margin-bottom: 8px;
}

.commander-roster-tools {
    display: flex;
    gap: 12px;
    align-items: center;
}

.commander-roster-tools {
    justify-content: flex-start;
    margin-bottom: 12px;
}

.commander-filter-chips {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 2px;
    scrollbar-width: thin;
}

.commander-filter-chips button {
    min-height: 40px;
    padding: 7px 12px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(15, 23, 42, 0.72);
    white-space: nowrap;
}

.commander-filter-chips button.active {
    border-color: rgba(91, 215, 255, 0.7);
    color: #e0f2fe;
    background: rgba(14, 116, 144, 0.24);
}

.commander-compact-roster {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.commander-card-compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding: 8px;
}

.commander-card-compact[hidden] {
    display: none;
}

.commander-card-compact > :not(.commander-card-art):not(.commander-card-compact-progress) {
    display: none;
}

.commander-card-compact .commander-card-art {
    width: 100%;
    height: auto;
}

.commander-card-portrait-button {
    display: block;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: inherit;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.18s ease, filter 0.18s ease, transform 0.18s ease;
}

.commander-card-portrait-button:hover,
.commander-card-portrait-button:focus-visible {
    border-color: rgba(224, 242, 254, 0.82);
    filter: brightness(1.06);
    transform: translateY(-1px);
    outline: 2px solid rgba(91, 215, 255, 0.5);
    outline-offset: 2px;
}

.commander-card-compact-progress {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.commander-card-compact-progress > span {
    display: grid;
    gap: 1px;
    min-width: 0;
    padding: 6px 7px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 6px;
    background: rgba(2, 6, 23, 0.48);
}

.commander-card-compact-progress small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commander-card-compact-progress strong {
    color: #f8fafc;
    font-size: 0.85rem;
}

.commander-card-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 10px;
    color: var(--muted);
    font-size: 0.75rem;
}

.commander-card-status strong {
    color: #e0f2fe;
}

.commander-card-status.is-ready span {
    color: #86efac;
}

.commander-card-status.is-assigned span {
    color: #fde68a;
}

.commander-detail-dialog {
    width: min(760px, calc(100vw - 32px));
    height: min(780px, calc(100vh - 32px));
    max-height: min(88vh, 900px);
    overflow: auto;
    color: var(--text);
    background: var(--panel-strong);
    border: 1px solid rgba(91, 215, 255, 0.34);
    border-radius: 10px;
}

.commander-detail-dialog::backdrop {
    background: rgba(2, 6, 23, 0.76);
}

.commander-detail-dialog > .dialog-close {
    position: sticky;
    top: 0;
    float: right;
    z-index: 5;
}

.commander-detail-dialog .commander-card {
    clear: both;
}

.commander-card-detail {
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: start;
    min-height: 680px;
}

.commander-card-detail .commander-card-art {
    grid-column: 1;
    grid-row: 1 / span 5;
    width: 180px;
    max-height: 225px;
    cursor: default;
}

.commander-card-detail .commander-card-compact-progress {
    display: none;
}

.commander-card-detail .commander-card-heading,
.commander-card-detail .commander-card-status,
.commander-card-detail .commander-star-rows,
.commander-card-detail .commander-core-stats,
.commander-card-detail .commander-xp-progress,
.commander-card-detail .commander-xp-label {
    grid-column: 2;
}

.commander-card-detail > :not(.commander-card-art):not(.commander-card-heading):not(.commander-card-status):not(.commander-star-rows):not(.commander-core-stats):not(.commander-xp-progress):not(.commander-xp-label):not(.commander-star-info) {
    grid-column: 1 / -1;
}

.commander-xp-item-form [data-commander-xp-preview] {
    color: #a7f3d0;
}

.commander-xp-submit-row {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 12px;
}

.commander-xp-development,
.commander-development-state {
    display: grid;
    gap: 9px;
}

.commander-xp-development {
    grid-column: 1 / -1;
    min-height: 116px;
    padding: 12px;
    border: 1px solid rgba(91, 215, 255, 0.24);
    border-radius: 9px;
    background: rgba(8, 145, 178, 0.07);
}

.commander-development-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.commander-development-heading > span {
    color: #c4b5fd;
    font-weight: 800;
}

.commander-development-state {
    grid-column: 1 / -1;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    color: var(--muted);
    background: rgba(15, 23, 42, 0.5);
}

.commander-development-state strong {
    color: var(--text);
}

.commander-development-state.is-complete {
    border-color: rgba(167, 139, 250, 0.28);
    background: rgba(76, 29, 149, 0.1);
}

.commander-daily-reward {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0 14px;
    padding: 12px;
    border: 1px solid rgba(91, 215, 255, 0.3);
    border-radius: 9px;
    background: linear-gradient(120deg, rgba(8, 145, 178, 0.13), rgba(30, 41, 59, 0.38));
}

.commander-daily-reward > div {
    display: grid;
    gap: 3px;
}

.commander-daily-reward span {
    color: var(--muted);
}

.commander-xp-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 8px;
    grid-column: 1 / -1;
}

.commander-xp-item-choice {
    position: relative;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.7);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}

.commander-xp-item-choice:hover,
.commander-xp-item-choice:has(input:focus-visible) {
    border-color: rgba(91, 215, 255, 0.72);
}

.commander-xp-item-choice:has(input:checked) {
    border-color: #5bd7ff;
    background: rgba(8, 145, 178, 0.2);
    box-shadow: inset 0 0 0 1px rgba(91, 215, 255, 0.24);
}

.commander-xp-item-choice:has(input:disabled) {
    opacity: 0.45;
    cursor: default;
}

.commander-xp-item-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.commander-xp-item-choice > span,
.commander-xp-item-choice small {
    display: grid;
    gap: 3px;
}

.commander-xp-item-choice small {
    color: var(--muted);
}

.commander-xp-slider-label {
    display: grid;
    grid-column: 1 / -1;
    gap: 7px;
    padding: 10px 2px 2px;
}

.commander-xp-slider-label > span {
    display: flex;
    justify-content: space-between;
}

.commander-xp-slider-label input[type="range"] {
    width: 100%;
    min-height: 32px;
    accent-color: #5bd7ff;
    cursor: pointer;
}

.commander-supply-panel > summary {
    cursor: pointer;
    list-style: none;
}

.commander-supply-panel > summary::-webkit-details-marker {
    display: none;
}

.commander-supply-panel > summary::after {
    content: "+";
    font-size: 1.25rem;
}

.commander-supply-panel[open] > summary::after {
    content: "−";
}

.commander-xp-quick-actions,
.commander-source-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.commander-xp-quick-actions {
    grid-column: 1 / -1;
}

.commander-xp-quick-actions .button {
    min-height: 36px;
    font-size: 0.78rem;
}

.commander-card {
    display: grid;
    gap: 8px;
    position: relative;
    z-index: 0;
    overflow: visible;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 14px 34px rgba(0, 0, 0, 0.18);
}

.commander-card:has(.commander-star-info[open]) {
    z-index: 40;
}

.commander-star-info {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 41;
}

.commander-star-info summary {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    cursor: pointer;
    list-style: none;
    color: #e0f2fe;
    background: rgba(2, 6, 23, 0.78);
    border: 1px solid rgba(125, 211, 252, 0.56);
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.32);
    font-size: 0.85rem;
    font-weight: 900;
    line-height: 1;
}

.commander-star-info summary::-webkit-details-marker {
    display: none;
}

.commander-star-info[open] summary,
.commander-star-info summary:hover {
    border-color: rgba(250, 204, 21, 0.78);
    color: #fef3c7;
}

.commander-star-info-panel {
    position: absolute;
    top: 34px;
    right: 0;
    width: min(430px, calc(100vw - 48px));
    max-height: min(620px, 72vh);
    overflow: auto;
    display: grid;
    gap: 7px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(2, 6, 23, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.38);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

.commander-detail-dialog .commander-star-info-panel {
    position: fixed;
    top: 50%;
    right: auto;
    left: 50%;
    width: min(430px, calc(100vw - 48px));
    max-height: calc(100vh - 64px);
    transform: translate(-50%, -50%);
}

.commander-star-info-panel > strong {
    font-size: 0.88rem;
}

.commander-star-info-row {
    display: grid;
    gap: 2px;
    padding: 7px 8px;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.72);
}

.commander-star-info-row span {
    font-weight: 800;
    color: #f8fafc;
}

.commander-star-info-row small {
    color: var(--muted);
    line-height: 1.35;
}

.commander-star-effect-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.commander-star-effect-list li {
    display: grid;
    gap: 2px;
}

.commander-star-effect-list li span {
    color: #e2e8f0;
    font-weight: 700;
}

.commander-star-effect-list li b {
    color: #f8fafc;
}

.commander-star-effect-list li strong {
    color: #fef3c7;
}

.commander-star-effect-list li em {
    color: #94a3b8;
    font-size: 0.78rem;
    font-style: normal;
    line-height: 1.35;
}

.commander-star-info-row.active {
    border-color: rgba(250, 204, 21, 0.38);
    background: rgba(250, 204, 21, 0.08);
}

.commander-card-art {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 6px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 28%, rgba(91, 215, 255, 0.18), transparent 42%),
        linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.94));
    border: 1px solid rgba(148, 163, 184, 0.22);
}

.commander-card-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.commander-card-art.is-placeholder {
    display: grid;
    place-items: center;
    min-height: 180px;
}

.commander-card-art.is-placeholder span {
    width: 58px;
    height: 58px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: rgba(226, 232, 240, 0.76);
    border: 1px solid rgba(148, 163, 184, 0.28);
    font-size: 1.6rem;
    font-weight: 800;
}

.commander-card > div:first-child,
.commander-slot-card.filled > span {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.commander-card.rarity-common,
.commander-slot-card.rarity-common,
.training-mission-card.rarity-common {
    border-color: rgba(148, 163, 184, 0.35);
    background:
        linear-gradient(180deg, rgba(148, 163, 184, 0.08), transparent 46%),
        rgba(15, 23, 42, 0.72);
}

.commander-card.rarity-uncommon,
.commander-slot-card.rarity-uncommon,
.training-mission-card.rarity-uncommon {
    border-color: rgba(34, 197, 94, 0.65);
    background:
        linear-gradient(180deg, rgba(34, 197, 94, 0.1), transparent 46%),
        rgba(15, 23, 42, 0.72);
}

.commander-card.rarity-rare,
.commander-slot-card.rarity-rare,
.training-mission-card.rarity-rare {
    border-color: rgba(56, 189, 248, 0.65);
    background:
        linear-gradient(180deg, rgba(56, 189, 248, 0.11), transparent 46%),
        rgba(15, 23, 42, 0.72);
}

.commander-card.rarity-epic,
.commander-slot-card.rarity-epic,
.training-mission-card.rarity-epic {
    border-color: rgba(168, 85, 247, 0.72);
    background:
        linear-gradient(180deg, rgba(168, 85, 247, 0.13), transparent 46%),
        rgba(15, 23, 42, 0.72);
}

.commander-card.rarity-legendary,
.commander-slot-card.rarity-legendary,
.training-mission-card.rarity-legendary {
    border-color: rgba(245, 158, 11, 0.78);
    background:
        linear-gradient(180deg, rgba(245, 158, 11, 0.13), transparent 46%),
        rgba(15, 23, 42, 0.72);
}

.training-mission-card.milestone-tier-bronze {
    --training-milestone-color: #c9824a;
    border-color: rgba(201, 130, 74, 0.72);
    box-shadow: inset 4px 0 0 rgba(201, 130, 74, 0.88), 0 14px 34px rgba(0, 0, 0, 0.18);
}

.training-mission-card.milestone-tier-silver {
    --training-milestone-color: #b9d5e6;
    border-color: rgba(185, 213, 230, 0.72);
    box-shadow: inset 4px 0 0 rgba(185, 213, 230, 0.88), 0 14px 34px rgba(0, 0, 0, 0.18);
}

.training-mission-card.milestone-tier-gold {
    --training-milestone-color: #f2bd3d;
    border-color: rgba(242, 189, 61, 0.78);
    box-shadow: inset 4px 0 0 rgba(242, 189, 61, 0.92), 0 14px 34px rgba(0, 0, 0, 0.18);
}

.commander-card-on-mission {
    box-shadow:
        inset 0 0 0 1px rgba(250, 204, 21, 0.18),
        0 0 0 1px rgba(250, 204, 21, 0.16),
        0 16px 34px rgba(0, 0, 0, 0.24);
}

.commander-card-on-mission .commander-card-art img {
    filter: saturate(0.82) brightness(0.9);
}

.commander-mission-lock {
    border: 1px solid rgba(250, 204, 21, 0.28);
    border-radius: 6px;
    padding: 8px 10px;
    background: rgba(250, 204, 21, 0.08);
    color: #fde68a;
    font-size: 0.82rem;
    line-height: 1.35;
}

.commander-star-rows {
    display: grid;
    gap: 5px;
}

.commander-star-track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--muted);
}

.commander-stars {
    display: inline-flex;
    gap: 2px;
    font-size: 1.08rem;
    line-height: 1;
}

.commander-star {
    position: relative;
    color: rgba(100, 116, 139, 0.46);
    width: 1em;
    display: inline-block;
}

.commander-star::before {
    content: "★";
    position: absolute;
    inset: 0;
    overflow: hidden;
    width: 0;
    color: var(--star-color);
}

.commander-star.full::before {
    width: 100%;
}

.commander-star.half::before {
    width: 50%;
}

.commander-star-track.fragment-stars {
    --star-color: #f59e0b;
}

.commander-star-track.xp-stars {
    --star-color: #a855f7;
}

.commander-card-locked {
    opacity: 0.54;
    filter: grayscale(0.7);
}

.commander-card-locked::after {
    content: "";
    position: absolute;
    left: -32%;
    right: -32%;
    top: 50%;
    border-top: 2px solid rgba(248, 113, 113, 0.72);
    transform: rotate(-48deg);
    transform-origin: center;
    pointer-events: none;
}

.commander-card-recruitable {
    opacity: 1;
    filter: none;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(91, 215, 255, 0.24),
        0 18px 42px rgba(0, 0, 0, 0.24);
}

.commander-card-recruitable::before {
    content: "Bereit";
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    padding: 3px 8px;
    border: 1px solid rgba(91, 215, 255, 0.42);
    border-radius: 999px;
    background: rgba(7, 16, 24, 0.86);
    color: #a7f3ff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (min-width: 761px) and (max-width: 1050px) {
    .commander-compact-roster {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .commander-hub-dialog {
        width: 100vw;
        max-width: none;
        height: 94dvh;
        max-height: 94dvh;
        margin: auto 0 0;
        padding: 14px 12px calc(16px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
    }

    .commander-hub-dialog-head {
        top: -14px;
        margin: -14px -12px 12px;
        padding: 14px 54px 12px 14px;
    }

    .commander-hub-dialog > [data-commanders-notice] {
        top: 66px;
    }

    .commander-hub-dialog-body {
        min-height: calc(94dvh - 92px - env(safe-area-inset-bottom));
    }

    .reward-reveal {
        padding: 18px 12px calc(18px + env(safe-area-inset-bottom));
    }

    .reward-reveal-card {
        gap: 6px;
        padding: 12px;
    }

    .reward-reveal-image {
        width: auto;
        height: min(48dvh, 338px);
    }

    .commander-roster-summary {
        justify-content: flex-start;
    }

    .commander-roster-tools {
        display: grid;
        grid-template-columns: 1fr;
    }

    .commander-daily-reward {
        align-items: stretch;
        display: grid;
    }

    .commander-daily-reward .button {
        width: 100%;
    }

    .commander-xp-submit-row {
        align-items: stretch;
        flex-direction: column;
    }

    .commander-xp-submit-row .button {
        width: 100%;
    }

    .commander-filter-chips {
        margin-inline: -4px;
    }

    .commander-collection-grid.commander-compact-roster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .commander-card-compact {
        grid-template-columns: minmax(0, 1fr);
        padding: 6px;
    }

    .commander-card-compact .commander-card-art {
        width: 100%;
        height: auto;
    }

    .commander-card-compact-progress {
        gap: 4px;
    }

    .commander-card-compact-progress > span {
        padding: 5px;
    }

    .commander-card-compact-progress small {
        font-size: 0.62rem;
    }

    .commander-card-compact-progress strong {
        font-size: 0.78rem;
    }

    .commander-detail-dialog {
        width: 100vw;
        height: 86vh;
        max-width: none;
        max-height: 86vh;
        margin: auto 0 0;
        border-radius: 16px 16px 0 0;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }

    .commander-card-detail {
        grid-template-columns: 112px minmax(0, 1fr);
        min-height: calc(86vh - 72px);
    }

    .commander-card-detail .commander-card-art {
        width: 112px;
        height: 140px;
        grid-row: 1 / span 4;
    }

    .commander-collection-panel {
        margin-bottom: 14px;
    }

    .commander-source-grid,
    .commander-collection-grid,
    .commander-slot-grid,
    .commander-page-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .commander-source-card {
        min-height: 0;
    }

    .commander-source-card .button,
    .commander-card .button {
        width: 100%;
        min-height: 44px;
        white-space: normal;
    }

    .commander-card {
        padding: 11px;
        gap: 9px;
    }

    .commander-card-art {
        max-height: 260px;
    }

    .commander-card-art.is-placeholder {
        min-height: 150px;
    }

    .commander-card > div:first-child,
    .commander-slot-card.filled > span {
        display: grid;
        gap: 4px;
    }

    .commander-card .fleet-detail-meta {
        gap: 6px;
    }

    .commander-card .fleet-detail-meta span {
        min-height: 30px;
        align-content: center;
    }

    .commander-star-track {
        align-items: start;
        display: grid;
        gap: 4px;
    }

    .commander-star-info {
        top: 10px;
        right: 10px;
    }

    .commander-detail-dialog .commander-star-info-panel {
        position: fixed;
        top: calc(var(--sticky-offset, 74px) + 16px);
        right: 12px;
        left: 12px;
        width: auto;
        max-height: min(70vh, 560px);
        transform: none;
        overscroll-behavior: contain;
    }

    .commander-xp-item-form,
    .commander-card .compact-form,
    .commander-card .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

}

.progress-bar {
    height: 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.9);
    overflow: hidden;
}

.progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #38bdf8, #a78bfa);
}

.fleet-detail-meta span {
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(7, 16, 24, 0.64);
    color: #dce7f1;
    font-size: 0.84rem;
    font-weight: 700;
}

.fleet-readiness-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin: 14px 0;
    padding: 16px;
    border: 1px solid rgba(97, 211, 148, 0.38);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(97, 211, 148, 0.13), rgba(8, 20, 29, 0.88));
}

.fleet-readiness-card > div,
.fleet-profile-card > div:first-child {
    display: grid;
    gap: 4px;
}

.fleet-readiness-card > div > span,
.fleet-readiness-card small,
.fleet-profile-card small {
    color: var(--muted);
}

.fleet-readiness-card > div > strong {
    font-size: 1.15rem;
}

.fleet-readiness-card.warning { border-color: rgba(250, 204, 21, 0.44); background: linear-gradient(135deg, rgba(250, 204, 21, 0.12), rgba(8, 20, 29, 0.88)); }
.fleet-readiness-card.blocked { border-color: rgba(248, 113, 113, 0.46); background: linear-gradient(135deg, rgba(248, 113, 113, 0.12), rgba(8, 20, 29, 0.88)); }
.fleet-readiness-card.busy { border-color: rgba(91, 215, 255, 0.42); background: linear-gradient(135deg, rgba(91, 215, 255, 0.12), rgba(8, 20, 29, 0.88)); }

.fleet-profile-section {
    display: grid;
    gap: 12px;
    margin: 18px 0;
}

.fleet-profile-heading h3,
.fleet-profile-heading p { margin: 0; }
.fleet-profile-heading p { margin-top: 4px; color: var(--muted); }

.fleet-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.fleet-profile-card {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(5, 13, 22, 0.72);
}

.fleet-profile-card.saved { border-color: rgba(91, 215, 255, 0.3); }
.fleet-profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fleet-profile-actions form,
.fleet-profile-actions .button { width: 100%; }

.fleet-performance-details > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

.fleet-performance-details > summary::-webkit-details-marker { display: none; }
.fleet-performance-details > summary > span { display: grid; gap: 4px; }
.fleet-performance-details > summary small { color: var(--muted); font-weight: 500; }
.fleet-performance-details > summary b { color: var(--cyan); font-size: 0.82rem; }
.fleet-performance-details[open] > summary { margin-bottom: 14px; }

@media (max-width: 720px) {
    .fleet-readiness-card,
    .fleet-profile-grid { grid-template-columns: 1fr; }
    .fleet-readiness-card .button { width: 100%; min-height: 44px; }
    .fleet-profile-card { grid-template-columns: minmax(0, 1fr); }
    .fleet-profile-actions .button { min-height: 44px; white-space: normal; }
    .fleet-performance-details > summary { grid-template-columns: 1fr; }
    .fleet-performance-details > summary b { min-height: 44px; align-content: center; }
}

.fleet-defense-mode {
    justify-content: flex-start;
    max-width: max-content;
    margin: 10px 0 12px;
    padding: 8px 10px;
    border: 1px solid rgba(91, 215, 255, 0.22);
    border-radius: 8px;
    background: rgba(91, 215, 255, 0.07);
}

.fleet-defense-mode span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.fleet-specialization-panel {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px dashed rgba(91, 215, 255, 0.72);
    border-radius: 8px;
    background: rgba(91, 215, 255, 0.08);
}

.fleet-specialization-panel.tier-0 {
    border-color: rgba(91, 215, 255, 0.42);
    background: rgba(91, 215, 255, 0.06);
}

.fleet-specialization-panel.tier-1 {
    border-color: rgba(91, 215, 255, 0.82);
    background: rgba(91, 215, 255, 0.1);
}

.fleet-specialization-panel.tier-2 {
    border-style: solid;
    border-color: rgba(97, 211, 148, 0.82);
    background: rgba(97, 211, 148, 0.08);
}

.fleet-specialization-panel.just-unlocked {
    animation: specializationPulse 0.85s ease-out;
}

@keyframes specializationPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(91, 215, 255, 0.0);
        transform: scale(1);
    }
    32% {
        box-shadow: 0 0 0 5px rgba(91, 215, 255, 0.22), 0 0 28px rgba(91, 215, 255, 0.28);
        transform: scale(1.012);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(91, 215, 255, 0);
        transform: scale(1);
    }
}

.fleet-specialization-panel strong {
    color: var(--text);
}

.fleet-specialization-panel span,
.fleet-specialization-panel small {
    color: var(--muted);
}

.fleet-total-overview {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    background: rgba(7, 16, 24, 0.52);
}

.fleet-total-overview h3,
.fleet-total-overview p {
    margin: 0;
}

.fleet-total-overview p {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.fleet-total-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.fleet-total-grid span {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 8px;
    align-items: baseline;
    min-height: 62px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 7px;
    background: rgba(12, 24, 34, 0.72);
    cursor: help;
}

.fleet-total-grid small {
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0;
}

.fleet-total-grid strong {
    color: var(--text);
    font-size: 1.05rem;
    text-align: right;
}

.fleet-total-grid em {
    color: var(--muted);
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 800;
}

.fleet-stat-bonus {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-align: right;
}

.fleet-stat-bonus.positive {
    color: var(--green);
}

.fleet-stat-bonus.negative {
    color: #ff7d89;
}

.fleet-total-note {
    padding-top: 2px;
}

.fleet-ship-table {
    display: grid;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.fleet-slot-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.fleet-slot {
    min-height: 160px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(5, 12, 20, 0.42), rgba(5, 12, 20, 0.88)),
        rgba(7, 16, 24, 0.64);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.fleet-slot.command {
    grid-column: 1 / -1;
    min-height: 285px;
    border-color: rgba(242, 201, 76, 0.62);
}

.fleet-slot.command .fleet-slot-visual {
    min-height: 285px;
    align-content: stretch;
}

.fleet-slot.command [data-slot-count] {
    font-size: 1.35rem;
}

.command-ship-bonus-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
}

.command-ship-bonus-panel span,
.command-ship-bonus-panel strong {
    padding: 6px 8px;
    border: 1px solid rgba(242, 201, 76, 0.24);
    border-radius: 7px;
    background: rgba(7, 16, 24, 0.68);
    font-size: 0.82rem;
}

.command-ship-bonus-panel strong {
    width: 100%;
    color: #f8d66d;
}

.fleet-slot.drag-over {
    border-color: rgba(91, 215, 255, 0.82);
    box-shadow: 0 0 0 2px rgba(91, 215, 255, 0.16);
    transform: translateY(-1px);
}

.fleet-slot.filled {
    background:
        linear-gradient(180deg, rgba(5, 12, 20, 0.18), rgba(5, 12, 20, 0.9)),
        var(--slot-card-bg, linear-gradient(135deg, rgba(20, 42, 58, 0.78), rgba(7, 16, 24, 0.92)));
    background-position: center;
    background-size: cover;
}

.fleet-slot.filled::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 74% 20%, var(--slot-tier-glow, rgba(91, 215, 255, 0.26)), transparent 34%),
        linear-gradient(90deg, rgba(5, 12, 20, 0.74), transparent 58%);
    pointer-events: none;
}

.fleet-slot.level-tier-2 {
    --slot-tier-glow: rgba(97, 211, 148, 0.32);
    border-color: rgba(97, 211, 148, 0.38);
}

.fleet-slot.level-tier-3 {
    --slot-tier-glow: rgba(191, 132, 255, 0.34);
    border-color: rgba(191, 132, 255, 0.42);
}

.fleet-slot.level-tier-4 {
    --slot-tier-glow: rgba(255, 195, 92, 0.38);
    border-color: rgba(255, 195, 92, 0.5);
}

.fleet-slot.damaged {
    border-color: rgba(255, 91, 104, 0.74);
    box-shadow: inset 0 0 0 1px rgba(255, 91, 104, 0.24), 0 0 22px rgba(255, 91, 104, 0.12);
}

.fleet-slot.understrength:not(.damaged) {
    border-color: rgba(242, 201, 76, 0.62);
    box-shadow: inset 0 0 0 1px rgba(242, 201, 76, 0.18);
}

.fleet-slot-visual {
    min-height: 160px;
    height: 100%;
    position: relative;
    z-index: 1;
    display: grid;
    align-content: start;
    gap: 4px;
    padding: 12px;
}

.fleet-slot.empty .fleet-slot-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(7, 16, 24, 0.42);
}

.fleet-slot-plus {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(91, 215, 255, 0.52);
    border-radius: 50%;
    color: rgba(164, 230, 255, 0.92);
    font-size: 3rem;
    line-height: 1;
    font-weight: 800;
    padding-bottom: 0.08em;
}

.fleet-slot strong {
    color: var(--text);
    font-size: 0.98rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.78);
}

.fleet-slot [data-slot-count] {
    position: absolute;
    right: 12px;
    bottom: 12px;
    color: #ffffff;
    font-size: 2rem;
    line-height: 1;
    font-weight: 800;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.86);
}

.fleet-slot-level {
    display: block;
    color: var(--muted);
    font-weight: 800;
}

.fleet-slot small {
    color: var(--muted);
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.78);
}

.fleet-slot-state {
    justify-self: start;
    width: fit-content;
    padding: 5px 7px;
    border: 1px solid rgba(164, 230, 255, 0.2);
    border-radius: 7px;
    background: rgba(7, 16, 24, 0.72);
}

.fleet-slot-state.damaged {
    color: #ff9aa5;
    border-color: rgba(255, 91, 104, 0.34);
}

.fleet-slot-state.understrength {
    color: #f8d66d;
    border-color: rgba(242, 201, 76, 0.34);
}

.fleet-maintenance-actions {
    display: grid;
    gap: 8px;
    margin: 12px 0;
}

.fleet-choice-dialog {
    width: min(760px, calc(100vw - 28px));
    max-height: min(760px, calc(100vh - 28px));
    border: 1px solid rgba(91, 215, 255, 0.22);
    border-radius: 8px;
    background: #071018;
    color: var(--text);
    padding: 18px;
}

.fleet-choice-dialog::backdrop {
    background: rgba(0, 0, 0, 0.68);
}

.admin-json-picker-dialog {
    width: min(720px, calc(100vw - 28px));
    max-height: min(760px, calc(100vh - 28px));
    border: 1px solid rgba(91, 215, 255, 0.22);
    border-radius: 8px;
    background: #071018;
    color: var(--text);
    padding: 18px;
    overflow: auto;
}

.admin-json-picker-dialog::backdrop {
    background: rgba(0, 0, 0, 0.68);
}

.admin-json-picker-dialog h2 {
    margin: 0 0 14px;
}

.admin-json-picker-dialog input[type="search"] {
    width: 100%;
}

.veyr-completion-report-dialog {
    width: min(1180px, calc(100vw - 28px));
    max-height: calc(100vh - 28px);
}

.veyr-completion-report-dialog .admin-panel {
    margin: 0;
}

.dialog-heading-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
}

.json-field-tools {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 6px;
    align-items: start;
}

.json-field-tools textarea {
    min-width: 220px;
}

.inline-label-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    vertical-align: middle;
}

.admin-json-picker-list {
    display: grid;
    gap: 7px;
    margin-top: 12px;
}

.admin-json-picker-list button {
    display: grid;
    gap: 3px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.admin-json-picker-list [hidden] {
    display: none !important;
}

.admin-json-picker-list button:hover,
.admin-json-picker-list button:focus-visible {
    border-color: rgba(91, 215, 255, 0.42);
    background: rgba(91, 215, 255, 0.12);
}

.admin-json-picker-list span,
.admin-json-picker-list small {
    color: var(--muted);
}

.dialog-close {
    float: right;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(15, 23, 42, 0.9);
    color: var(--text);
    cursor: pointer;
}

.build-choice-dialog .dialog-close {
    position: absolute;
    right: 14px;
    top: 14px;
    float: none;
}

.upgrade-preview-dialog .dialog-close {
    position: absolute;
    right: 14px;
    top: 14px;
    float: none;
}

.fleet-dialog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.ship-choice,
.commander-choice {
    min-height: 112px;
    display: grid;
    align-content: end;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(5, 12, 20, 0.18), rgba(5, 12, 20, 0.92)),
        var(--ship-card-bg, rgba(15, 23, 42, 0.78));
    background-position: center;
    background-size: cover;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.ship-choice:disabled,
.commander-choice:disabled {
    opacity: 0.46;
    cursor: default;
}

.dialog-actions,
.compact-transfer-form {
    margin-top: 14px;
}

.fleet-ship-row {
    display: grid;
    grid-template-columns: 1.2fr 0.5fr 0.7fr 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--muted);
    font-size: 0.9rem;
}

.fleet-ship-row:first-child {
    border-top: 0;
}

.fleet-ship-row.header {
    background: rgba(91, 215, 255, 0.08);
    color: var(--text);
    font-weight: 800;
}

.fleet-ship-row small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.ship-upgrade-form {
    display: grid;
    grid-template-columns: minmax(118px, 0.8fr) minmax(140px, auto);
    gap: 6px;
    align-items: center;
    margin-top: 8px;
}

.ship-upgrade-quantity {
    display: grid;
    grid-template-columns: minmax(64px, 1fr) auto;
    gap: 6px;
}

.ship-upgrade-form input {
    min-width: 0;
}

.ship-upgrade-form small {
    grid-column: 1 / -1;
}

.inline-error {
    color: #ff9f9f;
}

.fleet-composition-form {
    display: grid;
    gap: 12px;
}

.fleet-composition-form input[type="number"] {
    width: 78px;
    min-height: 36px;
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #10202c;
    color: var(--text);
    font: inherit;
    font-weight: 800;
}

.map-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 1480px;
    margin: 28px auto 18px;
}

.map-stats article {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-strong);
}

.map-stats strong {
    display: block;
    font-size: 1.6rem;
}

.map-stats span {
    color: var(--muted);
}

.galaxy-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 1480px;
    margin: 0 auto 12px;
    flex-wrap: wrap;
}

.galaxy-toolbar .button {
    padding: 8px 12px;
}

.galaxy-toolbar .map-tool-button {
    position: relative;
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 1px;
    align-items: center;
    min-height: 42px;
}

.galaxy-toolbar .map-tool-button::before {
    grid-row: 1 / span 2;
}

.map-tool-label,
.map-tool-meta {
    min-width: 0;
    margin: 0;
    line-height: 1.08;
    text-align: left;
    white-space: nowrap;
}

.map-tool-label {
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 900;
}

.map-tool-label-mobile {
    display: none;
}

.map-tool-meta {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
}

.map-tool-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 1px solid rgba(91, 215, 255, 0.52);
    border-radius: 999px;
    background: rgba(7, 16, 24, 0.96);
    color: var(--cyan);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 950;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}

.galaxy-toolbar .button.active {
    border-color: var(--cyan);
    color: var(--text);
    background: rgba(91, 215, 255, 0.16);
}

.galaxy-toolbar > span {
    color: var(--muted);
    font-weight: 800;
}

.galaxy-toolbar > span + span {
    margin-left: 14px;
}

.toolbar-inline-form {
    margin: 0;
}

.toolbar-inline-form .button {
    min-height: 38px;
    padding: 8px 12px;
}

.galaxy-toolbar [data-map-coordinates] {
    margin-left: auto;
}

.map-live-message {
    max-width: 1480px;
    margin: -2px auto 12px;
    padding: 10px 12px;
    border: 1px solid rgba(91, 215, 255, 0.34);
    border-radius: 8px;
    background: rgba(13, 33, 45, 0.9);
    color: var(--text);
    font-weight: 800;
}

.map-visual-mode-status {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    max-width: 1480px;
    height: 30px;
    margin: -2px auto 12px;
    overflow: hidden;
    white-space: nowrap;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.map-visual-mode-status[hidden] {
    display: none;
}

.map-visual-mode-status span {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid rgba(91, 215, 255, 0.24);
    border-radius: 6px;
    background: rgba(8, 22, 31, 0.86);
}

.visual-poc-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    max-width: 1480px;
    margin: -6px auto 12px;
}

.visual-poc-controls .button {
    flex: 0 1 auto;
    width: auto;
    min-height: 44px;
    padding: 7px 11px;
    border-color: rgba(146, 193, 203, 0.26);
    background: rgba(8, 22, 31, 0.86);
    color: var(--muted);
    font-size: 0.76rem;
}

.visual-poc-controls .button.active {
    border-color: rgba(130, 207, 169, 0.72);
    background: rgba(30, 76, 68, 0.78);
    color: #e3fff1;
}

@media (max-width: 640px) {
    .visual-poc-controls {
        flex-wrap: nowrap;
    }

    .visual-poc-controls .button {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: 6px;
        font-size: 0.68rem;
    }
}

.map-live-message.error {
    border-color: rgba(255, 107, 107, 0.5);
    background: rgba(58, 20, 24, 0.9);
    color: #ffd4d4;
}

.galaxy-map {
    position: relative;
    max-width: 1480px;
    aspect-ratio: 1 / 0.72;
    min-height: 620px;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: auto;
    cursor: grab;
    user-select: none;
    touch-action: none;
    background: rgba(6, 14, 21, 0.92);
    scrollbar-color: rgba(91, 215, 255, 0.45) rgba(12, 24, 34, 0.82);
}

.map-admin-zoom-indicator {
    position: sticky;
    top: 10px;
    left: 50%;
    z-index: 380;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    width: max-content;
    height: 0;
    padding: 5px 9px;
    overflow: visible;
    transform: translateX(-50%);
    border: 1px solid rgba(91, 215, 255, 0.32);
    border-radius: 999px;
    background: rgba(3, 11, 18, 0.78);
    color: #dcecf0;
    font-size: 0.72rem;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(6px);
}

.map-admin-zoom-indicator strong {
    color: var(--cyan);
    font-size: 0.8rem;
}

.map-admin-zoom-indicator small {
    color: var(--muted);
    font-size: 0.66rem;
}

.galaxy-map.canvas-poi-hover {
    cursor: pointer;
}

.galaxy-map:focus-visible {
    outline: 2px solid rgba(91, 215, 255, 0.82);
    outline-offset: 2px;
}

.galaxy-map.map-initializing .galaxy-map-canvas {
    opacity: 0;
}

.galaxy-map.dragging {
    cursor: grabbing;
}

.galaxy-map-canvas {
    --field-grid-opacity: 0;
    --map-cell: calc(100% / 1000);
    --map-sector: calc(100% / 10);
    position: relative;
    width: max(100%, 620px);
    aspect-ratio: 1 / 1;
    min-width: 100%;
    min-height: 100%;
    background:
        radial-gradient(ellipse at 21% 24%, rgba(56, 111, 116, 0.16), transparent 28%),
        radial-gradient(ellipse at 73% 68%, rgba(86, 65, 115, 0.12), transparent 34%),
        radial-gradient(circle at 50% 50%, rgba(184, 156, 91, 0.08), transparent 13%),
        linear-gradient(135deg, rgba(6, 18, 25, 0.3), rgba(2, 8, 14, 0.68)),
        #041018;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.5);
}

.galaxy-map-canvas::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: none;
    box-shadow: inset 0 0 0 1px rgba(164, 205, 214, 0.08);
    pointer-events: none;
}

.map-object-actions {
    position: fixed;
    z-index: 185;
    display: flex;
    width: min(380px, calc(100vw - 16px));
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transform: translate(-50%, -100%);
    pointer-events: none;
}

.map-object-actions[hidden] {
    display: none;
}

.map-object-actions.below {
    flex-direction: column-reverse;
    transform: translate(-50%, 0);
}

.map-object-action-row,
.map-object-command {
    pointer-events: auto;
}

.map-object-action-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px;
    border: 1px solid rgba(168, 231, 242, .42);
    border-radius: 999px;
    background: rgba(3, 15, 22, .88);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .42), inset 0 0 16px rgba(56, 189, 218, .08);
    backdrop-filter: blur(8px);
}

.map-object-action-form {
    display: contents;
}

.map-action-palette-button {
    position: relative;
    display: grid;
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(123, 220, 240, .86);
    border-radius: 50%;
    color: #8de5ff;
    background: radial-gradient(circle at 36% 28%, rgba(48, 176, 207, .28), rgba(4, 18, 31, .96) 68%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5), inset 0 0 13px rgba(91, 210, 255, .16);
    cursor: pointer;
    touch-action: manipulation;
}

.map-action-palette-button.is-assault {
    color: #ffb18f;
    border-color: rgba(255, 126, 88, .94);
    background: radial-gradient(circle at 36% 28%, rgba(214, 75, 43, .34), rgba(35, 13, 15, .96) 68%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .52), inset 0 0 14px rgba(255, 92, 52, .18);
}

.map-action-palette-button.is-recall {
    color: #ffd08a;
    border-color: rgba(255, 181, 92, .94);
}

.map-action-palette-button.is-support {
    color: #d6b8ff;
    border-color: rgba(185, 143, 242, .94);
}

.map-action-palette-button.is-muted {
    color: #ffd19e;
    border-color: rgba(255, 177, 107, .88);
}

.map-action-palette-button:hover,
.map-action-palette-button:focus-visible,
.map-action-palette-button.is-selected {
    color: #e5fbff;
    outline: 2px solid #effbff;
    outline-offset: 2px;
    filter: brightness(1.16);
}

.map-action-palette-button:disabled {
    opacity: .38;
    cursor: not-allowed;
    filter: saturate(.5);
}

.map-action-palette-icon {
    position: relative;
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    font: 900 1.05rem/1 system-ui, sans-serif;
}

.map-action-palette-icon.kind-fleet {
    width: 31px;
    height: 31px;
    background: url("/assets/images/map/fleet-player-v2.png") center / contain no-repeat;
    filter: drop-shadow(0 0 4px currentColor);
}

.map-action-palette-icon.kind-info {
    width: 24px;
    height: 24px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-family: Georgia, serif;
}

.map-action-palette-icon.kind-scan {
    width: 24px;
    height: 24px;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: radial-gradient(circle, currentColor 0 2px, transparent 3px), conic-gradient(from 25deg, transparent 0 62%, rgba(142, 234, 247, .65) 63% 72%, transparent 73%);
}

.map-action-palette-icon.kind-share {
    width: 27px;
    height: 25px;
    background:
        radial-gradient(circle at 5px 12px, currentColor 0 3px, transparent 3.5px),
        radial-gradient(circle at 22px 5px, currentColor 0 3px, transparent 3.5px),
        radial-gradient(circle at 22px 20px, currentColor 0 3px, transparent 3.5px);
}

.map-action-palette-icon.kind-share::before,
.map-action-palette-icon.kind-share::after {
    content: "";
    position: absolute;
    left: 7px;
    width: 15px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: left center;
}

.map-action-palette-icon.kind-share::before {
    top: 11px;
    transform: rotate(-25deg);
}

.map-action-palette-icon.kind-share::after {
    top: 13px;
    transform: rotate(25deg);
}

.map-action-palette-icon.kind-ping {
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(139, 237, 211, .34), 0 0 0 10px rgba(139, 237, 211, .16);
}

.map-action-palette-icon.kind-refit { font-size: 1.1rem; }
.map-action-palette-icon.kind-mute { font-size: 1rem; }
.map-action-palette-icon.kind-recall { font-size: 1.2rem; }

.map-action-palette-badge {
    position: absolute;
    right: -3px;
    bottom: -3px;
    display: grid;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: #07131f;
    color: inherit;
    font: 900 10px/1 system-ui, sans-serif;
}

.map-action-palette-button.is-recall .map-action-palette-icon.kind-fleet::after {
    content: "↩";
    position: absolute;
    left: -3px;
    bottom: -3px;
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    border-radius: 50%;
    background: #18212a;
    color: #ffd08a;
    font: 900 11px/1 system-ui, sans-serif;
}

.map-action-palette-button::after {
    content: attr(aria-label);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 7px);
    z-index: 2;
    width: max-content;
    max-width: 190px;
    padding: 5px 7px;
    border: 1px solid rgba(126, 220, 255, .42);
    border-radius: 6px;
    background: rgba(3, 14, 24, .97);
    color: #effaff;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .48);
    font: 700 .72rem/1.25 system-ui, sans-serif;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 3px);
    transition: opacity .12s ease, transform .12s ease;
}

.map-object-actions.below .map-action-palette-button::after,
.pvp-event-objective-actions[data-layout="bottom"] .map-action-palette-button::after {
    top: calc(100% + 7px);
    bottom: auto;
}

.map-action-palette-button:hover::after,
.map-action-palette-button:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.map-object-command {
    width: min(360px, calc(100vw - 20px));
    padding: 10px 12px;
    border: 1px solid rgba(181, 233, 241, .5);
    border-radius: 14px;
    color: #dceff2;
    background: rgba(3, 15, 22, .95);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .5), inset 0 0 22px rgba(44, 153, 176, .08);
    backdrop-filter: blur(10px);
}

.map-object-command > strong,
.map-object-command > small {
    display: block;
}

.map-object-command > small {
    margin-top: 3px;
    color: #a9c6cc;
}

.map-object-command-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 7px;
    margin-top: 9px;
}

.map-share-targets {
    max-height: min(240px, 42vh);
    padding: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.map-object-command-form,
.map-object-command-form .button {
    width: 100%;
    margin: 0;
}

.map-object-raid-speed-hint {
    color: #c4b5fd !important;
}

.wormhole-choice-form {
    display: grid;
    gap: 9px;
}

.wormhole-mission-choices,
.wormhole-fleet-choices {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.wormhole-mission-choice,
.wormhole-fleet-choice {
    display: grid;
    min-width: 0;
    min-height: 86px;
    padding: 7px 5px;
    place-items: center;
    align-content: center;
    gap: 3px;
    border: 1px solid rgba(130, 207, 222, .3);
    border-radius: 10px;
    color: #d8eff3;
    background: rgba(10, 35, 45, .72);
    text-align: center;
}

.wormhole-mission-choice.selected,
.wormhole-fleet-choice.selected {
    border-color: #6ed8eb;
    background: rgba(23, 102, 120, .42);
    box-shadow: 0 0 0 2px rgba(73, 194, 216, .16), inset 0 0 18px rgba(61, 192, 216, .1);
}

.wormhole-mission-choice strong,
.wormhole-fleet-choice strong {
    max-width: 100%;
    overflow: hidden;
    font-size: .74rem;
    line-height: 1.05;
    text-overflow: ellipsis;
}

.wormhole-mission-choice small,
.wormhole-fleet-choice small {
    font-size: .64rem;
    line-height: 1.08;
}

.wormhole-mission-icon {
    display: block;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(119, 225, 241, .7);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(119, 225, 241, .8) 0 2px, transparent 3px), conic-gradient(from 20deg, transparent 0 65%, rgba(119, 225, 241, .7) 66% 76%, transparent 77%);
}

.wormhole-mission-icon.icon-salvage { border-radius: 6px 50% 50%; transform: rotate(-20deg); }
.wormhole-mission-icon.icon-stabilize { box-shadow: inset 0 0 0 4px rgba(119, 225, 241, .12), 0 0 10px rgba(119, 225, 241, .24); }
.wormhole-mission-icon.icon-deep-dive { border-radius: 4px 4px 50% 50%; background: linear-gradient(135deg, transparent 42%, #77e1f1 43% 56%, transparent 57%); }

.wormhole-fleet-choice > span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid rgba(116, 224, 240, .58);
    border-radius: 50%;
    color: #96effb;
    font-weight: 800;
}

.wormhole-fleet-summary {
    padding: 7px 9px;
    border-radius: 8px;
    color: #accbd1;
    background: rgba(7, 24, 31, .68);
    font-size: .78rem;
}

@media (max-width: 560px) {
    .map-object-action-row {
        width: fit-content;
        max-width: min(100%, 211px);
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        padding: 5px;
        overflow: visible;
    }
    .wormhole-mission-choices,
    .wormhole-fleet-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.galaxy-map.map-zooming .galaxy-map-canvas::before,
.galaxy-map.pinch-zooming .galaxy-map-canvas::before {
    display: none;
}

.galaxy-map.visual-map-poc {
    border-color: rgba(137, 187, 198, 0.32);
    background: #030a10;
    box-shadow:
        0 18px 54px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(122, 180, 194, 0.08),
        inset 0 0 42px rgba(2, 10, 16, 0.78);
}

.galaxy-map.visual-map-poc .galaxy-map-canvas {
    --field-grid-opacity: 0;
    background:
        radial-gradient(ellipse at 21% 24%, rgba(56, 111, 116, 0.2), transparent 28%),
        radial-gradient(ellipse at 73% 68%, rgba(86, 65, 115, 0.15), transparent 34%),
        radial-gradient(circle at 49% 48%, rgba(184, 156, 91, 0.1), transparent 13%),
        linear-gradient(135deg, rgba(6, 18, 25, 0.28), rgba(2, 8, 14, 0.64)),
        #051018;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: screen, screen, screen, normal, normal;
    box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.48);
}

.galaxy-map.visual-map-poc .galaxy-map-canvas::before {
    background: none;
    box-shadow:
        inset 0 0 0 2px rgba(164, 205, 214, 0.13),
        inset 0 0 110px rgba(0, 0, 0, 0.52);
}

.galaxy-map.visual-map-poc .galaxy-map-canvas::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 1px solid rgba(188, 220, 226, 0.1);
    background:
        radial-gradient(ellipse at 12% 72%, rgba(102, 157, 163, 0.07), transparent 23%),
        radial-gradient(ellipse at 84% 19%, rgba(118, 93, 145, 0.06), transparent 26%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}

.galaxy-map.visual-map-poc .map-axis {
    opacity: 0.16;
}

.galaxy-map.visual-map-poc .hive-zone,
.galaxy-map.visual-map-poc .map-core-label,
.galaxy-map.visual-map-poc .fleet-lines,
.galaxy-map.visual-map-poc .veyr-support-lines,
.galaxy-map.visual-map-poc .visual-poc-hidden {
    display: none !important;
}

.hive-zone {
    --banner-primary: #102b3f;
    --banner-secondary: #16a085;
    --banner-accent: #8fffd6;
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--area-size);
    aspect-ratio: 1 / 1;
    border: 1px solid color-mix(in srgb, var(--banner-accent) 34%, transparent);
    background: color-mix(in srgb, var(--banner-secondary) 7%, transparent);
    box-shadow: inset 0 0 22px color-mix(in srgb, var(--banner-secondary) 10%, transparent), 0 0 14px color-mix(in srgb, var(--banner-accent) 9%, transparent);
    transform: translate(var(--area-shift, -50%), var(--area-shift, -50%));
    pointer-events: none;
    z-index: 4;
    isolation: isolate;
    opacity: .58;
}

.hive-zone.banner-background-nebula {
    background: radial-gradient(circle at 68% 32%, color-mix(in srgb, var(--banner-accent) 34%, transparent), color-mix(in srgb, var(--banner-secondary) 22%, transparent) 34%, color-mix(in srgb, var(--banner-primary) 70%, transparent));
}

.hive-zone.banner-background-horizon {
    background: linear-gradient(180deg, color-mix(in srgb, var(--banner-primary) 72%, transparent) 12%, color-mix(in srgb, var(--banner-secondary) 26%, transparent) 72%, color-mix(in srgb, var(--banner-accent) 28%, transparent));
}

.hive-zone.banner-background-radial {
    background: radial-gradient(circle at 65% 35%, color-mix(in srgb, var(--banner-accent) 34%, transparent), color-mix(in srgb, var(--banner-secondary) 24%, transparent) 23%, color-mix(in srgb, var(--banner-primary) 72%, transparent) 68%);
}

.hive-zone.banner-background-deep_space {
    background: linear-gradient(145deg, rgba(3, 7, 14, 0.82), color-mix(in srgb, var(--banner-primary) 72%, transparent) 58%, color-mix(in srgb, var(--banner-secondary) 24%, transparent));
}

.hive-zone.banner-background-eclipse {
    background: radial-gradient(circle at 62% 38%, rgba(3, 6, 11, 0.9) 0 16%, color-mix(in srgb, var(--banner-accent) 38%, transparent) 18%, color-mix(in srgb, var(--banner-secondary) 24%, transparent) 25%, color-mix(in srgb, var(--banner-primary) 72%, transparent) 68%);
}

.hive-zone.banner-background-split {
    background: linear-gradient(135deg, color-mix(in srgb, var(--banner-primary) 72%, transparent) 0 48%, color-mix(in srgb, var(--banner-accent) 38%, transparent) 48% 52%, color-mix(in srgb, var(--banner-secondary) 28%, transparent) 52% 100%);
}

.hive-zone::before {
    z-index: 1;
}

.hive-zone::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 48%;
    aspect-ratio: 1 / 1;
    background: color-mix(in srgb, var(--banner-accent) 28%, transparent);
    border: 1px solid color-mix(in srgb, var(--banner-accent) 46%, transparent);
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--banner-secondary) 24%, transparent));
    transform: translate(-50%, -50%);
}

.hive-zone[data-banner-shape="shield"]::after {
    clip-path: polygon(50% 0, 92% 17%, 82% 72%, 50% 100%, 18% 72%, 8% 17%);
}

.hive-zone[data-banner-shape="crest"]::after {
    clip-path: polygon(50% 0, 92% 28%, 76% 100%, 50% 80%, 24% 100%, 8% 28%);
}

.hive-zone[data-banner-shape="spearhead"]::after {
    clip-path: polygon(50% 0, 94% 100%, 50% 76%, 6% 100%);
}

.hive-zone[data-banner-shape="diamond"]::after {
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.hive-zone[data-banner-shape="hexagon"]::after {
    clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%);
}

.hive-zone[data-banner-shape="star"]::after {
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 35%, 39% 35%);
}

.hive-zone[data-banner-shape="cross"]::after {
    clip-path: polygon(38% 0, 62% 0, 62% 36%, 100% 36%, 100% 64%, 62% 64%, 62% 100%, 38% 100%, 38% 64%, 0 64%, 0 36%, 38% 36%);
}

.galaxy-map-canvas.canvas-motion-enabled .hive-zone {
    display: none;
}

.council-zone {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--area-size);
    aspect-ratio: 1 / 1;
    border: 0;
    background: none;
    box-shadow: none;
    transform: translate(var(--area-shift, -50%), var(--area-shift, -50%));
    pointer-events: none;
    z-index: 1;
}

.map-axis {
    display: none;
}

.map-axis.horizontal {
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
}

.map-axis.vertical {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
}

.map-core-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-100% - 20px));
    padding: 6px 9px;
    border: 1px solid rgba(242, 201, 76, 0.5);
    border-radius: 7px;
    background: rgba(12, 24, 34, 0.86);
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.fleet-lines,
.veyr-support-lines,
.map-motion-canvas,
.map-base-effect-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
}

.fleet-lines {
    opacity: 0.28;
}

.veyr-support-lines {
    opacity: 0.72;
    z-index: 5;
}

.map-motion-canvas {
    z-index: 6;
}

.map-base-effect-canvas {
    z-index: 7;
}

.galaxy-map-canvas.canvas-motion-enabled .fleet-lines .fleet-path-line,
.galaxy-map-canvas.canvas-motion-enabled .fleet-lines .veyr-convoy-route-line,
.galaxy-map-canvas.canvas-motion-enabled .fleet-lines .veyr-convoy-target-dot {
    display: none;
}

.fleet-lines line {
    stroke: rgba(91, 215, 255, 0.44);
    stroke-width: 1.15;
    stroke-linecap: round;
    stroke-dasharray: 0.55 0.65;
    vector-effect: non-scaling-stroke;
}

.fleet-lines circle {
    fill: rgba(91, 215, 255, 0.42);
    stroke: rgba(6, 14, 21, 0.72);
    stroke-width: 0.45;
    vector-effect: non-scaling-stroke;
}

.fleet-lines .fleet-path-own {
    stroke: rgba(91, 215, 255, 0.62);
    fill: rgba(91, 215, 255, 0.58);
    stroke-dasharray: none;
}

.fleet-lines .fleet-path-alliance {
    stroke: rgba(97, 211, 148, 0.68);
    fill: rgba(97, 211, 148, 0.6);
    stroke-dasharray: 0.7 0.55;
}

.fleet-lines .fleet-path-other {
    stroke: rgba(248, 113, 113, 0.28);
    fill: rgba(248, 113, 113, 0.36);
    stroke-dasharray: 0.35 0.8;
}

.fleet-lines .fleet-path-pirate,
.fleet-lines .fleet-path-veyr {
    stroke: rgba(255, 183, 77, 0.3);
    fill: rgba(255, 183, 77, 0.34);
    stroke-dasharray: 0.35 0.8;
}

.fleet-lines .fleet-path-scout {
    stroke: rgba(196, 142, 255, 0.7);
    fill: rgba(196, 142, 255, 0.56);
    stroke-dasharray: 0.15 0.55;
}

.veyr-support-lines .veyr-disruption-path {
    stroke: rgba(96, 255, 221, 0.58);
    stroke-width: 1px;
    stroke-dasharray: 4px 7px;
    filter: drop-shadow(0 0 1px rgba(96, 255, 221, 0.95));
    vector-effect: non-scaling-stroke;
}

.veyr-support-lines .veyr-disruption-orb {
    fill: #77ffe2;
    stroke: #ffffff;
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 2px #49ffd4);
}

.veyr-support-lines .veyr-disruption-path.veyr-disruption-rage {
    stroke: #b56cff;
    fill: none;
    filter: drop-shadow(0 0 1px #8b5cf6) drop-shadow(0 0 3px rgba(181, 108, 255, 0.72));
}

.veyr-support-lines .veyr-disruption-orb.veyr-disruption-rage {
    fill: #d8b4fe;
    stroke: #8b5cf6;
    stroke-width: 2px;
    filter: drop-shadow(0 0 3px #a855f7) drop-shadow(0 0 7px rgba(139, 92, 246, 0.9));
}

.fleet-lines .fleet-path-importance-threat {
    stroke: rgba(255, 75, 95, 0.74);
    fill: rgba(255, 75, 95, 0.66);
    stroke-dasharray: none;
}

.veyr-support-lines .veyr-anchor-support-line {
    stroke: rgba(129, 230, 255, 0.82);
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-dasharray: 9 18;
    stroke-dashoffset: 27;
    vector-effect: non-scaling-stroke;
    animation: veyrAnchorSupportPulse 1.2s linear infinite;
}

.galaxy-map.is-dragging .veyr-support-lines .veyr-anchor-support-line,
.galaxy-map.is-zooming .veyr-support-lines .veyr-anchor-support-line {
    animation: none;
    opacity: 0.45;
}

.fleet-lines .veyr-rift-spawn-line {
    stroke: rgba(34, 211, 238, 0.92);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-dasharray: 0.55 0.55;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 7px rgba(167, 139, 250, 0.78));
    animation: veyrRiftSpawnLine 1.55s ease-out forwards;
}

.fleet-lines .veyr-anchor-spawn-pulse {
    fill: rgba(167, 139, 250, 0.2);
    stroke: rgba(34, 211, 238, 0.9);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.72));
    animation: veyrAnchorSpawnPulse 1.55s ease-out forwards;
}

.map-poi.veyr-spawn-in {
    animation: veyr-spawn-in 1.2s ease-out both;
}

.map-poi.veyr-mothership.veyr-spawn-in {
    animation-duration: 2.2s;
}

.fleet-lines .veyr-mothership-spawn-line {
    stroke-width: 0.28;
}

@keyframes veyr-spawn-in {
    0% { opacity: 0; filter: brightness(2.2) saturate(1.6); }
    45% { opacity: 1; filter: brightness(1.8) saturate(1.4); }
    100% { opacity: 1; filter: none; }
}

.fleet-lines .veyr-convoy-route-line {
    stroke: rgba(255, 210, 94, 0.92);
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-dasharray: 4 5;
    stroke-dashoffset: 18;
    vector-effect: non-scaling-stroke;
}

.fleet-lines .veyr-convoy-target-dot {
    fill: rgba(255, 210, 94, 0.28);
    stroke: rgba(255, 210, 94, 0.96);
    stroke-width: 1.35;
    vector-effect: non-scaling-stroke;
}

.galaxy-map.event-focus-mode .fleet-lines .veyr-convoy-route-line {
    filter: drop-shadow(0 0 5px rgba(255, 210, 94, 0.58));
}

@keyframes veyrAnchorSupportPulse {
    0% {
        stroke: rgba(34, 211, 238, 0.36);
        stroke-dashoffset: 27;
        opacity: 0.42;
    }
    45% {
        stroke: rgba(167, 139, 250, 0.95);
        opacity: 0.86;
    }
    100% {
        stroke: rgba(34, 211, 238, 0.36);
        stroke-dashoffset: 0;
        opacity: 0.42;
    }
}

@keyframes veyrRiftSpawnLine {
    0% {
        stroke-dashoffset: 2;
        opacity: 0;
    }
    18% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: -5;
        opacity: 0;
    }
}

@keyframes veyrAnchorSpawnPulse {
    0% {
        r: 0.08;
        opacity: 0.15;
    }
    35% {
        opacity: 0.95;
    }
    100% {
        r: 1.6;
        opacity: 0;
    }
}

.galaxy-map.performance-mode .fleet-lines {
    opacity: 0.22;
}

.galaxy-map.performance-mode .fleet-lines .fleet-path-alliance,
.galaxy-map.performance-mode .fleet-lines .fleet-path-other,
.galaxy-map.performance-mode .fleet-lines .fleet-path-pirate,
.galaxy-map.performance-mode .fleet-lines .fleet-path-veyr {
    display: none;
}

.galaxy-map.performance-mode .fleet-lines .fleet-path-own,
.galaxy-map.performance-mode .fleet-lines .fleet-path-importance-threat {
    display: block;
}

.galaxy-map.performance-mode .map-poi:not(.selected) .poi-card,
.galaxy-map.performance-mode .map-poi:not(.selected) .poi-compact {
    display: none;
}

.galaxy-map.performance-mode .map-poi:not(.selected) {
    filter: saturate(0.82);
}

.galaxy-map.performance-mode-auto::after {
    content: "Performance-Modus";
    position: sticky;
    left: 12px;
    top: 12px;
    z-index: 900;
    display: inline-flex;
    padding: 5px 8px;
    border: 1px solid rgba(91, 215, 255, 0.32);
    border-radius: 7px;
    background: rgba(7, 16, 24, 0.78);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    pointer-events: none;
}

.galaxy-map.event-focus-mode .map-poi:not(.event-focus-target):not(.event-focus-context):not(.own-base):not(.fleet-own):not(.event-focus-fleet) {
    opacity: 0.72;
    filter: saturate(0.78);
    pointer-events: auto;
}

.galaxy-map.event-focus-mode .map-poi.own-base,
.galaxy-map.event-focus-mode .map-poi.fleet-own,
.galaxy-map.event-focus-mode .map-poi.event-focus-target,
.galaxy-map.event-focus-mode .map-poi.event-focus-context,
.galaxy-map.event-focus-mode .map-poi.event-focus-fleet {
    opacity: 1;
    filter: none;
    pointer-events: auto;
    z-index: 970;
}

.galaxy-map.event-focus-mode .fleet-lines {
    opacity: 1;
}

.galaxy-map.event-focus-mode .fleet-lines .fleet-path-alliance,
.galaxy-map.event-focus-mode .fleet-lines .fleet-path-other,
.galaxy-map.event-focus-mode .fleet-lines .fleet-path-pirate,
.galaxy-map.event-focus-mode .fleet-lines .fleet-path-veyr {
    opacity: 0.14;
}

.galaxy-map.event-focus-mode .fleet-lines .fleet-path-own,
.galaxy-map.event-focus-mode .fleet-lines .fleet-path-importance-own {
    opacity: 1;
    stroke: rgba(125, 229, 255, 0.96);
    stroke-width: 2.3;
    filter: drop-shadow(0 0 4px rgba(91, 215, 255, 0.68));
}

.galaxy-map.event-focus-mode .fleet-lines .fleet-path-importance-threat {
    opacity: 0.92;
}

.galaxy-map.event-focus-mode .fleet-lines .fleet-path-event-focus {
    opacity: 1;
    stroke-width: 2.1;
}

.galaxy-map.event-focus-mode .event-focus-target {
    z-index: 980;
}

.galaxy-map.event-focus-mode .event-focus-target .poi-compact {
    display: block;
    border-color: rgba(167, 139, 250, 0.45);
    background: rgba(17, 10, 36, 0.86);
    box-shadow: 0 0 18px rgba(167, 139, 250, 0.22);
}

.galaxy-map.event-focus-mode .event-focus-target .poi-icon {
    filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.82)) drop-shadow(0 0 22px rgba(34, 211, 238, 0.32));
}

.map-poi {
    --poi-cells: 2;
    --map-icon-image: none;
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: calc(var(--map-cell) * var(--poi-cells));
    aspect-ratio: 1 / 1;
    min-width: 10px;
    min-height: 10px;
    color: var(--muted);
    transform: translate(
        var(--poi-shift-x, var(--poi-shift, -50%)),
        var(--poi-shift-y, var(--poi-shift, -50%))
    );
    z-index: 2;
}

.map-poi.selected {
    z-index: 800;
}

.poi-action-disabled-hint {
    display: block;
    margin-top: 6px;
    color: #f6c86b;
}

.map-poi.poi-scouted .poi-icon {
    box-shadow: 0 0 0 2px rgba(88, 214, 255, 0.9), 0 0 16px rgba(88, 214, 255, 0.45);
}

.scout-intel-box,
.wormhole-preview {
    display: grid;
    gap: 3px;
    padding: 7px 8px;
    border-radius: 6px;
}

.scout-intel-box {
    border: 1px solid rgba(88, 214, 255, 0.45);
    background: rgba(12, 42, 58, 0.82);
}

.wormhole-preview {
    background: rgba(255, 255, 255, 0.06);
}

.scout-action-panel small {
    color: rgba(235, 246, 255, 0.76);
}

.admin-loot-preview-result {
    margin-top: 12px;
}

.admin-formula-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(91, 215, 255, 0.28);
    border-radius: 6px;
    background: rgba(91, 215, 255, 0.07);
}

.admin-formula-preview .positive {
    color: var(--success, #61d394);
}

.admin-formula-preview .negative {
    color: var(--danger, #f87171);
}

.loot-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.loot-preview-run {
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
}

.loot-preview-pill {
    display: inline-flex;
    margin: 2px 4px 2px 0;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.82rem;
}

.poi-icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: var(--map-icon-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 0 9px currentColor);
}

.poi-icon::before,
.poi-icon::after {
    content: "";
    position: absolute;
    inset: 0;
}

.map-poi .poi-icon::before,
.map-poi .poi-icon::after,
.legend-icon::before,
.legend-icon::after {
    display: none;
}

.poi-compact {
    position: absolute;
    left: 50%;
    top: calc(100% + 5px);
    display: none;
    transform: translateX(-50%);
    padding: 3px 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(8, 18, 28, 0.82);
    color: var(--text);
    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    pointer-events: none;
}

.poi-compact .compact-tag,
.poi-compact .compact-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.poi-compact .compact-tag {
    color: var(--green);
    font-size: 0.58rem;
}

.poi-compact .compact-name {
    max-width: 72px;
}

.poi-card {
    position: absolute;
    z-index: 90;
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(100% + 10px);
    display: none;
    width: max-content;
    max-width: 260px;
    min-width: 128px;
    transform: translateX(-50%);
    padding: 8px 9px;
    border: 1px solid currentColor;
    border-radius: 8px;
    background: rgba(8, 18, 28, 0.92);
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.35;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
    pointer-events: none;
}

dialog.map-poi-overlay.game-overlay {
    width: min(720px, calc(100vw - 32px));
    max-width: 720px;
    height: min(760px, calc(100dvh - 32px));
    max-height: 760px;
    overflow: hidden;
}

dialog.map-poi-overlay.game-overlay[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.map-poi-overlay-body {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 2px 4px 10px 2px;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.5;
    overscroll-behavior: contain;
}

.map-poi-overlay-body .poi-card {
    position: static;
    display: grid;
    gap: 8px;
    width: auto;
    max-width: none;
    min-width: 0;
    transform: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    box-shadow: none;
    pointer-events: auto;
}

.map-poi-overlay-body .poi-card small {
    overflow: visible;
    color: rgba(226, 232, 240, 0.86);
    font-size: 0.94rem;
    line-height: 1.45;
    text-overflow: clip;
    white-space: normal;
}

.map-poi-overlay-body .poi-card label,
.map-poi-overlay-body .poi-card button,
.map-poi-overlay-body .poi-card select,
.map-poi-overlay-body .poi-card input,
.map-poi-overlay-body .poi-card textarea,
.map-poi-overlay-body .poi-card a {
    font-size: 0.94rem;
}

.map-poi-overlay-body .poi-card select,
.map-poi-overlay-body .poi-card input:not([type="hidden"]),
.map-poi-overlay-body .poi-card button,
.map-poi-overlay-body .poi-card a.button {
    min-height: 42px;
}

.map-poi-overlay-body .hive-detail-card {
    width: auto;
    max-width: none;
}

.map-poi-overlay-body .council-help-toggle {
    position: static;
    justify-self: end;
    width: 42px;
    height: 42px;
}

.map-poi-overlay-body .map-action-panel {
    padding: 12px;
}

.map-poi-overlay-body .map-action-panel > strong,
.map-poi-overlay-body .phase-gate-score-list > strong,
.map-poi-overlay-body .phase-gate-score-list > span,
.map-poi-overlay-body .hive-relationship-badge,
.map-poi-overlay-body .hive-detail-facts b,
.map-poi-overlay-body .poi-status-badge,
.map-poi-overlay-body .council-help-panel > strong {
    font-size: 0.9rem;
}

.map-poi-overlay-body .map-action-form .button {
    min-height: 42px;
    padding: 9px 12px;
    font-size: 0.94rem;
}

.map-poi-overlay-body .phase-gate-score-list > span {
    grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
}

.map-poi-overlay-body .alliance-banner-hive-card .alliance-banner-identity {
    font-size: 0.95rem;
}

.galaxy-map.veyr-phase-jump-active .map-poi.veyr-mothership {
    opacity: 0;
    pointer-events: none;
}

.base-detail-card {
    border-color: rgba(91, 215, 255, 0.72);
    background:
        linear-gradient(rgba(8, 18, 28, 0.86), rgba(8, 18, 28, 0.9)),
        radial-gradient(circle at 18% 24%, rgba(91, 215, 255, 0.25), transparent 28%),
        linear-gradient(145deg, rgba(9, 23, 38, 0.98), rgba(24, 47, 58, 0.98));
}

.hive-detail-card { width: min(340px, calc(100vw - 28px)); max-width: 340px; border-color: rgba(130, 207, 169, .58); }
.hive-detail-identity { display: grid; gap: 7px; margin: 7px 0 10px; }
.alliance-banner-hive-card { width: 100%; min-height: 94px; margin: 0; padding: 10px; border-radius: 3px; }
.alliance-banner-hive-card .alliance-banner-shape { top: 11px; right: 9%; width: 58px; height: 58px; }
.alliance-banner-hive-card .alliance-banner-identity { font-size: .8rem; }
.hive-relationship-badge { justify-self: start; padding: 3px 7px; border: 1px solid currentColor; border-radius: 999px; font-size: .62rem; font-weight: 900; letter-spacing: .02em; }
.hive-relationship-badge.own { color: var(--map-color-player-alliance); }
.hive-relationship-badge.allied, .hive-relationship-badge.nap { color: var(--map-color-special-cyan); }
.hive-relationship-badge.war { color: var(--map-color-danger); }
.hive-relationship-badge.foreign { color: var(--map-color-player-foreign); }
.hive-detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 9px; }
.hive-detail-facts span { display: grid; gap: 2px; padding: 6px; border-radius: 5px; background: rgba(255,255,255,.04); }
.hive-detail-facts b { color: var(--muted); font-size: .56rem; text-transform: uppercase; }

.poi-card strong {
    display: block;
    color: var(--text);
    font-weight: 800;
}

.map-poi-overlay-body .council-rule-line {
    color: #fde68a;
    font-weight: 700;
}

.council-help-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(250, 204, 21, 0.58);
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.92);
    color: #fde68a;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.council-help-toggle:hover,
.council-help-toggle[aria-expanded="true"] {
    background: rgba(250, 204, 21, 0.16);
    color: #fff7ed;
}

.council-help-panel {
    display: grid;
    gap: 5px;
    margin: 9px 0 10px;
    padding: 10px 12px;
    border: 1px solid rgba(250, 204, 21, 0.24);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.88);
}

.council-help-panel[hidden] {
    display: none;
}

.council-help-panel > strong {
    color: #fde68a;
    font-size: 0.78rem;
}

.council-help-panel > small {
    white-space: normal;
    color: rgba(226, 232, 240, 0.82);
}

.poi-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.defender-list {
    display: grid;
    gap: 3px;
    margin: 5px 0;
    color: var(--green);
}

.defender-list span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hive-bonus-card {
    display: grid;
    gap: 3px;
    margin: 7px 0;
    padding: 7px;
    border: 1px solid rgba(84, 255, 176, 0.34);
    border-radius: 8px;
    background: rgba(84, 255, 176, 0.08);
    color: var(--green);
}

.hive-bonus-card strong {
    color: var(--text);
}

.poi-card a {
    display: inline-flex;
    margin-top: 7px;
    padding: 5px 8px;
    border: 1px solid currentColor;
    border-radius: 6px;
    color: var(--text);
    font-weight: 800;
}

.base-skin-preview {
    --base-skin-image: url("/assets/images/map/player-base-standard.webp");
    position: relative;
    display: grid;
    place-items: center;
    height: 74px;
    margin: 7px 0;
    border: 1px solid rgba(91, 215, 255, 0.42);
    border-radius: 8px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 24%, rgba(91, 215, 255, 0.16), transparent 24%),
        radial-gradient(circle at 72% 68%, rgba(255, 207, 107, 0.13), transparent 22%),
        linear-gradient(145deg, rgba(7, 18, 30, 0.94), rgba(17, 39, 52, 0.96));
}

.base-skin-preview::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(118px, 84%);
    height: min(62px, 82%);
    transform: translate(-50%, -50%);
    background: var(--base-skin-image) center / contain no-repeat;
    box-shadow: 0 0 22px rgba(91, 215, 255, 0.36);
    filter: drop-shadow(0 0 10px rgba(91, 215, 255, 0.28));
    z-index: 1;
}

.base-skin-preview::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 82%;
    height: 54%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(91, 215, 255, 0.2), transparent 68%);
    z-index: 0;
}

.base-skin-preview.skin-bastion {
    --base-skin-image: url("/assets/images/map/player-base-bastion.webp");
}

.base-skin-preview.skin-spire {
    --base-skin-image: url("/assets/images/map/player-base-spire.webp");
}

.base-skin-preview.skin-astral_citadel {
    --base-skin-image: url("/assets/images/map/player-base-astral-citadel-v1.webp");
}

.base-skin-preview.skin-necrotic_star_citadel {
    --base-skin-image: url("/assets/images/map/player-base-necrotic-star-citadel-v1.webp");
}

.base-skin-preview.skin-chronovore_citadel {
    --base-skin-image: url("/assets/images/map/player-base-chronovore-citadel-v1.webp");
}

.map-action-form {
    display: grid;
    gap: 7px;
    margin-top: 7px;
}

.map-action-panel {
    display: grid;
    gap: 7px;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid rgba(91, 215, 255, 0.22);
    border-radius: 8px;
    background: rgba(91, 215, 255, 0.08);
}

.map-action-panel > strong {
    color: var(--text);
    font-size: 0.72rem;
}

.poi-primary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    margin-top: 8px;
}

.poi-primary-actions .map-action-form {
    display: flex;
    margin: 0;
}

.map-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 10px;
    line-height: 1;
}

.map-icon-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.button-icon {
    position: relative;
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    align-items: center;
    justify-content: center;
}

.scan-icon::before,
.scan-icon::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.scan-icon::before {
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    box-shadow: 0 0 8px rgba(91, 215, 255, 0.45);
}

.scan-icon::after {
    width: 4px;
    height: 4px;
    background: currentColor;
}

.attack-icon::before,
.mission-icon::before,
.mine-icon::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.attack-icon::after,
.mission-icon::after,
.mine-icon::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.mission-icon::before {
    transform: rotate(45deg);
    border-radius: 3px;
}

.mine-icon::before {
    border-radius: 3px;
    transform: rotate(45deg) scale(0.85);
}

.poi-action-dialog[hidden] {
    display: none;
}

.poi-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 2px;
}

.poi-status-badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 3px 7px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 900;
}

.poi-status-badge.free {
    color: var(--green);
    background: rgba(99, 230, 190, 0.1);
}

.poi-status-badge.own {
    color: var(--cyan);
    background: rgba(91, 215, 255, 0.1);
}

.poi-status-badge.alliance {
    color: var(--gold);
    background: rgba(255, 207, 107, 0.1);
}

.poi-status-badge.hostile {
    color: #ff8e8e;
    background: rgba(255, 107, 107, 0.12);
}

.map-action-form label {
    display: grid;
    gap: 5px;
    color: #d6e0ea;
    font-weight: 800;
}

.map-action-form select {
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #10202c;
    color: var(--text);
    font: inherit;
}

.map-action-form .button {
    min-height: 32px;
    padding: 6px 9px;
    font-size: 0.74rem;
}

.phase-gate-score-list {
    display: grid;
    gap: 5px;
    margin: 3px 0;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--phase-gate-owner-color, #78cbd6) 28%, transparent);
    border-radius: 7px;
    background: rgba(7, 20, 30, 0.72);
}

.phase-gate-score-list > strong {
    color: #bdebf0;
    font-size: 0.72rem;
}

.phase-gate-score-list > span {
    display: grid;
    grid-template-columns: minmax(68px, auto) minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
    color: #d7edf0;
    font-size: 0.7rem;
}

.phase-gate-score-list b {
    overflow: hidden;
    color: color-mix(in srgb, var(--phase-gate-owner-color, #78cbd6) 72%, white);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phase-gate-score-list em {
    color: var(--muted);
    font-style: normal;
    text-align: right;
}

.phase-gate-closing-warning {
    padding: 5px 7px;
    border: 1px solid rgba(255, 174, 92, 0.42);
    border-radius: 5px;
    color: #ffd2a1 !important;
    background: rgba(123, 57, 18, 0.18);
}

.map-action-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.map-action-buttons .button:only-child {
    grid-column: 1 / -1;
}

.resource-meter {
    display: block;
    height: 3px;
    margin-top: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
}

.resource-meter em {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: currentColor;
}

.detail-high .map-poi {
    z-index: 5;
}

.detail-ultra .galaxy-map-canvas {
    --field-grid-opacity: 0.08;
}

.galaxy-map.visual-map-poc.detail-ultra .galaxy-map-canvas {
    --field-grid-opacity: 0;
}

.detail-high .fleet-lines,
.detail-ultra .fleet-lines {
    opacity: 0.46;
}

.detail-high .fleet-lines line,
.detail-ultra .fleet-lines line {
    stroke-width: 1.25;
}

.detail-high .fleet-lines circle,
.detail-ultra .fleet-lines circle {
    fill: rgba(91, 215, 255, 0.68);
}

.detail-ultra .map-poi {
    z-index: 5;
}

.detail-high .map-poi.selected,
.detail-ultra .map-poi.selected {
    z-index: 800;
}

.detail-high .poi-compact,
.detail-ultra .poi-compact {
    display: block;
}

.map-legend {
    display: block;
    max-width: 1480px;
    margin: 14px auto 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(12, 24, 34, 0.72);
}

.map-legend summary {
    min-height: 44px;
    padding: 11px 16px;
    color: var(--text);
    cursor: pointer;
    font-weight: 900;
}

.map-legend-items {
    display: flex;
    gap: 10px 16px;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 16px 14px;
}

.map-legend-items span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.legend-icon {
    --map-icon-image: none;
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    color: var(--muted);
    background-image: var(--map-icon-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 0 7px currentColor);
}

.legend-icon::before,
.legend-icon::after {
    content: "";
    position: absolute;
    inset: 0;
}

.legend-icon.map-anchor-fracture {
    border: 0;
    border-radius: 42% 58% 48% 52%;
    background:
        radial-gradient(ellipse at 30% 35%, rgba(255, 182, 101, 0.76), transparent 28%),
        radial-gradient(ellipse at 62% 58%, rgba(174, 65, 42, 0.66), transparent 62%);
    color: #ffb45f;
}

.legend-icon.map-anchor-fracture::before {
    inset: 2px;
    background: linear-gradient(120deg, transparent 34%, rgba(255, 207, 142, 0.72) 48%, transparent 57%);
    clip-path: polygon(0 38%, 36% 45%, 48% 4%, 56% 48%, 100% 62%, 58% 58%, 44% 100%, 38% 57%);
}

.legend-icon.map-phase-corridor {
    border: 0;
    background: transparent;
    color: #74deef;
}

.legend-icon.map-phase-corridor::before {
    inset: 4px 0;
    border-top: 4px solid rgba(91, 219, 235, 0.72);
    border-radius: 50%;
    transform: rotate(-12deg);
    filter: drop-shadow(0 0 4px rgba(105, 194, 255, 0.72));
}

.poi-phase-gate,
.legend-icon.poi-phase-gate {
    --poi-cells: 5;
    --map-icon-image: url("/assets/images/map/council-control-platform-v2.webp");
    color: var(--map-color-special-cyan);
}

.poi-phase-gate .poi-icon::before,
.legend-icon.poi-phase-gate::before {
    inset: 8%;
    border: 1px solid currentColor;
    box-shadow: inset 0 0 8px rgba(120, 203, 214, 0.35), 0 0 8px rgba(120, 203, 214, 0.3);
}

.poi-phase-gate .poi-icon::after,
.legend-icon.poi-phase-gate::after {
    inset: 35%;
    border: 1px solid rgba(214, 248, 250, 0.9);
    background: rgba(120, 203, 214, 0.22);
    transform: rotate(45deg);
}

.poi-council {
    --poi-cells: 7;
    --poi-shift-x: -50%;
    --poi-shift-y: -50%;
    --map-icon-image: url("/assets/images/map/galactic-council-citadel-v1.webp");
    color: var(--map-color-special-gold);
    z-index: 2;
}

.poi-council .poi-icon::before,
.legend-icon.poi-council::before {
    inset: 32%;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-shadow: inset 0 0 6px currentColor, 0 0 10px currentColor;
}

.poi-council .poi-icon::after,
.legend-icon.poi-council::after {
    inset: 42%;
    border-radius: 50%;
    background: currentColor;
}

.poi-player-base {
    --poi-cells: 3;
    --map-icon-image: url("/assets/images/map/player-base-standard.webp");
    --base-frame-color: #8fc8d3;
    --base-frame-glow: rgba(111, 178, 190, 0.24);
    color: var(--base-frame-color);
    isolation: isolate;
    z-index: 3;
}

.poi-player-base.skin-bastion {
    --map-icon-image: url("/assets/images/map/player-base-bastion.webp");
}

.poi-player-base.skin-spire {
    --map-icon-image: url("/assets/images/map/player-base-spire.webp");
}

.poi-player-base.skin-astral_citadel {
    --map-icon-image: url("/assets/images/map/player-base-astral-citadel-v1.webp");
}

.poi-player-base.skin-necrotic_star_citadel {
    --map-icon-image: url("/assets/images/map/player-base-necrotic-star-citadel-v1.webp");
}

.poi-player-base.skin-chronovore_citadel {
    --map-icon-image: url("/assets/images/map/player-base-chronovore-citadel-v1.webp");
}

.poi-player-base::before {
    content: "";
    position: absolute;
    inset: max(2px, calc(var(--map-cell) * 0.12));
    border: max(1px, calc(var(--map-cell) * 0.025)) solid var(--base-frame-color);
    border-radius: max(3px, calc(var(--map-cell) * 0.11));
    box-shadow:
        0 0 0 1px rgba(2, 8, 14, 0.9),
        0 0 7px color-mix(in srgb, var(--base-frame-color) 42%, transparent),
        inset 0 0 10px color-mix(in srgb, var(--base-frame-color) 32%, transparent);
    pointer-events: none;
    z-index: 1;
}

.poi-player-base::after {
    content: "";
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--base-frame-glow), transparent 68%);
    opacity: 0.34;
    pointer-events: none;
    z-index: 0;
}

.poi-player-base .poi-icon {
    inset: 14%;
    width: 72%;
    height: 72%;
    z-index: 2;
    filter:
        saturate(1.08)
        contrast(1.04)
        brightness(1.03)
        drop-shadow(0 0 7px rgba(7, 16, 24, 0.95))
        drop-shadow(0 0 7px color-mix(in srgb, var(--base-frame-color) 32%, transparent));
}

.poi-player-base .poi-compact {
    top: auto;
    bottom: max(2px, calc(var(--map-cell) * 0.08));
    display: none;
    min-width: 0;
    width: calc(100% - max(6px, calc(var(--map-cell) * 0.36)));
    max-width: none;
    padding: 2px 4px 3px;
    border-color: color-mix(in srgb, var(--base-frame-color) 56%, rgba(255, 255, 255, 0.18));
    background:
        linear-gradient(180deg, rgba(8, 18, 28, 0.96), rgba(3, 9, 15, 0.92)),
        color-mix(in srgb, var(--base-frame-color) 12%, transparent);
    color: #f5fbff;
    text-align: center;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.76),
        0 4px 10px rgba(0, 0, 0, 0.36),
        0 0 8px color-mix(in srgb, var(--base-frame-color) 18%, transparent);
}

.galaxy-map.labels-ultra .poi-player-base .poi-compact {
    display: grid;
    gap: 1px;
}

.poi-player-base .poi-compact .compact-tag {
    min-height: 0.58rem;
    color: var(--base-frame-color);
    font-size: 0.46rem;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}

.poi-player-base .poi-compact .compact-name {
    max-width: 100%;
    color: #ffffff;
    font-size: 0.52rem;
    line-height: 1;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 1),
        0 0 7px rgba(255, 255, 255, 0.18);
}

.poi-player-base.own-base {
    --base-frame-color: var(--map-color-player-own);
    --base-frame-glow: rgba(111, 211, 232, 0.24);
}

.poi-player-base.alliance-base {
    --base-frame-color: var(--map-color-player-alliance);
    --base-frame-glow: rgba(130, 207, 169, 0.22);
}

.poi-player-base.enemy-base {
    --base-frame-color: var(--map-color-player-foreign);
    --base-frame-glow: color-mix(in srgb, var(--map-color-player-foreign) 20%, transparent);
}

.legend-icon.poi-player-base {
    --map-icon-image: url("/assets/images/map/player-base-standard.webp");
    border: 2px solid currentColor;
    border-radius: 5px;
    background-size: 80%;
}

.legend-icon.poi-player-base.own-base {
    color: var(--map-color-player-own);
}

.legend-icon.poi-player-base.alliance-base {
    color: var(--map-color-player-alliance);
}

.legend-icon.poi-player-base.enemy-base {
    color: var(--map-color-player-foreign);
}

.legend-icon.poi-player-base.shielded-base {
    --map-icon-image: url("/assets/images/map/player-base-shield.webp");
}

.poi-player-base.shielded-base .poi-icon::after {
    display: block;
    inset: -10%;
    border: 2px solid rgba(140, 235, 255, 0.78);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(91, 215, 255, 0.16), transparent 56%),
        conic-gradient(from 0deg, transparent, rgba(165, 244, 255, 0.54), transparent 34%, rgba(91, 215, 255, 0.42), transparent 72%);
    box-shadow: 0 0 14px rgba(91, 215, 255, 0.42), inset 0 0 18px rgba(91, 215, 255, 0.24);
    opacity: 0.78;
    animation: shield-marker-pulse 2.1s ease-in-out infinite;
}

.poi-player-base.alliance-defended-base .poi-icon::after {
    opacity: 0.82;
}

.poi-player-base.alliance-defended-base::after {
    content: "";
    position: absolute;
    right: 4%;
    top: 4%;
    width: 27%;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--green);
    border-radius: 50% 50% 45% 45%;
    background:
        linear-gradient(180deg, rgba(91, 255, 166, 0.34), rgba(91, 255, 166, 0.08)),
        rgba(5, 18, 13, 0.86);
    box-shadow: 0 0 8px rgba(91, 255, 166, 0.58);
    clip-path: polygon(50% 0, 92% 20%, 82% 76%, 50% 100%, 18% 76%, 8% 20%);
    pointer-events: none;
}

.poi-asteroid {
    --poi-cells: 2;
    --poi-shift: -25%;
    --map-icon-image: url("/assets/images/map/asteroid-metal-v2.webp");
    --asteroid-frame-color: rgba(183, 193, 205, 0.82);
    --asteroid-frame-glow: rgba(183, 193, 205, 0.28);
    color: #bfc7d1;
    isolation: isolate;
}

.poi-asteroid::before {
    content: "";
    position: absolute;
    inset: max(1px, calc(var(--map-cell) * 0.06));
    border: max(1px, calc(var(--map-cell) * 0.035)) solid var(--asteroid-frame-color);
    border-radius: max(4px, calc(var(--map-cell) * 0.16));
    box-shadow:
        0 0 0 1px rgba(4, 7, 11, 0.82),
        0 0 11px var(--asteroid-frame-glow),
        inset 0 0 9px rgba(183, 193, 205, 0.16);
    pointer-events: none;
    z-index: 1;
}

.poi-asteroid::after {
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(183, 193, 205, 0.18), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.poi-asteroid .poi-icon {
    inset: 7%;
    width: 86%;
    height: 86%;
    z-index: 2;
    filter:
        contrast(1.06)
        saturate(1.1)
        drop-shadow(0 0 8px rgba(5, 8, 12, 0.92))
        drop-shadow(0 0 7px color-mix(in srgb, currentColor 30%, transparent));
}

.legend-icon.poi-asteroid {
    border: 1px solid rgba(183, 193, 205, 0.74);
    border-radius: 5px;
    background-color: rgba(183, 193, 205, 0.08);
    box-shadow: 0 0 6px rgba(183, 193, 205, 0.18);
}

.poi-asteroid.resource-metal {
    --map-icon-image: url("/assets/images/map/asteroid-metal-v2.webp");
    color: #c7b79a;
}

.poi-asteroid.resource-crystal {
    --map-icon-image: url("/assets/images/map/asteroid-crystal-v2.webp");
    color: var(--map-color-special-cyan);
}

.poi-asteroid.resource-exotic_matter {
    --map-icon-image: url("/assets/images/map/asteroid-exotic-matter-v2.webp");
    color: var(--map-color-special-violet);
}

.poi-asteroid.resource-multi {
    --map-icon-image: url("/assets/images/map/asteroid-multi-v2.webp");
    color: var(--map-color-special-gold);
}

.poi-debris {
    --poi-cells: 2;
    --poi-shift: -25%;
    --map-icon-image: url("/assets/images/map/debris-field.webp");
    color: var(--map-color-special-gold);
    z-index: 82;
}

.map-poi.poi-debris .poi-compact {
    display: none;
}

.detail-high .map-poi.poi-debris,
.detail-ultra .map-poi.poi-debris {
    z-index: 900;
}

.detail-high .map-poi.selected,
.detail-ultra .map-poi.selected,
.map-poi.poi-debris.selected {
    z-index: 1200;
}

.poi-debris .poi-icon,
.legend-icon.poi-debris {
    background-size: contain;
    filter:
        saturate(1.55)
        contrast(1.15)
        brightness(1.12)
        sepia(0.18)
        drop-shadow(0 0 7px rgba(255, 209, 102, 0.58))
        drop-shadow(0 0 12px rgba(91, 215, 255, 0.22));
}

.poi-debris.event-debris {
    color: var(--map-color-special-violet);
}

.poi-debris.event-debris .poi-icon {
    filter:
        hue-rotate(55deg)
        saturate(2.1)
        contrast(1.18)
        brightness(1.18)
        drop-shadow(0 0 8px rgba(192, 132, 252, 0.82))
        drop-shadow(0 0 14px rgba(103, 232, 249, 0.55));
}

.poi-base-jump {
    --poi-cells: 6;
    --poi-shift: -50%;
    --map-icon-image: url("/assets/images/map/base-jump.webp");
    color: var(--map-color-special-gold);
    z-index: 7;
}

.poi-base-jump .poi-icon {
    animation: jump-core-pulse 1.2s ease-in-out infinite;
}

.poi-base-jump .poi-icon::before,
.legend-icon.poi-base-jump::before {
    inset: 0;
    border: 2px solid currentColor;
    border-radius: 50%;
    animation: jump-pulse 1.4s ease-in-out infinite;
}

.poi-base-jump .poi-icon::after,
.legend-icon.poi-base-jump::after {
    inset: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 18px currentColor;
    animation: jump-core-pulse 1.2s ease-in-out infinite;
}

.jump-imminent .poi-base-jump .poi-icon::before,
.jump-imminent .poi-base-jump .poi-icon::after {
    animation-duration: 0.38s;
}

.galaxy-map.placing {
    cursor: crosshair;
}

.placement-preview {
    --area-size: 0.2%;
    --area-shift: -50%;
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--area-size);
    height: var(--area-size);
    z-index: 75;
    pointer-events: none;
    transform: translate(var(--area-shift), var(--area-shift));
    border: 2px solid rgba(91, 215, 255, 0.88);
    border-radius: 2px;
    background: rgba(91, 215, 255, 0.12);
    box-shadow: 0 0 18px rgba(91, 215, 255, 0.3), inset 0 0 12px rgba(91, 215, 255, 0.18);
}

.placement-preview[data-mode="hive"] {
    border-style: dashed;
    background: rgba(91, 215, 255, 0.08);
}

.placement-preview.free {
    border-color: rgba(43, 224, 151, 0.95);
    background: rgba(43, 224, 151, 0.13);
    box-shadow: 0 0 20px rgba(43, 224, 151, 0.32), inset 0 0 12px rgba(43, 224, 151, 0.18);
}

.placement-preview.free.hazard {
    border-color: rgba(255, 180, 95, 0.98);
    background: rgba(204, 91, 61, 0.22);
    box-shadow: 0 0 22px rgba(244, 165, 88, 0.42), inset 0 0 14px rgba(160, 56, 49, 0.32);
}

.placement-preview.blocked {
    border-color: rgba(255, 107, 107, 0.98);
    background: rgba(255, 107, 107, 0.18);
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.32), inset 0 0 12px rgba(255, 107, 107, 0.18);
}

.placement-preview.checking {
    opacity: 0.82;
    border-color: rgba(255, 207, 107, 0.9);
    background: rgba(255, 207, 107, 0.12);
    box-shadow: 0 0 18px rgba(255, 207, 107, 0.26), inset 0 0 12px rgba(255, 207, 107, 0.14);
}

.poi-alliance-rally {
    --poi-cells: 1;
    --map-icon-image: url("/assets/images/map/alliance-hive.webp");
    color: var(--map-color-player-alliance);
    z-index: 2;
}

.poi-alliance-rally .poi-icon::before,
.legend-icon.poi-alliance-rally::before {
    inset: 0;
    border: 1px solid currentColor;
    clip-path: polygon(50% 0, 96% 28%, 96% 74%, 50% 100%, 4% 74%, 4% 28%);
    background: rgba(97, 211, 148, 0.12);
}

.poi-alliance-rally .poi-icon::after,
.legend-icon.poi-alliance-rally::after {
    inset: 35%;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 16px currentColor;
}

.poi-wormhole {
    --poi-cells: 5;
    --map-icon-image: url("/assets/images/map/wormhole-v2.webp");
    color: var(--map-color-special-cyan);
}

.poi-wormhole .poi-icon {
    animation: wormhole-spin 9s linear infinite;
}

.poi-wormhole .poi-icon::before,
.legend-icon.poi-wormhole::before {
    border: 2px solid currentColor;
    border-radius: 50%;
    animation: wormhole-spin 9s linear infinite;
}

.poi-wormhole .poi-icon::after,
.legend-icon.poi-wormhole::after {
    inset: 5px;
    border: 2px solid currentColor;
    border-left-color: transparent;
    border-radius: 50%;
}

.poi-veyr {
    --poi-cells: 3;
    --map-icon-image: url("/assets/images/map/veyr-target.webp");
    --veyr-frame-color: var(--map-color-special-violet);
    --veyr-frame-glow: rgba(181, 108, 255, 0.64);
    color: var(--veyr-frame-color);
    isolation: isolate;
}

.poi-veyr:not(.veyr-rift):not(.veyr-mothership)::before {
    content: "";
    position: absolute;
    inset: max(1px, calc(var(--map-cell) * 0.055));
    border: max(1px, calc(var(--map-cell) * 0.035)) solid var(--veyr-frame-color);
    border-radius: max(5px, calc(var(--map-cell) * 0.22));
    box-shadow:
        0 0 0 1px rgba(7, 4, 16, 0.92),
        0 0 17px var(--veyr-frame-glow),
        0 0 34px rgba(34, 211, 238, 0.24),
        inset 0 0 15px rgba(181, 108, 255, 0.34);
    pointer-events: none;
    z-index: 1;
}

.poi-veyr:not(.veyr-rift):not(.veyr-mothership)::after {
    content: "";
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(181, 108, 255, 0.32), transparent 62%),
        radial-gradient(circle at 64% 42%, rgba(34, 211, 238, 0.28), transparent 44%);
    opacity: 0.56;
    pointer-events: none;
    z-index: 0;
}

.poi-veyr:not(.veyr-rift):not(.veyr-mothership) .poi-icon {
    inset: 9%;
    width: 82%;
    height: 82%;
    z-index: 2;
    filter:
        saturate(1.26)
        contrast(1.08)
        brightness(1.05)
        drop-shadow(0 0 10px rgba(9, 3, 18, 0.96))
        drop-shadow(0 0 13px rgba(181, 108, 255, 0.44));
}

.poi-veyr.veyr-rift {
    --poi-cells: 6;
    --poi-shift: -41.6667%;
    --map-icon-image: url("/assets/images/map/veyr-rift.webp");
    color: var(--map-color-special-violet);
    z-index: 18;
}

.poi-veyr.veyr-probe {
    --poi-cells: 3;
    --poi-shift: -50%;
    --map-icon-image: url("/assets/images/map/veyr-probe-v2.webp");
    --veyr-frame-color: var(--map-color-special-cyan);
    --veyr-frame-glow: rgba(34, 211, 238, 0.62);
    color: var(--veyr-frame-color);
    z-index: 19;
}

.poi-veyr.veyr-node {
    --poi-cells: 4;
    --poi-shift: -37.5%;
    --veyr-frame-color: var(--map-color-special-violet);
    --veyr-frame-glow: rgba(192, 132, 252, 0.66);
    color: var(--veyr-frame-color);
    z-index: 19;
}

.poi-veyr.veyr-mothership {
    --poi-cells: 8;
    --poi-shift: -43.75%;
    --map-icon-image: url("/assets/images/map/veyr-mothership.webp");
    color: var(--map-color-special-violet);
    z-index: 20;
    transition: left 1.4s linear, top 1.4s linear;
}

.poi-veyr.veyr-swarm-convoy {
    --poi-cells: 4;
    --poi-shift: -37.5%;
    --veyr-frame-color: var(--map-color-special-gold);
    --veyr-frame-glow: rgba(250, 204, 21, 0.72);
    color: var(--map-color-special-gold);
    z-index: 17;
    transition: left 1s linear, top 1s linear;
}

.poi-veyr.veyr-swarm-convoy::before {
    border-style: dashed;
    box-shadow:
        0 0 0 1px rgba(26, 18, 3, 0.96),
        0 0 20px rgba(250, 204, 21, 0.72),
        0 0 42px rgba(181, 108, 255, 0.46),
        inset 0 0 18px rgba(250, 204, 21, 0.32);
    animation: veyrConvoyFramePulse 1.45s ease-in-out infinite;
}

.poi-veyr.veyr-swarm-convoy::after {
    opacity: 0.86;
    background:
        radial-gradient(circle, rgba(250, 204, 21, 0.34), transparent 58%),
        conic-gradient(from 0deg, rgba(250, 204, 21, 0.1), rgba(181, 108, 255, 0.38), rgba(34, 211, 238, 0.22), rgba(250, 204, 21, 0.1));
}

.poi-veyr.veyr-swarm-convoy .poi-icon {
    filter:
        saturate(1.32)
        contrast(1.12)
        brightness(1.1)
        drop-shadow(0 0 12px rgba(20, 12, 2, 0.98))
        drop-shadow(0 0 18px rgba(250, 204, 21, 0.64));
}

.galaxy-map.is-dragging .poi-veyr.veyr-mothership,
.galaxy-map.is-zooming .poi-veyr.veyr-mothership {
    transition: none;
}

.poi-veyr.veyr-mothership.veyr-destroyed {
    --map-icon-image: url("/assets/images/map/veyr-mothership-destroyed.webp");
    color: #f97316;
}

.poi-veyr.veyr-rift.veyr-destroyed {
    color: #f97316;
}

.poi-veyr.veyr-rift.veyr-rift-phase-pulse .poi-icon {
    animation: veyr-rift-phase-pulse 0.8s ease-in-out infinite;
}

.poi-veyr.veyr-rift.veyr-rift-phase-pulse .poi-icon::before {
    animation: veyr-rift-energy-pulse 0.8s ease-out infinite;
}

@keyframes veyr-rift-phase-pulse {
    0%, 100% { transform: scale(0.94); filter: brightness(0.9) drop-shadow(0 0 4px rgba(87, 255, 221, 0.45)); }
    50% { transform: scale(1.12); filter: brightness(1.45) drop-shadow(0 0 16px rgba(87, 255, 221, 0.95)); }
}

@keyframes veyr-rift-energy-pulse {
    0% { transform: translateY(43.3333%) scale(0.75); opacity: 0.8; }
    75%, 100% { transform: translateY(43.3333%) scale(1.45); opacity: 0; }
}

.poi-veyr.veyr-destroyed .poi-icon {
    filter: grayscale(0.25) saturate(0.82) drop-shadow(0 0 14px rgba(249, 115, 22, 0.55));
    animation: veyr-wreck-flicker 2.6s ease-in-out infinite;
}

.poi-veyr.veyr-mothership .poi-icon::before {
    display: block;
    inset: -22%;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, currentColor 20%, transparent), transparent 64%);
    opacity: 0.48;
    animation: event-poi-ping 2.8s ease-out infinite;
}

.poi-veyr.veyr-mothership.veyr-mothership-imminent .poi-icon {
    animation: veyrMothershipImminentCore 0.72s ease-in-out infinite;
    filter: drop-shadow(0 0 18px rgba(255, 80, 120, 0.82)) drop-shadow(0 0 34px rgba(167, 139, 250, 0.72));
}

.poi-veyr.veyr-mothership.veyr-mothership-imminent .poi-icon::before {
    inset: -42%;
    border-color: rgba(255, 80, 120, 0.86);
    background:
        radial-gradient(circle, rgba(255, 80, 120, 0.28), transparent 58%),
        conic-gradient(from 0deg, rgba(167, 139, 250, 0), rgba(255, 80, 120, 0.42), rgba(34, 211, 238, 0.2), rgba(167, 139, 250, 0));
    opacity: 0.92;
    animation: veyrMothershipImminentRing 0.72s ease-in-out infinite;
}

.poi-veyr.veyr-destroyed .poi-icon::before {
    border-color: rgba(249, 115, 22, 0.65);
    background: radial-gradient(circle, rgba(249, 115, 22, 0.22), transparent 64%);
    animation: veyr-wreck-shockwave 3.2s ease-out infinite;
}

.galaxy-map.event-focus-mode .poi-veyr.veyr-mothership .poi-icon::before {
    inset: -55%;
    border-width: 2px;
    opacity: 0.76;
    animation-duration: 1.8s;
}

.legend-icon.poi-veyr.veyr-rift {
    --map-icon-image: url("/assets/images/map/veyr-rift.webp");
    color: var(--map-color-special-violet);
}

.poi-veyr.veyr-rift .poi-icon {
    top: calc(-1 * var(--map-cell));
    bottom: auto;
    filter: drop-shadow(0 0 13px rgba(167, 139, 250, 0.86)) drop-shadow(0 0 24px rgba(34, 211, 238, 0.42));
    animation: veyr-rift-breathe 2.4s ease-in-out infinite;
}

.poi-veyr.veyr-rift .poi-icon::before {
    display: block;
    inset: -7%;
    border: 1px solid rgba(34, 211, 238, 0.52);
    border-radius: 50%;
    background:
        conic-gradient(from 0deg, rgba(167, 139, 250, 0), rgba(167, 139, 250, 0.44), rgba(34, 211, 238, 0.1), rgba(167, 139, 250, 0)),
        radial-gradient(circle, rgba(34, 211, 238, 0.08), transparent 60%);
    opacity: 0.68;
    animation: veyr-rift-ring 5.4s linear infinite;
}

.poi-veyr.veyr-rift .poi-icon::after {
    display: block;
    inset: 22%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.36), rgba(34, 211, 238, 0.16) 28%, transparent 62%);
    mix-blend-mode: screen;
    opacity: 0.58;
    animation: veyr-rift-core 1.6s ease-in-out infinite;
}

.legend-icon.poi-veyr {
    --map-icon-image: url("/assets/images/map/veyr-target.webp");
    color: var(--map-color-special-violet);
    border: 2px solid currentColor;
    border-radius: 5px;
    background-size: 82%;
    filter: drop-shadow(0 0 8px rgba(181, 108, 255, 0.6));
}

.poi-veyr.veyr-rift .poi-icon::before,
.poi-veyr.veyr-rift .poi-icon::after {
    clip-path: none;
}

.legend-icon.poi-veyr.veyr-rift::before,
.legend-icon.poi-veyr.veyr-rift::after {
    display: none;
}

.poi-veyr.veyr-rift .poi-icon::before {
    inset: -7%;
    border: 1px solid rgba(34, 211, 238, 0.52);
    border-radius: 50%;
    background:
        conic-gradient(from 0deg, rgba(167, 139, 250, 0), rgba(167, 139, 250, 0.44), rgba(34, 211, 238, 0.1), rgba(167, 139, 250, 0)),
        radial-gradient(circle, rgba(34, 211, 238, 0.08), transparent 60%);
    opacity: 0.68;
}

.poi-veyr.veyr-rift .poi-icon::after {
    inset: 22%;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.36), rgba(34, 211, 238, 0.16) 28%, transparent 62%);
    opacity: 0.58;
}

.poi-veyr.veyr-beam-away {
    pointer-events: none;
    animation: veyrPoiBeamAway 0.9s ease-in forwards;
}

.poi-veyr.veyr-beam-away .poi-icon {
    animation: none;
    filter: drop-shadow(0 0 18px rgba(34, 211, 238, 0.9)) drop-shadow(0 0 34px rgba(167, 139, 250, 0.72));
}

.veyr-failure-blast {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--blast-size);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    z-index: 34;
    transform: translate(-50%, -50%) scale(0.02);
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.42) 0 2%, rgba(255, 80, 120, 0.28) 3% 9%, rgba(167, 139, 250, 0.16) 18%, transparent 62%),
        conic-gradient(from 0deg, rgba(34, 211, 238, 0.0), rgba(255, 80, 120, 0.38), rgba(167, 139, 250, 0.28), rgba(34, 211, 238, 0.0));
    border: 2px solid rgba(255, 80, 120, 0.74);
    box-shadow:
        0 0 22px rgba(255, 80, 120, 0.82),
        inset 0 0 34px rgba(34, 211, 238, 0.26);
    mix-blend-mode: screen;
    animation: veyrFailureBlast 3s ease-out forwards;
}

.veyr-mothership-explosion {
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.98) 0 4%, rgba(103, 232, 249, 0.86) 5% 12%, rgba(192, 132, 252, 0.56) 17% 29%, transparent 64%),
        conic-gradient(from 20deg, transparent, rgba(103, 232, 249, 0.75), transparent 20%, rgba(250, 204, 21, 0.72), transparent 42%, rgba(192, 132, 252, 0.78), transparent 68%);
    border-color: rgba(207, 250, 254, 0.96);
    box-shadow:
        0 0 28px rgba(103, 232, 249, 0.96),
        0 0 52px rgba(192, 132, 252, 0.72),
        inset 0 0 38px rgba(255, 255, 255, 0.68);
}

.veyr-jump-arrival-blast {
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.94) 0 4%, rgba(103, 232, 249, 0.78) 5% 14%, rgba(192, 132, 252, 0.4) 22%, transparent 62%),
        conic-gradient(from 12deg, transparent, rgba(103, 232, 249, 0.68), transparent 24%, rgba(192, 132, 252, 0.64), transparent 58%);
    border-color: rgba(165, 243, 252, 0.9);
    box-shadow:
        0 0 20px rgba(103, 232, 249, 0.86),
        0 0 36px rgba(192, 132, 252, 0.58),
        inset 0 0 24px rgba(255, 255, 255, 0.52);
    animation: veyrJumpArrivalBlast 1.7s ease-out forwards;
}

@keyframes veyrPoiBeamAway {
    0% {
        opacity: 1;
        transform: translate(var(--poi-shift, -50%), var(--poi-shift, -50%)) scale(1);
    }
    45% {
        opacity: 0.95;
        transform: translate(var(--poi-shift, -50%), var(--poi-shift, -50%)) scale(1.16);
        filter: brightness(1.5) saturate(1.4);
    }
    100% {
        opacity: 0;
        transform: translate(var(--poi-shift, -50%), var(--poi-shift, -50%)) scale(0.08) rotate(18deg);
        filter: blur(5px) brightness(2);
    }
}

@keyframes veyrFailureBlast {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.02);
    }
    12% {
        opacity: 1;
    }
    58% {
        opacity: 0.88;
        transform: translate(-50%, -50%) scale(0.72);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.18);
        filter: blur(3px);
    }
}

@keyframes veyrJumpArrivalBlast {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.08);
    }
    16% {
        opacity: 1;
    }
    62% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(0.7);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(2px);
    }
}

@keyframes veyrMothershipImminentCore {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.09);
    }
}

@keyframes veyrMothershipImminentRing {
    0% {
        opacity: 0.35;
        transform: scale(0.82) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.12) rotate(12deg);
    }
    100% {
        opacity: 0.35;
        transform: scale(0.82) rotate(24deg);
    }
}

.poi-pirate {
    --poi-cells: 3;
    --map-icon-image: url("/assets/images/map/pirate-base-v2.webp");
    color: var(--map-color-pirate);
}

.poi-pirate.pirate-skirmish {
    --poi-cells: 1;
    --map-icon-image: url("/assets/images/map/pirate-patrol.webp");
    color: var(--map-color-pirate);
}

.poi-pirate.poi-abandoned-wreck,
.poi-pirate.abandoned-wreck,
.legend-icon.poi-pirate.poi-abandoned-wreck {
    --poi-cells: 2;
    --poi-shift: -25%;
    --map-icon-image: url("/assets/images/map/debris-field.webp");
    color: #ffd166;
}

.poi-pirate.poi-training-fleet,
.poi-pirate.training-fleet {
    --poi-cells: 1;
    --map-icon-image: url("/assets/images/map/fleet-own.webp");
    color: var(--map-color-special-cyan);
}

.poi-council-control {
    --poi-cells: 4;
    --poi-shift: -37.5%;
    --map-icon-image: url("/assets/images/map/council-control-platform-v2.webp");
    color: var(--map-color-special-gold);
}

.poi-council-control.council-control-vertical-axis {
    --poi-shift-x: -62.5%;
}

.poi-council-control .council-owner-tag,
.poi-council .council-owner-tag {
    position: absolute;
    left: 50%;
    top: calc(100% + 4px);
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    max-width: calc(var(--map-cell) * 5);
    padding: 2px 6px;
    border: 1px solid rgba(255, 222, 132, 0.62);
    border-radius: 6px;
    background: rgba(23, 18, 7, 0.88);
    color: #ffe28a;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    text-shadow: 0 0 8px rgba(255, 226, 138, 0.55);
    box-shadow: 0 0 10px rgba(215, 179, 90, 0.24);
    pointer-events: none;
    z-index: 3;
}

.poi-council .council-owner-tag {
    top: calc(50% + var(--council-visual-radius, 5px) + 4px);
}

.poi-council-control.council-captured-flash .council-owner-tag {
    animation: council-owner-capture-flash 1.25s ease-out both;
}

.poi-council-control.council-captured-flash .poi-icon {
    animation: council-control-capture-pulse 1.25s ease-out both;
}

.poi-fleet {
    --poi-cells: 1;
    --map-icon-image: url("/assets/images/map/fleet-own.webp");
    color: var(--map-color-player-own);
    z-index: 6;
}

.galaxy-map-canvas.canvas-motion-enabled .map-poi {
    min-width: 18px;
    min-height: 18px;
    background: transparent;
}

.galaxy-map-canvas.canvas-motion-enabled .poi-fleet {
    min-width: 28px;
    min-height: 28px;
}

.galaxy-map-canvas.canvas-motion-enabled .poi-veyr.veyr-swarm-convoy {
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
}

.galaxy-map-canvas.canvas-motion-enabled .map-poi .poi-icon,
.galaxy-map-canvas.canvas-motion-enabled .map-poi .poi-compact,
.galaxy-map-canvas.canvas-motion-enabled .poi-veyr::before,
.galaxy-map-canvas.canvas-motion-enabled .poi-veyr::after,
.galaxy-map-canvas.canvas-motion-enabled .map-poi::before,
.galaxy-map-canvas.canvas-motion-enabled .map-poi::after {
    display: none;
}

.galaxy-map.strategic-overview .hive-zone,
.galaxy-map.strategic-overview .map-poi:not(.selected) {
    visibility: hidden;
}

.poi-pirate .poi-icon::before,
.legend-icon.poi-pirate::before {
    inset: 2px;
    border-radius: 50% 50% 45% 45%;
    background: currentColor;
}

.poi-pirate .poi-icon::after,
.legend-icon.poi-pirate::after {
    inset: 6px 3px 7px;
    border-top: 3px solid rgba(6, 14, 21, 0.78);
    border-bottom: 3px solid rgba(6, 14, 21, 0.78);
}

.poi-pirate.pirate-skirmish .poi-icon::before {
    inset: 5px 7px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 193, 90, 0.28);
}

.poi-pirate.pirate-skirmish .poi-icon::after {
    inset: 9px 8px 10px;
    border-top-width: 2px;
    border-bottom-width: 2px;
}

.poi-pirate.poi-abandoned-wreck .poi-icon::before,
.poi-pirate.poi-abandoned-wreck .poi-icon::after,
.poi-pirate.abandoned-wreck .poi-icon::before,
.poi-pirate.abandoned-wreck .poi-icon::after,
.legend-icon.poi-pirate.poi-abandoned-wreck::before,
.legend-icon.poi-pirate.poi-abandoned-wreck::after {
    display: none;
}

.poi-pirate.poi-training-fleet .poi-icon::before,
.poi-pirate.training-fleet .poi-icon::before {
    inset: 3px;
    border-radius: 8px;
    background: rgba(116, 245, 208, 0.16);
    border: 2px dashed currentColor;
    box-shadow: 0 0 12px rgba(116, 245, 208, 0.45);
}

.poi-pirate.poi-training-fleet .poi-icon::after,
.poi-pirate.training-fleet .poi-icon::after {
    inset: 8px 5px;
    clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%);
    background: currentColor;
    border: 0;
}

.poi-council-control .poi-icon::before,
.legend-icon.poi-council-control::before {
    inset: 3px;
    border-radius: 6px;
    background:
        radial-gradient(circle, rgba(255, 244, 180, 0.35), rgba(215, 179, 90, 0.12) 55%, transparent 68%),
        linear-gradient(135deg, rgba(255, 244, 180, 0.3), rgba(215, 179, 90, 0.12));
    border: 2px solid currentColor;
    box-shadow: 0 0 18px rgba(215, 179, 90, 0.44), inset 0 0 14px rgba(255, 244, 180, 0.18);
}

.poi-council-control .poi-icon::after,
.legend-icon.poi-council-control::after {
    inset: 9px;
    border: 2px solid rgba(255, 244, 180, 0.8);
    border-radius: 50%;
    background: transparent;
}

@keyframes council-owner-capture-flash {
    0% {
        transform: translateX(-50%) scale(0.9);
        opacity: 0;
    }
    18% {
        transform: translateX(-50%) scale(1.45);
        opacity: 1;
        box-shadow: 0 0 22px rgba(255, 226, 138, 0.9), 0 0 42px rgba(215, 179, 90, 0.5);
    }
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
}

@keyframes council-control-capture-pulse {
    0% {
        filter: drop-shadow(0 0 7px currentColor);
    }
    20% {
        filter: drop-shadow(0 0 18px rgba(255, 226, 138, 0.95)) drop-shadow(0 0 34px rgba(215, 179, 90, 0.7));
    }
    100% {
        filter: drop-shadow(0 0 9px currentColor);
    }
}

.poi-fleet .poi-icon::before,
.legend-icon.poi-fleet::before {
    inset: 2px 4px;
    clip-path: polygon(50% 0, 100% 100%, 50% 76%, 0 100%);
    background: currentColor;
}

.poi-fleet .poi-icon::after,
.legend-icon.poi-fleet::after {
    inset: 10px 8px 3px;
    border-radius: 50%;
    background: rgba(6, 14, 21, 0.55);
}

.poi-fleet:not(.fleet-scout) .poi-icon::before,
.poi-fleet:not(.fleet-scout) .poi-icon::after,
.legend-icon.poi-fleet:not(.fleet-scout)::before,
.legend-icon.poi-fleet:not(.fleet-scout)::after {
    display: none;
}

.legend-icon.poi-fleet:not(.fleet-scout) {
    border: 1px solid currentColor;
    border-radius: 50%;
    background-color: rgba(6, 14, 21, 0.72);
    box-shadow: 0 0 8px color-mix(in srgb, currentColor 48%, transparent);
}

.poi-fleet.fleet-own {
    --map-icon-image: url("/assets/images/map/fleet-player-v2.png");
    color: var(--map-color-player-own);
}

.poi-fleet.fleet-alliance {
    --map-icon-image: url("/assets/images/map/fleet-player-v2.png");
    color: var(--map-color-player-alliance);
}

.poi-fleet.fleet-other {
    --map-icon-image: url("/assets/images/map/fleet-player-v2.png");
    color: var(--map-color-player-foreign);
}

.poi-fleet.fleet-pirate {
    --map-icon-image: url("/assets/images/map/fleet-pirate-v2.png");
    color: var(--map-color-pirate);
}

.poi-fleet.fleet-veyr {
    --map-icon-image: url("/assets/images/map/fleet-veyr-v2.png");
    color: var(--map-color-special-violet);
}

.poi-fleet.fleet-scout {
    --map-icon-image: url("/assets/images/map/fleet-scout.svg");
    color: var(--map-color-special-violet);
}

.poi-fleet.fleet-scout .poi-icon::before {
    display: block;
    inset: 0;
    clip-path: none;
    border-radius: 50%;
    border: 1px solid rgba(196, 142, 255, 0.55);
    background: transparent;
    animation: scout-ring-pulse 1.8s ease-in-out infinite;
}

.poi-fleet.fleet-scout .poi-icon::after {
    display: block;
    inset: 8px;
    border: 1px dashed rgba(214, 185, 255, 0.75);
    border-radius: 50%;
    background: transparent;
}

@keyframes wormhole-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes scout-ring-pulse {
    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.94);
    }

    50% {
        opacity: 0.95;
        transform: scale(1.08);
    }
}

@keyframes shield-marker-pulse {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(0.94) rotate(0deg);
        filter: brightness(0.95);
    }

    50% {
        opacity: 0.95;
        transform: scale(1.06) rotate(18deg);
        filter: brightness(1.18);
    }
}

@keyframes shield-status-sweep {
    0%,
    35% {
        transform: translateX(0) skewX(-18deg);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    80%,
    100% {
        transform: translateX(430%) skewX(-18deg);
        opacity: 0;
    }
}

@keyframes jump-pulse {
    0%, 100% {
        transform: scale(0.72);
        opacity: 0.55;
    }
    50% {
        transform: scale(1.28);
        opacity: 1;
    }
}

@keyframes jump-core-pulse {
    0%, 100% {
        transform: scale(0.88);
        opacity: 0.62;
    }
    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}

@keyframes alert-border-pulse {
    0%, 100% {
        opacity: 0.24;
        box-shadow: inset 0 0 0 rgba(255, 79, 94, 0);
    }
    50% {
        opacity: 1;
        box-shadow: inset 0 0 28px rgba(255, 79, 94, 0.34);
    }
}

@keyframes command-jump-urgent {
    from {
        transform: translateY(0);
        border-color: rgba(91, 215, 255, 0.5);
    }
    to {
        transform: translateY(-2px);
        border-color: rgba(255, 207, 107, 0.78);
        box-shadow: 0 16px 42px rgba(0, 0, 0, 0.36), 0 0 30px rgba(255, 207, 107, 0.24);
    }
}

@keyframes alert-edge-pulse {
    from {
        opacity: 0.42;
        filter: saturate(0.92);
    }

    to {
        opacity: 1;
        filter: saturate(1.28) brightness(1.08);
    }
}

@keyframes critical-warning-in {
    from {
        opacity: 0;
        transform: scale(1.02);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes threat-border-pulse {
    from {
        opacity: 0.42;
        filter: saturate(0.92);
    }

    to {
        opacity: 1;
        filter: saturate(1.28) brightness(1.08);
    }
}

@keyframes threat-impact-flash {
    0% {
        opacity: 0;
        box-shadow: inset 0 0 0 rgba(255, 79, 94, 0);
        transform: scale(1);
    }

    10% {
        opacity: 1;
        box-shadow: inset 0 0 80px rgba(255, 79, 94, 0.62), 0 0 70px rgba(255, 79, 94, 0.46);
        transform: scale(1.01);
    }

    30% {
        opacity: 0.78;
        box-shadow: inset 0 0 52px rgba(255, 79, 94, 0.42), 0 0 50px rgba(255, 79, 94, 0.28);
    }

    100% {
        opacity: 0;
        box-shadow: inset 0 0 14px rgba(255, 79, 94, 0.05), 0 0 0 rgba(255, 79, 94, 0);
        transform: scale(1);
    }
}

@keyframes veyr-structure-impact-flash {
    0% {
        opacity: 0;
        box-shadow: inset 0 0 0 rgba(192, 132, 252, 0);
        transform: scale(1);
    }

    10% {
        opacity: 1;
        box-shadow: inset 0 0 90px rgba(192, 132, 252, 0.68), 0 0 76px rgba(168, 85, 247, 0.5);
        transform: scale(1.01);
    }

    32% {
        opacity: 0.8;
        box-shadow: inset 0 0 58px rgba(192, 132, 252, 0.46), 0 0 54px rgba(168, 85, 247, 0.3);
    }

    100% {
        opacity: 0;
        box-shadow: inset 0 0 16px rgba(192, 132, 252, 0.05), 0 0 0 rgba(168, 85, 247, 0);
        transform: scale(1);
    }
}

@keyframes threat-card-impact {
    from {
        border-color: rgba(255, 79, 94, 0.95);
        transform: translateX(-2px);
    }

    to {
        border-color: rgba(255, 207, 107, 0.92);
        transform: translateX(2px);
    }
}

.jump-arrival-animation {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    display: grid;
    place-items: center;
    animation: jump-fade 2.4s ease-out forwards;
    background:
        radial-gradient(circle, rgba(91, 215, 255, 0.38), rgba(91, 215, 255, 0.12) 24%, transparent 58%),
        rgba(6, 14, 21, 0.22);
}

.jump-arrival-animation.shifted {
    background:
        radial-gradient(circle, rgba(255, 98, 98, 0.42), rgba(242, 201, 76, 0.14) 25%, transparent 58%),
        rgba(38, 8, 12, 0.28);
}

.jump-arrival-animation span {
    width: min(52vw, 520px);
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    box-shadow: 0 0 42px rgba(91, 215, 255, 0.72), inset 0 0 46px rgba(91, 215, 255, 0.42);
    animation: jump-ring 1.35s ease-out forwards;
}

.jump-arrival-animation.shifted span {
    box-shadow: 0 0 42px rgba(255, 98, 98, 0.72), inset 0 0 46px rgba(255, 98, 98, 0.42);
}

.jump-page-flash {
    position: fixed;
    inset: 0;
    z-index: 230;
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
}

.jump-page-flash.active {
    animation: jump-page-flash 3.4s ease-out;
}

.jump-page-flash span {
    width: min(82vmin, 760px);
    aspect-ratio: 1;
    border: 2px solid rgba(91, 215, 255, 0.66);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.42), transparent 7%),
        radial-gradient(circle, rgba(91, 215, 255, 0.34), transparent 34%),
        radial-gradient(circle, transparent 44%, rgba(91, 215, 255, 0.18) 45%, transparent 58%);
    box-shadow: 0 0 80px rgba(91, 215, 255, 0.44);
}

.jump-page-flash.shifted {
    background: rgba(80, 12, 20, 0.24);
}

.jump-page-flash.shifted span {
    border-color: rgba(255, 79, 94, 0.7);
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.38), transparent 7%),
        radial-gradient(circle, rgba(255, 79, 94, 0.34), transparent 34%),
        radial-gradient(circle, transparent 44%, rgba(255, 79, 94, 0.18) 45%, transparent 58%);
    box-shadow: 0 0 90px rgba(255, 79, 94, 0.44);
}

@keyframes jump-ring {
    from {
        transform: scale(0.08) rotate(0deg);
        opacity: 0;
    }
    18% {
        opacity: 1;
    }
    to {
        transform: scale(1.2) rotate(160deg);
        opacity: 0;
    }
}

@keyframes jump-fade {
    0%, 72% {
        opacity: 1;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes jump-page-flash {
    0% {
        opacity: 0;
        transform: scale(0.92);
    }
    18% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.18);
    }
}

.poi-table {
    max-width: 1180px;
    margin: 24px auto 0;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(12, 24, 34, 0.72);
}

.poi-table h2 {
    font-size: clamp(1.5rem, 3vw, 2.3rem);
}

.poi-table article {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(160px, auto) minmax(120px, auto);
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.poi-table article span {
    color: var(--muted);
}

.poi-table form {
    margin: 0;
}

.audit-panel {
    max-width: 1180px;
    margin: 24px auto 0;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(12, 24, 34, 0.72);
}

.audit-panel h2 {
    font-size: clamp(1.5rem, 3vw, 2.4rem);
}

.audit-list {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.audit-row {
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) minmax(180px, 1fr) minmax(180px, 1fr);
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
}

.audit-row strong {
    color: var(--text);
}

.page-shell {
    overflow: visible;
    background:
        radial-gradient(circle at 18% 12%, rgba(91, 215, 255, 0.18), transparent 26rem),
        radial-gradient(circle at 84% 18%, rgba(242, 201, 76, 0.14), transparent 22rem),
        linear-gradient(180deg, #071018 0%, #0b151c 48%, #101820 100%);
}

.hero {
    position: relative;
    min-height: 92vh;
    padding: 24px clamp(18px, 5vw, 72px) 56px;
    isolation: isolate;
}

.stars {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.72) 1px, transparent 1px),
        radial-gradient(circle, rgba(91, 215, 255, 0.5) 1px, transparent 1px);
    background-position: 0 0, 34px 28px;
    background-size: 92px 92px, 138px 138px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
    opacity: 0.55;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1180px;
    margin: 0 auto;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    letter-spacing: 0;
}

.brand-mark {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(91, 215, 255, 0.24));
}

nav {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.95rem;
}

nav a {
    padding: 10px 12px;
    border-radius: 6px;
}

nav a:hover,
.nav-cta {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.78fr);
    gap: clamp(28px, 6vw, 76px);
    align-items: center;
    max-width: 1180px;
    min-height: calc(92vh - 96px);
    margin: 0 auto;
    padding-top: 32px;
}

.eyebrow {
    margin: 0 0 14px;
    color: var(--cyan);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    max-width: 760px;
    margin-bottom: 18px;
    font-size: clamp(3.8rem, 9vw, 8.8rem);
    line-height: 0.88;
    letter-spacing: 0;
}

h2 {
    margin-bottom: 0;
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: 0;
}

h3 {
    margin-bottom: 10px;
    font-size: 1.08rem;
}

.lead {
    max-width: 680px;
    color: #d6e0ea;
    font-size: clamp(1.08rem, 2vw, 1.38rem);
    line-height: 1.65;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 13px 18px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
    font-weight: 800;
    transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.button.primary {
    border-color: rgba(242, 201, 76, 0.78);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)),
        var(--gold);
    color: #14110a;
}

.button.secondary {
    background: rgba(255, 255, 255, 0.07);
}

.button:hover:not(:disabled),
.button:focus-visible:not(:disabled) {
    border-color: rgba(91, 215, 255, 0.48);
    background-color: rgba(91, 215, 255, 0.11);
    transform: translateY(-1px);
}

.button.primary:hover:not(:disabled),
.button.primary:focus-visible:not(:disabled) {
    border-color: rgba(255, 234, 154, 0.9);
    background-color: var(--gold);
}

.button.action-icon::before {
    --action-icon: none;
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 22px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background-color: currentColor;
    color: var(--cyan);
    font-size: 0.88rem;
    line-height: 1;
    content: "";
    mask: var(--action-icon) center / 17px 17px no-repeat;
    -webkit-mask: var(--action-icon) center / 17px 17px no-repeat;
}

.button.action-base::before {
    --action-icon: url("/assets/icons/actions/base.svg");
}

.button.action-jump::before {
    --action-icon: url("/assets/icons/actions/jump.svg");
    color: var(--cyan);
}

.button.action-hive::before {
    --action-icon: url("/assets/icons/actions/hive.svg");
    color: var(--green);
}

.button.action-event-focus::before {
    --action-icon: url("/assets/icons/actions/command.svg");
    color: #d4a8ff;
}

.button.action-performance::before {
    --action-icon: url("/assets/icons/actions/repair.svg");
    color: var(--cyan);
}

.button.action-build::before {
    --action-icon: url("/assets/icons/actions/build.svg");
    color: var(--green);
}

.button.action-upgrade::before {
    --action-icon: url("/assets/icons/actions/upgrade.svg");
    color: var(--gold);
}

.button.action-research::before {
    --action-icon: url("/assets/icons/actions/research.svg");
    color: #d4a8ff;
}

.button.action-repair::before {
    --action-icon: url("/assets/icons/actions/repair.svg");
    color: var(--green);
}

.button.action-ship::before {
    --action-icon: url("/assets/icons/actions/ship.svg");
    color: var(--cyan);
}

.button.action-save::before {
    --action-icon: url("/assets/icons/actions/save.svg");
    color: var(--green);
}

.button.action-cancel::before {
    --action-icon: url("/assets/icons/actions/cancel.svg");
    color: var(--red);
}

.button.stacked-button {
    flex-direction: column;
    gap: 2px;
    line-height: 1.15;
}

.button.stacked-button small {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 800;
}

.button:disabled,
button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.sector-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
    overflow: hidden;
}

.sector-toolbar,
.sector-stats {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.space-map {
    position: relative;
    aspect-ratio: 1 / 0.82;
    min-height: 320px;
    background:
        linear-gradient(rgba(91, 215, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 215, 255, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(91, 215, 255, 0.14), transparent 21rem);
    background-size: 44px 44px, 44px 44px, auto;
    border-block: 1px solid var(--line);
}

.poi {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 24px currentColor;
}

.poi.base {
    color: var(--cyan);
    background: var(--cyan);
}

.poi.asteroid {
    color: #c7b79a;
    background: #c7b79a;
}

.poi.veyr {
    color: var(--red);
    background: var(--red);
}

.poi.market {
    color: var(--green);
    background: var(--green);
}

.route {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(91, 215, 255, 0.72), transparent);
    transform-origin: left center;
}

.route-one {
    left: 19%;
    top: 44%;
    width: 43%;
    transform: rotate(-18deg);
}

.route-two {
    left: 35%;
    top: 67%;
    width: 42%;
    transform: rotate(-10deg);
}

.sector-stats strong {
    display: block;
    color: var(--text);
    font-size: 1.1rem;
}

.content-band {
    padding: 72px clamp(18px, 5vw, 72px);
}

.content-band.muted {
    background: rgba(255, 255, 255, 0.035);
}

.section-heading,
.feature-grid,
.roadmap-list {
    max-width: 1180px;
    margin-inline: auto;
}

.section-heading {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 32px;
    align-items: end;
    margin-bottom: 30px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.feature-card {
    min-height: 190px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-strong);
}

.feature-card p,
.roadmap-item p {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.55;
}

.shop-panel {
    display: grid;
    gap: 24px;
}

.shop-panel h2 {
    margin: 8px 0 0;
}

.shop-premium-grid {
    margin-top: -6px;
}

.shop-premium-grid .feature-card {
    display: grid;
    gap: 12px;
    align-content: start;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, rgba(245, 158, 11, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(91, 215, 255, 0.08), rgba(6, 10, 18, 0.86)),
        var(--panel-strong);
}

.shop-premium-grid .feature-card::before,
.shop-point-card::before {
    content: "";
    display: block;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    border: 1px solid rgba(91, 215, 255, 0.24);
    background-color: var(--cyan);
    mask: url("/assets/icons/actions/shop.svg") center / 26px 26px no-repeat;
    -webkit-mask: url("/assets/icons/actions/shop.svg") center / 26px 26px no-repeat;
}

.base-skin-dashboard {
    margin-top: 18px;
}

.base-skin-selection-grid,
.base-skin-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.base-skin-card {
    min-height: 0;
}

.shop-premium-grid .base-skin-card::before {
    display: none;
}

.base-skin-card .base-skin-preview {
    height: 112px;
    margin: 0 0 6px;
}

.base-skin-card.selected {
    border-color: rgba(91, 215, 255, 0.72);
    box-shadow: 0 0 0 1px rgba(91, 215, 255, 0.26), 0 0 22px rgba(91, 215, 255, 0.16);
}

.base-skin-card.locked {
    opacity: 0.74;
}

.base-skin-card.locked .base-skin-preview {
    filter: grayscale(0.65) brightness(0.72);
}

.base-label-frame-dashboard {
    margin-top: 18px;
}

.base-label-frame-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.base-label-frame-card {
    min-height: 0;
}

.base-label-frame-card.selected {
    border-color: rgba(91, 215, 255, 0.72);
    box-shadow: 0 0 0 1px rgba(91, 215, 255, 0.26), 0 0 22px rgba(91, 215, 255, 0.16);
}

.base-label-frame-card.locked {
    opacity: 0.68;
}

.base-label-frame-preview {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 78px;
    margin-bottom: 8px;
    color: #5bd7ff;
    background: radial-gradient(circle, rgba(91, 215, 255, 0.1), transparent 68%);
}

.base-label-frame-preview b {
    position: relative;
    min-width: 154px;
    padding: 8px 14px;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: rgba(3, 10, 17, 0.86);
    text-align: center;
}

.base-label-frame-preview.frame-corners b {
    border-style: solid;
    border-width: 0 8px;
    border-radius: 0;
}

.base-label-frame-preview.frame-double b {
    border: 3px double currentColor;
}

.base-label-frame-preview.frame-notched b {
    border-radius: 0;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

.shop-point-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, rgba(91, 215, 255, 0.15), transparent 38%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(6, 10, 18, 0.9));
}

.shop-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.shop-tabs a {
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.04);
}

.shop-tabs a.active,
.shop-tabs a:hover,
.shop-tabs a:focus-visible {
    color: var(--text);
    border-color: rgba(91, 215, 255, 0.55);
}

.shop-point-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.shop-point-card strong {
    display: block;
    font-size: 2rem;
    line-height: 1;
    color: var(--cyan);
}

.shop-dialog.game-overlay {
    width: min(1100px, calc(100vw - 24px));
    height: min(900px, calc(100dvh - 24px));
    max-width: 1100px;
}

.shop-dialog-body {
    min-height: 0;
    height: calc(100% - 92px);
    overflow: auto;
    overscroll-behavior: contain;
}

.shop-workspace {
    display: grid;
    gap: 18px;
    padding: 0 2px 18px;
}

.shop-section-tabs {
    position: sticky;
    z-index: 4;
    top: 0;
    display: grid;
    grid-template-columns: repeat(5, 72px);
    justify-content: center;
    gap: 7px;
    padding: 3px 0 10px;
    background: linear-gradient(180deg, rgba(6, 10, 18, .99) 76%, transparent);
}

.shop-section-tabs a {
    min-width: 0;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 4px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 10px;
    color: var(--muted);
    background: rgba(15, 23, 42, .78);
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.shop-section-tabs img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 7px;
    object-fit: cover;
}

.shop-section-tabs a.active,
.shop-section-tabs a:hover,
.shop-section-tabs a:focus-visible {
    border-color: rgba(255, 255, 255, .72);
    color: #fff;
    background: rgba(51, 65, 85, .86);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .14), 0 0 22px rgba(91, 215, 255, .2);
}

@media (hover: hover) {
    .shop-section-tabs a:hover {
        transform: translateY(-2px);
    }
}

.shop-balance-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(91, 215, 255, .28);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(14, 116, 144, .2), rgba(15, 23, 42, .82));
}

.shop-balance-banner > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.shop-balance-banner span,
.shop-balance-banner small {
    color: var(--muted);
}

.shop-balance-banner strong {
    color: var(--cyan);
    font-size: 1.35rem;
}

.shop-balance-banner.is-active strong {
    color: #86efac;
}

.shop-offer-group {
    display: grid;
    gap: 9px;
}

.shop-offer-group > h3 {
    margin: 0;
    font-size: .92rem;
}

.shop-offer-grid,
.shop-premium-packages,
.shop-skin-grid,
.shop-crate-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.shop-offer-card,
.shop-premium-package,
.shop-skin-card,
.shop-crate-card {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 13px;
    border: 2px solid rgba(148, 163, 184, .54);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(30, 41, 59, .76), rgba(2, 6, 23, .78));
}

.shop-offer-card.rarity-uncommon,
.shop-crate-card.rarity-uncommon { border-color: rgba(34, 197, 94, .72); }
.shop-offer-card.rarity-rare,
.shop-crate-card.rarity-rare { border-color: rgba(59, 130, 246, .78); }
.shop-offer-card.rarity-epic,
.shop-crate-card.rarity-epic { border-color: rgba(168, 85, 247, .82); }
.shop-offer-card.rarity-legendary,
.shop-crate-card.rarity-legendary { border-color: rgba(245, 158, 11, .86); }

.shop-offer-card.is-sold-out {
    filter: grayscale(.78);
    opacity: .55;
    background: rgba(15, 23, 42, .52);
}

.shop-offer-card-head {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.shop-offer-card-head .inventory-slot-icon {
    width: 52px;
    height: 52px;
}

.shop-offer-card h4,
.shop-skin-card h3,
.shop-offer-card p,
.shop-skin-card p {
    margin: 0;
}

.shop-offer-card h4 {
    font-size: .98rem;
}

.shop-offer-card-head small,
.shop-offer-card p,
.shop-skin-card p,
.shop-premium-package span,
.shop-crate-card span {
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.4;
}

.shop-offer-facts {
    display: grid;
    gap: 3px;
    margin-top: auto;
}

.shop-offer-facts span {
    color: var(--muted);
    font-size: .75rem;
}

.shop-buy-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.shop-quantity-stepper {
    display: grid;
    grid-template-columns: 38px 46px 38px 44px;
    gap: 4px;
}

.shop-quantity-stepper button,
.shop-quantity-stepper input {
    min-width: 0;
    min-height: 40px;
    padding: 5px;
    border: 1px solid rgba(148, 163, 184, .3);
    border-radius: 8px;
    color: var(--text);
    background: rgba(2, 6, 23, .72);
    text-align: center;
}

.shop-quantity-stepper input {
    appearance: textfield;
    font-size: 16px;
}

.shop-quantity-stepper input::-webkit-inner-spin-button,
.shop-quantity-stepper input::-webkit-outer-spin-button {
    appearance: none;
}

.shop-premium-package,
.shop-crate-card {
    border-width: 1px;
}

.shop-secondary-info {
    padding: 11px 13px;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 12px;
    background: rgba(15, 23, 42, .55);
}

.shop-secondary-info summary {
    cursor: pointer;
    font-weight: 700;
}

.shop-secondary-info > :not(summary) {
    margin-top: 12px;
}

.shop-skin-card .base-skin-preview {
    height: 110px;
}

.shop-week-reset {
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
    text-align: center;
}

@media (max-width: 760px) {
    .shop-panel {
        gap: 16px;
    }

    .shop-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        margin-inline: calc(var(--page-pad, 16px) * -1);
        padding: 2px var(--page-pad, 16px) 8px;
        scroll-snap-type: x proximity;
    }

    .shop-tabs::-webkit-scrollbar {
        display: none;
    }

    .shop-tabs a {
        flex: 0 0 auto;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .shop-premium-grid,
    .base-skin-shop-grid,
    .shop-point-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .shop-premium-grid .feature-card,
    .shop-point-card {
        gap: 10px;
        padding: 13px;
    }

    .shop-premium-grid .feature-card::before,
    .shop-point-card::before {
        width: 38px;
        height: 38px;
        mask-size: 22px 22px;
        -webkit-mask-size: 22px 22px;
    }

    .shop-panel .hero-actions,
    .shop-panel .compact-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .shop-panel .button {
        width: 100%;
        min-height: 44px;
        white-space: normal;
    }

    .base-skin-card .base-skin-preview {
        height: 96px;
    }

    .shop-dialog.game-overlay {
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none;
    }

    .shop-dialog-body {
        height: calc(100% - 78px);
    }

    .shop-workspace {
        gap: 14px;
        padding-bottom: calc(18px + env(safe-area-inset-bottom));
    }

    .shop-section-tabs {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 5px;
    }

    .shop-balance-banner {
        align-items: flex-start;
        padding: 10px 11px;
    }

    .shop-balance-banner small {
        max-width: 54%;
        text-align: right;
    }

    .shop-offer-grid,
    .shop-premium-packages,
    .shop-skin-grid,
    .shop-crate-grid {
        grid-template-columns: 1fr;
    }

    .shop-offer-card,
    .shop-premium-package,
    .shop-skin-card,
    .shop-crate-card {
        padding: 11px;
    }

    .shop-buy-form {
        grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
    }

    .shop-quantity-stepper {
        grid-template-columns: 40px 48px 40px;
    }

    .shop-quantity-max {
        display: none;
    }
}

.reports-layout {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    max-width: 1280px;
    margin: 0 auto;
}

.reports-sidebar {
    display: grid;
    gap: 4px;
    align-content: start;
}

.messages-layout {
    grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
    height: clamp(520px, calc(100vh - 230px), 860px);
    align-items: stretch;
}

.messages-dialog.game-overlay {
    width: min(1180px, calc(100vw - 24px));
    height: min(900px, calc(100dvh - 24px));
    overflow: hidden;
}

.messages-dialog.game-overlay[open] {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
}

.messages-dialog-body {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: auto;
    min-height: 0;
    overflow: hidden;
}

.messages-dialog .message-channel-tabs {
    position: relative;
    top: auto;
    width: min(100%, 560px);
    max-width: 560px;
    margin-bottom: 10px;
    padding-top: 0;
}

.messages-dialog .messages-layout {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
}

.message-mobile-back {
    display: none;
}

.messages-sidebar,
.message-detail-panel {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.messages-sidebar {
    display: flex;
    flex-direction: column;
    padding-right: 4px;
}

.message-combat-filters {
    position: sticky;
    top: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(5, 42px);
    flex: 0 0 auto;
    gap: 5px;
    margin-bottom: 6px;
    padding: 2px 2px 7px 0;
    background: linear-gradient(180deg, rgba(8, 13, 24, 0.98) 76%, transparent);
}

.message-combat-filter {
    display: grid;
    place-items: center;
    min-width: 0;
    aspect-ratio: 1;
    padding: 3px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.045);
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.message-combat-filter img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
}

.message-combat-filter:hover,
.message-combat-filter:focus-visible,
.message-combat-filter.is-active {
    border-color: rgba(244, 250, 255, 0.76);
    background: rgba(91, 215, 255, 0.12);
    box-shadow: 0 0 0 2px rgba(91, 215, 255, 0.2), 0 8px 18px rgba(0, 0, 0, 0.24);
    outline: none;
}

.message-detail-panel {
    scroll-padding-top: 12px;
}

.message-channel-tabs {
    display: grid;
    grid-template-columns: repeat(var(--message-channel-count, 5), minmax(0, 1fr));
    gap: clamp(4px, 1vw, 8px);
    width: min(100%, 560px);
    max-width: 1280px;
    margin: 0 auto 14px;
    position: sticky;
    top: var(--sticky-offset, 76px);
    z-index: 30;
    padding: 8px 0;
    background:
        linear-gradient(90deg, rgba(8, 13, 24, 0.98), rgba(8, 13, 24, 0) 22px),
        linear-gradient(270deg, rgba(8, 13, 24, 0.98), rgba(8, 13, 24, 0) 22px),
        rgba(8, 13, 24, 0.94);
    background-position: left center, right center, center;
    background-repeat: no-repeat;
    background-size: 26px 100%, 26px 100%, 100% 100%;
    backdrop-filter: blur(10px);
}

.message-channel-tab {
    position: relative;
    display: block;
    min-width: 0;
    aspect-ratio: 1;
    padding: 3px;
    overflow: hidden;
    border: 1px solid rgba(91, 215, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--text);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.message-channel-tab img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
}

.message-channel-tab.primary {
    border-color: rgba(91, 215, 255, 0.74);
    background: rgba(12, 30, 44, 0.96);
    box-shadow: 0 0 0 2px rgba(91, 215, 255, 0.36), 0 8px 24px rgba(0, 0, 0, 0.28);
}

.message-channel-tab.secondary {
    background: rgba(255, 255, 255, 0.055);
}

.message-channel-tab.has-channel-unread {
    border-color: rgba(255, 99, 122, 0.46);
}

.message-channel-tab:hover:not(:disabled),
.message-channel-tab:focus-visible:not(:disabled) {
    border-color: rgba(91, 215, 255, 0.62);
    box-shadow: 0 0 0 2px rgba(91, 215, 255, 0.24), 0 8px 22px rgba(0, 0, 0, 0.3);
    outline: none;
}

.channel-unread-dot {
    position: absolute;
    right: 6px;
    top: 6px;
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #ff4d5e;
    box-shadow: 0 0 0 2px rgba(9, 14, 26, 0.95), 0 0 10px rgba(255, 77, 94, 0.75);
}

.report-detail-panel {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-strong);
}

.onboarding-report-checkpoint {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    padding: 16px;
    border: 1px solid rgba(242, 201, 76, .42);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(242, 201, 76, .1), rgba(7, 24, 38, .82));
}

.onboarding-report-checkpoint.is-complete {
    border-color: rgba(78, 227, 154, .45);
    background: linear-gradient(135deg, rgba(78, 227, 154, .09), rgba(7, 24, 38, .82));
}

.onboarding-report-checkpoint h4,
.onboarding-report-checkpoint p {
    margin: 0;
}

.onboarding-report-checkpoint ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding-left: 1.25rem;
    color: var(--muted);
}

.onboarding-report-checkpoint .button {
    justify-self: start;
}

.report-nav-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    min-height: 44px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--text);
    text-decoration: none;
}

.messages-sidebar .report-nav-item {
    flex: 0 0 auto;
    min-height: 52px;
}

.report-nav-item.active,
.report-nav-item:hover {
    border-color: rgba(91, 215, 255, 0.45);
    background: rgba(91, 215, 255, 0.12);
}

.report-nav-item > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.report-nav-item strong,
.report-nav-item time {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
}

.report-nav-item time {
    color: var(--muted);
    font-size: 0.72rem;
}

.report-nav-item small {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-list-star {
    display: inline-block;
    width: 1.1em;
    margin-right: 4px;
    color: rgba(255, 207, 107, 0.5);
}

.report-nav-item.is-favorite .message-list-star {
    color: #ffcf6b;
    text-shadow: 0 0 10px rgba(255, 207, 107, 0.4);
}

.report-nav-item.is-unread {
    border-color: rgba(255, 207, 107, 0.45);
    background: rgba(255, 207, 107, 0.08);
}

.report-nav-item.is-unread strong::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-radius: 50%;
    background: #ff4d5f;
    vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(255, 77, 95, 0.15);
}

.report-icon {
    position: relative;
    display: inline-flex;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(91, 215, 255, 0.12);
}

.report-kind-visual {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(4, 10, 20, 0.76);
    box-shadow: inset 0 0 10px rgba(91, 215, 255, 0.08);
}

.report-kind-primary {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 7px;
    object-fit: cover;
}

.report-kind-own {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(244, 250, 255, 0.78);
    border-radius: 50%;
    background: #08101d;
    object-fit: cover;
    box-shadow: 0 0 7px rgba(91, 215, 255, 0.54);
}

.report-icon::before,
.report-icon::after {
    content: "";
    position: absolute;
}

.report-icon.combat::before {
    left: 6px;
    top: 12px;
    width: 16px;
    height: 3px;
    border-radius: 999px;
    background: #ffcf6b;
    transform: rotate(-35deg);
}

.report-icon.combat::after {
    left: 12px;
    top: 6px;
    width: 3px;
    height: 16px;
    border-radius: 999px;
    background: #ff7b7b;
    transform: rotate(-35deg);
}

.report-icon.spy::before {
    left: 5px;
    top: 8px;
    width: 18px;
    height: 11px;
    border: 2px solid #5bd7ff;
    border-radius: 50%;
}

.report-icon.spy::after {
    left: 12px;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9ff3ff;
}

.report-icon.system::before,
.report-icon.alliance::before,
.report-icon.favorites::before {
    left: 7px;
    top: 7px;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: #5bd7ff;
    box-shadow: 0 0 14px rgba(91, 215, 255, 0.35);
}

.report-icon.alliance::before {
    background: #6ee7b7;
    box-shadow: 0 0 14px rgba(110, 231, 183, 0.35);
}

.report-icon.favorites::before {
    background: #ffcf6b;
    clip-path: polygon(50% 0, 63% 35%, 100% 35%, 70% 56%, 82% 100%, 50% 74%, 18% 100%, 30% 56%, 0 35%, 37% 35%);
}

.message-detail-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
    margin-bottom: 14px;
}

.message-detail-head h3 {
    margin: 0;
}

.message-detail-heading {
    min-width: 0;
    flex: 1 1 auto;
}

.message-title-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

.message-favorite-form {
    margin: 0;
}

.message-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: -2px 0 14px;
}

.message-action-row .compact-form {
    margin: 0;
}

.message-action-row .button,
.message-action-row select {
    min-height: 38px;
}

.message-share-form {
    position: relative;
    margin: 0;
}

.message-share-menu {
    position: relative;
}

.message-share-menu > summary {
    list-style: none;
}

.message-share-menu > summary::-webkit-details-marker {
    display: none;
}

.message-share-button {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(91, 215, 255, 0.45);
    border-radius: 999px;
    background: rgba(91, 215, 255, 0.08);
    color: #9ff3ff;
    cursor: pointer;
}

.message-share-button:hover,
.message-share-button:focus-visible,
.message-share-menu[open] .message-share-button {
    border-color: rgba(91, 215, 255, 0.8);
    background: rgba(91, 215, 255, 0.16);
}

.message-share-button svg {
    width: 20px;
    height: 20px;
    overflow: visible;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.message-share-options {
    position: absolute;
    z-index: 12;
    top: calc(100% + 7px);
    right: 0;
    display: grid;
    min-width: 150px;
    padding: 6px;
    border: 1px solid rgba(91, 215, 255, 0.32);
    border-radius: 10px;
    background: rgba(5, 12, 24, 0.98);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
}

.message-share-options button {
    width: 100%;
    min-height: 38px;
    padding: 7px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.message-share-options button:hover,
.message-share-options button:focus-visible {
    background: rgba(91, 215, 255, 0.13);
    color: #9ff3ff;
}

.message-favorite-button {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 207, 107, 0.45);
    border-radius: 999px;
    background: rgba(255, 207, 107, 0.08);
    color: rgba(255, 207, 107, 0.78);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.message-favorite-button:hover,
.message-favorite-button:focus-visible {
    border-color: rgba(255, 207, 107, 0.8);
    background: rgba(255, 207, 107, 0.15);
    color: #ffcf6b;
}

.message-favorite-button.is-favorite {
    background: rgba(255, 207, 107, 0.18);
    color: #ffcf6b;
    box-shadow: 0 0 18px rgba(255, 207, 107, 0.18);
}

.message-favorite-button:disabled {
    cursor: progress;
    opacity: 0.65;
}

.message-body {
    margin: 0 0 14px;
    color: var(--text);
}

.message-ranking {
    margin: 16px 0;
    border: 1px solid rgba(91, 215, 255, 0.22);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(7, 17, 29, 0.56);
}

.message-ranking-head,
.message-ranking-row {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr) minmax(6rem, auto);
    gap: 10px;
    align-items: baseline;
    padding: 9px 12px;
}

.message-ranking-head {
    grid-template-columns: minmax(0, 1fr) minmax(6rem, auto);
    background: rgba(91, 215, 255, 0.09);
    color: var(--muted);
    font-size: 0.78rem;
}

.message-ranking-head strong {
    color: var(--text);
    font-size: 0.88rem;
}

.message-ranking-head span,
.message-ranking-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.message-ranking-row + .message-ranking-row {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.message-ranking-rank {
    color: var(--muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.message-ranking-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.message-ranking-value {
    white-space: nowrap;
    color: #9ff3ff;
    font-weight: 750;
}

.message-reward-card,
.message-source-card {
    display: grid;
    gap: 8px;
    margin: 14px 0;
    padding: 12px;
    border: 1px solid rgba(91, 215, 255, 0.22);
    border-radius: 8px;
    background: rgba(91, 215, 255, 0.08);
}

.message-reward-card .compact-form,
.message-detail-head .compact-form {
    justify-content: flex-start;
}

.message-reward-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 86px));
    gap: 8px;
    align-items: start;
}

.message-reward-resources {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.message-reward-slot {
    width: 100%;
    max-width: 86px;
    cursor: default;
}

.message-reward-slot .inventory-slot-name {
    font-size: 0.58rem;
}

.message-reward-slot b {
    font-size: 0.68rem;
}

.wormhole-mission-report {
    display: grid;
    gap: 14px;
    margin: 14px 0;
    padding: 14px;
    border: 1px solid rgba(129, 230, 255, 0.24);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(40, 24, 76, 0.72), rgba(6, 24, 38, 0.82));
}

.wormhole-report-hero {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
}

.wormhole-report-hero h3 {
    margin: 0;
}

.wormhole-report-hero > strong {
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--cyan);
    font-size: 0.82rem;
    white-space: nowrap;
}

.wormhole-mission-report.result-success .wormhole-report-hero > strong {
    color: var(--green);
}

.wormhole-mission-report.result-catastrophe .wormhole-report-hero > strong,
.wormhole-mission-report.result-failure .wormhole-report-hero > strong {
    color: #ff8e8e;
}

.wormhole-strength-board,
.wormhole-outcome-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.wormhole-strength-board > div,
.wormhole-outcome-grid > div,
.wormhole-strength-components,
.wormhole-raw-stats,
.wormhole-loot-cards {
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.wormhole-strength-board span,
.wormhole-outcome-grid span,
.wormhole-raw-stats span,
.wormhole-strength-board small,
.wormhole-outcome-grid small,
.wormhole-loot-cards small {
    color: var(--muted);
}

.wormhole-strength-board b {
    color: var(--text);
    font-size: 1.25rem;
}

.wormhole-strength-components > div {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) minmax(120px, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wormhole-strength-components > div:first-of-type {
    border-top: 0;
}

.wormhole-strength-components b,
.wormhole-outcome-grid b {
    color: var(--green);
}

.wormhole-raw-stats {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.wormhole-raw-stats > strong {
    grid-column: 1 / -1;
}

.wormhole-loot-cards .message-reward-grid {
    margin-top: 2px;
}

.wormhole-phases {
    margin-top: 0;
}

.combat-report {
    padding: 0;
    border: 0;
    background: transparent;
}

.combat-report summary {
    cursor: pointer;
    display: grid;
    gap: 4px;
}

.combat-report-glance {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.combat-report-glance > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.04);
}

.combat-report-glance span {
    color: var(--muted);
    font-size: 0.72rem;
}

.combat-report-glance strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.combat-outcome.attacker-win,
.combat-outcome.defender-win {
    color: var(--green);
}

.report-disclosure {
    min-width: 0;
    margin-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.report-disclosure > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 44px;
    padding: 9px 2px;
    cursor: pointer;
}

.report-disclosure > summary span {
    color: var(--muted);
    font-size: 0.76rem;
    text-align: right;
}

.report-disclosure > summary strong,
.combat-round > summary strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.compact-combat-block + .compact-combat-block {
    margin-top: 8px;
}

.combat-report-meta,
.combat-participant-overview,
.combat-sides,
.combat-rounds {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.combat-sides {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.combat-participant-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.combat-participant-overview > div {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.combat-participant-overview h4 {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.combat-participant-entry {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.combat-participant-entry strong,
.combat-participant-entry span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.combat-participant-entry small {
    color: var(--muted);
}

.combat-comparison {
    display: grid;
    gap: 12px;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
}

.combat-comparison-head,
.combat-stat-row,
.combat-bonus-row,
.combat-ship-lines {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(92px, 132px) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.combat-comparison-head {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.combat-comparison-head > span,
.combat-stat-row > span,
.combat-bonus-row > span,
.combat-ship-lines > span {
    justify-self: center;
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0;
}

.combat-party-title {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.combat-party-title:first-child,
.combat-stat-row > strong:first-child,
.combat-bonus-row > strong:first-child,
.combat-ship-lines > small:first-child {
    text-align: left;
}

.combat-party-title:last-child,
.combat-stat-row > strong:last-child,
.combat-bonus-row > strong:last-child,
.combat-ship-lines > small:last-child {
    text-align: right;
}

.combat-party-title strong,
.combat-ship-lines small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.combat-stat-table,
.combat-bonus-table {
    display: grid;
    gap: 4px;
}

.combat-stat-row,
.combat-bonus-row {
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.025);
}

.combat-stat-row strong {
    color: var(--text);
    font-size: 1rem;
}

.combat-stat-bonus {
    display: inline-block;
    margin-left: 6px;
    color: #9ff3ff;
    font-size: 0.72rem;
    font-weight: 700;
}

.combat-stat-bonus.negative {
    color: #ffb1a6;
}

.pirate-heat-delta {
    font-weight: 800;
}

.pirate-heat-delta.increase {
    color: #ff8f86;
}

.pirate-heat-delta.decrease {
    color: #74f0a7;
}

.pirate-heat-report-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.combat-bonus-row strong {
    color: #9ff3ff;
    font-size: 0.88rem;
}

.combat-comparison h4 {
    margin: 2px 0 0;
}

.combat-ship-lines {
    padding-top: 4px;
}

.combat-bonus-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.combat-bonus-details {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.025);
}

.combat-bonus-details summary {
    cursor: pointer;
    color: var(--text);
    font-weight: 700;
}

.combat-bonus-source {
    display: grid;
    gap: 3px;
    margin-top: 8px;
}

.combat-bonus-source strong {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0;
}

.combat-bonus-source span {
    color: var(--text);
    font-size: 0.86rem;
    overflow-wrap: anywhere;
}

.combat-side,
.combat-round {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
}

details.combat-round > summary {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    min-height: 32px;
    cursor: pointer;
}

details.combat-round > summary span {
    color: var(--muted);
    font-size: 0.76rem;
    text-align: right;
}

details.combat-round[open] > summary {
    margin-bottom: 6px;
}

.combat-side h4 {
    margin: 0;
}

.combat-modifiers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.combat-modifiers span {
    padding: 3px 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: var(--text);
    font-size: 0.78rem;
}

.combat-report-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
}

.combat-report-footer .compact-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.combat-report-footer select {
    min-height: 32px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #10202c;
    color: var(--text);
}

@media (max-width: 760px) {
    .reports-sidebar {
        grid-template-columns: 1fr;
        max-height: min(36vh, 300px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 2px;
    }

    .reports-sidebar .report-nav-item {
        min-height: 58px;
        padding: 9px 10px;
    }

    .report-detail-panel {
        padding: 12px;
        scroll-margin-top: calc(var(--sticky-offset, 74px) + 10px);
    }

    .combat-report > summary {
        min-height: 48px;
        padding: 4px 0;
    }

    .combat-report-glance {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .combat-report-meta > small,
    .message-source-card > span,
    .message-source-card > small {
        display: block;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .report-disclosure > summary {
        grid-template-columns: 1fr;
        gap: 2px;
        min-height: 52px;
        padding: 8px 0;
    }

    .report-disclosure > summary span {
        text-align: left;
    }

    .combat-participant-overview {
        grid-template-columns: 1fr;
    }

    .combat-bonus-detail-grid {
        grid-template-columns: 1fr;
    }

    .combat-comparison-head,
    .combat-ship-lines {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .combat-comparison-head > span,
    .combat-ship-lines > span {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .combat-comparison-head .combat-party-title,
    .combat-ship-lines > small {
        grid-row: 2;
    }

    .combat-stat-row,
    .combat-bonus-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px 8px;
    }

    .combat-stat-row > span,
    .combat-bonus-row > span {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .combat-stat-row > strong,
    .combat-bonus-row > strong {
        grid-row: 2;
    }

    .combat-stat-row > strong:last-child,
    .combat-bonus-row > strong:last-child {
        text-align: right;
    }

    .combat-stat-row,
    .combat-bonus-row {
        padding-inline: 7px;
    }

    .combat-stat-bonus {
        display: block;
        margin: 2px 0 0;
    }

    details.combat-round > summary {
        min-height: 44px;
    }

    .combat-report-footer,
    .combat-report-footer .compact-form {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .combat-report-footer select,
    .combat-report-footer .button {
        width: 100%;
        min-height: 44px;
    }

    .wormhole-report-hero {
        display: grid;
        gap: 8px;
    }

    .wormhole-report-hero > strong {
        justify-self: start;
        white-space: normal;
    }

    .wormhole-strength-board,
    .wormhole-outcome-grid,
    .wormhole-raw-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wormhole-strength-components > div {
        grid-template-columns: 1fr;
    }
}

.research-summary {
    display: flex;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto 8px;
}

.research-summary > strong {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 8px 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.66);
    color: #a7f3ff;
    font-size: 0.92rem;
}

.research-summary > strong span {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.research-tree {
    max-width: 1280px;
    margin: 0 auto 28px;
}

.research-tabs {
    display: flex;
    gap: 8px;
    max-width: 1280px;
    margin: 0 auto 16px;
}

.research-tabs button {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.research-tabs button.active,
.research-tabs button:hover,
.research-tabs button:focus-visible {
    border-color: rgba(91, 215, 255, 0.58);
    color: var(--text);
    background: rgba(91, 215, 255, 0.13);
}

.research-tree-panel {
    display: none;
    box-sizing: border-box;
    width: 100%;
    max-width: 1280px;
    min-width: 0;
    margin: 0 auto 28px;
}

.research-tree-panel.active {
    display: block;
}

.research-tree-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: end;
    margin-bottom: 12px;
}

.research-tree-header h2,
.research-tree-header h3 {
    margin: 0;
}

.research-tree-header span {
    color: var(--muted);
    font-size: 0.9rem;
}

.research-tree-canvas {
    position: relative;
    display: grid;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(var(--research-rows), minmax(190px, auto));
    gap: 34px 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(12, 24, 34, 0.54);
    overflow: visible;
}

.research-tree-lines {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}

.research-tree-lines path {
    fill: none;
    stroke-width: 2;
    stroke-dasharray: 7 5;
    opacity: 0.82;
}

.research-tree-lines path.met {
    stroke: rgba(46, 204, 113, 0.68);
    stroke-dasharray: none;
}

.research-tree-lines path.missing {
    stroke: rgba(255, 184, 77, 0.55);
}

.compact-heading {
    display: block;
    margin-bottom: 12px;
}

.research-lanes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.research-lane {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(12, 24, 34, 0.54);
}

.research-lane h3 {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    text-transform: uppercase;
}

.research-node {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
    z-index: 1;
}

.research-node-mobile-tile,
.research-mobile-detail {
    display: none;
}

.research-node-detail-source {
    display: grid;
    gap: 10px;
}

.research-node.running {
    border-color: rgba(91, 215, 255, 0.42);
}

.research-node.available {
    border-color: rgba(242, 201, 76, 0.35);
}

.research-node.locked {
    opacity: 0.68;
    border-style: dashed;
}

.research-node.complete {
    border-color: rgba(46, 204, 113, 0.42);
}

.research-node-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
}

.research-node-head span,
.research-node-head em,
.research-node small,
.research-cost {
    color: var(--muted);
    font-size: 0.86rem;
    font-style: normal;
}

.research-node p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.research-effects {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.research-effects span,
.research-requirements span {
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--muted);
    font-size: 0.8rem;
}

.research-requirements {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.research-requirements span.met {
    border-color: rgba(46, 204, 113, 0.46);
    color: #a7f3c6;
}

.research-requirements span.missing {
    border-color: rgba(255, 184, 77, 0.42);
    color: #ffd590;
}

.research-effects span,
.research-running,
.research-complete {
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 700;
}

.research-running {
    color: var(--cyan);
}

.research-speedup-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(74px, 0.32fr) auto;
    align-items: end;
    gap: 8px;
    margin-top: 10px;
}

.research-speedup-form label {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.research-speedup-form label > span {
    color: var(--muted);
    font-size: 0.72rem;
}

.research-speedup-form select,
.research-speedup-form input {
    width: 100%;
    min-width: 0;
}

.repair-speedup-remaining {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid rgba(91, 215, 255, .24);
    border-radius: 10px;
    background: rgba(8, 27, 43, .72);
}

.repair-speedup-remaining > strong { color: #aeeeff; }

.repair-speedup-items {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.repair-speedup-item {
    flex: 0 0 calc((100% - 35px) / 6);
    min-width: 50px;
    max-width: 92px;
    margin: 0;
    scroll-snap-align: start;
}

.repair-speedup-item > button {
    width: 100%;
}

.repair-speedup-item > button:disabled { cursor: not-allowed; filter: grayscale(.45); opacity: .5; }

.repair-speedup-plan {
    display: grid;
    gap: 4px;
    padding: 10px 11px;
    border: 1px solid rgba(242, 201, 76, .3);
    border-radius: 10px;
    background: rgba(242, 201, 76, .07);
}

.repair-speedup-plan span { color: var(--muted); font-size: .78rem; }
.repair-speedup-finish { margin-top: 2px; }

@media (max-width: 700px) {
    .research-speedup-form {
        grid-template-columns: minmax(0, 1fr) 72px;
    }

    .research-speedup-form .button {
        grid-column: 1 / -1;
    }
}

@media (min-width: 701px) {
    .repair-speedup-item {
        flex-basis: calc((100% - 28px) / 5);
        max-width: 112px;
    }
}

.research-complete {
    color: var(--green);
}

.combat-primer,
.shipyard-grid {
    max-width: var(--content-width);
    margin-inline: auto;
}

.shipyard-panel-root {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.shipyard-primer {
    position: sticky;
    top: 78px;
    z-index: 5;
    padding: 14px;
    border: 1px solid rgba(91, 215, 255, 0.34);
    border-radius: 10px;
    background: rgba(7, 18, 34, 0.98);
    box-shadow: 0 16px 46px rgba(0, 0, 0, 0.42);
}

.shipyard-primer > header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.shipyard-primer > header h3,
.shipyard-primer > header p {
    margin: 0;
}

.shipyard-primer > header .dialog-close {
    position: static;
}

.combat-primer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 0;
}

.combat-primer article,
.ship-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(12, 24, 34, 0.66);
}

.combat-primer article {
    padding: 18px;
}

.combat-primer h3,
.ship-card h3 {
    margin-top: 0;
}

.combat-primer p,
.ship-card p {
    color: var(--muted);
    line-height: 1.5;
}

.shipyard-capacity {
    position: sticky;
    top: 78px;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 8px;
    border: 1px solid rgba(245, 185, 83, 0.2);
    border-radius: 9px;
    background: rgba(6, 14, 28, 0.94);
    backdrop-filter: blur(10px);
}

.shipyard-capacity span {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.055);
    font-weight: 800;
}

.shipyard-lane-swiper {
    display: flex;
    gap: 10px;
    max-width: var(--content-width);
    margin: 0 auto;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    padding: 2px 2px 8px;
    scrollbar-width: thin;
}

.shipyard-lane-card {
    flex: 0 0 min(230px, 78vw);
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(12, 24, 34, 0.7);
    color: inherit;
    text-decoration: none;
    scroll-snap-align: start;
}

.shipyard-lane-card.is-active {
    border-color: rgba(91, 215, 255, 0.82);
    box-shadow: 0 0 0 1px rgba(91, 215, 255, 0.22), 0 0 22px rgba(91, 215, 255, 0.16);
    background: rgba(20, 46, 62, 0.82);
}

.shipyard-lane-card span,
.shipyard-lane-card small {
    color: var(--muted);
}

.shipyard-mobile-lane-picker {
    display: none;
}

.shipyard-level-note {
    max-width: var(--content-width);
    margin: -4px auto 0;
}

.shipyard-level-disclosure,
.shipyard-queue {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
}

.shipyard-level-disclosure {
    color: var(--muted);
    font-size: 0.78rem;
}

.shipyard-level-disclosure summary,
.shipyard-queue > summary,
.shipyard-ship-details > summary {
    cursor: pointer;
}

.shipyard-level-disclosure p {
    margin: 7px 0 0;
}

.shipyard-queue {
    padding: 0;
    overflow: hidden;
}

.shipyard-queue > summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    list-style: none;
}

.shipyard-queue > summary::-webkit-details-marker {
    display: none;
}

.shipyard-queue > summary span {
    color: var(--muted);
}

.shipyard-queue-content {
    display: grid;
    gap: 10px;
    padding: 0 12px 12px;
}

.shipyard-mode-tabs {
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    width: min(100%, 460px);
    margin: 0 auto;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(6, 14, 28, 0.96);
}

.shipyard-mode-tabs button {
    min-height: 42px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.shipyard-mode-tabs button.is-active {
    border-color: rgba(91, 215, 255, 0.52);
    background: rgba(91, 215, 255, 0.14);
    color: var(--text);
}

.shipyard-mode-tabs small {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    min-height: 22px;
    margin-left: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
}

.shipyard-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 14px;
    align-items: start;
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
}

.hangar-section .fleet-detail-panel {
    width: min(100%, var(--content-width));
    margin-inline: auto;
}

.shipyard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ship-card {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 10px;
}

.shipyard-choice-card.is-selected {
    border-color: rgba(91, 215, 255, 0.8);
    box-shadow: 0 0 0 1px rgba(91, 215, 255, 0.18), 0 0 22px rgba(91, 215, 255, 0.12);
}

.shipyard-choice-select {
    display: grid;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 2px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.shipyard-choice-select:focus-visible {
    border-radius: 7px;
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
}

.ship-card-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
}

.ship-card-head span,
.ship-card-head em {
    color: var(--muted);
    font-size: 0.86rem;
    font-style: normal;
    text-transform: uppercase;
}

.shipyard-choice-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 10px;
    color: var(--muted);
    font-size: 0.78rem;
}

.shipyard-choice-meta b {
    grid-row: 1 / span 2;
    color: var(--text);
}

.shipyard-choice-meta span {
    text-align: right;
}

[data-shipyard-mode="build"] [data-shipyard-mode-only="upgrade"],
[data-shipyard-mode="upgrade"] [data-shipyard-mode-only="build"],
[data-shipyard-mode="upgrade"] [data-shipyard-upgrade-available="0"] {
    display: none;
}

.shipyard-ship-details {
    padding-top: 6px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.shipyard-ship-details > summary {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.shipyard-ship-details > p {
    margin: 8px 0;
    font-size: 0.84rem;
}

.ship-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.ship-stat-grid span {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    cursor: help;
}

.ship-stat-grid strong {
    color: var(--text);
}

.shipyard-inventory-line {
    color: var(--muted);
}

.shipyard-card-actions {
    display: grid;
    gap: 10px;
    align-items: stretch;
}

.shipyard-action-stage {
    position: sticky;
    top: 82px;
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(245, 185, 83, 0.3);
    border-radius: 11px;
    background: rgba(5, 12, 24, 0.96);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.shipyard-action-stage[hidden],
.shipyard-mode-empty[hidden],
.shipyard-action-stage [data-shipyard-action-empty][hidden] {
    display: none;
}

.shipyard-mode-empty {
    grid-column: 1 / -1;
    margin: 0;
}

.shipyard-action-stage .shipyard-action-form {
    grid-template-columns: minmax(0, 1fr) auto;
}

.shipyard-action-stage .shipyard-action-form button[type="submit"],
.shipyard-action-stage .shipyard-action-form .field-help {
    grid-column: 1 / -1;
    width: 100%;
    white-space: normal;
}

.shipyard-action-box {
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.shipyard-action-box header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
}

.shipyard-action-box header span,
.shipyard-action-box small {
    color: var(--muted);
    font-size: 0.8rem;
}

.shipyard-cost-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 30px;
}

.shipyard-cost-summary {
    display: grid;
    gap: 6px;
    padding: 9px;
    border: 1px solid rgba(245, 185, 83, 0.2);
    border-radius: 8px;
    background: rgba(5, 12, 24, 0.5);
}

.shipyard-cost-summary > span {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.shipyard-cost-warning {
    color: #ff9b9b;
    font-size: 0.78rem;
}

.shipyard-action-form {
    display: grid;
    grid-template-columns: minmax(72px, 92px) auto minmax(92px, max-content);
    gap: 8px;
    align-items: end;
}

.shipyard-action-form label {
    display: grid;
    gap: 4px;
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.shipyard-quantity-control {
    display: grid;
    grid-template-columns: 44px minmax(64px, 1fr) 44px;
    gap: 6px;
    align-items: end;
    min-width: 0;
}

.shipyard-quantity-control label {
    min-width: 0;
}

.shipyard-quantity-control output {
    display: none;
}

.shipyard-quantity-step.button {
    display: grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 1.35rem;
    line-height: 1;
}

.shipyard-action-form input[type="number"] {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    font-size: 16px;
    text-align: center;
}

.shipyard-action-form .button {
    width: auto;
    min-width: 0;
    white-space: nowrap;
}

.shipyard-action-form .field-help {
    grid-column: 1 / -1;
    margin: 0;
}

.roadmap-list {
    display: grid;
    gap: 10px;
}

.roadmap-item {
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: center;
    min-height: 64px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(12, 24, 34, 0.62);
}

.roadmap-item span {
    color: var(--gold);
    font-weight: 800;
}

@media (max-width: 900px) {
    body.has-app-user .page-shell {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px));
    }

    body.has-app-user.nav-rail-expanded .page-shell {
        padding-left: 0;
    }

    body.has-app-user .app-topbar {
        padding-inline: 10px;
    }

    body.has-app-user .brand span:last-child {
        display: none;
    }

    .app-nav-rail {
        display: none;
    }

    .mobile-hubbar {
        position: fixed;
        left: max(8px, env(safe-area-inset-left, 0px));
        right: max(8px, env(safe-area-inset-right, 0px));
        bottom: max(8px, env(safe-area-inset-bottom, 0px));
        z-index: 460;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        padding: 6px 5px 5px;
        border: 1px solid rgba(91, 215, 255, 0.2);
        border-radius: 22px;
        background: rgba(5, 12, 20, 0.94);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.48);
        backdrop-filter: blur(18px);
    }

    body.mobile-hub-open {
        overflow: hidden;
    }

    .mobile-hub-toggle {
        position: relative;
        display: grid;
        grid-template-rows: 42px auto;
        justify-items: center;
        align-items: center;
        gap: 2px;
        min-width: 0;
        min-height: 58px;
        padding: 1px 2px 3px;
        border: 0;
        background: transparent;
        color: var(--muted);
        font: inherit;
        font-weight: 800;
        cursor: pointer;
        touch-action: manipulation;
    }

    .mobile-hub-orb {
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border: 1px solid rgba(91, 215, 255, 0.24);
        border-radius: 999px;
        background:
            radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.13), transparent 38%),
            rgba(10, 27, 40, 0.92);
        box-shadow: inset 0 0 0 4px rgba(91, 215, 255, 0.035);
        transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
    }

    .mobile-hub-toggle.active .mobile-hub-orb,
    .mobile-hub-toggle[aria-expanded="true"] .mobile-hub-orb,
    .mobile-hub-toggle:focus-visible .mobile-hub-orb {
        border-color: rgba(111, 224, 255, 0.72);
        background: rgba(29, 91, 116, 0.7);
        box-shadow: 0 0 20px rgba(91, 215, 255, 0.25), inset 0 0 0 4px rgba(91, 215, 255, 0.08);
        transform: translateY(-2px);
    }

    .mobile-hub-toggle.active,
    .mobile-hub-toggle[aria-expanded="true"],
    .mobile-hub-toggle:focus-visible {
        color: var(--text);
        outline: none;
    }

    .mobile-hub-toggle.has-threat-alert .mobile-hub-orb {
        border-color: rgba(255, 79, 94, 0.94);
        box-shadow: 0 0 0 2px rgba(255, 79, 94, 0.22), 0 0 22px rgba(255, 79, 94, 0.42), inset 0 0 0 4px rgba(255, 79, 94, 0.08);
        animation: mobile-threat-hub-pulse 0.82s ease-in-out infinite alternate;
    }

    .mobile-hub-toggle.has-threat-alert .app-nav-icon {
        background-color: #ff8c96;
    }

    @keyframes mobile-threat-hub-pulse {
        from { filter: brightness(0.88); transform: scale(0.97); }
        to { filter: brightness(1.24); transform: scale(1.04); }
    }

    .mobile-hub-toggle .app-nav-icon {
        width: 23px;
        height: 23px;
    }

    .mobile-hub-label {
        max-width: 100%;
        overflow: hidden;
        font-size: clamp(0.58rem, 2.5vw, 0.68rem);
        line-height: 1.05;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-hub-toggle .app-nav-badge {
        top: -1px;
        right: max(1px, calc(50% - 25px));
        bottom: auto;
    }

    .mobile-hub-sheet[hidden],
    .mobile-hub-panel[hidden],
    .mobile-hub-item[hidden],
    .mobile-hub-item-form[hidden] {
        display: none;
    }

    .mobile-hub-sheet {
        position: fixed;
        inset: 0;
        z-index: 455;
        display: block;
    }

    .mobile-hub-backdrop {
        position: absolute;
        inset: 0;
        border: 0;
        background: rgba(2, 6, 23, 0.62);
        backdrop-filter: blur(2px);
    }

    .mobile-hub-panel {
        position: absolute;
        left: max(8px, env(safe-area-inset-left, 0px));
        right: max(8px, env(safe-area-inset-right, 0px));
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        display: grid;
        gap: 10px;
        max-height: min(68dvh, 560px);
        padding: 12px;
        overflow: auto;
        overscroll-behavior: contain;
        border: 1px solid rgba(244, 250, 255, 0.72);
        border-radius: 20px;
        background: rgba(6, 14, 23, 0.985);
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    }

    .mobile-hub-panel header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .mobile-hub-panel header > div {
        display: grid;
        gap: 1px;
    }

    .mobile-hub-panel header small {
        color: var(--muted);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .mobile-hub-panel header strong {
        font-size: 1.08rem;
    }

    .mobile-hub-panel header button {
        width: 40px;
        height: 40px;
        border: 1px solid rgba(244, 250, 255, 0.38);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.07);
        color: var(--text);
        font-size: 1.25rem;
    }

    .mobile-hub-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-hub-item-form {
        display: contents;
    }

    .mobile-hub-item {
        position: relative;
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: center;
        gap: 9px;
        min-width: 0;
        min-height: 58px;
        padding: 8px 9px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.045);
        color: var(--text);
        font: inherit;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
        touch-action: manipulation;
    }

    .mobile-hub-item.active,
    .mobile-hub-item:focus-visible {
        border-color: rgba(91, 215, 255, 0.48);
        background: rgba(91, 215, 255, 0.13);
        outline: none;
    }

    .mobile-hub-item .app-nav-icon {
        width: 28px;
        height: 28px;
        background-color: #9bdcff;
    }

    .mobile-hub-item > span:nth-child(2) {
        display: grid;
        min-width: 0;
        gap: 2px;
    }

    .mobile-hub-item strong,
    .mobile-hub-item small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-hub-item strong {
        font-size: 0.82rem;
    }

    .mobile-hub-item small {
        color: var(--muted);
        font-size: 0.68rem;
    }

    .mobile-hub-item-count {
        position: absolute;
        top: 5px;
        right: 6px;
        min-width: 19px;
        padding: 2px 5px;
        border-radius: 999px;
        background: var(--red);
        color: #fff;
        font-size: 0.66rem;
        text-align: center;
    }

    body.has-app-user .app-section {
        padding-inline: 12px;
        padding-bottom: calc(176px + env(safe-area-inset-bottom, 0px));
    }

    .module-heading-copy {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .topbar,
    .section-heading {
        align-items: start;
    }

    .topbar,
    .hero-grid,
    .section-heading {
        grid-template-columns: 1fr;
    }

    .topbar,
    nav {
        flex-wrap: wrap;
    }

    .hero-grid {
        display: block;
        min-height: auto;
        padding-top: 70px;
    }

    .sector-panel {
        margin-top: 38px;
    }

    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid,
    .reports-layout {
        grid-template-columns: 1fr;
    }

    .messages-layout {
        height: auto;
    }

    .reports-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .messages-sidebar,
    .message-detail-panel {
        overflow: visible;
    }

    .resource-grid,
    .base-grid,
    .jump-panel,
    .fleet-layout,
    .alliance-layout,
    .alliance-dashboard,
    .alliance-profile-card,
    .alliance-directory-filters,
    .tech-grid,
    .research-summary,
    .research-lanes,
    .combat-primer,
    .combat-sides,
    .fleet-total-grid,
    .shipyard-grid,
    .map-stats,
    .admin-layout,
    .form-grid.two,
    .form-grid.three,
    .form-grid.four,
    .form-grid.five,
    .form-grid.six {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .global-resource-bar {
        grid-template-columns: repeat(5, minmax(94px, max-content)) 38px;
        justify-content: start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    body.has-app-user .global-resource-pill {
        grid-template-columns: 18px minmax(0, 1fr);
        min-width: 94px;
        padding-inline: 5px;
    }

    body.has-app-user .global-resource-pill .resource-icon {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
    }

    body.has-app-user .global-resource-pill strong {
        font-size: 0.76rem;
    }

    body.has-app-user .global-resource-pill small {
        font-size: 0.58rem;
    }

    .research-tree-header span {
        display: none;
    }

    .research-tree-canvas {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(var(--research-rows), minmax(124px, auto));
        gap: 28px 10px;
        padding: 12px 8px;
        overflow: visible;
    }

    .research-node {
        align-self: start;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: default;
        opacity: 1;
    }

    .research-node-mobile-tile {
        position: relative;
        z-index: 2;
        display: grid;
        width: 100%;
        min-width: 0;
        gap: 5px;
        padding: 4px 4px 6px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 11px;
        color: var(--text);
        background: rgba(7, 16, 28, 0.98);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
        cursor: pointer;
    }

    .research-node-mobile-tile img {
        display: block;
        width: 100%;
        aspect-ratio: 1;
        border-radius: 7px;
        object-fit: cover;
        background: rgba(10, 22, 34, 0.92);
    }

    .research-node-stage {
        position: absolute;
        top: 6px;
        right: 6px;
        display: grid;
        min-width: 28px;
        min-height: 24px;
        padding: 2px 6px;
        place-items: center;
        border: 1px solid rgba(226, 240, 255, 0.82);
        border-radius: 999px;
        background: rgba(4, 10, 20, 0.88);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.48);
        color: #f3f8ff;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        line-height: 1;
    }

    .research-node-mobile-tile strong {
        min-height: 18px;
        color: #e9f8ff;
        font-size: 0.78rem;
        font-variant-numeric: tabular-nums;
        line-height: 1.15;
        text-align: center;
    }

    .research-node.available .research-node-mobile-tile {
        border-color: rgba(242, 201, 76, 0.62);
    }

    .research-node.running .research-node-mobile-tile {
        border-color: rgba(91, 215, 255, 0.72);
        box-shadow: 0 0 18px rgba(91, 215, 255, 0.18);
    }

    .research-node.complete .research-node-mobile-tile {
        border-color: rgba(46, 204, 113, 0.72);
    }

    .research-node.locked .research-node-mobile-tile {
        filter: saturate(0.55) brightness(0.72);
        border-style: dashed;
    }

    .research-node-detail-source {
        display: none;
    }

    .research-tree-lines {
        display: block;
    }

    .research-tree-lines path {
        stroke-width: 2.5;
        opacity: 0.9;
    }

    .research-mobile-detail {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 20;
        max-height: min(72dvh, 620px);
        padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 1px solid rgba(244, 250, 255, 0.72);
        border-width: 1px 0 0;
        border-radius: 18px 18px 0 0;
        color: var(--text);
        background: rgba(5, 12, 24, 0.995);
        box-shadow: 0 -22px 60px rgba(0, 0, 0, 0.72);
    }

    .research-mobile-detail:not([hidden]) {
        display: block;
    }

    .research-mobile-detail > header {
        position: sticky;
        top: -14px;
        z-index: 2;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin: -14px -14px 12px;
        padding: 14px 58px 12px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(5, 12, 24, 0.99);
    }

    .research-mobile-detail > header h3,
    .research-mobile-detail > header p {
        margin: 0;
    }

    .research-mobile-detail > header .dialog-close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }

    .research-mobile-detail [data-research-mobile-detail-content] {
        display: grid;
        gap: 10px;
    }

    .research-mobile-detail .research-node-head {
        display: none;
    }

    .research-mobile-detail .button {
        width: 100%;
        min-height: 48px;
    }

    .global-status-stack {
        margin-inline: 10px;
    }

    .command-alert-hud {
        display: none;
    }

    body.mobile-objective-open .command-alert-hud,
    body.mobile-fleet-sheet-open .command-alert-hud,
    body.mobile-threat-sheet-open .command-alert-hud {
        left: 10px;
        right: 10px;
        top: auto;
        bottom: calc(154px + env(safe-area-inset-bottom, 0px));
        display: grid;
        width: auto;
        max-height: min(62vh, 520px);
        z-index: 410;
        pointer-events: auto;
    }

    body.mobile-fleet-sheet-open .command-alert-hud > :not([data-fleet-status-card]) {
        display: none;
    }

    body.mobile-threat-sheet-open .command-alert-hud > :not(.threat):not([data-threat-empty]) {
        display: none;
    }

    body.mobile-objective-open .command-alert-hud > :not([data-sector-objective]) {
        display: none;
    }

    body.mobile-objective-open .command-alert-hud [data-sector-objective],
    body.mobile-fleet-sheet-open .command-alert-hud [data-fleet-status-card] {
        display: grid;
    }

    body.mobile-threat-sheet-open .command-alert-hud [data-threat-empty]:not([hidden]) {
        display: block;
    }

    @media (prefers-reduced-motion: reduce) {
        .mobile-hub-toggle.has-threat-alert .mobile-hub-orb {
            animation: none;
        }
    }

    .global-chat-widget {
        left: 10px;
        right: 10px;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        z-index: 405;
        width: auto;
        pointer-events: none;
    }

    .mobile-chat-preview {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        position: relative;
        z-index: 1;
        width: 100%;
        min-height: 48px;
        padding: 7px 10px;
        border: 1px solid rgba(91, 215, 255, 0.24);
        border-radius: 14px;
        background: rgba(7, 16, 24, 0.92);
        color: var(--text);
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42);
        text-align: left;
        pointer-events: auto;
        cursor: pointer;
        backdrop-filter: blur(16px);
    }

    .mobile-chat-preview > * {
        pointer-events: none;
    }

    .mobile-chat-preview-channel {
        display: none;
    }

    .mobile-chat-preview-lines {
        display: grid;
        gap: 2px;
        min-width: 0;
        font-size: 0.75rem;
        line-height: 1.22;
    }

    .mobile-chat-preview-lines span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .global-chat-toggle {
        display: none;
    }

    .global-chat-widget:not(.is-collapsed) .global-chat-toggle {
        display: flex;
        border-radius: 18px 18px 0 0;
    }

    .global-chat-widget:not(.is-collapsed) {
        top: auto;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        z-index: 440;
        pointer-events: auto;
    }

    .global-chat-widget:not(.is-collapsed)::before {
        position: fixed;
        inset: 0;
        z-index: -1;
        background: rgba(2, 6, 23, 0.42);
        content: "";
        pointer-events: none;
    }

    .global-chat-widget:not(.is-collapsed) .mobile-chat-preview {
        display: none;
    }

    .global-chat-panel {
        grid-template-rows: auto minmax(230px, 54vh) auto auto;
        max-height: min(76vh, 640px);
        border: 1px solid rgba(91, 215, 255, 0.28);
        border-radius: 0 0 18px 18px;
        overflow: hidden;
    }

    .global-inventory-widget {
        left: 10px;
        right: 10px;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        z-index: 406;
        display: none;
        width: auto;
        pointer-events: none;
    }

    body.mobile-inventory-open .global-inventory-widget {
        display: none;
    }

    body.mobile-inventory-open .global-inventory-widget::before {
        position: fixed;
        inset: 0;
        z-index: -1;
        background: rgba(2, 6, 23, 0.42);
        content: "";
    }

    .global-inventory-toggle {
        min-height: 44px;
        border-radius: 18px 18px 0 0;
    }

    .global-inventory-panel {
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        max-height: min(70vh, 620px);
        border-radius: 0 0 18px 18px;
        overflow: hidden;
    }

    .inventory-page {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: minmax(0, 1fr);
        max-height: min(47vh, 430px);
        overflow-y: auto;
        padding-right: 2px;
    }

    .inventory-filter-tabs button {
        min-height: 34px;
        padding-inline: 3px;
        font-size: 0.6rem;
        white-space: normal;
    }

    .inventory-filter-tabs {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        overflow-x: visible;
    }

    .poi-table article {
        grid-template-columns: 1fr;
    }

    .galaxy-toolbar {
        display: grid;
        grid-template-columns: repeat(5, 48px) minmax(0, 1fr);
        align-items: center;
        justify-content: start;
        gap: 7px;
        padding-inline: 2px;
    }

    .galaxy-toolbar .map-tool-button {
        width: 48px;
        min-width: 48px;
        min-height: 48px;
        padding: 5px;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        place-items: center;
        overflow: visible;
    }

    .galaxy-toolbar .map-tool-button::before {
        grid-row: auto;
        width: 26px;
        height: 26px;
        margin: 0;
        mask-size: 20px 20px;
        -webkit-mask-size: 20px 20px;
    }

    .galaxy-toolbar .map-tool-button .map-tool-label,
    .galaxy-toolbar .map-tool-button-secondary .map-tool-meta {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .galaxy-toolbar .map-tool-button .map-tool-meta {
        position: absolute;
        left: 50%;
        right: auto;
        bottom: -8px;
        max-width: 54px;
        padding: 1px 4px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 999px;
        background: rgba(7, 16, 24, 0.94);
        color: var(--muted);
        font-size: 0.52rem;
        line-height: 1.05;
        text-align: center;
        transform: translateX(-50%);
        overflow: hidden;
        text-overflow: ellipsis;
        z-index: 2;
    }

    .galaxy-toolbar .action-jump .map-tool-meta {
        color: var(--cyan);
        border-color: rgba(91, 215, 255, 0.3);
    }

    .galaxy-toolbar .map-tool-badge {
        top: -5px;
        right: -5px;
    }

    .galaxy-toolbar > span,
    .galaxy-toolbar .toolbar-inline-form {
        width: auto;
        min-width: 0;
        margin: 0;
    }

    .galaxy-toolbar [data-map-coordinates],
    .galaxy-toolbar [data-map-zoom-label] {
        padding: 5px 7px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        background: rgba(7, 16, 24, 0.72);
        font-size: 0.68rem;
        white-space: nowrap;
    }

    .galaxy-toolbar [data-jump-status-message] {
        grid-column: 1 / -1;
        font-size: 0.68rem;
    }

    .galaxy-map {
        min-height: 460px;
    }

    .audit-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .hero {
        min-height: auto;
        padding-bottom: 44px;
    }

    h1 {
        font-size: clamp(3rem, 18vw, 4.9rem);
    }

    nav a {
        padding-inline: 8px;
    }

    .button,
    .hero-actions {
        width: 100%;
    }

    .global-resource-bar {
        grid-template-columns: repeat(5, minmax(88px, max-content)) 36px;
    }

    .global-resource-details {
        position: sticky;
        left: 0;
        grid-template-columns: 1fr;
        width: min(calc(100vw - 24px), 430px);
        gap: 8px;
    }

    .global-resource-details-values { justify-content: space-between; gap: 12px; }
    .global-resource-details > .resource-progress { width: 100%; }

    .global-chat-widget {
        left: 10px;
        right: 10px;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        width: auto;
    }

    .global-chat-panel {
        grid-template-rows: auto minmax(170px, 45vh) auto auto;
    }

    .global-inventory-panel {
        max-height: min(72vh, 560px);
    }

    .inventory-page {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: minmax(0, 1fr);
        max-height: min(48vh, 390px);
    }

    .feature-grid,
    .roadmap-item,
    .resource-grid,
    .base-grid,
    .jump-panel,
    .jump-form,
    .fleet-layout,
    .alliance-layout,
    .alliance-dashboard,
    .alliance-profile-card,
    .alliance-profile-stats,
    .alliance-directory-filters,
    .alliance-application-card,
    .balancing-cockpit-grid,
    .tech-grid,
    .fleet-ship-row,
    .research-summary,
    .research-lanes,
    .combat-primer,
    .fleet-total-grid,
    .shipyard-grid,
    .ship-stat-grid,
    .map-stats,
    .admin-layout,
    .form-grid.two,
    .form-grid.three,
    .form-grid.four,
    .form-grid.five,
    .form-grid.six,
    .form-grid.resources {
        grid-template-columns: 1fr;
    }

    .auth-card,
    .admin-panel {
        padding: 22px;
    }

    .galaxy-toolbar {
        grid-template-columns: repeat(5, 48px);
    }

    .galaxy-toolbar > span {
        width: auto;
        margin-left: 0;
    }

    .galaxy-toolbar [data-jump-status-message] {
        width: 100%;
    }

    .galaxy-map {
        min-height: 380px;
    }

    .space-map {
        min-height: 250px;
    }

    .alliance-panel,
    .alliance-settings-drawer,
    .alliance-profile-card {
        padding: 14px;
    }

    .alliance-overview-grid,
    .alliance-directory-list {
        grid-template-columns: 1fr;
    }

    .alliance-status-tile {
        min-height: 0;
    }

    .alliance-directory-filters .button,
    .alliance-directory-card .button,
    .alliance-panel .button,
    .alliance-settings-panel .button {
        width: 100%;
        min-height: 44px;
        white-space: normal;
    }

    .alliance-directory-title {
        display: grid;
        gap: 6px;
    }

    .alliance-directory-card .compact-form,
    .alliance-settings-panel .compact-form {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .alliance-settings-drawer > summary {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
    }

    .alliance-settings-drawer > summary > span:not(.alliance-badge):not(.alliance-settings-gear) {
        grid-column: 2 / 3;
    }

    .alliance-settings-gear {
        grid-column: 3 / 4;
        grid-row: 1 / 3;
        margin-left: 0;
    }

    .alliance-member-row {
        grid-template-columns: 1fr auto;
        gap: 4px 10px;
        min-height: 44px;
        padding: 8px 0;
    }

    .alliance-member-row .member-last-online {
        grid-column: 1 / -1;
    }

    .alliance-member-row .icon-form {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    .alliance-application-card {
        gap: 10px;
    }

    .alliance-chat-panel {
        position: static;
        z-index: auto;
    }
}

.black-market-dialog.game-overlay {
    width: min(980px, calc(100vw - 24px));
    max-width: 980px;
    max-height: min(900px, calc(100dvh - 24px));
}

.black-market-dialog-body,
.black-market-workspace,
.black-market-form {
    display: grid;
    gap: 16px;
}

.black-market-heat-status {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid rgba(255, 143, 92, 0.34);
    border-radius: 12px;
    background: linear-gradient(110deg, rgba(89, 30, 22, 0.72), rgba(15, 23, 42, 0.84));
}

.black-market-heat-symbol {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.black-market-heat-status > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.black-market-heat-status > div > strong {
    color: #fff2e8;
}

.black-market-heat-status > div > span {
    color: #dfb7aa;
    font-size: 0.82rem;
}

.black-market-heat-status > b {
    padding: 5px 8px;
    border-radius: 999px;
    color: #ffd3b8;
    background: rgba(255, 106, 61, 0.16);
    font-size: 0.78rem;
    white-space: nowrap;
}

.black-market-heat-status.is-blocked {
    border-color: rgba(255, 79, 98, 0.65);
    background: linear-gradient(110deg, rgba(105, 18, 30, 0.82), rgba(15, 23, 42, 0.9));
}

.black-market-heat-status.is-blocked > b {
    color: #fff;
    background: rgba(255, 79, 98, 0.32);
}

.black-market-trade-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid rgba(56, 189, 248, 0.28);
    border-radius: 10px;
    background: rgba(8, 47, 73, 0.38);
    color: #cfeeff;
    font-size: 0.8rem;
}

.black-market-trade-status > div {
    display: grid;
    gap: 2px;
}

.black-market-trade-status > div > span {
    color: #9fbddd;
}

.black-market-trade-status > span {
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.14);
    white-space: nowrap;
}

.black-market-trade-status [hidden] {
    display: none;
}

.black-market-dialog-body {
    min-height: 280px;
}

.black-market-form {
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.72);
    box-shadow: 0 16px 40px rgba(2, 6, 23, 0.22);
}

.black-market-help {
    justify-self: start;
    width: 100%;
}

.black-market-help summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 4px 10px 4px 5px;
    border: 1px solid rgba(125, 211, 252, 0.28);
    border-radius: 999px;
    color: #dbeafe;
    background: rgba(15, 23, 42, 0.7);
    cursor: pointer;
    list-style: none;
    font-weight: 800;
}

.black-market-help summary::-webkit-details-marker {
    display: none;
}

.black-market-help-icon {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #08111f;
    background: #67e8f9;
    box-shadow: 0 0 16px rgba(103, 232, 249, 0.28);
}

.black-market-help[open] summary {
    border-color: rgba(103, 232, 249, 0.72);
}

.black-market-step {
    display: grid;
    gap: 9px;
}

.black-market-step-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.black-market-step-head small {
    color: #9fb2d0;
    text-align: right;
}

.black-market-resource-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.black-market-resource-grid.payment {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.black-market-resource-card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 7px;
    min-height: 104px;
    padding: 12px 8px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    color: #dbeafe;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.74)),
        var(--resource-header-image);
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

.black-market-resource-card:hover,
.black-market-resource-card:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(125, 211, 252, 0.7);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.black-market-resource-card.active {
    border-color: rgba(34, 211, 238, 0.95);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.18), 0 14px 30px rgba(14, 165, 233, 0.18);
}

.black-market-resource-card.unavailable,
.black-market-resource-card:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    transform: none;
    filter: grayscale(0.75);
}

.black-market-resource-card[hidden] {
    display: none;
}

.black-market-resource-card .resource-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 10px;
}

.black-market-resource-card strong {
    color: #f8fbff;
    font-size: 0.95rem;
    line-height: 1.15;
    text-align: center;
}

.black-market-resource-card small {
    color: #bdd3ef;
    font-size: 0.78rem;
    line-height: 1.15;
    text-align: center;
}

.black-market-buy-resource {
    min-height: 142px;
}

.black-market-pressure-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #dbeafe;
    font-size: 0.78rem;
}

.black-market-pressure-row b {
    color: #fde68a;
}

.black-market-pressure-meter {
    width: 100%;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
}

.black-market-pressure-meter i {
    display: block;
    width: var(--market-pressure, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #38bdf8, #facc15 62%, #fb7185);
    transition: width 240ms ease;
}

.black-market-amount-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.black-market-buy-button {
    display: grid;
    gap: 5px;
    min-height: 78px;
    padding: 10px;
    border: 1px solid rgba(56, 189, 248, 0.26);
    border-radius: 8px;
    color: #e0f2fe;
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.18), rgba(15, 23, 42, 0.82));
    cursor: pointer;
}

.black-market-buy-button strong {
    font-size: 1.12rem;
    color: #f8fbff;
}

.black-market-buy-button span {
    color: #a7c7e8;
    font-size: 0.78rem;
    line-height: 1.2;
}

.black-market-buy-button:hover,
.black-market-buy-button:focus-visible {
    border-color: rgba(125, 211, 252, 0.78);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.12);
}

.black-market-buy-button.unavailable,
.black-market-buy-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.55);
}

.black-market-preview {
    display: grid;
    gap: 5px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
}

.black-market-preview strong {
    color: #bae6fd;
    font-size: 1.1rem;
}

.black-market-preview span {
    color: #dbeafe;
}

.black-market-rule-sheet {
    display: grid;
    gap: 10px;
    margin-top: 10px;
    padding: 14px;
    border: 1px solid rgba(103, 232, 249, 0.2);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.68);
}

.black-market-rule-sheet p {
    margin: 0;
}

.black-market-rule-sheet dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.black-market-rule-sheet dl div {
    display: grid;
    gap: 3px;
    padding: 9px;
    border-radius: 9px;
    background: rgba(30, 41, 59, 0.66);
}

.black-market-rule-sheet dt {
    color: #9fb2d0;
    font-size: 0.76rem;
}

.black-market-rule-sheet dd {
    margin: 0;
    color: #f8fbff;
    font-weight: 800;
}

.map-progress {
    display: block;
    width: 100%;
    height: 7px;
    margin: 7px 0 4px;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(125, 211, 252, 0.24);
    background: rgba(15, 23, 42, 0.72);
}

.map-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22d3ee, #a78bfa, #f97316);
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.38);
}

.veyr-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin-top: 7px;
}

.veyr-stat-grid span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid rgba(34, 211, 238, 0.16);
    border-radius: 6px;
    color: #dbeafe;
    background: rgba(8, 47, 73, 0.24);
    font-size: 0.72rem;
}

.veyr-stat-grid b {
    color: #a5f3fc;
    font-weight: 800;
}

.compact-effect-list {
    display: grid;
    gap: 4px;
    margin: 7px 0 0;
    padding: 0;
    list-style: none;
}

.compact-effect-list li {
    padding: 5px 7px;
    border-radius: 6px;
    color: #dbeafe;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(129, 140, 248, 0.18);
    font-size: 0.74rem;
    line-height: 1.25;
}

.veyr-scoreboard {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    max-height: min(52vh, 440px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-gutter: stable;
}

.veyr-scoreboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.veyr-scoreboard-head > strong {
    flex: 1 1 120px;
    color: #ede9fe;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.veyr-score-toggle {
    display: inline-flex;
    flex: 0 1 auto;
    gap: 2px;
    padding: 2px;
    border: 1px solid rgba(167, 139, 250, 0.22);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
}

.veyr-score-toggle button {
    min-height: 24px;
    padding: 3px 7px;
    border: 0;
    border-radius: 999px;
    color: #cbd5e1;
    background: transparent;
    font-size: 0.68rem;
    line-height: 1;
    cursor: pointer;
}

.veyr-score-toggle button.active {
    color: #f8fafc;
    background: rgba(124, 58, 237, 0.72);
}

.veyr-score-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.veyr-score-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.veyr-score-panel[hidden] {
    display: none !important;
}

.veyr-score-list {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(167, 139, 250, 0.22);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.72);
}

.council-defense-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 6px 0;
    padding: 7px 9px;
    border: 1px solid rgba(242, 201, 76, 0.58);
    border-radius: 6px;
    background: rgba(242, 201, 76, 0.1);
}

.council-defense-status > strong {
    color: #ffe08a;
    font-size: 0.92rem;
}

.council-defense-front {
    color: #9de6bc;
    font-size: 0.78rem;
    font-weight: 800;
}

.council-defense-front.damaged {
    color: #ff9c9c;
}

.council-defense-front.empty {
    color: rgba(226, 232, 240, 0.68);
}

.veyr-score-list > strong {
    color: #a5f3fc;
    font-size: 0.72rem;
}

.veyr-score-list ol {
    display: grid;
    gap: 3px;
    margin: 0;
    padding-left: 18px;
}

.veyr-score-list li {
    min-width: 0;
    color: #dbeafe;
    font-size: 0.72rem;
}

.veyr-score-list li span {
    display: inline-block;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

.veyr-score-list li b {
    float: right;
    color: #fef3c7;
    font-weight: 700;
}

@keyframes veyr-rift-breathe {
    0%, 100% {
        transform: scale(0.94) rotate(-1deg);
        opacity: 0.84;
    }

    50% {
        transform: scale(1.04) rotate(1deg);
        opacity: 1;
    }
}

@keyframes veyr-rift-ring {
    from {
        transform: rotate(0deg) scale(0.94);
        opacity: 0.42;
    }

    to {
        transform: rotate(360deg) scale(1.04);
        opacity: 0.72;
    }
}

@keyframes veyr-rift-core {
    0%, 100% {
        transform: scale(0.7);
        opacity: 0.36;
    }

    50% {
        transform: scale(1.22);
        opacity: 0.72;
    }
}

@keyframes veyr-wreck-flicker {
    0%, 100% {
        opacity: 0.9;
        transform: scale(1);
    }

    42% {
        opacity: 0.76;
        transform: scale(0.985);
    }

    58% {
        opacity: 1;
        transform: scale(1.012);
    }
}

@keyframes veyr-wreck-shockwave {
    0% {
        opacity: 0.72;
        transform: scale(0.72);
    }

    70% {
        opacity: 0.08;
        transform: scale(1.42);
    }

    100% {
        opacity: 0;
        transform: scale(1.56);
    }
}

@keyframes event-poi-ping {
    0% {
        transform: scale(0.68);
        opacity: 0.72;
    }

    72% {
        opacity: 0.18;
    }

    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

@keyframes veyrConvoyFramePulse {
    0%, 100% {
        opacity: 0.76;
        transform: scale(0.96);
    }

    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}

@media (max-width: 760px) {
    .black-market-dialog.game-overlay {
        width: 100vw;
        max-width: none;
        max-height: none;
    }

    .black-market-resource-grid,
    .black-market-resource-grid.payment,
    .black-market-amount-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .black-market-form {
        gap: 14px;
        padding: 12px;
    }

    .black-market-trade-status {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .black-market-resource-card {
        min-height: 92px;
        padding: 10px 7px;
    }

    .black-market-buy-resource {
        min-height: 132px;
    }

    .black-market-resource-card .resource-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .black-market-buy-button {
        min-height: 70px;
    }

    .black-market-preview {
        position: sticky;
        bottom: 0;
        z-index: 6;
        box-shadow: 0 12px 30px rgba(2, 6, 23, 0.28);
    }

    .black-market-step-head {
        display: grid;
        gap: 2px;
    }

    .black-market-step-head small {
        text-align: left;
    }

    .black-market-rule-sheet dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .veyr-score-grid {
        grid-template-columns: 1fr;
    }
}

.alliance-poll-strip {
    display: grid;
    gap: 12px;
    margin: 12px 0 18px;
}

.alliance-poll-card {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.72);
    padding: 14px;
}

.alliance-poll-card > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

.alliance-poll-card > summary::-webkit-details-marker {
    display: none;
}

.alliance-poll-card > summary::after {
    content: "+";
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: var(--cyan);
    flex: 0 0 auto;
}

.alliance-poll-card[open] > summary::after {
    content: "-";
}

.alliance-poll-card > summary > span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.alliance-poll-card > summary strong,
.alliance-poll-card > summary small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alliance-poll-card > form {
    margin-top: 12px;
}

.alliance-poll-options {
    display: grid;
    gap: 8px;
}

.alliance-poll-option {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    overflow: hidden;
    min-height: 42px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 7px;
    padding: 8px 10px;
    background: rgba(2, 6, 23, 0.36);
}

.alliance-poll-option > input,
.alliance-poll-option > span {
    position: relative;
    z-index: 1;
}

.alliance-poll-option > span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.alliance-poll-option > b {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 0;
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.24), rgba(34, 197, 94, 0.06));
    pointer-events: none;
}

.council-office-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
}

.council-office-card {
    display: grid;
    gap: 6px;
    min-width: 0;
    border: 1px solid rgba(250, 204, 21, 0.24);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.82);
    padding: 10px;
}

.council-office-card > strong {
    color: #fde68a;
}

.council-office-card small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.council-office-actions form {
    margin: 0;
}

.council-office-actions .button {
    min-height: 32px;
    padding: 6px 10px;
}

.council-office-queue {
    display: grid;
    grid-auto-rows: max-content;
    gap: 4px;
    max-height: 118px;
    overflow-y: auto;
    padding-right: 4px;
}

.council-office-queue > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(226, 232, 240, 0.78);
}

.council-office-queue > span.is-self {
    color: #facc15;
    font-weight: 700;
}

@media (max-width: 1100px) {
    .council-office-grid {
        grid-template-columns: repeat(2, minmax(210px, 1fr));
    }
}

@media (max-width: 760px) {
    dialog.map-poi-overlay.game-overlay {
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: none;
    }

    .map-poi-overlay-body {
        padding-right: 2px;
        font-size: 1rem;
    }

    .map-poi-overlay-body .poi-card small,
    .map-poi-overlay-body .poi-card label,
    .map-poi-overlay-body .poi-card button,
    .map-poi-overlay-body .poi-card select,
    .map-poi-overlay-body .poi-card input,
    .map-poi-overlay-body .poi-card textarea,
    .map-poi-overlay-body .poi-card a {
        font-size: 0.95rem;
    }

    .council-office-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .messages-dialog.game-overlay {
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .messages-dialog .message-channel-tabs {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding-inline: 0;
    }

    .messages-dialog.has-message-detail .message-channel-tabs {
        display: none;
    }

    .message-channel-tabs {
        gap: 4px;
        width: 100%;
        margin-inline: 0;
        padding: 6px 0 8px;
        border-block: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: none;
    }

    .message-channel-tab {
        min-width: 0;
        min-height: 0;
        padding: 2px;
        border-radius: 9px;
    }

    .message-channel-tab img {
        border-radius: 6px;
    }

    .messages-layout {
        gap: 12px;
    }

    .messages-dialog .messages-layout {
        display: block;
        height: 100%;
        overflow: hidden;
    }

    .messages-sidebar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        max-height: none;
        height: 100%;
        overflow-y: auto;
        padding: 0 2px 4px 0;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .message-combat-filters {
        grid-template-columns: repeat(5, 44px);
    }

    .messages-sidebar .report-nav-item {
        min-height: 58px;
        padding: 9px 10px;
    }

    .message-detail-panel {
        display: none;
        height: 100%;
        overflow-y: auto;
        padding: 13px;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .messages-layout.is-detail-open .messages-sidebar {
        display: none;
    }

    .messages-layout.is-detail-open .message-detail-panel {
        display: block;
    }

    .message-mobile-back {
        display: inline-flex;
        min-height: 44px;
        margin: -3px 0 12px;
        padding: 8px 12px;
        align-items: center;
        border: 1px solid rgba(244, 250, 255, .36);
        border-radius: 10px;
        color: var(--text);
        background: rgba(255, 255, 255, .06);
        font: inherit;
        font-weight: 800;
    }

    .message-detail-head {
        flex-wrap: wrap;
        gap: 10px;
    }

    .message-detail-head .message-mobile-back {
        flex: 1 0 100%;
    }

    .message-title-actions {
        align-self: start;
    }

    .message-detail-head h3 {
        font-size: 1.05rem;
        line-height: 1.25;
    }

    .message-action-row,
    .message-claim-form {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .message-action-row {
        gap: 9px;
        margin-top: 0;
    }

    .message-action-row .message-favorite-form {
        justify-self: start;
    }

    .message-action-row .button,
    .message-reward-card .button {
        width: 100%;
        min-height: 44px;
    }

    .message-reward-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .message-reward-slot {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .command-alert-card.veyr-impact-notice {
        animation: none;
    }

    .poi-veyr.veyr-rift .poi-icon,
    .poi-veyr.veyr-rift .poi-icon::before,
    .poi-veyr.veyr-rift .poi-icon::after,
    .poi-veyr.veyr-mothership .poi-icon::before,
    .poi-veyr.veyr-destroyed .poi-icon,
    .poi-veyr.veyr-destroyed .poi-icon::before {
        animation: none;
    }

        .slot-card:hover,
    .slot-card:focus-within {
        transform: none;
    }
}
.mass-test-job-status {
    display: grid;
    gap: 8px;
    margin: 12px 0;
}

.mass-test-job-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mass-test-job-status progress {
    width: 100%;
    height: 12px;
}

.mass-test-runtime-controls {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

@media (max-width: 760px) {
    .reports-layout:not(.messages-layout) .reports-sidebar {
        grid-template-columns: 1fr;
        max-height: min(36vh, 300px);
        overflow-y: auto;
    }
}

@media (max-width: 390px) {
    .combat-report-glance,
    .wormhole-strength-board,
    .wormhole-outcome-grid,
    .wormhole-raw-stats {
        grid-template-columns: 1fr;
    }
}
.alliance-daily-task {
    display: grid;
    gap: .75rem;
    margin: 1rem 0;
}

.alliance-task-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    color: var(--muted);
    font-size: .9rem;
}

.alliance-daily-task.complete {
    border-color: rgba(91, 214, 144, .55);
}

.alliance-contribution-section { width: 100%; max-width: 1180px; margin: 1rem auto; }
.alliance-contribution-overview { display: grid; gap: .75rem; }
.alliance-contribution-preview { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.alliance-contribution-preview h3 { margin: 0 0 .35rem; }
.alliance-contribution-preview-list { display: flex; flex-wrap: wrap; gap: .35rem .8rem; }
.alliance-contribution-preview-list > span { font-size: .88rem; }
.alliance-contribution-dialog { width: min(960px, calc(100vw - 2rem)); max-width: none; max-height: min(82vh, 760px); overflow: auto; }
.alliance-contribution-dialog-heading { padding-right: 2.5rem; }
.alliance-contribution-dialog-heading h2 { margin: .35rem 0; }
.alliance-contribution-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.base-layout-shell {
    width: min(1320px, 100%);
    margin: 1rem auto;
    padding: 0;
    border: 1px solid rgba(103, 213, 255, .24);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(10, 24, 42, .96), rgba(5, 12, 25, .98));
    box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
}

.base-layout-toolbar,
.base-layout-actions {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.base-layout-toolbar {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 74px;
    z-index: 18;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid rgba(130, 220, 255, .22);
    border-radius: 12px;
    background: rgba(5, 15, 28, .84);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
    backdrop-filter: blur(10px);
}

.base-layout-toolbar h2,
.base-layout-toolbar p {
    margin: 0;
}

.base-layout-identity { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.base-layout-identity h2 { overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.base-layout-identity .field-help { overflow: hidden; max-width: 260px; text-overflow: ellipsis; white-space: nowrap; }
.base-layout-selection {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 300px;
    margin: 0;
    padding: 3px 8px;
    border: 1px solid rgba(126, 220, 255, .3);
    border-radius: 999px;
    color: #eafaff;
    background: rgba(6, 25, 40, .72);
    font-size: .72rem;
    line-height: 1.2;
}
.base-layout-selection[hidden] { display: none; }
.base-layout-selection strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.base-layout-selection span {
    flex: 0 0 auto;
    color: #8de5ff;
    font-weight: 800;
    white-space: nowrap;
}

.base-layout-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.base-layout-view-control {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--muted);
    font-size: .76rem;
}

.base-layout-view-control select {
    min-width: 118px;
    padding: 7px 28px 7px 9px;
}

.base-layout-tool-button {
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(128, 218, 255, .3);
    border-radius: 50%;
    color: #dff7ff;
    background: rgba(19, 48, 69, .9);
    cursor: pointer;
}
.base-layout-tool-button:hover,
.base-layout-tool-button:focus-visible { border-color: #9ce8ff; background: rgba(30, 79, 108, .96); }

.base-layout-tool-label {
    display: none;
}

.game-sound-dialog {
    width: min(520px, calc(100vw - 28px));
    color: #e8f5fb;
    background: linear-gradient(155deg, rgba(15, 29, 42, .98), rgba(7, 13, 22, .99));
    border: 1px solid rgba(119, 210, 244, .35);
}
.game-sound-enabled {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0;
    padding: 12px 14px;
    border: 1px solid rgba(126, 211, 239, .22);
    border-radius: 10px;
    background: rgba(19, 54, 72, .45);
}
.game-sound-enabled input { width: 20px; height: 20px; }
.game-sound-voice-profile {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(160px, 2fr) auto;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
}
.game-sound-voice-profile select { width: 100%; }
.game-sound-mixer { display: grid; gap: 14px; }
.game-sound-mixer label {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(150px, 2fr) 48px;
    align-items: center;
    gap: 12px;
}
.game-sound-mixer input[type="range"] { width: 100%; accent-color: #67d8ff; }
.game-sound-mixer output { color: #aeeaff; font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 520px) {
    .game-sound-voice-profile { grid-template-columns: 1fr; gap: 6px; }
    .game-sound-mixer label { grid-template-columns: 1fr 46px; }
    .game-sound-mixer label > span { grid-column: 1 / -1; }
}

.admin-game-audio-toolbar {
    position: sticky;
    top: 10px;
    z-index: 12;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.4fr);
    align-items: end;
    gap: 10px 18px;
    backdrop-filter: blur(16px);
}
.admin-game-audio-toolbar audio { width: 100%; height: 42px; }
.admin-game-audio-toolbar > p { margin: 0; }
.admin-game-audio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}
.admin-game-audio-card {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(126, 211, 239, .18);
    border-radius: 12px;
    background: rgba(7, 21, 34, .72);
    scroll-margin-top: 150px;
}
.admin-game-audio-card.is-override {
    border-color: rgba(246, 205, 98, .55);
    box-shadow: inset 0 0 22px rgba(246, 205, 98, .05);
}
.admin-game-audio-card > header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}
.admin-game-audio-card > header > div { display: grid; gap: 3px; min-width: 0; }
.admin-game-audio-card > header strong { text-transform: capitalize; }
.admin-game-audio-card > header code,
.admin-game-audio-card > p { overflow-wrap: anywhere; }
.admin-game-audio-card > p,
.admin-game-audio-card > small { margin: 0; color: var(--muted); }
.admin-game-audio-source {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 999px;
    color: #b9d8e6;
    background: rgba(100, 151, 178, .16);
    font-size: .75rem;
}
.admin-game-audio-card.is-override .admin-game-audio-source {
    color: #ffe28e;
    background: rgba(188, 139, 24, .2);
}
.admin-game-audio-card .settings-form { gap: 9px; }
.admin-game-audio-card input[type="file"] { width: 100%; }
@media (max-width: 720px) {
    .admin-game-audio-toolbar { position: static; grid-template-columns: 1fr; }
    .admin-game-audio-grid { grid-template-columns: 1fr; }
}

.base-layout-viewport {
    position: relative;
    overflow: auto;
    border: 1px solid rgba(150, 220, 255, .22);
    border-radius: 14px;
    background: #030914;
    scrollbar-color: rgba(99, 205, 255, .55) rgba(4, 13, 25, .8);
    overscroll-behavior: contain;
    touch-action: none;
}

.base-layout-viewport .base-integrity-card {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 18;
    display: grid;
    grid-template-columns: auto auto minmax(72px, 130px) auto;
    align-items: center;
    gap: 8px;
    width: auto;
    margin: 0;
    padding: 8px 10px;
    background: rgba(5, 15, 28, .88);
    backdrop-filter: blur(10px);
}
.base-layout-viewport .base-integrity-card > span { color: #79dcff; }
.base-layout-viewport .base-integrity-card small { white-space: nowrap; }
.base-secondary-status { display: flex; flex-wrap: wrap; gap: 12px; max-width: 1320px; margin: 8px auto 0; padding-inline: 8px; }

.base-layout-board {
    --base-grid-width: 35;
    --base-grid-height: 30;
    position: relative;
    width: 100%;
    min-width: 1020px;
    aspect-ratio: 35 / 30;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% 48%, rgba(73, 191, 255, .13), transparent 38%),
        linear-gradient(rgba(116, 207, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(116, 207, 255, .045) 1px, transparent 1px),
        linear-gradient(160deg, #081729, #030814 70%);
    background-size: auto, calc(100% / 35) calc(100% / 30), calc(100% / 35) calc(100% / 30), auto;
}

.base-layout-board.is-pixi-ready {
    width: 100%;
    min-width: 0;
    height: clamp(520px, 68vh, 820px);
    aspect-ratio: auto;
    background: radial-gradient(circle at 70% 18%, rgba(48, 104, 156, .18), transparent 34%), #020711;
}

.base-layout-three-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
}

.base-layout-three-hud {
    position: absolute;
    inset: 0;
    z-index: 1900000000;
    overflow: hidden;
    pointer-events: none;
    contain: layout paint;
}

.base-building-hud-anchor {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: max-content;
    min-width: 1px;
    min-height: 1px;
    pointer-events: none;
    will-change: transform;
    transform-origin: center bottom;
}

.base-building-hud-anchor[hidden] {
    display: none !important;
}

.base-building-hud-anchor > * {
    flex: 0 0 auto;
}

.base-building-hud-state {
    display: grid;
    width: clamp(34px, calc(43px * var(--base-camera-scale, 1)), 54px);
    aspect-ratio: 1;
    place-items: center;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: rgba(5, 14, 23, .9);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .6), 0 0 11px color-mix(in srgb, currentColor 45%, transparent);
    font: 900 clamp(18px, calc(24px * var(--base-camera-scale, 1)), 30px)/1 system-ui, sans-serif;
}

.base-building-hud-state.is-premium { color: #e8b7ff; }
.base-building-hud-state.is-power-off { color: #c1ccd4; }

.base-layout-board.is-three-ready {
    width: 100%;
    min-width: 0;
    height: clamp(520px, 68vh, 820px);
    aspect-ratio: auto;
    overflow: hidden;
    background: #020711;
}

.base-layout-board.is-three-ready .base-layout-building:not(.is-placement-ghost):not(.is-move-preview) {
    padding: 0;
    overflow: visible !important;
    clip-path: none !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}

.base-layout-board.is-three-ready .base-layout-building .building-state-overlay {
    display: none;
}

.base-layout-three-hud .base-building-progress-indicator,
.base-layout-three-hud .base-building-energy-indicator,
.base-layout-three-hud .base-building-completion-overlay,
.base-layout-three-hud .base-building-completion-marker {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
}

.base-layout-three-hud .base-building-progress-indicator {
    display: flex;
    align-items: center;
    gap: 7px;
    width: auto;
    aspect-ratio: auto;
}

.base-building-status-badge {
    position: relative;
    display: block;
    width: clamp(42px, calc(56px * var(--base-camera-scale, 1)), 72px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(3, 14, 24, .78);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .48);
}

.base-building-status-badge > .base-building-construction-progress,
.base-building-status-badge > .base-building-activity-ring,
.base-building-status-badge > .base-building-production-ring {
    position: absolute;
}

.base-layout-three-hud .base-building-completion-overlay {
    display: grid;
    place-items: center;
    width: max-content;
    height: max-content;
}

.base-layout-three-hud .base-building-status-times {
    top: calc(100% + 6px);
}

.base-layout-three-hud .base-building-progress-indicator.is-selected .base-building-status-times,
.base-layout-three-hud .base-building-progress-indicator:hover .base-building-status-times {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.base-layout-board[data-base-hud-lod="critical"] .base-building-hud-anchor > :not(.base-building-hud-state):not(.base-building-completion-overlay),
.base-building-hud-anchor:has(.base-building-completion-overlay) > :not(.base-building-completion-overlay),
.base-building-hud-anchor:has(.base-building-hud-state) > .base-building-progress-indicator {
    display: none;
}

.base-layout-board[data-base-hud-lod="activity"] .base-building-status-times {
    display: none;
}

.base-layout-board.is-pixi-ready .base-layout-building:not(.is-placement-ghost):not(.is-move-preview) {
    padding: 0;
    overflow: visible !important;
    clip-path: none !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}

.base-layout-board.is-pixi-ready .base-layout-building:not(.is-placement-ghost):not(.is-move-preview) .base-layout-building-hit > img {
    display: none;
}

.base-layout-building-hit {
    position: absolute;
    inset: var(--base-footprint-inset, 0);
    container-type: size;
    display: grid;
    place-items: center;
    overflow: hidden;
    clip-path: var(--base-hit-clip, polygon(50% 0, 100% 50%, 50% 100%, 0 50%));
    pointer-events: auto;
}

.base-layout-board.is-three-ready .base-layout-building-hit {
    touch-action: none;
}

.base-layout-building > .base-layout-building-name {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

.base-layout-board.is-pixi-ready .base-layout-building.is-context-hover,
.base-layout-board.is-pixi-ready .base-layout-building:focus-visible {
    filter: drop-shadow(0 0 8px rgba(112, 224, 255, .85));
}

.base-layout-board.is-pixi-ready .base-layout-building.is-panning-map {
    cursor: grabbing;
}

.base-layout-building {
    position: absolute;
    z-index: var(--base-scene-depth, 3);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    place-items: center;
    min-width: 0;
    min-height: 0;
    padding: 3px;
    overflow: hidden;
    color: #effaff;
    border: 1px solid rgba(122, 216, 255, .5);
    border-radius: 9px;
    background: linear-gradient(150deg, rgba(22, 58, 84, .92), rgba(7, 22, 38, .96));
    box-shadow: inset 0 0 14px rgba(91, 201, 255, .1), 0 4px 12px rgba(0, 0, 0, .28);
    cursor: pointer;
    touch-action: manipulation;
    pointer-events: none;
}

.base-layout-building.is-context-hover,
.base-layout-building:focus-visible,
.base-layout-building:focus-within,
.base-layout-building.is-context-open {
    z-index: 2000000000;
    border-color: #8de5ff;
    box-shadow: 0 0 0 2px rgba(108, 219, 255, .25), 0 7px 20px rgba(0, 0, 0, .4);
}

.base-layout-board[data-layout-view]:not([data-layout-view="normal"]) .base-layout-building {
    opacity: .2;
    filter: saturate(.35) brightness(.65);
    transition: opacity .16s ease, filter .16s ease;
}

.base-layout-board[data-layout-view="energy"] .base-layout-building[data-layout-view-tags~="energy"],
.base-layout-board[data-layout-view="production"] .base-layout-building[data-layout-view-tags~="production"],
.base-layout-board[data-layout-view="construction"] .base-layout-building[data-layout-view-tags~="construction"],
.base-layout-board[data-layout-view="defense"] .base-layout-building[data-layout-view-tags~="defense"],
.base-layout-board[data-layout-view]:not([data-layout-view="normal"]) .base-layout-building.is-context-open {
    opacity: 1;
    filter: drop-shadow(0 0 9px rgba(112, 224, 255, .72));
}

.base-layout-board[data-layout-view="energy"] .base-layout-building.energy-producer {
    filter: saturate(1.15) drop-shadow(0 0 11px rgba(87, 241, 173, .9));
}
.base-layout-board[data-layout-view="energy"] .base-layout-building.energy-consumer {
    filter: saturate(1.05) drop-shadow(0 0 10px rgba(255, 203, 91, .82));
}
.base-layout-board[data-layout-view="energy"] .base-layout-building.energy-off {
    filter: grayscale(.82) brightness(.72) drop-shadow(0 0 8px rgba(145, 157, 166, .72));
}
.base-layout-board[data-layout-view="energy"] .base-layout-building.energy-critical {
    filter: saturate(.75) drop-shadow(0 0 12px rgba(255, 77, 101, .95));
}

.base-layout-building.is-remote-updated {
    animation: base-layout-remote-update 1.8s ease-out;
}

@keyframes base-layout-remote-update {
    0%, 35% { filter: drop-shadow(0 0 16px #8eeaff) brightness(1.35); }
    100% { filter: none; }
}

.base-building-context-actions {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2000000001;
    width: 0;
    height: 0;
    pointer-events: auto;
}

.base-building-context-action,
.base-building-move-handle {
    position: absolute;
    z-index: 2000000002;
    display: grid;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    color: #eafaff;
    border: 1px solid rgba(137, 226, 255, .86);
    border-radius: 50%;
    background: rgba(7, 24, 39, .96);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .55), inset 0 0 12px rgba(91, 210, 255, .14);
    font: 800 1.15rem/1 system-ui, sans-serif;
    pointer-events: auto;
    touch-action: manipulation;
    isolation: isolate;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(.72);
    transition: opacity .13s ease, transform .13s ease, visibility .13s;
}

.base-building-context-action {
    left: var(--context-x);
    top: var(--context-y);
}

.base-building-context-action.is-upgrade { color: #ffe58a; border-color: rgba(255, 211, 92, .9); }
.base-building-context-action.is-power.is-on { color: #76f4b2; border-color: rgba(88, 232, 157, .9); }
.base-building-context-action.is-power.is-off { color: #aab6c0; }
.base-building-context-action.is-info { color: #8de5ff; }
.base-building-context-action.is-primary { color: #d1a2ff; border-color: rgba(195, 139, 255, .9); }
.base-building-context-action[aria-disabled="true"] { opacity: 0; color: #71808c; border-color: rgba(127, 145, 158, .55); }

.base-building-context-action.has-action-icon::before,
.base-building-activity::before {
    content: "";
    width: 22px;
    height: 22px;
    background: currentColor;
    mask: var(--base-action-icon) center / contain no-repeat;
    -webkit-mask: var(--base-action-icon) center / contain no-repeat;
}

.base-building-context-action.action-symbol-ship,
.base-building-activity.is-shipyard { --base-action-icon: url("/assets/icons/actions/ship.svg"); }
.base-building-context-action.action-symbol-research,
.base-building-activity.is-research { --base-action-icon: url("/assets/icons/actions/research.svg"); }
.base-building-context-action.action-symbol-repair,
.base-building-activity.is-repair { --base-action-icon: url("/assets/icons/actions/repair.svg"); }
.base-building-context-action.action-symbol-pvp { --base-action-icon: url("/assets/icons/actions/hive.svg"); }
.base-building-context-action.action-symbol-command { --base-action-icon: url("/assets/icons/actions/command.svg"); }
.base-building-context-action.action-symbol-radar::before {
    border-radius: 50%;
    background: url("/assets/images/buildings/radar.webp") center / cover no-repeat;
    mask: none;
    -webkit-mask: none;
}

.base-building-context-action.action-symbol-metal::before,
.base-building-context-action.action-symbol-crystal::before,
.base-building-context-action.action-symbol-exotic::before {
    border-radius: 50%;
    background: var(--base-resource-icon) center / cover no-repeat;
    mask: none;
    -webkit-mask: none;
}

.base-building-context-action.action-symbol-metal { --base-resource-icon: url("/assets/images/resources/metal-icon.webp"); }
.base-building-context-action.action-symbol-crystal { --base-resource-icon: url("/assets/images/resources/crystal-icon.webp"); }
.base-building-context-action.action-symbol-exotic { --base-resource-icon: url("/assets/images/resources/exotic_matter-icon.webp"); }

.base-building-move-handle {
    top: var(--context-y);
    left: var(--context-x);
    width: 36px;
    height: 36px;
    color: #9ff5d1;
    border-color: rgba(95, 232, 177, .88);
    font-size: 1.25rem;
    cursor: grab;
}

.base-building-progress-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 24;
    width: clamp(48px, calc(64px * var(--base-camera-scale, 1)), 86px);
    aspect-ratio: 1;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.base-building-activity {
    position: absolute;
    inset: 25%;
    display: grid;
    place-items: center;
    color: #9deaff;
    filter: drop-shadow(0 0 5px rgba(3, 12, 20, .95)) drop-shadow(0 0 5px currentColor);
    animation: base-building-activity-pulse 1.8s ease-in-out infinite;
}

.base-building-activity::before {
    width: 65%;
    height: 65%;
}

.base-building-activity.is-research { color: #cf9cff; }
.base-building-activity.is-repair { color: #82efb5; }
.base-building-activity.is-shipyard { color: #86ddff; }
.base-building-activity.is-construction { color: #ffd06f; --base-action-icon: url("/assets/icons/actions/build.svg"); }
.base-building-activity.is-resource {
    color: #fff;
    filter: drop-shadow(0 0 6px rgba(3, 12, 20, .98)) drop-shadow(0 0 8px currentColor);
}
.base-building-activity.is-resource::before {
    width: 72%;
    height: 72%;
    border-radius: 50%;
    background: var(--base-production-icon) center / cover no-repeat;
    mask: none;
    -webkit-mask: none;
}
.base-building-activity.is-resource.resource-metal { --base-production-icon: url("/assets/images/resources/metal-icon.webp"); color: #c7d0d6; }
.base-building-activity.is-resource.resource-crystal { --base-production-icon: url("/assets/images/resources/crystal-icon.webp"); color: #8de8ff; }
.base-building-activity.is-resource.resource-exotic_matter { --base-production-icon: url("/assets/images/resources/exotic_matter-icon.webp"); color: #d4a8ff; }
.base-building-activity.is-resource.is-full { animation: none; opacity: .9; }
.base-building-activity.is-paused { opacity: .55; animation: none; }
.base-building-activity.is-paused::after {
    content: "Ⅱ";
    position: absolute;
    right: -5px;
    bottom: -5px;
    display: grid;
    width: 17px;
    height: 17px;
    place-items: center;
    border-radius: 50%;
    color: #ffd36d;
    background: #14202a;
    font-size: 10px;
    font-weight: 900;
}

@property --base-progress {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.base-building-construction-progress,
.base-building-activity-ring,
.base-building-production-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(#ffd06f 0 var(--base-progress, 0deg), rgba(255,255,255,.16) var(--base-progress, 0deg) 360deg);
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.8));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    animation: base-building-ring-progress var(--base-progress-remaining, 1s) linear forwards;
}
.base-building-production-ring {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    --production-color: #9deaff;
    background: conic-gradient(var(--production-color) 0 var(--base-production-progress, 0deg), rgba(255,255,255,.14) var(--base-production-progress, 0deg) 360deg);
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.8));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    animation: none;
}
.base-building-production-ring.resource-metal { --production-color: #c7d0d6; }
.base-building-production-ring.resource-crystal { --production-color: #8de8ff; }
.base-building-production-ring.resource-exotic_matter { --production-color: #d4a8ff; }
.base-building-progress-indicator.is-production-full .base-building-production-ring {
    filter: drop-shadow(0 0 5px var(--production-color));
}
.base-building-activity-ring {
    inset: 10%;
    --activity-color: #9deaff;
    background: conic-gradient(var(--activity-color) 0 var(--base-progress, 0deg), rgba(255,255,255,.14) var(--base-progress, 0deg) 360deg);
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
.base-building-activity-ring.is-research { --activity-color: #cf9cff; }
.base-building-activity-ring.is-repair { --activity-color: #82efb5; }
.base-building-activity-ring.is-shipyard { --activity-color: #86ddff; }
.base-building-activity-ring.is-paused {
    --base-progress: 360deg;
    --activity-color: #77828b;
    animation: none;
    opacity: .72;
}
.base-building-construction-progress.is-indeterminate,
.base-building-activity-ring.is-indeterminate {
    background: conic-gradient(currentColor 0 72deg, rgba(255,255,255,.14) 72deg 360deg);
    animation: base-building-ring-spin 1.4s linear infinite;
}

.base-building-status-times {
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    display: grid;
    min-width: 168px;
    gap: 3px;
    padding: 5px 7px;
    border: 1px solid rgba(143,211,235,.35);
    border-radius: 6px;
    color: #e9f8ff;
    background: rgba(3,14,24,.94);
    box-shadow: 0 3px 12px rgba(0,0,0,.55);
    opacity: 0;
    transform: translateX(-50%) translateY(-3px);
    transition: opacity .14s ease, transform .14s ease;
}
.base-building-status-times > span {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: baseline;
    gap: 12px;
    white-space: nowrap;
}
.base-building-status-times b { overflow: hidden; text-overflow: ellipsis; }
.base-layout-building .base-building-status-times small {
    position: static;
    top: auto;
    right: auto;
    min-width: 4.5em;
    padding: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    text-align: right;
}
.base-building-status-times b,
.base-building-status-times small { font-size: clamp(8px, calc(10px * var(--base-camera-scale, 1)), 13px); line-height: 1.15; }
.base-building-status-times .is-construction b { color: #ffd06f; }
.base-building-status-times .is-research b { color: #cf9cff; }
.base-building-status-times .is-repair b { color: #82efb5; }
.base-building-status-times .is-shipyard b { color: #86ddff; }
.base-layout-building:hover .base-building-status-times,
.base-layout-building:focus-within .base-building-status-times,
.base-layout-building.is-context-open .base-building-status-times {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@keyframes base-building-ring-progress { to { --base-progress: 360deg; } }
@keyframes base-building-ring-spin { to { transform: rotate(360deg); } }
@keyframes base-building-activity-pulse { 50% { transform: scale(1.08); opacity: .82; } }

.base-layout-board.is-context-actions-available .base-layout-building:focus-within .base-building-context-action,
.base-layout-board.is-context-actions-available .base-layout-building:focus-within .base-building-move-handle,
.base-layout-board.is-context-actions-available .base-layout-building.is-context-open .base-building-context-action,
.base-layout-board.is-context-actions-available .base-layout-building.is-context-open .base-building-move-handle {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.base-layout-board.is-context-actions-available .base-layout-building:focus-within .base-building-context-action[aria-disabled="true"],
.base-layout-board.is-context-actions-available .base-layout-building.is-context-open .base-building-context-action[aria-disabled="true"] {
    opacity: .58;
}

.base-building-context-action:hover,
.base-building-context-action:focus-visible,
.base-building-move-handle:hover,
.base-building-move-handle:focus-visible {
    outline: 2px solid #eafaff;
    outline-offset: 2px;
    filter: brightness(1.2);
}

.base-building-context-action::after,
.base-building-move-handle::after {
    content: attr(aria-label);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 7px);
    z-index: 2;
    width: max-content;
    max-width: 190px;
    padding: 5px 7px;
    color: #effaff;
    border: 1px solid rgba(126, 220, 255, .42);
    border-radius: 6px;
    background: rgba(3, 14, 24, .96);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .48);
    font: 700 .72rem/1.25 system-ui, sans-serif;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 3px);
    transition: opacity .12s ease, transform .12s ease;
}

.base-building-context-action:hover::after,
.base-building-context-action:focus-visible::after,
.base-building-move-handle:hover::after,
.base-building-move-handle:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.base-layout-building img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .55));
    pointer-events: none;
}

.base-layout-building strong {
    width: 100%;
    overflow: hidden;
    color: inherit;
    font-size: clamp(.55rem, .8vw, .76rem);
    line-height: 1.15;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.base-layout-building small {
    position: absolute;
    top: 3px;
    right: 3px;
    padding: 1px 4px;
    color: #e9faff;
    border-radius: 8px;
    background: rgba(1, 8, 16, .82);
    font-size: .62rem;
    font-weight: 800;
}

.base-layout-building.state-inactive { filter: grayscale(.45); }
.base-layout-building.state-under-construction { border-style: dashed; border-color: #ffd46b; }

.base-layout-building .building-state-overlay {
    gap: 1px;
    padding: 3px 3px 17px;
}

.base-layout-building .building-state-overlay.is-premium {
    background: linear-gradient(145deg, rgba(53, 33, 9, .62), rgba(21, 14, 31, .68));
}

.base-layout-building .building-state-overlay.is-power-off {
    background: transparent;
    backdrop-filter: none;
}

.base-layout-building .building-state-overlay > .building-state-overlay-symbol {
    position: static;
    width: min(62cqw, 62cqh, calc(58px * var(--base-camera-scale, 1)));
    box-sizing: border-box;
    padding: 0 0 .12em;
    color: inherit;
    background: rgba(0, 0, 0, .34);
    font-size: min(34cqw, 34cqh, calc(2.7rem * var(--base-camera-scale, 1)));
}

.base-layout-building .building-state-overlay > strong {
    display: none;
}

.base-layout-building .building-state-overlay > small {
    display: none;
}

.build-choice-card .building-state-overlay > .building-state-overlay-symbol,
.build-choice-card .building-state-overlay > strong {
    color: inherit;
}

.build-choice-card .building-state-overlay > small {
    color: rgba(255, 255, 255, .9);
}

.base-layout-building.is-placement-ghost,
.base-layout-building.is-move-preview {
    z-index: 7;
    border: 2px solid;
    pointer-events: none;
}

.base-layout-building.is-placement-ghost.is-valid,
.base-layout-building.is-move-preview.is-valid,
.base-layout-building.is-dragging.is-valid {
    border-color: #55e994;
    background: rgba(53, 213, 126, .24);
    box-shadow: inset 0 0 0 2px rgba(85, 233, 148, .22), 0 0 22px rgba(53, 213, 126, .38);
}

.base-layout-building.is-placement-ghost.is-invalid,
.base-layout-building.is-move-preview.is-invalid,
.base-layout-building.is-dragging.is-invalid {
    border-color: #ff6173;
    background: repeating-linear-gradient(135deg, rgba(230, 47, 72, .34) 0 7px, rgba(55, 10, 23, .22) 7px 14px);
    box-shadow: inset 0 0 0 2px rgba(255, 97, 115, .2), 0 0 22px rgba(230, 47, 72, .4);
}

.base-layout-building.is-saving::after {
    content: "speichert ...";
    position: absolute;
    bottom: 2px;
    left: 3px;
    padding: 1px 3px;
    border-radius: 4px;
    background: #8de5ff;
    color: #172033;
    font-size: .52rem;
}

.base-layout-shell.is-editing .base-layout-board {
    background-size: auto, calc(100% / 35) calc(100% / 30), calc(100% / 35) calc(100% / 30), auto;
}

.base-layout-shell.is-editing .base-layout-building:not(:disabled) { cursor: grab; }
.base-layout-shell.is-editing .base-layout-building-hit { cursor: grab; touch-action: none; }
.base-layout-building.is-dragging {
    z-index: 8;
    cursor: grabbing;
    opacity: .88;
    will-change: left, top;
}
.base-layout-shell.is-editing .base-layout-building.is-selected {
    z-index: 6;
    border-color: #ffe171;
    box-shadow: 0 0 0 3px rgba(255, 215, 91, .38), 0 7px 22px rgba(0, 0, 0, .45);
}

.base-layout-help { margin: .75rem 0 0; }
.viewport-zoom-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 120;
    display: none;
    gap: 6px;
}

.viewport-zoom-controls button {
    display: grid;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    color: #effaff;
    border: 1px solid rgba(125, 222, 255, .62);
    border-radius: 10px;
    background: rgba(4, 20, 33, .92);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .45);
    font: 800 1.35rem/1 system-ui, sans-serif;
    touch-action: manipulation;
}
.viewport-zoom-controls button[hidden] { display: none; }
.base-building-dialog {
    width: min(760px, calc(100vw - 2rem));
    max-width: none;
    max-height: min(86vh, 850px);
    padding: clamp(1rem, 3vw, 1.5rem);
    overflow: auto;
}

.base-building-dialog .slot-card {
    width: 100%;
    transform: none;
}

.base-decoration-dialog {
    width: min(1120px, calc(100vw - 2rem));
}

.base-decoration-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: clamp(9px, 1.5vw, 16px);
    margin-top: 14px;
}

.base-decoration-card {
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(91, 215, 255, .24);
    border-radius: 13px;
    background: rgba(5, 17, 29, .9);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
}

.base-decoration-preview {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    color: #f3fbff;
    background: #07111d;
    cursor: pointer;
    touch-action: manipulation;
}

.base-decoration-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter .18s ease, transform .18s ease;
}

.base-decoration-preview::after {
    position: absolute;
    inset: auto 0 0;
    height: 42%;
    content: "";
    background: linear-gradient(180deg, transparent, rgba(2, 8, 15, .94));
    pointer-events: none;
}

.base-decoration-name {
    position: absolute;
    z-index: 1;
    right: 9px;
    bottom: 9px;
    left: 9px;
    font-size: clamp(.72rem, 1.2vw, .88rem);
    line-height: 1.2;
    text-align: left;
    text-wrap: balance;
}

.base-decoration-preview:hover img,
.base-decoration-preview:focus-visible img {
    filter: brightness(1.08);
    transform: scale(1.025);
}

.base-decoration-preview:focus-visible {
    outline: 3px solid rgba(91, 215, 255, .82);
    outline-offset: -3px;
}

.base-decoration-preview:disabled {
    cursor: not-allowed;
}

.base-decoration-preview:disabled img {
    filter: grayscale(.72) brightness(.58);
}

.base-decoration-count {
    padding: 9px 8px 10px;
    color: #bfeeff;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.base-building-dialog .slot-card .building-art {
    width: 100%;
    aspect-ratio: 4 / 3;
    margin: 0;
}

.base-building-dialog-overview {
    display: grid;
    grid-template-columns: minmax(150px, .8fr) minmax(240px, 1.2fr);
    gap: clamp(12px, 2vw, 22px);
    align-items: center;
    margin: 0 0 12px;
}

.base-building-dialog-visual,
.base-building-dialog-upgrade {
    min-width: 0;
}

.base-building-dialog-upgrade {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(123, 211, 255, .24);
    border-radius: 12px;
    background: rgba(5, 20, 33, .72);
}

.base-building-dialog-upgrade form,
.base-building-dialog-upgrade .stacked-button {
    width: 100%;
}

.construction-speedup-trigger {
    width: 100%;
    margin-top: 8px;
}

.construction-speedup-dialog {
    width: min(720px, calc(100vw - 2rem));
}

.construction-speedup-remaining {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(114, 220, 255, .34);
    border-radius: 12px;
    background: rgba(5, 24, 39, .86);
}

.construction-speedup-remaining strong {
    color: #aeeeff;
    font-size: 1.12rem;
}

.construction-speedup-grid {
    display: grid;
    gap: 9px;
    margin: 14px 0;
}

.construction-speedup-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) minmax(190px, auto);
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 2px solid rgba(148, 163, 184, .7);
    border-radius: 12px;
    background: rgba(5, 19, 31, .88);
}

.construction-speedup-item.rarity-uncommon { border-color: rgba(34, 197, 94, .78); }
.construction-speedup-item.rarity-rare { border-color: rgba(59, 130, 246, .82); }
.construction-speedup-item.rarity-epic { border-color: rgba(168, 85, 247, .86); }
.construction-speedup-item.rarity-legendary { border-color: rgba(245, 158, 11, .9); }

.construction-speedup-item > span:nth-child(2) {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.construction-speedup-item > span:nth-child(2) small { color: var(--muted); }

.construction-speedup-item form {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 8px;
}

.construction-speedup-item form label {
    display: grid;
    gap: 3px;
    color: var(--muted);
    font-size: .72rem;
}

.construction-speedup-item form input {
    width: 72px;
}

.construction-speedup-plan,
.construction-speedup-finish {
    display: grid;
    gap: 5px;
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid rgba(242, 201, 76, .34);
    border-radius: 10px;
    background: rgba(242, 201, 76, .08);
}

.construction-speedup-plan span,
.construction-speedup-finish p {
    margin: 0;
    color: var(--muted);
    font-size: .84rem;
}

.construction-speedup-finish[hidden] { display: none; }

.speedup-shop-card {
    border-width: 2px;
    border-color: rgba(148, 163, 184, .7);
}

.speedup-shop-card.rarity-uncommon { border-color: rgba(34, 197, 94, .78); }
.speedup-shop-card.rarity-rare { border-color: rgba(59, 130, 246, .82); }
.speedup-shop-card.rarity-epic { border-color: rgba(168, 85, 247, .86); }
.speedup-shop-card.rarity-legendary { border-color: rgba(245, 158, 11, .9); }

.speedup-shop-card > .inventory-slot-icon {
    width: 64px;
    height: 64px;
}

.speedup-shop-card form label {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: .78rem;
}

.speedup-shop-card form input { width: 84px; }

.building-effect-summary {
    clear: both;
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid rgba(116, 210, 255, .2);
    border-radius: 12px;
    background: rgba(6, 22, 35, .58);
}

.building-effect-summary-head,
.building-effect-summary-row,
.building-effect-summary-row strong {
    display: flex;
    align-items: center;
}

.building-effect-summary-head,
.building-effect-summary-row {
    justify-content: space-between;
    gap: 12px;
}

.building-effect-summary-head {
    margin-bottom: 7px;
}

.building-effect-summary-head small {
    color: var(--muted);
    font-size: .72rem;
}

.building-effect-summary-list {
    display: grid;
    gap: 3px;
}

.building-effect-summary-row {
    min-height: 30px;
    padding: 5px 0;
    border-top: 1px solid rgba(126, 214, 255, .1);
}

.building-effect-summary-row > span {
    min-width: 0;
    color: #dbeef7;
    font-size: .82rem;
}

.building-effect-summary-row strong {
    flex: 0 0 auto;
    gap: 6px;
    font-size: .82rem;
    white-space: nowrap;
}

.building-effect-summary-row strong span {
    color: #d9e4ea;
    font-weight: 700;
}

.building-effect-summary-row strong i {
    color: #7f9eae;
    font-style: normal;
}

.building-effect-summary-row strong em {
    color: #83efbd;
    font-style: normal;
}

.power-button.is-fixed {
    cursor: default;
}

.upgrade-energy-forecast {
    display: grid;
    gap: 3px;
    margin: 6px 0 9px;
    padding: 8px 10px;
    border: 1px solid rgba(99, 226, 164, .4);
    border-radius: 9px;
    background: rgba(18, 74, 52, .28);
}
.upgrade-energy-forecast.is-tight { border-color: rgba(255, 202, 89, .58); background: rgba(91, 61, 9, .32); }
.upgrade-energy-forecast.is-critical { border-color: rgba(255, 100, 116, .7); background: rgba(102, 24, 38, .38); }
.upgrade-energy-forecast small { color: #d9e9ef; }

.base-building-operating-status {
    position: absolute;
    top: 6px;
    left: 50%;
    z-index: 150;
    width: max-content;
    max-width: min(230px, 80vw);
    padding: 5px 9px;
    color: #effbff;
    border: 1px solid rgba(114, 220, 255, .52);
    border-radius: 999px;
    background: rgba(3, 18, 30, .94);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .48);
    font: 800 clamp(9px, calc(11px * var(--base-camera-scale, 1)), 13px)/1.2 system-ui, sans-serif;
    pointer-events: none;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.base-building-completion-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2000000003;
    display: grid;
    width: clamp(48px, calc(68px * var(--base-camera-scale, 1)), 88px);
    aspect-ratio: 1;
    padding: 0;
    place-items: center;
    color: #effff7;
    border: 3px solid #72f0a8;
    border-radius: 50%;
    background: rgba(5, 48, 31, .94);
    box-shadow: 0 0 0 4px rgba(71, 232, 143, .2), 0 7px 22px rgba(0, 0, 0, .62), inset 0 0 18px rgba(92, 255, 167, .18);
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    transform: translate(-50%, -50%);
    animation: base-building-completion-pulse 1.8s ease-in-out infinite;
}

.base-building-completion-overlay {
    position: absolute;
    z-index: 2100000000 !important;
    overflow: visible;
    pointer-events: none;
}

.base-building-energy-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 145;
    width: max-content;
    padding: 5px 9px;
    color: #142015;
    border: 2px solid currentColor;
    border-radius: 999px;
    background: rgba(255, 209, 104, .96);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .62);
    font: 900 clamp(10px, calc(13px * var(--base-camera-scale, 1)), 16px)/1 system-ui, sans-serif;
    pointer-events: none;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}
.base-building-energy-indicator.is-producer { color: #083221; background: rgba(104, 241, 171, .97); }
.base-building-energy-indicator.is-consumer { color: #392708; background: rgba(255, 209, 104, .97); }
.base-building-energy-indicator.is-off { color: #172127; background: rgba(174, 186, 193, .96); }
.base-building-energy-indicator.is-critical { color: #3d0711; background: rgba(255, 105, 124, .97); }
.base-building-completion-marker:hover,
.base-building-completion-marker:focus-visible {
    outline: 3px solid #edfff5;
    outline-offset: 3px;
    filter: brightness(1.14);
}
.base-building-completion-marker:disabled { cursor: wait; opacity: .7; }
.base-building-completion-icon {
    width: 52%;
    height: 52%;
    background: currentColor;
    mask: var(--base-completion-icon) center / contain no-repeat;
    -webkit-mask: var(--base-completion-icon) center / contain no-repeat;
}
.base-building-completion-marker.is-construction { --base-completion-icon: url("/assets/icons/actions/build.svg"); }
.base-building-completion-marker.is-research { --base-completion-icon: url("/assets/icons/actions/research.svg"); }
.base-building-completion-marker.is-shipyard { --base-completion-icon: url("/assets/icons/actions/ship.svg"); }
.base-building-completion-marker.is-repair { --base-completion-icon: url("/assets/icons/actions/repair.svg"); }
.base-building-completion-check {
    position: absolute;
    right: -5%;
    bottom: -5%;
    display: grid;
    width: 38%;
    aspect-ratio: 1;
    place-items: center;
    color: #062719;
    border: 2px solid #dffff0;
    border-radius: 50%;
    background: #72f0a8;
    font: 1000 clamp(12px, calc(17px * var(--base-camera-scale, 1)), 21px)/1 system-ui, sans-serif;
}
@keyframes base-building-completion-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(71, 232, 143, .16), 0 7px 22px rgba(0, 0, 0, .62), inset 0 0 18px rgba(92, 255, 167, .16); }
    50% { box-shadow: 0 0 0 8px rgba(71, 232, 143, .3), 0 7px 25px rgba(0, 0, 0, .68), inset 0 0 22px rgba(92, 255, 167, .28); }
}

.base-building-dialog .slot-card .resource-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 4px 0 8px;
}

.base-building-dialog .slot-card .resource-pill {
    gap: 5px;
    min-width: 0;
}

.base-building-dialog .slot-card .resource-pill .resource-icon {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
}

.base-building-dialog .slot-card .upgrade-summary-head {
    margin: 0;
}

@media (max-width: 760px) {
    .alliance-contribution-preview { align-items: stretch; flex-direction: column; }
    .alliance-contribution-preview .button { width: 100%; }
    .alliance-contribution-columns { grid-template-columns: 1fr; }
    .base-layout-toolbar {
        top: 8px;
        right: 8px;
        left: 8px;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        align-items: center;
        padding: 7px;
    }
    .base-layout-identity { min-height: 24px; }
    .base-layout-identity .field-help { display: none; }
    .base-layout-identity.has-building-selection h2 { display: none; }
    .base-layout-selection { max-width: 100%; padding: 3px 7px; }
    .base-layout-actions {
        width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 4px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }
    .base-layout-actions::-webkit-scrollbar { display: none; }
    .base-layout-view-control > span { display: none; }
    .base-layout-view-control select { min-width: 80px; max-width: 88px; padding: 6px 24px 6px 7px; }
    .base-layout-tool-button { width: 32px; height: 32px; flex: 0 0 32px; }
    .base-layout-viewport .base-integrity-card { grid-template-columns: auto auto minmax(56px, 90px); }
    .base-layout-viewport .base-integrity-card small { display: none; }
    .base-layout-board { min-width: 790px; }
    .base-layout-board.is-pixi-ready,
    .base-layout-board.is-three-ready { min-width: 0; height: max(480px, 64dvh); }
    .base-building-dialog {
        width: 100%;
        max-height: 86dvh;
        margin: auto 0 0;
        border-radius: 18px 18px 0 0;
    }
    .base-decoration-catalog {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .base-building-dialog .slot-card .building-art {
        width: 100%;
        max-height: 100px;
    }
    .base-building-dialog-overview {
        grid-template-columns: minmax(105px, .7fr) minmax(180px, 1.3fr);
        gap: 10px;
        align-items: start;
    }
    .base-building-dialog-upgrade { padding: 9px; }
    .construction-speedup-item {
        grid-template-columns: 44px minmax(0, 1fr);
    }
    .construction-speedup-item form {
        grid-column: 1 / -1;
        justify-content: stretch;
    }
    .construction-speedup-item form label { flex: 1; }
    .construction-speedup-item form input,
    .construction-speedup-item form button { width: 100%; }
    .building-effect-summary-row { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .base-layout-building { transition: none; }
    .base-building-activity,
    .base-building-construction-ring,
    .base-layout-building.is-remote-updated,
    .base-building-completion-marker { animation: none; }
}
.command-alert-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
    width: 100%;
    pointer-events: auto;
}

.completion-center-toggle,
.action-briefing-toggle {
    position: static;
    border: 1px solid rgba(95, 216, 255, .5);
    border-radius: 999px;
    padding: .5rem .8rem;
    color: #dff8ff;
    background: rgba(8, 26, 39, .92);
    box-shadow: 0 0 18px rgba(62, 192, 235, .18);
}

.action-briefing-toggle {
    border-color: rgba(255, 222, 120, .58);
    color: #fff1ba;
}

.action-briefing-toggle b {
    display: inline-grid;
    min-width: 1.45rem;
    min-height: 1.45rem;
    margin-left: .35rem;
    place-items: center;
    border-radius: 999px;
    color: #07111c;
    background: #ffe28a;
    font-size: .76rem;
}

.action-briefing-dialog { width: min(42rem, calc(100vw - 2rem)); }
.action-briefing-list { display: grid; gap: .7rem; }
.action-briefing-item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    padding: .85rem;
    border: 1px solid rgba(117, 205, 231, .28);
    border-left-width: 3px;
    border-radius: .8rem;
    background: rgba(14, 39, 55, .72);
}
.action-briefing-item.tone-danger { border-left-color: #ff6f72; }
.action-briefing-item.tone-success { border-left-color: #71e5a5; }
.action-briefing-item.tone-progress { border-left-color: #72d9ff; }
.action-briefing-item.tone-alliance { border-left-color: #d2a6ff; }
.action-briefing-rank {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid rgba(220, 241, 255, .35);
    border-radius: 50%;
    color: #e8f8ff;
    background: rgba(6, 18, 31, .85);
    font-weight: 800;
}
.action-briefing-item > div { display: grid; min-width: 0; gap: .2rem; }
.action-briefing-item > div span { color: var(--muted); font-size: .88rem; }
.action-briefing-empty {
    display: grid;
    gap: .25rem;
    padding: 1.1rem;
    border: 1px solid rgba(113, 229, 165, .3);
    border-radius: .8rem;
    background: rgba(21, 62, 50, .32);
}
.action-briefing-empty span { color: var(--muted); }

.return-summary-dialog {
    width: min(46rem, calc(100vw - 2rem));
}
.return-summary-list {
    display: grid;
    gap: .7rem;
}
.return-summary-item {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    padding: .9rem;
    border: 1px solid rgba(117, 205, 231, .28);
    border-left-width: 3px;
    border-radius: .85rem;
    background: linear-gradient(135deg, rgba(14, 39, 55, .82), rgba(8, 24, 39, .72));
}
.return-summary-item.tone-danger { border-left-color: #ff7378; }
.return-summary-item.tone-success { border-left-color: #70e4a4; }
.return-summary-item.tone-combat { border-left-color: #ffb86c; }
.return-summary-item.tone-information { border-left-color: #72d9ff; }
.return-summary-item.tone-signal { border-left-color: #d2a6ff; }
.return-summary-symbol {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border: 1px solid rgba(225, 244, 255, .35);
    border-radius: 50%;
    color: #f6fbff;
    background: rgba(4, 14, 26, .86);
    font-size: 1.1rem;
    font-weight: 900;
}
.return-summary-item > div {
    display: grid;
    min-width: 0;
    gap: .25rem;
}
.return-summary-item > div span {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.return-summary-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.completion-center-dialog { width: min(36rem, calc(100vw - 2rem)); }
.completion-center-list { display: grid; gap: .55rem; margin-top: 1rem; }
.completion-center-item {
    display: grid;
    gap: .2rem;
    padding: .75rem .9rem;
    border: 1px solid rgba(117, 205, 231, .2);
    border-radius: .65rem;
    color: inherit;
    background: rgba(14, 39, 55, .72);
    text-decoration: none;
}
.completion-center-item:hover { border-color: rgba(117, 225, 255, .65); }
.completion-center-item.is-new { animation: completion-entry-pulse 1.2s ease-out; }
.completion-center-item small { color: var(--muted); }
.notice-card .notice-action { margin-top: .35rem; justify-self: start; }
@keyframes completion-entry-pulse { 0% { box-shadow: 0 0 0 .25rem rgba(87, 227, 255, .32); } 100% { box-shadow: none; } }

@media (max-width: 900px) {
    .command-alert-actions { display: none; }
    .action-briefing-item {
        grid-template-columns: 2rem minmax(0, 1fr);
        align-items: start;
    }
    .action-briefing-item .button { grid-column: 1 / -1; width: 100%; }
    .return-summary-item {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        align-items: start;
    }
    .return-summary-item .button {
        grid-column: 1 / -1;
        width: 100%;
    }
    .return-summary-footer .button { width: 100%; }
}
.hardware-check {
    display: grid;
    gap: .65rem;
    padding: 1rem;
    border: 1px solid rgba(92, 213, 255, .28);
    border-radius: 12px;
    background: rgba(5, 25, 39, .72);
}
.hardware-check p { margin: 0; }
.hardware-check[data-state="high"], .hardware-check[data-state="performance"], .hardware-check[data-state="limited"] { border-color: rgba(80, 220, 145, .72); }
.hardware-check[data-state="failed"] { border-color: rgba(255, 105, 105, .72); }
/* Admin asset gallery */
.asset-gallery-family {
    margin-top: 1rem;
}

.asset-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.asset-gallery-card {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(116, 168, 218, 0.3);
    border-radius: 0.75rem;
    background: #151a22;
    color: inherit;
    text-align: left;
    cursor: zoom-in;
}

.asset-gallery-card:hover,
.asset-gallery-card:focus-visible {
    border-color: #79c8ff;
    box-shadow: 0 0 0 2px rgba(121, 200, 255, 0.22);
}

.asset-gallery-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    background: #151a22;
}

.asset-gallery-card > span {
    display: grid;
    gap: 0.15rem;
    padding: 0.6rem 0.7rem;
    background: rgba(7, 12, 19, 0.92);
}

.asset-gallery-card small {
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asset-gallery-card.is-missing {
    display: grid;
    min-height: 180px;
    place-items: end stretch;
    cursor: default;
    opacity: 0.65;
}

.asset-gallery-dialog {
    width: min(94vw, 1100px);
    max-width: 1100px;
}

.asset-gallery-dialog [data-asset-gallery-preview] {
    display: block;
    width: 100%;
    max-height: 76vh;
    object-fit: contain;
    border-radius: 0.75rem;
    background: #151a22;
}

.asset-model-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}

.asset-model-gallery-card {
    display: grid;
    gap: 0.3rem;
    min-height: 5rem;
    padding: 0.9rem;
    color: inherit;
    text-align: left;
    background: rgba(14, 26, 38, 0.88);
    border: 1px solid rgba(103, 190, 236, 0.28);
    border-radius: 0.7rem;
    cursor: pointer;
}

.asset-model-gallery-card:hover,
.asset-model-gallery-card:focus-visible {
    border-color: rgba(103, 210, 255, 0.82);
    background: rgba(19, 40, 56, 0.96);
}

.asset-model-gallery-card small {
    color: var(--muted);
}

.asset-model-gallery-card.is-missing {
    opacity: 0.58;
    cursor: default;
}

.asset-model-dialog {
    width: min(94vw, 1050px);
}

/* Temporary admin workshop for performance-light map symbol candidates. */
.asset-model-stage {
    width: 100%;
    height: min(68vh, 720px);
    min-height: 360px;
    overflow: hidden;
    background: #111923;
    border: 1px solid rgba(103, 190, 236, 0.25);
    border-radius: 0.75rem;
}

.asset-model-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

/* Read-only Space Race gate workshop. */
.space-race-gate-workshop {
    max-width: 1480px;
    margin-inline: auto;
}

.space-race-gate-map {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.space-race-gate-sample {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(91, 215, 255, 0.24);
    border-radius: 0.9rem;
    background: rgba(5, 15, 24, 0.96);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.space-race-gate-stage {
    position: relative;
    aspect-ratio: 7 / 4.4;
    overflow: hidden;
    isolation: isolate;
    background-color: #06111a;
    background-image:
        radial-gradient(circle at 16% 22%, rgba(210, 238, 255, 0.82) 0 1px, transparent 1.4px),
        radial-gradient(circle at 77% 31%, rgba(91, 215, 255, 0.64) 0 1px, transparent 1.5px),
        radial-gradient(circle at 54% 68%, rgba(255, 196, 87, 0.55) 0 1px, transparent 1.4px),
        linear-gradient(rgba(91, 215, 255, 0.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 215, 255, 0.075) 1px, transparent 1px),
        radial-gradient(ellipse at center, rgba(18, 45, 62, 0.88), rgba(3, 10, 17, 0.98) 72%);
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, center;
    background-size: 31% 37%, 43% 29%, 37% 41%, 14.2857% 22.7273%, 14.2857% 22.7273%, auto;
}

.space-race-gate-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, transparent 55%, rgba(2, 9, 15, 0.72));
    pointer-events: none;
}

.space-race-gate-stage img {
    position: absolute;
    left: 50%;
    bottom: 13%;
    z-index: 2;
    display: block;
    width: 78%;
    height: auto;
    transform: translateX(-50%);
    object-fit: contain;
    filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.72));
}

.space-race-gate-footprint {
    position: absolute;
    left: 50%;
    bottom: 14%;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 71.4286%;
    height: 22.7273%;
    transform: translateX(-50%);
    border: 1px solid rgba(91, 215, 255, 0.72);
    background: rgba(91, 215, 255, 0.07);
    box-shadow: 0 0 22px rgba(91, 215, 255, 0.12);
}

.space-race-gate-footprint span + span {
    border-left: 1px solid rgba(91, 215, 255, 0.48);
}

.space-race-gate-size {
    position: absolute;
    right: 0.7rem;
    bottom: 0.65rem;
    z-index: 3;
    padding: 0.3rem 0.5rem;
    border: 1px solid rgba(91, 215, 255, 0.28);
    border-radius: 999px;
    background: rgba(3, 11, 18, 0.82);
    color: #bfeeff;
    font-size: 0.7rem;
    font-weight: 850;
    line-height: 1;
}

.space-race-gate-caption {
    display: grid;
    gap: 0.45rem;
    padding: 0.85rem 1rem 1rem;
    border-top: 1px solid rgba(91, 215, 255, 0.16);
    background: rgba(5, 14, 23, 0.94);
}

.space-race-gate-caption > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.55rem;
}

.space-race-gate-caption strong {
    color: var(--cyan);
    letter-spacing: 0.08em;
}

.space-race-gate-caption span {
    color: var(--text);
    font-size: 1rem;
    font-weight: 850;
}

.space-race-gate-caption p {
    margin: 0;
    color: var(--muted);
}

.space-race-gate-sample.is-special {
    border-color: rgba(178, 112, 255, 0.42);
}

.space-race-gate-sample.is-special .space-race-gate-caption strong {
    color: #c995ff;
}

.space-race-gate-sample.is-finish {
    border-color: rgba(244, 184, 74, 0.42);
}

.space-race-gate-sample.is-finish .space-race-gate-caption strong {
    color: #f4c76e;
}

@media (max-width: 820px) {
    .space-race-gate-map {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .space-race-gate-stage {
        aspect-ratio: 7 / 5;
    }

    .space-race-gate-stage img {
        width: 88%;
    }

    .space-race-gate-footprint {
        width: 80%;
    }
}

@media (max-width: 640px) {
    .asset-model-stage {
        height: 58vh;
        min-height: 300px;
    }
}

@media (max-width: 760px) {
    .shipyard-capacity,
    .shipyard-primer {
        top: 64px;
    }

    .shipyard-capacity {
        position: static;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .shipyard-capacity span {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .shipyard-lane-swiper {
        display: none;
    }

    .shipyard-mobile-lane-picker {
        display: grid;
        gap: 5px;
        width: 100%;
        color: var(--muted);
        font-size: 0.76rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .shipyard-mobile-lane-picker select {
        width: 100%;
        min-height: 44px;
    }

    .shipyard-mode-tabs {
        position: sticky;
        top: 62px;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }

    .shipyard-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .shipyard-grid,
    .combat-primer {
        grid-template-columns: 1fr;
    }

    .ship-card {
        padding: 10px;
    }

    .ship-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shipyard-action-form {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .shipyard-action-form input[data-shipyard-quantity][readonly] {
        display: none;
    }

    .shipyard-quantity-control output {
        display: grid;
        place-items: center;
        min-height: 44px;
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: 7px;
        background: rgba(255, 255, 255, 0.055);
        color: var(--text);
        font-size: 16px;
        font-weight: 800;
        line-height: 1;
        user-select: none;
    }

    .shipyard-action-form button[type="submit"],
    .shipyard-action-form .field-help {
        grid-column: 1 / -1;
        width: 100%;
    }

    .shipyard-dialog-body {
        padding-bottom: min(290px, 39dvh);
    }

    .shipyard-action-stage {
        position: fixed;
        top: auto;
        right: 10px;
        bottom: max(8px, env(safe-area-inset-bottom));
        left: 10px;
        z-index: 12;
        max-height: min(280px, 38dvh);
        padding: 9px;
        overflow: auto;
        border-color: rgba(245, 185, 83, 0.52);
        box-shadow: 0 -14px 38px rgba(0, 0, 0, 0.52);
    }

    .shipyard-action-stage .shipyard-action-box {
        padding: 9px;
    }

    .shipyard-action-stage .shipyard-action-box > header {
        align-items: center;
    }

    .shipyard-action-stage .shipyard-cost-summary {
        padding: 7px;
    }

    .shipyard-choice-meta {
        grid-template-columns: 1fr auto;
    }

    .ship-capacity-detail-grid {
        grid-template-columns: 1fr;
    }

    .ship-capacity-dialog.game-overlay,
    .event-calendar-dialog.game-overlay {
        width: 100vw;
    }

    .event-calendar-dialog.game-overlay {
        --game-overlay-padding: 10px;
    }

    .event-calendar-day-header {
        top: 70px;
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 5px;
    }

    .event-calendar-timeline-row,
    .event-calendar-short-row {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 5px;
        padding: 8px 5px;
    }

    .event-calendar-short-row > .button {
        grid-column: 2;
        justify-self: start;
    }

    .event-calendar-icon {
        width: 31px;
        height: 31px;
    }

    .event-calendar-row-copy {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 6px;
    }

    .event-calendar-row-copy > span {
        margin-left: 0;
        font-size: 0.65rem;
    }

    .event-calendar-timeline-main > small {
        font-size: 0.68rem;
    }

    .admin-event-source-grid,
    .admin-event-entry-card {
        grid-template-columns: 1fr;
    }
}

/* These viewport rules intentionally live after the shared overlay and mobile
   shell rules so the alliance command center keeps the canonical full-screen
   overlay behavior on small devices. */
dialog.game-overlay.alliance-secondary-dialog {
    width: min(1080px, calc(100vw - 32px));
    max-height: min(90dvh, 920px);
}

.alliance-command-page > .section-heading.module-heading {
    display: none;
}

body.page-alliance .global-chat-widget.is-alliance-embedded .global-chat-toggle,
body.page-alliance .global-chat-widget.is-alliance-embedded .mobile-chat-preview {
    display: none;
}

@media (max-width: 760px) {
    dialog.game-overlay.alliance-secondary-dialog {
        position: fixed;
        inset: 0;
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: none;
        margin: 0;
        border-radius: 0;
    }

    .alliance-chat-mount,
    .global-chat-widget.is-alliance-embedded,
    .global-chat-widget.is-alliance-embedded:not(.is-collapsed),
    .global-chat-widget.is-alliance-embedded .global-chat-panel,
    .global-chat-widget.is-alliance-embedded.is-collapsed .global-chat-panel {
        min-height: min(40dvh, 340px);
    }

    .global-chat-widget.is-alliance-embedded .global-chat-panel,
    .global-chat-widget.is-alliance-embedded.is-collapsed .global-chat-panel {
        grid-template-rows: auto minmax(140px, 1fr) auto auto;
    }

    .global-chat-widget.is-alliance-embedded .global-chat-log {
        min-height: 140px;
        max-height: 24dvh;
    }
}
.command-alert-card.server-event-schedule {
    color: inherit;
    text-decoration: none;
    border-color: rgba(115, 203, 255, .55);
    background: linear-gradient(135deg, rgba(21, 55, 86, .88), rgba(35, 28, 76, .82));
}

.command-alert-card.server-event-schedule:hover,
.command-alert-card.server-event-schedule:focus-visible {
    border-color: rgba(190, 231, 255, .9);
}
.field-operations-dialog {
    width: min(1100px, calc(100vw - 24px));
}

.field-operations-summary {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 18px 12px;
}

.field-operations-summary > span {
    padding: 7px 11px;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 999px;
    background: rgba(15, 23, 42, .78);
}

.field-operations-content {
    padding: 0 18px 20px;
}

.field-operation-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.field-operation-card,
.field-operation-active {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .28);
    border-left: 4px solid #60a5fa;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(15, 23, 42, .98), rgba(8, 15, 29, .94));
}

.field-operation-card.risk-safe,
.field-operation-active.risk-safe { border-left-color: #34d399; }
.field-operation-card.risk-balanced,
.field-operation-active.risk-balanced { border-left-color: #60a5fa; }
.field-operation-card.risk-risky,
.field-operation-active.risk-risky { border-left-color: #fb7185; }

.field-operation-card > img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

.field-operation-card-body { padding: 14px; }
.field-operation-card header,
.field-operation-active-status,
.field-operation-facts {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.field-operation-card h3,
.field-operation-active h3 { margin: 2px 0 0; }
.field-operation-card p,
.field-operation-active p { color: var(--muted, #aebbd0); }

.field-operation-facts,
.field-operation-active-status {
    margin: 12px 0;
    padding: 10px;
    border-radius: 12px;
    background: rgba(2, 6, 23, .48);
}

.field-operation-facts span,
.field-operation-active-status span {
    display: grid;
    gap: 2px;
}

.field-operation-facts small,
.field-operation-active-status small { color: #94a3b8; }

.field-operation-active-decisions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 14px;
}

.field-operation-active-decisions span {
    display: grid;
    gap: 2px;
    min-width: min(100%, 190px);
    padding: 8px 10px;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 10px;
    background: rgba(15, 23, 42, .62);
}

.field-operation-active-decisions small { color: #94a3b8; }

.field-operation-target-decision {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, .22);
}

.field-operation-target-decision h4 {
    margin: 0 0 10px;
    color: #dbeafe;
    font-size: .95rem;
}

.field-operation-fleet {
    display: grid;
    gap: 5px;
    margin: 12px 0;
}

.field-operation-fleet select { width: 100%; min-height: 44px; }
.field-operation-choices { display: grid; gap: 8px; }

.field-operation-choice {
    display: grid;
    gap: 3px;
    width: 100%;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid rgba(96, 165, 250, .35);
    border-radius: 12px;
    color: inherit;
    text-align: left;
    background: rgba(30, 41, 59, .78);
}

.field-operation-choice:hover,
.field-operation-choice:focus-visible {
    border-color: rgba(125, 211, 252, .85);
    background: rgba(30, 64, 175, .28);
}

.field-operation-choice span,
.field-operation-choice small { color: #b9c7da; }

.field-operation-active {
    display: grid;
    gap: 0;
}

.field-operation-active > img {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

.field-operation-active > div { padding: 16px; }

.field-operation-history {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 14px;
}

.field-operation-history > div {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
}

.field-operation-history img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; }
.field-operation-history span { display: grid; }

.map-poi.poi-field-operation .poi-icon {
    background-image: var(--field-operation-image);
    background-size: cover;
    border: 2px solid #60a5fa;
    box-shadow: 0 0 14px rgba(96, 165, 250, .8);
}
.map-poi.poi-field-operation.risk-safe .poi-icon { border-color: #34d399; }
.map-poi.poi-field-operation.risk-risky .poi-icon { border-color: #fb7185; animation: field-operation-pulse 1.8s ease-in-out infinite; }

@keyframes field-operation-pulse {
    50% { box-shadow: 0 0 24px rgba(251, 113, 133, .95); }
}

@media (min-width: 760px) {
    .field-operation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .field-operation-active { grid-template-columns: minmax(240px, .75fr) minmax(0, 1.25fr); }
    .field-operation-active > img { height: 100%; aspect-ratio: auto; }
}

@media (min-width: 901px) {
    body.page-base.has-world-stage .app-section {
        min-height: 0;
        padding: 6px 10px 12px;
    }

    body.page-base.has-world-stage .base-layout-shell {
        width: 100%;
        margin: 0;
    }

    body.page-base.has-world-stage .base-layout-board.is-pixi-ready,
    body.page-base.has-world-stage .base-layout-board.is-three-ready {
        height: max(620px, calc(100dvh - 178px));
    }
}

/* Die mobilen Weltansichten teilen sich eine vollflaechige App-Buehne. */
.mobile-map-hud,
.mobile-map-lower-shortcuts,
.map-mobile-tools-backdrop,
.map-mobile-tools-head,
.mobile-map-readiness-shell,
.map-toolbar-mobile-only {
    display: none;
}

.map-mobile-tools-shell,
.map-mobile-tools-panel,
.galaxy-map-stage {
    display: contents;
}

@media (max-width: 900px) {
    body.has-world-stage {
        width: 100%;
        overflow: hidden;
        overscroll-behavior: none;
        background: #02080e;
    }

    body.has-world-stage .page-shell {
        min-height: 100dvh;
        padding: 0;
        overflow: hidden;
    }

    body.has-world-stage .app-topbar {
        display: none;
    }

    body.has-world-stage .app-section {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100dvh;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    body.page-base.has-world-stage .base-layout-shell {
        position: absolute;
        inset: 0 0 calc(80px + env(safe-area-inset-bottom, 0px));
        width: 100%;
        height: auto;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: #020711;
        box-shadow: none;
    }

    body.page-base.has-world-stage .base-layout-viewport {
        position: absolute;
        inset: 0;
        overflow: hidden;
        border: 0;
        border-radius: 0;
    }

    body.page-base.has-world-stage .base-layout-board,
    body.page-base.has-world-stage .base-layout-board.is-pixi-ready,
    body.page-base.has-world-stage .base-layout-board.is-three-ready {
        width: 100%;
        min-width: 0;
        height: 100%;
        min-height: 0;
        aspect-ratio: auto;
    }

    body.page-base.has-world-stage .base-layout-toolbar {
        position: fixed;
        top: calc(72px + env(safe-area-inset-top, 0px));
        right: max(62px, calc(54px + env(safe-area-inset-right, 0px)));
        left: max(62px, calc(54px + env(safe-area-inset-left, 0px)));
        z-index: 365;
        display: block;
        width: auto;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        pointer-events: none;
    }

    body.page-base.has-world-stage .base-layout-identity {
        display: flex;
        width: fit-content;
        max-width: 100%;
        min-height: 30px;
        margin-inline: auto;
        padding: 5px 10px;
        border: 1px solid rgba(130, 220, 255, 0.22);
        border-radius: 999px;
        background: rgba(5, 15, 28, 0.7);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(9px);
    }

    body.page-base.has-world-stage .base-layout-identity h2 {
        max-width: min(44vw, 220px);
        font-size: 0.78rem;
    }

    body.page-base.has-world-stage .base-layout-viewport .base-integrity-card {
        bottom: calc(98px + env(safe-area-inset-bottom, 0px));
        left: max(8px, env(safe-area-inset-left, 0px));
        grid-template-columns: auto auto minmax(54px, 86px);
        padding: 6px 8px;
        border-radius: 12px;
    }

    body.page-base.has-world-stage .base-layout-viewport .base-integrity-card small,
    body.page-base.has-world-stage .base-layout-help,
    body.page-base.has-world-stage .base-secondary-status {
        display: none;
    }

    body.page-base.has-world-stage .base-live-message {
        position: fixed;
        top: calc(108px + env(safe-area-inset-top, 0px));
        right: max(62px, calc(54px + env(safe-area-inset-right, 0px)));
        left: max(62px, calc(54px + env(safe-area-inset-left, 0px)));
        z-index: 370;
        margin: 0;
        pointer-events: none;
    }

    body.has-world-stage .galaxy-map {
        position: absolute;
        inset: 0 0 calc(80px + env(safe-area-inset-bottom, 0px));
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 0;
        margin: 0;
        aspect-ratio: auto;
        border: 0;
        border-radius: 0;
        background:
            radial-gradient(circle at 18% 22%, rgba(50, 111, 126, 0.12), transparent 31%),
            radial-gradient(circle at 78% 67%, rgba(89, 73, 120, 0.1), transparent 36%),
            #02080e;
        scrollbar-width: none;
    }

    body.has-world-stage .galaxy-map::-webkit-scrollbar {
        display: none;
    }

    body.has-world-stage .map-admin-zoom-indicator {
        top: max(76px, calc(68px + env(safe-area-inset-top, 0px)));
    }

    body.has-world-stage .galaxy-map-stage {
        --map-camera-pad-top: max(92px, calc(72px + env(safe-area-inset-top, 0px)));
        --map-camera-pad-right: max(72px, calc(58px + env(safe-area-inset-right, 0px)));
        --map-camera-pad-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
        --map-camera-pad-left: max(72px, calc(58px + env(safe-area-inset-left, 0px)));
        position: relative;
        display: block;
        box-sizing: content-box;
        width: max-content;
        min-width: 100%;
        min-height: 100%;
        padding: var(--map-camera-pad-top) var(--map-camera-pad-right) var(--map-camera-pad-bottom) var(--map-camera-pad-left);
        background:
            radial-gradient(circle at 20% 25%, rgba(76, 153, 166, 0.08), transparent 28%),
            radial-gradient(circle at 75% 72%, rgba(116, 87, 145, 0.07), transparent 34%),
            radial-gradient(circle, rgba(167, 217, 229, 0.4) 0 0.6px, transparent 0.9px) 0 0 / 43px 43px,
            #02080e;
    }

    body.has-world-stage .galaxy-map-canvas {
        min-width: 0;
        min-height: 0;
        box-shadow:
            0 0 0 1px rgba(127, 190, 205, 0.18),
            0 0 42px rgba(40, 121, 143, 0.12),
            inset 0 0 120px rgba(0, 0, 0, 0.5);
    }

    body.has-world-stage .galaxy-map-canvas::before {
        box-shadow: inset 0 0 0 1px rgba(164, 205, 214, 0.15);
    }

    body.has-world-stage .galaxy-toolbar,
    body.has-world-stage .map-visual-mode-status,
    body.has-world-stage .map-live-message,
    body.has-world-stage .map-legend {
        margin: 0;
    }

    body.has-world-stage .map-visual-mode-status,
    body.has-world-stage .map-live-message {
        position: fixed;
        top: calc(62px + env(safe-area-inset-top, 0px));
        left: 50%;
        z-index: 365;
        width: min(72vw, 360px);
        transform: translateX(-50%);
        pointer-events: none;
    }

    body.has-world-stage .map-visual-mode-status {
        top: calc(108px + env(safe-area-inset-top, 0px));
        right: max(62px, calc(54px + env(safe-area-inset-right, 0px)));
        left: max(62px, calc(54px + env(safe-area-inset-left, 0px)));
        width: auto;
        transform: none;
    }

    body.has-world-stage .map-legend,
    body.has-world-stage .map-mobile-zoom-controls {
        display: none;
    }

    body.has-world-stage .global-status-stack {
        position: fixed;
        top: max(7px, env(safe-area-inset-top, 0px));
        right: auto;
        left: 50%;
        z-index: 370;
        width: min(238px, calc(100vw - 124px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
        max-width: none;
        margin: 0;
        transform: translateX(-50%);
        pointer-events: none;
    }

    body.has-world-stage .global-resource-bar {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-rows: repeat(2, 30px);
        gap: 2px;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        min-height: 62px;
        padding: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        pointer-events: auto;
    }

    body.has-world-stage .global-resource-pill[data-global-resource-key="metal"] { grid-area: 1 / 1 / 2 / 5; }
    body.has-world-stage .global-resource-pill[data-global-resource-key="crystal"] { grid-area: 1 / 5 / 2 / 9; }
    body.has-world-stage .global-resource-pill[data-global-resource-key="exotic_matter"] { grid-area: 1 / 9 / 2 / 13; }
    body.has-world-stage .global-resource-pill[data-global-resource-key="energy"] { grid-area: 2 / 1 / 3 / 5; }
    body.has-world-stage .global-resource-pill[data-global-resource-key="credits"] { grid-area: 2 / 5 / 3 / 9; }
    body.has-world-stage .world-resource-heat { grid-area: 2 / 9 / 3 / 13; }
    body.has-world-stage .global-resource-collect-form { display: none; }

    body.has-world-stage .world-resource-status {
        display: inline-flex;
        align-items: center;
        align-self: center;
        justify-self: center;
        gap: 2px;
        min-width: 0;
        min-height: 30px;
        padding: 2px;
        border: 0;
        border-radius: 10px;
        color: var(--text);
        background: transparent;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.94);
    }

    body.has-world-stage .world-resource-status .pirate-heat-icon {
        width: 16px;
        height: 16px;
        border: 0;
        flex: 0 0 16px;
        background: transparent;
        font-size: 0.48rem;
    }

    body.has-world-stage .world-resource-status .pirate-heat-symbol {
        width: 16px;
        height: 16px;
    }

    body.has-world-stage .world-resource-status strong {
        font-size: clamp(0.56rem, 2.35vw, 0.7rem);
        line-height: 1;
        white-space: nowrap;
    }

    body.has-world-stage .global-resource-pill {
        grid-template-columns: 16px auto;
        grid-template-rows: 1fr;
        gap: 2px;
        justify-self: center;
        width: max-content;
        max-width: 100%;
        min-width: 0;
        min-height: 30px;
        padding: 2px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.94);
    }

    body.has-world-stage .global-resource-pill:hover,
    body.has-world-stage .global-resource-pill:focus-visible,
    body.has-world-stage .global-resource-pill[aria-expanded="true"] {
        border-color: transparent;
        background: rgba(8, 24, 35, 0.3);
    }

    body.has-world-stage .global-resource-pill .resource-icon {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
    }

    body.has-world-stage .global-resource-pill strong {
        min-width: 0;
        font-size: clamp(0.56rem, 2.35vw, 0.7rem);
        line-height: 1;
        white-space: nowrap;
    }

    body.has-world-stage .global-resource-pill small {
        display: none;
    }

    body.has-world-stage .global-resource-claim-dot {
        top: 1px;
        right: auto;
        left: 13px;
        width: 8px;
        height: 8px;
    }

    body.has-world-stage .global-resource-collect-button {
        width: 30px;
        min-width: 30px;
        height: 30px;
        min-height: 30px;
        padding: 0;
        border-color: rgba(126, 213, 233, 0.3);
        border-radius: 10px;
        background: transparent;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.94);
    }

    body.has-world-stage .global-resource-details {
        position: fixed;
        top: calc(58px + env(safe-area-inset-top, 0px));
        right: 10px;
        left: 10px;
        z-index: 372;
        width: auto;
        max-width: 440px;
        margin-inline: auto;
        padding: 8px;
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
        pointer-events: auto;
    }

    body.has-world-stage .global-resource-details-values {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
    }

    body.has-world-stage .global-resource-details-values > span {
        min-width: 0;
        padding: 5px 6px;
        border-radius: 7px;
        background: rgba(255, 255, 255, 0.045);
        text-align: center;
    }

    body.has-world-stage .global-resource-details-values small,
    body.has-world-stage .global-resource-details-values strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.has-world-stage .global-resource-details-values small {
        font-size: clamp(0.57rem, 2.4vw, 0.68rem);
    }

    body.has-world-stage .global-resource-details > .resource-progress {
        width: 100%;
    }

    body.has-world-stage .global-compact-status-bar,
    body.has-world-stage .base-shield-bar {
        display: none;
    }

    body.has-world-stage .mobile-map-hud {
        position: fixed;
        inset: 0;
        z-index: 360;
        display: block;
        pointer-events: none;
    }

    .mobile-map-hud-button,
    .mobile-map-lower-button {
        display: grid;
        place-items: center;
        padding: 0;
        border: 1px solid rgba(135, 216, 236, 0.28);
        border-radius: 999px;
        color: #caeef7;
        background:
            radial-gradient(circle at 34% 25%, rgba(255, 255, 255, 0.12), transparent 35%),
            rgba(5, 17, 27, 0.78);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.36), inset 0 0 0 3px rgba(90, 200, 226, 0.035);
        backdrop-filter: blur(9px);
        text-decoration: none;
        pointer-events: auto;
        touch-action: manipulation;
    }

    .mobile-map-hud-button {
        position: relative;
        width: 48px;
        height: 48px;
    }

    body.has-world-stage .mobile-map-hud-button[hidden] {
        display: none;
    }

    .mobile-map-hud-button .app-nav-icon,
    .mobile-map-lower-button .app-nav-icon {
        width: 24px;
        height: 24px;
    }

    .mobile-map-hud-button:focus-visible,
    .mobile-map-hud-button:active,
    .mobile-map-lower-button:focus-visible,
    .mobile-map-lower-button:active {
        border-color: rgba(128, 226, 249, 0.86);
        color: #effcff;
        outline: none;
        box-shadow: 0 0 0 3px rgba(76, 196, 226, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    .mobile-map-profile {
        position: fixed;
        top: max(7px, env(safe-area-inset-top, 0px));
        left: max(7px, env(safe-area-inset-left, 0px));
        isolation: isolate;
    }

    .mobile-map-profile-premium-ring {
        position: absolute;
        z-index: 0;
        inset: 1px;
        border-radius: 999px;
        background: rgba(145, 213, 230, 0.24);
        opacity: 0.46;
        pointer-events: none;
        -webkit-mask: radial-gradient(circle, transparent 0 17px, #000 18px);
        mask: radial-gradient(circle, transparent 0 17px, #000 18px);
    }

    .mobile-map-profile.is-premium-active {
        border-color: rgba(255, 222, 139, 0.74);
        box-shadow:
            0 0 0 1px rgba(91, 226, 255, 0.2),
            0 0 18px rgba(247, 194, 84, 0.3),
            0 8px 22px rgba(0, 0, 0, 0.36);
    }

    .mobile-map-profile.is-premium-active .mobile-map-profile-premium-ring {
        background: conic-gradient(
            from 0deg,
            #fff3bd 0deg,
            #f3b94d 68deg,
            #65e8ff 142deg,
            #fff9df 202deg,
            #d7952d 278deg,
            #fff3bd 360deg
        );
        opacity: 1;
        filter: drop-shadow(0 0 4px rgba(255, 211, 105, 0.78));
        animation: mobile-map-premium-ring 3.4s linear infinite;
    }

    .mobile-map-profile-avatar {
        position: relative;
        z-index: 1;
        display: grid;
        width: 34px;
        height: 34px;
        place-items: center;
        border: 1px solid rgba(165, 231, 246, 0.36);
        border-radius: 999px;
        background: linear-gradient(145deg, rgba(48, 128, 153, 0.82), rgba(20, 52, 73, 0.9));
        font-size: 0.96rem;
        font-weight: 900;
    }

    .mobile-map-shield-badge {
        position: absolute;
        z-index: 2;
        right: -2px;
        bottom: -2px;
        width: 16px;
        height: 18px;
        border: 1px solid rgba(208, 249, 255, 0.74);
        border-radius: 7px 7px 9px 9px;
        background: rgba(49, 191, 229, 0.86);
        clip-path: polygon(50% 0, 92% 17%, 84% 72%, 50% 100%, 16% 72%, 8% 17%);
        box-shadow: 0 0 12px rgba(91, 215, 255, 0.7);
    }

    @keyframes mobile-map-premium-ring {
        to { transform: rotate(1turn); }
    }

    .mobile-map-side-rail {
        position: fixed;
        top: calc(68px + env(safe-area-inset-top, 0px));
        display: grid;
        gap: 9px;
        pointer-events: none;
    }

    .mobile-map-side-rail-left {
        left: max(7px, env(safe-area-inset-left, 0px));
    }

    .mobile-map-side-rail-right {
        top: max(7px, env(safe-area-inset-top, 0px));
        right: max(7px, env(safe-area-inset-right, 0px));
    }

    .mobile-map-side-rail .mobile-map-hud-button {
        pointer-events: auto;
    }

    .mobile-map-readiness-button {
        position: relative;
        display: grid;
        width: 48px;
        height: 48px;
        padding: 0;
        place-items: center;
        border: 0;
        border-radius: 999px;
        color: #e8fbff;
        background: rgba(3, 13, 21, 0.76);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.36);
        pointer-events: auto;
        touch-action: manipulation;
    }

    .mobile-map-readiness-ring {
        --readiness-progress: 0deg;
        position: relative;
        display: grid;
        width: 43px;
        height: 43px;
        place-items: center;
        border-radius: 999px;
        background: conic-gradient(#62d9ed var(--readiness-progress), rgba(85, 126, 139, 0.25) 0);
        filter: drop-shadow(0 0 7px rgba(75, 204, 229, 0.25));
    }

    .mobile-map-readiness-ring::after {
        position: absolute;
        inset: 4px;
        border: 1px solid rgba(150, 225, 240, 0.2);
        border-radius: inherit;
        background: radial-gradient(circle at 42% 32%, rgba(32, 76, 91, 0.94), rgba(3, 14, 22, 0.98) 68%);
        content: "";
    }

    .mobile-map-readiness-ring strong {
        position: relative;
        z-index: 1;
        font-size: 0.76rem;
        line-height: 1;
    }

    .mobile-map-readiness-button:focus-visible {
        outline: 2px solid rgba(128, 226, 249, 0.9);
        outline-offset: 2px;
    }

    .mobile-map-readiness-shell {
        position: fixed;
        inset: 0 0 calc(80px + env(safe-area-inset-bottom, 0px));
        z-index: 410;
        pointer-events: none;
    }

    body.has-world-stage.world-readiness-open .mobile-map-readiness-shell {
        display: block;
        pointer-events: auto;
    }

    .mobile-map-readiness-backdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(1, 7, 12, 0.16);
    }

    .mobile-map-readiness-panel {
        position: absolute;
        top: max(72px, calc(64px + env(safe-area-inset-top, 0px)));
        right: max(8px, env(safe-area-inset-right, 0px));
        left: max(8px, env(safe-area-inset-left, 0px));
        display: grid;
        gap: 12px;
        width: auto;
        max-height: min(520px, calc(100dvh - 170px));
        padding: 13px;
        overflow: auto;
        border: 1px solid rgba(103, 203, 225, 0.36);
        border-radius: 14px;
        background: rgba(4, 17, 27, 0.95);
        box-shadow: 0 16px 42px rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(14px);
    }

    .mobile-map-readiness-panel header,
    .mobile-map-readiness-boost,
    .mobile-map-readiness-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .mobile-map-readiness-panel header > div,
    .mobile-map-readiness-boost > div,
    .mobile-map-readiness-item > div,
    .mobile-map-readiness-items,
    [data-world-readiness-items] {
        display: grid;
        gap: 3px;
    }

    .mobile-map-readiness-boost > div,
    .mobile-map-readiness-item > div {
        flex: 1 1 auto;
        min-width: 0;
    }

    .mobile-map-readiness-boost > div > strong,
    .mobile-map-readiness-item > div > strong {
        overflow: hidden;
        font-size: clamp(0.78rem, 3.7vw, 0.9rem);
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-map-readiness-panel header small,
    .mobile-map-readiness-boost small,
    .mobile-map-readiness-current span,
    .mobile-map-readiness-item small {
        color: var(--muted);
        font-size: 0.69rem;
    }

    .mobile-map-readiness-panel header > button {
        width: 34px;
        height: 34px;
        padding: 0;
        border: 1px solid rgba(130, 205, 222, 0.25);
        border-radius: 999px;
        color: var(--text);
        background: rgba(20, 48, 61, 0.74);
        font-size: 1.25rem;
    }

    .mobile-map-readiness-current {
        display: flex;
        align-items: baseline;
        gap: 7px;
        padding: 10px 12px;
        border-radius: 10px;
        background: rgba(57, 145, 165, 0.12);
    }

    .mobile-map-readiness-current strong {
        color: #8ce8f6;
        font-size: 1.35rem;
    }

    .mobile-map-readiness-boost,
    .mobile-map-readiness-item {
        padding: 8px;
        border: 1px solid rgba(126, 192, 207, 0.15);
        border-radius: 9px;
        background: rgba(13, 38, 50, 0.58);
    }

    .mobile-map-readiness-item button,
    .mobile-map-readiness-boost button {
        flex: 0 0 auto;
        width: auto;
        min-width: 74px;
    }

    .mobile-map-hud-label {
        position: absolute;
        top: calc(100% - 2px);
        left: 50%;
        max-width: 64px;
        padding: 1px 4px;
        overflow: hidden;
        border-radius: 999px;
        color: rgba(221, 244, 249, 0.86);
        background: rgba(2, 9, 15, 0.74);
        font-size: 0.54rem;
        font-weight: 800;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .mobile-map-hud-button small {
        position: absolute;
        right: -4px;
        bottom: -4px;
        min-width: 24px;
        padding: 2px 4px;
        border: 1px solid rgba(114, 210, 233, 0.3);
        border-radius: 999px;
        color: #aee9f7;
        background: rgba(2, 10, 18, 0.92);
        font-size: 0.52rem;
        line-height: 1;
    }

    .mobile-map-hud-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        display: grid;
        min-width: 18px;
        height: 18px;
        padding-inline: 4px;
        place-items: center;
        border: 1px solid rgba(230, 250, 255, 0.8);
        border-radius: 999px;
        color: #041017;
        background: #72dbef;
        box-shadow: 0 0 12px rgba(91, 215, 255, 0.58);
        font-size: 0.6rem;
        font-weight: 900;
    }

    .mobile-map-threat-button {
        color: #91eaff;
        border-color: rgba(255, 91, 91, 0.78);
        box-shadow: 0 0 18px rgba(255, 72, 72, 0.4), inset 0 0 0 3px rgba(255, 86, 86, 0.07);
    }

    body.has-world-stage .mobile-map-threat-button[hidden] {
        display: none;
    }

    body.has-world-stage .mobile-map-threat-button:not([hidden]) {
        animation: mobile-map-threat-pulse 2.2s ease-in-out infinite;
    }

    .mobile-map-target-icon {
        position: relative;
        display: block;
        width: 24px;
        height: 24px;
        border: 2px solid currentColor;
        border-radius: 999px;
        box-shadow: inset 0 0 0 5px rgba(5, 17, 27, 0.92);
    }

    .mobile-map-target-icon::before,
    .mobile-map-target-icon::after {
        position: absolute;
        top: 50%;
        left: 50%;
        background: currentColor;
        content: "";
        transform: translate(-50%, -50%);
    }

    .mobile-map-target-icon::before { width: 30px; height: 2px; }
    .mobile-map-target-icon::after { width: 2px; height: 30px; }

    .mobile-map-lower-shortcuts {
        display: contents;
    }

    .mobile-map-lower-button {
        position: fixed;
        z-index: 445;
        bottom: calc(91px + env(safe-area-inset-bottom, 0px));
        width: 54px;
        height: 54px;
        grid-template-rows: 28px auto;
        gap: 1px;
        border-radius: 18px;
        font-size: 0.58rem;
        font-weight: 900;
    }

    .mobile-map-lower-button:first-child {
        left: max(7px, env(safe-area-inset-left, 0px));
    }

    .mobile-map-lower-button:last-child {
        right: max(7px, env(safe-area-inset-right, 0px));
    }

    body.has-world-stage .global-chat-widget {
        right: max(68px, calc(60px + env(safe-area-inset-right, 0px)));
        left: max(68px, calc(60px + env(safe-area-inset-left, 0px)));
        bottom: calc(82px + env(safe-area-inset-bottom, 0px));
        z-index: 405;
    }

    body.has-world-stage .mobile-chat-preview {
        min-height: 68px;
        padding: 6px 8px;
        border-color: rgba(91, 215, 255, 0.2);
        border-radius: 15px;
        background: rgba(4, 14, 23, 0.68);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(10px);
    }

    body.has-world-stage .mobile-chat-preview-channel {
        display: none;
    }

    body.has-world-stage .mobile-chat-preview-lines {
        gap: 1px;
        font-size: clamp(0.63rem, 2.6vw, 0.72rem);
    }

    body.has-world-stage .map-mobile-tools-shell {
        position: fixed;
        inset: 0;
        z-index: 455;
        display: block;
        visibility: hidden;
        pointer-events: none;
    }

    body.has-world-stage .map-mobile-tools-backdrop {
        position: absolute;
        inset: 0;
        display: block;
        border: 0;
        background: rgba(1, 6, 12, 0.58);
        opacity: 0;
        backdrop-filter: blur(2px);
        transition: opacity 150ms ease;
    }

    body.has-world-stage .map-mobile-tools-panel {
        position: absolute;
        right: max(8px, env(safe-area-inset-right, 0px));
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        left: max(8px, env(safe-area-inset-left, 0px));
        display: grid;
        gap: 10px;
        max-height: min(68dvh, 560px);
        padding: 12px;
        overflow: auto;
        overscroll-behavior: contain;
        border: 1px solid rgba(179, 230, 242, 0.48);
        border-radius: 20px;
        background: rgba(4, 14, 23, 0.97);
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.62);
        transform: translateY(20px);
        opacity: 0;
        transition: transform 150ms ease, opacity 150ms ease;
    }

    body.has-world-stage.world-tools-open .map-mobile-tools-shell {
        visibility: visible;
        pointer-events: auto;
    }

    body.has-world-stage.world-tools-open .map-mobile-tools-backdrop,
    body.has-world-stage.world-tools-open .map-mobile-tools-panel {
        opacity: 1;
    }

    body.has-world-stage.world-tools-open .map-mobile-tools-panel {
        transform: translateY(0);
    }

    body.has-world-stage .map-mobile-tools-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    body.has-world-stage .map-mobile-tools-head > div {
        display: grid;
        gap: 1px;
    }

    body.has-world-stage .map-mobile-tools-head small {
        color: var(--muted);
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    body.has-world-stage .map-mobile-tools-head strong {
        font-size: 1.02rem;
    }

    body.has-world-stage .map-mobile-tools-head button {
        width: 40px;
        height: 40px;
        border: 1px solid rgba(244, 250, 255, 0.34);
        border-radius: 999px;
        color: var(--text);
        background: rgba(255, 255, 255, 0.07);
        font-size: 1.2rem;
    }

    body.has-world-stage .map-mobile-tools-panel .galaxy-toolbar {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
        padding: 0;
        overflow: visible;
    }

    body.page-base.has-world-stage .map-mobile-tools-panel .base-layout-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        overflow: visible;
    }

    body.page-base.has-world-stage .map-mobile-tools-panel .base-layout-view-control,
    body.page-base.has-world-stage .map-mobile-tools-panel .base-layout-tool-button {
        display: grid;
        min-width: 0;
        min-height: 72px;
        margin: 0;
        padding: 7px;
        place-items: center;
        gap: 4px;
        border: 1px solid rgba(128, 218, 255, 0.24);
        border-radius: 14px;
        color: #dff7ff;
        background: rgba(19, 48, 69, 0.66);
    }

    body.page-base.has-world-stage .map-mobile-tools-panel .base-layout-view-control {
        grid-column: span 3;
        grid-template-columns: 26px minmax(68px, auto) minmax(0, 1fr);
        min-height: 54px;
    }

    body.page-base.has-world-stage .map-mobile-tools-panel .base-layout-view-control > span {
        display: inline;
        color: #8de5ff;
        font-size: 1.1rem;
    }

    body.page-base.has-world-stage .map-mobile-tools-panel .base-layout-view-control select {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    body.page-base.has-world-stage .map-mobile-tools-panel .base-layout-tool-button {
        width: 100%;
        height: auto;
        grid-template-rows: 28px auto;
        font-size: 1.25rem;
    }

    body.page-base.has-world-stage .map-mobile-tools-panel .base-layout-tool-label {
        display: block;
        min-width: 0;
        overflow: hidden;
        color: #dff7ff;
        font-size: 0.66rem;
        font-weight: 800;
        line-height: 1.1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.page-base.has-world-stage .map-mobile-tools-panel .base-layout-tool-button:disabled {
        opacity: 0.45;
    }

    body.has-world-stage .map-mobile-tools-panel .map-tool-button,
    body.has-world-stage .map-mobile-tools-panel .toolbar-inline-form .map-tool-button {
        width: 100%;
        min-width: 0;
        min-height: 58px;
        padding: 6px 4px;
        border-radius: 13px;
    }

    body.has-world-stage .map-mobile-tools-panel .map-tool-button .map-tool-label,
    body.has-world-stage .map-mobile-tools-panel .map-tool-button-secondary .map-tool-meta {
        position: static;
        width: auto;
        height: auto;
        overflow: hidden;
        clip: auto;
        font-size: 0.62rem;
        line-height: 1.1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.has-world-stage .map-mobile-tools-panel .map-tool-label-desktop,
    body.has-world-stage .map-mobile-tools-panel .map-tool-meta,
    body.has-world-stage .map-mobile-tools-panel [data-map-coordinates],
    body.has-world-stage .map-mobile-tools-panel [data-map-zoom-label],
    body.has-world-stage .map-mobile-tools-panel [data-jump-status-message],
    body.has-world-stage .map-mobile-tools-panel .toolbar-inline-form {
        display: none;
    }

    body.has-world-stage .map-mobile-tools-panel .map-tool-label-mobile {
        display: block;
    }

    body.has-world-stage .map-mobile-tools-panel .map-tool-button .map-tool-meta {
        bottom: -5px;
        font-size: 0.5rem;
    }

    body.has-world-stage .map-mobile-tools-panel .map-toolbar-mobile-only {
        display: grid;
        grid-template-rows: 26px auto;
        place-items: center;
        color: var(--cyan);
        font-size: 1.3rem;
    }

    body.has-world-stage.mobile-hub-open .mobile-map-side-rail,
    body.has-world-stage.mobile-hub-open .mobile-map-profile,
    body.has-world-stage.mobile-hub-open .global-status-stack,
    body.has-world-stage.mobile-hub-open .mobile-map-lower-shortcuts,
    body.has-world-stage.mobile-hub-open .global-chat-widget,
    body.has-world-stage.world-tools-open .mobile-map-hud,
    body.has-world-stage.world-tools-open .global-status-stack,
    body.has-world-stage.world-tools-open .global-chat-widget {
        pointer-events: none;
    }

    body.has-world-stage.mobile-hub-open .mobile-map-side-rail .mobile-map-hud-button,
    body.has-world-stage.mobile-hub-open .mobile-map-readiness-button,
    body.has-world-stage.mobile-hub-open .mobile-map-profile,
    body.has-world-stage.mobile-hub-open .mobile-map-lower-button {
        pointer-events: none;
    }

    body.has-world-stage.world-tools-open .mobile-map-hud,
    body.has-world-stage.world-tools-open .global-status-stack {
        opacity: 0.35;
    }

    body.has-world-stage.world-tools-open .global-chat-widget {
        visibility: hidden;
        opacity: 0;
    }
}

@media (max-width: 380px) {
    body.has-world-stage .global-status-stack {
        right: auto;
        left: 50%;
        width: min(238px, calc(100vw - 114px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    }

    body.has-world-stage .global-resource-bar {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        padding-inline: 2px;
    }

    body.has-world-stage .global-resource-pill {
        grid-template-columns: 14px auto;
        padding-inline: 1px;
    }

    body.has-world-stage .global-resource-pill .resource-icon {
        width: 14px;
        height: 14px;
    }

    body.has-world-stage .world-resource-status .pirate-heat-icon,
    body.has-world-stage .world-resource-status .pirate-heat-symbol {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }

    body.has-world-stage .global-resource-collect-button {
        width: 27px;
        min-width: 27px;
    }

    body.has-world-stage .map-mobile-tools-panel .galaxy-toolbar {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-map-profile.is-premium-active .mobile-map-profile-premium-ring {
        animation: none;
    }

    body.has-world-stage .mobile-map-threat-button:not([hidden]) {
        animation: none;
    }

    body.has-world-stage .map-mobile-tools-backdrop,
    body.has-world-stage .map-mobile-tools-panel {
        transition: none;
    }
}

@keyframes mobile-map-threat-pulse {
    0%, 100% {
        border-color: rgba(255, 91, 91, 0.62);
        box-shadow: 0 0 10px rgba(255, 72, 72, 0.24), inset 0 0 0 3px rgba(255, 86, 86, 0.05);
    }
    50% {
        border-color: rgba(255, 187, 187, 0.96);
        box-shadow: 0 0 24px rgba(255, 62, 62, 0.66), inset 0 0 0 3px rgba(255, 86, 86, 0.13);
    }
}

/* Allianz-Kommunikationsbuehne: Identitaet und Chat bleiben der Hauptinhalt. */
body.page-alliance.has-world-stage .alliance-command-page {
    width: min(1240px, 100%);
    margin-inline: auto;
}

@media (min-width: 901px) {
    body.page-alliance.has-world-stage .world-hud-context-alliance {
        position: fixed;
        inset: 0;
        z-index: 330;
        display: block;
        pointer-events: none;
    }

    body.page-alliance.has-world-stage .world-hud-context-alliance .mobile-map-profile,
    body.page-alliance.has-world-stage .world-hud-context-alliance .mobile-map-readiness-button,
    body.page-alliance.has-world-stage .world-hud-context-alliance .mobile-map-lower-shortcuts {
        display: none;
    }

    body.page-alliance.has-world-stage .world-hud-context-alliance .mobile-map-side-rail {
        position: fixed;
        top: 164px;
        display: grid;
        gap: 10px;
        pointer-events: none;
    }

    body.page-alliance.has-world-stage .world-hud-context-alliance .mobile-map-side-rail-left {
        left: 82px;
    }

    body.page-alliance.has-world-stage .world-hud-context-alliance .mobile-map-side-rail-right {
        right: 14px;
    }

    body.page-alliance.has-world-stage .world-hud-context-alliance .mobile-map-hud-button {
        position: relative;
        display: grid;
        width: 82px;
        min-height: 58px;
        padding: 7px 5px 5px;
        place-items: center;
        border: 1px solid rgba(135, 216, 236, 0.28);
        border-radius: 15px;
        color: #caeef7;
        background: rgba(5, 17, 27, 0.9);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.36);
        font: inherit;
        cursor: pointer;
        pointer-events: auto;
    }

    body.page-alliance.has-world-stage .world-hud-context-alliance .mobile-map-hud-button .app-nav-icon {
        width: 25px;
        height: 25px;
    }

    body.page-alliance.has-world-stage .world-hud-context-alliance .mobile-map-hud-label {
        max-width: 100%;
        overflow: hidden;
        font-size: 0.66rem;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.page-alliance.has-world-stage .world-hud-context-alliance .mobile-map-hud-badge {
        position: absolute;
        top: -5px;
        right: -5px;
        display: grid;
        min-width: 20px;
        height: 20px;
        padding-inline: 4px;
        place-items: center;
        border-radius: 999px;
        color: #041017;
        background: #72dbef;
        font-size: 0.62rem;
        font-weight: 900;
    }

    body.page-alliance.has-world-stage .alliance-command-page {
        padding-inline: 118px;
    }
}

@media (min-width: 1400px) {
    body.page-alliance.has-world-stage .world-hud-context-alliance .mobile-map-side-rail-left {
        left: 176px;
    }

    body.page-alliance.has-world-stage .world-hud-context-alliance .mobile-map-side-rail-right {
        right: 370px;
    }
}

body.page-alliance.has-world-stage .alliance-command-center {
    grid-template-columns: minmax(0, 1fr);
    width: min(1180px, 100%);
    align-items: stretch;
}

body.page-alliance.has-world-stage .alliance-command-title h1 {
    margin-bottom: 0;
    font-size: clamp(1.08rem, 2vw, 1.45rem);
    line-height: 1.15;
}

body.page-alliance.has-world-stage .alliance-communication-stage {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

body.page-alliance.has-world-stage .alliance-command-page > [data-alliance-daily-task],
body.page-alliance.has-world-stage .alliance-command-page > [data-alliance-situation] {
    display: none;
}

body.page-alliance.has-world-stage .alliance-command-page > .alliance-contribution-section {
    display: contents;
}

.mobile-map-hud-button.has-world-attention {
    border-color: rgba(255, 190, 91, 0.86);
    color: #fff2c9;
    box-shadow: 0 0 19px rgba(255, 158, 49, 0.42), inset 0 0 0 3px rgba(255, 177, 67, 0.08);
}

.mobile-map-hud-button > .alliance-tool-alert-dot {
    top: -2px;
    right: -2px;
}

.mobile-map-hud-badge[hidden] {
    display: none !important;
}

dialog[data-alliance-panel-dialog="management"] .alliance-secondary-dialog-body {
    display: grid;
    gap: 18px;
}

dialog[data-alliance-panel-dialog="management"] .alliance-management-fragment {
    padding: 14px;
    border: 1px solid rgba(91, 215, 255, 0.17);
    border-radius: 15px;
    background: rgba(5, 17, 28, 0.56);
}

dialog[data-alliance-panel-dialog="management"] .alliance-management-fragment + .alliance-management-fragment {
    margin-top: 0;
}

dialog[data-alliance-panel-dialog="management"] .alliance-management-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

dialog[data-alliance-panel-dialog="management"] .alliance-management-layout > .wide {
    grid-column: 1 / -1;
}

dialog[data-alliance-panel-dialog="management"] .alliance-settings-panel {
    width: 100%;
    max-width: none;
    margin: 0 0 12px;
}

@media (max-width: 900px) {
    body.page-alliance.has-world-stage .alliance-command-page {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 7px;
        padding:
            max(70px, calc(64px + env(safe-area-inset-top, 0px)))
            max(62px, calc(56px + env(safe-area-inset-right, 0px)))
            calc(82px + env(safe-area-inset-bottom, 0px))
            max(62px, calc(56px + env(safe-area-inset-left, 0px)));
    }

    body.page-alliance.has-world-stage .alliance-command-identity {
        grid-template-columns: 48px minmax(0, 1fr) auto;
        gap: 7px;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 7px;
        border-radius: 12px;
    }

    body.page-alliance.has-world-stage .alliance-command-emblem {
        width: 48px;
        height: 46px;
    }

    body.page-alliance.has-world-stage .alliance-command-emblem .alliance-banner-compact {
        min-height: 46px;
    }

    body.page-alliance.has-world-stage .alliance-command-title h1 {
        font-size: clamp(0.72rem, 3.4vw, 0.9rem);
    }

    body.page-alliance.has-world-stage .alliance-command-title .alliance-badge {
        max-width: 100%;
        overflow: hidden;
        font-size: 0.54rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.page-alliance.has-world-stage .alliance-command-status strong {
        font-size: 0.94rem;
    }

    body.page-alliance.has-world-stage .alliance-command-center {
        width: 100%;
        height: 100%;
        min-height: 0;
        margin: 0;
    }

    body.page-alliance.has-world-stage .alliance-communication-stage {
        min-height: 0;
        border-radius: 12px;
    }

    body.page-alliance.has-world-stage .alliance-communication-stage > header {
        padding: 7px 9px;
    }

    body.page-alliance.has-world-stage .alliance-communication-stage h2 {
        font-size: 0.82rem;
    }

    body.page-alliance.has-world-stage .alliance-command-kicker,
    body.page-alliance.has-world-stage .alliance-live-indicator {
        font-size: 0.54rem;
    }

    body.page-alliance.has-world-stage .alliance-chat-mount,
    body.page-alliance.has-world-stage .global-chat-widget.is-alliance-embedded,
    body.page-alliance.has-world-stage .global-chat-widget.is-alliance-embedded:not(.is-collapsed),
    body.page-alliance.has-world-stage .global-chat-widget.is-alliance-embedded .global-chat-panel,
    body.page-alliance.has-world-stage .global-chat-widget.is-alliance-embedded.is-collapsed .global-chat-panel {
        width: 100%;
        min-width: 0;
        min-height: 0;
        height: 100%;
    }

    body.page-alliance.has-world-stage .global-chat-widget:not(.is-alliance-embedded) {
        visibility: hidden;
    }

    body.page-alliance.has-world-stage .global-chat-widget.is-alliance-embedded,
    body.page-alliance.has-world-stage .global-chat-widget.is-alliance-embedded:not(.is-collapsed) {
        position: static;
        inset: auto;
    }

    body.page-alliance.has-world-stage .global-chat-widget.is-alliance-embedded .global-chat-panel,
    body.page-alliance.has-world-stage .global-chat-widget.is-alliance-embedded.is-collapsed .global-chat-panel {
        grid-template-rows: auto minmax(0, 1fr) auto auto;
    }

    body.page-alliance.has-world-stage .global-chat-widget.is-alliance-embedded .global-chat-log {
        min-height: 0;
        max-height: none;
        padding: 8px;
    }

    body.page-alliance.has-world-stage .global-chat-widget.is-alliance-embedded .global-chat-tabs {
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.page-alliance.has-world-stage .global-chat-widget.is-alliance-embedded .global-chat-form {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    dialog[data-alliance-panel-dialog="management"] .alliance-management-fragment {
        padding: 8px;
        border-radius: 11px;
    }

    dialog[data-alliance-panel-dialog="management"] .alliance-management-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    dialog[data-alliance-panel-dialog="management"] .alliance-management-layout > .wide {
        grid-column: auto;
    }
}

/* Instanziertes PvP-Manöver */
.page-pvp-event .global-inventory-widget,
.page-pvp-event [data-mobile-hub-item="inventory"] {
    display: none !important;
}

.pvp-event-mobile-nav {
    display: none;
}

.active-pvp-match-shortcut {
    display: none;
}

.pvp-event-page {
    min-height: calc(100vh - 7rem);
    padding: clamp(.75rem, 2vw, 1.5rem);
    color: #e8f4fb;
    background:
        radial-gradient(circle at 12% 30%, rgba(31, 201, 220, .09), transparent 32%),
        radial-gradient(circle at 88% 70%, rgba(220, 145, 48, .08), transparent 31%),
        #050b14;
}

.pvp-event-page[hidden] {
    display: none !important;
}

.pvp-event-result-stage {
    --pvp-result-image: none;
    --pvp-result-image-mobile: var(--pvp-result-image);
    --pvp-result-own-rgb: 76 220 235;
    --pvp-result-opponent-rgb: 235 157 72;
    position: fixed;
    z-index: 600;
    inset: 0;
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: max(18px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
    overflow: auto;
    color: #edfaff;
    background: #020711;
    isolation: isolate;
}

.pvp-event-result-stage[hidden] {
    display: none;
}

.pvp-event-result-stage::before,
.pvp-event-result-stage::after {
    position: absolute;
    z-index: -2;
    inset: 0;
    content: "";
    pointer-events: none;
}

.pvp-event-result-stage::before {
    background-image: var(--pvp-result-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: saturate(.82) brightness(.72);
}

.pvp-event-result-stage.is-own-team-amber {
    --pvp-result-own-rgb: 235 157 72;
    --pvp-result-opponent-rgb: 76 220 235;
}

.pvp-event-result-stage.is-own-team-amber::before {
    transform: scaleX(-1);
}

.pvp-event-result-stage::after {
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(1, 5, 12, .35), rgba(1, 5, 12, .72)),
        radial-gradient(circle at 50% 50%, rgba(3, 11, 22, .35), rgba(1, 5, 12, .82) 78%);
}

.pvp-event-result-stage.is-winner-own::after {
    background:
        radial-gradient(circle at 4% 50%, rgb(var(--pvp-result-own-rgb) / .34), transparent 38%),
        linear-gradient(180deg, rgba(1, 5, 12, .35), rgba(1, 5, 12, .72)),
        radial-gradient(circle at 50% 50%, rgba(3, 11, 22, .3), rgba(1, 5, 12, .84) 80%);
}

.pvp-event-result-stage.is-winner-opponent::after {
    background:
        radial-gradient(circle at 96% 50%, rgb(var(--pvp-result-opponent-rgb) / .34), transparent 38%),
        linear-gradient(180deg, rgba(1, 5, 12, .35), rgba(1, 5, 12, .72)),
        radial-gradient(circle at 50% 50%, rgba(3, 11, 22, .3), rgba(1, 5, 12, .84) 80%);
}

.pvp-event-result-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: clamp(.8rem, 2vh, 1.25rem);
    width: min(100%, 760px);
    max-height: calc(100dvh - 36px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding: clamp(1rem, 3vw, 1.7rem);
    border: 1px solid rgba(174, 222, 239, .3);
    border-radius: 18px;
    background: rgba(2, 9, 19, .74);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .62), inset 0 1px rgba(255, 255, 255, .06);
    backdrop-filter: blur(12px);
    text-align: center;
    overflow: hidden;
}

.pvp-event-result-panel header h1 {
    margin: .15rem 0;
    font-size: clamp(1.65rem, 5vw, 3rem);
    line-height: 1.05;
}

.pvp-event-result-panel header > p:last-child,
.pvp-event-result-panel footer p {
    margin: .25rem 0 0;
    color: #a9becb;
}

.pvp-event-result-score {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
}

.pvp-event-result-score > div {
    display: grid;
    gap: .15rem;
    min-width: 0;
    padding: .65rem .8rem;
    border: 1px solid rgb(var(--pvp-result-own-rgb) / .32);
    background: rgb(var(--pvp-result-own-rgb) / .08);
}

.pvp-event-result-score > div.is-opponent {
    border-color: rgb(var(--pvp-result-opponent-rgb) / .32);
    background: rgb(var(--pvp-result-opponent-rgb) / .08);
}

.pvp-event-result-score span {
    overflow: hidden;
    color: #b9cbd5;
    font-size: .72rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pvp-event-result-score strong {
    color: rgb(var(--pvp-result-own-rgb));
    font-size: clamp(1.8rem, 6vw, 3rem);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.pvp-event-result-score .is-opponent strong {
    color: rgb(var(--pvp-result-opponent-rgb));
}

.pvp-event-result-score > b {
    color: #718593;
    font-size: 1.7rem;
}

.pvp-event-result-objectives {
    display: grid;
    gap: 5px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.pvp-event-result-objective-head,
.pvp-event-result-objective-row {
    display: grid;
    grid-template-columns: minmax(4.2rem, .7fr) minmax(8rem, 1.35fr) minmax(4.2rem, .7fr);
    align-items: center;
    gap: .5rem;
}

.pvp-event-result-objective-head {
    padding-inline: .7rem;
    color: #8da4b2;
    font-size: .67rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.pvp-event-result-objective-row {
    min-height: 48px;
    padding: .55rem .7rem;
    border: 1px solid rgba(136, 190, 213, .18);
    background: rgba(4, 15, 28, .72);
}

.pvp-event-result-objective-row span {
    color: #edf8fc;
    font-weight: 850;
}

.pvp-event-result-objective-row b {
    color: rgb(var(--pvp-result-own-rgb));
    font-variant-numeric: tabular-nums;
}

.pvp-event-result-objective-row b:last-child {
    color: rgb(var(--pvp-result-opponent-rgb));
}

.pvp-event-result-panel footer {
    display: grid;
    justify-items: center;
    gap: .8rem;
}

.pvp-event-result-panel footer .button {
    min-width: min(100%, 280px);
}

.reward-reveal.is-pvp-event-result {
    --pvp-result-image: none;
    --pvp-result-image-mobile: var(--pvp-result-image);
    position: fixed;
    z-index: 650;
    inset: 0;
    min-height: 100dvh;
    border-radius: 0;
    background-image:
        radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--reward-reveal-color) 25%, transparent), transparent 34%),
        linear-gradient(180deg, rgba(1, 5, 12, .38), rgba(1, 5, 12, .8)),
        var(--pvp-result-image);
    background-position: center, center, center;
    background-repeat: no-repeat;
    background-size: cover;
}

.reward-reveal.is-pvp-event-result.is-winner-cyan {
    background-image:
        radial-gradient(circle at 12% 50%, rgba(76, 220, 235, .34), transparent 38%),
        radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--reward-reveal-color) 25%, transparent), transparent 34%),
        linear-gradient(180deg, rgba(1, 5, 12, .38), rgba(1, 5, 12, .8)),
        var(--pvp-result-image);
}

.reward-reveal.is-pvp-event-result.is-winner-amber {
    background-image:
        radial-gradient(circle at 88% 50%, rgba(235, 157, 72, .34), transparent 38%),
        radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--reward-reveal-color) 25%, transparent), transparent 34%),
        linear-gradient(180deg, rgba(1, 5, 12, .38), rgba(1, 5, 12, .8)),
        var(--pvp-result-image);
}

.pvp-event-admin-page > .settings-form,
.pvp-event-admin-page > .wide-admin-panel {
    display: grid;
    gap: 18px;
    width: min(100%, 1280px);
    margin-inline: auto;
}

.pvp-event-admin-formats {
    display: flex;
    gap: 8px;
    width: min(100%, 1280px);
    margin: 0 auto 18px;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.pvp-event-admin-formats .button {
    flex: 0 0 auto;
}

.pvp-spectator-link {
    width: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
}

.pvp-event-admin-page .dialog-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.pvp-event-admin-page .toggle-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    white-space: nowrap;
}

.pvp-event-admin-objective-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.pvp-event-admin-objective {
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(136, 194, 222, 0.2);
    border-radius: 8px;
    background: rgba(4, 13, 24, 0.45);
}

.pvp-event-admin-objective h3 {
    margin: 4px 0 8px;
}

.pvp-event-admin-objective code {
    display: block;
    margin-bottom: 14px;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.pvp-event-admin-schedule {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(240px, 1fr) minmax(240px, 1fr) auto;
    align-items: end;
    gap: 14px;
    margin-bottom: 12px;
}

.pvp-event-weekly-admin-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.pvp-event-weekly-admin-list .pvp-event-admin-schedule {
    grid-template-columns: minmax(150px, .8fr) minmax(130px, .6fr) minmax(220px, 1.2fr) auto auto;
    padding: 12px;
    border: 1px solid rgba(136, 194, 222, .18);
    border-radius: 8px;
    background: rgba(4, 13, 24, .36);
}

.pvp-event-admin-schedule-formats {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid rgba(136, 194, 222, .2);
    border-radius: 6px;
}

.pvp-event-admin-schedule-formats legend {
    padding-inline: 4px;
    color: var(--muted);
    font-size: .72rem;
}

.pvp-event-admin-page .status-pill {
    display: inline-flex;
    padding: 4px 8px;
    border: 1px solid rgba(142, 177, 200, 0.28);
    border-radius: 999px;
    color: var(--muted);
    white-space: nowrap;
}

.pvp-event-admin-page .status-running {
    border-color: rgba(74, 218, 196, 0.5);
    color: #7ce5d5;
}

.pvp-event-admin-page .status-registration {
    border-color: rgba(82, 194, 225, 0.5);
    color: #82d9ee;
}

/* Zentrale Infrastrukturverwaltung */
.infrastructure-admin-page .section-heading,
.infrastructure-admin-page > .admin-nav-groups,
.infrastructure-admin-layout {
    width: min(100%, 1440px);
    margin-inline: auto;
}

.maintenance-admin-page > .section-heading,
.maintenance-admin-page > .admin-nav-groups,
.maintenance-admin-page > .notice,
.maintenance-admin-page > .admin-grid,
.maintenance-admin-page > .wide-admin-panel {
    width: min(100%, 1280px);
    margin-inline: auto;
}

.maintenance-admin-page > .admin-grid > .admin-panel {
    width: 100%;
}

.infrastructure-admin-layout,
.infrastructure-admin-layout > form {
    display: grid;
    gap: 18px;
}

.infrastructure-health-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.infrastructure-health-summary article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid rgba(136, 194, 222, .2);
    border-radius: 8px;
    background: rgba(4, 13, 24, .55);
}

.infrastructure-health-summary span {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 800;
}

.infrastructure-health-summary b {
    font-size: 1.35rem;
}

.infrastructure-health-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 900;
    white-space: nowrap;
}

.health-status-healthy,
.health-summary-healthy b {
    color: #70e3bd;
}

.health-status-degraded,
.health-summary-degraded b {
    color: #f2c977;
}

.health-status-critical,
.health-summary-critical b,
.health-status-unreachable,
.health-summary-unreachable b {
    color: #f08c8c;
}

.health-status-unmonitored,
.health-summary-unmonitored b {
    color: #9eafba;
}

.infrastructure-health-heartbeat,
.infrastructure-health-status + small,
.infrastructure-health-sparkline + .infrastructure-status {
    display: block;
    margin-top: 6px;
}

.infrastructure-health-metrics,
.infrastructure-health-checks {
    min-width: 150px;
}

.infrastructure-health-metrics > span,
.infrastructure-health-checks > span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .78rem;
}

.infrastructure-health-metrics small,
.infrastructure-health-checks small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
}

.infrastructure-health-sparkline {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    width: 120px;
    height: 28px;
    margin-top: 7px;
    overflow: hidden;
}

.infrastructure-health-sparkline span {
    flex: 1 1 2px;
    min-width: 1px;
    max-width: 4px;
    border-radius: 2px 2px 0 0;
    background: #70e3bd;
}

.infrastructure-health-sparkline .health-point-degraded {
    background: #f2c977;
}

.infrastructure-health-sparkline .health-point-critical,
.infrastructure-health-sparkline .health-point-unreachable {
    background: #f08c8c;
}

.infrastructure-health-sparkline .health-point-unmonitored {
    background: #667984;
}

.infrastructure-admin-page .dialog-heading-row,
.infrastructure-save-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.infrastructure-role-pills,
.infrastructure-role-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.infrastructure-role-pills span,
.infrastructure-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    border: 1px solid rgba(106, 200, 225, .3);
    border-radius: 999px;
    color: #aeeafa;
    background: rgba(24, 134, 164, .1);
    font-size: .75rem;
    font-weight: 800;
    white-space: nowrap;
}

.infrastructure-status.status-maintenance {
    border-color: rgba(235, 176, 72, .5);
    color: #f2c977;
    background: rgba(190, 120, 26, .1);
}

.infrastructure-status.status-disabled {
    border-color: rgba(210, 93, 93, .45);
    color: #ee9b9b;
    background: rgba(157, 52, 52, .1);
}

.infrastructure-role-picker {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(136, 194, 222, .2);
    border-radius: 8px;
}

.infrastructure-role-picker legend {
    padding-inline: 6px;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.infrastructure-role-picker label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 7px 12px;
    border: 1px solid rgba(136, 194, 222, .2);
    border-radius: 7px;
    background: rgba(4, 13, 24, .45);
}

.infrastructure-prepared-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.infrastructure-prepared-grid article {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(136, 194, 222, .18);
    border-radius: 8px;
    background: rgba(4, 13, 24, .42);
}

.infrastructure-prepared-grid article span,
.infrastructure-prepared-grid article small {
    color: var(--muted);
}

.infrastructure-save-row {
    align-items: center;
}

.infrastructure-save-row p {
    max-width: 860px;
    margin: 0;
}

@media (max-width: 900px) {
    .pvp-event-admin-objective-grid {
        grid-template-columns: 1fr;
    }

    .pvp-event-admin-schedule {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .pvp-event-admin-page .dialog-heading-row {
        align-items: stretch;
        flex-direction: column;
    }

    .pvp-event-admin-page .toggle-line {
        white-space: normal;
    }

    .infrastructure-admin-page .dialog-heading-row,
    .infrastructure-save-row {
        align-items: stretch;
        flex-direction: column;
    }

    .infrastructure-prepared-grid {
        grid-template-columns: 1fr;
    }

    .infrastructure-health-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .maintenance-admin-page > .admin-grid.two {
        grid-template-columns: 1fr;
    }
}

.pvp-event-commandbar,
.pvp-event-lobby,
.pvp-event-roster,
.pvp-event-instance-status,
.pvp-event-commandbar-actions,
.pvp-event-lobby-actions {
    display: flex;
    gap: .8rem;
}

.pvp-event-commandbar {
    align-items: center;
    justify-content: space-between;
    margin: 0 auto 1rem;
    max-width: 1440px;
}

.pvp-event-commandbar > div,
.pvp-event-lobby > *,
.pvp-event-roster > *,
.pvp-event-arena-shell {
    min-width: 0;
}

.pvp-event-commandbar h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: clamp(2.6rem, 4vw, 4.5rem);
    line-height: .95;
}

.pvp-event-commandbar h1,
.pvp-event-lobby-card h2 {
    margin: .1rem 0;
}

.pvp-event-commandbar p:last-child {
    margin: .25rem 0 0;
    color: #94aabc;
}

.pvp-event-commandbar-actions {
    align-items: center;
    flex: 0 0 auto;
}

.pvp-event-timer {
    padding: .55rem .8rem;
    border: 1px solid rgba(124, 202, 229, .22);
    background: rgba(4, 12, 23, .72);
}

.pvp-event-lobby-countdown {
    display: inline-flex;
    align-items: baseline;
    gap: .65rem;
    margin: .35rem 0 .75rem;
    padding: .65rem .85rem;
    border: 1px solid rgba(94, 216, 231, .34);
    border-radius: 6px;
    background: rgba(21, 103, 126, .16);
    color: #b8dce8;
}

.pvp-event-lobby-countdown b {
    color: #f3fbff;
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

.pvp-event-lobby {
    max-width: 1440px;
    margin: 0 auto 1rem;
    align-items: stretch;
}

.pvp-event-lobby-card,
.pvp-event-roster,
.pvp-event-arena-shell {
    border: 1px solid rgba(124, 202, 229, .2);
    background: rgba(7, 16, 29, .84);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}

.pvp-event-lobby-card {
    flex: 1 1 38%;
    padding: 1rem;
}

.pvp-event-session-title {
    max-width: min(100%, 44rem);
    margin: .2rem 0 .75rem;
    font-size: clamp(1.65rem, 4vw, 3rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.pvp-event-schedule-page {
    width: min(100%, 1080px);
    margin-inline: auto;
    padding: clamp(.75rem, 2vw, 1.25rem);
}

.pvp-event-schedule-intro {
    margin-bottom: 1rem;
}

.pvp-event-schedule-intro h1 {
    margin: .15rem 0 .45rem;
    font-size: clamp(1.55rem, 4vw, 2.4rem);
}

.pvp-event-participation-notice {
    display: grid;
    gap: .2rem;
    max-width: 760px;
    margin-top: .8rem;
    padding: .7rem .85rem;
    border: 1px solid rgba(79, 216, 232, .34);
    border-radius: 12px;
    background: rgba(5, 18, 31, .62);
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.35;
}

.pvp-event-participation-notice strong {
    color: var(--cyan);
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pvp-event-week-schedule,
.pvp-event-schedule-day,
.pvp-event-schedule-occurrences {
    display: grid;
    gap: .75rem;
}

.pvp-event-schedule-day {
    padding: .85rem;
    border: 1px solid rgba(124, 202, 229, .2);
    border-radius: 10px;
    background: rgba(7, 16, 29, .84);
}

.pvp-event-schedule-day > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.pvp-event-schedule-day > header h2 {
    margin: 0;
    font-size: 1rem;
}

.pvp-event-schedule-day > header span,
.pvp-event-schedule-time span {
    color: var(--muted);
    font-size: .72rem;
}

.pvp-event-schedule-occurrence {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: stretch;
    gap: .7rem;
    padding: .55rem;
    border: 1px solid rgba(124, 202, 229, .12);
    border-radius: 8px;
    background: rgba(4, 13, 24, .48);
}

.pvp-event-schedule-occurrence.is-focused {
    border-color: rgba(82, 214, 232, .72);
    box-shadow: 0 0 22px rgba(54, 190, 215, .14);
}

.pvp-event-schedule-time {
    display: grid;
    place-content: center;
    text-align: center;
}

.pvp-event-schedule-time strong {
    color: #dffaff;
    font-size: 1.2rem;
}

.pvp-event-schedule-formats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.pvp-event-schedule-formats .button {
    display: grid;
    gap: .1rem;
    min-height: 48px;
}

.pvp-event-schedule-formats .button small {
    font-size: .65rem;
    font-weight: 400;
    opacity: .76;
}

.pvp-event-schedule-actions {
    display: flex;
    gap: .65rem;
    margin-top: 1rem;
}

@media (max-width: 760px) {
    .pvp-event-weekly-admin-list .pvp-event-admin-schedule,
    .pvp-event-schedule-occurrence {
        grid-template-columns: 1fr;
    }

    .pvp-event-schedule-formats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pvp-event-schedule-time {
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        gap: .25rem;
        text-align: left;
    }

    .pvp-event-schedule-day > header {
        align-items: flex-start;
        flex-direction: column;
        gap: .2rem;
    }
}

.pvp-event-lobby-card > p:not(.eyebrow) {
    color: #9dafbd;
}

.pvp-event-admin-form {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(12rem, auto) auto;
    align-items: end;
    gap: .75rem;
    margin-top: 1rem;
}

.pvp-event-admin-form label:not(.toggle-row) {
    display: grid;
    gap: .3rem;
}

.pvp-event-roster {
    flex: 1 1 62%;
    padding: .65rem;
}

.pvp-event-team {
    flex: 1;
    min-width: 0;
    padding: .65rem;
    border: 1px solid rgba(255, 255, 255, .06);
}

.pvp-event-team.is-cyan {
    background: linear-gradient(145deg, rgba(39, 204, 220, .09), transparent 70%);
}

.pvp-event-team.is-amber {
    background: linear-gradient(215deg, rgba(222, 148, 52, .09), transparent 70%);
}

.pvp-event-team h3 {
    display: flex;
    justify-content: space-between;
    margin: 0 0 .5rem;
    font-size: .95rem;
}

.pvp-event-team ol {
    display: grid;
    gap: .3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pvp-event-team li {
    display: grid;
    grid-template-columns: 1.7rem 1fr;
    align-items: center;
    gap: .35rem;
    min-height: 1.8rem;
    padding: .2rem .45rem;
    background: rgba(255, 255, 255, .035);
    font-size: .78rem;
}

.pvp-event-team li > span {
    color: #718696;
}

.pvp-event-team li.is-empty b {
    color: #637887;
    font-weight: 500;
}

.pvp-event-slot-share {
    min-width: 0;
    padding: .22rem .3rem;
    border: 1px solid rgba(112, 208, 225, .18);
    border-radius: .35rem;
    background: rgba(35, 143, 163, .08);
    color: #9ccbd4;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.pvp-event-team.is-amber .pvp-event-slot-share {
    border-color: rgba(222, 148, 52, .2);
    background: rgba(159, 98, 30, .08);
    color: #d5b88f;
}

.pvp-event-slot-share:hover,
.pvp-event-slot-share:focus-visible {
    border-color: currentColor;
    background: rgba(72, 179, 197, .15);
}

.pvp-event-slot-share:disabled {
    cursor: wait;
    opacity: .55;
}

.pvp-event-arena-shell {
    max-width: 1440px;
    margin: 0 auto;
    overflow: hidden;
}

.pvp-event-scorebar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .75rem;
    padding: .65rem 1rem;
    background: rgba(2, 8, 16, .94);
    border-bottom: 1px solid rgba(124, 202, 229, .16);
}

.pvp-event-scorebar strong:last-child {
    text-align: right;
}

.pvp-event-scorebar .is-cyan {
    color: #64dfec;
}

.pvp-event-scorebar .is-amber {
    color: #e6a455;
}

.pvp-event-scorebar > span {
    color: #899cab;
    font-size: .76rem;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
}

.pvp-event-scorebar > span b {
    display: block;
    margin-top: .12rem;
    color: #e7f6ff;
    font-size: .9rem;
    letter-spacing: .04em;
}

.pvp-event-arena {
    position: relative;
    min-height: min(65vh, 680px);
    overflow: hidden;
}

.pvp-event-fleet-status {
    display: flex;
    gap: .45rem;
    overflow-x: auto;
    padding: .5rem .65rem;
    border-bottom: 1px solid rgba(124, 202, 229, .16);
    background: rgba(3, 10, 19, .94);
    scrollbar-width: thin;
}

.pvp-event-repair-summary,
.pvp-event-fleet-card {
    flex: 0 0 auto;
    min-width: 9.5rem;
    padding: .45rem .55rem;
    border: 1px solid rgba(124, 202, 229, .16);
    border-radius: .35rem;
    background: rgba(255, 255, 255, .035);
    color: #dcecf5;
    text-align: left;
}

.pvp-event-repair-summary > *,
.pvp-event-fleet-card > * {
    display: block;
}

.pvp-event-repair-summary span,
.pvp-event-fleet-card span,
.pvp-event-fleet-card small {
    color: #8fa5b5;
    font-size: .7rem;
}

.pvp-event-fleet-card {
    cursor: pointer;
}

.pvp-event-fleet-card:hover,
.pvp-event-fleet-card:focus-visible {
    border-color: rgba(118, 225, 238, .7);
    background: rgba(55, 177, 198, .1);
}

.pvp-event-fleet-card.is-traveling {
    border-color: rgba(109, 179, 237, .38);
}

.pvp-event-fleet-card.is-holding {
    border-color: rgba(103, 221, 194, .38);
}

.pvp-event-arena canvas {
    display: block;
    width: 100%;
    height: min(65vh, 680px);
    touch-action: none;
}

.pvp-event-lobby-start-countdown {
    position: absolute;
    z-index: 12;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(63, 177, 205, .28), rgba(2, 8, 16, .46) 45%, rgba(2, 7, 14, .66) 100%);
    color: #f2fbff;
    pointer-events: none;
    isolation: isolate;
}

.pvp-event-lobby-start-countdown[hidden] {
    display: none;
}

.pvp-event-lobby-start-countdown strong {
    position: relative;
    z-index: 0;
    display: grid;
    place-items: center;
    isolation: isolate;
    color: #f2fbff;
    font: 950 clamp(8rem, 38vmin, 20rem)/.9 system-ui, sans-serif;
    text-shadow: 0 0 18px rgba(112, 224, 242, .78), 0 0 56px rgba(112, 224, 242, .44), 0 5px 0 rgba(2, 8, 16, .9);
}

.pvp-event-lobby-start-countdown strong::before,
.pvp-event-lobby-start-countdown strong::after {
    content: "";
    position: absolute;
    z-index: -1;
    box-sizing: border-box;
    top: 50%;
    left: 50%;
    width: min(48vmin, 360px);
    aspect-ratio: 1;
    border: clamp(3px, .7vmin, 7px) solid rgba(89, 225, 242, .86);
    border-radius: 50%;
    box-shadow: 0 0 36px rgba(80, 213, 235, .34), inset 0 0 32px rgba(80, 213, 235, .16);
    transform: translate(-50%, -50%);
}

.pvp-event-lobby-start-countdown strong::after {
    width: min(62vmin, 470px);
    border-color: rgba(238, 170, 82, .58);
    box-shadow: 0 0 48px rgba(238, 170, 82, .2);
}

.pvp-event-lobby-start-countdown span {
    margin-bottom: clamp(-.25rem, -1vh, -.75rem);
    color: rgba(231, 244, 251, .9);
    font: 900 clamp(.8rem, 2.8vw, 1.35rem)/1 system-ui, sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.pvp-event-lobby-start-countdown[data-countdown-value="1"] strong {
    color: #fff0df;
    text-shadow: 0 0 20px rgba(255, 120, 72, .9), 0 0 64px rgba(255, 120, 72, .5), 0 5px 0 rgba(2, 8, 16, .9);
}

.pvp-event-lobby-start-countdown.is-ticking {
    animation: pvp-event-lobby-start-backdrop-pulse 1s ease-in-out both;
}

.pvp-event-lobby-start-countdown.is-ticking strong {
    animation: pvp-event-lobby-start-number-pulse 1s cubic-bezier(.18, .76, .2, 1) both;
}

.pvp-event-lobby-start-countdown.is-ticking strong::before {
    animation: pvp-event-lobby-start-ring-pulse 1s ease-out both;
}

.pvp-event-lobby-start-countdown.is-ticking strong::after {
    animation: pvp-event-lobby-start-ring-pulse 1s .08s ease-out both;
}

@keyframes pvp-event-lobby-start-number-pulse {
    0% { opacity: .2; transform: scale(.58); }
    24% { opacity: 1; transform: scale(1.08); }
    62% { opacity: 1; transform: scale(1); }
    100% { opacity: .86; transform: scale(.96); }
}

@keyframes pvp-event-lobby-start-ring-pulse {
    0% { opacity: .2; transform: translate(-50%, -50%) scale(.7); }
    38% { opacity: 1; }
    100% { opacity: .36; transform: translate(-50%, -50%) scale(1.16); }
}

@keyframes pvp-event-lobby-start-backdrop-pulse {
    0% { opacity: .82; }
    32% { opacity: 1; }
    100% { opacity: .94; }
}

@media (prefers-reduced-motion: reduce) {
    .pvp-event-lobby-start-countdown.is-ticking,
    .pvp-event-lobby-start-countdown.is-ticking strong,
    .pvp-event-lobby-start-countdown.is-ticking strong::before,
    .pvp-event-lobby-start-countdown.is-ticking strong::after {
        animation: none;
    }
}

.pvp-event-camera-controls {
    position: absolute;
    top: .65rem;
    left: .65rem;
    z-index: 2;
    display: flex;
    gap: .25rem;
}

.pvp-event-camera-controls button {
    min-width: 2.35rem;
    min-height: 2.35rem;
    padding: .35rem;
    border: 1px solid rgba(151, 215, 235, .3);
    border-radius: 50%;
    background: rgba(3, 10, 20, .86);
    color: #e7f6ff;
    font: 700 .9rem/1 system-ui, sans-serif;
}

.pvp-event-camera-controls [data-pvp-zoom-reset] {
    width: auto;
    min-width: 3.5rem;
    border-radius: 999px;
    font-size: .68rem;
}

.pvp-event-combat-sound-toggle {
    position: absolute;
    top: .65rem;
    right: .65rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.35rem;
    padding: .4rem .65rem;
    border: 1px solid rgba(151, 215, 235, .3);
    border-radius: 999px;
    background: rgba(3, 10, 20, .86);
    color: #dff6ff;
    font: 700 .68rem/1 system-ui, sans-serif;
}

.pvp-event-combat-sound-toggle > span {
    position: relative;
    display: inline-block;
    width: .95rem;
    height: .9rem;
    color: #75d9f2;
}

.pvp-event-combat-sound-toggle > span::before {
    content: "";
    position: absolute;
    inset: .2rem .42rem .2rem 0;
    background: currentColor;
    clip-path: polygon(0 32%, 32% 32%, 100% 0, 100% 100%, 32% 68%, 0 68%);
}

.pvp-event-combat-sound-toggle > span::after {
    content: "";
    position: absolute;
    right: 0;
    top: .1rem;
    width: .45rem;
    height: .62rem;
    border-right: 2px solid currentColor;
    border-radius: 50%;
}

.pvp-event-combat-sound-toggle.is-muted {
    color: #91a0ad;
    border-color: rgba(181, 194, 205, .2);
}

.pvp-event-combat-sound-toggle.is-muted > span {
    color: #e17878;
}

.pvp-event-combat-sound-toggle.is-muted > span::after {
    right: -.05rem;
    top: .4rem;
    width: 1rem;
    height: 2px;
    border: 0;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(-45deg);
}

.pvp-event-map-legend {
    position: absolute;
    left: .75rem;
    bottom: .75rem;
    display: grid;
    gap: .25rem;
    padding: .45rem .6rem;
    border: 1px solid rgba(145, 196, 218, .17);
    background: rgba(2, 8, 16, .72);
    backdrop-filter: blur(8px);
    font-size: .68rem;
    color: #a8bac8;
    pointer-events: none;
}

.pvp-event-map-legend i {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    margin-right: .3rem;
    border: 1px solid #8ddce8;
}

.pvp-event-map-legend .is-relay {
    transform: rotate(45deg);
}

.pvp-event-map-legend .is-resource {
    border-radius: 50%;
    border-color: #ac8cdb;
    background: radial-gradient(circle at 35% 35%, #d7c4ef 0 18%, #6e598f 20% 52%, #241d38 55% 100%);
    box-shadow: 0 0 7px rgba(167, 130, 218, .52);
}

.pvp-event-arena-lock[hidden] {
    display: none;
}

.pvp-event-objective-actions {
    position: absolute;
    z-index: 5;
    width: 0;
    height: 0;
    pointer-events: auto;
}

.pvp-event-objective-actions[hidden],
.pvp-event-objective-info[hidden],
.pvp-event-objective-actions.is-offscreen,
.pvp-event-objective-info.is-offscreen {
    display: none !important;
}

.pvp-event-objective-action {
    position: absolute;
    left: var(--objective-action-x, 0);
    top: var(--objective-action-y, -58px);
    transform: translate(-50%, -50%);
}

.pvp-event-objective-info {
    position: absolute;
    z-index: 6;
    max-height: min(60vh, 330px);
    overflow: auto;
    padding: .8rem;
    border: 1px solid rgba(151, 215, 235, .4);
    border-radius: .45rem;
    background: rgba(3, 10, 20, .96);
    box-shadow: 0 16px 46px rgba(0, 0, 0, .52);
}

.pvp-event-objective-info > button:first-child {
    position: absolute;
    top: .35rem;
    right: .45rem;
    border: 0;
    background: transparent;
    color: #dcecf5;
    font-size: 1.35rem;
    cursor: pointer;
}

.pvp-event-objective-info h2 {
    margin: .15rem 1.5rem .3rem 0;
    font-size: 1.05rem;
}

.pvp-event-objective-info > p:not(.eyebrow) {
    margin: .25rem 0 .65rem;
    color: #9fb4c2;
    font-size: .78rem;
}

.pvp-event-refit-panel {
    position: absolute;
    z-index: 9;
    top: 50%;
    left: 50%;
    width: min(680px, calc(100% - 2rem));
    max-height: calc(100% - 2rem);
    overflow: auto;
    border: 1px solid rgba(190, 151, 239, .64);
    border-radius: .65rem;
    background: linear-gradient(145deg, rgba(10, 18, 34, .985), rgba(4, 10, 20, .985));
    box-shadow: 0 22px 70px rgba(0, 0, 0, .72), inset 0 0 34px rgba(132, 85, 198, .09);
    color: #e9f3fa;
    transform: translate(-50%, -50%);
}

.pvp-event-refit-panel[hidden] {
    display: none;
}

.pvp-event-refit-panel > header {
    position: sticky;
    z-index: 1;
    top: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem .75rem;
    border-bottom: 1px solid rgba(190, 151, 239, .25);
    background: rgba(7, 13, 26, .96);
}

.pvp-event-refit-panel h2,
.pvp-event-refit-panel p {
    margin: 0;
}

.pvp-event-refit-panel header span {
    color: #aebfce;
    font-size: .78rem;
}

.pvp-event-refit-panel [data-pvp-refit-close] {
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: 1px solid rgba(219, 237, 248, .55);
    border-radius: 50%;
    background: rgba(255, 255, 255, .045);
    color: #f1f8fc;
    font-size: 1.4rem;
    cursor: pointer;
}

.pvp-event-refit-panel form {
    display: grid;
    gap: .75rem;
    padding: 1rem;
}

.pvp-event-refit-panel form > p {
    color: #9eb2c1;
    font-size: .78rem;
}

.pvp-event-refit-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
}

.pvp-event-refit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.25rem;
    align-items: center;
    gap: .65rem;
    padding: .55rem .65rem;
    border: 1px solid rgba(148, 198, 221, .16);
    border-radius: .35rem;
    background: rgba(255, 255, 255, .035);
}

.pvp-event-refit-row span,
.pvp-event-refit-row strong,
.pvp-event-refit-row small {
    display: block;
    min-width: 0;
}

.pvp-event-refit-row strong {
    overflow: hidden;
    color: #e6f2f9;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pvp-event-refit-row small {
    color: #8fa7b7;
    font-size: .67rem;
}

.pvp-event-refit-row input {
    width: 100%;
    min-width: 0;
    padding: .42rem .35rem;
    border: 1px solid rgba(156, 209, 229, .34);
    border-radius: .3rem;
    background: rgba(1, 7, 14, .82);
    color: #f2f9fc;
    text-align: right;
}

.pvp-event-refit-summary {
    color: #bad0dd;
    font-size: .78rem;
}

.pvp-event-refit-summary.is-invalid {
    color: #ff9f9f;
}

.pvp-event-occupancy {
    display: grid;
    width: 100%;
    gap: .3rem;
    margin-bottom: .35rem;
}

.pvp-event-occupant {
    padding: .38rem .5rem;
    border: 1px solid rgba(151, 215, 235, .18);
    background: rgba(255, 255, 255, .035);
    color: #dcecf5;
    font: 600 .72rem/1.3 system-ui, sans-serif;
    text-align: left;
}

.pvp-event-occupant.is-cyan {
    border-left: 3px solid #54e1ed;
}

.pvp-event-occupant.is-amber {
    border-left: 3px solid #e9a34c;
}

.pvp-event-occupant.is-targeted {
    border-color: rgba(255, 116, 116, .82);
    background: rgba(255, 116, 116, .12);
    box-shadow: inset 0 0 14px rgba(255, 116, 116, .1);
}

.pvp-event-arena-lock {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: .35rem;
    text-align: center;
    background: rgba(3, 9, 17, .52);
    backdrop-filter: blur(2px);
    pointer-events: none;
}

.pvp-event-arena-lock span {
    color: #9fb0bd;
}

.pvp-event-instance-status {
    flex-wrap: wrap;
    justify-content: space-between;
    padding: .55rem .8rem;
    border-top: 1px solid rgba(124, 202, 229, .16);
    background: rgba(2, 8, 16, .94);
    color: #8fa5b5;
    font-size: .73rem;
}

.pvp-event-instance-status b {
    color: #dcecf5;
}

.instance-transfer-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    opacity: 0;
    background: #020711;
    transition: opacity .28s ease;
}

.instance-transfer-screen.is-visible {
    opacity: 1;
}

.instance-transfer-backdrop {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    transform: scale(1.015);
}

.instance-transfer-copy {
    position: absolute;
    left: 50%;
    bottom: max(8vh, 3rem);
    width: min(36rem, calc(100% - 2rem));
    padding: 1rem 1.2rem;
    transform: translateX(-50%);
    border: 1px solid rgba(130, 210, 235, .3);
    background: rgba(2, 8, 18, .78);
    backdrop-filter: blur(12px);
    text-align: center;
    color: #edf8ff;
}

.instance-transfer-copy h2 {
    margin: .15rem 0;
}

.instance-transfer-copy > p:not(.eyebrow) {
    margin: .25rem 0 .75rem;
    color: #adbfcb;
}

.instance-transfer-progress {
    display: block;
    height: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, .12);
}

.instance-transfer-progress i {
    display: block;
    width: 42%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #69e5ef, transparent);
    animation: instance-transfer-progress 1.1s linear infinite;
}

@keyframes instance-transfer-progress {
    from { transform: translateX(-110%); }
    to { transform: translateX(340%); }
}

@media (max-width: 900px) {
    body.page-pvp-event {
        overflow: hidden;
        background: #050b14;
    }

    .pvp-event-result-stage {
        place-items: stretch;
        padding: max(8px, env(safe-area-inset-top, 0px)) max(7px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(7px, env(safe-area-inset-left, 0px));
    }

    .pvp-event-result-stage::before {
        background-image: var(--pvp-result-image-mobile);
    }

    .pvp-event-result-panel {
        align-self: center;
        gap: clamp(.55rem, 1.7vh, .9rem);
        max-height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)));
        padding: clamp(.75rem, 3.5vw, 1.05rem);
        overflow: auto;
        border-radius: 14px;
        background: rgba(2, 9, 19, .7);
    }

    .pvp-event-result-panel header h1 {
        font-size: clamp(1.35rem, 7vw, 2rem);
    }

    .pvp-event-session-title {
        font-size: clamp(1.35rem, 7vw, 2rem);
    }

    .pvp-event-result-panel header > p:last-child,
    .pvp-event-result-panel footer p {
        font-size: .72rem;
    }

    .pvp-event-result-score {
        gap: .35rem;
    }

    .pvp-event-result-score > div {
        padding: .5rem .4rem;
    }

    .pvp-event-result-score span {
        font-size: .58rem;
    }

    .pvp-event-result-score strong {
        font-size: clamp(1.55rem, 10vw, 2.35rem);
    }

    .pvp-event-result-objective-head,
    .pvp-event-result-objective-row {
        grid-template-columns: minmax(3.6rem, .72fr) minmax(6.6rem, 1.35fr) minmax(3.6rem, .72fr);
        gap: .28rem;
    }

    .pvp-event-result-objective-head {
        padding-inline: .4rem;
        font-size: .54rem;
        letter-spacing: .055em;
    }

    .pvp-event-result-objective-row {
        min-height: 42px;
        padding: .42rem .4rem;
        font-size: .76rem;
    }

    .pvp-event-result-panel footer .button {
        width: 100%;
        min-height: 44px;
    }

    .reward-reveal.is-pvp-event-result {
        padding: max(14px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
        background-image:
            radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--reward-reveal-color) 25%, transparent), transparent 34%),
            linear-gradient(180deg, rgba(1, 5, 12, .42), rgba(1, 5, 12, .82)),
            var(--pvp-result-image-mobile);
    }

    .reward-reveal.is-pvp-event-result.is-winner-cyan {
        background-image:
            radial-gradient(circle at 18% 32%, rgba(76, 220, 235, .36), transparent 34%),
            radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--reward-reveal-color) 25%, transparent), transparent 34%),
            linear-gradient(180deg, rgba(1, 5, 12, .42), rgba(1, 5, 12, .82)),
            var(--pvp-result-image-mobile);
    }

    .reward-reveal.is-pvp-event-result.is-winner-amber {
        background-image:
            radial-gradient(circle at 82% 68%, rgba(235, 157, 72, .36), transparent 34%),
            radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--reward-reveal-color) 25%, transparent), transparent 34%),
            linear-gradient(180deg, rgba(1, 5, 12, .42), rgba(1, 5, 12, .82)),
            var(--pvp-result-image-mobile);
    }

    body.page-pvp-event .page-shell {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        padding: 0 !important;
        overflow: hidden;
    }

    .active-pvp-match-shortcut {
        position: fixed;
        right: max(8px, env(safe-area-inset-right, 0px));
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        z-index: 448;
        display: grid;
        width: 56px;
        height: 56px;
        grid-template-rows: 30px auto;
        place-items: center;
        padding: 5px 3px;
        border: 1px solid rgba(91, 215, 255, .54);
        border-radius: 50%;
        color: #c9f5ff;
        background: rgba(4, 14, 25, .9);
        box-shadow: 0 9px 28px rgba(0, 0, 0, .46), 0 0 17px rgba(59, 205, 231, .2);
        font-size: .58rem;
        font-weight: 900;
        line-height: 1;
        text-align: center;
        backdrop-filter: blur(12px);
    }

    .active-pvp-match-shortcut .app-nav-icon {
        width: 27px;
        height: 27px;
        background-color: #63def3;
        background-image: none;
    }

    .active-pvp-match-shortcut.is-map {
        bottom: calc(153px + env(safe-area-inset-bottom, 0px));
    }

    body.mobile-hub-open .active-pvp-match-shortcut,
    body.world-tools-open .active-pvp-match-shortcut {
        visibility: hidden;
        pointer-events: none;
    }

    body.page-pvp-event .app-topbar,
    body.page-pvp-event .app-nav-rail,
    body.page-pvp-event .mobile-hubbar,
    body.page-pvp-event .mobile-hub-sheet,
    body.page-pvp-event .global-status-stack,
    body.page-pvp-event .global-chat-widget,
    body.page-pvp-event .global-inventory-widget {
        display: none !important;
    }

    .pvp-event-page {
        position: relative;
        display: flex;
        width: 100vw;
        max-width: none;
        height: 100dvh;
        min-height: 100dvh;
        padding: 0 0 calc(66px + env(safe-area-inset-bottom, 0px));
        overflow: hidden;
    }

    .pvp-event-schedule-page {
        display: block;
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        padding: max(14px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
        overflow-x: hidden;
        overflow-y: auto;
    }

    .pvp-event-commandbar {
        position: absolute;
        top: max(6px, env(safe-area-inset-top, 0px));
        right: 7px;
        left: 7px;
        z-index: 20;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: .45rem;
        margin: 0;
        padding: .42rem .55rem;
        border: 1px solid rgba(111, 209, 235, .28);
        border-radius: 13px;
        background: rgba(3, 11, 21, .76);
        box-shadow: 0 10px 28px rgba(0, 0, 0, .34);
        backdrop-filter: blur(10px);
    }

    .pvp-event-commandbar h1 {
        overflow: hidden;
        font-size: .88rem;
        line-height: 1.15;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pvp-event-commandbar .eyebrow,
    .pvp-event-commandbar p:last-child,
    .pvp-event-commandbar-actions > a {
        display: none;
    }

    .pvp-event-commandbar-actions {
        display: block;
    }

    .pvp-event-timer {
        display: grid;
        gap: .05rem;
        padding: .28rem .45rem;
        font-size: .61rem;
        line-height: 1.1;
        text-align: center;
    }

    .pvp-event-timer b {
        font-size: .78rem;
        font-variant-numeric: tabular-nums;
    }

    .pvp-event-page > .pvp-event-lobby-card,
    .pvp-event-page > .pvp-event-result-summary,
    .pvp-event-lobby {
        position: absolute;
        top: calc(max(6px, env(safe-area-inset-top, 0px)) + 58px);
        right: 7px;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        left: 7px;
        z-index: 8;
        margin: 0;
        overflow: auto;
    }

    .pvp-event-lobby {
        align-items: stretch;
        flex-direction: column;
    }

    .pvp-event-page:not([data-pvp-mobile-view="team"]) .pvp-event-lobby {
        display: none;
    }

    .pvp-event-page[data-pvp-mobile-view="team"] .pvp-event-arena-shell {
        display: none;
    }

    .pvp-event-arena-shell {
        position: absolute;
        inset: 0 0 calc(66px + env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: none;
        height: auto;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: rgba(3, 9, 17, .46);
    }

    .pvp-event-scorebar {
        flex: 0 0 auto;
        min-height: calc(max(6px, env(safe-area-inset-top, 0px)) + 58px);
        padding: calc(max(6px, env(safe-area-inset-top, 0px)) + 51px) .55rem .32rem;
        gap: .35rem;
        background: rgba(2, 8, 16, .82);
    }

    .pvp-event-scorebar > span {
        font-size: .58rem;
        letter-spacing: .04em;
    }

    .pvp-event-scorebar > strong {
        font-size: .78rem;
    }

    .pvp-event-fleet-status {
        flex: 0 0 auto;
        min-height: 3.7rem;
    }

    .pvp-event-arena {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }

    .pvp-event-arena canvas {
        min-height: 0;
        height: 100%;
    }

    .pvp-event-page[data-pvp-mobile-view="fleet"] .pvp-event-arena,
    .pvp-event-page[data-pvp-mobile-view="fleet"] .pvp-event-instance-status,
    .pvp-event-page[data-pvp-mobile-view="info"] .pvp-event-arena,
    .pvp-event-page[data-pvp-mobile-view="info"] .pvp-event-fleet-status,
    .pvp-event-page[data-pvp-mobile-view="arena"] .pvp-event-instance-status {
        display: none;
    }

    .pvp-event-page[data-pvp-mobile-view="fleet"] .pvp-event-fleet-status {
        display: grid;
        grid-template-columns: 1fr;
        align-content: start;
        flex: 1 1 auto;
        padding: .65rem;
        overflow: auto;
    }

    .pvp-event-page[data-pvp-mobile-view="fleet"] .pvp-event-repair-summary,
    .pvp-event-page[data-pvp-mobile-view="fleet"] .pvp-event-fleet-card {
        width: 100%;
    }

    .pvp-event-page[data-pvp-mobile-view="info"] .pvp-event-instance-status {
        display: grid;
        grid-template-columns: 1fr;
        align-content: start;
        flex: 1 1 auto;
        gap: .7rem;
        padding: 1rem;
        overflow: auto;
        border-top: 0;
        font-size: .82rem;
    }

    .pvp-event-mobile-nav {
        position: fixed;
        right: max(7px, env(safe-area-inset-right, 0px));
        bottom: max(7px, env(safe-area-inset-bottom, 0px));
        left: max(7px, env(safe-area-inset-left, 0px));
        z-index: 470;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 3px;
        min-height: 58px;
        padding: 5px;
        border: 1px solid rgba(91, 215, 255, .22);
        border-radius: 20px;
        background: rgba(4, 12, 21, .9);
        box-shadow: 0 16px 42px rgba(0, 0, 0, .5);
        backdrop-filter: blur(15px);
    }

    .pvp-event-mobile-nav button,
    .pvp-event-mobile-nav a {
        display: grid;
        grid-template-rows: 31px auto;
        place-items: center;
        min-width: 0;
        padding: .2rem .1rem;
        border: 0;
        border-radius: 14px;
        background: transparent;
        color: #8fa5b5;
        font-size: .62rem;
        line-height: 1;
        cursor: pointer;
    }

    .pvp-event-mobile-nav button[aria-pressed="true"],
    .pvp-event-mobile-nav button:focus-visible,
    .pvp-event-mobile-nav a:focus-visible {
        background: rgba(80, 205, 225, .13);
        color: #e8f8ff;
        outline: 1px solid rgba(105, 222, 239, .45);
    }

    .pvp-event-mobile-nav button:disabled {
        opacity: .35;
        cursor: default;
    }

    .pvp-event-mobile-nav .app-nav-icon {
        width: 24px;
        height: 24px;
        background-color: #5bd7ff;
        background-image: none;
        filter: drop-shadow(0 0 5px rgba(79, 212, 232, .28));
    }

    .pvp-event-mobile-nav button[aria-pressed="true"] .app-nav-icon,
    .pvp-event-mobile-nav button:focus-visible .app-nav-icon,
    .pvp-event-mobile-nav a:focus-visible .app-nav-icon {
        background-color: #a9efff;
        filter: drop-shadow(0 0 7px rgba(91, 215, 255, .55));
    }

    .pvp-event-admin-form {
        grid-template-columns: 1fr;
    }

    .pvp-event-roster {
        gap: .35rem;
    }

    .pvp-event-team {
        padding: .4rem;
    }

    .pvp-event-team li {
        grid-template-columns: 1.25rem 1fr;
        padding-inline: .25rem;
        font-size: .66rem;
    }

    .pvp-event-map-legend {
        display: none;
    }

    .pvp-event-refit-panel {
        width: calc(100% - .7rem);
        max-height: calc(100% - .7rem);
        border-radius: .45rem;
    }

    .pvp-event-refit-panel > header,
    .pvp-event-refit-panel form {
        padding: .7rem;
    }

    .pvp-event-refit-list {
        grid-template-columns: 1fr;
    }

    .pvp-event-camera-controls {
        top: .45rem;
        left: .45rem;
    }

    .pvp-event-combat-sound-toggle {
        top: .45rem;
        right: .45rem;
        width: 2.35rem;
        padding: .35rem;
        justify-content: center;
    }

    .pvp-event-combat-sound-toggle b {
        display: none;
    }
}

/* PvP-Instanz als kartenorientierte Hauptansicht */
body.is-pvp-event-map {
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: #02080e;
}

body.is-pvp-event-map .page-shell {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    min-height: 100dvh;
    padding: 0 !important;
    overflow: hidden;
}

body.is-pvp-event-map .app-topbar,
body.is-pvp-event-map .app-nav-rail,
body.is-pvp-event-map .mobile-hubbar,
body.is-pvp-event-map .mobile-hub-sheet,
body.is-pvp-event-map .global-status-stack,
body.is-pvp-event-map .global-chat-widget,
body.is-pvp-event-map .global-inventory-widget,
body.is-pvp-event-map .command-alert-hud,
body.is-pvp-event-map .jump-page-flash,
body.is-pvp-event-map .global-feedback-button {
    display: none !important;
}

body.is-pvp-event-map .pvp-event-page {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100dvh;
    min-height: 100dvh;
    padding: 0;
    overflow: hidden;
    background: #02080e;
}

body.is-pvp-event-map .pvp-event-arena-shell,
body.is-pvp-event-map .pvp-event-page[data-pvp-mobile-view="team"] .pvp-event-arena-shell {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block !important;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #02080e;
}

body.is-pvp-event-map .pvp-event-arena {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
}

body.is-pvp-event-map .pvp-event-arena canvas {
    width: 100%;
    height: 100%;
    min-height: 0;
}

body.is-pvp-event-map .pvp-event-scorebar {
    position: fixed;
    top: max(7px, env(safe-area-inset-top, 0px));
    left: 50%;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    width: min(430px, calc(100vw - 132px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    min-height: 48px;
    gap: .35rem;
    padding: .35rem .55rem;
    transform: translateX(-50%);
    border: 1px solid rgba(111, 209, 235, .25);
    border-radius: 14px;
    background: rgba(3, 11, 21, .7);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .34);
    backdrop-filter: blur(10px);
    pointer-events: none;
}

body.is-pvp-event-map .pvp-event-scorebar > strong {
    display: grid;
    align-content: center;
    min-width: 0;
    font-size: .77rem;
    line-height: 1.05;
    text-align: left;
}

body.is-pvp-event-map .pvp-event-scorebar > strong:last-child {
    text-align: right;
}

body.is-pvp-event-map .pvp-event-scorebar > strong span,
body.is-pvp-event-map .pvp-event-scorebar > span small {
    color: #91a5b4;
    font-size: .57rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.is-pvp-event-map .pvp-event-scorebar > strong b {
    overflow: hidden;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.is-pvp-event-map .pvp-event-scorebar > strong small {
    display: none;
}

body.is-pvp-event-map .pvp-event-scorebar > span {
    display: grid;
    align-content: center;
    min-width: 4.25rem;
    color: #91a5b4;
    font-size: .58rem;
    line-height: 1.05;
    letter-spacing: .04em;
    text-align: center;
}

body.is-pvp-event-map .pvp-event-scorebar > span b {
    display: block;
    margin: .12rem 0 0;
    color: #eefaff;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}

body.is-pvp-event-map .pvp-event-lobby,
body.is-pvp-event-map .pvp-event-fleet-status,
body.is-pvp-event-map .pvp-event-instance-status {
    position: fixed;
    top: max(68px, calc(61px + env(safe-area-inset-top, 0px)));
    left: max(66px, calc(58px + env(safe-area-inset-left, 0px)));
    z-index: 24;
    width: min(760px, calc(100vw - 82px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    max-height: calc(100dvh - 84px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    margin: 0;
    overflow: auto;
    border: 1px solid rgba(111, 209, 235, .28);
    border-radius: 16px;
    background: rgba(3, 11, 21, .88);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .52);
    backdrop-filter: blur(14px);
}

body.is-pvp-event-map .pvp-event-lobby {
    right: auto;
    bottom: auto;
    display: none;
    align-items: stretch;
}

body.is-pvp-event-map .pvp-event-page[data-pvp-mobile-view="team"] .pvp-event-lobby {
    display: flex;
}

body.is-pvp-event-map .pvp-event-lobby-card,
body.is-pvp-event-map .pvp-event-roster {
    border: 0;
    background: transparent;
}

body.is-pvp-event-map .pvp-event-lobby-card {
    flex: 0 0 min(18rem, 38%);
    padding: .7rem .8rem;
}

body.is-pvp-event-map .pvp-event-lobby-card > .eyebrow {
    display: none;
}

body.is-pvp-event-map .pvp-event-lobby-card h2 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.15;
}

body.is-pvp-event-map .pvp-event-lobby-card > p {
    margin: .3rem 0 0;
    color: #9fb2c0;
    font-size: .76rem;
    line-height: 1.3;
}

body.is-pvp-event-map .pvp-event-lobby-actions:empty {
    display: none;
}

body.is-pvp-event-map .pvp-event-fleet-status,
body.is-pvp-event-map .pvp-event-instance-status {
    display: none;
    padding: .75rem;
    border-bottom: 1px solid rgba(111, 209, 235, .28);
}

body.is-pvp-event-map .pvp-event-page[data-pvp-mobile-view="fleet"] .pvp-event-fleet-status {
    display: flex;
    flex-wrap: wrap;
}

body.is-pvp-event-map .pvp-event-page[data-pvp-mobile-view="info"] .pvp-event-instance-status {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    font-size: .78rem;
}

body.is-pvp-event-map .pvp-event-instance-status .pvp-event-map-legend {
    position: static;
    grid-column: 1 / -1;
    padding: .65rem 0 0;
    border: 0;
    border-top: 1px solid rgba(111, 209, 235, .16);
    background: transparent;
    backdrop-filter: none;
    pointer-events: auto;
}

body.is-pvp-event-map .pvp-event-map-nav {
    position: fixed;
    top: max(70px, calc(63px + env(safe-area-inset-top, 0px)));
    left: max(7px, env(safe-area-inset-left, 0px));
    right: auto;
    bottom: auto;
    z-index: 40;
    display: grid;
    grid-template-columns: 1fr;
    width: auto;
    gap: 9px;
    min-height: 0;
    padding: 0;
    transform: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

body.is-pvp-event-map .pvp-event-map-nav button,
body.is-pvp-event-map .pvp-event-map-nav a {
    position: relative;
    display: grid;
    width: 50px;
    height: 50px;
    min-width: 50px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(135, 216, 236, .28);
    border-radius: 999px;
    color: #caeef7;
    background:
        radial-gradient(circle at 34% 25%, rgba(255, 255, 255, .12), transparent 35%),
        rgba(5, 17, 27, .8);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .4), inset 0 0 0 3px rgba(90, 200, 226, .035);
    text-decoration: none;
    backdrop-filter: blur(9px);
    cursor: pointer;
    touch-action: manipulation;
}

body.is-pvp-event-map .pvp-event-map-nav button[aria-pressed="true"],
body.is-pvp-event-map .pvp-event-map-nav button:focus-visible,
body.is-pvp-event-map .pvp-event-map-nav a:focus-visible {
    border-color: rgba(128, 226, 249, .86);
    color: #effcff;
    outline: none;
    background: rgba(22, 73, 89, .9);
    box-shadow: 0 0 0 3px rgba(76, 196, 226, .2), 0 8px 24px rgba(0, 0, 0, .4);
}

body.is-pvp-event-map .pvp-event-map-nav .app-nav-icon {
    width: 24px;
    height: 24px;
    background-color: #5bd7ff;
    background-image: none;
}

body.is-pvp-event-map .pvp-event-map-nav b {
    position: absolute;
    top: calc(100% + 1px);
    left: 50%;
    max-width: 58px;
    overflow: hidden;
    transform: translateX(-50%);
    color: #b9dbe5;
    font-size: .54rem;
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px #000;
    white-space: nowrap;
}

body.is-pvp-event-map .pvp-event-map-nav > a:last-child {
    position: fixed;
    right: max(7px, env(safe-area-inset-right, 0px));
    bottom: max(12px, calc(7px + env(safe-area-inset-bottom, 0px)));
    left: auto;
}

body.is-pvp-event-map .pvp-event-camera-controls {
    top: max(7px, env(safe-area-inset-top, 0px));
    left: max(66px, calc(58px + env(safe-area-inset-left, 0px)));
}

body.is-pvp-event-map .pvp-event-combat-sound-toggle {
    top: max(7px, env(safe-area-inset-top, 0px));
    right: max(7px, env(safe-area-inset-right, 0px));
}

@media (max-width: 900px) {
    body.is-pvp-event-map .pvp-event-map-nav {
        top: max(218px, calc(211px + env(safe-area-inset-top, 0px)));
    }

    body.is-pvp-event-map .pvp-event-lobby,
    body.is-pvp-event-map .pvp-event-fleet-status,
    body.is-pvp-event-map .pvp-event-instance-status {
        right: max(7px, env(safe-area-inset-right, 0px));
        left: max(62px, calc(55px + env(safe-area-inset-left, 0px)));
        width: auto;
        max-height: calc(100dvh - 82px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }

    body.is-pvp-event-map .pvp-event-lobby {
        flex-direction: column;
    }

    body.is-pvp-event-map .pvp-event-lobby-card {
        flex-basis: auto;
    }

    body.is-pvp-event-map .pvp-event-page[data-pvp-mobile-view="fleet"] .pvp-event-fleet-status,
    body.is-pvp-event-map .pvp-event-page[data-pvp-mobile-view="info"] .pvp-event-instance-status {
        display: grid;
        grid-template-columns: 1fr;
        align-content: start;
    }

    body.is-pvp-event-map .pvp-event-repair-summary,
    body.is-pvp-event-map .pvp-event-fleet-card {
        width: 100%;
    }

    body.is-pvp-event-map .pvp-event-map-nav button,
    body.is-pvp-event-map .pvp-event-map-nav a {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }

    body.is-pvp-event-map .pvp-event-camera-controls {
        top: calc(max(7px, env(safe-area-inset-top, 0px)) + 56px);
        left: max(7px, env(safe-area-inset-left, 0px));
        flex-direction: column;
    }

    body.is-pvp-event-map .pvp-event-combat-sound-toggle {
        top: calc(max(7px, env(safe-area-inset-top, 0px)) + 56px);
    }
}