/* RAVID Game Hero Balance v30.3
   Scope: CSS only, khusus halaman Game Etika.
   Tujuan:
   - geser progress card lebih dekat ke batas papan game
   - kecilkan headline sedikit
   - rapikan lebar headline agar lebih proporsional
   - subtitle dibuat lebih rapi/justify
   Aman: tidak menyentuh backend / game logic / login / route / data
*/

body.ravid-premium-theme #section-salam .premium-etika-shell {
  max-width: min(1180px, calc(100vw - 72px)) !important;
  padding: clamp(28px, 2.8vw, 42px) !important;
}

body.ravid-premium-theme #section-salam .premium-etika-hero {
  display: grid !important;
  grid-template-columns: minmax(540px, 1.12fr) minmax(440px, 0.88fr) !important;
  gap: clamp(22px, 2.4vw, 34px) !important;
  align-items: end !important;
  margin-bottom: 10px !important;
}

/* Judul dibuat sedikit lebih kecil, tapi area lebarnya diperluas
   supaya hasilnya lebih nyaman dan lebih "mengisi" ke kanan. */
body.ravid-premium-theme #section-salam .premium-etika-hero .section-title {
  max-width: 690px !important;
  min-width: 0 !important;
  width: 100% !important;
  font-size: clamp(2.95rem, 3.7vw, 4.15rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em !important;
  text-wrap: balance !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  margin-bottom: 14px !important;
}

/* Subtitle lebih nyaman: justify untuk paragraf, bukan untuk heading */
body.ravid-premium-theme #section-salam .premium-etika-hero .section-subtitle {
  max-width: 620px !important;
  font-size: clamp(1rem, 1vw, 1.08rem) !important;
  line-height: 1.74 !important;
  letter-spacing: -0.01em !important;
  color: #516074 !important;
  text-align: justify !important;
  text-justify: inter-word !important;
  margin: 0 !important;
}

/* Progress card dan coach card diturunkan sedikit mendekati board */
body.ravid-premium-theme #section-salam .mission-card {
  max-width: 470px !important;
  width: 100% !important;
  align-self: end !important;
  transform: translateY(14px) !important;
  margin-bottom: 0 !important;
}

body.ravid-premium-theme #section-salam .game-coach-card {
  max-width: 470px !important;
  width: 100% !important;
  align-self: end !important;
  transform: translateY(14px) !important;
  margin-bottom: 0 !important;
}

/* Jika ada wrapper kanan, rapikan juga */
body.ravid-premium-theme #section-salam .premium-etika-hero-right,
body.ravid-premium-theme #section-salam .etika-hero-right {
  display: grid !important;
  gap: 16px !important;
  align-content: end !important;
}

/* Naikkan board sedikit agar hubungan visual hero -> board lebih rapat */
body.ravid-premium-theme #section-salam .game-board-shell,
body.ravid-premium-theme #section-salam .premium-game-board,
body.ravid-premium-theme #section-salam .maze-board-wrap {
  margin-top: 8px !important;
}

/* Card kanan lebih premium */
body.ravid-premium-theme #section-salam .mission-card,
body.ravid-premium-theme #section-salam .game-coach-card {
  border-radius: 24px !important;
  box-shadow:
    0 14px 34px rgba(111, 145, 182, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.82) !important;
}

/* Responsif medium */
@media (min-width: 921px) and (max-width: 1280px) {
  body.ravid-premium-theme #section-salam .premium-etika-hero {
    grid-template-columns: minmax(500px, 1.05fr) minmax(400px, 0.95fr) !important;
    gap: 24px !important;
  }

  body.ravid-premium-theme #section-salam .premium-etika-hero .section-title {
    max-width: 620px !important;
    font-size: clamp(2.8rem, 3.5vw, 3.9rem) !important;
  }

  body.ravid-premium-theme #section-salam .mission-card,
  body.ravid-premium-theme #section-salam .game-coach-card {
    transform: translateY(10px) !important;
  }
}

/* Mobile/tablet */
@media (max-width: 920px) {
  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;
    gap: 18px !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.02 !important;
  }

  body.ravid-premium-theme #section-salam .premium-etika-hero .section-subtitle {
    max-width: 100% !important;
    text-align: left !important;
  }

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