/* クロスワード固有の見た目（共通は ../common/base.css） */
[hidden] { display: none !important; }

.board-wrap { container-type: inline-size; }

/* ---------- 盤（紙の盤。ダーク表示でも明るいまま） ---------- */
.xw {
  --n: 7;
  display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr); gap: 1px;
  width: min(100%, 520px); margin: 0 auto; aspect-ratio: 1;
  background: #1F2328; border: 2px solid #1F2328; border-radius: 3px; color: #1F2328;
}
.xw .blk { background: #2B2F36; }
.cell {
  appearance: none; font: inherit; position: relative; min-width: 0; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 0; cursor: pointer;
  background: #FFFFFF; color: #1F2328; font-weight: 700; line-height: 1;
  font-size: min(calc(100cqw / var(--n) * .52), 36px);
  display: flex; align-items: center; justify-content: center; touch-action: manipulation;
}
.cell .num { position: absolute; left: 2px; top: 1px; font-size: min(calc(100cqw / var(--n) * .2), 13px); font-weight: 600; color: #3F444B; line-height: 1; }
.cell .v { display: inline-block; }
/* タテのことばの中の「ー」は たての棒で書く */
.cell.vert .v.bar { transform: rotate(90deg); }
.cell.word { background: #DCE8F4; }
.cell.sel { background: #A9C6E4; box-shadow: inset 0 0 0 3px #2F5D8A; }
.cell:focus-visible { outline: 3px solid #B7791F; outline-offset: -3px; }
/* ヒントで出した字: 青い字＋右上の三角 */
.cell.revealed { color: #2F5D8A; }
.cell.revealed::before { content: ''; position: absolute; right: 0; top: 0; border-style: solid; border-width: 0 9px 9px 0; border-color: transparent #2F5D8A transparent transparent; }
/* まちがい: 赤＋ななめの線（色だけに頼らない） */
.cell.wrong { color: #B23A3A; background: #FBE3E0; }
.cell.wrong::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(178, 58, 58, .55) calc(50% - 1px), rgba(178, 58, 58, .55) calc(50% + 1px), transparent calc(50% + 1px)); pointer-events: none; }
.cell.wrong.sel { background: #F5CFCA; }
.cell.shown { color: #5B616B; font-style: italic; }
.cell.pop .v { animation: pop-in .18s ease-out; }
.cell.win { animation: flash .6s ease-out; animation-delay: calc(var(--i, 0) * 14ms); }
.cell.pre { cursor: default; }
@keyframes pop-in { from { transform: scale(.6); } to { transform: none; } }
.cell.vert.pop .v.bar { animation: none; }
@keyframes flash { 0%, 100% { background: #FFFFFF; } 40% { background: #CDE8D6; } }

/* キーボードの入力欄（見えない。選んだマスに重ねて置く） */
.ime { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; margin: 0; font-size: 16px; color: transparent; background: transparent; caret-color: transparent; pointer-events: none; z-index: -1; }

/* ---------- 今のことばのカギ（盤のすぐ上） ---------- */
.clue-bar { display: flex; align-items: stretch; gap: 6px; max-width: 520px; margin: 0 auto 8px; }
.cb-nav, .cb-main { appearance: none; font: inherit; border: 2px solid var(--line-strong); background: var(--surface); color: var(--ink); border-radius: var(--radius); cursor: pointer; touch-action: manipulation; }
.cb-nav { flex: none; width: var(--tap); min-height: var(--tap); display: flex; align-items: center; justify-content: center; color: var(--accent); padding: 0; }
.cb-nav svg { width: 22px; height: 22px; }
.cb-main { flex: 1; min-width: 0; min-height: calc(var(--tap) + 8px); text-align: left; padding: 6px 10px; display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 1.45; }
.cb-tag { flex: none; font-weight: 700; color: var(--btn-ink); background: var(--btn); border-radius: 4px; padding: 1px 7px; font-size: 14px; white-space: nowrap; }
.cb-tag:empty { display: none; }
.cb-text { min-width: 0; }
.cb-nav:active, .cb-main:active { transform: translateY(1px); }
.cb-nav:focus-visible, .cb-main:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }

/* ---------- 50音のキー ---------- */
.kb { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; max-width: 520px; margin: 10px auto 0; }
.kb .gap { visibility: hidden; }
.key {
  appearance: none; font: inherit; font-size: 20px; font-weight: 700; min-height: 42px; padding: 0; min-width: 0;
  border-radius: var(--radius); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; touch-action: manipulation;
}
.key.wide { grid-column: span 2; font-size: 16px; }
.key.fn { color: var(--accent); }
.key.bar-key { font-size: 22px; }
.key:active:not(:disabled) { transform: translateY(1px); background: var(--accent-soft); }
.key:disabled { opacity: .4; cursor: not-allowed; }
.key:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }

/* ---------- 道具 ---------- */
.tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px auto 0; max-width: 520px; }
.tool { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 16px; flex: 1 1 0; justify-content: center; white-space: nowrap; }
.tool svg { width: 20px; height: 20px; flex: none; }
.tool[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.after { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.timer { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 18px; min-width: 56px; text-align: right; margin-left: auto; }
.star { color: var(--warn); letter-spacing: -1px; margin-left: 6px; }
.linkbtn { display: inline-flex; align-items: center; text-decoration: none; }

/* ---------- 問題の選択（設定） ---------- */
.pz-choices .choice span { min-width: 64px; justify-content: center; }
.pz-choices .done { color: var(--ok); margin-left: 2px; }

/* ---------- カギの一覧 ---------- */
.clue-lists { display: grid; grid-template-columns: 1fr; gap: 8px 20px; margin-top: 16px; }
.clue-lists h2 { font-size: 17px; margin: 0 0 6px; }
.clue-lists h2 small { font-weight: 400; color: var(--ink-sub); font-size: 14px; }
.clues { list-style: none; margin: 0; padding: 0; }
.clues li { margin: 0; }
.clues button {
  appearance: none; font: inherit; width: 100%; text-align: left; background: transparent; color: var(--ink); border: 0; border-radius: 4px;
  padding: 6px 8px; display: flex; gap: 8px; line-height: 1.5; cursor: pointer; min-height: 40px; align-items: baseline;
}
.clues .n { flex: none; min-width: 1.6em; font-weight: 700; color: var(--accent); text-align: right; font-variant-numeric: tabular-nums; }
.clues .t { flex: 1; }
.clues .len { flex: none; color: var(--ink-sub); font-size: 14px; }
.clues .ans { display: block; color: var(--ok); font-size: 14px; font-weight: 700; }
.clues button.cur { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.clues button.cross { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.clues button.full .t { color: var(--ink-sub); }
.clues button:focus-visible { outline: 3px solid var(--warn); outline-offset: -2px; }
@media (min-width: 620px) { .clue-lists { grid-template-columns: 1fr 1fr; } }

.result-box { inset: 10% 5% auto; z-index: 2; }
.result-box .big { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
.callout { z-index: 3; top: 45%; }

@media (max-width: 480px) {
  .stage { padding: 8px; }
  .kb { gap: 3px; }
  .key { min-height: 40px; font-size: 18px; border-radius: 5px; }
  .key.wide { font-size: 14px; }
  .tools { gap: 6px; }
  .tool { padding: 0 4px; font-size: 14px; gap: 3px; min-width: 0; }
  .tools svg { display: none; }
  .controls .btn.icon { padding: 0 9px; }
  .cb-main { font-size: 15px; padding: 4px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cell.pop .v, .cell.win { animation: none; }
}
.cell .pd { position: absolute; right: 2px; bottom: 1px; font-size: min(calc(100cqw / var(--n) * .24), 13px); color: #2F5D8A; font-weight: 600; font-style: normal; }

/* iPhone の「連絡先を自動入力」を出さないため入力欄は type=search（要望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。一番長いカギがふりがな付きで折り返したときの高さ。iPhone で測った値） */
.cb-main { min-height: 116px; }
@media (min-width: 641px) { .cb-main { min-height: 76px; } }
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 3; --tb-st-lines: 1; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 3; --tb-st-lines: 1; } }
@media (min-width: 641px) { .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */