/**
 * The wheel, dressed in the theme's own colours.
 *
 * Every colour here is a variable mrwin-theme already publishes on :root and redefines
 * under body.dark-mode, so light and dark work without this file knowing there are two of
 * them, and a site that changes its brand colour changes the wheel with it. The fallbacks
 * after each var() are for the editor preview, where the theme's custom properties are
 * not on the page.
 *
 * The wedge colours are the exception and come from the config: they are data about this
 * wheel, not about the site.
 */

/* ---------------------------------------------------------------- the page it sits on */

/*
 * The wheel is printed above the article and the sidebar, at the full width of the theme's
 * content card, so it needs no width rules of its own - only room underneath it.
 *
 * There was a rule here that lifted the theme's width cap off the main column, which went
 * with a template of this plugin's own that dropped the sidebar. Both are gone: how wide
 * the column is and whether there is a sidebar are the theme's business, and the wheel
 * fits what it is given (below 900px the list moves under the wheel by itself).
 */
.mrwin-wheel-top {
	margin-bottom: 40px;
}

/*
 * The heading above the wheel.
 *
 * The theme prints its own inside the article, which now starts below the wheel, so the
 * plugin prints this one and asks the theme to leave its own out. entry-title is the
 * theme's class on purpose: the h1 should look like every other h1 on the site.
 */
.mrwin-wheel-titles {
	margin-bottom: 24px;
	text-align: left;
}

.mrwin-wheel-titles .entry-title {
	margin: 0;
}

.mrwin-wheel-subtitle {
	margin: 8px 0 0;
	font-size: 1.1rem;
	line-height: 1.5;
	color: var( --text-color-light, #666 );
}

/*
 * Below 480px the theme takes the padding off .content-wrapper and puts it on .site-main
 * instead - and the titles sit in .content-wrapper, outside .site-main, so they ran into the
 * edge of the screen. Inset to line up with the headings of the panels below the wheel.
 * Logical, so a right-to-left language gets it on the right.
 */
@media ( max-width: 480px ) {
	.mrwin-wheel-titles {
		padding-inline: 20px;
	}
}

/* ---------------------------------------------------------------- the flag face */

/*
 * Twemoji Mozilla, subsetted to flags: 258 of them, in colour, at 78 kB.
 *
 * This is what makes a country wheel work on Windows. The system emoji font there
 * deliberately ships no flag glyphs, so the two regional indicators that spell a country
 * fall back to their own letterforms and 🇨🇿 renders as a small boxed "CZ". Naming this
 * face first everywhere the wheel draws an icon replaces that with the real flag.
 *
 * It is safe to name first because it covers nothing else: 26 regional indicators and 11
 * tag characters, 37 code points in total. Latin text, digits and every other emoji fall
 * straight through it to the font that would have drawn them anyway.
 *
 * woff2 before ttf on purpose. Only the woff2 carries the COLR/CPAL tables that make the
 * flags coloured; the ttf is a monochrome fallback for a browser too old to take woff2,
 * which in practice is nobody.
 */
@font-face {
	font-family: 'Flag';
	font-display: swap;
	src: url( '../fonts/flags.woff2' ) format( 'woff2' ),
	     url( '../fonts/flags.ttf' ) format( 'truetype' );
	/* What it covers, said to the browser too: without it the font is fetched for any text
	   drawn in this face - every wheel - and with it only where a flag is on the page. */
	unicode-range: U+1F1E6-1F1FF, U+E0020-E007F;
}

/*
 * The `hidden` attribute has to beat this file's own display rules.
 *
 * A browser's own stylesheet gives [hidden] display:none at the lowest specificity there
 * is, so any class selector here setting display:flex silently switches it back on. Both
 * the winner dialog and the spin button ship hidden and are shown from script, so without
 * this the dialog is on screen before anything has been spun.
 */
.mrwin-wheel [hidden],
.mrwin-wheel-modal[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------- layout */

.mrwin-wheel {
	display: grid;
	grid-template-columns: minmax( 0, 1.4fr ) minmax( 260px, 1fr );
	gap: 32px;
	align-items: start;
	margin: 32px 0;
}

/*
 * One column below 900px. Not a phone breakpoint: it is the width at which the wheel and
 * the list stop both being usable side by side, which is a fact about this layout rather
 * than about any device.
 */
@media ( max-width: 900px ) {
	.mrwin-wheel {
		grid-template-columns: minmax( 0, 1fr );
		gap: 24px;
	}
}

.mrwin-wheel-stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

/* ---------------------------------------------------------------- the wheel itself */

.mrwin-wheel-canvas-wrap {
	position: relative;
	width: 100%;

	/*
	 * Two caps, and the second is the one the old theme needed JavaScript for.
	 *
	 * scaleWheelContainer() there measured the wheel against window.innerHeight and applied
	 * a CSS transform to shrink it, on load and on every resize. min() does the same thing
	 * in the stylesheet, without a listener, without a reflow per resize, and without the
	 * jump you get when script resizes something after it has already painted.
	 *
	 * 78vh rather than 100: a wheel that exactly fills the screen looks like the whole page,
	 * and the list of items below it is the other half of the interface. This leaves enough
	 * of the panel visible on a laptop to show there is more.
	 */
	max-width: min( 700px, 78vh );
	aspect-ratio: 1;

	/*
	 * Stops the spinning wheel from growing a horizontal scrollbar.
	 *
	 * A CSS transform does not change an element's layout box, but it does change the
	 * region the page counts as overflowing. The canvas is a square, and a square turned
	 * 45 degrees needs a box 1.41 times as wide - so at some point in every spin the page
	 * is up to 290px wider than the screen, and the browser puts a scrollbar under it. The
	 * bar appears and disappears as the wheel turns, which is why it reads as a glitch
	 * rather than as a layout problem.
	 *
	 * Clipping costs nothing here: the wheel is a circle drawn inside that square with ten
	 * pixels to spare, so the corners being cut away are corners that were always empty.
	 * The circle occupies the same space at every angle.
	 */
	overflow: hidden;
}

/*
 * Fit to screen: the size the script worked out, so the wheel and everything under it fit in
 * 90% of the window. Only ever smaller - min() keeps the ordinary cap as the upper bound.
 */
.mrwin-wheel.is-fit .mrwin-wheel-canvas-wrap {
	max-width: min( 700px, 78vh, var( --mrwin-fit, 700px ) );
}

.mrwin-wheel.is-fit .mrwin-wheel-stage {
	gap: 10px;
}

/* ---------------------------------------------------------------- full screen */

.mrwin-wheel-fullscreen-open {
	width: 100%;
	justify-content: center;
	margin-bottom: 12px;
	font-weight: 600;
}

.mrwin-wheel-fullscreen-icon {
	font-size: 1.15em;
	line-height: 1;
}

.mrwin-wheel-fullscreen-close {
	display: none;
}

/* Nothing of the page behind it scrolls or shows. */
html.mrwin-wheel-fullscreen-on,
html.mrwin-wheel-fullscreen-on body {
	overflow: hidden;
}

/*
 * The wheel over everything, the panel hidden. Under the winner's pop-up, which is fixed at
 * 9999 and has to open over it.
 */
.mrwin-wheel.is-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 16px;
	box-sizing: border-box;
	background: var( --content-bg, #ffffff );
	overflow: auto;
}

.mrwin-wheel.is-fullscreen .mrwin-wheel-panel {
	display: none;
}

/* Until the screen has its final size - see openFullScreen(). The background is already there. */
.mrwin-wheel.is-fullscreen.is-opening .mrwin-wheel-stage,
.mrwin-wheel.is-fullscreen.is-opening .mrwin-wheel-fullscreen-close {
	visibility: hidden;
}

.mrwin-wheel.is-fullscreen .mrwin-wheel-stage {
	width: 100%;
	gap: 12px;
}

/* No cap but the one the script worked out from the screen. */
.mrwin-wheel.is-fullscreen .mrwin-wheel-canvas-wrap {
	flex: none;
	width: var( --mrwin-fit, 100% );
	max-width: none;
}

/* What is under the wheel no wider than it reads well - a table 1900 pixels across is tall. */
.mrwin-wheel.is-fullscreen .mrwin-wheel-stage > :not( .mrwin-wheel-canvas-wrap ) {
	width: 100%;
	max-width: 900px;
}

/*
 * A wide screen with a table: the wheel the full height on the left, the rest in a column
 * beside it. A wrapping column flex - the wheel fills the first column, so everything after
 * it moves into the second.
 */
.mrwin-wheel.is-fullscreen.is-side .mrwin-wheel-stage {
	flex-flow: column wrap;
	height: 100%;
	align-content: center;
	justify-content: center;
	column-gap: 32px;
}

.mrwin-wheel.is-fullscreen.is-side .mrwin-wheel-stage > :not( .mrwin-wheel-canvas-wrap ) {
	width: var( --mrwin-side, 480px );
	max-width: none;
}

/* The winner under the wheel, centred under it: the line is a flex row, which text-align
   alone does not centre. */
.mrwin-wheel.is-fullscreen .mrwin-wheel-result {
	justify-content: center;
	margin-inline: auto;
}

.mrwin-wheel.is-fullscreen .mrwin-wheel-fullscreen-close {
	position: fixed;
	top: 12px;
	right: 12px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var( --border-color, #e2e2e2 );
	border-radius: 999px;
	background: var( --content-bg, #ffffff );
	color: var( --text-color, #111111 );
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.75;
}

.mrwin-wheel.is-fullscreen .mrwin-wheel-fullscreen-close:hover,
.mrwin-wheel.is-fullscreen .mrwin-wheel-fullscreen-close:focus-visible {
	opacity: 1;
}

.mrwin-wheel-canvas {
	width: 100%;
	height: 100%;
	display: block;

	/*
	 * The rotation is set on this element from script and changes every frame during a
	 * spin, so the compositor is told in advance. Without it the first frame of a spin
	 * costs a layer promotion and the wheel visibly stutters as it starts.
	 */
	will-change: transform;
}

/*
 * The pointer. A triangle at twelve o'clock, which is where the winner is read from.
 *
 * Sits at the very top of the box rather than poking out above it, because the box now
 * clips - see the note there. It overlaps the wheel's rim by a few pixels either way,
 * which is what a pointer should do.
 */
.mrwin-wheel-pointer {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX( -50% );
	z-index: 2;
	width: 0;
	height: 0;
	border-left: 16px solid transparent;
	border-right: 16px solid transparent;
	border-top: 28px solid var( --mrwin-wheel-pointer, var( --mrwin-wheel-button, var( --primary-color, #7c3aed ) ) );
	filter: drop-shadow( 0 2px 3px rgba( 0, 0, 0, 0.25 ) );
}

.mrwin-wheel-spin {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% ) rotate( -45deg );
	z-index: 3;

	display: flex;
	align-items: center;
	justify-content: center;

	/*
	 * The lower bound is the point of the clamp. 15% of a 700px wheel is a comfortable
	 * 105px, but 15% of a 280px wheel on a phone is 42px, which is under the 44px anyone
	 * can reliably hit with a thumb - and this is the only control on the page.
	 */
	width: clamp( 56px, 15%, 116px );
	aspect-ratio: 1;
	padding: 0;

	border: 0;

	/*
	 * A teardrop, not a circle: three rounded corners and one square one, turned so the
	 * square corner is at the top. The wheel this replaces had it and it earns its keep -
	 * a plain circle in the middle of a wheel is decoration, while a shape with a point
	 * says which way the wheel is being read.
	 *
	 * The corners are listed clockwise from the top left, so the square one is the top
	 * RIGHT, and turning the button a quarter of a right angle anticlockwise brings it to
	 * the top. Everything else about the box is untouched: a transform does not change
	 * layout, so the measuring in fitButtonText() still sees the square it expects.
	 */
	border-radius: 50% 0 50% 50%;

	/*
	 * The post may overrule these two, and the pointer above. Written as a variable with
	 * the theme's own as the fallback, so a wheel that sets nothing keeps taking the site
	 * colours - which is what nearly every wheel should do. See applyOwnColors().
	 */
	background: var( --mrwin-wheel-button, var( --primary-color, #7c3aed ) );
	color: var( --mrwin-wheel-button-text, var( --button-text-color, #ffffff ) );
	cursor: pointer;

	/*
	 * A starting size only. Script measures the label against the circle and shrinks it
	 * until it fits - see fitButtonText() in wheel.js. CSS cannot do this: it has no way
	 * to ask how wide a word came out, and the word is a translation, so its length is
	 * not knowable when this file is written.
	 */
	font-size: 18px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	box-shadow: 0 3px 10px rgba( 0, 0, 0, 0.25 );
	transition: transform 0.12s ease;
}

.mrwin-wheel-spin:hover {
	transform: translate( -50%, -50% ) rotate( -45deg ) scale( 1.06 );
}

.mrwin-wheel-spin:active {
	transform: translate( -50%, -50% ) rotate( -45deg ) scale( 0.97 );
}

/*
 * The frame, and the text inside it. Two elements because the script has to compare two
 * boxes, and one element can only ever be compared with itself - see fitButtonText().
 *
 * The frame is a rectangle inscribed in the circle, and it is wider than it is tall because
 * a button label is. The corners are what has to stay inside: at 78 by 60 they sit at
 * sqrt(0.39² + 0.30²) = 0.49 of the diameter from the centre, just inside the 0.5 the circle
 * gives them. The square everyone reaches for first - 71 by 71 - is inscribed too, but it
 * throws away a fifth of the width to buy height that one line of text never uses.
 *
 * Measuring against the button's own box instead would be measuring against the square
 * around the circle, and a label that fills that sticks out of the circle at all four
 * corners. "DREH DAS GLÜCKSRAD JETZT" wrapped to four lines fits a 105px box and spills out
 * of a 105px circle, and the script would have called that a fit.
 *
 * The +45 turns the label back level against the button's -45. Once it is level its own box
 * is an upright rectangle centred on the middle of the circle, and it stays inside the
 * circle as long as its diagonal does: sqrt(0.78² + 0.60²) = 0.98 of the diameter, which is
 * why the frame is that shape and not larger.
 */
.mrwin-wheel-spin-text {
	width: 78%;
	height: 60%;
	transform: rotate( 45deg );

	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.mrwin-wheel-spin-line {
	/*
	 * Allowed to shrink below its own content, which is what makes it wrap at the frame's
	 * width - and what makes a single word too long for any line overflow visibly, so that
	 * scrollWidth reports it and the script shrinks a size and asks again.
	 */
	flex: 0 1 auto;
	min-width: 0;

	/*
	 * Words are never broken. Both of the values that would break one are wrong here:
	 * `anywhere` splits SPIN! into SPI / N! at the first opportunity, and `break-word`
	 * does the same as soon as the word is wider than the box - which at the starting size
	 * it always is, so the label wrapped instead of shrinking and came out half the size it
	 * should have been. Left alone, a word too wide overflows, scrollWidth says so, and the
	 * script drops a size and asks again. Which is the answer: smaller, not hyphenated.
	 */
	overflow-wrap: normal;
	word-break: normal;
	line-height: 1.05;
	text-align: center;
}

/* ---------------------------------------------------------------- the result */

.mrwin-wheel-result {
	display: flex;
	align-items: center;
	gap: 10px;

	/*
	 * Reserved, empty or not, so announcing a winner never shoves the page down - and a new
	 * spin, which empties the line, never pulls it back up. The same as the dice's total. A
	 * result taller than this (two winners, a picture) is held at its own height while the
	 * wheel turns; see spin() in wheel.js.
	 */
	min-height: 2em;
	font-size: 1.6rem;
	font-weight: 700;
	color: var( --text-color, #111111 );
	text-align: center;
}

/*
 * The flag face first, then whatever the theme uses. Twemoji covers only flags, so this
 * draws a country's flag from it and everything else from the system emoji font - which
 * is what makes a flag render on Windows, where the system font has none.
 */
.mrwin-wheel-icon {
	font-family: 'Flag', var( --body-font-family, sans-serif );
	font-size: 1.1em;
	line-height: 1;
}

/* ---------------------------------------------------------------- the panel */

.mrwin-wheel-panel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	border: 1px solid var( --border-color, #e2e2e2 );
	border-radius: var( --card-radius, 12px );
	background: var( --content-bg, #ffffff );
}

/*
 * The theme's Tiles layout separates by colour, not by outline: the panel is an inset in
 * the tile the wheel sits in. --outer-bg is the inset colour inside a tile there.
 */
body.site-layout-tiles .mrwin-wheel-panel {
	border-color: transparent;
	background: var( --outer-bg, #f5f5f5 );
}

.mrwin-wheel-panel-heading {
	margin: 0;
	font-size: 1.15rem;
	color: var( --text-color, #111111 );
}

.mrwin-wheel-bulk {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var( --border-color, #e2e2e2 );
	border-radius: var( --control-radius, 8px );
	background: var( --content-bg, #ffffff );
	color: var( --text-color, #111111 );

	/*
	 * The flag face here too, not just on the .mrwin-wheel-icon spans.
	 *
	 * This is the one place an item's icon is not in a span of its own: the textarea holds
	 * the whole line, "🇨🇿 Cesko", as plain text. Without the face named here the flag falls
	 * back to the system emoji font, which on Windows has no flags - so the wheel beside
	 * it showed a Czech flag and the box you type it in showed a boxed "CZ".
	 *
	 * font: inherit first, then the family, because the shorthand would reset it.
	 */
	font: inherit;
	font-family: 'Flag', var( --body-font-family, inherit );
	line-height: 1.5;
	resize: vertical;
}

.mrwin-wheel-range {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 10px;
}

.mrwin-wheel-range-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.85rem;
	color: var( --text-color-light, #666666 );
}

.mrwin-wheel-range-field input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var( --border-color, #e2e2e2 );
	border-radius: var( --control-radius, 8px );
	background: var( --content-bg, #ffffff );
	color: var( --text-color, #111111 );
	font: inherit;
}

/* ---------------------------------------------------------------- groups */

.mrwin-wheel-groups {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mrwin-wheel-group {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid var( --border-color, #e2e2e2 );
	border-radius: var( --control-radius, 8px );
	background: transparent;
	color: var( --text-color, #111111 );
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;

	/*
	 * A group that is off is dimmed rather than hidden or greyed to unreadability: the
	 * visitor has to be able to read the name of the thing they are about to switch on.
	 */
	opacity: 0.5;
	transition: opacity 0.12s ease, border-color 0.12s ease;
}

.mrwin-wheel-group.is-on {
	opacity: 1;
	border-color: var( --primary-color, #7c3aed );
}

/*
 * A group with a picture: the picture on top, the name and the count under it - a tile
 * rather than a pill. The tiles are one size, so a row of continents lines up whatever
 * shape each map is.
 */
.mrwin-wheel-group.has-image {
	/* A column: the picture, then the name, then the count. */
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 4px;
	width: 104px;
	padding: 8px 6px;
	text-align: center;
	line-height: 1.2;
}

.mrwin-wheel-group-image {
	display: block;
	width: 100%;
	height: 56px;
	object-fit: contain;

	/*
	 * The picture is pinned to the top of the tile and everything under it to the bottom:
	 * the spare height of a row goes here, into one gap under the picture, rather than
	 * being shared out. Tiles in a row are as tall as the tallest, so without this a name
	 * that runs to two lines lifts its own picture and drops the counts out of line with
	 * its neighbours'. Now every picture starts at the same height and every count ends at
	 * the same one, whatever the names do.
	 */
	margin-bottom: auto;
}

.mrwin-wheel-group.has-image .mrwin-wheel-swatch {
	display: none;
}

/*
 * On: the tile turns to the text colour, not the site's primary. The picture carries its own
 * colour - a violet Europe on a red tile is two colours arguing - and the text colour is the
 * one thing guaranteed to contrast with the page in both light and dark mode.
 */
.mrwin-wheel-group.has-image.is-on {
	background: var( --text-color, #111111 );
	border-color: var( --text-color, #111111 );
	color: var( --content-bg, #ffffff );
}

.mrwin-wheel-group.has-image.is-on .mrwin-wheel-group-count {
	background: rgba( 128, 128, 128, 0.3 );
}

@media ( max-width: 480px ) {
	.mrwin-wheel-group.has-image {
		width: calc( 33.333% - 6px );
	}
}

.mrwin-wheel-group-count {
	padding: 1px 7px;
	border-radius: 999px;
	background: var( --header-hover-bg, rgba( 0, 0, 0, 0.08 ) );
	font-size: 0.78em;
	font-variant-numeric: tabular-nums;
}

.mrwin-wheel-group-items {
	border: 1px solid var( --border-color, #e2e2e2 );
	border-radius: var( --control-radius, 8px );
}

.mrwin-wheel-group-items > summary {
	padding: 8px 12px;
	cursor: pointer;
	font-size: 0.9rem;
	color: var( --text-color-light, #666666 );
}

/*
 * Two hundred checkboxes is a realistic number here - a continent of countries - so the
 * list scrolls inside itself rather than pushing the wheel off the screen, and two columns
 * stop a single file of names running for three screens.
 *
 * A grid and not `columns: 2`. Multi-column layout with a fixed height does not scroll
 * down when it runs out of room, it adds more columns to the right - so Europe's forty-five
 * countries came out as seven columns side by side with a horizontal scrollbar, in the
 * panel beside the wheel as much as anywhere.
 */
.mrwin-wheel-group-checks {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	column-gap: 16px;
	align-content: start;
	max-height: 260px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4px 12px 12px;
}

@media ( max-width: 600px ) {
	.mrwin-wheel-group-checks {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* Something of the visitor's own, at the foot of an opened group. */
.mrwin-wheel-group-add {
	display: flex;
	gap: 8px;
	/* The checks above have this padding of their own; the row lines up with them. */
	padding: 0 12px 12px;
}

.mrwin-wheel-group-add input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 6px 10px;
	border: 1px solid var( --border-color, #e0e0e0 );
	border-radius: calc(var(--control-radius, 4px) * 8 / 4);
	background: var( --content-bg, #fff );
	color: inherit;
	font: inherit;
}

.mrwin-wheel-group-add-button {
	flex: 0 0 auto;
}

/*
 * A group of the visitor's own: the field and button under all the groups, in a dashed box
 * - the place a new group will appear - and the way to take one away again, inside it.
 */
.mrwin-wheel-group-new {
	display: flex;
	gap: 8px;
	padding: 8px;
	border: 1px dashed var( --border-color, #cfcfcf );
	border-radius: var( --control-radius, 8px );
}

.mrwin-wheel-group-new input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 6px 10px;
	border: 1px solid var( --border-color, #e0e0e0 );
	border-radius: calc(var(--control-radius, 4px) * 8 / 4);
	background: var( --content-bg, #fff );
	color: inherit;
	font: inherit;
}

.mrwin-wheel-group-new-button {
	flex: 0 0 auto;
	white-space: nowrap;
}

.mrwin-wheel-group-remove {
	margin: 0 12px 12px;
	font-size: 0.85rem;
}

.mrwin-wheel-group.is-own,
.mrwin-wheel-group-items.is-own {
	border-style: dashed;
}

/* The rows the visitor added: the only ones with a cross, which sits at the end. */
.mrwin-wheel-check.is-mine {
	justify-content: space-between;
}

.mrwin-wheel-check.is-mine .mrwin-wheel-remove {
	margin-left: auto;
}

.mrwin-wheel-check {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 0;
	font-size: 0.9rem;

	/* Without this a label can be split across the column break, half in each. */
	break-inside: avoid;
}

.mrwin-wheel-icon-image {
	flex: 0 0 auto;
	width: auto;
	height: 1em;
	vertical-align: -0.1em;
}

/* ---------------------------------------------------------------- the item list */

.mrwin-wheel-items {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;

	/*
	 * No gap. Rows sit against each other and the border between them is the only boundary,
	 * which is what lets the drop line have one place to be - with a gap there were two
	 * plausible ones three pixels apart, and the indicator used both.
	 *
	 * Positioned, because the drop line is absolute inside it and measures itself in
	 * offsetTop.
	 */
	position: relative;

	/*
	 * A wheel can hold hundreds of items and the list must not push the wheel off the
	 * screen, so it scrolls inside itself rather than growing without limit.
	 */
	max-height: 340px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mrwin-wheel-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 4px;
	color: var( --text-color, #111111 );

	/*
	 * The line between rows, painted rather than laid out.
	 *
	 * As a border-bottom it was inside the border box but outside the box `align-items:
	 * center` centres in, so every swatch, icon and label sat a pixel high - visible once
	 * you look, and part of why the boundary between two rows read as vague. An inset
	 * shadow occupies no space at all: the content is centred in the whole row, and
	 * offsetHeight is the round number the drop line measures against.
	 */
	box-shadow: inset 0 -1px 0 0 var( --border-color, #eeeeee );
}

.mrwin-wheel-swatch {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-radius: 3px;
}

/* ---------------------------------------------------------------- reordering */

.mrwin-wheel-grip {
	flex: 0 0 auto;
	color: var( --text-color-light, #bbbbbb );
	cursor: grab;
	line-height: 1;
	user-select: none;
}

.mrwin-wheel-item.is-dragging {
	opacity: 0.4;
}

/*
 * Where the row will land.
 *
 * Out of flow on purpose: showing it must not move anything, or the list would twitch under
 * the pointer all the way down. One element moved to the gap rather than a class on a row,
 * so one gap is one picture - see enableReordering().
 */
.mrwin-wheel-drop-line {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	border-radius: 1px;
	background: var( --primary-color, #7c3aed );
	pointer-events: none;
	z-index: 1;
}

/*
 * The dot at the left end, which is what makes it read as an insertion point rather than as
 * a rule somebody drew across the list.
 */
.mrwin-wheel-drop-line::before {
	content: '';
	position: absolute;
	left: 0;
	top: -3px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: inherit;
}

.mrwin-wheel-item[ draggable='true' ] {
	/* Stops a drag from selecting the label text on the way past. */
	user-select: none;
}

/* ---------------------------------------------------------------- spin length */

.mrwin-wheel-speed {
	border: 1px solid var( --border-color, #e2e2e2 );
	border-radius: var( --control-radius, 8px );
}

.mrwin-wheel-speed > summary {
	padding: 8px 12px;
	cursor: pointer;
	font-size: 0.9rem;
	color: var( --text-color-light, #666666 );
}

.mrwin-wheel-speed-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 4px 12px 12px;
}

.mrwin-wheel-speed-row input[ type='range' ] {
	flex: 1 1 auto;
	min-width: 0;
}

.mrwin-wheel-speed-value {
	flex: 0 0 auto;
	min-width: 6.5ch;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
	color: var( --text-color-light, #666666 );
}

.mrwin-wheel-item-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mrwin-wheel-remove {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --text-color-light, #888888 );
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.mrwin-wheel-remove:hover {
	background: var( --header-hover-bg, rgba( 0, 0, 0, 0.06 ) );
	color: var( --text-color, #111111 );
}

/* ---------------------------------------------------------------- actions */

.mrwin-wheel-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mrwin-wheel-action {
	/* Inline flex so the icon and the word sit on one baseline-ish line together. */
	display: inline-flex;
	align-items: center;
	gap: 6px;

	padding: 8px 14px;
	border: 1px solid var( --border-color, #e2e2e2 );
	border-radius: var( --control-radius, 8px );
	background: transparent;
	color: var( --text-color, #111111 );
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;
}

.mrwin-wheel-action:hover {
	border-color: var( --primary-color, #7c3aed );
	color: var( --primary-color, #7c3aed );
}

/* ---------------------------------------------------------------- palettes */

.mrwin-wheel-palettes {
	border: 1px solid var( --border-color, #e2e2e2 );
	border-radius: var( --control-radius, 8px );
}

.mrwin-wheel-palettes > summary {
	padding: 8px 12px;
	cursor: pointer;
	font-size: 0.9rem;
	color: var( --text-color-light, #666666 );
}

.mrwin-wheel-palette-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 4px 8px;
	max-height: 300px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mrwin-wheel-palette {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border: 1px solid transparent;
	border-radius: var( --control-radius, 8px );
	background: transparent;
	color: var( --text-color, #111111 );
	font: inherit;
	font-size: 0.85rem;
	text-align: left;
	cursor: pointer;
}

.mrwin-wheel-palette:hover {
	background: var( --header-hover-bg, rgba( 0, 0, 0, 0.05 ) );
}

.mrwin-wheel-palette.is-on {
	border-color: var( --primary-color, #7c3aed );
}

/*
 * The strip is the interface. A person picking a palette looks at the colours and never
 * at the word beside them, which is why sixteen names is enough to translate and why the
 * strip gets the fixed width rather than the label.
 */
.mrwin-wheel-palette-strip {
	display: flex;
	flex: 0 0 auto;
	width: 96px;
	height: 18px;
	border-radius: calc(var(--card-radius, 14px) * 4 / 14);
	overflow: hidden;
}

.mrwin-wheel-palette-swatch {
	flex: 1 1 0;
	min-width: 0;
}

.mrwin-wheel-palette-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * The palette as it stands, every swatch editable where it sits.
 *
 * Wraps rather than scrolls: a palette can be fifteen colours and all of them are used once
 * the wheel has more items than that, so all of them have to be reachable.
 */
.mrwin-wheel-palette-custom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 10px 12px;
	border-top: 1px solid var( --border-color, #eeeeee );
}

/*
 * The group colours, one named row each.
 *
 * A column and not the wrapping strip above it: these are named things being changed one at
 * a time, not a palette being nudged, and a row that says which group it is is the whole
 * difference between this and a strip of anonymous squares.
 */
.mrwin-wheel-palette-custom.is-groups,
.mrwin-wheel-palette-custom.is-items {
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

/* The way back to the item colours, under their rows. */
.mrwin-wheel-colour-reset {
	align-self: flex-start;
	margin-top: 4px;
}

.mrwin-wheel-group-colour {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 0.9rem;
	color: var( --text-color, #111111 );
}

.mrwin-wheel-custom-swatch {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var( --border-color, #e2e2e2 );
	border-radius: var( --control-radius, 6px );
	background: none;
	cursor: pointer;
}

/* Chrome draws its own padded box inside a colour input; this removes it. */
.mrwin-wheel-custom-swatch::-webkit-color-swatch-wrapper {
	padding: 2px;
}

.mrwin-wheel-custom-swatch::-webkit-color-swatch {
	border: 0;
	border-radius: 3px;
}

.mrwin-wheel-colour-add {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px dashed var( --border-color, #cccccc );
	border-radius: var( --control-radius, 6px );
	background: transparent;
	color: var( --text-color-light, #888888 );
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.mrwin-wheel-colour-add:hover:not( :disabled ) {
	border-style: solid;
	border-color: var( --primary-color, #7c3aed );
	color: var( --primary-color, #7c3aed );
}

.mrwin-wheel-colour-add:disabled {
	opacity: 0.35;
	cursor: default;
}

/*
 * The four list buttons, each with a small piece of line art.
 *
 * The icon takes the button's own colour through currentColor, so it follows the hover and
 * the dark theme without a rule for either.
 */
.mrwin-wheel-action-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	/* Optical centring: a 16px box beside a 13px cap height sits a shade high otherwise. */
	margin-top: -1px;
	opacity: 0.75;
}

.mrwin-wheel-action:hover .mrwin-wheel-action-icon {
	opacity: 1;
}

/* ---------------------------------------------------------------- past winners */

.mrwin-wheel-history {
	border: 1px solid var( --border-color, #e2e2e2 );
	border-radius: var( --control-radius, 8px );
}

.mrwin-wheel-history > summary {
	padding: 8px 12px;
	cursor: pointer;
	font-size: 0.9rem;
	color: var( --text-color-light, #666666 );
}

/*
 * An ordered list, numbered by the script rather than by the browser's own count: the newest
 * winner is at the top and has to carry the highest number, because the number is the order
 * they were drawn in and not the order they are printed in.
 */
.mrwin-wheel-history-list {
	margin: 0;
	padding: 0 12px 0 40px;
	max-height: 220px;
	overflow-y: auto;
	overscroll-behavior: contain;
	font-size: 0.9rem;
}

.mrwin-wheel-history-row {
	padding: 3px 0;
	color: var( --text-color, #111111 );
}

/*
 * The marker is the list number; this puts the icon and the label beside each other without
 * the marker losing its place, which display:flex on the li would do.
 */
.mrwin-wheel-history-row::marker {
	color: var( --text-color-light, #999999 );
	font-variant-numeric: tabular-nums;
}

.mrwin-wheel-history-label {
	margin-left: 4px;
}

.mrwin-wheel-history-empty {
	list-style: none;
	margin-left: -20px;
	padding: 3px 0;
	color: var( --text-color-light, #888888 );
}

.mrwin-wheel-history-footer {
	padding: 8px 12px 12px;
}

/* ---------------------------------------------------------------- what the visitor switches */

.mrwin-wheel-options {
	border: 1px solid var( --border-color, #e2e2e2 );
	border-radius: var( --control-radius, 8px );
}

/* ---------------------------------------------------------------- the button's colour */

/*
 * The same box as Options, and the same rows as the dice's colour pickers, so the places a
 * visitor picks a colour look like one control.
 */
.mrwin-wheel-button-colors {
	border: 1px solid var( --border-color, #e2e2e2 );
	border-radius: var( --control-radius, 8px );
}

.mrwin-wheel-button-colors > summary {
	padding: 8px 12px;
	cursor: pointer;
	font-size: 0.9rem;
	color: var( --text-color-light, #666666 );
}

.mrwin-wheel-colour-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 12px;
	cursor: pointer;
	font-size: 0.9rem;
	color: var( --text-color, #111111 );
}

.mrwin-wheel-colour-swatch {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var( --border-color, #e2e2e2 );
	border-radius: var( --control-radius, 6px );
	background: none;
	cursor: pointer;
}

/* A disabled picker still has to say which colour was worked out, so it dims rather than
 * greying away to nothing. */
.mrwin-wheel-colour-swatch:disabled {
	opacity: 0.55;
	cursor: default;
}

.mrwin-wheel-colour-swatch::-webkit-color-swatch-wrapper {
	padding: 2px;
}

.mrwin-wheel-colour-swatch::-webkit-color-swatch {
	border: 0;
	border-radius: 3px;
}

.mrwin-wheel-button-colors-footer {
	padding: 8px 12px 12px;
}

.mrwin-wheel-options > summary {
	padding: 8px 12px;
	cursor: pointer;
	font-size: 0.9rem;
	color: var( --text-color-light, #666666 );
}

.mrwin-wheel-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;
	cursor: pointer;
	font-size: 0.9rem;
	color: var( --text-color, #111111 );
}

.mrwin-wheel-option:last-child {
	padding-bottom: 12px;
}

.mrwin-wheel-option input {
	flex: 0 0 auto;
	margin: 0;
}

/*
 * The way back to the published wheel.
 *
 * The same two colours as the notice around it, the other way up: the notice is filled in
 * the button colour, so a button filled the same way would be a hole in it. Inverted, it is
 * still unmistakably the thing to press and it introduces no third colour.
 */
.mrwin-wheel-reset {
	flex: 0 0 auto;
	padding: 6px 14px;
	border: 0;
	border-radius: var( --control-radius, 8px );
	background: var( --mrwin-wheel-button-text, var( --button-text-color, #ffffff ) );
	color: var( --mrwin-wheel-button, var( --primary-color, #7c3aed ) );
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: opacity 0.12s ease;
}

.mrwin-wheel-reset:hover {
	opacity: 0.88;
}

/*
 * The whole notice in the theme's button colours - the same two variables the spin button
 * reads, so the two agree wherever the theme sets them and on a wheel whose post overrules
 * them.
 *
 * Not the trending colour it used before. That is a tinted background for a strip of links,
 * which put this in a fourth colour of its own on a panel that already has the wheel's
 * palette and the site's; the button colours are the ones the page is already using to say
 * "this is the thing to press".
 */
.mrwin-wheel-restored {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	padding: 8px 12px;
	border-radius: var( --control-radius, 8px );
	background: var( --mrwin-wheel-button, var( --primary-color, #7c3aed ) );
	color: var( --mrwin-wheel-button-text, var( --button-text-color, #ffffff ) );
	font-size: 0.85rem;
}

/* ---------------------------------------------------------------- the winner dialog */

.mrwin-wheel-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba( 0, 0, 0, 0.55 );
}

.mrwin-wheel-modal-box {
	position: relative;
	max-width: 480px;
	width: 100%;
	padding: 32px 28px;
	border-radius: var( --card-radius, 12px );
	background: var( --content-bg, #ffffff );
	color: var( --text-color, #111111 );
	text-align: center;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.35 );
}

.mrwin-wheel-modal-close {
	position: absolute;
	top: 8px;
	right: 12px;
	border: 0;
	background: transparent;
	color: var( --text-color-light, #888888 );
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.mrwin-wheel-modal-title {
	margin: 0 0 12px;
	font-size: 1.25rem;
	color: var( --text-color-light, #666666 );
}

.mrwin-wheel-modal-winner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-size: 2rem;
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- the picture wheel */

.mrwin-wheel-pictures {
	padding: 10px 14px;
	border: 1px solid var( --border-color, #e2e2e2 );
	border-radius: var( --control-radius, 8px );
}

.mrwin-wheel-pictures > summary {
	cursor: pointer;
	font-weight: 600;
}

.mrwin-wheel-pictures-hint,
.mrwin-wheel-pictures-status {
	margin: 6px 0;
	font-size: 0.85rem;
	opacity: 0.75;
}

.mrwin-wheel-pictures-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* A picture's name, typed where it is shown. */
.mrwin-wheel-item-name {
	flex: 1;
	min-width: 0;
	padding: 4px 8px;
	border: 1px solid transparent;
	border-radius: var( --control-radius, 6px );
	background: transparent;
	color: inherit;
	font: inherit;
}

.mrwin-wheel-item-name:hover,
.mrwin-wheel-item-name:focus {
	border-color: var( --border-color, #e2e2e2 );
	background: var( --content-bg, #ffffff );
}

.mrwin-wheel-items .mrwin-wheel-icon-image {
	width: 36px;
	height: 36px;
	object-fit: cover;
	border-radius: calc(var(--image-radius, 10px) * 6 / 10);
}

/* ---------------------------------------------------------------- the ring of groups */

/* The group above the winner, on a wheel of emotions: "Sad" over "Lonely". */
.mrwin-wheel-winner-group {
	padding: 2px 10px;
	border-radius: 999px;
	background: var( --header-hover-bg, rgba( 0, 0, 0, 0.08 ) );
	font-size: 0.8em;
	font-weight: 600;
}

.mrwin-wheel-modal-group {
	flex-basis: 100%;
	font-size: 1rem;
	font-weight: 600;
	color: var( --text-color-light, #666666 );
}

.mrwin-wheel-modal-winner:has( .mrwin-wheel-modal-group ) {
	flex-wrap: wrap;
	flex-direction: column-reverse;
	gap: 4px;
}

/* ---------------------------------------------------------------- several winners */

/* A copy of the pointer turned about the centre of the wheel, one per extra winner. */
.mrwin-wheel-pointer-extra {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

/* The link to a wheel, where the browser would not copy it for us. */
.mrwin-wheel-share-row {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.mrwin-wheel-share-link {
	flex: 1 1 220px;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid var( --border-color, #e2e2e2 );
	border-radius: var( --control-radius, 8px );
	background: var( --content-bg, #ffffff );
	color: var( --text-color, #111111 );
	font: inherit;
	font-size: 0.85rem;
}

/* ---------------------------------------------------------------- the tournament bracket */

/*
 * Rounds side by side, the way a bracket is drawn on paper, and scrolling sideways when
 * there are more of them than the panel is wide - a bracket of thirty-two is five rounds.
 */
.mrwin-wheel-bracket-hint,
.mrwin-wheel-bracket-note {
	margin: 4px 0 8px;
	font-size: 0.85rem;
	color: var( --text-color-light, #666 );
}

.mrwin-wheel-bracket-buttons {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.mrwin-wheel-bracket-rounds {
	display: flex;
	gap: 14px;
	margin-top: 10px;
	overflow-x: auto;
	padding-bottom: 6px;
}

.mrwin-wheel-bracket-round {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	gap: 10px;
	min-width: 140px;
}

.mrwin-wheel-bracket-title {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --text-color-light, #666 );
}

.mrwin-wheel-bracket-match {
	display: flex;
	flex-direction: column;
	border: 1px solid var( --border-color, #e2e2e2 );
	border-radius: var( --control-radius, 8px );
	overflow: hidden;
}

.mrwin-wheel-bracket-name,
.mrwin-wheel-bracket-bye {
	display: block;
	width: 100%;
	padding: 6px 10px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.9rem;
	text-align: left;
}

.mrwin-wheel-bracket-name {
	cursor: pointer;
}

.mrwin-wheel-bracket-name + .mrwin-wheel-bracket-name,
.mrwin-wheel-bracket-name + .mrwin-wheel-bracket-bye {
	border-top: 1px solid var( --border-color, #e2e2e2 );
}

.mrwin-wheel-bracket-name.is-winner {
	background: var( --primary-color, #7c3aed );
	color: #ffffff;
	font-weight: 600;
}

.mrwin-wheel-bracket-name.is-out {
	opacity: 0.45;
	text-decoration: line-through;
}

.mrwin-wheel-bracket-name:disabled {
	cursor: default;
}

.mrwin-wheel-bracket-bye {
	font-style: italic;
	color: var( --text-color-light, #666 );
}

.mrwin-wheel-bracket-champion strong {
	font-size: 1.1rem;
}

/* After the first step of a two-step draw: the group, and what to do next. */
.mrwin-wheel-stage-next {
	display: block;
	width: 100%;
	margin-top: 2px;
	font-size: 0.72em;
	font-weight: 500;
	opacity: 0.75;
}

/* The countdown an item carries, under the result. */
.mrwin-wheel-timer {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: center;
	margin-top: 4px;
}

.mrwin-wheel-timer-face {
	font-size: clamp( 28px, 7vw, 44px );
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.mrwin-wheel-timer.is-done .mrwin-wheel-timer-face {
	color: var( --primary-color, #7c3aed );
}

/* ---------------------------------------------------------------- spin the bottle */

/*
 * The bottle over the middle of the wheel.
 *
 * Its own element rather than part of the canvas, because on this wheel the names stay put
 * and only the bottle turns - see Wheel.prototype.applyRotation(). Tall and thin, centred on
 * the wheel's own middle, and turning about that point.
 */
.mrwin-wheel-bottle {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 13%;
	height: 82%;
	transform: translate( -50%, -50% );
	transform-origin: 50% 50%;
	pointer-events: none;
	filter: drop-shadow( 0 6px 10px rgba( 0, 0, 0, 0.4 ) );
}

.mrwin-wheel-bottle svg {
	width: 100%;
	height: 100%;
	display: block;
}

/*
 * No pointer at twelve o'clock on a bottle wheel: the bottle is the pointer, and a triangle
 * at the top would name a second, different winner.
 */
.mrwin-wheel-has-bottle .mrwin-wheel-pointer {
	display: none;
}

/* ---------------------------------------------------------------- the counter */

/*
 * How often each item has come up, and how often it should. Four columns on one row: the
 * name takes the room that is left, the numbers are tabular so they line up down the list,
 * and the expected share is dimmed - it is the reference, not the result.
 */
.mrwin-wheel-stats-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mrwin-wheel-stats-count {
	margin: 0 0 8px;
	font-size: 0.85rem;
	color: var( --text-color-light, #666 );
}

.mrwin-wheel-stats-row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto auto auto;
	gap: 10px;
	align-items: baseline;
	padding: 4px 0;
	border-top: 1px solid var( --border-color, #e2e2e2 );
	font-size: 0.9rem;
}

.mrwin-wheel-stats-row:first-child {
	border-top: 0;
}

.mrwin-wheel-stats-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mrwin-wheel-stats-value,
.mrwin-wheel-stats-share,
.mrwin-wheel-stats-expected {
	font-variant-numeric: tabular-nums;
}

.mrwin-wheel-stats-value {
	font-weight: 600;
}

.mrwin-wheel-stats-expected {
	color: var( --text-color-light, #666 );
	cursor: help;
}

/* An item's share of a weighted wheel, beside its name in the list. */
.mrwin-wheel-item-chance {
	flex: 0 0 auto;
	padding: 1px 6px;
	border-radius: 999px;
	background: var( --header-hover-bg, rgba( 0, 0, 0, 0.08 ) );
	font-size: 0.78em;
	font-variant-numeric: tabular-nums;
	cursor: help;
}

/* The words over the winner of an elimination game, on their own line above the name. */
.mrwin-wheel-last-one {
	display: block;
	width: 100%;
	margin-bottom: 2px;
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.7;
}

.mrwin-wheel-winner-join {
	opacity: 0.55;
	font-weight: 400;
}

.mrwin-wheel-modal-winners {
	display: inline-flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0 0 0 1.4em;
	text-align: left;
}

.mrwin-wheel-modal-winners li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mrwin-wheel-option-select {
	justify-content: space-between;
}

.mrwin-wheel-option-select select {
	padding: 4px 8px;
	border: 1px solid var( --border-color, #e2e2e2 );
	border-radius: var( --control-radius, 8px );
	background: var( --content-bg, #ffffff );
	color: inherit;
	font: inherit;
}

/* ---------------------------------------------------------------- the bingo board */

.mrwin-wheel-board {
	padding: 10px 14px;
	border: 1px solid var( --border-color, #e2e2e2 );
	border-radius: var( --control-radius, 8px );
}

.mrwin-wheel-board > summary {
	cursor: pointer;
	font-weight: 600;
}

.mrwin-wheel-board-count {
	margin: 6px 0 10px;
	font-size: 0.9rem;
	opacity: 0.75;
}

.mrwin-wheel-board-grid {
	display: grid;
	grid-template-columns: repeat( 10, minmax( 0, 1fr ) );
	gap: 4px;
}

.mrwin-wheel-board-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var( --header-hover-bg, rgba( 0, 0, 0, 0.06 ) );
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	opacity: 0.55;
}

.mrwin-wheel-board-cell.is-drawn {
	background: var( --primary-color, #7c3aed );
	color: var( --button-text-color, #ffffff );
	font-weight: 700;
	opacity: 1;
}

.mrwin-wheel-board-cell.is-last {
	box-shadow: 0 0 0 3px var( --content-bg, #ffffff ), 0 0 0 5px var( --primary-color, #7c3aed );
}

/* ---------------------------------------------------------------- the quiz */

.mrwin-wheel-modal.is-quiz .mrwin-wheel-modal-box {
	max-width: 560px;
	padding: 28px 22px 22px;
	max-height: calc( 100vh - 40px );
	overflow-y: auto;
}

.mrwin-wheel-modal.is-quiz .mrwin-wheel-modal-title {
	color: var( --text-color, #111111 );
	font-size: 1.2rem;
}

.mrwin-wheel-modal.is-quiz .mrwin-wheel-modal-winner {
	display: block;
	font-size: 1rem;
	font-weight: 400;
}

.mrwin-wheel-quiz {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
}

/* The question: as large as it can be, a flag glyph or a picture. */
.mrwin-wheel-quiz-picture {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
}

.mrwin-wheel-quiz-picture .mrwin-wheel-icon {
	font-size: clamp( 84px, 22vw, 128px );
	line-height: 1;
}

/*
 * A question written in words - a country, a chemical symbol, "7 x 8" - rather than a flag
 * or a picture. At the size a flag is drawn it would be a wall of letters, so it is set as
 * a heading instead, and wraps when it is long.
 */
.mrwin-wheel-quiz-picture.is-words .mrwin-wheel-icon {
	font-size: clamp( 28px, 7vw, 46px );
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	text-wrap: balance;
}

.mrwin-wheel-quiz-picture .mrwin-wheel-icon-image {
	width: auto;
	max-width: 100%;
	height: auto;
	/* A map with one small country on it needs the room more than a flag does. */
	max-height: min( 280px, 40vh );
	border-radius: var( --control-radius, 8px );
}

/* The harder quiz: the picture turned round, and turning back upright once it is answered. */
.mrwin-wheel-quiz-picture .is-turned {
	display: inline-block;
	transition: transform 0.6s ease;
}

@media ( prefers-reduced-motion: reduce ) {
	.mrwin-wheel-quiz-picture .is-turned {
		transition: none;
	}
}

/* The note again: beside a picture that has a pitch - a note on a staff - and in the dialog. */
.mrwin-wheel-quiz-picture {
	gap: 12px;
}

.mrwin-wheel-tone {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid var( --border-color, #e2e2e2 );
	border-radius: 50%;
	background: var( --content-bg, #ffffff );
	color: var( --text-color, #111111 );
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.mrwin-wheel-tone:hover,
.mrwin-wheel-tone:focus-visible {
	border-color: var( --primary-color, #1e88e5 );
}

.mrwin-wheel-modal-winner .mrwin-wheel-tone {
	margin-inline-start: 10px;
	vertical-align: middle;
}

.mrwin-wheel-quiz-choices {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 8px;
}

.mrwin-wheel-quiz-choice {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 8px 12px;
	border: 2px solid var( --border-color, #e2e2e2 );
	border-radius: var( --control-radius, 8px );
	background: var( --content-bg, #ffffff );
	color: var( --text-color, #111111 );
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

.mrwin-wheel-quiz-choice:hover:not( :disabled ) {
	border-color: var( --primary-color, #7c3aed );
}

.mrwin-wheel-quiz-choice:disabled {
	cursor: default;
}

.mrwin-wheel-quiz-key {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var( --header-hover-bg, rgba( 0, 0, 0, 0.08 ) );
	font-size: 0.78rem;
	font-weight: 700;
}

/*
 * The answer picked and not yet checked: the site's own colour, lightened. A tint of it rather
 * than a fixed light shade, so the same rule is a pale wash on a light page and a soft glow on
 * a dark one, and the text on it reads in both. The rgba line is for a browser without
 * relative colours.
 */
.mrwin-wheel-quiz-choice.is-picked {
	border-color: var( --primary-color, #7c3aed );
	background: rgba( 124, 58, 237, 0.12 );
	background: hsl( from var( --primary-color, #7c3aed ) h s l / 0.14 );
}

.mrwin-wheel-quiz-choice.is-picked .mrwin-wheel-quiz-key {
	background: var( --primary-color, #7c3aed );
	color: #ffffff;
}

.mrwin-wheel-quiz-choice.is-right {
	border-color: #16a34a;
	background: rgba( 22, 163, 74, 0.14 );
}

.mrwin-wheel-quiz-choice.is-wrong {
	border-color: #dc2626;
	background: rgba( 220, 38, 38, 0.12 );
}

.mrwin-wheel-quiz-choice.is-right .mrwin-wheel-quiz-key {
	background: #16a34a;
	color: #ffffff;
}

.mrwin-wheel-quiz-choice.is-wrong .mrwin-wheel-quiz-key {
	background: #dc2626;
	color: #ffffff;
}

.mrwin-wheel-quiz-message {
	margin: 0;
	min-height: 1.5em;
	color: var( --text-color-light, #666666 );
}

.mrwin-wheel-quiz.is-right .mrwin-wheel-quiz-message strong {
	color: #16a34a;
}

.mrwin-wheel-quiz.is-wrong .mrwin-wheel-quiz-message strong {
	color: #dc2626;
}

.mrwin-wheel-quiz-action {
	align-self: center;
	min-width: 180px;
	padding: 12px 28px;
	border: 0;
	border-radius: 999px;
	background: var( --primary-color, #7c3aed );
	color: var( --button-text-color, #ffffff );
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.mrwin-wheel-quiz-action:disabled {
	opacity: 0.45;
	cursor: default;
}

/* The score beside the wheel. */
.mrwin-wheel-score {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid var( --border-color, #e2e2e2 );
	border-radius: var( --control-radius, 8px );
}

.mrwin-wheel-score-line {
	display: flex;
	gap: 18px;
}

.mrwin-wheel-score-cell {
	display: flex;
	flex-direction: column;
}

.mrwin-wheel-score-label {
	font-size: 0.78rem;
	opacity: 0.7;
}

.mrwin-wheel-score-value {
	font-size: 1.1rem;
	font-variant-numeric: tabular-nums;
}

.mrwin-wheel-score-cell.is-main .mrwin-wheel-score-value {
	font-size: 1.4rem;
	color: var( --primary-color, #7c3aed );
}

/*
 * The quiz's own settings: the same box as Options, Past winners and the colours, but tinted
 * with the site's colour and with a larger heading - it is what a quiz player looks for first,
 * and it sits among panels that look the same.
 */
.mrwin-wheel-quiz-options {
	border: 1px solid var( --border-color, #e2e2e2 );
	border: 1px solid color-mix( in srgb, var( --primary-color, #7c3aed ) 45%, var( --border-color, #e2e2e2 ) );
	border-radius: var( --control-radius, 8px );
	background: color-mix( in srgb, var( --primary-color, #7c3aed ) 6%, transparent );
}

.mrwin-wheel-quiz-options > summary,
.entry-content .mrwin-wheel .mrwin-wheel-quiz-options > summary {
	padding: 10px 14px;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 700;
	color: var( --text-color, #111111 );
}

.mrwin-wheel-quiz-options[ open ] > summary {
	border-bottom: 1px solid color-mix( in srgb, var( --primary-color, #7c3aed ) 25%, transparent );
}

/* A quiz the visitor writes: its lines, folded like the other panels. */
.mrwin-wheel-quiz-edit {
	border: 1px solid var( --border-color, #e2e2e2 );
	border-radius: var( --control-radius, 8px );
}

.mrwin-wheel-quiz-edit > summary {
	padding: 8px 12px;
	cursor: pointer;
	font-size: 0.9rem;
	color: var( --text-color-light, #666666 );
}

/* A quiz of groups made your own: the warning, then the groups' lists and the new group. */
.mrwin-wheel-quiz-edit-note {
	margin: 0 12px 10px;
	padding: 8px 10px;
	border-radius: var( --control-radius, 8px );
	background: color-mix( in srgb, #f59e0b 12%, transparent );
	font-size: 0.85rem;
	line-height: 1.4;
}

.mrwin-wheel-quiz-edit > .mrwin-wheel-group-items,
.mrwin-wheel-quiz-edit > .mrwin-wheel-group-new {
	margin: 0 12px 8px;
}

.mrwin-wheel-quiz-edit > .mrwin-wheel-group-new {
	margin-bottom: 12px;
}

.mrwin-wheel-quiz-q {
	font-weight: 600;
}

.mrwin-wheel-quiz-arrow {
	opacity: 0.55;
}

.mrwin-wheel-quiz-edit > .mrwin-wheel-bulk {
	display: block;
	width: calc( 100% - 24px );
	margin: 0 12px 12px;
	box-sizing: border-box;
}

.mrwin-wheel-quiz-options[ open ] {
	padding-bottom: 4px;
}

.mrwin-wheel-quiz-options > .mrwin-wheel-quiz-field {
	margin: 10px 14px;
}

.mrwin-wheel-quiz-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 10px;
	font-size: 0.9rem;
	font-weight: 600;
}

.mrwin-wheel-quiz-field select {
	padding: 8px 10px;
	border: 1px solid var( --border-color, #e2e2e2 );
	border-radius: var( --control-radius, 8px );
	background: var( --content-bg, #ffffff );
	color: inherit;
	font: inherit;
	font-weight: 400;
}

/* A quiz's history marks each answer. */
.mrwin-wheel-history-mark {
	margin-left: auto;
	font-weight: 700;
}

.mrwin-wheel-history-row.is-right .mrwin-wheel-history-mark {
	color: #16a34a;
}

.mrwin-wheel-history-row.is-wrong .mrwin-wheel-history-mark {
	color: #dc2626;
}

/* [wheel_demo show="quiz"]: the card as it sits in the dialog, in the article - inside the
   demo's own frame, so without a second one. */
.mrwin-wheel-quiz-demo {
	max-width: 520px;
	margin: 0 auto;
	text-align: center;
}

.mrwin-wheel-quiz-question {
	margin: 0 0 8px;
	font-size: 1.15rem;
}

/* ---------------------------------------------------------------- editor notice */

.mrwin-wheel-notice {
	padding: 12px 16px;
	border-left: 4px solid var( --primary-color, #7c3aed );
	background: var( --trending-bg, rgba( 124, 58, 237, 0.08 ) );
}

/*
 * A picture instead of SPIN!: the picture is the button. No teardrop behind it and no
 * colour - a pumpkin in a purple drop is two ideas - only a shadow so it lifts off the
 * wheel. The frame goes to the full button, still turned level by its +45.
 */
.mrwin-wheel-spin.has-image {
	background: transparent;
	border-radius: 50%;
	box-shadow: none;
	filter: drop-shadow( 0 3px 6px rgba( 0, 0, 0, 0.35 ) );
}

.mrwin-wheel-spin.has-image .mrwin-wheel-spin-text {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.mrwin-wheel-spin-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
}

/* ---------------------------------------------------------------- reduced motion */

/*
 * The idle drift is already skipped in script when this is set. The spin is not: it is
 * the thing the visitor asked for by pressing the button, and removing it would leave a
 * wheel that answers without appearing to do anything. Only the incidental movement goes.
 */
@media ( prefers-reduced-motion: reduce ) {
	.mrwin-wheel-spin,
	.mrwin-wheel-spin:hover,
	.mrwin-wheel-spin:active {
		transition: none;
		/* The turn is the shape, not an animation, so it stays. Only the scale goes. */
		transform: translate( -50%, -50% ) rotate( -45deg );
	}
}

/* ---------------------------------------------------------------- inside an article */

/*
 * When the shortcode puts the wheel inside the article, the article's own typography reaches
 * into it. Measured by rendering the same wheel inside .entry-content and outside it and
 * comparing every element's computed style:
 *
 *   .entry-content ul, ol        margin 20px 0, padding-left 30px      theme, main.css
 *   .entry-content li            margin-bottom 8px                      theme, main.css
 *   .entry-content p             margin-bottom 20px                     theme, main.css
 *   .entry-content h2            28px, 600, margins, a coloured bar     theme, main.css + options
 *   .entry-content               line-height 1.8 rather than 1.6        theme, main.css
 *   .entry-content details       margin 20px 0 40px                     mrwin-radio, radio-socials.css
 *   .entry-content details > summary   a big centred button in the      mrwin-radio, radio-socials.css
 *                                primary colour, 22px bold, with its own
 *                                ::before triangle and a hover lift
 *
 * The last two are another plugin styling every <details> in every article on the site,
 * which is a problem of its own - but it is not one this wheel should have to show.
 *
 * Every rule starts with `.entry-content .mrwin-wheel`, so none of it applies where the wheel
 * is printed above the article, and it outranks what it answers: the strongest of those is
 * one class and two elements, and these are two classes and up. Values that are not simply
 * zero repeat the ones set further up this file, because the rules they defend are the
 * ones the article overrides.
 */
.entry-content .mrwin-wheel {
	line-height: 1.6;   /* the body's, not the article's */
}

.entry-content .mrwin-wheel .mrwin-wheel-items,
.entry-content .mrwin-wheel .mrwin-wheel-history-list {
	margin: 0;
}

.entry-content .mrwin-wheel .mrwin-wheel-items {
	padding: 0;
}

.entry-content .mrwin-wheel .mrwin-wheel-history-list {
	padding: 0 12px 0 40px;
}

/* The one that showed first: 8px under every row of the list and every past winner. */
.entry-content .mrwin-wheel li {
	margin-bottom: 0;
}

.entry-content .mrwin-wheel .mrwin-wheel-restored {
	margin: 0;
}

.entry-content .mrwin-wheel .mrwin-wheel-panel-heading {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: inherit;
}

.entry-content .mrwin-wheel details {
	margin: 0;
}

.entry-content .mrwin-wheel details > summary {
	display: list-item;
	list-style: revert;   /* the browser's own disclosure triangle, open and closed */
	padding: 8px 12px;
	border-radius: 0;
	background: none;
	color: var( --text-color-light, #666666 );
	font-size: 0.9rem;
	font-weight: inherit;
	text-align: start;
	user-select: auto;
	transition: none;
}

/*
 * And what the same stylesheet adds around a summary rather than to it: a second triangle
 * in ::before, the browser's own marker hidden in Safari, and a hover that lifts the row by
 * a pixel. The first two together would have left some browsers with two triangles and
 * others with the wrong one.
 */
.entry-content .mrwin-wheel details > summary::before {
	content: none;
}

.entry-content .mrwin-wheel details > summary::-webkit-details-marker {
	display: revert;
}

.entry-content .mrwin-wheel details > summary:hover {
	opacity: 1;
	transform: none;
}

/* ---------------------------------------------------------------- demos in the article */

/*
 * [wheel_demo]: the wheel's own markup, showing one part of itself between two paragraphs.
 *
 * Out of the grid - one part needs one column - and at the width the panel has beside the
 * wheel, so a demo is the size the visitor knows it at. The panel keeps its border and its
 * rounded corners, which is all the frame a demo needs.
 *
 * pointer-events and user-select back up the inert attribute for any browser that does not
 * know it: a demo is a picture, and a cursor that turns into a hand over it would say
 * otherwise.
 */
.mrwin-wheel.mrwin-demo {
	display: block;
	max-width: calc( 420px + 36px );
	/* In the middle of the column: a picture between two paragraphs, not a sidebar. */
	margin: 16px auto 28px;
	pointer-events: none;
	user-select: none;
	/*
	 * A frame of its own, so a demo reads as a picture of the wheel rather than as a control
	 * that belongs to the article. The max-width grows by the padding, so what is inside stays
	 * the size the visitor knows it at.
	 */
	box-sizing: border-box;
	padding: 18px;
	border: 1px solid var( --border-color, #e0e0e0 );
	border-radius: var(--card-radius, 14px);
	background: var( --tint-panel, rgba( 0, 0, 0, 0.03 ) );
	box-shadow: var( --shadow-md, 0 2px 4px rgba( 0, 0, 0, 0.04 ), 0 6px 16px rgba( 0, 0, 0, 0.06 ) );
}

/* A section with its own border needs no second one from the panel around it. */
.mrwin-demo-bare .mrwin-wheel-panel {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* The small wheel that has just stopped, with the result under it. */
.mrwin-wheel.mrwin-demo-winner {
	max-width: calc( 300px + 36px );
}

/*
 * The theme's Tiles layout: a demo in an article is an inset in the article's tile - no
 * outline, no shadow, the inset colour (--outer-bg inside a tile). Its corners already
 * follow the theme's Rounded Elements.
 */
body.site-layout-tiles .mrwin-wheel.mrwin-demo {
	border-color: transparent;
	box-shadow: none;
	background: var( --outer-bg, #f5f5f5 );
}