/* Illustrated Olympus. Decorative layers never receive map or control input. */
.play-page.buildings-first {
  --color-bg: #17101f;
  --color-surface: #21172b;
  --color-raised: #302238;
  --color-border: #76617b;
  --gold-line: #987a51;
  --panel-background: linear-gradient(145deg, #352739, #21172b);
  --page-background: radial-gradient(ellipse at 70% 0, #76524626, transparent 60%), #17101f;
}
.buildings-first .game-header { border-bottom-color: #987a5166; }
.buildings-first .game-brand { color: #f5e6cc; letter-spacing: .04em; }
.buildings-first .game-brand span { color: var(--gold); text-shadow: 0 0 20px #dfbc7840; }
.buildings-first :is(.battlefield, .chat-panel, .ev-root) {
  border-color: #987a5173;
  box-shadow: inset 0 1px #f3dba318, 0 8px 24px #09050e30;
}
.buildings-first .battlefield {
  background: linear-gradient(#21172be6, #21172b0a 40%, #17101f66), url('/assets/game/olympus-dusk.jpg') center 46% / cover;
}
.buildings-first .map-heading { background: linear-gradient(#21172be6, #21172b7a); border-radius: 8px 8px 0 0; }
.buildings-first .map-heading h2 { color: #f5e6cc; }
.buildings-first .map-viewport { background: radial-gradient(ellipse, #17101f40 20%, #17101f08 70%); }
.buildings-first .map-viewport::before { opacity: .18; }
.buildings-first #game-map { filter: drop-shadow(0 8px 14px #0d071cd9); }
.buildings-first .hex-cell:where(.neutral) .hex-shape { fill: #2a2034e6; stroke: #a590b19e; }
.buildings-first .hex-cell:where(.neutral.temple) .hex-shape { fill: #594831; stroke: #d2b37a; }
.buildings-first .hex-cell:where(.neutral.throne) .hex-shape { fill: #625035; stroke: #f0d499; }
.buildings-first .hex-cell.selected .hex-shape { stroke: #fff0bb; stroke-width: 3; }
.buildings-first .hex-cell:hover .hex-shape { stroke: #fff0bb; stroke-width: 2; }
.buildings-first .hex-cell:focus-visible .hex-shape { stroke: #fff; stroke-width: 3; }
.buildings-first .map-footer { background: #1b1426e8; border-top-color: #987a5166; }
.buildings-first :is(.map-controls, .ui-territory-menu > summary) { background: #24192fed; border-color: #a8895e; }
.buildings-first .ui-guide-link { padding: 2px 8px; border-radius: 4px; background: #21172bd9; }
.buildings-first .ui-clan-standings .clan-card { background: #2a2032eb; }
.buildings-first .ui-clan-standings :is(.is-leader, .is-tied-leader, .is-winner) { background: linear-gradient(110deg, #554035f2, #2e2334ed); }
.buildings-first .clan-emblem { background: #21172b; box-shadow: inset 0 0 0 3px #dfbc780d; }
.buildings-first .chat-panel { background: linear-gradient(160deg, #32243a, #21172b 65%); }
.buildings-first .chat-messages { background: linear-gradient(#17101fd9, #22172deb); border-color: #76617b80; }
.buildings-first .ev-root { background: linear-gradient(110deg, #302236, #21172b 70%); }
.buildings-first .ev-tabs:has(.ev-tab-soon) { padding-top: 13px; gap: 10px; }
.buildings-first .ev-tab-soon:disabled {
  position: relative; min-width: 132px; padding-inline: 16px;
  color: #c5b396; background: linear-gradient(135deg, #453340, #2a2033);
  border: 1px solid #b38d566b; border-radius: 6px; opacity: 1; cursor: not-allowed;
}
.buildings-first .ev-coming-soon {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 1px 9px; border: 1px solid #c6a16b; border-radius: 4px;
  background: linear-gradient(110deg, #efd6a3, #c6a16b); color: #2c1d2b;
  font: 700 12px/1.3 var(--sans); letter-spacing: .09em; white-space: nowrap;
  box-shadow: 0 2px 8px #10091966, inset 0 1px #fff1cc99;
}
.buildings-first .ev-read-state.has-snapshot { max-width: calc(100% - 236px); max-height: none; line-height: 1.2; }
.buildings-first .ev-slot { background: linear-gradient(145deg, #38283d, #241a2e); border-color: #8f72946b; }
.buildings-first .ev-slot:has(> .ev-building-art:not([hidden])) { border-color: #b590587d; }
.buildings-first .ev-slot:has(> .ev-building-art[hidden]) { background: linear-gradient(145deg, #261c30, #21182b); border-style: dashed; }
.buildings-first .ev-slot.is-selected, .buildings-first .ev-tier.is-selected { border-color: #ffdfa0; border-style: solid; }
.buildings-first .ev-slot h4 { color: #f5e6cc; }
.buildings-first .ev-slot > .ui-actions > .ui-button:not(.ev-claim) { background: #dfbc7809; border-color: #9c805c80; color: #e8d7ba; }
.buildings-first .ev-slot > .ui-actions > .ui-button:hover:not(:disabled) { border-color: var(--gold); }
.buildings-first .ev-slot .ev-claim:not(:disabled), .buildings-first .ev-build-section > summary {
  background: linear-gradient(110deg, #edd29b, #cca461);
  box-shadow: inset 0 1px #fff1c280, 0 2px 6px #0d071e40;
}
.buildings-first :is(.ev-build-options, .ev-treasury-content, .ui-player-menu-content, .ui-dialog) { background: linear-gradient(145deg, #34263d, #21172b); }
.buildings-first .ev-tier { border-color: #987a5173; background: #21152f; }

/* The painted plate has unequal subjects; crop its three complete silhouettes. */
.play-page [data-art-tier] { --art-height: 150px; --art-ratio: .85; object-fit: cover; object-position: 0% 50%; width: calc(var(--art-height) * var(--art-ratio)); height: var(--art-height); max-width: 100%; background: #21152f; border-radius: 6px; }
.play-page [data-art-tier="1"] { --art-ratio: .9; object-position: 41% 50%; }
.play-page [data-art-tier="2"] { --art-ratio: 1.2; object-position: 100% 50%; }
.buildings-first .ev-tier-art { --art-height: 130px; margin: 0 auto 12px; }
@media (min-width: 761px) {
  .buildings-first .ev-slot { grid-template-columns: minmax(0, 1fr) 74px; grid-template-rows: auto minmax(48px, auto) minmax(min-content, 1fr) auto auto; }
  .buildings-first .ev-building-art { --art-height: 62px; justify-self: end; align-self: center; margin: 0; }
  .buildings-first .ev-slot > .ui-status { align-self: start; padding-top: 4px; }
}
@media (min-width: 761px) and (max-width: 1100px), (min-width: 761px) and (max-height: 740px) {
  .buildings-first .ev-slot { grid-template-columns: minmax(0, 1fr) 44px; grid-template-rows: auto auto minmax(min-content, 1fr) auto auto; }
  .buildings-first .ev-building-art { --art-height: 36px; }
}
@media (max-width: 760px) {
  .buildings-first .battlefield { background-position: center 40%; }
  .buildings-first .ev-tier-art { --art-height: 72px; margin-bottom: 8px; }
  .buildings-first .ev-slot:has(.ev-slot-details[open]) > .ev-building-art { --art-height: 128px; width: calc(var(--art-height) * var(--art-ratio)); height: var(--art-height); align-self: center; }
}
/* Short phones need scrolling instead of clipped map and building controls. */
@media (max-width: 760px) and (max-height: 740px) {
  .play-page.buildings-first { height: auto; min-height: 100dvh; overflow-y: auto; }
  .buildings-first .game-layout { flex: none; grid-template-rows: 280px 180px auto; }
  .buildings-first .ev-slots { height: auto; grid-template-rows: repeat(2, minmax(84px, auto)); }
  .buildings-first .ev-slot { grid-template-rows: minmax(20px, auto) auto; }
}
/* Short interaction cues; no perpetual motion or animation of game values. */
@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .buildings-first :is(button, .ui-guide-link, .ev-slot, .ev-tier) {
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 180ms ease, transform 180ms ease;
  }
  .buildings-first :is(.ev-building-art, .ev-tier-art) { transition: transform 220ms ease; }
  .buildings-first .hex-cell.selected:not(.is-pending):not([data-ui-guide-target="true"]) .hex-shape {
    animation: olympus-selection-glow 900ms ease-in-out 2;
  }
  .buildings-first .ui-dialog[open],
  .buildings-first .ev-build-section[open] > .ev-build-options,
  .buildings-first .ui-player-menu[open] > .ui-player-menu-content,
  .buildings-first .ui-territory-menu[open] > .ui-territory-content,
  .buildings-first .ui-transaction.is-confirmed {
    animation: olympus-panel-in 180ms ease-out;
  }
  @keyframes olympus-panel-in {
    from { opacity: .45; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes olympus-selection-glow {
    0%, 100% { filter: drop-shadow(0 0 4px #edce8b66); }
    50% { filter: drop-shadow(0 0 8px #edce8baa); }
  }
}
@media (prefers-reduced-motion: no-preference) and (forced-colors: none) and (hover: hover) and (pointer: fine) {
  .buildings-first button:not(:disabled):hover { transform: translateY(-1px); }
  .buildings-first button:not(:disabled):active { transform: translateY(1px); }
  .buildings-first :is(.ev-slot, .ev-tier):hover { box-shadow: inset 0 1px #fff0c322, 0 0 0 1px #dfbc7840; }
  .buildings-first .ev-slot:hover .ev-building-art,
  .buildings-first .ev-tier:hover .ev-tier-art { transform: translateY(-3px); }
}
@media (forced-colors: active) {
  .buildings-first .battlefield, .buildings-first .ev-slot { background: Canvas; }
  .buildings-first .hex-cell .hex-shape { fill: Canvas; stroke: CanvasText; }
  .buildings-first .hex-cell.selected .hex-shape { stroke: Highlight; }
}