/* ============================================================
   Anti Radio Quiz — full page quiz (.atq)
   ============================================================ */

.atq {
	--pink:    #ff2e88;
	--ok:      #22c55e;
	--no:      #ef4444;
	--bg:      #0d0d0d;
	--surface: #171717;
	--border:  #2a2a2a;
	--ink:     #f2f2f2;
	--dim:     rgba(242,242,242,.5);
	--r:       8px;

	font-family: 'Courier New', Courier, monospace;
	color:       var(--ink);
	max-width:   760px;
	margin:      0 auto;
	width:       100%;
	box-sizing:  border-box;
	position:    relative;
}
body:not(.site-dark) .atq {
	--bg:      #fafafa;
	--surface: #ffffff;
	--border:  #e2e2e2;
	--ink:     #111;
	--dim:     rgba(0,0,0,.5);
}
.atq *, .atq *::before, .atq *::after { box-sizing: border-box; }

/* screens */
.atq__screen { display: none; }
.atq__screen.is-active { display: block; animation: atqFade .25s ease-out; }
@keyframes atqFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── shared type ────────────────────────────────────────── */
.atq__eyebrow {
	margin: 0 0 8px !important;
	font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
	color: var(--pink);
}
.atq__h1 {
	margin: 0 0 12px !important;
	font-family: inherit !important;
	font-size: clamp(30px, 5vw, 46px) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.5px;
	text-transform: uppercase;
	color: var(--ink) !important;
}
.atq__lead {
	margin: 0 0 30px !important;
	font-size: 14px; line-height: 1.6; color: var(--dim);
	max-width: 520px;
}

/* ── buttons ────────────────────────────────────────────── */
.atq__btn {
	font-family: inherit !important;
	font-size: 12px !important;
	letter-spacing: 1.5px !important; text-transform: uppercase !important;
	padding: 14px 26px !important;
	background: transparent !important;
	color: var(--ink) !important;
	border: 1.5px solid var(--border) !important;
	border-radius: var(--r) !important;
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s, transform .1s;
	box-shadow: none !important;
}
.atq__btn:hover { border-color: var(--pink) !important; color: var(--pink) !important; }
.atq__btn:active { transform: translateY(1px); }
.atq__btn:disabled { opacity: .6; cursor: wait; }
.atq__btn--primary {
	background: var(--pink) !important; color: #fff !important; border-color: var(--pink) !important;
}
.atq__btn--primary:hover { background: transparent !important; color: var(--pink) !important; }

/* ── START ──────────────────────────────────────────────── */
.atq__start {
	padding: 40px 36px;
	background: var(--bg);
	border: 1.5px solid var(--border);
	border-top: 4px solid var(--pink);
	border-radius: var(--r);
}
.atq__opts {
	display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
	margin-bottom: 28px;
}
.atq__optlabel {
	display: block;
	font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--dim); margin-bottom: 8px;
}
.atq__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.atq__pill {
	font-family: inherit !important; font-size: 12px !important;
	padding: 8px 14px !important;
	background: var(--surface) !important;
	color: var(--ink) !important;
	border: 1.5px solid var(--border) !important;
	border-radius: 999px !important;
	cursor: pointer; text-transform: none !important; letter-spacing: 0 !important;
	transition: border-color .15s, background .15s, color .15s;
	box-shadow: none !important;
}
.atq__pill:hover { border-color: var(--pink) !important; }
.atq__pill.is-on { background: var(--pink) !important; color: #fff !important; border-color: var(--pink) !important; }
.atq__best { margin: 16px 0 0 !important; font-size: 12px; color: var(--dim); }
.atq__err  { margin: 14px 0 0 !important; font-size: 12.5px; color: var(--no); }

/* ── QUIZ ───────────────────────────────────────────────── */
.atq__bar {
	display: flex; align-items: center; gap: 12px;
	font-size: 12px; letter-spacing: .8px; text-transform: uppercase;
	color: var(--dim); margin-bottom: 10px;
}
.atq__counter { font-weight: bold; color: var(--ink); }
.atq__streak  { color: #f59e0b; }
.atq__points  { margin-left: auto; color: var(--pink); font-weight: bold; }

.atq__progress {
	height: 4px; background: var(--border); border-radius: 2px; overflow: hidden;
	margin-bottom: 6px;
}
.atq__progress i {
	display: block; height: 100%; width: 0; background: var(--pink);
	transition: width .35s ease;
}
.atq__timer {
	height: 3px; background: transparent; margin-bottom: 20px; overflow: hidden; border-radius: 2px;
}
.atq__timer i { display: block; height: 100%; width: 100%; background: var(--dim); }
.atq__timer.is-low i { background: var(--no); animation: atqBlink .5s steps(2) infinite; }
@keyframes atqBlink { to { opacity: .3; } }

.atq__card {
	background: var(--bg);
	border: 1.5px solid var(--border);
	border-radius: var(--r);
	padding: 32px 32px 28px;
}
.atq__diff {
	display: inline-block;
	font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase;
	padding: 3px 8px; border-radius: 3px;
	border: 1px solid var(--border); color: var(--dim);
	margin-bottom: 14px;
}
.atq__diff--easy   { color: var(--ok); border-color: var(--ok); }
.atq__diff--medium { color: #f59e0b;   border-color: #f59e0b; }
.atq__diff--hard   { color: var(--no); border-color: var(--no); }

.atq__q {
	margin: 0 0 24px !important;
	font-size: clamp(17px, 2.4vw, 22px); font-weight: bold; line-height: 1.4;
	color: var(--ink); overflow-wrap: anywhere;
}

.atq__answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.atq__ans {
	display: flex; align-items: center; gap: 12px;
	width: 100%; text-align: left;
	font-family: inherit !important; font-size: 14px !important; line-height: 1.4;
	padding: 14px 16px !important;
	background: var(--surface) !important; color: var(--ink) !important;
	border: 1.5px solid var(--border) !important;
	border-radius: var(--r) !important;
	cursor: pointer;
	transition: border-color .15s, background .15s, opacity .2s, transform .1s;
	text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important;
}
.atq__ans:hover:not(:disabled) { border-color: var(--pink) !important; transform: translateY(-1px); }
.atq__ans:disabled { cursor: default; }
.atq__key {
	flex-shrink: 0;
	width: 26px; height: 26px;
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: bold;
	border: 1.5px solid var(--border); border-radius: 5px; color: var(--dim);
}
.atq__ans:hover:not(:disabled) .atq__key { border-color: var(--pink); color: var(--pink); }
.atq__anstext { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.atq__ans.is-correct {
	border-color: var(--ok) !important;
	background: color-mix(in srgb, var(--ok) 14%, var(--surface)) !important;
}
.atq__ans.is-correct .atq__key { border-color: var(--ok); color: var(--ok); }
.atq__ans.is-wrong {
	border-color: var(--no) !important;
	background: color-mix(in srgb, var(--no) 14%, var(--surface)) !important;
	animation: atqShake .3s;
}
.atq__ans.is-wrong .atq__key { border-color: var(--no); color: var(--no); }
.atq__ans.is-dim { opacity: .4; }
@keyframes atqShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.atq__feedback {
	margin-top: 18px; font-size: 13.5px; font-weight: bold; overflow-wrap: anywhere;
}
.atq__feedback.is-ok { color: var(--ok); }
.atq__feedback.is-no { color: var(--no); }

.atq__hint { margin: 12px 0 0 !important; font-size: 11px; color: var(--dim); text-align: center; }
.atq__hint b { color: var(--ink); }

/* ── RESULT ─────────────────────────────────────────────── */
.atq__result {
	text-align: center;
	padding: 40px 36px;
	background: var(--bg);
	border: 1.5px solid var(--border);
	border-top: 4px solid var(--pink);
	border-radius: var(--r);
}
.atq__ring {
	--p: 0;
	width: 160px; height: 160px; margin: 18px auto 22px;
	border-radius: 50%;
	background: conic-gradient(var(--pink) calc(var(--p) * 1%), var(--border) 0);
	display: flex; align-items: center; justify-content: center;
	transition: --p 1s ease-out;
	position: relative;
}
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.atq__ring::before {
	content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--bg);
}
.atq__pct { position: relative; font-size: 34px; font-weight: bold; color: var(--ink); }

.atq__grade {
	margin: 0 0 8px !important;
	font-family: inherit !important;
	font-size: clamp(20px, 3vw, 28px) !important; line-height: 1.2 !important;
	color: var(--ink) !important;
}
.atq__newbest { margin: 0 0 24px !important; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #f59e0b; }

.atq__stats {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
	margin: 26px 0 30px !important;
}
.atq__stats div {
	background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r);
	padding: 14px 8px;
}
.atq__stats dt { font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.atq__stats dd { margin: 0; font-size: 22px; font-weight: bold; color: var(--ink); }

.atq__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.atq__shared { margin: 14px 0 0 !important; font-size: 12px; color: var(--ok); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
	.atq__start, .atq__result { padding: 26px 18px; }
	.atq__card { padding: 22px 16px 20px; }
	.atq__opts { grid-template-columns: 1fr; }
	.atq__answers { grid-template-columns: 1fr; }
	.atq__stats { grid-template-columns: 1fr 1fr; }
	.atq__hint { display: none; }
	.atq__ring { width: 130px; height: 130px; }
	.atq__pct { font-size: 28px; }
}