/* Symmetrical podiums for every nation's standings. */
body.game-page #app .leaderboard-panel .empire-feature-head {display:grid;grid-template-columns:clamp(44px,7vw,96px) minmax(0,1fr) clamp(44px,7vw,96px)}
body.game-page #app .leaderboard-panel .empire-feature-head img {justify-self:center;max-width:100%}
body.game-page #app .leaderboard-panel .empire-feature-head>div {min-width:0}

/* Automatically show active construction with the national parchment and ornament. */
body.game-page #app .capital-construction {
  position:fixed;inset:72px 18px auto auto;z-index:65;
  display:block;width:260px;max-width:calc(100vw - 28px);
  max-height:none;overflow:visible;filter:none;
  --construction-line:var(--ornament-line,var(--nation-line,url('/assets/bulgarian-embroidery-line.svg')));
}
/* Fade the display without taking hover, clicks, or panning away from the city. */
body.game-page #app .capital-construction,
body.game-page #app .capital-construction *{pointer-events:none}
body.game-page #app .capital-construction .construction-cancel{pointer-events:auto}
body.game-page #app .capital-construction .construction-menu-panel{transition:opacity 120ms}
body.game-page #app .capital-construction.is-pointer-over .construction-menu-panel{opacity:.65}
/* Show the full building label when choosing its cancel button. */
body.game-page #app .capital-construction .construction-menu-panel:has(.construction-cancel:is(:hover,:focus-visible)){opacity:1}
body.game-page #app .capital-construction .construction-cancel{position:absolute;right:0;top:10px;width:24px;height:24px;padding:0;border:1px solid var(--nation-accent,#89583a);border-radius:4px;background:var(--nation-paper,#f1ddba);color:var(--nation-ink,#432b1b);font:700 17px Arial,sans-serif;text-align:center;cursor:pointer;box-shadow:0 2px 5px #0004}
body.game-page #app .capital-construction .construction-cancel:hover{background:#d9b987;outline:2px solid var(--nation-accent,#89583a)}
body.game-page #app .capital-construction .construction-card{position:relative;padding-right:30px}
@media(prefers-reduced-motion:reduce){body.game-page #app .capital-construction :is(.construction-menu-panel,.construction-heading,.construction-image,.construction-info){transition:none}}
body.game-page #app .capital-construction .construction-menu-panel {
  position:relative;inset:auto;min-width:0;width:100%;box-sizing:border-box;
  padding:14px 12px 28px;max-height:calc(100dvh - 88px);overflow:auto;
  color:var(--nation-ink,#3e291b);scrollbar-width:thin;
}
body.game-page #app .capital-construction .construction-heading {display:flex;justify-content:space-between;padding:0 2px 10px;color:inherit;font:600 13px Cinzel,Georgia,serif;text-shadow:none;letter-spacing:0}
body.game-page #app .capital-construction .construction-heading span {color:inherit;font:700 10px Arial,sans-serif}
body.game-page #app .capital-construction .construction-card {display:grid;grid-template-columns:80px minmax(0,1fr);gap:10px;padding:10px 30px 10px 0;border:0;border-top:1px solid #9e775650;border-radius:0;background:none;box-shadow:none;text-align:left}
body.game-page #app .capital-construction .construction-image,
body.game-page #app .capital-construction .construction-image .capital-portrait {height:66px;width:80px;filter:none}
body.game-page #app .capital-construction .capital-building-art {width:78px}
.construction-info {display:flex;flex-direction:column;gap:5px;min-width:0}
body.game-page #app .capital-construction .construction-info strong {font:600 12px Cinzel,Georgia,serif;color:inherit;text-shadow:none}
.construction-info>span {font:700 9px Arial,sans-serif;letter-spacing:.06em}
body.game-page #app .capital-construction .construction-info time {border:0;margin:0;padding:0;color:inherit;font:700 12px Arial,sans-serif;text-shadow:none}
@media(max-width:700px) {
  body.game-page #app .capital-construction {top:128px;right:14px}
  body.game-page #app .capital-construction .construction-menu-panel {max-height:calc(100dvh - 144px)}
  body.game-page #app .leaderboard-panel .empire-feature-head {gap:8px;padding-left:12px;padding-right:12px}
  body.game-page #app .leaderboard-panel .empire-feature-head h1 {font-size:clamp(20px,5.4vw,30px);overflow-wrap:anywhere}
  body.game-page #app .leaderboard-panel .empire-feature-head .small-label {font-size:8px}
}
