/* =========================================================
   CFRoleRandomizer: стилистика 1-в-1 с accept-form.css (af2-panel,
   форум id=9, notacross.ru) — свои переменные --cfrr-*, чтобы не
   зависеть от того, подключён ли accept-form.css на странице.
   Светлая/тёмная тема через .golden (как в accept-form.css).
========================================================= */

:root {
  --cfrr-bg:          rgba(247, 247, 247, 0.90);
  --cfrr-bg-soft:     rgba(0, 0, 0, 0.04);
  --cfrr-bg-hover:    rgba(0, 0, 0, 0.06);
  --cfrr-border:      rgba(100, 90, 80, 0.16);
  --cfrr-border-soft: rgba(0, 0, 0, 0.08);
  --cfrr-text:        rgba(30, 25, 20, 0.88);
  --cfrr-text-dim:    rgba(30, 25, 20, 0.55);
  --cfrr-text-soft:   rgba(30, 25, 20, 0.32);
  --cfrr-accent:      rgba(30, 25, 20, 0.75);
  --cfrr-ok:          rgba(90, 150, 90, 0.90);
  --cfrr-danger:      rgba(180, 70, 70, 0.90);
  --cfrr-shadow:      0 14px 36px rgba(0, 0, 0, 0.12), 0 2px 0 rgba(255, 255, 255, 0.90) inset;
  --cfrr-radius-lg:   14px;
  --cfrr-radius-md:   10px;
  --cfrr-radius-sm:   6px;
}

.golden {
  --cfrr-bg:          rgba(38, 38, 38, 0.9);
  --cfrr-bg-soft:     rgba(255, 255, 255, 0.04);
  --cfrr-bg-hover:    rgba(255, 255, 255, 0.07);
  --cfrr-border:      rgba(255, 255, 255, 0.10);
  --cfrr-border-soft: rgba(255, 255, 255, 0.06);
  --cfrr-text:        rgba(255, 255, 255, 0.90);
  --cfrr-text-dim:    rgba(255, 255, 255, 0.55);
  --cfrr-text-soft:   rgba(255, 255, 255, 0.30);
  --cfrr-accent:      rgba(255, 255, 255, 0.80);
  --cfrr-ok:          rgba(120, 190, 120, 0.90);
  --cfrr-danger:      rgba(210, 90, 90, 0.90);
  --cfrr-shadow:      0 20px 56px rgba(0, 0, 0, 0.50), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

#cf-role-randomizer-box {
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: rgb(var(--pun-light));
  color: var(--cfrr-text);
  border: 1px solid rgb(var(--acc7), .1) !important;
  border-radius: var(--cfrr-radius-lg);
  box-shadow: 0px 10px 25px rgb(var(--acc3), .3);
  font: 400 11px var(--font5, inherit);
  overflow: hidden !important;
  text-align: left !important;
  line-height: normal !important;
}

#cf-role-randomizer-box * {
  box-sizing: border-box;
  text-align: left;
}

#cf-role-randomizer-box a {
  text-decoration: none !important;
}

#cf-role-randomizer-box ul,
#cf-role-randomizer-box ol {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* --- шапка --- */

#cf-role-randomizer-box .cf-role-rand-head {
  display: block;
  padding: 12px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--cfrr-border-soft);
}

#cf-role-randomizer-box .cf-role-rand-title {
  color: var(--cfrr-text);
  font: 700 14px/1.2 var(--font5, inherit);
  text-transform: lowercase;
}

#cf-role-randomizer-box .cf-role-rand-sub {
  margin-top: 3px;
  color: var(--cfrr-text-soft);
  font: 400 10px/130% var(--font5, inherit);
}

/* --- контент, паддинг как у af2-body --- */

#cf-role-randomizer-box .cf-role-rand-tabs,
#cf-role-randomizer-box .cf-role-rand-panel,
#cf-role-randomizer-box .cf-role-rand-pool-info,
#cf-role-randomizer-box .cf-role-rand-actions,
#cf-role-randomizer-box .cf-role-rand-reel,
#cf-role-randomizer-box .cf-role-rand-result,
#cf-role-randomizer-box .cf-role-rand-status {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

#cf-role-randomizer-box .cf-role-rand-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px !important;
  margin-bottom: 12px !important;
}

#cf-role-randomizer-box .cf-role-rand-tab {
  padding: 7px 12px !important;
  border: 1px solid var(--cfrr-border-soft) !important;
  border-radius: var(--cfrr-radius-sm);
  background: var(--cfrr-bg-soft);
  color: var(--cfrr-text-dim);
  font: 600 10px/1 var(--font5, inherit) !important;
  text-transform: lowercase;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

#cf-role-randomizer-box .cf-role-rand-tab:hover {
  background: var(--cfrr-bg-hover);
  color: var(--cfrr-text);
}

#cf-role-randomizer-box .cf-role-rand-tab.is-active {
  border-color: var(--cfrr-accent) !important;
  background: var(--cfrr-accent);
  color: var(--cfrr-bg);
}

/* --- панели --- */

#cf-role-randomizer-box .cf-role-rand-panel {
  display: none;
  margin-bottom: 10px !important;
}

#cf-role-randomizer-box .cf-role-rand-panel.is-active {
  display: block;
}

#cf-role-randomizer-box .cf-role-rand-note {
  padding: 10px 12px !important;
  border: 1px solid var(--cfrr-border-soft) !important;
  border-radius: var(--cfrr-radius-md);
  background: var(--cfrr-bg-soft);
  color: var(--cfrr-text-dim);
  font: 400 11px/140% var(--font5, inherit);
}

#cf-role-randomizer-box .cf-role-suggest-wrap {
  position: relative;
  width: 100%;
}

#cf-role-randomizer-box .cf-role-suggest-wrap input {
  display: block;
  width: 100% !important;
  box-sizing: border-box;
  padding: 6px 8px !important;
  border: 1px solid var(--cfrr-border-soft) !important;
  border-radius: var(--cfrr-radius-sm);
  background: var(--cfrr-bg-soft);
  color: var(--cfrr-text);
  font: 400 12px/1 var(--font5, inherit) !important;
  transition: border .18s ease, background .18s ease;
}

#cf-role-randomizer-box .cf-role-suggest-wrap input::placeholder {
  color: var(--cfrr-text-soft);
}

#cf-role-randomizer-box .cf-role-suggest-wrap input:focus {
  outline: none;
  border-color: var(--cfrr-border) !important;
  background: var(--cfrr-bg-hover);
}

/* --- чипы (режим "неск. фандомов") --- */

#cf-role-randomizer-box .cf-role-rand-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px !important;
}

#cf-role-randomizer-box .cf-role-rand-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 10px !important;
  border: 1px solid var(--cfrr-accent) !important;
  border-radius: 999px;
  background: var(--cfrr-accent);
  color: var(--cfrr-bg);
  font: 600 10px/1 var(--font5, inherit);
  text-transform: lowercase;
}

#cf-role-randomizer-box .cf-role-rand-chip-remove {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50%;
  background: rgba(0, 0, 0, .2) !important;
  color: var(--cfrr-bg) !important;
  font: 700 11px/1 Arial, sans-serif !important;
  cursor: pointer;
}

#cf-role-randomizer-box .cf-role-rand-chip-empty {
  color: var(--cfrr-text-soft);
  font: 400 10px/1 var(--font5, inherit);
}

/* --- пул и статус --- */

#cf-role-randomizer-box .cf-role-rand-pool-info {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  color: var(--cfrr-text-soft);
  font: 400 10px/1 var(--font5, inherit);
}

/* --- кнопки --- */

#cf-role-randomizer-box .cf-role-rand-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px !important;
}

#cf-role-randomizer-box .cf-role-rand-btn {
  cursor: pointer;
  padding: 8px 16px !important;
  font: 700 12px/1 var(--font5, inherit) !important;
  border-radius: var(--cfrr-radius-sm) !important;
  border: 1px solid var(--cfrr-border) !important;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none !important;
  transition: opacity .18s ease, background-color .18s ease, color .18s ease;
}

#cf-role-randomizer-box .cf-role-rand-btn--main {
  background: var(--cfrr-accent) !important;
  color: var(--cfrr-bg) !important;
}

#cf-role-randomizer-box .cf-role-rand-btn--main:hover {
  opacity: .85;
}

#cf-role-randomizer-box .cf-role-rand-btn--main:disabled {
  opacity: .45;
  cursor: not-allowed;
}

#cf-role-randomizer-box .cf-role-rand-btn--soft {
  background: var(--cfrr-bg-soft) !important;
  color: var(--cfrr-text) !important;
  border-color: var(--cfrr-border-soft) !important;
}

#cf-role-randomizer-box .cf-role-rand-btn--soft:hover {
  background: var(--cfrr-bg-hover) !important;
  opacity: 1;
}

/* --- рулетка / спин --- */

#cf-role-randomizer-box .cf-role-rand-reel {
  margin-bottom: 12px !important;
  padding: 16px !important;
  border: 1px solid var(--cfrr-border) !important;
  border-radius: var(--cfrr-radius-md);
  background: var(--cfrr-bg-soft);
  text-align: center;
  overflow: hidden;
}

#cf-role-randomizer-box .cf-role-rand-reel-label {
  margin: 0 0 6px !important;
  color: var(--cfrr-text-soft);
  font: 600 9px/1 var(--font5, inherit);
  text-transform: uppercase;
  letter-spacing: .04em;
}

#cf-role-randomizer-box .cf-role-rand-reel-value {
  color: var(--cfrr-text);
  font: 700 13px/130% var(--font5, inherit);
}

#cf-role-randomizer-box .cf-role-rand-reel.is-spinning .cf-role-rand-reel-value {
  animation: cfrrFlicker .07s linear infinite;
}

#cf-role-randomizer-box .cf-role-rand-reel.is-landed .cf-role-rand-reel-value {
  animation: cfrrLand .5s ease;
}

@keyframes cfrrFlicker {
  0% { opacity: .55; transform: translateY(-2px); }
  50% { opacity: 1; transform: translateY(0); }
  100% { opacity: .55; transform: translateY(2px); }
}

@keyframes cfrrLand {
  0% { transform: scale(.9); opacity: .4; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* --- результат --- */

#cf-role-randomizer-box .cf-role-rand-result {
  position: relative;
  margin-bottom: 12px !important;
  padding: 16px !important;
  border: 1px solid var(--cfrr-border) !important;
  border-radius: var(--cfrr-radius-md);
  background: var(--cfrr-bg-soft);
  animation: cfrrLand .5s ease;
}

#cf-role-randomizer-box .cf-role-rand-result-badge {
  display: inline-block;
  margin: 0 0 8px !important;
  padding: 3px 9px !important;
  border-radius: 999px;
  background: var(--cfrr-accent);
  color: var(--cfrr-bg);
  font: 700 9px/1 var(--font5, inherit);
  text-transform: uppercase;
  letter-spacing: .04em;
}

#cf-role-randomizer-box .cf-role-rand-result-fandom {
  color: var(--cfrr-text-soft);
  font: 600 10px/1 var(--font5, inherit);
  text-transform: lowercase;
}

#cf-role-randomizer-box .cf-role-rand-result-name {
  margin-top: 4px;
  color: var(--cfrr-text);
  font: 700 15px/130% var(--font5, inherit);
}

#cf-role-randomizer-box .cf-role-rand-result-author {
  margin-top: 4px;
  color: var(--cfrr-text-soft);
  font: 400 10px/1 var(--font5, inherit);
}

#cf-role-randomizer-box .cf-role-rand-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* --- статус --- */

#cf-role-randomizer-box .cf-role-rand-status {
  min-height: 14px;
  margin-bottom: 14px !important;
  color: var(--cfrr-text-soft);
  font: 400 10px/140% var(--font5, inherit);
}

/* =========================================================
   портал-подсказка фандомов
   живёт в document.body, вне #cf-role-randomizer-box — берёт
   переменные --cfrr-* напрямую (независимо от вложенности DOM).
========================================================= */

#cf-role-portal-dropdown {
  display: none;
  max-height: 240px;
  overflow-y: auto;
  z-index: 999999;
  border: 1px solid var(--cfrr-border);
  border-radius: var(--cfrr-radius-md);
  background: var(--cfrr-bg);
  box-shadow: var(--cfrr-shadow);
  box-sizing: border-box;
  font: 400 11px var(--font5, inherit);
}

#cf-role-portal-dropdown .cf-role-dropdown-item {
  padding: 8px 12px;
  border-bottom: 1px solid var(--cfrr-border-soft);
  background: transparent;
  color: var(--cfrr-text);
  font: 400 11px/135% var(--font5, inherit);
  cursor: pointer;
  text-align: left;
}

#cf-role-portal-dropdown .cf-role-dropdown-item:last-child {
  border-bottom: 0;
}

#cf-role-portal-dropdown .cf-role-dropdown-item:hover {
  background: var(--cfrr-bg-hover);
}

#cf-role-portal-dropdown .cf-role-dropdown-muted,
#cf-role-portal-dropdown .cf-role-dropdown-muted:hover {
  background: transparent;
  color: var(--cfrr-text-soft);
  cursor: default;
}

/* --- адаптив --- */

@media (max-width: 760px) {
  #cf-role-randomizer-box { width: 100%; }

  #cf-role-randomizer-box .cf-role-rand-actions,
  #cf-role-randomizer-box .cf-role-rand-result-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #cf-role-randomizer-box .cf-role-rand-btn {
    width: 100%;
    text-align: center;
  }
}