/*
 * 遊べるゲーム記事の見た目。
 *
 * これまで記事ごとに書かれていた style をここへ寄せた。
 * 見た目は今のものをそのまま引き継いでいる（赤い丸釦、浮き上がる影）。
 *
 * 特に `iframe { width:1300px; height:800px }` という素の指定は、
 * 記事の中の広告など別の iframe まで巻き込んでいたので、
 * 必ずゲームの枠の中だけに効くようにしている。
 */

.tg-game {
	margin: 1.6em 0 2em;
}

/* ── 別ページで開く釦 ── */

.tg-game__opens {
	margin: 0 0 .6em !important;
	text-align: center;
}

/*
 * 記事の中に直接書かれている .game-button と同じ見た目にしてある。
 * 昔の記事と新しい記事が並んでも違いが出ない。
 */
.entry-content .game-button,
.game-button {
	display: inline-block;
	padding: 15px 30px;
	margin: 10px;
	border: none;
	border-radius: 50px;
	background-color: #ff5f6d;
	color: #ffffff !important;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	box-shadow: 0px 5px 15px rgba(255, 95, 109, 0.4);
	transition: all 0.3s ease;
}

.entry-content .game-button:hover,
.game-button:hover {
	transform: translateY(-3px);
	box-shadow: 0px 8px 20px rgba(255, 95, 109, 0.6);
}

/* ── ゲームの枠 ── */

.tg-game__frame {
	width: var(--tg-w, 100%);
	max-width: 100%;
	height: var(--tg-h, 620px);
	margin: 0 auto;
	background: #10131a;
	overflow: hidden;
}

.tg-game__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0;
}

@media (max-width: 780px) {
	/* 狭い画面では指定の高さのままだと画面を覆ってしまう */
	.tg-game__frame {
		height: min(var(--tg-h, 620px), 70vh);
	}

	.entry-content .game-button,
	.game-button {
		padding: 12px 22px;
		font-size: 17px;
	}
}