/* One-minute rank check (1分段位診断). Uses dojo.css, reversi.css, puzzles.css (prompt, tried mark) and train.css
   (the result card figure). Colours are the variables of site.css, so dark mode follows. */
.sktimer { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; margin-top: 8px; }
.skbarbox { height: 10px; border: 2px solid var(--ink); background: var(--surface); }
.skbar { display: block; height: 100%; width: 100%; background: var(--ink); }
.sktimer.low .skbar { background: var(--g-blun); }
.skleft { font-family: var(--mono); font-size: 12px; color: var(--ink-2); min-width: 6em; text-align: right; }
.skjudge { grid-column: 1 / -1; min-height: 1.4em; font-weight: 700; font-size: 15px; }
.skjudge.ok { color: var(--g-best); }
.skjudge.ng { color: var(--g-blun); }
.dojo .ctl #skStart { font-size: 15px; padding: 9px 16px; }
.skrank { font-family: var(--display); font-size: clamp(32px, 9vw, 44px); line-height: 1.1; margin-top: 10px; }
.sktitle { margin: 12px 0 0; }
.sktitle .stamp { --g: var(--g-best); font-size: 15px; white-space: normal; }
.sknote { margin: 8px 0 2px; font-weight: 700; color: var(--ink-2); }
.sktable { width: calc(100% - 24px); max-width: 360px; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.sktable th, .sktable td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--rule); }
.sktable thead th { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--muted); font-weight: 400; border-bottom: 2px solid var(--ink); }
.sktable td.num { font-family: var(--mono); }
.sktable .skmk { font-weight: 700; }
.sktable tr.ok .skmk { color: var(--g-best); }
.sktable tr.ng .skmk { color: var(--g-blun); }
.skresult h3 { font-size: 14px; margin: 14px 12px 4px; }
.skretry { margin: 0; padding-left: 1.2em; font-size: 13.5px; }
.skrec { display: grid; grid-template-columns: 1fr 1fr; margin: 8px 0 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.skrec > div { padding: 8px 8px 8px 0; min-width: 0; }
.skrec > div + div { border-left: 1px solid var(--rule); padding-left: 10px; }
.skrec dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.skrec dd { margin: 4px 0 0; font-size: 13px; }
.skrec dd b { font-size: 16px; }
/* while judging, the board shows the answer but takes no moves */
#sk[data-phase="judge"] .board .sq, #sk[data-phase="intro"] .board .sq, #sk[data-phase="done"] .board .sq { cursor: default; }
/* on desktops the whole board fits the first screen while a puzzle is asked: the timer row (about 42px) sits between
   the prompt and the board, on top of what puzzles.css takes off for a puzzle page */
@media (min-width: 920px) {
  .dojo .left:has(> .sktimer:not([hidden])) .boardbox { max-width: min(580px, calc(100vh - 410px)); }
}