/*
 * ROItemHover - hover card styles for item, monster & NPC links.
 * Glass-morphism card, matches the wiki2 React hover card look.
 *
 * Theme-following: the palette below defaults to the dark theme (the site's
 * default) and is swapped when the theme toggle sets html[data-theme="light"]
 * — see themes/mtskin/js/dark.js. Colours come from the --mt-* dark palette in
 * mt.css so the card sits with the rest of the panel instead of on top of it.
 */

.ro-item-hover-card {
	/* Dark palette (site default). */
	--roh-card-bd: rgba(255, 255, 255, 0.12);
	--roh-card-bg: rgba(15, 17, 22, 0.86);
	--roh-card-fg: #e8e3da;
	--roh-shadow: 0 18px 42px rgba(0, 0, 0, 0.65);
	--roh-panel-bd: rgba(255, 255, 255, 0.09);
	--roh-panel-bg: rgba(255, 255, 255, 0.035);
	--roh-id: #8b8695;
	--roh-muted: #7a7582;
	--roh-pill-bd: rgba(255, 255, 255, 0.1);
	--roh-pill-bg: rgba(255, 255, 255, 0.06);
	--roh-pill-fg: #b9b3c0;
	--roh-inset-bd: rgba(255, 255, 255, 0.09);
	--roh-inset-bg: rgba(255, 255, 255, 0.03);
	--roh-dash: rgba(255, 255, 255, 0.08);
	--roh-strong: #e8e3da;
	--roh-mvp-bd: rgba(201, 168, 76, 0.35);
	--roh-mvp-bg: linear-gradient(180deg, rgba(201, 168, 76, 0.14), rgba(255, 255, 255, 0.02));
	--roh-mvp-title: #d9bd6a;
	--roh-chip-bd: rgba(255, 255, 255, 0.1);
	--roh-chip-bg: rgba(255, 255, 255, 0.05);
	--roh-link: #d9bd6a;
	--roh-link-bd: rgba(201, 168, 76, 0.55);
	--roh-link-bg: rgba(201, 168, 76, 0.12);
	--roh-outline: rgba(201, 168, 76, 0.7);
	--roh-navi-bd: rgba(255, 255, 255, 0.16);
	--roh-navi-bg: rgba(255, 255, 255, 0.05);
	--roh-navi-bg-hover: rgba(255, 255, 255, 0.1);
	--roh-ok: #7fd48a;

	position: fixed;
	z-index: 10020;
	display: none;
	box-sizing: border-box;
	width: 600px;
	max-width: calc(100vw - 16px);
	max-height: 70vh;
	overflow-y: auto;
	margin: 0;
	padding: 12px;
	border-radius: 10px;
	border: 1px solid var(--roh-card-bd);
	background: var(--roh-card-bg);
	-webkit-backdrop-filter: blur(24px) saturate(1.8);
	backdrop-filter: blur(24px) saturate(1.8);
	box-shadow: var(--roh-shadow);
	color: var(--roh-card-fg);
	font-size: 13px;
	line-height: 1.45;
	text-align: left;
}

.ro-item-hover-card * {
	box-sizing: border-box;
}

/* Light palette — mirrors the light-mode values in mt.css (white surfaces,
 * ink text, green accent). */
html[data-theme="light"] .ro-item-hover-card {
	--roh-card-bd: rgba(255, 255, 255, 0.45);
	--roh-card-bg: rgba(255, 255, 255, 0.68);
	--roh-card-fg: #2d3033;
	--roh-shadow: 0 18px 42px rgba(20, 24, 33, 0.22);
	--roh-panel-bd: rgba(255, 255, 255, 0.45);
	--roh-panel-bg: rgba(248, 248, 248, 0.55);
	--roh-id: #6f7479;
	--roh-muted: #6f7479;
	--roh-pill-bd: rgba(255, 255, 255, 0.45);
	--roh-pill-bg: rgba(255, 255, 255, 0.55);
	--roh-pill-fg: #4f565d;
	--roh-inset-bd: rgba(255, 255, 255, 0.45);
	--roh-inset-bg: rgba(255, 255, 255, 0.35);
	--roh-dash: rgba(20, 24, 33, 0.1);
	--roh-strong: #2d3033;
	--roh-mvp-bd: rgba(138, 116, 40, 0.45);
	--roh-mvp-bg: linear-gradient(180deg, rgba(255, 233, 176, 0.42), rgba(255, 255, 255, 0.5));
	--roh-mvp-title: #7d5c07;
	--roh-chip-bd: rgba(20, 24, 33, 0.14);
	--roh-chip-bg: rgba(255, 255, 255, 0.55);
	--roh-link: #0b66c3;
	--roh-link-bd: rgba(11, 102, 195, 0.55);
	--roh-link-bg: rgba(225, 240, 255, 0.85);
	--roh-outline: rgba(11, 102, 195, 0.6);
	--roh-navi-bd: rgba(20, 24, 33, 0.25);
	--roh-navi-bg: rgba(255, 255, 255, 0.35);
	--roh-navi-bg-hover: rgba(255, 255, 255, 0.65);
	--roh-ok: #2e7d32;
}

/* NPC cards hold only a header + a single location row, so they are narrower. */
.ro-item-hover-card--npc {
	width: 420px;
}

/* Faint site-logo watermark centered in the card, behind the content
 * (negative z-index inside the card's stacking context) and it never
 * intercepts clicks. */
.ro-item-hover-watermark {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	z-index: -1;
	height: 50px;
	width: auto;
	max-width: 60%;
	object-fit: contain;
	opacity: 0.16;
	pointer-events: none;
	user-select: none;
}

/* Header row: item name left, type/slots pill right. */
.ro-item-hover-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 10px;
	margin-bottom: 10px;
	border: 1px solid var(--roh-panel-bd);
	border-radius: 8px;
	background: var(--roh-panel-bg);
}

.ro-item-hover-title {
	min-width: 0;
	font-weight: 800;
	font-size: 14px;
}

.ro-item-hover-id {
	margin-left: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--roh-id);
}

.ro-item-hover-type {
	flex: none;
	padding: 2px 8px;
	border: 1px solid var(--roh-pill-bd);
	border-radius: 999px;
	background: var(--roh-pill-bg);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--roh-pill-fg);
}

/* Body row: image left, info column right. */
.ro-item-hover-body {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.ro-item-hover-sprite {
	flex: none;
	width: 75px;
	height: 100px;
	margin: 0;
	object-fit: contain;
	image-rendering: pixelated;
	border-radius: 4px;
}

.ro-item-hover-info {
	flex: 1;
	min-width: 0;
}

.ro-item-hover-desc-text {
	white-space: pre-line;
	font-size: 14px;
	line-height: 1.55;
}

/* Monster hover card: sprite box left, two stat columns right. */
.ro-item-hover-monster-sprite-box {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 160px;
	max-width: 40%;
	min-height: 110px;
	padding: 6px;
	border: 1px solid var(--roh-inset-bd);
	border-radius: 8px;
	background: var(--roh-inset-bg);
}

.ro-item-hover-monster-sprite {
	display: block;
	max-width: 100%;
	max-height: 160px;
	width: auto;
	height: auto;
	image-rendering: pixelated;
}

/* NPC link: small sprite injected in front of the name in the article text.
 * Capped at 60x60 to keep the line height stable. */
.ro-item-hover-npc-inline {
	display: inline-block;
	max-width: 60px;
	max-height: 60px;
	width: auto;
	height: auto;
	margin-right: 4px;
	vertical-align: middle;
	object-fit: contain;
	image-rendering: pixelated;
}

/* The NPC card is narrower, so its sprite box shrinks with it. */
.ro-item-hover-card--npc .ro-item-hover-monster-sprite-box {
	width: 124px;
	min-height: 96px;
}

.ro-item-hover-mob-cols {
	display: grid;
	flex: 1;
	min-width: 0;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	column-gap: 18px;
	align-content: start;
}

/* A stat cell that spans both columns (the MvP EXP row). */
.ro-item-hover-stat--full {
	grid-column: 1 / -1;
}

.ro-item-hover-stat {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 4px 2px;
	border-bottom: 1px dashed var(--roh-dash);
}

.ro-item-hover-stat-label {
	flex: none;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--roh-muted);
}

.ro-item-hover-stat-val {
	flex: 1;
	min-width: 0;
	text-align: right;
	font-size: 13px;
	font-weight: 700;
	color: var(--roh-strong);
}

/* Mvp badge in the monster card header. */
.ro-item-hover-mvp {
	flex: none;
	padding: 2px 9px;
	border: 1px solid rgba(255, 217, 130, 0.6);
	border-radius: 999px;
	background: linear-gradient(135deg, #ffe9b0, #f6b93b);
	color: #6b4300;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Drop tables below the monster stats: normal drops + MVP reward rows. */
.ro-item-hover-drops {
	margin-top: 10px;
	padding: 8px 10px;
	border: 1px solid var(--roh-panel-bd);
	border-radius: 8px;
	background: var(--roh-panel-bg);
}

.ro-item-hover-drops--mvp {
	border-color: var(--roh-mvp-bd);
	background: var(--roh-mvp-bg);
}

.ro-item-hover-drops-title {
	margin-bottom: 6px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--roh-muted);
}

.ro-item-hover-drops--mvp .ro-item-hover-drops-title {
	color: var(--roh-mvp-title);
}

.ro-item-hover-drop-items {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
}

.ro-item-hover-drop-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 10px 2px 4px;
	border: 1px solid var(--roh-chip-bd);
	border-radius: 8px;
	background: var(--roh-chip-bg);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	color: inherit;
	text-decoration: none;
}

a.ro-item-hover-drop-item {
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

a.ro-item-hover-drop-item:hover {
	border-color: var(--roh-link-bd);
	background: var(--roh-link-bg);
	color: var(--roh-link);
}

a.ro-item-hover-drop-item:focus-visible {
	outline: 2px solid var(--roh-outline);
	outline-offset: 1px;
}

/* Item icons are shown at their natural 24x24 size — no box, no scaling. */
.ro-item-hover-drop-icon {
	flex: none;
	display: block;
	width: 24px;
	height: 24px;
	image-rendering: pixelated;
}

/* rAthena TIPBOX / NAVI chips rendered from item descriptions. */
.ro-item-hover-tipbox,
.ro-item-hover-navi {
	display: inline-block;
	padding: 1px 8px;
	margin: 2px;
	border: 1px dashed var(--roh-navi-bd);
	border-radius: 6px;
	background: var(--roh-navi-bg);
	font-weight: 700;
}

.ro-item-hover-navi {
	cursor: pointer;
	text-decoration: underline dotted;
}

.ro-item-hover-navi:hover {
	background: var(--roh-navi-bg-hover);
}

.ro-item-hover-navi-copied {
	color: var(--roh-ok) !important;
}

.ro-item-hover-loading,
.ro-item-hover-none {
	padding: 8px 10px;
	text-align: center;
	font-style: italic;
	color: var(--roh-muted);
}

/* Keep the stat columns readable when the card hugs narrow viewports. */
@media (max-width: 640px) {
	.ro-item-hover-monster-sprite-box {
		width: 120px;
		max-width: 36%;
		min-height: 96px;
	}
}