/* クイズコーナー（/quiz/）— 英語指導法ラボと同じ太線・ずらし影・黄色のアクセント */
.qz { padding: 18px 0 40px; }
.qz .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .qz .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .qz .g4 { grid-template-columns: 1fr; } }
.qz-sec { margin: 34px 0; }
.qz-sec .sec-title small { font-size: 14px; color: var(--ink2); margin-left: 6px; }
/* 横スクロールにすると端のボタンが切れて見えるので、折り返してすべて見せる（スマホは2列） */
.qz-nav { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 10px; margin-bottom: 8px; }
@media (max-width: 560px) {
  .qz-nav { display: grid; grid-template-columns: 1fr 1fr; }
  .qz-nav a { font-size: 13px !important; padding: 4px 8px 4px 4px !important; min-width: 0; }
}
.qz-nav a { flex: none; display: inline-flex; align-items: center; gap: 5px; font: 700 14px/1.3 var(--head); text-decoration: none; color: var(--ink); border: 2px solid var(--ln); border-radius: 999px; padding: 5px 12px 5px 6px; background: var(--paper); }
.qz-nav a.on, .qz-nav a:hover { background: var(--yellow); color: #1d1a16; }
.qz-nav img { width: 24px; height: 24px; }
.qz-gcard { border-bottom: 7px solid var(--c, var(--ln)); }
.qz-gc-h { display: flex; align-items: center; gap: 8px; }
.qz-gc-h img { width: 46px; height: 46px; flex: none; }
.qz-gc-h h3 { margin: 0; font-size: 18px; }
.qz-four li b { display: block; }

/* 音の切りかえ */
.qz-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 12px; }
.qz-tg { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--ln); border-radius: 999px; background: var(--paper); padding: 4px 12px; font: 700 13.5px/1.4 var(--head); }
.qz-tg[aria-pressed="true"] { background: var(--yellow); color: #1d1a16; }
.qz-tg[aria-pressed="false"] { opacity: .6; text-decoration: line-through; }
.qz-best { margin-left: auto; font: 900 14px var(--head); color: var(--ink2); }

/* 準備画面 */
.qz-setup { background: var(--paper); border: 3px solid var(--ln); border-radius: 20px; box-shadow: 6px 6px 0 var(--ln); padding: 16px 20px 20px; margin-bottom: 26px; }
.qz-h { display: flex; align-items: center; gap: 10px; font-size: 22px; margin: 0 0 10px; }
.qz-row { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; align-items: center; padding: 9px 0; border-top: 2px dashed var(--line2); }
.qz-lab { font: 900 15px/1.3 var(--head); }
.qz-lab small { display: block; font-size: 11.5px; color: var(--ink2); font-weight: 700; }
.qz-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.qz-seg button { border: 2px solid var(--ln); border-radius: 999px; background: var(--paper); padding: 6px 14px; font: 700 15px/1.3 var(--head); color: var(--ink); }
.qz-seg button[aria-pressed="true"] { background: var(--yellow); color: #1d1a16; box-shadow: 2px 2px 0 var(--ln); }
.qz-seg button.hard { border-color: #b3261e; color: #b3261e; }
.qz-seg button.hard[aria-pressed="true"] { background: #b3261e; color: #fff; }
.qz-seg button.lv-sho[aria-pressed="true"] { background: var(--sho); color: #fff; }
.qz-seg button.lv-chu[aria-pressed="true"] { background: var(--chu); color: #fff; }
.qz-seg button.lv-ko[aria-pressed="true"] { background: var(--ko); color: #fff; }
.qz-subj { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.qz-subj button { position: relative; display: flex; align-items: center; gap: 6px; text-align: left; border: 2px solid var(--ln); border-radius: 12px; background: var(--paper); padding: 4px 26px 4px 6px; font: 700 13.5px/1.25 var(--head); color: var(--ink); min-height: 40px; }
.qz-subj button img { width: 26px; height: 26px; flex: none; }
.qz-subj button i { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 11px; color: var(--ink2); }
.qz-subj button.all { grid-column: 1 / -1; justify-content: center; padding: 6px; }
.qz-subj button[aria-pressed="true"] { background: var(--yellow); color: #1d1a16; box-shadow: 2px 2px 0 var(--ln); }
.qz-subj button[aria-pressed="true"] i { color: #1d1a16; }
.qz-subj button.zero { opacity: .45; }
.qz-check { display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; }
.qz-check input { width: 20px; height: 20px; accent-color: #1f4e3d; flex: none; }
.qz-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 12px; border-top: 2px dashed var(--line2); }
.qz-count { margin: 0; flex: 1; min-width: 200px; }
.qz-count b { font: 900 22px var(--head); }
.qz-zero { color: #b3261e; font-size: 16px !important; }
.qz-start { font-size: 20px; padding: 12px 34px; }
.qz-start:disabled, .qz-kh-btns .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
@media (max-width: 560px) {
  .qz-row { grid-template-columns: 1fr; gap: 4px; }
  .qz-subj { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qz-setup { padding: 12px 12px 16px; }
  .qz-start { width: 100%; }
}

/* ゲーム共通 */
.qz-stage { margin-bottom: 30px; }
.qz-game { position: relative; background: var(--paper); border: 3px solid var(--ln); border-radius: 20px; box-shadow: 6px 6px 0 var(--ln); padding: 14px 16px 18px; }
.qz-quit { position: absolute; top: -14px; right: 14px; border: 2px solid var(--ln); border-radius: 999px; background: var(--paper); font: 700 13px var(--head); padding: 2px 12px; z-index: 2; }
.qz-hud { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font: 700 15px var(--head); margin-bottom: 10px; }
.qz-hud b { font-size: 22px; font-weight: 900; }
.qz-no { background: #1d1a16; color: #fff; border-radius: 999px; padding: 1px 12px; }
.qz-no b { font-size: 16px; color: var(--yellow); }
.qz-sc.rv { color: #b3261e; }
.qz-streak { color: #e8410c; font-weight: 900; }
.qz-hud .qz-sec { margin-left: auto; }
.qz-panel { position: relative; background: #fffdf5; border: 3px solid var(--ln); border-radius: 16px; padding: 14px 18px; min-height: 96px; transition: background .2s; }
:root[data-theme="dark"] .qz-panel { background: var(--bg2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qz-panel { background: var(--bg2); } }
.qz-panel.ok { background: #e3f8ef; } .qz-panel.ng { background: #ffe9e4; }
:root[data-theme="dark"] .qz-panel.ok, :root[data-theme="dark"] .qz-panel.ng { background: var(--bg2); }
.qz-qlab { font: 900 13px var(--head); color: var(--ink2); }
.qz-text { font: 900 clamp(19px, 2.5vw, 25px)/1.6 var(--head); margin: 4px 0; min-height: 1.6em; word-break: break-all; }
.qz-time { height: 9px; border: 2px solid var(--ln); border-radius: 999px; overflow: hidden; margin-top: 8px; background: var(--paper); }
.qz-time span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #00a88f, #ffd23f); }
.qz-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.qz-d { display: inline-block; font: 900 12px/1.6 var(--head); border-radius: 6px; padding: 0 7px; border: 1.5px solid var(--ln); background: #e3f8ef; color: #0b5a45; }
.qz-d.d2 { background: #e3efff; color: #123a7a; } .qz-d.d3 { background: #fff0c2; color: #5a4300; } .qz-d.d4 { background: #b3261e; color: #fff; }

/* 解説パネル */
.qz-fb { margin-top: 14px; }
.qz-fb-in { border: 3px solid var(--ln); border-radius: 16px; padding: 12px 18px 16px; background: var(--paper); box-shadow: 4px 4px 0 var(--ln); animation: qzPop .25s ease-out; }
.qz-fb-in.ok { border-top: 10px solid #00a88f; } .qz-fb-in.ng { border-top: 10px solid #ef5644; }
.qz-judge { display: flex; align-items: center; gap: 10px; font: 900 22px var(--head); margin: 0 0 6px; }
.qz-judge span { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--ln); font-size: 26px; background: #fff; color: #1d1a16; }
.ok > .qz-judge span { background: #00a88f; color: #fff; } .ng > .qz-judge span { background: #ef5644; color: #fff; }
.qz-ans { font-weight: 700; margin: 4px 0; }
.qz-ans b, .qz-tip b, .qz-right b, .qz-hint b { display: inline-block; font: 900 12.5px/1.6 var(--head); background: #1d1a16; color: #fff; border-radius: 6px; padding: 0 8px; margin-right: 8px; }
.qz-ans small { display: inline-block; margin-left: 10px; color: var(--ink2); font-weight: 400; }
.qz-right { background: rgba(255, 210, 63, .35); border-radius: 8px; padding: 4px 8px; font-weight: 700; }
.qz-exp { margin: 8px 0 4px; }
.qz-tip { margin: 4px 0; } .qz-tip b { background: #ec4899; }
.qz-src { margin: 4px 0 8px; font-size: 13.5px; color: var(--ink2); }
.qz-next { font-size: 17px; }
.qz-next small, .qz-check small, .qz-confirm small, .qz-flip small, .qz-grade small { font-size: 11px; opacity: .7; margin-left: 4px; font-family: var(--font); }
@keyframes qzPop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* 早押し ○× */
.qz-ox { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.qz-ox button { border: 3px solid var(--ln); border-radius: 22px; box-shadow: 5px 5px 0 var(--ln); padding: 10px; color: #fff; display: flex; flex-direction: column; align-items: center; transition: transform .08s; touch-action: manipulation; }
.qz-ox button span { font: 900 64px/1 var(--head); }
.qz-ox button small { font: 900 16px var(--head); }
.qz-o { background: #ef5644; } .qz-x { background: #3d8bfd; }
.qz-ox button:active:not(:disabled), .qz-ox button.pick { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ln); }
.qz-ox button:disabled:not(.pick) { opacity: .55; }
.qz-rmsg { font: 900 15px var(--head); color: #b3261e; min-height: 1.4em; margin-top: 4px; }

/* 4択 */
.qz-ch4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.qz-c { position: relative; display: flex; align-items: center; gap: 10px; text-align: left; border: 3px solid var(--ln); border-radius: 16px; box-shadow: 4px 4px 0 var(--ln); padding: 12px 34px 12px 12px; color: #fff; font: 900 17px/1.45 var(--head); min-height: 66px; transition: transform .08s; }
.qz-c .sh { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .25); font-size: 18px; }
.qz-c .tx { flex: 1; word-break: break-all; }
.qz-c kbd { position: absolute; right: 10px; top: 8px; font: 700 11px var(--font); opacity: .8; }
.qz-c.c0 { background: #e2453a; } .qz-c.c1 { background: #2f6fe0; } .qz-c.c2 { background: #d89a00; } .qz-c.c3 { background: #0e9b6e; }
.qz-c.m { background: #1f4e3d; } .qz-c.m .sh { background: var(--yellow); color: #1d1a16; }
.qz-c:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ln); }
.qz-c.pick { outline: 5px solid var(--yellow); outline-offset: 2px; }
.qz-c.ok { box-shadow: 0 0 0 5px #00a88f, 4px 4px 0 5px var(--ln); }
.qz-c.ok::after { content: '○'; position: absolute; right: 10px; bottom: 4px; font-size: 26px; }
.qz-c.ng { opacity: .75; } .qz-c.ng::after { content: '×'; position: absolute; right: 10px; bottom: 4px; font-size: 26px; }
.qz-c.dim, .qz-c.gone { opacity: .35; }
.qz-c.gone .tx { text-decoration: line-through; }
.qz-c:disabled { cursor: default; }
@media (max-width: 560px) { .qz-ch4 { grid-template-columns: 1fr; } .qz-c { min-height: 54px; font-size: 16px; } .qz-ox button span { font-size: 52px; } }

/* 太鼓 */
.qz-tk-cards { display: grid; gap: 6px; margin-bottom: 8px; }
.qz-tk-now, .qz-tk-next { display: flex; gap: 10px; align-items: flex-start; border: 3px solid var(--ln); border-radius: 14px; padding: 10px 14px; background: #fffdf5; }
:root[data-theme="dark"] .qz-tk-now, :root[data-theme="dark"] .qz-tk-next { background: var(--bg2); }
.qz-tk-now p { margin: 0; font: 900 clamp(18px, 2.3vw, 23px)/1.5 var(--head); }
.qz-tk-next { opacity: .7; padding: 6px 12px; border-width: 2px; }
.qz-tk-next p { margin: 0; font: 700 14px/1.5 var(--head); }
.qz-tk-next .lab { font: 900 12px var(--head); background: #1d1a16; color: #fff; border-radius: 6px; padding: 0 6px; flex: none; }
.qz-tk-now .num, .qz-tk-next .num { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--ln); font: 900 20px var(--head); color: #1d1a16; }
.qz-tk-next .num { width: 26px; height: 26px; font-size: 14px; border-width: 2px; }
.qz-tk-lane { position: relative; border: 3px solid var(--ln); border-radius: 14px; overflow: hidden; background: #2b2622; }
.qz-tk-lane canvas { display: block; width: 100%; }
.qz-tk-ready { position: absolute; inset: 0; display: grid; place-items: center; font: 900 30px var(--head); color: var(--yellow); background: rgba(0, 0, 0, .35); }
.qz-pads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.qz-pad { border: 3px solid var(--ln); border-radius: 999px; padding: 12px 8px; color: #fff; box-shadow: 5px 5px 0 var(--ln); display: flex; flex-direction: column; align-items: center; line-height: 1.2; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.qz-pad b { font: 900 30px var(--head); } .qz-pad span { font: 900 15px var(--head); } .qz-pad kbd { font-size: 11px; opacity: .8; }
.qz-pad.don { background: #ef5644; } .qz-pad.ka { background: #3d8bfd; }
.qz-pad.on { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ln); }
.qz-soul { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.qz-soul .lab { font-size: 13px; }
.qz-soul .bar { position: relative; width: 160px; height: 16px; border: 2px solid var(--ln); border-radius: 999px; overflow: hidden; background: var(--paper); }
.qz-soul .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd23f, #ef5644); transition: width .2s; }
.qz-soul .bar::after { content: ''; position: absolute; left: 60%; top: 0; bottom: 0; width: 2px; background: var(--ln); }
.qz-soul .bar.clear i { background: linear-gradient(90deg, #ffd23f, #00a88f); }
.qz-soul em { font-style: normal; color: #0e9b6e; font-size: 13px; }
.qz-tk-log { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.qz-tk-log li { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; border: 2px solid var(--ln); border-radius: 10px; padding: 4px 10px; font-size: 14px; animation: qzPop .25s; }
.qz-tk-log li b { grid-row: span 2; font: 900 20px var(--head); } .qz-tk-log li.ok b { color: #0e9b6e; } .qz-tk-log li.ng b { color: #ef5644; }
.qz-tk-log em { font-style: normal; font-size: 12.5px; color: var(--ink2); }
@media (max-width: 560px) { .qz-soul .bar { width: 100px; } .qz-pad b { font-size: 24px; } }

/* シューティング */
.qz-shq { min-height: 0; padding: 10px 14px; margin-bottom: 8px; }
.qz-shq .qz-text { font-size: clamp(17px, 2.2vw, 22px); }
.qz-sh-wrap { position: relative; border: 3px solid var(--ln); border-radius: 14px; overflow: hidden; }
.qz-sh-wrap canvas { display: block; width: 100%; touch-action: none; outline: none; }
.qz-sh-msg { position: absolute; left: 12px; right: 12px; bottom: 76px; background: rgba(255, 255, 255, .96); color: #1d1a16; border: 3px solid #1d1a16; border-radius: 14px; padding: 10px 14px; display: grid; gap: 2px; animation: qzPop .25s; }
.qz-sh-msg b { font: 900 20px var(--head); } .qz-sh-msg b.ok { color: #0e9b6e; } .qz-sh-msg b.ng { color: #d0312d; }
.qz-sh-msg span { font-weight: 900; } .qz-sh-msg small { font-size: 13px; line-height: 1.6; }
.qz-life i { font-style: normal; font-size: 22px; color: #ccc; } .qz-life i.on { color: #ef5644; }
.qz-hud .qz-life { margin-left: auto; }
.qz-sh-help { margin: 8px 0 0; color: var(--ink2); }

/* ペアめくり */
.qz-pairs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .qz-pairs[style*="--n:16"] { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .qz-pairs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } }
.qz-card { perspective: 800px; border: 0; padding: 0; background: none; min-height: 110px; }
.qz-card .in { position: relative; display: block; width: 100%; height: 100%; min-height: 110px; transform-style: preserve-3d; transition: transform .45s; }
.qz-card.open .in { transform: rotateY(180deg); }
.qz-card .bk, .qz-card .fr { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 3px solid var(--ln); border-radius: 14px; box-shadow: 3px 3px 0 var(--ln); display: grid; place-items: center; padding: 8px; }
.qz-card .bk { background: repeating-linear-gradient(45deg, #1f4e3d 0 10px, #24604a 10px 20px); color: var(--yellow); font: 900 18px var(--head); }
.qz-card.a .bk { background: repeating-linear-gradient(45deg, #b7793a 0 10px, #c4884a 10px 20px); color: #fff; }
.qz-card .bk b { background: rgba(0, 0, 0, .35); border-radius: 8px; padding: 0 10px; }
.qz-card .fr { transform: rotateY(180deg); background: #e3efff; color: #1d1a16; font: 900 15px/1.45 var(--head); text-align: center; align-content: center; word-break: break-all; }
.qz-card.a .fr { background: #fff3c4; }
.qz-card .fr em { display: block; font-style: normal; font-size: 11px; color: #57514a; }
.qz-card.done .fr { background: #c9f2e2; box-shadow: 0 0 0 4px #00a88f; }
@media (max-width: 560px) { .qz-card, .qz-card .in { min-height: 96px; } .qz-card .fr { font-size: 13px; padding: 4px; } }
.qz-memo-h { margin: 18px 0 6px; font-size: 17px; }
.qz-memo { padding-left: 1.4em; margin: 0; }
.qz-memo li { margin-bottom: 8px; animation: qzPop .3s; }
.qz-memo li b.y { background: rgba(255, 210, 63, .5); padding: 0 4px; }
.qz-memo p { margin: 2px 0; font-size: 14.5px; }

/* 年表ならべ */
.qz-nen-q { font-weight: 700; margin: 0 0 10px; }
.qz-slots { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.qz-slots li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: stretch; }
.qz-slots .no { display: grid; place-items: center; font: 900 18px var(--head); background: #1d1a16; color: var(--yellow); border-radius: 10px; }
.qz-slot { text-align: left; border: 2.5px dashed var(--line2); border-radius: 12px; background: var(--paper); padding: 8px 12px; min-height: 46px; font: 700 15px/1.45 var(--head); color: var(--ink); display: grid; gap: 2px; }
.qz-slot.fill { border-style: solid; border-color: var(--ln); background: #fff8dc; box-shadow: 2px 2px 0 var(--ln); color: #1d1a16; }
.qz-slot .ph { color: var(--ink3); font-weight: 400; }
.qz-slot .dt { font: 900 13px var(--head); color: #0b5a45; }
.qz-slot .cr { font-size: 13px; color: #b3261e; }
.qz-slots li.ok .qz-slot { background: #e3f8ef; } .qz-slots li.ng .qz-slot { background: #ffe9e4; }
.qz-hand { display: flex; flex-wrap: wrap; gap: 8px; }
.qz-nc { border: 2.5px solid var(--ln); border-radius: 12px; background: var(--yellow); color: #1d1a16; font: 700 15px/1.4 var(--head); padding: 8px 12px; box-shadow: 3px 3px 0 var(--ln); text-align: left; }
.qz-nc:hover { transform: translate(-1px, -2px); }
.qz-nen-go { margin-top: 12px; }
.qz-ans-line { list-style: none; padding: 0; margin: 8px 0; border-left: 4px solid var(--ln); }
.qz-ans-line li { padding: 3px 0 3px 14px; position: relative; }
.qz-ans-line li::before { content: ''; position: absolute; left: -9px; top: 12px; width: 14px; height: 14px; border-radius: 50%; background: var(--yellow); border: 2.5px solid var(--ln); }
.qz-ans-line li.est::before { background: var(--paper); }
.qz-ans-line b { display: inline-block; min-width: 9.5em; font: 900 14px var(--head); margin-right: 8px; }

/* 15段チャレンジ */
.qz-ms { display: grid; grid-template-columns: 210px 1fr; gap: 16px; background: linear-gradient(160deg, #183c30, #0f1d3a); color: #f4f1e8; }
.qz-ms .qz-panel { color: var(--ink); }
.qz-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.qz-ladder li { display: flex; gap: 8px; align-items: center; font: 700 13px/1.3 var(--head); padding: 3px 8px; border-radius: 8px; color: #c9d6cf; }
.qz-ladder li span { width: 22px; text-align: right; font-weight: 900; }
.qz-ladder li.safe { color: #fff; } .qz-ladder li.safe span::after { content: '★'; color: var(--yellow); font-size: 10px; }
.qz-ladder li.done { color: var(--yellow); }
.qz-ladder li.now { background: var(--yellow); color: #1d1a16; font-weight: 900; box-shadow: 2px 2px 0 #000; }
.qz-lifes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.qz-lifes button { border: 2px solid #f4f1e8; border-radius: 999px; background: transparent; color: #f4f1e8; font: 700 13.5px var(--head); padding: 4px 14px; }
.qz-lifes button:not(:disabled):hover { background: var(--yellow); color: #1d1a16; }
.qz-lifes button:disabled { opacity: .3; text-decoration: line-through; }
.qz-confirm { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: 12px; padding: 10px; border: 2px dashed var(--yellow); border-radius: 14px; }
.qz-confirm p { margin: 0; font: 900 20px var(--head); color: var(--yellow); }
.qz-walk { text-align: right; margin: 12px 0 0; }
.qz-walk .btn { background: transparent; color: #f4f1e8; border-color: #f4f1e8; }
.qz-hint { margin: 8px 0 0; font-weight: 700; } .qz-hint b { background: #8b5cf6; }
.qz-poll { margin-top: 8px; display: grid; gap: 4px; }
.qz-poll div { display: grid; grid-template-columns: 1.6em 1fr 3em; gap: 6px; align-items: center; font-weight: 900; }
.qz-poll i { display: block; height: 14px; background: #3d8bfd; border: 2px solid var(--ln); border-radius: 4px; min-width: 2px; }
.qz-poll small { font-size: 12px; color: var(--ink2); }
.qz-ms .qz-fb-in { color: var(--ink); }
@media (max-width: 760px) {
  .qz-ms { grid-template-columns: 1fr; }
  .qz-ladder { flex-direction: row; flex-wrap: wrap; gap: 3px; }
  .qz-ladder li { font-size: 0; padding: 0; width: calc((100% - 42px) / 15); min-width: 16px; height: 18px; justify-content: center; border: 1px solid #c9d6cf; }
  .qz-ladder li span { font-size: 10px; width: auto; text-align: center; }
  .qz-ladder li.safe span::after { content: ''; }
  .qz-ladder li.safe { border-color: var(--yellow); }
}

/* 暗記カード */
.qz-akcard { perspective: 1200px; cursor: pointer; }
.qz-ak-in { position: relative; display: grid; transform-style: preserve-3d; transition: transform .5s; }
.qz-akcard.flip .qz-ak-in { transform: rotateY(180deg); }
.qz-ak-in .fr, .qz-ak-in .bk { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 3px solid var(--ln); border-radius: 18px; box-shadow: 5px 5px 0 var(--ln); padding: 18px 20px; min-height: 230px; background: #fffdf5; color: #1d1a16; }
.qz-ak-in .bk { transform: rotateY(180deg); background: #f2fbf6; }
.qz-ak-in .qz-ans { font: 900 22px/1.5 var(--head); }
.qz-read { border: 2px solid #1d1a16; border-radius: 999px; background: #fff; color: #1d1a16; font: 700 13px var(--head); padding: 2px 12px; }
.qz-ak-btns { margin-top: 16px; display: flex; justify-content: center; }
.qz-flip { font-size: 18px; padding: 12px 40px; }
.qz-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 560px; }
.qz-grade .btn { font-size: 17px; padding: 12px 6px; }
.qz-grade .g1 { background: #ffe0d9; color: #1d1a16; } .qz-grade .g2 { background: #fff0c2; color: #1d1a16; }
.qz-ak-in .qz-src a.pg { color: #1d1a16; }

/* 結果 */
.qz-result { background: var(--paper); border: 3px solid var(--ln); border-radius: 20px; box-shadow: 6px 6px 0 var(--ln); padding: 18px 20px; }
.qz-res-top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.qz-res-top img { width: 96px; height: 96px; }
.qz-res-t { margin: 0; font: 700 14px var(--head); color: var(--ink2); }
.qz-rank { margin: 0; font: 900 clamp(24px, 3.4vw, 34px)/1.3 var(--head); }
.qz-stars { margin: 0; font-size: 28px; letter-spacing: 4px; } .qz-stars i { font-style: normal; color: #d9ccb2; } .qz-stars i.on { color: #f5b301; text-shadow: 1px 1px 0 #1d1a16; }
.qz-res-num { margin-left: auto; text-align: right; display: grid; }
.qz-res-num b { font: 900 46px/1 var(--head); }
.qz-res-num small { font: 700 14px var(--head); }
.qz-res-num em { font-style: normal; background: #ef5644; color: #fff; border-radius: 6px; padding: 0 6px; margin-left: 6px; }
.qz-res-num span { font-weight: 700; }
.qz-res-msg { font-weight: 700; margin: 10px 0; }
.qz-vs { font: 900 18px var(--head); padding: 8px 14px; border-radius: 12px; background: var(--bg2); border: 2px solid var(--ln); }
.qz-vs.win { background: #e3f8ef; color: #0b5a45; } .qz-vs.lose { background: #ffe9e4; color: #8a2a12; }
.qz-res-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.qz-rev-h { margin: 20px 0 8px; }
.qz-rev { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.qz-rev li { border: 2px solid var(--ln); border-radius: 12px; background: var(--paper); }
.qz-rev li.ng { border-left: 8px solid #ef5644; } .qz-rev li.ok { border-left: 8px solid #00a88f; }
.qz-rev summary { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; padding: 8px 12px; font-weight: 700; list-style: none; }
.qz-rev summary::-webkit-details-marker { display: none; }
.qz-mk { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-weight: 900; }
.qz-mk.ok { background: #00a88f; } .qz-mk.ng { background: #ef5644; }
.qz-rev-b { padding: 0 14px 10px 46px; }
@media (max-width: 560px) { .qz-res-num { margin-left: 0; text-align: left; } .qz-rev-b { padding-left: 14px; } }
.qz-empty { text-align: center; padding: 30px; background: var(--paper); border: 3px solid var(--ln); border-radius: 20px; }
.qz-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 999; overflow: hidden; }
.qz-confetti i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; animation: qzFall 3s linear forwards; }
@keyframes qzFall { to { top: 105%; transform: rotate(720deg) translateX(40px); } }
@media (prefers-reduced-motion: reduce) { .qz-confetti { display: none; } .qz-card .in, .qz-ak-in { transition: none; } }

/* 入口：今日の1問・覚えたマップ */
.qz-daily .qz-panel { margin-bottom: 4px; }
.qz-mstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.qz-mstats div { border: 2.5px solid var(--ln); border-radius: 14px; background: var(--paper); box-shadow: 3px 3px 0 var(--ln); text-align: center; padding: 8px 4px; }
.qz-mstats b { display: block; font: 900 30px/1.2 var(--head); }
.qz-mstats span { font-size: 12.5px; font-weight: 700; color: var(--ink2); }
.qz-mstats .d b { color: #0e9b6e; } .qz-mstats .w b { color: #ef5644; }
@media (max-width: 560px) { .qz-mstats { grid-template-columns: repeat(2, 1fr); } }
.qz-mbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.qz-mrows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
@media (max-width: 760px) { .qz-mrows { grid-template-columns: 1fr; } }
.qz-mrow { display: grid; grid-template-columns: 28px 8.5em 1fr 4.2em; gap: 8px; align-items: center; text-decoration: none; color: var(--ink); padding: 3px 4px; border-radius: 8px; font-weight: 700; font-size: 14px; }
.qz-mrow:hover { background: rgba(255, 210, 63, .25); }
.qz-mrow .bar { position: relative; height: 14px; border: 2px solid var(--ln); border-radius: 999px; overflow: hidden; background: var(--paper); }
.qz-mrow .bar i { position: absolute; left: 0; top: 0; bottom: 0; }
.qz-mrow .bar .s { background: #ffe58a; } .qz-mrow .bar .d { background: #00a88f; }
.qz-mrow .n { text-align: right; font-size: 13px; }
.qz-legend i { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--ln); border-radius: 3px; vertical-align: -1px; }
.qz-legend i.s { background: #ffe58a; } .qz-legend i.d { background: #00a88f; }
.qz-reset { border: 0; background: none; color: var(--link); text-decoration: underline; font-size: 12.5px; }

/* Kahoot! */
.qz-steps { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .qz-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .qz-steps { grid-template-columns: 1fr; } }
.qz-steps li { border: 2.5px solid var(--ln); border-radius: 14px; background: var(--paper); box-shadow: 3px 3px 0 var(--ln); padding: 10px 14px; }
.qz-steps b { display: flex; align-items: center; gap: 8px; font: 900 16px var(--head); }
.qz-steps b span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--ln); color: #1d1a16; flex: none; }
.qz-steps p { margin: 4px 0 0; font-size: 14px; }
.qz-kh-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.qz-kh-btns img { width: 24px; height: 24px; }
.qz-kh-msg { color: #0b5a45; font-weight: 700; min-height: 1.4em; }
.qz-kh-tbl { font-size: 13px; }
.qz-kh-tbl td { vertical-align: top; }
.qz-kh-tbl td.c { text-align: center; }
.qz-kh-prev .tbl-wrap { overflow-x: auto; max-height: 520px; }
.qz-plan { list-style: none; padding: 0; display: grid; gap: 8px; }
.qz-plan li { display: grid; grid-template-columns: 4.5em 1fr; gap: 12px; border: 2.5px solid var(--ln); border-radius: 14px; background: var(--paper); padding: 10px 14px; box-shadow: 3px 3px 0 var(--ln); }
.qz-plan .t { display: grid; place-items: center; font: 900 18px var(--head); background: #1f4e3d; color: var(--yellow); border-radius: 10px; }
.qz-plan p { margin: 2px 0 0; }

/* プロンプト */
.qz-pfs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
@media (max-width: 760px) { .qz-pfs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .qz-pfs { grid-template-columns: 1fr; } }
.qz-pf { display: grid; gap: 4px; font: 900 14px var(--head); }
.qz-pf select { font: 700 16px var(--font); border: 2.5px solid var(--ln); border-radius: 12px; padding: 8px 10px; background: var(--paper); color: var(--ink); }
.qz-pdn { color: var(--ink2); font-weight: 400; }
.qz-pbox pre.prompt { white-space: pre-wrap; word-break: break-all; max-height: 360px; overflow: auto; background: var(--bg2); border: 2px solid var(--ln); border-radius: 12px; padding: 12px; font-size: 13.5px; line-height: 1.7; }
.qz-cmsg { margin-left: 8px; color: #0b5a45; font-weight: 700; }

/* 一覧 */
.qz-ls-tools .qz-jump { display: flex; flex-wrap: wrap; gap: 4px; }
.qz-ls { margin: 26px 0; }
.qz-ls .sec-title small { font-size: 14px; color: var(--ink2); }
.qz-li { border: 2px solid var(--ln); border-radius: 12px; background: var(--paper); margin-bottom: 6px; }
.qz-li summary { cursor: pointer; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-weight: 700; }
.qz-lq { flex-basis: 100%; }
@media (min-width: 760px) { .qz-lq { flex-basis: auto; flex: 1; min-width: 0; } }
.qz-la { padding: 0 14px 10px; border-top: 2px dashed var(--line2); }
.qz-la p { margin: 6px 0; }
.qz-howto { margin-top: 8px; }
.qz-note { margin-top: 30px; }
@media print {
  .qz-li { break-inside: avoid; border-width: 1px; }
  .qz-li summary { padding: 3px 6px; }
  .qz-nav, .qz-ls-tools, .share { display: none !important; }
}