/* そらジャンプ島 — 画面。スマホの縦・横どちらでも、操作が画面の外に出ない。
 * 指の操作: めっちゃカメレモンの ZOOM1021 と同じ（ページは manipulation・遊ぶ所と ボタンは none・長おしメニューを出さない） */
:root {
	--ob-ink: #23315c; --ob-sky: #8fd3ff; --ob-go: #ff7a45; --ob-go2: #ff5a5f; --ob-yel: #ffd23f; --ob-mint: #3fd0b6; --ob-card: rgba(255, 255, 255, .94);
	--ob-sa-t: env(safe-area-inset-top, 0px); --ob-sa-b: env(safe-area-inset-bottom, 0px); --ob-sa-l: env(safe-area-inset-left, 0px); --ob-sa-r: env(safe-area-inset-right, 0px);
	--ob-joy: clamp(112px, 32vmin, 150px); --ob-jump: clamp(78px, 22vmin, 100px);
}
html, body.obb { margin: 0; height: 100%; overflow: hidden; background: var(--ob-sky); color: var(--ob-ink); font-family: 'M PLUS Rounded 1c', system-ui, -apple-system, 'Hiragino Maru Gothic ProN', sans-serif; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
html, body { touch-action: manipulation; }
.obb * { box-sizing: border-box; }
.ob, .ob * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
:where(.ob, .ob *) { touch-action: manipulation; }
.ob { position: fixed; inset: 0; overflow: hidden; }
.ob-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.ob-ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ob-ui > * { pointer-events: auto; }
:where(.ob) button { font-family: inherit; cursor: pointer; color: inherit; touch-action: manipulation; }
.ob-boot { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; color: #fff; text-shadow: 0 2px 0 rgba(35, 49, 92, .35); }
.ob-boot b { font-size: 34px; font-weight: 800; }
.ob-boot span { font-size: 15px; line-height: 1.7; }
.ob-boot a { color: #fff; }
.ob-boot i { width: 40px; height: 40px; border-radius: 50%; border: 5px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: obSpin 1s linear infinite; }
@keyframes obSpin { to { transform: rotate(360deg); } }

/* ---- ボタン ---- */
.ob-btn { display: block; width: 100%; min-height: 54px; padding: 12px 18px; border: 0; border-radius: 18px; background: #fff; color: var(--ob-ink); font-size: 18px; font-weight: 800; box-shadow: 0 5px 0 #c4d3ea; transition: transform .06s; }
.ob-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #c4d3ea; }
.ob-btn--go { background: linear-gradient(#ff9a5a, var(--ob-go)); color: #fff; box-shadow: 0 5px 0 #d4502a; font-size: 21px; }
.ob-btn--go:active { box-shadow: 0 1px 0 #d4502a; }
.ob-btn--sub { background: rgba(255, 255, 255, .7); font-size: 16px; min-height: 46px; }
.ob-ic { width: 46px; height: 46px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .92); font-size: 21px; font-weight: 800; box-shadow: 0 3px 0 rgba(35, 49, 92, .2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ob-pill { display: inline-flex; align-items: center; gap: 4px; padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-weight: 800; font-size: 16px; box-shadow: 0 3px 0 rgba(35, 49, 92, .2); white-space: nowrap; }
.ob-link { padding: 6px 10px; border-radius: 999px; background: rgba(35, 49, 92, .45); color: #fff; font-weight: 700; font-size: 15px; text-shadow: 0 1px 0 rgba(35, 49, 92, .4); }

/* ---- タイトル ---- */
.ob-title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px; padding: calc(28px + var(--ob-sa-t)) 16px calc(18px + var(--ob-sa-b)); pointer-events: none; }
.ob-title > * { pointer-events: auto; }
.ob-logo { text-align: center; line-height: 1; filter: drop-shadow(0 4px 0 rgba(35, 49, 92, .3)); }
.ob-logo__s { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--ob-yel); font-weight: 800; font-size: 14px; letter-spacing: .08em; }
.ob-logo b { display: block; margin-top: 8px; font-size: clamp(44px, 13vw, 76px); font-weight: 800; color: #fff; -webkit-text-stroke: 2px var(--ob-ink); paint-order: stroke fill; letter-spacing: .02em; }
.ob-logo b i { font-style: normal; color: var(--ob-yel); }
.ob-title__low { width: min(340px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ob-title__btns { width: 100%; display: grid; gap: 12px; }
.ob-title__note { margin: 6px 0 0; padding: 5px 12px; border-radius: 999px; background: rgba(35, 49, 92, .55); font-size: 14px; font-weight: 700; color: #fff; text-align: center; }
.ob-title__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
/* SAVE1022: 記録の保存先（押すと 保存と引き継ぎの説明） */
.ob-savebtn { padding: 6px 12px; border: 0; border-radius: 999px; background: rgba(35, 49, 92, .45); color: #fff; font: inherit; font-weight: 700; font-size: 14px; text-shadow: 0 1px 0 rgba(35, 49, 92, .4); }
.ob-savebtn.is-cloud { background: rgba(31, 140, 120, .75); }
[data-orient="land"].is-short .ob-title { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-around; padding-top: calc(12px + var(--ob-sa-t)); }
[data-orient="land"].is-short .ob-logo b { font-size: 46px; }
[data-orient="land"].is-short .ob-title__low { width: 300px; }
[data-orient="land"].is-short .ob-title__btns { gap: 8px; }
[data-orient="land"].is-short .ob-btn { min-height: 46px; padding: 8px 14px; }

/* ---- シート（ステージ選び・きせかえ） ---- */
.ob-sheet { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--ob-sa-t) + 10px); margin: 0 auto; width: min(560px, 100%); display: flex; flex-direction: column; background: var(--ob-card); border-radius: 24px 24px 0 0; box-shadow: 0 -6px 24px rgba(35, 49, 92, .25); overflow: hidden; }
.ob-sheet__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 2px solid #e6eef8; }
.ob-sheet__head b { flex: 1; font-size: 20px; }
.ob-sheet__head .ob-ic { box-shadow: none; background: #eef4fb; }
.ob-sheet__foot { padding: 12px 16px calc(12px + var(--ob-sa-b)); border-top: 2px solid #e6eef8; }
.ob-custom { top: auto; height: min(62%, 560px); }
[data-orient="land"] .ob-custom { top: 0; bottom: 0; left: auto; right: var(--ob-sa-r); width: min(420px, 52%); height: auto; border-radius: 24px 0 0 24px; }
[data-orient="land"] .ob-map { left: auto; right: var(--ob-sa-r); width: min(520px, 62%); top: 0; border-radius: 24px 0 0 24px; }
.ob-custom__body { flex: 1; overflow-y: auto; padding: 4px 16px 10px; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.ob-custom__body h3 { margin: 14px 0 8px; font-size: 15px; }
.ob-sws { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ob-sw { aspect-ratio: 1; border-radius: 50%; border: 3px solid #fff; background: var(--c); box-shadow: 0 0 0 2px #d6e0ee; padding: 0; min-width: 36px; }
.ob-sw.is-on { box-shadow: 0 0 0 4px var(--ob-go); }
.ob-hats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ob-hat { min-height: 48px; border: 0; border-radius: 14px; background: #eef4fb; font-weight: 800; font-size: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ob-hat small { font-size: 11px; opacity: .8; }
.ob-hat.is-on { background: var(--ob-yel); }
.ob-hat.is-lock { opacity: .55; }
.ob-custom__note { font-size: 12px; opacity: .75; margin: 12px 0 0; line-height: 1.6; }
[data-orient="land"] .ob-data { left: auto; right: var(--ob-sa-r); width: min(520px, 62%); top: 0; border-radius: 24px 0 0 24px; }
.ob-data__body { flex: 1; overflow-y: auto; padding: 12px 16px calc(20px + var(--ob-sa-b)); -webkit-overflow-scrolling: touch; touch-action: pan-y; font-size: 15px; line-height: 1.7; }
.ob-data__body h3 { margin: 16px 0 6px; font-size: 16px; }
.ob-data__body p { margin: 6px 0; }
.ob-data__now { font-weight: 800; }
.ob-data__box { padding: 12px 14px; border-radius: 16px; background: #eef4fb; }
.ob-data__box.is-cloud { background: #e3f7f1; }
.ob-data__box b { display: block; font-size: 16px; line-height: 1.5; }
.ob-data__warn { font-size: 13px; color: #8a4b2a; }
.ob-data__steps { margin: 4px 0 14px; padding-left: 1.4em; }
.ob-data__steps li { margin: 4px 0; }
.ob-data__small { font-size: 13px; opacity: .8; }
.ob-data a.ob-btn { margin-top: 12px; text-align: center; text-decoration: none; box-sizing: border-box; }

/* ステージの地図: 島が ジグザグに ならぶ */
.ob-map__list { list-style: none; margin: 0; padding: 14px 14px calc(20px + var(--ob-sa-b)); overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; touch-action: pan-y; background: linear-gradient(#e7f6ff, #fff); }
.ob-node { position: relative; margin: 0 0 12px; padding-left: calc(var(--i) % 2 * 18%); padding-right: calc((var(--i) + 1) % 2 * 18%); }
.ob-node::before { content: ""; position: absolute; left: 50%; top: -14px; height: 16px; border-left: 4px dotted #9cc8ea; }
.ob-node:first-child::before { display: none; }
.ob-node button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 4px 0 #c4d3ea; text-align: left; }
.ob-node button:active { transform: translateY(3px); box-shadow: 0 1px 0 #c4d3ea; }
.ob-node__n { flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; color: #fff; background: radial-gradient(circle at 35% 30%, #a6e57f, #45b25b); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15); }
.ob-node__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ob-node__t b { font-size: 17px; }
.ob-node__t small { font-size: 12px; opacity: .75; line-height: 1.4; }
.ob-node__ok { color: #f5b400; font-size: 22px; }
.ob-node.is-lock button { background: #eef2f6; box-shadow: 0 4px 0 #d8dee6; cursor: default; }
.ob-node.is-lock .ob-node__n { background: #b8c2cf; font-size: 18px; }
.ob-node.is-clear .ob-node__n { background: radial-gradient(circle at 35% 30%, #ffe680, #f5b400); }
.ob-map__all { text-align: center; font-weight: 800; margin: 0; padding: 10px; background: #fff7d6; }

/* ---- 遊ぶ画面 ---- */
.ob-hud { position: absolute; inset: 0; }
.ob-touch { position: absolute; inset: 0; touch-action: none; z-index: 1; }
.ob-top { position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: calc(10px + var(--ob-sa-t)) calc(10px + var(--ob-sa-r)) 0 calc(10px + var(--ob-sa-l)); pointer-events: none; }
.ob-top > * { pointer-events: auto; }
.ob-top__mid { display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.ob-top__st { font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-time { font-size: 26px; font-weight: 800; color: #fff; text-shadow: 0 2px 0 rgba(35, 49, 92, .55), 0 0 6px rgba(35, 49, 92, .35); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ob-coins.is-bump, .ob-pill.is-bump { animation: obBump .25s; }
@keyframes obBump { 50% { transform: scale(1.18); } }
.ob-best { position: absolute; top: calc(66px + var(--ob-sa-t)); left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); z-index: 4; pointer-events: none; }
.ob-joy { position: absolute; left: calc(16px + var(--ob-sa-l)); bottom: calc(18px + var(--ob-sa-b)); width: var(--ob-joy); height: var(--ob-joy); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .22) 0 44%, rgba(255, 255, 255, .1) 45%); border: 3px solid rgba(255, 255, 255, .7); z-index: 6; touch-action: none; display: none; align-items: center; justify-content: center; }
.ob-joy__k { width: 44%; height: 44%; border-radius: 50%; background: rgba(255, 255, 255, .92); border: 3px solid #fff; box-shadow: 0 3px 8px rgba(35, 49, 92, .4); pointer-events: none; }
.ob-jump { position: absolute; right: calc(18px + var(--ob-sa-r)); bottom: calc(26px + var(--ob-sa-b)); width: var(--ob-jump); height: var(--ob-jump); border-radius: 50%; border: 4px solid #fff; background: linear-gradient(#ffb36b, var(--ob-go)); color: #fff; z-index: 6; touch-action: none; display: none; flex-direction: column; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 5px 0 #c9461f, 0 6px 14px rgba(0, 0, 0, .25); }
.ob-jump span { font-size: 34px; font-weight: 800; }
.ob-jump small { font-size: 11px; font-weight: 800; margin-top: 2px; }
.ob-jump.is-down { transform: translateY(4px) scale(.96); box-shadow: 0 1px 0 #c9461f; }
.is-touch .ob-joy { display: flex; }
.is-touch .ob-jump { display: flex; }
.ob-joy, .ob-joy *, .ob-jump, .ob-jump * { touch-action: none; -webkit-user-select: none; user-select: none; }
.is-short .ob-joy { bottom: calc(10px + var(--ob-sa-b)); }
.is-short .ob-jump { bottom: calc(14px + var(--ob-sa-b)); }
.ob-ready { position: absolute; left: 50%; bottom: calc(26% + var(--ob-sa-b)); transform: translateX(-50%); z-index: 4; padding: 10px 18px; border-radius: 999px; background: rgba(35, 49, 92, .72); color: #fff; font-weight: 800; font-size: 15px; white-space: nowrap; pointer-events: none; animation: obPulse 1.4s ease-in-out infinite; }
.ob-ready.is-off { display: none; }
@keyframes obPulse { 50% { transform: translateX(-50%) scale(1.05); } }
.ob-tip { position: absolute; left: 50%; top: calc(84px + var(--ob-sa-t)); transform: translate(-50%, -8px); width: max-content; max-width: min(92vw, 520px); z-index: 4; padding: 10px 16px; border-radius: 16px; background: rgba(255, 255, 255, .95); font-weight: 800; font-size: 15px; line-height: 1.5; text-align: center; box-shadow: 0 4px 0 rgba(35, 49, 92, .2); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.ob-tip.is-on { opacity: 1; transform: translate(-50%, 0); }
.ob-banner { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(.6); z-index: 4; text-align: center; color: #fff; font-weight: 800; font-size: clamp(30px, 8vw, 48px); -webkit-text-stroke: 2px var(--ob-ink); paint-order: stroke fill; opacity: 0; pointer-events: none; white-space: nowrap; }
.ob-banner small { display: block; font-size: .45em; -webkit-text-stroke: 1px var(--ob-ink); }
.ob-banner em { display: block; font-style: normal; font-size: .36em; margin-top: 6px; -webkit-text-stroke: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); white-space: normal; max-width: 86vw; }
.ob-banner.is-on { animation: obBan 1.6s ease-out forwards; }
@keyframes obBan { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 20% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
.ob-toast { position: absolute; left: 50%; bottom: calc(40% + var(--ob-sa-b)); transform: translateX(-50%); z-index: 4; padding: 8px 14px; border-radius: 999px; background: rgba(35, 49, 92, .8); color: #fff; font-weight: 800; font-size: 14px; opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap; }
.ob-toast.is-on { opacity: 1; }
.ob-flash { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
.ob-flash.is-on { animation: obFlash .45s ease-out; }
@keyframes obFlash { 0% { opacity: .75; } 100% { opacity: 0; } }

/* ---- ポーズ・結果 ---- */
.ob-layer { position: absolute; inset: 0; z-index: 10; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(35, 49, 92, .45); }
.ob-layer.is-on { display: flex; }
.ob-menu { width: min(360px, 100%); max-height: 100%; overflow-y: auto; display: grid; gap: 10px; padding: 18px 16px; border-radius: 24px; background: var(--ob-card); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.ob-menu__h { text-align: center; font-size: 24px; }
.ob-menu__row { display: flex; gap: 8px; align-items: center; justify-content: center; }
.ob-menu__row .ob-ic { background: #eef4fb; box-shadow: none; }
.ob-tg { flex: 1; min-height: 46px; border: 0; border-radius: 14px; background: #eef4fb; font-weight: 800; font-size: 14px; }
.ob-tg.is-on { background: #d9f7ef; }
.ob-result__st { text-align: center; font-weight: 800; opacity: .75; }
.ob-result__time { text-align: center; font-size: 46px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ob-result__best { justify-self: center; padding: 4px 14px; border-radius: 999px; background: var(--ob-yel); font-weight: 800; animation: obBump .5s 2; }
.ob-result__prev { text-align: center; font-weight: 700; opacity: .7; }
.ob-result__row { display: flex; justify-content: center; gap: 18px; font-weight: 800; }
.ob-result__new { text-align: center; font-weight: 800; color: #c25a00; }
[data-orient="land"].is-short .ob-menu { gap: 6px; padding: 12px; }
[data-orient="land"].is-short .ob-menu .ob-btn { min-height: 42px; padding: 6px 12px; font-size: 16px; }
[data-orient="land"].is-short .ob-result__time { font-size: 34px; }

/* ---- あそびかた ---- */
.ob-tut { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(35, 49, 92, .5); }
.ob-tut__card { width: min(360px, 100%); padding: 20px 18px 16px; border-radius: 24px; background: var(--ob-card); text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.ob-tut__i { font-size: 54px; line-height: 1.1; }
.ob-tut__card b { display: block; font-size: 22px; margin: 6px 0; }
.ob-tut__card p { margin: 0 0 12px; font-size: 16px; line-height: 1.7; font-weight: 700; }
.ob-tut__dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
.ob-tut__dots i { width: 9px; height: 9px; border-radius: 50%; background: #d6e0ee; }
.ob-tut__dots i.is-on { background: var(--ob-go); }
.ob-tut__btns { display: flex; gap: 10px; }
[data-orient="land"].is-short .ob-tut__i { font-size: 36px; }
[data-orient="land"].is-short .ob-tut__card { padding: 12px 16px; }
[data-orient="land"].is-short .ob-tut__card p { margin-bottom: 8px; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .ob-banner.is-on, .ob-ready, .ob-result__best { animation-duration: .01s; } }
/* コイン（絵文字に頼らない） */
.ob-coin { display: inline-block; width: 1em; height: 1em; margin-right: 3px; vertical-align: -0.12em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3a6 0 18%, #ffd23f 19% 62%, #e0a400 63%); box-shadow: inset 0 0 0 2px #c98f00; font-style: normal; }