/* Classic turn-based strategy chrome. Colors still come from the active theme. */

:root {
    --danger: #c45648;
    --shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    --studio-tab-bg: transparent;
    --studio-tab-fg: var(--ink);
    --studio-tab-font: var(--font-display);
    --highlight-panel-bg: color-mix(in srgb, var(--paper-2) 94%, black);
    --highlight-panel-fg: var(--ink);
    --highlight-panel-font: var(--font-body);
    --highlight-panel-border: color-mix(in srgb, var(--brand) 62%, var(--line));
    --highlight-panel-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 28%, transparent);
}

body {
    background-color: var(--paper-top);
    background-image:
        radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 46%);
}

.site-header {
    background-color: var(--paper-top);
    background-image:
        linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, transparent), transparent 72%),
        linear-gradient(var(--header-bg), var(--header-bg));
    border-bottom: 1px solid var(--brand-deep);
    box-shadow:
        inset 0 -1px 0 color-mix(in srgb, var(--brand) 55%, transparent),
        0 10px 28px rgba(0, 0, 0, 0.35);
}

.brand-mark {
    border-radius: 0;
    border-width: 1px;
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--paper-top) 80%, transparent);
    letter-spacing: 0.12em;
}

.site-surface {
    position: relative;
}

.site-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.45;
    background-image:
        radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.5) 100%),
        repeating-linear-gradient(
            0deg,
            transparent 0 47px,
            color-mix(in srgb, var(--brand) 18%, transparent) 48px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0 47px,
            color-mix(in srgb, var(--brand) 18%, transparent) 48px
        );
}

.site-surface > * {
    position: relative;
    z-index: 1;
}

h1,
h2,
h3,
.eyebrow,
.coming-soon-brand-name,
.coming-soon-title {
    font-family: var(--font-display);
    letter-spacing: 0.06em;
}

.hero-grid {
    align-items: start;
}

.hero h1,
.auth-shell h1,
main h1 {
    font-weight: 700;
    line-height: 1.2;
}

.hero h1::after,
.auth-shell > h1::after,
.admin-shell > h1::after,
.is-studio h1::after {
    content: "";
    display: block;
    width: 5.5rem;
    height: 2px;
    margin-top: 0.75rem;
    background: linear-gradient(90deg, var(--brand), transparent);
}

.lede,
.section-note,
.field-hint,
.community-meta {
    font-family: var(--font-body);
}

.nav-links > a.nav-pill,
.nav-links > button.nav-pill,
.nav-links .nav-command-toggle,
.nav-links > a:not(.nav-avatar),
.tab-btn,
.auth-mode-btn,
.community-nav a {
    border-radius: 0;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: none;
}

.nav-links > a.nav-pill,
.nav-links > button.nav-pill,
.nav-links .nav-command-toggle,
.nav-links > a:not(.nav-avatar),
.tab-btn {
    background: color-mix(in srgb, var(--paper-top) 72%, transparent);
    border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
}

.nav-links > a.nav-pill:hover,
.nav-links > button.nav-pill:hover,
.nav-links .nav-command-toggle:hover,
.nav-links > a:not(.nav-avatar):hover,
.tab-btn:hover,
.community-nav a:hover {
    background: color-mix(in srgb, var(--brand) 16%, var(--paper-2));
    border-color: var(--brand);
    color: var(--ink);
    box-shadow: none;
    filter: none;
}

.nav-links > a.nav-pill.active,
.nav-links > button.nav-pill.active,
.nav-links .nav-command-toggle.active,
.nav-links .nav-command.is-open .nav-command-toggle,
.nav-links > a:not(.nav-avatar).active,
.tab-btn.is-active,
.tab-btn.is-active:hover,
.community-nav a.active {
    background: var(--brand);
    border-color: var(--brand-deep);
    color: var(--cta-text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 28%, var(--brand));
}

.nav-command-menu,
.nav-command-item {
    border-radius: 0;
}

.nav-command-menu {
    border: 1px solid var(--brand-deep);
    background: var(--paper-top);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent),
        0 16px 32px rgba(0, 0, 0, 0.4);
}

.nav-command-item {
    justify-content: flex-start;
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.nav-command-item.active,
.nav-command-item.active:hover {
    background: var(--brand);
    color: var(--cta-text);
    box-shadow: none;
}

.btn {
    border-radius: 0;
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.75rem 1.15rem;
}

.btn-primary {
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 88%, #fff), var(--brand-deep));
    color: var(--cta-text);
    border: 1px solid var(--brand-deep);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent),
        0 1px 0 color-mix(in srgb, #000 45%, transparent);
}

.btn-primary:hover {
    filter: brightness(1.08);
}

.btn-ghost {
    background: color-mix(in srgb, var(--paper-top) 55%, transparent);
    border-color: color-mix(in srgb, var(--brand) 50%, var(--line));
    color: var(--ink);
}

.btn-ghost:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 10%, var(--paper-2));
}

.btn-danger {
    border-radius: 0;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--font-display);
}

.hero-panel,
.project-list article,
.project-list .info-card,
.publish-card,
.cookie-consent-panel,
.lobby-chat,
.discussion-board,
.auth-mode-toggle {
    border-radius: 0;
    border: 1px solid color-mix(in srgb, var(--brand) 62%, var(--line));
    background-color: color-mix(in srgb, var(--paper-2) 92%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--brand) 28%, transparent),
        inset 0 0 0 5px color-mix(in srgb, var(--paper-top) 55%, transparent);
}

.hero-panel,
.project-list article,
.project-list .info-card,
.publish-card,
.lobby-chat {
    padding: 1.15rem 1.2rem 1.25rem;
}

.project-list article,
.project-list .info-card {
    border-top: 1px solid color-mix(in srgb, var(--brand) 62%, var(--line));
    padding-top: 1.15rem;
}

.hero-panel h2,
.project-list h2,
.project-list h3,
.publish-card h3,
.section h2,
.cookie-consent-panel h2 {
    font-family: var(--font-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.95rem;
}

.section {
    border-top-color: color-mix(in srgb, var(--brand) 35%, var(--line));
}

.auth-mode-toggle {
    padding: 0.35rem;
    gap: 0.35rem;
}

.auth-mode-btn.is-active {
    background: var(--brand);
    color: var(--cta-text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 25%, var(--brand));
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
textarea,
select {
    border-radius: 0;
    border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
    background: color-mix(in srgb, var(--paper-top) 78%, var(--paper-2));
    color: var(--ink);
    font-family: var(--font-body);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not([type="range"]):focus,
textarea:focus,
select:focus {
    outline: 1px solid var(--brand);
    outline-offset: 1px;
    border-color: var(--brand);
}

.table-wrap,
.user-table,
.rank-perm-table {
    border-radius: 0;
}

.table-wrap {
    border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--line));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent);
    background: color-mix(in srgb, var(--paper-top) 55%, transparent);
}

.user-table th {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand);
    background: color-mix(in srgb, var(--paper-top) 80%, var(--paper-2));
}

.user-table th,
.user-table td,
.rank-perm-table th,
.rank-perm-table td {
    border-bottom-color: color-mix(in srgb, var(--brand) 28%, var(--line));
}

.site-surface {
    display: flex;
    flex-direction: column;
}

.site-footer {
    margin-top: auto;
    border-top: 1px solid var(--brand-deep);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--brand) 45%, transparent);
    background: color-mix(in srgb, var(--paper-top) 72%, transparent);
}

.footer-inner {
    padding-top: 1.1rem;
}

.footer-links a,
.footer-link-btn {
    font-family: var(--font-display);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}

.footer-links a:hover,
.footer-link-btn:hover {
    color: var(--brand);
}

.rich-content a,
.lede a,
.field-hint a {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--brand) 65%, transparent);
    text-underline-offset: 0.18em;
}

.coming-soon-page {
    background-color: var(--paper-top);
}

body.is-coming-soon::before,
body.is-coming-soon::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    height: 7px;
    z-index: 6;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, var(--brand), transparent);
}

body.is-coming-soon::before { top: 0; }
body.is-coming-soon::after { bottom: 0; }

.cookie-consent-panel {
    background: var(--paper-top);
}

.lobby-chat-window,
.lobby-chat-messages {
    border-radius: 0;
}

.lobby-chat-room,
.lobby-chat-rooms-toggle,
.lobby-chat-collapse,
.lobby-chat-form button,
.lobby-chat-room-form button,
.lobby-chat-action {
    border-radius: 0;
}

.community-nav {
    border-bottom-color: color-mix(in srgb, var(--brand) 40%, var(--line));
    gap: 0.45rem;
}

.community-nav a {
    padding: 0.4rem 0.75rem;
    border: 1px solid transparent;
}

.community-nav a.active {
    border-color: var(--brand-deep);
}

.site-banner {
    border-bottom: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line));
}

::selection {
    background: color-mix(in srgb, var(--brand) 55%, var(--paper));
    color: var(--cta-text);
}