/* ============================================
   IRIA · RESPONSIVE · mòbil / tablet (prototip ple)
   ============================================ */

@media (max-width: 980px) {
  html {
    height: 100%;
    height: 100dvh;
  }

  body {
    height: 100%;
    height: 100dvh;
  }

  .device-frame,
  .device-screen,
  .screens-container {
    min-height: 100dvh;
    height: 100dvh;
  }

  /* Capçaleres mòbil · mateix ritme (02–03 i 04+) post status-bar */
  .step-header,
  .app-header,
  .roleplay-screen .roleplay-app-header {
    padding-top: var(--pad-top-ui);
    padding-bottom: 12px;
    padding-left: var(--pad-inline);
    padding-right: var(--pad-inline-end);
  }

  .step-main {
    padding: 20px var(--pad-inline-end) max(12px, env(safe-area-inset-bottom, 0px)) var(--pad-inline);
    gap: 14px;
  }

  .step-bottom {
    padding: 12px var(--pad-inline-end) var(--pad-bottom-ui) var(--pad-inline);
  }

  /* 01 · Benvinguda */
  #screen-01 {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .welcome-topbar {
    padding-top: var(--pad-top-ui);
    padding-left: var(--pad-inline);
    padding-right: var(--pad-inline-end);
    padding-bottom: 4px;
  }

  /* Flux natural: eyebrow + salutació més avall (no absolute) */
  .welcome-eyebrow {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 2;
    margin: clamp(18px, 4.5vh, 28px) 0 clamp(10px, 2.5vh, 16px);
    font-size: 10px;
    letter-spacing: .18em;
    padding: 0 var(--pad-inline);
    text-align: center;
  }

  .welcome-main {
    flex: 1 1 auto;
    min-height: 0;
    padding: clamp(8px, 2vh, 16px) var(--pad-inline-end) 8px var(--pad-inline);
    justify-content: space-between;
  }

  .welcome-block-top {
    margin-top: clamp(4px, 1vh, 12px);
  }

  .welcome-greeting {
    font-size: clamp(30px, 9.2vw, 42px);
  }

  /* WebM alpha: sense disc; MP4: disc = color del matte del clip */
  .welcome-world {
    width: min(64vw, 248px);
    height: min(64vw, 248px);
    margin: clamp(-32px, -7vw, -52px) auto 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    isolation: auto;
  }

  .welcome-world.welcome-world--mp4 {
    background: var(--cream);
    border-radius: 50%;
    overflow: hidden;
    isolation: isolate;
  }

  .welcome-world.welcome-world--mp4 .welcome-world-video {
    transform: scale(1.06);
    filter: drop-shadow(0 10px 20px rgba(30, 30, 30, .08));
  }

  .welcome-world::before {
    display: none;
  }

  .welcome-world-video {
    position: static;
    z-index: auto;
    object-fit: contain;
    object-position: center center;
    transform: none;
    filter: drop-shadow(0 12px 24px rgba(30, 30, 30, .1));
  }

  .welcome-world--mp4 .welcome-world-video {
    object-fit: contain;
    transform: none;
  }

  .welcome-world.welcome-world--static {
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }

  .welcome-world.welcome-world--static .welcome-world-static {
    filter: drop-shadow(0 12px 24px rgba(30, 30, 30, .1));
  }

  .welcome-block-bottom {
    margin-top: clamp(-24px, -5vw, -40px);
    transform: none;
    gap: 12px;
    width: 100%;
    padding: 0 2px;
  }

  .welcome-tagline {
    font-size: 13px;
    max-width: 100%;
    padding: 0 2px;
  }

  .welcome-features {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    max-width: 100%;
  }

  .welcome-features-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 340px;
  }

  .welcome-features .feature-pill--accent {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    padding: 7px 14px;
  }

  .feature-pill {
    padding: 7px 10px;
    flex: 0 1 auto;
  }

  .feature-pill .fp-text {
    font-size: 10px;
    letter-spacing: .06em;
  }

  .welcome-cta-area {
    padding-left: var(--pad-inline);
    padding-right: var(--pad-inline-end);
    padding-bottom: var(--pad-bottom-ui);
    padding-top: 8px;
  }

  /* 00 · Cover */
  .cover-brand-name {
    font-size: clamp(20px, 5.5vw, 24px);
  }

  .cover-tagline {
    font-size: clamp(16px, 4.5vw, 18px);
  }

  /* Pantalles amb scroll intern · mateix respir que .step-main */
  .screen-content {
    padding-left: var(--pad-inline);
    padding-right: var(--pad-inline-end);
    padding-top: 20px;
    padding-bottom: var(--pad-bottom-ui);
  }

  .section-title-2 {
    font-size: clamp(22px, 6vw, 28px);
  }

  .stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .stat-block .val {
    font-size: clamp(22px, 6vw, 28px);
  }

  /* 18 · Tancament */
  .closing-title {
    font-size: clamp(24px, 6.8vw, 32px);
    line-height: 1.05;
  }

  #screen-18.is-closing-iria .screen-content.closing-screen {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
  }

  /* CTA sota la capçalera; vídeo a sota sense superposar Iria */
  #screen-18.is-closing-iria .app-header {
    display: none;
  }

  #screen-18.is-closing-iria .screen-content.closing-screen {
    position: relative;
  }

  /* CTA a dalt; Iria a baix a tot l’ample (no es comprimeix en flex) */
  #screen-18.is-closing-iria .closing-footer {
    position: relative;
    z-index: 3;
    order: 0;
    flex: 0 0 auto;
    max-width: min(300px, calc(100% - 40px));
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: max(18vh, calc(env(safe-area-inset-top, 0px) + 64px)) !important;
    margin-bottom: 0 !important;
  }

  #screen-18.is-closing-iria .closing-iria {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    order: unset;
    flex: none;
    min-height: 0;
    width: 100%;
    display: block;
    overflow: visible;
    background: var(--closing-bg);
    pointer-events: auto;
  }

  #screen-18.is-closing-iria .closing-iria-video {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(86dvh, 88vh) !important;
    height: auto;
    object-fit: contain;
    object-position: bottom center;
  }

  .pillar .title-p {
    font-size: 13px;
  }

  /* 19 · Roleplay */
  .roleplay-body {
    min-height: 0;
    overflow: hidden;
  }

  .roleplay-thread {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
  }

  .scene-card {
    margin-left: max(12px, env(safe-area-inset-left, 0px));
    margin-right: max(12px, env(safe-area-inset-right, 0px));
  }

  .mic-bar {
    flex-shrink: 0;
  }

  /* Acadèmia · llista horitzontal de chips */
  .academy-content {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }
}

/* Pantalles baixes (iPhone SE, teclat obert, etc.) */
@media (max-width: 980px) and (max-height: 700px) {
  .welcome-main {
    padding-top: 12px;
  }

  .welcome-world {
    width: min(56vw, 220px);
    height: min(56vw, 220px);
    margin-top: -28px;
  }

  .welcome-greeting {
    font-size: clamp(26px, 8vw, 34px);
  }

  .welcome-block-bottom {
    margin-top: -20px;
    gap: 10px;
  }

  .step-main {
    padding-top: 14px;
    gap: 12px;
  }

  .welcome-cta-area .cta {
    padding: 14px 20px;
  }
}

@media (max-width: 380px) {
  .welcome-features-row {
    gap: 5px;
  }

  .feature-pill {
    padding: 6px 9px;
  }

  .feature-pill .fp-text {
    font-size: 9px;
  }

  .compare-card .row-text {
    font-size: 13px;
  }
}