:root {
    color-scheme: dark;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: #e9f2f5;
    background: #0b1424;
    --surface: #131f32;
    --line: #314258;
    --muted: #acbfd0;
    --cyan: #9be4e2;
    --amber: #f6bf7e;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(180deg, rgb(8 17 32 / 24%), #0b1424 80%), url("space-bg.jpg") center top / cover no-repeat;
}

a { color: var(--amber); }
a:hover { color: #ffe0ad; }
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 2px;
}

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.skip-link {
    position: absolute;
    left: -10000px;
    top: 0;
    padding: .5rem 1rem;
    background: var(--surface);
}
.skip-link:focus { left: 1rem; top: 1rem; z-index: 10; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-header {
    background: rgb(9 18 32 / 96%);
    border-bottom: 1px solid rgb(135 187 205 / 16%);
}
.site-header__inner {
    max-width: 1220px;
    margin: auto;
    padding: .9rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2.2rem;
}
.site-header a:not(.button):not(.brand), .site-header .text-button { color: var(--amber); }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--cyan) !important; font-size: 1.15rem; font-weight: 750; letter-spacing: .12em; text-decoration: none; white-space: nowrap; }
.brand strong { color: var(--amber); font-weight: 800; }
.brand-mark { width: 2.15rem; height: 2.15rem; display: grid; place-items: center; border: 1px solid rgb(155 228 226 / 46%); border-radius: 50%; color: var(--cyan); box-shadow: 0 0 24px rgb(76 185 186 / 16%); }
.brand-mark .icon { width: 1.55rem; height: 1.55rem; }
.site-nav, .account-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .45rem; }
.account-nav { margin-left: auto; }
.site-nav a, .login-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.65rem; padding: .45rem .65rem; border-radius: 8px; text-decoration: none; font-size: .9rem; font-weight: 600; }
.site-nav a:hover, .login-link:hover, .site-nav a[aria-current="page"] { background: rgb(246 191 126 / 11%); color: #ffe0ad; }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--amber); }
.site-nav .icon, .login-link .icon { color: var(--amber); }
.account-form { margin: 0; }
.account-nav .button { color: #0b2231; }

.container { max-width: 1100px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }
.hero { padding: .5rem 0 1.4rem; }
.eyebrow { color: var(--amber); font-size: .75rem; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
h1, h2 { line-height: 1.2; color: #f2f8fb; }
h1 { margin: .2rem 0 1rem; font-size: clamp(2rem, 5vw, 3rem); }
h2 { margin: 0 0 .8rem; font-size: 1.35rem; }
p { margin: .65rem 0 1rem; }
.lead { max-width: 62ch; font-size: 1.12rem; color: #c7d6df; }
.muted { color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.3rem 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.panel {
    background: rgb(19 31 50 / 96%);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.4rem;
    box-shadow: 0 12px 36px rgb(2 7 18 / 16%);
    margin-bottom: 1rem;
}
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.list-clean { list-style: none; padding: 0; margin: 0; }
.list-clean li { padding: .8rem 0; border-top: 1px solid var(--line); }
.list-clean li:first-child { border-top: 0; }
.list-clean a { font-weight: 650; }
.table-scroll { overflow-x: auto; }
.results-table { width: 100%; border-collapse: collapse; text-align: left; }
.results-table th, .results-table td { padding: .5rem .65rem; border-bottom: 1px solid var(--line); }
.results-table th:first-child, .results-table td:first-child { padding-left: 0; }
.match-players { margin: .35rem 0 0; padding-left: 1.5rem; }
.match-players li { padding: .1rem 0; border: 0; }
.pagination { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: 1rem; }
.stat-list { margin: 0; }
.stat-list div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.stat-list dt { color: var(--muted); }
.stat-list dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.season-page__intro { margin: .2rem 0 2rem; }
.season-page__intro .eyebrow { margin-bottom: .45rem; }
.season-page__intro .lead { margin-bottom: 0; }
.season-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.season-card { display: flex; flex-direction: column; min-height: 215px; padding: 1.55rem; border: 1px solid #3c586a; border-radius: 16px; background: linear-gradient(125deg, #192f45, #12243a 72%); color: #f2f8fb; text-decoration: none; box-shadow: 0 16px 36px rgb(2 7 18 / 20%); transition: border-color .18s ease, transform .18s ease; }
.season-card:hover { border-color: var(--amber); color: #f2f8fb; transform: translateY(-3px); }
.season-card__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.3rem; }
.season-card__number { color: var(--amber); font-size: .72rem; font-weight: 750; letter-spacing: .13em; }
.season-card__title { margin-bottom: .45rem; font-size: 1.5rem; line-height: 1.25; }
.season-card__dates, .season-heading__dates { color: var(--muted); font-variant-numeric: tabular-nums; }
.season-card__action { display: inline-flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: 1.3rem; color: var(--amber); font-weight: 700; }
.season-card__action .icon { transition: transform .18s ease; }
.season-card:hover .season-card__action .icon { transform: translateX(4px); }
.season-status { display: inline-flex; align-items: center; min-height: 1.9rem; padding: .25rem .7rem; border: 1px solid #607789; border-radius: 999px; background: rgb(129 153 174 / 11%); color: #cddce5; font-size: .78rem; font-weight: 750; white-space: nowrap; }
.season-status--active { border-color: #498b88; background: rgb(91 186 177 / 15%); color: #a8e8db; }
.season-status--finalizing { border-color: #a7814a; background: rgb(246 191 126 / 12%); color: #ffd69b; }
.season-back { display: inline-block; margin-bottom: 1rem; font-weight: 650; text-decoration: none; }
.season-back:hover { text-decoration: underline; }
.season-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.8rem 2rem; background: radial-gradient(circle at 88% 12%, rgb(78 151 160 / 16%), transparent 34%), #14273c; }
.season-heading .eyebrow { margin: 0 0 .4rem; }
.season-heading h1 { margin-bottom: .35rem; }
.season-heading__dates { margin: 0; }
.season-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin: 2.3rem 0 1rem; }
.season-section-heading .eyebrow { margin: 0 0 .3rem; }
.season-section-heading h2 { margin: 0; font-size: 1.8rem; }
.season-section-heading > p { max-width: 32ch; margin: 0; color: var(--muted); }
.standings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.standings-panel { min-width: 0; margin-bottom: 0; }
.standings-panel__heading { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.standings-panel__format { display: grid; flex: none; place-items: center; width: 2.8rem; height: 2.8rem; border: 1px solid #4b7887; border-radius: 10px; background: rgb(112 189 195 / 11%); color: var(--cyan); font-size: .8rem; font-weight: 800; letter-spacing: .05em; }
.standings-panel__heading h3 { margin: 0; font-size: 1.18rem; }
.standings-panel__heading p { margin: .1rem 0 0; color: var(--muted); font-size: .85rem; }
.leaderboard-table { min-width: 320px; font-variant-numeric: tabular-nums; }
.leaderboard-table th { color: var(--muted); font-size: .75rem; font-weight: 700; }
.leaderboard-table tbody tr:nth-child(odd) { background: rgb(122 172 193 / 5%); }
.leaderboard-table tbody tr:last-child td { border-bottom: 0; }
.leaderboard-table__rank { color: var(--amber); font-weight: 800; }
.leaderboard-table__rating { color: #d9f7f3; font-weight: 750; }
.leaderboard-table__games { color: var(--muted); }
.standings-empty { margin: 1.5rem 0 .3rem; color: var(--muted); }
.season-rating-note { margin: .9rem 0 0; color: var(--muted); font-size: .88rem; }
.match-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 0; list-style: none; }
.match-card { min-width: 0; margin: 0; }
.match-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; padding-bottom: .85rem; border-bottom: 1px solid var(--line); }
.match-card__format { color: var(--amber); font-size: .7rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.match-card__heading h3 { margin: .15rem 0 0; font-size: 1.12rem; }
.match-card__heading time { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.match-card__players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.match-card__players li { display: flex; align-items: center; justify-content: space-between; min-width: 0; gap: .4rem; }
.match-card__players a { overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.result-badge { flex: none; padding: .15rem .48rem; border-radius: 5px; background: #293d50; color: #d3e0e8; font-size: .71rem; font-weight: 750; white-space: nowrap; }
.result-badge--win { background: #19483d; color: #a7f1cb; }
.result-badge--loss { background: #4a2633; color: #ffb5bb; }
.season-participants { margin-top: 2.4rem; }
.participant-links { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.participant-links a { display: inline-block; padding: .42rem .7rem; border: 1px solid #40596e; border-radius: 8px; background: #1a2c41; font-weight: 650; text-decoration: none; }
.participant-links a:hover { border-color: var(--amber); background: #24384b; }
@media (max-width: 760px) {
    .standings-grid, .match-cards { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
    .season-cards { grid-template-columns: 1fr; }
    .season-heading { flex-direction: column-reverse; padding: 1.35rem; }
    .season-section-heading { align-items: flex-start; flex-direction: column; gap: .25rem; }
}
@media (max-width: 520px) {
    .match-card__players { grid-template-columns: 1fr; }
    .match-card__heading { flex-wrap: wrap; }
}
.error-detail { overflow-wrap: anywhere; white-space: pre-wrap; }
.replay-panel { max-width: 760px; }
.replay-panel input[type="file"] { display: block; max-width: 100%; margin: .5rem 0 1rem; }
.replay-canvas { max-width: 690px; margin: .8rem auto; background: #222; }
.replay-canvas canvas { display: block; width: 100%; height: auto; }
.replay-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.replay-controls button { padding: .4rem .7rem; }
.replay-controls .replay-toggle { min-width: 2.9rem; padding-inline: .65rem; }
.replay-controls .replay-speed-label { width: auto; margin-left: .3rem; color: var(--muted); font-weight: 600; }
.replay-controls select { min-height: 2.4rem; padding: .25rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--amber); font: inherit; }
.replay-toggle .icon { width: 1.3rem; height: 1.3rem; }
.replay-toggle__pause, .replay-toggle[data-playing="true"] .replay-toggle__play { display: none; }
.replay-toggle[data-playing="true"] .replay-toggle__pause { display: block; }
.replay-controls label { width: 100%; color: var(--amber); font-weight: 650; font-variant-numeric: tabular-nums; }
.replay-controls input[type="range"] { flex: 1 1 260px; height: .55rem; margin: .8rem .1rem; border-radius: 999px; appearance: none; background: linear-gradient(to right, var(--amber) var(--progress, 0%), #405066 var(--progress, 0%)); cursor: pointer; }
.replay-controls input[type="range"]::-webkit-slider-thumb { width: 1.15rem; height: 1.15rem; border: 2px solid #1b283a; border-radius: 50%; appearance: none; background: var(--amber); box-shadow: 0 0 0 2px rgb(246 191 126 / 24%); }
.replay-controls input[type="range"]::-moz-range-thumb { width: .9rem; height: .9rem; border: 2px solid #1b283a; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px rgb(246 191 126 / 24%); }
.replay-controls input[type="range"]:disabled { cursor: not-allowed; opacity: .65; }
.replay-players { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: 0; list-style: none; }
.replay-players li { padding: .15rem .6rem; border-left: .35rem solid var(--muted); }
.replay-strength { margin: 1rem 0; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: rgb(8 20 35 / 55%); }
.replay-strength[hidden], .replay-battle-stats[hidden] { display: none; }
.replay-strength__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: .8rem; align-items: center; margin: .45rem 0; font-size: .9rem; }
.replay-strength__track { display: flex; height: 1rem; overflow: hidden; border-radius: 999px; background: #27394b; }
.replay-strength__segment { height: 100%; min-width: 0; }
.replay-strength__segment + .replay-strength__segment { border-left: 2px solid #0b1424; }
.replay-strength__empty { width: 100%; text-align: center; color: var(--muted); font-size: .7rem; line-height: 1rem; }
.replay-strength .meta { margin: .6rem 0 0; line-height: 1.45; }
.replay-battle-stats { margin: 1.2rem 0; }
.replay-battle-stats h3 { margin: 0 0 .7rem; font-size: 1.05rem; }
.replay-battle-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.replay-battle-stats__grid section { padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: rgb(8 20 35 / 35%); }
.replay-battle-stats__grid h4 { margin: 0 0 .6rem; padding-left: .6rem; border-left: .35rem solid; font-size: .95rem; }
.replay-battle-stats__grid .stat-list { margin: 0; font-size: .83rem; }
@media (max-width: 520px) { .replay-strength__row { grid-template-columns: 1fr; gap: .2rem; } }
.replay-workspace { max-width: 1052px; margin-inline: auto; }
.replay-stage { position: relative; aspect-ratio: 690 / 460; overflow: hidden; border: 1px solid #3a556d; border-radius: 16px; background: #07111d; box-shadow: 0 20px 55px rgb(0 5 14 / 36%); }
.replay-workspace.is-dragging .replay-stage { border-color: var(--amber); box-shadow: 0 0 0 3px rgb(246 191 126 / 35%), 0 20px 55px rgb(0 5 14 / 36%); }
.replay-workspace .replay-canvas { width: 100%; max-width: none; margin: 0; }
.replay-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; padding: 1.5rem; background: radial-gradient(circle at center, rgb(36 72 95 / 64%), rgb(7 17 29 / 96%) 65%); text-align: center; }
.replay-empty[hidden] { display: none; }
.replay-empty > .icon { width: 3rem; height: 3rem; margin-bottom: .2rem; color: var(--amber); }
.replay-empty strong { font-size: clamp(1.25rem, 3vw, 2rem); }
.replay-empty p { max-width: 34ch; margin: 0 0 .3rem; color: var(--muted); }
.replay-workspace__details { margin-top: 1rem; }
.replay-workspace__details > p:first-child { margin-top: 0; }
.replay-workspace__details .replay-controls { margin: 1rem 0; }
.replay-workspace__details .replay-players { margin: 1rem 0; }
.replay-workspace__status { margin: 1.3rem 0 .7rem; color: var(--muted); overflow-wrap: anywhere; }
.replay-file-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.replay-file-row label { font-weight: 650; }
.replay-file-row input[type="file"] { max-width: 100%; color: var(--muted); }
.replay-workspace__details .meta { margin-bottom: 0; }
.replay-workspace { max-width: 1100px; }
.replay-workspace__topline { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .3rem 1rem; margin: 0 0 .65rem; }
.replay-workspace__topline h1 { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.65rem); }
.replay-workspace__topline a { font-size: .9rem; }
.replay-workspace__layout { display: grid; grid-template-columns: minmax(0, 1fr) 304px; align-items: start; gap: 1rem; }
.replay-workspace__main, .replay-sidebar { min-width: 0; }
.replay-workspace__main .replay-stage { width: 100%; }
.replay-workspace__main .replay-controls { margin-top: .65rem; }
.replay-workspace__main .replay-controls button { min-height: 2.4rem; padding: .36rem .6rem; font-size: .88rem; }
.replay-workspace__main .replay-controls .replay-toggle { min-width: 2.5rem; }
.replay-workspace__main .replay-controls label[for="replay-frame"] { margin-top: -.2rem; }
.replay-workspace__main .replay-controls input[type="range"] { flex-basis: 100%; margin: .2rem .1rem .45rem; }
.replay-workspace__main .replay-canvas { width: 100%; max-width: none; margin: 0; }
.replay-loading { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; color: var(--muted); text-align: center; }
.replay-loading[hidden] { display: none; }
.replay-sidebar { display: grid; gap: .8rem; }
.replay-sidebar h2 { margin: 0 0 .65rem; font-size: 1rem; }
.replay-sidebar .replay-strength, .replay-sidebar .replay-battle-stats { margin: 0; padding: .8rem; border: 1px solid var(--line); border-radius: 12px; background: rgb(10 24 41 / 82%); }
.replay-sidebar .replay-strength__row { grid-template-columns: 1fr; gap: .15rem; margin: .45rem 0 .6rem; font-size: .78rem; }
.replay-sidebar .replay-strength__track { height: .72rem; }
.replay-strength__legend-head, .replay-strength__legend li { display: grid; grid-template-columns: minmax(0, 1fr) 55px 55px; gap: .2rem; align-items: center; }
.replay-strength__legend-head { margin-top: .8rem; padding-bottom: .2rem; color: var(--muted); font-size: .68rem; }
.replay-strength__legend { margin: 0; padding: 0; list-style: none; }
.replay-strength__legend li { padding: .27rem 0; border-top: 1px solid rgb(111 137 157 / 22%); font-size: .78rem; font-variant-numeric: tabular-nums; }
.replay-strength__legend li > span:not(:first-child), .replay-strength__legend-head > span:not(:first-child) { text-align: right; }
.replay-strength__name { min-width: 0; overflow: hidden; padding-left: .52rem; border-left: .3rem solid var(--player-color); text-overflow: ellipsis; white-space: nowrap; }
.replay-sidebar .replay-battle-stats__grid { display: grid; grid-template-columns: 1fr; gap: .55rem; }
.replay-sidebar .replay-battle-stats__grid section { padding: .6rem .65rem; }
.replay-sidebar .replay-battle-stats__grid h4 { margin-bottom: .3rem; }
.replay-sidebar .replay-battle-stats__grid .stat-list { font-size: .75rem; }
.replay-sidebar .replay-battle-stats__grid .stat-list div { padding: .18rem 0; }
.replay-workspace--four > .replay-battle-stats { margin: 1rem 0 0; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: rgb(10 24 41 / 82%); }
.replay-workspace--four > .replay-battle-stats h2 { margin: 0 0 .8rem; font-size: 1.1rem; }
.replay-workspace--four .replay-battle-stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.replay-workspace--four .replay-battle-stats__grid section { min-width: 0; }
.replay-workspace--four .replay-battle-stats__grid .stat-list { font-size: .76rem; }
.replay-workspace--four .replay-battle-stats__grid .stat-list div { padding: .23rem 0; }
.replay-workspace__status:empty { display: none; }
.replay-workspace > .replay-workspace__status { margin: .8rem 0; }
.replay-workspace__details { margin-top: 1.1rem; }
.match-metadata { margin-top: 1.1rem; }
.match-metadata p { margin: .35rem 0; }
.match-results-heading { margin-top: 1.7rem; }
.match-technical { margin-top: .6rem; }
.match-technical summary { color: var(--amber); cursor: pointer; }
.match-technical .stat-list { margin-top: .55rem; }
@media (max-width: 920px) {
    .replay-workspace__layout { grid-template-columns: 1fr; }
    .replay-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .replay-sidebar .replay-battle-stats__grid { grid-template-columns: 1fr; }
    .replay-workspace--four .replay-battle-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .replay-sidebar { grid-template-columns: 1fr; }
    .replay-workspace__main .replay-controls { gap: .4rem; }
    .replay-workspace__main .replay-controls button { font-size: .78rem; }
    .replay-workspace--four .replay-battle-stats__grid { grid-template-columns: 1fr; }
}
.meta { display: block; color: var(--muted); font-size: .93rem; }
.button, button:not(.text-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 2.7rem;
    border: 1px solid #a5e5e2;
    border-radius: 8px;
    padding: .63rem 1rem;
    background: #9be4e2;
    color: #092332;
    font: inherit;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}
.button:hover, button:not(.text-button):hover { background: #c4f4ed; color: #092332; }
.button-small { padding: .35rem .7rem; }
.button-secondary { background: transparent; border-color: #6a879a; color: var(--cyan); }
.button-secondary:hover { background: rgb(155 228 226 / 10%); color: #c7f7f2; }
.text-button {
    border: 0;
    padding: .45rem .65rem;
    background: transparent;
    font: inherit;
    cursor: pointer;
}
.text-button:hover { text-decoration: underline; }
button:disabled { opacity: .55; cursor: not-allowed; }

.form-panel { max-width: 560px; }
.registration-layout { max-width: 560px; margin-inline: auto; }
.registration-layout .form-panel { max-width: none; }
.auth-page { max-width: 560px; margin-inline: auto; }
.auth-page__intro { margin: .4rem 0 1.5rem; }
.auth-page__intro .eyebrow { margin-bottom: .4rem; }
.auth-page__intro .lead { margin-bottom: 0; }
.auth-page .form-panel { max-width: none; padding: 1.8rem; background: linear-gradient(145deg, #172d43, #111f33); }
.auth-page__links { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-top: 1.25rem; }
.auth-page__links a { font-weight: 650; }
.form-panel form p { margin: 0 0 1.1rem; }
.form-panel label { display: block; margin-bottom: .25rem; font-weight: 650; }
.form-panel input { width: 100%; max-width: 100%; min-height: 2.8rem; padding: .65rem; border: 1px solid #657d91; border-radius: 7px; background: #0d192b; color: #f2f8fb; font: inherit; }
.form-panel input:hover, .bot-upload-form input:hover, .bot-upload-form select:hover { border-color: #a6bbc8; }
.form-panel input[aria-invalid="true"], .bot-upload-form input[aria-invalid="true"] { border-color: #ff9fa8; }
.form-panel .helptext { display: block; margin-top: .25rem; color: var(--muted); font-size: .9rem; }
.errorlist { margin: .45rem 0 .8rem; padding: .55rem .75rem .55rem 1.8rem; border-left: 3px solid #ff9fa8; border-radius: 0 6px 6px 0; background: rgb(122 43 58 / 24%); color: #ffc4c8; }
.bot-page__intro { margin: .3rem 0 1.4rem; }
.bot-page__intro .eyebrow { margin-bottom: .4rem; }
.bot-page__columns { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: start; gap: 1rem; }
.bot-page__columns > .panel { min-width: 0; }
.bot-upload-panel h2, .bot-versions-panel h2 { margin-bottom: 1rem; }
.bot-upload-panel .muted { font-size: .91rem; }
.bot-upload-form { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.bot-upload-form p { margin: 0 0 1rem; }
.bot-upload-form label { display: block; margin-bottom: .4rem; font-weight: 700; }
.bot-upload-form input[type="file"], .bot-upload-form select { display: block; width: 100%; max-width: 100%; min-height: 2.8rem; padding: .55rem; border: 1px solid #657d91; border-radius: 8px; background: #0d192b; color: #f2f8fb; font: inherit; }
.bot-upload-form input::file-selector-button { margin-right: .75rem; padding: .45rem .7rem; border: 1px solid #639293; border-radius: 6px; background: #254b59; color: #dcf7f2; font: inherit; font-weight: 650; cursor: pointer; }
.bot-upload-form .helptext { display: block; margin-top: .4rem; color: var(--muted); font-size: .88rem; }
.bot-upload-form > button { width: 100%; }
.notice { margin: 1rem 0; padding: .75rem .9rem; border: 1px solid #66839a; border-radius: 8px; background: #1c3348; }
.notice--success { border-color: #438d74; background: #1b3c37; color: #b4f1d2; }
.notice--error { border-color: #a95762; background: #422a38; color: #ffd0d2; }
.bot-version-list { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.bot-version { min-width: 0; padding: 1rem; border: 1px solid #40576c; border-radius: 10px; background: #15283c; }
.bot-version__heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.bot-version__heading strong { overflow-wrap: anywhere; }
.bot-version__meta, .bot-version__reason { margin: .4rem 0 0; color: var(--muted); font-size: .88rem; }
.version-status { flex: none; padding: .15rem .5rem; border-radius: 5px; background: #334257; color: #d7e3eb; font-size: .72rem; font-weight: 750; }
.version-status--passed { background: #19483d; color: #a7f1cb; }
.version-status--rejected, .version-status--error { background: #4a2633; color: #ffb5bb; }
.version-status--pending, .version-status--running { background: #55412d; color: #ffdfa8; }
.bot-version__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.bot-version__actions:empty { display: none; }
.bot-version__actions form { margin: 0; }
.bot-version__actions a, .bot-version__actions button { display: inline-flex; align-items: center; min-height: 2.2rem; padding: .4rem .65rem; border: 1px solid #667f90; border-radius: 7px; background: #1d3447; color: var(--amber); font: inherit; font-size: .8rem; font-weight: 650; text-decoration: none; cursor: pointer; }
.bot-version__actions a:hover, .bot-version__actions button:hover { border-color: var(--amber); background: #284457; color: #ffe0ad; }
.profile-heading { padding: 1.8rem 2rem; background: radial-gradient(circle at 88% 12%, rgb(78 151 160 / 16%), transparent 34%), #14273c; }
.profile-heading .eyebrow { margin: 0 0 .4rem; }
.profile-heading h1 { overflow-wrap: anywhere; }
.profile-heading p:last-child { margin-bottom: 0; color: var(--muted); }
.profile-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.profile-summary { min-width: 0; }
.profile-summary__heading { display: flex; align-items: center; gap: .9rem; }
.profile-summary__heading h2 { margin: 0; }
.profile-summary__rating { margin: 1.25rem 0; padding: 1.1rem; border: 1px solid #426174; border-radius: 10px; background: #10283a; color: var(--muted); }
.profile-summary__rating span { display: block; font-size: .88rem; }
.profile-summary__rating strong { margin-right: .2rem; color: #d9f7f3; font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.profile-summary__rank { color: var(--amber); }
.profile-summary__counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.profile-summary__counts span { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; padding: .65rem .75rem; border: 1px solid #344d60; border-radius: 8px; background: #172b3e; color: var(--muted); font-size: .86rem; }
.profile-summary__counts strong { color: #edf6f9; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.profile-summary__counts .profile-count--win strong { color: #a7f1cb; }
.profile-summary__counts .profile-count--loss strong { color: #ffb5bb; }
.profile-summary__change { margin: 1.1rem 0 .5rem; }
.profile-summary__note { margin-bottom: 0; color: var(--muted); font-size: .84rem; }
.profile-versions, .profile-history { margin-top: 1.4rem; }
.profile-versions > .muted { max-width: 85ch; font-size: .89rem; }
.profile-version-list, .profile-history-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.profile-version, .profile-history-item { min-width: 0; padding: .9rem 1rem; border: 1px solid #3a5266; border-radius: 9px; background: #172a3e; }
.profile-version strong { color: #f2f8fb; }
.profile-version .meta { margin-top: .4rem; line-height: 1.5; }
.profile-history-item .meta { margin-top: .25rem; }
@media (max-width: 760px) {
    .profile-summary-grid, .bot-page__columns { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .profile-heading, .auth-page .form-panel { padding: 1.35rem; }
    .profile-summary__counts { grid-template-columns: 1fr; }
}
.prose p { max-width: 72ch; }
.rules-page .prose h2 { color: var(--amber); }
.guide-contents strong { display: block; margin-bottom: .85rem; color: var(--amber); }
.guide-contents__links { display: flex; flex-wrap: wrap; gap: .55rem .65rem; }
.guide-contents__links a { display: inline-block; padding: .35rem .7rem; border: 1px solid #516477; border-radius: 7px; background: #23344a; color: var(--amber); text-decoration: none; }
.guide-contents__links a:hover { border-color: var(--amber); background: #2b4053; color: #ffe0ad; }
.rules-page pre { overflow-x: auto; padding: 1rem; border: 1px solid #33465e; border-radius: 8px; background: #101c2c; }
.rules-page pre code { display: block; padding: 0; border-radius: 0; background: none; color: var(--amber); white-space: pre; }
.rules-page li + li { margin-top: .45rem; }
.guide-back-to-top {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 20;
    box-shadow: 0 6px 24px rgb(0 0 0 / 35%);
}
.guide-back-to-top[hidden] { display: none; }
.rules-warning { padding: .85rem 1rem; border-left: 3px solid var(--amber); border-radius: 0 8px 8px 0; background: rgb(246 191 126 / 9%); color: #ffe0ad; }
code { padding: .1rem .25rem; border-radius: 4px; background: #23344a; color: var(--amber); }

/* The starfield comes from the MIT-licensed original Halite II website. */
.home-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 35%;
    min-height: 450px;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 4rem);
    border: 1px solid #395069;
    border-radius: 26px;
    background: radial-gradient(circle at 84% 43%, rgb(46 106 120 / 35%), transparent 36%),
                linear-gradient(118deg, rgb(16 34 55 / 98%) 18%, rgb(12 28 48 / 92%) 70%, rgb(16 43 60 / 88%));
    box-shadow: 0 24px 70px rgb(1 6 17 / 28%);
}
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(#b5d5dc 1px, transparent 1.5px);
    background-size: 37px 37px;
    opacity: .08;
    mask-image: linear-gradient(90deg, transparent 18%, #000 100%);
}
.hero-copy { position: relative; z-index: 2; max-width: 660px; align-self: center; }
.hero-stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-stars span { position: absolute; width: var(--star-size, 9px); height: var(--star-size, 9px); opacity: var(--star-opacity, .46); filter: drop-shadow(0 0 5px rgb(217 232 242 / 55%)); }
.hero-stars span::before, .hero-stars span::after { content: ""; position: absolute; inset: 0; background: #dceef4; clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%); }
.hero-stars span::after { transform: rotate(45deg) scale(.68); opacity: .7; }
.hero-stars span:nth-child(1) { top: 12%; left: 78%; --star-size: 13px; --star-opacity: .54; }
.hero-stars span:nth-child(2) { top: 25%; left: 92%; --star-size: 8px; --star-opacity: .42; }
.hero-stars span:nth-child(3) { top: 37%; left: 68%; --star-size: 7px; --star-opacity: .35; }
.hero-stars span:nth-child(4) { top: 61%; left: 96%; --star-size: 16px; --star-opacity: .48; }
.hero-stars span:nth-child(5) { top: 80%; left: 73%; --star-size: 10px; --star-opacity: .38; }
.hero-stars span:nth-child(6) { top: 86%; left: 89%; --star-size: 6px; --star-opacity: .32; }
.hero-stars span:nth-child(7) { top: 13%; left: 60%; --star-size: 8px; --star-opacity: .4; }
.hero-stars span:nth-child(8) { top: 72%; left: 52%; --star-size: 5px; --star-opacity: .28; }
.hero-stars span:nth-child(9) { top: 8%; left: 43%; --star-size: 6px; --star-opacity: .28; }
.hero-stars span:nth-child(10) { top: 44%; left: 85%; --star-size: 11px; --star-opacity: .37; }
.hero-stars span:nth-child(11) { top: 70%; left: 83%; --star-size: 5px; --star-opacity: .34; }
.hero-stars span:nth-child(12) { top: 22%; left: 71%; --star-size: 6px; --star-opacity: .3; }
.hero-stars span:nth-child(13) { top: 90%; left: 62%; --star-size: 12px; --star-opacity: .42; }
.hero-stars span:nth-child(14) { top: 7%; left: 96%; --star-size: 5px; --star-opacity: .33; }
.hero-stars span:nth-child(15) { top: 52%; left: 76%; --star-size: 7px; --star-opacity: .32; }
.hero-stars span:nth-child(16) { top: 34%; left: 97%; --star-size: 5px; --star-opacity: .38; }
.hero-stars span:nth-child(17) { top: 79%; left: 96%; --star-size: 9px; --star-opacity: .35; }
.hero-stars span:nth-child(18) { top: 6%; left: 66%; --star-size: 4px; --star-opacity: .25; }
.hero-stars span:nth-child(4n)::before, .hero-stars span:nth-child(4n)::after { background: #f6cf96; }
.home-hero h1 { max-width: 15ch; margin: 1rem 0 1.35rem; font-size: clamp(2.4rem, 4.25vw, 4.1rem); font-weight: 750; line-height: 1.09; letter-spacing: -.045em; }
.home-hero h1 em { color: var(--amber); font-style: normal; white-space: nowrap; }
.home-hero .eyebrow { text-transform: none; }
.home-hero .lead { max-width: 54ch; margin-bottom: 1.5rem; font-size: 1.08rem; }
.hero-actions { margin-bottom: 0; }
.hero-registration-note { margin: .7rem 0 0; color: var(--muted); font-size: .78rem; }
.hero-actions .button { min-height: 3rem; padding-inline: 1.2rem; }
.hero-art { position: relative; z-index: 1; align-self: center; width: min(100%, 360px); aspect-ratio: 1; margin-left: auto; }
.hero-art__orbits { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.hero-art__orbit { fill: none; stroke: rgb(152 210 221 / 27%); stroke-width: 1; }
.hero-art__ship { filter: drop-shadow(0 0 5px currentColor); }
.hero-art__ship--one { fill: #bd00db; color: #bd00db; }
.hero-art__ship--two { fill: #63ceca; color: #63ceca; }
.hero-art__ship--three { fill: #ffbe00; color: #ffbe00; }
.hero-art__ship--four { fill: #c5ec98; color: #c5ec98; }
.hero-art__planet { position: absolute; z-index: 2; inset: 35%; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 29% 25%, #a8d0d4 0, #5d95a7 15%, #37617a 42%, #1b3651 68%, #101d32 100%); box-shadow: inset -16px -10px 27px rgb(1 12 27 / 48%), 0 0 48px rgb(90 173 187 / 22%); animation: planet-breathe 6s ease-in-out infinite alternate; }
.hero-art__planet::after { content: ""; position: absolute; inset: 19% 5% 30% 29%; border-radius: 50%; border-top: 1px solid rgb(218 240 233 / 25%); transform: rotate(-25deg); }

@keyframes planet-breathe {
    from { transform: translateY(2px) scale(.985); box-shadow: inset -16px -10px 27px rgb(1 12 27 / 48%), 0 0 30px rgb(90 173 187 / 16%); }
    to { transform: translateY(-2px) scale(1.025); box-shadow: inset -16px -10px 27px rgb(1 12 27 / 48%), 0 0 58px rgb(90 173 187 / 32%); }
}
.home-current { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-top: 1.3rem; padding: 1.5rem 1.7rem; background: linear-gradient(105deg, rgb(23 44 62 / 98%), rgb(19 31 50 / 98%)); }
.home-current h2 { margin-bottom: .25rem; font-size: 1.55rem; }
.home-current p:last-child { margin-bottom: 0; color: var(--muted); }
.home-current .eyebrow, .home-personal .eyebrow { margin-top: 0; }
.inline-arrow { display: inline-flex; align-items: center; gap: .5rem; flex: none; font-weight: 700; text-decoration: none; }
.inline-arrow:hover { text-decoration: underline; }
.home-personal { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.home-personal p:last-child { margin-bottom: 0; color: var(--muted); }
.home-personal__links { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; }
.home-note { color: var(--muted); }
.home-section { margin-top: 3.4rem; }
.home-section__heading { margin-bottom: 1.2rem; }
.home-section__heading h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); }
.home-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.feature-card { position: relative; display: flex; flex-direction: column; gap: .7rem; min-height: 235px; padding: 1.45rem; border: 1px solid var(--line); border-radius: 16px; background: rgb(19 31 50 / 94%); color: var(--amber); text-decoration: none; transition: border-color .18s ease, transform .18s ease, background .18s ease; }
.feature-card:hover { border-color: #d4a667; background: #1a2b41; color: #ffe0ad; transform: translateY(-3px); }
.feature-card__icon { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-bottom: .25rem; border: 1px solid #426778; border-radius: 10px; background: rgb(91 164 174 / 10%); color: var(--cyan); }
.feature-card__icon .icon { width: 1.4rem; height: 1.4rem; }
.feature-card__number { color: var(--amber); font-size: .66rem; font-weight: 750; letter-spacing: .13em; }
.feature-card strong { font-size: 1.25rem; line-height: 1.25; }
.feature-card > span:nth-last-child(2) { max-width: 27ch; color: var(--muted); font-size: .92rem; }
.feature-card__arrow { position: absolute; right: 1.4rem; top: 1.6rem; color: var(--amber); }

@media (max-width: 900px) {
    .site-header__inner { gap: .5rem 1rem; }
    .site-nav { order: 3; width: 100%; }
    .site-nav a:first-child { padding-left: 0; }
    .home-hero { grid-template-columns: minmax(0, 1fr) 28%; }
    .hero-art { opacity: .55; }
}

@media (max-width: 650px) {
    .site-header__inner { padding: .75rem 1rem; }
    .brand { font-size: 1rem; }
    .account-nav { gap: .25rem; }
    .account-nav .button-small { padding: .35rem .55rem; font-size: .78rem; }
    .login-link { padding: .35rem .3rem; }
    .site-nav { justify-content: space-between; gap: .15rem; }
    .site-nav a { min-height: 2.5rem; padding: .3rem .25rem; font-size: .78rem; }
    .site-nav .icon { display: none; }
    .container { padding: 1.2rem 1rem 3rem; }
    .home-hero { display: block; min-height: 0; padding: 2rem 1.4rem; }
    .home-hero h1 { max-width: 18ch; font-size: clamp(2.1rem, 8vw, 3.2rem); }
    .hero-art { position: absolute; top: 8%; right: -23%; width: 65%; opacity: .2; }
    .home-current, .home-personal { align-items: flex-start; flex-direction: column; gap: .7rem; }
    .home-section { margin-top: 2.6rem; }
    .home-links { grid-template-columns: 1fr; }
    .feature-card { min-height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .feature-card { transition: none; }
    .hero-art__ship { display: none; }
    .hero-art__planet { animation: none; }
}