/**
 * Legion Trivia Display — presentation styles.
 *
 * Nearly every value here is driven by a CSS custom property that the
 * JavaScript sets from the saved settings, so skins and the control panel can
 * change the look without touching this file.
 */

/* ------------------------------------------------------------------ Stage */

.ltd-stage {
	--ltd-bg-start: #12314f;
	--ltd-bg-end: #071726;
	--ltd-angle: 160deg;
	--ltd-accent: #c9a227;
	--ltd-q-text: #f6f1e3;
	--ltd-choice-bg: rgba(255, 255, 255, 0.07);
	--ltd-choice-bd: rgba(201, 162, 39, 0.33);
	--ltd-choice-tx: #f2ecdc;
	--ltd-ok-bg: #c9a227;
	--ltd-ok-tx: #10243a;
	--ltd-ok-glow: #f0d264;
	--ltd-header-tx: #d9c58c;
	--ltd-header-bg: rgba(0, 0, 0, 0.33);
	--ltd-footer-tx: #e8e2d0;
	--ltd-footer-bg: rgba(0, 0, 0, 0.42);
	--ltd-detail-tx: #f4efe2;
	--ltd-detail-bg: rgba(0, 0, 0, 0.28);

	--ltd-font-display: Georgia, 'Times New Roman', serif;
	--ltd-font-body: 'Segoe UI', Helvetica, Arial, sans-serif;

	--ltd-size-q: 4.2vw;
	--ltd-size-c: 2.6vw;
	--ltd-size-d: 2.4vw;
	--ltd-size-h: 1.5vw;
	--ltd-size-f: 1.5vw;

	--ltd-width: 86%;
	--ltd-gap: 1.4vh;
	--ltd-radius: 6px;
	--ltd-margin: 4vh;
	--ltd-tracking: 0px;
	--ltd-transform: none;
	--ltd-scale: 1;

	--ltd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ltd-fly: 60vw;

	--ltd-dur-q-in: 900ms;
	--ltd-dur-c-in: 650ms;
	--ltd-dur-wrong: 800ms;
	--ltd-dur-promote: 1000ms;
	--ltd-dur-detail: 800ms;
	--ltd-dur-clear: 800ms;

	--ltd-vignette: 0.55;
	--ltd-texture-op: 0.18;

	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 100%;
	overflow: hidden;
	font-family: var(--ltd-font-body);
	color: var(--ltd-q-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.ltd-standalone {
	height: 100%;
}

body.ltd-standalone .ltd-stage {
	position: fixed;
	inset: 0;
}

.ltd-embed-frame {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 8px;
}

.ltd-embedded {
	position: absolute;
	inset: 0;
}

.ltd-hide-cursor,
.ltd-hide-cursor * {
	cursor: none;
}

/* --------------------------------------------------------------- Backdrop */

.ltd-backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.ltd-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(var(--ltd-angle), var(--ltd-bg-start), var(--ltd-bg-end));
	transition: background 1200ms var(--ltd-ease);
}

.ltd-texture {
	position: absolute;
	inset: 0;
	opacity: var(--ltd-texture-op);
	mix-blend-mode: overlay;
	background-image: none;
	background-size: 320px 320px;
}

.ltd-stage[data-texture='parchment'] .ltd-texture {
	background-image:
		radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px),
		radial-gradient(circle at 72% 61%, rgba(0, 0, 0, 0.45) 0 1px, transparent 1px),
		radial-gradient(circle at 41% 83%, rgba(255, 255, 255, 0.35) 0 1px, transparent 1px),
		radial-gradient(circle at 88% 12%, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px);
	background-size: 90px 90px, 130px 130px, 170px 170px, 210px 210px;
}

.ltd-stage[data-texture='canvas'] .ltd-texture {
	background-image:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 4px);
	background-size: auto;
}

.ltd-stage[data-texture='noise'] .ltd-texture {
	background-image:
		repeating-conic-gradient(rgba(255, 255, 255, 0.22) 0% 25%, rgba(0, 0, 0, 0.22) 0% 50%);
	background-size: 3px 3px;
}

.ltd-stage[data-texture='rays'] .ltd-texture {
	background-image: repeating-conic-gradient(
		from 0deg at 50% 45%,
		rgba(255, 255, 255, 0.16) 0deg 4deg,
		transparent 4deg 14deg
	);
	background-size: auto;
	mix-blend-mode: soft-light;
}

.ltd-vignette {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at center,
		transparent 38%,
		rgba(0, 0, 0, var(--ltd-vignette)) 100%
	);
}

/* ----------------------------------------------------------------- Header */

.ltd-header,
.ltd-footer {
	position: relative;
	z-index: 3;
	flex: 0 0 auto;
}

.ltd-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2vw;
	padding: calc(var(--ltd-margin) * 0.55) var(--ltd-margin);
	background: var(--ltd-header-bg);
	border-bottom: 1px solid rgba(201, 162, 39, 0.35);
	border-bottom-color: color-mix(in srgb, var(--ltd-accent) 35%, transparent);
	color: var(--ltd-header-tx);
	font-size: var(--ltd-size-h);
}

.ltd-header-left {
	display: flex;
	align-items: center;
	gap: 1.2vw;
	min-width: 0;
}

.ltd-logo {
	height: var(--ltd-logo-h, 6vh);
	width: auto;
	display: block;
}

.ltd-header-titles {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	min-width: 0;
}

.ltd-header-title {
	font-family: var(--ltd-font-display);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ltd-header-sub {
	font-size: 0.75em;
	opacity: 0.72;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ltd-header-right {
	display: flex;
	align-items: center;
	gap: 0.8vw;
	flex: 0 0 auto;
}

.ltd-chip {
	display: inline-block;
	padding: 0.35em 0.9em;
	border: 1px solid rgba(201, 162, 39, 0.55);
	border-color: color-mix(in srgb, var(--ltd-accent) 55%, transparent);
	border-radius: 999px;
	font-size: 0.82em;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: opacity 400ms var(--ltd-ease);
}

.ltd-chip-difficulty {
	background: rgba(201, 162, 39, 0.22);
	background: color-mix(in srgb, var(--ltd-accent) 22%, transparent);
	color: var(--ltd-header-tx);
	font-weight: 700;
}

.ltd-chip[hidden] {
	display: none;
}

/* ------------------------------------------------------------------- Main */

.ltd-main {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: var(--ltd-margin);
}

.ltd-inner {
	width: var(--ltd-width);
	max-width: var(--ltd-width);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2.6vh;
	text-align: center;
	min-height: 0;
}

.ltd-question-wrap {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.6vh;
}

.ltd-question {
	margin: 0;
	font-family: var(--ltd-font-display);
	font-size: calc(var(--ltd-size-q) * var(--ltd-scale));
	font-weight: 700;
	line-height: 1.16;
	color: var(--ltd-q-text);
	letter-spacing: var(--ltd-tracking);
	text-transform: var(--ltd-transform);
	text-wrap: balance;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
	opacity: 0;
}

.ltd-rule {
	width: 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--ltd-accent) 20%,
		var(--ltd-accent) 80%,
		transparent
	);
	opacity: 0;
	transition: width 900ms var(--ltd-ease), opacity 500ms var(--ltd-ease);
}

.ltd-rule.is-on {
	width: 32%;
	opacity: 0.9;
}

/* ---------------------------------------------------------------- Choices */

.ltd-choices {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--ltd-gap);
}

.ltd-stage[data-layout='grid'] .ltd-choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	align-items: stretch;
	gap: var(--ltd-gap) calc(var(--ltd-gap) * 1.6);
}

/* Once the wrong answers clear away, the winner takes the full width. */
.ltd-stage[data-layout='grid'] .ltd-choices.is-collapsed {
	display: flex;
	flex-direction: column;
}

.ltd-choice {
	display: flex;
	align-items: center;
	gap: 1.1em;
	padding: 0.7em 1.1em;
	background: var(--ltd-choice-bg);
	border: 2px solid var(--ltd-choice-bd);
	border-radius: var(--ltd-radius);
	color: var(--ltd-choice-tx);
	font-size: calc(var(--ltd-size-c) * var(--ltd-scale));
	line-height: 1.28;
	text-align: left;
	opacity: 0;
	backdrop-filter: blur(2px);
	will-change: transform, opacity;
}

.ltd-choice-letter {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.85em;
	height: 1.85em;
	font-family: var(--ltd-font-display);
	font-weight: 700;
	font-size: 0.92em;
	background: var(--ltd-accent);
	background: color-mix(in srgb, var(--ltd-accent) 88%, transparent);
	color: var(--ltd-ok-tx);
	border-radius: 999px;
	transition: background 400ms var(--ltd-ease), color 400ms var(--ltd-ease);
}

.ltd-stage[data-letter='square'] .ltd-choice-letter {
	border-radius: 4px;
}

.ltd-stage[data-letter='ring'] .ltd-choice-letter {
	background: transparent;
	border: 2px solid var(--ltd-accent);
	color: var(--ltd-accent);
}

.ltd-stage[data-letter='plain'] .ltd-choice-letter {
	background: transparent;
	color: var(--ltd-accent);
	width: auto;
	height: auto;
	border-radius: 0;
}

.ltd-stage[data-letter='none'] .ltd-choice-letter {
	display: none;
}

.ltd-choice-text {
	flex: 1 1 auto;
	min-width: 0;
}

/* Correct answer state. */

.ltd-choice.is-correct {
	background: var(--ltd-ok-bg);
	border-color: var(--ltd-ok-bg);
	color: var(--ltd-ok-tx);
	font-weight: 700;
	box-shadow:
		0 0 0 4px rgba(240, 210, 100, 0.38),
		0 0 44px rgba(240, 210, 100, 0.55);
	box-shadow:
		0 0 0 4px color-mix(in srgb, var(--ltd-ok-glow) 38%, transparent),
		0 0 44px color-mix(in srgb, var(--ltd-ok-glow) 55%, transparent);
	transition:
		background var(--ltd-dur-promote) var(--ltd-ease),
		border-color var(--ltd-dur-promote) var(--ltd-ease),
		color var(--ltd-dur-promote) var(--ltd-ease),
		box-shadow var(--ltd-dur-promote) var(--ltd-ease);
}

.ltd-choice.is-correct .ltd-choice-letter {
	background: var(--ltd-ok-tx);
	color: var(--ltd-ok-bg);
}

.ltd-stage[data-letter='ring'] .ltd-choice.is-correct .ltd-choice-letter {
	background: transparent;
	border-color: var(--ltd-ok-tx);
	color: var(--ltd-ok-tx);
}

.ltd-choice.is-promoted {
	justify-content: center;
	text-align: center;
}

.ltd-choice.is-promoted .ltd-choice-text {
	flex: 0 1 auto;
}

/* The FLIP transition used when the correct answer travels to the top. */
.ltd-choice.is-flipping {
	transition: transform var(--ltd-dur-promote) var(--ltd-ease);
}

.ltd-choices.is-collapsed {
	display: flex;
	flex-direction: column;
}

/* ----------------------------------------------------------------- Detail */

.ltd-detail {
	width: 100%;
	padding: 1.4em 1.8em;
	background: var(--ltd-detail-bg);
	border-left: 4px solid var(--ltd-accent);
	border-radius: var(--ltd-radius);
	color: var(--ltd-detail-tx);
	opacity: 0;
}

.ltd-detail[hidden] {
	display: none;
}

.ltd-detail-caption {
	display: block;
	margin-bottom: 0.5em;
	color: var(--ltd-accent);
	font-family: var(--ltd-font-display);
	font-size: calc(var(--ltd-size-d) * var(--ltd-scale) * 0.62);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.ltd-detail-text {
	margin: 0;
	font-size: calc(var(--ltd-size-d) * var(--ltd-scale));
	line-height: 1.4;
	text-wrap: pretty;
}

/* --------------------------------------------------------- Footer & meta */

.ltd-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--ltd-margin) * 0.45) var(--ltd-margin);
	background: var(--ltd-footer-bg);
	border-top: 1px solid rgba(201, 162, 39, 0.3);
	border-top-color: color-mix(in srgb, var(--ltd-accent) 30%, transparent);
	color: var(--ltd-footer-tx);
	font-size: var(--ltd-size-f);
	letter-spacing: 0.05em;
	text-align: center;
}

.ltd-footer-text {
	opacity: 0;
	transition: opacity 600ms var(--ltd-ease);
}

.ltd-footer-text.is-on {
	opacity: 0.92;
}

.ltd-progress {
	position: relative;
	z-index: 3;
	flex: 0 0 auto;
	height: 4px;
	background: rgba(0, 0, 0, 0.35);
	overflow: hidden;
}

.ltd-progress span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--ltd-accent);
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--ltd-accent) 60%, transparent),
		var(--ltd-accent)
	);
}

.ltd-status {
	position: absolute;
	left: 50%;
	bottom: 8vh;
	z-index: 5;
	transform: translateX(-50%);
	padding: 0.7em 1.4em;
	background: rgba(0, 0, 0, 0.72);
	border: 1px solid var(--ltd-accent);
	border-radius: 999px;
	color: var(--ltd-q-text);
	font-size: 1.4vw;
}

.ltd-status[hidden] {
	display: none;
}

.ltd-awake {
	position: absolute;
	right: 0.8vw;
	bottom: 0.6vh;
	z-index: 5;
	padding: 0.3em 0.7em;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 4px;
	color: var(--ltd-header-tx);
	font-family: var(--ltd-font-body);
	font-size: 0.85vw;
	letter-spacing: 0.04em;
	opacity: 0.65;
	white-space: nowrap;
}

.ltd-awake[hidden] {
	display: none;
}

/* ------------------------------------------------------------- Animations */

@keyframes ltd-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes ltd-rise-in {
	from { opacity: 0; transform: translateY(6vh); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes ltd-drop-in {
	from { opacity: 0; transform: translateY(-6vh); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes ltd-scale-in {
	from { opacity: 0; transform: scale(0.86); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes ltd-blur-in {
	from { opacity: 0; filter: blur(18px); }
	to   { opacity: 1; filter: blur(0); }
}

@keyframes ltd-unfurl-in {
	from { opacity: 0; clip-path: inset(0 100% 0 0); }
	to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes ltd-fly-in-left {
	from { opacity: 0; transform: translateX(calc(var(--ltd-fly) * -1)); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes ltd-fly-in-right {
	from { opacity: 0; transform: translateX(var(--ltd-fly)); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes ltd-fly-in-up {
	from { opacity: 0; transform: translateY(var(--ltd-fly)); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes ltd-flip-in {
	from { opacity: 0; transform: perspective(900px) rotateX(-88deg); }
	to   { opacity: 1; transform: perspective(900px) rotateX(0); }
}

/* Entrance helpers. Duration and delay come from inline styles set in JS. */

.ltd-anim {
	animation-duration: var(--ltd-anim-dur, 700ms);
	animation-delay: var(--ltd-anim-delay, 0ms);
	animation-timing-function: var(--ltd-ease);
	animation-fill-mode: both;
}

.ltd-in-fade      { animation-name: ltd-fade-in; }
.ltd-in-rise      { animation-name: ltd-rise-in; }
.ltd-in-drop      { animation-name: ltd-drop-in; }
.ltd-in-scale     { animation-name: ltd-scale-in; }
.ltd-in-blur      { animation-name: ltd-blur-in; }
.ltd-in-unfurl    { animation-name: ltd-unfurl-in; }
.ltd-in-fly-left  { animation-name: ltd-fly-in-left; }
.ltd-in-fly-right { animation-name: ltd-fly-in-right; }
.ltd-in-fly-up    { animation-name: ltd-fly-in-up; }
.ltd-in-flip      { animation-name: ltd-flip-in; }

/* Typewriter is handled by JS, this only hides the caret when finished. */
.ltd-caret::after {
	content: '';
	display: inline-block;
	width: 0.06em;
	height: 0.95em;
	margin-left: 0.06em;
	background: var(--ltd-accent);
	vertical-align: -0.1em;
	animation: ltd-blink 900ms steps(1) infinite;
}

@keyframes ltd-blink {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0; }
}

/* Exits. */

@keyframes ltd-out-fade {
	to { opacity: 0; }
}

@keyframes ltd-out-fade-scale {
	to { opacity: 0; transform: scale(0.82); }
}

@keyframes ltd-out-collapse {
	40%  { opacity: 0; transform: scaleY(1); }
	100% { opacity: 0; transform: scaleY(0); max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
}

@keyframes ltd-out-blur {
	to { opacity: 0; filter: blur(22px); }
}

@keyframes ltd-out-left {
	to { opacity: 0; transform: translateX(calc(var(--ltd-fly) * -1)); }
}

@keyframes ltd-out-right {
	to { opacity: 0; transform: translateX(var(--ltd-fly)); }
}

@keyframes ltd-out-drop {
	to { opacity: 0; transform: translateY(28vh) rotate(2deg); }
}

@keyframes ltd-out-lift {
	to { opacity: 0; transform: translateY(-6vh); }
}

@keyframes ltd-out-sink {
	to { opacity: 0; transform: translateY(6vh); }
}

.ltd-out {
	animation-duration: var(--ltd-anim-dur, 700ms);
	animation-delay: var(--ltd-anim-delay, 0ms);
	animation-timing-function: var(--ltd-ease);
	animation-fill-mode: both;
	overflow: hidden;
}

.ltd-out-fade        { animation-name: ltd-out-fade; }
.ltd-out-fade-scale  { animation-name: ltd-out-fade-scale; }
.ltd-out-collapse    { animation-name: ltd-out-collapse; }
.ltd-out-blur        { animation-name: ltd-out-blur; }
.ltd-out-left        { animation-name: ltd-out-left; }
.ltd-out-right       { animation-name: ltd-out-right; }
.ltd-out-drop        { animation-name: ltd-out-drop; }
.ltd-out-lift        { animation-name: ltd-out-lift; }
.ltd-out-sink        { animation-name: ltd-out-sink; }
.ltd-out-scale       { animation-name: ltd-out-fade-scale; }

/* ------------------------------------------------------------ Small sizes */

@media (max-aspect-ratio: 1/1) {
	.ltd-stage {
		--ltd-size-q: 6.4vw;
		--ltd-size-c: 4.4vw;
		--ltd-size-d: 4vw;
		--ltd-size-h: 3vw;
		--ltd-size-f: 3vw;
		--ltd-width: 92%;
	}

	.ltd-stage[data-layout='grid'] .ltd-choices {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ltd-stage[data-reduce-motion='1'] .ltd-anim,
	.ltd-stage[data-reduce-motion='1'] .ltd-out {
		animation-duration: 1ms !important;
		animation-delay: 0ms !important;
	}

	.ltd-stage[data-reduce-motion='1'] .ltd-choice.is-flipping,
	.ltd-stage[data-reduce-motion='1'] .ltd-rule {
		transition-duration: 1ms !important;
	}
}