/* ============================================================
   AED Training Module - design.css  (Figma-faithful rebuild)
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: 'Aldrich', sans-serif;
  background: #242424;
  color: #fff;
}

/* ============================================================
   SCREEN SYSTEM
   Each screen is absolutely inset (fills viewport).
   Only .active is visible.
   ============================================================ */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  background: #242424;
}
.screen.active { display: block; }

/* ============================================================
   GREEN GLOW BLOBS  (::before = primary, ::after = secondary)
   ============================================================ */
.screen::before, .screen::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Top-center glow (Welcome screen) */
.glow-top::before {
  width: 82vw; height: 82vw;
  background: radial-gradient(circle, rgba(80,170,60,0.55) 0%, transparent 65%);
  top: -38vw; left: 50%;
  transform: translateX(-50%);
}
.glow-top::after {
  width: 70vw; height: 70vw;
  background: radial-gradient(circle, rgba(60,150,50,0.45) 0%, transparent 60%);
  top: -30vw; left: 50%;
  transform: translateX(-50%);
}

/* Bottom-right glow */
.glow-bottom-right::before {
  width: 82vw; height: 82vw;
  background: radial-gradient(circle, rgba(70,165,55,0.5) 0%, transparent 65%);
  bottom: -35vw; right: -28vw;
}
.glow-bottom-right::after {
  width: 60vw; height: 60vw;
  background: radial-gradient(circle, rgba(55,145,45,0.35) 0%, transparent 60%);
  bottom: -25vw; right: -18vw;
}

/* Right-side glow */
.glow-right::before {
  width: 82vw; height: 82vw;
  background: radial-gradient(circle, rgba(70,165,55,0.5) 0%, transparent 65%);
  top: 50%; right: -40vw;
  transform: translateY(-50%);
}
.glow-right::after {
  width: 55vw; height: 55vw;
  background: radial-gradient(circle, rgba(55,145,45,0.3) 0%, transparent 60%);
  bottom: -15vw; right: -20vw;
}

/* All content above glows */
.screen > * { position: relative; z-index: 1; }

/* ============================================================
   NAVIGATION PILL BUTTONS  ( back    next)
   Position: absolute bottom-left / bottom-right
   ============================================================ */
.nav-btn {
  position: absolute;
  bottom: 36px;
  width: 111px; height: 66px;
  background: rgba(217,217,217,0.2);
  border: none;
  border-radius: 164px;
  box-shadow: 0 4px 100px 10px rgba(0,0,0,0.25);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
  z-index: 10;
}
.nav-btn:hover { background: rgba(217,217,217,0.32); }
.nav-back { left: 40px; }
.nav-next { right: 40px; }

/* ============================================================
   PROGRESS BAR  (centered pill at bottom)
   ============================================================ */
.progress-bar-wrap {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
}
.pb-track {
  width: 887px;
  max-width: 60vw;
  height: 25px;
  background: rgba(217,217,217,0.2);
  border-radius: 164px;
  box-shadow: 0 4px 100px 10px rgba(0,0,0,0.25);
  overflow: hidden;
}
.pb-fill {
  height: 100%;
  background: rgba(132,183,254,0.6);
  border-radius: 164px;
  transition: width 0.5s ease;
}

/* ============================================================
   SCREEN 0  WELCOME
   ============================================================ */
.welcome-panel {
  position: absolute;
  top: 47%; left: 50%;
  transform: translate(-50%, -50%);
  width: 82.7%;   /* ~1191px of 1440 */
  max-width: 1191px;
  padding: 40px 48px 44px;
  background: rgba(217,217,217,0.2);
  border-radius: 164px;
  box-shadow: 0 4px 100px 10px rgba(0,0,0,0.25);
  text-align: center;
}
.welcome-title-lg {
  font-size: clamp(24px, 4.2vw, 60px);
  line-height: 1;
  color: #fff;
}
.welcome-title-sm {
  font-size: clamp(56px, 10.4vw, 150px);
  line-height: 1.35;
  color: #fff;
}
.start-btn {
  position: absolute;
  bottom: calc(10% );
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ============================================================
   SCREEN 1  ABOUT
   ============================================================ */
.about-text {
  position: absolute;
  top: 17%;
  left: 6%;
  width: 81%;
}
.body-text p {
  font-size: clamp(22px, 3.33vw, 48px);
  line-height: 60px;
  color: #fff;
}

/* ============================================================
   SCREEN 2  VIDEO  /  SCREEN 3  AED IMAGE
   ============================================================ */
.screen-title {
  font-size: clamp(20px, 3.33vw, 48px);
  line-height: 1.3;
  color: #fff;
  position: absolute;
  top: 9%;
}
.title-left  { left: 6%; width: 74%; }
.title-center { left: 50%; transform: translateX(-50%); width: 76%; text-align: center; }

.media-frame {
  position: absolute;
  top: 24.5%;
  left: 16.7%;
  width: 66.7%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
}
.media-frame iframe,
.media-frame img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}

/* AED image frame  full-width feel */
.aed-frame {
  left: 12.2%;
  width: 78.9%;
  aspect-ratio: auto;
  height: 60.7%;
  top: 22.4%;
}
.aed-img { object-fit: contain; background: #fff; border-radius: 20px; }

/* ============================================================
   SCREEN 4  QUIZ INTRO
   ============================================================ */
.quiz-intro-text {
  top: 38%;
  font-size: clamp(24px, 4.44vw, 64px);
  line-height: 70px;
  text-align: center;
  width: 69.2%;
}

/* ============================================================
   SCREEN 5  MATCHING
   ============================================================ */
.match-screen { overflow-y: auto; }

.match-heading {
  top: 2% !important;
  font-size: clamp(18px, 3.33vw, 48px);
  width: 76%;
  line-height: 1.1;
}

.match-layout {
  position: absolute;
  top: 13%;
  left: 3.9%;
  right: 3.9%;
  bottom: 15%;
  display: flex;
  align-items: flex-start;
  gap: 0;
}

/* SVG overlay for lines */
#match-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}

/* LEFT: step cards + left dots */
.match-steps {
  flex: 0 0 42%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  z-index: 10;
}
.match-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.step-card {
  flex: 1;
  background: #C0FFB9;
  border-radius: 20px;
  padding: 8px 12px;
  font-family: 'Inter', sans-serif;
  font-size: clamp(9px, 0.9vw, 13px);
  color: #000;
  line-height: 1.45;
  min-height: 83px;
  display: flex;
  align-items: center;
  cursor: default;
  transition: box-shadow 0.15s;
}
.step-card.connected { box-shadow: 0 0 0 2.5px #8BF280; }

/* Connection dots (circles) */
.conn-dot {
  width: 53px; height: 53px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  background: rgba(180,180,180,0.55);
  border: 2px solid rgba(180,180,180,0.15);
  transition: background 0.15s, transform 0.15s;
  z-index: 10;
}
.conn-dot:hover { background: rgba(200,200,200,0.75); transform: scale(1.08); }
.conn-dot.selected {
  background: rgba(132,183,254,0.8);
  border-color: rgba(132,183,254,0.9);
  transform: scale(1.12);
}
.conn-dot.connected {
  background: rgba(139,242,128,0.55);
  border-color: rgba(139,242,128,0.7);
}

/* RIGHT: right dots + number boxes */
.match-numbers {
  flex: 0 0 calc(7.22% + 72px);  /* right-dot + number-box */
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-left: auto;
  z-index: 10;
}
.num-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 83px;
}
.num-box {
  width: 104px; height: 83px;
  background: #C0FFB9;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Aldrich', sans-serif;
  font-size: clamp(28px, 3.33vw, 48px);
  color: #000;
  flex-shrink: 0;
}

/* Status message & submit button */
.match-msg {
  position: absolute;
  bottom: calc(16% + 34px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.9rem;
  color: #8BF280;
  white-space: nowrap;
  z-index: 10;
}
.submit-match-btn {
  position: absolute;
  bottom: 16%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: none;  /* shown by JS once all 7 are matched */
}

/* ============================================================
   SCREEN-SPECIFIC PROGRESS BAR CLEARANCE
   Keep progress bar below content on Video + Matching screens.
   ============================================================ */
#s2 .media-frame {
  max-height: calc(100dvh - 235px);
}
#s2 .progress-bar-wrap,
#s5 .progress-bar-wrap {
  bottom: 10px;
}
#s5 .match-layout {
  bottom: 22%;
}

/* ============================================================
   SCREEN 6 & 7  Q&A INPUT
   ============================================================ */
.glass-input {
  position: absolute;
  top: 52%;
  left: 12.4%;
  width: 75.1%;
  height: 96px;
  background: rgba(217,217,217,0.2);
  border: none;
  border-radius: 164px;
  box-shadow: 0 4px 100px 10px rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.65);
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-weight: 100;
  font-size: clamp(16px, 2vw, 29px);
  text-align: left;
  padding: 0 40px;
  outline: none;
  transition: background 0.2s;
}
.glass-input::placeholder { color: rgba(255,255,255,0.55); }
.glass-input:focus { background: rgba(217,217,217,0.3); }

/* ============================================================
   SCREEN 8  RESULTS
   ============================================================ */
.results-text {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 69.2%;
  text-align: center;
}
.results-main {
  font-size: clamp(28px, 4.44vw, 64px);
  line-height: 70px;
  color: #fff;
}
.results-sub {
  font-size: clamp(16px, 2.2vw, 32px);
  line-height: 1.5;
  margin-top: 24px;
  opacity: 0.85;
  color: #fff;
}
.results-pass  { color: #8BF280; }
.results-fail  { color: #ff7b7b; }
.results-breakdown {
  margin-top: 28px;
  font-size: clamp(14px, 1.4vw, 20px);
  line-height: 1.9;
  color: rgba(255,255,255,0.8);
}
.results-answers {
  margin-top: 24px;
  font-size: clamp(11px, 1.1vw, 16px);
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  text-align: left;
}
.results-answers strong { color: rgba(255,255,255,0.85); }

/* ============================================================
   SHARED GLASS PILL  (Start here / Submit)
   ============================================================ */
.glass-pill {
  background: rgba(217,217,217,0.2);
  border: none;
  border-radius: 164px;
  box-shadow: 0 4px 100px 10px rgba(0,0,0,0.25);
  color: #fff;
  font-family: 'Aldrich', sans-serif;
  font-size: clamp(18px, 2.5vw, 36px);
  padding: 14px 40px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.glass-pill:hover { background: rgba(217,217,217,0.32); }

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 1200px) {
  .nav-btn {
    width: 96px;
    height: 58px;
    bottom: 30px;
  }
  .nav-back { left: 24px; }
  .nav-next { right: 24px; }

  .progress-bar-wrap { bottom: 36px; }
  .pb-track {
    width: 72vw;
    max-width: 72vw;
    height: 22px;
  }

  .body-text p {
    font-size: clamp(18px, 2.7vw, 34px);
    line-height: 1.45;
  }

  .glass-input {
    height: 80px;
    padding: 0 28px;
    top: 50%;
  }

  .match-layout {
    top: 14%;
    bottom: 16%;
    left: 2.8%;
    right: 2.8%;
  }
  .conn-dot {
    width: 42px;
    height: 42px;
  }
  .num-box {
    width: 88px;
    min-height: 72px;
    height: 72px;
  }

  #s2 .media-frame {
    max-height: calc(100dvh - 215px);
  }
  #s5 .match-layout {
    bottom: 24%;
  }
}

@media (max-width: 900px) {
  .welcome-panel {
    top: 43%;
    width: 90%;
    padding: 28px 28px 32px;
    border-radius: 48px;
  }
  .start-btn {
    bottom: 14%;
  }

  .about-text {
    top: 13%;
    left: 6%;
    width: 88%;
  }

  .screen-title {
    top: 7%;
    width: 88%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    line-height: 1.25;
  }
  .title-left,
  .title-center {
    left: 50%;
    width: 88%;
    transform: translateX(-50%);
    text-align: center;
  }

  .media-frame {
    top: 22%;
    left: 7%;
    width: 86%;
  }
  .aed-frame {
    top: 19%;
    left: 7%;
    width: 86%;
    height: 64%;
  }

  .quiz-intro-text {
    top: 34%;
    width: 86%;
    line-height: 1.3;
  }

  .match-heading {
    top: 4% !important;
    width: 90%;
  }
  .match-layout {
    top: 14%;
    bottom: 18%;
  }
  .match-steps {
    flex-basis: 68%;
    gap: 8px;
  }
  .step-card {
    font-size: clamp(9px, 1.5vw, 12px);
    min-height: 74px;
    padding: 8px 10px;
  }
  .match-numbers {
    flex-basis: 26%;
  }
  .num-row {
    min-height: 74px;
  }

  .match-msg {
    bottom: calc(18% + 26px);
    font-size: 0.85rem;
  }
  .submit-match-btn {
    bottom: 18%;
  }

  .glass-input {
    top: 48%;
    left: 6%;
    width: 88%;
    height: 72px;
    border-radius: 999px;
  }

  .results-text {
    top: 42%;
    width: 86%;
  }
  .results-breakdown {
    line-height: 1.5;
  }

  #s2 .media-frame {
    max-height: calc(100dvh - 200px);
  }
  #s5 .match-layout {
    bottom: 24%;
  }
}

@media (max-width: 640px) {
  .screen {
    overflow-y: auto;
    padding-bottom: 110px;
  }

  .nav-btn {
    width: 72px;
    height: 48px;
    font-size: 1.2rem;
    bottom: 16px;
    z-index: 20;
  }
  .nav-back { left: 12px; }
  .nav-next { right: 12px; }

  .progress-bar-wrap {
    bottom: 20px;
  }
  .pb-track {
    width: min(62vw, 320px);
    max-width: 62vw;
    height: 14px;
  }

  .welcome-panel {
    top: 40%;
    border-radius: 28px;
    padding: 20px 18px 24px;
  }
  .welcome-title-lg {
    line-height: 1.05;
  }
  .welcome-title-sm {
    line-height: 1.2;
  }
  .start-btn {
    bottom: 11%;
    padding: 10px 26px;
  }

  .about-text {
    top: 9%;
  }
  .body-text p {
    font-size: clamp(16px, 4.7vw, 23px);
  }

  .screen-title {
    top: 5%;
    width: 92%;
    font-size: clamp(18px, 5.3vw, 28px);
  }
  .media-frame {
    top: 19%;
    left: 4%;
    width: 92%;
    border-radius: 14px;
  }
  .aed-frame {
    top: 15%;
    left: 4%;
    width: 92%;
    height: 68%;
  }

  .quiz-intro-text {
    top: 28%;
    width: 92%;
    font-size: clamp(20px, 6vw, 30px);
  }

  .match-heading {
    top: 3% !important;
    width: 94%;
    font-size: clamp(17px, 5vw, 24px);
  }
  .match-layout {
    top: 12%;
    bottom: 22%;
    left: 3%;
    right: 3%;
    gap: 6px;
  }
  .match-steps {
    flex-basis: 72%;
  }
  .step-card {
    border-radius: 12px;
    min-height: 84px;
    font-size: clamp(9px, 2.6vw, 11px);
    line-height: 1.35;
  }
  .match-numbers {
    flex-basis: 24%;
    gap: 8px;
  }
  .conn-dot {
    width: 28px;
    height: 28px;
  }
  .num-row {
    min-height: 84px;
    gap: 5px;
  }
  .num-box {
    width: 44px;
    min-height: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: clamp(16px, 4.8vw, 24px);
  }
  .match-msg {
    bottom: calc(21% + 20px);
    white-space: normal;
    text-align: center;
    width: 90%;
    font-size: 0.78rem;
  }
  .submit-match-btn {
    bottom: 21%;
    padding: 10px 26px;
  }

  .glass-input {
    top: 45%;
    width: 92%;
    left: 4%;
    height: 56px;
    font-size: clamp(14px, 4vw, 18px);
    padding: 0 20px;
  }

  .results-text {
    top: 42%;
    width: 92%;
  }
  .results-main {
    line-height: 1.25;
  }
  .results-sub {
    margin-top: 14px;
    line-height: 1.35;
  }
  .results-breakdown,
  .results-answers {
    margin-top: 12px;
    line-height: 1.45;
  }

  #s2 .media-frame {
    max-height: calc(100dvh - 190px);
  }
  #s2 .progress-bar-wrap,
  #s5 .progress-bar-wrap {
    bottom: 8px;
  }
  #s5 .match-layout {
    bottom: 26%;
  }
}

@media (max-height: 820px) and (min-width: 641px) {
  .screen {
    overflow-y: auto;
    padding-bottom: 92px;
  }

  .nav-btn {
    width: 88px;
    height: 54px;
    bottom: 16px;
  }
  .progress-bar-wrap { bottom: 24px; }
  .pb-track { height: 18px; }

  .welcome-panel {
    top: 41%;
    padding: 28px 34px 30px;
  }
  .start-btn {
    bottom: 10%;
    padding: 10px 30px;
  }

  .about-text { top: 11%; }
  .screen-title { top: 5%; }

  .media-frame {
    top: 18%;
    width: 72%;
    left: 14%;
  }
  .aed-frame {
    top: 16%;
    width: 84%;
    left: 8%;
    height: 66%;
  }

  .quiz-intro-text {
    top: 30%;
    line-height: 1.2;
  }

  .match-heading {
    top: 2% !important;
  }
  .match-layout {
    top: 10%;
    bottom: 18%;
  }
  .step-card {
    min-height: 72px;
    line-height: 1.3;
  }
  .num-row {
    min-height: 72px;
  }
  .conn-dot {
    width: 36px;
    height: 36px;
  }
  .num-box {
    width: 78px;
    min-height: 62px;
    height: 62px;
  }
  .match-msg {
    bottom: calc(18% + 18px);
  }
  .submit-match-btn { bottom: 18%; }

  .glass-input {
    top: 43%;
    height: 62px;
  }

  .results-text {
    top: 36%;
  }

  #s2 .media-frame {
    max-height: calc(100dvh - 190px);
  }
  #s2 .progress-bar-wrap,
  #s5 .progress-bar-wrap {
    bottom: 8px;
  }
  #s5 .match-layout {
    bottom: 24%;
  }
}

@media (max-height: 700px) and (min-width: 641px) {
  .screen {
    padding-bottom: 84px;
  }

  .nav-btn {
    width: 78px;
    height: 48px;
    font-size: 1.2rem;
    bottom: 10px;
  }
  .nav-back { left: 14px; }
  .nav-next { right: 14px; }

  .progress-bar-wrap { bottom: 14px; }
  .pb-track {
    width: 56vw;
    max-width: 56vw;
    height: 14px;
  }

  .welcome-panel {
    top: 38%;
    padding: 20px 24px 22px;
    border-radius: 80px;
  }
  .start-btn { bottom: 8%; }

  .about-text { top: 8%; }
  .body-text p { line-height: 1.35; }

  .screen-title {
    top: 3.5%;
    line-height: 1.2;
  }
  .media-frame {
    top: 15%;
    width: 68%;
    left: 16%;
  }
  .aed-frame {
    top: 12%;
    width: 80%;
    left: 10%;
    height: 70%;
  }
  .quiz-intro-text {
    top: 24%;
  }

  .match-layout {
    top: 8.5%;
    bottom: 16%;
  }
  .match-steps,
  .match-numbers {
    gap: 5px;
  }
  .step-card {
    min-height: 62px;
    padding: 6px 9px;
    font-size: clamp(9px, 1vw, 11px);
  }
  .num-row {
    min-height: 62px;
  }
  .conn-dot {
    width: 30px;
    height: 30px;
  }
  .num-box {
    width: 66px;
    min-height: 52px;
    height: 52px;
    font-size: clamp(20px, 2.5vw, 30px);
  }
  .match-msg {
    bottom: calc(16% + 16px);
    font-size: 0.8rem;
  }
  .submit-match-btn {
    bottom: 16%;
    padding: 10px 28px;
  }

  .glass-input {
    top: 40%;
    height: 52px;
    padding: 0 22px;
  }

  .results-text {
    top: 33%;
  }
  .results-breakdown,
  .results-answers {
    line-height: 1.35;
  }

  #s2 .media-frame {
    max-height: calc(100dvh - 170px);
  }
  #s2 .progress-bar-wrap,
  #s5 .progress-bar-wrap {
    bottom: 6px;
  }
  #s5 .match-layout {
    bottom: 24%;
  }
}

/* ============================================================
   TITLE RHYTHM ALIGNMENT (S2 + S3 + S5)
   ============================================================ */
#s2 .screen-title,
#s3 .screen-title,
#s5 .match-heading {
  top: 5%;
  line-height: 1.15;
}

#s2 .screen-title,
#s3 .screen-title {
  width: 84%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

#s5 .match-heading {
  width: 86%;
}

#s2 .media-frame { top: 27%; }
#s3 .aed-frame {
  top: 24%;
  bottom: 14%;
  height: auto;
}
#s3 .aed-img {
  object-fit: contain;
  object-position: center top;
  transform: scale(1.06);
  transform-origin: center top;
}
#s5 .match-layout { top: 17%; }

@media (max-width: 1200px) {
  #s2 .screen-title,
  #s3 .screen-title,
  #s5 .match-heading {
    top: 4.6%;
  }

  #s2 .screen-title,
  #s3 .screen-title { width: 88%; }
  #s5 .match-heading { width: 90%; }

  #s2 .media-frame { top: 24.5%; }
  #s3 .aed-frame {
    top: 21%;
    bottom: 14%;
    height: auto;
  }
  #s5 .match-layout { top: 16%; }
}

@media (max-width: 900px) {
  #s2 .screen-title,
  #s3 .screen-title,
  #s5 .match-heading {
    top: 4%;
    font-size: clamp(20px, 4vw, 34px);
  }

  #s2 .screen-title,
  #s3 .screen-title { width: 90%; }
  #s5 .match-heading { width: 92%; }

  #s2 .media-frame { top: 22.5%; }
  #s3 .aed-frame {
    top: 18.8%;
    bottom: 16%;
    height: auto;
  }
  #s3 .aed-img {
    transform: scale(1.04);
  }
  #s5 .match-layout { top: 15%; }
}

@media (max-width: 640px) {
  #s2 .screen-title,
  #s3 .screen-title,
  #s5 .match-heading {
    top: 3%;
    width: 95%;
    font-size: clamp(16px, 5vw, 22px);
  }

  #s2 .media-frame { top: 17.5%; }
  #s3 .aed-frame {
    top: 13.5%;
    bottom: 22%;
    height: auto;
  }
  #s3 .aed-img {
    transform: scale(1.03);
  }
  #s5 .match-layout { top: 11%; }
}

@media (max-height: 820px) and (min-width: 641px) {
  #s2 .screen-title,
  #s3 .screen-title,
  #s5 .match-heading {
    top: 2.8%;
    font-size: clamp(22px, 2.8vw, 36px);
  }

  #s2 .media-frame { top: 20%; }
  #s3 .aed-frame {
    top: 16%;
    bottom: 18%;
    height: auto;
  }
  #s5 .match-layout { top: 13%; }
}

@media (max-height: 700px) and (min-width: 641px) {
  #s2 .screen-title,
  #s3 .screen-title,
  #s5 .match-heading {
    top: 2.2%;
    width: 92%;
    font-size: clamp(18px, 2.3vw, 30px);
  }

  #s2 .media-frame { top: 18%; }
  #s3 .aed-frame {
    top: 13%;
    bottom: 20%;
    height: auto;
  }
  #s5 .match-layout { top: 11.5%; }
}