/* Rank exam (段位認定) and opening drill (定石練習). Uses dojo.css and reversi.css for the board and panels. */
.nodots .dot { display: none; }
.danbig { font-family: var(--display); font-size: clamp(26px, 6vw, 34px); line-height: 1.1; margin-top: 12px; }
.ranklist { list-style: none; padding: 0; margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.dojo .ranklist button { width: 100%; display: grid; gap: 2px; padding: 6px 4px; text-align: center; font-weight: 400; }
.ranklist button b { font-size: 15px; }
.ranklist button span { font-size: 11px; color: var(--muted); }
.dojo .ranklist button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.dojo .ranklist button[aria-pressed="true"] span { color: var(--paper); }
.dcert { margin: 12px 0 0; max-width: 600px; border: 1px solid var(--rule-2); background: var(--paper); line-height: 0; }
.dcert canvas { display: block; width: 100%; height: auto; max-width: 600px; }
.dsaved { margin: 6px 0 0; min-height: 1.2em; font-size: 12.5px; color: var(--ink-2); }
.ranklist button.ok b::after { content: " ✓"; color: var(--g-best); }
/* a band above the board starts the first exam at once: on phones the picker is below the board, and on wide screens
   its start button is below the first screen. Wide screens put it on one line and shrink the board by the band's height
   while it is shown, so the start button and the whole board fit on the first screen. */
.quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px; border: 2px solid var(--ink); background: var(--surface); }
#quickLabel { flex: 1 1 100%; font-size: 14px; font-weight: 700; }
@media (min-width: 920px) {
  .quick { padding: 8px 8px 8px 12px; }
  #quickLabel { flex: 1 1 12em; }
  .dojo .left:has(> .quick:not([hidden])) .boardbox { max-width: min(580px, calc(100vh - 364px)); }
}
/* the examiners' strengths under the prose: ruled like the scoresheet, cells wrap so the page never scrolls sideways */
.ranktable { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 8px 0 4px; }
.ranktable th, .ranktable td { text-align: left; vertical-align: top; padding: 6px 6px; border-bottom: 1px solid var(--rule); overflow-wrap: break-word; }
.ranktable thead th { font-size: 12px; color: var(--muted); font-weight: 400; border-bottom: 2px solid var(--ink); }
.ranktable tbody th, .ranktable:lang(ja) td:nth-child(3) { white-space: nowrap; }
.ranktable td { color: var(--ink-2); }
.pickrow { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-top: 12px; }
.rules { font-size: 13px; padding-left: 18px; }
.rules li { margin: 3px 0; }
.optrow { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; }
.jmsg { font-size: 14px; min-height: 42px; margin-top: 10px; }
.jmsg[data-tone="bad"] { color: var(--g-blun); font-weight: 700; }
.jmsg[data-tone="warn"] { color: var(--g-inacc); font-weight: 700; }
.jmoves { font-family: var(--mono); font-size: 13px; color: var(--ink-2); min-height: 20px; word-break: break-word; }
.jprog { list-style: none; padding: 0; margin-top: 8px; font-size: 13px; max-height: 340px; overflow-y: auto; }
.jprog li { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; padding: 3px 0; border-bottom: 1px dotted var(--rule-2); }
.dojo .jprog button { display: inline-flex; gap: 5px; align-items: center; padding: 2px 6px; font-weight: 400; border-width: 1px; }
.jprog .dots { font-size: 10px; letter-spacing: 1px; color: var(--muted); }
.jprog .dots.done { color: var(--g-best); }
/* Master of the Week (今週の師範): the name with a highlighter stroke, habit and hint as score-sheet rows */
.shname { font-family: var(--display); font-size: clamp(22px, 5.4vw, 28px); line-height: 1.2; margin-top: 10px; }
.shinfo { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; margin: 10px 0 0; font-size: 13.5px; }
.shinfo dt { font-family: var(--mono); font-size: 11px; color: var(--muted); padding: 7px 0 6px; border-top: 1px solid var(--rule); white-space: nowrap; }
.shinfo dd { margin: 0; padding: 6px 0; border-top: 1px solid var(--rule); min-width: 0; overflow-wrap: anywhere; }
.shbeaten { margin: 10px 0 0; }
.shbeaten .stamp { --g: var(--g-best); }
.shnext { font-size: 12.5px; color: var(--ink-2); }
/* the way to the one-minute rank check: in the band above the board on phones, in the "your rank" card on wide screens
   (the band stays one line there, so the board still fits on the first screen) */
.quick .qlink { flex: 1 1 100%; font-size: 13px; }
.danlink { margin: 10px 0 0; font-size: 13px; display: none; }
@media (min-width: 920px) {
  .quick .qlink { display: none; }
  .danlink { display: block; }
}