/* HUD ouro/marinho. Fontes e imagens vêm da biblioteca (rotas /font e /preview); nada é gerado em canvas. */
@font-face { font-family: "Maiola"; src: url("/font/maiolabold.otf") format("opentype"); font-weight: 700; }
@font-face { font-family: "SyntaxNext"; src: url("/font/syntaxnextltpro-regular.otf") format("opentype"); font-weight: 400; }
@font-face { font-family: "SyntaxNext"; src: url("/font/syntaxnextltpro-bold.otf") format("opentype"); font-weight: 700; }
@font-face { font-family: "SyntaxCaps"; src: url("/font/syntaxnextltpro-allcaps.otf") format("opentype"); font-weight: 400; }
:root {
  --gold: #d0ab5f; --gold-hi: #f3d992; --gold-lo: #7d6330;
  --navy: #0d1a30; --navy-2: #14284a; --navy-3: #1d3a68; --ink: #f2ead6; --dim: #9fb0c8;
  --blue: #3a6ee8; --red: #d1362b; --ok: #6fcf7f; --bad: #ef6a5b;
  --canvas: url("/preview/ui.icons.hud.backgrounds.canvas_texture_312x312.rrtex");
  --textile: url("/preview/ui.images.backgrounds.textile_grayscale.rrtex");
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0a1220; color: var(--ink); font-family: "SyntaxNext", "Segoe UI", system-ui, sans-serif; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; }
[hidden] { display: none !important; }
#stage, #overlay { position: fixed; inset: 0; width: 100%; height: 100%; }
#stage canvas { width: 100%; height: 100%; display: block; }
#overlay { pointer-events: none; }
button { font: inherit; color: var(--ink); cursor: pointer; }
h1, h2, h3 { font-family: "Maiola", Georgia, serif; font-weight: 700; letter-spacing: .02em; color: var(--gold-hi); margin: 0; }

@font-face { font-family: "MaiolaCaps"; src: url("/font/maiolaallcapsbold.otf") format("opentype"); font-weight: 700; }
:root { --hud-scale: 1; }
#hud { font-size: 18px; color: #fff; }
#resource-panel, #bottom, #idle-bar, #build-menu, #minimap-panel { position: fixed; transform: scale(var(--hud-scale)); transform-origin: bottom left; }
#resource-panel { left: 0; bottom: 0; width: 202px; height: 252px; padding: 4px 10px 6px 0; background: url("/preview/ui.icons.hud.backgrounds.resource_panel.rrtex") right bottom/202px 252px no-repeat; z-index: 5; }
.population-row { height: 56px; display: flex; align-items: center; margin-bottom: 8px; }
.res { height: 40px; display: flex; align-items: center; gap: 10px; }
.res > img { width: 25px; height: 25px; object-fit: contain; margin-left: 12px; }
.res > b { min-width: 66px; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 1px 1px 2px #000; }
.res.pop { width: 116px; }
.res.pop > b { min-width: 0; }
.res.pop > img { width: 28px; height: 30px; }
.workers { display: flex; align-items: center; gap: 8px; opacity: .65; }
.workers img { width: 16px; height: 24px; object-fit: contain; }
.workers i { font: 16px "SyntaxNext", sans-serif; font-variant-numeric: tabular-nums; }
.res.warn > b { color: #ff6963; }
#btn-idle { display: flex; align-items: center; width: 70px; height: 40px; border: 0; background: transparent; padding: 0 4px; gap: 10px; color: #8e969f; }
#btn-idle img { width: 20px; height: 32px; object-fit: contain; }
#btn-idle b { font-size: 16px; font-weight: 400; }
#btn-idle.on { color: #fff; background: url("/preview/ui.icons.buttons.idle_villager_btn_glow.rrtex") center/70px 40px; }
#bottom { left: calc(198px * var(--hud-scale)); bottom: 0; width: 710px; height: 244px; display: flex; background: url("/preview/ui.icons.hud.backgrounds.command_panel.rrtex") center bottom/710px 244px no-repeat; z-index: 5; }
#bottom.group { height: 192px; background-image: url("/preview/ui.icons.hud.backgrounds.command_panel_group_selection.rrtex"); background-size: 710px 192px; }
#bottom.empty { visibility: hidden; pointer-events: none; }
#selection-panel { width: 406px; height: 100%; padding: 0; position: relative; overflow: hidden; }
#sel-body { height: 100%; position: relative; }
.selection-header { height: 61px; position: relative; padding: 14px 0 0 124px; background: url("/preview/ui.images.civ_flags.civ_icon_secondary_britons.rrtex") 62px 10px/103px 48px no-repeat; }
.selection-header.neutral { background-image: none; }
.selection-header::before { content: ""; position: absolute; inset: 10px 0 0 62px; background: linear-gradient(90deg, transparent, rgba(10,20,29,.95) 40%); pointer-events: none; }
.selection-header > * { position: relative; }
.selection-header .sel-icon { position: absolute; top: 14px; left: 17px; width: 48px; height: 48px; object-fit: contain; border: 0; }
#sel-body h3 { font-family: "MaiolaCaps", serif; font-size: 18px; color: #fff; line-height: 22px; margin: 0; font-weight: 700; letter-spacing: 0; }
.selection-subtitle { font-family: "Maiola", serif; font-style: italic; font-size: 16px; color: #d4c28f; line-height: 20px; }
.selection-details { position: relative; width: 226px; height: 176px; padding: 33px 8px 20px 12px; }
.hpbar { height: 7px; width: 202px; padding: 1px; background: #000; border: 1px solid #777b79; }
.hpbar i { display: block; height: 100%; background: #4fafe7; }
.health-line { display: flex; align-items: center; gap: 5px; color: #fff; font-size: 14px; margin-bottom: 3px; }
.health-line img { width: 14px; height: 14px; object-fit: contain; }
.stat-items { display: grid; grid-template-columns: 70px 70px; align-content: start; gap: 2px 2px; margin-top: 8px; font-size: 14px; }
.stat-items span { display: flex; align-items: center; gap: 6px; }
.stat-items img { width: 16px; height: 16px; object-fit: contain; }
.stat-items b { font-weight: 400; }
.owner-name { position: absolute; bottom: 8px; left: 12px; font-size: 14px; font-style: italic; color: #d9c78f; }
.herd-status { margin-top: 8px; font-size: 14px; font-style: italic; color: #d9c78f; }
.selection-status { font-size: 13px; color: #b3bec9; margin-top: 5px; }
.group-grid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3px; padding: 16px 13px; }
.group-grid button { width: 38px; height: 38px; border: 1px solid #6c552e; background: #735838; position: relative; padding: 0; }
.group-grid .group-all { font-family: "MaiolaCaps", serif; width: 76px; background: linear-gradient(#086681,#144762); border-color: #d9c98f; font-size: 12px; }
.group-grid img { width: 100%; height: 100%; object-fit: contain; }
.group-grid strong { position: absolute; top: 1px; left: 2px; font-size: 12px; font-weight: 400; color: #fff; text-shadow: 1px 1px #000; }
.group-grid i { position: absolute; left: 0; bottom: 0; height: 3px; background: #51aee8; }
.queue { position: absolute; left: 236px; top: 77px; display: flex; flex-wrap: wrap; width: 160px; gap: 3px; }
.queue button { position: relative; width: 38px; height: 38px; padding: 0; background: #192b3a; border: 1px solid #46555f; }
.queue img { width: 100%; height: 100%; object-fit: contain; }
.queue i { position: absolute; bottom: 0; left: 0; height: 4px; background: #d9c78f; }
.queue button.wait { border-color: #f25b55; }
#command-panel { width: 284px; position: relative; height: 100%; }
#cmd-grid { position: absolute; left: 23px; bottom: 10px; width: 252px; height: 160px; display: grid; grid-template-columns: repeat(5, 48px); grid-template-rows: repeat(3, 48px); align-content: end; gap: 3px; }
.cmd { position: relative; border: 1px solid #442c3b4d; background: radial-gradient(ellipse at center bottom, #465d7955, #465d7900), #0003; border-radius: 0; padding: 0; overflow: hidden; }
.cmd img { width: 48px; height: 48px; object-fit: contain; display: block; }
.cmd .key { position: absolute; right: 2px; bottom: 1px; font-size: 16px; line-height: 17px; color: #bfc0c0; text-shadow: 1px 1px 2px #000; }
.cmd .key.delete { font-size: 10px; }
.cmd .cost { display: none; }
.cmd .txt { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 12px; }
.cmd.no img, .cmd.no .txt { opacity: .2; }
.cmd.on { background-image: url("/preview/ui.icons.buttons.button_enabled.rrtex"); background-size: 100% 100%; }
.cmd:hover { border: 1px solid #ffdb88; filter: none !important; }
#idle-bar { display: none !important; left: 12px; bottom: calc(262px * var(--hud-scale)); display: flex; gap: 4px; z-index: 4; }
#idle-bar button { width: 38px; height: 38px; background: #14202bcc; border: 1px solid #475363; padding: 2px; }
#idle-bar img { width: 100%; height: 100%; object-fit: contain; }
#btn-box { display: none; }
#minimap-panel.expanded { --expanded-factor: 1.25; }
#minimap-panel { transform: scale(calc(var(--hud-scale) * var(--map-factor, 1) * var(--expanded-factor, 1))); right: 0; bottom: 0; width: 350px; height: 300px; transform-origin: bottom right; background: url("/preview/ui.icons.hud.minimap.minimap_bg_2.rrtex") center bottom/350px 140px no-repeat; z-index: 5; }
#minimap { position: absolute; width: 194px; height: 194px; left: 78px; top: 35px; transform: rotate(45deg); border: 0; cursor: crosshair; background: #111820; }
.map-compass, .map-back, .map-edge { position: absolute; width: 280px; height: 280px; left: 35px; top: -8px; pointer-events: none; object-fit: contain; }
.map-edge { width: 286px; height: 286px; left: 32px; top: -11px; }
.map-north-orbit { position: absolute; left: 35px; top: -8px; width: 280px; height: 280px; transform: rotate(45deg); pointer-events: none; }
.map-north { position: absolute; left: calc(50% - 8.5px); top: -16px; width: 17px; height: 17px; pointer-events: none; }
#map-controls { position: absolute; inset: auto 12px 7px; height: 74px; }
#map-controls button { position: absolute; width: 28px; height: 28px; padding: 2px; border: 0; border-radius: 50%; background: linear-gradient(#2c3b4d,#151824); }
#map-controls button:hover { background: linear-gradient(#425c7b,#151824); }
#map-controls button:active { background: #93bed7; }
#map-controls img { width: 24px; height: 24px; object-fit: contain; }
#map-controls button:disabled { cursor: default; opacity: .5; }
#btn-map-alert { left: 0; bottom: 32px; }
#btn-map-home { left: 0; bottom: 0; }
#btn-map-size { right: 0; top: 0; }
#btn-map-reset { right: 22px; top: 24px; }
#btn-map-left { right: 44px; bottom: 0; }
#btn-map-right { right: 0; bottom: 0; }
#age-badge { position: fixed; top: 30px; left: 50%; transform: translateX(-50%) scale(var(--hud-scale)); transform-origin: top center; width: 104px; height: 42px; display: flex; justify-content: center; align-items: center; z-index: 5; }
#age-badge::before, #age-badge::after { content: ""; display: block; width: 26px; height: 7px; position: absolute; top: 20px; background: url("/preview/ui.icons.hud.age.age_display_persistent_bg_left.rrtex") center/contain no-repeat; }
#age-badge::before { left: 0; } #age-badge::after { right: 0; transform: rotate(180deg); }
#age-badge img { height: 42px; max-width: 42px; object-fit: contain; }
#age-badge em { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #e7d494; white-space: nowrap; font-style: normal; }
#clock { position: fixed; top: calc(83px * var(--hud-scale)); left: 50%; transform: translateX(-50%); padding: 1px 3px; font-size: 12px; font-variant-numeric: tabular-nums; background: #08101a99; z-index: 4; }
#btn-menu { position: fixed; right: 16px; top: 12px; padding: 0; width: 36px; height: 30px; border: 0; background: #101b29c0; z-index: 5; }
#btn-menu img { width: 26px; height: 26px; object-fit: contain; }
#alerts { position: fixed; right: 8px; bottom: calc(320px * var(--hud-scale)); display: flex; flex-direction: column; gap: 6px; align-items: flex-end; z-index: 4; pointer-events: none; }
#messages { position: fixed; top: 120px; left: 50%; transform: translateX(-50%); z-index: 4; pointer-events: none; }
#alerts div, #messages div { background: linear-gradient(90deg,transparent,#091020d9 25%,#091020d9 85%,transparent); padding: 4px 24px; font-size: 18px; color: #fff; animation: fade 4.5s forwards; }
#alerts div.bad { color: #fff; border-right: 3px solid #e75540; }
#victory-objectives { position: fixed; top: 18px; left: 82px; z-index: 4; display: flex; flex-direction: column; gap: 3px; max-width: 360px; padding: 8px 14px; transform: scale(var(--hud-scale)); transform-origin: top left; color: #f3f3f4; background: linear-gradient(90deg,#101b29e8,#101b29b8); border-left: 2px solid #d9c78f; font: 14px/1.35 SyntaxNext,sans-serif; text-shadow: 0 1px 2px #000; }
#victory-objectives b { color: #ffdb88; font: 700 15px Maiola,serif; }
#alerts div.notification-slide, #messages div.notification-slide { animation: notification-slide 4.5s both; }
#alerts div.notification-static, #messages div.notification-static { animation: fade 4.5s forwards; }
@keyframes notification-slide { 0% { opacity: 0; transform: translateX(24px); } 10%,82% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(12px); } }
@keyframes fade { 0%,80% { opacity: 1; } 100% { opacity: 0; } }
#tooltip { position: fixed; z-index: 20; width: 340px; padding: 12px 16px; pointer-events: none; background: linear-gradient(120deg,#0f1b29f5,#0b131df5),var(--canvas); border-top: 2px solid #d4c38f; border-bottom: 1px solid #6e6249; font-size: 16px; color: #e4e5e6; }
#tooltip.camera-tooltip { width: max-content; max-width: 300px; padding: 18px; border: 0; background: linear-gradient(#263243,#151824); box-shadow: 1px 1px #0008; font: 16px/20px "SyntaxNext",sans-serif; color: #fff; }
#tooltip h4 { margin: 0 0 8px; font: 700 18px "MaiolaCaps",serif; color: #e1cea0; }
.tooltip-header { display: flex; gap: 12px; align-items: flex-start; }
.tooltip-subtitle { font-style: italic; color: #7eb5d7; margin-bottom: 8px; }
#tooltip p { white-space: pre-line; }
.tooltip-icon { width: 48px; height: 48px; object-fit: contain; }
#tooltip .cost { display: flex; flex-wrap: wrap; gap: 12px; }
#tooltip .cost span { display: flex; align-items: center; gap: 4px; }
#tooltip .cost img { width: 18px; height: 18px; object-fit: contain; } #tooltip .cost span.lack { color: #f4756a; }
#tooltip p { margin: 8px 0 0; line-height: 1.35; }
#place-hint { position: fixed; left: 50%; bottom: calc(262px * var(--hud-scale)); transform: translateX(-50%); background: #091020dd; padding: 5px 12px; font-size: 14px; z-index: 6; }
#build-menu { left: calc(908px * var(--hud-scale)); bottom: 0; z-index: 5; }
#build-grid { display: flex; align-items: flex-end; }
#age-up { position: fixed; inset: 0; z-index: 25; background: #0009; }
#age-up-dialog { position: absolute; left: 50%; top: calc(50% - 45px * var(--age-up-scale)); width: 1328px; transform: translate(-50%,-50%) scale(var(--age-up-scale)); transform-origin: center; display: flex; flex-direction: column; align-items: center; text-shadow: 0 2px 2px #0009; }
#age-up-ages { height: 66px; display: flex; align-items: center; }
.age-up-era { position: relative; width: 66px; height: 66px; display: grid; place-items: center; }
.age-up-era > img { width: 48px; height: 48px; margin: 1px 0 0 1px; object-fit: contain; opacity: .5; }
.age-up-era > i { position: absolute; width: 58px; height: 58px; border: 8px solid transparent; border-radius: 50%; visibility: hidden; background: radial-gradient(ellipse,transparent 43%,#d4ad59a6 51%,#ffdb8840 65%,transparent 74%); mix-blend-mode: screen; }
.age-up-era.next > img { opacity: 1; }
.age-up-era.next > i { visibility: visible; }
.age-up-arrow { width: 16px; height: 14px; visibility: hidden; object-fit: contain; }
.age-up-arrow.next { visibility: visible; }
#age-up-title { margin: 8px; font: 700 27px/32px Maiola,serif; letter-spacing: 0; color: #d4ad59; }
#age-up-options { width: 1328px; min-height: 200px; max-height: 480px; padding: 0 32px; display: grid; grid-template-columns: 600px 600px; column-gap: 64px; position: relative; }
.age-up-card { position: relative; width: 600px; min-height: 200px; max-height: 480px; padding: 0; border: 0; border-radius: 0; background: linear-gradient(#2c3b4d,#151824); color: #c6c6c6; text-align: left; text-shadow: inherit; }
.age-up-card::before { content: ""; position: absolute; inset: 3px; border: 2px solid #d4ad59; background: linear-gradient(#425c7b,#151824); visibility: hidden; }
.age-up-card:hover::before, .age-up-card:focus-visible::before { visibility: visible; }
.age-up-card:active::before { visibility: hidden; }
.age-up-card:focus-visible { outline: none; }
.age-up-card[aria-disabled=true]::after { content: ""; position: absolute; inset: 0; background: #2e272780; pointer-events: none; }
.age-up-card-frame { position: relative; height: 100%; padding: 32px; overflow: hidden; }
.age-up-card-frame::before, .age-up-card-frame::after { content: ""; position: absolute; pointer-events: none; border: 2px solid; border-image: linear-gradient(135deg,#2b3143b3,#616c8cb3 32%,#616c8cb3 63%,#2b3143b3) 1; inset: 0; }
.age-up-card-frame::after { inset: 6px; border-width: 1px; }
.age-up-card-content { position: relative; z-index: 1; display: grid; grid-template-columns: 100px 20px minmax(0,1fr); }
.age-up-cost { grid-column: 1; font: 700 16px/20px SyntaxNext,sans-serif; }
.age-up-landmark-icon { display: block; width: 48px; height: 48px; object-fit: contain; }
.age-up-resources { margin: 8px 0 0 -2px; }
.age-up-resources > span { display: flex; align-items: center; min-height: 20px; }
.age-up-resources img { width: 26px; height: 20px; object-fit: cover; }
.age-up-resources b { margin-left: 5px; font: inherit; }
.age-up-resources .lack { color: #ed4343; }
.age-up-resources .age-up-time { margin-left: 3px; }
.age-up-time img { width: 18px; height: 18px; object-fit: contain; }
.age-up-time b { margin-left: 7px; }
.age-up-info { grid-column: 3; }
.age-up-info h3 { margin: 0; font: 700 27px/32px Maiola,serif; letter-spacing: 0; color: #ffdb88; }
.age-up-subtitle { font: italic 16px/22px SyntaxNext,sans-serif; color: #7eb5d7; }
.age-up-help, .age-up-unavailable { margin: 24px 0 0; font: 16px/20px SyntaxNext,sans-serif; white-space: pre-line; }
.age-up-help { color: #c6c6c6; }
.age-up-unavailable { font-weight: 700; color: #ed4343; }
.age-up-separator { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.age-up-separator img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.age-up-separator i { flex: 1; width: 1px; background: linear-gradient(transparent,#b07d37); }
.age-up-separator i:last-child { transform: rotate(180deg); }
#btn-age-up-close { min-width: 120px; margin: 8px; padding: 4px 0; border: 1px solid #09111d; border-radius: 0; color: #ffdb88; font: 18px/22px SyntaxCaps,sans-serif; letter-spacing: 0; text-shadow: inherit; background: linear-gradient(#11628b,#002e4e); box-shadow: 0 2px 2px #0009; }
#btn-age-up-close:hover, #btn-age-up-close:focus-visible { background: linear-gradient(#508eb5,#002e4e); outline: 1px solid #d4ad59; outline-offset: -3px; }
#btn-age-up-close:active { background: linear-gradient(#002e4e,#11628b); }
.build-age { width: calc(var(--columns) * 48px + (var(--columns) - 1) * 3px + 35px); height: 206px; padding: 4px 19px 10px 16px; background: center bottom/100% 100% no-repeat; position: relative; }
.build-age[style*="--columns:1"] { background-image: url("/preview/ui.icons.hud.backgrounds.age_panel_1_column.rrtex"); }
.build-age[style*="--columns:2"] { background-image: url("/preview/ui.icons.hud.backgrounds.age_panel_2_column.rrtex"); }
.build-age[style*="--columns:3"] { background-image: url("/preview/ui.icons.hud.backgrounds.age_panel_3_column.rrtex"); }
.build-age[style*="--columns:4"] { background-image: url("/preview/ui.icons.hud.backgrounds.age_panel_4_column.rrtex"); }
.build-heading { width: 100%; height: 38px; padding: 0; border: 0; background: transparent; color: #b5a377; font: 700 20px "Maiola", serif; position: relative; }
.build-heading img { width: 26px; height: 26px; object-fit: contain; }
.build-key { margin-left: 12px; font: 16px "SyntaxNext",sans-serif; background: #162433; padding: 0 3px; color: #eee; }
.build-age.active .build-heading { color: #f3d992; }
.build-age.active::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 44px; background: url("/preview/ui.icons.hud.highlights.age_highlight_3.rrtex") center/100% 44px no-repeat; pointer-events: none; }
.build-items { display: grid; grid-template-columns: repeat(var(--columns),48px); grid-template-rows: repeat(3,48px); gap: 3px; }
#global-queue, #control-groups { position: fixed; left: 18px; display: flex; gap: 4px; transform: scale(var(--hud-scale)); transform-origin: top left; z-index: 4; }
#global-queue { top: 18px; }
#control-groups { top: 41%; flex-direction: column; }
#global-queue button, #control-groups button { position: relative; width: 48px; height: 48px; padding: 0; background: #1a2736cc; border: 1px solid #927746; }
#global-queue img, #control-groups img { width: 100%; height: 100%; object-fit: contain; }
#global-queue b, #control-groups b { position: absolute; left: 2px; top: 1px; font: 14px "SyntaxNext",sans-serif; text-shadow: 1px 1px #000; }
#global-queue i { position: absolute; left: 0; bottom: 0; height: 4px; background: #4bafe4; }
.pause-speed { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 16px; }
.pause-speed button { color: #eee; border: 1px solid #657082; background: #13283b; padding: 3px 9px; }
.pause-speed button.on { border-color: #e1cea0; }
.panel, .modal, .menu-box, .load-box { background: linear-gradient(180deg,rgba(20,40,74,.94),rgba(9,20,40,.96)),var(--canvas); border: 2px solid var(--gold-lo); box-shadow: inset 0 0 0 1px #f3d99240,0 6px 22px #0009; }
#loading, #menu, #pause, #result { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; }
#loading { background: radial-gradient(ellipse at center, #14284a, #060d1a); }
.load-box, .menu-box, .modal { padding: 26px 34px; border-radius: 6px; text-align: center; max-width: min(92vw, 560px); }
.modal.wide { max-width: min(94vw, 720px); text-align: left; }
.modal.wide li { margin: 6px 0; line-height: 1.45; color: var(--ink); }
.modal.wide ul { padding-left: 18px; }
.logo { font-family: "Maiola", Georgia, serif; font-weight: 700; font-size: 34px; letter-spacing: .06em; color: var(--gold-hi); text-shadow: 0 2px 0 #000, 0 0 18px rgba(208, 171, 95, .35); margin-bottom: 6px; text-transform: uppercase; }
.bar { height: 12px; border: 1px solid var(--gold); background: #06101f; margin: 14px 0 6px; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); transition: width .2s; }
#load-step { color: var(--dim); font-size: 14px; margin: 4px 0; min-height: 20px; }
#load-errors { text-align: left; color: #ffb8ae; background: #2a0f0c; border: 1px solid var(--bad); padding: 8px; max-height: 200px; overflow: auto; font-size: 12px; white-space: pre-wrap; }
#menu { display: block; overflow: auto; background: #060d1a; }
.menu-bg { position: fixed; inset: 0; background: linear-gradient(90deg,rgba(4,10,19,.54),rgba(4,10,19,.18) 52%,rgba(4,10,19,.52)),linear-gradient(180deg,rgba(4,10,19,.34),rgba(4,10,19,.68)),url("/preview/ui.images.backgrounds.xbox.globe_static.rrtex") center/cover no-repeat,var(--textile); }
.menu-home { position: relative; z-index: 1; min-height: 100%; display: grid; grid-template-rows: 76px minmax(0,1fr) 60px; gap: 14px; padding: 16px clamp(20px,3vw,58px) 16px; }
.menu-topbar { display: flex; align-items: center; gap: clamp(24px,4vw,72px); border-bottom: 1px solid #d2c08c62; }
.menu-wordmark { color: #f2eee3; font: 700 clamp(19px,1.55vw,30px)/1 "Maiola",Georgia,serif; letter-spacing: .055em; text-shadow: 0 2px 5px #000; white-space: nowrap; }
.menu-wordmark small { font: 400 .56em "SyntaxNext",sans-serif; color: #d8cba9; }
.menu-wordmark b { color: #e6bf65; }
.menu-topbar nav { align-self: stretch; display: flex; align-items: stretch; gap: 4px; }
.menu-topbar nav button { min-width: 112px; padding: 0 16px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #e7e3d9; font: 17px "SyntaxNext",sans-serif; text-shadow: 0 1px 3px #000; }
.menu-topbar nav button[aria-current="page"] { color: #f5d57f; border-bottom-color: #e4c274; }
.menu-topbar nav button:disabled { color: #b3b6b8; opacity: .67; cursor: default; }
.menu-panels { min-height: 0; display: grid; grid-template-columns: minmax(270px,.91fr) minmax(420px,1.28fr) minmax(270px,.82fr); gap: clamp(12px,1.25vw,24px); align-items: center; padding: 18px 0; }
.menu-modes, .menu-activity { min-height: 0; display: flex; flex-direction: column; gap: 16px; }
.menu-mode-card, .menu-panel { position: relative; overflow: hidden; border: 1px solid #d2bc805e; background: linear-gradient(135deg,#162d42eF,#0b1729eF),var(--textile); box-shadow: 0 10px 30px #0008,inset 0 0 0 1px #fff1; text-shadow: 0 2px 3px #000; }
.menu-mode-card::before, .menu-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg,#d5bd7d10,transparent 38%,#0002); }
.menu-mode-card > *, .menu-panel > * { position: relative; }
.menu-mode-card { padding: clamp(20px,2.2vw,40px); }
.single-player { flex: 1 1 62%; display: flex; flex-direction: column; justify-content: center; min-height: 260px; background: linear-gradient(135deg,#173b51ed,#10213aef 72%),var(--textile); }
.single-player h1 { font-size: clamp(27px,2.2vw,42px); color: #f4e4b5; }
.menu-mode-card h2, .menu-panel h2 { font-size: clamp(21px,1.55vw,29px); }
.menu-mode-card p, .menu-panel p { color: #d2d6d9; font-size: clamp(14px,1vw,17px); line-height: 1.48; max-width: 48ch; }
.menu-mode-action { align-self: flex-start; min-height: 46px; margin-top: 12px; padding: 0 22px; border: 1px solid #efd48b; background: linear-gradient(#b9924d,#735626); color: #fff8e6; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 3px 8px #0008,inset 0 1px #fff5; }
.menu-mode-action:hover, .menu-mode-action:focus-visible { background: linear-gradient(#d5b66c,#8e6e35); outline: 1px solid #fff0bb; outline-offset: 2px; }
.menu-mode-lock { display: flex; flex-direction: column; gap: 4px; margin-top: clamp(24px,3vw,54px); padding-top: 14px; border-top: 1px solid #d2c08c55; color: #e1d7bf; }
.menu-mode-lock span { font: 700 18px "Maiola",serif; }
.menu-mode-lock small { color: #abb7c3; }
.multiplayer { flex: 0 0 auto; min-height: 168px; padding: 22px 26px; }
.multiplayer h2 { color: #eee4cc; }
.multiplayer p { margin: 8px 0; font-size: 14px; }
.multiplayer button { border: 1px solid #9ca8b6; background: #182538; padding: 8px 16px; color: #c5cbd0; }
.multiplayer button:disabled { opacity: .62; cursor: default; }
.menu-panel { padding: clamp(18px,1.8vw,32px); }
.menu-panel > header { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #d2c08c55; color: #f0d590; font: 700 13px "SyntaxCaps","SyntaxNext",sans-serif; letter-spacing: .08em; }
.local-quest { flex: 1 1 58%; min-height: 260px; display: flex; flex-direction: column; justify-content: space-between; }
.menu-panel-feature { display: flex; align-items: center; gap: clamp(14px,1.5vw,28px); padding: 22px 4px 8px; }
.menu-panel-feature img { width: clamp(76px,7.5vw,140px); height: clamp(76px,7.5vw,140px); object-fit: contain; filter: drop-shadow(0 5px 9px #000a); }
.menu-panel-feature h2 { color: #f4e4b5; }
.menu-panel-feature p { margin: 8px 0; font-size: 14px; }
.menu-panel-feature .menu-mode-action { min-height: 40px; margin-top: 4px; padding: 0 15px; font-size: 13px; }
.local-events { flex: 0 0 auto; min-height: 150px; }
.local-events b { display: block; margin-top: 18px; color: #f1e7cf; font: 700 20px "Maiola",serif; }
.local-events p { margin: 5px 0 0; font-size: 14px; }
.menu-news { align-self: center; width: 100%; min-height: 310px; padding: clamp(20px,2vw,36px); background: linear-gradient(145deg,#202f41ee,#111a2aef),var(--textile); }
.menu-news h2 { margin-top: 32px; color: #f0d590; }
.menu-news p { margin: 12px 0 28px; }
.menu-news-rule { height: 1px; background: linear-gradient(90deg,#e3c579aa,transparent); margin-bottom: 16px; }
.menu-news small { color: #b4bdc7; font-size: 13px; line-height: 1.45; }
.menu-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #d2c08c62; }
.menu-profile { display: flex; align-items: center; gap: 10px; color: #c6ccd1; font-size: 13px; }
.menu-profile img { width: 38px; height: 38px; object-fit: contain; }
.menu-profile span, .menu-profile b { display: block; }
.menu-profile b { color: #efe2c4; font: 700 16px "Maiola",serif; }
.menu-footer-actions { display: flex; align-items: center; gap: 12px; }
.menu-footer-actions > span { margin-right: 14px; color: #d8c58f; font: 13px "SyntaxCaps","SyntaxNext",sans-serif; letter-spacing: .07em; }
.menu-footer-actions button { min-height: 34px; padding: 0 12px; border: 1px solid #b79a5c77; background: #101d2dbb; color: #e1dfd8; }
.menu-footer-actions button:hover, .menu-footer-actions button:focus-visible { border-color: #efcf7a; color: #fff0bd; outline: none; }
#skirmish-setup { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; overflow: auto; padding: 24px; background: #030914a6; backdrop-filter: blur(3px); }
.menu-box { position: relative; min-width: min(90vw, 460px); }
.menu-box { width: min(92vw,640px); padding: 66px 42px 32px; background: linear-gradient(180deg,#192f4af5,#0a172cf5),var(--canvas); box-shadow: 0 18px 60px #000b,inset 0 0 0 1px #f3d99240; }
.setup-back { position: absolute; top: 18px; left: 20px; border: 0; background: transparent; color: #e2d09e; font-size: 14px; }
.setup-back:hover, .setup-back:focus-visible { color: #fff1c4; outline: 1px solid #e3c579; }
.menu-box h2 { font-size: 22px; margin: 4px 0 12px; }
.civ { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 12px; color: var(--dim); }
.civ img { width: 74px; height: 74px; object-fit: contain; }
.setup-map { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; margin: 8px 0 12px; padding: 10px 12px; border: 1px solid #b79a5c55; background: #06101f88; color: var(--ink); }
.setup-map small { grid-column: 1 / -1; color: var(--dim); }
.setup-note { margin: 7px 0; color: var(--dim); font-size: 12px; line-height: 1.45; }
.field { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 0; color: var(--ink); }
.field select, .field input { background: #06101f; color: var(--ink); border: 1px solid var(--gold-lo); padding: 5px 8px; font: inherit; min-width: 140px; }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.buttons button { background: linear-gradient(180deg, #24457c, #122a52); border: 1px solid var(--gold-lo); padding: 9px 18px; border-radius: 3px; font-size: 15px; }
.buttons button.primary { background: linear-gradient(180deg, #d4b26b, #8e6f31); color: #1a1205; border-color: var(--gold-hi); font-weight: 700; }
.fine { color: var(--dim); font-size: 12px; margin-top: 14px; }
#pause, #result { background: rgba(4, 9, 18, .68); }
#result-stats { margin: 14px auto 0; border-collapse: collapse; font-size: 14px; }
#result-stats td, #result-stats th { padding: 3px 14px; border-bottom: 1px solid rgba(208, 171, 95, .25); }
#result-stats th { color: var(--gold-hi); font-family: "Maiola", serif; font-weight: 700; }
#result-title.win { color: var(--ok); } #result-title.lose { color: var(--bad); }
@media (max-width: 700px) { #idle-bar { display: flex !important; } #btn-box { display: block; } #bottom { left: 104px; transform: scale(.52); } #resource-panel { transform: scale(.52); } #minimap-panel { transform: scale(.52); bottom: 132px; } #build-menu { left: 104px; bottom: 132px; transform: scale(.65); } #idle-bar { bottom: 138px; transform: scale(.65); } #btn-menu { right: 6px; } #tooltip { max-width: 90vw; } }

:root { --screen-scale: 1; --native-gold: #ffdb88; --native-gold-dark: #b07d37; }
.frontscreen { width: 1920px; height: 1080px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(var(--screen-scale)); transform-origin: center; }
.native-button { min-width: 120px; min-height: 44px; padding: 0 18px; white-space: nowrap; border: 1.1px solid #09111d; border-radius: 0; color: var(--native-gold); background: linear-gradient(#11628b,#002e4e); font: 20px SyntaxNext, sans-serif; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 2px 2px #000; box-shadow: 0 2px 2px #0009; cursor: pointer; }
.native-button:hover, .native-button:focus-visible { background: linear-gradient(#508eb5,#002e4e); color: #fff0bd; outline: 1px solid #dbc18b; outline-offset: -2px; }
.native-button.secondary { background: linear-gradient(#2c3b4d,#151824); }
.native-button.secondary:hover { background: linear-gradient(#536780,#202a3a); }
.native-button:disabled, .native-flat:disabled { opacity: .4; cursor: default; }
.native-button:disabled:hover { background: linear-gradient(#11628b,#002e4e); outline: none; color: var(--native-gold); }
.native-flat { padding: 8px 16px; border: 0; border-radius: 0; background: transparent; color: var(--native-gold); font: 20px SyntaxNext, sans-serif; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; text-shadow: 0 2px 2px #000; }
.native-flat:hover, .native-flat:focus-visible { color: #fff0bd; text-shadow: 0 0 8px #7cc9f2; outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.suppressed { display: none !important; }
#pause { background: #071b39a1; backdrop-filter: blur(2px); }
#pause.covered { visibility: hidden; }
.pause-options { position: absolute; width: 300px; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; gap: 8px; animation: native-menu-in .3s ease-out; }
.pause-options .native-button { width: 300px; height: 44px; }
.pause-options hr { width: 100%; height: 1px; border: 0; margin: 15px 0 15px; background: linear-gradient(90deg,transparent,#a38143,transparent); box-shadow: 0 2px 2px #0009; }
@keyframes native-menu-in { from { opacity: 0; } to { opacity: 1; } }
#settings { position: fixed; inset: 0; z-index: 40; background: #0009; }
.native-frame { position: absolute; background: linear-gradient(#2c3b4de6,#151824e6),url('/preview/ui.images.backgrounds.textile_grayscale.rrtex') 0 0/200px 200px; box-shadow: 0 5px 30px #000b; }

.frame-edge { position: absolute; z-index: 3; pointer-events: none; background: url('/preview/ui.images.effects.sal_goldinkborder.rrtex') center/100% 100% no-repeat; }
.edge-left { left: 0; top: 0; width: 5px; height: 100%; }
.edge-right { right: 0; top: 0; width: 5px; height: 100%; transform: rotate(180deg); }
.edge-top, .edge-bottom { left: 0; width: 100%; height: 5px; background: none; overflow: hidden; }
.edge-top { top: 0; }.edge-bottom { bottom: 0; transform: rotate(180deg); }
.edge-top::before, .edge-bottom::before { content: ''; position: absolute; width: 5px; height: 1920px; left: 50%; top: 50%; background: url('/preview/ui.images.effects.sal_goldinkborder.rrtex') center/100% 100% no-repeat; transform: translate(-50%,-50%) rotate(90deg); }
.settings-window { width: 1574px; height: 869px; left: 173px; top: 105.5px; padding: 40px; display: flex; flex-direction: column; color: #f3f3f4; text-shadow: 0 2px 2px #0009; }
.settings-titlebar { height: 80px; flex: 0 0 80px; display: flex; justify-content: space-between; }
.settings-titlebar h2 { margin: 0; font: 700 36px/44px Maiola,serif; color: var(--native-gold); }
.settings-titlebar span { font: 20px/30px SyntaxNext,sans-serif; color: #ccd2d8; margin-right: 24px; }
.settings-body { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 151px 64px minmax(0,1fr); }
#settings-nav { display: flex; flex-direction: column; align-items: stretch; max-width: 360px; }
#settings-nav button { white-space: nowrap; }
#settings-nav button, #result-categories button { position: relative; height: 52px; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: #b8bbc0; font: 20px SyntaxNext,sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: left; text-shadow: 0 2px 2px #000; cursor: pointer; }
#settings-nav button[aria-selected=true], #result-categories button[aria-selected=true] { color: #fff; background: linear-gradient(90deg,transparent,#0d6389 18%,#0d6389 80%,transparent) center/100% 44px no-repeat; }
#settings-nav button:hover, #settings-nav button:focus-visible, #result-categories button:hover, #result-categories button:focus-visible { color: #fff; outline: none; text-shadow: 0 0 8px #7bc1e9; }
.native-divider { width: 1px; height: 100%; margin: 0 auto; background: linear-gradient(transparent,#b07d37 20%,#b07d37 80%,transparent); }
#settings-content { overflow-y: auto; padding-right: 36px; scrollbar-width: none; }
.settings-group { margin: 20px 0 52px; }
.settings-group header { display: flex; align-items: center; justify-content: space-between; height: 48px; border-bottom: 1px solid #7a8a9b55; margin-bottom: 24px; }
.settings-group h3 { margin: 0 0 12px; color: var(--native-gold); font: 700 28px/32px Maiola,serif; }
.settings-group header .native-flat { margin: -8px 16px 0 0; }
.setting-row { margin: 16px 0; font: 20px/25px SyntaxNext,sans-serif; }
.native-accessibility-note { margin: 0 0 22px; font: 20px/25px SyntaxNext,sans-serif; }
.native-accessibility-note small { display: block; color: #b3bec9; font: inherit; }
.setting-unavailable-note { display: block; max-width: 550px; margin-top: 4px; color: #b3bec9; font: 14px/1.4 SyntaxNext,sans-serif; }
.setting-row > label:not(.native-toggle) { display: block; }
.native-toggle { display: flex; align-items: center; gap: 12px; margin: 6px 0 8px; width: max-content; position: relative; cursor: pointer; }
.native-toggle input { position: absolute; opacity: 0; width: 48px; height: 24px; margin: 0; }
.native-toggle i { pointer-events: none; position: relative; width: 48px; height: 24px; border-radius: 14px; border: 1px solid #657389; background: linear-gradient(#34465b,#111c2a); box-shadow: 0 2px 3px #0008; }
.native-toggle i::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; left: 5px; top: 3px; background: radial-gradient(circle at 35% 30%,#ffdf95,#e8c36c 45%,#b07d37); box-shadow: 0 1px 3px #000a; }
.native-toggle input:checked+i { background: linear-gradient(#508eb5,#002e4e); border-color: #c8ae72; }
.native-toggle input:checked+i::after { left: 25px; }
.native-toggle input:focus-visible+i { outline: 1px solid #ffdb88; outline-offset: 3px; }
.native-toggle input:disabled+i, .native-toggle input:disabled~em { opacity: .4; cursor: default; }
.native-toggle em { font-style: normal; font-size: 20px; }
.native-range { display: flex; gap: 8px; align-items: center; height: 25px; margin: 2px 0 8px; color: var(--native-gold); }
.native-range input { appearance: none; width: 200px; height: 4px; margin: 0; background: linear-gradient(90deg,#b07d37,#ffdb88) 0 0/var(--value) 100% no-repeat,#6f5c36; cursor: pointer; }
.native-range input::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; border: none; background: radial-gradient(circle at 35% 30%,#ffdf95,#e8c36c 45%,#b07d37); box-shadow: 0 1px 5px #0009; }
.native-range input:focus-visible { outline: 1px solid #ffdb88; outline-offset: 8px; }
.native-range input:disabled { opacity: .4; cursor: default; }
.native-range input:disabled+output { opacity: .4; }
.native-select { appearance: none; display: block; width: 550px; height: 34px; margin: 8px 0 10px; padding: 2px 34px 2px 8px; border: 1px solid #526783; border-radius: 0; color: var(--native-gold); background: url('/preview/ui.images.fe.arrow_down.rrtex') right 10px center/16px 12px no-repeat,linear-gradient(#2c3b4d,#151824); box-shadow: 0 2px 2px #0009; font: 20px SyntaxNext,sans-serif; }
.native-select:focus { outline: none; border-color: var(--native-gold); }
.native-select:disabled { opacity: .45; }
.native-select option { background: #182434; }
.settings-footer { height: 44px; flex: 0 0 44px; display: flex; gap: 12px; margin-top: 20px; align-items: center; }
.settings-footer a { color: #8cc4db; font: 20px SyntaxNext,sans-serif; margin-left: 10px; }
.settings-footer .native-flat { padding-left: 16px; padding-right: 16px; }
.footer-spacer { flex: 1; }
.key-binding-list > div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #79879844; font-size: 20px; }
.key-binding-list kbd { min-width: 200px; color: var(--native-gold); font: 20px SyntaxNext,sans-serif; }
.key-bind { min-width: 200px; padding: 6px 12px; border: 1px solid #806c46; color: var(--native-gold); background: linear-gradient(#2c3b4d,#151824); font: 20px SyntaxNext,sans-serif; }
.key-bind:hover, .key-bind:focus-visible { border-color: var(--native-gold); color: #fff; }
#result { background: transparent; }
#result-stinger, #postgame { position: absolute; inset: 0; }
.stinger-video { position: absolute; inset: 0; width: 1920px; height: 1080px; }
#result-title { position: absolute; left: 16px; right: 0; top: 50%; transform: translateY(-50%); margin: 15px 0 0; text-align: center; color: #ffdb88; font: 700 80px/1 MaiolaCaps, Maiola,serif; text-transform: uppercase; text-shadow: 0 3px 3px #0009; }
#result-stinger.playing #result-title { animation: stinger-title 5s both; }
@keyframes stinger-title { 0%,80% {opacity:0;} 100% {opacity:1;} }

#postgame { background: #0813208c; backdrop-filter: blur(3px); }
.result-top { position: absolute; top: 103px; left: 0; right: 0; height: 44px; background: linear-gradient(#455875,#38475e); border-top: 1px solid #b09d72; border-bottom: 1px solid #b09d72; display: flex; align-items: center; }
.result-top h2 { width: 252px; margin: 0 24px 0 190px; color: var(--native-gold); background: #14202a; font: 700 54px/70px Maiola,serif; text-align: center; text-shadow: 0 2px 2px #000; }
#result-nav { display: flex; align-items: center; height: 100%; }
#result-nav button { height: 100%; min-width: 190px; font: 18px MaiolaCaps,serif; letter-spacing: 2px; }
#result-nav button[aria-selected=true] { color: white; background: linear-gradient(90deg,transparent,#4590b7 30%,#4590b7 70%,transparent); }
#result-duration { margin-left: auto; margin-right: 48px; color: #e4e7ee; font-size: 20px; }
.result-window { top: 180px; left: 40px; width: 1840px; height: 780px; padding: 40px 0 10px; display: flex; background: linear-gradient(#2c3b4de6,#151824e6),url('/preview/ui.images.backgrounds.textile_grayscale.rrtex') 0 0/200px 200px; }
#result-categories { width: 244px; flex: 0 0 244px; padding: 0 24px 0 40px; position: relative; }
#result-categories::after { content: ''; position: absolute; right: 0; top: 0; bottom: 20px; width: 1px; background: linear-gradient(#d0c493,#9ea8bbaa,transparent); }
#result-categories button { width: 180px; height: 50px; padding-left: 8px; font-size: 18px; }
.result-content { flex: 1; min-width: 0; padding: 0 52px 24px 28px; overflow: auto; scrollbar-width: none; }
.native-stats { width: 100%; table-layout: fixed; border-collapse: collapse; font: 20px SyntaxNext,sans-serif; color: #e5e8ef; }
#result-stats.native-stats { margin: 0; font-size: 20px; }
.native-stats th, #result-stats.native-stats th { font: 18px SyntaxNext,sans-serif; color: #efe7c0; text-transform: uppercase; height: 52px; white-space: normal; line-height: 22px; }
.native-stats td, .native-stats th, #result-stats.native-stats td, #result-stats.native-stats th { padding: 6px 12px; text-align: center; border-bottom: 1px solid #adbed177; font-weight: normal; }
.native-stats th:first-child,.native-stats td:first-child { width: 80px; text-align: left; padding-left: 0; }
.native-stats th:nth-child(2),.native-stats td:nth-child(2) { text-align: left; width: 230px; }
.native-stats td { height: 57px; }
.native-stats th img { width: 24px; height: 30px; object-fit: contain; vertical-align: middle; margin-right: 8px; }
.result-player { white-space: nowrap; min-width: 230px; }
.result-avatar { width: 44px; height: 44px; object-fit: contain; vertical-align: middle; margin-right: 10px; }
.player-0 { color: #79d1f3; }.player-1 { color: #f08b80; }
.result-chat { width: 488px; flex: 0 0 488px; margin-top: -37px; margin-bottom: -7px; padding: 36px 24px 12px; display: flex; flex-direction: column; background: linear-gradient(#112033e6,#050713e6); box-shadow: inset 8px 0 15px #0003; font: 20px SyntaxNext,sans-serif; }
.result-chat p { margin: 20px 0 0; color: #f3f3f4; font-style: italic; }
.result-chat input { height: 42px; margin-top: auto; padding: 8px 12px; border: 1px solid #748ba5; border-radius: 0; background: #7186a5; font: 20px SyntaxNext,sans-serif; color: white; }
.result-chat input::placeholder { color: #f4f4f4; font-style: italic; }
.high-contrast { --ink: #fff; --dim: #e5e9ef; --native-gold: #ffe9a9; }
.high-contrast :is(button,input,select,[role=tab]):focus-visible { outline: 3px solid #fff !important; outline-offset: 3px; }
.high-contrast #messages div, .high-contrast #alerts div, .high-contrast #victory-objectives { color: #fff; background: #000; text-shadow: none; }
#gamepad-pointer { position: fixed; z-index: 100; width: 28px; height: 28px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px #10151d, inset 0 0 0 1px #10151d; transform: translate(-50%,-50%); pointer-events: none; }
#gamepad-pointer::before, #gamepad-pointer::after { content: ''; position: absolute; background: #fff; box-shadow: 0 0 0 1px #10151d; }
#gamepad-pointer::before { left: 12px; top: -7px; width: 2px; height: 38px; }
#gamepad-pointer::after { top: 12px; left: -7px; height: 2px; width: 38px; }
.result-footer { position: absolute; top: 986px; left: 40px; right: 40px; display: flex; gap: 24px; }
.result-footer button { min-width: 210px; }
#btn-result-map { margin-left: auto; }
#btn-return-results { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); pointer-events: auto; z-index: 8; }
.result-overview h2, .timeline-heading h2 { margin: 0; font: 700 36px Maiola,serif; color: var(--native-gold); }
.result-overview p { margin: 16px 0; font-size: 22px; }
.match-meta { margin: 24px 0; font-size: 20px; }
.overview-civ { width: 40px; height: 40px; vertical-align: middle; margin-right: 16px; }
.timeline-heading { display: flex; justify-content: space-between; align-items: center; padding-top: 4px; }
.timeline-heading select { width: 300px; }
#result-graph { width: 100%; height: 540px; }
.timeline-legend { display: flex; gap: 60px; padding-left: 64px; font-size: 20px; }
.timeline-legend input { accent-color: #d3b97f; margin-right: 10px; }

.settings-titlebar h2, .settings-group h3, #result-title { background: linear-gradient(#ffdb88,#b07d37); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 2px #0009); }

#settings-content::-webkit-scrollbar, .result-content::-webkit-scrollbar { display: none; }
.native-scrollbar { position: absolute; z-index: 4; width: 24px; height: 24px; touch-action: none; cursor: default; }
.native-scrollbar::before, .native-scrollbar-thumb::before { content: ''; position: absolute; border-radius: 4px; }
.native-scrollbar.vertical::before, .vertical .native-scrollbar-thumb::before { left: 9px; top: 0; width: 6px; height: 100%; }
.native-scrollbar.horizontal::before, .horizontal .native-scrollbar-thumb::before { left: 0; top: 10px; width: 100%; height: 4px; }
.native-scrollbar::before { background: #2c3b4d; }
.native-scrollbar.horizontal::before { background: #c6c6c633; }
.native-scrollbar-thumb { position: absolute; width: 24px; height: 24px; }
.native-scrollbar-thumb::before { background: #425c7b; box-shadow: 0 2px 3px #0008; }
.native-scrollbar:hover .native-scrollbar-thumb::before, .native-scrollbar:focus-visible .native-scrollbar-thumb::before { background: linear-gradient(135deg,#b07d37,#ffdb88,#b07d37); }
.native-scrollbar:focus-visible { outline: 1px solid #ffdb88; outline-offset: 1px; }

.native-stats td { position: relative; }
.stat-star { width: 16px; height: 16px; position: absolute; right: 2px; top: calc(50% - 8px); fill: #d6b675; filter: drop-shadow(0 1px 1px #0008); }
.frame-edge { filter: brightness(.72); }

.controls-summary > .native-button { margin: 12px 0; }
.controls-summary header span { font-size: 20px; }
.controls-summary header span b { margin-left: 8px; color: var(--native-gold); font-weight: 400; text-transform: uppercase; }
.mouse-controls-title { margin: 36px 0 0; font: 700 28px Maiola,serif; color: var(--native-gold); }
.mouse-controls { display: flex; gap: 36px; margin-top: 24px; }
.mouse-controls img { width: 131px; align-self: flex-start; margin: 0 8px 0 20px; }
.mouse-controls p { font: 20px/28px SyntaxNext,sans-serif; margin: 24px 0; }

#result-stats.native-stats th, #result-stats.native-stats td { text-align: left; padding: 6px 0; white-space: nowrap; }
#result-stats.native-stats th:nth-child(2), #result-stats.native-stats td:nth-child(2) { width: 380px; padding-left: 14px; }
#result-stats.native-stats th { height: 52px; }
.stat-heading { display: flex; align-items: center; gap: 6px; }
.stat-heading > span { overflow: hidden; text-overflow: ellipsis; margin-right: 16px; }
#result-stats.native-stats th img { width: 30px; height: 30px; flex: 0 0 30px; margin: 0; }
.stat-value { display: inline-grid; grid-template-columns: minmax(0,1fr) 30px; align-items: center; max-width: calc(100% - 16px); margin-right: 16px; }
.stat-number { margin-left: 10px; overflow: hidden; text-overflow: ellipsis; }
.stat-value .stat-star { position: static; grid-column: 2; margin: -2px 0 0 10px; }
#locked-pointer { position: fixed; z-index: 1000; width: 19px; height: 27px; pointer-events: none; background: #090e18; filter: drop-shadow(1px 2px 2px #000b); clip-path: polygon(0 0,0 100%,27% 75%,44% 100%,61% 92%,45% 66%,85% 64%); }
#locked-pointer::after { content: ""; position: absolute; inset: 1px 2px 2px 1px; background: linear-gradient(135deg,#fff1c4,#d4b875); clip-path: polygon(0 0,0 100%,27% 75%,44% 100%,61% 92%,45% 66%,85% 64%); }

@media (max-width: 1100px) {
  .menu-home { grid-template-rows: 68px minmax(0,1fr) 58px; }
  .menu-panels { grid-template-columns: minmax(230px,.8fr) minmax(340px,1.2fr); }
  .menu-news { grid-column: 1 / -1; min-height: 190px; }
  .menu-news h2 { margin-top: 18px; }
}
@media (max-width: 760px) {
  #menu { overflow: auto; }
  .menu-home { min-height: 100%; height: auto; grid-template-rows: auto 1fr auto; padding: 12px 14px; gap: 10px; }
  .menu-topbar { flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 8px 0; }
  .menu-topbar nav { width: 100%; height: 42px; justify-content: space-between; }
  .menu-topbar nav button { min-width: 0; padding: 0 8px; font-size: 14px; }
  .menu-panels { grid-template-columns: 1fr; gap: 10px; padding: 8px 0; }
  .menu-modes, .menu-activity { gap: 10px; }
  .single-player { min-height: 240px; }
  .multiplayer { min-height: 150px; }
  .local-quest { min-height: 220px; }
  .menu-news { grid-column: auto; min-height: 220px; }
  .menu-footer { align-items: flex-start; flex-direction: column; padding-top: 10px; }
  .menu-footer-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .menu-footer-actions > span { margin-right: auto; }
  #skirmish-setup { place-items: start center; padding: 16px 10px; }
  .menu-box { min-width: 0; width: min(96vw,560px); padding: 62px 20px 24px; }
  .menu-box h2 { font-size: 19px; }
  .field { align-items: flex-start; flex-direction: column; }
  .field select, .field input { width: 100%; }
}