/*
 * 実機（Android タブレット版）モンサクンの作問画面の再現。
 * 参照した画面写真:
 *   papers/11_論文ドラフト/stage1_基礎観測/06_戦略の違い/_執筆過程/extracted/img_senryaku/*.png
 *   papers/11_論文ドラフト/stage1_基礎観測/06_戦略の違い/_執筆過程/extracted/img_docx/image1.png
 *
 * 構成: 左に「レベル／もんだい」タブ → 作問条件の白枠 → 黒板（3 行の解答欄）→
 * チョーク受け → 操作ボタン →「もどる」の丸、右に選択肢カードの縦一列。
 * カードはドラッグで黒板へ運ぶ。抜けた位置は空いたまま残る（実機と同じ）。
 */

.msk-stage {
  --paper: #fbf7dc;
  --side: #ded1a8;
  --board-frame: #c6a87a;
  --board: #5d7c5c;
  --card-border: #2e75ce;
  --tab-lv: #a9542a;
  --tab-asg: #e9b44c;
  --btn-off: #d9cfa8;
  --btn-on: #efc85e;
  --back: #c9a24b;

  position: relative;
  /* 実機はタブレットの固定解像度なので、設計幅を固定して表示幅に合わせて拡縮する
     （拡縮は app.js の fitStage が行う）。 */
  width: 1000px;
  transform-origin: top left;
  background: var(--paper);
  border: 1px solid #c9bd93;
  border-radius: 6px;
  padding: 26px 30px 34px;
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 26px;
  font-family: "Hiragino Maru Gothic ProN", "M PLUS Rounded 1c", "Yu Gothic",
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
/* 左右のうすい帯（実機の背景） */
.msk-stage::before, .msk-stage::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 22px;
  background: var(--side);
}
.msk-stage::before { left: 0; }
.msk-stage::after { right: 0; }

.msk-left, .msk-right { position: relative; z-index: 1; }
.msk-left { padding-bottom: 104px; }  /* 左下の「もどる」の丸ぶんの余白 */

/* --- レベル / もんだい タブ ------------------------------------------- */
.msk-tabs { display: flex; gap: 6px; margin-left: 4px; }
.msk-tab {
  border: 3px solid #000; border-bottom: none;
  padding: 3px 18px; font-size: 15px; font-weight: 700; letter-spacing: .04em;
}
.msk-tab.lv { background: var(--tab-lv); color: #fff; }
.msk-tab.asg { background: var(--tab-asg); color: #241a08; }

/* --- 作問条件 ---------------------------------------------------------- */
.msk-req {
  background: #fff; border: 4px solid #000; padding: 10px 14px 12px;
  font-size: 21px; line-height: 1.4; font-weight: 600; color: #111;
  white-space: pre-line;
  min-height: 108px;
}

/* --- 黒板 -------------------------------------------------------------- */
.msk-board {
  background: var(--board-frame); border-radius: 14px;
  padding: 10px 12px; margin-top: -2px;
}
.msk-board-inner {
  background: var(--board); border-radius: 10px; padding: 10px 12px 10px 8px;
  display: grid; gap: 8px;
}
.msk-row { display: grid; grid-template-columns: 62px 1fr; align-items: center; }
.msk-num {
  width: 46px; height: 46px; margin: 0 auto; border: 3px solid #fff; border-radius: 50%;
  color: #fff; font-size: 26px; font-weight: 700; line-height: 40px; text-align: center;
}
.msk-slot {
  min-height: 62px; border-radius: 12px; background: #000;
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .12s;
}
.msk-slot.over { box-shadow: 0 0 0 4px #ffe680; }

/* チョーク受け */
.msk-tray {
  height: 12px; background: var(--board-frame); border-radius: 0 0 8px 8px;
  margin: 0 6px; position: relative;
}
.msk-tray i { position: absolute; top: 3px; height: 6px; border-radius: 2px; display: block; }
.msk-tray .eraser { left: 18px; width: 78px; background: #4c6b3f; }
.msk-tray .knob { left: 74px; width: 12px; top: 0; height: 9px; background: #8a8a8a; }
.msk-tray .chalk-w { left: 128px; width: 62px; background: #fff; }
.msk-tray .chalk-p { left: 200px; width: 56px; background: #c88ac0; }

/* --- 操作ボタン -------------------------------------------------------- */
.msk-action {
  display: block; width: 400px; margin: 20px 0 0 64px; padding: 12px 0;
  font-size: 24px; font-weight: 700; text-align: center; border-radius: 0;
  background: var(--btn-off); border: 2px solid #8a8a8a; color: #4a4a4a;
  cursor: default; font-family: inherit;
}
.msk-action.ready {
  background: var(--btn-on); border: 3px solid #000; color: #171717; cursor: pointer;
}
.msk-action.ready:hover { filter: brightness(1.06); }

/* --- もどる ------------------------------------------------------------ */
.msk-back {
  position: absolute; left: -42px; bottom: -42px; width: 128px; height: 128px;
  border-radius: 50%; background: var(--back); border: 3px solid #000;
  color: #171717; font-size: 19px; font-weight: 700;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 26px; padding-left: 30px; cursor: pointer; z-index: 2;
}
.msk-back:hover { filter: brightness(1.06); }

/* --- 選択肢カード ------------------------------------------------------ */
.msk-fit { position: relative; overflow: hidden; }

.msk-tray-list { display: grid; gap: 10px; padding-top: 122px; }
.msk-pos { min-height: 62px; border-radius: 12px; }
.msk-pos.over { box-shadow: 0 0 0 4px #ffe680; }

.msk-card {
  background: #fff; border: 3px solid var(--card-border); border-radius: 12px;
  min-height: 62px; padding: 8px 12px; font-size: 15px; line-height: 1.4;
  white-space: pre-line;
  color: #1a1a1a; text-align: center;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; box-sizing: border-box;
}
.msk-card:active { cursor: grabbing; }
.msk-card.dragging { opacity: .28; }
.msk-slot .msk-card { width: 100%; }

/* ドラッグ中に指（カーソル）についてくる複製 */
.msk-ghost {
  position: fixed; z-index: 999; pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.28); transform: rotate(-1.2deg);
  background: #fff; border: 3px solid var(--card-border); border-radius: 12px;
  padding: 8px 12px; font-size: 15px; line-height: 1.4; text-align: center; white-space: pre-line;
  display: flex; align-items: center; justify-content: center;
  font-family: "Hiragino Maru Gothic ProN", "M PLUS Rounded 1c", "Yu Gothic", sans-serif;
}

/* --- 答え合わせの結果表示 ---------------------------------------------- */
.msk-verdict {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,16,4,.28);
}
.msk-verdict > div {
  background: #fff; border: 5px solid #000; padding: 22px 46px;
  font-size: 40px; font-weight: 700; text-align: center; border-radius: 4px;
}
.msk-verdict .mark { font-size: 62px; display: block; line-height: 1; margin-bottom: 6px; }
.msk-verdict.ok .mark { color: #d8452f; }
.msk-verdict.ng .mark { color: #2f5fd8; }


/* --- 支援メッセージ（実機には無い。デモで足した吹き出し） -------------- */
.msk-hint {
  margin: 12px 0 0 64px; width: 400px;
  background: #fff; border: 3px solid #000; border-radius: 4px;
  padding: 9px 12px 10px; font-size: 14px; line-height: 1.5; color: #1a1a1a;
  position: relative;
}
.msk-hint::before {
  content: "モンサクン"; position: absolute; top: -12px; left: 10px;
  background: var(--tab-asg); border: 2px solid #000; border-radius: 3px;
  font-size: 10px; padding: 0 6px; font-weight: 700;
}
.msk-hint.alert { background: #fff3f1; }