/* Public desktop shell only. The embedded PUS/event documents do not load this file.
   Original bitmap corners, logo and flags retain their native size. */
body.desktop-panel { --site-width: clamp(1040px, calc(100vw - 160px), 1200px); --art-width: calc(var(--site-width) + 810px); position: relative; min-width: 1136px; min-height: 1220px; margin: 0; overflow-x: auto; color: #d5d5d5; background: #020f06; }
.desktop-panel .desktop-site { position: relative; z-index: 1; width: var(--site-width); min-height: 1220px; margin: 0 auto; display: flex; flex-direction: column; }
.desktop-panel .desktop-masthead { position: relative; flex: 0 0 270px; }
.desktop-panel .desktop-columns { display: grid; grid-template-columns: 220px minmax(0, 1fr) 220px; gap: 24px; align-items: start; flex: 1 0 auto; }
.desktop-panel .desktop-content { min-width: 0; padding-top: 90px; }
.desktop-panel .menuLeftTop, .desktop-panel .menuRightTop { position: relative; top: auto; left: auto; width: 220px; background-position: 0 0; }
.desktop-panel #flag { position: absolute; top: 142px; left: 0; width: 100%; height: 64px; }
.desktop-panel .desktop-flags-left, .desktop-panel .desktop-flags-right { position: absolute; top: 0; display: flex; }
.desktop-panel .desktop-flags-left { left: 26px; }
.desktop-panel .desktop-flags-right { right: 26px; }
.desktop-panel #flag1, .desktop-panel #flag2 { position: relative; display: block; left: auto; top: auto; padding: 0; width: 60px; height: 64px; }
.desktop-panel #flag .onImage { display: block; width: 60px; height: 64px; }
.desktop-panel #flag .onHoverImage { left: 0; top: 0; width: 60px; height: 64px; }
.desktop-panel #logo { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); display: block; width: 360px; height: 245px; padding: 0; }
/* Five horizontal pieces widen architecture without stretching its central logo.
   Two narrow wall-texture strips fill the extra space; no bitmap is rewritten. */
.desktop-panel .desktop-art-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.desktop-panel .desktop-backdrop { position: absolute; inset: 0 auto 0 50%; transform: translateX(-50%); width: var(--art-width); display: flex; flex-direction: column; pointer-events: none; overflow: hidden; }
.desktop-panel .desktop-backdrop > div { display: grid; grid-template-columns: 700px minmax(0, 1fr) 400px minmax(0, 1fr) 700px; }
.desktop-panel .desktop-backdrop-top { --art-image: url(images/Background.jpg); flex: 0 0 900px; }
.desktop-panel .desktop-backdrop-wall { --art-image: url(images/repeat.jpg); flex: 1 0 0; }
.desktop-panel .desktop-backdrop-bottom { --art-image: url(images/footer.jpg); flex: 0 0 320px; }
.desktop-panel .desktop-backdrop span { min-width: 0; background-image: var(--art-image); background-repeat: repeat-y; }
.desktop-panel .desktop-backdrop-left { background-position: 0 0; }
.desktop-panel .desktop-backdrop-center { background-position: -700px 0; }
.desktop-panel .desktop-backdrop-right { background-position: -1100px 0; }
.desktop-panel .desktop-backdrop .desktop-backdrop-fill-left, .desktop-panel .desktop-backdrop .desktop-backdrop-fill-right { background: none; border: 0 solid transparent; border-image-source: var(--art-image); border-image-width: 0; border-image-repeat: stretch repeat; }
/* Match the rule above: its border shorthand also resets border-image-slice. */
.desktop-panel .desktop-backdrop .desktop-backdrop-fill-left { border-image-slice: 0 1090 0 560 fill; }
.desktop-panel .desktop-backdrop .desktop-backdrop-fill-right { border-image-slice: 0 560 0 1090 fill; }
/* All five wall pieces must start/end on the same complete 160px tile.
   Explicit width prevents vertical rounding from also rescaling the towers.
   'repeat' would cut outer tiles and center the fill tiles at different phases. */
.desktop-panel .desktop-backdrop-wall span { background-size: 1800px 160px; background-repeat: no-repeat round; }
.desktop-panel .desktop-backdrop-wall .desktop-backdrop-fill-left, .desktop-panel .desktop-backdrop-wall .desktop-backdrop-fill-right { border-image-repeat: stretch round; }
/* The lion/stone ends are 120px; only the center of the title strip expands.
   The original header is 502x321: its lower 185px are not part of this strip. */
.desktop-panel .desktop-frame { width: 100%; margin: 0; }
.desktop-panel .desktop-frame + .desktop-frame { margin-top: 36px; }
.desktop-panel .desktop-frame-heading, .desktop-panel #subTableHeader { position: relative; box-sizing: border-box; height: 136px !important; margin: 0 !important; border: 0 solid transparent; border-width: 0 120px; border-image: url(images/page-head.png) 0 120 185 fill / 0 120px / 0 stretch; background: none !important; }
.desktop-panel .desktop-frame-heading h1, .desktop-panel .desktop-frame-heading h2, .desktop-panel #subTitle { position: static; box-sizing: border-box; top: auto; left: auto; width: auto; margin: 0; padding: 34px 0 0; color: #d5d5d5; text-align: center; font: normal 23px/30px serverdetails, Georgia, "Times New Roman", serif; }
.desktop-panel .desktop-frame-body, .desktop-panel #subTableRepetable { position: relative; box-sizing: border-box; width: 100%; min-height: 0; margin: 0 !important; padding: 16px 0 24px; border: 0 solid transparent; border-width: 0 24px; border-image: url(images/page-middle.png) 0 24 fill / 0 24px / 0 stretch repeat; background: none !important; text-align: left; }
.desktop-panel .desktop-frame-bottom, .desktop-panel #subTableFooter { box-sizing: border-box; height: 25px; width: 100%; border: 0 solid transparent; border-width: 0 24px; border-image: url(images/page-footer.png) 0 24 fill / 0 24px / 0 stretch; background: none; }
.desktop-panel #subTableRepetable > table { max-width: 100%; margin-left: auto; margin-right: auto; margin-top: 0 !important; top: auto !important; }
/* Older article/profile templates used negative offsets to climb into the 321px
   header. The new separate title strip needs normal-flow content instead. */
.desktop-panel #subTableRepetable table[width="450"]:not([background]), .desktop-panel #subTableRepetable table[width="500"]:not([background]), .desktop-panel #subTableRepetable > table[width="75%"] { width: 100%; }
.desktop-panel #subTableRepetable > .text { width: auto !important; max-width: 100%; }
.desktop-panel #subTableRepetable > .textwhiteBig { position: static !important; margin: 0 0 18px !important; }
.desktop-panel #subTableRepetable > center > .errorText { position: static; top: auto; margin: 12px auto; }
.desktop-panel .headerEvent, .desktop-panel .middleEvent { position: static; top: auto; margin-top: 0; }
.desktop-panel .voteRewardHeader, .desktop-panel .voteReward, .desktop-panel .voteRewardItem { position: static; top: auto; margin-top: 0; }
.desktop-panel .desktop-site-footer { position: relative; box-sizing: border-box; flex: 0 0 auto; min-height: 320px; margin-top: 40px; padding: 180px 0 44px; text-align: center; }
.desktop-panel #footer-text { position: static; bottom: auto; height: auto; width: auto; margin: 0; color: #d5d5d5; font: 16px/1.5 serverdetails, Georgia, "Times New Roman", serif; }
.desktop-panel #footerHref { font: inherit; }
.desktop-panel #footer-text p { margin: 0; padding: 0; }
.desktop-panel #footer-text p + p { margin-top: 6px; }
.desktop-panel #footer-text a { color: #dfcfad; font: inherit; }
.desktop-panel #footer-text a:hover { color: #fff0d1; }
.desktop-panel #footer-text { text-shadow: 0 2px 3px #000; }
.desktop-panel #footer-text .desktop-footer-policies { font-size: 13px; }
.desktop-panel #footer-text .desktop-footer-hosting { font-size: 12px; }
/* Homepage components now share the same width-aware frame as other routes. */
.desktop-panel #serverdetails { position: static; width: 100%; height: auto; padding: 0; color: #c3b9a8; font: 14px/1.5 serverdetails, Georgia, "Times New Roman", serif; }
.desktop-panel #serverdetails td { padding: 7px 10px; }
.desktop-panel #serverdetails a { font: inherit; color: #dfcfad; }
.desktop-panel .event-schedule { width: 100%; margin: 36px 0 0; }
.desktop-panel .event-schedule .event-schedule-zone { margin: 0 0 14px; font-size: 12px; }
.desktop-panel #scheduledevents { font-size: 14px; line-height: 1.5; }
.desktop-panel #scheduledevents th, .desktop-panel #scheduledevents td { padding: 9px 12px; }
/* Rankings: semantic table markup, normal-flow nation controls, readable rows. */
.desktop-panel .rankings-view { width: 100%; }
.desktop-panel .ranking-nations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 420px; gap: 12px; margin: 0 auto 18px; padding: 0; }
.desktop-panel #subTableRepetable .ranking-nations a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 1px solid transparent; color: #d5d5d5; font: 13px/1.4 serverdetails, Georgia, "Times New Roman", serif; text-decoration: none; }
.desktop-panel #subTableRepetable .ranking-nations a[aria-current="page"] { background: #38271d; border-color: #958363; color: #e5d3ad; }
.desktop-panel #subTableRepetable .ranking-nations a:hover { border-color: #786c5c; background-color: #422d2266; }
.desktop-panel .ranking-nations .nationKarus, .desktop-panel .ranking-nations .nationMix, .desktop-panel .ranking-nations .nationHuman { display: block; width: 102px; height: 100px; background-repeat: no-repeat; background-position: center; }
.desktop-panel .ranking-nations a:hover .nationKarus { background-image: url(images/nation_karus-hover.png); }
.desktop-panel .ranking-nations a:hover .nationMix { background-image: url(images/nations_mix-hover.png); }
.desktop-panel .ranking-nations a:hover .nationHuman { background-image: url(images/nation_elmo-hover.png); }
.desktop-panel .rankings-table-scroll { max-width: 100%; overflow-x: auto; }
.desktop-panel .ranking-table { width: 100%; min-width: 520px; border-collapse: collapse; table-layout: fixed; color: #d5d5d5; font: 13px/1.45 serverdetails, Georgia, "Times New Roman", serif; }
.desktop-panel .ranking-table .ranking-rank-column { width: 76px; }
.desktop-panel .ranking-table .ranking-nation-column { width: 62px; }
.desktop-panel .ranking-table .ranking-mark-column { width: 48px; }
.desktop-panel .ranking-table .ranking-points-column { width: 144px; }
.desktop-panel .ranking-table th, .desktop-panel .ranking-table td { padding: 6px 10px; border: 1px solid #786c5c; vertical-align: middle; text-align: center; overflow-wrap: anywhere; }
.desktop-panel .ranking-table th { padding: 8px 6px; background: #2d1f17; color: #d5d5d5; font-size: 12px; white-space: nowrap; }
.desktop-panel .ranking-table td { height: auto; }
.desktop-panel .ranking-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.desktop-panel .ranking-table:not(.ranking-table--clan) td:nth-child(3), .desktop-panel .ranking-table--clan td:nth-child(4) { text-align: left; }
.desktop-panel #subTableRepetable .ranking-table td a { color: #dfcfad; font: inherit; }
.desktop-panel .ranking-table tbody tr:hover td { background-color: #4c392a; }
.desktop-panel .ranking-table td img { vertical-align: middle; }
.desktop-panel .ranking-position { display: inline-block; min-width: 24px; margin-left: 5px; color: #c8b58f; font-variant-numeric: tabular-nums; }
/* Public payment/account details consume the widened content, without changing PUS. */
.desktop-panel .payment-page { width: 100%; max-width: none; padding: 0; }
.desktop-panel .payment-provider-column { width: 140px; }
.desktop-panel .payment-method-table th, .desktop-panel .payment-method-table td { padding: 10px 12px; }
.desktop-panel .payment-provider-note { font-size: 12px; }
.desktop-panel .account-overview { width: 100%; }