html[data-os] { -webkit-tap-highlight-color: transparent; }
html[data-os='ios'] input, html[data-os='ios'] select,
html[data-os='ios'] textarea,
html[data-os='android'] input, html[data-os='android'] select,
html[data-os='android'] textarea { font-size: 16px !important; }

.zc-osbar { display: none; align-items: center; gap: 10px; background: #16233d; border: 1px solid #22314d; border-radius: 10px; padding: 10px 14px; margin: 0 0 16px; font-size: 13px; color: #c7d5f0; line-height: 1.4; }
.zc-osbar.show { display: flex; }
.zc-osbar-txt { flex: 1; }
.zc-osbar-btn { flex-shrink: 0; border: 0; background: #2563eb; color: #fff; border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.zc-osbar-close { flex-shrink: 0; border: 0; background: transparent; color: #93c5fd; font-size: 18px; cursor: pointer; padding: 2px 8px; }

@media (max-width: 720px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  html, body { overflow-x: hidden; }
  img, iframe { max-width: 100%; }
  .wrap { padding: 20px 14px 48px; }
  header { flex-wrap: wrap; gap: 10px; margin-bottom: 18px; padding-top: env(safe-area-inset-top, 0); }
  .logo { height: 44px; }
  .who { font-size: 12px; }
  .btn-ghost { padding: 10px 14px; font-size: 14px; }
  h1 { font-size: 22px; }
  .family-tabs, .game-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
  .family-tabs::-webkit-scrollbar, .game-row::-webkit-scrollbar { display: none; }
  .fam, .game { flex-shrink: 0; }
  .cards { grid-template-columns: 1fr; }
  .card { padding: 16px; }
  .cur { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .cur button { padding: 12px 10px; font-size: 14px; }
  .form { padding: 16px; }
  .summary { padding: 14px; }
  .summary, .summary .row, .hint, .err, .box, .sub { overflow-wrap: anywhere; word-break: break-word; }
  .summary .row { gap: 8px; }
  .summary .row > span:last-child { text-align: right; min-width: 0; }
  .cf-turnstile { max-width: 100%; overflow-x: auto; }
  .cf-turnstile iframe { max-width: none; }
  .grid { grid-template-columns: 1fr; }
  .coupon { flex-wrap: wrap; }
  .coupon button { flex: 1; min-height: 44px; }
  .btn-pay { padding: 16px; font-size: 16px; min-height: 50px; }
  input, select { padding: 12px; }
  .step { padding: 12px 14px; }
  .summary .row { font-size: 13px; }
  .modal { margin: 0; max-width: 100%; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions button { padding: 14px; min-height: 48px; }
  /* fieldset currency: la leyenda ocupa la fila completa del grid */
  fieldset.cur > legend { grid-column: 1 / -1; }
  /* los inputs en flex deben poder encogerse */
  .coupon input { min-width: 0; }
  /* fallback sin JS: evita zoom forzado en iOS */
  input, select, textarea { font-size: 16px; }
  /* header: emails largos no rompen el layout */
  .userbox { min-width: 0; flex-wrap: wrap; }
  .who { overflow-wrap: anywhere; min-width: 0; }
  /* admin tickets */
  .trow { flex-wrap: wrap; }
  .msg { overflow-wrap: anywhere; word-break: break-word; }
  .msg .who { overflow-wrap: anywhere; }
  .btn { min-height: 44px; }
  textarea { min-height: 120px; }
}