:root {
    color-scheme: dark;
    --bg: #0c1014;
    --panel: #151b22;
    --panel-2: #202832;
    --line: #344151;
    --text: #eef2f6;
    --muted: #aab3c0;
    --accent: #44c2a8;
    --danger: #d45b6a;
    --gold: #e0b84f;
    --felt: #14352f;
    --felt-dark: #0f2422;
    --card-edge: #c3b47a;
    --card-ink: #101318;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: #091015;
}

body {
    min-height: 100vh;
    margin: 0;
    position: relative;
    isolation: isolate;
    background-color: #091015;
    background-image:
        radial-gradient(ellipse 900px 620px at 12% -18%, rgba(53, 163, 148, .13), transparent 68%),
        radial-gradient(ellipse 760px 540px at 95% 8%, rgba(168, 127, 55, .08), transparent 72%),
        linear-gradient(180deg, #10171d 0%, #0b1217 58%, #091015 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: var(--text);
    font: 15px/1.45 system-ui, -apple-system, Segoe UI, sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .9;
    background-image:
        radial-gradient(circle at 18px 24px, rgba(255, 255, 255, .96) 0 1.2px, transparent 2px),
        radial-gradient(circle at 78px 52px, rgba(156, 215, 255, .82) 0 1.1px, transparent 2px),
        radial-gradient(circle at 132px 108px, rgba(255, 235, 181, .8) 0 1px, transparent 1.8px),
        radial-gradient(circle at 42px 146px, rgba(255, 255, 255, .7) 0 .9px, transparent 1.6px);
    background-size: 173px 191px, 227px 233px, 281px 257px, 337px 311px;
    background-position: 0 0, 28px 64px, 97px 19px, 151px 108px;
    animation: star-drift 24s linear infinite, star-twinkle 3.2s ease-in-out infinite alternate;
}

@keyframes star-drift {
    to {
        background-position: -173px 191px, 255px -169px, -184px 238px, 488px -203px;
    }
}

@keyframes star-twinkle {
    0% { opacity: .34; transform: scale(1); }
    45% { opacity: .94; transform: scale(1.008); }
    100% { opacity: .54; transform: scale(1); }
}

a {
    color: inherit;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr);
    gap: 18px;
    align-items: center;
    min-height: 58px;
    padding: 8px 24px;
    background: rgba(16, 19, 24, .92);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(10px);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.brand {
    color: var(--accent);
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.topbar-room {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.topbar-room strong {
    color: #f4f0df;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-room span {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.topbar-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(86px, 1fr));
    gap: 8px;
    justify-self: center;
}

.topbar-stats div {
    min-height: 42px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid color-mix(in srgb, var(--card-edge), var(--line) 66%);
    border-radius: 6px;
}

.topbar-stats strong {
    display: block;
    color: var(--text);
    font-size: 16px;
    line-height: 1.05;
}

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

nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

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

.topbar-forfeit {
    margin: 0;
}

.topbar-forfeit button {
    min-height: 32px;
    padding: 7px 10px;
}

.shell {
    position: relative;
    z-index: 2;
    width: min(1280px, calc(100vw - 32px));
    margin: 12px auto 48px;
}

.panel,
.subpanel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 34%),
        color-mix(in srgb, var(--panel) 94%, black);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 18px;
}

.sticky-admin-filter {
    position: sticky;
    top: 61px;
    z-index: 8;
}

.subpanel {
    background: var(--panel-2);
}

.narrow {
    max-width: 520px;
    margin-inline: auto;
}

.grid {
    display: grid;
    gap: 18px;
}

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

.split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

h1,
h2,
h3 {
    margin: 0 0 12px;
    line-height: 1.15;
}

h2 {
    color: #f4f0df;
    font-size: 18px;
    letter-spacing: .02em;
}

h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gold);
    font-size: 13px;
    text-transform: uppercase;
}

h3::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--gold), transparent 40%), transparent);
}

p {
    margin: 0 0 12px;
}

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

.flash {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--accent), white 12%);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border-radius: 8px;
}

.step-note {
    margin-top: 12px;
}

.forfeit-form {
    margin-top: 14px;
}

.game-poll-marker {
    display: none;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, .68);
}

.result-modal {
    width: min(520px, 100%);
    padding: 18px;
    border: 2px solid var(--card-edge);
    border-radius: 8px;
    background:
        radial-gradient(circle at 18% 0%, rgba(224, 184, 79, .18), transparent 30%),
        #151b22;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}

.result-modal p {
    margin: 12px 0 0;
    color: var(--text);
    font-size: 18px;
}

.popup-card-art {
    width: min(260px, 100%);
    height: 180px;
    margin: 14px auto 0;
    border-color: var(--card-edge);
}

.popup-card-art img {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
}

.icon-close {
    min-height: 32px;
}

button,
.button,
input,
select,
textarea {
    border-radius: 6px;
    border: 1px solid var(--line);
    font: inherit;
}

button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    color: #07110f;
    background: var(--accent);
    border: 0;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: .48;
}

button.secondary,
.button.secondary {
    color: var(--text);
    background: var(--panel-2);
    border: 1px solid var(--line);
}

button.danger {
    color: #fff;
    background: var(--danger);
}

input,
select,
textarea {
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    color: var(--text);
    background: #111720;
}

textarea {
    min-height: 84px;
}

label {
    display: grid;
    gap: 5px;
    color: var(--muted);
}

.check {
    grid-template-columns: auto 1fr;
    align-items: center;
}

.check input {
    width: auto;
}

.stack,
.settings-grid {
    display: grid;
    gap: 12px;
}

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

.settings-grid button,
.settings-grid textarea,
.settings-grid .check {
    grid-column: 1 / -1;
}

.inline,
.actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.inline input,
.inline select,
.actions input,
.actions select {
    width: auto;
    min-width: 140px;
}

.wrap {
    flex-wrap: wrap;
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

th {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--text);
    background: var(--panel-2);
    border: 1px solid var(--line);
    font-size: 12px;
}

.badge.active,
.badge.win {
    color: #07110f;
    background: var(--gold);
}

.game-header-row {
    align-items: flex-start;
}

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

.header-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(86px, 1fr));
    gap: 8px;
}

.header-stats div {
    min-height: 54px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid color-mix(in srgb, var(--card-edge), var(--line) 66%);
    border-radius: 6px;
}

.header-stats strong {
    display: block;
    font-size: 18px;
    line-height: 1.1;
}

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

.turn-progress {
    margin: 0 0 14px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    background: rgba(5, 9, 13, .42);
}

.turn-actions-panel {
    position: sticky;
    top: 66px;
    z-index: 7;
    box-shadow: 0 16px 28px rgba(0, 0, 0, .26);
}

.pvp-defense-panel {
    border-color: color-mix(in srgb, var(--danger), white 16%);
    background:
        radial-gradient(circle at 18% 0%, rgba(212, 91, 106, .18), transparent 32%),
        color-mix(in srgb, var(--panel) 94%, black);
}

.pvp-defense-panel p {
    color: var(--text);
}

.combat-step-card {
    width: fit-content;
    max-width: 100%;
    margin: 12px 0;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--danger), white 22%);
    border-radius: 8px;
    background: rgba(0, 0, 0, .24);
}

.combat-step-card strong,
.combat-step-card span,
.combat-step-card small {
    display: block;
}

.combat-step-card span {
    margin-top: 5px;
    color: var(--gold);
    font-weight: 800;
}

.combat-step-card small {
    margin-top: 4px;
    color: var(--muted);
}

.step-grid,
.deck-grid,
.opponent-grid,
.mini-stats,
.cost-grid {
    display: grid;
    gap: 10px;
}

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

.step {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(17, 23, 32, .78);
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.step strong {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--panel-2);
    color: var(--text);
    font-size: 12px;
}

.step.done {
    border-color: color-mix(in srgb, var(--accent), white 10%);
    color: var(--text);
}

.step.done strong {
    background: var(--accent);
    color: #07110f;
}

.step.current {
    border-color: var(--gold);
    color: var(--text);
}

.deck-grid {
    grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
}

.deck-tile,
.opponent-card {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #111720;
}

.deck-panel,
.opponent-panel,
.board-panel,
.hand-panel {
    position: relative;
}

details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

details summary::-webkit-details-marker {
    display: none;
}

details summary span {
    color: #f4f0df;
    font-size: 18px;
    font-weight: 800;
}

details summary small {
    color: var(--muted);
}

details summary::after {
    content: "+";
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .28);
    color: var(--gold);
    font-weight: 900;
}

details[open] summary {
    margin-bottom: 14px;
}

details[open] summary::after {
    content: "-";
}

.board-panel::before,
.hand-panel::before,
.deck-panel::before,
.opponent-panel::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 6px;
    pointer-events: none;
}

.table-zone .panel,
.playmat .panel {
    background:
        radial-gradient(circle at 18% 10%, rgba(68, 194, 168, .16), transparent 26%),
        linear-gradient(145deg, var(--felt), var(--felt-dark));
    border-color: color-mix(in srgb, var(--accent), var(--line) 56%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035), 0 18px 34px rgba(0, 0, 0, .22);
}

.deck-tile {
    min-height: 118px;
    border: 2px solid #0a0d11;
    outline: 1px solid color-mix(in srgb, var(--card-edge), white 8%);
    background:
        linear-gradient(135deg, rgba(224, 184, 79, .2) 0 10%, transparent 10% 20%, rgba(68, 194, 168, .14) 20% 30%, transparent 30% 40%, rgba(224, 184, 79, .2) 40% 50%, transparent 50% 60%, rgba(68, 194, 168, .14) 60% 70%, transparent 70%),
        #121923;
    box-shadow: 0 8px 0 rgba(0, 0, 0, .28);
}

.deck-tile strong,
.deck-tile span,
.deck-tile small {
    display: block;
}

.deck-tile span,
.deck-tile small {
    margin-top: 4px;
    color: var(--muted);
}

.admin-decks {
    margin: 12px 0;
}

.admin-cards-toolbar {
    margin-bottom: 12px;
}

.admin-card-table {
    min-width: 1180px;
}

.admin-card-table td {
    vertical-align: top;
}

.admin-card-table input,
.admin-card-table select,
.admin-card-table textarea {
    min-height: 30px;
    padding: 5px 7px;
    font-size: 13px;
}

.admin-card-table textarea {
    min-height: 52px;
    margin-top: 6px;
    resize: vertical;
}

.inline-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(88px, 1fr));
    gap: 6px;
    min-width: 190px;
}

.inline-stat-grid label {
    gap: 3px;
    color: var(--muted);
    font-size: 11px;
}

.inline-file {
    width: 120px;
    margin-top: 6px;
    font-size: 11px;
}

.inline-check {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 84px;
}

.opponent-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.opponent-card.is-out {
    opacity: .62;
}

.mini-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 10px;
}

.mini-stats span {
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
    color: var(--muted);
    font-size: 12px;
}

.cost-reference {
    margin-top: 16px;
}

.cost-grid {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    margin-bottom: 14px;
}

.cost-tile {
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--card-edge), var(--line) 64%);
    border-radius: 8px;
    background: rgba(0, 0, 0, .22);
}

.cost-tile strong,
.cost-tile span,
.cost-tile small {
    display: block;
}

.cost-tile span {
    margin-top: 4px;
    color: var(--gold);
    font-weight: 800;
}

.cost-tile small {
    margin-top: 3px;
    color: var(--muted);
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.captain-select-grid {
    align-items: start;
}

.captain-choice {
    display: grid;
    gap: 10px;
    margin: 0;
}

.captain-choice .card {
    margin: 0;
}

.captain-choice.is-selected .card {
    outline: 2px solid var(--accent);
    box-shadow: 0 0 0 4px rgba(68, 194, 168, .14);
}

.captain-choice.is-taken .card {
    opacity: .48;
    filter: grayscale(.65);
}

.board-panel .cards,
.hand-panel .cards {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 8px;
    background: rgba(0, 0, 0, .14);
}

.hand-panel .cards {
    align-items: start;
}

.playmat .cards {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 8px;
}

.system-stacks {
    align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(124px, 124px));
    gap: 42px 18px;
}

.system-card-stack {
    --stack-step-x: 7px;
    --stack-step-y: 14px;
    --stack-card-height: 76px;
    position: relative;
    min-height: calc(var(--stack-card-height) + (var(--stack-count) * var(--stack-step-y)));
    width: calc(92px + (var(--stack-count) * var(--stack-step-x)));
}

.system-card-stack .stack-card {
    position: absolute;
    inset: 0 auto auto 0;
    width: 92px;
}

.system-card-stack .stack-system {
    z-index: 40;
}

.system-card-stack .stack-planet {
    transform: translate(calc(var(--stack-index) * var(--stack-step-x)), calc(var(--stack-index) * var(--stack-step-y)));
    z-index: calc(40 - var(--stack-index));
}

.system-card-stack .card {
    height: var(--stack-card-height);
    min-height: var(--stack-card-height);
    overflow: hidden;
}

.system-card-stack .card:hover,
.system-card-stack .card:focus-within {
    height: auto;
    min-height: 164px;
    overflow: visible;
}

.system-card-stack .card-body {
    min-height: 54px;
}

.system-card-stack .card small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.system-card-stack .stack-card:has(.card:hover),
.system-card-stack .stack-card:has(.card:focus-within) {
    z-index: 70;
}

.hand-panel .card {
    transform-origin: bottom center;
}

.hand-panel .card:nth-child(3n + 1) {
    rotate: -1deg;
}

.hand-panel .card:nth-child(3n + 2) {
    rotate: 1deg;
}

.hand-panel .card:hover {
    rotate: 0deg;
}

.card {
    min-height: 256px;
    background:
        linear-gradient(180deg, #f1e7be, #bda86c 42%, #6e5a2f);
    border: 2px solid #0a0d11;
    border-radius: 8px;
    overflow: hidden;
    box-shadow:
        0 10px 18px rgba(0, 0, 0, .32),
        inset 0 0 0 2px rgba(255, 255, 255, .18);
    color: var(--card-ink);
    transition: transform .16s ease, box-shadow .16s ease;
}

.card-art-probe span {
    background: radial-gradient(circle at 35% 28%, #fff, #8ed8ff);
}

.card-art-colony_ship span,
.card-art-mining_platform span {
    background: radial-gradient(circle at 35% 28%, #fff6ba, #e0b84f);
}

.card-art-planet span,
.card-art-cluster span {
    background: radial-gradient(circle at 35% 28%, #e7ffe6, #70d38b);
}

.card-art-shipyard span,
.card-art-silo span {
    background: radial-gradient(circle at 35% 28%, #f1f1f1, #a8b4c2);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 16px 24px rgba(0, 0, 0, .38),
        inset 0 0 0 2px rgba(255, 255, 255, .22);
}

.playmat .card {
    position: relative;
    min-height: 76px;
    border-width: 1px;
    border-radius: 6px;
    transition: transform .16s ease, box-shadow .16s ease, z-index .16s ease;
}

.playmat .card:hover,
.playmat .card:focus-within {
    z-index: 40;
    min-height: 164px;
    transform: scale(2.15) translateY(-4px);
    box-shadow:
        0 20px 34px rgba(0, 0, 0, .52),
        inset 0 0 0 2px rgba(255, 255, 255, .22);
}

.compact-cards {
    grid-template-columns: repeat(auto-fill, minmax(220px, 300px));
}

.visual-card {
    display: grid;
    grid-template-rows: 128px 1fr;
    padding: 8px;
    gap: 8px;
}

.playmat .visual-card {
    grid-template-rows: 68px 0;
    padding: 4px;
    gap: 0;
}

.playmat .card:hover .visual-card,
.playmat .card:focus-within .visual-card {
    grid-template-rows: 72px minmax(84px, auto);
    gap: 4px;
}

.card-art {
    display: grid;
    place-items: center;
    min-height: 128px;
    background: #000;
    border: 2px solid #2c2513;
    border-radius: 5px;
    overflow: hidden;
}

.playmat .card-art {
    min-height: 64px;
    border-width: 1px;
    border-radius: 4px;
}

.playmat .card:hover .card-art,
.playmat .card:focus-within .card-art {
    min-height: 72px;
}

.card-art img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    background: #000;
}

.card-art span {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    color: #07110f;
    background: radial-gradient(circle at 35% 28%, #fff6ba, var(--accent));
    font-weight: 900;
    letter-spacing: 0;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .25);
}

.playmat .card-art span {
    width: 31px;
    height: 31px;
    font-size: 10px;
}

.card-art-alien span,
.card-art-fighter span {
    background: var(--danger);
    color: #fff;
}

.card-art-captain span,
.card-art-star_system span {
    background: var(--gold);
}

.card-body {
    display: flex;
    flex-direction: column;
    min-height: 104px;
    padding: 10px;
    background: rgba(255, 248, 222, .92);
    border: 1px solid rgba(35, 27, 10, .38);
    border-radius: 5px;
}

.playmat .card-body {
    min-height: 0;
    max-height: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    opacity: 0;
    overflow: hidden;
}

.playmat .card:hover .card-body,
.playmat .card:focus-within .card-body {
    min-height: 84px;
    max-height: none;
    padding: 6px;
    border: 1px solid rgba(35, 27, 10, .38);
    opacity: 1;
    overflow: visible;
}

.card strong,
.card span,
.card small {
    display: block;
}

.card span,
.card small {
    margin-top: 6px;
    color: #3b3b35;
}

.card-kicker {
    color: #6c5320;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.playmat .card-kicker {
    font-size: 7px;
}

.card-body strong {
    margin-top: 2px;
    color: #141414;
    font-size: 16px;
    line-height: 1.1;
}

.playmat .card-body strong {
    font-size: 9px;
    line-height: 1;
}

.playmat .card span,
.playmat .card small {
    margin-top: 2px;
    font-size: 7px;
    line-height: 1.15;
}

.playmat .card-status {
    padding: 1px 3px;
    font-size: 7px;
}

.playmat .card-stat-row {
    gap: 2px;
    margin-top: 3px;
}

.playmat .card-stat-row span {
    padding: 1px 3px;
    font-size: 7px;
}

.card-status {
    display: inline-flex;
    width: fit-content;
    padding: 2px 7px;
    border-radius: 999px;
    background: #24364a;
    border: 1px solid #0e1722;
    color: #edf5ff;
    font-size: 12px;
}

.card-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.card-stat-row span {
    margin: 0;
    padding: 3px 7px;
    border-radius: 999px;
    background: #141820;
    color: #f6eecb;
    border: 1px solid #4a3f22;
    font-size: 12px;
    font-weight: 800;
}

.token {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 7px;
    border-radius: 999px;
    color: #07110f;
    background: linear-gradient(180deg, #9ff7df, var(--accent));
    font-weight: 800;
}

.token.muted {
    background: #a5a5a5;
    color: #111;
}

.empty-slot {
    display: grid;
    place-items: center;
    min-height: 140px;
    padding: 18px;
    border: 2px dashed rgba(238, 242, 246, .2);
    border-radius: 8px;
    color: rgba(238, 242, 246, .62);
    background: rgba(0, 0, 0, .12);
    text-align: center;
}

.list,
.log {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list li,
.log li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.log li {
    justify-content: flex-start;
}

.log span {
    color: var(--muted);
    min-width: 42px;
}

.admin-thumb {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: #111720;
}

.admin-thumb img,
.image-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.admin-thumb span {
    color: var(--accent);
    font-weight: 900;
}

.image-preview {
    display: grid;
    gap: 6px;
    grid-column: 1 / -1;
    color: var(--muted);
}

.image-preview img {
    width: 160px;
    height: 110px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

@media (max-width: 820px) {
    .topbar {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 10px;
        padding: 10px 16px;
    }

    .topbar-left,
    .topbar-room,
    nav {
        flex-wrap: wrap;
    }

    .topbar-stats {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    nav {
        justify-content: flex-start;
    }

    .two,
    .settings-grid {
        grid-template-columns: 1fr;
    }

    .header-status,
    .header-stats {
        width: 100%;
    }

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

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

    .step {
        justify-content: flex-start;
        white-space: normal;
    }

    .split,
    .inline,
    .actions {
        align-items: stretch;
        flex-direction: column;
    }

    .inline input,
    .inline select,
    .actions input,
    .actions select {
        width: 100%;
    }

    .cards {
        grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
        padding: 8px;
    }

    .card {
        min-height: 232px;
    }

    .visual-card {
        grid-template-rows: 104px 1fr;
    }

    .card-art {
        min-height: 104px;
    }

    .turn-actions-panel {
        position: static;
    }
}