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

   Отличие от базовой версии (cf-role-randomizer.css): вместо всего
   блока сразу — кнопка-гачапон с летающими эмодзи, форма раскрывается
   по клику (см. .cf-role-rand-trigger / .cf-role-rand-panel-wrap).
========================================================= */

: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 {
  position: relative; /* контейнер для .cf-role-rand-trigger (position: absolute; margin: auto;) */
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: var(--cfrr-text);
  font: 400 11px var(--font5, inherit);
  overflow: visible !important;
  text-align: left !important;
  line-height: normal !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#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-trigger {
  margin: auto;
  position: absolute;
  inset: 0; /* нужно, чтобы margin: auto реально центрировал абсолютный элемент */
  top: -60px; /* сдвиг вверх поверх inset — должен идти строго после inset: 0, иначе затрётся */
  width: fit-content;
  height: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 60px !important;
  border: 1px solid var(--cfrr-border) !important;
  border-radius: 999px;
  background: rgb(var(--pun-light));
  color: var(--cfrr-text);
  font: 700 12px/1 var(--font5, inherit) !important;
  text-transform: lowercase;
  cursor: pointer;
  box-shadow: 0px 8px 20px rgb(var(--acc3), .25);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

#cf-role-randomizer-box .cf-role-rand-trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0px 10px 24px rgb(var(--acc3), .32);
}

#cf-role-randomizer-box .cf-role-rand-trigger.is-open {
  background: var(--cfrr-accent);
  color: var(--cfrr-bg);
}

#cf-role-randomizer-box .cf-role-rand-trigger-label {
  position: relative;
  z-index: 2;
}

#cf-role-randomizer-box .cf-role-rand-trigger-emoji {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  margin: -9px;
  width: 18px;
  height: 18px;
  font-size: 15px;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
  animation-name: cfrrOrbit;
  animation-timing-function: linear; /* точки орбиты уже задают форму кривой — ease-in-out на каждом сегменте давал дёрганое ускорение/торможение */
  animation-iteration-count: infinite;
}

/* кнопка стала широкой пилюлей (padding 10px 60px) — круговая орбита
   смотрелась бы нелепо (либо в тексте, либо далеко от кнопки), поэтому
   орбита теперь эллиптическая: --cfrr-orbit-rx подогнан под ширину
   пилюли, --cfrr-orbit-ry — под её высоту. У каждого смайла свои
   rx/ry/скорость/сдвиг по фазе, чтобы летали вразнобой */
#cf-role-randomizer-box .cf-role-rand-trigger-emoji--1 { --cfrr-orbit-rx: 78px;  --cfrr-orbit-ry: 20px; animation-duration: 2.6s; animation-delay: 0s; }
#cf-role-randomizer-box .cf-role-rand-trigger-emoji--2 { --cfrr-orbit-rx: 96px;  --cfrr-orbit-ry: 26px; animation-duration: 3.1s; animation-delay: -.6s; }
#cf-role-randomizer-box .cf-role-rand-trigger-emoji--3 { --cfrr-orbit-rx: 64px;  --cfrr-orbit-ry: 18px; animation-duration: 2.2s; animation-delay: -1.2s; }
#cf-role-randomizer-box .cf-role-rand-trigger-emoji--4 { --cfrr-orbit-rx: 104px; --cfrr-orbit-ry: 28px; animation-duration: 3.6s; animation-delay: -.3s; }
#cf-role-randomizer-box .cf-role-rand-trigger-emoji--5 { --cfrr-orbit-rx: 86px;  --cfrr-orbit-ry: 22px; animation-duration: 2.9s; animation-delay: -1.8s; }
#cf-role-randomizer-box .cf-role-rand-trigger-emoji--6 { --cfrr-orbit-rx: 100px; --cfrr-orbit-ry: 24px; animation-duration: 3.3s; animation-delay: -2.1s; }

/* 16 точек эллипса вместо 8 + linear-тайминг = гладкая кривая без
   рывков на стыках. Масштаб теперь пульсирует отдельной синусоидой
   (свой период не совпадает с оборотом) — лёгкое "дыхание" вместо
   резкого скачка 1 → 1.15 → 1 на каждой четверти пути, задорнее и без дёрганости */
@keyframes cfrrOrbit {
  0%     { transform: translate(var(--cfrr-orbit-rx), 0) scale(1); }
  6.25%  { transform: translate(calc(var(--cfrr-orbit-rx) * .924), calc(var(--cfrr-orbit-ry) * .383)) scale(1.05); }
  12.5%  { transform: translate(calc(var(--cfrr-orbit-rx) * .707), calc(var(--cfrr-orbit-ry) * .707)) scale(1.1); }
  18.75% { transform: translate(calc(var(--cfrr-orbit-rx) * .383), calc(var(--cfrr-orbit-ry) * .924)) scale(1.13); }
  25%    { transform: translate(0, var(--cfrr-orbit-ry)) scale(1.1); }
  31.25% { transform: translate(calc(var(--cfrr-orbit-rx) * -.383), calc(var(--cfrr-orbit-ry) * .924)) scale(1.05); }
  37.5%  { transform: translate(calc(var(--cfrr-orbit-rx) * -.707), calc(var(--cfrr-orbit-ry) * .707)) scale(1); }
  43.75% { transform: translate(calc(var(--cfrr-orbit-rx) * -.924), calc(var(--cfrr-orbit-ry) * .383)) scale(.95); }
  50%    { transform: translate(calc(var(--cfrr-orbit-rx) * -1), 0) scale(.92); }
  56.25% { transform: translate(calc(var(--cfrr-orbit-rx) * -.924), calc(var(--cfrr-orbit-ry) * -.383)) scale(.95); }
  62.5%  { transform: translate(calc(var(--cfrr-orbit-rx) * -.707), calc(var(--cfrr-orbit-ry) * -.707)) scale(1); }
  68.75% { transform: translate(calc(var(--cfrr-orbit-rx) * -.383), calc(var(--cfrr-orbit-ry) * -.924)) scale(1.05); }
  75%    { transform: translate(0, calc(var(--cfrr-orbit-ry) * -1)) scale(1.1); }
  81.25% { transform: translate(calc(var(--cfrr-orbit-rx) * .383), calc(var(--cfrr-orbit-ry) * -.924)) scale(1.13); }
  87.5%  { transform: translate(calc(var(--cfrr-orbit-rx) * .707), calc(var(--cfrr-orbit-ry) * -.707)) scale(1.1); }
  93.75% { transform: translate(calc(var(--cfrr-orbit-rx) * .924), calc(var(--cfrr-orbit-ry) * -.383)) scale(1.05); }
  100%   { transform: translate(var(--cfrr-orbit-rx), 0) scale(1); }
}

/* когда форма открыта — эмодзи больше не нужны, гасим анимацию,
   чтобы не мельтешили вокруг кнопки "свернуть" */
#cf-role-randomizer-box .cf-role-rand-trigger.is-open .cf-role-rand-trigger-emoji {
  animation-play-state: paused;
  opacity: 0;
  transition: opacity .15s ease;
}

/* --- обёртка раскрывающейся формы --- */

#cf-role-randomizer-box .cf-role-rand-panel-wrap {
  margin-top: 10px !important;
  background: rgb(var(--pun-light));
  border: 1px solid rgb(var(--acc7), .1) !important;
  border-radius: var(--cfrr-radius-lg);
  box-shadow: 0px 10px 25px rgb(var(--acc3), .3);
  overflow: hidden !important;
  animation: cfrrPanelIn .22s ease;
}

@keyframes cfrrPanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

#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 .cf-role-rand-panel-wrap { 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;
  }
}