/* ===================================================================
 * Cozy RO - halaman detail item (?module=item&action=view), 2026-09-30.
 * Dimuat header.php di seluruh modul item, jadi SEMUA aturan dicakup
 * .cozy-page-item (hanya item/view yang memakainya; item/index tetap
 * memakai banner bersama & template bawaan).
 * Komponen dasar (cg-hero, cg-facts, cg-card, cg-table, cg-chips) dari
 * cozy-ro.css; di sini hero bergambar koleksi, kartu statistik, baris
 * "who can equip", dan tabel lebar yang digulung di kotaknya sendiri.
 * Teks HP memakai px: main.css mengecilkan root font jadi 9.375px.
 * =================================================================== */

/* ---------- hero: gambar koleksi besar + nama ---------- */
.cozy-page-item .iv-hero {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 2.2rem 2.6rem;
	margin: 0 0 1.6rem;
}
.cozy-page-item .iv-art {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 132px;
	min-height: 132px;
	border-radius: 14px;
	line-height: 0;
	background: radial-gradient(circle at 50% 55%, #fff 0%, rgba(255, 255, 255, .65) 45%, rgba(255, 255, 255, 0) 72%);
}
.cozy-page-item .iv-art img { max-height: 124px; width: auto; }
.cozy-page-item .iv-art .iv-col { filter: drop-shadow(0 4px 6px rgba(70, 48, 94, .18)); }
.cozy-page-item .iv-art .iv-bigicon {
	width: 48px;
	height: 48px;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}
.cozy-page-item .iv-hero-text { flex: 1 1 auto; min-width: 0; }
.cozy-page-item .iv-kicker {
	margin: 0 0 .2rem;
	font-family: "montserrat-semibold", sans-serif;
	font-size: 1.25rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cg-gold-d);
}
.cozy-page-item .iv-hero h2 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 .3rem;
	overflow-wrap: anywhere;
}
.cozy-page-item .iv-hero h2 .cg-icon { flex: 0 0 auto; }
.cozy-page-item .iv-ident { margin: 0 0 1.2rem; }
.cozy-page-item .iv-ident code { font-size: 1.3rem; }

/* ---------- kartu statistik (tabel dua kolom) ---------- */
.cozy-page-item .iv-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 1.4rem; }
.cozy-page-item .iv-card h4 { margin: 0 0 .8rem; }
.cozy-page-item table.iv-kv th,
.cozy-page-item table.iv-kv td { padding: 7px 10px; }
.cozy-page-item table.iv-kv th { width: 52%; white-space: normal; }
.cozy-page-item table.iv-kv tr:last-child th,
.cozy-page-item table.iv-kv tr:last-child td { border-bottom: 0; }
.cozy-page-item .for-sale.yes { color: var(--cg-green); font-weight: 700; }
.cozy-page-item .not-applicable { color: var(--cg-muted); }

/* ---------- siapa yang bisa memakai ---------- */
.cozy-page-item .iv-equip { margin: 0 0 1.8rem; }
.cozy-page-item .iv-row {
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr);
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #eee8f3;
}
.cozy-page-item .iv-row:last-child { border-bottom: 0; padding-bottom: 0; }
.cozy-page-item .iv-row-label {
	font-family: "montserrat-semibold", sans-serif;
	font-size: 1.3rem;
	line-height: 1.6;
	color: var(--cg-purple);
}
.cozy-page-item .iv-row-val { min-width: 0; font-size: 1.45rem; }
.cozy-page-item .iv-row-val .cg-chips { margin: 0; gap: 6px; }
.cozy-page-item .iv-row-val .cg-chip { padding: 3px 10px; }

/* ---------- skrip (GM) ---------- */
.cozy-page-item .iv-scripts { margin: 0 0 1.8rem; }
.cozy-page-item .iv-scripts .cg-scroll { margin: 0; }
/* kolom label sempit (skrip butuh ruang), baris skrip rapat: .cozy-guide p
   memberi margin 1.2rem & max-width 78ch ke tiap <p class="script-line">. */
.cozy-page-item .iv-scripts table.iv-kv th { width: 30%; }
.cozy-page-item .iv-scripts p.script-line { margin: 0; max-width: none; }
.cozy-page-item .iv-scripts h4 .cg-badge,
.cozy-page-item .iv-h3 .cg-badge { vertical-align: 3px; }

/* ---------- judul bagian & tabel lebar ---------- */
.cozy-page-item .iv-h3 {
	margin: 2.8rem 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;
}
/* Tabel 4-6 kolom digulung di dalam kotaknya sendiri di HP, bukan diperas. */
.cozy-page-item .iv-wide > table.cg-table { min-width: 540px; }
.cozy-page-item .iv-wide .item-drop-mvp td { background: #fffaf0; }
.cozy-page-item .iv-wide .item-drop-card td { background: #f3f9ff; }

/* ---------- HP ---------- */
@media only screen and (max-width: 768px) {
	.cozy-page-item .iv-hero { padding: 1.6rem; gap: 14px; }
	.cozy-page-item .iv-art { width: 100px; min-height: 100px; }
	.cozy-page-item .iv-art img { max-height: 96px; }
	.cozy-page-item .iv-hero h2 { font-size: 24px; }
	.cozy-page-item .iv-kicker { font-size: 11.5px; }
	.cozy-page-item .iv-ident code { font-size: 12.5px; }
	.cozy-page-item .iv-row { grid-template-columns: 1fr; gap: 6px; }
	.cozy-page-item .iv-row-label { font-size: 13px; }
	.cozy-page-item .iv-row-val { font-size: 15px; }
	.cozy-page-item .iv-h3 { font-size: 19px; }
}
@media only screen and (max-width: 480px) {
	.cozy-page-item .iv-hero { flex-direction: column; align-items: stretch; }
	.cozy-page-item .iv-art { align-self: center; }
	/* cozy-ro.css melebarkan chip ke-4 jadi satu baris penuh; di sini 2 kolom rapi */
	.cozy-page-item .iv-hero .cg-facts li:nth-child(4) { grid-column: auto; }
}

/* --- 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; }
}