/* Mana / oracle symbol pips. The official Scryfall card-symbol SVGs (tan circle
   + black glyph) rendered everywhere a {…} symbol appears: card viewer, commanders
   board, proxy editor, deck viewer, hover popovers. Generic, section-agnostic
   classes, loaded globally from shell.html so every section styles them the same.
   Markup is emitted by /shared/mana-render.js. Sizes are em-based so a pip scales
   with whatever text it sits in. */

/* Row of pips for a mana cost ("{3}{W}{U}"). */
.mana-pips {
	display: inline-flex;
	gap: 3px;
	flex-wrap: wrap;
	vertical-align: text-bottom;
}

/* One pip. Default form is the SVG icon: a round box the glyph fills edge to
   edge (the SVG carries its own tan circle). */
.mana-sym {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.2em;
	height: 1.2em;
	min-width: 1.2em;
	border-radius: 50%;
	overflow: hidden;
	box-sizing: border-box;
	vertical-align: text-bottom;
}
.mana-sym svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Fallback for any symbol we have no SVG for: a neutral gray pill with the raw
   text. Light gray on dark themes, darker gray with light text on the light theme. */
.mana-sym-generic {
	width: auto;
	min-width: 1.2em;
	height: 1.2em;
	padding: 0 0.35em;
	border-radius: 999px;
	overflow: visible;
	background: oklch(0.78 0.006 70);
	color: oklch(0.24 0.006 60);
	font-family: var(--font-mono, monospace);
	font-size: 0.72em;
	font-weight: 700;
	line-height: 1;
}
[data-theme="light"] .mana-sym-generic {
	background: oklch(0.6 0.006 70);
	color: oklch(0.99 0 0);
}