/* Games in courses: the game item on the course page (it reads the courses plugin's --gtc-* properties, which the
 * theme sets) and its editor in the app's Courses section (slr- classes). */

/* The kind's icon in outlines, steps and chips: a little gamepad, drawn with a mask in the text colour. */
.gtc-kind--game .gtc-icon,
.gtc-adm-kind.is-game .gtc-icon {
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11h4M8 9v4M15 12h.01M18 10h.01'/%3E%3Cpath d='M17.3 5H6.7a4 4 0 0 0-4 3.6L2 15.5A3 3 0 0 0 5 19c1 0 1.5-.5 2-1l1.4-1.4A2 2 0 0 1 9.8 16h4.4a2 2 0 0 1 1.4.6L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3.5l-.7-6.9A4 4 0 0 0 17.3 5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11h4M8 9v4M15 12h.01M18 10h.01'/%3E%3Cpath d='M17.3 5H6.7a4 4 0 0 0-4 3.6L2 15.5A3 3 0 0 0 5 19c1 0 1.5-.5 2-1l1.4-1.4A2 2 0 0 1 9.8 16h4.4a2 2 0 0 1 1.4.6L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3.5l-.7-6.9A4 4 0 0 0 17.3 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* the viewer */
.gtg-ci { display: grid; gap: 16px; }
.gtg-ci__intro { margin: 0; }
.gtg-ci__card {
	display: grid;
	grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	padding: 14px;
	border: var(--gtc-border-width, 2px) solid var(--gtc-border, #1D1B3A);
	border-radius: var(--gtc-radius-lg, 16px);
	background: var(--gtc-surface, #fff);
}
.gtg-ci__art { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--gtc-radius, 12px); border: 2px solid var(--gtc-border, #1D1B3A); }
.gtg-ci__title { margin: 0 0 4px; font-family: var(--gtc-font-display, inherit); font-size: 1.5em; line-height: 1.1; }
.gtg-ci__tagline { margin: 0 0 10px; color: var(--gtc-text-soft, inherit); }
.gtg-ci__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.gtg-ci__chips li { padding: 2px 10px; border: 1.5px solid var(--gtc-border, #1D1B3A); border-radius: 999px; font-size: 0.85em; font-weight: 600; }
.gtg-ci__req { margin: 0 0 10px; }
.gtg-ci__status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; font-weight: 600; }
.gtg-ci__status.is-met { color: var(--gtc-success, #1D7A3E); }
.gtg-ci__check { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gtc-success, #1D7A3E); color: #fff; font-size: 13px; }
.gtg-ci__grade { padding: 2px 10px; border-radius: 999px; background: var(--gtc-accent-soft, #FFF3D1); color: var(--gtc-text, inherit); }
.gtg-ci__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gtg-ci__actions p { margin: 0; }
.gtg-ci__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	max-height: 80vh;
	border: var(--gtc-border-width, 2px) solid var(--gtc-border, #1D1B3A);
	border-radius: var(--gtc-radius-lg, 16px);
	overflow: hidden;
	background: #0F0E22;
}
.gtg-ci__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gtg-ci__code { padding: 14px; border: 2px dashed var(--gtc-border, #1D1B3A); border-radius: var(--gtc-radius-lg, 16px); }
.gtg-ci__code-label { display: block; margin: 0 0 6px; font-weight: 700; }
.gtg-ci__code-row { display: flex; flex-wrap: wrap; gap: 8px; }
.gtg-ci__code-row input { flex: 1 1 180px; min-width: 0; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.gtg-ci__hint { margin: 8px 0 0; font-size: 0.9em; color: var(--gtc-text-soft, inherit); }
.gtg-ci__msg { margin: 8px 0 0; font-weight: 600; }
@media (max-width: 640px) {
	.gtg-ci__card { grid-template-columns: 1fr; }
	.gtg-ci__frame { aspect-ratio: 3 / 4; max-height: calc(100svh - 80px); }
}

/* the editor */
.gtg-ce__reqs { display: grid; gap: 8px; }
.gtg-ce__req { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--slr-border); border-radius: var(--slr-radius, 8px); cursor: pointer; }
.gtg-ce__req.is-on { border-color: var(--slr-accent); background: var(--slr-accent-soft); }
.gtg-ce__req input { margin-top: 3px; }
.gtg-ce__req span { display: flex; flex-direction: column; gap: 2px; }