/* One application frame for every public and game page. Desktop only.
   Layout containment makes fixed game UI use the frame, not the monitor. */
@media (min-width: 781px) {
    :root {
        --desktop-frame-width: min(1200px, calc(100vw - 32px));
        --desktop-frame-height: min(820px, calc(100dvh - 32px));
        --desktop-frame-top: calc((100dvh - var(--desktop-frame-height)) / 2);
        --desktop-frame-left: calc((100vw - var(--desktop-frame-width)) / 2);
    }
    html:has(> body.desktop-frame-body) {
        width: 100%; height: 100%; min-height: 0; overflow: hidden;
        background: linear-gradient(#10251c26, #10251c59),
            #31493a url('images/desktop-background-v171.jpg') center / cover no-repeat fixed;
    }
    body.desktop-frame-body {
        position: fixed !important;
        inset: var(--desktop-frame-top) auto auto var(--desktop-frame-left) !important;
        width: var(--desktop-frame-width) !important; max-width: var(--desktop-frame-width) !important;
        height: var(--desktop-frame-height) !important; min-height: 0 !important;
        margin: 0 !important; box-sizing: border-box;
        overflow: hidden !important; contain: layout paint;
        border: 0; border-radius: 7px; outline: 1px solid #a28d60;
        box-shadow: 0 20px 70px #0008, 0 0 0 5px #0e1a1680;
        background-attachment: scroll;
    }
    body.desktop-frame-body.game-body.travian-game-ui {
        --pro-shell-max: var(--desktop-frame-width);
        --pro-content-max: calc(var(--desktop-frame-width) - 24px);
        --desktop-content-top: calc(var(--game-header-height) + 12px);
        --desktop-content-height: calc(var(--desktop-frame-height) - var(--game-header-height) - 24px - var(--game-notice-space, 0px));
        --window-top: calc(var(--game-header-height) + 12px);
        --window-bottom: calc(12px + var(--game-notice-space, 0px));
        --window-space: calc(var(--desktop-frame-height) - var(--window-top) - var(--window-bottom));
        --realm-width: min(calc(var(--desktop-frame-width) - 24px), calc(var(--window-space) * var(--realm-ratio)));
        --realm-height: calc(var(--realm-width) / var(--realm-ratio));
        padding: var(--game-header-height) 0 0 !important;
        background: #203128 !important;
    }
    body.desktop-frame-body.game-body.travian-game-ui .game-header {
        position: fixed; inset: 0 0 auto; width: 100%; max-width: none;
        margin: 0; box-sizing: border-box;
    }
    body.desktop-frame-body.game-body.travian-game-ui .game-header-inner {
        grid-template-columns: 105px 240px minmax(0, 1fr) auto;
        gap: 6px; padding-inline: 8px;
    }
    body.desktop-frame-body.game-body.travian-game-ui .compact-brand strong { font-size: 12px; }
    body.desktop-frame-body.game-body.travian-game-ui .game-header .header-actions { gap: 3px; }
    body.desktop-frame-body.game-body.travian-game-ui .game-header .header-actions .header-icon {
        width: 32px; min-width: 32px; height: 38px;
    }
    body.desktop-frame-body.game-body.travian-game-ui .game-header .player-pill { max-width: 78px; }
    body.desktop-frame-body.game-body.travian-game-ui .game-header .resource-copy strong { font-size: 14px; }
    body.desktop-frame-body.game-body.travian-game-ui .game-shell {
        width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0;
    }
    body.desktop-frame-body.game-body.travian-game-ui.game-page-immersive:is(.game-route-city, .game-route-village) .game-content-immersive {
        margin: 12px auto !important;
    }
    body.desktop-frame-body.game-body.travian-game-ui .game-window-stage,
    body.desktop-frame-body.game-body.travian-game-ui:not(.keyboard-visible) .game-window-stage:has(> .chat-v156) {
        --window-space: var(--desktop-content-height) !important;
        inset: var(--desktop-content-top) 12px auto !important;
        width: calc(100% - 24px) !important; max-width: none !important;
        height: var(--desktop-content-height) !important; max-height: var(--desktop-content-height) !important;
        margin: 0 !important; padding: 0;
        /* Do not inherit V169's viewport-sized chat height. */
        --desktop-chat-height: var(--desktop-content-height);
    }
    body.desktop-frame-body.game-body.travian-game-ui .game-window-stage > .game-window {
        width: 100% !important; max-width: none !important;
        height: 100% !important; max-height: 100% !important;
    }
    body.desktop-frame-body.game-body.travian-game-ui .game-window-stage > .game-window > .window-body {
        min-height: 0; flex: 1 1 0;
    }
    /* Native dialogs enter the top layer, so their coordinates stay viewport based. */
    body.desktop-frame-body.game-body.travian-game-ui #game-popup.game-popup,
    body.desktop-frame-body.game-body.travian-game-ui:not(.keyboard-visible) #game-popup.game-popup:has(.chat-v156) {
        /* Older reports, rally, market and chat styles set --window-space on
           the dialog itself. Reset it here; inheriting the body value is not enough. */
        --window-space: var(--desktop-content-height) !important;
        --desktop-dialog-width: min(1040px, calc(var(--desktop-frame-width) - 24px));
        position: fixed;
        inset: calc(var(--desktop-frame-top) + var(--desktop-content-top)) auto auto calc((100vw - var(--desktop-dialog-width)) / 2) !important;
        width: var(--desktop-dialog-width) !important; max-width: none !important;
        height: var(--desktop-content-height) !important; max-height: var(--desktop-content-height) !important;
        margin: 0 !important; padding: 0; transform: none !important;
        --desktop-chat-height: var(--desktop-content-height);
        box-sizing: border-box;
        overflow: hidden;
    }
    body.desktop-frame-body.game-body.travian-game-ui #game-popup.game-popup:has(.world-window) {
        --desktop-dialog-width: calc(var(--desktop-frame-width) - 24px);
    }
    body.desktop-frame-body.game-body.travian-game-ui #game-popup.game-popup::backdrop {
        background: #10251c73; backdrop-filter: none;
    }
    body.desktop-frame-body.game-body.travian-game-ui #game-popup.game-popup [data-popup-content] {
        height: 100% !important; max-height: 100% !important; min-height: 0;
        display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
    }
    body.desktop-frame-body.game-body.travian-game-ui #game-popup .game-window {
        width: 100% !important; max-width: 100% !important; height: 100% !important;
        max-height: 100% !important; min-height: 0; flex: 1;
    }
    /* Construction is a short task, not a full-height list. Keep its natural
       height and allow its body to scroll when descriptions or queues grow. */
    body.desktop-frame-body.game-body.travian-game-ui #game-popup.game-popup:has(.construction-window) {
        --desktop-dialog-width: min(820px, calc(var(--desktop-frame-width) - 24px));
        height: auto !important;
    }
    body.desktop-frame-body.game-body.travian-game-ui #game-popup.game-popup:has(.construction-window) [data-popup-content],
    body.desktop-frame-body.game-body.travian-game-ui #game-popup.game-popup .game-window.construction-window,
    body.desktop-frame-body.game-body.travian-game-ui .game-window-stage > .game-window.construction-window {
        height: auto !important; max-height: var(--desktop-content-height) !important;
        flex: 0 1 auto;
    }
    body.desktop-frame-body.game-body.travian-game-ui .game-window-stage > .game-window.construction-window {
        width: min(820px, 100%) !important; margin-inline: auto !important;
    }
    body.desktop-frame-body.game-body.travian-game-ui .construction-window .construction-body {
        min-height: 0; flex: 0 1 auto; overflow-y: auto;
    }
    body.desktop-frame-body.game-body.travian-game-ui .construction-window .construction-submit {
        min-height: 40px; font-size: 15px;
    }
    body.desktop-frame-body.game-body.travian-game-ui .reports-v152 .letter-subject strong { font-size: 14px; }
    body.desktop-frame-body.game-body.travian-game-ui .reports-v152 .report-row time { font-size: 12px; }
    body.desktop-frame-body.game-body.travian-game-ui .reports-v152 .reports-form {
        min-height: 0; flex: 1 1 0; overflow: hidden;
    }
    body.desktop-frame-body.game-body.travian-game-ui .reports-v152 .reports-form > .window-body {
        min-height: 0; flex: 1 1 0; overflow-y: auto;
    }
    body.desktop-frame-body.game-body.travian-game-ui .game-overlay {
        inset: 0 !important; width: 100% !important; height: 100% !important;
    }
    body.desktop-frame-body.game-body.travian-game-ui .game-more-drawer {
        max-height: calc(var(--desktop-frame-height) - 24px) !important;
    }
    body.desktop-frame-body.game-body.travian-game-ui .game-more-links > a { min-height: 32px; padding-block: 2px; }
    body.desktop-frame-body.game-body.travian-game-ui :is(.city-troop-modal, .gold-shop-modal, .shop-v75) {
        max-height: calc(var(--desktop-frame-height) - 24px) !important;
        max-width: calc(var(--desktop-frame-width) - 24px) !important;
    }
    body.desktop-frame-body.game-body.travian-game-ui :is(.item-dialog, .npc-dialog, .village-switch-dialog) {
        max-height: calc(var(--desktop-frame-height) - 24px) !important;
        max-width: calc(var(--desktop-frame-width) - 24px) !important;
    }
    body.desktop-frame-body.game-body.travian-game-ui .game-notices {
        bottom: 12px; width: min(620px, calc(100% - 24px)); max-height: min(190px, 30%);
    }
    body.desktop-frame-body.game-body.travian-game-ui.game-page-immersive .construction-batch {
        bottom: calc(var(--desktop-frame-height) - var(--game-header-height) - 12px - var(--realm-height) + 8px) !important;
    }
    body.desktop-frame-body.game-body.travian-game-ui .chat-v156 .world-message p { max-width: 100ch; }
    body.desktop-frame-body.game-body.travian-game-ui .game-guide { max-width: none; }

    body.desktop-frame-body.public-portal { padding: 0 !important; }
    body.desktop-frame-body.public-portal .public-header,
    body.desktop-frame-body.public-portal .public-footer { width: 100%; padding-inline: 24px; }
    body.desktop-frame-body.public-portal .public-workspace { flex: 1 1 0; min-height: 0; max-height: 100%; }
    body.desktop-frame-body.tl-body { padding: 0; grid-template-rows: 66px minmax(0, 1fr) 34px; }
    body.desktop-frame-body.tl-body .tl-header { width: 100%; padding: 8px 20px; }
    body.desktop-frame-body.tl-body .tl-main { width: 100%; max-width: none; min-height: 0; overflow-y: auto; padding: 20px; }
    body.desktop-frame-body.tl-body .tl-auth { flex-shrink: 0; margin-block: auto; }
    body.desktop-frame-body.tl-body .tl-footer { width: 100%; padding-inline: 20px; }
    body.desktop-frame-body.tl-body .tl-world-dialog { max-height: calc(var(--desktop-frame-height) - 24px); max-width: calc(var(--desktop-frame-width) - 24px); }
    body.desktop-frame-body.registration-page { padding: 0; }
    body.desktop-frame-body.registration-page .reg-shell { width: 100%; height: 100%; min-height: 0; max-width: none; margin: 0; }
    body.desktop-frame-body.registration-page .reg-panel { max-height: calc(var(--desktop-frame-height) - 70px); }

    /* A compact overview inside the same frame; scroll only when space runs out. */
    body.desktop-frame-body > .portal-board {
        position: relative; inset: auto; width: 100%; max-width: none; height: 100%; min-height: 0;
        margin: 0; border: 0; transform: none; display: flex; flex-direction: column; overflow: hidden;
    }
    body.desktop-frame-body .portal-header { flex: none; min-height: 64px; padding: 10px 20px; gap: 14px; }
    body.desktop-frame-body .portal-header .portal-brand { font-size: 24px; }
    body.desktop-frame-body .portal-header .portal-nav { display: flex; gap: 12px; flex-wrap: wrap; }
    body.desktop-frame-body .portal-header .portal-nav :is(a, button) { font-size: 11px; }
    body.desktop-frame-body .portal-main {
        flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain;
        display: grid; grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(260px, 1fr) 100px 130px 166px;
        gap: 12px; padding-bottom: 12px; scrollbar-width: thin;
    }
    body.desktop-frame-body .portal-inset { margin-inline: 20px; }
    body.desktop-frame-body .portal-hero { min-height: 260px; }
    body.desktop-frame-body .portal-hero .hero-copy {
        display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        grid-template-rows: auto auto auto; align-content: center; align-items: center;
        width: 79%; max-width: none; height: 100%; padding: 18px 0 18px 24px;
        gap: 12px 24px; text-align: left;
    }
    body.desktop-frame-body .portal-hero .hero-copy > :not(.server-scroll) { grid-column: 1; }
    body.desktop-frame-body .portal-hero .hero-copy > .server-scroll { grid-column: 2; grid-row: 1 / 4; width: 100%; align-self: center; }
    body.desktop-frame-body .portal-hero .hero-copy > h1 { font-size: clamp(26px, 2.6vw, 32px) !important; line-height: 1.1; }
    body.desktop-frame-body .portal-hero .hero-copy > p { font-size: 14px; line-height: 1.45; }
    body.desktop-frame-body .portal-hero .hero-copy > .hero-eyebrow { display: none; }
    body.desktop-frame-body .portal-hero .hero-actions { width: 100%; gap: 8px; }
    body.desktop-frame-body .portal-hero .hero-actions .portal-button { font-size: 13px; min-height: 40px; padding: 8px; }
    body.desktop-frame-body .feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    body.desktop-frame-body .feature-grid .feature-card { min-height: 0; height: 100%; }
    body.desktop-frame-body .feature-grid .feature-card > img { height: 44px; min-height: 44px; }
    body.desktop-frame-body .feature-grid .card-copy { padding: 6px; gap: 4px; }
    body.desktop-frame-body .feature-grid .card-copy strong { font-size: 13px; }
    body.desktop-frame-body .feature-grid .card-copy > span { font-size: 12px; line-height: 1.3; }
    body.desktop-frame-body .tribes-section .ornate-heading { height: 26px; margin-bottom: 6px; }
    body.desktop-frame-body .tribes-section .ornate-heading h2 { font-size: 20px; }
    body.desktop-frame-body .tribes-section .tribe-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
    body.desktop-frame-body .tribes-section .tribe-card { min-height: 0; height: 100%; }
    body.desktop-frame-body .tribes-section .tribe-visual { height: 52px; }
    body.desktop-frame-body .tribes-section .tribe-medallion { height: 50px; max-height: 50px; }
    body.desktop-frame-body .tribes-section .tribe-card > strong { font-size: 12px; padding: 3px 5px; }
    body.desktop-frame-body .tribes-section .tribe-brief { font-size: 12px; line-height: 1.3; margin-top: 5px; }
    body.desktop-frame-body .campaign-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); min-height: 0; gap: 12px; }
    body.desktop-frame-body .campaign-grid .campaign-seasons { grid-column: auto; }
    body.desktop-frame-body .campaign-grid .campaign-heading { font-size: 17px; padding-bottom: 8px; }
    body.desktop-frame-body .campaign-grid .weather-card { min-height: 0; }
    body.desktop-frame-body .campaign-grid .weather-card > span > span { font-size: 11px; line-height: 1.3; }
    body.desktop-frame-body .campaign-grid .stage-link { min-height: 25px; font-size: 11px; }
    body.desktop-frame-body .campaign-grid .aztec-copy strong { font-size: 21px; }
    body.desktop-frame-body .campaign-grid .aztec-copy > span { font-size: 12px; }
    body.desktop-frame-body .campaign-grid .victory-card { padding: 6px; }
    body.desktop-frame-body .campaign-grid .victory-card > span > span { font-size: 11px; }
    body.desktop-frame-body .portal-footer { flex: none; min-height: 44px; padding: 8px 20px; gap: 10px; }
    body.desktop-frame-body .portal-footer .footer-brand { font-size: 20px; }
    body.desktop-frame-body .portal-footer .footer-brand img { width: 32px; height: 32px; }
    body.desktop-frame-body .portal-footer .footer-promise { font-size: 11px; }
    body.desktop-frame-body .portal-footer nav a { font-size: 11px; }
    body.desktop-frame-body .detail-dialog { max-height: calc(var(--desktop-frame-height) - 24px) !important; max-width: calc(var(--desktop-frame-width) - 24px); }
}
@media (min-width: 781px) and (max-width: 1279px) {
    body.desktop-frame-body.game-body.travian-game-ui .game-header-inner { grid-template-columns: 135px minmax(0, 1fr) auto; }
    body.desktop-frame-body.game-body.travian-game-ui .game-header .resource-copy strong { font-size: 16px; }
}
@media (min-width: 781px) and (max-width: 1050px) {
    body.desktop-frame-body .portal-header .portal-nav { order: 3; width: 100%; justify-content: space-between; margin: 0; }
    body.desktop-frame-body .portal-main { display: flex; flex-direction: column; }
    body.desktop-frame-body .portal-main > * { flex: none; }
    body.desktop-frame-body .portal-hero { min-height: 290px; }
    body.desktop-frame-body .portal-hero .hero-copy { width: 96%; }
    body.desktop-frame-body .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.desktop-frame-body .feature-grid .feature-card { min-height: 115px; height: auto; }
    body.desktop-frame-body .tribes-section .tribe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; flex: none; }
    body.desktop-frame-body .tribes-section .tribe-card { height: auto; min-height: 100px; }
    body.desktop-frame-body .campaign-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.desktop-frame-body .campaign-grid .campaign-seasons { grid-column: 1 / -1; min-height: 160px; }
    body.desktop-frame-body .campaign-grid > :not(.campaign-seasons) { min-height: 175px; }
}