.hue-ico-roulette { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v6M12 15v6M3 12h6M15 12h6'/%3E%3C/svg%3E"); }

.rl { --rl-card: #FFFFFF; --rl-line: #DDDDDD; --rl-head: #F7F7F7; --rl-text: #222222; --rl-muted: #808080;
      --rl-raise: #F1F1F1; --rl-accent: #B01E1E; --rl-ok: #2E7D32; --rl-bad: #A94442; --rl-top: #3A3A3A; --rl-input: #FFFFFF;
      --rl-tile: 56px; --rl-gap: 4px;
      color: var(--rl-text); font-size: 13px; line-height: 1.4; max-width: 100%; }
html.hue-dark .rl { --rl-card: var(--dk-card, #1E1F22); --rl-line: var(--dk-line, #34373C); --rl-head: var(--dk-raise, #26282C);
      --rl-text: var(--dk-text, #E4E6EA); --rl-muted: var(--dk-muted, #969CA5); --rl-raise: var(--dk-raise-2, #2E3035);
      --rl-accent: #C62828; --rl-ok: #6CC070; --rl-bad: #E5605C; --rl-top: var(--dk-head, #222326); --rl-input: var(--dk-raise, #26282C); }
.rl *, .rl *::before, .rl *::after { box-sizing: border-box; }
.rl a { color: inherit; }
.rl-muted { color: var(--rl-muted); }

.rl-top { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; background: var(--rl-top); color: #FFFFFF; }
.rl-top b { font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.rl-top .hue-ico { width: 18px; height: 18px; background-color: #FFFFFF; }
.rl-top-bal { margin-left: auto; font-size: 13px; color: #DDDDDD; white-space: nowrap; }
.rl-top-bal b { color: #FFFFFF; }

.rl-card { background: var(--rl-card); border: 1px solid var(--rl-line); margin-bottom: 10px; min-width: 0; }
.rl-top + .rl-card { border-top: 0; }
.rl-card-title { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; background: var(--rl-head);
      border-bottom: 1px solid var(--rl-line); font-weight: bold; }
.rl-card-title .rl-muted { font-weight: normal; margin-left: auto; }

.rl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rl-line); }
.rl-stat { padding: 8px 10px; min-width: 0; border-right: 1px solid var(--rl-line); text-align: center; }
.rl-stat:last-child { border-right: 0; }
.rl-stat span { display: block; font-size: 11px; color: var(--rl-muted); text-transform: uppercase; letter-spacing: .04em; }
.rl-stat b { display: block; font-size: 18px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.rl-stat b.rl-hot { color: var(--rl-accent); }

.rl-share { display: flex; height: 8px; background: var(--rl-raise); }
.rl-share i { display: block; height: 100%; transition: width .4s; }

.rl-reel { position: relative; height: calc(var(--rl-tile) + 24px); overflow: hidden; background: var(--rl-raise);
      border-bottom: 1px solid var(--rl-line); }
.rl-track { position: absolute; left: 0; top: 12px; display: flex; will-change: transform; }
.rl-tile { position: relative; flex: 0 0 var(--rl-tile); width: var(--rl-tile); height: var(--rl-tile); margin-right: var(--rl-gap);
      background: var(--rl-card); border-bottom: 4px solid var(--c, var(--rl-line)); overflow: hidden; }
.rl-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rl-tile-empty { border-bottom-color: var(--rl-line); }
.rl-reel.rl-done .rl-tile { opacity: .35; transition: opacity .4s; }
.rl-reel.rl-done .rl-tile.rl-win { opacity: 1; outline: 3px solid var(--rl-accent); outline-offset: -3px; }
.rl-mark { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--rl-accent); z-index: 2; }
.rl-mark::before, .rl-mark::after { content: ''; position: absolute; left: -6px; border: 7px solid transparent; }
.rl-mark::before { top: 0; border-top-color: var(--rl-accent); border-bottom: 0; }
.rl-mark::after { bottom: 0; border-bottom-color: var(--rl-accent); border-top: 0; }

.rl-result { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--rl-line); min-width: 0; }
.rl-result[hidden] { display: none; }
.rl-result img { flex: 0 0 44px; width: 44px; height: 44px; object-fit: cover; }
.rl-result-name { flex: 1 1 auto; min-width: 0; }
.rl-result-name b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.rl-result-prize { flex: 0 0 auto; font-size: 18px; font-weight: bold; color: var(--rl-ok); white-space: nowrap; }

.rl-bet { padding: 10px 12px; }
.rl-bet-row { display: flex; gap: 6px; align-items: stretch; }
.rl-bet-row + .rl-bet-row { margin-top: 6px; }
:root .rl .rl-input:not(#rlx) { flex: 1 1 auto; min-width: 0; width: 100%; height: 38px; margin: 0; padding: 0 10px; font-size: 16px; font-variant-numeric: tabular-nums;
      color: var(--rl-text); background: var(--rl-input); border: 1px solid var(--rl-line); }
:root .rl .rl-btn:not(#rlx) { display: inline-flex; align-items: center; justify-content: center; height: 38px; margin: 0; padding: 0 12px; font: inherit;
      font-size: 14px; font-weight: bold; line-height: 1; color: var(--rl-text); background: var(--rl-raise); border: 1px solid var(--rl-line);
      cursor: pointer; white-space: nowrap; text-decoration: none; }
:root .rl .rl-btn:not(#rlx):not(:disabled):hover { border-color: var(--rl-muted); }
:root .rl .rl-btn:not(#rlx):disabled { opacity: .45; cursor: default; }
:root .rl .rl-btn-go:not(#rlx) { flex: 0 0 auto; min-width: 110px; color: #FFFFFF; background: var(--rl-accent); border-color: var(--rl-accent); }
:root .rl-quick .rl-btn:not(#rlx) { flex: 1 1 0; min-width: 0; padding: 0 4px; }
.rl-bet-info { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 8px; color: var(--rl-muted); }
.rl-bet-info b { color: var(--rl-text); }
.rl-err { margin-top: 6px; color: var(--rl-bad); font-weight: bold; }
.rl-err:empty { display: none; }
.rl form { margin: 0; }
.rl-hash > span { flex: 0 0 auto; white-space: nowrap; }
.rl-hash { padding: 7px 12px; border-top: 1px solid var(--rl-line); font-size: 11px; color: var(--rl-muted); display: flex; gap: 6px; min-width: 0; }
.rl-hash code { min-width: 0; white-space: normal; word-break: break-all; font-family: monospace; background: none; padding: 0; color: inherit; }

.rl-players { margin: 0; padding: 0; list-style: none; }
.rl-player { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-left: 4px solid var(--c); min-width: 0; }
.rl-player + .rl-player { border-top: 1px solid var(--rl-line); }
.rl-player img { flex: 0 0 34px; width: 34px; height: 34px; object-fit: cover; }
.rl-player-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-player.rl-me .rl-player-name { font-weight: bold; }
.rl-player-sum { flex: 0 0 auto; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rl-player-sum b { display: block; }
.rl-player-sum span { font-size: 11px; color: var(--rl-muted); }
.rl-player-sum span.rl-capped::after { content: " · макс"; }
.rl-empty { padding: 16px 12px; text-align: center; color: var(--rl-muted); }

.rl-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 10px; }
.rl-rows { margin: 0; padding: 0; list-style: none; }
.rl-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; min-width: 0; }
.rl-row + .rl-row { border-top: 1px solid var(--rl-line); }
.rl-row img { flex: 0 0 28px; width: 28px; height: 28px; object-fit: cover; }
.rl-row-main { flex: 1 1 auto; min-width: 0; }
.rl-row-main b, .rl-row-main span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-row-main span { font-size: 11px; color: var(--rl-muted); }
.rl-row-sum { flex: 0 0 auto; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rl-row-sum span { display: block; font-size: 11px; color: var(--rl-muted); }
:root .rl .rl-row .rl-btn:not(#rlx) { flex: 0 0 auto; height: 28px; padding: 0 8px; font-size: 12px; font-weight: normal; }
.rl-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rl-kv > div { padding: 10px 8px; text-align: center; border-right: 1px solid var(--rl-line); min-width: 0; }
.rl-kv > div:last-child { border-right: 0; }
.rl-kv span { display: block; font-size: 11px; color: var(--rl-muted); }
.rl-kv b { display: block; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-plus { color: var(--rl-ok); }
.rl-minus { color: var(--rl-bad); }

.rl-modal { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 12px;
      background: rgba(0, 0, 0, .55); }
.rl-modal[hidden] { display: none; }
.rl-modal-box { width: 520px; max-width: 100%; max-height: calc(100vh - 24px); overflow: auto; background: var(--rl-card);
      border: 1px solid var(--rl-line); }
:root .rl-modal-box .rl-card-title button:not(#rlx) { margin-left: auto; width: 30px; height: 30px; padding: 0; font-size: 20px; line-height: 1;
      background: none; border: 0; color: var(--rl-text); cursor: pointer; }
.rl-vf { padding: 10px 12px; }
.rl-vf dl { margin: 0; }
.rl-vf dt { margin-top: 8px; font-size: 11px; color: var(--rl-muted); text-transform: uppercase; letter-spacing: .04em; }
.rl-vf dt:first-child { margin-top: 0; }
.rl-vf dd { margin: 2px 0 0; font-family: monospace; font-size: 12px; overflow-wrap: anywhere; }
.rl-vf-ok { color: var(--rl-ok); font-weight: bold; }
.rl-vf-bad { color: var(--rl-bad); font-weight: bold; }
.rl-vf table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.rl-vf th, .rl-vf td { padding: 5px 4px; border-top: 1px solid var(--rl-line); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-vf th { color: var(--rl-muted); font-weight: normal; }
.rl-vf td:nth-child(n+2), .rl-vf th:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; }
.rl-vf tr.rl-vf-win td { color: var(--rl-accent); font-weight: bold; }

:root .rl .rl-chat-btn:not(#rlx) { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      height: 26px; min-height: 0; margin: 0; padding: 0 10px; font: inherit; font-size: 13px; font-weight: bold; line-height: 1; color: #FFFFFF;
      background: transparent; border: 1px solid rgba(255, 255, 255, .45); border-radius: 0; cursor: pointer; white-space: nowrap; }
:root .rl .rl-chat-btn:not(#rlx):hover { border-color: #FFFFFF; }
:root .rl.rl-chat-on .rl-chat-btn:not(#rlx) { color: var(--rl-top); background: #FFFFFF; border-color: #FFFFFF; }
.rl .rl-top .rl-chat-btn .hue-ico { width: 16px; height: 16px; flex: 0 0 16px; background-color: currentColor; }
.rl-chat-btn i { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; font-style: normal; font-size: 11px; line-height: 18px;
      text-align: center; color: #FFFFFF; background: var(--rl-accent); font-variant-numeric: tabular-nums; }
.rl-chat-btn i[hidden] { display: none; }

.rl-chat { display: none; flex-direction: column; }
.rl.rl-chat-on .rl-chat { display: flex; }
:root .rl-chat .rl-card-title .rl-chat-x:not(#rlx) { margin-left: auto; width: 30px; height: 30px; min-height: 0; margin-right: -8px; padding: 0; font-size: 22px; line-height: 1;
      background: none; border: 0; border-radius: 0; color: var(--rl-muted); cursor: pointer; }
:root .rl-chat .rl-card-title .rl-chat-x:not(#rlx):hover { color: var(--rl-text); }
.rl-chat-list { flex: 1 1 auto; min-height: 0; margin: 0; padding: 4px 0; list-style: none; overflow-y: auto; overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch; }
.rl-msg { display: flex; gap: 8px; padding: 5px 12px; min-width: 0; }
.rl-msg:hover { background: var(--rl-head); }
.rl-msg-av { flex: 0 0 32px; width: 32px; height: 32px; }
.rl-msg-av img { display: block; width: 32px; height: 32px; object-fit: cover; }
.rl-msg-body { flex: 1 1 auto; min-width: 0; }
.rl-msg-head { display: flex; align-items: center; gap: 4px; min-width: 0; height: 18px; }
.rl .rl-msg-name { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold;
      color: var(--rl-text); text-decoration: none; }
.rl .rl-msg-name:hover { text-decoration: underline; }
.rl-msg-mark { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; }
.rl-msg-mark:empty { display: none; }
.rl-msg-mark img { width: 14px; height: 14px; }
.rl-msg-time { flex: 0 0 auto; margin-left: 4px; font-size: 11px; color: var(--rl-muted); font-variant-numeric: tabular-nums; }
:root .rl .rl-msg-del:not(#rlx) { flex: 0 0 auto; width: 18px; height: 18px; min-height: 0; margin: 0 0 0 auto; padding: 0; font-size: 16px; line-height: 1;
      color: var(--rl-muted); background: none; border: 0; border-radius: 0; cursor: pointer; opacity: .6; }
:root .rl .rl-msg-del:not(#rlx):hover { color: var(--rl-bad); opacity: 1; }
.rl-msg-text { overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; }
.rl-chat-form { display: flex; gap: 6px; align-items: stretch; padding: 8px 12px; border-top: 1px solid var(--rl-line); }
.rl-chat-emo { flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
      color: var(--rl-muted); background: var(--rl-raise); border: 1px solid var(--rl-line); }
.rl-chat-emo:hover { color: var(--rl-text); border-color: var(--rl-muted); }
.rl-chat-emo .hue-ico { width: 20px; height: 20px; background-color: currentColor; }
:root .rl .rl-chat-form .rl-input:not(#rlx) { font-size: 15px; }
:root .rl .rl-chat-form .rl-btn-go:not(#rlx) { min-width: 0; }
.rl-chat-err { margin: 0; padding: 0 12px 8px; }

@media (max-width: 700px) {
    :root .rl .rl-chat-btn:not(#rlx) { height: 28px; padding: 0 8px; }
}
.rl-chat-list { height: 280px; flex: 0 0 auto; }
@media (min-width: 701px) {
    .rl-chat-list { height: 320px; }
}

.rl-admin .rl-form { padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.rl-admin label { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.rl-admin label > span { color: var(--rl-muted); }
:root .rl-admin .rl-input:not(#rlx) { flex: 0 0 140px; width: 140px; }
:root .rl-admin select.rl-input:not(#rlx) { padding: 0 6px; font-size: 14px; }
.rl-admin .rl-form .rl-btn { justify-self: start; }
.rl-admin .rl-cancel { padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
:root .rl-admin .rl-btn-danger:not(#rlx) { color: #FFFFFF; background: var(--rl-accent); border-color: var(--rl-accent); white-space: normal; height: auto; min-height: 38px; padding: 8px 12px; text-align: center; line-height: 1.3; max-width: 100%; }

@media (min-width: 701px) {
    .rl { --rl-tile: 72px; }
    .rl-cols { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
    .rl-stat b { font-size: 22px; line-height: 28px; }
    .rl-admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
}
.rl-vf dd.rl-vf-txt { font-family: inherit; font-size: 13px; }
.rl-admin label.rl-admin-wide { flex-direction: column; align-items: stretch; gap: 4px; }
:root .rl-admin .rl-admin-wide .rl-input:not(#rlx) { flex: 0 0 auto; width: 100%; }

.rl-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 10px; background: var(--rl-card);
      border: 1px solid var(--rl-line); border-top: 0; }
:root .rl .rl-tab:not(#rlx) { display: flex; align-items: center; justify-content: center; height: 40px; min-width: 0; margin: 0; padding: 0 8px;
      font: inherit; font-size: 14px; line-height: 1; color: var(--rl-muted); background: transparent; border: 0; border-bottom: 2px solid transparent;
      border-radius: 0; cursor: pointer; white-space: nowrap; }
:root .rl .rl-tab:not(#rlx):hover { color: var(--rl-text); }
:root .rl .rl-tab.active:not(#rlx) { color: var(--rl-text); font-weight: bold; border-bottom-color: var(--rl-accent); }
.rl.rl-tab-duel .rl-pane-bank, .rl:not(.rl-tab-duel) .rl-pane-duel { display: none; }

.rl-rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
.rl-room { display: flex; flex-direction: column; min-width: 0; background: var(--rl-head); border: 1px solid var(--rl-line); }
.rl-room.rl-room-mine { border-color: var(--rl-accent); box-shadow: inset 0 0 0 1px var(--rl-accent); }
.rl-room-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 32px; padding: 0 10px;
      border-bottom: 1px solid var(--rl-line); }
.rl-room-head span { font-size: 12px; color: var(--rl-muted); font-variant-numeric: tabular-nums; }
.rl-room-head b { font-size: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rl-room-seats { display: flex; align-items: center; justify-content: center; gap: 8px; height: 72px; }
.rl-seat { position: relative; flex: 0 0 52px; width: 52px; height: 52px; background: var(--rl-raise); border-bottom: 3px solid var(--c); overflow: hidden; }
.rl-seat img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rl-seat:empty::after { content: '?'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
      font-size: 20px; font-weight: bold; color: var(--rl-muted); }
.rl-room-seats i { flex: 0 0 auto; font-style: normal; font-size: 11px; font-weight: bold; color: var(--rl-muted); text-transform: uppercase; }
.rl-room-who { display: flex; align-items: center; justify-content: center; gap: 4px; height: 20px; padding: 0 10px; min-width: 0; }
.rl .rl-room-name { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold;
      color: var(--rl-text); text-decoration: none; }
.rl a.rl-room-name:hover { text-decoration: underline; }
.rl-room-mark { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; }
.rl-room-mark:empty { display: none; }
.rl-room-mark img { width: 14px; height: 14px; }
.rl-room-time { flex: 0 0 auto; margin-left: 2px; font-size: 12px; color: var(--rl-muted); font-variant-numeric: tabular-nums; }
:root .rl .rl-room-btn:not(#rlx) { flex: 0 0 auto; width: auto; min-width: 0; height: 34px; margin: 8px 10px 10px; padding: 0 8px; font-size: 13px; }
.rl-duel-err { margin: 0; padding: 0 8px 8px; }

:root .rl .rl-dh-room:not(#rlx) { flex: 0 1 auto; min-width: 0; max-width: 60%; height: 26px; margin: 0 0 0 auto; padding: 0 4px; font: inherit;
      font-size: 12px; font-weight: normal; color: var(--rl-text); background: var(--rl-input); border: 1px solid var(--rl-line); border-radius: 0; }
.rl-pair { flex: 0 0 auto; display: flex; gap: 2px; }
.rl-pair img.rl-lose { opacity: .45; filter: grayscale(1); }

#rl-modal { z-index: 10051; }
.rl-dm-vs { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--rl-line); }
.rl-dm-p { flex: 1 1 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
.rl-dm-vs > i + .rl-dm-p { flex-direction: row-reverse; }
.rl-dm-p img { flex: 0 0 36px; width: 36px; height: 36px; object-fit: cover; border-bottom: 3px solid var(--c); }
.rl-dm-p b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rl-dm-vs > i { flex: 0 0 auto; font-style: normal; font-size: 11px; font-weight: bold; color: var(--rl-muted); text-transform: uppercase; }
.rl-dm-foot .rl-result { border-bottom: 0; }
.rl-dm-foot .rl-result img { background: var(--rl-raise); }
.rl-dm-foot .rl-result.rl-dm-wait .rl-result-prize { color: var(--rl-muted); }
.rl-dm-actions { display: flex; gap: 6px; padding: 0 12px 12px; }
:root .rl .rl-dm-actions .rl-btn:not(#rlx) { flex: 1 1 0; min-width: 0; }
html:has(#rl-root) #custom-modal > div { border-radius: 0 !important; }

@media (min-width: 701px) {
    .rl-rooms { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 10px; }
}