/* =====================  Перша сторінка за макетом власника (2026-09-28)  ===================== */
/* Відступи від країв екрана. Знизу — смужка жестів: системна (env) чи від Telegram, більша з двох (на iOS вони
   однакові — не додаємо двічі). Зверху — лише в Telegram на весь екран (index.html: requestFullscreen): рядок стану
   телефона + кнопки Telegram «Закрити» й «⋯» поверх гри; висоти дає сам Telegram (0, коли не на весь екран). */
:root {
  --sab: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --sat: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
}
#app { padding-top: var(--sat); }
[hidden] { display: none !important; }
#app {
  background:
    repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule) 27px 28px),
    var(--paper);
}

/* --- шапка: назва й рівень, під ними три гаманці (ADR-003: монети · золото · кристали з «+») --- */
#top { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px 5px; position: relative; z-index: 2; }
#top .top-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
#top .brand { display: flex; align-items: center; gap: 4px; min-width: 0; }
#top .i-picks { width: 36px; height: 36px; flex: none; }
#top h1 { font-size: 36px; white-space: nowrap; text-decoration-thickness: 2px; }
#top .prof-btn { margin-left: auto; }
/* гаманці: дві пігулки на всю ширину (золото ліворуч, монети з «+» праворуч — Сергій 2026-10-20), кожна — від свого вмісту (довше число — ширша пігулка), решта місця — порівну;
   число не влазить — менший шрифт (screens.js: fitText), далі «…» */
#top .wallets { display: flex; gap: 7px; min-width: 0; }
.wl {
  position: relative; flex: 1 1 auto; min-width: 0; height: 34px; display: flex; align-items: center; gap: 3px; padding: 0 10px 0 3px;
  font: inherit; color: var(--ink); text-align: left; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  background: #fff1b8; border: 2px solid var(--ink); border-radius: 999px;   /* пігулка — як рамка від руки (sketch.js: r 'pill') */
  box-shadow: 1px 2px 0 rgba(29, 42, 107, .25);
}
.wl-gold { background: #ffe08c; }
.wl-coin { padding-right: 3px; }   /* «+» — магазин монет */
.wl img { flex: none; width: auto; height: 28px; }
.wl-gold img { height: 30px; margin-right: -1px; }
.wl b { flex: 1 1 auto; min-width: 0; font-size: 24px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* «+» біля монет — маленька біла кнопка дії (.act.lt, вигляд — у блоці кнопок нижче) */
.plus { flex: none; }
.lvl-badge {
  position: relative; flex: none; padding: 3px 10px; font-size: 18px; font-weight: 700; white-space: nowrap;
  background: #e6f1d8; border: 2px solid var(--ink); border-radius: 10px 14px 12px 9px / 12px 9px 14px 10px;
  box-shadow: 1px 2px 0 rgba(29, 42, 107, .2);
}
.lvl-badge b { font-size: 20px; }
.lvl-badge .i-crown { position: absolute; top: -10px; right: -5px; width: 22px; height: 14px; }
.lvl-badge .i-crown path { fill: #3c5bb5; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }

/* --- іконки «ручкою» (inline SVG) --- */
svg .handle { fill: none; stroke: #9a6a38; stroke-width: 4.5; stroke-linecap: round; }
svg .steel { fill: #cfd6e4; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
svg .lid { fill: #c9955a; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
svg .box { fill: #dcb27a; stroke: var(--ink); stroke-width: 2; }
svg .band { fill: none; stroke: #6b7590; stroke-width: 3; stroke-linecap: round; }
svg .lock { fill: #f0bd23; stroke: var(--ink); stroke-width: 1.8; }
svg .ray { stroke: #e0a200; stroke-width: 2.4; stroke-linecap: round; }
svg .rock { fill: #b8c0d2; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
svg .gold { fill: #f0bd23; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
svg .coin { fill: #f3c33a; stroke: var(--ink); stroke-width: 1.8; }
svg .ink { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
svg .wall { fill: #e9f0fb; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
svg .door { fill: #b98a50; stroke: var(--ink); stroke-width: 1.8; }
svg .up { fill: none; stroke: #4e9a3e; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
svg .paper { fill: #fbf7ea; stroke: var(--ink); stroke-width: 2.2; }
svg .clip { fill: #cfd6e4; stroke: var(--ink); stroke-width: 2; }
svg .head, svg .body { fill: #cfd6e4; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }

/* --- картки: папір, чорнило, кільця блокнота --- */
.card {
  position: relative; background: var(--paper-2); border: 2px solid var(--ink);
  border-radius: 14px 10px 16px 12px / 12px 16px 10px 14px; box-shadow: 2px 3px 0 rgba(29, 42, 107, .22);
}
.card.ring { padding-left: 20px; }
.card.ring::before {
  content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 9px;
  background: radial-gradient(circle at 4.5px 5px, #fff 2.3px, var(--ink) 2.8px, transparent 3.4px) 0 0 / 9px 15px repeat-y;
}
.card-title { font-size: 23px; font-weight: 700; line-height: 1; }
.card-sub { font-size: 16px; color: var(--ink-soft); margin-top: 2px; }
img.c { width: 18px; height: 18px; vertical-align: -3px; }

#screens { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page-mine { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 6px 12px 8px; }
.bonus { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 20px; }
.bonus .i-chest { width: 60px; height: 50px; flex: none; }
.bonus .card-body { min-width: 0; }
.btn.pill {
  margin-top: 5px; padding: 1px 8px 3px; font-size: 17px; font-weight: 700; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3px; background: #ffe27a;
}
.combo { padding: 8px 8px 8px 20px; cursor: pointer; }

/* --- карта шахти по центру --- */
.map-frame {
  flex: 1; min-height: 190px; margin: 0 8px; position: relative; overflow: hidden;
  border: 2px solid var(--ink); border-radius: 12px 16px 14px 18px / 16px 12px 18px 14px;
  box-shadow: 2px 3px 0 rgba(29, 42, 107, .22); background: var(--paper);
}
.map-frame #view { position: absolute; inset: 0; border-radius: 10px 14px 12px 16px / 14px 10px 16px 12px; }

/* --- дохід і склад: показники, не кнопки — без рамки, число на жовтому маркері (власник 2026-10-25, варіант В з
   workshop/stats.html; рамка й тінь лишаються тому, що натискається) --- */
.stats2 { display: grid; grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr); gap: 0; padding: 9px 12px 0; }   /* посередині — язичок мапи */
.stats2 .rate { grid-column: 1; }
.stats2 .storage { grid-column: 3; }
.rate { display: flex; align-items: center; gap: 6px; padding: 5px 4px; white-space: nowrap; }
.rate .i-rate { width: auto; height: 36px; flex: none; vertical-align: 0; }   /* самородок: видобуток золота за годину */
/* «+N / год» — одним рядком (власник: «щоб в ряд писав»); не влазить — менше разом із числом (b — в em; screens.js: fitRate) */
.rate > div { flex: 1; min-width: 0; overflow: hidden; font-size: 18px; }
.rate b { font-size: 1.5em; }
#s-rate, #s-store { padding: 0 4px; margin: 0 -2px; border-radius: 3px;
  background: linear-gradient(176deg, transparent 14%, #ffe27a 14% 86%, transparent 86%); }
.storage { display: flex; align-items: center; gap: 8px; padding: 5px 4px; }
.storage img { width: 34px; height: 34px; flex: none; }
.st-main { flex: 1; min-width: 0; line-height: 1; }
.st-num { font-size: 24px; font-weight: 700; white-space: nowrap; overflow: hidden; }   /* не влазить — screens.js: fitStore */
.st-num.solo #s-cap { display: none; }
.bar { height: 12px; margin-top: 3px; overflow: hidden; background: #fbf7ea; border: 2px solid var(--ink); border-radius: 8px 6px 9px 7px; }
.bar i {
  display: block; height: 100%; width: 0; transition: width .4s;
  background: repeating-linear-gradient(-45deg, #97cf72 0 6px, #7ab558 6px 9px); box-shadow: 1.5px 0 0 var(--ink);
}
#s-pct { font-size: 18px; font-weight: 700; }
/* склад майже повний — смужка жовта, повний — червона, число на червоному маркері, смужка «дихає» (власник 10-25: «щоб
   дизайн складу був зрозумілий коли він заповнений а коли пустий»; рівні — core.js: storeLevel, іконка — screens.js: paintStore) */
.storage[data-lvl="3"] .bar i { background: repeating-linear-gradient(-45deg, #f9d461 0 6px, #e8b22a 6px 9px); }
.storage[data-lvl="4"] .bar i { background: repeating-linear-gradient(-45deg, #f2826a 0 6px, #d9503a 6px 9px); }
.storage[data-lvl="4"] #s-store { color: #b3261e; background: linear-gradient(176deg, transparent 14%, #ffc6b8 14% 86%, transparent 86%); }
.storage[data-lvl="4"] .bar { animation: store-full 1.4s ease-in-out infinite; }
@keyframes store-full { 50% { transform: scaleY(1.25); } }
@media (prefers-reduced-motion: reduce) { .storage[data-lvl="4"] .bar { animation: none; } }
@media (max-width: 480px) { #s-pct { display: none; } }   /* до 480 px відсоток — лише смужкою: місце числу складу */

/* --- «Продати» і «Покращити» під мапою — в один ряд (власник 2026-10-25 зі знімком варіанта В з workshop/dock.html:
   «давай ось таку розстановку»; до того 10-24 — Б, дві смуги одна під одною). «Продати» — золота кнопка на весь ряд,
   число — у білій плашці; праворуч квадратна «Покращити»: хатинка зі стрілкою над підписом, червона крапка — є покращення,
   на яке вистачає монет. Тиснеш — кнопка опускається на свою «товщину» (тінь під нею). Поки є що продати, по «Продати»
   біжить відблиск, склад повний — удвічі частіше. Мапа шахти — вища на колишню другу смугу --- */
.dock-row { display: flex; align-items: stretch; gap: 8px; margin: 10px 12px 12px; }
.dock-b { position: relative; display: flex; align-items: center; margin: 0; font: inherit; font-weight: 700; line-height: 1.05;
  color: var(--ink); border: 2.5px solid var(--ink); cursor: pointer;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .06s, box-shadow .06s; }
.dock-l { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
#b-sell { flex: 1 1 auto; min-width: 0; padding: 4px 10px 7px; font-size: 31px; border-radius: 20px 14px 21px 13px / 14px 21px 13px 20px;
  background: linear-gradient(#fff2b0, #ffd856 55%, #ffc93a);
  box-shadow: inset 0 -4px 0 rgba(196, 128, 10, .32), inset 0 3px 0 rgba(255, 255, 255, .75), 0 5px 0 var(--ink); }
#b-sell .dock-l { justify-content: center; }
#b-sell:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 -4px 0 rgba(196, 128, 10, .32), inset 0 3px 0 rgba(255, 255, 255, .75), 0 2px 0 var(--ink); }
#b-sell:disabled { color: #6a7194; background: #efede4; border-color: #8d93ad; box-shadow: 0 4px 0 #8d93ad; cursor: default; }
#sell-v { margin-left: 2px; padding: 0 10px; line-height: 1.08; background: #fffdf6; border: 2px solid var(--ink); border-radius: 13px 10px 14px 9px / 10px 14px 9px 13px; }
#b-sell:disabled #sell-v { border-color: #8d93ad; }
#b-sell .big-au { width: auto; height: 40px; vertical-align: 0; }
#b-sell:not(:disabled) .big-au { animation: coin-flip 2.8s ease-in-out infinite; }
#b-sell.full:not(:disabled) .big-au { animation-duration: 1.4s; }   /* склад повний (SPEC §7) — у такт частішому відблиску */
#b-sell:disabled .big-au { filter: grayscale(.7); opacity: .7; }
#b-sell .sell-c { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; font-size: .62em; }   /* + монети, знайдені шахтарями */
#b-sell .sell-c img.c { width: 24px; height: 24px; vertical-align: 0; }
/* відблиск — у своїй обрізаній рамці: сама кнопка не обрізає, бо в неї кладеться обведення-підказка (screens.js: updateHint) */
.dock-glint { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.dock-glint::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: -70px; width: 46px; transform: skewX(-22deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)); animation: dock-glint 2.8s ease-in-out infinite; }
#b-sell.full .dock-glint::after { animation-duration: 1.4s; }
#b-sell:disabled .dock-glint { display: none; }
@keyframes dock-glint { 0%, 45% { left: -70px; } 80%, 100% { left: calc(100% + 30px); } }
#b-upg { flex: none; justify-content: center; width: 92px; padding: 4px 4px 5px; font-size: 16px; background: #fffdf6;
  border-radius: 16px 11px 17px 10px / 11px 17px 10px 16px; box-shadow: inset 0 -3px 0 rgba(29, 42, 107, .1), 0 5px 0 var(--ink); }
#b-upg:active { transform: translateY(3px); box-shadow: inset 0 -3px 0 rgba(29, 42, 107, .1), 0 2px 0 var(--ink); }
#b-upg .dock-l { flex-direction: column; justify-content: center; gap: 1px; }
#b-upg .i-house { flex: none; width: 42px; height: 38px; }
#b-upg .upg3d { position: relative; display: inline-flex; align-items: flex-end; flex: none; }
#b-upg .upg-up { width: 11px; height: 18px; margin-left: -2px; fill: none; stroke: #4e9a3e; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#b-upg .hub-dot { top: 4px; right: 4px; }

/* --- вкладки --- */
#tabs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; position: relative; z-index: 6;   /* 4 вкладки: «Шахтарі» з v3, «Друзі» прибрано 10-24 (є картка «Реферали») */
  padding: 4px 6px calc(4px + var(--sab)); background: var(--paper-2); border-top: 2.5px solid var(--ink);
}
#tabs .tab {
  font: inherit; font-size: 17px; color: var(--ink); background: none; border: 0; cursor: pointer; touch-action: manipulation;
  display: flex; flex-direction: column; align-items: center; padding: 3px 0 2px;
  border-radius: 16px 12px 18px 14px / 14px 18px 12px 16px;
}
#tabs .tab svg { width: 34px; height: 34px; }
#tabs .tab.on { background: #ffe38a; font-weight: 700; box-shadow: inset 0 0 0 2px rgba(29, 42, 107, .18); }

/* --- заглушки інших вкладок: папір поверх шахти --- */
.page {
  position: absolute; inset: 0; z-index: 5; overflow: auto; padding: 14px 18px;
  background: repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule) 27px 28px), var(--paper);
}
.page h2 { margin: 0 0 6px; font-size: 34px; }
.page p { margin: 0 0 12px; font-size: 21px; color: var(--ink-soft); }

/* --- панель покращень --- */
#sheet, .overlay { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-end; background: rgba(29, 42, 107, .22); }
.sheet-card {
  width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px calc(14px + var(--sab));
  background: repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule) 27px 28px), var(--paper);
  border-top: 2.5px solid var(--ink); border-radius: 20px 24px 0 0 / 14px 18px 0 0; box-shadow: 0 -6px 20px rgba(29, 42, 107, .2);
}
.sheet-head { display: flex; align-items: center; }
.sheet-head h2 { margin: 0; font-size: 30px; }
.sheet-head .x { margin-left: auto; }   /* ✕ — біла кнопка дії (.x.act) */
/* список покращень — плитки (власник 2026-10-19 обрав В із трьох: «давай В плитки»; до того — дерев'яні таблички,
   про які «все на купі не читабельне»): велика 3D-іконка, назва, підпис, плашка ціни внизу; без дерева під текстом.
   Рамка плитки — від руки (sketch.js: «#sheet .btn»), шапка — на всю ширину. */
#sheet .sheet-card { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 94%; overflow-y: auto; }
#sheet .sheet-head { grid-column: 1 / -1; order: -2; }
#sheet .btn {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-height: 0;
  padding: 8px 6px 9px; font-size: 19px; text-align: center; background: #fffdf6; border: 2px solid var(--ink);
  border-radius: 14px 10px 15px 9px / 10px 15px 9px 14px; box-shadow: 2px 3px 0 rgba(29, 42, 107, .16);
}
#sheet #b-deep.btn { background: #fff3c4; }   /* головне покращення — жовтим (сильніше за фон плиток вище) */
#sheet .btn[hidden] { display: none !important; }   /* display: flex плиток інакше перебив би hidden */
#sheet.no-hire #b-deep, #sheet #b-coins { grid-column: 1 / -1; }
#sheet.no-pick #b-cap { grid-column: 1 / -1; }   /* кирку вимкнено (PICK_ON) — склад без порожньої пари */   /* найм вимкнено (HIRE_ON): шахта й «Купити монети» — на всю ширину */
#sheet .upg-ic { flex: none; width: 50px; height: 50px; object-fit: contain; }
#sheet .btn .lbl { display: block; font-weight: 700; }
#sheet .btn .lbl-t { display: block; font-size: 19px; line-height: 1.05; }
#sheet .btn .cost {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 3px; max-width: 100%; padding: 2px 10px;
  font-size: 19px; font-weight: 700; color: var(--ink); background: #ffe27a; border: 2px solid var(--ink); border-radius: 999px;
}
#sheet .btn .cost img { width: 18px; height: 18px; }
#sheet .btn:disabled { opacity: 1; }
#sheet .btn:disabled .upg-ic { filter: grayscale(.7); opacity: .6; }
#sheet .btn:disabled .lbl-t { color: #6a7194; }
#sheet .btn:disabled .cost { font-size: 15px; color: #7d839d; background: #ecebe4; border-color: #9aa0b8; }
#sheet .btn .cost:empty { display: none; }   /* рівень відкривається / найвищий / кирка ціла — ціни нема, пояснення в підписі */
@media (max-height: 700px) {   /* невисокий телефон (360 × 640): усі плитки — без прокрутки */
  #sheet .sheet-card { gap: 6px; }
  #sheet .btn { padding: 6px 5px 7px; gap: 3px; }
  #sheet .upg-ic { width: 40px; height: 40px; }
  #sheet .btn .lbl-t { font-size: 17px; }
  #sheet .btn .lbl-sub { font-size: 14px; }
  #sheet .btn .cost { padding: 1px 9px; font-size: 17px; }
}

/* --- підказка «скоро» --- */
#toast {
  position: absolute; left: 50%; bottom: 96px; z-index: 30; transform: translateX(-50%) rotate(-1.2deg);
  padding: 4px 14px 5px; font-size: 21px; font-weight: 700; white-space: nowrap;
  background: #fff7d6; border: 2px solid var(--ink); border-radius: 12px 4px 14px 5px / 5px 14px 4px 12px;
  box-shadow: 2px 3px 0 rgba(29, 42, 107, .25);
}

/* --- низькі екрани: компактніше, щоб шахті лишалось місце --- */
@media (max-height: 760px) {
  #top h1 { font-size: 30px; }
  .bonus .i-chest { width: 48px; height: 40px; }
  .card-title { font-size: 20px; }
  .card-sub { font-size: 15px; }
  .btn.pill { font-size: 16px; }
  .dock-row { margin-top: 8px; margin-bottom: 10px; }
  #b-sell { font-size: 29px; }
  #b-sell .big-au { height: 34px; }
  .rate > div { font-size: 15px; }
  .st-num { font-size: 22px; }
}
@media (max-height: 660px) {
  .card-sub { display: none; }
  .cards { padding-bottom: 6px; }
  #tabs .tab svg { width: 28px; height: 28px; }
  #tabs .tab { font-size: 15px; }
}

/* --- 3D-іконки сторінки (screens.js: applyUI3D) --- */
canvas.u3d { display: block; flex: none; }

/* --- рамки від руки (sketch.js, rough.js): замість рівних CSS-рамок --- */
svg.sk { position: absolute; left: -4px; top: -4px; pointer-events: none; overflow: visible; z-index: 2; }
.sk-host { position: relative; }
.sk-on { border-color: transparent !important; box-shadow: none !important; }
svg.sk-line { position: absolute; left: 0; pointer-events: none; overflow: visible; }
svg.sk-under { bottom: -12px; }
svg.sk-top { top: -8px; }
.sk-ready #top h1 { text-decoration: none; -webkit-text-stroke: .5px var(--ink); }
.sk-ready #tabs { border-top-color: transparent; }
.sk-ready .sheet-card { border-top-color: transparent; }
.sk-ready .card-title, .sk-ready .wl b, .sk-ready .goal-t { -webkit-text-stroke: .35px var(--ink); }

/* 3D-картинки мають свої пропорції — не розтягувати в квадрат */
.storage img { width: auto; height: 38px; }   /* склад: стоси мішків мають читатися з першого погляду (не менший за самородок) */
/* смужка складу: рамку від руки (svg усередині) не обрізаємо — заповнення має власні заокруглення */
.bar { overflow: visible; }
.bar i { border-radius: 6px 4px 7px 5px; }

/* --- кнопки дії — як «Продати» під мапою (власник 2026-10-25 зі знімком «Рулетка ›»: «всі старі кнопки поприбирай та
   постав нові як в продати»; з 09-29 до того — дерев'яні таблички, screens.js: makeSign). .act — золота (дія вікна чи
   картки), .act.lt — біла (✕, «+», кнопки героя, «Почати гру заново»), .sq — квадратна, значок по центру. Тиснеш —
   опускається на свою «товщину» --d (тінь під нею; .on — натиснута ззовні: кнопки героя з клавіатури); вимкнена — сіра.
   Рамку від руки (sketch.js) кнопки дії не отримують. Фон і світло — змінні: їх перебивають правила з id (#ctrl .pb) --- */
.act {
  --d: 4px;
  --bg: linear-gradient(#fff2b0, #ffd856 55%, #ffc93a);
  --sh: inset 0 -3px 0 rgba(196, 128, 10, .32), inset 0 3px 0 rgba(255, 255, 255, .75);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 4px 14px 6px; font: inherit; font-weight: 700; line-height: 1.05; color: var(--ink);
  background: var(--bg); border: 2.5px solid var(--ink); border-radius: 16px 11px 17px 10px / 11px 17px 10px 16px;
  box-shadow: var(--sh), 0 var(--d) 0 var(--ink);
  cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; transition: transform .06s, box-shadow .06s;
}
.act.lt { --bg: #fffdf6; --sh: inset 0 -3px 0 rgba(29, 42, 107, .1); }
.act:active:not(:disabled), .act.on { transform: translateY(calc(var(--d) - 1px)); box-shadow: var(--sh), 0 1px 0 var(--ink); }
.act:disabled { opacity: 1; color: #6a7194; background: #efede4; border-color: #8d93ad; box-shadow: 0 var(--d) 0 #8d93ad; cursor: default; }
.act:disabled img { filter: grayscale(.7); opacity: .7; }
.act.sq { padding: 0; gap: 0; }
.x.act { width: 40px; height: 40px; --d: 3px; font-size: 22px; }
.plus.act { width: 26px; height: 26px; --d: 2px; font-size: 24px; line-height: 1; border-width: 2px; border-radius: 8px 7px 9px 6px / 7px 9px 6px 8px; }
/* «Продати»: монета обертається разом із відблиском (#b-sell .big-au) */
@keyframes coin-flip {
  0%, 62% { transform: rotateY(0); }
  78% { transform: rotateY(180deg) scale(1.08); }
  94%, 100% { transform: rotateY(360deg); }
}
/* кнопки героя — лише в смузі керування (гра розгортається язичком під мапою) */
#view #pad, #view #pad-dig { display: none !important; }
/* Бонус і комбо дня: комбо — рівно за вмістом (до половини), решта — бонусу, щоб скриня була якомога більшою
   (screens.js: fitChest рахує її розмір із вільного місця). Вузькі телефони — компактніші картки й шапка. */
.cards { grid-template-columns: minmax(0, 1fr) fit-content(50%); }
@media (max-width: 460px) {
  .bonus { padding-left: 17px; padding-right: 5px; gap: 2px; }
  .combo { padding-left: 17px; padding-right: 6px; }
}
@media (max-width: 420px) {
  #top h1 { font-size: 29px; }
  /* дохід і склад по боках язичка мапи: число над «/ год», відсоток складу — лише смужкою */
  .stats2 { grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); }
  .rate { gap: 5px; padding: 4px 2px; }
  .rate > div { font-size: 15px; }
  .storage { gap: 6px; padding: 5px 2px; }
  #s-pct { display: none; }
  .wl b { font-size: 22px; }
}

/* --- нижня панель: великі 3D-іконки просто на листку, вибрана обведена ручкою поверх жовтого маркера
   (screens.js: setupTabs / tabRing; власник 2026-10-04 обрав варіант В, до того — таблички Б від 09-29) --- */
#tabs.t3d { background: none; padding: 7px 4px calc(3px + var(--sab)); gap: 0; }
#tabs.t3d .tab { gap: 4px; padding: 0; background: none; box-shadow: none; border-radius: 0; justify-content: flex-end; }
#tabs.t3d .tab > span:not(.tslot) { font-size: 14.5px; line-height: 1; white-space: nowrap; }   /* напис; не :last-child — обведення-підказка стає останньою дитиною */
#tabs.t3d .tab.on > span:not(.tslot) { font-size: 16px; font-weight: 700; }
#tabs.t3d .tslot { position: relative; flex: none; display: flex; align-items: flex-end; justify-content: center; }
#tabs.t3d .tslot canvas.u3d { position: relative; z-index: 1; transform-origin: 50% 100%; transition: transform .22s cubic-bezier(.3, 1.4, .5, 1), filter .2s; }
#tabs.t3d .tab:not(.on) .tslot canvas.u3d { transform: scale(.885); filter: saturate(.85); }
#tabs.t3d .tab:not(.on) { opacity: .85; }
#tabs.t3d .tring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: visible; pointer-events: none; opacity: 0; transition: opacity .18s; }
#tabs.t3d .tab.on .tring { opacity: 1; }
#tabs.t3d .tab.on .tslot:not(.has-ring)::before {   /* без rough.js — овал маркером */
  content: ""; position: absolute; left: -10px; right: -10px; top: -3px; bottom: -3px; border-radius: 50%; background: #ffe9a8; border: 2px solid var(--ink);
}

/* --- гра на весь екран із керуванням героєм (screens.js: enterPlay / exitPlay; власник 2026-09-29) --- */
#app { --ctrl-h: 124px; }
.dock { display: flex; flex-direction: column; flex: none; }
#ctrl {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; height: calc(var(--ctrl-h) + var(--sab));
  padding: 10px 16px var(--sab); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: #fffdf7; box-shadow: 0 -6px 16px rgba(29, 42, 107, .1);
  transform: translateY(105%); transition: transform .32s cubic-bezier(.55, 0, .8, .35);   /* назад — з розгоном */
}
#app.play #ctrl { transform: none; transition-timing-function: cubic-bezier(.2, .85, .25, 1); }
#app.play-pre #screens { padding-bottom: calc(var(--ctrl-h) + var(--sab)); }
#app.play-pre .map-frame { margin-bottom: 6px; }
#app.play-pre .dock, #app.play-pre #tabs {
  position: absolute; left: 0; right: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule) 27px 28px), var(--paper);
  transition: transform .38s cubic-bezier(.2, .85, .25, 1);   /* повернення — з гальмуванням */
}
#app.play-pre .dock { bottom: var(--tabs-h); z-index: 7; }
#app.play-pre #tabs { bottom: 0; z-index: 8; }
#app.play-pre .dock, #app.play-pre #tabs { transition-delay: .1s; }   /* назад: спершу ховається смуга */
#app.play .dock { transform: translateY(calc(100% + var(--tabs-h) + 12px)); transition-timing-function: cubic-bezier(.55, 0, .8, .35); transition-delay: 0s; }
#app.play #tabs { transform: translateY(calc(100% + 12px)); transition-timing-function: cubic-bezier(.55, 0, .8, .35); transition-delay: 0s; }
#app.play #ctrl { transition-delay: .16s; }   /* туди: смуга виїжджає, коли кнопки вже поїхали */
#app.play-done .dock, #app.play-done #tabs { visibility: hidden; }
/* хрестик ◀ ▶ ▲ ▼ ліворуч (ромбом: ◀ ▶ посередині висоти), «копати» — праворуч */
#ctrl .dpad { justify-self: start; display: grid; grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(4, 26px); column-gap: 8px; row-gap: 2px; }
#ctrl .dpad .pb { place-self: center; }
#ctrl .dpad [data-k=up] { grid-area: 1 / 2 / 3 / 3; }
#ctrl .dpad [data-k=left] { grid-area: 2 / 1 / 4 / 2; }
#ctrl .dpad [data-k=right] { grid-area: 2 / 3 / 4 / 4; }
#ctrl .dpad [data-k=down] { grid-area: 3 / 2 / 5 / 3; }
#ctrl .ctrl-r { grid-column: 3; justify-self: end; margin-right: 6px; }
#ctrl .pb { color: var(--ink); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#ctrl .pb svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#ctrl #pad-dig { position: static; opacity: 1; visibility: visible; transform: none; }
#ctrl #pad-dig .pb svg { width: 34px; height: 34px; }
#ctrl #pad-dig .pb.act { width: 66px; height: 66px; margin: 0; opacity: 1; }
#ctrl .pb.off { visibility: visible; opacity: .35; }          /* ▲ ▼ не біля драбини */
#ctrl #pad-dig:not(.show) .pb { opacity: .35; }               /* поруч нема що копати */
/* кнопки героя — кнопки дії (hero.js: .act): хрестик білий, «копати» золота. Правила #pad-dig .pb зі style.css (кнопки на
   мапі, тепер сховані) переважують .act за id — вигляд повторено змінними .act */
#ctrl .pb.act { width: 50px; height: 50px; background: var(--bg); border: 2.5px solid var(--ink);
  border-radius: 14px 10px 15px 9px / 10px 15px 9px 14px; box-shadow: var(--sh), 0 var(--d) 0 var(--ink); }
#ctrl .pb.act.on { transform: translateY(calc(var(--d) - 1px)); box-shadow: var(--sh), 0 1px 0 var(--ink); }
/* язичок посередині під мапою (screens.js; рамку, що його огинає, малює sketch.js): униз — розгорнути гру,
   у режимі гри — вигнутий у мапу, стрілка вгору — згорнути */
.map-frame { overflow: visible; }
.map-tab {
  position: absolute; left: 50%; top: calc(100% - 2px); z-index: 1; width: 52px; height: 21px; margin-left: -26px; padding: 0 0 3px;
  display: flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer;
  background: var(--paper-2); border: 0; border-radius: 0 0 26px 26px / 0 0 20px 20px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.map-tab::after { content: ""; position: absolute; left: -8px; right: -8px; top: -10px; bottom: -10px; }   /* більша зона дотику */
.map-tab > svg { width: 24px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  animation: tab-bob 2.6s ease-in-out infinite; }
@keyframes tab-bob { 0%, 64%, 100% { transform: translateY(0); } 76% { transform: translateY(3px); } 88% { transform: translateY(0); } }
#app.play-pre .map-tab { top: auto; bottom: 1px; padding: 4px 0 0; background: #fffdf7; border-radius: 26px 26px 0 0 / 20px 20px 0 0; }
#app.play-pre .map-tab > svg { animation: none; transform: rotate(180deg); }
/* поки гравець мало розгортав гру (screens.js: nudgeTab) — язичок світиться й підстрибує: «на мене можна натиснути»
   (Сергій 2026-10-19: «щоб вона мигала… щоб було зрозуміло, що на ту кнопочку можна нажати») */
.map-tab.nudge { animation: tab-glow 1.8s ease-in-out infinite; }
@keyframes tab-glow { 0%, 100% { background: var(--paper-2); box-shadow: 0 0 0 0 rgba(255, 196, 40, 0); }
  50% { background: #ffe27a; box-shadow: 0 2px 10px 2px rgba(255, 196, 40, .75); } }
@media (prefers-reduced-motion: reduce) { .map-tab > svg, .map-tab.nudge { animation: none; } }

/* --- верх за макетом власника (2026-09-29): бонус і комбо | рулетка | реферали й ТОП 25 (index.html: .hub) --- */
.hub { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; padding: 6px 12px 8px; }
.hub .hc {
  position: relative; font: inherit; color: var(--ink); text-align: left; cursor: pointer; touch-action: manipulation;
  display: flex; align-items: center; gap: 2px; min-width: 0; min-height: 66px; padding: 5px 4px 5px 19px;
}
.hub .refs .hc-t, .hub .top .hc-t { font-size: 17px; }
/* «Реферали» й «ТОП 25»: картинка зверху по центру, напис зі стрілкою — під нею, унизу картки (власник 2026-09-29) */
.hub .refs, .hub .top { flex-direction: column; justify-content: center; align-items: center; gap: 0; padding: 3px 5px 4px 18px; }
.hub .refs .hc-txt, .hub .top .hc-txt { flex: none; margin: 0; justify-content: center; gap: 2px; }
.hub .refs .hc-t, .hub .top .hc-t { line-height: 1; }
.hub .refs .hc-chev, .hub .top .hc-chev { font-size: 22px; margin-left: 2px; }
.hub .bonus { grid-area: 1 / 1; }
.hub .combo { grid-area: 2 / 1; flex-direction: column; align-items: stretch; justify-content: center; gap: 3px; padding-top: 5px; }
.hub .roul { grid-area: 1 / 2 / 3 / 3; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.hub .refs { grid-area: 1 / 3; }
.hub .top { grid-area: 2 / 3; }
.hub .hc-txt { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; min-width: 0; margin-left: 3px; }
.hub .hc-t { font-size: 19px; font-weight: 700; line-height: 1.02; }
.hub .hc-chev { font-size: 28px; font-weight: 700; line-height: .8; margin-left: 3px; }
/* «Комбо дня» (screens.js: paintComboCard): напис зі стрілкою, під ним сірий корпус із чотирма віконцями (без вогників спроб — їх без ліміту) */
.cbc-t { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; }
.hub .combo .cbc-t .hc-chev { font-size: 22px; }
.hub .combo.won .cbc-k { color: #3f8a2c; }
.cbc-line { display: flex; align-items: center; gap: 4px; }
.cbc-box { display: flex; align-items: center; gap: 3px; padding: 3px; background: linear-gradient(#d5d9e2, #a9b0c0); border: 1.8px solid var(--ink); border-radius: 9px; }
.cbc-c { display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; flex: none; font-size: 18px; font-weight: 700; font-style: normal;
  color: rgba(29, 42, 107, .35); background: #fffdf6; border: 1.8px solid var(--ink); border-radius: 7px 6px 8px 5px; }
.cbc-c img { width: 22px; height: 22px; display: block; }
.cbc-c.ok { background: #d9efc9; }
/* «Бонус дня»: скриня якомога більша — від кілець до напису, від верху картки до лінії (screens.js: fitChest; власник
   2026-10-04: «скриня буде більшою»); напис «Бонус / дня ›» — компактно праворуч, стрілка за словом, як у «Реферали ›» */
.hub .bonus .hc-txt { flex: none; display: block; margin-left: auto; }
.hub .bonus .hc-t { font-size: 18px; }
.hub .bonus .hc-chev { font-size: 24px; margin-left: 2px; }
.hub .i-friends, .hub .i-trophy { width: 40px; height: 40px; flex: none; }
.hub .wheel-box { display: block; line-height: 0; }
.hub .i-wheel { width: 104px; height: 104px; }
.hub #b-roul { margin-top: -14px; padding: 2px 12px 4px; --d: 3px; font-size: 18px; z-index: 1; }
@media (max-width: 420px) {
  .hub { gap: 6px; padding: 5px 8px 6px; }
  .hub .hc { padding: 4px 3px 4px 16px; min-height: 60px; gap: 2px; }
  .hub .hc-chev { margin-left: 1px; }
  .hub .refs .hc-t { font-size: 15px; }
  .hub .hc-t { font-size: 16px; }
  .hub .hc-chev { font-size: 24px; }
  .hub .bonus .hc-t { font-size: 16px; }
  .hub .bonus .hc-chev { font-size: 21px; }
  .hub .combo { padding-top: 4px; padding-right: 5px; }
  .hub .combo .cbc-t { font-size: 14px; }
  .hub .i-wheel { width: 88px; height: 88px; }
  .hub #b-roul { font-size: 15px; }
}

/* =====================  Сенс гри зрозумілий з першого екрана (ADR-003, SPEC §4, §7–9; 2026-10-04)  ===================== */

/* --- рядок «Наступна ціль» над мапою: прапорець ручкою, текст на жовтому маркері (маркер — rough.js, screens.js: goalSwash;
   без rough.js — рівний маркер CSS). Видно і в режимі гри. Тап — показує, куди йти. --- */
.goal {
  position: relative; flex: none; display: flex; align-items: center; gap: 3px; height: 30px; margin: -2px 12px 4px; padding: 0 2px;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.goal-flag { position: relative; z-index: 1; width: 21px; height: 25px; flex: none; margin-top: -3px; }
.goal-flag .pole { fill: none; stroke: var(--ink); stroke-width: 2.3; stroke-linecap: round; }
.goal-flag .cloth { fill: #e8543b; stroke: var(--ink); stroke-width: 1.7; stroke-linejoin: round; }
.goal-t, .goal-idle {
  position: relative; z-index: 1; flex: 0 1 auto; min-width: 0; padding: 0 6px 0 4px; font-size: 21px; font-weight: 700; line-height: 30px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.goal-idle { display: none; color: var(--ink-soft); }
.goal-t:empty { display: none; }
.goal-t:empty + .goal-idle { display: block; }
.goal .swash { position: absolute; top: 0; height: 30px; pointer-events: none; overflow: visible; }
.goal:not(.sw) .goal-t { background: linear-gradient(176deg, transparent 18%, #ffe27a 18% 84%, transparent 84%); }   /* без rough.js */
.goal.idle .swash { opacity: .5; }

img.au { width: auto; height: 22px; vertical-align: -5px; flex: none; }   /* самородок золота */
#sheet .btn .lbl-sub { display: block; margin-top: 2px; font-size: 15px; font-weight: 500; line-height: 1.1; color: #46507e; }   /* читабельно, не блідо */

/* --- магазин монет (#shop — аркуш, як «Покращення шахти»). Три рейки, як у Цитаделі (власник 2026-10-25, варіант А з
   workshop/shop.html): вкладки Зірки / TON / USD₮, на крипто-вкладках — гаманець, пакети — золоті плитки по дві, останній
   ($1 000) — на всю ширину. Натискається все тут, тож усе — кнопки дії (.act, без рамки від руки) --- */
#shop .sheet-card { max-height: 94%; overflow-y: auto; }
.sheet-head .shop-bal { display: flex; align-items: center; gap: 3px; margin-left: 10px; font-size: 24px; font-weight: 700; }
.sheet-head .shop-bal img { height: 24px; }
#shop .cur { display: inline-block; width: 1.05em; height: 1.05em; flex: none; vertical-align: -.16em; }   /* значок валюти */
.shop-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.shop-tabs .btn { gap: 5px; padding: 4px 6px 6px; font-size: 19px; white-space: nowrap; }
.shop-tabs .btn:not(.on) { --bg: #fffdf6; --sh: inset 0 -3px 0 rgba(29, 42, 107, .1); }   /* вибрана — золота й натиснута (.act.on) */
.shop-wal { display: flex; align-items: center; gap: 8px; min-height: 46px; }
.shop-wal .btn { font-size: 18px; padding: 4px 12px 6px; white-space: nowrap; }
.shop-wal .shop-conn { --bg: linear-gradient(#7fd3ff, #2aa8f2 60%, #0b93e0); --sh: inset 0 -3px 0 rgba(0, 70, 140, .3), inset 0 3px 0 rgba(255, 255, 255, .55);
  color: #fff; text-shadow: 0 1px 0 rgba(0, 50, 110, .45); }
.shop-wal .shop-conn svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.shop-wal-t { font-size: 14px; line-height: 1.15; color: var(--ink-soft); }
.shop-wal.on { padding: 4px 6px 4px 10px; background: #e3f4ff; border-radius: 14px 10px 15px 9px / 10px 15px 9px 14px; }
.shop-wal.on > svg { width: 24px; height: 24px; flex: none; fill: none; stroke: #0b7fc4; stroke-width: 2; stroke-linejoin: round; }
.shop-addr { flex: 1; min-width: 0; font-size: 19px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-wal.on .btn { --d: 3px; font-size: 16px; padding: 2px 10px 4px; }
.shop-note { margin: -2px 2px 0; font-size: 15px; line-height: 1.2; color: var(--ink-soft); }
.shop-note.warn { color: #b5532f; }
.packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 8px; }   /* рівні колонки: на 320 ціна лівої не виштовхує праву за край (аудит 10-23) */
#shop .pk { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 6px;
  min-height: 64px; padding: 6px 8px 7px; text-align: left; }
.pk-art { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 40px; }
.pk-art img { max-width: 40px; max-height: 38px; }
.pk-n { display: flex; align-items: center; gap: 3px; font-size: 21px; white-space: nowrap; overflow: hidden; }
.pk-n img { height: 21px; }
.pk-pr { display: flex; align-items: center; gap: 4px; font-size: 18px; color: #2f6d22; white-space: nowrap; }
/* TON: сума в TON за живим курсом, під нею дрібно «≈ $N» (власник 2026-10-25: «в реальну суму ціна тона») */
.pk-pr.pk-ton { flex-wrap: wrap; row-gap: 0; }
.pk-usd { flex-basis: 100%; margin-top: -1px; font-size: 14px; line-height: 1.1; color: var(--ink-soft); }
.pk-bonus { position: absolute; right: -4px; top: -9px; padding: 0 6px 1px; font-size: 15px; line-height: 1.25; color: #fff; background: #d63e26;
  border-radius: 7px 5px 8px 4px; transform: rotate(-4deg); white-space: nowrap; }   /* бонус пакета — наліпка */
#shop .pk.pk-wide { grid-column: 1 / -1; grid-template-columns: auto auto auto; grid-template-rows: auto; justify-content: center; column-gap: 12px; }
.pk-wide .pk-art { grid-row: auto; width: 54px; }
.pk-wide .pk-art img { max-width: 54px; max-height: 48px; }
.pk-wide .pk-n { font-size: 25px; }
.pk-wide .pk-n img { height: 25px; }
.pk-wide .pk-pr { font-size: 21px; }
.pk-wide .pk-usd { font-size: 15px; }

/* --- «Поки тебе не було»: записка на папері зі смужкою скотчу, одна на вхід --- */
#away { align-items: center; justify-content: center; padding: 72px 16px 16px; }   /* трохи нижче центру: шапка й рядок цілі лишаються видні */
.away-card {
  position: relative; width: min(100%, 340px); padding: 18px 16px 16px 20px; transform: rotate(-1.2deg);
  background:
    linear-gradient(to right, transparent 12px, var(--margin) 12px, var(--margin) 13.5px, transparent 13.5px),
    repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule) 27px 28px), #fffdf6;
  border: 2px solid var(--ink); border-radius: 6px 12px 8px 14px / 12px 6px 14px 8px;
  box-shadow: 3px 5px 0 rgba(29, 42, 107, .18), 0 12px 32px rgba(29, 42, 107, .28);
}
.away-card::before {   /* смужка скотчу зверху */
  content: ""; position: absolute; left: 50%; top: -13px; width: 96px; height: 26px; margin-left: -48px; transform: rotate(3deg);
  background: rgba(255, 233, 150, .72); border-left: 1px dashed rgba(29, 42, 107, .25); border-right: 1px dashed rgba(29, 42, 107, .25);
}
.away-card h2 { margin: 0 40px 6px 0; font-size: 30px; line-height: 1.02; }
.away-t { display: block; font-size: 19px; font-weight: 700; color: var(--ink-soft); }
.away-card p { margin: 4px 0; font-size: 22px; line-height: 1.2; }
.away-n { white-space: nowrap; }
.away-n img, .away-c img, .away-h img { height: 22px; width: auto; vertical-align: -4px; margin-right: 2px; }
.away-c .nw, .away-h .nw { white-space: nowrap; }   /* не рветься лише «🪙 N монет»: « і знайшла» переноситься (аудит 10-23: 320–390 px) */
.away-l2 img { height: 22px; margin-right: 4px; vertical-align: -4px; }
.away-card .x { position: absolute; top: 8px; right: 8px; }
#b-away-sell { width: 100%; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 30px; font-weight: 700; }
#b-away-sell .big-au { width: auto; height: 34px; vertical-align: 0; }
#b-away-sell:not(:disabled) .big-au { animation: coin-flip 2.8s ease-in-out infinite; }   /* як «Продати» під мапою, з відблиском */
/* «Гру відкрито на іншому пристрої» і «Сесія застаріла» (cloud.js: cloudMoved, cloudAuthDead) — та сама записка, поверх усього */
#moved, #auth { z-index: 90; align-items: center; justify-content: center; padding: 16px; background: rgba(29, 42, 107, .45); }
#moved .away-card h2, #auth .away-card h2 { margin-right: 0; }
#b-moved, #b-auth { width: 100%; margin-top: 12px; font-size: 28px; font-weight: 700; }
/* картка шахтаря (screens.js: openMinerCard) — та сама записка; портрет на сяйві кольору каски виду, «Новий шахтар!» — з променями */
#mcard { align-items: center; justify-content: center; padding: 16px; }
.mc-card { text-align: center; }
.mc-card:focus { outline: none; }   /* фокус — лише щоб Enter не натиснув кнопку за карткою (screens.js: openMinerCard) */
.mc-card h2 { margin: 0 40px 0; font-size: 32px; }
.mc-k { display: block; font-size: 19px; font-weight: 700; color: var(--ink-soft); }
.mc-pic { position: relative; height: 146px; display: flex; align-items: flex-end; justify-content: center; }
.mc-pic::before, .mc-pic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 176px; height: 176px; margin: -88px 0 0 -88px; border-radius: 50%; }
.mc-pic::before { background: radial-gradient(circle, var(--mc-glow, rgba(239, 216, 148, .55)) 0, transparent 70%); }
#mcard.hired .mc-pic::after {
  background: repeating-conic-gradient(rgba(255, 205, 70, .34) 0 9deg, transparent 9deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 34%, transparent 70%); mask-image: radial-gradient(circle, #000 34%, transparent 70%);
  animation: mc-spin 14s linear infinite;
}
.mc-img { position: relative; z-index: 1; height: 136px; width: auto; }
.mc-img:not([src]) { visibility: hidden; }
.mc-card .mc-gear { margin: 2px 0 4px; font-size: 19px; font-style: italic; line-height: 1.15; color: var(--ink-soft); }
.mc-card .mc-l1 { font-size: 24px; }
.mc-l1 img.au { height: 22px; width: auto; vertical-align: -4px; margin-right: 2px; }
.mc-card .mc-l2 { font-size: 19px; color: var(--ink-soft); }
.mc-card .mc-l2:empty { display: none; }
#b-mc { width: 100%; margin-top: 12px; display: flex; align-items: center; justify-content: center; font-size: 27px; font-weight: 700; }
#b-mc .mc-b { display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
#b-mc .mc-b img.c { height: .93em; width: auto; }   /* 25 px при 27 px; fitMcButton меншає шрифт — і монету */
#mcard[data-look="0"] { --mc-glow: rgba(207, 212, 222, .7); }
#mcard[data-look="1"] { --mc-glow: rgba(196, 214, 240, .7); }
#mcard[data-look="2"] { --mc-glow: rgba(239, 216, 148, .7); }
#mcard[data-look="3"] { --mc-glow: rgba(243, 198, 61, .55); }
#mcard[data-look="4"] { --mc-glow: rgba(242, 138, 43, .45); }
#mcard[data-look="5"] { --mc-glow: rgba(216, 68, 58, .38); }
#mcard[data-look="6"] { --mc-glow: rgba(232, 183, 48, .62); }
#mcard.pop .mc-card { animation: mc-pop .34s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes mc-pop { from { transform: rotate(-1.2deg) scale(.86); opacity: 0; } to { transform: rotate(-1.2deg) scale(1); opacity: 1; } }
@keyframes mc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #mcard.pop .mc-card, #mcard.hired .mc-pic::after { animation: none; } }
.cr-row { cursor: pointer; }

/* --- профіль: гаманець, стеля фарму одразу під золотом, правила виводу з конфігу --- */
.prof-h { margin: 4px 0 0; font-size: 27px; line-height: 1.1; }
.prof-wallet { margin-bottom: 6px; }
.prof-cap { margin: -8px 0 0 44px; font-size: 18px; line-height: 1.15; color: var(--ink-soft); }
.prof-cap:empty { display: none; }
.prof-rules { margin: 4px 0 14px; padding: 4px 10px 6px; font-size: 18px; line-height: 1.2; color: var(--ink); background: rgba(255, 241, 184, .5); border-left: 3px solid var(--margin); border-radius: 2px 8px 8px 2px; }
.prof-rules b { display: block; font-size: 19px; }
.prof-rules ul { margin: 2px 0 0; padding-left: 20px; }
.prof-rules li { margin: 1px 0; }
.prof-rules .rules-k { margin-top: 3px; color: var(--ink-soft); }

/* --- підсвітка цілі за body[data-hint]: одне обведення червоною ручкою, «дихає» трьома штрихами й пульсує
   (screens.js: hint) --- */
.hint-ring { position: absolute; z-index: 6; pointer-events: none; transform-origin: 50% 50%; animation: hint-pulse 1.3s ease-in-out infinite; }
.hint-ring svg { display: block; overflow: visible; }
.hint-ring svg > g { opacity: 0; animation: hint-boil .72s steps(1, end) infinite; }   /* лише свої групи: rough.js кладе штрих у власну <g> */
.hint-ring svg > g:nth-child(2) { animation-delay: -.48s; }
.hint-ring svg > g:nth-child(3) { animation-delay: -.24s; }
@keyframes hint-boil { 0% { opacity: 1; } 33.333% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hint-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(var(--hs, 1.045)); opacity: .72; } }   /* --hs — screens.js: ~8 px росту за будь-якої ширини */
.hint-ring.plain { border: 3px solid #d63e26; }   /* без rough.js */
.hint-ring.flash { animation: hint-flash .55s ease-out 1, hint-pulse 1.3s .55s ease-in-out infinite; }   /* тапнули по цілі */
@keyframes hint-flash { 0% { transform: scale(var(--hf, 1.35)); opacity: 0; } 60% { transform: scale(.96); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hint-ring, .hint-ring.flash { animation: none; }
  .hint-ring svg > g { animation: none; }
  .hint-ring svg > g:first-child { opacity: 1; }
}
/* одна підказка на екрані (SPEC §14): є рядок цілі — стара записка на мапі (#note) не показується */
body.goal-on #note { display: none !important; }
/* підказки гаманців довші за «скоро» — переносяться; у режимі гри — над смугою керування */
#toast { width: max-content; max-width: calc(100% - 28px); white-space: normal; text-align: center; line-height: 1.12; }
#app.play-pre #toast { bottom: calc(var(--ctrl-h) + var(--sab) + 14px); }
/* ціль «копати»: кнопка в смузі керування — повною, навіть коли поруч нема що копати (герой сам піде до каменю) */
body[data-hint="dig"] #ctrl #pad-dig .pb { opacity: 1; }

/* --- вузькі й низькі екрани: шапка з двома рядками й рядок цілі не з'їдають мапу --- */
@media (max-width: 420px) {
  #top { padding: 8px 10px 4px; gap: 4px; }
  #top .wallets { gap: 5px; }
  .wl { height: 32px; padding-right: 8px; }
  .wl img { height: 26px; }
  .wl-gold img { height: 28px; }
  .goal { margin: -2px 10px 3px; }
  .goal-t, .goal-idle { font-size: 20px; }
}
@media (max-width: 374px) {
  .wl b { font-size: 21px; }
  /* магазин на 320: «1 100 000 ⭐ 73 333» в одну плитку без обрізу */
  .shop-tabs .btn { font-size: 16px; }
  .shop-wal .btn { font-size: 16px; padding: 4px 9px 6px; }
  .pk-n { font-size: 18px; }
  .pk-n img { height: 18px; }
  .pk-pr { font-size: 16px; }
  .pk-art { width: 32px; }
  .pk-art img { max-width: 32px; max-height: 30px; }
  #shop .pk.pk-wide { column-gap: 8px; }
  .pk-wide .pk-art { width: 46px; }
  .pk-wide .pk-art img { max-width: 46px; max-height: 42px; }
  .pk-wide .pk-n { font-size: 20px; }
  .pk-wide .pk-n img { height: 20px; }
  .pk-wide .pk-pr { font-size: 18px; }
  /* «Бригада відпочиває: шахтар — від 10 000 монет» влазить на 320 без «…» */
  .goal { margin-left: 6px; margin-right: 6px; }
  .goal-t, .goal-idle { padding: 0 3px 0 2px; }
}
@media (max-height: 760px) {
  #top { padding-top: 6px; }
  .goal { height: 28px; }
  .goal-t, .goal-idle { line-height: 28px; font-size: 19px; }
  .goal .swash { height: 28px; }
}
@media (max-height: 700px) {
  .map-frame { min-height: 140px; }
}
/* Короткий екран (screens.js: fitHeight — висота мінус відступи Telegram < 900 px): у Telegram на весь екран зверху
   ~90 px забирають рядок стану й кнопки «Закрити» / «⋯», знизу ~34 — смужка жестів; медіазапити цього не бачать.
   Шапка, верхні картки, рядок цілі й док — щільніші, щоб мапі лишалось місце (на iPhone 390×844 у Telegram без цього
   док заходив під нижню панель). Розміри 3D-полотен задані інлайн (screens.js) — тут через !important. */
#app.short #top { padding-top: 5px; padding-bottom: 3px; gap: 3px; }
#app.short #top h1 { font-size: 27px; }
#app.short #top canvas.i-picks { height: 32px !important; width: auto !important; }
#app.short .lvl-badge { padding: 1px 9px; font-size: 16px; }
#app.short .lvl-badge b { font-size: 18px; }
#app.short .wl { height: 30px; }
#app.short .wl img { height: 24px; }
#app.short .wl-gold img { height: 26px; }
#app.short .wl b { font-size: 21px; }
#app.short .hub { padding-top: 3px; padding-bottom: 4px; gap: 5px; }
#app.short .hub .hc { min-height: 50px; }
#app.short .hub .combo { gap: 2px; padding-top: 3px; }
#app.short .cbc-c { width: 23px; height: 23px; }
#app.short .cbc-c img { width: 20px; height: 20px; }
#app.short .hub canvas.wheel3d { width: 84px !important; height: auto !important; }
#app.short .hub #b-roul { margin-top: -12px; }
#app.short .hub .refs canvas.u3d, #app.short .hub .top canvas.u3d { height: 31px !important; width: auto !important; }
#app.short .goal { height: 26px; margin-bottom: 2px; }
#app.short .goal-t, #app.short .goal-idle { line-height: 26px; font-size: 19px; }
#app.short .goal .swash { height: 26px; }
#app.short .stats2 { padding-top: 6px; }
#app.short .dock-row { margin-top: 6px; margin-bottom: 8px; }
#app.short .rate > div { font-size: 14.5px; }
#app.short .st-num { font-size: 22px; }
#app.short .map-frame { min-height: 0; }   /* мапа віддає місце доку: краще менша мапа, ніж «Покращити шахту» під панеллю (аудит 10-23: 320×568, 360×560, SE у Telegram) */
/* Дуже короткий екран (screens.js: fitHeight — висота мінус відступи < 650 px): верхні картки й док ще щільніші, щоб
   мапа лишалась ≈ 100 px, а не смужкою (320×568, 360×560, iPhone SE у Telegram на весь екран). */
#app.tight .hub { padding: 2px 8px 3px; gap: 4px; }
#app.tight .hub .hc { min-height: 0; padding-top: 2px; padding-bottom: 2px; }
#app.tight .hub .combo { padding-top: 2px; }
#app.tight .cbc-c { width: 21px; height: 21px; font-size: 15px; }
#app.tight .cbc-c img { width: 18px; height: 18px; }
#app.tight .hub canvas.wheel3d { width: 66px !important; }
#app.tight .hub #b-roul { margin-top: -10px; font-size: 14px; }
#app.tight .hub .refs canvas.u3d, #app.tight .hub .top canvas.u3d { height: 24px !important; }
#app.tight .stats2 { padding-top: 4px; }
#app.tight .rate, #app.tight .storage { padding-top: 2px; padding-bottom: 2px; }
#app.tight .dock-row { margin-top: 4px; margin-bottom: 7px; }
#app.tight #b-sell { padding-top: 2px; padding-bottom: 4px; font-size: 26px; }
#app.tight #b-sell .big-au { height: 28px; }
#app.tight #b-upg { width: 84px; padding: 2px 3px 3px; font-size: 14px; }
#app.tight #b-upg .i-house { width: 34px; height: 30px; }
#app.tight #b-upg .hut3d canvas { width: auto !important; height: 28px !important; }

/* =====  картки верху й завдання дня (SPEC hub, 2026-10-19: «давай доробимо всі екрани щоб були робочі»)  ===== */
@media (max-width: 360px) {
  .cbc-box { gap: 2px; padding: 2px; }
  .cbc-c { width: 22px; height: 22px; font-size: 15px; }
  .cbc-c img { width: 19px; height: 19px; }
  .cbc-line { gap: 2px; }
}
/* червона крапка «є що взяти» (daily.js → [data-show]); на вкладці «Завдання» — з числом нагород */
.hub .card, .hub .roul, #tabs .tab { position: relative; }
.hub-dot {
  position: absolute; top: -5px; right: -5px; z-index: 4; width: 14px; height: 14px; pointer-events: none;
  background: #e8483b; border: 2px solid var(--paper); border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ink);
}
.roul .hub-dot { top: 0; right: 6px; }
.tab-dot {
  top: 0; right: calc(50% - 30px); width: auto; height: 19px; min-width: 19px; padding: 0 5px;
  font: 700 14px/15px system-ui, sans-serif; color: #fff; text-align: center; border-radius: 10px;
}
.tab-dot:empty { min-width: 13px; height: 13px; padding: 0; }
.roul .wheel-box { cursor: pointer; }

/* вікна карток — аркуш, як магазин; довгий вміст прокручується */
.hub-ov .sheet-card { max-height: 94%; overflow-y: auto; }
.hub-ov p { margin: 0; }
.hub-ov .btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 6px 12px; font-size: 23px; }
.hub-ov .btn .lbl { font-weight: 700; }
.hub-ov img.c, .hub-ov img.au { height: 19px; vertical-align: -3px; }

/* рулетка — «ярмарок» (власник 2026-10-25 обрав варіант Б з workshop/roul.html): вивіска з лампочками, промені й сяйво
   за колесом, лампочки обода біжать під час обертання і блимають на виграш; три квитки-кнопки, ряд множника зірок */
#roul-ov .sheet-card { gap: 6px; }
.rw-root { display: flex; flex-direction: column; align-items: center; gap: 9px; }
:where(.rw-root) button { font: inherit; cursor: pointer; }   /* :where — без ваги, інакше font: inherit перебиває розміри кнопок */
.rw-root button:disabled { cursor: default; }
.rw-i { vertical-align: -3px; }
.rw-star { width: 1em; height: 1em; vertical-align: -.12em; flex: none; }
.rw-box { display: flex; justify-content: center; }
.rw-wheel { position: relative; flex: none; overflow: hidden; }   /* промені й сяйво крутяться — інакше їхній квадрат роздуває ширину картки */
.rw-wheel canvas { position: absolute; left: 0; top: 0; z-index: 1; }
.rw-glow { position: absolute; z-index: 0; left: var(--cx); top: var(--cy); width: calc(var(--rr) * 3.1); height: calc(var(--rr) * 3.1);
  border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,214,90,.62) 0%, rgba(255,190,60,.2) 42%, rgba(255,190,60,0) 68%);
  animation: rw-breathe 2.6s ease-in-out infinite alternate; transition: filter .5s; }
.rw-wheel.starm .rw-glow { background: radial-gradient(circle, rgba(178,128,255,.66) 0%, rgba(245,184,60,.2) 44%, rgba(160,110,255,0) 68%); }
.rw-wheel.spin .rw-glow { animation-duration: .5s; filter: brightness(1.25) saturate(1.2); }
.rw-sun { position: absolute; z-index: 0; left: var(--cx); top: var(--cy); width: calc(var(--rr) * 3.3); height: calc(var(--rr) * 3.3);
  margin: calc(var(--rr) * -1.65); border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(240,189,35,.34) 0 9deg, rgba(240,189,35,0) 9deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 34%, transparent 70%); mask: radial-gradient(circle, #000 34%, transparent 70%);
  animation: rw-rot 40s linear infinite; }
.rw-wheel.spin .rw-sun { animation-duration: 6s; }
.rw-bulb { position: absolute; z-index: 2; width: calc(var(--rr) * .3); height: calc(var(--rr) * .3); border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%); opacity: .3;
  background: radial-gradient(circle, #fffef6 0 20%, rgba(255,232,130,.9) 34%, rgba(255,200,60,0) 68%); }
.rw-wheel:not(.spin):not(.win) .rw-bulb { animation: rw-twinkle 1.5s ease-in-out infinite alternate; }
.rw-wheel:not(.spin):not(.win) .rw-bulb:nth-of-type(odd) { animation-delay: -.75s; }
.rw-wheel.spin .rw-bulb { opacity: .12; transition: opacity .08s; }
.rw-wheel.spin .rw-bulb.on { opacity: 1; }
.rw-wheel.win .rw-bulb { animation: rw-flash .24s steps(2, jump-none) 8; }
@keyframes rw-breathe { from { opacity: .7; transform: translate(-50%, -50%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } }
@keyframes rw-twinkle { 0%, 40% { opacity: .22; } 100% { opacity: .95; } }
@keyframes rw-flash { from { opacity: 1; } to { opacity: .1; } }
@keyframes rw-rot { to { transform: rotate(1turn); } }
@keyframes rw-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes rw-marq { 50% { background-position: 7px 0; } }
@keyframes rw-fade { from { opacity: 0; } }
@keyframes rw-pop { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }
.rw-sign { position: relative; padding: 9px 26px 8px; text-align: center; color: #fff8e2; background: #d63e26;
  border: 2.5px solid var(--ink); border-radius: 14px 16px 13px 17px; box-shadow: 0 4px 0 var(--ink); }
.rw-sign b { display: block; font-size: 30px; font-weight: 400; line-height: 1; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(29,42,107,.55); }
.rw-sign small { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 16px; color: #ffe27a; }
.rw-dots { position: absolute; left: 9px; right: 9px; top: 3px; height: 7px;
  background: radial-gradient(circle, #fff3b0 0 2.6px, rgba(255,243,176,0) 3.2px) 0 0 / 14px 7px repeat-x; animation: rw-marq .5s steps(1) infinite; }
.rw-dots.bt { top: auto; bottom: 3px; animation-delay: -.25s; }
.rw-row { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rw-t { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 2px 5px; color: var(--ink);
  background: #fffdf6; border: 2.5px solid var(--ink); border-radius: 14px 12px 15px 11px; box-shadow: 0 4px 0 var(--ink); }
.rw-t b { display: flex; align-items: center; gap: 3px; font-size: 21px; font-weight: 400; line-height: 1.1; }
.rw-t small { font-size: 14px; opacity: .8; }
.rw-t.free { color: #fff; background: #5cb24c; }
.rw-t.coins { background: #f7c63f; }
.rw-t.stars { color: #fff; background: #3e7ed8; }
.rw-t.best { animation: rw-pulse 1.3s ease-in-out infinite; }
.rw-t:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.rw-t:disabled { filter: grayscale(.75); opacity: .55; box-shadow: 0 2px 0 var(--ink); }
.rw-x { width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 5px; font-size: 16px; }
.rw-x span { margin-right: auto; display: flex; align-items: center; gap: 4px; }
.rw-x em { font-style: normal; }
.rw-c { min-width: 44px; padding: 2px 6px; font-size: 17px; color: var(--ink); background: #fffdf6; border: 2px solid var(--ink); border-radius: 10px 9px 11px 8px; }
.rw-c.on { color: #fff; background: #3e7ed8; }
.rw-x.off .rw-c { opacity: .6; }   /* безплатна: множника нема — ряд приглушено, тиснути можна (перейде на ставку) */
.rw-x.off .rw-c.on { color: var(--ink); background: #fffdf6; }
.rw-t.on:not(:disabled) { box-shadow: 0 0 0 3px #fff8e2, 0 0 0 5.5px var(--ink), 0 4px 0 3px var(--ink); }   /* що зараз на колесі */
.rw-sign small .rw-i { margin: -6px 0 -4px; }
.rw-hint { min-height: 1.2em; font-size: 15px; text-align: center; color: var(--ink-soft); }
/* вікно виграшу: поверх аркуша, промені, конфеті, число золота набігає */
.rw-win { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; overflow: hidden; background: rgba(29,42,107,.5); animation: rw-fade .25s ease; }
.rw-win[hidden] { display: none; }
.rw-win canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.rw-wrays { position: absolute; left: 50%; top: 50%; width: 640px; height: 640px; margin: -320px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255,226,122,.45) 0 9deg, rgba(255,226,122,0) 9deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%); animation: rw-rot 14s linear infinite; }
.rw-wcard { position: relative; z-index: 1; width: min(300px, 84%); padding: 20px 18px 18px; text-align: center; color: var(--ink); background: var(--paper);
  border: 2.5px solid var(--ink); border-radius: 20px 18px 22px 17px; box-shadow: 0 6px 0 var(--ink); animation: rw-pop .45s cubic-bezier(.2,1.4,.4,1) both; }
.rw-wcard h3 { margin: 0 0 6px; font-size: 32px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: #d63e26; }
.rw-wprize { display: flex; align-items: center; justify-content: center; gap: 8px; }
.rw-wn { font-size: 48px; font-weight: 400; }
.rw-wsub { font-size: 18px; color: var(--ink-soft); }
.rw-wcard.hero .rw-wprize { flex-direction: column; gap: 0; }   /* герой: портрет, під ним ім'я */
.rw-wcard.hero .rw-wn { font-size: 36px; line-height: 1.05; }
.rw-wcard.none h3 { color: var(--ink-soft); }
.rw-wcard.none .rw-wn { color: var(--ink-soft); }
.hub-ov .rw-wnote { margin: 6px 0 12px; min-height: 1em; font-size: 14px; color: var(--ink-soft); }
.rw-take { width: 100%; padding: 9px; font: inherit; font-size: 23px; color: #fff; cursor: pointer; background: #5cb24c;
  border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); }
@media (max-width: 360px) {
  .rw-x em { display: none; }
  .rw-c { min-width: 0; flex: 1; padding: 2px 0; }
  .rw-t b { font-size: 18px; }
  .rw-sign b { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) { .rw-dots, .rw-sun, .rw-glow, .rw-bulb, .rw-t.best, .rw-wrays { animation: none !important; } }

/* Бонус дня 30 (власник 2026-10-25: «платний за ⭐ і TON, ціни по зростанню, на 30-й день Новачок»; вміст — bonus.js:
   bonusHTML): вкладки Зірки / TON — як у магазині; 30 днів сіткою 6 × 5 з ціною дня — пройдені зелені з ✓, сьогоднішній
   золотий у червоній обвідці (замкнений — сірий), «більші» 10–20-й — теплі з бурштиновою рамкою, 30-й — з Новачком; під
   сіткою — стан серії з відліком, «заплатиш / отримаєш / вигода» і кнопка дії (.act) */
.bn-sub, .cb-sub, .top-sub { font-size: 19px; line-height: 1.1; color: var(--ink-soft); }
.bn-body { display: flex; flex-direction: column; gap: 8px; }
#bonus-ov .bn-sub { font-size: 16px; line-height: 1.15; }
#bonus-ov .cur { display: inline-block; width: 1.05em; height: 1.05em; flex: none; vertical-align: -.16em; }   /* значок валюти */
.bn-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hub-ov .bn-tabs .btn { gap: 5px; min-height: 0; padding: 4px 6px 6px; font-size: 19px; white-space: nowrap; }
.bn-tabs .btn:not(.on) { --bg: #fffdf6; --sh: inset 0 -3px 0 rgba(29, 42, 107, .1); }   /* вибрана — золота й натиснута (.act.on) */
.bn-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.bn-grid .bd {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; padding: 3px 1px;
  line-height: 1; background: var(--paper-2); border: 1.5px solid var(--ink); border-radius: 8px 6px 9px 7px;
}
.bn-grid .bd b { display: flex; align-items: center; gap: 1px; font-size: 18px; }
.bn-grid .bd small { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.bn-grid .bd.big { background: #fff0bf; border-color: #b97c00; }
.bn-grid .bd.nov { background: #ffe39a; border: 2px solid #b97c00; }
.bn-grid .bd.got { background: #d9efc9; border-color: var(--ink); }
.bn-grid .bd.got small { color: #2f7a2a; font-weight: 700; }
.bn-grid .bd.now { background: #ffe27a; box-shadow: 0 0 0 2.5px #d63e26; }
.bn-grid .bd.now small { color: var(--ink); font-weight: 700; }
.bn-grid .bd.lock { background: #efede4; box-shadow: 0 0 0 2px #8d93ad; }
/* Новачок 30-го дня — значком у правому верхньому куті ВСЕРЕДИНІ плитки, число трохи ліворуч; сам шахтар і напис — плашкою
   .bn-prize під сіткою (Сергій 10-27: наліпка на кут вилазила за плитку й накривала 24-ту — «намалювати більш коректно») */
.bn-grid .bn-nov { position: absolute; z-index: 1; right: 2px; top: 2px; line-height: 0; pointer-events: none; }
.bn-grid .bn-helm { width: 15px; height: 12px; }
.bn-grid .bn-nov-i { height: 19px; width: auto; }
.bn-grid .bd.nov b { margin-right: 9px; }
.bn-prize { display: flex; align-items: center; gap: 9px; padding: 4px 10px 4px 8px; line-height: 1.1;
  background: #ffe39a; border: 2px solid #b97c00; border-radius: 12px 9px 13px 8px / 9px 13px 8px 12px; }
.bn-prize-pic { flex: none; display: grid; place-items: center; width: 34px; height: 44px; line-height: 0; }
.bn-prize-pic .bn-nov-i { height: 44px; width: auto; }
.bn-prize-pic .bn-helm { width: 30px; height: 25px; }
.bn-prize > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bn-prize b { font-size: 17px; }
.bn-prize small { font-size: 13.5px; color: var(--ink-soft); }
.bn-leg { margin: -2px 2px 0; font-size: 13.5px; line-height: 1.25; color: var(--ink-soft); }
.bn-leg i.bd { display: inline-block; width: 12px; height: 12px; margin: 0 3px 0 0; vertical-align: -1px;
  background: var(--paper-2); border: 1.5px solid var(--ink); border-radius: 3px; }
.bn-leg i.bd.big { background: #fff0bf; border-color: #b97c00; }
.bn-st { font-size: 19px; line-height: 1.15; text-align: center; }
.bn-body [data-clock] { font-variant-numeric: tabular-nums; }
.bn-sum { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; }
.bn-sum > div {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; padding: 5px 6px 6px;
  text-align: center; background: var(--paper-2); border: 1.5px solid var(--ink); border-radius: 12px 9px 13px 8px / 9px 13px 8px 12px;
}
.bn-sum small { font-size: 13.5px; line-height: 1.1; color: var(--ink-soft); }
.bn-sum b { display: flex; align-items: center; gap: 4px; font-size: 22px; line-height: 1.1; white-space: nowrap; }
.hub-ov .bn-sum b img.c { height: 20px; vertical-align: 0; }
.bn-sum .bn-gain { background: #d9efc9; }
.bn-sum .bn-gain b { color: #2f7a2a; }
.bn-buy { width: 100%; }
.bn-cost { display: flex; align-items: center; gap: 4px; }
.bn-note { margin: -2px 2px 0; font-size: 13.5px; line-height: 1.2; color: var(--ink-soft); }
@media (max-width: 360px) {
  .hub-ov .bn-tabs .btn { font-size: 17px; }
  .bn-grid .bd b { font-size: 16px; }
  .bn-grid .bd small { font-size: 11px; }
  .bn-sum b { font-size: 19px; }
}

/* комбо дня — «однорукий бандит» на 4 барабани (варіант В з workshop/combo.html, власник 2026-10-25: сірий корпус,
   «4 іконки має бути»; screens.js: fillCombo) */
.cb-root { display: flex; flex-direction: column; gap: 8px; }
.cb-root img { display: block; }
.cb-root .cb-sub { margin-top: -4px; font-size: 16px; line-height: 1.15; text-align: center; }
.cb-mach { position: relative; padding: 8px 48px 12px 10px; background: linear-gradient(#d5d9e2, #b4bac8 60%, #9ea5b6); border: 2.5px solid var(--ink);
  border-radius: 20px 15px 21px 14px / 15px 21px 14px 20px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), 0 4px 0 var(--ink); }
.cb-top { display: flex; align-items: center; justify-content: center; margin: 0 2px 6px; }
.cb-title { padding: 0 10px; font-size: 20px; font-weight: 700; letter-spacing: 2px; color: var(--ink); background: linear-gradient(#fff2b0, #ffd856 55%, #ffc93a);
  border: 2px solid var(--ink); border-radius: 9px 7px 10px 6px; }
.cb-mach.won .cb-title { background: #d9efc9; }
.cb-reels { display: flex; gap: 6px; justify-content: center; }
.cb-reel { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.cb-ar { width: 100%; height: 30px; padding: 0; font: inherit; font-size: 16px; line-height: 1; color: var(--ink); background: linear-gradient(#fff2b0, #ffd856 55%, #ffc93a);
  border: 2px solid var(--ink); border-radius: 9px 7px 10px 6px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cb-ar:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.cb-ar:disabled { cursor: default; opacity: .35; }   /* крутиться — стрілки бліді */
.cb-reel.ok .cb-ar { visibility: hidden; }   /* вгадано — стрілок нема */
.cb-win { position: relative; width: 100%; height: 120px; overflow: hidden; background: linear-gradient(#cfc8b4, #fffdf6 30%, #fffdf6 70%, #cfc8b4);
  border: 2px solid var(--ink); border-radius: 10px 8px 11px 7px; box-shadow: inset 0 4px 6px rgba(0, 0, 0, .18); cursor: pointer; touch-action: manipulation; }
.cb-reel.ok .cb-win { background: #d9efc9; cursor: default; }
.cb-win::before, .cb-win::after { content: ''; position: absolute; left: 0; right: 0; z-index: 1; height: 2px; background: rgba(29, 42, 107, .22); }
.cb-win::before { top: 31px; }
.cb-win::after { bottom: 31px; }
.cb-strip { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.cb-strip img { width: 30px; height: 30px; margin: -1px 0; opacity: .35; }
.cb-strip img.cur { width: 50px; height: 50px; margin: 3px 0; opacity: 1; }
.cb-strip img.none { visibility: hidden; }
.cb-strip .q { font-size: 40px; font-weight: 700; color: rgba(29, 42, 107, .3); }
.cb-name { max-width: 100%; min-height: 1.1em; overflow: hidden; font-size: 13px; font-weight: 700; color: #fff; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 0 var(--ink), 0 -1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink); }
/* прокрут (screens.js: cbGo): смуга можливих речей двічі поспіль летить униз по колу; стає — з відскоком, барабан за барабаном */
.cb-reel.roll .cb-strip { justify-content: flex-start; height: auto; animation: cb-roll .32s linear infinite; filter: blur(1.4px); }
.cb-reel.roll .cb-strip img { width: 44px; height: 44px; margin: 0; opacity: 1; }
@keyframes cb-roll { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.cb-reel.land .cb-strip { animation: cb-land .3s ease-out; }
@keyframes cb-land { 0% { transform: translateY(-24px); } 65% { transform: translateY(5px); } 100% { transform: translateY(0); } }
/* важіль (lever.js: leverDrag): стрижень повертається на осі в основі, кулька — на його кінці; положення ставить screens.js
   (paint), назад — пружиною з відскоком (.back), сам униз — швидко (.down) */
.cb-lever { position: absolute; right: 3px; top: 30px; width: 42px; height: 200px; padding: 0; background: none; border: 0; cursor: grab; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.cb-lever:active:not(:disabled) { cursor: grabbing; }
.cb-lever:disabled { cursor: default; }
.cb-lever i { position: absolute; display: block; }
.cb-lever .lv-base { left: 12px; top: 146px; width: 18px; height: 40px; background: #4a4f66; border: 2.5px solid var(--ink); border-radius: 5px; }
.cb-lever .lv-rod { left: 17px; top: 46px; width: 8px; height: 112px; transform-origin: 50% 100%; background: linear-gradient(90deg, #8e97ad, #eef1f7 45%, #9aa3b8);
  border: 2px solid var(--ink); border-radius: 4px; }
.cb-lever .lv-knob { left: 7px; top: 32px; width: 28px; height: 28px; background: radial-gradient(circle at 38% 32%, #fff 0 10%, #ff8172 13%, #e8483b 55%, #b9291e);
  border: 2.5px solid var(--ink); border-radius: 50%; }
.cb-lever.ready .lv-knob { box-shadow: 0 0 0 3px rgba(255, 210, 60, .6); }
.cb-lever.armed .lv-knob { box-shadow: 0 0 12px 4px rgba(255, 210, 60, .95); }
.cb-lever:disabled .lv-knob { filter: saturate(.35); }
.cb-lever.back .lv-rod, .cb-lever.back .lv-knob { transition: transform .55s cubic-bezier(.3, 1.65, .5, 1); }
.cb-lever.down .lv-rod, .cb-lever.down .lv-knob { transition: transform .15s ease-in; }
@keyframes cb-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.cb-mach.shake { animation: cb-shake .45s; }
/* усі 9 речей рядком: тап — на перший порожній барабан, на барабані — його номер (вибір гравця, не підказка) */
.cb-cands { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.cb-pick { position: relative; display: flex; padding: 2px; font: inherit; background: #fffdf6; border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgba(29, 42, 107, .25);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cb-pick img { width: 30px; height: 30px; }
.cb-pick.on { background: #fff2b0; box-shadow: inset 0 0 0 2px var(--ink); }
.cb-pick b { position: absolute; top: -6px; right: -5px; min-width: 16px; height: 16px; padding: 0 3px; font-size: 12px; line-height: 15px; color: #fff; text-align: center;
  background: var(--ink); border-radius: 8px; }
.cb-pick:disabled { cursor: default; opacity: .55; }
.cb-prize { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 18px; }
.cb-prize img { width: 34px; height: 34px; }
.cb-prize b { font-size: 24px; }
.cb-st { font-size: 18px; line-height: 1.15; text-align: center; }
.cb-root .btn.act { width: 100%; min-height: 48px; }
@media (max-width: 360px) {
  .cb-mach { padding-right: 44px; padding-left: 7px; }
  .cb-reels { gap: 4px; }
  .cb-strip img { width: 26px; height: 26px; }
  .cb-strip img.cur { width: 44px; height: 44px; margin: 5px 0; }
  .cb-name { font-size: 12px; }
  .cb-lever { right: 1px; }
  .cb-cands { gap: 3px; }
  .cb-pick img { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) { .cb-reel.roll .cb-strip, .cb-reel.land .cb-strip { animation: none; } }

/* ТОП 25 (власник 2026-10-25): аркуш у лінійку, як усі вікна; рядки розділяє пунктир ручкою (як список друзів),
   своє місце — жовта плашка, обведена ручкою; 1–3 — кружечки-медалі (золото, срібло, бронза); приз — зеленим чорнилом,
   «після першого поповнення» — блідим курсивом. Рядки й тексти — screens.js: fillTop. */
#top-ov .sheet-card { gap: 6px; }
.top-time { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 8px; font-size: 18px; }
.top-time .tp-season { font-weight: 700; }
.top-time .tp-left { color: #b2311d; white-space: nowrap; }
.top-me {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 22px;
  background: #fff3c4; border: 2px solid var(--ink); border-radius: 12px 9px 13px 8px;
}
.top-me .tp-n { min-width: 26px; font-weight: 700; }
.top-me b { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.hub-ov .top-me b img.au { height: 22px; }
.top-me-note, .top-last { font-size: 18px; line-height: 1.15; }
.top-last { padding: 4px 8px; border: 1.5px dashed rgba(29, 42, 107, .45); border-radius: 9px 7px 10px 6px; }
.top-last[data-st="paid"], .top-last[data-st="credited"] { background: #d9efc9; }
.top-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.tp-row { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 3px 6px 3px 2px; border-bottom: 1.5px dashed rgba(29, 42, 107, .3); }
.tp-row .tp-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; font-size: 19px; font-weight: 700; }
.tp-row.m1 .tp-n, .tp-row.m2 .tp-n, .tp-row.m3 .tp-n {
  border: 2px solid var(--ink); border-radius: 52% 46% 50% 48% / 48% 52% 46% 50%; box-shadow: 1px 2px 0 rgba(29, 42, 107, .2);
}
.tp-row.m1 .tp-n { background: #ffd34d; }
.tp-row.m2 .tp-n { background: #dfe4ee; }
.tp-row.m3 .tp-n { background: #e9ad72; }
.tp-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.05; }
.tp-who b { overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.tp-pz { display: flex; align-items: center; gap: 1px; font-size: 15px; color: #2f6b22; white-space: nowrap; }
.tp-pz.no { color: var(--ink-soft); font-style: italic; }
.top-list .tp-pz img.au { height: 14px; margin-left: 4px; vertical-align: 0; }
.tp-pz .tp-usd { margin: 0 4px; font-weight: 700; }   /* приз у $ першим (Сергій 10-27: «+500 000» читалось як $500) */
.tp-row .tp-au { flex: none; display: flex; align-items: center; gap: 3px; font-size: 19px; font-weight: 700; }
.tp-row.me { background: #fff3c4; border-radius: 9px 7px 10px 6px; box-shadow: inset 0 0 0 2px var(--ink); }
.top-note { font-size: 16px; line-height: 1.15; color: var(--ink-soft); }

/* вкладка «Завдання» */
/* --- вкладка «Завдання» (варіант А з workshop/tasks.html, власник 2026-10-25): скриня зверху, рядки — без обведення
   (рамка й «товщина» — лише в кнопок), у завдання — 3D-іконка, прогрес смужкою, нагорода самородком --- */
#page-tasks { display: flex; flex-direction: column; gap: 10px; }
#page-tasks h2 { margin-bottom: -2px; }
#page-tasks img:not([src]) { visibility: hidden; }   /* 3D-атлас ще не готовий — місце лишається, ламаної картинки нема */
.tk-au { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; white-space: nowrap; }
.tk-au img.au { height: 22px; width: auto; }
.tk-chest { display: flex; align-items: center; gap: 10px; flex: none; padding: 8px 10px; background: #fff3c4;
  border-radius: 16px 12px 17px 11px / 12px 17px 11px 16px; }
.tk-chest.ready { background: #ffe58a; }
.tk-chest-ic { width: 74px; height: auto; min-height: 50px; flex: none; margin: -6px 0 -4px; }
.tk-cb { flex: 1; min-width: 0; }
.tk-ct { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 22px; font-weight: 700; line-height: 1.1; }
.tk-seg { display: flex; gap: 4px; margin: 6px 0 4px; }
.tk-seg i { flex: 1; height: 10px; background: rgba(29, 42, 107, .14); border-radius: 5px; }
.tk-seg i.on { background: linear-gradient(#ffd856, #f0b324); box-shadow: inset 0 0 0 1.5px rgba(150, 95, 0, .45); }
.tk-cs { font-size: 15px; line-height: 1.1; color: var(--ink-soft); }
.tk-today { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex: none; margin: 2px 2px -4px; }
.tk-today b { font-size: 21px; }
.tk-reset { display: inline-flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.tk-clock { width: 17px; height: 17px; flex: none; align-self: center; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.tk-list { display: flex; flex-direction: column; gap: 6px; flex: none; }
.tk-row { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 6px 10px 6px 6px; background: rgba(29, 42, 107, .055);
  border-radius: 14px 10px 15px 9px / 10px 15px 9px 14px; }
.tk-row.ready { background: #fff3c4; }
.tk-row.got, .tk-row.off { opacity: .55; }
.tk-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; background: #fffdf6; border-radius: 50%; }
.tk-ic img { max-width: 36px; max-height: 34px; }
.tk-mid { flex: 1; min-width: 0; }
.tk-t { font-size: 19px; line-height: 1.1; }
.tk-row.got .tk-t { text-decoration: line-through; }
.tk-pr { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.tk-bar { flex: 1; height: 11px; min-width: 40px; overflow: hidden; background: #fbf7ea; border: 2px solid var(--ink); border-radius: 8px 6px 9px 7px; }
.tk-bar i { display: block; height: 100%; width: 0; transition: width .4s;
  background: repeating-linear-gradient(-45deg, #97cf72 0 6px, #7ab558 6px 9px); box-shadow: 1.5px 0 0 var(--ink); }
.tk-why { margin-top: 2px; font-size: 15px; line-height: 1.1; color: #b5532f; }
.tk-ok { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; background: #7ab558; border-radius: 50%; }
.tk-ok svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
#page-tasks .btn.act { flex: none; font-size: 19px; padding: 3px 12px 5px; white-space: nowrap; }
#page-tasks .btn.act img.au { height: 20px; width: auto; }
/* розділи «Основні» / «Партнерські» (власник 2026-10-25: «має бути основні та партнерські завдання») — перемикач, як
   вкладки магазину: невибраний білий, вибраний золотий натиснутий (.act.on); крапка — є що забрати (daily.js: tk-main/part) */
.tk-secs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: none; }
#page-tasks .tk-secs .btn { padding: 4px 8px 6px; font-size: 20px; }
.tk-secs .btn:not(.on) { --bg: #fffdf6; --sh: inset 0 -3px 0 rgba(29, 42, 107, .1); }
.tk-secs .tk-dot { top: -6px; right: -6px; }
.tk-pane { display: flex; flex-direction: column; gap: 10px; }
.tk-h { margin-top: 6px; }
.tk-h .tk-fr-n { font-size: 16px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.tk-fr { display: flex; flex-direction: column; gap: 6px; flex: none; }
.tk-frc { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 19px; font-weight: 700; line-height: 1.15;
  background: #ffe58a; border-radius: 14px 10px 15px 9px / 10px 15px 9px 14px; }
.tk-frc-t { flex: 1; min-width: 0; }
.tk-frc img.au, .tk-frc img.c, .tk-srv img.c, .tk-mile img.c { height: 20px; width: auto; vertical-align: -3px; }
.tk-miles, .tk-once, .tk-part { display: flex; flex-direction: column; gap: 6px; flex: none; }
.tk-row.tk-mile.ready { background: #fff3c4; }
.tk-sub { margin-top: 2px; font-size: 15px; line-height: 1.1; font-weight: 700; color: #a8740a; }
.tk-sub.tk-au img.au, .tk-sub.tk-au img.c { height: 18px; }
.tk-r { flex: none; font-size: 19px; }
.tk-rw { margin-top: 3px; font-size: 16px; color: var(--ink-soft); }
.tk-svg svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#page-tasks .tk-inv { align-self: center; margin-top: 4px; font-size: 20px; padding: 5px 18px 7px; }
.page .tk-fr-off, .page .tk-psub { flex: none; margin: 0; font-size: 17px; line-height: 1.15; color: var(--ink-soft); }
.page .tk-empty { display: flex; align-items: center; gap: 8px; flex: none; margin: 4px 2px; font-size: 18px; line-height: 1.15; }
.tk-empty svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }

/* вкладка «Шахтарі» — плитки по дві (власник 2026-10-24: варіант Б з workshop/crew.html, «щоб анімовані персонажі були»):
   вид на весь зріст на тлі кольору своєї каски (models/miner.js LOOKS) махає киркою; стартовий — рядком згори;
   «×N» — бейдж на плитці; кнопка — жовта «Найняти» з ціною, натискається вниз */
.page .cr-top { font-size: 19px; margin-bottom: 8px; }
.cr-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cr-row { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; padding: 0 0 9px; text-align: center;
  background: #fffdf6; border: 2px solid var(--ink); border-radius: 16px 11px 17px 10px / 11px 17px 10px 16px; box-shadow: 2px 3px 0 rgba(29, 42, 107, .16); }
.cr-row[data-look="0"] { --tier: #d9dee8; --tier-soft: rgb(244, 244, 242); }   /* --tier-soft — колір каски на 70 % паперу */
.cr-row[data-look="1"] { --tier: #cfe0f5; --tier-soft: rgb(241, 244, 246); }
.cr-row[data-look="2"] { --tier: #efd894; --tier-soft: rgb(250, 242, 217); }
.cr-row[data-look="3"] { --tier: #f3c63d; --tier-soft: rgb(251, 237, 191); }
.cr-row[data-look="4"] { --tier: #f28a2b; --tier-soft: rgb(251, 219, 185); }
.cr-row[data-look="5"] { --tier: #e0574c; --tier-soft: rgb(246, 203, 195); }
.cr-row[data-look="6"] { --tier: #e8b730; --tier-soft: rgb(248, 232, 187); }
/* плитка без overflow: hidden — обведення-підказка навколо «Найняти» виходить за край; тло шахтаря саме йде по внутрішніх
   кутах плитки (її радіуси мінус рамка 2 px) */
.cr-pic { flex: none; position: relative; display: flex; justify-content: center; align-items: flex-end; height: 130px; overflow: hidden; pointer-events: none;
  background: linear-gradient(to bottom, var(--tier-soft, #f4f4f2), var(--tier, #d9dee8)); border-bottom: 2px solid var(--ink); border-radius: 14px 9px 0 0 / 9px 15px 0 0; }
.cr-pic canvas, .cr-pic img { display: block; flex: none; }
.cr-pic .cr-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }   /* забій (screens.js: crewScene) — під шахтарем */
.cr-pic > :not(.cr-bg) { position: relative; }
.cr-pic .cr-ic:not([src]) { visibility: hidden; }
.cr-row .cr-t { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0 6px; line-height: 1.05; }
.cr-row .cr-name { font-size: 21px; font-weight: 700; color: var(--ink); }
/* підпис: видобуток — першим рядком, окупність і термін — дрібніше, кожне — цілим шматком */
.cr-row .cr-sub { display: block; font-size: 15px; line-height: 1.15; color: #46507e; }
.cr-row .cr-sub span { display: inline-block; margin: 0 2px; white-space: nowrap; }
.cr-row .cr-sub span:first-child { display: block; margin: 0 0 1px; font-size: 18px; font-weight: 700; color: var(--ink); }
.cr-row .cr-sub img.au { height: 15px; vertical-align: -2px; }
.cr-row .cr-sub span:first-child img.au { height: 18px; vertical-align: -3px; }
.cr-row .cr-n { position: absolute; z-index: 2; right: 6px; top: 6px; padding: 1px 7px; font-size: 15px; font-weight: 700; line-height: 1.25; white-space: nowrap;
  color: #fff; background: var(--ink); border-radius: 10px; }
.cr-row .cr-n:empty { display: none; }
.cr-buy { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 4px 8px 0; padding: 4px 10px 5px;
  font: inherit; color: var(--ink); cursor: pointer; background: linear-gradient(#ffe892, #ffd24a); border: 2px solid var(--ink);
  border-radius: 14px 11px 15px 10px / 11px 15px 10px 14px; box-shadow: 0 3px 0 var(--ink); transition: transform .06s, box-shadow .06s; }
.cr-buy:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.cr-buy .cr-act { font-size: 15px; font-weight: 700; line-height: 1; }
.cr-row .cr-cost { display: inline-flex; align-items: center; gap: 3px; font-size: 20px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.cr-row .cr-cost img.c { height: 20px; width: auto; }
/* бракує монет: кнопка сіра, тап веде в магазин */
.cr-row.poor .cr-buy { color: #6a7194; background: #efede4; border-color: #8d93ad; box-shadow: 0 3px 0 #8d93ad; }
.cr-row.poor .cr-cost img.c { filter: grayscale(.6); opacity: .85; }
/* стартовий — рядком на всю ширину: шість платних лягають 3 × 2; шахтар видно по пояс */
.cr-row.starter { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; padding: 0 10px 0 0; text-align: left; background: #fff3c4; }
.cr-row.starter .cr-pic { width: 88px; height: 78px; align-items: flex-start; border-bottom: 0; border-right: 2px solid var(--ink); border-radius: 14px 0 0 8px / 9px 0 0 14px; }
.cr-row.starter .cr-t { flex: 1; align-items: flex-start; padding: 0; }
.cr-row.starter .cr-sub span { margin: 0 6px 0 0; }
/* герої рулетки на добу (screens.js: fillHeroes) — рядками, як стартовий, під ним; «на добу» — плашкою */
.cr-heroes { grid-column: 1 / -1; display: grid; gap: 10px; }
.cr-heroes:empty { display: none; }
.cr-row.hero { background: #ffe39a; }
.cr-row.hero .cr-n { background: #d63e26; }
.cr-row.hero .cr-sub span:nth-child(2) { font-weight: 700; color: #b2361f; }
.page .cr-sum { margin-top: 12px; font-size: 18px; color: var(--ink); line-height: 1.3; }
.page .cr-sum img.au { height: 17px; vertical-align: -3px; }
@media (max-width: 380px) {
  .cr-list { gap: 8px; }
  .cr-row .cr-name { font-size: 19px; }
  .cr-row .cr-sub { font-size: 13.5px; }
  .cr-row .cr-sub span:first-child { font-size: 16px; }
  .cr-buy { margin: 4px 6px 0; padding: 4px 6px 5px; }
  .cr-row .cr-cost { font-size: 18px; }
}

/* вкладка «Друзі» */
#b-invite.btn { font-size: 22px; padding: 6px 18px; }
.page .fr-link { font-size: 15px; word-break: break-all; margin: 8px 0 0; }
.page .fr-empty { font-size: 19px; }


/* вкладка «Друзі» — з сервера (SPEC referrals) */
.page .fr-sub { font-size: 19px; margin-bottom: 6px; }
.fr-rules { margin: 0 0 10px; padding-left: 20px; font-size: 18px; line-height: 1.2; }
.fr-rules li { margin-bottom: 3px; }
.fr-rules img.c, .fr-rules img.au, .fr-row img.c, .fr-row img.au { height: 18px; width: auto; vertical-align: -3px; }
.page .fr-stats { font-size: 18px; margin: 8px 0 6px; color: var(--ink); }
/* віхи й «Забрати» переїхали у «Завдання» — сюди рядок-посилання (крапка — коли там чекає «Забрати») */
.fr-go.act { display: flex; width: 100%; justify-content: space-between; margin: 2px 0 10px; padding: 6px 12px 8px; font-size: 19px; text-align: left; }
.fr-go svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fr-list { display: flex; flex-direction: column; }
.fr-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 4px; font-size: 19px; border-bottom: 1.5px dashed rgba(29, 42, 107, .3); }
.fr-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-row span { font-size: 16px; color: #46507e; white-space: nowrap; }

/* =====================  Профіль і вивід (власник 2026-10-25)  ===================== */
/* шапка: рівень і аватарка — одна кнопка профілю («профіль аву добав там де рівень 5»); аватарка налягає на табличку */
#top .prof-btn { display: flex; align-items: center; flex: none; padding: 0; color: inherit; font: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* z-index 0 — свій шар таблички: її ручна обводка (svg.sk, z-index 2) лишається під аватаркою, а не лягає поверх кружка;
   корона — на лівий край, праворуч її закриває аватарка */
#top .prof-btn .lvl-badge { z-index: 0; margin-right: -12px; padding-right: 18px; }
#top .prof-btn .lvl-badge .i-crown { right: auto; left: -6px; transform: rotate(-14deg); }
#top .ava { position: relative; z-index: 1; width: 44px; height: 44px; flex: none; overflow: hidden; background: #fffdf6;
  border: 2px solid var(--ink); border-radius: 50%; box-shadow: 1.5px 2px 0 rgba(29, 42, 107, .2); transition: transform .08s; }
#top .ava img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
#top .ava img.photo { object-position: 50% 50%; }
#top .ava img:not([src]) { visibility: hidden; }
#top .prof-btn:active .ava { transform: translateY(2px); }
#app.short #top .ava { width: 38px; height: 38px; }

/* --- вкладка «Вивід» --- */
#page-wd { display: flex; flex-direction: column; gap: 10px; padding-bottom: 24px; }
#page-wd h2 { margin-bottom: -2px; }
#page-wd img:not([src]) { visibility: hidden; }
.wd-bal { display: flex; align-items: center; gap: 10px; flex: none; padding: 10px 12px; background: #fff3c4;
  border-radius: 16px 12px 17px 11px / 12px 17px 11px 16px; }
.wd-bal-ic { width: 54px; height: 46px; object-fit: contain; flex: none; }
.wd-bal-m { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wd-bal-t { font-size: 16px; color: var(--ink-soft); line-height: 1.1; }
.wd-bal-v { font-size: 32px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-bal-usd { display: flex; align-items: baseline; gap: 4px; flex: none; font-size: 18px; color: var(--ink-soft); }
.wd-bal-usd b { font-size: 26px; color: #2f6d22; }
.wd-can { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex: none; margin: -4px 4px 0; font-size: 18px; color: var(--ink-soft); }
.wd-can b { font-size: 21px; color: var(--ink-soft); }
.wd-can.on b { color: #2f6d22; }
.wd-steps { display: flex; flex-direction: column; gap: 6px; flex: none; }
.wd-step { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 10px 6px 8px; background: rgba(29, 42, 107, .055);
  border-radius: 14px 10px 15px 9px / 10px 15px 9px 14px; }
.wd-n { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; font-style: normal; font-size: 19px; font-weight: 700;
  background: #fffdf6; border: 2px solid var(--ink); border-radius: 50%; }
.wd-step.ok .wd-n { font-size: 0; color: transparent; overflow: hidden; background: #7ab558; border-color: #4f8a35; }   /* font-size 0 не ховає цифру в WebView з мінімальним кеглем */
.wd-step.ok .wd-n::after { content: ''; width: 12px; height: 7px; margin-top: -3px; border: solid #fff; border-width: 0 0 3.4px 3.4px; transform: rotate(-45deg); }
.wd-sm { flex: 1; min-width: 0; }
.wd-st { display: block; font-size: 19px; line-height: 1.1; overflow-wrap: anywhere; }
.wd-step.ok .wd-st { color: var(--ink-soft); }
.wd-ss { display: block; margin-top: 2px; font-size: 14px; line-height: 1.1; color: var(--ink-soft); }
.wd-sp { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.wd-step .btn.act { flex: none; font-size: 17px; padding: 3px 11px 5px; white-space: nowrap; }
.wd-step.ok[data-step="paid"] .btn { display: none; }
.wd-step .wd-conn:not(.lt) { --bg: linear-gradient(#7fd3ff, #2aa8f2 60%, #0b93e0); --sh: inset 0 -3px 0 rgba(0, 70, 140, .3), inset 0 3px 0 rgba(255, 255, 255, .55); color: #fff; }
.wd-form, .wx { display: flex; flex-direction: column; gap: 6px; flex: none; padding: 10px; background: #fffdf6; border: 2px solid var(--ink);
  border-radius: 16px 11px 17px 10px / 11px 17px 10px 16px; box-shadow: 2px 3px 0 rgba(29, 42, 107, .16); transition: opacity .2s; }
.wd-form.off, .wx.off { opacity: .55; }
.wd-amt { display: flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; background: #f7f2e4; border: 2px solid var(--ink); border-radius: 12px 9px 13px 8px / 9px 13px 8px 12px; }
.wd-cur { font-size: 26px; font-weight: 700; }
#wd-in, #wx-in { flex: 1; min-width: 0; padding: 4px 0; font: inherit; font-size: 26px; font-weight: 700; color: var(--ink); background: none; border: 0; outline: none; }
#wd-in::placeholder, #wx-in::placeholder { color: rgba(29, 42, 107, .35); }
.wd-amt .btn { flex: none; font-size: 17px; padding: 2px 10px 4px; }
.wd-calc, .wx-calc { font-size: 16px; line-height: 1.2; color: var(--ink-soft); }
.wd-calc img.au, .wx-calc img.au, .wx-calc img.c { height: 18px; width: auto; vertical-align: -3px; }
.wd-calc b, .wx-calc b { color: var(--ink); }
.wd-go.btn.act, .wx-go.btn.act { font-size: 23px; padding: 6px 12px 8px; }
.wd-go.off, .wx-go.off { filter: saturate(.25); opacity: .75; }
.page .wd-why, .page .wx-why { margin: 0; font-size: 15px; line-height: 1.15; text-align: center; color: var(--ink-soft); }
.page .wd-why.bad, .page .wx-why.bad { color: #b5532f; }
/* обмін: самородок перед полем (як $ у виводі), монета в кнопці */
.wx-ic { width: 30px; height: 26px; object-fit: contain; flex: none; }
.wx-go img.c { width: auto; height: 22px; vertical-align: -4px; }
.wd-h { margin: 4px 2px -4px; font-size: 21px; }
.wd-lim { display: flex; flex-direction: column; gap: 6px; flex: none; padding: 0 2px; }
.wd-lr { display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 8px; font-size: 17px; }
.wd-lr b { font-size: 16px; white-space: nowrap; }
.page .wd-lnote { margin: 0; font-size: 14px; line-height: 1.15; color: var(--ink-soft); }
.wd-hist { display: flex; flex-direction: column; gap: 4px; flex: none; }
.page .wd-empty { margin: 0 2px; font-size: 16px; color: var(--ink-soft); }
.wd-hr { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 6px 10px; font-size: 17px;
  background: rgba(29, 42, 107, .055); border-radius: 12px 9px 13px 8px / 9px 13px 8px 12px; }
.wd-hd { font-size: 14px; color: var(--ink-soft); }
.wd-hs { padding: 1px 8px 2px; font-size: 13px; font-weight: 700; border-radius: 8px; background: #fff3c4; }
.wd-hs[data-s="ok"], .wd-hs[data-s="done"] { color: #fff; background: #7ab558; }
.wd-hs[data-s="no"] { color: #fff; background: #c0573a; }
.page .wd-soon { display: flex; align-items: center; gap: 8px; flex: none; margin: 2px 0 0; font-size: 15px; line-height: 1.15; }
.wd-soon svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }

/* підтвердження виводу */
.wdc-rows { display: flex; flex-direction: column; gap: 4px; }
.wdc-r { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 2px; font-size: 18px; border-bottom: 1.5px dashed rgba(29, 42, 107, .2); }
.wdc-r span { color: var(--ink-soft); }
.wdc-r b { text-align: right; overflow-wrap: anywhere; }
.wdc-warn { margin: 2px 0; padding: 6px 10px; font-size: 16px; line-height: 1.2; background: #fde3d8; border-left: 3px solid #c0573a; border-radius: 2px 8px 8px 2px; }
.wdc-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.wdc-btns .btn { font-size: 20px; padding: 5px 10px 7px; }

/* --- профіль (вікно з аватарки; власник 2026-10-25 обрав «вітрину» — Б із трьох, workshop/profile.html) --- */
#prof-ov .sheet-card { gap: 10px; max-height: 94%; overflow-y: auto; }
.pf-me { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 2px; }
/* аватар у кільці: золото заповнює кільце до наступного рівня шахти (--p від 0 до 1, screens.js: fillLvl) */
.pf-ava { position: relative; width: 132px; height: 132px; flex: none; padding: 0; color: inherit; font: inherit; background: none; border: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pf-ava::before { content: ''; position: absolute; inset: 0; border: 2.5px solid var(--ink); border-radius: 50%; }
.pf-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#f0bd23 calc(var(--p) * 1turn), rgba(29, 42, 107, .13) 0);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  mask: radial-gradient(closest-side, transparent calc(100% - 10px), #000 calc(100% - 9px)); }
.pf-face { position: absolute; inset: 12px; overflow: hidden; background: #fffdf6; border: 2.5px solid var(--ink); border-radius: 50%; }
.pf-ava img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.pf-ava img.photo { object-position: 50% 50%; }
.pf-ava img:not([src]) { visibility: hidden; }
.pf-edit { position: absolute; right: 4px; bottom: 14px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  background: #ffd856; border: 2px solid var(--ink); border-radius: 50%; }
.pf-edit svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pf-lv { position: absolute; left: 50%; bottom: -10px; z-index: 1; display: flex; align-items: center; gap: 3px; padding: 1px 10px 3px; font-size: 20px;
  font-weight: 700; background: linear-gradient(#fff2b0, #ffd856); border: 2.5px solid var(--ink); border-radius: 12px 9px 13px 8px;
  transform: translateX(-50%); white-space: nowrap; }
.pf-lv .i-crown { width: 20px; height: 13px; }
.pf-lv .i-crown path { fill: #ffd23f; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.pf-name { margin-top: 12px; font-size: 29px; line-height: 1.05; text-align: center; overflow-wrap: anywhere; }
.pf-next { font-size: 15px; line-height: 1.15; color: var(--ink-soft); text-align: center; }
.pf-avas { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; padding: 8px; background: rgba(29, 42, 107, .055);
  border-radius: 14px 10px 15px 9px / 10px 15px 9px 14px; }
.pf-av { aspect-ratio: 1; padding: 0; overflow: hidden; background: #fffdf6; border: 2px solid rgba(29, 42, 107, .35); border-radius: 50%; cursor: pointer; }
.pf-av.on { border: 3px solid #e0a400; box-shadow: 0 0 0 3px #ffe58a; }
.pf-av img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.pf-av img:not([src]) { visibility: hidden; }
/* показники — стрічкою на 4 колонки: іконка, число, підпис */
.pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: #fffdf6; border: 2.5px solid var(--ink);
  border-radius: 15px 11px 16px 10px / 11px 16px 10px 15px; box-shadow: 0 4px 0 rgba(29, 42, 107, .25); }
.pf-st { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 7px 2px 6px; text-align: center; }
.pf-st + .pf-st { border-left: 2px dashed rgba(29, 42, 107, .22); }
#prof-ov .pf-st img { display: block; width: 40px; height: 40px; object-fit: contain; }
.pf-st b { font-size: 21px; line-height: 1; white-space: nowrap; }
.pf-st b small { font-size: 14px; font-weight: 400; }
.pf-st > span { font-size: 13px; line-height: 1.05; color: var(--ink-soft); }
/* чотири кнопки (власник 2026-10-25: «кнопка правила, графіка ,мова , підтримка») — білі кнопки дії в ряд: значок
   «ручкою» над підписом. Значок: контур чорнилом, заливка — легкий тон паперу */
.pf-btns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-bottom: 3px; }
.pf-b.act { --d: 3px; flex-direction: column; gap: 1px; min-width: 0; padding: 6px 2px 6px; font-size: 15px; }
.pf-b svg { display: block; width: 34px; height: 34px; fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pf-b .pb-fill { fill: #fff3c4; }
.pf-b[data-pf="gfx"] .pb-fill { fill: #dcebfa; }
.pf-b[data-pf="lang"] .pb-fill { fill: #dff0d8; }
.pf-b .pb-gold { fill: #ffd23f; }
.pf-b .pb-dot { stroke-width: 3.2; }
.pf-b span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 2px 0; font-size: 19px;
  border-bottom: 2px solid rgba(29, 42, 107, .12); }
.pf-row b { font-size: 18px; }
@media (max-width: 380px) {
  .pf-btns { gap: 6px; }
  .pf-b.act { font-size: 13.5px; }
  .pf-b svg { width: 30px; height: 30px; }
}
/* вікна з кнопок профілю — поверх профілю (z-index вище за .overlay профілю); закрив — профіль на місці */
.pf-sub { z-index: 22; }
.pf-sub .sheet-card { gap: 10px; max-height: 88%; overflow-y: auto; }
.pf-opts { display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px; }
/* варіант на вибір (графіка, мова): назва, підпис, ✓ у вибраного; вибраний — золотий */
.pf-opt.act { display: grid; grid-template-columns: 1fr auto; align-items: center; justify-items: start; gap: 0 10px; padding: 8px 14px 10px; text-align: left; }
.pf-opt .po-t { font-size: 21px; }
.pf-opt small { grid-column: 1; font-size: 15px; font-weight: 400; line-height: 1.15; color: var(--ink-soft); }
.pf-opt .po-ck { grid-column: 2; grid-row: 1 / span 2; font-size: 24px; visibility: hidden; }
.pf-opt.on { --bg: linear-gradient(#fff2b0, #ffd856 55%, #ffc93a); --sh: inset 0 -3px 0 rgba(196, 128, 10, .32), inset 0 3px 0 rgba(255, 255, 255, .75); }
.pf-opt.on .po-ck { visibility: visible; }
.pf-opt.on small { color: rgba(29, 42, 107, .7); }
/* мови, якої ще нема: сіра, як вимкнена кнопка, але тап відповідає «скоро» (тост) */
.pf-opt.soon { color: #6a7194; background: #efede4; border-color: #8d93ad; box-shadow: 0 var(--d) 0 #8d93ad; }
.pf-opt.soon .po-soon { grid-column: 2; grid-row: 1; font-size: 15px; color: #6a7194; }
/* правила: розділи — заголовок і короткі абзаци, як записи в зошиті (числа — screens.js: fillRules) */
.ru-body { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
.ru-sec h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; font-size: 21px; line-height: 1.1; }
.ru-sec p { margin: 0 0 3px; font-size: 16px; line-height: 1.25; }
.ru-sec ul { margin: 2px 0 4px; padding-left: 20px; font-size: 16px; line-height: 1.25; }
.ru-sec li { margin: 1px 0; }
.ru-sec .ru-soon { padding: 0 7px 1px; font-size: 13px; font-weight: 400; color: #6a7194; background: #efede4; border: 1.5px solid #8d93ad; border-radius: 8px 6px 9px 5px; }
.ru-sec img.au, .ru-sec img.c { width: 18px; height: 18px; vertical-align: -3px; object-fit: contain; }
/* де лежить прогрес (текст — cloud.js: cloudPaint; значок — data-k, screens.js: fillLvl) */
.pf-cloud { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 10px; font-size: 15px; line-height: 1.15;
  background: rgba(29, 42, 107, .06); border: 2px dashed rgba(29, 42, 107, .35); border-radius: 12px 9px 13px 8px; }
.pf-cloud svg { display: none; flex: none; width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-cloud[data-k="local"] .ck-local, .pf-cloud[data-k="ok"] .ck-ok, .pf-cloud[data-k="warn"] .ck-warn { display: block; }
.pf-cloud[data-k="ok"] { background: #e6f1d8; border-style: solid; border-color: #7ab558; }
.pf-cloud[data-k="warn"] { background: #fde6d8; border-color: #d97a4a; }
.pf-cloud:has(.cloud-st:empty) { display: none; }
/* «Почати гру заново» — тихо, внизу: не на рівні з головними діями (підтвердження — main.js) */
.pf-reset { padding: 7px 14px 8px; font: inherit; font-size: 19px; color: #b8432c; background: #fff6f2; border: 2px solid #d97a4a;
  border-radius: 14px 10px 15px 9px / 10px 15px 9px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pf-reset:active { background: #fde0d3; }
@media (max-width: 360px) {
  .pf-ava { width: 116px; height: 116px; }
  .pf-name { font-size: 25px; }
  #prof-ov .pf-st img { width: 34px; height: 34px; }
  .pf-st b { font-size: 18px; }
  .pf-st > span { font-size: 12px; }
}