/* =========================================================================
   Wavelength Games Hub - front-end styles
   Every selector is scoped under .wgh-root so nothing can collide with a
   theme, Elementor, or another plugin. All colours come from local custom
   properties, so host theme variables never leak in either.

   Themes: .wgh-root carries data-theme="auto|light|dark". "auto" follows the
   visitor's OS preference; the other two are locked.
   ========================================================================= */

.wgh-root {
	/* Brand */
	--wgh-accent: #3944fb;
	--wgh-accent-dark: #2b34d6;
	--wgh-accent-soft: rgba(57, 68, 251, .10);
	--wgh-accent-line: rgba(57, 68, 251, .28);
	--wgh-accent-ink: #2b34d6;
	--wgh-accent-2: #00b894;
	--wgh-warm: #e17055;
	--wgh-blue: #0984e3;

	/* Surfaces - light */
	--wgh-bg: #ffffff;
	--wgh-ink: #131829;
	--wgh-ink-2: #2c3450;
	--wgh-muted: #5a647e;
	--wgh-line: #e6e9f5;
	--wgh-line-2: #d5daed;
	--wgh-card: #f5f6fd;
	--wgh-card-2: #ffffff;
	--wgh-band: #f7f8fd;

	--wgh-radius: 20px;
	--wgh-radius-sm: 13px;
	--wgh-shadow: 0 6px 22px rgba(19, 24, 41, .07);
	--wgh-shadow-lg: 0 26px 60px rgba(19, 24, 41, .14);
	--wgh-shadow-hover: 0 20px 44px rgba(57, 68, 251, .18);
	--wgh-max: 1180px;
	--wgh-ease: cubic-bezier(.22, 1, .36, 1);

	/* Headings use Schibsted Grotesk at 600; body copy keeps the system stack. */
	--wgh-heading-font: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--wgh-heading-weight: 600;

	color: var(--wgh-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.68;
	font-size: 16px;
	box-sizing: border-box;
	max-width: 100%;
	overflow-wrap: break-word;
}

.wgh-root[data-theme="dark"],
.wgh-root[data-theme="auto"] {
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	.wgh-root[data-theme="auto"] {
		--wgh-bg: #0b0f1e;
		--wgh-ink: #eef1ff;
		--wgh-ink-2: #c8cfe8;
		--wgh-muted: #97a1c4;
		--wgh-line: rgba(120, 133, 255, .16);
		--wgh-line-2: rgba(120, 133, 255, .28);
		--wgh-card: #121732;
		--wgh-card-2: #0f1428;
		--wgh-band: #0e1326;
		--wgh-accent-soft: rgba(120, 133, 255, .16);
		--wgh-accent-line: rgba(140, 152, 255, .38);
		--wgh-accent-ink: #b9c0ff;
		--wgh-shadow: 0 6px 22px rgba(0, 0, 0, .35);
		--wgh-shadow-lg: 0 26px 60px rgba(0, 0, 0, .5);
		--wgh-shadow-hover: 0 20px 44px rgba(57, 68, 251, .3);
		color-scheme: dark;
	}
}

.wgh-root[data-theme="dark"] {
	--wgh-bg: #0b0f1e;
	--wgh-ink: #eef1ff;
	--wgh-ink-2: #c8cfe8;
	--wgh-muted: #97a1c4;
	--wgh-line: rgba(120, 133, 255, .16);
	--wgh-line-2: rgba(120, 133, 255, .28);
	--wgh-card: #121732;
	--wgh-card-2: #0f1428;
	--wgh-band: #0e1326;
	--wgh-accent-soft: rgba(120, 133, 255, .16);
	--wgh-accent-line: rgba(140, 152, 255, .38);
	--wgh-accent-ink: #b9c0ff;
	--wgh-shadow: 0 6px 22px rgba(0, 0, 0, .35);
	--wgh-shadow-lg: 0 26px 60px rgba(0, 0, 0, .5);
	--wgh-shadow-hover: 0 20px 44px rgba(57, 68, 251, .3);
	color-scheme: dark;
}

.wgh-root *,
.wgh-root *::before,
.wgh-root *::after { box-sizing: border-box; }

/* Full-bleed variant: breaks out of any constrained theme container. */
.wgh-root.wgh-full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.wgh-root .wgh-container { width: 100%; max-width: var(--wgh-max); margin: 0 auto; padding: 0 22px; }
.wgh-root.wgh-full .wgh-container { max-width: min(1640px, 100%); }
.wgh-root .wgh-section { padding: 68px 0; background: var(--wgh-bg); }
.wgh-root .wgh-section:nth-of-type(even) { background: var(--wgh-band); }

/* ---- Typography --------------------------------------------------------- */

/* Every heading the plugin renders, on the page and inside each game widget. */
.wgh-root h1,
.wgh-root h2,
.wgh-root h3,
.wgh-root h4,
.wgh-root .wgh-h2,
.wgh-root .wgh-h3,
.wgh-root .wgh-stage-title,
.wgh-root .wgh-card-text,
.wgh-root .wgh-timer-num {
	font-family: var(--wgh-heading-font);
	font-weight: var(--wgh-heading-weight);
	font-optical-sizing: auto;
}

.wgh-root h1,
.wgh-root h2,
.wgh-root h3,
.wgh-root h4 { line-height: 1.24; margin: 0 0 .5em; color: var(--wgh-ink); letter-spacing: -.01em; }
.wgh-root p { margin: 0 0 1em; }

/* ---- Section header ------------------------------------------------------
   Every section opens with the same block, so headings, leads and the content
   below them all share one left edge and one vertical rhythm. */

.wgh-root .wgh-section-head { max-width: 780px; margin: 0 0 38px; text-align: left; }

/* The eyebrow is a solid pill rather than loose small caps, so the tag reads
   clearly against both the light and the dark section backgrounds. */
.wgh-root .wgh-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	padding: 7px 16px 7px 7px;
	border-radius: 999px;
	background: var(--wgh-accent-soft);
	border: 1px solid var(--wgh-accent-line);
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wgh-accent-ink);
}
.wgh-root .wgh-eyebrow-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 24px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--wgh-accent);
	color: #fff;
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .03em;
}

.wgh-root .wgh-h2 {
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	text-align: left;
	margin: 0 0 .45em;
	font-weight: var(--wgh-heading-weight);
	text-wrap: balance;
}
.wgh-root .wgh-section-head .wgh-h2:last-child { margin-bottom: 0; }

.wgh-root .wgh-lead,
.wgh-root .wgh-intro-text {
	text-align: left;
	margin: 0;
	color: var(--wgh-muted);
	font-size: 1.04rem;
	max-width: 74ch;
}

/* Prose fills the boxed container instead of sitting in a narrow column with
   dead space beside it. Short paragraphs and a generous line-height keep it
   comfortable at the wider measure. */
.wgh-root .wgh-prose { max-width: none; margin: 0; }
.wgh-root .wgh-prose p { color: var(--wgh-muted); line-height: 1.78; margin: 0 0 1.05em; }
.wgh-root .wgh-prose > :last-child { margin-bottom: 0; }

.wgh-root .wgh-h3 {
	font-size: clamp(1.08rem, 1.5vw, 1.28rem);
	font-weight: var(--wgh-heading-weight);
	color: var(--wgh-ink);
	margin: 1.9em 0 .55em;
	padding-left: 15px;
	border-left: 3px solid var(--wgh-accent);
	line-height: 1.35;
}
.wgh-root .wgh-prose > .wgh-h3:first-child { margin-top: 0; }

.wgh-root .wgh-list {
	list-style: none;
	margin: 0 0 1.15em;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	gap: 10px 30px;
}
.wgh-root .wgh-list li {
	position: relative;
	padding-left: 30px;
	color: var(--wgh-muted);
	line-height: 1.65;
}
.wgh-root .wgh-list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: .58em;
	width: 9px;
	height: 9px;
	border-radius: 3px;
	background: linear-gradient(140deg, var(--wgh-accent), var(--wgh-accent-2));
}

/* ---- Hero ----------------------------------------------------------------
   The hero is one block that carries the whole introduction AND the playable
   game: tagline, headline, description, then the game panel, all centred on a
   single axis. The gradient band sits behind the text and the panel is pulled
   up onto its lower edge, so the game reads as part of the hero rather than
   something dangling underneath it. */

.wgh-root .wgh-hero {
	position: relative;
	padding: 0 0 64px;
}

.wgh-root .wgh-hero-head {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(900px 480px at 12% -10%, rgba(255, 255, 255, .22), transparent 60%),
		radial-gradient(760px 420px at 92% 0%, rgba(168, 85, 247, .38), transparent 58%),
		linear-gradient(135deg, var(--wgh-accent) 0%, #5b3df5 52%, #7c3aed 100%);
	color: #fff;
	/* Fixed pixels, not vw. The plugin can sit inside a narrow Elementor column
	   while the viewport stays wide; a vw-based overlap then swallows the
	   description, because the text wraps taller while the pull-up grows. The
	   bottom padding here is always larger than the stage's pull-up below, so
	   there is guaranteed clearance under the description. */
	padding: 72px 0 128px;
	text-align: center;
	border-radius: 0 0 32px 32px;
}
.wgh-root .wgh-hero-head > .wgh-container { position: relative; z-index: 1; }

.wgh-root .wgh-hero .wgh-tagline {
	display: inline-block;
	background: rgba(255, 255, 255, .17);
	border: 1px solid rgba(255, 255, 255, .3);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	padding: 8px 20px;
	border-radius: 999px;
	font-size: .78rem;
	letter-spacing: .11em;
	text-transform: uppercase;
	margin: 0 0 22px;
	font-weight: 800;
	color: #fff;
}
.wgh-root .wgh-hero h1 {
	color: #fff;
	font-size: clamp(2rem, 4.6vw, 3.1rem);
	margin: 0 auto .4em;
	font-weight: var(--wgh-heading-weight);
	max-width: 22ch;
	text-wrap: balance;
}
.wgh-root .wgh-hero p {
	color: rgba(255, 255, 255, .94);
	max-width: 68ch;
	margin: 0 auto;
	font-size: 1.06rem;
}

/* The panel rides up onto the gradient's bottom edge. */
.wgh-root .wgh-hero-stage {
	position: relative;
	z-index: 2;
	margin-top: -88px;   /* 40px of clearance under the description */
}

/* ---- Game panel --------------------------------------------------------- */

.wgh-root .wgh-panel-shell { padding: clamp(28px, 4vw, 48px) 0; }
.wgh-root .wgh-game-panel {
	background: var(--wgh-card-2);
	border: 1px solid var(--wgh-line);
	border-radius: var(--wgh-radius);
	box-shadow: var(--wgh-shadow-lg);
	padding: clamp(18px, 2.4vw, 28px);
	margin: 0 auto;
	max-width: 880px;
	position: relative;
}
.wgh-root .wgh-game-panel-wide { max-width: 100%; padding: 0; background: transparent; border: 0; box-shadow: none; }

/* ---- Buttons ------------------------------------------------------------ */

.wgh-root .wgh-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	border: 2px solid transparent;
	background: linear-gradient(135deg, var(--wgh-accent), #6d28d9);
	color: #fff;
	padding: 12px 26px;
	min-height: 48px;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	font-family: inherit;
	overflow: hidden;
	transition: transform .18s var(--wgh-ease), box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.wgh-root .wgh-btn:hover { transform: translateY(-2px); box-shadow: var(--wgh-shadow-hover); }
.wgh-root .wgh-btn:active { transform: translateY(0); box-shadow: none; }
.wgh-root .wgh-btn:focus-visible { outline: 3px solid #a3a9ff; outline-offset: 2px; }
.wgh-root .wgh-btn-primary { background: linear-gradient(135deg, var(--wgh-accent), #6d28d9); }
.wgh-root .wgh-btn-ghost { background: transparent; border-color: var(--wgh-line-2); color: var(--wgh-muted); }
.wgh-root .wgh-btn-ghost:hover { background: var(--wgh-card); color: var(--wgh-ink); border-color: var(--wgh-accent); box-shadow: none; }
.wgh-root .wgh-btn-good { background: linear-gradient(135deg, var(--wgh-accent-2), #059669); }
.wgh-root .wgh-btn-good:hover { box-shadow: 0 20px 44px rgba(0, 184, 148, .28); }
.wgh-root .wgh-btn-truth { background: linear-gradient(135deg, var(--wgh-blue), #0652dd); }
.wgh-root .wgh-btn-truth:hover { box-shadow: 0 20px 44px rgba(9, 132, 227, .3); }
.wgh-root .wgh-btn-dare { background: linear-gradient(135deg, var(--wgh-warm), #d63031); }
.wgh-root .wgh-btn-dare:hover { box-shadow: 0 20px 44px rgba(225, 112, 85, .3); }
.wgh-root .wgh-btn-sm { padding: 9px 18px; min-height: 42px; font-size: .92rem; }

.wgh-root .wgh-input {
	width: 100%;
	padding: 11px 15px;
	min-height: 46px;
	border: 1px solid var(--wgh-line-2);
	border-radius: var(--wgh-radius-sm);
	font-size: 1rem;
	font-family: inherit;
	color: var(--wgh-ink);
	background: var(--wgh-bg);
	transition: border-color .16s ease, box-shadow .16s ease;
}
.wgh-root .wgh-input:hover { border-color: var(--wgh-accent); }
.wgh-root .wgh-input:focus-visible { outline: none; border-color: var(--wgh-accent); box-shadow: 0 0 0 3px var(--wgh-accent-soft); }

/* ---- Game shell --------------------------------------------------------- */

.wgh-root .wgh-game { position: relative; display: flex; flex-direction: column; gap: 20px; }
.wgh-root .wgh-game:focus { outline: none; }

.wgh-root .wgh-game-bar { display: flex; align-items: flex-start; gap: 12px; }
.wgh-root .wgh-cat-row { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; }

.wgh-root .wgh-chip {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid var(--wgh-line);
	background: var(--wgh-card);
	color: var(--wgh-muted);
	font: 700 .92rem/1.2 inherit;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s var(--wgh-ease), box-shadow .18s ease;
}
.wgh-root .wgh-chip:hover { border-color: var(--wgh-accent); color: var(--wgh-ink); transform: translateY(-2px); }
.wgh-root .wgh-chip.is-active {
	background: linear-gradient(135deg, var(--wgh-accent), #6d28d9);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 10px 24px rgba(57, 68, 251, .3);
}

.wgh-root .wgh-icon-btn {
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--wgh-line);
	background: var(--wgh-card);
	color: var(--wgh-muted);
	cursor: pointer;
	padding: 0;
	transition: color .16s ease, border-color .16s ease, transform .16s var(--wgh-ease);
}
.wgh-root .wgh-icon-btn:hover { color: var(--wgh-ink); border-color: var(--wgh-accent); transform: translateY(-2px); }
.wgh-root .wgh-icon-btn.is-off { color: #d63031; }
.wgh-root .wgh-icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.wgh-root .wgh-stage { display: flex; flex-direction: column; gap: 16px; }
.wgh-root .wgh-stage-title { text-align: center; font-size: 1.05rem; font-weight: var(--wgh-heading-weight); color: var(--wgh-muted); margin: 0; }

.wgh-root .wgh-controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.wgh-root .wgh-meta { display: flex; flex-direction: column; gap: 12px; }

.wgh-root .wgh-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 15px;
	border-radius: 999px;
	background: var(--wgh-card);
	border: 1px solid var(--wgh-line);
	font-size: .85rem;
	color: var(--wgh-muted);
}
.wgh-root .wgh-pill strong { color: var(--wgh-ink); }
.wgh-root .wgh-pill-soft { background: transparent; border-style: dashed; }
.wgh-root .wgh-statline { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.wgh-root .wgh-note { color: var(--wgh-muted); font-size: .9rem; margin: 0; text-align: center; }

/* ---- Would You Rather duel --------------------------------------------- */

.wgh-root .wgh-duel {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: 14px;
}
.wgh-root .wgh-choice {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 200px;
	padding: 28px 22px;
	border-radius: var(--wgh-radius);
	border: 2px solid var(--wgh-line);
	background: var(--wgh-card);
	color: var(--wgh-ink);
	font-family: inherit;
	font-size: 1.14rem;
	font-weight: 700;
	line-height: 1.42;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	transition: transform .2s var(--wgh-ease), border-color .2s ease, background .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.wgh-root .wgh-choice::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, var(--wgh-accent-soft), transparent 62%);
	opacity: 0;
	transition: opacity .2s ease;
	pointer-events: none;
}
.wgh-root .wgh-choice:hover { transform: translateY(-4px); border-color: var(--wgh-accent); box-shadow: var(--wgh-shadow-hover); }
.wgh-root .wgh-choice:hover::before { opacity: 1; }
.wgh-root .wgh-choice:focus-visible { outline: 3px solid var(--wgh-accent); outline-offset: 2px; }
.wgh-root .wgh-choice > * { position: relative; z-index: 1; }
.wgh-root .wgh-choice-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--wgh-accent), #6d28d9);
	color: #fff;
	font-size: .9rem;
	font-weight: 800;
}
.wgh-root .wgh-choice-b .wgh-choice-tag { background: linear-gradient(135deg, var(--wgh-accent-2), #059669); }
.wgh-root .wgh-choice.is-picked { border-color: var(--wgh-accent-2); background: rgba(0, 184, 148, .12); transform: translateY(-4px); }
.wgh-root .wgh-choice.is-dim { opacity: .42; }
.wgh-root .wgh-vs {
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--wgh-ink);
	color: var(--wgh-bg);
	font-weight: 800;
	font-size: .85rem;
	letter-spacing: .04em;
	box-shadow: var(--wgh-shadow);
}

/* ---- Prompt / word card ------------------------------------------------- */

.wgh-root .wgh-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 220px;
	padding: 34px 26px;
	border-radius: var(--wgh-radius);
	border: 2px solid var(--wgh-line);
	background: var(--wgh-card);
	text-align: center;
	width: 100%;
	font-family: inherit;
	color: var(--wgh-ink);
	transition: border-color .2s ease, background .2s ease, transform .2s var(--wgh-ease), box-shadow .2s ease;
}
.wgh-root .wgh-card-tap { cursor: pointer; }
.wgh-root .wgh-card-tap:hover { border-color: var(--wgh-accent); transform: translateY(-3px); box-shadow: var(--wgh-shadow-hover); }
.wgh-root .wgh-card-kind {
	display: inline-block;
	padding: 6px 18px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--wgh-accent), #6d28d9);
	color: #fff;
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.wgh-root .wgh-card-text { font-size: clamp(1.2rem, 2.7vw, 1.8rem); font-weight: var(--wgh-heading-weight); line-height: 1.34; }
.wgh-root .wgh-card-hint { color: var(--wgh-muted); font-size: 1rem; font-weight: 600; }
.wgh-root .wgh-card.is-truth { border-color: var(--wgh-blue); background: rgba(9, 132, 227, .09); }
.wgh-root .wgh-card.is-truth .wgh-card-kind { background: linear-gradient(135deg, var(--wgh-blue), #0652dd); }
.wgh-root .wgh-card.is-dare { border-color: var(--wgh-warm); background: rgba(225, 112, 85, .11); }
.wgh-root .wgh-card.is-dare .wgh-card-kind { background: linear-gradient(135deg, var(--wgh-warm), #d63031); }
.wgh-root .wgh-card.is-nhie { border-color: var(--wgh-accent); background: var(--wgh-accent-soft); }
.wgh-root .wgh-card.is-win { border-color: var(--wgh-accent-2); background: rgba(0, 184, 148, .13); }
.wgh-root .wgh-card.is-win .wgh-card-kind { background: linear-gradient(135deg, var(--wgh-accent-2), #059669); }
.wgh-root .wgh-card.is-revealed { border-color: var(--wgh-accent-2); background: rgba(0, 184, 148, .1); }

/* ---- Timer -------------------------------------------------------------- */

.wgh-root .wgh-timer-line {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 10px;
}
.wgh-root .wgh-timer-num { font-size: 2.1rem; font-weight: var(--wgh-heading-weight); color: var(--wgh-accent-2); font-variant-numeric: tabular-nums; }
.wgh-root .wgh-timer-label { color: var(--wgh-muted); font-size: .85rem; font-weight: 600; }
.wgh-root .wgh-timer-line.is-low .wgh-timer-num { color: #d63031; }

/* ---- Setup & roster ----------------------------------------------------- */

.wgh-root .wgh-setup { display: flex; flex-wrap: wrap; gap: 16px; }
.wgh-root .wgh-field { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; }
.wgh-root .wgh-field > label { font-size: .85rem; font-weight: 700; color: var(--wgh-muted); }
.wgh-root .wgh-field-row { display: flex; gap: 8px; align-items: stretch; }
.wgh-root .wgh-field-row .wgh-input { flex: 1 1 auto; min-width: 0; }
.wgh-root .wgh-field-row .wgh-btn { flex: 0 0 auto; }

.wgh-root .wgh-roster { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.wgh-root .wgh-player {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 13px;
	border-radius: 999px;
	border: 1px solid var(--wgh-line);
	background: var(--wgh-card);
	color: var(--wgh-ink);
	font: 700 .9rem/1.2 inherit;
	cursor: pointer;
	transition: border-color .16s ease, transform .16s var(--wgh-ease), background .16s ease;
}
.wgh-root .wgh-player:hover { border-color: var(--wgh-accent); transform: translateY(-2px); }
.wgh-root .wgh-player em {
	font-style: normal;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--wgh-accent), #6d28d9);
	color: #fff;
	font-size: .78rem;
}
.wgh-root .wgh-player.is-turn { border-color: var(--wgh-accent); background: var(--wgh-accent-soft); }
.wgh-root .wgh-player.is-out { opacity: .42; }
.wgh-root .wgh-player-x {
	border: 0;
	background: none;
	color: var(--wgh-muted);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
	transition: color .16s ease;
}
.wgh-root .wgh-player-x:hover { color: #d63031; }
.wgh-root .wgh-roster-lives .wgh-player-lives { flex-direction: column; gap: 6px; border-radius: var(--wgh-radius-sm); padding: 10px 14px; }
.wgh-root .wgh-lives { display: inline-flex; gap: 4px; }
.wgh-root .wgh-life { width: 10px; height: 10px; border-radius: 50%; background: var(--wgh-accent-2); display: inline-block; }
.wgh-root .wgh-life.is-lost { background: var(--wgh-line-2); }

/* ---- Confetti overlay --------------------------------------------------- */

.wgh-root .wgh-confetti-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

/* ---- Cards: how to play + features -------------------------------------- */

/* Six-column track so five steps land as three across, then two at half width
   each. The last-two rule is scoped to lists of exactly five, so a game with a
   different number of steps just flows three to a row. */
.wgh-root .wgh-howto-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
	align-items: stretch;
}
.wgh-root .wgh-howto-card { grid-column: span 2; }
.wgh-root .wgh-howto-card:nth-child(4):nth-last-child(2),
.wgh-root .wgh-howto-card:nth-child(5):nth-last-child(1) { grid-column: span 3; }

.wgh-root .wgh-howto-card,
.wgh-root .wgh-feature-card {
	position: relative;
	background: var(--wgh-card-2);
	border: 1px solid var(--wgh-line);
	border-radius: var(--wgh-radius);
	padding: 26px 24px;
	box-shadow: var(--wgh-shadow);
	overflow: hidden;
	isolation: isolate;
	transition: transform .26s var(--wgh-ease), box-shadow .26s ease, border-color .26s ease;
}
/* A hairline of brand colour wipes across the top edge on hover. */
.wgh-root .wgh-howto-card::before,
.wgh-root .wgh-feature-card::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	height: 3px;
	width: 100%;
	background: linear-gradient(90deg, var(--wgh-accent), #7c3aed, var(--wgh-accent-2));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .34s var(--wgh-ease);
}
.wgh-root .wgh-howto-card::after,
.wgh-root .wgh-feature-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(420px 200px at 50% -20%, var(--wgh-accent-soft), transparent 70%);
	opacity: 0;
	transition: opacity .3s ease;
}
.wgh-root .wgh-howto-card:hover,
.wgh-root .wgh-feature-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--wgh-shadow-hover);
	border-color: var(--wgh-line-2);
}
.wgh-root .wgh-howto-card:hover::before,
.wgh-root .wgh-feature-card:hover::before { transform: scaleX(1); }
.wgh-root .wgh-howto-card:hover::after,
.wgh-root .wgh-feature-card:hover::after { opacity: 1; }

.wgh-root .wgh-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 13px;
	background: linear-gradient(140deg, var(--wgh-accent), #6d28d9);
	color: #fff;
	font-weight: 800;
	font-size: 1.05rem;
	margin-bottom: 14px;
	box-shadow: 0 8px 20px rgba(57, 68, 251, .3);
	transition: transform .26s var(--wgh-ease);
}
.wgh-root .wgh-howto-card:hover .wgh-step-num { transform: scale(1.08) rotate(-4deg); }
.wgh-root .wgh-howto-card h3 { font-size: 1.12rem; }
.wgh-root .wgh-howto-card p,
.wgh-root .wgh-feature-card p { color: var(--wgh-muted); margin: 0; font-size: .95rem; }

.wgh-root .wgh-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 20px; }
.wgh-root .wgh-feature-card h3 { font-size: 1.08rem; display: flex; align-items: center; gap: 11px; margin-bottom: .45em; }
.wgh-root .wgh-feature-card h3::before {
	content: "";
	width: 11px;
	height: 11px;
	border-radius: 4px;
	background: linear-gradient(140deg, var(--wgh-accent), var(--wgh-accent-2));
	flex: 0 0 auto;
	transition: transform .26s var(--wgh-ease);
}
.wgh-root .wgh-feature-card:hover h3::before { transform: rotate(45deg) scale(1.2); }

/* ---- Inline links -------------------------------------------------------- */

.wgh-root .wgh-link {
	color: var(--wgh-accent-ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--wgh-accent-line);
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
	transition: color .16s ease, text-decoration-color .16s ease;
}
.wgh-root .wgh-link:hover,
.wgh-root .wgh-link:focus-visible {
	color: var(--wgh-accent);
	text-decoration-color: currentColor;
}

/* ---- Related guides ------------------------------------------------------ */

.wgh-root .wgh-related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
}

.wgh-root .wgh-related-card {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 22px 22px 20px;
	border-radius: var(--wgh-radius);
	border: 1px solid var(--wgh-line);
	background: var(--wgh-card-2);
	box-shadow: var(--wgh-shadow);
	text-decoration: none;
	color: var(--wgh-ink);
	position: relative;
	overflow: hidden;
	transition: transform .26s var(--wgh-ease), box-shadow .26s ease, border-color .26s ease;
}
.wgh-root .wgh-related-card::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	height: 3px;
	width: 100%;
	background: linear-gradient(90deg, var(--wgh-accent), #7c3aed, var(--wgh-accent-2));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .34s var(--wgh-ease);
}
.wgh-root .wgh-related-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--wgh-shadow-hover);
	border-color: var(--wgh-line-2);
}
.wgh-root .wgh-related-card:hover::before { transform: scaleX(1); }
.wgh-root .wgh-related-card:focus-visible { outline: 3px solid var(--wgh-accent); outline-offset: 3px; }

.wgh-root .wgh-related-kicker {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wgh-accent-ink);
}
.wgh-root .wgh-related-title {
	font-family: var(--wgh-heading-font);
	font-weight: var(--wgh-heading-weight);
	font-size: 1.05rem;
	line-height: 1.35;
	color: var(--wgh-ink);
}
.wgh-root .wgh-related-go {
	margin-top: auto;
	padding-top: 6px;
	font-size: .88rem;
	font-weight: 700;
	color: var(--wgh-muted);
	transition: color .2s ease;
}
.wgh-root .wgh-related-go::after { content: " \2192"; }
.wgh-root .wgh-related-card:hover .wgh-related-go { color: var(--wgh-accent); }

/* ---- FAQ ---------------------------------------------------------------- */

/* Exactly two columns. Ten questions therefore fall five and five, which is the
   layout these pages are written for. */
.wgh-root .wgh-faq-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 26px;
	margin: 0;
	align-items: start;
}
.wgh-root .wgh-faq-item {
	border: 1px solid var(--wgh-line);
	border-radius: var(--wgh-radius-sm);
	background: var(--wgh-card-2);
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s var(--wgh-ease);
}
.wgh-root .wgh-faq-item:hover { border-color: var(--wgh-accent); box-shadow: var(--wgh-shadow); transform: translateY(-2px); }
.wgh-root .wgh-faq-item[open] { border-color: var(--wgh-accent); box-shadow: var(--wgh-shadow); }
.wgh-root .wgh-faq-item summary {
	cursor: pointer;
	padding: 17px 50px 17px 20px;
	font-weight: 700;
	list-style: none;
	position: relative;
	color: var(--wgh-ink);
}
.wgh-root .wgh-faq-item summary::-webkit-details-marker { display: none; }
.wgh-root .wgh-faq-item summary::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-top: -6px;
	border-right: 2.5px solid var(--wgh-accent);
	border-bottom: 2.5px solid var(--wgh-accent);
	transform: rotate(45deg);
	transition: transform .24s var(--wgh-ease);
}
.wgh-root .wgh-faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.wgh-root .wgh-faq-item .wgh-faq-body { padding: 0 20px 18px; color: var(--wgh-muted); font-size: .95rem; }

/* ---- Wheel of Names frame ---------------------------------------------- */

.wgh-root .wgh-mw-frame-wrap {
	width: 100%;
	position: relative;
	border-radius: var(--wgh-radius);
	overflow: hidden;
	box-shadow: var(--wgh-shadow-lg);
}
.wgh-root .wgh-mw-frame {
	/* The app lays itself out to exactly this box - it never reports a height
	   back, so the embed can never push the host page around. */
	width: 100%;
	height: 80vh;
	min-height: 560px;
	max-height: 1000px;
	border: 0;
	display: block;
	background: #070b18;
	color-scheme: dark;
}
.wgh-root .wgh-noscript {
	padding: 18px;
	border: 1px dashed var(--wgh-line-2);
	border-radius: var(--wgh-radius-sm);
	color: var(--wgh-muted);
	text-align: center;
}

/* ---- Responsive --------------------------------------------------------- */

/* Tablet: two steps per row, all of them equal width. */
@media (max-width: 980px) {
	.wgh-root .wgh-howto-grid { grid-template-columns: repeat(4, 1fr); }
	.wgh-root .wgh-howto-card,
	.wgh-root .wgh-howto-card:nth-child(4):nth-last-child(2),
	.wgh-root .wgh-howto-card:nth-child(5):nth-last-child(1) { grid-column: span 2; }
}

@media (max-width: 900px) {
	.wgh-root .wgh-section { padding: 54px 0; }
	.wgh-root .wgh-section-head { margin-bottom: 30px; }
	.wgh-root .wgh-mw-frame { height: 82vh; min-height: 600px; max-height: none; }
	.wgh-root .wgh-hero { padding-bottom: 52px; }
	.wgh-root .wgh-hero-head { padding: 58px 0 110px; }
	.wgh-root .wgh-hero-stage { margin-top: -74px; }
}

@media (max-width: 600px) {
	.wgh-root .wgh-hero { padding-bottom: 44px; }
	.wgh-root .wgh-hero-head { padding: 46px 0 94px; border-radius: 0 0 24px 24px; }
	.wgh-root .wgh-hero-stage { margin-top: -62px; }
}

/* Two FAQ columns need real width; below this they read better stacked. */
@media (max-width: 820px) {
	.wgh-root .wgh-faq-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
	.wgh-root .wgh-features-grid { grid-template-columns: 1fr; }
	.wgh-root .wgh-howto-grid { grid-template-columns: 1fr; }
	.wgh-root .wgh-howto-card,
	.wgh-root .wgh-howto-card:nth-child(4):nth-last-child(2),
	.wgh-root .wgh-howto-card:nth-child(5):nth-last-child(1) { grid-column: auto; }
	.wgh-root .wgh-section { padding: 46px 0; }
	.wgh-root .wgh-section-head { margin-bottom: 26px; }
	.wgh-root .wgh-hero { padding: 56px 0 78px; border-radius: 0 0 22px 22px; }
	.wgh-root .wgh-game-panel { padding: 18px; margin-top: -48px; }
	.wgh-root .wgh-game-panel-wide { padding: 0; }
	.wgh-root .wgh-duel { grid-template-columns: 1fr; }
	.wgh-root .wgh-vs { justify-self: center; width: 46px; height: 46px; }
	.wgh-root .wgh-choice { min-height: 148px; padding: 22px 18px; font-size: 1.02rem; }
	.wgh-root .wgh-card { min-height: 180px; padding: 26px 18px; }
	.wgh-root .wgh-controls .wgh-btn { flex: 1 1 calc(50% - 5px); padding: 12px 12px; font-size: .93rem; }
	.wgh-root .wgh-mw-frame { height: 84vh; min-height: 620px; }
}

@media (max-width: 420px) {
	.wgh-root .wgh-controls .wgh-btn { flex: 1 1 100%; }
	.wgh-root .wgh-container { padding: 0 15px; }
}

@media (hover: none) {
	/* Hover lifts are meaningless on touch and can leave cards stuck raised. */
	.wgh-root .wgh-howto-card:hover,
	.wgh-root .wgh-feature-card:hover,
	.wgh-root .wgh-faq-item:hover,
	.wgh-root .wgh-choice:hover,
	.wgh-root .wgh-card-tap:hover,
	.wgh-root .wgh-chip:hover,
	.wgh-root .wgh-player:hover,
	.wgh-root .wgh-btn:hover,
	.wgh-root .wgh-icon-btn:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.wgh-root *, .wgh-root *::before, .wgh-root *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}