/* Shared control theme for the public site and CMS. Change tokens here once.
   Important declarations deliberately override legacy game ID selectors and UI utilities. */
:root {
  --control-paper: #fff4d4;
  --control-ink: #292719;
  --control-red: #913427;
  --control-gold: #e6b53d;
  --control-edge: #8b7950;
  --control-shadow: 3px 3px 0 #29271940;
}
:is(select:not([aria-hidden="true"]), [data-slot="select-trigger"]) {
  box-sizing: border-box;
  min-height: 48px !important;
  max-width: 100%;
  border: 2px solid var(--control-ink) !important;
  border-radius: 3px !important;
  background-color: var(--control-paper) !important;
  color: var(--control-ink) !important;
  padding: 10px 14px !important;
  font: 600 16px/1.35 var(--body, Georgia, serif) !important;
  box-shadow: var(--control-shadow) !important;
  cursor: pointer;
}
select:not([aria-hidden="true"]) {
  appearance: none;
  padding-right: 42px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23913427' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
[data-slot="native-select-wrapper"] > svg { display: none; }
:is(select:not([aria-hidden="true"]), [data-slot="select-trigger"]):hover:not(:disabled):not([data-disabled]) {
  border-color: var(--control-red) !important;
}
:is(select:not([aria-hidden="true"]), [data-slot="select-trigger"]):focus-visible {
  outline: 3px solid var(--control-red) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px var(--control-paper) !important;
}
:is(select, [data-slot="select-trigger"]):is(:disabled, [data-disabled]) {
  opacity: .55 !important;
  cursor: not-allowed;
  box-shadow: none !important;
}
[data-slot="select-content"] {
  border: 2px solid var(--control-ink) !important;
  border-radius: 3px !important;
  background: var(--control-paper) !important;
  color: var(--control-ink) !important;
  box-shadow: 5px 5px 0 #29271940 !important;
  max-width: calc(100vw - 24px);
}
[data-slot="select-item"] {
  min-height: 44px;
  padding: 10px 36px 10px 14px !important;
  border-radius: 1px !important;
  font: 600 16px/1.35 var(--body, Georgia, serif) !important;
  cursor: pointer;
}
[data-slot="select-item"][data-state="checked"] {
  background: var(--control-red) !important;
  color: var(--control-paper) !important;
}
[data-slot="select-item"][data-highlighted] {
  background: var(--control-gold) !important;
  color: var(--control-ink) !important;
  outline: 2px solid var(--control-ink);
  outline-offset: -2px;
}
/* Customizable native pickers keep browser keyboard, typeahead and form behavior.
   Browsers without support retain their native accessible option sheet. */
@supports (appearance: base-select) {
  select:not([aria-hidden="true"]), select::picker(select) { appearance: base-select; }
  select:not([aria-hidden="true"]) {
    background-image: none;
    padding-right: 14px !important;
    gap: 18px;
    align-items: center;
  }
  select::picker-icon { color: var(--control-red); margin-left: auto; }
  select:open::picker-icon { rotate: 180deg; }
  select::picker(select) {
    margin-block: 6px;
    padding: 5px;
    border: 2px solid var(--control-ink);
    border-radius: 3px;
    background: var(--control-paper);
    color: var(--control-ink);
    box-shadow: 5px 5px 0 #29271940;
    max-height: min(360px, 60dvh);
    max-width: calc(100vw - 24px);
    overflow: auto;
    font: 600 16px/1.35 var(--body, Georgia, serif);
  }
  select option {
    min-height: 44px;
    padding: 10px 14px;
    gap: 12px;
    border-radius: 1px;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
  }
  select option:checked { background: var(--control-red); color: var(--control-paper); }
  select option:is(:hover, :focus-visible) {
    background: var(--control-gold);
    color: var(--control-ink);
    outline: 2px solid var(--control-ink);
    outline-offset: -2px;
  }
  select option:disabled { opacity: .5; cursor: not-allowed; }
  select option::checkmark { order: 1; margin-left: auto; }
}
input:is([type="checkbox"], [type="radio"]) { accent-color: var(--control-red); }
input:is([type="checkbox"], [type="radio"]):focus-visible {
  outline: 3px solid var(--control-red);
  outline-offset: 3px;
}
@media (forced-colors: active) {
  :is(select, [data-slot="select-trigger"], [data-slot="select-content"]) {
    border-color: ButtonText !important;
    box-shadow: none !important;
  }
}
/* Compact marks inside a full-height clickable label. */
[data-slot="checkbox"] {
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 2px solid var(--control-ink) !important;
  border-radius: 3px !important;
  background: var(--control-paper) !important;
  color: var(--control-ink) !important;
  flex-shrink: 0;
}
[data-slot="checkbox"][data-state="checked"] {
  background: var(--control-red) !important;
  color: var(--control-paper) !important;
}
label:has(> [data-slot="checkbox"]) { min-height: 44px; cursor: pointer; }
[data-slot="checkbox"]:focus-visible {
  outline: 3px solid var(--control-red) !important;
  outline-offset: 3px !important;
}