/* RAVID Game Final Composition v30.4
   Scope: CSS only, khusus Game Etika (#section-salam).
   Tujuan:
   - board lebih dominan
   - ruang kosong berkurang
   - hero, progress, coach, board terasa satu komposisi
   - area bawah lebih presisi
   Tidak menyentuh backend, app.js, game logic, login, video, quiz, report, atau data.
*/

body.ravid-premium-theme #section-salam {
  --ravid-game-max: min(1280px, calc(100vw - 56px));
}

/* Shell diperbesar agar game tidak terlihat zoom-out */
body.ravid-premium-theme #section-salam .premium-etika-shell {
  max-width: var(--ravid-game-max) !important;
  padding: clamp(24px, 2.2vw, 36px) clamp(28px, 2.8vw, 44px) clamp(26px, 2.6vw, 40px) !important;
  border-radius: 36px !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(147,197,253,.25), transparent 30%),
    radial-gradient(circle at 82% 10%, rgba(103,232,249,.18), transparent 34%),
    linear-gradient(180deg, rgba(241,248,255,.98), rgba(249,252,255,.96)) !important;
}

/* Komposisi hero final: kiri untuk narasi, kanan untuk status.
   Kanan diturunkan agar dekat dengan board. */
body.ravid-premium-theme #section-salam .premium-etika-hero {
  display: grid !important;
  grid-template-columns: minmax(560px, 1.12fr) minmax(500px, .88fr) !important;
  grid-template-areas:
    "title mission"
    "coach mission" !important;
  gap: 18px clamp(26px, 3.2vw, 48px) !important;
  align-items: end !important;
  margin-bottom: clamp(10px, 1.2vw, 18px) !important;
}

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

body.ravid-premium-theme #section-salam .premium-etika-hero .section-eyebrow {
  margin-bottom: 22px !important;
}

body.ravid-premium-theme #section-salam .premium-etika-hero .section-title {
  max-width: 700px !important;
  font-size: clamp(3rem, 3.45vw, 4.05rem) !important;
  line-height: 1.01 !important;
  letter-spacing: -0.055em !important;
  margin: 0 0 16px !important;
  text-wrap: balance !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

body.ravid-premium-theme #section-salam .premium-etika-hero .section-subtitle {
  max-width: 640px !important;
  font-size: clamp(.98rem, .96vw, 1.08rem) !important;
  line-height: 1.72 !important;
  margin: 0 !important;
  text-align: justify !important;
  text-justify: inter-word !important;
}

/* Jika coach card adalah sibling ke-3, letakkan di bawah headline kiri */
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;
}

/* Jika mission card adalah sibling ke-2 */
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;
}

/* Progress card lebih dekat ke board dan lebih lebar nyaman */
body.ravid-premium-theme #section-salam .mission-card {
  width: 100% !important;
  max-width: 500px !important;
  min-height: 132px !important;
  align-self: end !important;
  justify-self: end !important;
  transform: translateY(34px) !important;
  border-radius: 26px !important;
}

/* Coach card tidak terlalu besar, sejajar di bawah teks */
body.ravid-premium-theme #section-salam .game-coach-card {
  width: min(100%, 500px) !important;
  min-width: 0 !important;
  max-width: 500px !important;
  min-height: 106px !important;
  padding: 20px 24px !important;
  align-self: end !important;
  justify-self: start !important;
  transform: translateY(12px) !important;
  border-radius: 26px !important;
}

body.ravid-premium-theme #section-salam #etika-coach-text {
  max-width: 370px !important;
  font-size: clamp(.95rem, .94vw, 1.06rem) !important;
  line-height: 1.48 !important;
}

/* Board dibuat lebih dominan dan lebih dekat ke hero */
body.ravid-premium-theme #section-salam .etika-board-wrap {
  width: 100% !important;
  max-width: 1120px !important;
  margin: 18px auto 22px !important;
  padding: 14px !important;
  border-radius: 34px !important;
  transform: none !important;
}

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

/* Hindari board tampak terlalu mungil pada layar desktop besar */
@media (min-width: 1300px) {
  body.ravid-premium-theme #section-salam .etika-board-wrap {
    max-width: 1160px !important;
  }

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

/* Area bawah dibuat lebih sejajar dan presisi */
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(330px, 430px) minmax(96px, 150px) minmax(330px, 430px) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(22px, 3vw, 48px) !important;
  margin-top: 14px !important;
}

/* Kalau footer belum punya wrapper, target card langsung */
body.ravid-premium-theme #section-salam .game-legend-card {
  width: 100% !important;
  max-width: 430px !important;
  min-height: 104px !important;
  justify-self: start !important;
}

body.ravid-premium-theme #section-salam .game-tips-card {
  width: 100% !important;
  max-width: 430px !important;
  min-height: 104px !important;
  justify-self: end !important;
}

body.ravid-premium-theme #section-salam .salam-controls.salam-controls-plus {
  justify-self: center !important;
  align-self: center !important;
  margin: 0 !important;
}

/* Keterangan dibuat lebih compact tetapi premium */
body.ravid-premium-theme #section-salam .game-legend-card {
  padding: 18px 20px !important;
  border-radius: 26px !important;
}

body.ravid-premium-theme #section-salam .game-legend-card > strong {
  margin-bottom: 10px !important;
}

body.ravid-premium-theme #section-salam .game-legend-items {
  padding: 10px 12px !important;
  gap: 10px 16px !important;
}

/* Tips juga compact */
body.ravid-premium-theme #section-salam .game-tips-card {
  padding: 18px 20px !important;
  border-radius: 26px !important;
}

/* Tombol arah dibuat sedikit lebih solid */
body.ravid-premium-theme #section-salam .salam-controls.salam-controls-plus .btn {
  width: 54px !important;
  height: 54px !important;
  border-radius: 17px !important;
}

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

/* Responsive */
@media (max-width: 1220px) {
  body.ravid-premium-theme #section-salam .premium-etika-hero {
    grid-template-columns: minmax(500px, 1fr) minmax(420px, .9fr) !important;
    gap: 18px 28px !important;
  }

  body.ravid-premium-theme #section-salam .premium-etika-hero .section-title {
    font-size: clamp(2.75rem, 3.3vw, 3.65rem) !important;
  }

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

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

@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;
  }

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

  body.ravid-premium-theme #section-salam .premium-etika-hero .section-subtitle {
    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;
    justify-self: stretch !important;
    transform: none !important;
  }

  body.ravid-premium-theme #section-salam .etika-board-wrap {
    margin-top: 12px !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;
  }
}