:root { color-scheme: light dark; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; }
main { max-width: 34rem; margin: 3rem auto; padding: 0 1.25rem; }
h1 { font-size: 1.5rem; letter-spacing: -0.01em; }
h1 a { color: inherit; text-decoration: none; }
.button { display: inline-block; padding: 0.6rem 1rem; border-radius: 6px;
          background: #1a73e8; color: #fff; text-decoration: none; }
.error { padding: 0.75rem 1rem; border-radius: 6px;
         background: #fdeded; color: #8b1a1a; }
.role { color: #666; }
@media (prefers-color-scheme: dark) {
  body { background: #16181d; color: #e6e6e6; }
  .error { background: #3b1f1f; color: #ffb4b4; }
  .role { color: #9aa0a6; }
}

/* `hidden` is toggled from JS on the host controls. This rule is REQUIRED:
   the browser's own [hidden] { display: none } is a user-agent rule, so the
   author rule .button { display: inline-block } below beats it and the "New
   game" link would never hide. */
[hidden] { display: none !important; }

/* The host controls. */
.controls { display: flex; gap: 0.75rem; align-items: center; }
.controls button, .controls a.button { font-size: 1rem; }
#end { background: none; border: 1px solid #c33; color: #c33;
       padding: 0.6rem 1rem; border-radius: 6px; cursor: pointer; }
.saved { color: #2a7; }
.right { font-weight: 700; }
.clock { font-variant-numeric: tabular-nums; font-size: 1.5rem; }
.hostoptions li { padding: 0.2rem 0; }
.option { display: block; width: 100%; text-align: left; margin: 0.4rem 0;
          padding: 0.8rem 1rem; font-size: 1rem; border-radius: 6px;
          border: 1px solid #ccc; background: #fff; cursor: pointer; }
.option:disabled { opacity: 0.6; cursor: default; }
.option.right { border-color: #2a7; }
.flash { padding: 0.6rem 0.9rem; border-radius: 6px; background: #eef3ff; }
.code { letter-spacing: 0.12em; }
@media (prefers-color-scheme: dark) {
  .option { background: #1e2128; border-color: #3a3f4a; color: inherit; }
  .flash { background: #1d2432; }
}

table.results { border-collapse: collapse; width: 100%; margin: 1rem 0; }
table.results th, table.results td { padding: 0.4rem 0.6rem; text-align: left;
  border-bottom: 1px solid #e3e3e3; }
table.results .num { text-align: right; font-variant-numeric: tabular-nums; }
table.results tr.absent td { opacity: 0.55; }
@media (prefers-color-scheme: dark) {
  table.results th, table.results td { border-bottom-color: #2c3038; }
}

.reviewq { margin: 1.5rem 0; padding-bottom: 1rem; border-bottom: 1px solid #e3e3e3; }
.reviewq .stem { font-weight: 600; }
.reviewopts { list-style: none; padding: 0; }
.reviewopts li { padding: 0.35rem 0.6rem; border-radius: 5px; border: 1px solid transparent; }
.reviewopts li.right { border-color: #2a7; }
.reviewopts li.chosen { background: #eef3ff; }
.reviewopts li.right.chosen { background: #e8f7ef; }
.tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
       color: #666; margin-left: 0.5rem; }
@media (prefers-color-scheme: dark) {
  .reviewq { border-bottom-color: #2c3038; }
  .reviewopts li.chosen { background: #1d2432; }
  .reviewopts li.right.chosen { background: #16281f; }
  .tag { color: #9aa0a6; }
}

form.inline { display: inline; }
.offered li { margin: 0.4rem 0; }
button.linkish { background: none; border: 0; color: #777; cursor: pointer;
                 text-decoration: underline; font-size: 0.85rem; padding: 0; }

/* The student's play screen. A phone or a lab machine, held at arm's length --
   so large tap targets and an unambiguous locked state, but ordinary reading
   sizes rather than the projector's. */
.play .option { display: flex; align-items: center; gap: 0.7rem;
                min-height: 3rem; font-size: 1.05rem; }
.play .letter { flex: none; width: 1.9em; height: 1.9em; border-radius: 8px;
                display: grid; place-items: center; font-weight: 700;
                color: #10131a; }
.play .option:nth-of-type(1) .letter { background: #ff6b6b; }
.play .option:nth-of-type(2) .letter { background: #4dabf7; }
.play .option:nth-of-type(3) .letter { background: #ffd43b; }
.play .option:nth-of-type(4) .letter { background: #b197fc; }
.play .option.right { border-color: #2a7; border-width: 2px; }
.play .option:disabled { opacity: 0.55; }
.play #stem { font-size: 1.4rem; line-height: 1.25; }
.play .clock { font-size: 2.5rem; text-align: center; }

.sortbar { margin-top: 0; }
.pastgames { list-style: none; padding: 0; }
.pastgames li { padding: 0.35rem 0; border-bottom: 1px solid #e9e9e9; }
@media (prefers-color-scheme: dark) {
  .pastgames li { border-bottom-color: #2c3038; }
}