/* ===========================
   暗記カード — ../style.css・../play.css の上に重ねる
   紙は A4 たて 210×297mm。カードは mm で絶対位置（anki.js の LAYOUTS）。ダークモードでも紙とカードは白地
   =========================== */
.crumb { font-size: 0.78rem; }
.ak-input { border: 1px solid var(--border); }
.ak-input legend { font-weight: 700; color: var(--accent); font-size: 0.95rem; padding: 0 0.2rem; }
.ak-input textarea { width: 100%; font-size: 1rem; min-height: 8.5rem; font-family: inherit; line-height: 1.5; }
.ak-add { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.4rem; margin-top: 0.3rem; }
.ak-add input { min-width: 0; min-height: 44px; }
.ak-add .btn { min-height: 44px; }
.ak-shape { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.4rem; }
.ak-shape .seg label { min-height: 40px; }
.ak-redopt { min-height: 40px; display: inline-flex; align-items: center; gap: 0.3rem; }
.ak-empty { color: var(--muted); font-size: 0.9rem; text-align: center; padding: 2rem 0; }
#sec-preview { margin-top: 0; }

/* ---------- 紙 ---------- */
.sheet.ak-page { position: relative; padding: 0; display: block; }
.ak-cut { position: absolute; left: 0; top: 0; width: 210mm; height: 297mm; }
.ak-cut line { stroke: #b0b0b0; stroke-width: 0.2; stroke-dasharray: 1.2 1; }
.ak-card { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.ak-text { line-height: 1.3; overflow-wrap: anywhere; word-break: normal; color: #111; max-width: 100%; }
.ak-no { position: absolute; left: 2mm; top: 1.5mm; font-size: 6.5pt; color: #8a8a8a; line-height: 1; font-variant-numeric: tabular-nums; }
.ak-a4half .ak-no { left: 6mm; top: 5mm; font-size: 9pt; }
.ak-red-wrap { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; width: 100%; height: 100%; gap: 2mm; }
.ak-red-wrap .ak-q { border-bottom: 0.2mm dotted #bbb; padding-bottom: 1mm; }
/* 赤シートで消える赤（anki.js の RED と同じ #e60012）。太さはふつう（太字はにじんで透けやすい） */
.ak-text.ak-a { color: #e60012; }
.ak-credit { position: absolute; left: 0; right: 0; bottom: 3mm; text-align: center; font-size: 7pt; color: #777; }
.ak-title { position: absolute; left: 14mm; right: 14mm; top: 3.5mm; font-size: 8pt; color: #555; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-a4half .ak-title { left: 16mm; }

/* ---------- 画面でめくる ---------- */
body.ak-playing main > :not(.screen), body.ak-playing .app-footer { display: none !important; }
body.ak-playing .app-main { max-width: 560px; }
.ak-play .play-bar { gap: 0.4rem; }
.ak-opts { display: inline-flex; gap: 0.3rem; }
.ak-big {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem;
  width: 100%; min-height: min(56dvh, 26rem); margin: 0.8rem 0 0.2rem; padding: 2.2rem 1rem 1.2rem;
  background: #fff; color: #111; border: 2px solid var(--border); border-radius: 14px; box-shadow: 0 3px 0 var(--border);
  font-family: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ak-big.back { background: #fff8e8; }
.ak-big:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ak-face { position: absolute; left: 0.8rem; top: 0.6rem; font-size: 0.8rem; color: #6e604f; }
.ak-big-text, .ak-big-ans { font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; white-space: pre-wrap; }
.ak-big[data-len="s"] .ak-big-text, .ak-big[data-len="s"] .ak-big-ans { font-size: clamp(1.8rem, 9vw, 2.8rem); }
.ak-big[data-len="m"] .ak-big-text, .ak-big[data-len="m"] .ak-big-ans { font-size: clamp(1.3rem, 6vw, 1.9rem); }
.ak-big[data-len="l"] .ak-big-text, .ak-big[data-len="l"] .ak-big-ans { font-size: 1.1rem; font-weight: 600; }
.ak-big-ans { color: #e60012; position: relative; padding: 0.2rem 0.6rem; }
/* 画面の赤シート: 赤い板を darken で重ねる。白は赤に、赤い字は赤のまま（板と同じ色で見えなくなる）、黒は黒のまま */
.ak-big.red { display: grid; grid-template-rows: 1fr 1fr; align-items: center; justify-items: center; padding-top: 1.6rem; }
.ak-big.red .ak-big-text { align-self: end; }
.ak-big.red .ak-big-ans { align-self: center; }
.ak-sheet {
  position: absolute; left: 5%; right: 5%; top: calc(50% + 0.4rem); bottom: 0.7rem;
  background: #e60012; mix-blend-mode: darken; border-radius: 8px; pointer-events: none;
}
.ak-judge { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: auto; padding-top: 0.6rem; }
.ak-judge .btn { width: 100%; }
.center { text-align: center; }