/* ========= だれでも海外旅行 — デザイン「駅のサイン」＋ポップ（旅する割り勘と同じ）=========
 * 紺(駅名標) / 黄(点字ブロック) に、ピンク・水色・ミントの差し色。縁取り＋ずらした影の「ステッカー」風。
 * スマホ専用。幅は 360〜430px を基準に、広い画面では中央に細く表示する。
 */
:root{
  --ink:#16223D; --ink-2:#22325A; --yellow:#FFD11A; --yellow-d:#D9A900;
  --pink:#FF9EC0; --sky:#93D5FF; --mint:#8FE6C2; --pink-t:#FFE3EE; --sky-t:#E1F3FF; --mint-t:#DDF8EC; --yellow-t:#FFF6CC;
  --field:#E9EEF3; --paper:#FFFFFF; --line:#D3DBE6; --line-2:#C0CAD9; --muted:#55627D; --text:#16223D;
  --ok:#157A4A; --ng:#C4381F;
  --r-sheet:22px; --r-field:12px; --r-btn:14px;
  --font-jp:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic Medium","Meiryo",sans-serif;
  --font-tgt:system-ui,-apple-system,"Segoe UI","Noto Sans","Noto Sans Thai","Noto Sans KR","Noto Sans SC","Noto Sans TC","Hiragino Sans","PingFang TC","PingFang SC","Apple SD Gothic Neo","Thonburi",Roboto,Arial,sans-serif;
  --out-scale:1;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; touch-action:manipulation}   /* ダブルタップで拡大しない（連打しても拡大・ズームが起きない） */
button,a,.scene,.tab,.phrase,.chip,.opt,.lang-item,.rv-item,.out-tool,.set-btn,.reply-btn{touch-action:manipulation; -webkit-user-select:none; -webkit-touch-callout:none}
html,body{margin:0}
body{
  font-family:var(--font-jp); font-size:16px; line-height:1.7; color:var(--text); background-color:var(--field); overflow-x:hidden; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(22,34,61,.09) 1.6px, transparent 1.7px); background-size:20px 20px;
  -webkit-tap-highlight-color:transparent;
}
body.is-locked{overflow:hidden}
h1,h2,h3,p{margin:0}
button{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--ink); outline-offset:2px; border-radius:6px}
.sr-only{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.tgt{font-family:var(--font-tgt)}
.wrap{max-width:560px; margin:0 auto; padding:0 14px 40px}

/* ===== マストヘッド ===== */
.masthead{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0 8px}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:700; font-size:1.125rem}
.brand svg{flex:none}
.help-btn{min-height:40px; padding:6px 14px; border:2px solid var(--ink); border-radius:999px; background:#fff; color:var(--ink); font-weight:700; font-size:.875rem; cursor:pointer}

/* ===== ボタン共通 ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:10px 18px; font-size:1rem; font-weight:700; line-height:1.25;
  color:var(--ink); background:var(--yellow); border:2px solid var(--ink); border-radius:var(--r-btn); cursor:pointer; box-shadow:0 4px 0 var(--ink); transition:transform .08s, box-shadow .08s;
}
.btn:active{transform:translateY(4px); box-shadow:0 0 0 var(--ink)}
.btn-white{background:#fff}
.btn-ink{background:var(--ink); color:#fff; box-shadow:0 4px 0 #000}
.btn-sm{min-height:42px; padding:6px 12px; font-size:.9375rem}

/* ===== 言語バー ===== */
.langbar{display:flex; align-items:center; gap:10px; margin:2px 0 12px}
.langbar-label{font-size:.8125rem; font-weight:700; color:var(--muted); line-height:1.3; flex:none}
.lang-pick{flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:52px; padding:8px 14px; background:#fff; border:2px solid var(--ink); border-radius:var(--r-btn); box-shadow:3px 3px 0 var(--sky); font-size:1.0625rem; font-weight:700; cursor:pointer; text-align:left}
.lang-pick .flag{font-size:1.5rem; line-height:1}
.lang-pick .lname{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lang-pick .lname small{font-size:.75rem; font-weight:500; color:var(--muted); margin-left:6px}
.lang-pick .caret{flex:none; font-size:.875rem}

/* ===== 設定の行 ===== */
.setrow{display:flex; gap:8px; margin:0 0 10px}
.set-btn{min-height:38px; padding:4px 14px; border:2px solid var(--ink); border-radius:999px; background:#fff; font-size:.875rem; font-weight:700; cursor:pointer}
.set-btn[aria-pressed="true"]{background:var(--yellow)}

/* ===== 出力（相手の言葉）===== */
.out{position:sticky; top:0; z-index:30; margin:0 -14px 12px; padding:0 14px}
.out-card{background:var(--ink); color:#fff; border:2px solid var(--ink); border-radius:var(--r-sheet); box-shadow:0 6px 0 var(--yellow); overflow:hidden}
.out-head{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px 6px; background:var(--ink-2)}
.out-label{font-size:.875rem; font-weight:700; color:var(--yellow); display:flex; align-items:center; gap:6px; min-width:0}
.out-label .to{color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.out-tools{display:flex; gap:6px; flex:none}
.out-tool{min-width:38px; min-height:34px; padding:2px 8px; border:1.5px solid rgba(255,255,255,.5); border-radius:999px; background:transparent; color:#fff; font-size:.8125rem; font-weight:700; cursor:pointer}
.out-tool[aria-pressed="true"]{background:var(--yellow); color:var(--ink); border-color:var(--yellow)}
.out-body{padding:10px 14px 12px; max-height:min(30vh, 260px); overflow-y:auto; overscroll-behavior:contain}
.out-empty{padding:14px 4px; color:#C7D0E4; font-size:1rem; line-height:1.6; text-align:center}
.out-empty b{color:var(--yellow)}
.oi + .oi{margin-top:12px; padding-top:12px; border-top:1px dashed rgba(255,255,255,.35)}
.oi-t{font-family:var(--font-tgt); font-weight:700; font-size:calc(1.6rem * var(--out-scale)); line-height:1.38; word-break:break-word; overflow-wrap:anywhere}
.oi-k{margin-top:6px; color:var(--yellow); font-size:calc(1.0625rem * var(--out-scale)); font-weight:700; line-height:1.5}
.oi-k::before{content:"🗣 "; font-weight:400}
.oi-ja{margin-top:4px; color:#C7D0E4; font-size:.9375rem; line-height:1.5}
.oi-ja::before{content:"意味: "; font-size:.75rem}
.out-foot{display:flex; align-items:stretch; gap:8px; padding:8px 10px 10px; background:var(--ink-2)}
.seg-self{flex:0 0 38%; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:54px; padding:4px 6px; border-radius:var(--r-btn); background:#fff; color:var(--ink); border:2px solid #fff; font-weight:700; font-size:.9375rem; line-height:1.25; text-align:center}
.seg-self small{font-size:.6875rem; font-weight:500; color:var(--muted)}
.reply-btn{flex:1; min-width:0; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:54px; padding:4px 8px; border-radius:var(--r-btn); border:2px solid #fff; background:var(--pink); color:var(--ink); font-weight:900; cursor:pointer; animation:blink 1s steps(1,end) infinite; text-align:center}
.reply-btn .r-main{font-family:var(--font-tgt); font-size:1rem; line-height:1.25}
.reply-btn .r-sub{font-family:var(--font-tgt); font-size:.75rem; font-weight:700; line-height:1.25}
.reply-btn .r-ja{font-size:.6875rem; font-weight:500}
.reply-btn[disabled]{animation:none; opacity:.45; cursor:not-allowed}
@keyframes blink{0%,100%{background:var(--pink); transform:scale(1)} 50%{background:var(--yellow); transform:scale(1.025)}}
@media (prefers-reduced-motion: reduce){ .reply-btn{animation:none} }

/* ===== シーン選択 ===== */
.sec-title{font-size:.9375rem; font-weight:700; color:var(--ink); margin:14px 0 8px; display:flex; align-items:center; gap:8px}
.sec-title::before{content:""; width:12px; height:12px; border-radius:50%; background:#fff; border:3px solid var(--ink); box-shadow:inset 0 0 0 0 var(--yellow); flex:none}
.scenes{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.scene{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:68px; padding:6px 2px; background:#fff; border:2px solid var(--ink); border-radius:16px; cursor:pointer; font-weight:700; font-size:.8125rem; line-height:1.2; text-align:center; box-shadow:0 3px 0 var(--ink)}
.scene .ico{font-size:1.625rem; line-height:1.1}
.scene[aria-pressed="true"]{background:var(--yellow); box-shadow:0 3px 0 var(--ink), 0 0 0 3px var(--ink)}
.scene:active{transform:translateY(3px); box-shadow:none}

/* ===== 言葉のボタン ===== */
.recent{margin-top:12px}
.recent-row{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px; margin:0 -2px; -webkit-overflow-scrolling:touch}
.chip{flex:none; max-width:78vw; min-height:44px; padding:6px 14px; border-radius:999px; border:2px solid var(--ink); background:var(--mint-t); font-size:.9375rem; font-weight:700; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tabs{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 12px}
.tab{min-height:44px; padding:6px 16px; border-radius:999px; border:2px solid var(--ink); background:#fff; font-size:.9375rem; font-weight:700; cursor:pointer}
.tab[aria-pressed="true"]{background:var(--ink); color:#fff}
.tab small{font-weight:500; opacity:.7; margin-left:3px}
.phrases{display:grid; gap:10px}
.phrase{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:62px; padding:12px 14px 12px 16px; background:#fff; border:2px solid var(--ink); border-radius:16px; box-shadow:0 4px 0 var(--sky); text-align:left; font-size:1.125rem; font-weight:700; line-height:1.45; cursor:pointer; word-break:break-word}
.phrase:active{transform:translateY(4px); box-shadow:0 0 0 var(--ink)}
.phrase .go{flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--yellow); border:2px solid var(--ink); font-size:.875rem}
.phrase.has-slot .go{background:var(--pink)}
.phrase .p-ja .slot{display:inline-block; min-width:2.2em; padding:0 6px; margin:0 2px; border-bottom:3px solid var(--pink); color:var(--ink-2); font-weight:900; text-align:center}
.paren{font-size:.8125rem; font-weight:500; color:var(--muted)}

/* ===== 下から出るシート（部品の選択・言語・使い方）===== */
.backdrop{position:fixed; inset:0; z-index:60; background:rgba(22,34,61,.55); display:none; align-items:flex-end; justify-content:center}
.backdrop.show{display:flex}
.sheet{width:100%; max-width:560px; max-height:88vh; overflow-y:auto; background:#fff; border:2px solid var(--ink); border-bottom:0; border-radius:24px 24px 0 0; padding:16px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow:0 -4px 0 var(--yellow); overscroll-behavior:contain}
.sheet-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.sheet-head h2{font-size:1.125rem}
.sheet-x{min-height:40px; padding:4px 14px; border:2px solid var(--ink); border-radius:999px; background:#fff; font-weight:700; cursor:pointer}
.pv{margin:2px 0 12px; padding:12px 14px; background:var(--yellow-t); border:2px dashed var(--ink); border-radius:14px; font-size:1.0625rem; font-weight:700; line-height:1.6}
.pv .blank{display:inline-block; min-width:2.4em; border-bottom:3px solid var(--ink); text-align:center; color:var(--muted)}
.pv .fill{color:var(--ink); background:var(--pink-t); border-radius:6px; padding:0 4px}
.slot-title{font-size:.875rem; font-weight:700; color:var(--muted); margin:12px 0 6px}
.opts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.opts.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
.opts.cols4{grid-template-columns:repeat(4,minmax(0,1fr))}
.opt{min-height:54px; padding:8px 10px; background:#fff; border:2px solid var(--ink); border-radius:14px; font-size:1.0625rem; font-weight:700; line-height:1.3; cursor:pointer; box-shadow:0 3px 0 var(--ink); word-break:break-word}
.opt:active{transform:translateY(3px); box-shadow:none}
.opt.on{background:var(--yellow)}
.lang-list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.lang-item{display:flex; align-items:center; gap:12px; width:100%; min-height:58px; padding:8px 14px; background:#fff; border:2px solid var(--ink); border-radius:14px; cursor:pointer; font-size:1.125rem; font-weight:700; text-align:left; box-shadow:0 3px 0 var(--ink)}
.lang-item .flag{font-size:1.75rem; line-height:1}
.lang-item small{display:block; font-size:.75rem; font-weight:500; color:var(--muted)}
.lang-item[aria-current="true"]{background:var(--yellow)}
.lang-item .tick{margin-left:auto}
.help-body{font-size:1rem; line-height:1.75}
.help-body ol{padding-left:1.3em; margin:8px 0 12px}
.help-body li{margin:6px 0}
.help-body .note{margin-top:12px; padding:10px 12px; background:var(--sky-t); border-radius:12px; font-size:.9375rem}

/* ===== 使い方（説明書）===== */
.manual{position:fixed; inset:0; z-index:70; background:var(--field); overflow-y:auto; display:none; -webkit-overflow-scrolling:touch; background-image:radial-gradient(rgba(22,34,61,.09) 1.6px, transparent 1.7px); background-size:20px 20px}
.manual.show{display:block}
.manual-in{max-width:560px; margin:0 auto; padding:12px 16px calc(36px + env(safe-area-inset-bottom))}
.mn-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px}
.mn-top h2{font-size:1.375rem}
.mn-lead{font-size:1.125rem; font-weight:700; line-height:1.7; margin:6px 0 16px}
.mn-step{position:relative; margin:0 0 18px; padding:18px 16px 16px; background:#fff; border:2px solid var(--ink); border-radius:var(--r-sheet); box-shadow:5px 5px 0 var(--sky)}
.mn-step-hot{box-shadow:5px 5px 0 var(--pink)}
.mn-no{position:absolute; top:-14px; left:14px; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--yellow); border:2px solid var(--ink); font-size:1.375rem; font-weight:900; box-shadow:0 3px 0 var(--ink)}
.mn-step h3{font-size:1.3125rem; margin:10px 0 10px 40px; line-height:1.4}
.mn-step p{font-size:1.125rem; line-height:1.75; margin-top:10px}
.mn-step p b{background:linear-gradient(transparent 60%, var(--yellow) 60%)}
.mn-sub{font-size:1rem!important; color:var(--muted)}
.mn-fig{margin-top:6px; padding:12px; background:var(--field); border-radius:14px; display:grid; gap:8px; justify-items:center}
.mn-arrow{font-size:1.5rem; line-height:1}
.mock-lang,.mock-phrase,.mock-out,.mock-reply,.mock-scenes span{font-family:var(--font-jp)}
.mock-lang{display:flex; align-items:center; gap:8px; width:100%; padding:10px 14px; background:#fff; border:2px solid var(--ink); border-radius:var(--r-btn); box-shadow:3px 3px 0 var(--sky); font-size:1.0625rem}
.mock-lang span{font-size:1.5rem}.mock-lang b{font-family:var(--font-tgt)}.mock-lang small{color:var(--muted)}.mock-lang i{margin-left:auto; font-style:normal; font-size:.875rem}
.mock-scenes{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; width:100%}
.mock-scenes span{display:block; padding:6px 2px; background:#fff; border:2px solid var(--ink); border-radius:12px; text-align:center; font-size:.75rem; font-weight:700; line-height:1.3}
.mock-scenes .on{background:var(--yellow)}
.mock-phrase{display:flex; align-items:center; justify-content:space-between; width:100%; padding:12px 14px; background:#fff; border:2px solid var(--ink); border-radius:16px; box-shadow:0 4px 0 var(--sky); font-size:1.125rem; font-weight:700}
.mock-phrase i{font-style:normal; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--yellow); border:2px solid var(--ink); font-size:.75rem}
.mock-out{width:100%; padding:12px 14px; background:var(--ink); color:#fff; border-radius:16px; box-shadow:0 5px 0 var(--yellow); text-align:left}
.mock-out b{display:block; font-family:var(--font-tgt); font-size:1.375rem; line-height:1.35}
.mock-out em{display:block; margin-top:4px; font-style:normal; color:var(--yellow); font-weight:700; font-size:1rem}
.mock-out small{display:block; margin-top:2px; color:#C7D0E4; font-size:.875rem}
.mock-reply{width:100%; padding:10px 12px; border-radius:var(--r-btn); border:2px solid var(--ink); background:var(--pink); color:var(--ink); font-family:var(--font-tgt); font-weight:900; font-size:1.0625rem; text-align:center; line-height:1.3; animation:blink 1s steps(1,end) infinite}
.mock-reply small{display:block; font-size:.8125rem; font-weight:700}
@media (prefers-reduced-motion: reduce){ .mock-reply{animation:none} }
.mock-msg{width:100%; padding:12px 14px; background:#fff; border:2px solid var(--ink); border-radius:16px; box-shadow:4px 4px 0 var(--sky); font-family:var(--font-tgt); text-align:left}
.mock-msg small{display:block; font-size:.8125rem; font-weight:700; color:var(--muted)}
.mock-msg b{display:block; font-size:1.25rem; line-height:1.4; margin-top:2px}
.mock-item{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:12px 14px; background:#fff; border:2px solid var(--ink); border-radius:16px; box-shadow:0 4px 0 var(--mint); font-family:var(--font-tgt); font-size:1.125rem; font-weight:700; text-align:left}
.mock-item i{flex:none; font-style:normal; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--mint); border:2px solid var(--ink); font-size:.75rem}
.mock-chips{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; width:100%}
.mock-chips span{display:block; padding:10px 0; background:#fff; border:2px solid var(--ink); border-radius:12px; text-align:center; font-weight:700; font-size:1.125rem}
.mock-chips .on{background:var(--yellow)}
.mock-hand{font-size:2.25rem; line-height:1.3}
.mn-h{font-size:1.25rem; margin:22px 0 10px}
.mn-qa{margin:0 0 10px; background:#fff; border:2px solid var(--ink); border-radius:16px; overflow:hidden}
.mn-qa .q{padding:10px 14px; background:var(--pink-t); font-weight:900; font-size:1.0625rem; border-bottom:2px solid var(--ink)}
.mn-qa .a{padding:10px 14px 12px; font-size:1.0625rem; line-height:1.75}
.mn-qa .a small{display:block; margin-top:4px; color:var(--muted); font-size:.9375rem}
.mn-close{width:100%; margin-top:14px; min-height:58px; font-size:1.125rem}

/* ===== 通知 ===== */
.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:90; max-width:min(92vw,520px); padding:12px 18px; background:var(--yellow); color:var(--ink); border:2px solid var(--ink); border-radius:14px; box-shadow:3px 3px 0 var(--ink); font-weight:700; font-size:.9375rem; line-height:1.5; display:none}
.toast.show{display:block}

/* ===== お店の人用の回答画面（全画面。文字は大きめ）===== */
.reply{position:fixed; inset:0; z-index:50; background:var(--field); overflow-y:auto; display:none; -webkit-overflow-scrolling:touch}
.reply.show{display:block}
.reply-in{max-width:560px; margin:0 auto; padding:0 14px calc(40px + env(safe-area-inset-bottom))}
.rv-top{position:sticky; top:0; z-index:5; margin:0 -14px; padding:10px 14px 8px; background:var(--field); border-bottom:2px solid var(--ink)}
.rv-bar{display:flex; align-items:center; justify-content:space-between; gap:10px}
.rv-bar h2{font-family:var(--font-tgt); font-size:1.25rem; line-height:1.3}
.rv-back{flex:none; min-height:48px; padding:6px 14px; border:2px solid var(--ink); border-radius:var(--r-btn); background:#fff; font-weight:900; cursor:pointer; box-shadow:0 3px 0 var(--ink); line-height:1.2; text-align:center}
.rv-back .tgt{display:block; font-size:1rem}
.rv-back small{display:block; font-size:.6875rem; font-weight:500}
.rv-result{margin-top:8px; background:var(--ink); color:#fff; border-radius:16px; padding:10px 14px; min-height:64px; max-height:34vh; overflow-y:auto; box-shadow:0 5px 0 var(--mint)}
.rv-result .cap{font-family:var(--font-tgt); font-size:.75rem; color:var(--mint); font-weight:700; margin-bottom:4px}
.rv-empty{font-family:var(--font-tgt); color:#C7D0E4; font-size:1rem}
.ri + .ri{margin-top:8px; padding-top:8px; border-top:1px dashed rgba(255,255,255,.35)}
.ri-ja{font-size:calc(1.75rem * var(--out-scale)); font-weight:900; line-height:1.4}
.ri-t{font-family:var(--font-tgt); font-size:.9375rem; color:#C7D0E4; line-height:1.45; margin-top:2px}
.rv-acts{display:flex; gap:8px; margin-top:8px}
.rv-acts .btn{flex:1; min-height:44px; font-family:var(--font-tgt); font-size:.9375rem}
.rv-explain{margin:14px 0; padding:14px; background:var(--yellow-t); border:2px solid var(--ink); border-radius:16px; font-family:var(--font-tgt)}
.rv-explain p{font-size:1.0625rem; line-height:1.6; font-weight:700}
.rv-steps{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; font-size:1.0625rem; font-weight:700}
.rv-steps li{display:flex; gap:10px; align-items:flex-start}
.rv-steps .no{flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:#fff; font-size:.9375rem}
.rv-msg{margin:12px 0; padding:12px 14px; background:#fff; border:2px solid var(--ink); border-radius:16px; box-shadow:4px 4px 0 var(--sky); font-family:var(--font-tgt)}
.rv-msg .cap{font-size:.8125rem; font-weight:700; color:var(--muted)}
.rv-msg .t{font-size:calc(1.375rem * var(--out-scale)); font-weight:700; line-height:1.4; margin-top:2px}
.rv-msg .t + .t{margin-top:6px; padding-top:6px; border-top:1px dashed var(--line-2)}
.rv-heading{font-family:var(--font-tgt); font-size:1rem; font-weight:900; margin:18px 0 8px; display:flex; align-items:center; gap:8px}
.rv-heading::before{content:""; width:12px; height:12px; border-radius:50%; background:#fff; border:3px solid var(--ink); flex:none}
.rv-list{display:grid; gap:10px}
.rv-item{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:64px; padding:12px 14px; background:#fff; border:2px solid var(--ink); border-radius:16px; box-shadow:0 4px 0 var(--mint); text-align:left; cursor:pointer; font-family:var(--font-tgt); font-size:calc(1.1875rem * var(--out-scale)); font-weight:700; line-height:1.4; word-break:break-word}
.rv-item:active{transform:translateY(4px); box-shadow:none}
.rv-item .go{flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--mint); border:2px solid var(--ink); font-size:.875rem}
.rv-item .dots{display:inline-block; min-width:1.6em; text-align:center; border-bottom:3px solid var(--pink)}
.keypad{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px}
.keypad .opt{min-height:60px; font-size:1.5rem; font-family:var(--font-tgt)}
.kp-disp{min-height:60px; padding:10px 14px; background:#fff; border:2px solid var(--ink); border-radius:14px; font-size:2rem; font-weight:900; text-align:right; font-variant-numeric:tabular-nums; font-family:var(--font-tgt); overflow-x:auto; white-space:nowrap}

/* ===== フッター ===== */
.site-footer{margin-top:28px; text-align:center; font-size:.8125rem; color:var(--muted)}
.site-footer a{color:var(--muted)}
noscript .nojs{margin:20px 0; padding:16px; background:var(--yellow); border:2px solid var(--ink); border-radius:14px; font-weight:700}

/* 画面が狭いスマホ（幅360px未満）*/
@media (max-width:359px){
  .scenes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .oi-t{font-size:calc(1.4rem * var(--out-scale))}
}