/* ==========================================================================
   DropHub — правила игры

   Одно окно на страницу игры (#dh-rules), как «Как устроен 1 Клик»
   (oneclick.css .oc-rules): заголовок, разделы, при нужде таблица.
   Открывает любая кнопка с data-rules (drophub.rules.js). Кнопка
   «Правила» — .dh-rules-btn; круглая без подписи — .dh-rules-btn--icon.
   ========================================================================== */

.dh-rules {
  width: min(640px, calc(100vw - 32px)); max-height: min(84vh, 780px); padding: 0; margin: auto;
  border: 1px solid rgba(166, 120, 255, .28); border-radius: 18px; background: #1E1838; color: #F5F3FF;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}
.dh-rules::backdrop { background: rgba(10, 6, 24, .76); }
.dh-rules__in {
  position: relative; max-height: inherit; overflow: auto; padding: 22px 24px 24px;
  font-size: 14px; line-height: 1.55; color: #D2D7E6; text-align: left;
}
.dh-rules h2 {
  margin: 0 40px 12px 0; font-family: var(--f-cond); font-size: 24px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: #fff;
}
.dh-rules h3 { margin: 18px 0 6px; font-size: 15px; font-weight: 700; color: #fff; }
.dh-rules p, .dh-rules ul { margin: 0 0 8px; }
.dh-rules ul { padding-left: 20px; }
.dh-rules li { margin: 2px 0; }
.dh-rules li::marker { color: #A69FCF; }
.dh-rules b { color: #fff; }
.dh-rules table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.dh-rules th, .dh-rules td { padding: 6px 8px; text-align: left; border-bottom: 1px solid rgba(180, 160, 255, .16); }
.dh-rules th { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8E86B8; }
.dh-rules__x {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center; border: 1px solid rgba(166, 120, 255, .28); background: #2C2452; color: #CFC8F0;
}
.dh-rules__x:hover { color: #fff; }
.dh-rules__x svg { width: 16px; height: 16px; }

/* кнопка «Правила» — как в «1 Клике» (.oc-tool--rules) */
.dh-rules-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  height: 36px; padding: 0 12px; border-radius: 11px; cursor: pointer;
  border: 1px solid rgba(166, 120, 255, .28); background: rgba(44, 36, 82, .72); color: #CFC8F0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 4px 12px rgba(8, 4, 24, .3);
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: color .14s, border-color .14s, transform .14s;
}
.dh-rules-btn svg { width: 16px; height: 16px; flex: none; }
.dh-rules-btn:active { transform: translateY(1px); }
.dh-rules-btn:focus-visible, .dh-rules__x:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.dh-rules-btn--icon { width: 36px; padding: 0; }
.dh-rules-btn--icon span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (hover: hover) {
  .dh-rules-btn:hover { color: #fff; border-color: rgba(166, 120, 255, .5); }
}
@media (max-width: 760px) {
  .dh-rules__in { padding: 18px 16px 20px; font-size: 13.5px; }
  .dh-rules h2 { font-size: 21px; }
}

/* ── где стоит кнопка на страницах игр ── */
/* апгрейд — левый верхний угол стола, как «Правила» в «1 Клике» */
.up-rules { position: absolute; z-index: 2; left: 16px; top: 16px; }
/* кейс — справа в строке заголовка, напротив «назад» */
.cs-head { position: relative; }
.cs-rules { position: absolute; right: 0; top: 50%; translate: 0 -50%; }
/* плинко — строкой над ставкой, вправо */
.dh-rules-row { display: flex; justify-content: flex-end; margin-bottom: 10px; }
@media (max-width: 760px) {
  .up-rules { left: 12px; top: 12px; }
  .up-rules span, .cs-rules span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .up-rules, .cs-rules { width: 36px; padding: 0; }
}