/* =========================================================
   RESET
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    overflow: hidden;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        url("/game/img/bg.png")
        center center / cover no-repeat;

    color: #e7f3ff;
}

/* =========================================================
   SPLASH SCREEN
   ========================================================= */

#mainSplash {
    position: fixed;
    inset: 0;

    background:
        url("/game/img/splash-wide-nologo2.png")
        center center / cover no-repeat;

    z-index: 1;
}

.menu-container {
    position: absolute;

    top: 55%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    z-index: 5;

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

.menu-container.hide {
    opacity: 0;

    pointer-events: none;

    transform:
        translate(-50%, -50%)
        scale(0.9);
}


/* =========================================================
   MUSIC TOGGLE
   ========================================================= */

.music-toggle {

    position: fixed;

    top: 24px;
    right: 24px;

    width: 64px;
    height: 64px;

    border: none;

    background-color: transparent;

    background-image:
        url("/game/img/ui/game-menu-2.png");

    background-repeat: no-repeat;

    background-size: 320px 240px;

    background-position: -70px -16px;

    cursor: pointer;

    z-index: 9999;

    opacity: 0.92;

    transition:
        transform 0.18s ease,
        opacity 0.18s ease,
        filter 0.18s ease;
}

/* OFF sprite */
.music-toggle.off {

    background-position: -14px -16px;
}

.music-toggle:hover {

    transform: scale(1.08);

    opacity: 1;

    filter:
        drop-shadow(
            0 0 12px
            rgba(120,220,255,0.34)
        );
}


/* =========================================================
   MAIN TITLE
   ========================================================= */

/* =========================================================
   GAME TITLE
   ========================================================= */

.game-title {
    position: fixed;

    top: 10px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 200;

    width: 100%;

    text-align: center;

    pointer-events: none;
}

.game-title img {
    width: min(31.5vw, 700px);

    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(0 0 18px rgba(255,255,255,0.08))
        drop-shadow(0 0 30px rgba(0,180,255,0.08));

    opacity: 0.96;

    transition:
        width 0.45s ease,
        transform 0.45s ease,
        opacity 0.45s ease;

    animation:
        titleFloat 8s ease-in-out infinite;
}

@keyframes titleFloat {

    0%, 100% {
        transform:
            translateY(0px);
    }

    50% {
        transform:
            translateY(4px);
    }

}

/* setup screen state */
.game-title.compact{
        top: 7px;

}
.game-title.compact img {

    width: min(10vw, 900px);

    transform: scale(0.72);

    opacity: 0.92;

    transition:
        width 0.45s ease,
        transform 0.45s ease,
        opacity 0.45s ease;

}

/* =========================================================
   MENU FRAME
   ========================================================= */

.menu-frame {
    width: 260px;

    padding: 20px;

    border-radius: 14px;

    background:
        rgba(10,20,40,0.45);

    backdrop-filter: blur(10px);

    border:
        1px solid rgba(100,200,255,0.15);

    box-shadow:
        0 0 25px rgba(0,140,255,0.15);
}

.menu-table {
    width: 100%;
}

.menu-table td {
    padding: 6px 0;
}

.menu-btn {
    width: 100%;
    height: 46px;

    border: none;
    border-radius: 10px;

    background:
        rgba(255,255,255,0.06);

    border:
        1px solid rgba(255,255,255,0.08);

    color: #dfeeff;

    letter-spacing: 1px;

    cursor: pointer;

    transition: all 0.25s ease;
}

.menu-btn.inactive,
.menu-btn:disabled {

    cursor:
        not-allowed;

    opacity:
        0.5;

}


.menu-btn.inactive:hover,
.menu-btn:disabled:hover {

    background:
        rgba(255,255,255,0.06);

    border-color:
        rgba(255,255,255,0.08);

    box-shadow:
        none;

    transform:
        none;

}

.menu-btn:hover {
    background:
        rgba(90,180,255,0.12);

    border-color:
        rgba(120,220,255,0.35);

    box-shadow:
        0 0 18px rgba(0,180,255,0.22);

    transform:
        translateY(-2px);
}

/* =========================================================
   NEW GAME PANEL
   ========================================================= */

.panel {
    position: fixed;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%)
        scale(0.96);

    width: 90vw;
    height: 80vh;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;

    z-index: 100;
}

.panel.show {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform:
        translate(-50%, -50%)
        scale(1);
}

.panel-content {
    position: relative;
    top: 10px;
    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 26px;

    background:
        linear-gradient(
            180deg,
            rgba(3,8,18,0.92),
            rgba(2,5,14,0.96)
        );

    border:
        1px solid rgba(120,220,255,0.14);

    box-shadow:
        0 0 60px rgba(0,120,255,0.18),
        inset 0 0 120px rgba(0,80,160,0.08);
}

/* =========================================================
   NEW GAME SCREEN
   ========================================================= */

.new-game-screen {
    position: relative;
    top: -2px;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(0,120,255,0.08),
            transparent 50%
        );
}

.new-game-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.02),
            rgba(255,255,255,0)
        );

    pointer-events: none;
}

/* =========================================================
   MAIN GRID
   ========================================================= */

.new-game-container {

    width: 90vw;
    height: 80vh;

    display: grid;

    grid-template-columns:
        minmax(420px, 1.55fr)
        minmax(220px, 0.75fr)
        minmax(320px, 0.92fr);

    gap: 18px;

    align-items: stretch;

    margin: 0 auto;
}

/* =========================================================
   LEFT PANEL
   ========================================================= */

.species-preview-panel {
    position: relative;

    grid-column: 1;
    grid-row: 1;

    overflow: hidden;

    border-radius: 22px;

    border:
        1px solid rgba(100,220,255,0.14);

    background:
        linear-gradient(
            180deg,
            rgba(5,20,45,0.35),
            rgba(3,8,20,0.78)
        );
}

.species-portrait-container {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;

    opacity: 0.96;

    transition:
        opacity 0.25s ease;

    filter:
        drop-shadow(
            0 0 28px
            rgba(255,220,120,0.12)
        );
}

.species-header {

    position: absolute;

    left: 0;
    right: 0;

    padding:
        22px
        26px
        24px
        26px;

    z-index: 10;

    bottom: 8px;

    background: rgba(0, 0, 0, 0.5);

    border: none;

    backdrop-filter: none;
}

.species-name {
    font-size: 52px;

    font-weight: 700;

    letter-spacing: 4px;

    color: #fff0c7;
}

.species-ability {
    margin-top: 6px;

    font-size: 22px;

    color: #ffe6a3;

    font-style: italic;
}

.species-introduction {

    margin-top: 14px;

    font-size: 16px;
    line-height: 1.55;

    max-width: 90%;

    color: #d8e6ff;
}

.species-colour-preview {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    border:
        3px solid rgba(255,255,255,0.3);
}

/* =========================================================
   GALAXY PREVIEW
   ========================================================= */

.settings-panel {
    position: relative;

    grid-column: 2;
    grid-row: 1;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 24px;

    background:
        radial-gradient(
            circle at center,
            rgba(0,120,255,0.08),
            rgba(0,0,0,0)
        );

    border:
        1px solid rgba(100,220,255,0.1);
}

.galaxy-preview-image {

    width: 54%;
    max-width: 380px;

    height: auto;

    object-fit: contain;

    opacity: 0.98;

    filter:
        drop-shadow(
            0 0 40px
            rgba(0,180,255,0.14)
        );

    animation:
        colonyFloat 8s ease-in-out infinite;
}

.prime-colony-name {

    margin-top: -5px;

    font-size: 28px;

    font-weight: 600;

    letter-spacing: 4px;

    text-transform: uppercase;

    color: #dcecff;

    text-shadow:
        0 0 12px rgba(0,180,255,0.18);
}

.prime-colony-info {

    margin-top: 18px;

    text-align: center;
}

.prime-colony-meaning {

    margin-top: 8px;

    font-size: 15px;

    font-style: italic;

    letter-spacing: 1px;

    color: #8fdcff;

    opacity: 0.92;

    text-shadow:
        0 0 12px rgba(0,180,255,0.12);
}

@keyframes colonyFloat {

    0%,100% {

        transform:
            translateY(0px)
            scale(1);

    }

    50% {

        transform:
            translateY(-8px)
            scale(1.02);

    }

}

/* =========================================================
   RIGHT SETTINGS
   ========================================================= */

.species-column {
    grid-column: 3;
    grid-row: 1;

    display: flex;
    flex-direction: column;

    gap: 14px;
}

.panel-frame {
    padding: 18px;

    border-radius: 18px;

    background:
        rgba(5,15,35,0.76);

    border:
        1px solid rgba(100,220,255,0.14);

    backdrop-filter: blur(12px);
}

.panel-title {
    margin-bottom: 14px;

    font-size: 14px;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #7fdcff;
}

/* =========================================================
   PLAYER NAME
   ========================================================= */

.player-name-panel .panel-title {

    display:
        block;

}


.player-name-input {

    width:
        100%;

    height:
        42px;

    padding:
        0 12px;

    border:
        1px solid
        rgba(100,220,255,0.18);

    border-radius:
        10px;

    outline:
        none;

    color:
        #ffffff;

    background:
        rgba(255,255,255,0.045);

    box-shadow:
        inset 0 0 12px
        rgba(0,0,0,0.18);

    font-family:
        inherit;

    font-size:
        14px;

    letter-spacing:
        0.05em;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;

}


.player-name-input:hover {

    border-color:
        rgba(130,225,255,0.34);

    background:
        rgba(255,255,255,0.065);

}


.player-name-input:focus {

    border-color:
        rgba(150,235,255,0.64);

    box-shadow:
        0 0 16px
        rgba(80,180,255,0.18),
        inset 0 0 12px
        rgba(0,0,0,0.16);

}

.species-column {

    min-height:
        0;

    gap:
        10px;

    padding-right:
        4px;

    overflow-y:
        auto;

    scrollbar-width:
        thin;

}


.species-column .panel-frame {

    padding:
        12px 14px;

}


.species-column .panel-title {

    margin-bottom:
        9px;

}


.species-column .setting-btn {

    height:
        42px;

}


.species-column::-webkit-scrollbar {

    width:
        6px;

}


.species-column::-webkit-scrollbar-thumb {

    border-radius:
        999px;

    background:
        rgba(100,180,255,0.22);

}

/* =========================================================
   COLOURS
   ========================================================= */

.colour-list {

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    gap: 8px;

    flex-wrap: nowrap;
}

.colour-button {

    appearance: none;

    position: relative;

    width: 34px;
    height: 34px;

    min-width: 34px;
    min-height: 34px;

    border-radius: 50%;

    border:
        3px solid rgba(255,255,255,0.18);

    padding: 0;

    overflow: hidden;

    flex: 0 0 auto;

    background:
        radial-gradient(
            circle at 35% 35%,
            rgba(255,255,255,0.38) 0%,
            var(--colour-glow) 16%,
            var(--colour-base) 58%,
            rgba(255,255,255,0.18) 100%
        );

    box-shadow:
        0 0 10px var(--colour-glow),
        inset 0 0 10px rgba(255,255,255,0.08);

    cursor: pointer;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.colour-button::before {

    content: "";

    position: absolute;

    top: 8px;
    left: 10px;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.32),
            rgba(255,255,255,0)
        );

    pointer-events: none;
}

.colour-button:hover {

    transform: scale(1.08);

    box-shadow:
        0 0 16px var(--colour-glow),
        0 0 26px var(--colour-glow);
}

.colour-button.active {

    border-color: white;

    transform: scale(1.12);

    box-shadow:
        0 0 18px var(--colour-glow),
        0 0 36px var(--colour-glow);
}

/* =========================================================
   SETTINGS BUTTONS
   ========================================================= */

.settings-grid {
    display: flex;
    gap: 10px;
}

.player-count-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;
}


.setting-btn {

    flex: 1;

    height: 48px;

    border-radius: 12px;

    border:
        1px solid rgba(100,220,255,0.14);

    background:
        rgba(255,255,255,0.04);

    color: #dcecff;

    font-size: 14px;

    letter-spacing: 1px;

    cursor: pointer;

    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease,
        color 0.22s ease;
}

.setting-btn:hover {

    background:
        rgba(80,180,255,0.12);

    border-color:
        rgba(140,240,255,0.35);

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 0 18px rgba(80,180,255,0.16);
}

.setting-btn:active {

    transform: scale(0.98);
}

.setting-btn.active {

    background:
        linear-gradient(
            180deg,
            rgba(80,180,255,0.26),
            rgba(80,180,255,0.10)
        );

    border-color:
        rgba(160,240,255,0.48);

    color: #ffffff;

    box-shadow:
        0 0 22px rgba(80,180,255,0.22);
}

/* =========================================================
   SPECIES BAR
   ========================================================= */

.species-bar {
    grid-column: 1 / span 2;
    grid-row: 2;

    display: flex;
    align-items: center;

    gap: 16px;

    padding: 18px;

    border-radius: 22px;

    background:
        rgba(5,15,35,0.72);

    border:
        1px solid rgba(100,220,255,0.12);

    overflow: hidden;
}

.species-carousel {
    flex: 1;

    display: flex;
    align-items: center;

    overflow-x: auto;

    scroll-behavior: smooth;

    scrollbar-width: none;   
}

.species-carousel::-webkit-scrollbar {
    display: none;
}

.species-card {

    min-width: 112px;

    text-align: center;

    cursor: pointer;

    transition:
        transform 0.22s ease,
        opacity 0.22s ease;

}

.species-card:hover
.species-card-portrait {

    transform: scale(1.3);

    border-color:
        rgba(160,240,255,0.42);

    box-shadow:
        0 0 22px rgba(100,220,255,0.18);

    z-index:999;
}

.species-card-portrait {

    width: 112px;
    height: 112px;

    clip-path: polygon(
        12% 0%,
        100% 0%,
        88% 100%,
        0% 100%
    );

    border:
        2px solid rgba(100,220,255,0.16);

    background-size: 500%;

    background-repeat: no-repeat;

    background-position:
        53% 12%;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;

    will-change: transform;

    position: relative;

    overflow: hidden;
}

.species-card-portrait::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 45%;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0),
            rgba(0,0,0,0.45)
        );
}
.species-card-portrait::before {

    content: "";

    position: absolute;

    inset: 1px;

    clip-path: inherit;

    border:
        1px solid rgba(255,255,255,0.08);

    pointer-events: none;
}

.species-card.active
.species-card-portrait {

    border-color: #ffe09a;

    box-shadow:
        0 0 24px rgba(255,220,120,0.22);
}

.species-card-name {

    margin-top: 5px;

    font-size: 11px;

    letter-spacing: 1px;

    color: #ffffff;

    margin-right: 14%;
}


.species-card-advisor {
    margin-top: 4px;

    font-size: 12px;

    color: #8fdcff;
}

.species-scroll {

    width: 56px;
    height: 120px;

    border: none;

    background: transparent;

    color: rgba(140,220,255,0.78);

    font-size: 56px;

    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    text-shadow:
        0 0 10px rgba(100,220,255,0.28),
        0 0 22px rgba(100,220,255,0.18);

    transition:
        color 0.22s ease,
        text-shadow 0.22s ease,
        transform 0.22s ease,
        opacity 0.22s ease;
}

.species-scroll:hover {

    color: #dff7ff;

    transform: scale(1.12);

    text-shadow:
        0 0 14px rgba(140,240,255,0.85),
        0 0 28px rgba(100,220,255,0.65),
        0 0 48px rgba(100,220,255,0.38);
}

.species-scroll:active {

    transform: scale(1.02);
}

.species-scroll:disabled {

    opacity: 0.18;

    cursor: default;

    pointer-events: none;

    text-shadow:
        0 0 8px rgba(100,220,255,0.08);
}

/* =========================================================
   BUTTONS
   ========================================================= */

.button-row {

    grid-column: 3;
    grid-row: 2;

    display: flex;
    flex-direction: column;

    gap: 14px;

    padding:
        0 18px 18px 18px;
}

.start-game-btn {

    position: relative;
    width: 100%;
    height: 72px;

    border: none;
    border-radius: 20px;
    clip-path:
        polygon(
            6% 0,
            94% 0,
            100% 50%,
            94% 100%,
            6% 100%,
            0 50%
        );

    background:
        linear-gradient(
            180deg,
            #54adff,
            #2864ea
        );

    color: white;

    font-size: 20px;

    font-weight: 600;

    letter-spacing: 2px;

    cursor: pointer;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        filter 0.22s ease;

    box-shadow:
        0 0 0 1px rgba(160,230,255,0.18),
        0 0 26px rgba(53,145,255,0.34),
        0 12px 22px rgba(0,0,0,0.18);
}

.start-game-btn::before {

    content: "";
    position: absolute;
    inset: 5px;
    clip-path: inherit;

    border: 1px solid rgba(205,242,255,0.44);
    border-radius: 16px;

    pointer-events: none;
}

.start-game-btn:hover {

    transform: translateY(-2px);

    filter: brightness(1.08);

    box-shadow:
        0 0 0 1px rgba(180,236,255,0.22),
        0 0 34px rgba(80,180,255,0.40),
        0 14px 28px rgba(0,0,0,0.22);
}

.secondary-button-row {

    display: flex;

    width: 100%;

    gap: 12px;
}

.secondary-btn {

    flex: 1;

    height: 58px;

    border: none;
    border-radius: 14px;

    background:
        rgba(255,255,255,0.05);

    border:
        1px solid rgba(100,220,255,0.12);

    color: #dce8ff;

    font-size: 17px;

    letter-spacing: 1px;

    cursor: pointer;

    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

.secondary-btn:hover {

    background:
        rgba(80,180,255,0.10);

    border-color:
        rgba(140,240,255,0.35);

    transform: translateY(-2px);

    box-shadow:
        0 0 18px rgba(80,180,255,0.18);
}

/* =========================================================
   NEWS TICKER
   ========================================================= */

#newsTicker {

    position: fixed;

    left: 0;
    bottom: 0;

    width: 100vw;
    height: 34px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.85),
            rgba(5,18,40,0.92),
            rgba(0,0,0,0.85)
        );

    border-top:
        1px solid rgba(120,220,255,0.18);

    z-index: 9998;

    pointer-events: none;
}

#newsTrack {

    position: absolute;

    white-space: nowrap;

    line-height: 34px;

    padding-left: 100vw;

    color:
        rgba(180,220,255,0.92);

    font-size: 0.82rem;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    text-shadow:
        0 0 10px rgba(120,220,255,0.22);

    animation:
        tickerScroll 60s linear infinite;
}

@keyframes tickerScroll {

    from {

        transform:
            translateX(0);

    }

    to {

        transform:
            translateX(-100%);

    }

}

/* =========================================================
   GAME CONTAINER
   ========================================================= */

.game-container {

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.4s ease;

    z-index: 5000;

    background: black;
}

.game-container.show {

    opacity: 1;

    pointer-events: auto;
}

.game-container.hidden {

    display: none;
}

#gameFrame {

    width: 100%;
    height: 100%;

    border: none;

    display: block;

    background: black;
}

.hidden {

    display: none !important;
}

/* =========================================================
   GLOBAL MODAL
   ========================================================= */

.modal-overlay {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        rgba(0,0,0,0.72);

    backdrop-filter:
        blur(4px);

    z-index: 999999;
}

.modal-box {

    width: 420px;

    padding: 28px;

    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            rgba(8,18,36,0.98),
            rgba(2,8,18,0.98)
        );

    border:
        1px solid rgba(120,220,255,0.22);

    box-shadow:
        0 0 40px rgba(0,140,255,0.25);

    text-align: center;

    color:
        rgba(220,240,255,0.96);

    font-size: 1rem;

    line-height: 1.5;
}

.modal-actions {

    display: flex;

    gap: 14px;

    margin-top: 24px;
}

.modal-actions button {

    flex: 1;

    height: 52px;

    border: none;

    border-radius: 12px;

    cursor: pointer;

    font-size: 0.9rem;

    letter-spacing: 0.12em;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.modal-actions button:hover {

    transform:
        translateY(-1px);
}

.multiplayer-confirm-modal h3 {

    margin: 0;

    color: #ffffff;

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size: 28px;

    line-height: 1.1;

    text-transform: uppercase;
}

.multiplayer-confirm-copy {

    margin: 12px 0 0;

    color:
        rgba(214,228,246,0.9);

    font-size: 15px;

    line-height: 1.6;
}

.multiplayer-confirm-actions {

    margin-top: 22px;
}

.multiplayer-confirm-cancel {

    background:
        linear-gradient(
            180deg,
            rgba(18,52,96,0.95),
            rgba(6,18,36,0.98)
        );

    color:
        rgba(220,240,255,0.92);
}

.multiplayer-confirm-danger {

    background:
        linear-gradient(
            180deg,
            rgba(170,54,54,0.96),
            rgba(92,18,18,0.98)
        );

    color:
        #ffffff;

    box-shadow:
        0 0 22px rgba(160,48,48,0.22);
}

#confirmExit {

    background:
        linear-gradient(
            180deg,
            rgba(120,40,40,0.95),
            rgba(70,10,10,0.98)
        );

    color: white;
}

#cancelExit {

    background:
        linear-gradient(
            180deg,
            rgba(18,52,96,0.95),
            rgba(6,18,36,0.98)
        );

    color:
        rgba(220,240,255,0.92);
}

/* =========================================================
   INTRO CINEMATIC
   ========================================================= */

.intro-cinematic {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: black;

    z-index: 999999;

    opacity: 1;

    transition:
        opacity 1s ease;

}

.intro-cinematic.hidden {

    display: none;

}

.intro-cinematic.fade-out {

    opacity: 0;

}

.intro-video {

    width: 100vw;
    height: 100vh;

    object-fit: cover;

    background: black;

}

.skip-intro-btn {

    position: absolute;

    top: 24px;
    right: 24px;

    z-index: 20;

    min-width: 140px;
    height: 52px;

    padding: 0 24px;

    border: none;
    border-radius: 12px;

    cursor: pointer;

    font-size: 0.9rem;

    font-weight: 600;

    letter-spacing: 0.14em;

    color: white;

    background:
        linear-gradient(
            180deg,
            rgba(120,40,40,0.95),
            rgba(70,10,10,0.98)
        );

    box-shadow:
        0 0 18px rgba(120,40,40,0.28);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease,
        opacity 0.15s ease;

    opacity: 0.94;

    animation:
        introSkipFade 1.5s ease;

}

.skip-intro-btn:hover {

    transform:
        translateY(-1px);

    filter:
        brightness(1.08);

    box-shadow:
        0 0 24px rgba(180,60,60,0.35);

    opacity: 1;

}

.skip-intro-btn:active {

    transform:
        translateY(1px)
        scale(0.98);

}

/* =========================================================
HELP CONTAINER
========================================================= */

.help-container {

position: fixed;

inset: 0;

opacity: 0;

pointer-events: none;

transition:
    opacity 0.4s ease;

z-index: 6000;

}

.help-container.show {

opacity: 1;

pointer-events: auto;

}

.help-container.hidden {

display: none;

}

#helpFrame {

position: absolute;

top: 10%;
left: 10%;

width: 80%;
height: 80%;

border: none;

border-radius: 28px;

overflow: hidden;

background: black;

box-shadow:
    0 0 60px rgba(0,120,255,0.22),
    0 0 120px rgba(0,60,140,0.16);

border:
    1px solid rgba(120,220,255,0.14);

}

/* =========================================================
   GAME IFRAME WIDTH CONTAINMENT
   ========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.game-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    height: 100%;
    max-height: 100%;

    overflow: hidden;
}

#gameFrame {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    height: 100%;
    max-height: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
    overflow: hidden;
}

/* =========================================================
   PLAYER AUTHENTICATION
   ========================================================= */

.auth-overlay {

    position:
        fixed;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(0,0,0,0.76);

    backdrop-filter:
        blur(6px);

    z-index:
        1000000;

}


.auth-dialog {

    width:
        min(440px, 100%);

    max-height:
        calc(100vh - 40px);

    padding:
        24px;

    overflow-y:
        auto;

    scrollbar-width:
        thin;

    border:
        1px solid
        rgba(120,220,255,0.24);

    border-radius:
        18px;

    color:
        #dfeeff;

    background:
        linear-gradient(
            180deg,
            rgba(8,18,36,0.99),
            rgba(2,8,18,0.99)
        );

    box-shadow:
        0 0 44px
        rgba(0,140,255,0.24);

}


.auth-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;

    margin-bottom:
        22px;

}


.auth-header h2 {

    color:
        #ffffff;

    font-size:
        20px;

    letter-spacing:
        0.05em;

}


.auth-header p {

    margin-top:
        6px;

    color:
        rgba(175,205,230,0.72);

    font-size:
        13px;

    line-height:
        1.45;

}


/* =========================================================
   AUTHENTICATION TABS
   ========================================================= */

.auth-tabs {

    display:
        flex;

    width:
        100%;

    margin-bottom:
        20px;

    border-bottom:
        1px solid
        rgba(120,220,255,0.14);

}


.auth-tab {

    position:
        relative;

    flex:
        1 1 0;

    min-width:
        0;

    height:
        42px;

    padding:
        0 12px;

    border:
        none;

    border-bottom:
        2px solid transparent;

    border-radius:
        0;

    color:
        rgba(165,200,228,0.72);

    background:
        transparent;

    cursor:
        pointer;

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;

}


.auth-tab:hover {

    color:
        rgba(235,247,255,0.96);

    background:
        rgba(90,180,255,0.045);

}


.auth-tab:focus-visible {

    outline:
        1px solid
        rgba(140,225,255,0.62);

    outline-offset:
        -3px;

}


.auth-tab.is-active {

    color:
        #ffffff;

    border-bottom-color:
        #4fa4ff;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(79,164,255,0.10)
        );

    box-shadow:
        inset 0 -5px 12px
        rgba(79,164,255,0.07);

}


.auth-close {

    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    border:
        1px solid
        rgba(120,220,255,0.16);

    border-radius:
        9px;

    color:
        #dcecff;

    background:
        rgba(255,255,255,0.04);

    cursor:
        pointer;

    font-size:
        20px;

}


.auth-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        16px;

}


.auth-field {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.auth-field span {

    color:
        #7fdcff;

    font-size:
        12px;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


.auth-field-help {

    display:
        block;

    color:
        rgba(155,190,218,0.68);

    font-size:
        11px;

    line-height:
        1.4;

}


.auth-field input {

    width:
        100%;

    height:
        44px;

    padding:
        0 12px;

    border:
        1px solid
        rgba(100,220,255,0.18);

    border-radius:
        10px;

    outline:
        none;

    color:
        #ffffff;

    background:
        rgba(255,255,255,0.045);

    font-family:
        inherit;

    font-size:
        14px;

}


.auth-field input:focus {

    border-color:
        rgba(150,235,255,0.62);

    box-shadow:
        0 0 16px
        rgba(80,180,255,0.17);

}

.auth-link-button {

    align-self:
        flex-start;

    border:
        none;

    padding:
        0;

    color:
        #8fdcff;

    background:
        transparent;

    cursor:
        pointer;

    font-family:
        inherit;

    font-size:
        12px;

    letter-spacing:
        0.04em;

    text-decoration:
        underline;

    text-underline-offset:
        3px;

}


.auth-link-button:hover {

    color:
        #ffffff;

}

.auth-status {

    min-height:
        20px;

    color:
        #ffb7b7;

    font-size:
        13px;

    line-height:
        1.45;

}


.auth-actions {

    display:
        flex;

    gap:
        12px;

}


.auth-primary,
.auth-secondary {

    flex:
        1;

    height:
        46px;

    border:
        1px solid
        rgba(100,220,255,0.18);

    border-radius:
        11px;

    color:
        #ffffff;

    cursor:
        pointer;

    font-family:
        inherit;

    letter-spacing:
        0.06em;

}


.auth-primary {

    background:
        linear-gradient(
            180deg,
            #4fa4ff,
            #2c6fd1
        );

}


.auth-secondary {

    background:
        rgba(255,255,255,0.05);

}


.auth-primary:disabled,
.auth-secondary:disabled {

    cursor:
        wait;

    opacity:
        0.55;

}


.auth-signed-in {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    text-align:
        center;

}


.auth-signed-in span,
.auth-signed-in small {

    color:
        rgba(170,205,232,0.74);

}


.auth-signed-in strong {

    color:
        #ffffff;

    font-size:
        22px;

    letter-spacing:
        0.05em;

}


.auth-signed-in .auth-secondary {

    margin-top:
        14px;

    flex:
        none;

}

/* =========================================================
   LOAD CAMPAIGN PANEL
   ========================================================= */

.load-game-screen {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    gap: 18px;

    padding: 28px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(0,120,255,0.08),
            transparent 52%
        );
}

.load-game-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}

.load-game-header h2 {
    margin: 0 0 8px;

    color: #fff0c7;

    font-size: 28px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.load-game-header p {
    max-width: 720px;

    color: rgba(220,238,255,0.76);

    font-size: 14px;
    line-height: 1.55;
}

.load-game-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}

.load-game-button {
    min-height: 42px;

    padding: 0 16px;

    border:
        1px solid rgba(120,220,255,0.22);

    border-radius: 10px;

    color: #dfeeff;

    background:
        rgba(255,255,255,0.055);

    cursor: pointer;

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.load-game-button:hover,
.load-game-button:focus-visible {
    color: #ffffff;

    border-color:
        rgba(150,235,255,0.58);

    background:
        rgba(80,170,255,0.14);

    outline: none;
}

.load-game-button--primary {
    border-color:
        rgba(180,235,255,0.48);

    background:
        rgba(80,170,255,0.18);
}

.load-game-list {
    min-height: 0;

    display: flex;
    flex-direction: column;

    gap: 10px;

    overflow-y: auto;

    padding-right: 8px;
}

.load-game-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 14px;

    align-items: center;

    padding: 14px;

    border:
        1px solid rgba(100,180,255,0.14);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.015)
        );
}

.load-game-row strong,
.load-game-row small {
    display: block;
}

.load-game-row strong {
    color: rgba(238,248,255,0.96);

    font-size: 14px;
}

.load-game-row small {
    margin-top: 5px;

    color: rgba(150,180,210,0.74);

    font-size: 11px;
    line-height: 1.45;
}

.load-game-status {
    min-height: 20px;

    color: rgba(255,220,145,0.92);

    font-size: 12px;
}

.load-game-empty {
    padding: 22px;

    border:
        1px dashed rgba(120,200,255,0.24);

    border-radius: 14px;

    color: rgba(190,215,235,0.78);

    background:
        rgba(0,0,0,0.18);

    text-align: center;
}


/* =========================================================
   MULTIPLAYER LOBBY
   ========================================================= */

.multiplayer-screen {
    width: 100%;
    height: 100%;
    padding: 26px;
    overflow-y: auto;
    color: #dcecff;
    background:
        radial-gradient(
            circle at top left,
            rgba(60,130,255,0.12),
            rgba(0,0,0,0) 28%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(50,180,255,0.10),
            rgba(0,0,0,0) 30%
        );
}

.multiplayer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.multiplayer-header h2 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 30px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.multiplayer-header p {
    max-width: 760px;
    color: rgba(170,205,230,0.82);
    font-size: 14px;
    line-height: 1.55;
}

.multiplayer-status {
    min-height: 22px;
    margin: 0 0 14px;
    color: #8fdcff;
    font-size: 13px;
    line-height: 1.5;
}

.multiplayer-status.is-error {
    color: #ff9a9a;
}

.multiplayer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.95fr);
    gap: 18px;
    align-items: start;
}

.multiplayer-card {
    padding: 18px;
    border: 1px solid rgba(100,220,255,0.16);
    border-radius: 20px;
    background:
        linear-gradient(
            180deg,
            rgba(10,22,48,0.88),
            rgba(3,9,22,0.96)
        );
    box-shadow:
        0 18px 34px rgba(0,0,0,0.22),
        0 0 26px rgba(0,120,255,0.10);
}

.multiplayer-card--centre {
    max-width: 520px;
    margin: 70px auto 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: center;
}

.multiplayer-card h3 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.multiplayer-create-settings {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.multiplayer-create-setting-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.multiplayer-create-screen {
    padding: 18px 24px 26px;
}

.multiplayer-create-shell {
    position: relative;
    min-height: 100%;
    padding-top: 94px;
    overflow: hidden;
}

.multiplayer-create-backdrop,
.multiplayer-create-veil {
    position: absolute;
    inset: 0;
    border-radius: 34px;
    pointer-events: none;
}

.multiplayer-create-backdrop {
    background:
        center center / cover no-repeat;
    opacity: 0.34;
    filter:
        saturate(1.18)
        brightness(0.72)
        blur(1px);
    transform: scale(1.04);
}

.multiplayer-create-veil {
    background:
        linear-gradient(
            180deg,
            rgba(3,8,20,0.38),
            rgba(2,8,18,0.78) 22%,
            rgba(2,7,16,0.92)
        );
}

.multiplayer-create-brand {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 26px;
    text-align: center;
}

.multiplayer-create-brand-mark {
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter:
        drop-shadow(0 0 18px rgba(70,165,255,0.26));
}

.multiplayer-create-brand-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.multiplayer-create-brand-title,
.multiplayer-create-heading h2 {
    font-family:
        "Cinzel",
        Georgia,
        serif;
}

.multiplayer-create-brand-title {
    color: #eff5ff;
    font-size: 31px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow:
        0 0 16px rgba(75,165,255,0.22);
}

.multiplayer-create-brand-subtitle {
    color: rgba(178,205,236,0.84);
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.multiplayer-create-frame {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 160px);
    padding: 28px 30px 30px;
    border: 1px solid rgba(105,180,255,0.38);
    border-radius: 34px;
    background:
        linear-gradient(
            180deg,
            rgba(5,16,38,0.82),
            rgba(2,7,18,0.94)
        );
    box-shadow:
        inset 0 0 0 1px rgba(145,215,255,0.08),
        0 0 0 1px rgba(66,120,220,0.16),
        0 24px 60px rgba(0,0,0,0.42),
        0 0 48px rgba(40,120,255,0.16);
    backdrop-filter: blur(12px);
}

.multiplayer-create-frame::before,
.multiplayer-create-frame::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 26px;
    pointer-events: none;
}

.multiplayer-create-frame::before {
    border: 1px solid rgba(98,165,255,0.12);
}

.multiplayer-create-frame::after {
    inset: auto 42px 0 42px;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0),
            rgba(95,180,255,0.52),
            rgba(0,0,0,0)
        );
}

.multiplayer-create-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
}

.multiplayer-create-heading {
    max-width: 780px;
}

.multiplayer-create-step {
    margin-bottom: 12px;
    color: #7ec2ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.multiplayer-create-heading h2 {
    margin: 0;
    color: #ffffff;
    font-size: 52px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.05;
    text-transform: uppercase;
}

.multiplayer-create-heading p {
    margin-top: 12px;
    color: rgba(205,223,242,0.88);
    font-size: 18px;
    line-height: 1.55;
}

.multiplayer-create-back {
    min-width: 142px;
    min-height: 56px;
    border-radius: 18px;
    border-color: rgba(90,160,255,0.54);
    background:
        linear-gradient(
            180deg,
            rgba(9,20,46,0.94),
            rgba(6,14,31,0.94)
        );
    color: #f5fbff;
    font-size: 16px;
    letter-spacing: 0.18em;
}

.multiplayer-create-status {
    min-height: 0;
    margin: 18px 0 0;
    padding: 0;
    color: #8fdcff;
    font-size: 14px;
}

.multiplayer-create-status:empty {
    display: none;
}

.multiplayer-create-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.78fr);
    gap: 22px;
    margin-top: 18px;
    align-items: start;
}

.multiplayer-create-screen .multiplayer-card {
    padding: 0;
    overflow: hidden;
    border-color: rgba(110,190,255,0.16);
    background:
        linear-gradient(
            180deg,
            rgba(8,20,44,0.82),
            rgba(3,10,24,0.92)
        );
    box-shadow:
        inset 0 0 0 1px rgba(120,200,255,0.05),
        0 18px 34px rgba(0,0,0,0.26);
}

.multiplayer-create-card-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(90,165,255,0.12);
}

.multiplayer-create-card-heading h3 {
    margin: 0;
    color: #f7fbff;
    font-size: 14px;
    letter-spacing: 0.22em;
}

.multiplayer-create-card-accent,
.multiplayer-create-help-bullet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #79bcff;
}

.multiplayer-create-card-accent svg,
.multiplayer-create-help-bullet svg {
    width: 16px;
    height: 16px;
}

.multiplayer-create-screen .multiplayer-create-settings {
    gap: 0;
}

.multiplayer-create-setting-row {
    display: grid;
    grid-template-columns: 88px minmax(220px, 0.92fr) minmax(300px, 1.18fr);
    gap: 18px;
    align-items: center;
    padding: 22px 24px;
}

.multiplayer-create-setting-row + .multiplayer-create-setting-row {
    border-top: 1px solid rgba(90,165,255,0.10);
}

.multiplayer-create-setting-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #89c7ff;
    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(90,165,255,0.18),
            rgba(7,20,44,0.94) 70%
        );
    border: 1px solid rgba(115,190,255,0.24);
    box-shadow:
        inset 0 0 22px rgba(40,120,255,0.18),
        0 0 22px rgba(48,120,255,0.12);
}

.multiplayer-create-setting-icon svg {
    width: 40px;
    height: 40px;
}

.multiplayer-create-setting-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.multiplayer-create-setting-title {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.multiplayer-create-setting-copy p {
    color: rgba(187,208,233,0.80);
    font-size: 15px;
    line-height: 1.45;
}

.multiplayer-create-setting-control {
    min-width: 0;
}

.multiplayer-create-option-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.multiplayer-create-screen .setting-btn {
    min-height: 64px;
    border-radius: 16px;
    border: 1px solid rgba(138,205,255,0.22);
    background:
        linear-gradient(
            180deg,
            rgba(11,22,46,0.94),
            rgba(5,12,28,0.96)
        );
    color: #edf7ff;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.03em;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04);
}

.multiplayer-create-screen .setting-btn:hover {
    background:
        linear-gradient(
            180deg,
            rgba(20,40,76,0.96),
            rgba(8,18,38,0.98)
        );
    box-shadow:
        0 0 18px rgba(64,140,255,0.16);
}

.multiplayer-create-screen .setting-btn.active {
    border-color: rgba(115,195,255,0.9);
    background:
        radial-gradient(
            circle at center,
            rgba(36,104,255,0.72),
            rgba(10,28,74,0.98) 72%
        );
    box-shadow:
        inset 0 0 0 1px rgba(180,230,255,0.54),
        0 0 16px rgba(65,150,255,0.48),
        0 0 28px rgba(50,120,255,0.26);
}

.multiplayer-create-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.multiplayer-create-summary-list {
    display: grid;
    gap: 10px;
    padding: 18px 18px 0;
}

.multiplayer-create-summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(98,165,255,0.12);
    border-radius: 16px;
    background:
        linear-gradient(
            180deg,
            rgba(11,22,46,0.74),
            rgba(5,12,28,0.86)
        );
}

.multiplayer-create-summary-label {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: #eff6ff;
    font-size: 15px;
}

.multiplayer-create-summary-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #81c1ff;
    background: rgba(63,124,255,0.11);
}

.multiplayer-create-summary-icon svg {
    width: 22px;
    height: 22px;
}

.multiplayer-create-summary-item strong {
    color: #7fc3ff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.multiplayer-create-orbit {
    position: relative;
    height: 176px;
    margin: 18px 18px 0;
    border-top: 1px solid rgba(95,170,255,0.12);
    border-bottom: 1px solid rgba(95,170,255,0.12);
    background:
        radial-gradient(
            circle at center,
            rgba(80,155,255,0.16),
            rgba(0,0,0,0) 56%
        );
    overflow: hidden;
}

.multiplayer-create-orbit-ring,
.multiplayer-create-orbit-core,
.multiplayer-create-orbit-star {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.multiplayer-create-orbit-ring {
    border: 1px solid rgba(100,180,255,0.26);
    border-radius: 50%;
}

.multiplayer-create-orbit-ring--1 {
    width: 78%;
    height: 34%;
}

.multiplayer-create-orbit-ring--2 {
    width: 62%;
    height: 26%;
    transform: translate(-50%, -50%) rotate(12deg);
}

.multiplayer-create-orbit-ring--3 {
    width: 48%;
    height: 20%;
    transform: translate(-50%, -50%) rotate(-12deg);
}

.multiplayer-create-orbit-ring--4 {
    width: 30%;
    height: 12%;
}

.multiplayer-create-orbit-core {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.98) 0%,
            rgba(119,190,255,0.96) 30%,
            rgba(45,110,255,0.65) 58%,
            rgba(45,110,255,0) 100%
        );
    box-shadow:
        0 0 24px rgba(95,170,255,0.55);
}

.multiplayer-create-orbit-star {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dff5ff;
    box-shadow:
        0 0 16px rgba(120,195,255,0.62);
}

.multiplayer-create-orbit-star--1 {
    left: 26%;
    top: 52%;
}

.multiplayer-create-orbit-star--2 {
    left: 73%;
    top: 44%;
}

.multiplayer-create-orbit-star--3 {
    left: 58%;
    top: 67%;
}

.multiplayer-create-orbit-star--4 {
    left: 40%;
    top: 35%;
}

.multiplayer-create-help-list {
    display: grid;
    gap: 16px;
    padding: 18px 20px 22px;
}

.multiplayer-create-help-item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    color: rgba(203,223,244,0.90);
    font-size: 15px;
    line-height: 1.5;
}

.multiplayer-create-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
}

.multiplayer-create-button-crest {
    width: 58px;
    height: 58px;
    margin-bottom: -26px;
    z-index: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(124,205,255,0.44);
    background:
        radial-gradient(
            circle at center,
            rgba(35,88,255,0.62),
            rgba(8,18,40,0.96)
        );
    box-shadow:
        0 0 24px rgba(70,160,255,0.34);
}

.multiplayer-create-button-crest-image {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter:
        drop-shadow(0 0 14px rgba(90,180,255,0.34));
}

.multiplayer-create-cta {
    position: relative;
    width: min(100%, 700px);
    min-height: 92px;
    margin-top: 0;
    border: none;
    border-radius: 28px;
    clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
    background:
        linear-gradient(
            180deg,
            #4ea7ff,
            #275fe4
        );
    color: #f7fbff;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-shadow:
        0 0 18px rgba(255,255,255,0.22);
    box-shadow:
        0 0 0 1px rgba(160,230,255,0.22),
        0 0 34px rgba(55,145,255,0.48),
        0 18px 42px rgba(0,0,0,0.30);
}

.multiplayer-create-cta::before {
    content: "";
    position: absolute;
    inset: 5px;
    clip-path: inherit;
    border: 1px solid rgba(205,242,255,0.44);
    border-radius: 22px;
    pointer-events: none;
}

.multiplayer-create-cta:hover,
.multiplayer-create-cta:focus-visible {
    transform: translateY(-3px);
    filter: brightness(1.08);
    box-shadow:
        0 0 0 1px rgba(170,236,255,0.28),
        0 0 42px rgba(65,155,255,0.56),
        0 24px 48px rgba(0,0,0,0.34);
}

.multiplayer-create-footnote {
    color: rgba(200,220,242,0.82);
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 1200px) {
    .multiplayer-create-layout {
        grid-template-columns: 1fr;
    }

    .multiplayer-create-heading h2 {
        font-size: 44px;
    }
}

@media (max-width: 900px) {
    .multiplayer-create-screen {
        padding: 14px 14px 20px;
    }

    .multiplayer-create-shell {
        padding-top: 72px;
    }

    .multiplayer-create-brand {
        gap: 10px;
    }

    .multiplayer-create-brand-mark {
        width: 42px;
        height: 42px;
    }

    .multiplayer-create-brand-title {
        font-size: 24px;
    }

    .multiplayer-create-brand-subtitle {
        font-size: 11px;
        letter-spacing: 0.16em;
    }

    .multiplayer-create-frame {
        min-height: auto;
        padding: 22px 18px 22px;
    }

    .multiplayer-create-header {
        flex-direction: column;
    }

    .multiplayer-create-back {
        min-width: 0;
        width: 100%;
    }

    .multiplayer-create-heading h2 {
        font-size: 34px;
    }

    .multiplayer-create-heading p {
        font-size: 16px;
    }

    .multiplayer-create-setting-row {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .multiplayer-create-setting-control {
        grid-column: 1 / -1;
    }

    .multiplayer-create-setting-icon {
        width: 64px;
        height: 64px;
    }

    .multiplayer-create-setting-icon svg {
        width: 30px;
        height: 30px;
    }

    .multiplayer-create-cta {
        min-height: 78px;
        font-size: 20px;
        letter-spacing: 0.14em;
    }
}

@media (max-width: 640px) {
    .multiplayer-create-option-grid {
        grid-template-columns: 1fr;
    }

    .multiplayer-create-setting-row {
        padding: 18px 16px;
    }

    .multiplayer-create-card-heading {
        padding: 18px 16px;
    }

    .multiplayer-create-summary-list,
    .multiplayer-create-help-list {
        padding-left: 16px;
        padding-right: 16px;
    }

    .multiplayer-create-orbit {
        height: 150px;
        margin-left: 16px;
        margin-right: 16px;
    }
}

.multiplayer-create-submit {
    margin-top: 12px;
    min-height: 68px;
    border: 3px double #2c6fd1;
    border-radius: 18px;
    background:
        linear-gradient(
            180deg,
            #4fa4ff,
            #2c6fd1
        );
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.12em;
    box-shadow:
        0 0 30px rgba(0,140,255,0.24);
}

.multiplayer-create-submit:hover,
.multiplayer-create-submit:focus-visible {
    background:
        linear-gradient(
            180deg,
            #67b6ff,
            #3481e4
        );
    transform: translateY(-2px);
    box-shadow:
        0 0 36px rgba(80,180,255,0.34);
}

.multiplayer-create-screen {
    position: relative;
    top: 0;
    height: 100%;
    padding: 34px 22px 20px;
    overflow: hidden;
}

.multiplayer-create-backdrop,
.multiplayer-create-veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.multiplayer-create-backdrop {
    opacity: 0.28;
    background:
        center center / cover no-repeat;
    filter:
        saturate(1.1)
        brightness(0.72)
        blur(1px);
    transform: scale(1.03);
}

.multiplayer-create-veil {
    background:
        linear-gradient(
            180deg,
            rgba(4,10,24,0.34),
            rgba(4,9,22,0.70) 18%,
            rgba(2,7,18,0.88) 50%,
            rgba(2,7,18,0.95)
        );
}

.multiplayer-create-stage {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.multiplayer-create-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.multiplayer-create-heading {
    flex: 1;
    min-width: 0;
    max-width: none;
}

.multiplayer-create-step {
    margin-bottom: 10px;
    color: #7ec7ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

.multiplayer-create-heading h2 {
    margin: 0;
    color: #ffffff;
    font-family:
        "Cinzel",
        Georgia,
        serif;
    font-size: clamp(24px, 2vw, 32px);
    font-weight: 700;
    letter-spacing: 0.035em;
    line-height: 1.08;
    text-transform: uppercase;
    white-space: nowrap;
}

.multiplayer-create-heading p {
    margin-top: 8px;
    color: rgba(214,228,246,0.88);
    font-size: 16px;
    line-height: 1.5;
}

.multiplayer-create-back {
    min-width: 126px;
    min-height: 46px;
    border-radius: 14px;
    border-color: rgba(92,164,255,0.48);
    background:
        linear-gradient(
            180deg,
            rgba(10,22,48,0.92),
            rgba(5,12,28,0.94)
        );
    color: #f4fbff;
    font-size: 14px;
    letter-spacing: 0.16em;
}

.multiplayer-create-status {
    min-height: 0;
    margin: 0;
    padding: 0;
    color: #8fdcff;
    font-size: 13px;
}

.multiplayer-create-status:empty {
    display: none;
}

.multiplayer-create-layout {
    min-height: 0;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 2.08fr) minmax(300px, 0.94fr);
    gap: 18px;
}

.multiplayer-create-main {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.multiplayer-create-maincard {
    min-height: 0;
    flex: 1;
}

.multiplayer-create-screen .multiplayer-card {
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
    border-color: rgba(114,194,255,0.16);
    background:
        linear-gradient(
            180deg,
            rgba(7,18,40,0.78),
            rgba(3,9,22,0.92)
        );
    box-shadow:
        inset 0 0 0 1px rgba(120,200,255,0.05),
        0 14px 30px rgba(0,0,0,0.24);
    backdrop-filter: blur(8px);
}

.multiplayer-create-card-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(90,165,255,0.11);
}

.multiplayer-create-card-heading h3 {
    margin: 0;
    color: #f8fcff;
    font-size: 16px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.multiplayer-create-card-accent,
.multiplayer-create-help-bullet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #79bcff;
}

.multiplayer-create-card-accent svg,
.multiplayer-create-help-bullet svg {
    width: 16px;
    height: 16px;
}

.multiplayer-create-screen .multiplayer-create-settings {
    gap: 0;
}

.multiplayer-create-setting-row {
    display: grid;
    grid-template-columns: 64px minmax(200px, 0.98fr) minmax(270px, 1.02fr);
    gap: 16px;
    align-items: center;
    padding: 17px 20px;
}

.multiplayer-create-setting-row + .multiplayer-create-setting-row {
    border-top: 1px solid rgba(90,165,255,0.10);
}

.multiplayer-create-setting-icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #8cc8ff;
    border: 1px solid rgba(116,189,255,0.22);
    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(92,166,255,0.18),
            rgba(8,20,44,0.96) 72%
        );
    box-shadow:
        inset 0 0 22px rgba(42,122,255,0.12),
        0 0 20px rgba(38,116,255,0.08);
}

.multiplayer-create-setting-icon svg {
    width: 30px;
    height: 30px;
}

.multiplayer-create-setting-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.multiplayer-create-setting-title {
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.multiplayer-create-setting-copy p {
    color: rgba(188,208,232,0.82);
    font-size: 16px;
    line-height: 1.42;
}

.multiplayer-create-setting-control {
    min-width: 0;
}

.multiplayer-create-option-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.multiplayer-create-screen .setting-btn {
    min-height: 56px;
    border-radius: 14px;
    border:
        1px solid rgba(100,220,255,0.14);

    background:
        rgba(255,255,255,0.04);

    color: #dcecff;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
}

.multiplayer-create-screen .setting-btn:hover {
    background:
        rgba(80,180,255,0.12);

    border-color:
        rgba(140,240,255,0.35);

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 0 18px rgba(64,140,255,0.14);
}

.multiplayer-create-screen .setting-btn.active {
    background:
        linear-gradient(
            180deg,
            rgba(80,180,255,0.26),
            rgba(80,180,255,0.10)
        );

    border-color: rgba(123,202,255,0.92);

    color: #ffffff;

    box-shadow:
        0 0 22px rgba(80,180,255,0.22);
}

.multiplayer-create-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.multiplayer-create-submit,
.multiplayer-create-cta {
    width: min(48%, 520px);
    min-height: 74px;
    margin-top: 0;
    border: 3px double rgba(182,231,255,0.62);
    border-radius: 20px;
    background:
        linear-gradient(
            180deg,
            #54adff,
            #2864ea
        );
    color: #f8fcff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-shadow:
        0 0 18px rgba(255,255,255,0.22);
    box-shadow:
        0 0 0 1px rgba(160,230,255,0.18),
        0 0 34px rgba(53,145,255,0.40),
        0 14px 26px rgba(0,0,0,0.22);
}

.multiplayer-create-submit:hover,
.multiplayer-create-submit:focus-visible,
.multiplayer-create-cta:hover,
.multiplayer-create-cta:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow:
        0 0 0 1px rgba(180,236,255,0.24),
        0 0 42px rgba(65,155,255,0.48),
        0 22px 42px rgba(0,0,0,0.30);
}

.multiplayer-create-sidebar {
    min-height: 0;
    display: grid;
    grid-template-rows: 278px minmax(0, 1fr);
    gap: 14px;
    align-content: start;
}

.multiplayer-create-preview-card,
.multiplayer-create-help-card {
    min-height: 0;
}

.multiplayer-create-preview-stage {
    position: relative;
    height: 100%;
    min-height: 278px;
    overflow: hidden;
    border-radius: inherit;
    background:
        radial-gradient(
            circle at 50% 54%,
            rgba(74,144,255,0.16),
            rgba(0,0,0,0) 40%
        ),
        linear-gradient(
            180deg,
            rgba(10,20,44,0.82),
            rgba(3,9,22,0.96)
        );
    isolation: isolate;
}

.multiplayer-create-preview-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 20% 18%,
            rgba(108,176,255,0.14),
            rgba(0,0,0,0) 26%
        ),
        radial-gradient(
            circle at 78% 22%,
            rgba(82,126,255,0.12),
            rgba(0,0,0,0) 24%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,0.02),
            rgba(255,255,255,0)
        );
    pointer-events: none;
}

.multiplayer-create-preview-hud {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.multiplayer-create-preview-chip {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(110,188,255,0.16);
    background:
        linear-gradient(
            180deg,
            rgba(8,18,40,0.76),
            rgba(5,11,26,0.86)
        );
    backdrop-filter: blur(6px);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.03);
}

.multiplayer-create-preview-chip span {
    display: block;
    color: rgba(168,198,228,0.88);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.multiplayer-create-preview-chip strong {
    display: block;
    margin-top: 4px;
    color: #f5fbff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.multiplayer-create-preview-climate {
    position: absolute;
    inset: 10px;
    z-index: 0;
    border-radius: 16px;
    pointer-events: none;
    opacity: 0;
    background:
        center center / contain no-repeat;
    transition:
        opacity 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        filter 0.25s ease;
}

.multiplayer-create-preview-climate.is-neutral {
    opacity: 0.88;
    border: none;
    box-shadow:
        0 0 34px rgba(120,155,255,0.10);
    filter:
        drop-shadow(0 0 12px rgba(120,155,255,0.14));
}

.multiplayer-create-preview-climate.is-peaceful {
    opacity: 0.92;
    border: none;
    box-shadow:
        0 0 42px rgba(76,232,193,0.12);
    filter:
        drop-shadow(0 0 16px rgba(112,255,214,0.14));
}

.multiplayer-create-preview-climate.is-hostile {
    opacity: 0.94;
    border: none;
    box-shadow:
        0 0 42px rgba(255,126,82,0.14);
    filter:
        drop-shadow(0 0 16px rgba(255,132,92,0.16));
}

.multiplayer-create-preview-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.multiplayer-create-preview-webgl {
    width: 100%;
    height: 100%;
    display: block;
    filter:
        drop-shadow(0 0 12px rgba(86,164,255,0.22));
}

.multiplayer-create-preview-loading {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    z-index: 5;
    min-height: 34px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(110,188,255,0.16);
    background:
        linear-gradient(
            180deg,
            rgba(8,18,40,0.84),
            rgba(5,12,28,0.92)
        );
    color: rgba(208,228,245,0.92);
    font-size: 12px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition:
        opacity 0.2s ease;
}

.multiplayer-create-preview-loading.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.multiplayer-create-preview-loading.is-error {
    color: #ffd9cf;
    border-color: rgba(255,132,92,0.32);
}

.multiplayer-create-help-list {
    display: grid;
    gap: 12px;
    padding: 16px 18px 18px;
}

.multiplayer-create-help-item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    color: rgba(214,228,245,0.92);
    font-size: 16px;
    line-height: 1.52;
}

@media (max-width: 1320px) {
    .multiplayer-create-heading h2 {
        white-space: normal;
    }

    .multiplayer-create-layout {
        grid-template-columns: minmax(0, 1.72fr) minmax(300px, 0.98fr);
    }

    .multiplayer-create-setting-row {
        grid-template-columns: 58px minmax(160px, 0.92fr) minmax(220px, 1fr);
    }
}

@media (max-width: 1120px) {
    .multiplayer-create-layout {
        grid-template-columns: 1fr;
    }

    .multiplayer-create-sidebar {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        grid-template-rows: none;
        align-content: stretch;
    }

    .multiplayer-create-preview-stage {
        min-height: 260px;
    }
}

@media (max-width: 900px) {
    .multiplayer-create-screen {
        padding: 48px 16px 18px;
    }

    .multiplayer-create-header {
        flex-direction: column;
    }

    .multiplayer-create-heading h2 {
        white-space: normal;
    }

    .multiplayer-create-back {
        width: 100%;
        min-width: 0;
    }

    .multiplayer-create-sidebar {
        grid-template-columns: 1fr;
    }

    .multiplayer-create-setting-row {
        grid-template-columns: 64px minmax(0, 1fr);
        padding: 18px 18px;
    }

    .multiplayer-create-setting-control {
        grid-column: 1 / -1;
    }

    .multiplayer-create-setting-icon {
        width: 60px;
        height: 60px;
    }

    .multiplayer-create-setting-icon svg {
        width: 30px;
        height: 30px;
    }

    .multiplayer-create-submit,
    .multiplayer-create-cta {
        width: 100%;
        min-height: 74px;
        font-size: 20px;
        letter-spacing: 0.14em;
    }
}

@media (max-width: 640px) {
    .multiplayer-create-option-grid {
        grid-template-columns: 1fr;
    }

    .multiplayer-create-card-heading,
    .multiplayer-create-help-list {
        padding-left: 16px;
        padding-right: 16px;
    }

    .multiplayer-create-preview-hud {
        left: 12px;
        right: 12px;
        top: 12px;
        grid-template-columns: 1fr;
    }

    .multiplayer-create-preview-stage {
        min-height: 280px;
    }

    .multiplayer-create-help-item {
        font-size: 14px;
    }
}

.multiplayer-card .panel-title {
    margin: 0;
    color: rgba(220,238,255,0.78);
    font-size: 13px;
    letter-spacing: 0.1em;
}

.multiplayer-card small {
    display: block;
    margin-top: 8px;
    color: rgba(165,198,224,0.78);
    font-size: 12px;
    line-height: 1.55;
}

.multiplayer-instructions {
    color: rgba(220,238,255,0.82);
    font-size: 15px;
    line-height: 1.65;
}

.multiplayer-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 12px;
}

.multiplayer-field span,
.multiplayer-ready-row span,
.multiplayer-control-label,
.multiplayer-readonly-field span {
    color: rgba(145,205,240,0.84);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.multiplayer-field input,
.multiplayer-field select,
.multiplayer-field textarea {
    width: 100%;
    min-height: 40px;
    padding: 0 11px;
    border: 1px solid rgba(120,210,255,0.20);
    border-radius: 10px;
    color: #ffffff;
    background: rgba(255,255,255,0.055);
    outline: none;
    font-family: inherit;
}

.multiplayer-field input:focus,
.multiplayer-field select:focus,
.multiplayer-field textarea:focus {
    border-color: rgba(140,230,255,0.56);
    box-shadow: 0 0 15px rgba(80,180,255,0.18);
}

.multiplayer-field textarea {
    min-height: 92px;
    padding: 12px 11px;
    resize: vertical;
    line-height: 1.5;
}

.multiplayer-card--players,
.multiplayer-card--slot,
.multiplayer-card--host {
    display: flex;
    flex-direction: column;
}

.multiplayer-card--players,
.multiplayer-card--slot {
    gap: 16px;
}

.multiplayer-card--host {
    gap: 12px;
}

.multiplayer-lobby-capacity {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.multiplayer-count-display .setting-btn {
    pointer-events: none;
}

.multiplayer-ready-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 5px 0 13px;
}

.multiplayer-player-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.multiplayer-player-row {
    display: grid;
    grid-template-columns: 34px 58px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(100,180,255,0.12);
    border-radius: 14px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.05),
            rgba(255,255,255,0.025)
        );
}

.multiplayer-player-row strong {
    color: rgba(242,249,255,0.96);
    font-size: 13px;
    line-height: 1.3;
}

.multiplayer-player-row small {
    margin-top: 2px;
    color: rgba(145,180,210,0.74);
    font-size: 11px;
}

.multiplayer-player-row--empty {
    opacity: 0.78;
}

.multiplayer-player-seat {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(135,225,255,0.26);
    color: rgba(220,242,255,0.92);
    font-size: 12px;
    font-weight: 700;
    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(255,255,255,0.18),
            rgba(58,124,212,0.15)
        );
}

.multiplayer-player-avatar-shell,
.multiplayer-slot-avatar-shell {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 2px solid var(--multiplayer-player-colour, var(--multiplayer-slot-colour, rgba(110,190,255,0.42)));
    box-shadow:
        0 0 18px var(--multiplayer-player-colour, var(--multiplayer-slot-colour, rgba(90,174,255,0.36)));
    background:
        linear-gradient(
            180deg,
            rgba(10,24,48,0.92),
            rgba(3,8,18,0.96)
        );
}

.multiplayer-player-avatar-shell {
    width: 58px;
    height: 58px;
    --multiplayer-player-colour: rgba(110,190,255,0.42);
}

.multiplayer-player-avatar,
.multiplayer-slot-avatar {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
}

.multiplayer-player-avatar--empty {
    background:
        radial-gradient(
            circle at center,
            rgba(130,190,255,0.18),
            rgba(20,40,74,0.82)
        );
}

.multiplayer-player-copy {
    min-width: 0;
}

.multiplayer-player-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
}

.multiplayer-player-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.multiplayer-player-badge,
.multiplayer-player-state {
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.multiplayer-player-badge {
    border: 1px solid rgba(130,220,255,0.18);
    background: rgba(95,170,255,0.12);
    color: rgba(220,240,255,0.94);
}

.multiplayer-player-state {
    border: 1px solid rgba(130,220,255,0.12);
    background: rgba(255,255,255,0.04);
    color: rgba(178,208,230,0.92);
}

.multiplayer-player-state.is-ready {
    border-color: rgba(255,225,145,0.26);
    background: rgba(255,210,110,0.12);
    color: #fff1c2;
}

.multiplayer-player-state.is-pending {
    border-color: rgba(126,210,255,0.18);
    background: rgba(95,170,255,0.12);
    color: rgba(232,244,255,0.94);
}

.multiplayer-player-state.is-selected {
    border-color: rgba(122,214,255,0.18);
    background: rgba(78,158,255,0.10);
    color: rgba(230,244,255,0.94);
}

.multiplayer-slot-editor {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.multiplayer-identity-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(110,210,255,0.18);
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.06),
            rgba(255,255,255,0.02)
        );
}

.multiplayer-slot-avatar-shell {
    width: 96px;
    height: 96px;
}

.multiplayer-identity-copy {
    min-width: 0;
}

.multiplayer-slot-name {
    margin-top: 4px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
}

.multiplayer-slot-subtitle {
    margin-top: 6px;
    color: rgba(156,216,246,0.86);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.multiplayer-readonly-field,
.multiplayer-control-group {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.multiplayer-readonly-value {
    min-height: 44px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(120,210,255,0.16);
    background: rgba(255,255,255,0.05);
    color: #ffffff;
    font-size: 14px;
    line-height: 1.35;
}

.multiplayer-species-ribbon-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.multiplayer-species-scroll-btn {
    width: 34px;
    height: 78px;
    border: 1px solid rgba(120,205,255,0.22);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            180deg,
            rgba(11,22,46,0.94),
            rgba(5,12,28,0.96)
        );
    color: rgba(224,242,255,0.92);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.multiplayer-species-scroll-btn:disabled {
    opacity: 0.32;
    cursor: default;
}

.multiplayer-species-ribbon {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 0 6px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(100,180,255,0.38) transparent;
}

.multiplayer-species-ribbon::-webkit-scrollbar {
    height: 6px;
}

.multiplayer-species-ribbon::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(100,180,255,0.34);
}

button.multiplayer-species-card {
    min-width: 82px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
}

.multiplayer-species-card .species-card-portrait {
    width: 82px;
    height: 82px;
    background-size: 520%;
}

.multiplayer-species-card .species-card-name {
    margin-top: 6px;
    margin-right: 0;
    font-size: 9px;
    line-height: 1.15;
    letter-spacing: 0.04em;
}

.multiplayer-species-card.is-disabled,
.multiplayer-colour-button.is-disabled {
    opacity: 0.34;
    filter: grayscale(1);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.multiplayer-slot-colours {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

.multiplayer-colour-button:disabled {
    opacity: 0.34;
    filter: grayscale(1);
    cursor: not-allowed;
    transform: none;
    box-shadow:
        0 0 8px rgba(0,0,0,0.12);
}

.multiplayer-slot-hint {
    color: rgba(176,206,228,0.82);
    font-size: 12px;
    line-height: 1.55;
}

.multiplayer-slot-save,
.multiplayer-slot-leave {
    width: 100%;
}

.multiplayer-slot-save {
    margin-top: 0;
    min-height: 48px;
    border-radius: 12px;
    font-size: 12px;
}

.multiplayer-slot-leave {
    min-height: 42px;
}

.multiplayer-slot-invite {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(120,205,255,0.24);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8ecbff;
    background:
        linear-gradient(
            180deg,
            rgba(12,26,52,0.94),
            rgba(5,12,28,0.96)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04);
    cursor: pointer;
}

.multiplayer-slot-invite svg {
    width: 18px;
    height: 18px;
}

.multiplayer-slot-invite:hover,
.multiplayer-slot-invite:focus-visible {
    border-color: rgba(132,218,255,0.48);
    color: #dff3ff;
    box-shadow:
        0 0 18px rgba(64,140,255,0.22);
}

.multiplayer-start-submit {
    min-height: 68px;
}

.multiplayer-invites {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(100,180,255,0.10);
}

.multiplayer-created-game {
    margin-bottom: 15px;
    padding: 14px 16px;
    border: 1px solid rgba(130,230,170,0.28);
    border-radius: 14px;
    background: rgba(20,70,38,0.24);
}

.multiplayer-created-game strong,
.multiplayer-created-game small {
    display: block;
}

.multiplayer-created-game small {
    margin-top: 6px;
    color: rgba(190,230,205,0.78);
    font-size: 12px;
    line-height: 1.5;
}

.multiplayer-lobby-screen {
    overflow: hidden;
}

.multiplayer-lobby-stage {
    min-height: 0;
}

.multiplayer-lobby-layout {
    min-height: 0;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.92fr);
    gap: 18px;
}

.multiplayer-lobby-screen .multiplayer-card {
    padding: 0;
    overflow: hidden;
    border-color: rgba(110,190,255,0.16);
    background:
        linear-gradient(
            180deg,
            rgba(8,20,44,0.82),
            rgba(3,10,24,0.92)
        );
    box-shadow:
        inset 0 0 0 1px rgba(120,200,255,0.05),
        0 18px 34px rgba(0,0,0,0.26);
}

.multiplayer-lobby-screen .multiplayer-card--slot,
.multiplayer-lobby-screen .multiplayer-lobby-host-card,
.multiplayer-lobby-players-card {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.multiplayer-lobby-card-heading {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(90,165,255,0.12);
}

.multiplayer-lobby-card-heading h3 {
    margin: 0;
}

.multiplayer-lobby-card-heading small {
    margin: 0;
    justify-self: end;
    text-align: right;
}

.multiplayer-lobby-players-card,
.multiplayer-lobby-sidebar,
.multiplayer-lobby-command-card {
    min-height: 0;
}

.multiplayer-lobby-screen .multiplayer-slot-editor {
    grid-column: auto;
    grid-row: auto;
}

.multiplayer-lobby-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.multiplayer-player-list--lobby {
    flex: 1;
    align-content: start;
    padding: 14px;
}

.multiplayer-lobby-command-body,
.multiplayer-lobby-start-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px 18px;
}

.multiplayer-lobby-start-panel {
    padding-top: 0;
}

.multiplayer-lobby-start-panel .multiplayer-lobby-start-button {
    width: min(100%, 360px);
    align-self: center;
    min-height: 72px;
    font-size: 18px;
    letter-spacing: 0.12em;
}

.multiplayer-lobby-start-panel small {
    margin-top: 0;
    text-align: center;
}

.multiplayer-invite-modal {
    position: relative;
    width: min(92vw, 520px);
    text-align: left;
}

.multiplayer-invite-modal h3 {
    margin: 0;
    color: #ffffff;
    font-family:
        "Cinzel",
        Georgia,
        serif;
    font-size: 28px;
    line-height: 1.1;
    text-transform: uppercase;
}

.multiplayer-invite-copy {
    margin: 10px 0 0;
    color: rgba(204,223,242,0.88);
    font-size: 15px;
    line-height: 1.5;
}

.multiplayer-invite-status {
    min-height: 22px;
    margin: 14px 0 4px;
}

.multiplayer-invite-status:empty {
    display: none;
}

.multiplayer-invite-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(120,205,255,0.16);
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    color: rgba(232,244,255,0.92);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.multiplayer-invite-actions {
    margin-top: 18px;
}

@media (max-width: 900px) {
    .multiplayer-grid {
        grid-template-columns: 1fr;
    }

    .multiplayer-header {
        flex-direction: column;
    }

    .multiplayer-slot-editor {
        grid-column: auto;
        grid-row: auto;
    }

    .multiplayer-player-list {
        grid-template-columns: 1fr;
    }

    .multiplayer-lobby-layout {
        grid-template-columns: 1fr;
    }

    .multiplayer-lobby-screen {
        overflow-y: auto;
    }
}

@media (max-width: 640px) {
    .multiplayer-screen {
        padding: 18px;
    }

    .multiplayer-player-row {
        grid-template-columns: 30px 48px minmax(0, 1fr);
    }

    .multiplayer-player-state {
        grid-column: 2 / span 2;
        justify-self: start;
    }

    .multiplayer-identity-card {
        grid-template-columns: 74px minmax(0, 1fr);
    }

    .multiplayer-slot-avatar-shell {
        width: 74px;
        height: 74px;
    }

    .multiplayer-slot-name {
        font-size: 18px;
    }

    .multiplayer-species-card .species-card-portrait {
        width: 76px;
        height: 76px;
    }
}