/* ======================================================================
   responsive.css — breakpoints for tablet/desktop and orientation.
   Mobile-first: base rules in style.css already target small screens.
   ====================================================================== */

/* Small phones ----------------------------------------------------------- */
@media (max-width: 360px) {
  :root { --edge-pad: 14px; }
  .rc-register-screen__inner { gap: 1.2rem; }
  .rc-crest { width: 68px; height: 68px; }
  .rc-crest__mark { font-size: 1.3rem; }
  .rc-shutter-btn { width: 62px; height: 62px; }
  .rc-card { padding: 1.2rem; }
  .rc-scanning-stage { width: 140px; height: 195px; }
  .rc-magnify { width: 56px; height: 56px; }
  .rc-magnify__lens { width: 50px; height: 50px; }

  /* Success screen: compact badge + tighter card for 320-360px viewports */
  .rc-success-screen { padding: 16px var(--edge-pad); }
  .rc-success-badge {
    width: 100px; height: 100px;
  }
  .rc-success-badge__ring--mid  { inset: -8px; }
  .rc-success-badge__ring--outer { inset: -16px; }
  .rc-success-badge__check { width: 50px; height: 50px; }
  .rc-success-card { padding: 1.4rem 1rem; gap: 0.75rem; }
  .rc-success-title { font-size: 1.55rem; }
  .rc-result__inner { padding: 1.2rem 1rem; }
}

/* Landscape phones --------------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
  .rc-register-screen { padding-top: 12px; padding-bottom: 12px; }
  .rc-register-screen__inner { gap: 0.8rem; padding: 0.5rem 0; }
  .rc-register-screen__brand { gap: 0.4rem; }
  .rc-crest { width: 52px; height: 52px; }
  .rc-crest__mark { font-size: 1.1rem; }
  .rc-register-screen__title { font-size: var(--step-xl); }
  .rc-register-screen__subtitle { display: none; }
  /* Camera landscape */
  .rc-camera-topbar { padding-top: 8px; padding-bottom: 6px; }
  .rc-camera-topbar__hint { display: none; }
  .rc-shutter-btn { width: 58px; height: 58px; }
  .rc-camera-controls { padding: 10px var(--edge-pad); }
  .rc-scanning-stage { width: 100px; height: 140px; }
  .rc-badge { width: 84px; height: 84px; }
  .rc-badge__check, .rc-badge__mark { width: 38px; height: 38px; }

  /* Success landscape: compact card with smaller badge so content fits without scrolling */
  .rc-success-screen { padding: 12px var(--edge-pad); }
  .rc-success-badge { width: 80px; height: 80px; }
  .rc-success-badge__ring--mid  { inset: -7px; }
  .rc-success-badge__ring--outer { inset: -14px; }
  .rc-success-badge__check { width: 40px; height: 40px; }
  .rc-success-card { gap: 0.55rem; padding: 1rem; }
  .rc-success-title { font-size: var(--step-xl); }
  .rc-success-divider { display: none; }
  .rc-result__inner { padding: 1rem; gap: 0.6rem; }
}

/* Tablet ------------------------------------------------------------------- */
@media (min-width: 640px) {
  .rc-register-screen__inner { max-width: 460px; }
  .rc-result__inner { max-width: 440px; }
  .rc-success-card { max-width: 440px; }
  .rc-register-screen__title { font-size: var(--step-3xl); }
  .rc-scanning-stage { width: 200px; height: 280px; }
}

/* Desktop / laptop ----------------------------------------------------------- */
@media (min-width: 900px) {
  body { overflow: hidden; }
  #app { max-width: 1440px; margin: 0 auto; }
  .rc-register-screen__inner,
  .rc-loading__inner,
  .rc-result__inner { max-width: 440px; }
  /* Camera: centred device frame */
  .rc-camera-screen { flex-direction: column; align-items: center; padding: 28px 0; }
  .rc-camera-topbar {
    width: min(92vw, 460px);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: rgba(6,0,10,0.96);
    border: 1px solid rgba(212,175,55,0.12);
    border-bottom: none;
  }
  .rc-camera-viewport {
    width: min(92vw, 460px);
    height: min(68vh, 650px);
    flex: none;
    border-left: 1px solid rgba(212,175,55,0.12);
    border-right: 1px solid rgba(212,175,55,0.12);
  }
  .rc-camera-controls {
    width: min(92vw, 460px);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: rgba(6,0,10,0.96);
    border: 1px solid rgba(212,175,55,0.12);
    border-top: none;
  }
  .rc-bg__crest-watermark { font-size: clamp(18rem, 22vw, 28rem); }
}

@media (min-width: 1200px) {
  .rc-register-screen__inner { max-width: 500px; }
}

/* Landscape phones --------------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
  .rc-register-screen { padding-top: 12px; padding-bottom: 12px; }
  .rc-register-screen__inner { gap: 0.8rem; padding: 0.5rem 0; }
  .rc-register-screen__brand { gap: 0.4rem; }
  .rc-crest { width: 52px; height: 52px; }
  .rc-crest__mark { font-size: 1.1rem; }
  .rc-register-screen__title { font-size: var(--step-xl); }
  .rc-register-screen__subtitle { display: none; }
  .rc-camera-frame { inset: 12px 25% 120px; }
  .rc-camera-controls { padding: 12px var(--edge-pad); }
  .rc-loading__bottle-wrap { width: 100px; height: 160px; }
  .rc-badge { width: 84px; height: 84px; }
  .rc-badge__check, .rc-badge__mark { width: 38px; height: 38px; }
}

/* Tablet ------------------------------------------------------------------- */
@media (min-width: 640px) {
  .rc-register-screen__inner { max-width: 460px; }
  .rc-result__inner { max-width: 440px; }
  .rc-camera-frame { inset: 40px 18% 210px; }
  .rc-register-screen__title { font-size: var(--step-3xl); }
}

/* Desktop / laptop ----------------------------------------------------------- */
@media (min-width: 900px) {
  body { overflow: hidden; }
  #app { max-width: 1440px; margin: 0 auto; }
  .rc-screen { align-items: center; }
  .rc-register-screen__inner,
  .rc-loading__inner,
  .rc-result__inner { max-width: 440px; }
  .rc-camera-screen {
    display: grid;
    place-items: center;
    padding: 40px 0;
  }
  .rc-camera-screen .rc-camera-viewport {
    width: min(92vw, 460px);
    height: min(80vh, 780px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(212,175,55,0.12);
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(178,34,52,0.1) inset;
    flex: none;
  }
  .rc-camera-instructions,
  .rc-camera-controls { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .rc-bg__crest-watermark { font-size: clamp(18rem, 22vw, 28rem); }
}

@media (min-width: 1200px) {
  .rc-register-screen__inner { max-width: 500px; }
}