/* История рейкбека (Вадим 20.10, п. 7): плашки среднего за 7 / 30 дней и начисления по дням.
   Наш стиль: карточки #0d0f12, Play, красная точечная матрица в углу плашек, суммы — зелёные. */
.rbhi{display:flex;flex-direction:column;gap:0;color:#f0f2f5;font-family:var(--pd-font,'Play',sans-serif)}
.rbhi *{box-sizing:border-box}

/* ── Две плашки среднего рейкбека ───────────────────────────────── */
.rbhi-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rbhi-tile{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;min-height:132px;padding:16px;border:1px solid #ffffff17;border-radius:20px;background:#0d0f12}
/* точечная матрица, как на виджетах «Наград» — гаснет к центру, тексту не мешает */
.rbhi-tile::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,#d71921 1.1px,transparent 1.7px) 0 0/8px 8px,radial-gradient(70% 90% at 100% 0%,#d719212e,transparent 70%);-webkit-mask-image:radial-gradient(60% 70% at 100% 0%,#000,transparent 70%);mask-image:radial-gradient(60% 70% at 100% 0%,#000,transparent 70%);opacity:.55}
.rbhi-tile>*{position:relative}
.rbhi-tile-label{display:flex;flex-direction:column;font:400 13px/18px var(--pd-font,'Play',sans-serif);color:#a1a7b2}
.rbhi-tile-label>b{font-weight:700;color:#f0f2f5}
/* Вадим 20.10 (проверка): в EN --cm-font-display = Chakra Petch, а цифры плашек — всегда Play */
.rbhi-tile-value{margin-top:auto;font:700 32px/36px var(--pd-font,'Play',sans-serif);letter-spacing:0;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.rbhi-tile-value>small{font-size:18px;font-weight:700;color:#a1a7b2}
.rbhi-tile-sub{font:400 13px/16px var(--pd-font,'Play',sans-serif);color:#8e8e98}

/* ── День: заголовок + карточка с начислениями ──────────────────── */
.rbhi-day{margin-top:24px}
.rbhi-day-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px;padding:0 4px;font:700 14px/20px var(--pd-font,'Play',sans-serif);letter-spacing:.08em;text-transform:uppercase;color:#f0f2f5}
.rbhi-day-title>small{font:400 13px/20px var(--pd-font,'Play',sans-serif);letter-spacing:0;text-transform:none;color:#8e8e98;font-variant-numeric:tabular-nums}
.rbhi-list{border:1px solid #ffffff17;border-radius:16px;background:#0d0f12;padding:0 16px}

/* строка: название и время · процент · сумма (без иконок — Саша 20.10) */
.rbhi-row{display:flex;align-items:center;gap:12px;min-height:68px;padding:12px 0}
.rbhi-row+.rbhi-row{border-top:1px solid #ffffff12}
.rbhi-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rbhi-main>strong{font:700 16px/22px var(--pd-font,'Play',sans-serif);color:#f0f2f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbhi-main>span{font:400 13px/18px var(--pd-font,'Play',sans-serif);color:#8e8e98;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbhi-pct{flex:none;min-width:44px;text-align:right;font:700 16px/22px var(--pd-font,'Play',sans-serif);color:#a1a7b2;font-variant-numeric:tabular-nums;white-space:nowrap}
.rbhi-amt{flex:none;min-width:68px;text-align:right;font:700 16px/22px var(--pd-font,'Play',sans-serif);color:#5bd99a;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── Пусто: ещё ни одной раздачи ────────────────────────────────── */
.rbhi-empty{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:24px;padding:32px 24px;border:1px solid #ffffff17;border-radius:20px;background:#0d0f12;text-align:center}
.rbhi-empty>p{margin:0;max-width:240px;font:400 14px/20px var(--pd-font,'Play',sans-serif);color:#a1a7b2;text-wrap:balance}

/* Смелый форк: свет сцены для экрана «РБ-комбинации» (rb-combos.css). Историю он не трогает. */
/* ───────── СЦЕНА: лампа «РБ-комбинаций» (история — обычная, без сцены) ─────────
   Полировка 20.10 (арт-директор: «две разные лампы»): лампа по общим токенам хаба —
   вершина в 8 px под шапкой, ширина луча у вершины ≈110 px, шаг точек 6 px, яркость точек .22,
   к 60 % высоты экрана свет гаснет. Заголовок шапки — в темноте, герой (панель / карта) — в луче.
   --lamp-hdr (низ шапки) ставят rb-history.js / rb-combos.js по факту; 104 px — запасное значение. */
#device-host .fr-hub:has(>.fr-hub-scroll>.rbc){
  --lamp-gap:8px;--lamp-w:110px;--lamp-pitch:6px;--lamp-a:.22;--lamp-fade:60%;
  --lamp-y:calc(var(--lamp-hdr,104px) + var(--lamp-gap));
  /* вершина конуса спрятана над лампой: при раскрытии ±22° ширина луча на --lamp-y ровно --lamp-w */
  --lamp-o:calc(var(--lamp-y) - var(--lamp-w) * 1.24);
  isolation:isolate;
  /* глянцевый пол: красные контровые по краям — на самом фоне, их не гасит маска луча */
  background:
    radial-gradient(ellipse 46% 26% at -10% 58%,#d7192133,transparent 72%),
    radial-gradient(ellipse 46% 26% at 110% 58%,#d7192133,transparent 72%),
    #050607}
#device-host .fr-hub:has(>.fr-hub-scroll>.rbc)>.pd-route-header{background:transparent}
/* заголовок шапки — в темноте над лампой; тень держит читаемость */
#device-host .fr-hub:has(>.fr-hub-scroll>.rbc)>.pd-route-header>.pd-route-title{text-shadow:0 1px 10px #000,0 0 3px #000,0 0 1px #000}
/* «Назад» 36×36 — невидимая зона нажатия 50×50 (46×46 на 375), вид кнопки не меняется.
   inset считается от внутреннего края рамки (1 px), поэтому -8 px → 7 px наружу с каждой стороны */
#device-host .fr-hub:has(>.fr-hub-scroll>.rbc)>.pd-route-header>.pd-route-back{position:relative}
#device-host .fr-hub:has(>.fr-hub-scroll>.rbc)>.pd-route-header>.pd-route-back::after{content:"";position:absolute;inset:-8px}
/* прокрутка: под шапкой проявляется тёмная подложка (почти чёрный → прозрачный, 32 px),
   а строки уходят под неё мягко (маска 28 px) — без жёсткого среза под заголовком */
#device-host .fr-hub:has(>.fr-hub-scroll>.rbc)>.pd-route-header::before{
  content:"";position:absolute;z-index:-1;left:0;right:0;top:0;bottom:-32px;pointer-events:none;
  background:linear-gradient(180deg,#050607 0,#050607 calc(100% - 32px),#05060700 100%);opacity:0;transition:opacity .3s ease}
#device-host .fr-hub:has(>.fr-hub-scroll>.rbc[data-scrolled])>.pd-route-header::before{opacity:1}
#device-host .fr-hub-scroll:has(>.rbc){-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16px);mask-image:linear-gradient(180deg,transparent 0,#000 16px);overflow-x:hidden}
#device-host .fr-hub-scroll:has(>.rbc[data-scrolled]){-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 28px);mask-image:linear-gradient(180deg,transparent 0,#000 28px)}
#device-host .fr-hub:has(>.fr-hub-scroll>.rbc)::before,
#device-host .fr-hub:has(>.fr-hub-scroll>.rbc)::after{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;transition:opacity .5s ease}
/* луч: линза у вершины и мягкий конус с читаемыми краями; свет начинается под шапкой */
#device-host .fr-hub:has(>.fr-hub-scroll>.rbc)::before{
  background:
    radial-gradient(ellipse calc(var(--lamp-w) * .62) 16px at 50% var(--lamp-y),#ffffff26,transparent 72%),
    conic-gradient(from 0deg at 50% var(--lamp-o),transparent 167deg,#ffffff0d 173deg,#ffffff1a 180deg,#ffffff0d 187deg,transparent 193deg),
    conic-gradient(from 0deg at 50% var(--lamp-o),transparent 156deg,#ffffff07 162deg,#ffffff0e 172deg,#ffffff11 180deg,#ffffff0e 188deg,#ffffff07 198deg,transparent 204deg);
  -webkit-mask-image:linear-gradient(180deg,transparent calc(var(--lamp-y) - 6px),#000 calc(var(--lamp-y) + 6px),#0009 40%,transparent var(--lamp-fade));
  mask-image:linear-gradient(180deg,transparent calc(var(--lamp-y) - 6px),#000 calc(var(--lamp-y) + 6px),#0009 40%,transparent var(--lamp-fade));
}
/* в луче — точечная матрица (подпись PokerDot): шаг 6 px, яркость .22, первый ряд точек — у вершины */
#device-host .fr-hub:has(>.fr-hub-scroll>.rbc)::after{
  background:radial-gradient(circle,rgb(255 255 255/var(--lamp-a)) .85px,transparent 1.4px) 50% var(--lamp-y)/var(--lamp-pitch) var(--lamp-pitch);
  -webkit-mask-image:conic-gradient(from 0deg at 50% var(--lamp-o),transparent 156deg,#0006 162deg,#000d 172deg,#000 180deg,#000d 188deg,#0006 198deg,transparent 204deg),linear-gradient(180deg,transparent calc(var(--lamp-y) - 1px),#000 var(--lamp-y),transparent var(--lamp-fade));
  -webkit-mask-composite:source-in;
  mask-image:conic-gradient(from 0deg at 50% var(--lamp-o),transparent 156deg,#0006 162deg,#000d 172deg,#000 180deg,#000d 188deg,#0006 198deg,transparent 204deg),linear-gradient(180deg,transparent calc(var(--lamp-y) - 1px),#000 var(--lamp-y),transparent var(--lamp-fade));
  mask-composite:intersect;
}
/* вход: свет гаснет на смене экрана и сразу «зажигается» двумя вспышками, как в хабе (та же кривая);
   без задержки — тёмного кадра с одним заголовком больше нет */
@keyframes rbhi-strike{0%{opacity:0}12%{opacity:.7}20%{opacity:.15}34%{opacity:.85}46%{opacity:.5}100%{opacity:1}}
#device-host .fr-hub:has(>.fr-hub-scroll>.rbc)::before,
#device-host .fr-hub:has(>.fr-hub-scroll>.rbc)::after{animation:rbhi-strike 1.15s cubic-bezier(.3,0,.2,1) backwards}
/* экран прокручен — свет приглушается, второй акт читается спокойно */
#device-host .fr-hub:has(>.fr-hub-scroll>.rbc[data-scrolled])::before,
#device-host .fr-hub:has(>.fr-hub-scroll>.rbc[data-scrolled])::after{opacity:.38}


/* Only the historical talisman is added to the existing payout tile. */
.rbhi-talisman{display:block;position:relative;flex:0 0 40px;width:40px;height:52px}
.rbhi-talisman>.pd-tal-art{width:100%;height:100%}
.rbhi-row:has(.rbhi-talisman){gap:8px}