:root {
    --bg: #f5f7fb;
    --ink: #182033;
    --muted: #667085;
    --panel: #ffffff;
    --line: #d8dee9;
    --blue: #2f6fed;
    --cyan: #14a9c7;
    --red: #e5484d;
    --green: #18a058;
    --amber: #f59e0b;
    --shadow: 0 18px 50px rgba(24, 32, 51, 0.12);
}

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family:
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    background:
        linear-gradient(135deg, rgba(47, 111, 237, 0.12), transparent 34%),
        linear-gradient(315deg, rgba(20, 169, 199, 0.12), transparent 32%),
        var(--bg);
}

html.summary-modal-open,
body.tour-modal-open,
body.summary-modal-open {
    overflow: hidden;
    overscroll-behavior: none;
}

button,
input,
a {
    font: inherit;
}

button,
.ghost {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    border-radius: 8px;
    min-height: 35px;
    padding: 0 12px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}

button:hover,
.ghost:hover {
    transform: translateY(-1px);
    border-color: #a9b4c7;
    box-shadow: 0 8px 18px rgba(24, 32, 51, 0.08);
}

button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}
.primary {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

input {
    height: 35px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 10px;
    background: #fff;
    min-width: 0;
}

.shell {
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: 14px 22px 22px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

h1,
h2,
p {
    margin: 0;
}
h1 {
    font-size: clamp(24px, 4vw, 40px);
    line-height: 0.95;
    letter-spacing: 0;
}
h2 {
    font-size: 18px;
}
.muted {
    color: var(--muted);
    margin-top: 4px;
    font-size: 13px;
}
.profile {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}
.lang-switch {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}
.lang-switch select {
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 850;
    outline: 0;
}
.profile input {
    width: 132px;
}
.auth-panel {
    position: relative;
    min-width: 0;
    z-index: 18;
}
.auth-panel summary {
    min-height: 38px;
    min-width: 0;
    max-width: min(240px, calc(100vw - 28px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 18px rgba(24, 32, 51, 0.06);
    cursor: pointer;
    list-style: none;
}
.auth-panel summary::-webkit-details-marker {
    display: none;
}
.auth-panel summary span {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 900;
    color: var(--blue);
}
.auth-panel summary small {
    flex: 0 0 auto;
    color: var(--muted);
    font-weight: 800;
}
.auth-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: min(360px, calc(100vw - 28px));
    box-sizing: border-box;
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow);
}
.auth-panel:not([open]) .auth-menu {
    display: none;
}
.login-form,
.guest-form,
.session-box,
.identity-box {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.login-form input,
.guest-form input {
    flex: 1 1 132px;
    min-width: 0;
}
.login-form button,
.guest-form button,
.session-box button,
.identity-box button {
    flex: 1 0 max-content;
    max-width: 100%;
    white-space: nowrap;
}
.session-box {
    display: none;
}
.logged-in .login-form,
.logged-in .guest-form {
    display: none;
}
.logged-in .session-box {
    display: flex;
}
.guest .session-box {
    display: none;
}
.identity-box span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}
.identity-linked #oidcLoginBtn,
.identity-linked #oidcLinkBtn {
    display: none;
}
body:not(.identity-linked) #oidcLinked {
    display: none;
}

.stage {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}

.panel,
.board-wrap {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(216, 222, 233, 0.9);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.panel {
    padding: 16px;
}
.room-code {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    gap: 8px;
}
.room-code strong {
    font-size: 26px;
    letter-spacing: 2px;
}
.room-panel-toggle {
    min-height: 32px;
    padding: 0 10px;
    font-weight: 800;
    color: var(--blue);
}
.share-box {
    display: grid;
    gap: 10px;
    margin: 14px 0;
}
.share-box img {
    width: 132px;
    height: 132px;
    border: 1px solid var(--line);
    border-radius: 8px;
    justify-self: center;
    background: #fff;
}
.status-line {
    min-height: 42px;
    padding: 10px;
    border-radius: 8px;
    background: #eef6ff;
    color: #2454a6;
    margin-bottom: 12px;
}
.players {
    display: grid;
    gap: 8px;
}
.player {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.actions {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}
.placement-tools {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.direction-row,
.placement-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.placement-row {
    grid-template-columns: repeat(2, 1fr);
}
.direction-row button {
    min-height: 34px;
    padding: 0;
    font-size: 18px;
    font-weight: 900;
}
.direction-row button.active {
    color: #fff;
    border-color: var(--blue);
    background: var(--blue);
}
.account-card {
    display: grid;
    gap: 3px;
    margin: 12px 0;
    padding: 10px;
    border-radius: 8px;
    background: #f7fafc;
    border: 1px solid var(--line);
}
.account-card span {
    color: var(--muted);
    font-size: 12px;
}
.room-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 12px 0;
}
.room-tab {
    min-height: 34px;
    padding: 0 6px;
    font-size: 13px;
    font-weight: 800;
}
.room-tab.active {
    color: #fff;
    border-color: #182033;
    background: #182033;
}
.room-pane {
    display: none;
}
.room-pane.active {
    display: block;
}
.create-room {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.join-room {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    margin-bottom: 12px;
}
.join-room input {
    text-transform: uppercase;
    letter-spacing: 1px;
}
.join-room input::placeholder {
    text-transform: none;
    letter-spacing: normal;
}
.room-list {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}
.room-list-title {
    font-size: 13px;
    color: var(--muted);
    font-weight: 700;
}
.room-row {
    min-height: 50px;
    justify-content: space-between;
    text-align: left;
    padding: 8px 10px;
}
.room-row span {
    display: grid;
    gap: 2px;
}
.room-row small {
    color: var(--muted);
}
.room-row em {
    font-style: normal;
    font-size: 12px;
    color: var(--blue);
}
.empty-room {
    padding: 10px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    color: var(--muted);
    text-align: center;
}

.boards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    min-width: 0;
}
.lobby-main {
    display: none;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 16px;
    min-width: 0;
}
.lobby-card:first-child {
    grid-row: span 2;
}
.lobby-card {
    min-width: 0;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(216, 222, 233, 0.9);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 16px;
}
.lobby-card-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.lobby-card-head span {
    color: var(--muted);
    font-size: 13px;
    text-align: right;
}
.main-room-list,
.online-rank-list,
.recent-player-list {
    display: grid;
    gap: 10px;
}
.online-row,
.recent-player-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.online-row small,
.recent-player-row small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}
.recent-player-row {
    align-items: flex-start;
}
.online-row em,
.recent-player-row em {
    font-style: normal;
    font-weight: 900;
    color: var(--blue);
}
.mini-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}
.mini-badges b {
    padding: 3px 6px;
    border-radius: 7px;
    background: #eef6ff;
    color: #2454a6;
    font-size: 11px;
    line-height: 1.2;
}
.online-row span {
    display: grid;
    gap: 3px;
}
.online-row small {
    color: var(--muted);
}
.online-row em {
    font-style: normal;
    font-weight: 900;
    color: var(--blue);
}
.lobby-mode .boards,
.lobby-mode .feed,
.lobby-mode .placement-tools,
.lobby-mode #autoPlace,
.lobby-mode #readyBtn,
.lobby-mode #leaveRoom,
.lobby-mode #inviteToggle {
    display: none;
}
.lobby-mode .lobby-main {
    display: grid;
    grid-column: span 2;
}
.battle-mode .lobby-main {
    display: none;
}
.battle-mode .room-tabs {
    grid-template-columns: repeat(2, 1fr);
}
.battle-mode [data-room-tab="rooms"],
.battle-mode [data-room-pane="rooms"] {
    display: none;
}
.room-panel {
    transition:
        width 0.22s ease,
        padding 0.22s ease,
        transform 0.22s ease;
}
.room-panel-collapsed.battle-mode .stage {
    grid-template-columns: 88px minmax(0, 1fr) 320px;
}
.room-panel-collapsed.battle-mode .room-panel {
    padding: 10px;
    overflow: hidden;
}
.room-panel-collapsed.battle-mode .room-code {
    border-bottom: 0;
    padding-bottom: 0;
    display: grid;
    gap: 8px;
}
.room-panel-collapsed.battle-mode .room-code strong {
    font-size: 13px;
    letter-spacing: 1px;
    text-align: center;
    word-break: break-all;
}
.room-panel-collapsed.battle-mode .room-panel-toggle {
    width: 100%;
    min-height: 44px;
    writing-mode: vertical-rl;
}
.room-panel-collapsed.battle-mode .room-panel > :not(.room-code) {
    display: none;
}
.board-wrap {
    --board-max-cell: 36px;
    padding: 14px;
    min-width: 0;
    overflow: hidden;
    container-type: inline-size;
}
.board-head {
    min-height: 48px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
}
.board-head span {
    color: var(--muted);
    font-size: 13px;
    text-align: right;
}

.board {
    --cell: min(var(--board-max-cell), calc((100cqw - 4px) / 10));
    display: grid;
    grid-template-columns: repeat(10, var(--cell));
    grid-template-rows: repeat(10, var(--cell));
    width: calc(var(--cell) * 10);
    min-width: 0;
    max-width: 100%;
    margin: 0 auto;
    border: 2px solid #7991b3;
    background: #dfe9f7;
    position: relative;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}
.battle-mode .boards,
.battle-mode .board-wrap,
.battle-mode .board,
.battle-mode .cell {
    overscroll-behavior: contain;
    touch-action: pan-y;
}
@supports not (width: 1cqw) {
    .board {
        --cell: min(var(--board-max-cell), calc((100vw - 72px) / 10));
    }
    @media (min-width: 1121px) {
        .board {
            --cell: min(var(--board-max-cell), calc((100vw - 690px) / 20));
        }
    }
}
.cell {
    position: relative;
    border: 1px solid rgba(74, 99, 133, 0.42);
    background: rgba(255, 255, 255, 0.55);
    display: grid;
    place-items: center;
    font-weight: 800;
    color: transparent;
    transition:
        background 0.18s ease,
        transform 0.18s ease;
}
.cell:hover {
    background: rgba(47, 111, 237, 0.16);
}
.cell.plane {
    background: rgba(47, 111, 237, 0.62);
    box-shadow:
        inset 0 0 0 2px #1b3f8f,
        inset 0 0 0 4px rgba(255, 255, 255, 0.24);
}
#ownBoard .cell.plane {
    background: rgba(47, 111, 237, 0.64);
}
#ownBoard .cell.head {
    background: radial-gradient(
        circle at 50% 46%,
        rgba(255, 255, 255, 0.42),
        rgba(47, 111, 237, 0.9) 42%,
        rgba(25, 76, 190, 0.95)
    );
    box-shadow:
        inset 0 0 0 3px #061a42,
        inset 0 0 0 5px rgba(255, 255, 255, 0.28),
        0 0 14px rgba(47, 111, 237, 0.32);
}
.enemy .cell.plane {
    background: rgba(229, 72, 77, 0.42);
}
.enemy .cell.head {
    background: radial-gradient(
        circle at 50% 46%,
        rgba(255, 255, 255, 0.34),
        rgba(229, 72, 77, 0.82) 42%,
        rgba(173, 38, 48, 0.9)
    );
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.24),
        0 0 14px rgba(229, 72, 77, 0.28);
}
#ownBoard .cell.plane-0,
.reveal-col.own-side .rcell.plane-0 {
    background: #6ea2ff;
    box-shadow:
        inset 0 0 0 2px #1b3f8f,
        inset 0 0 0 4px rgba(255, 255, 255, 0.24);
}
#ownBoard .cell.plane-1,
.reveal-col.own-side .rcell.plane-1 {
    background: #4dd4d0;
    box-shadow:
        inset 0 0 0 2px #0b6f70,
        inset 0 0 0 4px rgba(255, 255, 255, 0.24);
}
#ownBoard .cell.plane-2,
.reveal-col.own-side .rcell.plane-2 {
    background: #7ddc8a;
    box-shadow:
        inset 0 0 0 2px #13733d,
        inset 0 0 0 4px rgba(255, 255, 255, 0.24);
}
#ownBoard .cell.head.plane-0,
.reveal-col.own-side .rcell.head.plane-0 {
    background: #1d4ed8;
    box-shadow:
        inset 0 0 0 3px #061a42,
        inset 0 0 0 5px rgba(255, 255, 255, 0.28),
        0 0 14px rgba(47, 111, 237, 0.32);
}
#ownBoard .cell.head.plane-1,
.reveal-col.own-side .rcell.head.plane-1 {
    background: #0f8f89;
    box-shadow:
        inset 0 0 0 3px #083c43,
        inset 0 0 0 5px rgba(255, 255, 255, 0.28),
        0 0 14px rgba(15, 143, 137, 0.28);
}
#ownBoard .cell.head.plane-2,
.reveal-col.own-side .rcell.head.plane-2 {
    background: #1f9d55;
    box-shadow:
        inset 0 0 0 3px #073f24,
        inset 0 0 0 5px rgba(255, 255, 255, 0.28),
        0 0 14px rgba(31, 157, 85, 0.28);
}
.enemy .cell.plane-0,
.reveal-col.enemy-side .rcell.plane-0 {
    background: #ff8a8f;
    box-shadow:
        inset 0 0 0 2px #9f1d28,
        inset 0 0 0 4px rgba(255, 255, 255, 0.22);
}
.enemy .cell.plane-1,
.reveal-col.enemy-side .rcell.plane-1 {
    background: #f6b25f;
    box-shadow:
        inset 0 0 0 2px #92400e,
        inset 0 0 0 4px rgba(255, 255, 255, 0.22);
}
.enemy .cell.plane-2,
.reveal-col.enemy-side .rcell.plane-2 {
    background: #c99bff;
    box-shadow:
        inset 0 0 0 2px #5620a8,
        inset 0 0 0 4px rgba(255, 255, 255, 0.22);
}
.enemy .cell.head.plane-0,
.reveal-col.enemy-side .rcell.head.plane-0 {
    background: #e5484d;
    box-shadow:
        inset 0 0 0 3px #5f0f16,
        inset 0 0 0 5px rgba(255, 255, 255, 0.24),
        0 0 14px rgba(229, 72, 77, 0.28);
}
.enemy .cell.head.plane-1,
.reveal-col.enemy-side .rcell.head.plane-1 {
    background: #d97706;
    box-shadow:
        inset 0 0 0 3px #5a2608,
        inset 0 0 0 5px rgba(255, 255, 255, 0.24),
        0 0 14px rgba(217, 119, 6, 0.28);
}
.enemy .cell.head.plane-2,
.reveal-col.enemy-side .rcell.head.plane-2 {
    background: #7c3aed;
    box-shadow:
        inset 0 0 0 3px #331066,
        inset 0 0 0 5px rgba(255, 255, 255, 0.24),
        0 0 14px rgba(124, 58, 237, 0.28);
}

.cell.head {
    --head-rotate: rotate(0deg);
    overflow: hidden;
}
.cell.head::before {
    content: "";
    position: absolute;
    inset: -34%;
    background: conic-gradient(
        from 90deg,
        transparent,
        rgba(255, 255, 255, 0.34),
        transparent 34%,
        transparent
    );
    opacity: 0.82;
    animation: headHalo 2.4s linear infinite;
}
.cell.head[data-dir="N"],
.rcell.head[data-dir="N"] {
    --head-rotate: rotate(0deg);
}
.cell.head[data-dir="E"],
.rcell.head[data-dir="E"] {
    --head-rotate: rotate(90deg);
}
.cell.head[data-dir="S"],
.rcell.head[data-dir="S"] {
    --head-rotate: rotate(180deg);
}
.cell.head[data-dir="W"],
.rcell.head[data-dir="W"] {
    --head-rotate: rotate(-90deg);
}
.cell.head:not(.boom)::after {
    content: "♥️";
    color: #fff;
    font-size: clamp(13px, calc(var(--cell) * 0.56), 24px);
    line-height: 1;
    z-index: 2;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.32));
    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.58),
        0 2px 8px rgba(0, 0, 0, 0.26);
    transform: var(--head-rotate);
    transform-origin: center;
    animation: heartHeadBeat 1.25s ease-in-out infinite;
}
.cell.replay-plane {
    background: rgba(47, 111, 237, 0.5);
    box-shadow:
        inset 0 0 0 2px #1b3f8f,
        inset 0 0 0 4px rgba(255, 255, 255, 0.18);
}
.cell.targetable {
    cursor: crosshair;
}
.cell.placeable {
    cursor: pointer;
}
.cell.place-preview-ok:hover {
    background: rgba(24, 160, 88, 0.26);
    box-shadow: inset 0 0 0 2px rgba(24, 160, 88, 0.45);
}
.cell.place-preview-bad:hover {
    background: rgba(229, 72, 77, 0.16);
    box-shadow: inset 0 0 0 2px rgba(229, 72, 77, 0.35);
}
/* 摆放整机落点预览：合法绿 / 越界或重叠红，机头更深 */
.cell.ghost-ok {
    background: rgba(24, 160, 88, 0.4);
    box-shadow: inset 0 0 0 2px rgba(24, 160, 88, 0.7);
}
.cell.ghost-ok.ghost-head {
    background: rgba(24, 160, 88, 0.72);
}
.cell.ghost-bad {
    background: rgba(229, 72, 77, 0.4);
    box-shadow: inset 0 0 0 2px rgba(229, 72, 77, 0.7);
}
.cell.ghost-bad.ghost-head {
    background: rgba(229, 72, 77, 0.7);
}
/* 命中标记：绝对定位居中，避免网格内百分比宽度塌成 0（原来标记不显示的根因） */
.cell.miss::after,
.cell.hit::after,
.cell.boom::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 48%;
    aspect-ratio: 1;
    border-radius: 50%;
    animation: pop 0.28s ease both;
    z-index: 2;
}
.cell.miss::after {
    border: 3px solid #718096;
    background: rgba(255, 255, 255, 0.55);
}
.cell.hit::after {
    background: var(--amber);
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.25);
}
.cell.boom::after {
    width: 72%;
    border-radius: 0;
    background: radial-gradient(
        circle,
        #fff 0 12%,
        #ff4d6d 13% 42%,
        var(--red) 43% 100%
    );
    clip-path: polygon(
        50% 0,
        61% 34%,
        98% 35%,
        68% 56%,
        79% 91%,
        50% 70%,
        21% 91%,
        32% 56%,
        2% 35%,
        39% 34%
    );
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.9),
        0 0 24px rgba(229, 72, 77, 0.86),
        0 0 44px rgba(245, 158, 11, 0.46);
}
.cell.flash {
    animation: radar 0.7s ease;
}
.cell.boom {
    animation: headPulse 1.15s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.cell.coord::before {
    content: attr(data-label);
    position: absolute;
    left: 4px;
    top: 3px;
    color: rgba(24, 32, 51, 0.42);
    font-size: clamp(8px, calc(var(--cell) * 0.24), 10px);
    font-weight: 700;
}

@keyframes pop {
    from {
        transform: scale(0.25);
        opacity: 0.2;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes headIconPop {
    from {
        transform: var(--head-rotate) scale(0.25);
        opacity: 0.2;
    }
    to {
        transform: var(--head-rotate) scale(1);
        opacity: 1;
    }
}
@keyframes headHalo {
    from {
        transform: rotate(0deg) scale(1);
    }
    to {
        transform: rotate(360deg) scale(1);
    }
}
@keyframes heartHeadBeat {
    0%,
    100% {
        transform: var(--head-rotate) scale(1);
    }
    22% {
        transform: var(--head-rotate) scale(1.18);
    }
    38% {
        transform: var(--head-rotate) scale(0.98);
    }
    56% {
        transform: var(--head-rotate) scale(1.12);
    }
}
@keyframes radar {
    0% {
        box-shadow:
            inset 0 0 0 0 rgba(20, 169, 199, 0.75),
            0 0 0 0 rgba(20, 169, 199, 0.35);
        transform: scale(1);
    }
    45% {
        box-shadow:
            inset 0 0 0 12px rgba(20, 169, 199, 0),
            0 0 0 9px rgba(20, 169, 199, 0.12);
        transform: scale(1.08);
    }
    100% {
        box-shadow: none;
        transform: scale(1);
    }
}
@keyframes headPulse {
    0% {
        transform: scale(1) rotate(0);
        filter: saturate(1);
    }
    18% {
        transform: scale(1.18) rotate(-2deg);
        filter: saturate(2.3) brightness(1.15);
    }
    38% {
        transform: scale(0.96) rotate(2deg);
        filter: saturate(1.7);
    }
    62% {
        transform: scale(1.1) rotate(-1deg);
        filter: saturate(2);
    }
    100% {
        transform: scale(1) rotate(0);
        filter: saturate(1);
    }
}

.feed {
    min-height: 580px;
}
.tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}
.tab {
    min-height: 34px;
    padding: 0 6px;
}
.tab.active {
    background: #182033;
    color: #fff;
    border-color: #182033;
}
.pane {
    display: none;
    max-height: 520px;
    overflow: auto;
}
.pane.active {
    display: grid;
    gap: 8px;
}
.event,
.rank-row,
.achievement,
.history-row {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 8px;
    padding: 10px;
}
.rank-row,
.history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.achievement.done {
    border-color: rgba(24, 160, 88, 0.45);
    background: rgba(24, 160, 88, 0.08);
}
.badge {
    color: var(--muted);
    font-size: 12px;
}
.toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%) translateY(20px);
    background: #182033;
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
    z-index: 20;
}
.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.invite-layer {
    position: fixed;
    right: 18px;
    top: 96px;
    width: 188px;
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow);
    z-index: 15;
    cursor: default;
    transition:
        transform 0.22s ease,
        opacity 0.22s ease,
        width 0.22s ease;
}
.invite-layer.collapsed {
    width: 46px;
    transform: translateX(0);
    opacity: 0.9;
    cursor: pointer;
    padding: 10px 8px;
}
.invite-layer.collapsed::before {
    content: "邀请";
    writing-mode: vertical-rl;
    text-orientation: mixed;
    justify-self: center;
    font-weight: 800;
    color: var(--blue);
}
.invite-layer.collapsed .invite-head,
.invite-layer.collapsed img,
.invite-layer.collapsed > button {
    display: none;
}
.invite-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.invite-head button {
    min-height: 30px;
    padding: 0 8px;
}
.invite-layer img {
    width: 132px;
    height: 132px;
    justify-self: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.hit-overlay {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255, 255, 255, 0.28),
            transparent 10%
        ),
        radial-gradient(
            circle at center,
            rgba(229, 72, 77, 0.42),
            rgba(245, 158, 11, 0.18) 34%,
            rgba(24, 32, 51, 0.78)
        );
}
.turn-overlay {
    position: fixed;
    inset: 0;
    z-index: 28;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
}
.turn-overlay::before,
.turn-overlay::after {
    content: "";
    position: absolute;
    inset: auto -12% 48%;
    height: 7px;
    opacity: 0;
    transform: translateX(-110%) skewX(-18deg);
}
.turn-overlay .turn-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 8px;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.48),
        transparent
    );
    opacity: 0;
    transform: translateX(-70%);
}
.turn-overlay::after {
    inset: 52% -12% auto;
    transform: translateX(110%) skewX(-18deg);
}
.turn-overlay.mine {
    background: radial-gradient(
        circle at center,
        rgba(47, 111, 237, 0.22),
        rgba(24, 32, 51, 0.16),
        transparent 68%
    );
}
.turn-overlay.opponent {
    background: radial-gradient(
        circle at center,
        rgba(245, 158, 11, 0.24),
        rgba(24, 32, 51, 0.18),
        transparent 68%
    );
}
.turn-overlay.neutral {
    background: radial-gradient(
        circle at center,
        rgba(20, 169, 199, 0.22),
        rgba(24, 32, 51, 0.16),
        transparent 68%
    );
}
.turn-overlay.mine::before,
.turn-overlay.mine::after {
    background: linear-gradient(
        90deg,
        transparent,
        var(--blue),
        var(--cyan),
        transparent
    );
}
.turn-overlay.opponent::before,
.turn-overlay.opponent::after {
    background: linear-gradient(
        90deg,
        transparent,
        var(--amber),
        var(--red),
        transparent
    );
}
.turn-overlay.neutral::before,
.turn-overlay.neutral::after {
    background: linear-gradient(
        90deg,
        transparent,
        var(--cyan),
        #fff,
        transparent
    );
}
.turn-card {
    position: relative;
    min-width: min(360px, calc(100vw - 44px));
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, 0.54);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 36%),
        rgba(24, 32, 51, 0.9);
    color: #fff;
    text-align: center;
    box-shadow:
        0 22px 70px rgba(24, 32, 51, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(10px) scale(0.96);
    overflow: hidden;
}
.turn-title {
    font-size: clamp(28px, 6vw, 52px);
    font-weight: 900;
    line-height: 1;
}
.turn-text {
    margin-top: 8px;
    font-size: clamp(15px, 3vw, 20px);
    font-weight: 800;
}
.turn-overlay.show.start {
    animation: turnStartMask 1.8s ease both;
}
.turn-overlay.show.start .turn-card {
    animation: turnStartCard 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.turn-overlay.show.start .turn-card::before {
    animation: cardShine 1.8s ease both;
}
.turn-overlay.show.swap {
    animation: turnSwapMask 1.35s ease both;
}
.turn-overlay.show.swap .turn-card {
    animation: turnSwapCard 1.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.turn-overlay.show.swap .turn-card::before {
    animation: cardShine 1.35s ease both;
}
.turn-overlay.show.swap::before {
    animation: turnStreakLeft 1.35s ease both;
}
.turn-overlay.show.swap::after {
    animation: turnStreakRight 1.35s ease both;
}
.turn-overlay.show.end {
    z-index: 36;
    animation: turnEndMask 3s ease both;
}
.turn-overlay.show.end .turn-card {
    animation: turnEndCard 3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.turn-overlay.show.end .turn-card::before {
    animation: cardShine 3s ease both;
}
.turn-overlay.show.end::before {
    animation: turnStreakLeft 3s ease both;
}
.turn-overlay.show.end::after {
    animation: turnStreakRight 3s ease both;
}
.turn-overlay.end.win {
    background: radial-gradient(
        circle at center,
        rgba(20, 184, 116, 0.3),
        rgba(20, 169, 199, 0.18),
        transparent 68%
    );
}
.turn-overlay.end.loss {
    background: radial-gradient(
        circle at center,
        rgba(229, 72, 77, 0.3),
        rgba(245, 158, 11, 0.16),
        transparent 68%
    );
}
.turn-overlay.end.win::before,
.turn-overlay.end.win::after {
    background: linear-gradient(
        90deg,
        transparent,
        var(--green),
        var(--cyan),
        transparent
    );
}
.turn-overlay.end.loss::before,
.turn-overlay.end.loss::after {
    background: linear-gradient(
        90deg,
        transparent,
        var(--red),
        var(--amber),
        transparent
    );
}
.scan-layer {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: none;
    place-items: center;
    padding: 18px;
    background: rgba(24, 32, 51, 0.68);
}
.scan-layer.show {
    display: grid;
}
.scan-card {
    width: min(420px, 100%);
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}
.scan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.scan-head button {
    min-height: 32px;
}
.scan-card video {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    background: #182033;
}
.scan-card p {
    color: var(--muted);
    text-align: center;
    font-size: 13px;
}
.hit-overlay.show {
    animation: hitMask 1.5s ease both;
}
.hit-card {
    width: min(420px, calc(100vw - 36px));
    text-align: center;
    color: #fff;
    text-shadow:
        0 2px 14px rgba(0, 0, 0, 0.35),
        0 0 28px rgba(255, 255, 255, 0.34);
    transform: scale(0.8);
}
.hit-title {
    font-size: clamp(38px, 9vw, 76px);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    margin-bottom: 12px;
}
.hit-overlay.show .hit-card {
    animation: hitCardBoom 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes hitMask {
    0% {
        opacity: 0;
    }
    14% {
        opacity: 1;
    }
    72% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes hitCardBoom {
    0% {
        opacity: 0;
        transform: scale(0.52) rotate(-3deg);
        filter: blur(4px);
    }
    18% {
        opacity: 1;
        transform: scale(1.12) rotate(1deg);
        filter: blur(0);
    }
    38% {
        transform: scale(0.98) rotate(-1deg);
    }
    70% {
        opacity: 1;
        transform: scale(1.02) rotate(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.9) translateY(-12px);
    }
}
@keyframes turnStartMask {
    0% {
        opacity: 0;
    }
    14% {
        opacity: 1;
    }
    76% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes turnStartCard {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.86);
        filter: blur(4px);
    }
    22% {
        opacity: 1;
        transform: translateY(0) scale(1.04);
        filter: blur(0);
    }
    72% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }
}
@keyframes cardShine {
    0% {
        opacity: 0;
        transform: translateX(-80%);
    }
    18% {
        opacity: 0.45;
    }
    62% {
        opacity: 0.32;
        transform: translateX(80%);
    }
    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}
@keyframes turnSwapMask {
    0% {
        opacity: 0;
    }
    16% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes turnSwapCard {
    0% {
        opacity: 0;
        transform: translateX(-26px) scale(0.96);
    }
    22% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    72% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(24px) scale(0.98);
    }
}
@keyframes turnEndMask {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    82% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes turnEndCard {
    0% {
        opacity: 0;
        transform: translateY(22px) scale(0.82);
        filter: blur(5px);
    }
    16% {
        opacity: 1;
        transform: translateY(0) scale(1.08);
        filter: blur(0);
    }
    32% {
        transform: scale(1);
    }
    82% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-16px) scale(0.96);
    }
}
@keyframes turnStreakLeft {
    0% {
        opacity: 0;
        transform: translateX(-110%) skewX(-18deg);
    }
    18% {
        opacity: 0.9;
    }
    72% {
        opacity: 0.45;
    }
    100% {
        opacity: 0;
        transform: translateX(110%) skewX(-18deg);
    }
}
@keyframes turnStreakRight {
    0% {
        opacity: 0;
        transform: translateX(110%) skewX(-18deg);
    }
    18% {
        opacity: 0.9;
    }
    72% {
        opacity: 0.45;
    }
    100% {
        opacity: 0;
        transform: translateX(-110%) skewX(-18deg);
    }
}
.battle-summary {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) translateY(calc(100% + 18px));
    width: min(920px, 100vw);
    max-height: min(72vh, 720px);
    overflow: auto;
    z-index: 14;
    opacity: 0;
    pointer-events: none;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--shadow);
    transition:
        opacity 0.24s ease,
        transform 0.34s cubic-bezier(.22, 1, .36, 1);
}
body.summary-modal-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 33;
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(82, 234, 216, 0.14),
            transparent 34%
        ),
        rgba(2, 8, 12, 0.74);
    backdrop-filter: blur(8px);
}
body.summary-modal-open .battle-summary.show {
    z-index: 34;
}
body.summary-modal-open .stage,
body.summary-modal-open .boards,
body.summary-modal-open .board-wrap,
body.summary-modal-open .board,
body.summary-modal-open .cell {
    touch-action: none;
}
body.summary-modal-open .battle-summary {
    touch-action: pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.battle-summary.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.summary-head,
.summary-player {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}
.summary-head span,
.summary-player span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}
.summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0;
}
.summary-player {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 8px;
    padding: 10px;
}
.summary-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}
.summary-badges b {
    max-width: 100%;
    padding: 3px 7px;
    border: 1px solid rgba(47, 111, 237, 0.22);
    border-radius: 7px;
    background: #eef6ff;
    color: #2454a6;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
}
.summary-player em {
    font-style: normal;
    font-weight: 900;
    font-size: 22px;
}
.summary-player .plus {
    color: var(--green);
}
.summary-player .minus {
    color: var(--red);
}
.summary-log {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
}
/* —— 结束战报：Tab 切换 双方布局 / 积分结算 / 战斗记录 —— */
.summary-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.summary-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 12px 0 10px;
}
.stab {
    min-height: 34px;
    padding: 0 8px;
    font-weight: 700;
}
.stab.active {
    background: #182033;
    color: #fff;
    border-color: #182033;
}
.summary-body {
    min-height: 56px;
}
.reveal-boards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    justify-items: center;
}
.reveal-col {
    width: 100%;
    max-width: 250px;
    display: grid;
    gap: 6px;
    justify-items: center;
}
.reveal-name {
    font-weight: 800;
    font-size: 13px;
}
.reveal-board {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 1px;
    width: 100%;
    aspect-ratio: 1;
    background: #7991b3;
    border: 2px solid #7991b3;
    border-radius: 4px;
    overflow: hidden;
}
.rcell {
    position: relative;
    background: #dfe9f7;
}
.rcell.plane {
    background: rgba(47, 111, 237, 0.58);
    box-shadow:
        inset 0 0 0 2px #1b3f8f,
        inset 0 0 0 3px rgba(255, 255, 255, 0.22);
}
.rcell.head {
    background: #1d4ed8;
    box-shadow:
        inset 0 0 0 2px #061a42,
        inset 0 0 0 4px rgba(255, 255, 255, 0.25);
}
.rcell.head:not(.boom)::after {
    content: "♥";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 12px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.36);
    transform: var(--head-rotate);
    transform-origin: center;
}
.rcell.miss::after,
.rcell.hit::after,
.rcell.boom::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    aspect-ratio: 1;
    border-radius: 50%;
}
.rcell.miss::after {
    width: 40%;
    border: 2px solid #718096;
    background: rgba(255, 255, 255, 0.55);
}
.rcell.hit::after {
    width: 58%;
    background: var(--amber);
}
.rcell.boom::after {
    width: 74%;
    border-radius: 0;
    background: var(--red);
    clip-path: polygon(
        50% 0,
        61% 34%,
        98% 35%,
        68% 56%,
        79% 91%,
        50% 70%,
        21% 91%,
        32% 56%,
        2% 35%,
        39% 34%
    );
}
@media (max-width: 560px) {
    .reveal-boards {
        grid-template-columns: 1fr;
    }
}
.game-ended .board-wrap {
    overflow: visible;
}
.game-ended .board {
    transform: none;
    opacity: 0.9;
}

/* ============ 上线版视觉润色：更强的产品感、层级和游戏氛围 ============ */
:root {
    --surface: rgba(255, 255, 255, 0.88);
    --surface-strong: rgba(255, 255, 255, 0.96);
    --soft-line: rgba(149, 164, 190, 0.36);
    --navy: #17223a;
    --aqua: #0ea5b7;
    --violet: #6d5dfc;
    --gold: #e9a923;
    --card-shadow:
        0 14px 36px rgba(23, 34, 58, 0.1), 0 2px 10px rgba(23, 34, 58, 0.04);
    --lift-shadow:
        0 20px 48px rgba(23, 34, 58, 0.16), 0 4px 16px rgba(23, 34, 58, 0.06);
}

body {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.72),
            rgba(245, 247, 251, 0.48) 34%,
            rgba(232, 240, 251, 0.68)
        ),
        linear-gradient(115deg, rgba(47, 111, 237, 0.14), transparent 38%),
        linear-gradient(245deg, rgba(14, 165, 183, 0.14), transparent 36%),
        repeating-linear-gradient(
            0deg,
            rgba(23, 34, 58, 0.035) 0 1px,
            transparent 1px 32px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(23, 34, 58, 0.026) 0 1px,
            transparent 1px 32px
        ),
        var(--bg);
}

.shell {
    padding: 18px 22px 26px;
}

.topbar {
    position: sticky;
    top: 10px;
    z-index: 16;
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 12px 30px rgba(23, 34, 58, 0.08);
    backdrop-filter: blur(18px);
}

.brand {
    position: relative;
    min-width: 0;
    padding-left: 52px;
}
.brand::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 38px;
    height: 38px;
    transform: translateY(-50%);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.36), transparent 46%),
        linear-gradient(135deg, var(--blue), var(--aqua));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        0 10px 24px rgba(47, 111, 237, 0.26);
}
.brand::after {
    content: "";
    position: absolute;
    left: 13px;
    top: 50%;
    width: 13px;
    height: 22px;
    transform: translateY(-50%) rotate(45deg);
    border-radius: 7px 7px 3px 3px;
    background: #fff;
    box-shadow:
        9px 9px 0 -5px rgba(255, 255, 255, 0.92),
        -8px 9px 0 -5px rgba(255, 255, 255, 0.92);
}
h1 {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1;
    color: var(--navy);
}
.muted {
    color: #607089;
    font-weight: 650;
}

button,
.ghost,
input,
.auth-panel summary {
    border-color: var(--soft-line);
}
button,
.ghost {
    font-weight: 750;
    background: linear-gradient(180deg, #fff, #f7faff);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9),
        0 5px 14px rgba(23, 34, 58, 0.05);
}
button:hover,
.ghost:hover {
    border-color: rgba(47, 111, 237, 0.38);
    box-shadow: 0 10px 24px rgba(23, 34, 58, 0.1);
}
button:active,
.ghost:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(23, 34, 58, 0.08);
}
.primary,
#newPublicRoom,
#newComputerRoom {
    border-color: transparent;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 42%),
        linear-gradient(135deg, var(--blue), var(--aqua));
    box-shadow: 0 12px 26px rgba(47, 111, 237, 0.22);
}
#newComputerRoom {
    grid-column: 1 / -1;
    min-height: 54px;
    justify-content: flex-start;
    padding: 0 16px;
    font-size: 16px;
}
#newPrivateRoom {
    color: #5d3f03;
    border-color: rgba(233, 169, 35, 0.36);
    background: linear-gradient(180deg, #fffaf0, #fff4cf);
}

.panel,
.board-wrap,
.lobby-card,
.battle-summary,
.auth-menu,
.invite-layer {
    border-color: rgba(255, 255, 255, 0.76);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.94),
            rgba(255, 255, 255, 0.82)
        ),
        var(--surface);
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(12px);
}
.panel,
.board-wrap,
.lobby-card {
    position: relative;
    overflow: hidden;
}
.panel::before,
.board-wrap::before,
.lobby-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--aqua), var(--gold));
    opacity: 0.82;
}

.room-code {
    padding-top: 2px;
}
.room-code strong {
    color: var(--navy);
    font-weight: 950;
}
.room-panel-toggle {
    color: var(--blue);
    background: #eef6ff;
}
.account-card {
    border-color: rgba(47, 111, 237, 0.16);
    background:
        linear-gradient(
            135deg,
            rgba(47, 111, 237, 0.08),
            rgba(14, 165, 183, 0.08)
        ),
        #fff;
}
.account-card strong {
    color: var(--navy);
}
.room-tabs,
.tabs,
.summary-tabs {
    padding: 4px;
    border: 1px solid rgba(149, 164, 190, 0.24);
    border-radius: 8px;
    background: rgba(238, 244, 252, 0.72);
}
.room-tab,
.tab,
.stab {
    border: 0;
    background: transparent;
    box-shadow: none;
}
.room-tab.active,
.tab.active,
.stab.active {
    color: #fff;
    background: linear-gradient(135deg, var(--navy), #263654);
    box-shadow: 0 8px 18px rgba(23, 34, 58, 0.16);
}

.status-line {
    border: 1px solid rgba(47, 111, 237, 0.14);
    background:
        linear-gradient(
            135deg,
            rgba(47, 111, 237, 0.1),
            rgba(14, 165, 183, 0.08)
        ),
        #f7fbff;
    color: #2454a6;
    font-weight: 750;
}
.player,
.event,
.rank-row,
.achievement,
.history-row,
.online-row,
.recent-player-row,
.room-row {
    border-color: rgba(149, 164, 190, 0.28);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 6px 16px rgba(23, 34, 58, 0.045);
}
.room-row,
.online-row,
.recent-player-row,
.rank-row,
.history-row {
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}
.room-row:hover,
.online-row:hover,
.recent-player-row:hover,
.rank-row:hover,
.history-row:hover {
    transform: translateY(-1px);
    border-color: rgba(47, 111, 237, 0.28);
    box-shadow: 0 14px 30px rgba(23, 34, 58, 0.1);
}
.room-row strong,
.online-row strong,
.recent-player-row strong,
.rank-row strong {
    color: var(--navy);
}
.room-row em,
.online-row em,
.recent-player-row em {
    min-width: max-content;
}
.empty-room {
    border-color: rgba(149, 164, 190, 0.34);
    background: rgba(255, 255, 255, 0.58);
}

.lobby-mode .stage {
    align-items: stretch;
    min-height: calc(100vh - 132px);
}
.lobby-main {
    gap: 18px;
}
.lobby-card {
    padding: 18px;
}
.lobby-card-head {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(149, 164, 190, 0.2);
}
.lobby-card-head h2 {
    color: var(--navy);
}
.lobby-card-head span {
    max-width: 190px;
    line-height: 1.35;
}
.recent-player-row > div,
.online-row > span {
    min-width: 0;
}
.mini-badges b {
    border: 1px solid rgba(47, 111, 237, 0.12);
    background: linear-gradient(180deg, #f3f8ff, #eaf3ff);
    font-weight: 850;
}

.board-wrap {
    padding: 16px;
}
.board-head {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(149, 164, 190, 0.22);
}
.board-head h2 {
    color: var(--navy);
}
.board {
    margin-top: 12px;
    border: 3px solid #526782;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.28) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.28) 1px, transparent 1px),
        #d7e4f4;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.5),
        0 14px 34px rgba(23, 34, 58, 0.1);
}
.cell {
    border-color: rgba(82, 103, 130, 0.36);
    background: rgba(255, 255, 255, 0.64);
}
.cell.coord::before {
    color: rgba(23, 34, 58, 0.52);
}
.cell.targetable:hover {
    background: rgba(245, 158, 11, 0.22);
    box-shadow: inset 0 0 0 2px rgba(245, 158, 11, 0.46);
}
.cell.placeable:hover {
    background: rgba(14, 165, 183, 0.18);
    box-shadow: inset 0 0 0 2px rgba(14, 165, 183, 0.34);
}

.feed {
    min-height: 580px;
}
.pane {
    scrollbar-color: rgba(47, 111, 237, 0.35) transparent;
}
.achievement.done {
    border-color: rgba(24, 160, 88, 0.32);
    background:
        linear-gradient(
            135deg,
            rgba(24, 160, 88, 0.12),
            rgba(14, 165, 183, 0.08)
        ),
        #fff;
}
.badge {
    color: #64748b;
    font-weight: 650;
}

.battle-summary {
    border-color: rgba(255, 255, 255, 0.78);
    box-shadow: 0 24px 70px rgba(23, 34, 58, 0.22);
}
.summary-player {
    border-color: rgba(149, 164, 190, 0.26);
    background: linear-gradient(180deg, #fff, #f8fbff);
}
.summary-badges b {
    font-weight: 850;
}

.admin-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 16px;
}
.wide {
    grid-column: 1 / -1;
}

.stats-panel {
    display: grid;
    gap: 14px;
    margin-top: 12px;
}
.stats-grid,
.traffic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}
.stat-card,
.traffic-card {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.stat-card span,
.traffic-card small,
.traffic-head {
    color: var(--muted);
    font-size: 12px;
}
.stat-card strong {
    font-size: 24px;
}
.traffic-card span {
    font-size: 20px;
    font-weight: 800;
}
.traffic-head {
    font-weight: 700;
}
.table {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}
.table-row {
    display: grid;
    grid-template-columns: 1.35fr 0.55fr 0.7fr 0.55fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.table-row strong small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}
.score-input {
    width: 100%;
}
.admin-user-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.admin-user-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
}
.admin-user-head strong small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}
.admin-user-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.admin-user-grid label {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.admin-user-grid input {
    width: 100%;
}
.admin-user-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.rooms .table-row,
.matches .table-row {
    grid-template-columns: 1fr 1fr 1fr;
}

/* ============ 布局优化：大厅 / 对战 双模式清晰化 ============ */

/* 板头标题与提示分行，修复"我的机场"被挤折行 */
.board-head {
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 10px;
}
.board-head span {
    text-align: left;
}
.board-head h2 {
    white-space: nowrap;
}

/* —— 大厅模式：左栏只保留“开始对战”卡片，去掉与中栏重复的房间列表 —— */
.lobby-mode .room-panel .room-list,
.lobby-mode .room-panel .status-line,
.lobby-mode .room-panel .players,
.lobby-mode .room-panel .actions,
.lobby-mode .room-panel-toggle,
.lobby-mode .invite-layer {
    display: none;
}
.lobby-mode .room-code {
    justify-content: flex-start;
    border-bottom: 1px solid var(--line);
}
.lobby-mode .room-code strong {
    font-size: 20px;
    letter-spacing: 1px;
}

/* 大厅整体居中、限定宽度，避免大片空白 */
.lobby-mode .stage {
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    max-width: 1080px;
    margin: 0 auto;
    align-items: center;
    min-height: 72vh;
}
.lobby-mode .lobby-main {
    grid-column: 2;
    grid-template-columns: 1fr;
}

/* “开始对战”卡片内建房/加入更突出 */
.create-room button {
    min-height: 46px;
    font-weight: 700;
}
#newPublicRoom {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}
.panel-section-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--muted);
    letter-spacing: 0.5px;
    margin: 2px 0 8px;
}

/* —— 对战模式：左栏隐藏大厅控件，聚焦当前对局 —— */
.battle-mode .room-panel .create-room,
.battle-mode .room-panel .join-room,
.battle-mode .room-panel .room-list,
.battle-mode .room-panel .account-card,
.battle-mode .room-panel .panel-section-title {
    display: none;
}
/* 对战时“准备起飞”作为主操作更醒目 */
.battle-mode #readyBtn {
    min-height: 46px;
    font-size: 16px;
}

@media (max-width: 1120px) {
    .stage {
        grid-template-columns: 1fr;
    }
    .lobby-mode .stage {
        grid-template-columns: 1fr;
        max-width: 640px;
    }
    .room-panel-collapsed.battle-mode .stage {
        grid-template-columns: 1fr;
    }
    .boards {
        justify-content: center;
    }
    .lobby-mode .lobby-main {
        grid-column: auto;
    }
    .lobby-main {
        grid-template-columns: 1fr;
    }
    .room-panel,
    .feed {
        width: 100%;
    }
    .room-panel-collapsed.battle-mode .room-panel {
        padding: 10px 12px;
    }
    .room-panel-collapsed.battle-mode .room-code {
        display: flex;
    }
    .room-panel-collapsed.battle-mode .room-code strong {
        font-size: 18px;
        text-align: right;
    }
    .room-panel-collapsed.battle-mode .room-panel-toggle {
        width: auto;
        writing-mode: horizontal-tb;
    }
    .board-wrap {
        --board-max-cell: 44px;
    }
}

@media (max-width: 680px) {
    .shell {
        padding: 14px;
    }
    .topbar {
        align-items: stretch;
        flex-direction: column;
    }
    .profile {
        justify-content: stretch;
    }
    .profile input,
    .profile button,
    .profile a {
        flex: 1 1 130px;
    }
    .boards {
        grid-template-columns: 1fr;
    }
    .board-wrap {
        --board-max-cell: 48px;
        padding: 12px;
    }
    .board-head {
        flex-direction: column;
        min-height: 64px;
    }
    .board-head span {
        text-align: left;
    }
    .admin-grid {
        grid-template-columns: 1fr;
    }
    .table-row {
        grid-template-columns: 1fr;
    }
    .admin-user-grid {
        grid-template-columns: 1fr;
    }
    .invite-layer {
        right: 10px;
        top: auto;
        bottom: 10px;
    }
    .battle-summary {
        bottom: 0;
        max-height: 76vh;
        width: 100vw;
    }
    .summary-grid {
        grid-template-columns: 1fr;
    }
}

/* ============ Taste redesign: 夜航战术台 ============ */
:root {
    --bg: #071018;
    --ink: #edf7f8;
    --muted: #8da3ad;
    --panel: rgba(11, 24, 34, 0.84);
    --panel-solid: #0d1d29;
    --panel-strong: #122939;
    --line: rgba(119, 154, 165, 0.24);
    --soft-line: rgba(119, 154, 165, 0.22);
    --blue: #22c3d6;
    --cyan: #52ead8;
    --red: #ff5f6f;
    --green: #46d58c;
    --amber: #ffc15a;
    --navy: #edf7f8;
    --aqua: #52ead8;
    --gold: #ffc15a;
    --surface: rgba(11, 24, 34, 0.84);
    --surface-strong: rgba(17, 38, 53, 0.95);
    --shadow:
        0 28px 80px rgba(0, 0, 0, 0.38), 0 2px 0 rgba(255, 255, 255, 0.03) inset;
    --card-shadow:
        0 22px 60px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --lift-shadow:
        0 30px 80px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(82, 234, 216, 0.1);
    color-scheme: dark;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    min-height: 100dvh;
    color: var(--ink);
    font-family:
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(34, 195, 214, 0.22),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 8%,
            rgba(255, 193, 90, 0.16),
            transparent 24%
        ),
        radial-gradient(
            circle at 60% 92%,
            rgba(70, 213, 140, 0.12),
            transparent 30%
        ),
        linear-gradient(180deg, #071018 0%, #0a141d 48%, #071018 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        linear-gradient(rgba(82, 234, 216, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(82, 234, 216, 0.035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.85),
        rgba(0, 0, 0, 0.24) 72%,
        transparent
    );
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 40;
    opacity: 0.055;
    background-image:
        linear-gradient(
            115deg,
            transparent 0 45%,
            rgba(255, 255, 255, 0.55) 50%,
            transparent 55%
        ),
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.65) 0 1px,
            transparent 1px 3px
        );
    mix-blend-mode: screen;
}

.shell {
    width: min(1480px, 100%);
    padding: 18px clamp(12px, 2vw, 26px) 28px;
}

.topbar {
    top: 12px;
    min-height: 72px;
    border: 1px solid rgba(137, 221, 229, 0.22);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(82, 234, 216, 0.1), transparent 42%),
        rgba(9, 22, 32, 0.82);
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(18px) saturate(1.2);
}

.lang-switch {
    border-color: rgba(137, 221, 229, 0.18);
    background: rgba(11, 28, 39, 0.68);
    color: var(--muted);
}

.lang-switch select {
    color: #f4fdff;
}

h1,
h2,
p {
    color: inherit;
}

h1 {
    max-width: 11ch;
    color: #f4fdff;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 950;
    letter-spacing: 0;
}

h2 {
    color: #f4fdff;
    font-size: 17px;
    font-weight: 880;
    letter-spacing: 0;
}

.muted {
    color: var(--muted);
    font-size: 13px;
    font-weight: 720;
}

.brand {
    padding-left: 58px;
}

.brand::before {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(82, 234, 216, 0.28);
    border-radius: 12px;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(82, 234, 216, 0.85) 0 5px,
            transparent 6px
        ),
        conic-gradient(
            from 30deg,
            rgba(82, 234, 216, 0.18),
            rgba(255, 193, 90, 0.25),
            rgba(34, 195, 214, 0.55),
            rgba(82, 234, 216, 0.18)
        );
    box-shadow:
        0 0 0 7px rgba(82, 234, 216, 0.06),
        0 14px 34px rgba(34, 195, 214, 0.28);
}

.brand::after {
    left: 14px;
    width: 16px;
    height: 25px;
    border-radius: 8px 8px 2px 2px;
    background: #061018;
    box-shadow:
        10px 10px 0 -6px #061018,
        -9px 10px 0 -6px #061018,
        0 0 18px rgba(82, 234, 216, 0.72);
}

button,
.ghost,
input,
.auth-panel summary {
    border-radius: 12px;
    border-color: rgba(137, 221, 229, 0.22);
}

button,
.ghost {
    min-height: 40px;
    color: #e9fbfd;
    font-weight: 820;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.025)
        ),
        rgba(14, 31, 43, 0.92);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 22px rgba(0, 0, 0, 0.2);
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease;
}

button:hover,
.ghost:hover {
    border-color: rgba(82, 234, 216, 0.48);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.26),
        0 0 0 3px rgba(82, 234, 216, 0.08);
}

button:active,
.ghost:active {
    transform: translateY(1px) scale(0.99);
}

button:focus-visible,
.ghost:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: 2px solid rgba(82, 234, 216, 0.78);
    outline-offset: 2px;
}

button:disabled {
    color: rgba(237, 247, 248, 0.42);
    border-color: rgba(119, 154, 165, 0.14);
    background: rgba(14, 31, 43, 0.42);
}

.primary,
#newPublicRoom,
#newComputerRoom,
.summary-actions .primary {
    color: #021014;
    border-color: rgba(82, 234, 216, 0.72);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 38%),
        linear-gradient(135deg, #52ead8, #22c3d6 58%, #8bf6ff);
    box-shadow:
        0 18px 42px rgba(34, 195, 214, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

#newPrivateRoom {
    color: #1c1300;
    border-color: rgba(255, 193, 90, 0.62);
    background: linear-gradient(135deg, #ffe2a1, #ffc15a);
}

input {
    height: 40px;
    color: var(--ink);
    background: rgba(5, 14, 21, 0.64);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

input::placeholder {
    color: rgba(141, 163, 173, 0.78);
}

.auth-panel summary,
.auth-menu,
.panel,
.board-wrap,
.lobby-card,
.invite-layer,
.battle-summary,
.scan-card {
    border: 1px solid rgba(137, 221, 229, 0.18);
    background:
        linear-gradient(145deg, rgba(82, 234, 216, 0.08), transparent 38%),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.015)
        ),
        rgba(9, 22, 32, 0.86);
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(16px) saturate(1.18);
}

.panel,
.board-wrap,
.lobby-card,
.scan-card {
    border-radius: 12px;
}

.panel::before,
.board-wrap::before,
.lobby-card::before {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(82, 234, 216, 0.72),
        rgba(255, 193, 90, 0.42),
        transparent
    );
    opacity: 1;
}

.stage {
    grid-template-columns: 280px minmax(0, 1fr) 330px;
    gap: 18px;
}

.room-code {
    border-bottom-color: rgba(137, 221, 229, 0.16);
}

.room-code strong {
    color: #f4fdff;
    font-size: 28px;
    font-weight: 950;
    letter-spacing: 3px;
    text-shadow: 0 0 22px rgba(82, 234, 216, 0.22);
}

.room-panel-toggle {
    color: #071018;
    border-color: rgba(82, 234, 216, 0.44);
    background: linear-gradient(135deg, #8bf6ff, #52ead8);
}

.account-card,
.placement-tools,
.status-line,
.player,
.event,
.rank-row,
.achievement,
.history-row,
.online-row,
.recent-player-row,
.room-row,
.summary-player,
.stat-card,
.traffic-card,
.admin-user-card,
.table-row {
    border: 1px solid rgba(137, 221, 229, 0.15);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(82, 234, 216, 0.055), transparent 42%),
        rgba(8, 19, 28, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.status-line {
    color: #c8fbff;
    background:
        linear-gradient(
            135deg,
            rgba(82, 234, 216, 0.15),
            rgba(34, 195, 214, 0.05)
        ),
        rgba(8, 19, 28, 0.82);
}

.room-tabs,
.tabs,
.summary-tabs {
    gap: 4px;
    padding: 4px;
    border-color: rgba(137, 221, 229, 0.13);
    border-radius: 14px;
    background: rgba(5, 14, 21, 0.58);
}

.room-tab,
.tab,
.stab {
    min-height: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
}

.room-tab.active,
.tab.active,
.stab.active,
.direction-row button.active {
    color: #051017;
    background: linear-gradient(135deg, #52ead8, #22c3d6);
    box-shadow: 0 10px 22px rgba(34, 195, 214, 0.2);
}

.panel-section-title {
    color: rgba(141, 163, 173, 0.94);
    letter-spacing: 0;
}

.create-room {
    gap: 10px;
}

.create-room button {
    min-height: 48px;
}

#newComputerRoom {
    min-height: 58px;
    font-size: 16px;
}

.join-room {
    gap: 8px;
}

.join-room input {
    text-transform: uppercase;
    letter-spacing: 1px;
}

.room-row,
.online-row,
.recent-player-row,
.rank-row,
.history-row {
    color: var(--ink);
}

.room-row:hover,
.online-row:hover,
.recent-player-row:hover,
.rank-row:hover,
.history-row:hover {
    border-color: rgba(82, 234, 216, 0.38);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.24),
        0 0 0 3px rgba(82, 234, 216, 0.06);
}

.room-row small,
.online-row small,
.recent-player-row small,
.badge,
.stat-card span,
.traffic-card small,
.traffic-head,
.summary-head span,
.summary-player span,
.board-head span,
.lobby-card-head span,
.scan-card p {
    color: var(--muted);
}

.room-row em,
.online-row em,
.recent-player-row em,
.auth-panel summary span {
    color: var(--cyan);
}

.empty-room {
    color: var(--muted);
    border-color: rgba(137, 221, 229, 0.18);
    background: rgba(8, 19, 28, 0.42);
}

.lobby-mode .stage {
    min-height: calc(100dvh - 136px);
    grid-template-columns: minmax(268px, 320px) minmax(0, 1fr);
    max-width: 1160px;
}

.lobby-card {
    padding: 18px;
}

.lobby-card:first-child {
    min-height: 380px;
}

.lobby-card-head {
    border-bottom-color: rgba(137, 221, 229, 0.13);
}

.mini-badges b,
.summary-badges b {
    color: #061018;
    border: 0;
    border-radius: 999px;
    background: rgba(82, 234, 216, 0.84);
}

.boards {
    gap: 18px;
}

.board-wrap {
    --board-max-cell: 38px;
    padding: 16px;
}

.board-head {
    min-height: 0;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom-color: rgba(137, 221, 229, 0.13);
}

.board-head h2 {
    font-size: 20px;
}

.board {
    margin-top: 2px;
    border: 1px solid rgba(137, 221, 229, 0.4);
    border-radius: 12px;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(82, 234, 216, 0.18),
            transparent 58%
        ),
        linear-gradient(rgba(82, 234, 216, 0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(82, 234, 216, 0.13) 1px, transparent 1px),
        #07141c;
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 0 44px rgba(34, 195, 214, 0.1);
}

.cell {
    color: transparent;
    border-color: rgba(137, 221, 229, 0.15);
    background: rgba(11, 28, 39, 0.68);
}

.cell:hover {
    background: rgba(82, 234, 216, 0.13);
}

.cell.coord::before {
    color: rgba(141, 163, 173, 0.58);
}

.cell.plane,
#ownBoard .cell.plane {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 40%),
        rgba(34, 195, 214, 0.62);
    box-shadow:
        inset 0 0 0 2px rgba(2, 16, 20, 0.62),
        inset 0 0 0 4px rgba(255, 255, 255, 0.1);
}

#ownBoard .cell.plane-0,
.reveal-col.own-side .rcell.plane-0 {
    background: #22c3d6;
}

#ownBoard .cell.plane-1,
.reveal-col.own-side .rcell.plane-1 {
    background: #46d58c;
}

#ownBoard .cell.plane-2,
.reveal-col.own-side .rcell.plane-2 {
    background: #ffc15a;
}

#ownBoard .cell.head,
#ownBoard .cell.head.plane-0,
#ownBoard .cell.head.plane-1,
#ownBoard .cell.head.plane-2 {
    background: radial-gradient(
        circle at 50% 45%,
        #f4fdff 0 10%,
        #52ead8 11% 36%,
        #0f7580 37% 100%
    );
    box-shadow:
        inset 0 0 0 3px #020b0f,
        inset 0 0 0 5px rgba(255, 255, 255, 0.18),
        0 0 24px rgba(82, 234, 216, 0.36);
}

.enemy .cell.plane,
.enemy .cell.plane-0,
.enemy .cell.plane-1,
.enemy .cell.plane-2,
.reveal-col.enemy-side .rcell.plane-0,
.reveal-col.enemy-side .rcell.plane-1,
.reveal-col.enemy-side .rcell.plane-2 {
    background: rgba(255, 95, 111, 0.52);
}

.enemy .cell.head,
.enemy .cell.head.plane-0,
.enemy .cell.head.plane-1,
.enemy .cell.head.plane-2 {
    background: radial-gradient(
        circle at 50% 45%,
        #fff 0 8%,
        #ff9aa4 9% 35%,
        #bc2537 36% 100%
    );
    box-shadow:
        inset 0 0 0 3px #26070c,
        inset 0 0 0 5px rgba(255, 255, 255, 0.14),
        0 0 24px rgba(255, 95, 111, 0.34);
}

.cell.head:not(.boom)::after {
    content: "";
    width: 42%;
    height: 42%;
    border-radius: 50% 50% 50% 10%;
    background: #f4fdff;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.42));
    transform: var(--head-rotate) rotate(45deg);
}

.cell.head::before {
    opacity: 0.46;
}

.cell.miss::after {
    border-color: rgba(141, 163, 173, 0.92);
    background: rgba(237, 247, 248, 0.1);
}

.cell.hit::after {
    background: var(--amber);
    box-shadow:
        0 0 0 5px rgba(255, 193, 90, 0.17),
        0 0 22px rgba(255, 193, 90, 0.32);
}

.cell.boom::after {
    background: radial-gradient(
        circle,
        #fff 0 12%,
        #ffc15a 13% 36%,
        var(--red) 37% 100%
    );
}

.cell.ghost-ok {
    background: rgba(70, 213, 140, 0.34);
    box-shadow: inset 0 0 0 2px rgba(70, 213, 140, 0.72);
}

.cell.ghost-bad {
    background: rgba(255, 95, 111, 0.28);
    box-shadow: inset 0 0 0 2px rgba(255, 95, 111, 0.7);
}

.feed {
    min-height: 580px;
}

.pane {
    max-height: 522px;
    scrollbar-color: rgba(82, 234, 216, 0.42) rgba(8, 19, 28, 0.28);
}

.achievement.done {
    border-color: rgba(70, 213, 140, 0.32);
    background:
        linear-gradient(
            135deg,
            rgba(70, 213, 140, 0.16),
            rgba(82, 234, 216, 0.04)
        ),
        rgba(8, 19, 28, 0.72);
}

.invite-layer {
    top: 104px;
    border-radius: 12px;
}

.invite-layer img,
.share-box img {
    border-color: rgba(137, 221, 229, 0.24);
    border-radius: 12px;
    background: #f4fdff;
    padding: 6px;
}

.invite-layer.collapsed::before {
    color: var(--cyan);
}

.toast {
    color: #061018;
    border: 1px solid rgba(82, 234, 216, 0.52);
    border-radius: 999px;
    background: linear-gradient(135deg, #8bf6ff, #52ead8);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

.turn-card,
.hit-card {
    color: #f4fdff;
}

.turn-card {
    border-color: rgba(137, 221, 229, 0.34);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(82, 234, 216, 0.16), transparent 38%),
        rgba(5, 14, 21, 0.92);
}

.hit-overlay {
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255, 255, 255, 0.22),
            transparent 10%
        ),
        radial-gradient(
            circle at center,
            rgba(255, 95, 111, 0.36),
            rgba(255, 193, 90, 0.16) 34%,
            rgba(5, 14, 21, 0.88)
        );
}

.battle-summary {
    max-height: min(72vh, 720px);
}

.summary-player em,
.stat-card strong,
.traffic-card span {
    color: #f4fdff;
}

.summary-player .plus {
    color: var(--green);
}

.summary-player .minus {
    color: var(--red);
}

.reveal-board {
    border-color: rgba(137, 221, 229, 0.34);
    border-radius: 10px;
    background: rgba(137, 221, 229, 0.28);
}

.rcell {
    background: #091823;
}

.rcell.head:not(.boom)::after {
    content: "";
    width: 42%;
    height: 42%;
    border-radius: 50% 50% 50% 10%;
    background: #f4fdff;
    transform: var(--head-rotate) rotate(45deg);
}

.scan-layer {
    background: rgba(2, 8, 12, 0.78);
    backdrop-filter: blur(10px);
}

.scan-card video {
    border: 1px solid rgba(137, 221, 229, 0.18);
    border-radius: 12px;
    background: #050e15;
}

.admin-grid {
    gap: 18px;
}

.admin-user-grid label {
    color: var(--muted);
}

.rooms .table-row,
.matches .table-row {
    grid-template-columns: 1fr 1fr 1fr;
}

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

@media (max-width: 1280px) {
    .stage {
        grid-template-columns: 260px minmax(0, 1fr) 300px;
    }
}

@media (max-width: 1120px) {
    .stage,
    .lobby-mode .stage,
    .room-panel-collapsed.battle-mode .stage {
        grid-template-columns: 1fr;
        max-width: 760px;
        align-items: stretch;
    }

    .lobby-mode .lobby-main {
        grid-column: auto;
    }

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

    .board-wrap {
        --board-max-cell: 46px;
    }

    .room-panel-collapsed.battle-mode .room-code strong {
        font-size: 18px;
    }
}

@media (max-width: 680px) {
    .shell {
        padding: 12px;
    }

    .topbar {
        top: 8px;
        gap: 12px;
        padding: 12px;
    }

    .brand {
        padding-left: 52px;
    }

    .brand::before {
        width: 40px;
        height: 40px;
    }

    h1 {
        font-size: 32px;
    }

    .auth-panel summary {
        width: 100%;
    }

    .login-form,
    .guest-form,
    .session-box,
    .join-room {
        grid-template-columns: 1fr;
        display: grid;
    }

    .room-code {
        align-items: stretch;
    }

    .room-code strong {
        min-width: 0;
        max-width: 100%;
        font-size: clamp(22px, 8vw, 30px);
        overflow-wrap: anywhere;
    }

    .actions {
        margin-top: 10px;
    }

    .direction-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .direction-row button,
    .placement-row button,
    .actions > button {
        width: 100%;
        min-width: 0;
    }

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

    .room-tabs,
    .tabs,
    .summary-tabs {
        overflow-x: auto;
    }

    .board-wrap {
        --board-max-cell: 48px;
        padding: 12px;
    }

    .board-head {
        min-height: 0;
    }

    .invite-layer {
        right: 12px;
        bottom: 12px;
    }

    .battle-summary {
        bottom: 0;
        max-height: 76vh;
        width: 100vw;
    }
}

/* ============ Lobby layout tune: 首页大厅 ============ */
.lobby-mode .topbar {
    margin-bottom: clamp(14px, 2vw, 22px);
}

.lobby-mode .stage {
    width: min(1180px, 100%);
    min-height: auto;
    align-items: start;
    gap: 18px;
}

.lobby-mode .room-panel {
    padding: 18px;
}

.lobby-mode .room-panel::after {
    content: "";
    position: absolute;
    right: -88px;
    bottom: -92px;
    width: 220px;
    aspect-ratio: 1;
    pointer-events: none;
    opacity: 0.32;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            transparent 0 35%,
            rgba(82, 234, 216, 0.32) 36% 37%,
            transparent 38% 51%,
            rgba(82, 234, 216, 0.28) 52% 53%,
            transparent 54%
        ),
        conic-gradient(
            from 20deg,
            rgba(82, 234, 216, 0.5),
            transparent 18%,
            transparent 48%,
            rgba(255, 193, 90, 0.42),
            transparent 62%,
            transparent
        );
    filter: blur(0.2px);
}

.lobby-mode .room-code {
    display: block;
    padding: 0 0 14px;
}

.lobby-mode .room-code strong {
    display: block;
    color: #f4fdff;
    font-size: clamp(25px, 4vw, 38px);
    letter-spacing: 0;
    line-height: 1;
}

.lobby-mode .room-code::after {
    content: "选择模式，或者输入朋友发来的房间号。";
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 720;
}

.lobby-mode .account-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin: 14px 0;
}

.lobby-mode .account-card span {
    grid-column: 1 / -1;
}

.lobby-mode .room-tabs {
    display: none;
}

.lobby-mode .panel-section-title {
    margin: 12px 0 10px;
    color: #c8fbff;
    font-size: 13px;
}

.lobby-mode .create-room {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.lobby-mode #newComputerRoom {
    min-height: 64px;
    justify-content: flex-start;
    grid-column: 1 / -1;
    padding: 0 18px;
}

.lobby-mode #newPublicRoom,
.lobby-mode #newPrivateRoom {
    min-height: 54px;
}

.lobby-mode .join-room {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    margin: 14px 0 0;
}

.lobby-mode .lobby-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.lobby-mode .lobby-card {
    min-height: 0;
}

.lobby-mode .lobby-card:first-child {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: clamp(220px, 30vw, 330px);
}

.lobby-mode .lobby-card-head {
    align-items: center;
}

.lobby-mode .lobby-card-head h2 {
    font-size: clamp(18px, 2vw, 22px);
}

.lobby-mode .main-room-list {
    min-height: 124px;
}

.lobby-mode .online-rank-list,
.lobby-mode .recent-player-list {
    min-height: 96px;
}

@media (min-width: 860px) {
    .lobby-mode .stage {
        grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    }

    .lobby-mode .room-panel {
        position: sticky;
        top: 110px;
    }

    .lobby-mode .lobby-main {
        grid-column: auto;
    }
}

@media (max-width: 859px) {
    .lobby-mode .stage {
        grid-template-columns: 1fr;
        max-width: 760px;
    }

    .lobby-mode .lobby-main {
        grid-column: auto;
    }
}

@media (max-width: 680px) {
    .lobby-mode .room-panel {
        padding: 16px;
    }

    .lobby-mode .room-code strong {
        font-size: 30px;
    }

    .lobby-mode .join-room {
        grid-template-columns: 1fr;
    }

    .lobby-mode .lobby-main {
        grid-template-columns: 1fr;
    }

    .lobby-mode .lobby-card:first-child {
        min-height: 190px;
    }
}

/* ============ Mobile battle polish ============ */
#newComputerRoom,
.lobby-mode #newComputerRoom {
    justify-content: center;
    text-align: center;
}

.room-panel-toggle span {
    display: block;
    line-height: 1.05;
}

.room-panel-collapsed.battle-mode .room-panel-toggle {
    gap: 2px;
}

@media (max-width: 680px) {
    .room-panel-collapsed.battle-mode .room-code {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
    }

    .room-panel-collapsed.battle-mode .room-panel-toggle {
        width: auto;
        min-width: 62px;
        min-height: 46px;
        padding: 6px 10px;
        white-space: normal;
        writing-mode: horizontal-tb;
    }

    .room-panel-collapsed.battle-mode .room-code strong {
        text-align: right;
    }

    .battle-mode .invite-layer {
        top: auto;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        max-width: calc(100vw - 24px);
    }

    .battle-mode .invite-layer.collapsed {
        display: none;
    }

    .battle-mode .invite-layer.collapsed::before {
        content: "邀请";
        writing-mode: horizontal-tb;
        text-orientation: mixed;
    }

    .battle-mode .battle-summary.show {
        bottom: 0;
    }

    .battle-mode .feed {
        margin-bottom: 0;
    }
}

/* ============ 移动端对战体验修复（设计审核 红/黄级） ============ */

/* 对局进行中，窄屏堆叠布局下把"敌方空域"排到自己棋盘前面：
   开火目标不再压在首屏之外 */
@media (max-width: 1120px) {
    .game-playing .boards .board-wrap.enemy {
        order: -1;
    }
}

/* 触屏没有 hover：点过的格子会驻留 hover 高亮，与"已开火"标记混淆。
   只压平未被任何棋子/预览状态占用的格子，避免误伤飞机与摆放预览 */
@media (hover: none) {
    .cell:not(.plane):not(.head):not(.ghost-ok):not(.ghost-bad):hover {
        background: rgba(11, 28, 39, 0.68);
        box-shadow: none;
    }
    button:hover,
    .ghost:hover {
        transform: none;
    }
}

@media (max-width: 680px) {
    .auth-menu {
        position: fixed;
        top: calc(76px + env(safe-area-inset-top));
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
        max-height: calc(100dvh - 96px - env(safe-area-inset-top));
        overflow: auto;
        overscroll-behavior: contain;
        transform: none;
    }

    /* 对战中顶栏改静态单行：品牌信息不再常驻占用 130px 视口 */
    .battle-mode .topbar {
        position: static;
        flex-direction: row;
        align-items: center;
        min-height: 0;
        margin-bottom: 12px;
        padding: 8px 12px;
    }
    .battle-mode .topbar .muted {
        display: none;
    }
    .battle-mode .topbar h1 {
        font-size: 20px;
    }
    .battle-mode .brand {
        padding-left: 42px;
    }
    .battle-mode .brand::before {
        width: 32px;
        height: 32px;
    }
    .battle-mode .brand::after {
        left: 10px;
        width: 12px;
        height: 18px;
        box-shadow:
            7px 7px 0 -4.5px #061018,
            -6.5px 7px 0 -4.5px #061018,
            0 0 12px rgba(82, 234, 216, 0.6);
    }
    .battle-mode .profile {
        flex: 0 0 auto;
    }
    .battle-mode .auth-panel summary {
        width: auto;
        min-width: 0;
    }

    /* 战报操作按钮整行排布，"再来一局/分享战绩"不再折成两行 */
    .summary-head {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .summary-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .summary-actions button {
        min-height: 46px;
        white-space: nowrap;
    }

    /* 摆放阶段固定底坞：方向/撤销/清空/随机/准备贴近拇指 */
    .mobile-dock.show {
        position: fixed;
        inset: auto 0 0;
        z-index: 13;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(137, 221, 229, 0.22);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent),
            rgba(9, 22, 32, 0.96);
        backdrop-filter: blur(16px);
        box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.4);
    }
    .mobile-dock .placement-tools {
        grid-column: 1 / -1;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }
    .dock-open .shell {
        padding-bottom: 200px;
    }
    .dock-open.battle-mode .invite-layer {
        bottom: calc(200px + env(safe-area-inset-bottom));
    }
}

.mobile-dock {
    display: none;
}

/* ============ 新手指引 ============ */
.tour-layer {
  position: fixed;
  inset: 0;
  z-index: 36;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(2, 8, 12, .78);
  backdrop-filter: blur(10px);
}
.tour-layer.show {
  display: grid;
}
.tour-card {
  width: min(460px, 100%);
  max-height: 86dvh;
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid rgba(137, 221, 229, .22);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(82, 234, 216, .08), transparent 38%),
    rgba(9, 22, 32, .97);
  box-shadow: var(--shadow);
}
.tour-title {
  margin: 0;
  color: #f4fdff;
  font-size: 22px;
  font-weight: 900;
}
.tour-text {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.75;
}
.tour-text ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}
.tour-text em.ok { color: var(--green); font-style: normal; font-weight: 800; }
.tour-text em.bad { color: var(--red); font-style: normal; font-weight: 800; }
.tour-illust {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 8px 0 2px;
}
.tour-caption {
  color: var(--muted);
  font-size: 12px;
}
.tour-plane {
  display: grid;
  grid-template-columns: repeat(5, 30px);
  gap: 3px;
}
.tour-plane i {
  height: 30px;
  border-radius: 6px;
  border: 1px solid rgba(137, 221, 229, .10);
  background: rgba(137, 221, 229, .06);
}
.tour-plane i.b {
  border: 0;
  background: rgba(34, 195, 214, .72);
  box-shadow: inset 0 0 0 2px rgba(2, 16, 20, .55);
}
.tour-plane i.h {
  border: 0;
  background: radial-gradient(circle at 50% 45%, #f4fdff 0 14%, #52ead8 15% 42%, #0f7580 43% 100%);
  box-shadow: 0 0 16px rgba(82, 234, 216, .42);
}
.tour-dirs {
  display: flex;
  gap: 8px;
}
.tour-dirs b {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(137, 221, 229, .22);
  border-radius: 10px;
  background: rgba(14, 31, 43, .92);
  color: #e9fbfd;
  font-size: 19px;
}
.tour-dirs b.on {
  border: 0;
  background: linear-gradient(135deg, #52ead8, #22c3d6);
  color: #051017;
}
.tour-shots {
  display: flex;
  gap: 18px;
  justify-content: center;
}
.tour-shots > div {
  display: grid;
  gap: 6px;
  justify-items: center;
  color: var(--muted);
  font-size: 12px;
}
.tour-shots i {
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(137, 221, 229, .18);
  border-radius: 8px;
  background: rgba(11, 28, 39, .9);
}
.tour-shots i::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  aspect-ratio: 1;
}
.tour-shots i.m::after {
  width: 40%;
  border: 3px solid rgba(141, 163, 173, .92);
  border-radius: 50%;
  background: rgba(237, 247, 248, .10);
}
.tour-shots i.t::after {
  width: 48%;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 14px rgba(255, 193, 90, .4);
}
.tour-shots i.x::after {
  width: 72%;
  background: radial-gradient(circle, #fff 0 12%, #ffc15a 13% 36%, var(--red) 37% 100%);
  clip-path: polygon(50% 0,61% 34%,98% 35%,68% 56%,79% 91%,50% 70%,21% 91%,32% 56%,2% 35%,39% 34%);
}
.tour-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.tour-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(137, 221, 229, .22);
  transition: background .16s ease, transform .16s ease;
}
.tour-dots i.on {
  background: #52ead8;
  transform: scale(1.25);
}
.tour-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.tour-actions button {
  min-height: 42px;
  padding: 0 16px;
}
#tourSkip {
  margin-right: auto;
  color: var(--muted);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.tour-open {
  width: 100%;
  margin-top: 12px;
  color: var(--cyan);
}

/* ============ 积分结算与成就徽章 ============ */
.summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.summary-player {
  display: block;
  padding: 14px;
}
.summary-player.winner {
  border-color: rgba(82, 234, 216, .42);
}
.summary-player-main {
  display: grid;
  gap: 9px;
}
.summary-player-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.summary-player-head > em {
  font-style: normal;
  font-size: 28px;
  font-weight: 950;
  line-height: 1;
}
.streak-line {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.streak-line b,
.score-part {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border: 1px solid rgba(137, 221, 229, .16);
  border-radius: 999px;
  background: rgba(237, 247, 248, .06);
  color: #c8fbff;
  font-size: 12px;
  font-weight: 850;
}
.result-trail {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-height: 24px;
}
.result-trail i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
  font-size: 11px;
  font-weight: 950;
}
.result-trail .win {
  color: #061018;
  background: var(--green);
}
.result-trail .loss {
  color: #f4fdff;
  background: rgba(255, 95, 111, .62);
}
.result-trail span {
  color: var(--muted);
  font-size: 12px;
}
.score-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.score-parts.empty {
  color: var(--muted);
  font-size: 12px;
}
.score-part {
  border-radius: 8px;
}
.score-part.streak {
  border-color: rgba(70, 213, 140, .3);
  background: rgba(70, 213, 140, .12);
}
.score-part.performance {
  border-color: rgba(255, 193, 90, .3);
  background: rgba(255, 193, 90, .12);
}
.score-part.achievement {
  border-color: rgba(82, 234, 216, .38);
  background: rgba(82, 234, 216, .14);
}
.score-part em {
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
}
.new-badge-block {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(255, 193, 90, .28);
  border-radius: 10px;
  background: rgba(255, 193, 90, .08);
}
.new-badge-block > span {
  color: #ffe2a1;
  font-size: 12px;
  font-weight: 900;
}
.achievement-badge,
.mini-badges .achievement-badge,
.summary-badges .achievement-badge {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 8px 3px 4px;
  border: 1px solid rgba(137, 221, 229, .22);
  border-radius: 999px;
  background: rgba(82, 234, 216, .12);
  color: #c8fbff;
  font-size: 11px;
  line-height: 1.15;
  white-space: nowrap;
}
.achievement-badge i {
  min-width: 24px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(82, 234, 216, .82);
  color: #061018;
  font-style: normal;
  font-size: 10px;
  font-weight: 950;
}
.achievement-badge em {
  color: inherit;
  font-style: normal;
  font-size: 11px;
  font-weight: 950;
}
.achievement-badge.compact {
  min-height: 24px;
  padding-right: 7px;
  font-size: 10px;
}
.achievement-badge.compact i {
  min-width: 22px;
  height: 18px;
  font-size: 9px;
}
.achievement-badge.tone-green i {
  background: var(--green);
}
.achievement-badge.tone-amber {
  border-color: rgba(255, 193, 90, .28);
  background: rgba(255, 193, 90, .1);
  color: #ffe2a1;
}
.achievement-badge.tone-amber i {
  background: var(--amber);
}
.achievement-badge.tone-red {
  border-color: rgba(255, 95, 111, .32);
  background: rgba(255, 95, 111, .1);
  color: #ffd7dc;
}
.achievement-badge.tone-red i {
  background: var(--red);
  color: #fff;
}
.achievement-badge.fresh {
  border-color: rgba(255, 193, 90, .52);
  box-shadow: 0 0 18px rgba(255, 193, 90, .12);
}
.achievement .achievement-badge {
  margin-bottom: 5px;
}
.rank-medal {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #c8fbff;
  line-height: 1.1;
}
.rank-medal img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: contain;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .24));
}
.rank-medal span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.rank-medal b {
  overflow: hidden;
  color: #c8fbff;
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-medal small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.rank-medal.compact img {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}
.rank-medal.large img {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
}
.account-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px 10px;
}
.account-card-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.account-card-copy strong,
.account-card-copy span,
.online-row > span,
.recent-player-row > div,
.rank-row > div {
  min-width: 0;
}
.lobby-mode .account-card .rank-medal span,
.lobby-mode .account-card .account-card-copy span {
  grid-column: auto;
}
.account-card-copy span,
.online-row small,
.recent-player-row small,
.rank-row .badge {
  overflow-wrap: anywhere;
}
.achievement-badge img,
.mini-badges .achievement-badge img,
.summary-badges .achievement-badge img {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  object-fit: contain;
  filter: drop-shadow(0 4px 9px rgba(0, 0, 0, .18));
}
.achievement-badge.compact img {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
}
.achievement-badge > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.achievement .achievement-badge img {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}
.achievement .achievement-badge {
  min-height: 42px;
  padding-left: 5px;
  font-size: 12px;
}
.summary-player-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.summary-player-title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .summary-grid {
    grid-template-columns: 1fr;
  }
  .summary-player-head > em {
    font-size: 24px;
  }
  .rank-medal img {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .rank-medal.large img {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
  .achievement .achievement-badge img {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
}