/* Glie — телефонный проход. Подключается последним и правит обе оболочки:
   безопасные зоны, размер пальца, отклик на касание, узкие экраны. */

html{-webkit-text-size-adjust:100%}
button,a,label,summary,input,select,textarea{touch-action:manipulation}
/* iOS зумит форму, если шрифт меньше 16px */
input,select,textarea{font-size:max(16px,1em)}

/* ── безопасные зоны ───────────────────────────────────── */
.top-in{padding-left:max(var(--pad), env(safe-area-inset-left));
        padding-right:max(var(--pad), env(safe-area-inset-right))}
.wrap,.play{padding-left:max(var(--pad), env(safe-area-inset-left));
        padding-right:max(var(--pad), env(safe-area-inset-right))}
.s-play{padding-left:max(20px, env(safe-area-inset-left));
        padding-right:max(20px, env(safe-area-inset-right))}
.s-dock{padding-left:max(16px, env(safe-area-inset-left));
        padding-right:max(16px, env(safe-area-inset-right));
        padding-bottom:max(16px, env(safe-area-inset-bottom))}
.play,.wrap{padding-bottom:max(56px, env(safe-area-inset-bottom))}
.veil{padding:16px max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom))
      max(16px,env(safe-area-inset-left))}

/* ── отклик на палец: без hover его заменяет нажатие ───── */
@media (hover:none){
  .btn:hover,.case:hover,.act:hover,.pl:hover,.s-sugg button:hover,
  .size:hover,.s-pick:hover,.readmore:hover,.s-alt a:hover{transform:none}
  .btn:active,.readmore:active{transform:scale(.97)}
  .case:active,.size:active,.s-pick:active,.pers-c:active,
  .s-sugg button:active,.act-top:active{transform:scale(.985)}
  .pl:active,.tab:active,.s-who button:active,.chip-s:active{transform:scale(.94)}
}

@media (max-width:759px){
  .brand span{display:none}
  .brand b{font-size:18px}
  .top-in{gap:8px; padding-top:8px; padding-bottom:8px}
  .tabs{scroll-snap-type:x proximity; margin-left:auto; -webkit-overflow-scrolling:touch}
  .tab{scroll-snap-align:end; min-height:40px; display:flex; align-items:center}
  .ico{min-width:40px; min-height:40px}

  /* палец: всё нажимаемое не мельче 44 */
  .pl,.share,.codechip,.s-who button,.readmore,.log-t,.sheet-toggle{min-height:44px}
  .pl,.share,.codechip{display:flex; align-items:center}
  .s-pill,.s-send{min-height:44px}

  /* ── вход в ролку ── */
  .s-entry{min-height:auto; padding:20px 16px 36px; justify-content:flex-start}
  .s-greet{font-size:clamp(27px,8vw,34px); margin-bottom:8px}
  .s-sub{font-size:15.5px; margin-bottom:20px}
  .s-composer textarea{padding:16px 17px 4px; min-height:76px}
  .s-tools{padding:6px 8px 8px; gap:6px}
  .s-sugg{grid-template-columns:1fr; gap:8px}
  .s-sugg button{min-height:auto; padding:14px 15px}
  .s-alt{margin-top:24px; padding:16px}

  /* ── тред ── */
  .s-play{padding-top:2px; padding-bottom:124px}
  .s-head{padding:10px 2px 8px}
  .s-head h1{font-size:17px}
  .s-head .meta{margin-left:0; width:100%}
  .s-thread{gap:20px; overscroll-behavior-y:contain}
  .s-msg.user,.s-msg.peer{max-width:88%}
  .s-avatar{width:26px; height:26px}
  .s-body{font-size:16px}
  .s-ask-t{padding:15px 16px; gap:12px}

  /* ── дуо ── */
  .play{padding-top:10px}
  .bar-top{padding:14px 16px 10px}
  .bar-name{font-size:16px}
  .bar-meta{margin-left:0; width:100%}
  .spine{padding:0 16px 12px}
  .party,.peek{padding-left:16px; padding-right:16px}
  .deck{gap:12px}
  .sheet-b{padding:18px 16px}
  .scene-h{padding:12px 16px}
  .scene{font-size:17px}
  .scene-t{font-size:19px}
  .act-top{grid-template-columns:auto 1fr; gap:12px; padding:16px}
  .act-odds{grid-column:2; display:flex; align-items:center; gap:12px; margin-top:10px}
  .act-odds b{font-size:18px}
  .gauge{margin-top:0; width:78px}
  .confirm{padding:0 12px 12px}
  .outcome-h{padding:12px 14px; gap:8px}
  .outcome-h .town{margin-left:0; width:100%}
  .outcome p{padding:0 14px 14px; font-size:16px}
  .log-l li{padding:14px 16px}

  /* модалка броска на телефоне — во всю ширину, ближе к низу */
  .veil{align-items:flex-end; padding-top:12px}
  .roller{max-width:none; border-radius:var(--r-xl) var(--r-xl) 18px 18px;
          max-height:calc(100dvh - 24px - env(safe-area-inset-bottom))}
  .dice{padding:14px 14px; gap:9px}
  .die{padding:14px 6px}
  .roller-go{margin:14px; width:calc(100% - 28px)}

  /* документные страницы */
  .page{padding-top:18px}
  .case{min-height:auto; padding:18px}
  .case h3{font-size:17px}
  .split{gap:12px}
  .pers{padding:14px}
  .prose{font-size:16.5px}
  .band-t td:first-child{padding-right:12px; white-space:normal}
  .hero-cta .btn{flex:1 1 100%}
}

/* очень узкие — 360 и меньше */
@media (max-width:379px){
  .s-greet{font-size:25px}
  .s-msg.user,.s-msg.peer{max-width:94%}
  .act-n{display:none}
  .act-top{grid-template-columns:1fr}
  .act-odds{grid-column:1}
  .tab{font-size:12.5px; padding:8px 10px}
  .face{font-size:34px}
}

/* низкий экран в альбоме — не центрируем, а прокручиваем */
@media (max-height:560px){
  .s-entry{min-height:auto; justify-content:flex-start; padding-top:18px}
  .veil{align-items:center}
}

/* установленное приложение */
@media (display-mode:standalone){
  .top{padding-top:env(safe-area-inset-top)}
  .s-entry{min-height:calc(100dvh - 58px - env(safe-area-inset-top))}
}

/* ── скругления: ни один фон не должен вылезать острым углом ───────── */
.sheet,.bar,.case,.mode-c,.act,.outcome,.roller,.s-card,.s-ask,
.pers-c,.size,.s-pick,.s-line,.s-msg.user,.s-msg.peer,.s-roll,
.think,.fin,.duel-bar,.peek,.log-l li,.gauge,.pip,.spine-i{overflow:hidden}
/* поле ввода не подрезаем: из него выпадают списки настроек */
.s-composer,.s-dock-in{overflow:visible}
.sheet-h,.sheet-b,.party,.peek,.scene-h,.bar-top,.spine,.detour,
.confirm,.leaners,.log-t,.sheet-toggle{border-radius:0}
.sheet>:first-child,.bar>:first-child,.roller>:first-child{border-top-left-radius:inherit;
  border-top-right-radius:inherit}
.sheet>:last-child,.bar>:last-child,.roller>:last-child{border-bottom-left-radius:inherit;
  border-bottom-right-radius:inherit}
