/* 大人の勉強 (2026-11-03 ・ otona/*.php ・ js/qzn_otona.js) ・ 宇宙の 暗い 地 ・ 時空パイロットの 訓練 (航路の マップ ・ 管制官の 指令 ・ 下に ランクと ★の 帯)
   文字は 12px 以上 (SVG は viewBox 340 で 13.5 以上) ・ 数字 ・ ボタンは ゴシック体 ・ 明朝体の 斜体は 式の 文字 (変数) だけ */
body.ot-body { background: #0A0F2C; }
body.ot-hasHud { padding-bottom: 76px; }
.ot-wrap, .ot-ov, .ot-hud, .ot-toast { --bg: #0A0F2C; --pn: #121A42; --pn2: #19235A; --ln: rgba(148,163,184,.24); --tx: #E6EAF5; --tx2: #C3CBE0; --tx3: #9AA6C8; --cy: #22D3EE; --cyl: #A5F3FC; --gd: #FBBF24; --pk: #F472B6; --gr: #4ADE80; --rd: #F87171; }
.ot-body .qz-breadcrumb { color: #C3CBE0; font-size: 12px; }
.ot-body .qz-breadcrumb a { color: #A5F3FC; }
.ot-body .qz-breadcrumb .cur { color: #C3CBE0; }
.ot-body .qz-breadcrumb .sep { color: #9AA6C8; opacity: 1; }
.ot-wrap {
	max-width: 760px; margin: 0 auto; padding: 4px 16px 28px; color: var(--tx);
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
	word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.ot-wrap ::selection { background: rgba(34,211,238,.35); }
.ot-wrap p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.9; color: var(--tx2); text-wrap: pretty; }
.ot-wrap b { color: #fff; }
.ot-wrap h1, .ot-wrap h2, .ot-wrap h3 { font-feature-settings: "palt"; text-wrap: balance; }
.ot-wrap .f, .ot-wrap .nw { white-space: nowrap; }
.ot-wrap i { font-style: normal; }
.ot-wrap p > i, .ot-wrap .ot-eq i { font-family: "Times New Roman", serif; font-style: italic; font-size: 1.08em; }
.ot-wrap sup { font-size: .7em; }
.ot-wrap a { color: var(--cyl); }
.ot-wrap [hidden] { display: none !important; }
.ot-wrap button { font-family: inherit; }
.ot-wrap svg text { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif; }

/* ── 表紙 */
.ot-hero { position: relative; overflow: hidden; margin: 6px 0 12px; padding: 14px 16px 16px; border-radius: 22px; color: #fff;
	background: radial-gradient(circle at 82% 18%, rgba(56,189,248,.35) 0%, transparent 45%), radial-gradient(circle at 10% 100%, rgba(244,114,182,.22) 0%, transparent 50%), linear-gradient(160deg, #0B1437 0%, #131D55 60%, #22195A 100%);
	box-shadow: inset 0 0 0 1px rgba(103,232,249,.25), 0 10px 30px rgba(0,0,0,.35); }
.ot-hero .top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.ot-hero .k { display: inline-block; padding: 4px 11px; border-radius: 999px; background: rgba(103,232,249,.16); box-shadow: inset 0 0 0 1px rgba(103,232,249,.4); color: var(--cyl); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.ot-hero .se { flex: none; }
.ot-hero .art { position: relative; display: block; width: 100%; max-width: 480px; height: auto; margin: 8px 0 0; pointer-events: none; }
.ot-hero h1 { position: relative; margin: 8px 0 6px; font-size: 34px; font-weight: 900; line-height: 1.15; letter-spacing: .02em; text-shadow: 0 0 22px rgba(103,232,249,.45); }
.ot-hero h1 small { display: block; margin-top: 4px; font-size: 18px; color: var(--cyl); text-shadow: none; }
.ot-hero p { position: relative; margin: 0 0 6px; color: var(--tx); font-weight: 700; }
.ot-hero .lead { font-size: 15px; line-height: 1.7; color: #fff; }
.ot-hero .meta { font-size: 12.5px; color: var(--tx3); }
.ot-hrank { position: relative; display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; padding: 9px 12px; border-radius: 16px; background: rgba(10,15,44,.55); box-shadow: inset 0 0 0 1px rgba(251,191,36,.35); }
.ot-hrank .bd { flex: none; width: 46px; height: 46px; }
.ot-hrank .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ot-hrank small { color: var(--tx3); font-size: 12px; font-weight: 700; }
.ot-hrank b { font-size: 17px; color: var(--gd); }
.ot-hrank .pg { display: block; height: 7px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.ot-hrank .pg i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gd), var(--pk)); }
.ot-cta { position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; margin: 10px 0 0; border-radius: 16px; background: linear-gradient(180deg, #67E8F9, #22D3EE); box-shadow: 0 4px 0 #0E7490, 0 0 24px rgba(34,211,238,.45); color: #083344 !important; font-size: 17px; font-weight: 900; text-decoration: none; }
.ot-wrap .ot-hsub { display: block; margin: 8px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--cyl); }
.ot-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 #0E7490; }
.ot-badge { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.ot-ship { display: block; overflow: visible; }

/* ── ミッション マップ (3 × 3 の 航路 ・ 2 段目は 右から 左) */
.ot-map { margin: 0 0 14px; padding: 12px 10px 12px; border-radius: 20px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln); scroll-margin-top: 70px; }
.ot-map .hd { display: flex; justify-content: space-between; align-items: baseline; margin: 0 4px 6px; font-size: 13px; font-weight: 900; color: var(--cyl); letter-spacing: .06em; line-height: 1.4; }
.ot-map .hd .sc { color: var(--gd); letter-spacing: 0; font-size: 13px; }
.ot-map .hd .sc b { color: #fff; font-size: 17px; margin: 0 1px; }
.ot-map .rtw { position: relative; }
.ot-map .rt { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ot-map .rt path { fill: none; }
.ot-map .rt .r0 { fill: none; stroke: rgba(148,163,184,.4); stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; stroke-linejoin: round; }
.ot-map .rt .r1 { fill: none; stroke: #FBBF24; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(251,191,36,.7)); }
.ot-map ol { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.ot-map li:nth-child(4) { grid-column: 3; grid-row: 2; }
.ot-map li:nth-child(5) { grid-column: 2; grid-row: 2; }
.ot-map li:nth-child(6) { grid-column: 1; grid-row: 2; }
.ot-map li:nth-child(7) { grid-column: 1; grid-row: 3; }
.ot-map li:nth-child(8) { grid-column: 2; grid-row: 3; }
.ot-map li:nth-child(9) { grid-column: 3; grid-row: 3; }
.ot-map li a { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; padding: 6px 2px 8px; border-radius: 14px; color: var(--tx); text-decoration: none; text-align: center; }
.ot-map li a:active { background: rgba(255,255,255,.05); }
.ot-map .pl { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3B4B9A, #1A2257 70%); box-shadow: inset 0 0 0 2px rgba(103,232,249,.55), 0 0 0 5px var(--pn); }
.ot-map .pl i { font-size: 17px; font-weight: 900; color: var(--cyl); }
.ot-map li a b { position: relative; display: block; padding: 1px 2px; border-radius: 8px; background: var(--pn); font-size: 12.5px; line-height: 1.35; color: #fff; }
.ot-map li a .sts { position: relative; margin-top: auto; padding: 2px 5px; border-radius: 8px; background: var(--pn); font-size: 12px; letter-spacing: 1px; line-height: 1; }
.ot-map li a.part .pl { box-shadow: inset 0 0 0 2.5px var(--gd), 0 0 0 5px var(--pn); }
.ot-map li a.clear .pl { background: radial-gradient(circle at 35% 30%, #FEF3C7, #F59E0B 70%); box-shadow: 0 0 0 5px var(--pn), 0 0 18px rgba(251,191,36,.75); }
.ot-map li a.clear .pl i { color: #422006; }
.ot-map li a.now .pl::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(103,232,249,.8); animation: otRing 1.6s ease-out infinite; }
@keyframes otRing { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.ot-map li a[data-m="quiz"] .pl { background: radial-gradient(circle at 35% 30%, #FBCFE8, #BE185D 75%); box-shadow: inset 0 0 0 2px #FDE68A, 0 0 0 5px var(--pn); }
.ot-map li a[data-m="quiz"] .pl i { color: #fff; }
.ot-map li a[data-m="quiz"].clear .pl { background: radial-gradient(circle at 35% 30%, #FEF3C7, #F59E0B 70%); }
.ot-map li a[data-m="quiz"].clear .pl i { color: #422006; }
.ot-map .shp { position: absolute; right: -26px; top: -14px; width: 40px; height: 21px; transform: rotate(-24deg); animation: otBob 1.8s ease-in-out infinite; pointer-events: none; }
.ot-map .shp svg { width: 100%; height: 100%; }
@keyframes otBob { 50% { transform: rotate(-24deg) translate(2px, -3px); } }
.ot-exlink { display: block; margin: 10px 4px 0; padding: 9px 12px; border-radius: 12px; background: linear-gradient(90deg, rgba(244,114,182,.18), rgba(34,211,238,.14)); box-shadow: inset 0 0 0 1px rgba(244,114,182,.45); color: #fff !important; font-size: 13px; font-weight: 800; text-decoration: none; text-align: center; }
.ot-rec { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 10px 4px 0 !important; font-size: 12px !important; line-height: 1.5 !important; }
.ot-rec b { color: var(--gd) !important; margin-right: 2px; }
.ot-rec span { padding: 1px 8px; border-radius: 99px; background: rgba(255,255,255,.07); color: var(--tx2); }
.sts i { color: rgba(255,255,255,.22); }
.sts i.on, .st i.on, .wn i.on { color: var(--gd); text-shadow: 0 0 8px rgba(251,191,36,.6); }
.st i, .wn i { color: rgba(255,255,255,.22); }

/* ── カード (各ミッション) と 見出し ・ 管制官の 指令 ・ ★の 取り方 */
.ot-card { margin: 0 0 14px; padding: 16px 16px 14px; border-radius: 20px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln); scroll-margin-top: 70px; }
.ot-card h2 { margin: 6px 0 8px; font-size: 21px; line-height: 1.4; color: #fff; }
.ot-card h3 { margin: 16px 0 8px; font-size: 17px; color: #fff; }
.ot-wrap .ot-lead { font-size: 15px; line-height: 1.8; }
.ot-mban { display: flex; align-items: center; gap: 8px; margin: -2px 0 2px; flex-wrap: wrap; }
.ot-mban .no { padding: 3px 9px; border-radius: 8px; background: linear-gradient(90deg, #22D3EE, #818CF8); color: #0B1026; font-size: 12px; font-weight: 900; letter-spacing: .06em; }
.ot-mban[data-m="quiz"] .no { background: linear-gradient(90deg, #FBBF24, #F472B6); }
.ot-mban .no.ex { background: linear-gradient(90deg, #F472B6, #A78BFA); }
.ot-mban b { font-size: 13px; color: var(--cyl); }
.ot-mban .sts { margin-left: auto; font-size: 16px; letter-spacing: 2px; }
.ot-cmd { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 8px; }
.ot-cmd .av, .ot-result .cm .av { flex: none; width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #2E3A86, #121A42); box-shadow: inset 0 0 0 2px rgba(103,232,249,.5); padding: 3px; }
.ot-cmd .av svg, .ot-result .cm .av svg { display: block; width: 100%; height: 100%; }
.ot-wrap .ot-cmd .bb { position: relative; flex: 1; min-width: 0; margin: 0; padding: 9px 12px; border-radius: 4px 14px 14px 14px; background: rgba(34,211,238,.1); box-shadow: inset 0 0 0 1px rgba(103,232,249,.4); font-size: 14.5px; line-height: 1.7; color: #fff; font-weight: 700; }
.ot-cmd .bb b, .ot-result .cm .bb b { display: block; margin: 0 0 1px; font-size: 12px; color: var(--cyl); letter-spacing: .06em; }
.ot-rule { margin: 0 0 12px; padding: 8px 10px; list-style: none; border-radius: 12px; background: rgba(251,191,36,.07); box-shadow: inset 0 0 0 1px rgba(251,191,36,.3); display: grid; gap: 3px; }
.ot-rule li { display: flex; align-items: baseline; gap: 6px; font-size: 13px; line-height: 1.55; color: var(--tx2); font-weight: 700; }
.ot-rule li i { flex: none; color: rgba(255,255,255,.25); font-size: 14px; }
.ot-rule li.on { color: #fff; }
.ot-rule li.on i { color: var(--gd); text-shadow: 0 0 8px rgba(251,191,36,.6); }


.ot-two { margin: 4px 0 12px; padding: 0; list-style: none; display: grid; gap: 8px; }
.ot-two li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; padding: 11px 12px; border-radius: 14px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); }
.ot-two .ic { grid-row: 1 / 3; width: 40px; height: 40px; }
.ot-two .ic svg { width: 100%; height: 100%; }
.ot-two b { font-size: 15px; color: var(--cyl); }
.ot-two span { font-size: 14px; line-height: 1.8; color: var(--tx2); }
.ot-point { margin: 12px 0 2px; padding: 12px 14px; border-radius: 14px; background: rgba(34,211,238,.08); box-shadow: inset 3px 0 0 var(--cy); }
.ot-point > b { display: block; margin: 0 0 4px; color: var(--cyl); font-size: 15px; }
.ot-point p { margin: 0; font-size: 14.5px; }
.ot-point p + p, .ot-point table + p { margin-top: 8px; }
.ot-point .sm, .ot-wrap .sm { font-size: 13px; color: var(--tx3); }
.ot-wrap .ot-note { padding: 10px 12px; border-radius: 12px; background: var(--pn2); font-size: 14px; }
.ot-tbl { width: 100%; margin: 8px 0 0; border-collapse: collapse; font-size: 13.5px; }
.ot-tbl th, .ot-tbl td { padding: 6px 6px; border-bottom: 1px solid var(--ln); text-align: right; color: var(--tx); }
.ot-tbl th { color: var(--tx3); font-size: 12px; font-weight: 700; }
.ot-tbl th:first-child, .ot-tbl td:first-child { text-align: left; }
.ot-tbl td { font-variant-numeric: tabular-nums; }
.otjs .ot-after.wait { display: none; }

/* ── ボタン */
.ot-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #22D3EE, #0891B2); box-shadow: 0 3px 0 #0E4F5C; color: #fff !important; font-size: 15px; font-weight: 900; text-decoration: none; cursor: pointer; }
.ot-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #0E4F5C; }
.ot-btn:disabled { opacity: .5; cursor: default; }
.ot-btn.sub { background: var(--pn2); box-shadow: inset 0 0 0 1.5px var(--ln); color: var(--tx) !important; }
.ot-btn.x { background: #000; box-shadow: inset 0 0 0 1px #475569; }
.ot-btn.boss { background: linear-gradient(180deg, #F472B6, #BE185D); box-shadow: 0 4px 0 #831843, 0 0 20px rgba(244,114,182,.35); }
.ot-skip { display: block; margin: 10px auto 0; padding: 6px 10px; border: 0; background: none; color: var(--tx3); font-size: 13px; text-decoration: underline; cursor: pointer; }
.ot-mini2 { display: block; margin: 6px 0 0 auto; padding: 6px 10px; border: 0; border-radius: 10px; background: rgba(255,255,255,.07); color: var(--cyl); font-size: 13px; font-weight: 800; cursor: pointer; }

/* ── 3 択 (MISSION 1) ・ 投げ比べの 実験 */
.ot-qs { display: grid; gap: 10px; margin: 8px 0 4px; }
.ot-q { padding: 12px; border-radius: 16px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); }
.ot-q.ok { animation: otGood .9s ease; }
.ot-q.ng { animation: otBad .9s ease; }
@keyframes otGood { 25% { box-shadow: inset 0 0 0 2px var(--gr), 0 0 26px rgba(74,222,128,.45); } }
@keyframes otBad { 25% { box-shadow: inset 0 0 0 2px var(--rd), 0 0 22px rgba(248,113,113,.35); } }
.ot-q .qn { display: inline-block; margin: 0 0 6px; padding: 2px 9px; border-radius: 8px; background: rgba(34,211,238,.18); color: var(--cyl); font-size: 12px; font-weight: 900; }
.ot-wrap .ot-q .qt { margin: 0 0 10px; font-size: 15.5px; line-height: 1.75; color: #fff; font-weight: 700; }
.ot-q .cs { display: grid; gap: 8px; }
.ot-c { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 10px 14px; border: 0; border-radius: 12px; background: #222D6B; box-shadow: inset 0 0 0 1.5px rgba(148,163,184,.35), 0 3px 0 #0B1026; color: #fff; font-size: 15px; font-weight: 800; text-align: left; line-height: 1.5; cursor: pointer; }
.ot-c:active { transform: translateY(2px); box-shadow: inset 0 0 0 1.5px rgba(148,163,184,.35), 0 1px 0 #0B1026; }
.ot-c.right { background: #14532D; box-shadow: inset 0 0 0 2px var(--gr); }
.ot-c.right::after { content: "○"; flex: none; color: var(--gr); font-size: 24px; font-weight: 900; line-height: 1; }
.ot-c.wrong { background: #4C1D1D; box-shadow: inset 0 0 0 2px var(--rd); }
.ot-c.wrong::after { content: "×"; flex: none; color: var(--rd); font-size: 26px; font-weight: 900; line-height: 1; }
.ot-c:disabled { cursor: default; }
.ot-c:disabled:not(.right):not(.wrong) { opacity: .6; }
.ot-exp { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(74,222,128,.1); }
.ot-q.ng .ot-exp { background: rgba(248,113,113,.1); }
.ot-exp > b { display: block; margin: 0 0 4px; color: var(--gr); }
.ot-q.ng .ot-exp > b { color: #FCA5A5; }
.ot-exp p { margin: 0; font-size: 14.5px; }
.ot-exp .re { display: flex; width: 100%; margin-top: 10px; }
.otjs .ot-q:not(.done) .ot-exp { display: none; }
.ot-lane { position: relative; margin: 10px 0 0; }
.ot-lane[data-jd]::after { position: absolute; right: 10px; top: 8px; padding: 2px 10px; border: 2.5px solid; border-radius: 8px; font-size: 14px; font-weight: 900; transform: rotate(-6deg); }
.ot-lane[data-jd="ok"]::after { content: "予想 的中"; color: var(--gr); border-color: var(--gr); }
.ot-lane[data-jd="ng"]::after { content: "予想 はずれ"; color: #FCA5A5; border-color: #F87171; }
.ot-lane svg { display: block; width: 100%; height: auto; }
.ot-lane .nm { fill: #fff; font-size: 13.5px; font-weight: 900; text-anchor: middle; }
.ot-lane .ng { fill: #FCA5A5; font-size: 13.5px; font-weight: 900; }
.ot-wrap .ot-lane .lr { margin: 6px 0 0; font-size: 14px; line-height: 1.7; color: var(--tx); font-weight: 700; }
.ot-lane .lr b { padding: 0 2px; white-space: nowrap; }
.ot-lane .lr .c1 { color: #67E8F9; }
.ot-lane .lr .c2 { color: #FDE68A; }
.ot-lane .lr .c3 { color: var(--gr); }

/* ── ミッションの 一行 ・ 予想 (光時計) */
.ot-mis { margin: 10px 0; padding: 11px 13px; border-radius: 14px; background: rgba(251,191,36,.1); box-shadow: inset 0 0 0 1px rgba(251,191,36,.4); color: var(--tx); font-size: 14.5px; line-height: 1.75; font-weight: 700; }
.ot-mis .sg { display: block; margin: 0 0 2px; font-size: 12px; color: var(--gd); font-weight: 900; letter-spacing: .04em; }
.ot-mis b { color: var(--gd); }
.ot-mis.ok { background: rgba(74,222,128,.12); box-shadow: inset 0 0 0 1px rgba(74,222,128,.5); }
.ot-mis.ok > b { display: block; color: #fff; }
.ot-mis .ht { display: block; margin-top: 4px; font-size: 15px; color: var(--cyl); }
.ot-mis .ht.hit { color: var(--gr); }
.ot-mis .ht small { margin-left: 8px; font-size: 12.5px; color: var(--tx3); font-weight: 700; }
.ot-mis .wn { display: block; font-size: 24px; letter-spacing: 4px; }
.ot-mis .bts { display: grid; gap: 8px; margin-top: 10px; }
.ot-mis .bts .ot-btn { width: 100%; }
.ot-tabs { display: flex; gap: 6px; }
.ot-tabs button { flex: 1; min-height: 46px; padding: 4px; border: 0; border-radius: 12px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); color: var(--tx2); font-size: 13px; font-weight: 900; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.ot-tabs button.on { background: rgba(34,211,238,.18); box-shadow: inset 0 0 0 2px var(--cy); color: #fff; }
.ot-tabs .st { font-size: 13px; }
.ot-ask { margin: 0 0 10px; padding: 12px; border-radius: 16px; background: rgba(34,211,238,.08); box-shadow: inset 0 0 0 1px rgba(34,211,238,.4); }
.ot-wrap .ot-ask .aq, .ot-wrap .ot-tw-pred .aq { margin: 0 0 8px; color: #fff; font-weight: 800; text-align: center; font-size: 14.5px; line-height: 1.6; }
.ot-ask .ach, .ot-tw-pred .ach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ot-ask button, .ot-tw-pred button { min-height: 52px; padding: 4px; border: 0; border-radius: 12px; background: #222D6B; box-shadow: inset 0 0 0 1.5px var(--ln), 0 3px 0 #0B1026; color: #fff; font-size: 17px; font-weight: 900; cursor: pointer; font-variant-numeric: tabular-nums; }
.ot-ask button.right { background: #14532D; box-shadow: inset 0 0 0 2px var(--gr); }
.ot-ask button.wrong { background: #4C1D1D; box-shadow: inset 0 0 0 2px var(--rd); }
.ot-ask button:disabled:not(.right):not(.wrong), .ot-tw-pred button:disabled:not(.pk) { opacity: .5; }
.ot-ask .a1 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14.5px; color: var(--tx); font-weight: 700; }
.ot-ask .a1 b { color: var(--gr); }
.ot-ask .a1.ng b { color: #FCA5A5; }
.ot-ask .a1 .why { margin-left: auto; min-height: 34px; padding: 0 12px; font-size: 13px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--ln); }
.ot-wrap .ot-ask .ar, .ot-wrap .ot-gstep .ar { margin: 10px 0 0; font-size: 14px; line-height: 1.7; }
.ot-ask .ar b, .ot-gstep .ar b { display: block; font-size: 15px; }
.ot-ask .ar.ok b, .ot-gstep .ar.ok b { color: var(--gr); }
.ot-ask .ar.ng b, .ot-gstep .ar.ng b { color: #FCA5A5; }

/* ── 光時計 */
.ot-clkw { margin: 0 0 8px; border-radius: 16px; overflow: hidden; background: #070B22; box-shadow: inset 0 0 0 1px var(--ln); }
.ot-clk { display: block; width: 100%; height: auto; }
.ot-clk .sky circle { fill: #fff; opacity: .35; }
.ot-clk .gnd { fill: rgba(148,163,184,.12); }
.ot-clk .box { fill: rgba(56,189,248,.08); stroke: rgba(148,163,184,.4); stroke-width: 1.5; }
.ot-clk .box.g { fill: rgba(74,222,128,.08); }
.ot-clk .hull { fill: rgba(226,232,240,.1); stroke: #CBD5E1; stroke-width: 2; }
.ot-clk .mr { stroke: #E2E8F0; stroke-width: 4; stroke-linecap: round; }
.ot-clk .pth { stroke: rgba(103,232,249,.35); stroke-width: 1.5; stroke-dasharray: 3 4; }
.ot-clk .ph { fill: #FEF9C3; stroke: #FDE68A; stroke-opacity: .55; stroke-width: 7; }
.ot-clk .pill { fill: rgba(15,23,42,.7); stroke: rgba(74,222,128,.45); }
.ot-clk .pl { fill: #CBD5E1; font-size: 14px; font-weight: 700; }
.ot-clk .pn { fill: #fff; font-size: 28px; font-weight: 900; text-anchor: end; }
.ot-clk .pn .u { font-size: 14px; fill: #CBD5E1; }
.ot-clk .lb { fill: #E2E8F0; font-size: 14px; font-weight: 700; }
.ot-clk .cnt { fill: #FDE68A; font-size: 14px; font-weight: 700; text-anchor: end; }
.ot-clk .cnt tspan { font-size: 19px; font-weight: 900; }
.ot-clk .tr { stroke: #A5F3FC; stroke-width: 2.4; fill: none; opacity: .9; }
.ot-clk .tr2 { stroke: #22D3EE; stroke-width: 8; fill: none; opacity: .18; }
.ot-clk .sp { fill: #A5B4CF; font-size: 14px; text-anchor: middle; font-weight: 700; }

/* ── スライダー */
.ot-ctl { padding: 12px; border-radius: 16px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); transition: opacity .2s; }
.ot-ctl.lock { opacity: .45; }
.ot-ctl .rw, .ot-pred .rw, .ot-fuel .rw, .ot-vadd .rw { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ot-ctl .rw > span, .ot-pred .rw > span, .ot-fuel .rw > span, .ot-vadd .rw > span { font-size: 13px; color: var(--tx3); font-weight: 700; line-height: 1.5; }
.ot-ctl .bv { font-size: 19px; color: #fff; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ot-ctl .bv small { display: block; font-size: 12px; color: var(--tx3); font-weight: 700; }
.ot-ctl .rg { position: relative; margin: 10px 0 20px; }
.ot-ctl .tk { position: absolute; top: 27px; transform: translateX(-50%); white-space: nowrap; font-size: 12px; color: var(--tx3); font-weight: 700; }
.ot-ctl .tk::before { content: ""; position: absolute; left: 50%; top: -8px; width: 1px; height: 6px; background: var(--tx3); }
.ot-wrap input[type=range] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 0; background: transparent; --p: 0%; }
.ot-wrap input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 99px; background: linear-gradient(90deg, #22D3EE, #A78BFA var(--p), rgba(255,255,255,.12) var(--p)); }
.ot-wrap input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -9px; border-radius: 50%; background: #fff; border: 4px solid #22D3EE; box-shadow: 0 0 0 4px rgba(34,211,238,.25), 0 2px 6px rgba(0,0,0,.4); }
.ot-wrap input[type=range]::-moz-range-track { height: 10px; border-radius: 99px; background: rgba(255,255,255,.12); }
.ot-wrap input[type=range]::-moz-range-progress { height: 10px; border-radius: 99px; background: #22D3EE; }
.ot-wrap input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid #22D3EE; }
.ot-ctl .gm { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--tx2); font-weight: 700; }
.ot-ctl .gm .gt { flex: 1; min-width: 0; line-height: 1.6; }
.ot-ctl .gv { flex: none; padding: 4px 10px; border-radius: 10px; background: rgba(251,191,36,.14); color: var(--gd); font-size: 15px; font-weight: 800; }
.ot-ctl .gv b { color: var(--gd); font-variant-numeric: tabular-nums; }
.ot-ctl .tg { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: rgba(251,191,36,.1); box-shadow: inset 0 0 0 1px rgba(251,191,36,.4); }
.ot-ctl .tg .tl { font-size: 13px; color: var(--tx); font-weight: 700; line-height: 1.5; }
.ot-ctl .tg .tl b { color: var(--gd); }
.ot-ctl .tg .tw { flex: none; font-size: 14px; color: var(--cyl); white-space: nowrap; }
.ot-ctl .tg .tw.hit { color: var(--gr); }
.ot-ctl .pace { display: grid; gap: 6px; margin: 0 0 10px; }
.ot-ctl .pace > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); align-items: center; gap: 8px; }
.ot-ctl .pace small { font-size: 12px; color: var(--tx2); font-weight: 700; }
.ot-ctl .pace span { position: relative; height: 14px; border-radius: 99px; background: rgba(255,255,255,.08); }
.ot-ctl .pace i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #4ADE80, #22D3EE); }
.ot-ctl .pace .sp { background: linear-gradient(90deg, #A78BFA, #F472B6); transition: width .15s; }
.ot-ctl .pace em { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--gd); box-shadow: 0 0 6px rgba(251,191,36,.8); }
.ot-ctl .fine { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; margin-top: 10px; }
.ot-ctl .pm { min-height: 42px; border: 0; border-radius: 10px; background: #2B3780; box-shadow: inset 0 0 0 1.5px rgba(103,232,249,.4); color: var(--cyl); font-size: 22px; font-weight: 900; line-height: 1; cursor: pointer; }
.ot-pre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.ot-pre button { min-height: 42px; padding: 2px; border: 0; border-radius: 10px; background: #222D6B; box-shadow: inset 0 0 0 1px var(--ln); color: var(--tx); font-size: 13px; font-weight: 800; cursor: pointer; }
.ot-ctl button:disabled { cursor: default; }

/* ── 式 (静的な 図と 例) */
.ot-eq { display: inline-block; margin: 4px 0; padding: 4px 10px; border-radius: 10px; background: rgba(255,255,255,.06); color: #fff; font-size: 16px; font-weight: 700; white-space: nowrap; }
.ot-formula { margin: 10px 0 12px; padding: 14px 12px; border-radius: 16px; background: linear-gradient(160deg, rgba(34,211,238,.14), rgba(167,139,250,.12)); box-shadow: inset 0 0 0 1px rgba(103,232,249,.45); text-align: center; }
.ot-formula .big { font-size: 19px; background: none; color: #fff; text-shadow: 0 0 14px rgba(103,232,249,.5); }
.ot-formula small { display: block; margin-top: 6px; font-size: 13px; color: var(--tx2); line-height: 1.7; }
.ot-steps { margin: 6px 0 10px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; }
.ot-steps li { counter-increment: s; position: relative; padding: 8px 12px 8px 44px; border-radius: 12px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); color: #fff; font-size: 15.5px; font-weight: 700; line-height: 1.8; }
.ot-steps li::before { content: counter(s); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cy); color: #0B1026; font-size: 13px; font-weight: 900; }
.ot-wrap .ot-n { color: var(--gr); }

/* ── MISSION 3 ・ 導出パズル (2026-11-15 ・ 三角形 → 辺の 名前 → ピタゴラス → 式の 変形 → 暗号 ・ 緑の 端末の 見た目) */
.ot-dpz { margin: 4px 0 6px; padding: 12px; border-radius: 18px; background: #050A1F; box-shadow: inset 0 0 0 1.5px rgba(74,222,128,.45), 0 0 24px rgba(74,222,128,.08); font-variant-numeric: tabular-nums; scroll-margin-top: 70px; }
.ot-dpz .hd { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; color: #86EFAC; font-weight: 800; letter-spacing: .06em; }
.ot-dpz .hd b { color: #86EFAC; }
.ot-dpz .hd .pg { margin-left: auto; color: #4ADE80; letter-spacing: .02em; }
.ot-dpz .hd .pg b { color: #fff; font-size: 16px; margin: 0 1px; }
.ot-dpz .lamp { width: 10px; height: 10px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 10px #4ADE80; animation: otBlink 1.2s steps(2) infinite; }
@keyframes otBlink { 50% { opacity: .25; } }
.ot-dpz .dots { display: flex; gap: 4px; margin: 0 0 6px; }
.ot-dpz .dots i { flex: 1; height: 4px; border-radius: 2px; background: rgba(134,239,172,.18); }
.ot-dpz .dots i.on { background: #4ADE80; box-shadow: 0 0 6px rgba(74,222,128,.7); }
.ot-dpz .tri { display: block; width: 100%; height: auto; margin: 0 0 6px; border-radius: 12px; background: #070B22; box-shadow: inset 0 0 0 1px rgba(134,239,172,.18); }
.ot-dpz .tri .star { fill: #fff; opacity: .5; }
.ot-dpz .tri .hull { fill: #1E2A63; stroke: #A5F3FC; stroke-width: 1.6; stroke-linejoin: round; }
.ot-dpz .tri .fin { stroke: #A5F3FC; stroke-width: 3; stroke-linecap: round; }
.ot-dpz .tri .fm { fill: #F97316; }
.ot-dpz .tri .sl { stroke: rgba(165,243,252,.55); stroke-width: 2; stroke-linecap: round; }
.ot-dpz .tri .shp.gh { opacity: .28; }
.ot-dpz .tri .mr { stroke: #E2E8F0; stroke-width: 4; stroke-linecap: round; }
.ot-dpz .tri .fl { fill: rgba(74,222,128,.05); transition: fill .4s; }
.ot-dpz .tri .fl.on { fill: rgba(74,222,128,.14); }
.ot-dpz .tri .ed { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.ot-dpz .tri .ed.g { stroke: #4ADE80; }
.ot-dpz .tri .ed.y { stroke: #FDE68A; }
.ot-dpz .tri .ed.c { stroke: #67E8F9; }
.ot-dpz .tri .ed.n { stroke: #94A3B8; }
.ot-dpz .tri .ed.n.hl { stroke: #fff; }
.ot-dpz .tri .ed.w { stroke: #FEF9C3; }
.ot-dpz .tri .ed.hl { stroke-width: 7; animation: otDpzHl .8s ease-in-out infinite; }
@keyframes otDpzHl { 50% { opacity: .35; } }
.ot-dpz .tri .ra { fill: none; stroke: rgba(226,232,240,.6); stroke-width: 1.5; }
.ot-dpz .tri .in { stroke: rgba(253,230,138,.6); stroke-width: 2; stroke-dasharray: 3 4; }
.ot-dpz .tri .lt { fill: #FEF9C3; }
.ot-dpz .tri .lg { fill: #FDE68A; opacity: .35; }
.ot-dpz .tri .lb { font-family: "Times New Roman", serif; font-style: italic; font-size: 22px; font-weight: 700; }
.ot-dpz .tri .lb.g { fill: #4ADE80; }
.ot-dpz .tri .lb.y { fill: #FDE68A; }
.ot-dpz .tri .lb.c { fill: #67E8F9; }
.ot-dpz .tri .qb { fill: #0B1026; stroke: rgba(255,255,255,.55); stroke-width: 1.5; }
.ot-dpz .tri .qb.hl { fill: #422006; stroke: #FBBF24; stroke-width: 2.5; }
.ot-dpz .tri .qt { fill: #fff; font-size: 15px; font-weight: 900; }
.ot-dpz .tri .t3 { fill: #CBD5E1; font-size: 13.5px; font-weight: 700; }
.ot-dpz .tri .t3.y { fill: #FDE68A; font-weight: 800; }
.ot-dpz .tk { font-family: "Times New Roman", serif; font-style: italic; font-weight: 700; padding: 0 1px; }
.ot-dpz .tk.g { color: #4ADE80; }
.ot-dpz .tk.y { color: #FDE68A; }
.ot-dpz .tk.c { color: #67E8F9; }
.ot-dpz .tk.n { color: #fff; }
.ot-dpz .sqr { white-space: nowrap; }
.ot-dpz .sqr .rad { display: inline-block; margin-left: 1px; padding: 0 2px 0 1px; border-top: 2px solid currentColor; line-height: 1.25; }
.ot-dpz .eq { margin: 0 0 8px; padding: 10px 6px; border-radius: 12px; background: #0B1026; box-shadow: inset 0 0 0 1px rgba(134,239,172,.3); text-align: center; }
.ot-dpz .eq.pop { animation: otDpzPop .45s cubic-bezier(.2,1.5,.4,1); }
@keyframes otDpzPop { from { transform: scale(.94); box-shadow: inset 0 0 0 2px #4ADE80, 0 0 20px rgba(74,222,128,.5); } }
.ot-dpz .eq small { display: block; margin: 0 0 4px; font-size: 12.5px; color: #86EFAC; font-weight: 800; }
.ot-dpz .eq .ln { color: #fff; font-size: 20px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.ot-dpz .eq .ln.done { font-size: 21px; text-shadow: 0 0 14px rgba(74,222,128,.55); }
.ot-dpz .eq .ok { display: inline-block; margin-top: 4px; padding: 1px 10px; border-radius: 99px; background: rgba(74,222,128,.18); color: #4ADE80; font-size: 13px; font-weight: 900; }
.ot-dpz .slot { display: inline-block; min-width: 2em; padding: 0 2px; border-bottom: 2.5px dashed rgba(134,239,172,.5); line-height: 1.25; vertical-align: baseline; }
.ot-dpz .slot:empty::before { content: "\00a0"; }
.ot-dpz .slot.on { border-bottom: 2.5px solid #4ADE80; border-radius: 4px; background: rgba(74,222,128,.12); animation: otBlink 1s steps(2) infinite; }
.ot-wrap .ot-dpz .ask { margin: 0 0 8px; color: #fff; font-size: 15px; font-weight: 800; line-height: 1.65; }
.ot-dpz .ask > b { display: inline-block; margin: 0 6px 0 0; padding: 0 8px; border-radius: 6px; background: rgba(74,222,128,.2); color: #86EFAC; font-size: 13px; }
.ot-dpz .tls { display: grid; gap: 6px; margin: 0 0 8px; }
.ot-dpz .tls.t3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ot-dpz .tls button { position: relative; min-height: 50px; padding: 6px 10px; border: 0; border-radius: 12px; background: #12203F; box-shadow: inset 0 0 0 1.5px rgba(134,239,172,.32), 0 3px 0 #020617; color: #fff; font-size: 15px; font-weight: 800; line-height: 1.45; cursor: pointer; }
.ot-dpz .tls button:active { transform: translateY(2px); box-shadow: inset 0 0 0 1.5px rgba(134,239,172,.3); }
.ot-dpz .tls.nm button { display: flex; align-items: center; gap: 12px; text-align: left; }
.ot-dpz .tls.nm .tk { flex: none; min-width: 2.1em; font-size: 24px; text-align: center; }
.ot-dpz .tls.nm small { font-size: 14px; color: #DCFCE7; font-weight: 700; }
.ot-dpz .tls.t3 .tk { font-size: 26px; }
.ot-dpz .tls.eqs button { display: flex; align-items: center; gap: 10px; font-size: 17px; white-space: nowrap; }
.ot-dpz .tls.eqs button > span { flex: 1; text-align: center; }
.ot-dpz .tls.eqs .ab { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(74,222,128,.18); box-shadow: inset 0 0 0 1px rgba(134,239,172,.5); color: #86EFAC; font-size: 13px; font-weight: 900; font-style: normal; }
.ot-dpz .tls button:focus-visible { box-shadow: inset 0 0 0 2px #4ADE80, 0 3px 0 #020617; }
.ot-dpz .tls button.used { opacity: .4; }
.ot-dpz .tls button.used::after { content: "✓"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #4ADE80; font-size: 18px; }
.ot-dpz .tls button.wrong { background: #4C1D1D; box-shadow: inset 0 0 0 2px var(--rd); opacity: .75; }
.ot-dpz .tls button.right { background: #14532D; box-shadow: inset 0 0 0 2px var(--gr); }
.ot-dpz .tls .ot-btn { color: #052E16 !important; background: linear-gradient(180deg, #4ADE80, #16A34A); box-shadow: 0 3px 0 #14532D; font-size: 17px; font-weight: 900; min-height: 54px; }
.ot-dpz .tls .ot-seg { margin: 0; }
.ot-dpz .tls .ot-seg button { min-height: 42px; box-shadow: none; background: transparent; color: var(--tx3); font-size: 14px; }
.ot-dpz .tls .ot-seg button.on { background: rgba(74,222,128,.2); box-shadow: inset 0 0 0 1.5px #4ADE80; color: #fff; }
.ot-wrap .ot-dpz .tip { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: rgba(248,113,113,.12); color: #FCA5A5; font-size: 13.5px; line-height: 1.6; font-weight: 700; }
.ot-dpz .ask .ins { display: block; padding: 9px 12px; border-radius: 12px; background: rgba(253,230,138,.1); box-shadow: inset 0 0 0 1px rgba(253,230,138,.45); color: #FEF3C7; font-size: 15px; }
.ot-dpz .ask .ins > b { display: block; margin: 0 0 2px; padding: 0; background: none; color: #FDE68A; font-size: 13px; letter-spacing: .06em; }
.ot-dpz .ask .ins { line-height: 1.8; }
.ot-dpz .ask .ins .tk { font-size: 1.1em; line-height: 1; }
.ot-dpz .end .clk2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.ot-dpz .end .clk2 > div { padding: 10px; border-radius: 12px; background: rgba(255,255,255,.05); text-align: center; }
.ot-dpz .end .clk2 small { display: block; font-size: 12px; color: #86EFAC; font-weight: 800; }
.ot-dpz .end .clk2 b { font-size: 32px; color: #fff; }
.ot-dpz .end .clk2 > div:nth-child(2) b { color: #FDE68A; }
.ot-dpz .end .clk2 i { margin-left: 2px; font-size: 13px; color: #DCFCE7; }
.ot-dpz .end .res { margin-top: 10px; text-align: center; }
.ot-dpz .end .stamp { display: inline-block; padding: 4px 14px; border: 3px solid #4ADE80; border-radius: 10px; color: #4ADE80; font-size: 20px; font-weight: 900; letter-spacing: .1em; transform: rotate(-5deg); animation: otStamp2 .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes otStamp2 { from { transform: rotate(-5deg) scale(2); opacity: 0; } to { transform: rotate(-5deg) scale(1); opacity: 1; } }
.ot-dpz .end .st { display: block; margin: 6px 0; font-size: 26px; letter-spacing: 4px; }
.ot-wrap .ot-dpz .end p { color: #DCFCE7; font-size: 14px; }
.ot-wrap .ot-dpz .end .sub2 { margin: 0 0 8px; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.05); font-size: 15px; font-weight: 800; color: #DCFCE7; text-align: center; }
.ot-wrap .ot-dpz .end .res p { text-align: left; }
.ot-dpz .end .re { display: flex; width: 100%; }
@media (max-width: 360px) { .ot-dpz .eq .ln { font-size: 17px; } .ot-dpz .tls.eqs button { font-size: 15px; } }

/* ── MISSION 4 ・ ウラシマ作戦 */
.ot-twin { margin: 6px 0 4px; }
.ot-tabs.tw { margin: 0 0 8px; }
.ot-wrap .ot-tw-req { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: rgba(251,191,36,.08); box-shadow: inset 0 0 0 1px rgba(251,191,36,.35); color: var(--tx); font-size: 14.5px; line-height: 1.7; font-weight: 700; }
.ot-tw-req .tg { display: block; font-size: 12px; color: var(--gd); letter-spacing: .06em; }
.ot-tw-req b { color: var(--gd); }
.ot-tw-sel { margin: 0 0 8px; }
.ot-tw-sel > span { display: block; margin: 0 0 6px; font-size: 13px; color: var(--tx3); font-weight: 700; }
.ot-tw-sel .ch { display: grid; gap: 6px; }
.ot-tw-sel.d .ch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ot-tw-sel.b .ch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ot-tw-sel.b button { min-height: 46px; }
.ot-tw-sel button { min-height: 54px; padding: 6px 4px; border: 0; border-radius: 12px; background: #222D6B; box-shadow: inset 0 0 0 1.5px var(--ln); color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.3; }
.ot-tw-sel button b { font-size: 14px; }
.ot-tw-sel button small { font-size: 12px; color: var(--tx3); }
.ot-tw-sel button.on { background: rgba(34,211,238,.2); box-shadow: inset 0 0 0 2px var(--cy); }
.ot-tw-sel button.over small:last-child { color: #FCA5A5; }
.ot-fuel { margin: 2px 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); }
.ot-fuel .rw b { font-size: 18px; color: var(--gd); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ot-fuel .rw b small { margin-left: 3px; font-size: 12px; color: var(--tx3); }
.ot-fuel .bar { position: relative; display: block; height: 10px; margin: 6px 0 4px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.ot-fuel .bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #4ADE80, #FBBF24); transition: width .3s; }
.ot-fuel .bar em { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #fff; }
.ot-fuel .w { display: block; font-size: 12px; color: var(--tx3); font-weight: 700; }
.ot-fuel.over { box-shadow: inset 0 0 0 1.5px var(--rd); }
.ot-fuel.over .rw b { color: #FCA5A5; }
.ot-fuel.over .bar i { background: linear-gradient(90deg, #FB923C, #EF4444); }
.ot-fuel.over .w { color: #FCA5A5; }
.ot-tw-go { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin: 0 0 10px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #F472B6, #DB2777); box-shadow: 0 4px 0 #831843, 0 0 20px rgba(244,114,182,.35); color: #fff; font-size: 17px; font-weight: 900; cursor: pointer; }
.ot-tw-go:active { transform: translateY(3px); box-shadow: 0 1px 0 #831843; }
.ot-tw-pred { margin: 0 0 10px; padding: 12px; border-radius: 16px; background: rgba(244,114,182,.1); box-shadow: inset 0 0 0 1.5px rgba(244,114,182,.5); }
.ot-tw-pred button { font-size: 16px; }
.ot-tw-pred button.pk { background: rgba(244,114,182,.3); box-shadow: inset 0 0 0 2px var(--pk); }
.ot-wrap .ot-tw-pred .hn { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--tx2); }
.ot-tw-fig { display: block; width: 100%; height: auto; border-radius: 14px; background: #070B22; }
.ot-tw-fig .t { fill: #CBD5E1; font-size: 13.5px; font-weight: 700; }
.ot-tw-ages { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 8px 0; }
.ot-tw-ages > div { padding: 10px; border-radius: 14px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); text-align: center; }
.ot-tw-ages small { display: block; font-size: 12px; color: var(--tx3); font-weight: 700; }
.ot-tw-ages b { display: block; font-size: 30px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ot-tw-ages b i { font-size: 14px; margin-left: 2px; }
.ot-tw-ages .me b { color: var(--cyl); }
.ot-tw-ages .sib b { color: #FDBA74; }
.ot-tw-ages span { font-size: 12px; color: var(--tx2); }
.ot-tw-ages .pop { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); padding: 4px 12px; border-radius: 99px; background: var(--gd); color: #422006; font-size: 15px; font-weight: 900; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.4); animation: otPopIn .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes otPopIn { from { transform: translateX(-50%) scale(.3); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
.ot-tw-res, .ot-mures, .ot-gres { margin: 10px 0 0; padding: 12px; border-radius: 14px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); }
.ot-tw-res.ok { background: rgba(74,222,128,.12); box-shadow: inset 0 0 0 1.5px rgba(74,222,128,.55); }
.ot-tw-res.ng { background: rgba(248,113,113,.1); box-shadow: inset 0 0 0 1.5px rgba(248,113,113,.45); }
.ot-tw-res .hd { display: block; margin: 0 0 6px; font-size: 16px; }
.ot-tw-res.ok .hd { color: var(--gr); }
.ot-tw-res.ng .hd { color: #FCA5A5; }
.ot-wrap .ot-tw-res p { margin: 6px 0 0; font-size: 14px; line-height: 1.7; }
.ot-wrap .nv { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 8px 10px; border-radius: 4px 12px 12px 12px; background: rgba(10,15,44,.6); font-size: 13.5px; line-height: 1.65; color: #fff; font-weight: 700; }
.ot-wrap .nv .av { flex: none; width: 32px; height: 32px; padding: 2px; border-radius: 50%; background: #2E3A86; }
.ot-wrap .nv .av svg { display: block; width: 100%; height: 100%; }
.ot-tw-res .nq { display: flex; width: 100%; margin-top: 10px; }
.ck { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.ck li { position: relative; padding-left: 24px; font-size: 13.5px; line-height: 1.6; font-weight: 700; color: var(--tx2); }
.ck li::before { position: absolute; left: 2px; top: 0; font-weight: 900; }
.ck li.y { color: #fff; }
.ck li.y::before { content: "✓"; color: var(--gr); }
.ck li.n::before { content: "×"; color: var(--rd); }
.ck li.had.n { opacity: .6; }

/* ── MISSION 5 ・ ミューオン */
.ot-muw { margin: 0 0 8px; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--ln); }
.ot-mu { display: block; width: 100%; height: auto; }
.ot-mu .sc text { fill: #A5B4CF; font-size: 13.5px; font-weight: 700; }
.ot-mu .cr text { fill: #F9A8D4; font-size: 13.5px; font-weight: 800; }
.ot-mu .det text { fill: #BBF7D0; font-size: 13.5px; font-weight: 800; }
.ot-mu .det .cn { fill: #fff; font-size: 16px; font-weight: 900; transform-box: fill-box; transform-origin: center; }
.ot-mu circle.hm { fill: #4ADE80; opacity: .85; }
.ot-mu circle.m { fill: #F472B6; stroke: #FBCFE8; stroke-opacity: .45; stroke-width: 4; }
.ot-mu circle.bst { fill: none; stroke: #FDE68A; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: otBst .45s ease-out forwards; }
@keyframes otBst { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.ot-mu.hitd .det rect { animation: otDet .35s ease; }
.ot-mu.hitd .det .cn { animation: otCn .35s ease; }
@keyframes otDet { 30% { fill: #166534; stroke-width: 3; } }
@keyframes otCn { 40% { transform: scale(1.4); fill: #4ADE80; } }
.ot-ctl .ds { margin-top: 8px; }
.ot-ctl .dv { font-size: 17px; color: #fff; white-space: nowrap; }
.ot-ctl .dbar { position: relative; display: block; height: 10px; margin: 6px 0 22px; border-radius: 99px; background: rgba(255,255,255,.1); }
.ot-ctl .dbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #F472B6, #A78BFA); transition: width .2s; }
.ot-ctl .dbar.ok i { background: linear-gradient(90deg, #22D3EE, #4ADE80); }
.ot-ctl .dbar em { position: absolute; top: -4px; width: 2px; height: 18px; margin-left: -1px; background: #fff; }
.ot-ctl .dbar em span { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; line-height: 1; color: var(--tx2); font-weight: 700; font-style: normal; }
.ot-pred { margin: 10px 0; padding: 12px; border-radius: 16px; background: rgba(244,114,182,.1); box-shadow: inset 0 0 0 1.5px rgba(244,114,182,.45); }
.ot-pred .pv { font-size: 20px; color: var(--pk); font-variant-numeric: tabular-nums; }
.ot-pred input[type=range] { margin-top: 6px; }
.ot-wrap .ot-pred input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(90deg, #F472B6 var(--p), rgba(255,255,255,.12) var(--p)); }
.ot-wrap .ot-pred input[type=range]::-webkit-slider-thumb { border-color: #F472B6; box-shadow: 0 0 0 4px rgba(244,114,182,.3), 0 2px 6px rgba(0,0,0,.4); }
.ot-muon > .go, .ot-gstep.s1 > .go { display: flex; width: 100%; min-height: 54px; font-size: 17px; }
.ot-mures .nb { display: flex; align-items: baseline; justify-content: center; gap: 6px; width: auto; height: auto; background: none; border-radius: 0; }
.ot-mures .nb b { font-size: 44px; line-height: 1; color: var(--pk); font-variant-numeric: tabular-nums; text-shadow: 0 0 16px rgba(244,114,182,.5); }
.ot-mures .nb small { font-size: 14px; color: var(--tx2); font-weight: 800; }
.ot-mures .cmp { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; margin: 4px 0 8px; font-size: 13px; color: var(--tx3); font-weight: 700; }
.ot-mures .cmp b { color: var(--rd); }
.ot-mures .ck { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: rgba(10,15,44,.5); }
.ot-wrap .ot-mures p { margin: 0; font-size: 14px; line-height: 1.7; }
.ot-wrap .ot-mures .hint2 { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(34,211,238,.08); font-size: 13px; color: var(--cyl); }
.ot-bars { display: block; width: 100%; max-width: 420px; height: auto; margin: 12px auto 8px; }
.ot-bars .t3 { fill: #CBD5E1; font-size: 13px; font-weight: 700; }

/* ── MISSION 6 ・ GPS */
.ot-gps2 { margin: 6px 0 4px; }
.ot-gstep { margin: 0 0 8px; padding: 12px; border-radius: 16px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); }
.ot-wrap .ot-gstep .qq { display: flex; gap: 8px; margin: 0 0 10px; font-size: 14.5px; line-height: 1.75; color: #fff; font-weight: 700; }
.ot-gstep .qq > span:last-child { flex: 1; min-width: 0; }
.ot-gstep .qq small { display: block; font-size: 13px; color: var(--tx2); font-weight: 700; }
.nb { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--cy); color: #0B1026; font-size: 14px; font-weight: 900; font-style: normal; line-height: 1; }
.ot-gstep .gb3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ot-gstep .gb3 button { white-space: nowrap; font-size: 15px !important; }
.ot-gstep .gb3 button, .ot-gq .gb button { min-height: 50px; padding: 6px 4px; border: 0; border-radius: 12px; background: #222D6B; box-shadow: inset 0 0 0 1.5px var(--ln), 0 3px 0 #0B1026; color: #fff; font-size: 16px; font-weight: 900; cursor: pointer; }
.ot-gstep .gb3 button.right { background: #14532D; box-shadow: inset 0 0 0 2px var(--gr); }
.ot-gstep .gb3 button.wrong { background: #4C1D1D; box-shadow: inset 0 0 0 2px var(--rd); }
.ot-gstep .gb3 button:disabled:not(.right):not(.wrong) { opacity: .5; }
.ot-gq { margin: 0 0 8px; padding: 10px; border-radius: 12px; background: rgba(10,15,44,.45); }
.ot-wrap .ot-gq .gt { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: var(--tx); font-weight: 700; }
.ot-gq .gt b { display: block; color: var(--cyl); }
.ot-gq .gb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.ot-gq .gb button.on { background: rgba(34,211,238,.22); box-shadow: inset 0 0 0 2px var(--cy); }
.ot-wrap .ot-gq .hn { margin: 8px 0 0; font-size: 13px; color: var(--gd); font-weight: 700; line-height: 1.6; }
.ot-gmapw { position: relative; margin: 0 0 8px; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--ln); }
.ot-gmap { display: block; width: 100%; height: auto; }
.ot-gmap .mt { fill: #E2E8F0; font-size: 13.5px; font-weight: 800; paint-order: stroke; stroke: #13203F; stroke-width: 3px; }
.ot-gmap .pl { fill: #FCA5A5; font-size: 13.5px; font-weight: 900; paint-order: stroke; stroke: #13203F; stroke-width: 3px; }
.ot-gmap .rv { fill: #93C5FD; font-size: 13.5px; font-weight: 800; }
.ot-gmap .bub text { fill: #B91C1C; font-size: 13.5px; font-weight: 900; }
.ot-gmapw .clk { position: absolute; left: 8px; top: 8px; padding: 3px 9px; border-radius: 8px; background: rgba(10,15,44,.85); color: #fff; font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; }
.ot-wrap .ot-gfix { margin: 0 0 8px; padding: 9px 12px; border-radius: 12px; background: rgba(34,211,238,.08); font-size: 14px; font-weight: 700; color: var(--tx); line-height: 1.7; }
.ot-gres.ok { background: rgba(74,222,128,.12); box-shadow: inset 0 0 0 1px rgba(74,222,128,.5); }
.ot-gres.ng { background: rgba(248,113,113,.12); box-shadow: inset 0 0 0 1px rgba(248,113,113,.5); }
.ot-gres b { display: block; margin: 0 0 4px; font-size: 16px; }
.ot-gres.ok b { color: var(--gr); }
.ot-gres.ng b { color: #FCA5A5; }
.ot-wrap .ot-gres p { margin: 0; font-size: 14px; }
.ot-gps { margin: 6px 0 4px; padding: 0; list-style: none; display: grid; gap: 6px; }
.ot-gps li { padding: 9px 12px; border-radius: 12px; background: var(--pn2); }
.ot-gps li b { display: block; font-size: 14.5px; }
.ot-gps li b.m { color: #93C5FD; }
.ot-gps li b.p { color: #FCA5A5; }
.ot-gps li b.t { color: var(--gr); }
.ot-gps li span { font-size: 13px; color: var(--tx2); line-height: 1.7; }

/* ── MISSION 7 ・ 目利き ・ 今日の 目利き */
.ot-meki, .ot-daily { margin: 6px 0 12px; padding: 14px 12px; border-radius: 18px; background: linear-gradient(160deg, rgba(167,139,250,.14), rgba(34,211,238,.08)); box-shadow: inset 0 0 0 1px rgba(167,139,250,.45); }
.ot-meki .hd, .ot-daily .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 900; color: var(--tx3); }
.ot-meki .hd .sc b { color: var(--gd); font-size: 17px; }
.ot-wrap .ot-meki .qq, .ot-wrap .ot-daily .qq { margin: 8px 0 10px; color: #fff; font-size: 15.5px; font-weight: 800; line-height: 1.75; }
.ot-meki .gs, .ot-daily .gs { text-align: center; margin: 0 0 4px; }
.ot-meki .gs .v, .ot-daily .gs .v { display: block; font-size: 32px; line-height: 1.15; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 16px rgba(167,139,250,.6); }
.ot-meki .gs .c, .ot-daily .gs .c { display: block; min-height: 1.6em; font-size: 13px; color: var(--tx2); font-weight: 700; }
.ot-meki .rg, .ot-daily .rg { margin: 6px 0 2px; }
.ot-wrap .ot-meki input[type=range]::-webkit-slider-thumb, .ot-wrap .ot-daily input[type=range]::-webkit-slider-thumb { border-color: #A78BFA; box-shadow: 0 0 0 4px rgba(167,139,250,.3), 0 2px 6px rgba(0,0,0,.4); }
.ot-meki .ax, .ot-daily .ax { display: flex; justify-content: space-between; font-size: 12px; color: var(--tx3); font-weight: 700; }
.ot-meki .go, .ot-daily .go { display: flex; width: 100%; margin-top: 12px; min-height: 52px; font-size: 16px; background: linear-gradient(180deg, #A78BFA, #7C3AED); box-shadow: 0 3px 0 #4C1D95; }
.ot-meki .rv, .ot-daily .rv { margin-top: 12px; }
.ot-meki .gauge, .ot-daily .gauge { position: relative; height: 62px; margin: 0 16px 6px; }
.ot-meki .gauge::before, .ot-daily .gauge::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.14); }
.ot-meki .gauge i, .ot-daily .gauge i { position: absolute; border-radius: 50%; }
.ot-meki .gauge i span, .ot-daily .gauge i span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 900; }
.ot-meki .gauge .ans, .ot-daily .gauge .ans { top: 18px; width: 30px; height: 30px; margin-left: -15px; border: 4px solid var(--gd); box-sizing: border-box; box-shadow: 0 0 10px rgba(251,191,36,.7); animation: otPop .5s ease; }
.ot-meki .gauge .ans span, .ot-daily .gauge .ans span { top: 30px; color: var(--gd); }
.ot-meki .gauge .you, .ot-daily .gauge .you { top: 25px; width: 16px; height: 16px; margin-left: -8px; background: var(--pk); box-shadow: 0 0 10px rgba(244,114,182,.7); }
.ot-meki .gauge .you span, .ot-daily .gauge .you span { top: -22px; color: var(--pk); }
.ot-wrap .ot-meki .res, .ot-wrap .ot-daily .res { margin: 10px 0 6px; font-size: 14px; line-height: 1.7; }
.ot-meki .res b, .ot-daily .res b { display: block; font-size: 18px; color: var(--gd); }
.ot-wrap .ot-meki .x, .ot-wrap .ot-daily .x { font-size: 14px; line-height: 1.75; }
.ot-meki .nx { display: flex; width: 100%; }
.ot-meki .fin, .ot-mythg .fin { text-align: center; }
.ot-meki .fin > b, .ot-mythg .fin > b { display: block; font-size: 42px; color: var(--gd); line-height: 1.1; }
.ot-meki .fin > b small, .ot-mythg .fin > b small { font-size: 16px; color: var(--tx2); }
.ot-meki .fin .st, .ot-mythg .fin .st { display: block; margin: 4px 0; font-size: 28px; letter-spacing: 4px; }
.ot-meki .fin .bs, .ot-mythg .fin .bs { display: block; margin: 0 0 8px; font-size: 13px; color: var(--pk); font-weight: 800; }
.ot-daily { background: linear-gradient(160deg, rgba(251,191,36,.12), rgba(244,114,182,.08)); box-shadow: inset 0 0 0 1px rgba(251,191,36,.45); scroll-margin-top: 70px; }
.ot-daily .hd { align-items: center; }
.ot-daily .hd > * { flex: none; white-space: nowrap; }
.ot-daily .hd .cal { flex: none; width: 30px; height: 30px; }
.ot-daily .hd .cal svg { display: block; width: 100%; height: 100%; }
.ot-daily .hd .sk { display: inline-flex; align-items: center; gap: 3px; padding: 2px 10px 2px 6px; border-radius: 99px; background: rgba(249,115,22,.16); }
.ot-daily .hd .sk svg { width: 14px; height: 17px; }
.ot-daily .hd b { color: var(--gd); font-size: 15px; }
.ot-daily .hd .dt { margin-right: auto; color: var(--tx2); }
.ot-daily .hd .sk b { font-size: 18px; color: #fff; }
.ot-wrap .ot-daily .dn { margin: 0 0 8px; font-size: 14px; line-height: 1.7; }
.ot-daily .dn b { display: block; color: var(--gd); font-size: 16px; }
.ot-wrap .ot-daily .tm { margin: 10px 0 0; font-size: 12.5px; color: var(--tx3); line-height: 1.6; }
.ot-emc { margin: 0 0 10px; }
.ot-emc .calc { margin: 0 0 8px; padding: 12px; border-radius: 16px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); }
.ot-wrap .ot-emc .calc .hd { margin: 0 0 8px; font-size: 13.5px; font-weight: 900; color: var(--cyl); }
.ot-emc .ch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ot-emc .ch button { min-height: 56px; padding: 6px 2px; border: 0; border-radius: 12px; background: #222D6B; box-shadow: inset 0 0 0 1.5px var(--ln); color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ot-emc .ch button b { font-size: 16px; }
.ot-emc .ch button small { font-size: 12px; color: var(--tx2); line-height: 1.3; white-space: nowrap; }
.ot-emc .ch button.on { background: rgba(34,211,238,.2); box-shadow: inset 0 0 0 2px var(--cy); }
.ot-emc .out { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 10px 0 0; }
.ot-emc .out div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 12px; background: #0B1026; }
.ot-emc .out small { display: block; font-size: 12px; color: var(--tx3); font-weight: 700; }
.ot-emc .out b { display: block; font-size: 18px; color: var(--gd); white-space: nowrap; }
.ot-emc .out b i { margin-left: 2px; font-size: 12px; color: var(--tx2); }

/* ── MISSION 8 ・ ○× カード */
.ot-mythg { margin: 6px 0 12px; }
.ot-mythg .hd { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 900; color: var(--tx3); margin: 0 0 6px; }
.ot-mythg .hd .mul { margin-right: auto; color: var(--pk); font-size: 15px; }
.ot-mythg .hd .sc b { color: var(--gd); font-size: 17px; }
.ot-mythg .tm { height: 8px; margin: 0 0 10px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.ot-mythg .tm i { display: block; width: 100%; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #22D3EE, #4ADE80); }
.ot-mythg .tm i.lo { background: linear-gradient(90deg, #F87171, #FB923C); }
.ot-mythg .deck { position: relative; min-height: 196px; }
.ot-mythg .card { position: relative; display: grid; place-items: center; min-height: 196px; padding: 50px 16px 22px; border-radius: 20px; background: linear-gradient(160deg, #2A3784, #1A2257); box-shadow: inset 0 0 0 1.5px rgba(165,243,252,.35), 0 10px 24px rgba(0,0,0,.4); text-align: center; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; transition: transform .25s ease, box-shadow .25s; --l: 0; --r: 0; }
.ot-mythg .card.drag { transition: none; cursor: grabbing; }
.ot-mythg .card.in { animation: otCardIn .35s ease; }
@keyframes otCardIn { from { transform: translateY(14px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.ot-mythg .card .ic { position: absolute; left: 12px; top: 10px; width: 36px; height: 36px; padding: 4px; border-radius: 10px; background: rgba(103,232,249,.14); }
.ot-mythg .card .ic svg { display: block; width: 100%; height: 100%; fill: none; stroke: #A5F3FC; stroke-width: 2.2; }
.ot-mythg .card .cn { position: absolute; right: 14px; top: 16px; font-size: 13px; font-weight: 900; color: var(--tx3); }
.ot-wrap .ot-mythg .card .s { margin: 0; color: #fff; font-size: 18px; font-weight: 800; line-height: 1.7; }
.ot-mythg .card .hint { position: absolute; top: 15px; padding: 3px 10px; border-radius: 8px; font-size: 13px; font-weight: 900; pointer-events: none; color: #fff; }
.ot-mythg .card .hint.L { left: 56px; background: #DC2626; opacity: var(--l); }
.ot-mythg .card .hint.R { right: 56px; background: #16A34A; opacity: var(--r); }
.ot-mythg .card.out { transition: transform .45s cubic-bezier(.4,0,.6,1), box-shadow .2s; pointer-events: none; }
.ot-mythg .card.out.R { transform: translateX(14px) rotate(3deg); }
.ot-mythg .card.out.L { transform: translateX(-14px) rotate(-3deg); }
.ot-mythg .card .jd { position: absolute; right: 14px; bottom: 12px; padding: 4px 12px; border: 3px solid; border-radius: 10px; font-size: 16px; font-weight: 900; transform: rotate(-8deg); animation: otStamp2 .45s cubic-bezier(.2,1.6,.4,1); }
.ot-mythg .card .jd.ok { color: var(--gr); border-color: var(--gr); }
.ot-mythg .card .jd.ng { color: #FCA5A5; border-color: #F87171; }
.ot-mythg .card.good { box-shadow: inset 0 0 0 3px var(--gr), 0 0 26px rgba(74,222,128,.4); }
.ot-mythg .card.bad { box-shadow: inset 0 0 0 3px var(--rd), 0 0 24px rgba(248,113,113,.35); }
.ot-mythg .card.st { cursor: default; gap: 10px; padding: 18px 16px; background: linear-gradient(160deg, #3B2A84, #1A2257); }
.ot-mythg .card.st .big { font-size: 22px; color: var(--gd); }
.ot-wrap .ot-mythg .card.st .s { font-size: 15px; font-weight: 700; color: var(--tx2); }
.ot-mythg .card.st .go { min-width: 200px; }
.ot-mythg .card.st .bs { font-size: 12.5px; color: var(--pk); font-weight: 800; }
.ot-mythg .bt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 12px 0 0; }
.ot-mythg .bt button { min-height: 68px; border: 0; border-radius: 18px; color: #fff; font-size: 38px; font-weight: 900; line-height: 1; cursor: pointer; }
.ot-mythg .bt .o { background: linear-gradient(180deg, #22C55E, #15803D); box-shadow: 0 4px 0 #14532D; }
.ot-mythg .bt .x { background: linear-gradient(180deg, #F87171, #DC2626); box-shadow: 0 4px 0 #7F1D1D; }
.ot-mythg .bt button:active { transform: translateY(3px); box-shadow: none; }
.ot-wrap .ot-mythg .sw { margin: 6px 0 0; text-align: center; font-size: 12.5px; color: var(--tx3); }
.ot-mythg .rv { margin-top: 10px; padding: 12px; border-radius: 14px; background: var(--pn2); }
.ot-mythg .rv > b { display: block; margin: 0 0 4px; font-size: 15.5px; }
.ot-mythg .rv > b.ok { color: var(--gr); }
.ot-mythg .rv > b.ng { color: #FCA5A5; }
.ot-wrap .ot-mythg .rv p { margin: 0 0 10px; font-size: 14px; }
.ot-mythg .rv .nx, .ot-mythg .rv .re { display: flex; width: 100%; }
.ot-myth { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.otjs .ot-myth.wait { display: none; }
.ot-myth li { padding: 10px 12px; border-radius: 14px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); }
.ot-myth li > b { display: block; margin: 0 0 4px; font-size: 15px; line-height: 1.6; }
.ot-myth li > b.x { color: #FCA5A5; }
.ot-myth li > b.ok { color: var(--gr); }
.ot-myth li > span { display: block; font-size: 14px; line-height: 1.8; color: var(--tx2); }
.ot-myth li > span .o { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 6px; background: rgba(34,211,238,.18); color: var(--cyl); font-size: 12px; font-weight: 900; }

/* ── FINAL ・ ボス戦 */
.ot-bosscard { background: radial-gradient(circle at 50% 0%, rgba(244,114,182,.18), transparent 60%), var(--pn); box-shadow: inset 0 0 0 1.5px rgba(251,191,36,.5); }
.ot-boss { margin: 4px 0 8px; scroll-margin-top: 70px; }
.ot-boss .bx { position: relative; padding: 14px 12px; border-radius: 18px; background: linear-gradient(170deg, #3B0D2E, #170C3A 60%, #0E0B2E); box-shadow: inset 0 0 0 2px #FBBF24, inset 0 0 0 5px rgba(190,24,93,.6), 0 0 30px rgba(244,114,182,.25); }
.ot-boss .bx.hurt { animation: otHurt .5s ease; }
@keyframes otHurt { 30% { box-shadow: inset 0 0 0 2px #F87171, inset 0 0 0 5px rgba(248,113,113,.8), 0 0 40px rgba(248,113,113,.6); } }
.ot-boss .ttl { text-align: center; margin: 0 0 10px; }
.ot-boss .ttl small { display: block; color: var(--pk); font-size: 13px; font-weight: 900; letter-spacing: .3em; }
.ot-boss .ttl b { display: block; font-size: 24px; color: var(--gd); text-shadow: 0 0 18px rgba(251,191,36,.6); }
.ot-boss .ru { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 6px; }
.ot-boss .ru li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.06); font-size: 14px; color: var(--tx); font-weight: 700; line-height: 1.5; }
.ot-boss .ru li b { flex: none; min-width: 64px; text-align: center; color: var(--gd); font-size: 16px; }
.ot-boss .ru li b.hrt { color: #F87171; letter-spacing: 1px; }
.ot-wrap .ot-boss .sm { text-align: center; color: var(--tx2); font-size: 13.5px; }
.ot-boss .bx.st .go, .ot-boss .bx.st .cert, .ot-boss .bts .ot-btn { display: flex; width: 100%; min-height: 54px; font-size: 17px; margin-top: 8px; }
.ot-boss .bx .bs { display: block; margin-top: 8px; text-align: center; font-size: 12.5px; color: var(--pk); font-weight: 800; }
.ot-boss .bh { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; font-weight: 900; color: var(--tx); }
.ot-boss .bh .hp { font-size: 22px; letter-spacing: 1px; }
.ot-boss .bh .hp i { color: rgba(255,255,255,.18); }
.ot-boss .bh .hp i.on { color: #F87171; text-shadow: 0 0 8px rgba(248,113,113,.7); }
.ot-boss .bh .qn { margin: 0 auto; color: var(--gd); }
.ot-boss .bh .tt { min-width: 3em; text-align: right; font-variant-numeric: tabular-nums; color: var(--tx2); }
.ot-boss .tg { height: 8px; margin: 0 0 12px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.ot-boss .tg i { display: block; width: 100%; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #FBBF24, #F472B6); }
.ot-boss .tg i.lo { background: linear-gradient(90deg, #F87171, #DC2626); }
.ot-wrap .ot-boss .qt { margin: 0 0 12px; color: #fff; font-size: 16px; font-weight: 800; line-height: 1.75; }
.ot-boss .cs { display: grid; gap: 8px; }
.ot-boss .ot-c { background: #2A1450; box-shadow: inset 0 0 0 1.5px rgba(251,191,36,.35), 0 3px 0 #0B0620; }
.ot-boss .ot-c.right { background: #14532D; box-shadow: inset 0 0 0 2px var(--gr); }
.ot-boss .ot-c.wrong { background: #4C1D1D; box-shadow: inset 0 0 0 2px var(--rd); }
.ot-boss .ex { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.06); }
.ot-boss .ex > b { display: block; margin: 0 0 4px; font-size: 16px; }
.ot-boss .ex > b.ok { color: var(--gr); }
.ot-boss .ex > b.ng { color: #FCA5A5; }
.ot-wrap .ot-boss .ex p { margin: 0 0 10px; font-size: 14px; }
.ot-boss .ex .nx { display: flex; width: 100%; }
.ot-boss .bx.end { text-align: center; }
.ot-boss .bx.end .st { display: block; font-size: 30px; letter-spacing: 4px; }
.ot-wrap .ot-boss .bx.end .sc { font-size: 15px; color: #fff; font-weight: 800; }
.ot-boss .bx.end.ng .ttl b { color: #FCA5A5; text-shadow: none; }
.ot-boss .rvs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 8px 0 0 !important; }
.ot-boss .rvs b { flex-basis: 100%; font-size: 13px; color: var(--tx2); }
.ot-boss .rvs a { padding: 5px 10px; border-radius: 99px; background: rgba(34,211,238,.16); box-shadow: inset 0 0 0 1px rgba(103,232,249,.5); font-size: 13px; font-weight: 800; text-decoration: none; }
.ot-boss .tier { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; margin: 2px 0 6px !important; font-size: 13px !important; }
.ot-boss .tier b { padding: 2px 12px; border-radius: 99px; font-size: 14px; }
.ot-boss .tier.gold b { background: linear-gradient(90deg, #FDE68A, #F59E0B); color: #422006; }
.ot-boss .tier.silver b { background: linear-gradient(90deg, #F1F5F9, #94A3B8); color: #0F172A; }
.ot-boss .tier.bronze b { background: linear-gradient(90deg, #FDBA74, #B45309); color: #fff; }
.ot-boss .bx.end .nv { text-align: left; }
.ot-qlist { margin: 12px 0 0; border-radius: 14px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); }
.ot-qlist summary { padding: 12px 14px; font-size: 14px; font-weight: 800; color: var(--cyl); cursor: pointer; line-height: 1.6; }
.ot-fq { margin: 0; padding: 0 14px 12px 34px; display: grid; gap: 10px; }
.ot-fq li { color: var(--tx2); font-size: 14px; }
.ot-wrap .ot-fq .q { margin: 0 0 2px; color: #fff; font-size: 14.5px; font-weight: 700; line-height: 1.7; }
.ot-wrap .ot-fq .ch { margin: 0 0 2px; font-size: 13px; color: var(--tx3); }
.ot-wrap .ot-fq .a { margin: 0; font-size: 14px; line-height: 1.7; }
.ot-fq .a b { display: block; color: var(--gr); }

/* ── EXTRA ・ 速さの 足し算 */
.ot-excard { box-shadow: inset 0 0 0 1.5px rgba(244,114,182,.45); background: radial-gradient(circle at 100% 0%, rgba(244,114,182,.14), transparent 55%), var(--pn); }
.ot-vadd { margin: 8px 0 12px; padding: 12px; border-radius: 16px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); }
.ot-vadd .lock { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ot-vadd .lock svg { width: 40px; height: 40px; fill: rgba(244,114,182,.25); stroke: #F9A8D4; stroke-width: 2.4; }
.ot-wrap .ot-vadd .lock p { margin: 0; font-size: 14px; line-height: 1.7; }
.ot-vadd .vr { margin: 0 0 10px; }
.ot-vadd .vr b { font-size: 17px; color: #fff; font-variant-numeric: tabular-nums; }
.ot-vadd .out { position: relative; display: grid; gap: 8px; margin: 4px 0 12px; padding: 10px; border-radius: 12px; background: #0B1026; }
.ot-vadd .out > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 8px; }
.ot-vadd .out small { font-size: 12.5px; color: var(--tx3); font-weight: 700; }
.ot-vadd .out b { font-size: 16px; color: #fff; text-align: right; white-space: nowrap; }
.ot-vadd .out .bar { grid-column: 1 / -1; position: relative; height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); }
.ot-vadd .out .bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #22D3EE, #4ADE80); }
.ot-vadd .out .cs1 .bar i { background: linear-gradient(90deg, #94A3B8, #CBD5E1); }
.ot-vadd .out .cs1.over b { color: #FCA5A5; text-decoration: line-through; }
.ot-vadd .out .cs1.over .bar i { background: linear-gradient(90deg, #94A3B8, #F87171); }
.ot-vadd .out .bar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--gd); }
.ot-vadd .out .bar { overflow: visible; }
.ot-vadd .out .bar i { position: relative; z-index: 0; }
.ot-wrap .ot-vadd .lg { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--tx3); font-weight: 700; line-height: 1.4; }
.ot-vadd .lg i { width: 2px; height: 14px; background: var(--gd); }
.ot-vadd .scn { display: block; width: 100%; height: auto; margin: 0 0 10px; border-radius: 12px; }
.ot-vadd .scn .t { fill: #CBD5E1; font-size: 13.5px; font-weight: 700; }
.ot-vadd .scn .t.g { fill: #FDE68A; font-weight: 900; }
.ot-vadd .scn .t.r { fill: #FCA5A5; font-size: 13.5px; }
.ot-vadd .scn .t.p { fill: #F9A8D4; }
.ot-vadd .scn .t.c { fill: #A5F3FC; }
.ot-vadd .chl { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ot-vadd .chl li { position: relative; padding: 8px 10px 8px 32px; border-radius: 10px; background: rgba(255,255,255,.05); font-size: 13.5px; font-weight: 700; line-height: 1.6; color: var(--tx2); }
.ot-vadd .chl li::before { content: "☆"; position: absolute; left: 10px; top: 8px; color: rgba(255,255,255,.3); }
.ot-vadd .chl li.on { color: #fff; box-shadow: inset 0 0 0 1px rgba(74,222,128,.5); }
.ot-vadd .chl li.on::before { content: "★"; color: var(--gd); }
.ot-vadd .q3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 6px; }
.ot-vadd .q3 button { min-height: 44px; padding: 4px; border: 0; border-radius: 10px; background: #222D6B; box-shadow: inset 0 0 0 1px var(--ln); color: #fff; font-size: 15px; font-weight: 800; line-height: 1.3; cursor: pointer; }
.ot-vadd .q3 button.right { background: #14532D; box-shadow: inset 0 0 0 2px var(--gr); }
.ot-vadd .q3 button.wrong { background: #4C1D1D; box-shadow: inset 0 0 0 2px var(--rd); }

/* ── このページについて ・ 下の ボタン */
.ot-about h2 { font-size: 17px; }
.ot-wrap .ot-about p { font-size: 13.5px; }
.ot-nextbt { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 4px 0 12px; }

/* ── 下の 帯 (ランク ・ ★ ・ マップ) と トースト */
.ot-hud { position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 10px; width: min(560px, calc(100% - 20px)); padding: 7px 8px; border-radius: 18px; background: #0D1338; box-shadow: inset 0 0 0 1px rgba(251,191,36,.45), 0 -6px 18px rgba(10,15,44,.6), 0 8px 24px rgba(0,0,0,.5); color: #fff; transform: translate(-50%, 140%); transition: transform .3s ease; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif; }
.ot-hud.on { transform: translate(-50%, 0); }
.ot-hud .bd { flex: none; width: 38px; height: 38px; }
.ot-hud .rn { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ot-hud .rn small { font-size: 12px; color: #9AA6C8; font-weight: 700; }
.ot-hud .rn b { font-size: 14px; color: #FBBF24; white-space: nowrap; }
.ot-hud .sc { flex: none; font-size: 15px; font-weight: 900; color: #FBBF24; }
.ot-hud .sc b { color: #fff; font-size: 17px; margin-left: 2px; }
.ot-hud .sc small { color: #9AA6C8; font-size: 12px; }
.ot-hud .sc.pop { animation: otPop .45s ease; }
.ot-hud .br { flex: 1; min-width: 24px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; }
.ot-hud .br i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #FBBF24, #F472B6); transition: width .5s; }
.ot-hud .msg { display: none; flex: 1; min-width: 0; align-items: center; gap: 6px; color: #FDE68A; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; }
.ot-hud .msg b { flex: none; padding: 1px 8px; border-radius: 99px; background: #FBBF24; color: #422006; font-size: 14px; }
.ot-hud .msg span { overflow: hidden; text-overflow: ellipsis; }
.ot-hud.say .msg { display: flex; animation: otMsg .3s ease; }
.ot-hud.say .rn, .ot-hud.say .br, .ot-hud.say .bd { display: none; }
@keyframes otMsg { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.ot-hud .mp { flex: none; display: grid; place-items: center; min-height: 40px; padding: 0 12px; border-radius: 12px; background: rgba(34,211,238,.2); box-shadow: inset 0 0 0 1px rgba(103,232,249,.5); color: #A5F3FC; font-size: 13px; font-weight: 900; text-decoration: none; }
@keyframes otPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.ot-toast { position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top)); z-index: 61; display: flex; align-items: center; gap: 8px; max-width: min(540px, calc(100% - 28px)); padding: 5px 14px; border-radius: 99px; background: #FBBF24; color: #422006; font-size: 13px; font-weight: 800; line-height: 1.4; box-shadow: 0 6px 18px rgba(0,0,0,.4); transform: translate(-50%, -12px); opacity: 0; pointer-events: none; transition: transform .3s ease, opacity .3s; white-space: nowrap; font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif; }
.ot-toast span { overflow: hidden; text-overflow: ellipsis; }
.ot-toast b { flex: none; font-size: 15px; font-weight: 900; }
.ot-toast.on { transform: translate(-50%, 0); opacity: 1; }
.ot-fly { position: fixed; z-index: 62; width: 24px; height: 24px; color: #FBBF24; font-size: 24px; line-height: 24px; text-align: center; pointer-events: none; text-shadow: 0 0 10px rgba(251,191,36,.9); }

/* ── 重ねる 画面 (ランクアップ ・ 修了証) */
.ot-ov { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(5,8,28,.84); opacity: 0; transition: opacity .25s; overflow-y: auto; }
.ot-ov.on { opacity: 1; }
.ot-ov .in { position: relative; width: min(360px, 100%); padding: 22px 18px 18px; border-radius: 24px; background: linear-gradient(160deg, #1B2563, #121A42); box-shadow: inset 0 0 0 1.5px rgba(251,191,36,.5), 0 20px 60px rgba(0,0,0,.6); text-align: center; color: #fff; transform: scale(.9); transition: transform .3s cubic-bezier(.3,1.4,.5,1); font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif; word-break: keep-all; overflow-wrap: anywhere; }
.ot-ov.on .in { transform: none; }
.ot-rkup .in { overflow: hidden; }
.ot-rkup small { display: block; color: #FBBF24; font-size: 14px; font-weight: 900; letter-spacing: .2em; }
.ot-rkup .bd { position: relative; width: 96px; height: 96px; margin: 18px auto 10px; }
.ot-rkup .bd .ot-badge { position: relative; z-index: 1; animation: otSpin .9s cubic-bezier(.3,1.4,.5,1); }
.ot-rkup .bd .ring { position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; background: radial-gradient(circle, rgba(251,191,36,.55) 0%, rgba(251,191,36,.14) 40%, transparent 68%), repeating-conic-gradient(from 0deg, rgba(253,230,138,.4) 0deg 6deg, transparent 6deg 24deg); -webkit-mask: radial-gradient(circle, #000 50%, transparent 70%); mask: radial-gradient(circle, #000 50%, transparent 70%); animation: otRot 8s linear infinite; }
@keyframes otRot { to { transform: rotate(360deg); } }
@keyframes otSpin { from { transform: rotateY(180deg) scale(.4); } to { transform: none; } }
.ot-rkup .in > b { display: block; font-size: 26px; color: #FBBF24; text-shadow: 0 0 16px rgba(251,191,36,.6); }
.ot-rkup .shp { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 0; }
.ot-rkup .shp svg { width: 64px; height: 33px; }
.ot-rkup .shp small { color: #A5F3FC; font-size: 12px; letter-spacing: 0; }
.ot-rkup p { margin: 8px 0 4px; color: #C3CBE0; font-size: 14.5px; line-height: 1.7; }
.ot-rkup .nx { margin: 0 0 14px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.06); color: #FDE68A; font-size: 13px; font-weight: 800; }
.ot-rkup .ot-btn { min-width: 160px; }
.ot-rkup .cf { position: absolute; left: 50%; top: 30%; width: 0; height: 0; z-index: 2; }
.ot-rkup .cf i { position: absolute; width: 8px; height: 12px; border-radius: 2px; opacity: 0; animation: otCf 1.3s ease-out var(--d) forwards; }
@keyframes otCf { 0% { transform: translate(0, 0) rotate(0) scale(.4); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); opacity: 0; } }
.ot-cert .in { background: #12183F; width: min(380px, 100%); }
.ot-cert .pp { position: relative; padding: 18px 14px 14px; border-radius: 16px; background: #FFFBEB; box-shadow: inset 0 0 0 7px #FFFBEB, inset 0 0 0 8.5px #B45309; color: #422006; }
.ot-cert .pp::before { content: ""; position: absolute; inset: 0; border-radius: 16px; padding: 4px; background: linear-gradient(135deg, #F472B6, #F59E0B, #22D3EE); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.ot-cert .t1 { display: block; font-size: 12px; letter-spacing: .3em; color: #92400E; font-weight: 800; }
.ot-cert .t2 { display: block; font-size: 30px; letter-spacing: .3em; color: #422006; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
.ot-cert .t3 { margin: 2px 0 8px; font-size: 13px; color: #78350F; font-weight: 700; }
.ot-cert .nm { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin: 0 16px 6px; padding: 0 0 4px; border-bottom: 1.5px solid #D97706; }
.ot-cert .nmv { font-size: 22px; font-weight: 800; color: #1C1917; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
.ot-cert .nm small { font-size: 14px; color: #78350F; }
.ot-cert .t4 { margin: 0 0 4px; font-size: 13.5px; color: #422006; font-weight: 800; }
.ot-cert .sh { display: flex; justify-content: center; margin: 4px 0; }
.ot-cert .sh svg { width: 110px; height: 57px; }
.ot-cert .st { margin: 2px 0; font-size: 13px; color: #78350F; font-weight: 700; }
.ot-cert .dt { margin: 0; font-size: 12px; color: #92400E; }
.ot-cert .tr { display: inline-block; margin: 4px 0 0; padding: 1px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; }
.ot-cert .tr.gold { background: #FDE68A; color: #78350F; }
.ot-cert .tr.silver { background: #E2E8F0; color: #334155; }
.ot-cert .tr.bronze { background: #FED7AA; color: #7C2D12; }
.ot-cert .seal { position: absolute; right: 12px; top: 176px; display: grid; place-items: center; align-content: center; width: 58px; height: 58px; border-radius: 50%; border: 3px solid #DC2626; box-shadow: inset 0 0 0 2px #FFFBEB, inset 0 0 0 3.5px #DC2626; color: #DC2626; transform: rotate(-10deg); line-height: 1.05; opacity: .9; }
.ot-cert .seal b { font-size: 17px; color: #DC2626; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
.ot-cert .seal small { font-size: 9px; font-weight: 800; }
.ot-cert .nmin { display: block; margin: 12px 0 0; text-align: left; }
.ot-cert .nmin span { display: block; margin: 0 0 4px; font-size: 12.5px; color: #A5F3FC; font-weight: 800; }
.ot-cert .nmin input { width: 100%; height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: #0B1026; box-shadow: inset 0 0 0 1.5px rgba(148,163,184,.45); color: #fff; font-size: 16px; font-weight: 700; font-family: inherit; box-sizing: border-box; }
.ot-cert .bt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.ot-cert .bt .sv { grid-column: 1 / -1; background: linear-gradient(180deg, #FBBF24, #D97706); box-shadow: 0 3px 0 #92400E; color: #422006 !important; }

/* ── ① 光を 追いこせ */
.ot-chase { padding: 12px; border-radius: 16px; background: linear-gradient(160deg, rgba(34,211,238,.12), rgba(167,139,250,.1)); box-shadow: inset 0 0 0 1.5px rgba(103,232,249,.45); }
.ot-wrap .ot-chase .hd { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 4px; font-size: 15px; line-height: 1.5; }
.ot-chase .hd b { color: var(--cyl); }
.ot-chase .hd .tr { font-size: 14px; color: var(--gd); font-weight: 900; }
.ot-wrap .ot-chase .ds { margin: 0 0 8px; font-size: 14px; line-height: 1.7; color: var(--tx); font-weight: 700; }
.ot-chase svg { display: block; width: 100%; height: auto; }
.ot-chase svg .t { fill: #CBD5E1; font-size: 13.5px; font-weight: 700; }
.ot-chase svg .t.g { fill: #FDE68A; font-weight: 900; }
.ot-chase .mt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin: 8px 0; }
.ot-chase .mt > div { padding: 8px 10px; border-radius: 12px; background: #0B1026; }
.ot-chase .mt small { display: block; font-size: 12px; color: var(--tx3); font-weight: 700; line-height: 1.4; }
.ot-chase .mt b { display: block; font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ot-chase .mt .me { box-shadow: inset 0 0 0 1.5px rgba(251,191,36,.45); }
.ot-chase .mt .me b { color: var(--gd); }
.ot-chase .mt .me.hit { animation: otGood .9s ease; }
.ot-wrap .ot-chase .bl { margin: 0 0 4px; font-size: 12.5px; color: var(--tx3); font-weight: 700; line-height: 1.4; }
.ot-chase .bt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ot-chase .bt button { position: relative; min-height: 50px; padding: 4px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #F472B6, #DB2777); box-shadow: 0 3px 0 #831843; color: #fff; font-size: 17px; white-space: nowrap; font-weight: 900; cursor: pointer; }
.ot-chase .bt button.on { background: #2A1F5C; box-shadow: inset 0 0 0 2px var(--gd); }
.ot-chase .bt button.on i::after { content: "✓ 測定ずみ"; position: absolute; left: 0; right: 0; bottom: 3px; color: var(--gd); font-size: 12px; font-style: normal; }
.ot-chase .bt button.on { padding-bottom: 14px; }

/* ── 今日の 目利き ・ 7 日の 帯 */
.ot-daily .wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 8px 0 2px; }
.ot-daily .wk span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; border-radius: 10px; background: rgba(255,255,255,.05); }
.ot-daily .wk i { display: block; min-height: 15px; font-size: 11px; line-height: 15px; color: var(--gd); letter-spacing: -1px; }
.ot-daily .wk small { font-size: 12px; color: var(--tx3); font-weight: 700; }
.ot-daily .wk .p0, .ot-daily .wk .p1, .ot-daily .wk .p2, .ot-daily .wk .p3 { background: rgba(249,115,22,.18); }
.ot-daily .wk .td { box-shadow: inset 0 0 0 1.5px var(--gd); }

/* ── 今日の 時空試験 ・ ゴールド修了証 */
.ot-dexam { margin-top: 12px; scroll-margin-top: 70px; }
.ot-dexam .bx { background: linear-gradient(170deg, #2A1150, #120C3A); box-shadow: inset 0 0 0 2px #A78BFA, 0 0 24px rgba(167,139,250,.25); }
.ot-dexam .dh { flex-wrap: wrap; }
.ot-dexam .dh .dt { color: #C4B5FD; font-size: 16px; }
.ot-dexam .dh .dd { margin: 0 auto 0 6px; color: var(--tx2); font-size: 13px; }
.ot-dexam .dh .sk { font-size: 13px; color: var(--tx2); }
.ot-dexam .dh .sk b { color: var(--gd); font-size: 17px; }
.ot-wrap .ot-dexam .res { margin: 6px 0 0; font-size: 14px; line-height: 1.7; }
.ot-dexam .res b { display: block; font-size: 17px; }
.ot-dexam .res.ok b { color: var(--gr); }
.ot-dexam .res.ng b { color: #FCA5A5; }
.ot-dexam .hp i { color: #F87171; }
.ot-wrap .ot-boss .gl { margin: 8px 0 0; padding: 8px 10px; border-radius: 12px; background: rgba(251,191,36,.08); box-shadow: inset 0 0 0 1px rgba(251,191,36,.35); font-size: 13px; line-height: 1.6; text-align: center; }
.ot-boss .gl b { display: block; color: var(--gd); font-size: 14px; }
.ot-boss .gl.on { background: linear-gradient(90deg, rgba(253,230,138,.25), rgba(245,158,11,.2)); }
.ot-cert.gold .pp { background: linear-gradient(160deg, #FEF3C7, #FDE68A 55%, #FCD34D); }
.ot-cert .rb { position: absolute; left: -2px; top: 14px; padding: 2px 14px 2px 10px; border-radius: 0 99px 99px 0; background: linear-gradient(90deg, #B45309, #F59E0B); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .12em; }

.ot-shake { animation: otShake .35s ease; }
@keyframes otShake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@media (min-width: 640px) {
	.ot-hero { padding: 20px 26px 22px; }
	.ot-hero h1 { font-size: 42px; }
	.ot-card { padding: 22px 24px 18px; }
	.ot-map { padding: 14px 18px; }
	.ot-map ol { gap: 10px 18px; }
}
@media (max-width: 359px) {
	.ot-hero h1 { font-size: 30px; }
	.ot-tw-sel.b .ch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ot-hud .br { display: none; }
	.ot-map li a b { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.ot-wrap *, .ot-hud, .ot-toast, .ot-ov, .ot-ov .in, .ot-ov * { animation: none !important; transition: none !important; }
}

.ot-daily .rv { position: relative; }
.ot-daily .dstp { position: absolute; right: 4px; top: -6px; padding: 2px 10px; border: 3px solid; border-radius: 10px; font-size: 18px; font-weight: 900; transform: rotate(-8deg); animation: otStamp2 .5s cubic-bezier(.2,1.6,.4,1); }
.ot-daily .dstp.p3 { color: var(--gd); border-color: var(--gd); }
.ot-daily .dstp.p2 { color: var(--gr); border-color: var(--gr); }
.ot-daily .dstp.p1 { color: var(--cyl); border-color: var(--cyl); }
.ot-daily .dstp.p0 { color: #FCA5A5; border-color: #F87171; }
.ot-daily .hd .sk.up { animation: otFlame .7s cubic-bezier(.2,1.6,.4,1); }
@keyframes otFlame { 30% { transform: scale(1.35) translateY(-3px); } 100% { transform: none; } }

body.ot-body #qznPwaSheet { display: none !important; }
.ot-chase .pq { margin: 0 0 8px; }
.ot-wrap .ot-chase .pq .aq { margin: 0 0 8px; color: #fff; font-weight: 800; font-size: 14.5px; line-height: 1.6; }
.ot-chase .pq .ach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ot-chase .pq .ach button { min-height: 48px; padding: 4px; border: 0; border-radius: 12px; background: #222D6B; box-shadow: inset 0 0 0 1.5px var(--ln), 0 3px 0 #0B1026; color: #fff; font-size: 15px; font-weight: 900; white-space: nowrap; cursor: pointer; }
.ot-chase .pq .ach button.right { background: #14532D; box-shadow: inset 0 0 0 2px var(--gr); }
.ot-chase .pq .ach button.wrong { background: #4C1D1D; box-shadow: inset 0 0 0 2px var(--rd); }
.ot-chase .pq .ach button:disabled:not(.right):not(.wrong) { opacity: .5; }
.ot-wrap .ot-chase .pq .ar { margin: 8px 0 0; font-size: 13.5px; line-height: 1.7; }
.ot-chase .pq .ar b { display: block; color: #FCA5A5; }
.ot-chase .pq .re { display: flex; width: 100%; margin-top: 8px; }
.ot-wrap .ot-chase .pq .a1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; font-size: 13.5px; font-weight: 700; color: var(--tx); }
.ot-chase .pq .a1 b { color: var(--gr); }
.ot-chase.lk .bt button { opacity: .45; }
.ot-dexam .dh .ic { flex: none; width: 30px; height: 30px; }
.ot-dexam .dh .sk { display: inline-flex; align-items: center; gap: 3px; padding: 2px 10px 2px 6px; border-radius: 99px; background: rgba(249,115,22,.16); }
.ot-dexam .dh .sk svg { width: 14px; height: 17px; }
.ot-dexam .dh .sk.up { animation: otFlame .7s cubic-bezier(.2,1.6,.4,1); }
.ot-dexam .wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 8px 0; }
.ot-dexam .wk span { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 0; border-radius: 10px; background: rgba(255,255,255,.05); }
.ot-dexam .wk i { min-height: 16px; font-size: 14px; line-height: 16px; font-weight: 900; }
.ot-dexam .wk .ok i { color: var(--gr); }
.ot-dexam .wk .ng i { color: #FCA5A5; }
.ot-dexam .wk small { font-size: 12px; color: var(--tx3); font-weight: 700; }
.ot-dexam .wk .td { box-shadow: inset 0 0 0 1.5px #A78BFA; }
.ot-dexam .bx.end { position: relative; text-align: left; }
.ot-dexam .dstp { display: block; width: fit-content; margin: 4px auto 10px; padding: 2px 16px; border: 3px solid; border-radius: 10px; background: rgba(18,12,58,.85); font-size: 18px; font-weight: 900; transform: rotate(-5deg); animation: otStamp2 .5s cubic-bezier(.2,1.6,.4,1); }
.ot-dexam .dstp.ok { color: var(--gr); border-color: var(--gr); }
.ot-dexam .dstp.ng { color: #FCA5A5; border-color: #F87171; }
.ot-dexam .ck { margin: 6px 0 8px; padding: 8px 10px; border-radius: 10px; background: rgba(10,15,44,.5); }
.ot-dexam .dh .sk.z { background: rgba(148,163,184,.18); color: #E2E8F0; }
.ot-dexam .dh .sk.z b { color: #fff; }
.ot-dexam .dh .sk.z svg { filter: grayscale(1); opacity: .8; }
.ot-dexam .ck li.na { color: var(--tx3); font-weight: 700; }
.ot-dexam .ck li.na::before { content: "－"; color: var(--tx3); }
.ot-dexam .ck .xd { margin: 4px 0 2px; }
.ot-dexam .ck .xd summary { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 99px; background: rgba(167,139,250,.18); color: #DDD6FE; font-size: 13px; font-weight: 800; cursor: pointer; list-style: none; }
.ot-dexam .ck .xd summary::-webkit-details-marker { display: none; }
.ot-dexam .ck .xd summary::before { content: "▸"; margin-right: 6px; }
.ot-dexam .ck .xd[open] summary::before { content: "▾"; }
.ot-wrap .ot-dexam .ck .xd p { margin: 6px 0 4px; color: var(--tx2); font-size: 13.5px; font-weight: 500; line-height: 1.7; }
.ot-dexam .ck .xd a { display: inline-block; padding: 4px 0; color: #A5F3FC; font-size: 13.5px; font-weight: 800; }
.ot-dexam .ck .xd a .nw { white-space: nowrap; }

/* ── さわって確かめる (2026-11-10 ・ 読むだけの 説明の かわりに 動かして 分かる 部品 ・ js の lab*() ・ やってみよう ☆ → ★ と わかったこと) */
.ot-lab { margin: 12px 0 4px; padding: 12px; border-radius: 18px; background: linear-gradient(180deg, rgba(34,211,238,.09), rgba(167,139,250,.06)), var(--pn2); box-shadow: inset 0 0 0 1.5px rgba(103,232,249,.35), 0 6px 18px rgba(0,0,0,.25); scroll-margin-top: 70px; }
.ot-lab.all { box-shadow: inset 0 0 0 1.5px rgba(74,222,128,.55), 0 6px 18px rgba(0,0,0,.25); }
.ot-lab .lhd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.ot-lab .tg { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px; border-radius: 999px; background: rgba(34,211,238,.18); box-shadow: inset 0 0 0 1px rgba(103,232,249,.45); color: var(--cyl); font-size: 12.5px; font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
.ot-lab .tg i { flex: none; width: 16px; height: 16px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 2.5a1.6 1.6 0 0 1 3.2 0v7.2l.9-.1a1.5 1.5 0 0 1 2.9.5l.8-.1a1.5 1.5 0 0 1 2.8.8l.5-.1a1.5 1.5 0 0 1 2 1.4v4.4c0 3.6-2.6 6-6 6h-2.2c-1.9 0-3.5-.9-4.6-2.4L4.6 14a1.6 1.6 0 0 1 2.5-2l2.4 2.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 2.5a1.6 1.6 0 0 1 3.2 0v7.2l.9-.1a1.5 1.5 0 0 1 2.9.5l.8-.1a1.5 1.5 0 0 1 2.8.8l.5-.1a1.5 1.5 0 0 1 2 1.4v4.4c0 3.6-2.6 6-6 6h-2.2c-1.9 0-3.5-.9-4.6-2.4L4.6 14a1.6 1.6 0 0 1 2.5-2l2.4 2.4Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ot-lab .pg { font-size: 12.5px; color: var(--tx3); font-weight: 800; white-space: nowrap; }
.ot-lab .pg b { color: var(--gd); font-size: 16px; margin: 0 1px; }
.ot-wrap .ot-lab .lq { margin: 0 0 10px; color: #fff; font-size: 15.5px; font-weight: 800; line-height: 1.65; }
.ot-lsc { margin: 0 0 8px; border-radius: 14px; overflow: hidden; background: #070B22; box-shadow: inset 0 0 0 1px var(--ln); }
.ot-lsc svg { display: block; width: 100%; height: auto; }
.ot-lab .t3 { fill: #CBD5E1; font-size: 13.5px; font-weight: 700; }
.ot-lab .t3.b { fill: #fff; font-weight: 900; }
.ot-lab .t3.p { fill: #F9A8D4; font-weight: 800; }
.ot-lab .t3.y { fill: #FDE68A; font-weight: 800; }
.ot-lab .t3.c { fill: #A5F3FC; font-weight: 800; }
.ot-lab .t3.g { fill: #86EFAC; font-weight: 800; }
.ot-lab .t3.r { fill: #FCA5A5; font-weight: 800; }
.ot-lab .cnt { fill: #FDE68A; font-size: 14px; font-weight: 800; }
.ot-lab .cnt tspan { font-size: 26px; font-weight: 900; }
.ot-lab .age { fill: #fff; font-size: 26px; font-weight: 900; }
.ot-lab .age tspan { font-size: 13px; fill: #CBD5E1; font-weight: 700; }
.ot-wrap .ot-lab .lms { margin: 0 0 8px; padding: 9px 12px; border-radius: 12px; background: rgba(251,191,36,.08); box-shadow: inset 0 0 0 1px rgba(251,191,36,.3); color: var(--tx); font-size: 14.5px; line-height: 1.7; font-weight: 700; }
.ot-lab .lms > b { display: inline-block; margin: 0 8px 0 0; padding: 0 8px; border-radius: 6px; font-size: 13px; line-height: 1.7; background: rgba(251,191,36,.2); color: var(--gd); }
.ot-lab .lms > b.ok { background: rgba(74,222,128,.18); color: var(--gr); }
.ot-lab .lms > b.ng { background: rgba(248,113,113,.18); color: #FCA5A5; }
.ot-lab .lms .sc { display: block; margin-top: 4px; font-size: 13px; color: var(--cyl); }
.ot-lab .lbt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 0 0 4px; }
.ot-lab .lbt.one { grid-template-columns: minmax(0, 1fr); }
.ot-lab .lbt .ot-btn { width: 100%; min-height: 50px; padding: 0 8px; font-size: 15px; }
.ot-lab .lbt .ot-btn.sub { box-shadow: inset 0 0 0 1.5px rgba(103,232,249,.45), 0 3px 0 #0B1026; }
.ot-seg { display: flex; gap: 4px; margin: 0 0 8px; padding: 4px; border-radius: 14px; background: #0B1026; box-shadow: inset 0 0 0 1px var(--ln); }
.ot-seg button { flex: 1; min-width: 0; min-height: 42px; padding: 2px 4px; border: 0; border-radius: 10px; background: transparent; color: var(--tx3); font-size: 13.5px; font-weight: 900; line-height: 1.3; cursor: pointer; }
.ot-seg button.on { background: rgba(34,211,238,.2); box-shadow: inset 0 0 0 1.5px var(--cy); color: #fff; }
.ot-seg.s3 button { font-size: 12.5px; }
.ot-lab .gbig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin: 0 0 8px; }
.ot-lab .gbig > div { min-width: 0; padding: 8px 10px; border-radius: 12px; background: #0B1026; }
.ot-lab .gbig small { display: block; font-size: 12px; color: var(--tx3); font-weight: 700; line-height: 1.45; }
.ot-lab .gbig b { display: block; font-size: 20px; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.35; overflow-wrap: anywhere; }
.ot-lab .gbig b small { margin-top: 2px; font-size: 12px; color: var(--tx2); }
.ot-lab .lrg { margin: 0 0 8px; }
.ot-lab .lrg .rw { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 4px; }
.ot-lab .lrg .rw span { font-size: 13px; color: var(--tx3); font-weight: 700; }
.ot-lab .lrg .rw b { font-size: 17px; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.ot-lab .fine { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 6px; margin-top: 6px; }
.ot-lab .pm { min-height: 42px; border: 0; border-radius: 10px; background: #2B3780; box-shadow: inset 0 0 0 1.5px rgba(103,232,249,.4); color: var(--cyl); font-size: 22px; font-weight: 900; line-height: 1; cursor: pointer; }
.ot-lab .ot-pre { margin: 0 0 8px; }
.ot-lab .ot-pre.a5, .ot-lab .ot-pre.s3b { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ot-lab .ot-pre button.on { background: rgba(34,211,238,.2); box-shadow: inset 0 0 0 2px var(--cy); color: #fff; }
.ot-lab .chain { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 4px; }
.ot-lab .chain li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 10px; background: #0B1026; }
.ot-lab .chain li span { font-size: 13.5px; color: var(--tx2); font-weight: 700; }
.ot-lab .chain li b { font-size: 15px; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ot-lab .chain li.rs { background: rgba(167,139,250,.14); box-shadow: inset 0 0 0 1px rgba(167,139,250,.45); }
.ot-lab .chain li.rs b { color: var(--gd); font-size: 18px; }
.ot-lab .fuel { margin: 0 0 8px; padding: 8px 10px; border-radius: 12px; background: #0B1026; }
.ot-lab .fuel .rw { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ot-lab .fuel .rw span { font-size: 12.5px; color: var(--tx3); font-weight: 700; line-height: 1.45; }
.ot-lab .fuel .rw b { flex: none; font-size: 19px; color: var(--gd); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ot-lab .fuel .fb { display: block; height: 12px; margin-top: 6px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.ot-lab .fuel .fb i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #FBBF24, #F97316, #EF4444); }
.ot-lab .hold { display: flex; width: 100%; min-height: 62px; font-size: 18px; letter-spacing: .04em; background: linear-gradient(180deg, #FB923C, #C2410C); box-shadow: 0 4px 0 #7C2D12, 0 0 20px rgba(249,115,22,.35); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
.ot-lab .hold.on { transform: translateY(3px); box-shadow: 0 1px 0 #7C2D12, 0 0 34px rgba(249,115,22,.75); }
.ot-lab .ot-lre { display: block; margin: 6px auto 0; min-height: 36px; padding: 0 14px; border: 0; background: none; color: var(--tx3); font-size: 13px; font-weight: 800; text-decoration: underline; cursor: pointer; }
.ot-lab .mrd, .ot-lab .srd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.ot-lab .mrd > div, .ot-lab .srd > div { min-width: 0; padding: 8px 10px; border-radius: 12px; background: #0B1026; }
.ot-lab .mrd .big { grid-column: 1 / -1; background: rgba(74,222,128,.1); box-shadow: inset 0 0 0 1px rgba(74,222,128,.4); }
.ot-lab .mrd small, .ot-lab .srd small { display: block; font-size: 12px; color: var(--tx3); font-weight: 700; line-height: 1.45; }
.ot-lab .mrd b, .ot-lab .srd b { display: block; font-size: 19px; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.4; }
.ot-lab .mrd b i, .ot-lab .srd b i { margin-left: 2px; font-size: 12px; color: var(--tx2); }
.ot-lab .mrd b small { display: inline; margin-left: 8px; font-size: 13px; color: var(--tx2); }
.ot-lab .mrd em { display: block; font-style: normal; font-size: 12px; color: var(--cyl); font-weight: 800; }
.ot-lab .mrd .big b { font-size: 24px; color: var(--gr); }
.ot-lab .srd b { color: var(--gd); }
.ot-lab .ard { display: grid; gap: 6px; }
.ot-lab .ard .ar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 8px; padding: 8px 10px; border-radius: 12px; background: #0B1026; }
.ot-lab .ard .ar > span:first-child { font-size: 13px; color: var(--tx2); font-weight: 700; }
.ot-lab .ard .ar b { font-size: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ot-lab .ard b.r { color: #FCA5A5; }
.ot-lab .ard b.c { color: var(--cyl); }
.ot-lab .ard .br { grid-column: 1 / -1; display: block; height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.ot-lab .ard .br i { display: block; height: 100%; border-radius: 99px; }
.ot-lab .ard .br i.r { background: linear-gradient(90deg, #F87171, #FB923C); }
.ot-lab .ard .br i.c { background: linear-gradient(90deg, #22D3EE, #818CF8); }
.ot-lab .ard .at { padding: 10px 12px; border-radius: 12px; text-align: center; background: rgba(255,255,255,.05); }
.ot-lab .ard .at small { display: block; font-size: 12.5px; color: var(--tx3); font-weight: 700; }
.ot-lab .ard .at b { font-size: 22px; }
.ot-lab .ard .at.r b { color: #FCA5A5; }
.ot-lab .ard .at.c b { color: var(--cyl); }
.ot-lab .ard .at.eq { background: rgba(74,222,128,.12); box-shadow: inset 0 0 0 1px rgba(74,222,128,.5); }
.ot-lab .ard .at.eq b { color: var(--gr); }
.ot-lab .ltk { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ot-lab .ltk li { position: relative; padding: 9px 10px 9px 34px; border-radius: 12px; background: rgba(255,255,255,.05); transition: background .2s; }
.ot-lab .ltk li::before { content: "☆"; position: absolute; left: 11px; top: 8px; font-size: 16px; line-height: 1.4; color: rgba(255,255,255,.4); }
.ot-lab .ltk li > span { display: block; font-size: 13.5px; font-weight: 800; color: var(--tx2); line-height: 1.6; }
.ot-lab .ltk li.on { background: rgba(74,222,128,.09); box-shadow: inset 0 0 0 1px rgba(74,222,128,.45); }
.ot-lab .ltk li.on::before { content: "★"; color: var(--gd); }
.ot-lab .ltk li.on > span { color: #fff; }
.ot-wrap .ot-lab .ltk .fd { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(10,15,44,.65); font-size: 14px; line-height: 1.75; color: var(--tx); }
.ot-lab .ltk .fd::before { content: "わかった！"; display: block; margin: 0 0 2px; font-size: 12px; font-weight: 900; color: var(--gr); letter-spacing: .04em; }
.otjs .ot-lab .ltk li:not(.on) .fd { display: none; }
.ot-lab .ltk li.pop { animation: otLabPop 1s ease; }
@keyframes otLabPop { 0% { transform: scale(1); } 25% { transform: scale(1.025); box-shadow: inset 0 0 0 2px var(--gr), 0 0 22px rgba(74,222,128,.45); } 100% { transform: scale(1); } }
.ot-emc .how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin: 8px 0 0; }
.ot-emc .how button { min-height: 44px; padding: 4px 6px; border: 0; border-radius: 12px; background: #222D6B; box-shadow: inset 0 0 0 1.5px var(--ln); color: var(--tx2); font-size: 13px; font-weight: 800; line-height: 1.35; cursor: pointer; }
.ot-emc .how button.on { background: rgba(251,191,36,.16); box-shadow: inset 0 0 0 2px var(--gd); color: #fff; }
@media (prefers-reduced-motion: reduce) { .ot-lab .ltk li.pop { animation: none; } }
.ot-lab .gbig b { white-space: nowrap; overflow-wrap: normal; font-size: 19px; }
.ot-lab .gbig b small { white-space: normal; }
.ot-lab .srd b { font-size: 18px; white-space: nowrap; }
.ot-lab .chain li.rs { flex-wrap: wrap; }
.ot-lab .chain li.rs b { margin-left: auto; }
.ot-seg.s3 button { font-size: 12px; padding: 2px; }

/* ── 実地研修 ・ 相対性理論が 働く 現場 (2026-11-10 ・ js の tech*() ・ 技術カード) */
.ot-tdeck { margin: 10px 0 0; padding: 10px; border-radius: 16px; background: #0B1026; box-shadow: inset 0 0 0 1px var(--ln); }
/* 2026-11-15 ・ 実地研修は 各ミッションの 中 ・ 見出しの 札 */
.ot-wrap .ot-tech .tkg { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12.5px; color: var(--gd); font-weight: 800; letter-spacing: .04em; line-height: 1.4; }
.ot-tech .tkg span { padding: 3px 9px; border-radius: 8px; background: linear-gradient(90deg, #FBBF24, #4ADE80); color: #0B1026; font-size: 12px; font-weight: 900; letter-spacing: .06em; }
.ot-card > .ot-tech { margin-top: 14px; }
.ot-wrap .ot-tdeck .hd { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 8px; font-size: 13px; font-weight: 900; color: var(--gd); letter-spacing: .04em; line-height: 1.4; }
.ot-tdeck .hd b { margin-left: auto; color: #fff; font-size: 17px; }
.ot-tdeck .cs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.ot-tdeck .tc { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 5px; border-radius: 10px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--ln); text-decoration: none; color: var(--tx3) !important; }
.ot-tdeck .tc svg { width: 34px; height: 28px; filter: grayscale(1) brightness(.6); }
.ot-tdeck .tc b { font-size: 10.5px; line-height: 1.3; color: var(--tx3); text-align: center; white-space: nowrap; letter-spacing: -.02em; }
.ot-tdeck .tc span { font-size: 10px; line-height: 1; color: var(--tx3); letter-spacing: 0; }
.ot-tdeck .tc span i { color: rgba(255,255,255,.2); }
.ot-tdeck .tc span i.on { color: var(--gd); }
.ot-tdeck .tc.r1, .ot-tdeck .tc.r2, .ot-tdeck .tc.r3 { background: linear-gradient(180deg, rgba(251,191,36,.16), rgba(251,191,36,.04)); }
.ot-tdeck .tc.r1 { box-shadow: inset 0 0 0 1.5px #B45309; }
.ot-tdeck .tc.r2 { box-shadow: inset 0 0 0 1.5px #CBD5E1; }
.ot-tdeck .tc.r3 { box-shadow: inset 0 0 0 2px var(--gd), 0 0 12px rgba(251,191,36,.35); }
.ot-tdeck .tc.r1 svg, .ot-tdeck .tc.r2 svg, .ot-tdeck .tc.r3 svg { filter: none; }
.ot-tdeck .tc.r1 b, .ot-tdeck .tc.r2 b, .ot-tdeck .tc.r3 b { color: #fff; }
.ot-wrap .ot-tdeck .all { margin: 8px 0 0; padding: 6px; border-radius: 10px; background: rgba(251,191,36,.16); color: var(--gd); font-size: 13.5px; font-weight: 900; text-align: center; line-height: 1.5; }
.ot-tech { margin: 0 0 14px; padding: 12px; border-radius: 18px; background: var(--pn2); box-shadow: inset 0 0 0 1.5px rgba(251,191,36,.3), 0 6px 18px rgba(0,0,0,.25); scroll-margin-top: 70px; }
.ot-tech.got { box-shadow: inset 0 0 0 1.5px rgba(74,222,128,.5), 0 6px 18px rgba(0,0,0,.25); }
.ot-tech .th { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.ot-tech .th .ic { flex: none; width: 46px; height: 40px; padding: 2px; border-radius: 12px; background: #0B1026; box-shadow: inset 0 0 0 1px var(--ln); }
.ot-tech .th .ic svg { display: block; width: 100%; height: 100%; }
.ot-tech .th .tt { flex: 1; min-width: 0; }
.ot-tech .th .tt b { display: block; font-size: 17px; color: #fff; line-height: 1.35; }
.ot-tech .th .tt small { display: block; font-size: 12px; color: var(--gd); font-weight: 800; }
.ot-tech .th .rk { flex: none; font-size: 17px; letter-spacing: 1px; }
.ot-tech .th .rk i { color: rgba(255,255,255,.2); }
.ot-tech .th .rk i.on { color: var(--gd); }
.ot-wrap .ot-tech .lq { margin: 0 0 10px; color: var(--tx); font-size: 14.5px; font-weight: 700; line-height: 1.7; }
.ot-tech .tfd { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(74,222,128,.08); box-shadow: inset 0 0 0 1px rgba(74,222,128,.4); }
.ot-tech .tfd > b { display: block; margin: 0 0 2px; font-size: 12.5px; color: var(--gr); letter-spacing: .04em; }
.ot-wrap .ot-tech .tfd p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--tx); }
.otjs .ot-tech:not(.got) .tfd { display: none; }
.ot-tech .tbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 0 0 8px; }
.ot-tech .tbar > span:first-child { font-size: 12.5px; color: var(--tx3); font-weight: 700; }
.ot-tech .tbar .tm { display: block; height: 10px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.ot-tech .tbar .tm i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #22D3EE, #A78BFA); }
.ot-tech .tbar b { font-size: 15px; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ot-tech .ot-lsc svg { touch-action: manipulation; }
.ot-tech .t3 { fill: #CBD5E1; font-size: 13.5px; font-weight: 700; }
.ot-tech .t3.sm { font-size: 12px; }
.ot-tech .t3.y { fill: #FDE68A; font-weight: 800; }
.ot-tech .t3.c { fill: #A5F3FC; font-weight: 800; }
.ot-tech .t3.r { fill: #FCA5A5; font-weight: 800; }
.ot-tech .t3.b { fill: #fff; font-weight: 900; }
.ot-tech .big { fill: #fff; font-size: 30px; font-weight: 900; }
.ot-tech .big tspan { font-size: 14px; fill: #CBD5E1; }
.ot-tech .lbt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 0 0 8px; }
.ot-tech .lbt .ot-btn { width: 100%; min-height: 52px; padding: 0 6px; font-size: 15px; }
.ot-tech .hold, .ot-tech .tap { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
.ot-tech .hold.on { transform: translateY(2px); box-shadow: 0 1px 0 #0E4F5C, 0 0 24px rgba(34,211,238,.6); }
.ot-tech > .tbd > .tap { display: flex; width: 100%; min-height: 60px; margin: 0 0 8px; font-size: 19px; }
.ot-wrap .ot-tech .lms { margin: 0 0 8px; padding: 9px 12px; border-radius: 12px; background: rgba(251,191,36,.08); box-shadow: inset 0 0 0 1px rgba(251,191,36,.3); color: var(--tx); font-size: 14px; line-height: 1.7; font-weight: 700; }
.ot-tech .lms > b { display: inline-block; margin: 0 8px 0 0; padding: 0 8px; border-radius: 6px; font-size: 13px; background: rgba(248,113,113,.18); color: #FCA5A5; }
.ot-tech .gbig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin: 0 0 8px; }
.ot-tech .gbig > div { min-width: 0; padding: 8px 10px; border-radius: 12px; background: #0B1026; }
.ot-tech .gbig small { display: block; font-size: 12px; color: var(--tx3); font-weight: 700; line-height: 1.45; }
.ot-tech .gbig b { display: block; font-size: 19px; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ot-tech .lrg { margin: 0 0 8px; }
.ot-tech .lrg .rw { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 4px; }
.ot-tech .lrg .rw span { font-size: 13px; color: var(--tx3); font-weight: 700; }
.ot-tech .lrg .rw b { font-size: 16px; color: #fff; }
.ot-tech .gq, .ot-tech .gq2 { margin: 0 0 8px; }
.ot-wrap .ot-tech .aq { margin: 0 0 8px; color: #fff; font-weight: 800; font-size: 14.5px; line-height: 1.6; }
.ot-tech .ach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ot-tech .ach button { min-height: 50px; padding: 4px; border: 0; border-radius: 12px; background: #222D6B; box-shadow: inset 0 0 0 1.5px var(--ln), 0 3px 0 #0B1026; color: #fff; font-size: 14px; font-weight: 900; line-height: 1.35; cursor: pointer; }
.ot-tech .ach button.right { background: #14532D; box-shadow: inset 0 0 0 2px var(--gr); }
.ot-tech .ach button.wrong { background: #4C1D1D; box-shadow: inset 0 0 0 2px var(--rd); }
.ot-wrap .ot-tech .ar { margin: 8px 0 0; font-size: 14px; color: var(--gr); font-weight: 800; }
.ot-tech .tres { margin: 4px 0 0; padding: 12px; border-radius: 14px; text-align: center; }
.ot-tech .tres.ok { background: rgba(74,222,128,.1); box-shadow: inset 0 0 0 1.5px rgba(74,222,128,.5); }
.ot-tech .tres.ng { background: rgba(248,113,113,.1); box-shadow: inset 0 0 0 1.5px rgba(248,113,113,.45); }
.ot-tech .tres .st { font-size: 30px; letter-spacing: 4px; line-height: 1.2; }
.ot-tech .tres .st i { color: rgba(255,255,255,.2); }
.ot-tech .tres .st i.on { color: var(--gd); text-shadow: 0 0 12px rgba(251,191,36,.6); }
.ot-tech .tres > b { display: block; margin: 4px 0; font-size: 17px; color: #fff; }
.ot-wrap .ot-tech .tres p { margin: 0 0 8px; font-size: 14px; line-height: 1.7; text-align: left; }
.ot-tech .tres .re { display: flex; width: 100%; }
@media (max-width: 380px) { .ot-tdeck .tc b { font-size: 9.5px; } }
/* ── 2026-11-10 レビュー 1 回目の あと (予想 ・ タイムアタック ・ ★1) */
.ot-lab .pg i { margin-right: 4px; padding: 1px 6px; border-radius: 6px; background: rgba(251,191,36,.18); color: var(--gd); font-size: 11.5px; font-weight: 900; }
.ot-lab .lask, .ot-tech .lask { margin: 0 0 8px; }
.ot-lab .lask .aq b, .ot-tech .lask .aq b { display: inline-block; margin: 0 6px 0 0; padding: 0 8px; border-radius: 6px; background: rgba(244,114,182,.2); color: #F9A8D4; font-size: 12.5px; }
.ot-lab .lask .ach.c2, .ot-tech .lask .ach.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ot-lab .lask button { font-size: 15px; }
.ot-ask button.pk { background: rgba(244,114,182,.22); box-shadow: inset 0 0 0 2px var(--pk); }
.ot-lab .lbt.b3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ot-lab .lbt.b3 .ot-btn { font-size: 13.5px; padding: 0 4px; }
.ot-lab .lms > b.q { background: rgba(244,114,182,.2); color: #F9A8D4; }
.ot-lab .gta { margin: 0 0 8px; }
.ot-lab .gtc { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; background: rgba(244,114,182,.1); box-shadow: inset 0 0 0 1.5px rgba(244,114,182,.45); }
.ot-lab .gtc.ok { background: rgba(74,222,128,.1); box-shadow: inset 0 0 0 1.5px rgba(74,222,128,.5); }
.ot-lab .gtc.ng { background: rgba(248,113,113,.1); box-shadow: inset 0 0 0 1.5px rgba(248,113,113,.45); }
.ot-lab .gtc > b { font-size: 16px; color: #fff; }
.ot-lab .gtc > span { font-size: 14px; color: var(--tx); font-weight: 700; line-height: 1.6; }
.ot-lab .gtc small { display: block; color: var(--gd); font-size: 12.5px; font-weight: 800; }
.ot-lab .gtc .ot-btn { width: 100%; min-height: 50px; }
.ot-lab .gtr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; padding: 10px 12px; border-radius: 14px; background: #0B1026; box-shadow: inset 0 0 0 1.5px rgba(74,222,128,.55); }
.ot-lab .gtr .n { font-size: 13px; color: var(--tx3); font-weight: 800; }
.ot-lab .gtr b { font-size: 20px; color: var(--gr); }
.ot-lab .gtr .tm { font-size: 20px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.ot-lab .gtr .tm.lo { color: #FCA5A5; }
.ot-lab .gtr .nr { grid-column: 1 / -1; font-size: 13.5px; font-weight: 800; color: var(--cyl); }
.ot-lab .gtr .nr.hit { color: var(--gr); }
.ot-lab svg .t3 tspan.c { fill: #A5F3FC; } .ot-lab svg .t3 tspan.y { fill: #FDE68A; } .ot-lab svg .t3 tspan.p { fill: #F9A8D4; }
.ot-lab .t3.sm { font-size: 12px; }
.ot-lab .srd b.sm { font-size: 15px; }
.ot-lab .lms > b.ok, .ot-tech .lms > b.ok { background: rgba(74,222,128,.18); color: var(--gr); }
.ot-daily .hd { flex-wrap: wrap; row-gap: 4px; }
.ot-mythg .bt { scroll-margin-bottom: 96px; }
/* ── 2026-11-10 実地研修 ・ 相対性理論が なかったら (3 つの 段 ・ 総まとめ ・ 説明カード) */
.ot-tech .tfd > b { font-size: 13px; }
.ot-tech .how { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ot-tech .how li { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 8px; align-items: start; }
.ot-tech .how li i { display: block; padding: 3px 4px; border-radius: 8px; background: rgba(34,211,238,.16); color: var(--cyl); font-size: 12px; font-weight: 900; text-align: center; line-height: 1.4; }
.ot-tech .how li:nth-child(2) i { background: rgba(251,191,36,.16); color: var(--gd); }
.ot-tech .how li:nth-child(3) i { background: rgba(248,113,113,.18); color: #FCA5A5; }
.ot-tech .how li span { font-size: 14px; line-height: 1.7; color: var(--tx); }
.ot-tech .how li:nth-child(3) span { color: #fff; font-weight: 700; }
.otjs .ot-tech:not(.got):not(.seen) .tfd { display: none; }
.otjs .ot-tech.seen .tfd { display: block; }
.ot-wrap .ot-tech .tres .hw { margin: 0 0 8px; font-size: 13px; color: var(--cyl); font-weight: 800; text-align: center; }
.ot-tech .ot-lre { display: block; margin: 0 auto 8px; min-height: 36px; padding: 0 14px; border: 0; background: none; color: #FCA5A5; font-size: 13.5px; font-weight: 800; text-decoration: underline; cursor: pointer; }
.ot-wrap .ot-tech .cls { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 8px; padding: 8px 10px; border-radius: 12px; background: rgba(248,113,113,.08); box-shadow: inset 0 0 0 1px rgba(248,113,113,.35); font-size: 13px; color: var(--tx2); font-weight: 700; line-height: 1.5; }
.ot-tech .cls b { flex: none; font-size: 17px; color: #fff; white-space: nowrap; }
.ot-tech .cls b.r { color: #FCA5A5; }
.ot-tmatch { box-shadow: inset 0 0 0 1.5px rgba(34,211,238,.5), 0 6px 18px rgba(0,0,0,.25); }
.ot-tmatch .mt { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px; margin: 0 0 8px; }
.ot-tmatch .cl { display: grid; gap: 6px; align-content: start; }
.ot-wrap .ot-tmatch .rh { margin: 0; font-size: 12px; color: #FCA5A5; font-weight: 900; text-align: center; line-height: 1.4; }
.ot-tmatch .cl button { min-height: 52px; padding: 6px 8px; border: 0; border-radius: 12px; background: #222D6B; box-shadow: inset 0 0 0 1.5px var(--ln); color: var(--tx); font-size: 12.5px; font-weight: 700; line-height: 1.45; text-align: left; cursor: pointer; }
.ot-tmatch .cl.l button { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ot-tmatch .cl.l button .ic { flex: none; width: 30px; height: 25px; }
.ot-tmatch .cl.l button .ic svg { display: block; width: 100%; height: 100%; }
.ot-tmatch .cl.l button b { color: #fff; font-size: 13px; line-height: 1.35; }
.ot-tmatch .cl button.on { background: rgba(34,211,238,.2); box-shadow: inset 0 0 0 2.5px var(--cy), 0 0 14px rgba(34,211,238,.35); }
.ot-tmatch .cl button.ok { opacity: .35; }
.ot-tmatch .card { margin: 0 0 8px; padding: 10px; border-radius: 14px; background: #FFFBEB; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.ot-wrap .ot-tmatch .card .ch { margin: 0 0 8px; color: #92400E; font-size: 13.5px; font-weight: 900; line-height: 1.5; }
.ot-tmatch .card .got { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ot-tmatch .card .got li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #FDE68A; }
.ot-tmatch .card .got .ic { width: 34px; height: 28px; }
.ot-tmatch .card .got .ic svg { display: block; width: 100%; height: 100%; }
.ot-tmatch .card .got b { display: block; color: #0F172A; font-size: 14px; }
.ot-tmatch .card .got em { display: block; font-style: normal; color: #B91C1C; font-size: 13.5px; font-weight: 800; line-height: 1.6; }
.ot-tmatch .card .got small { display: block; color: #475569; font-size: 12.5px; line-height: 1.65; }
/* ── 友だちに 説明しよう (2026-11-10 ・ 説明を 組み立てる) */
.otjs .ot-tech:not(.seen):not(.got) .tex { display: none; }
.ot-tech .tex, .ot-texw .tex { margin: 10px 0 0; padding: 10px; border-radius: 16px; background: linear-gradient(180deg, rgba(251,191,36,.1), rgba(244,114,182,.06)); box-shadow: inset 0 0 0 1.5px rgba(251,191,36,.4); }
.ot-texw { margin: 0 0 12px; }
.ot-wrap .tex .xh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; font-size: 14px; line-height: 1.4; }
.tex .xh b { color: var(--gd); font-size: 15px; }
.tex .xh .ok { padding: 2px 8px; border-radius: 99px; background: rgba(74,222,128,.18); color: var(--gr); font-size: 12px; font-weight: 900; }
.tex .bb { display: flex; gap: 8px; margin: 0 0 8px; align-items: flex-start; }
.tex .bb .av { flex: none; width: 36px; height: 36px; }
.tex .bb .av svg { display: block; width: 100%; height: 100%; }
.ot-wrap .tex .bb p { margin: 0; padding: 8px 12px; border-radius: 4px 14px 14px 14px; background: #fff; color: #0F172A; font-size: 14.5px; font-weight: 700; line-height: 1.65; }
.tex .bb.me { position: relative; justify-content: flex-end; }
.ot-wrap .tex .bb.me p { border-radius: 14px 4px 14px 14px; background: #CFFAFE; max-width: 92%; }
.tex .bb.me p span { display: block; }
.tex .bb.me p span + span { margin-top: 4px; }
.tex .bb.me.fin p { background: #DCFCE7; box-shadow: 0 0 0 2px var(--gr); }
.tex .bb.me .stp { position: absolute; right: 6px; top: -10px; padding: 1px 8px; border: 2px solid #DC2626; border-radius: 6px; color: #DC2626; background: #FFF; font-style: normal; font-size: 12px; font-weight: 900; transform: rotate(-6deg); }
.ot-wrap .tex .xs { margin: 0 0 6px; font-size: 12.5px; color: var(--tx3); font-weight: 800; }
.tex .xo { display: grid; gap: 6px; }
.tex .xo button { min-height: 48px; padding: 8px 12px; border: 0; border-radius: 12px; background: #222D6B; box-shadow: inset 0 0 0 1.5px rgba(103,232,249,.45), 0 3px 0 #0B1026; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.6; text-align: left; cursor: pointer; }
.tex .xo button.ng { background: #4C1D1D; box-shadow: inset 0 0 0 2px var(--rd); opacity: .7; }
.tex .ot-lre { display: block; margin: 4px auto 0; min-height: 36px; padding: 0 14px; border: 0; background: none; color: var(--tx3); font-size: 13px; font-weight: 800; text-decoration: underline; cursor: pointer; }
.ot-tdeck .tc em { font-style: normal; font-size: 9.5px; color: var(--gr); font-weight: 900; line-height: 1.2; }
/* ── 2026-11-10 レビュー 2 回目の あと */
.ot-ctl .tg .cd { margin-left: 6px; color: var(--pk); font-size: 12.5px; font-weight: 900; white-space: nowrap; }
.ot-ctl .tg .cd.x { color: var(--tx3); }
.ot-ask .a1 { flex-wrap: wrap; row-gap: 4px; }
.ot-ask .a1 > b, .ot-ask .a1 .why { white-space: nowrap; }
.ot-ask .a1 > span { word-break: keep-all; overflow-wrap: anywhere; }
.ot-hud .msg i, .ot-toast i { font-style: normal; }
.ot-hud .msg i:not(.on), .ot-toast i:not(.on) { color: rgba(255,255,255,.25); }
.ot-hud .msg i.on, .ot-toast i.on { color: var(--gd); }
.ot-lab .lms.mfl > b.ng { background: rgba(248,113,113,.18); color: #FCA5A5; }
.ot-tech .gq .ach button, .ot-tech .gq2 .ach button { font-size: 14px; }
.tex .bb.f p { flex: 1; min-width: 0; }
.ot-tmatch .cl.l button b { word-break: keep-all; }
/* ── 2026-11-10 FINAL の 操縦 問題 ・ 長押しで 加速の 時計 */
.ot-boss .qt .opb { display: inline-block; margin: 0 6px 0 0; padding: 0 8px; border-radius: 6px; background: rgba(244,114,182,.22); color: #F9A8D4; font-size: 12.5px; vertical-align: 2px; }
.ot-boss .bop { display: grid; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #0B1026; box-shadow: inset 0 0 0 1px var(--ln); }
.ot-boss .bop .rw { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ot-boss .bop .rw span { font-size: 13px; color: var(--tx3); font-weight: 700; }
.ot-boss .bop .rw b { font-size: 17px; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ot-wrap .ot-boss .bop .gm { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 15px; color: var(--tx2); font-weight: 800; }
.ot-boss .bop .gm b { font-size: 26px; color: #fff; font-variant-numeric: tabular-nums; }
.ot-boss .bop .gm.hit b { color: var(--gr); }
.ot-boss .bop .gm .tgt { margin-left: auto; padding: 2px 10px; border-radius: 99px; background: rgba(74,222,128,.16); color: var(--gr); font-size: 13px; }
.ot-wrap .ot-boss .bop .big { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; }
.ot-boss .bop .big .v { font-size: 30px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.ot-boss .bop .big small { font-size: 13px; color: var(--gr); font-weight: 800; }
.ot-boss .bop .ot-btn { width: 100%; min-height: 56px; font-size: 17px; }
.ot-boss .bop .hold { background: linear-gradient(180deg, #FB923C, #C2410C); box-shadow: 0 4px 0 #7C2D12; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
.ot-boss .bop .hold.on { transform: translateY(3px); box-shadow: 0 1px 0 #7C2D12, 0 0 26px rgba(249,115,22,.7); }
.ot-lab .clk2.tk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin: 0 0 8px; }
.ot-lab .clk2.tk > div { padding: 6px 10px; border-radius: 12px; background: #0B1026; }
.ot-lab .clk2.tk small { display: block; font-size: 12px; color: var(--tx3); font-weight: 700; }
.ot-lab .clk2.tk b { font-size: 22px; color: #fff; font-variant-numeric: tabular-nums; }
.ot-lab .clk2.tk > div:nth-child(2) b { color: var(--cyl); }
.ot-lab .clk2.tk i { margin-left: 2px; font-size: 12px; color: var(--tx2); }
.ot-tech .tfd > b { color: #FCA5A5; }
/* ── 2026-11-10 体感 ・ 指で 動かす */
.ot-lab .lbt .ot-btn.dv { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; font-size: 13px; }
.ot-lab .lbt .ot-btn.dv.on { background: rgba(34,211,238,.25); box-shadow: inset 0 0 0 2px var(--cy); transform: translateY(2px); }
.ot-lab .ot-lsc.agw { position: relative; }
.ot-lab .agrip { position: absolute; right: 8px; top: 10px; bottom: 26px; width: 40px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 4px 0; border-radius: 20px; background: rgba(34,211,238,.14); box-shadow: inset 0 0 0 1.5px rgba(103,232,249,.5); color: var(--cyl); font-size: 12px; touch-action: none; cursor: ns-resize; }
.ot-lab .agrip i { flex: 1; width: 4px; margin: 4px 0; border-radius: 2px; background: rgba(103,232,249,.35); }
.ot-lab .agrip.on { background: rgba(34,211,238,.3); }
.ot-lab .ot-btn.ff { display: flex; width: 100%; min-height: 54px; margin: 0 0 8px; font-size: 16px; background: linear-gradient(180deg, #FBBF24, #D97706); box-shadow: 0 4px 0 #78350F; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
.ot-lab .ot-btn.ff.on { transform: translateY(3px); box-shadow: 0 1px 0 #78350F, 0 0 24px rgba(251,191,36,.6); }
.ot-wrap .ot-boss .bop .gm { flex-wrap: wrap; }
.ot-boss .bop .gm b, .ot-boss .bop .gm .tgt { white-space: nowrap; }
/* ── 2026-11-10 用語の 説明 (押すと 1 行) ・ ミューオンって なに？ */
.ot-wrap .term { display: inline; margin: 0; padding: 0 1px; border: 0; border-radius: 3px; background: none; font: inherit; color: inherit; line-height: inherit; text-decoration: underline dotted rgba(103,232,249,.85); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: help; -webkit-tap-highlight-color: transparent; }
.ot-wrap .term::after { content: '?'; display: inline-block; margin: 0 1px 0 2px; width: 1.15em; height: 1.15em; border-radius: 50%; background: rgba(34,211,238,.22); color: #A5F3FC; font-size: .66em; font-weight: 900; line-height: 1.15em; text-align: center; vertical-align: .38em; }
.ot-wrap .term.on { background: rgba(34,211,238,.18); }
.ot-gl { position: absolute; z-index: 80; font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif; padding: 11px 14px 12px; border-radius: 14px; background: #19235A; box-shadow: inset 0 0 0 1.5px rgba(103,232,249,.55), 0 10px 28px rgba(0,0,0,.5); color: #E6EAF5; }
.ot-gl[hidden] { display: none; }
.ot-gl b { display: block; margin: 0 0 3px; color: #A5F3FC; font-size: 14px; font-weight: 900; }
.ot-gl p { margin: 0; font-size: 14px; line-height: 1.7; font-weight: 700; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.ot-lab[data-tag] { background: linear-gradient(180deg, rgba(244,114,182,.10), rgba(167,139,250,.06)), var(--pn2); box-shadow: inset 0 0 0 1.5px rgba(244,114,182,.4), 0 6px 18px rgba(0,0,0,.25); }
.ot-lab[data-tag] .tg { background: rgba(244,114,182,.18); box-shadow: inset 0 0 0 1px rgba(249,168,212,.5); color: #FBCFE8; }
.ot-lab[data-tag].all { box-shadow: inset 0 0 0 1.5px rgba(74,222,128,.55), 0 6px 18px rgba(0,0,0,.25); }
.ot-lab[data-lab=muwhat] .ot-lsc svg { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
/* ── 2026-11-15 2 回目の レビューの 案 ・ 実地研修の ★を ミッションへ ・ たたむ ・ ○× 20 枚 */
.ot-rule li .sts { margin-left: auto; padding-left: 6px; font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
.ot-rule li.part { color: #fff; }
.ot-rule li.part > i { color: var(--gd); opacity: .6; }
.ot-map li a .sts { letter-spacing: 0; }
.sts.cmp { color: var(--gd); letter-spacing: 0 !important; white-space: nowrap; font-weight: 800; }
.sts.cmp b { color: #fff; margin: 0 1px; }
.ot-map li a .sts.cmp { font-size: 12.5px; }
.ot-map li a .sts.cmp b { display: inline; padding: 0; border-radius: 0; background: none; font-size: 14px; line-height: 1; }
.ot-mban .sts.cmp { font-size: 13px; }
.ot-mban .sts.cmp b { font-size: 17px; }
.ot-hud .sc b, .ot-map .hd .sc b, .ot-mban .sts.cmp b { letter-spacing: -.04em; }
.ot-map .ot-tdeck { margin: 10px 2px 0; }
/* ○× 20 枚 ・ 進みの 帯 ・ まちがえた カード ・ 答えと 解説 (たたんで 出す) */
.ot-mythg .prg { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 2px; margin: -4px 0 8px; }
.ot-mythg .prg i { height: 5px; border-radius: 2px; background: rgba(255,255,255,.12); }
.ot-mythg .prg i.ok { background: var(--gr); }
.ot-mythg .prg i.ng { background: var(--rd); }
.ot-mythg .prg i.now { background: var(--cyl); box-shadow: 0 0 6px rgba(103,232,249,.8); }
.ot-mythg .card .jd { white-space: nowrap; }
.ot-mythg .rv .mis { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 6px; text-align: left; }
.ot-mythg .rv .mis li { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.05); font-size: 13.5px; line-height: 1.6; color: var(--tx); font-weight: 700; }
.ot-mythg .rv .mis b { flex: none; font-size: 16px; }
.ot-mythg .rv .mis b.ok { color: var(--gr); }
.ot-mythg .rv .mis b.x { color: #FCA5A5; }
.ot-mylist { margin: 6px 0 0; border-radius: 14px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); }
.otjs .ot-mylist.wait { display: none; }
.ot-mylist > summary { padding: 12px 14px; font-size: 14px; font-weight: 800; color: var(--cyl); cursor: pointer; line-height: 1.5; }
.ot-mylist .ot-myth { margin: 0; padding: 0 8px 10px; }
.ot-mylist .ot-myth li { background: rgba(10,15,44,.5); }
/* 2026-11-15 見た目の 点検の あと */
.ot-mythg .card.st .stk { display: block; width: 150px; height: 86px; margin: 0 auto 2px; }
.ot-mythg .card:not(.st)::before { content: ""; position: absolute; inset: 7px; border-radius: 15px; border: 1.5px dashed rgba(251,191,36,.28); pointer-events: none; }
.ot-mythg .card:not(.st)::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%; border-radius: 20px 20px 50% 50% / 20px 20px 18px 18px; background: linear-gradient(180deg, rgba(255,255,255,.08), transparent); pointer-events: none; }
.ot-mythg .bt button svg { display: block; width: 40px; height: 40px; margin: 0 auto; }
.ot-mythg .card.out.R { transform: translateX(6px) rotate(1.5deg); }
.ot-mythg .card.out.L { transform: translateX(-6px) rotate(-1.5deg); }
.ot-wrap .ot-mythg .rv .mh { margin: 0 0 6px; font-size: 13px; color: var(--tx2); font-weight: 800; text-align: left; }
.ot-tmatch .tip { min-height: 4.6em; }
.ot-tmatch .cl.l button b { white-space: nowrap; font-size: 12.5px; }
.ot-tdeck .tc b { font-size: 11px; }
.ot-map .pl::before { content: ""; position: absolute; left: -9px; right: -9px; top: 50%; height: 14px; margin-top: -7px; border-radius: 50%; border: 2px solid rgba(103,232,249,.35); border-top-color: transparent; transform: rotate(-16deg); pointer-events: none; }
.ot-map li a.clear .pl::before { border-color: rgba(251,191,36,.6); border-top-color: transparent; }
.otjs .mwait { display: none !important; }
@media (max-width: 400px) { .ot-tech .gbig b { font-size: 16px; } .ot-lab .lask .ach button { font-size: 14px; } }
.tex .bb p { min-width: 0; overflow-wrap: anywhere; }
.ot-wrap .tex .bb.me p { max-width: calc(100% - 8px); }
/* 予想の 問いの 中の 用語 ボタンを 選択肢の 見た目に しない (空の 四角に 見えていた) */
.ot-wrap .ot-ask button.term, .ot-wrap .ot-lab .lask button.term { min-height: 0; padding: 0 1px; border: 0; border-radius: 3px; background: none; box-shadow: none; color: inherit; font: inherit; line-height: inherit; opacity: 1; }
.ot-wrap .ot-ask button.term.on { background: rgba(34,211,238,.18); }
.ot-tech .ach button .sw { display: block; width: 26px; height: 6px; margin: 5px auto 0; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
/* ── 2026-11-15 画面を 分ける (マップ / ミッション 1 つ / 結果 ・ js の showView()) ・ 答えを 先に 見せない */
@keyframes otDoneIn { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.ot-vbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 10px; }
.ot-vbar .bk { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px 0 10px; border-radius: 14px; background: var(--pn2); box-shadow: inset 0 0 0 1.5px rgba(103,232,249,.45); color: #fff !important; font-size: 14px; font-weight: 900; text-decoration: none; }
.ot-vbar .bk i { font-size: 20px; line-height: 1; color: var(--cyl); }
.ot-vbar .vt { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ot-vbar .vt .no { font-size: 12.5px; font-weight: 900; color: var(--cyl); letter-spacing: .04em; white-space: nowrap; }
.ot-vbar .vt .sts.cmp { padding: 4px 10px; border-radius: 99px; background: rgba(251,191,36,.14); box-shadow: inset 0 0 0 1px rgba(251,191,36,.4); font-size: 13px; }
.ot-vbar .vt .sts.cmp b { font-size: 16px; }
.otjs .ot-card > .ot-mban > .sts { display: none; }
/* 2 回目からの 表紙 (マップが すぐ 見える ように 小さく) */
.ot-hero.prog .art, .ot-hero.prog .meta, .ot-hero.prog .lead { display: none; }
.ot-hero.prog h1 { font-size: 24px; margin: 6px 0 4px; }
.ot-hero.prog h1 small { display: inline; margin: 0 0 0 6px; font-size: 13px; }
/* ミッションの いちばん 下 ・ 結果を 見る */
.ot-mend { margin: 16px 0 2px; }
.ot-mend .res { display: flex; flex-direction: column; gap: 1px; width: 100%; min-height: 58px; font-size: 17px; background: var(--pn2); box-shadow: inset 0 0 0 1.5px var(--ln); color: var(--tx2) !important; }
.ot-mend .res small { font-size: 12px; font-weight: 700; opacity: .9; }
.ot-mend.rdy .res { background: linear-gradient(180deg, #FBBF24, #D97706); box-shadow: 0 4px 0 #78350F, 0 0 22px rgba(251,191,36,.35); color: #422006 !important; }
/* 結果の 画面 */
.ot-result { padding: 22px 16px 18px; text-align: center; background: radial-gradient(circle at 50% 0%, rgba(251,191,36,.16), transparent 60%), var(--pn); box-shadow: inset 0 0 0 1.5px rgba(251,191,36,.5); }
.ot-result.in { animation: otDoneIn .5s cubic-bezier(.3,1.4,.5,1); }
.ot-wrap .ot-result .rn { margin: 0 0 12px; font-size: 13px; font-weight: 900; color: var(--cyl); letter-spacing: .06em; line-height: 1.5; }
.ot-result .rn b { display: block; font-size: 21px; color: #fff; letter-spacing: 0; }
.ot-result .stamp { display: inline-grid; place-items: center; min-width: 190px; height: 74px; padding: 0 18px; border-radius: 16px; border: 4px solid #F87171; color: #FCA5A5; transform: rotate(-6deg); box-shadow: 0 0 0 3px rgba(248,113,113,.18), inset 0 0 0 2px rgba(248,113,113,.25); }
.ot-result.in .stamp { animation: otStamp .55s cubic-bezier(.2,1.6,.4,1) .15s both; }
@keyframes otStamp { from { transform: rotate(-6deg) scale(2.2); opacity: 0; } to { transform: rotate(-6deg) scale(1); opacity: 1; } }
.ot-result .stamp b { font-size: 30px; font-weight: 900; color: #FCA5A5; letter-spacing: .08em; }
.ot-result .stamp.pf { border-color: var(--gd); box-shadow: 0 0 24px rgba(251,191,36,.5), inset 0 0 0 2px rgba(251,191,36,.3); }
.ot-result .stamp.pf b { color: var(--gd); font-size: 26px; letter-spacing: .04em; }
.ot-result .sts { margin: 16px 0 0; font-size: 34px; letter-spacing: 4px; line-height: 1.1; }
.ot-result .sts.many { font-size: 26px; letter-spacing: 2px; }
.ot-wrap .ot-result .sn { margin: 4px 0 0; font-size: 14px; font-weight: 800; color: var(--gd); }
.ot-result .sn b { margin: 0 1px; font-size: 19px; color: #fff; }
.ot-wrap .ot-result .cm { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; text-align: left; }
.ot-result .cm .bb { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 4px 14px 14px 14px; background: rgba(10,15,44,.6); box-shadow: inset 0 0 0 1px rgba(103,232,249,.3); font-size: 15px; line-height: 1.7; color: #fff; font-weight: 700; }
.ot-result .lf { margin: 12px 0 0; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.05); text-align: left; }
.ot-result .lf > b { display: block; margin: 0 0 2px; font-size: 12.5px; color: var(--tx3); letter-spacing: .04em; }
.ot-result .lf ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.ot-result .lf li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.6; color: var(--tx2); font-weight: 700; }
.ot-result .lf li::before { content: "★"; position: absolute; left: 0; color: rgba(255,255,255,.28); }
.ot-result .bts { display: grid; gap: 8px; margin: 16px 0 0; }
.ot-result .bts .ot-btn { width: 100%; min-height: 50px; }
.ot-result .bts .nx { flex-direction: column; gap: 1px; min-height: 60px; font-size: 17px; }
.ot-result .bts .nx small { font-size: 12px; font-weight: 700; opacity: .9; }
/* 今日の 復習 (今日の 目利き ・ 今日の 時空試験) */
.ot-tdlink { display: block; margin: 10px 4px 0; padding: 9px 12px; border-radius: 12px; background: rgba(167,139,250,.14); box-shadow: inset 0 0 0 1px rgba(167,139,250,.5); color: #fff !important; font-size: 13px; font-weight: 800; text-decoration: none; text-align: center; }
.ot-mban .no.td { background: linear-gradient(90deg, #A78BFA, #F472B6); }
.ot-today .ot-daily { margin-top: 10px; }
.ot-today .ot-dexam { margin-top: 14px; }
/* EXTRA ・ 予想を 答える までは スライダーを 動かせない */
.ot-vadd.lk .vr, .ot-vadd.lk .out, .ot-vadd.lk .scn { opacity: .35; pointer-events: none; }
.ot-vadd .lask { margin: 0 0 10px; }
/* 重力波 ・ 雑音の メーター ・ 探す 波の 見本 */
.ot-tech .nz { display: grid; grid-template-columns: auto minmax(0, 1fr) 5.6em; align-items: center; gap: 8px; margin: 0 0 8px; padding: 8px 10px; border-radius: 12px; background: #0B1026; }
.ot-tech .nz > span:first-child { font-size: 12.5px; color: var(--tx3); font-weight: 800; }
.ot-tech .nz .nb { display: block; height: 12px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.ot-tech .nz .nb i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #F87171, #FB923C); transition: width .12s linear; }
.ot-tech .nz b { font-size: 13.5px; color: #FCA5A5; text-align: right; white-space: nowrap; }
.ot-tech .nz.l1 .nb i { background: linear-gradient(90deg, #FBBF24, #FB923C); }
.ot-tech .nz.l1 b { color: var(--gd); }
.ot-tech .nz.l0 .nb i { background: linear-gradient(90deg, #22D3EE, #4ADE80); }
.ot-tech .nz.l0 b { color: var(--gr); }
.ot-wrap .ot-tech .fnd { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 6px 10px; border-radius: 12px; background: rgba(167,139,250,.12); box-shadow: inset 0 0 0 1px rgba(167,139,250,.4); font-size: 12.5px; line-height: 1.4; color: var(--tx); font-weight: 800; }
.ot-tech .fnd .chp { flex: none; width: 96px; height: 32px; }
.ot-tech .fnd small { font-size: 12.5px; color: #C4B5FD; }
/* 友だちに 説明しよう ・ 正しい 文を 見せる */
.tex .xo button.ok { background: #14532D; box-shadow: inset 0 0 0 2px var(--gr); }
.tex .xo button:disabled { cursor: default; }
.ot-wrap .ot-tmatch .rh { color: var(--cyl); }
/* 2026-11-15 ・ 友だちの 吹き出しは 折り返す (.ot-wrap .f = 折り返さない 式 と 同じ クラス名で、長い 問いが 吹き出しの 外へ 出ていた) */
.ot-wrap .tex .bb.f { white-space: normal; }
/* EXTRA の 予想 ・ ラベルと 選択肢 (「約99.4%」が 途中で 折れていた) */
.ot-vadd .lask .aq b { display: inline-block; margin: 0 6px 0 0; padding: 0 8px; border-radius: 6px; background: rgba(244,114,182,.2); color: #F9A8D4; font-size: 12.5px; }
.ot-vadd .lask .ach button { font-size: 15px; white-space: nowrap; }
/* 結果の 画面 ・「次のミッションへ」を 先に (まだの ★と もう一度 は その下) */
.ot-result .lf .ot-btn { width: 100%; min-height: 46px; margin: 8px 0 0; }
.ot-result .bts + .lf { margin-top: 14px; }
.ot-result .lf + .bts, .ot-result .bts + .bts { margin-top: 10px; }
/* ── 2026-11-15 見た目の 点検 (画面を 分けた あと ・ 1 回目 平均 8.0 ・ 10/16) の 直し */
/* 雑音の メーター ・ 共通の .nb (番号の 丸 26px) の 幅が 効いて 粒に 見えていた → 行いっぱい ・ 緑 → 黄 → 赤 */
.ot-tech .nz .nb { width: auto; height: 12px; }
.ot-tech .nz .nb i, .ot-tech .nz.l0 .nb i, .ot-tech .nz.l1 .nb i { width: 100%; background: linear-gradient(90deg, #4ADE80 0%, #FBBF24 50%, #F87171 100%); clip-path: inset(0 calc(100% - var(--a, 100%)) 0 0 round 99px); transition: clip-path .12s linear; }
/* 総まとめ ・ 上の 問いは 箱の 真ん中 (1 行の とき 下半分が 空いていた ・ 高さは 変えない = 選ぶ たびに 下が 動かない) */
.ot-wrap .ot-tmatch .tip { display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 0 6px; text-align: center; }
/* 数値の 箱 ・ ラベル / 値 / 小さい 1 行 を 左右で そろえる (「エネルギー（目標 8GeV）」が かっこの 途中で 折れていた) */
.ot-tech .gbig small.tg { margin-top: 1px; font-size: 12px; color: var(--cyl); white-space: nowrap; }
/* 今日の 目利き ・ まだの 日は 点線の 丸 (灰色の 四角に 数字だけ だった) ・ 押せない ボタンの 文字を 読める 色に */
.ot-daily .wk i:empty::before { content: "☆"; color: rgba(255,255,255,.34); font-size: 13px; letter-spacing: 0; }   /* 点線の 丸は 小さくて 欠けて 見えた (見た目の 点検 2 回目) → 輪郭だけの ★ */
.ot-meki .go:disabled, .ot-daily .go:disabled { opacity: 1; background: #2E2466; box-shadow: inset 0 0 0 1.5px rgba(167,139,250,.6); color: #E9E5FF; }
/* 友だちに 説明 ・ 正しい 文と 選んだ 文に 印 (色だけ だった) */
.tex .xo button.ok::before { content: "✓ "; color: var(--gr); font-weight: 900; }
.tex .xo button.ng::before { content: "× "; color: #FCA5A5; font-weight: 900; }
.ot-wrap .tex .xs.jd { color: var(--gd); }
.ot-vadd .lask .ach button { font-size: 14px; }
/* ── 2026-11-15 ゲームディレクターの 確かめ (総合 6.5 → 7.5) の 直し */
/* ★0 の 結果 ・ CLEAR では なく TRY AGAIN (灰青) */
.ot-result .stamp.zr { border-color: #94A3B8; box-shadow: inset 0 0 0 2px rgba(148,163,184,.25); }
.ot-result .stamp.zr b { color: #CBD5E1; font-size: 24px; letter-spacing: .04em; }
.ot-result .bts .ag.nx { min-height: 56px; }
/* 下の 帯 ・ 課題を 終えた ミッションでは「結果 ▶」(金) */
.ot-hud .rs { flex: none; display: grid; place-items: center; min-height: 40px; padding: 0 12px; border-radius: 12px; background: linear-gradient(180deg, #FBBF24, #D97706); box-shadow: 0 2px 0 #78350F; color: #422006; font-size: 13px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.ot-hud .rs[hidden], .ot-hud .mp[hidden] { display: none; }
.ot-hud .rs.pop { animation: otRsPop .5s cubic-bezier(.3,1.6,.5,1) 3; }
@keyframes otRsPop { 0% { transform: scale(1); } 50% { transform: scale(1.16); box-shadow: 0 2px 0 #78350F, 0 0 18px rgba(251,191,36,.7); } 100% { transform: scale(1); } }
/* GPS ・「▶」だけ 1 行目に 残って いた */
.ot-gps2 .go { white-space: nowrap; }
@media (max-width: 400px) { .ot-gps2 .go { font-size: 15px; } }
/* 予想の 選択肢 ・ 長い 文は 1 列 */
.ot-wrap .ot-ask .ach.c1, .ot-wrap .ot-lab .lask .ach.c1, .ot-wrap .ot-tech .lask .ach.c1 { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.ot-wrap .ot-ask .ach.c1 button { min-height: 46px; padding: 6px 10px; font-size: 15px; line-height: 1.4; }