:root {
    color-scheme: dark;
    --space: #07182c;
    --panel: rgba(2, 12, 26, 0.82);
    --blue: #8edcff;
    --white: #edf7ff;
    font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--space); }

.screen {
    min-height: 100vh;
    min-height: 100svh;
    padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
    overflow-x: hidden;
    background: linear-gradient(rgba(2, 10, 22, .68), rgba(2, 10, 22, .92)), url("/images/background_clouds_desktop.jpg?v=1") center / cover fixed;
}

.screen--hero {
    display: grid;
    place-items: end center;
    overflow: hidden;
    background: linear-gradient(to bottom, transparent 48%, rgba(3, 14, 29, .42) 73%, rgba(3, 14, 29, .94)), url("/images/background_01_mobile.jpg?v=3") center top / cover no-repeat;
}

.screen__content { width: min(100%, 38rem); margin: 0 auto; }

.display-title, .hero-link {
    color: #fff;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: .95;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 3px 0 #183b63, 0 6px 20px rgba(0, 0, 0, .8);
}

.display-title { margin: 0 0 1.5rem; font-size: clamp(2.75rem, 14vw, 5rem); }
.hero-link { display: inline-block; font-size: clamp(2.4rem, 12vw, 5.25rem); text-decoration: none; transition: color 180ms, transform 180ms; }
.hero-link:hover, .hero-link:focus-visible { color: var(--blue); transform: translateY(-.15rem); }

.back-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    margin-bottom: 1.35rem;
    color: #a9ddff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-decoration: none;
    text-transform: uppercase;
}

.back-link::before { content: "←"; margin-right: .55rem; font-size: 1.25rem; }
.back-link:hover, .back-link:focus-visible { color: #fff; }

.panel {
    padding: clamp(1.25rem, 5vw, 2rem);
    border: 1px solid rgba(137, 216, 255, .28);
    border-radius: .8rem;
    background: var(--panel);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .34);
    backdrop-filter: blur(5px);
}

.game-menu { display: grid; min-height: calc(100svh - 3.25rem); align-content: center; }
.game-menu__list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }

.game-menu__link {
    display: block;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(142, 220, 255, .55);
    border-radius: .45rem;
    color: #fff;
    background: linear-gradient(135deg, rgba(33, 109, 151, .72), rgba(5, 27, 50, .94));
    box-shadow: inset 0 0 1.1rem rgba(115, 211, 255, .09), 0 .4rem 1.2rem rgba(0, 0, 0, .3);
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(1.4rem, 7vw, 2rem);
    letter-spacing: .08em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: border-color 180ms, color 180ms, transform 180ms;
}

.game-menu__link:hover, .game-menu__link:focus-visible { border-color: #fff; color: var(--blue); transform: translateY(-.12rem); }
.hero-link:focus-visible, .game-menu__link:focus-visible { outline: 3px solid #fff; outline-offset: .16em; }

.commanders { padding-bottom: 1rem; }
.commander-list { display: grid; gap: 1.25rem; }

.commander-card {
    overflow: hidden;
    border: 1px solid rgba(142, 220, 255, .42);
    border-radius: .8rem;
    background: rgba(2, 12, 26, .9);
    box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .42), inset 0 0 1.5rem rgba(80, 190, 240, .05);
}

.commander-card__body { padding: 1rem; }
.commander-card__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .55rem;
    margin-bottom: 1rem;
}

.commander-card__image-frame {
    display: grid;
    width: 100%;
    aspect-ratio: 4 / 3;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(142, 220, 255, .28);
    border-radius: .45rem;
    background: #020b12;
    box-shadow: 0 .45rem 1.2rem rgba(0, 0, 0, .45);
}

.commander-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    image-rendering: auto;
}

.commander-card__heading {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .65rem;
    align-items: stretch;
    justify-content: flex-start;
}

.commander-card__name {
    margin: 0;
    color: #fff;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(1.8rem, 8vw, 2.5rem);
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 2px 0 #183b63;
}

.commander-card__cost {
    margin: 0;
    padding: .4rem .65rem;
    border: 1px solid rgba(255, 211, 93, .45);
    border-radius: .3rem;
    color: #ffe27c;
    background: rgba(71, 48, 2, .55);
    text-align: center;
}

.commander-card__cost span {
    display: block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.commander-card__cost strong { font-size: 1.15rem; }
.commander-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin: 0 0 1rem; }
.commander-stats div {
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    padding: .58rem .65rem;
    border-left: 2px solid #4eaccf;
    background: rgba(22, 67, 89, .42);
}

.commander-stats div:last-child { grid-column: 2; }
.commander-stats dt { color: #a9ddff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.commander-stats dd { margin: 0; color: #fff; font-family: "Courier New", monospace; font-weight: 700; }

.hire-button {
    width: 100%;
    min-height: 3rem;
    border: 1px solid #6ed4fa;
    border-radius: .35rem;
    color: #dff7ff;
    background: linear-gradient(#287ca2, #12445f);
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 1.35rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hire-button:disabled { cursor: not-allowed; filter: saturate(.6); opacity: .72; }
.notice { padding: 1rem; border: 1px solid rgba(142, 220, 255, .4); border-radius: .5rem; color: #dff7ff; background: rgba(2, 12, 26, .86); line-height: 1.5; }
.notice--error { border-color: rgba(255, 76, 76, .55); color: #ffd4d4; }

.stars { padding-bottom: 1rem; }
.star-list { display: grid; gap: 1.25rem; }
.star-card {
    overflow: hidden;
    border: 1px solid rgba(142, 220, 255, .42);
    border-radius: .8rem;
    background: rgba(2, 12, 26, .9);
    box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .42), inset 0 0 1.5rem rgba(80, 190, 240, .05);
}
.star-card__body { padding: 1rem; }
.star-card__summary { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-bottom: 1rem; }
.star-card__image-frame {
    display: grid;
    width: 100%;
    aspect-ratio: 4 / 3;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(142, 220, 255, .28);
    border-radius: .45rem;
    background: #020b12;
    box-shadow: 0 .45rem 1.2rem rgba(0, 0, 0, .45);
}
.star-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    image-rendering: auto;
}
.star-card__heading { display: flex; min-width: 0; flex-direction: column; gap: .65rem; }
.star-card__name {
    margin: 0;
    color: #fff;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(1.65rem, 7vw, 2.35rem);
    letter-spacing: .06em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 2px 0 #183b63;
}
.star-card__location {
    margin: 0;
    padding: .45rem .65rem;
    border: 1px solid rgba(142, 220, 255, .35);
    border-radius: .3rem;
    color: #dff7ff;
    background: rgba(17, 66, 91, .48);
    text-align: center;
}
.star-card__location span { display: block; color: #8edcff; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.star-card__location strong { font-size: .95rem; }
.star-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin: 0 0 1rem; }
.star-stats div { display: flex; gap: .5rem; justify-content: space-between; padding: .58rem .65rem; border-left: 2px solid #4eaccf; background: rgba(22, 67, 89, .42); }
.star-stats dt { color: #a9ddff; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.star-stats dd { margin: 0; color: #fff; font-family: "Courier New", monospace; font-size: .82rem; font-weight: 700; text-align: right; }
.star-balances { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin: 0 0 1rem; }
.star-balances div {
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    padding: .58rem .65rem;
    border-left: 2px solid #4eaccf;
    background: rgba(22, 67, 89, .42);
}
.star-balances div:last-child { grid-column: 2; }
.star-balances dt { color: #a9ddff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.star-balances dd { margin: 0; color: #fff; font-family: "Courier New", monospace; font-size: .76rem; font-weight: 700; text-align: right; }
.star-card__description { margin: 0 0 1rem; color: #d6eaf5; font-family: Georgia, "Times New Roman", serif; font-size: .94rem; line-height: 1.5; }
.select-star-button {
    display: grid;
    width: 100%;
    min-height: 3rem;
    border: 1px solid #6ed4fa;
    border-radius: .35rem;
    color: #e8fbff;
    background: linear-gradient(#287ca2, #12445f);
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 1.35rem;
    letter-spacing: .12em;
    place-items: center;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}
.select-star-button:disabled { cursor: not-allowed; filter: saturate(.45); opacity: .62; }
.select-star-button:hover, .select-star-button:focus-visible { border-color: #fff; background: linear-gradient(#3394bd, #185a78); }
.select-star-button:focus-visible { outline: 3px solid #fff; outline-offset: .15rem; }

.game-dialog { width: min(calc(100% - 2rem), 27rem); padding: 0; border: 1px solid rgba(142, 220, 255, .65); border-radius: .7rem; color: #edf7ff; background: #061426; box-shadow: 0 1.5rem 4rem #000; }
.game-dialog::backdrop { background: rgba(0, 5, 12, .78); backdrop-filter: blur(3px); }
.game-dialog__panel { padding: 1.4rem; text-align: center; }
.game-dialog__eyebrow { margin: 0 0 .4rem; color: #ff6b6b; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.game-dialog h2 { margin: 0 0 1rem; color: #fff; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 2rem; letter-spacing: .08em; text-transform: uppercase; }
.game-dialog p { line-height: 1.5; }
.game-dialog__close { width: 100%; min-height: 2.8rem; margin-top: .5rem; border: 1px solid #6ed4fa; border-radius: .35rem; color: #fff; background: #14506c; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }

.list-toolbar {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.35rem;
}

.list-toolbar .back-link { margin-bottom: 0; }

.help-link {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border: 1px solid rgba(142, 220, 255, .72);
    border-radius: 50%;
    color: #e6f8ff;
    background: rgba(8, 48, 70, .68);
    box-shadow: 0 .3rem .9rem rgba(0, 0, 0, .35), inset 0 0 .65rem rgba(142, 220, 255, .12);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    backdrop-filter: blur(3px);
    transition: background-color 180ms, border-color 180ms, transform 180ms;
}

.help-link:hover,
.help-link:focus-visible {
    border-color: #fff;
    background: rgba(16, 88, 119, .9);
    transform: translateY(-.1rem);
}

.help-link:focus-visible { outline: 3px solid #fff; outline-offset: .15rem; }

.help-page { padding-bottom: 1rem; }
.help-content { font-family: Georgia, "Times New Roman", serif; }
.help-article + .help-article { margin-top: 1.7rem; padding-top: 1.5rem; border-top: 1px solid rgba(142, 220, 255, .3); }
.help-article h2 { margin: 0 0 1rem; color: #8edcff; font-size: clamp(1.4rem, 6vw, 1.85rem); line-height: 1.15; }
.help-article__copy { color: #edf7ff; font-size: clamp(1.03rem, 4.3vw, 1.18rem); line-height: 1.68; }
.help-article__copy > :first-child { margin-top: 0; }
.help-article__copy > :last-child { margin-bottom: 0; }
.help-article__copy strong { color: #8edcff; }
.help-article__copy li + li { margin-top: .45rem; }

.scroll-top {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 10;
    display: grid;
    width: 3rem;
    height: 3rem;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(142, 220, 255, .65);
    border-radius: 50%;
    color: #e8f9ff;
    background: rgba(8, 48, 70, .68);
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .38), inset 0 0 .75rem rgba(142, 220, 255, .12);
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(3px);
    transition: background-color 180ms, border-color 180ms, opacity 180ms, transform 180ms;
}

.scroll-top:hover,
.scroll-top:focus-visible {
    border-color: #fff;
    background: rgba(16, 88, 119, .9);
    opacity: 1;
    transform: translateY(-.12rem);
}

.scroll-top:focus-visible { outline: 3px solid #fff; outline-offset: .15rem; }

@media (min-width: 700px) {
    body {
        display: grid;
        min-height: 100svh;
        overflow: hidden;
        place-items: center;
        background: linear-gradient(rgba(2, 10, 22, .18), rgba(2, 10, 22, .38)), url("/images/background_clouds_desktop.jpg?v=1") center / cover no-repeat fixed;
    }
    .screen {
        width: 56.25svh;
        max-width: 100vw;
        min-height: 0;
        height: 100svh;
        overflow-y: auto;
        aspect-ratio: 9 / 16;
        box-shadow: 0 0 0 1px rgba(129, 213, 255, .2), 0 0 3rem rgba(0, 0, 0, .72);
        scrollbar-color: #4b91bf rgba(2, 10, 22, .6);
        scrollbar-width: thin;
    }
    .screen--hero { overflow: hidden; }
    .scroll-top { right: calc((100vw - 56.25svh) / 2 + 1rem); }
}

@media (prefers-reduced-motion: no-preference) {
    .hero-link, .game-menu__list { animation: reveal 900ms ease-out both; }
    @keyframes reveal { from { opacity: 0; transform: translateY(.75rem); } }
}

/* Attack page viewport containment */
body:has(.attack-page){max-width:100%;overflow-x:hidden;overflow-y:auto}
.screen:has(.attack-page){box-sizing:border-box;width:100%;max-width:100%;height:auto;min-height:100vh;aspect-ratio:auto;overflow:visible}
.attack-page{box-sizing:border-box!important;width:min(100%,48rem)!important;max-width:100%!important;min-width:0;padding-left:1rem!important;padding-right:1rem!important}
.attack-page>.display-title{font-size:clamp(1.8rem,9vw,3.5rem)}
.attack-page .panel,.attack-page .attack-form,.attack-page .attack-grid,.attack-page .attack-actions,.attack-page .wave{box-sizing:border-box;width:100%;max-width:100%;min-width:0}
.attack-page .attack-form label,.attack-page .attack-actions>*{box-sizing:border-box;min-width:0}
.attack-page .attack-form select,.attack-page .attack-form input{max-width:100%}
@media(max-width:600px){.attack-page .attack-grid,.attack-page .attack-actions{grid-template-columns:1fr!important}}

/* Battle report viewport containment */
body:has(.report){max-width:100%;overflow-x:hidden;overflow-y:auto}
.screen:has(.report){box-sizing:border-box;width:100%;max-width:100%;height:auto;min-height:100vh;aspect-ratio:auto;overflow:visible}
.screen>.report{box-sizing:border-box!important;width:100%!important;max-width:44rem!important;min-width:0;margin-right:auto!important;margin-left:auto!important;padding-right:0!important;padding-left:0!important}
.report>.display-title{max-width:100%;font-size:clamp(1.75rem,9vw,3.5rem)!important;overflow-wrap:anywhere}
.report .panel,.report .action{box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow-wrap:anywhere}
.report .panel:has(table){overflow-x:auto}.report table{width:100%!important;min-width:24rem}
@media(max-width:600px){.screen:has(.report){padding-right:max(.75rem,env(safe-area-inset-right))!important;padding-left:max(.75rem,env(safe-area-inset-left))!important}.report .panel{padding:1rem!important}.report th,.report td{padding:.4rem .3rem!important;font-size:.72rem}}

/* Prevent iOS form-focus zoom and focused-control viewport overflow. */
@media (max-width: 699px) {
    form,
    fieldset,
    form > *,
    fieldset > * {
        max-width: 100%;
        min-width: 0;
    }

    input,
    select,
    textarea {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
        font-size: 16px !important;
    }

    textarea {
        resize: vertical;
    }
}