/* ============================================================
   Клятва стали — стили (мультиплеерная арена)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Marcellus&display=swap');

:root{
  --bg:#11120f; --panel:#191a16; --panel2:#20211c; --line:#36372e;
  --text:#f0eadb; --muted:#a09e90; --gold:#d3ad6a; --gold2:#f0d5a0;
  --red:#cc6557; --green:#8aab7c; --blue:#84a8c8;
  --serif:'Marcellus',Georgia,serif; --sans:'DM Sans',Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% 0%,#29271f 0,#161713 45%,#10110f 100%);color:var(--text);font-family:var(--sans);min-height:100vh}
button,input{font:inherit}button{cursor:pointer;color:inherit}

.shell{max-width:1180px;margin:auto;padding:28px 34px 44px}
.card-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.card-wrap.solo{display:block}

.topbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff14;padding-bottom:20px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:39px;height:39px;border:1px solid #bd965c7a;display:grid;place-items:center;color:var(--gold);transform:rotate(45deg);border-radius:3px}
.brand-mark span{transform:rotate(-45deg);font-size:20px}
.brand-name{font:18px var(--serif);letter-spacing:.12em;text-transform:uppercase}
.brand-sub{font-size:10px;color:var(--muted);letter-spacing:.23em;margin-top:3px}
.top-meta{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:12px;flex-wrap:wrap}
.online-dot{width:7px;height:7px;background:#95b57d;border-radius:50%;display:inline-block;margin-right:6px;box-shadow:0 0 10px #95b57d66}
.tiny{background:transparent;border:1px solid var(--line);color:var(--muted);font-size:11px;padding:4px 10px;border-radius:4px}
.tiny:hover{color:var(--red);border-color:var(--red)}

.intro{padding:20px 0 10px}
.eyebrow{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);font-weight:700}
.hero-title{font:clamp(26px,4.6vw,44px) var(--serif);margin:10px 0 6px;letter-spacing:.01em}
.hero-copy{font-size:13px;color:var(--muted);margin:0}

.top-nav{display:flex;gap:8px;margin:18px 0 6px;flex-wrap:wrap}
.nav-btn{background:#12130999;border:1px solid var(--line);color:var(--muted);padding:9px 16px;border-radius:5px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;transition:.2s}
.nav-btn:hover{border-color:#605c46;color:var(--text)}.nav-btn.active{background:#241f14;border-color:#bd965c99;color:var(--gold2)}

.card{border:1px solid var(--line);background:linear-gradient(145deg,#1b1c18f5,#171814f5);border-radius:8px;box-shadow:0 16px 55px #0002}
.card-head{padding:16px 22px;border-bottom:1px solid #ffffff10;display:flex;justify-content:space-between;align-items:center}
.card-heading{font:18px var(--serif);margin:0}
.step-tag{color:var(--muted);font-size:11px;letter-spacing:.08em}
.create-body{padding:20px 22px}
.field-label{font-size:10px;text-transform:uppercase;letter-spacing:.17em;color:var(--muted);display:block;margin-bottom:8px}
.name-input{width:100%;background:#11120f;border:1px solid var(--line);border-radius:6px;color:var(--text);padding:11px 13px;font-size:14px}
.name-input:focus{outline:none;border-color:#bd965c99}
.form-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.form-note{font-size:11px;color:var(--muted);max-width:300px;line-height:1.5}
.primary{background:linear-gradient(145deg,#8a7134,#6f5a24);border:1px solid #bd965c99;color:#f6ead0;padding:12px 18px;border-radius:6px;font-size:12px;letter-spacing:.08em;font-weight:600;transition:.2s}
.primary:hover:not(:disabled){filter:brightness(1.15);transform:translateY(-1px)}
.primary:disabled{opacity:.5;cursor:not-allowed}
.secondary{background:#12130999;border:1px solid var(--line);color:var(--text);padding:11px 16px;border-radius:6px;font-size:11px;letter-spacing:.08em}
.secondary:hover{border-color:#605c46}
.linklike{background:none;border:none;color:var(--blue);font-size:11px;text-decoration:underline;padding:6px;margin-top:8px}
.hidden{display:none!important}

.side-panel{display:grid;gap:14px}
.side-title{font:15px var(--serif);margin:0 0 10px}
.formula{display:grid;gap:2px;font-size:12px}
.formula-row{display:flex;justify-content:space-between;padding:8px 10px;border-bottom:1px solid #ffffff0d}
.formula-row span{color:var(--muted)}.formula-row strong{color:var(--gold2);font-weight:600}
.notice{font-size:11px;color:var(--muted);background:#12130966;border:1px dashed var(--line);border-radius:6px;padding:9px 12px;line-height:1.5;margin-top:12px}
.perk-title{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.perk-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 10px;border:1px solid #ffffff0d;border-radius:5px;background:#12130999;margin-bottom:6px}
.perk-row span{font-size:12px;color:var(--muted)}.perk-row b{font-size:13px;color:var(--gold2);font-weight:600}
.perk-row em{font-size:9px;font-style:normal;color:var(--muted);display:block;letter-spacing:.12em;text-transform:uppercase}

/* ---------- авторизация ---------- */
.auth-tabs{display:flex;gap:8px}
.auth-tab{background:#12130999;border:1px solid var(--line);color:var(--muted);padding:9px 20px;border-radius:5px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.auth-tab.active{background:#241f14;border-color:#bd965c99;color:var(--gold2)}
.auth-msg{font-size:12px;color:var(--gold2);min-height:18px;margin-top:10px}
.auth-msg.err{color:var(--red)}

/* ---------- создание героя ---------- */
.gender-row{display:flex;gap:8px;margin:12px 0 4px}
.gender-btn{background:#12130999;border:1px solid var(--line);color:var(--muted);padding:10px 18px;border-radius:5px;font-size:12px}
.gender-btn.active{background:#241f14;border-color:#bd965c99;color:var(--gold2)}
.skin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px;max-height:430px;overflow:auto}
.skin-card{border:1px solid var(--line);background:#12130999;border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:6px;align-items:center}
.skin-card .skin-svg{width:72px;height:84px}
.skin-card .skin-name{font:11px var(--serif);color:var(--text)}
.skin-card .skin-school{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.skin-card.selected{border-color:#bd965c99;background:#241f1480;box-shadow:0 0 0 1px #bd965c33}

.stat-list{display:grid;gap:10px;margin-top:12px}
.stat-row{display:grid;grid-template-columns:minmax(0,1fr) 54px 110px;align-items:center;gap:10px;padding:10px 12px;background:#12130966;border:1px solid #ffffff0d;border-radius:6px}
.stat-info{display:flex;align-items:center;gap:11px}
.stat-icon{width:30px;height:30px;border:1px solid #ffffff14;border-radius:5px;background:#0d0e0b;display:grid;place-items:center;font-size:16px}
.stat-name{font:14px var(--serif)}.stat-desc{font-size:10px;color:var(--muted)}
.stat-val{font-size:16px;font-weight:700;color:var(--gold2);text-align:center}
.stepper{display:flex;justify-content:center;gap:8px}
.stepper button{width:34px;height:34px;border-radius:50%;background:#12130999;border:1px solid var(--line);font-size:17px}
.stepper button:disabled{opacity:.35;cursor:not-allowed}
.points-summary{display:flex;justify-content:space-between;padding:8px 12px;background:#241f1480;border:1px solid #bd965c55;border-radius:6px;font-size:12px;margin-bottom:6px}
.points-left b{color:var(--gold2);font-size:15px}
.hint{color:var(--muted);font-size:11px}

/* ---------- общий хаб ---------- */
.bag-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 22px;border-bottom:1px solid #ffffff10;flex-wrap:wrap}
.bag-gold{font-size:13px;color:var(--gold2);display:flex;align-items:center;gap:7px}.bag-gold b{font-size:15px;font-weight:600}
.bag-body{padding:18px 22px}
.bag-split{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:18px;align-items:start}
.gear-panel{border:1px solid #ffffff0d;background:#14151080;border-radius:7px;padding:14px}
.doll{display:grid;gap:8px}
.slot{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:linear-gradient(145deg,#1b1c18f5,#15160ff5);border-radius:6px;padding:9px 11px;text-align:left;width:100%;font-size:12px;transition:.18s}
.slot:hover:not(:disabled){border-color:#8a8265;transform:translateX(2px)}
.slot.filled{border-color:#bd965c66}
.slot-icon{width:30px;height:30px;flex:none;display:grid;place-items:center;font-size:17px;border:1px solid #ffffff14;border-radius:5px;background:#0d0e0b}
.slot-name{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block}
.slot-item{font:13px var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.slot-bonus{font-size:10px;color:var(--green);white-space:nowrap}
.bag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:9px}
.item{border:1px solid var(--line);background:linear-gradient(145deg,#1b1c18f5,#15160ff5);border-radius:6px;padding:10px 11px;display:flex;flex-direction:column;gap:6px}
.item.eq{border-color:#bd965c99;background:linear-gradient(145deg,#241f14f5,#1a1812f5)}
.item.rare-common{border-left:3px solid #8f8d80}.item.rare-uncommon{border-left:3px solid var(--green)}
.item.rare-rare{border-left:3px solid var(--blue)}.item.rare-epic{border-left:3px solid #b18bd0}
.item-top{display:flex;align-items:center;gap:8px}.item-icon{font-size:17px;width:24px;text-align:center}
.item-name{font:13px var(--serif);line-height:1.2;flex:1}
.item-stats{font-size:10px;color:var(--green)}
.item-meta{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
.item-price{font-size:11px;color:var(--gold2);font-weight:600}
.item button{margin-top:auto;background:#12130999;border:1px solid var(--line);color:var(--text);padding:8px 10px;border-radius:5px;font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.item button:hover:not(:disabled){border-color:#bd965c99;color:var(--gold2)}
.item button:disabled{cursor:not-allowed;opacity:.45}
.empty-note{font-size:12px;color:var(--muted);border:1px dashed var(--line);border-radius:6px;padding:13px;text-align:center}
.bonus-list{display:grid;gap:6px}.bonus-row{display:flex;justify-content:space-between;gap:10px;font-size:12px}
.bonus-row span{color:var(--muted)}.bonus-row b{color:var(--gold2);font-weight:600}
.spend-btn{display:inline-block;background:#12130999;border:1px solid #bd965c66;color:var(--gold2);border-radius:99px;padding:3px 10px;font-size:11px;cursor:pointer;margin-right:5px}
.spend-btn:hover{background:#241f14;color:#fff}
.bonus-line{display:flex;flex-wrap:wrap;gap:6px}
.bonus-tag{font-size:11px;color:var(--gold2);background:#241f1480;border:1px solid #bd965c4d;border-radius:99px;padding:3px 9px}

.lobby-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:20px;align-items:start}
.lobby-fighter{background:#14151080;border:1px solid #ffffff0d;border-radius:7px;padding:14px;display:flex;justify-content:center}
.lobby-info{display:grid;gap:12px}
.hero-stats{display:grid;gap:6px}
.cta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cta-row .primary{width:auto}
.lobby-note{font-size:11px;color:var(--muted);line-height:1.5}
.xp-line{display:flex;align-items:center;gap:10px;margin-top:8px}
.xp-track{flex:1;height:6px;background:#0e0f0c;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.xp-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .45s ease}
.xp-text{font-size:11px;color:var(--muted);white-space:nowrap}

/* ---------- поиск ---------- */
.queue-body{text-align:center;padding:48px 22px}
.queue-anim{font-size:64px;animation:qshake 1.1s ease-in-out infinite;filter:drop-shadow(0 0 22px #bd965c66)}
@keyframes qshake{0%,100%{transform:translateX(-6px) rotate(-6deg)}30%{transform:translateX(6px) rotate(6deg)}60%{transform:translateX(-4px) rotate(-3deg)}}
.queue-text{font:17px var(--serif);color:var(--gold2);margin:22px 0}
.queue-body .form-footer{justify-content:center}

/* ---------- бой ---------- */
.battle-wrap{}
.arena-head{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid #ffffff10}
.round-pill{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);background:#241f1480;border:1px solid #bd965c66;border-radius:99px;padding:8px 16px}
.arena{background:linear-gradient(180deg,#1b1a17,#12120f);border:1px solid var(--line);border-radius:8px;min-height:340px;position:relative;overflow:hidden}
.fighters{position:absolute;inset:20px 0 48px;display:grid;grid-template-columns:1fr 1fr}
.fighter{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}
.fighter-title{font:16px var(--serif);color:var(--text)}
.fighter-level{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hp-line{display:flex;justify-content:space-between;width:80%;font-size:11px;color:var(--muted)}
.hp-line span:last-child{color:var(--gold2);font-weight:600}
.hp-track{width:80%;height:7px;background:#281f18;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.hp-fill{height:100%;width:100%;background:linear-gradient(90deg,#8a3f35,#c95646);transition:width .45s ease}
.hp-fill.player{background:linear-gradient(90deg,#6f8d5c,#9dc07f)}
.svg-knight{/*
  сюда подставляется SVG (см. assets/app.js)
*/}
.svg-knight svg{display:block}
.fighter.p1 .svg-knight{transform:scale(.92);transform-origin:bottom center}
.strike-top{animation:strikeTop .5s ease-out}
.strike-mid{animation:strikeMid .5s ease-out}
.strike-low{animation:strikeLow .5s ease-out}
.dodge-fx{animation:dodgeFx .6s ease-out}
.block-fx{animation:blockFx .5s ease-out}
.hurt-fx{animation:hurtFx .5s ease-out}
@keyframes strikeTop{0%{transform:translateY(0)}25%{transform:translateY(-38px) rotate(-10deg)}55%{transform:translateY(6px) rotate(24deg)}100%{transform:translateY(0)}}
@keyframes strikeMid{0%{transform:translateX(0)}22%{transform:translateX(64px)}60%{transform:translateX(-6px)}100%{transform:translateX(0)}}
@keyframes strikeLow{0%{transform:translate(0,0)}25%{transform:translate(26px,46px) rotate(26deg)}60%{transform:translate(-4px,4px)}100%{transform:translate(0,0)}}
@keyframes dodgeFx{0%{transform:translateX(0)}20%{transform:translateX(-52px)}55%{transform:translateX(24px)}100%{transform:translateX(0)}}
@keyframes blockFx{0%{transform:scale(1)}40%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes hurtFx{0%{transform:translateX(0)}15%{transform:translateX(-16px)}35%{transform:translateX(12px)}60%{transform:translateX(-8px)}100%{transform:translateX(0)}}
.arena-caption{position:absolute;left:0;right:0;bottom:10px;text-align:center;font:15px var(--serif);color:var(--gold2);letter-spacing:.05em}
.arena-caption.small{font-size:12px;color:var(--muted)}
.result{position:absolute;inset:0;background:#141210d8;display:grid;place-items:center;align-content:center;gap:8px;z-index:5}
.result-kicker{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.result-title{font:clamp(24px,3.2vw,34px) var(--serif);color:var(--gold2)}
.result-copy{font-size:13px;color:var(--text);max-width:430px;text-align:center;line-height:1.5}

.combat-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;margin-top:16px;align-items:start}
.combat-card{border:1px solid var(--line);background:linear-gradient(145deg,#1b1c18f5,#171814f5);border-radius:8px}
.combat-title{font:18px var(--serif);margin:12px 20px 2px}
.combat-sub{font-size:11px;color:var(--muted);margin:0 0 12px 20px}
.turn-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 4px}
.turn-col{padding:12px 16px;background:#12130966;border:1px solid #ffffff0d;border-radius:6px}
.direction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.direction{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;background:#2a2518;border:1px solid #605c46;border-radius:6px;color:var(--gold2);font-size:12px;transition:.15s}
.direction .dir-icon{font-size:20px}
.direction.selected{border-color:#d3ad6a;background:#3a3220;box-shadow:0 0 0 1px #d3ad6a66;transform:translateY(-2px)}
.timer-box{display:flex;flex-direction:column;gap:6px;padding:16px 20px}
.timer-label{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.timer{font-size:30px;color:var(--gold2);font-weight:700}
.timer.urgent{color:var(--red);animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.timer-track{height:6px;background:#0e0f0c;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.timer-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width 1s linear}
.timer-fill.urgent{background:var(--red)}
.event-text{font-size:12px;color:var(--muted);line-height:1.5;margin-top:6px}
.battle-log{margin-top:16px}
.log-title{font:16px var(--serif);margin:12px 20px 2px}
.log-list{display:grid;gap:4px;max-height:230px;overflow:auto;padding:12px 20px}
.log-entry{font-size:12px;color:var(--muted);background:#12130966;border:1px solid #ffffff0d;border-radius:5px;padding:6px 10px;line-height:1.45}
.log-entry.damage{color:var(--red)}
.log-entry.good{color:var(--green)}
.log-entry strong{color:var(--text)}

/* ---------- лавка ---------- */
.shop-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0}
.shop-tabs button{background:#12130999;border:1px solid var(--line);color:var(--muted);padding:8px 14px;border-radius:5px;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.shop-tabs button.active{background:#241f14;border-color:#bd965c99;color:var(--gold2)}
.set-card{border:1px solid #bd965c66;background:linear-gradient(145deg,#241f14f5,#1a1812f5);border-radius:8px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.set-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.set-name{font:16px var(--serif);color:var(--gold2)}
.set-focus{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.set-desc{font-size:11px;color:var(--muted)}
.set-pieces{display:flex;gap:8px;flex-wrap:wrap}
.set-piece{font-size:10px;color:var(--text);background:#12130999;border:1px solid #ffffff14;border-radius:5px;padding:5px 9px}
.set-bonus{font-size:11px;color:var(--green)}
.set-price{font-size:15px;color:var(--gold2);font-weight:700}
.set-old-price{font-size:11px;color:var(--red);text-decoration:line-through}
.set-buy{background:linear-gradient(145deg,#8a7134,#6f5a24);border:1px solid #bd965c99;color:#f6ead0;padding:10px 16px;border-radius:6px;font-size:11px}

/* ---------- монстры ---------- */
.monster-pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:16px}
.monster-card{border:1px solid var(--line);background:#12130999;border-radius:7px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px}
.monster-card .mon-svg{width:64px;height:64px}
.monster-card .mon-name{font:12px var(--serif);color:var(--text)}
.monster-card .mon-tier{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.arena.monster .fighters{grid-template-columns:1fr 1fr}
.arena.monster #battleP2Svg{--is-monster:1}

/* ---------- профиль / уровни ---------- */
.stat-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stat-chip{border:1px solid #ffffff12;background:#12130999;border-radius:7px;padding:12px;text-align:center}
.stat-chip .chip-num{font-size:22px;color:var(--gold2);font-weight:700}
.stat-chip .chip-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.level-table{width:100%;border-collapse:collapse;font-size:12px}
.level-table th{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 9px 9px;font-weight:400}
.level-table td{padding:8px 9px;border-top:1px solid #ffffff0f}
.level-table td:nth-child(2),.level-table th:nth-child(2){text-align:right}
.level-table td:nth-child(3),.level-table th:nth-child(3){text-align:right}
.level-table tbody tr.current{background:#241f1480}.level-table tbody tr.current td{color:var(--gold2)}
.level-table tbody tr.done td{color:#7f7e72}
.level-table-wrap{border:1px solid #ffffff0f;border-radius:6px;overflow:hidden}

/* ---------- тост ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#161711f2;border:1px solid #bd965c99;color:var(--text);padding:13px 22px;border-radius:8px;font-size:13px;opacity:0;transition:.25s;z-index:99;max-width:480px;text-align:center;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,-6px)}
.toast.err{border-color:var(--red);background:#241312f2;color:#f2d5d0}

.dev-note{font-size:11px;color:#6d6c60;margin-top:30px;line-height:1.5}

.svg-knight{position:relative}
.svg-knight svg{display:block;animation:idleBob 3.2s ease-in-out infinite;transform-origin:50% 100%}
@keyframes idleBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.float-text{position:absolute;left:50%;top:-6px;transform:translate(-50%,0);font:bold 17px var(--serif);white-space:nowrap;pointer-events:none;text-shadow:0 2px 0 #000, 0 0 10px #000a;animation:floatUp 0.95s ease-out;z-index:6}
.float-text.dmg{color:#ffc9ae}.float-text.crit{color:#ff9c55;font-size:20px;font-weight:900;text-shadow:0 0 14px #ff7a2a}
.float-text.block{color:#a9c2d8}.float-text.dodge{color:#dde6f5}.float-text.heal{color:#9fe8a2;font-size:15px}
@keyframes floatUp{0%{opacity:1;transform:translate(-50%,6px)}70%{opacity:.9;transform:translate(-50%,-34px)}100%{opacity:0;transform:translate(-50%,-52px)}}
.svg-knight.hit-flash svg,.hit-flash{animation:hitFlash .42s linear}
@keyframes hitFlash{0%{filter:none}15%{filter:brightness(2.1) saturate(4) hue-rotate(-18deg)}55%{filter:brightness(1.25) saturate(2.2)}100%{filter:none}}
.arena::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:radial-gradient(ellipse at 50% 100%, rgba(80,60,25,.32) 0, rgba(0,0,0,0) 66%);pointer-events:none}
.hp-fill.heal{background:linear-gradient(90deg,#7fd08a,#b8f0c8)}
.hp-fill.damage{animation:hpPulse .5s linear}
@keyframes hpPulse{0%,100%{filter:none}40%{filter:brightness(1.6)} }
.battleCaption-pop{animation:capFlash .5s ease}
@keyframes capFlash{0%{transform:scale(1.12);color:#ffd9a0}100%{transform:scale(1)}}

/* ---------- адаптив ---------- */
@media(max-width:900px){
  .card-wrap{grid-template-columns:1fr}
  .bag-split{grid-template-columns:1fr}
  .lobby-grid{grid-template-columns:1fr}
  .combat-grid{grid-template-columns:1fr}
  .turn-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .shell{padding:17px 14px 28px}
  .brand-name{font-size:14px}
  .top-meta{font-size:10px;gap:8px}
  .form-note{max-width:150px}
  .direction-grid{grid-template-columns:1fr;gap:6px}
  .skin-grid{grid-template-columns:repeat(3,1fr)}
  .arena{min-height:300px}
  .hp-line,.hp-track{width:92%}
  .timer{font-size:24px}
}