/* Clock, stats sheet and leaderboard shared by every Guessroo game (games/roo.js). */
.question { position: relative; }
.question #count { padding-right: 70px; }
.clock { position: absolute; right: 0; top: 22px; display: inline-flex; align-items: center; gap: 5px; color: var(--dust); font-size: .9rem; font-variant-numeric: tabular-nums; }
.clock svg { width: 15px; height: 15px; }
header .icon-btn + .icon-btn { margin-left: -4px; }
@media (max-width: 420px) {
  .issue .date, header .mark span { display: none; }
  header { gap: 8px; }
  header .mark b { font-size: 1.4rem; }
}

.rank { margin: 0; font-size: 1.15rem; }
.rank b { font: 900 1.6rem/1 var(--display); font-stretch: 120%; }
.board { display: grid; gap: 10px; }
.board .line { margin: 0; }
ol.top { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
ol.top li { display: grid; grid-template-columns: 2.2em 1fr auto 3.4em; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: .95rem; }
ol.top li span:first-child, ol.top li span:last-child { color: var(--dust); }
ol.top li span:last-child { text-align: right; }
ol.top li span:nth-child(3) { font-weight: 700; }
ol.top li.you { background: var(--rock-2); outline: 1px solid var(--truth); }
ol.top li.gapped { margin-top: 10px; }

dialog.sheet { width: min(520px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 0; border: 1px solid var(--seam); border-radius: 18px; background: var(--rock); color: var(--chalk); }
dialog.sheet::backdrop { background: rgba(5, 7, 10, .6); }
.sheet-in { padding: 20px; display: grid; gap: 14px; }
.sheet-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sheet h2 { margin: 0; font: 800 1.4rem/1.1 var(--display); font-stretch: 115%; }
.sheet h3 { margin: 8px 0 0; font: 700 1rem var(--body); }
.sheet .line { margin: 0; color: var(--dust); }
.sheet .small { font-size: .85rem; }
.nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.nums div { background: var(--rock-2); border-radius: 12px; padding: 12px 8px; text-align: center; }
.nums dd { margin: 0; font: 900 1.6rem/1 var(--display); font-stretch: 115%; font-variant-numeric: tabular-nums; }
.nums dt { margin-top: 6px; font-size: .78rem; color: var(--dust); }
.spread { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: .85rem; font-variant-numeric: tabular-nums; }
.spread li { display: grid; grid-template-columns: 5.6em 1fr; gap: 8px; align-items: center; color: var(--dust); }
.spread i { font-style: normal; display: block; min-width: 1.8em; padding: 2px 6px; border-radius: 4px; background: var(--seam); color: var(--chalk); text-align: right; box-sizing: border-box; }
.spread li.today i { background: var(--truth); color: #0f1217; }