/* 授業モード：Zoom の 画面共有で 見せる ための 大きな 問題画面。このファイルだけで 完結 */
:root {
  --bg: #0b1736;
  --bg2: #142452;
  --fg: #ffffff;
  --hl: #ffd84a;
  --dim: #9fb0d6;
  --line: #2c3f78;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "M PLUS Rounded 1c", system-ui, sans-serif;
  font-weight: 500;
  overflow-x: hidden;
}
.hidden { display: none !important; }
button, select, input { font: inherit; }

/* 設定の 画面 */
.setup { max-width: 720px; margin: 0 auto; padding: 20px 16px 40px; }
.setup h1 { font-size: 1.6rem; margin: 0 0 6px; color: var(--hl); }
.lead { font-size: .9rem; color: var(--dim); margin: 0 0 16px; line-height: 1.6; }
.form { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 10px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 1rem; }
.row select, .row input {
  min-width: 0; width: 55%; max-width: 280px;
  background: #0d1c44; color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 1rem;
}
.note { margin: 0; font-size: .85rem; color: var(--dim); min-height: 1em; }
.start {
  margin-top: 6px; padding: 14px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--hl); color: #1a1a1a; font-weight: 800; font-size: 1.3rem;
}
.keys { font-size: .8rem; color: var(--dim); line-height: 1.7; margin-top: 16px; }

/* 問題の 画面 */
.stage {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: clamp(30px, 6vh, 56px) 16px 56px;
}
body.bar-off .stage { padding-bottom: 8px !important; }
.qnum { position: absolute; top: 10px; left: 16px; font-size: clamp(18px, 4vh, 40px); color: var(--dim); font-weight: 800; }
.board {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; text-align: center; overflow: hidden;
}
.flash { color: var(--fg); white-space: nowrap; }
.flash.yellow { color: var(--hl); }
.wait { color: var(--dim); }
.ready { color: var(--hl); }
.col { display: inline-flex; flex-direction: column; align-items: flex-end; }
.col .t { white-space: nowrap; line-height: 1.12; }
.col .t.minus { color: var(--hl); }
.col .rule { align-self: stretch; border-top: .06em solid var(--fg); margin: .08em 0; }
.col .ans { color: var(--hl); line-height: 1.12; white-space: nowrap; }
.expr { white-space: nowrap; }
.expr .ans { color: var(--hl); }
.ansbig { color: var(--hl); white-space: nowrap; }
.anslabel { color: var(--dim); font-size: .25em; margin-bottom: .2em; }
.done { color: var(--hl); font-size: clamp(28px, 12vh, 120px); }

/* 一覧 */
.list { max-width: 1000px; margin: 0 auto; padding: 16px 16px 90px; }
.list h2 { color: var(--hl); font-size: 1.4rem; margin: 6px 0 12px; }
.list ol { margin: 0; padding-left: 2.2em; display: grid; gap: 6px; font-size: clamp(16px, 2.6vh, 26px); }
.list li { border-bottom: 1px solid var(--line); padding: 4px 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.list li b { color: var(--hl); }

/* 操作ボタン（下に 小さく まとめる） */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px 8px;
  background: rgba(8, 16, 40, .92); border-top: 1px solid var(--line);
}
.bar button {
  background: #1d3270; color: var(--fg); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; font-size: .85rem; cursor: pointer;
}
.bar #bNext { background: var(--hl); color: #1a1a1a; font-weight: 800; }
.show {
  position: fixed; right: 8px; bottom: 8px; z-index: 5; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--dim); opacity: .35; cursor: pointer; padding: 0;
}
.show:hover { opacity: 1; }