/* ============================================
   Responsive Breakpoints
   ============================================ */

/* ── Tablet: <= 768px ── */
@media (max-width: 768px) {
  /* Header */
  .site-header__inner {
    padding: 12px 20px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .site-header__logo {
    flex: 1 1 auto;
    min-width: 0;
  }
  .site-header__menu-toggle {
    display: inline-flex;
    margin-inline-start: auto;
    flex-shrink: 0;
  }
  .site-header__nav,
  .site-header__menu-actions {
    display: none;
    width: 100%;
    order: 3;
  }
  .site-header.is-menu-open .site-header__nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 18px 32px rgba(37, 12, 82, 0.22);
    backdrop-filter: blur(18px);
  }
  .site-header.is-menu-open .site-header__link {
    display: block;
    padding: 11px 14px;
    border-radius: 14px;
  }
  .site-header.is-menu-open .site-header__link:hover {
    background: rgba(255, 255, 255, 0.08);
  }
  .site-header.is-menu-open .site-header__menu-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    order: 4;
  }
  .site-header.is-menu-open .site-header__menu-actions > * {
    width: 100%;
  }
  .site-header.is-menu-open .site-header__menu-actions .site-header__cta,
  .site-header.is-menu-open .site-header__menu-actions .home-secondary-cta,
  .site-header.is-menu-open .site-header__menu-actions .quiz-header-logout,
  .site-header.is-menu-open .site-header__menu-actions .auth-header-cta {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .site-header.is-menu-open .site-header__menu-actions .home-user-pill,
  .site-header.is-menu-open .site-header__menu-actions .quiz-user-pill {
    width: 100%;
    max-width: none;
    justify-content: center;
  }

  /* Footer */
  .site-footer__inner { padding: 28px 20px 20px; }
  .site-footer__nav { gap: 16px; }

  /* Intro screens */
  .intro-card { padding: 36px 24px; }
  .intro-card__icon { font-size: 56px; }
  .intro-card__text { font-size: 16px; }

  /* Loading screen */
  .loading-card { padding: 44px 24px; }

  /* Landing */
  #screen-landing { padding: 0; }
  .landing__hero { padding: 36px 20px 28px; }
  .landing__cone { font-size: 80px; margin-bottom: 14px; }
  .landing__subtitle { font-size: 16px; margin-bottom: 28px; }
  .paths-row { flex-direction: column; gap: 14px; max-width: 100%; padding: 0 4px; }
  .path-card { min-width: unset; padding: 24px 20px; }
  .path-card__emoji { font-size: 40px; margin-bottom: 10px; }
  .path-card__title { font-size: 18px; }

  /* Why section */
  .why-section { padding: 44px 20px 40px; }
  .why-hero { flex-direction: column-reverse; gap: 24px; margin-bottom: 40px; }
  .why-hero__title { text-align: right; }
  .why-hero__title h2 { font-size: clamp(32px, 8vw, 52px); }
  .why-hero__desc { font-size: 15px; }
  .why-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .why-card { padding: 20px 16px; }
  .why-card__title { font-size: 16px; }
  .why-patterns { grid-template-columns: 1fr; gap: 12px; }
  .pattern-card { padding: 22px 20px; }
  .pattern-card__title { font-size: 20px; }

  /* Register / Demo cards */
  .card { padding: 36px 28px; border-radius: var(--radius-lg); max-width: 500px; }
  .card__title { font-size: 22px; }

  /* Quiz header */
  .quiz-header { padding: 12px 16px 0; }
  .quiz-header__top { margin-bottom: 10px; }
  .icecream-progress { height: 60px; }

  /* Quiz body */
  .quiz-body { padding: 24px 16px; }
  .q-text { font-size: 18px; margin-bottom: 22px; }
  .options-icons { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .opt-icon-btn { padding: 16px 8px 12px; border-radius: 16px; }
  .opt-icon { font-size: 36px; }
  .opt-text { font-size: 13px; }

  /* Result cards */
  .result-card { padding: 32px 24px; border-radius: 28px; }
  .result-card__emoji { font-size: 80px; }
  .pickup-code__value { font-size: 26px; letter-spacing: 3px; }
  .flavor-predict__flavor { font-size: 20px; }
  .diy-result-card { padding: 32px 24px; border-radius: 28px; }

  /* DIY - stack vertically */
  .diy-body { flex-direction: column; }
  .diy-right {
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    border-right: none;
    border-top: 1.5px solid var(--border);
    padding: 16px 16px 12px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
  }
  .cone-panel__title { width: 100%; margin-bottom: 0; }
  .cone-panel__badge { margin-bottom: 0; }
  #cone-canvas { width: 160px !important; height: 256px !important; flex-shrink: 0; }
  .cone-items-list { flex: 1; min-width: 120px; max-height: 200px; margin-top: 0; }
  .btn-mix { width: 100%; margin-top: 0; align-self: flex-end; }
  .diy-left { padding: 20px 16px; }
  .items-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
  .item-card { padding: 14px 8px; }
  .item-card__emoji { font-size: 30px; }
}

/* ── Mobile: <= 480px ── */
@media (max-width: 480px) {
  /* Header */
  .site-header__logo-text { font-size: 18px; }
  .site-header__cta { padding: 8px 16px; font-size: 13px; }
  .site-header__menu-toggle {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }
  .site-header.is-menu-open .site-header__nav {
    padding: 10px;
    border-radius: 18px;
  }
  .site-header.is-menu-open .site-header__link {
    font-size: 14px;
    padding: 10px 12px;
  }

  /* Intro screens */
  .intro-card { padding: 28px 18px; border-radius: 20px; }
  .intro-card__icon { font-size: 48px; margin-bottom: 14px; }
  .intro-card__text { font-size: 15px; line-height: 1.7; margin-bottom: 24px; }
  .btn-intro { font-size: 16px; padding: 14px; }

  /* Loading screen */
  .loading-card { padding: 40px 18px; border-radius: 20px; }
  .loading-card__spinner { width: 52px; height: 52px; }
  .loading-card__text { font-size: 17px; }

  /* Landing */
  .landing__cone { font-size: 72px; }
  .landing__subtitle { font-size: 15px; }
  .path-card { padding: 20px 16px; }
  .path-card__emoji { font-size: 36px; }
  .path-card__title { font-size: 17px; }
  .path-card__desc { font-size: 13px; }

  /* Why section */
  .why-section { padding: 32px 16px 32px; }
  .why-hero { margin-bottom: 28px; }
  .why-grid { grid-template-columns: 1fr; gap: 12px; }
  .why-card { padding: 18px 16px; }
  .why-card__icon { width: 40px; height: 40px; font-size: 18px; border-radius: 12px; margin-bottom: 12px; }
  .why-card__title { font-size: 15px; }
  .why-card__desc { font-size: 12px; }
  .why-hero__title h2 { font-size: clamp(28px, 9vw, 42px); }
  .why-hero__badge { font-size: 11px; padding: 5px 12px; }
  .pattern-card__title { font-size: 18px; }
  .pattern-card__desc { font-size: 12px; }

  /* Register card */
  .card { padding: 32px 20px; border-radius: 20px; margin: 16px; max-width: 100%; }
  .card__icon { font-size: 38px; margin-bottom: 10px; }
  .field-group__input { padding: 12px 14px; font-size: 15px; }
  .btn-otp { padding: 12px 14px; font-size: 13px; }
  .btn-primary { font-size: 16px; padding: 14px; }

  /* Demo chips */
  .chip { padding: 10px 16px; font-size: 14px; }

  /* Quiz */
  .quiz-body { padding: 18px 14px; }
  .q-section { font-size: 11px; }
  .q-text { font-size: 16px; margin-bottom: 18px; line-height: 1.5; }
  .options-icons { gap: 8px; }
  .opt-icon-btn { padding: 14px 6px 10px; border-radius: 14px; }
  .opt-icon { font-size: 32px; }
  .opt-text { font-size: 12px; }
  .btn-next { padding: 13px 36px; font-size: 15px; }

  /* Result */
  .result-card { padding: 28px 18px; border-radius: 24px; margin: 16px; }
  .result-card__emoji { font-size: 72px; }
  .result-scores { gap: 8px; }
  .score-pill { padding: 10px 14px; }
  .score-pill__value { font-size: 22px; }
  .result-unique { padding: 12px 16px; }
  .result-unique__icon { font-size: 22px; }
  .result-unique__text { font-size: 13px; }
  .flavor-predict { padding: 16px 18px; }
  .flavor-predict__flavor { font-size: 20px; }
  .flavor-predict__btn { padding: 8px 18px; font-size: 13px; }
  .pickup-code { padding: 16px 18px; }
  .pickup-code__value { font-size: 24px; letter-spacing: 3px; }
  .result-rating__star { font-size: 28px; }
  .result-share { padding: 14px 18px; }
  .result-share__btn { padding: 10px 22px; font-size: 14px; }
  .diy-result-card { padding: 28px 18px; margin: 16px; border-radius: 24px; }

  /* DIY screen */
  .diy-header { padding: 12px 16px; }
  .diy-header__brand { font-size: 16px; }
  .diy-right { padding: 12px 14px 10px; gap: 10px; }
  #cone-canvas { width: 130px !important; height: 208px !important; }
  .cone-items-list { max-height: 160px; }
  .diy-left { padding: 16px 14px; }
  .cat-tab { padding: 8px 14px; font-size: 13px; }
  .cat-title { font-size: 16px; margin-bottom: 12px; }
  .items-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
  .item-card { padding: 12px 6px; }
  .item-card__emoji { font-size: 26px; margin-bottom: 4px; }
  .item-card__name { font-size: 11px; }
  .btn-mix { font-size: 13px; padding: 10px; }

  /* Icecream progress smaller */
  .icecream-progress { height: 54px; }
  .ic-scoop { width: 38px; height: 38px; }

  /* Full-width next button */
  .btn-next { width: 100%; text-align: center; margin-right: 0; }

  /* Landing screen top padding */
  .landing__hero { padding: 28px 16px 20px; }

  /* Full width cards */
  .card { width: calc(100% - 0px); margin: 0; }
  #screen-register,
  #screen-demo { padding: 16px; }
}

/* ── Small phones: <= 360px ── */
@media (max-width: 360px) {
  .landing__title { font-size: 38px; }
  .options-icons { grid-template-columns: 1fr 1fr 1fr; }
  .opt-icon { font-size: 28px; }
  .opt-text { font-size: 11px; }
  .card { margin: 12px; padding: 24px 16px; }
}