:root {
    --sf-void: #030405;
    --sf-obsidian: #090b0d;
    --sf-panel: #101417;
    --sf-panel-2: #171c20;
    --sf-line: #323a40;
    --sf-line-soft: rgba(154, 167, 174, 0.2);
    --sf-steel: #aeb8bd;
    --sf-text: #e7eaeb;
    --sf-muted: #77828a;
    --sf-brass: #b4965c;
    --sf-danger: #8d443a;
}

html,
body {
    background: var(--sf-void);
    color: var(--sf-text);
    overscroll-behavior: none;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at 50% 40%, black, transparent 84%);
    z-index: 0;
}

.game-wrapper {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    height: 100dvh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at 50% 44%, rgba(92, 104, 111, 0.11), transparent 46%),
        linear-gradient(145deg, #080a0c, #030405 72%);
}

.game-header {
    min-height: 66px;
    padding: 8px 18px;
    flex-wrap: nowrap;
    gap: 14px;
    background: linear-gradient(180deg, rgba(18, 22, 25, 0.98), rgba(6, 8, 9, 0.98));
    border: 0;
    border-bottom: 1px solid var(--sf-line);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
}

.game-title {
    min-width: 330px;
    gap: 12px;
}

.header-logo {
    width: 46px;
    height: 46px;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.7));
}

.title-lockup {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.title-kicker {
    color: var(--sf-muted);
    font-size: 8px;
    letter-spacing: 0.28em;
    line-height: 1;
}

.title-text {
    color: #e4e8e9;
    background: none;
    -webkit-text-fill-color: currentColor;
    font-size: clamp(15px, 1.45vw, 23px);
    letter-spacing: 0.11em;
    line-height: 1;
    text-shadow: 0 2px 18px rgba(210, 220, 224, 0.12);
}

.header-stats {
    margin-left: auto;
    gap: 1px;
    border: 1px solid var(--sf-line);
    background: var(--sf-line);
}

.stat-box {
    min-width: 78px;
    padding: 7px 12px;
    border: 0;
    border-radius: 0;
    background: #0b0e10;
}

.stat-label {
    color: #667079;
    letter-spacing: 0.15em;
}

.stat-value,
.tooltip-value {
    color: #d9dfe1;
}

.game-header > .btn {
    padding: 9px 12px;
    border-color: var(--sf-line);
    font-size: 9px;
}

#mission-text {
    max-width: 180px;
    color: #a58e60;
    font-family: "Orbitron", sans-serif;
    font-size: 8px;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
}

.players-bar {
    min-height: 64px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 1px;
    padding: 0;
    overflow-x: auto;
    background: #07090a;
    border-bottom: 1px solid #252b2f;
}

.player-card {
    min-width: 190px;
    min-height: 63px;
    gap: 10px;
    padding: 8px 12px;
    border: 0;
    border-left: 2px solid;
    border-radius: 0;
    background: linear-gradient(110deg, #111518, #090b0d);
    opacity: 0.7;
}

.player-card.active {
    transform: none;
    opacity: 1;
    background: linear-gradient(110deg, #1b2125, #0c0f11);
    box-shadow: inset 0 -2px 0 currentColor;
}

.player-icon {
    width: 34px;
    height: 34px;
    border: 1px solid var(--command-color);
    border-radius: 0;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--command-color) 22%, #111), #080a0b) !important;
    color: #edf0f1;
    font-family: "Orbitron", sans-serif;
    font-size: 10px;
    letter-spacing: 0.04em;
    clip-path: polygon(16% 0, 84% 0, 100% 16%, 100% 84%, 84% 100%, 16% 100%, 0 84%, 0 16%);
}

.player-name {
    color: #e5e8e9;
    font-family: "Orbitron", sans-serif;
    font-size: 11px;
    letter-spacing: 0.06em;
}

.player-faction {
    color: #828e95;
    font-size: 9px;
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.player-stats {
    color: #5f6970;
    font-family: "Orbitron", sans-serif;
    font-size: 8px;
    letter-spacing: 0.05em;
}

.game-main {
    min-height: 0;
    background: #050708;
}

.map-container {
    min-height: 0 !important;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% 45%, rgba(105, 116, 122, 0.1), transparent 42%),
        #050708;
}

.map-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border: 1px solid rgba(160, 170, 176, 0.08);
    box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.68);
}

#map-canvas {
    cursor: crosshair;
}

.log-panel {
    width: 310px;
    background: linear-gradient(180deg, rgba(18, 22, 25, 0.98), rgba(7, 9, 10, 0.98));
    border-left: 1px solid var(--sf-line);
}

.log-header {
    min-height: 48px;
    padding: 8px 12px;
    background: #111518;
    border-bottom: 1px solid var(--sf-line);
}

.log-header h3 {
    color: var(--sf-steel);
    font-size: 10px;
    letter-spacing: 0.15em;
}

.log-content {
    padding: 9px;
    color: #8f999f;
}

.log-entry {
    margin: 0 0 3px;
    padding: 7px 9px;
    border: 0;
    border-left: 2px solid #414a4f;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.018);
    line-height: 1.35;
}

.sidebar-toggle {
    left: -31px;
    width: 30px;
    height: 68px;
    color: #9aa4a9;
    background: #111518;
    border-color: var(--sf-line);
    border-radius: 0;
}

.control-bar {
    min-height: 54px;
    justify-content: flex-start;
    gap: 6px;
    padding: 8px 14px;
    overflow-x: auto;
    background: linear-gradient(180deg, #13171a, #080a0c);
    border-top: 1px solid var(--sf-line);
}

.btn,
.attack-confirm-btn {
    min-height: 36px;
    padding: 8px 15px;
    border: 1px solid #384147;
    border-radius: 0;
    background: linear-gradient(180deg, #20262a, #111518);
    color: #d8dddf;
    font-family: "Orbitron", sans-serif;
    font-size: 9px;
    letter-spacing: 0.1em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.btn:hover,
.attack-confirm-btn:hover {
    transform: none;
    border-color: #7f8b91;
    background: linear-gradient(180deg, #2b3237, #171c20);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.btn-primary,
.btn-success,
.attack-confirm-btn {
    border-color: #8d7a53;
    background: linear-gradient(180deg, #6f5d3d, #3d3222);
    color: #f2ede2;
}

.btn-danger {
    margin-left: auto;
    border-color: #6d3933;
    background: linear-gradient(180deg, #542f2b, #291817);
}

.game-footer {
    padding: 6px 14px;
    background: #030405;
    border-top: 1px solid #1e2326;
    color: #4e585e;
    font-family: "Orbitron", sans-serif;
    font-size: 8px;
    letter-spacing: 0.1em;
}

.territory-tooltip {
    padding: 12px 14px;
    border: 1px solid #4b555b;
    border-radius: 0;
    background: rgba(10, 13, 15, 0.97);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.8);
}

.tooltip-color {
    border-radius: 0;
    transform: rotate(45deg);
}

.modal {
    padding: 22px;
    overflow: auto;
    background:
        radial-gradient(circle at 50% 30%, rgba(104, 115, 121, 0.14), transparent 44%),
        rgba(2, 3, 4, 0.94);
    backdrop-filter: blur(10px);
}

.modal-content {
    max-height: calc(100dvh - 44px);
    overflow: auto;
    border: 1px solid #40494f;
    border-radius: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.025), transparent 32%),
        linear-gradient(180deg, #151a1d, #090b0d);
    box-shadow: 0 35px 100px rgba(0, 0, 0, 0.9);
}

.modal-content h2 {
    color: #e4e7e8;
    background: none;
    -webkit-text-fill-color: currentColor;
    font-size: 25px;
    letter-spacing: 0.08em;
}

.modal-content .subtitle {
    color: #7b858b;
}

#dice-3d-container canvas {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#attack-modal .modal-content {
    width: min(760px, 94vw);
    max-width: 760px;
    padding: 28px 32px;
}

#attack-modal .modal-content > h2 {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--sf-line);
    text-align: left;
}

.battle-display {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr);
    gap: 12px;
}

.territory-panel {
    min-height: 112px;
    padding: 17px 18px;
    border: 1px solid #3c454a;
    border-radius: 0;
    background: #0b0e10;
    text-align: left;
}

.territory-panel.attacker {
    border-color: #70463e;
}

.territory-panel.defender {
    border-color: #465a6c;
}

.territory-icon {
    margin: 0 0 14px;
    color: #6e787e;
    font-family: "Orbitron", sans-serif;
    font-size: 8px;
    letter-spacing: 0.16em;
}

.territory-name {
    color: #e1e5e6;
    font-family: "Orbitron", sans-serif;
    font-size: 13px;
}

.territory-troops {
    margin-top: 8px;
    color: #8c989e;
    font-family: "Orbitron", sans-serif;
    font-size: 10px;
    letter-spacing: 0.08em;
}

.territory-troops span {
    color: #e6e9ea;
    font-size: 18px;
}

.battle-vs {
    color: #6f797e;
    font-size: 11px;
    letter-spacing: 0.1em;
}

.win-prob {
    margin-top: 8px;
    font-size: 17px;
}

.attack-troops-section {
    margin: 14px 0;
    padding: 16px 18px;
    border: 1px solid #473b2d;
    border-radius: 0;
    background: #15120e;
}

.attack-troops-label {
    color: #8e979c;
}

.attack-troops-label span {
    color: #c5a665;
}

.attack-slider {
    height: 4px;
    border-radius: 0;
    background: #55452d;
}

.attack-slider::-webkit-slider-thumb {
    width: 19px;
    height: 19px;
    border: 2px solid #d2bd8c;
    border-radius: 0;
    background: #77613d;
    box-shadow: 0 0 0 3px #15120e;
    transform: rotate(45deg);
}

.defense-options {
    margin: 16px 0;
}

.defense-options h4 {
    margin: 0 0 9px;
    color: #879198;
    font-family: "Orbitron", sans-serif;
    font-size: 9px;
    letter-spacing: 0.14em;
}

.defense-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.defense-btn {
    min-height: 74px;
    padding: 10px;
    border: 1px solid #323a3f;
    border-radius: 0;
    background: #0b0e10;
    color: #929ca1;
    text-align: left;
    cursor: pointer;
}

.defense-btn.active {
    border-color: #9e875a;
    background: #1b1711;
    color: #ece8de;
    box-shadow: inset 0 -2px 0 #9e875a;
}

.stance-index {
    margin-bottom: 6px;
    color: #596269;
    font-family: "Orbitron", sans-serif;
    font-size: 8px;
}

.stance-name {
    font-family: "Orbitron", sans-serif;
    font-size: 9px;
    text-transform: uppercase;
}

.stance-desc {
    margin-top: 4px;
    color: #667077;
    font-size: 10px;
}

.dice-section {
    min-height: 30px;
    margin: 10px 0;
}

.dice-row {
    margin: 4px 0;
    color: #8b959b;
    font-family: "Orbitron", sans-serif;
    font-size: 9px;
}

.dice-buttons {
    gap: 6px;
    margin: 8px 0;
}

.dice-btn,
.dice-btn.blitz {
    width: auto;
    min-width: 78px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #414a4f;
    border-radius: 0;
    background: #111518;
    color: #b3bcc0;
    font-family: "Orbitron", sans-serif;
    font-size: 8px;
    letter-spacing: 0.08em;
}

.dice-btn.blitz {
    border-color: #6e4038;
    background: #321d1a;
    color: #d9bbb5;
}

.attack-actions + div {
    margin-top: 8px !important;
}

#setup-modal {
    align-items: center;
}

#setup-modal::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.3) 48%, rgba(0, 0, 0, 0.82)),
        radial-gradient(circle at 70% 34%, rgba(155, 162, 165, 0.15), transparent 28%);
}

#setup-modal .modal-content {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 22px;
    width: min(1120px, 96vw);
    max-width: 1120px;
    padding: 34px 38px;
}

#setup-modal .modal-content > h2,
#setup-modal .modal-content > .subtitle,
#setup-modal .modal-content > .form-row,
#setup-modal .modal-content > .game-mode-buttons {
    grid-column: 1 / -1;
}

#setup-modal .modal-content > h2 {
    margin: 0;
    text-align: left;
}

#setup-modal .modal-content > .subtitle {
    margin: -8px 0 10px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--sf-line);
    text-align: left;
}

.form-group {
    margin: 0;
}

.form-group label {
    color: #8f9aa0;
    font-family: "Orbitron", sans-serif;
    font-size: 9px;
    letter-spacing: 0.13em;
}

.form-group input[type="text"],
.form-group select {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #343c41;
    border-radius: 0;
    background: #090b0d;
    color: #d9dddf;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #7d898f;
    box-shadow: 0 0 0 1px #7d898f;
}

.color-option {
    width: 31px;
    height: 31px;
    border-radius: 0;
    clip-path: polygon(20% 0, 80% 0, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0 80%, 0 20%);
}

.color-option.selected {
    border-color: #e7eaeb;
    box-shadow: 0 0 0 2px #101315, 0 0 0 3px #b6c0c4;
}

.form-row {
    gap: 8px;
    margin: 0;
}

.checkbox-label {
    flex: 1;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #30373c;
    background: #0b0e10;
    color: #aeb6ba;
    font-size: 11px;
}

.checkbox-label input[type="checkbox"] {
    accent-color: #9c875c;
}

.hostile-protocol {
    margin-top: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.hostile-protocol .checkbox-label {
    border-color: #563c34;
    background: #17110f;
}

.game-mode-buttons {
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid var(--sf-line);
}

.game-mode-buttons .btn {
    min-height: 50px;
}

@media (max-width: 1180px) {
    .game-title {
        min-width: 255px;
    }

    .game-header > .btn {
        display: none;
    }

    .log-panel {
        width: 270px;
    }
}

@media (max-width: 800px) {
    .game-wrapper {
        grid-template-rows: auto auto minmax(0, 1fr) auto;
    }

    .game-header {
        min-height: 54px;
        padding: 6px 9px;
    }

    .game-title {
        min-width: 0;
    }

    .header-logo {
        width: 35px;
        height: 35px;
    }

    .title-kicker {
        display: none;
    }

    .title-text {
        font-size: 12px;
    }

    .header-stats .stat-box:nth-child(3),
    .header-stats .gold-box {
        display: none;
    }

    .stat-box {
        min-width: 58px;
        padding: 5px 7px;
    }

    .stat-value {
        font-size: 12px;
    }

    .players-bar {
        min-height: 52px;
    }

    .player-card {
        min-width: 158px;
        min-height: 51px;
        padding: 5px 8px;
    }

    .player-icon {
        width: 28px;
        height: 28px;
    }

    .player-faction {
        display: none;
    }

    .log-panel,
    .game-footer {
        display: none;
    }

    .control-bar {
        min-height: 48px;
        padding: 6px 8px;
    }

    .control-bar .btn {
        min-height: 34px;
        padding: 7px 10px;
        white-space: nowrap;
    }

    #setup-modal {
        align-items: flex-start;
        padding: 10px;
    }

    #setup-modal .modal-content {
        display: block;
        width: 100%;
        max-height: none;
        padding: 22px 18px;
    }

    #setup-modal .modal-content > * {
        margin-bottom: 15px;
    }

    .form-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .game-mode-buttons {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Command uplink: replaces the inherited messenger/neon multiplayer shell. */
#multiplayer-modal {
    align-items: center;
    background:
        radial-gradient(circle at 50% 35%, rgba(119, 103, 75, 0.1), transparent 38%),
        rgba(2, 4, 5, 0.94);
    padding: 22px;
}

#multiplayer-modal .multiplayer-modal {
    position: relative;
    width: min(1120px, 96vw);
    max-width: 1120px !important;
    max-height: min(850px, 94vh) !important;
    overflow: auto;
    padding: 0 !important;
    border: 1px solid #40474c !important;
    border-radius: 0 !important;
    background:
        linear-gradient(135deg, rgba(116, 96, 61, 0.07), transparent 34%),
        #0b0f11 !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.78);
}

#multiplayer-modal .multiplayer-modal::before,
.create-room-dialog .dialog-content::before {
    content: "";
    position: absolute;
    inset: 8px;
    pointer-events: none;
    border: 1px solid rgba(173, 157, 121, 0.12);
}

.multiplayer-header {
    min-height: 104px;
    margin: 0 !important;
    padding: 24px 30px;
    border-bottom: 1px solid #30373b;
    background: linear-gradient(90deg, #11171a, #0b0f11 72%);
}

.multiplayer-header h2,
.room-browser-header h3,
.lobby-header h3,
.create-room-dialog h3 {
    margin: 6px 0 0 !important;
    color: #d9dddc !important;
    font-family: var(--font-command);
    font-weight: 600;
    letter-spacing: 0.12em;
}

.multiplayer-header h2 {
    font-size: clamp(25px, 3vw, 41px);
}

.section-kicker {
    color: #9b865f;
    font-family: var(--font-command);
    font-size: 10px;
    letter-spacing: 0.22em;
}

#multiplayer-content {
    padding: 26px 30px 18px;
}

.multiplayer-view {
    min-height: 410px;
}

.room-browser-header {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    margin-bottom: 20px;
}

.room-browser-header h3 {
    font-size: 22px;
}

.room-filters {
    gap: 10px;
    padding: 12px;
    border: 1px solid #293035;
    background: #080b0d;
}

.room-search,
#room-filter,
.create-room-dialog input,
.create-room-dialog select {
    min-height: 46px;
    border: 1px solid #353d42 !important;
    border-radius: 0 !important;
    background: #070a0c !important;
    color: #cdd2d1 !important;
    font-family: var(--font-ui);
}

.rooms-list {
    max-height: 350px;
    padding-right: 6px;
}

.room-item {
    min-height: 94px;
    margin-bottom: 8px;
    padding: 17px 18px;
    border: 1px solid #30383d !important;
    border-left: 3px solid #716044 !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, #101518, #0b0f11) !important;
    transition: border-color 140ms ease, transform 140ms ease !important;
}

.room-item:hover {
    border-color: #78694e !important;
    background: linear-gradient(90deg, #141a1d, #0d1113) !important;
    transform: translateX(3px);
}

.room-item.empty {
    justify-content: center;
    border-left-color: #384045 !important;
    color: #788086;
    letter-spacing: 0.08em;
}

.room-name {
    margin-bottom: 9px;
    color: #e1e4e2;
    font-family: var(--font-command);
    font-size: 17px;
    letter-spacing: 0.06em;
}

.room-details,
.room-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: #879096;
    font-family: var(--font-ui);
    font-size: 10px;
    letter-spacing: 0.08em;
}

.status-playing,
.status-waiting,
.room-locked {
    color: #aa956d;
}

.connection-status {
    min-height: 38px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #293035;
    background: #080b0d;
    color: #8d969a;
    font-family: var(--font-ui);
    font-size: 10px;
    letter-spacing: 0.12em;
}

.connection-status [data-state="connected"] {
    color: #a7b29a;
}

.connection-status [data-state="disconnected"] {
    color: #b27b73;
}

.lobby-header {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #2d3438;
}

.lobby-info {
    color: #8e989d;
    font-family: var(--font-ui);
    font-size: 10px;
    letter-spacing: 0.09em;
}

.lobby-content {
    gap: 12px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.players-section,
.spectators-section,
.game-settings {
    padding: 18px;
    border: 1px solid #2d3438;
    background: #080c0e;
}

.players-section h4,
.spectators-section h4,
.game-settings h4,
.chat-header h4 {
    margin: 0 0 14px !important;
    color: #a99773 !important;
    font-family: var(--font-command);
    font-size: 11px;
    letter-spacing: 0.16em;
}

.player-item,
.spectator-item {
    border: 1px solid #293136;
    border-radius: 0 !important;
    background: #0e1316 !important;
}

.player-item.host {
    border-color: #766548 !important;
}

.player-avatar,
.spectator-avatar {
    border: 1px solid #646e72;
    border-radius: 0 !important;
    background: #1a2226 !important;
    color: #d8dcda;
    font-family: var(--font-command);
}

.player-name {
    color: #d8dcda;
    font-family: var(--font-ui);
    letter-spacing: 0.05em;
}

.host-mark,
.player-status {
    color: #9e8a63;
    font-size: 9px;
    letter-spacing: 0.11em;
}

.settings-grid label {
    min-height: 38px;
    padding: 8px;
    border: 1px solid #282f33;
    color: #9da5a8;
    background: #0b0f11;
}

.settings-grid input[type="checkbox"] {
    accent-color: #806d49;
}

.chat-panel {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: 190px !important;
    margin: 0 30px 28px;
    border: 1px solid #30383d !important;
    border-radius: 0 !important;
    background: #080b0d !important;
}

.chat-panel.minimized {
    height: 48px !important;
}

.chat-header {
    min-height: 46px;
    padding: 13px 15px;
    border-bottom-color: #293035 !important;
    background: #0e1316;
}

.chat-header h4 {
    margin: 0 !important;
}

.chat-toggle {
    border: 0;
    background: none;
    color: #a8afb1;
    font-size: 18px;
}

.chat-message {
    display: flex;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: 11px;
}

.chat-sender {
    color: #a99773 !important;
}

.chat-text {
    color: #b7bdbe !important;
}

.chat-input {
    padding: 9px 12px !important;
    border-top-color: #293035 !important;
}

.chat-input input {
    min-height: 38px;
    border: 1px solid #343c40 !important;
    border-radius: 0 !important;
    background: #050708 !important;
    color: #d4d8d7 !important;
}

.create-room-dialog {
    padding: 18px;
    background: rgba(0, 0, 0, 0.22);
}

.create-room-dialog .dialog-overlay {
    background: rgba(1, 3, 4, 0.9);
    backdrop-filter: blur(5px);
}

.create-room-dialog .dialog-content {
    max-width: 470px;
    padding: 30px;
    border: 1px solid #424a4e;
    border-radius: 0;
    background: #0b0f11;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.74);
}

.create-room-dialog .form-group {
    display: grid;
    gap: 7px;
    margin-top: 16px;
}

.create-room-dialog label {
    color: #8d969a;
    font-family: var(--font-ui);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 24px;
}

@media (max-width: 700px) {
    #multiplayer-modal {
        align-items: flex-start;
        padding: 8px;
    }

    #multiplayer-modal .multiplayer-modal {
        width: 100%;
        max-height: calc(100vh - 16px) !important;
    }

    .multiplayer-header,
    #multiplayer-content {
        padding: 18px;
    }

    .multiplayer-header {
        align-items: flex-start;
        gap: 12px;
    }

    .room-browser-header {
        grid-template-columns: 1fr 1fr;
    }

    .room-browser-header > div {
        grid-column: 1 / -1;
    }

    .room-filters,
    .lobby-header,
    .lobby-content {
        display: grid;
        grid-template-columns: 1fr;
    }

    .game-settings {
        grid-column: auto;
    }

    .room-item {
        align-items: flex-start;
        gap: 12px;
    }

    .chat-panel {
        margin: 0 18px 18px;
    }
}