:root {
  --bg: #f7f4ee;
  --panel: #ffffff;
  --text: #2b2824;
  --muted: #8a847b;
  --accent: #e5483d;
  --seg: #2b2824;
  --seg-off: rgba(43, 40, 36, 0.07);
  --line: rgba(43, 40, 36, 0.4);
  --frame: #e5483d;  /* ツールで変えられる枠の色 */
  --lcd: #d9dfd0;
  --border: #e3ddd2;
  --radius: 6px;
}

* { box-sizing: border-box; }

/* .btn などの display 指定に負けないように */
[hidden] { display: none !important; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  line-height: 1.8;
  min-height: 100vh;
}

button { font: inherit; color: inherit; }

/* ---------- 7セグ ----------
   太さ・位置を1px単位に丸める。端数が出ると左右の縦棒でにじみ方が変わり、太さが違って見えるため */
.sd {
  --w: round(0.58em, 1px);
  --h: round(1em, 1px);
  --t: max(2px, round(0.08em, 1px));
  --gap: 1px;
  display: inline-block;
  position: relative;
  width: 0.58em;
  width: var(--w);
  height: var(--h);
  margin: 0 round(0.05em, 1px);
  vertical-align: middle;
}
.sd .s {
  position: absolute;
  background: var(--seg-off);
  border-radius: 1px;
}
.sd .s.on { background: var(--seg); }
.sd .a, .sd .d, .sd .g {
  left: calc(var(--t) + var(--gap));
  right: calc(var(--t) + var(--gap));
  height: var(--t);
}
.sd .a { top: 0; }
.sd .d { bottom: 0; }
.sd .g { top: round(calc((var(--h) - var(--t)) / 2), 1px); }
.sd .b, .sd .c, .sd .e, .sd .f {
  width: var(--t);
  height: round(down, calc(var(--h) / 2 - var(--gap) * 2 - var(--t) / 2), 1px);
}
.sd .b, .sd .f { top: calc(var(--t) / 2 + var(--gap)); }
.sd .c, .sd .e { bottom: calc(var(--t) / 2 + var(--gap)); }
.sd .b, .sd .c { right: 0; }
.sd .f, .sd .e { left: 0; }

.colon {
  --d: max(2px, round(0.08em, 1px));
  display: inline-block;
  position: relative;
  width: round(0.2em, 1px);
  height: round(1em, 1px);
  vertical-align: middle;
}
.colon i {
  position: absolute;
  left: round(calc((round(0.2em, 1px) - var(--d)) / 2), 1px);
  width: var(--d);
  height: var(--d);
  background: var(--seg);
  border-radius: 50%;
}
.colon i:first-child { top: round(0.28em, 1px); }
.colon i:last-child { bottom: round(0.28em, 1px); }

/* ---------- 枠 ---------- */
.waku {
  display: inline-block;
  border: 1px solid var(--frame);  /* 赤枠はどこも1pxにそろえる */
  padding: round(0.1em, 1px) round(0.3em, 1px);
  border-radius: 0;
  transition: transform 0.2s ease;
}
.waku.is-flipped { transform: rotate(180deg); }
/* タッチ操作では赤枠の少し外側を押しても、その枠を押したことにする */
@media (pointer: coarse) {
  .waku { position: relative; }
  .waku::before {
    content: "";
    position: absolute;
    inset: -8px;
  }
}
/* 中身を枠のまん中に置く。ずれていると回したときに位置が動いて見える */
.waku.seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}
.waku.seg .sd { vertical-align: top; }
.waku img { display: block; max-width: 100%; }
.question img { max-width: 100%; height: auto; }

body[data-tool="flip"] .waku,
body[data-tool="plus"] .waku .sd,
body[data-tool="plus"] .waku .dg,
body[data-tool="plus"] .waku .tk { cursor: pointer; }
/* マウスを乗せたときの目印。スマホではタップ後に残ってしまうので、マウスで操作する端末だけにする。
   ひっくり返すの目印は outline で出す（box-shadow だとピースの線を消してしまうため） */
@media (hover: hover) and (pointer: fine) {
  body[data-tool="plus"] .waku .sd:hover,
  body[data-tool="plus"] .waku .dg:hover,
  body[data-tool="plus"] .waku .tk:hover { outline: 1px dashed var(--muted); outline-offset: 2px; }
  body[data-tool="flip"] .waku:hover { outline: 3px solid rgba(43, 40, 36, 0.1); outline-offset: 0; }
}

.shake { animation: shake 0.3s; }
.waku.is-flipped.shake { animation: shake-flipped 0.3s; }
@keyframes shake {
  25% { translate: -4px 0; }
  75% { translate: 4px 0; }
}
@keyframes shake-flipped {
  25% { translate: 4px 0; }
  75% { translate: -4px 0; }
}

/* ---------- ボタン ---------- */
.btn {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 0.5em 1.4em;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
@media (hover: hover) { .btn:hover { filter: brightness(1.06); } }
.btn.big { font-size: 1.15rem; padding: 0.7em 2.4em; }
.btn.ghost { background: transparent; border: 1px solid var(--muted); color: var(--muted); }
.link {
  background: none;
  border: 0;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.85rem;
}

/* ---------- 説明ページ ---------- */
.top .share {
  position: fixed;
  top: 12px;
  left: 12px;
  font-size: 0.8rem;
  color: #fff;
  background: var(--text);
  padding: 0.2em 0.8em;
  border-radius: 999px;
  text-decoration: none;
  z-index: 5;
}
.hero {
  text-align: center;
  padding: 72px 16px 40px;
}
.sub {
  color: var(--muted);
  letter-spacing: 0.3em;
  font-size: 0.8rem;
  margin: 0;
}
.logo {
  font-size: clamp(2.4rem, 11vw, 4.6rem);
  margin: 0.1em 0 0.3em;
  line-height: 1.2;
  letter-spacing: 0.04em;
}
.logo-rta {
  color: var(--accent);
  margin-left: 0.1em;
}
.catch {
  margin: 0 0 20px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.doc {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px 80px;
}
.doc section { margin: 48px 0; }
.doc h2 {
  font-size: 1.2rem;
  letter-spacing: 0.15em;
  text-align: center;
  margin: 0 0 0.8em;
}
.doc h2 small {
  display: block;
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.2em;
  font-weight: 400;
}
.doc ul { padding-left: 1.2em; }
.doc strong { color: var(--text); background: linear-gradient(transparent 60%, rgba(229, 72, 61, 0.18) 60%); }
.start {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 56px 0;
}
.start .btn { width: 240px; }

/* ---------- メイン ---------- */
.play { padding-bottom: 120px; }
.bar {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(247, 244, 238, 0.92);
  z-index: 5;
}
.qno { color: var(--muted); letter-spacing: 0.1em; font-size: 0.9rem; }
.bar-left { display: flex; align-items: center; gap: 12px; }
.back {
  font-size: 0.8rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1em 0.8em;
  text-decoration: none;
}
@media (hover: hover) { .back:hover { color: var(--text); border-color: var(--muted); } }
.timer {
  font-size: round(clamp(1.6rem, 6vw, 2.2rem), 1px);
  padding: round(0.12em, 1px) round(0.3em, 1px);
  line-height: 1;
}
.timer .face { display: inline-flex; align-items: center; }

.stage {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px;
}
.question {
  /* ピースの重なり順（z-index）をこの中だけで決める。ヘッダーやツール欄より前に出ないように */
  position: relative;
  z-index: 0;
  isolation: isolate;
  text-align: center;
  padding: 32px 8px;
  min-height: 200px;
}
.question .big { font-size: 1.6rem; line-height: 1.8; }
.question .waku .sd { --w: round(0.62em, 1px); }
.question .seg { font-size: 1.4em; }

.answer-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
}
.answer-input {
  width: min(100%, 280px);
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.5em 0.8em;
  border-radius: var(--radius);
  font-size: 1rem;
  text-align: center;
}
.answer-input:focus { outline: 1px solid var(--muted); }
.msg { min-height: 1.5em; margin: 0; color: var(--accent); font-size: 0.9rem; }
.hint-area { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 16px; }
.hint-btn { font-size: 0.85rem; padding: 0.4em 1.2em; }
.hints {
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(100%, 460px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9rem;
}
.hints li {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  text-align: left;
}
.hints li b { display: block; font-size: 0.75rem; color: var(--muted); margin-bottom: 2px; }
.hints li.reveal { border-color: var(--text); }
.hints li.reveal b { color: var(--text); }
/* ヒントの中の完成図は小さめに */
.hints .q2-solved { --cell: 30px; --lw: 1.5px; margin-top: 8px; font-weight: 700; }
.hints .q2-solved .q2-cell { font-size: 14px; background: color-mix(in srgb, var(--q2c) 16%, var(--bg)); }

.toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--panel);
  border-top: 1px solid var(--border);
  z-index: 5;
}
.toolbar[hidden] { display: none; }
.tools { display: flex; gap: 8px; flex-wrap: wrap; }
.tool {
  display: flex;
  align-items: center;
  gap: 0.5em;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4em 0.9em;
  cursor: pointer;
  font-size: 0.9rem;
}
.tool b { font-size: 1.1rem; min-width: 1.4em; text-align: center; }
.tool.on { border-color: var(--accent); background: rgba(229, 72, 61, 0.1); color: var(--accent); }


.modal {
  position: fixed;
  inset: 0;
  background: rgba(43, 40, 36, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10;
}
.modal[hidden] { display: none; }
.modal-card {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(43, 40, 36, 0.12);
  border-radius: 10px;
  padding: 24px;
  width: min(100%, 400px);
  text-align: center;
}
.modal-card h2 { margin: 0 0 12px; font-size: 1.2rem; }
.gain {
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  margin: 12px 0 20px;
}
.gain > b {
  font-size: 1.6rem;
  width: 2.2em;
  height: 2.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent);
  flex-shrink: 0;
}
.gain p { margin: 0; color: var(--muted); font-size: 0.9rem; }


/* ---------- クリア ---------- */
.clear-main {
  max-width: 560px;
  margin: 0 auto;
  padding: 80px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.clear-main h1 { margin: 0; font-size: 1.6rem; }
.clear-main p { margin: 0; }
.frozen { font-size: round(clamp(2.4rem, 12vw, 3.6rem), 1px); }
.clear-time { font-size: 1.2rem; }
.clear-time strong { color: var(--accent); font-size: 1.6rem; margin-left: 0.3em; }
.note { color: var(--muted); font-size: 0.9rem; }

.btn, .tool { white-space: nowrap; }
@media (max-width: 420px) {
  .toolbar { padding-left: 10px; padding-right: 10px; gap: 6px; }
  .tools { gap: 6px; flex-wrap: nowrap; }
  .tool { padding: 0.4em 0.6em; font-size: 0.78rem; gap: 0.35em; }
  .toolbar .btn.ghost { padding: 0.45em 0.8em; font-size: 0.8rem; }
}

.tool-side { display: flex; gap: 8px; align-items: center; }
.howto {
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
@media (hover: hover) { .howto:hover { color: var(--text); border-color: var(--muted); } }
.howto-steps {
  text-align: left;
  margin: 4px 0 20px;
  padding-left: 1.4em;
  font-size: 0.9rem;
}

.confirm {
  width: min(100%, 360px);
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 10px;
  padding: 16px;
  font-size: 0.9rem;
}
.confirm[hidden] { display: none; }
.confirm p { margin: 0 0 12px; }
.confirm-btns { display: flex; gap: 8px; justify-content: center; }
.confirm-btns .btn { width: auto; }

/* ---------- デジタル時計の見た目 ----------
   タイマーの赤い枠を「時計の外装」に見せてカモフラージュする */
.clock {
  position: relative;
  display: inline-block;
  line-height: 1;
  border: 2px solid #d8d1c5;
  border-radius: round(0.28em, 1px);
  background: #fdfcf9;
  padding: round(0.16em, 1px) round(0.18em, 1px) round(0.2em, 1px);
  box-shadow: 0 3px 0 rgba(43, 40, 36, 0.08), 0 6px 14px rgba(43, 40, 36, 0.08);
}
.clock .face {
  display: inline-flex;
  align-items: center;
  background: var(--lcd);
  border: 1px solid var(--frame);  /* 赤枠は液晶のほうに付ける */
  border-radius: 0;
  padding: round(0.1em, 1px) round(0.16em, 1px);
  box-shadow: inset 0 1px 3px rgba(43, 40, 36, 0.25);
}
.clock .sd { --seg-off: rgba(43, 40, 36, 0.07); }
.bar { padding-top: 14px; }
.credit { text-align: center; }
.msg.ok { color: #2f8a4c; }
.doc .gain { margin: 12px 0; }
.doc ol { padding-left: 1.4em; }

/* ---------- チュートリアルの絵つき説明 ---------- */
.guide h2 { margin: 0 0 16px; font-size: 1.15rem; }
.g-art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 20px 12px;
  background: var(--bg);
  border-radius: 8px;
  pointer-events: none; /* 見本なので押しても何も起きない */
}
.g-art img { max-width: 100%; height: auto; }
.g-text { font-size: 0.9rem; margin: 16px 0 12px; }
.g-bar {
  display: flex;
  gap: 18px;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.g-bar .tool { position: relative; }
.g-row { display: flex; align-items: center; gap: 16px; }
.g-col { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.g-big { font-size: 1.5rem; line-height: 1.5; }
.g-row .seg { font-size: 1.9rem; line-height: 1.3; }
.g-arrow { color: var(--muted); font-size: 1.3rem; }
.g-input { display: inline-block; width: 200px; }
.g-target { position: relative; display: inline-block; }
/* 押す場所の丸。赤枠と混ざらないよう青にする */
.mark {
  position: absolute;
  inset: -10px -12px;
  border: 3px solid #2f6fdf;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;  /* 隣のボタンより手前に出す */
  animation: mark-pulse 1.4s ease-in-out infinite;
}
@keyframes mark-pulse {
  50% { transform: scale(1.08); opacity: 0.6; }
}
.g-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 16px; }
.g-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.g-dots i.on { background: var(--text); }
.g-nav { display: flex; gap: 8px; justify-content: center; }
.g-nav .btn { min-width: 110px; }
.g-nav .btn:disabled { opacity: 0.35; cursor: default; }
.seg .g-target .mark { inset: -6px -7px; }
.tk { display: inline-block; }

/* ---------- チュートリアル1（Figma: node 2964:31074） ---------- */
.t1 {
  --c: 44px;                     /* 丸の大きさ */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 130px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}
.t1-rows {
  display: grid;
  grid-template-columns: 43px 40px auto;
  align-items: center;
  justify-items: center;
  row-gap: 11px;
}
.t1-arrow {
  grid-column: 1 / -1;     /* 1行まるごと使い、数字の列の下に置く */
  justify-self: start;
  margin-left: 5.5px;
  width: 32px;
  height: 10.5px;
  transform: scaleY(-1);   /* 下向きの三角 */
}
.t1-eq { justify-self: center; }
.t1-cs { display: flex; align-items: center; gap: 6px; }
.t1-c {
  width: var(--c);
  height: var(--c);
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../img/tutorial/circle.svg) center / 100% 100% no-repeat;
}
.t1-plain { background: none; width: auto; padding: 0 2px; }  /* 丸なしで文字だけ。丸と離れすぎないよう幅は文字ぶん */
.t1-waku {
  width: 43px;
  height: 65px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.t1-answer { display: flex; align-items: center; gap: 12px; }
@media (max-width: 420px) {
  .t1 { gap: 64px; }
  .t1-rows { grid-template-columns: 43px 40px auto; }
  .t1-cs { gap: 4px; }
  .t1-answer { gap: 6px; }
}

/* ---------- チュートリアル2（Figma: node 2973:50252）。丸・答えの行はチュートリアル1と共通 ---------- */
.t2-rows { display: flex; flex-direction: column; gap: 72px; }
.t2-row { display: flex; align-items: center; gap: 10px; }
.t2-waku {
  min-width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 28px;
  line-height: 1;
}
/* 2文字をくっつけて1つの漢字（炎・林）に見えるようにする */
.t2-v { flex-direction: column; line-height: 0.95; }
.t2-h .tk + .tk { margin-left: 0.08em; }  /* 木と木がくっつかない程度に少し空ける */
.t2-eq { width: 14px; text-align: center; }
@media (max-width: 420px) {
  .t2-rows { gap: 40px; }
}
.doc .gain strong { background: none; }  /* ツール名に蛍光ペンを引かない */

/* ---------- 本番2問目（ピースはめ。Figma: node 2973:50348） ---------- */
.q2 {
  --cell: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  font-weight: 700;
}
.q2-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
}
.q2-text { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.q2-text small { font-size: 0.85rem; color: var(--muted); }
.q2-piece {
  display: grid;
  /* マスの間隔を線1本ぶん詰めて、隣のマスと線をぴったり重ねる（重ならないと境目が2本＝太く見える） */
  grid-template-columns: repeat(var(--w), calc(var(--cell) - var(--lw, 1px)));
  grid-template-rows: repeat(var(--h), calc(var(--cell) - var(--lw, 1px)));
  padding: 0 var(--lw, 1px) var(--lw, 1px) 0;
}
.q2-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cell);
  height: var(--cell);
  padding: 0;
  /* 線は影で描く（border だと 1.5px が 1px に丸められるため） */
  border: 0;
  box-shadow: inset 0 0 0 var(--lw, 1px) var(--q2c, var(--text));
  font-size: 18px;
  line-height: 1;
}
.q2-cell.waku { --q2c: var(--frame); position: relative; z-index: 1; }
.q2-pieces {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 24px 28px;
}
.q2-orange { --q2c: #e39b2d; }
.q2-red { --q2c: var(--frame); }
.q2-purple { --q2c: #9a6fc4; }
.q2-blue { --q2c: #3b7dd8; }
.q2-green { --q2c: #3a9a62; }
.q2-answer { margin: 0; font-size: 1.15rem; letter-spacing: 0.05em; }
@media (max-width: 420px) {
  .q2 { --cell: 36px; }
  .q2-pieces { gap: 18px 20px; }
}

/* ---------- 本番1問目（アルファベットを進める。Figma: node 2976:50461） ---------- */
.q1 {
  --c: 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.q1-row {
  --gap: 6px;
  display: grid;
  /* 丸の列は4つぶんの幅で固定し、右寄せにして e・n・a の列をそろえる */
  grid-template-columns: calc(var(--c) * 4 + var(--gap) * 3) 28px 96px;
  align-items: center;
  gap: 8px;
  padding-top: 38px;          /* 上の「+N」と矢印のぶん */
}
.q1-cs {
  display: flex;
  justify-content: flex-end;
  gap: var(--gap);
}
.q1-c {
  position: relative;
  width: var(--c);
  height: var(--c);
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../img/tutorial/circle.svg) center / 100% 100% no-repeat;
}
/* 「+N」と矢印は、この丸と右の丸のあいだの上に置く */
.q1-step {
  position: absolute;
  /* この丸と右の丸のあいだの真上に、中心をそろえて置く */
  left: calc(100% + var(--gap) / 2);
  bottom: calc(100% + 1px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 15px;
}
/* 矢印の幅は、となりの丸どうしの中心の間隔の7割。右の丸の上から左の丸の上へかかる */
.q1-step img { display: block; width: calc((var(--c) + var(--gap)) * 0.7); max-width: none; height: auto; }
.q1-waku {
  /* 丸の内側に収まる大きさ（四角の対角線が丸の直径より短くなるよう、丸の6割） */
  width: calc(var(--c) * 0.6);
  height: calc(var(--c) * 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.q1-eq { text-align: center; }
.q1-pic { width: 96px; height: auto; }
.q1-q { text-align: center; }
@media (max-width: 420px) {
  .q1 { --c: 40px; font-size: 18px; }
  .q1-row { --gap: 4px; grid-template-columns: calc(var(--c) * 4 + var(--gap) * 3) 20px 76px; gap: 4px; }
  .q1-pic { width: 76px; }
  .q1-step { font-size: 13px; }
}
.g-box { min-width: 1.8em; text-align: center; }
.guide .g-text strong { font-weight: 700; }  /* 赤は赤枠と紛れるので太字だけにする */
/* 説明文を指定どおりの位置で改行させるため、説明のカードは少し広くする */
.modal-card.guide { width: min(100%, 540px); }
.guide .g-text { font-size: 0.85rem; }

/* ---------- 動かせるピース ---------- */
.drag {
  position: relative;
  touch-action: none;   /* つかんでいる間に画面がスクロールしないように */
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;   /* 別の層で動かす（iPhone で通った跡が残らないように） */
  pointer-events: none;     /* 四角い範囲ではなく、マスがあるところだけでつかめるようにする */
}
.drag .q2-cell { pointer-events: auto; cursor: grab; }
.drag.dragging .q2-cell { cursor: grabbing; }
.q2-piece.drag { --lw: 1.5px; }  /* ピースの線だけ少し太く（盤面は1pxのまま） */

/* ---------- 本番3問目（しりとりの線。Figma: node 2993:60469） ---------- */
.q3 { display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 700; }
.q3-text { margin: 0; font-size: 1.1rem; }
.q3-map {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 680 / 582;
  container-type: inline-size;
}
.q3-dot, .q3-ch, .q3-at, .q3-pic { position: absolute; transform: translate(-50%, -50%); }
.q3-dot { width: 1.7cqw; height: 1.7cqw; min-width: 7px; min-height: 7px; border-radius: 50%; background: var(--text); }
.q3-ch {
  font-size: max(13px, 3.6cqw);
  line-height: 1;
}
/* 6つの絵は同じ大きさの四角に収めて、大きさをそろえる */
.q3 { --pic: 15cqw; }
.q3 .q3-pic { width: var(--pic); height: var(--pic); max-width: none; object-fit: contain; }
.q3-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.q3-tk { display: block; line-height: 0; }
.q3-tk .tk-v { display: none; }   /* 判定用の文字。画面には絵だけ出す */
.q3-tk img { display: block; max-width: none; transition: transform 0.2s ease; }
/* 赤枠も、ほかの絵と同じ大きさの四角にする。中身は内側に余白を取って収める */
.q3-eto { width: var(--pic); height: var(--pic); }
.q3-eto img { width: 13cqw; height: 13cqw; object-fit: contain; }
/* 方位記号はまん中で動かさない。矢印が方角の側に移り、そこから記号を指す（矢印の画像はもともと右向き）
   方位の赤枠だけ、ほかの絵より大きくする */
.q3 .q3-compass { width: 21cqw; height: 21cqw; }
.q3-compass .q3-tk { position: relative; width: 100%; height: 100%; }
.q3-compass .q3-mark { position: absolute; left: 50%; top: 50%; height: 12.6cqw; width: auto; transform: translate(-50%, -50%); }
.q3-compass .q3-arrow { position: absolute; width: 3.4cqw; height: 3.4cqw; transition: none; }
.q3-compass [data-v="北"] .q3-arrow { top: 0.5cqw; left: 50%; transform: translateX(-50%) rotate(90deg); }
.q3-compass [data-v="東"] .q3-arrow { left: calc(50% + 3.2cqw); top: calc(50% + 0.9cqw); transform: translateY(-50%) rotate(180deg); }
.q3-compass [data-v="南"] .q3-arrow { bottom: 0.5cqw; left: 50%; transform: translateX(-50%) rotate(-90deg); }
.q3-compass [data-v="西"] .q3-arrow { right: calc(50% + 3.2cqw); top: calc(50% + 0.9cqw); transform: translateY(-50%); }
@media (max-width: 420px) {
  .q3-text { font-size: 0.95rem; }   /* 問題文が1行に収まるように */
}
/* ピースの中を薄く塗る。盤面に置いても、どのピースがどこにあるか分かるように */
.q2-piece.drag .q2-cell { background: color-mix(in srgb, var(--q2c, var(--text)) 16%, var(--bg)); }
.analytics-note { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }