.athgl {
	--athgl-red: #ff2d3c;
	--athgl-text: inherit;
	--athgl-muted: rgba(127, 127, 127, .9);
	--athgl-line: rgba(127, 127, 127, .25);
	--athgl-surface: rgba(127, 127, 127, .08);
	--athgl-radius: 14px;
	color: var(--athgl-text);
	max-width: 100%;
}
.athgl *, .athgl *::before, .athgl *::after { box-sizing: border-box; }

/* Badges + dot */
.athgl-badge {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--athgl-red); color: #fff;
	font-size: 11px; font-weight: 800; letter-spacing: .08em;
	padding: 3px 8px; border-radius: 6px; line-height: 1.2;
}
.athgl-badge::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff;
	animation: athgl-pulse 1.4s ease-in-out infinite;
}
.athgl-badge.is-replay { background: #333; }
.athgl-badge.is-replay::before { display: none; }
.athgl-dot {
	display: inline-block; width: 8px; height: 8px; border-radius: 50%;
	background: var(--athgl-red); vertical-align: middle;
	animation: athgl-pulse 1.4s ease-in-out infinite;
}
@keyframes athgl-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
	.athgl-badge::before, .athgl-dot { animation: none; }
}

.athgl-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.athgl-title { margin: 0; font-size: 1.1em; font-weight: 700; line-height: 1.3; }
.athgl-sub { margin: 28px 0 12px; font-size: 1em; font-weight: 700; }
.athgl-empty { color: var(--athgl-muted); padding: 24px 0; text-align: center; }

/* Player + chat */
.athgl-stage { display: grid; gap: 12px; grid-template-columns: 1fr; }
.athgl-video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--athgl-radius); overflow: hidden; }
.athgl-video iframe, .athgl-chat iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.athgl-chat { display: none; position: relative; border-radius: var(--athgl-radius); overflow: hidden; border: 1px solid var(--athgl-line); }
.athgl-chat-link { display: inline-block; margin-top: 10px; font-weight: 600; }
@media (min-width: 900px) {
	.athgl-stage.has-chat { grid-template-columns: minmax(0, 1fr) 340px; }
	.athgl-stage.has-chat .athgl-chat { display: block; min-height: 100%; }
	.athgl-chat-link { display: none; }
}

/* Buttons */
.athgl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 20px; margin-top: 14px;
	border: 1px solid var(--athgl-line); border-radius: 999px;
	background: transparent; color: inherit; font-weight: 700; font-size: 15px;
	cursor: pointer; text-decoration: none;
}
.athgl-btn:disabled { opacity: .6; cursor: default; }
.athgl-btn-live { background: var(--athgl-red); border-color: var(--athgl-red); color: #fff !important; }
.athgl-btn-live .athgl-dot { background: #fff; }
.athgl-btn-end { border-color: var(--athgl-red); color: var(--athgl-red); }

/* Form */
.athgl-form, .athgl-locked {
	background: var(--athgl-surface); border: 1px solid var(--athgl-line);
	border-radius: var(--athgl-radius); padding: 20px;
}
.athgl-form-title { margin: 0 0 10px; font-size: 1.25em; }
.athgl-steps { margin: 0 0 16px 18px; padding: 0; color: var(--athgl-muted); font-size: 14px; line-height: 1.5; }
.athgl-label { display: block; font-weight: 600; font-size: 14px; margin: 12px 0 6px; }
.athgl-input {
	width: 100%; min-height: 44px; padding: 10px 12px; font-size: 16px;
	border: 1px solid var(--athgl-line); border-radius: 10px; background: transparent; color: inherit;
}
.athgl-msg { color: var(--athgl-red); font-size: 14px; margin: 10px 0 0; }
.athgl-form .athgl-btn-live { width: 100%; }
.athgl-locked { text-align: center; }
.athgl-lock { font-size: 28px; }

/* Grid (replays + live now) */
.athgl-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.athgl-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.athgl-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #111; }
.athgl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.athgl-thumb .athgl-badge { position: absolute; top: 8px; left: 8px; }
.athgl-card-who { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.athgl-card-who img { border-radius: 50%; }
.athgl-card-title { font-size: 14px; line-height: 1.35; }
.athgl-card-meta { font-size: 12px; color: var(--athgl-muted); }

/* In the activity feed */
.athgl-activity { margin: 8px 0; }
.athgl-activity .athgl-btn-live { margin-top: 10px; }