/* Maths Practice only. The page, panels and buttons come from kit/midnight.css. */
.ask { flex: none; width: 100%; display: flex; flex-direction: column; gap: calc(28 * var(--u)); grid-area: board; margin-top: auto; }
.sum { flex: 1 1 auto; min-height: calc(420 * var(--u)); flex-direction: column; gap: calc(26 * var(--u)); padding: calc(26 * var(--u)) calc(30 * var(--u)); text-align: center; }
.sum h2 { margin: 0; font-size: max(calc(42 * var(--u)), 15px); font-weight: 400; }
.big { color: var(--light-body); font-size: calc(128 * var(--u)); line-height: 1.1; text-shadow: 0 0 calc(22 * var(--u)) rgba(var(--amber-rgb), 0.55); }
.big.mid { font-size: calc(96 * var(--u)); }
.big.long { font-size: calc(70 * var(--u)); }
#why { margin: 0; font-size: max(calc(36 * var(--u)), 13px); line-height: 1.25; color: var(--go-ink); }
#why[hidden] { display: none; }
.answers { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: calc(28 * var(--u)); }
.answer { height: calc(168 * var(--u)); min-height: 56px; font-size: max(calc(70 * var(--u)), 24px); }
.answer.right { border-color: var(--amber); color: var(--go-ink); box-shadow: 0 0 calc(18 * var(--u)) rgba(var(--amber-rgb), 0.6), inset 0 1px 0 var(--sheen); }
.answer.wrong { border-color: var(--warn); color: var(--warn); }

.skills .lv-grid { grid-template-columns: 1fr 1fr; }
.skill b { font-size: max(calc(42 * var(--u)), 15px); }
.skill { height: calc(128 * var(--u)); min-height: 62px; padding: 0 calc(10 * var(--u)); }

@media (min-aspect-ratio: 5/4) {
  .ask { width: var(--board); height: var(--board); margin: 0; }
  .sum { min-height: 0; }
  .answer { height: calc(var(--board) * 0.17); }
  .big { font-size: calc(var(--board) * 0.12); }
  .big.mid { font-size: calc(var(--board) * 0.09); }
  .big.long { font-size: calc(var(--board) * 0.066); }
  .sum h2 { font-size: max(calc(var(--board) * 0.036), 14px); }
  #why { font-size: max(calc(var(--board) * 0.03), 13px); }
  .answer { font-size: max(calc(var(--board) * 0.06), 20px); }
  .skills .lv-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Players: 1, or 2 on one device. The same choice as Carrom and Pool, chosen at a glance (Chatai's pick, his note on menus, 8 Nov). */
.option { flex: none; width: 100%; flex-direction: column; gap: calc(16 * var(--u)); padding: calc(16 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)); }
.option h2 { margin: 0; font-size: max(calc(40 * var(--u)), 15px); font-weight: 400; }
.choices { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(20 * var(--u)); }
.pick.on { color: var(--go-ink); font-weight: 600; border-color: var(--amber); background: linear-gradient(180deg, rgba(var(--amber-rgb), 0.38), rgba(var(--amber-rgb), 0.2)); box-shadow: 0 0 calc(16 * var(--u)) rgba(var(--amber-rgb), 0.5), inset 0 1px 0 var(--sheen); }
.pick.on::before { content: "\2713"; margin-right: 0.35em; }
.rule-note { margin: 0; font-size: max(calc(32 * var(--u)), 12px); color: var(--ink-soft); }
.rule-note[hidden] { display: none; }

/* 2 Players: the device lies flat between them. Two halves, the top one turned to face the far player; a thin strip between.
   Each half is a size container, so its question and buttons grow with the half on any screen. */
.screen.duel {
  --strip: max(calc(72 * var(--u)), 44px);
  width: 100%;
  height: 100%;
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.side { flex: 1 1 0; min-height: 0; width: 100%; max-width: 1200px; align-self: center; container: side / size; }
.side-top { transform: rotate(180deg); padding-bottom: env(safe-area-inset-top); } /* turned round, so its bottom is the screen's top edge */
.side-bottom { padding-bottom: env(safe-area-inset-bottom); }
.side-in {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr) 21vh;
  grid-template-rows: auto minmax(0, 1fr) 42cqh;
  grid-template-areas: "head" "sum" "ans";
  gap: 1.2vh 3vw;
  gap: 2.4cqh 3cqw;
  padding: 1.5vh 3.5vw;
  padding: 3cqh 3.5cqw;
}
.side-head { grid-area: head; display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; gap: 3cqw; }
.side-head .plate { height: max(34px, 5vh); height: max(34px, 10cqh); font-size: max(14px, min(4.6vw, 3.5vh)); font-size: max(14px, min(4.6cqw, 7cqh)); white-space: nowrap; }
.duel .sum { grid-area: sum; min-height: 0; gap: 0; padding: 0 2cqw; container: sum / size; }
.duel .big { font-size: min(11vw, 8vh); font-size: min(13cqw, 42cqh); line-height: 1.1; white-space: nowrap; }
.duel .big.mid { font-size: min(8vw, 7vh); font-size: min(9.5cqw, 38cqh); }
.duel .big.long { font-size: min(6.5vw, 6vh); font-size: min(8cqw, 34cqh); }
.say { margin: 0; min-height: 1.25em; font-size: max(13px, min(4vw, 3vh)); font-size: max(13px, min(5cqw, 14cqh)); line-height: 1.25; color: var(--go-ink); }
.say.warn { color: var(--warn); }
.duel .answers { grid-area: ans; min-height: 0; grid-template-rows: 1fr 1fr; gap: 1.2vh 3vw; gap: 2.4cqh 3cqw; container: ans / size; }
.duel .answer { position: relative; height: auto; min-height: 44px; font-size: max(20px, min(8vw, 5vh)); font-size: max(20px, min(10cqw, 24cqh)); touch-action: manipulation; }
.answer .key { display: none; position: absolute; left: 0.7em; top: 0.4em; font-size: max(11px, 0.34em); line-height: 1; color: var(--ink-soft); }
@media (hover: hover) and (pointer: fine) {
  .answer .key { display: block; } /* the keys each player presses, on a screen with a keyboard */
}
.side.frozen .answer:not(.right):not(.wrong) { opacity: 0.4; }
.side.pad .answer.cursor { outline: max(2px, calc(4 * var(--u))) solid var(--focus); outline-offset: max(1px, calc(3 * var(--u))); }
.duel-strip { flex: none; height: var(--strip); display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--u)); padding: 0 calc(20 * var(--u)); }
.strip-skill { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); font-size: max(calc(34 * var(--u)), 13px); }
/* A wide half (phones on their side, tablets and desktops in landscape): the question on one side, the answers on the other */
@container side (min-aspect-ratio: 11/5) {
  .side-in { grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "head ans" "sum ans"; }
}
@supports not (container-type: size) {
  @media (min-aspect-ratio: 11/10) {
    .side-in { grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "head ans" "sum ans"; }
  }
}

/* The result card: the far player gets their own lines, the right way up for them (as in Air Hockey) */
.far { transform: rotate(180deg); padding-bottom: calc(26 * var(--u)); margin-bottom: calc(26 * var(--u)); }
.far h2 { font-size: calc(60 * var(--u)); }
.far p { margin: calc(12 * var(--u)) 0 0; font-size: calc(36 * var(--u)); }