/* The classroom board (classroom.html): the game's LED board, cards and signs,
   sized up for an interactive whiteboard. Loaded after style.css and page.css,
   so their tokens and the cards' and signs' own styles apply. */

.room {
  max-width: 1400px; margin: 0 auto;
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.room-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; min-height: 56px; padding: 6px 0 10px; }
.room-h { font-size: 1.375rem; font-weight: 700; line-height: 1.2; margin-right: auto; }
.room-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Small ruled buttons, the signs' box at button size. */
.tool {
  min-height: 48px; padding: 0 16px; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink);
  font-size: 1.0625rem; font-weight: 700; transition: translate 80ms ease-out, background-color 80ms;
}
.tool:not(:disabled):active { translate: 0 2px; background: var(--press); }
.tool:disabled { color: var(--ink-2); box-shadow: inset 0 0 0 2px var(--edge); }
.tool.ink { background: var(--ink); color: var(--paper); }
.seg { display: flex; box-shadow: inset 0 0 0 2px var(--ink); }
.seg button { min-height: 48px; padding: 0 14px; font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.seg button + button { box-shadow: inset 2px 0 0 var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.own { margin: 0 0 16px; padding: 16px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink); display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.own fieldset { border: 0; padding: 0; margin: 0; }
.own legend, .own-t { font-weight: 700; font-size: 1rem; }
.own-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.own input {
  width: 4.5em; min-height: 48px; padding: 0 8px; font: inherit; font-size: 1.25rem; font-weight: 700; text-align: center;
  color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 0;
}
.own-t { display: flex; flex-direction: column; gap: 6px; }
.own-t input { width: 5.5em; }
.own-err { flex-basis: 100%; font-weight: 700; }

.room-main { display: grid; gap: 20px; }
.room-play { container-type: inline-size; min-width: 0; }
.room-board { min-height: 0; padding-bottom: 14px; }
.room-board .led-target { font-size: clamp(4.5rem, min(14vh, 22cqi), 11rem); margin: 4px 0 8px; }
.room-board .closest { font-size: clamp(1.125rem, 2.6vh, 1.75rem); }
.room-board .bang-word { font-size: clamp(1.375rem, 3.2vh, 2.25rem); }
.room-cards { margin-top: 16px; }
.room-cards .card { height: clamp(80px, 15vh, 170px); font-size: clamp(2.25rem, 7vh, 5.5rem); }
.room-cards .card.long { font-size: clamp(1.625rem, 5vh, 4rem); }
.room-ops .op { height: clamp(64px, 10vh, 120px); font-size: clamp(2rem, 6vh, 4.5rem); font-weight: 700; line-height: 1; }

.room-side { min-width: 0; }
.room-sh { font-size: 1.125rem; font-weight: 700; color: var(--ink-2); }
.room-say { margin-top: 6px; min-height: 1.4em; font-size: clamp(1.125rem, 2.6vh, 1.625rem); color: var(--ink-2); }
.room-say.warn { color: var(--ink); font-weight: 700; }
.room-work { list-style: none; padding: 0; margin-top: 4px; font-size: clamp(1.375rem, 4vh, 2.75rem); font-weight: 700; line-height: 1.3; }
.room-work .pending { color: var(--ink-2); }
.room-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.room-way { margin-top: 16px; padding: 14px 16px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink); font-size: clamp(1.0625rem, 2.6vh, 1.625rem); }
.room-way ol { padding-left: 1.4em; margin-top: 6px; font-weight: 700; }

.room-about { max-width: 640px; margin-top: 8px; }
.room-foot { max-width: 640px; }
.prose kbd { font: 600 .875em/1.4 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; padding: 0 4px; box-shadow: inset 0 0 0 1.5px var(--edge); border-radius: 3px; }

/* Plain paper on a big screen: the desktop frame's margin rule would cross the cards. */
@media (min-width: 720px) {
  body.room-body { background-image: none; }
  body.room-body::before { display: none; }
}

/* A whiteboard or laptop: six cards in a row, and the working beside the board. */
@media (min-width: 900px) {
  .room-main { grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1fr); align-items: start; }
  .room-cards { grid-template-columns: repeat(6, 1fr); }
}