/* Shared Slayora frame palette
   Loaded after page-specific styles on Hiscores, Vote, Competitions, Store,
   Wiki and Play Now so every surface uses the Roadmap / Photo Gallery look. */

/* Main framed surfaces. */
:is(
  .hs-maintenance-card,
  .hs-tabs,
  .hs-panel,
  .competition-intro,
  .competition-toolbar,
  .competition-panel,
  .sites-heading h2,
  .username-badge,
  .vote-site-card:not(.voted):not(.pending),
  .rewards-banner,
  .voters-board,
  .weekly-roll-panel,
  .vote-roll-card,
  .vote-prizes-card,
  .weekly-result-card,
  .shop-hero .page-intro-card,
  .checkout-hero .page-intro-card,
  .ticket-created-hero .page-intro-card,
  .thank-you-hero .page-intro-card,
  .hero-top3-panel,
  .product-card,
  .sidebar-panel,
  .top-donators-board,
  .terms-popup-dialog,
  .final-purchase-dialog,
  .custom-deal-bar,
  .active-deal-card,
  .dl-card,
  .step-item,
  .req-box,
  .dl-cta-banner,
  .mobile-launcher-dialog,
  .wiki-frame-card,
  .starter-guide-header,
  .starter-guide-card,
  .starter-guide-mode-card,
  .home-guide-header,
  .home-guide-card,
  .chest-guide-header,
  .chest-guide-card,
  .chest-guide-collapse-summary,
  .perk-master-header,
  .perk-master-copy-card,
  .prestige-master-header,
  .prestige-master-card,
  .workbench-gallery-header,
  .workbench-image-card,
  .ca-page-header,
  .ca-tier-card,
  .ca-tasks-section,
  .breakdown-page-header,
  .breakdown-group,
  .benefit-gallery-header,
  .benefit-image-card,
  .sigils-page-header,
  .sigils-copy-card,
  .sigil-image-card,
  .pet-sigils-header,
  .pet-sigils-card,
  .pet-sigils-list,
  .upgrade-station-header,
  .upgrade-station-card,
  .skilling-pets-header,
  .skilling-pets-card,
  .custom-pet-row,
  .custom-item-row,
  .slayer-guide-header,
  .slayer-guide-card
) {
  border: 1px solid var(--slayora-frame-border);
  background: var(--slayora-frame-bg);
  box-shadow: var(--slayora-frame-shadow);
}

/* Smaller controls and frames use the same colours with a lighter inset. */
:is(
  .hs-mode-btn,
  .hs-difficulty-btn,
  .hs-prestige-toggle,
  .hs-updated,
  .hs-search,
  .hs-skill,
  .hs-boss-item,
  .hs-page-btn,
  .competition-status-switch,
  .competition-filter-button,
  .competition-reward-row,
  .competition-label,
  .vote-input,
  .leaderboard-period-toggle,
  .voters-board-note,
  .vote-warning-box,
  .monthly-rewards,
  .monthly-reward-card,
  .vote-price-row,
  .vote-price-icon-frame,
  .weekly-wheel-label,
  .weekly-roll-entry,
  .currency-switch,
  .shop-category-btn,
  .product-voucher-option,
  .product-voucher-guarantee,
  .product-bonus-preview,
  .terms-popup-rules p,
  .final-purchase-summary div,
  .final-purchase-item,
  .final-purchase-rules p,
  .pay-card,
  .battlepass-discord-panel,
  .claim-help-box,
  .thank-you-row,
  .rank-row,
  .mini-donator-row,
  .donator-row,
  .top-donators-note,
  .top-donators-toggle,
  .active-deal-reward,
  .home-guide-table-wrap,
  .chest-guide-table-wrap,
  .prestige-table-wrap,
  .prestige-reward-ultimate-pet,
  .ca-task-group,
  .ca-task-row,
  .breakdown-items span,
  .pet-sigil-card,
  .pet-sigil-image-frame,
  .skilling-pets-table-wrap,
  .custom-pet-effect,
  .custom-item-effect,
  .slayer-guide-table-wrap
) {
  border-color: var(--slayora-subframe-border);
  background: var(--slayora-subframe-bg);
  box-shadow: var(--slayora-subframe-shadow);
}

/* One consistent burgundy / aged-gold hover treatment. */
:is(
  .hs-mode-btn,
  .hs-difficulty-btn,
  .hs-tab,
  .hs-prestige-toggle,
  .hs-skill,
  .hs-boss-item,
  .hs-page-btn:not(:disabled),
  .competition-filter-button,
  .username-badge,
  .vote-site-card:not(.voted):not(.pending),
  .monthly-reward-card,
  .vote-price-row,
  .weekly-roll-entry,
  .shop-category-btn,
  .product-card,
  .pay-option:not(.pay-option-unavailable) .pay-card,
  .active-deal-card,
  .dl-card-button,
  .chest-guide-collapse-summary,
  .breakdown-group > summary,
  .ca-task-group > summary
):hover,
:is(
  .hs-mode-btn,
  .hs-difficulty-btn,
  .hs-tab,
  .hs-prestige-toggle,
  .hs-skill,
  .hs-boss-item,
  .hs-page-btn:not(:disabled),
  .competition-filter-button,
  .active-deal-card,
  .shop-category-btn,
  .pay-option:not(.pay-option-unavailable) .pay-card,
  .dl-card-button,
  .chest-guide-collapse-summary,
  .breakdown-group > summary,
  .ca-task-group > summary
):focus-visible,
.competition-panel:not(.competition-is-hidden):hover,
.wiki-frame-link:hover .wiki-frame-card,
.wiki-frame-link:focus-visible .wiki-frame-card {
  border-color: var(--slayora-frame-border-hover);
  background: var(--slayora-frame-bg-hover);
  color: var(--slayora-frame-gold);
  box-shadow: var(--slayora-frame-shadow-hover);
}

/* Selected filters match the frame instead of switching to orange or violet. */
:is(
  .hs-mode-btn.active,
  .hs-difficulty-btn.active,
  .hs-tab.active,
  .hs-skill.active,
  .hs-boss-item.active,
  .competition-filter-button.is-active,
  .currency-switch-btn.is-active,
  .period-btn.is-active,
  .shop-category-btn.is-active
) {
  border-color: var(--slayora-frame-border-hover);
  background: var(--slayora-frame-bg-hover);
  color: var(--slayora-frame-gold);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.38),
    0 0 22px rgba(163, 55, 222, 0.18);
}

.hs-prestige-toggle:not(.active) {
  border-color: var(--slayora-subframe-border);
  background: var(--slayora-subframe-bg);
}

.pay-option.selected:not(.pay-option-unavailable) .pay-card {
  border-color: var(--slayora-frame-border-hover);
  background: var(--slayora-frame-bg-hover);
  color: var(--slayora-frame-gold);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38), 0 0 22px rgba(163, 55, 222, 0.18);
}

.competition-panel.competition-is-new {
  border-color: rgba(247, 208, 116, 0.78);
  background: var(--slayora-frame-bg);
  box-shadow: var(--slayora-frame-shadow), 0 0 28px rgba(229, 187, 103, 0.12);
}

/* Voting progress keeps its useful status cue inside the shared frame family. */
.vote-site-card.voted {
  border-color: rgba(255, 212, 107, 0.52);
  background:
    radial-gradient(circle at right center, rgba(255, 212, 107, 0.15), transparent 34%),
    radial-gradient(ellipse at 10% 5%, rgba(170, 18, 55, 0.2), transparent 37%),
    linear-gradient(138deg, rgba(32, 8, 18, 0.98), rgba(7, 4, 11, 0.99) 68%);
  box-shadow: var(--slayora-frame-shadow);
}

.vote-site-card.pending {
  border-color: rgba(102, 205, 255, 0.42);
  background:
    radial-gradient(circle at right center, rgba(102, 205, 255, 0.13), transparent 34%),
    radial-gradient(ellipse at 10% 5%, rgba(170, 18, 55, 0.2), transparent 37%),
    linear-gradient(138deg, rgba(32, 8, 18, 0.98), rgba(7, 4, 11, 0.99) 68%);
  box-shadow: var(--slayora-frame-shadow);
}

/* Combat Achievement tier identity remains visible on the unified surfaces. */
.ca-tier-card.tier-easy {
  border-color: rgba(190, 190, 190, 0.46);
}

.ca-tier-card.tier-medium {
  border-color: rgba(90, 150, 255, 0.5);
}

.ca-tier-card.tier-hard {
  border-color: rgba(120, 220, 120, 0.5);
}

.ca-tier-card.tier-elite {
  border-color: rgba(255, 180, 70, 0.5);
}

.ca-tier-card.tier-master {
  border-color: rgba(210, 90, 255, 0.52);
}

.ca-tier-card.tier-grandmaster {
  border-color: rgba(255, 90, 120, 0.52);
}

/* Buttons and text links on these pages share the same hover colour. */
:is(
  .product-add-btn,
  .checkout-btn,
  .custom-deal-submit,
  .active-deal-action,
  .terms-popup-ack,
  .final-purchase-continue,
  .osrs-discord-btn,
  .battlepass-discord-login,
  .thank-you-nav-link,
  .vote-roll-action.button,
  .vote-roll-prizes.button,
  .weekly-result-close,
  #btn-continue,
  .dl-card .button,
  .dl-cta-banner .button
):not(:disabled):not([aria-disabled="true"]):hover,
:is(
  .product-add-btn,
  .checkout-btn,
  .custom-deal-submit,
  .active-deal-action,
  .terms-popup-ack,
  .final-purchase-continue,
  .osrs-discord-btn,
  .battlepass-discord-login,
  .thank-you-nav-link,
  .vote-roll-action.button,
  .vote-roll-prizes.button,
  .weekly-result-close,
  #btn-continue,
  .dl-card .button,
  .dl-cta-banner .button
):not(:disabled):not([aria-disabled="true"]):focus-visible,
.dl-card-button:not([aria-disabled="true"]):hover .button,
.dl-card-button:not([aria-disabled="true"]):focus-visible .button {
  border-color: var(--slayora-frame-border-hover);
  background: var(--slayora-frame-bg-hover);
  color: var(--slayora-frame-gold);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42), 0 0 24px rgba(163, 55, 222, 0.16);
}

:is(.currency-switch-btn, .period-btn):hover,
:is(.currency-switch-btn, .period-btn):focus-visible,
.vote-btn.active:hover {
  background: rgba(111, 16, 45, 0.72);
  color: var(--slayora-frame-gold);
}

:is(
  .shop-input:not(.error):not([aria-invalid="true"]),
  .hs-search,
  .vote-input:not(.error):not([aria-invalid="true"]),
  .mobile-launcher-dialog input:not([type='checkbox']):not([aria-invalid="true"])
):focus {
  border-color: var(--slayora-frame-border-hover);
  box-shadow: 0 0 0 3px rgba(170, 18, 55, 0.2), 0 0 18px rgba(163, 55, 222, 0.12);
}

:is(
  .starter-guide-link,
  .perk-master-inline-link,
  .workbench-inline-here,
  .ca-tier-tasks-link
):hover,
:is(
  .starter-guide-link,
  .perk-master-inline-link,
  .workbench-inline-here,
  .ca-tier-tasks-link
):focus-visible {
  color: var(--slayora-frame-gold);
  text-decoration-color: rgba(247, 208, 116, 0.72);
}

.wiki-frame-link:focus-visible,
.dl-card-button:focus-visible {
  outline: 2px solid rgba(247, 208, 116, 0.9);
  outline-offset: 4px;
}

.active-deal-card:hover .active-deal-action,
.active-deal-card:focus-visible .active-deal-action {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42), 0 0 24px rgba(163, 55, 222, 0.16);
}

/* Keep the repeated mobile hiscore rows inside the same family without adding
   heavyweight desktop shadows to every table row. */
@media (max-width: 480px) {
  .hs-table tr {
    border-color: var(--slayora-subframe-border);
    background: var(--slayora-subframe-bg);
    box-shadow: var(--slayora-subframe-shadow);
  }
}