/* ホーム画面（homeUx.js）の見た目 2026-10-14 */
/* ===== ホーム画面 版15（てつさんの絵「霧の海」をもとに、ゲームにないものは消した形）=====
 * 左上 = 題名・英語名・あらすじ。中央 = 遺跡と光の柱の前の自艦（canvas）。右 = 言語・資材・主砲・いまの海域。
 * 下の中央 = 大きな出撃！、その下に強化する。最初からは右下の小さな文字。見本だけ・強さ不変 */
.rbs-root.rbs-ux3.rbs-wide-short .rbs-screen--start { padding: 0; }
.rbs-root.rbs-ux3.rbs-wide-short:not(.rbs-scaled) .rbs-screen--start { position: relative; }
/* 版19: 縮小表示（正方形に近い枠も）では、ホームを枠の真ん中に置き、上下のあまりは背景の絵をぼかして埋める */
.rbs-root.rbs-ux3.rbs-scaled .rbs-screen--start { top: 50%; bottom: auto; transform-origin: 50% 50%; transform: translate(-50%, -50%) scale(var(--rbs-scale, 1)); }
.rbs-root.rbs-ux3.ux3-home-on { background: #1b2733; }
.rbs-root.rbs-ux3.ux3-home-on::before { content: ""; position: absolute; inset: -40px; background: var(--ux3-bg) center / cover no-repeat; filter: blur(18px) brightness(.85); pointer-events: none; }
.rbs-root.rbs-ux3.rbs-wide-short:not(.rbs-scaled) .rbs-screen--start.is-active { min-height: 100%; }   /* 中身はすべて重ねて置くので、高さは画面いっぱいに */
.rbs-root.rbs-ux3.rbs-wide-short .rbs-start-main { position: absolute; z-index: 2; left: 3%; top: 4%; width: 44%; display: block; }
.rbs-root.rbs-ux3.rbs-wide-short .rbs-howto { display: none; }
.rbs-root.rbs-ux3.rbs-wide-short .rbs-start-ships { display: none; }

/* 題名: 黒い帯はやめて、紙の上に大きな墨の文字 → 英語名 → 古代文字の帯 */
.rbs-root.rbs-root.rbs-root.rbs-root.rbs-ux3.rbs-wide-short .rbs-title, .rbs-root.rbs-root.rbs-root.rbs-root.rbs-ux3.rbs-wide-short .rbs-screen--start.is-active .rbs-title { display: inline-block; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; white-space: nowrap; color: var(--rbs-ink); font-size: 38px; line-height: 1.05; letter-spacing: .06em; text-shadow: 0 0 18px rgba(243, 238, 226, .9), 0 0 4px rgba(243, 238, 226, .9); animation: ux3-in-left .6s ease-out both; }
.rbs-root.rbs-root.rbs-root.rbs-root.rbs-ux3.rbs-wide-short .rbs-title::after, .rbs-root.rbs-root.rbs-root.rbs-root.rbs-ux3.rbs-wide-short .rbs-title::before { content: none; display: none; }
.rbs-root.rbs-ux3 .ux3-sub { display: block; margin: 6px 0 0; font-size: 12px; letter-spacing: .42em; color: var(--rbs-ink); }
.rbs-root.rbs-ux3 .ux3-band { display: block; margin: 4px 0 0; font-size: 12px; letter-spacing: .1em; color: var(--rbs-gold); white-space: nowrap; overflow: hidden; width: 330px; max-width: 100%; }
.rbs-root.rbs-ux3.rbs-lang-en .ux3-sub { display: none; }
.rbs-root.rbs-root.rbs-ux3.rbs-wide-short .rbs-start-story { max-width: 14em; }
.rbs-root.rbs-root.rbs-ux3.rbs-wide-short .rbs-start-story,
.rbs-root.rbs-root.rbs-ux3.rbs-wide-short .rbs-screen--start.is-tight .rbs-start-story { display: block; margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: #2b2720; text-shadow: 0 0 8px rgba(246, 242, 232, 1), 0 0 3px rgba(246, 242, 232, 1), 0 0 14px rgba(246, 242, 232, .9); animation: ux3-fade .7s .2s ease-out both; }
.rbs-root.rbs-ux3 .rbs-start-story > span { display: block; }

/* 右の列 */
.rbs-root.rbs-ux3.rbs-wide-short .rbs-start-side { position: absolute; z-index: 2; right: 2.5%; top: 4%; width: 27%; display: flex; flex-direction: column; gap: 8px; animation: ux3-in-right .6s .1s ease-out both; }
/* 言語: 2つに分かれた札（今の言語が黒） */
.rbs-root.rbs-ux3 .ux3-lang { display: flex; border: 1.5px solid var(--rbs-ink); background: #FFFFFF; box-shadow: inset 0 0 0 2px #FFFFFF, inset 0 0 0 3px var(--rbs-gold); }
.rbs-root.rbs-ux3 .ux3-lang > * { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 32px; font-size: 14px; font-weight: bold; }
.rbs-root.rbs-ux3 .ux3-lang-now { background: var(--rbs-ink); color: #FFFFFF; }
.rbs-root.rbs-root.rbs-root.rbs-ux3 .ux3-lang .rbs-lang-btn { position: static; display: flex; margin: 0; min-width: 0; min-height: 32px; padding: 0 8px; border: 0; border-radius: 0; background: none; color: var(--rbs-ink); font-size: 14px; }
/* 資材・主砲: 黒い札に金の縁 */
.rbs-root.rbs-ux3 .ux3-stat { display: grid; grid-template-columns: 28px auto 1fr; align-items: center; gap: 8px; padding: 7px 12px; background: rgba(17, 17, 17, .92); color: #F3EEE2; border: 1.5px solid var(--rbs-gold); box-shadow: inset 0 0 0 2px #111, inset 0 0 0 2.6px rgba(217, 164, 0, .5); }
.rbs-root.rbs-ux3 .ux3-stat[hidden] { display: none; }
.rbs-root.rbs-ux3 .ux3-stat svg { width: 26px; height: 22px; }
.rbs-root.rbs-ux3 .ux3-stat-label { font-size: 13px; color: #D8CFBB; }
.rbs-root.rbs-ux3 .ux3-stat-val { justify-self: end; font-size: 20px; font-weight: bold; font-variant-numeric: tabular-nums; color: #FFFFFF; }
.rbs-root.rbs-ux3 .ux3-stat-gun { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.rbs-root.rbs-ux3 .ux3-stat-gun .ux3-stat-val { justify-self: auto; font-size: 17px; white-space: nowrap; }
.rbs-root.rbs-ux3.rbs-tight.rbs-lang-en .ux3-stat-label { font-size: 12px; }
.rbs-root.rbs-ux3 .ux3-bar { height: 5px; background: #3a352c; }
.rbs-root.rbs-ux3 .ux3-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #B98A00, #F2C744); }
/* いまの海域: 紙の札・金の二重線・四隅の飾り */
.rbs-root.rbs-root.rbs-ux3.rbs-wide-short .rbs-start-side .rbs-start-sea:not([hidden]) { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 10px 12px 9px; border: 1.5px solid var(--rbs-gold); border-radius: 0; background: #FBF8F0; box-shadow: inset 0 0 0 3px #FBF8F0, inset 0 0 0 4px rgba(217, 164, 0, .6); text-align: center; line-height: 1.3; order: 0; }
.rbs-root.rbs-ux3 .rbs-start-side .rbs-start-sea-label { font-size: 12px; color: var(--rbs-sub); letter-spacing: .1em; }
.rbs-root.rbs-ux3 .rbs-start-side .rbs-start-sea-label::before, .rbs-root.rbs-ux3 .rbs-start-side .rbs-start-sea-label::after { content: "—"; margin: 0 6px; color: var(--rbs-gold); }
.rbs-root.rbs-ux3 .rbs-start-side .rbs-start-sea-name { margin: 2px 0 4px; font-size: 22px; white-space: nowrap; }
.rbs-root.rbs-ux3.rbs-tight .rbs-start-side .rbs-start-sea-name { font-size: 19px; letter-spacing: -.02em; }
.rbs-root.rbs-ux3 .rbs-start-side .rbs-start-sea-next { font-size: 13px; font-weight: bold; color: #8a6a00; }
.rbs-root.rbs-ux3 .rbs-start-side .rbs-start-save, .rbs-root.rbs-ux3 .rbs-start-side .rbs-start-ships { display: none !important; }
.rbs-root.rbs-ux3 .rbs-start-side .rbs-start-notice { margin: 0; }

/* 下の中央: 出撃！と強化する */
.rbs-root.rbs-ux3 .ux3-bottom { position: absolute; z-index: 3; left: 47%; bottom: 3%; width: 44%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; animation: ux3-up .6s .2s ease-out both; }   /* 2026-10-14: 中心を少し左へ（右の海域の札と枠が重ならないように） */
.rbs-root.rbs-root.rbs-root.rbs-ux3 .ux3-bottom .rbs-start-btn { position: relative; width: 100%; min-height: 56px; margin: 0; padding: 0 56px; overflow: hidden; border: 2px solid var(--rbs-gold); background: linear-gradient(180deg, #1c1a16, #0b0a08); box-shadow: inset 0 0 0 3px #0b0a08, inset 0 0 0 4px rgba(217, 164, 0, .55), 0 6px 18px rgba(0, 0, 0, .35); color: #FBF3DC; font-size: 32px; letter-spacing: .3em; }
.rbs-root.rbs-root.rbs-root.rbs-ux3.rbs-lang-en .ux3-bottom .rbs-start-btn { letter-spacing: .08em; }
.rbs-root.rbs-ux3 .ux3-compass { position: absolute; left: 16px; top: 50%; width: 38px; height: 38px; margin-top: -19px; color: var(--rbs-gold); }
.rbs-root.rbs-ux3 .ux3-chev { position: absolute; right: 18px; top: 50%; margin-top: -0.6em; font-size: 26px; line-height: 1.2; letter-spacing: 0; color: var(--rbs-gold); font-family: system-ui, sans-serif; font-weight: 300; }
.rbs-root.rbs-ux3 .ux3-bottom .rbs-start-btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(217, 164, 0, .3), transparent); animation: ux3-glint 3.4s 1.2s ease-in-out infinite; pointer-events: none; }
.rbs-root.rbs-root.rbs-root.rbs-ux3 .ux3-bottom .rbs-start-up-btn { width: 50%; min-height: 36px; margin: 0; border: 1.5px solid var(--rbs-gold); background: #FBF8F0; box-shadow: inset 0 0 0 2px #FBF8F0, inset 0 0 0 3px rgba(217, 164, 0, .5); color: var(--rbs-ink); font-size: 17px; }
.rbs-root.rbs-ux3 .rbs-start-up-dot { background: var(--rbs-gold); color: var(--rbs-ink); }
.rbs-root.rbs-root.rbs-ux3 .rbs-settings-btn { position: absolute; z-index: 3; top: auto; left: auto; right: 2.5%; bottom: 3.5%; min-height: 36px; padding: 0 12px; border: 1.5px solid var(--rbs-gold); background: rgba(251, 248, 240, .92); box-shadow: inset 0 0 0 2px #FBF8F0, inset 0 0 0 3px rgba(217, 164, 0, .5); color: var(--rbs-ink); font-size: 14px; }

@keyframes ux3-in-left { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
@keyframes ux3-in-right { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes ux3-up { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes ux3-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ux3-glint { 0%, 55% { left: -40%; } 100% { left: 120%; } }
@media (prefers-reduced-motion: reduce) {
  .rbs-root.rbs-ux3 .rbs-title, .rbs-root.rbs-ux3 .rbs-start-story, .rbs-root.rbs-ux3 .rbs-start-side, .rbs-root.rbs-ux3 .ux3-bottom { animation: none !important; }
  .rbs-root.rbs-ux3 .ux3-bottom .rbs-start-btn::before { display: none; }
}
/* 見本の札と切り替え: ホームでは邪魔にならない場所へ */
body:has(.rbs-ux3) .far-tag { display: none; }
body:has(.rbs-ux3 .rbs-screen--start.is-active) .far-switch { top: 10px; bottom: auto; left: 50%; transform: translateX(-50%) scale(.85); }
/* 英語: 題名とあらすじが長いので小さく */
.rbs-root.rbs-root.rbs-root.rbs-root.rbs-ux3.rbs-lang-en.rbs-wide-short .rbs-screen--start.is-active .rbs-title { font-size: 30px; letter-spacing: .02em; }
.rbs-root.rbs-root.rbs-ux3.rbs-lang-en.rbs-wide-short .rbs-start-story { max-width: 22em; font-size: 12.5px; line-height: 1.5; }
.rbs-root.rbs-ux3.rbs-lang-en .rbs-start-side .rbs-start-sea-name { font-size: 18px; }
/* ===== 版20: カーソルを合わせたときの反応（マウスのときだけ。押したときは沈む。キーボードは金の枠） ===== */
.rbs-root.rbs-root.rbs-root.rbs-ux3 .ux3-bottom .rbs-start-btn,
.rbs-root.rbs-root.rbs-root.rbs-ux3 .ux3-bottom .rbs-start-up-btn,
.rbs-root.rbs-root.rbs-root.rbs-ux3 .ux3-lang .rbs-lang-btn,
.rbs-root.rbs-root.rbs-ux3 .rbs-settings-btn { transition: transform .15s ease-out, box-shadow .2s, background-color .2s, color .2s, filter .2s; }
.rbs-root.rbs-ux3 .ux3-compass { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.rbs-root.rbs-ux3 .ux3-chev { transition: transform .2s ease-out; }
@media (hover: hover) {
  .rbs-root.rbs-root.rbs-root.rbs-ux3 .ux3-bottom .rbs-start-btn:hover { transform: translateY(-2px); filter: brightness(1.12); box-shadow: inset 0 0 0 3px #0b0a08, inset 0 0 0 4px rgba(242, 199, 68, .95), 0 0 0 2px rgba(242, 199, 68, .35), 0 0 24px rgba(242, 199, 68, .45), 0 10px 22px rgba(0, 0, 0, .4); }
  .rbs-root.rbs-ux3 .ux3-bottom .rbs-start-btn:hover .ux3-compass { transform: rotate(90deg); }
  .rbs-root.rbs-ux3 .ux3-bottom .rbs-start-btn:hover .ux3-chev { transform: translateX(6px); }
  .rbs-root.rbs-ux3 .ux3-bottom .rbs-start-btn:hover::before { animation-duration: 1.1s; animation-delay: 0s; }
  .rbs-root.rbs-root.rbs-root.rbs-ux3 .ux3-bottom .rbs-start-up-btn:hover { transform: translateY(-2px); background: #FFFFFF; box-shadow: inset 0 0 0 2px #FFFFFF, inset 0 0 0 3px var(--rbs-gold), 0 0 16px rgba(242, 199, 68, .45), 0 8px 16px rgba(0, 0, 0, .25); }
  .rbs-root.rbs-root.rbs-root.rbs-ux3 .ux3-lang .rbs-lang-btn:hover { background: #F3E3B0; }
  .rbs-root.rbs-root.rbs-ux3 .rbs-settings-btn:hover { background: #FFFFFF; transform: translateY(-2px); }
  .rbs-root.rbs-ux3 .rbs-screen--start button:hover { cursor: pointer; }
}
.rbs-root.rbs-root.rbs-root.rbs-ux3 .ux3-bottom .rbs-start-btn:active,
.rbs-root.rbs-root.rbs-root.rbs-ux3 .ux3-bottom .rbs-start-up-btn:active { transform: translateY(1px) scale(.985); filter: brightness(.95); transition-duration: .05s; }
.rbs-root.rbs-ux3 .rbs-screen--start button:focus-visible { outline: 2px solid #F2C744; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .rbs-root.rbs-root.rbs-root.rbs-ux3 .ux3-bottom .rbs-start-btn:hover, .rbs-root.rbs-root.rbs-root.rbs-ux3 .ux3-bottom .rbs-start-up-btn:hover { transform: none; }
  .rbs-root.rbs-ux3 .ux3-bottom .rbs-start-btn:hover .ux3-compass, .rbs-root.rbs-ux3 .ux3-bottom .rbs-start-btn:hover .ux3-chev { transform: none; }
}
/* ===== 版21: 海域の札の小さな絵（背景の絵を海域ごとに切り取り、色味を変える） ===== */
.rbs-root.rbs-ux3 .ux3-sea-pic { display: block; align-self: stretch; width: 100%; box-sizing: border-box; height: 44px; margin: 2px 0 6px; border: 1px solid rgba(217, 164, 0, .7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); background: var(--ux3-bg) 55% 42% / 300% auto no-repeat; }
.rbs-root.rbs-ux3 .ux3-sea-pic[data-sea="1"] { background-position: 18% 62%; filter: sepia(.45) saturate(1.3) brightness(1.06); }
.rbs-root.rbs-ux3 .ux3-sea-pic[data-sea="2"] { background-position: 50% 80%; filter: saturate(1.35) brightness(1.08); }
.rbs-root.rbs-ux3 .ux3-sea-pic[data-sea="3"] { background-position: 8% 58%; filter: saturate(1.1); }
.rbs-root.rbs-ux3 .ux3-sea-pic[data-sea="4"] { background-position: 70% 18%; filter: sepia(.55) hue-rotate(-18deg) saturate(1.5) brightness(1.02); }
.rbs-root.rbs-ux3 .ux3-sea-pic[data-sea="5"] { background-position: 60% 45%; filter: grayscale(.55) contrast(.85) brightness(1.1); }
.rbs-root.rbs-ux3 .ux3-sea-pic[data-sea="6"] { background-position: 85% 40%; filter: grayscale(.4) brightness(.75) contrast(1.15); }
.rbs-root.rbs-ux3.rbs-tight .ux3-sea-pic { height: 34px; margin: 1px 0 4px; }
/* ===== 版22: 海域選択の「ホームにもどる」 ===== */
.rbs-root.rbs-root.rbs-ux3 .ux3-st-home { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; transition: transform .15s ease-out, background-color .2s, box-shadow .2s; }
.rbs-root.rbs-ux3 .ux3-st-home .rbs-icon { width: 20px; height: 20px; flex: none; }
@media (hover: hover) { .rbs-root.rbs-root.rbs-ux3 .ux3-st-home:hover { transform: translateY(-2px); background-color: #FFFBEF; box-shadow: 0 0 14px rgba(242, 199, 68, .45); } }
.rbs-root.rbs-root.rbs-ux3 .ux3-st-home:active { transform: translateY(1px); }
body:has(.rbs-ux3 .rbs-screen--stages.is-active) .far-switch { display: none; }   /* 版22: 見本の今⇄新の切り替えが海域選択の下のボタンに重なるので、この画面では隠す（ホームで切り替えられる） */
/* 縦持ちに変わったとき（rbs-ux3 が外れる）は、足した物を隠して今までのホームに近い形へ */
.rbs-root:not(.rbs-ux3) .ux3-sub, .rbs-root:not(.rbs-ux3) .ux3-band, .rbs-root:not(.rbs-ux3) .ux3-lang-now, .rbs-root:not(.rbs-ux3) .ux3-stat,
.rbs-root:not(.rbs-ux3) .ux3-sea-pic, .rbs-root:not(.rbs-ux3) .ux3-compass, .rbs-root:not(.rbs-ux3) .ux3-chev { display: none; }
.rbs-root:not(.rbs-ux3) .ux3-lang, .rbs-root:not(.rbs-ux3) .ux3-bottom { display: contents; }
.rbs-root.rbs-root.rbs-root.rbs-ux3 .ux3-bottom .rbs-start-up-btn { min-height: 48px; }   /* 押せる大きさ（スマホ横持ちは 48px） */
.rbs-root.rbs-ux3 .rbs-start-side .rbs-start-sea-next { font-size: 14px; }
/* 前のデータが壊れていたときのお知らせ: 古いホームの詰め方（is-tighter）で消されないように、右の列の下に出す */
.rbs-root.rbs-ux3 .rbs-start-side .rbs-start-notice:not([hidden]) { display: flex !important; gap: 6px; align-items: flex-start; padding: 8px 10px; font-size: 14px; line-height: 1.45; background: #FBF8F0; border: 1.5px solid var(--rbs-gold); }
/* 2026-10-14 V66: 資材の桁が多いときは数字を下の段に。背の低い横画面（高さ400未満）は海域の絵を出さない（お知らせ・「最初から」と重ならないように） */
.rbs-root.rbs-ux3 .ux3-stat.ux3-long { grid-template-columns: 28px 1fr; row-gap: 2px; }
.rbs-root.rbs-ux3 .ux3-stat.ux3-long .ux3-stat-val { grid-column: 1 / -1; font-size: 18px; }
.rbs-root.rbs-ux3.rbs-low .ux3-sea-pic { display: none !important; }
.rbs-root.rbs-ux3 .rbs-start-side .rbs-start-notice-icon { flex: none; width: 20px; height: 20px; }
/* ===== 2026-10-14 海域選択（ホームと同じ質に）: 背景にホームの絵、左に海域の札と進み具合・ボタン、右にステージの札 ===== */
/* 背景: 海域ごとに絵の切り取りと色味を変え、文字が読めるよう暗くする */
.rbs-root.ux3-st.ux3-st-on { background: #1b2733; }
.rbs-root.ux3-st.ux3-st-on::before { content: ""; position: absolute; inset: -20px; background: var(--ux3-bg) 55% 45% / cover no-repeat; filter: blur(3px) brightness(.62) saturate(1.05); pointer-events: none; }
.rbs-root.ux3-st.ux3-st-on::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(11, 10, 8, 0) 0%, rgba(11, 10, 8, .45) 100%); pointer-events: none; }
.rbs-root.ux3-st.ux3-st-on[data-st-sea="1"]::before { background-position: 18% 62%; filter: blur(3px) brightness(.62) sepia(.4) saturate(1.3); }
.rbs-root.ux3-st.ux3-st-on[data-st-sea="2"]::before { background-position: 50% 80%; filter: blur(3px) brightness(.62) saturate(1.35); }
.rbs-root.ux3-st.ux3-st-on[data-st-sea="3"]::before { background-position: 8% 58%; }
.rbs-root.ux3-st.ux3-st-on[data-st-sea="4"]::before { background-position: 70% 18%; filter: blur(3px) brightness(.6) sepia(.55) hue-rotate(-18deg) saturate(1.5); }
.rbs-root.ux3-st.ux3-st-on[data-st-sea="5"]::before { background-position: 60% 45%; filter: blur(3px) brightness(.62) grayscale(.55) contrast(.85); }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-screen--stages { z-index: 1; }

/* 見出し: 海域の絵の札（◀ 海域名 ▶、下にクリア数）。下の古代文字の帯はそのまま */
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "prev title next" "count count count"; align-items: center; gap: 2px 8px; min-height: 92px; padding: 10px 10px 18px; border: 1.5px solid var(--rbs-gold); box-shadow: inset 0 0 0 2px rgba(11, 10, 8, .9), inset 0 0 0 3px rgba(217, 164, 0, .55), 0 8px 22px rgba(0, 0, 0, .45);
  background: var(--band) left bottom/46.67px 10px repeat-x, linear-gradient(180deg, rgba(11, 10, 8, .25) 0%, rgba(11, 10, 8, .55) 100%), var(--ux3-bg) 55% 42% / 220% auto no-repeat, #111; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-prev { grid-area: prev; } .rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-next { grid-area: next; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-title { grid-area: title; white-space: normal; overflow: visible; text-wrap: balance; line-height: 1.15; font-size: 26px; letter-spacing: .06em; color: #FFFFFF; text-shadow: 0 0 6px #000, 0 0 2px #000, 0 2px 12px rgba(0, 0, 0, .9); }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-count { grid-area: count; justify-self: center; padding: 1px 10px; background: rgba(11, 10, 8, .72); border: 1px solid rgba(217, 164, 0, .7); color: #F3E3B0; font-size: 14px; letter-spacing: .06em; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-sea { width: 38px; height: 38px; border: 1.5px solid var(--rbs-gold); background: rgba(11, 10, 8, .7); color: #F2C744; transition: transform .15s ease-out, background-color .2s; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-sea:disabled { opacity: 1; border-style: dashed; border-color: rgba(217, 164, 0, .3); color: rgba(243, 238, 226, .25); background: rgba(11, 10, 8, .35); }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-screen--stages.is-hard .rbs-st-head { background-color: #5a1010; }

/* ふつう／ハード: ホームの言語の切り替えと同じ形。ハードの説明は小さな札 */
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; border: 1.5px solid var(--rbs-ink); background: #FFFFFF; box-shadow: inset 0 0 0 2px #FFFFFF, inset 0 0 0 3px var(--rbs-gold); }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-mode-btn { min-height: 38px; padding: 0 8px; border: 0; background: none; color: var(--rbs-ink); font-size: 16px; box-shadow: none; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-mode-btn[aria-pressed="true"] { background: var(--rbs-ink); color: #F2C744; box-shadow: none; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-mode-hard[aria-pressed="true"] { background: #8B1A1A; color: #FFE7A3; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-mode-btn:disabled { opacity: 1; border: 0; background: #ECE7DA; color: #8d8574; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-mode-note { grid-column: 1 / -1; padding: 3px 8px; background: rgba(11, 10, 8, .78); color: #F3E3B0; font-size: 14px; text-align: center; font-weight: normal; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-mode-note:empty { display: none; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-screen--stages.is-hard .rbs-st-mode-note { background: #8B1A1A; color: #FFE7A3; font-weight: bold; }

/* 海域の進み具合の印 */
.rbs-root.rbs-root.rbs-root.ux3-st .ux3-st-pips { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 0 2px; }
.rbs-root.rbs-root.rbs-root.ux3-st .ux3-st-pips i { width: 12px; height: 12px; transform: rotate(45deg); border: 1.5px solid rgba(243, 238, 226, .55); background: rgba(11, 10, 8, .5); }
.rbs-root.rbs-root.rbs-root.ux3-st .ux3-st-pips i.is-boss { width: 17px; height: 17px; }
.rbs-root.rbs-root.rbs-root.ux3-st .ux3-st-pips i.is-clear { background: #D9A400; border-color: #F2C744; box-shadow: 0 0 8px rgba(242, 199, 68, .6); }
.rbs-root.rbs-root.rbs-root.ux3-st .ux3-st-pips i.is-next { background: #FBF3DC; border-color: #F2C744; animation: ux3-pip 1.6s ease-in-out infinite; }
.rbs-root.rbs-root.rbs-root.ux3-st .ux3-st-pips i.is-open { background: rgba(243, 238, 226, .5); }
.rbs-root.rbs-root.rbs-root.ux3-st .ux3-st-pips:empty { display: none; }
@keyframes ux3-pip { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 199, 68, .7); } 50% { box-shadow: 0 0 0 5px rgba(242, 199, 68, 0); } }

/* ステージの札: クリア＝クリーム、つぎ＝黒と金（ホームの「出撃！」と同じ）、まだ＝暗いガラス、ボス＝赤い印 */
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-list { padding: 0; border: 0; background: none; box-shadow: none; gap: 8px; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-btn { position: relative; min-height: 50px; padding: 6px 14px; border: 1.5px solid var(--rbs-gold); background: rgba(251, 248, 240, .94); box-shadow: inset 0 0 0 2px rgba(251, 248, 240, .94), inset 0 0 0 3px rgba(217, 164, 0, .45), 0 4px 12px rgba(0, 0, 0, .3); color: var(--rbs-ink); transition: transform .15s ease-out, box-shadow .2s, filter .2s; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-btn .rbs-st-num { font-size: 14px; color: #6b5a2a; letter-spacing: .04em; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-btn.is-current { border: 2px solid var(--rbs-gold); background: linear-gradient(180deg, #1c1a16, #0b0a08); box-shadow: inset 0 0 0 3px #0b0a08, inset 0 0 0 4px rgba(217, 164, 0, .55), 0 0 18px rgba(242, 199, 68, .35), 0 6px 16px rgba(0, 0, 0, .45); color: #FBF3DC; overflow: hidden; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-btn.is-current .rbs-st-num { color: #F2C744; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-btn.is-current::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(217, 164, 0, .28), transparent); animation: ux3-glint 3.4s 1.2s ease-in-out infinite; pointer-events: none; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-btn.is-locked { opacity: 1; border: 1px dashed rgba(217, 164, 0, .6); background: rgba(11, 10, 8, .66); box-shadow: none; color: rgba(243, 238, 226, .7); }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-btn.is-locked .rbs-st-num { color: rgba(243, 238, 226, .7); }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-btn.is-boss .rbs-st-num { padding: 1px 6px; background: #8B1A1A; color: #FFE7A3; font-weight: bold; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-btn.is-boss.is-locked .rbs-st-num { background: rgba(139, 26, 26, .55); color: rgba(255, 231, 163, .7); }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-btn.is-boss:not(.is-locked) { border-width: 2px; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-challenge { border: 2px solid #F2C744; background: linear-gradient(90deg, #FFF3C4, #FBF8F0 60%); }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-stars { color: #C99400; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-btn.is-current .rbs-st-stars { color: #F2C744; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-mark.is-clear { border: 1px solid #6b5a2a; color: #6b5a2a; background: none; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-mark.is-next { background: #F2C744; color: #111; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-note { color: #F3E3B0; text-shadow: 0 0 4px #000; }
@media (hover: hover) {
  .rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-btn:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: inset 0 0 0 2px rgba(251, 248, 240, .94), inset 0 0 0 3px var(--rbs-gold), 0 0 16px rgba(242, 199, 68, .45), 0 8px 16px rgba(0, 0, 0, .35); cursor: pointer; }
  .rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-btn.is-current:hover { filter: brightness(1.15); box-shadow: inset 0 0 0 3px #0b0a08, inset 0 0 0 4px rgba(242, 199, 68, .95), 0 0 24px rgba(242, 199, 68, .5), 0 10px 22px rgba(0, 0, 0, .45); }
  .rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-sea:not(:disabled):hover, .rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-mode-btn:not(:disabled):hover { cursor: pointer; filter: brightness(1.15); }
}
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-btn:not(:disabled):active { transform: translateY(1px) scale(.99); transition-duration: .05s; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-screen--stages button:focus-visible { outline: 2px solid #F2C744; outline-offset: 3px; }

/* 下のボタン: ホームの「強化する」と同じ形 */
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-actions .rbs-btn { min-height: 48px; border: 1.5px solid var(--rbs-gold); background: #FBF8F0; box-shadow: inset 0 0 0 2px #FBF8F0, inset 0 0 0 3px rgba(217, 164, 0, .5); color: var(--rbs-ink); font-size: 17px; transition: transform .15s ease-out, box-shadow .2s, background-color .2s; }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-up-dot { color: #111; background: #F2C744; border-radius: 50%; padding: 0 3px; margin-left: 6px; font-size: 14px; }
@media (hover: hover) { .rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-actions .rbs-btn:hover { transform: translateY(-2px); background: #FFFFFF; box-shadow: inset 0 0 0 2px #FFFFFF, inset 0 0 0 3px var(--rbs-gold), 0 0 16px rgba(242, 199, 68, .45), 0 8px 16px rgba(0, 0, 0, .25); cursor: pointer; } }

/* 横長（パソコン・スマホ横持ち）: 左に海域の札・ふつう／ハード・印・ボタン、右にステージの札（上下の空きをなくす） */
.rbs-root.rbs-root.rbs-root.ux3-st:not(.rbs-narrow) .rbs-screen--stages.is-active { display: grid; max-width: 920px; padding: 16px 20px; column-gap: 20px; row-gap: 10px;
  grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); grid-template-rows: minmax(0, 1fr) auto auto auto;
  grid-template-areas: "head list" "mode list" "pips list" "act list"; }
.rbs-root.rbs-root.rbs-root.ux3-st:not(.rbs-narrow) .rbs-st-head { grid-area: head; align-content: end; background-size: auto, auto, cover; }
.rbs-root.rbs-root.rbs-root.ux3-st:not(.rbs-narrow) .rbs-st-mode { grid-area: mode; }
.rbs-root.rbs-root.rbs-root.ux3-st:not(.rbs-narrow) .ux3-st-pips { grid-area: pips; }
.rbs-root.rbs-root.rbs-root.ux3-st:not(.rbs-narrow) .rbs-st-list { grid-area: list; display: flex; flex-direction: column; justify-content: center; margin: 0; }
.rbs-root.rbs-root.rbs-root.ux3-st:not(.rbs-narrow) .rbs-st-list > :first-child, .rbs-root.rbs-root.rbs-root.ux3-st:not(.rbs-narrow) .rbs-st-list > :last-child { margin-top: 0; margin-bottom: 0; }
.rbs-root.rbs-root.rbs-root.ux3-st:not(.rbs-narrow) .rbs-st-btn { flex: 1 1 0; max-height: 66px; min-height: 44px; }
.rbs-root.rbs-root.rbs-root.ux3-st:not(.rbs-narrow) .rbs-st-actions { grid-area: act; flex-direction: column; gap: 8px; }
.rbs-root.rbs-root.rbs-root.ux3-st:not(.rbs-narrow) .rbs-st-actions .rbs-btn { flex: none; }
.rbs-root.rbs-root.rbs-root.ux3-st.rbs-wide-short .rbs-screen--stages.is-active { padding: 10px 14px; column-gap: 14px; row-gap: 6px; }
.rbs-root.rbs-root.rbs-root.ux3-st.rbs-wide-short .rbs-st-head { min-height: 74px; padding: 6px 8px 16px; }
.rbs-root.rbs-root.rbs-root.ux3-st.rbs-wide-short .rbs-st-title { font-size: 21px; }
.rbs-root.rbs-root.rbs-root.ux3-st.rbs-wide-short .rbs-st-sea { width: 32px; height: 32px; }
.rbs-root.rbs-root.rbs-root.ux3-st.rbs-wide-short .rbs-st-mode-btn { min-height: 34px; font-size: 15px; }
.rbs-root.rbs-root.rbs-root.ux3-st.rbs-wide-short .rbs-st-actions .rbs-btn { min-height: 48px; font-size: 16px; }
.rbs-root.rbs-root.rbs-root.ux3-st.rbs-wide-short .rbs-st-list { gap: 5px; }
.rbs-root.rbs-root.rbs-root.ux3-st.rbs-wide-short .rbs-st-btn { min-height: 40px; padding: 3px 10px; }
.rbs-root.rbs-root.rbs-root.ux3-st.rbs-wide-short .rbs-st-name { font-size: 16px; }
.rbs-root.rbs-root.rbs-root.ux3-st.rbs-wide-short .ux3-st-pips { padding: 4px 0 0; }
.rbs-root.rbs-root.rbs-root.ux3-st.rbs-low .ux3-st-pips { display: none; }
/* 縦持ち: 1列のまま、同じ見た目 */
.rbs-root.rbs-root.rbs-root.ux3-st.rbs-narrow .rbs-st-head { min-height: 80px; }
.rbs-root.rbs-root.rbs-root.ux3-st.rbs-narrow .rbs-st-list { margin: 4px 0; }
@media (prefers-reduced-motion: reduce) { .rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-btn.is-current::before, .rbs-root.rbs-root.rbs-root.ux3-st .ux3-st-pips i.is-next { animation: none; } }
.rbs-root.rbs-root.rbs-root.ux3-st.rbs-lang-en .rbs-st-title { font-size: 22px; letter-spacing: .02em; }
.rbs-root.rbs-root.rbs-root.ux3-st.rbs-lang-en.rbs-wide-short .rbs-st-title { font-size: 18px; }
/* ===== 海域選択の並び: 上に海域の帯（横長・低め）、下に左の操作とつぎの戦いの札、右にステージの札 ===== */
.rbs-root.rbs-root.rbs-root.ux3-st:not(.rbs-narrow) .rbs-screen--stages.is-active { max-width: 1000px; grid-template-columns: minmax(0, 30fr) minmax(0, 70fr); grid-template-rows: clamp(84px, 26%, 210px) auto auto minmax(0, 1fr) auto; grid-template-areas: "head head" "mode list" "pips list" ". list" "act list"; }
.rbs-root.rbs-root.rbs-root.ux3-st:not(.rbs-narrow) .rbs-st-head { background-size: auto, auto, cover; background-position: left bottom, 0 0, 50% 62%; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "prev title count next"; align-content: end; column-gap: 14px; }
.rbs-root.rbs-root.rbs-root.ux3-st:not(.rbs-narrow) .rbs-st-title { text-align: left; font-size: 32px; }
.rbs-root.rbs-root.rbs-root.ux3-st:not(.rbs-narrow) .rbs-st-count { justify-self: start; align-self: center; }
.rbs-root.rbs-root.rbs-root.ux3-st:not(.rbs-narrow) .rbs-st-list { justify-content: flex-start; }
.rbs-root.rbs-root.rbs-root.ux3-st:not(.rbs-narrow) .rbs-st-btn { flex: 1 1 0; max-height: 72px; }
.rbs-root.rbs-root.rbs-root.ux3-st.rbs-wide-short .rbs-st-title { font-size: 22px; }
/* ===== 海域のテーマに合わせた景色（同じ絵を海域ごとに切り取り・色・空気を変える。旭日に見える放射の光は使わない） ===== */
.rbs-root.ux3-st { --st-tint: linear-gradient(transparent, transparent); }
.rbs-root.ux3-st[data-st-sea="1"] { --st-tint: radial-gradient(ellipse 60% 45% at 50% 38%, rgba(255, 196, 92, .55), rgba(255, 170, 60, .12) 60%, transparent 75%), linear-gradient(180deg, rgba(255, 190, 110, .28), rgba(40, 30, 10, .1)); }
.rbs-root.ux3-st[data-st-sea="2"] { --st-tint: linear-gradient(180deg, rgba(120, 190, 255, .35) 0%, rgba(40, 110, 190, .18) 45%, rgba(0, 40, 90, .35) 100%); }
.rbs-root.ux3-st[data-st-sea="3"] { --st-tint: linear-gradient(180deg, rgba(150, 200, 170, .22), rgba(30, 70, 60, .3)); }
.rbs-root.ux3-st[data-st-sea="4"] { --st-tint: linear-gradient(180deg, rgba(255, 120, 60, .45) 0%, rgba(230, 90, 120, .3) 45%, rgba(70, 30, 80, .45) 100%); }
.rbs-root.ux3-st[data-st-sea="5"] { --st-tint: linear-gradient(180deg, rgba(220, 225, 230, .55) 0%, rgba(190, 196, 204, .5) 55%, rgba(120, 128, 138, .45) 100%); }
.rbs-root.ux3-st.ux3-st-on[data-st-sea="1"]::before { background-position: 50% 60%; background-size: 150% auto; filter: blur(3px) brightness(.72) sepia(.35) saturate(1.4); }
.rbs-root.ux3-st.ux3-st-on[data-st-sea="2"]::before { background-position: 50% 100%; background-size: 220% auto; filter: blur(3px) brightness(.8) saturate(1.5) hue-rotate(-8deg); }
.rbs-root.ux3-st.ux3-st-on[data-st-sea="3"]::before { background-position: 0% 75%; background-size: 200% auto; filter: blur(3px) brightness(.7) saturate(1.2) hue-rotate(12deg); }
.rbs-root.ux3-st.ux3-st-on[data-st-sea="4"]::before { background-position: 60% 0%; background-size: 170% auto; filter: blur(3px) brightness(.72) sepia(.5) hue-rotate(-25deg) saturate(1.8); }
.rbs-root.ux3-st.ux3-st-on[data-st-sea="5"]::before { background-position: 50% 55%; background-size: cover; filter: blur(5px) brightness(.8) grayscale(.85) contrast(.7); }
.rbs-root.ux3-st.ux3-st-on::after { background: radial-gradient(ellipse at 70% 50%, rgba(11, 10, 8, 0) 0%, rgba(11, 10, 8, .45) 100%), var(--st-tint); }
.rbs-root.rbs-root.rbs-root.ux3-st .rbs-st-head { background-image: var(--band), linear-gradient(180deg, rgba(11, 10, 8, .2) 0%, rgba(11, 10, 8, .55) 100%), var(--st-tint), var(--ux3-bg); background-repeat: repeat-x, no-repeat, no-repeat, no-repeat; background-size: 46.67px 10px, auto, auto, cover; }
.rbs-root.rbs-root.rbs-root.ux3-st[data-st-sea="1"] .rbs-st-head { background-position: left bottom, 0 0, 0 0, 50% 62%; }
.rbs-root.rbs-root.rbs-root.ux3-st[data-st-sea="2"] .rbs-st-head { background-position: left bottom, 0 0, 0 0, 50% 100%; background-size: 46.67px 10px, auto, auto, 220% auto; }
.rbs-root.rbs-root.rbs-root.ux3-st[data-st-sea="3"] .rbs-st-head { background-position: left bottom, 0 0, 0 0, 0% 75%; background-size: 46.67px 10px, auto, auto, 200% auto; }
.rbs-root.rbs-root.rbs-root.ux3-st[data-st-sea="4"] .rbs-st-head { background-position: left bottom, 0 0, 0 0, 60% 0%; background-size: 46.67px 10px, auto, auto, 170% auto; }
.rbs-root.rbs-root.rbs-root.ux3-st[data-st-sea="5"] .rbs-st-head { background-position: left bottom, 0 0, 0 0, 50% 55%; }
/* 霧の海: もやが流れる／空: 低い雲の帯 */
.rbs-root.ux3-st.ux3-st-on[data-st-sea="5"] .rbs-screen--stages::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 18% at 30% 70%, rgba(235, 238, 242, .35), transparent 70%), radial-gradient(ellipse 50% 14% at 75% 40%, rgba(235, 238, 242, .3), transparent 70%); animation: st-fog 18s ease-in-out infinite alternate; pointer-events: none; }
.rbs-root.ux3-st.ux3-st-on[data-st-sea="4"] .rbs-screen--stages::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 45% 8% at 20% 78%, rgba(255, 200, 170, .35), transparent 70%), radial-gradient(ellipse 40% 7% at 80% 64%, rgba(255, 190, 160, .3), transparent 70%); animation: st-fog 24s ease-in-out infinite alternate; pointer-events: none; }
@keyframes st-fog { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
@media (prefers-reduced-motion: reduce) { .rbs-root.ux3-st .rbs-screen--stages::before { animation: none !important; } }
/* ===== つぎの戦いの札（左の空いた所。名前・ねらい・出撃。押すとそのステージへ） ===== */
.rbs-root .ux3-st-fill { display: none; }
.rbs-root.rbs-root.rbs-root.ux3-st:not(.rbs-narrow) .rbs-screen--stages.is-active { grid-template-areas: "head head" "mode list" "pips list" "fill list" "act list"; }
.rbs-root.ux3-st:not(.rbs-narrow) .ux3-st-fill { grid-area: fill; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; }
.rbs-root.ux3-st .ux3-nx { display: flex; width: 100%; flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 14px; border: 2px solid var(--rbs-gold); background: linear-gradient(180deg, #1c1a16, #0b0a08); box-shadow: inset 0 0 0 3px #0b0a08, inset 0 0 0 4px rgba(217, 164, 0, .55), 0 6px 16px rgba(0, 0, 0, .4); color: #FBF3DC; }
.rbs-root.ux3-st .ux3-nx-num { color: #F2C744; font-size: 14px; letter-spacing: .06em; }
.rbs-root.ux3-st .ux3-nx-name { font-family: RbsKH, serif; font-size: 22px; }
.rbs-root.ux3-st .ux3-nx-goal { margin: 0; font-size: 14px; line-height: 1.5; color: #D8CFBB; }
.rbs-root.ux3-st .ux3-nx-go { margin-top: 4px; min-height: 48px; border: 1.5px solid var(--rbs-gold); background: #F2C744; color: #111; font: inherit; font-family: RbsKH, serif; font-size: 20px; letter-spacing: .2em; cursor: pointer; }
.rbs-root.ux3-st .ux3-nx-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rbs-root.ux3-st .ux3-nx-name { min-width: 0; line-height: 1.25; text-wrap: balance; }
.rbs-root.ux3-st .ux3-nx-go:hover { background: #FFD95A; }
.rbs-root.ux3-st .ux3-nx-go:active { transform: translateY(1px); }
.rbs-root.ux3-st .rbs-screen--stages.is-hard .ux3-nx { border-color: #d24a3a; }
/* 札の入る高さに合わせて中身をしぼる（homeUx.js が収まるまで段階を上げる: 1 目標を隠す → 2 番号と名前を1行に → 3 札を出さない） */
.rbs-root.ux3-st:not(.rbs-narrow) .ux3-st-fill { align-items: flex-end; }
.rbs-root.ux3-st .ux3-nx-num { flex: none; white-space: nowrap; }
.rbs-root.ux3-st .ux3-nx.is-fit1 .ux3-nx-goal, .rbs-root.ux3-st .ux3-nx.is-fit2 .ux3-nx-goal { display: none; }
.rbs-root.ux3-st .ux3-nx.is-fit1, .rbs-root.ux3-st .ux3-nx.is-fit2 { padding: 8px 12px; gap: 4px; }
.rbs-root.ux3-st .ux3-nx.is-fit2 .ux3-nx-head { flex-direction: row; align-items: baseline; gap: 8px; }
.rbs-root.ux3-st .ux3-nx.is-fit2 .ux3-nx-name { font-size: 16px; }
.rbs-root.ux3-st .ux3-nx.is-fit2 .ux3-nx-go { margin-top: 0; font-size: 16px; }
.rbs-root.ux3-st .ux3-nx.is-fit2 { padding: 6px 10px; gap: 2px; }
.rbs-root.ux3-st .ux3-nx.is-fit3 { display: none; }   /* とても小さい窓では札を出さない（右のステージの札から選べる） */
/* スマホ横: 上の帯を低くして、挑戦を含む6つの札が収まるように */
.rbs-root.rbs-root.rbs-root.ux3-st.rbs-wide-short .rbs-screen--stages.is-active { grid-template-rows: 62px auto auto minmax(0, 1fr) auto; }
.rbs-root.rbs-root.rbs-root.ux3-st.rbs-wide-short .rbs-st-head { min-height: 62px; padding: 4px 8px 14px; }
/* 横画面の帯: 絵は原寸のまま、海域ごとに見せる所を変える（見本で決まった見た目。近海は上の塔、ほかは下の海。色は --st-tint） */
.rbs-root.rbs-root.rbs-root.ux3-st.ux3-st:not(.rbs-narrow) .rbs-st-head { background-size: auto, auto, cover, auto; background-position: left bottom, 0 0, 50% 62%, left bottom; }
.rbs-root.rbs-root.rbs-root.ux3-st.ux3-st[data-st-sea="1"]:not(.rbs-narrow) .rbs-st-head { background-size: auto, auto, cover, auto, auto; background-position: left bottom, 0 0, 50% 62%, left bottom, 0 0; }