/* 感覚の検定 — 見た目（12号の型: 紙 #F6EFE2・紺 #14213D＝正解と文字・色インク＝あなた。2回刷りで「ずれ」を見せる）
   検定ごとに替わるのは --bg（地）と --you（インク）だけ。js/kentei/<id>.js の設定から art.js が入れる */
@font-face { font-family: Anton; src: url(fonts/Anton-Regular.ttf) format('truetype'); font-display: swap; }
:root {
  --paper: #F6EFE2; --ink: #14213D;
  --bg: var(--paper); --you: #FF4B5C;
  --f-en: Anton, "Arial Narrow", Impact, sans-serif;
  --f-jp: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --pad: 18px;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { background: var(--ink); color: var(--ink); font-family: var(--f-jp); font-weight: 700; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
.en { font-family: var(--f-en); font-weight: 400; letter-spacing: .01em; line-height: .95; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
svg { display: block; overflow: visible; }
svg .you, .you { mix-blend-mode: multiply; }
.svgbox { display: contents; }

#app { position: relative; max-width: 480px; height: 100vh; height: 100dvh; margin: 0 auto; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.head { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) var(--pad) 6px; }
.main { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--pad); display: flex; flex-direction: column; }
.foot { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 8px var(--pad) calc(14px + env(safe-area-inset-bottom)); }
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand .word { font-size: 30px; }
.brand .jp { font-size: 11px; letter-spacing: .05em; }
.lead { font-size: 14px; line-height: 1.6; }
.note { font-size: 12px; line-height: 1.5; opacity: .85; margin-top: 6px; }
.big { font-size: 26px; line-height: 1.3; margin: 10px 0 8px; }

.dots { display: flex; gap: 5px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--ink); }
.dots i.done { background: var(--ink); }
.dots i.now { background: var(--paper); border-color: var(--paper); box-shadow: 0 0 0 2px var(--ink); }
.tagp { font-size: 11px; background: var(--ink); color: var(--paper); border-radius: 12px; padding: 3px 10px; letter-spacing: .08em; }

.k-btn { border: 0; background: none; border-radius: 28px; font-weight: 800; font-size: 16px; letter-spacing: .08em; }
.k-btn.primary, .k-btn.k-ok { height: 52px; background: var(--ink); color: var(--paper); width: 100%; }
.k-btn.ghost { height: 42px; border: 2.5px solid var(--ink); width: 100%; font-size: 14px; }
.k-btn.small { height: 42px; font-size: 14px; }
.k-btn:disabled { opacity: .35; }
.row2 { display: flex; gap: 8px; }
.row2 .k-btn { flex: 1; min-width: 0; }
.hright { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* 「やめる」は右上の隅（「次へ」と重ならない所）。1回目で「やめますか？」に変わる */
.quitbtn { flex: none; min-height: 44px; padding: 0 2px 0 8px; font-size: 11px; letter-spacing: .04em; border-radius: 0; text-decoration: underline; text-underline-offset: 3px; opacity: .8; }
.quitbtn.sure { opacity: 1; text-decoration: none; background: var(--ink); color: var(--paper); border-radius: 22px; padding: 0 12px; min-height: 36px; }
.soundhelp { margin-top: 12px; background: var(--paper); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.55; }
.soundhelp[hidden] { display: none; }
.soundhelp ul { margin: 4px 0 0 18px; }
.soundhelp li + li { margin-top: 4px; }
.soundnote { font-size: 13px; margin-top: 6px; display: inline-block; background: var(--ink); color: var(--paper); border-radius: 12px; padding: 3px 10px; }
.foothold { height: 52px; } .foothold.two { height: 102px; }
.toast { position: absolute; left: 50%; top: calc(54px + env(safe-area-inset-top)); transform: translateX(-50%); background: var(--ink); color: var(--paper); font-size: 13px; padding: 10px 16px; border-radius: 20px; z-index: 20; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.legend { display: flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: .02em; opacity: .9; }
.legend svg { flex: none; }

/* ---- 一覧 ---- */
[data-screen=list] .head { align-items: baseline; }
[data-screen=list] .head .ttl { font-size: 20px; letter-spacing: .04em; }
[data-screen=list] .head .en { font-size: 15px; opacity: .9; }
[data-screen=list] .lead { margin: 2px 0 10px; font-size: 13px; }
.cards { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card { position: relative; border-radius: 16px; background: var(--bg); overflow: hidden; display: flex; flex-direction: column; padding: 12px; min-height: 0; isolation: isolate; }
.card .mark { flex: 1; min-height: 0; width: 100%; margin-bottom: 4px; }
.card .ttl .en { font-size: 44px; }
.card .ttl .jp { font-size: 13px; margin-top: 4px; letter-spacing: .06em; }
.card .info { font-size: 11px; margin-top: 6px; min-height: 18px; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.card .info b { font-size: 15px; }
.card .tag { background: var(--ink); color: var(--paper); border-radius: 10px; padding: 2px 8px; font-size: 10.5px; }
.card .cfoot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.card .cfoot .en { font-size: 17px; }
.qdots { display: flex; align-items: center; gap: 2px; min-width: 0; }
.qdots .pair { width: 17px; height: 10px; flex: none; }
.qdots .empty { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--ink); opacity: .55; margin: 0 4px; }
[data-screen=list] .foot { flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; }
[data-screen=list] .foot > .en { font-size: 13px; white-space: nowrap; }

/* ---- はじめる前・音の確かめ・交代 ---- */
[data-screen=intro] .main > .mark { flex: 1; min-height: 60px; max-height: 440px; align-self: flex-start; height: 100%; aspect-ratio: 320 / 560; }
.intro { flex: none; padding: 6px 0 4px; }
.intro .rec { font-size: 13px; margin-top: 6px; }
.intro .rec b { font-size: 20px; }
.slots { margin: 6px 0 0 20px; font-size: 13px; line-height: 1.6; }
.slots .todo { opacity: .5; }
.vsbanner { margin-top: 8px; background: var(--ink); color: var(--paper); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.vsbanner b { font-size: 14px; }
[data-screen=sound] .main, [data-screen=handoff] .main { justify-content: center; align-items: flex-start; }

/* ---- 問 ---- */
.qtitle { font-size: 19px; display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.qtitle small { font-size: 13px; opacity: .75; letter-spacing: .04em; }
.qinst { font-size: 13px; line-height: 1.5; margin-top: 4px; min-height: 2.9em; }
.stage { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 6px 0; }
.timebar { height: 9px; border-radius: 5px; background: color-mix(in srgb, var(--ink) 16%, transparent); overflow: hidden; }
.timebar i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }
/* 残り3秒: 帯の色が紙の色に変わって点滅する（字は足さない）*/
.timebar.hurry { background: var(--ink); animation: hurrybar .4s steps(2, jump-none) infinite; }
.timebar.hurry i { background: var(--paper); }
@keyframes hurrybar { from { scale: 1 1; } to { scale: 1 1.9; } }
.k-status { font-size: 15px; min-height: 1.4em; text-align: center; }
.k-lamp { flex: none; width: 76px; height: 76px; border-radius: 50%; border: 5px solid var(--ink); position: relative; transition: background .05s; }
.k-lamp.on { background: var(--ink); }
.k-lamp-sound.on::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 4px solid var(--you); mix-blend-mode: multiply; animation: ring .7s ease-out infinite; }
@keyframes ring { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.k-lamps { display: flex; gap: 26px; }
.k-big { font-family: var(--f-en); font-weight: 400; font-size: 56px; line-height: 1; }
.k-sliderwrap { width: 100%; }
.k-ends { display: flex; align-items: center; gap: 8px; font-size: 11px; margin-top: 2px; }
.k-ends .sp { flex: 1; }
.k-nudge { flex: none; width: 44px; height: 44px; border: 2.5px solid var(--ink); border-radius: 50%; font-size: 18px; letter-spacing: 0; line-height: 1; }
.k-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; }
.k-slider::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--ink); }
.k-slider::-moz-range-track { height: 8px; border-radius: 4px; background: var(--ink); }
.k-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 38px; height: 38px; margin-top: -15px; border-radius: 50%; background: var(--you); border: 5px solid var(--ink); }
.k-slider::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--you); border: 5px solid var(--ink); }
.k-slider:disabled { opacity: .3; }
.k-pips { display: flex; gap: 6px; }
.k-pips i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); }
.k-pips i.on { background: var(--ink); }
.k-choices { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: 100%; }
.k-choice { aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 14px; font-family: var(--f-en); font-weight: 400; font-size: 24px; letter-spacing: 0; }
.k-choice.picked { background: var(--ink); color: var(--paper); opacity: 1; }
.k-choices .k-choice.truth { background: var(--ink); color: var(--paper); opacity: 1; scale: 1.08; }
.k-choices .k-choice.miss { background: var(--you); color: var(--ink); opacity: .75; }
.k-choices.locked .k-choice:not(.picked) { opacity: .35; }
.k-beats { grid-template-columns: repeat(7, 1fr); gap: 5px; }
.k-beats .k-choice { border-radius: 50%; font-size: 15px; }
.k-beats .k-choice.flash { background: var(--ink); color: var(--ink); opacity: 1; }
.k-pad, .k-hold { flex: none; width: 150px; height: 150px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 13px; letter-spacing: .04em; padding: 0 18px; line-height: 1.4; touch-action: none; }
.k-hold { position: relative; }
.k-hold .ring { position: absolute; inset: 0; border-radius: 50%; border: 5px solid var(--ink); opacity: 0; pointer-events: none; }
.k-hold.down .ring { opacity: 1; animation: holdring .45s ease-out forwards, holdpulse .8s .45s ease-in-out infinite alternate; }
@keyframes holdring { from { inset: 0; } to { inset: -16px; } }
@keyframes holdpulse { from { inset: -16px; } to { inset: -11px; } }
.k-pad.pulse { background: var(--paper); color: var(--ink); }
.k-pad.hit { transform: scale(.95); }
.k-hold.down { background: var(--you); color: var(--ink); transform: scale(.96); }
.k-pad:disabled, .k-hold:disabled { opacity: .4; }
.k-pad.pulse:disabled { opacity: 1; }

/* ---- 答え合わせ（色の丸=あなた・紺の丸=正解）---- */
.rv { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rv-stage { flex: 1; min-height: 0; display: flex; gap: 8px; }
.rv-col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.rv-box { flex: 1; min-height: 110px; position: relative; overflow: hidden; isolation: isolate; }
.rv-truth, .rv-you { position: absolute; left: 50%; top: 50%; width: calc(var(--r, 40px) * 2); height: calc(var(--r, 40px) * 2); margin: calc(var(--r, 40px) * -1) 0 0 calc(var(--r, 40px) * -1); border-radius: 50%; }
.rv-truth { background: var(--ink); }
.rv-you { background: var(--you); mix-blend-mode: multiply; opacity: 0; }
.rv-you.in { opacity: 1; animation: pop .22s ease-out; }
@keyframes pop { from { scale: .5; opacity: 0; } to { scale: 1; opacity: 1; } }
.rv-box.close .rv-truth, .rv-box.close .rv-you { animation: shake var(--settle, 260ms) linear; }
@keyframes shake { 0%, 100% { translate: 0 0; } 20% { translate: 3px 0; } 45% { translate: -3px 0; } 70% { translate: 3px 0; } 90% { translate: -2px 0; } }
.rv-box.far .rv-you { translate: 0 5px; transition: translate var(--settle, 260ms) ease-out; }
.rv-lab { position: absolute; left: 50%; top: 50%; font-size: 11.5px; white-space: nowrap; z-index: 2; }
.rv-lab.c { translate: -50% 0; }
.rv-score { flex: none; display: flex; align-items: center; gap: 12px; padding: 4px 0 12px; min-height: 76px; }
[data-screen=reveal] .main { overflow: hidden; }
.rv-num { font-size: clamp(54px, 21vw, 84px); }
.rv-word { font-size: 21px; line-height: 1.15; opacity: 0; transition: opacity .2s; }
.rv-score.done .rv-word { opacity: 1; }
.rv-note { font-size: 12px; opacity: .85; margin-top: 3px; line-height: 1.35; }
.rv-duo .rv-score { flex-direction: column; align-items: flex-start; gap: 2px; }
.rv-duo .rv-num { font-size: 44px; }
.rv-duo .rv-word { font-size: 15px; }
.rv-detail { flex: none; margin: 2px 0; }
.rv-count { display: flex; gap: 10px; align-items: center; }
.rv-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rv-cell b { font-size: 22px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.rv-cell b.t { background: var(--ink); color: var(--paper); }
.rv-cell b.y { border: 3px solid var(--ink); opacity: .6; }
.rv-cell b.y.hit { opacity: 1; background: var(--paper); }
.rv-celllab { font-size: 10.5px; align-items: flex-start; }
.rv-celllab span { height: 30px; display: flex; align-items: center; }
.rv-ticks { padding: 0 6px; }
.rv-row { position: relative; height: 16px; margin: 3px 0; }
.rv-row i { position: absolute; top: 0; width: 4px; margin-left: -2px; height: 100%; border-radius: 2px; background: var(--ink); }
.rv-row.y i { background: var(--paper); }
.rv-row i.pick { width: 12px; margin-left: -6px; border-radius: 6px; }
.rvslot { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rvslot.on { min-height: 40px; }
.oppline { font-size: 12.5px; border: 2px solid var(--ink); border-radius: 14px; padding: 3px 10px; opacity: .75; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oppline.won { opacity: 1; }
.qbest { font-size: 12px; opacity: .8; }
.qbest.up { opacity: 1; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 5px 12px; rotate: -3deg; animation: stamp .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes stamp { from { scale: 2; opacity: 0; } to { scale: 1; opacity: 1; } }

/* ---- 2回刷りの文字 ---- */
.dbl { position: relative; display: inline-block; }
.dbl .g { position: absolute; left: 0; top: 0; color: var(--you); mix-blend-mode: multiply; pointer-events: none; }

/* ---- 結果 ---- */
.rright { text-align: right; }
.rright .cnt { font-family: Anton, var(--f-jp); font-weight: 800; font-size: 17px; }
.rright .date { font-size: 11px; opacity: .7; margin-top: 2px; letter-spacing: .04em; }
.hero { position: relative; flex: none; display: flex; align-items: center; gap: 18px; padding: 4px 0 8px; isolation: isolate; }
.hero .grade { font-size: clamp(110px, 40vw, 168px); line-height: .9; min-width: .6em; text-align: center; }
.tot .l { font-size: 12px; letter-spacing: .08em; display: flex; gap: 8px; align-items: baseline; }
.tot .l .o { font-size: 13px; opacity: .7; }
.tot .num { display: block; font-size: clamp(54px, 19vw, 76px); margin-top: 4px; }
.scale { display: flex; gap: 3px; margin-top: 6px; }
.scale i { font-style: normal; font-size: 15px; width: 21px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 6px; opacity: .45; }
.scale i.on { background: var(--ink); color: var(--paper); opacity: 1; }
.stamp { position: absolute; right: 0; top: 0; background: var(--ink); color: var(--paper); font-family: Anton, var(--f-jp); font-weight: 800; font-size: 13px; letter-spacing: .08em; padding: 6px 12px 5px; border-radius: 16px; rotate: -6deg; scale: 0; }
.stamp.in { scale: 1; transition: scale .35s cubic-bezier(.2,1.8,.4,1); }
.growth { flex: none; border-top: 3px solid var(--ink); padding: 8px 0 4px; isolation: isolate; }
.gline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; font-size: 11.5px; }
.gline .gsm { font-size: 26px; }
.gline b { font-size: 19px; }
.gline .arrow { font-size: 18px; margin: 0 2px; }
.gline .plus { background: var(--ink); color: var(--paper); font-size: 18px; border-radius: 9px; padding: 4px 8px 2px; rotate: -4deg; margin-left: 4px; }
.spark { width: 100%; height: 48px; margin-top: 2px; }
.five { flex: none; border-top: 3px solid var(--ink); padding-top: 8px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; isolation: isolate; }
.five .c { border: 0; background: none; text-align: center; padding: 2px 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.five .pair { width: 100%; max-width: 60px; height: auto; }
.five .sc { font-size: 21px; margin-top: 5px; }
.five .jp { font-size: 10.5px; margin-top: 3px; white-space: nowrap; }
.five .df { font-size: 12px; min-height: 14px; margin-top: 2px; opacity: .6; }
.five .df.up { opacity: 1; }
/* 結果は縦に流す（中身が増えても潰さない・重ねない）*/
[data-screen=result] .main > * { flex: none; }
[data-screen=result] .legend { margin: 10px 0 8px; }
.bestline { font-size: 11.5px; margin-top: 6px; opacity: .85; }
.k-btn.weak { margin-top: 10px; height: 44px; font-size: 13px; letter-spacing: .02em; }
.note.idle { background: var(--ink); color: var(--paper); border-radius: 12px; padding: 8px 12px; opacity: 1; margin: 0 0 8px; }
.chal { border-top: 3px solid var(--ink); margin-top: 6px; padding: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.chal .name { height: 44px; border-radius: 22px; border: 2.5px solid var(--ink); background: var(--paper); color: var(--ink); padding: 0 16px; font: inherit; font-size: 16px; width: 100%; }
.linkbox { display: block; width: 100%; min-height: 92px; margin: 8px 0; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-weight: 500; font-size: 12.5px; line-height: 1.5; padding: 8px 10px; resize: none; overflow-wrap: anywhere; }

/* ---- 2人で比べた版（左=あなた 色インク・右=相手 紙の色）---- */
.versus { flex: none; isolation: isolate; }
.vtop { display: flex; justify-content: space-between; align-items: flex-end; gap: 6px; }
.half { flex: 1; min-width: 0; text-align: center; }
.half.lose { opacity: .55; }      /* くすませるのは負けた側 */
.half .nm { font-size: 13px; display: flex; justify-content: center; align-items: center; gap: 6px; }
.half .nm > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.half .win { flex: none; background: var(--ink); color: var(--paper); font-size: 11px; letter-spacing: .1em; padding: 3px 8px 2px; border-radius: 10px; rotate: -8deg; }
.half .gr { font-size: 84px; line-height: .95; display: inline-block; }
.half:not(.me) .gr { font-size: 66px; }
.half .sc { font-size: 26px; }
.vtop .vs { font-size: 16px; opacity: .6; padding-bottom: 40px; }
.rows { border-top: 3px solid var(--ink); margin-top: 6px; padding-top: 6px; }
.vrow { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; height: 26px; }
.vrow .lab { text-align: center; font-size: 10.5px; white-space: nowrap; }
.vrow .side { display: flex; align-items: center; gap: 5px; min-width: 0; }
.vrow .side.l { justify-content: flex-end; }
.vrow .bar { display: block; height: 15px; flex: none; }
.vrow .bl { background: var(--you); mix-blend-mode: multiply; border-radius: 8px 0 0 8px; }
.vrow .br { background: var(--paper); border-radius: 0 8px 8px 0; }
.vrow .n { font-size: 17px; }
.vrow .n.lose { opacity: .45; }
.fin { text-align: center; margin: 6px 0 4px; display: flex; justify-content: center; align-items: baseline; gap: 10px; }
.fin small { font-size: 13px; letter-spacing: .06em; }
.fin b { font-size: 34px; }

/* 高い画面は成績の文字と5問を大きく */
@media (min-height: 740px) and (min-width: 360px) {
  .hero { padding: 14px 0 18px; }
  .hero .grade { font-size: 200px; }
  .five { padding-top: 16px; }
  .five .pair { max-width: 68px; }
  .five .sc { font-size: 24px; margin-top: 8px; }
  .five .jp { font-size: 11.5px; }
  .growth { padding: 12px 0 8px; }
  .spark { height: 64px; }
  .vtop { padding: 8px 0; } .vrow { height: 34px; } .vrow .bar { height: 20px; } .vrow .n { font-size: 20px; }
  .half .gr { font-size: 120px; } .half:not(.me) .gr { font-size: 92px; }
}
/* 低い画面（320×568 など）は詰める */
@media (max-height: 620px) {
  .head { padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: 2px; }
  .brand .word { font-size: 24px; }
  .k-btn.primary, .k-btn.k-ok { height: 46px; }
  .k-btn.ghost { height: 44px; }
  .foothold { height: 46px; } .foothold.two { height: 96px; }
  .foot { gap: 6px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .hero .grade { font-size: 104px; }
  .tot .num { font-size: 50px; }
  .k-pad, .k-hold { width: 124px; height: 124px; }
  .k-lamp { width: 58px; height: 58px; }
  .rv-num { font-size: 56px; }
  .card .ttl .en { font-size: 36px; }
  .half .gr { font-size: 66px; } .half:not(.me) .gr { font-size: 52px; }
  .vrow { height: 23px; } .fin b { font-size: 28px; } .fin { margin: 2px 0; }
  .spark { height: 36px; }
  .qinst { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .k-lamp-sound.on::after { animation: none; } }

/* ==== ここから: 12号の再検品（11/12 午後）の直しと、時間の新2問・距離感の検定のぶん ====
   約束: あなた = 色インク（--you）・紙の色（白）は対戦の相手専用・ひとことは紺の不透明・主ボタンは下端固定 */
:root { --f-jp: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", Meiryo, sans-serif; }
/* あなたの目盛り・丸は色インク */
.rv-row.y i { background: var(--you); mix-blend-mode: multiply; }
.rv-cell b.y { border: 0; background: var(--you); color: var(--ink); opacity: 1; }
.rv-cell b.y.hit { background: var(--you); box-shadow: 0 0 0 3px var(--ink); }
.rv-ticks, .rv-count { isolation: isolate; }
/* ひとことは紺の不透明・補足は 80% */
.rv-word { opacity: 1; transition: none; color: var(--ink); }
.rv-note { opacity: .8; }
/* 添え字は丸の中へ */
.rv-lab.in { translate: -50% -50%; font-size: 12px; color: var(--ink); }
.rv-lab.onink { color: var(--paper); }
/* いちばん上の段: 紙の色の輪が1回だけ広がる */
.rv-box.perfect::after { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--r, 40px) * 2); height: calc(var(--r, 40px) * 2); margin: calc(var(--r, 40px) * -1) 0 0 calc(var(--r, 40px) * -1); border-radius: 50%; border: 6px solid var(--paper); pointer-events: none; animation: halo .75s ease-out forwards; }
@keyframes halo { from { scale: 1; opacity: .95; } to { scale: 1.75; opacity: 0; } }
/* 対戦: 成績の文字は両方とも不透明。差は WIN の札と点の濃さだけ。棒は 100点 = 片側の幅いっぱい */
.half.lose { opacity: 1; } .half.lose .sc { opacity: .6; }
.half .nm { flex-direction: column; gap: 3px; }
.half .nm > span:first-child { max-width: 8.6em; }
.half .win.off { visibility: hidden; }
.vrow { grid-template-columns: 1fr 58px 1fr; }
.vrow .bar { width: calc((100% - 50px) * var(--v, 0)); min-width: 3px; }
.vrow .n { flex: none; width: 45px; }
.vrow .side.l .n { text-align: right; }
.vrow .n.lose { opacity: .6; }
/* 「自己ベスト更新」の札は総合点の上 */
.stamp { position: static; display: inline-block; margin: 0 0 8px; }
.prevline { font-size: 11.5px; margin-top: 2px; opacity: .85; } .prevline.up { opacity: 1; }
.qprev { font-size: 12px; opacity: .8; } .qprev.up { opacity: 1; }
/* 出題: 主ボタンは下端（答え合わせの「次へ」と同じ位置）。残り時間は細い帯で上に */
[data-screen=q] .foot { padding-top: 0; }
[data-screen=q] .stage { justify-content: flex-start; padding: 3vh 0 0; }
[data-screen=q] .stage:has(> .k-pad), [data-screen=q] .stage:has(> .k-hold) { justify-content: center; padding-top: 0; }
[data-screen=q] .stage > .k-ok { margin-top: auto; flex: none; }
.timebar { flex: none; height: 4px; border-radius: 2px; margin-top: 8px; }
.k-big small { font-family: var(--f-jp); font-weight: 800; font-size: .5em; margin-left: .06em; }
/* 結果の5問の丸は、欄の幅いっぱい（答え合わせと同じ式のまま入る最大）。差の数字は 1.3 倍 */
.five .pair { max-width: none; }
.five .df { font-size: 15.5px; min-height: 18px; }
.spark { height: 58px; }
/* 入口の印は中央・幅の 60% */
[data-screen=intro] .main > .mark { align-self: center; width: 60%; height: auto; aspect-ratio: auto; }
/* 一覧は3本並び。題の字は札の幅に合わせる */
.cards { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.card { padding: 9px 8px; container-type: inline-size; }
.card .ttl .en { font-size: clamp(15px, 23.5cqw, 44px); }
.card .ttl .jp { font-size: clamp(9.5px, 11.5cqw, 13px); letter-spacing: 0; white-space: nowrap; }
.card .info { font-size: 10px; } .card .info b { font-size: 13px; }
.card .cfoot { gap: 2px; } .card .cfoot .en { font-size: 15px; }
.qdots { gap: 1px; } .qdots .pair { width: clamp(11px, 16cqw, 17px); height: auto; }
/* 交代: 大きい数字 */
.big.hand { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.big.hand .num { font-size: 128px; line-height: .9; }
/* 音の確かめは中央ぞろえ */
[data-screen=sound] .main { align-items: center; text-align: center; }
.soundhelp { text-align: left; }
/* 問題の絵に重ねる答え合わせ（距離感の検定）*/
.rv-pic { flex: 1.5 1 0; min-height: 84px; width: 100%; isolation: isolate; }
.haspic .rv-box { flex: 1 1 0; min-height: 70px; }
.pic-base { stroke: var(--ink); fill: none; stroke-linecap: round; opacity: .4; } .pic-base.fill { fill: var(--ink); stroke: none; opacity: .5; }
.pic-base.dash, .pic-truth.dash { stroke-dasharray: 3 7; }
.pic-truth { stroke: var(--ink); fill: none; stroke-linecap: round; opacity: 0; transition: opacity .25s; } .pic-truth.fill { fill: var(--ink); stroke: none; }
.shown .pic-truth { opacity: 1; }
.pic-you { stroke: var(--you); fill: none; stroke-linecap: round; mix-blend-mode: multiply; } .pic-you.fill { fill: var(--you); stroke: none; }
/* 絵の上に指で印を置く板 */
.k-board { flex: 1 1 auto; width: 100%; min-height: 96px; max-height: 50vh; touch-action: none; -webkit-user-select: none; user-select: none; isolation: isolate; }
.k-board.locked { pointer-events: none; }
.b-line { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; fill: none; }
.b-thin { stroke: var(--ink); stroke-width: 3; fill: none; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .75; }
.b-dot { fill: var(--ink); }
.b-text { font-family: var(--f-en); font-size: 46px; fill: var(--ink); }
.b-mark line { stroke: var(--you); stroke-width: 6; stroke-linecap: round; mix-blend-mode: multiply; }
.b-mark circle { fill: var(--you); stroke: var(--ink); stroke-width: 3; }
.b-arm { stroke: var(--you); stroke-width: 9; stroke-linecap: round; mix-blend-mode: multiply; }
.b-knob { fill: var(--you); stroke: var(--ink); stroke-width: 3; }
/* 輪（時間の検定）*/
.k-ring { flex: none; width: 150px; height: 150px; transform: rotate(-90deg); }
.k-ring .track { fill: none; stroke: color-mix(in srgb, var(--ink) 18%, transparent); stroke-width: 12; }
.k-ring .arc { fill: none; stroke: var(--ink); stroke-width: 12; }
.k-ring .arc.hidden { opacity: 0; }
@media (max-height: 620px) {
  .big.hand .num { font-size: 88px; } .k-ring { width: 116px; height: 116px; } .spark { height: 44px; }
  [data-screen=q] .stage { padding-top: 1vh; gap: 8px; }
}
/* 横向き（低い画面）でも問題の絵が切れないよう、説明を1行にして絵を縮める */
@media (orientation: landscape) and (max-height: 460px) {
  .qinst { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 0; }
  .k-board { max-height: 46vh; min-height: 70px; } .k-ring { width: 90px; height: 90px; } .k-pad, .k-hold { width: 96px; height: 96px; }
  .k-btn.primary, .k-btn.k-ok { height: 40px; } .head { padding-top: 4px; } .brand .word { font-size: 20px; }
}
/* 狭い画面では、検定の途中の上の帯から日本語の名前を省く（丸と「やめる」に場所をゆずる）*/
.brand .jp { white-space: nowrap; }
@media (max-width: 360px) { div.brand .jp { display: none; } }
/* ==== デザインの検定（4本目）と、一覧の 2×2 ==== */
.b-letter { fill: var(--ink); }
.b-letter.you { fill: var(--you); mix-blend-mode: multiply; }
.b-frame { fill: none; stroke: var(--ink); stroke-width: 5; }
.b-block rect { fill: var(--you); mix-blend-mode: multiply; }
.b-block line { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.b-block line.b-textline { opacity: .45; }
.b-block-solo { fill: var(--you); mix-blend-mode: multiply; }
.rv-pic text { stroke: none; }
/* 1段ずつ動かす矢印（微調整）。「これで決める」のすぐ上 */
.k-arrows { flex: none; display: flex; gap: 12px; justify-content: center; }
[data-screen=q] .stage > .k-arrows { margin-top: auto; }
[data-screen=q] .stage > .k-arrows + .k-ok { margin-top: 0; }
/* 一覧は 2×2（4本。横4列だと1枚 66px になり、大きい印と題字が保てないため）*/
.cards { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 8px; }
.card .ttl .en { font-size: clamp(18px, 22cqw, 40px); }
.card .ttl .jp { font-size: clamp(10px, 8.5cqw, 13px); }
.card .info { font-size: 10.5px; margin-top: 3px; }
@media (max-height: 620px) { .card { padding: 6px 8px; } .card .info { min-height: 0; } }
/* 検定を選ぶ画面へ戻る動線 */
.rv-pic { overflow: hidden; }
a.brand { flex-wrap: wrap; row-gap: 0; }
.backlink { flex: 0 0 100%; font-size: 11px; letter-spacing: .04em; opacity: .85; margin-bottom: 1px; }
.nextup { flex: none; display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; padding: 8px 12px; border-radius: 14px; background: var(--bg); isolation: isolate; }
.nextup .mark { flex: none; width: 40px; height: 70px; }
.nextup .nt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nextup .lab { font-size: 10.5px; letter-spacing: .04em; }
.nextup .w { font-size: 26px; }
.nextup .jp { font-size: 10.5px; }
.nextup .go { font-size: 22px; }
a.k-btn.others { display: flex; align-items: center; justify-content: center; height: 40px; font-size: 13px; }
/* ==== 11/12 初見検品（2回目）の直し ==== */
.repno { margin-left: auto; font-size: 15px; opacity: .8; }
.qtitle.en { font-size: 24px; letter-spacing: .02em; }
.repflash { font-size: 64px; margin: auto; animation: pop .2s ease-out; }
.five .c { position: relative; }
.five .df { opacity: .45; font-size: 12px; } .five .df.up { opacity: 1; font-size: 15.5px; }      /* 下がった分は小さく控えめに */
.bestq { font-size: 10px; letter-spacing: .08em; background: var(--ink); color: var(--paper); border-radius: 8px; padding: 2px 6px 1px; margin-top: 2px; rotate: -4deg; }
.rright .cnt { white-space: nowrap; }
.soundexits { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.soundexits .row2 { flex-wrap: wrap; }
.soundexits a.k-btn { display: flex; align-items: center; justify-content: center; height: 44px; font-size: 12.5px; letter-spacing: 0; flex: 1 1 30%; white-space: nowrap; padding: 0 6px; }
.k-btn.ghost.dark { height: 44px; }
.fin .ties { font-size: 11px; opacity: .8; }
a.k-btn.others { margin: 6px 0 10px; flex: none; }
.k-beats-show .k-choice { pointer-events: none; opacity: 1 !important; color: transparent; }
.k-beats-show .k-choice.mine { border-color: var(--you); border-width: 5px; }
.k-beats-show .k-choice.mine.flash { background: var(--you); }
/* 横向きの低い画面（スマホを横にしたとき）は、絵と文が入りきらないので「縦にしてください」を出す */
.rotate { display: none; }
@media (orientation: landscape) and (max-height: 440px) {
  .rotate { display: flex; position: fixed; inset: 0; z-index: 50; background: var(--ink); color: var(--paper); align-items: center; justify-content: center; font-size: 18px; text-align: center; padding: 20px; }
}
/* 「聞こえない」の行き先のボタン: 320 幅で字がはみ出さないよう、2つずつ並べる */
.soundexits a.k-btn { flex: 1 1 46%; font-size: 12px; white-space: normal; line-height: 1.2; text-align: center; }
/* ==== 11/12 夜: 12号 3回目・検品2 の直し ==== */
/* 寸法線の答え合わせ（デザインの検定）: あなた = 色のベタ・正解 = 紺の細い枠線・ずれている所に寸法線と数字 */
.pic-solid { fill: var(--ink); stroke: none; }
.pic-frame { fill: none; stroke: var(--ink); stroke-width: 5; }
.pic-you { fill: var(--you); stroke: none; }
line.pic-you, path.pic-you { fill: none; stroke: var(--you); }
.pic-outline { fill: none; stroke: var(--ink); stroke-width: 2; opacity: 0; transition: opacity .25s; }
.pic-dim { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; opacity: 0; transition: opacity .25s .1s; }
text.pic-dim { fill: var(--ink); stroke: none; font-family: var(--f-en); font-size: 14px; }
.shown .pic-outline, .shown .pic-dim { opacity: 1; }
.rv-sub { opacity: .8; }
.thinpic .rv-pic { flex: 0 0 64px; min-height: 0; }
/* 1回ごとの短い答え合わせ */
.mini { width: 100%; margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mini .rv-pic { flex: none; width: 100%; max-height: 40vh; }
.mini-score { display: flex; align-items: baseline; gap: 12px; }
.mini-score .n { font-size: 44px; }
.mini-score .t { font-size: 14px; }
.tmout { margin: auto; background: var(--ink); color: var(--paper); border-radius: 16px; padding: 8px 16px; font-size: 14px; text-align: center; }
.mini .tmout { margin: 0; }
/* 何回目かは点で（分数に見えないように）*/
.reppips { margin-left: auto; display: flex; gap: 5px; align-items: center; }
.reppips i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--ink); }
.reppips i.done { background: var(--ink); }
.reppips i.now { background: var(--you); }
/* 矢印は線の山形・主ボタンの左右 */
.k-arrows.withok { display: flex; align-items: center; gap: 8px; width: 100%; }
.k-arrows.withok .k-ok { flex: 1; min-width: 0; margin: 0; }
.k-arrow { flex: none; width: 56px; height: 52px; border: 2.5px solid var(--ink); border-radius: 18px; background: none; padding: 0; display: flex; align-items: center; justify-content: center; }
.k-arrow svg { width: 26px; height: 26px; }
.k-arrow path { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.k-arrows-xy .k-arrow { width: 44px; }
[data-screen=q] .stage > .k-arrows.withok { margin-top: auto; }
/* 押せない「これで決める」は、塗りをやめて紺 35% の枠線と字だけ */
.k-btn.k-ok:disabled { background: none; opacity: 1; color: color-mix(in srgb, var(--ink) 35%, transparent); border: 2.5px solid color-mix(in srgb, var(--ink) 35%, transparent); }
/* 「やめますか？」の札は全体が押せる */
.head { position: relative; z-index: 4; }
.hright { flex: none; }
div.brand { min-width: 0; overflow: hidden; }
.quitbtn { position: relative; z-index: 5; }
.quitbtn.sure { min-height: 44px; padding: 0 16px; }
.quitbtn .ql { pointer-events: none; }
/* 聞こえない人の行き先: 「検定一覧」のボタンがつぶれないように */
.soundexits > a.k-btn { flex: none; height: 44px; }
/* 一覧: 文は文の切れ目でだけ折る・受ける前は何も出さない・受けたあとは成績を右下に大きく */
.lead .sent { display: inline-block; }
.card .cfoot .en { font-size: 28px; line-height: .9; }
.card .mark { padding: 0 8px; }
/* 「‹ 検定一覧」は 13px・押せる範囲 44px */
.backlink { font-size: 13px; padding: 12px 16px 6px 0; margin-top: -8px; }
/* 結果: 伸びを言うのは 札と「前回」の1行だけ。折れ線の右端に +x の札 */
.growth { position: relative; }
.growth .plus { position: absolute; right: 0; top: 4px; background: var(--ink); color: var(--paper); font-size: 16px; border-radius: 9px; padding: 4px 8px 2px; rotate: -4deg; }
.fivecap { flex: none; font-size: 10.5px; opacity: .75; margin: 6px 0 -2px; text-align: right; }
.nextline { flex: none; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 22px; background: var(--bg); isolation: isolate; overflow: hidden; }
.nextline .mark { flex: none; width: 22px; height: 38px; }
.nextline .nl { flex: 1; min-width: 0; font-size: 13px; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.nextline .nl b { font-size: 20px; }
.nextline .go { font-size: 18px; }
/* 対戦: 成績の字は左右とも同じ大きさ・同じ下端。見出しは同じ行・WIN は名前の右 */
.half .nm { flex-direction: row; gap: 6px; height: 20px; }
.half .nm > span:first-child { max-width: 6.5em; }
.half .gr, .half:not(.me) .gr { font-size: 84px; }
@media (min-height: 740px) and (min-width: 360px) { .half .gr, .half:not(.me) .gr { font-size: 112px; } }
@media (max-height: 620px) { .half .gr, .half:not(.me) .gr { font-size: 62px; } .k-arrow { height: 46px; width: 50px; } .k-arrows-xy .k-arrow { width: 40px; } }
/* 低い点のとき、数字や成績の字の色の影が左端で切れないように */
.rv-num { margin-left: 10px; }
.hero .grade { margin-left: 12px; }
[data-screen=reveal] .main, [data-screen=result] .main { padding-left: var(--pad); }
/* 色インクは1種類に見えるように: 印や丸の中だけで重ねる（地の色とは掛け合わせない＝インクの色そのもの。重なった所だけ黒くなる）*/
.mark, .pair, .spark, .dbl { isolation: isolate; }
/* 上下左右の矢印（4つ）と並ぶときの主ボタンは、字を小さくして1行に */
.k-arrows-xy.withok { gap: 6px; }
.k-arrows-xy.withok .k-ok { font-size: 13px; letter-spacing: 0; white-space: nowrap; padding: 0 2px; }
/* ==== 11/12 検品3（F）の直し ==== */
/* 字間の答え合わせ: 正解の位置の紺の細い枠線（.rv-pic text { stroke: none } に負けていた）*/
.rv-pic text.pic-outline, .mini text.pic-outline { fill: none; stroke: var(--ink); stroke-width: 2; }
text.pic-dim { font-size: 16px; letter-spacing: .04em; }
text.pic-label { fill: var(--ink); stroke: none; font-family: var(--f-jp); font-weight: 800; font-size: 10.5px; }
.rv-word { min-height: 1.15em; }
/* 伸びの札は折れ線の上に、何との差かを添えて */
.growcap { display: flex; justify-content: flex-end; align-items: center; gap: 8px; font-size: 10.5px; margin-bottom: 2px; }
.growth .growcap .plus { position: static; rotate: -3deg; font-size: 15px; }
/* 結果: 下に続きがあるときの印 */
.morehint { position: sticky; bottom: 0; align-self: center; flex: none; height: 0; overflow: visible; font-size: 12px; line-height: 1; opacity: 0; pointer-events: none; transition: opacity .2s; }
.morehint.on { opacity: 1; }
.morehint::before { content: ''; position: absolute; left: -200px; right: -200px; bottom: 0; height: 34px; background: linear-gradient(to bottom, transparent, var(--bg)); z-index: -1; }
.morehint.on { translate: 0 -14px; }
.mini .legend { margin-top: 2px; }
.nextline .nl { font-size: 13.5px; }
/* 低い画面（320×568 など）の結果は詰める: 5問と練習ボタンまで画面に入るように */
@media (max-height: 620px) {
  [data-screen=result] .hero { padding: 0 0 4px; }
  [data-screen=result] .hero .grade { font-size: 84px; }
  [data-screen=result] .tot .num { font-size: 42px; margin-top: 0; }
  [data-screen=result] .scale i { height: 20px; font-size: 13px; }
  [data-screen=result] .stamp { margin-bottom: 3px; padding: 3px 9px 2px; font-size: 11px; }
  [data-screen=result] .spark { height: 30px; }
  [data-screen=result] .growth { padding: 4px 0 2px; }
  [data-screen=result] .five { padding-top: 4px; }
  [data-screen=result] .five .sc { font-size: 18px; margin-top: 2px; }
  [data-screen=result] .five .df, [data-screen=result] .five .df.up { font-size: 12px; min-height: 14px; }
  [data-screen=result] .k-btn.weak { margin-top: 6px; height: 40px; }
  [data-screen=result] .foot { gap: 5px; padding-bottom: 8px; }
  [data-screen=result] .foot .k-btn.primary { height: 44px; }
  .rv-score { min-height: 64px; }
}
/* 続きの印は、ボタンの帯の上端に重ねる（流れる所の外。中身の高さを変えない）*/
.foot { position: relative; }
.morehint { position: absolute; left: 0; right: 0; top: -20px; height: 20px; align-self: auto; text-align: center; font-size: 11px; line-height: 20px; translate: none; z-index: 3; background: linear-gradient(to bottom, transparent, var(--bg) 85%); }
.morehint.on { translate: none; }
.morehint::before { display: none; }
/* ==== 11/12 G ==== */
/* 角度の答えの符号（＋7°・−3°）: 記号は和文の太字（Anton の − は小さく細い）。数字との空きは dx=1 だけ */
text.pic-dim .sgn { font-family: var(--f-jp); font-weight: 800; letter-spacing: 0; }
/* 低い画面の結果（12回目など折れ線の札があるとき）: 練習ボタン（44px）まで画面に入れる。
   「前回より」の1行は折れ線の右下の空き（折れ線は右 1/4 を使わない）に重ねて、1行ぶん詰める */
@media (max-height: 620px) {
  [data-screen=result] .k-btn.weak { height: 44px; margin-top: 6px; }
  [data-screen=result] .growth .fivecap { position: relative; z-index: 1; margin: -14px 0 1px; line-height: 13px; }
  [data-screen=result] .growcap { margin-bottom: 0; }
  [data-screen=result] .growth { padding-bottom: 0; }
}
/* それでも続きがあるときの「▼」は右端に（真ん中だとボタンの字にかぶる）*/
.morehint { text-align: right; padding-right: 10px; }

/* ---- 11/13 H（英語）: 一覧の言語の切り替え（EN / 日本語）。題の行の右端に小さく。押せる高さは 44px、行の高さは増やさない（上下を負の余白で打ち消す） ---- */
[data-screen=list] .head { align-items: center; }
.ttlrow { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; row-gap: 0; }
.langsw { flex: none; display: flex; align-items: center; margin: -12px -10px -12px 0; font-size: 12px; line-height: 1; }
.langsw .sl { opacity: .45; }
.langsw .lb { min-height: 44px; min-width: 40px; padding: 0 8px; background: none; border: 0; color: inherit; font: inherit; font-weight: 700; letter-spacing: .04em; opacity: .55; cursor: pointer; }
.langsw .lb.on { opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* 英語の短い題（KERNING・MARGINS・FRACTION など）は日本語より長い。狭い画面では字を少し詰めて、隣とくっつかないように */
@media (max-width: 360px) { html:lang(en) .five .jp { font-size: 9.5px; letter-spacing: 0; } }

/* ==== 11/13 I（色の検定・5本目）。12号の指定 _dev/design-12-color.md ==== */
:root { --surf: #C4C4C4; }
/* 一覧: 2×2 ＋ 下に横長1枚（高さは上のカードの 0.55倍・印は左・題字は右下）。低い画面で入りきらなければ縦に送る */
.cards.n5 { grid-template-rows: minmax(150px, 1fr) minmax(150px, 1fr) minmax(84px, .55fr); grid-auto-rows: auto; }
.card.wide { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto auto; column-gap: 12px; }
.card.wide .mark { grid-column: 1; grid-row: 1 / -1; height: 100%; width: auto; aspect-ratio: 320 / 560; margin: 0; padding: 0; min-height: 0; }
.card.wide .info { grid-column: 2; grid-row: 1; justify-content: flex-end; margin-top: 0; }
.card.wide .ttl { grid-column: 2; grid-row: 3; text-align: right; }
.card.wide .ttl .en { font-size: clamp(18px, 11cqw, 40px); }
.card.wide .cfoot { grid-column: 2; grid-row: 4; margin-top: 4px; }
/* 色見台: 見出しの下から主ボタンの上まで、幅いっぱいの無彩色の面（角丸なし・左右の余白なし）。面の中は紺と紙の色だけ */
.c-surf { flex: 1 1 auto; min-height: 0; align-self: center; width: calc(100% + 2 * var(--pad)); background: var(--surf); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px var(--pad) 10px; --cd: 132px; }
@media (max-width: 360px) { .c-surf { --cd: 104px; } }
.c-row { display: flex; justify-content: center; align-items: flex-start; gap: 24px; }
.c-row-mid { align-items: center; gap: 16px; }
.c-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.c-dot { display: block; width: var(--cd); height: var(--cd); border-radius: 50%; }
.c-slot.small .c-dot { width: 56px; height: 56px; }
.c-lab { font-size: 11.5px; letter-spacing: .04em; min-height: 1.2em; }
.c-slot.off .c-lab { visibility: hidden; }
.c-surf .k-status { font-size: 14px; }
.c-surf .k-sliderwrap { width: 100%; }
.c-surf .k-slider::-webkit-slider-thumb { background: var(--paper); border: 3px solid var(--ink); width: 34px; height: 34px; margin-top: -13px; }
.c-surf .k-slider::-moz-range-thumb { background: var(--paper); border: 3px solid var(--ink); }
.c-surf .k-nudge { background: var(--paper); }
.c-surf .k-ends { font-size: 11.5px; }
[data-screen=q] .c-surf + .k-ok, [data-screen=q] .c-surf + .k-arrows { margin-top: 0; flex: none; }
/* 色の記憶: 面のどこを引きずってもよい。小さい地図は自分の位置だけ（紙の色・紺のつまみ） */
.c-drag { touch-action: none; -webkit-user-select: none; user-select: none; cursor: grab; }
.c-map { display: grid; grid-template-columns: 4.2em 76px 4.2em; grid-template-rows: auto 76px auto; gap: 3px 6px; align-items: center; justify-items: center; font-size: 10.5px; }
.c-mt { grid-column: 2; grid-row: 1; } .c-ml { grid-column: 1; grid-row: 2; justify-self: end; } .c-mr { grid-column: 3; grid-row: 2; justify-self: start; } .c-mb { grid-column: 2; grid-row: 3; }
.c-mapbox { grid-column: 2; grid-row: 2; width: 76px; height: 76px; background: var(--paper); position: relative; }
.c-knob { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); }
@media (max-height: 620px) { .c-map { grid-template-rows: auto 60px auto; grid-template-columns: 4.2em 60px 4.2em; } .c-mapbox { width: 60px; height: 60px; } .c-surf { gap: 8px; padding: 10px var(--pad) 6px; } }
/* 答え合わせ = 継ぎ目の丸: 2つの丸が中央へ寄って1つの丸になる（左半分 = 正解・右半分 = あなた）。面は #C4C4C4 のまま、点の数字は面の外 */
.rv-color { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.c-rvsurf { flex: 1 1 auto; min-height: 0; align-self: center; width: calc(100% + 2 * var(--pad)); background: var(--surf); display: flex; justify-content: center; align-items: center; padding: 12px var(--pad); overflow: hidden; }
.c-seamcell { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; gap: 28px; }
.c-seamfig { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.c-seam { position: relative; width: var(--d, 200px); height: var(--d, 200px); }
.c-half { position: absolute; inset: 0; border-radius: 50%; }
.c-seamlabs { width: var(--d, 200px); display: flex; justify-content: space-around; font-size: 12px; letter-spacing: .04em; }
.c-seam.perfect::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 6px solid var(--paper); pointer-events: none; animation: halo .75s ease-out forwards; }
.c-rvmap { flex: none; width: 96px; height: 96px; }
.c-rvscores { flex: none; display: flex; gap: 8px; }
.c-rvscores .rv-score { flex: 1; min-width: 0; }
.rv-duo .c-rvscores .rv-score { flex-direction: column; align-items: flex-start; gap: 2px; }
/* 1回ごとの短い答え合わせ（絵）も面の上 */
body[data-k=color] .mini .rv-pic { width: calc(100% + 2 * var(--pad)); max-height: none; background: var(--surf); padding: 10px 0 6px; }
text.pic-clab { fill: var(--ink); stroke: none; font-family: var(--f-jp); font-weight: 800; font-size: 10px; letter-spacing: .04em; }
/* 結果の5問: 継ぎ目の丸（48px）を、高さ 96px の #C4C4C4 の帯（幅いっぱい）の上に */
.five.seam { border-top: 0; width: calc(100% + 2 * var(--pad)); margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); background: linear-gradient(var(--surf), var(--surf)) top / 100% 96px no-repeat; }
.five.seam .seamwrap { height: 96px; width: 100%; display: flex; align-items: center; justify-content: center; }
.five.seam .seamc { width: 48px; height: 48px; flex: none; }
.five.seam .sc { margin-top: 6px; }
.legend.seam svg { width: 16px; height: 16px; }
/* 補足は「11.0% 1つ目より」のような数と言葉のかたまりの途中で折らない（空白でだけ折る） */
body[data-k=color] .rv-note, body[data-k=color] .mini-score .t { word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 360px) { .c-seamcell { gap: 16px; } .c-rvmap { width: 84px; height: 84px; } }

/* ==== 11/13 J（色の検定の直し・12号 色の検品と13号 6回目）==== */
/* 挑戦状の札: 英語は「You get the same rounds.⏎Score to beat: 62.4」の2行（13号 5回目 #5） */
.vsbanner span { white-space: pre-line; }
/* 一覧: 題の行は「感覚の検定 … SENSE TESTS（右端）」に戻す。英語は SENSE TESTS を Anton で（#4） */
[data-screen=list] .head { align-items: baseline; }
[data-screen=list] .head .ttl-en { font-size: 26px; letter-spacing: .03em; opacity: 1; }
/* 言語の切り替えは一覧のいちばん下（凡例の行の下）の中央・字 13px・押せる高さ 44px（#6） */
[data-screen=list] .foot { flex-wrap: wrap; row-gap: 0; }
[data-screen=list] .foot .langsw { flex: 1 0 100%; justify-content: center; margin: 0 0 -12px; font-size: 13px; }
[data-screen=list] .foot .langsw .lb { min-height: 44px; padding: 0 12px; }
/* 横長カードのしずく: カードの高さの 80%・左から 24px（#3。viewBox は印の所だけ切り抜く） */
.card.wide .mark { height: calc((100% + 24px) * .8); align-self: center; aspect-ratio: 236 / 322; margin-left: 12px; }
/* 答え合わせ: 丸の下に、その問のつまみの線（紺の点 = 正解・インクの点 = あなた）（#1） */
.c-rvtrack { display: block; width: min(214px, 100%); height: auto; overflow: visible; margin-top: 2px; }
.c-rvtrack text.pic-clab { font-size: 10.5px; }
/* 結果の5問: 継ぎ目の丸の下に、幅 40px の線と2点（記憶は小さい地図）（#7） */
.five.seam .seamwrap { flex-direction: column; justify-content: flex-start; gap: 6px; padding-top: 12px; }
.five.seam .trk { flex: none; display: block; }
/* 色の記憶: 矢印4つは灰色の面の下端に横1列（56px・間 12px）。主ボタンはほかの問と同じ幅いっぱい（#2） */
.c-surf .k-arrows { flex: none; gap: 12px; margin-top: auto; }
.c-drag > .c-row { margin-top: auto; }
.c-surf .k-arrows .k-arrow, .c-surf .k-arrows-xy .k-arrow { width: 56px; height: 48px; background: var(--paper); }
@media (max-height: 620px) { .c-surf .k-arrows .k-arrow, .c-surf .k-arrows-xy .k-arrow { width: 52px; height: 42px; } }
/* 1回ごとの短い答え合わせ（時間切れも）: 灰色の面は 調整中と同じ高さ（見出しの下から）。時間切れの札・点・凡例はその下の空色の所（#10） */
body[data-k=color] .mini { flex: 1 1 auto; align-self: stretch; margin: 0; min-height: 0; gap: 8px; }
body[data-k=color] .mini .rv-pic { flex: 1 1 0; min-height: 0; height: auto; align-self: center; order: 1; }
body[data-k=color] .mini .tmout { order: 2; }
body[data-k=color] .mini .mini-score { order: 3; }
body[data-k=color] .mini .legend { order: 4; }
/* 伸びた結果の折れ線の札: 「最初の3回 → 最近の3回」を札のすぐ左に、少し大きく（#8・9号裁定の形。全検定共通） */
.growcap { gap: 6px; font-size: 12px; }
/* 英語の結果の5問: VIVIDNESS（CHROMA から長くなった）と LIGHTNESS が隣とくっつかないように（色の検定だけ）*/
html:lang(en) .five.seam .jp { font-size: 10px; letter-spacing: 0; }
@media (max-width: 360px) { html:lang(en) .five.seam .jp { font-size: 8.5px; } }
/* 低い画面の一覧（320×568 など）: 言語の切り替えの行が増えたぶん、カードの最小の高さを詰める（J） */
@media (max-height: 620px) {
  .cards.n5 { grid-template-rows: minmax(120px, 1fr) minmax(120px, 1fr) minmax(70px, .55fr); gap: 8px; }
  [data-screen=list] .foot .langsw { margin: 0 0 -14px; }
}
/* 狭い画面の英語の一覧: 凡例と「5 ROUNDS, ABOUT 2 MIN」を1行に収める */
@media (max-width: 360px) {
  html:lang(en) [data-screen=list] .foot { column-gap: 6px; }
  html:lang(en) [data-screen=list] .foot .legend { font-size: 9px; gap: 3px; letter-spacing: 0; }
  html:lang(en) [data-screen=list] .foot .legend svg { width: 22px; height: auto; }
  html:lang(en) [data-screen=list] .foot > .en { font-size: 10.5px; letter-spacing: 0; }
}
/* 動かしている軸の名前（彩度／明度／色相）: つまみの線のすぐ上・中央に札のように。紺の字・小さめの太字（面の決まり＝紺と紙の色だけ）（J・Hayate） */
.c-axis { display: block; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--ink); line-height: 1; margin-bottom: 6px; }
.c-map { position: relative; }
.c-map .c-axis { margin: 0; font-size: 11px; }
.c-map .c-ah { grid-column: 2; grid-row: 4; padding-top: 2px; }
.c-map .c-av { position: absolute; left: 50%; top: 50%; translate: calc(-50% - 38px - 4.2em - 18px) -50%; writing-mode: vertical-rl; letter-spacing: .15em; }
@media (max-height: 620px) { .c-map .c-av { translate: calc(-50% - 30px - 4.2em - 18px) -50%; } .c-axis { margin-bottom: 4px; } }
@media (max-height: 620px) { .card.wide .mark { height: calc((100% + 12px) * .8); margin-left: 16px; } }     /* 低い画面はカードの内側の余白が 6px */

/* ---- 11/13 K: 色の検定 タップ版（仲間はずれ）。面の中は 出題の丸と 紺・紙の色の部品だけ ---- */
.o-surf { justify-content: flex-start; gap: 8px; padding: 12px var(--pad) 10px; position: relative; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.o-top { flex: none; width: 100%; display: flex; align-items: center; gap: 12px; }
.o-lv { flex: none; display: flex; align-items: baseline; gap: 2px; color: var(--ink); min-width: 3.4em; }
.o-lv b { font-size: 28px; line-height: 1; font-weight: 400; }
.o-lv span { font-size: 13px; opacity: .7; }
.o-pips { flex: 1; min-width: 0; display: flex; gap: 3px; justify-content: flex-end; align-items: center; }
.o-pips i { flex: none; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); opacity: .4; }
@media (max-width: 360px) { .o-pips i { width: 6px; height: 6px; } }
.o-pips i.on { background: var(--ink); opacity: 1; }
.o-pips i.now { background: var(--paper); opacity: 1; }
.o-wrap { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.o-board { --n: 2; --g: 8px; flex: none; width: 100%; aspect-ratio: 1; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: var(--g); align-content: center; }
.o-board[data-n="2"] { --g: 22px; padding: 15%; }
.o-board[data-n="3"] { --g: 14px; padding: 7%; }
.o-board[data-n="4"] { --g: 10px; padding: 2%; }
.o-cell { appearance: none; -webkit-appearance: none; border: 0; padding: 0; margin: 0; width: 100%; aspect-ratio: 1; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform .12s ease-out, opacity .12s ease-out; }
.o-board.in .o-cell { animation: o-in .14s ease-out backwards; }
@keyframes o-in { from { transform: scale(.7); opacity: 0; } }
.o-cell.hit { animation: o-hit .16s ease-out forwards; box-shadow: 0 0 0 5px var(--paper); position: relative; z-index: 1; }
@keyframes o-hit { 0% { transform: scale(1); } 55% { transform: scale(1.24); } 100% { transform: scale(1.14); } }
.o-board.out .o-cell:not(.hit) { opacity: 0; transform: scale(.82); }
.o-cell.x { background: transparent !important; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 40%, transparent); transform: scale(.78); pointer-events: none; }
.o-surf.bad .o-board { animation: o-shake .26s linear; }
@keyframes o-shake { 20% { transform: translateX(-7px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-4px); } 90% { transform: translateX(2px); } }
.o-cell.ans { box-shadow: 0 0 0 4px var(--surf), 0 0 0 8px var(--ink); animation: o-ans .45s ease-in-out 2; position: relative; z-index: 1; }
@keyframes o-ans { 50% { transform: scale(1.14); } }
.o-fly b { font-weight: 400; font-size: 18px; }
.o-fly { position: absolute; z-index: 3; transform: translate(-50%, -110%); font-size: 13px; font-weight: 700; display: flex; align-items: baseline; gap: 1px; color: var(--ink); background: var(--paper); padding: 1px 8px 2px; border-radius: 10px; pointer-events: none; white-space: nowrap; animation: o-fly .7s ease-out forwards; }
@keyframes o-fly { 0% { opacity: 0; transform: translate(-50%, -70%); } 20% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -190%); } }
.o-surf .k-status { flex: none; min-height: 1.5em; font-size: 13px; text-align: center; }
.timebar.o-hit { animation: o-barhit .32s steps(2, jump-none) 1; }
@keyframes o-barhit { 0% { background: var(--ink); } 100% { background: var(--paper); } }
[data-test=color-odd] .qinst { min-height: 0; }
/* 答え合わせ: 抜けた面の数の点（紺 = 抜けた面・輪 = まだの面） */
.c-ladder { display: flex; gap: 3px; justify-content: center; width: min(214px, 100%); margin-top: 4px; }
.c-ladder i { flex: none; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.2px var(--ink); opacity: .45; }
.c-ladder i.on { background: var(--ink); opacity: 1; }
.c-who { font-size: 13px; font-weight: 700; }
.rv-duo .c-ladder { flex-wrap: wrap; width: 105px; max-width: 100%; }     /* 2人交互: 12個ずつ2段（320 幅で丸の幅に収める） */
@media (prefers-reduced-motion: reduce) { .o-board.in .o-cell, .o-cell.hit, .o-surf.bad .o-board, .o-cell.ans { animation: none; } }

/* ==== 11/13 L: 記憶の検定（6本目）。12号の指定 _dev/design-12-memory.md ==== */
/* 一覧: 6本 = 2×3（上段 EAR・TIME／中段 DESIGN・DISTANCE／下段 COLOR・MEMORY）。390 幅で1枚 215px 前後。入りきらない画面は縦に送る */
.cards.n6 { flex: 1 0 0; min-height: 586px; grid-template-rows: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
@media (max-height: 620px) { .cards.n6 { min-height: 526px; } }
/* 出題の板: 紙の色・角丸 20px・左右は頁の余白（18px）・見出しの下から下端まで。板の中は紺とインクだけ */
.m-surf { flex: 1 1 auto; min-height: 0; align-self: stretch; background: var(--paper); border-radius: 20px; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 10px; position: relative; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
[data-screen=q][data-test=mem-grid] .stage { padding-top: 10px; }
[data-test=mem-grid] .qinst { min-height: 0; }
.m-top { flex: none; display: flex; align-items: center; gap: 12px; }
.m-cnt { flex: none; display: flex; align-items: baseline; gap: 3px; min-width: 3.2em; }
.m-cnt b { font-size: 34px; line-height: 1; font-weight: 400; }
.m-cnt span { font-size: 13px; }
.m-cnt span.en { font-size: 15px; letter-spacing: .04em; margin-left: 3px; }
.m-pips { flex: 1; min-width: 0; display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.m-pips i, .m-steps i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.m-pips i.on, .m-steps i.on { background: var(--ink); }
.m-pips i.now { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.m-wrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.m-board { --n: 3; --g: 8px; --off: 6px; --rad: 10px; flex: none; width: 100%; aspect-ratio: 1; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: var(--g); align-content: center; }
.m-board[data-n="3"] { padding: 12%; }
.m-board[data-n="4"] { padding: 5%; }
.m-cell { appearance: none; -webkit-appearance: none; display: block; border: 0; background: none; padding: 0; margin: 0; position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--rad); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; isolation: isolate; }
.m-surf:not([data-state=input]) .m-cell { cursor: default; }
.m-cell::before { content: ''; position: absolute; inset: 0; border-radius: var(--rad); background: var(--you); transform: translate(calc(-1 * var(--off)), var(--off)); opacity: 0; z-index: 0; }
.m-face, .m-lit { position: absolute; inset: 0; border-radius: var(--rad); pointer-events: none; }
.m-face { background: color-mix(in srgb, var(--ink) 12%, transparent); z-index: 1; }
.m-lit { background: var(--you); opacity: 0; z-index: 2; }
/* 押したマス（入力中）: インクの枠 4px・塗りなし */
.m-cell.pick .m-face { box-shadow: inset 0 0 0 4px var(--you); animation: m-press .12s ease-out; }
@keyframes m-press { from { transform: scale(.9); } }
/* その場の答え合わせ = 重ね刷り: 光ったマス = 紺のベタ・押したマス = インクのベタ（左下へずらして下に刷る）。押したけど違うマスは インクだけ */
.m-board.check .m-cell.you::before { opacity: 1; }
.m-board.check .m-cell.you:not(.truth) .m-face { background: transparent; }
.m-cell.truth .m-face { background: var(--ink); }
.m-board.in .m-cell { animation: o-in .14s ease-out backwards; }
.m-board.pass .m-cell.truth { animation: m-pop .3s ease-out; }
@keyframes m-pop { 45% { transform: scale(1.09); } }
.m-surf[data-state=miss] .m-board { animation: o-shake .26s linear; }
.m-btm { flex: none; display: flex; align-items: center; gap: 10px; min-height: 1.7em; }
.m-btm .k-status { flex: 1; min-width: 0; font-size: 13px; text-align: left; line-height: 1.3; }
.m-lives { flex: none; display: flex; gap: 5px; }
.m-lives i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.m-lives i.x { background: color-mix(in srgb, var(--ink) 12%, transparent); }
/* 答え合わせの画面: 同じ紙の色の板に、最後の回の盤（重ね刷り）と、届いた数の四角の列 */
.rv-grid { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rv-grid .c-rvscores { margin-top: 8px; }
.m-plate { flex: 1 1 auto; min-height: 0; background: var(--paper); border-radius: 20px; display: flex; justify-content: center; gap: 12px; padding: 14px 14px 12px; overflow: hidden; }
.m-fig { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.m-rvwrap { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.m-board.rvb .m-cell { cursor: default; }
.m-board.rvb .m-face { transition: background .2s ease-out; }
.m-board.rvb.inked .m-cell.truth .m-face { animation: m-drop .3s cubic-bezier(.3,1.3,.5,1) backwards; }
@keyframes m-drop { from { transform: translateY(-14px); opacity: 0; } }
.m-steps { flex: none; display: flex; gap: 4px; justify-content: center; }
.rv-duo .m-plate { gap: 10px; padding: 12px 10px; }
.rv-duo .m-board { --g: 5px; --off: 4px; --rad: 6px; }
.rv-duo .m-steps { gap: 3px; } .rv-duo .m-steps i { width: 7px; height: 7px; border-radius: 2px; }
.rv-duo .m-board[data-n="3"] { padding: 6%; } .rv-duo .m-board[data-n="4"] { padding: 2%; }
@media (max-width: 360px) { .m-surf { padding: 10px 10px 8px; } .m-pips { gap: 3px; } .m-pips i { width: 8px; height: 8px; border-radius: 2.5px; } .m-board { --g: 7px; } }
@media (max-height: 620px) { .m-cnt b { font-size: 28px; } .m-surf { gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .m-board.in .m-cell, .m-board.pass .m-cell.truth, .m-surf[data-state=miss] .m-board, .m-board.rvb.inked .m-cell.truth .m-face, .m-cell.pick .m-face { animation: none; } }

/* ==== 11/13 M: 色の検定の残り4問（明るい順・帯の抜け・同じ色さがし・まぜると何色）。面の中は 出題の色と 紺・紙の色の部品だけ ==== */
[data-test=color-order] .qinst, [data-test=color-gap] .qinst, [data-test=color-same] .qinst, [data-test=color-mix] .qinst { min-height: 0; }
[data-test=color-order] .timebar { visibility: hidden; }     /* 明るい順は時計なし */
.t-surf .t-wrap { flex-direction: column; gap: 22px; }
.t-btm { flex: none; width: 100%; display: flex; align-items: center; gap: 10px; min-height: 1.7em; }
.t-btm .k-status { flex: 1; min-width: 0; min-height: 0; font-size: 13px; line-height: 1.3; text-align: center; }
.t-btm:has(.t-lives) .k-status { text-align: left; }
.t-lives { flex: none; display: flex; gap: 5px; }
.t-lives i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.t-lives i.x { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); opacity: .45; }
.o-pips i.miss { opacity: 1; background: linear-gradient(45deg, transparent 40%, var(--ink) 40% 60%, transparent 60%); }     /* 外した回 = 輪に斜線 */
/* 候補の丸: 4つ横1列（帯の抜け）か 2×2（同じ色さがし・まぜると何色）*/
.t-cands { flex: none; display: grid; justify-content: center; width: 100%; }
.t-cands[hidden], .s-sample[hidden] { display: none; }
.t-cands[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 76px)); gap: 10px; }
.t-cands[data-cols="2"] { --tc2: 112px; grid-template-columns: repeat(2, var(--tc2)); gap: 16px; }
.t-cands.in .t-cand { animation: o-in .14s ease-out backwards; }
.t-cands.out .t-cand:not(.hit) { opacity: 0; transform: scale(.82); }
.t-cands.over .t-cand:not(.ans):not(.no), .t-field.over .t-cell:not(.ans):not(.x) { opacity: .3; }
.t-cand.no, .t-cell.no { animation: t-no .26s linear; }
@keyframes t-no { 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 90% { transform: translateX(2px); } }
@keyframes t-pop { 0% { transform: scale(1); } 50% { transform: scale(1.07); } 100% { transform: scale(1); } }
/* 明るい順: ばらばらに並んだ丸（1段に --per 個）と、押した順に並ぶ下の列 */
.t-field { --tc: 84px; --tg: 14px; flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tg); width: calc(var(--per) * var(--tc) + (var(--per) - 1) * var(--tg)); max-width: 100%; }
.t-field .t-cell { flex: none; width: var(--tc); }
.t-field.in .t-cell { animation: o-in .14s ease-out backwards; }
.t-trayrow { flex: none; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 11.5px; letter-spacing: .04em; color: var(--ink); }
.t-tray { display: flex; gap: 6px; }
.t-tray i { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 40%, transparent); }
.t-tray i.on { box-shadow: none; animation: o-in .14s ease-out; }
.t-tray.full { animation: t-pop .32s ease-out; }
/* 帯の抜け: 7色の帯。穴は紺の枠 */
.g-band { flex: none; display: flex; width: 100%; max-width: 364px; }
.g-band i { flex: 1; aspect-ratio: 1 / 1.3; }
.g-band i:first-child { border-radius: 10px 0 0 10px; }
.g-band i:last-child { border-radius: 0 10px 10px 0; }
.g-band i.hole { box-shadow: inset 0 0 0 3px var(--ink); }
.g-band i.hole.filled { box-shadow: none; }
.g-band.in { animation: o-in .14s ease-out; }
.g-band.done { animation: t-pop .26s ease-out; }
/* 同じ色さがし: 見本の丸 */
.s-sample { display: block; flex: none; width: var(--cd); height: var(--cd); border-radius: 50%; transition: opacity .1s linear; }
.s-sample.in { animation: o-in .14s ease-out; }
.s-sample.off { opacity: 0; }
[data-test=color-same] .t-wrap { min-height: calc(2 * var(--tc2, 112px) + 16px); }
/* まぜると何色: 色 ＋ 色 ＝ ？ */
.x-row { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink); }
.x-row.in { animation: o-in .14s ease-out; }
.x-dot { flex: none; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; }
.x-goal { box-shadow: inset 0 0 0 3px var(--ink); }
.x-goal b { font-size: 30px; font-weight: 400; line-height: 1; }
.x-goal.filled { box-shadow: none; }
.x-goal.filled b { display: none; }
.x-op { font-size: 22px; font-weight: 800; line-height: 1; }
@media (max-width: 360px), (max-height: 620px) {
  .t-surf .t-wrap { gap: 14px; }
  .t-cands[data-cols="2"] { --tc2: 88px; gap: 12px; }
  .t-cands[data-cols="4"] { gap: 8px; }
  .t-field { --tc: 64px; --tg: 12px; }
  .t-tray i { width: 22px; height: 22px; }
  .x-dot { width: 54px; height: 54px; }
  [data-test=color-same] .t-wrap { min-height: calc(2 * 88px + 12px); }
}
@media (prefers-reduced-motion: reduce) { .t-cands.in .t-cand, .t-field.in .t-cell, .t-cand.no, .t-cell.no, .t-tray.full, .g-band.in, .g-band.done, .s-sample.in, .x-row.in { animation: none; } }
/* ==== 11/13 N: 数の検定（7本目）。12号の指定 _dev/design-12-numshape.md。地とインクは js/kentei/number.js の bg / you（--bg / --you）だけで替わる ==== */
/* 一覧: 写しの中では最後に1枚足しただけ（2×3 ＋ 下に横長1枚）。8本の並びは本体側で決める */
.cards.n7 { flex: 1 0 0; min-height: 700px; grid-template-rows: repeat(3, minmax(0, 1fr)) minmax(96px, .5fr); grid-auto-rows: minmax(0, 1fr); }
@media (max-height: 620px) { .cards.n7 { min-height: 630px; } }
/* 出題の板（記憶の検定と同じ）: 紙の色・角丸 20px。板の中の絵は紺だけ。インクは あなたが押した所だけ */
.n-surf { flex: 1 1 auto; min-height: 0; align-self: stretch; background: var(--paper); border-radius: 20px; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 10px; position: relative; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
[data-screen=q][data-test^=num-] .stage { padding-top: 10px; }
[data-test^=num-] .qinst { min-height: 0; }
.n-top { flex: none; display: flex; align-items: center; gap: 12px; }
/* 進みぐあいは四角の列だけ（「7/9」のような数字は出さない = 出題の数字や分数とまぎれる）。ぱっと見で何個は 板の右下に残りの回数の丸 */
.n-top .n-pips { justify-content: flex-start; min-height: 16px; }
.n-rounds { flex: none; display: flex; gap: 5px; }
.n-rounds i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.n-rounds i.x { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.n-wrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; justify-content: center; }
.n-btm { flex: none; display: flex; align-items: center; min-height: 1.7em; }
.n-btm .k-status { flex: 1; min-width: 0; font-size: 13px; text-align: left; line-height: 1.3; }
.n-board { --off: 6px; flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.n-board.in { animation: n-in .14s ease-out backwards; }
@keyframes n-in { from { opacity: 0; transform: translateY(5px); } }
.n-surf.bad .n-board { animation: o-shake .26s linear; }
/* 選ぶ札: 紺の 6% の塗り・角丸 14px。押した瞬間 = インクの枠 4px。正解 = 紺のベタに紙の色の字。あなたが選んだ札 = インクのベタを左へ 6px・下へ 6px ずらして下に刷る */
.n-tile { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; margin: 0; position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 60px; border-radius: 14px; color: var(--ink); cursor: pointer; isolation: isolate; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.n-tile::before { content: ''; position: absolute; inset: 0; border-radius: 14px; background: var(--you); transform: translate(calc(-1 * var(--off)), var(--off)); opacity: 0; z-index: 0; }
.n-face { position: absolute; inset: 0; border-radius: 14px; background: color-mix(in srgb, var(--ink) 6%, transparent); z-index: 1; pointer-events: none; }
.n-lab { position: relative; z-index: 2; font-size: 32px; line-height: 1; letter-spacing: .01em; pointer-events: none; }
.n-tile.pick .n-face, .n-tile.bad .n-face { box-shadow: inset 0 0 0 4px var(--you); }
.n-tile.bad { animation: o-shake .26s linear; }
.n-tile.x { pointer-events: none; }
.n-tile.x .n-face { background: transparent; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 22%, transparent); }
.n-tile.x .n-lab { opacity: .35; }
.n-tile.you::before { opacity: 1; }
.n-tile.you:not(.truth) .n-face { background: transparent; box-shadow: none; }
.n-tile.you:not(.truth) .n-lab { opacity: 1; }
.n-tile.truth .n-face { background: var(--ink); box-shadow: none; }
.n-tile.truth .n-lab { color: var(--paper); opacity: 1; }
.n-board.hit .n-tile.truth, .n-board.pass .n-tile.truth { animation: m-pop .3s ease-out; }
.n-board.rv .n-tile { cursor: default; }
.n-board.rv.inked .n-tile.truth .n-face { animation: m-drop .3s cubic-bezier(.3,1.3,.5,1) backwards; }
.n-choices { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* 点: 紺の丸 18px */
.n-fieldwrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.n-field { position: relative; width: 100%; height: 100%; }
.n-dots .n-field { height: auto; aspect-ratio: 3 / 2; max-height: 100%; }
.n-dot { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--ink); }
.n-board.wait .n-tile { pointer-events: none; cursor: default; }
.n-board.wait .n-lab { visibility: hidden; }
/* ぱっと見で何個の答え合わせ: 紺の数字（正解）とインクの数字（あなた）を 8px ずらして重ねる */
/* .n-ans（ぱっと見の答え合わせ）は R で作り直した = ファイル末尾の「R: 数「ぱっと見」の答え合わせ」 */
/* どっちが多い: 板を縦の細い線（紺 2px）で分ける。押すのは左右そのもの。正解 = 紺の輪 5px・あなた = インクの輪を 6px ずらして */
.n-split { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; max-height: 330px; align-self: stretch; margin: auto 0; }
.n-more { justify-content: center; }
.n-rule { flex: none; width: 2px; margin: 4px 5px; background: var(--ink); border-radius: 1px; }
.n-half { appearance: none; -webkit-appearance: none; flex: 1 1 0; min-width: 0; position: relative; border: 0; background: none; padding: 0; margin: 0; border-radius: 14px; cursor: pointer; isolation: isolate; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.n-half .n-field { position: absolute; inset: 8px 6px; width: auto; height: auto; pointer-events: none; }
.n-half::before { content: ''; position: absolute; inset: 0; border-radius: 14px; box-shadow: inset 0 0 0 5px var(--you); transform: translate(calc(-1 * var(--off)), var(--off)); opacity: 0; pointer-events: none; }
.n-ring { position: absolute; inset: 0; border-radius: 14px; pointer-events: none; }
.n-half.pick .n-ring { box-shadow: inset 0 0 0 4px var(--you); }
.n-half.you::before { opacity: 1; }
.n-half.you .n-ring { box-shadow: none; }
.n-half.truth .n-ring { box-shadow: inset 0 0 0 5px var(--ink); }
.n-board.rv .n-half { cursor: default; }
/* 2つで、この数: 上に大きく目当ての数（Anton・紺） */
.n-head { flex: none; display: flex; justify-content: center; align-items: baseline; padding-top: 2px; }
.n-head b { font-size: 68px; line-height: 1; font-weight: 400; }
.n-tiles { --cols: 3; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 8px; align-content: center; }
.n-tiles .n-tile { min-height: 64px; }
/* 大きい順: 3×3 の場所に ばらばらに置く。押した札 = 紺のベタ＋右上に順番の数字 */
.n-scatter { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px 14px; max-height: 330px; margin: auto 0; }
.n-scatter .n-tile { align-self: center; height: 60px; min-height: 0; transform: translate(var(--jx, 0), calc(var(--jy, 0) * 4)); }
.n-scatter .n-tile.bad { animation: n-shake .26s linear; }
@keyframes n-shake { 20% { translate: -6px 0; } 45% { translate: 5px 0; } 70% { translate: -3px 0; } 90% { translate: 2px 0; } }
.n-rank { position: absolute; z-index: 3; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); font-size: 14px; font-style: normal; line-height: 1; display: none; align-items: center; justify-content: center; pointer-events: none; }
.n-tile.truth .n-rank { display: flex; }
/* 次に来る数: 並びの最後は紺の点線の枠に「?」。答え合わせでそこに紺の数字が入る */
.n-seq { flex: 1 1 auto; min-height: 0; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 8px 13px; }
.n-term { font-size: 30px; line-height: 1; }
.n-q { flex: none; min-width: 54px; height: 54px; padding: 0 8px; border: 2px dashed var(--ink); border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1; }
.n-q .a { display: none; font-weight: 400; }
.n-q.shown .q { display: none; }
.n-q.shown .a { display: inline; }
/* 答え合わせの画面: 同じ紙の色の板（記憶の検定の .m-plate）に、止まった面の絵 */
.n-plate .m-fig { align-self: stretch; }
.n-rvwrap { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; }
.rv-duo .n-board { --off: 4px; gap: 6px; }
.rv-duo .n-tile { min-height: 38px; border-radius: 9px; } .rv-duo .n-tile::before, .rv-duo .n-face { border-radius: 9px; }
.rv-duo .n-lab { font-size: 19px; } .rv-duo .n-dot { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
.rv-duo .n-choices, .rv-duo .n-tiles { gap: 5px; } .rv-duo .n-scatter { gap: 4px; } .rv-duo .n-scatter .n-tile { height: 36px; } .rv-duo .n-tiles .n-tile { min-height: 36px; }
.rv-duo .n-head b { font-size: 40px; }
.rv-duo .n-term, .rv-duo .n-q { font-size: 17px; } .rv-duo .n-q { min-width: 30px; height: 30px; padding: 0 4px; border-radius: 8px; } .rv-duo .n-seq { gap: 4px 6px; }
.rv-duo .n-rank { width: 16px; height: 16px; font-size: 10px; top: -5px; right: -5px; }
@media (max-width: 360px) {
  .n-surf { padding: 10px 10px 8px; } .n-pips { gap: 3px; } .n-pips i { width: 8px; height: 8px; border-radius: 2.5px; }
  .n-term, .n-q { font-size: 24px; } .n-seq { gap: 6px 9px; } .n-q { min-width: 44px; height: 46px; }
  .n-scatter { gap: 8px 13px; }
}
@media (max-height: 620px) { .n-surf { gap: 6px; } .n-board { gap: 7px; } .n-head b { font-size: 50px; } .n-tile { min-height: 56px; } .n-tiles .n-tile { min-height: 56px; } .n-scatter .n-tile { height: 56px; } }
@media (prefers-reduced-motion: reduce) { .n-board.in, .n-surf.bad .n-board, .n-tile.bad, .n-scatter .n-tile.bad, .n-board.hit .n-tile.truth, .n-board.pass .n-tile.truth, .n-board.rv.inked .n-tile.truth .n-face { animation: none; } }
.n-board .n-scatter .n-tile.truth, .n-board.rv.inked .n-scatter .n-tile.truth .n-face { animation: none; }     /* ばらばらに置いた札は transform でずらしているので、跳ねる動きを付けない */
.rv-duo .n-scatter .n-lab { font-size: 16px; } .rv-duo .n-scatter .n-tile { transform: translate(0, calc(var(--jy, 0) * 3)); } .rv-duo .n-scatter { gap: 4px 7px; }     /* 2人交互: 札が小さいので 横のずらしをやめる */
/* ==== 11/13 S: 図形の検定（7本目・写しの中では最後に1枚）。12号の指定 _dev/design-12-numshape.md ==== */
/* 色を替えるのは js/kentei/shape.js の bg・you（地とインク）だけ。出題の絵は --fg（図形 = 紺）と --bgc（その下の面）で描き、インクは「あなたが押した札」にしか使わない */
.s-surf, .s-plate { --fg: var(--ink); --bgc: var(--paper); --tile: color-mix(in srgb, var(--ink) 6%, var(--paper)); --off: 6px; --rad: 14px; }
.s-surf { flex: 1 1 auto; min-height: 0; align-self: stretch; background: var(--paper); border-radius: 20px; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 10px; position: relative; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
[data-screen=q][data-test^=shape-] .stage { padding-top: 10px; }
[data-test^=shape-] .qinst { min-height: 0; }
.s-top { flex: none; display: flex; align-items: center; gap: 12px; }
.s-lv { flex: none; display: flex; align-items: baseline; gap: 2px; min-width: 3.2em; }
.s-lv b { font-size: 30px; line-height: 1; font-weight: 400; }
.s-lv span { font-size: 14px; opacity: .7; }
.s-pips { flex: 1; min-width: 0; display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.s-pips i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.s-pips i.on { background: var(--ink); }
.s-pips i.now { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.s-btm { flex: none; display: flex; align-items: center; gap: 10px; min-height: 1.5em; }
.s-btm .k-status { flex: 1; min-width: 0; font-size: 13px; text-align: left; line-height: 1.3; }
.s-lives { flex: none; display: flex; gap: 5px; }
.s-lives i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.s-lives i.x { background: color-mix(in srgb, var(--ink) 12%, transparent); }
/* 絵（SVG）: 紺のベタ・2枚目と薄い塗りは紺の 45%・立方体は 100 / 70 / 45% と紙の色の辺 2px・「?」の枠は紺の点線 2px */
.sg { display: block; width: 100%; height: 100%; overflow: visible; }
.sg .f { fill: var(--fg); }
.sg .f2 { fill: color-mix(in srgb, var(--fg) 45%, var(--bgc)); }
.sg .ol { fill: none; stroke: var(--fg); stroke-width: .3; stroke-linejoin: round; }
.sg .e { stroke: var(--bgc); stroke-width: .07; }
.sg .ln { fill: none; stroke: var(--fg); stroke-linecap: round; stroke-linejoin: round; }
.sg .ln2 { fill: none; stroke: color-mix(in srgb, var(--fg) 45%, var(--bgc)); stroke-linecap: round; }
.sg .dot { fill: color-mix(in srgb, var(--fg) 20%, var(--bgc)); }
.sg .dash { fill: none; stroke: var(--fg); stroke-width: 2px; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.sg .qm { font-family: var(--f-en); font-size: 50px; fill: var(--fg); }
.sg .c100 { fill: var(--fg); } .sg .c70 { fill: color-mix(in srgb, var(--fg) 70%, var(--bgc)); } .sg .c45 { fill: color-mix(in srgb, var(--fg) 45%, var(--bgc)); }
.sg .ce { stroke: var(--bgc); stroke-width: 2px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* お題 */
.s-prompt { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.s-prompt[hidden] { display: none; }
.s-fig { height: 100%; max-height: 200px; aspect-ratio: 1; max-width: 100%; }
.s-spin { transition: transform .4s cubic-bezier(.3, 0, .2, 1); }
.s-mx { height: 100%; max-height: 270px; aspect-ratio: 1; max-width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6px; }
.s-mc { min-width: 0; min-height: 0; border-radius: 10px; background: var(--tile); padding: 5%; --bgc: var(--tile); }
.s-mc.q { background: none; padding: 0; }
.s-ov { height: 100%; max-height: 150px; max-width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }
.s-sheet { height: 100%; aspect-ratio: 1; min-width: 0; border-radius: var(--rad); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 22%, transparent); }
.s-plus { font-size: 26px; flex: none; }
/* 選ぶ札: 紺の 6% の塗り・角丸 14px。4択は 2×2 */
.s-opts { flex: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.s-opts[data-n="6"], .s-opts[data-n="9"] { grid-template-columns: repeat(3, 1fr); }
.s-opt { appearance: none; -webkit-appearance: none; display: block; border: 0; background: none; padding: 0; margin: 0; position: relative; width: 100%; height: clamp(84px, 17dvh, 150px); border-radius: var(--rad); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; isolation: isolate; --bgc: var(--tile); }
.s-opt::before { content: ''; position: absolute; inset: 0; border-radius: var(--rad); background: var(--you); transform: translate(calc(-1 * var(--off)), var(--off)); opacity: 0; z-index: 0; }
.s-face { position: absolute; inset: 0; border-radius: var(--rad); background: var(--tile); z-index: 1; pointer-events: none; }
.s-in { position: absolute; inset: 7px; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.s-num { font-size: 36px; color: var(--fg); line-height: 1; }
.s-surf[data-kind=matrix] .s-opt { height: clamp(70px, 13dvh, 132px); }
/* 仲間はずれの形: お題が無いので札が板いっぱい。4個 = 2×2・6個 = 2列×3段・9個 = 3×3。札は正方形で、板の高さと幅に入る大きさ（--sz） */
.s-surf[data-kind=odd] .s-opts { flex: 1 1 0; min-height: 0; align-content: center; justify-content: center; --sz: min(150px, calc((100dvh - 270px) / 2 - 10px)); grid-template-columns: repeat(2, var(--sz)); }
.s-surf[data-kind=odd] .s-opts[data-n="6"] { --sz: min(150px, calc((100dvh - 270px) / 3 - 10px)); }
.s-surf[data-kind=odd] .s-opts[data-n="9"] { --sz: min(118px, calc((100dvh - 270px) / 3 - 10px), calc((min(100vw, 480px) - 84px) / 3)); grid-template-columns: repeat(3, var(--sz)); }
.s-surf[data-kind=odd] .s-opt { width: var(--sz); height: var(--sz); }
.s-surf[data-kind=count] .s-opts, .s-rvfig[data-kind=count] .s-opts { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.s-surf[data-kind=count] .s-opt { height: 64px; }
.s-surf[data-kind=count] .s-fig { max-height: 300px; }
/* 押したあと: 正解の札 = 紺のベタに紙の色の中身・選んだ札 = インクのベタを左へ 6px・下へ 6px ずらして下に刷る（当たり = 紺にインクの縁・はずれ = インクだけ） */
.s-opt.truth { --fg: var(--paper); --bgc: var(--ink); }
.s-opt.truth .s-face { background: var(--ink); }
.s-opt.you::before { opacity: 1; }
.s-opt.you:not(.truth) .s-face { background: transparent; }
.s-opt.you:not(.truth) { --bgc: var(--you); }
.s-surf.in .s-opt, .s-surf.in .s-prompt > * { animation: o-in .14s ease-out backwards; }
.s-opt.hit { animation: m-pop .3s ease-out; z-index: 1; }
.s-opts.out .s-opt:not(.hit) { opacity: .25; transition: opacity .12s; }
.s-surf[data-state=miss] .s-opts { animation: o-shake .26s linear; }
.s-opts.check .s-opt { cursor: default; }
.s-surf .o-fly { z-index: 5; }
/* 答え合わせの画面: 同じ紙の色の板に、お題と札と、抜けた面の数の四角の列 */
.s-plate { flex-direction: row; }
.s-rvfig { gap: 10px; }
.s-rvfig .s-prompt { width: 100%; }
.s-rvfig .s-opts { width: min(100%, 300px); }
.s-rvfig .s-opt { height: clamp(52px, 10dvh, 112px); }
.s-rvfig[data-kind=odd] .s-opts { flex: 1 1 0; min-height: 0; align-content: center; width: min(100%, 320px); }
.s-rvfig[data-kind=odd] .s-opt { height: clamp(52px, 12dvh, 120px); }
.s-rvfig[data-kind=odd] .s-opts[data-n="9"] .s-opt { height: clamp(44px, 8.5dvh, 96px); }
.s-rvfig[data-kind=count] .s-opt { height: 56px; }
.s-rvfig .s-opt { transition: none; } .s-rvfig .s-face { transition: background .2s ease-out; }
.s-rvfig .s-opts.inked .s-opt.truth { animation: m-pop .3s ease-out; }
.rv-duo .s-plate { gap: 10px; padding: 12px 10px; --off: 4px; --rad: 9px; }
.rv-duo .s-rvfig .s-opts { gap: 6px; }
.rv-duo .s-rvfig[data-kind=count] .s-opts { grid-template-columns: repeat(2, 1fr); }
.rv-duo .s-rvfig[data-kind=count] .s-opt { height: 40px; } .rv-duo .s-num { font-size: 24px; }
.rv-duo .s-rvfig .s-in { inset: 4px; }
.rv-duo .s-ov { gap: 4px; } .rv-duo .s-plus { font-size: 16px; }
.rv-duo .s-fig, .rv-duo .s-mx { max-height: min(150px, 36vw); min-width: 0; }      /* 2人交互: お題は半分の幅に入る大きさ */
.rv-duo .s-ov { max-height: min(70px, 17vw); }
@media (max-width: 360px) { .s-surf { padding: 10px 10px 8px; gap: 8px; } .s-opts { gap: 8px; } .s-pips { gap: 3px; } .s-pips i { width: 8px; height: 8px; border-radius: 2.5px; } }
@media (max-height: 620px) { .s-lv b { font-size: 26px; } .s-surf { gap: 6px; } .s-in { inset: 5px; } .s-surf[data-kind=count] .s-opt { height: 56px; } .s-num { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) { .s-surf.in .s-opt, .s-surf.in .s-prompt > *, .s-opt.hit, .s-surf[data-state=miss] .s-opts, .s-rvfig .s-opts.inked .s-opt.truth { animation: none; } .s-spin { transition: none; } }

/* ==== 11/13 P（マージ）: 一覧 8本 = 2×4。12号の指定 _dev/design-12-numshape.md の b ==== */
/* 上から EAR・TIME／DESIGN・DISTANCE／COLOR・MEMORY／SHAPE・NUMBER。390 幅は1画面に収める（カード 168px・間 8px）。320 幅はカード 150px で縦に送る */
/* 印 = カードの右上の 84px 四方（viewBox は js/art.js の MARK_BOX で印ごとに切り抜く）・題字 Anton 30px と副題 11px は左下。横長カード（.wide）は使わない */
.cards.n8 { flex: none; min-height: 0; grid-template-rows: none; grid-auto-rows: 168px; gap: 8px; }
.cards.n8 .card { padding: 12px; justify-content: flex-end; }
.cards.n8 .card .mark { position: absolute; top: 10px; right: 10px; width: 84px; height: 84px; flex: none; min-height: 0; margin: 0; padding: 0; }
.cards.n8 .card .ttl { position: relative; }
.cards.n8 .card .ttl .en { font-size: 30px; line-height: 1; }
.cards.n8 .card .ttl .jp { font-size: 11px; margin-top: 3px; letter-spacing: .04em; }
.cards.n8 .card .info { position: absolute; top: 12px; left: 12px; margin: 0; min-height: 0; flex-direction: column; align-items: flex-start; gap: 0; max-width: calc(100% - 112px); }
.cards.n8 .card .cfoot { margin-top: 6px; }
.cards.n8 .card .cfoot .en { font-size: 22px; }
@media (max-width: 359px) { .cards.n8 { grid-auto-rows: 150px; } .cards.n8 .card { padding: 10px; } .cards.n8 .card .mark { top: 8px; right: 8px; width: 72px; height: 72px; } .cards.n8 .card .info { top: 10px; left: 10px; max-width: calc(100% - 92px); } }
[data-screen=list] .main:has(.cards.n8) .lead { margin: 0 0 6px; }     /* 390×844 の日本語で 2px はみ出したので、説明の下の空きを 10→6px */
/* P（11/13）: 記憶の検定の1回目だけ「押すと始まります」。盤の中央に紺の札（紙の色の字）。板のどこを押しても始まる */
.m-wrap { position: relative; }
.m-start { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); appearance: none; -webkit-appearance: none; border: 0; margin: 0; background: var(--ink); color: var(--paper); font: inherit; font-size: 17px; letter-spacing: .04em; padding: 14px 22px; border-radius: 999px; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; z-index: 3; }

/* ==== 11/13 Q: 一覧の題を大きく（Hayate「トップのタイトルが小さいかも」）。390×844 に収めるため、8本のカードを 168→164px ==== */
[data-screen=list] .head .ttl { font-size: 30px; letter-spacing: .03em; line-height: 1.15; }
[data-screen=list] .head .ttl-en { font-size: 34px; }
[data-screen=list] .head { align-items: baseline; }
@media (min-width: 360px) { .cards.n8 { grid-auto-rows: 164px; } }
@media (max-width: 359px) { [data-screen=list] .head .ttl { font-size: 26px; } [data-screen=list] .head .ttl-en { font-size: 28px; } }

/* ==== 11/13 R: 色の5問目「まん中の色」= 左右の2色のあいだの空いた所（紺の枠の「?」）＋ 候補6つ（3列×2段）==== */
.x-band { flex: none; display: flex; width: 100%; max-width: 300px; height: 76px; }
.x-band.in { animation: o-in .14s ease-out; }
.x-end { flex: 1; }
.x-end:first-child { border-radius: 12px 0 0 12px; } .x-end:last-child { border-radius: 0 12px 12px 0; }
.x-hole { flex: 1; display: grid; place-items: center; box-shadow: inset 0 0 0 3px var(--ink); color: var(--ink); }
.x-hole b { font-size: 30px; font-weight: 400; line-height: 1; }
.x-hole.filled { box-shadow: none; } .x-hole.filled b { display: none; }
.t-cands[data-cols="3"] { --tc3: 88px; grid-template-columns: repeat(3, var(--tc3)); gap: 14px; }
@media (max-width: 360px), (max-height: 620px) { .x-band { height: 60px; max-width: 250px; } .t-cands[data-cols="3"] { --tc3: 72px; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .x-band.in { animation: none; } }
/* R: 同じ色さがしの1回目「押すと見本が出ます」（記憶の .m-start と同じ紺の札）。見本の丸は空の輪で場所だけ見せる */
.t-wrap.ready { position: relative; }
.s-sample.wait { background: transparent !important; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 35%, transparent); }
/* R: 数「ぱっと見」の答え合わせ（12号 必須1）: 数字は横に並べる（左 = 紺の正解・右 = インクのあなた・40px・間 16px）。下に小さい丸の列（10px・間 4px・10個で折り返し） */
.n-ans { flex: none; display: flex; flex-direction: column; gap: 8px; height: auto; place-items: initial; align-items: center; }     /* T: align-items を place-items の後ろに（前は place-items: initial で消えて、下の丸の列が左へ寄っていた） */
.n-ansrow { display: flex; gap: 16px; align-items: flex-start; justify-content: center; }
.n-ansc { display: flex; flex-direction: column; align-items: center; min-width: 44px; }
.n-ansc b { grid-area: auto; font-size: 40px; line-height: 1; font-weight: 400; transform: none; mix-blend-mode: normal; opacity: 1; }
.n-ansc small { font-size: 11px; letter-spacing: .04em; margin-top: 3px; color: var(--ink); opacity: .75; }
.n-ansc.t b { color: var(--ink); opacity: 0; transition: opacity .2s ease-out; }
.n-ans.shown .n-ansc.t b { opacity: 1; }
.n-ansc.y b { color: var(--you); }
.n-adots { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-width: 136px; }     /* 10個で折り返す（10×10px＋9×4px） */
.n-adot { position: relative; width: 10px; height: 10px; }
.n-adot::before, .n-adot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; opacity: 0; }
.n-adot::before { background: var(--you); transform: translate(-2px, 2px); }
.n-adot::after { background: var(--ink); transition: opacity .2s ease-out; }
.n-adot.y::before { opacity: 1; }
.n-adot.t::after { opacity: 1; }
.rv-duo .n-ansrow { gap: 10px; } .rv-duo .n-ansc b { font-size: 30px; } .rv-duo .n-ansc small { font-size: 10px; }
.rv-duo .n-adots { gap: 3px; max-width: 107px; } .rv-duo .n-adot { width: 8px; height: 8px; }
@media (max-height: 620px) { .n-ans { height: auto; gap: 5px; } .n-ansc b { font-size: 34px; } }
/* R: 図形の答え合わせ（12号 必須3）= 札は「正解（紺）」と「あなた（インク）」の2枚だけ。出題の札と同じくらいの大きさで横に。下に小さく「正解」「あなた」 */
.s-rvfig .s-opts, .s-rvfig[data-kind=odd] .s-opts, .s-rvfig[data-kind=count] .s-opts { flex: none; display: grid; grid-template-columns: repeat(var(--k, 2), minmax(0, 150px)); justify-content: center; gap: 14px; width: 100%; }
.s-rvfig .s-opts[data-n="1"] { --k: 1; }
.s-pick { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.s-pick .s-opt, .s-rvfig[data-kind=odd] .s-opt, .s-rvfig[data-kind=count] .s-opt { width: 100%; height: clamp(96px, 16dvh, 140px); }
.s-rvfig[data-kind=count] .s-opt { height: 64px; }
.s-rvfig[data-kind=matrix] .s-opt { height: clamp(80px, 12dvh, 120px); }
.s-cap { font-size: 11px; letter-spacing: .04em; color: var(--ink); opacity: .75; white-space: nowrap; }
.rv-duo .s-rvfig .s-opts, .rv-duo .s-rvfig[data-kind=count] .s-opts { grid-template-columns: repeat(var(--k, 2), minmax(0, 1fr)); gap: 12px; }
.rv-duo .s-pick .s-opt, .rv-duo .s-rvfig[data-kind=odd] .s-opt { height: clamp(60px, 10dvh, 84px); }
.rv-duo .s-rvfig[data-kind=count] .s-opt { height: 44px; }
.rv-duo .s-cap { font-size: 10px; }
@media (max-height: 620px) { .s-pick .s-opt, .s-rvfig[data-kind=odd] .s-opt { height: clamp(70px, 14dvh, 100px); } }
/* R: 一覧の凡例（320 幅は一覧の最後に流す = .foot.inlist）・記憶のカードの「1問・40秒ほど」 */
[data-screen=list] .main > .foot.inlist { padding: 12px 0 calc(10px + env(safe-area-inset-bottom)); }
.card .info .cnote { font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1.3; display: flex; flex-direction: column; }
.card .info .cnote span { white-space: nowrap; }
/* R: 数「大きい順」の答え合わせ = 正しい順に左から1列（12号 できれば5） */
.n-row { display: grid; grid-template-columns: repeat(var(--k, 4), minmax(0, 76px)); gap: 10px; justify-content: center; width: 100%; padding-top: 6px; margin: auto 0; }
.n-row .n-tile { position: relative; height: 60px; }
.rv-duo .n-row { gap: 5px; grid-template-columns: repeat(var(--k, 4), minmax(0, 1fr)); } .rv-duo .n-row .n-tile { height: 40px; } .rv-duo .n-row .n-lab { font-size: 15px; }
/* ==== R（12号 8本版の検品 6・7）: 結果の5問の丸を大きく（直径 約56px）して列を下げる。8本共通 ====
   重ね丸は 0点で 4.2×半径 の幅が要るので、5つ横1列では 56px が入らない → 縦に余裕のある画面（高さ 700px 以上）は 3つ＋2つの2段（欄の幅 約119px = 直径 56px）。
   低い画面は今までどおり1段。色の検定（継ぎ目の丸）は1段のまま丸を 48 → 56px。記憶（1問）は真ん中に */
@media (min-height: 700px) {
  [data-screen=result] .five.n5:not(.seam) { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 4px; padding-top: 12px; }
  [data-screen=result] .five.n5:not(.seam) .c { grid-column: span 2; }
  [data-screen=result] .five.n5:not(.seam) .c:nth-child(4) { grid-column: 2 / span 2; }
  [data-screen=result] .five.n5:not(.seam) .pair { width: 100%; max-width: 120px; }
  [data-screen=result] .five.n5:not(.seam) .sc { font-size: 24px; margin-top: 4px; }
  [data-screen=result] .five.n5:not(.seam) .df { min-height: 12px; }
  [data-screen=result] .five.n5:not(.seam) .jp { font-size: 12px; }
  .five.seam { background-size: 100% 108px; }
  .five.seam .seamwrap { height: 108px; }
  .five.seam .seamc { width: 56px; height: 56px; }
}
.five.n1 { grid-template-columns: minmax(0, 160px); justify-content: center; }
.five.n1 .pair { width: 100%; max-width: 120px; }
.five.n1 .sc { font-size: 26px; }
.rv-note, .rv-sub { text-wrap: pretty; }     /* R: 補足の折り返しで1字だけ次の行に落ちない（「数えまし／た」） */
.k-status { text-wrap: pretty; }     /* R: 一言の折り返しで1字だけ落ちない */
@media (max-width: 359px) { .card .info .cnote { font-size: 10px; letter-spacing: 0; } }
/* ==== 11/14 T: 記憶の検定 2〜5問（光った順番・数字の順番・どこが変わった・色の場所）。12号の指定 _dev/design-12-memory.md c・d。板と上下の行は光ったマスの部品（.m-*）をそのまま使う ==== */
[data-screen=q][data-test^=mem-] .stage { padding-top: 10px; }
[data-test^=mem-] .qinst { min-height: 0; }
.mk-board { --d: min(56px, 84%); }
.mk-board:not(.mk-seq) .m-cell { border-radius: 0; cursor: default; }
.mk-board:not(.mk-seq) .m-cell::before { display: none; }      /* マスの重ね刷り（インクの四角）は 光った順番だけ */
.mk-surf[data-state=input] .mk-board:not(.mk-seq) button.m-cell { cursor: pointer; }
.mk-cell.empty { pointer-events: none; }
/* 押した順の小丸（12号: インクの丸 22px に紙の色の数字）。光った順番・数字の順番 */
.mk-no { position: absolute; z-index: 4; pointer-events: none; font-style: normal; line-height: 1; }
.mk-no.y { top: -5px; right: -5px; width: 22px; height: 22px; border-radius: 50%; background: var(--you); color: var(--paper); font-size: 13px; display: grid; place-items: center; }
.mk-no.t { inset: 0; display: grid; place-items: center; color: var(--paper); font-size: clamp(18px, 6vw, 28px); }
.mk-no.y:empty, .mk-no.t:empty { display: none; }
.mk-seq .m-cell.pick .m-face { box-shadow: inset 0 0 0 4px var(--you); }
/* 数字の順番: 紺のベタの丸 56px に紙の色の数字（Anton）。消えたあとは同じ丸で数字なし */
.mk-dot { position: absolute; left: 50%; top: 50%; width: var(--d); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; z-index: 2; }
.mk-ord .mk-dot { background: var(--ink); }
.mk-ord .mk-dot b { color: var(--paper); font-size: clamp(20px, 6.4vw, 30px); font-weight: 400; line-height: 1; opacity: var(--o, 1); }
.mk-ord.hide .mk-dot b { opacity: 0; transition: opacity .2s ease-out; }
.mk-ord .mk-no.y { top: calc(50% - var(--d) / 2 - 7px); right: calc(50% - var(--d) / 2 - 7px); }
.mk-ord .m-cell.pick .mk-dot { animation: mk-press .12s ease-out; }
@keyframes mk-press { from { transform: translate(-50%, -50%) scale(.9); } }
@keyframes mk-pop { 45% { transform: translate(-50%, -50%) scale(1.09); } }
/* 色の場所: 色の丸 56px（中に小さい形の印）。消えたあとは紺の 12% の丸 */
.mk-col .mk-dot { background: var(--c); opacity: var(--o, 1); }
.mk-col.hide .mk-dot { background: color-mix(in srgb, var(--ink) 12%, transparent); opacity: 1; }
.mk-col.hide .mk-mark { display: none; }
.mk-col .m-cell.pick .mk-dot { box-shadow: inset 0 0 0 4px var(--you); }
.mk-mark { width: 44%; height: 44%; fill: #fff; opacity: .92; }
.mk-mark.dark { fill: var(--ink); opacity: .6; }
/* どこが変わった: 紺のベタの形 */
.mk-sh { position: absolute; inset: 13%; z-index: 2; opacity: var(--o, 1); pointer-events: none; }
.mk-sh svg { display: block; width: 100%; height: 100%; fill: var(--ink); }
.mk-chg .m-cell.pick .mk-sh { animation: m-press .12s ease-out; }
.mk-chg { --d: 92%; }
/* 見せる前（と「どこが変わった」の消えている間）は何も無い板 */
.mk-board.pre .mk-dot, .mk-board.pre .mk-sh { opacity: 0; }
/* 答え合わせの輪: 正解 = 紺の輪 5px・押した所 = インクの輪を左へ 6px・下へ 6px ずらして下に刷る（12号 d） */
.mk-ring { display: none; position: absolute; left: 50%; top: 50%; width: calc(var(--d) + 14px); aspect-ratio: 1; border-radius: 50%; box-sizing: border-box; border: 5px solid var(--ink); transform: translate(-50%, -50%); pointer-events: none; z-index: 3; }
.mk-ring.y { border-color: var(--you); transform: translate(calc(-50% - var(--off)), calc(-50% + var(--off))); mix-blend-mode: multiply; z-index: 1; }
.mk-chg .mk-ring { border-radius: 22%; }
.mk-board.check .m-cell.truth .mk-ring.t { display: block; }
.mk-board.check .m-cell.you .mk-ring.y { display: block; }
.mk-ord .mk-ring.y { display: none !important; }      /* 数字の順番は 押した順の小丸で見せる */
.mk-board.rvb.inked .m-cell.truth .mk-ring.t { animation: mk-drop .3s cubic-bezier(.3,1.3,.5,1) backwards; }
.mk-board.pass .m-cell.truth .mk-dot { animation: mk-pop .3s ease-out; } .mk-board.pass .m-cell.truth .mk-sh { animation: m-pop .3s ease-out; }
@keyframes mk-drop { from { transform: translate(-50%, calc(-50% - 14px)); opacity: 0; } }
/* 色の場所: 聞く色は板の上に絵で（色の丸 28px ＋「はどこ？」）。押す時だけ見える */
.mk-ask { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; font-size: 18px; font-weight: 700; visibility: hidden; }
.mk-ask.on { visibility: visible; }
.mk-askdot { width: 28px; height: 28px; border-radius: 50%; background: var(--c); display: grid; place-items: center; }
/* 2人交互の答え合わせ（盤が2つ並ぶ） */
.rv-duo .mk-no.y { width: 16px; height: 16px; font-size: 10px; top: -3px; right: -3px; }
.rv-duo .mk-ord .mk-no.y { top: calc(50% - var(--d) / 2 - 5px); right: calc(50% - var(--d) / 2 - 5px); }
.rv-duo .mk-no.t { font-size: 15px; }
.rv-duo .mk-ord .mk-dot b { font-size: 16px; }
.rv-duo .mk-ring { border-width: 3px; width: calc(var(--d) + 8px); }
@media (prefers-reduced-motion: reduce) { .mk-board.rvb.inked .m-cell.truth .mk-ring.t, .mk-board.pass .m-cell.truth .mk-dot, .mk-board.pass .m-cell.truth .mk-sh, .mk-ord .m-cell.pick .mk-dot, .mk-chg .m-cell.pick .mk-sh { animation: none; } }
/* ==== 11/14 U: 記憶の検定の直し（初見検品・12号-t・13号-i）==== */
/* 右上の四角の列（何個まであるか）と右下の丸（あと何回まちがえられるか）に、ごく小さい1語（初見検品 6） */
.m-lab { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .02em; opacity: .72; white-space: nowrap; line-height: 1; }
.m-top .m-lab { margin-left: -6px; }
.m-livesbox { flex: none; display: flex; align-items: center; gap: 5px; }
/* 色の場所: お題の丸 28 → 36px・字 18px（12号-t #3）。押して当てた色は その丸に色を戻す */
.mk-ask { min-height: 40px; }
.mk-askdot { width: 36px; height: 36px; flex: none; }
.mk-col.hide .m-cell.got .mk-dot { background: var(--c); }
.mk-col.hide .m-cell.got .mk-mark { display: block; }
.mk-ask.mk-askrv { visibility: visible; gap: 6px; font-size: 15px; min-height: 0; flex-wrap: nowrap; white-space: nowrap; }
.mk-ask.mk-askrv > span:last-child { margin-left: 2px; }
/* 外した時の一言「…（あと 1回まちがえると終わり）」（13号-i #7）は 2行に折れることがあるので、下の行は はじめから2行ぶん取っておく（板が動かない） */
.m-surf .m-btm { min-height: 2.6em; }
.mk-ask.mk-askrv .mk-askdot { width: 26px; height: 26px; }
/* 光った順番: 入れ違えた所の「本当はここ」に紺の輪（12号-t #2・数字の順番と同じ読み方） */
.mk-seq .mk-ring { left: -7px; top: -7px; right: -7px; bottom: -7px; width: auto; aspect-ratio: auto; transform: none; border-width: 4px; border-radius: calc(var(--rad) + 6px); z-index: 3; animation: none !important; }
.mk-seq.mk-board.check .m-cell.truth .mk-ring.t { display: none; }
.mk-seq.mk-board.check .m-cell.here .mk-ring.t { display: block; }
.rv-duo .mk-seq .mk-ring { left: -5px; top: -5px; right: -5px; bottom: -5px; border-width: 3px; }
/* 2人交互の答え合わせ（記憶・図形）: 1人目・2人目を上下2段に。盤ごとに薄い地を敷いて、2人の盤が1つの塊に見えないように（初見検品 2・12号-t #5） */
.rv-stack .m-plate { flex-direction: column; gap: 8px; padding: 10px; }
/*   段 = 左に盤・右の列に 名前・お題（色の場所）・点・届いた数の四角の列。点の行（.c-rvscores）は使わない = 盤を大きく取れる */
.rv-stack .m-fig { flex: 1 1 0; width: 100%; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 112px; grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "bw who" "bw ask" "bw sc" "bw steps"; gap: 4px 10px; padding: 8px 10px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 6%, var(--paper)); }
.rv-stack .m-fig > .mk-ask { grid-area: ask; justify-content: flex-start; flex-wrap: wrap; white-space: normal; font-size: 11px; gap: 3px; }
.rv-stack .m-fig > .mk-ask .mk-askdot { width: 18px; height: 18px; }
.rv-stack .m-fig > .m-rvwrap { grid-area: bw; width: 100%; height: 100%; min-height: 0; }
.rv-stack .m-fig > .c-who { grid-area: who; justify-self: start; font-size: 15px; }
.rv-stack .m-fig > .rv-score { grid-area: sc; align-self: center; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rv-stack .m-fig > .rv-score .rv-num { font-size: 36px; }
.rv-stack .m-fig > .rv-score .rv-word { font-size: 13px; }
.rv-stack .m-fig > .rv-score .rv-note { font-size: 10.5px; line-height: 1.3; }
.rv-stack .m-fig > .m-steps { grid-area: steps; justify-content: flex-start; flex-wrap: wrap; max-width: 112px; }
.rv-stack.rv-grid .c-rvscores:empty { display: none; }
.rv-stack .m-board { --g: 6px; --off: 4px; --rad: 7px; }
.rv-stack .mk-no.y { width: 18px; height: 18px; font-size: 11px; }
.rv-stack .mk-ord .mk-no.y { top: calc(50% - var(--d) / 2 - 8px); right: calc(50% - var(--d) / 2 - 8px); }
.rv-stack .mk-ord .mk-dot b { font-size: 19px; }
.rv-stack .mk-no.t { font-size: 17px; }
/* 図形 */
.rv-stack .s-plate { flex-direction: column; gap: 8px; padding: 10px; }
.rv-stack .s-rvfig { flex: 1 1 0; width: 100%; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "who steps" "pr pr" "op op"; gap: 6px 10px; padding: 8px 10px 10px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 6%, var(--paper)); }
.rv-stack .s-rvfig > .s-prompt { grid-area: pr; min-height: 0; width: 100%; }
.rv-stack .s-rvfig > .s-opts { grid-area: op; }
.rv-stack .s-rvfig > .c-who { grid-area: who; justify-self: start; align-self: center; font-size: 15px; }
.rv-stack .s-rvfig > .m-steps { grid-area: steps; align-self: center; }
.rv-stack .s-rvfig[data-kind=odd] { grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "who steps" "op op"; }
.rv-stack .s-rvfig[data-kind=odd] > .s-opts { align-self: center; }
.rv-stack .s-rvfig .s-opts, .rv-stack .s-rvfig[data-kind=count] .s-opts { grid-template-columns: repeat(var(--k, 2), minmax(0, 132px)); justify-content: center; gap: 14px; }
.rv-stack .s-pick .s-opt, .rv-stack .s-rvfig[data-kind=odd] .s-opt { height: clamp(56px, 11dvh, 104px); }
.rv-stack .s-rvfig[data-kind=count] .s-opt { height: 52px; }
/* お題の図は 段の中の残りの高さ・幅に収める（コンテナの大きさで決める。前の「半分の幅」の決め方だと 上下2段で はみ出した） */
.rv-stack .s-rvfig > .s-prompt { container-type: size; overflow: hidden; height: 100%; align-self: stretch; }
.rv-stack .s-fig, .rv-stack .s-mx { height: 100cqh; max-height: 100cqh; max-width: 100cqw; }
.rv-stack .s-mx { gap: 3px; } .rv-stack .s-mc { border-radius: 6px; }
.rv-stack .s-ov { height: 100cqh; max-height: 100cqh; max-width: 100cqw; gap: 6px; }
.rv-stack .s-sheet { height: min(100cqh, calc(50cqw - 16px)); }
@media (max-height: 700px) {
  .rv-stack .s-rvfig:not([data-kind=odd]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "who steps" "pr op"; }
  .rv-stack .s-rvfig > .s-opts { align-self: center; gap: 8px; }
  .rv-stack .s-pick .s-opt, .rv-stack .s-rvfig[data-kind=odd] .s-opt { height: clamp(48px, 12dvh, 84px); }
  .rv-stack .s-cap { font-size: 10px; }
}
/* 図形「裏返しはどれ」の答え合わせ: 札をほかの4問と同じ位置（板の下側・四角の列のすぐ上）に（12号-t #1） */
.rv-grid:not(.rv-stack) .s-rvfig[data-kind=odd] > .s-opts { margin-top: auto; }
/* 結果の凡例: 320 幅で「高得点」だけ2行目に落ちない（区切りの所で折る・初見検品 10） */
.legend .nw { white-space: nowrap; }
/* 数字の順番の説明「数字が消えたら、小さい数から順に押してください。」（初見検品 5）は 320 幅で1行に入らないので、折るなら「、」の後ろで（語の途中・「い。」だけで折らない） */
[data-test^=mem-] .qinst { word-break: keep-all; overflow-wrap: anywhere; }