/* Homepage presentation only. Layout and application state remain in styles.css.
   Assets are local copies of the game's Warm Graphite & Aged Bronze UI. */
:root {
  --bg: #171410;
  --bg-deep: #211c17;
  --line: rgba(167, 128, 76, .22);
  --line-strong: rgba(184, 146, 90, .48);
  --accent: #d3a262;
  --accent-soft: #e2c48e;
  --gold: #b8925a;
  --gold-soft: #f2dfb6;
  --text: #e2d3ae;
  --muted: #b8aa91;
  --radius-xl: 10px;
  --radius-lg: 7px;
  --radius-md: 4px;
  --shadow: 0 14px 36px #0006, inset 0 1px 0 #ead6aa12;
  --gom-panel: linear-gradient(#2e29248c, #24221fa8), url('./assets/ui/backgrounds/ui_bg_slate_tile.png');
  --gom-chrome: linear-gradient(#24221f8c, #1b1816ad), url('./assets/ui/backgrounds/ui_bg_graphite_tile.png');
  --gom-inset: linear-gradient(#15120fc4, #15120fc4), url('./assets/ui/backgrounds/ui_bg_recessed_tile.png');
}

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: radial-gradient(ellipse at 50% 0, #a7804c18, transparent 65%),
    linear-gradient(#171410ba, #100e0ce8), url('./assets/ui/backgrounds/ui_bg_graphite_tile.png');
  background-size: auto, auto, 640px;
}
body::after { display: none; }
.ambient-left { background: radial-gradient(circle, #a7804c26, transparent 62%); }
.ambient-right { background: radial-gradient(circle, #d3a21f15, transparent 64%); }
h1, h2, h3, .brand-copy strong, .news-list-copy strong, .edition-list-copy strong {
  font-family: 'MedievalSharp', Georgia, serif;
  color: var(--gold-soft);
  text-shadow: 0 2px 5px #0007;
}
.eyebrow, .panel-label { color: var(--accent); }

.topbar.site-header {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--gom-chrome);
  border-color: var(--line-strong);
  box-shadow: 0 8px 28px #0006, inset 0 1px 0 #e2d3ae20;
}
.brand-mark {
  background: var(--gom-inset);
  border-color: var(--line-strong);
  border-radius: 7px;
  box-shadow: inset 0 1px 8px #0009;
}
.service-subnav { border-color: var(--line-strong); }
.service-subnav :is(a, .nav-button) {
  border-radius: 3px;
  color: var(--muted);
  text-shadow: 0 1px 2px #000;
}
.service-subnav :is(a, .nav-button):is(:hover, .active, .is-active, [aria-current='page']) {
  color: var(--gold-soft);
  background: url('./assets/ui/selection/ui_selection_selected.png') center bottom / 100% 5px no-repeat, #a7804c13;
}

/* Use the same carved wood and metal end caps as the game. */
:is(.primary-button, .secondary-button, .ghost-button) {
  color: var(--text);
  border: 0;
  border-radius: 3px;
  padding-inline: 1.5rem;
  background: url('./assets/ui/buttons/ui_button_secondary.png') center / 100% 100% no-repeat;
  box-shadow: 0 3px 6px #0005;
  text-shadow: 0 1px 2px #000;
  font-weight: 600;
  cursor: pointer;
  transition: filter 120ms ease, box-shadow 120ms ease;
}
/* Grid and flex forms must not stretch action artwork to the field width.
   Include the mobile menu rules, which otherwise force width: 100%. */
:root body :is(.primary-button, .secondary-button, .ghost-button),
:root .topbar.is-open .topbar-actions :is(a, button) {
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  justify-self: start;
  align-self: flex-start;
  flex: 0 1 auto;
  white-space: normal;
  text-align: center;
}
.primary-button {
  color: #fff0d2;
  background-image: url('./assets/ui/buttons/ui_button_primary.png');
}
:is(.primary-button, .secondary-button, .ghost-button):hover {
  transform: none;
  filter: brightness(1.15);
  box-shadow: 0 3px 10px #0008;
}
:is(.primary-button, .secondary-button, .ghost-button):active { filter: brightness(.9); }
:is(.primary-button, .secondary-button, .ghost-button):is(:disabled, .is-disabled, [aria-disabled='true']) {
  filter: grayscale(1) brightness(.65);
  box-shadow: none;
  cursor: not-allowed;
}
:is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid #e6bc78;
  outline-offset: 3px;
}
.text-link, .news-back-button { color: var(--gold-soft); }
.text-link:hover { color: #fff3d9; }

:is(.game-hero, .service-band, .feature-tile, .service-panel, .service-action-card,
  .service-status-panel, .hero-panel, .news-card, .news-list-item, .edition-list-item,
  .news-detail, .edition-detail, .hiscores-dialog, .consent-dialog, .cookie-banner, .rank-dialog,
  .rank-categories, .rank-board, .rank-tools form, .rank-comparison) {
  background: var(--gom-panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.game-hero-status {
  background: linear-gradient(#a7804c0d, #a7804c0d), var(--gom-chrome);
  border-color: var(--line-strong);
}
.service-band-head, .hiscores-dialog-head, .overlay-head {
  border-color: var(--line-strong);
}
:is(.account-login-form, .account-forgot-form, .register-panel, .account-settings-panel,
  .account-service-list a, .hiscores-overlay-table, .compact-profile, .faq-item) {
  background: var(--gom-inset);
  border-color: var(--line);
  border-radius: var(--radius-md);
}
:is(.news-list-item, .edition-list-item):hover {
  transform: none;
  border-color: #c69c60;
  box-shadow: 0 8px 24px #0007, inset 0 0 0 1px #d3a26224;
}
.news-image-placeholder:not([style*='background-image']),
.edition-image-placeholder:not([style*='background-image']) {
  background: radial-gradient(ellipse, #b8925a20, transparent 75%), var(--gom-inset);
  border-color: var(--line-strong);
  border-radius: 4px;
}
.service-band-head::after {
  content: '';
  display: block;
  flex: 1 1 80px;
  height: 8px;
  max-width: 360px;
  margin-left: 20px;
  background: url('./assets/ui/dividers/ui_divider_bronze.png') center / 100% 100% no-repeat;
  opacity: .65;
  pointer-events: none;
}

input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']), select, textarea,
.rank-tools input {
  color: var(--text);
  background: var(--gom-inset);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  box-shadow: inset 0 2px 5px #0007;
  font: inherit;
  color-scheme: dark;
}
input::placeholder, textarea::placeholder { color: #ab9c83; opacity: 1; }
input[type='checkbox'], input[type='radio'] { accent-color: var(--accent); }
.rank-categories button[aria-pressed='true'], .rank-categories button:hover {
  color: #fff0d2;
  background: url('./assets/ui/buttons/ui_button_secondary.png') center / 100% 100% no-repeat;
}
.rank-table th { background: #15120f55; border-color: var(--line-strong); }
.rank-table td { border-color: var(--line); }
.status-pill, .consent-required-pill { border-radius: 4px; }
/* Status colors still communicate online/offline and success/error. */
.status-pill.is-online { color: #b7d29d; background: #52613830; border-color: #7d915c70; }
.status-pill.is-offline { color: #edb2a0; background: #713c3030; border-color: #a4604d70; }
.menu-toggle, .rank-dialog-close, .overlay-close {
  color: var(--text);
  background: var(--gom-chrome);
  border-color: var(--line-strong);
  border-radius: 4px;
}
.footer { border-color: var(--line-strong); background: var(--gom-chrome); }
@media (max-width: 600px) {
  .service-band-head::after { display: none; }
  :is(.primary-button, .secondary-button, .ghost-button) { padding-inline: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.primary-button, .secondary-button, .ghost-button) { transition: none; }
}