/* ============================================================
   КОПАТЕЛЬ · светлая «пергамент + дерево» тема (по мокапам)
   ============================================================ */

/* ---------- 1. Токены ---------- */
:root{
  --bg1:#ecd9b0; --bg2:#cdac79;
  --paper:#f8efdc; --paper2:#efe2c4; --paper3:#e6d4ad;
  --line:#b48d58; --line2:#8a6a3f; --line3:#6e5331;
  --ink:#4a3722; --ink2:#33250f; --muted:#8c7350;
  --gold:#f2b21d; --gold2:#d8930a; --gold3:#a86e00;
  --green:#5cae3a; --green2:#3f8f25;
  --blue:#3f8fd1; --blue2:#2b6ea7;
  --purple:#9a5fd8; --purple2:#7a3fb8;
  --pink:#d44fae;
  --red:#d9483b; --red2:#b22f24;
  --em:#3fbf52; --em2:#1d8a30;
  --shard:#e9a826; --cshard:#a86ae0;
  --wood:#7a5230; --wood2:#5d3d22; --wood3:#42291a;
  --r:12px; --r2:16px;
  --sh:0 3px 0 rgba(0,0,0,.16), 0 6px 14px rgba(60,38,12,.18);
  --insh:inset 0 2px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(116,80,35,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Nunito',system-ui,sans-serif;color:var(--ink);
  background:
    repeating-linear-gradient(0deg, rgba(122,82,48,.05) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(90deg, rgba(122,82,48,.05) 0 2px, transparent 2px 26px),
    linear-gradient(180deg,var(--bg1),var(--bg2));
  background-attachment:fixed;
  display:flex;flex-direction:column;overflow:hidden;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
button{font-family:inherit;border:0;background:none;color:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--ink)}
b{font-weight:800}
.muted{color:var(--muted)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#b08a55;border-radius:6px;border:2px solid #e6d4ad}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 2. Панель-пергамент ---------- */
.pp{
  background:linear-gradient(180deg,var(--paper),var(--paper2));
  border:2px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh), var(--insh);
  position:relative;
}
.pp-title{
  font-weight:900;font-size:12px;letter-spacing:1.4px;color:var(--ink);
  text-transform:uppercase;padding:10px 14px 6px;display:flex;align-items:center;gap:8px;
}
.pp-title .sp{margin-left:auto;font-weight:800;letter-spacing:0;text-transform:none;color:var(--muted);font-size:11px}
.ribbonband{
  margin:0 auto 12px;width:max-content;max-width:100%;padding:7px 34px;
  background:linear-gradient(180deg,#e3563f,#c23a26);
  color:#fff;font-weight:900;letter-spacing:2px;font-size:15px;
  border-radius:6px;border:2px solid #8e2417;
  box-shadow:0 3px 0 rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.25);
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  position:relative;
}
.ribbonband.gold{background:linear-gradient(180deg,#f0b62a,#d18d07);border-color:#9c6700}
.ribbonband::before,.ribbonband::after{content:'🌿';position:absolute;top:4px;font-size:14px;opacity:.85}
.ribbonband::before{left:9px}.ribbonband::after{right:9px}

/* ---------- 3. Кнопки ---------- */
.btn3d{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-weight:900;font-size:13px;letter-spacing:.4px;color:#fff;
  padding:10px 16px;border-radius:10px;border:1px solid rgba(0,0,0,.28);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.26), inset 0 2px 0 rgba(255,255,255,.35), 0 2px 0 rgba(0,0,0,.18);
  text-shadow:0 1px 0 rgba(0,0,0,.3);cursor:pointer;transition:transform .07s, filter .12s;white-space:nowrap;
}
.btn3d:hover{filter:brightness(1.06)}
.btn3d:active{transform:translateY(2px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.26), inset 0 2px 0 rgba(255,255,255,.3)}
.btn3d:disabled{filter:grayscale(.7) brightness(.92);cursor:not-allowed;opacity:.75;transform:none}
.btn3d.g{background:linear-gradient(180deg,#79c554,var(--green) 55%,var(--green2))}
.btn3d.gold{background:linear-gradient(180deg,#ffd45c,var(--gold) 55%,var(--gold2));color:#5a3a00;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.btn3d.blue{background:linear-gradient(180deg,#6db1e6,var(--blue) 55%,var(--blue2))}
.btn3d.purple{background:linear-gradient(180deg,#bb87ec,var(--purple) 55%,var(--purple2))}
.btn3d.pink{background:linear-gradient(180deg,#ee84cf,var(--pink) 55%,#a8327f)}
.btn3d.red{background:linear-gradient(180deg,#ef7064,var(--red) 55%,var(--red2))}
.btn3d.brown{background:linear-gradient(180deg,#a3744a,#84582f 55%,#64401f)}
.btn3d.ghost{background:linear-gradient(180deg,#fbf4e3,#eddcba);color:var(--ink);border-color:var(--line);text-shadow:none;
  box-shadow:inset 0 -3px 0 rgba(116,80,35,.2), inset 0 2px 0 rgba(255,255,255,.8), 0 2px 0 rgba(0,0,0,.12)}
.btn3d.sm{padding:7px 12px;font-size:12px;border-radius:8px}
.btn3d.xs{padding:4px 9px;font-size:11px;border-radius:7px}
.btn3d.wide{width:100%}

/* ---------- 4. Валюты-иконки ---------- */
i.cur{display:inline-block;width:16px;height:16px;vertical-align:-3px;flex:none}
i.cur.block{border-radius:3px;border:1px solid #8a5d10;
  background:linear-gradient(135deg,#ffe07a 0%,#f3b62a 45%,#c07c0a 100%);
  box-shadow:inset -3px -4px 0 rgba(0,0,0,.22), inset 2px 2px 0 rgba(255,255,255,.55)}
i.cur.em{clip-path:polygon(50% 0,100% 33%,79% 100%,21% 100%,0 33%);
  background:linear-gradient(160deg,#8ef79a 0%,#34b94a 55%,#0f7a24 100%)}
i.cur.pshard{clip-path:polygon(50% 0,93% 36%,76% 100%,24% 100%,7% 36%);
  background:linear-gradient(160deg,#ffe69a 0%,#f0a51c 55%,#a86a00 100%)}
i.cur.cshard{clip-path:polygon(50% 0,93% 36%,76% 100%,24% 100%,7% 36%);
  background:linear-gradient(160deg,#dcb6ff 0%,#9a5fd8 55%,#5e2f97 100%)}
i.cur.sm{width:12px;height:12px;vertical-align:-2px}
i.cur.big{width:34px;height:34px;border-radius:6px}
i.cur.b22{width:22px;height:22px;border-radius:4px}

/* ---------- 5. Шапка ---------- */
header.hud{
  display:flex;align-items:stretch;gap:14px;padding:10px 16px;
  background:linear-gradient(180deg,#faf2e0,#f0e3c6);
  border-bottom:3px solid var(--line);box-shadow:0 4px 12px rgba(60,38,12,.18);
  position:relative;z-index:30;flex:none;
}
.logo{
  align-self:center;font-family:'Press Start 2P',monospace;font-size:23px;color:#f7ead0;
  background:linear-gradient(180deg,#8a5e36,#6a4525 55%,#54351b);
  border:3px solid #3e2814;border-radius:12px;padding:14px 18px 12px;
  text-shadow:0 3px 0 #3e2814, 0 0 2px #3e2814;letter-spacing:1px;
  box-shadow:var(--sh), inset 0 3px 0 rgba(255,255,255,.18);position:relative;white-space:nowrap;
  text-decoration:none;display:inline-block;
}
.logo .logo-pick{position:absolute;top:-13px;right:10px;font-size:20px;transform:rotate(38deg);filter:drop-shadow(0 2px 1px rgba(0,0,0,.4))}
.logo::after{content:'';position:absolute;left:10px;top:-6px;width:34px;height:8px;background:#74a33c;border-radius:4px;border:2px solid #4c7022;transform:rotate(-4deg)}
.hud-center{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:linear-gradient(180deg,var(--paper),var(--paper2));border:2px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh),var(--insh);padding:8px 22px;min-width:250px}
.hc-row{display:flex;align-items:center;gap:12px}
.hc-num{font-size:32px;font-weight:900;line-height:1;color:var(--ink2);font-variant-numeric:tabular-nums}
.hc-sub{display:block;font-size:10px;font-weight:900;letter-spacing:2px;color:var(--muted)}
.hc-rate{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--ink);
  background:var(--paper3);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.hc-rate .i{width:15px;height:15px;border-radius:50%;background:var(--muted);color:#fff;font-size:10px;font-weight:900;
  display:inline-flex;align-items:center;justify-content:center;margin-left:2px}
.hud-stats{flex:1;display:grid;grid-template-columns:repeat(4,minmax(118px,1fr));grid-auto-rows:1fr;gap:8px;min-width:0}
.hud-stats .gear{align-self:stretch;width:auto;height:auto;min-height:46px}
.chip{display:flex;align-items:center;gap:9px;padding:6px 11px;background:linear-gradient(180deg,var(--paper),var(--paper2));
  border:2px solid var(--line);border-radius:10px;box-shadow:0 2px 0 rgba(0,0,0,.12), inset 0 2px 0 rgba(255,255,255,.7);min-width:0}
.chip .ci{font-size:19px;line-height:1;flex:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.18))}
.chip small{display:block;font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.3px;white-space:nowrap}
.chip b{font-size:14px;font-weight:900;color:var(--ink2);white-space:nowrap}
.chip .plus{margin-left:auto;width:22px;height:22px;border-radius:6px;background:linear-gradient(180deg,#79c554,var(--green2));
  color:#fff;font-weight:900;font-size:15px;line-height:1;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25);flex:none}
.gear{align-self:center;font-size:23px;border-radius:12px;flex:none;
  background:linear-gradient(180deg,var(--paper),var(--paper2));border:2px solid var(--line);box-shadow:var(--sh),var(--insh)}

/* ---------- 6. Вид: сцена ---------- */
#view{flex:1;position:relative;min-height:0}
.scene{position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(180deg,#6e4e2d,#4a3119 60%,#36230f);
  border-bottom:3px solid #2c1c0d;
  display:grid;grid-template-columns:225px 1fr 285px;gap:14px;padding:14px 16px 112px;
}
.scene canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.95;pointer-events:none}
.scene>*{position:relative;z-index:2}
.scol{display:flex;flex-direction:column;gap:12px;min-width:0;padding-top:6px}

.plaque{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:6;
  background:linear-gradient(180deg,#7c5530,#5d3d22 60%,#46291a);
  border:3px solid #2f1d0e;border-top:0;border-radius:0 0 14px 14px;
  padding:8px 26px 9px;text-align:center;color:#f6e7c2;cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(0,0,0,.25)}
.plaque b{display:block;font-size:16px;font-weight:900;letter-spacing:2px;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.plaque small{display:block;font-size:10px;font-weight:900;letter-spacing:1.4px;color:#ffd97a}
.plaque:hover small{color:#ffe9ad}

.hexchip{position:absolute;left:254px;top:10px;z-index:6;min-width:206px;display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,var(--paper),var(--paper2));
  border:2px solid var(--line);border-radius:12px;padding:8px 12px;box-shadow:var(--sh),var(--insh);cursor:pointer;text-align:left}
.hexchip .hx-ico{width:42px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;font-size:23px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(180deg,#efe0bd,#d9c294);box-shadow:inset 0 0 0 2px #b48d58}
.hexchip b{display:block;font-size:13px;font-weight:900;line-height:1.15}
.hexchip small{font-size:10px;font-weight:800;color:var(--muted)}

/* глубина */
.dp{flex:1;display:flex;flex-direction:column;min-height:0}
.dp .pp-title{justify-content:center;letter-spacing:2px}
.dp-now{text-align:center;font-size:24px;font-weight:900;color:var(--ink2);margin-top:-4px}
.railwrap{flex:1;display:flex;justify-content:center;gap:8px;padding:10px 8px 8px;min-height:160px}
.ticks{position:relative;width:42px}
.ticks i{position:absolute;right:0;transform:translateY(-50%);font-style:normal;font-size:10px;font-weight:800;color:var(--muted);white-space:nowrap}
.rail{position:relative;width:46px;border-radius:10px;border:2px solid #3c2a16;overflow:visible;
  background:linear-gradient(180deg,
    #8a6038 0 18%, #6f6a64 18% 38%, #564f49 38% 58%, #3c352f 58% 80%, #2e2823 80% 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12), inset 0 6px 10px rgba(0,0,0,.3)}
.rail::after{content:'';position:absolute;inset:0;border-radius:8px;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 2px,transparent 2px 12px)}
.dmark{position:absolute;left:-3px;right:-3px;height:4px;background:#ffe9ad;border-radius:3px;
  box-shadow:0 0 8px #ffd97a, 0 1px 0 rgba(0,0,0,.4);z-index:3;transition:top .25s}
.dbadge{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);
  background:linear-gradient(180deg,#f0b62a,#d18d07);color:#4a3000;font-size:10px;font-weight:900;
  padding:3px 7px;border-radius:6px;border:1px solid #9c6700;white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.2)}
.dbadge::before{content:'';position:absolute;right:100%;top:50%;transform:translateY(-50%);
  border:5px solid transparent;border-right-color:#d18d07}
.rec{margin:4px 10px 12px;text-align:center;font-size:11px;font-weight:900;color:#7a5a17;
  background:linear-gradient(180deg,#ffe9ad,#f2cf76);border:2px solid #c79a2e;border-radius:9px;padding:7px 6px}

/* панель цели / босса */
.goalp{padding:12px 14px}
.gp-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.gp-ico{width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;font-size:26px;
  background:linear-gradient(180deg,#f3e3bd,#e0c890);border:2px solid var(--line);border-radius:10px}
.gp-ico.boss{background:linear-gradient(180deg,#f6d2c5,#e8a18a);border:0;border-radius:0;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);box-shadow:inset 0 0 0 3px #b1502f}
.gp-t{font-size:12.5px;font-weight:900;letter-spacing:.6px;line-height:1.25}
.gp-sub{font-size:11px;font-weight:800;color:var(--muted)}
.gp-rew{margin-left:auto;display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:900;font-size:13px;flex:none}
.pbar{height:14px;border-radius:999px;background:#cdb486;border:1px solid #9d7b46;overflow:hidden;position:relative;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.25)}
.pbar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(180deg,#8fd763,var(--green) 60%,var(--green2));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4);transition:width .25s}
.pbar.gold>i{background:linear-gradient(180deg,#ffd45c,var(--gold) 60%,var(--gold2))}
.pbar.red>i{background:linear-gradient(180deg,#f08a7e,var(--red) 60%,var(--red2))}
.pbar.blue>i{background:linear-gradient(180deg,#7fc0ef,var(--blue) 60%,var(--blue2))}
.pbar.purple>i{background:linear-gradient(180deg,#c79bf0,var(--purple) 60%,var(--purple2))}
.pbar .pb-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:900;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.5)}
.goalp .pbar{margin-top:7px;height:17px}
.gp-foot{margin-top:6px;font-size:11px;font-weight:800;color:var(--muted);text-align:right}

/* характеристики */
.statsp #statsPanel{padding:2px 14px 6px}
.srow{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px dashed #cdb27f;font-size:12.5px;font-weight:700}
.srow:last-child{border-bottom:0}
.srow .si{width:20px;text-align:center;flex:none;font-size:15px}
.srow b{margin-left:auto;font-weight:900;font-size:13.5px;color:var(--ink2);font-variant-numeric:tabular-nums;text-align:right}
.statsp .btn3d{margin:6px 12px 12px;width:calc(100% - 24px)}
.clan-plq{display:flex;align-items:center;gap:8px;justify-content:center;text-decoration:none;color:var(--ink);
  font-weight:900;font-size:12px;background:linear-gradient(180deg,var(--paper),var(--paper2));
  border:2px solid var(--line);border-radius:10px;padding:9px 10px;box-shadow:var(--sh),var(--insh)}
.clan-plq.frame-gold{border-color:var(--gold2);box-shadow:0 0 0 2px #f6c94588, var(--sh)}
.clan-plq.frame-emerald{border-color:var(--em2);box-shadow:0 0 0 2px #58e07788, var(--sh)}
.clan-plq.frame-stone{border-color:#7c7c7c;box-shadow:0 0 0 2px #bdbdbd88, var(--sh)}

/* ---------- 7. Блок в центре ---------- */
.stage{display:flex;flex-direction:column;align-items:center;padding-top:42px;min-width:0}
.lvl-line{font-size:12px;font-weight:900;letter-spacing:2px;color:#ffd97a;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.bname{font-size:31px;font-weight:900;letter-spacing:3px;color:#fff;text-transform:uppercase;
  text-shadow:0 3px 0 rgba(0,0,0,.55), 0 0 22px rgba(0,0,0,.45);margin:2px 0 8px;text-align:center}
.hpwrap{display:none;position:relative;width:280px;max-width:80%;height:18px;border-radius:999px;background:#3a2614;
  border:2px solid #241608;overflow:hidden;box-shadow:0 2px 0 rgba(0,0,0,.3)}
.hpwrap .hpfill{height:100%;background:linear-gradient(180deg,#8fd763,#5cae3a 60%,#3f8f25);transition:width .12s;border-radius:999px}
.hpwrap.boss .hpfill{background:linear-gradient(180deg,#f08a7e,#d9483b 60%,#b22f24)}
.hpwrap span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:900;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.6);letter-spacing:.4px}

.cube-stage{position:relative;margin-top:18px;width:min(340px,90%);height:232px;display:flex;align-items:center;justify-content:center;perspective:900px}
.block-cube{position:relative;width:var(--cs,168px);height:var(--cs,168px);transform-style:preserve-3d;cursor:pointer;outline:none;
  transform:rotateX(-22deg) rotateY(42deg);animation:cubeFloat 4.2s ease-in-out infinite}
.block-cube:focus-visible{filter:drop-shadow(0 0 10px #ffd97a)}
@keyframes cubeFloat{0%,100%{transform:rotateX(-22deg) rotateY(42deg) translateY(0)}50%{transform:rotateX(-22deg) rotateY(42deg) translateY(-9px)}}
.block-cube.punch{animation:cubePunch .14s ease-out}
@keyframes cubePunch{0%{transform:rotateX(-22deg) rotateY(42deg) scale(1)}40%{transform:rotateX(-20deg) rotateY(44deg) scale(.94)}100%{transform:rotateX(-22deg) rotateY(42deg) scale(1)}}

/* Курсор-оружие: над кубиком вместо системной «руки» показываем выбранную кирку */
.cube-stage{cursor:none}
.cube-stage .block-cube{cursor:none}
.weapon-cursor{position:absolute;left:50%;top:62%;width:82px;height:82px;margin:-41px 0 0 -41px;
  pointer-events:none;z-index:8;opacity:0;transition:opacity .12s;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  transform:rotate(-22deg);transform-origin:60% 35%;
  font-size:46px;line-height:82px;text-align:center;
  filter:hue-rotate(var(--whue,0deg)) saturate(var(--wsat,1)) brightness(var(--wbr,1)) drop-shadow(0 4px 4px rgba(0,0,0,.4))}
.weapon-cursor.has-art{font-size:0}
.weapon-cursor.show{opacity:1}
.weapon-cursor.swing{animation:wpnSwing .16s ease-out}
@keyframes wpnSwing{0%{transform:rotate(-58deg) scale(1.18)}55%{transform:rotate(12deg) scale(.92)}100%{transform:rotate(-22deg) scale(1)}}
.face{position:absolute;inset:0;border:2px solid rgba(0,0,0,.32);image-rendering:pixelated;background-size:cover;background-position:center;
  background:
    radial-gradient(circle at 22% 28%, var(--f-ore) 0 5.5%, transparent 6.5%),
    radial-gradient(circle at 70% 62%, var(--f-ore2) 0 5%, transparent 6%),
    radial-gradient(circle at 46% 82%, var(--f-ore) 0 4.5%, transparent 5.5%),
    radial-gradient(circle at 82% 18%, var(--f-ore2) 0 4%, transparent 5%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 2px, transparent 2px 27px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 2px, transparent 2px 27px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 5px, transparent 5px 22px),
    var(--f-base);
}
.f-front{transform:translateZ(calc(var(--cs,168px)/2))}
.f-back{transform:rotateY(180deg) translateZ(calc(var(--cs,168px)/2));filter:brightness(.72)}
.f-right{transform:rotateY(90deg) translateZ(calc(var(--cs,168px)/2));filter:brightness(.8)}
.f-left{transform:rotateY(-90deg) translateZ(calc(var(--cs,168px)/2));filter:brightness(.88)}
.f-top{transform:rotateX(90deg) translateZ(calc(var(--cs,168px)/2));background:
  repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 2px, transparent 2px 27px),
  repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 27px),
  var(--f-top);filter:brightness(1.12)}
.f-bottom{transform:rotateX(-90deg) translateZ(calc(var(--cs,168px)/2));filter:brightness(.55)}
.face::after{content:'';position:absolute;inset:0;background-image:var(--crackimg,none);background-size:100% 100%;background-repeat:no-repeat;image-rendering:pixelated;opacity:.9;pointer-events:none;mix-blend-mode:multiply}
.crack-0{--crackimg:url("/games/kopatel/textures/destroy_stage_0.png")}
.crack-1{--crackimg:url("/games/kopatel/textures/destroy_stage_1.png")}
.crack-2{--crackimg:url("/games/kopatel/textures/destroy_stage_2.png")}
.crack-3{--crackimg:url("/games/kopatel/textures/destroy_stage_3.png")}
.crack-4{--crackimg:url("/games/kopatel/textures/destroy_stage_4.png")}
.crack-5{--crackimg:url("/games/kopatel/textures/destroy_stage_5.png")}
.crack-6{--crackimg:url("/games/kopatel/textures/destroy_stage_6.png")}
.crack-7{--crackimg:url("/games/kopatel/textures/destroy_stage_7.png")}
.crack-8{--crackimg:url("/games/kopatel/textures/destroy_stage_8.png")}
.crack-9{--crackimg:url("/games/kopatel/textures/destroy_stage_9.png")}

/* 15 биомов: грани куба; стены пещеры JS берёт из wall/wall2 в данных */
.biome-1{--f-base:#8a5a32;--f-top:#6fbf3e;--f-ore:#a5713f;--f-ore2:#9a6536}
.biome-2{--f-base:#8f8a82;--f-top:#a09a90;--f-ore:#6f6a62;--f-ore2:#7d776e}
.biome-3{--f-base:#dcb86a;--f-top:#e8ca7e;--f-ore:#c39a48;--f-ore2:#b08a3c}
.biome-4{--f-base:#9aa0a6;--f-top:#aab0b6;--f-ore:#7c8288;--f-ore2:#6a7076}
.biome-5{--f-base:#7d7a74;--f-top:#8c8983;--f-ore:#2e2c28;--f-ore2:#3c3a35}
.biome-6{--f-base:#9c8f80;--f-top:#aa9d8d;--f-ore:#c9a06a;--f-ore2:#d8b078}
.biome-7{--f-base:#a08c5e;--f-top:#b09a68;--f-ore:#f2c12c;--f-ore2:#ffd75c}
.biome-8{--f-base:#9ecbe2;--f-top:#c8e6f4;--f-ore:#6fa8c8;--f-ore2:#e8f6ff}
.biome-9{--f-base:#7da77a;--f-top:#8eb98a;--f-ore:#2fae44;--f-ore2:#56d36c}
.biome-10{--f-base:#8d9aa4;--f-top:#9caab4;--f-ore:#5cd2e8;--f-ore2:#9ae9f6}
.biome-11{--f-base:#6e4a3a;--f-top:#7d5848;--f-ore:#f2762c;--f-ore2:#ffb25c}
.biome-12{--f-base:#8a3c34;--f-top:#9c4a40;--f-ore:#5c1f1a;--f-ore2:#d96a3c}
.biome-13{--f-base:#5c5a64;--f-top:#6a6874;--f-ore:#3a3842;--f-ore2:#8a87a0}
.biome-14{--f-base:#d8d2a8;--f-top:#e6e0b8;--f-ore:#b0a878;--f-ore2:#9890d8}
.biome-15{--f-base:#3c3a48;--f-top:#4a4858;--f-ore:#b07ce8;--f-ore2:#7c4cc8}

/* комбо / лихорадка / эффекты */
.combo-chip{position:absolute;left:-6px;top:34%;display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none}
.combo-chip b{font-size:27px;font-weight:900;color:#ffd54a;-webkit-text-stroke:1.5px #7a4d00;
  text-shadow:0 3px 0 rgba(0,0,0,.55);letter-spacing:1px}
.combo-chip::before{content:'КОМБО';font-size:11px;font-weight:900;letter-spacing:2px;color:#ffe9ad;text-shadow:0 2px 0 rgba(0,0,0,.55)}
.combo-bar{width:74px;height:7px;border-radius:99px;background:rgba(0,0,0,.4);overflow:hidden;border:1px solid rgba(0,0,0,.5)}
.combo-bar i{display:block;height:100%;background:linear-gradient(90deg,#ffd45c,#f2b21d);transition:width .15s}
.fever-banner{position:absolute;left:50%;top:6px;transform:translateX(-50%);z-index:7;display:flex;flex-direction:column;align-items:center;gap:1px;
  background:linear-gradient(180deg,#e3563f,#b22f24);border:3px solid #7e1f14;border-radius:12px;
  padding:7px 26px;font-size:16px;font-weight:900;letter-spacing:1.6px;color:#fff;white-space:nowrap;
  text-shadow:0 2px 0 rgba(0,0,0,.4);box-shadow:0 4px 0 rgba(0,0,0,.3), 0 0 26px rgba(227,86,63,.6);
  animation:feverShake .35s infinite}
@keyframes feverShake{0%,100%{transform:translateX(-50%) rotate(-.6deg)}50%{transform:translateX(-50%) rotate(.6deg)}}
.fever-banner .ft{font-size:12.5px;letter-spacing:1px;color:#ffe9ad}
.fx-layer{position:absolute;inset:-90px;pointer-events:none;overflow:visible}
.fnum{position:absolute;font-weight:900;font-size:19px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.55);
  animation:floatUp .9s ease-out forwards;pointer-events:none;white-space:nowrap}
.fnum.crit{font-size:27px;color:#ffb13b;-webkit-text-stroke:1px #7a3c00}
.fnum.gold{font-size:25px;color:#ffd95c;-webkit-text-stroke:1px #8a5d10}
.fnum.reward{color:#9af07e;font-size:17px}
.fnum.em{color:#7ef08a;font-size:17px}
@keyframes floatUp{0%{opacity:0;transform:translateY(8px) scale(.7)}15%{opacity:1;transform:translateY(0) scale(1.06)}100%{opacity:0;transform:translateY(-78px) scale(1)}}
.pt{position:absolute;width:9px;height:9px;border-radius:1px;pointer-events:none;background:var(--pt-color,#8a5a32);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.20);will-change:transform,opacity;z-index:3}

/* док рабочих */
.dock{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:6;width:min(700px,92%);padding-bottom:6px}
.dock{padding-top:12px}
.dock-head{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:900;letter-spacing:1px;
  padding:5px 16px;background:linear-gradient(180deg,var(--paper),var(--paper2));border:2px solid var(--line);border-radius:9px;white-space:nowrap}
.dock-row{display:flex;align-items:center;gap:8px;padding:0 10px}
.wstrip{flex:1;display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.wcard{flex:none;width:76px;text-align:center;background:linear-gradient(180deg,#fbf4e3,#eddcba);
  border:2px solid var(--line);border-radius:9px;padding:4px 3px;opacity:.45}
.wcard.hired{opacity:1}
.wcard .wicon{font-size:21px;line-height:1.15;filter:drop-shadow(0 2px 1px rgba(0,0,0,.25))}
.wcard .wname{font-size:9.5px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wcard .wmeta{font-size:9px;font-weight:800;color:var(--muted)}
.wcard .wbar{height:5px;border-radius:99px;background:#cdb486;margin-top:3px;overflow:hidden}
.wcard .wbar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,#7fc0ef,#3f8fd1);animation:workTick 1.6s linear infinite}
@keyframes workTick{0%{width:8%}90%{width:96%}100%{width:8%}}
.dock-arr{flex:none;width:30px;height:46px;border-radius:10px;background:linear-gradient(180deg,#fbf4e3,#eddcba);
  border:2px solid var(--line);font-size:20px;font-weight:900;color:var(--ink)}

/* ---------- АРТ-СЛОТЫ (assets/) ---------- */
.has-art{background-size:contain;background-repeat:no-repeat;background-position:center}
/* стат-иконки (характеристики/модалки) и иконки категорий ачивок как PNG */
.si.has-art{display:inline-block;width:1.5em;height:1.5em;vertical-align:-0.32em;font-size:inherit}
.cico{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none;font-size:15px}
.cico.has-art{width:22px;height:22px;font-size:0}
/* лидерборд: медали топ-3, трофей-колонка, чемпион-арт; вехи достижений/оружия */
.lrank.lmed{background:none;border:0}
.lmedal.has-art{display:inline-block;width:34px;height:34px}
.troph .tico.has-art{display:inline-block;width:18px;height:18px;vertical-align:-3px}
.bp-art .bpico.has-art{width:92px;height:92px}
.mile .mi .miico.has-art{display:inline-block;width:22px;height:22px}
.ci.has-art{width:27px;height:27px;font-size:0}
.ci.has-art .cur{display:none}
.ticon.has-art{width:30px;height:30px;font-size:0}
.gear.has-art{font-size:0;background-size:30px}
.logo.has-art{font-size:0;color:transparent;text-shadow:none;border:0;box-shadow:none;background-color:transparent;
  min-width:248px;min-height:66px;padding:0}
.logo.has-art::after{display:none}
.logo.has-art .logo-pick{display:none}
.hx-ico.has-art{font-size:0;background-size:cover}
.gp-ico.has-art{font-size:0;background-size:cover;border:0;box-shadow:inset 0 0 0 3px #b1502f}
.wicon.has-art{height:36px;font-size:0;margin:2px auto 0}
.kc-pic.has-art{width:52px;height:52px;font-size:0}
.face.has-art-face{border-color:rgba(0,0,0,.45)}
/* ---------- 8. Разделы поверх сцены ---------- */
#sections{position:absolute;inset:0;overflow-y:auto;padding:16px 18px 24px;z-index:8;
  background:
    repeating-linear-gradient(0deg, rgba(122,82,48,.07) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(90deg, rgba(122,82,48,.07) 0 2px, transparent 2px 26px),
    linear-gradient(180deg,#5e4022,#462d15)}
#sections[hidden]{display:none}
.sec-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.sec-head .st{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:900;letter-spacing:1.6px;color:#ffe9c4;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.sec-head .st .ti{font-size:24px;filter:drop-shadow(0 2px 1px rgba(0,0,0,.4))}
.sec-head .ss{font-size:12.5px;font-weight:700;color:#e9d3a8;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.sec-head .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.selwrap{position:relative}
.selwrap select{appearance:none;background:linear-gradient(180deg,var(--paper),var(--paper2));border:2px solid var(--line);
  border-radius:9px;font-weight:900;font-size:12px;padding:8px 30px 8px 12px;color:var(--ink);cursor:pointer}
.selwrap::after{content:'▾';position:absolute;right:10px;top:50%;transform:translateY(-50%);font-weight:900;color:var(--muted);pointer-events:none}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(218px,1fr));gap:12px}
.subt{font-size:13px;font-weight:900;letter-spacing:1.6px;color:#ffe9c4;text-shadow:0 2px 0 rgba(0,0,0,.5);margin:18px 0 10px}
.rb{font-size:9.5px;font-weight:900;letter-spacing:.6px;color:#fff;padding:3px 8px;border-radius:6px;flex:none;
  text-shadow:0 1px 0 rgba(0,0,0,.3);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
.rb.r1{background:#5cae3a}.rb.r2{background:#3f8fd1}.rb.r3{background:#9a5fd8}
.rb.r4{background:#e8862a}.rb.r5{background:#d44fae}.rb.r6{background:linear-gradient(90deg,#d44fae,#9a5fd8)}
.lockcell{filter:grayscale(.85);opacity:.78}
.locktag{display:flex;align-items:center;gap:6px;justify-content:center;font-size:10.5px;font-weight:900;color:#6b5436}

/* --- Оружие --- */
.wlayout{display:grid;grid-template-columns:1fr 330px;gap:14px;align-items:start}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:11px}
.wcell{padding:14px 8px 10px;text-align:center;cursor:pointer;transition:transform .08s}
.wcell:hover{transform:translateY(-2px)}
.wcell .wpic{font-size:42px;line-height:1.1;display:block;filter:hue-rotate(var(--hue,0deg)) saturate(var(--sat,1.25)) brightness(var(--br,1)) drop-shadow(0 3px 2px rgba(0,0,0,.25))}
.wcell .wn{font-size:11.5px;font-weight:900;margin-top:6px;line-height:1.2;min-height:27px}
.wcell .wd{font-size:11px;font-weight:800;color:var(--muted)}
.wcell.cur{border-color:var(--gold2);box-shadow:0 0 0 3px #f6c94599, var(--sh)}
.wcell.sel{border-color:var(--blue2);box-shadow:0 0 0 3px #7fc0ef88, var(--sh)}
.wcell .rib{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,#ffd45c,#d8930a);
  color:#5a3a00;font-size:9px;font-weight:900;letter-spacing:1px;padding:3px 9px;border-radius:6px;border:1px solid #9c6700;white-space:nowrap}
.wcell .own{position:absolute;top:5px;right:8px;color:var(--green2);font-weight:900;font-size:15px}
.wdetail{padding:14px;position:sticky;top:0}
.wd-top{display:flex;align-items:flex-start;gap:10px}
.wd-name{font-size:16px;font-weight:900;line-height:1.2;flex:1}
.wd-pic{font-size:76px;text-align:center;margin:8px 0;filter:hue-rotate(var(--hue,0deg)) saturate(1.3) drop-shadow(0 5px 3px rgba(0,0,0,.3))}
.perkbox{margin-top:8px;background:var(--paper3);border:1px dashed var(--line);border-radius:9px;padding:8px 10px;font-size:12px;font-weight:700}
.wdetail .btn3d{margin-top:12px}
.colbar{margin-top:14px;padding:12px 14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cb-l{font-size:12px;font-weight:900}
.cb-l span{color:var(--green2)}
.colbar .pbar{flex:1;min-width:150px}
.mile{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:900;color:var(--muted)}
.mile .mi{font-size:22px;filter:grayscale(.8) drop-shadow(0 2px 1px rgba(0,0,0,.2))}
.mile.done{color:var(--green2)}
.mile.done .mi{filter:none}

/* --- Рабочие --- */
.klayout{display:grid;grid-template-columns:1fr 312px;gap:14px;align-items:start}
.fchips{display:flex;gap:6px;flex-wrap:wrap}
.fchip{padding:7px 13px;border-radius:9px;font-size:11.5px;font-weight:900;background:linear-gradient(180deg,#fbf4e3,#eddcba);
  border:2px solid var(--line);color:var(--ink)}
.fchip.on{background:linear-gradient(180deg,#ffe9ad,#f2cf76);border-color:#c79a2e;box-shadow:0 0 0 2px #f6c94566}
.kcard{padding:11px 12px}
.kc-top{display:flex;align-items:center;gap:8px}
.kc-name{font-size:14px;font-weight:900;letter-spacing:.4px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kc-body{display:flex;gap:10px;align-items:center;margin-top:8px}
.kc-pic{font-size:44px;flex:none;filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}
.kc-rows{flex:1;min-width:0}
.kr{display:flex;justify-content:space-between;gap:6px;font-size:11.5px;font-weight:800;color:var(--muted);padding:2px 0}
.kr b{color:var(--ink2);font-size:12.5px}
.kc-foot{display:flex;align-items:center;gap:8px;margin-top:9px}
.xchip{background:#fff;border:2px solid var(--line);border-radius:8px;font-size:12px;font-weight:900;padding:5px 9px;flex:none}
.kcard .kc-foot .btn3d{flex:1}
.sidecol{display:flex;flex-direction:column;gap:12px;position:sticky;top:0}
.powerp{padding:14px;text-align:center}
.powerp .shield{width:84px;height:92px;margin:6px auto 4px;display:flex;align-items:center;justify-content:center;font-size:38px;
  background:linear-gradient(180deg,#f0b62a,#c07c0a);clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%);
  box-shadow:inset 0 0 0 4px #8a5d10}
.pw-num{font-size:25px;font-weight:900;color:#7a5a17}
.pw-sub{font-size:12px;font-weight:800;color:var(--green2)}
.offp{padding:14px;text-align:left}
.offp .or{display:flex;justify-content:space-between;font-size:12px;font-weight:800;color:var(--muted);padding:4px 0}
.offp .or b{color:var(--ink2)}
.offp .pbar{margin:8px 0;height:16px}
.candle{position:absolute;right:14px;top:44px;font-size:18px;filter:drop-shadow(0 0 7px #ffb13b)}

/* --- Чары --- */
.elayout{display:grid;grid-template-columns:1fr 300px;gap:14px;align-items:start}
.egrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:12px}
.ecard{padding:14px 12px;text-align:center}
.en{font-size:14px;font-weight:900;letter-spacing:1px}
.el{font-size:11px;font-weight:800;color:var(--muted)}
.ebook{font-size:56px;margin:10px 0 6px;display:block;filter:drop-shadow(0 0 14px var(--ec,#f2b21d)) drop-shadow(0 4px 2px rgba(0,0,0,.25))}
.pips{display:flex;gap:3px;justify-content:center;margin:4px 0 8px;flex-wrap:wrap}
.pips i{width:16px;height:16px;border-radius:4px;background:#cdb486;border:1px solid #9d7b46;font-size:8.5px;font-weight:900;
  color:#7a6238;display:flex;align-items:center;justify-content:center;font-style:normal}
.pips i.on{background:linear-gradient(180deg,#ffd45c,#d8930a);color:#5a3a00;border-color:#9c6700}
.ed{font-size:11.5px;font-weight:700;color:var(--muted);min-height:44px}
.ebon{margin:7px 0;padding:6px;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);font-size:12px;font-weight:900}
.ealtar{padding:16px;text-align:center;position:sticky;top:0}
.alt{font-size:62px;display:block;filter:drop-shadow(0 0 22px #ffd45c)}
.bonusbox{margin-top:10px;background:linear-gradient(180deg,#4a3119,#36230f);border:2px solid #6e5331;border-radius:10px;
  padding:10px 12px;color:#f1e2bd;text-align:left}
.bonusbox .bt{font-size:11px;font-weight:900;letter-spacing:1.2px;color:#ffd97a;margin-bottom:4px}
.bonusbox .br{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:800;padding:3px 0;border-bottom:1px dashed rgba(110,83,49,.5)}
.bonusbox .br:last-of-type{border:0}
.bonusbox .tot{margin-top:5px;padding-top:7px;border-top:2px solid #6e5331;display:flex;justify-content:space-between;font-weight:900;color:#ffd45c}

/* --- Престиж --- */
.pgrid{display:grid;grid-template-columns:316px 1fr 290px;gap:14px;align-items:start}
.phero{padding:16px;text-align:center;border-color:#c79a2e;box-shadow:0 0 0 3px #f6c94555, var(--sh)}
.ph-t{font-size:13px;font-weight:900;letter-spacing:.6px}
.starart{margin:12px auto;width:150px;height:130px;display:flex;align-items:center;justify-content:center;font-size:78px;position:relative;
  background:radial-gradient(circle,#ffe9ad 0%,#f2cf76 45%,transparent 72%);border-radius:50%}
.starart::before{content:'✨';position:absolute;left:6px;top:8px;font-size:22px}
.starart::after{content:'✨';position:absolute;right:4px;bottom:14px;font-size:18px}
.ph-get{margin:10px 0 2px;font-size:12px;font-weight:800;color:var(--muted)}
.ph-num{font-size:30px;font-weight:900;color:#a86e00}
.phero .warn{margin-top:9px;font-size:10.5px;font-weight:800;color:var(--red2)}
.formula{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:14px}
.fc{background:#fff;border:2px solid var(--line);border-radius:10px;padding:8px 14px;text-align:center;min-width:96px}
.fc b{display:block;font-size:15px}
.fc small{font-size:10px;font-weight:800;color:var(--muted)}
.fop{font-size:20px;font-weight:900;color:var(--muted)}
.pcells{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:11px}
.pcell{padding:13px 10px;text-align:center}
.pcell .pi{font-size:32px;filter:drop-shadow(0 2px 1px rgba(0,0,0,.2))}
.pcell .pe{font-size:17px;font-weight:900;color:var(--green2);margin-top:2px}
.pcell .pn{font-size:10.5px;font-weight:800;color:var(--muted);min-height:28px;margin-bottom:6px}
.maxtag{font-size:11px;font-weight:900;letter-spacing:1px;color:var(--gold3)}
.cgridx{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:11px}
.ccell{padding:11px 8px;text-align:center}
.ccell .ci2{font-size:34px}
.ccell .cn{font-size:11px;font-weight:900;min-height:26px;margin:4px 0 6px}
.ccell.eq{border-color:var(--gold2);box-shadow:0 0 0 3px #f6c94599,var(--sh)}
.ccell.mystery{background:linear-gradient(180deg,#5a4225,#42301a);border-color:#33250f;color:#cbb284}
.ccell.mystery .ci2{filter:grayscale(1) brightness(.5)}
.pside{display:flex;flex-direction:column;gap:12px;position:sticky;top:0}
.pshards{padding:14px;text-align:center}
.ps-num{font-size:28px;font-weight:900;color:#a86e00}
.pbadgewrap{padding:18px 14px;text-align:center;background:linear-gradient(180deg,#4a3119,#36230f);border-color:#6e5331;color:#f1e2bd}
.bigstar{font-size:84px;line-height:1;filter:drop-shadow(0 0 26px #f2b21d)}
.prank{margin:8px auto 10px;width:max-content;background:linear-gradient(180deg,#e3563f,#b22f24);border:2px solid #7e1f14;border-radius:8px;
  padding:6px 18px;font-weight:900;letter-spacing:1.6px;color:#fff;font-size:13px;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.pbonus{padding:14px;text-align:center}
.pb-num{font-size:26px;font-weight:900;color:var(--green2)}

/* --- Задания --- */
.qgrid{display:grid;grid-template-columns:352px 1fr;gap:14px;align-items:start}
.qdaily{padding-bottom:12px}
.qrow{display:flex;align-items:center;gap:10px;margin:9px 12px;padding:10px;background:linear-gradient(180deg,#fbf4e3,#efe2c4);
  border:2px solid var(--line);border-radius:10px}
.qrow .qi{font-size:26px;flex:none;filter:drop-shadow(0 2px 1px rgba(0,0,0,.2))}
.qmid{flex:1;min-width:0}
.qn{font-size:12px;font-weight:900;line-height:1.25}
.qrow .pbar{height:15px;margin-top:5px}
.qrew{flex:none;text-align:center;font-size:11px;font-weight:900;min-width:64px}
.qrew small{display:block;font-size:9px;letter-spacing:1px;color:var(--muted);margin-bottom:2px}
.qrow.done{border-color:#5f9b3a;box-shadow:0 0 0 2px #79c55455}
.qfoot{display:flex;align-items:center;gap:10px;justify-content:space-between;margin:6px 14px 4px;flex-wrap:wrap}
.qcnt{font-size:11.5px;font-weight:900;color:var(--muted)}
.qright{display:flex;flex-direction:column;gap:14px;min-width:0}
.logingrid{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;padding:6px 12px 14px}
.dcard{position:relative;text-align:center;padding:10px 4px 9px;background:linear-gradient(180deg,#fbf4e3,#eddcba);
  border:2px solid var(--line);border-radius:10px}
.dcard .dt{font-size:9.5px;font-weight:900;letter-spacing:.8px;color:var(--muted)}
.dcard .da{font-size:29px;margin:5px 0;filter:drop-shadow(0 2px 1px rgba(0,0,0,.2))}
.dcard .dv{font-size:10.5px;font-weight:900;min-height:15px}
.dcard.ok{background:linear-gradient(180deg,#cdebb6,#a9d88c);border-color:#5f9b3a}
.dcard.ok::after{content:'✔';position:absolute;left:0;right:0;top:34%;font-size:25px;font-weight:900;color:#2f7314;text-shadow:0 2px 0 rgba(255,255,255,.5)}
.dcard.today{border-color:var(--gold2);box-shadow:0 0 0 3px #f6c94599}
.dcard.dim{opacity:.62}
.dcard .btn3d{margin-top:4px}
.seasonp{padding-bottom:10px}
.sp-head{display:flex;align-items:center;gap:12px;padding:0 14px 8px;flex-wrap:wrap}
.sp-head .pbar{flex:1;min-width:170px;height:17px}
.strack{display:grid;grid-auto-flow:column;grid-auto-columns:108px;overflow-x:auto;padding:4px 12px 10px}
.scol2{display:grid;grid-template-rows:32px 96px 96px;border-right:2px dashed #cdb27f}
.scol2:last-child{border-right:0}
.shex{align-self:center;justify-self:center;width:36px;height:31px;display:flex;align-items:center;justify-content:center;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:#6b5436;color:#ffe9c4;font-size:12px;font-weight:900}
.scol2.reach .shex{background:linear-gradient(180deg,#f0b62a,#c07c0a);color:#4a3000}
.scell{margin:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;
  background:linear-gradient(180deg,#fbf4e3,#eddcba);border:2px solid var(--line);border-radius:10px;font-size:10.5px;font-weight:900;padding:4px}
.scell .sa{font-size:23px}
.scell.got{background:linear-gradient(180deg,#cdebb6,#a9d88c);border-color:#5f9b3a}
.scell.lockd{filter:grayscale(.8);opacity:.7}
.scell.prem{background:linear-gradient(180deg,#e8d6f8,#cdb0ec);border-color:#8a5cc0}
.rowtag{position:sticky;left:0;display:flex;align-items:center;gap:6px;padding:0 14px 6px;font-size:10px;font-weight:900;letter-spacing:1px}
.rowtag .free{background:#3f8fd1;color:#fff;border-radius:7px;padding:4px 10px}
.rowtag .prem{background:linear-gradient(180deg,#f0b62a,#c07c0a);color:#4a3000;border-radius:7px;padding:4px 10px}
/* Арт-иконки заданий и дней входа (PNG вместо эмодзи) */
.qi.has-art{width:34px;height:34px;background-size:contain;background-repeat:no-repeat;background-position:center;font-size:0;display:inline-block;filter:drop-shadow(0 2px 1px rgba(0,0,0,.2))}
.daimg{display:inline-block;line-height:1}
.daimg.has-art{width:38px;height:38px;background-size:contain;background-repeat:no-repeat;background-position:center;font-size:0}
/* Подсветка текущего тира сезона (как в референсе) */
.scol2.curlvl{background:rgba(246,201,69,.14);border-radius:10px}
.scol2.curlvl .shex{box-shadow:0 0 0 3px #f6c94599}

/* --- Лидеры --- */
.lgrid{display:grid;grid-template-columns:1fr 312px;gap:14px;align-items:start}
.lbtabs{display:flex;gap:8px}
.lbtab{padding:9px 18px;border-radius:10px;font-size:12px;font-weight:900;letter-spacing:.6px;
  background:linear-gradient(180deg,#e0cda2,#cdb486);border:2px solid var(--line);color:#6b5436}
.lbtab.on{background:linear-gradient(180deg,var(--paper),var(--paper2));color:var(--ink);box-shadow:0 0 0 2px #f6c94577;border-color:#c79a2e}
.lhead,.lrow{display:grid;grid-template-columns:60px minmax(150px,1.2fr) minmax(120px,1fr) 128px 104px 76px;gap:8px;align-items:center;padding:8px 14px}
.lhead{font-size:10px;font-weight:900;letter-spacing:1.2px;color:var(--muted);text-transform:uppercase;border-bottom:2px solid var(--line);margin:0 10px}
.lrow{margin:7px 10px;background:linear-gradient(180deg,#fbf4e3,#efe2c4);border:2px solid var(--line);border-radius:10px;font-size:13px;font-weight:800}
.lrow.me{background:linear-gradient(180deg,#ffe9ad,#f2cf76);border-color:#c79a2e;box-shadow:0 0 0 2px #f6c94577}
.lrank{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;background:#e0cda2;border:2px solid var(--line);color:#6b5436}
.lrank.m1{background:linear-gradient(180deg,#ffd45c,#d8930a);border-color:#9c6700;color:#5a3a00}
.lrank.m2{background:linear-gradient(180deg,#ececec,#b9b9b9);border-color:#8d8d8d;color:#4c4c4c}
.lrank.m3{background:linear-gradient(180deg,#e8a06a,#b06a34);border-color:#7e4a20;color:#fff}
.lpl{display:flex;align-items:center;gap:9px;min-width:0}
.lava{width:34px;height:34px;border-radius:8px;background:linear-gradient(180deg,#a3744a,#84582f);display:flex;align-items:center;justify-content:center;font-size:17px;flex:none;border:2px solid #64401f}
.lpl b{display:block;font-size:13px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lpl small{font-size:10px;font-weight:800;color:var(--muted)}
.on-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3fbf52;margin-left:4px;vertical-align:1px}
.lcl{display:flex;align-items:center;gap:7px;min-width:0;font-weight:800;font-size:12.5px}
.lcl span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lemb{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none;
  background:linear-gradient(180deg,#bb87ec,#7a3fb8);border:2px solid #5e2f97}
.troph{display:flex;align-items:center;gap:5px;font-weight:900}
.mv{font-weight:900;text-align:center}
.mvup{color:var(--green2)}.mvdn{color:var(--red2)}.mveq{color:var(--muted)}
.bestcol{display:flex;flex-direction:column;gap:12px;position:sticky;top:0}
.bestp{padding:0 0 12px;overflow:hidden;text-align:center}
.bp-band{padding:8px 14px;color:#fff;font-weight:900;letter-spacing:1.4px;font-size:12px;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.35);margin-bottom:10px}
.bestp.goldb .bp-band{background:linear-gradient(180deg,#c98a2e,#9c6313)}
.bestp.greenb .bp-band{background:linear-gradient(180deg,#5f9b3a,#3f7322)}
.bp-art{margin:2px auto 8px;width:128px;height:98px;display:flex;align-items:center;justify-content:center;font-size:54px;
  background:radial-gradient(circle,#ffe9ad,#e0c890 72%);border:2px solid var(--line);border-radius:12px}
.bp-rows{padding:0 14px}

/* --- Достижения --- */
.agrid{display:grid;grid-template-columns:236px 1fr 296px;gap:14px;align-items:start}
.catlist{padding:8px}
.cbtn{display:flex;align-items:center;gap:9px;width:100%;padding:11px 12px;margin:4px 0;border-radius:10px;font-size:12px;font-weight:900;
  background:linear-gradient(180deg,#fbf4e3,#eddcba);border:2px solid var(--line);color:var(--ink);text-align:left}
.cbtn small{margin-left:auto;font-size:11px;color:var(--muted);font-weight:900}
.cbtn.on{background:linear-gradient(180deg,#ffe9ad,#f2cf76);border-color:#c79a2e}
.aprog{display:flex;align-items:center;gap:16px;padding:12px 16px;flex-wrap:wrap}
.donut{width:96px;height:96px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p,0)*1%),#d9c79b 0);
  display:flex;align-items:center;justify-content:center;flex:none;border:3px solid var(--line)}
.donut i{width:62px;height:62px;border-radius:50%;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;font-style:normal}
.donut b{font-size:14px}
.donut small{font-size:10px;font-weight:900;color:var(--muted)}
.milerow{flex:1;display:flex;gap:8px;justify-content:space-around;min-width:240px;flex-wrap:wrap}
.acgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:11px;margin-top:12px}
.acard{padding:12px 11px;text-align:center}
.acard .an{font-size:11.5px;font-weight:900;letter-spacing:.4px;min-height:26px}
.acard .ad{font-size:10.5px;font-weight:700;color:var(--muted);min-height:28px;margin:3px 0 7px}
.acard .aa{font-size:33px;margin:2px 0 6px}
.acard .ast{margin-top:7px;font-size:10px;font-weight:900;letter-spacing:.6px;color:var(--muted)}
.acard.done{border-color:#5f9b3a}
.acard.done .ast{color:#fff;background:linear-gradient(180deg,#79c554,#3f8f25);border-radius:7px;padding:4px}
.acard.lockd{filter:grayscale(.7);opacity:.8}
.featp{position:sticky;top:0;text-align:center;padding-bottom:14px;overflow:hidden}
.fband{padding:9px;background:linear-gradient(180deg,#e3563f,#b22f24);color:#fff;font-weight:900;letter-spacing:1.6px;font-size:12px;margin-bottom:10px}
.featart{margin:8px auto;width:150px;height:122px;display:flex;align-items:center;justify-content:center;font-size:62px;
  background:radial-gradient(circle,#ffe9ad,#e8c97e 72%);border:2px solid #c79a2e;border-radius:14px}
.featcnt{font-size:21px;font-weight:900}
.gotband{margin:9px 14px;padding:7px;border-radius:8px;background:linear-gradient(180deg,#ffd45c,#d8930a);color:#5a3a00;font-weight:900;font-size:12px;letter-spacing:.8px}
.rewrow{display:flex;gap:12px;justify-content:center;margin:8px 0}
.rewit{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:900}
.rewit .ra{font-size:26px;line-height:1.1}
.featp .btn3d{margin:4px 14px 0;width:calc(100% - 28px)}

/* --- Обновления --- */
.usubs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.usub{padding:9px 18px;border-radius:10px;font-size:12px;font-weight:900;letter-spacing:.6px;position:relative;
  background:linear-gradient(180deg,#e0cda2,#cdb486);border:2px solid var(--line);color:#6b5436}
.usub.on{background:linear-gradient(180deg,var(--paper),var(--paper2));color:var(--ink);border-color:#c79a2e;box-shadow:0 0 0 2px #f6c94577}
.usub .nbad{position:absolute;top:-7px;right:-7px;background:var(--red);color:#fff;font-size:10px;font-weight:900;width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #7e1f14}
.ugrid{display:grid;grid-template-columns:296px 1fr 312px;gap:14px;align-items:start}
.vcol{display:flex;flex-direction:column;gap:0}
.vhero{display:block;width:100%;cursor:pointer;overflow:hidden;background:linear-gradient(160deg,#2c2a4a,#1b1a30);border:2px solid #11102a;
  border-radius:var(--r);box-shadow:var(--sh);color:#f1e6ff;padding:14px;text-align:left;position:relative}
.vhero small{font-size:10px;font-weight:900;letter-spacing:1.6px;color:#bca8f0}
.vh-v{font-size:26px;font-weight:900;color:#ffd45c}
.vh-t{font-size:13px;font-weight:900}
.vh-art{position:absolute;right:12px;top:12px;font-size:40px;filter:drop-shadow(0 0 10px #f2b21d)}
.vrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 12px;margin-top:9px;border-radius:10px;
  background:linear-gradient(180deg,#fbf4e3,#eddcba);border:2px solid var(--line);font-weight:900;font-size:12px;color:var(--ink)}
.vrow small{display:block;font-weight:800;color:var(--muted);font-size:10px}
.vrow .va{margin-left:auto;font-size:22px}
.vrow.on{background:linear-gradient(180deg,#ffe9ad,#f2cf76);border-color:#c79a2e}
.actl{display:inline-block;background:#5f9b3a;color:#fff;font-size:9px;font-weight:900;padding:2px 7px;border-radius:6px;letter-spacing:1px;margin-right:6px;vertical-align:2px}
.upd-detail{padding:14px 16px}
.tagchip{display:inline-block;background:linear-gradient(180deg,#bb87ec,#7a3fb8);color:#fff;font-size:10px;font-weight:900;letter-spacing:1px;
  padding:4px 11px;border-radius:7px;margin:6px 0}
.heroart{margin:10px 0;height:114px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:50px;gap:14px;
  background:linear-gradient(135deg,#7c5530,#46291a);border:2px solid #2f1d0e;box-shadow:inset 0 0 40px rgba(0,0,0,.45)}
.fxrow{display:flex;gap:11px;align-items:flex-start;margin:11px 0}
.fxhex{width:44px;height:48px;flex:none;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.fxrow b{display:block;font-size:13px}
.fxrow p{font-size:11.5px;font-weight:700;color:var(--muted)}
.ulist{margin:6px 0 0 18px;font-size:12.5px;font-weight:700}
.ulist li{margin:5px 0}
.roadp{position:sticky;top:0;padding-bottom:12px}
.rrow{display:flex;align-items:center;gap:11px;margin:9px 12px;padding:9px 11px;background:linear-gradient(180deg,#fbf4e3,#eddcba);
  border:2px solid var(--line);border-radius:10px}
.rrow .ra2{font-size:27px;flex:none}
.rrow b{display:block;font-size:12.5px}
.rrow small{font-size:10.5px;font-weight:800;color:var(--muted)}
.rrow .arr{margin-left:auto;color:var(--muted);font-weight:900;font-size:16px}
.promo{margin:12px;padding:12px;border-radius:12px;background:linear-gradient(135deg,#3a2456,#241638);border:2px solid #16102a;color:#e9dcff;text-align:center;font-size:12px;font-weight:700}
.promo b{color:#ffd45c;display:block;font-size:13px;margin-bottom:3px}
.newsrow{padding:12px 14px;margin-top:10px}
.newsrow small{font-size:10px;font-weight:900;color:var(--muted);letter-spacing:1px}
.newsrow b{display:block;font-size:14px;margin:2px 0 4px}
.newsrow p{font-size:12.5px;font-weight:700;color:#6b5436}
/* ---------- 9. Нижний таб-бар ---------- */
nav.tabbar{flex:none;display:grid;grid-template-columns:repeat(9,1fr);gap:10px;padding:10px 14px 12px;z-index:30;
  background:linear-gradient(180deg,#f3e8d2,#e7d7b4);border-top:3px solid var(--line);box-shadow:0 -4px 12px rgba(60,38,12,.18)}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 4px;border-radius:12px;
  font-size:11.5px;font-weight:900;letter-spacing:.6px;color:#5a4226;
  background:linear-gradient(180deg,#f6ecd7,#e9dabb);border:2px solid var(--line);
  box-shadow:0 3px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.75);transition:transform .07s}
.tab:active{transform:translateY(2px)}
.tab .ticon{font-size:22px;line-height:1;filter:drop-shadow(0 2px 1px rgba(0,0,0,.2))}
.tab.active{background:linear-gradient(180deg,#fff7e2,#f3e3bd);border-color:#e9a826;box-shadow:0 0 0 2px #f6c945aa, 0 3px 0 rgba(0,0,0,.18)}
.alertdot{position:absolute;top:-6px;right:10px;width:19px;height:19px;border-radius:50%;background:var(--red);border:2px solid #7e1f14;
  color:#fff;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;font-style:normal}
.newchip{position:absolute;top:-9px;right:6px;background:linear-gradient(180deg,#79c554,#3f8f25);border:2px solid #2f7314;color:#fff;
  font-size:8.5px;font-weight:900;letter-spacing:1px;padding:2px 7px;border-radius:7px}

/* ---------- 10. Страница кланов ---------- */
.cpage{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 26px}
.ctopbar{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-bottom:14px}
.ctab{padding:10px 6px;border-radius:10px;font-size:11.5px;font-weight:900;letter-spacing:.3px;display:flex;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(180deg,#f6ecd7,#e9dabb);border:2px solid var(--line);color:#5a4226;
  box-shadow:0 3px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.75)}
.ctab.on{background:linear-gradient(180deg,#fff7e2,#f3e3bd);border-color:#e9a826;box-shadow:0 0 0 2px #f6c945aa, 0 3px 0 rgba(0,0,0,.18)}
.cgrid{display:grid;grid-template-columns:286px 1fr 318px;gap:14px;align-items:start}
.clistp{padding-bottom:12px}
.clan-card{display:flex;align-items:center;gap:9px;text-align:left;padding:9px 10px;margin:7px 10px;width:calc(100% - 20px);
  background:linear-gradient(180deg,#fbf4e3,#efe2c4);border:2px solid var(--line);border-radius:10px}
.clan-card.active{background:linear-gradient(180deg,#ffe9ad,#f2cf76);border-color:#c79a2e;box-shadow:0 0 0 2px #f6c94577}
.crk{width:22px;flex:none;text-align:center;font-weight:900;font-size:13px;color:#6b5436}
.cemb{width:38px;height:38px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:20px;
  background:linear-gradient(180deg,#bb87ec,#7a3fb8);border:2px solid #5e2f97;box-shadow:inset 0 2px 0 rgba(255,255,255,.3)}
.cc-b{flex:1;min-width:0}
.cc-n{font-size:12.5px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-m{font-size:10px;font-weight:800;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clistp .btn3d{margin:8px 10px 0;width:calc(100% - 20px)}
.cmain{display:flex;flex-direction:column;gap:14px;min-width:0}
.cbanner{display:flex;gap:16px;padding:14px 16px;flex-wrap:wrap;align-items:flex-start}
.flag{width:116px;height:136px;flex:none;position:relative;display:flex;align-items:center;justify-content:center;font-size:50px;
  background:linear-gradient(180deg,#8a4fd0,#5e2f97);border:3px solid #3e1d68;
  clip-path:polygon(0 0,100% 0,100% 84%,50% 100%,0 84%);
  box-shadow:inset 0 4px 0 rgba(255,255,255,.18);margin-top:8px}
.flag::before{content:'';position:absolute;left:0;right:0;top:0;height:10px;background:#6a4525;border-bottom:2px solid #3e2814}
.cb-body{flex:1;min-width:230px}
.cb-name{font-size:21px;font-weight:900;letter-spacing:.5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cb-motto{font-size:12px;font-weight:700;color:var(--muted);margin:3px 0 8px;font-style:italic}
.cb-name .btn3d{margin-left:auto}
.sg{display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));gap:8px;margin-top:8px}
.sg>div{background:#fff;border:2px solid var(--line);border-radius:9px;padding:7px 9px}
.sg small{display:block;font-size:9.5px;font-weight:900;letter-spacing:.6px;color:var(--muted);text-transform:uppercase}
.sg b{font-size:13px}
.member-row{display:flex;align-items:center;gap:9px;padding:8px 12px;margin:6px 10px;background:linear-gradient(180deg,#fbf4e3,#efe2c4);
  border:2px solid var(--line);border-radius:10px;font-size:12.5px;font-weight:800}
.member-role{font-size:9px;font-weight:900;letter-spacing:.8px;color:#fff;padding:3px 8px;border-radius:6px;background:#8c7350;flex:none}
.member-role.leader{background:linear-gradient(180deg,#f0b62a,#c07c0a);color:#4a3000}
.member-role.officer{background:#3f8fd1}
.cgrid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:14px}
.raidp{padding:12px 14px}
.raidboss{display:flex;gap:12px;align-items:center;margin-bottom:6px}
.rb-art{width:72px;height:72px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:38px;
  background:radial-gradient(circle,#f6d2c5,#d98a6a);border:3px solid #b1502f}
.rtimer{color:var(--red2);font-weight:900;font-variant-numeric:tabular-nums}
.taskr{margin:10px 2px}
.tl{display:flex;justify-content:space-between;gap:8px;font-size:11px;font-weight:900;margin-bottom:4px}
.eventr{display:flex;gap:9px;padding:8px 12px;margin:6px 10px;font-size:12px;font-weight:700;
  background:linear-gradient(180deg,#fbf4e3,#efe2c4);border:2px solid var(--line);border-radius:10px}
.eventr small{flex:none;color:var(--muted);font-weight:900;font-size:10px;padding-top:2px;width:66px}
.cside{display:flex;flex-direction:column;gap:12px}
.bankp{padding:12px 14px;text-align:center}
.bankart{font-size:40px;line-height:1.1;filter:drop-shadow(0 0 14px #a86ae0)}
.bank-num{font-size:24px;font-weight:900;color:#5e2f97}
.bankp .rowbtns{display:flex;gap:8px;justify-content:center;margin-top:10px}
.uprow{display:flex;align-items:center;gap:9px;padding:8px 12px;margin:6px 10px;background:linear-gradient(180deg,#fbf4e3,#efe2c4);
  border:2px solid var(--line);border-radius:10px;font-size:11.5px;font-weight:800}
.uprow .ua{font-size:21px;flex:none}
.uprow .ub{flex:1;min-width:0}
.uprow small{display:block;color:var(--muted);font-weight:800;font-size:10px}
.uprow .upv{font-weight:900;color:var(--green2);flex:none}
.plusb{width:27px;height:27px;border-radius:7px;background:linear-gradient(180deg,#79c554,#3f8f25);color:#fff;font-weight:900;font-size:15px;
  flex:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.plusb:disabled{filter:grayscale(.8);opacity:.7}
.approw{display:flex;align-items:center;gap:8px;padding:7px 12px;margin:6px 10px;background:linear-gradient(180deg,#fbf4e3,#efe2c4);
  border:2px solid var(--line);border-radius:10px;font-size:12px;font-weight:900}
.approw small{color:var(--muted);font-weight:800;margin-left:auto;flex:none}
.icobtn{width:27px;height:27px;border-radius:7px;color:#fff;font-weight:900;font-size:13px;flex:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.icobtn.ok{background:linear-gradient(180deg,#79c554,#3f8f25)}
.icobtn.no{background:linear-gradient(180deg,#ef7064,#b22f24)}
.chat-box{height:168px;overflow-y:auto;margin:4px 10px;padding:8px;background:#fff;border:2px solid var(--line);border-radius:10px}
.chat-msg{font-size:12px;font-weight:700;margin:4px 0;line-height:1.35;word-break:break-word}
.chat-msg .who{font-weight:900;color:#7a3fb8}
.chat-msg.me .who{color:var(--green2)}
.chat-input-row{display:flex;gap:7px;margin:6px 10px 12px}
.chat-input-row input{flex:1;min-width:0;background:#fff;border:2px solid var(--line);border-radius:9px;padding:9px 11px;font-weight:700}
.seasrow{display:flex;align-items:center;gap:9px;padding:8px 12px;margin:7px 10px;
  background:linear-gradient(180deg,#fbf4e3,#efe2c4);border:2px solid var(--line);border-radius:10px;font-weight:900;font-size:12.5px}
.seasrow.me{background:linear-gradient(180deg,#ffe9ad,#f2cf76);border-color:#c79a2e}
.showall{display:block;margin:6px auto 10px;font-size:11px;font-weight:900;color:#7a5a17;text-decoration:underline}

/* ---------- 11. Модалки / шторка / тосты ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(30,18,6,.62);display:flex;align-items:center;justify-content:center;padding:18px;z-index:100;animation:fadeIn .18s}
@keyframes fadeIn{from{opacity:0}}
.modal{width:min(484px,100%);max-height:88vh;overflow-y:auto;background:linear-gradient(180deg,var(--paper),var(--paper2));
  border:3px solid var(--line2);border-radius:var(--r2);box-shadow:0 14px 40px rgba(0,0,0,.45), var(--insh);padding:18px 20px;animation:popIn .2s}
@keyframes popIn{from{transform:scale(.92);opacity:0}}
.modal.gold{border-color:#c79a2e;box-shadow:0 0 0 3px #f6c94555, 0 14px 40px rgba(0,0,0,.45)}
.modal.purple{border-color:#7a3fb8;box-shadow:0 0 0 3px #bb87ec55, 0 14px 40px rgba(0,0,0,.45)}
.modal-title{font-size:16px;font-weight:900;letter-spacing:1px;text-align:center;margin-bottom:10px}
.modal-body{font-size:13.5px;font-weight:700;line-height:1.5}
.modal-body p{margin:7px 0}
.modal-body ul{margin:7px 0 7px 20px}
.modal-body li{margin:5px 0}
.modal-body input[type=text],.modal-body textarea{width:100%;background:#fff;border:2px solid var(--line);border-radius:9px;padding:10px 12px;font-weight:700;margin-top:4px}
.modal-body textarea{min-height:96px;resize:vertical;font-size:11px;word-break:break-all}
.modal-actions{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.modal-actions .btn3d{min-width:110px}
.offline-gain{margin:12px auto;width:max-content;max-width:100%;font-size:24px;font-weight:900;color:#3f7322;
  background:linear-gradient(180deg,#cdebb6,#a9d88c);border:2px solid #5f9b3a;border-radius:12px;padding:10px 26px;display:flex;align-items:center;gap:10px}
.emoji-pick{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px}
.emoji-pick button{width:42px;height:42px;font-size:21px;border-radius:9px;background:#fff;border:2px solid var(--line)}
.emoji-pick button.sel{border-color:#c79a2e;box-shadow:0 0 0 2px #f6c94599}
.biorow{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:6px 0;background:#fff;border:2px solid var(--line);border-radius:10px;font-weight:800;font-size:12.5px}
.biorow .bi{font-size:21px;width:28px;text-align:center;flex:none}
.biorow small{margin-left:auto;color:var(--muted);font-weight:900;flex:none}
.biorow.lockd{filter:grayscale(.8);opacity:.7}
.statmrow{display:flex;justify-content:space-between;gap:8px;padding:7px 2px;border-bottom:1px dashed #cdb27f;font-size:13px;font-weight:700}
.statmrow b{font-weight:900}

.drawer-backdrop{position:fixed;inset:0;background:rgba(30,18,6,.5);z-index:60}
.drawer{position:fixed;top:0;right:-336px;width:326px;max-width:92vw;height:100%;z-index:61;
  background:linear-gradient(180deg,var(--paper),var(--paper2));border-left:3px solid var(--line);
  box-shadow:-10px 0 30px rgba(0,0,0,.3);transition:right .25s;padding:16px;overflow-y:auto}
.drawer.open{right:0}
.drawer h3{font-size:15px;font-weight:900;letter-spacing:1px;margin-bottom:12px;display:flex;align-items:center}
.drawer h3 button{margin-left:auto;font-size:19px;width:34px;height:34px;border-radius:9px;background:linear-gradient(180deg,#fbf4e3,#eddcba);border:2px solid var(--line)}
.drow{display:flex;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px dashed #cdb27f;font-size:13px;font-weight:800}
.switch{width:50px;height:27px;border-radius:99px;background:#cdb486;border:2px solid #9d7b46;position:relative;transition:.18s;flex:none;margin-left:auto;cursor:pointer}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:.18s}
.switch[aria-checked="true"]{background:linear-gradient(180deg,#79c554,#3f8f25);border-color:#2f7314}
.switch[aria-checked="true"]::after{left:25px}
.drawer .btn3d{width:100%;margin-top:10px}
.dnote{margin-top:14px;font-size:11px;font-weight:700;color:var(--muted);text-align:center}

#toastRoot{position:fixed;left:50%;bottom:106px;transform:translateX(-50%);z-index:120;pointer-events:none}
.toast{background:linear-gradient(180deg,#4a3119,#36230f);color:#ffe9c4;border:2px solid #6e5331;border-radius:11px;
  padding:11px 20px;font-size:13px;font-weight:900;box-shadow:0 6px 20px rgba(0,0,0,.4);opacity:0;transform:translateY(14px);
  transition:.25s;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1;transform:translateY(0)}

/* ---------- 12. Адаптив ---------- */
@media (max-width:1320px){
  .scene{grid-template-columns:204px 1fr 262px}
  .hud-stats{grid-template-columns:repeat(4,minmax(102px,1fr))}
  .logo{font-size:19px;padding:13px 14px 11px}
  .pgrid{grid-template-columns:284px 1fr 262px}
  .agrid{grid-template-columns:212px 1fr 268px}
  .ugrid{grid-template-columns:266px 1fr 284px}
  .cgrid{grid-template-columns:256px 1fr 292px}
}
@media (max-width:1140px){
  .hexchip{left:206px}
  .hc-num{font-size:26px}
  .hud-center{min-width:208px;padding:8px 14px}
  .pgrid,.agrid,.ugrid{grid-template-columns:1fr 1fr}
  .pgrid>.pp:nth-child(2),.agrid>div:nth-child(2),.ugrid>div:nth-child(2){grid-column:1/-1;grid-row:1}
  .pside,.roadp,.featp,.wdetail,.sidecol,.ealtar,.bestcol{position:static}
  .wlayout,.klayout,.elayout,.lgrid,.qgrid{grid-template-columns:1fr}
  .cgrid{grid-template-columns:236px 1fr}
  .cside{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:12px;align-items:start}
  .scene{grid-template-columns:188px 1fr;padding-right:12px}
  .scol.right{position:absolute;right:10px;top:8px;width:236px;z-index:5;gap:8px}
  .statsp #statsPanel{padding-bottom:2px}
  .statsp .srow{padding:5px 0;font-size:11.5px}
}
@media (max-width:960px){
  body{overflow:auto}
  #view{min-height:620px}
  header.hud{flex-wrap:wrap;gap:10px}
  .logo{order:0;font-size:16px}
  .gear{order:1;margin-left:auto}
  .hud-center{order:2;flex:1;min-width:200px}
  .hud-stats{order:3;width:100%;grid-template-columns:repeat(4,1fr)}
  .chip small{font-size:9px}
  .chip b{font-size:12px}
  .scene{grid-template-columns:1fr;padding:12px 12px 178px;overflow-y:auto}
  .plaque{padding:7px 16px 8px}
  .plaque b{font-size:13px}
  .stage{order:-1;padding-top:40px}
  .cube-stage{height:188px;margin-top:12px}
  .block-cube{--cs:142px}
  .scol.left{flex-direction:row;align-items:stretch}
  .hexchip{position:static;width:100%;margin-bottom:2px}
  .hexchip{flex:1}
  .dp{flex:1}
  .railwrap{display:none}
  .dp-now{font-size:18px;padding-bottom:2px}
  .scol.right{position:static;width:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .statsp{grid-column:1/-1}
  nav.tabbar{grid-template-columns:repeat(4,1fr)}
  .ctopbar{grid-template-columns:repeat(4,1fr)}
  .cgrid{grid-template-columns:1fr}
  .logingrid{grid-template-columns:repeat(4,1fr)}
  .lhead{display:none}
  .lrow{grid-template-columns:46px 1fr 96px 72px;font-size:12px}
  .lrow .lcl,.lrow .mv{display:none}
  .sg{grid-template-columns:1fr 1fr}
  .formula .fop{display:none}
}
@media (max-width:600px){
  .bname{font-size:22px;letter-spacing:1.5px}
  .block-cube{--cs:124px}
  .tab{font-size:9.5px;padding:8px 2px}
  .tab .ticon{font-size:19px}
  .ctab{font-size:9.5px}
  .hc-num{font-size:22px}
  .hud-stats{grid-template-columns:repeat(2,1fr)}
  .dock{width:96%}
  .fc{min-width:74px;padding:7px 9px}
  .logingrid{gap:6px}
  .dcard .da{font-size:23px}
  .scol.right{grid-template-columns:1fr}
  .cb-name{font-size:17px}
  .modal{padding:14px}
}
@media (max-height:760px){
  .stage{padding-top:34px}
  .bname{font-size:26px;margin:0 0 6px}
  .cube-stage{height:196px;margin-top:12px}
  .block-cube{--cs:142px}
  .hpwrap{height:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* фикс: эмодзи-заглушка во вкладках скрывается, когда загружен арт */
.tab .ticon.has-art{font-size:0;width:32px;height:32px;background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 2px 1px rgba(0,0,0,.2))}

/* арт оружия */
.wpic.has-art{display:block;height:62px;font-size:0;background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}
.wd-pic.has-art{height:112px;font-size:0;background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 5px 3px rgba(0,0,0,.3))}

/* панель выбранного рабочего */
.kcard{cursor:pointer;transition:transform .08s}
.kcard:hover{transform:translateY(-2px)}
.kcard.sel{border-color:var(--blue2);box-shadow:0 0 0 3px #7fc0ef88,var(--sh)}
.kdetail{padding:14px}
.kd-pic{font-size:82px;text-align:center;margin:10px 0;filter:drop-shadow(0 5px 3px rgba(0,0,0,.3))}
.kd-pic.has-art{height:134px;font-size:0;background-size:contain;background-repeat:no-repeat;background-position:center}
.kdetail .btn3d{margin-top:12px}

/* верхняя вывеска биома (как на скрине) */
.plaque{position:absolute;left:50%;top:8px;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;cursor:pointer;border:0;background:none;font-family:inherit;padding:0}
.plaque b{display:block;background:linear-gradient(180deg,#9a6b3c,#7c5026);border:3px solid #5d3a18;border-radius:10px;padding:8px 28px;font-size:17px;letter-spacing:2px;color:#ffe9c4;font-weight:900;text-shadow:0 2px 0 rgba(0,0,0,.35);box-shadow:0 4px 0 #4a2d11,var(--sh)}
.plaque small{margin-top:-2px;background:#3f2a14;color:#f3dca8;border:2px solid #5d3a18;border-top:0;border-radius:0 0 9px 9px;padding:4px 16px;font-size:11px;font-weight:800;letter-spacing:1.4px}
.plaque:hover b{filter:brightness(1.07)}
.plaque.has-art{background-size:100% 100%;background-repeat:no-repeat;padding:6px 18px 10px}
.plaque.has-art b{background:none;border:0;box-shadow:none}
.hx-arr{margin-left:auto;font-size:20px;font-weight:900;color:var(--ink-soft)}
/* цель уровня: сундук, награда, тонкий HP-бар */
.gp-ico.chest{clip-path:none;background:linear-gradient(180deg,var(--paper),var(--paper2));border-radius:12px;border:2px solid var(--line);box-shadow:var(--insh)}
.gp-ico.chest.has-art{font-size:0;background-size:contain;background-repeat:no-repeat;background-position:center;border:0;box-shadow:none}
.gp-reward{margin-left:auto;display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:900;font-size:15px;background:linear-gradient(180deg,var(--paper),var(--paper2));border:2px solid var(--line);border-radius:10px;padding:7px 12px;box-shadow:var(--insh)}
.pbar.slim{height:12px;margin-top:6px}
.pbar.slim .pb-txt{font-size:9px}
@media (max-width:960px){ .plaque{top:4px} .plaque b{font-size:14px;padding:6px 18px} }

/* шапка по макету: логотип крупнее, чипы статов кучнее и прижаты вправо */
.logo{font-size:29px}
.logo.has-art{min-width:336px;min-height:90px;background-position:left center}
.hud-stats{flex:0 1 auto;margin-left:auto;gap:6px;grid-template-columns:repeat(4,minmax(104px,max-content))}
.hud-stats .chip{padding:6px 10px;gap:7px}
.hud-stats .chip small{font-size:9.5px}
.hud-stats .chip b{font-size:13.5px}
@media (max-width:1366px){ .logo.has-art{min-width:280px;min-height:76px} }
@media (max-width:1140px){
  .logo.has-art{min-width:236px;min-height:64px}
  .hud-stats{grid-template-columns:repeat(4,minmax(94px,max-content))}
}
@media (max-width:960px){
  .hud-stats{margin-left:0;width:100%;grid-template-columns:repeat(4,1fr)}
  .logo.has-art{min-width:212px;min-height:58px}
}
@media (max-width:600px){ .hud-stats{grid-template-columns:repeat(2,1fr)} .logo.has-art{min-width:190px;min-height:52px} }

/* арт-текстура шкалы глубины */
.rail.has-art{background-size:100% 100%;background-repeat:no-repeat}

/* арт-текстура шкалы глубины: тянется по ширине, тайлится по вертикали */
.rail.has-art{background-size:100% auto;background-repeat:repeat-y;background-position:top center}

/* при арт-текстуре шкалы убираем рисованные насечки поверх */
.rail.has-art::after{display:none}

/* появление нового блока после разлома */

/* арт книг чар */
.ebook.has-art{font-size:0;display:block;width:96px;height:96px;margin:4px auto;background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 4px 3px rgba(0,0,0,.3))}

/* раздел ЧАРЫ — тёмная пещера как на макете */
#sections[data-sec="enchants"]{background:linear-gradient(180deg,#2c2014,#241a10 55%,#1d150c),
  repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 26px,transparent 26px 52px);
  border-radius:14px;padding:14px 16px 18px;box-shadow:inset 0 0 60px rgba(0,0,0,.5)}
#sections[data-sec="enchants"] .st{color:#ffd45c;text-shadow:0 2px 0 rgba(0,0,0,.5)}
#sections[data-sec="enchants"] .ss{color:#e8d7ae}
.pips i{width:19px;height:19px;border-radius:5px;font-size:9.5px}
.pips i.on{box-shadow:0 1px 0 #7a4d00, inset 0 1px 0 #ffe9a8}
.alt.has-art{display:block;width:100%;height:190px;font-size:0;background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:drop-shadow(0 0 26px rgba(255,212,92,.55)) drop-shadow(0 6px 4px rgba(0,0,0,.4))}
#sections[data-sec="enchants"] .ealtar{background:transparent;border-color:transparent;box-shadow:none}

/* арт-фишки уровней и инлайн-иконки */
.pips i.art{background-color:transparent;border:0;box-shadow:none;background-size:100% 100%;background-repeat:no-repeat;color:#6e655a;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.pips i.on.art{color:#5a3a00;text-shadow:0 1px 0 #ffe9a8}
.eico{display:inline-block;width:17px;height:17px;vertical-align:-3px;background-size:contain;background-repeat:no-repeat;background-position:center}
.cur.has-art{background:transparent;border:0;box-shadow:none;border-radius:0;background-size:contain;background-position:center;background-repeat:no-repeat}

/* 9-slice рамки из assets/ui/frame-*.png */
body.frame-paper .pp{border:13px solid transparent;border-image:var(--frame-paper) 100 fill / 15px stretch;
  background:transparent;border-radius:0;box-shadow:0 4px 10px rgba(60,40,15,.22)}
body.frame-dark .bonusbox{border:13px solid transparent;border-image:var(--frame-dark) 100 fill / 15px stretch;
  background:transparent;border-radius:0}

/* пипсы прокачки чар — строго в одну строку */
.pips{flex-wrap:nowrap}
.pips i{flex:none}

/* страница персонажа */
.prof-layout{display:grid;grid-template-columns:320px 1fr;gap:14px;align-items:start}
.profcard{padding:16px;text-align:center}
.avbox{font-size:84px;height:150px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#e7d6ae,#d9c393);border:2px solid var(--line);border-radius:14px;margin-bottom:10px}
.avbox.has-art{font-size:0;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#e7d6ae}
.prof-name{font-size:19px;font-weight:900;letter-spacing:.5px}
.prof-name .btn3d{padding:2px 8px;margin-left:4px}
.prof-sub{font-size:12px;font-weight:800;color:var(--muted);margin:4px 0 8px}
.prof-title{font-size:13px;font-weight:900;color:#a8741d;margin-bottom:10px}
.prof-ach{border-top:1px dashed var(--line);padding-top:10px}
.pa-t{font-size:11px;font-weight:900;letter-spacing:1px;margin-bottom:6px}
.prof-ach .btn3d{margin-top:8px}
.profstats{padding:14px 16px}
.ps-t{font-size:12px;font-weight:900;letter-spacing:1.2px;margin-bottom:6px}
.prof-btns{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:760px){ .prof-layout{grid-template-columns:1fr} }

/* ===== страница героя по макету ===== */
#sections[data-sec="profile"]{background:linear-gradient(180deg,#8ec9ec,#b9dd9a 58%,#8db168);border-radius:14px;padding:12px 16px 16px}
#sections[data-sec="profile"] .st{color:#ffd45c;text-shadow:0 2px 0 rgba(0,0,0,.45)}
#sections[data-sec="profile"] .ss{color:#fff8e6}
.hero-layout{display:grid;grid-template-columns:300px 1fr 320px;gap:14px;align-items:start}
.prof-top{display:flex;gap:10px;align-items:center;text-align:left;margin-bottom:8px}
.avbox.sm{width:74px;height:74px;font-size:44px;margin:0;flex:none}
.hl-t{font-size:12px;font-weight:900;letter-spacing:1px;margin:6px 0 4px;text-align:left}
.pbar.blue i{background:linear-gradient(180deg,#6db5f2,#2f7fd1)}
.hstat{margin:5px 0}
.mbar{height:7px;border-radius:5px;background:#cdb486;border:1px solid #9d7b46;overflow:hidden}
.mbar i{display:block;height:100%;background:linear-gradient(180deg,#86d06a,#4d9b3a)}
.profcard .btn3d.wide{margin-top:10px}
.hero-center{display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-mid{display:grid;grid-template-columns:108px 1fr;gap:10px;align-items:center;width:100%}
.hchips{display:flex;flex-direction:column;gap:10px}
.hchip{background:linear-gradient(180deg,var(--paper),var(--paper2));border:2px solid #c79a2e;border-radius:12px;
  padding:8px 6px;text-align:center;font-size:18px;box-shadow:0 0 0 3px #f6c94544,var(--sh)}
.hchip b{display:block;font-size:15px;color:#a8741d}
.hchip small{font-size:9px;font-weight:900;letter-spacing:1px;color:var(--muted)}
.hero-stage{position:relative;display:flex;flex-direction:column;align-items:center}
.hero-big{font-size:150px;line-height:1;filter:drop-shadow(0 10px 8px rgba(0,0,0,.35))}
.hero-big.has-art{width:min(300px,100%);height:280px;font-size:0;background-size:contain;background-repeat:no-repeat;background-position:center bottom}
.pedestal{width:190px;height:34px;margin-top:-8px;border-radius:8px;
  background:linear-gradient(180deg,#9a958d,#6f6a64);border:2px solid #4c463f;box-shadow:0 8px 14px rgba(0,0,0,.3)}
.hero-center .btn3d.big{font-size:15px;padding:12px 26px}
.hint{font-size:11px;font-weight:800;color:#fff8e6;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.skinsbar{width:100%;padding:10px 12px}
.skroll{display:flex;gap:10px;overflow-x:auto;padding:6px 2px}
.skcard{position:relative;flex:0 0 108px;background:linear-gradient(180deg,var(--paper),var(--paper2));
  border:2px solid var(--line);border-radius:12px;padding:8px 6px;text-align:center;cursor:pointer}
.skcard.worn{border-color:#3fbf52;box-shadow:0 0 0 3px #7fe09277}
.skcard.locked{opacity:.85}
.skpic{font-size:44px;height:54px;display:flex;align-items:center;justify-content:center}
.skpic.has-art{font-size:0;background-size:contain;background-repeat:no-repeat;background-position:center}
.skname{font-size:10.5px;font-weight:900;min-height:26px}
.sktag{display:inline-block;font-size:9.5px;font-weight:900;letter-spacing:.5px;border-radius:7px;padding:2px 7px;
  background:#e3d2a8;border:1px solid var(--line)}
.sktag.worn{background:#3fbf52;color:#fff;border-color:#2c8a3a}
.sktag.buy{background:#cfe8cf;border-color:#3fbf52}
.skcard .rb{position:absolute;left:50%;transform:translateX(-50%);bottom:-9px;font-size:8px}
.sklock{position:absolute;top:4px;right:6px;font-size:13px}
.hero-side{display:flex;flex-direction:column;gap:12px}
.eqpanel{padding:12px}
.eqgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.eqcell{background:linear-gradient(180deg,var(--paper),var(--paper2));border:2px solid var(--line);border-radius:10px;
  padding:7px 4px;text-align:center;cursor:pointer;transition:transform .08s}
.eqcell:hover{transform:translateY(-2px)}
.eqcell.locked{opacity:.6;cursor:default}
.eqn{font-size:8.5px;font-weight:900;letter-spacing:.5px;color:var(--muted)}
.eqpic{font-size:27px;margin:3px 0}
.eqpic.has-art{height:34px;font-size:0;background-size:contain;background-repeat:no-repeat;background-position:center}
.eql{font-size:10px;font-weight:900}
.eqc{font-size:9.5px;font-weight:800;color:#7c5c22}
.bonpanel{padding:12px}
.bonpanel .btn3d{margin-top:8px}
@media (max-width:1200px){ .hero-layout{grid-template-columns:260px 1fr 280px} }
@media (max-width:980px){ .hero-layout{grid-template-columns:1fr 1fr} .hero-center{grid-column:1/-1;order:-1} }
@media (max-width:640px){ .hero-layout{grid-template-columns:1fr} .hero-big{font-size:110px} .hero-big.has-art{height:210px} }

/* герой: доска-заголовок по центру, стрелки скинов */
#sections[data-sec="profile"] .sec-head{justify-content:center;background:linear-gradient(180deg,#7a5a33,#5d4426);
  border:3px solid #3c2a16;border-radius:12px;padding:8px 26px;width:max-content;max-width:92%;margin:0 auto 12px;
  box-shadow:0 6px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18)}
.skwrap{display:flex;align-items:center;gap:6px}
.skarr{flex:none;font-size:18px;padding:4px 10px}

/* фиксы по живому скриншоту */
.fever-banner[hidden]{display:none!important}
.tabbar{flex-wrap:nowrap}
.tab{flex:1 1 0;min-width:0}
.tab span:last-of-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* нижнее меню: компактные кнопки, один ряд на десктопе */
nav.tabbar{gap:6px;padding:8px 10px 10px}
.tab{padding:7px 2px;gap:3px;border-radius:10px}
.tab .ticon{font-size:19px}
.tab .ticon.has-art{width:26px;height:26px}
.tab span:last-of-type{font-size:9.5px;letter-spacing:.4px;max-width:100%}
.tab .newchip{font-size:7.5px;padding:2px 5px;top:3px;right:3px}
@media (max-width:855px){ nav.tabbar{grid-template-columns:repeat(5,1fr)} }
@media (max-width:540px){ nav.tabbar{grid-template-columns:repeat(3,1fr)} }

/* лента скинов: 9 без скролла + предпросмотр */
.skgrid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;flex:1;min-width:0}
.skgrid .skcard{flex:none;min-width:0;padding:7px 4px}
.skgrid .skname{font-size:9.5px;min-height:24px;overflow:hidden}
.skcard.previewing{border-color:var(--blue2);box-shadow:0 0 0 3px #7fc0ef88}
.prevtag{position:absolute;top:-4px;left:50%;transform:translateX(-50%);z-index:3;font-size:9px;font-weight:900;letter-spacing:1px;
  background:#3a76b5;color:#fff;border:2px solid #275a8e;border-radius:8px;padding:3px 10px;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.hero-stage{position:relative}
.prevbar{display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,var(--paper),var(--paper2));
  border:2px solid var(--blue2);border-radius:12px;padding:7px 12px;font-size:13px;box-shadow:var(--sh)}
@media (max-width:980px){ .skgrid{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (max-width:600px){ .skgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* profile polish: closer to the supplied character-screen reference */
#sections[data-sec="profile"]{
  position:absolute;inset:0;overflow:auto;
  padding:10px 16px 118px;border-radius:0;
  background-color:#8fc86f;
  background-size:cover;background-position:center;
}
#sections[data-sec="profile"]::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(255,244,216,.06),rgba(28,78,24,.18));
}
#sections[data-sec="profile"] .sec-head{
  min-width:min(520px,92vw);margin:0 auto 10px;padding:7px 34px 10px;
  border-radius:4px 4px 14px 14px;border:0;
  background:
    linear-gradient(90deg,transparent 0 4%,rgba(0,0,0,.16) 4% 5%,transparent 5% 95%,rgba(0,0,0,.16) 95% 96%,transparent 96%),
    linear-gradient(180deg,#8d5c2f,#5a341d 54%,#3c2416);
  box-shadow:0 7px 0 rgba(50,26,9,.55),0 11px 18px rgba(0,0,0,.28),inset 0 2px 0 rgba(255,224,148,.25);
}
#sections[data-sec="profile"] .sec-head .st{
  font-size:23px;line-height:1;letter-spacing:1.5px;color:#ffe18a;
  text-shadow:0 2px 0 #42230f,0 0 10px rgba(0,0,0,.35);
}
#sections[data-sec="profile"] .sec-head .ss{
  margin-top:3px;font-size:13px;color:#fff4d5;text-shadow:0 1px 2px rgba(0,0,0,.55);
}
#sections[data-sec="profile"] .pp{
  border:12px solid var(--line);border-image:var(--frame-paper, none) 100 fill / 14px stretch;
  background:linear-gradient(180deg,rgba(255,244,222,.96),rgba(237,216,176,.96));
  box-shadow:0 6px 14px rgba(65,39,12,.24);
}
#sections[data-sec="profile"] .hero-layout{
  max-width:1480px;margin:0 auto;
  display:grid;grid-template-columns:minmax(260px,330px) minmax(430px,1fr) minmax(300px,420px);
  gap:14px;align-items:stretch;
}
#sections[data-sec="profile"] .profcard,
#sections[data-sec="profile"] .eqpanel,
#sections[data-sec="profile"] .bonpanel{
  backdrop-filter:blur(1px);
}
#sections[data-sec="profile"] .profcard{padding:18px 18px 16px}
#sections[data-sec="profile"] .prof-top{align-items:flex-start;gap:14px;margin-bottom:12px}
#sections[data-sec="profile"] .avbox.sm{
  width:104px;height:104px;border-radius:5px;border:3px solid #8e6a3c;
  background-color:#e6c994;box-shadow:inset 0 0 0 3px rgba(255,255,255,.35),0 3px 0 rgba(90,55,18,.24);
}
#sections[data-sec="profile"] .prof-name{
  font-size:26px;line-height:1.05;text-transform:uppercase;color:#4c2d18;
}
#sections[data-sec="profile"] .hl-t{font-size:14px;color:#4b321d}
#sections[data-sec="profile"] .pbar{
  height:22px;border-radius:5px;border:2px solid #714719;background:#6a3d19;
  box-shadow:inset 0 2px 2px rgba(0,0,0,.35);
}
#sections[data-sec="profile"] .pbar.blue i{background:linear-gradient(180deg,#5aa9ff,#1f66c7)}
#sections[data-sec="profile"] .pb-txt{font-size:12px;text-shadow:0 1px 1px rgba(0,0,0,.6)}
#sections[data-sec="profile"] .ps-t{
  text-align:center;font-size:15px;letter-spacing:.7px;color:#4c2d18;
  padding-bottom:6px;border-bottom:1px solid rgba(156,111,56,.35);
}
#sections[data-sec="profile"] .hstat{margin:9px 0}
#sections[data-sec="profile"] .srow{font-size:14px;min-height:28px}
#sections[data-sec="profile"] .si{font-size:20px;width:28px}
#sections[data-sec="profile"] .mbar{height:9px;border-radius:3px;background:#d8bd89}
#sections[data-sec="profile"] .mbar i{background:linear-gradient(180deg,#68cf59,#24923d)}
#sections[data-sec="profile"] .hero-center{gap:8px;justify-content:end}
#sections[data-sec="profile"] .hero-mid{
  grid-template-columns:112px minmax(260px,1fr);gap:16px;align-items:end;min-height:342px;
}
#sections[data-sec="profile"] .hchips{align-self:center;gap:12px}
#sections[data-sec="profile"] .hchip{
  width:104px;min-height:92px;padding:10px 7px;border-radius:6px;
  border:2px solid #f4d063;background:linear-gradient(180deg,rgba(255,247,211,.95),rgba(226,184,85,.92));
  box-shadow:0 0 0 3px rgba(255,226,95,.35),0 0 18px rgba(255,214,77,.5),inset 0 2px 0 rgba(255,255,255,.62);
}
#sections[data-sec="profile"] .hchip b{font-size:18px;color:#fff;text-shadow:0 2px 0 rgba(73,42,11,.6)}
#sections[data-sec="profile"] .hchip small{font-size:10px;color:#4d321a}
#sections[data-sec="profile"] .hero-stage{
  min-height:320px;justify-content:flex-end;padding-bottom:8px;
  filter:drop-shadow(0 18px 12px rgba(0,0,0,.28));
}
#sections[data-sec="profile"] .hero-big{font-size:180px}
#sections[data-sec="profile"] .hero-big.has-art{
  width:min(390px,100%);height:300px;background-position:center bottom;
  filter:drop-shadow(0 12px 8px rgba(0,0,0,.38));
}
#sections[data-sec="profile"] .pedestal{
  width:250px;height:42px;margin-top:-20px;border-radius:6px;border:3px solid #5c554a;
  background:
    linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 38%,rgba(0,0,0,.18)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 18px,rgba(0,0,0,.08) 18px 20px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.13) 0 2px,transparent 2px 17px),
    linear-gradient(180deg,#b9b2a5,#7d756a);
  box-shadow:0 12px 14px rgba(0,0,0,.34),inset 0 2px 0 rgba(255,255,255,.32);
}
#sections[data-sec="profile"] .hero-center .btn3d.big{
  min-width:270px;font-size:17px;border-radius:5px;padding:12px 28px;
  color:#5a310b;background:linear-gradient(180deg,#fff0c1,#d99632 58%,#b66d18);
}
#sections[data-sec="profile"] .skinsbar{
  max-width:720px;padding:7px 14px 7px;margin-top:0;
}
#sections[data-sec="profile"] .skwrap{gap:8px}
#sections[data-sec="profile"] .skarr{align-self:stretch;border-radius:5px}
#sections[data-sec="profile"] .skgrid{grid-template-columns:repeat(7,minmax(72px,1fr));gap:7px}
#sections[data-sec="profile"] .skgrid .skcard{
  border-radius:5px;padding:4px 4px 6px;background:linear-gradient(180deg,#fbebca,#e6c998);
}
#sections[data-sec="profile"] .skpic{height:46px}
#sections[data-sec="profile"] .skname{font-size:8.8px;line-height:1.05;min-height:19px}
#sections[data-sec="profile"] .sktag{border-radius:3px;font-size:8px;padding:1px 5px}
#sections[data-sec="profile"] .skcard .rb{font-size:7.5px;bottom:-7px}
#sections[data-sec="profile"] .eqpanel{padding:14px 16px}
#sections[data-sec="profile"] .eqgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#sections[data-sec="profile"] .eqcell{
  min-height:118px;border-radius:5px;padding:9px 5px;
  background:linear-gradient(180deg,#fff0d0,#e6c897);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 2px 0 rgba(109,72,29,.16);
}
#sections[data-sec="profile"] .eqn{font-size:10px;color:#4e331c}
#sections[data-sec="profile"] .eqpic{font-size:38px;margin:5px 0}
#sections[data-sec="profile"] .eqpic.has-art{height:48px}
#sections[data-sec="profile"] .eql{font-size:12px;color:#3f2a17}
#sections[data-sec="profile"] .eqc{font-size:10px}
#sections[data-sec="profile"] .bonpanel{padding:14px 16px}
#sections[data-sec="profile"] .bonpanel .srow{
  border-bottom:1px solid rgba(155,112,62,.28);padding:5px 2px;
}
#sections[data-sec="profile"] .prevbar{border-radius:5px}
@media (max-width:1240px){
  #sections[data-sec="profile"] .hero-layout{grid-template-columns:280px minmax(360px,1fr) 320px}
  #sections[data-sec="profile"] .hero-big.has-art{height:300px}
  #sections[data-sec="profile"] .skgrid{grid-template-columns:repeat(5,minmax(72px,1fr))}
}
@media (max-width:980px){
  #sections[data-sec="profile"]{padding-bottom:148px}
  #sections[data-sec="profile"] .hero-layout{grid-template-columns:1fr 1fr;align-items:start}
  #sections[data-sec="profile"] .hero-center{grid-column:1/-1;order:-1}
  #sections[data-sec="profile"] .hero-mid{min-height:320px}
}
@media (max-width:680px){
  #sections[data-sec="profile"] .hero-layout{grid-template-columns:1fr}
  #sections[data-sec="profile"] .sec-head{min-width:0;width:100%;padding-inline:16px}
  #sections[data-sec="profile"] .hero-mid{grid-template-columns:1fr;min-height:0}
  #sections[data-sec="profile"] .hchips{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
  #sections[data-sec="profile"] .hchip{width:auto;min-height:78px}
  #sections[data-sec="profile"] .hero-big.has-art{height:240px}
  #sections[data-sec="profile"] .skgrid{grid-template-columns:repeat(3,minmax(76px,1fr))}
  #sections[data-sec="profile"] .eqgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* profile viewport fit: desktop character screen should fit without page scroll */
#sections[data-sec="profile"]{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
  padding:clamp(6px,1dvh,10px) clamp(10px,1.1vw,16px) clamp(6px,1dvh,10px);
}
#sections[data-sec="profile"] .sec-head{
  flex:0 0 auto;
  margin-bottom:clamp(6px,1dvh,10px);
  padding:clamp(5px,.85dvh,8px) clamp(18px,2vw,34px) clamp(6px,.9dvh,10px);
}
#sections[data-sec="profile"] .hero-layout{
  flex:1 1 auto;
  min-height:0;
  height:auto;
  align-items:stretch;
  gap:clamp(8px,1vw,14px);
}
#sections[data-sec="profile"] .profcard,
#sections[data-sec="profile"] .hero-center,
#sections[data-sec="profile"] .hero-side,
#sections[data-sec="profile"] .eqpanel,
#sections[data-sec="profile"] .bonpanel{
  min-height:0;
}
#sections[data-sec="profile"] .pedestal{
  display:none !important;
}
#sections[data-sec="profile"] .profcard{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:clamp(10px,1.2dvh,16px);
}
#sections[data-sec="profile"] .prof-top{
  flex:0 0 auto;
  gap:clamp(9px,.9vw,14px);
  margin-bottom:clamp(6px,.9dvh,12px);
}
#sections[data-sec="profile"] .avbox.sm{
  width:clamp(74px,6vw,104px);
  height:clamp(74px,6vw,104px);
}
#sections[data-sec="profile"] .prof-name{
  font-size:clamp(18px,1.35vw,26px);
}
#sections[data-sec="profile"] .pbar{
  flex:0 0 auto;
  height:clamp(17px,2.2dvh,22px);
}
#sections[data-sec="profile"] .ps-t{
  flex:0 0 auto;
  font-size:clamp(12px,.95vw,15px);
  margin-bottom:clamp(3px,.5dvh,6px);
  padding-bottom:clamp(3px,.55dvh,6px);
}
#sections[data-sec="profile"] .hstat{
  margin:clamp(4px,.75dvh,9px) 0;
}
#sections[data-sec="profile"] .srow{
  min-height:clamp(21px,2.9dvh,28px);
  font-size:clamp(12px,.86vw,14px);
  line-height:1.15;
}
#sections[data-sec="profile"] .si{
  font-size:clamp(16px,1.15vw,20px);
  width:clamp(22px,1.8vw,28px);
}
#sections[data-sec="profile"] .mbar{
  height:clamp(6px,.95dvh,9px);
}
#sections[data-sec="profile"] .profcard .btn3d.wide,
#sections[data-sec="profile"] .bonpanel .btn3d.wide{
  margin-top:auto;
  min-height:clamp(34px,4.3dvh,42px);
  padding-top:6px;
  padding-bottom:6px;
}
#sections[data-sec="profile"] .hero-center{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:stretch;
  gap:clamp(5px,.75dvh,8px);
}
#sections[data-sec="profile"] .hero-mid{
  flex:1 1 auto;
  min-height:0;
  grid-template-columns:clamp(88px,7vw,112px) minmax(220px,1fr);
  gap:clamp(9px,1.1vw,16px);
  align-items:end;
}
#sections[data-sec="profile"] .hchips{
  gap:clamp(6px,.9dvh,12px);
}
#sections[data-sec="profile"] .hchip{
  width:clamp(86px,6.8vw,104px);
  min-height:clamp(68px,10.5dvh,92px);
  padding:clamp(6px,.9dvh,10px) 6px;
}
#sections[data-sec="profile"] .hchip b{
  font-size:clamp(15px,1.1vw,18px);
}
#sections[data-sec="profile"] .hero-stage{
  min-height:0;
  height:100%;
  justify-content:flex-end;
  padding-bottom:0;
}
#sections[data-sec="profile"] .hero-big{
  font-size:clamp(118px,15dvh,180px);
}
#sections[data-sec="profile"] .hero-big.has-art{
  width:min(clamp(240px,24vw,390px),100%);
  height:clamp(190px,34dvh,300px);
}
#sections[data-sec="profile"] .hero-center .btn3d.big{
  flex:0 0 auto;
  min-width:min(270px,100%);
  min-height:clamp(38px,4.8dvh,48px);
  font-size:clamp(13px,1vw,17px);
  padding:7px clamp(16px,1.8vw,28px);
}
#sections[data-sec="profile"] .hint{
  flex:0 0 auto;
  font-size:clamp(9px,.78vw,11px);
  line-height:1.15;
}
#sections[data-sec="profile"] .skinsbar{
  flex:0 0 auto;
  max-width:min(720px,100%);
  padding:clamp(5px,.75dvh,7px) clamp(8px,1vw,14px);
}
#sections[data-sec="profile"] .skgrid{
  gap:clamp(4px,.55vw,7px);
}
#sections[data-sec="profile"] .skgrid .skcard{
  padding:clamp(3px,.5dvh,4px) 4px clamp(4px,.65dvh,6px);
}
#sections[data-sec="profile"] .skpic{
  height:clamp(34px,5.1dvh,46px);
}
#sections[data-sec="profile"] .skname{
  min-height:clamp(16px,2.3dvh,19px);
}
#sections[data-sec="profile"] .sktag{
  line-height:1.05;
}
#sections[data-sec="profile"] .hero-side{
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:clamp(8px,1dvh,12px);
}
#sections[data-sec="profile"] .eqpanel,
#sections[data-sec="profile"] .bonpanel{
  overflow:hidden;
  padding:clamp(9px,1.1dvh,14px) clamp(10px,1vw,16px);
}
#sections[data-sec="profile"] .eqpanel{
  display:flex;
  flex-direction:column;
}
#sections[data-sec="profile"] .eqgrid{
  flex:1 1 auto;
  min-height:0;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr);
  gap:clamp(6px,.75vw,10px);
}
#sections[data-sec="profile"] .eqcell{
  min-height:0;
  padding:clamp(5px,.8dvh,9px) 4px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
#sections[data-sec="profile"] .eqn{
  font-size:clamp(8px,.72vw,10px);
}
#sections[data-sec="profile"] .eqpic{
  font-size:clamp(25px,4.2dvh,38px);
  margin:clamp(2px,.55dvh,5px) 0;
}
#sections[data-sec="profile"] .eqpic.has-art{
  height:clamp(30px,5.4dvh,48px);
}
#sections[data-sec="profile"] .eql{
  font-size:clamp(10px,.82vw,12px);
}
#sections[data-sec="profile"] .eqc{
  font-size:clamp(8px,.72vw,10px);
}
#sections[data-sec="profile"] .bonpanel{
  display:flex;
  flex-direction:column;
}
#sections[data-sec="profile"] .bonpanel .srow{
  padding:clamp(3px,.65dvh,5px) 2px;
}

@media (max-height:760px) and (min-width:981px){
  .hud{padding-top:6px;padding-bottom:6px}
  nav.tabbar{padding-top:6px;padding-bottom:6px}
  #sections[data-sec="profile"] .sec-head .st{font-size:20px}
  #sections[data-sec="profile"] .sec-head .ss{font-size:11px}
  #sections[data-sec="profile"] .profcard{padding:9px}
  #sections[data-sec="profile"] .avbox.sm{width:72px;height:72px}
  #sections[data-sec="profile"] .hstat{margin:3px 0}
  #sections[data-sec="profile"] .hero-big.has-art{height:clamp(170px,31dvh,245px)}
  #sections[data-sec="profile"] .hchip{min-height:62px}
  #sections[data-sec="profile"] .skinsbar .ps-t{margin-bottom:3px}
}

@media (max-width:980px){
  #sections[data-sec="profile"]{
    overflow:auto;
    padding-bottom:12px;
  }
}

/* main screen header: closer to the supplied reference */
header.hud{
  display:grid;
  grid-template-columns:clamp(360px,29vw,560px) clamp(270px,20vw,360px) minmax(460px,1fr);
  align-items:stretch;
  gap:clamp(12px,1.2vw,22px);
  padding:clamp(8px,.95dvh,12px) clamp(14px,1.45vw,24px);
  min-height:clamp(112px,13.6dvh,142px);
}
.logo.has-art{
  width:100%;
  min-width:0;
  min-height:clamp(86px,11.4dvh,118px);
  background-size:contain;
  background-position:left center;
}
.hud-center{
  width:100%;
  min-width:0;
  padding:clamp(8px,1dvh,12px) clamp(18px,1.7vw,28px);
  border-radius:14px;
}
.hc-row{
  width:100%;
  justify-content:center;
  gap:clamp(12px,1.2vw,18px);
}
i.cur.big{
  width:clamp(44px,5.6dvh,60px);
  height:clamp(44px,5.6dvh,60px);
  border-radius:8px;
}
.hc-num{
  font-size:clamp(34px,4.4dvh,54px);
}
.hc-sub{
  font-size:clamp(10px,1.25dvh,15px);
  letter-spacing:clamp(1.6px,.18vw,2.5px);
}
.hc-rate{
  min-width:min(100%,260px);
  justify-content:center;
  padding:clamp(4px,.55dvh,7px) clamp(12px,1.3vw,18px);
  font-size:clamp(11px,1.35dvh,15px);
}
.hud-stats{
  margin-left:0;
  width:100%;
  height:100%;
  flex:initial;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:clamp(7px,.75vw,12px);
}
.hud-stats .chip,
.hud-stats .gear{
  min-width:0;
  min-height:0;
  height:auto;
  border-radius:12px;
}
.hud-stats .chip{
  padding:clamp(7px,.9dvh,11px) clamp(9px,.95vw,15px);
  gap:clamp(7px,.75vw,11px);
}
.hud-stats .chip .ci{
  font-size:clamp(22px,3.1dvh,34px);
}
.hud-stats .chip .ci.has-art{
  width:clamp(26px,3.7dvh,42px);
  height:clamp(26px,3.7dvh,42px);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  font-size:0; /* прячем эмодзи-подложку, когда есть картинка-иконка (иначе «двойные иконки») */
}
.hud-stats .chip .ci.has-art .cur{ display:none } /* и вложенную иконку валюты (изумруд/доход) */
.hud-stats .chip small{
  font-size:clamp(9px,1.15dvh,13px);
  line-height:1.1;
}
.hud-stats .chip b{
  font-size:clamp(13px,1.9dvh,20px);
  line-height:1.1;
}
.hud-stats .chip .plus{
  width:clamp(22px,2.75dvh,32px);
  height:clamp(22px,2.75dvh,32px);
  border-radius:7px;
}
.hud-stats .gear{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0;
  background-size:clamp(30px,4.2dvh,48px) clamp(30px,4.2dvh,48px);
  background-position:center;
  background-repeat:no-repeat;
}

/* main screen proportions under the header */
.scene{
  grid-template-columns:clamp(205px,14.5vw,260px) minmax(360px,1fr) clamp(270px,22vw,430px);
  gap:clamp(12px,1.2vw,20px);
  padding:clamp(12px,1.4dvh,18px) clamp(14px,1.4vw,24px) clamp(96px,10.5dvh,118px);
}
.plaque{
  top:0;
}
.plaque b{
  min-width:clamp(250px,22vw,360px);
  padding:clamp(8px,1dvh,12px) clamp(24px,2.4vw,42px);
  font-size:clamp(17px,2.2dvh,25px);
}
.plaque small{
  font-size:clamp(10px,1.25dvh,14px);
  padding:clamp(4px,.6dvh,7px) clamp(18px,1.6vw,28px);
}
.hexchip{
  left:calc(clamp(205px,14.5vw,260px) + clamp(14px,1.4vw,24px) + clamp(14px,1.2vw,22px));
  top:clamp(8px,1.1dvh,14px);
  min-width:clamp(205px,17vw,292px);
}
.stage{
  padding-top:clamp(44px,7dvh,78px);
}
.bname{
  font-size:clamp(29px,5dvh,48px);
}
.cube-stage{
  width:min(clamp(300px,28vw,460px),92%);
  height:clamp(205px,29dvh,330px);
  margin-top:clamp(10px,1.5dvh,18px);
}
.block-cube{
  --cs:clamp(150px,20dvh,220px);
}
.dock{
  width:min(760px,54vw);
  bottom:clamp(10px,1.2dvh,16px);
}

@media (max-width:1500px){
  header.hud{
    grid-template-columns:clamp(320px,28vw,430px) clamp(255px,20vw,310px) minmax(430px,1fr);
  }
  .hud-stats .chip{
    padding-left:9px;
    padding-right:9px;
  }
}

@media (max-width:1180px){
  header.hud{
    grid-template-columns:clamp(260px,26vw,320px) clamp(230px,23vw,280px) minmax(360px,1fr);
    gap:10px;
  }
  .hud-stats{
    gap:6px;
  }
  .hud-stats .chip small{
    font-size:9px;
  }
  .hud-stats .chip b{
    font-size:13px;
  }
}

@media (max-height:760px) and (min-width:961px){
  header.hud{
    min-height:112px;
    padding-top:7px;
    padding-bottom:7px;
  }
  .logo.has-art{
    min-height:78px;
  }
  .hud-center{
    padding-top:7px;
    padding-bottom:7px;
  }
  .hc-num{
    font-size:34px;
  }
  i.cur.big{
    width:42px;
    height:42px;
  }
  .scene{
    padding-bottom:92px;
  }
  .goalp{
    padding:9px 11px;
  }
  .statsp #statsPanel{
    padding-left:11px;
    padding-right:11px;
  }
  .statsp .srow{
    padding-top:5px;
    padding-bottom:5px;
  }
  .dp .pp-title{
    padding-top:8px;
  }
  .dp-now{
    font-size:22px;
  }
}

@media (max-width:960px){
  header.hud{
    display:flex;
    min-height:0;
  }
  .logo.has-art{
    width:auto;
  }
  .hud-stats{
    grid-template-columns:repeat(4,1fr);
  }
}

i.cur.block{
  border:0;
  border-radius:0;
  background:url('/games/kopatel/assets/icons/chip-income.png') center/contain no-repeat;
  box-shadow:none;
  image-rendering:auto;
}
i.cur.block.big{
  filter:drop-shadow(0 4px 3px rgba(91,56,8,.28));
}

/* bottom menu: large parchment buttons like the reference */
nav.tabbar{
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:clamp(8px,.75vw,12px);
  padding:clamp(9px,1dvh,13px) clamp(12px,1.3vw,22px) clamp(10px,1.1dvh,14px);
  background:linear-gradient(180deg,#f9edcf,#ead4a9);
  border-top:3px solid #b88445;
  box-shadow:0 -5px 12px rgba(73,44,12,.18), inset 0 2px 0 rgba(255,255,255,.65);
}
.tab{
  min-width:0;
  min-height:clamp(66px,7.2dvh,82px);
  padding:clamp(7px,.9dvh,10px) 6px clamp(6px,.85dvh,9px);
  gap:clamp(3px,.45dvh,6px);
  border-radius:7px;
  border:2px solid #c69a63;
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,0) 32%),
    linear-gradient(180deg,#fff3d8,#e7c994);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.72),
    inset 0 -4px 0 rgba(128,83,33,.16),
    0 3px 0 rgba(126,83,35,.38);
}
.tab:hover{
  filter:brightness(1.035);
}
.tab:active{
  transform:translateY(2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(128,83,33,.16);
}
.tab.active{
  border-color:#f2b21d;
  background:
    linear-gradient(180deg,rgba(255,252,228,.88),rgba(255,255,255,0) 33%),
    linear-gradient(180deg,#fff4cf,#f0c772 56%,#e0aa3a);
  box-shadow:
    0 0 0 3px rgba(255,205,55,.72),
    0 0 18px rgba(255,187,32,.34),
    inset 0 2px 0 rgba(255,255,255,.82),
    inset 0 -4px 0 rgba(145,88,12,.2),
    0 3px 0 rgba(126,83,35,.42);
}
.tab .ticon{
  font-size:clamp(24px,3.25dvh,36px);
  line-height:1;
}
.tab .ticon.has-art,
.tab .ticon[data-art]{
  width:clamp(30px,4dvh,42px);
  height:clamp(30px,4dvh,42px);
  font-size:0;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  filter:drop-shadow(0 3px 2px rgba(84,52,16,.24));
}
.tab span:last-of-type{
  max-width:100%;
  color:#4b321d;
  font-size:clamp(9.5px,1.22dvh,14px);
  line-height:1.1;
  font-weight:900;
  letter-spacing:.35px;
  text-shadow:0 1px 0 rgba(255,246,220,.78);
}
.tab .newchip{
  top:4px;
  right:4px;
  border-radius:5px;
  background:linear-gradient(180deg,#45bd48,#23932e);
  border:1px solid #167622;
  color:#fff;
  box-shadow:0 2px 0 rgba(68,42,10,.2), inset 0 1px 0 rgba(255,255,255,.45);
}
.alertdot{
  top:-8px;
  right:22%;
  box-shadow:0 2px 0 rgba(90,35,20,.25);
}

/* critical art without waiting for JS */
.logo[data-art="logo.png"]{
  font-size:0;
  color:transparent;
  text-shadow:none;
  border:0;
  box-shadow:none;
  background-color:transparent;
  background-image:url('/games/kopatel/assets/logo.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:left center;
}
.logo[data-art="logo.png"]::after,
.logo[data-art="logo.png"] .logo-pick{
  display:none;
}
.ci[data-art],
.ticon[data-art],
.gear[data-art]{
  font-size:0;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.ci[data-art]{width:clamp(26px,3.7dvh,42px);height:clamp(26px,3.7dvh,42px)}
.ci[data-art] .cur{display:none}
.gear[data-art]{background-image:url('/games/kopatel/assets/icons/gear.png')}
.ci[data-art="icons/chip-clicks.png"]{background-image:url('/games/kopatel/assets/icons/chip-clicks.png')}
.ci[data-art="icons/chip-workers.png"]{background-image:url('/games/kopatel/assets/icons/chip-workers.png')}
.ci[data-art="icons/chip-emerald.png"]{background-image:url('/games/kopatel/assets/icons/chip-emerald.png')}
.ci[data-art="icons/chip-luck.png"]{background-image:url('/games/kopatel/assets/icons/chip-luck.png')}
.ci[data-art="icons/chip-speed.png"]{background-image:url('/games/kopatel/assets/icons/chip-speed.png')}
.ci[data-art="icons/chip-income.png"]{background-image:url('/games/kopatel/assets/icons/chip-income.png')}
.ci[data-art="icons/chip-prestige.png"]{background-image:url('/games/kopatel/assets/icons/chip-prestige.png')}
.ticon[data-art="icons/tab-weapons.png"]{background-image:url('/games/kopatel/assets/icons/tab-weapons.png')}
.ticon[data-art="icons/tab-workers.png"]{background-image:url('/games/kopatel/assets/icons/tab-workers.png')}
.ticon[data-art="icons/tab-enchants.png"]{background-image:url('/games/kopatel/assets/icons/tab-enchants.png')}
.ticon[data-art="icons/tab-prestige.png"]{background-image:url('/games/kopatel/assets/icons/tab-prestige.png')}
.ticon[data-art="icons/tab-quests.png"]{background-image:url('/games/kopatel/assets/icons/tab-quests.png')}
.ticon[data-art="icons/tab-leaders.png"]{background-image:url('/games/kopatel/assets/icons/tab-leaders.png')}
.ticon[data-art="icons/tab-achieve.png"]{background-image:url('/games/kopatel/assets/icons/tab-achieve.png')}
.ticon[data-art="icons/tab-profile.png"]{background-image:url('/games/kopatel/assets/icons/tab-profile.png')}
.ticon[data-art="icons/tab-updates.png"]{background-image:url('/games/kopatel/assets/icons/tab-updates.png')}
.scene{
  background-image:url('/games/kopatel/assets/bg/biome-1.jpg');
  background-size:cover;
  background-position:center;
}
.face.f-top{background-image:url('/games/kopatel/textures/dirt_top.png')}
.face.f-front,
.face.f-back,
.face.f-left,
.face.f-right{background-image:url('/games/kopatel/textures/dirt_side.png')}
.face.f-bottom{background-image:url('/games/kopatel/textures/dirt.png')}

@media (max-height:760px) and (min-width:961px){
  nav.tabbar{
    padding-top:7px;
    padding-bottom:8px;
  }
  .tab{
    min-height:60px;
  }
  .tab .ticon.has-art,
  .tab .ticon[data-art]{
    width:30px;
    height:30px;
  }
  .tab span:last-of-type{
    font-size:10px;
  }
}

@media (max-width:960px){
  nav.tabbar{
    grid-template-columns:repeat(4,1fr);
  }
}

/* Prestige screen art pass */
#sections[data-sec="prestige"]{
  position:absolute;
  inset:0;
  overflow:auto;
  padding:clamp(10px,1.2dvh,16px) clamp(18px,1.6vw,28px) clamp(14px,1.4dvh,18px);
  background:
    linear-gradient(180deg,rgba(70,38,12,.18),rgba(24,12,3,.36)),
    url('/games/kopatel/assets/prestige/prestige-bg.jpg') center/cover no-repeat;
}
#sections[data-sec="prestige"]::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 24%,rgba(255,185,42,.24),transparent 34%),
             linear-gradient(90deg,rgba(34,15,4,.18),transparent 18%,transparent 82%,rgba(34,15,4,.18));
}
#sections[data-sec="prestige"] > *{
  position:relative;
  z-index:1;
}
#sections[data-sec="prestige"] .sec-head{
  justify-content:center;
  width:max-content;
  min-width:min(360px,90vw);
  margin:0 auto clamp(10px,1.2dvh,16px);
  padding:7px 34px 9px;
  border-radius:0 0 12px 12px;
  background:
    linear-gradient(90deg,transparent 0 8%,rgba(80,42,12,.42) 8% 13%,transparent 13% 87%,rgba(80,42,12,.42) 87% 92%,transparent 92%),
    linear-gradient(180deg,#9a632d,#6f401d 58%,#4a2813);
  box-shadow:0 7px 0 rgba(55,25,5,.55),0 12px 20px rgba(0,0,0,.25),inset 0 2px 0 rgba(255,219,125,.26);
}
#sections[data-sec="prestige"] .sec-head .st{
  font-size:clamp(20px,2.6dvh,30px);
  line-height:1;
  color:#ffe18a;
  text-shadow:0 2px 0 #4a2508,0 0 12px rgba(255,190,50,.36);
}
#sections[data-sec="prestige"] .sec-head .ss{
  display:none;
}
#sections[data-sec="prestige"] .pgrid{
  max-width:1840px;
  height:calc(100% - clamp(48px,6.2dvh,72px));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(300px,31%) minmax(460px,1fr) minmax(300px,25%);
  gap:clamp(16px,1.8vw,28px);
  align-items:stretch;
}
#sections[data-sec="prestige"] .pp{
  border:12px solid var(--line);
  border-image:var(--frame-paper, none) 100 fill / 14px stretch;
  background:linear-gradient(180deg,rgba(255,242,217,.96),rgba(234,210,167,.96));
  box-shadow:0 8px 18px rgba(55,28,6,.28),inset 0 1px 0 rgba(255,255,255,.45);
  border-radius:6px;
}
#sections[data-sec="prestige"] .phero{
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:clamp(14px,1.45dvh,20px);
  text-align:center;
}
#sections[data-sec="prestige"] .ph-t{
  font-size:clamp(12px,1.55dvh,18px);
  color:#4b2b13;
  text-transform:uppercase;
}
#sections[data-sec="prestige"] .prestige-hero-art{
  flex:1 1 auto;
  min-height:180px;
  width:100%;
  max-height:38dvh;
  margin:clamp(8px,1dvh,14px) auto;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  border-radius:4px;
  font-size:0;
  filter:drop-shadow(0 9px 10px rgba(98,49,6,.24));
}
#sections[data-sec="prestige"] .starart::before,
#sections[data-sec="prestige"] .starart::after{
  display:none;
}
#sections[data-sec="prestige"] .phero p{
  font-size:clamp(11px,1.2dvh,14px) !important;
  line-height:1.25;
  color:#4f331d;
}
#sections[data-sec="prestige"] .ph-get{
  margin:clamp(6px,.9dvh,10px) 0 0;
  font-size:clamp(10px,1.25dvh,13px);
  color:#735031;
  text-transform:uppercase;
}
#sections[data-sec="prestige"] .ph-num{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  font-size:clamp(24px,3.6dvh,42px);
  color:#4b2a11;
}
.prestige-shard-ico{
  display:inline-block;
  width:1.25em;
  height:1.25em;
  vertical-align:-.22em;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  filter:drop-shadow(0 3px 3px rgba(126,72,0,.22));
}
#sections[data-sec="prestige"] .phero .btn3d.gold{
  min-height:clamp(42px,5dvh,58px);
  margin-top:clamp(8px,1dvh,12px);
  border-radius:5px;
  font-size:clamp(18px,2.5dvh,28px);
}
#sections[data-sec="prestige"] .phero .warn{
  margin-top:7px;
  font-size:clamp(10px,1.25dvh,13px);
}
#sections[data-sec="prestige"] .pgrid > .pp:not(.phero){
  min-height:0;
  overflow:hidden;
}
#sections[data-sec="prestige"] .pgrid > .pp:nth-child(2){
  display:flex;
  flex-direction:column;
  padding-bottom:clamp(10px,1.2dvh,14px) !important;
}
#sections[data-sec="prestige"] .prestige-center{
  min-height:0;
  overflow-y:auto !important;
  scrollbar-width:thin;
}
#sections[data-sec="prestige"] .pp-title{
  padding:clamp(8px,1dvh,12px) clamp(14px,1.2vw,20px) 7px;
  font-size:clamp(12px,1.45dvh,17px);
  color:#4b2b13;
  border-bottom:1px solid rgba(147,97,43,.28);
}
#sections[data-sec="prestige"] .formula{
  flex:0 0 auto;
  gap:clamp(8px,1vw,14px);
  padding:clamp(10px,1.25dvh,16px);
  border-bottom:1px solid rgba(147,97,43,.25);
}
#sections[data-sec="prestige"] .fc{
  border:0;
  background:transparent;
  min-width:96px;
  padding:4px 8px;
  color:#4b2b13;
}
#sections[data-sec="prestige"] .fc b{
  font-size:clamp(14px,1.65dvh,20px);
}
#sections[data-sec="prestige"] .fc small{
  color:#7b5632;
}
#sections[data-sec="prestige"] .fop{
  color:#8a5e35;
}
#sections[data-sec="prestige"] .pcells{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(8px,.85vw,14px);
  padding:clamp(8px,1dvh,12px) clamp(12px,1vw,18px) !important;
}
#sections[data-sec="prestige"] .pcell{
  min-height:clamp(104px,13.5dvh,142px);
  padding:clamp(6px,.75dvh,10px) 7px;
  border-radius:5px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}
#sections[data-sec="prestige"] .has-prestige-art{
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  font-size:0 !important;
}
#sections[data-sec="prestige"] .pcell .pi{
  width:clamp(38px,5.2dvh,58px);
  height:clamp(38px,5.2dvh,58px);
  flex:0 0 auto;
  filter:none;
}
#sections[data-sec="prestige"] .pcell .pe{
  font-size:clamp(15px,1.75dvh,21px);
  color:#4b2b13;
}
#sections[data-sec="prestige"] .pcell .pn{
  min-height:24px;
  color:#5b3b21;
  font-size:clamp(9px,1.05dvh,12px);
  line-height:1.15;
}
#sections[data-sec="prestige"] .pcell .el{
  margin-top:auto;
  color:#7b5632;
  font-size:clamp(9px,1.05dvh,12px);
  font-weight:900;
}
#sections[data-sec="prestige"] .cgridx{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(8px,.85vw,14px);
  padding:clamp(8px,1dvh,12px) clamp(12px,1vw,18px) 0 !important;
}
#sections[data-sec="prestige"] .ccell{
  min-height:clamp(94px,12.2dvh,126px);
  border-radius:5px;
  padding:clamp(6px,.75dvh,9px) 7px;
  background:linear-gradient(180deg,rgba(255,236,194,.98),rgba(213,157,63,.55));
}
#sections[data-sec="prestige"] .ccell .ci2{
  width:100%;
  height:clamp(34px,5.7dvh,58px);
  margin-bottom:2px;
}
#sections[data-sec="prestige"] .ccell .cn{
  min-height:20px;
  color:#4b2b13;
  font-size:clamp(8.5px,1dvh,11px);
  line-height:1.1;
}
#sections[data-sec="prestige"] .ccell.mystery{
  background:linear-gradient(180deg,rgba(78,47,22,.95),rgba(42,25,12,.95));
}
#sections[data-sec="prestige"] .pside{
  min-height:0;
  height:100%;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(12px,1.4dvh,18px);
  position:static;
}
#sections[data-sec="prestige"] .pshards{
  padding:clamp(12px,1.3dvh,18px);
}
#sections[data-sec="prestige"] .ps-num{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  font-size:clamp(28px,4dvh,48px);
  color:#4b2a11;
}
#sections[data-sec="prestige"] .pbadgewrap{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:0;
  padding:clamp(12px,1.4dvh,18px);
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  color:#ffe8ad;
}
#sections[data-sec="prestige"] .prestige-badge-art{
  flex:1 1 auto;
  min-height:170px;
  width:100%;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  font-size:0;
  filter:drop-shadow(0 0 22px rgba(255,190,43,.42));
}
#sections[data-sec="prestige"] .prank{
  margin:0 auto clamp(8px,1dvh,12px);
  padding:7px 22px;
  border-radius:4px;
  color:#ffe18a;
  background:linear-gradient(180deg,#a35d18,#723409);
  border-color:#4b2105;
  font-size:clamp(12px,1.65dvh,18px);
}
#sections[data-sec="prestige"] .pbonus{
  padding:clamp(12px,1.4dvh,18px);
}
#sections[data-sec="prestige"] .pb-num{
  font-size:clamp(28px,4.3dvh,54px);
  color:#2b8f34;
}

@media (max-width:1240px){
  #sections[data-sec="prestige"]{
    overflow:auto;
  }
  #sections[data-sec="prestige"] .pgrid{
    height:auto;
    grid-template-columns:1fr 1fr;
  }
  #sections[data-sec="prestige"] .pgrid > .pp:nth-child(2){
    grid-column:1/-1;
    grid-row:1;
  }
}

@media (max-height:760px) and (min-width:1241px){
  #sections[data-sec="prestige"]{
    padding-top:8px;
  }
  #sections[data-sec="prestige"] .sec-head{
    margin-bottom:8px;
    padding-top:6px;
    padding-bottom:7px;
  }
  #sections[data-sec="prestige"] .pcell{
    min-height:96px;
  }
  #sections[data-sec="prestige"] .ccell{
    min-height:88px;
  }
  #sections[data-sec="prestige"] .phero p{
    font-size:10.5px !important;
  }
}

@media (max-height:820px) and (min-width:1241px){
  #sections[data-sec="prestige"]{
    padding-top:8px;
    padding-bottom:10px;
  }
  #sections[data-sec="prestige"] .sec-head{
    margin-bottom:8px;
    padding-top:6px;
    padding-bottom:7px;
  }
  #sections[data-sec="prestige"] .pp-title{
    padding-top:7px;
    padding-bottom:5px;
  }
  #sections[data-sec="prestige"] .formula{
    padding-top:8px;
    padding-bottom:8px;
  }
  #sections[data-sec="prestige"] .pcell{
    min-height:96px;
  }
  #sections[data-sec="prestige"] .pcell .pi{
    width:34px;
    height:34px;
  }
  #sections[data-sec="prestige"] .pcell .pe{
    font-size:15px;
  }
  #sections[data-sec="prestige"] .pcell .pn{
    min-height:20px;
    font-size:9px;
  }
  #sections[data-sec="prestige"] .ccell{
    min-height:84px;
  }
  #sections[data-sec="prestige"] .ccell .ci2{
    height:32px;
  }
}

/* ===================== Окно «Итоги Сезона 1» ===================== */
.fin-away{
  text-align:center;background:var(--paper3);border:1.5px solid var(--line);
  border-radius:10px;padding:8px 10px;margin:0 0 12px;color:var(--ink2);font-weight:700;
}
.fin-sec{margin:0 0 14px}
.fin-sec .fin-h{font-weight:900;color:var(--ink2);font-size:15px;margin:0 0 6px}
.fin-sec ul{margin:4px 0 0;padding-left:18px;color:var(--ink)}
.fin-sec ul li{margin:3px 0;line-height:1.5}
.fin-rank{text-align:center;margin:2px 0 8px;color:var(--ink2)}
.fin-rank b{color:var(--gold3)}
.fin-lb{
  border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper);
}
.fin-load{text-align:center;color:var(--muted);padding:12px;font-weight:700}
.fin-row{
  display:flex;align-items:center;gap:10px;padding:7px 10px;
  border-bottom:1px solid var(--paper3);font-size:13px;color:var(--ink);
}
.fin-row:last-child{border-bottom:none}
.fin-row .fin-pos{width:26px;text-align:center;font-weight:900;color:var(--line2)}
.fin-row .fin-nick{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.fin-row .fin-dep{font-weight:900;color:var(--gold3)}
.fin-row.me{background:rgba(242,178,29,.18);box-shadow:inset 3px 0 0 var(--gold2)}
.fin-next{text-align:center;background:var(--paper2);border-radius:10px;padding:10px}

/* ===================== Плавное появление сцены/куба при загрузке ===================== */
/* Сначала рисуется процедурная пещера (canvas), потом подгружаются фон/текстуры —
   чтобы переход «графика → визуал» не бросался в глаза, мягко проявляем их один раз. */
@keyframes kg-fade-in{ from{opacity:0} to{opacity:1} }
@keyframes kg-fade-canvas{ from{opacity:0} to{opacity:.95} }
.cube-stage{ animation:kg-fade-in .5s ease both }
.scene canvas{ animation:kg-fade-canvas .65s ease both }

/* ===== Подсказки на вкладках (для новичков, сворачиваемые) ===== */
.kg-hint{display:flex;align-items:flex-start;gap:9px;background:var(--paper3);border:1.5px solid var(--line);border-left:3px solid var(--gold2);border-radius:11px;padding:9px 12px;margin:0 0 14px;font-size:13px;line-height:1.55;color:var(--ink)}
.kg-hint-i{flex:none;font-size:15px;line-height:1.4}
.kg-hint-t{flex:1;min-width:0}
.kg-hint-x{flex:none;background:none;border:0;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:0 2px;align-self:flex-start}
.kg-hint-x:hover{color:var(--ink2)}

/* ============================================================
   📱 МОБИЛЬНЫЙ ФИКС-ХОЛСТ 941×1672 (по референсу), масштабируется под ширину.
   Панели-пергамент плавают поверх рисованной сцены (biome-1.jpg).
   --mscale задаёт JS (#mscaler в blade). Координаты — в пикселях референса.
   ============================================================ */
.ref-overlay{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100vw;max-width:100vw;
  z-index:9999;opacity:.5;pointer-events:none}
.ref-toggle{position:fixed;right:8px;bottom:8px;z-index:10000;background:#222;color:#fff;border:2px solid #fff;
  border-radius:8px;padding:8px 12px;font-weight:900;font-size:12px;font-family:inherit}

/* Элементы только для мобильного фикс-холста — на десктопе скрыты,
   показываются/позиционируются исключительно в @media (max-width:768px) ниже */
.km-dmg,.km-clan,.km-row2{display:none}
.km-hpcard{display:contents}      /* на десктопе обёртка прозрачна: bname+hpwrap ведут себя как раньше */
.stat-delta{display:none}

@media (max-width:768px){
  html,body{height:auto;overflow-x:hidden}
  body{overflow-y:auto}
  .mscaler{width:100vw;overflow:hidden;margin:0 auto;position:relative}
  .kop-app{width:941px!important;height:1672px!important;min-height:1672px!important;transform:scale(var(--mscale,0.41));transform-origin:top left;
    display:flex;flex-direction:column;overflow:hidden;position:relative;
    background:url('/games/kopatel/assets/bg/biome-1.jpg') center/cover no-repeat,linear-gradient(180deg,#bfe2f0,#cdac79)}

  /* === ВЕРХ: таблица статов 2×4 (≈18px поля, ~270px высота) === */
  header.hud{flex:none;position:relative;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;
    gap:13px;padding:18px;background:none;border:0;box-shadow:none}
  .logo{display:none!important}
  .gear{position:absolute;top:-4px;right:20px;width:0;height:0;overflow:hidden}  /* настройки — в нижнем меню/драуэре */
  .hud-stats{display:contents}
  .hud-center,.hud-stats .chip{padding:12px 15px;border-radius:20px;gap:12px;min-width:0;align-items:center;
    background:linear-gradient(180deg,#fff9e9,#fff4d8 60%,#f4dfb2);border:3px solid #c99345;
    box-shadow:0 4px 0 rgba(160,110,40,.35),inset 0 3px 0 rgba(255,255,255,.8)}
  .hud-center{order:-1;flex-direction:row;justify-content:flex-start}
  .hud-center .hc-row{flex-direction:row;align-items:center;gap:12px;min-width:0}
  .hud-center .hc-row>div{display:flex;flex-direction:column;min-width:0}
  .hud-center .hc-sub,.hud-stats .chip small{order:1;font-size:20px;font-weight:800;color:#9a7b48;letter-spacing:0;white-space:nowrap}
  .hud-center .hc-num,.hud-stats .chip b{order:2;font-size:37px;font-weight:900;color:#382515;line-height:1;white-space:nowrap}
  .hud-center .hc-rate{display:none}
  .hud-center i.cur.big,.hud-stats .chip .ci{width:60px;height:60px;font-size:50px;flex:none;line-height:1}
  .hud-stats .chip>div{min-width:0;display:flex;flex-direction:column}
  .hud-stats .chip .plus{width:38px;height:38px;font-size:26px;border-radius:10px}
  .stat-delta{display:block;font-size:22px;font-weight:800;color:#218b2b;line-height:1;margin-top:3px}
  .stat-delta.zero{color:#873eea}

  /* === Сцена: всё позиционируется абсолютно внутри холста 941×1672 === */
  #view{position:absolute;inset:0;z-index:1}
  .scene{position:absolute;inset:0;background:none!important;display:block;overflow:visible;padding:0}
  .scene canvas{display:none}                       /* фон даёт .kop-app, второй слой не нужен */

  /* — ряд: лихорадка (слева) · Поверхность (центр) · биом (справа) — */
  .fever-banner{position:absolute;left:18px;top:278px;width:250px;z-index:6;margin:0}
  .plaque{display:flex;flex-direction:column;align-items:center;gap:2px;position:absolute;
    left:50%;top:280px;transform:translateX(-50%);width:432px;max-width:calc(100% - 36px);padding:12px 18px;border-radius:20px;z-index:6;
    background:linear-gradient(180deg,#fff9e9,#fff4d8 60%,#f4dfb2);border:3px solid #c99345;
    box-shadow:0 4px 0 rgba(160,110,40,.35),inset 0 3px 0 rgba(255,255,255,.85)}
  .plaque b{font-size:28px;font-weight:900;color:#3a2614;line-height:1;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .plaque small{font-size:16px;font-weight:800;color:#9a7b48;letter-spacing:.04em;line-height:1}
  .hexchip{position:absolute!important;right:18px!important;left:auto!important;top:296px;width:240px!important;
    justify-content:center;padding:12px 14px;border-radius:18px;z-index:6}
  .hexchip .hx-ico{font-size:30px}
  .hexchip b{font-size:24px}.hexchip small{font-size:15px}.hexchip .hx-arr{font-size:26px}

  /* — Глубина — под «Поверхностью» — */
  .scol.left{position:absolute;left:50%;top:392px;transform:translateX(-50%);width:404px;z-index:5}
  .railwrap{display:none}
  .dp{padding:8px 18px 10px;text-align:center;min-height:0!important;height:auto;display:block}
  .dp .pp-title{font-size:18px;color:#9a7b48;line-height:1;margin:0;padding:0;min-height:0;display:block}
  .dp-now{font-size:29px;color:#3a2614;line-height:1;margin:2px 0;padding:0}.dp-now b{color:#3a2614}
  .rec{font-size:15px;line-height:1;margin:3px 0 0;padding:0;min-height:0}

  /* — кубик по центру — */
  .stage{position:absolute;left:0;right:0;top:430px;height:500px;display:flex;flex-direction:column;
    align-items:center;justify-content:flex-start;gap:0;z-index:4}
  .lvl-line{display:none}
  .cube-stage{order:1;height:350px;width:100%;margin:0;display:flex;align-items:center;justify-content:center}
  .block-cube{--cs:265px}
  .combo-chip{left:20px;top:24%}            /* база left:-6 уезжает за край полноширинного холста */
  /* HP-карточка (имя блока + полоса) перекрывает низ кубика */
  .km-hpcard{display:block;order:2;width:540px;max-width:90%;margin-top:-22px;padding:14px 24px 16px;border-radius:22px;
    text-align:center;z-index:5;
    background:linear-gradient(180deg,#fff9e9,#fff4d8 60%,#f4dfb2);border:3px solid #c99345;
    box-shadow:0 5px 0 rgba(160,110,40,.35),inset 0 3px 0 rgba(255,255,255,.85)}
  .km-hpcard .bname{font-size:42px;font-weight:900;color:#3a2614;margin:0 0 9px;line-height:1}
  .km-hpcard .hpwrap{display:block!important;height:40px;border-radius:13px;margin:0;width:100%;max-width:none}
  .km-hpcard .hpwrap #hpText{font-size:22px;font-weight:800}

  /* — множитель урона — */
  .km-dmg{position:absolute;left:50%;top:902px;transform:translateX(-50%);z-index:6;
    display:flex;align-items:center;gap:12px;padding:11px 26px;border-radius:18px;
    font-size:26px;font-weight:900;color:#3a2614;
    background:linear-gradient(180deg,#fff9e9,#fff4d8 60%,#f4dfb2);border:3px solid #c99345;
    box-shadow:0 4px 0 rgba(160,110,40,.35),inset 0 3px 0 rgba(255,255,255,.85)}
  .km-dmg b{font-size:30px;color:#c0392b}
  .km-dmg .km-sword{width:36px;height:36px;font-size:30px;display:inline-flex;align-items:center;justify-content:center}

  /* — нижний ряд 1: характеристики (слева) + клан (справа) — */
  .scol.right{position:absolute;left:18px;right:18px;top:980px;width:auto!important;
    display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch;z-index:6}
  .scol.right .goalp{display:none}              /* «Босс через» нет на референсе */
  .statsp{margin:0;padding:13px 16px;grid-column:auto!important;overflow:hidden;max-height:236px}
  .statsp .pp-title{font-size:20px;color:#218b2b;margin-bottom:4px}
  .statsp .srow{font-size:16px;padding:3px 0}.statsp .srow b{font-size:17px;color:#218b2b}
  .statsp .si{font-size:17px}
  .statsp #statsPanel .srow:nth-of-type(n+6){display:none}  /* на гл.экране — 5 ключевых строк (как в референсе) */
  .statsp #btnStatsMore{display:none}
  .clan-plq{display:none}
  .km-clan{margin:0;padding:14px 16px;display:flex;flex-direction:column;align-items:center;
    justify-content:center;text-align:center;gap:5px}
  .km-clan .km-shield{font-size:42px;line-height:1}
  .km-clan-title{font-size:25px;font-weight:900;color:#3a2614}
  .km-clan-sub{font-size:15px;color:#7c6038;line-height:1.2}
  .km-clan-btn{margin-top:5px;font-size:17px;padding:9px 16px}

  /* — нижний ряд 2: пропуск шахтёра + ежедневное задание — */
  .km-row2{position:absolute;left:18px;right:18px;top:1226px;display:grid;grid-template-columns:1fr 1fr;
    gap:14px;z-index:6}
  .km-pass,.km-daily{margin:0;padding:14px 16px;display:flex;align-items:center;gap:12px;
    background:linear-gradient(180deg,#fff9e9,#fff4d8 60%,#f4dfb2);border:3px solid #c99345;border-radius:20px;
    box-shadow:0 4px 0 rgba(160,110,40,.35),inset 0 3px 0 rgba(255,255,255,.85)}
  .km-pass-emblem,.km-pass-chest,.km-daily-reward{flex:none}
  .km-pass-emblem{width:52px;height:52px;font-size:42px;display:flex;align-items:center;justify-content:center}
  .km-pass-chest{width:44px;height:44px;font-size:36px;display:flex;align-items:center;justify-content:center}
  .km-pass-body,.km-daily-body{flex:1 1 auto;min-width:0}
  .km-pass-title,.km-daily-title{font-size:19px;font-weight:900;color:#3a2614;line-height:1.1;
    overflow:hidden;text-overflow:ellipsis}
  .km-pass-lvl{display:inline-block;min-width:26px;text-align:center;background:#c99345;color:#fff;
    border-radius:8px;padding:0 6px;font-size:17px;margin-left:4px}
  .km-daily-desc{font-size:16px;color:#7c6038;margin:3px 0;line-height:1.2;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .km-bar{height:16px;border-radius:9px;background:#e7cfa0;border:2px solid #b88a45;overflow:hidden;margin:6px 0 4px}
  .km-bar>i{display:block;height:100%;background:linear-gradient(90deg,#5bb24a,#3f9a33);border-radius:7px}
  .km-pass-meta,.km-daily-meta{font-size:16px;font-weight:800;color:#6e5530;display:flex;align-items:center;gap:6px}
  .km-daily-reward{display:flex;flex-direction:column;align-items:center;font-size:20px;font-weight:900;color:#218b2b;gap:2px}

  /* док рабочих скрыт на гл.экране (есть вкладка «Рабочие») */
  .dock{display:none}

  /* === НИЖНЕЕ МЕНЮ: 2 ряда (5+4) === */
  nav.tabbar{flex:none;z-index:6;display:grid!important;grid-template-columns:repeat(5,1fr);gap:12px;
    padding:14px 18px 22px;background:none;border:0;box-shadow:none;margin-top:auto}
  .tab{min-width:0;padding:14px 4px 12px;gap:7px;font-size:17px;font-weight:800;border-radius:18px;
    border:3px solid #c99345;background:linear-gradient(180deg,#fff9e9,#fff4d8 60%,#f4dfb2);
    box-shadow:0 4px 0 rgba(160,110,40,.35),inset 0 3px 0 rgba(255,255,255,.8)}
  .tab .ticon{font-size:44px}
  .tab .ticon.has-art{width:54px;height:54px}
  .tab span:not(.ticon){font-size:22px!important;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

  /* Контент вкладок — зажат между шапкой (статы) и нижним меню, со своим скроллом.
     База даёт inset:0 (весь #view = весь холст на мобиле) → шапка/нав перекрывали верх/низ. */
  #sections{top:290px;bottom:292px;left:0;right:0;overflow-y:auto!important;-webkit-overflow-scrolling:touch;
    padding:18px 18px 28px;border-radius:0}
  /* «Персонаж»: на десктопе это флекс «вписать в экран» по dvh; на масштаб-холсте dvh
     считается от реального вьюпорта и раздувается. На мобиле — обычная прокручиваемая секция. */
  #sections[data-sec="profile"]{display:block!important;overflow-y:auto!important;
    top:290px;bottom:292px;min-height:0;padding:18px 18px 28px}
  /* «Престиж» жёстко ставит inset:0 (специфичнее) → возвращаем в полосу со скроллом */
  #sections[data-sec="prestige"]{top:290px;bottom:292px;min-height:0;overflow-y:auto!important}
}