* { box-sizing: border-box; }

/* Plain, readable defaults */
body { margin: 0; line-height: 1.5; }
.site-header { padding: 12px; border-bottom: 1px solid #ddd; }
.layout { padding: 12px; max-width: 1000px; margin: 0 auto; }

/* Place Start beside the duration slider */
.controls { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.start-control { order: 0; }
.timer-control { order: 1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
fieldset.types { order: 2; width: 100%; }

.cheatsheet-mobile { display: block; margin-top: 8px; }
.cheatsheet-desktop { display: none; }
.cheatsheet-content { --cheatsheet-font-size: 0.85rem; }
.cheatsheet-content pre, .cheatsheet-desktop pre { white-space: pre-wrap; }
.cheatsheet-content pre { font-size: var(--cheatsheet-font-size); }
.cheatsheet-content .leaderboard { font-size: var(--cheatsheet-font-size); }
.cheatsheet-content .credits { font-size: var(--cheatsheet-font-size); }
.clear-leaderboard { display: block; margin-top: 8px; width: 100%; }

.play-area { position: relative; margin-top: 8px; }
.countdown { position: absolute; top: 0; right: 0; }
.question { white-space: pre-wrap; word-break: break-word; padding-right: 8em; }
.answer-row { display: flex; gap: 8px; align-items: center; }

/* Accessibility: large tap targets */
button, input[type="text"], input[type="range"] { min-height: 44px; }

.summary-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }

.cheatsheet-sticky { position: sticky; top: 12px; }
/* Tidy spacing for desktop details panels */
.cheatsheet-sticky > details { margin-bottom: 12px; }
/* Emphasize section titles */
.cheatsheet-sticky > details > summary,
.cheatsheet-mobile > summary {
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
}

@media (min-width: 900px) {
  .layout { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
  .cheatsheet-desktop { display: block; }
  .cheatsheet-mobile { display: none; }
}