/* «Хлыстопад» — раскладка и движение игры. Токены и компоненты — tokens.css и ui.css из утверждённого концепта. */

html, body { height: 100%; }
body { overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
[hidden] { display: none !important; }

.main { display: grid; grid-template-columns: minmax(0, 1fr) 448px; gap: 16px; padding: 8px 20px 20px; max-width: 1500px; margin: 0 auto; }
.main.solo { grid-template-columns: minmax(0, 1fr); max-width: 1060px; }
.stage { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.top { max-width: 1500px; margin: 0 auto; }

.ibtn { width: 40px; height: 40px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--brass-hi); background: rgba(169,155,255,.12); box-shadow: inset 0 0 0 2px rgba(169,155,255,.3); }
.ibtn:hover { background: rgba(169,155,255,.2); }
.ibtn.off { color: var(--text-mute); }

/* ---------- полоса волны ---------- */
.wavebar { display: flex; align-items: center; gap: 22px; padding: 10px 18px; }
.wavebar .w { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.wavebar .w b { font: 900 34px/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.wavebar .sub { font-size: 12px; color: var(--text-dim); margin-top: 7px; white-space: nowrap; }
.wavebar .sub b { color: var(--danger-soft); font-weight: 800; }
.wavebar .sp { flex: 1; }
.wavebar .rec { text-align: right; font-size: 12px; color: var(--text-dim); }
.wavebar .rec b { display: block; font: 800 20px/1 var(--display); color: var(--brass-hi); }
.seg span { cursor: pointer; }
.wavebar.boss .w b { color: var(--danger-soft); }
#btnBoss { animation: nudge 1.2s var(--ease-pop) infinite; }
@keyframes nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }

/* ---------- поле боя ---------- */
.field { height: min(500px, 56vh); min-height: 340px; background-position: center 52%; transition: background-image 600ms; cursor: none; touch-action: manipulation; user-select: none; }
.field canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.field .bankwrap { position: absolute; top: 16px; left: 18px; z-index: 6; padding: 14px 22px 12px 18px; border-radius: 22px; background: rgba(12,12,34,.55); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255,197,61,.18); pointer-events: none; transform-origin: 20% 50%; }
.field .bank { text-align: left; }
.field .bank .cap { justify-content: flex-start; }
.field .bank .cap img { width: 30px; height: 30px; }
.bank .num { font-variant-numeric: tabular-nums; }
.bankwrap.bump { animation: bump var(--t-fast) var(--ease-pop); }
.bankwrap.rays::before { content: ""; position: absolute; inset: -40px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 8%, rgba(255,229,143,.35) 8% 12%, transparent 12% 20%, rgba(255,229,143,.3) 20% 24%, transparent 24% 33%, rgba(255,229,143,.35) 33% 37%, transparent 37% 46%, rgba(255,229,143,.3) 46% 50%, transparent 50% 58%, rgba(255,229,143,.35) 58% 62%, transparent 62% 71%, rgba(255,229,143,.3) 71% 75%, transparent 75% 84%, rgba(255,229,143,.35) 84% 88%, transparent 88%); animation: rays 1.1s var(--ease-out) forwards; z-index: -1; }
@keyframes rays { 0% { opacity: 0; transform: scale(.4) rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5) rotate(50deg); } }
/* знак разряда: плашка под словом «млн», «квдр»… Материал говорит о масштабе. Само число всегда золотое. */
.bank .num .sfx { display: inline-block; padding: .08em .28em .12em; border-radius: .3em; -webkit-text-fill-color: currentColor; background: none; vertical-align: .12em; filter: none; }
.sfx.t0 { color: #2a1203; background: linear-gradient(180deg, #f6c79a, #d08a4e); box-shadow: 0 .12em 0 #7a4318; }
.sfx.t1 { color: #1c2230; background: linear-gradient(180deg, #f2f5fb, #aab4c8); box-shadow: 0 .12em 0 #6c7690; }
.sfx.t2 { color: #4a2600; background: linear-gradient(180deg, #fff0b0, #ffc53d); box-shadow: 0 .12em 0 #b86a00; }
.sfx.t3 { color: #fff; background: linear-gradient(180deg, #ff7d8f, #d2203f); box-shadow: 0 .12em 0 #7c0f24; }
.sfx.t4 { color: #fff; background: linear-gradient(180deg, #c79bff, #7a3fe0); box-shadow: 0 .12em 0 #3f1a8a, 0 0 .6em rgba(176,124,255,.7); }
.sfx.t5 { color: #ffe58f; background: #05050c; box-shadow: 0 0 0 .08em #ffe58f, 0 0 .8em rgba(255,229,143,.6); }
.sfx.flip { animation: flip 700ms var(--ease-pop); }
@keyframes flip { 0% { transform: scale(.2) rotate(-25deg); } 60% { transform: scale(1.5) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }

.field .unit { pointer-events: none; }
.field .enemy { right: 17%; bottom: 44px; width: min(250px, 30vh); z-index: 3; transform-origin: 50% 100%; }
.field .q1 { right: 6%; bottom: 120px; width: min(120px, 15vh); opacity: .85; filter: brightness(.65) saturate(.8); z-index: 2; }
.field .q2 { right: 1%; bottom: 140px; width: min(92px, 11vh); opacity: .6; filter: brightness(.5) saturate(.7); z-index: 1; }
.enemy.idle img { animation: breathe 2.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes breathe { 50% { transform: scaleY(1.03) scaleX(.985); } }
.enemy.sq { animation: sq 140ms var(--ease-pop); }
@keyframes sq { 0% { transform: scale(.88, 1.06); } 55% { transform: scale(1.06, .95); } 100% { transform: scale(1); } }
.enemy.die { animation: die 170ms ease-in forwards; }
@keyframes die { to { transform: scale(.55) translateY(10px); opacity: 0; } }
.enemy.enter { animation: enter 220ms var(--ease-pop); }
@keyframes enter { 0% { transform: translateX(120px) scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
.enemy.boss { width: min(330px, 40vh); right: 13%; bottom: 36px; }
.enemy.boss img { filter: drop-shadow(0 8px 10px rgba(5,6,20,.5)) drop-shadow(0 0 22px rgba(255,90,110,.55)); }
.enemy.bossin { animation: bossin 900ms var(--ease-pop); }
@keyframes bossin { 0% { transform: translateY(-140%) scale(1.25); opacity: 0; } 55% { transform: translateY(0) scale(1.12, .9); opacity: 1; } 75% { transform: scale(.96, 1.05); } 100% { transform: none; } }
.crown { position: absolute; left: 50%; top: -9%; width: 34%; aspect-ratio: 1.5; transform: translateX(-50%) rotate(-6deg); background: linear-gradient(180deg, #fff0b0, #ffc53d 60%, #e8890c); clip-path: polygon(0 100%, 0 20%, 22% 55%, 36% 0, 50% 50%, 64% 0, 78% 55%, 100% 20%, 100% 100%); filter: drop-shadow(0 3px 0 #7a4300); }

.field .plate-enemy { position: absolute; right: calc(17% - 20px); top: 22%; width: min(290px, 46%); z-index: 5; padding: 10px 12px; border-radius: 16px; background: rgba(12,12,34,.6); backdrop-filter: blur(4px); pointer-events: none; }
.plate-enemy .nameplate { justify-content: space-between; margin-bottom: 7px; color: var(--text); white-space: nowrap; }
.plate-enemy .nameplate .who2 { display: flex; gap: 6px; align-items: center; }
.plate-enemy .nameplate > span:last-child { color: var(--text-dim); }
.plate-enemy.boss { box-shadow: inset 0 0 0 2px rgba(255,90,110,.55); }
.hp > i { transition: width 90ms linear; }
.hp > em { transition: width 420ms ease-out 120ms; }

.field .stats { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; gap: 26px; align-items: center; justify-content: flex-end; padding: 12px 22px; background: linear-gradient(0deg, rgba(14,13,40,.92), rgba(14,13,40,0)); font-size: 12px; color: var(--text-dim); pointer-events: none; }
.field .stats b { font: 900 15px var(--ui); color: var(--text); margin-left: 5px; }

.lash { inset: 0; width: 100%; height: 100%; z-index: 5; opacity: 0; }
.lash.go { animation: lash 150ms ease-out; }
@keyframes lash { 0% { opacity: 1; stroke-dashoffset: 1; } 60% { opacity: 1; } 100% { opacity: 0; } }
.cursor { position: absolute; left: 0; top: 0; width: 52px; z-index: 9; pointer-events: none; filter: drop-shadow(0 4px 6px #000); will-change: transform; opacity: 0; }
.field:hover .cursor { opacity: 1; }
.cursor.snap { transition: none; }

/* подсказка первого удара */
.hint { position: absolute; right: calc(17% + 30px); top: 36%; z-index: 7; font: 900 44px/1 var(--display); color: #fff; letter-spacing: .02em; text-shadow: 0 4px 0 var(--outline), 3px 0 0 var(--outline), -3px 0 0 var(--outline), 0 -3px 0 var(--outline), 0 0 26px rgba(255,197,61,.8); animation: hint 900ms var(--ease-pop) infinite; pointer-events: none; }
@keyframes hint { 0%, 100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.14) rotate(-4deg); } }

/* числа урона и души */
#pops { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.pop.anim { animation: rise 520ms var(--ease-out) forwards; }
@keyframes rise { 0% { opacity: 0; translate: 0 6px; scale: 1.5; } 16% { opacity: 1; translate: 0 0; scale: 1; } 60% { opacity: 1; } 100% { opacity: 0; translate: var(--dx, 0) -64px; scale: .9; } }
.pop.crit.anim { animation-duration: 700ms; }
.pop.soul.anim { animation-duration: 800ms; }
.pop.big { font-size: 30px; }
.orb { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; z-index: 7; pointer-events: none; filter: drop-shadow(0 0 10px var(--farm-glow)); animation: orbin 300ms var(--ease-pop), orbbob 900ms ease-in-out 300ms infinite; }
.orb.big { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
.orb.out { transition: opacity 260ms, transform 260ms; opacity: 0; transform: translateY(-34px) scale(.6); }
@keyframes orbin { 0% { transform: scale(.2); } 100% { transform: scale(1); } }
@keyframes orbbob { 50% { transform: translateY(-7px) scale(1.06); } }
.fly { z-index: 7; pointer-events: none; }

/* комбо */
.combo { position: absolute; left: 24px; top: 156px; z-index: 6; display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; transform-origin: 0 0; }
.combo b { font: 900 46px/1 var(--display); color: #fff; text-shadow: 0 4px 0 var(--outline), 3px 0 0 var(--outline), -3px 0 0 var(--outline), 0 -3px 0 var(--outline); font-variant-numeric: tabular-nums; }
.combo b::before { content: "×"; font-size: .55em; margin-right: 2px; opacity: .8; }
.combo span { margin-top: 2px; padding: 4px 10px; border-radius: 999px; font: 900 11px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--on-brass); background: var(--brass-hi); }
.combo.t0 b { color: #ffe9b8; } .combo.t0 span { background: #ffe9b8; color: #4a2600; }
.combo.t1 b { color: #ffc53d; } .combo.t1 span { background: #ffc53d; color: #4a2600; }
.combo.t2 b { color: #ff8a4c; } .combo.t2 span { background: #ff8a4c; color: #3a0e00; }
.combo.t3 b { color: #ff5a6e; } .combo.t3 span { background: #ff5a6e; color: #fff; }
.combo.t4 b { color: #fff; text-shadow: 0 4px 0 #b86a00, 0 0 24px #ffc53d, 3px 0 0 #b86a00, -3px 0 0 #b86a00; } .combo.t4 span { background: linear-gradient(180deg, #fff0b0, #ffc53d); color: #4a2600; }
.combo.pulse b { animation: cpulse 110ms var(--ease-pop); }
@keyframes cpulse { 0% { transform: scale(1.22); } 100% { transform: scale(1); } }
.combo.stamp span { animation: stamp 260ms var(--ease-pop); }
@keyframes stamp { 0% { transform: scale(2.6) rotate(-10deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* таймер босса */
.bossring { position: absolute; right: calc(17% + min(290px, 46%) - 4px); top: calc(22% - 6px); z-index: 6; pointer-events: none; }
.bossring.hot { animation: hot 500ms ease-in-out infinite; }
@keyframes hot { 50% { transform: scale(1.12); } }

/* титры */
.banner { position: absolute; left: 0; right: 0; top: 38%; z-index: 8; text-align: center; pointer-events: none; opacity: 0; }
.banner b { display: inline-block; font: 900 40px/1.05 var(--display); color: #fff; text-shadow: 0 5px 0 var(--outline), 3px 0 0 var(--outline), -3px 0 0 var(--outline), 0 -3px 0 var(--outline), 0 0 30px rgba(169,155,255,.7); }
.banner small { display: block; margin-top: 8px; font: 800 14px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-hi); text-shadow: 0 2px 0 var(--outline); }
.banner.show { animation: banner var(--dur, 1400ms) var(--ease-out) forwards; }
@keyframes banner { 0% { opacity: 0; transform: scale(2.2); } 12% { opacity: 1; transform: scale(.94); } 20% { transform: scale(1); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.06) translateY(-14px); } }
.banner.boss b { color: #ffd0d6; text-shadow: 0 5px 0 #4a0714, 3px 0 0 #4a0714, -3px 0 0 #4a0714, 0 -3px 0 #4a0714, 0 0 34px rgba(255,90,110,.9); }
.banner.gold b { color: #ffe58f; text-shadow: 0 5px 0 #6a3500, 3px 0 0 #6a3500, -3px 0 0 #6a3500, 0 -3px 0 #6a3500, 0 0 34px rgba(255,197,61,.9); }
.banner.wave b { font-size: 22px; }
.field.dark::before { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse at 60% 55%, transparent 20%, rgba(8,6,24,.72) 90%); animation: darkin 500ms ease-out; pointer-events: none; }
@keyframes darkin { from { opacity: 0; } }
.field.shake { animation: shake var(--shk, 150ms) linear; }
@keyframes shake { 0%, 100% { transform: translate(0); } 20% { transform: translate(var(--amp, 3px), calc(var(--amp, 3px) * -1)); } 40% { transform: translate(calc(var(--amp, 3px) * -1), var(--amp, 3px)); } 60% { transform: translate(var(--amp, 3px), var(--amp, 3px)); } 80% { transform: translate(calc(var(--amp, 3px) * -1), 0); } }
.field.flash::after { animation: flash 180ms ease-out; }
@keyframes flash { 0% { background: rgba(255,255,255,.5); } 100% { background: rgba(255,255,255,0); } }

/* прорыв: скоростные полосы */
.skyline { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 300ms; background: repeating-linear-gradient(100deg, transparent 0 46px, rgba(255,255,255,.07) 46px 50px, transparent 50px 120px, rgba(169,155,255,.1) 120px 123px); background-size: 400px 100%; }
.field.rush .skyline { opacity: 1; animation: streak 260ms linear infinite; }
@keyframes streak { to { background-position: -400px 0; } }

/* огонёк */
.field .wisp { z-index: 7; cursor: none; pointer-events: auto; }
.wisp.in { animation: wispin 500ms var(--ease-pop); }
@keyframes wispin { 0% { transform: scale(0) rotate(-40deg); } 100% { transform: none; } }

/* Душка */
.dushka { position: absolute; left: 14px; bottom: 6px; z-index: 8; display: flex; align-items: flex-end; gap: 8px; pointer-events: none; }
.dushka img { flex: none; width: 66px; height: auto; filter: drop-shadow(0 6px 8px rgba(5,6,20,.6)); animation: bob 2.6s ease-in-out infinite; }
.dushka.cheer img { animation: cheer 500ms var(--ease-pop) 2; }
@keyframes cheer { 50% { transform: translateY(-16px) rotate(8deg); } }
.say { position: relative; max-width: min(340px, 56vw); margin-bottom: 26px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; font: 800 13.5px/1.35 var(--ui); color: #1a1440; background: #fff; box-shadow: 0 4px 0 #b9b1e6, 0 10px 20px rgba(5,6,20,.5); animation: sayin 300ms var(--ease-pop); }
.say b { display: block; margin-bottom: 3px; font: 900 10px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #6a5acd; }
@keyframes sayin { 0% { transform: scale(.4) translateY(10px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- низ: умения и «Дальше» ---------- */
.lower { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; }
.skillbar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; min-height: 112px; }
.skillbar .sk { display: flex; flex-direction: column; align-items: center; }
.skill { cursor: pointer; transition: transform var(--t-fast) var(--ease-pop); }
.skill:active { transform: translateY(3px); }
.skill.lock { cursor: default; filter: saturate(.2) brightness(.6); }
.skill.lock img { opacity: .35; }
.skill .lk { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font: 900 10px/1.15 var(--ui); color: var(--text-dim); }
.skill.ready { animation: ready 1.4s ease-in-out infinite; }
@keyframes ready { 50% { box-shadow: 0 4px 0 #0f1130, inset 0 0 0 2px var(--brass-hi), 0 0 18px rgba(169,155,255,.6); } }
.buffs { margin-left: auto; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-dim); }
.buffs span { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(10,10,30,.4); white-space: nowrap; }
.buffs span i { width: 8px; height: 8px; border-radius: 50%; background: var(--farm); box-shadow: 0 0 8px var(--farm-glow); }
.buffs b { color: var(--text); font-weight: 900; }
.events { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.nextline { font: 800 13.5px/1.35 var(--ui); color: var(--text); min-height: 36px; }
.btn.rebirth { position: relative; overflow: hidden; width: 100%; color: #2a1206; background: linear-gradient(180deg, #ffd9c2, var(--ember)); box-shadow: 0 4px 0 #a8431a, 0 8px 16px rgba(40,10,0,.45), inset 0 2px 0 rgba(255,255,255,.55); }
.btn.rebirth .fill { position: absolute; inset: 0; width: var(--p, 0%); background: rgba(255,255,255,.55); }
.btn.rebirth .lbl { position: relative; }
.btn.rebirth.weak { filter: saturate(.3) brightness(.8); }

/* ---------- правая колонка ---------- */
.side { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 96px); position: sticky; top: 8px; align-self: start; }
.side .pane { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.side .head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; }
.side .list { flex: 1; overflow-y: auto; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
.side .foot { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); }
.side .foot b { color: var(--text); }
.tab { cursor: pointer; }
.merc.whip .por { background: radial-gradient(circle, #5a4a8a, #262a5c); }
.merc.whip .por img { object-fit: contain; padding: 6px; }
.merc .por img { object-position: 50% 12%; }
.merc.pulse { animation: mpulse 260ms var(--ease-pop); }
@keyframes mpulse { 0% { transform: scale(1.03); background: rgba(169,155,255,.18); } 100% { transform: none; } }
.merc .stampx { position: absolute; right: 130px; font: 900 26px/1 var(--display); color: #ffe58f; text-shadow: 0 3px 0 #6a3500, 0 0 16px rgba(255,197,61,.9); animation: stamp 320ms var(--ease-pop), fadeout 500ms 900ms forwards; pointer-events: none; }
@keyframes fadeout { to { opacity: 0; transform: translateY(-14px); } }
.merc { position: relative; }
.buy { cursor: pointer; border: 0; transition: transform 80ms; font: inherit; }
.buy:active { transform: translateY(3px); }
.buy.off { cursor: default; }
.buy .price img { width: 18px; height: 18px; }
.merc.teaser { opacity: .55; }
.merc.teaser .por { display: flex; align-items: center; justify-content: center; font: 900 22px var(--display); color: var(--text-mute); }

.rebox { margin: 12px 12px 4px; padding: 14px; border-radius: var(--r-4); background: linear-gradient(180deg, rgba(255,138,76,.16), rgba(255,138,76,.05)); box-shadow: inset 0 0 0 2px rgba(255,138,76,.3); font-size: 13px; color: var(--text-dim); }
.rebox b { color: var(--text); }
.rebox .big { font: 900 24px/1.1 var(--display); color: var(--ember); margin: 4px 0 6px; }
.relics { flex: 1; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 12px 14px; align-content: start; scrollbar-width: thin; }
.relic { padding: 10px; border-radius: var(--r-3); background: rgba(10,10,30,.35); box-shadow: inset 0 0 0 1px var(--line); display: grid; grid-template-columns: 44px 1fr; gap: 4px 10px; align-items: center; }
.relic img { width: 44px; height: 44px; object-fit: contain; grid-row: span 2; }
.relic h4 { font: 800 13px/1.1 var(--display); }
.relic h4 small { font: 800 11px var(--ui); color: var(--brass); margin-left: 4px; }
.relic p { font-size: 11.5px; color: var(--text-dim); line-height: 1.25; }
.relic button { grid-column: span 2; padding: 7px 8px; border-radius: var(--r-2); font: 900 12px/1 var(--ui); color: #2a1206; background: linear-gradient(180deg, #f1ecff, var(--ash)); box-shadow: 0 3px 0 #7d7799; display: flex; align-items: center; justify-content: center; gap: 6px; }
.relic button img { width: 16px; height: 16px; grid-row: auto; }
.relic button.off { color: var(--text-mute); background: #2b2f5e; box-shadow: 0 3px 0 #15173a; cursor: default; }

/* ---------- окна ---------- */
.veil { position: fixed; inset: 0; z-index: 40; background: rgba(6,6,20,.7); backdrop-filter: blur(3px); animation: darkin 200ms; }
.modal { position: fixed; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); padding: 22px; border-radius: var(--r-5); background: linear-gradient(180deg, #2a2e60, #1c1f43); box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 2px rgba(169,155,255,.25); animation: modalin 320ms var(--ease-pop); }
@keyframes modalin { 0% { transform: translate(-50%, -40%) scale(.8); opacity: 0; } }
.modal h2 { font: 900 22px/1.1 var(--display); margin-bottom: 10px; }
.modal p { color: var(--text-dim); font-size: 14px; margin-bottom: 8px; }
.modal .bignum { font: 900 34px/1.1 var(--display); color: var(--farm); margin: 8px 0 4px; filter: drop-shadow(0 3px 0 #6a3500); }
.modal .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(49,54,107,.8); font-size: 14px; }
.modal .acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.sw { width: 46px; height: 26px; border-radius: 999px; background: var(--surface-3); position: relative; flex: none; }
.sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 140ms var(--ease-pop); }
.sw.on { background: var(--stream-deep); }
.sw.on::after { transform: translateX(20px); }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 50; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 18px; font: 800 13px/1.3 var(--ui); text-align: center; color: #1a1440; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.5); animation: sayin 260ms var(--ease-pop); }

/* возрождение: мир выгорает в пепел */
.ashfx { position: fixed; inset: 0; z-index: 60; pointer-events: none; display: flex; align-items: center; justify-content: center; flex-direction: column; background: radial-gradient(circle at 50% 50%, rgba(10,8,14,0) var(--r, 100%), #0a080e calc(var(--r, 100%) + 12%)); }
.ashfx .n { font: 900 54px/1 var(--display); color: var(--ember); text-shadow: 0 0 30px rgba(255,138,76,.8); opacity: 0; }
.ashfx .l { margin-top: 10px; font: 800 13px/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ash); opacity: 0; }
.ashfx.num .n, .ashfx.num .l { opacity: 1; transition: opacity 300ms; }

/* ---------- спокойный режим ---------- */
.calm .field.shake, .calm .field.flash::after, .calm .bankwrap.rays::before { animation: none !important; }
.calm .field.rush .skyline { animation: none; opacity: .35; }
@media (prefers-reduced-motion: reduce) { .field.shake { animation: none !important; } }

/* ---------- планшет и телефон ---------- */
@media (max-width: 1180px) {
  .main { grid-template-columns: minmax(0, 1fr); padding: 8px 12px 16px; }
  .side { position: static; max-height: none; height: 640px; }
  .top { grid-template-columns: auto 1fr auto; padding: 0 12px; }
}
@media (max-width: 720px) {
  .top { height: 54px; gap: 8px; grid-template-columns: 1fr auto; }
  .logo h1 { font-size: 17px; }
  .top .right { gap: 6px; }
  .top .chip { height: 36px; padding: 0 10px 0 5px; }
  .top .chip .l { display: none; }
  .ibtn { width: 36px; height: 36px; border-radius: 12px; }
  .logo small, .top .mid { display: none; }
  .logo .mark { width: 32px; height: 32px; }
  .wavebar { gap: 12px; padding: 8px 12px; flex-wrap: wrap; }
  .wavebar .w b { font-size: 26px; }
  .wavebar .wavemid { order: 5; flex: 1 1 100%; }
  .wavebar .rec { display: none; }
  .field { height: 46vh; min-height: 300px; border-radius: var(--r-4); cursor: default; }
  .field .cursor { display: none; }
  .field .bankwrap { top: 10px; left: 10px; padding: 10px 14px 8px 12px; border-radius: 16px; }
  .bank .num { font-size: 34px; }
  .field .enemy { right: 9%; width: 42vw; max-width: 210px; bottom: 40px; }
  .field .enemy.boss { right: 5%; width: 54vw; max-width: 270px; }
  .field .q1 { right: 0; width: 20vw; bottom: 110px; }
  .field .q2 { display: none; }
  .field .plate-enemy { right: 5%; top: 30%; width: 56%; }
  .bossring { right: 62%; top: calc(30% - 12px); transform: scale(.8); }
  .hint { right: 22%; top: 44%; font-size: 34px; }
  .field .stats { gap: 14px; padding: 10px 12px; font-size: 11px; }
  .combo { top: 112px; left: 14px; }
  .field .stats b { font-size: 13px; }
  .combo b { font-size: 34px; }
  .banner b { font-size: 28px; }
  .lower { grid-template-columns: minmax(0, 1fr); }
  .skillbar { gap: 8px; padding: 10px; overflow-x: auto; min-height: 96px; }
  .skill { width: 56px; height: 56px; }
  .buffs { display: none; }
  .merc { grid-template-columns: 48px 1fr auto; gap: 9px; padding: 8px; }
  .merc .por { width: 48px; height: 48px; }
  .buy { min-width: 96px; }
  .relics { grid-template-columns: 1fr; }
  .say { max-width: 62vw; font-size: 12.5px; }
}

/* ---------- выбор предмета после босса ---------- */
.draft { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(8,8,26,.66); backdrop-filter: blur(2px); animation: darkin 220ms; }
.draft h3 { font: 900 24px/1 var(--display); color: #fff; text-shadow: 0 4px 0 var(--outline); }
.draft .more { font: 800 12px/1 var(--ui); color: var(--text-dim); }
.draft .dhint { min-height: 16px; margin: -6px 0 -2px; font: 800 12.5px/16px var(--ui); color: var(--farm); text-shadow: 0 2px 0 var(--outline); }
.draft.lock .dcard { pointer-events: none; filter: saturate(.45) brightness(.7); }
.dcards { display: flex; gap: 14px; }
.dcard { width: 172px; padding: 14px 12px 12px; border-radius: 22px; text-align: center; color: var(--text); background: linear-gradient(180deg, #2f3370, #1c1f43); box-shadow: 0 6px 0 #0f1130, 0 14px 30px rgba(0,0,0,.5), inset 0 0 0 3px var(--bc); animation: dcin 320ms var(--ease-pop) both; transition: transform 140ms var(--ease-pop), box-shadow 140ms, filter 200ms; }
.dcard:hover { transform: translateY(-10px) scale(1.05); box-shadow: 0 6px 0 #0f1130, 0 0 34px var(--bc), inset 0 0 0 3px var(--bc); }
.dcard:active { transform: translateY(-2px) scale(.98); }
.dcard img { width: 88px; height: 88px; object-fit: contain; margin: 0 auto 8px; filter: drop-shadow(0 6px 8px rgba(5,6,20,.6)); }
.dcard h4 { font: 800 13.5px/1.15 var(--display); min-height: 31px; display: flex; align-items: center; justify-content: center; }
.dcard .br { display: inline-block; margin: 6px 0; padding: 3px 9px; border-radius: 999px; font: 900 9.5px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: #14122e; background: var(--bc); }
.dcard p { font: 700 12.5px/1.25 var(--ui); color: var(--text-dim); min-height: 47px; }
.dcard .rk { display: block; margin-top: 6px; font: 900 11px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--farm); }
@keyframes dcin { 0% { transform: translateY(60px) rotate(8deg) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- вкладка «Предметы» ---------- */
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 12px 4px; }
.slot { position: relative; aspect-ratio: 1; border-radius: var(--r-3); background: rgba(10,10,30,.4); box-shadow: inset 0 0 0 2px var(--bc, var(--line)); display: flex; align-items: center; justify-content: center; }
.slot img { width: 72%; height: 72%; object-fit: contain; }
.slot b { position: absolute; right: 6px; bottom: 4px; font: 900 13px/1 var(--display); color: #fff; text-shadow: 0 2px 0 var(--outline); }
.slot.empty { box-shadow: inset 0 0 0 2px rgba(169,155,255,.18); background: repeating-linear-gradient(45deg, rgba(169,155,255,.05) 0 8px, transparent 8px 16px); }
.slot.locked { opacity: .5; }
.slot.locked img { width: 46%; height: 46%; }
.branches { padding: 6px 12px 14px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.branch { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--r-3); background: rgba(10,10,30,.35); box-shadow: inset 3px 0 0 var(--bc); font-size: 12.5px; color: var(--text-dim); }
.branch img { width: 40px; height: 40px; object-fit: contain; }
.branch b { color: var(--text); font: 800 13px var(--ui); }
.branch span { font-size: 11.5px; }

/* значки бафов и замок на закрытых умениях */
.buffs span img { width: 18px; height: 18px; object-fit: contain; }
.skill .lki { display: none; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); z-index: 2; }
.skill.lock .lki { display: block; opacity: 1; }
.skill.lock img:not(.lki) { opacity: .22; }

@media (max-width: 720px) {
  .dcards { gap: 6px; width: 100%; padding: 0 8px; justify-content: center; }
  .dcard { flex: 1 1 0; min-width: 0; width: auto; max-width: 132px; padding: 10px 5px 8px; border-radius: 16px; }
  .dcard img { width: 56px; height: 56px; }
  .dcard h4 { font-size: 10.5px; min-height: 26px; }
  .dcard p { font-size: 10.5px; min-height: 52px; }
  .draft h3 { font-size: 18px; }
}

/* ---------- всё видно сразу: закрытое показано с условием ---------- */
.pad { padding: 12px 14px 4px; }
.pane.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
.seg span.lockd { opacity: .4; cursor: default; }
.side { height: calc(100vh - 96px); min-height: 520px; }
#paneSquad { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
#paneSquad .head { position: sticky; top: 0; z-index: 3; background: #22254f; }
#paneSquad .foot { position: sticky; bottom: 0; z-index: 3; background: #1c1f43; margin-top: auto; }
.side .list { flex: none; overflow: visible; }
.rosterbox { flex: none; padding-bottom: 8px; }
.pane.scroll > * { flex: none; }
.branches { overflow: visible; }
.relics { flex: 1 1 0; }
.merc.soon { opacity: .62; grid-template-columns: 46px 1fr auto; padding: 6px 12px; }
.merc.soon .por { width: 46px; height: 46px; }
.merc.soon .por img { filter: grayscale(.7) brightness(.6); }
.merc.soon .price img { width: 16px; height: 16px; }
.roster { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; padding: 4px 14px 8px; }
.rt { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #20234c; box-shadow: inset 0 0 0 1px var(--line); }
.rt img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; filter: grayscale(1) brightness(.38); }
.rt span { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; font: 900 8px/1 var(--ui); color: var(--text-mute); }
.relics.shut .relic { opacity: .55; }
.btn.rebirth.weak { cursor: default; }

/* коллекция предметов: редкость — цвет рамки */
.coll { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 6px 12px; }
.ctile { position: relative; aspect-ratio: 1; border-radius: 12px; background: rgba(10,10,30,.45); box-shadow: inset 0 0 0 2px var(--rc); display: flex; align-items: center; justify-content: center; }
.ctile img { width: 76%; height: 76%; object-fit: contain; }
.ctile.never img:not(.lk) { filter: grayscale(1) brightness(.45); }
.ctile .lk { position: absolute; right: 2px; top: 2px; width: 36%; height: 36%; filter: none; }
.ctile .q { font: 900 22px/1 var(--display); color: var(--rc); text-shadow: 0 0 12px var(--rc); }
.ctile .st { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; font: 900 7.5px/1 var(--ui); letter-spacing: -.02em; color: var(--farm); text-shadow: 0 1px 0 #000; }
.ctile.sel { box-shadow: inset 0 0 0 3px #fff, 0 0 14px var(--rc); }
.ctile.rar-l { background: radial-gradient(circle, rgba(255,197,61,.22), rgba(10,10,30,.45)); }
.ctile.rar-x { background: radial-gradient(circle, rgba(255,122,217,.22), rgba(10,10,30,.45)); }
.colldet { margin: 6px 12px 14px; padding: 10px 12px; border-radius: var(--r-3); background: rgba(10,10,30,.35); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; color: var(--text-dim); }
.colldet .dh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.colldet .dh b { font: 800 14px/1.1 var(--display); }
.colldet .dh span { font: 800 10px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.colldet .how { color: var(--brass-hi); margin-top: 4px; }
.colldet .stl { color: var(--farm); margin-top: 4px; font-weight: 800; }
.dcard.rar-l { background: linear-gradient(180deg, #5a4a1a, #2a2040); }
.dcard.rar-x { background: linear-gradient(180deg, #5a1f52, #24183f); }
.dcard.rar-l .rk, .dcard.rar-x .rk { color: var(--bc); }
.dcard.rar-r { box-shadow: 0 6px 0 #0f1130, 0 14px 30px rgba(0,0,0,.5), inset 0 0 0 3px var(--bc), 0 0 0 2px rgba(77,163,255,.5); }

/* путь */
.road { padding: 0 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.rd { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 8px 10px; border-radius: var(--r-3); background: rgba(10,10,30,.35); box-shadow: inset 0 0 0 1px var(--line); }
.rd i { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 900 13px/1 var(--ui); font-style: normal; background: var(--surface-3); color: var(--on-stream); }
.rd b { font: 800 13.5px/1.1 var(--ui); color: var(--text); }
.rd span { margin-left: 8px; font: 800 10px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--brass); }
.rd p { margin-top: 3px; font-size: 12px; color: var(--text-dim); line-height: 1.3; }
.rd.done { opacity: .7; }
.rd.done i { background: var(--stream); }
.rd.cur { box-shadow: inset 0 0 0 2px var(--farm), 0 0 16px rgba(255,197,61,.25); }
.rd.cur span { color: var(--farm); }
.rd:not(.done):not(.cur) p { filter: blur(0); color: var(--text-mute); }
.rd.soon { opacity: .6; border: 1px dashed var(--line-brass); box-shadow: none; }

/* чат */
.chatbox { flex: 1; min-height: 420px; margin: 8px; border-radius: var(--r-3); overflow: hidden; background: #0e0e10; }
.chatbox iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }

/* стрим Twitch фоном линии: плеер под игрой, клики идут в игру. Как выглядит поле со стримом — в конце файла */
.twbg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #000; pointer-events: none; }
.twbg #twplayer { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.twbg iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.ibtn.tw.on { color: #fff; background: #9146ff; box-shadow: 0 3px 0 #5a23b3, 0 0 14px rgba(145,70,255,.6); }
.ibtn.tw.off { opacity: .5; }

@media (max-width: 720px) {
  .roster { grid-template-columns: repeat(6, 1fr); }
  .coll { grid-template-columns: repeat(6, 1fr); }
  .side { height: auto; min-height: 0; }
  #paneSquad { max-height: 560px; }
  .pane.scroll { max-height: 640px; }
  .tab { padding: 9px 3px; font-size: 11px; }
}

.twplay { position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); z-index: 9; color: #fff; background: linear-gradient(180deg, #b48cff, #9146ff); box-shadow: 0 4px 0 #5a23b3, 0 8px 18px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.4); cursor: pointer; animation: nudge 1.4s var(--ease-pop) infinite; }
.twback { position: absolute; right: 14px; top: 14px; z-index: 31; background: rgba(12,12,34,.8); cursor: pointer; }
.field.twfront { cursor: default; }
.field.twfront .twbg { z-index: 30; pointer-events: auto; }
.field.twfront .twbg iframe { pointer-events: auto; }
.field.twfront .cursor { display: none; }

/* ---------- события на линии: ящик, статуя, урна, жертвенник, элита, слабое место ---------- */
.lnobj { position: absolute; z-index: 7; pointer-events: auto; cursor: none; -webkit-user-drag: none; filter: drop-shadow(0 8px 10px rgba(5,6,20,.6)); }
.lnobj.crate { left: 21%; bottom: 50px; width: min(92px, 12.5vh); animation: bob 2.2s ease-in-out infinite; }
.lnobj.crate, .lnobj.statue { transition: bottom 220ms var(--ease-out); }
.field.saying .lnobj.crate, .field.saying .lnobj.statue { bottom: var(--sayh, 120px); }
.lnobj.crate.in { animation: cratein 460ms var(--ease-pop), bob 2.2s ease-in-out 460ms infinite; }
@keyframes cratein { 0% { transform: translateY(-260px) rotate(-18deg); opacity: 0; } 70% { transform: translateY(0) scale(1.12, .86); opacity: 1; } 100% { transform: none; } }
.lnobj.statue { bottom: 52px; width: min(96px, 13vh); filter: drop-shadow(0 0 16px rgba(255,197,61,.9)) drop-shadow(0 8px 10px rgba(5,6,20,.6)); }
.lnobj.statue.in { animation: wispin 500ms var(--ease-pop); }
.lnobj.statue.hurry { animation: blink .5s infinite; }
.lnobj.urn { width: min(92px, 12.5vh); margin-left: -46px; filter: drop-shadow(0 0 14px rgba(127,224,191,.8)) drop-shadow(0 8px 10px rgba(5,6,20,.6)); }
.lnobj.urn.hit { animation: urnhit 160ms ease-out; }
@keyframes urnhit { 0% { transform: scale(.86) rotate(-8deg); } 100% { transform: none; } }
.enemy .weak { position: absolute; z-index: 2; width: 29%; aspect-ratio: 1; margin: -14.5% 0 0 -14.5%; background: center / contain no-repeat; pointer-events: none; animation: weakspin 3s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255,90,160,.9)); }
.enemy .weak.in { animation: weakin 260ms var(--ease-pop), weakspin 3s ease-in-out 260ms infinite; }
@keyframes weakspin { 50% { transform: scale(1.12) rotate(8deg); } }
@keyframes weakin { 0% { transform: scale(2.2); opacity: 0; } 100% { transform: none; opacity: 1; } }
#fxl { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.fxi { position: absolute; pointer-events: none; animation: fxi 240ms ease-out forwards; }
.fxi.puff { animation: fxpuff 420ms ease-out forwards; }
.fxi.shock { animation: fxshock 420ms ease-out forwards; }
@keyframes fxi { 0% { transform: scale(.4) rotate(-12deg); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(1.25) rotate(6deg); opacity: 0; } }
@keyframes fxpuff { 0% { transform: scale(.5); opacity: .95; } 100% { transform: scale(1.3) translateY(-18px); opacity: 0; } }
@keyframes fxshock { 0% { transform: scale(.3, .2); opacity: 1; } 100% { transform: scale(1.5, 1); opacity: 0; } }
.field .enemy.elite { width: min(290px, 35vh); }
.field .enemy.elite img { filter: drop-shadow(0 8px 10px rgba(5,6,20,.5)) drop-shadow(0 0 18px rgba(255,197,61,.85)); }
.field .enemy.altar { width: min(290px, 35vh); }
.field .enemy.altar img { filter: drop-shadow(0 8px 10px rgba(5,6,20,.5)) drop-shadow(0 0 22px rgba(255,197,61,.9)); }
.plate-enemy.gold { box-shadow: inset 0 0 0 2px rgba(255,197,61,.6), 0 0 18px rgba(255,197,61,.25); }
.bossring.gold #bossArc { stroke: #ffc53d; }
.field.tallbg { background-position: center 78%; }
@media (max-width: 720px) {
  .lnobj.crate { left: 19%; width: 62px; bottom: 44px; }
  .lnobj.statue { width: 66px; bottom: 46px; }
  .lnobj.urn { width: 62px; margin-left: -31px; }
  .field .enemy.elite, .field .enemy.altar { width: 48vw; max-width: 240px; }
}

/* ---------- настройки: сохранение, прежние игры, стирание ---------- */
.modal { max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
.modal .row > span:first-child { min-width: 0; }
.btn.sm { padding: 7px 12px; font-size: 12.5px; border-radius: 10px; flex: none; box-shadow: inset 0 0 0 2px rgba(169,155,255,.35); }
.modal .acts.split { justify-content: space-between; align-items: center; }
.btn.danger { color: #ffd0d6; background: rgba(255,90,110,.1); box-shadow: inset 0 0 0 2px rgba(255,90,110,.4); }
.btn.hold { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.btn.hold .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,90,110,.5); }
.btn.hold.holding .fill { width: 100%; transition: width 3s linear; }
.btn.hold .lbl { position: relative; }
.note.err { color: #ff8a98; }
.modal p b { color: var(--text); }

/* ---------- таблица рекордов ---------- */
.topbox { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.topbox .note.pad { padding: 6px 2px; }
.topform { padding: 12px; border-radius: var(--r-3); background: rgba(10,10,30,.35); box-shadow: inset 0 0 0 1px var(--line); }
.topform > b { font: 800 15px/1.2 var(--display); }
.topform p { margin: 6px 0 8px; font-size: 12.5px; color: var(--text-dim); }
.topin { display: flex; gap: 8px; }
.topin input { flex: 1; min-width: 0; padding: 9px 12px; border: 0; border-radius: 10px; font: 800 14px var(--ui); color: var(--text); background: rgba(10,10,30,.6); box-shadow: inset 0 0 0 2px rgba(169,155,255,.3); }
.topin input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--farm); }
.topin .btn.sm { box-shadow: 0 3px 0 #b86a00; padding: 9px 14px; }
.linkbtn { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--brass-hi); font: 800 12px var(--ui); text-decoration: underline; cursor: pointer; }
.trow { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 12px; background: rgba(10,10,30,.35); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; }
.trow i { font: 900 13px/1 var(--ui); font-style: normal; color: var(--text-mute); text-align: center; }
.trow i img { width: 26px; height: 26px; display: block; margin: 0 auto; object-fit: contain; }
.trow b { min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow b small { display: block; margin-top: 3px; font-weight: 700; font-size: 11px; color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; }
.trow span { display: inline-flex; align-items: center; gap: 5px; font: 900 14px/1 var(--ui); color: var(--farm); white-space: nowrap; }
.trow span img { width: 18px; height: 18px; object-fit: contain; }
.topfoot b { color: var(--farm); font-weight: 900; }
.trow.me { box-shadow: inset 0 0 0 2px var(--farm), 0 0 14px rgba(255,197,61,.2); }
.topfoot { margin: 4px 2px 2px; font-size: 12.5px; color: var(--text-dim); display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.topfoot .linkbtn { margin-top: 0; }

/* ---------- микрообучение ---------- */
.intro { text-align: center; padding-top: 4px; }
.intro img { display: block; width: 104px; height: 104px; margin: 0 auto 12px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(5,6,20,.6)); animation: bob 2.4s ease-in-out infinite; }
.intro .dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; }
.intro .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); }
.intro .dots i.on { width: 22px; border-radius: 999px; background: var(--farm); }
.modal .intro h2 { margin-bottom: 8px; }
.modal .intro p { font-size: 15px; line-height: 1.45; color: var(--text); margin-bottom: 4px; }

/* ---------- вход через Twitch и обменник ---------- */
button.chip { border: 0; cursor: pointer; color: inherit; font: inherit; }
button.chip.stream:hover { filter: brightness(1.12); }
.chip.stream .v { font-size: 15px; }
.btn.twitch { display: inline-flex; align-items: center; gap: 8px; color: #fff; background: linear-gradient(180deg, #b48cff, #9146ff); box-shadow: 0 4px 0 #5a23b3, 0 8px 16px rgba(40,10,90,.4), inset 0 2px 0 rgba(255,255,255,.3); text-decoration: none; }
.btn.twitch.sm { box-shadow: 0 3px 0 #5a23b3; padding: 8px 12px; }
.btn.twitch.who { height: 40px; max-width: 190px; }
.btn.twitch.who .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.twitch.who.in { color: #e6d9ff; background: rgba(145,70,255,.16); box-shadow: inset 0 0 0 2px rgba(145,70,255,.55); }
.lcard { padding: 12px; border-radius: var(--r-3); background: rgba(145,70,255,.1); box-shadow: inset 0 0 0 1px rgba(145,70,255,.45); }
.lcard > b { display: block; font: 800 15px/1.2 var(--display); }
.lcard p { margin: 6px 0 10px; font-size: 12.5px; line-height: 1.4; color: var(--text-dim); }
.lcard .code { margin: 2px 0 10px; font: 900 26px/1 var(--display); letter-spacing: .14em; color: #fff; text-shadow: 0 0 18px rgba(145,70,255,.8); }
.lcard .lrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lcard .lrow .linkbtn { margin-top: 0; }
.lcard .note { margin: 10px 0 0; }
.swapbox { display: flex; flex-direction: column; gap: 10px; }
.swapbox > p { margin: 0; }
.swhead { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
.swhead img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(95,242,196,.5)); }
.swhead b { display: block; font: 800 17px/1.2 var(--display); color: var(--stream); }
.swhead span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: var(--text-dim); }
.swbar { height: 10px; border-radius: 999px; background: rgba(10,10,30,.6); box-shadow: inset 0 0 0 1px rgba(95,242,196,.25); overflow: hidden; }
.swbar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #16b48a, var(--stream)); }
.swprice { padding: 12px 14px; border-radius: var(--r-3); background: rgba(10,10,30,.4); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 4px; }
.swprice span { font-size: 12.5px; color: var(--text-dim); }
.swprice b { display: flex; align-items: center; gap: 8px; font: 900 28px/1.1 var(--display); color: var(--farm); filter: drop-shadow(0 3px 0 #6a3500); }
.swprice b img { width: 30px; height: 30px; object-fit: contain; }
.swapbox .acts { margin-top: 2px; }
.swlast { display: grid; gap: 4px; font-size: 12.5px; }
.swlast div { display: flex; gap: 10px; padding: 5px 10px; border-radius: 10px; background: rgba(10,10,30,.35); }
.swlast b { color: var(--stream); min-width: 34px; }
.swlast span { color: var(--text-dim); }
.swlast .bad b, .swlast .bad span { color: #ff8a98; }
@media (max-width: 720px) {
  .top .chip.stream { padding: 0 6px; }
  .top .chip.stream .stack { display: none; }
  .btn.twitch.who { height: 36px; padding: 0 9px; max-width: 110px; }
  .btn.twitch.who:not(.in) .t { display: none; }
  .swprice b { font-size: 22px; }
}

/* ---------- звук стрима: значок и ползунок в полосе под картинкой ---------- */
.twctl { position: relative; display: flex; align-items: center; gap: 8px; flex: none; height: 40px; padding: 0 6px 0 4px; border-radius: 999px; background: rgba(145,70,255,.14); box-shadow: inset 0 0 0 2px rgba(145,70,255,.5); }
.twsnd { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; cursor: pointer;
  color: #e6d9ff; background: rgba(145,70,255,.28); box-shadow: inset 0 0 0 2px rgba(145,70,255,.6); }
.twsnd:hover { background: rgba(145,70,255,.5); color: #fff; }
.twsnd.on { color: #fff; background: #9146ff; box-shadow: 0 2px 0 #5a23b3; }
.twvol { -webkit-appearance: none; appearance: none; width: 110px; height: 20px; margin: 0; background: transparent; cursor: pointer; }
.twvol::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, #b48cff 0 var(--v, 0%), rgba(255,255,255,.22) var(--v, 0%) 100%); }
.twvol::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, #b48cff 0 var(--v, 0%), rgba(255,255,255,.22) var(--v, 0%) 100%); }
.twvol::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.5), 0 0 0 3px rgba(145,70,255,.55); }
.twvol::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.5), 0 0 0 3px rgba(145,70,255,.55); }
.twvol:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }
.twwho { margin-right: 6px; font: 800 12px/1 var(--ui); color: #d9c8ff; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
/* качество стрима: кнопка с текущим качеством и список над ней */
.twq { flex: none; height: 28px; min-width: 46px; padding: 0 9px; border: 0; border-radius: 999px; font: 800 12px/1 var(--ui); color: #e6d9ff; background: rgba(145,70,255,.28); box-shadow: inset 0 0 0 2px rgba(145,70,255,.6); white-space: nowrap; cursor: pointer; }
.twq:hover, .twq[aria-expanded="true"] { color: #fff; background: rgba(145,70,255,.5); }
.twq:focus-visible, .twsnd:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.twqmenu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 6; min-width: 190px; padding: 6px; display: flex; flex-direction: column; gap: 2px; border-radius: 14px; background: #1c1f43; box-shadow: 0 14px 34px rgba(5,6,20,.6), inset 0 0 0 2px rgba(145,70,255,.55); animation: sayin 160ms var(--ease-pop); }
.twqmenu b { padding: 6px 10px 4px; font: 800 10px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: #a99bff; }
.twqmenu button { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 10px; border: 0; border-radius: 9px; font: 800 13px/1 var(--ui); color: var(--text); background: none; text-align: left; white-space: nowrap; cursor: pointer; }
.twqmenu button small { font: 700 11px/1 var(--ui); color: var(--text-mute); }
.twqmenu button:hover, .twqmenu button:focus-visible { background: rgba(145,70,255,.25); outline: none; }
.twqmenu button.on { color: #fff; background: #9146ff; }
.twqmenu button.on small { color: #e6d9ff; }
.twqmenu p { margin: 0; padding: 6px 10px 8px; max-width: 230px; font: 700 11.5px/1.35 var(--ui); color: var(--text-mute); white-space: normal; }

/* ---------- трупер вне линии ---------- */
#fxo { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.foe-tools { position: absolute; right: -8px; top: -24px; display: flex; gap: 6px; z-index: 2; }
.foe-tools button { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; color: #fff; background: #5f50c9;
  box-shadow: 0 2px 0 #3a2f8f, 0 4px 10px rgba(5,6,20,.5); pointer-events: auto; cursor: grab; touch-action: none; }
.foe-tools button:hover { background: #7868e6; }
.foe-tools #foeHome { cursor: pointer; background: #2f3370; box-shadow: 0 2px 0 #1a1c44, 0 4px 10px rgba(5,6,20,.5); }
.foe-tools #foeHome:hover { background: #454a9c; }
.field.nocur .cursor { opacity: 0 !important; }
body.foedrag, body.foedrag * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.foe-float { position: fixed; left: 40px; top: 40px; z-index: 25; width: min(250px, 62vw); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.foe-float:has(.enemy.boss) { width: min(310px, 76vw); }
.foe-float .plate-enemy { position: relative; margin: 0 0 6px; padding: 10px 12px; border-radius: 16px; background: rgba(12,12,34,.88); backdrop-filter: blur(4px);
  box-shadow: 0 8px 20px rgba(5,6,20,.5), inset 0 0 0 1px rgba(169,155,255,.28); }
.foe-float .plate-enemy.boss { box-shadow: 0 8px 20px rgba(5,6,20,.5), inset 0 0 0 2px rgba(255,90,110,.55); }
.foe-float .plate-enemy.gold { box-shadow: 0 8px 20px rgba(5,6,20,.5), inset 0 0 0 2px rgba(255,197,61,.6); }
.foe-float .unit.enemy, .foe-float .unit.enemy.boss { position: relative; right: auto; bottom: auto; width: 100%; transform-origin: 50% 100%; }
.foe-float .bossring { position: absolute; right: auto; left: -46px; top: -18px; transform: scale(.85); z-index: 2; }
/* Рамка эффектов вокруг вынесенного трупера: искры, числа, хлыст и сферы рисуются только в ней. На всё окно слои не
   растягиваем: Twitch считает чат, накрытый любым элементом, закрытым и отключает ввод владельцу канала и модераторам.
   Поля рамки (left/top/right/bottom) ставит js/fx.js и подрезает их там, где рамка задела бы чат. */
.foe-fx { position: absolute; z-index: 3; overflow: hidden; pointer-events: none; }
.foe-fx > * { position: absolute; inset: 0; pointer-events: none; }
.foe-fx > canvas, .foe-fx > svg { width: 100%; height: 100%; }
body.foegrab iframe { pointer-events: none !important; }     /* пока трупера тащат, окна Twitch не перехватывают мышь */

/* ---------- стрим фоном: его должно быть удобно смотреть ----------
   Поле становится картинкой 16:9 без затемнения и виньеток. Всё, что закрывало её постоянно (счёт душ, комбо, цифры
   урона, Душка, звук стрима), стоит в полосе под картинкой: туда их переносит js/fx.js (setDock). На картинке остаётся
   только бой: трупер на своей табличке в правом нижнем углу и то, что нужно бить. Страница при этом раздвигается так,
   чтобы картинка была как можно больше, но помещалась на экран вместе с полосой и умениями. */
body.twon .main, body.twon .top { max-width: max(1100px, calc(clamp(56vh, 100vh - 388px, 1080px) * 16 / 9 + 504px)); }
.field.tw { height: auto; aspect-ratio: 16 / 9; min-height: 300px; max-height: calc(100vh - 110px); background-image: none !important; background-color: #000; border-radius: var(--r-5) var(--r-5) 0 0;
  --ew: clamp(150px, calc(var(--fh, 500px) * .34), 270px); --pw: calc(var(--ew) + 44px); }
.field.tw::after, .field.tw.dark::before { display: none; }
.field.tw.shake { animation: none; }
.field.tw .skyline, .field.tw .q1, .field.tw .q2 { display: none; }
.field.tw .enemy { right: calc(3% + 22px); bottom: 66px; width: var(--ew); }
.field.tw .enemy.boss { right: calc(3% + 22px - var(--ew) * .15); bottom: 62px; width: calc(var(--ew) * 1.3); }
.field.tw .enemy.elite, .field.tw .enemy.altar { right: calc(3% + 22px - var(--ew) * .08); width: calc(var(--ew) * 1.16); }
.field.tw .plate-enemy { right: 3%; top: auto; bottom: 10px; width: var(--pw); padding: 8px 10px; background: rgba(12,12,34,.8); backdrop-filter: none; box-shadow: 0 6px 16px rgba(5,6,20,.45); }
.field.tw .plate-enemy.boss { box-shadow: 0 6px 16px rgba(5,6,20,.45), inset 0 0 0 2px rgba(255,90,110,.55); }
.field.tw .plate-enemy.gold { box-shadow: 0 6px 16px rgba(5,6,20,.45), inset 0 0 0 2px rgba(255,197,61,.6); }
.field.tw .plate-enemy .nameplate { margin-bottom: 6px; }
.field.tw .bossring { right: calc(3% + var(--pw) + 2px); top: auto; bottom: 0; transform: scale(.8); transform-origin: 100% 100%; }
.field.tw .hint { right: calc(3% + var(--pw) + 16px); top: auto; bottom: 30%; font-size: 34px; }
.field.tw .banner { top: 16px; }
.field.tw .banner b { font-size: 24px; text-shadow: 0 3px 0 var(--outline), 2px 0 0 var(--outline), -2px 0 0 var(--outline), 0 -2px 0 var(--outline), 0 0 20px rgba(169,155,255,.7); }
.field.tw .banner.boss b { text-shadow: 0 3px 0 #4a0714, 2px 0 0 #4a0714, -2px 0 0 #4a0714, 0 -2px 0 #4a0714, 0 0 22px rgba(255,90,110,.9); }
.field.tw .banner.gold b { text-shadow: 0 3px 0 #6a3500, 2px 0 0 #6a3500, -2px 0 0 #6a3500, 0 -2px 0 #6a3500, 0 0 22px rgba(255,197,61,.9); }
.field.tw .banner small { margin-top: 5px; font-size: 11px; }
.field.tw .banner.wave b { font-size: 16px; }
.field.tw .draft { background: rgba(8,8,26,.4); backdrop-filter: none; }

/* Полоса под картинкой. Её высота не должна меняться во время игры, иначе всё под ней прыгает: под комбо место
   держится всегда, а цифры урона показывают столько, сколько помещается в строку. Узкое поле (классы slim и tiny ставит
   js/fx.js по ширине поля) — цифры урона уходят на вторую строку. */
.dock { position: relative; z-index: 0; margin-top: -12px; display: flex; align-items: center; gap: 8px 12px; min-height: 66px; padding: 8px 14px 8px 12px;
  border: 1px solid rgba(169,155,255,.16); border-top: 0; border-radius: 0 0 var(--r-4) var(--r-4); background: linear-gradient(180deg, #23264f, #1b1e42); box-shadow: 0 12px 30px rgba(5,6,20,.45); }
.dock .dushka { position: relative; left: auto; bottom: auto; z-index: auto; display: block; flex: none; }
.dock .dushka img { display: block; width: 34px; }
.dock .say { position: absolute; left: 0; bottom: calc(100% + 20px); margin: 0; width: max-content; max-width: min(340px, 62vw); }
.dock .bankwrap { position: relative; z-index: 0; flex: none; min-width: 190px; transform-origin: 0 50%; pointer-events: none; }
.dock .bankwrap.rays::before { inset: -22px -14px; }
.dock .bank { display: grid; grid-template-columns: auto auto; grid-template-areas: "ico num" "ico rate"; justify-content: start; align-items: center; gap: 4px 10px; text-align: left; }
.dock .bank .cap { grid-area: ico; margin: 0; }
.dock .bank .cap img { display: block; width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 0 8px var(--farm-glow)); }
.dock .bank .cap .l { display: none; }
.dock .bank .num { grid-area: num; font-size: 28px; filter: drop-shadow(0 2px 0 #6a3500); }
.dock .bank .rate { grid-area: rate; margin: 0; font-size: 12px; line-height: 1; white-space: nowrap; }
.dock .bank .rate b { font-size: 13px; }
.dock .combo { position: static; flex: none; flex-direction: row; align-items: center; gap: 8px; min-width: 118px; }
.dock .combo[hidden] { display: flex !important; visibility: hidden; }
.dock .combo:not(.t4) b { text-shadow: 0 3px 0 var(--outline), 2px 0 0 var(--outline), -2px 0 0 var(--outline), 0 -2px 0 var(--outline); }
.dock .combo b { font-size: 28px; }
.dock .combo span { margin: 0; }
.dock .stats { flex: 1 1 auto; min-width: 0; height: 20px; overflow: hidden; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0 12px; font-size: 12px; line-height: 20px; color: var(--text-dim); white-space: nowrap; }
.dock .stats b { font: 900 15px/20px var(--ui); color: var(--text); margin-left: 5px; }
.dock .twctl { flex: none; }
.dock .twvol { flex: none; width: 76px; }
.dock .twwho { display: none; }                              /* имя канала — только на широком поле (класс wide) */
.dock.wide .twwho { display: block; }

.dock.slim { flex-wrap: wrap; }
.dock.slim .twctl { margin-left: auto; }
.dock.slim .stats { order: 5; flex: 1 1 100%; justify-content: flex-start; }
.dock.slim .combo { min-width: 64px; }
.dock.slim .combo span { display: none; }
@media (max-height: 760px) { .dock.slim .stats { display: none; } }   /* низкий экран: цифры урона есть в списке отряда, строку не держим */
.dock.tiny { gap: 6px 12px; padding: 8px 10px; }
.dock.tiny .bankwrap { min-width: 170px; }
.dock.tiny .bank .num { font-size: 24px; }
.dock.tiny .bank .cap img { width: 30px; height: 30px; }
.dock.tiny .combo { min-width: 58px; }
.dock.tiny .combo b { font-size: 22px; }
.dock.tiny .twvol { width: 70px; }
.dock.tiny .stats { gap: 0 14px; font-size: 11px; }
.dock.tiny .stats b { font-size: 13px; }

@media (max-width: 1180px) {
  body.twon .main, body.twon .top { max-width: max(600px, calc(clamp(56vh, 100vh - 250px, 1080px) * 16 / 9 + 24px)); }
}
@media (max-width: 720px) {
  .field.tw { border-radius: var(--r-4) var(--r-4) 0 0; }
}
@media (max-width: 500px) {
  .dock { gap: 6px 8px; }
  .dock .bankwrap { min-width: 0; }
  .dock .twvol { display: none; }
  .dock .twctl { min-width: 0; padding: 0 4px; }
  .twqmenu { right: -4px; }
}

/* ---------- чат Twitch не должен быть ничем накрыт ----------
   Twitch отключает ввод в чате владельцу канала и модераторам, если браузер считает окно чата закрытым другим элементом.
   Браузер (Chromium, IntersectionObserver v2) считает закрытием любой блок, который рисуется выше окна и задевает его
   хотя бы краем — вместе с тенью и фильтрами блока, даже прозрачный и не ловящий клики; обрезка скруглением не в счёт.
   Поэтому всё, что стоит рядом с правой колонкой, обязано рисоваться НИЖЕ неё:
   - линия — отдельный слой (isolation): её спрайты и эффекты с z-index не всплывают над колонкой;
   - полоса под картинкой — слой с z-index 0: она выше линии (стоит после неё), но ниже колонки (та — ещё позже);
   - вынесенный трупер и рамка его эффектов держатся от чата на расстоянии (js/fx.js: fitBox, overChat). */
.field { isolation: isolate; }
/* вынесенный трупер появляется на месте, без выезда справа: выезд на 120 пикселей мог на миг накрыть чат рядом */
.foe-float .enemy.enter { animation-name: enterfloat; }
@keyframes enterfloat { 0% { transform: scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- высота страницы не меняется во время игры ----------
   В раскладке со стримом страница занимает окно впритык. Стоит любому блоку подрасти — справа включается полоса
   прокрутки, окно становится уже на её ширину, и вся страница дёргается влево, а потом обратно. Поэтому у блоков под
   линией и у полосы под картинкой высота задана жёстко, а место под полосу прокрутки держится всегда.
   Проверка: node tools/layout_test.mjs. */
html { scrollbar-gutter: stable; }
.nextline { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 37px; min-height: 0; }
.buffs { max-height: 100%; overflow: hidden; }
@media (min-width: 721px) {
  .lower > .plate { height: 126px; min-height: 0; box-sizing: border-box; overflow: hidden; }
}
.dock { height: 66px; box-sizing: border-box; }
.dock .bank { height: 46px; align-content: center; }
.dock .bank .num { height: 28px; line-height: 28px; }
.dock .combo { height: 30px; }
.dock .combo b { line-height: 30px; }
.dock.slim { height: 94px; align-content: center; }
.dock.tiny { height: auto; min-height: 66px; }
@media (max-height: 760px) { .dock.slim:not(.tiny) { height: 66px; } }
/* узкая линия (стрим на небольшом экране): полоса волны не должна вылезать за свою плашку */
.wavebar .wavemid { min-width: 0; }
.wavebar .wavemid .sub { overflow: hidden; text-overflow: ellipsis; }
.stage.narrow .wavebar { gap: 12px; }
.stage.narrow .wavebar .rec, .stage.narrow #waveSub { display: none; }
/* умения сжимаются вместе с плашкой, а не наезжают друг на друга; плашки бафов видны, только когда им есть место */
.skillbar .sk { flex: 1 1 0; min-width: 0; max-width: 66px; }
.skillbar .skill { width: 100%; height: auto; aspect-ratio: 1; }
.skillbar .skill-cap { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buffs { flex: none; }
.stage.mid .buffs { display: none; }
.stage.narrow .lower { grid-template-columns: minmax(0, 1fr) 260px; }
.stage.narrow .skillbar { gap: 8px; padding: 12px; }
.stage.narrow .btn.rebirth { font-size: 12.5px; padding: 11px 8px; }

/* ---------- ачивки во вкладке «Путь» ---------- */
.achsum { margin: 8px 0 2px; padding: 12px 14px; border-radius: var(--r-3); background: linear-gradient(180deg, rgba(255,197,61,.16), rgba(255,197,61,.05)); box-shadow: inset 0 0 0 2px rgba(255,197,61,.3); }
.achhead { display: flex; align-items: baseline; gap: 10px; }
.achhead > b { font: 900 18px/1 var(--display); color: var(--text); }
.achhead span { font: 800 13px/1 var(--ui); color: var(--text-dim); }
.achhead span b { font: 900 18px/1 var(--display); color: var(--farm); }
.achhead em { margin-left: auto; font: 900 13px/1 var(--ui); font-style: normal; color: var(--farm); white-space: nowrap; }
.achsum p { margin-top: 8px; font-size: 12px; line-height: 1.35; color: var(--text-dim); }
.achbar { height: 8px; margin-top: 10px; border-radius: 999px; background: rgba(10,10,30,.6); overflow: hidden; }
.achbar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f39a10, var(--farm)); }
.achbar.sm { height: 5px; margin-top: 6px; }
.achbar.sm i { background: var(--brass); }
.achg { display: flex; align-items: baseline; justify-content: space-between; margin: 12px 2px 0; font: 900 12px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--brass-hi); }
.achg span { font: 800 11px/1 var(--ui); letter-spacing: 0; color: var(--text-mute); }
.ach { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 10px; border-radius: var(--r-3); background: rgba(10,10,30,.35); box-shadow: inset 0 0 0 1px var(--line); }
.ach .am { width: 34px; height: 34px; object-fit: contain; }
.ach.zero .am { filter: grayscale(1) brightness(.55); }
.ach .at { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ach .at b { font: 800 13.5px/1.15 var(--ui); color: var(--text); }
.ach .at span { flex: none; font: 900 11px/1 var(--ui); color: var(--text-mute); white-space: nowrap; }
.apips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.apips i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); }
.apips i.on { background: var(--farm); box-shadow: 0 0 6px rgba(255,197,61,.55); }
.apips i.now { background: transparent; box-shadow: inset 0 0 0 2px var(--brass-hi); }
.ach .an { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; line-height: 1.3; color: var(--text-dim); }
.ach .an em { flex: none; font-style: normal; font-weight: 800; color: var(--text-mute); white-space: nowrap; }
.ach.done { box-shadow: inset 0 0 0 1px rgba(255,197,61,.4); }
.ach.done .at span, .ach.done .an { color: var(--farm); }
.ach.one .an { margin-top: 3px; }
/* уведомление об ачивке в плашке «Дальше» */
.events.flash { box-shadow: 0 12px 30px rgba(5,6,20,.45), inset 0 0 0 2px var(--farm); }
.events.flash .eyebrow { color: var(--farm); }
.events.flash .nextline { color: #ffe9a8; }

/* ---------- второй слой: Затмение и покровители во вкладке «Реликвии» ---------- */
#paneRelics .relics { flex: none; overflow: visible; }
.rebox.ecl { margin-top: 10px; background: linear-gradient(180deg, rgba(151,117,250,.2), rgba(151,117,250,.06)); box-shadow: inset 0 0 0 2px rgba(151,117,250,.4); }
.rebox.ecl .big { color: #c3b1ff; }
.btn.ecl { width: 100%; margin-top: 10px; color: #1b1140; background: linear-gradient(180deg, #e4dbff, #a78bfa); box-shadow: 0 4px 0 #5b3fc4, 0 8px 16px rgba(20,10,60,.45), inset 0 2px 0 rgba(255,255,255,.55); }
.btn.ecl.off { color: var(--text-mute); background: #2b2f5e; box-shadow: 0 3px 0 #15173a; filter: none; cursor: default; }
.modal .bignum.ecl { color: #c3b1ff; filter: drop-shadow(0 3px 0 #33207a); font-size: 28px; white-space: nowrap; }
.relic.patron h4 small { white-space: nowrap; }
.modal .eclart { float: right; width: 92px; height: 92px; margin: -6px -4px 6px 12px; object-fit: contain; filter: drop-shadow(0 0 16px rgba(151,117,250,.7)); }
.modal .btn.hold.ecl { width: auto; margin-top: 0; }
.btn.hold.ecl .fill { background: rgba(255,255,255,.55); }
.btn.hold.ecl.holding .fill { transition: width 2s linear; }
.relic.patron { box-shadow: inset 0 0 0 1px rgba(151,117,250,.35); }
.relic.patron .pbuy { grid-column: span 2; display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.relic.patron .pbuy button { grid-column: auto; background: linear-gradient(180deg, #e4dbff, #a78bfa); box-shadow: 0 3px 0 #5b3fc4; color: #1b1140; }
.relic.patron .pbuy button.mx { padding: 7px 10px; }
.relic.patron .pbuy button.off { color: var(--text-mute); background: #2b2f5e; box-shadow: 0 3px 0 #15173a; cursor: default; }
.relic.patron.chaos { grid-column: span 2; }
.relic.patron.chaos.lockd { opacity: .55; }
.chip.shard { border-radius: var(--r-3); background: rgba(151,117,250,.12); box-shadow: inset 0 0 0 2px rgba(151,117,250,.35); }
.chip.shard .v { font: 800 17px/1 var(--display); color: #c3b1ff; }
.chip.shard .l { color: #8f7fd6; }
.ashfx.ecl .n { color: #c3b1ff; text-shadow: 0 0 30px rgba(151,117,250,.9); }

/* ---------- вкладка «Скины»: сундуки, задания дня, скины труперов и героев ---------- */
.keep { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 16px; }
.keep .kn { margin: 0 2px; font-size: 12px; line-height: 1.4; color: var(--text-dim); }
.keep .kn b { color: var(--text); }
.kchest { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-3); background: rgba(10,10,30,.35); box-shadow: inset 0 0 0 1px var(--line); }
.kchest > img { width: 52px; height: 52px; object-fit: contain; filter: grayscale(.75) brightness(.7); }
.kchest.ready { background: linear-gradient(180deg, rgba(255,197,61,.16), rgba(255,197,61,.05)); box-shadow: inset 0 0 0 2px rgba(255,197,61,.45); }
.kchest.ready > img { filter: drop-shadow(0 0 10px rgba(255,197,61,.6)); animation: kbob 1.6s ease-in-out infinite; }
@keyframes kbob { 50% { transform: translateY(-3px) rotate(-3deg); } }
.kchest .kc b { display: block; font: 800 14px/1.15 var(--display); color: var(--text); }
.kchest .kc span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.3; color: var(--text-dim); }
.kchest .btn.off { opacity: .45; cursor: default; filter: grayscale(.8); }
.ktask { padding: 9px 12px; border-radius: var(--r-3); background: rgba(10,10,30,.35); box-shadow: inset 0 0 0 1px var(--line); }
.ktask .kt { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ktask .kt b { font: 800 13.5px/1.2 var(--ui); color: var(--text); }
.ktask .kt span { flex: none; font: 900 11.5px/1 var(--ui); color: var(--text-mute); white-space: nowrap; }
.ktask.done { box-shadow: inset 0 0 0 1px rgba(124,224,160,.5); }
.ktask.done .kt span { color: #7ce0a0; }
.ktask.done .achbar i { background: #7ce0a0; }
.tskins { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.tsk { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 7px; border-radius: var(--r-3); background: rgba(10,10,30,.35); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-dim); cursor: pointer; }
.tsk img { width: 62px; height: 62px; object-fit: contain; }
.tsk b { font: 800 12px/1.1 var(--ui); color: var(--text); }
.tsk small { font: 800 10px/1.1 var(--ui); color: var(--text-mute); }
.tsk.on { box-shadow: inset 0 0 0 2px var(--bc, var(--brass)); background: rgba(169,155,255,.1); }
.tsk.on small { color: #7ce0a0; }
.tsk.lockd { cursor: default; }
.tsk.lockd img { filter: brightness(0) opacity(.38); }
.tsk.lockd b { color: var(--text-mute); }
.tsk.lockd small { color: var(--bc, var(--text-mute)); }
.rpgsum { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-3); background: rgba(255,90,209,.08); box-shadow: inset 0 0 0 1px rgba(255,90,209,.35); }
.rpgsum b { grid-column: 1; font: 800 14px/1.15 var(--display); color: var(--text); }
.rpgsum span { grid-column: 1; font-size: 12px; line-height: 1.35; color: var(--text-dim); }
.rpgsum a { grid-column: 2; grid-row: 1 / span 2; text-decoration: none; }
.rskins { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.rsk { position: relative; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: #20234c; box-shadow: inset 0 0 0 1px var(--line); }
.rsk img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; filter: grayscale(1) brightness(.34); }
.rsk span { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 0 2px; text-align: center; font: 900 9px/1 var(--ui); color: var(--text-mute); background: linear-gradient(180deg, transparent, rgba(8,8,24,.85)); }
.rsk.own img { filter: none; }
.rsk.own span { color: #fff; }
.rar-silver { --rc: #c9d2e6; } .rar-gold { --rc: #ffc53d; } .rar-chaos { --rc: #ff5ad1; }
.rsk.own { box-shadow: 0 0 0 2px var(--rc), 0 0 10px color-mix(in srgb, var(--rc) 55%, transparent); }
.merc .por.skin { box-shadow: inset 0 0 0 2px var(--rc), 0 0 10px color-mix(in srgb, var(--rc) 60%, transparent); }
.merc.whip .por.skin img { object-fit: cover; padding: 0; }
.tab .n.gold { background: var(--farm); color: #2a1206; }
/* вкладок стало семь: поля у́же, чтобы последняя не обрезалась */
.side .tabs { gap: 2px; padding: 6px 5px; }
.side .tab { padding: 9px 3px; }
.side .tab .n { margin-left: 3px; }
@media (max-width: 520px) {
  .side .tabs { overflow-x: auto; scrollbar-width: none; }
  .side .tab { padding: 9px 1px; font-size: 10.5px; letter-spacing: -.01em; }
  .side .tab .n { min-width: 13px; padding: 2px 3px; margin-left: 2px; font-size: 9px; }
}
/* сундук в окне */
.modal .bignum.chest { font-size: 27px; white-space: nowrap; }
.modal .chestart { float: right; width: 96px; height: 96px; margin: -8px -4px 6px 12px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(255,197,61,.55)); }
.modal .gotskin { clear: both; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; margin: 10px 0 4px; padding: 10px 12px; border-radius: var(--r-3); background: rgba(10,10,30,.4); box-shadow: inset 0 0 0 2px var(--bc); }
.modal .gotskin img { width: 92px; height: 92px; object-fit: contain; }
.modal .gotskin b { display: block; font: 900 18px/1.1 var(--display); }
.modal .gotskin span { display: block; margin-top: 3px; font: 800 12px/1.2 var(--ui); color: var(--bc); }
.modal .gotskin em { display: block; margin-top: 6px; font-style: normal; font-size: 12.5px; color: var(--text-dim); }
/* рядом с плашкой «Стрим идёт»: до сундука эфира. Высота та же, что у плашки, — шапка не прыгает */
.livechest { margin-left: 8px; padding: 7px 12px; border-radius: 999px; font: 800 12.5px/1 var(--ui); color: var(--text-dim); background: rgba(10,10,30,.45); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; cursor: pointer; font-variant-numeric: tabular-nums; }
.livechest.ready { color: #2a1206; background: linear-gradient(180deg, var(--farm-hi), var(--farm)); box-shadow: 0 3px 0 var(--farm-deep); }
@media (max-width: 1100px) { .livechest { display: none; } }