*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#171512;color:#f4ead4;font-family:Arial,Helvetica,sans-serif;user-select:none;-webkit-user-select:none;touch-action:none}button{font:inherit;cursor:pointer;color:inherit;border:0;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #ffe4a3;outline-offset:5px}button:disabled{cursor:default}.svg-library{position:absolute;width:0;height:0;overflow:hidden}svg{width:100%;height:100%;display:block}#game-board{position:absolute;width:1280px;height:720px;left:50%;top:50%;transform-origin:center;overflow:hidden;background:#d7bc8d}#game-canvas{position:absolute;inset:0;width:100%;height:100%;outline:none}.hidden{display:none!important}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(29,22,17,.35),transparent 22%,transparent 72%,rgba(29,22,17,.35)),radial-gradient(ellipse at 50% 44%,transparent 54%,rgba(36,24,12,.14))}#damage-flash{position:absolute;inset:0;box-shadow:inset 0 0 150px #a7180c;opacity:0;pointer-events:none}#hud{position:absolute;inset:0;pointer-events:none}.player-status{position:absolute;left:28px;top:24px;display:flex;align-items:center;width:338px;height:88px;filter:drop-shadow(0 4px 7px #0005)}.portrait{width:81px;height:91px;background:linear-gradient(145deg,#716450,#23231f 30%,#0e1313);clip-path:polygon(50% 0,91% 20%,100% 61%,76% 89%,50% 100%,14% 82%,0 44%,12% 16%);padding:14px 12px;color:#e5d5ae;position:relative;z-index:2;border-bottom:4px solid #c3af82}.status-body{width:269px;margin-left:-8px}.fighter-name{font-size:13px;font-weight:700;letter-spacing:.2px;padding:0 0 7px 16px;text-shadow:0 2px 3px #221}.fighter-name span{font-size:9px;color:#e4d3ae;letter-spacing:.2px;margin-left:8px}.meter{height:28px;margin-bottom:5px;padding:3px 12px 3px 7px;background:#252623;clip-path:polygon(0 0,100% 0,95% 100%,0 100%);position:relative;border-top:1px solid #b0a084;border-bottom:1px solid #b0a084}.meter-fill{height:100%;width:100%;transition:width .12s;background:linear-gradient(90deg,#921f28,#d3383d)}.stamina{height:23px}.stamina .meter-fill{background:linear-gradient(90deg,#bd7e26,#efbd55)}.meter-text{position:absolute;inset:0;display:flex;align-items:center;gap:14px;padding-left:17px;font-size:13px;letter-spacing:.8px;font-weight:bold;text-shadow:0 1px 3px #301c15}.meter-text b{font-size:12px;opacity:.8}.audience-status{position:absolute;right:29px;top:25px;width:330px;height:68px;display:flex;align-items:center;gap:13px;padding:8px 15px 7px 11px;background:linear-gradient(120deg,#282923,#20201dec);border:1px solid #a69b7a;border-left:3px solid #c7a860;box-shadow:0 4px 8px #0003}.laurel{width:43px;height:47px;color:#d3ac54;flex-shrink:0}.favor-body{flex:1}.favor-label{font-size:11px;font-weight:700;letter-spacing:.2px;white-space:nowrap}.favor-track{height:10px;margin-top:7px;background:#444039}.favor-track>div{height:100%;width:0;background:linear-gradient(90deg,#bb8030,#f9ca66);transition:width .3s}#favor-caption{font-size:9px;letter-spacing:.2px;color:#c6b99a;margin-top:5px}#favor-value{font-size:20px;font-family:Georgia,serif;color:#d7b874}.wave-panel{position:absolute;right:29px;top:105px;display:flex;align-items:center;gap:10px;background:#282720ed;border:1px solid #716a54;padding:11px 15px;font-size:13px;letter-spacing:.2px}.wave-panel>svg{width:17px;height:17px;color:#e6d4ae}.wave-panel b{font-weight:400;color:#e3c88e;padding-left:5px}.wave-dots{display:flex;gap:5px;margin-left:8px}.wave-dots i{width:6px;height:6px;border:1px solid #b8a275;transform:rotate(45deg)}.wave-dots i.active{background:#dabc76}.utility{position:absolute;right:29px;top:162px;display:flex;gap:7px;pointer-events:auto}.utility button{width:31px;height:31px;padding:7px;background:#292820d9;border:1px solid #9a8c6b;color:#dbca9e}.utility button:hover{background:#56452d}.utility button.muted{opacity:.55}.utility button.muted:after{content:'';display:block;width:21px;height:2px;background:#dbca9e;transform:translate(-2px,-10px) rotate(-45deg)}#enemy-label{position:absolute;left:50%;top:28%;width:156px;text-align:center;transform:translate(-50%,-100%);pointer-events:none;text-shadow:0 1px 4px #211;font-size:13px;letter-spacing:.2px;font-weight:bold}.enemy-track{margin:7px auto 4px;width:112px;height:5px;background:#28251c;border:1px solid #d6c39c88;box-shadow:0 2px 3px #0002}.enemy-track div{background:#b7312c;height:100%;transition:width .15s}.art{display:block;object-fit:contain}.art-node{width:42px;height:42px;margin:0 auto 7px;filter:drop-shadow(0 2px 5px #0007);background:radial-gradient(circle at 50% 46%,rgba(255,231,176,.15),transparent 64%)}.art-goods{width:68px;height:68px;margin:0 auto 9px;filter:drop-shadow(0 3px 8px #0008)}.guard-track{width:86px;height:4px;margin:3px auto 4px;background:#20242b;border-color:#a9bed3aa}.guard-track div{background:linear-gradient(90deg,#6f93b4,#a9c8e2)}#enemy-intent{font-size:10px;letter-spacing:.2px;color:#ffe7b1}#announcement{position:absolute;top:170px;left:300px;right:300px;text-align:center;pointer-events:none;font-family:Georgia,serif;font-size:32px;color:#fff3d7;text-shadow:0 3px 6px #3f281b;opacity:0;transform:translateY(-7px);transition:opacity .25s,transform .25s}#announcement.show{opacity:1;transform:translateY(0)}#announcement small{display:block;font-family:Arial,sans-serif;font-size:11px;letter-spacing:.4px;margin-top:12px;color:#f7dba5}#abilities{position:absolute;left:30px;bottom:35px;display:flex;gap:14px}.ability{position:relative;width:84px;height:109px;background:none;text-align:center;padding:0}.diamond{display:block;position:relative;margin:4px auto 0;width:62px;height:62px;background:linear-gradient(140deg,#47433a,#171c1d 80%);border:2px solid #b1a180;box-shadow:inset 0 0 0 3px #393a34,0 3px 7px #0005;transform:rotate(45deg);transition:border .15s,background .15s}.diamond svg{padding:12px;transform:rotate(-45deg);color:#e1d7bc}.ability:hover .diamond,.ability.active .diamond{border-color:#ffe0a0;background:#675032}.ability.active .diamond svg{color:#fff1c6}.ability kbd{position:relative;display:inline-block;margin-top:0;top:-1px;z-index:2;background:#292922;border:1px solid #a89d81;min-width:23px;padding:3px 5px;font-size:10px}.ability-name{display:block;font-size:10px;letter-spacing:.2px;margin-top:4px;color:#eee0c1;text-shadow:0 1px 2px #211}.cooldown{position:absolute;inset:0;display:grid;place-items:center;transform:rotate(-45deg);font-size:23px;font-weight:bold;text-shadow:0 2px 5px #000}.ability.cooling svg{opacity:.18}.controls-hint{position:absolute;bottom:32px;left:452px;right:285px;display:flex;gap:16px;align-items:center;justify-content:center;font-size:10px;color:#f7ebce;text-shadow:0 1px 3px #221}.controls-hint span{white-space:nowrap}.controls-hint kbd{font-size:8px;background:#29281ed9;padding:4px 5px;border:1px solid #a0937599;margin-right:4px;text-shadow:none}.arena-caption{position:absolute;right:30px;bottom:43px;text-align:right}.arena-caption span{font-size:11px;letter-spacing:.3px}.arena-caption small{display:block;font-size:9px;letter-spacing:.2px;color:#e1ceaa;margin-top:7px}.prototype-tag{position:absolute;bottom:11px;right:30px;font-size:8px;letter-spacing:.3px;opacity:.5}.intro-card{position:absolute;left:50%;bottom:106px;transform:translateX(-50%);width:370px;padding:22px 30px 20px;text-align:center;background:linear-gradient(135deg,#26271fef,#24221df5);border:1px solid #b09b6b;box-shadow:0 10px 55px #29201455}.eyebrow{font-size:10px;letter-spacing:.6px;color:#ccb17b;display:flex;align-items:center;justify-content:center;gap:12px}.eyebrow span{width:25px;height:1px;background:#826f49}.intro-card h1{font-family:Georgia,serif;font-size:25px;font-weight:normal;line-height:1.2;margin:13px -15px 8px}.intro-card p{font-size:11px;color:#c9c1ac;margin:0 0 18px}.gold-button{width:100%;min-height:43px;background:linear-gradient(100deg,#bc9657,#e5c47f);color:#2f281d;font-size:12px;font-weight:700;letter-spacing:.4px;box-shadow:inset 0 0 0 1px #fff3;transition:filter .15s,transform .15s}.gold-button:hover{filter:brightness(1.13);transform:translateY(-1px)}.gold-button span{float:right;font-size:18px;margin-right:12px;line-height:15px}.intro-card>small{display:block;color:#b4a88c;font-size:8px;margin-top:13px;letter-spacing:.3px}.modal{position:absolute;inset:0;display:grid;place-items:center;background:#191c1ab3;backdrop-filter:blur(5px)}.modal-card{width:425px;min-height:380px;background:linear-gradient(130deg,#303027,#1e211e);border:1px solid #aa9260;box-shadow:0 20px 90px #0008;text-align:center;padding:28px 45px}.modal-laurel{width:64px;height:64px;margin:0 auto 13px;color:#d4b368}.modal-card h2{font-family:Georgia,serif;font-weight:normal;font-size:39px;margin:14px 0 12px}.modal-card p{font-size:12px;line-height:1.7;color:#c6bda7;margin-bottom:24px}.secondary-button{display:block;background:none;border:1px solid #786b4c;width:100%;padding:12px;font-size:11px;letter-spacing:.3px;margin-top:10px}.secondary-button:hover{background:#50462e}.modal-controls{font-size:9px;line-height:1.9;margin-top:22px;color:#a79f8b}#result-stats{display:flex;justify-content:space-around;margin:0 0 22px}#result-stats b{display:block;font-family:Georgia,serif;font-size:25px;color:#e0bf78}#result-stats small{display:block;font-size:9px;letter-spacing:.2px;margin-top:5px;color:#aba38e}/* Взмах и укол — один и тот же трезубец, поэтому их различает наклон:
лежащий поперёк читается как размах, поднятый — как выпад. */
#btn-attack .diamond svg{transform:rotate(-118deg)}
#combat-hint{position:absolute;bottom:152px;left:50%;transform:translateX(-50%);background:#282820dd;padding:10px 18px;border-left:2px solid #dcba71;font-size:11px;color:#eadabd;white-space:nowrap}.float-text{position:absolute;pointer-events:none;transform:translate(-50%,-50%);font-size:23px;font-weight:bold;color:#fff0bc;text-shadow:0 2px 4px #40270f}.float-text.blocked{font-size:13px;color:#cbe1ef}.float-text.hurt{color:#ffd7c7}#floating-text{position:absolute;inset:0;pointer-events:none}#loading-screen{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:62px;background:linear-gradient(180deg,rgba(18,19,14,.42),rgba(18,19,14,0) 26%,rgba(15,16,11,.22) 52%,rgba(12,13,9,.88) 88%,rgba(11,12,8,.96)),url(../img/loading_arena.webp) center/cover no-repeat,#24271f;transition:opacity .4s ease}#loading-screen.hidden{display:flex!important;opacity:0;pointer-events:none}#loading-screen p{font-size:11px;letter-spacing:.5px;color:#dbcaa6;text-shadow:0 2px 7px #000a}.loading-emblem{font-family:Georgia,serif;font-size:60px;color:#d8bd7c;text-shadow:0 4px 14px #000b}#touch-stick,#btn-dodge{display:none}.touch #touch-stick{display:block;position:absolute;bottom:45px;left:52px;width:115px;height:115px;border-radius:50%;border:2px solid #d8c9a67a;background:#25261f55}.touch #touch-stick div{position:absolute;left:33px;top:33px;width:45px;height:45px;border-radius:50%;background:#c9b17d88;border:1px solid #eee1bf}.touch #abilities{left:auto;right:24px;bottom:46px}.touch #btn-dodge{display:block;position:absolute;right:74px;bottom:175px;border:1px solid #c4ae80;width:53px;height:53px;background:#282a22c9;font-size:25px}.touch #btn-dodge small{display:block;font-size:8px;letter-spacing:.2px}.touch .controls-hint,.touch .arena-caption{display:none}.touch .intro-card{bottom:78px}.touch .ability-name{font-size:9px}.touch .ability kbd{display:none}.touch .ability{height:80px}.touch #combat-hint{bottom:22px}
/* Leave the fighter visible while the first-bout invitation is open. */
.intro-card{left:74%;bottom:94px}.touch .intro-card{left:50%;bottom:80px}
/* ---- Экраны вне боя: меню, лудус, карта забега, лавка, итоги ---- */
#ui{position:absolute;inset:0;display:grid;place-items:center;z-index:12;background:radial-gradient(ellipse at 50% 45%,#1a1c18b0,#12130fd8);backdrop-filter:blur(4px)}
#game-board[data-screen]:not([data-screen=fight]) #hud,
#game-board[data-screen]:not([data-screen=fight]) #abilities,
#game-board[data-screen]:not([data-screen=fight]) .controls-hint,
#game-board[data-screen]:not([data-screen=fight]) .arena-caption,
#game-board[data-screen]:not([data-screen=fight]) #enemy-label,
#game-board[data-screen]:not([data-screen=fight]) #combat-hint,
#game-board[data-screen]:not([data-screen=fight]) #touch-stick,
#game-board[data-screen]:not([data-screen=fight]) #btn-dodge{display:none}
.screen-card{width:1130px;padding:24px 34px 22px;background:linear-gradient(130deg,#303027,#1e211ef2);border:1px solid #aa9260;box-shadow:0 22px 90px #0009}
.screen-card h2{font-family:Georgia,serif;font-size:30px;font-weight:normal;margin:10px 0 6px;letter-spacing:1px}
.screen-card p{font-size:12px;line-height:1.7;color:#c6bda7;margin:0 0 22px}
.screen-card .gold-button{margin-top:6px}
.screen-head{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid #6d6450;padding-bottom:13px;margin-bottom:17px}
.screen-head h2{margin:0}
.screen-head small{display:block;font-size:10px;letter-spacing:.2px;color:#b3a889;margin-top:6px}
.purse{display:flex;align-items:center;gap:9px;padding:7px 14px;background:#22231ecc;border:1px solid #7d724f;border-left:3px solid #c7a860}
.purse svg{width:26px;height:26px;color:#d3ac54;flex-shrink:0}
.purse b{font-family:Georgia,serif;font-size:22px;color:#e2c37e}
.purse small{font-size:9px;letter-spacing:.2px;color:#b0a689}
.run-purse{display:flex;gap:10px}
.columns{display:flex;gap:16px}
.column{flex:1;background:#23241fa6;border:1px solid #5d5844;padding:13px 14px 8px}
.column h3{font-size:9px;letter-spacing:2.6px;color:#d8bb7c;margin:0 0 12px;font-weight:800}
.buy-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #4a4638}
.buy-row:first-of-type{border-top:0}
.buy-row.picked{background:#3a3524;box-shadow:inset 3px 0 0 #d8bb7c;padding-left:9px;margin-left:-9px}
.buy-row.locked-soon{opacity:.6}
.buy-body{flex:1;min-width:0}
.buy-body b{display:block;font-size:12px;letter-spacing:.2px}
.buy-body small{display:block;font-size:9px;color:#b0a78e;margin-top:3px}
.pips{display:flex;gap:4px;margin-top:6px}
.pips i{width:9px;height:9px;border:1px solid #8b8064;transform:rotate(45deg)}
.pips i.on{background:#d8bb7c;border-color:#e8d2a0}
.buy-button{display:flex;align-items:center;gap:6px;background:linear-gradient(100deg,#bc9657,#e5c47f);color:#2f281d;font-size:12px;font-weight:800;padding:8px 11px;min-width:66px;justify-content:center}
.buy-button svg{width:15px;height:15px}
.buy-button:hover:not(:disabled){filter:brightness(1.13)}
.buy-button:disabled{background:#3b382e;color:#8d8570}
.buy-button.ghost{background:none;border:1px solid #8a7c57;color:#e0cd9f;font-size:11px;letter-spacing:.2px}
.buy-max{font-size:10px;letter-spacing:.2px;color:#9d9480;min-width:66px;text-align:center}
.screen-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:16px;border-top:1px solid #6d6450;padding-top:14px}
.screen-foot small{font-size:10px;letter-spacing:.2px;color:#b3a889}
.screen-foot .gold-button{width:210px;margin-top:0}
.ladder{display:flex;gap:9px;align-items:flex-start}
.ladder-step{flex:1;display:flex;flex-direction:column;gap:7px;opacity:.62;transition:opacity .2s}
.ladder-step.now{opacity:1}
.ladder-step.past{opacity:.78}
.step-no{display:block;text-align:center;font-family:Georgia,serif;font-size:13px;color:#cbb078;letter-spacing:2px;margin-bottom:2px}
.node{display:block;width:100%;background:#262720e8;border:1px solid #6a624a;padding:12px 9px 11px;text-align:center;position:relative;transition:border-color .15s,background .15s,transform .15s}
.node b{display:block;font-size:11px;letter-spacing:.2px;line-height:1.3}
.node small{display:block;font-size:9px;color:#aea691;margin-top:5px;line-height:1.4}
.node-pay{position:absolute;top:5px;right:7px;font-size:9px;color:#e0bf78}
.ladder-step.now .node.active{cursor:pointer}
.ladder-step.now .node.active:hover{border-color:#ffe0a0;background:#4a3d27;transform:translateY(-2px)}
.node-elite,.node-champion{border-color:#a05a42}
.node-rest{border-color:#5f7f62}
.node-shop{border-color:#7b7350}
.node.taken{opacity:.8;border-style:dashed}
.shelf{display:flex;gap:14px;justify-content:center}
.goods{flex:1;max-width:300px;background:#23241fcc;border:1px solid #6a624a;padding:18px 16px 16px;text-align:center}
.goods-slot{display:block;font-size:9px;letter-spacing:.3px;color:#b09a68}
.goods b{display:block;font-size:13px;letter-spacing:.2px;margin:7px 0 5px}
.goods small{display:block;font-size:10px;color:#aea691;margin-bottom:14px}
.gold-button:disabled{background:#3b382e;color:#8d8570;box-shadow:inset 0 0 0 1px #ffffff14}
.gold-button:disabled:hover{filter:none;transform:none}
.goods:has(.gold-button:disabled){opacity:.62}
/* ---- Приговор и итог: арена остаётся картиной, текст ложится на неё ---- */
#ui[data-screen=defeat],#ui[data-screen=runend]{display:block;backdrop-filter:none;background:linear-gradient(180deg,rgba(18,19,14,.55),rgba(18,19,14,0) 24%,rgba(18,19,14,.16) 46%,rgba(13,14,10,.84) 74%,rgba(11,12,8,.97))}
.verdict{position:absolute;left:50%;bottom:50px;transform:translateX(-50%);width:1006px;display:flex;gap:34px;align-items:flex-end}
.verdict-body{flex:1;min-width:0}
.verdict-eyebrow{display:flex;align-items:center;gap:13px;font-size:10px;letter-spacing:.6px;color:#ccb17b}
.verdict-eyebrow span{width:96px;height:1px;background:#826f49}
.verdict h2{font-family:Georgia,serif;font-size:37px;font-weight:normal;letter-spacing:.5px;margin:13px 0 9px;text-shadow:0 3px 12px #000a}
.verdict p{font-size:12px;line-height:1.75;color:#cfc5ac;margin:0 0 21px;max-width:530px;text-shadow:0 2px 7px #0008}
.verdict-acts{display:flex;gap:12px}
.verdict-acts .gold-button,.verdict-acts .secondary-button{width:auto;margin:0;padding:13px 27px;font-size:12px;font-weight:700;letter-spacing:.4px}
.verdict-read{width:318px;flex-shrink:0;background:rgba(24,25,19,.84);border:1px solid #7d6a45;border-left:3px solid #c7a860;padding:15px 18px 13px}
.read-value{display:flex;align-items:baseline;gap:11px}
.read-value b{font:400 34px Georgia,serif;color:#e2c37e;line-height:1}
.read-value small{font-size:9px;letter-spacing:.2px;color:#ab9e80}
.read-track{position:relative;height:10px;margin:13px 0 27px;background:#3a382f;border:1px solid #6d6450}
.read-track i{display:block;height:100%;background:linear-gradient(90deg,#bb8030,#f9ca66)}
.read-track u{position:absolute;top:-5px;bottom:-5px;width:2px;background:#efdcae;text-decoration:none;box-shadow:0 0 6px #0007}
.read-track em{position:absolute;top:14px;transform:translateX(-50%);font-style:normal;font-size:9px;letter-spacing:.2px;color:#c7b995;white-space:nowrap}
.read-cells{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #4a4638;padding-top:12px}
.read-cells b{display:block;font:400 21px Georgia,serif;color:#ddbe7d;line-height:1.1}
.read-cells small{display:block;font-size:9px;letter-spacing:.2px;color:#a89f88;margin-top:4px}
/* ---- Двор школы как главный экран: слой поверх 3D, без затемнения ---- */
#wipe{position:absolute;inset:0;background:#fff1cd;opacity:0;pointer-events:none;z-index:18}
#ui[data-screen=ludus],#ui[data-screen=travel]{background:none;backdrop-filter:none;display:block;pointer-events:none}
#ui[data-screen=ludus] .pin,#ui[data-screen=ludus] .plaque,
#ui[data-screen=ludus] .spot-panel{pointer-events:auto}
.ludus-bar{position:absolute;left:30px;top:26px;display:flex;gap:12px}
.ludus-bar .plaque{position:static}
.plaque{display:flex;align-items:center;gap:10px;background:rgba(24,25,19,.82);border:1px solid #7d6a45;border-left:3px solid #c7a860;padding:9px 15px}
.plaque svg{width:26px;height:26px;color:#d3ac54;flex-shrink:0}
.plaque b{display:block;font:400 20px Georgia,serif;color:#e2c37e;line-height:1.1}
.plaque small{display:block;font-size:9px;letter-spacing:.2px;color:#ab9e80;margin-top:2px}
.ludus-tag{position:absolute;left:30px;bottom:26px;font:700 8px Arial;letter-spacing:3px;color:#e6d6b0;text-shadow:0 1px 4px #2b1f12}
.pins{position:absolute;inset:0}
.pin{position:absolute;transform:translate(-50%,-50%);background:none;padding:0;display:flex;align-items:center;gap:9px;white-space:nowrap}
.pin-dot{width:13px;height:13px;background:#f0dcae;border:2px solid #7a6337;transform:rotate(45deg);box-shadow:0 0 12px rgba(255,220,150,.75);flex-shrink:0;transition:background .15s,transform .15s}
.pin:hover .pin-dot{background:#ffe9b4;transform:rotate(45deg) scale(1.25)}
.pin-label{background:rgba(26,27,21,.9);border:1px solid #c0a166;border-left:3px solid #e3c88e;padding:7px 12px;text-align:left;transform-origin:left center;transition:transform .16s ease-out}
.pin-label b{display:block;font:700 12px Arial;letter-spacing:.2px;color:#f3e2b9}
.pin-label small{display:block;font:400 9px Arial;letter-spacing:.8px;color:#b6a684;margin-top:4px}
.pin-gate .pin-label{background:linear-gradient(100deg,#bc9657,#e5c47f);border-color:#8a6a34}
.pin-gate .pin-label b{color:#2f281d;font-size:14px;letter-spacing:.3px}
.pin-gate .pin-label small{color:#4a3c22}
.spot-panel{position:absolute;right:34px;top:96px;width:352px;background:linear-gradient(130deg,#2c2d25f2,#1d201df2);border:1px solid #aa9260;box-shadow:0 18px 60px rgba(0,0,0,.6);padding:17px 19px 15px}
.spot-panel header{border-bottom:1px solid #6d6450;padding-bottom:11px;margin-bottom:6px}
.spot-panel header b{display:block;font:400 19px Georgia,serif;color:#f0e2c0;letter-spacing:1px}
.spot-panel header small{display:block;font-size:10px;letter-spacing:.2px;color:#b3a889;margin-top:5px}
.spot-panel .secondary-button{margin-top:13px}
.pin.flip{flex-direction:row-reverse}
.pin.flip .pin-label{border-left:1px solid #c0a166;border-right:3px solid #e3c88e;text-align:right;transform-origin:right center}
.pin-gate.flip .pin-label{border-left-color:#8a6a34}
.pin:hover .pin-label{transform:scale(1.11)}
.spot-panel .secondary-button{font-size:11px;letter-spacing:.2px}
/* Экран гладиатора: живой герой в центре, вокруг три колонки. Фон не
затемняется целиком — затемнены только края, герой остаётся в свете. */
#ui[data-screen=gladiator]{display:block;pointer-events:none;backdrop-filter:none;background:radial-gradient(ellipse 34% 62% at 40% 52%,transparent 55%,rgba(14,14,10,.55) 100%),linear-gradient(90deg,rgba(14,14,10,.72),rgba(14,14,10,0) 23%,rgba(14,14,10,0) 62%,rgba(14,14,10,.78) 72%)}
#ui[data-screen=gladiator]>*{pointer-events:auto;animation:gladIn .45s ease both}
@keyframes gladIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.glad-top{position:absolute;left:30px;top:26px;display:flex;gap:12px}
.glad-top .plaque{position:static}
.glad-back{cursor:pointer;text-align:left}
.glad-back:hover{border-color:#d8bb7c;background:rgba(58,53,36,.9)}
.glad-heroes{position:absolute;left:30px;top:112px;width:208px;display:flex;flex-direction:column;gap:9px}
.glad-heroes h3{margin:0 0 3px;font:400 12px Georgia,serif;letter-spacing:1.2px;color:#c8b78e;text-transform:none}
.glad-hero{display:flex;align-items:center;gap:12px;padding:10px 12px;background:rgba(28,29,23,.86);border:1px solid #5d5440;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.glad-hero:hover{border-color:#a8925f}
.glad-hero.picked{border-color:#d8bb7c;background:rgba(66,56,34,.92);box-shadow:inset 3px 0 0 #e0c27f}
.glad-hero .diamond{width:38px;height:38px;margin:4px 6px;flex-shrink:0}
.glad-hero .diamond svg{padding:8px}
.glad-hero-text b{display:block;font:400 16px Georgia,serif;color:#f0e2c0}
.glad-hero-text small{display:block;font-size:10px;color:#c5b58f;margin-top:2px}
.glad-hero-ranks{display:block;font-style:normal;font-size:9px;color:#9f9479;margin-top:5px;letter-spacing:.3px}
.glad-hero-soon{cursor:default;opacity:.55;border-style:dashed;font-size:10px;color:#b4a88a}
.glad-title{position:absolute;left:250px;width:560px;top:34px;text-align:center;pointer-events:none!important}
.glad-title b{display:block;font:400 36px Georgia,serif;color:#f4e3b8;text-shadow:0 3px 12px rgba(0,0,0,.7);letter-spacing:1px}
.glad-title small{display:block;font-size:12px;letter-spacing:2px;color:#e0c58a;margin-top:4px;text-shadow:0 2px 6px #000}
.glad-title i{display:block;font-style:normal;font-size:9px;color:#d8ccb0;opacity:.7;margin-top:9px;text-shadow:0 1px 4px #000}
.glad-stats{position:absolute;left:290px;width:480px;bottom:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;pointer-events:none!important}
.glad-stats div{background:rgba(22,23,18,.82);border:1px solid #6f6147;border-top:2px solid #c7a860;padding:8px 6px;text-align:center}
.glad-stats small{display:block;font-size:9px;letter-spacing:.4px;color:#b3a687}
.glad-stats b{display:block;font:400 22px Georgia,serif;color:#f0d9a0;margin-top:3px}
.glad-panel{position:absolute;right:30px;top:26px;bottom:26px;width:400px;display:flex;flex-direction:column;background:linear-gradient(160deg,#2d2d25f4,#1b1d1af4);border:1px solid #aa9260;box-shadow:0 18px 60px rgba(0,0,0,.6)}
.glad-tabs{display:flex;border-bottom:1px solid #6d6450}
.glad-tab{flex:1;background:none;padding:15px 0 13px;font:400 15px Georgia,serif;letter-spacing:1px;color:#b3a78a;border-bottom:2px solid transparent;margin-bottom:-1px}
.glad-tab:hover{color:#eadcb7}
.glad-tab.on{color:#f3e1b2;border-bottom-color:#d8bb7c;background:linear-gradient(180deg,transparent,rgba(216,187,124,.08))}
.glad-body{flex:1;overflow-y:auto;padding:14px 18px 18px}
.glad-note{margin:0 0 12px;font-size:10px;line-height:1.5;color:#a99f86}
.kit-card{display:grid;grid-template-columns:1fr auto;gap:8px 10px;margin-bottom:12px;padding:12px;background:rgba(18,19,15,.55);border:1px solid #4d4636}
.kit-card.picked{border-color:#d8bb7c;box-shadow:inset 3px 0 0 #e0c27f;background:rgba(60,51,31,.5)}
.kit-card.locked .kit-art{filter:grayscale(.85) brightness(.6)}
.kit-art{grid-column:1/-1;width:100%;height:150px;object-fit:contain;background:radial-gradient(ellipse at 50% 55%,rgba(255,214,150,.16),transparent 70%)}
.kit-art-icon{display:grid;place-items:center}
.kit-art-icon svg{width:64px;height:64px;color:#c9b27a}
.kit-info b{display:block;font:400 18px Georgia,serif;color:#f0e2c0}
.kit-info small{display:block;font-size:10px;color:#b3a889;margin-top:3px}
.kit-moves{list-style:none;margin:9px 0 0;padding:0}
.kit-moves li{display:flex;align-items:center;gap:8px;font-size:11px;color:#e3d5b3;padding:3px 0}
.kit-moves kbd{min-width:30px;text-align:center;font-size:9px;padding:2px 4px;background:#292922;border:1px solid #8b7f60;color:#d8c79c}
.kit-moves em{margin-left:auto;font-style:normal;font-size:10px;color:#b7aa89}
.kit-soon{margin:8px 0 0;font-size:10px;color:#d4a86a}
.kit-act{align-self:end}
/* ══════════════════════════════════════════════════════════════════
БРОНЗА И ПАПИРУС — яркая тема поверх исходной.
Приём взят из merlin-td: заголовки и кнопки набраны Kurale, у светлого
текста жёсткая тёмная обводка, крупные заголовки залиты золотом, панели —
светлый папирус с тёмной рамкой и тёмным текстом, кнопки — яркие, со
«ступенькой» снизу. Прежние тусклые панели на тёмном стекле терялись на
фоне сцены; теперь каждая надпись читается с одного взгляда.
Слой лежит в конце файла и только перекрывает: откатить тему — значит
удалить этот блок.
══════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Kurale';src:url('../fonts/Kurale-Regular.ttf') format('truetype');font-display:swap}
:root{
--font-title:'Kurale',Georgia,'Times New Roman',serif;
--ink:#3b2210;--ink-soft:#6e4626;--frame:#7a3d1c;--wine:#8e2a1f;
--papyrus:radial-gradient(ellipse at 30% 18%,#fffaea 0%,#f7e7c0 45%,#e9d096 100%);
--papyrus-deep:radial-gradient(ellipse at 40% 20%,#fbeecd 0%,#efd9a6 60%,#e0c083 100%);
--wine-plate:linear-gradient(180deg,#a8382a 0%,#7f2419 60%,#651b12 100%);
--gold-fill:linear-gradient(180deg,#ffe99f 0%,#f3bd48 55%,#cf8d1f 100%);
--outline:-1px -1px 0 #2a1606,1px -1px 0 #2a1606,-1px 1px 0 #2a1606,1px 1px 0 #2a1606,0 2px 0 #2a1606,0 3px 7px rgba(0,0,0,.55);
--outline-big:-2px -2px 0 #2a1606,2px -2px 0 #2a1606,-2px 2px 0 #2a1606,2px 2px 0 #2a1606,0 4px 0 #2a1606,0 6px 14px rgba(0,0,0,.6);
--panel-edge:0 10px 28px rgba(0,0,0,.55),inset 0 0 0 2px rgba(240,194,90,.6),inset 0 0 26px rgba(150,95,35,.28);
}
/* ── Золотые заголовки над сценой ─────────────────────────────── */
.glad-title b,.verdict h2,.loading-emblem,#announcement,.plaque b,.purse b,.read-value b{
font-family:var(--font-title);font-weight:400;
background:linear-gradient(180deg,#fffbe6 0%,#ffe39a 45%,#f0b43c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
text-shadow:none;
filter:drop-shadow(1px 0 0 #3a1f08) drop-shadow(-1px 0 0 #3a1f08) drop-shadow(0 -1px 0 #3a1f08) drop-shadow(0 3px 0 #3a1f08) drop-shadow(0 5px 9px rgba(0,0,0,.6));
}
#announcement small{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff3cf;font-family:var(--font-title);font-size:15px;letter-spacing:.6px;text-shadow:var(--outline)}
.glad-title b{font-size:44px}
#announcement{font-size:40px}
/* ── Светлые надписи над сценой: обводка вместо тусклоты ───────── */
.fighter-name,.meter-text,.favor-label,#favor-caption,.wave-panel,.ability-name,.controls-hint,.arena-caption,
#enemy-label,#enemy-intent,.float-text,.glad-title small,.glad-title i,.glad-heroes h3,.verdict-eyebrow,.verdict p,
.plaque small,.purse small,.read-value small,.read-cells small,.read-track em,#loading-screen p{
color:#fff3cf;text-shadow:var(--outline);
}
.fighter-name,.ability-name,#enemy-label,.glad-heroes h3,.float-text,.glad-title small,.wave-panel,.favor-label{font-family:var(--font-title);font-weight:400;letter-spacing:.5px}
.fighter-name{font-size:17px}
.fighter-name span{color:#ffe39a;font-family:var(--font-title);font-size:11px;text-shadow:var(--outline)}
.meter-text,.meter-text b{font-size:14px;color:#fffaf0}
.favor-label{font-size:14px}
#favor-value{font-family:var(--font-title);color:#ffe39a;text-shadow:var(--outline);font-size:24px}
.ability-name{font-size:13px;margin-top:6px}
.glad-title small{font-size:16px;letter-spacing:3px;color:#ffe39a}
.glad-title i{font-size:11px;opacity:1}
.glad-heroes h3{font-size:16px;letter-spacing:.8px;color:#ffe39a}
#enemy-label{font-size:16px}
#enemy-intent{font-size:12px;color:#ffe39a}
.float-text{font-size:28px;color:#fff3cf;text-shadow:var(--outline-big)}
.float-text.blocked{font-size:17px;color:#d8f0ff}
.float-text.hurt{color:#ffb9a3}
.verdict h2{font-size:46px}
.verdict p{font-size:14px}
.verdict-eyebrow{font-family:var(--font-title);font-size:14px;color:#ffe39a}
/* ── Плашки над сценой: вино с золотой каймой ──────────────────── */
.plaque,.purse,.verdict-read,.wave-panel,.audience-status,.glad-stats div{
background:var(--wine-plate);border:2px solid #f0c25a;
box-shadow:0 4px 0 rgba(40,15,5,.65),0 8px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,220,160,.35);
}
.plaque svg,.purse svg,.laurel{color:#ffe39a;filter:drop-shadow(0 2px 0 #3a1f08)}
.plaque b{font-size:24px}
.glad-stats small{color:#ffe7b6;text-shadow:var(--outline);font-size:11px}
.glad-stats b{font-family:var(--font-title);font-size:26px;color:#fff3cf;text-shadow:var(--outline)}
.glad-back:hover{background:linear-gradient(180deg,#c24634,#8e2a1f);border-color:#ffe08a}
/* ── Метки двора ───────────────────────────────────────────────── */
.pin-label{background:var(--papyrus);border:2px solid var(--frame);box-shadow:0 4px 0 rgba(40,15,5,.6),0 6px 14px rgba(0,0,0,.45)}
.pin-label b{font-family:var(--font-title);font-weight:400;font-size:15px;color:var(--ink);letter-spacing:.3px}
.pin-label small{color:var(--ink-soft)}
.pin-gate .pin-label{background:var(--gold-fill);border-color:#7a4a12}
.pin-gate .pin-label b{color:#3a1f08;font-size:16px}
.pin-dot{background:#ffe08a;border-color:#7a3d1c;box-shadow:0 0 14px rgba(255,210,110,.95)}
/* ── Папирусные панели ─────────────────────────────────────────── */
.spot-panel,.glad-panel,.screen-card,.modal-card,.intro-card{
background:var(--papyrus);border:3px solid var(--frame);color:var(--ink);box-shadow:var(--panel-edge);
}
.spot-panel header,.screen-head{border-bottom:2px solid rgba(122,61,28,.45)}
.spot-panel header b,.screen-card h2,.modal-card h2,.intro-card h1{
font-family:var(--font-title);font-weight:400;
background:linear-gradient(180deg,#b3461f 0%,#8e2a1f 60%,#5e170f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
text-shadow:none;filter:drop-shadow(0 1px 0 rgba(255,240,200,.9)) drop-shadow(0 2px 3px rgba(80,40,10,.35));
}
.spot-panel header b{font-size:24px}
.spot-panel header small,.screen-head small,.screen-card p,.modal-card p,.intro-card p,.intro-card>small,.modal-controls,.glad-note{color:var(--ink-soft);text-shadow:none}
.modal-card .eyebrow,.intro-card .eyebrow{color:var(--wine);text-shadow:none;font-family:var(--font-title);font-size:13px}
.eyebrow span{background:var(--frame)}
.buy-row{border-top:1px solid rgba(122,61,28,.3)}
.buy-row.picked{background:rgba(240,190,90,.35);box-shadow:inset 4px 0 0 var(--wine)}
.buy-body b{font-family:var(--font-title);font-weight:400;font-size:17px;color:var(--ink);letter-spacing:.2px}
.buy-body small{font-size:11px;color:var(--ink-soft);font-weight:600}
.pips i{border-color:var(--frame);background:rgba(255,250,235,.6)}
.pips i.on{background:var(--gold-fill);border-color:#7a4a12;box-shadow:0 0 6px rgba(240,180,60,.7)}
.buy-max{color:var(--ink-soft);font-family:var(--font-title);font-size:13px}
#result-stats b{font-family:var(--font-title);color:var(--wine);font-size:30px}
#result-stats small{color:var(--ink-soft);font-size:11px}
.modal-laurel{color:#c8902a}
/* ── Кнопки ────────────────────────────────────────────────────── */
.gold-button,.buy-button{
font-family:var(--font-title);font-weight:400;letter-spacing:.5px;
background:var(--gold-fill);color:#3a1f08;border:2px solid #fff0bf;border-radius:9px;
text-shadow:0 1px 0 rgba(255,245,210,.7);
box-shadow:0 4px 0 #7a4a12,0 7px 14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.5);
}
.gold-button{font-size:18px;min-height:48px}
.buy-button{font-size:16px;padding:8px 13px}
.gold-button:hover,.buy-button:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 6px 0 #7a4a12,0 0 22px rgba(255,210,110,.6),inset 0 1px 0 rgba(255,255,255,.55)}
.gold-button:active,.buy-button:active{transform:translateY(2px)!important;box-shadow:0 1px 0 #7a4a12,inset 0 1px 0 rgba(255,255,255,.4)}
.gold-button:disabled,.buy-button:disabled{background:linear-gradient(180deg,#cfc3a8,#a89a7c);color:#6a5d45;border-color:#e8dcc0;box-shadow:0 3px 0 #6d6048;text-shadow:none;filter:grayscale(.3)}
.buy-button svg{color:#7a3d0c}
.secondary-button,.buy-button.ghost{
font-family:var(--font-title);font-weight:400;letter-spacing:.5px;font-size:16px;
background:var(--wine-plate);color:#fff3cf;border:2px solid #f0c25a;border-radius:9px;text-shadow:var(--outline);
box-shadow:0 4px 0 #3e1109,0 7px 14px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,200,170,.35);
}
.secondary-button:hover,.buy-button.ghost:hover{background:linear-gradient(180deg,#c24634,#8e2a1f);filter:none;transform:translateY(-2px);box-shadow:0 6px 0 #3e1109,0 0 18px rgba(255,170,110,.45)}
.spot-panel .secondary-button{font-size:16px}
/* ── Экран гладиатора ──────────────────────────────────────────── */
.glad-hero{background:var(--wine-plate);border:2px solid rgba(240,194,90,.55);box-shadow:0 4px 0 rgba(40,15,5,.6),0 8px 16px rgba(0,0,0,.4)}
.glad-hero:hover{border-color:#f0c25a;background:linear-gradient(180deg,#b8402f,#86271b)}
.glad-hero.picked{background:var(--gold-fill);border-color:#fff0bf;box-shadow:0 4px 0 #7a4a12,0 0 22px rgba(255,210,110,.55)}
.glad-hero-text b{font-family:var(--font-title);font-size:19px;color:#fff3cf;text-shadow:var(--outline)}
.glad-hero-text small{font-size:12px;color:#ffe7b6;text-shadow:var(--outline)}
.glad-hero-ranks{font-size:11px;color:#ffe7b6;text-shadow:var(--outline)}
.glad-hero.picked .glad-hero-text b{color:#3a1f08;text-shadow:0 1px 0 rgba(255,245,210,.8)}
.glad-hero.picked .glad-hero-text small,.glad-hero.picked .glad-hero-ranks{color:#6e3f12;text-shadow:none}
.glad-hero-soon{background:rgba(40,20,10,.45);border:2px dashed rgba(240,194,90,.5)}
.glad-hero-soon .glad-hero-text{color:#ffe7b6;text-shadow:var(--outline);font-family:var(--font-title);font-size:13px}
.glad-tabs{border-bottom:2px solid rgba(122,61,28,.45);background:linear-gradient(180deg,rgba(122,61,28,.18),transparent)}
.glad-tab{font-family:var(--font-title);font-size:19px;color:var(--ink-soft)}
.glad-tab:hover{color:var(--ink)}
.glad-tab.on{color:var(--wine);border-bottom:3px solid var(--wine);background:linear-gradient(180deg,transparent,rgba(240,190,90,.35))}
.glad-note{font-size:12px;font-weight:600}
.kit-card{background:var(--papyrus-deep);border:2px solid rgba(122,61,28,.55);box-shadow:inset 0 0 18px rgba(150,95,35,.2)}
.kit-card.picked{border-color:var(--wine);box-shadow:inset 4px 0 0 var(--wine),0 0 0 2px rgba(240,194,90,.8),inset 0 0 18px rgba(150,95,35,.2);background:radial-gradient(ellipse at 40% 20%,#fff6d6,#f3dca0 60%,#e6c47f)}
.kit-art{background:radial-gradient(ellipse at 50% 55%,rgba(60,30,10,.28),rgba(60,30,10,.05) 70%)}
.kit-art-icon svg{color:var(--frame)}
.kit-info b{font-family:var(--font-title);font-size:22px;color:var(--ink)}
.kit-info small{font-size:11px;font-weight:600;color:var(--ink-soft)}
.kit-moves li{font-size:13px;color:var(--ink);font-weight:600}
.kit-moves kbd{background:var(--wine-plate);border:1px solid #f0c25a;color:#fff3cf;font-size:10px;text-shadow:0 1px 0 #2a1606}
.kit-moves em{color:var(--ink-soft);font-size:12px;font-weight:700}
.kit-soon{color:var(--wine);font-weight:700;font-size:11px}
/* ── Карта забега, лавка ───────────────────────────────────────── */
.column,.goods,.node{background:var(--papyrus-deep);border:2px solid rgba(122,61,28,.55);color:var(--ink);box-shadow:0 4px 0 rgba(60,30,10,.35)}
.column h3{color:var(--wine);font-family:var(--font-title);font-weight:400;font-size:15px;letter-spacing:1px}
.node b,.goods b{font-family:var(--font-title);font-weight:400;font-size:15px;color:var(--ink)}
.node small,.goods small,.goods-slot{color:var(--ink-soft);font-weight:600}
.node-pay{color:var(--wine);font-weight:800;font-size:11px}
.ladder-step.now .node.active{border-color:var(--wine);box-shadow:0 4px 0 rgba(60,30,10,.45),0 0 0 2px rgba(240,194,90,.8)}
.ladder-step.now .node.active:hover{background:radial-gradient(ellipse at 40% 20%,#fff6d6,#f3dca0 60%,#e6c47f);border-color:#b3461f;box-shadow:0 6px 0 rgba(60,30,10,.45),0 0 22px rgba(255,210,110,.6)}
.node-elite,.node-champion{border-color:#a8382a}
.node-rest{border-color:#4f7a52}
/* Номер ступени стоит на папирусе, а не над сценой: ему нужна не обводка, а цвет. */
.step-no{font-family:var(--font-title);color:var(--wine);font-size:17px;text-shadow:0 1px 0 rgba(255,245,210,.8)}
/* ── Бой: подсказка — папирусная записка ──────────────────────── */
#combat-hint{background:var(--papyrus);border:2px solid var(--frame);border-radius:10px;color:var(--ink);font-family:var(--font-title);font-size:15px;padding:10px 18px;box-shadow:0 6px 16px rgba(0,0,0,.5),inset 0 0 0 1.5px rgba(240,194,90,.6)}
.ability kbd,.controls-hint kbd{background:var(--wine-plate);border:1px solid #f0c25a;color:#fff3cf;font-size:11px;text-shadow:0 1px 0 #2a1606}
/* ── Размеры: мелких подписей больше нет ──────────────────────────
Исходный интерфейс писал пояснения шрифтом в 8–11 px, и с новым
начертанием они стали ещё и светлее — «Слава», «Двуручник», подписи
карточек читались с трудом. Правило простое: подпись не мельче 13 px,
основной текст карточки не мельче 14, строки в тесных местах (подсказка
управления внизу боя) — 12. Плашки и карточки растут вместе с текстом. */
.plaque small,.purse small,.read-value small,.read-cells small,.read-track em{font-size:15px;letter-spacing:.3px;margin-top:3px}
.plaque{padding:10px 17px}
.plaque b{font-size:27px}
.glad-hero-text small{font-size:15px}
.glad-hero-ranks{font-size:13px}
.glad-hero-soon,.glad-hero-soon .glad-hero-text{font-size:14px}
.glad-title small{font-size:19px}
.glad-title i{font-size:13px}
.glad-stats small{font-size:13px}
.glad-stats b{font-size:28px}
.glad-note{font-size:13px}
.kit-info small{font-size:13px}
.kit-moves li{font-size:15px}
.kit-moves em{font-size:14px}
.kit-moves kbd{font-size:12px;min-width:36px}
.kit-soon{font-size:13px}
.spot-panel header small,.screen-head small,.screen-foot small{font-size:13px}
.buy-body small{font-size:13px}
.buy-body b{font-size:19px}
.buy-max{font-size:15px}
.node b,.goods b{font-size:17px}
.node small,.goods small,.goods-slot{font-size:13px}
.node-pay{font-size:13px}
.column h3{font-size:17px}
.pin-label small{font-size:13px}
.pin-label b{font-size:17px}
.pin-gate .pin-label b{font-size:18px}
#favor-caption{font-size:13px}
.favor-label{font-size:16px}
.fighter-name{font-size:19px}
.fighter-name span{font-size:13px}
.ability kbd{font-size:13px}
.ability-name{font-size:15px}
.touch .ability-name{font-size:13px}
.controls-hint{font-size:12px}
.controls-hint kbd{font-size:11px}
.arena-caption span{font-size:14px}
.arena-caption small{font-size:12px}
#enemy-label{font-size:18px}
#enemy-intent{font-size:14px}
#combat-hint{font-size:17px}
.eyebrow{font-size:13px}
.intro-card p{font-size:14px}
.intro-card>small{font-size:12px}
.modal-card p,.screen-card p{font-size:15px}
.modal-controls{font-size:13px}
#result-stats small{font-size:13px}
.verdict p{font-size:16px}
.verdict-eyebrow{font-size:16px}
.verdict-acts .gold-button,.verdict-acts .secondary-button{font-size:17px}
#loading-screen p{font-size:14px}
.ludus-tag{font-size:12px}
.touch #btn-dodge small{font-size:11px}
/* Блоки боевого HUD были сверстаны под мелкий шрифт с фиксированной высотой,
и выросшие подписи из них вылезали. Высота теперь по содержимому. */
.ability,.touch .ability{height:auto;padding-bottom:2px}
.player-status{height:auto;align-items:flex-start}
.controls-hint{height:auto;min-height:22px}
.player-status{width:380px}
.status-body{width:310px}
.fighter-name{white-space:nowrap}
/* Раздел внутри вкладки и строки, ради которых пришли от предмета двора:
короткая вспышка говорит «это здесь», не заставляя искать глазами. */
.glad-section{margin:18px 0 4px;padding-top:12px;border-top:2px solid rgba(122,61,28,.45);font:400 20px var(--font-title);color:var(--wine)}
.buy-row.focus{animation:rowFocus 1.8s ease-out 2}
@keyframes rowFocus{0%{background:rgba(255,205,90,.75);box-shadow:inset 4px 0 0 var(--wine),0 0 18px rgba(255,200,90,.8)}100%{background:transparent;box-shadow:none}}
/* ── Вкладка «Сила» ───────────────────────────────────────────── */
.body-head{margin-bottom:14px}
.body-head-text b{display:block;font:400 20px var(--font-title);color:var(--wine)}
.body-head-text small{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-top:3px}
.body-bar{height:12px;margin-top:9px;background:rgba(122,61,28,.18);border:2px solid var(--frame);border-radius:7px;overflow:hidden}
.body-bar i{display:block;height:100%;background:var(--gold-fill);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);transition:width .5s ease-out}
.body-card{display:flex;align-items:center;gap:13px;margin-bottom:11px;padding:12px 12px 12px 10px;background:var(--papyrus-deep);border:2px solid rgba(122,61,28,.55);box-shadow:0 3px 0 rgba(60,30,10,.25),inset 0 0 18px rgba(150,95,35,.18)}
.body-card.maxed{background:radial-gradient(ellipse at 40% 20%,#fff6d6,#f3dca0 60%,#e6c47f);border-color:#c8902a}
.body-icon{width:52px;height:52px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:var(--wine-plate);border:2px solid #f0c25a;box-shadow:0 3px 0 #3e1109,inset 0 1px 0 rgba(255,200,170,.35)}
.body-icon svg{width:28px;height:28px;color:#ffe39a;filter:drop-shadow(0 2px 0 #3a1f08)}
.body-main{flex:1;min-width:0}
.body-title{display:flex;align-items:baseline;gap:8px}
.body-title b{font:400 20px var(--font-title);color:var(--ink)}
.body-title small{font-size:13px;font-weight:700;color:var(--ink-soft)}
.body-value{display:flex;align-items:baseline;gap:8px;margin-top:2px;font-family:var(--font-title)}
.body-value em{font-style:normal;font-size:22px;color:var(--ink)}
.body-value i{font-style:normal;font-size:18px;color:var(--ink-soft)}
.body-value strong{font-weight:400;font-size:24px;color:#2f7a2c;text-shadow:0 1px 0 rgba(255,250,230,.8)}
.body-cap{font-size:15px;color:#a0661b}
.body-pips{margin-top:7px;gap:7px}
.body-pips i{width:13px;height:13px}
.body-extra{margin-top:7px;font-size:13px;font-weight:700;color:var(--wine)}
.body-max{font:400 17px var(--font-title);color:#a0661b;padding:0 6px}
.body-card .buy-button{align-self:center}
.body-card.bought{animation:cardBought .9s ease-out}
@keyframes cardBought{0%{box-shadow:0 0 0 3px #ffd46a,0 0 28px rgba(255,200,80,.95);transform:scale(1.02)}100%{box-shadow:0 3px 0 rgba(60,30,10,.25);transform:none}}
.body-card.focus{animation:rowFocus 1.8s ease-out 2}
/* Плашки под героем: превью и отклик на покупку. */
.glad-stats div{position:relative;transition:transform .15s,box-shadow .15s}
.glad-stats div.preview{transform:translateY(-4px);box-shadow:0 6px 0 rgba(40,15,5,.65),0 0 24px rgba(120,220,110,.7)}
.glad-stats div.preview b{color:#b9f2a4}
.stat-gain{position:absolute;right:6px;top:4px;font:400 14px var(--font-title);color:#b9f2a4;text-shadow:var(--outline)}
.glad-stats div.bump{animation:statBump .6s ease-out}
@keyframes statBump{0%{transform:scale(1)}30%{transform:scale(1.18);box-shadow:0 0 30px rgba(255,210,110,.95)}100%{transform:scale(1)}}
.stat-pop{position:absolute;left:50%;top:-6px;transform:translateX(-50%);font:400 26px var(--font-title);color:#b9f2a4;text-shadow:var(--outline-big);pointer-events:none;animation:statPop 1.2s ease-out forwards}
@keyframes statPop{0%{opacity:0;transform:translate(-50%,6px) scale(.7)}20%{opacity:1;transform:translate(-50%,-10px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-46px) scale(1)}}
/* ── Вкладка «Умения» ─────────────────────────────────────────── */
.skill-tree{margin:14px 0 12px;display:flex;flex-direction:column;gap:10px}
.skill-tier{display:flex;align-items:stretch;gap:8px;position:relative}
.skill-tier+.skill-tier::before{content:'';position:absolute;left:21px;top:-11px;height:11px;border-left:3px dotted rgba(122,61,28,.55)}
.skill-tier-label{width:44px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--wine-plate);border:2px solid #f0c25a;color:#fff3cf;text-shadow:var(--outline)}
.skill-tier-label b{font:400 18px var(--font-title)}
.skill-tier-label small{font-size:12px;color:#ffe39a}
.skill-node{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 4px 8px;background:var(--papyrus-deep);border:2px solid rgba(122,61,28,.45);cursor:pointer;transition:transform .12s,border-color .12s}
.skill-node:hover{transform:translateY(-2px);border-color:var(--frame)}
.skill-node.picked{border-color:var(--wine);box-shadow:0 0 0 2px rgba(240,194,90,.85)}
.skill-medal{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:var(--wine-plate);border:2px solid #f0c25a;box-shadow:0 3px 0 #3e1109}
.skill-medal svg{width:24px;height:24px;color:#ffe39a;filter:drop-shadow(0 2px 0 #3a1f08)}
.skill-name{font:400 14px var(--font-title);color:var(--ink);text-align:center;line-height:1.15}
.skill-node.owned .skill-medal{background:var(--gold-fill);border-color:#fff0bf;box-shadow:0 3px 0 #7a4a12,0 0 14px rgba(255,200,80,.8)}
.skill-node.owned .skill-medal svg{color:#5e2a0a;filter:none}
.skill-node.locked .skill-medal,.skill-node.soon .skill-medal{background:#9b8b72;border-color:#d8c8a4;box-shadow:0 3px 0 #5d5140}
.skill-node.locked .skill-medal svg,.skill-node.soon .skill-medal svg{color:#efe4c8;filter:none}
.skill-node.locked .skill-name,.skill-node.soon .skill-name{color:#8a7458}
.skill-node.soon{border-style:dashed}
.skill-node.bought{animation:cardBought .9s ease-out}
.skill-info{padding:12px;background:var(--papyrus-deep);border:2px solid var(--frame);box-shadow:inset 0 0 18px rgba(150,95,35,.2)}
.skill-info b{display:block;font:400 22px var(--font-title);color:var(--wine)}
.skill-info p{margin:5px 0 0;font-size:14px;font-weight:600;line-height:1.45;color:var(--ink)}
.skill-state{display:block;margin-top:7px;font-size:13px;font-weight:700;color:var(--ink-soft)}
.skill-state.owned{color:#2f7a2c}
.skill-state.locked,.skill-state.soon{color:#a0661b}
.skill-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:10px}
/* Подписи кнопок в одну строку: две кнопки делят ширину поровну, а третья,
если не влезает, уходит целиком на следующую строку, а не ломает слова. */
.skill-acts .buy-button{flex:1 1 auto;white-space:nowrap;font-size:14px;padding:8px 10px}
.skill-acts .buy-button.ghost{font-size:14px}
/* Фирменный приём на кнопке 4 / X: метка на медальоне яруса III. */
.skill-node{position:relative}
.skill-key{position:absolute;top:5px;right:5px;padding:1px 5px;font:700 12px/1.3 var(--font-title);color:#fff3cf;background:var(--wine-plate);border:1px solid #f0c25a;text-shadow:var(--outline)}
.skill-node.worn{border-color:#f0c25a}
/* Пятая кнопка приёма сдвигает подсказку управления, чтобы они не наезжали. */
/* Подсказки боя — только камера и цель, в правом нижнем углу: движение и
уворот игрок находит сам, а подпись амфитеатра убрана как лишняя. */
.controls-hint{left:auto;right:30px;bottom:40px;justify-content:flex-end}
/* Дерево умений плотнее: с блоком выбранного умения и двумя кнопками вкладка
должна влезать без прокрутки — иначе кнопки прятались под нижний край. */
.skill-tree{margin:10px 0 10px;gap:8px}
.skill-tier+.skill-tier::before{top:-9px;height:9px}
.skill-node{padding:6px 4px 6px;gap:4px}
.skill-medal{width:42px;height:42px}
.skill-info{padding:10px 12px}
.skill-acts{margin-top:8px}
/* ── Шаг 5: портреты и растровые иконки ─────────────────────────── */
/* Портрет героя в карточке списка: рамка в бронзе, знак набора в углу. */
.glad-face{position:relative;width:54px;height:66px;flex-shrink:0;border:2px solid #f0c25a;background:radial-gradient(circle at 50% 35%,#6a4a2c,#241a12);box-shadow:0 3px 0 rgba(40,15,5,.6),inset 0 0 10px rgba(0,0,0,.6);overflow:visible}
.glad-face>svg{padding:12px;color:#ffe39a}
.glad-face-img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.glad-face-kit{position:absolute;right:-8px;bottom:-8px;width:26px;height:26px;padding:4px;border-radius:50%;background:var(--wine-plate);border:2px solid #f0c25a;color:#ffe39a}
.glad-hero.picked .glad-face{border-color:#fff0bf;box-shadow:0 0 14px rgba(255,210,110,.8)}
/* Портрет в HUD: поверх шлема, в той же восьмигранной рамке. */
.portrait{overflow:hidden}
#hud-face{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 10%}
/* Растровая иконка умения внутри медальона. Закрытое и ещё не сделанное —
в сепии и притушено, изученное — во весь цвет. */
.skill-medal{overflow:hidden}
.skill-art{width:100%;height:100%;object-fit:cover;display:block}
.skill-node.locked .skill-art,.skill-node.soon .skill-art{filter:grayscale(.85) sepia(.35) brightness(.8);opacity:.75}
.skill-node.open .skill-art{filter:saturate(.8)}
/* ── Вкладка «Расходники» ─────────────────────────────────────── */
.supply-card .body-title{flex-direction:column;align-items:flex-start;gap:0}
.supply-card .body-title b{white-space:nowrap}
.supply-card .body-title small{font-weight:800;color:var(--wine)}
/* Четыре вкладки: ярлыки чуть мельче и без разрядки, чтобы «Расходники» влезли. */
.glad-tab{font-size:17px;letter-spacing:0;padding-left:4px;padding-right:4px}
.supply-heal .body-icon{background:linear-gradient(180deg,#d8483a,#8e2218)}
.supply-energy .body-icon{background:linear-gradient(180deg,#3f8fc4,#1f4f7a)}
.supply-card.bought{animation:cardBought .9s ease-out}
/* ── Выбор кампании ─────────────────────────────────────────────── */
.camp-pick{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1180px;padding:22px 26px 26px;background:var(--papyrus);border:3px solid var(--frame);box-shadow:var(--panel-edge);pointer-events:auto}
.camp-pick-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:16px}
.camp-pick-head h2{margin:0;font:400 34px var(--font-title);color:var(--wine)}
.camp-pick-head small{display:block;margin-top:4px;font-size:14px;font-weight:600;color:var(--ink-soft)}
.camp-back{width:auto;margin:0;padding:10px 18px;font-size:14px}
.camp-cards{display:flex;gap:18px}
.camp-card{flex:1;display:flex;flex-direction:column;padding:0;text-align:left;background:var(--papyrus-deep);border:3px solid var(--frame);box-shadow:0 5px 0 rgba(60,30,10,.45);cursor:pointer;transition:transform .15s,box-shadow .15s;overflow:hidden}
.camp-card:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 9px 0 rgba(60,30,10,.45),0 0 26px rgba(255,200,90,.55)}
.camp-card.locked{cursor:default;filter:grayscale(.85) brightness(.82)}
.camp-card.done{border-color:#c8902a}
.camp-art{display:block;width:100%;height:210px;object-fit:cover;border-bottom:3px solid var(--frame)}
.camp-art-empty{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#b8452f,#5a170f 75%)}
.camp-art-empty b{font:400 46px var(--font-title);color:#ffe7a8;text-shadow:var(--outline-big)}
.camp-info{padding:12px 16px 16px}
.camp-info b{display:block;font:400 28px var(--font-title);color:var(--wine)}
.camp-info p{margin:6px 0 10px;min-height:42px;font-size:14px;font-weight:600;line-height:1.45;color:var(--ink)}
.camp-meta{display:flex;gap:8px}
.camp-meta span{padding:3px 10px;font-size:13px;font-weight:700;color:#fff3cf;background:var(--wine-plate);border:1px solid #f0c25a;text-shadow:var(--outline)}
.camp-pick-head>div:first-child{flex:1;min-width:0}
.camp-pick-side{display:flex;align-items:center;gap:12px}
.camp-keys .key-tag{font-size:20px;padding:6px 12px}
.camp-tabs{display:flex;gap:6px;align-self:center}
.camp-tab{padding:9px 18px;font:400 18px var(--font-title);color:#6d5a3e;background:var(--papyrus-deep);border:2px solid var(--frame);cursor:pointer;box-shadow:0 3px 0 rgba(60,30,10,.35)}
.camp-tab.on{color:#fff3cf;background:var(--wine-plate);border-color:#f0c25a;text-shadow:var(--outline)}
.camp-tab.great.on{background:linear-gradient(180deg,#5a2a86,#2c1147);border-color:#e9c46a}
.camp-card.great{border-color:#7a4aa8}
.camp-card.great.done{border-color:#c8902a}
.camp-card.great.locked{filter:grayscale(.55) brightness(.9);cursor:default}
.camp-might{background:linear-gradient(180deg,#8b1d1d,#4a0c0c)!important}
.camp-buy-row{display:flex;align-items:center;gap:12px;margin-top:10px}
.camp-buy-row .camp-lock{margin-top:0}
.camp-buy{white-space:nowrap;flex:none}
.camp-lock,.camp-done{display:block;margin-top:10px;font-style:normal;font-size:14px;font-weight:700}
.camp-lock{color:#6d5a3e}
.camp-done{color:#2f7a2c}
/* ── Дорога кампании ────────────────────────────────────────────── */
.camp{position:absolute;inset:0;pointer-events:none}
.camp>*{pointer-events:auto}
.camp-head{position:absolute;left:30px;right:30px;top:22px;display:flex;justify-content:space-between;align-items:flex-start}
.camp-head h2{margin:0;font:400 44px var(--font-title);color:#ffe39a;text-shadow:var(--outline-big)}
.camp-head small{display:block;font:400 16px var(--font-title);color:#fff3cf;text-shadow:var(--outline)}
.camp-purse{display:flex;gap:8px}
.camp-purse div{min-width:104px;padding:7px 12px;text-align:center;background:var(--wine-plate);border:2px solid #f0c25a;box-shadow:0 4px 0 rgba(40,15,5,.6)}
.camp-purse b{display:block;font:400 22px var(--font-title);color:#fff3cf;text-shadow:var(--outline)}
.camp-purse small{display:block;font-size:12px;font-weight:700;color:#ffe39a;text-shadow:var(--outline)}
.camp-track{position:absolute;left:0;right:0;top:112px;height:318px;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.camp-road{position:absolute;left:0;top:0;height:100%;width:4000px}
.camp-road.rolling{transition:transform 1.5s cubic-bezier(.45,.05,.2,1)}
.camp-line{position:absolute;left:0;right:0;top:196px;height:0;border-top:4px dashed rgba(255,227,154,.75);filter:drop-shadow(0 2px 0 #2a1606)}
.stage{position:absolute;top:78px;width:190px;height:226px;display:flex;flex-direction:column;align-items:center;padding:10px 10px 12px;text-align:center;background:var(--papyrus-deep);border:3px solid var(--frame);box-shadow:0 6px 0 rgba(40,15,5,.6),0 10px 24px rgba(0,0,0,.45)}
.stage-no{position:absolute;top:-15px;left:50%;transform:translateX(-50%);min-width:34px;padding:1px 8px;font:400 18px var(--font-title);color:#fff3cf;background:var(--wine-plate);border:2px solid #f0c25a;text-shadow:var(--outline)}
.stage-faces{display:flex;justify-content:center;gap:4px;height:112px;margin:10px 0 8px}
.stage-face{width:54px;height:104px;object-fit:cover;object-position:50% 12%;border:2px solid var(--frame);background:radial-gradient(circle at 50% 35%,#6a4a2c,#241a12)}
.stage-faces .stage-face:only-child{width:112px}
.stage-faces .stage-face:first-child:nth-last-child(2),.stage-faces .stage-face:last-child:nth-child(2){width:80px}
.foe-face-icon{display:grid;place-items:center;color:#ffe39a}
.foe-face-icon svg{width:40px;height:40px}
.stage b{font:400 20px var(--font-title);color:var(--wine);line-height:1.05}
.stage small{margin-top:3px;font-size:12px;font-weight:700;line-height:1.3;color:var(--ink)}
.stage-pay{display:flex;gap:6px;margin-top:auto}
.stage-pay span{padding:2px 7px;font-size:12px;font-weight:800;color:#5e2a0a;background:var(--gold-fill);border:1px solid #fff0bf}
.stage-next{border-color:#f0c25a;box-shadow:0 6px 0 rgba(40,15,5,.6),0 0 30px rgba(255,210,110,.75);transform:scale(1.06)}
.stage-past{filter:sepia(.55) brightness(.78)}
.stage-past .stage-face{filter:grayscale(.7)}
.stage-seal{position:absolute;top:70px;left:50%;transform:translateX(-50%) rotate(-14deg);padding:3px 14px;font:400 26px var(--font-title);font-style:normal;color:#fff3cf;background:rgba(142,42,31,.92);border:3px solid #f0c25a;text-shadow:var(--outline)}
.stage.just-won .stage-seal{animation:sealStamp .7s cubic-bezier(.3,1.6,.5,1) 1.1s both}
@keyframes sealStamp{0%{opacity:0;transform:translateX(-50%) rotate(-14deg) scale(2.4)}100%{opacity:1;transform:translateX(-50%) rotate(-14deg) scale(1)}}
.stage-hidden{background:linear-gradient(180deg,#3a2c20,#1f1712);border-color:#5d4a33}
.stage-hidden b{color:#cdb88f}.stage-hidden small{color:#a8977a}
.stage-mystery{display:grid;place-items:center;width:104px;height:104px;font:400 76px var(--font-title);color:#6d5a3e;border:2px dashed #6d5a3e;border-radius:50%}
.stage-boss.stage-next{border-color:#ffe39a}
/* Стрелка над следующим боем: золотая, с тёмной обводкой, качается вверх-вниз. */
.camp-arrow{position:absolute;top:-2px;width:52px;height:52px;color:#ffd35a;filter:drop-shadow(0 0 10px rgba(255,210,110,.85)) drop-shadow(0 3px 0 #2a1606)}
.camp-arrow svg{animation:arrowBob .8s ease-in-out infinite alternate}
@keyframes arrowBob{from{transform:translateY(-4px)}to{transform:translateY(8px)}}
.camp-arrow.rolling{transition:left 1.5s cubic-bezier(.45,.05,.2,1)}
.camp-rest{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:1120px;padding:14px 18px 14px;background:var(--papyrus);border:3px solid var(--frame);box-shadow:var(--panel-edge)}
.camp-rest-title{display:flex;align-items:baseline;gap:16px;margin-bottom:10px}
.camp-rest-title b{font:400 24px var(--font-title);color:var(--wine)}
.camp-healed{font-size:15px;font-weight:800;color:#2f7a2c}
.camp-energy{font-size:14px;font-weight:800;color:#1f4f7a}
.camp-actions{display:flex;gap:10px}
.camp-supply{flex:1;display:flex;align-items:center;gap:10px;padding:8px 10px;text-align:left;background:var(--papyrus-deep);border:2px solid rgba(122,61,28,.55);box-shadow:0 3px 0 rgba(60,30,10,.35);cursor:pointer}
.camp-supply:hover:not(:disabled){border-color:var(--frame);transform:translateY(-2px)}
.camp-supply:disabled{cursor:default;opacity:.55}
.camp-supply .body-icon{width:42px;height:42px;flex-shrink:0}
.camp-supply-text b{display:block;font:400 17px var(--font-title);color:var(--ink)}
.camp-supply-text small{font-size:12px;font-weight:700;color:var(--ink-soft)}
.camp-shop-toggle{padding:0 18px;font:400 17px var(--font-title);color:#fff3cf;background:var(--wine-plate);border:2px solid #f0c25a;text-shadow:var(--outline);box-shadow:0 3px 0 rgba(40,15,5,.6)}
.camp-shop-toggle.on,.camp-shop-toggle:hover{background:linear-gradient(180deg,#b8402f,#86271b)}
.camp-shelf{display:flex;gap:10px;margin-top:10px}
.camp-goods{flex:1;display:flex;align-items:center;gap:10px;padding:6px 10px;background:var(--papyrus-deep);border:2px solid rgba(122,61,28,.45)}
.camp-goods-art{width:48px;height:48px}
.camp-goods div{flex:1}
.camp-goods b{display:block;font:400 16px var(--font-title);color:var(--ink)}
.camp-goods small{font-size:12px;font-weight:700;color:var(--ink-soft)}
.camp-gear{margin:8px 0 0;font-size:13px;font-weight:700;color:var(--ink-soft)}
.camp-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.camp-foot .secondary-button{width:auto;margin:0;padding:11px 20px;font-size:15px}
.camp-go{width:auto;min-height:0;padding:12px 38px;font-size:20px}
/* ── Итог кампании ─────────────────────────────────────────────── */
.camp-result{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1060px;display:flex;gap:30px;align-items:center;pointer-events:auto}
.camp-result-head{flex:1}
.camp-result-head .verdict-eyebrow{font:400 16px var(--font-title);color:#ffe39a;text-shadow:var(--outline)}
.camp-result-head h2{margin:10px 0 8px;font:400 50px var(--font-title);color:#fff3cf;text-shadow:var(--outline-big)}
.camp-result-head p{margin:0 0 20px;font-size:16px;font-weight:600;line-height:1.5;color:#fff3cf;text-shadow:var(--outline)}
.camp-result-head .verdict-acts .gold-button,.camp-result-head .verdict-acts .secondary-button{padding:13px 24px;font-size:16px}
.camp-sum{width:420px;flex-shrink:0;padding:16px 20px;background:var(--papyrus);border:3px solid var(--frame);box-shadow:var(--panel-edge)}
.camp-sum-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:2px dotted rgba(122,61,28,.4)}
.camp-sum-row b{display:block;font:400 20px var(--font-title);color:var(--ink)}
.camp-sum-row small{font-size:13px;font-weight:700;color:var(--ink-soft)}
.camp-sum-row strong{font:400 26px var(--font-title);color:var(--wine)}
.camp-sum-row.bad strong{color:#a0231a}
.camp-sum-total{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:8px 12px;background:var(--wine-plate);border:2px solid #f0c25a}
.camp-sum-total span{font:400 20px var(--font-title);color:#ffe39a;text-shadow:var(--outline)}
.camp-sum-total b{font:400 38px var(--font-title);color:#fff3cf;text-shadow:var(--outline-big)}
.camp-unlocked{margin:10px 0 0;font-size:15px;font-weight:800;color:#2f7a2c}
.camp-ad:disabled{filter:grayscale(.3)}
#ui[data-screen=campaigns]{display:block;backdrop-filter:blur(2px);background:rgba(18,12,8,.45)}
#ui[data-screen=campaign]{display:block;backdrop-filter:none;background:linear-gradient(180deg,rgba(18,12,8,.62),rgba(18,12,8,.15) 26%,rgba(18,12,8,.1) 55%,rgba(18,12,8,.7))}
#ui[data-screen=results]{display:block;backdrop-filter:blur(2px);background:radial-gradient(ellipse at 50% 50%,rgba(18,12,8,.35),rgba(12,8,5,.82))}
/* Дорога выше и карточки ниже ростом: с открытой лавкой панель привала
растёт вверх и не должна наезжать на бои. */
.camp-track{top:98px;height:300px}
.stage{top:70px;height:208px}
.stage-faces{height:100px;margin:8px 0 6px}
.stage-face{height:96px}
.camp-line{top:176px}
.stage-pay span{white-space:nowrap;font-size:11px;padding:2px 5px}
.camp-rest{padding:12px 16px}
.camp-rest-title{margin-bottom:8px}
.camp-shelf{margin-top:8px}
.camp-foot{margin-top:10px}
/* Табло толпы: множитель лежит прямо на полосе — белый с чёрной обводкой,
засечка отмечает середину, ×1. Табличка номера боя убрана. */
.favor-track{position:relative;height:24px;margin-top:6px;overflow:visible}
.favor-track>#favor-fill{position:absolute;left:0;top:0;bottom:0}
.favor-mid{position:absolute;left:50%;top:-4px;bottom:-4px;width:3px;margin-left:-1.5px;background:#fff6d0;box-shadow:0 0 0 1px #2a1606;z-index:1}
#favor-value{position:absolute;inset:0;z-index:2;display:grid;place-items:center end;padding-right:10px;font:400 19px var(--font-title);color:#fff;letter-spacing:.5px;
text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,0 2px 0 #000,0 -2px 0 #000,2px 0 0 #000,-2px 0 0 #000}
.utility{top:128px}
/* Стрелка качается от -4 до +8 px и светится на 10 px вокруг: полоса дороги
начинается выше, а стрелка и карточки стоят ниже, чтобы верхняя точка
качания с подсветкой не срезалась краем полосы. */
.camp-track{top:84px;height:318px}
.camp-arrow{top:14px}
.stage{top:96px}
.camp-line{top:202px}
/* Табло толпы растёт по содержимому: при высоте 68 px подпись под полосой
срезалась нижней рамкой. Множитель стоит по центру полосы, поверх засечки
середины — сама засечка торчит над и под полосой и остаётся видна. */
.audience-status{height:auto;min-height:68px;padding-top:9px;padding-bottom:11px}
#favor-value{place-items:center;padding-right:0}
.favor-mid{top:-6px;bottom:-6px;box-shadow:none;filter:drop-shadow(0 0 1px #2a1606) drop-shadow(0 0 1px #2a1606);
background:linear-gradient(#fff6d0 0 7px,transparent 7px calc(100% - 7px),#fff6d0 calc(100% - 7px))}
/* Подсказка о приёмах стоит над рядом кнопок, а не на нём: ромбы кнопок
поднимаются до ~553 px, и при bottom 152 плашка закрывала их верхушки. */
#combat-hint{bottom:184px;z-index:3}
/* У Kurale подъём 21 px, спуск 7: строка выходила 28 px при полосе в 24 и
сажала цифры на 2 px ниже середины. Строка ровно в высоту полосы ставит
центр глифов на её середину. */
#favor-value{line-height:24px}
/* Экран гладиатора: панель прокачки шире (400 → 520), чтобы вкладки
помещались без прокрутки; итоговые числа и имя героя встают в
освободившуюся середину между списком героев и панелью (246…730). */
.glad-panel{width:520px}
.glad-stats{left:258px;width:456px}
.glad-title{left:246px;width:484px}
/* Без прокрутки во вкладках. «Сила»: ранги встают в строку с числом, а не
под ним — на широкой панели место есть, и каждая карточка ниже на ~20 px. */
.body-card[data-key] .body-main{display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:center}
.body-card[data-key] .body-title,.body-card[data-key] .body-extra{grid-column:1/-1}
.body-card[data-key] .body-pips{margin-top:0}
/* «Оружие»: картинка набора слева, описание и приёмы справа — карточка
вдвое ниже, и два набора помещаются целиком. */
.kit-card{grid-template-columns:170px 1fr;grid-template-rows:1fr auto;gap:6px 14px}
.kit-card .kit-art{grid-column:1;grid-row:1/3;height:100%;min-height:130px;align-self:stretch}
.kit-card .kit-info{grid-column:2;grid-row:1}
.kit-card .kit-act{grid-column:2;grid-row:2;justify-self:end}
/* Цена на золотой кнопке: светлые цифры в тёмной обводке, как числа на
плашках, — тёмно-коричневое по золоту читалось блёкло. Лавр крупнее и
тоже светлый, с той же обводкой тенью. */
.buy-button:not(.ghost):not(:disabled){color:#fffaf0;font-size:19px;gap:7px;text-shadow:var(--outline)}
.buy-button:not(.ghost) svg{width:24px;height:24px}
.buy-button:not(.ghost):not(:disabled) svg{color:#fff3cf;filter:drop-shadow(1px 0 0 #2a1606) drop-shadow(-1px 0 0 #2a1606) drop-shadow(0 1px 0 #2a1606) drop-shadow(0 -1px 0 #2a1606) drop-shadow(0 2px 0 #2a1606)}
/* Звук во дворе: квадратная плашка в правом верхнем углу, вровень с
плашками славы и героя. Выключенный звук перечёркнут. */
.ludus-sound{position:absolute;top:26px;right:134px;width:62px;height:62px;padding:0;justify-content:center;pointer-events:auto;cursor:pointer}
.ludus-sound svg{width:30px;height:30px}
.ludus-sound:hover{filter:brightness(1.12)}
.ludus-sound.muted svg{opacity:.5}
.ludus-sound.muted:after{content:'';position:absolute;width:40px;height:4px;background:#ffe39a;border-radius:2px;box-shadow:0 0 0 2px #2a1606;transform:rotate(-45deg)}
/* Телефон: игра рисуется в кадре 16:9, и в портрете он сжимается в полоску —
просим повернуть. Только на сенсорных экранах: узкое окно на ПК не телефон. */
#rotate-hint{display:none;position:fixed;inset:0;z-index:50;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:#171512;color:#ffe39a;font:400 22px var(--font-title);text-align:center;padding:24px}
@media (orientation:portrait) and (pointer:coarse){#rotate-hint{display:flex}}
.rotate-phone{width:54px;height:92px;border:4px solid #ffe39a;border-radius:10px;animation:rotatePhone 2.2s ease-in-out infinite}
@keyframes rotatePhone{0%,25%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
/* Счётчик кадров (index.html?fps=1) — для замера на устройстве. */
#fps-tag{position:absolute;left:50%;top:6px;transform:translateX(-50%);z-index:40;padding:3px 9px;background:rgba(0,0,0,.6);color:#9f9;font:600 13px monospace;border-radius:4px;pointer-events:none}
/* Экран загрузки: крутящееся кольцо по центру экрана вместо неподвижной
«Ⅲ» — видно, что игра грузится, а не зависла. Подпись остаётся внизу. */
.loading-spinner{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;
border:6px solid rgba(255,227,154,.22);border-top-color:#ffe39a;border-right-color:#ffe39a;
filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));animation:loadingSpin .9s linear infinite}
@keyframes loadingSpin{to{transform:rotate(360deg)}}
#loading-screen.hidden .loading-spinner{animation:none}
/* Найм героя: закрытый в списке приглушён, на смотринах панель условий. */
.glad-hero.locked:not(.picked){filter:saturate(.35) brightness(.82)}
.glad-hero.locked .glad-hero-text small{color:#ffd98a}
.hire-panel .glad-body{display:flex;flex-direction:column;gap:14px}
.hire-kits{display:flex;flex-direction:column;gap:10px}
.hire-kit{display:flex;align-items:center;gap:13px;padding:12px;background:var(--papyrus-deep);border:2px solid rgba(122,61,28,.55)}
.hire-kit b{display:block;font:400 20px var(--font-title);color:var(--ink)}
.hire-kit small{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-top:3px}
.hire-note{margin:0;font-size:14px;font-weight:700;color:var(--ink-soft)}
.hire-note.needs,.hire-note.fame{color:var(--wine)}
.hire-buy{align-self:center;min-width:240px;font-size:22px;padding:12px 22px;margin-top:auto}
/* Выбранная карточка героя — золотая, и тёмный текст без обводки на ней
тонул. Как на золотых кнопках: светлые буквы в тёмной обводке. Правило
стоит последним и перебивает и выбранную, и закрытую карточку. */
.glad-hero.picked .glad-hero-text b{color:#fffaf0;text-shadow:var(--outline)}
.glad-hero.picked .glad-hero-text small,.glad-hero.picked .glad-hero-ranks,
.glad-hero.picked.locked .glad-hero-text small{color:#fff3cf;text-shadow:var(--outline)}
/* ===== Ключи арены: кнопки двора и окна ===== */
/* Кнопки под звуком, в правом краю: календарь, казна, бой дня. Отметка «!»
— есть что забрать; у казны снизу полоска наполнения. */
.ludus-perks{position:absolute;top:104px;display:flex;flex-direction:column;gap:12px;pointer-events:auto}
.ludus-perks.right{right:30px;top:26px}
.ludus-perks.left{left:30px;top:122px}
.perk-btn{position:relative;width:92px;min-height:108px;padding:6px 0 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;overflow:visible}
.perk-btn svg{width:46px;height:46px}
.perk-btn .perk-label{font-size:13px;line-height:1.1;text-align:center;margin:0}
.perk-btn:hover{filter:brightness(1.12)}
.perk-badge{display:none;position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;background:#e23b22;border:2px solid #fff0bf;color:#fff;font:700 13px/18px Arial,sans-serif;text-align:center;box-shadow:0 2px 0 #3e1109;animation:perkPulse 1.2s ease-in-out infinite}
.perk-btn.ready .perk-badge{display:block}
@keyframes perkPulse{50%{transform:scale(1.18)}}
.perk-fill{position:absolute;left:6px;bottom:3px;height:4px;width:0;max-width:calc(100% - 12px);background:linear-gradient(90deg,#f3bd48,#ffe99f);border-radius:2px}
.plaque-keys svg{color:#ffe39a}
/* Окно поверх двора. */
.perk-overlay{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:rgba(20,12,6,.55);pointer-events:auto}
.perk-card{position:relative;width:640px;max-width:92%;padding:26px 32px 24px;background:var(--papyrus);border:3px solid var(--frame);border-radius:12px;box-shadow:0 18px 60px rgba(0,0,0,.6),inset 0 0 0 2px rgba(240,194,90,.6);color:var(--ink);text-align:center}
.perk-card h2{margin:0 0 6px;font:400 30px var(--font-title);color:var(--wine)}
.perk-card>p{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--ink-soft)}
.perk-close{position:absolute;top:8px;right:12px;width:36px;height:36px;background:none;color:var(--wine);font:700 30px/30px Arial,sans-serif;cursor:pointer}
.perk-acts{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:18px}
.perk-acts .secondary-button,.perk-acts .gold-button{width:auto;min-width:170px;margin:0;padding:10px 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.perk-acts .gold-button svg{width:20px;height:20px}
.perk-note{margin:10px 0 0;font:400 17px var(--font-title);color:var(--ink-soft)}
.key-tag{display:inline-flex;align-items:center;gap:5px}
.key-tag svg{width:22px;height:22px;color:#b8861f;filter:drop-shadow(0 1px 0 #3a1f08)}
.key-tag b{font:400 22px var(--font-title);color:var(--ink)}
/* Календарь: семь дней, седьмой шире. */
.cal-days{display:grid;grid-template-columns:repeat(6,1fr) 1.4fr;gap:8px}
.cal-day{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;background:var(--papyrus-deep);border:2px solid rgba(122,61,28,.45);border-radius:8px}
.cal-day small{font-size:12px;font-weight:700;color:var(--ink-soft)}
.cal-day.done{opacity:.45;filter:grayscale(.4)}
.cal-day.today{border-color:var(--wine);box-shadow:0 0 0 2px #f0c25a,0 0 16px rgba(240,180,60,.7);background:radial-gradient(ellipse at 40% 20%,#fff6d6,#f3dca0 60%,#e6c47f)}
.cal-day.big .key-tag svg{width:30px;height:30px}
/* Казна: шкала и улучшение. */
.chest-gauge{position:relative;height:34px;background:rgba(60,30,10,.25);border:2px solid var(--frame);border-radius:8px;overflow:hidden}
.chest-gauge i{position:absolute;left:0;top:0;bottom:0;background:var(--gold-fill)}
.chest-gauge span{position:relative;line-height:30px;font:400 18px/30px var(--font-title);color:#fffaf0;text-shadow:var(--outline)}
.chest-up{margin-top:20px;padding-top:14px;border-top:2px solid rgba(122,61,28,.3);display:flex;flex-direction:column;align-items:center;gap:10px}
.chest-up b{font:400 18px var(--font-title);color:var(--ink)}
.chest-buys{display:flex;align-items:center;gap:12px}
.chest-buys span{font-weight:700;color:var(--ink-soft)}
/* Бой дня: три карточки. */
.day-fights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.day-fight{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 10px;background:var(--papyrus-deep);border:2px solid rgba(122,61,28,.5);border-radius:10px}
.day-fight>b{font:400 22px var(--font-title);color:var(--wine)}
.day-fight.deadly{border-color:var(--wine)}
.day-fight.closed:not(.won){opacity:.5}
.day-fight.won{box-shadow:0 0 0 2px #f0c25a,0 0 16px rgba(240,180,60,.6)}
.day-fight .gold-button{min-height:40px;font-size:17px}
.day-foes{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;flex:1;align-content:flex-start}
.day-face{width:40px;height:52px;object-fit:cover;border:2px solid var(--frame);border-radius:4px;background:#3a2a1c}
.day-face.foe-face-icon{display:grid;place-items:center;color:#ffe39a}
.day-face.foe-face-icon svg{width:24px;height:24px}
.day-got{display:flex;align-items:center;gap:12px;margin:10px 0 4px;font:400 20px var(--font-title);color:#ffe39a}
.day-got .key-tag b{color:#fff3cf;text-shadow:var(--outline)}
/* Лесенка уровней казны */
.chest-steps-title{margin:0 0 6px;font:400 16px var(--font-title);color:var(--ink-soft)}
.chest-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px}
.chest-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;background:var(--papyrus-deep);border:2px solid rgba(122,61,28,.35);border-radius:8px}
.chest-step small{font:400 15px var(--font-title);color:var(--ink-soft)}
.chest-step-fame{display:flex;align-items:center;gap:4px}
.chest-step-fame svg{width:18px;height:18px;color:#c98a1e}
.chest-step-fame b{font:400 20px var(--font-title);color:var(--ink)}
.chest-step .chest-step-keys svg{width:16px;height:16px}
.chest-step .chest-step-keys b{font-size:16px}
.chest-step.past{opacity:.5}
.chest-step.now{border-color:var(--wine);background:linear-gradient(#ffe9a6,#f3c25a);box-shadow:0 0 0 2px #f0c25a,0 0 12px rgba(240,180,60,.55)}
.chest-step.now small{color:var(--wine);font-weight:700}
.chest-step.next{border-style:dashed;border-color:var(--wine)}
.perk-warn{margin:6px 0 0;font:700 14px Arial,sans-serif;color:var(--wine)}
.hire-buys{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:auto}
.hire-buys span{font-weight:700;color:var(--ink-soft)}
.hire-buys .hire-buy{margin-top:0;min-width:0}
.hire-buys .hire-buy:not(.hire-keys){min-width:210px}
/* Ключи за первую победу в городе */
.camp-prize{display:flex;align-items:center;gap:8px;margin-top:10px;padding:5px 10px;align-self:flex-start;width:max-content;background:rgba(240,194,90,.25);border:2px solid #d9a441;border-radius:6px}
.camp-prize-text{font-size:14px;font-weight:700;color:var(--ink)}
.camp-prize .key-tag svg{width:20px;height:20px}
.camp-prize .key-tag b{font-size:20px}
.camp-prize.got{background:rgba(47,122,44,.12);border-color:rgba(47,122,44,.55)}
.camp-prize.got .camp-prize-text{color:#2f7a2c}
.camp-prize.got .camp-prize-text:before{content:'✓ '}
.camp-prize.got .key-tag{opacity:.55}
.camp-sum-row.keys strong .key-tag b{color:var(--wine);font-size:26px}
/* Яд Василиска: заряды и тики над противником */
.float-text.poison{font-size:18px;color:#9dff5a;text-shadow:0 2px 4px #0c3a12,0 0 8px #2fae24}
/* Особый герой (Василиск): карточка в ростере светится ядом — пульсирующее
зелёное свечение, по карточке пробегает блик. Закрытую не обесцвечиваем:
она и должна манить. */
.glad-hero.epic{position:relative;overflow:hidden;background:linear-gradient(135deg,#0f3a1b,#1c5a26 55%,#0c2c14);border-color:#6dff72;animation:epicGlow 2.2s ease-in-out infinite}
.glad-hero.epic.locked:not(.picked){filter:none}
.glad-hero.epic .glad-hero-text b{color:#d9ffcf;text-shadow:0 0 8px rgba(110,255,120,.8),0 2px 0 #06210d}
.glad-hero.epic .glad-hero-text small,.glad-hero.epic .glad-hero-ranks{color:#a8f59a;text-shadow:0 1px 0 #06210d}
.glad-hero.epic .glad-face{border-color:#7dff80;box-shadow:0 0 12px rgba(110,255,120,.75)}
.glad-hero.epic::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(190,255,170,.35),transparent);transform:skewX(-18deg);animation:epicSheen 3.4s ease-in-out infinite;pointer-events:none}
.glad-hero.epic:hover{border-color:#b6ffb0}
.glad-hero.epic.picked{background:linear-gradient(135deg,#1f6a2c,#3fa13d 55%,#1a5424);border-color:#d9ffcf}
.glad-hero.epic.picked .glad-hero-text b{color:#fffaf0;text-shadow:0 0 10px rgba(140,255,140,.9),var(--outline)}
.glad-hero.epic.picked .glad-hero-text small,.glad-hero.epic.picked .glad-hero-ranks{color:#eaffdf;text-shadow:var(--outline)}
@keyframes epicGlow{0%,100%{box-shadow:0 4px 0 #06210d,0 0 10px rgba(80,255,100,.45),inset 0 0 10px rgba(80,255,100,.25)}50%{box-shadow:0 4px 0 #06210d,0 0 26px rgba(80,255,100,.9),inset 0 0 18px rgba(80,255,100,.45)}}
@keyframes epicSheen{0%,55%{left:-60%}100%{left:130%}}
/* --- Иконки кнопок двора и магазин ------------------------------------- */
.perk-btn .perk-art{width:70px;height:70px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.55));pointer-events:none}
.perk-btn svg.hidden{display:none}
.perk-card.perk-shop{width:940px;padding:24px 28px 20px}
.shop-premium{position:relative;display:flex;align-items:center;gap:18px;padding:14px 18px;margin-bottom:14px;text-align:left;background:linear-gradient(100deg,#3a1a52,#6a1f2a 60%,#8a5a18);border:3px solid #f0c25a;border-radius:10px;box-shadow:0 0 26px rgba(240,194,90,.45),inset 0 0 0 1px rgba(255,235,180,.35);color:#fff3cf}
.shop-face{flex:none;width:124px;height:124px;border:2px solid #f0c25a;border-radius:8px;box-shadow:0 0 14px rgba(255,210,110,.5)}
.shop-art{align-self:center;width:150px;height:150px;border:2px solid var(--frame);border-radius:8px;box-shadow:0 3px 0 rgba(60,30,10,.35)}
.shop-about{flex:1;min-width:0}
.shop-tag{display:inline-block;padding:2px 10px;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#2f1d06;background:linear-gradient(180deg,#ffe39a,#d9a441);border-radius:4px}
.shop-about b{display:block;margin:4px 0 2px;font:400 30px var(--font-title);color:#ffe39a;text-shadow:var(--outline)}
.shop-about small{display:block;font-size:14px;font-weight:600;line-height:1.35}
.shop-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.shop-chips span{padding:2px 9px;font-size:12px;font-weight:700;border:1px solid rgba(255,227,154,.7);border-radius:4px;background:rgba(0,0,0,.25)}
.shop-row{display:flex;gap:14px}
.shop-item{flex:1;display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px;background:var(--papyrus-deep);border:3px solid var(--frame);border-radius:10px;text-align:center}
.shop-item b{font:400 24px var(--font-title);color:var(--wine)}
.shop-item>small{min-height:54px;font-size:13px;font-weight:600;line-height:1.35;color:var(--ink)}
.shop-buy{display:flex;flex-direction:column;align-items:center;gap:4px}
.shop-premium .shop-buy{flex:none}
.shop-buy-btn{white-space:nowrap;min-width:150px}
.shop-cur{width:18px;height:18px}
.shop-part{font-size:12px;font-weight:700;color:#ffe39a}
.shop-item .shop-part{color:#6d5a3e}
.shop-owned{padding:8px 14px;font-weight:800;color:#2f7a2c;background:rgba(255,255,255,.55);border-radius:6px}
.shop-premium .shop-owned{color:#bff0b0;background:rgba(0,0,0,.3)}
.shop-item.owned{border-color:#2f7a2c}
.shop-foot{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:12px;min-height:20px}
.shop-foot em{font-style:normal;font-size:13px;font-weight:700;color:#6d5a3e}
.shop-restore{width:auto;margin:0;padding:7px 14px;font-size:13px}
.hire-shop{background:linear-gradient(180deg,#8f5bd0,#4a2378)!important;color:#fff3cf!important}
.camp-shop{width:auto;margin:10px 0 0;padding:6px 12px;font-size:12px}
/* Магазин — как эпические герои в ростере: своё свечение и бегущий блик.
Фон и подпись — как у остальных кнопок двора, золотое свечение своё.
Блик — движущимся слоем фона, а не ::after: кнопке нужен overflow:visible
для значка «!». */
.perk-btn[data-perk=shop]{
background:linear-gradient(100deg,transparent 35%,rgba(255,236,170,.55) 50%,transparent 65%) no-repeat,var(--wine-plate);
background-size:260% 100%,100% 100%;background-position:180% 0,0 0;
border:2px solid #ffd76a;border-left-width:2px;
animation:shopGlow 2.2s ease-in-out infinite,shopSheen 3.4s ease-in-out infinite}
.perk-btn[data-perk=shop] .perk-art{filter:drop-shadow(0 0 8px rgba(255,210,110,.9)) drop-shadow(0 2px 2px rgba(0,0,0,.55))}
.perk-btn[data-perk=shop]:hover{filter:brightness(1.18);border-color:#fff1c2}
@keyframes shopGlow{0%,100%{box-shadow:0 4px 0 #1c0828,0 0 10px rgba(255,200,90,.5),inset 0 0 10px rgba(200,120,255,.3)}50%{box-shadow:0 4px 0 #1c0828,0 0 28px rgba(255,205,100,.95),inset 0 0 18px rgba(210,140,255,.55)}}
@keyframes shopSheen{0%,55%{background-position:180% 0,0 0}100%{background-position:-80% 0,0 0}}
/* --- Обучение ------------------------------------------------------------ */
.tutor-card{display:flex;gap:22px;align-items:center;width:720px;text-align:left}
.tutor-face{flex:none;width:120px;height:120px;object-fit:cover;object-position:top;border:3px solid #f0c25a;border-radius:50%;background:#5a170f;box-shadow:0 0 18px rgba(240,194,90,.55)}
.tutor-body{flex:1;min-width:0}
.tutor-who{display:block;font:400 15px var(--font-title);color:#8a5a18;letter-spacing:.6px;text-transform:uppercase}
.tutor-card h2{margin:2px 0 6px}
.tutor-card p{margin:0 0 12px;font-size:15px;font-weight:600;line-height:1.45;color:var(--ink)}
.tutor-prize{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:14px;font-weight:700;color:var(--ink-soft)}
.tutor-prize b{font:400 20px var(--font-title);color:var(--wine)}
.tutor-acts{display:flex;gap:12px;justify-content:flex-end}
.tutor-acts button{width:auto;margin:0;padding:11px 20px}
.tutor-panel{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:25;width:520px;display:flex;gap:14px;align-items:center;padding:10px 16px 10px 12px;background:rgba(36,14,6,.88);border:2px solid #f0c25a;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.55);color:#fff3cf;pointer-events:auto}
.tutor-panel .tutor-face{width:74px;height:74px}
.tutor-panel .tutor-who{color:#e8c77a;font-size:12px}
.tutor-title{display:block;margin:2px 0;font:400 22px var(--font-title);color:#ffe39a;text-shadow:var(--outline)}
.tutor-key{display:inline-block;padding:3px 10px;font-size:14px;font-weight:800;color:#2f1d06;background:linear-gradient(180deg,#ffe39a,#d9a441);border-radius:5px}
.tutor-tip{display:block;margin-top:5px;font-size:12px;font-weight:600;color:#f3dfb1}
.tutor-panel.done{border-color:#7dff80;box-shadow:0 0 24px rgba(110,255,120,.55)}
.tutor-panel.done .tutor-title{color:#c9ffbf}
.tutor-dots{display:flex;gap:5px;margin:4px 0 2px}
.tutor-dots i{width:18px;height:5px;border-radius:3px;background:rgba(255,243,207,.25)}
.tutor-dots i.on{background:#7dff80}
.tutor-dots i.now{background:#ffd35a}
.tutor-links{display:flex;gap:14px;margin-top:6px}
.tutor-link{padding:0;background:none;border:0;font-size:12px;font-weight:700;color:#e8c77a;text-decoration:underline;cursor:pointer}
.tutor-link:hover{color:#fff3cf}
.tutor-tour{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:30;width:680px;display:flex;gap:18px;align-items:center;padding:16px 20px;background:var(--papyrus);border:3px solid var(--frame);border-radius:12px;box-shadow:0 18px 60px rgba(0,0,0,.6),inset 0 0 0 2px rgba(240,194,90,.6);color:var(--ink);pointer-events:auto;animation:tutorIn .35s ease-out}
.tutor-tour .tutor-face{width:96px;height:96px}
.tutor-tour .tutor-title{color:var(--wine);text-shadow:none;font-size:24px}
.tutor-tour .tutor-dots i{background:rgba(90,40,10,.2)}
.tutor-tour p{margin:4px 0 10px;font-size:14px;font-weight:600;line-height:1.45}
.tutor-next{width:auto;margin:0;padding:9px 22px;float:right}
.tutor-fame{font:400 22px var(--font-title);color:#ffe39a}
.tutor-glow{animation:tutorGlow 1.1s ease-in-out infinite;z-index:5}
.pin.tutor-glow .pin-dot{transform:rotate(45deg) scale(1.6);background:#fff1c2}
@keyframes tutorGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(255,210,110,.6))}50%{filter:drop-shadow(0 0 18px rgba(255,220,120,1)) brightness(1.25)}}
@keyframes tutorIn{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}
/* Обучение на телефоне: кадр 1280×720 ужимается примерно вдвое, поэтому
текст и цели касания крупнее, чем на компьютере. */
#game-board.touch .tutor-panel{width:600px;top:10px;padding:12px 18px 12px 14px;gap:16px}
#game-board.touch .tutor-panel .tutor-face{width:92px;height:92px}
#game-board.touch .tutor-who{font-size:16px}
#game-board.touch .tutor-title{font-size:31px}
#game-board.touch .tutor-key{font-size:21px;padding:4px 12px}
#game-board.touch .tutor-tip{font-size:18px}
#game-board.touch .tutor-dots i{width:24px;height:7px}
#game-board.touch .tutor-links{gap:22px;margin-top:8px}
#game-board.touch .tutor-link{font-size:19px;padding:4px 0}
#game-board.touch .tutor-card{width:940px;gap:28px}
#game-board.touch .tutor-card .tutor-face{width:150px;height:150px}
#game-board.touch .tutor-card h2{font-size:40px}
#game-board.touch .tutor-card p{font-size:21px}
#game-board.touch .tutor-prize{font-size:19px}
#game-board.touch .tutor-prize b{font-size:26px}
#game-board.touch .tutor-acts button{font-size:22px;padding:15px 28px}
#game-board.touch .tutor-tour{width:960px;bottom:18px;padding:18px 24px}
#game-board.touch .tutor-tour .tutor-face{width:120px;height:120px}
#game-board.touch .tutor-tour .tutor-title{font-size:32px}
#game-board.touch .tutor-tour p{font-size:20px}
#game-board.touch .tutor-next{font-size:22px;padding:13px 30px}