/* 文字ならべかえ固有の見た目（共通は ../common/base.css） */
[hidden] { display: none !important; }

.board-wrap { min-height: 260px; container-type: inline-size; }

/* ---------- 問題のカード（盤の地は明るいまま。文字の色は固定） ---------- */
.card {
  background: var(--board); color: #1F2328; border: 2px solid var(--line); border-radius: var(--radius);
  padding: 10px 10px 16px; text-align: center; min-height: 270px; display: flex; flex-direction: column; align-items: center;
  /* 札と枠の大きさ: 字数（--n）が多いほど小さく。1列に収まる大きさで、64px まで */
  --sz: clamp(34px, calc((100cqw - 32px - (var(--n, 6) - 1) * 6px) / var(--n, 6)), 64px);
}
.prog { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 18px; margin-bottom: 4px; }
.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: '×'; }
.prog .count { font-size: 14px; font-weight: 700; color: #5B616B; }

/* 分類（ヒント） */
.cat { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; min-height: 36px; }
.cat-name { font-size: 20px; font-weight: 700; color: #1F2328; border: 2px solid #2F5D8A; border-radius: 999px; padding: 0 14px; line-height: 32px; background: #FFFFFF; }
.cat-name small { font-size: 14px; color: #5B616B; font-weight: 700; margin-right: 6px; }
.cat-len { font-size: 15px; color: #5B616B; font-weight: 700; }
.clue { margin: 6px auto 0; max-width: 520px; font-size: 16px; color: #3B4048; line-height: 1.6; }
.clue b { color: #5B616B; font-size: 14px; margin-right: 6px; }

/* 札（手で触る物。薄い影を1段） */
.tile {
  appearance: none; font: inherit; width: var(--sz); height: calc(var(--sz) * 1.12); padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(var(--sz) * .56); font-weight: 700; line-height: 1; color: #1F2328;
  background: #FFFDF7; border: 2px solid #8C826F; border-radius: 8px; cursor: pointer;
  filter: var(--shadow-piece); touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur), background-color var(--dur), border-color var(--dur);
}
.tile:focus-visible { outline: 3px solid #D9A21B; outline-offset: 2px; }
.tile:active { transform: translateY(1px); }
.tile.small { font-size: calc(var(--sz) * .42); padding-top: calc(var(--sz) * .14); }
.tile.moving { transition: none; z-index: 2; position: relative; }

/* 答えの枠 */
.slots { display: flex; justify-content: center; gap: 6px; margin: 14px 0 4px; flex-wrap: nowrap; max-width: 100%; }
.slot {
  width: var(--sz); height: calc(var(--sz) * 1.12); border-radius: 8px; flex: none;
  border: 2px dashed #A69D8B; background: #F1EEE6; display: flex; align-items: center; justify-content: center; position: relative;
}
.slot.next { border-color: #2F5D8A; border-style: solid; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #2F5D8A55; }
.slot > .tile { border-color: #2F5D8A; }
.slot.locked > .tile { background: #E3ECF5; border-color: #2F5D8A; cursor: default; }
.slot.locked::after { /* ヒントで固定した枠の印（小さな錠） */
  content: ''; position: absolute; top: -7px; right: -7px; width: 16px; height: 16px; border-radius: 50%;
  background: #2F5D8A; border: 2px solid #FFFFFF;
  -webkit-mask: none;
}
.slots.ok .slot > .tile { background: #E6F3EA; border-color: #2E7D4F; color: #1F5A37; }
.slots.shown .slot > .tile { background: #FBEDEC; border-color: #B23A3A; color: #7A2424; }
.slots.shake { animation: shake .38s ease-out; }
.slots.ng .slot > .tile { border-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; } }
.tray .tile.pop { animation: pop-in .22s ease-out both; }
@media (prefers-reduced-motion: reduce) { .slots.shake, .tray .tile.pop { animation: none; } }

.note { min-height: 1.6em; margin: 2px 0 0; font-size: 17px; font-weight: 700; color: #3B4048; }
.note.ok { color: #2E7D4F; }
.note.ng { color: #B23A3A; }
.note .w { font-size: 1.15em; }
.note small { display: block; font-size: 15px; font-weight: 400; color: #5B616B; }

/* ばらばらの札の列 */
.tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 0; min-height: calc(var(--sz) * 1.12); max-width: 560px; }
.tray .ghost { /* 使った札のあと（札の位置が動かないように） */
  width: var(--sz); height: calc(var(--sz) * 1.12); border-radius: 8px; border: 2px dashed #D3CCBC;
}

/* ボタンの列 */
.main-ctrl { justify-content: center; }
.main-ctrl .btn { padding: 0 14px; }
.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); }

/* キーボードの入力を受ける欄（見えない。パソコンで日本語入力の確定を受けるため） */
.kin { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; pointer-events: none; }
#play { position: relative; }

/* 設定: 分類の選択肢 */
.cats .choice span { padding: 0 12px; }
.cats .choice .done { font-size: 13px; color: var(--ink-sub); margin-left: 6px; font-weight: 400; }

/* 結果 */
.result-box { position: static; margin: 0 auto; max-width: 560px; } /* 結果はカードの代わりに出す（一覧が長いので重ねない） */
.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: 460px; }
.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 { color: var(--ok); } .rlist .m.hint { color: var(--ok); } .rlist .m.ng { color: var(--ng); }
.rlist .w { 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 4px 12px; min-height: 250px; }
  .slots { gap: 4px; }
  .tray { gap: 6px; }
  .main-ctrl { display: grid; grid-template-columns: 1fr 1fr; }
  .main-ctrl .btn { padding: 0 8px; }
  .main-ctrl #next { grid-column: 1 / -1; }
}

/* iPhone の「連絡先を自動入力」を出さないため入力欄は type=search（要望No.87）。検索欄の見た目は消す */
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: 1; --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; } }
/* 上のバーの高さ ここまで */