/* ================================================================
   Chip Component — chips.css
   Reusable milestone chip for Nomo webview pages.
   Requires: chips.js
   ================================================================ */

/* ---- Fuse UltraBlack (chip text font, matching AS3) ---- */
@font-face {
	font-family: 'FuseUltraBlack';
	src: url('fonts/Fuse-UltraBlack.otf') format('opentype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* ---- Base chip wrapper ---- */
.nomo-chip {
	position: relative;
	aspect-ratio: 1;
}

/* ---- Outer stroke ring ---- */
.nomo-chip-ring {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 3px solid #1a1a1a;
	background: var(--panel-bg);
	padding: 4%;
	box-sizing: border-box;
}

body.dark .nomo-chip-ring,
html.dark .nomo-chip-ring {
	border-color: var(--nomo-off-white);
}

/* ---- Colored face (base color shows through transparent mask areas) ---- */
.nomo-chip-face {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	overflow: hidden;
	background: var(--panel-bg);
}

/* ---- Chip top tinted with milestone color (via CSS mask) ---- */
.nomo-chip-color {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* ---- Logo at bottom ---- */
.nomo-chip-logo {
	position: absolute;
	bottom: 4%;
	left: 50%;
	transform: translateX(-50%);
	width: 28%;
	pointer-events: none;
	z-index: 3;
}

/* ---- Text positioning layer (covers the face, JS places lines inside) ---- */
.nomo-chip-text {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 2;
}

/* ---- Text lines (Fuse UltraBlack 80px, positioned absolutely by JS) ---- */
.nomo-chip-line {
	font-family: 'FuseUltraBlack', 'Arial Black', Impact, sans-serif;
	font-weight: 900;
	color: #ffffff;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 0.75;
	letter-spacing: -0.02em;
	font-size: 80px;
	margin: 0;
	padding: 0;
	position: absolute;
}