/* =====================================================================
   Race select — custom dropdown for the «Персонаж» panel (concept).
   The native <select id="coreRace"> stays in the DOM as the single source
   of truth (value, disabled, onchange). It is only visually hidden; the
   enhancer below mirrors its options and writes the choice back.
   ===================================================================== */
.race-select {
  --rs-gold: #c9a45c;
  --rs-gold-hi: #e9c977;
  --rs-gold-dim: #7d6740;
  --rs-ink: #f1e2be;
  --rs-ink-dim: #a99a7b;
  --rs-wood-1: #1a1712;
  --rs-wood-2: #0d0f0e;
  --rs-parch-1: #f6e7c2;
  --rs-parch-2: #e6cb8f;
  --rs-h: 32px;                 /* closed height = current field height */
  position: relative;
  width: 100%;
  font: 15px/1 Georgia, "Times New Roman", serif;
}
/* Native select: kept for logic, hidden from view (not from forms/handlers). */
.race-select > select {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---------- Closed ---------- */
.race-select__button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: var(--rs-h);
  padding: 0 32px 0 10px;
  border: 1px solid #6f5c39;
  border-radius: 2px;
  background:
    linear-gradient(180deg, #ffffff08, transparent 45%),
    linear-gradient(180deg, var(--rs-wood-1), var(--rs-wood-2));
  box-shadow: inset 0 1px 3px #000, inset 0 0 0 1px #00000066, 0 1px 0 #ffffff0a;
  color: var(--rs-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.race-select__button::before {           /* small gold diamond in front of the value */
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #f6dc93, #a7742a);
  box-shadow: 0 0 0 1px #2a1c08;
}
.race-select__value { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.race-select__arrow {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 26px;
  border-left: 1px solid #4a3d26;
  background: center / 10px 6px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23d9b867' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: transform .18s;
}
/* hover */
.race-select__button:hover { border-color: #a88a4f; background: linear-gradient(180deg, #ffffff0d, transparent 45%), linear-gradient(180deg, #211c15, #0f1110); }
/* keyboard focus */
.race-select__button:focus { outline: 0; }
.race-select__button:focus-visible { border-color: var(--rs-gold-hi); box-shadow: inset 0 1px 3px #000, 0 0 0 2px #e9c97740, 0 0 10px #e9c97733; }
/* open */
.race-select.is-open .race-select__button { border-color: var(--rs-gold); border-bottom-color: transparent; border-radius: 2px 2px 0 0; }
.race-select.is-open .race-select__arrow { transform: rotate(180deg); border-left-color: transparent; border-right: 1px solid #4a3d26; }
/* disabled (Персонаж в ПБ/КБ, Питомец) — mirrors select.disabled */
.race-select.is-disabled .race-select__button { cursor: not-allowed; opacity: .55; filter: saturate(.4); }
.race-select.is-disabled .race-select__arrow { opacity: .4; }

/* ---------- Open menu ---------- */
.race-select__menu {
  --rs-gold: #c9a45c;
  --rs-gold-hi: #e9c977;
  --rs-ink: #f1e2be;
  --rs-ink-dim: #a99a7b;
  --rs-parch-1: #f6e7c2;
  --rs-parch-2: #e6cb8f;
  position: absolute;
  z-index: 60;                         /* above the left panel, below modals (80+) */
  left: 0;
  top: calc(100% - 1px);
  min-width: 100%;
  width: max(100%, 196px);
  margin: 0;
  padding: 5px;
  list-style: none;
  border: 1px solid var(--rs-gold);
  border-top-color: #5a4a2c;
  border-radius: 0 0 3px 3px;
  background:
    linear-gradient(180deg, #0000004d, transparent 14px),
    linear-gradient(170deg, #1f1a13 0, #13110d 55%, #0c0d0c 100%);
  box-shadow: 0 0 0 1px #050505, inset 0 1px 0 #e9c97722, 0 12px 26px #000c, 0 2px 0 #c9a45c33;
  transform-origin: top center;
  animation: rs-drop .14s ease-out;
}
.race-select__menu[hidden] { display: none; }
.race-select__menu:focus { outline: 0; }   /* focus is shown on the active option instead */
@keyframes rs-drop { from { opacity: 0; transform: translateY(-4px) scaleY(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .race-select__menu { animation: none; } }

.race-select__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 0 30px 0 10px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--rs-ink);
  cursor: pointer;
  user-select: none;
}
.race-select__option + .race-select__option { margin-top: 2px; }
.race-select__rune {                     /* gold rune initial — reads as an emblem, needs no images */
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #6f5c39;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #2c2418, #120f0b);
  color: #d9b867;
  font: 400 13px/1 BrahmsGotisch, Georgia, serif;
}
.race-select__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.race-select__hint { margin-left: auto; padding-left: 8px; color: var(--rs-ink-dim); font: 11px/1 Arial, sans-serif; white-space: nowrap; }
/* hover / active-descendant (mouse and keyboard share one look) */
.race-select__option:hover,
.race-select__option.is-active {
  border-color: #6f5c39;
  background: linear-gradient(90deg, #c9a45c26, #c9a45c0a 70%, transparent);
  color: #fff3d0;
}
.race-select__option.is-active { box-shadow: inset 2px 0 0 var(--rs-gold-hi); }
/* selected — parchment plate with dark text and a check */
.race-select__option[aria-selected="true"] {
  border-color: #8a6a2e;
  background: linear-gradient(180deg, var(--rs-parch-1) 0, #efdcaa 55%, var(--rs-parch-2) 100%);
  box-shadow: inset 0 1px 0 #fffbe8, inset 0 -1px 0 #b98d48, 0 1px 2px #000a;
  color: #3b1f07;
  font-weight: 700;
}
.race-select__option[aria-selected="true"] .race-select__rune { border-color: #8a6a2e; background: radial-gradient(circle at 50% 35%, #fff6da, #e3c47e); color: #6e1410; }
.race-select__option[aria-selected="true"] .race-select__hint { color: #6a4a22; }
.race-select__option[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.6L10 3.4' fill='none' stroke='%236e1410' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.race-select__option[aria-selected="true"].is-active { box-shadow: inset 0 1px 0 #fffbe8, inset 0 -1px 0 #b98d48, inset 2px 0 0 #6e1410, 0 0 0 1px var(--rs-gold-hi); }
.race-select__option[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* ---------- Mobile: bottom sheet over a dimmed page ---------- */
.race-select__backdrop { display: none; }
@media (max-width: 560px) {
  .race-select { --rs-h: 40px; font-size: 16px; }   /* 16px: no iOS zoom on focus */
  .race-select.is-open .race-select__button { border-bottom-color: var(--rs-gold); border-radius: 2px; }
  .race-select__backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: block;
    background: #000000b3;
    animation: rs-fade .15s ease-out;
  }
  .race-select__backdrop[hidden] { display: none; }
  .race-select__menu {
    position: fixed;
    z-index: 2147483001;
    left: var(--race-sheet-left, 8px);
    right: var(--race-sheet-right, 8px);
    top: var(--race-sheet-top, 8px);
    bottom: auto;
    width: auto;
    min-width: 0;
    max-height: var(--race-sheet-max-height, 70dvh);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    touch-action: pan-y;
    padding: 10px 10px calc(12px + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--rs-gold);
    border-radius: 6px;
    box-shadow: 0 0 0 1px #050505, inset 0 0 0 1px #e9c97722, 0 -10px 40px #000;
    animation: rs-sheet .18s ease-out;
  }
  .race-select__menu::before {             /* sheet title + gold rule */
    content: "Раса";
    display: block;
    margin: 2px 4px 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #806a42;
    color: #f0d9a1;
    font: 400 22px/1 BrahmsGotisch, Georgia, serif;
    letter-spacing: .03em;
  }
  .race-select__option { min-height: 46px; padding-left: 12px; font-size: 17px; touch-action: manipulation; }
  .race-select__option + .race-select__option { margin-top: 4px; }
  .race-select__rune { width: 28px; height: 28px; font-size: 16px; }
  .race-select__hint { font-size: 12px; }
}
@keyframes rs-fade { from { opacity: 0; } }
@keyframes rs-sheet { from { opacity: 0; transform: translateY(18px); } }