/* ===================================================================
 * Cozy RO - halaman Monthly Event / Zodiac Festival (?module=event),
 * 2026-09-30. Dimuat header.php hanya untuk modul event. Semua aturan
 * dicakup .cozy-page-event; komponen dasar (kartu, langkah, chip, callout,
 * tabel) datang dari css/cozy-ro.css (.cozy-guide, cg-*). Di sini hanya:
 * hero langit malam dengan bulan + Lunatic, pelat rasi bulan ini, kartu
 * hadiah, medali 3 besar Book of Stars, dan keadaan kosong.
 * Teks memakai px: main.css mengecilkan root font jadi 9.375px di HP.
 * =================================================================== */

/* ---------- hero: langit malam berbintang ---------- */
.cozy-page-event .cozy-ev-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 22px 26px 20px;
	border-color: #4d3a6e;
	background:
		radial-gradient(circle 1.6px at 8% 18%, rgba(255, 255, 255, .95) 98%, rgba(255, 255, 255, 0) 100%),
		radial-gradient(circle 1.2px at 22% 78%, rgba(255, 255, 255, .8) 98%, rgba(255, 255, 255, 0) 100%),
		radial-gradient(circle 1px at 37% 12%, rgba(255, 255, 255, .85) 98%, rgba(255, 255, 255, 0) 100%),
		radial-gradient(circle 1.4px at 52% 64%, rgba(255, 236, 180, .9) 98%, rgba(255, 236, 180, 0) 100%),
		radial-gradient(circle 1px at 61% 24%, rgba(255, 255, 255, .7) 98%, rgba(255, 255, 255, 0) 100%),
		radial-gradient(circle 1.8px at 70% 86%, rgba(255, 255, 255, .9) 98%, rgba(255, 255, 255, 0) 100%),
		radial-gradient(circle 1.2px at 84% 10%, rgba(255, 236, 180, .9) 98%, rgba(255, 236, 180, 0) 100%),
		radial-gradient(circle 1px at 93% 58%, rgba(255, 255, 255, .8) 98%, rgba(255, 255, 255, 0) 100%),
		linear-gradient(135deg, #221a36 0%, #362755 55%, #563a86 100%);
}
.cozy-page-event .cozy-ev-hero-text { flex: 1 1 auto; min-width: 0; }
.cozy-page-event .cozy-ev-kicker {
	margin: 0 0 2px;
	font-family: "montserrat-bold", sans-serif;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cg-gold);
}
.cozy-page-event .cozy-ev-hero h2 { color: #ffffff; }
.cozy-page-event .cozy-ev-hero .cg-lead { margin-bottom: 12px; color: #e9def8; }
.cozy-page-event .cozy-ev-hero .cg-lead strong { color: var(--cg-gold); }
.cozy-page-event .cozy-ev-hero .cg-facts li {
	background: rgba(255, 255, 255, .93);
	border-color: rgba(255, 214, 120, .7);
}

/* bulan purnama + Lunatic, dan pelat rasi di bawahnya */
.cozy-page-event .cozy-ev-hero-art {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.cozy-page-event .cozy-ev-moon {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 108px;
	height: 108px;
	padding-bottom: 18px;
	box-sizing: border-box;
	border-radius: 50%;
	line-height: 0;
	background: radial-gradient(circle at 38% 34%, #fffdf2 0%, #f7e9bd 55%, #e6cd86 100%);
	box-shadow: 0 0 0 6px rgba(255, 214, 120, .16), 0 0 38px rgba(255, 214, 120, .45);
}
.cozy-page-event .cozy-ev-moon img { animation: cozy-ev-hop .8s ease-in-out infinite alternate; }
@keyframes cozy-ev-hop {
	from { transform: translateY(0); }
	to   { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
	.cozy-page-event .cozy-ev-moon img { animation: none; }
}
.cozy-page-event .cozy-ev-sign {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px 4px 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 214, 120, .6);
	color: #ffe7a6;
	font-family: "montserrat-bold", sans-serif;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.cozy-page-event .cozy-ev-first { margin-top: 26px; }

/* bahan persembahan di langkah 2 */
.cozy-page-event .cozy-ev-mat .cg-icon { margin-right: 2px; }

/* ---------- kartu hadiah Crown / Diadem ---------- */
.cozy-page-event .cozy-ev-prize { min-height: 128px; }
.cozy-page-event .cg-card .cozy-ev-count {
	margin: 0 0 2px;
	font-family: "montserrat-extrabold", sans-serif;
	font-size: 30px;
	line-height: 1.1;
	color: var(--cg-gold-d);
}
.cozy-page-event .cozy-ev-prize h4 { font-size: 18px; }
.cozy-page-event .cozy-ev-prize h4 a { color: var(--cg-purple); }

/* chip langka (Gacha Ticket): boleh dua baris */
.cozy-page-event .cozy-ev-rare {
	border-color: #b8a0d8;
	background: #faf5ff;
	border-radius: 14px;
}
.cozy-page-event .cozy-ev-rare > span { min-width: 0; }
.cozy-page-event .cozy-ev-rare .cg-badge { vertical-align: 1px; }

/* ---------- Book of Stars: medali 3 besar ---------- */
.cozy-page-event .cozy-ev-rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 6px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--cg-lav);
	color: var(--cg-purple);
	font-family: "montserrat-bold", sans-serif;
	font-size: 13px;
	line-height: 1;
}
.cozy-page-event .cozy-ev-rank-1 { background: linear-gradient(135deg, #ffe38c 0%, #e0b340 100%); color: #4a3500; }
.cozy-page-event .cozy-ev-rank-2 { background: linear-gradient(135deg, #f1f3f7 0%, #c3c9d4 100%); color: #33384a; }
.cozy-page-event .cozy-ev-rank-3 { background: linear-gradient(135deg, #f6d4ad 0%, #c98a4b 100%); color: #4a2a10; }
.cozy-page-event table.cozy-ev-stars td:first-child,
.cozy-page-event table.cozy-ev-stars th:first-child { width: 48px; }
.cozy-page-event table.cozy-ev-table td { vertical-align: middle; }
/* kolom bulan (YYYY-MM) di Hall of Champions tidak dipatah */
.cozy-page-event table.cozy-ev-table td:first-child { white-space: nowrap; }

/* ---------- keadaan kosong ---------- */
.cozy-page-event .cozy-ev-empty {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 12px;
	padding: 16px 18px;
	background: #faf7fd;
	border: 1px dashed #d6c8e8;
	border-radius: 12px;
}
.cozy-page-event .cozy-ev-empty img { flex: 0 0 auto; max-height: 56px; width: auto; }
.cozy-page-event .cozy-ev-empty p { margin: 0; font-size: 15px; }

/* ---------- ponsel ---------- */
@media only screen and (max-width: 768px) {
	.cozy-page-event .cozy-ev-hero { padding: 18px 16px 16px; }
}
/* HP: bulan & pelat rasi jadi satu baris di atas judul. */
@media only screen and (max-width: 600px) {
	.cozy-page-event .cozy-ev-hero { flex-direction: column; align-items: stretch; gap: 10px; }
	.cozy-page-event .cozy-ev-hero-art { order: -1; flex-direction: row; justify-content: flex-start; gap: 14px; }
	.cozy-page-event .cozy-ev-moon { width: 72px; height: 72px; padding-bottom: 10px; }
	.cozy-page-event .cozy-ev-hero .cg-lead { font-size: 15px; }
	.cozy-page-event .cg-card .cozy-ev-count { font-size: 26px; }
	.cozy-page-event .cozy-ev-prize { min-height: 0; }
	.cozy-page-event .cozy-ev-prize h4 { font-size: 17px; }
	.cozy-page-event .cozy-ev-empty { padding: 14px; gap: 12px; }
	.cozy-page-event .cozy-ev-empty p { font-size: 14px; }
}