/*
  Riddler's Project frontend polish
  Final shared layer for user-facing shortcode pages.
*/

:root {
  --rp-polish-bg: #1f1e1c;
  --rp-polish-surface: rgba(37, 37, 34, .96);
  --rp-polish-surface-dark: rgba(22, 22, 20, .96);
  --rp-polish-field: rgba(52, 52, 49, .94);
  --rp-polish-field-dark: #252522;
  --rp-polish-border: rgba(185, 155, 94, .38);
  --rp-polish-border-strong: rgba(218, 188, 115, .72);
  --rp-polish-gold: #dabc73;
  --rp-polish-gold-dark: #b99b5e;
  --rp-polish-text: #e8e0d1;
  --rp-polish-muted: rgba(232, 224, 209, .72);
  --rp-polish-red: #d63637;
  --rp-polish-green: #6ea27f;
  --rp-polish-font-head: "Chakra Petch", sans-serif;
  --rp-polish-font-body: "Inter", sans-serif;
}

:is(
  .rp-mod-page,
  .rp-account-page,
  .rp-login-page,
  .rp-registration-page,
  .rp-error-page,
  .rp-activation-page,
  .rp-confirmed-page,
  .rp-rr-page,
  .rp-lb-page,
  .rp-msg-tool,
  .rp-prize-fulfillment,
  .rp-contact-page,
  .rp-support-page,
  .rp-fantasy-wrap,
  .rp-scoutline-page,
  .rp-streams-page,
  .rp-calendar-page,
  .rp-about-project-page,
  .rp-install-guide-page
) {
  color: var(--rp-polish-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

@supports selector(body:has(.rp-mod-page)) {
  body:has(:is(
    .rp-mod-page,
    .rp-account-page,
    .rp-login-page,
    .rp-registration-page,
    .rp-error-page,
    .rp-activation-page,
    .rp-confirmed-page,
    .rp-rr-page,
    .rp-lb-page,
    .rp-msg-tool,
    .rp-prize-fulfillment,
    .rp-contact-page,
    .rp-support-page,
    .rp-fantasy-wrap,
    .rp-scoutline-page,
    .rp-streams-page,
    .rp-calendar-page,
    .rp-about-project-page,
    .rp-install-guide-page
  )) {
    background: var(--rp-polish-bg) !important;
  }
}

:is(
  .rp-mod-page,
  .rp-account-page,
  .rp-login-page,
  .rp-registration-page,
  .rp-error-page,
  .rp-activation-page,
  .rp-confirmed-page,
  .rp-rr-page,
  .rp-lb-page,
  .rp-msg-tool,
  .rp-prize-fulfillment,
  .rp-contact-page,
  .rp-support-page,
  .rp-fantasy-wrap
) a {
  transition:
    color .16s ease,
    border-color .16s ease,
    background-color .16s ease,
    box-shadow .16s ease;
}

:is(
  .rp-mod-page,
  .rp-account-page,
  .rp-login-page,
  .rp-registration-page,
  .rp-error-page,
  .rp-activation-page,
  .rp-confirmed-page,
  .rp-rr-page,
  .rp-lb-page,
  .rp-msg-tool,
  .rp-prize-fulfillment,
  .rp-contact-page,
  .rp-support-page,
  .rp-fantasy-wrap
) :is(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid rgba(218, 188, 115, .72) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(218, 188, 115, .12) !important;
}

:is(
  .rp-mod-page,
  .rp-account-page,
  .rp-login-page,
  .rp-registration-page,
  .rp-error-page,
  .rp-activation-page,
  .rp-confirmed-page,
  .rp-prize-fulfillment,
  .rp-msg-tool,
  .rp-contact-page,
  .rp-support-page,
  .rp-fantasy-wrap
) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
  textarea,
  select
) {
  background: var(--rp-polish-field) !important;
  color: var(--rp-polish-text) !important;
  border-color: var(--rp-polish-border) !important;
  caret-color: var(--rp-polish-gold);
}

:is(
  .rp-mod-page,
  .rp-account-page,
  .rp-login-page,
  .rp-registration-page,
  .rp-error-page,
  .rp-activation-page,
  .rp-confirmed-page,
  .rp-prize-fulfillment,
  .rp-msg-tool,
  .rp-contact-page,
  .rp-support-page,
  .rp-fantasy-wrap
) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
  textarea,
  select
):hover {
  border-color: rgba(218, 188, 115, .58) !important;
}

:is(
  .rp-mod-page,
  .rp-account-page,
  .rp-login-page,
  .rp-registration-page,
  .rp-error-page,
  .rp-activation-page,
  .rp-confirmed-page,
  .rp-prize-fulfillment,
  .rp-msg-tool,
  .rp-contact-page,
  .rp-support-page,
  .rp-fantasy-wrap
) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
  textarea,
  select
):focus {
  outline: none !important;
  border-color: var(--rp-polish-gold) !important;
  box-shadow:
    0 0 0 3px rgba(218, 188, 115, .14),
    0 0 22px rgba(218, 188, 115, .10) !important;
}

:is(
  .rp-mod-page,
  .rp-account-page,
  .rp-login-page,
  .rp-registration-page,
  .rp-error-page,
  .rp-activation-page,
  .rp-confirmed-page,
  .rp-prize-fulfillment,
  .rp-msg-tool,
  .rp-contact-page,
  .rp-support-page,
  .rp-fantasy-wrap
) :is(input, textarea)::placeholder {
  color: rgba(232, 224, 209, .48) !important;
  opacity: 1;
}

:is(
  .rp-mod-page,
  .rp-account-page,
  .rp-login-page,
  .rp-registration-page,
  .rp-error-page,
  .rp-activation-page,
  .rp-confirmed-page,
  .rp-prize-fulfillment,
  .rp-msg-tool,
  .rp-contact-page,
  .rp-support-page,
  .rp-fantasy-wrap
) select option {
  background: #1f1e1c;
  color: #f3efe6;
}

:is(
  .rp-mod-page,
  .rp-account-page,
  .rp-login-page,
  .rp-registration-page,
  .rp-error-page,
  .rp-activation-page,
  .rp-confirmed-page,
  .rp-prize-fulfillment,
  .rp-msg-tool,
  .rp-contact-page,
  .rp-support-page,
  .rp-fantasy-wrap
) select option:checked {
  background: #3b321f;
  color: #f0d894;
}

:is(
  .rp-mod-page,
  .rp-account-page,
  .rp-login-page,
  .rp-registration-page,
  .rp-error-page,
  .rp-activation-page,
  .rp-confirmed-page,
  .rp-prize-fulfillment,
  .rp-msg-tool,
  .rp-contact-page,
  .rp-support-page,
  .rp-fantasy-wrap
) :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--rp-polish-gold);
}

:is(
  .rp-mod-page,
  .rp-account-page,
  .rp-login-page,
  .rp-registration-page,
  .rp-error-page,
  .rp-activation-page,
  .rp-confirmed-page,
  .rp-prize-fulfillment,
  .rp-msg-tool,
  .rp-contact-page,
  .rp-support-page,
  .rp-fantasy-wrap
) :is(
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select
):-webkit-autofill,
:is(
  .rp-mod-page,
  .rp-account-page,
  .rp-login-page,
  .rp-registration-page,
  .rp-error-page,
  .rp-activation-page,
  .rp-confirmed-page,
  .rp-prize-fulfillment,
  .rp-msg-tool,
  .rp-contact-page,
  .rp-support-page,
  .rp-fantasy-wrap
) :is(
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select
):-webkit-autofill:hover,
:is(
  .rp-mod-page,
  .rp-account-page,
  .rp-login-page,
  .rp-registration-page,
  .rp-error-page,
  .rp-activation-page,
  .rp-confirmed-page,
  .rp-prize-fulfillment,
  .rp-msg-tool,
  .rp-contact-page,
  .rp-support-page,
  .rp-fantasy-wrap
) :is(
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select
):-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #353532 inset !important;
  box-shadow: 0 0 0 1000px #353532 inset !important;
  -webkit-text-fill-color: #f3efe6 !important;
  caret-color: #f3efe6 !important;
  border-color: rgba(218, 188, 115, .58) !important;
  transition:
    background-color 99999s ease-out 0s,
    color 99999s ease-out 0s;
}

:is(
  .rp-mod-btn,
  .rp-account-btn,
  .rp-login-btn,
  .rp-confirmed-btn,
  .rp-error-btn,
  .rp-lb-back-button,
  .rp-rr-back-button,
  .rp-fantasy-button,
  .rp-fantasy-standings-link,
  .rp-support-form__button,
  .rp-support-login-card__button,
  .rp-contact-page button[type="submit"],
  .rp-registration-page .registration-form button[type="submit"]
) {
  text-decoration: none !important;
}

:is(
  .rp-mod-btn,
  .rp-account-btn,
  .rp-login-btn,
  .rp-confirmed-btn,
  .rp-error-btn,
  .rp-lb-back-button,
  .rp-rr-back-button,
  .rp-fantasy-button,
  .rp-fantasy-standings-link
):hover,
:is(
  .rp-mod-btn,
  .rp-account-btn,
  .rp-login-btn,
  .rp-confirmed-btn,
  .rp-error-btn,
  .rp-lb-back-button,
  .rp-rr-back-button,
  .rp-fantasy-button,
  .rp-fantasy-standings-link
):focus-visible {
  background: var(--rp-polish-field-dark) !important;
  color: var(--rp-polish-gold) !important;
  border-color: var(--rp-polish-gold) !important;
}

:is(
  .rp-rr-table,
  .rp-leaderboard-table,
  .rp-support-history-table,
  .rp-fantasy-table
) {
  border-color: var(--rp-polish-border) !important;
}

:is(
  .rp-rr-table,
  .rp-leaderboard-table,
  .rp-support-history-table,
  .rp-fantasy-table
) th {
  background: rgba(25, 24, 21, .96) !important;
  color: var(--rp-polish-gold) !important;
  border-color: rgba(185, 155, 94, .46) !important;
  font-family: var(--rp-polish-font-head);
  letter-spacing: .04em;
}

:is(
  .rp-rr-table,
  .rp-leaderboard-table,
  .rp-support-history-table,
  .rp-fantasy-table
) td {
  border-color: rgba(0, 0, 0, .24) !important;
}

:is(
  .rp-login-alert,
  .rp-reg-alert,
  .rp-msg-notice,
  .rp-prize-form__notice,
  .rp-fantasy-notice,
  .rp-support-box__notice,
  .rp-redeem-message
) {
  border-radius: 12px;
  font-weight: 800;
}

:is(
  .rp-login-alert--success,
  .rp-reg-alert--success,
  .rp-msg-notice.is-success,
  .rp-prize-form__notice--success,
  .rp-fantasy-notice-success
) {
  border-color: rgba(110, 162, 127, .62) !important;
  background: rgba(34, 61, 43, .40) !important;
  color: #d9f4df !important;
}

:is(
  .rp-login-alert--error,
  .rp-reg-alert--error,
  .rp-msg-notice.is-error,
  .rp-prize-form__notice--error,
  .rp-fantasy-notice-danger
) {
  border-color: rgba(214, 54, 55, .64) !important;
  background: rgba(70, 24, 28, .42) !important;
  color: #ffd1d1 !important;
}

:is(.rp-rr-page, .rp-lb-page, .rp-msg-tool, .rp-prize-fulfillment) a:not([class]) {
  color: var(--rp-polish-gold);
  font-weight: 850;
  text-decoration: none;
  border-bottom: 1px solid rgba(218, 188, 115, .42);
}

:is(.rp-rr-page, .rp-lb-page, .rp-msg-tool, .rp-prize-fulfillment) a:not([class]):hover,
:is(.rp-rr-page, .rp-lb-page, .rp-msg-tool, .rp-prize-fulfillment) a:not([class]):focus-visible {
  color: #f0d894;
  border-color: rgba(240, 216, 148, .86);
}

.rp-msg-unread,
.rp-account-strip.has-unread .rp-account-strip__messages b {
  background: var(--rp-polish-red) !important;
  color: #fff !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 0 16px rgba(214, 54, 55, .34);
}

.rp-account-strip__item:focus-visible {
  outline: 2px solid rgba(218, 188, 115, .72);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 1px rgba(218, 188, 115, .16);
}

.rp-prize-form__method-grid input[type="radio"]:focus,
.rp-prize-form__method-grid input[type="radio"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.rp-prize-form__method-grid label:focus-within {
  outline: 1px solid rgba(218, 188, 115, .74);
  outline-offset: 0;
}