/* =====================================================================
   Free Lotty — modo app en celulares y tabletas (≤ 900px):
   encabezado fijo compacto, barra de pestañas inferior, botón de
   confirmar siempre visible, sorteos deslizables y ventanas tipo
   "bottom sheet". En escritorio nada de esto se aplica.
   ===================================================================== */
.tab-bar { display: none; }

@media (max-width: 900px) {
  :root { --tabbar-h: 64px; --safe-b: max(env(safe-area-inset-bottom, 0px), 16px); } /* mínimo 16px: Safari a veces da 0 y la barra de inicio tapaba los textos */
  body { padding-bottom: calc(var(--tabbar-h) + var(--safe-b)); overscroll-behavior-y: none; }
  button, a, input, select, label { touch-action: manipulation; }
  button, .tab-bar a { -webkit-user-select: none; user-select: none; }
  button:not(:disabled):active, .secondary-button:active, .primary-button:active { transform: scale(.97); }

  /* ---------- Encabezado tipo app ---------- */
  .site-header { position: sticky; top: 0; z-index: 60; min-height: 58px; padding: env(safe-area-inset-top, 0px) 16px 0; gap: 10px; background: #ffffffeb; backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); }
  .menu-button, .mobile-nav, .header-tickets { display: none !important; }
  .header-actions { gap: 8px; }
  .prize-ribbon-track span { padding: 6px 16px; font-size: 13px; gap: 8px; }
  .prize-ribbon-track span b { font-size: 17px; }
  .prize-ribbon-track img { width: 16px; height: 16px; }

  /* ---------- Título de cada pantalla ---------- */
  main { padding: 16px 16px 0; }
  .workspace-heading { flex-wrap: nowrap; margin-bottom: 6px; }
  .workspace-heading .eyebrow { display: none; }
  .workspace-heading h1 { font-size: 27px; letter-spacing: -.035em; }
  .demo-label { flex-shrink: 0; font-size: 11px; padding: 3px 7px; border-radius: 99px; }
  .demo-banner { font-size: 13px; line-height: 1.45; margin-bottom: 14px; }

  /* Tarjetas más redondeadas, como en una app */
  .portal-hero, .latest-preview, .draw-card, .portal-section, .play-section, .ticket-panel, .faq details { border-radius: 18px; }
  .secondary-button, .primary-button, .submit-button { border-radius: 12px; }

  /* Transición suave al cambiar de pestaña */
  [data-view]:not([hidden]) { animation: view-in .28s ease-out; }

  /* ---------- Sorteos: carrusel deslizable ---------- */
  .portal-draws { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 4px 16px 14px; scrollbar-width: none; }
  .portal-draws::-webkit-scrollbar { display: none; }
  .portal-draws .draw-card { flex: 0 0 min(78%, 320px); scroll-snap-align: start; scroll-margin-left: 16px; }

  /* ---------- Crear boleto: botón fijo sobre la barra de pestañas ---------- */
  .play-section { padding: 18px 16px 92px; }
  #submit-entry { position: fixed; z-index: 55; left: 16px; right: 16px; width: auto; bottom: calc(var(--tabbar-h) + var(--safe-b) + 30px); min-height: 54px; /* +30px: deja libre el botón redondo "Jugar", que sobresale de la barra */ border-radius: 14px; box-shadow: 0 8px 24px #0d2f2540; }
  #submit-entry:disabled { background: #e3e9e3; color: #5d6d62; box-shadow: 0 6px 18px #0d2f2526; }

  /* ---------- Pie de página discreto ---------- */
  footer { display: none; } /* en móvil no se muestra el pie: así la pantalla de jugar cabe sin scroll */
  .footer-links { display: none; }

  /* ---------- Barra de pestañas inferior ---------- */
  .tab-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: #ffffffee; backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -4px 20px #0d2f2512; }
  .tab-bar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 700; color: var(--muted); }
  .tab-bar a .icon { width: 24px; height: 24px; transition: transform .15s; }
  .tab-bar a:active .icon { transform: scale(.88); }
  .tab-bar a[aria-current] { color: var(--green); }
  .tab-bar a[aria-current]:not(.tab-play)::before { content: ''; position: absolute; top: 8px; left: 50%; width: 52px; height: 30px; margin-left: -26px; border-radius: 99px; background: var(--mint); z-index: -1; }
  .tab-play-icon { width: 54px; height: 54px; margin-top: -24px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-button); color: var(--gold-ink); box-shadow: 0 6px 16px #b07a0566, 0 0 0 4px white; transition: transform .15s; }
  .tab-play .tab-play-icon .icon { width: 26px; height: 26px; stroke-width: 2.6; }
  .tab-play:active .tab-play-icon { transform: scale(.92); }
  .tab-badge { position: absolute; top: 6px; left: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #e5484d; color: white; font-size: 11px; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px white; }

  /* ---------- Ventanas como "bottom sheet" ---------- */
  dialog { width: 100%; max-width: 100%; margin: auto 0 0; border: 0; border-radius: 22px 22px 0 0; padding: 10px 20px calc(20px + var(--safe-b)); max-height: 90dvh; animation: sheet-up .32s cubic-bezier(.2, .9, .3, 1); }
  dialog::before { content: ''; display: block; width: 40px; height: 5px; margin: 0 auto 2px; border-radius: 99px; background: var(--line); }
  .dialog-close { margin: -4px -10px 0 auto; }

  .storage-message { bottom: calc(var(--tabbar-h) + var(--safe-b) + 8px); }
}

/* Solo opacidad: un transform rompería el botón fijo dentro de la sección */
@keyframes view-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }

@media (max-width: 900px) {
  /* El título grande de la pantalla ya lo dice: se ocultan los títulos repetidos */
  #entries .section-heading > div:first-child, #results .section-heading > div:first-child, #play-title { display: none; }
  #entries .section-heading, #results .section-heading { margin-bottom: 4px; }
}

@media (max-width: 900px) {
  /* Resultados en el celular: filtros e historial deslizables */
  .results-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .next-draw { padding: 14px 16px; }
  .next-draw .primary-button { width: 100%; justify-content: center; }
  .result-filters { flex-wrap: nowrap; overflow-x: auto; margin: 14px -16px 0; padding: 0 16px 4px; scrollbar-width: none; }
  .result-filters::-webkit-scrollbar, .result-history::-webkit-scrollbar { display: none; }
  .result-filters button { flex-shrink: 0; }
  .result-card { padding: 18px 16px; }
  .winning-balls { justify-content: space-between; gap: 6px; }
  .winning-balls span { width: 40px; height: 40px; font-size: 17px; }
  .my-ticket .status-tag { margin-left: 0; }
  .result-history { display: flex; overflow-x: auto; max-height: none; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 8px; }
  .result-item { flex: 0 0 auto; scroll-snap-align: start; scroll-margin-left: 16px; }
}

@media (max-width: 900px) {
  /* Reglas en el celular */
  .rules-hero { padding: 18px 16px; gap: 14px; }
  .rules-hero img { width: 72px; height: 72px; }
  .faq.rules .rules-hero h2 { font-size: 26px; }
  .rules-hero p:last-child { font-size: 15px; }
  .steps-nav { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; }
  .steps-nav::-webkit-scrollbar { display: none; }
  .steps-nav button { flex-shrink: 0; }
  .step-panel { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
  .step-copy h4 { font-size: 21px; }
  .step-copy p:last-child { font-size: 16px; }
  #step-next { min-width: 0; }
  .rules-grid { grid-template-columns: minmax(0, 1fr); }
  .calendar-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .calendar-prize { font-size: 26px; }
  .quota-visual { flex-wrap: nowrap; gap: 6px; }
  .quota-ticket { width: 46px; height: 40px; }
  .step-visual .mini-balls span { width: 36px; height: 36px; }
}

@media (max-width: 1150px) and (min-width: 641px) { .rewards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Jugar en móvil: boleto arriba y fijo, cuadrícula compacta ---------- */
@media (max-width: 640px) {
  .play-section { display: flex; flex-direction: column; gap: 0; padding: 14px 14px 12px; margin-bottom: 92px; } /* el margen deja libre el botón fijo de enviar */
  .play-intro .eyebrow { display: none; }
  .play-intro h2 { font-size: 24px; }
  .play-intro > p:not(.eyebrow) { font-size: 14px; margin-top: 4px; }
  .selection-count { display: none; }
  .ticket-panel { display: contents; }
  .ticket-label { display: none; }
  #ticket-preview { order: 1; position: sticky; top: calc(58px + env(safe-area-inset-top, 0px) + 6px); z-index: 40; margin: 12px 0 6px; box-shadow: 0 12px 30px #00000066; }
  .number-picker { order: 2; margin-top: 12px; }
  .number-picker label[for="draw-select"] { font-size: 14px; }
  #draw-select { margin: 4px 0 12px; min-height: 42px; }
  .picker-topline { font-size: 14px; margin-bottom: 10px; }
  .number-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
  .lotto-number { min-height: 0; font-size: 15px; }
  .daily-quota { order: 3; margin-top: 16px; font-size: 15px; }
  .unlock-choice, .quota-message, .form-message, .ticket-panel > small { order: 4; }
  .unlock-choice { margin-top: 10px; }
  .ticket-panel > small { margin-top: 8px; }
}

/* iPhone SE / mini (375px): el encabezado no cabía por 2px y ensanchaba toda la página */
@media (max-width: 380px) {
  .site-header { padding-left: 12px; padding-right: 12px; gap: 6px; }
  .header-actions { gap: 5px; }
}

/* Pantallas angostas: las 6 bolas del último resultado se encogen si no caben (en 375px se salían) */
@media (max-width: 640px) {
  #latest-preview-content > .mini-balls { gap: 8px; }
  .hero-signup { position: relative; z-index: 2; } /* el texto siempre por encima de la caricatura */
  #latest-preview-content > .mini-balls span { width: auto; flex: 1 1 0; min-width: 0; max-width: 50px; font-size: clamp(15px, 4.4vw, 18px); }
}

/* Inicio en celular: sin el título "Sala de sorteos" y la tarjeta principal llena la pantalla
   (alto visible − encabezado − cinta de premios − márgenes − barra de abajo) */
@media (max-width: 640px) {
  html[data-screen="lobby"] .workspace-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
  html[data-screen="lobby"] .portal-hero { min-height: calc(100svh - 58px - env(safe-area-inset-top, 0px) - 33px - 16px - 12px - var(--tabbar-h) - var(--safe-b)); }
  .hero-mobile-host { margin-top: auto; }
  html[data-screen="lobby"] .hero-mobile-host { width: 84%; max-width: 360px; right: -14px; }
  html[data-screen="lobby"] .portal-hero .primary-button { width: 100%; justify-content: center; min-height: 62px; font-size: 21px; border-radius: 16px; }
}

/* ---------- Jugar en móvil: que se vea toda la cuadrícula sin bajar ----------
   Sin título, sorteo en botones grandes, boleto compacto (solo los 6 números) y el aviso de invitado al final */
@media (max-width: 640px) {
  html[data-screen="play"] .workspace-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
  .play-section { padding-top: 10px; }
  .play-intro > p:not(.eyebrow) { font-size: 13px; color: var(--muted); }
  #ticket-preview { margin: 6px 0 2px; }
  #ticket-preview .lt-meta, #ticket-preview .lt-stub { display: none; }
  #ticket-preview .lt-head { padding: 7px 12px; }
  #ticket-preview .lt-numbers { padding: 10px 10px; }
  .number-picker { margin-top: 8px; }
  .number-picker label[for="draw-select"], #draw-select { display: none; }
  .draw-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
  .draw-chip { display: grid; justify-items: center; gap: 1px; min-height: 48px; padding: 5px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--ground); color: var(--ink); font: inherit; line-height: 1.15; }
  .draw-chip b { font-size: 15px; }
  .draw-chip span { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .draw-chip[aria-checked="true"] { border-color: var(--gold-deep, #b07a05); background: var(--gold-button); color: var(--gold-ink); box-shadow: 0 3px 0 #b07a05; }
  .draw-chip[aria-checked="true"] span { color: var(--gold-ink); }
  .picker-topline { margin-bottom: 6px; }
  .picker-actions .text-button { min-height: 40px; font-size: 16px; }
  .ticket-panel > .player-note { order: 5; margin-top: 10px; padding: 8px 10px; font-size: 13px; line-height: 1.4; }
  .ticket-panel > .form-message:empty { display: none; }
  .daily-quota:not(.full) { display: none; } /* el contador del día solo se muestra al llegar al límite */
  .play-section { padding-left: 8px; padding-right: 8px; } /* más ancho para bolas más grandes */
  .number-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .lotto-number { font-size: 22px; }
  .picker-actions { display: none; } /* van dentro de la cuadrícula, en las 2 casillas libres */
  .grid-action { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border: 1px dashed var(--gold-deep, #b07a05); border-radius: 50%; background: transparent; color: var(--gold); font-size: 24px; line-height: 1; }
  .grid-action[data-action="play.quick"] { border-style: solid; background: var(--gold-button); color: var(--gold-ink); box-shadow: 0 3px 0 #b07a05; }
}

/* Pregunta rápida a pantalla completa en el celular: opciones grandes y el botón abajo, al alcance del pulgar */
@media (max-width: 640px) {
  #unlock-dialog { width: 100%; height: 100dvh; max-height: none; margin: 0; border-radius: 0; padding: calc(12px + env(safe-area-inset-top, 0px)) 20px calc(16px + var(--safe-b)); }
  #unlock-dialog[open] { display: flex; flex-direction: column; }
  #unlock-dialog::before { display: none; }
  #unlock-dialog h2 { font-size: 30px; }
  #unlock-dialog #survey-form { display: flex; flex: 1; flex-direction: column; min-height: 0; }
  #unlock-dialog #survey-options { flex: 1; margin: 20px 0 12px; overflow-y: auto; }
  #unlock-dialog #survey-options legend { font-size: 22px; line-height: 1.3; margin-bottom: 18px; }
  #unlock-dialog #survey-options label { min-height: 60px; margin-bottom: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; font-size: 18px; }
  #unlock-dialog #survey-options label:has(input:checked) { border-color: var(--gold-deep, #b07a05); box-shadow: 0 0 0 2px var(--gold-deep, #b07a05); }
  #unlock-dialog .dialog-actions { margin: 0; }
  #unlock-dialog .dialog-actions .primary-button { flex: 1; justify-content: center; min-height: 58px; font-size: 19px; }
  #unlock-dialog > .muted { margin: 10px 0 0; font-size: 13px; text-align: center; }
}

/* Mi cuenta (invitado) en el celular: solo el formulario. El texto de bienvenida queda oculto a la vista
   (los lectores de pantalla siguen leyendo el título de la sección) */
@media (max-width: 640px) {
  .auth-pitch { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
  #account .auth-view { display: block; }
  #register-email-hint { display: none; }
  #account .auth-card { padding: 0; border: 0; background: none; box-shadow: none; } /* una sola tarjeta: la de la sección */
}