/* Последний гладиатор. Чернофигурная вазопись: терракота, тушь, процарапанные светлые линии. */
:root{
  --terra:#c8693a;--terra-d:#9b4a24;--terra-dd:#6e2f14;--ink:#1b1411;--ink2:#2b201b;
  --cream:#efd8b4;--paper:#ecd6b0;--paper2:#e2c79c;--blood:#a3261c;--gold:#e0a840;--green:#5f8f3a;
  --head:'Alegreya SC',Georgia,serif;--body:'Alegreya Sans',system-ui,sans-serif;
  --t-fast:.14s;--t-mid:.28s;--ease-out:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:#140d0a;color:var(--ink);font:17px/1.35 var(--body)}
button,select,input{font:inherit;color:inherit}
#stage{position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0;overflow:hidden;background:var(--terra)}
.muted{color:#6b5446}.small{font-size:14px}
h2{font:800 34px/1.1 var(--head);margin:0 0 8px}
h3{font:700 20px/1.2 var(--head);margin:18px 0 8px}
h4{font:700 19px/1.2 var(--head);margin:0 0 4px}

/* ====== Кнопки ====== */
button{cursor:pointer;border:2px solid var(--ink);background:var(--ink);color:var(--cream);border-radius:6px;padding:8px 16px;transition:background var(--t-fast),box-shadow var(--t-fast)}
button:hover{background:var(--ink2)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}
button.ghost{background:transparent;color:var(--ink)}
button.ghost:hover{background:rgba(27,20,17,.08)}
button.small{padding:4px 10px;font-size:15px}
button.go{font:800 24px var(--head);padding:12px 34px;background:var(--blood);border-color:var(--ink);color:#fff3e0;box-shadow:0 4px 0 var(--ink)}
button.go:hover{background:#b8301f}
.seg{display:inline-flex;border:2px solid var(--ink);border-radius:7px;overflow:hidden}
.seg button{border:0;border-radius:0;background:transparent;color:var(--ink);padding:6px 12px}
.seg button+button{border-left:2px solid var(--ink)}
.seg button.on{background:var(--ink);color:var(--cream)}
select{background:var(--paper);border:2px solid var(--ink);border-radius:6px;padding:4px 6px}

/* ====== Шапка ====== */
#top{position:absolute;left:0;right:0;top:0;height:60px;display:flex;align-items:center;gap:10px;padding:0 18px;background:var(--ink);color:var(--cream);z-index:5;border-bottom:4px solid var(--terra-dd)}
#top .brand{font:800 23px var(--head);letter-spacing:.02em;margin-right:8px;white-space:nowrap}
#top .chip{position:relative;padding:4px 12px;border:1px solid #5a4337;border-radius:20px;font-size:16px;overflow:hidden}
#top .chip b{color:#fff}
#top .chip.lvl i{position:absolute;left:0;bottom:0;height:3px;background:var(--gold)}
#top .grow{flex:1}
#top .sea{border-color:var(--gold);color:var(--gold)}

/* ====== Лудус ====== */
#screen{position:absolute;left:0;top:60px;width:1600px;height:840px}
.ludus{background:radial-gradient(70% 90% at 25% 60%,#d77a47 0%,var(--terra) 50%,var(--terra-d) 100%)}
.ludus .hero{position:absolute;left:30px;top:20px;width:560px;height:800px}
.plinth{position:absolute;left:10px;top:0;width:540px;height:567px}
.plinth::after{content:'';position:absolute;left:60px;right:60px;bottom:6px;height:22px;border-radius:50%;background:rgba(27,20,17,.35);z-index:-1}
.plinth .figsvg{width:100%;height:100%}
.gname{position:absolute;left:60px;top:580px;width:440px;text-align:center;font:800 40px var(--head);background:transparent;border:0;border-bottom:2px dashed transparent;color:var(--ink);padding:2px}
.gname:hover,.gname:focus{border-bottom-color:var(--ink);outline:none}
.scarrow{position:absolute;left:10px;top:648px;width:540px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.scar{background:var(--ink);color:#f0a08c;border-radius:14px;padding:3px 10px;font-size:15px;cursor:help}
.ludus .panel{position:absolute;left:620px;top:24px;width:950px;height:690px;background:var(--paper);border:3px solid var(--ink);border-radius:10px;box-shadow:6px 6px 0 rgba(27,20,17,.35);display:flex;flex-direction:column}
.tabs{display:flex;gap:0;border-bottom:3px solid var(--ink);padding:0 10px}
.tab{background:transparent;color:var(--ink);border:0;border-radius:0;padding:12px 18px;font:700 19px var(--head)}
.tab:hover{background:rgba(27,20,17,.06);transform:none}
.tab.on{background:var(--ink);color:var(--cream)}
.tabbody{flex:1;overflow:auto;padding:6px 26px 20px}
.lead{margin:14px 0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.stat{display:flex;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid #cdb08a}
.stat .sn{flex:1;cursor:help}
.stat b{font:800 22px var(--head);min-width:40px;text-align:right}
.plus{padding:0 10px;font-weight:700;background:var(--blood)}
.pts{margin:10px 0}
.derived{width:100%;border-collapse:collapse}
.derived td{padding:5px 0;border-bottom:1px solid #cdb08a}
.derived td+td{text-align:right;font-weight:700}
.order{display:block;margin-top:10px}
.order select{margin-left:6px}
.minis{display:flex;gap:8px;flex-wrap:wrap}
.mini{width:72px;height:72px;border:3px solid var(--rc,#8a7462);border-radius:8px;background:var(--paper2);cursor:help}
.mini .ico{width:100%;height:100%}
.r0{--rc:#8a7462}.r1{--rc:#5f9a3a}.r2{--rc:#3f86c0}.r3{--rc:#9a5cc6}.r4{--rc:#d99a1c}
.trees{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tree{background:var(--paper2);border:2px solid var(--ink);border-radius:8px;padding:10px}
.mbar{height:8px;background:#cdb08a;border-radius:4px;overflow:hidden;margin:6px 0 10px;cursor:help}
.mbar i{display:block;height:100%;background:var(--blood)}
.tal{padding:7px 8px;border-radius:6px;margin-bottom:6px;opacity:.5;border:1px dashed #8a7462;font-size:15px}
.tal b{display:block;font-family:var(--head)}
.tal.on{opacity:1;background:var(--ink);color:var(--cream);border:1px solid var(--ink)}
.tal.always{border-style:solid}
.nems{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.nem{display:flex;gap:12px;background:var(--paper2);border:2px solid var(--ink);border-radius:8px;padding:10px}
.nfig{width:130px;height:140px;flex:none;background:var(--terra);border-radius:6px}
.nfig .figsvg{width:100%;height:100%}
.nem p{margin:6px 0;font-size:15px}
q{display:block;font-style:italic;color:var(--blood)}
.ups{display:grid;gap:10px;margin-top:10px}
.up{display:flex;align-items:center;gap:16px;justify-content:space-between;background:var(--paper2);border:2px solid var(--ink);border-radius:8px;padding:10px 16px}
.up p{margin:3px 0}
.chronlist{list-style:none;padding:0;margin:12px 0}
.chronlist li{padding:6px 0;border-bottom:1px solid #cdb08a}
.ludus .go{position:absolute;right:30px;bottom:34px}
.reset{position:absolute;left:620px;bottom:40px;background:transparent;color:var(--ink);border-color:transparent;font-size:14px;opacity:.6}
.reset:hover{opacity:1;background:transparent}

/* ====== Арена ====== */
.arena .arenabg{position:absolute;left:0;top:-170px;width:1600px;height:900px}
.hud{position:absolute;left:0;right:0;top:14px;display:flex;justify-content:space-between;padding:0 30px;z-index:3}
.bar{width:520px;background:rgba(27,20,17,.92);color:var(--cream);border-radius:10px;padding:10px 14px}
.bar .nm{font:800 22px var(--head)}
.bar .nm small{font:500 15px var(--body);color:#c9ad8c;margin-left:6px}
.hp{position:relative;height:22px;background:#3a2a22;border-radius:5px;overflow:hidden;margin-top:6px}
.hp i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#c43a2a,#8f1f14);transition:width var(--t-mid) var(--ease-out)}
.foe .hp i{left:auto;right:0}
.hp span{position:absolute;inset:0;text-align:center;font:700 14px/22px var(--body);color:#fff}
.gearrow,.traits{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;min-height:24px}
.gearrow span{font-size:13px;padding:2px 8px;border-radius:4px;border:1px solid var(--rc);color:var(--rc);cursor:help}
.gearrow .r0{--rc:#c9ad8c}.gearrow .r1{--rc:#8fcf6a}.gearrow .r2{--rc:#6cb4e8}.gearrow .r3{--rc:#c99af0}.gearrow .r4{--rc:#ffd04a}
.traits span{font-size:13px;padding:2px 8px;border-radius:4px;background:#4a352b;cursor:help}
.traits .nemtag{background:var(--blood);color:#fff}
.mid{text-align:center;color:var(--cream);background:rgba(27,20,17,.92);border-radius:10px;padding:8px 26px 10px;align-self:flex-start}
.circ{font:800 30px var(--head)}
.bout{font:700 18px var(--head)}
.crowd{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:6px;cursor:help;font-size:14px}
.crowd div{width:180px;height:10px;background:#3a2a22;border-radius:5px;overflow:hidden}
.crowd i{display:block;height:100%;background:var(--gold);transition:width var(--t-mid)}
.fighter{position:absolute;z-index:2;animation:shuffle 2.4s ease-in-out infinite}
.fighter.B{animation-delay:-1.2s}
.fighter .figsvg{width:100%;height:100%;overflow:visible}
/* части фигуры поворачиваются вокруг своих суставов (координаты рисунка 400×420) */
.fighter .fig{transform-box:view-box;transform-origin:160px 398px}
.fighter.beast .fig{transform-origin:170px 398px}
.fighter .lfront{transform-box:view-box;transform-origin:162px 252px}
.fighter .lback{transform-box:view-box;transform-origin:140px 252px}
.fighter .warm{transform-box:view-box;transform-origin:178px 160px}
.fighter .narm{transform-box:view-box;transform-origin:128px 164px}
.fighter .breath{animation:breath 2.6s ease-in-out infinite;transform-box:view-box;transform-origin:160px 250px}
@keyframes breath{50%{transform:translateY(3px) scaleY(.99)}}
@keyframes shuffle{50%{transform:translateX(6px)}}
.fighter.dead{animation:none;transition:transform .9s cubic-bezier(.5,0,.75,0),opacity .9s;opacity:.6;transform-origin:50% 92%}
.fighter.A.dead{transform:rotate(-78deg) translate(-40px,70px)}
.fighter.B.dead{transform:rotate(78deg) translate(40px,70px)}
.fighter.beast.dead{transform:scaleY(.55) translateY(180px)}
.fighter.ghost{pointer-events:none;z-index:1;animation:none}
#world{position:absolute;inset:0;overflow:hidden;--cheer:.2}
#world .arenabg{z-index:0}
#stains{position:absolute;inset:0;pointer-events:none;z-index:1}
#stains i{position:absolute;background:#8a1c12;border-radius:50%;opacity:.75;transform:translate(-50%,-50%)}
#fx{position:absolute;inset:0;pointer-events:none;z-index:4}
.fx{position:absolute;pointer-events:none}
.fx.drop{background:#a3261c;border-radius:50%;box-shadow:0 0 0 1px #5e1008}
.fx.dust{background:#d9b48a;border-radius:50%}
.fx.spark svg{display:block;overflow:visible}
/* толпа: качается сильнее, когда шкала толпы растёт, и вскакивает на критах */
.crow{animation:crowdbob .9s ease-in-out infinite alternate}
.crow.c1{animation-duration:1.1s}
@keyframes crowdbob{to{transform:translateY(calc(var(--cheer) * -8px))}}
#world.roar .crow{animation-duration:.28s}
#world.roar .crow.c1{animation-duration:.34s}
#floats{position:absolute;inset:0;pointer-events:none;z-index:4}
.float{position:absolute;font:800 40px var(--head);color:#fff3e0;text-shadow:0 3px 0 var(--ink),0 0 2px var(--ink),0 0 8px var(--ink);animation:rise 1.3s ease-out forwards;white-space:nowrap;transform-origin:50% 100%}
.float.me{color:#ffb4a0}
.float.crit{font-size:58px;color:#ffd04a;animation-name:risecrit}
@keyframes risecrit{0%{transform:translateY(10px) scale(.5);opacity:0}12%{transform:translateY(0) scale(1.35) rotate(-4deg);opacity:1}25%{transform:scale(1.05) rotate(0)}100%{transform:translateY(-100px);opacity:0}}
.float.block{color:#d8ccb8;font-size:28px}
.float.miss{color:var(--cream);font-size:26px;font-style:italic}
.float.note{font-size:22px;color:var(--gold);margin-top:-50px}
.float.heal{color:#9ee08a;font-size:26px}
.float.bleed{color:#ff6a5a;font-size:22px}
.float.poison{color:#a6e05a;font-size:22px}
@keyframes rise{0%{transform:translateY(10px) scale(.7);opacity:0}15%{transform:translateY(0) scale(1.08);opacity:1}100%{transform:translateY(-90px);opacity:0}}
#banner{position:absolute;left:400px;right:400px;top:300px;z-index:5;text-align:center;background:rgba(27,20,17,.94);color:var(--cream);border:3px solid var(--gold);border-radius:12px;padding:20px 30px;animation:pop .4s var(--ease-out)}
#banner small{display:block;font:700 16px var(--head);letter-spacing:.08em;color:var(--gold)}
#banner b{display:block;font:800 44px var(--head);margin:4px 0}
#banner q{color:#ffb4a0;font-size:20px}
#banner.out{opacity:0;transition:opacity .4s}
@keyframes pop{0%{transform:scale(.85);opacity:0}}
.dock{position:absolute;left:0;right:0;bottom:0;height:120px;display:grid;grid-template-columns:640px 1fr 380px;gap:20px;align-items:center;padding:0 24px;background:rgba(27,20,17,.9);color:var(--cream);z-index:3}
.chron{list-style:none;margin:0;padding:0;height:104px;overflow:hidden;font-size:15px}
.chron li{opacity:.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chron li:first-child{opacity:1}
.chron li.me{color:#ffd9b0}.chron li.gold{color:var(--gold)}
.dock .seg{border-color:var(--cream)}
.dock .seg button{color:var(--cream)}
.dock .seg button+button{border-left-color:var(--cream)}
.dock .seg button.on{background:var(--cream);color:var(--ink)}
.dock .order{font-size:14px}
.dock select{background:var(--ink2);color:var(--cream);border-color:var(--cream)}
.ctl{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:flex-end}
.ctl button{border-color:var(--cream)}
.ctl button.ghost{color:var(--cream)}
.tog{font-size:15px;cursor:pointer;user-select:none}
.tog input{accent-color:var(--gold);cursor:pointer}

/* ====== Окна поверх ====== */
#overlay{position:absolute;inset:60px 0 0 0;background:rgba(20,13,10,.55);display:flex;align-items:center;justify-content:center;z-index:8}
.sheet{background:var(--paper);border:3px solid var(--ink);border-radius:12px;box-shadow:8px 8px 0 rgba(0,0,0,.4);padding:24px 30px;max-width:900px;max-height:800px;overflow:auto;animation:pop .25s var(--ease-out)}
.sheet.wide{max-width:1300px}
.rew{font-size:19px}
.news{background:var(--ink);color:var(--gold);padding:6px 12px;border-radius:6px;display:inline-block;margin:4px 8px 4px 0}
.ptsrow{margin:8px 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cards{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0;justify-content:center}
.card{width:270px;background:var(--paper2);border:3px solid var(--rc);border-radius:10px;padding:12px;display:flex;flex-direction:column;position:relative}
.card.r4{box-shadow:0 0 16px rgba(255,190,40,.7)}
.card.trophy::before{content:'трофей';position:absolute;right:10px;top:8px;font:700 13px var(--head);background:var(--blood);color:#fff;padding:2px 8px;border-radius:10px}
.cico{height:120px;display:flex;justify-content:center;background:radial-gradient(circle,#f3e2c4 0%,transparent 70%)}
.cico .ico{width:120px;height:120px}
.cname{font:800 20px/1.15 var(--head);color:var(--ink);margin-top:6px;text-decoration:underline;text-decoration-color:var(--rc);text-decoration-thickness:3px;text-underline-offset:4px}
.cmeta{font-size:14px;color:#6b5446;margin:2px 0 6px}
.card ul{margin:0;padding-left:18px;font-size:15px;flex:1}
.gain{font-weight:700;margin:8px 0 6px}
.gain.g-up{color:var(--green)}.gain.g-down{color:var(--blood)}
.cbtn{display:flex;gap:8px}
.cbtn button{flex:1;padding:6px 6px;font-size:14px;line-height:1.15}
.obtns{display:flex;gap:16px;justify-content:center;align-items:center;margin:10px -30px -24px;padding:12px 30px 16px;position:sticky;bottom:-24px;background:linear-gradient(transparent,var(--paper) 30%);z-index:2}
.verdict{display:flex;gap:24px;align-items:center}
.vfig{width:300px;height:315px;background:var(--terra);border-radius:10px}
.vfig .figsvg{width:100%;height:100%}
.vbtns{display:flex;gap:14px;margin-top:16px}
.vbtns button{display:flex;flex-direction:column;align-items:flex-start;padding:12px 18px;max-width:280px;text-align:left}
.vbtns button b{font:800 24px var(--head)}
.vbtns button small{font-size:14px;color:#d8c2a0}
.vbtns button:first-child{background:var(--blood)}
.loss{display:flex;gap:14px;margin:10px 0}
.scarcard{flex:1;background:var(--ink);color:var(--cream);border-radius:10px;padding:12px 16px}
.scarcard small{display:block;color:#f0a08c;font:700 14px var(--head);letter-spacing:.06em}
.scarcard b{display:block;font:800 26px var(--head)}
.scarcard.nemc small{color:var(--gold)}
.keep .pick{cursor:pointer;border-radius:12px;outline:4px solid transparent;outline-offset:2px;opacity:.6;transition:opacity var(--t-fast)}
.keep .pick.on{outline-color:var(--blood);opacity:1}
.keep .card{width:180px;padding:8px}.keep .cico{height:70px}.keep .cico .ico{width:70px;height:70px}.keep .cname{font-size:16px}.keep .card ul{font-size:13px;padding-left:14px}.keep .cmeta{font-size:12px}

.lootwrap{display:flex;gap:26px;align-items:flex-start}
.lootwrap aside{width:300px;flex:none;position:sticky;top:0}
.lootmain{flex:1;min-width:0}
.lootmain .cards{justify-content:flex-start}
.doll{display:flex;flex-direction:column;gap:6px}
.ludus .doll{flex-direction:row;align-items:flex-start;gap:18px}
.dollfig{width:300px;height:315px;background:radial-gradient(70% 70% at 50% 60%,#d77a47,var(--terra) 70%);border:3px solid var(--ink);border-radius:10px;transition:box-shadow var(--t-fast)}
.dollfig.preview{box-shadow:0 0 0 4px var(--gold)}
.dollfig .figsvg{width:100%;height:100%}
.slots{display:flex;flex-direction:column;gap:5px;flex:1}
.slot{display:flex;align-items:center;gap:8px;background:var(--paper2);border:2px solid var(--rc,#b49a7a);border-radius:8px;padding:3px 8px 3px 3px;min-height:46px}
.slot.locked{opacity:.65;border-style:dashed;border-color:#8a7462}
.sico{width:40px;height:40px;flex:none;cursor:help;background:#f3e2c4;border-radius:6px}
.sico .ico{width:100%;height:100%}
.sico.empty{background:transparent;border:1px dashed #a08872;cursor:default}
.sinfo{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.sinfo .sl{font-size:12px;color:#6b5446;text-transform:lowercase}
.sinfo b{font:700 15px var(--head);text-decoration:underline;text-decoration-color:var(--rc);text-decoration-thickness:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot button{padding:2px 8px;font-size:13px}
.why{color:var(--blood);font-size:14px;font-weight:700;margin:4px 0}
.cards.bag .card{width:230px}
.cards.bag .cico{height:80px}.cards.bag .cico .ico{width:80px;height:80px}
.cbtn{flex-wrap:wrap}
#tip{position:absolute;z-index:20;max-width:340px;background:var(--ink);color:var(--cream);border-radius:8px;padding:10px 12px;font-size:15px;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.4)}
#tip.cmp{max-width:none;width:540px;padding:12px 14px;border:2px solid #5a4337}
.tcols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tcol{display:flex;flex-direction:column;gap:2px;font-size:14px}
.tcol+.tcol{border-left:1px solid #4a372d;padding-left:14px}
.tcol small{font:700 12px var(--head);letter-spacing:.06em;color:#b39a82;text-transform:uppercase}
.tcol b{font:700 16px var(--head)}
.twarn{color:#ffb08a;margin:8px 0 0;font-size:14px}
.tdiff{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
.tdiff td{padding:3px 0;border-top:1px solid #3a2a22}
.tdiff td:nth-child(2),.tdiff td:nth-child(3){text-align:right;width:90px;font-variant-numeric:tabular-nums}
.tdiff td:nth-child(2){color:#b39a82}
.tdiff .tup,.tsum.tup{color:#9ee08a}.tdiff .tdown,.tsum.tdown{color:#ff8a7a}
.tsum{margin:8px 0 0;font-weight:700}
#tip .muted{color:#b39a82}
#toast{position:absolute;left:50%;top:80px;transform:translateX(-50%);z-index:30;background:var(--ink);color:var(--gold);border:2px solid var(--gold);border-radius:20px;padding:8px 20px;font-weight:700}

@media (prefers-reduced-motion:reduce){
  .fighter,.fighter .breath,.crow{animation:none}
  .fx.drop,.fx.dust{display:none}
  .float{animation-duration:.01s}
}

/* ====== Окно идеи ====== */
#top .idea-btn{background:transparent;border-color:var(--gold);color:var(--gold)}
#top .idea-btn:hover{background:rgba(224,168,64,.12)}
#ideabox{position:absolute;inset:0;background:rgba(20,13,10,.6);display:flex;align-items:center;justify-content:center;z-index:20}
#ideabox .sheet{width:640px}
#ideabox textarea,#ideabox input{display:block;width:100%;font:inherit;color:var(--ink);background:#f6e6c8;border:2px solid var(--ink);border-radius:6px;padding:8px 10px;margin:10px 0 0}
#ideabox textarea{min-height:130px;resize:vertical}
#ideabox .idea-msg{min-height:1.4em;font-weight:700;margin:8px 0 0}
#ideabox .idea-all{color:var(--terra-dd);font-weight:700;cursor:var(--cur-pointer,pointer)}
/* ====== Окна на весь экран: кнопки всегда на одном месте ====== */
.sheet.full{width:1500px;height:810px;max-width:none;max-height:none;padding:0;display:flex;overflow:hidden}
.sside{width:340px;flex:none;padding:22px 20px;border-right:2px solid #cdb08a;background:#e6cfa6;display:flex;flex-direction:column;gap:6px}
.sside .hint{margin:6px 0 0}
.smain{flex:1;min-width:0;display:flex;flex-direction:column}
.shead{padding:20px 28px 6px;min-height:118px}
.shead h2{margin-bottom:4px}
.shead .rew{margin:0 0 6px}
.newsrow{display:flex;flex-wrap:wrap;gap:6px;min-height:30px}
.news{margin:0}
.sbody{flex:1;overflow-y:auto;padding:0 28px 14px;scrollbar-gutter:stable}
.sfoot{flex:none;display:flex;justify-content:flex-end;align-items:center;gap:14px;padding:14px 28px;border-top:2px solid #cdb08a;background:var(--paper)}
.ptsrow{min-height:34px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:4px 0}
.cards.loot,.cards.rack{justify-content:flex-start;margin:8px 0;gap:14px}
.slotcard{width:252px;height:372px;flex:none}
.slotcard .card{width:100%;height:100%}
.slotcard[data-cmp]{cursor:help}
.slotcard .card ul{overflow:hidden}
.slotcard .gain{min-height:20px}
.slotcard .cbtn{margin-top:auto}
.card.gone{opacity:.45;border-style:dashed;align-items:center;justify-content:center;text-align:center}
.card.gone .cname{text-decoration:none}
.gonelbl{font:800 22px var(--head);margin-top:10px;color:var(--ink)}
.bag8{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.bcell{height:182px;background:var(--paper2);border:2px solid var(--rc);border-radius:8px;padding:6px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:help;min-width:0}
.bcell.empty{border:2px dashed #b49a7a;background:transparent;cursor:default}
.bico{width:64px;height:64px}.bico .ico{width:100%;height:100%}
.bname{font:700 13px/1.15 var(--head);text-align:center;height:30px;overflow:hidden;text-decoration:underline;text-decoration-color:var(--rc)}
.bgain{font-size:13px;font-weight:700;height:18px}
.bgain.g-up{color:var(--green)}.bgain.g-down{color:var(--blood)}
.bbtn{display:flex;gap:4px;margin-top:auto;width:100%}
.bbtn button{flex:1;padding:3px 4px;font-size:13px}
.ludus .bag8{grid-template-columns:repeat(4,1fr)}
.circs{display:flex;flex-wrap:wrap;gap:10px}
.circbtn{display:flex;flex-direction:column;align-items:flex-start;background:var(--paper2);color:var(--ink);width:200px;padding:10px 14px}
.circbtn b{font:800 20px var(--head)}
.circbtn span{font-size:14px;color:#6b5446}
.circbtn:hover{background:#d9bf93}
.circbtn.on{background:var(--ink);color:var(--cream)}.circbtn.on span{color:#c9ad8c}
.pickw{cursor:pointer;border-radius:12px;outline:4px solid transparent;outline-offset:2px;width:270px}
.pickw .card{width:100%;height:300px}
.pickw:hover .card{background:#dcc193}
.pickw.on{outline-color:var(--blood)}
.pauseb{width:84px}
.keep .pick{width:184px}

/* ====== Шапка: управление всегда под рукой ====== */
#top .chip{white-space:nowrap}
#top .hpchip{width:150px;text-align:center;border-color:#7a2a20}
#top .hpchip i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#a8322a,#6e1a12);z-index:-1;transition:width var(--t-mid) var(--ease-out)}
#top .hpchip span{position:relative;font-weight:700}
#top .hpchip{isolation:isolate}
#top .seg{border-color:#7a6252}
#top .seg button{color:var(--cream);padding:5px 10px;font:700 16px var(--body);min-width:44px}
#top .seg button+button{border-left-color:#7a6252}
#top .seg button.on{background:var(--cream);color:var(--ink)}
.icon-btn{width:40px;height:38px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid #7a6252;color:var(--cream);border-radius:8px}
.icon-btn svg{width:20px;height:20px;fill:currentColor}
.icon-btn:hover{background:#3a2a22}
.icon-btn.on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.txt-btn{background:transparent;border:1px solid #7a6252;color:var(--cream);padding:6px 12px;font:700 15px var(--head);width:76px}
.txt-btn:hover{background:#3a2a22}
.menuwrap{position:relative}
.menu{position:absolute;right:0;top:46px;width:330px;background:var(--ink);border:2px solid #5a4337;border-radius:10px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:30;display:flex;flex-direction:column;gap:2px;animation:pop .16s var(--ease-out)}
.mi{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:transparent;border:0;border-radius:6px;color:var(--cream);text-align:left;padding:8px 10px;font-size:15px}
.mi:hover{background:#3a2a22}
.mi span{display:flex;flex-direction:column}
.mi small{color:#b39a82;font-size:13px;line-height:1.25;margin-top:2px}
.mi.warn{color:#ff9a86}
.sw{flex:none;width:36px;height:20px;border-radius:10px;background:#4a372d;position:relative;transition:background var(--t-fast)}
.sw::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--cream);transition:left var(--t-fast) var(--ease-out)}
.mi.tg.on .sw{background:var(--gold)}.mi.tg.on .sw::after{left:18px}
.mrow{display:flex;justify-content:space-between;padding:6px 10px;font-size:14px;color:#c9ad8c;border-top:1px solid #3a2a22}
.mrow b{color:var(--cream)}.okmark{color:#9ee08a!important}
#pausemark{position:absolute;left:50%;top:600px;transform:translateX(-50%);z-index:5;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:10px;padding:10px 40px;text-align:center;box-shadow:6px 6px 0 rgba(0,0,0,.35)}
#pausemark b{display:block;font:800 34px var(--head)}
#pausemark small{color:#6b5446}
.dockhint{font-size:13px;color:#b39a82;text-align:right}
@media (prefers-reduced-motion:reduce){.menu{animation:none}.sw,.sw::after{transition:none}}