/* ===================================================================
 * Cozy RO - halaman detail monster (?module=monster&action=view), 2026-09-30.
 * Dimuat header.php di seluruh modul monster, jadi SEMUA aturan dicakup
 * .cozy-page-monster (hanya monster/view yang memakainya; monster/index
 * tetap memakai banner bersama & template bawaan).
 * Komponen dasar (cg-hero, cg-facts, cg-card, cg-table, cg-chips,
 * cg-callout) dari cozy-ro.css; di sini panggung sprite, lencana MVP,
 * warna elemen, ubin angka, ubin drop, dan tabel skill yang digulung.
 * Teks HP memakai px: main.css mengecilkan root font jadi 9.375px.
 * =================================================================== */

/* ---------- hero: sprite di atas panggung + nama ---------- */
.cozy-page-monster .mv-hero {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 2.2rem 2.6rem;
	margin: 0 0 1.4rem;
}
.cozy-page-monster .mv-hero-mvp {
	border-color: #d9b45a;
	background: linear-gradient(135deg, #fff6df 0%, #f3dca6 100%);
}
.cozy-page-monster .mv-stage {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 190px;
	min-height: 170px;
	padding: 0 0 14px;
	line-height: 0;
	background: radial-gradient(ellipse at 50% 88%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 62%);
}
/* panggung: elips ungu berbingkai emas, sprite berdiri di tengahnya */
.cozy-page-monster .mv-stage::before {
	content: "";
	position: absolute;
	left: 30px;
	right: 30px;
	bottom: 0;
	height: 30px;
	border-radius: 50%;
	background: radial-gradient(ellipse at 50% 40%, #6b4f93 0%, #3a2a52 58%, #2b2140 100%);
	box-shadow: 0 8px 16px rgba(43, 33, 64, .25), inset 0 0 0 2px rgba(255, 214, 120, .7);
}
.cozy-page-monster .mv-hero-mvp .mv-stage::before {
	box-shadow: 0 0 20px rgba(255, 196, 70, .55), inset 0 0 0 2px rgba(255, 214, 120, 1);
}
.cozy-page-monster .mv-stage .mv-sprite {
	position: relative;
	z-index: 1;
	max-width: 100%;
	max-height: 150px;
	width: auto;
	height: auto;
	filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .25));
}
.cozy-page-monster .mv-stage .mv-sprite.cg-mob-dim { filter: grayscale(.6); }
.cozy-page-monster .mv-hero-text { flex: 1 1 auto; min-width: 0; }
.cozy-page-monster .mv-kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin: 0 0 .3rem;
	font-family: "montserrat-semibold", sans-serif;
	font-size: 1.25rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cg-gold-d);
}
.cozy-page-monster .mv-kicker .cg-badge { vertical-align: 0; }
.cozy-page-monster .mv-hero h2 { margin: 0 0 .3rem; overflow-wrap: anywhere; }
.cozy-page-monster .mv-alias { margin: 0 0 .4rem; font-size: 1.4rem; color: #5b4a2e; }
.cozy-page-monster .mv-hero .cg-facts { margin-top: 1rem; }

/* lencana MVP / Mini Boss */
.cozy-page-monster .mv-badge-mvp { background: #b3261e; color: #fff; }
.cozy-page-monster .mv-badge-mini { background: #efe3fb; color: #5b2c91; }

/* chip elemen berwarna (element_type 0-9, config/elements.php) */
.cozy-page-monster .cg-facts li.mv-el-0 { background: #f3f2f5; border-color: #d8d4de; }
.cozy-page-monster .cg-facts li.mv-el-1 { background: #e3f0fd; border-color: #9cc3ec; }
.cozy-page-monster .cg-facts li.mv-el-2 { background: #f3eadb; border-color: #cfb58a; }
.cozy-page-monster .cg-facts li.mv-el-3 { background: #fde6e1; border-color: #eea596; }
.cozy-page-monster .cg-facts li.mv-el-4 { background: #e6f6ea; border-color: #9fd3ad; }
.cozy-page-monster .cg-facts li.mv-el-5 { background: #efe6f7; border-color: #bfa3d9; }
.cozy-page-monster .cg-facts li.mv-el-6 { background: #fff8dc; border-color: #e6cf7a; }
.cozy-page-monster .cg-facts li.mv-el-7 { background: #e6e2ee; border-color: #9d93b3; }
.cozy-page-monster .cg-facts li.mv-el-8 { background: #eef0fb; border-color: #b7bde6; }
.cozy-page-monster .cg-facts li.mv-el-9 { background: #ece9e4; border-color: #b3aa9c; }

/* ---------- ubin angka (HP / EXP) ---------- */
.cozy-page-monster .mv-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 0 0 1.4rem;
}
.cozy-page-monster .mv-tile {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 1.2rem 1.6rem;
	background: var(--cg-lav);
	border: 1px solid var(--cg-line);
	border-radius: 12px;
}
.cozy-page-monster .mv-tile-mvp { background: linear-gradient(180deg, #fffdf6 0%, #fff4d6 100%); border-color: #e3c56f; }
.cozy-page-monster .mv-num {
	font-family: "montserrat-extrabold", sans-serif;
	font-size: 2.8rem;
	line-height: 1.15;
	color: var(--cg-purple);
	overflow-wrap: anywhere;
}
.cozy-page-monster .mv-tile-mvp .mv-num { color: var(--cg-gold-d); }
.cozy-page-monster .mv-lbl {
	margin: .2rem 0 0;
	font-family: "montserrat-semibold", sans-serif;
	font-size: 1.2rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cg-muted);
}

/* ---------- kartu statistik ---------- */
.cozy-page-monster .mv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.cozy-page-monster .mv-card h4 { margin: 0 0 .8rem; }
.cozy-page-monster table.mv-kv th,
.cozy-page-monster table.mv-kv td { padding: 7px 10px; }
.cozy-page-monster table.mv-kv th { width: 52%; white-space: normal; }
.cozy-page-monster table.mv-kv tr:last-child th,
.cozy-page-monster table.mv-kv tr:last-child td { border-bottom: 0; }
.cozy-page-monster .not-applicable { color: var(--cg-muted); }
.cozy-page-monster .mv-modes { margin: 0; }

/* STR..LUK: enam kotak 3x2 */
.cozy-page-monster ul.mv-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
}
.cozy-page-monster ul.mv-stats > li {
	display: flex;
	flex-direction: column;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 8px 4px;
	background: var(--cg-lav);
	border: 1px solid var(--cg-line);
	border-radius: 10px;
	line-height: 1.2;
}
.cozy-page-monster .mv-stat-name {
	font-family: "montserrat-semibold", sans-serif;
	font-size: 1.15rem;
	letter-spacing: .08em;
	color: var(--cg-muted);
}
.cozy-page-monster .mv-stat-val {
	font-family: "montserrat-bold", sans-serif;
	font-size: 2rem;
	color: var(--cg-ink);
}

/* ---------- judul bagian ---------- */
.cozy-page-monster .mv-sec { margin: 2.6rem 0 0; }
.cozy-page-monster .mv-h3 {
	margin: 0 0 1rem;
	padding: 0 0 8px;
	border-bottom: 3px solid var(--cg-gold);
	font-family: "montserrat-bold", sans-serif;
	font-size: 2.2rem;
	line-height: 1.25;
	color: var(--cg-purple);
	text-transform: none;
	letter-spacing: 0;
	text-align: left;
}

/* ---------- ubin drop berikon ---------- */
.cozy-page-monster ul.mv-drops {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 10px;
	margin: 1.2rem 0 1.4rem;
	padding: 0;
}
.cozy-page-monster ul.mv-drops > li { list-style: none; margin: 0; }
.cozy-page-monster .mv-drop {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 8px 10px 8px 8px;
	background: #fff;
	border: 1px solid var(--cg-line);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(43, 33, 64, .05);
}
.cozy-page-monster .mv-drop-icon {
	flex: 0 0 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	border-radius: 8px;
	background: var(--cg-lav);
	line-height: 0;
}
.cozy-page-monster .mv-drop-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}
.cozy-page-monster .mv-drop-name { font-size: 1.45rem; color: var(--cg-ink); overflow-wrap: anywhere; }
.cozy-page-monster .mv-drop-name a { color: #5b2c91; text-decoration: none; }
.cozy-page-monster .mv-drop-name a:hover,
.cozy-page-monster .mv-drop-name a:focus { color: var(--cg-ink); text-decoration: underline; }
.cozy-page-monster .mv-drop-name .cg-badge { margin-right: 4px; vertical-align: 1px; }
.cozy-page-monster .mv-drop-id { font-size: 1.2rem; color: var(--cg-muted); }
.cozy-page-monster .mv-drop-chance {
	flex: 0 0 auto;
	padding: 3px 10px;
	border-radius: 999px;
	background: #efe9f7;
	color: var(--cg-purple);
	font-family: "montserrat-bold", sans-serif;
	font-size: 1.3rem;
	white-space: nowrap;
}
.cozy-page-monster .mv-drop.item-drop-card { border-color: #9cc3ec; background: linear-gradient(180deg, #f3f9ff 0%, #fff 100%); }
.cozy-page-monster .mv-drop.item-drop-card .mv-drop-chance { background: #e2ecf7; color: #1d4f86; }
.cozy-page-monster .mv-drop.item-drop-mvp { border-color: #e3c56f; background: linear-gradient(180deg, #fffaf0 0%, #fff 100%); }
.cozy-page-monster .mv-drop.item-drop-mvp .mv-drop-chance { background: #fff0c9; color: #6b4600; }
/* peluang card boss yang dirahasiakan ("???") */
.cozy-page-monster .mv-drop.item-drop-hidden .mv-drop-chance { background: var(--cg-ink); color: var(--cg-gold); }

/* ---------- tabel skill: 10 kolom, digulung di kotaknya sendiri ---------- */
.cozy-page-monster .mv-skills > table.cg-table { min-width: 760px; }
.cozy-page-monster .mv-skills td { white-space: nowrap; overflow-wrap: normal; }

/* ---------- HP ---------- */
@media only screen and (max-width: 768px) {
	.cozy-page-monster .mv-hero { padding: 1.6rem; gap: 14px; }
	.cozy-page-monster .mv-stage { width: 140px; min-height: 130px; padding-bottom: 12px; }
	.cozy-page-monster .mv-stage::before { height: 24px; left: 22px; right: 22px; }
	.cozy-page-monster .mv-stage .mv-sprite { max-height: 112px; }
	.cozy-page-monster .mv-hero h2 { font-size: 24px; }
	.cozy-page-monster .mv-kicker { font-size: 11.5px; }
	.cozy-page-monster .mv-alias { font-size: 13.5px; }
	.cozy-page-monster .mv-num { font-size: 22px; }
	.cozy-page-monster .mv-lbl { font-size: 11.5px; }
	.cozy-page-monster .mv-stat-name { font-size: 11px; }
	.cozy-page-monster .mv-stat-val { font-size: 18px; }
	.cozy-page-monster .mv-h3 { font-size: 19px; }
	.cozy-page-monster .mv-drop-name { font-size: 14.5px; }
	.cozy-page-monster .mv-drop-id { font-size: 12px; }
	.cozy-page-monster .mv-drop-chance { font-size: 13px; }
}
@media only screen and (max-width: 700px) {
	.cozy-page-monster .mv-cards { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 480px) {
	.cozy-page-monster .mv-hero { flex-direction: column; align-items: stretch; }
	/* cozy-ro.css melebarkan chip ke-4 jadi satu baris penuh; di sini 2x2 rapi */
	.cozy-page-monster .mv-hero .cg-facts li:nth-child(4) { grid-column: auto; }
	.cozy-page-monster .mv-stage { align-self: center; }
	.cozy-page-monster .mv-tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
	.cozy-page-monster .mv-tile { padding: 10px 12px; }
}

/* --- Daftar (item/index, monster/index): tabel bawaan FluxCP disamakan dengan
   gaya cg-* (2026-09-30). Hanya warna; overflow tidak diubah karena di HP tabel
   itu sendiri yang menggulung (cozy-fixes.css). --- */
.cozy-cp > table.horizontal-table th { background: #f6f2fb; color: #46305e; border-color: #e6def0; }
.cozy-cp > table.horizontal-table th a { color: #46305e; text-decoration: none; }
.cozy-cp > table.horizontal-table th a:hover { text-decoration: underline; }
.cozy-cp > table.horizontal-table td { border-color: #eee8f3; }
.cozy-cp > table.horizontal-table td a { color: #6a3fa0; }
.cozy-cp > table.horizontal-table tr:hover td { background: #faf7fd; }
@media only screen and (max-width: 768px) {
	/* Bayangan di tepi kanan/kiri = petunjuk tabel bisa digeser. */
	.cozy-cp > table.horizontal-table {
		background:
			linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
			linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%) 100% 0,
			radial-gradient(farthest-side at 0 50%, rgba(70, 48, 94, .22), rgba(70, 48, 94, 0)),
			radial-gradient(farthest-side at 100% 50%, rgba(70, 48, 94, .22), rgba(70, 48, 94, 0)) 100% 0;
		background-repeat: no-repeat;
		background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
		background-attachment: local, local, scroll, scroll;
	}
	.cozy-cp > table.horizontal-table tr:hover td { background: transparent; }
}