/* 漢字の穴うめ固有の見た目（共通は ../common/base.css） */
[hidden] { display: none !important; }

.board-wrap { min-height: 300px; }

/* ---------- 問題のカード（盤の地は明るいまま。文字の色は固定） ---------- */
.card {
  background: var(--board); color: #1F2328; border: 2px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px 16px; text-align: center; min-height: 300px; display: flex; flex-direction: column; align-items: center;
}
.prog { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 18px; margin-bottom: 6px; }
.prog i {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C9C4B8; background: #FFFFFF; font-style: normal;
  font-size: 13px; line-height: 1; font-weight: 700; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center;
}
.prog i.now { border-color: #2F5D8A; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #2F5D8A; }
.prog i.ok { background: #2E7D4F; border-color: #2E7D4F; }
.prog i.hint { background: #FFFFFF; border-color: #2E7D4F; }
.prog i.ng { background: #B23A3A; border-color: #B23A3A; }
.prog i.ok::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF; }
.prog i.hint::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #2E7D4F; }
.prog i.ng::after { content: '×'; }

/* ---------- 十字の盤: 字のます（--cell）と矢印（--gap）を 5×5 に並べる ---------- */
.cross {
  --cell: clamp(58px, 17vw, 84px); --gap: clamp(24px, 6vw, 34px);
  display: grid; grid-template-columns: var(--cell) var(--gap) var(--cell) var(--gap) var(--cell);
  grid-template-rows: var(--cell) var(--gap) var(--cell) var(--gap) var(--cell);
  margin: 4px auto 2px; position: relative;
}
.cell {
  width: var(--cell); height: var(--cell); display: flex; align-items: center; justify-content: center;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "BIZ UDMincho", "MS PMincho", serif;
  font-size: calc(var(--cell) * .62); font-weight: 700; line-height: 1; color: #1F2328;
  background: #FFFFFF; border: 2px solid #8C826F; border-radius: 8px;
}
.cell.center { border: 3px solid #2F5D8A; background: #F1F5FA; position: relative; }
.cell.center.empty::after { content: '？'; font-family: var(--font); font-size: calc(var(--cell) * .42); color: #8A96A3; font-weight: 700; }
.cell.center.ok { border-color: #2E7D4F; background: #E6F3EA; color: #1F5A37; }
.cell.center.ng { border-color: #B23A3A; background: #FBEDEC; color: #7A2424; }
.cell.center.shown { border-color: #B23A3A; background: #FFFFFF; color: #7A2424; }
.cell.center.pop { animation: pop-in .24s ease-out both; }
.cross.shake .cell.center { animation: shake .38s ease-out; }
.cell.dim { opacity: .45; }
.arrow { display: flex; align-items: center; justify-content: center; }
.arrow svg { width: 100%; height: 100%; overflow: visible; }
.arrow path { fill: none; stroke: #6B6457; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.arrow.hit path { stroke: #2E7D4F; }
.arrow.miss path { stroke: #B23A3A; stroke-dasharray: 3 5; }
.arrow.lit path { stroke: #2F5D8A; stroke-width: 5; }
/* 位置の名前（上・左…）: まちがえたときの○×を出す小さな札 */
.mk { position: absolute; font: 700 15px/1 var(--font); padding: 3px 6px; border-radius: 999px; background: #FFFFFF; border: 2px solid currentColor; pointer-events: none; }
.mk.o { color: #2E7D4F; } .mk.x { color: #B23A3A; }
@keyframes shake { 20% { transform: translateX(-8px); } 45% { transform: translateX(7px); } 70% { transform: translateX(-4px); } 100% { transform: none; } }
@keyframes pop-in { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cross.shake .cell.center, .cell.center.pop { animation: none; } }

.note { min-height: 1.6em; margin: 8px 0 0; font-size: 17px; font-weight: 700; color: #3B4048; max-width: 560px; }
.note.ok { color: #2E7D4F; }
.note.ng { color: #B23A3A; }
.note small { display: block; font-size: 15px; font-weight: 400; color: #5B616B; }
.note .fw { display: inline-flex; gap: 4px 12px; flex-wrap: wrap; justify-content: center; font-size: 16px; }
.note .fw b { font-family: "Hiragino Mincho ProN", "Yu Mincho", "BIZ UDMincho", serif; font-size: 20px; }
.note .fw .o { color: #2E7D4F; } .note .fw .x { color: #B23A3A; }

/* ヒント */
.hintbox { margin: 8px auto 0; max-width: 560px; text-align: left; background: #FFFDF2; border: 2px solid #D9C58A; border-radius: 8px; padding: 8px 12px; font-size: 16px; line-height: 1.8; color: #3B3320; }
.hintbox p { margin: 0; }
.hintbox b { font-family: "Hiragino Mincho ProN", "Yu Mincho", "BIZ UDMincho", serif; font-size: 20px; }
.hintbox .kana { font-weight: 700; }
.hintbox .tag { font-size: 14px; font-weight: 700; color: #7A6320; margin-right: 6px; }

/* 答えのあと: 4つの熟語（読み・意味） */
.words { list-style: none; padding: 0; margin: 10px auto 0; width: 100%; max-width: 560px; text-align: left; display: grid; gap: 6px; }
.words li { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: baseline; background: #FFFFFF; border: 1px solid #DDD8CC; border-radius: 8px; padding: 6px 10px; }
.words .w { font-family: "Hiragino Mincho ProN", "Yu Mincho", "BIZ UDMincho", serif; font-size: 24px; font-weight: 700; grid-row: span 2; line-height: 1.2; }
.words .w em { font-style: normal; color: #2E7D4F; }
.words .w small { display: block; font-family: var(--font); font-size: 14px; font-weight: 700; color: #5B616B; }
.words .m { font-size: 15px; color: #3B4048; line-height: 1.7; }
.words .dir { font-size: 13px; font-weight: 700; color: #5B616B; margin-right: 4px; }

/* 選択肢（漢字のボタン） */
.opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 480px; margin: 12px auto 4px; }
.opt {
  appearance: none; font: inherit; height: 64px; border-radius: 8px; border: 2px solid #8C826F; background: #FFFDF7; color: #1F2328;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "BIZ UDMincho", serif; font-size: 34px; font-weight: 700; line-height: 1; cursor: pointer;
  filter: var(--shadow-piece); position: relative; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur), background-color var(--dur), border-color var(--dur);
}
.opt:active:not(:disabled) { transform: translateY(1px); }
.opt:focus-visible { outline: 3px solid #D9A21B; outline-offset: 2px; }
.opt .n { position: absolute; left: 6px; top: 4px; font: 700 13px/1 var(--font); color: #6B6457; }
.opt.ng { background: #FBEDEC; border-color: #B23A3A; color: #7A2424; cursor: default; }
.opt.ng::after { content: '×'; position: absolute; right: 6px; top: 4px; font: 700 15px/1 var(--font); color: #B23A3A; }
.opt.ok { background: #E6F3EA; border-color: #2E7D4F; color: #1F5A37; }
.opt:disabled:not(.ok):not(.ng) { opacity: .55; cursor: default; }

/* キーボードで入れる */
.kbd-row { display: flex; gap: 8px; justify-content: center; margin: 12px auto 4px; max-width: 480px; }
.kbd-row .kin {
  width: 7.5em; height: 52px; font-size: 28px; text-align: center; border: 2px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); color: var(--ink); font-family: "Hiragino Mincho ProN", "Yu Mincho", "BIZ UDMincho", serif;
}
.kbd-row .kin::placeholder { font-size: 17px; font-family: var(--font); color: var(--ink-sub); }
.kbd-row .kin:focus-visible { outline: 3px solid #D9A21B; outline-offset: 2px; }

/* ボタンの列 */
.main-ctrl { justify-content: center; }
.linkbtn { display: inline-flex; align-items: center; text-decoration: none; }
.timer { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-sub); }
.tag { font-size: 14px; font-weight: 700; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 8px; color: var(--ink-sub); }

/* 結果 */
.result-box { position: static; margin: 0 auto; max-width: 600px; }
.result-box .big { margin: 0 0 4px; }
.result-box .rlist { list-style: none; padding: 0; margin: 8px auto 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; text-align: left; max-width: 520px; }
.rlist li { display: flex; align-items: baseline; gap: 6px; font-size: 16px; padding: 2px 0; border-bottom: 1px solid var(--line); }
.rlist .m { width: 1.4em; flex: none; font-weight: 700; text-align: center; }
.rlist .m.ok, .rlist .m.hint { color: var(--ok); } .rlist .m.ng { color: var(--ng); }
.rlist .x { font-family: "Hiragino Mincho ProN", "Yu Mincho", "BIZ UDMincho", serif; font-size: 22px; font-weight: 700; }
.rlist .k { color: var(--ink-sub); font-size: 14px; }
@media (max-width: 480px) { .result-box .rlist { grid-template-columns: 1fr; } .result-box { padding: 16px 12px; } }

@media (max-width: 480px) {
  .stage { padding: 8px; }
  .card { padding: 8px 6px 12px; }
  .opts { gap: 6px; }
  .opt { height: 56px; font-size: 30px; }
  .main-ctrl { display: grid; grid-template-columns: 1fr 1fr; }
  .main-ctrl #next { grid-column: 1 / -1; }
  .words .w { font-size: 21px; }
}

/* 入力欄は type=search（iPhone の「連絡先を自動入力」を出さないため。要望No.66）。検索欄の見た目は消す */
input[type=search]{-webkit-appearance:none;appearance:none}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{display:none;-webkit-appearance:none}
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; --tb-rt: 11px; --tb-st-rt: 11px; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1; } }
@media (min-width: 641px) { .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */