:root {
  --bg: #0b0609; --panel: #1a0e12; --panel2: #26161b; --edge: #4a2a2e; --edge2: #6e3a3a;
  --gold: #f5c04a; --blood: #c8202e; --blood2: #8a1220; --bone: #efe6d0; --muted: #a89a88;
  --green: #6fd13a; --blue: #6fd0ff; --red: #ff5a6a;
  --sa-top: 0px; --sa-bottom: 0px; --sa-left: 0px; --sa-right: 0px;
  --font: 'Oswald', 'Arial Narrow', Impact, system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--bone); overflow: hidden; overscroll-behavior: none; touch-action: manipulation; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
#app { position: fixed; inset: 0; height: 100dvh; background: radial-gradient(ellipse at 50% 0%, #2a1018 0%, #0b0609 60%); }
.hidden { display: none !important; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
img[data-icon] { width: 20px; height: 20px; display: block; pointer-events: none; }

/* ───── ИГРА ───── */
#game { position: absolute; inset: 0; display: flex; flex-direction: column; padding-left: var(--sa-left); padding-right: var(--sa-right); }
#hud { display: flex; align-items: center; gap: 6px; padding: calc(var(--sa-top) + 6px) 8px 6px; background: linear-gradient(#1c0e13, #12090c); border-bottom: 2px solid var(--edge); flex: none; }
#hud .spacer { flex: 1; }
.chip { position: relative; display: flex; align-items: center; gap: 5px; padding: 4px 9px 4px 6px; background: linear-gradient(#2a171c, #190d11); border: 1.5px solid var(--edge2); border-radius: 999px; font-family: var(--font); font-weight: 700; font-size: 17px; line-height: 1; overflow: hidden; min-height: 32px; }
.chip b { font-weight: 700; min-width: 1.4ch; }
.chip.gold b { color: var(--gold); }
.chip.gold span { color: #8fe36a; font-size: 12px; font-weight: 500; }
.chip.bump { animation: bump .35s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.14); border-color: var(--gold); } 100% { transform: scale(1); } }
.chip.hurt { animation: hurt .5s ease-out; }
@keyframes hurt { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-4px); background: #5a0a14; } 60% { transform: translateX(4px); } }
#tickbar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: linear-gradient(90deg, #f5c04a, #fff2a0); box-shadow: 0 0 6px #f5c04a; }
.ibtn { min-width: 36px; height: 34px; padding: 0 8px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(#32191f, #1c0e12); border: 1.5px solid var(--edge2); font-family: var(--font); font-weight: 700; font-size: 15px; }
.ibtn:active { transform: translateY(1px); filter: brightness(1.3); }
.ibtn.on { border-color: var(--gold); color: var(--gold); }

#stage { position: relative; flex: 1; min-height: 0; background: #0b0609; overflow: hidden; touch-action: none; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#bossbar { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); width: min(70%, 280px); text-align: center; font-family: var(--font); font-size: 13px; letter-spacing: .06em; color: #ff9aa5; pointer-events: none; }
#bossbar i { display: block; height: 8px; background: #1a0a0e; border: 1.5px solid var(--edge2); border-radius: 6px; overflow: hidden; margin-top: 2px; }
#bossbar u { display: block; height: 100%; width: 100%; background: linear-gradient(#ff4a5a, #a0101e); transition: width .15s; }


/* ───── ЭКРАНЫ ───── */
.screen { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; overflow-y: auto; padding: calc(var(--sa-top) + 14px) 16px calc(var(--sa-bottom) + 16px); background: radial-gradient(ellipse at 50% 20%, #3a1420 0%, #120709 55%, #0b0609 100%); }
.screen.overlay { background: rgba(8,3,5,.92); justify-content: center; z-index: 30; }      /* размытие подложки убрано: оно пересчитывалось на каждом кадре и грело телефон */
#help { z-index: 40; }
.logo { text-align: center; margin: 6px 0 10px; }
.logo small { display: block; font-size: 11px; letter-spacing: .22em; color: var(--muted); text-transform: uppercase; }
.logo h1 { margin: 6px 0 4px; font-family: var(--font); font-weight: 700; font-size: clamp(40px, 13vw, 64px); line-height: .95; letter-spacing: .04em; color: #e8e0cc; text-shadow: 0 2px 0 #5a0a14, 0 4px 0 #2a0408, 0 0 24px rgba(200,30,46,.65); background: linear-gradient(#fff4d8 0%, #e8d8b0 40%, #c8202e 85%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 0 #3a0610) drop-shadow(0 0 14px rgba(200,30,46,.6)); }
.logo p { margin: 0; color: var(--gold); font-family: var(--font); letter-spacing: .12em; font-size: 14px; }
.loadbar { width: min(80%, 300px); height: 10px; margin-top: 30px; border: 2px solid var(--edge2); border-radius: 8px; background: #1a0a0e; overflow: hidden; }
.loadbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8a1220, #ff4a5a); transition: width .1s; }
#loadtext { margin-top: 10px; font-size: 13px; color: var(--muted); }
#loading { justify-content: center; z-index: 50; }
.menu-body { width: min(100%, 440px); display: flex; flex-direction: column; gap: 8px; }
.sect-title { font-family: var(--font); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
#maps { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; scroll-snap-type: x mandatory; }
#maps::-webkit-scrollbar { display: none; }
.mapcard { flex: none; width: 150px; scroll-snap-align: center; border-radius: 12px; overflow: hidden; border: 2px solid var(--edge); background: #170a0e; text-align: left; }
.mapcard canvas { display: block; width: 100%; height: 124px; object-fit: cover; }
.mapcard .mn { padding: 5px 8px 0; font-family: var(--font); font-weight: 700; font-size: 15px; }
.mapcard .md { padding: 1px 8px 7px; font-size: 10.5px; color: var(--muted); line-height: 1.25; min-height: 42px; }
.mapcard .mb { padding: 0 8px 6px; font-family: var(--font); font-size: 12px; color: var(--gold); }
.mapcard.on { border-color: var(--gold); box-shadow: 0 0 14px rgba(245,192,74,.4); }
.seg { display: flex; gap: 6px; }
.seg button { flex: 1; padding: 8px 4px; border-radius: 10px; background: #1f1116; border: 2px solid var(--edge); font-family: var(--font); font-weight: 500; font-size: 15px; color: var(--muted); line-height: 1.1; }
.seg button small { display: block; font-size: 10px; font-weight: 400; opacity: .8; }
.seg button.on { border-color: var(--gold); color: var(--bone); background: linear-gradient(#4a2a1a, #2a1510); }
.btn { display: block; width: 100%; padding: 11px 14px; border-radius: 12px; font-family: var(--font); font-weight: 700; font-size: 16px; letter-spacing: .05em; text-transform: uppercase; background: linear-gradient(#3a1c24, #24121a); border: 2px solid var(--edge2); color: var(--bone); }
.btn:active { transform: translateY(1px); filter: brightness(1.25); }
.btn.big { padding: 15px 14px; font-size: 22px; background: linear-gradient(#d0283a, #7a0f1a); border-color: #ff7a8a; box-shadow: 0 4px 18px rgba(200,30,46,.55); color: #fff; }
.btn.danger { background: linear-gradient(#3a1018, #200a0e); border-color: #7a2a34; color: #ff9aa5; }
.btn.ghost { padding: 9px 6px; font-size: 12px; background: #1b0e13; }
.menu-row { display: flex; gap: 6px; }
.modal { width: min(100%, 400px); display: flex; flex-direction: column; gap: 9px; padding: 18px; border-radius: 16px; background: linear-gradient(#2a1219, #160a0e); border: 2px solid var(--edge2); box-shadow: 0 10px 40px rgba(0,0,0,.7); }
.modal.wide { width: min(100%, 460px); max-height: 100%; overflow-y: auto; }
.modal h2 { margin: 0 0 4px; font-family: var(--font); font-size: 30px; text-align: center; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); text-shadow: 0 2px 0 #3a0610; }
.modal ol { margin: 0 0 6px; padding-left: 20px; font-size: 13.5px; line-height: 1.4; color: #ddd0bc; }
.modal li { margin-bottom: 6px; } .modal li b { color: var(--gold); font-weight: 600; }
#end-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#end-stats div { padding: 8px; border-radius: 10px; background: #1c0e13; border: 1px solid var(--edge); text-align: center; font-size: 11px; color: var(--muted); }
#end-stats b { display: block; font-family: var(--font); font-size: 22px; color: var(--bone); font-weight: 700; }
.embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.embers::before, .embers::after { content: ''; position: absolute; left: 0; right: 0; bottom: -20px; height: 100%; background-image: radial-gradient(circle, #ff7a2a 0 1.5px, transparent 2px), radial-gradient(circle, #ffb04a 0 1px, transparent 1.5px); background-size: 90px 110px, 140px 170px; background-position: 10px 0, 60px 40px; opacity: .5; animation: rise 9s steps(90) infinite; }
.embers::after { background-size: 120px 140px, 70px 90px; animation-duration: 14s; animation-timing-function: steps(105); opacity: .35; }      /* угольки двигаются 10 раз в секунду: медленный подъём выглядит так же, а телефон не греется */
@keyframes rise { from { transform: translateY(20px); } to { transform: translateY(-140px); } }

@media (max-height: 720px) {
  #hud { padding-top: calc(var(--sa-top) + 4px); padding-bottom: 4px; } .chip { min-height: 30px; font-size: 16px; }
}
/* планшет: игра на весь экран (раньше на широких экранах была узкая полоса шириной 520 px) */

/* ───── мета: кузница, награды ───── */
.btn.gold { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; font-size: 14px; background: linear-gradient(#4a3a1a, #2a200e); border-color: #b8922a; color: #ffe9a8; }
.btn.gold .bi { width: 22px; height: 22px; } .btn.gold b { margin-left: 2px; padding: 1px 7px; border-radius: 999px; background: #0b0609aa; border: 1px solid #b8922a; font-size: 13px; }
.screen.sub { justify-content: flex-start; padding-top: 0; padding-left: 0; padding-right: 0; z-index: 25; }
.topbar { position: sticky; top: 0; z-index: 2; width: 100%; display: flex; align-items: center; gap: 10px; padding: calc(var(--sa-top) + 10px) 12px 10px; background: linear-gradient(#1c0e13, #12090c); border-bottom: 2px solid var(--edge); }
.topbar h2 { flex: 1; margin: 0; font-family: var(--font); font-size: 22px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.topbar .back { width: 38px; height: 36px; border-radius: 10px; background: #2a1219; border: 1.5px solid var(--edge2); font-size: 20px; }
.souls { display: flex; align-items: center; gap: 4px; padding: 3px 10px 3px 6px; border-radius: 999px; background: #10263a; border: 1.5px solid #3a7ad8; font-family: var(--font); font-weight: 700; font-size: 17px; color: #bfe8ff; }
.souls .si { width: 22px; height: 22px; }
.subbody { width: min(100%, 480px); padding: 8px 12px calc(var(--sa-bottom) + 24px); display: flex; flex-direction: column; gap: 8px; }
.hint { margin: 4px 0; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.frow, .arow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: linear-gradient(#2a171c, #190d11); border: 1.5px solid var(--edge); }
.frow.max { border-color: #2a5a2a; background: linear-gradient(#1c2a1c, #101a10); }
.fi { width: 40px; height: 40px; flex: none; } .fi.big { width: 54px; height: 54px; object-fit: contain; }
.ft { flex: 1; min-width: 0; } .fn { font-family: var(--font); font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.fd { font-size: 11.5px; color: var(--muted); line-height: 1.3; margin-top: 1px; }
.pips { display: inline-flex; gap: 3px; } .pips i { width: 8px; height: 8px; border-radius: 50%; background: #3a2a2e; border: 1px solid #5a3a3e; } .pips i.on { background: var(--gold); border-color: #fff2a0; box-shadow: 0 0 5px var(--gold); }
.fbuy { flex: none; min-width: 74px; padding: 8px 10px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 4px; background: linear-gradient(#2d6aa8, #173a62); border: 1.5px solid #6fd0ff; font-family: var(--font); font-weight: 700; font-size: 15px; color: #fff; }
.fbuy img { width: 18px; height: 18px; } .fbuy.poor { background: linear-gradient(#3a3a4a, #20202a); border-color: #4a4a5a; color: #8a8a9a; }
.frow.max .fbuy { background: transparent; border-color: #2a5a2a; color: #8fe36a; font-size: 12px; }
.arow.got { border-color: #b8922a; background: linear-gradient(#3a2e14, #1e1809); }
.arow:not(.got) .ai { filter: grayscale(1) brightness(.7); }
.ai { width: 40px; height: 40px; flex: none; } .at { flex: 1; min-width: 0; } .an { font-family: var(--font); font-weight: 700; font-size: 15.5px; } .ad { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.arow .bar { height: 6px; margin-top: 4px; border-radius: 4px; background: #1a0e12; overflow: hidden; border: 1px solid var(--edge); } .arow .bar u { display: block; height: 100%; background: linear-gradient(90deg, #b8922a, #ffe27a); }
.arow .bt { font-size: 10px; color: var(--muted); margin-top: 1px; }
.ar { flex: none; display: flex; align-items: center; gap: 2px; font-family: var(--font); font-weight: 700; font-size: 14px; color: #bfe8ff; } .ar img { width: 16px; height: 16px; }
#achtoast { position: absolute; left: 50%; top: 8px; transform: translate(-50%, -120%); display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 12px; background: linear-gradient(#4a3a1a, #1e1809); border: 2px solid var(--gold); box-shadow: 0 4px 20px rgba(245,192,74,.5); font-family: var(--font); font-size: 14px; z-index: 6; opacity: 0; transition: transform .35s, opacity .35s; pointer-events: none; white-space: nowrap; max-width: 96%; }
#achtoast.show { transform: translate(-50%, 0); opacity: 1; } #achtoast img { width: 30px; height: 30px; } #achtoast small { display: block; font-size: 11px; color: #bfe8ff; font-weight: 500; }
#end-souls { text-align: center; padding: 8px; border-radius: 10px; background: #10263a; border: 1.5px solid #3a7ad8; font-family: var(--font); font-size: 20px; color: #bfe8ff; display: flex; justify-content: center; align-items: center; gap: 6px; } #end-souls img { width: 24px; height: 24px; }
#end-ach { display: flex; flex-direction: column; gap: 4px; } #end-ach div { padding: 5px 10px; border-radius: 8px; background: #2e2410; border: 1px solid #b8922a; font-size: 12.5px; color: #ffe9a8; }

/* ═════════════════════ v2: новая навигация, улучшения, рейтинг ═════════════════════ */
.back::before { content: '‹'; font-size: 30px; line-height: 0.8; display: block; }
.topbar .spacer { flex: 1; }
#bossbar { top: 38px; }

/* чипы характеристик */
.ch { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 3px; border-radius: 999px; background: #26161b; border: 1px solid var(--edge2); font-family: var(--font); font-weight: 700; font-size: 13px; color: var(--bone); white-space: nowrap; }
.ch img { width: 18px; height: 18px; flex: none; }
.ch.up b { color: #8fe36a; } .ch.gold { color: var(--gold); } .ch.dim { opacity: .6; }

/* карточки: рисованные иконки */

/* панель выбранного здания */
.pipsl { display: inline-flex; gap: 3px; } .pipsl i { width: 10px; height: 10px; border-radius: 50%; background: #2a1c20; border: 1.5px solid #5a3a3e; } .pipsl i.on { background: var(--c, #ffd24a); border-color: #fff2a0; box-shadow: 0 0 6px var(--c, #ffd24a); }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.maxed { flex: 1; display: grid; place-items: center; color: var(--muted); font-family: var(--font); font-size: 15px; border: 2px dashed var(--edge); border-radius: 13px; }

/* ───── стартовый экран ───── */
#title { justify-content: center; gap: 46px; }
.logo.big h1 { font-size: clamp(54px, 18vw, 88px); }
.title-actions { width: min(100%, 360px); display: flex; flex-direction: column; gap: 26px; align-items: stretch; }
.iconrow { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ibig { position: relative; width: 64px; height: 64px; padding: 0; border-radius: 13px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); transition: transform .12s; }
.ibig:active { transform: scale(.93); } .ibig img.ii { width: 100%; height: 100%; display: block; border-radius: 12px; }
.ibig.off img.ii { filter: grayscale(1) brightness(.6); }
.ibig b { position: absolute; right: -5px; bottom: -5px; min-width: 22px; padding: 1px 6px; border-radius: 999px; background: #10263a; border: 1.5px solid #3a7ad8; font-family: var(--font); font-size: 12px; color: #bfe8ff; text-align: center; }
.iconrow.small { gap: 6px; } .iconrow.small .ibig { width: 42px; height: 42px; }
.iconrow.small .ibig b { font-size: 10px; min-width: 16px; padding: 0 4px; right: -3px; bottom: -3px; }
.btn.big { font-size: 24px; }

/* ───── карта кампании ───── */
#world { padding: 0; justify-content: flex-start; overflow: hidden; z-index: 22; }

/* ───── выбор сложности ───── */
.subbody.wide { width: min(100%, 520px); }
.trow, .brow { display: flex; align-items: center; gap: 9px; padding: 5px 9px; border-radius: 10px; background: #1c0e13; border: 1px solid var(--edge); }
.rk { width: 26px; text-align: center; font-family: var(--font); font-weight: 700; font-size: 15px; color: var(--muted); flex: none; }
.rk.r1 { color: #ffd24a; } .rk.r2 { color: #d8dde6; } .rk.r3 { color: #e8a060; }
.av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #3a2a30; display: grid; place-items: center; font-family: var(--font); font-weight: 700; font-size: 14px; color: #fff; flex: none; border: 1.5px solid var(--edge2); overflow: hidden; }
.nm { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nm small { color: var(--muted); margin-left: 4px; }
.sc { font-family: var(--font); font-weight: 700; font-size: 15px; color: #ffe9a8; flex: none; }
.trow.empty { opacity: .35; justify-content: center; font-size: 12px; min-height: 36px; }
.trow.me, .brow.me { border-color: var(--gold); background: linear-gradient(#3a2a12, #1c1408); }

/* ───── рейтинг ───── */
#boardlist { display: flex; flex-direction: column; gap: 5px; padding-bottom: 80px; }
.brow { padding: 7px 10px; }
.brow .av { width: 34px; height: 34px; } .brow .nm { font-size: 14px; }
#bd-me { position: sticky; bottom: 0; width: min(100%, 520px); margin: 0 auto; padding: 8px 12px calc(8px + var(--sa-bottom)); background: linear-gradient(transparent, #0b0609 40%); } #bd-me .brow { border-color: var(--gold); background: linear-gradient(#3a2a12, #1c1408); }
.empty-state { text-align: center; padding: 40px 10px; color: var(--muted); font-family: var(--font); font-size: 16px; } .empty-state img { width: 64px; height: 64px; opacity: .5; display: block; margin: 0 auto 8px; }
.skel { height: 36px; border-radius: 10px; background: linear-gradient(90deg, #1c0e13, #2a1a20, #1c0e13); background-size: 200% 100%; animation: skel 1.2s linear 6; } @keyframes skel { to { background-position: -200% 0; } }

/* ───── конец партии ───── */
#end-score { text-align: center; font-family: var(--font); font-weight: 700; font-size: 52px; line-height: 1; color: #ffe9a8; text-shadow: 0 3px 0 #5a3a08, 0 0 18px rgba(245,192,74,.5); display: flex; justify-content: center; align-items: center; gap: 8px; } #end-score img { width: 40px; height: 40px; }
#end-stats { grid-template-columns: repeat(3, 1fr); } #end-stats div { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0; } #end-stats img { width: 28px; height: 28px; } #end-stats b { font-size: 21px; }
#end-rank { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; border-radius: 10px; background: linear-gradient(#3a2a12, #1c1408); border: 1.5px solid #b8922a; font-family: var(--font); font-weight: 700; font-size: 20px; color: #ffe9a8; } #end-rank img { width: 28px; height: 28px; }
.modal .iconrow { margin: 2px 0; }

#diffsheet { z-index: 25; } #forge, #achs { z-index: 27; } #board { z-index: 28; } #pausemenu { z-index: 30; } #endmenu { z-index: 31; } #title { z-index: 20; }
.fi { width: 52px; height: 52px; border-radius: 10px; } .ai { width: 48px; height: 48px; border-radius: 9px; } .arow:not(.got) .ai { filter: none; }
.screen.sub { overflow-y: auto; }
#title .logo.big { margin-top: 0; }

.logo h1 { text-shadow: none !important; }

.ch.pos b { color: #8fe36a; }


/* ═════════ v3: логотип, каменные кнопки, готический шрифт ═════════ */
:root { --gothic: 'Playfair Display SC', Georgia, 'Times New Roman', serif; --stone1: #4b4f52; --stone2: #2c2f31; --stone3: #181a1c; --slime: #7cff3c; --slime2: #2e9a14; }
.modal h2, .topbar h2, .sect-title, .dname, #bossname { font-family: var(--gothic); font-weight: 400; }
.logo-img { display: block; width: min(86vw, 380px); height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 0 22px rgba(110,255,60,.22)); pointer-events: none; }
.logo-img.big { width: min(92vw, 420px); }
@keyframes logoPulse { 0%,100% { filter: drop-shadow(0 0 16px rgba(110,255,60,.18)); } 50% { filter: drop-shadow(0 0 34px rgba(110,255,60,.42)); } }
#loading .logo-img { width: min(70vw, 300px); }
#title { justify-content: flex-start; gap: 6px; padding-top: calc(var(--sa-top) + 4px); }
#title .logo-img { margin: 0 0 -26px; }
.title-actions { width: min(100%, 340px); display: flex; flex-direction: column; gap: 11px; align-items: stretch; position: relative; z-index: 1; }
.stn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stn-grid .stn { min-width: 0; padding: 8px 6px; font-size: 17px; gap: 6px; }

/* каменная плита: фаска, руны, зелёная слизь по краю — по мотивам логотипа */
.stn, .btn { position: relative; width: 100%; min-height: 54px; padding: 10px 16px; border: 0; border-radius: 7px; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--gothic); font-weight: 400; font-size: 21px; letter-spacing: .04em; text-transform: uppercase; color: #e3e6d8; text-align: center; line-height: 1.05;
  background: linear-gradient(180deg, var(--stone1) 0%, var(--stone2) 52%, var(--stone3) 100%), #222;
  box-shadow: inset 0 0 0 2px #070809, inset 0 0 0 3px #7b8086, inset 0 7px 9px rgba(255,255,255,.07), inset 0 -8px 12px rgba(0,0,0,.55), 0 5px 14px rgba(0,0,0,.75);
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(120,255,70,.28); transition: transform .1s, filter .1s; overflow: visible; }
.stn:active, .btn:active { transform: translateY(2px) scale(.99); filter: brightness(1.25); }
.stn.primary, .btn.big { min-height: 66px; font-size: 27px; color: #f2ffe4; background: linear-gradient(180deg, #5e6a52 0%, #323a2c 52%, #1b2118 100%);
  box-shadow: inset 0 0 0 2px #060807, inset 0 0 0 3px #9cc47c, inset 0 7px 10px rgba(200,255,160,.12), inset 0 -8px 12px rgba(0,0,0,.55), 0 0 22px rgba(110,255,60,.32), 0 6px 16px rgba(0,0,0,.8); text-shadow: 0 2px 0 #000, 0 0 14px rgba(140,255,80,.7); }
.stn.ranked { min-height: 66px; font-size: 22px; color: #f0e6ff; background: linear-gradient(180deg, #5b4a66 0%, #33293c 52%, #1a1420 100%);
  box-shadow: inset 0 0 0 2px #070508, inset 0 0 0 3px #b08ad8, inset 0 7px 10px rgba(220,180,255,.12), inset 0 -8px 12px rgba(0,0,0,.55), 0 0 20px rgba(170,110,255,.3), 0 6px 16px rgba(0,0,0,.8); text-shadow: 0 2px 0 #000, 0 0 14px rgba(200,140,255,.6); }
.stn.ranked .tk { width: 44px; height: 44px; margin: -6px 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.8)); border-radius: 5px; }
.stn.small { min-height: 42px; font-size: 14px; padding: 6px 8px; }
.stn.small.off { filter: grayscale(.8) brightness(.7); }
.stn b, .btn b { font-family: var(--font); font-size: 14px; padding: 1px 8px; border-radius: 999px; background: rgba(0,0,0,.55); border: 1px solid rgba(160,255,110,.5); color: #b6ff8a; text-shadow: none; }
.btn.danger { color: #ffb0a8; background: linear-gradient(180deg, #5a3030, #331a1a 52%, #1c0e0e); box-shadow: inset 0 0 0 2px #080404, inset 0 0 0 3px #a25a5a, inset 0 7px 9px rgba(255,160,160,.08), inset 0 -8px 12px rgba(0,0,0,.55), 0 5px 14px rgba(0,0,0,.75); }
.btn.ghost { min-height: 44px; font-size: 14px; padding: 6px; }
.btn.gold { background: linear-gradient(180deg, #675a37, #3a3220 52%, #1e190e); }
.modal { background: linear-gradient(#25282a, #131517); border: 2px solid #5b6064; box-shadow: 0 0 0 2px #060707, 0 10px 40px rgba(0,0,0,.85); }
.modal h2 { color: #d8f0c0; text-shadow: 0 2px 0 #000, 0 0 14px rgba(120,255,70,.45); font-size: 27px; }
.modal .btn + .btn, .modal .btn { margin-bottom: 2px; }
.topbar h2 { font-size: 19px; color: #d8f0c0; text-shadow: 0 2px 0 #000; letter-spacing: .04em; }

/* ───── HUD рейтингового забега и «все волны» ───── */
body.ranked #bossbar { top: 64px; }

/* ───── карта кампании (рисованная карта мира, двигается пальцем) ───── */
#worldscroll { width: 100%; flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; background: #05090d; position: relative; touch-action: pan-x pan-y; }
#worldmap { position: relative; }
#worldimg, #worldcv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#worldimg { filter: saturate(1.06) contrast(1.04); }
.sec { position: absolute; transform: translate(-50%, -50%); padding: 4px 14px 5px; font-family: var(--gothic); font-size: 15px; letter-spacing: .05em; color: #e9f5d8; white-space: nowrap; pointer-events: none;
  background: linear-gradient(#34383a, #181a1b); border: 2px solid #6d7378; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 4px 12px rgba(0,0,0,.75); text-shadow: 0 1px 0 #000; }
.node { position: absolute; width: 84px; transform: translate(-50%, -46%); display: flex; flex-direction: column; align-items: center; padding: 0; z-index: 2; }
.node img.ni { width: 40px; height: auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.75)); transition: transform .15s, filter .15s; }
.node.cleared img.ni { width: 54px; margin-top: -4px; margin-bottom: -4px; }
.node.tutnode img.ni { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 0 1.5px #060606, 0 2px 5px rgba(0,0,0,.7); filter: none; }
.node .nl { margin-top: 1px; font-family: var(--font); font-weight: 700; font-size: 9.5px; color: #f4f1e4; padding: 0 5px; border-radius: 999px; background: rgba(6,8,8,.62); text-shadow: 0 1px 1px #000; text-align: center; line-height: 1.3; max-width: 84px; }
.node.locked img.ni { opacity: .9; }
.node.avail img.ni { filter: drop-shadow(0 0 5px rgba(255,214,90,.85)) drop-shadow(0 2px 3px rgba(0,0,0,.75)); }      /* доступный рубеж: тонкое золотое кольцо, без постоянной анимации */
.node.sel img.ni { transform: scale(1.2); filter: drop-shadow(0 0 9px #ffe08a) drop-shadow(0 2px 3px rgba(0,0,0,.75)); }
.node:active img.ni { transform: scale(.92); }
.node.shake { animation: shake .3s; }

/* ───── выбор сложности: карусель ───── */
:root { --cw: min(84vw, 330px); }
#diffsheet { padding: 0; }
#dwrap { position: relative; flex: 1; min-height: 0; width: 100%; }
#dcar { height: 100%; display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 10px calc((100% - var(--cw)) / 2) 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
#dcar::-webkit-scrollbar { display: none; }
.dcard { flex: 0 0 var(--cw); height: 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; flex-direction: column; position: relative; border-radius: 12px; overflow: hidden; background: linear-gradient(#222628, #0f1112);
  border: 3px solid var(--c); box-shadow: 0 0 0 2px #040404, 0 0 12px rgba(0,0,0,.8); opacity: .62; transform: scale(.93); transition: transform .22s, opacity .22s, box-shadow .22s; }
.dcard.cur { opacity: 1; transform: none; box-shadow: 0 0 0 2px #040404, 0 0 26px var(--c); }
.dport { position: relative; flex: none; height: 38%; min-height: 150px; max-height: 270px; background-size: cover; background-position: center 20%; }
.dport::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 30%, rgba(8,9,10,.92) 100%); }
.dname { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 8px; line-height: 1; font-size: 31px; letter-spacing: .03em; text-transform: uppercase; color: var(--c); text-shadow: 0 2px 0 #000, 0 0 18px #000, 0 0 10px var(--c); }
.dskulls { position: absolute; z-index: 1; right: 8px; top: 8px; display: flex; gap: 2px; } .dskulls img { width: 20px; height: 20px; filter: drop-shadow(0 1px 3px #000); } .dskulls img.off { opacity: .22; }
.dbest { position: absolute; z-index: 1; left: 8px; top: 8px; display: flex; align-items: center; gap: 4px; padding: 2px 9px 2px 4px; border-radius: 999px; background: rgba(8,8,10,.75); border: 1px solid #c9a24a; font-family: var(--font); font-weight: 700; font-size: 14px; color: #ffe9a8; }
.dbest img { width: 17px; height: 17px; }
.dbody { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 12px 4px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.dsub { margin: 6px 0 3px; font-family: var(--gothic); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #9aa39a; }
.mrow { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.mrow img { width: 24px; height: 24px; flex: none; margin-top: 1px; }
.mrow .mt { flex: 1; min-width: 0; font-size: 14px; line-height: 1.2; color: #e6dfcc; } .mrow .mt small { display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.25; color: #9d968a; }
.mrow b { flex: none; font-family: var(--font); font-weight: 700; font-size: 16px; padding-top: 1px; }
.mrow.bad b { color: #ff8a78; } .mrow.good b { color: #94ea6c; } .mrow.neutral b { color: #ffd77a; }
.dtop { display: flex; flex-direction: column; gap: 4px; }
.dfoot { flex: none; display: flex; gap: 8px; padding: 8px 10px 10px; background: linear-gradient(rgba(15,17,18,0), #0f1112 28%); }
.dfoot .btn { min-height: 52px; font-size: 20px; } .dfoot .btn.play { flex: 3; } .dfoot .btn.board { flex: 1; min-height: 52px; }
.dcard.locked { --c: #7c7f84 !important; } .dcard.locked .dport { filter: grayscale(1) brightness(.5); } .dcard.locked .dname { color: #9a9ca2; text-shadow: 0 2px 0 #000; }
.dlock { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 38%; min-height: 150px; max-height: 270px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 16px; text-align: center; }
.dlock span { font-family: var(--gothic); font-size: 13px; line-height: 1.2; color: #d8d8dc; text-shadow: 0 1px 3px #000, 0 0 8px #000; }
.dlock img { width: 84px; height: 84px; filter: drop-shadow(0 4px 8px #000); }
.dcard.locked .btn.play { filter: grayscale(1) brightness(.6); }
.dcard.hc.cur { box-shadow: 0 0 0 2px #040404, 0 0 26px rgba(255,20,40,.8); }
#ddots { flex: none; display: flex; justify-content: center; gap: 9px; padding: 4px 0 calc(var(--sa-bottom) + 10px); }
#ddots i { width: 9px; height: 9px; border-radius: 50%; background: #3a3d3f; box-shadow: 0 0 0 1px #000; transition: .2s; } #ddots i.on { background: var(--c, #fff); box-shadow: 0 0 8px var(--c, #fff), 0 0 0 1px #000; transform: scale(1.3); }
.dnav { position: absolute; top: 40%; z-index: 4; width: 40px; height: 56px; border-radius: 8px; font-family: var(--gothic); font-size: 28px; line-height: 1; color: #e6f0d8; background: linear-gradient(#4b4f52, #1c1e20); border: 2px solid #7b8086; box-shadow: 0 3px 10px rgba(0,0,0,.7); } .dnav.l { left: 4px; } .dnav.r { right: 4px; }
.dnav.l::before { content: '‹'; } .dnav.r::before { content: '›'; } .dnav[disabled] { opacity: .25; }
@media (hover: none) { .dnav { display: none; } }

/* ───── рейтинговый забег ───── */
.rk-hero { display: flex; align-items: center; gap: 14px; padding: 10px 6px 4px; }
.rk-hero .tk { width: 96px; height: 96px; border-radius: 10px; flex: none; filter: drop-shadow(0 4px 10px rgba(170,110,255,.55)); }
.rk-hero h3 { margin: 0 0 4px; font-family: var(--gothic); font-weight: 400; font-size: 21px; line-height: 1.1; color: #e8d6ff; text-shadow: 0 2px 0 #000, 0 0 14px rgba(190,130,255,.6); }
.rk-hero p { margin: 0; font-size: 13.5px; line-height: 1.3; color: #bfb4cc; }
.rk-rules { display: flex; flex-direction: column; padding: 2px 8px; background: linear-gradient(#202326, #111314); border: 2px solid #565b60; border-radius: 10px; }
.rk-rules .mrow:last-child { border-bottom: 0; }
.rk-top { display: flex; flex-direction: column; gap: 4px; }
.rk-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.mrow.tokrow b { color: #d8b6ff; }

/* ───── настройки ───── */
#settings { z-index: 32; }
#settings .subbody { gap: 8px; }
.srow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 58px; background: linear-gradient(#202326, #111314); border: 2px solid #4c5156; border-radius: 10px; }
.srow .lb { flex: 1; min-width: 0; font-size: 15px; line-height: 1.2; color: #ece6d4; } .srow .lb small { display: block; margin-top: 2px; font-size: 11.5px; color: #9d968a; }
.tgl { position: relative; flex: none; width: 56px; height: 30px; border-radius: 999px; background: #25282a; border: 2px solid #626870; transition: background .15s, border-color .15s; }
.tgl::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #8d949b; transition: left .15s, background .15s; }
.tgl.on { background: #34502c; border-color: #8ac468; } .tgl.on::after { left: 28px; background: #e2f6cc; }
.rng { flex: none; width: 140px; height: 28px; accent-color: #8ac468; background: transparent; }
.seg { flex: none; display: flex; border: 2px solid #626870; border-radius: 8px; overflow: hidden; }
.seg button { padding: 7px 9px; font-size: 12.5px; color: #c8c4b8; background: #1a1c1e; border-left: 1px solid #3a3d40; } .seg button:first-child { border-left: 0; }
.seg button.on { background: #3a4d32; color: #eef8de; }
.srow .btn { margin: 0; }

.csep { flex: none; width: 2px; margin: 10px 4px; border-radius: 2px; background: linear-gradient(transparent, #7a5a60, transparent); }

.rk-best { padding: 10px 12px; margin-bottom: 4px; border-radius: 12px; background: linear-gradient(#3a2d4a, #1d1528); border: 2px solid #b08ad8; box-shadow: 0 0 18px rgba(170,110,255,.25); }
.rk-best .bt { font-family: var(--gothic); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: #e8d6ff; margin-bottom: 6px; }
.rk-best .bg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.rk-best .bg div { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border-radius: 9px; background: rgba(0,0,0,.35); }
.rk-best .bg img { width: 26px; height: 26px; border-radius: 4px; } .rk-best .bg b { font-family: var(--font); font-size: 20px; color: #fff; line-height: 1.1; } .rk-best .bg small { font-size: 10.5px; color: #b9a9cf; }
.rk-best .bf, .rk-best .br { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 7px; font-size: 13px; color: #d4c4ea; } .rk-best .bf img, .rk-best .br img { width: 20px; height: 20px; } .rk-best b { color: #ffe9a8; }

.stn .bi { width: 34px; height: 34px; flex: none; margin: -5px 0; border-radius: 5px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
.stn-grid .stn .bi { width: 28px; height: 28px; margin: -3px 0; }


/* ═════════ v4: каменные плиты — кнопки с высеченным текстом, плиты в цепях ═════════ */
.stn, .btn { min-height: 50px; padding: 8px 14px; font-size: 19px; letter-spacing: .07em; border-radius: 5px; color: #191a18;
  background: linear-gradient(rgba(255,255,255,.14), rgba(0,0,0,.34)), url(../img/ui/stone.webp) center / 170px;
  text-shadow: 0 1.5px 0 rgba(255,255,255,.38), 0 -1px 0 rgba(0,0,0,.75);
  box-shadow: inset 0 0 0 2px #0a0b0b, inset 0 0 0 3px rgba(200,200,188,.32), inset 0 5px 8px rgba(255,255,255,.16), inset 0 -7px 10px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.7); }
.stn.primary, .btn.big { min-height: 50px; font-size: 20px; color: #0f200c;
  background: linear-gradient(rgba(150,230,110,.30), rgba(20,60,10,.40)), url(../img/ui/stone.webp) center / 170px;
  box-shadow: inset 0 0 0 2px #060806, inset 0 0 0 3px rgba(170,230,130,.5), inset 0 5px 8px rgba(255,255,255,.14), inset 0 -7px 10px rgba(0,0,0,.5), 0 0 18px rgba(110,255,60,.3), 0 4px 10px rgba(0,0,0,.7);
  text-shadow: 0 1.5px 0 rgba(220,255,200,.45), 0 -1px 0 rgba(0,0,0,.7); }
.stn.ranked { min-height: 50px; font-size: 19px; color: #1c1028;
  background: linear-gradient(rgba(190,140,255,.30), rgba(50,20,80,.42)), url(../img/ui/stone.webp) center / 170px;
  box-shadow: inset 0 0 0 2px #070508, inset 0 0 0 3px rgba(200,160,255,.5), inset 0 5px 8px rgba(255,255,255,.14), inset 0 -7px 10px rgba(0,0,0,.5), 0 0 16px rgba(170,110,255,.28), 0 4px 10px rgba(0,0,0,.7);
  text-shadow: 0 1.5px 0 rgba(240,220,255,.45), 0 -1px 0 rgba(0,0,0,.7); }
.stn.ranked span { font-size: 16.5px; white-space: nowrap; }
.stn.ranked .tk { width: 38px; height: 38px; margin: -6px 0; border-radius: 4px; }
.btn.danger { color: #2a0e0a; background: linear-gradient(rgba(230,110,90,.28), rgba(80,10,5,.42)), url(../img/ui/stone.webp) center / 170px; }
.btn.gold { background: linear-gradient(rgba(240,200,90,.28), rgba(80,50,5,.4)), url(../img/ui/stone.webp) center / 170px; }
.btn.ghost { min-height: 40px; font-size: 14px; padding: 5px 8px; }
.btn b, .stn b { color: #d6ffb0; background: rgba(0,0,0,.6); }
.title-actions { gap: 9px; width: min(100%, 300px); }
#title { gap: 4px; }
.modal { background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.55)), url(../img/ui/stone.webp) center / 190px; border: 3px solid #1a1b1c; box-shadow: 0 0 0 2px #7b7f84, 0 10px 40px rgba(0,0,0,.85); }
.modal h2 { color: #1b1c1a; text-shadow: 0 1.5px 0 rgba(255,255,255,.35), 0 -1px 0 rgba(0,0,0,.7); }

/* плита в цепях (карточки сложности, рейтинговый забег) */
.slab, .dcard { border: 24px solid transparent; border-image: url(../img/ui/chain.webp) 48 round; border-radius: 0;
  background: linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,.30)), url(../img/ui/stone.webp) 0 0 / 190px; background-clip: padding-box;
  box-shadow: 0 0 26px var(--c, rgba(0,0,0,.6)); }
.dcard { opacity: .72; transform: scale(.94); } .dcard.cur { box-shadow: 0 0 34px var(--c); }
.slab { padding: 6px 10px 12px; margin: 2px 0 12px; }
.arch { position: relative; flex: none; width: 140px; height: 140px; margin: -6px auto 0; border-radius: 70px 70px 6px 6px; overflow: hidden; border: 5px solid #26282a; background: #000;
  box-shadow: 0 0 0 2px #8a8e94, 0 0 22px var(--c, #fff), inset 0 0 14px rgba(0,0,0,.85); }
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.slab .arch img { object-fit: contain; padding: 14px; background: radial-gradient(#4a2a60, #0c0610); }
.dport { position: relative; flex: none; height: auto; min-height: 0; max-height: none; background: none; padding: 4px 0 0; display: flex; flex-direction: column; align-items: center; }
.dport::after { display: none; }
.dname { position: static; margin-top: 8px; font-size: 25px; color: var(--c); filter: brightness(.45) saturate(1.5); text-align: center; text-shadow: 0 1.5px 0 rgba(255,255,255,.4), 0 -1px 0 rgba(0,0,0,.9); }
.dskulls { right: 2px; top: 2px; } .dskulls img { width: 18px; height: 18px; filter: drop-shadow(0 1px 1px #000); }
.dbest { left: 2px; top: 2px; background: rgba(8,8,10,.6); }
.dbody { padding: 4px 2px; }
.dlock { top: 22px; height: 150px; min-height: 0; max-height: none; background: rgba(0,0,0,.35); } .dlock span { font-size: 12px; }
.dcard.locked .dport .arch img { filter: grayscale(1) brightness(.45); } .dcard.locked .dport { filter: none; } .dcard.locked { --c: #8a8d92 !important; }
.dfoot { background: none; padding: 6px 2px 2px; }
.dfoot .btn { min-height: 46px; }
:root { --cw: min(90vw, 350px); }
.carve { margin: 6px 0 2px; text-align: center; font-family: var(--gothic); font-weight: 400; font-size: 22px; color: #181a18; text-shadow: 0 1.5px 0 rgba(255,255,255,.38), 0 -1px 0 rgba(0,0,0,.7); }
.carvep { margin: 0 6px 8px; text-align: center; font-size: 13.5px; line-height: 1.3; font-weight: 500; color: #1a1b18; text-shadow: 0 1px 0 rgba(255,255,255,.28); }
.slab .mrow, .dcard .mrow { border-bottom: 1px solid rgba(0,0,0,.38); box-shadow: 0 1px 0 rgba(255,255,255,.12); }
.slab .mrow .mt, .dcard .mrow .mt { color: #0d0e0c; font-weight: 600; text-shadow: 0 1px 0 rgba(255,255,255,.3); } .slab .mrow .mt small, .dcard .mrow .mt small { color: #1d1e1b; font-weight: 500; text-shadow: 0 1px 0 rgba(255,255,255,.22); }
.slab .mrow.bad b, .dcard .mrow.bad b { color: #7a140d; } .slab .mrow.good b, .dcard .mrow.good b { color: #1b4d0e; } .slab .mrow.neutral b, .dcard .mrow.neutral b { color: #4b3507; } .slab .mrow.tokrow b { color: #3c1a66; }
.slab .mrow b, .dcard .mrow b { text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.slab .dsub, .dcard .dsub { color: #2a2c28; text-shadow: 0 1px 0 rgba(255,255,255,.3); }
.slab .rk-rules { background: none; border: 0; padding: 0 2px; border-radius: 0; }
.slab .trow { background: rgba(0,0,0,.28); border-color: rgba(0,0,0,.5); }
.slab .rk-best { background: rgba(10,8,14,.55); border: 2px solid #1a1a1c; box-shadow: inset 0 0 12px rgba(0,0,0,.6); margin: 0 2px 8px; }
.slab .rk-actions, .rk-actions { margin-top: 2px; }
.dcard .mrow img, .slab .mrow img { filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }

.fbuys { flex: none; display: flex; flex-direction: column; gap: 5px; } .fbuys .fbuy { min-width: 74px; padding: 5px 8px; }
.fbuy.gem { background: linear-gradient(#8a4ab8, #44206a); border-color: #c89aff; } .fbuy.gem.poor { background: linear-gradient(#3a3a4a, #20202a); border-color: #4a4a5a; }
.gemchip { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #3a2358; border: 1.5px solid #b08ad8; }
.gemchip img { width: 20px; height: 20px; }

/* ═════════ v5: карта на весь экран, слоты, блок здания, окно улучшения, подготовка, итог уровня ═════════ */
:root { --slab: linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.66)), url(../img/ui/stone.webp) center / 190px; --slabline: 0 0 0 2px #0b0c0c, 0 0 0 4px #6d7378; }
#stage { flex: 1; min-height: 0; }
#bossbar { top: 44px; }

/* док: кнопка строительства снизу сбоку, по нажатию выдвигаются слоты */
#dock { position: absolute; right: 10px; bottom: calc(12px + var(--sa-bottom)); z-index: 6; }
#dock.hide { display: none; }
#slotbtn { position: relative; width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; background: var(--slab); box-shadow: var(--slabline), 0 6px 16px rgba(0,0,0,.8); transition: transform .12s, filter .12s; }
#slotbtn:active { transform: scale(.94); filter: brightness(1.2); }
#slotbtn .sb-ic { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.8)); pointer-events: none; }
#slotbtn .sb-n { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 0 8px; border-radius: 999px; background: #0b0609; border: 1.5px solid var(--gold); font-family: var(--font); font-style: normal; font-weight: 700; font-size: 13px; color: var(--gold); line-height: 17px; }
#slotbtn .sb-n:empty { display: none; }
#slotbtn.armed { box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 4px var(--gold), 0 0 18px rgba(245,192,74,.6), 0 6px 16px rgba(0,0,0,.8); }
#slotbtn.poor .sb-n { color: var(--red); border-color: var(--red); }
#dock.open #slotbtn { filter: brightness(1.25); }
#slots { --cw: clamp(38px, calc((100vw - 96px - (var(--n, 2) - 1) * 8px) / var(--n, 2)), 60px); position: absolute; right: 76px; bottom: 0; display: flex; align-items: flex-end; gap: 8px; opacity: 0; transform: translateX(26px) scale(.9); transform-origin: right bottom; pointer-events: none; transition: opacity .16s, transform .18s cubic-bezier(.2,.9,.3,1.2); }
#dock.open #slots { opacity: 1; transform: none; pointer-events: auto; }
.card { position: relative; flex: none; width: var(--cw); padding: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: none; box-shadow: none; }
.card .ci { width: 100%; height: var(--cw); object-fit: cover; border-radius: 11px; pointer-events: none; background: var(--slab); box-shadow: var(--slabline), 0 5px 12px rgba(0,0,0,.75); }
.card .cc { display: flex; align-items: center; justify-content: center; gap: 2px; font-family: var(--font); font-weight: 700; font-size: 13px; color: var(--gold); line-height: 1; text-shadow: 0 1px 2px #000, 0 0 4px rgba(0,0,0,.8); } .card .cc img { width: 13px; height: 13px; }
.card .cs { position: absolute; top: 3px; right: 4px; font-family: var(--font); font-size: 10px; color: #8fe36a; line-height: 1; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.card.on .ci { box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 4px var(--gold), 0 0 14px rgba(245,192,74,.55); }
.card.poor .cc { color: var(--red); } .card.poor .ci { filter: grayscale(.6) brightness(.8); }
.card.locked { opacity: .5; }
#dinfo { position: absolute; right: 0; bottom: 78px; width: max-content; max-width: calc(100vw - 20px); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 5px 10px; border-radius: 12px; background: var(--slab); box-shadow: var(--slabline), 0 5px 14px rgba(0,0,0,.7); }
#dinfo b { font-family: var(--gothic); font-weight: 400; font-size: 14px; color: #ecece0; text-shadow: 0 1px 2px #000; }
#dinfo .dch { display: flex; flex-wrap: wrap; gap: 4px; }

/* блок выбранного здания: снизу по центру */
#sel { position: absolute; left: 50%; bottom: calc(14px + var(--sa-bottom)); transform: translateX(-50%); z-index: 7; width: min(310px, calc(100% - 20px)); padding: 8px 10px 10px; border-radius: 14px; background: var(--slab); box-shadow: var(--slabline), 0 10px 26px rgba(0,0,0,.85); display: flex; flex-direction: column; gap: 6px; animation: selin .16s ease-out; }
#sel.top { bottom: auto; top: 96px; }
@keyframes selin { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
#sel .shead { display: flex; align-items: center; gap: 9px; }
#sel .shead .ic { width: 44px; height: 44px; border-radius: 9px; object-fit: contain; flex: none; }
#sel .title { flex: 1; font-family: var(--gothic); font-size: 16px; line-height: 1.1; color: #ecece0; text-shadow: 0 1px 2px #000; }
#sel .title small { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
#sel .sstats { display: flex; flex-wrap: wrap; gap: 4px; }
#sel .sacts { display: flex; gap: 8px; justify-content: center; margin-top: 2px; }
.abtn { position: relative; width: 62px; height: 58px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: rgba(0,0,0,.55); box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px #5a6066; font-family: var(--font); font-weight: 700; color: #e8e8dc; transition: transform .1s, filter .1s; }
.abtn:active { transform: scale(.94); filter: brightness(1.25); }
.abtn .ai { width: 34px; height: 34px; border-radius: 8px; pointer-events: none; }
.abtn .ap { display: flex; align-items: center; gap: 2px; font-size: 14px; color: var(--gold); line-height: 1; } .abtn .ap img { width: 14px; height: 14px; }
.abtn.up { box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px #6ec24a, 0 0 12px rgba(110,255,60,.35); }
.abtn.up.poor { box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px #6a4a4a; } .abtn.up.poor .ai { filter: grayscale(.6) brightness(.8); } .abtn.up.poor .ap { color: var(--red); }
.abtn.up.max { box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px #b8922a; pointer-events: none; }
.abtn.sell.sure { background: #6a1218; box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px #ff5a6a, 0 0 14px rgba(255,60,80,.6); animation: shake .35s; }
.abtn.mode { width: 54px; font-size: 14px; } .abtn.x { width: 44px; font-size: 20px; color: var(--muted); }

/* окно улучшения: пауза, размытый фон, до двух табличек */
#upmodal { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: calc(var(--sa-top) + 12px) 12px calc(var(--sa-bottom) + 12px); background: rgba(8,3,6,.5); animation: fadein .18s ease-out; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.um-box { position: relative; width: min(100%, 410px); display: flex; flex-direction: column; gap: 12px; }
.um-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; font-family: var(--gothic); font-size: 21px; color: #f0ecdc; text-shadow: 0 2px 4px #000; }
.um-gold { display: flex; align-items: center; gap: 4px; padding: 2px 10px 2px 6px; border-radius: 999px; background: rgba(10,6,8,.8); border: 1.5px solid var(--edge2); font-family: var(--font); font-weight: 700; font-size: 17px; color: var(--gold); } .um-gold img { width: 20px; height: 20px; }
.um-x { position: absolute; top: -34px; right: -2px; width: 36px; height: 30px; border-radius: 9px; background: var(--slab); box-shadow: var(--slabline); font-size: 15px; color: #e8e8dc; display: none; }
.um-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.um-cards[data-n="1"] { grid-template-columns: minmax(0, 220px); justify-content: center; }
.umc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 8px 12px; min-height: 270px; border-radius: 16px; background: var(--slab); box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 4px var(--c, #6d7378), 0 0 22px color-mix(in srgb, var(--c, #6d7378) 45%, transparent), 0 10px 26px rgba(0,0,0,.8); transition: transform .12s; animation: umin .22s cubic-bezier(.2,.9,.3,1.2) both; }
.umc:nth-child(2) { animation-delay: .06s; }
@keyframes umin { from { opacity: 0; transform: translateY(26px) scale(.92); } to { opacity: 1; transform: none; } }
.umc:active { transform: scale(.97); }
.umc .ut { font-family: var(--gothic); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c, #ccc); text-shadow: 0 1px 2px #000; }
.umc .uicon { width: 92px; height: 92px; border-radius: 14px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.7)); }
.umc .un { font-family: var(--gothic); font-size: 16px; line-height: 1.1; text-align: center; color: #f2eee0; text-shadow: 0 1px 3px #000; }
.umc .udesc { font-size: 11.5px; line-height: 1.25; text-align: center; color: #cfd2c4; padding: 0 2px; }
.umc .ud { display: flex; flex-direction: column; gap: 3px; align-items: center; width: 100%; }
.umc .ud .ch { font-size: 12.5px; padding: 1px 8px 1px 3px; }
.umc .upr { margin-top: auto; display: flex; gap: 4px; align-items: center; padding: 3px 14px; border-radius: 999px; background: rgba(0,0,0,.6); border: 1.5px solid var(--gold); font-family: var(--font); font-weight: 700; font-size: 18px; color: var(--gold); }
.umc.poor .upr { color: var(--red); border-color: var(--red); } .umc.poor .uicon { filter: grayscale(.55) brightness(.85); }

/* подсказки обучения */
@keyframes selin2 { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
#note { opacity: 0; visibility: hidden; transition: transform .25s, opacity .2s, visibility 0s .25s; position: fixed; left: 50%; top: calc(var(--sa-top) + 14px); transform: translate(-50%, -140%); z-index: 90; max-width: 90%; padding: 9px 16px; border-radius: 12px; background: var(--slab); box-shadow: var(--slabline), 0 8px 24px rgba(0,0,0,.8); font-family: var(--gothic); font-size: 14px; color: #f0ecdc; text-align: center; pointer-events: none; }
#note.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .25s, opacity .2s; }

/* стартовый экран: логотип поменьше, справа сверху аватар и кристаллы */
#title { padding-top: calc(var(--sa-top) + 52px); }
.logo-img.big { width: min(72vw, 310px); }
#title .logo-img { margin: 0 0 -20px; }
#toprow { position: absolute; top: calc(var(--sa-top) + 10px); right: 12px; z-index: 3; display: flex; align-items: center; gap: 8px; }
#toprow .pf .av { width: 42px; height: 42px; font-size: 18px; border: 0; box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 4px #8a8f94, 0 4px 10px rgba(0,0,0,.7); }
.gembtn { display: flex; align-items: center; gap: 5px; height: 38px; padding: 0 6px 0 9px; border-radius: 999px; background: var(--slab); box-shadow: var(--slabline), 0 4px 10px rgba(0,0,0,.7); font-family: var(--font); font-weight: 700; font-size: 17px; color: #c8f0ff; }
.gembtn .gm { width: 24px; height: 24px; } .gembtn i { display: grid; place-items: center; width: 24px; height: 24px; margin-left: 2px; border-radius: 50%; background: linear-gradient(#5ac83a, #2a7a14); font-style: normal; font-size: 18px; line-height: 1; color: #f2ffe4; box-shadow: 0 0 0 1.5px #0b0c0c; }
.gembtn:active { filter: brightness(1.3); }
.souls .gemchip { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }

/* подготовка к уровню */
#loadout { z-index: 26; }
.subbody.lo { width: min(100%, 480px); gap: 10px; padding-bottom: 12px; }
.lo-slots { display: flex; gap: 8px; justify-content: center; padding: 8px 0 2px; }
.los { position: relative; width: 62px; height: 76px; flex: none; border-radius: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: var(--slab); box-shadow: var(--slabline), 0 4px 10px rgba(0,0,0,.7); }
.los img { width: 42px; height: 42px; object-fit: contain; } .los small { font-family: var(--gothic); font-size: 8.5px; line-height: 1; color: #e8e8dc; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.los.empty { background: rgba(0,0,0,.5); box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px #3a3d40; font-family: var(--gothic); font-size: 30px; color: #5a5e62; }
.los.lock { opacity: .75; filter: grayscale(.7); } .los.lock img { width: 34px; height: 34px; }
.lo-info { min-height: 74px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.45); border: 1.5px solid #3a3d40; font-size: 12.5px; color: #cfd2c4; }
.lo-info .lo-i b { display: block; font-family: var(--gothic); font-weight: 400; font-size: 17px; color: #ecece0; }  .lo-info .dch { display: flex; flex-wrap: wrap; gap: 4px; }
.lo-info .lo-hint { text-align: center; color: #9aa39a; }
.lo-info .btn { min-height: 38px; font-size: 14px; }
.lo-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.loc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 3px 5px; border-radius: 12px; background: var(--slab); box-shadow: var(--slabline), 0 4px 10px rgba(0,0,0,.7); }
.loc .ci { width: 52px; height: 52px; object-fit: contain; border-radius: 9px; } .loc .cn { font-family: var(--gothic); font-size: 10px; line-height: 1.05; text-align: center; color: #e8e8dc; min-height: 21px; display: grid; place-items: center; }
.loc .cc { display: flex; align-items: center; gap: 2px; font-family: var(--font); font-weight: 700; font-size: 12.5px; color: var(--gold); } .loc .cc img { width: 13px; height: 13px; }
.loc.on { box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 4px var(--gold), 0 0 14px rgba(245,192,74,.5); }
.loc.info:not(.on) { box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 4px #9aa39a; }
.loc .no { position: absolute; top: -6px; left: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); border: 2px solid #0b0c0c; font-family: var(--font); font-style: normal; font-weight: 700; font-size: 13px; color: #1c1408; }
.loc.locked .ci { filter: grayscale(1) brightness(.5); } .loc.locked .cc { opacity: .6; }
.loc .lk { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .loc .lk img { width: 30px; height: 30px; filter: drop-shadow(0 2px 4px #000); }
.lo-foot { position: sticky; bottom: 0; z-index: 3; width: 100%; margin-top: auto; display: flex; justify-content: center; padding: 24px 16px calc(12px + var(--sa-bottom)); background: linear-gradient(transparent, #0b0609 45%); pointer-events: none; }
.lo-foot .btn { width: min(100%, 420px); pointer-events: auto; } .lo-foot .btn.poor { filter: grayscale(.7) brightness(.75); }

/* итог уровня: подсчёт очков */
#end-verdict { display: flex; flex-direction: column; gap: 5px; }
#end-verdict:empty { display: none; }
#end-verdict .vr { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; border-radius: 10px; background: rgba(8,6,6,.78); border: 1px solid #3a3d40; font-family: var(--font); color: #e8e8dc; opacity: 0; transform: translateX(-16px); transition: opacity .25s, transform .25s; }
#end-verdict .vr.in { opacity: 1; transform: none; }
#end-verdict .vr span { display: flex; align-items: center; gap: 7px; font-size: 14px; letter-spacing: .02em; } #end-verdict .vr span img { width: 22px; height: 22px; } #end-verdict .vr span small { color: #8a8f94; font-size: 10.5px; margin-left: 2px; }
#end-verdict .vr b { font-weight: 700; font-size: 20px; color: #ffe9a8; min-width: 3ch; text-align: right; }
#end-verdict .vr.neg { border-color: #6a2a2a; } #end-verdict .vr.neg b { color: #ff7a6a; } #end-verdict .vr.sub { background: rgba(30,28,20,.85); border-color: #6a5a2a; } #end-verdict .vr.sub b { color: #fff; }
#end-verdict .vr.mul { background: linear-gradient(#5a1a18, #2a0a0a); border-color: #c8402a; transform: scale(1.5); } #end-verdict .vr.mul.in { animation: slam .55s cubic-bezier(.2,1.4,.3,1) both; }
#end-verdict .vr.mul span { font-family: var(--gothic); text-transform: uppercase; color: #ffb09a; } #end-verdict .vr.mul b { font-size: 28px; color: #ff8a5a; text-shadow: 0 0 14px rgba(255,100,40,.8); }
@keyframes slam { 0% { opacity: 0; transform: scale(2.4) rotate(-4deg); } 60% { opacity: 1; transform: scale(.94); } 100% { opacity: 1; transform: none; } }
#end-verdict .vr.tot { padding: 8px 14px; background: linear-gradient(#4a3a14, #1e1809); border: 2px solid #d8a82a; box-shadow: 0 0 16px rgba(245,192,74,.25); } #end-verdict .vr.tot span img.sc { width: 38px; height: 38px; border-radius: 9px; }
#end-verdict .vr.tot b { font-size: 36px; color: #ffe27a; text-shadow: 0 2px 0 #5a3a08; } #end-verdict .vr.tot.done { animation: totpop .5s ease-out; }
@keyframes totpop { 50% { transform: scale(1.06); box-shadow: 0 0 30px rgba(245,192,74,.6); } }
#end-score { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font); font-weight: 700; font-size: 26px; color: #ffe9a8; } #end-score img.sc { width: 34px; height: 34px; border-radius: 8px; } #end-score small { font-size: 11px; color: #8a8f94; font-weight: 500; }
#endmenu .modal.tally > .btn, #endmenu .modal.tally > .menu-row { opacity: 0; pointer-events: none; }
#endmenu .modal > .btn, #endmenu .modal > .menu-row { transition: opacity .3s; }

/* таблица рейтингового забега */
.rrow { display: flex; align-items: center; gap: 7px; }
.rrow .nm { flex: 1; min-width: 0; } .rrow .nm small { display: block; margin: 0; font-size: 10px; }
.rrow .rl { flex: none; width: 76px; text-align: center; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.rrow .rl b { font-family: var(--gothic); font-weight: 400; font-size: 20px; color: #e8d6ff; text-shadow: 0 1px 2px #000; } .rrow .rl small { font-size: 9px; color: var(--muted); margin-top: 2px; line-height: 1.05; max-height: 20px; overflow: hidden; }
.rrow .rt, .rrow .rs { flex: none; display: flex; align-items: center; gap: 3px; font-family: var(--font); font-weight: 700; font-size: 13px; color: #cfd2c4; }
.rrow .rt img { width: 14px; height: 14px; } .rrow .rs { color: #ffe9a8; font-size: 14.5px; min-width: 40px; justify-content: flex-end; } .rrow .rs img { width: 18px; height: 18px; border-radius: 4px; }
.trow.rrow { padding: 5px 8px; } .trow.rrow .rl { width: 64px; } .trow.rrow .rl b { font-size: 17px; }
.rk-best .bg b.big { font-family: var(--gothic); font-weight: 400; font-size: 30px; line-height: 1; color: #e8d6ff; }
.dbest img, .scimg { width: 18px; height: 18px; border-radius: 4px; }
.node.tutnode .nl { color: #ffe9a8; }
@media (max-height: 700px) { .umc { min-height: 236px; } .umc .uicon { width: 76px; height: 76px; } }
.umc .upr img { width: 22px; height: 22px; } .um-gold img { width: 20px; height: 20px; }
/* итог уровня: помещается на низкие экраны */
.screen.overlay .modal { margin: auto; }
#endmenu .modal { gap: 7px; padding: 14px 14px 16px; }
#endmenu .modal h2 { font-size: 26px; margin: 0; }
#end-verdict .vr { padding: 4px 12px; } #end-verdict .vr.tot { padding: 6px 14px; } #end-verdict .vr b { font-size: 18px; } #end-verdict .vr.tot b { font-size: 32px; } #end-verdict .vr.mul b { font-size: 24px; }
#endmenu #end-stats div { padding: 5px 4px; } #endmenu #end-stats b { font-size: 18px; } #endmenu #end-stats img { width: 22px; height: 22px; }
#endmenu #end-souls { padding: 5px; font-size: 17px; }
#endmenu .btn { min-height: 44px; }

.rrow .rst { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.rrow .rt { font-size: 11.5px; color: #9aa39a; } .rrow .rt img { width: 12px; height: 12px; } .rrow .rs { min-width: 0; font-size: 15px; }
.rrow .rl { width: 70px; } .trow.rrow .rl { width: 62px; }

/* ═════════ v6: таблица забега со складной строкой ═════════ */
.rwrap { display: flex; flex-direction: column; }
.rwrap > .rrow { position: relative; }
.rwrap .rs { flex: none; font-size: 15px; min-width: 0; }
.rarr { flex: none; width: 30px; height: 30px; margin-left: 2px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.45); box-shadow: 0 0 0 1.5px #0b0c0c, 0 0 0 3px #5a6066; }
.rarr i { width: 9px; height: 9px; margin-top: -4px; border-right: 2.5px solid #d8dccc; border-bottom: 2.5px solid #d8dccc; transform: rotate(45deg); transition: transform .2s; }
.rwrap.open .rarr i { transform: rotate(225deg); margin-top: 3px; }
.rmore { display: none; margin: -3px 6px 0; padding: 10px 10px 9px; border-radius: 0 0 10px 10px; background: rgba(0,0,0,.4); border: 1px solid var(--edge); border-top: 0; }
.rwrap.open .rmore { display: block; animation: fadein .18s ease-out; }
.rslots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.rslots img { width: 42px; height: 42px; border-radius: 8px; box-shadow: 0 0 0 1.5px #0b0c0c; }
.rnone { font-size: 11.5px; color: var(--muted); }
.rinfo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; }
.rinfo .rl { width: auto; align-items: flex-start; text-align: left; } .rinfo .rl b { font-size: 24px; } .rinfo .rl small { font-size: 11px; max-height: none; margin: 2px 0 0; }
.rinfo .rt { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 16px; color: #e8e8dc; } .rinfo .rt img { width: 16px; height: 16px; display: inline; vertical-align: -2px; margin-right: 3px; } .rinfo .rt small { font-size: 10px; color: var(--muted); font-weight: 500; }

/* ═════════ v7: кнопка вызова волны, компактные кнопки и плашки ═════════ */
.wcall { --rc: #e24a3a; position: absolute; right: 10px; top: 8px; z-index: 5; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; }
.wcall.boss { --rc: #b070ff; }
.wcall .wring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--rc) calc(var(--p, 0) * 1%), rgba(0,0,0,.6) 0); box-shadow: 0 0 0 2px #0b0c0c, 0 4px 12px rgba(0,0,0,.8); }
.wcall .wface { position: absolute; inset: 6px; border-radius: 50%; overflow: hidden; background: #111; box-shadow: 0 0 0 2px #0b0c0c; }
.wcall .wic { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; pointer-events: none; }
.wcall .wn { position: absolute; left: -4px; top: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; display: grid; place-items: center; background: var(--rc); border: 2px solid #0b0c0c; font-family: var(--font); font-weight: 700; font-size: 13px; color: #fff; line-height: 1; }
.wcall .wb { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 0 7px 0 3px; border-radius: 999px; background: #0b0609; border: 1.5px solid var(--gold); font-family: var(--font); font-weight: 700; font-size: 12px; color: var(--gold); line-height: 16px; white-space: nowrap; pointer-events: none; } .wcall .wb img { width: 13px; height: 13px; }
.wcall:active .wface { filter: brightness(1.3); }

/* блок здания и окна: одинаковые компактные кнопки */
#sel { width: min(264px, calc(100% - 20px)); padding: 9px 10px 10px; gap: 7px; }
#sel .shead .ic { width: 38px; height: 38px; } #sel .title { font-size: 15px; padding-right: 18px; }
#sel .sx { position: absolute; top: -9px; right: -9px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--slab); box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px #8a8f94; font-size: 13px; color: #e8e8dc; line-height: 1; }
#sel .sacts { gap: 12px; margin-top: 1px; }
.abtn { width: 54px; height: 54px; border-radius: 12px; }
.abtn .ai { width: 36px; height: 36px; }
.abtn.sell { position: relative; } .abtn.sell .ai { width: 34px; height: 34px; margin-top: 6px; }
.abtn.sell .bag { position: absolute; top: 1px; left: 50%; width: 24px; height: 24px; transform: translateX(-50%); filter: drop-shadow(0 1px 2px #000); pointer-events: none; }
.abtn.sell { box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px #b8922a; }
.umc { min-height: 236px; padding: 10px 8px; gap: 6px; }
.umc .upr { padding: 2px 11px 2px 7px; font-size: 15px; gap: 3px; } .umc .upr img { width: 16px; height: 16px; }
.umc .uicon { width: 80px; height: 80px; }
#sellmodal { position: absolute; inset: 0; z-index: 42; display: grid; place-items: center; background: rgba(8,3,6,.5); animation: fadein .15s ease-out; }
.sm-box { width: 220px; padding: 12px 12px 12px; border-radius: 16px; background: var(--slab); box-shadow: var(--slabline), 0 10px 28px rgba(0,0,0,.85); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sm-top { display: flex; align-items: center; gap: 10px; } .sm-top #sm-ic { width: 48px; height: 48px; border-radius: 10px; }
.sm-v { display: flex; align-items: center; gap: 4px; padding: 2px 10px 2px 6px; border-radius: 999px; background: rgba(0,0,0,.6); border: 1.5px solid var(--gold); font-family: var(--font); font-weight: 700; font-size: 18px; color: var(--gold); } .sm-v img { width: 20px; height: 20px; }
.sm-q { font-family: var(--gothic); font-size: 15px; color: #f0ecdc; text-shadow: 0 1px 2px #000; }
.sm-b { display: flex; gap: 14px; }
.sm-b button { width: 54px; height: 54px; border-radius: 12px; font-size: 26px; line-height: 1; color: #fff; box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px #8a8f94; }
#sm-yes { background: linear-gradient(#4a9a2a, #245a12); } #sm-no { background: linear-gradient(#9a2a2a, #5a1212); }
.sm-b button:active { filter: brightness(1.25); transform: scale(.94); }
.rinfo .rl { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.rinfo .rt { display: block; text-align: right; } .rinfo .rt small { display: block; }

/* v8: правки по скриншотам */
.ch { display: inline-flex; flex-direction: row; align-items: center; white-space: nowrap; }
.lo-info .lo-i > span { display: block; line-height: 1.3; margin: 2px 0 5px; }
.umc { min-height: 0; } .umc .upr { margin-top: 8px; }
.rk-best .bg { display: none; }
.rkb { display: flex; flex-direction: column; gap: 8px; }
.rkb .lvrow { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: rgba(0,0,0,.35); min-width: 0; }
.rkb .lvrow b.big { flex: none; min-width: 44px; text-align: center; font-family: var(--gothic); font-weight: 400; font-size: 34px; line-height: 1; color: #e8d6ff; }
.rkb .lvrow span { min-width: 0; display: flex; flex-direction: column; font-size: 12px; color: var(--muted); } .rkb .lvrow span b { font-family: var(--gothic); font-weight: 400; font-size: 17px; color: #f0e6ff; line-height: 1.15; overflow-wrap: anywhere; }
.rkb .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rkb .two > div { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.35); min-width: 0; }
.rkb .two img { width: 26px; height: 26px; flex: none; border-radius: 6px; } .rkb .two div > span { display: flex; flex-direction: column; min-width: 0; font-size: 11px; color: var(--muted); line-height: 1.2; }
.rkb .two b { font-family: var(--font); font-weight: 700; font-size: 20px; color: #fff; line-height: 1.1; white-space: nowrap; }
.rkb .slots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .rkb .slots img { width: 38px; height: 38px; border-radius: 8px; box-shadow: 0 0 0 1.5px #0b0c0c; }

/* v9: разделы, чекеры выбора, счётчик слотов, отмена в окне улучшения */
.sect-title { margin: 18px 0 10px; padding: 0 2px 7px; border-bottom: 2px solid rgba(255,255,255,.16); box-shadow: 0 1px 0 rgba(0,0,0,.6); }
.lo-cards { padding-top: 2px; }
.lo-cnt { flex: none; display: flex; align-items: center; gap: 5px; padding: 3px 11px 3px 7px; border-radius: 999px; background: rgba(0,0,0,.5); box-shadow: 0 0 0 1.5px #0b0c0c, 0 0 0 3px #5a6066; font-family: var(--font); font-weight: 700; font-size: 17px; color: #e8e8dc; }
.lo-cnt img { width: 22px; height: 22px; } .lo-cnt.full { color: #8fe36a; box-shadow: 0 0 0 1.5px #0b0c0c, 0 0 0 3px #4a9a2a; }
.loc .chk { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.45); box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px #8a8f94; transition: background .12s; }
.loc .chk.on { background: #3fae2a; box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px #8fe36a, 0 0 10px rgba(110,255,60,.6); }
.loc .chk.on::after { content: ''; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(40deg); }
.loc.on { box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 4px #6ec24a, 0 0 14px rgba(110,255,60,.35); }
.um-cancel { align-self: center; width: min(100%, 220px); min-height: 42px; font-size: 15px; }
.loc .lk { place-items: start end; padding: 4px; } .loc .lk img { width: 24px; height: 24px; }

/* ═════════ v10: плашки ресурсов, кристалл, магазин, усилители ═════════ */
.rps { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
.rp { --rc: #5a6066; --r1: #8a8f94; --r2: #222; --rt: #e8e8dc; position: relative; display: inline-flex; align-items: center; justify-content: flex-end; min-width: 74px; height: 30px; padding: 0 12px 0 30px; border-radius: 999px; background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.72)), url(../img/ui/stone.webp) center / 160px; box-shadow: 0 0 0 1.5px #0b0c0c, 0 0 0 3px var(--rc), 0 3px 8px rgba(0,0,0,.6); font-family: var(--font); font-weight: 700; font-size: 17px; line-height: 1; color: var(--rt); }
.rp b { font-weight: 700; }
.rp .ri { position: absolute; left: -9px; top: 50%; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 28%, var(--r1), var(--r2)); box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px var(--rc), 0 3px 6px rgba(0,0,0,.6); }
.rp .ri img {  filter: drop-shadow(0 1px 1px rgba(0,0,0,.7)); }
.rp.souls { --rc: #4a8ad8; --r1: #9cc4ff; --r2: #12306a; --rt: #cfe6ff; }
.rp.gems { --rc: #a070e0; --r1: #9af0ff; --r2: #3a1a8a; --rt: #efe0ff; cursor: pointer; }
.rp.ach { --rc: #c8a040; --r1: #ffe28a; --r2: #6a4a10; --rt: #ffe9a8; }
.rp.gems:active { filter: brightness(1.25); }
.topbar .rps { margin-left: 8px; margin-right: 6px; }
/* кристалл: вращается вокруг вертикальной оси и сверкает */
.gemic { position: relative; display: inline-grid; place-items: center; perspective: 160px; vertical-align: middle; line-height: 0; }
/* стартовый экран: кристаллы слева от аватара */
#toprow .gembtn { height: 36px; gap: 7px; padding: 0 14px 0 8px; }
#toprow .gembtn b { font-family: var(--font); font-weight: 700; font-size: 18px; color: #e6d4ff; }
.gembtn { box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px #a070e0, 0 4px 10px rgba(0,0,0,.7) !important; }
.gembtn i { display: none; }
/* магазин */
.subbody.shop { gap: 12px; }
.sh-card { position: relative; padding: 14px 12px 12px; border-radius: 16px; background: var(--slab); box-shadow: var(--slabline), 0 6px 16px rgba(0,0,0,.7); display: flex; flex-direction: column; gap: 10px; }
.sh-h { font-family: var(--gothic); font-size: 18px; color: #f0ecdc; text-shadow: 0 1px 3px #000; } .sh-h small { display: block; font-family: var(--font); font-weight: 500; font-size: 11.5px; color: #aeb4a8; margin-top: 2px; }
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0 6px; border-radius: 9px; background: rgba(0,0,0,.4); box-shadow: 0 0 0 1.5px #0b0c0c; }
.day small { font-size: 8.5px; color: #8a8f94; text-transform: uppercase; } .day b { font-family: var(--font); font-size: 14px; color: #e8e8dc; }
.day.now { background: rgba(60,40,100,.7); box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px #a070e0, 0 0 14px rgba(190,140,255,.8); }
.day.got { opacity: .55; } .day .ck { position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #3fae2a; } .day .ck::after { content: ''; position: absolute; left: 4px; top: 2px; width: 3px; height: 6px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(40deg); }
.btn.buy { min-height: 40px; font-size: 17px; letter-spacing: .04em; }
.btn.poor { filter: grayscale(.8) brightness(.75); }
.sh-card.starter { background: linear-gradient(135deg, rgba(120,80,10,.55), rgba(0,0,0,.6)), var(--slab); box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 4px #d8a82a, 0 0 22px rgba(245,192,74,.35), 0 6px 16px rgba(0,0,0,.7); }
.rib { position: absolute; top: -9px; left: 12px; padding: 2px 12px; border-radius: 999px; background: linear-gradient(#c8402a, #7a1a10); box-shadow: 0 0 0 1.5px #0b0c0c; font-family: var(--gothic); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #fff; z-index: 1; } .rib.gold { background: linear-gradient(#e8b830, #8a5a08); color: #2a1a04; }
.st-top { display: flex; gap: 12px; align-items: center; } .st-ic { width: 84px; height: 84px; border-radius: 14px; flex: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.7)); }
.st-t b { font-family: var(--gothic); font-weight: 400; font-size: 19px; color: #fff2c0; } .st-t ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .st-t li { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #e8e8dc; } .st-t li img { width: 18px; height: 18px; }
.st-worth { font-size: 12px; color: #ffd98a; text-align: center; }
.sh-prem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pcard { --c: #ffd24a; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 6px 8px; border-radius: 14px; background: var(--slab); box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px var(--c), 0 0 16px color-mix(in srgb, var(--c) 40%, transparent), 0 5px 12px rgba(0,0,0,.7); text-align: center; }
.pcard .pi { width: 64px; height: 64px; border-radius: 12px; } .pcard .pn { font-family: var(--gothic); font-size: 13px; line-height: 1.1; color: #f2eee0; } .pcard .pd { font-size: 10px; line-height: 1.25; color: #b8bcb0; flex: 1; }
.pcard .fbuy { min-width: 0; width: 100%; padding: 6px 4px; font-size: 14px; } .pcard.own { opacity: .8; }
.sh-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px 10px; border-radius: 16px; background: var(--slab); box-shadow: var(--slabline), 0 6px 14px rgba(0,0,0,.7); }
.kcard.hit { box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 4px #c8402a, 0 0 18px rgba(255,80,50,.35), 0 6px 14px rgba(0,0,0,.7); } .kcard.best { box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 4px #e8b830, 0 0 20px rgba(245,192,74,.45), 0 6px 14px rgba(0,0,0,.7); }
.kcard .rib { left: 50%; transform: translateX(-50%); white-space: nowrap; }
.pile { display: flex; align-items: center; justify-content: center; height: 44px; } .pile .gemic { margin: 0 -6px; } .pile .gemic:nth-child(2) { transform: translateY(-4px) scale(1.15); } .pile .gemic:nth-child(3) { transform: translateY(3px); }
.pile .gemic img { width: 32px !important; height: 32px !important; } .pile .gemic:nth-child(n+2) img { animation-delay: .5s; }
.kn { font-family: var(--font); font-weight: 700; font-size: 26px; line-height: 1; color: #f0e4ff; display: flex; align-items: baseline; gap: 6px; } .kn s { font-size: 14px; color: #8a8f94; text-decoration-thickness: 2px; }
.kb { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; min-height: 18px; } .kb span { padding: 1px 8px; border-radius: 999px; font-family: var(--font); font-weight: 700; font-size: 11px; line-height: 16px; } .kb .x2 { background: #3fae2a; color: #fff; } .kb .pc { background: rgba(0,0,0,.55); color: #ffd24a; box-shadow: 0 0 0 1px #8a6a18; }
.kcard .btn { width: 100%; }
.sh-note { margin: 4px 4px 0; font-size: 11px; line-height: 1.4; color: #8a8f94; text-align: center; }
/* усилители в подготовке */
.sect-title .bal { float: right; display: inline-flex; align-items: center; gap: 4px; font-family: var(--font); font-size: 14px; letter-spacing: 0; color: #e0d0ff; }
.lo-boosts { display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; }
.lob { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 40px 8px 10px; border-radius: 12px; background: var(--slab); box-shadow: var(--slabline), 0 3px 8px rgba(0,0,0,.6); text-align: left; }
.lob .bi { width: 30px; height: 30px; flex: none; } .lob .bt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .lob .bt b { font-family: var(--gothic); font-weight: 400; font-size: 14px; color: #ecece0; } .lob .bt small { font-size: 11px; color: #aeb4a8; line-height: 1.25; }
.lob .bp { flex: none; display: flex; align-items: center; gap: 3px; padding: 2px 9px 2px 5px; border-radius: 999px; background: rgba(0,0,0,.55); box-shadow: 0 0 0 1.5px #6a4aa8; font-family: var(--font); font-weight: 700; font-size: 14px; color: #e6d4ff; }
.lob .chk { position: absolute; top: 50%; right: 8px; margin-top: -11px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.45); box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px #8a8f94; } .lob .chk.on { background: #3fae2a; box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px #8fe36a; } .lob .chk.on::after { content: ''; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(40deg); }
.lob.on { box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 4px #6ec24a; } .lob.off { opacity: .4; }
.loc .crn { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18l-1-11 6 5 4-8 4 8 6-5-1 11z' fill='%23ffd24a' stroke='%23140a04' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 1px 2px #000); }
#shop { z-index: 29; }
.rp .ri > img { width: 24px; height: 24px; }
.kcard .kb { flex: 1; align-content: flex-start; } .kcard .btn { margin-top: auto; }

/* v11: иконки из листа */
.wcall .wic { object-position: 50% 50%; transform: scale(1.22); }
.sh-h { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding-right: 64px; } .sh-h .sh-ic { position: absolute; right: 12px; top: 8px; width: 48px; height: 48px; object-fit: contain; border-radius: 8px; }
.pile { height: 74px; } .pile .kimg { width: 72px; height: 72px; border-radius: 10px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.7)); }
.kcard:hover .kimg { transform: scale(1.04); }

.gemic canvas { display: block; }
.pile .gemic img { animation: none; }

/* v12: иконки листа — квадратные плитки с полной рамкой, без обрезки скруглением */
.fi { width: 54px; height: 54px; border-radius: 3px; object-fit: contain; }
.ai { width: 56px; height: 56px; border-radius: 3px; object-fit: contain; }
.arow { align-items: center; gap: 12px; }
.ibig img.ii { border-radius: 3px; }
.abtn .ai { border-radius: 3px; }
.rp { padding-left: 38px; min-width: 88px; }
.rp .ri { left: -10px; }
.frow .fi, .arow .ai, .st-ic, .lo-info img { image-rendering: auto; }
.rp.souls { cursor: pointer; } .rp.souls:active { filter: brightness(1.25); }
#world .topbar { gap: 8px; padding-right: 10px; } #world .topbar .rps { gap: 12px; margin-left: 6px; flex: 1; min-width: 0; }
#world .rp { min-width: 0; height: 28px; padding: 0 9px 0 34px; font-size: 15px; } #world .rp .ri { width: 34px; height: 34px; margin-top: -17px; left: -9px; } #world .rp .ri > img { width: 20px; height: 20px; }
.iconrow.small { flex: none; flex-wrap: nowrap; } .iconrow.small .ibig { width: 40px; height: 40px; }
.dname { margin-bottom: 8px; line-height: 1.12; } .dbody { padding-top: 10px; } .dbody .dsub:first-child { margin-top: 4px; }

/* v13: очки и общее время в верхней строке рядом с паузой */
#hud { gap: 5px; }
.chip.htime img.hg { width: 20px; height: 20px; border-radius: 4px; flex: none; }
.chip.htime { border-color: #8a7ad8; }
body.ranked #hud .chip { padding: 3px 8px 3px 5px; font-size: 15px; gap: 4px; } body.ranked #hud .chip.gold span { display: none; }
.abtn.sell .ai { width: 38px; height: 38px; margin: 6px 0 0 -6px; }
.abtn.sell .bag { top: 2px; right: 3px; left: auto; width: 24px; height: 24px; transform: none; }
.logo-img { animation: none !important; filter: drop-shadow(0 0 22px rgba(110,255,60,.28)); }

/* v14: окно улучшения: понятные строки «было → стало», подписанная кнопка, ровная шапка */
.um-head { align-items: center; gap: 12px; min-height: 54px; padding: 6px 8px 6px 14px; border-radius: 14px; background: var(--slab); box-shadow: var(--slabline), 0 6px 14px rgba(0,0,0,.7); }
.um-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.um-t b { font-family: var(--gothic); font-weight: 400; font-size: 20px; color: #f2eee0; text-shadow: 0 1px 3px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-t small { margin-top: 3px; font-family: var(--font); font-size: 12px; font-weight: 500; letter-spacing: .02em; color: #aeb4a8; }
.um-gold { flex: none; }
.umc { min-height: 0; padding: 10px 9px 10px; gap: 7px; }
.umc .ut { font-size: 11px; }
.umc .uicon { width: 72px; height: 72px; border-radius: 3px; }
.umc .un { font-size: 15px; }
.umc .udesc { font-size: 11px; line-height: 1.3; }
.udelta { width: 100%; display: flex; flex-direction: column; gap: 5px; padding: 6px 0 2px; border-top: 1px solid rgba(255,255,255,.1); }
.udelta .dr { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 8px; background: rgba(0,0,0,.35); }
.udelta .dr img { width: 20px; height: 20px; flex: none; }
.udelta .dc { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; }
.udelta .dl { font-size: 10.5px; color: #aeb4a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.udelta .dv { display: flex; align-items: baseline; gap: 4px; font-family: var(--font); font-weight: 700; font-size: 14px; flex-wrap: wrap; }
.udelta .dv s { color: #8a8f94; font-weight: 500; text-decoration: none; } .udelta .dv i { font-style: normal; color: #8a8f94; font-size: 12px; } .udelta .dv b { color: #8fe36a; } .udelta .dv em { font-style: normal; font-size: 11px; color: #ffd24a; margin-left: auto; }
.udelta .dnone { font-size: 11px; color: #aeb4a8; text-align: center; padding: 4px; }
.umbuy { width: 100%; margin-top: auto; min-height: 46px; padding: 6px 10px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: linear-gradient(#4aa02a, #236014); box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px #8fe36a, 0 3px 8px rgba(0,0,0,.6); color: #f4ffe8; transition: transform .1s, filter .1s; }
.umbuy:active { transform: scale(.96); filter: brightness(1.2); }
.umbuy .bt { font-family: var(--gothic); font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; text-shadow: 0 1px 2px #000; line-height: 1.1; }
.umbuy .bp { display: flex; align-items: center; gap: 4px; font-family: var(--font); font-weight: 700; font-size: 19px; line-height: 1.05; color: #fff3b0; text-shadow: 0 1px 2px #000; } .umbuy .bp img { width: 20px; height: 20px; }
.umc.poor .umbuy { background: linear-gradient(#5a4a4a, #2c2020); box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px #8a5a5a, 0 3px 8px rgba(0,0,0,.6); color: #e0c8c8; } .umc.poor .umbuy .bp { color: #ff9a9a; }
.umc.poor .uicon { filter: grayscale(.4) brightness(.9); }
.um-cards { gap: 10px; }
.um-cards[data-n="1"] { grid-template-columns: minmax(0, 260px); }
.umc .upr { display: none; }

/* v15: каменные плиты вместо кнопок */
.stn, .btn { background: none !important; border: 14px solid transparent; border-image: url(../img/ui/plate_plain.webp) 42 fill / 14px / 0 stretch; border-radius: 0; box-shadow: none !important; padding: 4px 14px; min-height: 54px; color: #ecece0; text-shadow: 0 2px 0 #000, 0 0 10px rgba(0,0,0,.7); filter: drop-shadow(0 4px 5px rgba(0,0,0,.75)); }
.stn:active, .btn:active { transform: translateY(2px) scale(.99); filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)) brightness(1.2); }
.stn.primary, .btn.big { border-image-source: url(../img/ui/plate_glow.webp); color: #d2fff4; text-shadow: 0 2px 0 #000, 0 0 12px rgba(40,230,210,.65); min-height: 58px; }
.btn.danger { border-image-source: url(../img/ui/plate_rust.webp); color: #ffd2bc; }
.btn.gold { border-image-source: url(../img/ui/plate_rust.webp); color: #ffe9a8; }
.btn.ghost { min-height: 44px; padding: 2px 10px; font-size: 14px; }
.btn.poor, .btn[disabled] { filter: grayscale(.85) brightness(.7) drop-shadow(0 3px 4px rgba(0,0,0,.7)); }
.stn.small { min-height: 44px; }
/* «Рейтинговый забег»: вся картинка плиты с руками скелета целиком (руки на своих местах у краёв плиты); плита по ширине равна остальным кнопкам, поэтому вся кнопка крупнее */
.stn.ranked { width: 109.7%; margin: 0 -4.85% 12px; min-height: 0; aspect-ratio: 789 / 225; border: 0; border-image: none; background: url(../img/ui/plate_hands.webp) 0 0 / 100% 100% no-repeat !important; padding: 0 17% 7%; gap: 7px; color: #f0e6ff; text-shadow: 0 2px 0 #000, 0 0 10px rgba(170,110,255,.7); }
.stn.ranked span { font-size: 17px; letter-spacing: .02em; white-space: nowrap; } .stn.ranked .tk { width: 36px; height: 36px; margin: 0; }
.btn b, .stn b { background: rgba(0,0,0,.55); }
.um-cancel { min-height: 46px; }
.lo-foot .btn { min-height: 62px; }

/* ───── в Telegram есть своя кнопка «Назад» (BackButton): внутриигровую прячем, иначе они дублируются; на карте мира верхней панели нет совсем ───── */
#world-souls, #world-icons { display: none; }
body.tgback .topbar .back { display: none; }
body.tgback #world .topbar { display: none; }
body.tgback #world.screen.sub { padding-top: var(--sa-top); }

/* карта мира: яркие кнопки рубежей (кольцо вместо тяжёлых фильтров) и без подписей регионов */
.sec { display: none !important; }

/* магазин: кристаллы списком, как главный товар */
.sh-packs.list { display: flex; flex-direction: column; gap: 8px; }
.krow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(#2a171c, #190d11); border: 1.5px solid var(--edge); }
.krow.hit, .krow.best { border-color: #b8922a; }
.krow .kl { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-family: var(--font); font-size: 20px; color: #e8f6ff; }
.krow .kl b { font-weight: 700; } .krow .kl s { opacity: .5; font-size: 15px; margin-right: 4px; }
.krow .x2 { font-size: 11px; color: #8fe36a; font-family: system-ui, sans-serif; } .krow .tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #3a7ad8; color: #fff; font-family: system-ui, sans-serif; } .krow .tag.gold { background: #b8922a; }
.krow .btn.buy { flex: none; min-width: 92px; padding: 9px 12px; border-radius: 999px; background: linear-gradient(#5fae2a, #3a7a18); border: 1.5px solid #8fd84a; color: #fff; font-weight: 700; font-size: 15px; }
.sh-note.top { margin: 0 0 8px; }
.day img.si { width: 22px; height: 22px; }

.krow .kl { flex: 1 1 auto; min-width: 0; } .krow .kl .gemic { flex: none; }
.krow .btn.buy { width: auto !important; flex: 0 0 auto; min-height: 0; margin: 0; }

/* выбор языка: каменные плитки, как кнопки игры; выбранный язык светится */
.langgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin: 2px 0 6px; }
.langgrid .stn { min-height: 46px; padding: 2px 8px; font-size: 18px; }
.langgrid .stn.on { border-image-source: url(../img/ui/plate_glow.webp); color: #d2fff4; text-shadow: 0 2px 0 #000, 0 0 12px rgba(40,230,210,.65); }

/* кнопка «Кузница» при выборе уровня, подготовке и после победы; Кузница и Магазин открываются поверх любого окна */
.btn.tb-forge { width: auto; min-height: 0; padding: 7px 14px; font-size: 14px; flex: none; }
#world-forge.float { position: absolute; left: 12px; bottom: calc(var(--sa-bottom) + 14px); z-index: 6; box-shadow: 0 4px 14px rgba(0,0,0,.7); }
#forge { z-index: 35; } #shop { z-index: 36; }

/* ───── подготовка уровня: короткий индикатор, если листы врагов ещё не готовы ───── */
#busy { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(8,3,5,.55); }
#busy i { width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgba(255,255,255,.15); border-top-color: var(--gold); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* пока открыто любое окно поверх главного экрана, искры на заднем плане не анимируются */
body.menuopen .embers::before, body.menuopen .embers::after { animation: none; }

/* магазин: никаких размытых теней и фильтров на каждой кнопке и карточке (на телефоне это постоянная нагрузка на видеочип при прокрутке) */
#shop .btn, #shop .stn { filter: none !important; }
#shop .sh-card, #shop .pcard, #shop .krow { box-shadow: 0 0 0 2px #0b0c0c !important; }
#shop .sh-card.starter { box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 4px #d8a82a !important; }
#shop .pcard { box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px var(--c) !important; }

/* возрождение у ворот: бой замер, экран темнеет, игроку предлагают вернуть жизни за кристаллы */
#revive { position: absolute; inset: 0; z-index: 44; display: grid; place-items: center; padding: 16px; background: rgba(6,2,4,.78); animation: fadein .2s ease-out; }
.rv-box { width: min(100%, 340px); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 16px 14px; border-radius: 18px; background: var(--slab); box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 4px #c8402a, 0 12px 30px rgba(0,0,0,.85); text-align: center; }
.rv-ic { width: 64px; height: 64px; border-radius: 14px; margin-top: -4px; filter: drop-shadow(0 0 10px rgba(255,60,60,.6)); }
.rv-t { font-family: var(--gothic); font-size: 26px; color: #ff6a5a; text-shadow: 0 2px 0 #000; }
.rv-s { font-size: 14px; line-height: 1.35; color: #d8d8cc; }
.rv-bal { display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font); font-weight: 700; font-size: 15px; color: #e0d0ff; }
#revive .btn { width: 100%; }
#revive .btn b { margin-left: 4px; }
.rv-no { padding: 6px 14px; font-size: 13px; color: #9a9f94; text-decoration: underline; }
/* пауза: текущие очки */
#p-score { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: -2px 0 6px; font-family: var(--font); color: #ffe27a; }
#p-score .ps-v { display: flex; align-items: center; gap: 6px; font-size: 30px; font-weight: 700; text-shadow: 0 2px 0 #5a3a08; } #p-score .ps-v img { width: 30px; height: 30px; }
#p-score small { font-size: 12px; color: #b8bcb0; letter-spacing: .04em; }

/* ═════════ единый отступ между ячейками на всех экранах ═════════ */
:root { --gap: 12px; }
#perks, #slotsbox, #premium, #unlocks, #achlist, #boardlist, .subbody, #settingsbody, #rankedbody, .lo-boosts, .sh-packs.list { display: flex; flex-direction: column; gap: var(--gap); }
#perks > *, #slotsbox > *, #premium > *, #unlocks > *, #achlist > *, #boardlist > *, .lo-boosts > * { margin: 0 !important; }
.subbody, .subbody.lo, .subbody.shop, #settings .subbody { gap: var(--gap); }
.subbody > .sect-title { margin: 8px 0 0; }
.lo-cards, .sh-prem, .sh-packs, .stn-grid { gap: var(--gap); }
.lo-slots { gap: var(--gap); }
.lo-grid { display: flex; flex-direction: column; gap: var(--gap); }
.title-actions { gap: var(--gap); }

/* главный экран: всё помещается в экран любой высоты, нижняя кнопка не прижата к краю */
#title { padding-bottom: calc(var(--sa-bottom) + 22px); }
.logo-img.big { width: min(72vw, 310px, 34vh); }
#title .logo-img { margin: 0 0 calc(-0.06 * min(72vw, 310px, 34vh)); }
.title-actions { gap: clamp(7px, 1.5vh, var(--gap)); }
.title-actions .stn { min-height: clamp(46px, 7.4vh, 58px); }
.title-actions .stn.ranked { margin-bottom: 0; }
@media (max-height: 760px) { .title-actions .stn:not(.ranked) { border-width: 11px; border-image-width: 11px; min-height: 0; padding: 2px 12px; font-size: 19px; } .title-actions .stn.ranked { width: 104%; margin: 0 -2%; } }
@media (max-height: 680px) { #title { padding-top: calc(var(--sa-top) + 46px); } .logo-img.big { width: min(66vw, 280px, 30vh); } .title-actions .stn:not(.ranked) { border-width: 9px; border-image-width: 9px; font-size: 17px; } .title-actions .stn.ranked { width: 100%; margin: 0; } }

/* подготовка к уровню: шапка и кнопка «В бой» стоят на месте, прокручивается только середина; кнопка у самого низа без зазора */
#loadout.screen { overflow: hidden; padding-bottom: 0; }
#loadout .subbody.lo { flex: 1 1 auto; min-height: 0; width: min(100%, 480px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--gap); -webkit-overflow-scrolling: touch; }
#loadout .lo-foot { position: static; flex: none; margin: 0; padding: 10px 16px calc(var(--sa-bottom) + 10px); background: linear-gradient(#0b0609, #0b0609); box-shadow: 0 -10px 18px rgba(0,0,0,.55); }
.langgrid { gap: var(--gap); }
.rk-rules .mrow { padding: 9px 0; gap: 10px; }

/* никаких полос прокрутки: прокрутка работает, но не рисуется */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ───── плашка уровня рядом с рубежом на карте ───── */
.lvp { position: absolute; z-index: 6; width: 262px; display: flex; flex-direction: column; gap: 8px; animation: fadein .16s ease-out; }
.lvp-card { position: relative; max-height: calc(var(--lvh, 560px) - 92px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 10px 12px; border-radius: 10px; background: linear-gradient(#2b2019, #130d0c); border: 3px solid #060606;
  box-shadow: inset 0 0 0 1.5px #7a6740, 0 10px 28px rgba(0,0,0,.85); color: #e9e4d2; }
.lvp::before { content: ''; position: absolute; top: var(--ay, 40px); width: 12px; height: 12px; background: #2b2019; border: 3px solid #060606; transform: rotate(45deg); box-shadow: inset 0 0 0 1px #7a6740; z-index: 2; }
.lvp[data-side="r"]::before { left: -9px; border-right: 0; border-top: 0; } .lvp[data-side="l"]::before { right: -9px; border-left: 0; border-bottom: 0; }
.lvp-h { display: flex; align-items: flex-start; gap: 6px; }
.lvp-t { flex: 1; min-width: 0; } .lvp-t b { display: block; font-family: var(--gothic); font-weight: 400; font-size: 19px; line-height: 1.1; color: #f0e2b4; text-shadow: 0 2px 0 #000; }
.lvp-t small { color: var(--muted); font-size: 11px; }
.lvp-x { flex: none; width: 26px; height: 26px; border-radius: 50%; font-size: 18px; line-height: 1; color: #d8dccc; background: rgba(0,0,0,.45); box-shadow: 0 0 0 1.5px #0b0c0c, 0 0 0 2.5px #5a6066; }
.dchips { display: flex; gap: 5px; margin: 8px 0 4px; }
.dchip { flex: 1; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(0,0,0,.4); border: 1.5px solid #3a2f28; opacity: .6; }
.dchip img { width: 17px; height: 17px; filter: grayscale(1) brightness(.8); }
.dchip.done { opacity: .85; } .dchip.done img { filter: none; }
.dchip.on { opacity: 1; border-color: var(--c); background: rgba(0,0,0,.6); box-shadow: 0 0 9px var(--c); } .dchip.on img { filter: none; }
.dnm { display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; } .dnm b { font-family: var(--font); font-size: 14px; color: var(--c); text-shadow: 0 1px 0 #000; } .dnm small { font-size: 10.5px; color: var(--muted); }
.lvp-st { margin: 10px 0 5px; font-family: var(--font); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #bfa86a; display: flex; align-items: center; gap: 6px; }
.lvp-st::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(191,168,106,.45), transparent); }
.lvp-me { padding: 7px 9px; border-radius: 9px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.07); }
.lvp-sc { display: flex; align-items: center; gap: 6px; } .lvp-sc img { width: 20px; height: 20px; border-radius: 5px; } .lvp-sc b { font-family: var(--font); font-size: 20px; color: #ffe9a8; }
.lvp-rk { margin-left: auto; font-size: 12px; color: #cfd2c4; font-weight: 700; }
.lvp-meta { margin-top: 3px; font-size: 11.5px; color: #aab1a4; display: flex; align-items: center; gap: 3px; } .lvp-meta img { width: 13px; height: 13px; }
.lvp-set { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; } .lvp-set img { width: 26px; height: 26px; border-radius: 6px; box-shadow: 0 0 0 1px #0b0c0c; }
.lvp-none, .lvp-hint { font-size: 11.5px; color: var(--muted); padding: 4px 2px; line-height: 1.35; }
.lvp-top, .lvp-fr { display: flex; flex-direction: column; gap: 4px; }
.lvp-cmp { font-size: 12px; line-height: 1.35; color: #d8dccc; padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,.32); border-left: 3px solid #bfa86a; } .lvp-cmp b { color: #ffe9a8; }
.lvp .trow { padding: 4px 6px; gap: 6px; } .lvp .trow .nm { font-size: 12.5px; } .lvp .rwrap .rs { font-size: 13px; } .lvp .rwrap .rs img { width: 15px; height: 15px; }
.lvp .rarr { width: 24px; height: 24px; } .lvp .rslots img { width: 34px; height: 34px; } .lvp .rinfo .rl b { font-size: 18px; } .lvp .rinfo .rt { font-size: 13px; } .lvp .rmore { margin: -3px 3px 0; }
.lvp-go { flex: none; min-height: 54px; font-size: 22px; }

/* плашка уровня: компактнее */
.lvp { width: 226px; gap: 6px; }
.lvp-card { padding: 7px 8px 8px; max-height: calc(var(--lvh, 560px) - 70px); }
.lvp-t b { font-size: 16px; } .lvp-t small { font-size: 10px; }
.dchips { margin: 6px 0 3px; gap: 4px; } .dchip { height: 24px; border-radius: 7px; } .dchip img { width: 14px; height: 14px; }
.dnm b { font-size: 12.5px; } .dnm small { font-size: 9.5px; }
.lvp-st { margin: 7px 0 4px; font-size: 9.5px; }
.lvp-me { padding: 5px 7px; } .lvp-sc img { width: 16px; height: 16px; } .lvp-sc b { font-size: 16px; } .lvp-rk { font-size: 11px; }
.lvp-meta { font-size: 10.5px; margin-top: 1px; } .lvp-set { margin-top: 4px; gap: 3px; } .lvp-set img { width: 21px; height: 21px; }
.lvp-top, .lvp-fr { gap: 3px; }
.lvp .trow { padding: 2px 5px; gap: 5px; min-height: 0; } .lvp .trow .nm { font-size: 11.5px; } .lvp .trow .nm small { font-size: 9px; } .lvp .trow .av { width: 24px; height: 24px; font-size: 12px; } .lvp .trow .rk { font-size: 13px; min-width: 12px; }
.lvp .rwrap .rs { font-size: 12px; } .lvp .rwrap .rs img { width: 13px; height: 13px; } .lvp .rarr { width: 20px; height: 20px; } .lvp .rarr i { width: 7px; height: 7px; }
.lvp .rslots img { width: 28px; height: 28px; } .lvp .rinfo .rl b { font-size: 15px; } .lvp .rinfo .rt { font-size: 12px; } .lvp .rmore { padding: 7px 8px 6px; }
.lvp-go { min-height: 38px !important; padding: 0 10px !important; font-size: 20px !important; border-width: 9px !important; border-image-width: 9px !important; }

/* лучшая тройка: венки вокруг места и цветные плашки (золото, серебро, бронза) */
.lvp-top .rwrap { --wc: #d8b24a; --wb: #5a4514; }
.lvp-top .rwrap.top2 { --wc: #c4ccd4; --wb: #444c54; } .lvp-top .rwrap.top3 { --wc: #cd8240; --wb: #5a3414; }
.lvp-top .trow { background: linear-gradient(90deg, color-mix(in srgb, var(--wc) 26%, #130d0c), #1c0e13 75%); border-color: color-mix(in srgb, var(--wc) 70%, #000); }
.lvp-top .rwrap.top1 .trow { box-shadow: 0 0 10px rgba(255,205,80,.35), inset 0 0 0 1px rgba(255,230,150,.25); padding-top: 4px; padding-bottom: 4px; }
.lvp-top .trow .rk { position: relative; flex: none; width: 34px; min-width: 34px; height: 26px; display: grid; place-items: center; font-family: var(--gothic); font-size: 14px; color: var(--wc); text-shadow: 0 1px 0 #000; }
.lvp-top .trow .rk::before, .lvp-top .trow .rk::after { content: ''; position: absolute; top: 0; width: 13px; height: 26px; background: var(--wc); filter: drop-shadow(0 1px 0 #000);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 26'%3E%3Cpath d='M11 25C5 22 1.5 16 1.5 9.5 1.5 6 2.5 3 4 .5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M4 .8c2.6 1 3.6 3.2 2.6 5.6C4.2 5.6 3.2 3.4 4 .8zM2.2 6.5c2.8.4 4.4 2.4 4.1 5-2.8-.4-4.4-2.4-4.1-5zM1.6 12.4c2.6.2 4.6 1.8 5 4.4-2.6-.2-4.6-1.8-5-4.4zM3 18c2.4 0 4.4 1.4 5.2 3.8-2.4 0-4.4-1.4-5.2-3.8zM1.6 9.4c-1.6 1.4-2 3.4-1.2 5.4 1.6-1.2 2.2-3.2 1.2-5.4zM3.2 14.6c-1.4 1.6-1.6 3.6-.4 5.4 1.6-1.4 1.8-3.4.4-5.4z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 26'%3E%3Cpath d='M11 25C5 22 1.5 16 1.5 9.5 1.5 6 2.5 3 4 .5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M4 .8c2.6 1 3.6 3.2 2.6 5.6C4.2 5.6 3.2 3.4 4 .8zM2.2 6.5c2.8.4 4.4 2.4 4.1 5-2.8-.4-4.4-2.4-4.1-5zM1.6 12.4c2.6.2 4.6 1.8 5 4.4-2.6-.2-4.6-1.8-5-4.4zM3 18c2.4 0 4.4 1.4 5.2 3.8-2.4 0-4.4-1.4-5.2-3.8zM1.6 9.4c-1.6 1.4-2 3.4-1.2 5.4 1.6-1.2 2.2-3.2 1.2-5.4zM3.2 14.6c-1.4 1.6-1.6 3.6-.4 5.4 1.6-1.4 1.8-3.4.4-5.4z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; }
.lvp-top .trow .rk::before { left: 0; } .lvp-top .trow .rk::after { right: 0; transform: scaleX(-1); }
.lvp-top .rwrap.top1 .trow .rk { font-size: 16px; }
.lvp-top .rwrap.top1 .trow .nm { color: #ffe9a8; }

/* плашка уровня: плотнее и читабельнее (толстая рамка, непрозрачный фон, крупнее и жирнее текст) */
.lvp { width: 244px; }
.lvp-card { padding: 10px 10px 11px; border: 5px solid #050505; border-radius: 12px; background: linear-gradient(#35271d, #1a1210 60%, #120c0b);
  box-shadow: inset 0 0 0 2px #a8894a, inset 0 0 0 4px #3a2c14, inset 0 0 18px rgba(0,0,0,.55), 0 10px 26px rgba(0,0,0,.9); color: #f4efdc; }
.lvp::before { background: #35271d; border-width: 5px; width: 14px; height: 14px; } .lvp[data-side="r"]::before { left: -11px; } .lvp[data-side="l"]::before { right: -11px; }
.lvp-t b { font-size: 18px; } .lvp-t small { font-size: 11px; color: #b9b29c; }
.dchip { height: 27px; border-width: 2px; background: rgba(0,0,0,.55); opacity: .75; } .dchip img { width: 16px; height: 16px; }
.dnm b { font-size: 14px; font-weight: 800; } .dnm small { font-size: 11px; color: #c4bfa8; }
.lvp-st { font-size: 11px; font-weight: 800; color: #d4b866; margin: 9px 0 5px; text-shadow: 0 1px 0 #000; }
.lvp-me { padding: 7px 9px; background: rgba(0,0,0,.5); border: 2px solid rgba(168,137,74,.35); border-radius: 10px; }
.lvp-sc b { font-size: 19px; } .lvp-sc img { width: 19px; height: 19px; } .lvp-rk { font-size: 12.5px; color: #f0ead2; }
.lvp-meta { font-size: 12px; color: #d2d0bf; } .lvp-set img { width: 24px; height: 24px; }
.lvp-hint, .lvp-none { font-size: 12px; color: #c4bfa8; }
.lvp .trow { padding: 4px 7px; border-width: 2px; background-color: #22141a; }
.lvp .trow .nm { font-size: 13.5px; font-weight: 700; color: #fff6dc; text-shadow: 0 1px 0 #000; } .lvp .trow .nm small { font-size: 10px; color: #b9b29c; font-weight: 600; }
.lvp .trow .av { width: 27px; height: 27px; } .lvp .rwrap .rs { font-size: 14px; font-weight: 800; color: #ffeaa8; } .lvp .rwrap .rs img { width: 15px; height: 15px; }
.lvp .trow .rk { font-size: 15px; font-weight: 800; } .lvp .rarr { width: 22px; height: 22px; }
.lvp-top .trow { border-width: 2px; }
.lvp-go { min-height: 40px !important; font-size: 21px !important; }

.rinfo .rl.full b, .rinfo .rl.full small { color: #6fe05a; text-shadow: 0 0 8px rgba(80,230,70,.5), 0 1px 0 #000; }
.wfull { color: #6fe05a; font-weight: 800; }
.rdiff { display: flex; align-items: center; gap: 5px; margin: 6px 0 0; padding: 4px 6px; border-radius: 7px; font-size: 11.5px; color: #c4bfa8; background: rgba(0,0,0,.35); border-left: 3px solid var(--c, #888); } .rdiff img { width: 14px; height: 14px; } .rdiff b { color: var(--c, #fff); }
.lvp-dn { font-style: normal; order: 3; margin-left: 2px; padding: 1px 7px; border-radius: 999px; font-size: 9.5px; letter-spacing: .04em; color: var(--c); border: 1px solid var(--c); background: rgba(0,0,0,.4); }
.lvp-st { flex-wrap: nowrap; } .lvp-st::after { order: 2; }

/* выбор сложности: кнопка «Играть» под плитой, не перекрывает прокручиваемый текст */
.dcol { flex: 0 0 var(--cw); height: 100%; display: flex; flex-direction: column; gap: 6px; scroll-snap-align: center; scroll-snap-stop: always; opacity: .72; transform: scale(.94); transition: opacity .2s, transform .2s; }
.dcol.cur { opacity: 1; transform: none; }
.dcol .dcard { flex: 1 1 0; min-height: 0; height: auto; width: 100%; opacity: 1; transform: none; scroll-snap-align: none; }
.dcol .dfoot { flex: none; padding: 0; background: none; }
.dcol .dfoot .btn.play { flex: 1; }

/* ───── сундуки: рисованные из div (замена картинкам), карточки в магазине и окно открытия ───── */

/* карточки сундуков в магазине */
.sh-chests { display: flex; flex-direction: column; gap: 12px; }
.chcard { display: grid; grid-template-columns: 112px 1fr; grid-template-areas: "art name" "art desc" "art btns" "info info" "odds odds"; gap: 4px 12px; padding: 12px; border-radius: 12px; background: linear-gradient(#2a1d1a, #140d0c); border: 3px solid #060606; box-shadow: inset 0 0 0 2px #7a6740; }
.chcard.silver { box-shadow: inset 0 0 0 2px #7d96b0; } .chcard.gold { box-shadow: inset 0 0 0 2px #d8a82a, 0 0 16px rgba(255,200,60,.25); }
.chcard .chart { grid-area: art; display: grid; place-items: center; width: 112px; height: 100px; overflow: visible; } .chcard .chart img { width: 112px; height: 100px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.chcard .chn { grid-area: name; font-family: var(--gothic); font-size: 19px; color: #f0e2b4; text-shadow: 0 2px 0 #000; align-self: end; }
.chcard .chd { grid-area: desc; font-size: 11.5px; color: #c4bfa8; line-height: 1.3; }
.chcard .chbtns { grid-area: btns; display: flex; gap: 8px; margin-top: 4px; }
.chcard .chb { flex: 1; min-height: 38px; padding: 0 8px; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 5px; border-width: 9px !important; border-image-width: 9px !important; }
.chcard .chinfo { grid-area: info; justify-self: start; font-size: 11px; color: #bfa86a; text-decoration: underline; background: none; padding: 2px 0; }
.chcard .chodds { grid-area: odds; display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.4); } .chcard .chodds.hidden { display: none; }
.chodds .od { display: flex; justify-content: space-between; font-size: 12px; color: #d8d4c0; padding-left: 8px; border-left: 3px solid var(--rc, #888); } .chodds .od b { color: #ffe9a8; }
.chodds small { color: var(--muted); font-size: 10.5px; margin-top: 3px; }
.r-c { --rc: #aab0b8; } .r-u { --rc: #6adf6a; } .r-r { --rc: #4aa8ff; } .r-e { --rc: #b46aff; } .r-l { --rc: #ffcf3a; }

.chcard .chb img { width: 22px !important; height: 22px !important; object-fit: contain; }

.dnrow { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; } .dnrow .dname { margin: 0; } .dnrow .dico { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); } .dcard.locked .dico { filter: grayscale(1) brightness(.6); }
.srow.inv .sr-ic { width: 52px; height: 52px; flex: none; object-fit: contain; } .srow.inv .btn { flex: none; width: 104px; min-height: 40px; padding: 6px 4px; font-size: 14px; }

/* ───── нижняя панель вкладок ───── */
#tabbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; justify-content: space-around; align-items: flex-end; gap: 2px; padding: 6px 6px calc(var(--sa-bottom) + 6px); background: linear-gradient(180deg, rgba(10,8,9,0) 0, rgba(10,8,9,.97) 16%, #0a0809 100%); border-top: 0; }
#tabbar .tab { position: relative; flex: 1 1 0; max-width: 100px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0; background: none; color: #a89e84; font-family: var(--font); font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 1px 0 #000; -webkit-tap-highlight-color: transparent; }
#tabbar .tab img { width: 66px; height: 66px; object-fit: contain; filter: brightness(.72) saturate(.8) drop-shadow(0 2px 3px rgba(0,0,0,.7)); transition: transform .18s, filter .18s; }
#tabbar .tab.on { color: #ffe08a; } #tabbar .tab.on img { transform: translateY(-6px) scale(1.14); filter: drop-shadow(0 0 9px rgba(255,214,90,.7)) drop-shadow(0 3px 4px rgba(0,0,0,.7)); }
#tabbar .tab:active img { transform: scale(.92); } #tabbar .tab.on:active img { transform: translateY(-6px) scale(1.06); }
body.hastabs .screen.sub { padding-bottom: calc(var(--sa-bottom) + 108px); }
body.hastabs #title { padding-bottom: calc(var(--sa-bottom) + 112px); }
#moremenu { position: absolute; right: 8px; bottom: calc(var(--sa-bottom) + 84px); z-index: 46; display: flex; flex-direction: column; gap: 6px; width: 190px; padding: 8px; border-radius: 12px; background: rgba(10,8,10,.94); border: 2px solid #5c4a28; box-shadow: 0 8px 24px rgba(0,0,0,.7); animation: morein .16s ease-out; }
#moremenu .stn { min-height: 44px; } @keyframes morein { from { opacity: 0; transform: translateY(8px); } }
body.hastabs .title-actions { margin-top: auto; margin-bottom: 14px; }

/* ───── карточка здания (подготовка к бою) в духе коллекционных карт: лента-заголовок, описание, медальоны характеристик ───── */
.tcard { position: relative; width: 100%; padding: 14px 10px 10px; border-radius: 14px; background: radial-gradient(ellipse at 50% 0%, #3a2c22 0%, #1b130f 70%), #140d0a; border: 3px solid #090504; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc) 70%, #6a4a1a), inset 0 0 0 4px #0c0705, inset 0 0 22px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.6); }
.tcard::before, .tcard::after { content: ''; position: absolute; top: 5px; width: 9px; height: 9px; background: var(--tc); transform: rotate(45deg); border: 1px solid #090504; box-shadow: 0 0 6px var(--tc); }
.tcard::before { left: 5px; } .tcard::after { right: 5px; }
.tc-t { position: relative; margin: -26px auto 8px; width: max-content; max-width: 92%; padding: 3px 26px 4px; text-align: center; background: linear-gradient(#7a2432, #3e0f18); border: 2px solid var(--tc); border-radius: 5px; box-shadow: 0 3px 0 #060303, 0 0 12px color-mix(in srgb, var(--tc) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%, 9px 50%); }
.tc-t span { font-family: var(--gothic); font-size: 19px; letter-spacing: .03em; color: #fbe9b6; text-shadow: 0 2px 0 #000, 0 0 10px rgba(255,200,90,.45); white-space: nowrap; }
.tc-d { position: relative; margin: 0 4px 10px; padding: 8px 12px; text-align: center; font-size: 12.5px; line-height: 1.32; font-style: italic; color: #e8dcc0; background: linear-gradient(rgba(255,235,190,.07), rgba(255,235,190,.025)); border-top: 1px solid rgba(216,178,90,.5); border-bottom: 1px solid rgba(216,178,90,.5); }
.tc-s { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 6px; }
.md { width: 58px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.md .mi { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #6b5530, #1a1209 78%); box-shadow: 0 0 0 2px #c79a3e, 0 0 0 3.5px #1a1005, 0 3px 6px rgba(0,0,0,.7), inset 0 0 8px rgba(0,0,0,.7); }
.md .mi img { width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 1px 1px #000); }
.md b { font-family: var(--font); font-weight: 700; font-size: 16px; line-height: 1; color: #fff3cf; text-shadow: 0 1.5px 0 #000, 0 0 6px rgba(0,0,0,.8); margin-top: 3px; }
.md small { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #bda676; line-height: 1; text-shadow: 0 1px 0 #000; }
.tcard.prem { box-shadow: inset 0 0 0 2px #e6b83a, inset 0 0 0 4px #0c0705, inset 0 0 22px rgba(0,0,0,.6), 0 0 18px rgba(255,200,60,.3); }
/* все чипы характеристик: значок в круглом медальоне */
.ch { padding: 2px 9px 2px 3px; background: linear-gradient(#2c1e14, #150d08); border: 1.5px solid #6d5122; box-shadow: inset 0 0 0 1px rgba(255,220,140,.08); }
.ch img { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #6b5530, #1a1209 78%); box-shadow: 0 0 0 1.5px #c79a3e, 0 1px 3px #000; margin-left: -1px; }
#dinfo { border: 2px solid #6d5122 !important; background: linear-gradient(#2b1f17, #130c08) !important; }
#dinfo b { color: #fbe9b6; }
.lo-info:has(.tcard) { background: none; border: 0; padding: 36px 6px 2px; min-height: 0; }

.arch.dic { width: min(46vw, 170px); height: auto; aspect-ratio: 1; margin: 2px auto 0; border: 0; border-radius: 0; background: none; overflow: visible; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)) drop-shadow(0 0 16px color-mix(in srgb, var(--c) 45%, transparent)); }
.arch.dic img { width: 100%; height: 100%; object-fit: contain; padding: 0; background: none; }
.dcard.locked .arch.dic img { filter: grayscale(1) brightness(.5); }

.fnow { margin-top: 3px; font-size: 12px; color: #bda676; } .fnow b { color: #ffe08a; font-weight: 700; text-shadow: 0 1px 0 #000; } .fnow.zero b { color: #8a8070; }

.title-aux { display: flex; gap: 10px; } .title-aux .stn { flex: 1; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 8px; } .title-aux .stn .tk { width: 30px; height: 30px; object-fit: contain; flex: none; } .title-aux .stn span { font-size: 15px; }

.title-aux { width: 100%; } .title-aux .stn { width: auto; flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; } .title-aux .stn span { font-size: 13px; letter-spacing: .02em; } .title-aux .stn .tk { width: 24px; height: 24px; }
/* главный экран: компактные кнопки одна под другой */
#title .title-actions { width: min(100%, 270px); gap: 8px; }
#title .title-aux { display: contents; }
#title .title-actions .stn, #title .title-actions .stn.primary, #title .title-actions .stn.ranked { width: 100%; min-height: 46px; padding: 6px 12px; font-size: 17px; flex: none; }
#title .title-actions .stn.primary { font-size: 19px; min-height: 50px; }
#title .title-actions .stn .tk, #title .title-actions .stn.ranked .tk { width: 28px; height: 28px; margin: 0; flex: none; object-fit: contain; }
#title .title-actions .stn span { font-size: inherit; letter-spacing: .03em; }

.lo-info:has(.tcard) { justify-content: flex-start; flex: none; padding: 30px 8px 0; min-height: 0; overflow: visible; }
.tcard { padding: 8px 8px 8px; } .tcard::before, .tcard::after { top: 6px; }
.tc-t { margin: -22px auto 6px; padding: 2px 22px 3px; } .tc-t span { font-size: 17px; }
.tc-d { margin: 0 2px 8px; padding: 5px 10px; font-size: 11.5px; line-height: 1.25; }
.tc-s { gap: 6px 4px; } .md { width: 54px; } .md .mi { width: 34px; height: 34px; } .md .mi img { width: 21px; height: 21px; } .md b { font-size: 15px; margin-top: 2px; } .md small { font-size: 9px; }
#loadout .subbody.lo > * { flex: none; }
.lo-info:has(.tcard) { margin-top: 6px; }

/* ───── окно открытия сундука ───── */
.cfx { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; padding: calc(var(--sa-top) + max(2vh, 12px)) 10px calc(var(--sa-bottom) + max(2vh, 12px)); background: radial-gradient(ellipse at 50% 38%, rgba(48,26,56,.985) 0%, rgba(8,4,12,.995) 72%); opacity: 0; transition: opacity .35s; overflow: hidden; user-select: none; -webkit-user-select: none; }
.cfx.in { opacity: 1; } .cfx.out { opacity: 0; }
.cfx.quake { animation: cfxquake .45s linear; }
@keyframes cfxquake { 0%, 100% { transform: none; } 15% { transform: translate(-7px, 4px); } 30% { transform: translate(6px, -5px); } 45% { transform: translate(-5px, -3px); } 60% { transform: translate(4px, 4px); } 80% { transform: translate(-2px, 1px); } }
.cfx-title { position: relative; z-index: 4; font-family: var(--gothic); font-size: 24px; color: #f4e7bd; text-shadow: 0 3px 0 #000, 0 0 18px rgba(255,200,80,.5); text-align: center; opacity: 0; transform: translateY(-14px); transition: opacity .5s .15s, transform .5s .15s; }
.cfx.in .cfx-title { opacity: 1; transform: none; }
.cfx-rays { position: absolute; left: 50%; top: 38%; width: 170vmax; height: 170vmax; transform: translate(-50%, -50%); opacity: 0; transition: opacity .6s; pointer-events: none; z-index: 1;
  background: repeating-conic-gradient(from 0deg, rgba(255,214,110,.26) 0deg 7deg, transparent 7deg 20deg); -webkit-mask: radial-gradient(circle, #000 0%, transparent 36%); mask: radial-gradient(circle, #000 0%, transparent 36%); animation: cfxspin 26s linear infinite; }
.cfx.charge .cfx-rays { opacity: .35; } .cfx.burst .cfx-rays { opacity: 1; } .cfx.got .cfx-rays { opacity: .85; }
.cfx.got.r-c .cfx-rays { background: repeating-conic-gradient(from 0deg, rgba(170,176,184,.25) 0deg 7deg, transparent 7deg 20deg); }
.cfx.got.r-u .cfx-rays { background: repeating-conic-gradient(from 0deg, rgba(90,176,255,.3) 0deg 7deg, transparent 7deg 20deg); }
.cfx.got.r-r .cfx-rays { background: repeating-conic-gradient(from 0deg, rgba(138,106,255,.34) 0deg 7deg, transparent 7deg 20deg); }
.cfx.got.r-e .cfx-rays { background: repeating-conic-gradient(from 0deg, rgba(255,90,208,.34) 0deg 7deg, transparent 7deg 20deg); }
.cfx.got.r-l .cfx-rays { background: repeating-conic-gradient(from 0deg, rgba(255,214,60,.46) 0deg 7deg, transparent 7deg 20deg); }
@keyframes cfxspin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.cfx-glow { position: absolute; left: 50%; top: 38%; width: min(120vw, 560px); height: min(120vw, 560px); transform: translate(-50%, -50%) scale(.6); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cc) 70%, transparent) 0%, transparent 62%); opacity: 0; transition: opacity .6s, transform .8s; pointer-events: none; z-index: 1; }
.cfx.in .cfx-glow { opacity: .3; transform: translate(-50%, -50%) scale(.85); } .cfx.charge .cfx-glow { opacity: .7; transform: translate(-50%, -50%) scale(1); } .cfx.burst .cfx-glow { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
.cfx-stage { position: relative; z-index: 3; flex: 1 1 0; min-height: 0; width: 100%; display: grid; place-items: center; }
.cfx-3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; touch-action: none; }
.cfx.has3d .cfx-circle, .cfx.has3d .cfx-flat { display: none; }
.cfx-flat { position: relative; width: min(64vw, 280px); aspect-ratio: 1.12; opacity: 0; } .cfx.flat-in .cfx-flat { opacity: 1; animation: cfxdrop .8s cubic-bezier(.3,1.2,.5,1) both; }
.cfx-flat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .cfx-flat .fo { opacity: 0; } .cfx.burst .cfx-flat .fo { opacity: 1; } .cfx.burst .cfx-flat .fc { opacity: 0; }
@keyframes cfxdrop { 0% { transform: translateY(-70vh) scale(.8); opacity: 0; } 14% { opacity: 1; } 62% { transform: translateY(0) scale(1.06, .92); } 80% { transform: translateY(-12px) scale(.98, 1.03); } 100% { transform: none; opacity: 1; } }
.cfx-circle { position: absolute; left: 50%; top: 56%; width: min(86vw, 340px); aspect-ratio: 1; transform: translate(-50%, -50%) rotateX(72deg); opacity: 0; pointer-events: none; }
.cfx-circle i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--cc); box-shadow: 0 0 20px var(--cc); }
.cfx-hint { position: absolute; left: 0; right: 0; bottom: 4%; text-align: center; z-index: 4; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #e9d9a4; text-shadow: 0 2px 0 #000; opacity: 0; pointer-events: none; }
.cfx.idle .cfx-hint { opacity: 1; animation: cfxhint 1.4s ease-in-out infinite; } @keyframes cfxhint { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.cfx-flash { position: absolute; inset: 0; z-index: 8; background: radial-gradient(circle at 50% 38%, #fff 0%, rgba(255,255,255,.85) 35%, rgba(255,255,255,0) 75%); opacity: 0; pointer-events: none; }
.cfx.burst .cfx-flash { animation: cfxflash .7s ease-out forwards; } @keyframes cfxflash { 0% { opacity: 0; } 12% { opacity: .9; } 100% { opacity: 0; } }
.cfx-ring { position: absolute; left: 50%; top: 38%; z-index: 3; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 5px solid #fff; opacity: 0; pointer-events: none; }
.cfx.burst .cfx-ring { animation: cfxring .9s ease-out forwards; } @keyframes cfxring { 0% { transform: scale(.4); opacity: .95; border-width: 10px; } 100% { transform: scale(16); opacity: 0; border-width: 1px; } }
.cfx-fly-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.cfx-fly { position: absolute; left: var(--x0, 50%); top: var(--y0, 40%); width: 50px; height: 50px; object-fit: contain; opacity: 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.7)) drop-shadow(0 0 10px rgba(255,220,120,.6)); border-radius: 18%; }
.cfx-sparks { position: absolute; left: 50%; top: 38%; z-index: 6; pointer-events: none; } .cfx-sparks i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); animation: cfxspark var(--t, 1s) cubic-bezier(.1,.7,.3,1) forwards; }
.cfx-sparks i.st { border-radius: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); width: 16px; height: 16px; left: -8px; top: -8px; }
@keyframes cfxspark { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
/* выпавшая добыча поднимается над сундуком */
.cfx-loot { position: absolute; left: 50%; top: 36%; z-index: 7; width: min(44vw, 180px); transform: translate(-50%, -50%) scale(.2); opacity: 0; pointer-events: none; display: grid; place-items: center; }
.cfx-loot img { width: 100%; max-height: min(24vh, 180px); object-fit: contain; border-radius: 18%; filter: drop-shadow(0 0 22px var(--rc)) drop-shadow(0 6px 10px rgba(0,0,0,.7)); } .cfx-loot img.prem { filter: drop-shadow(0 0 26px #ffd24a) drop-shadow(0 6px 10px rgba(0,0,0,.7)); }
.cfx.rise .cfx-loot { animation: cfxrise 1s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes cfxrise { 0% { transform: translate(-50%, -20%) scale(.2) rotate(-14deg); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; } }
.cfx.got .cfx-loot { animation: cfxfloat 2.4s ease-in-out infinite; transform: translate(-50%, -50%) scale(1); opacity: 1; } @keyframes cfxfloat { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -56%) scale(1.04); } }
/* рулетка, как в кейсах */
.cfx-rl { position: relative; z-index: 6; width: 100%; height: 0; opacity: 0; transition: height .45s, opacity .35s; overflow: hidden; margin-top: 4px; }
.cfx.spin .cfx-rl { height: 128px; opacity: 1; } .cfx.got .cfx-rl { height: 0; opacity: 0; margin: 0; transition: height .5s .1s, opacity .4s; }
.rl-view { position: relative; width: 100%; height: 118px; overflow: hidden; margin-top: 4px; background: linear-gradient(rgba(0,0,0,.55), rgba(20,14,26,.7)); border-top: 2px solid #5e4a2a; border-bottom: 2px solid #5e4a2a; -webkit-mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.rl-mark { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #ffd24a; box-shadow: 0 0 12px #ffd24a, 0 0 4px #fff; z-index: 3; } .rl-mark::before, .rl-mark::after { content: ''; position: absolute; left: -7px; width: 17px; height: 10px; background: #ffd24a; } .rl-mark::before { top: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); } .rl-mark::after { bottom: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.rl-strip { display: flex; gap: 6px; padding: 7px 0; will-change: transform; height: 100%; }
.rl-strip .rc { flex: none; width: 96px; height: 104px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rc) 30%, #1c1622), #120e16 75%); border: 2px solid color-mix(in srgb, var(--rc) 55%, #000); border-bottom: 5px solid var(--rc); box-shadow: inset 0 0 14px color-mix(in srgb, var(--rc) 25%, transparent); }
.rl-strip .rc img { width: 58px; height: 58px; object-fit: contain; border-radius: 16%; } .rl-strip .rc small { font-size: 11px; color: #eee6cf; text-align: center; line-height: 1.1; max-width: 90px; font-weight: 600; }
.cfx.stopped .rl-strip .rc:not(.win) { opacity: .35; transition: opacity .4s; } .cfx.stopped .rl-strip .rc.win { transform: scale(1.08); box-shadow: 0 0 22px var(--rc), inset 0 0 14px var(--rc); transition: transform .3s; }
/* итог */
.cfx-result { position: relative; z-index: 6; width: min(92vw, 380px); min-height: 100px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .45s; margin-top: 4px; }
.cfx.got .cfx-result { opacity: 1; transform: none; }
.cfx-result .rn { font-family: var(--gothic); font-size: 28px; color: #fff1c8; text-shadow: 0 3px 0 #000, 0 0 20px var(--rc); line-height: 1.1; }
.cfx-result .rr { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--rc); font-weight: 800; text-shadow: 0 1px 0 #000; }
.cfx-result .rc2 { font-size: 12.5px; color: #e9d9a4; } .cfx-result .rc2 b { color: #fff; } .cfx-result .rs { font-size: 12px; color: #c4bfa8; line-height: 1.3; max-width: 320px; }
.cfx-actions { position: relative; z-index: 7; display: flex; flex-direction: column; gap: 8px; align-items: center; width: 100%; min-height: 96px; opacity: 0; transition: opacity .4s; pointer-events: none; } .cfx.done .cfx-actions { opacity: 1; pointer-events: auto; }
.cfx-actions .btn { width: min(300px, 86%); }
/* несколько сундуков: сетка добычи */
.cfx-batch { position: absolute; left: 0; right: 0; top: 56px; bottom: 120px; z-index: 6; display: flex; flex-direction: column; gap: 10px; padding: 0 10px; opacity: 0; pointer-events: none; transition: opacity .5s; }
.cfx.showb .cfx-batch { opacity: 1; pointer-events: auto; } .cfx.showb .cfx-stage { opacity: .25; transition: opacity .5s; }
.bgrid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; align-content: start; padding: 4px; }
.bc { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border-radius: 10px; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rc) 28%, #1c1622), #120e16 75%); border: 2px solid color-mix(in srgb, var(--rc) 55%, #000); border-bottom: 4px solid var(--rc); animation: bcin .4s both; }
.bc img { width: 52px; height: 52px; object-fit: contain; border-radius: 16%; } .bc b { font-size: 16px; color: #fff3cf; text-shadow: 0 1.5px 0 #000; } .bc small { font-size: 10px; color: #cfc6ac; text-align: center; line-height: 1.1; }
@keyframes bcin { from { opacity: 0; transform: translateY(10px) scale(.9); } }
.bsum { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 15px; color: #fff3cf; font-weight: 700; } .bsum span { display: flex; align-items: center; gap: 5px; } .bsum img { width: 28px; height: 28px; object-fit: contain; }

/* карточка сундука: склад, количество, покупка, открытие */
.chcard { grid-template-columns: 112px 1fr; grid-template-areas: "art name" "art desc" "qty qty" "buy buy" "open open" "info info" "odds odds"; }
.chcard .chart { position: relative; } .chcard .chart img { filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.chstock { position: absolute; right: -2px; top: -2px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; display: grid; place-items: center; font-size: 15px; color: #1a1005; background: linear-gradient(#ffe27a, #d89a22); border: 2px solid #1a1005; box-shadow: 0 2px 4px rgba(0,0,0,.6); } .chstock.zero { background: #3a3a3e; color: #888; }
.chd b { color: #ffe08a; }
.chqty { grid-area: qty; display: flex; gap: 6px; margin-top: 4px; } .cq { flex: 1; height: 32px; border-radius: 8px; background: #1c1612; border: 2px solid #4a3a22; color: #cbb98a; font-family: var(--font); font-weight: 700; font-size: 15px; } .cq.on { background: linear-gradient(#6b4e1c, #3a2a0e); border-color: #e0b04a; color: #fff1c8; box-shadow: 0 0 10px rgba(255,200,80,.4); }
.chcard .chbtns { grid-area: buy; } .chcard .chbtns.open { grid-area: open; }
.chb.go { font-size: 15px; } .chb.go.poor { opacity: .5; }
.chodds .od { align-items: center; gap: 8px; } .chodds .od img { width: 24px; height: 24px; object-fit: contain; border-radius: 16%; flex: none; } .chodds .od span { flex: 1; } .chodds { max-height: 300px; overflow-y: auto; }
.r-c { --rc: #aab0b8; } .r-u { --rc: #5ab0ff; } .r-r { --rc: #8a6aff; } .r-e { --rc: #ff5ad0; } .r-l { --rc: #ffcf3a; }

/* покупка сундуков: стрелками меняется количество, шансы открываются по нажатию на сундук */
.chcard { grid-template-areas: "art name" "art desc" "buy buy" "open open" "odds odds"; } .chcard .chart { cursor: pointer; }
.chstep { display: flex; align-items: center; flex: none; height: 38px; border-radius: 10px; background: #1c1612; border: 2px solid #4a3a22; }
.chstep .sa { width: 28px; height: 100%; background: none; color: #ffe08a; font-size: 24px; line-height: 1; padding: 0 0 3px; } .chstep .sa:disabled { color: #5a4c32; }
.chstep .sn { min-width: 26px; text-align: center; font-size: 17px; color: #fff1c8; }

/* главный экран: кнопки без значков, одного размера, меньше; логотип меньше (рейтинговый забег оставлен прежним) */
#title { padding-top: calc(var(--sa-top) + 44px); }
.logo-img.big { width: min(60vw, 250px, 28vh); } #title .logo-img { margin: 0 0 calc(-0.05 * min(60vw, 250px, 28vh)); }
#title .title-actions { width: min(100%, 250px); gap: 8px; }
#title .title-actions .stn:not(.ranked) { width: 100%; min-height: 40px; padding: 4px 10px; font-size: 16px; border-width: 10px; border-image-width: 10px; margin: 0; }
#title .title-actions .stn:not(.ranked) span { font-size: 16px; letter-spacing: .04em; white-space: nowrap; }
body.hastabs #title .title-actions { margin-top: 34px; margin-bottom: auto; }
.chcard .chb.go { white-space: nowrap; font-size: 14px; padding: 0 4px; }
/* рейтинговый забег: плита с руками. Каменная часть 720 из 789 px по ширине и 175 из 225 по высоте: ширина кнопки = ширина остальных / .913, надпись по центру плиты */
#title .title-actions .stn.ranked { width: 109.5%; margin: 0 -4.75% 4px; min-height: 0; height: auto; aspect-ratio: 789 / 225; border: 0; border-image: none; padding: 0 6% 6%; gap: 6px; justify-content: center; align-items: center; box-sizing: border-box; flex: none; background: url(../img/ui/plate_hands.webp) 0 0 / 100% 100% no-repeat !important; }
#title .title-actions .stn.ranked .tk { width: 24px; height: 24px; margin: 0; flex: none; border-radius: 4px; }
#title .title-actions .stn.ranked span { font-size: 13.5px; letter-spacing: 0; white-space: nowrap; }
.chcard .chb .chstock.in { position: static; flex: none; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; font-size: 14px; line-height: 20px; color: #1a1005; background: linear-gradient(#ffe27a, #d89a22); border: 2px solid #1a1005; box-shadow: 0 2px 4px rgba(0,0,0,.6); text-shadow: none; display: grid; place-items: center; }
#dailybox { margin-bottom: 6px; }

/* магазин: бесплатный сундук, значки призов, красная точка на вкладке */
.freech { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: linear-gradient(135deg, rgba(40,90,40,.55), rgba(0,0,0,.55)), var(--slab); box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px #5bd05b; } .freech.off { box-shadow: 0 0 0 2px #0b0c0c; opacity: .8; }
.freech img { width: 52px; height: 46px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); } .freech b { flex: 1; font-family: var(--gothic); font-size: 17px; color: #f0e2b4; text-shadow: 0 2px 0 #000; font-weight: 400; }
.freech .chb { flex: none; width: 112px; min-height: 40px; }
.chtop { display: flex; gap: 6px; margin-top: 7px; } .chtop i { width: 34px; height: 34px; border-radius: 8px; background: rgba(0,0,0,.45); border: 2px solid var(--c, #888); box-shadow: 0 0 8px color-mix(in srgb, var(--c, #888) 55%, transparent); display: grid; place-items: center; } .chtop i img { width: 28px; height: 28px; object-fit: contain; }
#tabbar .tab.dot::after { content: ''; position: absolute; top: 6px; right: calc(50% - 34px); width: 14px; height: 14px; border-radius: 50%; background: #ff3b30; border: 2px solid #1a0a08; box-shadow: 0 0 8px rgba(255,60,48,.8); z-index: 2; }

/* кровавый уровень недели: красная пульсирующая обводка вокруг значка на карте и красная плашка */
.node.weekly img.ni { filter: drop-shadow(2px 0 0 #c4000a) drop-shadow(-2px 0 0 #c4000a) drop-shadow(0 2px 0 #c4000a) drop-shadow(0 -2px 0 #c4000a) drop-shadow(0 0 7px #ff1a0a); }      /* обводка по форме иконки: статичная, без анимации фильтра (она грела телефон) */
.node.weekly::before { content: ''; position: absolute; left: 50%; top: -12px; width: 92px; height: 92px; margin-left: -46px; border-radius: 50%; background: radial-gradient(circle, rgba(255,30,20,.6) 0%, rgba(255,30,20,.28) 42%, rgba(255,30,20,0) 70%); animation: wkglow 2.2s ease-in-out infinite; will-change: opacity; pointer-events: none; z-index: 0; }
@keyframes wkglow { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

.wk { margin: 8px 0 2px; padding: 10px 10px 9px; border-radius: 12px; background: linear-gradient(180deg, rgba(120,10,16,.75), rgba(40,4,8,.85)); box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px #d21e1e, 0 0 16px rgba(255,30,20,.45); text-align: center; }
.wk-t { font-family: var(--gothic); font-size: 17px; color: #ffd9d4; text-shadow: 0 2px 0 #000, 0 0 10px rgba(255,60,40,.8); }
.wk-r { display: flex; justify-content: center; gap: 18px; margin-top: 7px; } .wk-r span { display: flex; align-items: center; gap: 5px; } .wk-r b { font-family: var(--font); font-size: 20px; color: #fff1c8; }
.wk-c { margin-top: 7px; font-size: 12px; color: #f0b8b0; }

/* недельный узел: площадка-алтарь на воде, затемнён, когда пройден; обратный отсчёт под значком */
.node.weekly { width: 96px; }
.node.weekly::after { content: ''; position: absolute; left: 50%; top: 22px; width: 74px; height: 30px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(110,8,12,.95) 0%, rgba(50,4,8,.9) 62%, rgba(20,2,4,0) 100%); box-shadow: 0 0 16px rgba(255,20,10,.55); z-index: 0; pointer-events: none; }
.node.weekly img.ni { position: relative; z-index: 1; width: 52px; }
.node.weekly .nl { position: relative; z-index: 1; background: rgba(90,6,10,.82); color: #ffd9d4; }
.node.weekly.wkdone img.ni { filter: grayscale(.75) brightness(.7) drop-shadow(0 2px 3px rgba(0,0,0,.75)); } .node.weekly.wkdone::before { display: none; }
.node.weekly.wkdone::after { box-shadow: none; opacity: .5; } .node.weekly.wkdone .nl { background: rgba(20,20,24,.82); color: #aeb2b8; }
.wk-time { margin-top: 9px; padding-top: 7px; border-top: 1px solid rgba(255,120,100,.3); display: flex; flex-direction: column; align-items: center; gap: 2px; } .wk-time small { font-size: 11px; color: #f0b8b0; } .wk-time b { font-family: var(--font); font-size: 18px; color: #fff1c8; }

/* сноска «Комбинируется с…» под описанием башни */
.tc-c { margin-top: 5px; font-size: 11px; color: #d9b45a; font-style: italic; text-align: center; } small.fc { display: block; margin-top: 3px; font-size: 11px; color: #d9b45a; font-style: italic; }

/* пауза: текущая сложность */
.ps-d { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 8px; } .ps-d img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 3px #000); } .ps-d b { font-family: var(--gothic); font-size: 20px; color: var(--dc, #ffd24a); text-shadow: 0 2px 0 #000, 0 0 10px color-mix(in srgb, var(--dc, #ffd24a) 60%, transparent); font-weight: 400; } .ps-d span { font-size: 11px; color: #ff8f84; border: 1px solid #a0302a; border-radius: 9px; padding: 1px 6px; }

/* итоги уровня: плита неподвижна, всё вмещается в экран; эмблема победы или поражения и плашка сложности */
#endmenu { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#endmenu .modal { max-height: none; flex: none; margin: auto; }
#end-hero { display: flex; justify-content: center; margin: -4px 0 -6px; } #end-hero:empty { display: none; }
.eh { position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
.eh .ehr { position: absolute; inset: -14px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255,214,90,0), rgba(255,214,90,.55), rgba(255,214,90,0) 25%, rgba(255,214,90,.55) 50%, rgba(255,214,90,0) 75%, rgba(255,214,90,.55), rgba(255,214,90,0)); -webkit-mask: radial-gradient(circle, transparent 42%, #000 44%, #000 70%, transparent 72%); mask: radial-gradient(circle, transparent 42%, #000 44%, #000 70%, transparent 72%); }
.eh .ehi { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 36% 28%, #7a5d2a, #1c1208 78%); box-shadow: 0 0 0 3px #e0b04a, 0 0 0 5px #1a1005, 0 0 26px rgba(255,200,80,.6), inset 0 0 14px rgba(0,0,0,.7); } .eh .ehi img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 2px 3px #000); }
.eh.lose .ehr { background: conic-gradient(from 0deg, rgba(255,60,50,0), rgba(255,60,50,.45), rgba(255,60,50,0) 25%, rgba(255,60,50,.45) 50%, rgba(255,60,50,0) 75%, rgba(255,60,50,.45), rgba(255,60,50,0)); } .eh.lose .ehi { background: radial-gradient(circle at 36% 28%, #6a2424, #170707 78%); box-shadow: 0 0 0 3px #c0382c, 0 0 0 5px #1a0605, 0 0 26px rgba(255,60,50,.55), inset 0 0 14px rgba(0,0,0,.7); }
#end-sub:empty { display: none; } .es { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: -2px; } .es b { font-family: var(--gothic); font-weight: 400; font-size: 16px; color: #e8dcc0; text-shadow: 0 2px 0 #000; }
.es span { display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px 2px 5px; border-radius: 999px; background: rgba(0,0,0,.5); border: 1.5px solid var(--dc, #ffd24a); color: var(--dc, #ffd24a); font-size: 13px; font-weight: 700; letter-spacing: .03em; text-shadow: 0 1px 0 #000; } .es span img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 1px 2px #000); }

/* плавность прокрутки и нагрев: свои слои, прокрутка не передаётся странице, карточки вне экрана не рисуются */
.screen, .subbody, .dbody, #worldscroll { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#worldmap { transform: translateZ(0); backface-visibility: hidden; }
.sh-card, .chcard, .pcard, .frow, .krow, .ach, .ach-row { content-visibility: auto; contain-intrinsic-size: auto 120px; }

.srow .btn.perf { flex: none; width: auto; min-width: 116px; min-height: 40px; padding: 6px 12px; font-size: 15px; }

/* выбор сложности: медальон без плитки с цветным свечением; строки на тёмной подложке, текст светлый и с обводкой, значки с тёмным контуром */
.dcard .arch.dic { width: 160px; height: 160px; margin: -2px auto 0; border: 0; border-radius: 0; background: none; overflow: visible; box-shadow: none; }
.dcard .arch.dic img { object-fit: contain; padding: 0; background: none; filter: drop-shadow(0 5px 6px rgba(0,0,0,.85)) drop-shadow(0 0 16px var(--c)); }
.dcard.locked .dport .arch.dic img { filter: grayscale(1) brightness(.5) drop-shadow(0 4px 5px rgba(0,0,0,.85)); }
.dcard .dname { filter: none; color: var(--c); font-size: 28px; text-shadow: 0 2px 0 #000, 0 0 3px #000, 0 0 14px #000, 0 0 12px var(--c); }
.dcard .dsub { color: #f1e3b0; text-shadow: 0 1px 0 #000, 0 0 4px #000; }
.dcard .mrow { background: rgba(8,6,6,.55); border: 0; box-shadow: none; border-radius: 9px; padding: 6px 9px; margin: 4px 0; gap: 9px; align-items: center; }
.dcard .mrow img { width: 30px; height: 30px; margin: 0; filter: drop-shadow(0 0 1.5px #000) drop-shadow(0 0 1.5px #000) drop-shadow(0 2px 2px rgba(0,0,0,.8)); }
.dcard .mrow .mt { color: #f6eedc; font-size: 14.5px; text-shadow: 0 1px 2px #000, 0 0 3px #000; } .dcard .mrow .mt small { color: #d6cdb8; font-size: 12px; text-shadow: 0 1px 2px #000; }
.dcard .mrow b { text-shadow: 0 1px 0 #000, 0 0 4px #000; font-size: 17px; }
.dcard .mrow.bad b { color: #ff9a88; } .dcard .mrow.good b { color: #a6f27c; } .dcard .mrow.neutral b { color: #ffe08a; }

/* карточка здания: описание и сноска о комбинациях — в отдельных рамках, одна под другой, ничего не налезает */
.tcard { display: flex; flex-direction: column; }
.tc-d { margin: 0 2px 6px; flex: none; }
.tc-c { position: relative; flex: none; margin: 0 2px 8px; padding: 5px 10px; text-align: center; font-size: 11.5px; line-height: 1.28; font-style: normal; font-weight: 600; color: #f3dc90; background: linear-gradient(rgba(120,90,20,.28), rgba(60,40,8,.35)); border: 1px solid color-mix(in srgb, var(--tc) 55%, #1a1005); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); text-shadow: 0 1px 1px #000; }
small.fc { display: block; margin-top: 6px; padding: 4px 8px; font-size: 11.5px; font-style: normal; font-weight: 600; color: #f3dc90; background: rgba(90,66,14,.35); border: 1px solid rgba(220,180,80,.45); border-radius: 7px; text-shadow: 0 1px 1px #000; }

/* обучение: затемнение с окном вокруг цели, указатель-перчатка и сообщение рядом с целью */
#tuthand { position: fixed; z-index: 44; pointer-events: none; height: auto; transform-origin: 7% 5%; animation: handtap 1.1s ease-in-out infinite; filter: drop-shadow(0 5px 6px rgba(0,0,0,.75)); }
@keyframes handtap { 0%, 100% { transform: translate(0, 0) scale(1); } 45% { transform: translate(14px, 16px) scale(1); } 60% { transform: translate(0, 0) scale(.93); } }

img.cutg { object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.8)); background: none !important; border: 0 !important; box-shadow: none !important; }

/* глобальная карта: крупнее значки и подписи рубежей */
.node { width: 112px; }
.node img.ni { width: 56px; }
.node.cleared img.ni { width: 70px; margin-top: -5px; margin-bottom: -5px; }
.node.tutnode img.ni { width: 42px; height: 42px; border-radius: 10px; }
.node .nl { font-size: 11.5px; padding: 0 7px; max-width: 112px; }
.node.weekly { width: 120px; } .node.weekly img.ni { width: 66px; }
.node.weekly::before { top: -14px; width: 112px; height: 112px; margin-left: -56px; } .node.weekly::after { top: 28px; width: 90px; height: 36px; }
/* плашка «Один раз» у стартового набора: content-visibility обрезала всё, что выступает за рамку карточки */
.sh-card.starter { content-visibility: visible; contain: none; margin-top: 12px; overflow: visible; }
.sh-card.starter .rib { top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.freech .btn { white-space: nowrap; font-size: 13px; padding-left: 8px; padding-right: 8px; }
/* премиум-башни в магазине: последний неполный ряд по центру, а не прижат влево */
.sh-prem { display: flex; flex-wrap: wrap; justify-content: center; }
.sh-prem .pcard { flex: 0 0 calc((100% - 2 * var(--gap, 8px)) / 3); min-width: 0; box-sizing: border-box; }

/* покупка сундуков за Stars: отдельной строкой под ценами в душах и кристаллах */
.chcard .chbtns { flex-wrap: wrap; }
.chcard .chb.star { flex: 1 1 100%; min-height: 36px; font-size: 15px; letter-spacing: .02em; }

/* шансы сундука: переключатель «За Stars / За души» */
.chodds .odt { display: flex; gap: 6px; margin-bottom: 6px; } .chodds .odtab { flex: 1; min-height: 30px; border-radius: 9px; border: 1.5px solid #4a4f54; background: #141617; color: #b9bdc2; font-family: var(--font); font-size: 13px; }
.chodds .odtab.on { border-color: #e0b040; color: #ffe9a8; background: #2a2210; }

/* выбор сложности: плитка сложности как в исходной картинке, компактнее; кнопка «Играть» ниже */
.dcard .arch.dic { width: 96px; height: 96px; margin: 0 auto; }
.dcard .arch.dic img { filter: drop-shadow(0 3px 4px rgba(0,0,0,.8)); border-radius: 12px; }
.dcard.locked .dport .arch.dic img { filter: grayscale(1) brightness(.5) drop-shadow(0 3px 4px rgba(0,0,0,.8)); }
.dcard .dname { font-size: 25px; margin-top: 4px; margin-bottom: 4px; }
.dcol .dfoot .btn.play { min-height: 36px; height: 38px; padding-top: 0; padding-bottom: 0; font-size: 18px; }
/* названия сложностей: шрифт Diablo (DiabloFont, fonts/diablo.ttf, с ofont.ru), мельче прежнего, с цветным свечением */
.dcard .dname, .ps-d b { font-family: 'DiabloFont', var(--gothic); font-size: 17px; letter-spacing: .05em; -webkit-text-stroke: 0; text-shadow: 0 2px 0 #000, 0 0 3px #000, 0 0 14px var(--c, var(--dc, #ff5a3a)); }
.ps-d b { font-size: 15px; }

/* ───── единый размер кнопок: у всех плит-кнопок одна высота и один шрифт (кроме плиты «Рейтинговый забег» с руками и значков) ───── */
:root { --btn-h: 46px; }
.stn:not(.ranked), .btn:not(.buy), .btn.big.buy {
  box-sizing: border-box !important; height: var(--btn-h) !important; min-height: var(--btn-h) !important; max-height: var(--btn-h) !important;
  border-width: 11px !important; border-image-width: 11px !important; padding: 0 12px !important; font-size: 17px !important; line-height: 1 !important; letter-spacing: .05em;
  display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
}
.stn:not(.ranked) span, .btn span { font-size: inherit !important; }
.stn-grid .stn, .langgrid .stn, #moremenu .stn, .title-aux .stn, .dfoot .btn, .dcol .dfoot .btn.play, .chcard .chb, .btn.tb-forge, .btn.perf, .stn.small { height: var(--btn-h) !important; min-height: var(--btn-h) !important; font-size: 17px !important; }
.btn.tb-forge { width: auto; padding: 0 14px !important; }

/* плитки выбора зданий для уровня: иконка занимает почти всю плитку, подпись и цена мельче и ниже */
.lo-cards { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 9px 7px; }
.loc { padding: 4px 4px 5px; gap: 1px; border-radius: 11px; }
.loc .ci { width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; }
.loc .cn { font-size: 10.5px; line-height: 1.02; min-height: 0; height: 21px; letter-spacing: 0; }
.loc .cc { font-size: 12px; gap: 3px; margin-top: 1px; } .loc .cc img { width: 12px; height: 12px; }
.loc .chk { top: 3px; right: 3px; width: 19px; height: 19px; } .loc .chk.on::after { left: 6px; top: 2px; width: 5px; height: 10px; border-width: 0 2.5px 2.5px 0; }
.loc .crn { top: 2px; left: 2px; width: 18px; height: 18px; }
.loc .lk img { width: 22px; height: 22px; }

/* выбранные здания: только иконка почти во всю плитку, без подписи */
.lo-slots { gap: 7px; padding-left: 4px; padding-right: 4px; }
.los { width: auto; height: auto; flex: 1 1 0; max-width: 72px; aspect-ratio: 1; padding: 0; }
.los.full img { width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; border-radius: 9px; }
.los.full small { display: none; }
.los.lock img { width: 46%; height: auto; }

/* названия уровней: шрифт Diablo везде (карта, плашка уровня, заголовок подготовки) */
.node .nl, .lvp-t b, #lo-title { font-family: 'DiabloFont', var(--gothic) !important; font-weight: 400 !important; letter-spacing: .04em; }
.node .nl { font-size: 9.5px !important; padding: 1px 7px 0; max-width: none !important; white-space: nowrap; margin-top: 5px !important; position: relative; z-index: 2; line-height: 1.35 !important; }
.lvp-t b { font-size: 17px !important; }
#lo-title { font-size: 14px !important; line-height: 1.05; }

/* Кузница: карточки зданий и премиум-башен — крупная иконка слева, справа название и описание, внизу на всю ширину ряд кнопок покупки одинакового размера */
.frow.bld { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "i t" "b b"; column-gap: 14px; row-gap: 12px; align-items: center; padding: 14px; }
.frow.bld .fi { grid-area: i; width: 92px; height: 92px; border-radius: 14px; object-fit: contain; }
.frow.bld .ft { grid-area: t; align-self: center; }
.frow.bld .fn { font-size: 18px; line-height: 1.15; margin-bottom: 5px; }
.frow.bld .fd { font-size: 13px; line-height: 1.4; margin: 0; color: #c4b8b0; }
.frow.bld > .fbuy, .frow.bld .fbuys { grid-area: b; width: 100%; }
.frow.bld .fbuys { display: flex; flex-direction: row; gap: 10px; }
.frow.bld .fbuy { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 8px; font-size: 16px; box-sizing: border-box; border-radius: 11px; }
.frow.bld > .fbuy { height: 34px; flex: none; }

/* плитки и слоты подготовки: ровные одинаковые отступы (обводка выбранной плитки занимает ~4 px, поэтому зазор больше) */
.lo-slots { gap: 12px; padding-left: 8px; padding-right: 8px; }
.lo-cards { gap: 14px 12px; padding: 4px 4px 2px; }
.btn.gold.poor, .btn.gold:disabled { pointer-events: none; filter: grayscale(1) brightness(.6) !important; }

/* обучение: рамка-«окно» вокруг цели с тенью на весь экран (это и есть затемнение, скругление такое же, как у цели); четыре невидимые панели вокруг не пускают касания мимо */
#tutlayer { position: fixed; inset: 0; z-index: 43; pointer-events: none; }
#tutlayer > i { position: fixed; background: transparent; pointer-events: auto; touch-action: none; }
#tutring { --dim: 0 0 0 200vmax rgba(5,2,6,.74); --g1: 0 0 0 1px rgba(0,0,0,.6), 0 0 10px 1px rgba(255,200,80,.55), inset 0 0 8px rgba(255,200,80,.25); --g2: 0 0 0 1px rgba(0,0,0,.6), 0 0 22px 4px rgba(255,200,80,.95), inset 0 0 16px rgba(255,200,80,.45);
  position: fixed; pointer-events: none; box-sizing: border-box; border: 3px solid #ffd65a; animation: tutring 1.1s ease-in-out infinite; }
#tutring.nodim { --dim: 0 0 0 0 transparent; }
#tutring.cv { border-color: transparent; --g1: 0 0 0 0 transparent; --g2: 0 0 0 0 transparent; animation: none; box-shadow: var(--dim); }
@keyframes tutring { 0%, 100% { box-shadow: var(--g1), var(--dim); } 50% { box-shadow: var(--g2), var(--dim); } }
#tutcatch { position: fixed; display: none; pointer-events: auto; touch-action: none; }
#tuthand { z-index: 44; }

/* длинное содержимое подэкранов прокручивается, а не сжимает строки (в английской версии кнопка языка сжималась до 21px) */
.screen.sub > *, .subbody > *, #settingsbody > *, #achlist > *, #boardlist > *, #premium > *, #unlocks > *, #perks > *, #slotsbox > * { flex-shrink: 0; }

/* ═════════ выбор языка: кнопка в настройках и выпадающий список с поиском и флагами ═════════ */
.lgcur { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 14px; text-align: left; color: #ece6d4; background: linear-gradient(#202326, #111314); border: 2px solid #4c5156; border-radius: 10px; font-family: var(--font); }
.lgcur:active { transform: scale(.985); }
.lgcur .fl, .lgrow .fl { font-size: 26px; line-height: 1; flex: none; }
.lgcur b { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; }
.lgcur i { flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 2.5px solid #9d968a; border-bottom: 2.5px solid #9d968a; transform: rotate(45deg) translateY(-2px); }
.lgov { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(4, 2, 5, .72); }
.lgsheet { display: flex; flex-direction: column; width: min(100%, 480px); max-height: min(82vh, 640px); padding: 12px 12px calc(var(--sa-bottom) + 12px); background: linear-gradient(#24151a, #12090c); border: 2px solid #4c5156; border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .6); }
.lgsearch { display: flex; align-items: center; gap: 8px; flex: none; padding: 0 12px; height: 44px; margin-bottom: 8px; background: #0d0709; border: 1.5px solid #4c5156; border-radius: 10px; }
.lgsearch span { font-size: 15px; opacity: .7; }
.lgsearch input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: #ece6d4; font-family: var(--font); font-size: 16px; -webkit-appearance: none; appearance: none; }
.lgsearch input::placeholder { color: #8a8378; }
.lglist { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.lglist > * { flex-shrink: 0; }
.lgrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 6px 12px; text-align: left; color: #ece6d4; background: linear-gradient(#202326, #111314); border: 1.5px solid #3c4146; border-radius: 10px; font-family: var(--font); }
.lgrow:active { transform: scale(.985); }
.lgrow .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lgrow .nm b { font-size: 15.5px; font-weight: 700; }
.lgrow .nm small { font-size: 11.5px; color: #9d968a; }
.lgrow.on { border-color: #b8922a; background: linear-gradient(#3a2e14, #1e1809); }
.lgrow .ck { flex: none; width: 7px; height: 13px; margin-right: 6px; border-right: 3px solid #ffd65a; border-bottom: 3px solid #ffd65a; transform: rotate(45deg) translateY(-2px); }
.lgempty { padding: 14px; text-align: center; color: #8a8378; }
/* первый запуск: окно выбора языка по центру экрана, с заголовком */
.lgov.first { align-items: center; padding: 16px; }
.lgov.first .lgsheet { border-bottom: 2px solid #4c5156; border-radius: 16px; padding-bottom: 12px; max-height: min(86vh, 660px); }
.lghead { flex: none; padding: 4px 4px 12px; text-align: center; color: #ffd65a; font-family: var(--font); font-size: 21px; font-weight: 700; letter-spacing: .02em; }

/* сложность рядом с результатом и в таблицах */
.dflab { display: inline-flex; align-items: center; gap: 4px; flex: none; margin-left: auto; padding: 1px 8px 1px 3px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--dc) 55%, transparent); background: color-mix(in srgb, var(--dc) 14%, rgba(0,0,0,.45)); font-family: var(--font); letter-spacing: 0; text-transform: none; }
.dflab img { width: 18px; height: 18px; object-fit: contain; } .dflab b { font-size: 11.5px; font-weight: 700; color: var(--dc); white-space: nowrap; }
.lvp-st .dflab { margin-left: 4px; } .lvp-st .dflab b { font-size: 10.5px; }
.lvp-sc .dflab { margin-left: auto; }
.rrow .dfi { flex: none; width: 22px; height: 22px; object-fit: contain; }

/* карточки списков (Кузница, магазин, награды, таблицы) всегда в раскладке: content-visibility с оценкой 120px при реальных ~190px пересчитывал высоту на ходу, и прокрутка дёргалась */
.sh-card, .chcard, .pcard, .frow, .krow, .ach, .ach-row, .arow, .brow, .trow { content-visibility: visible; contain-intrinsic-size: none; }
.rmore .rdiff { display: flex; justify-content: flex-start; padding-bottom: 7px; }
.rmore .rdiff .dflab { margin-left: 0; }

/* сложность — просто значок и название, без плашки */
.dflab { padding: 0; border: 0; background: none; border-radius: 0; gap: 5px; }
.dflab img { width: 20px; height: 20px; }

/* рейтинговый забег: значки зданий крупнее, значки правил и плашки — ровные плитки */
.rkb .slots { display: flex; flex-wrap: nowrap; gap: 6px; justify-content: center; }
.rkb .slots img { flex: 1 1 0; min-width: 0; max-width: 60px; width: auto; height: auto; aspect-ratio: 1; border-radius: 9px; }
.rk-slab .rslots, #board .rslots { flex-wrap: nowrap; gap: 6px; }
.rk-slab .rslots img, #board .rslots img { flex: 1 1 0; min-width: 0; max-width: 56px; width: auto; height: auto; aspect-ratio: 1; border-radius: 9px; }
.rkb .two img { width: 30px; height: 30px; border-radius: 7px; }
.rk-best .bf img, .rk-best .br img { width: 22px; height: 22px; border-radius: 5px; }
.rk-rules .mrow img { width: 30px; height: 30px; border-radius: 7px; margin-top: 0; }
.rk-rules .mrow img.scimg { width: 30px; height: 30px; }
.rrow .rt img { width: 16px; height: 16px; border-radius: 4px; }
/* значки зданий: крупные, по три в ряд — легко узнать каждое */
.rkb .slots { flex-wrap: wrap; gap: 8px; }
.rkb .slots img { flex: none; width: 72px; height: 72px; max-width: none; aspect-ratio: auto; border-radius: 11px; }
.rk-slab .rslots, #board .rslots { flex-wrap: wrap; gap: 8px; }
.rk-slab .rslots img, #board .rslots img { flex: none; width: 60px; height: 60px; max-width: none; aspect-ratio: auto; border-radius: 10px; }
.rmore .rdiff { margin: 0; padding: 0 0 8px; background: none; border: 0; border-radius: 0; }
.rmore .rdiff .dflab img { width: 22px; height: 22px; }
.rmore .rdiff .dflab b { font-size: 13px; }

/* значок и название сложности: яркий оригинал, крупно */
.dflab img { width: 28px; height: 28px; filter: none; opacity: 1; }
.dflab b { font-size: 13px; }
.lvp-st .dflab img { width: 22px; height: 22px; } .lvp-st .dflab b { font-size: 11px; }
.rmore .rdiff .dflab { gap: 8px; }
.rmore .rdiff .dflab img { width: 40px; height: 40px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.rmore .rdiff .dflab b { font-size: 15px; }
.rmore .rdiff { padding-bottom: 10px; }

/* карточка уровня на карте: здания не меньше значка сложности (28px у результата, 40px в развёрнутом меню) */
.lvp .lvp-set { gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.lvp .lvp-set img { width: 38px; height: 38px; border-radius: 8px; }
.lvp .rslots { gap: 6px; flex-wrap: wrap; justify-content: center; }
.lvp .rslots img { width: 44px; height: 44px; border-radius: 9px; }

/* карточка уровня: значок и название сложности умеют переноситься, здания делят ширину поровну (хоть 2, хоть 5 слотов) и не меньше значка сложности */
.lvp-sc { flex-wrap: wrap; row-gap: 4px; }
.lvp-sc .dflab { flex: 0 0 100%; margin: 2px 0 0; }
.dflab { max-width: 100%; min-width: 0; }
.dflab b { white-space: normal; min-width: 0; line-height: 1.1; overflow-wrap: anywhere; }
.lvp .lvp-set { display: flex; flex-wrap: nowrap; gap: 4px; justify-content: flex-start; }
.lvp .lvp-set img { flex: 1 1 0; min-width: 0; max-width: 44px; width: auto; height: auto; aspect-ratio: 1; }
.lvp .rslots { flex-wrap: nowrap; gap: 4px; justify-content: center; }
.lvp .rslots img { flex: 1 1 0; min-width: 0; max-width: 48px; width: auto; height: auto; aspect-ratio: 1; }
.rmore .rdiff .dflab img { width: 30px; height: 30px; }

/* строки правил (сложность, рейтинговый забег): значение справа не вытесняет название, а длинное переносится */
.mrow .mt { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.mrow b { flex: 0 1 auto; max-width: 46%; min-width: 0; text-align: right; line-height: 1.1; overflow-wrap: anywhere; }
/* кнопка «Позвать» и другие кнопки в строках настроек: ширина по тексту, но не больше половины строки */
.srow.inv .btn, .srow .btn { flex: 0 1 auto; width: auto; min-width: 104px; max-width: 50%; padding-left: 10px; padding-right: 10px; }
.srow .btn.perf { max-width: 50%; }
/* ники в таблицах: длинное обрезается многоточием, а не вылезает */
.rrow .nm, .trow .nm, .brow .nm { overflow: hidden; }
.rrow .nm, .rrow .nm small, .trow .nm, .brow .nm { text-overflow: ellipsis; white-space: nowrap; }
.rrow .nm small { display: block; overflow: hidden; text-overflow: ellipsis; }

/* верхняя панель на узких экранах: заголовок и кнопка Кузницы сжимаются, а не уезжают за край */
.topbar h2 { min-width: 0; }
.topbar .btn.tb-forge { flex: 0 1 auto; min-width: 0; max-width: 42%; padding: 0 10px !important; }
.topbar .lo-cnt { flex: none; }
/* длинное значение в строке правил (например «schon auf den ersten Karten») уходит под название на всю ширину */
.mrow.long { flex-wrap: wrap; }
.mrow.long .mt { flex: 1 1 calc(100% - 40px); }
.mrow.long b { flex: 0 0 100%; max-width: 100%; text-align: left; padding: 0 0 2px 32px; }

/* «сейчас в игре»: зелёная точка мягко мигает, рядом значок людей и число, всё зелёное */
.online { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--slab); box-shadow: 0 0 0 2px #0b0c0c, 0 0 0 3.5px #3fae3a, 0 4px 10px rgba(0,0,0,.7); font-family: var(--font); font-weight: 700; font-size: 17px; color: #7dff6a; text-shadow: 0 0 8px rgba(80,255,60,.45), 0 1px 0 #000; pointer-events: none; }
.online svg { width: 20px; height: 20px; fill: #7dff6a; filter: drop-shadow(0 0 4px rgba(80,255,60,.5)); flex: none; }
.online .ol-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #5dff4a; box-shadow: 0 0 6px 1px rgba(93,255,74,.9); animation: olpulse 2.2s ease-in-out infinite; }
@keyframes olpulse { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px 2px rgba(93,255,74,.9); } 50% { opacity: .3; transform: scale(.72); box-shadow: 0 0 2px 0 rgba(93,255,74,.4); } }
@media (prefers-reduced-motion: reduce) { .online .ol-dot { animation: none; } }

/* общий счётчик на других экранах: компактнее, прижат к правому краю панели; всплывающее «+2» / «−1» и мягкий «щелчок» цифры */
.topbar .online { margin-left: auto; flex: none; height: 32px; padding: 0 10px 0 9px; font-size: 15px; gap: 5px; }
.topbar .online svg { width: 18px; height: 18px; }
.online { position: relative; }
.online .ol-n { display: inline-block; min-width: 2.2ch; text-align: right; font-variant-numeric: tabular-nums; }

/* в Telegram (своя кнопка «Назад») панель карты скрыта целиком, а счётчик «сейчас в игре» остаётся в правом верхнем углу */
body.tgback #world .topbar { display: block; position: absolute; left: auto; right: 10px; top: calc(var(--sa-top) + 8px); width: auto; height: auto; padding: 0; background: none; border: 0; box-shadow: none; z-index: 6; pointer-events: none; }
body.tgback #world .topbar > :not(.online) { display: none; }
body.tgback #world .topbar .online { margin: 0; }