/* ================= Аккаунт, персонаж, инвентарь, рейтинг ================= */

/* ---------- Фон меню: видео боя после входа ---------- */
#menuVideo {
  position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  opacity: 0; transition: opacity 1.2s; pointer-events: none;
  filter: saturate(1.1) brightness(.85);
}
#menuVideo.on { opacity: 1; }
#menuVideo.on.dip { opacity: .15; transition: opacity .6s; }
body.has-video #backdrop { opacity: 0; transition: opacity 1.2s; }
body.has-video #backdropShade {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(14,16,24,.1), rgba(14,16,24,.6) 80%),
    linear-gradient(180deg, rgba(14,16,24,.25), rgba(14,16,24,.55));
}

/* ---------- Уведомления в меню ---------- */
#toasts {
  position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 600; pointer-events: none; width: max-content; max-width: 92vw;
}

/* ---------- Плитки меню ---------- */
.tile-ranked {
  grid-column: 2; color: #eaf6ff;
  background: radial-gradient(ellipse at 50% 80%, #1d3a58, #121c2c 75%);
}
.tile-ranked p { opacity: .85; }
.tile-ranked:not(:disabled):hover { box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 0 0 3px #5ee0ff; }
.tile-online.live { background: rgba(94,224,255,.85); color: #062030; }
/* мой уровень и рейтинг на плитке */
.tile-myrank {
  display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 12px 8px 8px; border-radius: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--lc, #5ee0ff) 22%, rgba(6,10,22,.75)), rgba(6,10,22,.7));
  border: 1px solid color-mix(in srgb, var(--lc, #5ee0ff) 40%, transparent);
}
.tile-myrank.hidden { display: none; }
.tmr-emb { display: inline-flex; flex-shrink: 0; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--lc) 60%, transparent)); }
.tmr-main { flex: 1; min-width: 0; text-align: left; }
.tmr-line { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.tmr-tier { display: block; font-family: var(--font-display); font-size: 17px; letter-spacing: .5px; text-transform: uppercase; color: #fff; line-height: 1.1; }
.tmr-line small { font-size: 11px; color: #9fb4cc; }
.tmr-pts { font-family: var(--font-display); font-size: 24px; line-height: 1; color: #c6ff3d; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(198,255,61,.3); }
.tmr-bar { position: relative; height: 7px; margin-top: 6px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.tmr-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--lc) 60%, #fff 10%), var(--lc)); box-shadow: 0 0 8px var(--lc); }
.tmr-left { display: block; margin-top: 3px; font-size: 11px; color: #9fb4cc; }

.tile-character {
  grid-column: 3; color: #fff;
  background: linear-gradient(120deg, #2b2140, #432a5e 60%, #5a2f6e);
}
.tile-character .tile-art { left: auto; right: 0; width: 52%; height: 100%; }
.tile-character .tile-text { max-width: 54%; }
.tile-character:not(:disabled):hover { box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 0 0 3px #c47bff; }
.char-name { font-family: var(--font-display); font-size: 18px; letter-spacing: .5px; margin-top: 2px; }
.char-meta { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.ct-line { font-size: 12.5px; opacity: .9; }
.ct-cta { font-size: 12.5px; font-weight: 700; color: #ffd36b; }
.tile-new {
  position: absolute; right: 10px; top: 10px; z-index: 3;
  background: #ade55c; color: #13240a; font-family: var(--font-display); font-size: 12px; letter-spacing: 1px;
  padding: 2px 8px; border-radius: 4px; animation: newPulse 1.4s ease-in-out infinite;
}
@keyframes newPulse { 50% { transform: scale(1.1); } }

/* закрытая плитка: затемнение и что нужно сделать */
.tile.is-locked > *:not(.tile-lock):not(.tile-online):not(.search-pill) { filter: grayscale(.85) brightness(.65); }
.tile-lock {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
  width: min(86%, 260px); padding: 12px 14px; border-radius: 12px;
  background: rgba(10,12,20,.88); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.12);
}
.tile-lock .tl-ico { font-size: 22px; }
.tile-lock b { font-family: var(--font-display); font-size: 17px; letter-spacing: .5px; text-transform: uppercase; }
.tile-lock small { font-size: 12px; color: #b8bdcc; }
.tl-bar { width: 100%; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); margin-top: 6px; overflow: hidden; }
.tl-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff9a2e, #ffd23f); }
.tile.shake { animation: tileShake .4s; }
@keyframes tileShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* новичок: обучение — «начните здесь» */
.tile-start { box-shadow: 0 0 0 3px var(--accent), 0 0 32px rgba(232,135,30,.6) !important; animation: startGlow 1.8s ease-in-out infinite; }
@keyframes startGlow { 50% { box-shadow: 0 0 0 3px var(--accent-2), 0 0 44px rgba(255,173,66,.85); } }
.tile-start-rib {
  position: absolute; left: 12px; bottom: 10px; z-index: 4;
  background: var(--accent); color: #fff; font-family: var(--font-display); font-size: 12px; letter-spacing: 1px;
  padding: 3px 9px; border-radius: 4px; text-transform: uppercase;
}

.guest-badge {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.12); color: #c9cedb; vertical-align: middle;
}
#profileName { cursor: pointer; }

/* ---------- Рамки (HUD, лобби) ---------- */
.frame-bronze { box-shadow: 0 0 0 2px #b26b2e, 0 0 6px rgba(255,178,122,.5); }
.frame-silver { box-shadow: 0 0 0 2px #c8d2dc, 0 0 8px rgba(240,246,255,.55); }
.frame-gold { box-shadow: 0 0 0 2px #e0b030, 0 0 10px rgba(255,224,120,.7); }
.frame-fire { box-shadow: 0 0 0 2px #ff5a1a, 0 0 12px #ff8a2a; animation: fireFrame 1s ease-in-out infinite; }
.frame-spark { box-shadow: 0 0 0 2px #e4ae39, 0 0 14px #fff2c4; animation: fireFrame 1.4s ease-in-out infinite; }
@keyframes fireFrame { 50% { box-shadow: 0 0 0 2px #ffd23f, 0 0 18px #ff5a1a; } }
.lobby-ava {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), rgba(0,0,0,.35)), var(--pc, #555);
}
.lobby-ava canvas { display: block; }

/* ---------- Окно входа ---------- */
.auth-box { max-width: 860px; padding: 0; display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; position: relative; }
.auth-main { padding: 26px 28px; position: relative; }
.auth-main .logo-modal { justify-content: flex-start; margin-bottom: 14px; }
.auth-tabs { display: flex; gap: 4px; background: #0f1220; border-radius: 10px; padding: 4px; margin-bottom: 16px; }
.auth-tab { flex: 1; background: transparent; border: none; color: var(--muted); padding: 9px 6px; border-radius: 7px; font-weight: 700; font-size: 13.5px; }
.auth-tab.on { background: var(--accent); color: #fff; }
.auth-form { display: flex; flex-direction: column; gap: 6px; }
.auth-field, .auth-pass { display: flex; flex-direction: column; gap: 6px; }
.auth-field.hidden, .auth-pass.hidden { display: none; }
.auth-label { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 4px; }
.auth-note { font-size: 12.5px; color: #aab0c0; text-align: center; margin-top: 8px; line-height: 1.45; }
.auth-close { position: absolute; right: 12px; top: 12px; }
.auth-perks {
  background: linear-gradient(160deg, #2b2140, #1b1830); padding: 24px 24px 20px;
  display: flex; flex-direction: column; gap: 12px; border-left: 1px solid var(--line);
}
.perks-title { font-family: var(--font-display); font-size: 20px; letter-spacing: 1px; text-transform: uppercase; color: #ffd36b; }
.perk { display: flex; gap: 12px; align-items: flex-start; }
.pk-ico { font-size: 24px; line-height: 1; width: 30px; text-align: center; }
.perk b { display: block; font-size: 14px; color: #fff; }
.perk small { display: block; font-size: 12.5px; color: #c4c0d6; line-height: 1.4; margin-top: 1px; }
.perks-foot { margin-top: auto; font-size: 12px; color: #a59fbf; }

/* ---------- Персонаж ---------- */
.char-box { max-width: 1120px; padding: 18px 22px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.char-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.char-head h3 { margin: 0; }
.char-head-tools { display: flex; gap: 8px; align-items: center; }
.char-body { display: grid; grid-template-columns: 330px 1fr; gap: 18px; min-height: 0; flex: 1; }
.char-left { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
.char-stage {
  position: relative; height: 230px; flex-shrink: 0; border-radius: 14px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 70%, #3b2b58, #171a28 75%);
  border: 1px solid var(--line);
}
.char-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.char-stage-name {
  position: absolute; left: 12px; top: 10px; display: flex; gap: 8px; align-items: center;
  font-family: var(--font-display); font-size: 19px; letter-spacing: .5px;
}
.char-slots { display: flex; flex-direction: column; gap: 5px; }
.char-slot {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); border-left: 4px solid var(--rc);
  border-radius: 9px; padding: 4px 10px 4px 6px; color: var(--text);
}
.char-slot:hover, .char-slot.on { background: rgba(255,255,255,.09); }
.char-slot canvas { flex-shrink: 0; }
.cs-slot { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; }
.cs-item { font-size: 14px; font-weight: 700; color: var(--rc); }
.char-stats { display: flex; flex-direction: column; gap: 8px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stat-grid .st { background: rgba(255,255,255,.05); border-radius: 8px; padding: 7px 4px; text-align: center; }
.stat-grid b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.stat-grid span { font-size: 11px; color: var(--muted); }
.season-row { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.05); border-radius: 10px; padding: 8px 10px; }
.sr-title { font-weight: 700; font-size: 13.5px; }
.sr-sub { font-size: 12px; color: var(--muted); }
.ranked-progress { background: rgba(94,224,255,.08); border: 1px solid rgba(94,224,255,.25); border-radius: 10px; padding: 8px 10px; }
.rp-text { font-size: 12.5px; color: #cfeffd; }
.rp-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); margin-top: 6px; overflow: hidden; }
.rp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #5ee0ff, #3a8bff); }
.guest-cta { background: linear-gradient(135deg, rgba(232,135,30,.18), rgba(196,123,255,.14)); border: 1px solid rgba(255,173,66,.35); border-radius: 12px; padding: 12px; }
.gc-title { font-family: var(--font-display); font-size: 17px; letter-spacing: .5px; color: #ffd36b; }
.gc-text { font-size: 12.5px; color: #d8d3e4; margin: 6px 0 10px; line-height: 1.45; }
.gc-actions { display: flex; gap: 8px; }
.gc-actions button { padding: 9px 14px; font-size: 14px; }

.char-right { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.inv-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
/* разделы инвентаря — только иконки (название в подсказке) и счётчик собранного */
.inv-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 62px; padding: 7px 10px 5px; cursor: pointer; color: #9fb4cc;
  background: rgba(94,224,255,.05); border: 1px solid rgba(94,224,255,.2);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); transition: background .15s, color .15s;
}
.inv-tab i { display: inline-flex; }
.inv-tab small { font-size: 10.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.inv-tab:hover { color: #fff; background: rgba(94,224,255,.1); }
.inv-tab.on { color: #5ee0ff; background: rgba(94,224,255,.16); border-color: #5ee0ff; box-shadow: inset 0 0 14px rgba(94,224,255,.2); }
.inv-tab.on i { filter: drop-shadow(0 0 6px rgba(94,224,255,.7)); }
.inv-tab.on small { color: #bff6ff; }
.ii-badge.eq { display: inline-flex; padding: 2px; }
.ii-lock { display: inline-flex; }
/* страница «Персонаж»: панели как в лобби, вкладки «Инвентарь / История матчей» в шапке */
.page-character .char-body { height: 100%; min-height: 520px; }
.page-character .char-left, .page-character .char-right { padding: 14px; }
.char-tabs { display: flex; gap: 4px; background: #0f1220; border-radius: 10px; padding: 4px; }
.char-tab { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: none; color: var(--muted); padding: 7px 14px; border-radius: 7px; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.char-tab i { display: inline-flex; }
.char-tab:hover { color: #fff; }
.char-tab.on { background: var(--accent); color: #fff; }
.char-logout { display: inline-flex; align-items: center; gap: 6px; }
.char-body.tab-history .char-right { grid-column: 1 / -1; }
.char-body.tab-history .char-left { display: none; }
.inv-grid {
  flex: 1; min-height: 0; overflow-y: auto; padding: 2px 4px 2px 2px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; align-content: start;
}
.inv-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 6px 7px; border-radius: 10px; color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08); border-bottom: 3px solid var(--rc);
  transition: transform .1s, box-shadow .15s;
}
.inv-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 0 0 1px var(--rc); }
.inv-item.sel { box-shadow: 0 0 0 2px var(--rc), 0 0 18px color-mix(in srgb, var(--rc) 45%, transparent); }
.inv-item.equipped { background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 28%, transparent), rgba(255,255,255,.02)); }
.inv-item.locked canvas { filter: grayscale(1) brightness(.45); }
.inv-item.locked .ii-name { color: #6f7486; }
.ii-name { font-size: 11.5px; font-weight: 700; text-align: center; line-height: 1.2; color: var(--rc); }
.ii-badge { position: absolute; top: 4px; right: 4px; font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 4px; }
.ii-badge.eq { background: #2ecc71; color: #062010; }
.ii-badge.new { background: #ade55c; color: #13240a; }
.ii-lock { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); font-size: 18px; opacity: .9; }
.inv-detail {
  display: flex; gap: 14px; align-items: center; min-height: 92px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rc, #b0c3d9) 22%, transparent), rgba(255,255,255,.03));
  border: 1px solid var(--line); border-left: 4px solid var(--rc, #b0c3d9); border-radius: 12px; padding: 10px 14px;
}
.inv-detail canvas { flex-shrink: 0; }
.id-info { flex: 1; min-width: 0; }
.id-name { font-family: var(--font-display); font-size: 20px; letter-spacing: .5px; }
.id-tags { display: flex; gap: 6px; margin: 3px 0; }
.id-rarity { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--rc); }
.id-slot { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.id-desc { font-size: 13px; color: #d5d8e0; }
.id-how { font-size: 12px; color: #ffcf8a; margin-top: 2px; }

/* Аркана на сцене (как в Dota): эффекты справа, стили и заряд внизу */
.char-stage.arcana { height: 300px; }
.arc-ui { position: absolute; inset: 0; pointer-events: none; }
.arc-ui button { pointer-events: auto; cursor: pointer; }
.arc-fx { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.arc-fx-btn {
  position: relative; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: none;
  background: rgba(0,0,0,.28); color: rgba(255,255,255,.62); transition: color .15s, background .15s;
}
.arc-fx-btn:hover { background: rgba(0,0,0,.45); color: #fff; }
.arc-fx-btn:active { transform: scale(.94); }
.arc-fx-btn.locked { color: rgba(255,255,255,.35); }
.arc-fx-btn i { display: inline-flex; }
.arc-fx-btn em { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: #141826; color: #ffd36b; }
.arc-foot { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.arc-title { display: flex; flex-direction: column; align-items: center; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.arc-title span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; }
.arc-title b { font-size: 14px; font-weight: 700; color: var(--rc, #ade55c); }
.arc-pips { display: flex; gap: 7px; align-items: center; }
.arc-pip {
  width: 14px; height: 14px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.22); border: none; transition: transform .15s, background .15s;
}
.arc-pip:hover { transform: scale(1.2); background: rgba(255,255,255,.4); }
.arc-pip.eq { box-shadow: 0 0 0 2px rgba(173,229,92,.75); }
.arc-pip.on { background: #ade55c; box-shadow: 0 0 0 2px rgba(173,229,92,.35), 0 0 8px rgba(173,229,92,.6); }
.arc-pip.locked { width: 18px; height: 18px; background: rgba(0,0,0,.45); color: rgba(255,255,255,.55); }
.arc-pip.locked.on { background: rgba(255,211,107,.9); color: #2a1d02; box-shadow: none; }
.arc-pip i { display: inline-flex; }
.arc-charge { width: 100%; max-width: 230px; font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.arc-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); margin-top: 3px; overflow: hidden; }
.arc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #5ee0ff, #ade55c, #ffd36b); box-shadow: 0 0 8px rgba(173,229,92,.6); }
.arc-hint { color: #ade55c; }
/* ---------- Рейтинговый поиск ---------- */
.ranked-box { max-width: 520px; position: relative; text-align: center; padding: 22px 26px 24px; }
.ranked-close { position: absolute; right: 12px; top: 12px; }
/* «Отменить поиск» — отдельной строкой с воздухом сверху */
.ranked-searching > .btn-ghost { margin-top: 16px; padding: 10px 28px; }
.rk-head { display: flex; gap: 12px; align-items: center; justify-content: center; margin-bottom: 18px; }
.rk-head h3 { margin: 0 !important; }
.rk-emblem {
  width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
  background: radial-gradient(circle at 50% 40%, #5ee0ff, #1d3a58); box-shadow: 0 0 20px rgba(94,224,255,.4);
  -webkit-mask: radial-gradient(circle, #000 60%, transparent 61%) center/100% 100%;
}
.rk-season { font-size: 12.5px; color: var(--muted); }
/* карточка ранга: три эмблемы, название и очки, полоса до следующего уровня */
.rank-card {
  position: relative; margin: 0 0 16px; padding: 16px 18px 14px; border-radius: 16px; text-align: left; overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--lc) 26%, transparent), transparent 60%), linear-gradient(180deg, #171a2a, #10121d);
  border: 1px solid color-mix(in srgb, var(--lc) 35%, rgba(255,255,255,.08));
}
.rkc-embs { display: flex; align-items: center; justify-content: center; gap: 18px; height: 100px; margin-bottom: 6px; }
.rkc-emb { display: inline-flex; }
.rkc-emb.main { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--lc) 70%, transparent)); animation: rkcFloat 3s ease-in-out infinite; }
.rkc-emb.side { opacity: .45; filter: grayscale(.4); }
.rkc-emb.next { filter: grayscale(1) brightness(.7); }
@keyframes rkcFloat { 50% { transform: translateY(-4px); } }
.rkc-line { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.rkc-tier { display: block; font-family: var(--font-display); font-size: 26px; letter-spacing: 1px; text-transform: uppercase; color: #fff; line-height: 1.1; }
.rkc-line small { color: var(--muted); font-size: 12.5px; }
.rkc-pts { text-align: right; }
.rkc-pts b { font-family: var(--font-display); font-size: 30px; line-height: 1; color: #c6ff3d; text-shadow: 0 0 16px rgba(198,255,61,.35); font-variant-numeric: tabular-nums; }
.rkc-pts small { margin-left: 4px; }
.rkc-bar { position: relative; height: 12px; margin-top: 12px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.rkc-bar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 2px), #10121d calc(25% - 2px) 25%); }
.rkc-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--lc) 60%, #fff 10%), var(--lc)); box-shadow: 0 0 12px var(--lc); }
.rkc-scale { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 12px; color: var(--muted); }
.rkc-scale b { color: #dfe4f0; font-weight: 600; }
.rkc-history { width: 100%; margin-top: 12px; padding: 9px; }
.rk-find { width: 100%; font-size: 22px; padding: 16px; }
.rk-online { margin-top: 14px; font-size: 13px; color: #9fdcf0; }
.rk-online.big { font-size: 16px; font-weight: 700; }
.rk-status { font-size: 15px; font-weight: 700; margin: 16px 0 6px; }
.rk-hint { font-size: 12.5px; color: var(--muted); margin-top: 16px; line-height: 1.45; }
.rk-radar {
  position: relative; width: 170px; height: 170px; margin: 8px auto 4px; border-radius: 50%;
  background: radial-gradient(circle, rgba(94,224,255,.18), rgba(94,224,255,.03) 70%);
  border: 2px solid rgba(94,224,255,.35); overflow: hidden;
}
.rk-radar::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(94,224,255,.55), rgba(94,224,255,0) 25%);
  animation: radar 1.8s linear infinite;
}
@keyframes radar { to { transform: rotate(360deg); } }
.rk-radar i { position: absolute; inset: 22%; border-radius: 50%; border: 1px solid rgba(94,224,255,.3); }
.rk-radar i:nth-child(2) { inset: 40%; }
.rk-radar i:nth-child(3) { inset: 4%; }
.rk-time { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; font-family: var(--font-display); font-size: 30px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.rk-found-title { font-family: var(--font-display); font-size: 34px; letter-spacing: 3px; color: #7dff9b; text-shadow: 0 0 20px rgba(46,204,113,.6); animation: foundIn .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes foundIn { from { transform: scale(.6); opacity: 0; } }
.rk-ring {
  --p: 100; width: 120px; height: 120px; margin: 12px auto; border-radius: 50%; position: relative;
  background: conic-gradient(#2ecc71 calc(var(--p) * 1%), rgba(255,255,255,.08) 0);
  display: flex; align-items: center; justify-content: center;
}
.rk-ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--panel-solid); }
.rk-ring span { position: relative; font-family: var(--font-display); font-size: 40px; }
.rk-accepted { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
.rk-accepted i { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.2); }
.rk-accepted i.ok { background: #2ecc71; border-color: #7dff9b; box-shadow: 0 0 10px #2ecc71; }
.rk-actions { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }
.rk-accept { background: #2ecc71; box-shadow: 0 4px 0 #1a8a4a; font-size: 22px; padding: 14px 40px; }
.rk-accept:hover:not(:disabled) { background: #3fe083; }
.rk-lock-title { font-family: var(--font-display); font-size: 20px; letter-spacing: .5px; margin-bottom: 12px; }
.rk-steps { display: flex; flex-direction: column; gap: 6px; text-align: left; margin-bottom: 14px; }
.rk-step { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 8px; background: rgba(255,255,255,.04); border-radius: 9px; padding: 8px 10px; align-items: center; }
.rk-step .rk-check { grid-row: 1 / 3; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.rk-step.done .rk-check { background: #2ecc71; border-color: #2ecc71; color: #062010; }
.rk-step small { color: var(--muted); font-size: 12px; }
.rk-step.done b { color: #7dff9b; }
.rk-ready-ico { display: inline-flex; color: #7dff9b; }
.rk-ico { display: inline-flex; vertical-align: -3px; margin-right: 6px; opacity: .85; }
.rk-ready-title { font-family: var(--font-display); font-size: 24px; margin: 6px 0; }
.rk-ready .btn-primary { margin-top: 14px; }

/* ---------- Выпал предмет ---------- */
#lootModal { z-index: 700; background: radial-gradient(circle at 50% 45%, rgba(20,16,36,.75), rgba(4,4,10,.92)); }
.loot-box { text-align: center; max-width: 92vw; animation: lootIn .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes lootIn { from { transform: scale(.7); opacity: 0; } }
.loot-title { font-family: var(--font-display); font-size: 40px; letter-spacing: 2px; text-transform: uppercase; color: #fff; text-shadow: 0 0 24px var(--rc); }
.loot-sub { color: #c8ccd8; margin-top: 4px; }
.loot-cards { display: flex; gap: 16px; justify-content: center; margin: 22px 0; flex-wrap: wrap; }
.loot-card {
  position: relative; width: 180px; padding: 18px 12px 14px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 30%, #141826), #121522);
  border: 2px solid var(--rc); box-shadow: 0 0 30px color-mix(in srgb, var(--rc) 55%, transparent);
  animation: cardIn .6s cubic-bezier(.2,1.5,.4,1) backwards;
  display: flex; flex-direction: column; align-items: center;
}
@keyframes cardIn { from { transform: rotateY(90deg) scale(.6); opacity: 0; } }
.lc-rays {
  position: absolute; inset: -40%; z-index: 0; opacity: .35;
  background: repeating-conic-gradient(var(--rc) 0 8deg, transparent 8deg 22deg);
  animation: radar 9s linear infinite;
}
.loot-card > *:not(.lc-rays) { position: relative; z-index: 1; }
.lc-name { font-family: var(--font-display); font-size: 21px; margin-top: 6px; color: #fff; }
.lc-rarity { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--rc); }
.lc-slot { font-size: 11px; color: #aab0c0; margin-top: 2px; }
.loot-actions { display: flex; gap: 10px; justify-content: center; }

/* ---------- Комнаты: обычная игра / турнир ---------- */
.rooms-create { flex-wrap: wrap; }
.rooms-kind { flex-shrink: 0; }
.rooms-kind button { padding: 8px 12px; font-size: 13px; }
.room-row .rs.tour { background: rgba(241,196,15,.2); color: #ffd54a; }

/* ---------- Адаптив ---------- */
@media (max-width: 900px) {
  .auth-box { grid-template-columns: 1fr; max-height: 92dvh; overflow-y: auto; }
  .auth-perks { border-left: none; border-top: 1px solid var(--line); }
  /* узкий экран: одна колонка, прокручивается всё окно целиком */
  .char-box { display: block; overflow-y: auto; padding: 14px; }
  .char-body { display: flex; flex-direction: column; gap: 12px; }
  .char-left, .char-right { min-height: auto; overflow: visible; }
  .inv-grid { flex: none; overflow: visible; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .char-stage { height: 200px; }
  .char-slots { display: grid; grid-template-columns: 1fr 1fr; }
  .stat-grid b { font-size: 16px; }
  .inv-detail { flex-wrap: wrap; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .auth-box { grid-template-columns: 1.1fr .9fr; max-height: calc(100dvh - 16px); overflow-y: auto; }
  .auth-main { padding: 14px 18px; }
  .auth-main .logo-modal { display: none; }
  .auth-perks { padding: 14px 16px; gap: 8px; }
  .perk small { display: none; }
  /* телефон горизонтально: снова две колонки, прокрутка внутри каждой */
  .char-box { display: flex; overflow: hidden; padding: 10px 14px; max-height: calc(100dvh - 16px); height: calc(100dvh - 16px); }
  .char-head { margin-bottom: 6px; }
  .char-body { display: grid; grid-template-columns: 250px 1fr; gap: 10px; min-height: 0; flex: 1; }
  .char-left { overflow-y: auto; min-height: 0; }
  .char-right { min-height: 0; }
  .char-slots { display: flex; }
  .char-stage { height: 150px; }
  .inv-grid { flex: 1; min-height: 0; overflow-y: auto; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .inv-detail { min-height: 0; padding: 4px 10px; gap: 10px; }
  .inv-detail canvas { width: 44px !important; height: 44px !important; }
  .id-name { font-size: 16px; }
  .id-desc { display: none; }
  .char-stage.arcana { height: 230px; }
  .inv-detail .btn-primary, .inv-detail .btn-ghost { padding: 7px 14px; font-size: 14px; }
  .inv-tab { padding: 4px 9px; font-size: 12px; }
  .ranked-box { padding: 12px 18px 14px; }
  .rk-radar { width: 120px; height: 120px; }
  .rk-ring { width: 90px; height: 90px; margin: 6px auto; }
  .rk-found-title { font-size: 26px; }
  .loot-title { font-size: 28px; }
  .loot-card { width: 150px; padding: 12px 10px; }
  .loot-cards { margin: 12px 0; }
  .tile-character .tile-art { width: 100%; height: 56%; }
  .tile-character .tile-text { max-width: none; }
  .char-meta { display: none; }
}
@media (max-width: 700px) and (orientation: portrait) {
  .tile-character .tile-text { max-width: 58%; }
}