/* Dryckesspel Toolkit – grundstil. Teman kan justera via CSS-variablerna nedan. */
:where(.ds-vote, .ds-badge, .ds-top, .ds-tabs, .ds-ad) {
	--_cap: var(--ds-cap, #e8a923);
	--_cap-empty: var(--ds-cap-empty, #d6dbe6);
	--_accent: var(--ds-accent, #c8243b);
	--_surface: var(--ds-surface, #eef1f7);
	--_line: var(--ds-line, #dde2ec);
	--_muted: var(--ds-muted, #5f6880);
	--_radius: var(--ds-radius, 14px);
}

.ds-cap { display: block; flex: none; }
.ds-cap--full { color: var(--_cap); }

/* ---------- Röstruta ---------- */
.ds-vote {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 24px 40px;
	margin: 2.5em 0;
	padding: 28px;
	border-radius: var(--_radius);
	background: var(--_surface);
}
@media (max-width: 640px) {
	.ds-vote { grid-template-columns: 1fr; padding: 22px 18px; }
}
.ds-vote__title { margin: 0 0 4px; font-size: 1.35em; line-height: 1.2; }
.ds-vote__hint { margin: 0 0 16px; color: var(--_muted); font-size: .95em; }
.ds-vote__caps { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.ds-vote__cap {
	appearance: none;
	background: none;
	border: 0;
	padding: 4px;
	margin: 0;
	cursor: pointer;
	border-radius: 50%;
	line-height: 0;
	color: var(--_cap-empty);
	transition: transform .15s ease;
}
.ds-vote__cap .ds-cap { color: inherit; }
.ds-vote__cap.is-on, .ds-vote__cap.is-hover { color: var(--_cap); }
.ds-vote__caps:hover .ds-vote__cap.is-on:not(.is-hover) { color: var(--_cap-empty); }
.ds-vote__cap:hover { transform: rotate(-12deg) scale(1.08); }
.ds-vote__cap:focus-visible { outline: 3px solid var(--_accent); outline-offset: 2px; }
.ds-vote__label { margin-left: 10px; font-weight: 600; min-height: 1.4em; }
.ds-vote__status { margin: 10px 0 0; min-height: 1.4em; font-size: .95em; }
.ds-vote.is-busy .ds-vote__caps { opacity: .7; }
.ds-vote.just-voted .ds-vote__cap.is-on { animation: ds-pop .45s ease; }
.ds-vote.just-voted .ds-vote__cap.is-on:nth-child(2) { animation-delay: .04s; }
.ds-vote.just-voted .ds-vote__cap.is-on:nth-child(3) { animation-delay: .08s; }
.ds-vote.just-voted .ds-vote__cap.is-on:nth-child(4) { animation-delay: .12s; }
.ds-vote.just-voted .ds-vote__cap.is-on:nth-child(5) { animation-delay: .16s; }
@keyframes ds-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.25) rotate(-20deg); }
	100% { transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
	.ds-vote__cap, .ds-vote.just-voted .ds-vote__cap.is-on { transition: none; animation: none; }
	.ds-vote__cap:hover { transform: none; }
}

.ds-vote__summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ds-vote__avg { font-size: 2.6em; font-weight: 800; line-height: 1; }
.ds-vote__of { color: var(--_muted); }
.ds-vote__count { flex-basis: 100%; color: var(--_muted); font-size: .9em; }
.ds-vote__hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .85em; }
.ds-vote__hist li { display: grid; grid-template-columns: 1.2em 1fr 2.5em; align-items: center; gap: 8px; margin: 0; }
.ds-vote__hist-c { text-align: right; color: var(--_muted); font-variant-numeric: tabular-nums; }
.ds-vote__bar { height: 8px; border-radius: 4px; background: var(--_line); overflow: hidden; }
.ds-vote__bar span { display: block; height: 100%; background: var(--_cap); border-radius: 4px; transition: width .4s ease; }

/* ---------- Betygsmärke ---------- */
.ds-badge { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .9em; white-space: nowrap; }
.ds-badge__count { font-weight: 400; color: var(--_muted); }

/* ---------- Topplistor ---------- */
.ds-top { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.ds-top__item {
	display: grid;
	grid-template-columns: 2.2em auto 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	margin: 0;
	border-bottom: 1px solid var(--_line);
}
.ds-top__item:last-child { border-bottom: 0; }
.ds-top__item:not(:has(.ds-top__img)) { grid-template-columns: 2.2em 1fr auto; }
.ds-top__rank { font-weight: 800; font-size: 1.3em; text-align: center; font-variant-numeric: tabular-nums; }
.ds-top__img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; display: block; }
.ds-top__link { font-weight: 700; text-decoration: none; }
.ds-top__link:hover { text-decoration: underline; }
.ds-top__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: .85em; }
.ds-top__avg { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.ds-top__count { color: var(--_muted); white-space: nowrap; }
.ds-top--compact .ds-top__item { gap: 8px; padding: 8px 0; grid-template-columns: 1.6em 1fr auto; }
.ds-top--compact .ds-top__rank { font-size: 1em; }
.ds-top--compact .ds-top__count { display: none; }
.ds-top__empty { color: var(--_muted); }

.ds-tabs__list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ds-tabs:not(.is-enhanced) .ds-tabs__list { display: none; }
.ds-tabs.is-enhanced .ds-tabs__heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ds-tabs__tab {
	appearance: none;
	border: 1px solid var(--_line);
	background: transparent;
	color: inherit;
	padding: 8px 16px;
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.ds-tabs__tab[aria-selected="true"] { background: var(--_accent); border-color: var(--_accent); color: #fff; }
.ds-tabs__tab:focus-visible { outline: 3px solid var(--_accent); outline-offset: 2px; }

/* ---------- Annonser ---------- */
.ds-ad { margin: 2em auto; text-align: center; max-width: 100%; }
.ds-ad__label { margin: 0 0 6px; font-size: 11px; letter-spacing: .02em; color: var(--_muted); text-align: center; }
.ds-ad:not(.is-ready) .ds-ad__label { display: none; }
.ds-ad__slots { display: grid; gap: 12px; justify-items: center; }
.ds-ad__item { max-width: 100%; }
.ds-ad__item img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.ds-ad__item iframe { max-width: 100%; }
.ds-ad__item.is-entering { animation: ds-fade .5s ease; }
@keyframes ds-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ds-ad__item.is-entering { animation: none; } }
.ds-ad__link { display: inline-block; line-height: 0; }
.ds-ad noscript img { max-width: 100%; height: auto; }