/* 時事英語ジュニア — 授業モード（/classroom/）。ページの部分は site.css の太い線と影に合わせる。
   ステージ（.cr-stage）はプロジェクター・電子黒板向け：大きな文字・はっきりした配色・白／黒の2つの画面 */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.cr-lock, html.cr-lock body { overflow: hidden; }
.cr kbd, .cr-stage kbd, .cr-dlg kbd { display: inline-block; min-width: 1.7em; padding: 0 0.45em; border: 1.5px solid currentColor; border-radius: 6px; box-shadow: 0 2px 0 currentColor; font-family: var(--f-ja); font-weight: 700; font-size: 0.82em; line-height: 1.6; text-align: center; white-space: nowrap; }

/* ---------- ページ：はじめの帯 ---------- */
.cr-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 36px; align-items: center; background: #fff; border: var(--bw) solid var(--ink); border-radius: 20px; box-shadow: 6px 6px 0 var(--ink); padding: 34px 36px; margin: 6px 0 34px; position: relative; overflow: hidden; }
.cr-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(30, 167, 225, 0.16) 1.4px, transparent 1.8px) 0 0 / 22px 22px; mask-image: linear-gradient(100deg, transparent 40%, #000 75%); pointer-events: none; }
.cr-hero > * { position: relative; }
.cr-k { display: inline-flex; align-items: center; gap: 0; margin: 0 0 12px; border: var(--bw) solid var(--ink); border-radius: 999px; overflow: hidden; font-weight: 900; font-size: 12.5px; line-height: 1; }
.cr-k span { background: var(--ink); color: #fff; font-family: var(--f-en); font-weight: 800; letter-spacing: 0.16em; padding: 6px 10px; }
.cr-k { padding-right: 10px; background: var(--yellow); }
.cr-k span { margin-right: 8px; }
.cr-h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(38px, 5.2vw, 60px); line-height: 1.1; margin: 0 0 14px; display: flex; flex-direction: column; letter-spacing: 0.01em; }
.cr-h1 small { font-family: var(--f-ja); font-weight: 900; font-size: clamp(16px, 1.9vw, 21px); color: var(--sky-dd); margin-top: 10px; letter-spacing: 0.02em; }
.cr-lead { font-size: 15px; line-height: 1.85; margin: 0 0 18px; max-width: 560px; }
.cr-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; }
.cr-btn-l { font-size: 16px; padding: 11px 24px; }
.cr-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-weight: 900; font-size: 13px; }
.cr-facts li { display: flex; align-items: baseline; gap: 4px; }
.cr-facts b { font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--sky-d); }
.cr-facts small { font-size: 11px; color: var(--ink2); margin-left: 2px; }
/* 黒板（電子黒板）の絵 */
.cr-hero-v { padding: 4px 8px 0 0; }
.cr-scr { aspect-ratio: 16 / 10.4; background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 8px 8px 0 var(--sky); display: flex; flex-direction: column; overflow: hidden; font-family: var(--f-en); transform: rotate(1.2deg); }
.cr-scr-top { background: var(--ink); color: #fff; display: flex; align-items: center; gap: 6px; padding: 7px 12px; font-weight: 700; font-size: 12px; }
.cr-scr-top i { width: 9px; height: 9px; border-radius: 50%; background: var(--sky); }
.cr-scr-top i + i { background: #fff; opacity: 0.6; }
.cr-scr-top span { margin-left: 6px; letter-spacing: 0.08em; }
.cr-scr-top b { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--sky); display: grid; place-items: center; font-size: 13px; }
.cr-scr-q { flex: 1; display: grid; place-items: center; margin: 0; padding: 8px 16px; font-weight: 800; font-size: clamp(15px, 1.9vw, 24px); text-align: center; line-height: 1.3; }
.cr-scr-a { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 0 12px; }
.cr-scr-a span { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; border: 2px solid var(--ink); color: #fff; font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); opacity: 0.4; }
.cr-scr-a i { flex: none; width: 13px; height: 13px; background: currentColor; }
.cr-scr-a .t0 { background: #e5212f; } .cr-scr-a .t0 i { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cr-scr-a .t1 { background: #0b7cc1; } .cr-scr-a .t1 i { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.cr-scr-a .t2 { background: var(--yellow); color: var(--ink); } .cr-scr-a .t2 i { border-radius: 50%; }
.cr-scr-a .t3 { background: var(--green); }
.cr-scr-a .ok { opacity: 1; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.cr-scr-a .ok::after { content: '✓'; margin-left: auto; font-size: 15px; }
@media (max-width: 480px) { .cr-scr { aspect-ratio: auto; } .cr-scr-a span { font-size: 11px; padding: 6px 7px; gap: 5px; } .cr-scr-a i { width: 10px; height: 10px; } .cr-scr-a .ok::after { font-size: 12px; } .cr-scr-q { font-size: 14px; padding: 6px 10px; } }
@media (max-width: 400px) { .cr-scr-a { grid-template-columns: minmax(0, 1fr); gap: 5px; } .cr-scr-a span { padding: 5px 8px; } }
.cr-scr-tm { display: flex; gap: 6px; padding: 10px 12px 12px; flex-wrap: wrap; }
.cr-scr-tm span { font-family: var(--f-ja); font-weight: 900; font-size: 11.5px; border: 2px solid var(--ink); border-left: 8px solid var(--c); border-radius: 8px; padding: 1px 8px; }
.cr-scr-tm b { font-family: var(--f-en); margin-left: 4px; }
.cr-stand { height: 30px; margin: 0 26%; background: linear-gradient(var(--ink), var(--ink)) 18% 0 / 4px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) 82% 0 / 4px 100% no-repeat; }

/* ---------- ページ：できること ---------- */
.cr-sec { margin: 0 0 36px; }
.cr-sec-r { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ink2); }
.cr-acts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.cr-act { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); padding: 14px 12px 14px; transition: transform 0.15s, box-shadow 0.15s; }
.cr-act:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.cr-act:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.cr-act-ic { display: block; width: 46px; height: 46px; margin-bottom: 8px; }
.cr-act-ic svg, .cr-pi svg { width: 100%; height: 100%; }
.cr-act-ic .k, .cr-pi .k { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill-opacity: 1; }
.cr-act-ic path.k:not([fill]), .cr-pi path.k:not([fill]) { fill: none; }
.cr-act-ic .f, .cr-pi .f { fill: var(--sky); }
.cr-act-ic .s, .cr-pi .s { fill: none; }
.cr-act-en { font-family: var(--f-en); font-weight: 800; font-size: 10.5px; letter-spacing: 0.14em; color: var(--sky-d); }
.cr-act b { font-weight: 900; font-size: 15px; line-height: 1.35; word-break: auto-phrase; }
.cr-act small { font-size: 12px; line-height: 1.6; color: var(--ink2); margin-top: 4px; word-break: auto-phrase; }
.cr-act-now { position: absolute; right: 8px; top: 10px; background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 999px; font-style: normal; font-weight: 900; font-size: 10.5px; padding: 0 7px; line-height: 1.7; }

/* ---------- ページ：記事をえらぶ ---------- */
.cr-lv { display: inline-flex; border: var(--bw) solid var(--ink); border-radius: 999px; overflow: hidden; background: #fff; box-shadow: 2px 2px 0 var(--ink); flex: none; }
.cr-lv button { border: 0; background: none; padding: 6px 16px; font-weight: 900; font-size: 14px; white-space: nowrap; }
.cr-lv button + button { border-left: var(--bw) solid var(--ink); }
.cr-lv button[aria-pressed='true'] { background: var(--sky); color: #fff; }
.cr-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 4px 0 10px; }
.cr-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 520px; }
.cr-chips button { border: var(--bw) solid var(--ink); border-radius: 999px; background: #fff; padding: 3px 13px; font-weight: 900; font-size: 13.5px; white-space: nowrap; transition: background 0.12s; }
.cr-chips button:hover { background: var(--sky-l); }
.cr-chips button[aria-pressed='true'] { background: var(--c, var(--ink)); color: #fff; }
.cr-chips .cr-chip-ex { background: var(--ink); color: var(--yellow); }
.cr-chips .cr-chip-ex[aria-pressed='true'] { background: var(--yellow); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.cr-find { flex: 0 1 340px; display: block; }
.cr-find input { width: 100%; border: var(--bw) solid var(--ink); border-radius: 999px; padding: 7px 16px; font: inherit; font-weight: 700; font-size: 14px; background: #fff; }
.cr-count { margin: 0 0 10px; font-size: 12.5px; font-weight: 900; color: var(--ink2); }
.cr-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cr-wait { grid-column: 1 / -1; padding: 30px; text-align: center; font-weight: 900; color: var(--ink2); background: #fff; border: 2px dashed var(--line); border-radius: var(--r); }
.cr-card { width: 100%; height: 100%; display: flex; flex-direction: column; text-align: left; padding: 0; background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; transition: transform 0.15s, box-shadow 0.15s; }
.cr-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.cr-card.sel { box-shadow: 0 0 0 3px var(--sky), 6px 6px 0 var(--ink); }
.cr-card-img { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--sky-l); border-bottom: var(--bw) solid var(--ink); overflow: hidden; }
.cr-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.cr-card:hover .cr-card-img img { transform: scale(1.04); }
.cr-exb { position: absolute; left: 8px; top: 8px; background: var(--ink); color: var(--yellow); font-style: normal; font-weight: 900; font-size: 11.5px; padding: 2px 8px; border-radius: 6px; border: 1.5px solid var(--yellow); line-height: 1.5; white-space: nowrap; }
.cr-exb.s { position: static; font-size: 11px; padding: 1px 7px; }
.cr-card-b { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; flex: 1; }
.cr-card-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 700; color: var(--ink2); }
.cr-card-t { font-weight: 900; font-size: 15px; line-height: 1.5; word-break: auto-phrase; }
.cr-card-en { font-family: var(--f-en); font-size: 12.5px; color: var(--sky-dd); font-weight: 600; line-height: 1.4; margin: 0; }
.cr-card-n { margin-top: auto; padding-top: 6px; font-size: 11.5px; font-weight: 900; color: var(--ink2); }
.cr-more-w { text-align: center; margin: 18px 0 0; }

/* ---------- ページ：授業の流れ・キー ---------- */
.cr-two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.cr-panel { background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); padding: 18px 20px 20px; }
.cr-ph { margin: 0 0 12px; font-family: var(--f-display); font-weight: 400; font-size: 19px; display: flex; flex-direction: column; line-height: 1.3; }
.cr-ph span { font-family: var(--f-en); font-weight: 800; font-size: 11px; letter-spacing: 0.16em; color: var(--sky-d); }
.cr-plans { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cr-plans > li > b { display: inline-block; font-weight: 900; font-size: 14px; background: var(--ink); color: #fff; border-radius: 6px; padding: 1px 9px; margin-bottom: 6px; }
.cr-plans ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cr-plans ol li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; background: var(--sky-ll); border: 1.5px solid var(--ink); border-radius: 999px; padding: 3px 11px 3px 5px; }
.cr-plans ol li + li::before { content: '→'; margin: 0 4px 0 -2px; order: -1; font-weight: 900; color: var(--sky-d); display: none; }
.cr-pi { display: inline-block; width: 24px; height: 24px; flex: none; }
.cr-keys { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.cr-keys div { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.cr-keys dt { flex: none; min-width: 64px; }
.cr-keys dd { margin: 0; line-height: 1.45; }
.cr-tip { margin: 14px 0 0; font-size: 12.5px; color: var(--ink2); font-weight: 700; }
.cr-foot { font-size: 12px; color: var(--ink2); margin: 0 0 30px; }

/* ---------- 記事を選んだあとの「何をしますか？」 ---------- */
.cr-dlg { position: fixed; inset: 0; z-index: 1000; background: rgba(5, 20, 35, 0.6); display: grid; place-items: center; padding: 16px; animation: cr-fade 0.18s ease-out; }
.cr-dlg-in { position: relative; width: 100%; max-width: 820px; max-height: calc(100dvh - 32px); overflow-y: auto; background: #fff; border: var(--bw) solid var(--ink); border-radius: 20px; box-shadow: 7px 7px 0 var(--sky); padding: 22px 24px 18px; animation: cr-up 0.25s cubic-bezier(0.2, 1.2, 0.4, 1); }
.cr-dlg-x { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border-radius: 50%; border: var(--bw) solid var(--ink); background: #fff; display: grid; place-items: center; z-index: 1; }
.cr-dlg-x:hover { background: var(--sky-l); }
.cr-dlg-a { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; padding-right: 36px; }
.cr-dlg-img { display: block; aspect-ratio: 3 / 2; border: var(--bw) solid var(--ink); border-radius: 12px; overflow: hidden; background: var(--sky-l); }
.cr-dlg-img img { width: 100%; height: 100%; object-fit: cover; }
.cr-dlg-a h2 { margin: 6px 0 4px; font-size: 20px; line-height: 1.45; font-weight: 900; word-break: auto-phrase; }
.cr-dlg-lv { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; font-size: 12.5px; font-weight: 900; color: var(--ink2); }
.cr-dlg-q { font-family: var(--f-display); font-size: 18px; margin: 18px 0 10px; }
.cr-dlg-acts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.cr-dlg-act { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; background: #fff; border: var(--bw) solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); padding: 14px 8px 12px; transition: transform 0.12s, box-shadow 0.12s, background 0.12s; }
.cr-dlg-act:hover, .cr-dlg-act:focus-visible { background: var(--sky-l); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.cr-dlg-act .cr-act-ic { margin: 0 0 6px; width: 50px; height: 50px; }
.cr-dlg-act b { font-weight: 900; font-size: 14.5px; line-height: 1.35; word-break: auto-phrase; }
.cr-dlg-act small { font-size: 11.5px; color: var(--ink2); line-height: 1.45; word-break: auto-phrase; }
.cr-dlg-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 16px; padding-top: 12px; border-top: 2px dashed var(--line); font-size: 13px; font-weight: 700; }
.cr-full { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cr-full input { width: 18px; height: 18px; accent-color: var(--sky); }
.cr-dlg-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cr-dlg-tools button { border: 1.5px solid var(--ink); background: var(--yellow); border-radius: 999px; padding: 1px 11px; font-weight: 900; font-size: 12.5px; }
.cr-dlg-f a { margin-left: auto; font-weight: 900; }
@keyframes cr-fade { from { opacity: 0; } }
@keyframes cr-up { from { opacity: 0; transform: translateY(20px) scale(0.97); } }

/* ---------- ページ：タブレット・スマホ ---------- */
@media (max-width: 1099px) {
  .cr-acts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 859px) {
  .cr-hero { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; gap: 22px; }
  .cr-hero-v { max-width: 520px; width: 100%; margin: 0 auto; }
  .cr-two { grid-template-columns: minmax(0, 1fr); }
  .cr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-dlg-acts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .cr-hero { padding: 20px 16px; border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); }
  .cr-h1 { font-size: 40px; }
  .cr-lead { font-size: 14.5px; }
  .cr-cta .btn { flex: 1 1 auto; }
  .cr-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cr-acts > li:last-child { grid-column: 1 / -1; }
  .cr-act { padding: 12px 10px; }
  .cr-act small { font-size: 11.5px; }
  .cr-grid { gap: 10px; }
  .cr-card-b { padding: 8px 9px 10px; }
  .cr-card-t { font-size: 13.5px; }
  .cr-card-en { font-size: 11.5px; }
  .cr-sec .sec-h { flex-wrap: wrap; align-items: center; }
  .cr-sec-r { display: none; }
  .cr-find { flex: 1 1 100%; }
  .cr-keys { grid-template-columns: 1fr; }
  .cr-dlg { padding: 8px; align-items: end; }
  .cr-dlg-in { padding: 16px 14px 14px; border-radius: 18px; max-height: calc(100dvh - 16px); }
  .cr-dlg-a { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding-right: 30px; }
  .cr-dlg-a h2 { font-size: 15.5px; }
  .cr-dlg-a .cr-card-en { display: none; }
  .cr-dlg-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cr-dlg-acts > li:last-child { grid-column: 1 / -1; }
  .cr-dlg-act { flex-direction: row; text-align: left; gap: 10px; padding: 10px; flex-wrap: wrap; }
  .cr-dlg-act .cr-act-ic { width: 36px; height: 36px; margin: 0; }
  .cr-dlg-act b { flex: 1; font-size: 13.5px; }
  .cr-dlg-act small { flex-basis: 100%; }
  .cr-dlg-f a { margin-left: 0; }
}

/* =====================================================================
   ステージ（授業画面）
   ===================================================================== */
.cr-stage { --bg: #fff; --fg: #111; --sub: #4b5966; --pan: #f3fbff; --pan2: #dff1fb; --ln: #111; --shc: #111; --acc: #1ea7e1; --accd: #0b7cc1; --hi: #ffdc3c; --red: #e5212f; --ok: #12a150;
  position: fixed; inset: 0; z-index: 2000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--bg); color: var(--fg); font-family: var(--f-ja); font-weight: 500; line-height: 1.5; -webkit-tap-highlight-color: transparent; }
.cr-stage[data-theme='dark'] { --bg: #0a1017; --fg: #fff; --sub: #a3b4c4; --pan: #121e2a; --pan2: #1b3044; --ln: #d5ecf9; --shc: #1ea7e1; --acc: #22b0ee; --accd: #6fd0ff; }
.cr-stage:fullscreen { width: 100vw; height: 100vh; }
:where(.cr-stage) button { font: inherit; color: inherit; }
.cr-stage :focus-visible { outline: 4px solid var(--hi); outline-offset: 2px; }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ic .fl { fill: currentColor; stroke: none; }

/* 上の帯（形は変えない） */
.st-top { display: flex; align-items: center; gap: 12px; min-width: 0; background: #111; color: #fff; padding: 0 12px 0 14px; height: 56px; border-bottom: 3px solid var(--acc); }
.st-badge { flex: none; display: inline-flex; align-items: center; gap: 7px; font-weight: 900; font-size: 13px; padding: 0 12px 0 0; border-right: 1px solid rgba(255, 255, 255, 0.25); }
.st-badge i { width: 28px; height: 28px; border-radius: 8px; background: var(--acc); border: 2px solid #fff; display: grid; place-items: center; font-family: var(--f-display); font-style: normal; font-size: 16px; transform: rotate(-4deg); }
.st-title { flex: none; font-family: var(--f-display); font-weight: 400; font-size: 19px; white-space: nowrap; }
.st-art { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: #b9d7e8; }
.st-ctl { flex: none; margin-left: auto; display: flex; align-items: center; gap: 6px; }
.st-i { width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.07); color: #fff; display: grid; place-items: center; transition: background 0.12s; }
.st-i:hover { background: var(--acc); border-color: var(--acc); }
.st-i .ic { width: 22px; height: 22px; }
.st-a { font-family: var(--f-en); font-weight: 800; font-size: 17px; line-height: 1; }
.st-a small { font-size: 12px; margin-left: 1px; }
.st-x { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 10px; margin-left: 4px; border-radius: 999px; border: 2px solid #fff; background: #fff; color: #111; font-weight: 900; font-size: 14px; }
.st-x:hover { background: var(--hi); }

.st-main { position: relative; min-height: 0; overflow: hidden; padding: clamp(12px, 2.2vw, 34px) clamp(14px, 3vw, 48px) clamp(10px, 1.6vw, 22px); }
.st-foot { position: relative; display: flex; align-items: center; gap: 16px; padding: 7px 16px 8px; border-top: 2px solid var(--pan2); font-size: 12.5px; color: var(--sub); min-height: 36px; }
.st-prog { position: absolute; left: 0; right: 0; top: -2px; height: 4px; background: transparent; }
.st-prog i { display: block; height: 100%; width: 0; background: var(--acc); transition: width 0.35s ease; }
.st-count { flex: none; font-weight: 900; color: var(--fg); font-family: var(--f-en); }
.st-keys { margin: 0 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; font-weight: 700; }
.st-keys span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.st-keys kbd + kbd { margin-left: -2px; }

/* 操作ボタンの段 */
.st-bar { flex: none; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding-top: clamp(10px, 1.6vh, 18px); }
.st-bar-g { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-bar-o { justify-content: flex-end; }
.sb { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 2px solid var(--ln); border-radius: 999px; background: var(--bg); color: var(--fg); font-weight: 900; font-size: 14px; line-height: 1.2; padding: 8px 15px; box-shadow: 3px 3px 0 var(--shc); text-decoration: none; white-space: nowrap; transition: transform 0.08s, box-shadow 0.08s, background 0.12s; }
.sb:hover { background: var(--pan2); }
.sb:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shc); }
.sb:disabled { opacity: 0.35; pointer-events: none; }
.sb kbd { font-size: 0.74em; opacity: 0.75; margin-left: 2px; }
.sb-p { background: var(--acc); color: #fff; border-color: var(--ln); }
.sb-p:hover { background: var(--accd); }
.cr-stage[data-theme='dark'] .sb-p { color: #04121c; }
.sb-big { font-size: 17px; padding: 11px 24px; }
.sb-big .ic { width: 22px; height: 22px; }
.sb-nav { padding: 8px 14px; }
.sb-next { flex-direction: row-reverse; }
.sb[aria-pressed='true']:not(.sb-t) { background: var(--fg); color: var(--bg); }
.sb-t { padding-left: 10px; box-shadow: none; }
.sw { width: 30px; height: 18px; border-radius: 999px; background: var(--pan2); border: 2px solid var(--ln); position: relative; flex: none; transition: background 0.15s; }
.sw::after { content: ''; position: absolute; left: 1px; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--fg); transition: transform 0.15s; }
.sb-t[aria-pressed='true'] .sw { background: var(--acc); }
.sb-t[aria-pressed='true'] .sw::after { transform: translateX(12px); background: #fff; }
.seg { display: inline-flex; align-items: stretch; border: 2px solid var(--ln); border-radius: 999px; overflow: hidden; background: var(--bg); }
.seg-l { display: flex; align-items: center; padding: 0 6px 0 12px; font-weight: 900; font-size: 12.5px; color: var(--sub); white-space: nowrap; }
.seg button { border: 0; background: none; padding: 7px 12px; font-weight: 900; font-size: 13.5px; white-space: nowrap; }
.seg button + button { border-left: 1.5px solid var(--pan2); }
.seg button:hover { background: var(--pan2); }
.seg button[aria-pressed='true'] { background: var(--fg); color: var(--bg); }

.st-toast { position: absolute; left: 50%; bottom: 60px; transform: translate(-50%, 20px); background: var(--fg); color: var(--bg); font-weight: 900; padding: 10px 22px; border-radius: 999px; opacity: 0; pointer-events: none; transition: 0.22s; z-index: 60; max-width: 90%; text-align: center; }
.st-toast.on { opacity: 1; transform: translate(-50%, 0); }
.st-black { position: absolute; inset: 0; z-index: 80; background: #000; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; }
.st-black span { color: #444; font-size: 13px; font-weight: 700; padding: 18px; }
.st-help { position: absolute; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.6); display: grid; place-items: center; padding: 16px; }
.st-help-in { background: #fff; color: #111; border: 3px solid #111; border-radius: 20px; box-shadow: 8px 8px 0 var(--acc); padding: 22px 26px; width: min(680px, 100%); max-height: 100%; overflow-y: auto; }
.st-help-k { margin: 0; font-family: var(--f-en); font-weight: 800; letter-spacing: 0.16em; font-size: 12px; color: var(--accd); }
.cr-stage[data-theme='dark'] .st-help-k { color: #0b7cc1; }
.st-help-in h2 { margin: 2px 0 12px; font-family: var(--f-display); font-weight: 400; font-size: 22px; }
.st-help-in dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.st-help-in dl div { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; }
.st-help-in dt { flex: none; min-width: 76px; }
.st-help-in dd { margin: 0; }
.st-help-n { font-size: 12.5px; color: #4b5966; font-weight: 700; margin: 14px 0; }
.st-help-in .sb { --bg: #fff; --fg: #111; --ln: #111; --shc: #111; }
.st-conf { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
@keyframes st-in-r { from { opacity: 0; transform: translateX(3.5%); } }
@keyframes st-in-l { from { opacity: 0; transform: translateX(-3.5%); } }
@keyframes st-pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes st-beat { 0% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* ---------- 1) 投影スライド ---------- */
.m-slides .sl { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.sl-c { flex: 1; min-height: 0; display: flex; position: relative; cursor: pointer; user-select: none; -webkit-user-select: none; }
.sl-c > * { flex: 1; min-width: 0; min-height: 0; }
.in-r { animation: st-in-r 0.32s ease-out; }
.in-l { animation: st-in-l 0.32s ease-out; }
.sl-cover { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(16px, 3.2vw, 56px); align-items: center; }
.sl-img { margin: 0; width: 100%; aspect-ratio: 3 / 2; max-height: 100%; border: 3px solid var(--ln); border-radius: 22px; overflow: hidden; box-shadow: 9px 9px 0 var(--acc); background: var(--pan2); }
.sl-img img { width: 100%; height: 100%; object-fit: cover; }
.sl-ct { max-height: 100%; overflow: hidden; display: flex; flex-direction: column; gap: 0.5em; font-size: calc(var(--fs) * clamp(15px, min(1.55vw, 2.9vh), 36px)); }
.sl-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; margin: 0; font-size: 0.72em; font-weight: 900; }
.sl-tags .cat { font-size: 1em; padding: 0.3em 0.55em 0.25em; }
.sl-lv, .sl-ex, .sl-wc { border: 2px solid var(--ln); border-radius: 999px; padding: 0.05em 0.7em; line-height: 1.5; }
.sl-ex { background: #111; color: var(--hi); border-color: #111; }
.sl-wc { font-family: var(--f-en); color: var(--sub); }
.sl-h { margin: 0.1em 0 0; font-family: var(--f-en); font-weight: 800; font-size: 2.15em; line-height: 1.14; letter-spacing: -0.01em; text-wrap: balance; }
.sl-hja { margin: 0; font-weight: 900; font-size: 1em; line-height: 1.55; color: var(--sub); word-break: auto-phrase; }
.sl-hint { margin: 0.6em 0 0; font-size: 0.62em; font-weight: 700; color: var(--sub); }
.sl-s { display: flex; flex-direction: column; min-height: 0; }
.sl-meta { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 clamp(6px, 1.2vh, 16px); font-family: var(--f-en); font-weight: 800; font-size: clamp(12px, 1.05vw, 19px); letter-spacing: 0.12em; color: var(--sub); }
.sl-pn { background: var(--acc); color: #fff; border-radius: 999px; padding: 0.15em 0.9em; }
.cr-stage[data-theme='dark'] .sl-pn { color: #04121c; }
.sl-no { font-size: 1.15em; letter-spacing: 0.04em; }
.sl-box { flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; }
.sl-fit { width: 100%; font-size: calc(var(--fs) * clamp(22px, min(4.25vw, 7.4vh), 124px)); }
.sl-text { margin: 0; font-family: var(--f-en); font-weight: 600; line-height: 1.36; letter-spacing: -0.006em; overflow-wrap: break-word; text-wrap: pretty; transition: color 0.2s; }
.sl-text.para { font-size: 0.74em; line-height: 1.5; }
.sl-text.para .sl-sn:not(.now) { opacity: 0.32; cursor: pointer; }
.sl-text.para .sl-sn:not(.now):hover { opacity: 0.6; }
.sl-text.para .sl-sn.now { background: linear-gradient(transparent 64%, rgba(255, 220, 60, 0.6) 0); }
.cr-stage[data-theme='dark'] .sl-text.para .sl-sn.now { background: linear-gradient(transparent 64%, rgba(30, 167, 225, 0.45) 0); }
.is-play .sl-text:not(.para), .is-play .sl-text .now { color: var(--accd); }
.vw { text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: 0.07em; text-underline-offset: 0.16em; }
.vw.bl { color: transparent; text-decoration: none; background: var(--pan2); border-bottom: 0.08em solid var(--acc); border-radius: 0.1em; cursor: pointer; }
.vw.bl.open { color: var(--accd); background: none; }
.sl-ja { margin: 0.55em 0 0; font-size: 0.46em; font-weight: 700; line-height: 1.65; color: var(--sub); word-break: auto-phrase; }
.sl-voc { list-style: none; margin: 0.7em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35em; font-size: 0.4em; }
.sl-voc li { border: 2px solid var(--ln); border-radius: 999px; padding: 0.12em 0.8em; background: var(--pan); font-weight: 900; }
.sl-voc b { font-family: var(--f-en); font-weight: 800; color: var(--accd); margin-right: 0.5em; }
.sl-k { flex: none; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2em 0.6em; margin: 0 0 clamp(8px, 1.6vh, 22px); font-family: var(--f-display); font-weight: 400; font-size: clamp(20px, 2.3vw, 42px); line-height: 1.2; }
.sl-k span { font-family: var(--f-en); font-weight: 800; font-size: 0.5em; letter-spacing: 0.16em; color: #fff; background: var(--acc); padding: 0.2em 0.7em; border-radius: 999px; }
.sl-k small { font-family: var(--f-ja); font-size: 0.45em; font-weight: 700; color: var(--sub); }
.sl-wl, .sl-th { display: flex; flex-direction: column; min-height: 0; overflow: hidden; cursor: default; }
.sl-vgrid { list-style: none; margin: 0; padding: 4px 8px 10px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6em; margin-block: auto; font-size: calc(var(--fs) * clamp(14px, min(1.9vw, 3.5vh), 42px)); }
.sl-vcard { position: relative; display: flex; flex-direction: column; gap: 0.1em; border: 2px solid var(--ln); border-radius: 14px; padding: 0.55em 0.8em 0.6em; background: var(--bg); box-shadow: 4px 4px 0 var(--shc); cursor: pointer; }
.sl-vcard b { font-family: var(--f-en); font-weight: 800; font-size: 1.45em; line-height: 1.2; padding-right: 1.4em; overflow-wrap: anywhere; }
.sl-vpos { font-size: 0.66em; font-weight: 900; color: var(--sub); }
.sl-vja { font-weight: 900; font-size: 0.9em; line-height: 1.4; visibility: hidden; word-break: auto-phrase; }
.sl-vcard.open .sl-vja { visibility: visible; }
.sl-vcard:not(.open)::after { content: 'クリックで意味'; position: absolute; left: 0.8em; bottom: 0.55em; font-size: 0.62em; font-weight: 700; color: var(--sub); opacity: 0.7; }
.sl-say { position: absolute; right: 0.4em; top: 0.4em; width: 1.9em; height: 1.9em; border-radius: 50%; border: 2px solid var(--ln); background: var(--pan); display: grid; place-items: center; }
.sl-say .ic { width: 1.05em; height: 1.05em; }
.sl-th ol { list-style: none; counter-reset: th; margin: auto 0; padding: 0; display: flex; flex-direction: column; gap: 0.7em; flex: none; font-size: calc(var(--fs) * clamp(18px, min(2.6vw, 4.8vh), 60px)); }
.sl-th li { counter-increment: th; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 0.5em; font-family: var(--f-en); font-weight: 600; line-height: 1.35; }
.sl-th li::before { content: counter(th); grid-row: span 2; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--hi); color: #111; border: 2px solid var(--ln); display: grid; place-items: center; font-weight: 800; font-size: 0.8em; margin-top: 0.1em; }
.sl-th li small { font-family: var(--f-ja); font-weight: 700; font-size: 0.5em; color: var(--sub); margin-top: 0.3em; }
.sl-th > div:last-child { margin-top: auto; }
.sl-thb { flex: none; display: flex; flex-wrap: wrap; gap: 10px; padding-top: 14px; margin-top: auto; }

/* ---------- 2) みんなでクイズ ---------- */
.m-quiz .qz { position: relative; height: 100%; min-height: 0; display: flex; flex-direction: column; }
.qz-k { margin: 0; font-family: var(--f-en); font-weight: 800; letter-spacing: 0.18em; font-size: clamp(11px, 1vw, 15px); color: var(--accd); }
.qz-setup { width: 100%; max-width: 1180px; margin: 0 auto; height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: clamp(12px, 2vh, 22px); padding: 2px 6px 6px 2px; }
.qz-hero { display: flex; align-items: center; gap: 20px; }
.qz-hero h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 50px); line-height: 1.15; }
.qz-sub { margin: 2px 0 0; font-weight: 900; color: var(--sub); font-size: 14px; }
.qz-logo { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: clamp(64px, 7vw, 96px); }
.qz-logo i { aspect-ratio: 1; border-radius: 10px; border: 2.5px solid #111; display: grid; place-items: center; }
.qz-logo svg { width: 62%; fill: #fff; }
.c0 { --tc: #e5212f; } .c1 { --tc: #0b7cc1; } .c2 { --tc: #ffdc3c; } .c3 { --tc: #12a150; } .t0 { --tc: #0b7cc1; } .t1 { --tc: #e5212f; }
.qz-logo i, .qz-chk-s i { background: var(--tc); }
.qz-logo .c2 svg, .qz-chk-s .c2 svg { fill: #111; }
.qz-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.qz-box { border: 2px solid var(--ln); border-radius: 18px; background: var(--pan); padding: 16px 18px 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.qz-box h3 { margin: 0; font-size: 17px; font-weight: 900; }
.qz-chks { display: flex; flex-wrap: wrap; gap: 10px; }
.qz-chk { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; gap: 2px 10px; border: 2px solid var(--ln); border-radius: 14px; background: var(--bg); padding: 10px 16px 10px 12px; cursor: pointer; box-shadow: 3px 3px 0 var(--shc); }
.qz-chk input { position: absolute; opacity: 0; pointer-events: none; }
.qz-chk:has(input:not(:checked)) { opacity: 0.45; box-shadow: none; }
.qz-chk:has(input:focus-visible) { outline: 4px solid var(--hi); }
.qz-chk-s { grid-row: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 40px; }
.qz-chk-s.tf { grid-template-columns: 1fr 1fr; }
.qz-chk-s i { aspect-ratio: 1; border-radius: 4px; display: grid; place-items: center; border: 1.5px solid #111; }
.qz-chk-s svg { width: 70%; fill: #fff; stroke: #fff; }
.qz-chk b { font-weight: 900; font-size: 16px; }
.qz-chk small { font-weight: 900; color: var(--sub); }
.qz-togs { display: flex; flex-wrap: wrap; gap: 8px; }
.qz-names { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.qz-names li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.qz-tn { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #fff; border: 2px solid var(--ln); display: grid; place-items: center; font-family: var(--f-en); font-weight: 800; }
.qz-names input { flex: 1; min-width: 0; border: 2px solid var(--ln); border-left: 8px solid var(--c); border-radius: 10px; padding: 7px 10px; font: inherit; font-weight: 900; font-size: 16px; background: var(--bg); color: var(--fg); }
.qz-note { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--sub); }
.qz-start { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0 8px; }
.qz-start p { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--sub); }
.qz-go { display: inline-flex; align-items: center; gap: 12px; background: var(--acc); color: #fff; border: 3px solid var(--ln); border-radius: 999px; font-family: var(--f-display); font-size: clamp(24px, 2.6vw, 36px); padding: 12px 48px; box-shadow: 6px 6px 0 var(--shc); transition: transform 0.1s, box-shadow 0.1s; }
.qz-go:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--shc); }
.qz-go:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--shc); }
.qz-go .ic { width: 1em; height: 1em; }
/* 問題 */
.qz-q { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 16px); }
.qz-top { flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qz-no { font-family: var(--f-display); font-size: clamp(26px, 2.8vw, 46px); line-height: 1; }
.qz-no small { font-family: var(--f-en); font-weight: 800; font-size: 0.45em; color: var(--sub); }
.qz-type { border: 2px solid var(--ln); border-radius: 999px; padding: 2px 12px; font-weight: 900; font-size: clamp(12px, 1.05vw, 17px); }
.qz-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.qz-mini span { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--ln); border-left: 9px solid var(--c); border-radius: 9px; padding: 1px 9px; font-weight: 900; font-size: clamp(12px, 1vw, 16px); background: var(--bg); }
.qz-mini b { font-family: var(--f-en); font-weight: 800; }
.qz-timer { position: relative; flex: none; width: clamp(62px, 7.4vw, 116px); aspect-ratio: 1; margin-left: auto; }
.qz-mini + .qz-timer { margin-left: 4px; }
.qz-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.qz-timer circle { fill: none; stroke-width: 10; }
.qz-timer .bg { stroke: var(--pan2); }
.qz-timer .fg { stroke: var(--acc); stroke-dasharray: 100; stroke-dashoffset: 0; stroke-linecap: round; }
.qz-timer b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-en); font-weight: 800; font-size: clamp(24px, 2.8vw, 44px); }
.qz-timer.hurry .fg { stroke: var(--red); }
.qz-timer.hurry b { color: var(--red); }
.qz-timer b.beat { animation: st-beat 0.45s ease-out; }
.qz-timer.paused { opacity: 0.5; }
.qz-timer.done .fg { stroke: var(--sub); }
.qz-qbox { flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; border: 3px solid var(--ln); border-radius: 22px; background: var(--bg); box-shadow: 6px 6px 0 var(--shc); padding: clamp(10px, 2vh, 28px) clamp(14px, 3vw, 52px); }
.qz-fit { width: 100%; font-size: calc(var(--fs) * clamp(20px, min(3.5vw, 6.4vh), 96px)); }
.qz-text { margin: 0; font-family: var(--f-en); font-weight: 700; line-height: 1.28; text-wrap: balance; }
.qz-ja { margin: 0.45em 0 0; font-size: 0.48em; font-weight: 700; color: var(--sub); }
.qz-tbar { flex: none; height: 9px; border-radius: 999px; background: var(--pan2); overflow: hidden; }
.qz-tbar i { display: block; height: 100%; background: var(--acc); transform-origin: left; }
.qz-timer.hurry ~ * .qz-tbar i, .qz-q:has(.qz-timer.hurry) .qz-tbar i { background: var(--red); }
.qz-ans { flex: none; list-style: none; margin: 0; padding: 0 6px 6px 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: clamp(8px, 1.4vh, 16px); height: clamp(140px, 33vh, 440px); }
.qz-ans.tf { grid-auto-rows: 1fr; height: clamp(110px, 24vh, 300px); }
.qz-q.rev .qz-ans { height: clamp(120px, 25vh, 330px); }
.qz-q.rev .qz-ans.tf { height: clamp(90px, 17vh, 220px); }
.qz-qbox { min-height: clamp(72px, 14vh, 180px); }
.qz-a { position: relative; display: flex; align-items: center; gap: clamp(8px, 1.2vw, 20px); padding: 0 clamp(12px, 1.6vw, 28px); min-height: 0; border: 3px solid #111; border-radius: 18px; background: var(--tc); color: #fff; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.32); font-family: var(--f-en); font-weight: 700; font-size: calc(var(--fs) * clamp(15px, min(2.3vw, 4.3vh), 62px)); transition: opacity 0.3s, transform 0.3s, filter 0.3s; }
.qz-a.c2 { color: #111; }
.qz-sh { flex: none; width: 1.55em; height: 1.55em; display: grid; place-items: center; }
.qz-sh svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; }
.qz-at { flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; overflow: hidden; line-height: 1.2; overflow-wrap: anywhere; }
.qz-ans.tf .qz-a { justify-content: center; }
.qz-ans.tf .qz-at { flex: none; font-size: 1.25em; }
.qz-a.ng { opacity: 0.22; filter: grayscale(0.7); transform: scale(0.97); }
.qz-a.ok { transform: scale(1.02); box-shadow: 0 0 0 4px var(--bg), 0 0 0 9px var(--ln); z-index: 1; }
.qz-ok { position: absolute; right: -10px; top: -14px; width: 1.7em; height: 1.7em; border-radius: 50%; background: #fff; color: var(--ok); border: 3px solid #111; display: grid; place-items: center; animation: st-pop 0.45s ease-out; }
.qz-ok .ic { width: 1.1em; height: 1.1em; stroke-width: 3.4; }
.qz-why { flex: none; border: 2px solid var(--ln); border-radius: 14px; background: var(--pan); padding: 0.45em 0.9em; font-weight: 700; font-size: calc(var(--fs) * clamp(14px, min(1.45vw, 2.7vh), 30px)); line-height: 1.55; animation: st-in-r 0.3s ease-out; }
.qz-why b { display: inline-block; background: var(--fg); color: var(--bg); border-radius: 6px; padding: 0 0.5em; margin-right: 0.6em; font-size: 0.85em; }
.qz-teams { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.qz-teams p { margin: 0; font-weight: 900; font-size: 13px; color: var(--sub); }
.qz-tb { display: flex; flex-wrap: wrap; gap: 8px; }
.qz-team { display: inline-flex; align-items: center; gap: 8px; border: 3px solid var(--ln); border-left: 12px solid var(--c); border-radius: 14px; background: var(--bg); padding: 7px 14px 7px 10px; font-weight: 900; font-size: clamp(15px, 1.4vw, 22px); box-shadow: 3px 3px 0 var(--shc); transition: background 0.12s; }
.qz-team kbd { font-size: 0.65em; opacity: 0.7; }
.qz-team b { font-family: var(--f-en); font-weight: 800; font-size: 0.8em; display: none; }
.qz-team[aria-pressed='true'] { background: var(--c); color: #fff; }
.qz-team[aria-pressed='true'] b { display: inline; }
.qz-team.bump { animation: st-beat 0.35s ease-out; }
.qz-splash { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg); animation: qz-sp 0.95s ease forwards; pointer-events: none; }
.qz-splash b { font-family: var(--f-display); font-weight: 400; font-size: clamp(90px, 24vh, 300px); line-height: 1; color: var(--acc); -webkit-text-stroke: 4px var(--ln); paint-order: stroke fill; animation: st-pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); }
.qz-splash span { font-family: var(--f-en); font-weight: 800; letter-spacing: 0.3em; font-size: clamp(14px, 2.4vh, 28px); color: var(--sub); }
@keyframes qz-sp { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.qz-up { position: absolute; left: 50%; top: 40%; z-index: 30; transform: translate(-50%, -50%) rotate(-4deg); font-family: var(--f-display); font-size: clamp(48px, 12vh, 150px); color: var(--red); -webkit-text-stroke: 4px #fff; paint-order: stroke fill; text-shadow: 6px 6px 0 #111; white-space: nowrap; pointer-events: none; animation: qz-upa 1.1s ease forwards; }
@keyframes qz-upa { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg) scale(0.4); } 25% { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(1.08); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg) scale(1); } }
/* 途中経過 */
.qz-bd, .qz-fin, .qz-end { flex: 1; min-height: 0; width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; }
.qz-bd h2, .qz-fin h2, .qz-end h2 { margin: 0 0 clamp(10px, 2vh, 24px); font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 3vw, 48px); }
.qz-board { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(8px, 1.6vh, 18px); }
.qz-board li { display: grid; grid-template-columns: 2.2em minmax(4em, 9em) minmax(0, 1fr) 3.4em 3.2em; align-items: center; gap: 0.6em; font-weight: 900; font-size: calc(var(--fs) * clamp(16px, min(1.9vw, 3.4vh), 38px)); }
.qz-rk { font-family: var(--f-display); font-weight: 400; font-size: 1.3em; text-align: center; }
.qz-bn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qz-bt { height: 1.7em; border: 2px solid var(--ln); border-radius: 10px; background: var(--pan); overflow: hidden; }
.qz-bt i { display: block; height: 100%; background: var(--c); border-right: 3px solid var(--ln); transition: width 0.9s cubic-bezier(0.25, 1, 0.4, 1); min-width: 0; }
.qz-bs { font-family: var(--f-en); font-weight: 800; text-align: right; }
.qz-plus { font-family: var(--f-en); font-weight: 800; font-size: 0.7em; color: #fff; background: var(--ok); border-radius: 999px; text-align: center; padding: 0.1em 0; animation: st-pop 0.5s 0.4s both; }
.qz-plus.z { background: none; animation: none; }
/* 結果発表 */
.qz-fin { align-items: center; text-align: center; }
.qz-pod { flex: 1; min-height: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 2.4vw, 40px); padding-top: 10px; }
.qz-pc { width: min(25%, 300px); height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.qz-pw { padding-bottom: 10px; opacity: 0; transform: translateY(20px); transition: opacity 0.4s 0.35s, transform 0.4s 0.35s; }
.qz-pn { display: block; font-weight: 900; font-size: calc(var(--fs) * clamp(18px, min(2.4vw, 4vh), 46px)); line-height: 1.2; overflow-wrap: anywhere; }
.qz-ps { font-family: var(--f-en); font-weight: 800; font-size: calc(var(--fs) * clamp(14px, min(1.6vw, 2.8vh), 30px)); color: var(--sub); }
.qz-pb { display: flex; justify-content: center; padding-top: 0.4em; background: var(--c); border: 3px solid var(--ln); border-bottom: 0; border-radius: 18px 18px 0 0; transform: scaleY(0); transform-origin: bottom; transition: transform 0.6s cubic-bezier(0.2, 1.2, 0.4, 1); box-shadow: 6px 0 0 var(--shc); }
.qz-pb span { font-family: var(--f-display); font-size: clamp(24px, 6vh, 70px); color: #fff; -webkit-text-stroke: 3px #111; paint-order: stroke fill; }
.qz-pc.p1 .qz-pb { height: 66%; } .qz-pc.p2 .qz-pb { height: 48%; } .qz-pc.p3 .qz-pb { height: 34%; }
.qz-pc.on .qz-pb { transform: scaleY(1); }
.qz-pc.on .qz-pw { opacity: 1; transform: none; }
.qz-pc.drum .qz-pb { transform: scaleY(0.12); animation: qz-shake 0.12s linear infinite; }
.qz-pc.p1.on .qz-pn { color: var(--accd); }
@keyframes qz-shake { 0%, 100% { translate: 0 0; } 50% { translate: 3px 0; } }
.qz-pod::after { content: ''; position: absolute; }
.qz-rest { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; animation: st-in-r 0.4s ease-out; }
.qz-rest li { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--ln); border-left: 10px solid var(--c); border-radius: 12px; padding: 4px 14px; font-weight: 900; font-size: clamp(14px, 1.3vw, 22px); }
.qz-rest em { font-style: normal; font-family: var(--f-en); font-weight: 800; color: var(--sub); }
.qz-fin .st-bar, .qz-bd .st-bar, .qz-end .st-bar { width: 100%; }
.qz-end { align-items: center; justify-content: center; text-align: center; }
.qz-end p { font-weight: 900; font-size: clamp(16px, 1.8vw, 28px); }

/* ---------- 3) 音読・シャドーイング ---------- */
.m-read .rd { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 16px); }
.rd-set { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: clamp(8px, 1.2vh, 14px); border-bottom: 2px dashed var(--pan2); }
.rd-main { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 18px); }
.rd-ph { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 0.6em; border: 3px solid var(--ln); border-radius: 999px; padding: 0.25em 1.1em; font-size: clamp(16px, min(2vw, 3.6vh), 36px); background: var(--bg); transition: background 0.2s; }
.rd-ph span { font-family: var(--f-en); font-weight: 800; letter-spacing: 0.14em; font-size: 0.72em; }
.rd-ph b { font-weight: 900; }
.rd-ph.sky { background: var(--acc); color: #fff; }
.rd-ph.yel { background: var(--hi); color: #111; }
.rd-ph.ink { background: var(--fg); color: var(--bg); }
.cr-stage[data-theme='dark'] .rd-ph.sky { color: #04121c; }
.rd-wave { display: inline-flex; align-items: center; gap: 0.12em; height: 0.9em; }
.rd-wave s { display: block; width: 0.14em; height: 100%; background: currentColor; border-radius: 1px; animation: rd-w 0.8s ease-in-out infinite; }
.rd-wave s:nth-child(2) { animation-delay: -0.2s; } .rd-wave s:nth-child(3) { animation-delay: -0.45s; } .rd-wave s:nth-child(4) { animation-delay: -0.1s; }
@keyframes rd-w { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.rd-box { flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; border: 3px solid var(--ln); border-radius: 22px; background: var(--bg); box-shadow: 6px 6px 0 var(--shc); padding: clamp(10px, 2vh, 28px) clamp(14px, 3vw, 52px); }
.rd-fit { width: 100%; font-size: calc(var(--fs) * clamp(22px, min(4.1vw, 7.2vh), 118px)); }
.rd-text { margin: 0; font-family: var(--f-en); font-weight: 600; line-height: 1.38; text-wrap: pretty; overflow-wrap: break-word; }
.rd-text.hid .hw { color: transparent; background: linear-gradient(var(--sub), var(--sub)) bottom / 100% 0.08em no-repeat; }
.rd-ja { margin: 0.55em 0 0; font-size: 0.46em; font-weight: 700; color: var(--sub); line-height: 1.6; word-break: auto-phrase; }
.rd-meter { flex: none; height: 16px; border: 2px solid var(--ln); border-radius: 999px; background: var(--pan); overflow: hidden; }
.rd-meter i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); }
.rd-meter.lis i { background: var(--acc); }
.rd-meter.rep i { background: var(--hi); }
.rd-dots { flex: none; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rd-dots button { display: block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ln); background: var(--bg); padding: 0; transition: transform 0.15s, background 0.15s; }
.rd-dots .past button { background: var(--pan2); }
.rd-dots .on button { background: var(--acc); transform: scale(1.35); }

/* ---------- 4) 単語フラッシュカード ---------- */
.m-cards .fc { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 16px); }
.fc-stage { flex: 1; min-height: 0; display: grid; place-items: center; perspective: 1800px; padding: 4px 14px 14px 4px; }
.fc-card { width: min(100%, 1150px); height: 100%; max-height: 640px; position: relative; cursor: pointer; outline: none; }
.fc-card:focus-visible .fc-f { outline: 4px solid var(--hi); }
.fc-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.3, 1.25, 0.5, 1); }
.fc-card.flip .fc-in { transform: rotateY(180deg); }
.fc-f { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 4px solid var(--ln); border-radius: 30px; background: var(--bg); box-shadow: 10px 10px 0 var(--shc); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3em; text-align: center; padding: 2.2em 1.6em 1.6em; overflow: hidden; font-size: calc(var(--fs) * clamp(14px, min(1.55vw, 2.8vh), 34px)); }
.fc-f.back { transform: rotateY(180deg); background: var(--pan); }
.fc-tag { position: absolute; left: 1em; top: 0.9em; margin: 0; background: var(--fg); color: var(--bg); border-radius: 999px; padding: 0.1em 0.8em; font-family: var(--f-en); font-weight: 800; font-size: 0.6em; letter-spacing: 0.14em; }
.fc-f.back .fc-tag { background: var(--acc); color: #fff; }
.fc-w { margin: 0; max-width: 100%; font-family: var(--f-en); font-weight: 800; font-size: 4.6em; line-height: 1.08; letter-spacing: -0.015em; white-space: nowrap; }
.fc-f.back .fc-w { font-size: 3.2em; color: var(--accd); }
.fc-ja { margin: 0; max-width: 100%; font-weight: 900; font-size: 2.7em; line-height: 1.3; word-break: auto-phrase; }
.fc-f.front .fc-ja { font-size: 3.2em; }
.fc-f.back.ja .fc-ja { color: var(--accd); }
.fc-pos { margin: 0; font-weight: 900; font-size: 0.85em; color: var(--sub); }
.fc-def { margin: 0.3em 0 0; font-family: var(--f-en); font-weight: 500; font-size: 0.95em; color: var(--sub); max-width: 36em; }
.fc-ex { margin: 0.5em 0 0; font-family: var(--f-en); font-weight: 600; font-size: 1.1em; line-height: 1.4; max-width: 34em; }
.fc-m { color: var(--accd); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.15em; font-weight: 800; }
.fc-exja { margin: 0.2em 0 0; font-weight: 700; font-size: 0.8em; color: var(--sub); }
.fc-stage.in-r .fc-card { animation: st-in-r 0.3s ease-out; }
.fc-stage.in-l .fc-card { animation: st-in-l 0.3s ease-out; }
.fc-stage.in-r, .fc-stage.in-l { animation: none; }
.fc-auto { flex: none; height: 6px; border-radius: 999px; background: var(--pan2); overflow: hidden; visibility: hidden; }
.fc-auto.on { visibility: visible; }
.fc-auto i { display: block; height: 100%; background: var(--acc); transform-origin: left; transform: scaleX(0); }
.fc-grid { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 2px 8px 10px 2px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); align-content: start; gap: 12px; }
.fc-grid li { position: relative; }
.fc-gh { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 900; font-size: 13px; color: var(--sub); }
.fc-gh span { margin-right: auto; }
.fc-gi { width: 100%; min-height: clamp(96px, 15vh, 160px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 44px; border: 3px solid var(--ln); border-radius: 16px; background: var(--bg); box-shadow: 4px 4px 0 var(--shc); text-align: center; }
.fc-gi b { font-family: var(--f-en); font-weight: 800; font-size: calc(var(--fs) * clamp(20px, 2vw, 36px)); line-height: 1.15; overflow-wrap: anywhere; }
.fc-gi b:lang(ja) { font-family: var(--f-ja); font-weight: 900; font-size: calc(var(--fs) * clamp(16px, 1.5vw, 28px)); }
.fc-gi span { visibility: hidden; font-weight: 900; font-size: calc(var(--fs) * clamp(13px, 1.15vw, 20px)); color: var(--accd); word-break: auto-phrase; }
.fc-gi.open { background: var(--pan); }
.fc-gi.open span { visibility: visible; }
.st-bar.is-grid > .st-bar-g:first-child { visibility: hidden; }
.fc-gs { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ln); background: var(--pan); display: grid; place-items: center; }

/* ---------- 5) 生徒に配る ---------- */
.m-share .hd { height: 100%; min-height: 0; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 70px); align-items: center; }
.hd-qr { width: min(62vh, 44vw); aspect-ratio: 1; background: #fff; border: 4px solid #111; border-radius: 26px; padding: 2vh; box-shadow: 10px 10px 0 var(--acc); }
.hd-qr svg { display: block; width: 100%; height: 100%; }
.hd-r { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(6px, 1.2vh, 14px); }
.hd-k { margin: 0; font-family: var(--f-en); font-weight: 800; letter-spacing: 0.2em; font-size: clamp(13px, 1.3vw, 22px); color: #fff; background: var(--acc); padding: 0.2em 0.8em; border-radius: 999px; }
.cr-stage[data-theme='dark'] .hd-k { color: #04121c; }
.hd-h { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, min(3.4vw, 6vh), 64px); line-height: 1.2; word-break: auto-phrase; }
.hd-t { margin: 0; font-weight: 900; font-size: clamp(16px, min(1.6vw, 3vh), 30px); line-height: 1.45; word-break: auto-phrase; }
.hd-u { margin: 0; font-family: var(--f-en); font-weight: 600; font-size: clamp(12px, 1.05vw, 18px); color: var(--sub); overflow-wrap: anywhere; }
.hd-n { margin: 0; font-size: 13px; font-weight: 700; color: var(--sub); max-width: 40em; }
.hd-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* ---------- 6) タイマー ---------- */
.m-timer .tm { position: relative; height: 100%; min-height: 0; display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 16px); }
.tm-label { flex: none; align-self: center; width: min(960px, 100%); text-align: center; border: 0; border-bottom: 3px dashed var(--pan2); background: transparent; color: var(--fg); font: inherit; font-weight: 900; font-size: clamp(18px, min(2.4vw, 4.4vh), 46px); padding: 0.15em 0.3em; }
.tm-label::placeholder { color: var(--sub); opacity: 0.6; }
.tm-label:focus { outline: none; border-bottom-color: var(--acc); }
.tm-face { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tm-d { font-family: var(--f-en); font-weight: 800; font-size: calc(var(--fs) * min(28vw, 44vh)); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tm-sub { margin: 0.2em 0 0; font-weight: 900; font-size: clamp(13px, 1.3vw, 22px); color: var(--sub); min-height: 1.4em; }
.tm-face.hurry .tm-d { color: var(--red); animation: st-beat 1s ease-out infinite; }
.tm-face.end .tm-d { color: var(--red); }
.tm-bar { flex: none; height: 20px; border: 3px solid var(--ln); border-radius: 999px; background: var(--pan); overflow: hidden; }
.tm-bar i { display: block; height: 100%; background: var(--acc); transform-origin: left; }
.tm-face.hurry + .tm-bar i, .tm-face.end + .tm-bar i { background: var(--red); }
.tm-set { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; }
.tm-adj { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-adj .sb { padding: 6px 12px; font-size: 13px; box-shadow: none; }
.tm-ban { position: absolute; left: 50%; top: 40%; z-index: 20; transform: translate(-50%, -50%) rotate(-3deg); display: flex; flex-direction: column; align-items: center; background: var(--hi); color: #111; border: 4px solid #111; border-radius: 28px; box-shadow: 10px 10px 0 #111; padding: 0.2em 0.8em 0.3em; pointer-events: none; animation: tm-ban 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
.tm-ban b { font-family: var(--f-display); font-weight: 400; font-size: clamp(44px, 13vh, 170px); line-height: 1.1; white-space: nowrap; }
.tm-ban span { font-weight: 900; font-size: clamp(16px, 3vh, 36px); }
@keyframes tm-ban { from { transform: translate(-50%, -50%) rotate(-3deg) scale(0.4); opacity: 0; } }

/* ---------- 7) 指名ルーレット ---------- */
.m-roulette .rl { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 16px); }
.rl-set { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; }
.rl-set label { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; font-size: 14px; }
.rl-set input { border: 2px solid var(--ln); border-radius: 10px; padding: 5px 8px; font-family: var(--f-en); font-weight: 800; font-size: 18px; width: 5em; background: var(--bg); color: var(--fg); text-align: center; }
.rl-set input[type='text'] { width: 9em; font-size: 15px; }
.rl-main { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 1.6vh, 18px); }
.rl-win { --d: min(54vh, 62vw); position: relative; width: var(--d); height: var(--d); max-height: 100%; border-radius: 50%; border: 6px solid var(--ln); background: var(--bg); box-shadow: 10px 10px 0 var(--acc); display: grid; place-items: center; overflow: hidden; transition: background 0.3s, box-shadow 0.3s; }
.rl-n { position: relative; z-index: 1; font-family: var(--f-en); font-weight: 800; font-size: calc(var(--d) * 0.42); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rl-ban { position: absolute; z-index: 1; bottom: 13%; font-weight: 900; font-size: calc(var(--d) * 0.08); color: var(--sub); }
.rl-n.roll { animation: rl-roll 0.12s ease-out; }
@keyframes rl-roll { from { transform: translateY(-28%); opacity: 0.25; filter: blur(2px); } }
.rl-win.spin { box-shadow: 10px 10px 0 var(--hi); }
.rl-win.hit { background: var(--hi); box-shadow: 10px 10px 0 var(--ln); }
.rl-win.hit .rl-n { color: #111; animation: st-pop 0.5s ease-out; }
.rl-win.hit .rl-ban { color: #111; }
.rl-rays { position: absolute; inset: -20%; background: repeating-conic-gradient(rgba(255, 255, 255, 0.55) 0 8deg, transparent 8deg 22deg); opacity: 0; }
.rl-win.hit .rl-rays { opacity: 1; animation: rl-rays 6s linear infinite; }
@keyframes rl-rays { to { transform: rotate(360deg); } }
.rl-msg { margin: 0; min-height: 1.4em; font-weight: 900; font-size: clamp(16px, min(2.4vw, 4vh), 42px); text-align: center; }
.rl-h { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rl-hl { font-weight: 900; font-size: 13px; color: var(--sub); }
.rl-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rl-hist button { border: 2px solid var(--ln); border-radius: 999px; background: var(--pan); font-family: var(--f-en); font-weight: 800; font-size: 16px; padding: 1px 12px; }
.rl-hist button:hover { text-decoration: line-through; }
.rl-none { font-size: 13px; font-weight: 700; color: var(--sub); }
.rl-left { font-weight: 900; font-size: 14px; color: var(--sub); }

/* ---------- ステージ：タブレット・スマホ ---------- */
@media (hover: none) { .sb kbd, .qz-team kbd, .st-keys { display: none; } }
@media (max-width: 1000px) {
  .st-art { display: none; }
  .st-keys { display: none; }
}
@media (max-width: 760px) {
  .st-top { height: 50px; gap: 8px; padding: 0 8px 0 10px; }
  .st-badge { font-size: 0; padding: 0 8px 0 0; gap: 0; }
  .st-badge i { font-size: 15px; width: 26px; height: 26px; }
  .st-title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
  .st-ctl { gap: 4px; }
  .st-fs { display: none; }
  .hd-lv { align-self: flex-start; }
  .st-i { width: 34px; height: 34px; border-radius: 9px; }
  .st-i .ic { width: 19px; height: 19px; }
  .st-a { font-size: 14px; }
  .st-x { height: 34px; padding: 0 9px; font-size: 0; gap: 0; margin-left: 2px; }
  .st-x .ic { width: 20px; height: 20px; }
  .st-main { overflow-y: auto; padding: 12px 12px 10px; }
  .st-bar { gap: 8px; }
  .st-bar-g { gap: 6px; }
  .st-bar-o { justify-content: flex-start; }
  .sb { font-size: 13px; padding: 7px 12px; }
  .sb-big { font-size: 15px; padding: 9px 18px; }
  .seg button { padding: 6px 10px; font-size: 12.5px; }
  .seg-l { padding: 0 4px 0 10px; font-size: 11.5px; }
  /* スライド */
  .m-slides .sl { min-height: 100%; height: auto; }
  .sl-c { min-height: 52vh; }
  .sl-cover { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; }
  .sl-img { box-shadow: 5px 5px 0 var(--acc); border-radius: 16px; }
  .sl-ct { font-size: calc(var(--fs) * 15px); }
  .sl-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* クイズ */
  .qz-cols { grid-template-columns: minmax(0, 1fr); }
  .qz-hero { gap: 12px; }
  .qz-q { min-height: 100%; height: auto; }
  .qz-qbox { min-height: 26vh; flex: 1 0 auto; }
  .qz-ans { height: auto; grid-auto-rows: minmax(64px, auto); }
  .qz-ans.tf { height: auto; grid-auto-rows: 90px; }
  .qz-a { padding: 10px 12px; }
  .qz-at { align-self: center; }
  .qz-mini { order: 5; flex-basis: 100%; margin-left: 0; }
  .qz-board li { grid-template-columns: 1.8em minmax(3em, 6em) minmax(0, 1fr) 2.8em; }
  .qz-plus { display: none; }
  .qz-pc { width: 32%; }
  .qz-pod { min-height: 50vh; }
  .qz-names { grid-template-columns: minmax(0, 1fr); }
  /* 音読 */
  .m-read .rd { min-height: 100%; height: auto; }
  .rd-box { min-height: 34vh; flex: 1 0 auto; }
  /* カード */
  .m-cards .fc { min-height: 100%; height: auto; }
  .fc-stage { min-height: 50vh; flex: 1 0 auto; }
  .fc-card { height: 50vh; }
  .fc-f { border-radius: 22px; box-shadow: 6px 6px 0 var(--shc); }
  /* 配る */
  .m-share .hd { grid-template-columns: minmax(0, 1fr); justify-items: center; height: auto; gap: 18px; }
  .hd-qr { width: min(78vw, 46vh); box-shadow: 6px 6px 0 var(--acc); }
  .hd-r { align-items: stretch; }
  /* タイマー・ルーレット */
  .m-timer .tm, .m-roulette .rl { min-height: 100%; height: auto; }
  .tm-face { min-height: 30vh; flex: 1 0 auto; }
  .tm-d { font-size: calc(var(--fs) * 26vw); }
  .rl-main { min-height: 46vh; flex: 1 0 auto; }
  .rl-win { --d: min(70vw, 40vh); box-shadow: 6px 6px 0 var(--acc); }
  .st-help-in dl { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .cr-stage *, .cr-dlg, .cr-dlg-in { animation: none !important; transition: none !important; }
}
.cr-stage svg.tfi, .cr-stage svg.tfi * { fill: none; stroke: currentColor; }