* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #f4f1ea; color: #222;
  font-family: -apple-system, "Hiragino Sans", "Yu Gothic UI", sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#stage { position: fixed; inset: 0; touch-action: none; }
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#ov { pointer-events: none; }

button {
  font: inherit; font-size: 14px; color: #222;
  background: rgba(255,255,255,.92); border: 1px solid #cfc8bb; border-radius: 10px;
  padding: 7px 11px; touch-action: manipulation; cursor: pointer;
}
button.on, button[aria-pressed="true"] { background: #2b2b2b; color: #fff; border-color: #2b2b2b; }
/* 素材ごとの見た目を決めていない時に、全体の見た目のボタンを薄く光らせる */
button.inherit { background: #e4e0d8; }
button.primary { background: #2e86ab; color: #fff; border-color: #2e86ab; }

.bars {
  position: fixed; left: 0; right: 0; top: 0;
  padding: calc(env(safe-area-inset-top) + 8px) 8px 0;
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; pointer-events: auto; width: fit-content; }
.group { display: inline-flex; gap: 0; }
.group button { border-radius: 0; margin-left: -1px; }
.group button:first-child { border-radius: 10px 0 0 10px; margin-left: 0; }
.group button:last-child { border-radius: 0 10px 10px 0; }

.layer { position: fixed; inset: 0; z-index: 5; }
.pop {
  position: absolute; width: min(340px, calc(100vw - 16px));
  max-height: calc(100vh - 120px); overflow-y: auto;
  background: #fff; border: 1px solid #cfc8bb; border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 4px 14px 12px; font-size: 14px;
}
.pop h3 { font-size: 12px; color: #888; font-weight: 600; margin: 12px 0 2px; }
.sw-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.sw {
  width: 46px; height: 28px; padding: 0; border-radius: 14px; flex: none;
  background: #d9d3c7; border: none; position: relative; transition: background .15s;
}
.sw::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s;
}
.sw[aria-pressed="true"] { background: #2e86ab; }
.sw[aria-pressed="true"]::after { left: 21px; }
button:disabled { opacity: .4; }
.note { font-size: 12px; color: #777; line-height: 1.5; margin: 0 0 4px; }
.help { font-size: 12px; color: #777; line-height: 1.6; margin: 10px 0 0; border-top: 1px solid #eee; padding-top: 8px; }

#panel {
  position: fixed; left: calc(env(safe-area-inset-left) + 8px); bottom: calc(env(safe-area-inset-bottom) + 8px);
  width: min(450px, calc(100vw - 16px));
  background: rgba(255,255,255,.95); border: 1px solid #cfc8bb; border-radius: 14px;
  padding: 8px 10px; display: flex; flex-direction: column; gap: 8px;
}
.prow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fields { justify-content: flex-start; flex-wrap: wrap; }
.fields label { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; }
.fields input {
  width: 64px; font: inherit; font-weight: 400; font-size: 16px; padding: 5px 6px;
  border: 1px solid #cfc8bb; border-radius: 8px; background: #fff;
}
.def { padding: 5px 8px; font-size: 13px; }
#remove { color: #d6332a; }
#poseRow { align-items: flex-start; }
#poseRow .chips { max-width: none; justify-content: flex-start; }
/* 3D素材ごとの設定。欄のすぐ上に出す（外を押しても閉じない。面を押せるように） */
#objPop { position: fixed; z-index: 4; padding: 8px 12px 10px; width: min(330px, calc(100vw - 76px)); }
#objPop .note { margin: 0; }
#objPop h3 { margin: 2px 0 4px; }
/* 見出しの下に、幅いっぱいの切り替え（見た目・ガイド） */
.osec { padding: 6px 0; }
.ohead { display: flex; align-items: center; gap: 6px; min-height: 30px; margin-bottom: 4px; font-size: 14px; }
#objPin { padding: 3px 6px; min-height: 28px; }
.seg { display: flex; width: 100%; }
.seg button { flex: 1 1 auto; padding: 6px 4px; font-size: 12px; white-space: nowrap; }
.osw { border-top: 1px solid #eee; margin-top: 6px; padding-top: 2px; }
.osw .sw-row { padding: 5px 0; }
.step { align-items: center; }
.step button { width: 34px; padding: 4px 0; }
.step .cv { min-width: 30px; text-align: center; border-top: 1px solid #cfc8bb; border-bottom: 1px solid #cfc8bb; align-self: stretch; display: flex; align-items: center; justify-content: center; margin-left: -1px; }

#miniBox {
  position: fixed; left: calc(env(safe-area-inset-left) + 8px); bottom: calc(env(safe-area-inset-bottom) + 112px);
  width: 190px; height: 190px; border-radius: 14px;
  overflow: hidden;
}
#mini { width: 100%; height: 100%; display: block; touch-action: none; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 4px 0 0; font-size: 12px; color: #555; }
.keys dt { font-family: ui-monospace, Consolas, monospace; color: #222; }
.keys dd { margin: 0; }
.keysBox { margin-top: 12px; }
.keysBox summary { font-size: 12px; color: #888; font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.keysBox summary::-webkit-details-marker { display: none; }
.keysBox summary::before { content: '▸'; font-size: 11px; transition: transform .15s; }
.keysBox[open] summary::before { transform: rotate(90deg); }
.keysBox h4 { font-size: 11px; color: #999; font-weight: 600; margin: 8px 0 2px; }
button.icon { display: inline-flex; align-items: center; justify-content: center; padding: 6px 9px; }
#sizeLock[aria-pressed="true"] { background: #fff; color: #222; border-color: #cfc8bb; }
#sizeLock { font-size: 13px; }

/* 記号のボタン */
.ic { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; flex: none; }
.ic .fk { fill: currentColor; stroke: none; }
.ic .vp { fill: #e4572e; stroke: none; }
.ic .hz { stroke: #2e86ab; stroke-width: 1.3; }
.ic .thin { stroke-width: 1; stroke-dasharray: 2 2; opacity: .6; }
button.on .ic .hz, button.primary .ic .hz { stroke: #8fd3ee; }
button.icon { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 9px; min-height: 34px; }
button.it { display: inline-flex; align-items: center; gap: 8px; }
#openPattern .caret { font-size: 10px; color: #888; }
#patternIcon .ic { width: 20px; height: 20px; }
#zoomLabel { font-size: 11px; font-weight: 600; letter-spacing: -.02em; }
.ic-label .ic { width: 20px; height: 20px; color: #555; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; padding: 4px 0 6px; }
.tiles button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; font-size: 12px; }
.tiles .ic { width: 28px; height: 28px; }
.modes { display: flex; flex-direction: column; gap: 6px; }
.modes button { justify-content: flex-start; }
#sizeLock { gap: 6px; font-size: 13px; }
#tip {
  position: fixed; z-index: 20; background: #2b2b2b; color: #fff; font-size: 13px;
  padding: 5px 10px; border-radius: 8px; pointer-events: none; white-space: nowrap;
}
.count-row { display: flex; align-items: center; gap: 10px; padding: 8px 0 2px; font-size: 14px; }
.count-row input { flex: 1; }
#countValue, .cv { min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
#patternLayer .pop { max-height: calc(100vh - 80px); overflow-y: auto; }
.slide { display: inline-flex; align-items: center; gap: 8px; }
.slide input { width: 120px; }
#gridStepValue { min-width: 34px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
#selCount { font-size: 12px; }
.group button { white-space: nowrap; }
.lensSlide { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.92); border: 1px solid #cfc8bb; border-radius: 10px; padding: 3px 10px; }
.lensSlide input { width: 200px; }
#focalValue { min-width: 50px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
#focalBadge { font-size: 12px; }

/* 向きの切り替え（右上の XYZ） */
#axes {
  position: fixed; right: calc(env(safe-area-inset-right) + 6px); top: calc(env(safe-area-inset-top) + 6px);
  width: 84px; height: 84px; border-radius: 50%; touch-action: none; cursor: pointer;
}
#axes:hover { background: rgba(0,0,0,.05); }
/* 表示方法の切り替え（PC だけ、XYZ の左横） */
#lookBar { position: fixed; right: calc(env(safe-area-inset-right) + 96px); top: calc(env(safe-area-inset-top) + 8px); display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 601px) { #lookBar { display: inline-flex; } }
body.focus #lookBar { visibility: hidden; }
/* スマホは上の2段の下の右端 */
#majorBtn { position: fixed; right: calc(env(safe-area-inset-right) + 8px); top: calc(env(safe-area-inset-top) + 92px); }
@media (hover: hover) and (pointer: fine) and (min-width: 601px) { #majorBtn { right: calc(env(safe-area-inset-right) + 262px); top: calc(env(safe-area-inset-top) + 8px); } }
body.focus #majorBtn { visibility: hidden; }
@media (max-width: 600px) { #axes { top: calc(env(safe-area-inset-top) + 136px); } }

/* 右の縦の列（カメラ）。XYZ の玉の真下 */
#camCol {
  position: fixed; right: calc(env(safe-area-inset-right) + 29px); top: calc(env(safe-area-inset-top) + 96px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
@media (max-width: 600px) { #camCol { top: calc(env(safe-area-inset-top) + 226px); } }
#camCol button { width: 38px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.vgroup { display: inline-flex; flex-direction: column; }
.vgroup button { border-radius: 0; margin-top: -1px; }
.vgroup button:first-child { border-radius: 10px 10px 0 0; margin-top: 0; }
.vgroup button:last-child { border-radius: 0 0 10px 10px; }
#camCol #camPick { height: 50px; flex-direction: column; gap: 1px; position: relative; }
#camPick .ic { width: 20px; height: 20px; }
/* 番号は右上、▾ はカメラの真下 */
#camNo { position: absolute; top: 3px; right: 4px; font-size: 10px; font-weight: 700; line-height: 1; }
#camPick .chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#camPop { width: 210px; padding: 8px; }
#camItems { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
#camItems .it, .cam-actions .it { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; }
.cam-actions { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #eee5d6; }
.cam-actions .it { justify-content: center; font-size: 13px; padding: 6px 4px; gap: 4px; }
.cam-actions .it:disabled { opacity: .4; }

/* スライダーはすべて同じ見た目（iPhone の標準に似せる）。つまみの左を青く塗る（--p は app.js が入れる） */
input[type=range] { -webkit-appearance: none; appearance: none; height: 30px; margin: 0; background: none; --p: 50%; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #0a7aff var(--p), #e3e3e8 var(--p)); }
input[type=range][dir=rtl]::-webkit-slider-runnable-track { background: linear-gradient(to left, #0a7aff var(--p), #e3e3e8 var(--p)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; border: none; box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.25); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: #e3e3e8; }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: #0a7aff; }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: none; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
/* 大きさの最小・最大：2本を重ね、つまみだけ押せるようにする。つまみの間を青く塗る */
.dual { flex: 1; position: relative; height: 30px; --a: 0%; --b: 100%; }
.dual input { position: absolute; left: 0; right: 0; top: 0; width: 100%; pointer-events: none; }
.dual input::-webkit-slider-runnable-track { background: linear-gradient(to right, #e3e3e8 var(--a), #0a7aff var(--a), #0a7aff var(--b), #e3e3e8 var(--b)); }
.dual input + input::-webkit-slider-runnable-track { background: none; }
.dual input::-webkit-slider-thumb { pointer-events: auto; }
.dual input::-moz-range-thumb { pointer-events: auto; }
.dual input::-moz-range-progress { background: none; }
#sizeValue { font-size: 13px; color: #555; min-width: 74px; text-align: right; }

/* 集中モード：目のボタンだけ残す */
body.focus .bars, body.focus #axes, body.focus #camCol, body.focus #panel, body.focus #miniBox, body.focus #placeBar { visibility: hidden; }
/* 集中モードのボタンは右下。iPhone で箱を選んで下に欄が出ている間は、欄の上へよける */
#focusBtn { position: fixed; right: calc(env(safe-area-inset-right) + 8px); bottom: calc(env(safe-area-inset-bottom) + 8px); width: 42px; height: 40px; padding: 0; }
/* PC では、集中モードのボタンを右の列（カメラの列・XYZ）と同じ縦の線にそろえる */
@media (min-width: 601px) { #focusBtn { right: calc(env(safe-area-inset-right) + 27px); } }
@media (max-width: 600px) { body:not(.focus) #panel:not([hidden]) ~ #focusBtn { bottom: calc(env(safe-area-inset-bottom) + 118px); } }
/* スマホの縦画面では右上（上の段のボタンの右の空き）に置く */
@media (max-width: 600px) and (orientation: portrait) { #focusBtn, body:not(.focus) #panel:not([hidden]) ~ #focusBtn { top: calc(env(safe-area-inset-top) + 8px); bottom: auto; } }

button.icon.withText { gap: 5px; padding-right: 11px; font-weight: 600; }

.count-row > span:first-child { min-width: 64px; }

/* 箱を置く時の欄。並べ方の吹き出しと同じく、ボタンのすぐ下に出す（外を押しても閉じない） */
#placeBar {
  position: fixed; z-index: 4; padding: 8px 12px 10px;
  width: min(400px, calc(100vw - 16px));
  display: flex; flex-direction: column; gap: 6px;
}
#placeBar .note { margin: 0; }
#placeBar .count-row { padding: 0; }
#placeBar .group button { padding: 5px 12px; }
body.placing #stage { cursor: crosshair; }
#placeBar .group button { padding: 5px 9px; }
#placePoseRow { align-items: flex-start; }
/* パース線を引く時の欄。置く欄と同じく、ボタンのすぐ下に出す */
#penBar { position: fixed; z-index: 4; padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
#penBar .note { margin: 0; }
#penClear { color: #d6332a; }
body.drawing #stage { cursor: crosshair; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 240px; }
.chips button { padding: 4px 9px; font-size: 13px; }

/* カメラのモード（ピンチ・2本指）のボタンは、指で触る端末だけに出す */
@media (hover: hover) and (pointer: fine) { #walkMode { display: none !important; } }

/* 細いスマホでは、上の段のボタンの間と余白を少し詰めて、右上の目のボタンに重ならないようにする */
@media (max-width: 430px) {
  .bars .bar:first-child { gap: 4px; }
  .bars .bar:first-child button.icon { padding: 6px 7px; }
}

/* 問題のページ：3D の画面の上に、画面いっぱいに重ねる */
#quiz { position: fixed; inset: 0; z-index: 50; background: #f3f0e8; overflow-y: auto; }
#quiz .qscreen { max-width: 560px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
#quiz .qhead { display: flex; align-items: center; justify-content: space-between; }
#quiz h2 { margin: 6px 0 0; font-size: 22px; }
#quiz .qlead { margin: 0; color: #555; font-size: 13.5px; line-height: 1.6; }
#quiz .qgames { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#quiz .qcard { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px 12px; text-align: left; border-radius: 14px; background: #fff; }
#quiz .qcard:not(:disabled) { border-color: #2e86ab; box-shadow: 0 3px 0 #2e86ab33; }
#quiz .qcard:not(:disabled):active { transform: translateY(2px); box-shadow: none; }
#quiz .qcard:disabled { opacity: .55; }
#quiz .qart { width: 100%; aspect-ratio: 3 / 2; background: #fbfaf6; border-radius: 10px; display: block; }
#quiz .qart svg { width: 100%; height: 100%; display: block; }
#quiz .qdesc { font-size: 12px; color: #666; line-height: 1.5; }
#quiz .qsoon, #quiz .qbest { position: absolute; top: 8px; right: 8px; font-size: 11px; border-radius: 999px; padding: 2px 8px; }
#quiz .qsoon { background: #e4e0d8; color: #555; }
#quiz .qbest:empty { display: none; }
#quiz .qbest { background: #2e86ab; color: #fff; font-weight: 700; }
#quizPreview { width: 100%; aspect-ratio: 16 / 9; background: #fbfaf6; border: 1px solid #cfc8bb; border-radius: 12px; }
#quiz .qcap { margin: -6px 0 0; font-size: 12px; color: #777; }
#quiz .qactions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
#quiz .qbig { font-size: 64px; font-weight: 800; text-align: center; line-height: 1; }
#quiz .qbig small { font-size: 18px; margin-left: 4px; }
#quiz .qstars { text-align: center; font-size: 30px; color: #e3a21a; letter-spacing: 4px; margin-top: 8px; }
#quiz .qhits { text-align: center; font-weight: 700; color: #444; }
#quizResult .qcap { text-align: center; margin: 0; }
#quiz .qnew { text-align: center; color: #d0402a; font-weight: 700; }
#quizPlay { position: absolute; inset: 0; }
#quizCanvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; background: #fbfaf6; }
#quiz .qbar { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; pointer-events: none; }
#quiz .qcount { font-weight: 700; background: rgba(255,255,255,.9); border-radius: 8px; padding: 4px 8px; }
#quiz .qnote { font-size: 13px; color: #444; background: rgba(255,255,255,.85); border-radius: 8px; padding: 4px 8px; }
/* ボタンは下の段（スマホの幅でも収まるように） */
#quiz .qbtns { position: fixed; left: 8px; right: 8px; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; justify-content: flex-end; gap: 6px; }
#quiz .qbtns button { padding: 9px 14px; }
/* 設定の画面は、選んだゲームに要る行だけ出す */
#quizSetup:not([data-game="vp"]) .vpOnly, #quizSetup:not([data-game="cube"]) .cubeOnly, #quizSetup:not([data-game="eye"]) .eyeOnly, #quizSetup:not([data-game="person"]) .personOnly, #quizSetup:not([data-game="ground"]) .groundOnly { display: none !important; }
/* 解く画面の道具（点・ペン・消しゴム・元に戻す）は左下に */
#quiz .qtools { display: flex; gap: 4px; margin-right: auto; }
#quiz .qtools button { padding: 6px 8px; }
#quiz .qtools button.on { background: #222; color: #fff; border-color: #222; }
/* 狭い画面で入りきらない時は、道具の段を上に折り返す */
#quiz .qbtns { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 420px) { #quiz .qbtns button { padding: 9px 11px; } #quiz .qtools button { padding: 6px 7px; } }
#quiz .qmain { display: flex; gap: 6px; margin-left: auto; }
/* 結果の画面：この回の問題の一覧（押すと見直し・やり直し） */
#quiz .qsub { margin: 18px 0 2px; font-size: 16px; }
#quiz .qhist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
#quiz .qhist button { display: flex; flex-direction: column; gap: 3px; padding: 4px; border-radius: 10px; background: #fff; font-size: 12px; }
#quiz .qhist canvas { width: 100%; border-radius: 6px; background: #fbfaf6; display: block; }
#quiz .qhist .ok { color: #2ea05a; font-weight: 700; }
#quiz .qhist .ng { color: #d0402a; font-weight: 700; }
#quizGround.on { background: #2ea05a; color: #fff; border-color: #2ea05a; }

/* 問題のページ：検索から直接来ても1つのサイトに見えるよう、上の帯・大きな見出し・使い方・3Dの案内・フッターを付ける */
#quiz .qtop { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px max(16px, calc((100% - 960px) / 2 + 16px)); background: rgba(243,240,232,.92); backdrop-filter: blur(8px); border-bottom: 1px solid #e2ddd2; }
#quiz .qbrand { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; text-align: left; }
#quiz .qbrand b { display: block; font-size: 16px; }
#quiz .qbrand small { display: block; font-size: 11px; color: #777; }
#quiz .qlogo { width: 32px; height: 32px; flex: none; }
#quiz .qnav { display: flex; align-items: center; gap: 8px; }
#quiz .qlang button { padding: 5px 9px; font-size: 12px; }
#quiz .qnav3d { border-color: #2e86ab; color: #2e86ab; font-weight: 700; }
#quiz .qwide { max-width: 960px; }
#quiz .qhero { padding: 26px 4px 6px; }
#quiz .qkicker { margin: 0 0 6px; color: #2e86ab; font-weight: 700; font-size: 13px; letter-spacing: .04em; }
#quiz .qhero h1 { margin: 0; font-size: clamp(26px, 5vw, 40px); line-height: 1.25; }
#quiz .qherolead { margin: 12px 0 0; color: #555; font-size: 15px; line-height: 1.75; max-width: 640px; }
#quiz .qchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
#quiz .qchips span { font-size: 12px; background: #fff; border: 1px solid #e2ddd2; border-radius: 999px; padding: 4px 10px; color: #444; }
#quiz .qcta { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
#quiz .qcta .primary { padding: 12px 22px; font-size: 15px; font-weight: 700; border-radius: 12px; }
#quiz .qghost { color: #2e86ab; font-weight: 700; font-size: 14px; text-decoration: none; }
#quiz .qsec { margin: 26px 0 0; font-size: 18px; }
@media (min-width: 900px) { #quiz .qwide .qgames { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
#quiz .qsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 640px) { #quiz .qsteps { grid-template-columns: 1fr; } }
#quiz .qsteps li { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid #e2ddd2; border-radius: 14px; padding: 12px; }
#quiz .qsteps li > b { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #2e86ab; color: #fff; display: grid; place-items: center; font-size: 13px; }
#quiz .qsteps strong { display: block; font-size: 14px; }
#quiz .qsteps small { display: block; margin-top: 3px; color: #666; font-size: 12px; line-height: 1.55; }
#quiz .qpromo { margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: #2e86ab; color: #fff; border-radius: 16px; padding: 18px 20px; }
#quiz .qpromo h2 { margin: 0; font-size: 18px; color: #fff; }
#quiz .qpromo p { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: #e3f3fa; max-width: 560px; }
#quiz .qpromo .primary { background: #fff; color: #2e86ab; border-color: #fff; font-weight: 700; padding: 10px 18px; }
#quiz .qfoot { max-width: 960px; margin: 34px auto 0; padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid #e2ddd2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: #777; font-size: 12px; }
#quiz .qfoot > span { display: flex; align-items: center; gap: 8px; color: #333; font-size: 14px; }
#quiz .qfoot .qlogo { width: 22px; height: 22px; }
#quiz .qfoot small { width: 100%; }
#quiz .qlink { border: 0; background: none; padding: 0; color: #2e86ab; font-weight: 700; font-size: 13px; }
#quiz .qnav3d, #quiz .qbrand b { white-space: nowrap; }
@media (max-width: 420px) { #quiz .qbrand small { display: none; } #quiz .qbrand b { font-size: 14px; } #quiz .qnav3d { padding: 6px 10px; font-size: 12px; } #quiz .qlang button { padding: 4px 7px; } }
#quizSetup:not([data-game="cube"]):not([data-game="eye"]) .threeOnly { display: none !important; }

/* やめる（見直しの時は戻る）は、答え合わせ・次へと押し間違えないよう、下の並びから離して右上に置く */
#quiz .qbar .qquit { margin-left: auto; pointer-events: auto; padding: 6px 12px; font-size: 13px; }