/* りんかワールド — ゲームのページの「わく」（2026-09-27）
 * inc/game-shell.php が出す <div class="rgs"> …帯（もどる・全画面）＋ .rgs-stage（ゲームの入れ物）
 * ・スマホ：サイトのヘッダーを出さず、ゲームを画面いっぱい（帯のぶんだけ引く）。横持ちは帯を左のたてに。
 * ・PC：ヘッダーはそのまま。ゲームは本文の枠の幅にぴったり（横長のゲームは 16:9、縦長のゲームは画面の高さ）。
 * ・全画面：Fullscreen API（:fullscreen）／使えない端末は .is-pseudo-fs（position:fixed で画面いっぱい）。
 * ・遊んでいない時（.is-idle）はゲームの上でも縦スクロールできる（touch-action: pan-y）。
 * 効くのは body.rinka-game-page（inc/game-shell.php の body クラス）と .rgs の中だけ＝ほかのページには影響しない。
 */

/* ---------- 0. ゲームのページでは本文の箱の「ふわっと出る」動き（transform）を止める ----------
 * .rinka-fansite の rinka-rise（animation-fill-mode: both）が transform を残し、ゲームの position:fixed が
 * 画面ではなく本文の箱に閉じこめられて「枠からはみ出す・見切れる」原因になっていた。 */
body.rinka-game-page .rinka-fansite { animation: none !important; transform: none !important; }

/* ゲームが付ける「ページをスクロールさせない」鍵は、全画面の時だけ効かせる（ふだんは下の紹介文まで行ける） */
html.rgs-on:not(.rgs-fs-lock),
html.rgs-on:not(.rgs-fs-lock) body {
	overflow: visible !important;
	overflow-x: clip !important;
}
/* :has に対応していない古いブラウザでは上の JS の印（rgs-on）だけで効く（別のかたまりにして、こちらが無視されても上は生きる） */
html:has(> body.rinka-game-page):not(.rgs-fs-lock),
html:has(> body.rinka-game-page):not(.rgs-fs-lock) body {
	overflow: visible !important;
	overflow-x: clip !important;
}
html.rgs-fs-lock, html.rgs-fs-lock body { overflow: hidden !important; overscroll-behavior: none; }

/* ---------- 1. わく ---------- */
.rgs {
	--rgs-bar: 44px;
	--rgs-ink: #7a3d62;
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0 0 20px;
	background: #1d1433;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 6px 22px rgba(90, 40, 80, .16);
}
.rgs-bar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	height: var(--rgs-bar);
	padding: 0 4px;
	background: linear-gradient(180deg, #fff 0%, #fff3f8 100%);
	color: var(--rgs-ink);
	border-bottom: 1px solid rgba(244, 196, 220, .8);
	position: relative;
	z-index: 2;
}
.rgs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 44px;
	height: 44px;
	margin: 0;
	padding: 0 10px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: inherit;
	font: 700 14px/1 "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
	letter-spacing: .02em;
	text-decoration: none !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: background-color .2s ease;
}
.rgs-btn:hover { background: rgba(255, 143, 191, .16); color: inherit; }
.rgs-btn:active { background: rgba(255, 143, 191, .26); }
.rgs-btn:focus-visible { outline: 3px solid #ff8fbf; outline-offset: -3px; }
.rgs-ico { display: block; flex: none; }
.rgs-ico--off { display: none; }
.rgs.is-fs .rgs-ico--on { display: none; }
.rgs.is-fs .rgs-ico--off { display: block; }
.rgs-back { padding-left: 4px; }
.rgs-back__t { white-space: nowrap; }

.rgs-stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	contain: layout paint; /* 中の position:fixed をこの箱の中に収める */
	background: #120c22;
}
/* ゲームの入れ物（#xxx-app）は、ゲーム側の CSS が position:fixed; inset:0（画面いっぱい）にしている。
 * わくの中では「箱いっぱい」にする＝ゲームは箱の大きさで並ぶ */
.rgs:not(.rgs--auto) > .rgs-stage > div {
	position: absolute !important;
	inset: 0 !important;
	top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
}

/* PC の枠の形 */
.rgs--land > .rgs-stage { aspect-ratio: 16 / 9; max-height: calc(100vh - 64px); min-height: 360px; }
.rgs--tall > .rgs-stage { height: calc(100vh - 64px); max-height: 940px; min-height: 480px; }
/* カードゲーム（ふつうのページの部品）＝中身の高さのまま */
.rgs--auto { background: transparent; box-shadow: none; overflow: visible; border-radius: 16px; }
.rgs--auto > .rgs-bar { border-radius: 16px 16px 0 0; }
.rgs--auto > .rgs-stage { overflow: visible; contain: none; background: transparent; }

/* ---------- 2. スマホ（幅の狭い画面・タッチ端末）：サイトのヘッダーを出さない・ゲームを画面いっぱいに ---------- */
@media (max-width: 833px), (hover: none) and (pointer: coarse) {
	body.rinka-game-page .rinka-ap-creator-bar,
	body.rinka-game-page #header-container,
	body.rinka-game-page .header-container,
	body.rinka-game-page #breadcrumb,
	body.rinka-game-page .breadcrumb { display: none !important; }
	body.rinka-game-page #container,
	body.rinka-game-page #content,
	body.rinka-game-page #content-in,
	body.rinka-game-page #main,
	body.rinka-game-page .rinka-fansite { margin-top: 0 !important; padding-top: 0 !important; }
	body.rinka-game-page { padding-top: 0 !important; }

	body.rinka-game-page .rgs:not(.rgs--auto) {
		width: 100vw;
		max-width: none;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		border-radius: 0;
		box-shadow: none;
	}
	body.rinka-game-page .rgs:not(.rgs--auto) > .rgs-stage {
		aspect-ratio: auto;
		height: calc(100vh - var(--rgs-bar));
		height: calc(100svh - var(--rgs-bar));
		max-height: none;
		min-height: 0;
	}
	.rgs-back__t { font-size: 13px; }
}
/* スマホの横持ち：帯を左のたてにして、ゲームの高さを1pxも減らさない */
@media (orientation: landscape) and (max-height: 540px) {
	.rgs:not(.rgs--auto) { flex-direction: row; }
	.rgs:not(.rgs--auto) > .rgs-bar {
		flex-direction: column;
		justify-content: flex-start;
		width: calc(var(--rgs-bar) + env(safe-area-inset-left, 0px));
		height: auto;
		padding: max(4px, env(safe-area-inset-top, 0px)) 0 max(4px, env(safe-area-inset-bottom, 0px)) env(safe-area-inset-left, 0px);
		border-bottom: 0;
		border-right: 1px solid rgba(244, 196, 220, .8);
		background: linear-gradient(90deg, #fff 0%, #fff3f8 100%);
	}
	.rgs:not(.rgs--auto) > .rgs-bar .rgs-back { padding: 0; }
	.rgs:not(.rgs--auto) .rgs-back__t { display: none; }
	body.rinka-game-page .rgs:not(.rgs--auto) > .rgs-stage,
	.rgs:not(.rgs--auto) > .rgs-stage {
		height: 100vh;
		height: 100svh;
		max-height: none;
		min-height: 0;
		aspect-ratio: auto;
	}
}

/* ---------- 3. 全画面 ---------- */
.rgs:fullscreen { width: 100vw; height: 100vh; margin: 0; border-radius: 0; box-shadow: none; }
.rgs:-webkit-full-screen { width: 100vw; height: 100vh; margin: 0; border-radius: 0; box-shadow: none; }
.rgs.is-pseudo-fs {
	position: fixed !important;
	inset: 0;
	top: 0; left: 0;
	width: 100vw !important;
	max-width: none !important;
	height: 100vh;
	height: 100dvh;
	margin: 0 !important;
	border-radius: 0;
	box-shadow: none;
	z-index: 2147483600;
	padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) 0;
	background: #1d1433;
}
.rgs.is-fs > .rgs-stage,
body.rinka-game-page .rgs.is-fs > .rgs-stage {
	flex: 1 1 auto;
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	aspect-ratio: auto !important;
}
.rgs.is-fs > .rgs-bar { background: #1d1433; color: #ffe3f0; border-color: rgba(255, 255, 255, .12); }
.rgs.is-fs .rgs-btn:hover { background: rgba(255, 255, 255, .12); }
.rgs--auto.is-fs { background: #1d1433; overflow: hidden; }
.rgs--auto.is-fs > .rgs-bar { border-radius: 0; }
.rgs--auto.is-fs > .rgs-stage { overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ---------- 4. 遊んでいない時は、ゲームの上でも縦スクロールでページを下へ ---------- */
.rgs:not(.rgs--auto).is-idle > .rgs-stage,
.rgs:not(.rgs--auto).is-idle > .rgs-stage * { touch-action: pan-y !important; }
/* ゲームの中のメニューがスクロールする時（びゅんびゅんの基地など）も、いちばん下まで行ったら続けてページが動く */
.rgs:not(.rgs--auto).is-idle > .rgs-stage * { overscroll-behavior: auto !important; }

/* ---------- 5. ゲームが見えている間は、ゲームにかぶる浮き部品（下のボタン列・マスコット・ポスト）をしまう ---------- */
html.rgs-inview .mobile-footer-menu-buttons,
html.rgs-inview .rinka-mascot,
html.rgs-inview .rinka-totop,
html.rgs-inview .rinka-fs-bunny,
html.rgs-inview .rinka-fs-xwidget,
html.rgs-inview .rinka-fs-xwidget-open {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: opacity .2s ease, visibility 0s linear .2s;
}

@media (prefers-reduced-motion: reduce) {
	.rgs-btn { transition: none; }
}

/* 全画面ボタンの左の「全画面でのプレイがおすすめ」（2026-09-27 制作者：2行にしない・文字は小さくてよい） */
.rgs-right { display: inline-flex; align-items: center; gap: 2px; min-width: 0; flex: 0 1 auto; }
.rgs-hint {
	font-size: 11px;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	color: #b0507e;
	opacity: .9;
}
.rgs-back { flex: 0 0 auto; }
.rgs.is-fs .rgs-hint { display: none; }
.rgs-hint__s { display: none; }
@media (max-width: 360px) { .rgs-hint__l { display: none; } .rgs-hint__s { display: inline; } }