/* DSM Review Score — skin styles */

.dsm-rs-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
	margin: 24px 0;
}

.dsm-rs-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.dsm-rs-label {
	font-size: 0.85em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.8;
	text-align: center;
}

.dsm-rs-number { font-weight: 800; line-height: 1; }
.dsm-rs-suffix { font-size: 0.5em; font-weight: 600; opacity: 0.7; margin-left: 2px; }
.dsm-rs-suffix-small { font-size: 0.6em; opacity: 0.7; }

/* ---- Ring / Gauge (conic-gradient circle) ---- */
.dsm-rs-skin-ring .dsm-rs-circle,
.dsm-rs-skin-gauge .dsm-rs-circle {
	position: relative;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: conic-gradient( var(--dsm-rs-color) calc(var(--dsm-rs-percent) * 1%), var(--dsm-rs-track) 0 );
	display: flex;
	align-items: center;
	justify-content: center;
}
.dsm-rs-skin-ring .dsm-rs-circle::before {
	content: '';
	position: absolute;
	inset: 14%;
	border-radius: 50%;
	background: var(--dsm-rs-track);
}
.dsm-rs-skin-ring .dsm-rs-number,
.dsm-rs-skin-gauge .dsm-rs-number {
	position: relative;
	z-index: 1;
	font-size: 1.4em;
}
.dsm-rs-skin-gauge .dsm-rs-number { color: #fff; }

/* ---- Bar ---- */
.dsm-rs-skin-bar .dsm-rs-block { align-items: stretch; width: 100%; min-width: 200px; }
.dsm-rs-bar-row { display: flex; justify-content: space-between; align-items: baseline; }
.dsm-rs-skin-bar .dsm-rs-number { font-size: 1.1em; }
.dsm-rs-bar-track {
	width: 100%;
	height: 10px;
	border-radius: 5px;
	background: var(--dsm-rs-track);
	overflow: hidden;
}
.dsm-rs-bar-fill {
	height: 100%;
	width: calc(var(--dsm-rs-percent) * 1%);
	background: var(--dsm-rs-color);
	transition: width 0.3s ease;
}

/* ---- Badge / Stamp ---- */
.dsm-rs-stamp {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 4px solid var(--dsm-rs-color);
	background: var(--dsm-rs-track);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 3px rgba(0,0,0,0.3) inset;
}
.dsm-rs-stamp .dsm-rs-number { font-size: 1.5em; }

/* ---- Minimal ---- */
.dsm-rs-skin-minimal .dsm-rs-block { flex-direction: row; align-items: baseline; gap: 6px; }
.dsm-rs-skin-minimal .dsm-rs-number { font-size: 1.4em; color: var(--dsm-rs-color); }

/* ---- Reader block / voting ---- */
.dsm-rs-reader-block { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.dsm-rs-not-rated { font-size: 0.85em; opacity: 0.65; margin: 0; }
.dsm-rs-voted-note { font-size: 0.8em; opacity: 0.6; margin: 0; }

.dsm-rs-vote-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 180px;
}
.dsm-rs-vote-form label { font-size: 0.85em; opacity: 0.8; }
.dsm-rs-vote-range { width: 100%; }
.dsm-rs-vote-submit {
	padding: 6px 16px;
	border-radius: 4px;
	border: 2px solid var(--dsm-rs-color, #aa3333);
	background: transparent;
	color: inherit;
	cursor: pointer;
	font-weight: 700;
}
.dsm-rs-vote-submit:hover { background: var(--dsm-rs-color, #aa3333); color: #fff; }
.dsm-rs-vote-thanks { font-size: 0.85em; opacity: 0.8; }

/* ---- Verdict ---- */
.dsm-rs-verdict {
	flex-basis: 100%;
	margin: 4px 0 0;
	padding: 10px 16px;
	border-left: 3px solid var(--dsm-rs-accent, #aa3333);
	font-style: italic;
	opacity: 0.9;
	max-width: 60ch;
}