/* WattCoin 3.10.1 — мобільна шліфовка: усе в межах екрана, симетрія, центрування */

/* 1. Загальне: жоден елемент не ширший за екран */
html,body{overflow-x:clip}
img,svg,video,canvas,iframe{max-width:100%}
p,li,h1,h2,h3,h4,dd,dt,td,th,blockquote,figcaption{overflow-wrap:break-word}

/* сітки й флекси не розпираються довгим вмістом */
.ld-req,.ld-steps,.sy-card,.ab-atom,.h3-wrap,.form-card,.dc-card{min-width:0}
.ld-req>*,.ld-steps>*,.sy-card>*,.h3-wrap>*{min-width:0;max-width:100%}
.ld-req{grid-template-columns:minmax(0,1fr)}

/* 2. Числа в кружечках — точно по центру (Safari) */
.ld-steps ol i,.ab-chip i{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0;line-height:1;text-align:center;flex:none;font-variant-numeric:tabular-nums}
.ld-steps ol i{justify-self:center}
.ld-steps ol button{-webkit-appearance:none;appearance:none;margin:0}

/* 3. Смуга 90 / 10 — текст переноситься, а не вилазить */
.ab-split i{min-width:0}
.ab-split i span{min-width:0;overflow:hidden;text-overflow:ellipsis}

@media (max-width:640px){
  .ab-split{height:auto;min-height:38px}
  .ab-split i{padding:7px 10px;white-space:normal;text-align:center;line-height:1.25;font-size:11.5px}
  .ab-split i span{overflow:visible}
  .ab-split i+i{flex:0 0 auto!important;padding:7px 10px}
  .sy-split{min-height:54px}
  .sy-split span{font-size:12.5px}

  /* орбіта «Про проєкт»: чипи всередині кола */
  .ab-orbit{width:min(100%,380px)}
  .ab-chip.c2{right:0}
  .ab-chip.c3{left:0}
  .ab-chip{max-width:58%}

  /* кроки: однакові кола, рівні проміжки */
  .ld-steps ol{gap:6px}
  .ld-steps ol button{padding:4px 0}
}

@media (max-width:360px){
  .ld-steps ol i{width:36px;height:36px}
  .ab-chip{font-size:12px;padding-right:10px}
  .ab-chip i{width:24px;height:24px}
}

/* 4. Біржа (симулятор): показники сіткою, вкладки без обрізання */
@media (max-width:759px){
  .tx-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;overflow:visible}
  .tx-stats>div{min-width:0}
  .tx-stats small,.tx-stats b{overflow:hidden;text-overflow:ellipsis}
  .tx-stats b{font-size:12.5px}
  .tx-bot .tx-tabs,.tx-chart .tx-head .tx-tabs{flex-wrap:wrap;height:auto;overflow:visible;row-gap:2px}
  .tx .tx-bot .tx-tabs button,.tx .tx-chart .tx-tabs button{height:36px;padding:0 10px}
  .tx-tools{flex-wrap:wrap;overflow:visible;row-gap:8px}
  .tx-t:has(td.tx-empty){min-width:0;width:100%}
  .tx-t:has(td.tx-empty) thead{display:none}
  .tx-t td.tx-empty{min-width:0;white-space:normal}
}

/* 5. Вирівнювання по ширині не зсуває кружечки, кнопки й мітки всередині абзаців/списків */
:is(.h3,.prose,.dc-single,.page-hero,.form-card) :is(p,li) *,
:is(.h3,.prose,.dc-single) li::before,
:is(.h3,.prose,.dc-single) li::after{text-align-last:auto}
button,.h3-btn,[role="tab"]{text-align-last:auto}

/* 6. Багаторядкові підписи й кнопки — повітря між рядками */
.ab-num-ctl label,.ld-limit-bar span,.sy-digits small{line-height:1.4}
.h3-btn,.btn,.ab-roles button,.h3-presets button,.h3-seg button,.ab-chip,.wl-acts button,.wl-act,.dc-chips button{line-height:1.15}

@media (max-width:640px){
  /* числа в плитках не рвуться посередині */
  .sy-tile b{font-size:clamp(15px,4.3vw,19px);overflow-wrap:break-word}
  .ld-limit-bar span{text-align:right;padding:0 10px}
}
@media (max-width:360px){
  .sy-tiles.two{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:640px){
  /* сценарії: вихідний стан — рівна сітка 2 × 3 */
  .sc-base{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;align-items:start}
  .sc-base>span{grid-column:1/-1}
  .sc-base b{line-height:1.25}
}
@media (max-width:420px){
  .tx-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 7. Числа не рвуться посередині: значення не стискаються нижче найдовшого слова */
.ab-num-out b,.ab-mini-top b,.h3-dl dd,.h3-vs-res b,.ld-res,.ld-pass-top b,.sc-tile b,.sy-tile b,.sy-bignum b,.sy-eq b,.tx-q dd,.tx-rg b,.tx-rc b,.wl-ahead b,.wl-box b{overflow-wrap:break-word}
.h3-dl dt{min-width:0;flex:1 1 auto}
.h3-dl dd{flex:0 1 auto}
.h3-tbl th,table th{overflow-wrap:normal}

/* 8. Whitepaper: таблиці й формули вміщаються в екран */
@media (max-width:640px){
  .dc-tw{overflow-x:visible}
  .dc-t{min-width:0;font-size:13px;table-layout:auto}
  .dc-t th{padding:8px 6px;font-size:10px;letter-spacing:.03em}
  .dc-t td{padding:8px 6px}
  .dc-t.num td{font-size:12px}
  .dc-t th:first-child,.dc-t td:first-child{padding-left:0}
  .dc-t th:last-child,.dc-t td:last-child{padding-right:0}
  .dc-t caption{white-space:normal}
  .dc-eq{padding:12px 14px;gap:10px;overflow-x:visible}
  .dc-eq span{font-size:14px;white-space:normal;min-width:0}
  .dc-eq i{flex:none}
}

@media (max-width:640px){
  /* FAQ: теми переносяться, а не ховаються за край */
  .dc-chips{flex-wrap:wrap;overflow:visible;mask-image:none;-webkit-mask-image:none}
}
input,textarea{text-overflow:ellipsis}

@media (max-width:640px){
  /* великі числа в плитках — під ширину плитки */
  .ab-num-out b{font-size:clamp(16px,5vw,22px)}
  .ld-pass-top b,.sc-tile b,.h3-vs-res b{font-size:clamp(16px,5vw,22px)}
  .sy-bignum b{font-size:clamp(26px,8.5vw,40px)}
}

@media (max-width:900px){
  /* головна «Долар можна надрукувати / Мегават-годину — ні»: графіка не заходить під текст */
  .h3-vs-half{min-height:560px}
  .h3-print{inset:0 0 auto 0;height:300px;overflow:hidden}
}

@media (max-width:640px){
  .h3-stats .h3-rv>b{font-size:clamp(21px,7vw,28px);white-space:nowrap}
}
@media (max-width:360px){
  .sc-tiles{grid-template-columns:minmax(0,1fr)}
  .h3-cta .h3-btn{padding-left:16px;padding-right:16px;font-size:14px}
  .ab-num-out>div,.ab-mini-top>div{padding:12px 12px}
  .ab-num-out small{letter-spacing:.04em}
}

/* 9. Мобільне меню: «Гаманець» — пункт верхнього рівня, як інші */
.mobile .m-inner>a{display:flex;justify-content:space-between;align-items:center;padding:18px 0;font:400 18px var(--f-display);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.mobile .m-inner>a::after{content:"→";color:var(--earth);font-family:var(--f-mono)}

@media (max-width:640px){
  .dc-t td,.dc-t th{white-space:normal}
  .dc-t.sym td:first-child{white-space:nowrap}
}
@media (max-width:360px){
  .ab-num-out b{font-size:15px}
}
@media (max-width:340px){
  .ab-num-out{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:900px){
  /* головний екран: текст читається поверх ліній графіки */
  .h3-hero-text h1,.h3-hero-text p,.h3-hero-text .h3-eyebrow{text-shadow:0 1px 14px rgba(4,7,15,.95),0 0 3px rgba(4,7,15,.8)}
}