/* slot 777 の画面の部品。Review System の app.css の上に重ねる。色は tokens（:root の変数）だけで決める */

/* ---- slot 777 だけの部品。色は下の変数だけで決める（固定色はここにしか書かない） ---- */
:root, :root[data-bs-theme="light"] {
  --smp-bg: #10161f; --smp-ink: #e8edf4; --smp-line: #2a3444; --smp-on: #ffffff; --smp-on-ink: #10161f;
  --plus: #1f7a4d; --minus: #b42318; --zone: rgba(240, 101, 72, .16); --zone-line: #c2410c;
  --ic-red: #d92d20; --ic-shine: #ffd5cf; --ic-green: #2f8f3a; --ic-seed: #1d1d1d; --ic-gold: #f5a623; --ic-gold-line: #9a6400; --ic-ink: #3a4250;
  --bar-hi: var(--vz-primary); --bar-lo: color-mix(in srgb, var(--vz-primary) 45%, var(--line));
}
:root[data-bs-theme="dark"] {
  --smp-bg: #e8edf4; --smp-ink: #10161f; --smp-line: #c3cad4; --smp-on: #10161f; --smp-on-ink: #ffffff;
  --ic-red: #ff5a4a; --ic-shine: #ffd5cf; --ic-green: #4cc25a; --ic-seed: #0b0b0b; --ic-gold: #f7b84b; --ic-gold-line: #f7b84b; --ic-ink: #c9d1dc;
  --plus: #6fd39f; --minus: #ff8a7a; --zone: rgba(255, 138, 101, .18); --zone-line: #ffa07a;
}
/* 色の候補（Velzon の配色から）。左帯・光る線・塗りのボタンだけを入れ替える。白地の文字・ボタンは 4.5:1 に届く濃さに締める */
:root[data-sc="gold"] { --sb-bg: #0a1019; --sb-line: #1b2533; --sb-ink: #b9c2cf; --sb-ink-2: #8d97a6; --sb-active: rgba(247, 184, 75, .16); --fx: #f7b84b; --fx-2: #ffd27f; --fx-bar: linear-gradient(90deg, #f7b84b 0%, #f06548 100%); }
:root[data-sc="gold"][data-bs-theme="light"] { --btn-edit: #8a5a00; --btn-edit-hover: #6f4800; --vz-primary: #8a5a00; --vz-primary-rgb: 138, 90, 0; --vz-link-color: #8a5a00; --vz-link-color-rgb: 138, 90, 0; --vz-primary-bg-subtle: #fbf0dc; --vz-primary-text-emphasis: #5e3d00; }
:root[data-sc="gold"][data-bs-theme="dark"] { --btn-edit: #f7b84b; --btn-edit-hover: #ffcd75; --btn-edit-ink: #1d1300; --vz-primary: #f7b84b; --vz-primary-rgb: 247, 184, 75; --vz-link-color: #f7b84b; --accent-ink: #1d1300; }
:root[data-sc="red"] { --sb-bg: #1a0f12; --sb-line: #2e1b20; --sb-ink: #d2c0c4; --sb-ink-2: #a8949a; --sb-active: rgba(240, 101, 72, .18); --fx: #f06548; --fx-2: #ff9a85; --fx-bar: linear-gradient(90deg, #f06548 0%, #f7b84b 100%); }
:root[data-sc="red"][data-bs-theme="light"] { --btn-edit: #b0381f; --btn-edit-hover: #8f2c17; --vz-primary: #b0381f; --vz-primary-rgb: 176, 56, 31; --vz-link-color: #b0381f; --vz-link-color-rgb: 176, 56, 31; --vz-primary-bg-subtle: #fbe7e2; --vz-primary-text-emphasis: #7a2513; }
:root[data-sc="red"][data-bs-theme="dark"] { --btn-edit: #ff8a70; --btn-edit-hover: #ffa995; --btn-edit-ink: #2a0b05; --vz-primary: #ff8a70; --vz-primary-rgb: 255, 138, 112; --vz-link-color: #ff8a70; --accent-ink: #2a0b05; }
:root[data-sc="indigo"] { --sb-bg: #405189; --sb-line: #4e5f98; --sb-ink: #d3d9ee; --sb-ink-2: #b2bbdc; --sb-hi: #ffffff; --sb-active: rgba(255, 255, 255, .15); --fx: #0ab39c; --fx-2: #7ee7d6; --fx-bar: linear-gradient(90deg, #0ab39c 0%, #7ee7d6 100%); }
:root[data-sc="indigo"][data-bs-theme="light"] { --btn-edit: #405189; --btn-edit-hover: #34437a; --vz-primary: #405189; --vz-primary-rgb: 64, 81, 137; --vz-link-color: #405189; --vz-link-color-rgb: 64, 81, 137; --vz-primary-bg-subtle: #e6e9f4; --vz-primary-text-emphasis: #2f3c68; }
:root[data-sc="indigo"][data-bs-theme="dark"] { --btn-edit: #8e9cf0; --btn-edit-hover: #aab5f5; --btn-edit-ink: #0b1020; --vz-primary: #8e9cf0; --vz-primary-rgb: 142, 156, 240; --vz-link-color: #8e9cf0; --accent-ink: #0b1020; }
:root[data-sc="indigo"] .app-menu .mrow.active > .nav-link, :root[data-sc="indigo"] .app-menu .mrow.active .ic { color: #ffffff; }
:root[data-sc="sky"] { --sb-bg: #0a2b3d; --sb-line: #163a4f; --sb-ink: #b3c4cf; --sb-ink-2: #8aa1ae; --sb-active: rgba(41, 156, 219, .18); --fx: #299cdb; --fx-2: #7fd0ff; --fx-bar: linear-gradient(90deg, #299cdb 0%, #7fd0ff 100%); }
:root[data-sc="sky"][data-bs-theme="light"] { --btn-edit: #1a6fa0; --btn-edit-hover: #135680; --vz-primary: #1a6fa0; --vz-primary-rgb: 26, 111, 160; --vz-link-color: #1a6fa0; --vz-link-color-rgb: 26, 111, 160; --vz-primary-bg-subtle: #e2f1fa; --vz-primary-text-emphasis: #0f4c70; }
:root[data-sc="sky"][data-bs-theme="dark"] { --btn-edit: #6cc3f0; --btn-edit-hover: #95d4f5; --btn-edit-ink: #04202e; --vz-primary: #6cc3f0; --vz-primary-rgb: 108, 195, 240; --vz-link-color: #6cc3f0; --accent-ink: #04202e; }
.app-menu { --vz-primary: var(--fx); }


.logo-text { display: inline-flex; align-items: center; gap: 8px; color: var(--sb-hi); font-family: rs-num, var(--vz-body-font-family); font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; text-decoration: none; }
.logo-text .lm { width: 26px; height: 26px; border-radius: 7px; background: var(--fx-bar); display: grid; place-items: center; color: var(--sb-bg); font-size: 13px; font-weight: 800; }
.top-logo .logo-text { color: var(--vz-heading-color); font-size: 1rem; }
.navbar-brand-box .logo { display: flex; align-items: center; justify-content: center; height: 70px; }
:root[data-sidebar-size="lg"] .navbar-brand-box .logo-sm { display: none; }
:root[data-sidebar-size="sm"] .navbar-brand-box .logo-lg { display: none; }
.top-logo .logo-text .lm { width: 22px; height: 22px; font-size: 11px; }
.n, .c-n { font-family: rs-num, var(--vz-body-font-family); font-variant-numeric: tabular-nums; }
.plus { color: var(--plus); } .minus { color: var(--minus); }
.mutedx { color: var(--ink-2); font-size: .78rem; }
.card-h { display: flex; align-items: center; gap: 8px; padding: .6rem .9rem; border-bottom: 1px solid var(--line); font-weight: 700; font-size: .88rem; color: var(--vz-heading-color); }
.card-h .grow { flex: 1; }
.card-h small { font-weight: 400; color: var(--ink-2); }
.cb { padding: .75rem .9rem; }
.chip { display: inline-flex; align-items: center; gap: 3px; font-size: .74rem; padding: 1px 7px; border-radius: 4px; background: var(--sunk); color: var(--ink); border: 1px solid var(--line); white-space: nowrap; }
.chip.src { color: var(--ink-2); }
.chip.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.chip.hi { color: var(--vz-primary); border-color: color-mix(in srgb, var(--vz-primary) 50%, var(--line)); font-weight: 600; }

/* 実戦：ゲーム数のバー（タップで数字キー） */
.gbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: stretch; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--vz-secondary-bg); overflow: hidden; }
.gbar button { border: 0; background: transparent; color: var(--ink); text-align: left; padding: .45rem .7rem; border-right: 1px solid var(--line); min-width: 0; }
.gbar button:last-child { border-right: 0; }
.gbar span { display: block; font-size: .66rem; color: var(--ink-2); white-space: nowrap; }
.gbar b { display: block; font-size: 1.2rem; line-height: 1.2; font-family: rs-num, var(--vz-body-font-family); color: var(--vz-heading-color); }
.gbar .gk { background: var(--btn-edit); color: var(--btn-edit-ink, #fff); display: grid; place-items: center; padding: 0 .9rem; font-size: .8rem; font-weight: 700; gap: 0; }
.gbar .gk i { font-size: 1.2rem; }

/* 設定の見込み（棒） */
.est { display: grid; gap: 6px; }
.est .r { display: grid; grid-template-columns: 46px minmax(0, 1fr) 52px; align-items: center; gap: 8px; font-size: .8rem; }
.est .r .l { color: var(--ink-2); font-weight: 600; }
.est .r .t { height: 14px; background: var(--sunk); border-radius: 3px; overflow: hidden; }
.est .r .t div { height: 100%; background: var(--bar-lo); border-radius: 3px; transition: width .25s; }
.est .r.top .t div { background: var(--bar-hi); }
.est .r .p { text-align: right; font-family: rs-num, var(--vz-body-font-family); font-weight: 700; color: var(--vz-heading-color); }
.sumc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sumc .k { border: 1px solid var(--line-strong); border-radius: 6px; padding: 4px 9px; min-width: 92px; }
.sumc .k span { display: block; font-size: .66rem; color: var(--ink-2); }
.sumc .k b { font-size: 1.05rem; font-family: rs-num, var(--vz-body-font-family); color: var(--vz-heading-color); }
.trust { margin-top: 10px; font-size: .76rem; color: var(--ink-2); }
.trust .tbar { height: 6px; background: var(--sunk); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.trust .tbar div { height: 100%; background: var(--fx-bar); }
.eff { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .8rem; }
.eff li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; border-bottom: 1px dashed var(--line); padding: 3px 0; }
.eff li:last-child { border-bottom: 0; }
.eff .v { font-family: rs-num, var(--vz-body-font-family); color: var(--ink-2); }
.lean { font-size: .72rem; padding: 0 6px; border-radius: 4px; background: var(--sunk); color: var(--ink-2); white-space: nowrap; }
.lean.up { color: var(--plus); background: color-mix(in srgb, var(--plus) 12%, transparent); }
.lean.dn { color: var(--minus); background: color-mix(in srgb, var(--minus) 12%, transparent); }

/* 天井・ゾーンの帯 */
.ceil { position: relative; height: 20px; background: var(--sunk); border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.ceil .z { position: absolute; top: 0; bottom: 0; background: var(--zone); border-left: 1px solid var(--zone-line); border-right: 1px solid var(--zone-line); }
.ceil .f { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--vz-primary) 30%, transparent); }
.ceil .m { position: absolute; top: -2px; bottom: -2px; width: 3px; background: var(--vz-heading-color); }
.ceil-ax { display: flex; justify-content: space-between; font-size: .66rem; color: var(--ink-2); margin-top: 2px; font-family: rs-num, var(--vz-body-font-family); }
.ceil-tx { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8rem; margin-bottom: 6px; }
.ceil-tx b { font-family: rs-num, var(--vz-body-font-family); color: var(--vz-heading-color); }
.unk { color: var(--ink-2); border: 1px dashed var(--line-strong); border-radius: 4px; padding: 0 6px; font-size: .74rem; }
.modes { display: grid; gap: 4px; margin-top: 8px; }
.modes .r { display: grid; grid-template-columns: 70px minmax(0, 1fr) 40px; gap: 8px; align-items: center; font-size: .78rem; }
.modes .t { height: 8px; background: var(--sunk); border-radius: 3px; overflow: hidden; }
.modes .t div { height: 100%; background: var(--bar-lo); }
.modes .p { text-align: right; font-family: rs-num, var(--vz-body-font-family); }

/* 数えるボタン。左手で押すので下半分・左寄りにまとめる */
.pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pad .cb2 { position: relative; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--vz-secondary-bg); color: var(--ink); min-height: 76px; padding: 8px 10px; text-align: left; display: flex; flex-direction: column; justify-content: space-between; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.pad .cb2:active { background: var(--vz-primary-bg-subtle); border-color: var(--vz-primary); }
.pad .cb2 .nm { font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.pad .cb2 .ct { font-size: 1.9rem; line-height: 1; font-family: rs-num, var(--vz-body-font-family); font-weight: 700; color: var(--vz-heading-color); transition: transform .12s; }
.pad .cb2 .ct.bump { transform: scale(1.25); color: var(--vz-primary); }
.pad .cb2 .bt { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.pad .cb2 .rt { font-size: .68rem; color: var(--ink-2); font-family: rs-num, var(--vz-body-font-family); white-space: nowrap; }
.pad .cb2.hint { border-style: dashed; justify-content: center; align-items: flex-start; }
.pad .cb2.hint .nm { color: var(--vz-primary); font-size: .85rem; }
.pad .cb2.undo { background: transparent; justify-content: center; align-items: center; font-size: .8rem; color: var(--ink-2); min-height: 44px; }
.pad .cb2.pic { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 0 8px; }
.pad .cb2.pic .pc { grid-row: 1; width: 44px; height: 44px; }
.pad .cb2.pic .pc svg { width: 100%; height: 100%; display: block; }
.pad .cb2.pic .ct { grid-row: 1; text-align: right; white-space: nowrap; }
.pad .cb2.pic .nm { grid-row: 2; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pad .cb2.pic .rt { grid-row: 2; text-align: right; }
.ctog { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; }
.ctog[aria-expanded="false"] { border-bottom: 0; }
.ctog small { font-weight: 700; color: var(--vz-heading-color); }
.pad-wrap { display: grid; grid-template-columns: minmax(0, 1fr); }
.padnote { font-size: .72rem; color: var(--ink-2); margin-top: 6px; }
.hints-on { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.hints-on .chip button { border: 0; background: transparent; padding: 0 0 0 3px; color: var(--ink-2); }

/* 案A：1画面 */
.pa { display: grid; gap: 12px; }
.pa .card { margin-bottom: 0; }
@media (min-width: 992px) { .pa { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } .pa .col-l { position: sticky; top: 86px; } }
.pa .col-l, .pa .col-r { display: grid; gap: 12px; min-width: 0; }
/* スマホの案A：ゲーム数とボタンを画面の下に固定し、見込み・天井は上でスクロールして見る */
@media (max-width: 991.98px) {
  .pa .col-l { order: 2; position: sticky; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 7; gap: 6px; background: var(--vz-body-bg); padding: 8px 0 6px; margin: 0 -2px; border-top: 1px solid var(--line-strong); }
  .pa .col-r { order: 1; }
  .pa .col-l .card .cb { padding: .5rem; }
  .pa .pad { margin-right: 10%; gap: 6px; }
  .pa .pad .cb2 { min-height: 58px; padding: 6px 8px; }
  .pa .pad .cb2 .ct { font-size: 1.5rem; }
  .pa .pad .cb2.pic .pc { width: 34px; height: 34px; }
  .pa .pad .cb2.pic { gap: 0 4px; }
  .pa .pad .cb2.pic .nm { grid-column: 1 / -1; }
  .pa .pad .cb2.pic .rt { display: none; }
  .pa .pad .cb2.hint, .pa .pad .cb2.undo { min-height: 40px; padding: 4px 8px; }
  .pa .pad .cb2.hint .mutedx { display: none; }
  .pa .pad .cb2.hint .nm { font-size: .78rem; }
  .pa .padnote { display: none; }
  .pa .gbar b { font-size: 1rem; }
  .pa .gbar button { padding: .3rem .6rem; }
}

/* 案B：上に要約、下に大きなボタン、間をタブで切り替える */
.pbw { display: grid; gap: 12px; }
@media (min-width: 992px) { .pbw { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.pb-side { display: grid; gap: 12px; } .pb-side .card { margin-bottom: 0; }
@media (max-width: 991.98px) { .pb-side { display: none !important; } }
.pb { display: grid; gap: 10px; min-width: 0; }
.pb .card { margin-bottom: 0; }
.bsum { position: sticky; top: 70px; z-index: 8; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: .55rem .8rem; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--vz-secondary-bg); }
.bsum .big span { display: block; font-size: .66rem; color: var(--ink-2); }
.bsum .big b { font-size: 1.6rem; line-height: 1; font-family: rs-num, var(--vz-body-font-family); color: var(--vz-primary); }
.spark { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; align-items: end; height: 34px; }
.spark div { background: var(--bar-lo); border-radius: 2px 2px 0 0; position: relative; min-height: 2px; }
.spark div.top { background: var(--bar-hi); }
.spark-ax { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; font-size: .6rem; color: var(--ink-2); text-align: center; margin-top: 1px; }
.bsum .rt { text-align: right; font-size: .74rem; color: var(--ink-2); }
.bsum .rt b { display: block; font-size: 1rem; font-family: rs-num, var(--vz-body-font-family); color: var(--vz-heading-color); }
.bsum .cl { grid-column: 1 / -1; }
.bseg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.bseg button { border: 0; background: transparent; color: var(--ink-2); padding: .5rem .2rem; font-size: .8rem; border-right: 1px solid var(--line); }
.bseg button:last-child { border-right: 0; }
.bseg button[aria-selected="true"] { background: var(--btn-edit); color: var(--btn-edit-ink, #fff); font-weight: 700; }
.pb .pad .cb2 { min-height: 96px; }
.pb .pad .cb2 .ct { font-size: 2.3rem; }
@media (max-width: 767.98px) { .pb .pad { margin-right: 14%; } .bsum { top: 120px; } }

/* 数字キーの窓・示唆の窓（下から出す） */
.sheet-bg { position: fixed; inset: 0; background: var(--scrim, rgba(0, 0, 0, .45)); z-index: 2100; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2101; background: var(--vz-secondary-bg); border-top-left-radius: 14px; border-top-right-radius: 14px; max-height: 88vh; overflow-y: auto; padding: 12px max(16px, env(safe-area-inset-left, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--shadow-lg); }
@media (min-width: 768px) { .sheet { left: 50%; right: auto; width: 480px; transform: translateX(-50%); bottom: 24px; border-radius: 14px; } }
.sheet h5 { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin: 0 0 10px; }
.sheet h5 .grow { flex: 1; }
.fsel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.fsel button { border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; color: var(--ink); padding: 6px 8px; text-align: left; }
.fsel button span { display: block; font-size: .66rem; color: var(--ink-2); }
.fsel button b { font-size: 1.05rem; font-family: rs-num, var(--vz-body-font-family); }
.fsel button[aria-pressed="true"] { border-color: var(--vz-primary); background: var(--vz-primary-bg-subtle); }
.keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.keys button { border: 1px solid var(--line-strong); border-radius: 10px; background: var(--sunk); color: var(--vz-heading-color); font-size: 1.5rem; font-family: rs-num, var(--vz-body-font-family); min-height: 56px; }
.keys button.ok { background: var(--btn-edit); color: var(--btn-edit-ink, #fff); font-size: 1rem; font-weight: 700; font-family: inherit; }
.hl { display: grid; gap: 6px; }
.hl button { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; color: var(--ink); padding: 6px; text-align: left; }
.hl button:hover { border-color: var(--vz-primary); }
.thumb { aspect-ratio: 16 / 10; border-radius: 5px; background: repeating-linear-gradient(135deg, var(--sunk) 0 8px, var(--line) 8px 16px); display: grid; place-items: center; color: var(--ink-2); font-size: .6rem; }
.hl b { display: block; font-size: .88rem; }
.hl small { color: var(--ink-2); }
.hl .ef { font-size: .72rem; }

/* 機種 */
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mc { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px; background: var(--vz-secondary-bg); text-align: left; color: var(--ink); width: 100%; }
.mc:hover { border-color: var(--vz-primary); }
.mcov { aspect-ratio: 1 / 1; border-radius: 6px; background: var(--fx-bar); color: var(--sb-bg); display: grid; place-items: center; font-weight: 800; font-size: .7rem; padding: 4px; text-align: center; line-height: 1.2; }
.mc b { display: block; font-size: .92rem; color: var(--vz-heading-color); }
.mc .s { font-size: .74rem; color: var(--ink-2); }
.mc .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.lvl { display: inline-flex; gap: 2px; vertical-align: middle; }
.lvl i { width: 8px; height: 8px; border-radius: 2px; background: var(--line-strong); display: inline-block; }
.lvl i.on { background: var(--vz-primary); }
.mhero { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 1rem; }
.mhero h2 { font-size: 1.25rem; margin: 2px 0 6px; color: var(--vz-heading-color); }
.mhero .kpis { padding: 0; margin-top: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 767.98px) { .mhero { grid-template-columns: 84px minmax(0, 1fr); } .mhero .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stbl th, .stbl td { white-space: nowrap; font-size: .82rem; }
.stbl td { font-family: rs-num, var(--vz-body-font-family); }
.stbl .best { color: var(--vz-primary); font-weight: 700; }
.prose { font-size: .88rem; line-height: 1.75; }
.prose p { margin: 0 0 .6rem; }

/* 記録・管理 */
.lrow { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--vz-secondary-bg); margin-bottom: 6px; width: 100%; text-align: left; color: var(--ink); }
.lrow .d { font-family: rs-num, var(--vz-body-font-family); font-weight: 700; color: var(--vz-heading-color); line-height: 1.1; }
.lrow .d small { display: block; font-weight: 400; font-size: .7rem; color: var(--ink-2); }
.lrow .t b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .t span { font-size: .76rem; color: var(--ink-2); }
.lrow .t .memo { display: block; font-size: .78rem; color: var(--ink); margin-top: 2px; }
.lrow .a { text-align: right; font-family: rs-num, var(--vz-body-font-family); font-weight: 700; }
.lrow .a small { display: block; font-weight: 400; font-size: .72rem; color: var(--ink-2); font-family: var(--vz-body-font-family); }
.dk { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.dk .kpi { background: var(--vz-secondary-bg); }
.dk .kpi b { font-size: 1.25rem; font-family: rs-num, var(--vz-body-font-family); }
@media (max-width: 767.98px) { .dk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dg { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
@media (max-width: 991.98px) { .dg { grid-template-columns: minmax(0, 1fr); } }
.dg .card { margin-bottom: 0; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .ax { stroke: var(--line); stroke-width: 1; }
.chart .zero { stroke: var(--line-strong); stroke-width: 1; }
.chart .ln { fill: none; stroke: var(--vz-primary); stroke-width: 2.25; }
.chart .ar { fill: color-mix(in srgb, var(--vz-primary) 12%, transparent); }
.chart text { fill: var(--ink-2); font-size: 10px; font-family: rs-num, var(--vz-body-font-family); }
.chart .bp { fill: var(--plus); } .chart .bm { fill: var(--minus); }
.chart .lbl { fill: var(--vz-heading-color); font-weight: 700; font-size: 11px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal div { aspect-ratio: 1 / 1; border-radius: 4px; background: var(--sunk); font-size: .62rem; padding: 2px 3px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; color: var(--ink-2); }
.cal .wh { aspect-ratio: auto; background: transparent; text-align: center; font-weight: 600; }
.cal .p { background: color-mix(in srgb, var(--plus) 22%, var(--sunk)); color: var(--ink); }
.cal .m { background: color-mix(in srgb, var(--minus) 20%, var(--sunk)); color: var(--ink); }
.cal b { font-family: rs-num, var(--vz-body-font-family); font-size: .62rem; text-align: right; overflow: hidden; }
.tbl-n td { font-family: rs-num, var(--vz-body-font-family); }

/* 見本の切り替え（このサンプルだけ。実物には付かない） */
.smp { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000; background: var(--smp-bg); color: var(--smp-ink); border-top: 1px solid var(--smp-line); padding-block: 8px calc(8px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; gap: 10px 16px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: .8rem; }
.smp .lab { font-weight: 700; letter-spacing: .04em; }
.smp .grp { display: inline-flex; border: 1px solid var(--smp-line); border-radius: 6px; overflow: hidden; }
.smp .grp button { border: 0; background: transparent; color: var(--smp-ink); padding: 5px 10px; font-size: .8rem; display: inline-flex; align-items: center; gap: 6px; }
.smp .grp button + button { border-left: 1px solid var(--smp-line); }
.smp .grp button[aria-pressed="true"] { background: var(--smp-on); color: var(--smp-on-ink); font-weight: 700; }
.smp .dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.smp .dot.gold { background: linear-gradient(135deg, #0a1019 50%, #f7b84b 50%); } .smp .dot.red { background: linear-gradient(135deg, #1a0f12 50%, #f06548 50%); } .smp .dot.indigo { background: linear-gradient(135deg, #405189 50%, #0ab39c 50%); } .smp .dot.sky { background: linear-gradient(135deg, #0a2b3d 50%, #299cdb 50%); }
@media (max-width: 767.98px) { .smp { gap: 6px 10px; } .smp .lab { display: none; } .smp .grp button { padding: 5px 8px; } .smp .cl { display: none; } }
.toasts { bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }
@media (prefers-reduced-motion: reduce) { .pad .cb2 .ct, .est .r .t div { transition: none; } }


/* 10/30 の直し：絵のボタン4つを1段に、その下にアイコン3つ。どれも均等の幅で、指で押しやすい高さにする */
.pad4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pad3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.pad4 .cb2.pic { position: relative; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--vz-secondary-bg); color: var(--ink); min-height: 104px; padding: 8px 4px 6px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2px; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.pad4 .cb2.pic:active { background: var(--vz-primary-bg-subtle); border-color: var(--vz-primary); }
.pad4 .cb2.pic .pc { width: 46px; height: 46px; }
.pad4 .cb2.pic .pc svg { width: 100%; height: 100%; display: block; }
.pad4 .cb2.pic .ct { font-size: 1.6rem; line-height: 1; font-family: rs-num, var(--vz-body-font-family); font-weight: 700; color: var(--vz-heading-color); white-space: nowrap; transition: transform .12s; }
.pad4 .cb2.pic .ct.bump { transform: scale(1.25); color: var(--vz-primary); }
.pad4 .cb2.pic .nm { font-size: .66rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-align: center; font-size: .66rem; color: var(--ink-2); font-family: rs-num, var(--vz-body-font-family); margin-top: 3px; }
.pad3 .ib { border: 1px solid var(--line-strong); border-radius: 12px; background: transparent; color: var(--ink); min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: .7rem; }
.pad3 .ib i { font-size: 1.35rem; color: var(--vz-primary); }
.pad3 .ib:active { background: var(--vz-primary-bg-subtle); }
@media (min-width: 992px) { .pad4 .cb2.pic { min-height: 120px; } .pad4 .cb2.pic .pc { width: 54px; height: 54px; } .pad4 .cb2.pic .ct { font-size: 2rem; } }
@media (max-width: 991.98px) { .pa .padnote { display: none; } .pad4 .cb2.pic { min-height: 96px; } .pad3 .ib { min-height: 50px; } }
@media (prefers-reduced-motion: reduce) { .pad4 .cb2.pic .ct { transition: none; } }


/* 10/30 の直し2：iPhone 15 Pro（393×約660）で1画面に収める */
.chip button { border: 0; background: transparent; padding: 0 0 0 3px; color: var(--ink-2); line-height: 1; }
.play-h { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.est-l { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .74rem; color: var(--ink-2); margin-top: 8px; }
.est-l b { color: var(--vz-heading-color); font-size: .86rem; }
.effbtn { margin-left: auto; border: 0; background: transparent; color: var(--vz-link-color); font-size: .74rem; padding: 0; display: flex; align-items: center; gap: 4px; }
.est-c .hints-on { margin-top: 6px; }
@media (max-width: 991.98px) {
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .page-content { padding-bottom: 0 !important; }
  .ctog { white-space: nowrap; }
  .ctog small { overflow: hidden; text-overflow: ellipsis; }
  .pa { gap: 8px; }
  .play-h { margin-bottom: 6px; }
  .toasts { bottom: auto !important; top: 76px; }
  .pa .col-r { gap: 8px; }
  .pa .col-l { bottom: env(safe-area-inset-bottom, 0px); padding: 6px 0 4px; gap: 6px; }
  .pa .card-h { padding: .45rem .75rem; }
  .pa .est-c { padding: .5rem .75rem .45rem; }
  .pa .est { gap: 3px; }
  .pa .est .r { grid-template-columns: 40px minmax(0, 1fr) 40px; font-size: .74rem; }
  .pa .est .r .t { height: 10px; }
  .pa .est .r { line-height: 1.25; }
  .est-l { gap: 2px 8px; font-size: .7rem; }
  .est-l b { font-size: .8rem; }
  .est-l .chip { font-size: .66rem; padding: 0 5px; }
  .pa .col-l .card .cb { padding: 6px; }
  .pad4 .cb2.pic { min-height: 88px; padding: 6px 2px 4px; }
  .pad4 .cb2.pic .pc { width: 40px; height: 40px; }
  .pad4 .cb2.pic .ct { font-size: 1.45rem; }
  .pad3 { margin-top: 6px; }
  .pad3 .ib { min-height: 46px; }
  .rates { margin-top: 2px; font-size: .62rem; }
  .pa .gbar b { font-size: .98rem; }
  /* サンプルの帯はスマホでは小さく右上に出す（実物には付かない） */
  .smp { left: 8px; right: auto; bottom: auto; top: 22px; padding: 2px 8px; border-radius: 6px; font-size: .62rem; opacity: .85; border: 0; }
  .smp .lab { display: none; }
}


/* 10/30 の直し3：絵柄の色（グラデーションの端）。固定色はここに token として置く */
:root, :root[data-bs-theme="light"], :root[data-bs-theme="dark"] {
  --ic-rind-1: #2e7d32; --ic-rind-2: #1b4d1f; --ic-rind-in: #e9f5d6; --ic-rind-hi: #5fae4f;
  --ic-flesh-1: #ff6b6b; --ic-flesh-2: #d7263d; --ic-seed: #1a1210; --ic-seed-1: #4a3428;
  --ic-red-hi: #ff8a80; --ic-red: #d50f25; --ic-red-dk: #7a0613; --ic-shine: #ffffff;
  --ic-stem-1: #6b8e23; --ic-stem-2: #4e5d1c; --ic-leaf-1: #7cc04b; --ic-leaf-2: #2f7d32; --ic-leaf-vein: #cfe8b0;
  --ic-gold-hi: #ffe08a; --ic-gold: #e09b0f; --ic-gold-line: #9a6400;
  --ic-frame-1: #3a4252; --ic-frame-2: #1d222c; --ic-reel-1: #ffffff; --ic-reel-2: #d9dde3; --ic-bar: #1d222c; --ic-bar-ink: #ffffff; --ic-line: #e5484d;
  --ic-shadow: rgba(0, 0, 0, .12); --key-bg: #f7b84b; --key-line: #e0a12f; --key-ink: #2a1c00;
}
:root[data-bs-theme="dark"] { --ic-shadow: rgba(0, 0, 0, .45); --ic-frame-1: #4b5466; --ic-frame-2: #2a303c; }
.gbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pad3.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pad3 .ib.undo { color: var(--minus); border-color: color-mix(in srgb, var(--minus) 55%, var(--line)); background: color-mix(in srgb, var(--minus) 8%, transparent); }
.pad3 .ib.undo i { color: var(--minus); }
.pad3 .ib.key { background: var(--key-bg); border-color: var(--key-line); color: var(--key-ink); font-weight: 700; }
.pad3 .ib.key i { color: inherit; }
/* 高さに合わせてのび縮みする：スマホでは .pa を縦の flex にし、絵のボタンの段が残りを使う */
@media (max-width: 991.98px) {
  .pa { display: flex; flex-direction: column; }
  .pa .col-l { position: static; flex: 1; display: flex; flex-direction: column; border-top: 0; padding: 0; margin: 0; background: transparent; }
  .pa .col-l > .card { flex: 1; display: flex; flex-direction: column; }
  .pa .col-l > .card > .cb { flex: 1; display: flex; flex-direction: column; }
  .pad4 { flex: 1; grid-auto-rows: 1fr; min-height: 76px; }
  /* 背の高い端末ではボタンごと大きくする（空白を作らない）。絵と数字も一緒に大きくなる */
  .pad4 .cb2.pic { min-height: 0; height: 100%; container-type: size; justify-content: space-evenly; }
  .pad4 .cb2.pic .ct { font-size: clamp(1.45rem, 22cqh, 2.6rem); }
  .pad4 .cb2.pic .pc { width: min(72%, 84px); height: auto; aspect-ratio: 1 / 1; max-height: 44cqh; min-height: 24px; flex: 0 1 auto; }
  .pad4 .cb2.pic .pc svg { width: 100%; height: 100%; }
}


/* 10/30：タブの下線と札がくっつかないよう、札の段の上に余白を取る（Review System でも同じ症状が出たので必ず入れる） */
.play-h { margin-top: 12px; }
@media (max-width: 991.98px) { .play-h { margin-top: 10px; } }

/* 絵のグラデーションの色（CSP で style 属性を禁じているので、stop の色は class で当てる） */
.sl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.s-flesh-1 { stop-color: var(--ic-flesh-1); }
.s-flesh-2 { stop-color: var(--ic-flesh-2); }
.s-frame-1 { stop-color: var(--ic-frame-1); }
.s-frame-2 { stop-color: var(--ic-frame-2); }
.s-gold { stop-color: var(--ic-gold); }
.s-gold-hi { stop-color: var(--ic-gold-hi); }
.s-leaf-1 { stop-color: var(--ic-leaf-1); }
.s-leaf-2 { stop-color: var(--ic-leaf-2); }
.s-red { stop-color: var(--ic-red); }
.s-red-dk { stop-color: var(--ic-red-dk); }
.s-red-hi { stop-color: var(--ic-red-hi); }
.s-reel-1 { stop-color: var(--ic-reel-1); }
.s-reel-2 { stop-color: var(--ic-reel-2); }
.s-rind-1 { stop-color: var(--ic-rind-1); }
.s-rind-2 { stop-color: var(--ic-rind-2); }
.s-seed { stop-color: var(--ic-seed); }
.s-seed-1 { stop-color: var(--ic-seed-1); }
.s-stem-1 { stop-color: var(--ic-stem-1); }
.s-stem-2 { stop-color: var(--ic-stem-2); }

/* ---- 本番（段0〜2）で足したもの ---- */
/* 10/30 矢吹さんの指定：スクロールバーで画面幅が変わらないよう、バーは出さない（スクロールはできる） */
html, body, .sheet, .table-responsive, #scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, .sheet::-webkit-scrollbar, .table-responsive::-webkit-scrollbar, #scrollbar::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* 10/30 矢吹さんの指定：ゲーム数の帯は3等分、ラベルと数字は中央、数字は大きめで後ろに小さく G */
.gbar.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gbar.g3 button { text-align: center; padding: .4rem .3rem; }
.gbar.g3 span { font-size: .68rem; }
.gbar.g3 b { font-size: 1.45rem; line-height: 1.15; white-space: nowrap; }
.gbar.g3 b small { font-size: .62em; font-weight: 600; color: var(--ink-2); }
.play-h { align-items: center; }
.play-h .grow { flex: 1; }
.play-h .btn { padding: .2rem .55rem; font-size: .78rem; }
.mchip { cursor: pointer; }
.pg-h { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 10px; }
.pg-h h4 { margin: 0; font-size: 1.05rem; }
.empty { text-align: center; padding: 28px 16px; color: var(--ink-2); }
.empty .ic { display: block; margin-bottom: 6px; color: var(--vz-primary); }
.sheet.wide { max-width: 640px; }
.hrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.hrow small, .hl button small { display: block; color: var(--ink-2); }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.fgrid label { display: grid; gap: 4px; font-size: .78rem; color: var(--ink-2); font-weight: 600; }
.fgrid .span2 { grid-column: 1 / -1; }
/* iPhone は 16px 未満の入力欄に触れると画面を拡大するので、入力欄は 16px にする */
.fgrid .form-control, .fgrid .form-select { font-size: 16px; }
.keys .ok, .keys .plus1k { grid-column: 1 / -1; }
.pad3.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.unk { color: var(--ink-2); font-style: normal; }
.gate-note { font-size: .78rem !important; margin: 10px 0 0 !important; }
.gate .logo-text { color: var(--vz-heading-color); font-size: 1.3rem; }
.gtabs a { text-decoration: none; }
a.mc { color: inherit; text-decoration: none; }
.top-logo { text-decoration: none; }
/* スマホでは札と「打ち終える」を1行に収める（2行になると実戦の画面が 15 Pro に収まらない） */
.play-h { flex-wrap: nowrap; min-width: 0; }
.play-h .chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.play-h .endb { flex: 0 0 auto; }
@media (max-width: 575.98px) { .play-h .endb .lbl { display: none; } }
.srcl { display: grid; gap: 8px; }
.srcl > div { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.srcl small { display: block; color: var(--ink-2); }
.ltabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ltabs::-webkit-scrollbar { display: none; }
.ltabs .nav-link { white-space: nowrap; }

/* ---- step2（10/30 実機で使い込んだあとの直し） ---- */
:root, :root[data-bs-theme="light"] {
  /* 実機の上部パネル風の表示。白黒どちらでも黒い盤にする（台のパネルに似せるため） */
  --lcd-bg: #06080c; --lcd-bg-2: #0f141c; --lcd-line: #262f3d; --lcd-lb: #9aa6b8; --lcd-ghost: rgba(255, 255, 255, .06);
  --lcd-g: #ff4b4b; --lcd-c: #ffb020; --lcd-z: #3dff8a; --lcd-a: #3cd2ff;
  --lcd-frame: linear-gradient(135deg, #f7b84b 0%, #f06548 35%, #c2185b 65%, #3cd2ff 100%);
  /* 「終了画面」ボタン。ほかのボタンと取り違えないよう、ここだけ紫〜桃の色にする */
  --es-1: #7b2ff7; --es-2: #d6249f; --es-ink: #ffffff; --es-glow: rgba(214, 36, 159, .35);
  /* 立体のボタン */
  --b3-top: #ffffff; --b3-bot: #e8ecf1; --b3-edge: #b4bdca; --b3-hl: rgba(255, 255, 255, .9); --b3-line: #c9d0da;
  --key-bot: #e9a531; --key-edge: #a86f10;
}
:root[data-bs-theme="dark"] {
  --b3-top: #2c3544; --b3-bot: #1b222c; --b3-edge: #07090d; --b3-hl: rgba(255, 255, 255, .10); --b3-line: #3a4556;
  --key-bot: #e0a12f; --key-edge: #7a4f06;
}
.play-h .endscr { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 8px; padding: .32rem .8rem; font-size: .86rem; font-weight: 800; letter-spacing: .04em;
  color: var(--es-ink); background: linear-gradient(135deg, var(--es-1), var(--es-2)); box-shadow: 0 2px 10px var(--es-glow); }
.play-h .endscr i { font-size: 1.05rem; }
.play-h .endscr:active { transform: translateY(1px); filter: brightness(.95); }

.lcd { display: grid; grid-template-columns: 1.25fr 1.25fr .8fr .8fr; width: 100%; padding: 3px; border: 0; border-radius: 12px; background: var(--lcd-frame); text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); }
.lcd .lc { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 6px 4px 7px; background: linear-gradient(180deg, var(--lcd-bg-2), var(--lcd-bg)); border-right: 1px solid var(--lcd-line); }
.lcd .lc:first-child { border-radius: 9px 0 0 9px; }
.lcd .lc:last-child { border-right: 0; border-radius: 0 9px 9px 0; }
.lcd .ll { font-size: .66rem; font-weight: 700; letter-spacing: .08em; color: var(--lcd-lb); white-space: nowrap; }
.lcd b { position: relative; display: block; font-family: rs-num, var(--vz-body-font-family); font-weight: 800; font-size: 2rem; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
/* 光っていない桁（8 の影）を後ろに薄く出して、7セグの表示に似せる */
.lcd b::before { content: attr(data-ghost); position: absolute; right: 0; top: 0; color: var(--lcd-ghost); text-shadow: none; z-index: 0; }
.lcd .g b { color: var(--lcd-g); text-shadow: 0 0 8px var(--lcd-g), 0 0 18px color-mix(in srgb, var(--lcd-g) 50%, transparent); }
.lcd .c b { color: var(--lcd-c); text-shadow: 0 0 8px var(--lcd-c), 0 0 18px color-mix(in srgb, var(--lcd-c) 50%, transparent); }
.lcd .z b { color: var(--lcd-z); text-shadow: 0 0 8px var(--lcd-z), 0 0 18px color-mix(in srgb, var(--lcd-z) 45%, transparent); }
.lcd .a b { color: var(--lcd-a); text-shadow: 0 0 8px var(--lcd-a), 0 0 18px color-mix(in srgb, var(--lcd-a) 45%, transparent); }
.lcd .sb { font-size: .58rem; color: var(--lcd-lb); white-space: nowrap; }
.lcd .c.near b { animation: lcdblink 1s steps(2, start) infinite; }
@keyframes lcdblink { to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .lcd .c.near b { animation: none; } }
@media (min-width: 992px) { .lcd b { font-size: 2.4rem; } .lcd .lc { padding: 10px 6px; } }

/* 見込みの棒は短くし、設定ごとの CZ・AT の確率を右に並べる */
.est.e5 .r { grid-template-columns: 40px minmax(0, 1fr) 34px 50px 50px; gap: 6px; }
.est.e5 .r .q { text-align: right; font-family: rs-num, var(--vz-body-font-family); color: var(--ink); font-size: .72rem; white-space: nowrap; }
.est.e5 .r.hd { font-size: .62rem; color: var(--ink-2); line-height: 1; }
.est.e5 .r.hd .q { color: var(--ink-2); font-weight: 700; font-size: .62rem; }
.est.e5 .r.top .q { color: var(--vz-heading-color); font-weight: 700; }
.est.e5 .r.me { border-top: 1px dashed var(--line); padding-top: 3px; margin-top: 1px; }
.est.e5 .r.me .t { background: transparent; height: auto; font-size: .64rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.est.e5 .r.me .q { color: var(--vz-primary); font-weight: 700; }
@media (max-width: 991.98px) { .pa .est.e5 .r { grid-template-columns: 38px minmax(0, 1fr) 32px 48px 48px; } .pa .est.e5 .r.hd { font-size: .6rem; } }

/* 子役のボタンを立体に。押すと沈む */
.pad4 { gap: 10px 8px; padding-bottom: 4px; }
.pad4.p3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pad4 .cb2.pic { border: 1px solid var(--b3-line); border-radius: 14px; background: linear-gradient(180deg, var(--b3-top), var(--b3-bot));
  box-shadow: inset 0 1px 0 var(--b3-hl), 0 4px 0 var(--b3-edge), 0 7px 12px var(--ic-shadow); transition: transform .06s, box-shadow .06s; }
.pad4 .cb2.pic:active { transform: translateY(3px); background: linear-gradient(180deg, var(--b3-bot), var(--b3-top)); border-color: var(--vz-primary); box-shadow: inset 0 1px 0 var(--b3-hl), 0 1px 0 var(--b3-edge), 0 2px 4px var(--ic-shadow); }
.pad4 .cb2.pic .rt { position: absolute; top: 4px; right: 6px; font-size: .58rem; color: var(--ink-2); font-family: rs-num, var(--vz-body-font-family); line-height: 1; }
.padc .cb { padding-bottom: 8px; }
@media (max-width: 991.98px) { .pad4 .cb2.pic .pc { max-height: 40cqh; } .pad4.p3 .cb2.pic .pc { max-height: 38cqh; } }
@media (min-width: 992px) { .padnote { display: block; } }

/* 最下部のボタン1つ：データ入力 */
.dinb { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; border: 1px solid var(--key-line); border-radius: 14px; color: var(--key-ink); font-weight: 800; font-size: 1.08rem;
  background: linear-gradient(180deg, var(--key-bg), var(--key-bot)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 0 var(--key-edge), 0 7px 12px var(--ic-shadow); transition: transform .06s, box-shadow .06s; }
.dinb i { font-size: 1.5rem; }
.dinb span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.dinb small { font-size: .66rem; font-weight: 600; opacity: .85; }
.dinb:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 0 var(--key-edge); }
.dinw { position: sticky; bottom: 10px; margin-top: 14px; }
.pa .col-l { gap: 10px; }
@media (max-width: 991.98px) { .pa .col-l { padding-bottom: 6px; } }

/* データ入力の窓 */
.dtabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 3px; margin-bottom: 12px; border-radius: 10px; background: var(--sunk); }
.dtabs button { display: flex; flex-direction: column; align-items: center; gap: 1px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-size: .74rem; font-weight: 700; padding: 6px 2px; }
.dtabs button i { font-size: 1.15rem; }
.dtabs button[aria-selected="true"] { background: var(--vz-secondary-bg); color: var(--vz-heading-color); box-shadow: 0 1px 3px var(--ic-shadow); }
.dtabs button[aria-selected="true"] i { color: var(--vz-primary); }
.fsel.f3 button { text-align: center; }
.fsel.f3 button b { font-size: 1.3rem; }
.msel { display: grid; gap: 4px; font-size: .78rem; color: var(--ink-2); font-weight: 600; margin-bottom: 8px; }
.msel .form-select { font-size: 16px; }
.seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.seg2 button { border: 1px solid var(--line-strong); border-radius: 10px; background: transparent; color: var(--ink); font-weight: 800; padding: 8px; font-size: .95rem; }
.seg2 button[aria-pressed="true"] { background: var(--btn-edit); border-color: var(--btn-edit); color: var(--btn-edit-ink, #fff); }
.hitg { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 10px; margin-bottom: 8px; }
.hitg span { font-size: .78rem; color: var(--ink-2); font-weight: 600; }
.hitg b { font-size: 1.6rem; font-family: rs-num, var(--vz-body-font-family); color: var(--vz-heading-color); }
.hitg b small { font-size: .55em; color: var(--ink-2); }
.trig { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 10px; }
.trig button { border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--ink); font-size: .74rem; padding: 3px 10px; }
.trig button[aria-pressed="true"] { border-color: var(--vz-primary); background: var(--vz-primary-bg-subtle); color: var(--vz-primary-text-emphasis, var(--vz-primary)); font-weight: 700; }
.invd { display: grid; justify-items: center; gap: 2px; padding: 12px; border-radius: 12px; background: var(--sunk); margin-bottom: 10px; }
.invd span { font-size: .78rem; color: var(--ink-2); font-weight: 600; }
.invd b { font-size: 2.4rem; line-height: 1.1; font-family: rs-num, var(--vz-body-font-family); color: var(--vz-heading-color); }
.invd small { font-size: .72rem; color: var(--ink-2); }
.invb { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.invb button { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 64px; border: 1px solid var(--b3-line); border-radius: 14px; color: var(--ink); font-weight: 800; font-size: 1rem;
  background: linear-gradient(180deg, var(--b3-top), var(--b3-bot)); box-shadow: inset 0 1px 0 var(--b3-hl), 0 4px 0 var(--b3-edge); }
.invb button.big { font-size: 1.35rem; color: var(--key-ink); border-color: var(--key-line); background: linear-gradient(180deg, var(--key-bg), var(--key-bot)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 0 var(--key-edge); }
.invb button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--b3-edge); }
.endsum { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 8px 10px; border-radius: 10px; background: var(--sunk); font-size: .78rem; color: var(--ink-2); margin-bottom: 10px; }
.endsum b { color: var(--vz-heading-color); }
.keys .ok { min-height: 52px; }

/* 示唆の一覧（機種の詳細と、実戦の「終了画面」の窓） */
.sk-h { font-size: .78rem; color: var(--ink-2); margin: 12px 0 6px; }
.sk-h:first-child { margin-top: 0; }
.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 6px; }
.scard { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "th tx ln" "th ac ac"; gap: 2px 8px; align-items: center; width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink); text-align: left; }
button.scard:active { border-color: var(--vz-primary); background: var(--vz-primary-bg-subtle); }
.scard .th { grid-area: th; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 8px; background: var(--sunk); color: var(--ink-2); font-size: 1.3rem; overflow: hidden; border: 0; padding: 0; }
.scard .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scard .tx { grid-area: tx; min-width: 0; }
.scard .tx b { display: block; font-size: .84rem; line-height: 1.25; }
.scard .tx small { display: block; font-size: .72rem; color: var(--ink-2); }
.scard .ef { grid-area: ln; }
.scard .sact { grid-area: ac; display: flex; gap: 4px; }
.scard .sact .btn { padding: .1rem .5rem; font-size: .72rem; }
button.scard { grid-template-areas: "th tx ln"; }
.bigimg { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 8px; }
/* 15 Pro に収めるための詰め（step2）。実戦の行は押すと要素の一覧を開くボタン */
.est.e5 { gap: 2px; }
.est.e5 .r { line-height: 1.2; }
.est.e5 button.r.me { width: 100%; border: 0; border-top: 1px dashed var(--line); background: transparent; color: inherit; padding: 4px 0 0; text-align: left; font: inherit; font-size: inherit; }
.est.e5 .r.me .l { display: inline-flex; align-items: center; gap: 1px; color: var(--vz-link-color); white-space: nowrap; }
.est.e5 .r.me .t { grid-column: 2 / 4; font-size: .62rem; }
.est.e5 .r.me .t b { color: var(--vz-heading-color); }
.est.e5 .r.me .p { display: none; }
.play-h .endscr .cnt { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--es-ink); color: var(--es-2); font-size: .7rem; }
.lcd b::before { color: var(--lcd-ghost); }
@media (max-width: 991.98px) {
  .pa .est-c { padding: .4rem .7rem .35rem; }
  .pa .est.e5 .r { font-size: .7rem; }
  .lcd .lc { padding: 4px 3px 5px; }
  .lcd b { font-size: 1.8rem; }
  .dinb { min-height: 50px; }
}
.est.e5 button.r.me { font-size: .72rem; }
@media (max-width: 991.98px) { .pa .est.e5 button.r.me { font-size: .7rem; } }
/* 特殊役で2段になったときはボタンの背が低いので、絵と数字を横に並べ、名前は省く */
@media (max-width: 991.98px) {
  .pad4.p3 .cb2.pic { flex-direction: row; justify-content: center; gap: 8px; padding: 4px 6px; }
  .pad4.p3 .cb2.pic .pc { width: auto; height: min(76%, 60px); max-height: none; aspect-ratio: 1 / 1; }
  .pad4.p3 .cb2.pic .nm { display: none; }
  .pad4.p3 .cb2.pic .ct { font-size: clamp(1.3rem, 46cqh, 2.4rem); }
}
/* データ入力の窓が 15 Pro に収まるよう、数字キーを少し低くする */
@media (max-width: 991.98px) { .sheet .keys button { min-height: 48px; } .sheet .keys .ok { min-height: 50px; } .trig { margin-bottom: 8px; } .hitg { padding: 4px 10px; } .hitg b { font-size: 1.4rem; } }
/* 計算のしくみ（要素ごとの見込み） */
.calc { margin-top: 8px; }
.calc-t { font-size: .7rem; }
.calc-t th, .calc-t td { padding: 3px 4px; text-align: right; white-space: nowrap; font-family: rs-num, var(--vz-body-font-family); }
.calc-t th:first-child { text-align: left; white-space: normal; font-family: inherit; }
.calc-t th small { display: block; font-weight: 400; color: var(--ink-2); font-size: .62rem; }
.calc-t td.best { color: var(--vz-primary); font-weight: 800; }
.calc-t tr.sum th, .calc-t tr.sum td { border-top: 2px solid var(--line-strong); font-weight: 800; color: var(--vz-heading-color); }
@media (max-width: 991.98px) { .pad4.p3 .cb2.pic .rt { top: auto; bottom: 3px; right: 0; left: 0; text-align: center; } }