:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #111614;
    color: #edf1e9;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-width: 320px; min-height: 100%; }

body {
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    background: #111614;
}

button, input { font: inherit; }

.world-shell { height: 100vh; height: 100dvh; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }

.game-header {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
    align-items: center;
    gap: 24px;
    min-height: 72px;
    padding: 10px clamp(16px, 3vw, 40px);
    border-bottom: 1px solid rgba(228, 235, 220, .1);
    background: rgba(18, 24, 21, .97);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .22);
}

.game-brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; color: inherit; text-decoration: none; }
.game-brand__mark { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #9aaa74; border-radius: 50%; color: #d9e7b3; font-family: Georgia, serif; font-size: 22px; background: linear-gradient(145deg, #42513c, #243026); box-shadow: inset 0 0 0 3px rgba(15, 21, 17, .6); }
.game-brand strong, .game-brand small { display: block; }
.game-brand strong { font-family: Georgia, serif; font-size: 20px; letter-spacing: .02em; }
.game-brand small { margin-top: 1px; color: #95a295; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }

.game-nav { display: flex; align-items: stretch; align-self: stretch; gap: 4px; }
.game-nav a, .game-nav span { position: relative; display: grid; place-items: center; padding: 0 13px; color: #879189; font-size: 13px; text-decoration: none; white-space: nowrap; }
.game-nav span { cursor: default; opacity: .55; }
.game-nav .is-active { color: #e9efdf; }
.game-nav .is-active::after { content: ""; position: absolute; right: 12px; bottom: -10px; left: 12px; height: 2px; background: #a9bd73; box-shadow: 0 0 12px rgba(169, 189, 115, .5); }

.admin-link { justify-self: end; padding: 8px 12px; border: 1px solid rgba(205, 219, 190, .2); border-radius: 8px; color: #bac4b8; font-size: 12px; text-decoration: none; }
.admin-link:hover { color: #fff; border-color: rgba(205, 219, 190, .4); }

.map-layout { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 310px; overflow: hidden; }
.map-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 36%, rgba(81, 105, 85, .3), transparent 38%), linear-gradient(#222b26, #141a17); }
.map-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .24; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(circle at center, black, transparent 75%); }

.world-map-layer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 520px; }
#world-map-pixi-canvas { cursor: grab; touch-action: none; }

.map-heading { position: absolute; z-index: 2; top: clamp(18px, 3vw, 34px); left: clamp(18px, 3vw, 38px); pointer-events: none; text-shadow: 0 2px 18px rgba(9, 14, 11, .85); }

.travel-hud { position: absolute; z-index: 3; top: 20px; left: 50%; display: flex; align-items: center; gap: 12px; min-width: 330px; padding: 10px 12px; border: 1px solid rgba(220,231,209,.16); border-radius: 10px; background: rgba(17,24,20,.9); box-shadow: 0 8px 28px rgba(0,0,0,.24); transform: translateX(-50%); }
.travel-hud > div { display: grid; min-width: 120px; }
.travel-character { gap: 3px; }
.travel-character > label { color: #8e9a90; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.travel-character select { min-width: 142px; font-weight: 600; }
.travel-hud span { color: #8e9a90; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.travel-hud strong { color: #eef1e9; font-family: Georgia, serif; font-size: 15px; font-weight: 500; }
.travel-hud small { color: #c7d0c4; font-size: 10px; }
.travel-hud label { display: grid; gap: 3px; }
.travel-hud select { min-width: 92px; padding: 6px 7px; border: 1px solid rgba(211,225,200,.16); border-radius: 6px; color: #e7eadf; background: #1d2822; font-size: 11px; }
.travel-hud button, .travel-actions button { padding: 7px 10px; border: 1px solid rgba(214,188,119,.34); border-radius: 7px; color: #efdfb5; background: rgba(169,132,66,.18); cursor: pointer; font-size: 10px; }
.travel-hud button:hover, .travel-actions button:hover:not(:disabled) { border-color: rgba(225,201,137,.6); background: rgba(177,143,78,.28); }
.travel-hud button.is-active { border-color: rgba(121,218,202,.72); color: #dffcf4; background: rgba(61,139,126,.3); box-shadow: 0 0 0 2px rgba(121,218,202,.08); }
.travel-hud button:disabled { cursor: not-allowed; opacity: .45; }
.travel-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.travel-actions button:disabled { cursor: not-allowed; opacity: .4; }
.travel-summary { min-height: 15px; color: #c8d3c5 !important; }
.map-heading__eyebrow, .hex-panel__eyebrow { display: block; margin-bottom: 4px; color: #a9bb8f; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.map-heading h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(25px, 3vw, 38px); font-weight: 500; }
.map-heading p { margin: 5px 0 0; color: #aeb9ae; font-size: 12px; }

.map-controls { position: absolute; z-index: 3; right: 18px; bottom: 54px; display: grid; overflow: hidden; border: 1px solid rgba(222, 232, 213, .18); border-radius: 9px; background: rgba(25, 33, 29, .9); box-shadow: 0 10px 26px rgba(0,0,0,.25); }
.map-controls button { width: 38px; height: 38px; border: 0; border-bottom: 1px solid rgba(222,232,213,.12); color: #e9eee5; background: transparent; cursor: pointer; font-size: 18px; }
.map-controls button:last-child { border-bottom: 0; font-size: 15px; }
.map-controls button:hover, .map-controls button:focus-visible { background: #46583f; outline: 0; }

.renderer-settings { position: absolute; z-index: 4; top: 18px; right: 18px; width: min(270px, calc(100% - 36px)); max-height: calc(100% - 36px); overflow-y: auto; border: 1px solid rgba(222,232,213,.15); border-radius: 9px; color: #d5ddd2; background: rgba(24, 32, 28, .9); box-shadow: 0 10px 30px rgba(0,0,0,.22); font-size: 12px; }
.renderer-settings summary { padding: 9px 11px; cursor: pointer; color: #cbd5c7; font-weight: 600; }
.renderer-settings[open] { padding-bottom: 9px; }
.renderer-build-short { float: right; color: #a9bb8f; font-size: 10px; font-family: ui-monospace, SFMono-Regular, monospace; font-weight: 500; }
.renderer-build-name { margin: 4px 11px 10px; padding: 8px; border-radius: 6px; background: rgba(12, 18, 15, .55); color: #aeb9ae; font-size: 11px; line-height: 1.5; }
.renderer-build-name code { color: #e2ebd8; font-size: 10px; overflow-wrap: anywhere; }
.renderer-settings[open] summary { margin-bottom: 5px; border-bottom: 1px solid rgba(222,232,213,.11); }
.renderer-settings > label { display: flex; align-items: center; gap: 8px; margin: 8px 11px; }
.renderer-settings > label.renderer-control { display: grid; }
.renderer-settings label span { display: flex; justify-content: space-between; }
.renderer-settings input[type="range"] { width: 100%; accent-color: #9caf70; }
.renderer-settings input[type="checkbox"] { accent-color: #9caf70; }
.renderer-settings select { width: 100%; padding: 7px 8px; border: 1px solid rgba(222,232,213,.18); border-radius: 6px; color: #e0e6dc; background: #202a25; font: inherit; }
.production-test { margin: 10px 11px; padding: 10px; border: 1px solid rgba(193, 211, 141, .18); border-radius: 7px; background: rgba(91, 111, 68, .15); }
.production-test > strong { display: block; margin-bottom: 8px; color: #e5e0b7; }
.production-test > label { display: grid; gap: 5px; margin: 8px 0; }
.production-test p { margin: 9px 0 6px; color: #e8eddf; line-height: 1.45; }
.production-test small { display: block; color: #aeb9aa; line-height: 1.4; }
.renderer-growth { margin: 10px 11px 2px; padding-top: 10px; border-top: 1px solid rgba(222,232,213,.11); }
.renderer-growth__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #dce4d8; font-weight: 600; }
.renderer-growth__title output { color: #9caf70; font-size: 11px; font-weight: 500; }
.renderer-growth small { display: block; margin-top: 3px; color: #8f9d94; line-height: 1.35; }
.renderer-growth__buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 8px; }
.renderer-growth button { min-height: 30px; border: 1px solid rgba(222,232,213,.16); border-radius: 6px; color: #e1e7dd; background: #2b3831; cursor: pointer; font: inherit; }
.renderer-growth button:hover:not(:disabled) { border-color: rgba(191,207,147,.48); background: #35453b; }
.renderer-growth button:disabled { cursor: default; opacity: .42; }
.renderer-growth__reset { width: 100%; margin-top: 5px; color: #c9d1c7 !important; background: rgba(30,39,34,.72) !important; }

.map-help { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; margin: 0; padding: 12px 18px; color: #8e9a8f; background: linear-gradient(transparent, rgba(10,14,12,.8)); font-size: 11px; text-align: center; pointer-events: none; }

.hex-panel { position: relative; z-index: 5; min-height: 0; max-height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; padding: 28px 24px; border-left: 1px solid rgba(224, 234, 216, .1); background: #171e1a; box-shadow: -12px 0 35px rgba(0,0,0,.18); }
.hex-panel__content { position: relative; }
.hex-panel__close { display: none; position: absolute; z-index: 2; top: -7px; right: -4px; width: 34px; height: 34px; border: 1px solid rgba(224,234,216,.18); border-radius: 50%; color: #edf1e9; background: #28332d; cursor: pointer; font-size: 24px; line-height: 1; }
.hex-panel__empty { margin-top: 24vh; color: #8e998f; text-align: center; }
.hex-panel__icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 14px; border: 1px solid rgba(200,216,189,.16); border-radius: 50%; font-size: 25px; }
.hex-panel h2 { margin: 0; color: #eff2ec; font-family: Georgia, serif; font-size: 25px; font-weight: 500; }
.hex-panel__empty p { max-width: 230px; margin: 9px auto 0; font-size: 13px; line-height: 1.55; }
.hex-panel__coordinates { margin: 4px 0 23px; color: #7f8b81; font-size: 11px; font-variant-numeric: tabular-nums; }

.hex-properties { display: grid; margin: 0; }
.hex-properties div { display: grid; grid-template-columns: 1fr auto; gap: 15px; padding: 11px 0; border-bottom: 1px solid rgba(221,232,213,.09); }
.hex-properties dt { color: #89958a; font-size: 12px; }
.hex-properties dd { margin: 0; color: #dce3d8; font-size: 12px; text-align: right; }

.hex-actions { margin-top: 20px; padding-top: 15px; border-top: 1px solid rgba(221,232,213,.09); }
.hex-actions h3 { margin: 0; color: #e8ede4; font-family: Georgia, serif; font-size: 17px; font-weight: 500; }
.hex-actions p { margin: 4px 0 10px; color: #849087; font-size: 11px; line-height: 1.4; }
.hex-action-list, .hex-road-list { display: flex; flex-wrap: wrap; gap: 6px; }
.hex-action-chip, .hex-road-chip { padding: 6px 8px; border: 1px solid rgba(211,225,200,.14); border-radius: 7px; color: #cbd5c7; background: rgba(124,145,101,.08); font-size: 11px; }
.hex-action-chip small { display: block; margin-top: 2px; color: #8e9b90; font-size: 9px; }
.hex-road-chip { min-width: 38px; text-align: center; }
button.hex-road-chip { cursor: pointer; font: inherit; }
button.hex-road-chip:hover:not(:disabled) { border-color: rgba(206,174,105,.55); color: #f4e5c3; background: rgba(183,149,92,.15); }
button.hex-road-chip:disabled { cursor: not-allowed; opacity: .38; }
.hex-road-chip.is-connected { border-color: rgba(206,174,105,.48); color: #f1ddb0; background: rgba(183,149,92,.18); }
.hex-road-chip.is-level-2 { border-color: rgba(209,185,125,.68); background: rgba(183,149,92,.25); }
.hex-road-chip.is-level-3 { border-color: rgba(230,213,166,.82); color: #fff2cf; background: rgba(194,164,103,.34); box-shadow: inset 0 0 0 1px rgba(255,244,211,.1); }
.hex-infrastructure-reset { display: none; width: 100%; margin-top: 9px; padding: 7px 9px; border: 1px solid rgba(211,225,200,.14); border-radius: 7px; color: #aeb9ad; background: rgba(9,14,11,.18); cursor: pointer; font-size: 10px; }
.hex-infrastructure-reset.is-visible { display: block; }
.hex-infrastructure-reset:hover { color: #e5eadf; border-color: rgba(211,225,200,.28); }

.layer-stack { display: grid; gap: 5px; margin-top: 24px; padding: 12px; border: 1px solid rgba(211,225,200,.11); border-radius: 9px; background: rgba(9,14,11,.2); }
.layer-stack span { padding: 7px 9px; border-left: 3px solid #7c9165; border-radius: 3px; color: #aab6aa; background: rgba(124,145,101,.08); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.layer-stack span:nth-child(2) { border-color: #b7955c; }
.layer-stack span:nth-child(3) { border-color: #6f9449; }
.layer-stack span:nth-child(4) { border-color: #52685b; }

noscript { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 30px; color: white; background: #111614; }

@media (max-width: 920px) {
    .game-header { grid-template-columns: 1fr auto; gap: 12px; }
    .game-nav { order: 3; grid-column: 1 / -1; min-width: 0; overflow-x: auto; }
    .game-nav a, .game-nav span { min-height: 36px; padding: 0 11px; }
    .game-nav .is-active::after { bottom: 0; }
    .admin-link { grid-column: 2; grid-row: 1; }
    .map-layout { grid-template-columns: 1fr; }
    .hex-panel { position: absolute; z-index: 10; right: 12px; bottom: 12px; left: 12px; max-height: 42vh; padding: 17px 18px; border: 1px solid rgba(224,234,216,.14); border-radius: 12px; background: rgba(23,30,26,.96); }
    .hex-panel:not(.is-open) { display: none; }
    .hex-panel__close { display: grid; place-items: center; }
    .hex-panel__empty { display: none; }
    .hex-panel h2 { font-size: 21px; }
    .hex-panel__coordinates { margin-bottom: 10px; }
    .hex-properties { grid-template-columns: 1fr 1fr; column-gap: 18px; }
    .layer-stack { display: none; }
    .map-controls { bottom: 56px; }
}

@media (max-width: 600px) {
    .travel-hud { top: auto; right: 12px; bottom: 12px; left: 12px; min-width: 0; padding: 8px 9px; flex-wrap: wrap; transform: none; }
    .travel-hud > div { min-width: 130px; flex: 1 1 130px; }
    .travel-hud strong { font-size: 13px; }
    .travel-hud label span { display: none; }
    .travel-character > label { display: none; }
    .travel-character select { width: 100%; min-width: 118px; }
    .travel-hud select { min-width: 78px; }
    .game-header { min-height: 62px; padding: 8px 12px; }
    .game-brand small, .admin-link { display: none; }
    .game-brand strong { font-size: 18px; }
    .renderer-settings { top: 12px; right: 12px; width: 150px; }
    .map-heading { top: 14px; left: 14px; }
    .map-heading p { max-width: 145px; }
    #world-map-pixi-canvas { min-height: 420px; }
    .hex-properties { grid-template-columns: 1fr; }
    .hex-properties div { padding: 7px 0; }
    .map-help { display: none; }
    .map-controls { right: 12px; bottom: 12px; }
}