:root {
    color-scheme: dark;

    --background: #0c0f13;
    --panel: #14191f;
    --panel-2: #1a2027;
    --border: #29313a;
    --text: #f3f5f7;
    --muted: #9ca8b5;
    --accent: #6d8caf;
    --accent-hover: #819fbe;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;

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

    background: var(--background);
    color: var(--text);
}

.header {
    min-height: 68px;

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

    padding: 0 32px;

    background: #101419;

    border-bottom:
        1px solid var(--border);
}

.brand {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

nav {
    display: flex;
    gap: 10px;
}

nav a {
    text-decoration: none;
    color: var(--muted);

    padding: 10px 14px;

    border-radius: 8px;
}

nav a:hover {
    background: var(--panel-2);
    color: var(--text);
}

.container {
    width: min(1200px, calc(100% - 32px));
    margin: auto;

    padding: 40px 0 80px;
}

.hero {
    min-height: 300px;

    display: flex;
    align-items: center;

    padding: 50px;

    margin-bottom: 50px;

    background:
        linear-gradient(
            135deg,
            #171d24,
            #11151a
        );

    border: 1px solid var(--border);
    border-radius: 18px;
}

.hero h1 {
    font-size: clamp(48px, 8vw, 88px);
    margin: 4px 0;
}

.subtitle {
    color: var(--muted);
    font-size: 19px;
    margin-bottom: 30px;
}

.eyebrow {
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-bottom: 20px;
}

.section-header a:not(.button) {
    color: var(--accent-hover);
}

.deck-grid,
.feature-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(240px, 1fr)
        );

    gap: 16px;
}

.card,
.feature,
.empty,
.deck-form {
    background: var(--panel);

    border: 1px solid var(--border);
    border-radius: 12px;
}

.card {
    padding: 22px;
}

.card h3 {
    margin: 14px 0 8px;
}

.card p,
.card small,
.feature span {
    color: var(--muted);
}

.format {
    display: inline-block;

    padding: 5px 9px;

    font-size: 12px;
    font-weight: 700;

    background: var(--panel-2);

    border: 1px solid var(--border);
    border-radius: 100px;
}

.button {
    display: inline-block;

    padding: 11px 18px;

    background: var(--accent);

    border: 0;
    border-radius: 8px;

    color: #081018;
    font-weight: 800;
    text-decoration: none;

    cursor: pointer;
}

.button:hover {
    background: var(--accent-hover);
}

.coming {
    margin-top: 60px;
}

.feature {
    padding: 20px;

    display: flex;
    flex-direction: column;

    gap: 8px;
}

.empty {
    padding: 50px;

    text-align: center;
    color: var(--muted);
}

.form-page {
    max-width: 700px;
    margin: auto;
}

.deck-form {
    padding: 28px;

    display: flex;
    flex-direction: column;

    gap: 22px;
}

label {
    display: flex;
    flex-direction: column;

    gap: 8px;

    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;

    background: #0f1419;
    color: var(--text);

    border: 1px solid var(--border);
    border-radius: 8px;

    padding: 12px;

    font: inherit;
}

input:focus,
select:focus,
textarea:focus {
    outline: 1px solid var(--accent);
}

textarea {
    resize: vertical;
}

.info-box {
    padding: 14px;

    background: #101820;

    border:
        1px solid var(--border);

    border-radius: 8px;

    color: var(--muted);
}

@media (max-width: 700px) {
    .header {
        padding: 16px;

        flex-direction: column;
        align-items: flex-start;

        gap: 12px;
    }

    nav {
        width: 100%;

        overflow-x: auto;
    }

    .hero {
        padding: 30px 24px;
    }

    .section-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

.deck-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    gap: 22px;
    align-items: start;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 22px;
}

.sticky {
    position: sticky;
    top: 20px;
}

.card-entry-form {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 100px 160px auto;
    gap: 12px;
    align-items: end;
}

.card-list {
    display: flex;
    flex-direction: column;
}

.card-row {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border);
}

.card-row:last-child {
    border-bottom: 0;
}

.zone-label {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.delete-button {
    border: 1px solid #63383c;
    background: #2a1719;
    color: #efb5ba;
    border-radius: 7px;
    padding: 7px 10px;
    cursor: pointer;
}

.delete-button:hover {
    background: #3a1d20;
}

.rule-counts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}

.rule-counts div {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rule-counts span {
    color: var(--muted);
    font-size: 11px;
}

.rule-counts strong {
    font-size: 22px;
}

.rule-message {
    margin: 8px 0;
    padding: 11px 12px;
    border-radius: 8px;
    line-height: 1.45;
}

.rule-message.error {
    background: #30191c;
    border: 1px solid #69343b;
}

.rule-message.warning {
    background: #302919;
    border: 1px solid #665634;
}

.rule-message.success {
    background: #173022;
    border: 1px solid #315e43;
}

.structural-ok {
    margin-top: 14px;
    padding: 12px;
    background: #173022;
    border: 1px solid #315e43;
    border-radius: 8px;
    font-weight: 700;
}

.rule-note {
    margin-top: 18px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.count-badge {
    padding: 6px 10px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--muted);
}

.compact {
    padding: 25px;
}

.clickable-card {
    position: relative;
}

.card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.clickable-card:hover {
    border-color: var(--accent);
}

@media (max-width: 950px) {
    .deck-detail-grid {
        grid-template-columns: 1fr;
    }

    .sticky {
        position: static;
    }

    .card-entry-form {
        grid-template-columns: 1fr 100px;
    }
}

@media (max-width: 600px) {
    .card-entry-form {
        grid-template-columns: 1fr;
    }

    .rule-counts {
        grid-template-columns: 1fr;
    }
}

.card-search-wrapper {
    position: relative;
}

.card-results {
    position: absolute;
    z-index: 50;
    top: 100%;
    left: 0;
    right: 0;

    display: none;

    max-height: 360px;
    overflow-y: auto;

    background: #101419;

    border: 1px solid var(--border);
    border-radius: 8px;

    box-shadow:
        0 16px 40px
        rgba(0, 0, 0, 0.45);
}

.card-results.visible {
    display: block;
}

.card-result {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 4px;

    padding: 11px 12px;

    background: transparent;
    color: var(--text);

    border: 0;
    border-bottom:
        1px solid var(--border);

    text-align: left;
    cursor: pointer;
}

.card-result:hover {
    background: var(--panel-2);
}

.card-result span {
    color: var(--muted);
    font-size: 12px;
}

.deck-card-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mini-card-image {
    width: 42px;
    height: 59px;

    object-fit: cover;

    border-radius: 4px;
}

.mana-cost {
    margin-left: 8px;
    color: var(--muted);
    font-size: 12px;
}

.legality {
    display: inline-block;

    margin-top: 5px;
    padding: 3px 7px;

    border-radius: 20px;

    font-size: 10px;
    font-weight: 700;
}

.legality-legal {
    background: #173022;
    color: #9fe0b7;
}

.legality-restricted {
    background: #302919;
    color: #e6ce8b;
}

.legality-banned,
.legality-not_legal {
    background: #30191c;
    color: #efb5ba;
}

.deck-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.secondary-button {
    display: inline-block;
    padding: 11px 18px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}

.secondary-button:hover {
    border-color: var(--accent);
}

.analysis-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(160px, 1fr)
        );
    gap: 14px;
    margin-bottom: 22px;
}

.stat-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.stat-card span {
    color: var(--muted);
}

.stat-card strong {
    font-size: 30px;
}

.analysis-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.analysis-row:last-child {
    border-bottom: 0;
}

.mana-curve {
    height: 250px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 10px;
    padding-top: 20px;
}

.mana-column {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
}

.mana-bar {
    width: min(48px, 80%);
    min-height: 5px;
    max-height: 180px;
    background: var(--accent);
    border-radius: 6px 6px 2px 2px;
}

.mana-column span {
    color: var(--muted);
}

.color-grid {
    display: grid;
    grid-template-columns:
        repeat(5, 1fr);
    gap: 10px;
}

.color-stat {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}

.color-stat strong {
    display: block;
    font-size: 22px;
}

.color-stat span {
    color: var(--muted);
}

.brand {
    color: var(--text);
    text-decoration: none;
}

.account-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logout-button {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--muted);
    padding: 7px 10px;
    cursor: pointer;
}

.login-page {
    min-height: 70vh;

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

.login-card {
    width: min(460px, 100%);

    padding: 30px;

    background: var(--panel);

    border: 1px solid var(--border);
    border-radius: 16px;
}

.collection-form {
    display: grid;

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

    gap: 16px;
}

.collection-form .full-width {
    grid-column: 1 / -1;
}

.collection-row {
    min-height: 72px;

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

    gap: 18px;

    padding: 12px 0;

    border-bottom:
        1px solid var(--border);
}

.collection-row:last-child {
    border-bottom: 0;
}

.collection-actions {
    display: flex;
    align-items: center;

    gap: 8px;
}

.collection-actions form {
    display: flex;
    align-items: center;

    gap: 6px;
}

.quantity-input {
    width: 72px;
}

.user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 12px 0;

    border-bottom:
        1px solid var(--border);
}

.user-row span {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 12px;
}

.checkbox-row {
    flex-direction: row;
    align-items: center;
}

.checkbox-row input {
    width: auto;
}

@media (max-width: 800px) {

    .header {
        gap: 14px;
    }

    .account-area {
        width: 100%;
        justify-content: space-between;
    }

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

    .collection-form .full-width {
        grid-column: auto;
    }

    .collection-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .collection-actions {
        width: 100%;
        justify-content: space-between;
    }
}

.admin-badge {
    padding: 4px 8px;

    background: #2a2020;

    border: 1px solid #604040;
    border-radius: 100px;

    color: #e9b0b0;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.8px;
}

.server-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 14px 0;

    border-bottom: 1px solid var(--border);
}

.server-row:last-child {
    border-bottom: 0;
}

.server-row span {
    display: block;

    margin-top: 4px;

    color: var(--muted);
}

.service-online,
.service-offline {
    padding: 5px 9px;

    border-radius: 100px;

    font-size: 11px;
    font-weight: 900;
}

.service-online {
    background: #173022 !important;
    color: #9fe0b7 !important;

    border: 1px solid #315e43;
}

.service-offline {
    background: #30191c !important;
    color: #efb5ba !important;

    border: 1px solid #69343b;
}

.server-log {
    max-height: 420px;

    overflow: auto;

    margin: 0;

    padding: 16px;

    background: #090c0f;
    color: #c9d2dc;

    border: 1px solid var(--border);
    border-radius: 8px;

    font-family:
        "Cascadia Code",
        "Consolas",
        monospace;

    font-size: 12px;
    line-height: 1.45;

    white-space: pre-wrap;
    word-break: break-word;
}

.error-log {
    color: #efb5ba;
}

.admin-create-user {
    display: grid;

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

    gap: 16px;

    align-items: end;
}

.admin-user-card {
    margin-top: 22px;
}

.admin-user-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding-bottom: 18px;

    border-bottom:
        1px solid var(--border);
}

.admin-user-header h2 {
    margin: 0 0 5px;
}

.admin-user-header > div > span {
    color: var(--muted);

    font-size: 12px;
}

.user-status-badges {
    display: flex;
    gap: 7px;
    align-items: center;
}

.admin-user-grid {
    display: grid;

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

    gap: 28px;

    padding: 22px 0;
}

.admin-user-grid h3 {
    margin-top: 0;
}

.admin-user-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding-top: 18px;

    border-top:
        1px solid var(--border);
}

.admin-user-footer > div {
    display: flex;
    flex-direction: column;

    gap: 5px;

    color: var(--muted);

    font-size: 12px;
}

.danger-button {
    padding: 10px 14px;

    background: #37191d;

    border:
        1px solid #783a42;

    border-radius: 8px;

    color: #f1b7bc;

    font-weight: 700;

    cursor: pointer;
}

.danger-button:hover {
    background: #4b2025;
}

@media (max-width: 850px) {

    .admin-create-user {
        grid-template-columns: 1fr;
    }

    .admin-user-grid {
        grid-template-columns: 1fr;
    }

    .admin-user-header,
    .admin-user-footer {
        align-items: flex-start;
        flex-direction: column;
    }

}

.server-service-row {
    display: grid;

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

    align-items: center;

    gap: 18px;

    padding: 18px 0;

    border-bottom:
        1px solid var(--border);
}

.server-service-row:last-child {
    border-bottom: 0;
}

.server-service-info {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.server-service-info strong {
    font-size: 17px;
}

.server-service-info span {
    color: var(--muted);

    font-size: 12px;
}

.server-service-state {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}

.service-controls {
    display: flex;
    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 7px;
}

.service-controls form {
    margin: 0;
}

.service-start-button,
.service-stop-button,
.service-restart-button {
    padding: 9px 12px;

    border-radius: 7px;

    font-weight: 700;

    cursor: pointer;
}

.service-start-button {
    background: #173022;
    color: #9fe0b7;

    border:
        1px solid #315e43;
}

.service-stop-button {
    background: #37191d;
    color: #f1b7bc;

    border:
        1px solid #783a42;
}

.service-restart-button {
    background: #302919;
    color: #e6ce8b;

    border:
        1px solid #665634;
}


@media (max-width: 900px) {

    .server-service-row {
        grid-template-columns: 1fr;
    }

    .service-controls {
        justify-content: flex-start;
    }

}

.statistics-run-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.statistics-run-header h2 {
    margin-bottom: 5px;
}

.simulation-selector {
    display: flex;
    align-items: end;

    gap: 10px;
}

.simulation-selector label {
    min-width: 150px;
}

.statistics-table {
    margin-top: 20px;
}

.statistics-table-header,
.statistics-table-row {
    display: grid;

    grid-template-columns:
        80px
        minmax(220px, 1fr)
        160px;

    align-items: center;

    gap: 18px;

    padding: 11px 0;

    border-bottom:
        1px solid var(--border);
}

.statistics-table-header {
    color: var(--muted);

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;
}

.statistics-table-row > div {
    display: grid;

    grid-template-columns:
        minmax(100px, 1fr)
        70px;

    align-items: center;

    gap: 10px;
}

.probability-bar {
    width: 100%;
    height: 8px;

    overflow: hidden;

    background: #10151a;

    border:
        1px solid var(--border);

    border-radius: 100px;
}

.probability-fill {
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #557cff,
            #7da2ff
        );

    border-radius: 100px;
}

.opening-distribution {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(100px, 1fr)
        );

    gap: 12px;

    margin-top: 18px;
}

.opening-land-card {
    display: flex;
    flex-direction: column;

    gap: 7px;

    padding: 14px;

    background: var(--panel-2);

    border:
        1px solid var(--border);

    border-radius: 9px;
}

.opening-land-card strong {
    font-size: 25px;
}

.opening-land-card span,
.opening-land-card small {
    color: var(--muted);
}

.key-probability-table {
    margin-top: 18px;

    overflow-x: auto;
}

.key-probability-header,
.key-probability-row {
    min-width: 720px;

    display: grid;

    grid-template-columns:
        minmax(220px, 1fr)
        70px
        100px
        100px
        100px
        100px;

    align-items: center;

    gap: 12px;

    padding: 11px 0;

    border-bottom:
        1px solid var(--border);
}

.key-probability-header {
    color: var(--muted);

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;
}


@media (max-width: 800px) {

    .statistics-run-header {
        align-items: stretch;
        flex-direction: column;
    }

    .simulation-selector {
        align-items: stretch;
        flex-direction: column;
    }

    .statistics-table-header,
    .statistics-table-row {
        grid-template-columns:
            50px
            minmax(150px, 1fr)
            100px;
    }

    .opening-distribution {
        grid-template-columns:
            repeat(
                2,
                minmax(100px, 1fr)
            );
    }

}

.playtest-page {
    width: 100%;
}

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

    gap: 20px;

    margin-bottom: 20px;
}

.playtest-header-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.playtest-controls {
    display: flex;
    flex-wrap: wrap;

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

    gap: 16px;

    margin-bottom: 18px;

    padding: 15px;

    background: var(--panel);

    border: 1px solid var(--border);
    border-radius: 12px;
}

.life-control,
.turn-control,
.game-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;
}

.life-control > span,
.turn-control > span {
    margin-right: 4px;

    color: var(--muted);

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;
}

.life-control strong {
    min-width: 58px;

    text-align: center;

    font-size: 28px;
}

.turn-control strong {
    min-width: 35px;

    text-align: center;

    font-size: 22px;
}

.life-control button {
    min-width: 38px;
    height: 36px;

    border: 1px solid var(--border);
    border-radius: 7px;

    background: var(--panel-2);
    color: var(--text);

    cursor: pointer;
}

.mulligan-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}

.mulligan-panel h2 {
    margin: 0 0 6px;
}

.mulligan-panel p {
    margin: 0;

    color: var(--muted);
}

.mulligan-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.mulligan-actions button:disabled {
    opacity: 0.4;

    cursor: not-allowed;
}

.playtest-message {
    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 1000;

    max-width: 360px;

    padding: 12px 16px;

    opacity: 0;
    pointer-events: none;

    transform:
        translateY(
            15px
        );

    background: #17231b;

    border: 1px solid #315e43;
    border-radius: 8px;

    color: #b8e7c8;

    transition:
        0.2s ease;
}

.playtest-message.visible {
    opacity: 1;

    transform:
        translateY(
            0
        );
}

.playtest-table {
    display: grid;

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

    gap: 12px;
}

.play-zone {
    min-height: 180px;

    padding: 13px;

    background: #0d1115;

    border: 1px solid var(--border);
    border-radius: 11px;
}

.command-zone {
    grid-column:
        span 3;
}

.library-zone {
    grid-column:
        span 3;
}

.graveyard-zone {
    grid-column:
        span 3;
}

.exile-zone {
    grid-column:
        span 3;
}

.battlefield-zone,
.hand-zone {
    grid-column:
        span 12;

    min-height: 260px;
}

.zone-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 12px;
}

.zone-header h2 {
    margin: 0;

    font-size: 16px;
}

.zone-header span {
    min-width: 28px;

    padding: 3px 8px;

    text-align: center;

    background: var(--panel-2);

    border: 1px solid var(--border);
    border-radius: 100px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 800;
}

.card-zone {
    display: flex;
    flex-wrap: wrap;

    align-items: flex-start;

    gap: 10px;
}

.play-card {
    position: relative;

    width: 150px;

    padding: 7px;

    background: #141a20;

    border: 1px solid var(--border);
    border-radius: 10px;

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

.play-card.tapped {
    transform:
        rotate(
            90deg
        );

    margin:
        32px 35px;
}

.play-card > img {
    display: block;

    width: 100%;

    border-radius: 7px;
}

.play-card-fallback {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    aspect-ratio: 0.714;

    padding: 10px;

    background: #202832;

    border-radius: 7px;

    text-align: center;
}

.play-card-title {
    overflow: hidden;

    margin-top: 6px;

    font-size: 12px;
    font-weight: 800;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.play-card-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 4px;

    margin-top: 7px;
}

.play-card-action {
    padding: 4px 6px;

    background: #1d252d;
    color: var(--muted);

    border: 1px solid var(--border);
    border-radius: 5px;

    font-size: 9px;

    cursor: pointer;
}

.play-card-action:hover {
    color: var(--text);

    border-color: #667789;
}

.play-card-counters {
    display: flex;
    flex-wrap: wrap;

    gap: 3px;

    margin-top: 5px;
}

.play-card-counters span,
.commander-marker,
.commander-tax {
    display: inline-block;

    padding: 3px 5px;

    border-radius: 4px;

    font-size: 9px;
    font-weight: 800;
}

.play-card-counters span {
    background: #18243a;
    color: #a9c4fa;
}

.commander-marker {
    margin-top: 5px;

    background: #372f17;
    color: #e5cf86;
}

.commander-tax {
    margin-top: 5px;
    margin-left: 4px;

    background: #351d1d;
    color: #eab1b1;
}

.library-stack {
    display: flex;
    flex-direction: column;

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

    gap: 8px;

    min-height: 125px;
}

.card-back {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 82px;
    height: 115px;

    background:
        radial-gradient(
            circle at center,
            #25384a,
            #10151b
        );

    border:
        3px solid #465565;

    border-radius: 8px;

    font-size: 11px;
    font-weight: 900;
}

.library-stack strong {
    font-size: 24px;
}

.playtest-info {
    margin-top: 18px;
}

.playtest-info p {
    color: var(--muted);

    line-height: 1.6;
}


@media (max-width: 1000px) {

    .command-zone,
    .library-zone,
    .graveyard-zone,
    .exile-zone {
        grid-column:
            span 6;
    }

}


@media (max-width: 700px) {

    .playtest-header,
    .mulligan-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .playtest-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .command-zone,
    .library-zone,
    .graveyard-zone,
    .exile-zone {
        grid-column:
            span 12;
    }

    .play-card {
        width: 125px;
    }

}

.coach-panel {
    margin-top: 18px;

    border-color: #394f67;
}

.coach-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.coach-header h2 {
    margin:
        3px 0 5px;
}

.coach-loading {
    margin-top: 18px;

    padding: 15px;

    background: #111923;

    border: 1px solid #33465a;
    border-radius: 8px;

    color: var(--muted);
}

.coach-result {
    margin-top: 20px;
}

.coach-main-advice {
    padding: 20px;

    background:
        linear-gradient(
            135deg,
            #162232,
            #10161e
        );

    border: 1px solid #3c5875;
    border-radius: 11px;
}

.coach-main-advice > span {
    color: #86abe0;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1px;
}

.coach-main-advice h3 {
    margin:
        9px 0 8px;

    font-size: 22px;
}

.coach-main-advice p {
    margin: 0;

    color: var(--muted);

    line-height: 1.6;
}

.coach-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 20px;
}

.coach-list {
    display: flex;
    flex-direction: column;

    gap: 9px;
}

.coach-item {
    padding: 12px;

    background: var(--panel-2);

    border:
        1px solid var(--border);

    border-radius: 8px;
}

.coach-item.warning {
    background: #291d18;

    border-color: #664438;
}

.coach-item.success {
    background: #17281d;

    border-color: #345943;
}

.coach-item p {
    margin:
        5px 0 0;

    color: var(--muted);

    line-height: 1.5;
}

.coach-section {
    margin-top: 20px;
}

.coach-playable {
    display: grid;

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

    gap: 9px;
}

.coach-playable-card {
    display: flex;
    flex-direction: column;

    gap: 4px;

    padding: 12px;

    background: var(--panel-2);

    border:
        1px solid var(--border);

    border-radius: 8px;
}

.coach-playable-card span,
.coach-playable-card small {
    color: var(--muted);
}

.coach-playable-card small {
    line-height: 1.4;
}


@media (max-width: 750px) {

    .coach-header {
        align-items: stretch;
        flex-direction: column;
    }

    .coach-grid {
        grid-template-columns: 1fr;
    }

    .coach-playable {
        grid-template-columns: 1fr;
    }

}

.ai-opponent-list {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 12px;

    margin-top: 18px;
}

.ai-opponent-card {
    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 18px;

    background: var(--panel-2);

    border:
        1px solid var(--border);

    border-radius: 10px;

    color: var(--text);

    text-decoration: none;
}

.ai-opponent-card:hover {
    border-color: #607d9c;
}

.ai-opponent-card span,
.ai-opponent-card small {
    color: var(--muted);
}

.ai-scoreboard {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 20px;

    margin-bottom: 18px;

    padding: 18px;

    background: var(--panel);

    border:
        1px solid var(--border);

    border-radius: 12px;
}

.ai-player-status {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.ai-player-status:last-child {
    text-align: right;
}

.ai-player-status > span {
    color: var(--muted);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1px;
}

.ai-life-control {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: 7px;
}

.ai-player-status:last-child
.ai-life-control {
    justify-content: flex-end;
}

.ai-life-control button {
    width: 34px;
    height: 34px;

    background: var(--panel-2);
    color: var(--text);

    border:
        1px solid var(--border);

    border-radius: 7px;

    cursor: pointer;
}

.ai-life-control strong {
    min-width: 48px;

    text-align: center;

    font-size: 25px;
}

.ai-turn-center {
    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 3px;

    padding: 10px 25px;

    background: #111820;

    border:
        1px solid var(--border);

    border-radius: 10px;
}

.ai-turn-center span {
    color: var(--muted);

    font-size: 11px;
}

.ai-turn-center strong {
    font-size: 28px;
}

.ai-main-controls {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 9px;

    margin-bottom: 18px;
}

.ai-board-side {
    margin-bottom: 18px;

    padding: 18px;

    border-radius: 12px;
}

.opponent-side {
    background:
        linear-gradient(
            180deg,
            #181316,
            #101317
        );

    border:
        1px solid #473239;
}

.player-side {
    background:
        linear-gradient(
            180deg,
            #111920,
            #101317
        );

    border:
        1px solid #31485b;
}

.ai-side-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}

.ai-side-header h2 {
    margin:
        3px 0 0;
}

.ai-zone-counts {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}

.ai-zone-counts span {
    padding:
        5px 8px;

    background: var(--panel-2);

    border:
        1px solid var(--border);

    border-radius: 100px;

    color: var(--muted);

    font-size: 11px;
}

.ai-command-section,
.ai-battlefield-section,
.ai-hand-section {
    margin-top: 16px;
}

.ai-command-section h3,
.ai-battlefield-section h3,
.ai-hand-section h3,
.ai-secondary-zones h3 {
    margin:
        0 0 10px;

    color: var(--muted);

    font-size: 13px;
}

.ai-hidden-hand {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 18px;
}

.ai-card-back {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 76px;
    height: 106px;

    background:
        radial-gradient(
            circle,
            #2a3540,
            #101419
        );

    border:
        2px solid #4b5967;

    border-radius: 7px;

    color: #aeb9c4;

    font-size: 9px;
    font-weight: 900;
}

.ai-secondary-zones {
    display: grid;

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

    gap: 15px;

    margin-top: 20px;
}

.ai-secondary-zones > div {
    min-height: 130px;

    padding: 12px;

    background: #0d1115;

    border:
        1px solid var(--border);

    border-radius: 8px;
}

.ai-log {
    max-height: 400px;

    overflow: auto;

    background: #090c0f;

    border:
        1px solid var(--border);

    border-radius: 8px;
}

.ai-log-row {
    display: grid;

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

    gap: 12px;

    padding: 8px 12px;

    border-bottom:
        1px solid #1c2329;
}

.ai-log-row:last-child {
    border-bottom: 0;
}

.ai-log-row span {
    color: #71808e;

    font-family:
        monospace;

    font-size: 11px;
}

.ai-log-row p {
    margin: 0;

    color: #c5ced6;

    font-size: 12px;
    line-height: 1.4;
}


@media (max-width: 800px) {

    .ai-scoreboard {
        grid-template-columns: 1fr;
    }

    .ai-turn-center {
        order: -1;
    }

    .ai-player-status:last-child {
        text-align: left;
    }

    .ai-player-status:last-child
    .ai-life-control {
        justify-content: flex-start;
    }

    .ai-side-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .ai-secondary-zones {
        grid-template-columns: 1fr;
    }

}

.matchup-run-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.matchup-run-panel h2 {
    margin-bottom: 4px;
}

.matchup-scoreboard {
    display: grid;

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

    align-items: stretch;

    gap: 14px;

    margin:
        18px 0;
}

.matchup-deck-result,
.matchup-middle {
    display: flex;
    flex-direction: column;

    justify-content: center;

    gap: 6px;

    padding: 22px;

    background: var(--panel);

    border:
        1px solid var(--border);

    border-radius: 12px;
}

.matchup-deck-result.opponent {
    text-align: right;
}

.matchup-deck-result > span,
.matchup-middle > span {
    color: var(--muted);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1px;
}

.matchup-deck-result > small,
.matchup-middle > small {
    color: var(--muted);
}

.matchup-middle {
    min-width: 150px;

    align-items: center;

    text-align: center;
}

.matchup-winrate {
    font-size: 38px;
    font-weight: 900;
}

.matchup-comparison-table {
    margin-top: 14px;
}

.matchup-comparison-header,
.matchup-comparison-row {
    display: grid;

    grid-template-columns:
        minmax(180px, 1fr)
        minmax(100px, 160px)
        minmax(100px, 160px);

    gap: 15px;

    align-items: center;

    padding: 10px 0;

    border-bottom:
        1px solid var(--border);
}

.matchup-comparison-header {
    color: var(--muted);

    font-size: 11px;

    text-transform: uppercase;
}

.matchup-comparison-row:last-child {
    border-bottom: 0;
}

.matchup-threat {
    display: grid;

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

    gap: 14px;

    padding: 13px 0;

    border-bottom:
        1px solid var(--border);
}

.matchup-threat:last-child {
    border-bottom: 0;
}

.matchup-threat img {
    width: 90px;

    border-radius: 7px;
}

.matchup-threat > div {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.matchup-threat span,
.matchup-threat small,
.matchup-threat p {
    color: var(--muted);
}

.matchup-threat p {
    margin: 3px 0 0;
}


@media (max-width: 800px) {

    .matchup-run-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .matchup-scoreboard {
        grid-template-columns: 1fr;
    }

    .matchup-deck-result.opponent {
        text-align: left;
    }

    .matchup-middle {
        align-items: flex-start;

        text-align: left;
    }

    .matchup-comparison-header,
    .matchup-comparison-row {
        grid-template-columns:
            minmax(130px, 1fr)
            80px
            80px;
    }

}

.counter-hero {
    margin-bottom: 18px;

    background:
        linear-gradient(
            135deg,
            #192232,
            #11161d
        );

    border-color: #3d5875;
}

.counter-hero h2 {
    margin:
        7px 0 8px;

    font-size: 27px;
}

.counter-hero p {
    max-width: 800px;

    color: var(--muted);

    line-height: 1.6;
}

.counter-strategy-row {
    display: grid;

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

    gap: 18px;

    padding: 14px 0;

    border-bottom:
        1px solid var(--border);
}

.counter-strategy-row:last-child {
    border-bottom: 0;
}

.counter-strategy-row p {
    margin:
        5px 0 0;

    color: var(--muted);

    line-height: 1.5;
}

.counter-strategy-row > span {
    align-self: center;

    text-align: right;

    font-size: 20px;
    font-weight: 900;
}

.counter-plan {
    margin:
        12px 0 0;

    padding-left: 24px;
}

.counter-plan li {
    margin-bottom: 11px;

    color: var(--muted);

    line-height: 1.55;
}

.counter-answer-grid {
    display: grid;

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

    gap: 12px;
}

.counter-answer-card {
    display: grid;

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

    gap: 12px;

    padding: 11px;

    background: var(--panel-2);

    border:
        1px solid var(--border);

    border-radius: 9px;
}

.counter-answer-card img {
    width: 90px;

    border-radius: 7px;
}

.counter-answer-card > div {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.counter-answer-card span,
.counter-answer-card small,
.counter-answer-card p {
    color: var(--muted);
}

.counter-answer-card p {
    margin: 0;
}

.counter-priority {
    display: grid;

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

    gap: 10px;

    padding: 10px 0;

    border-bottom:
        1px solid var(--border);
}

.counter-priority:last-child {
    border-bottom: 0;
}

.counter-priority > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    background: #2a1d1d;

    border:
        1px solid #633939;

    border-radius: 50%;

    color: #e4aaaa;

    font-size: 11px;
    font-weight: 900;
}

.counter-priority > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.counter-priority small {
    color: var(--muted);
}


@media (max-width: 750px) {

    .counter-answer-grid {
        grid-template-columns: 1fr;
    }

}

.optimizer-warning {
    margin-bottom: 18px;

    border-color: #695b32;

    background: #211d13;
}

.optimizer-warning p {
    margin:
        7px 0 0;

    color: var(--muted);
}

.optimizer-scoreboard {
    display: grid;

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

    gap: 12px;

    margin:
        18px 0;
}

.optimizer-score-card {
    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 18px;

    background: var(--panel);

    border:
        1px solid var(--border);

    border-radius: 11px;
}

.optimizer-score-card.original {
    border-color: #56606b;
}

.optimizer-score-card.best {
    border-color: #3e7854;

    background:
        linear-gradient(
            135deg,
            #17261d,
            #111815
        );
}

.optimizer-score-card > span {
    color: var(--muted);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 0.8px;
}

.optimizer-score-card small {
    color: var(--muted);
}

.optimizer-rate {
    margin-top: 6px;

    font-size: 33px;
    font-weight: 900;
}

.optimizer-result-summary {
    display: grid;

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

    gap: 10px;
}

.optimizer-result-summary > div {
    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 14px;

    background: var(--panel-2);

    border:
        1px solid var(--border);

    border-radius: 8px;
}

.optimizer-result-summary span {
    color: var(--muted);

    font-size: 11px;
}

.optimizer-result-summary strong {
    font-size: 18px;
}

.optimizer-variant {
    margin-top: 18px;
}

.optimizer-variant-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}

.optimizer-variant-header h2 {
    margin:
        3px 0 6px;
}

.optimizer-variant-header p {
    margin: 0;

    color: var(--muted);

    line-height: 1.5;
}

.optimizer-variant-rate {
    display: flex;
    flex-direction: column;

    align-items: flex-end;

    min-width: 100px;
}

.optimizer-variant-rate span {
    color: var(--muted);

    font-size: 11px;
}

.optimizer-variant-rate strong {
    font-size: 29px;
}

.optimizer-swaps {
    margin-top: 20px;

    overflow-x: auto;
}

.optimizer-swap-header,
.optimizer-swap-row {
    display: grid;

    grid-template-columns:
        minmax(190px, 1fr)
        minmax(260px, 1.3fr)
        minmax(130px, 0.6fr);

    gap: 15px;

    min-width: 760px;

    padding: 11px 0;

    border-bottom:
        1px solid var(--border);
}

.optimizer-swap-header {
    color: var(--muted);

    font-size: 11px;
    font-weight: 900;

    text-transform: uppercase;
}

.optimizer-cut,
.optimizer-add,
.optimizer-reason {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.optimizer-cut span,
.optimizer-add span,
.optimizer-cut small,
.optimizer-add small,
.optimizer-reason small {
    color: var(--muted);

    font-size: 11px;
}

.optimizer-add {
    display: grid;

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

    gap: 10px;
}

.optimizer-add img {
    width: 55px;

    border-radius: 5px;
}

.optimizer-add > div {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.optimizer-role-section,
.optimizer-deficits {
    margin-top: 20px;
}

.optimizer-role-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(150px, 1fr)
        );

    gap: 8px;
}

.optimizer-role-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    padding: 10px;

    background: var(--panel-2);

    border:
        1px solid var(--border);

    border-radius: 7px;
}

.optimizer-role-card span {
    color: var(--muted);

    font-size: 11px;
}


@media (max-width: 900px) {

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

    .optimizer-result-summary {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 600px) {

    .optimizer-scoreboard,
    .optimizer-result-summary {
        grid-template-columns: 1fr;
    }

    .optimizer-variant-header {
        flex-direction: column;
    }

    .optimizer-variant-rate {
        align-items: flex-start;
    }

}

.version-current {
    margin-bottom: 18px;
}

.version-save-form,
.version-compare-form {
    display: flex;
    flex-wrap: wrap;

    align-items: end;

    gap: 10px;

    margin-top: 18px;
}

.version-save-form label {
    flex:
        1 1 240px;
}

.version-compare-form label {
    flex:
        1 1 220px;
}

.version-list {
    display: flex;
    flex-direction: column;

    gap: 12px;

    margin-top: 15px;
}

.version-card {
    padding: 16px;

    background: var(--panel-2);

    border:
        1px solid var(--border);

    border-radius: 10px;
}

.version-card-header {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 15px;
}

.version-card-header h3 {
    margin:
        3px 0;
}

.version-card-header span,
.version-card-header small {
    color: var(--muted);
}

.version-summary {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(90px, 1fr)
        );

    gap: 8px;

    margin-top: 14px;
}

.version-summary > div {
    display: flex;
    flex-direction: column;

    gap: 3px;

    padding: 9px;

    background: #10151a;

    border:
        1px solid var(--border);

    border-radius: 7px;
}

.version-summary span {
    color: var(--muted);

    font-size: 10px;
}

.version-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 14px;
}

.version-actions form {
    margin: 0;
}

.version-compare-score {
    display: grid;

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

    align-items: center;

    gap: 15px;

    margin-bottom: 18px;
}

.version-side,
.version-change-count {
    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 18px;

    background: var(--panel);

    border:
        1px solid var(--border);

    border-radius: 10px;
}

.version-side.current {
    text-align: right;
}

.version-side > span,
.version-side small,
.version-change-count span {
    color: var(--muted);

    font-size: 11px;
}

.version-change-count {
    min-width: 110px;

    align-items: center;

    text-align: center;
}

.version-change-count strong {
    font-size: 29px;
}

.version-diff-grid {
    display: grid;

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

    gap: 15px;
}

.version-diff-card {
    display: grid;

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

    gap: 10px;

    align-items: center;

    padding: 9px 0;

    border-bottom:
        1px solid var(--border);
}

.version-diff-card:last-child {
    border-bottom: 0;
}

.version-diff-card img {
    width: 55px;

    border-radius: 5px;
}

.version-diff-card > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.version-diff-card span {
    color: var(--muted);

    font-size: 11px;
}

.version-diff-card.added strong {
    color: #9ed9b0;
}

.version-diff-card.removed strong {
    color: #df9fa4;
}

.optimizer-save-version {
    margin-top: 18px;

    padding-top: 15px;

    border-top:
        1px solid var(--border);
}


@media (max-width: 750px) {

    .version-summary {
        grid-template-columns:
            repeat(
                2,
                minmax(90px, 1fr)
            );
    }

    .version-compare-score {
        grid-template-columns: 1fr;
    }

    .version-side.current {
        text-align: left;
    }

    .version-change-count {
        align-items: flex-start;

        text-align: left;
    }

    .version-diff-grid {
        grid-template-columns: 1fr;
    }

}

.mana-panel {
    margin-bottom: 18px;

    border-color: #42546c;
}

.mana-panel-header {
    display: flex;

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

    gap: 15px;
}

.mana-panel-header h2 {
    margin:
        3px 0 0;
}

.mana-overview {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(100px, 1fr)
        );

    gap: 8px;

    margin-top: 15px;
}

.mana-overview > div {
    display: flex;
    flex-direction: column;

    gap: 4px;

    padding: 11px;

    background: var(--panel-2);

    border:
        1px solid var(--border);

    border-radius: 8px;
}

.mana-overview span {
    color: var(--muted);

    font-size: 10px;
}

.mana-overview strong {
    font-size: 17px;
}

.mana-source-list {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(200px, 1fr)
        );

    gap: 7px;

    margin-top: 12px;
}

.mana-source-row {
    display: flex;
    flex-direction: column;

    gap: 3px;

    padding: 9px;

    background: #10151a;

    border:
        1px solid var(--border);

    border-radius: 7px;
}

.mana-source-row span {
    color: var(--muted);

    font-size: 10px;
}


@media (max-width: 700px) {

    .mana-overview {
        grid-template-columns:
            repeat(
                2,
                minmax(100px, 1fr)
            );
    }

}

.combat-panel {
    margin-top: 18px;

    border-color: #684747;
}

.combat-header {
    display: flex;

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

    gap: 15px;
}

.combat-header h2 {
    margin:
        3px 0 5px;
}

.combat-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 18px;
}

.combat-grid h3 {
    margin:
        0 0 10px;
}

.combat-creature-list {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.combat-creature-row {
    display: grid;

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

    align-items: center;

    gap: 10px;

    padding: 10px;

    background: var(--panel-2);

    border:
        1px solid var(--border);

    border-radius: 8px;
}

.combat-creature-info {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.combat-creature-info small {
    color: var(--muted);
}

.combat-pt {
    display: flex;

    gap: 5px;
}

.combat-pt label {
    display: flex;

    align-items: center;

    gap: 3px;

    color: var(--muted);

    font-size: 10px;
}

.combat-pt input {
    width: 52px;

    padding: 6px;
}

.combat-block-assignment {
    min-width: 150px;
}

.combat-actions {
    margin-top: 16px;
}

.combat-result {
    margin-top: 16px;

    padding: 14px;

    background: #151d16;

    border:
        1px solid #365a3d;

    border-radius: 8px;
}

.combat-result h3 {
    margin-top: 0;
}

.combat-event-list {
    display: flex;
    flex-direction: column;

    gap: 5px;

    margin-top: 10px;
}

.combat-event {
    padding: 7px;

    background: #101510;

    border-radius: 5px;

    color: var(--muted);

    font-size: 11px;
}


@media (max-width: 850px) {

    .combat-grid {
        grid-template-columns: 1fr;
    }

    .combat-header {
        align-items: stretch;
        flex-direction: column;
    }

}

.combat-keywords {
    display: flex;
    flex-wrap: wrap;

    gap: 3px;

    margin-top: 4px;
}

.combat-keywords span {
    padding: 2px 5px;

    background: #243142;

    border:
        1px solid #3e526b;

    border-radius: 100px;

    color: #afc9e8;

    font-size: 8px;

    text-transform: uppercase;
}

.combat-block-controls {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.combat-block-controls label {
    display: flex;

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

    gap: 6px;

    color: var(--muted);

    font-size: 9px;
}

.combat-block-order {
    width: 55px;

    padding: 5px;
}

.commander-damage-display {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    margin-top: 4px;

    color: #d6b26a !important;

    font-size: 10px !important;
}

.commander-damage-display strong {
    color: #e6c679;

    font-size: 12px;
}

.blocker-row {
    grid-template-columns:
        minmax(140px, 1fr)
        minmax(150px, 190px)
        auto;
}


@media (max-width: 650px) {

    .blocker-row,
    .combat-creature-row {
        grid-template-columns: 1fr;
    }

}

.stack-panel {
    margin-bottom: 18px;

    border-color: #51436c;
}

.stack-header {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;
}

.stack-header h2 {
    margin:
        3px 0 5px;
}

.priority-display {
    display: flex;
    flex-direction: column;

    min-width: 100px;

    padding: 10px 14px;

    background: #181323;

    border:
        1px solid #493c62;

    border-radius: 8px;

    text-align: center;
}

.priority-display span {
    color: var(--muted);

    font-size: 9px;
    font-weight: 900;
}

.priority-display strong {
    margin-top: 3px;

    font-size: 19px;
}

.stack-controls {
    display: flex;
    flex-wrap: wrap;

    justify-content: space-between;
    align-items: end;

    gap: 14px;

    margin-top: 18px;
}

.stack-cast-control {
    display: flex;

    align-items: end;

    gap: 8px;

    flex:
        1 1 350px;
}

.stack-cast-control label {
    flex: 1;
}

.stack-priority-controls {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.stack-status-grid {
    display: grid;

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

    gap: 8px;

    margin-top: 15px;
}

.stack-status-grid > div {
    display: flex;
    flex-direction: column;

    gap: 4px;

    padding: 10px;

    background: var(--panel-2);

    border:
        1px solid var(--border);

    border-radius: 7px;
}

.stack-status-grid span {
    color: var(--muted);

    font-size: 10px;
}

.stack-layout {
    display: grid;

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

    gap: 18px;

    margin:
        18px 0;
}

.stack-layout h3 {
    margin-bottom: 5px;
}

.stack-list,
.stack-log {
    display: flex;
    flex-direction: column;

    gap: 7px;

    margin-top: 10px;
}

.stack-item {
    display: grid;

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

    gap: 10px;

    padding: 11px;

    background: var(--panel-2);

    border:
        1px solid var(--border);

    border-radius: 8px;
}

.stack-item.top {
    border-color: #745aa2;

    background:
        linear-gradient(
            135deg,
            #211a2e,
            #15121d
        );
}

.stack-item-kind {
    align-self: start;

    padding: 4px 6px;

    background: #292034;

    border-radius: 5px;

    color: #c8adef;

    font-size: 9px;
    font-weight: 900;

    text-align: center;
}

.stack-item > div {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.stack-item small,
.stack-item p {
    color: var(--muted);
}

.stack-item p {
    margin: 3px 0 0;

    font-size: 11px;

    line-height: 1.45;
}

.stack-log {
    max-height: 350px;

    overflow-y: auto;
}

.stack-log-row {
    padding: 8px;

    background: #0d1115;

    border:
        1px solid var(--border);

    border-radius: 6px;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.4;
}


@media (max-width: 800px) {

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

    .priority-display {
        text-align: left;
    }

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

    .stack-status-grid {
        grid-template-columns: 1fr;
    }

    .stack-cast-control {
        flex-direction: column;

        align-items: stretch;
    }

}

.stack-item.needs-target {
    border-color: #8a6539;

    background:
        linear-gradient(
            135deg,
            #261e13,
            #17130e
        );
}

.stack-target-area {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 8px;

    padding-top: 8px;

    border-top:
        1px solid var(--border);
}

.stack-target-area select {
    min-width: 180px;

    flex: 1;
}

.stack-effect-label {
    color: #91b9e8 !important;

    font-weight: 700;
}

.stack-cast-control {
    flex-wrap: wrap;
}

.stack-cast-control > label {
    min-width: 190px;
}


.stack-panel::before {
    content: "AI STACK ACTIVE";

    display: inline-block;

    margin-bottom: 8px;

    padding: 3px 7px;

    background: #182419;

    border:
        1px solid #36553a;

    border-radius: 100px;

    color: #9bd6a5;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.8px;
}


.ai-turn-engine-panel {
    margin-bottom: 18px;

    border-color: #45684c;

    background:
        linear-gradient(
            135deg,
            #151d17,
            var(--panel)
        );
}

.ai-turn-header {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 18px;
}

.ai-turn-header h2 {
    margin:
        3px 0 5px;
}

.ai-turn-phase {
    display: flex;
    flex-direction: column;

    min-width: 160px;

    padding: 10px 13px;

    background: #101711;

    border:
        1px solid #36553c;

    border-radius: 8px;
}

.ai-turn-phase span {
    color: var(--muted);

    font-size: 9px;
    font-weight: 900;
}

.ai-turn-phase strong {
    margin-top: 4px;

    color: #a8dbaf;
}

.ai-turn-actions {
    margin-top: 15px;
}

.ai-combat-defense {
    margin-top: 18px;

    padding-top: 18px;

    border-top:
        1px solid var(--border);
}


@media (max-width: 700px) {

    .ai-turn-header {
        flex-direction: column;
    }

}