/* Under the Covers — viewer. Reset to nothing, then build only what's here. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { overscroll-behavior: none; } /* no pull-to-refresh fighting a downward swipe */
body.utc-viewer {
	background: #000; color: #fff;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden; overflow-x: clip; /* the shake never causes a sideways scrollbar */
	touch-action: pan-y pinch-zoom;
}
.utc-stage { position: relative; z-index: 1; }
.utc-stage {
	min-height: 100vh; min-height: 100dvh;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 24px; padding: 32px 20px 48px;
}

/* The card. Natural size: small pictures stay small, long ones run long. */
.utc-card {
	width: min(92vw, 520px);
	display: flex; flex-direction: column; align-items: center;
	user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
	transition: transform .28s ease-in, opacity .28s ease-in;
}
.utc-frame { position: relative; max-width: 100%; }
.utc-card-img { display: block; max-width: 100%; height: auto; border-radius: 12px; -webkit-user-drag: none; }
.utc-card-video { display: block; max-width: 100%; height: auto; border-radius: 12px; cursor: pointer; background: #000; }
.utc-caption { width: 100%; margin-top: 16px; font-size: 17px; line-height: 1.6; }
.utc-caption p + p { margin-top: .9em; }
.utc-caption img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 12px; }
.utc-status { min-height: 1.4em; font-size: 14px; opacity: .7; text-align: center; }

/* Throwing: up and away; the next card rises from below. */
.utc-card.is-arriving { transition: none; }
.utc-card.is-leaving, .utc-card.is-arriving { opacity: 0; }
.utc-card.is-leaving { transform: translateY(-100vh); }
.utc-card.is-arriving { transform: translateY(100vh); }

/* A question card doesn't throw: it shakes. */
.utc-card.is-wrong { animation: utc-shake .4s ease-in-out; }
@keyframes utc-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-10px); }
	40% { transform: translateX(9px); }
	60% { transform: translateX(-6px); }
	80% { transform: translateX(4px); }
}

/* Question cards: black card, white words, answers as buttons. */
.utc-question {
	width: 100%; min-height: 60vh; min-height: 60dvh;
	display: flex; flex-direction: column; justify-content: center; gap: 32px;
	padding: 36px 24px;
	background: #000; border: 1px solid rgba(255,255,255,.28); border-radius: 12px;
}
.utc-question-text { font-size: 24px; line-height: 1.35; font-weight: 600; text-align: center; }
.utc-answers { display: flex; flex-direction: column; gap: 12px; }
.utc-answer {
	font: inherit; font-size: 17px; line-height: 1.3;
	padding: 14px 18px; color: #fff; background: transparent;
	border: 1px solid rgba(255,255,255,.6); border-radius: 999px; cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
}
.utc-answer:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.utc-answer:disabled { cursor: default; }
.utc-answer.is-right { color: #000; background: #3ddc84; border-color: #3ddc84; }
.utc-answer.is-wrong-answer { color: #fff; background: #e5484d; border-color: #e5484d; }

/* Kicked out. */
.utc-kicked { width: 100%; padding: 24px 4px; text-align: center; }
.utc-kicked p { font-size: 18px; line-height: 1.55; opacity: .85; }
.utc-kicked p + p { margin-top: 14px; }
.utc-kicked-head { font-size: 44px !important; font-weight: 800; opacity: 1 !important; margin-bottom: 18px; }
.utc-again { display: inline-block; margin-top: 36px; font-size: 14px; color: #fff; opacity: .6; }
.utc-kicked-last { font-weight: 700; opacity: 1 !important; margin-top: 26px !important; }

/* Label badge (generic for now). */
.utc-badge {
	position: absolute; top: 12px; left: 12px;
	padding: 6px 12px; border-radius: 999px;
	font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: #000; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.45);
	pointer-events: none;
}

/* Video sound button. */
.utc-sound {
	position: absolute; right: 12px; bottom: 12px;
	width: 44px; height: 44px; padding: 10px;
	display: flex; align-items: center; justify-content: center;
	color: #000; background: #fff; border: 0; border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0,0,0,.45); cursor: pointer;
}
.utc-sound svg { display: block; width: 100%; height: 100%; }
.utc-sound.is-muted { animation: utc-nudge 1.6s ease-in-out 2; }
@keyframes utc-nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* TikTok's desktop down button: computers with a mouse only, never on phones. */
.utc-down {
	display: none; position: fixed; z-index: 10; right: 24px; top: 50%; margin-top: -28px;
	width: 56px; height: 56px; padding: 14px;
	align-items: center; justify-content: center;
	color: #fff; background: rgba(255,255,255,.12); border: 0; border-radius: 50%;
	cursor: pointer; transition: background .2s;
}
.utc-down svg { display: block; width: 100%; height: 100%; }
.utc-down:hover { background: rgba(255,255,255,.22); }
@media (hover: hover) and (pointer: fine) { .utc-down { display: flex; } }
.utc-down[hidden] { display: none !important; }

/* Quiz answer emoji: balloons float up for right, screams and thumbs fall for wrong. */
.utc-fx { position: fixed; inset: 0; z-index: 20; overflow: hidden; pointer-events: none; }
.utc-fx-emoji { position: absolute; line-height: 1; animation-duration: 2.4s; animation-timing-function: ease-in; animation-fill-mode: both; }
.utc-fx-emoji.is-rising { bottom: -80px; animation-name: utc-rise; }
.utc-fx-emoji.is-falling { top: -80px; animation-name: utc-fall; }
@keyframes utc-rise {
	0% { transform: translateY(0) rotate(-6deg); opacity: 0; }
	10% { opacity: 1; }
	50% { transform: translateY(-60vh) rotate(6deg); }
	100% { transform: translateY(-120vh) rotate(-4deg); opacity: 1; }
}
@keyframes utc-fall {
	0% { transform: translateY(0) rotate(0); opacity: 0; }
	10% { opacity: 1; }
	100% { transform: translateY(120vh) rotate(25deg); opacity: 1; }
}

/* Deck background: fixed behind everything, fades in once loaded, with a dark veil so the
   white words and the pictures always stand out against it. */
.utc-bg {
	position: fixed; inset: 0; z-index: 0;
	background-position: center; background-size: cover; background-repeat: no-repeat;
	opacity: 0; transition: opacity .8s ease;
}
.utc-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.utc-bg.is-shown { opacity: 1; }

/* A question card's own picture, above the question. */
.utc-question-pic { display: flex; justify-content: center; }
.utc-question-pic .utc-card-img { width: auto; max-width: 100%; height: auto; max-height: 38vh; max-height: 38dvh; }