/* ===================================================================
   Four Moons — compact chip + info modal
   =================================================================== */

/* Moon colour tokens (fallbacks for surfaces where aerth-pages is the only CSS) */
:root {
	--luna:     #b8c5d6;
	--ignis:    #d84a4a;
	--umbra:    #6a5f7a;
	--nyxvasha: #a37fbb;
}

/* ── Compact chip ────────────────────────────────────────────────── */
.moon-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.55rem;
	background: var(--lz-panel-2, #1a1f26);
	border: 1px solid var(--lz-border-2, rgba(255,255,255,0.14));
	border-radius: 3px;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--lz-text-muted, #8a8578);
	cursor: pointer;
	font-family: inherit;
	line-height: 1.4;
	vertical-align: middle;
}
.moon-chip:hover {
	border-color: var(--lz-gold, #c9a769);
	color: var(--lz-text, #e8e4d8);
}

/* Single-moon tinted chips */
.moon-chip.moon-chip--luna     { border-color: var(--luna);     color: var(--luna);     }
.moon-chip.moon-chip--ignis    { border-color: var(--ignis);    color: var(--ignis);    }
.moon-chip.moon-chip--umbra    { border-color: var(--umbra);    color: var(--umbra);    }
.moon-chip.moon-chip--nyxvasha { border-color: var(--nyxvasha); color: var(--nyxvasha); }

/* Conjunction chip */
.moon-chip.moon-chip--conjunction {
	background: linear-gradient(90deg, rgba(184,197,214,0.12), rgba(216,74,74,0.12));
	border-color: var(--lz-gold, #c9a769);
	color: var(--lz-gold, #c9a769);
}
.moon-chip.moon-chip--conjunction .moon-chip-glyphs {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 0.9rem;
	letter-spacing: 0;
	text-transform: none;
}

/* Glyph dot */
.moon-chip-glyph {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
	box-shadow: 0 0 5px currentColor;
}
.moon-chip-glyph.moon-chip-glyph--luna     { background: var(--luna);     }
.moon-chip-glyph.moon-chip-glyph--ignis    { background: var(--ignis);    }
.moon-chip-glyph.moon-chip-glyph--umbra    { background: var(--umbra);    }
.moon-chip-glyph.moon-chip-glyph--nyxvasha { background: var(--nyxvasha); }

/* Row wrappers on each surface */
.lz-enc-phase-moons {
	display: inline-flex;
	gap: 0.35rem;
	margin-left: 0.5rem;
	vertical-align: middle;
}
.char-bind-moons {
	display: flex;
	gap: 0.35rem;
	flex-wrap: wrap;
	margin-top: 0.4rem;
}
.cs-enc-preview-moons {
	display: inline-flex;
	gap: 0.3rem;
	margin-left: 0.35rem;
	vertical-align: middle;
}

/* ── Info modal ──────────────────────────────────────────────────── */
.lz-moons-modal {
	background: var(--lz-panel, #14181d);
	border: 1px solid var(--lz-border-2, rgba(255,255,255,0.14));
	border-radius: 6px;
	color: var(--lz-text, #e8e4d8);
	font-family: Georgia, 'Times New Roman', serif;
	max-width: min(520px, calc(100vw - 2rem));
	max-height: 80vh;
	padding: 0;
	overflow: hidden;
}
.lz-moons-modal::backdrop {
	background: rgba(0,0,0,0.6);
}
.lz-moons-modal-inner {
	padding: 1.5rem;
	overflow-y: auto;
	max-height: 80vh;
	position: relative;
}
.lz-moons-modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: none;
	border: none;
	color: var(--lz-text-muted, #8a8578);
	font-size: 1rem;
	cursor: pointer;
	line-height: 1;
	padding: 0.25rem;
}
.lz-moons-modal-close:hover { color: var(--lz-text, #e8e4d8); }
.lz-moons-modal-title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--lz-gold, #c9a769);
	margin: 0 2rem 0.25rem 0;
}
.lz-moons-modal-domain {
	font-size: 0.8rem;
	color: var(--lz-text-muted, #8a8578);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 1rem;
}
.lz-moons-modal-section {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--lz-border, rgba(255,255,255,0.08));
	font-size: 0.875rem;
	line-height: 1.6;
}
.lz-moons-modal-section-label {
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--lz-gold, #c9a769);
	margin-bottom: 0.5rem;
}
.lz-moons-modal-section ul {
	margin: 0;
	padding-left: 1.25rem;
}
.lz-moons-modal-section ul li {
	margin-bottom: 0.3rem;
}
.lz-moons-modal-section p {
	margin: 0;
}
.lz-moons-modal-section--cost {
	border-left: 3px solid var(--lz-red-hi, #d84a4a);
	padding-left: 0.75rem;
}
.lz-moons-modal-section--cost .lz-moons-modal-section-label {
	color: var(--lz-red-hi, #d84a4a);
}
.lz-moons-modal-section--cost li { color: var(--lz-red-hi, #d84a4a); }
.lz-moons-modal-section--world {
	border-left: 3px solid var(--luna, #b8c5d6);
	padding-left: 0.75rem;
}
.lz-moons-modal-section--world .lz-moons-modal-section-label {
	color: var(--luna, #b8c5d6);
}