/* ============================================================
   Anti Radio Quiz — v1.0.0
   ============================================================ */

.artriv {
	--at-pink:    #ff2e88;
	--at-ok:      #22c55e;
	--at-no:      #ef4444;
	--at-bg:      #111111;
	--at-surface: #1c1c1c;
	--at-border:  #2a2a2a;
	--at-ink:     #f0f0f0;
	--at-dim:     rgba(240,240,240,.45);
	--at-radius:  6px;

	font-family:   'Courier New', Courier, monospace;
	background:    var(--at-bg);
	border:        1.5px solid var(--at-border);
	border-radius: var(--at-radius);
	padding:       22px 20px 18px;
	width:         100%;
	max-width:     100%;
	color:         var(--at-ink);
	box-sizing:    border-box;
}

body:not(.site-dark) .artriv {
	--at-bg:      #f7f7f7;
	--at-surface: #ffffff;
	--at-border:  #ddd;
	--at-ink:     #111111;
	--at-dim:     rgba(0,0,0,.45);
}

/* ── Head ───────────────────────────────────────────────── */
.artriv__head {
	display:        flex;
	align-items:    center;
	gap:            8px;
	margin-bottom:  14px;
	padding-bottom: 12px;
	border-bottom:  1.5px solid var(--at-border);
}
.artriv__icon {
	width: 20px; height: 20px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	border: 1.5px solid var(--at-pink);
	color: var(--at-pink);
	font-weight: bold; font-size: 13px;
	border-radius: 3px;
}
.artriv__title {
	flex: 1; min-width: 0;
	font-size: 12px; font-weight: bold;
	text-transform: uppercase; letter-spacing: 1.2px;
	color: var(--at-pink);
}
.artriv__score {
	font-size: 11px; letter-spacing: .6px;
	color: var(--at-dim);
	white-space: nowrap;
}

/* ── Question ───────────────────────────────────────────── */
.artriv__meta {
	font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px;
	color: var(--at-dim); margin-bottom: 8px;
}
.artriv__q {
	margin: 0 0 14px !important;
	font-size: 14px; font-weight: bold; line-height: 1.45;
	color: var(--at-ink);
	overflow-wrap: anywhere;
}

/* ── Answers ────────────────────────────────────────────── */
.artriv__answers {
	display: flex; flex-direction: column; gap: 7px;
}
.artriv__ans {
	display: block; width: 100%;
	text-align: left;
	font-family: inherit !important;
	font-size: 13px !important;
	line-height: 1.4;
	padding: 10px 12px !important;
	background: var(--at-surface) !important;
	color: var(--at-ink) !important;
	border: 1px solid var(--at-border) !important;
	border-left: 3px solid var(--at-border) !important;
	border-radius: var(--at-radius) !important;
	cursor: pointer;
	transition: border-color .15s, background .15s, opacity .15s;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
}
.artriv__ans:hover:not(:disabled) {
	border-color: var(--at-pink) !important;
}
.artriv__ans:disabled { cursor: default; }
.artriv__ans.is-correct {
	border-color: var(--at-ok) !important;
	border-left-width: 3px !important;
	background: color-mix(in srgb, var(--at-ok) 12%, var(--at-surface)) !important;
}
.artriv__ans.is-wrong {
	border-color: var(--at-no) !important;
	background: color-mix(in srgb, var(--at-no) 12%, var(--at-surface)) !important;
}
.artriv__ans.is-dim { opacity: .45; }

/* ── Result ─────────────────────────────────────────────── */
.artriv__result {
	margin-top: 12px;
	font-size: 12.5px; font-weight: bold;
	overflow-wrap: anywhere;
}
.artriv__result.is-ok { color: var(--at-ok); }
.artriv__result.is-no { color: var(--at-no); }

/* ── Next ───────────────────────────────────────────────── */
.artriv__next {
	display: inline-block; margin-top: 12px;
	font-family: inherit !important;
	font-size: 11px !important;
	text-transform: uppercase !important; letter-spacing: 1px !important;
	padding: 8px 14px !important;
	background: var(--at-pink) !important;
	color: #fff !important;
	border: 1px solid var(--at-pink) !important;
	border-radius: var(--at-radius) !important;
	cursor: pointer;
	box-shadow: none !important;
}
.artriv__next:hover {
	background: transparent !important;
	color: var(--at-pink) !important;
}

/* ── Empty ──────────────────────────────────────────────── */
.artriv__empty {
	margin: 0; font-size: 13px; font-style: italic; color: var(--at-dim);
}

@media (max-width: 480px) {
	.artriv { padding: 14px 12px 12px; }
	.artriv__q { font-size: 13px; }
}