/* RAVID Game Composition Precision v30.5
   Scope: CSS only, khusus Game Etika (#section-salam).
   Tujuan:
   - memperbaiki komposisi visual setelah v30.4
   - progress card tidak mengambang terlalu jauh
   - coach card menjadi bagian dari panel kanan
   - subtitle tidak justify paksa agar tidak renggang
   - board lebih dominan dan dekat dengan hero
   Aman: tidak menyentuh app.js, backend, database, route, collision, login, quiz, video, report.
*/

body.ravid-premium-theme #section-salam {
  --ravid-game-page-max-v305: min(1240px, calc(100vw - 52px));
}

/* Shell dibuat lebih presisi dan lebih hemat ruang */
body.ravid-premium-theme #section-salam .premium-etika-shell {
  max-width: var(--ravid-game-page-max-v305) !important;
  padding: clamp(22px, 2.05vw, 34px) clamp(30px, 3vw, 48px) clamp(28px, 2.45vw, 40px) !important;
  border-radius: 34px !important;
}

/* Hero final: kiri fokus judul, kanan fokus status.
   Ini menghapus rasa progress-card yang mengambang sendiri. */
body.ravid-premium-theme #section-salam .premium-etika-hero {
  display: grid !important;
  grid-template-columns: minmax(540px, 680px) minmax(390px, 470px) !important;
  grid-template-areas:
    "title mission"
    "title coach" !important;
  align-items: end !important;
  gap: 16px clamp(34px, 4vw, 58px) !important;
  margin-bottom: 14px !important;
}

/* Area judul */
body.ravid-premium-theme #section-salam .premium-etika-hero > div:first-child {
  grid-area: title !important;
  max-width: 680px !important;
  align-self: end !important;
}

/* Eyebrow tidak terlalu jauh dari judul */
body.ravid-premium-theme #section-salam .premium-etika-hero .section-eyebrow {
  margin-bottom: 18px !important;
}

/* Judul dibuat nyaman: besar, tapi tidak terlalu mendominasi.
   Target visual: 3 baris rapi, bukan terlalu tinggi. */
body.ravid-premium-theme #section-salam .premium-etika-hero .section-title {
  max-width: 660px !important;
  width: 100% !important;
  font-size: clamp(2.85rem, 3.28vw, 3.85rem) !important;
  line-height: 1.015 !important;
  letter-spacing: -0.052em !important;
  margin: 0 0 15px !important;
  text-wrap: balance !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Subtitle jangan justify paksa: di screenshot sebelumnya kata jadi renggang.
   Untuk kalimat pendek, left alignment jauh lebih nyaman. */
body.ravid-premium-theme #section-salam .premium-etika-hero .section-subtitle {
  max-width: 610px !important;
  font-size: clamp(.96rem, .92vw, 1.04rem) !important;
  line-height: 1.68 !important;
  letter-spacing: -0.006em !important;
  text-align: left !important;
  text-justify: auto !important;
  color: #475569 !important;
  margin: 0 !important;
}

/* Progress card masuk panel kanan atas */
body.ravid-premium-theme #section-salam .premium-etika-hero > .mission-card,
body.ravid-premium-theme #section-salam .premium-etika-hero > div:nth-child(2).mission-card {
  grid-area: mission !important;
}

body.ravid-premium-theme #section-salam .mission-card {
  width: 100% !important;
  max-width: 470px !important;
  min-height: 124px !important;
  justify-self: end !important;
  align-self: end !important;
  transform: none !important;
  margin: 0 !important;
  padding: 22px 24px !important;
  border-radius: 26px !important;
}

/* Coach card masuk panel kanan bawah, bukan lagi di kiri.
   Ini membuat hero terasa satu komposisi. */
body.ravid-premium-theme #section-salam .premium-etika-hero > .game-coach-card,
body.ravid-premium-theme #section-salam .premium-etika-hero > div:nth-child(3).game-coach-card {
  grid-area: coach !important;
}

body.ravid-premium-theme #section-salam .game-coach-card {
  width: 100% !important;
  max-width: 470px !important;
  min-width: 0 !important;
  min-height: 104px !important;
  justify-self: end !important;
  align-self: end !important;
  transform: none !important;
  margin: 0 !important;
  padding: 18px 22px !important;
  border-radius: 26px !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 16px !important;
}

body.ravid-premium-theme #section-salam .game-coach-avatar {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 20px !important;
}

body.ravid-premium-theme #section-salam #etika-coach-text {
  max-width: 360px !important;
  font-size: clamp(.92rem, .9vw, 1rem) !important;
  line-height: 1.48 !important;
  letter-spacing: -0.025em !important;
}

/* Board lebih dominan dan naik mendekati hero */
body.ravid-premium-theme #section-salam .etika-board-wrap {
  width: 100% !important;
  max-width: 1128px !important;
  margin: 10px auto 22px !important;
  padding: 13px !important;
  border-radius: 34px !important;
}

body.ravid-premium-theme #section-salam .etika-board {
  width: 100% !important;
  aspect-ratio: 18 / 7.05 !important;
  min-height: 326px !important;
  max-height: 416px !important;
  border-radius: 25px !important;
}

/* Board visual lebih mewah tapi tetap ringan */
body.ravid-premium-theme #section-salam .etika-board-wrap {
  box-shadow:
    0 24px 52px rgba(37, 99, 235, .13),
    0 10px 22px rgba(15, 23, 42, .06),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}

/* Footer game presisi dan tidak terlalu turun */
body.ravid-premium-theme #section-salam .game-footer-row,
body.ravid-premium-theme #section-salam .etika-footer-row,
body.ravid-premium-theme #section-salam .salam-footer-row {
  display: grid !important;
  grid-template-columns: minmax(340px, 430px) minmax(110px, 150px) minmax(340px, 430px) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(24px, 3vw, 46px) !important;
  margin-top: 10px !important;
}

/* Jika footer tidak punya wrapper kuat, tetap rapikan card langsung */
body.ravid-premium-theme #section-salam .game-legend-card,
body.ravid-premium-theme #section-salam .game-tips-card {
  min-height: 102px !important;
  border-radius: 26px !important;
  padding: 18px 20px !important;
}

body.ravid-premium-theme #section-salam .game-legend-card {
  max-width: 430px !important;
}

body.ravid-premium-theme #section-salam .game-tips-card {
  max-width: 430px !important;
}

/* Kontrol dibuat sebagai pusat visual footer */
body.ravid-premium-theme #section-salam .salam-controls.salam-controls-plus {
  margin: 0 !important;
  justify-self: center !important;
  align-self: center !important;
}

body.ravid-premium-theme #section-salam .salam-controls.salam-controls-plus .btn {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
}

body.ravid-premium-theme #section-salam .salam-controls.salam-controls-plus .control-center {
  width: 56px !important;
  height: 56px !important;
  border-radius: 18px !important;
}

/* Hilangkan efek ruang kosong terlalu banyak di bagian dalam */
body.ravid-premium-theme #section-salam .premium-etika-inner,
body.ravid-premium-theme #section-salam .game-inner,
body.ravid-premium-theme #section-salam .etika-inner {
  padding-bottom: clamp(18px, 2vw, 28px) !important;
}

/* Desktop besar: board boleh sedikit lebih besar */
@media (min-width: 1360px) {
  body.ravid-premium-theme #section-salam .etika-board-wrap {
    max-width: 1168px !important;
  }

  body.ravid-premium-theme #section-salam .etika-board {
    min-height: 342px !important;
  }
}

/* Desktop sedang */
@media (min-width: 981px) and (max-width: 1260px) {
  body.ravid-premium-theme #section-salam .premium-etika-hero {
    grid-template-columns: minmax(500px, 1fr) minmax(380px, .86fr) !important;
    gap: 15px 30px !important;
  }

  body.ravid-premium-theme #section-salam .premium-etika-hero .section-title {
    max-width: 590px !important;
    font-size: clamp(2.65rem, 3.22vw, 3.45rem) !important;
  }

  body.ravid-premium-theme #section-salam .etika-board {
    min-height: 304px !important;
  }
}

/* Tablet / mobile */
@media (max-width: 980px) {
  body.ravid-premium-theme #section-salam .premium-etika-shell {
    max-width: calc(100vw - 24px) !important;
    padding: 22px !important;
  }

  body.ravid-premium-theme #section-salam .premium-etika-hero {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "title"
      "mission"
      "coach" !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
  }

  body.ravid-premium-theme #section-salam .premium-etika-hero .section-title {
    max-width: 100% !important;
    font-size: clamp(2.25rem, 9vw, 3.2rem) !important;
    line-height: 1.04 !important;
  }

  body.ravid-premium-theme #section-salam .mission-card,
  body.ravid-premium-theme #section-salam .game-coach-card {
    max-width: 100% !important;
    justify-self: stretch !important;
  }

  body.ravid-premium-theme #section-salam .etika-board-wrap {
    margin-top: 10px !important;
  }

  body.ravid-premium-theme #section-salam .game-footer-row,
  body.ravid-premium-theme #section-salam .etika-footer-row,
  body.ravid-premium-theme #section-salam .salam-footer-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body.ravid-premium-theme #section-salam .game-legend-card,
  body.ravid-premium-theme #section-salam .game-tips-card {
    max-width: 100% !important;
    justify-self: stretch !important;
  }
}