/* JOIGang Live — stage layout. Deliberately dark (video stage) in the site's
   purple palette, so it sits right in both the light and dark site themes. */

.jgl {
	--jgl-bg: #1c0e29;
	--jgl-panel: #27103a;
	--jgl-panel2: #241332;
	--jgl-line: #3d2352;
	--jgl-text: #ece2f6;
	--jgl-muted: #b8a5cb;
	--jgl-accent: #f674ff;
	--jgl-accent2: #a946b4;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	align-items: stretch;
	gap: 16px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 16px;
	color: var(--jgl-text);
}
/* desktop: break out of the theme's content column — ~5% margins each
   side keep the video short enough that the menu bar stays above the fold */
@media (min-width: 981px) {
	.jgl {
		max-width: none;
		width: 90vw;
		margin-left: calc(50% - 45vw);
		margin-right: calc(50% - 45vw);
		padding: 18px 0;
		grid-template-columns: minmax(0, 1fr) clamp(340px, 22vw, 480px);
	}
}
.jgl *, .jgl *::before, .jgl *::after { box-sizing: border-box; }

/* left column: video on top, menu bar + drawers below it */
.jgl-main {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

/* the fullscreen tool rail lives in the grid but only shows on landscape
   phones in fullscreen (see the landscape media block) */
.jgl-sidemenu { display: none; }
.jgl-sidemenu[hidden] { display: none !important; }

/* fullscreen: the WHOLE room goes fullscreen — video + menu bar + chat.
   The stage keeps its 16:9 shape at the largest size that fits beside the
   chat column and above the menu bar; the group is TOP-aligned, leaving
   the leftover space at the bottom for the future replay overlay. */
.jgl:fullscreen, .jgl.is-fakefs {
	max-width: none;
	width: 100%;
	height: 100%;
	margin: 0;
	background: var(--jgl-bg);
	padding: 12px;
	overflow: hidden;
}
.jgl:fullscreen .jgl-main, .jgl.is-fakefs .jgl-main {
	min-height: 0;
	/* HARD viewport bound: the column can never be taller than the screen,
	   and the stage (flex-shrinkable, below) gives way — the menu bar and
	   drawers stay on screen no matter what the stage or its content does */
	height: calc(100vh - 24px);
	justify-content: flex-start;
	overflow: hidden;
	/* widest 16:9 box that still leaves room for the menu bar below */
	--jgl-fs-w: min(100%, calc((100vh - 34px - 66px) * 16 / 9));
}
/* the chat column must never be taller than the screen — ultrawide layouts
   stretched it to the video column's overshoot, hiding the composer */
.jgl:fullscreen .jgl-sidewrap, .jgl.is-fakefs .jgl-sidewrap {
	min-height: 0;
	height: calc(100vh - 24px);
}
.jgl:fullscreen .jgl-stage, .jgl.is-fakefs .jgl-stage {
	/* shrinkable: if the width formula ever loses to reality (odd ratios,
	   wrapped menu bar, content forcing height) the VIDEO yields, never the
	   controls — the player letterboxes inside */
	flex: 0 1 auto;
	width: var(--jgl-fs-w);
	align-self: center;
	aspect-ratio: 16 / 9;
	min-height: 0;
}
.jgl:fullscreen .jgl-menubar, .jgl.is-fakefs .jgl-menubar {
	flex: 0 0 auto;
}
.jgl:fullscreen .jgl-menubar, .jgl:fullscreen .jgl-drawer, .jgl.is-fakefs .jgl-menubar, .jgl.is-fakefs .jgl-drawer {
	width: var(--jgl-fs-w);
	align-self: center;
}
/* fullscreen drawers must NEVER shrink the video: they float in the
   leftover space at the bottom of the video column (compact styling
   below keeps even a 20-option vote small) */
.jgl:fullscreen .jgl-main, .jgl.is-fakefs .jgl-main { position: relative; }
.jgl:fullscreen .jgl-drawer, .jgl.is-fakefs .jgl-drawer {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	max-height: calc(100vh - 160px);
	overflow-y: auto;
	z-index: 25;
	padding: 8px 12px;
	box-shadow: 0 -10px 36px rgba(0, 0, 0, .55);
	scrollbar-width: thin;
	scrollbar-color: var(--jgl-line) transparent;
}
.jgl:fullscreen .jgl-drawer-head, .jgl.is-fakefs .jgl-drawer-head { margin-bottom: 5px; font-size: 12.5px; }
.jgl:fullscreen .jgl-vote-opt.is-labeled, .jgl.is-fakefs .jgl-vote-opt.is-labeled {
	min-height: 30px;
	padding: 4px 8px;
	font-size: 12px;
}
.jgl:fullscreen .jgl-vote-opt.is-labeled span, .jgl.is-fakefs .jgl-vote-opt.is-labeled span {
	-webkit-line-clamp: 1;
}
.jgl:fullscreen .jgl-vote-meta, .jgl.is-fakefs .jgl-vote-meta { margin-top: 5px; font-size: 11.5px; }

/* ---------------- stage / player ---------------- */
.jgl-stage {
	position: relative;
	background: #000;
	border: 1px solid var(--jgl-line);
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.jgl-player, .jgl-player > div, .jgl-player video {
	width: 100% !important;
	height: 100% !important;
}
/* no player chatter over the show ("low latency streaming" toasts etc.) —
   connection problems get our own Be-right-back cover instead.
   Scoped to the STAGE: OvenPlayer replaces the .jgl-player div on build. */
.jgl-stage [class*="op-message"] { display: none !important; }
/* the LL-HLS fallback grows VOD-style chrome: a buffering-jittery progress
   bar, a settings menu (speed / jargon quality / sources / audio tracks) and
   a timestamp — none of it belongs on a live show. Scoped to the stage. */
.jgl-stage .op-progressbar-container,
.jgl-stage .op-progressbar,
.jgl-stage .op-time-display { display: none !important; }
/* the voice-actress player is audio-only: parked invisibly inside the stage */
.jgl-voiceplayer {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.jgl-offline {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: radial-gradient(ellipse at center, #2a1638 0%, #1c0e29 75%);
	z-index: 5;
}
/* our display:flex would silently beat the browser's built-in [hidden] rule,
   leaving the cover painted over a playing stream — force hidden to win */
.jgl-offline[hidden] { display: none !important; }

/* live but no media: friendly cover instead of the player's error text */
.jgl-brbcover {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: radial-gradient(ellipse at center, #2a1638 0%, #1c0e29 75%);
	z-index: 6;
}
.jgl-brbcover[hidden] { display: none !important; }
.jgl-brbcover h3 { color: var(--jgl-text); margin: 0 0 8px; font-size: 26px; }
.jgl-brbcover p { color: var(--jgl-muted); margin: 0; font-size: 14px; }
.jgl-brbcover-heart { font-size: 40px; margin-bottom: 8px; animation: jglPulse 1.6s ease-in-out infinite; }
.jgl-offline-inner { max-width: 420px; padding: 24px; }
.jgl-offline-dot { font-size: 34px; filter: grayscale(1) brightness(1.6); margin-bottom: 8px; }
.jgl-offline h3 { color: var(--jgl-text); margin: 0 0 8px; font-size: 22px; }
.jgl-offline p { color: var(--jgl-muted); margin: 0; font-size: 14px; }
.jgl-offline a { color: var(--jgl-accent); }

/* "click for sound" chip — playback starts muted (autoplay-safe) */
.jgl-unmute {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 8;
	border: 1px solid var(--jgl-accent);
	background: rgba(28, 14, 41, 0.92);
	color: var(--jgl-text);
	font-weight: 700;
	font-size: 14px;
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 4px 18px rgba(246, 116, 255, 0.35);
	animation: jglPulse 1.6s ease-in-out infinite;
}
.jgl-unmute:hover { background: var(--jgl-accent); color: #1c0e29; }
/* theme button rules override the UA [hidden] display — force it */
.jgl-unmute[hidden] { display: none !important; }
@keyframes jglPulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.05); }
}

/* host dock */
.jgl-hostdock {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 7;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	background: rgba(28, 14, 41, 0.85);
	border: 1px solid var(--jgl-line);
	border-radius: 10px;
}
.jgl-hostdock-label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	color: var(--jgl-accent);
}
.jgl-hostbtn {
	background: var(--jgl-accent2);
	color: #fff !important;
	border: 0;
	font-size: 12.5px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none !important;
}
.jgl-hostbtn:hover { filter: brightness(1.15); }

/* ---------------- menu bar (below the video) ---------------- */
.jgl-menubar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 8px 10px;
	background: var(--jgl-panel);
	border: 1px solid var(--jgl-line);
	border-radius: 12px;
}
.jgl-menubar-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* ---------------- side panel (chat column) ----------------
   The wrapper is the grid cell; the panel fills it absolutely, so the chat
   column is exactly as tall as the video + menu bar and never stretches
   past them — the chat log scrolls inside. */
.jgl-sidewrap {
	position: relative;
	min-height: 420px;
}
.jgl-side {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	background: var(--jgl-panel);
	border: 1px solid var(--jgl-line);
	border-radius: 12px;
	overflow: hidden;
}
.jgl-side-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: var(--jgl-panel2);
	border-bottom: 1px solid var(--jgl-line);
}
.jgl-live-badge {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	color: #8d7ba1;
}
.jgl-live-badge.is-live { color: #ff5977; animation: jglBlink 1.6s ease-in-out infinite; }
@keyframes jglBlink { 50% { opacity: .6; } }
.jgl-viewers { font-size: 12.5px; color: var(--jgl-muted); }
.jgl-viewers b { color: var(--jgl-text); }
.jgl-head-tools { margin-left: auto; display: flex; gap: 6px; }
.jgl-tool {
	background: var(--jgl-panel2);
	border: 1px solid var(--jgl-line);
	color: var(--jgl-text);
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	padding: 9px 12px;
	cursor: pointer;
	white-space: nowrap;
}
.jgl-tool:hover { border-color: var(--jgl-accent); }

/* ---------------- drawers (vote / dice, under the menu bar) ---------------- */
.jgl-drawer {
	background: var(--jgl-panel2);
	border: 1px solid var(--jgl-line);
	border-radius: 12px;
	padding: 10px 12px;
}
.jgl-drawer[hidden] { display: none !important; }
.jgl-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 800;
	font-size: 13.5px;
	margin-bottom: 8px;
}
.jgl-drawer-x {
	background: none;
	border: 0;
	color: var(--jgl-muted);
	font-size: 18px;
	cursor: pointer;
	line-height: 1;
}
.jgl-drawer-x:hover { color: var(--jgl-accent); }
.jgl-drawer-empty { color: var(--jgl-muted); font-size: 13px; margin: 4px 0; }

.jgl-vote-title { margin: 0 0 8px; font-size: 13.5px; color: var(--jgl-text); }
.jgl-vote-note { margin: -4px 0 8px; font-size: 11.5px; color: var(--jgl-muted); }
.jgl-vote-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.jgl-vote-opt {
	min-width: 44px;
	height: 44px;
	border-radius: 10px;
	border: 1px solid var(--jgl-line);
	background: var(--jgl-panel);
	color: var(--jgl-text);
	font-size: 17px;
	font-weight: 800;
	cursor: pointer;
}
.jgl-vote-opt:hover { border-color: var(--jgl-accent); }
.jgl-vote-opt.is-mine { background: var(--jgl-accent); color: #1c0e29; border-color: var(--jgl-accent); }
/* labeled options: compact "N — description" cards in a wrapping grid, so
   even 20 options fit in a few rows (no scrolling in fullscreen) */
.jgl-vote-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 6px;
}
.jgl-vote-opt.is-labeled {
	display: flex;
	align-items: center;
	gap: 7px;
	width: 100%;
	height: auto;
	min-height: 38px;
	text-align: left;
	padding: 6px 9px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.25;
}
.jgl-vote-opt.is-labeled b { color: var(--jgl-accent); font-size: 14px; flex: 0 0 auto; }
.jgl-vote-opt.is-labeled span {
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.jgl-vote-opt.is-mine b { color: inherit; }
.jgl-vote-lab { opacity: .85; margin: 0 4px; }
.jgl-vote-meta { margin-top: 8px; font-size: 12.5px; color: var(--jgl-muted); }
.jgl-vote-tally { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.jgl-vote-cnt {
	background: var(--jgl-panel);
	border: 1px solid var(--jgl-line);
	border-radius: 8px;
	padding: 4px 10px;
	font-size: 13px;
}
.jgl-vote-cnt b { color: var(--jgl-accent); margin-right: 4px; }
.jgl-vote-cnt.is-top { border-color: var(--jgl-accent); box-shadow: 0 0 10px rgba(246,116,255,.35); }

.jgl-dice-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.jgl-dice-btns[hidden] { display: none !important; }

/* volume drawer: stream + voice actress */
.jgl-vol-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 700;
	margin: 8px 0;
	white-space: nowrap;
}
.jgl-vol-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--jgl-accent); cursor: pointer; }
.jgl-vol-row input[type="range"]:disabled { opacity: .4; cursor: not-allowed; }
.jgl-vol-row b { min-width: 30px; text-align: right; color: var(--jgl-accent); font-variant-numeric: tabular-nums; }
.jgl-vol-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 600;
	margin: 8px 0 2px;
	cursor: pointer;
	white-space: normal;
}
.jgl-vol-check input { accent-color: var(--jgl-accent); cursor: pointer; }
.jgl-vol-hint { font-size: 12px; color: var(--jgl-muted); margin: 6px 0 2px; white-space: normal; }
.jgl-vol-hint[hidden] { display: none !important; }

/* viewer options drawer */
/* the drawer body is a spaced column — every option row breathes */
.jgl-opts-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 2px; }
.jgl-opts-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 0; }
.jgl-opts-row label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--jgl-muted);
	flex: 0 1 auto;
	width: 260px;
	max-width: 100%;
}
.jgl-opts-row input[type="text"] {
	background: var(--jgl-panel);
	border: 1px solid var(--jgl-line);
	border-radius: 10px;
	color: var(--jgl-text);
	padding: 8px 11px;
	font-size: 13.5px;
}
.jgl-opts-row input[type="text"]:focus { outline: none; border-color: var(--jgl-accent); }
.jgl-opts-status { font-size: 12px; color: var(--jgl-muted); }
.jgl-opts-check {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	padding: 2px 0;
	cursor: pointer;
}
.jgl-opts-check input { accent-color: var(--jgl-accent); width: 16px; height: 16px; flex-shrink: 0; }
.jgl-opts-stats { align-items: flex-end; gap: 14px; }
.jgl-opts-stats label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--jgl-muted); width: auto; }
.jgl-opts-stats input[type="number"] {
	width: 120px;
	padding: 7px 10px;
	background: rgba(0, 0, 0, .25);
	border: 1px solid var(--jgl-line);
	border-radius: 8px;
	color: var(--jgl-text);
	font-size: 13px;
}
.jgl-opts-stats input[type="number"]:focus { outline: none; border-color: var(--jgl-accent); }
.jgl-die {
	min-width: 52px;
	padding: 9px 10px;
	border-radius: 10px;
	border: 1px solid var(--jgl-line);
	background: var(--jgl-panel);
	color: var(--jgl-text);
	font-weight: 800;
	cursor: pointer;
}
.jgl-die:hover { border-color: var(--jgl-accent); }

/* ---------------- chat ---------------- */
.jgl-chat {
	flex: 1;
	overflow-y: auto;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	scrollbar-width: thin;
	scrollbar-color: var(--jgl-line) transparent;
}
.jgl-line { font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.jgl-line b { font-weight: 800; }
/* system messages stand out from regular chatter: accent bar + tinted chip */
.jgl-line-sys {
	color: #e9dcfa;
	font-size: 13px;
	font-weight: 600;
	background: rgba(246, 116, 255, 0.09);
	border-left: 3px solid var(--jgl-accent2);
	padding: 4px 8px;
	border-radius: 0 8px 8px 0;
}
/* …except join/leave & connection noise, which stays quiet */
.jgl-line-quiet {
	color: #9b87b3;
	font-size: 12.5px;
	font-weight: 400;
	background: none;
	border-left: 0;
	padding: 0;
	border-radius: 0;
}
.jgl-line-host b { color: var(--jgl-accent); }
.jgl-line-attn { color: #ffd76a; font-size: 12.5px; }
.jgl-line-dice { color: #8fd0ff; font-size: 13px; }
/* vote-result card: one option per line, winners highlighted */
.jgl-line-voteres {
	background: var(--jgl-panel2);
	border: 1px solid var(--jgl-line);
	border-radius: 10px;
	padding: 8px 10px;
	margin: 6px 0;
}
.jgl-voteres-head { font-weight: 800; font-size: 13px; margin-bottom: 6px; color: var(--jgl-text); }
.jgl-voteres-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 2px 6px;
	border-radius: 6px;
	font-size: 12.5px;
	color: var(--jgl-muted);
}
.jgl-voteres-row b { min-width: 18px; text-align: right; color: var(--jgl-text); }
.jgl-voteres-lab { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.jgl-voteres-cnt { font-weight: 800; color: var(--jgl-text); white-space: nowrap; }
.jgl-voteres-row.is-win {
	background: rgba(246, 116, 255, .14);
	color: var(--jgl-text);
}
.jgl-voteres-row.is-win .jgl-voteres-cnt { color: var(--jgl-accent); }
.jgl-line-cum { color: var(--jgl-accent); font-weight: 700; }
.jgl-line-ruin { color: #ff8f8f; font-weight: 700; }
.jgl-line-action { color: #d7b7ff; font-weight: 600; }
.jgl-line-call { color: #ffd76a; font-weight: 700; }
.jgl-line-points { color: #ffd76a; font-weight: 700; }
/* ---- Discord-style messages: avatar | header(name·level·time) / body ---- */
.jgl-msg {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	column-gap: 10px;
	row-gap: 1px;
	padding-top: 7px;
	cursor: pointer;
}
.jgl-msg.is-grouped { padding-top: 1px; }
.jgl-ava {
	grid-row: 1 / span 3;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	overflow: hidden;
	display: grid;
	place-items: center;
	align-self: start;
	margin-top: 2px;
}
.jgl-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jgl-ava.is-fallback { color: #fff; font-weight: 800; font-size: 16px; }
.jgl-msg.is-grouped .jgl-msg-body, .jgl-msg.is-grouped .jgl-reacts { grid-column: 2; }
.jgl-msg-head {
	grid-column: 2;
	display: flex;
	align-items: baseline;
	gap: 7px;
	font-size: 13.5px;
	line-height: 1.3;
	min-width: 0;
}
.jgl-msg-head b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
/* the cage lock sits beside the name, never inside the ellipsis */
.jgl-caged { flex: 0 0 auto; margin-left: -3px; }
/* custom-emote reactions: image in the chip and in the picker grid */
.jgl-react-chip img { width: 16px; height: 16px; vertical-align: -3px; }
.jgl-reactpick-grid button img { width: 24px; height: 24px; display: block; margin: 0 auto; }
.jgl-msg.is-hostmsg .jgl-msg-head b { color: var(--jgl-accent); }
.jgl-msg-time { color: #7b6693; font-size: 11px; flex: 0 0 auto; }
.jgl-msg-body {
	grid-column: 2;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--jgl-text);
	overflow-wrap: anywhere;
}
.jgl-reacts {
	grid-column: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 3px;
}
.jgl-reacts[hidden] { display: none !important; }
.jgl-react-chip {
	background: var(--jgl-panel2);
	border: 1px solid var(--jgl-line);
	border-radius: 999px;
	color: var(--jgl-text);
	font-size: 12px;
	padding: 1px 8px;
	cursor: pointer;
	line-height: 1.5;
}
.jgl-react-chip:hover { border-color: var(--jgl-accent); }
.jgl-react-chip.is-mine { background: rgba(246, 116, 255, 0.18); border-color: var(--jgl-accent); }
.jgl-reactpick {
	/* body-appended: the .jgl vars don't reach here — redeclare them */
	--jgl-line: #3d2352;
	--jgl-text: #ece2f6;
	--jgl-muted: #b8a5cb;
	--jgl-accent: #f674ff;
	position: fixed;
	z-index: 10001;
	width: 302px;
	max-width: calc(100vw - 16px);
	max-height: 260px;
	overflow-y: auto;
	background: #2a1638;
	border: 1px solid var(--jgl-line);
	border-radius: 12px;
	padding: 8px;
	color: var(--jgl-text);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
}
.jgl-reactpick-sect {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--jgl-muted);
	margin: 6px 2px 4px;
}
.jgl-reactpick-sect:first-child { margin-top: 0; }
.jgl-reactpick-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 2px;
}
.jgl-reactpick button {
	background: none;
	border: 0;
	font-size: 19px;
	padding: 4px;
	border-radius: 8px;
	cursor: pointer;
	transition: background .08s, transform .08s;
}
.jgl-reactpick button:hover,
.jgl-reactpick button:focus-visible {
	background: rgba(246, 116, 255, .28);
	transform: scale(1.18);
}
.jgl-msg-txt { cursor: pointer; white-space: pre-wrap; } /* Shift+Enter line breaks render */
.jgl-line[data-id] { cursor: pointer; } /* reactable system lines invite the click like user messages do */

/* ---------------- @mentions ---------------- */
.jgl-mention {
	color: var(--jgl-accent);
	background: rgba(246, 116, 255, 0.14);
	border-radius: 4px;
	padding: 0 3px;
	font-weight: 700;
}
/* the whole message glows for the person who was pinged */
.jgl-msg.is-mentioned {
	background: rgba(246, 116, 255, 0.09);
	border-left: 3px solid var(--jgl-accent);
	border-radius: 0 8px 8px 0;
}
.jgl-msg.is-mentioned .jgl-mention.is-me { background: rgba(246, 116, 255, 0.30); color: #fff; }
.jgl-mention-pop {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 44px;
	right: 60px;
	background: var(--jgl-panel2);
	border: 1px solid var(--jgl-line);
	border-radius: 10px;
	padding: 4px;
	z-index: 30;
	max-height: 220px;
	overflow-y: auto;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.jgl-mention-item {
	display: block;
	width: 100%;
	text-align: left;
	padding: 6px 10px;
	background: transparent;
	border: 0;
	color: var(--jgl-text);
	cursor: pointer;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
}
.jgl-mention-item.is-active,
.jgl-mention-item:hover { background: rgba(246, 116, 255, 0.16); color: var(--jgl-accent); }
.jgl-emoji-search {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 8px;
	padding: 6px 10px;
	background: rgba(0, 0, 0, .25);
	border: 1px solid var(--jgl-line);
	border-radius: 8px;
	color: var(--jgl-text);
	font-size: 13px;
	position: sticky;
	top: 0;
	z-index: 1;
}
.jgl-emoji-search::placeholder { color: rgba(236, 226, 246, .55); }
.jgl-emoji-search:focus { outline: none; border-color: var(--jgl-accent); }
/* solid backdrop while emojis scroll underneath the sticky bar */
.jgl-reactpick .jgl-emoji-search { background: #2a1638; top: -8px; color: #ece2f6; }
.jgl-emoji-pop .jgl-emoji-search { background: var(--jgl-panel2); top: -8px; }
.jgl-reactpick [hidden],
.jgl-emoji-pop [hidden] { display: none !important; }
.jgl-emoji-std { font-size: 21px; line-height: 1; padding: 3px 4px; }
.jgl-lvl {
	display: inline-block;
	margin-left: 5px;
	padding: 0 5px;
	border-radius: 6px;
	background: rgba(246, 116, 255, 0.14);
	color: var(--jgl-accent);
	font-size: 10px;
	font-weight: 800;
	vertical-align: 1px;
	/* a long name squeezes the head row — the chip must never wrap ("Lv"/"18"
	   stacking) and never gets crushed; the name ellipsizes instead */
	white-space: nowrap;
	flex: 0 0 auto;
}
.jgl-emoji { width: 22px; height: 22px; vertical-align: -5px; margin: 0 1px; }
/* emote-only messages go jumbo, Discord-style */
.is-emoteonly .jgl-emoji { width: 48px; height: 48px; vertical-align: -12px; margin: 2px; }
.jgl-points-pay { border-color: #d4a24a !important; color: #ffcf66; }

/* ---------------- show triggers (in the menu bar) ---------------- */
.jgl-trig {
	background: var(--jgl-panel2);
	border: 1px solid var(--jgl-line);
	color: var(--jgl-text);
	font-weight: 800;
	font-size: 13px;
	padding: 9px 14px;
	border-radius: 10px;
	cursor: pointer;
	white-space: nowrap;
}
.jgl-trig:hover:not(:disabled) { border-color: var(--jgl-accent); }
/* the THEME paints buttons red on focus/active — never on the show triggers.
   Only .is-on / .is-warn may color the BRB button. */
.jgl-trig:hover:not(:disabled),
.jgl-trig:focus:not(:disabled),
.jgl-trig:focus-visible:not(:disabled),
.jgl-trig:active:not(:disabled) { background: var(--jgl-panel2) !important; outline: none; }
.jgl-trig-brb.is-on,
.jgl-trig-brb.is-on:hover,
.jgl-trig-brb.is-on:focus,
.jgl-trig-brb.is-on:active { background: rgba(255, 207, 102, 0.08) !important; }
.jgl-trig-brb.is-warn,
.jgl-trig-brb.is-warn:hover,
.jgl-trig-brb.is-warn:focus,
.jgl-trig-brb.is-warn:active { background: rgba(255, 77, 77, 0.12) !important; }
.jgl-trig:disabled { opacity: .45; cursor: not-allowed; }
.jgl-trig-cum { border-color: var(--jgl-accent2); }
.jgl-trig-ruin { border-color: #7a3d4a; }
.jgl-trig-brb.is-on {
	border-color: #ffcf66;
	color: #ffcf66;
	background: rgba(255, 207, 102, 0.08);
	animation: jglBlink 1.8s ease-in-out infinite;
}
/* AFK over the limit: hard red flash until the ratio recovers */
.jgl-trig-brb.is-warn {
	border-color: #ff4d4d;
	color: #ff6b6b;
	background: rgba(255, 77, 77, 0.12);
	animation: jglWarnFlash 0.9s ease-in-out infinite;
}
@keyframes jglWarnFlash {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); }
	50%      { box-shadow: 0 0 12px 2px rgba(255, 77, 77, .55); background: rgba(255, 77, 77, .28); }
}

/* skip (limited "skip my turn" requests) */
.jgl-skip { display: inline-flex; align-items: center; gap: 6px; }
.jgl-skip[hidden] { display: none !important; }
.jgl-trig-skip.is-on {
	border-color: #8fd0ff;
	color: #8fd0ff;
	background: rgba(143, 208, 255, 0.1);
	animation: jglBlink 1.8s ease-in-out infinite;
}
.jgl-skip-left { font-size: 12px; color: var(--jgl-muted); white-space: nowrap; }

/* arousal meter (0-5) */
.jgl-arousal {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 4px;
}
.jgl-arousal-label { font-size: 13px; font-weight: 800; color: var(--jgl-muted); white-space: nowrap; }
.jgl-arousal-label b {
	color: #ff8f6b;
	font-size: 14px;
	/* different digits have different widths — the whole menu bar wiggled
	   1-2px whenever the arousal number changed. Reserve one fixed slot. */
	display: inline-block;
	min-width: 1.2ch;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.jgl-arousal input[type="range"] {
	width: 92px;
	accent-color: var(--jgl-accent);
	cursor: pointer;
}
.jgl-arousal-info {
	position: relative;
	color: var(--jgl-muted);
	font-size: 14px;
	cursor: help;
	outline: none;
}
.jgl-arousal-info:hover, .jgl-arousal-info:focus { color: var(--jgl-accent); }
/* custom tooltip: instant on hover AND on click/focus (native title tooltips
   are slow and die after a click) */
.jgl-arousal-tip {
	display: none;
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	width: 340px;
	max-width: 80vw;
	background: #2a1638;
	border: 1px solid var(--jgl-accent2);
	border-radius: 12px;
	padding: 12px 14px;
	z-index: 10002;
	box-shadow: 0 14px 44px rgba(0, 0, 0, .55);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--jgl-text);
	text-align: left;
	cursor: default;
}
.jgl-arousal-tip strong { display: block; color: var(--jgl-accent); margin-bottom: 6px; }
.jgl-arousal-tip span { display: block; color: var(--jgl-muted); }
.jgl-arousal-info:hover .jgl-arousal-tip,
.jgl-arousal-info:focus .jgl-arousal-tip,
.jgl-arousal-info:focus-within .jgl-arousal-tip,
.jgl-arousal-info.is-open .jgl-arousal-tip { display: block; }

/* small confirmation toast (e.g. currency added) */
.jgl-toast {
	position: fixed;
	left: 50%;
	bottom: 46px;
	transform: translateX(-50%);
	z-index: 10001;
	background: #2a1638;
	border: 1px solid #ffd76a;
	color: #ffd76a;
	font-size: 13.5px;
	font-weight: 800;
	padding: 9px 18px;
	border-radius: 999px;
	box-shadow: 0 10px 32px rgba(0, 0, 0, .5);
	transition: opacity .4s, transform .4s;
	pointer-events: none;
}
.jgl-toast.is-out { opacity: 0; transform: translateX(-50%) translateY(8px); }

/* being-called notification: unmissable, funscript-toast style */
.jgl-calltoast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	transform: translate(-50%, 20px);
	z-index: 99999;
	max-width: min(92vw, 560px);
	background: #a4650b;
	border: 2px solid #ffcf66;
	color: #fff;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.4;
	padding: 14px 22px;
	border-radius: 14px;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .45), 0 0 24px rgba(255, 207, 102, .35);
	opacity: 0;
	transition: opacity .3s ease, transform .3s ease;
	pointer-events: none;
	text-align: center;
	animation: jglBlink 1.2s ease-in-out infinite;
}
.jgl-calltoast.is-in { opacity: 1; transform: translate(-50%, 0); }
.jgl-charges {
	font-size: 12px;
	color: var(--jgl-muted);
	white-space: nowrap;
	padding: 0 4px;
}
.jgl-charges.is-empty { color: #ff8f8f; font-weight: 700; }

/* points (optional stream currency): a single balance button rolls out
   the add controls in their own drawer */
.jgl-points { display: inline-flex; align-items: center; }
.jgl-points[hidden] { display: none !important; }
.jgl-points-bal { font-size: 13px; font-weight: 800; color: #ffd76a; white-space: nowrap; }
.jgl-points-body { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jgl-points-bal2 { font-size: 13.5px; font-weight: 700; }
.jgl-points-bal2 b { color: #ffd76a; }
.jgl-points-btn {
	background: var(--jgl-panel2);
	border: 1px solid var(--jgl-line);
	color: var(--jgl-text);
	font-weight: 800;
	font-size: 12px;
	padding: 6px 10px;
	border-radius: 8px;
	cursor: pointer;
}
.jgl-points-btn:hover { border-color: #ffd76a; }
.jgl-points-btn[hidden] { display: none !important; }
.jgl-points-custom { display: inline-flex; align-items: center; gap: 4px; }
.jgl-points-custom[hidden] { display: none !important; }
.jgl-points-custom input {
	width: 76px;
	background: var(--jgl-panel2);
	border: 1px solid var(--jgl-line);
	border-radius: 8px;
	color: var(--jgl-text);
	padding: 6px 8px;
	font-size: 12px;
}

/* ---------------- chat form ---------------- */
.jgl-chatform {
	display: flex;
	gap: 8px;
	padding: 10px 12px 12px;
	position: relative;
	/* buttons stay pinned to the bottom at a fixed height as the input grows,
	   instead of stretching taller with it (Discord-style) */
	align-items: flex-end;
}
.jgl-chatform input,
.jgl-chatform textarea {
	flex: 1;
	min-width: 0;
	background: var(--jgl-panel2);
	border: 1px solid var(--jgl-line);
	border-radius: 10px;
	color: var(--jgl-text);
	padding: 9px 12px;
	font-size: 13.5px;
}
.jgl-chatform input:focus,
.jgl-chatform textarea:focus { outline: none; border-color: var(--jgl-accent); }
.jgl-chatform textarea {
	resize: none;
	font-family: inherit;
	line-height: 1.4;
	min-height: 39px;
	max-height: 92px;
	/* JS auto-grows the height to fit content, so no scrollbar appears until the
	   message actually exceeds max-height (then JS flips this to auto) */
	overflow-y: hidden;
	box-sizing: border-box;
}
/* keep the emoji + send buttons a fixed height at the bottom so they don't
   jitter/grow with the textarea */
.jgl-chatform .jgl-btn,
.jgl-chatform .jgl-emoji-btn {
	flex: 0 0 auto;
	height: 39px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.jgl-btn {
	background: linear-gradient(135deg, var(--jgl-accent), #ffc2fd);
	border: 0;
	color: #27103a;
	font-weight: 800;
	font-size: 13px;
	padding: 9px 16px;
	border-radius: 10px;
	cursor: pointer;
	text-decoration: none !important;
	display: inline-block;
}
.jgl-btn:hover { filter: brightness(1.08); }
.jgl-btn-ghost { background: var(--jgl-panel2); color: var(--jgl-text); border: 1px solid var(--jgl-line); }
.jgl-emoji-btn {
	background: var(--jgl-panel2);
	border: 1px solid var(--jgl-line);
	border-radius: 10px;
	font-size: 15px;
	padding: 0 10px;
	cursor: pointer;
}
.jgl-emoji-btn[hidden] { display: none !important; } /* guests */
.jgl-emoji-pop {
	position: absolute;
	bottom: 64px;
	left: 12px;
	right: 12px;
	max-height: 220px;
	overflow-y: auto;
	background: var(--jgl-panel2);
	border: 1px solid var(--jgl-line);
	border-radius: 12px;
	padding: 8px;
	z-index: 20;
	color: var(--jgl-muted);
	font-size: 13px;
}
.jgl-emoji-pop[hidden] { display: none !important; }
.jgl-emoji-sect {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--jgl-muted);
	margin: 6px 4px 4px;
}
.jgl-emoji-sect:first-child { margin-top: 0; }
.jgl-emoji-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.jgl-emoji-pick {
	background: none;
	border: 0;
	border-radius: 8px;
	padding: 4px;
	cursor: pointer;
}
.jgl-emoji-pick:hover { background: var(--jgl-line); }
.jgl-emoji-pick img { width: 26px; height: 26px; display: block; }

/* ---------------- host mod menu (right-click a chat line) ---------------- */
.jgl-modmenu {
	/* body-appended: the .jgl vars don't reach here — redeclare them, else
	   the item text falls back to a dark default on the dark panel */
	--jgl-line: #3d2352;
	--jgl-text: #ece2f6;
	--jgl-accent: #f674ff;
	position: fixed;
	z-index: 10000;
	min-width: 200px;
	background: #2a1638;
	border: 1px solid var(--jgl-line);
	border-radius: 10px;
	padding: 4px;
	color: var(--jgl-text);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
	display: flex;
	flex-direction: column;
}
.jgl-modmenu-item {
	background: none;
	border: 0;
	color: #ece2f6;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	padding: 8px 12px;
	border-radius: 7px;
	cursor: pointer;
	white-space: nowrap;
}
.jgl-modmenu-item:hover { background: var(--jgl-line); }
.jgl-modmenu-item.is-danger { color: #ff8f8f; }

/* ---------------- one-on-one promo ---------------- */
.jgl-ooo-promo {
	margin: 0 12px 12px;
	padding: 10px 12px;
	background: linear-gradient(135deg, rgba(246,116,255,.12), rgba(169,70,180,.12));
	border: 1px solid var(--jgl-line);
	border-radius: 10px;
	font-size: 12.5px;
	color: var(--jgl-muted);
	line-height: 1.5;
}
.jgl-ooo-promo strong { color: var(--jgl-text); }
.jgl-ooo-promo a { color: var(--jgl-accent); font-weight: 700; }

/* ---------------- conversion funnel modal ---------------- */
.jgl-gatemodal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(16, 6, 26, 0.72);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.jgl-gatemodal[hidden] { display: none !important; }
.jgl-gatemodal-card {
	position: relative;
	max-width: 430px;
	background: var(--jgl-panel, #27103a);
	border: 1px solid #3d2352;
	border-radius: 16px;
	padding: 26px 28px;
	text-align: center;
	color: #ece2f6;
	box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.jgl-gatemodal-card .jgl-drawer-x { position: absolute; top: 10px; right: 14px; }
.jgl-gatemodal-card h3 { margin: 6px 0 10px; font-size: 20px; color: #fff; }
.jgl-gatemodal-card p { font-size: 14px; color: #cbb8de; line-height: 1.55; }
.jgl-gatemodal-card strong { color: #f674ff; }
.jgl-locked-icon { font-size: 34px; }
.jgl-gate-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px !important; }

/* ---------------- stream rules popup (spec F5/F8) ---------------- */
.jgl-rules-modal {
	position: fixed; inset: 0; z-index: 10000;
	background: rgba(16, 6, 26, 0.78);
	display: flex; align-items: center; justify-content: center; padding: 20px;
}
.jgl-rules-modal[hidden] { display: none !important; }
.jgl-rules-card {
	max-width: 460px; width: 100%;
	background: var(--jgl-panel, #27103a);
	border: 1px solid #3d2352; border-radius: 16px;
	padding: 24px 26px; color: #ece2f6;
	box-shadow: 0 30px 80px rgba(0,0,0,.5);
	max-height: 82vh; display: flex; flex-direction: column;
}
.jgl-rules-card h3 { margin: 0 0 12px; font-size: 21px; color: #fff; text-align: center; flex: 0 0 auto; }
/* flex:1 + min-height:0 lets the body actually shrink and scroll inside the
   82vh card instead of overflowing it when the rules are long */
.jgl-rules-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; font-size: 15px; line-height: 1.55; color: #e4d6f2; overscroll-behavior: contain; }
.jgl-rules-body p { margin: 0; white-space: pre-wrap; }
.jgl-rules-list { margin: 0; padding-left: 22px; }
.jgl-rules-list li { margin: 0 0 8px; }
.jgl-rules-ok { margin-top: 18px; align-self: center; font-size: 15px; padding: 10px 24px; flex: 0 0 auto; }

/* ---------------- pre-stream start screen (spec F5), viewer side ---------------- */
/* covers the whole stage and sits above the BRB cover so viewers see it even
   before the video is playing; scrolls if the content is tall */
.jgl-startscreen {
	position: absolute; inset: 0; z-index: 40;
	display: none; flex-direction: column; align-items: center; justify-content: center;
	gap: 14px; text-align: center; padding: 5% 7%; box-sizing: border-box;
	overflow-y: auto; overscroll-behavior: contain;
	background: radial-gradient(circle at 50% 32%, #2a0f3f 0%, #16081f 68%, #0a0410 100%);
	color: #fff;
}
.jgl-ss-title {
	margin: 0; font-size: clamp(20px, 4.2vw, 40px); font-weight: 900; line-height: 1.12;
	background: linear-gradient(135deg, #F674FF, #FFC2FD);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	text-shadow: 0 0 24px rgba(246, 116, 255, .3);
}
.jgl-ss-block { margin: 0; font-size: clamp(13px, 2vw, 19px); font-weight: 700; color: #f0d9ff; max-width: 640px; line-height: 1.42; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.jgl-ss-panels { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.jgl-ss-futa { position: absolute; right: 14px; bottom: 40px; margin: 0; font-size: clamp(10px, 1.1vw, 13px); font-weight: 500; color: #d9bde6; opacity: .75; max-width: 46%; text-align: right; line-height: 1.35; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
/* the site links, mirrored from the OBS overlay footer so they aren't hidden
   behind this opaque viewer-page start screen */
.jgl-ss-foot { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: space-between; padding: 0 5%; box-sizing: border-box; font-size: clamp(11px, 1.6vw, 16px); font-weight: 800; letter-spacing: .5px; pointer-events: auto; }
.jgl-ss-foot a { color: #F674FF; text-decoration: none; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.jgl-ss-foot a:hover { text-decoration: underline; }
.jgl-ss-panel { background: rgba(246, 116, 255, .08); border: 1px solid rgba(246, 116, 255, .42); border-radius: 14px; padding: 12px 18px; min-width: 150px; max-width: 300px; }
.jgl-ss-panel h3 { margin: 0 0 6px; font-size: clamp(14px, 2.2vw, 20px); color: #FFC2FD; }
.jgl-ss-panel > div { font-size: clamp(12px, 1.8vw, 17px); white-space: pre-wrap; text-align: left; line-height: 1.35; color: #fff; }

/* ---------------- responsive ---------------- */
/* phones held upright: single column — video, menu, chat */
/* phones (both orientations): denser chatlog — smaller type, avatars and
   chrome so more of the log fits on screen */
@media (max-width: 980px) {
	.jgl-line { font-size: 11.5px; line-height: 1.35; }
	.jgl-msg { grid-template-columns: 26px minmax(0, 1fr); column-gap: 7px; padding-top: 5px; }
	.jgl-ava { width: 26px; height: 26px; margin-top: 1px; }
	.jgl-ava.is-fallback { font-size: 12px; }
	.jgl-msg-head { font-size: 11.5px; gap: 5px; }
	.jgl-msg-time { font-size: 9.5px; }
	.jgl-msg-body { font-size: 11.5px; line-height: 1.35; }
	.jgl-lvl { font-size: 8.5px; padding: 0 4px; margin-left: 3px; }
	.jgl-react-chip { font-size: 10.5px; padding: 0 6px; }
	.jgl-voteres-head { font-size: 11.5px; }
	.jgl-voteres-row { font-size: 11px; }
	/* fullscreen is the show room — the promo card just steals chat space */
	.jgl:fullscreen .jgl-ooo-promo, .jgl.is-fakefs .jgl-ooo-promo { display: none !important; }
}
@media (max-width: 980px) and (orientation: portrait) {
	.jgl { grid-template-columns: minmax(0, 1fr); }
	.jgl-sidewrap { position: static; min-height: 0; }
	.jgl-side { position: relative; inset: auto; height: 60vh; }
	/* dissolve the right-side group: as one non-shrinking item its four
	   buttons overflow the row instead of wrapping individually */
	.jgl-menubar-right { display: contents; }
	/* fullscreen: ONE fixed screen, no page scrolling — video on top, a
	   swipeable single-row menu, chat filling everything below */
	.jgl:fullscreen, .jgl.is-fakefs {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: 8px;
		height: 100%;
		overflow: hidden;
	}
	.jgl:fullscreen .jgl-main, .jgl.is-fakefs .jgl-main { display: contents; }
	.jgl:fullscreen .jgl-stage, .jgl.is-fakefs .jgl-stage {
		flex: none;
		width: 100%;
		aspect-ratio: 16 / 9;
		/* relative (not static): the covers/hostdock are absolute children —
		   unpositioned they'd anchor to the fullscreen root and paint over
		   the whole screen */
		position: relative;
		top: auto;
		border-radius: 10px;
	}
	.jgl:fullscreen .jgl-menubar, .jgl.is-fakefs .jgl-menubar {
		flex: none;
		align-self: stretch;
		width: auto;
		min-width: 0;
		max-width: 100%;
		/* WRAPPED rows — nothing hidden behind a swipe nobody discovers */
		flex-wrap: wrap;
		gap: 6px;
		padding: 6px 8px;
	}
	.jgl:fullscreen .jgl-menubar > *, .jgl.is-fakefs .jgl-menubar > *,
	.jgl:fullscreen .jgl-menubar-right > *, .jgl.is-fakefs .jgl-menubar-right > * {
		flex-shrink: 0; /* buttons must never compress until text spills out */
	}
	.jgl:fullscreen .jgl-drawer, .jgl.is-fakefs .jgl-drawer {
		/* portrait keeps drawers in the flow (the chat shrinks instead) */
		position: static;
		transform: none;
		flex: none;
		width: 100%;
		max-height: 32vh;
		overflow-y: auto;
	}
	.jgl:fullscreen .jgl-sidewrap, .jgl.is-fakefs .jgl-sidewrap {
		flex: 1 1 auto;
		min-height: 0;
		position: relative;
	}
	.jgl:fullscreen .jgl-side, .jgl.is-fakefs .jgl-side {
		position: absolute;
		inset: 0;
		height: auto;
	}
}
/* phones held sideways: a single column can't work (the 16:9 video alone
   is taller than the screen) — use the desktop side-by-side layout with a
   narrower chat column */
@media (max-width: 980px) and (orientation: landscape) {
	.jgl {
		grid-template-columns: minmax(0, 1fr) minmax(180px, 30vw);
		gap: 8px;
		padding: 8px;
	}
	/* fullscreen tool rail: a slim third column right of the chat holding
	   fullscreen/options/volume/voting/dice (JS docks the buttons there) */
	.jgl.has-sidemenu:fullscreen{
		grid-template-columns: minmax(0, 1fr) minmax(150px, 26vw) 44px;
	}
	.jgl:fullscreen .jgl-sidemenu:not([hidden]), .jgl.is-fakefs .jgl-sidemenu:not([hidden]) {
		display: flex;
		flex-direction: column;
		gap: 6px;
		min-height: 0;
		overflow-y: auto;
		scrollbar-width: none;
	}
	.jgl:fullscreen .jgl-sidemenu .jgl-tool, .jgl.is-fakefs .jgl-sidemenu .jgl-tool {
		flex: 0 0 auto;
		padding: 9px 4px;
		font-size: 16px;
		text-align: center;
	}
	.jgl:fullscreen .jgl-sidemenu .jgl-btnlabel, .jgl.is-fakefs .jgl-sidemenu .jgl-btnlabel { display: none; }
	/* squeeze the remaining bar so it keeps to ONE row beside the rail —
	   a wrapped second row sits below the fold where nobody finds it */
	.jgl.has-sidemenu:fullscreen .jgl-menubar{
		gap: 2px;
		padding: 5px 6px;
		flex-wrap: nowrap;
		align-items: stretch;
		/* vertical edges are never shaved (height is reserved below); if an
		   extreme width still overflows, the bar pans with a visibly cut
		   button as the hint — better than an invisible second row */
		overflow-x: auto;
		overflow-y: visible;
		scrollbar-width: none;
	}
	.jgl.has-sidemenu:fullscreen .jgl-menubar .jgl-trig,
	.jgl.has-sidemenu:fullscreen .jgl-menubar .jgl-tool{
		padding: 4px 6px;
		font-size: 13px;
		line-height: 1.2;
	}
	/* the rail freed the space: tiny labels come back on the bar buttons */
	.jgl.has-sidemenu:fullscreen .jgl-menubar .jgl-btnlabel{
		display: inline;
		font-size: 9px;
		font-weight: 700;
		letter-spacing: 0;
	}
	.jgl.has-sidemenu:fullscreen .jgl-arousal input[type="range"]{ width: 52px; }
	/* the slider is the one thing that can give way on very narrow phones */
	.jgl.has-sidemenu:fullscreen .jgl-menubar .jgl-arousal{
		flex-shrink: 1;
		min-width: 56px;
		overflow: hidden;
	}
	/* compact chips: the counters and the points balance are the widest
	   non-button items — slim them so the whole row fits beside the rail */
	.jgl.has-sidemenu:fullscreen .jgl-charges,
	.jgl.has-sidemenu:fullscreen .jgl-skip-left{
		font-size: 10px;
	}
	.jgl.has-sidemenu:fullscreen .jgl-points .jgl-tool{ padding: 3px 4px; }
	.jgl.has-sidemenu:fullscreen .jgl-points-bal{ font-size: 10.5px; }
	/* reserve enough height under the video that the bar never gets its
	   button edges clipped (bar ~36px + gaps + root padding) */
	.jgl.has-sidemenu:fullscreen .jgl-main{
		--jgl-fs-w: min(100%, calc((100vh - 74px) * 16 / 9));
	}
	.jgl-sidewrap { min-height: 0; }
	/* short screens: ICON-ONLY buttons so the whole menu fits without
	   swiping or eating the video's height; titles still explain them */
	.jgl-menubar { min-width: 0; max-width: 100%; gap: 6px; padding: 6px 8px; }
	.jgl-menubar-right { display: contents; }
	.jgl-menubar .jgl-btnlabel { display: none; }
	.jgl-menubar .jgl-trig, .jgl-menubar .jgl-tool { padding: 8px 10px; font-size: 15px; }
	.jgl-menubar > *, .jgl-menubar-right > * { flex-shrink: 0; }
	.jgl-arousal input[type="range"] { width: 70px; }
	.jgl:fullscreen .jgl-menubar, .jgl.is-fakefs .jgl-menubar {
		align-self: stretch;
		width: auto;
		min-width: 0;
		max-width: 100%;
	}
	.jgl:fullscreen .jgl-main, .jgl.is-fakefs .jgl-main {
		--jgl-fs-w: min(100%, calc((100vh - 76px) * 16 / 9));
	}
}

/* ---- fake fullscreen (iPhone: no element-fullscreen API) ---- */
.jgl.is-fakefs {
	position: fixed;
	inset: 0;
	z-index: 99990;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}
html.jgl-fakefs-page, html.jgl-fakefs-page body { overflow: hidden !important; }

/* "Just Watching" (options drawer) */
.jgl-opts-jw { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); }
.jgl-opts-jw button:disabled { opacity: .55; cursor: default; }
.jgl-jw-warn { margin: 6px 0 0; font-size: 11.5px; line-height: 1.4; color: #ff9aa2; opacity: .9; }

/* ---------------- zen mode: hide the ENTIRE UI ----------------
   Voiced members asked for just the stream — no chat, no buttons. The 🫥
   menu button turns it on; the floating 👁 pill on the stage turns it off.
   Real fullscreen also wears .is-fakefs (see live.js), so class selectors
   cover both without :fullscreen in a comma list. */
.jgl.is-zen { grid-template-columns: minmax(0, 1fr); }
.jgl.is-zen .jgl-menubar,
.jgl.is-zen .jgl-sidewrap,
.jgl.is-zen .jgl-sidemenu,
.jgl.is-zen .jgl-drawer,
.jgl.is-zen .jgl-hostdock { display: none !important; }
/* fullscreen zen: the stage may take the room the menu bar reserved */
.jgl.is-zen.is-fakefs .jgl-main {
	--jgl-fs-w: min(100%, calc((100vh - 24px) * 16 / 9));
}
.jgl-zen-exit {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 60;
	padding: 8px 14px;
	border: 0;
	border-radius: 999px;
	background: rgba(28, 14, 41, .55);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	opacity: .35;
	transition: opacity .2s;
}
.jgl-zen-exit:hover, .jgl-zen-exit:focus-visible { opacity: 1; }
.jgl-zen-exit[hidden] { display: none !important; }

/* ---------------- spinning wheel (host-fired) ---------------- */
.jgl-wheel {
	position: absolute;
	inset: 0;
	z-index: 55;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(12, 4, 20, .55);
	opacity: 0;
	transition: opacity .3s;
	pointer-events: none;
}
.jgl-wheel.is-in { opacity: 1; }
.jgl-wheel-box { position: relative; }
.jgl-wheel-box canvas { display: block; filter: drop-shadow(0 10px 34px rgba(0, 0, 0, .55)); }
.jgl-wheel-ptr {
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-top: 26px solid #ffd76a;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .65));
}
.jgl-wheel-res {
	position: absolute;
	left: 50%;
	bottom: -18px;
	transform: translateX(-50%);
	white-space: nowrap;
	max-width: 92vw;
	overflow: hidden;
	text-overflow: ellipsis;
	background: linear-gradient(90deg, #f674ff, #a946b4);
	color: #fff;
	font-weight: 900;
	font-size: 19px;
	padding: 10px 24px;
	border-radius: 999px;
	box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
	animation: jglWheelRes .35s ease-out;
}
@keyframes jglWheelRes { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
.jgl-wheel-res[hidden] { display: none; }