/* =====================================================================
 * style-mobile.css ―  Cookie Clicker モバイル/タブレット向け補正
 * ---------------------------------------------------------------------
 * 設計方針:
 *  - PCレイアウト (3カラム: 左=クッキー / 中=メニュー / 右=ストア) を維持
 *  - 端末幅 ≤ 900px のみ調整
 *  - スマホ縦持ち (≤ 720px) では 1カラム + タブ風スクロールで操作可能に
 *  - タッチ操作向けに hit area を拡大
 * ===================================================================== */

/* --------------------------------------------------
 * タッチ向け汎用調整
 * -------------------------------------------------- */
html, body {
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
button, a.option, .product, .upgrade {
	touch-action: manipulation;
}

/* PWA standalone モード時の上部隙間 */
@media (display-mode: standalone) {
	body { padding-top: env(safe-area-inset-top); }
	#topBar { padding-top: env(safe-area-inset-top); }
}

/* iOSのoverscroll対策 */
body {
	overscroll-behavior: none;
}

/* --------------------------------------------------
 * ≤ 1024px (タブレット横): わずかに圧縮
 * -------------------------------------------------- */
@media (max-width: 1024px) {
	#sectionRight {
		width: 280px;
	}
	#sectionMiddle {
		right: 280px;
	}
	.separatorRight {
		right: 280px !important;
	}
}

/* --------------------------------------------------
 * ≤ 900px (タブレット縦/小型タブレット): よりコンパクト
 * -------------------------------------------------- */
@media (max-width: 900px) {
	#sectionRight {
		width: 240px;
	}
	#sectionMiddle {
		right: 240px;
		padding-left: 8px;
		margin-right: 8px;
	}
	.separatorRight {
		right: 240px !important;
	}
	#sectionLeft {
		width: 28%;
	}
	#sectionMiddle {
		left: 28%;
	}
	#topBar {
		font-size: 11px;
	}
}

/* --------------------------------------------------
 * ≤ 720px (スマホ): 縦並びレイアウト
 * -------------------------------------------------- */
@media (max-width: 720px) {

	/* topBarを薄く */
	#topBar {
		font-size: 10px;
		height: 28px;
	}
	.onWeb #game { top: 28px; }

	/* 3カラム → 縦並び 3段 */
	#sectionLeft {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		top: 0 !important;
		width: 100% !important;
		height: 38vh !important;
		bottom: auto !important;
		min-width: 0 !important;
		overflow: hidden !important;
	}

	#sectionMiddle {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		top: 38vh !important;
		bottom: 42vh !important;
		width: 100% !important;
		padding-left: 4px !important;
		margin-right: 4px !important;
		min-width: 0 !important;
	}

	#sectionRight {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		top: auto !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 42vh !important;
		overflow-y: scroll !important;
	}

	/* 縦仕切りは非表示 (横ボーダーに置換) */
	#leftBeam, #rightBeam, .separatorLeft, .separatorRight {
		display: none !important;
	}
	#sectionMiddle::before {
		content: '';
		position: absolute;
		left: 0; right: 0; top: 0;
		height: 3px;
		background: linear-gradient(180deg, rgba(0,0,0,0.7), transparent);
		pointer-events: none;
		z-index: 10;
	}
	#sectionRight::before {
		content: '';
		position: absolute;
		left: 0; right: 0; top: 0;
		height: 3px;
		background: linear-gradient(180deg, rgba(0,0,0,0.7), transparent);
		pointer-events: none;
		z-index: 10;
	}

	/* ─── 左パネル (クッキー) ─── */
	#sectionLeft .blackGradient,
	#sectionLeft .blackFiller {
		display: none !important;
	}
	#cookies {
		font-size: 18px !important;
		padding: 4px 8px !important;
	}
	#bakeryName {
		font-size: 14px !important;
	}
	#cookieAnchor {
		transform: scale(0.65);
		transform-origin: 50% 35%;
	}
	#bigCookie {
		/* タッチを取りこぼさないように */
		touch-action: manipulation;
	}
	#sectionLeftInfo {
		font-size: 10px !important;
	}

	/* ─── 中央エリア ─── */
	#centerArea {
		top: 80px !important;
		left: 4px !important;
		right: 0 !important;
	}
	#comments {
		font-size: 11px !important;
		padding: 2px 4px !important;
	}
	#commentsText {
		font-size: 10px !important;
		line-height: 1.2;
	}
	.panelButton {
		min-width: 0 !important;
		padding: 2px 4px !important;
		font-size: 11px !important;
	}
	#buildingsTitle, #storeTitle {
		font-size: 13px !important;
		padding: 4px 6px !important;
	}

	/* メニュー(オプション/記録/Mod画面)の幅調整 */
	#menu {
		font-size: 12px !important;
		padding: 4px !important;
	}
	#menu .section {
		font-size: 18px !important;
	}
	#menu .subsection {
		padding: 4px !important;
	}
	#menu .title {
		font-size: 13px !important;
	}
	#menu .listing {
		font-size: 11px !important;
		padding: 3px 2px !important;
	}
	#menu .option,
	#menu a.option {
		font-size: 10px !important;
		padding: 2px 4px !important;
		margin: 1px !important;
	}
	/* プレビュー画像など大きすぎる要素 */
	#menu img {
		max-width: 100% !important;
		height: auto;
	}

	/* ─── 右パネル (ストア) ─── */
	#store {
		padding: 0 !important;
	}
	.product {
		min-height: 56px !important;
	}
	.product .title {
		font-size: 12px !important;
	}
	.product .price {
		font-size: 11px !important;
	}
	.product .content {
		font-size: 10px !important;
	}
	.upgrade {
		width: 40px !important;
		height: 40px !important;
		background-size: cover !important;
	}

	/* ─── ツールチップ / プロンプト ─── */
	#tooltip, .framed.prompt, #prompt {
		max-width: 92vw !important;
		font-size: 11px !important;
	}
	#promptAnchor {
		left: 50% !important;
		transform: translateX(-50%) !important;
	}
	#prompt {
		min-width: 0 !important;
		max-width: 92vw !important;
	}

	/* ─── アセンション画面 ─── */
	#ascend {
		font-size: 11px !important;
	}

	/* ─── 通知 (右下) ─── */
	#notes {
		max-width: 80vw !important;
	}
	.note {
		max-width: 80vw !important;
		font-size: 11px !important;
	}

	/* topBarのリンクを少し小さく */
	#topBar a {
		padding: 0 4px !important;
		font-size: 10px !important;
	}
	#changeLanguage {
		padding-right: 18px !important;
	}
}

/* --------------------------------------------------
 * ≤ 480px (小型スマホ): さらに圧縮
 * -------------------------------------------------- */
@media (max-width: 480px) {
	#cookies {
		font-size: 15px !important;
	}
	#cookieAnchor {
		transform: scale(0.5);
	}
	#sectionLeft {
		height: 34vh !important;
	}
	#sectionMiddle {
		top: 34vh !important;
		bottom: 40vh !important;
	}
	#sectionRight {
		height: 40vh !important;
	}
	.panelButton {
		font-size: 10px !important;
	}
	#topBar {
		font-size: 9px !important;
	}
}

/* --------------------------------------------------
 * 横画面 (landscape) スマホ: 横並びに戻す
 * -------------------------------------------------- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
	#sectionLeft {
		position: absolute !important;
		left: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		width: 32% !important;
		height: auto !important;
	}
	#sectionMiddle {
		position: absolute !important;
		left: 32% !important;
		right: 200px !important;
		top: 0 !important;
		bottom: 0 !important;
		height: auto !important;
		padding-left: 4px !important;
		margin-right: 4px !important;
	}
	#sectionRight {
		position: absolute !important;
		right: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		width: 200px !important;
		height: auto !important;
	}
	#sectionMiddle::before,
	#sectionRight::before {
		display: none !important;
	}
	#leftBeam, #rightBeam, .separatorLeft, .separatorRight {
		display: block !important;
	}
	.separatorRight {
		right: 200px !important;
	}
	#cookieAnchor {
		transform: scale(0.55);
	}
}

/* --------------------------------------------------
 * MOD設定パネル (dungeon-explorer / time-factory) モバイル調整
 * -------------------------------------------------- */
@media (max-width: 720px) {
	.de-content {
		padding: 8px !important;
		max-height: 60vh !important;
	}
	.de-banner-title {
		font-size: 14px !important;
		letter-spacing: 0.5px !important;
	}
	.de-banner-sub {
		display: none;
	}
	.de-stat-row {
		gap: 8px !important;
		font-size: 11px !important;
	}
	.de-slot {
		min-width: 90px !important;
		font-size: 10px !important;
	}
	.de-tab {
		font-size: 11px !important;
		padding: 7px 2px !important;
	}
	.de-btn {
		font-size: 11px !important;
		padding: 4px 8px !important;
	}
	.de-dng {
		padding: 7px 10px !important;
	}
	.de-mat {
		font-size: 10px !important;
	}
}