/* «Реализация перевеса» (real.js). Цвета — токены из index.html. */
.rl-load{padding:60px 0; text-align:center; color:var(--ink-2)}
.rl-banner{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:space-between;
  background:var(--accent-soft); border:1px solid var(--accent); border-radius:12px; padding:11px 14px; margin-bottom:18px; font-size:14px}

.rl-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:18px}
.rl-tile{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  display:flex; flex-direction:column; gap:2px; text-align:left; box-shadow:var(--shadow)}
.rl-tile b{font-family:"Literata",serif; font-size:22px; line-height:1.15}
.rl-tile span{font-size:12px; color:var(--ink-3)}
.rl-tile.act:not(:disabled):hover{border-color:var(--accent)}
.rl-tile.act:not(:disabled) span{color:var(--accent); font-weight:600}
.rl-tile:disabled{cursor:default}

.rl-filters{display:flex; gap:10px 18px; flex-wrap:wrap; margin-bottom:16px}
.rl-filters .rvseg{flex-wrap:wrap}
.rl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px}
.rl-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px;
  display:grid; grid-template-columns:104px 1fr; gap:13px; text-align:left; box-shadow:var(--shadow);
  transition:border-color .15s, transform .15s}
.rl-card:hover{border-color:var(--accent); transform:translateY(-2px)}
.rl-card .th{border-radius:7px; overflow:hidden; line-height:0; border:1px solid var(--line-2); align-self:start}
.rl-card .bd{display:flex; flex-direction:column; gap:5px; min-width:0; align-items:flex-start}
.rl-card .tt{font-family:"Literata",serif; font-weight:700; font-size:16px; line-height:1.25}
.rl-card .tt i{font-style:normal; font-weight:600; color:var(--ink-3); font-size:13px}
.rl-card .mt{font-size:12.5px; color:var(--ink-2)}
.tg{display:flex; flex-wrap:wrap; gap:4px}
.tg span{font-size:11px; padding:1px 7px; border-radius:99px; background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line-2)}
.rl-st.clean, .rl-st.won{color:var(--good); background:var(--good-bg); border-color:var(--good-line)}
.rl-st.fail{color:var(--bad); background:var(--bad-bg); border-color:var(--bad-line)}

.rl-big{font-family:"Literata",serif; font-size:19px; font-weight:700; line-height:1.25}
.rl-p{font-size:13.5px; color:var(--ink-2); margin:8px 0 0}
.rl-p b{color:var(--ink)}
.rl-tags{margin-top:10px}
.rl-row{display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap}
.rl-seg{flex-wrap:wrap}
.rl-lv button{padding:5px 10px; min-width:32px}

.rl-hist{display:flex; flex-direction:column; gap:5px; font-size:12.5px}
.rl-hr{display:flex; gap:10px; align-items:center; flex-wrap:wrap; color:var(--ink-3)}
.rl-hr b{color:var(--ink-2)}
.rl-hr b.win{color:var(--good)} .rl-hr b.loss{color:var(--bad)}

/* партия */
.rl-pl{display:flex; align-items:center; gap:8px; padding:4px 2px; font-size:13.5px}
.rl-pl .dot{width:11px; height:11px; border-radius:50%; border:1px solid var(--ink-3)}
.rl-pl .dot.w{background:#fff} .rl-pl .dot.b{background:#151210}
.rl-clk{margin-left:auto; font:700 15px/1 "JetBrains Mono",monospace; padding:5px 9px; border-radius:7px;
  background:var(--surface-2); color:var(--ink-2); font-variant-numeric:tabular-nums}
.rl-clk.on{background:var(--ink); color:var(--bg)}
.rl-clk.low.on{background:var(--bad); color:#fff}
.rl-bwrap{position:relative}
.rl-bwrap .boardgrid{position:relative}
#vReal .rvbwrap .boardgrid{position:relative}
.rl-promo{position:absolute; inset:0; z-index:20; background:rgba(20,15,10,.45); display:flex;
  align-items:center; justify-content:center; gap:8px; border-radius:6px}
.rl-promo button{width:16%; aspect-ratio:1; background:var(--surface); border-radius:10px; border:1px solid var(--line); padding:6px}
.rl-promo button svg{width:100%; height:100%}
.rl-promo button.x{width:9%; font-size:18px}
.rl-status{font-size:15px; font-weight:700; padding:9px 12px; border-radius:10px; background:var(--surface-2); margin-bottom:10px}
.rl-status.go{background:var(--good-bg); color:var(--good)}
.rl-status.bad{background:var(--bad-bg); color:var(--bad)}
.rl-moves{display:flex; flex-wrap:wrap; gap:2px 3px; align-items:center; max-height:240px; overflow:auto;
  font-family:"JetBrains Mono",monospace; font-size:12.5px; scrollbar-width:thin}
.rl-moves2{margin-top:12px; max-height:150px}
.rl-moves .no{color:var(--ink-3); font-size:11.5px; margin-left:4px}
.rl-m{padding:2px 6px; border-radius:6px}
.rl-m:hover{background:var(--surface-2)}
.rl-m.cur{background:var(--accent); color:var(--accent-ink); font-weight:700}
.rl-m.bad{color:var(--bad); font-weight:700}
.rl-m.cur.bad{color:var(--accent-ink)}
.rl-m.start{box-shadow:inset 0 0 0 1.5px var(--accent)}

/* разбор */
.rl-verd.good{border-color:var(--good-line); background:linear-gradient(var(--good-bg),var(--surface) 70%)}
.rl-verd.bad{border-color:var(--bad-line); background:linear-gradient(var(--bad-bg),var(--surface) 70%)}
.rl-cmp{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:12px}
.rl-cmp div{display:flex; flex-direction:column; align-items:center; text-align:center}
.rl-cmp b{font-family:"Literata",serif; font-size:22px; line-height:1.1}
.rl-cmp span{font-size:11px; color:var(--ink-3)}
.rl-fair{font-size:13px; margin:12px 0 0; padding:8px 10px; border-radius:9px}
.rl-fair.good{background:var(--good-bg); color:var(--good)}
.rl-fair.bad{background:var(--bad-bg); color:var(--bad)}
.rl-graph svg{display:block; width:100%; height:120px; background:var(--surface-2); border-radius:9px; cursor:crosshair}
.rl-graph .mid{stroke:var(--line); stroke-width:.6; stroke-dasharray:2 2; vector-effect:non-scaling-stroke}
.rl-graph path{fill:none; vector-effect:non-scaling-stroke; stroke-linejoin:round}
.rl-graph path.me{stroke:var(--accent); stroke-width:2.2}
.rl-graph path.ch{stroke:var(--ink-3); stroke-width:1.6; stroke-dasharray:4 3}
.rl-graph .er circle{fill:var(--bad); stroke:var(--surface); stroke-width:.6}
.rl-leg{display:flex; gap:14px; font-size:12px; color:var(--ink-3); margin-top:8px}
.rl-leg span::before{content:""; display:inline-block; width:14px; height:3px; border-radius:2px; vertical-align:middle; margin-right:6px}
.rl-leg .me::before{background:var(--accent)}
.rl-leg .ch::before{background:var(--ink-3)}
.rl-leg .er::before{width:8px; height:8px; border-radius:50%; background:var(--bad)}
.rl-pathw{max-height:260px; overflow:auto; margin-top:10px; scrollbar-width:thin}
.rl-pr{display:grid; grid-template-columns:52px 1fr 1fr; gap:4px; font:12.5px/1.7 "JetBrains Mono",monospace;
  padding:0 6px; border-radius:6px}
.rl-pr.hd{font-family:"Manrope",sans-serif; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)}
.rl-pr span:first-child{color:var(--ink-3); font-size:11.5px}
.rl-pr.mine span:nth-child(2){font-weight:700}
.rl-pr.eq{background:var(--good-bg)}
.rl-pr .bad{color:var(--bad)}
.rl-empty{max-width:560px}

/* профиль */
.rl-two{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:12px; margin-bottom:16px}
.rl-tab .hd td{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.rl-tab td.n{width:auto; white-space:nowrap}
.rl-bins{display:flex; flex-direction:column; gap:6px}
.rl-bins div{display:grid; grid-template-columns:52px 1fr 26px; align-items:center; gap:8px; font-size:12.5px}
.rl-bins i{display:block; height:10px; border-radius:99px; background:var(--bad); min-width:2px}
.rl-bins b{font-variant-numeric:tabular-nums; text-align:right}

@media (max-width:600px){
  .rl-card{grid-template-columns:84px 1fr}
  .rl-cmp b{font-size:18px}
}

/* свои партии */
.rl-imp{margin:22px 0 0}
.rl-imp summary{cursor:pointer; font-weight:700; font-size:15px; color:var(--accent); list-style:none}
.rl-imp summary::-webkit-details-marker{display:none}
.rl-imp[open] summary{margin-bottom:12px}
.rl-ta{width:100%; min-height:110px; resize:vertical; padding:10px 12px; border-radius:10px; margin-top:12px;
  border:1px solid var(--line); background:var(--bg); color:var(--ink); font:12.5px/1.5 "JetBrains Mono",monospace}
.rl-ta:focus{outline:none; border-color:var(--accent)}
.rl-imp .opinput{margin:0; flex:1; min-width:200px}
.rl-job{margin-top:18px}
.rl-jobh{display:flex; justify-content:space-between; gap:10px; margin-bottom:9px; font-size:14px}
.rl-jobh span{color:var(--ink-3); font-size:12.5px}

/* библиотека: следующая позиция, подборки, темы, список */
.rl-head{margin-bottom:10px}
.rl-head .ghost{margin-left:6px}
.rl-how{margin:0 0 18px; font-size:13.5px; color:var(--ink-2)}
.rl-how summary{cursor:pointer; color:var(--ink-3); font-size:13px}
.rl-how p{margin:8px 0 0; max-width:70ch}
.rl-top{display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:12px; margin-bottom:12px}
@media (max-width:760px){ .rl-top{grid-template-columns:1fr} }
.rl-next{display:grid; grid-template-columns:200px 1fr; gap:18px; align-items:start}
@media (max-width:560px){ .rl-next{grid-template-columns:1fr} .rl-next .th{max-width:240px} }
.rl-next .th{border-radius:8px; overflow:hidden; line-height:0; border:1px solid var(--line-2)}
.rl-next .lab, .rl-sb .lab{font:700 11px/1 "Manrope",sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--accent)}
.rl-next .rl-big{margin-top:8px}
.rl-next .rl-big i{font-style:normal; color:var(--ink-3); font-size:15px}
.rl-next .tg{margin-top:9px}
.rl-why{font-size:12.5px; color:var(--ink-3); margin:9px 0 0}
.rl-side{display:flex; flex-direction:column; gap:12px}
.rl-sb{display:flex; flex-direction:column; gap:3px; text-align:left; flex:1}
.rl-sb b{font-family:"Literata",serif; font-size:26px; line-height:1.15; margin-top:4px}
.rl-sb i{font-style:normal; font-size:12.5px; color:var(--ink-3)}
.rl-sb:not(:disabled):hover{border-color:var(--accent)}
.rl-sb:not(:disabled) i{color:var(--accent); font-weight:600}
.rl-sb[aria-pressed="true"]{border-color:var(--accent)}
.rl-sb:disabled{cursor:default; opacity:.75}
.rl-opp{margin-bottom:12px}
.rl-h3{font:700 11px/1 "Manrope",sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin:24px 0 10px}
.rl-h3 span{letter-spacing:0; text-transform:none; font-weight:500; margin-left:6px}
.rl-cols{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px}
.rl-col{display:grid; grid-template-columns:34px 1fr; grid-template-rows:auto 5px; gap:6px 11px; align-items:center;
  text-align:left; padding:10px 12px; border-radius:11px; background:var(--surface); border:1px solid var(--line)}
.rl-col:hover{border-color:var(--ink-3)}
.rl-col[aria-pressed="true"]{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.rl-col .ic{grid-row:1 / 3; width:34px; height:34px; border-radius:9px; background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; font:700 16px/1 "Literata",serif}
.rl-col .nm{display:flex; flex-direction:column; min-width:0}
.rl-col .nm b{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rl-col .nm i{font-style:normal; font-size:11.5px; color:var(--ink-3)}
.rl-col .pb{height:5px; border-radius:99px; background:var(--surface-2); overflow:hidden}
.rl-col .pb i{display:block; height:100%; background:var(--good); border-radius:99px}
.rl-tagsel{display:flex; flex-wrap:wrap; gap:6px}
.rl-tagsel button{padding:5px 11px; border-radius:99px; border:1px solid var(--line); background:var(--surface); font-size:12.5px}
.rl-tagsel button i{font-style:normal; color:var(--ink-3); margin-left:3px}
.rl-tagsel button[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.rl-tagsel button[aria-pressed="true"] i{color:inherit; opacity:.7}
.rl-tools{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:10px}
.rl-tools .opinput{flex:1; min-width:180px; max-width:320px; margin:0}
.rl-lw{display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:14px; align-items:start}
@media (max-width:860px){ .rl-lw{grid-template-columns:1fr} .rl-prev{display:none} }
.rl-list{background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.rl-li{display:grid; grid-template-columns:34px minmax(0,1fr) 62px 132px; gap:10px; align-items:center; width:100%;
  text-align:left; padding:9px 12px; border-bottom:1px solid var(--line-2)}
.rl-li:last-child{border-bottom:0}
.rl-li:hover{background:var(--surface-2)}
.rl-li .n{color:var(--ink-3); font:12px/1 "JetBrains Mono",monospace}
.rl-li .tt{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; min-width:0}
.rl-li .tt b{font-size:14px}
.rl-li .tt i{font-style:normal; color:var(--ink-3); font-size:12.5px}
.rl-li .tt em{font-style:normal; color:var(--ink-3); font-size:12px; flex-basis:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rl-li .ev{font:700 12.5px/1 "JetBrains Mono",monospace; color:var(--good); text-align:right}
.rl-li .pill{justify-self:end}
@media (max-width:560px){ .rl-li{grid-template-columns:26px minmax(0,1fr) 54px} .rl-li .pill{display:none} }
.rl-prev{position:sticky; top:70px; display:flex; flex-direction:column; gap:6px; font-size:13px}
.rl-prev .th{border-radius:8px; overflow:hidden; line-height:0; border:1px solid var(--line-2)}
.rl-prev span{color:var(--ink-3); font-size:12px}
.rl-pager{display:flex; gap:12px; align-items:center; justify-content:center; margin-top:14px}
.rl-pager button{padding:7px 13px; border:1px solid var(--line); border-radius:8px; background:var(--surface); font-size:13px}
.rl-pager button:disabled{opacity:.4; cursor:default}

/* Elo соперника */
.rl-elo{display:flex; align-items:center; gap:14px; margin-top:12px}
.rl-elov{display:flex; flex-direction:column; min-width:118px}
.rl-elov b{font-family:"Literata",serif; font-size:26px; line-height:1.1}
.rl-elov span{font-size:12px; color:var(--accent); font-weight:600}
.rl-elo input{flex:1; accent-color:var(--accent)}
.rl-presets{display:flex; flex-wrap:wrap; gap:5px; margin-top:10px}
.rl-presets button{padding:4px 9px; border-radius:8px; border:1px solid var(--line); background:var(--surface); font-size:12px; display:flex; gap:5px; align-items:baseline}
.rl-presets button i{font-style:normal; color:var(--ink-3); font-size:11px}
.rl-presets button[aria-pressed="true"]{border-color:var(--accent); color:var(--accent)}
.rl-ranks{margin-top:10px; font-size:12.5px}
.rl-ranks summary{cursor:pointer; color:var(--ink-3)}
.rl-ranks table{border-collapse:collapse; margin-top:6px}
.rl-ranks td{padding:2px 14px 2px 0; border-bottom:1px solid var(--line-2)}
.rl-ranks td:last-child{font-family:"JetBrains Mono",monospace; color:var(--ink-2)}
.rl-opp h4, .rl-imp h4{margin:0 0 11px; font:700 11px/1 "Manrope",sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--accent)}

/* анализ в разборе */
.rl-engh{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.rl-engh h4{margin:0!important}
.rl-engh span{font-size:12px; color:var(--ink-3)}
.rl-engh .sp{flex:1}
.rl-eline{display:flex; gap:9px; align-items:baseline; width:100%; text-align:left; padding:6px 8px; border-radius:8px;
  font:12.5px/1.5 "JetBrains Mono",monospace; color:var(--ink-2)}
.rl-eline:hover{background:var(--surface-2)}
.rl-eline b{min-width:52px; color:var(--ink); font-weight:700}
.rl-eline span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rl-var{margin-top:10px; padding:8px 10px; border-radius:9px; background:var(--accent-soft); font:12.5px/1.6 "JetBrains Mono",monospace}
.rl-var b{font-family:"Manrope",sans-serif}
.rl-var button{margin-left:8px; font:600 12px/1 "Manrope",sans-serif; color:var(--accent)}