html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.phone { font-size: 15px; }
body.phone .app { height: 100dvh; bottom: auto; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
body.phone .th-top { padding-top: env(safe-area-inset-top); }
body.phone .app.on-home .screen-home { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
body.phone .stage, body.phone .fanfare { height: 100dvh; bottom: auto; }

body.phone .k, body.phone .case-sub, body.phone .case-sub .t,body.phone .card-base, body.phone .jr-btext, body.phone .tab-btn { font-size: 13px; }
body.phone .muted { font-size: max(13px, 1em); }
body.phone .card-skin { font-size: 15px; }
body.phone .card-foot .coins, body.phone .price { font-size: 16px; }

body.phone .rvs .rv-skip { top: calc(10px + env(safe-area-inset-top)); min-height: 44px; min-width: 72px; padding: 0 16px; font-size: 15px; opacity: 1; }
body.phone .rvs .rv-tag { font-size: 13px; }
body.phone .rvs .rv-plate .badges, body.phone .rvs .rv-plate .reveal-stats { font-size: 13px; gap: 12px; }
body.phone .rvs .rv-plate .reveal-stats .k { font-size: 13px; }
body.phone .rvs .reveal-actions .btn, body.phone .rvs .rv-actions .btn { min-height: 48px; font-size: 16px; }

body.phone .backdrop .modal { max-height: calc(100dvh - env(safe-area-inset-top) - 12px); overflow-y: auto; overscroll-behavior: contain; padding-left: calc(var(--k-sheet-s, 8px) + 4px + env(safe-area-inset-left)); padding-right: calc(var(--k-sheet-s, 8px) + 4px + env(safe-area-inset-right)); }
body.phone .modal > .sheet-grip { height: 44px; margin: -6px 0 8px; position: sticky; }
body.phone .sheet-grip .sheet-x { position: absolute; right: 0; top: 0; min-height: 44px; min-width: 76px; padding: 6px 12px 10px; font-size: 15px; touch-action: manipulation; cursor: pointer; }
body.phone .th-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.phone .th-card { min-width: 0; }
body.phone .th-prev { max-width: 100%; overflow: hidden; }
body.phone .th-prev canvas { max-width: 100%; height: auto; }

@media (orientation: landscape) and (max-height: 500px) {
  body.phone .backdrop { align-items: center; }
  body.phone .backdrop .modal { max-height: calc(100dvh - 8px); width: min(100vw, 640px); }
  body.phone .stage.rvs { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
