@font-face {
    font-family: 'IBM Plex Serif';
    src: url('../fonts/IBMPlexSerif-Thin.ttf') format('truetype');
    font-style: normal;
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('../fonts/IBMPlexSerif-ThinItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('../fonts/IBMPlexSerif-ExtraLight.ttf') format('truetype');
    font-style: normal;
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('../fonts/IBMPlexSerif-ExtraLightItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('../fonts/IBMPlexSerif-Light.ttf') format('truetype');
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('../fonts/IBMPlexSerif-LightItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('../fonts/IBMPlexSerif-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('../fonts/IBMPlexSerif-Italic.ttf') format('truetype');
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('../fonts/IBMPlexSerif-Medium.ttf') format('truetype');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('../fonts/IBMPlexSerif-MediumItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('../fonts/IBMPlexSerif-SemiBold.ttf') format('truetype');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('../fonts/IBMPlexSerif-SemiBoldItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('../fonts/IBMPlexSerif-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('../fonts/IBMPlexSerif-BoldItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 700;
    font-display: swap;
}

:root {
    --ink: #211b14;
    --ink-soft: #5f5445;
    --parchment: #e8dbc0;
    --parchment-light: #f5ecd7;
    --parchment-dark: #c7af82;
    --bronze: #9b7134;
    --bronze-light: #d7b76d;
    --bronze-dark: #58391e;
    --crimson: #8f211d;
    --crimson-light: #b43a2d;
    --forest: #31452f;
    --night: #121712;
    --night-soft: #22291f;
    --line: rgba(83, 56, 28, .34);
    --shadow: 0 18px 50px rgba(18, 13, 7, .28);
    --serif: 'IBM Plex Serif', serif;
    --sans: 'IBM Plex Serif', serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    color: var(--ink);
    font-family: var(--sans);
    background: #161a15;
}

body::after {
    content: '';
    position: fixed;
    z-index: 2147483647;
    inset: 0;
    background-image: url('../images/grain-overlay.png');
    background-repeat: repeat;
    background-position: 0 0;
    background-size: 512px 512px;
    pointer-events: none;
    user-select: none;
}

a {
    color: inherit;
    text-decoration: none;
}

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

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.container {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

.button {
    position: relative;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border: 1px solid #49100d;
    border-radius: 3px;
    color: #fff8e6;
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .035em;
    text-shadow: 0 1px 1px #3c0807;
    cursor: pointer;
    background:
        linear-gradient(rgba(255,255,255,.12), transparent 45%),
        linear-gradient(#ac3028, #751714);
    box-shadow:
        inset 0 0 0 2px rgba(232, 176, 93, .25),
        inset 0 1px 0 rgba(255,255,255,.2),
        0 2px 0 #3c1711,
        0 5px 14px rgba(25, 9, 3, .24);
    transition: transform .18s ease, filter .18s ease;
}

.button::before,
.button::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 4px;
    height: 14px;
    border-block: 1px solid rgba(241, 199, 119, .45);
    transform: translateY(-50%);
}

.button::before { left: 6px; }
.button::after { right: 6px; }

.button:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.button:active {
    transform: translateY(1px);
}

.button-small {
    min-height: 38px;
    padding-inline: 18px;
    font-size: 13px;
}

.button-large {
    min-height: 52px;
    padding-inline: 34px;
    font-size: 17px;
}

.button-full {
    width: 100%;
}

.button-ghost {
    border-color: rgba(217, 184, 112, .65);
    background: rgba(24, 25, 19, .66);
}

.button-dark {
    border-color: #1f291c;
    background: linear-gradient(#43533c, #253224);
    box-shadow: inset 0 0 0 2px rgba(206,183,122,.17), 0 2px 0 #121a11;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #f4e8c8;
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .035em;
    text-shadow: 0 2px 4px rgba(0,0,0,.7);
}

.brand-rune {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(231, 198, 124, .8);
    color: #e0bd6e;
    background: radial-gradient(circle, #5b3b24, #20160f);
    box-shadow: inset 0 0 0 3px rgba(224, 189, 110, .13), 0 2px 8px #000;
    transform: rotate(45deg);
}

.brand-rune::first-letter {
    transform: rotate(-45deg);
}

.brand-rune {
    line-height: 1;
}

.eyebrow,
.section-kicker {
    display: block;
    margin: 0 0 10px;
    color: #9a6e2f;
    font-family: var(--serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
}

/* Landing page */
.hero-shell {
    position: relative;
    min-height: 820px;
    overflow: hidden;
    color: #fff;
    background: #141812;
}

.hero-art,
.auth-background,
.game-background {
    position: absolute;
    inset: 0;
    background-image: url('/assets/images/heroes-of-elarion.png');
    background-size: cover;
    background-position: center top;
}

.hero-art {
    background-image: url('/assets/images/frontline-of-mabor.webp');
    animation: heroReveal 1.4s ease both;
}

@keyframes heroReveal {
    from { opacity: .3; transform: scale(1.025); }
    to { opacity: 1; transform: scale(1); }
}

.hero-vignette {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(10,12,9,.42), transparent 32%, transparent 68%, rgba(10,12,9,.35)),
        linear-gradient(180deg, rgba(8,11,8,.62) 0, transparent 20%, transparent 60%, #111610 100%),
        radial-gradient(circle at 50% 33%, transparent 0 18%, rgba(12,15,10,.16) 62%, rgba(7,9,7,.5));
}

.top-nav {
    position: relative;
    z-index: 5;
    display: flex;
    min-height: 78px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(232, 204, 141, .25);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 22px;
}

.top-nav-guest .nav-actions .button { min-width: 140px; white-space: nowrap; }
.top-nav-guest .nav-actions .button:focus-visible { outline: 2px solid #f0d18b; outline-offset: 4px; }

.nav-link,
.text-link {
    color: #eee1c5;
    font-family: var(--serif);
    font-size: 14px;
    font-weight: 700;
}

.nav-link:hover,
.text-link:hover {
    color: #fff;
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 690px;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 110px;
    text-align: center;
}

.hero-content .eyebrow {
    color: #ecd394;
    text-shadow: 0 2px 4px #000;
}

.hero-content h1 {
    margin: 0;
    color: #fff9e9;
    font-family: var(--serif);
    font-size: clamp(55px, 7vw, 92px);
    font-weight: 500;
    line-height: .94;
    letter-spacing: -.035em;
    text-shadow: 0 3px 2px #151008, 0 9px 25px rgba(0,0,0,.7);
}

.hero-content h1 span {
    color: #e5c276;
    font-size: .67em;
    font-style: italic;
    letter-spacing: .015em;
}

.hero-lead {
    max-width: 670px;
    margin: 24px auto 26px;
    color: #f3ead7;
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.6;
    text-shadow: 0 2px 8px #000;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 26px;
}

.text-link span {
    margin-left: 5px;
    color: #d9b968;
}

.world-status {
    position: absolute;
    right: 0;
    bottom: 42px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border: 1px solid rgba(226, 198, 128, .35);
    color: #e9dfc4;
    text-align: left;
    background: rgba(18, 22, 16, .76);
    backdrop-filter: blur(8px);
}

.world-status strong,
.world-status small {
    display: block;
}

.world-status strong {
    font-family: var(--serif);
    font-size: 14px;
}

.world-status small {
    margin-top: 2px;
    color: #bcb59f;
    font-size: 11px;
}

.status-flame {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #dcb65e;
    box-shadow: 0 0 13px #ffc34d;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    50% { opacity: .55; transform: scale(.85); }
}

.parchment-section {
    position: relative;
    padding: 90px 0 105px;
    background:
        radial-gradient(circle at 18% 20%, rgba(120,82,36,.10), transparent 28%),
        radial-gradient(circle at 82% 76%, rgba(120,82,36,.08), transparent 30%),
        repeating-linear-gradient(0deg, rgba(82,57,28,.018) 0 1px, transparent 1px 4px),
        #e8dbc0;
    box-shadow: inset 0 9px 25px rgba(39,27,14,.25), inset 0 -7px 18px rgba(39,27,14,.18);
}

.parchment-section::before,
.parchment-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 9px;
    background: linear-gradient(90deg, #5e3f21, #c0954f 12%, #6b4320 50%, #c0954f 88%, #5e3f21);
    box-shadow: 0 2px 6px rgba(0,0,0,.45);
}

.parchment-section::before { top: 0; }
.parchment-section::after { bottom: 0; }

.section-heading {
    max-width: 750px;
    text-align: center;
}

.section-heading h2,
.economy-banner h2 {
    margin: 0;
    color: #302315;
    font-family: var(--serif);
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 500;
    letter-spacing: -.02em;
}

.section-heading > p {
    margin: 15px auto 0;
    color: var(--ink-soft);
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.65;
}

.gameplay-path {
    display: grid;
    grid-template-columns: 1fr 42px 1fr 42px 1fr;
    align-items: center;
    gap: 12px;
    margin-top: 60px;
}

.path-card {
    position: relative;
    min-height: 275px;
    padding: 34px 28px 28px;
    border: 1px solid rgba(101,67,31,.38);
    text-align: center;
    background: rgba(251, 245, 227, .52);
    box-shadow: inset 0 0 0 4px rgba(111,78,38,.05), 0 12px 30px rgba(72,48,24,.09);
}

.path-number {
    position: absolute;
    top: 13px;
    left: 16px;
    color: rgba(98,65,29,.35);
    font-family: var(--serif);
    font-size: 18px;
}

.path-card h3 {
    margin: 10px 0 8px;
    color: #382615;
    font-family: var(--serif);
    font-size: 25px;
}

.path-card p {
    margin: 0;
    color: #665643;
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.55;
}

.path-icon {
    position: relative;
    display: grid;
    width: 76px;
    height: 76px;
    margin: 0 auto;
    place-items: center;
    border: 1px solid #7c542c;
    border-radius: 50%;
    color: #7a552c;
    background: radial-gradient(#f5e9cc, #cbb381);
    box-shadow: inset 0 0 0 5px rgba(255,255,255,.3), 0 4px 10px rgba(61,39,17,.25);
}

.path-icon::before {
    font-size: 34px;
}

.land-icon::before { content: '◇'; }
.housing-icon::before { content: '⌂'; }
.army-icon::before { content: '⚔'; }

.path-arrow {
    color: #8a6636;
    font-family: var(--serif);
    font-size: 31px;
    text-align: center;
}

.factions-section {
    position: relative;
    padding: 95px 0 110px;
    overflow: hidden;
    color: #eee5ce;
    background:
        radial-gradient(circle at 50% 0, rgba(95,105,69,.32), transparent 42%),
        linear-gradient(rgba(21,28,20,.95), rgba(13,17,13,.98)),
        url('/assets/images/heroes-of-elarion.png') center/cover;
}

.factions-section::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .08;
    background-image: repeating-linear-gradient(135deg, #fff 0 1px, transparent 1px 9px);
}

.factions-section > * {
    position: relative;
}

.light-heading h2 {
    color: #f2e6c7;
}

.light-heading > p {
    color: #bfb9a7;
}

.light-heading .section-kicker {
    color: #d2ad62;
}

.faction-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 58px;
}

.faction-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #8a673d;
    background: #1e211a;
    box-shadow: 0 25px 45px rgba(0,0,0,.38), inset 0 0 0 4px rgba(215,183,109,.08);
    transition: transform .25s ease, border-color .25s ease;
}

.faction-card:hover {
    z-index: 2;
    border-color: #d2ad62;
    transform: translateY(-7px);
}

.faction-portrait,
.faction-option-art {
    background-image: url('/assets/images/heroes-of-elarion.png');
    background-repeat: no-repeat;
}

.faction-portrait {
    height: 325px;
    background-size: 300% auto;
    filter: saturate(.9) contrast(1.04);
}

.faction-position-left { background-position: left 42%; }
.faction-position-center { background-position: center 42%; }
.faction-position-right { background-position: right 42%; }

.faction-card-body {
    position: relative;
    min-height: 235px;
    padding: 40px 29px 28px;
    border-top: 2px solid #8a673d;
    text-align: center;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 4px),
        linear-gradient(#282a21, #171a15);
}

.faction-sigil {
    position: absolute;
    top: -25px;
    left: 50%;
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border: 1px solid #c09a57;
    border-radius: 50%;
    color: #e2c177;
    font-size: 20px;
    background: radial-gradient(#5b4527, #1c1c17 65%);
    box-shadow: 0 4px 12px #000;
    transform: translateX(-50%);
}

.faction-card-body > p:first-of-type {
    margin: 0 0 3px;
    color: #a89b7f;
    font-family: var(--serif);
    font-size: 11px;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.faction-card h3 {
    margin: 0;
    color: #efe3c6;
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 500;
}

.faction-divider {
    display: block;
    width: 55px;
    height: 1px;
    margin: 14px auto;
    background: linear-gradient(90deg, transparent, #ad8b4e, transparent);
}

.faction-description {
    margin: 0;
    color: #bcb5a4;
    font-family: var(--serif);
    font-size: 14px;
    line-height: 1.55;
}

.section-cta {
    margin-top: 47px;
    text-align: center;
}

.economy-banner {
    color: #312618;
    background:
        linear-gradient(90deg, rgba(255,255,255,.32), transparent 30%, rgba(118,85,43,.12)),
        #d6c39b;
    box-shadow: inset 0 1px #f3e7cc, inset 0 -1px #80633b;
}

.economy-banner-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 25px;
    min-height: 190px;
}

.economy-banner h2 {
    font-size: 34px;
}

.economy-banner p {
    margin: 8px 0 0;
    color: #665844;
    font-family: var(--serif);
}

.hourglass {
    color: #7c5729;
    font-size: 63px;
    text-shadow: 0 2px #f3e4be;
}

.site-footer {
    padding: 34px 20px 26px;
    color: #8e8c81;
    text-align: center;
    background: #111510;
}

.site-footer p {
    margin: 12px 0 0;
    font-family: var(--serif);
    font-size: 12px;
}

.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #9a7944;
}

.ornament span {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #745a35);
}

.ornament span:last-child {
    background: linear-gradient(90deg, #745a35, transparent);
}

/* Authentication */
.auth-page {
    position: relative;
    min-height: 100vh;
    background: #11150f;
}

.auth-background {
    position: fixed;
    opacity: .55;
    filter: saturate(.7);
}

.auth-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10,13,9,.88), rgba(10,13,9,.28), rgba(10,13,9,.8)), linear-gradient(0deg, #10140f, transparent 50%);
}

.login-background {
    background-position: 70% top;
}

.auth-layout {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: calc(100vh - 105px);
    align-items: center;
    flex-direction: column;
    padding-block: 34px 60px;
}

.auth-layout-narrow {
    width: min(620px, calc(100% - 40px));
}

.auth-brand {
    margin-bottom: 28px;
}

.auth-panel {
    position: relative;
    width: 100%;
    max-width: 960px;
    padding: 45px 52px 42px;
    border: 1px solid #76552f;
    background:
        radial-gradient(circle at 20% 10%, rgba(255,255,255,.38), transparent 30%),
        repeating-linear-gradient(0deg, rgba(76,53,25,.025) 0 1px, transparent 1px 4px),
        #eadfc5;
    box-shadow: inset 0 0 0 5px rgba(99,66,31,.1), 0 24px 70px rgba(0,0,0,.62);
}

.login-panel {
    max-width: 530px;
}

.panel-corner {
    position: absolute;
    width: 23px;
    height: 23px;
    border-color: #a27b42;
}

.corner-tl { top: 10px; left: 10px; border-top: 2px solid; border-left: 2px solid; }
.corner-tr { top: 10px; right: 10px; border-top: 2px solid; border-right: 2px solid; }
.corner-bl { bottom: 10px; left: 10px; border-bottom: 2px solid; border-left: 2px solid; }
.corner-br { right: 10px; bottom: 10px; border-right: 2px solid; border-bottom: 2px solid; }

.auth-heading {
    margin-bottom: 28px;
    text-align: center;
}

.auth-heading h1 {
    margin: 0;
    color: #342616;
    font-family: var(--serif);
    font-size: 42px;
    font-weight: 500;
}

.auth-heading p {
    margin: 9px 0 0;
    color: #675a47;
    font-family: var(--serif);
}

.alert,
.game-alert {
    margin-bottom: 20px;
    padding: 13px 16px;
    border: 1px solid;
    font-family: var(--serif);
    font-size: 14px;
}

.alert p {
    margin: 2px 0;
}

.alert-error {
    border-color: #a25b4f;
    color: #6e1e18;
    background: rgba(184, 74, 61, .11);
}

.alert-success {
    border-color: #718462;
    color: #34502d;
    background: rgba(85, 129, 65, .12);
}

.auth-form label > span,
.faction-picker legend {
    display: block;
    margin-bottom: 7px;
    color: #4e3a22;
    font-family: var(--serif);
    font-size: 13px;
    font-weight: 700;
}

.auth-form input[type='text'],
.auth-form input[type='email'],
.auth-form input[type='password'],
.recruit-form input {
    width: 100%;
    height: 45px;
    padding: 9px 12px;
    border: 1px solid #967750;
    border-radius: 2px;
    outline: none;
    color: #2e2418;
    background: rgba(255, 252, 239, .72);
    box-shadow: inset 0 2px 5px rgba(72,44,19,.1), 0 1px rgba(255,255,255,.7);
}

.auth-form input:focus,
.recruit-form input:focus {
    border-color: #8b3127;
    box-shadow: 0 0 0 3px rgba(139,49,39,.12);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 22px;
}

.login-panel .auth-form {
    display: grid;
    gap: 18px;
}

.faction-picker {
    margin: 30px 0;
    padding: 0;
    border: 0;
}

.faction-picker legend {
    margin-bottom: 12px;
}

.faction-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
}

.faction-option {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #8b714d;
    cursor: pointer;
    background: #24271f;
    box-shadow: 0 6px 13px rgba(50,32,15,.17);
}

.faction-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.faction-option-art {
    display: block;
    height: 135px;
    background-size: 300% auto;
    filter: saturate(.65) brightness(.8);
    transition: filter .2s ease, transform .2s ease;
}

.faction-option-content {
    display: block;
    padding: 12px;
    color: #efe4ca;
    text-align: center;
}

.auth-form .faction-option > .faction-option-content {
    margin: 0;
    color: #efe4ca;
}

.faction-option-content b,
.faction-option-content small {
    display: block;
    font-family: var(--serif);
}

.faction-option-content b {
    font-size: 18px;
}

.faction-option-content small {
    margin-top: 3px;
    color: #aaa38f;
    font-size: 10px;
}

.selection-mark {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border: 1px solid #d0b06c;
    border-radius: 50%;
    opacity: 0;
    color: #fff6da;
    background: #7d251e;
}

.auth-form .faction-option > .selection-mark {
    margin: 0;
    color: #fff6da;
}

.faction-option:has(input:checked) {
    border-color: #a62921;
    box-shadow: 0 0 0 3px rgba(151,35,28,.19), 0 8px 16px rgba(50,32,15,.22);
}

.faction-option:has(input:checked) .faction-option-art {
    filter: saturate(1) brightness(1);
    transform: scale(1.015);
}

.faction-option:has(input:checked) .selection-mark {
    opacity: 1;
}

.auth-switch {
    margin: 22px 0 0;
    color: #695b48;
    font-family: var(--serif);
    font-size: 14px;
    text-align: center;
}

.auth-switch a {
    color: #7e201b;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Game dashboard */
.game-page {
    min-width: 0;
    min-height: 100vh;
    color: #32281d;
    background: #bfae8e;
}

.game-background {
    position: fixed;
    opacity: .13;
    filter: grayscale(.35) sepia(.25);
}

.game-header {
    position: sticky;
    z-index: 20;
    top: 0;
    display: grid;
    grid-template-columns: 260px 1fr auto;
    min-height: 76px;
    align-items: stretch;
    border-bottom: 2px solid #9d7540;
    color: #eee4c9;
    background:
        linear-gradient(180deg, rgba(255,255,255,.06), transparent),
        #20271e;
    box-shadow: 0 5px 16px rgba(31,21,11,.38);
}

.game-brand {
    padding: 0 22px;
    border-right: 1px solid rgba(224,190,112,.18);
    font-size: 18px;
}

.game-header-resources {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.header-resource {
    display: flex;
    min-width: 165px;
    align-items: center;
    gap: 10px;
    padding: 0 22px;
    border-right: 1px solid rgba(224,190,112,.14);
}

.header-resource:first-child {
    border-left: 1px solid rgba(224,190,112,.14);
}

.resource-symbol {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 1px solid #856536;
    border-radius: 50%;
    color: #e1bd6d;
    background: radial-gradient(#47503a, #1a1e18);
}

.header-resource small,
.header-resource strong {
    display: block;
}

.header-resource small,
.player-menu small {
    margin-bottom: 3px;
    color: #9d9b8c;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.header-resource strong {
    color: #f0e5ca;
    font-family: var(--serif);
    font-size: 15px;
}

.header-resource strong b {
    font-weight: inherit;
}

.player-menu {
    display: flex;
    min-width: 230px;
    align-items: center;
    gap: 9px;
    padding: 0 18px;
}

.player-menu > span:nth-child(2) {
    min-width: 85px;
}

.player-menu strong,
.player-menu small {
    display: block;
}

.player-menu strong {
    max-width: 110px;
    overflow: hidden;
    color: #ede1c5;
    font-family: var(--serif);
    text-overflow: ellipsis;
}

.player-sigil {
    display: grid;
    width: 35px;
    height: 35px;
    place-items: center;
    border: 1px solid #8b6c3d;
    border-radius: 50%;
    color: #e1bd6d;
    background: #30372a;
}

.game-shell {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 235px 1fr;
    min-height: calc(100vh - 112px);
}

.game-sidebar {
    display: flex;
    min-height: calc(100vh - 112px);
    flex-direction: column;
    border-right: 2px solid #8c6d44;
    color: #d8cfb8;
    background:
        linear-gradient(90deg, rgba(255,255,255,.03), transparent),
        #262c23;
    box-shadow: 5px 0 18px rgba(45,30,14,.17);
}

/* Keep desktop navigation in place while the document content scrolls. */
@media (min-width: 901px) {
    /* The footer must not cover the fixed menu's logout button. */
    .game-shell { z-index: 3; }

    .game-sidebar {
        position: fixed;
        top: var(--game-header-height, 76px);
        bottom: 0;
        left: 0;
        width: 235px;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scrollbar-width: thin;
        scrollbar-color: #8c6d44 #262c23;
    }

    .game-sidebar > * { flex-shrink: 0; }
    .game-main { grid-column: 2; }
}

@media (min-width: 901px) and (max-width: 1100px) {
    .game-sidebar { width: 190px; }
}

.mobile-menu-bar,
.mobile-menu-backdrop,
.mobile-menu-heading {
    display: none;
}

.sidebar-logout {
    display: block;
    width: auto;
    flex: 0 0 auto;
    margin: 0 18px 20px;
}

.sidebar-logout button {
    position: relative;
    width: 100%;
    height: 45px;
    border: 1px solid #85623a;
    color: #e8d7b3;
    background:
        linear-gradient(90deg, transparent, rgba(140,63,40,.18), transparent),
        #2c3027;
    box-shadow: inset 0 0 0 3px rgba(12,16,11,.35);
    font-family: var(--serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

.sidebar-logout button:hover { border-color: #c29a62; color: #fff0cf; }
.sidebar-logout button:focus-visible { outline: 2px solid #d8bd82; outline-offset: 3px; }

.sidebar-item {
    position: relative;
    display: flex;
    width: calc(100% - 20px);
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    margin: 6px 10px 0;
    padding: 0 25px;
    clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
    border: 1px solid rgba(184,145,75,.29);
    color: #c3bda9;
    background:
        linear-gradient(135deg, rgba(213,177,100,.12) 0 7px, transparent 7px) top left / 13px 13px no-repeat,
        linear-gradient(225deg, rgba(213,177,100,.09) 0 7px, transparent 7px) top right / 13px 13px no-repeat,
        linear-gradient(45deg, rgba(213,177,100,.07) 0 7px, transparent 7px) bottom left / 13px 13px no-repeat,
        linear-gradient(315deg, rgba(213,177,100,.07) 0 7px, transparent 7px) bottom right / 13px 13px no-repeat,
        linear-gradient(90deg, transparent, rgba(204,168,91,.025) 50%, transparent),
        linear-gradient(90deg, rgba(255,255,255,.018), transparent 30%);
    box-shadow: inset 0 0 0 2px rgba(8,12,8,.25), 0 1px rgba(224,190,112,.04);
    transition: color .18s ease, background .18s ease, padding .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.sidebar-item::before {
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(201,165,89,.12);
    clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
    content: '';
    pointer-events: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.sidebar-item::after {
    content: '◆';
    display: flex;
    width: 38px;
    height: 9px;
    align-items: center;
    justify-content: center;
    color: rgba(194,155,76,.66);
    font-size: 6px;
    line-height: 1;
    background:
        linear-gradient(90deg, transparent, rgba(186,149,76,.48)) left center / 15px 1px no-repeat,
        linear-gradient(90deg, rgba(186,149,76,.48), transparent) right center / 15px 1px no-repeat;
    opacity: .72;
    transition: width .18s ease, opacity .18s ease, filter .18s ease;
}

.sidebar-item b {
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .025em;
}

.sidebar-item i {
    position: absolute;
    right: 12px;
    bottom: 7px;
    color: #696e63;
    font-size: 8px;
    font-style: normal;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sidebar-item.active {
    border-color: rgba(217,174,86,.58);
    color: #f0e5c7;
    background:
        linear-gradient(135deg, rgba(232,190,101,.2) 0 7px, transparent 7px) top left / 13px 13px no-repeat,
        linear-gradient(225deg, rgba(232,190,101,.14) 0 7px, transparent 7px) top right / 13px 13px no-repeat,
        linear-gradient(45deg, rgba(232,190,101,.1) 0 7px, transparent 7px) bottom left / 13px 13px no-repeat,
        linear-gradient(315deg, rgba(232,190,101,.1) 0 7px, transparent 7px) bottom right / 13px 13px no-repeat,
        linear-gradient(90deg, rgba(154,113,52,.3), rgba(154,113,52,.06) 72%, transparent),
        linear-gradient(180deg, rgba(228,193,113,.04), transparent);
    box-shadow: inset 4px 0 #a63127, inset 0 0 0 2px rgba(8,12,8,.28), 0 3px 10px rgba(8,10,7,.19);
}

.sidebar-item.active::before {
    border-color: rgba(224,185,100,.31);
    box-shadow: inset 0 0 10px rgba(210,166,74,.05);
}

.sidebar-item:not(.disabled):hover,
.sidebar-item:not(.disabled):focus-visible {
    padding-left: 31px;
    border-color: rgba(228,187,99,.68);
    color: #fff0ca;
    outline: 0;
    background:
        linear-gradient(135deg, rgba(242,204,119,.24) 0 7px, transparent 7px) top left / 13px 13px no-repeat,
        linear-gradient(225deg, rgba(242,204,119,.18) 0 7px, transparent 7px) top right / 13px 13px no-repeat,
        linear-gradient(45deg, rgba(242,204,119,.12) 0 7px, transparent 7px) bottom left / 13px 13px no-repeat,
        linear-gradient(315deg, rgba(242,204,119,.12) 0 7px, transparent 7px) bottom right / 13px 13px no-repeat,
        linear-gradient(90deg, rgba(183,139,59,.32), rgba(183,139,59,.11) 72%, rgba(183,139,59,.03)),
        linear-gradient(180deg, rgba(239,205,128,.06), transparent);
    box-shadow: inset 0 0 0 2px rgba(8,12,8,.28), inset 0 0 15px rgba(201,155,65,.08), 0 3px 13px rgba(11,13,9,.28), 0 0 18px rgba(167,120,43,.08);
    transform: translateX(2px);
}

.sidebar-item:not(.disabled):hover::before,
.sidebar-item:not(.disabled):focus-visible::before {
    border-color: rgba(236,197,112,.4);
    box-shadow: inset 0 0 12px rgba(215,173,87,.08);
}

.sidebar-item:not(.disabled):hover::after,
.sidebar-item:not(.disabled):focus-visible::after,
.sidebar-item.active::after {
    width: 38px;
    opacity: 1;
    filter: drop-shadow(0 0 3px rgba(216,174,86,.45));
}

.sidebar-item.disabled {
    cursor: not-allowed;
    opacity: .6;
}

.sidebar-group {
    position: relative;
    width: calc(100% - 20px);
    flex: 0 0 auto;
    margin: 6px 10px 0;
    border: 1px solid rgba(184,145,75,.36);
    color: #c3bda9;
    background: radial-gradient(ellipse at 20% 0, #8c9b5719, transparent 75%), #253026;
    box-shadow: inset 0 0 0 3px #11191080, inset 0 0 0 4px #b3995522, 0 2px 7px #11180f30;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.sidebar-group > summary {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 24px;
    list-style: none;
    cursor: pointer;
    transition: color .18s ease, background .18s ease;
}

.sidebar-parent > b { font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: .025em; white-space: nowrap; }
.sidebar-group > summary:hover { color: #fff0ca; background: linear-gradient(90deg, #bfa35919, transparent); }
.sidebar-group > summary:focus-visible { outline: 2px solid #d5b779; outline-offset: -8px; color: #fff0ca; }
.sidebar-group.active { border-color: #bc9a596e; color: #f0e5c7; }
.sidebar-group[open] { border-color: #b79b5c; box-shadow: inset 0 0 0 3px #11191080, inset 0 0 0 4px #b399553b, 0 5px 16px #080f0750; }
.sidebar-group[open] > summary { color: #eed8a5; }
.sidebar-group:has(> summary:hover),
.sidebar-group:has(> summary:focus-visible) { border-color: #d1b072; }

/* The corners belong to the entire expanding panel, not just its heading. */
.sidebar-group-frame { position: absolute; inset: 2px; pointer-events: none; z-index: 2; border: 1px solid #b59b5730; }
.sidebar-group-frame i { position: absolute; width: 25px; height: 25px; background: url('/assets/img/ranking-corner.svg') center / contain no-repeat; opacity: .7; }
.sidebar-group-frame i:nth-child(1) { top: -2px; left: -2px; }
.sidebar-group-frame i:nth-child(2) { top: -2px; right: -2px; transform: rotate(90deg); }
.sidebar-group-frame i:nth-child(3) { bottom: -2px; left: -2px; transform: rotate(-90deg); }
.sidebar-group-frame i:nth-child(4) { bottom: -2px; right: -2px; transform: rotate(180deg); }
.sidebar-group[open] .sidebar-group-frame i { opacity: 1; }

.sidebar-group > summary::-webkit-details-marker {
    display: none;
}

.sidebar-parent::after {
    display: none;
}

.sidebar-parent-end {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.sidebar-toggle-mark {
    width: 9px;
    height: 9px;
    border-right: 1px solid #c19a54;
    border-bottom: 1px solid #c19a54;
    opacity: .75;
    transform: rotate(45deg) translate(-2px, 2px);
    transition: transform .18s ease;
}

.sidebar-group[open] .sidebar-toggle-mark {
    transform: rotate(225deg) translate(-2px, 2px);
}

.sidebar-mail-indicator {
    flex: 0 0 auto;
}

.sidebar-submenu {
    position: relative;
    display: grid;
    gap: 2px;
    margin: 0 11px 11px;
    padding: 8px 0 0;
    border: 0;
    background: linear-gradient(90deg, transparent, #bba06980 22% 78%, transparent) center top / 100% 1px no-repeat;
}

.sidebar-submenu::before {
    position: absolute;
    top: -3px;
    left: calc(50% - 3px);
    width: 6px;
    height: 6px;
    border: 1px solid #bba069;
    background: #293628;
    content: '';
    transform: rotate(45deg);
}

.sidebar-submenu a {
    position: relative;
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 7px 12px;
    border: 0;
    color: #b9c0a9;
    font-family: var(--serif);
    font-size: 13px;
    background: transparent;
    transition: color .18s ease, background .18s ease;
}

.sidebar-submenu a::before {
    position: absolute;
    inset: auto 12px 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #bba0691c, transparent);
    content: '';
}
.sidebar-submenu a:last-child::before { display: none; }

.sidebar-submenu a:hover,
.sidebar-submenu a:focus-visible,
.sidebar-submenu a.active {
    color: #f4e6bf;
    background: linear-gradient(90deg, #c0ac6424, #8c9b5710);
}

.sidebar-submenu a.active {
    box-shadow: inset 2px 0 #c4a763;
    color: #efd8a0;
    background: linear-gradient(90deg, #c3aa6530, #8c9b570c);
}
.sidebar-submenu a:focus-visible { outline: 1px solid #d5b779; outline-offset: -2px; }

.sidebar-submenu a b {
    padding: 3px 5px;
    border: 1px solid #ad965150;
    color: #e3d39e;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
    background: #a4904420;
}

/* Native details remain usable without animation support or JavaScript. */
@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
    .sidebar-group { interpolate-size: allow-keywords; }
    .sidebar-group::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size .24s ease, content-visibility .24s ease allow-discrete;
    }
    .sidebar-group[open]::details-content { block-size: auto; }
}
@media (max-width: 1100px) and (min-width: 901px) {
    .sidebar-group > summary { padding-inline: 11px; }
    .sidebar-parent > b { font-size: 14px; letter-spacing: 0; }
    .sidebar-parent-end { gap: 8px; }
    .sidebar-submenu a { padding-inline: 8px; }
}
@media (max-width: 900px) {
    .sidebar-submenu a { min-height: 44px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .sidebar-group, .sidebar-group > summary, .sidebar-submenu a,
    .sidebar-toggle-mark { transition: none; }
    .sidebar-group::details-content { transition: none; }
}

.sidebar-connection {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: center;
    margin: auto 18px 22px;
    padding: 13px;
    border: 1px solid rgba(208,176,101,.22);
    background: rgba(12,15,11,.3);
}

.connection-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #8c9188;
    box-shadow: 0 0 0 3px #8c91881a;
}

.sidebar-connection[data-connection-state="online"] .connection-dot {
    background: #78c85c;
    box-shadow: 0 0 0 3px #78c85c1a, 0 0 8px #78c85c55;
}

.sidebar-connection[data-connection-state="offline"] .connection-dot {
    background: #ef7066;
    box-shadow: 0 0 0 3px #ef70661a, 0 0 8px #ef706644;
}

.sidebar-connection [data-server-connection-label] {
    color: #d4c7a8;
    font-family: var(--serif);
    font-size: 12px;
    line-height: 1.5;
}

.game-main {
    width: min(1320px, calc(100% - 40px));
    min-width: 0;
    margin-inline: auto;
    padding: 28px 0 48px;
}

.game-alert {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    margin: 0 0 18px;
    border-color: #6e805f;
    color: #384a30;
    background: rgba(230,238,214,.92);
    box-shadow: 0 5px 15px rgba(62,45,22,.12);
}

.game-alert.alert-error {
    border-color: #9a574b;
    color: #701e18;
    background: rgba(245,222,209,.94);
}

.game-alert p { margin: 0; }
.game-alert button { border: 0; color: inherit; font-size: 20px; cursor: pointer; background: transparent; }

.territory-hero {
    position: relative;
    min-height: 280px;
    overflow: hidden;
    border: 1px solid #664a2b;
    color: #fff;
    background: #1b211a;
    box-shadow: var(--shadow), inset 0 0 0 4px rgba(211,178,104,.12);
}

.territory-landscape {
    position: absolute;
    inset: 0;
    background: url('/assets/images/heroes-of-elarion.png') center 48% / cover;
    transform: scale(1.02);
}

.territory-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10,14,10,.85), rgba(10,14,10,.2) 57%, rgba(10,14,10,.42)), linear-gradient(0deg, rgba(8,11,8,.55), transparent 50%);
}

.territory-copy {
    position: absolute;
    bottom: 34px;
    left: 38px;
}

.territory-copy .section-kicker {
    color: #e0bd6e;
}

.territory-copy h1 {
    margin: 0;
    font-family: var(--serif);
    font-size: 44px;
    font-weight: 500;
    text-shadow: 0 3px 8px #000;
}

.territory-copy p {
    margin: 5px 0 0;
    color: #e3dac5;
    font-family: var(--serif);
    font-size: 14px;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 13px;
    margin: 17px 0;
}

.stat-card,
.game-panel {
    border: 1px solid #8f7450;
    background:
        repeating-linear-gradient(0deg, rgba(73,48,24,.025) 0 1px, transparent 1px 4px),
        rgba(238, 226, 199, .95);
    box-shadow: inset 0 0 0 3px rgba(91,62,30,.05), 0 7px 20px rgba(66,45,22,.12);
}

.stat-card {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 16px;
}

.stat-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid #9e7843;
    border-radius: 50%;
    color: #81572a;
    background: radial-gradient(#f6e9c8, #cbb07a);
}

.stat-card small,
.stat-card strong {
    display: block;
}

.stat-card small {
    overflow: hidden;
    color: #7c6c57;
    font-size: 9px;
    letter-spacing: .07em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.stat-card strong {
    margin-top: 3px;
    color: #372718;
    font-family: var(--serif);
    font-size: 20px;
    white-space: nowrap;
}

.stat-card em {
    color: #7e6c54;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
}

.stat-card p {
    grid-column: 1 / -1;
    margin: 7px 0 0;
    padding-top: 8px;
    border-top: 1px solid rgba(106,77,43,.18);
    color: #776750;
    font-family: var(--serif);
    font-size: 11px;
}

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

.game-panel {
    min-width: 0;
}

.game-panel-heading {
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: space-between;
    padding: 18px 23px;
    border-bottom: 1px solid #9a7b51;
    background: rgba(214,197,160,.45);
}

.game-panel-heading .section-kicker {
    margin-bottom: 3px;
    font-size: 9px;
}

.game-panel-heading h2 {
    margin: 0;
    color: #3c2b19;
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 500;
}

.heading-sigil {
    color: #9f773d;
    font-size: 28px;
}

.action-list {
    display: grid;
}

.action-card {
    display: grid;
    grid-template-columns: 78px minmax(220px, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 19px 22px;
    border-bottom: 1px solid rgba(111,82,47,.22);
}

.action-card:last-child {
    border-bottom: 0;
}

.action-art {
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    border: 1px solid #836039;
    color: #f0dba5;
    font-size: 31px;
    background:
        radial-gradient(circle, rgba(135,113,67,.18), rgba(27,32,24,.84)),
        url('/assets/images/heroes-of-elarion.png') center/cover;
    box-shadow: inset 0 0 0 3px rgba(226,193,118,.12), 0 3px 9px rgba(50,33,16,.25);
}

.action-farm { background-position: center; }
.action-recruit { background-position: right; }

.action-content h3 {
    margin: 0 0 4px;
    color: #3d2a18;
    font-family: var(--serif);
    font-size: 18px;
}

.action-content > p {
    margin: 0;
    color: #71624f;
    font-family: var(--serif);
    font-size: 12px;
    line-height: 1.45;
}

.cost-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 8px;
}

.cost-list span {
    color: #785a32;
    font-size: 10px;
    font-weight: 700;
}

.action-card .button {
    min-width: 145px;
    padding-inline: 16px;
    font-size: 12px;
}

.recruit-form {
    display: grid;
    grid-template-columns: 78px 125px;
    align-items: end;
    gap: 8px;
}

.recruit-form label > span {
    display: block;
    margin-bottom: 4px;
    color: #725f48;
    font-size: 9px;
    text-transform: uppercase;
}

.recruit-form input {
    height: 42px;
}

.compact-heading {
    min-height: 82px;
}

.chronicle-list {
    margin: 0;
    padding: 20px 21px 4px;
    list-style: none;
}

.chronicle-list li {
    position: relative;
    display: grid;
    grid-template-columns: 17px 1fr;
    gap: 7px;
    padding-bottom: 18px;
}

.chronicle-list li:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 12px;
    bottom: 0;
    left: 4px;
    width: 1px;
    background: #b29b70;
}

.chronicle-dot {
    position: relative;
    z-index: 2;
    width: 9px;
    height: 9px;
    margin-top: 4px;
    border: 2px solid #ede0bf;
    border-radius: 50%;
    background: #936d36;
    box-shadow: 0 0 0 1px #936d36;
}

.chronicle-list p {
    margin: 0;
    color: #4f402e;
    font-family: var(--serif);
    font-size: 12px;
    line-height: 1.4;
}

.chronicle-list time {
    display: block;
    margin-top: 4px;
    color: #93836e;
    font-size: 9px;
    text-transform: uppercase;
}

.empty-chronicle {
    padding: 35px 28px;
    color: #83745f;
    font-family: var(--serif);
    text-align: center;
}

.empty-chronicle span {
    color: #9e7841;
    font-size: 27px;
}

.realm-balance {
    margin: 17px;
    padding: 16px;
    border: 1px solid rgba(111,82,47,.29);
    background: rgba(211,195,161,.27);
}

.realm-balance h3 {
    margin: 0 0 12px;
    color: #44311d;
    font-family: var(--serif);
    font-size: 15px;
}

.realm-balance p {
    display: flex;
    justify-content: space-between;
    margin: 7px 0;
    color: #766650;
    font-size: 10px;
}

.realm-balance strong {
    color: #47583b;
}

.realm-balance .balance-total {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(111,82,47,.25);
    color: #3e3021;
    font-weight: 700;
}

.game-footer {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px 0 255px;
    border-top: 1px solid #7e623d;
    color: #8f9188;
    font-size: 9px;
    background: #1b211a;
}

.fatal-state {
    min-height: 75vh;
    padding-top: 120px;
    color: #eee2c6;
    text-align: center;
}

.fatal-state h1 {
    font-family: var(--serif);
    font-size: 45px;
}

@media (max-width: 1100px) {
    .game-header { grid-template-columns: 220px 1fr auto; }
    .game-brand { font-size: 0; }
    .game-brand .brand-rune { margin-inline: auto; }
    .header-resource { min-width: 135px; padding-inline: 12px; }
    .game-shell { grid-template-columns: 190px 1fr; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .game-footer { padding-left: 210px; }
}

@media (max-width: 900px) {
    .hero-shell { min-height: 760px; }
    .hero-content { padding-top: 90px; }
    .world-status { right: 20px; }
    .gameplay-path { grid-template-columns: 1fr; }
    .path-arrow { transform: rotate(90deg); }
    .faction-grid { grid-template-columns: 1fr; max-width: 560px; }
    .faction-portrait { height: 390px; }
    .economy-banner-content { grid-template-columns: 1fr; padding-block: 30px; }
    .economy-banner .button { grid-column: auto; justify-self: start; }
    .game-header { position: relative; grid-template-columns: 92px 1fr; }
    .game-brand { padding-inline: 12px; }
    .game-header-resources { justify-content: flex-start; overflow-x: auto; }
    .player-menu { grid-column: 1 / -1; min-height: 57px; border-top: 1px solid rgba(224,190,112,.14); }
    .game-shell { grid-template-columns: 1fr; }
    .game-sidebar { min-height: auto; flex-direction: row; border-right: 0; border-bottom: 2px solid #8c6d44; }
    .sidebar-item { min-width: 145px; flex: 1; }
    .sidebar-connection { display: none; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .game-footer { padding-left: 24px; }
}

@media (max-width: 720px) {
    .container { width: min(100% - 26px, 1180px); }
    .top-nav { min-height: 68px; }
    .brand-mark { font-size: 16px; }
    .top-nav-guest { flex-wrap: wrap; justify-content: center; gap: 14px; padding-block: 16px; }
    .top-nav-guest .nav-actions { width: 100%; gap: 10px; }
    .top-nav-guest .nav-actions .button { flex: 1; min-width: 0; min-height: 44px; padding-inline: 12px; }
    .hero-shell { min-height: 700px; }
    .hero-art { background-position: 64% top; }
    .hero-content { min-height: 625px; padding-top: 80px; }
    .hero-content h1 { font-size: 49px; }
    .hero-lead { max-width: 92%; font-size: 16px; }
    .hero-actions { flex-direction: column; gap: 17px; }
    .world-status { right: 50%; bottom: 25px; width: max-content; transform: translateX(50%); }
    .parchment-section, .factions-section { padding-block: 75px; }
    .section-heading h2 { font-size: 36px; }
    .faction-portrait { height: 320px; }
    .economy-banner-content { grid-template-columns: 1fr; text-align: center; }
    .economy-banner .button { grid-column: auto; justify-self: center; }
    .hourglass { display: none; }
    .auth-layout { padding-top: 22px; }
    .auth-panel { padding: 38px 24px 32px; }
    .auth-heading h1 { font-size: 34px; }
    .form-grid, .faction-picker-grid { grid-template-columns: 1fr; }
    .faction-option { display: grid; grid-template-columns: 110px 1fr; }
    .faction-option-art { height: 100px; }
    .faction-option-content { display: flex; align-items: flex-start; flex-direction: column; justify-content: center; text-align: left; }
    .game-header-resources { grid-column: 2; }
    .header-resource { min-width: 115px; }
    .header-resource:first-child { display: none; }
    .game-sidebar { overflow-x: auto; }
    .sidebar-item { min-width: 110px; grid-template-columns: 26px 1fr; padding-inline: 10px; }
    .sidebar-item i { display: none; }
    .game-main { width: calc(100% - 24px); padding-top: 14px; }
    .territory-hero { min-height: 235px; }
    .territory-copy { right: 20px; bottom: 24px; left: 22px; }
    .territory-copy h1 { font-size: 34px; }
    .stat-grid { grid-template-columns: 1fr; }
    .action-card { grid-template-columns: 58px 1fr; gap: 13px; padding: 17px; }
    .action-art { width: 56px; height: 56px; }
    .action-card > form { grid-column: 1 / -1; }
    .action-card .button { width: 100%; }
    .recruit-form { grid-template-columns: 1fr 1fr; }
    .game-footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 2px; }
}

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

/* Game navigation and separated management pages */
.game-header-simple {
    grid-template-columns: 235px minmax(540px, 1fr) auto;
}

.game-header-simple .player-menu {
    min-width: 220px;
    justify-self: end;
    border-left: 1px solid rgba(224,190,112,.14);
}

.game-header-hud {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(92px, 1fr));
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
}

.header-status {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 54px;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    padding: 6px 10px;
    border: 1px solid rgba(190,151,76,.62);
    outline: 0;
    color: #e8dcc0;
    text-align: center;
    cursor: help;
    background:
        linear-gradient(135deg, rgba(207,169,89,.12), transparent 38%),
        rgba(13,18,13,.46);
    box-shadow: inset 0 0 0 2px rgba(222,187,111,.07), 0 3px 9px rgba(0,0,0,.22);
}

.header-status::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(205,169,92,.12);
    pointer-events: none;
}

.header-status::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    width: 6px;
    height: 6px;
    border: 1px solid #b78a42;
    background: #242c21;
    transform: translateX(-50%) rotate(45deg);
}

.header-status:hover,
.header-status:focus-visible,
.header-status:focus-within {
    border-color: #d0aa5d;
    background:
        linear-gradient(135deg, rgba(207,169,89,.2), transparent 42%),
        rgba(11,17,11,.74);
}

.header-status-summary {
    display: block;
    min-width: 0;
}

.header-status-summary small,
.header-status-summary strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-status-summary small {
    margin-bottom: 2px;
    color: #98998b;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.header-status-summary strong {
    color: #f3e7c8;
    font-family: var(--serif);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1;
}

.header-status-summary em {
    margin-left: 2px;
    color: #aaa58f;
    font-size: 8px;
    font-style: normal;
    font-weight: 400;
}

.header-status-tooltip {
    position: absolute;
    z-index: 80;
    top: calc(100% + 13px);
    left: 50%;
    display: block;
    visibility: hidden;
    width: 225px;
    padding: 13px 14px 10px;
    clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
    border: 1px solid #b78c48;
    opacity: 0;
    color: #ded2b8;
    background:
        linear-gradient(135deg, rgba(195,153,70,.16), transparent 38%),
        rgba(17,23,17,.97);
    box-shadow: inset 0 0 0 3px rgba(214,177,99,.08), 0 13px 28px rgba(0,0,0,.48);
    pointer-events: none;
    transform: translate(-50%, -4px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.header-status-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    width: 10px;
    height: 10px;
    border-top: 1px solid #b78c48;
    border-left: 1px solid #b78c48;
    background: #20271d;
    transform: translateX(-50%) rotate(45deg);
}

.header-status:first-child .header-status-tooltip {
    left: 0;
    transform: translate(0, -4px);
}

.header-status:first-child .header-status-tooltip::before {
    left: 25px;
}

.header-status-tooltip-right {
    right: 0;
    left: auto;
    transform: translate(0, -4px);
}

.header-status-tooltip-right::before {
    right: 25px;
    left: auto;
    transform: rotate(45deg);
}

.header-status:hover .header-status-tooltip,
.header-status:focus-visible .header-status-tooltip,
.header-status:focus-within .header-status-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
}

.header-status:first-child:hover .header-status-tooltip,
.header-status:first-child:focus-visible .header-status-tooltip,
.header-status:first-child:focus-within .header-status-tooltip,
.header-status:hover .header-status-tooltip-right,
.header-status:focus-visible .header-status-tooltip-right,
.header-status:focus-within .header-status-tooltip-right {
    transform: translate(0, 0);
}

.header-status-tooltip > b {
    display: block;
    margin-bottom: 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(205,169,91,.28);
    color: #f0d793;
    font-family: var(--serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .025em;
}

.header-status-tooltip > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(213,180,111,.08);
}

.header-status-tooltip > span:last-child {
    border-bottom: 0;
}

.header-status-tooltip i {
    color: #999989;
    font-size: 11px;
    font-style: normal;
}

.header-status-tooltip strong {
    color: #eee1c3;
    font-family: var(--serif);
    font-size: 12px;
    white-space: nowrap;
}

.header-status-tooltip .positive-value {
    color: #a8cf83 !important;
}

.header-status-tooltip .negative-value {
    color: #ee8b7e !important;
}

.settlement-card {
    position: relative;
    height: clamp(380px, 48vw, 580px);
    overflow: hidden;
    border: 1px solid #664a2b;
    color: #fff;
    background: #1b211a;
    box-shadow: var(--shadow), inset 0 0 0 4px rgba(211,178,104,.12);
}

.settlement-card::after {
    content: '';
    position: absolute;
    inset: 8px;
    z-index: 3;
    border: 1px solid rgba(230,201,133,.24);
    pointer-events: none;
}

.settlement-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    transition: none;
}

.settlement-card:hover img {
    transform: none;
}

.settlement-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(8,12,8,.9), transparent 48%), linear-gradient(90deg, rgba(8,12,8,.32), transparent 55%);
}

.settlement-caption {
    position: absolute;
    z-index: 4;
    bottom: 35px;
    left: 39px;
}

.settlement-caption .section-kicker {
    color: #e0bd6e;
}

.settlement-caption h2 {
    margin: 0;
    color: #fff7e3;
    font-family: var(--serif);
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 500;
    text-shadow: 0 3px 9px #000;
}

.settlement-caption p {
    margin: 5px 0 0;
    color: #e1d8c2;
    font-family: var(--serif);
}

.settlement-badge {
    position: absolute;
    z-index: 4;
    top: 24px;
    right: 25px;
    padding: 10px 15px;
    border: 1px solid rgba(227,194,116,.5);
    color: #ead8ac;
    font-family: var(--serif);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(15,20,14,.75);
    backdrop-filter: blur(6px);
}

.profile-lower-grid {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 17px;
    margin-top: 17px;
}

.profile-chronicle .chronicle-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 25px;
}

.profile-balance {
    margin-top: 18px;
}

.mechanic-main {
    --quantity-input-width: 84px;
    --quantity-button-size: 49px;
    --quantity-gap: 5px;
    --quantity-control-width: calc(var(--quantity-input-width) + var(--quantity-button-size) * 2 + var(--quantity-gap) * 2);
}

.mechanic-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: start;
    gap: 18px;
}

.mechanic-panel {
    overflow: hidden;
}

.mechanic-art {
    position: relative;
    min-height: 285px;
    border-bottom: 2px solid #8c693d;
    background-repeat: no-repeat;
    background-size: cover;
}

.mechanic-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(10,14,9,.86), transparent 58%), linear-gradient(90deg, rgba(10,14,9,.25), transparent);
}

.explore-art {
    background-color: #344038;
}

.explore-art > img,
.army-art > img,
.farm-art > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.explore-art > img {
    object-position: 60% 50%;
}

.explore-art::after {
    background: linear-gradient(0deg, rgba(10,14,9,.68), transparent 53%);
}

.army-art,
.farm-art {
    background-color: #344038;
}

.farm-art > img {
    object-position: center 15%;
}

.army-art::after,
.farm-art::after {
    background: linear-gradient(0deg, rgba(10,14,9,.6), transparent 42%);
}

.mechanic-art-caption {
    position: absolute;
    z-index: 2;
    bottom: 22px;
    left: 25px;
    color: #f3e8cc;
}

.mechanic-art-caption span,
.mechanic-art-caption strong {
    display: block;
}

.mechanic-art-caption span {
    color: #d7b76d;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.mechanic-art-caption strong {
    margin-top: 4px;
    font-family: var(--serif);
    font-size: 29px;
    font-weight: 500;
    text-shadow: 0 2px 8px #000;
}

.mechanic-body {
    padding: 28px 30px 31px;
}

.mechanic-copy h2 {
    margin: 0;
    color: #3c2a18;
    font-family: var(--serif);
    font-size: 27px;
    font-weight: 500;
}

.mechanic-copy > p {
    margin: 8px 0 0;
    color: #70614e;
    font-family: var(--serif);
    font-size: 13px;
    line-height: 1.55;
}

.allocation-form,
.army-recruit-form,
.building-form {
    margin-top: 25px;
    padding-top: 24px;
    border-top: 1px solid rgba(111,82,47,.25);
}

.gold-allocation {
    display: grid;
    grid-template-columns: var(--quantity-button-size) var(--quantity-input-width) var(--quantity-button-size);
    justify-content: center;
    align-items: end;
    gap: 8px;
}

.gold-allocation button,
.quantity-step {
    width: var(--quantity-button-size);
    height: var(--quantity-button-size);
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #7f5c34;
    color: #f1dfb6;
    font-family: var(--serif);
    font-size: 25px;
    cursor: pointer;
    background: linear-gradient(#48513d, #273024);
    box-shadow: inset 0 0 0 2px rgba(220,190,117,.1), 0 2px 3px rgba(46,29,14,.2);
}

.gold-allocation button:disabled,
.quantity-step:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.quantity-control {
    display: grid;
    grid-template-columns: var(--quantity-button-size) var(--quantity-input-width) var(--quantity-button-size);
    align-items: center;
    gap: var(--quantity-gap);
    width: var(--quantity-control-width);
    flex: 0 0 auto;
    margin-left: auto;
}
.quantity-symbol {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    pointer-events: none;
}
.quantity-symbol::before,
.quantity-symbol-plus::after {
    content: '';
    position: absolute;
    background: currentColor;
    border-radius: 1px;
}
.quantity-symbol::before { width: 14px; height: 2px; left: 0; top: 6px; }
.quantity-symbol-plus::after { width: 2px; height: 14px; left: 6px; top: 0; }

.gold-allocation label > span,
.army-recruit-form label > span {
    display: block;
    margin-bottom: 5px;
    color: #6d5b45;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}

.gold-allocation input,
.army-recruit-form input {
    width: 100%;
    height: var(--quantity-button-size);
    border: 1px solid #93734b;
    color: #332516;
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 700;
    text-align: center;
    background: rgba(255,252,239,.76);
    box-shadow: inset 0 2px 5px rgba(72,44,19,.11);
}

.mechanic-main input[type="number"] {
    min-width: 0;
    padding-inline: 8px;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.mechanic-main input[type="number"]::-webkit-inner-spin-button,
.mechanic-main input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

.expedition-preview {
    margin: 18px 0;
    padding: 17px;
    border: 1px solid rgba(111,82,47,.28);
    text-align: center;
    background: rgba(207,189,150,.22);
}

.expedition-preview span,
.expedition-preview strong,
.expedition-preview small {
    display: block;
}

.expedition-preview span {
    color: #77664e;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.expedition-preview strong {
    margin: 5px 0;
    color: #593d20;
    font-family: var(--serif);
    font-size: 25px;
}

.expedition-preview strong b {
    font-weight: inherit;
}

.expedition-preview small {
    color: #8c7a61;
    font-family: var(--serif);
    font-size: 10px;
}

.button:disabled {
    opacity: .48;
    cursor: not-allowed;
    filter: grayscale(.35);
    transform: none;
}

.ledger-panel {
    overflow: hidden;
}

.realm-ledger {
    margin: 0;
    padding: 13px 19px 7px;
}

.realm-ledger > div {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid rgba(111,82,47,.2);
}

.realm-ledger dt {
    color: #766650;
    font-family: var(--serif);
    font-size: 11px;
}

.realm-ledger dd {
    margin: 0;
    color: #44301b;
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 700;
    text-align: right;
}

.realm-ledger .ledger-highlight {
    margin-inline: -19px;
    padding-inline: 19px;
    background: rgba(159,119,61,.1);
}

.ledger-highlight dd {
    color: #8b281f;
    font-size: 19px;
}

.ledger-note {
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center;
    gap: 9px;
    margin: 13px 17px 18px;
    padding: 13px;
    border: 1px solid rgba(111,82,47,.25);
    color: #6e604d;
    background: rgba(207,189,150,.18);
}

.ledger-note > span {
    color: #8f6934;
    font-size: 21px;
    text-align: center;
}

.ledger-note p {
    margin: 0;
    font-family: var(--serif);
    font-size: 10px;
    line-height: 1.45;
}

.army-recruit-form label {
    display: block;
    max-width: 250px;
    margin-inline: auto;
}

.cost-ribbon {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px 17px;
    margin: 18px 0;
    padding: 12px;
    border-block: 1px solid rgba(111,82,47,.18);
    color: #795b36;
    font-size: 10px;
    font-weight: 700;
}

.building-title-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 25px;
}

.building-level {
    display: grid;
    width: 75px;
    height: 75px;
    place-items: center;
    border: 1px solid #9d7947;
    border-radius: 50%;
    color: #6d4a25;
    font-family: var(--serif);
    font-size: 27px;
    font-weight: 700;
    background: radial-gradient(#f4e6c5, #ceb17b);
    box-shadow: inset 0 0 0 4px rgba(255,255,255,.25), 0 4px 10px rgba(62,39,17,.18);
}

.building-level small {
    margin-top: -21px;
    color: #806b4e;
    font-family: var(--sans);
    font-size: 7px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.building-costs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.building-costs > div {
    padding: 12px 8px;
    border: 1px solid rgba(111,82,47,.24);
    text-align: center;
    background: rgba(207,189,150,.2);
}

.building-costs span,
.building-costs small,
.building-costs strong {
    display: block;
}

.building-costs span {
    height: 24px;
    color: #8f6934;
    font-size: 19px;
}

.building-costs small {
    color: #86745d;
    font-size: 8px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.building-costs strong {
    margin-top: 3px;
    color: #4b351e;
    font-family: var(--serif);
    font-size: 14px;
}

.requirement-warning {
    margin: 12px 0 0;
    color: #8b2b22;
    font-family: var(--serif);
    font-size: 11px;
    text-align: center;
}

@media (max-width: 1000px) {
    .mechanic-layout {
        grid-template-columns: 1fr;
    }

    .profile-lower-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .game-header-simple {
        grid-template-columns: 92px 1fr;
    }

    .game-header-simple .player-menu {
        grid-column: auto;
        min-height: 76px;
        border-top: 0;
    }

    .profile-chronicle .chronicle-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .game-header-simple {
        grid-template-columns: 72px 1fr;
    }

    .game-header-simple .player-menu {
        min-width: 0;
        padding-right: 9px;
    }

    .settlement-card {
        height: 390px;
    }

    .settlement-caption {
        right: 25px;
        bottom: 27px;
        left: 25px;
    }

    .settlement-badge {
        top: 16px;
        right: 17px;
    }

    .mechanic-art {
        min-height: 220px;
    }

    .mechanic-body {
        padding: 23px 19px 25px;
    }

    .gold-allocation {
        grid-template-columns: var(--quantity-button-size) var(--quantity-input-width) var(--quantity-button-size);
    }

    .building-costs {
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 600px) {
    .mechanic-main { --quantity-input-width: 60px; --quantity-button-size: 44px; --quantity-gap: 4px; }
}

/* Profile status, rankings and guilds */
.profile-clean,
.overview-main {
    padding-top: 18px;
}

.positive-value {
    color: #3f6737 !important;
}

.negative-value {
    color: #922a22 !important;
}

.settlement-card-static {
    margin-top: 0;
    height: clamp(430px, 53vw, 650px);
}

.settlement-card-static img {
    object-position: center 45%;
}

.public-profile-card {
    height: clamp(560px, 53vw, 650px);
}

.public-message-frame {
    position: absolute;
    z-index: 5;
    top: 405px;
    left: 25px;
    display: flex;
    width: min(310px, calc(100% - 50px));
    min-height: 91px;
    align-items: center;
    gap: 15px;
    padding: 14px 17px;
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
    border: 1px solid #b58b45;
    color: #eee2c7;
    background:
        linear-gradient(135deg, rgba(199,158,76,.2), transparent 40%),
        rgba(18,25,18,.94);
    box-shadow: 0 12px 27px rgba(0,0,0,.45), inset 0 0 0 3px rgba(213,178,103,.12);
    backdrop-filter: blur(5px) saturate(.75);
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.public-message-frame::before {
    position: absolute;
    inset: 6px;
    clip-path: inherit;
    border: 1px solid rgba(218,181,101,.25);
    content: '';
    pointer-events: none;
}

.public-message-frame::after {
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    border: 1px solid #bd9146;
    background: #242b1e;
    box-shadow: inset 0 0 0 2px #684723;
    content: '';
    transform: translateX(-50%) rotate(45deg);
}

.public-message-frame:hover,
.public-message-frame:focus-visible {
    border-color: #d4ac61;
    outline: 0;
    color: #fff1ce;
    background:
        linear-gradient(135deg, rgba(220,176,88,.3), transparent 45%),
        rgba(23,31,22,.97);
    transform: translateY(-2px);
}

.message-letter {
    position: relative;
    display: block;
    width: 52px;
    height: 36px;
    flex: 0 0 auto;
    clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
    border: 1px solid #b99455;
    background:
        linear-gradient(34deg, transparent 48%, rgba(109,76,41,.5) 49% 51%, transparent 52%) left bottom / 51% 100% no-repeat,
        linear-gradient(-34deg, transparent 48%, rgba(109,76,41,.5) 49% 51%, transparent 52%) right bottom / 51% 100% no-repeat,
        linear-gradient(146deg, transparent 47%, rgba(128,91,48,.58) 48% 50%, transparent 51%) left top / 51% 82% no-repeat,
        linear-gradient(-146deg, transparent 47%, rgba(128,91,48,.58) 48% 50%, transparent 51%) right top / 51% 82% no-repeat,
        #dfcda4;
    box-shadow: 0 3px 8px rgba(0,0,0,.28), inset 0 0 8px rgba(94,61,26,.18);
    transform: rotate(-2deg);
}

.message-letter::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 13px;
    border: 1px solid #bd725d;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, #c96750, #7d201a 70%);
    box-shadow: 0 2px 4px rgba(60,20,12,.42);
    content: '';
    transform: translate(-50%, -25%);
}

.public-message-copy {
    position: relative;
    z-index: 1;
    display: block;
    min-width: 0;
}

.public-message-copy small,
.public-message-copy strong,
.public-message-copy em {
    display: block;
}

.public-message-copy small {
    color: #a99b7c;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.public-message-copy strong {
    margin-top: 2px;
    color: #f2dfb7;
    font-family: var(--serif);
    font-size: 17px;
}

.public-message-copy em {
    margin-top: 2px;
    overflow: hidden;
    color: #b99e6a;
    font-family: var(--serif);
    font-size: 10px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-profile-missing {
    max-width: 650px;
    padding: 45px;
    color: #5e4c35;
    text-align: center;
}

.public-profile-missing h1 {
    margin: 0 0 8px;
    color: #3f2d1c;
    font-family: var(--serif);
}

.realm-status-frame {
    position: absolute;
    z-index: 5;
    top: 25px;
    left: 25px;
    width: min(310px, calc(100% - 50px));
    padding: 19px 19px 14px;
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
    border: 1px solid #b58b45;
    color: #eee2c7;
    background:
        linear-gradient(135deg, rgba(199,158,76,.19), transparent 32%),
        linear-gradient(315deg, rgba(118,29,24,.14), transparent 36%),
        rgba(18,25,18,.93);
    box-shadow:
        0 14px 32px rgba(0,0,0,.52),
        inset 0 0 0 3px rgba(213,178,103,.12),
        inset 0 0 25px rgba(0,0,0,.4);
    backdrop-filter: blur(5px) saturate(.75);
}

.realm-status-frame::before {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(218,181,101,.28);
    clip-path: inherit;
    pointer-events: none;
}

.realm-status-frame::after {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    width: 15px;
    height: 15px;
    border: 1px solid #c39a50;
    background: #242b1e;
    box-shadow: inset 0 0 0 3px #684723;
    transform: translateX(-50%) rotate(45deg);
}

.realm-status-heading,
.realm-status-list {
    position: relative;
    z-index: 1;
}

.realm-status-heading {
    padding: 3px 3px 14px;
    border-bottom: 1px solid rgba(212,174,92,.48);
    text-align: center;
}

.realm-status-heading h2 {
    margin: 0;
    color: #fff3d5;
    font-family: var(--serif);
    font-size: 25px;
    font-weight: 600;
    text-shadow: 0 2px 5px #000;
}

.realm-status-heading > strong {
    display: block;
    max-width: 100%;
    margin-top: 5px;
    overflow: hidden;
    color: #c9a45d;
    font-family: var(--serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .045em;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px #000;
    white-space: nowrap;
}

.realm-status-list {
    margin: 8px 0 0;
}

.realm-status-list > div {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) minmax(78px, auto);
    align-items: center;
    gap: 12px;
    padding: 9px 4px;
    border-bottom: 1px solid rgba(221,190,123,.17);
}

.realm-status-list > div:last-child {
    border-bottom: 0;
}

.realm-status-list dt {
    color: #bfae8b;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.realm-status-list dd {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #f1e5c9;
    font-family: var(--serif);
    font-size: 15.5px;
    font-weight: 700;
    text-align: right;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px #000;
    white-space: nowrap;
}

.realm-status-list .status-power dd {
    color: #e7b768;
    font-size: 21px;
}

.realm-status-list .positive-value {
    color: #a8cf83 !important;
}

.realm-status-list .negative-value {
    color: #ee8b7e !important;
}

.realm-account-activity {
    position: relative;
    z-index: 1;
    margin-top: 9px;
}

.realm-activity-alert {
    display: grid;
    min-height: 48px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border: 1px solid rgba(198,163,91,.24);
    color: #c4b99e;
    background: rgba(4,10,7,.24);
    transition: border-color .18s ease, background .18s ease;
}

.realm-activity-alert:hover,
.realm-activity-alert:focus-visible,
.realm-activity-alert.has-news {
    border-color: rgba(208,164,78,.55);
    outline: 0;
    background: linear-gradient(90deg, rgba(134,40,30,.25), rgba(103,78,36,.12));
}

.realm-activity-envelope {
    display: block;
    width: 24px;
    height: 19px;
    flex-shrink: 0;
    background: url('/assets/images/sealed-envelope.svg') center / contain no-repeat;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}

.realm-activity-alert > span:nth-child(2) {
    display: grid;
    min-width: 0;
}

.realm-activity-alert small {
    color: #9f9175;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.realm-activity-alert strong {
    overflow: hidden;
    color: #f0dfba;
    font-family: var(--serif);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.realm-activity-alert em {
    color: #c9a55e;
    font-size: 7px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ranking-summary {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    margin-bottom: 17px;
    overflow: hidden;
}

.ranking-summary > div {
    display: flex;
    min-height: 92px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-right: 1px solid rgba(111,82,47,.22);
}

.ranking-summary > div:first-child {
    align-items: flex-start;
    padding-left: 28px;
    background: rgba(157,117,63,.1);
}

.ranking-summary > div:last-child {
    border-right: 0;
}

.ranking-summary span {
    color: #7e6e59;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ranking-summary strong {
    margin-top: 3px;
    color: #5a3d20;
    font-family: var(--serif);
    font-size: 25px;
}

.ranking-summary > div:first-child strong {
    color: #8b281f;
    font-size: 35px;
}

.ranking-panel {
    margin-bottom: 17px;
    overflow: hidden;
}

.ranking-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.ranking-table {
    width: 100%;
    border-collapse: collapse;
    color: #5c4d3b;
    font-family: var(--serif);
    font-size: 12px;
}

.ranking-table th {
    padding: 11px 15px;
    border-bottom: 1px solid #a98b61;
    color: #837158;
    font-family: var(--sans);
    font-size: 8px;
    letter-spacing: .09em;
    text-align: left;
    text-transform: uppercase;
    background: rgba(202,182,143,.28);
}

.ranking-table td {
    height: 51px;
    padding: 9px 15px;
    border-bottom: 1px solid rgba(111,82,47,.16);
    white-space: nowrap;
}

.ranking-table tbody tr:last-child td {
    border-bottom: 0;
}

.ranking-table tbody tr:hover td {
    background: rgba(159,119,61,.06);
}

.ranking-table td:nth-child(n+4),
.ranking-table th:nth-child(n+4) {
    text-align: right;
}

.rank-position {
    width: 68px;
    color: #8c693a;
    font-size: 15px;
    font-weight: 700;
    text-align: center !important;
}

.rank-faction-sigil {
    display: inline-grid;
    width: 25px;
    height: 25px;
    margin-right: 9px;
    place-items: center;
    border: 1px solid #aa8957;
    border-radius: 50%;
    color: #8d6938;
    background: #e4d4af;
}

.ranking-table td strong {
    color: #48331e;
}

.rank-player-link {
    display: inline-flex;
    align-items: center;
    color: inherit;
}

.rank-player-link strong {
    border-bottom: 1px solid transparent;
    transition: color .16s ease, border-color .16s ease;
}

.rank-player-link:hover strong,
.rank-player-link:focus-visible strong {
    border-color: #9f773d;
    color: #7e251e;
}

.rank-player-link:focus-visible {
    outline: 1px solid rgba(139,49,39,.35);
    outline-offset: 4px;
}

.ranking-table td small {
    margin-left: 8px;
    padding: 2px 5px;
    color: #f2e6c7;
    font-family: var(--sans);
    font-size: 7px;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: #8f2b22;
}

.rank-power {
    color: #7e251e;
    font-size: 14px;
    font-weight: 700;
}

.podium-row td {
    background: rgba(198,164,89,.08);
}

.podium-1 .rank-position { color: #ad7b19; }
.podium-2 .rank-position { color: #77736a; }
.podium-3 .rank-position { color: #985b32; }

.current-player-row td {
    background: rgba(139,40,31,.09) !important;
}

.current-player-row td:first-child {
    border-left: 4px solid #9b2e25;
}

.ranking-window-label {
    color: #8c795c;
    font-family: var(--serif);
    font-size: 11px;
}

.nearby-ranking-panel {
    scroll-margin-top: 90px;
}

@media (max-width: 720px) {
    /* Keep all five columns visible, allowing long names and values to wrap. */
    .ranking-table {
        table-layout: fixed;
        font-variant-numeric: tabular-nums;
    }

    .ranking-table th:nth-child(1) { width: 12%; text-align: center; }
    .ranking-table th:nth-child(2) { width: 30%; }
    .ranking-table th:nth-child(3) { width: 15%; }
    .ranking-table th:nth-child(4) { width: 25%; }
    .ranking-table th:nth-child(5) { width: 18%; }

    .ranking-table th,
    .ranking-table td {
        padding: 10px 4px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .ranking-table th { letter-spacing: .02em; }
    .ranking-table .rank-position { width: auto; }
    .rank-player-link { display: inline; }
    .rank-faction-sigil { display: none; }
    .ranking-table td small { margin-left: 3px; padding: 2px 3px; }
    .rank-power { font-size: 12px; }
}

.guild-empty-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
    gap: 18px;
}

.guild-callout,
.guild-create-panel,
.guild-overview,
.guild-members-panel {
    overflow: hidden;
}

.guild-banner-art {
    display: grid;
    min-height: 250px;
    place-items: center;
    border-bottom: 2px solid #8c693d;
    color: #ead294;
    font-size: 73px;
    text-shadow: 0 5px 18px #000;
    background:
        linear-gradient(0deg, rgba(11,16,10,.75), rgba(11,16,10,.15)),
        url('/assets/images/fortress-of-elarion.png') center 30% / cover;
}

.guild-callout-body {
    padding: 29px;
}

.guild-callout-body h2,
.guild-overview h2 {
    margin: 0;
    color: #3e2b18;
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 500;
}

.guild-callout-body > p,
.guild-overview p {
    color: #6e5f4b;
    font-family: var(--serif);
    font-size: 13px;
    line-height: 1.55;
}

.guild-callout-body ul {
    margin: 20px 0 0;
    padding: 15px 0 0 19px;
    border-top: 1px solid rgba(111,82,47,.2);
    color: #745f45;
    font-family: var(--serif);
    font-size: 12px;
    line-height: 1.8;
}

.guild-form {
    display: grid;
    gap: 19px;
    padding: 25px;
}

.guild-form label > span {
    display: block;
    margin-bottom: 6px;
    color: #604a31;
    font-family: var(--serif);
    font-size: 12px;
    font-weight: 700;
}

.guild-form input {
    width: 100%;
    height: 46px;
    padding: 9px 12px;
    border: 1px solid #967750;
    color: #2e2418;
    background: rgba(255,252,239,.72);
    box-shadow: inset 0 2px 5px rgba(72,44,19,.1);
}

.guild-form input:focus {
    border-color: #8b3127;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(139,49,39,.12);
}

.guild-overview {
    display: grid;
    grid-template-columns: 95px 1fr auto;
    align-items: center;
    gap: 23px;
    margin-bottom: 18px;
    padding: 24px;
}

.guild-crest {
    display: grid;
    width: 85px;
    height: 105px;
    place-items: center;
    border: 1px solid #76522d;
    color: #ecd495;
    font-family: var(--serif);
    background: linear-gradient(#8e3026, #4b1815);
    box-shadow: inset 0 0 0 4px rgba(235,205,135,.12), 0 5px 12px rgba(60,39,18,.22);
}

.guild-crest span {
    margin-bottom: -18px;
    font-size: 34px;
}

.guild-crest b {
    font-size: 11px;
}

.guild-role {
    padding: 8px 13px;
    border: 1px solid #a18459;
    color: #75532c;
    font-family: var(--serif);
    font-size: 11px;
    background: #e4d4af;
}

.mail-tabs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
    padding: 6px;
    border: 1px solid rgba(91,69,39,.72);
    background:
        linear-gradient(90deg, transparent, rgba(196,160,94,.1), transparent),
        rgba(19,34,28,.94);
    box-shadow: inset 0 0 0 1px rgba(194,155,85,.18), 0 4px 12px rgba(44,30,15,.18);
}

.mail-tabs::before,
.mail-tabs::after {
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    border: 1px solid #a3844e;
    background: #26382e;
    content: '';
    transform: translateY(-50%) rotate(45deg);
}

.mail-tabs::before { left: -5px; }
.mail-tabs::after { right: -5px; }

.mail-tabs > a {
    position: relative;
    display: grid;
    min-height: 67px;
    align-content: center;
    padding: 9px 48px 9px 17px;
    border: 1px solid rgba(164,132,77,.28);
    color: #b9aa8e;
    background: rgba(255,255,255,.018);
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.mail-tabs > a::after {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 13px;
    height: 13px;
    border: 1px solid currentColor;
    content: '';
    opacity: .45;
    transform: translateY(-50%) rotate(45deg);
}

.mail-tabs > a:hover,
.mail-tabs > a:focus-visible,
.mail-tabs > a.is-active {
    border-color: rgba(199,158,82,.78);
    color: #f0ddb3;
    outline: 0;
    background: linear-gradient(90deg, rgba(150,45,31,.18), rgba(191,147,69,.08));
}

.mail-tabs > a.is-active {
    box-shadow: inset 3px 0 #a33c2b;
}

.mail-tabs span,
.mail-tabs strong,
.mail-tabs em {
    display: block;
    font-family: var(--serif);
}

.mail-tabs span {
    margin-bottom: 2px;
    color: #917c59;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.mail-tabs strong {
    font-size: 16px;
}

.mail-tabs em {
    margin-top: 2px;
    color: #94866e;
    font-size: 9px;
    font-style: normal;
}

.mail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.mail-layout.has-compose {
    grid-template-columns: minmax(340px, .8fr) minmax(440px, 1.2fr);
}

.compose-message-panel,
.mailbox-panel {
    overflow: hidden;
}

.mail-heading-seal {
    position: relative;
    width: 34px;
    height: 34px;
    border: 1px solid #ad8955;
    border-radius: 50%;
    background: radial-gradient(circle at 37% 34%, #b44d3d, #762019 70%);
    box-shadow: inset 0 0 0 4px rgba(238,203,126,.13), 0 3px 8px rgba(75,38,21,.2);
}

.mail-heading-seal::after {
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(245,210,137,.52);
    content: '';
    transform: rotate(45deg);
}

.message-form {
    display: grid;
    gap: 16px;
    padding: 22px;
}

.message-form label,
.message-form label > span {
    display: grid;
}

.message-form label > span {
    margin-bottom: 6px;
    color: #715c42;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.message-form input,
.message-form select,
.message-form textarea {
    width: 100%;
    border: 1px solid #967750;
    color: #302317;
    font-family: var(--serif);
    font-size: 14px;
    background: rgba(255,252,239,.74);
    box-shadow: inset 0 2px 5px rgba(72,44,19,.1);
}

.message-form input,
.message-form select {
    height: 45px;
    padding: 9px 12px;
}

.message-form select {
    appearance: none;
    padding-right: 42px;
    background:
        linear-gradient(45deg, transparent 50%, #72522e 50%) calc(100% - 18px) 18px / 6px 6px no-repeat,
        linear-gradient(135deg, #72522e 50%, transparent 50%) calc(100% - 12px) 18px / 6px 6px no-repeat,
        rgba(255,252,239,.74);
}

.message-form textarea {
    min-height: 174px;
    padding: 12px;
    line-height: 1.55;
    resize: vertical;
}

.message-form input:focus,
.message-form select:focus,
.message-form textarea:focus {
    border-color: #8b3127;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(139,49,39,.12);
}

.message-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.message-form-actions > a,
.mail-player-directory,
.mail-reply-link {
    color: #805a30;
    font-family: var(--serif);
    font-size: 11px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mail-player-directory {
    padding: 9px 12px;
    border: 1px solid rgba(135,99,54,.38);
    text-decoration: none;
    background: rgba(235,219,182,.46);
}

.mail-empty-state {
    display: flex;
    min-height: 360px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 35px;
    color: #74634d;
    text-align: center;
}

.mail-empty-state .message-letter {
    width: 68px;
    height: 47px;
    margin-bottom: 17px;
}

.mail-empty-state h3 {
    margin: 0;
    color: #48331e;
    font-family: var(--serif);
    font-size: 22px;
}

.mail-empty-state p {
    max-width: 390px;
    margin: 8px 0 19px;
    font-family: var(--serif);
    font-size: 12px;
    line-height: 1.55;
}

.mail-list {
    display: grid;
}

.mail-list-row {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    min-height: 108px;
    padding: 17px 22px;
    border-bottom: 1px solid rgba(111,82,47,.24);
    color: #54432f;
    background: rgba(255,252,240,.27);
    transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

.mail-list-row:last-child {
    border-bottom: 0;
}

.mail-list-row.is-unread {
    background: linear-gradient(90deg, rgba(161,57,40,.11), rgba(255,252,240,.34) 38%);
    box-shadow: inset 3px 0 #9d3a2b;
}

.mail-list-row:hover,
.mail-list-row:focus-visible {
    color: #382718;
    outline: 0;
    background: rgba(210,184,128,.2);
    box-shadow: inset 4px 0 #943a2a;
}

.mail-row-sigil {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(138,102,55,.52);
    border-radius: 50%;
    color: #7d5a2d;
    font-size: 16px;
    background: rgba(225,204,161,.46);
}

.mail-row-content,
.mail-row-heading,
.mail-row-subject,
.mail-row-preview {
    display: block;
}

.mail-row-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.mail-row-heading strong {
    color: #4a331d;
    font-family: var(--serif);
    font-size: 14px;
}

.mail-row-sender {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mail-row-sender em {
    padding: 2px 6px;
    border: 1px solid rgba(156,56,42,.38);
    color: #973427;
    font-size: 7px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(167,59,42,.07);
}

.mail-row-heading time {
    color: #927f65;
    font-size: 8px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.mail-row-subject {
    margin-top: 5px;
    color: #3e2b19;
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 700;
}

.mail-row-preview {
    overflow: hidden;
    margin-top: 3px;
    color: #786650;
    font-family: var(--serif);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-row-open {
    padding-left: 13px;
    border-left: 1px solid rgba(125,91,49,.26);
    color: #825b30;
    font-family: var(--serif);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.mail-message-detail {
    padding: 25px 26px 27px;
    color: #55432e;
}

.mail-message-body {
    min-height: 165px;
    margin-top: 20px;
    padding: 22px;
    border: 1px solid rgba(125,92,53,.25);
    font-family: var(--serif);
    font-size: 14px;
    line-height: 1.75;
    background: rgba(255,252,238,.42);
    box-shadow: inset 0 0 24px rgba(111,77,39,.06);
}

.mail-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 18px;
}

.mail-letter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mail-letter-controls form {
    margin: 0;
}

.mail-letter-controls .button {
    min-height: 44px;
}

.mail-letter-controls .mail-delete-button {
    border-color: #8b5145;
    color: #ffe9dc;
    background: linear-gradient(#824a3d, #542b26);
}

.mail-letter-controls .mail-delete-button:hover {
    background: linear-gradient(#995d4e, #69382f);
}

.mail-detail-actions > a:first-child {
    color: #805a30;
    font-family: var(--serif);
    font-size: 11px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mail-item {
    position: relative;
    padding: 20px 23px 22px;
    border-bottom: 1px solid rgba(111,82,47,.2);
    color: #63523d;
    background: rgba(255,252,240,.25);
}

.mail-item:last-child {
    border-bottom: 0;
}

.mail-item:hover {
    background: rgba(204,181,135,.13);
}

.mail-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.mail-item-meta > a {
    display: inline-flex;
    align-items: center;
    color: #4b3520;
    font-family: var(--serif);
}

.mail-item-meta time {
    color: #93816a;
    font-size: 8px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mail-item h3 {
    margin: 13px 0 6px;
    color: #3f2d1b;
    font-family: var(--serif);
    font-size: 18px;
}

.mail-item p {
    margin: 0 0 13px;
    font-family: var(--serif);
    font-size: 12px;
    line-height: 1.6;
}

@media (max-width: 1180px) {
    .guild-empty-layout {
        grid-template-columns: 1fr;
    }

    .mail-layout.has-compose {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .settlement-card-static {
        height: 480px;
        margin-top: 0;
    }

    .public-profile-card {
        height: 540px;
    }

    .realm-status-frame {
        top: 14px;
        left: 14px;
        width: min(300px, calc(100% - 28px));
        padding: 16px 16px 11px;
    }

    .realm-status-heading h2 {
        font-size: 21px;
    }

    .realm-status-list {
        margin-top: 6px;
    }

    .realm-status-list > div {
        padding: 7px 3px;
    }

    .realm-status-list dd {
        font-size: 13px;
    }

    .public-message-frame {
        top: 344px;
        left: 14px;
        width: min(300px, calc(100% - 28px));
        min-height: 88px;
        padding: 13px 15px;
    }

    .public-message-copy strong {
        font-size: 15px;
    }

    .mailbox-panel .game-panel-heading {
        align-items: flex-start;
        gap: 12px;
        flex-direction: column;
    }

    .mail-tabs {
        grid-template-columns: 1fr;
    }

    .mail-tabs > a {
        min-height: 61px;
    }

    .mail-list-row {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 11px;
        padding: 15px;
    }

    .mail-row-sigil {
        width: 32px;
        height: 32px;
    }

    .mail-row-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .mail-row-open {
        display: none;
    }

    .mail-message-detail {
        padding: 18px;
    }

    .mail-message-body {
        padding: 16px;
    }

    .mail-detail-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .message-form-actions,
    .mail-item-meta {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .ranking-summary > div,
    .ranking-summary > div:first-child {
        min-height: 75px;
        align-items: center;
        padding-left: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(111,82,47,.22);
    }

    .guild-overview {
        grid-template-columns: 75px 1fr;
    }

    .guild-crest {
        width: 70px;
        height: 88px;
    }

    .guild-role {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* Permanent compact kingdom HUD */
@media (max-width: 1180px) {
    .game-header-simple {
        grid-template-columns: 96px minmax(460px, 1fr) auto;
    }

    .game-header-simple .game-brand {
        padding-inline: 14px;
        font-size: 0;
    }

    .game-header-simple .game-brand .brand-rune {
        margin-inline: auto;
    }

    .game-header-simple .player-menu {
        min-width: 205px;
        padding-inline: 12px;
    }
}

@media (max-width: 900px) {
    .game-header-simple {
        position: sticky;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 64px;
        min-height: 64px;
    }

    .game-header-simple .game-brand,
    .game-header-simple .player-menu {
        display: none;
    }

    .game-header-hud {
        grid-row: 1;
        grid-column: 1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        padding: 5px 7px;
        border-top: 0;
    }

    .game-shell {
        display: block;
        min-height: calc(100vh - 64px);
    }

    .mobile-menu-bar {
        position: sticky;
        z-index: 18;
        top: 64px;
        display: flex;
        height: 58px;
        align-items: center;
        justify-content: space-between;
        padding: 0 13px 0 18px;
        border-bottom: 2px solid #81623c;
        color: #eee2c7;
        background:
            linear-gradient(90deg, rgba(199,157,83,.09), transparent 36%, rgba(199,157,83,.06)),
            #222920;
        box-shadow: 0 5px 15px rgba(13,14,10,.28);
    }

    .mobile-menu-bar > span,
    .mobile-menu-heading > span {
        display: grid;
        gap: 2px;
        min-width: 0;
    }

    .mobile-menu-bar small,
    .mobile-menu-heading small {
        color: #a99979;
        font-family: var(--sans);
        font-size: 7.5px;
        font-weight: 600;
        letter-spacing: .14em;
        line-height: 1;
        text-transform: uppercase;
    }

    .mobile-menu-bar strong,
    .mobile-menu-heading strong {
        overflow: hidden;
        font-family: var(--serif);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: .03em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-menu-toggle {
        position: relative;
        display: flex;
        height: 40px;
        align-items: center;
        gap: 8px;
        padding: 0 13px;
        border: 1px solid #98723f;
        color: #ead9b6;
        background:
            linear-gradient(135deg, transparent 7px, rgba(199,157,83,.12) 7px, rgba(199,157,83,.04) calc(100% - 7px), transparent calc(100% - 7px)),
            #30382c;
        box-shadow: inset 0 0 0 2px rgba(20,25,18,.55), 0 2px 7px rgba(0,0,0,.24);
        font-family: var(--serif);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .mobile-menu-toggle::before,
    .mobile-menu-toggle::after {
        position: absolute;
        top: 4px;
        bottom: 4px;
        width: 1px;
        background: rgba(207,169,95,.35);
        content: '';
    }

    .mobile-menu-toggle::before { left: 4px; }
    .mobile-menu-toggle::after { right: 4px; }

    .hamburger-lines {
        display: grid;
        width: 18px;
        gap: 4px;
    }

    .hamburger-lines i {
        display: block;
        height: 1px;
        background: #d6b46e;
        box-shadow: 0 1px rgba(0,0,0,.5);
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    body.mobile-menu-open .game-shell {
        z-index: 30;
    }

    .mobile-menu-backdrop {
        position: fixed;
        z-index: 89;
        inset: 0;
        display: block;
        visibility: hidden;
        opacity: 0;
        background: rgba(8,11,8,.68);
        backdrop-filter: blur(2px);
        transition: opacity .22s ease, visibility .22s ease;
    }

    body.mobile-menu-open .mobile-menu-backdrop {
        visibility: visible;
        opacity: 1;
    }

    .game-sidebar {
        position: fixed;
        z-index: 90;
        top: 0;
        bottom: 0;
        left: 0;
        display: flex;
        visibility: hidden;
        width: min(310px, 86vw);
        height: 100vh;
        min-height: 0;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        border-right: 1px solid #997344;
        border-bottom: 0;
        box-shadow: 14px 0 34px rgba(0,0,0,.44);
        transform: translateX(-105%);
        transition: transform .24s ease, visibility .24s ease;
    }

    body.mobile-menu-open .game-sidebar {
        visibility: visible;
        transform: translateX(0);
    }

    .mobile-menu-heading {
        display: flex;
        width: 100%;
        min-height: 84px;
        flex: 0 0 auto;
        align-items: center;
        justify-content: space-between;
        padding: 13px 16px 13px 23px;
        border-bottom: 1px solid #765934;
        color: #f0e1bf;
        background:
            radial-gradient(circle at 0 0, rgba(206,160,75,.2), transparent 45%),
            linear-gradient(#313a2e, #222920);
    }

    .mobile-menu-heading strong {
        max-width: 205px;
        color: #d8bd82;
        font-size: 17px;
    }

    .mobile-menu-close {
        display: grid;
        width: 37px;
        height: 37px;
        flex: 0 0 auto;
        place-items: center;
        border: 1px solid #8a693d;
        color: #d8bd82;
        background: rgba(8,12,8,.22);
        font-family: var(--serif);
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
    }

    .sidebar-item {
        width: calc(100% - 20px);
        min-width: 0;
        height: 58px;
        min-height: 58px;
        flex: 0 0 auto;
        margin: 6px 10px 0;
        padding: 0 24px;
    }

    .sidebar-item:hover,
    .sidebar-item:focus-visible,
    .sidebar-item.active {
        padding-left: 30px;
    }

    .sidebar-connection {
        display: grid;
        width: auto;
        margin: auto 18px 14px;
    }

    .header-status {
        min-height: 49px;
        grid-template-columns: minmax(0, 1fr);
        padding: 4px 5px;
        text-align: center;
    }

    .header-status-summary small {
        display: block;
        margin-bottom: 2px;
        font-size: 8.5px;
    }

    .header-status-summary strong {
        font-size: 12px;
    }

    .header-status-summary em {
        margin-left: 1px;
        font-size: 7.5px;
    }

    .header-status[data-gold-widget] .header-status-summary em {
        display: none;
    }

    .header-status-tooltip,
    .header-status:first-child .header-status-tooltip,
    .header-status-tooltip-right {
        position: fixed;
        top: 126px;
        right: 12px;
        left: 12px;
        width: auto;
        transform: translateY(-4px);
    }

    .header-status-tooltip::before,
    .header-status:first-child .header-status-tooltip::before,
    .header-status-tooltip-right::before {
        display: none;
    }

    .header-status:hover .header-status-tooltip,
    .header-status:focus-visible .header-status-tooltip,
    .header-status:focus-within .header-status-tooltip,
    .header-status:first-child:hover .header-status-tooltip,
    .header-status:first-child:focus-visible .header-status-tooltip,
    .header-status:first-child:focus-within .header-status-tooltip,
    .header-status:hover .header-status-tooltip-right,
    .header-status:focus-visible .header-status-tooltip-right,
    .header-status:focus-within .header-status-tooltip-right {
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    .header-status {
        padding-inline: 2px;
    }

    .header-status-summary small {
        font-size: 7.5px;
        letter-spacing: .025em;
    }

    .header-status-summary strong {
        font-size: 11px;
    }

    .mobile-menu-bar {
        padding-left: 14px;
    }

    .mobile-menu-toggle {
        padding-inline: 11px;
    }
}