/* 汐鳴線 運転日誌 — 画面の部品（運転の要約・手順表・駅の結果・案内・警報・タッチのレバーとボタン・タイトルの選択） */
.g3d[data-app], .g3d { --rs-bg: rgba(8, 14, 22, .72); --rs-line: rgba(140, 200, 255, .22); }

/* ---- タイトルの選択 ---- */
.rs-sel { display: grid; gap: 8px; margin: 14px auto 6px; max-width: 560px; text-align: left; }
.rs-row { display: grid; grid-template-columns: 6.2em 1fr; align-items: center; gap: 10px; }
.rs-row__k { font-size: 13px; font-weight: 700; opacity: .8; }
.rs-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-seg button { appearance: none; border: 1px solid rgba(255,255,255,.22); background: rgba(10,16,24,.55); color: #fff; font: 700 13.5px/1 var(--g3d-font, inherit); padding: 9px 12px; border-radius: 999px; cursor: pointer; min-height: 38px; }
.rs-seg button[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: #04121c; }
.rs-seg button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rs-sel__info { margin: 4px 0 0; font-size: 13px; line-height: 1.6; opacity: .88; text-align: center; }
.rs-sel__info b { color: var(--accent); }
.rs-sel__car { display: inline-block; font-size: 12.5px; opacity: .85; margin-bottom: 2px; }

/* ---- 左上: 運転の要約 ---- */
.rs-status { position: absolute; top: calc(58px + env(safe-area-inset-top)); left: calc(14px + env(safe-area-inset-left)); display: grid; grid-template-columns: auto auto auto; grid-template-areas: "spd lim notch" "next next next" "clock clock clock"; gap: 6px 8px; padding: 10px 12px; border-radius: 12px; background: var(--rs-bg); border: 1px solid var(--rs-line); color: #eef6ff; font-feature-settings: "tnum"; min-width: 250px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.rs-speed { grid-area: spd; display: flex; align-items: baseline; gap: 4px; }
.rs-speed b { font-size: 34px; font-weight: 900; line-height: 1; min-width: 2.2ch; text-align: right; }
.rs-speed span { font-size: 12px; opacity: .75; }
.rs-lim { grid-area: lim; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid #f4f4ee; border-radius: 6px; padding: 2px 8px; background: #fbfaf5; color: #111; text-shadow: none; }
.rs-lim span { font-size: 10px; font-weight: 700; }
.rs-lim b { font-size: 20px; font-weight: 900; line-height: 1; }
.rs-lim.is-sig { background: #ffd25a; border-color: #ffd25a; }
.rs-lim.is-over { animation: rs-blink .5s steps(2) infinite; background: #ff4a3a; border-color: #ff4a3a; color: #fff; }
@keyframes rs-blink { 50% { opacity: .35; } }
.rs-notch { grid-area: notch; display: flex; align-items: center; justify-content: center; min-width: 54px; border-radius: 8px; background: rgba(255,255,255,.08); }
.rs-notch { flex-direction: column; gap: 1px; padding: 2px 4px; }
.rs-notch b { font-size: 22px; font-weight: 900; }
.rs-notch i { font-style: normal; font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.6); white-space: nowrap; }
.rs-notch i[data-rev="F"] { color: #5affb0; }
.rs-notch i[data-rev="R"] { color: #ffb030; }
.rs-notch[data-kind="p"] b { color: #5affb0; }
.rs-notch[data-kind="b"] b { color: #ffd25a; }
.rs-notch[data-kind="eb"] { background: #c8261e; }
.rs-next { grid-area: next; display: flex; align-items: baseline; gap: 8px; border-top: 1px solid var(--rs-line); padding-top: 6px; }
.rs-next span { font-size: 11px; opacity: .7; }
.rs-next b { font-size: 16px; font-weight: 900; }
.rs-next i { margin-left: auto; font-style: normal; font-size: 16px; font-weight: 900; color: #7dffb0; }
.rs-clock { grid-area: clock; display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.rs-clock b { font-weight: 700; opacity: .9; }
.rs-clock i { margin-left: auto; font-style: normal; font-weight: 700; color: #bcd; }
.rs-clock i[data-late="1"] { color: #ff9a7a; }

/* ---- 右上: 手順表 ---- */
.rs-steps { padding: 10px 12px 8px; border-radius: 12px; background: var(--rs-bg); border: 1px solid var(--rs-line); color: #eef6ff; width: 252px; }
.rs-steps h3 { margin: 0 0 6px; font-size: 13px; font-weight: 900; letter-spacing: .04em; color: var(--accent); }
.rs-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.rs-steps li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; opacity: .5; }
.rs-steps li i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); flex: none; }
.rs-steps li kbd { margin-left: auto; font: 700 11px/1 var(--g3d-font, inherit); padding: 3px 6px; border-radius: 5px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); }
.rs-steps li.is-ok { opacity: .75; }
.rs-steps li.is-ok i { background: #3ad07a; border-color: #3ad07a; }
.rs-steps li.is-ok i::after { content: ''; display: block; width: 4px; height: 7px; border: solid #04120a; border-width: 0 2px 2px 0; transform: translate(3px, 0) rotate(45deg); }
.rs-steps li.is-cur { opacity: 1; color: #fff; }
.rs-steps li.is-cur i { border-color: var(--accent); background: rgba(56,168,224,.35); animation: rs-pulse 1s ease-in-out infinite; }
.rs-steps li.is-ng { opacity: 1; color: #ff8a7a; }
.rs-steps li.is-ng i { background: #c8261e; border-color: #c8261e; }
@keyframes rs-pulse { 50% { box-shadow: 0 0 0 5px rgba(56,168,224,.25); } }

/* ---- 警報・案内・結果 ---- */
.rs-alarm { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); padding: 12px 26px; border-radius: 12px; background: rgba(170, 18, 10, .88); color: #fff; text-align: center; font-weight: 900; font-size: 18px; line-height: 1.5; box-shadow: 0 0 40px rgba(255, 40, 20, .5); animation: rs-blink .6s steps(2) infinite; }
.rs-alarm b { font-size: 26px; letter-spacing: .1em; margin-right: .4em; }
.rs-alarm span { font-size: 15px; }
.g3d.rs-ats::after { content: ''; position: absolute; inset: 0; z-index: 9; pointer-events: none; box-shadow: inset 0 0 120px rgba(255, 30, 10, .45); animation: rs-blink .6s steps(2) infinite; }
.rs-tutor { position: absolute; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%); width: min(calc(100vw - 600px), 640px); min-width: 300px; padding: 12px 16px; border-radius: 12px; background: rgba(6, 22, 36, .88); border: 1px solid rgba(56,168,224,.6); color: #fff; font-size: 14.5px; line-height: 1.7; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.rs-tutor b { color: #8fd8ff; }
.rs-tutor kbd { font: 700 12px/1 var(--g3d-font, inherit); padding: 3px 6px; border-radius: 5px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); }
.rs-tutor.is-in { animation: rs-up .4s ease both; }
@keyframes rs-up { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.rs-card { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); min-width: 260px; padding: 14px 18px; border-radius: 14px; background: rgba(250, 248, 240, .95); color: #18202a; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.rs-card.is-in { animation: rs-up .35s ease both; }
.rs-card h4 { margin: 0 0 6px; font-size: 16px; font-weight: 900; }
.rs-card__big { margin: 4px 0 8px; font-size: 34px; font-weight: 900; }
.rs-card__big small { font-size: 16px; margin-left: 2px; }
.rs-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rs-card__grid.is-4 { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rs-card__grid div { display: flex; flex-direction: column; gap: 2px; }
.rs-card__grid span { font-size: 11px; color: #5a6670; font-weight: 700; }
.rs-card__grid b { font-size: 20px; font-weight: 900; }
.rs-card__grid i { font-style: normal; font-size: 12px; color: #5a6670; }
.rs-card__notes { margin: 8px 0 0; font-size: 12px; color: #a0302a; font-weight: 700; }
.rs-stamp { display: inline-block; font-style: normal; font-size: 18px; color: #c8261e; border: 3px solid #c8261e; border-radius: 8px; padding: 2px 8px; transform: rotate(-8deg); margin-left: 8px; vertical-align: middle; }
/* 短い知らせは左の要約の下に出す（前面窓の運転視界に重ねない） */
.rs-pops { position: absolute; left: calc(14px + env(safe-area-inset-left)); top: calc(206px + env(safe-area-inset-top)); display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: min(34vw, 320px); pointer-events: none; }
.rs-pop { padding: 6px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 700; background: rgba(10,13,18,.8); color: #fff; border: 1px solid rgba(255,255,255,.18); animation: rs-pop 2.6s ease both; text-align: center; }
.rs-pop.is-bad { background: rgba(150, 24, 16, .88); }
.rs-pop.is-warn { background: rgba(140, 92, 10, .88); }
.rs-pop.is-good { background: rgba(20, 110, 60, .88); }
@keyframes rs-pop { 0% { opacity: 0; transform: translateY(-6px); } 8% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
.rs-call { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); font-size: clamp(24px, 4.5vw, 44px); font-weight: 900; color: #fff; letter-spacing: .08em; text-shadow: 0 2px 14px rgba(0,0,0,.7), 0 0 30px rgba(56,168,224,.6); white-space: nowrap; }
.rs-call.is-in { animation: rs-call 1.8s ease both; }
@keyframes rs-call { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.9); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
/* 喚呼の下の説明（信号機の名前・色・意味）。読めるように長めに出す */
.rs-call b { display: block; text-align: center; font-weight: 900; }
.rs-call span { display: block; margin: 8px auto 0; width: max-content; max-width: min(92vw, 760px); white-space: normal; text-align: center; font-size: clamp(13px, 1.7vw, 17px); font-weight: 700; letter-spacing: .02em; line-height: 1.5; padding: 6px 14px; border-radius: 10px; background: rgba(8, 14, 22, .8); border: 1px solid rgba(255, 255, 255, .18); text-shadow: none; }
.rs-call span em { font-style: normal; font-weight: 900; }
.rs-call span em[data-c="R"] { color: #ff6a5a; }
.rs-call span em[data-c="Y"] { color: #ffd25a; }
.rs-call span em[data-c="YG"] { color: #c8ff7a; }
.rs-call span em[data-c="G"] { color: #5affb0; }
.rs-call.has-sub.is-in { animation-duration: 4.6s; }
@keyframes rs-call-sub { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.9); } 6% { opacity: 1; transform: translate(-50%, 0) scale(1); } 90% { opacity: 1; } 100% { opacity: 0; } }
.rs-call.has-sub.is-in { animation-name: rs-call-sub; }
.rs-hover { position: absolute; padding: 4px 10px; border-radius: 6px; background: rgba(10,13,18,.85); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; }

/* ---- タッチ操作 ---- */
.rs-lookzone { position: absolute; inset: 0; pointer-events: auto; touch-action: none; }
.rs-lever { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom)); width: 74px; height: min(36vh, 270px); pointer-events: auto; display: flex; flex-direction: column; align-items: center; touch-action: none; }
.rs-lever.is-left { left: calc(8px + env(safe-area-inset-left)); }
.rs-lever.is-right { right: calc(8px + env(safe-area-inset-right)); }
.rs-lever__title { font-size: 11px; font-weight: 900; color: #fff; text-shadow: 0 1px 3px #000; margin-bottom: 4px; }
.rs-lever__track { position: relative; flex: 1; width: 100%; border-radius: 14px; background: rgba(8,14,22,.72); border: 1px solid rgba(255,255,255,.22); }
.rs-lever__track span { position: absolute; left: 6px; top: calc(var(--i) * (100% - 20px) / (var(--n, 1)) ); font-size: 11px; font-weight: 700; color: rgba(255,255,255,.55); }
.rs-lever.is-left .rs-lever__track span { top: calc(12px + var(--i) * (100% - 40px) / 5); }
.rs-lever.is-right .rs-lever__track span { top: calc(12px + var(--i) * (100% - 40px) / 9); }
.rs-lever__track span.on { color: #fff; }
.rs-lever__knob { position: absolute; right: 6px; width: 34px; height: 36px; border-radius: 10px; background: linear-gradient(#f2f2ee, #b8bcc0); box-shadow: 0 3px 8px rgba(0,0,0,.4); transition: top .08s; }
.rs-lever.is-right .rs-lever__knob { background: linear-gradient(#ffe08a, #d8a020); }
/* ワンハンドル: 15段（上が力行、下がブレーキ） */
.rs-lever.is-one .rs-lever__track span { top: calc(14px + var(--i) * (100% - 40px) / 14); font-size: 10px; line-height: 12px; }
/* 上（奥）: 非常は赤、B8〜B1 は黄。真ん中の N は白。下（手前）: P1〜P5 は緑 */
.rs-lever.is-one .rs-lever__track span:nth-child(-n+9) { color: rgba(255,214,110,.65); }
.rs-lever.is-one .rs-lever__track span:first-child { color: rgba(255,110,90,.8); }
.rs-lever.is-one .rs-lever__track span:nth-child(10) { color: #fff; font-weight: 900; }
.rs-lever.is-one .rs-lever__track span:nth-child(n+11) { color: rgba(110,255,180,.65); }
.rs-lever.is-one .rs-lever__track span.on { color: #fff; }
.rs-lever.is-one .rs-lever__knob { height: 36px; background: linear-gradient(#5a5e62, #24272a); border: 1px solid rgba(255,255,255,.35); }
.rs-lever[hidden] { display: none; }
.rs-lever.is-one .rs-lever__title { white-space: nowrap; font-size: 10px; letter-spacing: -.02em; }
/* 逆転ハンドル（前・切・後）: 左のレバーの上 */
.rs-trev { position: absolute; left: calc(8px + env(safe-area-inset-left)); bottom: calc(min(36vh, 270px) + 34px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(8,14,22,.72); border: 1px solid rgba(255,255,255,.22); pointer-events: auto; touch-action: none; }
.rs-trev__t { font-size: 11px; font-weight: 900; color: #fff; padding: 0 4px; writing-mode: vertical-rl; }
.rs-trev__b { appearance: none; width: 40px; height: 40px; border-radius: 9px; border: 1px solid rgba(255,255,255,.25); background: rgba(30,40,52,.9); color: #fff; font: 900 16px/1 var(--g3d-font, inherit); }
.rs-trev__b.on[data-rev="F"] { background: #2fbf7a; color: #04121c; }
.rs-trev__b.on[data-rev="N"] { background: #e8eef4; color: #04121c; }
.rs-trev__b.on[data-rev="R"] { background: #f0a030; color: #04121c; }
.rs-trev__b:disabled { opacity: .35; }
/* キー操作のヒントがオンのとき（スマホ）: 次に押すボタン・レバーの縁を点滅 */
.rs-tbtn.is-hint, .rs-trev__b.is-hint, .rs-lever.is-hint .rs-lever__track { animation: rs-hint 1.1s ease-in-out infinite; }
@keyframes rs-hint { 0%, 100% { box-shadow: 0 0 0 0 rgba(120, 220, 255, 0); border-color: rgba(255,255,255,.25); } 50% { box-shadow: 0 0 0 3px rgba(120, 220, 255, .85); border-color: #9be4ff; } }
.rs-trev.is-locked .rs-trev__b:not(.on) { opacity: .3; }
.rs-tpad { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom)); width: min(calc(100% - 180px), 420px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; pointer-events: none; }
.rs-tbtn { pointer-events: auto; appearance: none; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; background: rgba(8,14,22,.74); color: #fff; font: 900 13px/1.15 var(--g3d-font, inherit); min-height: 50px; padding: 4px; touch-action: none; }
.rs-tbtn.is-down { background: var(--accent); color: #04121c; }
.rs-tbtn.is-door { background: rgba(20, 60, 90, .8); }
.rs-tbtn.is-close { background: rgba(110, 30, 24, .82); }
.rs-tbtn.is-om { background: rgba(26, 80, 56, .8); }
.rs-tbtn.is-main { background: rgba(56,168,224,.35); }
.rs-tbtn.is-eb { background: rgba(170, 18, 10, .85); }
.rs-tbtn.is-sm { min-height: 40px; font-size: 12px; }
.rs-tbtn.is-hot { animation: rs-hot .7s ease-in-out infinite; }
@keyframes rs-hot { 50% { box-shadow: 0 0 0 4px rgba(255, 210, 90, .7); } }
.rs-tbtn[hidden] { display: none; }

/* スマホ（タッチ）: 要約は小さく。案内は上下どちらかに寄せる（引き伸ばさない） */
@media (pointer: coarse) {
  .rs-status { top: calc(52px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left)); min-width: 0; padding: 7px 9px; gap: 4px 6px; }
  .rs-speed b { font-size: 26px; }
  .rs-next b, .rs-next i { font-size: 14px; }
  .rs-clock { font-size: 11.5px; }
  .g3d-hud__tr { top: calc(52px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); }
  .rs-steps { width: 190px; padding: 7px 9px; }
  .rs-steps li { font-size: 11px; }
  .rs-steps li kbd { display: none; }
  .rs-tutor { top: auto; bottom: calc(min(36vh, 270px) + 92px + env(safe-area-inset-bottom)); min-width: 0; width: min(92vw, 560px); font-size: 13px; line-height: 1.6; padding: 9px 12px; }
  .rs-pops { top: calc(150px + env(safe-area-inset-top)); width: min(44vw, 300px); }
  .rs-tbtn { min-height: 44px; font-size: 12px; border-radius: 10px; }
}
/* 縦長のスマホ */
@media (pointer: coarse) and (orientation: portrait) {
  .rs-status { right: calc(8px + env(safe-area-inset-right)); grid-template-columns: auto auto 1fr; }
  .g3d-hud__tr { top: calc(196px + env(safe-area-inset-top)); }
  .rs-steps { width: 176px; }
  .rs-steps li.is-ok { display: none; }   /* 済んだ手順は畳む */
  .rs-steps li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rs-card { top: 32%; }
  .rs-pops { top: calc(196px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); right: auto; transform: none; width: calc(100vw - 200px); align-items: flex-start; }
  .rs-tpad { width: calc(100% - 176px); grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .rs-tbtn { min-height: 46px; padding: 2px; }
  .rs-tutor { bottom: calc(min(36vh, 270px) + 96px + env(safe-area-inset-bottom)); }
  .rs-call { top: 41%; }   /* 手順表の下（喚呼の説明が手順表に重ならないように） */
}
/* 横長で背が低いスマホ: 要約は横一列、手順表はブレーキレバーの左、ボタンは1段 */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  .rs-status { grid-template-columns: auto auto auto auto; grid-template-areas: "spd lim notch next"; padding: 5px 8px; top: calc(46px + env(safe-area-inset-top)); }
  .rs-speed b { font-size: 22px; }
  .rs-lim b { font-size: 16px; } .rs-notch b { font-size: 17px; }
  .rs-next { border-top: 0; padding-top: 0; border-left: 1px solid var(--rs-line); padding-left: 8px; }
  .rs-clock { display: none; }
  .g3d-hud__tr { top: calc(46px + env(safe-area-inset-top)); right: calc(84px + env(safe-area-inset-right)); }
  .rs-steps { width: 168px; max-height: calc(100vh - 120px); overflow: hidden; padding: 5px 8px; }
  .rs-steps h3 { font-size: 11px; margin-bottom: 3px; }
  .rs-steps li { font-size: 10.5px; }
  .rs-steps li.is-ok { display: none; }
  .rs-lever { top: calc(100px + env(safe-area-inset-top)); height: auto; bottom: calc(8px + env(safe-area-inset-bottom)); width: 64px; }
  .rs-tpad { grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; width: calc(100% - 300px); left: 50%; transform: translateX(-50%); bottom: calc(6px + env(safe-area-inset-bottom)); gap: 4px; }
  .rs-trev { left: calc(78px + env(safe-area-inset-left)); bottom: calc(8px + env(safe-area-inset-bottom)); flex-direction: column; padding: 3px; }
  .rs-trev__t { writing-mode: horizontal-tb; padding: 1px 0; font-size: 10px; }
  .rs-trev__b { width: 44px; height: 36px; font-size: 15px; }
  .rs-trev.is-locked .rs-trev__t::after { content: ''; }
  .rs-tbtn { min-height: 38px; font-size: 11px; line-height: 1.1; }
  .rs-tbtn br { display: none; }
  .rs-tutor { top: auto; bottom: calc(52px + env(safe-area-inset-bottom)); width: min(calc(100vw - 200px), 560px); font-size: 11.5px; line-height: 1.5; padding: 6px 10px; }
  .rs-card { top: 30%; padding: 8px 12px; }
  .rs-card__big { font-size: 24px; margin: 2px 0 4px; }
  .rs-pops { top: auto; bottom: calc(112px + env(safe-area-inset-bottom)); left: calc(146px + env(safe-area-inset-left)); width: min(40vw, 300px); }
  .rs-alarm { top: 30%; font-size: 14px; padding: 8px 16px; }
}

/* 手順表: 逆転ハンドルの行（いまの手順のとき）を点滅させて目立たせる */
.rs-steps li[data-k="revOn"].is-cur, .rs-steps li[data-k="revOff"].is-cur { color: #fff; background: rgba(95, 208, 255, .16); border-radius: 6px; animation: rs-revrow 1s ease-in-out infinite; }
.rs-steps li[data-k="revOn"].is-cur i, .rs-steps li[data-k="revOff"].is-cur i { border-color: #5fd0ff; }
@keyframes rs-revrow { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(95,208,255,.2); } 50% { box-shadow: inset 0 0 0 2px rgba(95,208,255,.95); } }
/* 逆転ハンドルの案内札: 左の要約の下（前面窓の運転視界の外） */
.rs-revcue { position: absolute; left: calc(14px + env(safe-area-inset-left)); top: calc(206px + env(safe-area-inset-top)); max-width: min(34vw, 330px); display: flex; flex-direction: column; gap: 3px; padding: 9px 13px; border-radius: 12px; background: rgba(8, 30, 46, .9); border: 2px solid #5fd0ff; color: #eaf7ff; font-size: 13px; line-height: 1.45; box-shadow: 0 0 18px rgba(95,208,255,.35); pointer-events: none; }
.rs-revcue b { font-size: 15px; font-weight: 900; }
.rs-revcue kbd { display: inline-block; min-width: 1.6em; padding: 0 .35em; margin-right: .3em; border-radius: 5px; background: #eaf7ff; color: #04121c; font: 900 13px/1.5 var(--g3d-font, inherit); text-align: center; }
.rs-revcue[data-kind="alert"] { background: rgba(70, 16, 10, .92); border-color: #ff7a5a; box-shadow: 0 0 22px rgba(255,90,60,.45); animation: rs-revalert .5s ease-in-out 3; }
.rs-revcue.is-in { animation: rs-pop 3s ease both; animation-iteration-count: 1; }
.rs-revcue[data-kind="info"].is-in { animation: none; }
@keyframes rs-revalert { 0%, 100% { transform: none; } 50% { transform: scale(1.04); } }
.rs-revcue[hidden] { display: none; }
.rs-has-cue .rs-pops { top: calc(276px + env(safe-area-inset-top)); }
@media (pointer: coarse) {
  .rs-revcue { top: calc(150px + env(safe-area-inset-top)); max-width: min(52vw, 300px); font-size: 12px; }
  .rs-has-cue .rs-pops { top: calc(214px + env(safe-area-inset-top)); }
}
@media (pointer: coarse) and (orientation: portrait) {
  .rs-revcue { top: calc(196px + env(safe-area-inset-top)); max-width: calc(100vw - 200px); }
  .rs-has-cue .rs-pops { top: calc(262px + env(safe-area-inset-top)); }
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  .rs-revcue { top: auto; bottom: calc(160px + env(safe-area-inset-bottom)); left: calc(146px + env(safe-area-inset-left)); max-width: min(40vw, 300px); }
  .rs-has-cue .rs-pops { top: auto; bottom: calc(112px + env(safe-area-inset-bottom)); }
}

/* タイトル: 選ぶ項目が5段あるので、1280×720 などの低い画面では詰めて、「はじめる」まで1画面に収める
   （2026-10-05 チェックで、高さ720pxでは「はじめる」が画面の下に隠れ、スクロールしないと始められなかった） */
@media (min-width: 641px) and (max-height: 920px) {
  .g3d-title__kicker { margin-bottom: 4px; }
  .g3d-title__name { font-size: clamp(34px, 6.4vh, 64px); }
  .g3d-title__sub { margin-top: 8px; font-size: 13.5px; line-height: 1.6; }
  .g3d-title__extra:not(:empty) { margin-top: 10px; }
  .rs-sel { gap: 5px; margin: 6px auto 2px; }
  .rs-seg button { min-height: 32px; padding: 6px 11px; }
  .rs-sel__info { margin-top: 2px; line-height: 1.5; }
  .g3d-title .g3d-actions { margin-top: 12px; }
  .g3d-title__hint { margin-top: 8px; }
}
/* さらに背の低い画面（1366×768 のノートPCでブラウザの枠を除くと高さ 625px 前後）でも「はじめる」が見えるように（2026-10-06 チェック） */
@media (min-width: 641px) and (max-height: 700px) {
  .g3d-title__name { font-size: clamp(28px, 5.4vh, 40px); }
  .g3d-title__name small { display: none; }
  .g3d-title__sub { font-size: 12.5px; line-height: 1.5; }
  .rs-sel { gap: 3px; }
  .rs-seg button { min-height: 28px; padding: 4px 10px; }
  .rs-sel__info { font-size: 11.5px; line-height: 1.4; }
  .g3d-title .g3d-actions { margin-top: 8px; }
}

/* ---- 2026-10-05 チェックでの手直し（表示の重なり） ---- */
/* 短い知らせは、1文字だけ次の行に残らないように行の長さをそろえる（「…学園前行／き」） */
.rs-pop { text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }   /* 「ワ／ンマン」のような語の途中の折り返しも避ける */
/* PC: 逆転ハンドルの案内札と短い知らせが、左上の要約の下端に少し重なっていた */
.rs-revcue, .rs-pops { top: calc(218px + env(safe-area-inset-top)); }
.rs-has-cue .rs-pops { top: calc(288px + env(safe-area-inset-top)); }
@media (pointer: coarse) {
  .rs-revcue, .rs-pops { top: calc(150px + env(safe-area-inset-top)); }
  .rs-has-cue .rs-pops { top: calc(214px + env(safe-area-inset-top)); }
}
/* スマホ縦: 案内札が2行に折り返して背が高くなり、下の知らせと重なっていた／手順表が下の案内（練習）にかぶっていた／字幕が左のレバーにかかっていた */
@media (pointer: coarse) and (orientation: portrait) {
  .rs-revcue { top: calc(196px + env(safe-area-inset-top)); }
  .rs-revcue b { font-size: 13px; }
  .rs-pops { top: calc(196px + env(safe-area-inset-top)); }
  .rs-has-cue .rs-pops { top: calc(286px + env(safe-area-inset-top)); }
  .rs-steps ol { max-height: 104px; overflow: hidden; }
  .rs-card { top: 64%; left: calc(50% + 40px); }   /* 採点カードは手順表・案内に重ならない下の空き（レバーの右）へ。重なる時は hud.js が上下にずらす */
  .rs-steps ol { grid-template-columns: minmax(0, 1fr); }
  .rs-steps li, .rs-steps li span { min-width: 0; }   /* 長い手順名は「…」で切る（画面の右端からはみ出していた） */
  .g3d-subtitle { left: calc(50% + 42px) !important; max-width: calc(100vw - 110px) !important; }
}
/* スマホ横: 知らせ・案内札・練習の案内が左下に重なっていた → 知らせは画面の上の中央（要約の下）へ、字幕は練習の案内の上へ */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  .rs-pops, .rs-has-cue .rs-pops { top: calc(118px + env(safe-area-inset-top)); bottom: auto; left: 50%; transform: translateX(-50%); align-items: center; width: min(40vw, 300px); }
  .rs-revcue { top: auto; bottom: calc(146px + env(safe-area-inset-bottom)); }
  .g3d-subtitle { bottom: calc(126px + env(safe-area-inset-bottom)) !important; }
  .rs-lever { top: calc(114px + env(safe-area-inset-top)); }   /* 「ワンハンドル」の札が要約の下端にかかっていた */
  .rs-has-card .rs-pops { left: calc(140px + env(safe-area-inset-left)); transform: none; width: 150px; align-items: flex-start; }   /* 採点カードが出ている間、知らせは左（要約の下）へ寄せてカードに重ねない */
  .rs-call span { max-width: max(280px, calc(100vw - 520px)); font-size: 12.5px; }   /* 喚呼の説明は右の手順表にかからない幅で折り返す */
}
/* 結果の見出し「運転日誌 — 腕利き運転士」が「…運／転士」と語の途中で折り返していた */
.g3d-result__title { word-break: keep-all; overflow-wrap: anywhere; }

/* ---- 2026-10-27 新しい路線（高速線・在来線の特急）: 路線の選択と、新路線の間は汐鳴線の表示を隠す ---- */
.rs-seg button small { display: block; margin-top: 2px; font-size: 10px; font-weight: 700; opacity: .75; }
.rs-seg[data-k="route"] button { padding-top: 6px; padding-bottom: 6px; }
.rs-ex .rs-status:not(.rsx), .rs-ex .rs-steps:not(.rsx), .rs-ex .rs-revcue:not(.rsx), .rs-ex .rs-tutor:not(.rsx), .rs-ex .rs-card:not(.rsx), .rs-ex .rs-pops:not(.rsx), .rs-ex .rs-call:not(.rsx), .rs-ex .rs-alarm:not(.rsx), .rs-ex .rs-hover:not(.rsx),
.rs-ex .rs-lookzone:not(.rsx), .rs-ex .rs-lever:not(.rsx), .rs-ex .rs-trev:not(.rsx), .rs-ex .rs-tpad:not(.rsx) { display: none !important; }
/* 路線を選ぶ段を足したので（新路線は7段）、低い画面では題を1行に・路線の下の小さな字を省き、選んだ物の説明の行が「はじめる」の列に隠れないように（2026-10-27） */
@media (min-width: 641px) and (max-height: 820px) {
  .rs-seg[data-k="route"] button small { display: none; }
  .g3d-title__name br { display: none; }
}
@media (min-width: 641px) and (max-height: 700px) {
  .g3d-title__name br { display: none; }
  .rs-ex-title .g3d-title__sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .rs-ex-title .rs-sel { gap: 2px; }
}

/* 路線の切り替えの表示（2026-11-05）: 前の路線の最後の絵を暗くぼかして残し、路線の名前・進み具合・いまの作業を出す。
   上のバー（47）より下、タイトル（30）と読み込みの画面（40）より上。帯の光は transform のアニメーションなので JS が重い間も動く */
.rs-switch { position: absolute; inset: 0; z-index: 44; display: grid; place-items: center; padding: 70px 16px 24px; overflow: hidden; background: radial-gradient(80% 60% at 50% 50%, #12161c, #040506); opacity: 0; transition: opacity .22s ease; }
.rs-switch[hidden] { display: none; }
.rs-switch.is-on { opacity: 1; }
.rs-switch.is-out { opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.rs-switch__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(3px) brightness(.5) saturate(.85); transform: scale(1.04); }
.rs-switch__shot:not([data-ok="1"]) { display: none; }
.rs-switch::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 75% at 50% 50%, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%); }
.rs-switch__panel { position: relative; z-index: 1; width: min(440px, 88vw); padding: 20px 26px 18px; border-radius: 18px; background: rgba(8,12,18,.66); border: 1px solid rgba(255,255,255,.13); box-shadow: 0 18px 50px rgba(0,0,0,.45); color: #fff; text-align: center; font-family: var(--g3d-ui, inherit); }
.rs-switch__kicker { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .18em; opacity: .72; }
.rs-switch__name { margin: 0; font-family: var(--g3d-title, inherit); font-size: clamp(26px, 6vw, 38px); font-weight: 900; letter-spacing: .1em; line-height: 1.25; }
.rs-switch__name small { display: inline-block; margin-left: .55em; padding: .2em .7em; border-radius: 999px; background: var(--accent, #38a8e0); color: #04121c; font-size: .4em; font-weight: 900; letter-spacing: .08em; vertical-align: .45em; }
.rs-switch__bar { position: relative; height: 6px; margin: 16px 0 10px; border-radius: 9px; background: rgba(255,255,255,.14); overflow: hidden; }
.rs-switch__bar i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: var(--accent, #38a8e0); border-radius: 9px; transition: transform .35s ease; }
.rs-switch__bar b { position: absolute; top: 0; bottom: 0; left: 0; width: 28%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); animation: rs-sw-sheen 1.25s linear infinite; will-change: transform; }
@keyframes rs-sw-sheen { from { transform: translateX(-110%); } to { transform: translateX(370%); } }
.rs-switch__step { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin: 0; font-size: 13px; text-align: left; }
.rs-switch__step span { opacity: .86; }
.rs-switch__step em { flex: none; font-style: normal; font-weight: 900; color: var(--accent, #38a8e0); font-variant-numeric: tabular-nums; }
.rs-switch__note { margin: 10px 0 0; font-size: 12px; opacity: .65; }
.rs-switch__note:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .rs-switch__bar b { animation-duration: 2.6s; } }