/* screens.css — вкладки «Играть», «История», «Профиль» */
.ci { display: inline-flex; width: 18px; height: 18px; vertical-align: -3px; }
.ci svg { width: 100%; height: 100%; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 12px; background: var(--card2); color: var(--ink); font-size: 12px; font-weight: 800; }
.chip svg { width: 14px; height: 14px; }
.chip.warn { background: rgba(245, 158, 11, 0.16); color: #b45309; }
:root[data-theme='dark'] .chip.warn { color: #fbbf24; }
.vt-sub { float: right; font-size: 15px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; }
.vt-sub svg { width: 16px; height: 16px; color: var(--gold); }
.foot { text-align: center; font-size: 12px; margin-top: 14px; }

/* сегмент-переключатель */
.seg { display: flex; padding: 4px; gap: 4px; background: var(--card2); border-radius: 16px; }
.seg button { flex: 1; padding: 9px 4px; border-radius: 12px; font-size: 14px; font-weight: 900; color: var(--muted); transition: background 0.15s, color 0.15s, transform 0.15s; }
.seg button.on { background: var(--card); color: var(--brand); box-shadow: var(--shadow); }
.seg.four { margin-bottom: 12px; } .seg.four button { font-size: 12.5px; }

/* Играть */
.hero { display: flex; flex-direction: column; gap: 12px; background: linear-gradient(160deg, var(--card), var(--card2)); position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; right: -30px; top: -30px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(90, 168, 255, 0.28), transparent 70%); pointer-events: none; }
.hero-top { display: flex; gap: 12px; align-items: center; }
.hero-ic { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(145deg, #5aa8ff, #2f78d0); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 0 #1b4f9b; flex: none; }
.hero-ic svg { width: 30px; height: 30px; }
.hint-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--muted); }
.hint-row b { color: var(--ink); }
.daily { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.daily-h { display: flex; justify-content: space-between; align-items: center; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 5px; border-radius: 12px; background: var(--card2); font-size: 11px; }
.day small { font-size: 8.5px; color: var(--muted); font-weight: 800; }
.day b { font-size: 11px; font-weight: 900; }
.dc svg { width: 17px; height: 17px; } .dg { font-size: 16px; line-height: 17px; }
.day.now { background: rgba(245, 179, 1, 0.2); outline: 2px solid var(--gold); animation: pulse 1.6s ease-in-out infinite; }
.day.done { opacity: 0.55; }
.dchk { position: absolute; top: -4px; right: -3px; width: 15px; height: 15px; border-radius: 50%; background: var(--ok); color: #fff; display: flex; align-items: center; justify-content: center; }
.dchk svg { width: 10px; height: 10px; stroke-width: 3.5; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.story-cont { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; text-align: left; color: var(--ink); }
.story-cont > svg { width: 22px; height: 22px; color: var(--muted); }
.sc-ic { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; flex: none; }
.sc-t { flex: 1; display: flex; flex-direction: column; font-size: 16px; font-weight: 900; }
.sc-t small { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.mode { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; color: var(--ink); transition: transform 0.1s; }
.mode:active { transform: scale(0.97); }
.mode b { font-size: 15.5px; font-weight: 900; } .mode small { font-size: 12px; color: var(--muted); }
.mode-ic { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(145deg, #34d399, #059669); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.mode-ic.alt { background: linear-gradient(145deg, #fb923c, #ea580c); }
.mode-ic svg { width: 24px; height: 24px; }

/* История: главы и карта */
.chap { border-radius: 26px; padding: 14px 12px 6px; margin-bottom: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 30%, var(--card)), color-mix(in srgb, var(--c2) 24%, var(--card))); box-shadow: var(--shadow); }
:root[data-theme='dark'] .chap { background: linear-gradient(180deg, color-mix(in srgb, var(--d1) 70%, var(--card)), color-mix(in srgb, var(--d2) 70%, var(--card))); }
.chap-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 18px; background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); }
.chap-head h3 { font-size: 16px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.chap-head p { color: rgba(255, 255, 255, 0.9); font-size: 12px; }
.chap-emoji { font-size: 34px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25)); }
.chap-head > div { flex: 1; min-width: 0; }
.chap-st { display: flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); font-size: 13px; font-weight: 900; }
.chap-st svg { width: 14px; height: 14px; color: #ffd95a; }
.map { position: relative; margin: 0 auto; }
.map > svg { position: absolute; left: 0; top: 0; overflow: visible; }
.map > svg path { fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 2 16; }
.map > svg path.open { stroke: #fff; stroke-dasharray: none; stroke-width: 9; opacity: 0.95; }
:root[data-theme='dark'] .map > svg path { stroke: rgba(255, 255, 255, 0.18); }
:root[data-theme='dark'] .map > svg path.open { stroke: rgba(255, 255, 255, 0.7); }
.node { position: absolute; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; transition: transform 0.12s; }
.node:active { transform: scale(0.93); }
.n-face { font-size: 30px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.node.boss .n-face { font-size: 38px; }
.node.done { background: linear-gradient(160deg, var(--oc), color-mix(in srgb, var(--oc) 60%, #000)); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.28), 0 0 0 4px #fff; }
.node.cur { background: linear-gradient(160deg, var(--oc), color-mix(in srgb, var(--oc) 60%, #000)); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.28), 0 0 0 4px var(--gold); animation: nodePulse 1.5s ease-in-out infinite; }
.node.lock { background: linear-gradient(160deg, #aab4c6, #7d8799); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.22), 0 0 0 4px rgba(255, 255, 255, 0.55); }
.node.boss.done, .node.boss.cur { box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3), 0 0 0 5px #ff5b5b; }
.node.boss.lock { box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25), 0 0 0 5px rgba(255, 91, 91, 0.5); }
@keyframes nodePulse { 50% { transform: scale(1.08); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.28), 0 0 0 7px rgba(245, 179, 1, 0.7); } }
.n-lock svg { width: 26px; height: 26px; }
.n-crown { position: absolute; top: -17px; left: 50%; transform: translateX(-50%) rotate(-8deg); color: var(--gold); filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.35)); }
.n-crown svg { width: 26px; height: 26px; }
.n-num { position: absolute; left: -2px; top: -2px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--card); color: var(--ink); font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
.n-stars { position: absolute; bottom: -17px; left: 50%; transform: translateX(-50%); display: flex; gap: 1px; }
.st { width: 15px; height: 15px; color: rgba(0, 0, 0, 0.25); display: block; }
.st.on { color: #ffc400; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35)); }
.st svg { width: 100%; height: 100%; }

/* карточка уровня */
.lv-card { display: flex; flex-direction: column; gap: 12px; }
.lv-head { display: flex; gap: 14px; align-items: center; }
.lv-head h2 { line-height: 1.1; }
.ttl { font-style: normal; font-size: 13px; color: var(--muted); }
.taunt { font-style: italic; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.crit { display: flex; flex-direction: column; gap: 6px; }
.crit > div { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--card2); font-size: 14px; font-weight: 800; }
.crit > div > span:last-of-type { flex: 1; }
.crit .ok { background: rgba(34, 197, 94, 0.14); }
.cs { display: flex; width: 50px; flex: none; }
.cs .st { width: 16px; height: 16px; }
.ck { width: 20px; height: 20px; border-radius: 50%; background: var(--ok); color: #fff; display: flex; align-items: center; justify-content: center; }
.ck svg { width: 12px; height: 12px; stroke-width: 3.5; }
.rew { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; font-weight: 900; }
.rew small { font-weight: 700; color: var(--muted); font-size: 11.5px; }

/* Профиль */
.p-head { display: flex; gap: 16px; align-items: center; }
.p-av { position: relative; flex: none; }
.lvl-badge.big { min-width: 32px; height: 32px; border-radius: 16px; font-size: 16px; right: -6px; bottom: -6px; }
.p-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.p-nick { display: flex; align-items: center; gap: 6px; max-width: 100%; }
.p-nick b { font-size: 21px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn { width: 28px; height: 28px; border-radius: 10px; background: var(--card2); color: var(--muted); display: flex; align-items: center; justify-content: center; flex: none; }
.icon-btn svg { width: 16px; height: 16px; }
.rank { display: inline-block; padding: 3px 11px; border-radius: 12px; font-size: 12.5px; font-weight: 900; color: #fff; background: var(--rc); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); }
.xpbar { width: 100%; height: 12px; border-radius: 6px; background: var(--line); overflow: hidden; }
.xpbar span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #5aa8ff, #22d3ee); transition: width 0.6s ease; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.stat { background: var(--card); border-radius: 16px; padding: 10px 6px; text-align: center; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; }
.stat b { font-size: 20px; font-weight: 900; } .stat small { font-size: 10.5px; color: var(--muted); font-weight: 800; }
.sec-h { margin: 20px 2px 10px; display: flex; justify-content: space-between; }
.showcase { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sc { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px 6px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow), inset 0 -4px 0 var(--rc); color: var(--ink); min-width: 0; }
.sc img { width: 100%; max-width: 60px; aspect-ratio: 1; }
.sc small { font-size: 9.5px; color: var(--muted); } .sc b { font-size: 10.5px; font-weight: 900; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ach { display: flex; gap: 8px; padding: 10px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); border: 2px solid transparent; }
.ach .a-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--card2); display: flex; align-items: center; justify-content: center; font-size: 21px; flex: none; filter: grayscale(1); opacity: 0.6; }
.ach.done { border-color: var(--gold); }
.ach.done .a-ic { filter: none; opacity: 1; background: linear-gradient(145deg, #ffe27a, #f5b301); }
.a-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.a-t b { font-size: 12.5px; font-weight: 900; line-height: 1.15; } .a-t small { font-size: 10.5px; color: var(--muted); line-height: 1.2; }
.a-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 2px; }
.a-bar span { display: block; height: 100%; background: linear-gradient(90deg, #5aa8ff, #22d3ee); border-radius: 3px; }
.ach.done .a-bar span { background: var(--gold); }
.a-f { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); font-weight: 800; }
.a-r { display: inline-flex; align-items: center; gap: 2px; color: var(--ink); } .a-r .ci { width: 12px; height: 12px; vertical-align: 0; }
.set-row { margin-top: 18px; display: flex; justify-content: space-between; align-items: center; font-weight: 900; }

/* Топ игроков */
.lb-card { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; color: var(--ink); cursor: pointer; }
.lb-head { display: flex; justify-content: space-between; align-items: center; }
.lb-more { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 800; color: var(--brand); }
.lb-more svg { width: 14px; height: 14px; }
.lb-list, .lb-full { display: flex; flex-direction: column; gap: 4px; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 14px; }
.lb-row.me { background: rgba(47, 120, 208, 0.13); box-shadow: inset 0 0 0 2px var(--brand-l); }
.lb-rank, .lb-medal { width: 26px; text-align: center; flex: none; font-size: 15px; font-weight: 900; color: var(--muted); }
.lb-medal { font-size: 21px; }
.lb-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.lb-name b { font-size: 14.5px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-name em { font-style: normal; font-size: 10.5px; padding: 1px 6px; margin-left: 4px; border-radius: 8px; background: var(--brand); color: #fff; vertical-align: 1px; }
.lb-name small { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.lb-val { font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.lb-val i { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 800; }
.lb-val .st { display: inline-flex; width: 15px; height: 15px; color: var(--gold); }
.lb-val .st svg { width: 100%; height: 100%; }
.lb-gap { text-align: center; color: var(--muted); letter-spacing: 3px; font-weight: 900; padding: 2px 0; }
.lb-empty { text-align: center; padding: 14px 6px; font-size: 14px; }
.lb-me { font-size: 13px; color: var(--muted); font-weight: 700; padding: 6px 4px 0; border-top: 1px solid var(--line); }
.lb-me b { color: var(--ink); }
.lb-sheet { display: flex; flex-direction: column; gap: 12px; padding-bottom: 6px; }
.lb-sheet h2 { margin: 0; font-size: 21px; }

/* строка рейтинга в итогах онлайн-матча */
.rrow.rating b.up { color: var(--ok); }
.rrow.rating b.down { color: var(--bad); }
.rrow.rating b.muted { font-size: 12.5px; font-weight: 800; color: var(--muted); text-align: right; max-width: 60%; }
.lb-row.idle { opacity: 0.62; }
.lb-note { font-size: 11.5px; line-height: 1.4; text-align: center; color: var(--muted); padding: 0 6px; }
.lb-note.warn { color: #b45309; font-weight: 800; }
:root[data-theme='dark'] .lb-note.warn { color: #fbbf24; }