/* Abacus only. The page, panels and buttons come from kit/midnight.css. */
#game { gap: calc(18 * var(--u)); }
.question { flex: none; width: 100%; min-height: calc(128 * var(--u)); padding: calc(8 * var(--u)) calc(20 * var(--u)); font-size: calc(84 * var(--u)); line-height: 1.1; text-align: center; grid-area: question; }
.question.words { font-size: calc(60 * var(--u)); }
.frame {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding: calc(10 * var(--u));
  border: max(1px, calc(2 * var(--u))) solid var(--edge);
  border-radius: calc(20 * var(--u));
  background: var(--glass);
  box-shadow: 0 0 calc(14 * var(--u)) var(--glow), inset 0 1px 0 var(--sheen);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  grid-area: board;
}
.frame:focus, body.nav .frame:focus { outline: none; }
.frame svg { display: block; width: 100%; height: 100%; min-height: 0; }
.rod { stroke: var(--fixed); stroke-width: 5; stroke-linecap: round; }
.beam { stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
.bead-off-a { stop-color: var(--f1); }
.bead-off-b { stop-color: var(--f5); }
.bead-on-a { stop-color: var(--light-core); }
.bead-on-b { stop-color: var(--light-body); }
.bead { fill: url(#beadOff); transition: transform 0.12s ease-out; }
.bead.on { fill: url(#beadOn); }
.frame.can .bead { cursor: pointer; }
.rod-hint { fill: rgba(var(--amber-rgb), 0.12); stroke: var(--amber); stroke-width: 3; }
.cursor { display: none; fill: none; stroke: var(--focus); stroke-width: 5; }
body.nav .frame:focus .cursor { display: block; }

.tray { flex: none; width: 100%; min-height: calc(76 * var(--u)); padding: calc(6 * var(--u)) calc(20 * var(--u)); font-size: max(calc(36 * var(--u)), 13px); line-height: 1.2; text-align: center; grid-area: tray; }
.tray.say { color: var(--go-ink); }
.tray.bad { color: var(--warn); }
.tray[hidden] { display: none; }
#game > .wave { height: calc(44 * var(--u)); margin: 0; }

.actions.four { grid-template-columns: repeat(4, 1fr); gap: calc(20 * var(--u)); }
.actions[hidden] { display: none; }
.answer { font-size: max(calc(46 * var(--u)), 17px); }
.answer.right { border-color: var(--amber); color: var(--go-ink); }
.answer.wrong { border-color: var(--warn); color: var(--warn); }

@media (prefers-reduced-motion: reduce) {
  .bead { transition: none; }
}
@media (min-aspect-ratio: 5/4) {
  .screen#game { grid-template-rows: 1fr auto auto auto auto auto 1fr; grid-template-areas: "board ." "board bar" "board stats" "board question" "board tray" "board actions" "board ."; }
  .frame { width: var(--board); height: var(--board); }
  .actions#beadActions, .actions#readAnswers { grid-area: actions; }
}