/* The existing site frame, section headings and data tables stay shared. */
.chl-guide .chl-ranks th, .chl-guide .chl-levels th, .chl-guide .chl-example th { white-space: normal; }
.chl-guide .chl-selection { display: block; width: 320px; max-width: 100%; height: auto; }
.chl-guide .chl-prize { display: flex; align-items: center; gap: 6px; }
.chl-guide .chl-prize img, .chl-guide .chl-rewards img { flex-shrink: 0; object-fit: contain; }
.chl-guide .chl-prize a, .chl-guide .chl-rewards a { min-width: 0; overflow-wrap: anywhere; }
.chl-guide .chl-table-wrap { width: 100%; overflow-x: auto; margin-bottom: 12px; }
.chl-guide .chl-table-wrap table { width: 100%; margin-bottom: 0; }
.chl-guide .chl-ranks th, .chl-guide .chl-ranks td { vertical-align: middle; }
.chl-guide .chl-rank { font-weight: bold; text-align: center; }
.chl-guide .chl-note { margin: 14px 0; }
.chl-guide .chl-note ul { margin: 12px 16px; padding-left: 20px; }
.chl-guide .chl-note li { margin: 7px 0; }
.chl-guide .chl-note > p { margin: 12px 14px; }
.chl-guide .chl-rewards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 0; list-style: none; margin: 12px 0 20px; border-top: 1px solid #8193a9; border-left: 1px solid #8193a9; }
.chl-guide .chl-rewards li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; border-right: 1px solid #8193a9; border-bottom: 1px solid #8193a9; background: #f6f9fc; }
.chl-guide .chl-episode { color: #15365d; border-bottom: 1px solid #8193a9; font-size: 15px; margin: 20px 0 8px; padding-bottom: 5px; }
.chl-guide .chl-levels th, .chl-guide .chl-levels td { text-align: center; }
.chl-guide table.chl-levels td.num { text-align: center; font-size: inherit; }
.chl-guide .chl-levels th:first-child { text-align: left; }
.chl-guide .chl-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.chl-guide .chl-example { width: calc(100% - 28px); margin: 12px 14px; }
.chl-guide .chl-example td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chl-guide .chl-small { color: #555; font-size: 12px; }
.chl-guide .chl-steps { padding-left: 26px; }
.chl-guide .chl-steps li { margin: 10px 0; }
.chl-guide .chl-related { border-top: 1px solid #8193a9; margin: 22px 0 12px; padding-top: 12px; }
.chl-guide .chl-base th { white-space: normal; }
@media (max-width: 600px) {
  .chl-guide .chl-base { table-layout: fixed; font-size: 12px; }
  .chl-guide .chl-base th, .chl-guide .chl-base td { padding: 7px 4px; overflow-wrap: anywhere; }
  .chl-guide .chl-base ul { padding-left: 16px; margin: 4px 0; }
  .chl-guide .chl-prize { flex-direction: column; gap: 4px; }
  .chl-guide .chl-ranks { font-size: 12px; }
  .chl-guide .chl-ranks th, .chl-guide .chl-ranks td { padding: 7px 5px; }
  .chl-guide .chl-levels { font-size: 12px; table-layout: fixed; }
  .chl-guide .chl-levels th:first-child { width: 23%; }
  .chl-guide .chl-levels th:last-child { width: 30%; }
  .chl-guide .chl-levels th, .chl-guide .chl-levels td { padding: 7px 3px; overflow-wrap: anywhere; }
  .chl-guide .chl-rewards li { padding: 10px 9px; }
}
@media (max-width: 360px) {
  .chl-guide .chl-rewards { grid-template-columns: 1fr; }
}