/* 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%; }

/* Full ranking pages share the accepted transparent User Ranking presentation. */
.desktop-panel .rankings-view--frameless .rankings-table-scroll {
    box-sizing: border-box;
    padding: 0 18px 8px;
}
.desktop-panel .ranking-table.ranking-table--frameless {
    min-width: 460px;
    font: 14px/1.5 serverdetails, Georgia, "Times New Roman", serif;
    color: #dfcfad;
    text-shadow: 0 1px 2px #000;
    background: transparent;
    border: 0;
}
.desktop-panel .ranking-table--frameless .ranking-rank-column { width: 90px; }
.desktop-panel .ranking-table--frameless .ranking-points-column { width: 140px; }
.desktop-panel .ranking-table.ranking-table--frameless th,
.desktop-panel .ranking-table.ranking-table--frameless td {
    padding: 9px 8px;
    border: 0;
    background: transparent;
}
.desktop-panel .ranking-table.ranking-table--frameless th {
    color: #bfb8ac;
    font-size: 13px;
    font-weight: normal;
}
.desktop-panel .ranking-table--frameless:not(.ranking-table--clan) th:nth-child(3),
.desktop-panel .ranking-table--frameless.ranking-table--clan th:nth-child(4) { text-align: left; }
.desktop-panel .ranking-table--frameless th:last-child { text-align: right; }
.desktop-panel .ranking-table--frameless thead tr {
    border-bottom: 1px solid rgba(149, 131, 99, 0.55);
}
.desktop-panel .ranking-table--frameless tbody tr {
    border-bottom: 1px solid rgba(149, 131, 99, 0.3);
}
.desktop-panel .ranking-table--frameless tbody tr:last-child { border-bottom: 0; }
.desktop-panel .ranking-table.ranking-table--frameless tbody tr:hover td {
    background: rgba(149, 131, 99, 0.08);
}

/* Policies use the native stone frame, not an additional card or fixed-width box. */
.desktop-panel #subTableRepetable .policy-page {
    box-sizing: border-box;
    width: 100%;
    padding: 0 24px 8px;
    color: #dfcfad;
    font: 14px/1.7 serverdetails, Georgia, "Times New Roman", serif;
    text-align: start;
    text-shadow: 0 1px 2px #000;
    overflow-wrap: break-word;
}
.desktop-panel .policy-page .policy-updated {
    margin: 0 0 16px;
    color: #bfb8ac;
    font-size: 12px;
}
.desktop-panel .policy-page p { margin: 0 0 12px; }
.desktop-panel .policy-page section { margin: 24px 0 0; }
.desktop-panel .policy-page h2 {
    margin: 0 0 10px;
    padding: 0 0 8px;
    border-bottom: 1px solid rgba(149, 131, 99, 0.4);
    color: #e5d3ad;
    font: 18px/1.45 serverdetails, Georgia, "Times New Roman", serif;
}
.desktop-panel #subTableRepetable .policy-page a { color: #dfcfad; font: inherit; }
.desktop-panel #subTableRepetable .policy-page a:hover { color: #fff0d1; }
.desktop-panel .policy-page .policy-contact {
    margin-top: 24px;
    padding-top: 12px;
    border-top: 1px solid rgba(149, 131, 99, 0.4);
}
.desktop-panel .policy-page[dir="rtl"] { font-family: Georgia, "Times New Roman", serif; }
.desktop-panel .policy-page[dir="rtl"] h2 { font-family: inherit; }

/* Clan ladder: separate member totals from the spendable clan NP balance. */
.desktop-panel .ranking-table.ranking-table--clan { min-width: 600px; }
.desktop-panel .ranking-table--clan .ranking-rank-column { width: 68px; }
.desktop-panel .ranking-table--clan .ranking-nation-column { width: 76px; }
.desktop-panel .ranking-table--clan .ranking-mark-column { width: 56px; }
.desktop-panel .ranking-table--clan .ranking-points-column,
.desktop-panel .ranking-table--clan .ranking-clan-points-column { width: 112px; }
.desktop-panel #subTableRepetable .ranking-table--clan th:nth-child(5),
.desktop-panel #subTableRepetable .ranking-table--clan .ranking-member-points,
.desktop-panel #subTableRepetable .ranking-table--clan .ranking-clan-points {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.desktop-panel .ranking-table--clan .ranking-clan-points { color: #bfb8ac; }

/* Moderation lists share the transparent ladder finish, not its points layout. */
.desktop-panel .ranking-table.ranking-table--moderation { min-width: 520px; }
.desktop-panel .moderation-nation-column { width: 76px; }
.desktop-panel .moderation-name-column { width: 124px; }
.desktop-panel .moderation-date-column { width: 118px; }
.desktop-panel #subTableRepetable .ranking-table--moderation th,
.desktop-panel #subTableRepetable .ranking-table--moderation td {
    text-align: left;
    vertical-align: top;
}
.desktop-panel #subTableRepetable .ranking-table--moderation th { white-space: normal; }
.desktop-panel #subTableRepetable .ranking-table--moderation th:first-child,
.desktop-panel #subTableRepetable .ranking-table--moderation td:first-child { text-align: center; }
.desktop-panel .ranking-table--moderation .moderation-date { color: #bfb8ac; font-size: 12px; }
.desktop-panel .listing-empty:empty { display: none; }
.desktop-panel .listing-empty { margin: 18px 8px 0; font: 14px/1.5 serverdetails, Georgia, "Times New Roman", serif; color: #bfb8ac; }

/* Game News is a plain topic/date list inside the native frame. */
.desktop-panel .ranking-table.ranking-table--news { min-width: 0; }
.desktop-panel .news-date-column { width: 156px; }
.desktop-panel #subTableRepetable .ranking-table--news th:first-child,
.desktop-panel #subTableRepetable .ranking-table--news .news-topic { text-align: left; }
.desktop-panel .ranking-table--news .news-date { color: #bfb8ac; font-size: 12px; }

/* All existing Story translations share these YUI IDs. Keep chapter behavior,
   but remove the extra parchment box and fixed width without rewriting prose. */
.desktop-panel #subTableRepetable #doc {
    box-sizing: border-box;
    width: 100%;
    height: auto !important;
    padding: 0 24px 8px;
    color: #dfcfad;
    font: 14px/1.75 serverdetails, Georgia, "Times New Roman", serif;
    text-align: left;
    text-shadow: 0 1px 2px #000;
}
.desktop-panel #subTableRepetable #doc #demo { width: 100%; height: auto !important; }
.desktop-panel #doc #demo > div:first-child { background: none !important; }
.desktop-panel #doc #demo .yui-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0 0 14px !important;
    border-bottom: 1px solid rgba(149, 131, 99, 0.4);
}
.desktop-panel #doc #demo .yui-nav li { margin: 0; padding: 0; }
.desktop-panel #subTableRepetable #doc #demo .yui-nav li a {
    box-sizing: border-box;
    display: block;
    min-width: 30px;
    padding: 5px 7px;
    border: 1px solid #786c5c;
    background: #2d1f17;
    color: #dfcfad;
    font: 13px/1.4 serverdetails, Georgia, "Times New Roman", serif;
    text-align: center;
    text-decoration: none;
}
.desktop-panel #doc #demo .yui-nav li em { padding: 0; color: inherit; font: inherit; }
.desktop-panel #subTableRepetable #doc #demo .yui-nav li a:hover,
.desktop-panel #subTableRepetable #doc #demo .yui-nav li.selected a {
    border-color: #b69a69;
    background: #422d22;
    color: #fff0d1;
    text-decoration: none;
}
.desktop-panel #doc #demo .yui-content {
    box-sizing: border-box;
    width: 100%;
    height: auto !important;
    margin: 0;
    padding: 20px 0 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    overflow-wrap: break-word;
}
.desktop-panel #doc #demo .yui-content p { margin: 0; }
.desktop-panel #doc #demo .yui-content .textSmall { color: inherit; font: inherit; }
.desktop-panel #doc #demo .yui-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}