/* 百人一首固有の見た目（共通は ../common/base.css） */
[hidden] { display: none !important; }

/* 紙・札の色（札は本物のかるたと同じく、ダークでも明るい紙のまま。文字の色も固定） */
:root {
  --h-paper: #FBF7EC; --h-paper2: #F3ECDA; --h-ink: #1F2328; --h-sub: #5B616B; --h-green: #2D5A3F; --h-green-d: #173522;
  --h-kim: #B23A3A; --h-kim-bg: #FBE3DF; --h-you: #2F6DB5; --h-cpu: #C8453B; --h-gold: #B7791F;
  --h-card: #FBFAF6; --h-card-ink: #1F2328; --h-card-sub: #5B616B; --h-dot: #C9C4B8; --h-white: #FFFFFF;
  --h-ok: #2E7D4F; --h-ng: #B23A3A; --h-okbg: #E4F2E9;
  --h-lab: #E3ECF5; --h-lab-ink: #2F5D8A; --h-lab-lit: #EFEBE2;
  --mincho: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", "Noto Serif CJK JP", "MS PMincho", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --h-card: #2B2D31; --h-card-ink: #ECEAE4; --h-card-sub: #A9ADB4; --h-dot: #5A5E66; --h-white: #1C1D20;
    --h-ok: #5BBF85; --h-ng: #E88580; --h-okbg: #203A2A; --h-lab: #2A3642; --h-lab-ink: #7FA8D1; --h-lab-lit: #3A3D43;
  }
}
:root[data-theme="dark"] {
  --h-card: #2B2D31; --h-card-ink: #ECEAE4; --h-card-sub: #A9ADB4; --h-dot: #5A5E66; --h-white: #1C1D20;
  --h-ok: #5BBF85; --h-ng: #E88580; --h-okbg: #203A2A; --h-lab: #2A3642; --h-lab-ink: #7FA8D1; --h-lab-lit: #3A3D43;
}

.board-wrap { min-height: 240px; }
.stage { padding: 10px; }

/* ---------- 取り札（下の句をひらがなで3行。紙の地に、裏の緑の和紙が縁に見える作り） ---------- */
.fuda {
  appearance: none; font: inherit; position: relative; container-type: inline-size; aspect-ratio: 52 / 73; width: 100%;
  padding: 0; border: 0; border-radius: 4px; cursor: pointer; touch-action: manipulation; background: var(--h-green);
  box-shadow: inset 0 0 0 1px var(--h-green-d); filter: var(--shadow-piece); color: var(--h-ink);
  transition: transform var(--dur), filter var(--dur), opacity var(--dur);
}
.fuda .paper {
  position: absolute; inset: 5.5cqw; background: var(--h-paper); border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
}
.fuda .t {
  writing-mode: vertical-rl; font-family: var(--mincho); font-weight: 600; font-size: 19cqw; line-height: 1.32; letter-spacing: .02em;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
}
.fuda .t span { display: block; }
.fuda .t span:nth-child(2) { padding-top: .5em; }
.fuda .t span:nth-child(3) { padding-top: 1em; }
.fuda .no { position: absolute; left: 6cqw; bottom: 5cqw; font-size: max(12px, 11cqw); font-weight: 700; line-height: 1; color: var(--h-sub); font-family: var(--font); }
.fuda:hover:not([aria-disabled="true"]) { transform: translateY(-2px); filter: var(--shadow-lift); }
.fuda:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
.fuda[aria-disabled="true"] { cursor: default; }
.fuda .mk { position: absolute; top: 3cqw; right: 3cqw; min-width: 26px; height: 26px; border-radius: 13px; display: none; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; font-family: var(--font); padding: 0 4px; }
.fuda.hand-cpu .mk { display: inline-flex; background: var(--h-cpu); }
.fuda.hand-you .mk { display: inline-flex; background: var(--h-you); }
.fuda.ote { animation: shake .4s ease-out; }
.fuda.ote .paper { background: #FBE3DF; }
.fuda.right .paper { box-shadow: inset 0 0 0 3px var(--h-ok); }
.fuda.hintglow .paper { box-shadow: inset 0 0 0 4px var(--h-gold); animation: glow 1.1s ease-in-out infinite alternate; }
@keyframes glow { from { background: var(--h-paper); } to { background: #FFF1CF; } }
.fuda.gone { visibility: hidden; }
@keyframes shake { 20% { transform: translateX(-7px) rotate(-2deg); } 45% { transform: translateX(6px) rotate(2deg); } 70% { transform: translateX(-3px); } 100% { transform: none; } }

/* ---------- かるた取り ---------- */
.reader {
  background: var(--h-paper); color: var(--h-ink); border: 1px solid #D9CFB6; border-radius: var(--radius);
  padding: 8px 14px; min-height: 104px; font-family: var(--mincho); text-align: left;
}
.reader p { margin: 0; }
.reader .r-kami, .reader .r-shimo { font-size: clamp(18px, 4.6vw, 27px); font-weight: 600; line-height: 1.55; min-height: 1.55em; letter-spacing: .06em; overflow-wrap: anywhere; }
.reader .r-shimo { padding-left: 1.5em; }
.reader .r-note { font-family: var(--font); font-size: 15px; color: var(--h-sub); min-height: 1.6em; line-height: 1.6; }
.reader .kim { color: var(--h-kim); background: var(--h-kim-bg); border-radius: 3px; }
.reader .ghost { color: transparent; }
.reader .caret { display: inline-block; width: .5em; border-bottom: 3px solid var(--h-gold); margin-left: 2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.tatami {
  margin-top: 8px; border-radius: var(--radius); padding: 10px; background: #A7A26A url(assets/tatami.webp) repeat; background-size: 256px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.field-grid { display: grid; gap: 8px; grid-template-columns: repeat(6, 1fr); max-width: 620px; margin: 0 auto; }
.field-grid.n8 { grid-template-columns: repeat(4, 1fr); max-width: 440px; }
.field-grid.n20 { grid-template-columns: repeat(5, 1fr); max-width: 540px; }
.field-grid .slot { position: relative; }

.piles { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; align-items: stretch; }
.pile { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius); border: 2px solid var(--line); background: var(--surface); min-height: 44px; font-weight: 700; }
.pile b { font-size: 22px; min-width: 1.2em; text-align: right; }
.pile .unit { font-size: 14px; color: var(--ink-sub); }
.pile.you { border-color: var(--h-you); }
.pile.you .mark { color: var(--h-you); }
.pile.cpu { border-color: var(--h-cpu); }
.pile.cpu .mark { color: var(--h-cpu); }
.pile.azuke { border-style: dashed; color: var(--ink-sub); }
.pile.bump { animation: bump .35s ease-out; }
@keyframes bump { 40% { transform: scale(1.12); } }

/* 札が取った人の所へ飛ぶ（複製を重ねて動かす） */
.fly { position: fixed; z-index: 30; pointer-events: none; transition: transform .45s cubic-bezier(.3,.7,.3,1), opacity .45s; }

/* 取ったあとの歌 */
.taken-poem {
  margin: 10px 0 0; background: var(--h-card); color: var(--h-card-ink); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; line-height: 1.9; font-size: 16px;
}
.taken-poem p { margin: 0 0 4px; }
.taken-poem .who { font-weight: 700; }
.taken-poem .who.you { color: var(--h-you); }
.taken-poem .who.cpu { color: var(--h-cpu); }
.taken-poem rt, .explain rt { font-size: 10px; color: var(--h-card-sub); }

/* ---------- 4択 ---------- */
.yomi {
  background: var(--h-paper); color: var(--h-ink); border: 1px solid #D9CFB6; border-radius: var(--radius);
  padding: 8px 14px 12px; text-align: center; min-height: 170px; display: flex; flex-direction: column; align-items: center;
}
.prog { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 18px; margin-bottom: 2px; }
.prog i {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C9C4B8; background: var(--h-paper); font-style: normal;
  font-size: 14px; line-height: 1; font-weight: 700; color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.prog i.now { border-color: #2F5D8A; box-shadow: 0 0 0 2px var(--h-paper), 0 0 0 4px #2F5D8A; }
.prog i.ok { background: #2E7D4F; border-color: #2E7D4F; }
.prog i.ng { background: #B23A3A; border-color: #B23A3A; }
.prog i.ok::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.prog i.ng::after { content: '×'; }
.ask { margin: 4px 0 0; font-size: 16px; font-weight: 700; color: var(--h-sub); line-height: 1.9; }
.ask .kind { display: inline-block; font-size: 14px; border-radius: 999px; padding: 0 10px; margin-right: 6px; line-height: 22px; color: #fff; background: #2F5D8A; }
.ask .kind.t-kim { background: #9A3B6A; }
.ask rt { font-size: 10px; }
.ask .kind rt { color: #fff; }
.q-main { margin: 6px 0 2px; font-family: var(--mincho); }
.q-main.pop { animation: pop-in .22s ease-out; }
.q-main .kami { font-size: clamp(21px, 5.6vw, 30px); font-weight: 600; line-height: 2.1; letter-spacing: .04em; }
.q-main .kami rt { font-size: 11px; font-weight: 400; color: var(--h-sub); letter-spacing: 0; }
.q-main .kim-big { font-size: clamp(40px, 12vw, 64px); font-weight: 700; color: var(--h-kim); letter-spacing: .12em; line-height: 1.3; }
.q-main .kim-len { font-family: var(--font); font-size: 15px; color: var(--h-sub); }
.verdict { margin: 4px 0 0; font-size: 20px; font-weight: 700; }
.verdict.ok { color: #2E7D4F; }
.verdict.ng { color: #B23A3A; }
.verdict .mark { display: inline-block; width: 1.4em; height: 1.4em; line-height: 1.4em; border-radius: 50%; color: #fff; margin-right: 6px; font-size: .85em; }
.verdict.ok .mark { background: #2E7D4F; }
.verdict.ng .mark { background: #B23A3A; }
@keyframes pop-in { from { transform: scale(.95); opacity: .3; } to { transform: none; opacity: 1; } }

.choices-fuda { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 520px; margin: 12px auto 0; padding: 10px; border-radius: var(--radius); background: #A7A26A url(assets/tatami.webp) repeat; background-size: 256px; }
.choice-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.choice-wrap .num { align-self: center; width: 26px; height: 26px; border-radius: 50%; background: var(--h-paper); color: #2F5D8A; border: 2px solid #2F5D8A; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.choice-wrap.ok .num { background: #2E7D4F; border-color: #2E7D4F; color: #fff; }
.choice-wrap.ng .num { background: #B23A3A; border-color: #B23A3A; color: #fff; }
.choice-wrap.ng .fuda .paper { background: #FBE3DF; }
.choice-wrap.ok .fuda .paper, .choice-wrap.show .fuda .paper { box-shadow: inset 0 0 0 4px #2E7D4F; }
.choice-wrap.dim .fuda { opacity: .55; }
.choice-wrap .sub { font-size: 14px; line-height: 1.5; color: #FFF8EA; text-align: center; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.7); min-height: 1.5em; }

.next-row { max-width: 600px; margin: 10px auto 0; }
.btn.next { width: 100%; min-height: 52px; font-size: 19px; }

.explain {
  margin: 10px auto 0; max-width: 600px; border-radius: var(--radius); padding: 10px 14px;
  background: var(--h-card); border: 2px solid var(--line); color: var(--h-card-ink); font-size: 16px; line-height: 1.9;
}
.explain p, .taken-poem p { margin: 0 0 6px; }
.explain p:last-child, .taken-poem p:last-child { margin-bottom: 0; }
.explain .poem, .taken-poem .poem { font-family: var(--mincho); font-size: 19px; font-weight: 600; line-height: 2; }
.explain .row, .taken-poem .row { display: flex; gap: 8px; align-items: baseline; }
.explain .lab, .taken-poem .lab { flex: none; font-size: 14px; font-weight: 700; border-radius: 999px; padding: 0 8px; line-height: 22px; background: var(--h-lab); color: var(--h-lab-ink); }
.explain .lab rt, .taken-poem .lab rt { color: inherit; }
.explain .lab.lit, .taken-poem .lab.lit { background: var(--h-lab-lit); color: var(--h-card-sub); }
.explain .kimtxt, .taken-poem .kimtxt { color: var(--h-kim); font-weight: 700; }
.explain .sub, .taken-poem .sub { font-size: 14px; color: var(--h-card-sub); }

/* 読み上げのボタン */
.speak {
  appearance: none; font: inherit; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  min-height: 36px; padding: 0 12px; border-radius: 999px; border: 2px solid var(--accent); background: var(--surface); color: var(--accent); cursor: pointer; margin-left: 6px;
}
.speak:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
.speak rt { font-size: 10px; color: inherit; }

.linkbtn { display: inline-flex; align-items: center; text-decoration: none; }
#furi-btn[aria-pressed="false"] { text-decoration: line-through; text-decoration-thickness: 2px; }
.turnbar .status { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.tag { display: inline-block; white-space: nowrap; font-size: 14px; font-weight: 700; padding: 0 8px; border-radius: 999px; border: 1.5px solid currentColor; margin-left: 6px; color: var(--accent); }
.tag.retry { color: var(--ng); }
.select {
  font: inherit; font-size: 17px; min-height: var(--tap); min-width: 14em; max-width: 100%; padding: 0 10px; border-radius: var(--radius);
  border: 2px solid var(--line-strong); background: var(--surface); color: var(--ink);
}
.select:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }

/* ---------- 結果 ---------- */
.result-box { position: static; margin: 0 auto; max-width: 600px; }
.result-box .big { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
.result-box .list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; margin: 6px 0 10px; text-align: left; }
.result-box .list span { border-left: 4px solid var(--ng); background: var(--surface); border-radius: 4px; padding: 4px 10px; line-height: 1.7; font-size: 14px; }
.result-box .list span b { display: block; font-size: 16px; }
.result-box .list rt { font-size: 10px; }
.result-box .stats { display: inline-grid; grid-template-columns: auto auto; gap: 2px 16px; text-align: left; margin: 0 0 10px; }
.callout { z-index: 5; top: 44%; }

/* ---------- 解説 ---------- */
.howto img.narrow { max-width: 560px; }

@media (max-width: 480px) {
  .stage { padding: 6px; margin-left: -4px; margin-right: -4px; }
  .field-grid, .field-grid.n20 { gap: 6px; grid-template-columns: repeat(5, 1fr); }
  .field-grid:not(.n8):not(.n20) { grid-template-columns: repeat(4, 1fr); }
  .tatami { padding: 6px; }
  .reader { padding: 6px 10px; min-height: 96px; }
  .choices-fuda { gap: 6px; padding: 6px; }
  .pile { padding: 2px 8px; }
  .pile b { font-size: 20px; }
  .controls .btn.icon { padding: 0 9px; }
  .explain, .taken-poem { padding: 8px 10px; font-size: 15px; }
  .explain .poem, .taken-poem .poem { font-size: 17px; }
  .select { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fuda.ote, .q-main.pop, .pile.bump, .reader .caret, .fuda.hintglow .paper { animation: none; }
  .fly { transition: none; }
}
.speak span { white-space: nowrap; line-height: 1.9; }
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 2; --tb-st-lines: 2.5; --tb-rt: 11px; --tb-st-rt: 11px; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 2; --tb-st-lines: 2.5; } }
@media (min-width: 641px) { .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */