:root {
    --bg: #101018;
    --panel: #1a1d2b;
    --panel-2: #252a3c;
    --border-dark: #07070b;
    --border-light: #56607a;
    --text: #f2e7c9;
    --muted: #b8a982;
    --gold: #ffd166;
    --danger: #ff6b6b;
    --good: #77dd77;
    --blue: #6fa8dc;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    font-family: "Courier New", monospace;
    color: var(--text);
    background:
        linear-gradient(45deg, rgba(255,255,255,0.025) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,0.025) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.025) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.025) 75%),
        var(--bg);
    background-size: 16px 16px;
}

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

button,
input {
    font-family: inherit;
}

.pixel-panel {
    background: var(--panel);
    border: 4px solid var(--border-dark);
    box-shadow:
        inset 0 0 0 3px var(--border-light),
        0 8px 0 rgba(0, 0, 0, 0.35);
}

.pixel-button {
    display: inline-block;
    border: 3px solid #120f08;
    background: #7f4f24;
    color: #fff4d6;
    padding: 12px 16px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 2px #d18b3c, 0 4px 0 #0b0805;
}

.pixel-button:hover:not(:disabled) {
    transform: translateY(1px);
    box-shadow: inset 0 0 0 2px #f0b45f, 0 3px 0 #0b0805;
}

.pixel-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pixel-button.gold {
    background: #946b16;
    box-shadow: inset 0 0 0 2px #ffd166, 0 4px 0 #0b0805;
}

.pixel-button.small {
    padding: 8px 10px;
    font-size: 12px;
}

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

.alert {
    padding: 12px 14px;
    border: 3px solid #000;
    margin-bottom: 12px;
    grid-column: 1 / -1;
}

.alert.error {
    background: rgba(255, 107, 107, 0.15);
    color: #ffd0d0;
}

.alert.success {
    background: rgba(119, 221, 119, 0.15);
    color: #caffca;
}

/* AUTH */

.auth-body {
    display: grid;
    place-items: center;
    padding: 24px;
}

.auth-shell {
    width: min(1100px, 100%);
    display: grid;
    gap: 20px;
}

.hero-card {
    padding: 32px;
    text-align: center;
    background:
        radial-gradient(circle at center top, rgba(255, 209, 102, 0.18), transparent 45%),
        var(--panel);
}

.tiny-label {
    color: var(--gold);
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: bold;
}

.hero-card h1 {
    font-size: clamp(32px, 7vw, 68px);
    margin: 14px 0 10px;
    text-shadow: 4px 4px 0 #000;
}

.hero-card p {
    max-width: 700px;
    margin: 0 auto 18px;
    line-height: 1.6;
}

.feature-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.feature-row span {
    border: 2px solid var(--border-light);
    background: var(--panel-2);
    padding: 8px 10px;
    color: var(--gold);
    font-size: 12px;
}

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

.form-card {
    padding: 22px;
}

.form-card h2 {
    margin-top: 0;
}

.form-card label {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--muted);
}

.form-card input {
    width: 100%;
    background: #0d0f19;
    color: var(--text);
    border: 3px solid #000;
    box-shadow: inset 0 0 0 2px var(--border-light);
    padding: 12px;
}

/* GAME */

.game-body {
    padding: 16px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    border: 4px solid #000;
    background: #171a26;
    box-shadow: inset 0 0 0 2px var(--border-light);
    margin-bottom: 16px;
}

.brand {
    color: var(--gold);
    margin-right: 12px;
}

.topbar nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-weight: bold;
}

.topbar a.disabled {
    color: #727272;
    pointer-events: none;
}

.resource-bar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

.resource {
    background: #111420;
    border: 3px solid #000;
    box-shadow: inset 0 0 0 2px #3c455d;
    padding: 12px;
    min-width: 0;
}

.resource span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 5px;
}

.resource strong {
    display: inline-block;
    color: var(--gold);
    font-size: clamp(18px, 3vw, 26px);
}

.resource small {
    display: block;
    color: #9c92a8;
    margin-top: 3px;
}

.game-shell {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 16px;
}

.side-panel {
    padding: 18px;
    align-self: start;
    position: sticky;
    top: 16px;
}

.side-panel h2 {
    margin: 0 0 6px;
    color: var(--gold);
}

.side-panel h3 {
    margin: 0 0 10px;
}

.queue-box,
.rates-box,
.phase-box {
    background: #111420;
    border: 3px solid #000;
    box-shadow: inset 0 0 0 2px #3c455d;
    padding: 14px;
    margin-top: 14px;
}

.rates-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rates-box li {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}

.progress-shell {
    width: 100%;
    height: 14px;
    border: 2px solid #000;
    background: #080a10;
    overflow: hidden;
}

.progress-fill {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        #ffd166 0 8px,
        #a6721d 8px 16px
    );
    animation: march 1s linear infinite;
}

@keyframes march {
    from { transform: translateX(-16px); }
    to { transform: translateX(0); }
}

.map-panel {
    padding: 18px;
    min-width: 0;
}

.map-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
    margin-bottom: 18px;
}

.map-title h1 {
    margin: 0 0 6px;
    color: var(--gold);
    text-shadow: 3px 3px 0 #000;
}

.map-title p {
    margin: 0;
    color: var(--muted);
}

.city-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.loading {
    padding: 40px;
    color: var(--muted);
}

.building-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05), transparent),
        #151927;
    border: 4px solid #000;
    box-shadow: inset 0 0 0 2px #4d5874;
    padding: 14px;
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 12px;
    min-height: 178px;
}

.building-card.cannot-afford {
    filter: saturate(0.75);
}

.sprite-wrap {
    display: grid;
    place-items: center;
    background:
        linear-gradient(#264c2c 0 50%, #1f3d24 50% 100%);
    border: 3px solid #000;
    box-shadow: inset 0 0 0 2px #6d8f54;
    min-height: 72px;
}

.pixel-sprite {
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    border: 3px solid #000;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.35);
}

.pixel-sprite.town-hall {
    background:
        linear-gradient(90deg, transparent 0 8px, #704214 8px 40px, transparent 40px),
        linear-gradient(90deg, transparent 0 14px, #c0392b 14px 34px, transparent 34px),
        linear-gradient(#d9a441 0 10px, #704214 10px 48px);
}

.pixel-sprite.warehouse {
    background:
        linear-gradient(90deg, #5f3b1e 0 12px, #8a5a2f 12px 36px, #5f3b1e 36px),
        linear-gradient(#d07a2d 0 12px, #7a4b25 12px 48px);
}

.pixel-sprite.lumber {
    background:
        radial-gradient(circle at 26px 16px, #2f9e44 0 14px, transparent 15px),
        linear-gradient(90deg, transparent 0 20px, #7a4b25 20px 28px, transparent 28px),
        linear-gradient(#193b1f 0 48px);
}

.pixel-sprite.quarry {
    background:
        linear-gradient(135deg, #999 0 12px, #666 12px 24px, #aaa 24px 36px, #555 36px),
        #444;
}

.pixel-sprite.iron {
    background:
        radial-gradient(circle at 20px 20px, #b8c0cc 0 8px, transparent 9px),
        radial-gradient(circle at 32px 29px, #8d99ae 0 9px, transparent 10px),
        linear-gradient(#3a3042 0 48px);
}

.pixel-sprite.farm {
    background:
        repeating-linear-gradient(
            0deg,
            #9a6a20 0 6px,
            #d5962a 6px 12px
        );
}

.pixel-sprite.tax {
    background:
        linear-gradient(90deg, transparent 0 10px, #e6c15a 10px 38px, transparent 38px),
        linear-gradient(#6d4c1e 0 12px, #b8860b 12px 48px);
}

.pixel-sprite.barracks {
    background:
        linear-gradient(90deg, transparent 0 12px, #8b1e1e 12px 36px, transparent 36px),
        linear-gradient(#b23a3a 0 14px, #5b3a29 14px 48px);
}

.pixel-sprite.wall {
    background:
        repeating-linear-gradient(
            90deg,
            #737373 0 8px,
            #565656 8px 16px
        );
}

.building-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

.building-head h3 {
    margin: 0;
    color: var(--gold);
}

.building-head span {
    background: #090b11;
    border: 2px solid #000;
    padding: 4px 6px;
    color: #f8e9bd;
    white-space: nowrap;
}

.building-info p {
    color: var(--muted);
    margin: 8px 0;
    line-height: 1.35;
    font-size: 13px;
}

.cost-line,
.time-line {
    color: #d7ccaa;
    font-size: 12px;
    margin-bottom: 8px;
}

@media (max-width: 850px) {
    .auth-grid,
    .game-shell,
    .resource-bar {
        grid-template-columns: 1fr;
    }

    .side-panel {
        position: static;
    }

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

@media (max-width: 520px) {
    .building-card {
        grid-template-columns: 1fr;
    }

    .sprite-wrap {
        min-height: 88px;
    }

    .hero-card,
    .form-card,
    .side-panel,
    .map-panel {
        padding: 16px;
    }
}

/* MORALFORGE MAP-CENTERED UPDATES */

.topbar a.active {
    color: #fff4d6;
    background: #5c3b1d;
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px var(--gold);
    padding: 4px 8px;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.button-row.stacked {
    justify-content: flex-start;
}

.kingdom-stage,
.world-stage {
    background:
        radial-gradient(circle at center, rgba(255, 209, 102, 0.08), transparent 50%),
        #0d1119;
    border: 4px solid #000;
    box-shadow: inset 0 0 0 3px #3c455d;
    padding: 14px;
    overflow: auto;
}

.kingdom-grid {
    display: grid;
    gap: 4px;
    min-width: 720px;
    transform-origin: top left;
}

.kingdom-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 3px solid #111;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);
    cursor: pointer;
    overflow: hidden;
    color: #fff4d6;
    font-family: inherit;
    text-shadow: 2px 2px 0 #000;
}

.kingdom-tile.grass {
    background:
        radial-gradient(circle at 15px 16px, rgba(255,255,255,.08) 0 2px, transparent 3px),
        linear-gradient(135deg, #2e6b34 0 50%, #25582b 50%);
}

.kingdom-tile.road {
    background:
        repeating-linear-gradient(45deg, #75512a 0 8px, #68451f 8px 16px);
}

.kingdom-tile.edge {
    background:
        repeating-linear-gradient(90deg, #585858 0 8px, #474747 8px 16px);
}

.kingdom-tile.has-building {
    background:
        linear-gradient(135deg, #365c2b 0 50%, #2b4d25 50%);
}

.kingdom-tile.cat-resource {
    box-shadow: inset 0 0 0 2px #77aa55;
}

.kingdom-tile.cat-military,
.kingdom-tile.cat-defense {
    box-shadow: inset 0 0 0 2px #c85050;
}

.kingdom-tile.cat-alliance {
    box-shadow: inset 0 0 0 2px #6fa8dc;
}

.kingdom-tile.cat-economy {
    box-shadow: inset 0 0 0 2px #ffd166;
}

.kingdom-tile.locked-building {
    filter: grayscale(0.7) brightness(0.65);
}

.kingdom-tile.selected {
    outline: 4px solid var(--gold);
    z-index: 2;
}

.kingdom-tile:hover {
    transform: translateY(-2px);
    z-index: 3;
}

.pixel-sprite.mini {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
}

.tile-level {
    position: absolute;
    left: 3px;
    top: 3px;
    background: #080a10;
    border: 2px solid #000;
    padding: 1px 3px;
    font-size: 10px;
}

.tile-name {
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: rgba(0,0,0,0.58);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 2px;
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tile-grain {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.35;
    background:
        radial-gradient(circle at 20% 30%, #8ccf65 0 2px, transparent 3px),
        radial-gradient(circle at 60% 70%, #b6d36b 0 2px, transparent 3px),
        radial-gradient(circle at 75% 22%, #4f8b3f 0 2px, transparent 3px);
}

.detail-sprite {
    display: grid;
    place-items: center;
    background: #0d0f19;
    border: 3px solid #000;
    box-shadow: inset 0 0 0 2px #3c455d;
    padding: 12px;
    margin-bottom: 10px;
}

.pixel-sprite.embassy {
    background:
        linear-gradient(90deg, transparent 0 10px, #415a77 10px 38px, transparent 38px),
        linear-gradient(#96b9e0 0 10px, #2d4059 10px 48px);
}

.pixel-sprite.rally {
    background:
        linear-gradient(90deg, transparent 0 22px, #4b2d16 22px 27px, transparent 27px),
        linear-gradient(90deg, transparent 0 28px, #b23a3a 28px 42px, transparent 42px),
        linear-gradient(#2b4d25 0 48px);
}

.pixel-sprite.market {
    background:
        linear-gradient(90deg, #c0392b 0 12px, #f2d16b 12px 24px, #c0392b 24px 36px, #f2d16b 36px 48px),
        linear-gradient(#8a5a2f 0 18px, #5f3b1e 18px 48px);
}

.legend-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    color: var(--muted);
    font-size: 12px;
}

.legend-row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend {
    width: 16px;
    height: 16px;
    display: inline-block;
    border: 2px solid #000;
}

.legend.grass { background: #2e6b34; }
.legend.road { background: #75512a; }
.legend.wall { background: #676767; }
.legend.locked { background: #343434; }
.legend.plain { background: #4f8b3f; }
.legend.forest { background: #1e6b33; }
.legend.mountain { background: #7f7f7f; }
.legend.water { background: #2b65a3; }
.legend.city { background: #b8860b; }
.legend.camp { background: #8b1e1e; }

.world-shell {
    display: grid;
    grid-template-columns: 310px 1fr;
    gap: 16px;
}

.map-controls {
    display: grid;
    gap: 8px;
    justify-items: center;
    margin-top: 12px;
}

.map-controls > div {
    display: flex;
    gap: 6px;
}

.world-grid {
    display: grid;
    gap: 3px;
    width: max-content;
    user-select: none;
    touch-action: none;
}

.world-tile {
    width: 42px;
    height: 42px;
    position: relative;
    border: 2px solid #000;
    color: #fff4d6;
    cursor: pointer;
    font-family: inherit;
    text-shadow: 2px 2px 0 #000;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.world-tile span {
    display: block;
    font-size: 18px;
    line-height: 20px;
}

.world-tile small {
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    font-size: 7px;
    color: rgba(255,255,255,0.7);
}

.world-tile.terrain-plain {
    background: #4f8b3f;
}

.world-tile.terrain-forest {
    background:
        radial-gradient(circle at 18px 15px, #2fa84f 0 11px, transparent 12px),
        #1e6b33;
}

.world-tile.terrain-mountain {
    background:
        linear-gradient(135deg, transparent 0 30%, #b0b0b0 30% 50%, #676767 50% 70%, transparent 70%),
        #585858;
}

.world-tile.terrain-hill {
    background:
        radial-gradient(ellipse at 50% 75%, #8d7d42 0 45%, transparent 46%),
        #566f38;
}

.world-tile.terrain-field {
    background:
        repeating-linear-gradient(0deg, #b58d35 0 5px, #d7b24a 5px 10px);
}

.world-tile.terrain-water {
    background:
        repeating-linear-gradient(45deg, #2b65a3 0 7px, #3677bd 7px 14px);
}

.world-tile.player-city {
    background:
        radial-gradient(circle at center, #ffd166 0 8px, transparent 9px),
        linear-gradient(135deg, #704214 0 50%, #5c3010 50%);
    outline: 3px solid #ffd166;
}

.world-tile.other-city {
    background:
        radial-gradient(circle at center, #b23a3a 0 8px, transparent 9px),
        linear-gradient(135deg, #704214 0 50%, #5c3010 50%);
}

.world-tile.npc-camp {
    outline: 2px solid #ff6b6b;
}

.world-tile.selected {
    outline: 4px solid #fff4d6;
    z-index: 4;
}

.world-tile:hover {
    transform: scale(1.08);
    z-index: 5;
}

@media (max-width: 950px) {
    .world-shell {
        grid-template-columns: 1fr;
    }

    .kingdom-grid {
        min-width: 620px;
    }
}

@media (max-width: 520px) {
    .button-row {
        justify-content: flex-start;
    }

    .kingdom-grid {
        min-width: 560px;
    }

    .pixel-sprite.mini {
        width: 32px;
        height: 32px;
    }
}


/* MoralForge v2 real kingdom map overrides */
.kingdom-stage { padding: 10px; overflow: auto; max-height: calc(100vh - 230px); }
.kingdom-grid.real-kingdom-map {
    display: block;
    position: relative;
    min-width: 1152px;
    width: 1152px;
    height: 768px;
    background: #3c722f url('tiles/grass.png') repeat;
    border: 4px solid #000;
    box-shadow: inset 0 0 0 3px #364155, inset 0 0 45px rgba(0,0,0,.45);
    overflow: hidden;
}
.mf-tile { position: absolute; width: 64px; height: 64px; background-size: 64px 64px; image-rendering: pixelated; outline: 1px solid rgba(0,0,0,.12); }
.mf-tile.terrain-grass { background-image: url('tiles/grass.png'); }
.mf-tile.terrain-field { background-image: url('tiles/field.png'); }
.mf-tile.terrain-water { background-image: url('tiles/water.png'); }
.mf-tile.terrain-road { background-image: url('tiles/road.png'); }
.mf-tile.terrain-stone_floor { background-image: url('tiles/stone_floor.png'); }
.mf-sprite { position: absolute; width: 64px; height: 64px; image-rendering: pixelated; z-index: 7; filter: drop-shadow(4px 6px 0 rgba(0,0,0,.35)); user-select: none; }
.mf-sprite.resource { z-index: 5; }
.mf-sprite.wall { z-index: 9; pointer-events: none; }
.mf-sprite.building { z-index: 11; cursor: pointer; }
.mf-sprite.locked { opacity: .45; filter: grayscale(.8) drop-shadow(4px 6px 0 rgba(0,0,0,.35)); }
.mf-hit { position: absolute; width:64px; height:64px; z-index: 20; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.mf-hit:hover { opacity: 1; background: rgba(255, 209, 102, .14); box-shadow: inset 0 0 0 2px #ffd166; }
.mf-level, .mf-bonus { position:absolute; z-index: 22; pointer-events:none; font-size: 13px; font-weight: bold; line-height: 1; padding: 3px 5px; border: 2px solid #000; background:#080b10; color:#ffe690; box-shadow: inset 0 0 0 1px #a98435; text-shadow: 1px 1px 0 #000; }
.mf-bonus { color:#9cff70; background:#12240d; box-shadow: inset 0 0 0 1px #3c8a30; font-size: 12px; }
.mf-selected-ring { position:absolute; width:64px; height:64px; border: 3px solid #ffe690; box-shadow: 0 0 0 2px #000, inset 0 0 12px #ffe690; z-index:21; pointer-events:none; animation: mfPulse 1s steps(2) infinite; }
@keyframes mfPulse { 50% { opacity:.5; } }
.detail-sprite img { image-rendering: pixelated; filter: drop-shadow(4px 6px 0 rgba(0,0,0,.35)); }
.bonus-pill { display: inline-block; padding: 2px 6px; background:#12240d; color:#9cff70; border: 2px solid #000; box-shadow: inset 0 0 0 1px #3c8a30; }
.legend-row { display:none; }
.map-title p { max-width: 900px; }
@media (max-width: 950px) { .kingdom-grid.real-kingdom-map { transform: scale(.82); transform-origin: top left; margin-bottom: -135px; } }