:root {
    color-scheme: dark;
    --ink: #090c12;
    --panel: rgba(16, 22, 31, 0.88);
    --line: rgba(175, 205, 218, 0.14);
    --text: #edf4f3;
    --muted: #94a5a8;
    --cyan: #62d5d1;
    --cyan-soft: rgba(98, 213, 209, 0.12);
    --gold: #d7b36a;
    --gold-soft: rgba(215, 179, 106, 0.12);
    --danger: #ff8a82;
    --radius: 18px;
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
    --mobile-control-font-size: 16px;
    --mobile-action-height: 34px;
}


* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--ink);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% -10%, rgba(44, 99, 111, 0.25), transparent 36rem),
        linear-gradient(180deg, #0a1118 0%, #090c12 48%, #07090d 100%);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 54px 54px;
    content: "";
    mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.ambient {
    position: fixed;
    z-index: -1;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.08;
    pointer-events: none;
}

.ambient-one {
    top: 10%;
    left: -16rem;
    background: var(--cyan);
}

.ambient-two {
    right: -18rem;
    bottom: 0;
    background: var(--gold);
}

a {
    color: var(--cyan);
}

.masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1440px, calc(100% - 48px));
    margin: 0 auto;
    padding: 30px 0 24px;
}

.brand {
    display: inline-flex;
    gap: 14px;
    align-items: center;
    color: var(--text);
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(215, 179, 106, 0.65);
    border-radius: 50% 50% 46% 54%;
    background: linear-gradient(145deg, rgba(215, 179, 106, 0.16), rgba(98, 213, 209, 0.08));
    box-shadow: inset 0 0 0 5px var(--ink), 0 0 35px rgba(215, 179, 106, 0.1);
    color: var(--gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.brand-name,
.brand-kicker {
    display: block;
}

.brand-name {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    letter-spacing: 0.03em;
}

.brand-kicker {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.free-tag {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 8px 12px;
    text-transform: uppercase;
}

.realm-shell {
    display: grid;
    grid-template-columns: minmax(180px, 230px) minmax(500px, 1fr) minmax(220px, 280px);
    gap: 22px;
    width: min(1440px, calc(100% - 48px));
    margin: 0 auto;
}

.sidebar,
.main-column {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 42%),
        var(--panel);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
    padding: 12px 14px;
}

.nav-panel,
.stats-panel,
.login-panel {
    padding: 22px;
}

.eyebrow {
    margin: 0 0 13px;
    color: var(--gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.17em;
    line-height: 1.35;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

.nav-panel nav {
    display: grid;
    gap: 6px;
}

.nav-link {
    display: flex;
    gap: 11px;
    align-items: center;
    margin: 0 -10px;
    border-radius: 9px;
    padding: 11px 10px;
    color: var(--muted);
    font-size: 11px;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}

.nav-link span {
    width: 18px;
    color: var(--cyan);
    text-align: center;
}

.nav-link:hover,
.nav-link.active {
    background: var(--cyan-soft);
    color: var(--text);
    transform: translateX(2px);
}

.stats {
    margin: 0;
}

.stats div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding: 12px 0;
}

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

.stats dd {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
}

.stats dd.online {
    color: var(--cyan);
}

.player-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 560px;
    margin-bottom: 28px;
    column-gap: 24px;
}

.game-header {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) auto minmax(250px, 1fr);
    gap: clamp(28px, 2vw, 40px);
    align-items: center;
    width: min(1740px, calc(100% - 48px));
    margin: 0 auto;
    padding: 24px 0 20px;
}

.game-header-resources {
    display: flex;
    min-width: 0;
    gap: clamp(26px, 1.8vw, 36px);
    align-items: center;
    justify-self: center;
}

.header-resource-group {
    display: flex;
    gap: 15px;
    align-items: center;
    border-left: 1px solid var(--line);
    padding-left: 18px;
}

.header-resource-title {
    color: var(--gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.header-resource-group dl {
    display: flex;
    gap: clamp(18px, 1.25vw, 26px);
    margin: 0;
}

.header-resource-group dl div {
    display: grid;
    gap: 3px;
    min-width: max-content;
}

.header-resource-group dt {
    color: #667679;
    font-size: 9px;
    text-transform: uppercase;
}

.header-resource-group dd {
    margin: 0;
    color: #d8e2e1;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    white-space: nowrap;
}

.header-vitals {
    display: grid;
    gap: 5px;
}

.header-resource-row {
    align-items: center;
    display: flex;
    gap: 15px;
}

.daily-reset-notice {
    background: rgba(214, 166, 67, .13);
    border: 1px solid rgba(230, 185, 88, .68);
    border-radius: 5px;
    color: #f3cc72;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 4px 8px;
    text-align: center;
}

.daily-reset-notice.is-active {
    animation: daily-reset-arrived .35s ease-out;
}

@keyframes daily-reset-arrived {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

[data-live-mana] {
    align-items: center;
    display: flex;
    gap: 5px;
    position: relative;
}

.mana-gain-flash {
    color: #68e88b;
    font-family: Inter, system-ui, sans-serif;
    font-size: 10px;
    font-weight: 800;
    opacity: 0;
    text-shadow: 0 0 9px rgba(104, 232, 139, .55);
}

.mana-gain-flash.is-active {
    animation: mana-gain-arrived 1.6s ease-out;
}

@keyframes mana-gain-arrived {
    0% { opacity: 0; transform: translateY(4px) scale(.9); }
    20%, 65% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-4px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .mana-gain-flash.is-active {
        animation-duration: .01ms;
    }

    .daily-reset-notice.is-active {
        animation-duration: .01ms;
    }
}

.game-header-player small {
    color: #667679;
    font-size: 9px;
}

.game-header-player small a {
    color: var(--cyan);
    text-decoration: none;
}

.game-header-player {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-self: end;
    color: #c9d4d4;
    font-size: 12px;
    font-weight: 700;
    min-width: max-content;
}

.mobile-nav-toggle,
.mobile-navigation-heading,
.mobile-nav-backdrop,
.mobile-navigation-extras {
    display: none;
}

.online-dot,
.realm-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 12px rgba(98, 213, 209, 0.7);
}

.level-badge,
.realm-status {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 0.07em;
    padding: 7px 10px;
    text-transform: uppercase;
}

.game-shell {
    display: grid;
    grid-template-columns: 250px minmax(520px, 1fr) 230px;
    gap: 22px;
    width: min(1500px, calc(100% - 48px));
    margin: 0 auto;
}

.game-navigation,
.resource-rail,
.game-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 16px;
}

.game-navigation {
    position: sticky;
    top: 18px;
    max-height: calc(100vh - 36px);
    align-self: start;
    overflow-y: auto;
    scrollbar-width: thin;
}

.resource-card {
    padding: 18px;
}

.game-nav {
    display: grid;
    gap: 2px;
    overflow: visible;
    padding: 12px;
}

.game-nav-link {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    position: relative;
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    min-height: 38px;
    padding: 4px 7px;
    text-align: left;
    text-decoration: none;
}

a.game-nav-link:hover,
.game-nav-link.active {
    background: var(--cyan-soft);
    color: var(--text);
}

.game-nav-link.active .nav-glyph {
    border-color: rgba(98, 213, 209, 0.5);
    color: var(--cyan);
}

.game-nav-link.has-unread {
    border: 1px solid rgba(215, 179, 106, .55);
    background: var(--gold-soft);
    color: var(--gold);
}

.game-nav-link.has-unread:hover,
.game-nav-link.has-unread.active {
    background: rgba(215, 179, 106, .18);
    color: #f0d28f;
}

.game-nav-link.has-unread .nav-glyph {
    border-color: rgba(215, 179, 106, .55);
    color: var(--gold);
}

.game-nav-link strong {
    display: block;
    font-size: 12px;
}

.game-nav-link.disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.nav-glyph {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: #7f9193;
    font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
    font-size: 13px;
    line-height: 1;
}

.nav-section-label {
    margin: 14px 9px 5px;
    color: #566467;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.custom-links-nav { gap: 3px; }
.custom-links-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 2px; }
.custom-links-heading .eyebrow { margin: 0; }
.custom-links-heading a { color: var(--accent); font-size: 9px; text-decoration: none; text-transform: uppercase; }
.custom-links-nav .game-nav-link { min-height: 31px; }
.custom-links-nav .custom-link-add { color: var(--muted); }
.custom-link-create { margin-bottom: 10px; }
.custom-link-form { align-items: end; display: grid; gap: 8px; grid-template-columns: minmax(140px, 0.7fr) minmax(260px, 1.5fr) auto; }
.custom-link-form .field-label { margin-bottom: 4px; }
.custom-link-destination { background:var(--input-bg); border:1px solid var(--border); border-radius:7px; display:block; min-height:36px; overflow:hidden; padding:9px 10px; text-overflow:ellipsis; white-space:nowrap; }
.custom-link-list { display: grid; gap: 6px; }
.custom-link-list > .eyebrow { margin-bottom: 2px; }
.custom-link-row { align-items: center; border: 1px solid var(--border); border-radius: 7px; display: grid; gap: 7px; grid-template-columns: minmax(180px, 1fr) minmax(220px, 0.8fr) auto; padding: 7px; }
.custom-link-row > div { display: grid; gap: 3px; min-width: 0; }
.custom-link-row small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-link-row form:first-of-type { align-items: center; display: grid; gap: 5px; grid-template-columns: minmax(0, 1fr) auto; }

@media (max-width: 720px) {
    .custom-link-form,
    .custom-link-row { grid-template-columns: 1fr; }
    .custom-link-row form:first-of-type { grid-template-columns: minmax(0, 1fr) auto; }
}

.utility-nav form {
    margin: 0;
}

.logout-link {
    cursor: pointer;
    font: inherit;
}

.logout-link:hover {
    background: rgba(255, 138, 130, 0.08);
    color: var(--danger);
}

.skip-link {
    position: absolute;
    left: -10000px;
    z-index: 10;
    background: var(--cyan);
    color: var(--ink);
    padding: 10px 14px;
}

.skip-link:focus {
    top: 0;
    left: 0;
}

.resource-list,
.compact-stats {
    margin: 0;
}

.resource-identity {
    display: grid;
    gap: 5px;
    padding: 3px 0 14px;
}

.resource-identity strong {
    color: var(--text);
    font-size: 11px;
}

.resource-identity a {
    color: var(--cyan);
    font-size: 11px;
    text-decoration: none;
}

.resource-identity a:hover {
    text-decoration: underline;
}

.resource-list div,
.compact-stats div {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding: 11px 0;
}

.resource-list dt,
.compact-stats dt {
    color: var(--muted);
    font-size: 10px;
}

.resource-list dd,
.compact-stats dd {
    margin: 0;
    color: #d8e2e1;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
}

.resource-list dd {
    text-align: right;
}

.stat-bonus {
    color: #5ed882;
}

.game-info-card dd small {
    display: block;
    margin-top: 4px;
    color: #7c8c8e;
    font-family: inherit;
    font-size: 9px;
}

.game-info-card .next-event dt,
.game-info-card .next-event time {
    color: #65d6a0;
}

.game-info-card [data-countdown-urgency="warning"] time,
.game-info-card [data-countdown-urgency="warning"] [data-countdown] {
    color: var(--gold);
}

.game-info-card [data-countdown-urgency="urgent"] time,
.game-info-card [data-countdown-urgency="urgent"] [data-countdown] {
    color: #f29a5b;
}

.game-info-card [data-countdown-urgency="critical"] time,
.game-info-card [data-countdown-urgency="critical"] [data-countdown] {
    color: var(--danger);
    font-weight: 800;
}

.vote-card p,
.mini-chat-lines p,
.support-notice p {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.55;
}

.rail-action {
    display: inline-flex;
    justify-content: center;
    border: 1px solid rgba(98, 213, 209, 0.35);
    border-radius: 8px;
    background: var(--cyan-soft);
    color: var(--cyan);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 6px 10px;
    text-decoration: none;
    text-transform: uppercase;
}

.mini-chat-lines {
    display: grid;
    gap: 0;
    max-height: 180px;
    overflow-y: auto;
}

.mini-chat-lines p {
    align-items: baseline;
    display: flex;
    gap: 3px;
    line-height: 1.15;
    margin: 0;
    padding: 1px 0;
}

.mini-chat-lines time { color: var(--muted); flex: none; font-size: 10px; font-variant-numeric: tabular-nums; }

.mini-chat-lines a,
.active-player-list a {
    color: var(--cyan);
    font-weight: 700;
    text-decoration: none;
}

.mini-chat-lines .chat-line-author {
    align-items: baseline;
    display: inline-flex;
    flex: 0 0 auto;
    white-space: nowrap;
}

.mini-chat-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    margin-top: 12px;
}

.mini-chat-form input {
    min-width: 0;
}

.mini-chat-form button {
    padding-inline: 10px;
}

.active-player-list,
.community-card {
    display: grid;
    gap: 9px;
}

.active-player-list span,
.chat-command-help {
    color: var(--muted);
    font-size: 10px;
}

.chat-command-help {
    margin-top: 14px;
}

.chat-command-help code {
    display: block;
    padding-top: 5px;
}

.community-card a {
    color: #a9b8b9;
    font-size: 10px;
    text-decoration: none;
}

.community-card a:hover,
footer a:hover {
    color: var(--cyan);
}

.vote-site-grid,
.support-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.vote-site-grid article,
.support-grid article {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.018);
    padding: 18px;
}

.vote-site-grid h2,
.support-grid h2 {
    margin: 0 0 8px;
    color: var(--text);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
}

.vote-site-grid p,
.support-grid li,
.vote-winners p {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
}

.vote-site-grid button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.vote-winners,
.support-notice {
    margin-top: 16px;
}

.patron-purchase-panel {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
    padding-block: 14px;
}

.patron-purchase-copy h2,
.patron-dialog h2 {
    margin: 0 0 8px;
}

.patron-purchase-form {
    align-content: start;
    display: grid;
    gap: 8px;
}

.patron-purchase-form label {
    display: grid;
    gap: 6px;
}

.patron-purchase-form select,
.patron-purchase-form input[type="number"] {
    width: 100%;
}

.patron-purchase-form .patron-gift-choice {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-block: 2px;
}

.patron-purchase-form .patron-gift-fields[hidden] {
    display: none;
}

.patron-gift-fields small,
.patron-checkout-note {
    color: var(--muted);
    line-height: 1.45;
}

.patron-comparison-scroll {
    background: rgba(255, 255, 255, 0.012);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow-x: auto;
}

.patron-comparison {
    border-collapse: collapse;
    min-width: 780px;
    width: 100%;
}

.patron-comparison th,
.patron-comparison td {
    border-bottom: 1px solid var(--line);
    line-height: 1.4;
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}

.patron-comparison th {
    background: rgba(255, 255, 255, 0.025);
    color: var(--gold);
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.patron-comparison td:first-child {
    color: var(--text);
    font-weight: 700;
    width: 25%;
}

.patron-comparison tr:last-child td {
    border-bottom: 0;
}

.patron-palette-guide h2 { margin: 0 0 5px; }
.patron-palette-grid { display: grid; gap: 7px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.patron-palette-card { align-items: center; border: 1px solid var(--line); border-radius: 8px; display: flex; gap: 12px; justify-content: space-between; min-width: 0; padding: 8px 10px; }
.patron-palette-card > div { display: grid; gap: 2px; }
.patron-palette-card small { color: var(--muted); }
.patron-palette-card ul { display: flex; flex-wrap: wrap; gap: 5px 9px; justify-content: flex-end; list-style: none; margin: 0; padding: 0; }
.patron-palette-card li { align-items: center; display: flex; font-size: 10px; gap: 4px; white-space: nowrap; }
.patron-palette-card li span { background: var(--palette-colour); border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; height: 9px; width: 9px; }
@media (max-width: 760px) {
    .patron-palette-grid { grid-template-columns: 1fr; }
    .patron-palette-card { align-items: flex-start; flex-direction: column; }
    .patron-palette-card ul { justify-content: flex-start; }
}

.patron-dialog {
    background: transparent;
    border: 0;
    color: var(--text);
    max-width: 560px;
    padding: 0;
    width: calc(100% - 28px);
}

.patron-dialog::backdrop {
    background: rgba(2, 7, 11, .82);
    backdrop-filter: blur(3px);
}

.patron-dialog-card {
    background: var(--panel);
    border: 1px solid rgba(215, 179, 106, .5);
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
    display: grid;
    gap: 16px;
    padding: 20px;
}

.patron-dialog-heading {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
}

.patron-dialog-close {
    background: transparent;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    font-size: 22px;
    padding: 2px 6px;
}

.patron-order-summary {
    display: grid;
    gap: 8px;
    margin: 0;
}

.patron-order-summary > div {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;
}

.patron-order-summary dt {
    color: var(--muted);
}

.patron-order-summary dd {
    color: var(--gold);
    font-weight: 700;
    margin: 0;
}

.patron-consent {
    align-items: flex-start;
    background: rgba(215, 179, 106, .08);
    border: 1px solid rgba(215, 179, 106, .35);
    border-radius: 8px;
    display: flex;
    gap: 10px;
    line-height: 1.5;
    padding: 12px;
}

.patron-consent input {
    flex: 0 0 auto;
    margin-top: 3px;
}

.patron-dialog-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.patron-paypal-button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

@media (max-width: 760px) {
    .patron-purchase-panel {
        grid-template-columns: 1fr;
    }
}

.vote-winners a {
    margin-right: 12px;
    color: var(--cyan);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.game-welcome {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    justify-content: space-between;
    overflow: hidden;
    border: 1px solid rgba(215, 179, 106, 0.2);
    border-radius: 16px;
    background:
        radial-gradient(circle at 90% 30%, rgba(98, 213, 209, 0.13), transparent 34%),
        linear-gradient(125deg, rgba(16, 22, 31, 0.96), rgba(13, 27, 32, 0.86));
    box-shadow: var(--shadow);
    padding: clamp(17px, 3vw, 31px) clamp(21px, 3.75vw, 39px);
}

.game-welcome h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
}

.game-welcome p:last-child,
.dashboard-card > p:last-child {
    max-width: 650px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.7;
}

.subnav,
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.subnav {
    position: sticky;
    z-index: 2;
    top: 0;
    padding: 8px 0;
    background: var(--ink);
}

.subnav a {
    border: 1px solid rgba(98, 213, 209, 0.34);
    border-radius: 8px;
    color: var(--cyan);
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
}

.compact-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
}

.compact-card-grid .realm-card,
#incoming .realm-card {
    grid-column: auto;
    padding: 10px 12px;
}

.compact-card-grid .realm-card h3,
#incoming .realm-card h3 {
    margin: 0 0 6px;
    font-size: 12px;
}

.compact-card-grid .realm-card p,
#incoming .realm-card p {
    margin: 4px 0 8px;
}

.compact-card-grid label {
    margin-top: 7px;
}

.compact-card-grid select {
    height: 34px;
}

.dense-list {
    display: grid;
    gap: 3px;
    margin: 8px 0 0;
    padding-left: 18px;
}

.voodoo-research-heading { align-items: end; display: flex; gap: 12px; justify-content: space-between; padding: 2px 2px 9px; }
.voodoo-research-heading h2, .voodoo-research-heading p { margin: 0; }
.voodoo-research-heading p, .voodoo-research-heading small { color: var(--muted); }
.voodoo-research-heading p { margin-top: 3px; }
.voodoo-research-heading small { max-width: 330px; text-align: right; }
.voodoo-curse-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); padding: 3px 1px; }
.voodoo-curse-card { display: flex; flex-direction: column; gap: 6px; }
.voodoo-curse-card.is-known { border-color: rgba(98, 213, 209, .32); }
.voodoo-curse-title { align-items: baseline; display: flex; gap: 8px; justify-content: space-between; }
.voodoo-curse-title h3 { margin: 0; }
.voodoo-curse-title span { color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.voodoo-curse-card > p { color: var(--muted); margin: 0; }
.voodoo-curse-requirements { display: grid; gap: 3px; margin: 0; }
.voodoo-curse-requirements > div { align-items: baseline; display: flex; gap: 8px; justify-content: space-between; }
.voodoo-curse-requirements dt { color: var(--muted); }
.voodoo-curse-requirements dd { margin: 0; text-align: right; }
.voodoo-curse-card form { margin-top: auto; }
.voodoo-research-state { color: var(--aqua); margin-top: auto; }
.voodoo-special-card { position: relative; }
.voodoo-special-title { align-items: center; display: flex; gap: 7px; justify-content: space-between; }
.voodoo-special-title h3 { margin: 0; }
.voodoo-special-title > span { align-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); display: inline-flex; flex: 0 0 auto; font-size: 9px; height: 17px; justify-content: center; width: 17px; }
.voodoo-item-tooltip { background: #111923; border: 1px solid rgba(215, 179, 106, .48); border-radius: 7px; bottom: calc(100% + 5px); box-shadow: 0 10px 28px rgba(0, 0, 0, .5); color: var(--text); font-size: 10px; left: 7px; line-height: 1.45; opacity: 0; padding: 7px 9px; pointer-events: none; position: absolute; right: 7px; transform: translateY(3px); transition: opacity .14s ease, transform .14s ease; visibility: hidden; z-index: 8; }
.voodoo-special-card:hover .voodoo-item-tooltip,
.voodoo-special-card:focus .voodoo-item-tooltip,
.voodoo-special-card:focus-within .voodoo-item-tooltip { opacity: 1; transform: translateY(0); visibility: visible; }
.voodoo-special-card:hover .voodoo-special-title > span,
.voodoo-special-card:focus .voodoo-special-title > span,
.voodoo-special-card:focus-within .voodoo-special-title > span { border-color: var(--gold); color: var(--gold); }
@media (max-width: 620px) {
    .voodoo-research-heading { align-items: start; flex-direction: column; }
    .voodoo-research-heading small { max-width: none; text-align: left; }
    .voodoo-curse-grid { grid-template-columns: 1fr; }
    .voodoo-item-tooltip { bottom: auto; display: none; left: 0; margin-top: 5px; opacity: 1; position: relative; right: auto; top: auto; transform: none; visibility: visible; }
    .voodoo-special-card:hover .voodoo-item-tooltip,
    .voodoo-special-card:focus .voodoo-item-tooltip,
    .voodoo-special-card:focus-within .voodoo-item-tooltip { display: block; }
}

.realm-status {
    display: flex;
    flex: 0 0 auto;
    gap: 7px;
    align-items: center;
    color: #a9cdcb;
}

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

.dashboard-card {
    min-height: 210px;
    padding: 26px;
}

.dashboard-card h2 {
    margin: 0 0 18px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 500;
}

.realm-card {
    grid-column: 1 / -1;
    min-height: 0;
}

.next-card .button-link {
    margin-top: 16px;
    color: var(--cyan);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.economy-hero h1 {
    font-size: 18px;
}

.economy-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.economy-action-card {
    display: flex;
    min-height: 245px;
    flex-direction: column;
    justify-content: space-between;
    padding: 26px;
}

.economy-action-card h2,
.ledger-heading h2 {
    margin: 0 0 12px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    font-weight: 500;
}

.economy-action-card p:last-child,
.empty-ledger {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.65;
}

.economy-action-card form {
    margin-top: 22px;
}

.economy-action-card .primary-button {
    width: 100%;
    justify-content: center;
}

.fountain-card {
    border-color: rgba(98, 213, 209, 0.2);
    background:
        radial-gradient(circle at 90% 10%, rgba(98, 213, 209, 0.09), transparent 38%),
        var(--panel);
}

.action-complete,
.action-unavailable {
    display: inline-flex;
    align-self: flex-start;
    border: 1px solid rgba(98, 213, 209, 0.25);
    border-radius: 999px;
    background: var(--cyan-soft);
    color: #acd7d4;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 9px 12px;
    text-transform: uppercase;
}

.action-unavailable {
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
}

.ledger-card {
    padding: 26px;
}

.ledger-heading,
.ledger-entry {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
}

.ledger-heading > span {
    color: #647376;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ledger-list {
    border-top: 1px solid var(--line);
}

.ledger-entry {
    border-bottom: 1px solid var(--line);
    padding: 15px 0;
}

.ledger-entry strong,
.ledger-entry time {
    display: block;
}

.ledger-entry strong {
    color: #d6e0df;
    font-size: 12px;
}

.ledger-entry time {
    margin-top: 4px;
    color: #657477;
    font-size: 9px;
}

.ledger-deltas {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ledger-deltas span {
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #9eb0b1;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    padding: 6px 8px;
}

.empty-ledger {
    margin: 8px 0 0;
    border-top: 1px solid var(--line);
    padding-top: 20px;
}

.armory-hero h1 {
    font-size: 18px;
}

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

.inventory-card {
    display: flex;
    min-height: 255px;
    flex-direction: column;
    padding: 23px;
}

.inventory-card.equipped {
    border-color: rgba(98, 213, 209, 0.35);
    box-shadow: inset 0 0 0 1px rgba(98, 213, 209, 0.06), var(--shadow);
}

.inventory-card-heading {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.inventory-card-heading h2,
.empty-armory h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 500;
}

.inventory-glyph {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(215, 179, 106, 0.28);
    border-radius: 12px;
    background: var(--gold-soft);
    color: var(--gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
}

.quantity-badge,
.equipped-badge {
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 9px;
    padding: 6px 8px;
}

.item-properties {
    margin: 20px 0;
}

.item-properties div {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding: 9px 0;
}

.item-properties dt,
.item-properties dd {
    font-size: 10px;
}

.item-properties dt {
    color: var(--muted);
}

.item-properties dd {
    margin: 0;
    color: #d5dfde;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.inventory-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    border-top: 1px solid var(--line);
    padding-top: 15px;
}

.inventory-card-footer form {
    margin: 0;
}

.inventory-card-footer .primary-button,
.inventory-card-footer .secondary-button {
    min-height: 36px;
    padding: 8px 13px;
}

.equipped-badge {
    border-color: rgba(98, 213, 209, 0.3);
    background: var(--cyan-soft);
    color: #acd7d4;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.item-acquired {
    color: #68777a;
    font-size: 9px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.armory-overview {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(220px, .8fr);
    gap: 10px;
}

.armory-equipped-panel,
.armory-stat-panel,
.armory-section {
    padding: 14px 16px;
}

.compact-heading {
    margin-bottom: 10px;
}

.compact-heading h2 {
    font-size: 16px;
}

.equipment-slot-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.loadout-formula {
    margin: 8px 1px 0;
    color: #718184;
    font-size: 8px;
}

.equipment-slot {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 8px;
}

.equipment-slot.occupied {
    border-color: rgba(98, 213, 209, .35);
    background: rgba(98, 213, 209, .04);
}

.equipment-slot > span,
.equipment-slot > strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.equipment-slot > .equipment-slot-effect {
    margin-top: 3px;
    color: #b7c7c7;
    font-size: 9px;
    letter-spacing: 0;
    text-transform: none;
}

.equipment-slot > .equipment-requirement {
    margin-top: 2px;
    color: #819194;
    font-size: 8px;
    letter-spacing: 0;
    text-transform: none;
}

.equipment-slot > span {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
}

.equipment-slot > strong {
    margin-top: 3px;
    font-size: 11px;
}

.equipment-slot form {
    margin: 3px 0 0;
}

.text-button {
    min-height: 0;
    border: 0;
    background: transparent;
    color: var(--cyan);
    font-size: 9px;
    padding: 0;
}

.armory-stat-list {
    margin: 8px 0;
}

.armory-stat-list div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--line);
    padding: 7px 0;
}

.armory-stat-list dt { color: var(--muted); }
.armory-stat-list dd { margin: 0; font-weight: 700; }
.armory-stat-list dt small { display: block; color: #718184; font-size: 8px; font-weight: 400; }
.skill-block { color: var(--gold); }
.skill-critical { color: #df7883; }
.armory-stat-list .protection-total { border-top: 1px solid rgba(215, 179, 106, .35); }
.armory-stat-list .protection-total dt,
.armory-stat-list .protection-total dd { color: var(--gold); font-weight: 800; }

.capacity-meter {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(148, 165, 168, .18);
    background: #070d12;
}

.capacity-meter span {
    display: block;
    width: var(--progress-value, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3ca5a3, var(--cyan));
    box-shadow: 0 0 7px rgba(98, 213, 209, .45);
}

.armory-page-tabs {
    margin-top: 10px;
}

.armory-section {
    overflow: hidden;
}

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

.armory-equipment-groups {
    display: grid;
    gap: 10px;
}

.armory-equipment-group {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.armory-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 9px;
    border-bottom: 1px solid var(--line);
    background: rgba(98, 213, 209, .035);
}

.armory-group-heading h3 {
    margin: 0;
    color: var(--gold);
    font-size: 11px;
}

.armory-group-heading span {
    color: var(--muted);
    font-size: 9px;
}

.armory-equipment-group .empty-row {
    margin: 0;
    padding: 9px;
}

.armory-loadouts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin: 8px 0 12px;
}

.armory-loadouts article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
    align-items: center;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 7px;
}

.armory-loadouts article > div { grid-column: 1 / -1; min-width: 0; }
.armory-loadouts strong,
.armory-loadouts span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.armory-loadouts span { color: var(--muted); font-size: 8px; }
.armory-loadouts form { margin: 0; }
.armory-loadouts button { width: 100%; min-height: 26px; padding: 4px 6px; font-size: 8px; }

.armory-legacy-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 12px;
}

.armory-control-box {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px;
}

.armory-control-box h3 {
    margin: 0 0 7px;
    color: var(--gold);
    font-size: 10px;
}

.armory-control-box form,
.armory-default-tool {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.armory-control-box select {
    min-width: 0;
    flex: 1;
}

.armory-return-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
}

.armory-return-actions > form:first-child { min-width: 0; }
.armory-return-actions > form:last-child { flex: 0 0 auto; }

.armory-default-tool {
    justify-content: space-between;
    margin-bottom: 6px;
    color: var(--muted);
}

.armory-default-tool b { color: var(--gold); }
.armory-default-tool form { flex: 0 0 auto; }

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

.armory-table th,
.armory-table td {
    border-bottom: 1px solid var(--line);
    padding: 7px 8px;
    text-align: left;
    vertical-align: middle;
}

.armory-table th {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
}

.armory-table td {
    font-size: 10px;
}

.armory-table tr.is-equipped {
    background: rgba(98, 213, 209, .035);
}

.armory-table tr.insufficient-strength {
    opacity: .46;
    filter: saturate(.35);
}

.strength-requirement.unmet {
    color: var(--danger);
    font-weight: 800;
}

.armory-actions button:disabled {
    cursor: not-allowed;
    opacity: .7;
}

.weapon-shop {
    margin-bottom: 6px;
    overflow-x: auto;
    padding: 14px 16px;
}

.weapon-shop h2,
.armor-shop-list h2 { font-size: 13px; margin: 0 0 6px; }

.weapon-shop-row {
    display: grid;
    grid-template-columns: minmax(165px, 1.4fr) minmax(90px, .7fr) minmax(100px, .7fr) minmax(65px, .45fr) minmax(105px, .75fr) minmax(90px, auto);
    gap: 8px;
    align-items: center;
    min-width: 700px;
    border-bottom: 1px solid var(--line);
    padding: 6px 3px;
}

.weapon-shop-row:last-child { border-bottom: 0; }
.weapon-shop-row form { justify-self: end; margin: 0; }
.weapon-shop-row button { min-height: 28px; padding: 5px 9px; font-size: 9px; }
.weapon-shop-row.insufficient-strength { background: rgba(255, 138, 130, .025); }
.weapon-shop-row .strength-requirement.unmet strong { display: block; color: var(--danger); font-size: 8px; text-transform: uppercase; }
.weapon-shop-row .strength-requirement.met strong { display: block; color: #70d899; font-size: 12px; line-height: 1; }
.weapon-shop-heading { color: var(--muted); font-size: 9px; text-transform: uppercase; }

.loan-label {
    display: block;
    color: var(--gold);
    font-size: 8px;
    text-transform: uppercase;
}

.equipment-slot > .loan-label {
    color: var(--gold);
    font-size: 8px;
}

.armory-actions {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    white-space: nowrap;
}

.armory-actions form { margin: 0; }
.armory-actions button,
.armory-stack-row button {
    min-height: 28px;
    padding: 5px 9px;
    font-size: 9px;
}

.armory-stack-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
}

.armory-stack-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 8px 10px;
}

.armory-stack-row strong,
.armory-stack-row span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.armory-stack-row span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
}

.armory-stack-row form { margin: 0; }

@media (max-width: 850px) {
    .armory-overview { grid-template-columns: 1fr; }
    .armory-legacy-controls { grid-template-columns: 1fr; }
    .equipment-slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .armory-stack-grid { grid-template-columns: 1fr; }
    .armory-table { min-width: 720px; }
    .armory-loadouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .armory-return-actions { grid-template-columns: 1fr; }
}

.empty-armory {
    padding: 30px;
}

.empty-armory p:last-child {
    color: var(--muted);
    font-size: 12px;
}

.mailbox-hero h1 {
    font-size: 18px;
}

.mailbox-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(340px, 1.2fr);
    gap: 18px;
    align-items: start;
}

.compose-card,
.message-list-card,
.opened-message {
    padding: 26px;
}

.compose-card h2 {
    margin: 0 0 18px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 500;
}

.mailbox-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 14px;
}

.mailbox-tabs a {
    border-radius: 999px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    padding: 8px 12px;
    text-decoration: none;
    text-transform: uppercase;
}

.mailbox-tabs a[aria-current="page"] {
    background: var(--cyan-soft);
    color: var(--cyan);
}

.message-row {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    padding: 15px 4px;
    text-decoration: none;
}

.message-row:hover {
    background: rgba(98, 213, 209, 0.035);
}

.message-row strong,
.message-row small {
    display: block;
}

.message-row strong {
    font-size: 12px;
}

.message-row small,
.message-row time {
    margin-top: 4px;
    color: #68777a;
    font-size: 9px;
}

.message-row.unread strong::before {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px rgba(98, 213, 209, 0.55);
    content: "";
}

.activity-mail-copy {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text);
    text-decoration: none;
}

.activity-mail-copy small {
    display: -webkit-box;
    max-width: 62rem;
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.activity-mail-meta {
    align-items: flex-end;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 5px;
}

.activity-mail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.activity-mail-actions a {
    color: var(--cyan);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .06em;
    text-decoration: none;
    text-transform: uppercase;
}

.activity-mail-actions .battle-report-link {
    border: 1px solid rgba(98, 213, 209, .45);
    border-radius: 6px;
    padding: 4px 7px;
}

.opened-notice {
    max-width: 68rem;
}

.opened-notice .opened-message-heading {
    gap: 12px;
    padding-bottom: 12px;
}

.opened-notice .eyebrow {
    margin-bottom: 6px;
}

.opened-notice .opened-message-heading p:last-child {
    margin: 6px 0 0;
    line-height: 1.4;
}

.opened-notice .notice-message-body {
    min-height: 0;
    color: var(--text);
    line-height: 1.7;
}

.opened-message-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.notice-details {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 22px;
}

.notice-details > div {
    border-top: 1px solid var(--line);
    min-width: 0;
    padding: 10px 12px;
}

.notice-details dt {
    color: var(--muted);
    font-size: 9px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.notice-details dd {
    margin: 4px 0 0;
    color: var(--text);
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.opened-message-heading {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding-bottom: 20px;
}

.opened-message h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.15;
}

.opened-message-heading p:last-child,
.message-body {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.75;
}

.message-body {
    min-height: 180px;
    padding: 25px 0;
}

@media (max-width: 620px) {
    .message-list-card {
        padding: 11px 10px;
    }

    .message-select-row {
        align-items: start;
    }

    .activity-mail-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
        padding: 9px 4px;
    }

    .activity-mail-meta {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }

    .activity-mail-actions a {
        font-size: 7px;
    }

    .opened-message-actions {
        justify-content: flex-start;
    }

    .opened-message {
        padding: 13px;
    }

    .opened-message-heading {
        flex-direction: column;
        gap: 10px;
        padding-bottom: 12px;
    }

    .opened-message h1 {
        font-size: 22px;
    }

    .notice-message-body {
        padding: 15px 0;
    }

    .notice-details {
        grid-template-columns: 1fr;
    }
}

.stats-note {
    margin: 10px 0 0;
    color: #718083;
    font-size: 11px;
    line-height: 1.55;
}

.hero {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    border: 1px solid rgba(215, 179, 106, 0.18);
    border-radius: calc(var(--radius) + 4px);
    padding: clamp(22px, 3.5vw, 42px);
    background:
        linear-gradient(110deg, rgba(10, 16, 23, 0.98) 0%, rgba(11, 21, 28, 0.92) 57%, rgba(14, 30, 34, 0.7) 100%),
        radial-gradient(circle at 85% 50%, rgba(98, 213, 209, 0.24), transparent 33%);
    box-shadow: var(--shadow);
}

.hero::after {
    position: absolute;
    right: -45px;
    bottom: -105px;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(215, 179, 106, 0.18);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 28px rgba(98, 213, 209, 0.025),
        inset 0 0 0 29px rgba(215, 179, 106, 0.12),
        inset 0 0 0 68px rgba(98, 213, 209, 0.018);
    content: "";
}

.hero h1 {
    max-width: 650px;
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 0.98;
}

.hero-copy {
    max-width: 630px;
    margin: 14px 0 0;
    color: #b8c6c7;
    font-size: 12px;
    line-height: 1.55;
}

.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.hero-features span {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.16);
    color: #aebcbd;
    font-size: 11px;
    padding: 6px 10px;
}

.registration-panel {
    padding: clamp(24px, 4vw, 40px);
}

.section-heading {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
}

.section-heading h2,
.login-panel h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    font-weight: 500;
}

.free-tag {
    color: var(--cyan);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.field {
    min-width: 0;
}

.field-wide {
    grid-column: 1 / -1;
}

label,
.field-label {
    display: block;
    margin: 0 0 8px;
    color: #bdc9ca;
    font-size: 12px;
    font-weight: 650;
}

input,
select,
button,
textarea {
    font: inherit;
}

input:not([type="checkbox"]),
select {
    width: 100%;
    height: 46px;
    border: 1px solid rgba(175, 205, 218, 0.18);
    border-radius: 10px;
    outline: none;
    background: rgba(4, 8, 12, 0.62);
    color: var(--text);
    padding: 0 13px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

input::placeholder {
    color: #5f7074;
}

input:focus,
select:focus {
    border-color: rgba(98, 213, 209, 0.65);
    box-shadow: 0 0 0 3px rgba(98, 213, 209, 0.09);
}

textarea {
    background: rgba(4, 8, 12, 0.62);
    border: 1px solid rgba(175, 205, 218, 0.18);
    border-radius: 10px;
    color: var(--text);
    display: block;
    min-height: 86px;
    outline: none;
    padding: 10px 13px;
    resize: vertical;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    width: 100%;
}

textarea:focus {
    border-color: rgba(98, 213, 209, 0.65);
    box-shadow: 0 0 0 3px rgba(98, 213, 209, 0.09);
}

.date-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.date-fields label {
    color: var(--muted);
    font-size: 11px;
}

.field ul {
    margin: 7px 0 0;
    padding: 0;
    color: var(--danger);
    font-size: 11px;
    list-style: none;
}

.form-footer {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    margin-top: 28px;
    border-top: 1px solid var(--line);
    padding-top: 24px;
}

.form-footer p,
.terms-area p {
    max-width: 420px;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.terms-area {
    display: grid;
    gap: 7px;
}

.terms-check {
    display: flex;
    gap: 9px;
    align-items: center;
}

.terms-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--cyan);
}

.terms-check label {
    margin: 0;
}

.terms-area ul {
    margin: 0;
    padding: 0;
    color: var(--danger);
    font-size: 11px;
    list-style: none;
}

.primary-button,
.secondary-button {
    min-height: 46px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 0 21px;
    text-transform: uppercase;
}

.primary-button {
    border: 1px solid #8be0dc;
    background: var(--cyan);
    box-shadow: 0 12px 30px rgba(98, 213, 209, 0.15);
    color: #071112;
}

.primary-button:hover {
    background: #80e3df;
}

.login-panel h2 {
    font-size: 24px;
}

.muted {
    margin: 9px 0 22px;
    color: var(--muted);
    font-size: 12px;
}

.login-form {
    display: grid;
    gap: 10px;
}

.login-form label:not(.remember) {
    margin-top: 5px;
}

.remember {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 6px 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
}

.remember input {
    accent-color: var(--cyan);
}

.secondary-button {
    width: 100%;
    border: 1px solid rgba(215, 179, 106, 0.45);
    background: var(--gold-soft);
    color: #ead3a4;
}

.secondary-button:hover {
    border-color: var(--gold);
}

.text-link {
    display: block;
    margin-top: 15px;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
    text-decoration: none;
}

.text-link:hover {
    color: var(--cyan);
}

.quote-panel {
    border-left: 1px solid rgba(215, 179, 106, 0.34);
    padding: 10px 0 10px 20px;
}

.quote-panel blockquote {
    margin: 0 0 10px;
    color: #aeb8b9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-style: italic;
    line-height: 1.6;
}

.quote-panel span {
    color: #637174;
    font-size: 10px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.flash {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 12px;
    line-height: 1.5;
}

.flash-success {
    border-color: rgba(98, 213, 209, 0.35);
    background: var(--cyan-soft);
    color: #b6efec;
}

.flash-error {
    border-color: rgba(255, 138, 130, 0.35);
    background: rgba(255, 138, 130, 0.08);
    color: #ffc1bc;
}

.flash-notice {
    border-color: rgba(215, 179, 106, 0.35);
    background: var(--gold-soft);
    color: #ead3a4;
}

.back-link {
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 9px 13px;
    text-decoration: none;
    text-transform: uppercase;
}

.back-link:hover {
    border-color: rgba(98, 213, 209, 0.4);
    color: var(--cyan);
}

.account-shell {
    display: grid;
    grid-template-columns: 220px minmax(0, 900px);
    gap: 22px;
    justify-content: center;
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

.account-nav {
    align-self: start;
    padding: 22px;
}

.account-nav nav {
    display: grid;
    gap: 6px;
}

.account-nav a {
    margin: 0 -10px;
    border-radius: 9px;
    color: var(--muted);
    font-size: 11px;
    padding: 11px 10px;
    text-decoration: none;
}

.account-nav a:hover {
    background: var(--cyan-soft);
    color: var(--text);
}

.account-main {
    display: grid;
    gap: 18px;
}

.account-card {
    padding: clamp(26px, 5vw, 46px);
}

.account-card > h1,
.legal-header h1 {
    max-width: 700px;
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 6vw, 56px);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.02;
}

.account-card h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 32px;
    font-weight: 500;
}

.account-lead {
    max-width: 650px;
    margin: 18px 0 28px;
    color: #aebbbc;
    font-size: 14px;
    line-height: 1.7;
}

.stacked-form {
    display: grid;
    gap: 20px;
    max-width: 560px;
}

.stacked-form .primary-button,
.stacked-form .secondary-button {
    width: fit-content;
    min-width: 190px;
}

.stacked-form > ul {
    margin: 0;
    padding: 0;
    color: var(--danger);
    font-size: 12px;
    list-style: none;
}

.security-note {
    max-width: 620px;
    margin: 28px 0 0;
    border-top: 1px solid var(--line);
    color: #758386;
    font-size: 11px;
    line-height: 1.65;
    padding-top: 20px;
}

.account-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(270px, 0.8fr);
    gap: 18px;
}

.secondary-card {
    align-self: start;
}

.legal-document {
    overflow: hidden;
}

.legal-header {
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(circle at 85% 30%, rgba(98, 213, 209, 0.12), transparent 35%),
        linear-gradient(145deg, rgba(215, 179, 106, 0.07), transparent);
    padding: clamp(30px, 6vw, 64px);
}

.legal-header p:last-child {
    max-width: 600px;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.legal-intro,
.legal-closing {
    margin: 32px clamp(28px, 6vw, 64px);
    border-left: 2px solid var(--gold);
    background: var(--gold-soft);
    color: #cbbd9f;
    font-size: 11px;
    line-height: 1.7;
    padding: 18px 20px;
}

.legal-document section {
    margin: 0 clamp(28px, 6vw, 64px);
    border-top: 1px solid var(--line);
    padding: 27px 0;
}

.legal-document section h2 {
    margin: 0 0 10px;
    color: #d9e4e3;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 500;
}

.legal-document section p {
    margin: 8px 0 0;
    color: #9dacad;
    font-size: 11px;
    line-height: 1.75;
}

.legal-closing {
    border-left-color: var(--cyan);
    background: var(--cyan-soft);
    color: #abd0ce;
}

.legal-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0 clamp(28px, 6vw, 64px) 45px;
}

.button-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

footer {
    display: flex;
    justify-content: space-between;
    width: min(1440px, calc(100% - 48px));
    margin: 30px auto 0;
    border-top: 1px solid var(--line);
    color: #5f6c6f;
    font-size: 10px;
    letter-spacing: 0.05em;
    padding: 22px 0 30px;
    text-transform: uppercase;
}

footer nav {
    display: flex;
    gap: 14px;
}

footer a {
    color: #849194;
    text-decoration: none;
}

@media (max-width: 1520px) {
    .game-header {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .game-header-resources {
        order: 3;
        width: 100%;
        margin-left: 0;
        border-top: 1px solid var(--line);
        justify-content: center;
        overflow-x: auto;
        padding-top: 12px;
        scrollbar-width: thin;
    }

    .game-header-resources .header-resource-group:first-child {
        border-left: 0;
        padding-left: 0;
    }
}

@media (max-width: 1120px) {
    .realm-shell {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    .sidebar-right {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
    }

    .quote-panel {
        align-self: center;
        margin-left: 18px;
    }

    .account-card-grid {
        grid-template-columns: 1fr;
    }

    .game-shell {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .resource-rail {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .masthead,
    .game-header,
    .realm-shell,
    .game-shell,
    .account-shell,
    footer {
        width: min(100% - 28px, 640px);
    }

    .brand-kicker {
        display: none;
    }

    .realm-shell {
        display: flex;
        flex-direction: column;
    }

    .realm-shell .main-column,
    .realm-shell .sidebar-right {
        display: contents;
    }

    .realm-shell .main-column > .flash {
        order: 1;
    }

    .realm-shell .login-panel {
        order: 2;
    }

    .realm-shell .registration-panel {
        order: 3;
    }

    .realm-shell .hero {
        order: 0;
    }

    .account-shell {
        display: flex;
        flex-direction: column-reverse;
    }

    .game-shell {
        display: flex;
        flex-direction: column;
    }

    .game-main {
        order: 1;
    }

    .resource-rail {
        order: 3;
    }

    .game-header-player .online-dot,
    .game-header-player > span:nth-child(2) {
        display: none;
    }

    .game-header {
        gap: 14px;
    }

    .game-header-resources {
        gap: 16px;
        justify-content: flex-start;
        padding-bottom: 3px;
    }

    .header-resource-group {
        flex: none;
        gap: 9px;
        padding-left: 14px;
    }

    .header-resource-group dl {
        gap: 10px;
    }

    .account-nav {
        width: 100%;
    }

    .sidebar-left {
        display: grid;
        grid-template-columns: 1fr 1fr;
        order: 4;
    }

    .realm-shell .quote-panel {
        order: 5;
    }

    .hero {
        min-height: 0;
        padding: 24px 20px;
    }

    .hero h1 {
        font-size: 28px;
    }

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

    .field-wide {
        grid-column: auto;
    }

    .legal-actions {
        justify-content: stretch;
    }

    .legal-actions .primary-button {
        justify-content: center;
        width: 100%;
    }
}

/* Mobile game shell: the desktop navigation becomes an accessible off-canvas drawer. */
@media (max-width: 900px) {
    body.game-navigation-open {
        overflow: hidden;
    }

    .game-header {
        display: grid;
        gap: 10px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: 12px 0 10px;
    }

    .game-header .brand {
        gap: 9px;
        min-width: 0;
    }

    .game-header .brand-mark {
        height: 38px;
        width: 38px;
    }

    .game-header .brand-name {
        font-size: 17px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-nav-toggle {
        align-items: center;
        align-self: center;
        background: var(--cyan-soft);
        border: 1px solid rgba(98, 213, 209, 0.38);
        border-radius: 8px;
        color: var(--cyan);
        display: inline-flex;
        font-size: 10px;
        font-weight: 800;
        gap: 7px;
        min-height: 36px;
        padding: 7px 10px;
        text-transform: uppercase;
    }

    .mobile-nav-icon {
        display: grid;
        gap: 3px;
        width: 14px;
    }

    .mobile-nav-icon i {
        background: currentColor;
        display: block;
        height: 1px;
        width: 100%;
    }

    .game-header-player {
        justify-self: auto;
    }

    .game-header-player .level-badge {
        padding: 6px 8px;
    }

    .game-header-resources {
        grid-column: 1 / -1;
        margin: 0;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding: 8px 0 2px;
    }

    .header-resource-group {
        padding-left: 12px;
    }

    .header-resource-group dl {
        gap: 9px;
    }

    .header-resource-group dd {
        font-size: 10px;
    }

    .game-shell {
        gap: 10px;
        grid-template-columns: minmax(0, 1fr);
        width: min(100% - 28px, 860px);
    }

    .game-navigation {
        background: #0b1118;
        box-shadow: 18px 0 55px rgba(0, 0, 0, 0.65);
        display: flex;
        gap: 8px;
        inset: 0 auto 0 0;
        max-height: 100dvh;
        overflow-y: auto;
        padding: 10px;
        position: fixed;
        transform: translateX(-105%);
        transition: transform 180ms ease;
        width: min(88vw, 330px);
        z-index: 1001;
    }

    .game-navigation-open .game-navigation {
        transform: translateX(0);
    }

    .mobile-navigation-heading {
        align-items: center;
        background: #0b1118;
        display: flex;
        justify-content: space-between;
        padding: 2px 4px 5px;
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .mobile-navigation-heading strong {
        color: var(--gold);
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .mobile-navigation-heading button {
        align-items: center;
        display: inline-flex;
        font-size: 18px;
        height: 34px;
        justify-content: center;
        min-height: 34px;
        padding: 0;
        width: 34px;
    }

    .mobile-navigation-extras {
        display: block;
    }

    .mobile-navigation-extras > summary {
        align-items: center;
        background: rgba(98, 213, 209, 0.08);
        border: 1px solid rgba(98, 213, 209, 0.28);
        border-radius: 9px;
        color: var(--cyan);
        cursor: pointer;
        display: flex;
        font-size: 10px;
        font-weight: 800;
        justify-content: space-between;
        letter-spacing: 0.08em;
        list-style: none;
        padding: 9px 11px;
        text-transform: uppercase;
    }

    .mobile-navigation-extras > summary::-webkit-details-marker {
        display: none;
    }

    .mobile-navigation-extras > summary::after {
        content: '+';
        font-size: 15px;
        line-height: 1;
    }

    .mobile-navigation-extras[open] > summary::after {
        content: '\2212';
    }

    .mobile-navigation-extras > div {
        display: grid;
        gap: 8px;
        padding-top: 8px;
    }

    .mobile-navigation-extras:not([open]) > div {
        display: none;
    }

    .mobile-navigation-extras .resource-card {
        border-radius: 10px;
        margin: 0;
    }

    .mobile-nav-backdrop {
        background: rgba(0, 0, 0, 0.68);
        border: 0;
        border-radius: 0;
        display: block;
        inset: 0;
        padding: 0;
        position: fixed;
        z-index: 1000;
    }

    .mobile-nav-backdrop[hidden] {
        display: none;
    }

    .game-navigation .game-nav {
        border-radius: 12px;
        gap: 1px;
        padding: 7px;
    }

    .game-navigation .game-nav > .eyebrow {
        margin: 2px 6px 5px;
    }

    .game-navigation .game-nav-link {
        min-height: 36px;
        padding: 3px 7px;
    }

    .game-main {
        width: 100%;
    }

    .game-main > * {
        max-width: 100%;
    }

    .game-welcome {
        gap: 9px;
        padding: 13px 14px;
    }

    .game-welcome h1 {
        line-height: 1.15;
    }

    .game-welcome .level-badge,
    .game-welcome .realm-status {
        align-self: flex-start;
    }

    .panel,
    .compact-panel,
    .outer-panel {
        border-radius: 12px;
        padding: 10px;
    }

    .resource-card {
        padding: 11px;
    }

    .resource-rail {
        gap: 10px;
    }

    .subnav,
    .hall-tabs,
    .town-subtabs,
    .staff-tabs,
    .staff-report-tabs {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .subnav > *,
    .hall-tabs > *,
    .town-subtabs > *,
    .staff-tabs > *,
    .staff-report-tabs > * {
        flex: 0 0 auto;
    }

    .game-main table {
        font-size: 10px;
    }

    .game-main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    .market-row,
    .forum-post header,
    .section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .market-row > form,
    .market-row button,
    .forum-post-actions form {
        width: 100%;
    }

    .staff-table-panel,
    .town-list,
    .battle-list,
    .pvm-list,
    .armor-shop-list,
    .armory-table-shell,
    .hall-table {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }
}

/* PvM controls and reset-bound running totals. */
.pvm-controls { background: transparent; border: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
.pvm-controls.is-single { grid-template-columns: minmax(0, 1fr); }
.pvm-controls form { align-content: start; background: linear-gradient(135deg, var(--surface-soft), var(--surface-deep)); border: 1px solid var(--border); border-radius: 10px; display: grid; gap: 9px; margin: 0; min-width: 0; padding: 11px 12px; }
.pvm-control-copy { min-width: 0; }
.pvm-control-copy .eyebrow { margin: 0 0 5px; }
.pvm-control-copy strong { display: block; font-size: 12px; }
.pvm-control-copy small { color: var(--muted); display: block; line-height: 1.4; margin-top: 3px; }
.pvm-control-title { align-items: start; display: flex; gap: 8px; justify-content: space-between; }
.pvm-token-count { background: rgba(98, 213, 209, .07); border: 1px solid rgba(98, 213, 209, .25); border-radius: 999px; color: var(--cyan); flex: 0 0 auto; font-size: 9px; font-weight: 750; padding: 3px 7px; }
.pvm-control-actions { align-items: center; border-top: 1px solid var(--border); display: flex; gap: 7px; justify-content: space-between; margin-top: auto; padding-top: 9px; }
.pvm-control-actions button { white-space: nowrap; }
.pvm-token-fields { display: grid; gap: 7px; grid-template-columns: minmax(0, 1fr) 92px; }
.pvm-token-run label { color: var(--muted); font-size: 9px; }
.pvm-token-run input, .pvm-token-run select { margin-top: 3px; min-width: 0; width: 100%; }
.pvm-token-run > button { justify-self: start; min-width: 130px; }
.forest-tree-opportunity { align-items: center; border-color: rgba(211, 165, 72, .48); display: flex; gap: 14px; justify-content: space-between; }
.forest-tree-opportunity h2, .forest-tree-opportunity p { margin-bottom: 4px; }
.forest-tree-opportunity form { flex: 0 0 auto; margin: 0; }
.segmented-choice { display: inline-flex; gap: 3px; }
.segmented-choice label { cursor: pointer; }
.segmented-choice input { opacity: 0; pointer-events: none; position: absolute; }
.segmented-choice span { align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--muted); display: flex; font-weight: 800; height: 30px; justify-content: center; min-width: 34px; }
.segmented-choice input:checked + span { background: var(--cyan-soft); border-color: var(--cyan); color: var(--cyan); }
.pvm-daily-summary, .pvm-run-summary { padding: 10px 12px; }
.pvm-total-grid { display: grid; gap: 5px; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); margin: 5px 0 7px; }
.pvm-total-grid > div { background: var(--surface-deep); border: 1px solid var(--border); border-radius: 7px; min-width: 0; padding: 6px 8px; }
.pvm-total-grid span, .pvm-total-grid strong { display: block; overflow-wrap: anywhere; }
.pvm-total-grid span { color: var(--muted); font-size: 10px; }
.pvm-total-grid strong { color: var(--paper); font-size: 12px; margin-top: 2px; }
.pvm-daily-summary > small { color: var(--muted); }
.pvm-run-summary .form-warning { margin: 9px 0; }

@media (max-width: 720px) {
    .pvm-controls { grid-template-columns: 1fr; }
    .pvm-controls form { padding: 10px; }
    .pvm-token-fields { grid-template-columns: minmax(0, 1fr) 86px; }
    .pvm-total-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .forest-tree-opportunity { align-items: stretch; flex-direction: column; }
}

@media (max-width: 420px) {
    .game-header,
    .game-shell,
    footer {
        width: calc(100% - 18px);
    }

    .mobile-nav-toggle > span:last-child {
        display: none;
    }

    .mobile-nav-toggle {
        justify-content: center;
        padding-inline: 9px;
        width: 36px;
    }

    .game-header-player .level-badge {
        font-size: 9px;
    }

    .game-welcome {
        padding: 11px 12px;
    }

    .compact-card-grid,
    .outer-rune-grid,
    .rune-shop-summary,
    .rune-amulet-grid,
    .staff-module-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .masthead {
        padding-top: 20px;
    }

    .brand-name {
        font-size: 19px;
    }

    .sidebar-left {
        display: flex;
    }

    .form-footer,
    .section-heading,
    footer {
        align-items: stretch;
        flex-direction: column;
    }

    footer nav,
    .vote-site-grid,
    .support-grid {
        grid-template-columns: 1fr;
    }

    footer nav {
        display: flex;
        flex-wrap: wrap;
    }

    .primary-button {
        width: 100%;
    }

    .date-fields {
        grid-template-columns: 1fr;
    }

    .dashboard-grid,
    .armory-grid,
    .economy-actions,
    .mailbox-grid,
    .resource-rail {
        grid-template-columns: 1fr;
    }

    .ledger-entry {
        align-items: flex-start;
        flex-direction: column;
    }

    .ledger-deltas {
        justify-content: flex-start;
    }

    .realm-card {
        grid-column: auto;
    }

    .game-welcome {
        flex-direction: column;
    }
}

.achievement-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 22px;
}

.deed-claim-banner { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.8fr); align-items:center; gap:16px; margin-bottom:12px; border-color:rgba(215,179,106,.65); background:linear-gradient(100deg,rgba(215,179,106,.16),rgba(215,179,106,.045)); padding:13px 16px; }
.deed-claim-banner h2,.deed-claim-banner p { margin:.2rem 0; }
.deed-claim-banner > .button-link { justify-self:end; }

.achievement-card {
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 138px;
    padding: 18px;
    text-decoration: none;
}

.achievement-card:hover,
.achievement-card.active {
    border-color: var(--gold);
    transform: translateY(-1px);
}

.achievement-card strong { color: var(--paper); font-size: 17px; }
.achievement-card small { color: var(--muted); margin-top: auto; }
.achievement-list,
.achievement-rewards,
.title-panel { margin-bottom: 22px; padding: 22px; }
.achievement-rows { display: grid; gap: 8px; }
.achievement-row {
    align-items: center;
    border: 1px solid var(--line);
    display: grid;
    gap: 14px;
    grid-template-columns: 24px minmax(0, 1fr) minmax(130px, .45fr) auto;
    padding: 13px 15px;
}
.achievement-row > div { display: flex; flex-direction: column; }
.achievement-row small { color: var(--muted); }
.achievement-row.earned { border-color: rgba(111, 168, 112, .55); }
.achievement-row.earned > span:first-child { color: #88c68a; }
.title-form { align-items: end; display: grid; gap: 10px; grid-template-columns: 1fr minmax(220px, 2fr) auto; margin: 18px 0; }
.title-form label { color: var(--muted); font-size: 11px; }
.title-requirements { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.title-requirements div { display: flex; flex-direction: column; gap: 5px; }
.title-requirements small { color: var(--muted); }
.reward-track { display: grid; gap: 8px; margin: 16px 0; }
.reward-tier,
.reward-track.compact > div { align-items: center; border: 1px solid var(--line); display: flex; gap: 16px; justify-content: space-between; padding: 12px 14px; }
.reward-tier > div { display: flex; flex-direction: column; }
.reward-tier small,
.reward-track.compact span { color: var(--muted); }
.reward-tier.available { border-color: var(--gold); }

@media (max-width:700px) { .deed-claim-banner { grid-template-columns:1fr; } .deed-claim-banner > .button-link { justify-self:start; } }

.mana-reward-overview {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 14px;
    padding: 0;
    overflow: hidden;
}

.mana-reward-stat {
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 15px;
}

.mana-reward-stat:nth-child(3) {
    border-right: 0;
}

.mana-reward-overview span,
.mana-reward-copy span,
.mana-reward-copy small,
.mana-reward-progress small,
.mana-reward-action > span {
    color: var(--muted);
    font-size: 9px;
}

.mana-reward-overview strong {
    color: var(--gold);
    font-size: 15px;
}

.mana-reward-journey {
    border-top: 1px solid var(--line);
    display: grid;
    gap: 10px;
    grid-column: 1 / -1;
    grid-template-columns: minmax(150px, auto) minmax(240px, 1fr);
    padding: 11px 15px 13px;
}

.mana-reward-journey-copy {
    align-items: baseline;
    display: flex;
    gap: 8px;
}

.mana-reward-journey-copy span {
    color: var(--muted);
    font-size: 9px;
}

.mana-reward-journey-copy strong {
    font-size: 11px;
}

.mana-reward-panel {
    margin-bottom: 14px;
    padding: 16px;
}

.mana-reward-list {
    display: grid;
    gap: 6px;
}

.mana-reward-heading {
    color: var(--muted);
    display: grid;
    font-size: 9px;
    gap: 14px;
    grid-template-columns: minmax(170px, .75fr) minmax(240px, 1.35fr) minmax(105px, auto);
    padding: 0 12px 6px;
    text-transform: uppercase;
}

.mana-reward-row {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(170px, .75fr) minmax(240px, 1.35fr) minmax(105px, auto);
    min-height: 58px;
    padding: 8px 12px;
}

.mana-reward-row.is-earned {
    border-color: rgba(98, 213, 209, .42);
    background: rgba(98, 213, 209, .05);
}

.mana-reward-row.is-fallback {
    border-left: 2px solid var(--gold);
}

.mana-reward-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mana-reward-copy strong {
    color: var(--text);
    font-size: 12px;
}

.mana-reward-copy .mana-reward-threshold {
    color: var(--cyan);
    font-weight: 700;
}

.mana-reward-copy small {
    color: var(--gold);
}

.mana-reward-progress {
    display: grid;
    gap: 5px;
}

.mana-reward-progress small {
    display: flex;
    justify-content: space-between;
}

.mana-reward-progress small b {
    color: var(--paper);
    font-weight: 700;
}

.mana-reward-track {
    border: 1px solid rgba(98, 213, 209, .16);
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

.mana-reward-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cyan), var(--gold));
    width: var(--progress-value, 0%);
}

.mana-reward-track--journey {
    align-self: center;
    height: 11px;
}

.mana-reward-action {
    display: flex;
    justify-content: flex-end;
}

.mana-reward-action form,
.mana-reward-action button {
    width: auto;
}

.mana-reward-note {
    font-size: 10px;
}

@media (max-width: 700px) {
    .mana-reward-overview {
        grid-template-columns: 1fr;
    }

    .mana-reward-stat {
        border-bottom: 1px solid var(--line);
        border-right: 0;
    }

    .mana-reward-journey {
        border-top: 0;
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .mana-reward-heading {
        display: none;
    }

    .mana-reward-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .mana-reward-action {
        justify-content: flex-start;
    }
}
.reward-tier.claimed { border-color: rgba(111, 168, 112, .55); }
.reward-track.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reward-track.compact > div { align-items: flex-start; flex-direction: column; gap: 3px; }

@media (max-width: 900px) {
    .achievement-grid,
    .title-requirements,
    .reward-track.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .battle-summary { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .achievement-grid,
    .title-requirements,
    .reward-track.compact,
    .title-form { grid-template-columns: 1fr; }
    .achievement-row { align-items: start; grid-template-columns: 20px 1fr; }
    .achievement-row > :nth-child(n+3) { grid-column: 2; }
}

.chat-panel { display: grid; gap: 8px; padding: 12px; }

.trivia-question-panel h2 { margin: 4px 0 8px; }
.trivia-chat-panel { margin-top: 10px; }
.chat-line-system .chat-line-text { color: #ff7373; font-weight: 700; }
.trivia-leaders { max-width: 460px; }
.trivia-leaders li { display: flex; justify-content: space-between; gap: 12px; }
.hall-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.market-layout { display: grid; gap: 14px; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); }
.forum-list, .forum-posts { display: grid; gap: 12px; }
.forum-board { border: 1px solid var(--line); border-radius: 10px; color: inherit; display: block; padding: 12px; text-decoration: none; }
.forum-board:hover { border-color: var(--gold); transform: translateY(-1px); }
.forum-board span:first-child { display: grid; gap: 6px; }
.forum-board small, .forum-post time { color: var(--muted); }
.forum-post header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; margin-bottom: 14px; padding-bottom: 10px; }
.forum-body { overflow-wrap: anywhere; white-space: pre-wrap; }
.town-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.town-copy { overflow-wrap: anywhere; white-space: pre-wrap; }
.town-member { border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; padding: 10px 0; }
.town-list { overflow-x: auto; }
.town-row { align-items: center; border-bottom: 1px solid var(--border); display: grid; gap: 12px; grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(80px, .65fr)) minmax(90px, .5fr); padding: 12px 0; }
.town-row > div:first-child { display: grid; gap: 3px; }
.town-row small { color: var(--muted); }
.town-welcome { margin-bottom: 7px; }
.town-tabs { flex-wrap: wrap; margin: 0 0 8px; overflow: visible; }
.town-section-loading { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 7px; color: var(--muted); margin: 0 0 8px; padding: 9px 12px; }
[data-town-section-host] { transition: opacity 120ms ease; }
[data-town-section-host][aria-busy="true"] { opacity: .55; pointer-events: none; }
.compact-panel { padding: 10px 12px; }
.town-directory-welcome { margin-bottom: 10px; }
.town-directory-membership { align-items: center; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 10px; padding: 14px 16px; }
.town-directory-membership > div { display: grid; gap: 3px; }
.town-directory-membership .eyebrow { margin: 0 0 2px; }
.town-directory-membership span { color: var(--muted); }
.town-hall-grid { align-items: start; gap: 12px; }
.town-hall-card { min-height: 148px; padding: 17px 19px; }
.town-hall-card .eyebrow { margin-bottom: 12px; }
.town-announcement-card { display: flex; flex-direction: column; gap: 8px; }
.town-announcement-card > button { align-self: flex-start; margin-top: auto; }
.town-inline-editor { align-items: end; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 7px; display: flex; flex-wrap: wrap; gap: 7px; padding: 8px; }
.town-inline-editor[hidden] { display: none; }
.town-inline-editor label { display: grid; flex: 1 1 220px; gap: 3px; }
.town-inline-editor textarea { min-height: 64px; resize: vertical; }
.town-work-card, .town-war-countdown-card { grid-column: 1 / -1; min-height: 0; }
.town-work-card .section-heading { margin-bottom: 8px; }
.town-work-card .eyebrow { margin-bottom: 4px; }
.town-work-live, .town-war-countdown-live { align-items: center; display: grid; gap: 3px 12px; grid-template-columns: minmax(150px, 1fr) auto; }
.town-work-live > strong, .town-war-countdown-live > strong { min-width: 0; overflow-wrap: anywhere; }
.town-work-live > span, .town-war-countdown-live > span { color: var(--gold); font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 800; text-align: right; }
.town-work-live > small, .town-war-countdown-live > small { color: var(--muted); }
.town-work-live > form { grid-column: 2; grid-row: 2 / span 2; }
.town-work-live[data-countdown-urgency="complete"] > span { color: var(--cyan); }
.town-war-countdown-card { border-color: rgba(211, 165, 70, .42); }
.town-war-countdown-card .section-heading { margin-bottom: 8px; }
.town-war-countdown-live[data-countdown-urgency="complete"] > span { color: var(--cyan); }
.town-latest-news { grid-column: 1 / -1; min-height: 0; }
.town-latest-news .section-heading { margin-bottom: 6px; }
.town-record-feed > div { align-items: start; border-bottom: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: 88px minmax(0, 1fr); padding: 7px 1px; }
.town-record-feed time { color: var(--muted); white-space: nowrap; }
.town-record-feed span { min-width: 0; overflow-wrap: anywhere; }
.town-records { min-width: 0; padding: 14px 16px; }
.town-records .eyebrow { margin: 0 0 4px; }
.town-records-heading { align-items: end; gap: 12px; margin-bottom: 10px; }
.town-records-heading h2 { font-size: 18px; }
.town-records-heading > p { color: var(--muted); margin: 0; max-width: 520px; text-align: right; }
.town-record-tabs { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 7px; padding: 8px; }
.town-record-tab-group { align-items: start; display: grid; gap: 10px; grid-template-columns: 150px minmax(0, 1fr); min-width: 0; }
.town-record-tab-label { display: grid; gap: 3px; padding: 5px 0 0; }
.town-record-tab-label strong { color: var(--gold); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.town-record-tab-label small { color: var(--muted); font-size: 9px; }
.town-subtabs { display: flex; flex-wrap: wrap; gap: 4px; grid-column: 2; min-width: 0; padding: 1px 0; }
.town-subtabs button { background: transparent; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); flex: 0 0 auto; font-size: 10px; min-height: 0; padding: 5px 8px; }
.town-subtabs button:hover, .town-subtabs button[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.town-record-lock { color: var(--muted); margin: 1px 0; padding: 3px 1px; }
.town-record-panel { border: 1px solid var(--line); border-radius: 8px; margin-top: 9px; min-width: 0; padding: 10px 12px; }
.town-record-panel[hidden] { display: none !important; }
.town-record-panel-heading { align-items: end; border-bottom: 1px solid var(--line); display: flex; gap: 10px; justify-content: space-between; margin-bottom: 5px; padding-bottom: 7px; }
.town-record-panel-heading h3 { font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-weight: 500; margin: 0; }
.town-record-panel-heading > span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.town-record-activity > div { align-items: baseline; border-bottom: 1px solid var(--line); display: grid; gap: 8px; grid-template-columns: 105px minmax(0, 1fr); padding: 5px 1px; }
.town-record-activity > div:last-child { border-bottom: 0; }
.town-record-activity time { color: var(--muted); font-size: 10px; white-space: nowrap; }
.town-record-activity p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.town-record-activity a, .town-record-board a, .town-record-table a { font-weight: 700; }
.town-record-empty { color: var(--muted); margin: 6px 0; }
.town-record-board-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.town-record-board { border: 1px solid var(--line); border-radius: 7px; min-width: 0; overflow: hidden; }
.town-record-board header { align-items: center; background: var(--surface-soft); border-bottom: 1px solid var(--line); display: flex; gap: 8px; justify-content: space-between; padding: 6px 8px; }
.town-record-board h3 { font-size: 11px; margin: 0; }
.town-record-board header span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.town-record-board ol { list-style: none; margin: 0; padding: 0; }
.town-record-board li { align-items: baseline; border-bottom: 1px solid var(--line); display: grid; gap: 7px; grid-template-columns: 20px minmax(0, 1fr) auto; min-width: 0; padding: 5px 8px; }
.town-record-board li:last-child { border-bottom: 0; }
.town-record-board li > span { color: var(--muted); text-align: right; }
.town-record-board li > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.town-record-board li > strong { text-align: right; }
.town-record-board li.town-record-empty { display: block; }
.town-record-table { min-width: 0; }
.town-record-table > div { align-items: baseline; border-bottom: 1px solid var(--line); display: grid; gap: 8px; min-width: 0; padding: 5px 2px; }
.town-record-table > div:last-child { border-bottom: 0; }
.town-record-table-head { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.town-record-table-days > div { grid-template-columns: 36px minmax(120px, 1.5fr) repeat(3, minmax(90px, .8fr)); }
.town-record-table-keys > div { grid-template-columns: 36px minmax(140px, 1.5fr) minmax(90px, .8fr) 60px; }
.town-record-table-defenders > div { grid-template-columns: minmax(140px, 1.5fr) repeat(3, minmax(90px, .8fr)); }
.town-tournament-board li { grid-template-columns: 20px minmax(0, 1fr) minmax(150px, auto); }
@media (max-width: 760px) {
    .town-records-heading { align-items: start; }
    .town-records-heading > p { text-align: left; }
    .town-record-tab-group { display: block; }
    .town-record-tab-label { margin-bottom: 5px; }
    .town-subtabs { margin-top: 5px; }
    .town-record-board-grid { grid-template-columns: 1fr; }
    .town-record-panel { overflow-x: auto; }
    .town-record-table-days { min-width: 650px; }
    .town-record-table-keys, .town-record-table-defenders { min-width: 500px; }
    .town-record-activity > div { grid-template-columns: 1fr; gap: 2px; }
}
.town-government-panel { margin-top: 12px; padding: 18px 19px; }
.town-government-panel > .section-heading { margin-bottom: 12px; }
.town-government-panel > .section-heading p:last-child { color: var(--muted); margin: 5px 0 0; }
.town-government-panel .town-actions { gap: 12px; }
.town-government-panel .town-actions > form { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 7px; padding: 11px 12px; }
.town-resource-grid, .town-building-grid { display: grid; gap: 6px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 8px 0; }
.town-resource-grid > span, .town-building-grid > span, .town-building-grid > a { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 5px; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 7px 9px; }
.town-resource-grid strong { overflow-wrap: anywhere; }
.town-building-grid small { color: var(--muted); }
.town-actions { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.town-actions form { align-items: end; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 7px; padding-top: 8px; }
.town-actions label { display: grid; flex: 1 1 120px; gap: 3px; }
.town-actions input, .town-actions select, .town-actions textarea, .town-inline-actions select { max-width: 100%; min-width: 0; }
.town-announcement-form { grid-column: 1 / -1; }
.town-announcement-form label { flex-basis: 100%; }
.town-announcement-form textarea { min-height: 72px; resize: vertical; }
.town-member-list { margin-bottom: 8px; }
.town-member > div:first-child { display: grid; gap: 2px; min-width: 0; }
.town-inline-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 4px; }
.town-inline-actions form { align-items: center; display: flex; gap: 4px; margin: 0; }
.town-feed { border-bottom: 1px solid var(--line); display: grid; gap: 1px; padding: 6px 0; }
.town-feed small { color: var(--muted); }
.town-poll-options, .town-poll-create { display: grid; gap: 6px; margin-top: 8px; }
.town-poll-options label { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 7px; grid-template-columns: auto 1fr auto; padding: 6px 2px; }
.town-poll-create { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.town-poll-create label { display: grid; gap: 3px; }
.town-poll-create label:first-of-type { grid-column: 1 / -1; }
.town-work { align-items: center; background: var(--accent-soft); border: 1px solid var(--accent); display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 7px 0; padding: 8px; }
.town-setup-block { padding: 14px 16px; }
.town-office-grid { display: grid; gap: 7px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.town-office-grid form { align-items: end; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 7px; display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr) auto; padding: 8px; }
.town-office-grid label { display: grid; gap: 3px; min-width: 0; }
.town-office-grid select { max-width: 100%; min-width: 0; }
.town-leadership-switch { margin-top: 8px; }
.town-leadership-switch form { align-items: center; background: var(--gold-soft); border: 1px solid rgba(215, 179, 106, .35); border-radius: 7px; display: flex; gap: 12px; justify-content: space-between; padding: 8px; }
.town-leadership-switch form > div { display: grid; gap: 2px; }
.town-leadership-switch small { color: var(--muted); }
.town-policy-form { align-items: end; display: grid; gap: 8px; grid-template-columns: minmax(190px, 1fr) 120px 120px auto; }
.town-policy-form label { display: grid; gap: 3px; }
.town-policy-form .town-checkbox { align-items: center; display: flex; min-height: 34px; }
.town-applications { border-top: 1px solid var(--line); margin: 10px 0; padding-top: 9px; }
.town-upgrade-list { display: grid; gap: 5px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.town-upgrade-list article { align-items: center; border: 1px solid var(--line); display: grid; gap: 4px; grid-template-columns: minmax(120px, .8fr) minmax(160px, 1.5fr) auto; padding: 7px 8px; }
.town-upgrade-list article > div { display: grid; gap: 2px; }
.town-upgrade-list small, .town-upgrade-list p, .town-upgrade-list .muted { color: var(--muted); font-size: 11px; margin: 0; }
@media (max-width: 900px) { .town-upgrade-list { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .town-resource-grid, .town-building-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .town-actions { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .town-hall-grid { grid-template-columns: 1fr; } .town-latest-news, .town-work-card, .town-war-countdown-card { grid-column: auto; } .town-directory-membership { align-items: flex-start; flex-direction: column; } }
@media (max-width: 650px) { .town-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; } .town-tabs button { flex: 0 0 auto; white-space: nowrap; } }
.pending-town { align-items: center; display: flex; justify-content: space-between; }

.town-public-page {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.town-public-welcome {
    min-height: 0;
    padding: 15px 20px;
}

.town-public-welcome .eyebrow {
    margin-bottom: 7px;
}

.town-public-welcome p:last-child {
    margin-top: 7px;
}

.town-public-banner {
    display: grid;
    margin: 0;
    min-height: 90px;
    padding: 8px;
    place-items: center;
}

.town-public-banner img {
    display: block;
    max-height: 220px;
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

.town-public-tabs {
    margin: 0;
}

.town-public-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.town-public-announcement {
    grid-column: 1 / -1;
}

.town-public-copy {
    color: var(--text);
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.town-public-staff {
    display: grid;
    gap: 0 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.town-public-staff > div {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 8px;
    justify-content: space-between;
    min-width: 0;
    padding: 6px 1px;
}

.town-public-staff dt {
    color: var(--muted);
    min-width: 0;
    overflow-wrap: anywhere;
}

.town-public-staff dd {
    font-weight: 700;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: right;
}

.town-public-war {
    grid-column: 1 / -1;
}

.town-public-war p:last-child,
.town-public-help {
    color: var(--muted);
}

.town-public-list {
    min-width: 0;
    overflow-x: auto;
}

.town-public-list .outer-section-heading {
    min-width: 560px;
}

.town-public-row,
.town-public-hostage-row {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 9px;
    min-height: 34px;
    padding: 5px 2px;
}

.town-public-row {
    grid-template-columns: minmax(155px, 1.3fr) minmax(105px, .9fr) 55px minmax(105px, .8fr) 90px;
    min-width: 560px;
}

.town-public-hostage-row {
    grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) 135px;
    min-width: 500px;
}

.town-public-row > *,
.town-public-hostage-row > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

.town-public-heading {
    color: var(--muted);
    font-size: 9px;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.town-public-empty {
    color: var(--muted);
    margin: 10px 2px 3px;
}

.town-public-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.town-public-actions form {
    margin: 0;
}

@media (max-width: 700px) {
    .town-public-grid,
    .town-public-staff {
        grid-template-columns: 1fr;
    }

    .town-public-welcome {
        align-items: flex-start;
        padding: 13px 15px;
    }
}

.mailbox-compose {
    max-width: 52rem;
}

.mailbox-bulk {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .5rem;
}

.message-select-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .35rem;
}

.mail-conversation {
    display: grid;
    gap: .5rem;
    max-height: 60vh;
    overflow-y: auto;
    padding: .75rem;
    scroll-behavior: smooth;
}

.conversation-message {
    width: fit-content;
    max-width: min(76%, 42rem);
    padding: .5rem .7rem;
    border: 1px solid var(--border);
    border-radius: .8rem .8rem .8rem .2rem;
    background: rgba(18, 27, 35, .92);
}

.conversation-message.from-me {
    justify-self: end;
    border-radius: .8rem .8rem .2rem .8rem;
    border-color: rgba(83, 211, 210, .35);
    background: rgba(24, 65, 68, .65);
}

.conversation-meta {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    color: var(--muted);
    font-size: 9px;
}

.conversation-message p {
    margin: .2rem 0 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.conversation-reply { padding: .7rem .8rem; }
.conversation-reply .stacked-form { gap: .35rem; }
.conversation-reply textarea { min-height: 4.5rem; resize: vertical; }
.conversation-reply button { justify-self: end; }

.compact-list form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .35rem 0;
    border-bottom: 1px solid var(--border);
}
.battle-list { overflow-x: auto; }
.battle-row { align-items: center; border-bottom: 1px solid var(--border); display: grid; gap: 12px; grid-template-columns: minmax(150px, 1.4fr) repeat(4, minmax(74px, .6fr)) minmax(80px, .5fr); padding: 12px 0; }
.battle-history, .battle-log { display: grid; gap: 9px; }
.battle-history a { align-items: center; border-bottom: 1px solid var(--border); color: inherit; display: flex; justify-content: space-between; padding: 10px 0; text-decoration: none; }
.battle-history span, .battle-log small { color: var(--muted); }
.battle-record-header { padding: 18px 22px; }
.battle-record-header .eyebrow { margin-bottom: 9px; }
.battle-record-header p:last-child { margin-bottom: 0; }
.battle-summary { align-items: start; display: grid; gap: 10px; grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr); }
.battle-result-stats { padding: 7px 12px; }
.battle-result-stats .resource-list div { padding: 7px 0; }
.battle-log { align-content: start; gap: 0; max-height: 620px; overflow: auto; padding: 7px 12px; }
.battle-log > div { border-bottom: 1px solid var(--border); line-height: 1.4; padding: 7px 0; }
.battle-log > div:last-child { border-bottom: 0; }
.temple-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.carduzo-blessing { border-color: var(--gold); }
.prayer-history { display: grid; gap: 8px; }
.prayer-history > div { align-items: center; border-bottom: 1px solid var(--border); display: grid; gap: 12px; grid-template-columns: minmax(100px, .5fr) minmax(220px, 1fr) auto; padding: 10px 0; }
.prayer-history small { color: var(--muted); }
.prayer-report { display: grid; gap: 12px; }
.prayer-report-heading { align-items: center; display: flex; justify-content: space-between; }
.prayer-results { display: grid; gap: 5px; margin: 0; max-height: 430px; overflow: auto; padding: 4px 4px 4px 32px; }
.prayer-results li { border-bottom: 1px solid var(--border); padding: 5px 3px; }
.prayer-loss { color: #ef8a8a; }
.prayer-neutral { color: var(--muted); }
.prayer-reward { color: var(--gold); display: block; font-weight: 700; }
.prayer-summary { display: grid; gap: 8px; grid-template-columns: repeat(5, minmax(90px, 1fr)); margin: 0; }
.prayer-summary > div { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 6px; padding: 8px; }
.prayer-summary dt { color: var(--muted); }
.prayer-summary dd { font-weight: 700; margin: 3px 0 0; }
.prayer-reward-summary { color: var(--gold); margin: 0; }
.mining-report { display: grid; gap: 12px; }
.mining-results { display: grid; gap: 5px; margin: 0; max-height: 430px; overflow: auto; padding: 4px 4px 4px 32px; }
.mining-results li { border-bottom: 1px solid var(--border); padding: 5px 3px; }
.mining-summary { display: grid; gap: 8px; grid-template-columns: repeat(5, minmax(90px, 1fr)); margin: 0; }
.mining-summary > div { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 6px; padding: 8px; }
.mining-summary dt { color: var(--muted); }
.mining-summary dd { font-weight: 700; margin: 3px 0 0; }
.mining-tool-broke { color: #ef8a8a; display: block; }
.mining-level-change { color: var(--gold); display: block; margin-bottom: 4px; }
.mining-level-summary { color: var(--gold); margin: 0; }
.mining-heading { align-items: flex-start; display: flex; gap: 20px; justify-content: space-between; }
.display-preference { align-items: center; display: flex; gap: 8px; }
.mining-dig-form { gap: 12px; margin: 14px 0 0; width: min(100%, 430px); }
.mining-dig-form :is(input:not([type="checkbox"]), select) { height: 40px; }
.mining-dig-form > button { justify-self: start; width: 132px; }
.mining-preset-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-start; margin: 6px 0 0; width: min(100%, 430px); }
.mining-preset-actions form { flex: 0 0 auto; margin: 0; }
.mining-preset-actions button { min-width: 0; width: 82px; }
.mining-store > summary { align-items: center; cursor: pointer; display: flex; gap: 12px; justify-content: space-between; list-style: none; }
.mining-store > summary::-webkit-details-marker { display: none; }
.mining-store > summary > span:first-child { display: grid; gap: 2px; }
.mining-store > summary strong { color: var(--text); font-size: 18px; }
.mining-store > summary small { color: var(--muted); }
.mining-store-toggle { border: 1px solid var(--aqua); border-radius: 6px; color: var(--aqua); flex: 0 0 auto; font-weight: 700; padding: 7px 10px; text-transform: uppercase; }
.mining-store[open] .mining-store-toggle { background: var(--cyan-soft); }
.mining-store[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 6px; padding-bottom: 8px; }
.mining-store-inventory { display: grid; }
.mining-section-heading,
.gemology-summary-heading { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; }
.mining-section-heading h2,
.gemology-summary-heading h2 { margin-bottom: 3px; }
.mining-section-heading p:last-child,
.gemology-summary-heading p:last-child { color: var(--muted); margin: 0; }
.mining-retention-guide { border-bottom:1px solid var(--line); border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:10px; padding:7px 0; }
.mining-retention-guide > div { display:grid; gap:2px; min-width:0; padding:0 10px; }
.mining-retention-guide > div + div { border-left:1px solid var(--line); }
.mining-retention-guide strong { font-size:10px; }
.mining-retention-guide span { color:var(--muted); font-size:9px; line-height:1.35; }
.mining-tool-list { display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:12px; }
.mining-tool-card { background:rgba(255,255,255,.018); border:1px solid rgba(148,165,168,.24); border-radius:10px; display:flex; flex-direction:column; min-width:0; padding:11px 12px; }
.mining-tool-card.is-equipped { border-color: rgba(98, 213, 209, .55); }
.mining-tool-content { display:flex; flex:1; flex-direction:column; min-width:0; }
.mining-tool-card-heading { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.mining-tool-card-heading > div > span,
.mining-tool-upgrade-heading span { color: var(--muted); display: block; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mining-tool-card-heading h3 { font-size: 13px; margin: 2px 0 0; }
.mining-tool-state { border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 9px; font-weight: 700; padding: 4px 8px; text-transform: uppercase; }
.is-equipped .mining-tool-state { border-color: var(--aqua); color: var(--aqua); }
.mining-tool-stats,
.mining-tool-requirements { display:grid; gap:7px 10px; grid-template-columns:repeat(2,minmax(0,1fr)); margin:10px 0 0; }
.mining-tool-stats > div,
.mining-tool-requirements > div { border-left:1px solid var(--border); min-width:0; padding:2px 0 2px 8px; }
.mining-tool-stats dt,
.mining-tool-requirements dt { color: var(--muted); font-size: 9px; }
.mining-tool-stats dd,
.mining-tool-requirements dd { font-weight: 700; margin: 2px 0 0; overflow-wrap: anywhere; }
.mining-tool-integrity,
.gemology-metric progress { appearance: none; background: rgba(255, 255, 255, .04); border: 0; border-radius: 999px; display: block; height: 5px; margin-top: 8px; overflow: hidden; width: 100%; }
.mining-tool-integrity::-webkit-progress-bar,
.gemology-metric progress::-webkit-progress-bar { background: rgba(255, 255, 255, .04); }
.mining-tool-integrity::-webkit-progress-value,
.gemology-metric progress::-webkit-progress-value { background: var(--aqua); border-radius: 999px; }
.mining-tool-integrity::-moz-progress-bar,
.gemology-metric progress::-moz-progress-bar { background: var(--aqua); border-radius: 999px; }
.mining-tool-upgrade { border-top:1px solid var(--border); display:grid; gap:8px; margin-top:10px; padding-top:9px; }
.mining-tool-upgrade-heading { align-items:baseline; display:flex; gap:7px; }
.mining-tool-upgrade-heading strong { display:block; margin-top:2px; }
.mining-tool-requirements { grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; }
.mining-tool-maximum { border-top: 1px solid var(--border); color: var(--gold); font-size: 9px; font-weight: 700; margin: 10px 0 0; padding-top: 9px; text-transform: uppercase; }
.mining-tool-actions { align-items: stretch; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; padding-top:9px; }
.mining-tool-actions form { flex:0 0 auto; margin:0; }
.mining-tool-actions button { height:100%; line-height:1.2; min-width:104px; width:auto; }
.mining-tool-actions .mining-tool-service button { display:grid; gap:2px; min-width:142px; }
.mining-tool-actions .mining-tool-service span { font-size:9px; }
.mining-tool-actions .mining-tool-service strong { color:var(--gold); font-size:10px; white-space:nowrap; }
.gemology-summary-heading .button-link { flex: 0 0 auto; }
.gemology-metrics { display:grid; gap:7px; grid-template-columns:2fr repeat(4,minmax(0,1fr)); margin-top:12px; }
.gemology-metric { align-content:start; background:rgba(255,255,255,.018); border:1px solid rgba(148,165,168,.22); border-radius:8px; display:grid; gap:3px; min-width:0; padding:9px 10px; }
.gemology-metric > div { align-items: baseline; display: flex; gap: 8px; justify-content: space-between; }
.gemology-metric span { color: var(--muted); font-size: 10px; }
.gemology-metric strong { font-size: 12px; overflow-wrap: anywhere; }
.gemology-metric small { color: var(--muted); font-size: 9px; }
.gemology-progress-card,
.gemology-survey-card { grid-column:auto; }
.gemology-survey-card.is-locked { opacity: .72; }
.gemology-fractions { align-items: center; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; padding-top: 9px; }
.gemology-fractions > strong { color: var(--gold); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.gemology-fractions span { color: var(--muted); font-size: 10px; }
.gemology-fractions b { color: var(--text); }

@media (max-width: 760px) {
    .prayer-summary,
    .mining-summary { grid-template-columns: repeat(2, minmax(90px, 1fr)); }
    .mining-heading { display: block; }
    .mining-retention-guide { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .mining-retention-guide > div { padding:5px 8px; }
    .mining-retention-guide > div:nth-child(3) { border-left:0; border-top:1px solid var(--line); }
    .mining-retention-guide > div:nth-child(4) { border-top:1px solid var(--line); }
    .mining-tool-list { grid-template-columns:1fr; }
    .gemology-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gemology-progress-card { grid-column:span 2; }
}
@media (max-width: 480px) {
    .mining-section-heading,
    .gemology-summary-heading { display: grid; }
    .mining-retention-guide { grid-template-columns:1fr; }
    .mining-retention-guide > div + div { border-left:0; border-top:1px solid var(--line); }
    .mining-tool-requirements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gemology-metrics { grid-template-columns: 1fr; }
    .gemology-progress-card { grid-column:auto; }
}
.realm-groups { display: grid; gap: 6px; }
.realm-quest-banner { align-items: center; display: grid; gap: 12px; grid-template-columns: minmax(150px, .65fr) minmax(220px, 1fr) auto; margin-bottom: 6px; padding: 8px 10px; }
.realm-quest-copy { display: grid; gap: 1px; min-width: 0; }
.realm-quest-copy .eyebrow { margin: 0; }
.realm-quest-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.realm-quest-meter { min-width: 0; }
.realm-quest-numbers { align-items: baseline; display: flex; justify-content: space-between; }
.realm-quest-numbers small { color: var(--muted); }
.realm-quest-meter .quest-progress { height: 6px; margin: 3px 0 0; }
.realm-quest-banner > .action-button { justify-self: end; white-space: nowrap; }
.realm-group { padding: 7px 9px; }
.realm-group > .eyebrow { margin-bottom: 5px; }
.realm-links { display: grid; gap: 4px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.realm-links a { align-items: center; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 6px; color: inherit; display: flex; min-width: 0; padding: 4px 5px; text-decoration: none; }
.realm-links a:hover,
.realm-links a:focus-visible { border-color: rgba(98, 213, 209, 0.5); }
.realm-links .realm-link--pending .action-button { background: var(--gold-soft); border-color: var(--gold); box-shadow: 0 0 0 1px rgba(215, 179, 106, 0.18); color: var(--gold); }
.realm-links a > span:first-child { display: block; min-width: 0; }
.realm-links small { color: var(--muted); }
.realm-links .action-button { min-height: 25px; padding: 4px 8px; }
.realm-more { margin-top: 5px; }
.realm-more > summary { list-style: none; }
.realm-more > summary::-webkit-details-marker { display: none; }
.realm-more > summary::after { content: ' +'; }
.realm-more[open] > summary::after { content: ' -'; }
.realm-links--more { border-top: 1px solid var(--border); margin-top: 5px; padding-top: 5px; }
.realm-more--all { margin-top: 1px; }
.realm-more-directory { display: grid; gap: 7px; margin-top: 6px; padding: 8px 10px; }
.realm-more-group > .eyebrow { margin-bottom: 4px; }
@media (max-width: 900px) { .realm-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .realm-links { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
    .realm-quest-banner { gap: 7px 10px; grid-template-columns: minmax(0, 1fr) auto; }
    .realm-quest-meter { grid-column: 1 / -1; grid-row: 2; }
}
.battle-menu { display: block; padding: 10px 12px; }
.battle-links { column-gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.battle-links .action-button { width: fit-content; }
.location-guide { max-width: 760px; }
.pvm-browser { overflow: hidden; padding: 8px 10px 6px; }
.pvm-tabs { align-items: end; border-bottom: 1px solid var(--border); display: flex; gap: 3px; overflow-x: auto; padding: 0 1px; }
.pvm-browser .pvm-tabs button:not(.game-nav-link) { background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; color: var(--muted); font-size: 10px; min-height: 26px; padding: 4px 8px; white-space: nowrap; }
.pvm-browser .pvm-tabs button[aria-selected="true"] { background: var(--surface-soft); border-color: var(--border); color: var(--paper); }
.pvm-browser .pvm-tabs button:focus-visible { outline: 1px solid var(--aqua); outline-offset: -2px; }
.pvm-tab-summary { align-items: baseline; display: flex; gap: 10px; padding: 7px 2px 4px; }
.pvm-tab-summary h2 { font-size: 12px; margin: 0; white-space: nowrap; }
.pvm-tab-summary p { color: var(--muted); font-size: 11px; margin: 0; }
.pvm-list { overflow-x: auto; }
.pvm-row { align-items: center; border-bottom: 1px solid var(--border); display: grid; gap: 8px; grid-template-columns: minmax(170px, 1.6fr) minmax(55px, .45fr) minmax(75px, .55fr) minmax(64px, .35fr); min-height: 29px; padding: 2px; }
.pvm-row:last-child { border-bottom: 0; }
.pvm-row form { justify-self: end; margin: 0; }
.pvm-earlier { border-bottom: 1px solid var(--border); }
.pvm-earlier > summary { color: var(--muted); cursor: pointer; font-size: 10px; list-style-position: inside; padding: 6px 2px; }
.pvm-earlier[open] > summary { color: var(--aqua); }
.pvm-browser .pvm-row button:not(.game-nav-link) { font-size: 9px; min-height: 24px; padding: 3px 7px; }
.pvm-heading { color: var(--muted); font-size: 10px; min-height: 25px; padding-bottom: 3px; padding-top: 3px; }
@media (max-width: 620px) {
    .pvm-tab-summary { align-items: start; flex-direction: column; gap: 2px; }
    .pvm-row { grid-template-columns: minmax(145px, 1.5fr) 50px 70px 62px; }
}
.armor-shop-balances { align-items: flex-end; display: grid; gap: 5px; justify-items: end; }
.armor-shop-list { margin-bottom: 6px; overflow-x: auto; padding: 14px 16px; }
.armor-row { align-items: center; border-bottom: 1px solid var(--border); display: grid; gap: 8px; grid-template-columns: minmax(220px, 1.8fr) repeat(2, minmax(75px, .55fr)) minmax(105px, .75fr) minmax(90px, auto); min-width: 630px; padding: 6px 3px; }
.armor-row:last-child { border-bottom: 0; }
.armor-row form { justify-self: end; margin: 0; }
.armor-row button { font-size: 9px; min-height: 28px; padding: 5px 9px; }
.armor-heading { color: var(--muted); font-size: 9px; text-transform: uppercase; }
@media (max-width: 620px) {
    .armor-shop-balances { align-items: start; justify-items: start; }
}
.aura-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aura-card, .aura-rules, .owned-auras { padding: 18px; }
.aura-card.equipped { border-color: rgba(98, 213, 209, .55); }
.aura-effect-table { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
.aura-effect-table > div { border: 1px solid var(--line); display: grid; gap: 2px; padding: 9px 10px; }
.aura-effect-table span { color: var(--muted); font-size: 11px; }
.aura-tax-form { align-items: end; display: flex; gap: 8px; margin-bottom: 8px; }
.aura-tax-form label { color: var(--muted); display: grid; font-size: 11px; gap: 4px; }
@media (max-width: 700px) { .aura-grid, .aura-effect-table { grid-template-columns: 1fr; } }
.dark-pit { min-height: 340px; }
.market-create, .market-list { padding: 20px; }
.market-create hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.market-row { align-items: center; border: 1px solid var(--line); display: flex; gap: 14px; justify-content: space-between; padding: 12px 14px; }
.market-row + .market-row { margin-top: 8px; }
.market-row > div { display: flex; flex-direction: column; min-width: 0; }
.market-row small { color: var(--muted); }
.reputation-handout-grid .market-row > div { flex: 1 1 auto; }
.reputation-handout-grid .market-row > form { flex: 0 0 auto; }
.reputation-handout-grid .market-row button { min-width: 86px; overflow-wrap: normal; white-space: nowrap; }
.reward-container-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px 18px; }
.reward-container-item { display: block; }
.reward-container-count { color: var(--text); display: inline-block; margin-top: 4px; white-space: nowrap; }
.hall-ranking { padding: 20px; }
.hall-ranking ol { display: grid; gap: 7px; margin: 14px 0 0; padding-left: 28px; }
.hall-ranking li { border-bottom: 1px solid var(--line); padding: 7px 4px; }
.hall-ranking li a { color: var(--paper); font-weight: 700; text-decoration: none; }
.hall-ranking li span { color: var(--muted); float: right; }

.great-hall-welcome { min-height: 104px; }

/* Player-selected presentation styles apply to the complete authenticated game shell. */
body.game-style-1 .game-shell { gap: 14px; grid-template-columns: 230px minmax(520px, 1fr) 215px; }
body.game-style-1 :is(.game-navigation, .resource-rail, .game-main) { gap: 10px; }
body.game-style-1 .panel { border-radius: 8px; padding: 10px 12px; }
body.game-style-1 .resource-card { padding: 12px; }
body.game-style-1 .game-nav { padding: 8px; }
body.game-style-1 .game-nav-link { min-height: 34px; }
body.game-style-1 .game-welcome { border-radius: 10px; padding: 14px 18px; }
body.game-style-1 :is(.hall-tabs, .section-tabs, .subnav) { margin-bottom: 7px; margin-top: 4px; }

body.game-style-2 .panel {
    background: linear-gradient(135deg, rgba(29, 27, 29, .97), rgba(48, 38, 25, .55));
    border-color: rgba(215, 179, 106, .35);
}
body.game-style-2 .game-welcome {
    background: radial-gradient(circle at 90% 30%, rgba(215, 179, 106, .14), transparent 34%), linear-gradient(120deg, #171821, #302619);
    border-color: rgba(215, 179, 106, .42);
}
body.game-style-2 :is(.game-nav-link.active, .game-nav-link:hover) { background: rgba(215, 179, 106, .13); color: var(--gold); }
body.game-style-2 :is(.hall-tabs, .section-tabs, .subnav) a { border-color: rgba(215, 179, 106, .28); }
body.game-style-2 :is(.hall-tabs, .section-tabs, .subnav) a:is(:hover, .active) { background: rgba(215, 179, 106, .13); border-color: var(--gold); color: var(--gold); }

body.game-style-3 .panel {
    background: linear-gradient(135deg, rgba(18, 27, 29, .98), rgba(25, 48, 36, .54));
    border-color: rgba(104, 183, 137, .36);
}
body.game-style-3 .game-welcome {
    background: radial-gradient(circle at 90% 30%, rgba(104, 183, 137, .14), transparent 34%), linear-gradient(120deg, #181b25, #202d24);
    border-color: rgba(104, 183, 137, .42);
}
body.game-style-3 :is(.game-nav-link.active, .game-nav-link:hover) { background: rgba(104, 183, 137, .13); color: #8bd9aa; }
body.game-style-3 :is(.hall-tabs, .section-tabs, .subnav) a { border-color: rgba(104, 183, 137, .3); }
body.game-style-3 :is(.hall-tabs, .section-tabs, .subnav) a:is(:hover, .active) { background: rgba(104, 183, 137, .13); border-color: #68b789; color: #8bd9aa; }

body.game-style-4 {
    --ink: var(--custom-background, #090c12);
    --panel: color-mix(in srgb, var(--custom-panel, #10161f) 92%, transparent);
    --cyan: var(--custom-accent, #62d5d1);
    --cyan-soft: color-mix(in srgb, var(--custom-accent, #62d5d1) 13%, transparent);
    --gold: var(--custom-highlight, #d7b36a);
    --gold-soft: color-mix(in srgb, var(--custom-highlight, #d7b36a) 13%, transparent);
    --line: color-mix(in srgb, var(--custom-accent, #62d5d1) 18%, transparent);
    background: radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--custom-accent) 18%, transparent), transparent 36rem), linear-gradient(180deg, color-mix(in srgb, var(--custom-background) 92%, var(--custom-panel)) 0%, var(--custom-background) 100%);
}
body.game-style-4 .panel { background: var(--panel); border-color: var(--line); }
body.game-style-4 .game-welcome { background: radial-gradient(circle at 90% 30%, color-mix(in srgb, var(--custom-highlight) 13%, transparent), transparent 34%), linear-gradient(120deg, var(--custom-panel), color-mix(in srgb, var(--custom-panel) 82%, var(--custom-accent))); border-color: color-mix(in srgb, var(--custom-highlight) 34%, transparent); }
body.game-style-4 :is(.game-nav-link.active, .game-nav-link:hover) { background: var(--cyan-soft); color: var(--cyan); }
body.game-style-4 :is(.hall-tabs, .section-tabs, .subnav) a { border-color: var(--line); }
body.game-style-4 :is(.hall-tabs, .section-tabs, .subnav) a:is(:hover, .active) { background: var(--cyan-soft); border-color: var(--cyan); color: var(--cyan); }

body.game-style-4.game-density-compact .game-shell { gap: 12px; grid-template-columns: 225px minmax(520px, 1fr) 210px; }
body.game-style-4.game-density-compact :is(.game-navigation, .resource-rail, .game-main) { gap: 9px; }
body.game-style-4.game-density-compact .panel { padding: 9px 11px; }
body.game-style-4.game-density-compact .game-welcome { padding: 12px 16px; }
body.game-style-4.game-density-relaxed .game-shell { gap: 24px; grid-template-columns: 255px minmax(520px, 1fr) 240px; }
body.game-style-4.game-density-relaxed :is(.game-navigation, .resource-rail, .game-main) { gap: 18px; }
body.game-style-4.game-density-relaxed .panel { padding: 22px 24px; }
body.game-style-4.game-density-relaxed .game-welcome { padding: 24px 30px; }
body.game-style-4.game-corners-square { --radius: 2px; }
body.game-style-4.game-corners-soft { --radius: 9px; }
body.game-style-4.game-corners-rounded { --radius: 18px; }
body.game-style-4 :is(.panel, .game-welcome, .game-nav, .game-nav-link, .resource-card, input, select, textarea, button, .button-link) { border-radius: var(--radius); }

.game-presentation-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr); gap: 10px; }
.custom-style-builder { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 10px; margin: 8px 0; padding: 12px; }
.custom-style-builder[hidden] { display: none; }
.custom-style-builder > p { color: var(--muted); margin: 0; }
.custom-style-controls { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.custom-style-controls label { min-width: 0; }
.custom-style-controls input[type="color"] { cursor: pointer; height: 38px; padding: 3px; width: 100%; }
.custom-style-preview { align-items: center; background: var(--preview-panel); border: 1px solid color-mix(in srgb, var(--preview-accent) 35%, transparent); border-radius: 16px; color: #edf4f3; display: flex; gap: 12px; padding: 14px; }
.custom-style-preview::before { background: var(--preview-background); border-radius: inherit; content: ""; inset: 0; opacity: .16; pointer-events: none; position: absolute; }
.custom-style-preview { position: relative; }
.custom-style-preview > * { position: relative; }
.custom-style-preview span { color: var(--preview-accent); }
.custom-style-preview button { background: color-mix(in srgb, var(--preview-accent) 15%, transparent); border-color: var(--preview-accent); color: var(--preview-highlight); margin-left: auto; }
.custom-style-preview[data-density="compact"] { padding: 8px 10px; }
.custom-style-preview[data-density="relaxed"] { gap: 18px; padding: 20px; }
.custom-style-preview[data-corners="square"] { border-radius: 2px; }
.custom-style-preview[data-corners="soft"] { border-radius: 9px; }
.custom-style-preview[data-corners="rounded"] { border-radius: 18px; }
@media (max-width: 900px) { .custom-style-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .game-presentation-fields, .custom-style-controls { grid-template-columns: 1fr 1fr; } .custom-style-preview { align-items: flex-start; flex-direction: column; } .custom-style-preview button { margin-left: 0; } }
.hall-tabs { display: flex; gap: 4px; margin: 8px 0 12px; overflow-x: auto; padding: 3px; scrollbar-width: thin; }
.hall-tabs a, .hall-tabs button { background: transparent; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); flex: 0 0 auto; font-size: 11px; min-height: 0; padding: 6px 9px; text-decoration: none; }
.hall-tabs a:hover, .hall-tabs a.active, .hall-tabs button:hover, .hall-tabs button[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.spellbook-page { display: grid; gap: 12px; min-width: 0; }
.spellbook-page > * { margin-bottom: 0; margin-top: 0; }
.spellbook-header { margin-bottom: 0; }
.spell-category-tabs { flex-wrap: wrap; margin: 4px 0 2px; }
.spell-category-panel { min-width: 0; padding: 12px 14px; scroll-margin-top: 12px; }
.spell-category-panel > .eyebrow { margin: 0 0 8px; }
.spell-list { border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.spell-table-head,
.spell-row { display: grid; gap: 14px; grid-template-columns: minmax(260px, 2fr) minmax(120px, .72fr) minmax(180px, .95fr) minmax(104px, auto); }
.spell-table-head { align-items: center; background: var(--surface-soft); color: var(--muted); font-size: 9px; letter-spacing: .06em; padding: 6px 10px; text-transform: uppercase; }
.spell-row { align-items: center; border-top: 1px solid var(--line); min-height: 58px; padding: 9px 10px; }
.spell-row > div { min-width: 0; }
.spell-summary,
.spell-requirement,
.spell-cost { align-content: center; display: grid; gap: 2px; }
.spell-summary strong { font-family: inherit; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.spell-summary span,
.spell-requirement span,
.spell-cost span { font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.spell-requirement small,
.spell-cost small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.spell-action { align-items: center; display: flex; justify-content: flex-end; }
.spell-action form { margin: 0; }
.spell-action button { min-width: 96px; }
.spell-action .level-badge { justify-content: center; text-align: center; white-space: nowrap; }
.spell-empty { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 7px; color: var(--muted); margin: 0; padding: 12px; }
@media (max-width: 800px) {
    .spell-table-head,
    .spell-row { gap: 10px; grid-template-columns: minmax(210px, 1.65fr) minmax(100px, .7fr) minmax(150px, 1fr) minmax(96px, auto); }
}
@media (max-width: 680px) {
    .spell-category-tabs { flex-wrap: nowrap; }
    .spell-table-head { display: none; }
    .spell-row { align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; padding: 10px; }
    .spell-summary { border-bottom: 1px solid var(--line); grid-column: 1 / -1; padding-bottom: 7px; }
    .spell-action { grid-column: 1 / -1; justify-content: flex-start; }
    .spell-action button { min-width: 0; }
}
@media (max-width: 420px) {
    .spell-row { grid-template-columns: 1fr; }
    .spell-summary,
    .spell-action { grid-column: 1; }
}
.town-specialist-panel { min-height: 150px; }
.town-tabs ~ [hidden] { display: none !important; }
.town-armory { min-width: 0; padding: 10px 12px; }
.town-armory .section-heading { align-items: center; display: flex; justify-content: space-between; }
.armory-tabs { margin: 5px 0 7px; }
.town-armory-list { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 6px; grid-template-columns: minmax(145px, 1.5fr) 70px 38px 90px minmax(220px, 1.4fr); min-height: 31px; padding: 3px 1px; }
.town-armory-heading { color: var(--muted); font-size: 10px; min-height: 25px; text-transform: uppercase; }
.town-armory-list > * { min-width: 0; overflow-wrap: anywhere; }
.town-armory-list .town-inline-actions { justify-content: flex-end; }
.town-armory-list select { max-width: 105px; }
.town-armory-bulk-issue { align-items: end; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 7px; display: grid; gap: 5px 8px; grid-template-columns: minmax(190px, 1fr) auto; margin: 7px 0 9px; padding: 9px 10px; }
.town-armory-bulk-issue label { display: grid; gap: 3px; }
.town-armory-bulk-issue small { color: var(--muted); grid-column: 1 / -1; }
.town-armory-bulk-buttons { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.town-armory-stock-list { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 7px; grid-template-columns: 28px minmax(155px, 1.6fr) 46px 100px minmax(110px, .8fr); min-height: 34px; padding: 4px 1px; }
.town-armory-stock-list > * { min-width: 0; overflow-wrap: anywhere; }
.town-armory-stock-list .town-inline-actions { justify-content: flex-end; }
.town-armory-check { align-items: center; display: flex; justify-content: center; }
.town-armory-check input { height: 15px; margin: 0; width: 15px; }
.town-armory-donate { align-items: end; border-top: 1px solid var(--line); display: flex; gap: 7px; margin-top: 7px; padding-top: 7px; }
.town-armory-donate label { display: grid; gap: 3px; min-width: 220px; }
.town-armory-key-summary { align-items: center; background: var(--surface-soft); display: flex; gap: 18px; padding: 6px 8px; }
.town-help { color: var(--muted); margin: 4px 0 7px; }
.town-smith-heading { border-bottom: 1px solid var(--line); color: var(--gold); font-size: 11px; letter-spacing: .08em; margin: 8px 0 2px; padding-bottom: 3px; text-transform: uppercase; }
.town-smith-list { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 7px; grid-template-columns: minmax(150px, 1.1fr) 100px minmax(250px, 1.8fr) 72px; min-height: 31px; padding: 3px 1px; }
.town-smith-list > * { min-width: 0; overflow-wrap: anywhere; }
.town-smith-list-heading { color: var(--muted); font-size: 10px; min-height: 24px; text-transform: uppercase; }
.town-ring-recipes { display: grid; gap: 3px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.town-ring-recipes span { background: var(--surface-soft); display: grid; gap: 2px; padding: 5px 7px; }
.town-ring-forge-form { align-items: end; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.town-ring-forge-form label { display: grid; gap: 2px; }
.town-ring-forge-form input { max-width: 140px; }
.town-mass-mail { display: grid; gap: 8px; grid-template-columns: minmax(160px, .45fr) minmax(240px, 1fr) auto; }
.town-mass-mail label { display: grid; gap: 2px; }
.town-mass-mail textarea { min-height: 54px; }
.town-mass-mail button { align-self: end; }
.town-closed-features { color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 7px; }
.town-war-room { min-width: 0; padding: 10px 12px; }
.town-section-heading { align-items: center; margin-bottom: 9px; }
.town-section-heading .eyebrow { margin: 0; }
.town-panel-title { display: block; font-size: 14px; line-height: 1.35; margin-top: 4px; }
.town-poll-question { color: var(--gold); font-size: 12px; font-weight: 700; line-height: 1.4; margin: 7px 0; }
.war-room-tabs { margin: 5px 0 7px; }
.town-operation-tabs { margin: 0 0 8px; }
.town-operation-tabs button { padding-block: 6px; }
.town-operations-grid[hidden], [data-operation-section][hidden] { display: none; }
.town-operations-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.town-operations-grid[hidden] { display: none; }
.town-operation-card { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; min-width: 0; padding: 10px; }
.town-operation-card .eyebrow { margin: 0 0 7px; }
.town-operation-heading { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin-bottom: 7px; }
.town-operation-heading .eyebrow { margin-bottom: 2px; }
.town-operation-badge { border: 1px solid var(--line); border-radius: 999px; color: var(--gold); flex: 0 0 auto; font-size: 10px; font-weight: 700; padding: 4px 8px; }
.town-operation-wide { grid-column: 1 / -1; }
.town-operation-copy { color: var(--muted); line-height: 1.4; margin: 0 0 8px; }
.town-operation-unavailable { color: var(--danger); font-size: 10px; margin: auto 0 0; }
.town-operation-stats, .town-siege-status { display: grid; gap: 4px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin-bottom: 8px; }
.town-operation-stats > span, .town-siege-status > span { border: 1px solid var(--line); border-radius: 5px; color: var(--muted); display: grid; gap: 2px; min-width: 0; padding: 5px 7px; }
.town-operation-stats strong, .town-siege-status strong { color: var(--text); overflow-wrap: anywhere; }
.town-siege-overview { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.town-siege-unit { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; min-width: 0; padding: 8px; }
.town-siege-unit > strong, .town-siege-unit-heading { display: block; margin-bottom: 6px; }
.town-siege-unit-heading { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
.town-siege-unit-heading > span { color: var(--gold); font-weight: 700; }
.town-siege-unit .town-operation-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.town-siege-unit .town-war-action { margin-top: 5px; padding-top: 0; }
.town-siege-engine-grid, .legion-trait-grid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 8px; }
.legion-trait-grid > span, .legion-objective-strip > span { border: 1px solid var(--line); border-radius: 6px; display: grid; gap: 2px; padding: 6px 8px; }
.legion-trait-grid .is-locked { color: var(--muted); opacity: .7; }
.legion-trait-grid .is-unlocked strong, .legion-objective-strip b { color: var(--gold); }
.legion-objective-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.town-operation-details { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 7px; }
.town-operation-details > summary { color: var(--aqua); cursor: pointer; font-weight: 700; list-style-position: inside; padding: 3px 0; }
.town-operation-details[open] > summary { margin-bottom: 7px; }
.town-siege-products { display: grid; gap: 5px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.town-siege-products article { align-items: center; border: 1px solid var(--line); border-radius: 6px; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; padding: 7px; }
.town-siege-products article > div { display: grid; gap: 2px; min-width: 0; }
.town-siege-products small, .town-siege-products article > div > span, .town-siege-products .muted { color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.town-siege-products .town-operation-unavailable { color: var(--danger); }
.town-operation-card .town-war-action { margin-top: auto; padding-top: 3px; }
.invasion-grid { --invasion-cell: 24px; display: grid; gap: 2px; grid-template-columns: repeat(11, var(--invasion-cell)); justify-content: center; margin: 7px auto 10px; max-width: 100%; overflow-x: auto; padding: 2px 12px 5px; scrollbar-width: none; width: max-content; }
.invasion-grid::-webkit-scrollbar { display: none; }
.invasion-cell { aspect-ratio: 1; background: rgba(255,255,255,.018); border: 1px solid var(--line); border-radius: 3px; display: grid; min-width: var(--invasion-cell); place-content: center; position: relative; width: var(--invasion-cell); }
.invasion-cell small { color: var(--muted); font-size: 7px; opacity: .6; }
.invasion-cell b, .invasion-cell i { border-radius: 999px; font-size: 7px; font-style: normal; line-height: 11px; min-width: 11px; position: absolute; text-align: center; top: 2px; }
.invasion-cell b { background: var(--aqua); color: #041414; left: 1px; }
.invasion-cell i { background: var(--danger); color: #fff; right: 1px; }
.invasion-cell em { bottom: 0; color: var(--gold); font-size: 7px; font-style: normal; left: 50%; position: absolute; transform: translateX(-50%); }
.invasion-cell.has-allies { border-color: rgba(93,231,221,.5); }
.invasion-cell.has-enemies { box-shadow: inset 0 0 0 1px rgba(235,105,105,.45); }
.invasion-cell.has-station { background: rgba(231,190,93,.08); }
.invasion-archive { gap: 6px; }
.invasion-report { border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.invasion-report > summary { align-items: center; cursor: pointer; display: flex; gap: 12px; justify-content: space-between; list-style-position: inside; padding: 8px 10px; }
.invasion-report > summary > span:first-child { display: grid; gap: 2px; }
.invasion-report > summary small { color: var(--muted); }
.invasion-report > summary > span:last-child { color: var(--gold); flex: 0 0 auto; font-weight: 700; }
.invasion-report[open] > summary { background: var(--surface); border-bottom: 1px solid var(--line); }
.invasion-report-body { display: grid; gap: 9px; padding: 10px; }
.invasion-report-totals { display: grid; gap: 5px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.invasion-report-totals span { border: 1px solid var(--line); border-radius: 5px; color: var(--muted); display: grid; gap: 2px; min-width: 0; padding: 5px 7px; }
.invasion-report-totals strong { color: var(--text); overflow-wrap: anywhere; }
.invasion-report-rewards { align-items: center; display: flex; flex-wrap: wrap; gap: 5px 12px; }
.invasion-report-rewards span { color: var(--gold); }
.invasion-captive-list { margin: 0; }
.invasion-replay { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 8px; }
.invasion-replay-toolbar { align-items: end; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.invasion-replay-toolbar label { display: grid; gap: 2px; min-width: 105px; }
.invasion-replay-toolbar button { min-width: 62px; }
.invasion-replay-status { align-items: center; display: flex; gap: 10px; justify-content: center; margin-top: 7px; }
.invasion-replay-status span { color: var(--muted); }
.invasion-grid-legend { display: flex; flex-wrap: wrap; gap: 5px 12px; justify-content: center; }
.invasion-grid-legend span { align-items: center; color: var(--muted); display: flex; gap: 4px; }
.invasion-grid-legend i { border-radius: 50%; display: inline-block; height: 8px; width: 8px; }
.invasion-grid-legend .is-allied { background: var(--aqua); }
.invasion-grid-legend .is-enemy { background: var(--danger); }
.invasion-grid-legend .is-station { background: var(--gold); border-radius: 1px; transform: rotate(45deg); }
.invasion-event-log { border-top: 1px solid var(--line); padding-top: 7px; }
.invasion-event-log > summary { color: var(--aqua); cursor: pointer; font-weight: 700; }
@media (max-width: 700px) {
    .invasion-grid { --invasion-cell: 21px; padding-inline: 5px; }
    .invasion-report-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .invasion-replay-toolbar { align-items: stretch; display: grid; grid-template-columns: 1fr 1.2fr 1fr; }
    .invasion-replay-toolbar [data-invasion-play] { grid-column: 1 / -1; }
    .invasion-replay-status { align-items: flex-start; flex-direction: column; gap: 2px; }
}
.town-war-action-inline { align-items: end; display: grid; grid-template-columns: minmax(150px, 1fr) auto; }
.town-war-action-inline label { min-width: 0; }
.town-knight-roster { border: 1px solid var(--line); border-radius: 7px; margin-top: 2px; overflow: hidden; }
.town-knight-head, .town-knight-row { align-items: center; display: grid; gap: 10px; grid-template-columns: minmax(160px, 1.4fr) 70px 110px minmax(190px, 1fr); min-width: 0; padding: 7px 9px; }
.town-knight-head { background: var(--surface); color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.town-knight-row { border-top: 1px solid var(--line); }
.town-knight-row > strong, .town-knight-row > span, .town-knight-service { min-width: 0; }
.town-knight-row > span { color: var(--text); }
.town-knight-row > span > small { display: none; }
.town-knight-service { align-items: center; display: flex; justify-content: flex-end; }
.town-knight-service form { margin: 0; }
.town-knight-service button { min-width: 64px; }
.town-knight-serving { display: grid; gap: 1px; text-align: right; }
.town-knight-serving small { color: var(--muted); }
.town-war-current, .town-war-row { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 10px; justify-content: space-between; min-height: 36px; padding: 4px 1px; }
.town-war-current div, .town-war-row div { display: grid; gap: 2px; }
.town-war-current small, .town-war-row small { color: var(--muted); }
.town-war-current > span { color: var(--gold); font-size: 18px; }
.town-war-action { align-items: end; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.town-war-action label { display: grid; gap: 2px; min-width: 210px; }
.town-force-grid { align-items: center; display: grid; gap: 4px 8px; grid-template-columns: 75px minmax(140px, 1fr) 80px; }
.town-force-grid > * { border-bottom: 1px solid var(--line); min-height: 29px; padding: 4px 1px; }
.town-war-fighters { display: grid; gap: 4px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 7px 0; }
.town-war-fighters form { align-items: center; background: var(--surface-soft); display: flex; gap: 7px; justify-content: space-between; padding: 4px 6px; }
.town-tactic-grid { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.town-tactic-grid form { align-items: center; display: flex; gap: 4px; }
.town-tactic-grid select { max-width: 130px; }
.town-war-tactics { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.town-war-tactics > .section-heading { margin-bottom: 7px; }
.town-tactic-tier { align-items: start; border: 1px solid var(--line); border-radius: 7px; display: grid; gap: 9px; grid-template-columns: 125px minmax(0, 1fr); margin-top: 6px; padding: 8px; }
.town-tactic-tier > div:first-child { display: grid; gap: 3px; padding: 4px 2px; }
.town-tactic-tier > div:first-child strong { color: var(--gold); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.town-tactic-tier > div:first-child small { color: var(--muted); }
.town-tactic-tier.is-locked { opacity: .62; }
.town-tactic-tier .town-tactic-grid { display: grid; gap: 5px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.town-tactic-tier .town-tactic-grid form { align-items: stretch; background: var(--surface-soft); border-radius: 5px; display: grid; gap: 4px; min-width: 0; padding: 5px; }
.town-tactic-tier .town-tactic-grid button { min-width: 0; overflow-wrap: anywhere; width: 100%; }
.town-tactic-tier .town-tactic-grid select { max-width: none; width: 100%; }
@media (max-width: 760px) {
    .town-operations-grid, .town-siege-overview, .town-siege-products { grid-template-columns: 1fr; }
    .town-operation-wide { grid-column: auto; }
    .town-war-action-inline { grid-template-columns: 1fr; }
    .town-knight-head { display: none; }
    .town-knight-row { grid-template-columns: minmax(0, 1fr) auto auto; }
    .town-knight-row > strong { grid-column: 1 / -1; }
    .town-knight-row > span { display: grid; gap: 1px; }
    .town-knight-row > span > small { color: var(--muted); display: block; font-size: 8px; text-transform: uppercase; }
    .town-knight-service { align-self: end; }
}
.tiny-number { max-width: 54px; }
.town-fountain-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.town-fountain-grid > * { background: var(--surface-soft); border: 1px solid var(--line); display: grid; gap: 6px; padding: 8px; }
.town-fountain-grid form label { display: grid; gap: 3px; }
.town-marriage { background: var(--surface-soft); border: 1px solid var(--line); display: grid; gap: 6px; margin-bottom: 8px; padding: 8px; }
.town-marriage-propose, .town-marriage-row { align-items: end; display: flex; gap: 7px; justify-content: space-between; }
.town-marriage-propose label { display: grid; flex: 1; gap: 3px; }
.town-stable-vitals { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.town-stable-stock { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.town-stable-stock span { border: 1px solid var(--line); padding: 3px 5px; }
.forum-board-content { display: grid; gap: 12px; }
.forum-new-topic { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.forum-new-topic .stacked-form { gap: 10px; max-width: none; }
.forum-new-topic label { display: grid; gap: 4px; margin: 0; }
.forum-topic-list { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.forum-board-content-compact { gap: 8px; }
.forum-board-content-compact .forum-new-topic,
.forum-board-content-compact .forum-topic-list { padding: 9px; }
.town-forum-list { border-color: rgba(218, 177, 89, .55); }
.town-game { margin-top: 8px; }
.town-game-map { display: grid; gap: 1px; grid-template-columns: repeat(12, minmax(30px, 1fr)); margin-top: 6px; min-width: 520px; }
.town-game-tile { align-items: center; aspect-ratio: 1.3; background: #28302d; display: flex; font-size: 9px; justify-content: space-around; padding: 2px; }
.town-game-tile small { opacity: .7; }
.terrain-river { box-shadow: inset 0 -3px #3e9aca; } .terrain-forest { box-shadow: inset 0 -3px #377b43; } .terrain-mountains { box-shadow: inset 0 -3px #8a8c91; } .terrain-peak { background: #464950; } .terrain-ruins { background: #695f3c; }
.town-tof { background-color: #225b36; } .town-mod { background-color: #51316d; } .town-roc { background-color: #285c7b; } .town-zom { background-color: #5a3428; } .town-tm { background-color: #555b61; } .town-ton { background-color: #70312f; } .town-dp { background-color: #754c22; } .town-tds { background-color: #161719; } .town-ksr { background-color: #706727; } .town-fa { background-color: #713e61; }
@media (max-width: 760px) { .town-armory-list { grid-template-columns: minmax(130px, 1.4fr) 60px 35px 80px minmax(180px, 1.2fr); min-width: 600px; } .town-armory-stock-list { min-width: 610px; } .town-armory > [data-armory-section] { overflow-x: auto; } }
@media (max-width: 700px) {
    .town-office-grid { grid-template-columns: 1fr; }
    .town-tactic-tier { grid-template-columns: 1fr; }
    .town-tactic-tier .town-tactic-grid { grid-template-columns: 1fr; }
    .town-work-live { grid-template-columns: 1fr; }
    .town-work-live > span { text-align: left; }
    .town-work-live > form { grid-column: 1; grid-row: auto; }
    .town-policy-form, .town-mass-mail { grid-template-columns: 1fr; }
    .town-leadership-switch form { align-items: flex-start; flex-direction: column; }
}
.hall-summary { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 10px; }
.hall-summary a { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; display: grid; padding: 9px 12px; text-decoration: none; }
.hall-summary a:hover { background: var(--cyan-soft); border-color: var(--cyan); }
.hall-summary strong { color: var(--gold); font-size: 18px; }
.hall-summary span { color: var(--muted); font-size: 11px; }
.compact-panel { padding: 12px 14px; }
.compact-panel h2 { margin: 2px 0 8px; }
.hall-two-column { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hall-two-column > * { min-width: 0; }
.portrait-picker { border: 1px solid var(--line); display: grid; gap: 7px; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); margin: 0; padding: 10px; }
.portrait-picker legend { color: var(--muted); padding: 0 5px; }
.portrait-picker label { cursor: pointer; position: relative; }
.portrait-picker input { inset: 0; opacity: 0; position: absolute; }
.portrait-picker input + .portrait-choice { aspect-ratio: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 50%; display: block; overflow: hidden; }
.portrait-picker input:checked + .portrait-choice { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.portrait-picker label:hover .portrait-choice { border-color: var(--gold); transform: translateY(-1px); }
.portrait-art { background-image: var(--portrait-atlas); background-position: var(--portrait-x) var(--portrait-y); background-repeat: no-repeat; background-size: 700% 700%; border-radius: inherit; display: block; height: 100%; width: 100%; }
.portrait-choice-custom img,
.profile-portrait img { display: block; height: 100%; object-fit: cover; width: 100%; }
.custom-portrait-manager { align-items: end; border-top: 1px solid var(--line); display: grid; gap: 8px; grid-template-columns: minmax(180px, 1fr) minmax(300px, 1.3fr) auto; margin-top: 12px; padding-top: 12px; }
.custom-portrait-manager > div { display: grid; gap: 3px; }
.custom-portrait-manager small { color: var(--muted); }
.custom-portrait-upload { align-items: end; display: grid; gap: 7px; grid-template-columns: minmax(0, 1fr) auto; }
.file-picker { display: grid; gap: 4px; }
.file-picker input[type="file"] { min-width: 0; padding: 7px; }
@media (max-width: 760px) {
    .portrait-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .custom-portrait-manager { align-items: stretch; grid-template-columns: 1fr; }
    .custom-portrait-upload { grid-template-columns: 1fr; }
}
.hall-feed, .hall-player-list { display: grid; gap: 0; list-style: none; margin: 0; max-height: 54vh; overflow-y: auto; padding: 0; }
.hall-feed li, .hall-player-list li { border-bottom: 1px solid var(--line); display: flex; gap: 8px; padding: 7px 2px; }
.hall-feed li { align-items: baseline; flex-wrap: wrap; }
.hall-feed time, .hall-player-list time { color: var(--muted); font-size: 10px; }
.hall-feed span { flex-basis: 100%; overflow-wrap: anywhere; }
.hall-player-list li { justify-content: space-between; }
.hall-player-list li:has(> a) { padding: 0; }
.hall-player-list li > a { align-items: center; color: var(--paper); display: flex; gap: 8px; justify-content: space-between; padding: 7px 2px; text-decoration: none; width: 100%; }
.hall-player-list li > a:hover { background: var(--cyan-soft); color: var(--cyan); }
.great-hall-welcome a.level-badge { text-decoration: none; }
.hall-table { display: grid; overflow-x: auto; }
.hall-table > div { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 8px; grid-template-columns: minmax(90px, .8fr) minmax(150px, 2fr) minmax(110px, 1fr) minmax(90px, 1fr) minmax(110px, auto); min-width: 660px; padding: 7px 2px; }
.hall-table .hall-table-head { color: var(--muted); font-weight: 700; }
.danger-panel { border-color: rgba(210, 79, 79, .45); }
.player-profile-welcome { align-items: center; display: grid; grid-template-columns: auto 1fr auto; }
.profile-portrait { align-items: center; aspect-ratio: 1; background: var(--surface); border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); display: flex; font-family: var(--font-display); font-size: 18px; justify-content: center; overflow: hidden; width: 54px; }
.chat-stream { display: grid; gap: 0; max-height: 540px; overflow-y: auto; }
.chat-stream article { border-bottom: 0; display: block; font-size: 11px; line-height: 1.15; padding: 1px 3px; }
.chat-stream article header { align-items: baseline; display: flex; gap: 3px; line-height: 1.15; min-width: 0; }
.chat-stream article a { color: var(--gold); font-weight: 700; text-decoration: none; }
.chat-line-author::after { content: ':'; }
.chat-stream .chat-line-text { color: var(--chat-color, var(--text)); flex: 1; line-height: 1.15; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-stream time { color: var(--muted); flex: none; font-size: 11px; font-variant-numeric: tabular-nums; margin-left: 0; }
.chat-mention { color: var(--cyan) !important; font-weight: 800 !important; text-decoration: underline !important; text-decoration-color: rgb(91 221 221 / 45%) !important; text-underline-offset: 2px; }
.chat-stream article.chat-line-mentioned, .mini-chat-lines .chat-line-mentioned { background: rgb(91 221 221 / 10%); box-shadow: inset 2px 0 0 var(--cyan); }
.chat-line-mentioned .chat-line-text { font-weight: 800; }
.chat-player-hovercard { background: #0b1118; border: 1px solid var(--cyan); border-radius: 8px; box-shadow: 0 10px 28px rgb(0 0 0 / 55%); color: var(--text); font-size: 11px; max-width: calc(100vw - 16px); padding: 9px 10px; pointer-events: none; position: fixed; width: 245px; z-index: 2000; }
.chat-player-hovercard strong { color: var(--gold); display: block; margin-bottom: 6px; overflow-wrap: anywhere; }
.chat-player-hovercard dl { display: grid; gap: 3px 8px; grid-template-columns: minmax(0, 1fr) auto; margin: 0; }
.chat-player-hovercard dt { color: var(--muted); }
.chat-player-hovercard dd { color: var(--text); margin: 0; max-width: 130px; overflow-wrap: anywhere; text-align: right; }
.chat-context-menu { background: #0b1118; border: 1px solid var(--cyan); border-radius: 7px; box-shadow: 0 10px 28px rgb(0 0 0 / 55%); display: grid; min-width: 175px; padding: 4px; position: fixed; z-index: 2100; }
.chat-context-menu[hidden] { display: none; }
.chat-context-menu button { background: transparent; border: 0; border-radius: 4px; color: var(--text); font: inherit; font-size: 11px; letter-spacing: 0; min-height: 28px; padding: 6px 8px; text-align: left; text-transform: none; }
.chat-context-menu button:hover, .chat-context-menu button:focus-visible { background: rgb(91 221 221 / 14%); color: var(--cyan); outline: none; }
.chat-context-menu button[hidden] { display: none; }
.chat-context-menu [data-chat-context-action="delete"] { color: #ff8f8f; }
.chat-context-notice { background: #10231f; border: 1px solid #3d806f; border-radius: 7px; bottom: 16px; box-shadow: 0 8px 24px rgb(0 0 0 / 45%); color: #a7f1d9; font-size: 11px; left: 50%; margin: 0; padding: 8px 12px; position: fixed; transform: translateX(-50%); z-index: 2200; }
.chat-context-notice.is-error { background: #2a1519; border-color: #89404c; color: #ffadb8; }
.chat-form { display: grid; gap: 8px; }
.chat-form button { justify-self: end; }
.chat-live-status, .mini-chat-status { color: var(--muted); font-size: 11px; margin: 0; }
.chat-line-action p, .chat-line-action span { font-style: italic; }
.chat-line-lyric p, .chat-line-lyric span { font-style: italic; }
.chat-line-game p, .chat-line-game span, .chat-line-reward p, .chat-line-reward span { color: var(--gold); font-weight: 700; }
.mini-chat-lines .chat-line-text { color: var(--chat-color, var(--text)); min-width: 0; overflow-wrap: anywhere; }

.tracker-controls { align-items: center; display: grid; gap: 7px; grid-template-columns: minmax(0, 1fr) auto auto; padding: 9px 10px; }
.tracker-timeframes, .tracker-area-tabs, .tracker-view-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tracker-controls .button-link, .tracker-range-form button { padding: 5px 8px; }
.tracker-controls .button-link.active, .tracker-area-tabs a.active, .tracker-view-tabs a.active { background: var(--cyan-soft); border-color: var(--cyan); color: var(--cyan); }
.tracker-range-form { align-items: center; display: flex; gap: 5px; margin: 0; }
.tracker-range-form input[type="number"] { min-height: 28px; padding: 4px 6px; width: 62px; }
.tracker-browser { display: grid; gap: 6px; padding: 8px 10px; }
.tracker-area-tabs { border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.tracker-area-tabs a, .tracker-view-tabs a { border: 1px solid transparent; border-radius: 6px; color: var(--muted); font-size: 11px; font-weight: 700; padding: 4px 7px; text-decoration: none; }
.tracker-summary-grid { display: grid; gap: 7px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tracker-summary-card { display: grid; gap: 2px; padding: 9px 10px; }
.tracker-summary-card > span, .tracker-summary-card small { color: var(--muted); font-size: 10px; }
.tracker-summary-card strong { font-family: var(--font-display); font-size: 18px; font-weight: 500; }
.tracker-section-heading { align-items: center; display: flex; justify-content: space-between; }
.tracker-section-heading h2 { margin: 0; }
.tracker-section-heading > span { color: var(--muted); font-size: 10px; }
.tracker-ledger { padding: 11px 12px; }
.tracker-resource-grid { display: grid; gap: 0 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 8px 0 0; }
.tracker-resource-grid div, .tracker-metric-card dl div { align-items: center; border-top: 1px solid var(--line); display: flex; justify-content: space-between; min-width: 0; padding: 4px 1px; }
.tracker-resource-grid dt, .tracker-metric-card dt { color: var(--muted); }
.tracker-resource-grid dd, .tracker-metric-card dd { font-variant-numeric: tabular-nums; margin: 0; }
.tracker-metric-sections { display: grid; gap: 7px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tracker-metric-card, .tracker-empty { padding: 10px 12px; }
.tracker-metric-card h2, .tracker-empty h2 { margin: 0 0 6px; }
.tracker-metric-card dl { margin: 0; }
.tracker-positive { color: #65d6a0 !important; }
.tracker-negative { color: #ff7e87 !important; }
.tracker-zero { color: var(--muted) !important; }
.tracker-history { padding: 9px 11px; }
.tracker-history summary { color: var(--text); cursor: pointer; font-weight: 700; }
.tracker-history summary span, .tracker-history-note { color: var(--muted); font-size: 10px; font-weight: 400; }
.tracker-history .table-scroll { margin-top: 8px; }

@media (max-width: 980px) {
    .tracker-controls { grid-template-columns: 1fr; }
    .tracker-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .tracker-summary-grid, .tracker-metric-sections, .tracker-resource-grid { grid-template-columns: 1fr; }
}
.chat-tools-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
.chat-tools, .chat-moderation { padding: 10px; }
.chat-command-list { display: flex; flex-wrap: wrap; gap: 5px; }
.chat-command-list button, .chat-command-help button { border: 1px solid var(--line); padding: 3px 5px; }
.chat-preferences-form { align-items: center; display: grid; gap: 9px 8px; grid-template-columns: minmax(0, 1fr) auto; }
.chat-preferences-form label { margin: 0; }
.chat-colour-control { align-items: center; display: flex; gap: 7px; grid-column: 1 / -1; justify-content: space-between; }
.chat-colour-control span { white-space: nowrap; }
.chat-colour-control input[type="color"] { cursor: pointer; height: 28px; padding: 2px; width: 38px; }
.chat-timestamp-control { align-items: center; display: flex; gap: 6px; min-height: 28px; }
.chat-timestamp-control input { accent-color: var(--cyan); margin: 0; }
.chat-timestamp-control span { line-height: 1.2; }
.chat-preferences-form button { min-height: 28px; padding: 5px 10px; }
.chat-moderation article { border-top: 1px solid var(--line); padding: 7px 0; }
@media (max-width: 800px) { .chat-tools-grid { grid-template-columns: 1fr; } }
.player-search-panel { padding: 22px; }
.player-search-form { display: grid; gap: 8px; }
.player-search-form > div { display: grid; gap: 10px; grid-template-columns: 1fr auto; }
.player-results { display: grid; gap: 8px; margin-top: 20px; }
.player-results a { align-items: center; border: 1px solid var(--line); color: inherit; display: flex; justify-content: space-between; padding: 13px 15px; text-decoration: none; }
.player-results a:hover { border-color: var(--gold); }
.player-results a > span:first-child { display: flex; flex-direction: column; }
.player-results small { color: var(--muted); }
.adventurer-register-panel { padding: 14px; }
.adventurer-register-heading { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 10px; }
.adventurer-register-heading p { margin: 0; }
.adventurer-register-list { border-top: 1px solid var(--line); display: grid; }
.adventurer-register-list a { align-items: center; border-bottom: 1px solid var(--line); color: inherit; display: grid; gap: 10px; grid-template-columns: 64px minmax(0, 1fr) auto; min-height: 36px; padding: 7px 8px; text-decoration: none; }
.adventurer-register-list a:hover { background: rgb(98 213 209 / 7%); }
.adventurer-register-list a > span:last-child { color: var(--cyan); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.adventurer-register-id { color: var(--muted); font-variant-numeric: tabular-nums; }
.adventurer-register-pagination { align-items: center; display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.adventurer-register-pagination > span { color: var(--muted); }
.profile-actions { display: flex; gap: 10px; margin-top: 18px; }

/* Public player records: compact legacy parity with modern, safe actions. */
.player-profile-hero { align-items: center; display: grid; gap: 14px; grid-template-columns: auto minmax(0, 1fr) auto; }
.player-profile-hero .profile-portrait { background: radial-gradient(circle at 35% 30%, rgb(98 213 209 / 24%), var(--surface)); box-shadow: inset 0 0 18px rgb(215 179 106 / 12%); font-size: 24px; width: 68px; }
.profile-portrait.portrait-2, .profile-portrait.portrait-5 { border-color: var(--cyan); color: var(--cyan); }
.profile-portrait.portrait-3, .profile-portrait.portrait-6 { border-color: #a889da; color: #c4aaf0; }
.profile-identity { min-width: 0; }
.profile-identity h1 { margin: 2px 0 3px; overflow-wrap: anywhere; }
.profile-identity > p:last-of-type { color: var(--muted); margin: 4px 0 0; overflow-wrap: anywhere; }
.profile-title { color: var(--gold); display: block; font-size: 11px; }
.online-text { color: #65d6a0; }
.profile-statuses { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.status-chip { background: rgb(255 255 255 / 4%); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 9px; padding: 3px 7px; text-transform: uppercase; }
.status-chip.positive { border-color: rgb(101 214 160 / 38%); color: #65d6a0; }
.status-chip.negative { border-color: rgb(255 126 135 / 38%); color: #ff7e87; }
.profile-action-bar { align-items: center; display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 10px; }
.profile-action-bar form { margin: 0; }
.profile-action-bar button, .profile-action-bar .button-link { min-height: 29px; padding: 6px 9px; }
.player-profile-grid { display: grid; gap: 9px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.player-profile-grid > * { min-width: 0; }
.profile-record-panel, .profile-ranking-panel, .profile-rap-sheet, .public-achievement-list { padding: 12px 14px; }
.profile-record-panel h2, .profile-ranking-panel h2, .profile-rap-sheet h2 { margin: 2px 0 8px; }
.profile-details, .ranking-list { margin: 0; }
.profile-details > div, .ranking-list > div { align-items: baseline; border-top: 1px solid var(--line); display: grid; gap: 8px; grid-template-columns: minmax(100px, 1fr) minmax(0, 1.25fr); padding: 5px 0; }
.profile-details dt, .ranking-list dt { color: var(--muted); }
.profile-details dd, .ranking-list dd { margin: 0; overflow-wrap: anywhere; text-align: right; }
.ranking-list { display: grid; gap: 0 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ranking-list dd { color: var(--gold); font-weight: 700; }
.profile-votes { align-items: center; display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.profile-votes form { margin: 0; }
.profile-votes .vote-button { background: transparent; border-color: rgb(101 214 160 / 35%); color: #65d6a0; min-height: 29px; padding: 5px 8px; }
.profile-votes .vote-button.negative { border-color: rgb(255 126 135 / 35%); color: #ff7e87; }
.profile-votes .vote-button.active { background: rgb(215 179 106 / 15%); border-color: var(--gold); color: var(--gold); }
.profile-mount-summary { border-top: 1px solid var(--line); display: grid; gap: 2px; margin-top: 9px; padding-top: 8px; }
.profile-mount-summary strong { color: var(--gold); }
.profile-mount-summary span { color: var(--muted); }
.profile-rap-sheet { margin-top: 9px; }
.profile-rap-sheet .panel-heading { align-items: start; display: flex; gap: 10px; justify-content: space-between; }
.compact-record-list { display: grid; }
.compact-record-list article { align-items: center; border-top: 1px solid var(--line); display: grid; gap: 8px; grid-template-columns: 45px minmax(0, 1fr) auto; padding: 6px 0; }
.compact-record-list time { color: var(--muted); font-size: 10px; }
.battle-outcome { font-size: 9px; font-weight: 800; text-transform: uppercase; }
.battle-outcome.won { color: #65d6a0; }
.battle-outcome.lost { color: #ff7e87; }
.profile-footer-actions { margin-top: 9px; }
.public-achievement-list .compact-card-grid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.compact-record-card { border: 1px solid var(--line); border-radius: 7px; display: grid; gap: 2px; padding: 8px 10px; }
.compact-record-card span, .compact-record-card small { color: var(--muted); }

.psychic-hero { align-items: center; display: grid; gap: 14px; grid-template-columns: auto minmax(0, 1fr) auto; }
.psychic-orb { align-items: center; background: radial-gradient(circle at 38% 32%, #d7fbff 0 6%, #6ed5de 8%, #36436c 34%, #151322 68%); border: 1px solid rgb(98 213 209 / 55%); border-radius: 50%; box-shadow: 0 0 22px rgb(98 213 209 / 22%), inset 0 0 18px rgb(255 255 255 / 18%); color: #fff; display: flex; font-family: var(--font-display); font-size: 22px; height: 64px; justify-content: center; width: 64px; }
.psychic-summary { display: grid; gap: 6px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 8px 0; }
.psychic-summary article { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 2px; padding: 8px 10px; }
.psychic-summary span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.psychic-summary strong { color: var(--gold); font-size: 14px; }
.psychic-report-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.psychic-panel { min-width: 0; padding: 11px 13px; }
.psychic-panel h2 { margin: 2px 0 7px; }
.psychic-wide-panel { grid-column: 1 / -1; }
.psychic-facts { margin: 0; }
.psychic-facts > div { align-items: baseline; border-top: 1px solid var(--line); display: grid; gap: 8px; grid-template-columns: minmax(105px, 1fr) minmax(0, 1.45fr); padding: 4px 0; }
.psychic-facts dt { color: var(--muted); }
.psychic-facts dd { margin: 0; overflow-wrap: anywhere; text-align: right; }
.psychic-combat-panel .capacity-meter { margin-top: 8px; }
.psychic-loadout { display: grid; gap: 5px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.psychic-loadout article { background: rgb(255 255 255 / 2%); border: 1px solid var(--line); border-radius: 7px; display: grid; gap: 1px; min-width: 0; padding: 7px 8px; }
.psychic-loadout article > span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.psychic-loadout strong, .psychic-loadout small { overflow-wrap: anywhere; }
.psychic-loadout small { color: var(--muted); }
.psychic-resource-groups { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.psychic-resource-groups dl { margin: 0; }
.psychic-resource-groups dl > div { align-items: baseline; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: space-between; padding: 4px 0; }
.psychic-resource-groups dt { color: var(--muted); }
.psychic-resource-groups dd { margin: 0; text-align: right; }
.psychic-aura { border: 1px solid rgb(98 213 209 / 28%); border-radius: 7px; display: grid; gap: 2px; margin-bottom: 7px; padding: 8px 9px; }
.psychic-aura strong { color: var(--cyan); }
.psychic-aura span, .psychic-aura small { color: var(--muted); }
.psychic-effect-list { margin-top: 7px; }

@media (max-width: 760px) {
    .player-profile-grid { grid-template-columns: 1fr; }
    .player-profile-hero { gap: 9px; grid-template-columns: auto minmax(0, 1fr); }
    .player-profile-hero > .level-badge { grid-column: 1 / -1; justify-self: start; }
    .player-profile-hero .profile-portrait { font-size: 19px; width: 52px; }
    .profile-action-bar { flex-wrap: nowrap; overflow-x: auto; padding: 3px 1px 6px; scrollbar-width: none; }
    .profile-action-bar::-webkit-scrollbar { display: none; }
    .profile-action-bar > * { flex: 0 0 auto; }
    .ranking-list { grid-template-columns: 1fr; }
    .compact-record-list article { align-items: start; grid-template-columns: 42px minmax(0, 1fr); }
    .compact-record-list time { grid-column: 2; }
    .psychic-hero { grid-template-columns: auto minmax(0, 1fr); }
    .psychic-hero > .level-badge { grid-column: 1 / -1; justify-self: start; }
    .psychic-orb { height: 48px; width: 48px; }
    .psychic-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .psychic-report-grid { grid-template-columns: 1fr; }
    .psychic-wide-panel { grid-column: auto; }
    .psychic-resource-groups { grid-template-columns: 1fr; }
}

@media (max-width: 420px) { .psychic-loadout { grid-template-columns: 1fr; } }

@media (max-width: 620px) {
    .hall-grid, .market-layout, .hall-two-column { grid-template-columns: 1fr; }
    .hall-summary { grid-template-columns: 1fr; }
    .battle-links { grid-template-columns: 1fr; }
    .player-search-form > div { grid-template-columns: 1fr; }
    .adventurer-register-heading { align-items: flex-start; flex-direction: column; }
    .adventurer-register-list a { grid-template-columns: 48px minmax(0, 1fr); }
    .adventurer-register-list a > span:last-child { display: none; }
    .profile-actions { flex-direction: column; }
}

/* One compact action language across public, account and game screens. */
button:not(.game-nav-link),
a.button,
a.button-link,
a.rail-action,
.action-button,
.primary-button,
.secondary-button {
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    min-height: 34px;
    border: 1px solid rgba(98, 213, 209, 0.35);
    border-radius: 8px;
    background: var(--cyan-soft);
    box-shadow: none;
    color: var(--cyan);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    overflow-wrap: anywhere;
    padding: 9px 12px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: normal;
}

button:not(.game-nav-link):hover,
a.button:hover,
a.button-link:hover,
a.rail-action:hover,
.action-button:hover,
.primary-button:hover,
.secondary-button:hover {
    border-color: var(--cyan);
    background: rgba(98, 213, 209, 0.2);
    color: #9af0ec;
}

button:not(.game-nav-link):disabled,
button:not(.game-nav-link)[aria-disabled="true"],
.action-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.48;
}

/* Repeated content rows share the same readable scale and may shrink safely. */
.game-main,
.game-main > *,
.panel,
.realm-group,
.forum-board,
.forum-board > span:first-child,
.market-row,
.market-row > div,
.player-results a,
.player-results a > span:first-child {
    min-width: 0;
}

.realm-links strong,
.forum-board strong,
.market-row strong,
.player-results strong {
    font-family: inherit;
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.realm-links small,
.forum-board small,
.market-row span,
.market-row small,
.player-results small {
    font-family: inherit;
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.realm-links .action-button,
.forum-board .action-button {
    align-self: start;
    justify-self: start;
    max-width: 100%;
    min-height: 30px;
    font-size: 10px;
    line-height: 1.2;
    padding: 7px 10px;
}

/* Item explanations remain in the normal flow so actions are readable without hover. */
.has-description {
    position: relative;
}

.has-description[tabindex="0"] {
    cursor: default;
}

.description-title::after {
    content: none;
}

.has-description .item-description {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--muted);
    display: block;
    font-family: inherit;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.45;
    margin: 3px 0 0;
    max-width: none;
    opacity: 1;
    overflow-wrap: anywhere;
    padding: 0;
    pointer-events: auto;
    position: static;
    text-align: left;
    text-transform: none;
    transform: none;
    transition: none;
    visibility: visible;
    white-space: normal;
    width: auto;
}

@media (min-width: 701px) {
    .armor-shop-list,
    .town-list {
        overflow: visible;
    }
}

.game-main :where(p, li, dd, td, th, label) {
    overflow-wrap: anywhere;
}

.daily-reward-summary {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.daily-reward-summary > div {
    border: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
}

.daily-reward-summary span {
    color: var(--muted);
}

.daily-challenge-card {
    display: grid;
    gap: 10px;
}

.daily-progress {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line);
    border-radius: 999px;
    height: 9px;
    max-width: 520px;
    overflow: hidden;
}

.daily-progress span {
    background: linear-gradient(90deg, var(--cyan), var(--gold));
    display: block;
    height: 100%;
    width: var(--progress-value, 0%);
}

.weekly-stat-tabs {
    flex-wrap: wrap;
    margin: 0;
}

.weekly-stat-tabs .active {
    border-color: var(--gold);
    color: var(--gold);
}

@media (max-width: 620px) {
    .daily-reward-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .realm-links a,
    .forum-board,
    .market-row {
        align-items: flex-start;
    }

}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

/* Outer Realm destinations share one dense, responsive layout language. */
.outer-realm-page {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.outer-realm-header {
    align-items: center;
    min-height: 0;
    padding: 15px 20px;
}

.outer-realm-header > div {
    min-width: 0;
}

.outer-realm-header .eyebrow {
    margin-bottom: 7px;
}

.outer-realm-header .eyebrow span {
    color: var(--gold);
    margin: 0 3px;
}

.outer-realm-header h1 {
    line-height: 1.2;
}

.outer-realm-header p:last-child {
    line-height: 1.45;
    margin: 7px 0 0;
}

.outer-realm-header .level-badge {
    flex: none;
    white-space: nowrap;
}

.outer-panel {
    min-width: 0;
    padding: 12px 14px;
}

.outer-panel > .eyebrow,
.outer-section-heading .eyebrow {
    margin-bottom: 5px;
}

.outer-section-heading {
    align-items: end;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 10px;
}

.outer-section-heading h2,
.outer-action-card h2 {
    font-size: 14px;
    margin: 0;
}

.outer-section-heading p,
.outer-action-card p {
    color: var(--muted);
    margin: 4px 0 0;
}

.outer-stat-grid {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
    margin: 0;
}

.outer-stat-grid > div {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 7px;
    min-width: 0;
    padding: 8px 10px;
}

.outer-stat-grid dt {
    color: var(--muted);
    font-size: 10px;
}

.outer-stat-grid dd {
    font-weight: 700;
    margin: 3px 0 0;
    overflow-wrap: anywhere;
}

.outer-offer-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.outer-offer-card,
.outer-action-card {
    align-items: center;
    background: rgba(255, 255, 255, 0.018);
    border: 1px solid var(--border);
    border-radius: 9px;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    padding: 10px 11px;
}

.outer-offer-card > div,
.outer-action-card > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.outer-offer-card strong {
    font-size: 11px;
    line-height: 1.35;
}

.outer-offer-card small {
    color: var(--muted);
    display: block;
    font-size: 10px;
    line-height: 1.45;
}

.outer-offer-card form,
.outer-action-card form {
    margin: 0;
}

.outer-notice {
    background: rgba(215, 179, 106, 0.07);
    border: 1px solid rgba(215, 179, 106, 0.22);
    border-radius: 8px;
    color: var(--gold);
    margin: 0;
    padding: 9px 11px;
}

.outer-resource-chips,
.outer-stat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.outer-resource-chips span,
.outer-stat-chips span,
.outer-stock {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.2;
    padding: 3px 6px;
    white-space: nowrap;
}

.outer-stock {
    color: var(--cyan);
    margin-left: 5px;
}

.outer-weapon-list {
    overflow-x: auto;
}

.outer-weapon-row {
    align-items: center;
    border-bottom: 1px solid var(--border);
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(185px, 1.4fr) minmax(125px, .75fr) minmax(145px, .9fr) auto;
    min-width: 630px;
    padding: 7px 3px;
}

.outer-weapon-row:last-child {
    border-bottom: 0;
}

.outer-weapon-row > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.outer-weapon-row small {
    color: var(--muted);
    font-size: 9px;
}

.outer-weapon-heading {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    min-height: 0;
    padding-top: 2px;
    text-transform: uppercase;
}

.outer-craft-browser {
    overflow: visible;
}

.outer-craft-browser .pvm-tab-panel {
    padding-top: 9px;
}

.outer-craft-grid {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
}

.outer-craft-card {
    align-content: start;
    grid-template-columns: minmax(0, 1fr) auto;
}

.outer-craft-card .outer-stat-chips {
    margin-bottom: 2px;
}

.relic-ascension-choice {
    border-top: 1px solid var(--border);
    display: grid;
    gap: 5px;
    grid-column: 1 / -1;
    margin-top: 3px !important;
    padding-top: 8px;
}

.relic-ascension-choice label {
    color: var(--gold);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.relic-ascension-choice > div {
    align-items: center;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.relic-ascension-choice select {
    min-width: 0;
}

.compact-note {
    font-size: 9px;
    margin: 7px 0 0;
}

.relic-ascension-summary {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.relic-ascension-item {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    padding: 12px;
}

.relic-ascension-item.target {
    border-color: rgba(94, 218, 216, .35);
}

.relic-ascension-item span,
.relic-ascension-item small {
    color: var(--muted);
    font-size: 9px;
}

.relic-ascension-arrow {
    color: var(--gold);
    font-size: 18px;
}

.relic-contribution-grid,
.relic-ascension-costs {
    margin-top: 8px;
}

.relic-payment-table {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    margin-top: 9px;
}

.relic-payment-table > div {
    border: 1px solid var(--border);
    border-radius: 7px;
    display: grid;
    gap: 2px;
    padding: 8px 9px;
}

.relic-payment-table span,
.relic-payment-table small {
    color: var(--muted);
    font-size: 9px;
}

.relic-ascension-confirmation .button-row {
    align-items: center;
    justify-content: flex-end;
}

.relic-ascension-confirmation form {
    margin: 0;
}

.outer-form-grid {
    align-items: end;
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(2, minmax(140px, 1fr)) auto;
}

.outer-form-grid label {
    display: grid;
    gap: 4px;
}

.outer-form-grid .choice-row {
    align-items: center;
    display: flex;
    grid-column: 1 / -1;
}

.outer-hub-groups {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.outer-hub-group {
    padding: 10px 12px;
}

.outer-hub-group .eyebrow {
    margin-bottom: 5px;
}

.outer-hub-links {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.outer-hub-links a {
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--paper);
    display: flex;
    font-size: 10px;
    font-weight: 700;
    min-height: 34px;
    padding: 7px 9px;
    text-decoration: none;
}

.outer-hub-links a:hover {
    background: var(--cyan-soft);
    border-color: rgba(98, 213, 209, .45);
    color: var(--cyan);
}

.outer-realm-page .pvm-browser {
    padding: 9px 11px 7px;
}

.outer-rune-browser .outer-section-heading {
    margin: 1px 2px 9px;
}

.outer-rune-browser .pvm-tabs {
    align-items: stretch;
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow-x: visible;
    padding-bottom: 4px;
}

.outer-rune-browser .pvm-tabs button:not(.game-nav-link) {
    align-content: center;
    display: grid;
    gap: 2px;
    line-height: 1.15;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
    width: 100%;
}

.rune-tab-name,
.rune-tab-count {
    display: block;
    min-width: 0;
}

.rune-tab-name {
    color: inherit;
    font-weight: 800;
}

.rune-tab-count {
    color: var(--muted);
    font-size: 8px;
    font-weight: 500;
}

.outer-rune-browser .pvm-tabs button.is-merge-ready .rune-tab-count {
    color: var(--gold);
}

.outer-rune-browser .pvm-tabs button.is-merge-ready {
    border-color: rgba(232, 190, 86, 0.55);
    color: var(--gold);
}

.rune-merge-status {
    padding: 10px 12px;
}

.rune-merge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rune-merge-list > span {
    background: rgba(232, 190, 86, 0.08);
    border: 1px solid rgba(232, 190, 86, 0.35);
    border-radius: 6px;
    color: var(--muted);
    padding: 5px 8px;
}

.rune-merge-list strong {
    color: var(--gold);
}

@media (max-width: 760px) {
    .outer-rune-browser .pvm-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 340px) {
    .outer-rune-browser .pvm-tabs {
        grid-template-columns: 1fr;
    }
}

.outer-rune-grid {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 3px 0;
}

.outer-rune-card {
    align-items: center;
    background: rgba(255, 255, 255, 0.018);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    padding: 8px 9px;
}

.outer-rune-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.outer-rune-copy strong {
    overflow-wrap: anywhere;
}

.outer-rune-copy > span {
    color: var(--muted);
    font-size: 9px;
}

.outer-rune-action {
    align-items: center;
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    margin: 0;
}

.outer-rune-action select {
    height: 30px;
    min-width: 48px;
    padding: 4px 22px 4px 7px;
}

.outer-rune-action button {
    min-height: 30px;
    padding: 6px 8px;
}

.rune-shop-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.rune-shop-summary .panel {
    display: grid;
    gap: 3px;
    padding: 9px 11px;
}

.rune-shop-summary span,
.rune-shop-summary small,
.rune-slot span,
.rune-slot small {
    color: var(--muted);
    font-size: 9px;
}

.rune-shop-summary strong { color: var(--gold); font-size: 15px; }

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

.rune-identify-panel h2,
.rune-identify-panel p { margin: 3px 0; }
.rune-identify-panel form { flex: 0 0 auto; margin: 0; }

.rune-amulet-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.rune-slot {
    display: grid;
    gap: 3px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 8px;
}

.rune-slot.occupied {
    border-color: rgba(215, 179, 106, .48);
    background: rgba(215, 179, 106, .045);
}

.rune-slot strong { overflow-wrap: anywhere; }
.rune-rule { color: var(--muted); font-size: 9px; margin: 8px 0 0; }

.rune-inventory-list { display: grid; gap: 5px; }

.rune-inventory-row {
    align-items: center;
    display: grid;
    grid-template-columns: minmax(150px, 1.1fr) minmax(260px, 1.4fr) minmax(135px, .8fr);
    gap: 10px;
    border-bottom: 1px solid var(--line);
    padding: 7px 3px;
}

.rune-inventory-row.is-equipped { background: rgba(215, 179, 106, .035); }
.rune-inventory-row > div:first-child { display: grid; gap: 2px; }
.rune-inventory-row > div:first-child small { color: var(--muted); font-size: 9px; }

.rune-inventory-row dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin: 0;
}

.rune-inventory-row dl div { min-width: 0; }
.rune-inventory-row dt { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.rune-inventory-row dd { font-weight: 700; margin: 2px 0 0; }
.rune-inventory-row .outer-stock { white-space: normal; }

@media (max-width: 700px) {
    .outer-realm-header {
        align-items: flex-start;
        padding: 13px 15px;
    }

    .outer-hub-groups,
    .outer-hub-links {
        grid-template-columns: 1fr;
    }

    .outer-offer-grid,
    .outer-craft-grid,
    .outer-rune-grid {
        grid-template-columns: 1fr;
    }

    .outer-form-grid {
        grid-template-columns: 1fr;
    }

    .outer-form-grid .choice-row {
        grid-column: auto;
    }

    .relic-ascension-summary {
        grid-template-columns: 1fr;
    }

    .relic-ascension-arrow {
        justify-self: center;
        transform: rotate(90deg);
    }

    .rune-shop-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rune-amulet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rune-identify-panel { align-items: stretch; flex-direction: column; }
    .rune-inventory-row { align-items: start; grid-template-columns: 1fr; }
    .rune-inventory-row .outer-rune-action { justify-content: flex-start; }
}

@media (max-width: 460px) {
    .outer-realm-header {
        display: grid;
    }

    .outer-realm-header .level-badge {
        justify-self: start;
    }

    .outer-offer-card,
    .outer-action-card {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .outer-offer-card form button,
    .outer-action-card form button {
        width: 100%;
    }
}

/* Awards Hall keeps the large legacy directory compact and readable. */
.awards-layout {
    align-items: start;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.55fr);
}

.awards-directory {
    display: grid;
    gap: 11px;
    padding: 11px 12px;
}

.awards-directory section {
    display: grid;
    gap: 5px;
}

.awards-directory h2 {
    color: var(--gold);
    font-size: 10px;
    letter-spacing: .12em;
    margin: 0;
    text-transform: uppercase;
}

.awards-directory section > div {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.awards-directory a {
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.2;
    padding: 5px 7px;
    text-decoration: none;
}

.awards-directory a:hover,
.awards-directory a.active {
    background: var(--cyan-soft);
    border-color: var(--cyan);
    color: var(--cyan);
}

.awards-ranking {
    min-width: 0;
    padding: 13px 15px;
}

.awards-ranking ol {
    gap: 0;
    list-style: none;
    padding: 0;
}

.awards-ranking li {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    min-height: 30px;
    padding: 4px 3px;
}

.awards-ranking li.current-player {
    background: rgba(98, 213, 209, .08);
    box-shadow: inset 2px 0 0 var(--cyan);
}

.awards-ranking li span {
    float: none;
}

.awards-ranking .award-place {
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.awards-ranking .award-score {
    color: var(--paper);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.awards-related {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

@media (max-width: 760px) {
    .awards-layout {
        grid-template-columns: 1fr;
    }
}
.hq-tabs {
    margin: 0 0 .65rem;
}

.hq-bag-grid {
    align-items: start;
}

.hq-relation-form {
    display: grid;
    grid-template-columns: minmax(9rem, .45fr) minmax(12rem, 1fr) auto;
    gap: .45rem;
    align-items: end;
    margin-bottom: .65rem;
}

.hq-relation-form label {
    grid-column: 1 / -1;
}

.relation-panel .profile-actions {
    flex-wrap: nowrap;
    margin: 0;
}

@media (max-width: 700px) {
    .hq-relation-form {
        grid-template-columns: 1fr;
    }
}
/* Compact forum controls retain the legacy density without sacrificing touch targets. */
.forum-tools,
.forum-topic-tools,
.forum-post-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
}

.forum-tools {
    margin-bottom: .65rem;
}

.forum-tools .inline-form {
    flex: 1 1 18rem;
}

.forum-tools input {
    min-width: 12rem;
}

/* Council Board directory: dense enough for the restored legacy board set. */
.forum-welcome {
    margin-bottom: .7rem;
}

.forum-directory-tools {
    align-items: center;
    display: flex;
    gap: .55rem;
    justify-content: space-between;
    margin-bottom: .7rem;
}

.forum-search-form {
    display: grid;
    flex: 1 1 34rem;
    gap: .4rem;
    grid-template-columns: minmax(12rem, 1fr) auto;
    margin: 0;
}

.forum-search-form input,
.forum-search-form button,
.forum-view-links {
    margin: 0;
}

.forum-view-links {
    flex: 0 0 auto;
}

.forum-directory-section {
    gap: .55rem;
    padding: 12px 14px;
}

.forum-directory-grid {
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.forum-directory-card {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: inherit;
    display: grid;
    gap: .15rem .65rem;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    padding: .62rem .72rem;
    text-decoration: none;
}

.forum-directory-card:hover,
.forum-directory-card:focus-visible {
    border-color: var(--gold);
    transform: translateY(-1px);
}

.forum-directory-card strong {
    font-family: inherit;
    font-size: 12px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.forum-directory-card small {
    color: var(--muted);
    font-size: 11px;
    grid-column: 1;
    line-height: 1.3;
}

.forum-directory-card > span {
    color: var(--cyan);
    font-size: 9px;
    font-weight: 800;
    grid-column: 2;
    grid-row: 1 / span 2;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.forum-private-section {
    border-color: rgba(215, 179, 106, .45);
}

.forum-private-card > span,
.forum-archive-card > span {
    color: var(--gold);
}

.forum-results {
    gap: .45rem;
    padding: 12px 14px;
}

.forum-topic-result {
    padding: .6rem .7rem;
}

@media (max-width: 760px) {
    .forum-directory-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .forum-search-form {
        flex: 0 0 auto;
        width: 100%;
    }

    .forum-view-links {
        order: 2;
    }
}

@media (max-width: 620px) {
    .forum-directory-grid {
        grid-template-columns: 1fr;
    }

    .forum-directory-card {
        padding: .58rem .65rem;
    }
}

.forum-topic-tools form,
.forum-post-actions form {
    margin: 0;
}

.forum-post-actions {
    margin-top: .55rem;
    padding-top: .45rem;
    border-top: 1px solid var(--line);
}

.forum-score {
    min-width: 2.5rem;
    color: var(--gold);
    font-weight: 700;
}

.forum-edit {
    position: relative;
}

.forum-edit[open] {
    flex-basis: 100%;
}

.forum-edit[open] form {
    margin-top: .5rem;
}

.market-navigation {
    display: grid;
    gap: 4px;
}

.market-navigation > .tab-strip {
    margin: 0;
}

.market-filter-tabs {
    flex-wrap: wrap;
    overflow: visible;
}

.market-filter-primary {
    margin-bottom: 0;
}

.tab-strip.market-resource-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 0;
    overflow: visible;
}

.market-resource-tabs > a {
    min-width: 0;
    width: 100%;
    text-align: center;
    white-space: normal;
}

.market-navigation .tab-strip > a {
    min-height: 24px;
    padding: 4px 7px;
}

.market-create,
.market-list {
    padding: 12px 14px;
}

.market-create > .eyebrow,
.market-list > .eyebrow {
    margin-bottom: 6px;
}

.market-create > h2,
.market-list > h2 {
    margin: 0 0 10px;
}

.market-create .stacked-form {
    gap: 9px;
    max-width: none;
}

.market-create .stacked-form label {
    margin: 0;
}

.market-create .stacked-form button {
    min-height: 30px;
    padding-block: 6px;
}

.market-create hr {
    margin: 13px 0;
}

.market-list .market-row {
    gap: 8px;
    padding: 7px 10px;
}

.market-list .market-row + .market-row {
    margin-top: 5px;
}

.market-list .market-row button {
    min-height: 30px;
    padding: 6px 9px;
}

@media (min-width: 901px) {
    .market-create .stacked-form :is(input:not([type="checkbox"]), select) {
        height: 36px;
        margin-top: 3px;
    }

    .market-list .market-review-controls input {
        height: 36px;
    }
}

.market-tab-count {
    color: var(--paper);
    font-size: 9px;
    font-weight: 600;
}

@media (max-width: 620px) {
    .trade-exchange-hero {
        border-radius: 12px;
        padding: 10px 12px;
    }

    .trade-exchange-hero h1 {
        font-size: 17px;
    }

    .trade-exchange-hero > div > p:last-child {
        font-size: 11px;
        line-height: 1.45;
        margin: 5px 0 0;
    }

    .market-navigation {
        gap: 3px;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .market-filter-primary {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tab-strip.market-resource-tabs {
        gap: 4px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-resource-tabs > a {
        font-size: 9px;
        min-height: 30px;
        overflow-wrap: anywhere;
        padding: 4px 6px;
    }

    .market-filter-primary > a {
        font-size: 9px;
        min-width: 0;
        padding-inline: 4px;
        width: 100%;
    }

    .market-layout {
        gap: 8px;
    }

    .market-create,
    .market-list {
        border-radius: 10px;
        padding: 9px 10px;
    }

    .market-create > h2,
    .market-list > h2 {
        font-size: 16px;
        margin-bottom: 7px;
    }

    .market-create > .eyebrow,
    .market-list > .eyebrow {
        font-size: 8px;
        margin-bottom: 4px;
    }

    .market-create .stacked-form {
        gap: 6px;
    }

    .market-create .stacked-form label {
        font-size: 11px;
        gap: 3px;
    }

    .market-create .stacked-form :is(input:not([type="checkbox"]), select) {
        font-size: var(--mobile-control-font-size) !important;
        height: 40px;
        margin-top: 2px;
        padding-block: 6px;
    }

    .market-create .stacked-form button {
        font-size: 10px;
        min-height: 30px;
        padding: 5px 8px;
    }

    .market-create hr {
        margin: 10px 0;
    }
}

.market-row .inline-form {
    display: grid;
    grid-template-columns: minmax(4.5rem, 6rem) auto;
    gap: .35rem;
    align-items: center;
}
.market-row > .market-listing-summary {
    display: flex;
    flex: 1 1 16rem;
    flex-direction: row;
    align-items: baseline;
    gap: .35rem;
    white-space: nowrap;
}
.market-listing-summary > * {
    flex: 0 0 auto;
    font-size: 10px;
}
.market-listing-summary > :first-child,
.market-listing-summary > a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.market-listing-summary > :first-child { flex: 0 1 auto; }
.market-listing-summary > a {
    flex: 0 1 auto;
    max-width: 7rem;
}
.market-listing-separator { color: #667679; }
.market-listing-summary .market-listing-price {
    color: var(--gold);
    font-weight: 800;
}
.market-purchase { flex: 0 1 auto; }

@media (max-width: 900px) {
    .market-list .market-row {
        justify-content: flex-start;
    }

    .market-row > .market-listing-summary {
        flex: 0 1 auto;
        width: 100%;
    }
}

.market-confirmation {
    background: rgba(215, 179, 106, .09);
    border: 1px solid #d7b36a;
    border-radius: 8px;
    color: #d7b36a;
    min-width: min(30rem, 100%);
    padding: 8px 10px;
}
.market-confirmation[hidden], .market-review-controls[hidden] { display: none; }
.market-confirmation p { margin: 0 0 7px; }
.market-confirmation .action-row { justify-content: flex-end; }
.market-confirmation form { margin: 0; }
/* Staff administration */
.staff-heading { min-height: 0; padding-block: 18px; }
.staff-heading h1 { margin: 2px 0; }
.staff-tabs, .staff-report-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 12px; }
.staff-tabs a, .staff-report-tabs a { padding: 6px 9px; }
.staff-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px; margin-bottom: 10px; }
.staff-metrics article { display: grid; gap: 2px; padding: 10px 12px; }
.staff-metrics strong { color: var(--gold, #d7b36a); font-size: 18px; }
.staff-metrics span, .staff-facts { color: var(--muted, #aab8be); }
.compact-panel { padding: 12px 14px; margin-bottom: 10px; }
.staff-link-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.staff-module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.staff-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.staff-form { display: grid; gap: 7px; }
.staff-form + .staff-form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border, #2a3a42); }
.staff-inline { grid-template-columns: minmax(120px, auto) minmax(130px, 1fr) auto; align-items: end; }
.staff-form input, .staff-form select, .staff-form textarea, .staff-table input, .staff-table select, .staff-table textarea { box-sizing: border-box; min-width: 0; width: 100%; }
.invasion-lab-intro { align-items: end; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(220px, .34fr); }
.invasion-lab-intro h2, .invasion-lab-sample h2 { margin: 2px 0 5px; }
.invasion-lab-intro p:last-child { color: var(--muted); margin-bottom: 0; }
.invasion-lab-profile { display: block; }
.invasion-lab-controls, .invasion-lab-field-grid { display: grid; gap: 7px; }
.invasion-lab-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.invasion-lab-field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.invasion-lab-controls label, .invasion-lab-field-grid label { display: grid; gap: 3px; min-width: 0; }
.invasion-lab-controls small, .invasion-lab-options > small { color: var(--muted); }
.invasion-lab-sides { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.invasion-lab-side { border-top: 2px solid var(--line); }
.invasion-lab-side.is-attacker { border-top-color: var(--danger); }
.invasion-lab-side.is-defender { border-top-color: var(--aqua); }
.invasion-lab-options { border-top: 1px solid var(--line); margin-top: 9px; padding-top: 7px; }
.invasion-lab-options summary { color: var(--gold); cursor: pointer; font-weight: 700; margin-bottom: 7px; }
.invasion-lab-submit { align-items: center; display: flex; gap: 10px; justify-content: flex-end; margin: 10px 0; }
.invasion-lab-submit span { color: var(--muted); }
.invasion-lab-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.invasion-lab-metrics article { border: 1px solid var(--line); border-radius: 6px; display: grid; gap: 2px; padding: 7px; }
.invasion-lab-damage, .invasion-lab-resources { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
.invasion-lab-damage article, .invasion-lab-resources > span { border: 1px solid var(--line); border-radius: 6px; display: flex; flex-wrap: wrap; gap: 5px 14px; padding: 7px; }
.invasion-lab-damage strong, .invasion-lab-resources strong { width: 100%; }
.invasion-lab-damage span, .invasion-lab-resources > span { color: var(--muted); }
.invasion-lab-sample { margin-top: 10px; }
.invasion-lab-sample-head { align-items: start; display: flex; gap: 15px; justify-content: space-between; }
.invasion-lab-sample-head > div:last-child { display: grid; gap: 2px; text-align: right; }
.invasion-lab-replay { margin-top: 9px; }
.invasion-lab-report { margin-top: 10px; }
.invasion-lab-report-head { align-items: end; display: flex; gap: 18px; justify-content: space-between; }
.invasion-lab-report-head h2 { margin: 2px 0 0; }
.invasion-lab-report-head > p { color: var(--muted); margin: 0; max-width: 520px; text-align: right; }
.invasion-lab-combatants { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 9px; }
.invasion-lab-combatants article { border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 6px; display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px; }
.invasion-lab-combatants article.is-attacker { border-left-color: var(--danger); }
.invasion-lab-combatants article.is-defender { border-left-color: var(--aqua); }
.invasion-lab-combatants strong { width: 100%; }
.invasion-lab-combatants span { color: var(--muted); }
.invasion-lab-rounds { display: grid; gap: 6px; margin-top: 10px; }
.invasion-lab-round { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.invasion-lab-round > summary { align-items: center; background: var(--surface); cursor: pointer; display: flex; gap: 12px; justify-content: space-between; padding: 8px 10px; }
.invasion-lab-round > summary span { color: var(--muted); font-size: 10px; }
.invasion-lab-event-list { display: grid; }
.invasion-lab-event { border-top: 1px solid var(--line); display: grid; gap: 3px 9px; grid-template-columns: 66px minmax(0, 1fr); padding: 6px 10px; }
.invasion-lab-event.is-attacker { border-left: 2px solid var(--danger); }
.invasion-lab-event.is-defender { border-left: 2px solid var(--aqua); }
.invasion-lab-event-type { color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.invasion-lab-event p { margin: 0; }
.invasion-lab-event ul { color: var(--muted); grid-column: 2; margin: 2px 0 0; padding-left: 17px; }
.invasion-lab-event li.is-defeated { color: var(--danger); }
@media (max-width: 920px) {
    .invasion-lab-sides { grid-template-columns: 1fr; }
    .invasion-lab-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .invasion-lab-intro, .invasion-lab-controls { grid-template-columns: 1fr; }
    .invasion-lab-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .invasion-lab-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .invasion-lab-damage, .invasion-lab-resources { grid-template-columns: 1fr; }
    .invasion-lab-sample-head { display: grid; }
    .invasion-lab-sample-head > div:last-child { text-align: left; }
    .invasion-lab-report-head { align-items: start; display: grid; }
    .invasion-lab-report-head > p { text-align: left; }
    .invasion-lab-combatants { grid-template-columns: 1fr; }
    .invasion-lab-round > summary { align-items: flex-start; flex-direction: column; gap: 2px; }
    .invasion-lab-event { grid-template-columns: 1fr; }
    .invasion-lab-event ul { grid-column: 1; }
}
.staff-table-panel { padding: 10px 12px; margin-top: 10px; overflow: hidden; }
.staff-table-scroll { overflow: auto; max-height: 70vh; }
.staff-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.staff-table th, .staff-table td { padding: 5px 7px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border, #2a3a42); overflow-wrap: anywhere; }
.staff-table th { position: sticky; top: 0; background: var(--panel, #10171f); color: var(--muted, #aab8be); z-index: 1; }
.staff-table small { display: block; color: var(--muted, #aab8be); }
.staff-table code { white-space: pre-wrap; font-size: 10px; }
.staff-table form { display: flex; gap: 4px; min-width: 170px; }
.staff-table button { white-space: nowrap; overflow-wrap: normal; }
.staff-table input.staff-quantity-input { flex: 0 0 64px; width: 64px; }
.mail-preview { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-deep); white-space: pre-wrap; }
.mail-preview p { margin: 4px 0 0; }
.activity-mail-row { cursor: default; }
@media (max-width: 760px) { .staff-module-grid { grid-template-columns: 1fr; } .staff-inline { grid-template-columns: 1fr; } }

/* Keep late-defined feature grids subordinate to the shared phone layout. */
@media (max-width: 420px) {
    .compact-card-grid,
    .outer-rune-grid,
    .rune-shop-summary,
    .rune-amulet-grid,
    .staff-module-grid {
        grid-template-columns: 1fr;
    }
}

/* The global action-button treatment must not reveal mobile-only controls on desktop. */
@media (min-width: 901px) {
    button.mobile-nav-toggle,
    button.mobile-nav-backdrop,
    .mobile-navigation-heading {
        display: none;
    }
}

/* Directional edge shadows make horizontal overflow visible without permanent labels. */
.inline-scroll-shadow {
    --inline-shadow-left: transparent;
    --inline-shadow-right: transparent;
    box-shadow:
        inset 15px 0 12px -14px var(--inline-shadow-left),
        inset -15px 0 12px -14px var(--inline-shadow-right);
}

.inline-scroll-shadow.can-scroll-left {
    --inline-shadow-left: rgba(98, 213, 209, 0.9);
}

.inline-scroll-shadow.can-scroll-right {
    --inline-shadow-right: rgba(98, 213, 209, 0.9);
}

/* Shared compact navigation buttons replace loose inline page links. */
:is(.section-tabs, .tab-strip, .content-tabs, .tab-bar) {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 7px 0 10px;
}

:is(.section-tabs, .tab-strip, .content-tabs, .tab-bar, .subnav) > a {
    align-items: center;
    background: rgba(98, 213, 209, 0.055);
    border: 1px solid rgba(98, 213, 209, 0.3);
    border-radius: 6px;
    color: var(--cyan);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 750;
    justify-content: center;
    line-height: 1.15;
    min-height: 27px;
    padding: 5px 8px;
    text-decoration: none;
}

:is(.section-tabs, .tab-strip, .content-tabs, .tab-bar, .subnav) > a:hover,
:is(.section-tabs, .tab-strip, .content-tabs, .tab-bar, .subnav) > a.active,
:is(.section-tabs, .tab-strip, .content-tabs, .tab-bar, .subnav) > a[aria-current="page"],
:is(.section-tabs, .tab-strip, .content-tabs, .tab-bar, .subnav) > a.is-active {
    background: var(--cyan-soft);
    border-color: var(--cyan);
    color: #9af0ec;
}

@media (max-width: 900px) {
    /* Fixed, blurred layers are costly to composite while Mobile Safari changes
       its browser chrome. The page background still supplies the same palette. */
    body::before {
        position: absolute;
    }

    .ambient {
        display: none;
    }

    .resource-rail > .community-card {
        display: none;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        /* A real 16px+ rendered size prevents iOS Safari focus zoom. Do not use
           CSS zoom here: Safari applies it after calculating the font size. */
        font-size: var(--mobile-control-font-size) !important;
        touch-action: manipulation;
        width: 100%;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select {
        height: 44px;
    }

    textarea {
        min-height: 96px;
    }

    button:not(.game-nav-link),
    a.button,
    a.button-link,
    a.rail-action,
    .action-button,
    .primary-button,
    .secondary-button {
        font-size: clamp(10px, 2.9vw, 12px);
        min-height: var(--mobile-action-height);
        overflow-wrap: normal;
        padding: 6px 8px;
        white-space: nowrap;
        width: auto;
        max-width: 100%;
    }

    .market-row > form,
    .market-row button {
        align-self: flex-start;
        width: auto;
    }

    /* Skip below-the-fold paint work on long game pages. Unsupported browsers
       simply ignore these progressive rendering hints. */
    .game-main > :is(.panel, .compact-panel, .outer-panel) {
        contain-intrinsic-size: auto 220px;
        content-visibility: auto;
    }

    .inline-scroll-shadow {
        scrollbar-width: none;
    }

    .inline-scroll-shadow::-webkit-scrollbar {
        display: none;
        height: 0;
        width: 0;
    }

    :is(.section-tabs, .tab-strip, .content-tabs, .tab-bar, .subnav) {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding: 5px 2px;
    }
}

/* Quest pages */
.quest-welcome { margin-bottom: 10px; }
.quest-overview,
.quest-current,
.quest-catalogue,
.quest-dormant { margin-bottom: 10px; }
.quest-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.quest-summary > div {
    display: grid;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(255, 255, 255, .018);
    padding: 9px 11px;
}
.quest-summary span,
.quest-summary small,
.quest-requirement,
.quest-progress-label span { color: var(--muted); }
.quest-summary span,
.quest-card-footer small { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.quest-summary strong { color: var(--gold); font-size: 13px; }
.quest-notice,
.quest-gate,
.quest-current-heading,
.quest-card-heading,
.quest-card-footer,
.quest-progress-label,
.quest-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.quest-notice { margin-top: 8px; border: 1px solid rgba(215, 179, 106, .38); border-radius: 9px; background: var(--gold-soft); padding: 8px 10px; }
.quest-notice form,
.quest-card form,
.quest-current form,
.quest-actions form { margin: 0; }
.quest-current h2,
.quest-card h3 { margin: 0; }
.quest-current > p { margin: 6px 0; }
.quest-progress { height: 8px; overflow: hidden; margin: 10px 0 5px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .05); }
.quest-progress span { display: block; width: var(--progress-value, 0%); height: 100%; background: linear-gradient(90deg, var(--cyan), var(--gold)); }
.quest-progress-label { margin-bottom: 9px; }

.relic-protection-card {
    display: grid;
    gap: 8px;
    padding-block: 14px;
}

/* CSP-safe progress widths. Values are clamped and rounded by progress_class(). */
.progress-percent-0 { --progress-value: 0%; }
.progress-percent-1 { --progress-value: 1%; }
.progress-percent-2 { --progress-value: 2%; }
.progress-percent-3 { --progress-value: 3%; }
.progress-percent-4 { --progress-value: 4%; }
.progress-percent-5 { --progress-value: 5%; }
.progress-percent-6 { --progress-value: 6%; }
.progress-percent-7 { --progress-value: 7%; }
.progress-percent-8 { --progress-value: 8%; }
.progress-percent-9 { --progress-value: 9%; }
.progress-percent-10 { --progress-value: 10%; }
.progress-percent-11 { --progress-value: 11%; }
.progress-percent-12 { --progress-value: 12%; }
.progress-percent-13 { --progress-value: 13%; }
.progress-percent-14 { --progress-value: 14%; }
.progress-percent-15 { --progress-value: 15%; }
.progress-percent-16 { --progress-value: 16%; }
.progress-percent-17 { --progress-value: 17%; }
.progress-percent-18 { --progress-value: 18%; }
.progress-percent-19 { --progress-value: 19%; }
.progress-percent-20 { --progress-value: 20%; }
.progress-percent-21 { --progress-value: 21%; }
.progress-percent-22 { --progress-value: 22%; }
.progress-percent-23 { --progress-value: 23%; }
.progress-percent-24 { --progress-value: 24%; }
.progress-percent-25 { --progress-value: 25%; }
.progress-percent-26 { --progress-value: 26%; }
.progress-percent-27 { --progress-value: 27%; }
.progress-percent-28 { --progress-value: 28%; }
.progress-percent-29 { --progress-value: 29%; }
.progress-percent-30 { --progress-value: 30%; }
.progress-percent-31 { --progress-value: 31%; }
.progress-percent-32 { --progress-value: 32%; }
.progress-percent-33 { --progress-value: 33%; }
.progress-percent-34 { --progress-value: 34%; }
.progress-percent-35 { --progress-value: 35%; }
.progress-percent-36 { --progress-value: 36%; }
.progress-percent-37 { --progress-value: 37%; }
.progress-percent-38 { --progress-value: 38%; }
.progress-percent-39 { --progress-value: 39%; }
.progress-percent-40 { --progress-value: 40%; }
.progress-percent-41 { --progress-value: 41%; }
.progress-percent-42 { --progress-value: 42%; }
.progress-percent-43 { --progress-value: 43%; }
.progress-percent-44 { --progress-value: 44%; }
.progress-percent-45 { --progress-value: 45%; }
.progress-percent-46 { --progress-value: 46%; }
.progress-percent-47 { --progress-value: 47%; }
.progress-percent-48 { --progress-value: 48%; }
.progress-percent-49 { --progress-value: 49%; }
.progress-percent-50 { --progress-value: 50%; }
.progress-percent-51 { --progress-value: 51%; }
.progress-percent-52 { --progress-value: 52%; }
.progress-percent-53 { --progress-value: 53%; }
.progress-percent-54 { --progress-value: 54%; }
.progress-percent-55 { --progress-value: 55%; }
.progress-percent-56 { --progress-value: 56%; }
.progress-percent-57 { --progress-value: 57%; }
.progress-percent-58 { --progress-value: 58%; }
.progress-percent-59 { --progress-value: 59%; }
.progress-percent-60 { --progress-value: 60%; }
.progress-percent-61 { --progress-value: 61%; }
.progress-percent-62 { --progress-value: 62%; }
.progress-percent-63 { --progress-value: 63%; }
.progress-percent-64 { --progress-value: 64%; }
.progress-percent-65 { --progress-value: 65%; }
.progress-percent-66 { --progress-value: 66%; }
.progress-percent-67 { --progress-value: 67%; }
.progress-percent-68 { --progress-value: 68%; }
.progress-percent-69 { --progress-value: 69%; }
.progress-percent-70 { --progress-value: 70%; }
.progress-percent-71 { --progress-value: 71%; }
.progress-percent-72 { --progress-value: 72%; }
.progress-percent-73 { --progress-value: 73%; }
.progress-percent-74 { --progress-value: 74%; }
.progress-percent-75 { --progress-value: 75%; }
.progress-percent-76 { --progress-value: 76%; }
.progress-percent-77 { --progress-value: 77%; }
.progress-percent-78 { --progress-value: 78%; }
.progress-percent-79 { --progress-value: 79%; }
.progress-percent-80 { --progress-value: 80%; }
.progress-percent-81 { --progress-value: 81%; }
.progress-percent-82 { --progress-value: 82%; }
.progress-percent-83 { --progress-value: 83%; }
.progress-percent-84 { --progress-value: 84%; }
.progress-percent-85 { --progress-value: 85%; }
.progress-percent-86 { --progress-value: 86%; }
.progress-percent-87 { --progress-value: 87%; }
.progress-percent-88 { --progress-value: 88%; }
.progress-percent-89 { --progress-value: 89%; }
.progress-percent-90 { --progress-value: 90%; }
.progress-percent-91 { --progress-value: 91%; }
.progress-percent-92 { --progress-value: 92%; }
.progress-percent-93 { --progress-value: 93%; }
.progress-percent-94 { --progress-value: 94%; }
.progress-percent-95 { --progress-value: 95%; }
.progress-percent-96 { --progress-value: 96%; }
.progress-percent-97 { --progress-value: 97%; }
.progress-percent-98 { --progress-value: 98%; }
.progress-percent-99 { --progress-value: 99%; }
.progress-percent-100 { --progress-value: 100%; }

.relic-protection-heading,
.relic-protection-copy {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
}

.relic-protection-heading .eyebrow { margin-bottom: 4px; }
.relic-protection-heading > span,
.relic-protection-copy small { color: var(--muted); }
.relic-protection-copy small { text-align: right; }

@media (max-width: 600px) {
    .relic-protection-copy { align-items: start; flex-direction: column; gap: 3px; }
    .relic-protection-copy small { text-align: left; }
}
.quest-actions { justify-content: flex-start; flex-wrap: wrap; }
.quest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quest-card { display: grid; align-content: start; gap: 7px; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .018); padding: 11px 12px; }
.quest-card--active { border-color: rgba(98, 213, 209, .48); }
.quest-card--done { border-color: rgba(94, 190, 124, .36); }
.quest-card--dormant { opacity: .68; }
.quest-card h3 { font-size: 13px; }
.quest-card p { min-height: 2.7em; margin: 0; color: var(--muted); line-height: 1.45; }
.quest-card-footer { align-self: end; border-top: 1px solid var(--line); padding-top: 7px; }
.quest-card-footer > span { display: grid; gap: 1px; }
.quest-card-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.quest-card-details > span { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; }
.quest-card-details small { color: var(--muted); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.quest-card-details strong { color: var(--text); line-height: 1.35; }
.quest-status { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); padding: 4px 7px; font-size: 8px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.quest-status--active { border-color: rgba(98, 213, 209, .4); color: var(--cyan); }
.quest-status--done { border-color: rgba(94, 190, 124, .4); color: #7cd99a; }
.quest-dormant summary { cursor: pointer; color: var(--gold); font-weight: 750; }
.quest-dormant > p { color: var(--muted); }

@media (max-width: 700px) {
    .quest-summary,
    .quest-grid { grid-template-columns: 1fr; }
    .quest-gate,
    .quest-card-footer { align-items: flex-start; }
    .quest-card-details { grid-template-columns: 1fr; }
}
/* Numeric player-status temperature scale. Donor presentation remains a separate concern. */
.player-name {
    color: var(--player-name-colour, #94a1a5) !important;
    font-weight: 700;
    text-decoration-color: color-mix(in srgb, var(--player-name-colour) 55%, transparent);
}

.player-name-status-0 { --player-name-colour: #94a1a5; }
.player-name-status-1 { --player-name-colour: #70b8ff; }
.player-name-status-2 { --player-name-colour: #9e9cff; }
.player-name-status-3 { --player-name-colour: #dfb86a; }
.player-name-status-4 { --player-name-colour: #ff985c; }
.player-name-status-5 { --player-name-colour: #ff6464; }

/* Patron palettes are earned through cumulative credited Patron time. */
.player-name-patron-colour-verdant { --player-name-colour: #76e6a8; }
.player-name-patron-colour-emerald { --player-name-colour: #4fd19b; }
.player-name-patron-colour-jade { --player-name-colour: #65c7a0; }
.player-name-patron-colour-fern { --player-name-colour: #83cc8f; }
.player-name-patron-colour-clover { --player-name-colour: #59c878; }
.player-name-patron-colour-meadow { --player-name-colour: #9bd58b; }
.player-name-patron-colour-mint { --player-name-colour: #9ce8c3; }
.player-name-patron-colour-lime { --player-name-colour: #b9df73; }
.player-name-patron-colour-moss { --player-name-colour: #8fbd78; }
.player-name-patron-colour-pistachio { --player-name-colour: #b8d99a; }
.player-name-patron-colour-sage { --player-name-colour: #a6c7a2; }
.player-name-patron-colour-spring { --player-name-colour: #a8e47c; }
.player-name-patron-colour-aqua { --player-name-colour: #68d8d1; }
.player-name-patron-colour-turquoise { --player-name-colour: #4fc4bc; }
.player-name-patron-colour-glacier { --player-name-colour: #8ddbd4; }
.player-name-patron-colour-lagoon { --player-name-colour: #50c9ce; }
.player-name-patron-colour-arctic { --player-name-colour: #91e2e8; }
.player-name-patron-colour-peacock { --player-name-colour: #55bfc8; }
.player-name-patron-colour-orchid { --player-name-colour: #d28ed8; }
.player-name-patron-colour-amethyst { --player-name-colour: #bf8bd8; }
.player-name-patron-colour-mauve { --player-name-colour: #cf9fc9; }
.player-name-patron-colour-lilac { --player-name-colour: #c8a2e8; }
.player-name-patron-colour-lavender { --player-name-colour: #b9a8e8; }
.player-name-patron-colour-wisteria { --player-name-colour: #ad8fd5; }
.player-name-patron-colour-prestige-rose { --player-name-colour: #d77fa6; }
.player-name-patron-colour-prestige-plum { --player-name-colour: #bd79d6; }
.player-name-patron-colour-prestige-aqua { --player-name-colour: #63d3bd; }
.player-name-patron-colour-prestige-sky { --player-name-colour: #72c2df; }
.player-name-patron-colour-prestige-citrine { --player-name-colour: #ced867; }
.player-name-patron-colour-prestige-ember { --player-name-colour: #e18491; }
.player-name-patron-colour-rainbow-spectrum,
.player-name-patron-colour-rainbow-aurora,
.player-name-patron-colour-rainbow-prism,
.player-name-patron-colour-rainbow-carnival,
.player-name-patron-colour-rainbow-horizon,
.player-name-patron-colour-rainbow-kaleidoscope {
    color: var(--player-name-colour) !important;
}
.player-name-patron-colour-rainbow-spectrum > .player-name-text,
.player-name-patron-colour-rainbow-aurora > .player-name-text,
.player-name-patron-colour-rainbow-prism > .player-name-text,
.player-name-patron-colour-rainbow-carnival > .player-name-text,
.player-name-patron-colour-rainbow-horizon > .player-name-text,
.player-name-patron-colour-rainbow-kaleidoscope > .player-name-text {
    background-image: var(--player-name-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent !important;
    display: inline-block;
    background-repeat: no-repeat;
    -webkit-text-fill-color: transparent;
}
.player-name-patron-colour-rainbow-spectrum { --player-name-colour: #78dda0; --player-name-gradient: linear-gradient(90deg,#ff5f6d 0%,#ffb35c 17%,#f4e66a 33%,#5fe09b 50%,#55c8f2 67%,#8b7cf0 83%,#dc6bd8 100%); }
.player-name-patron-colour-rainbow-aurora { --player-name-colour: #65c7ef; --player-name-gradient: linear-gradient(110deg,#53f0c5 0%,#48c8ef 28%,#7779ee 52%,#d56be6 76%,#ff81ae 100%); }
.player-name-patron-colour-rainbow-prism { --player-name-colour: #f1df69; --player-name-gradient: linear-gradient(105deg,#ff6678 0 14%,#ffaf55 14% 28%,#f4df59 28% 42%,#62da91 42% 57%,#55bfe8 57% 71%,#8a78ed 71% 85%,#d867d3 85% 100%); }
.player-name-patron-colour-rainbow-carnival { --player-name-colour: #f5a65f; --player-name-gradient: linear-gradient(90deg,#ff4f9a 0%,#ffdc5e 20%,#42d8cf 40%,#8b68f1 60%,#ff7a55 80%,#ff4f9a 100%); }
.player-name-patron-colour-rainbow-horizon { --player-name-colour: #cf83df; --player-name-gradient: linear-gradient(90deg,#ff725f 0%,#ffad5e 28%,#f6d77a 48%,#7bcfd0 72%,#718ce7 100%); }
.player-name-patron-colour-rainbow-kaleidoscope { --player-name-colour: #dc7cdb; --player-name-gradient: linear-gradient(90deg,#d95dd0 0%,#7469ed 16%,#4fc8df 32%,#66dd94 50%,#4fc8df 68%,#7469ed 84%,#d95dd0 100%); }
.player-name-patron-colour-silver { --player-name-colour: #c9ced8; }
.player-name-patron-colour-platinum { --player-name-colour: #e7e9ee; }
.player-name-patron-colour-dusk { --player-name-colour: #b8b7c8; }
.player-name-patron-colour-pewter { --player-name-colour: #aeb6c1; }
.player-name-patron-colour-titanium { --player-name-colour: #d4d9e1; }
.player-name-patron-colour-mercury { --player-name-colour: #bec5d0; }
.player-name-patron-colour-gift-sea { --player-name-colour: #d18a7a; }
.player-name-patron-colour-gift-surf { --player-name-colour: #c58b69; }
.player-name-patron-colour-gift-tide { --player-name-colour: #c99a7a; }
.player-name-patron-colour-gift-cove { --player-name-colour: #d0aa86; }
.player-name-patron-colour-gift-reef { --player-name-colour: #bd7f72; }
.player-name-patron-colour-gift-harbour { --player-name-colour: #b98e7c; }
.player-name-patron-active { --patron-badge-image: url('/images/realm-patron-badge-gold.png'); }
.player-name-patron-supporter { --patron-badge-image: url('/images/realm-patron-badge-silver.png'); }
.player-name-patron-gifted { --patron-badge-image: url('/images/realm-patron-badge-bronze.png'); }
.player-name-patron-active::before,
.player-name-patron-supporter::before,
.player-name-patron-gifted::before {
    content: '';
    display: inline-block;
    width: .95em;
    height: .95em;
    margin-right: .28em;
    background: var(--patron-badge-image) center/contain no-repeat;
    vertical-align: -.12em;
}
.player-name-patron-active.patron-badge-enhanced::before,
.player-name-patron-supporter.patron-badge-enhanced::before,
.player-name-patron-gifted.patron-badge-enhanced::before { display: none; }
.patron-name-badge { background: var(--patron-badge-image) center/contain no-repeat; display: inline-block; flex: 0 0 auto; width: .95em; height: .95em; margin-right: .28em; vertical-align: -.12em; }
.patron-profile-badge { display: inline-flex; align-items: center; gap: 5px; width: fit-content; color: #76e6a8; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.patron-profile-badge::before { background: var(--patron-profile-badge-image) center/contain no-repeat; content: ''; display: inline-block; flex: 0 0 auto; height: 18px; width: 18px; }
.patron-profile-badge-active { --patron-profile-badge-image: url('/images/realm-patron-badge-gold.png'); color: #d7b36a; }
.patron-profile-badge-supporter { --patron-profile-badge-image: url('/images/realm-patron-badge-silver.png'); color: #cbd0d8; }
.patron-profile-badge-gifted { --patron-profile-badge-image: url('/images/realm-patron-badge-bronze.png'); color: #b9794f; }
.patron-combat-benefit { display: grid; gap: 3px; margin-top: 9px; border: 1px solid rgba(118,230,168,.35); border-radius: 8px; background: rgba(118,230,168,.07); padding: 8px 10px; }
.patron-combat-benefit strong { color: #76e6a8; }
.patron-combat-benefit span { display: block; color: var(--paper); font-size: 10px; }
.patron-colour-panel { margin-bottom: 12px; }
.patron-colour-form { display: grid; gap: 10px; }
.patron-colour-palette { border: 0; margin: 0; min-width: 0; padding: 0; }
.patron-colour-palette legend { color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .12em; margin-bottom: 5px; padding: 0; text-transform: uppercase; }
.patron-colour-options { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.patron-colour-options label { background: #0c131b; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; display: grid; gap: 2px; min-width: 0; padding: 7px 10px; position: relative; }
.patron-colour-options label:has(input:checked) { border-color: var(--patron-choice-colour); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--patron-choice-colour) 45%, transparent); }
.patron-colour-options input { height: 1px; opacity: 0; pointer-events: none; position: absolute; width: 1px; }
.patron-colour-options label:focus-within { outline: 2px solid var(--patron-choice-colour); outline-offset: 2px; }
.patron-colour-options strong, .patron-colour-options small { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .patron-colour-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Player guide */
.guide-welcome,
.guide-article-header { margin-bottom: 12px; }
.guide-search { display: grid; gap: 7px; margin-bottom: 10px; padding: 12px 14px; }
.guide-search > label { color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.guide-search-row { display: flex; gap: 6px; min-width: 0; }
.guide-search-row input { flex: 1 1 420px; min-width: 0; }
.guide-search-row button,
.guide-search-row .button-link { flex: 0 0 auto; }
.guide-search-hint { margin: 0; color: var(--muted); font-size: 10px; }
.guide-featured { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.guide-feature-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 12px; text-decoration: none; }
.guide-feature-card:hover { border-color: var(--cyan); }
.guide-feature-card > span:last-child { display: grid; gap: 3px; min-width: 0; }
.guide-feature-card strong { color: var(--paper); font-family: var(--serif); font-size: 15px; }
.guide-feature-card small { color: var(--muted); line-height: 1.4; }
.guide-directory { display: grid; gap: 9px; }
.guide-category { padding: 12px 13px; }
.guide-category > .eyebrow { margin-bottom: 8px; }
.guide-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.guide-card { display: grid; align-content: start; gap: 4px; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.018); padding: 9px 10px; text-decoration: none; }
.guide-card:hover { background: var(--cyan-soft); border-color: var(--cyan); }
.guide-card strong { color: var(--paper); font-size: 12px; }
.guide-card span { color: var(--muted); font-size: 10px; line-height: 1.45; }
.guide-card small { align-self: end; color: var(--cyan); font-size: 9px; font-weight: 800; letter-spacing: .06em; padding-top: 3px; text-transform: uppercase; }
.guide-empty { padding: 18px; }
.guide-live-empty { padding: 16px; }
.guide-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 7px; color: var(--muted); font-size: 10px; }
.guide-breadcrumb a { color: var(--cyan); }
.guide-article-header { align-items: center; }
.guide-live-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-bottom: 10px; overflow: hidden; padding: 0; }
.guide-live-times > div { display: grid; gap: 4px; padding: 10px 12px; background: rgba(255,255,255,.018); }
.guide-live-times span { color: var(--muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.guide-live-times strong { display: grid; gap: 2px; color: var(--paper); }
.guide-live-times small { color: var(--gold); font-size: 9px; }
.guide-article-layout { display: grid; grid-template-columns: minmax(155px, 210px) minmax(0, 1fr); gap: 9px; align-items: start; }
.guide-contents { position: sticky; top: 8px; padding: 11px; }
.guide-contents nav { display: grid; gap: 1px; }
.guide-contents a { border-left: 2px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.3; padding: 5px 7px; text-decoration: none; text-transform: capitalize; }
.guide-contents a:hover { border-color: var(--cyan); color: var(--cyan); }
.guide-article { padding: 5px 16px; }
.guide-article section { scroll-margin-top: 10px; padding: 13px 0; }
.guide-article section + section { border-top: 1px solid var(--line); }
.guide-article h2 { margin: 0 0 5px; color: var(--paper); font-size: 15px; text-transform: capitalize; }
.guide-article p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.guide-article ul { display: grid; gap: 4px; margin: 8px 0 0; padding-left: 19px; }
.guide-article li { color: var(--text); font-size: 11px; line-height: 1.5; padding-left: 2px; }
.guide-note { margin-top: 8px !important; border-left: 2px solid var(--gold); background: var(--gold-soft); color: var(--paper) !important; padding: 7px 9px; }
.guide-article-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.guide-related { margin-top: 10px; padding: 11px 13px; }
.guide-related h2 { margin: 3px 0 9px; color: var(--paper); font-size: 14px; text-transform: capitalize; }
.guide-related-buttons { display: flex; flex-wrap: wrap; gap: 5px; }

@media (max-width: 900px) {
    .guide-featured,
    .guide-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .guide-search-row { flex-wrap: wrap; }
    .guide-search-row input { flex-basis: 100%; }
    .guide-featured,
    .guide-card-grid,
    .guide-live-times { grid-template-columns: 1fr; }
    .guide-article-layout { grid-template-columns: 1fr; }
    .guide-contents { position: static; }
    .guide-contents nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .guide-article { padding-inline: 12px; }
}

/* One compact, predictable welcome header across every game page. */
.game-welcome .eyebrow { margin-bottom: 7px; }
.game-welcome h1 { margin: 0; }
.game-welcome p:last-child { margin: 7px 0 0; line-height: 1.45; }

@media (min-width: 701px) {
    .game-welcome {
        align-items: flex-start;
        min-height: 120px;
        padding: 14px 24px;
    }
}

@media (max-width: 700px) {
    .game-welcome {
        min-height: 0;
        padding: 11px 13px;
    }
}

/* Augment Forge */
.augment-tabs { margin-bottom: 8px; }
.augment-resource-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 8px;
    overflow: hidden;
    padding: 0;
}
.augment-resource-strip > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, .018);
}
.augment-resource-strip span,
.augment-ring-group > header span,
.augment-ring-name span,
.augment-ring-card footer span,
.augment-enhancement-card span,
.augment-empty-state span {
    color: var(--muted);
    font-size: 9px;
}
.augment-resource-strip strong { color: var(--gold); }
.augment-section { margin-bottom: 7px; padding: 10px 12px; scroll-margin-top: 8px; }
.augment-section-heading {
    display: grid;
    grid-template-columns: minmax(170px, .35fr) minmax(0, 1.65fr);
    align-items: end;
    gap: 12px;
    margin-bottom: 7px;
}
.augment-section-heading h2 { margin: 0; font-size: 12px; line-height: 1.2; white-space: nowrap; }
.augment-section-heading > p { margin: 0; color: var(--muted); line-height: 1.35; }
.augment-section-heading--enhancement { grid-template-columns: minmax(245px, .55fr) minmax(0, 1.45fr); }
.augment-forge-form {
    display: grid;
    grid-template-columns: minmax(170px, 1.25fr) repeat(2, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(0, 0, 0, .1);
    padding: 6px;
}
.augment-forge-form label { display: grid; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 700; }
.augment-forge-form input,
.augment-forge-form select { width: 100%; }
.augment-ring-directory { display: grid; gap: 6px; margin-top: 7px; }
.augment-attuned-ring-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}
.augment-attuned-ring-directory .augment-ring-group { align-self: start; }
.augment-attuned-ring-directory .augment-ring-card {
    grid-auto-rows: max-content;
    align-content: start;
    gap: 2px;
    min-height: 0;
    padding: 5px 7px;
}
.augment-attuned-ring-directory .augment-ring-card footer { padding-top: 3px; }
.augment-attuned-ring-directory .augment-ring-card footer button {
    min-height: 28px;
    padding: 5px 9px;
}
.augment-recipe-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.augment-ring-group { display: grid; align-content: start; gap: 4px; min-width: 0; }
.augment-ring-group > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.augment-ring-group h3 { margin: 0; color: var(--gold); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.augment-ring-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.augment-recipe-directory .augment-ring-grid { grid-template-columns: 1fr; gap: 3px; }
.augment-recipe-directory .augment-ring-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 5px 7px;
}
.augment-recipe-directory .augment-ring-card p { grid-column: 1; }
.augment-recipe-directory .augment-ring-card footer {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    align-items: flex-end;
    flex-direction: column;
    justify-content: center;
    min-width: 108px;
    border-top: 0;
    border-left: 1px solid var(--line);
    padding: 0 0 0 8px;
}
.augment-ring-card {
    display: grid;
    gap: 4px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .014);
    padding: 6px 8px;
}
.augment-ring-card--ready { border-color: rgba(215, 179, 106, .36); }
.augment-ring-name,
.augment-ring-card footer,
.augment-enhancement-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.augment-ring-name strong { color: var(--paper); }
.augment-ring-name span { flex: 0 0 auto; }
.augment-ring-card p { margin: 0; color: var(--muted); line-height: 1.3; }
.augment-ring-card footer {
    width: 100%;
    margin: 0;
    border-top: 1px solid var(--line);
    padding: 4px 0 0;
}
.augment-ring-card .quest-progress { height: 5px; margin: 1px 0; }
.augment-ring-card footer strong { color: var(--text); font-size: 10px; }
.augment-ring-card footer .augment-ready { color: var(--gold); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.augment-enhancement-card {
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(255, 255, 255, .014);
    padding: 7px 9px;
}
.augment-enhancement-card > div { display: grid; gap: 3px; }
.augment-enhancement-card form { margin: 0; }
.augment-empty-state { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; }
.augment-empty-state span { flex: 1 1 auto; }

@media (max-width: 700px) {
    .augment-section-heading,
    .augment-ring-grid,
    .augment-attuned-ring-directory,
    .augment-recipe-directory { grid-template-columns: 1fr; }
    .augment-forge-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .augment-forge-form label:first-of-type { grid-column: 1 / -1; }
    .augment-forge-form button { grid-column: 1 / -1; }
    .augment-enhancement-card,
    .augment-empty-state { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 430px) {
    .augment-resource-strip { grid-template-columns: 1fr; }
    .augment-recipe-directory .augment-ring-card { grid-template-columns: 1fr; }
    .augment-recipe-directory .augment-ring-card footer {
        grid-column: 1;
        grid-row: auto;
        align-self: auto;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        border-top: 1px solid var(--line);
        border-left: 0;
        padding: 4px 0 0;
    }
}

/* Shared mobile density layer. Keep this final so page modules and custom game
   styles cannot restore desktop-scale spacing after the responsive shell. */
@media (max-width: 900px) {
    body {
        font-size: 11px;
    }

    .masthead {
        width: min(100% - 20px, 1440px);
        padding-block: 12px 9px;
    }

    .masthead .brand {
        gap: 8px;
    }

    .masthead .brand-mark {
        font-size: 12px;
        height: 36px;
        width: 36px;
    }

    .masthead .brand-name {
        font-size: 17px;
    }

    .masthead .brand-kicker {
        font-size: 8px;
    }

    .masthead .free-tag {
        font-size: 8px;
        padding: 5px 7px;
    }

    .realm-shell,
    .account-shell {
        gap: 10px;
        width: min(100% - 20px, 1440px);
    }

    .sidebar,
    .main-column,
    .account-main {
        gap: 10px;
    }

    .hero {
        min-height: 0;
        padding: 16px 14px;
    }

    .hero h1 {
        font-size: 22px;
        line-height: 1.05;
    }

    .hero-copy {
        font-size: 10.5px;
        margin-top: 9px;
    }

    .hero-features {
        gap: 5px;
        margin-top: 10px;
    }

    .hero-features span {
        font-size: 9px;
        padding: 4px 7px;
    }

    .registration-panel,
    .login-panel,
    .account-card,
    .legal-header {
        padding: 12px;
    }

    .section-heading {
        gap: 8px;
        margin-bottom: 14px;
    }

    .section-heading h2,
    .login-panel h2,
    .account-card > h1,
    .legal-header h1 {
        font-size: 20px;
        line-height: 1.1;
    }

    .account-card h2 {
        font-size: 18px;
    }

    .account-lead,
    .legal-header p:last-child {
        font-size: 10.5px;
        line-height: 1.5;
        margin-block: 10px 14px;
    }

    .form-grid,
    .stacked-form {
        gap: 12px;
    }

    .form-footer {
        gap: 12px;
        margin-top: 16px;
        padding-top: 14px;
    }

    .stacked-form .primary-button,
    .stacked-form .secondary-button {
        min-width: 0;
    }

    .security-note {
        margin-top: 16px;
        padding-top: 12px;
    }

    .game-header {
        gap: 7px;
        padding: 8px 0 6px;
    }

    .game-header .brand {
        gap: 7px;
    }

    .game-header .brand-mark {
        font-size: 12px;
        height: 34px;
        width: 34px;
    }

    .game-header .brand-name {
        font-size: 15px;
    }

    .mobile-nav-toggle {
        font-size: 9px;
        gap: 5px;
        min-height: 34px;
        padding: 5px 8px;
    }

    .game-header-player .level-badge,
    .level-badge,
    .realm-status {
        font-size: 8px;
        padding: 5px 7px;
    }

    .game-header-resources {
        padding-top: 6px;
    }

    .game-shell,
    .game-main,
    body.game-style-1 .game-shell,
    body.game-style-4.game-density-compact .game-shell,
    body.game-style-4.game-density-relaxed .game-shell,
    body.game-style-1 :is(.game-navigation, .resource-rail, .game-main),
    body.game-style-4.game-density-compact :is(.game-navigation, .resource-rail, .game-main),
    body.game-style-4.game-density-relaxed :is(.game-navigation, .resource-rail, .game-main) {
        gap: 9px;
    }

    .game-welcome,
    body.game-style-1 .game-welcome,
    body.game-style-4.game-density-compact .game-welcome,
    body.game-style-4.game-density-relaxed .game-welcome {
        gap: 6px;
        padding: 9px 10px;
    }

    .game-welcome h1,
    .game-main h1 {
        font-size: 16px;
        line-height: 1.15;
    }

    .game-main h2 {
        font-size: 15px;
        line-height: 1.25;
    }

    .game-main h3 {
        font-size: 12px;
        line-height: 1.3;
    }

    .game-main p {
        font-size: 10.5px;
        line-height: 1.45;
    }

    .game-welcome p:last-child,
    .dashboard-card > p:last-child {
        font-size: 10px;
        line-height: 1.45;
        margin-bottom: 0;
    }

    .game-main .eyebrow,
    .eyebrow {
        font-size: 8px;
        letter-spacing: .14em;
        margin-bottom: 6px;
    }

    .panel,
    .compact-panel,
    .outer-panel,
    body.game-style-1 .panel,
    body.game-style-4.game-density-compact .panel,
    body.game-style-4.game-density-relaxed .panel {
        border-radius: 10px;
        padding: 8px 9px;
    }

    label,
    .field-label,
    .game-main label {
        font-size: 10.5px;
        margin-bottom: 5px;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select {
        height: 40px;
        padding-inline: 10px;
    }

    textarea {
        min-height: 76px;
        padding: 7px 9px;
    }

    button:not(.game-nav-link),
    a.button,
    a.button-link,
    a.rail-action,
    .action-button,
    .primary-button,
    .secondary-button {
        font-size: 9px;
        min-height: var(--mobile-action-height);
        padding: 5px 7px;
    }

    .game-main button:not(.game-nav-link) {
        justify-self: start;
        width: auto;
    }

    :is(.section-tabs, .tab-strip, .content-tabs, .tab-bar, .subnav) {
        gap: 3px;
        margin-block: 5px 7px;
        padding-block: 3px;
    }

    :is(.section-tabs, .tab-strip, .content-tabs, .tab-bar, .subnav) > a,
    .hall-tabs a,
    .hall-tabs button {
        font-size: 9px;
        min-height: 26px;
        padding: 4px 6px;
    }

    .game-navigation .game-nav-link {
        min-height: 32px;
        padding: 2px 6px;
    }

    .patron-purchase-panel {
        gap: 9px;
        padding-block: 8px;
    }

    .patron-purchase-form {
        gap: 6px;
    }

    .patron-purchase-form button {
        justify-self: start;
    }

    .patron-comparison th,
    .patron-comparison td {
        font-size: 9px;
        line-height: 1.35;
        padding: 5px 7px;
    }

    .vote-site-grid article,
    .support-grid article {
        padding: 10px;
    }

    .vote-site-grid h2,
    .support-grid h2 {
        font-size: 14px;
        margin-bottom: 5px;
    }
}